aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/collections/CollectionSubView.tsx3
-rw-r--r--src/client/views/collections/TabDocView.tsx8
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx30
-rw-r--r--src/client/views/nodes/LinkDocPreview.tsx2
-rw-r--r--src/client/views/nodes/PDFBox.scss7
-rw-r--r--src/client/views/nodes/PDFBox.tsx7
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx42
-rw-r--r--src/client/views/pdf/PDFViewer.scss2
-rw-r--r--src/client/views/pdf/PDFViewer.tsx31
9 files changed, 86 insertions, 46 deletions
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index aa6b74f2d..c79547bb4 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -270,7 +270,6 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
return;
}
- console.log("Html = ", html);
if (html) {
if (FormattedTextBox.IsFragment(html)) {
const href = FormattedTextBox.GetHref(html);
@@ -333,7 +332,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text;
this.props.addDocument(htmlDoc);
if (srcWeb) {
- const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")?.[0].contentDocument?.getSelection()?.focusNode as any);
+ const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")?.[0]?.contentDocument?.getSelection()?.focusNode as any);
if (focusNode) {
const rect = "getBoundingClientRect" in focusNode ? focusNode.getBoundingClientRect() : focusNode?.parentElement.getBoundingClientRect();
const x = (rect?.x || 0);
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index f3d2aaa8f..589649ad9 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -68,7 +68,6 @@ export class TabDocView extends React.Component<TabDocViewProps> {
tab.element[0].onmouseenter = (e: MouseEvent) => {
if (SnappingManager.GetIsDragging() && tab.contentItem !== tab.header.parent.getActiveContentItem()) {
tab.header.parent.setActiveContentItem(tab.contentItem);
- console.log("Seetting " + titleEle.value);
tab.setActive(true);
}
};
@@ -88,7 +87,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
(document.activeElement !== titleEle) && titleEle.focus();
}
};
- tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => v.topMost && v.props.Document === doc),
+ tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => (v.topMost || v.props.treeViewDoc) && v.props.Document === doc),
(selected) => selected && tab.contentItem !== tab.header.parent.getActiveContentItem() &&
UndoManager.RunInBatch(() => tab.header.parent.setActiveContentItem(tab.contentItem), "tab switch"));
@@ -190,9 +189,9 @@ export class TabDocView extends React.Component<TabDocViewProps> {
private onActiveContentItemChanged() {
if (this.props.glContainer.tab && this._isActive !== this.props.glContainer.tab.isActive) {
this._isActive = this.props.glContainer.tab.isActive;
- this._isActive && setTimeout(() => this.view && SelectionManager.SelectDoc(this.view, false), 0);
(CollectionDockingView.Instance as any)._goldenLayout?.isInitialised && CollectionDockingView.Instance.stateChanged();
!this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one.
+ this._isActive && this.view && SelectionManager.SelectDoc(this.view, false);
}
}
@@ -330,6 +329,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
}
focusFunc = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => void) => afterFocus?.();
setView = action((view: DocumentView) => this._view = view);
+ active = () => this._isActive;
@computed get docView() {
TraceMobx();
return !this._document || this._document._viewType === CollectionViewType.Docking ? (null) :
@@ -349,7 +349,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
NativeWidth={this.nativeWidth() ? this.nativeWidth : undefined}
ScreenToLocalTransform={this.ScreenToLocalTransform}
renderDepth={0}
- parentActive={returnTrue}
+ parentActive={this.active}
whenActiveChanged={emptyFunction}
focus={this.focusFunc}
backgroundColor={CollectionDockingView.Instance.props.backgroundColor}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 3a2979696..417b4c1ff 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -103,8 +103,24 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
// showLinks={action(() => { })}
// />, { x: 300, y: 300 });
});
+
+
}
+ visibleY = (el: any) => {
+ var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height,
+ el = el.parentNode;
+ do {
+ rect = el.getBoundingClientRect();
+ if (top <= rect.bottom === false && getComputedStyle(el).overflow === "hidden") return rect.bottom;
+ // Check if the element is out of view due to a container scrolling
+ if ((top + height) <= rect.top && getComputedStyle(el).overflow === "hidden") return rect.top;
+ el = el.parentNode;
+ } while (el != document.body);
+ // Check its within the document viewport
+ return top;//top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden";
+ };
+
@computed get renderData() {
this._start;
if (SnappingManager.GetIsDragging() || !this.props.A.ContentDiv || !this.props.B.ContentDiv || !this.props.LinkDocs.length) {
@@ -115,16 +131,18 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
const bcont = this.props.B.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
const a = (acont.length ? acont[0] : this.props.A.ContentDiv).getBoundingClientRect();
const b = (bcont.length ? bcont[0] : this.props.B.ContentDiv).getBoundingClientRect();
- const apt = Utils.closestPtBetweenRectangles(a.left, a.top, a.width, a.height,
- b.left, b.top, b.width, b.height,
+ const atop = this.visibleY(this.props.A.ContentDiv);
+ const btop = this.visibleY(this.props.B.ContentDiv);
+ const apt = Utils.closestPtBetweenRectangles(a.left, atop, a.width, a.height,
+ b.left, btop, b.width, b.height,
a.left + a.width / 2, a.top + a.height / 2);
- const bpt = Utils.closestPtBetweenRectangles(b.left, b.top, b.width, b.height,
- a.left, a.top, a.width, a.height,
+ const bpt = Utils.closestPtBetweenRectangles(b.left, btop, b.width, b.height,
+ a.left, atop, a.width, a.height,
apt.point.x, apt.point.y);
const pt1 = [apt.point.x, apt.point.y];
const pt2 = [bpt.point.x, bpt.point.y];
- const pt1vec = [pt1[0] - (a.left + a.width / 2), pt1[1] - (a.top + a.height / 2)];
- const pt2vec = [pt2[0] - (b.left + b.width / 2), pt2[1] - (b.top + b.height / 2)];
+ const pt1vec = [pt1[0] - (a.left + a.width / 2), pt1[1] - (atop + a.height / 2)];
+ const pt2vec = [pt2[0] - (b.left + b.width / 2), pt2[1] - (btop + b.height / 2)];
const pt1len = Math.sqrt((pt1vec[0] * pt1vec[0]) + (pt1vec[1] * pt1vec[1]));
const pt2len = Math.sqrt((pt2vec[0] * pt2vec[0]) + (pt2vec[1] * pt2vec[1]));
const ptlen = Math.sqrt((pt1[0] - pt2[0]) * (pt1[0] - pt2[0]) + (pt1[1] - pt2[1]) * (pt1[1] - pt2[1])) / 2;
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 875026944..42b68e8f4 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -107,7 +107,7 @@ export class LinkDocPreview extends React.Component<Props> {
searchFilterDocs={returnEmptyDoclist}
ContainingCollectionDoc={undefined}
ContainingCollectionView={undefined}
- renderDepth={0}
+ renderDepth={-1}
PanelWidth={this.width} //Math.min(350, NumCast(target._width, 350))}
PanelHeight={this.height} //Math.min(250, NumCast(target._height, 250))}
focus={emptyFunction}
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 1c73ec8cb..a7dc55c52 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -204,6 +204,7 @@
.pdfBox {
width: 100%;
height: 100%;
+ pointer-events: none;
.pdfViewerDash-text {
.textLayer {
span {
@@ -213,6 +214,12 @@
}
}
+.pdfBox-background {
+ width: 100%;
+ height: 100%;
+ background: lightGray;
+}
+
.pdfBox-interactive {
width: 100%;
height: 100%;
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 7bdbe3cae..266017b5b 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -247,6 +247,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
@computed get renderPdfView() {
const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
return <div className={"pdfBox"} onContextMenu={this.specificContextMenu} style={{ height: this.props.Document._scrollTop && !this.Document._fitWidth && (window.screen.width > 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}>
+ <div className="pdfBox-background"></div>
<PDFViewer {...this.props} pdf={this._pdf!} url={pdfUrl!.url.pathname} active={this.props.active} loaded={this.loaded}
setPdfViewer={this.setPdfViewer} ContainingCollectionView={this.props.ContainingCollectionView}
renderDepth={this.props.renderDepth} PanelHeight={this.props.PanelHeight} PanelWidth={this.props.PanelWidth}
@@ -256,7 +257,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
ScreenToLocalTransform={this.props.ScreenToLocalTransform} select={this.props.select}
isSelected={this.props.isSelected} whenActiveChanged={this.whenActiveChanged}
isChildActive={this.isChildActive}
- fieldKey={this.props.fieldKey} startupLive={this._initialScale < 2.5 || this.props.Document._scrollTop ? true : false} />
+ fieldKey={this.props.fieldKey} startupLive={true} />
{this.settingsPanel()}
</div>;
}
@@ -264,8 +265,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
_pdfjsRequested = false;
render() {
const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField, null);
- if (this.props.isSelected() || this.props.renderDepth === 0 || this.props.Document._scrollY !== undefined) this._everActive = true;
- if (pdfUrl && (this._everActive || this.props.Document._scrollTop)) {
+ if (this.props.isSelected() || (this.props.active() && this.props.renderDepth === 0) || this.props.Document._scrollY !== undefined) this._everActive = true;
+ if (pdfUrl && this._everActive) {
if (pdfUrl instanceof PdfField && this._pdf) {
return this.renderPdfView;
}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 8524786c8..6c71f08e7 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -96,37 +96,38 @@ export class FormattedTextBoxComment {
FormattedTextBoxComment.tooltip.onpointerdown = async (e: PointerEvent) => {
const keep = e.target && (e.target as any).type === "checkbox" ? true : false;
const textBox = FormattedTextBoxComment.textBox;
- if (FormattedTextBoxComment.linkDoc && !keep && textBox) {
- if (FormattedTextBoxComment.linkDoc.author) {
-
- if (FormattedTextBoxComment._deleteRef && FormattedTextBoxComment._deleteRef.contains(e.target as any)) {
+ const linkDoc = FormattedTextBoxComment.linkDoc;
+ if (linkDoc && !keep && textBox) {
+ FormattedTextBoxComment.linkDoc = undefined;
+ if (linkDoc.author) {
+ if (FormattedTextBoxComment._deleteRef?.contains(e.target as any)) {
this.deleteLink();
} else if (FormattedTextBoxComment._followRef && FormattedTextBoxComment._followRef.contains(e.target as any)) {
- if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) {
- textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "add" : "add:right");
+ if (linkDoc.type !== DocumentType.LINK) {
+ textBox.props.addDocTab(linkDoc, e.ctrlKey ? "add" : "add:right");
} else {
- const anchor = FieldValue(Doc.AreProtosEqual(FieldValue(Cast(FormattedTextBoxComment.linkDoc.anchor1, Doc)), textBox.dataDoc) ?
- Cast(FormattedTextBoxComment.linkDoc.anchor2, Doc) : (Cast(FormattedTextBoxComment.linkDoc.anchor1, Doc))
- || FormattedTextBoxComment.linkDoc);
+ const anchor = FieldValue(Doc.AreProtosEqual(FieldValue(Cast(linkDoc.anchor1, Doc)), textBox.dataDoc) ?
+ Cast(linkDoc.anchor2, Doc) : (Cast(linkDoc.anchor1, Doc))
+ || linkDoc);
const target = anchor?.annotationOn ? await DocCastAsync(anchor.annotationOn) : anchor;
- if (FormattedTextBoxComment.linkDoc.follow) {
- if (FormattedTextBoxComment.linkDoc.follow === "default") {
- DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "add:right"), false);
- } else if (FormattedTextBoxComment.linkDoc.follow === "Always open in right tab") {
+ if (linkDoc.follow) {
+ if (linkDoc.follow === "default") {
+ DocumentManager.Instance.FollowLink(linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "add:right"), false);
+ } else if (linkDoc.follow === "Always open in right tab") {
if (target) { textBox.props.addDocTab(target, "add:right"); }
- } else if (FormattedTextBoxComment.linkDoc.follow === "Always open in new tab") {
+ } else if (linkDoc.follow === "Always open in new tab") {
if (target) { textBox.props.addDocTab(target, "add"); }
}
} else {
- DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "add:right"), false);
+ DocumentManager.Instance.FollowLink(linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "add:right"), false);
}
}
} else {
- if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) {
- textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "add" : "add:right");
+ if (linkDoc.type !== DocumentType.LINK) {
+ textBox.props.addDocTab(linkDoc, e.ctrlKey ? "add" : "add:right");
} else {
- DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document,
+ DocumentManager.Instance.FollowLink(linkDoc, textBox.props.Document,
(doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "add" : followLinkLocation));
}
}
@@ -140,7 +141,7 @@ export class FormattedTextBoxComment {
e.stopPropagation();
e.preventDefault();
};
- root && root.appendChild(FormattedTextBoxComment.tooltip);
+ root?.appendChild(FormattedTextBoxComment.tooltip);
}
}
@@ -158,6 +159,7 @@ export class FormattedTextBoxComment {
FormattedTextBoxComment.textBox = undefined;
FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = "none");
ReactDOM.unmountComponentAtNode(FormattedTextBoxComment.tooltipText);
+ FormattedTextBoxComment.linkDoc = undefined;
}
public static SetState(textBox: any, start: number, end: number, mark: Mark) {
FormattedTextBoxComment.textBox = textBox;
@@ -312,7 +314,7 @@ export class FormattedTextBoxComment {
searchFilterDocs={returnEmptyDoclist}
ContainingCollectionDoc={undefined}
ContainingCollectionView={undefined}
- renderDepth={0}
+ renderDepth={-1}
PanelWidth={() => 175} //Math.min(350, NumCast(target._width, 350))}
PanelHeight={() => 175} //Math.min(250, NumCast(target._height, 250))}
focus={emptyFunction}
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index 86c73bfee..70b4c417c 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -2,6 +2,8 @@
.pdfViewerDash, .pdfViewerDash-interactive {
width: 100%;
height: 100%;
+ top: 0;
+ left:0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 03ccca019..e7702fb5e 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -33,8 +33,10 @@ import "./PDFViewer.scss";
const pdfjs = require('pdfjs-dist/es5/build/pdf.js');
import React = require("react");
import { LinkDocPreview } from "../nodes/LinkDocPreview";
+import { FormattedTextBoxComment } from "../nodes/formattedText/FormattedTextBoxComment";
const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer");
const pdfjsLib = require("pdfjs-dist");
+const _global = (window /* browser */ || global /* node */) as any;
export const pageSchema = createSchema({
_curPage: "number",
@@ -144,9 +146,14 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
};
this._coverPath = "http://cs.brown.edu/~bcz/face.gif";//href.startsWith(window.location.origin) ? await Networking.PostToServer("/thumbnail", params) : { width: 100, height: 100, path: "" };
}
- runInAction(() => this._showWaiting = this._showCover = true);
+ runInAction(() => this._showWaiting = true);
this.props.startupLive && this.setupPdfJsViewer();
- this._mainCont.current && (this._mainCont.current.scrollTop = this.layoutDoc._scrollTop || 0);
+ if (this._mainCont.current) {
+ this._mainCont.current.scrollTop = this.layoutDoc._scrollTop || 0;
+ const observer = new _global.ResizeObserver(action((entries: any) => this._mainCont.current && (this._mainCont.current.scrollTop = this.layoutDoc._scrollTop || 0)));
+ observer.observe(this._mainCont.current);
+ }
+
this._disposers.searchMatch = reaction(() => Doc.IsSearchMatch(this.rootDoc),
m => {
if (m) (this._lastSearch = true) && this.search(Doc.SearchQuery(), m.searchMatch > 0);
@@ -168,7 +175,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
(scrollY) => {
if (scrollY !== undefined) {
(this._showCover || this._showWaiting) && this.setupPdfJsViewer();
- (!LinkDocPreview.TargetDoc) && this._mainCont.current && smoothScroll(1000, this._mainCont.current, (this.Document._scrollY || 0));
+ (this.props.renderDepth === -1 || (!LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc)) && this._mainCont.current && smoothScroll(1000, this._mainCont.current, (this.Document._scrollY || 0));
setTimeout(() => this.Document._scrollY = undefined, 1000);
}
},
@@ -265,7 +272,9 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
document.addEventListener("copy", this.copy);
const eventBus = new PDFJSViewer.EventBus(true);
eventBus._on("pagesinit", this.pagesinit);
- eventBus._on("pagerendered", action(() => this._showCover = this._showWaiting = false));
+ eventBus._on("pagerendered", action(() => {
+ this._showWaiting = false;
+ }));
const pdfLinkService = new PDFJSViewer.PDFLinkService({ eventBus });
const pdfFindController = new PDFJSViewer.PDFFindController({ linkService: pdfLinkService, eventBus });
this._pdfViewer = new PDFJSViewer.PDFViewer({
@@ -369,12 +378,14 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu
pageDelay: any;
@action
onScroll = (e: React.UIEvent<HTMLElement>) => {
- this.Document._scrollY === undefined && (this.layoutDoc._scrollTop = this._mainCont.current!.scrollTop);
- this.pageDelay && clearTimeout(this.pageDelay);
- this.pageDelay = setTimeout(() => {
- this.pageDelay = undefined;
- this._pdfViewer && (this.Document._curPage = this._pdfViewer.currentPageNumber);
- }, 250);
+ if (!LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc) {
+ this.Document._scrollY === undefined && (this.layoutDoc._scrollTop = this._mainCont.current!.scrollTop);
+ this.pageDelay && clearTimeout(this.pageDelay);
+ this.pageDelay = setTimeout(() => {
+ this.pageDelay = undefined;
+ this._pdfViewer && (this.Document._curPage = this._pdfViewer.currentPageNumber);
+ }, 250);
+ }
}
// get the page index that the vertical offset passed in is on
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 12:44:49 +0000