From 0f560a9032076d1ed096740e04a54d484ee0aaf6 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 10 Feb 2021 16:06:53 -0500 Subject: fixes for stacking views to allow new text to be entered properly without losing focus. fixed document decorations for stacking views. fixed lightboxView criteria for going to an existing view in a lightbox instad of creating a new one. --- src/client/util/DocumentManager.ts | 20 +++++---- src/client/util/LinkManager.ts | 3 +- .../views/collections/CollectionStackingView.tsx | 49 ++++++++++------------ src/client/views/collections/TreeView.tsx | 2 +- src/client/views/nodes/DocumentContentsView.tsx | 21 +++++++--- src/client/views/nodes/DocumentView.tsx | 31 ++++++++------ .../nodes/formattedText/FormattedTextBox.scss | 1 + .../views/nodes/formattedText/FormattedTextBox.tsx | 1 - 8 files changed, 72 insertions(+), 56 deletions(-) (limited to 'src') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 2a48f74b2..811d04eb3 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -101,22 +101,28 @@ export class DocumentManager { return this.getDocumentViewById(toFind[Id], preferredCollection); } + public getLightboxDocumentView = (toFind: Doc, originatingDoc: Opt = undefined): DocumentView | undefined => { + const docViews = DocumentManager.Instance.DocumentViews; + const views: DocumentView[] = []; + docViews.map(view => view.docViewPath.includes(LightboxView.LightboxDocView.current!) && view.rootDoc === toFind && views.push(view)); + return views?.find(view => view.ContentDiv?.getBoundingClientRect().width && view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse) || (views.length ? views[0] : undefined); + } public getFirstDocumentView = (toFind: Doc, originatingDoc: Opt = undefined): DocumentView | undefined => { const views = this.getDocumentViews(toFind).filter(view => view.rootDoc !== originatingDoc); return views?.find(view => view.ContentDiv?.getBoundingClientRect().width && view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse) || (views.length ? views[0] : undefined); } public getDocumentViews(toFind: Doc): DocumentView[] { const toReturn: DocumentView[] = []; - const docViews = DocumentManager.Instance.DocumentViews; + const docViews = DocumentManager.Instance.DocumentViews.filter(view => !view.docViewPath.includes(LightboxView.LightboxDocView.current!)); + const lightboxViews = DocumentManager.Instance.DocumentViews.filter(view => view.docViewPath.includes(LightboxView.LightboxDocView.current!)); // heuristic to return the "best" documents first: + // choose a document in the lightbox first // choose an exact match over an alias match - // choose documents that have a PanelWidth() over those that don't (the treeview documents have no panelWidth) - docViews.map(view => view.docViewPath.includes(LightboxView.LightboxDocView.current!) && view.rootDoc === toFind && toReturn.push(view)); - docViews.map(view => view.props.PanelWidth() > 1 && view.rootDoc === toFind && toReturn.push(view)); - docViews.map(view => view.props.PanelWidth() <= 1 && view.rootDoc === toFind && toReturn.push(view)); - docViews.map(view => view.props.PanelWidth() > 1 && view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); - docViews.map(view => view.props.PanelWidth() <= 1 && view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); + lightboxViews.map(view => view.rootDoc === toFind && toReturn.push(view)); + lightboxViews.map(view => view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); + docViews.map(view => view.rootDoc === toFind && toReturn.push(view)); + docViews.map(view => view.rootDoc !== toFind && Doc.AreProtosEqual(view.rootDoc, toFind) && toReturn.push(view)); return toReturn; } diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index c32a78ef3..a684a202d 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -145,7 +145,8 @@ export class LinkManager { doc === linkDoc.anchor2 ? Cast(linkDoc.anchor1_timecode, "number") : (Doc.AreProtosEqual(doc, linkDoc.anchor1 as Doc) || Doc.AreProtosEqual((linkDoc.anchor1 as Doc).annotationOn as Doc, doc) ? Cast(linkDoc.anchor2_timecode, "number") : Cast(linkDoc.anchor1_timecode, "number"))); if (target) { - if (LightboxView.LightboxDoc && doc.annotationOn !== LightboxView.LightboxDoc) { // following a link should replace an existing lightboxDoc unless the target is an annotation on the lightbox document + if (LightboxView.LightboxDoc && !DocumentManager.Instance.getLightboxDocumentView(doc)) { + //doc.annotationOn !== LightboxView.LightboxDoc) { // following a link should replace an existing lightboxDoc unless the target is an annotation on the lightbox document runInAction(() => LightboxView.LightboxDoc = (target.annotationOn as Doc) ?? target); finished?.(); } else { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 745987780..4e093a83b 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -80,13 +80,10 @@ export class CollectionStackingView extends CollectionSubView { const height = () => this.getDocHeight(d); const width = () => this.getDocWidth(d); - const dref = React.createRef(); - const dxf = () => this.getDocTransform(d, dref.current!); - this._docXfs.push({ dxf, width, height }); const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; - return
- {this.getDisplayDoc(d, dxf, width)} + return
+ {this.getDisplayDoc(d, width)}
; }); } @@ -171,7 +168,6 @@ export class CollectionStackingView extends CollectionSubView { Doc.BrushDoc(doc); this.props.focus(this.props.Document, true); // bcz: want our containing collection to zoom @@ -186,27 +182,30 @@ export class CollectionStackingView extends CollectionSubView Transform, width: () => number) { + styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { + if (property === StyleProp.Opacity && doc) { + if (this.props.childOpacity) { + return this.props.childOpacity(); + } + if (this.Document._currentFrame !== undefined) { + return CollectionFreeFormDocumentView.getValues(doc, NumCast(this.Document._currentFrame))?.opacity; + } + } + return this.props.styleProvider?.(doc, props, property); + }; + getDisplayDoc(doc: Doc, width: () => number) { const dataDoc = (!doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS) ? undefined : this.props.DataDoc; const height = () => this.getDocHeight(doc); - const styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { - if (property === StyleProp.Opacity && doc) { - if (this.props.childOpacity) { - return this.props.childOpacity(); - } - if (this.Document._currentFrame !== undefined) { - return CollectionFreeFormDocumentView.getValues(doc, NumCast(this.Document._currentFrame))?.opacity; - } - } - return this.props.styleProvider?.(doc, props, property); - }; - return ; + const stackedDocTransform = () => this.getDocTransform(doc, dref); + return dref = r?.ContentDiv ? r.ContentDiv : undefined} Document={doc} DataDoc={dataDoc || (!Doc.AreProtosEqual(doc[DataSym], doc) && doc[DataSym])} renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - styleProvider={styleProvider} + styleProvider={this.styleProvider} layerProvider={this.props.layerProvider} docViewPath={this.props.docViewPath} LayoutTemplate={this.props.childLayoutTemplate} @@ -220,7 +219,7 @@ export class CollectionStackingView extends CollectionSubView; } - getDocTransform(doc: Doc, dref: HTMLDivElement) { - if (!dref) return Transform.Identity(); + getDocTransform(doc: Doc, dref?: HTMLDivElement) { const y = this._scroll; // required for document decorations to update when the text box container is scrolled const { scale, translateX, translateY } = Utils.GetScreenTransform(dref); - const outerXf = Utils.GetScreenTransform(this._masonryGridRef!); - const offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); - const offsety = 0; - return this.props.ScreenToLocalTransform().translate(offset[0], offset[1] + offsety); + return new Transform(-translateX, -translateY, 1).scale(this.props.ScreenToLocalTransform().Scale); } forceAutoHeight = () => { diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 6b7911b13..14075db1f 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -642,7 +642,7 @@ export class TreeView extends React.Component { rootSelected={returnTrue} styleProvider={asText ? this.titleStyleProvider : this.embeddedStyleProvider} layerProvider={undefined} - docViewPath={returnEmptyDoclist} + docViewPath={this.props.treeView.props.docViewPath} docFilters={returnEmptyFilter} docRangeFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 6ecd70330..4b4720d58 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -111,7 +111,6 @@ export class DocumentContentsView extends React.Component number, layoutKey: string, hideOnLeave?: boolean, - makeLink?: () => Opt, // function to call when a link is made }> { @computed get layout(): string { TraceMobx(); @@ -141,16 +140,17 @@ export class DocumentContentsView extends React.Component, onInput: Opt): JsxBindings { const docOnlyProps = [ // these are the properties in DocumentViewProps that need to be removed to pass on only DocumentSharedViewProps to the FieldViews "freezeDimensions", + "hideResizeHandles", "hideTitle", "treeViewDoc", - "dragDivName", "contentPointerEvents", "radialMenu", "LayoutTemplateString", "LayoutTemplate", + "dontCenter", "ContentScaling", - "contentFittingScaling", "contextMenuItems", + "onClick", "onDoubleClick", "onPointerDown", "onPointerUp", @@ -166,7 +166,11 @@ export class DocumentContentsView extends React.Component 1 ? splits[0] + splits[1].replace(/{([^{}]|(?R))*}/, replacer4) : ""; // might have been more elegant if javascript supported recursive patterns + return { bindings, layoutFrame }; + } + + render() { + TraceMobx(); + const { bindings, layoutFrame } = this.renderData; + return (this.props.renderDepth > 12 || !layoutFrame || !this.layoutDoc || GetEffectiveAcl(this.layoutDoc) === AclPrivate) ? (null) : number; isSelected: (outsideReaction?: boolean) => boolean; select: (ctrlPressed: boolean) => void; - DocumentView: any; + DocumentView: () => DocumentView; viewPath: () => DocumentView[]; } @@ -154,7 +154,7 @@ export class DocumentViewInternal extends DocComponent (ffview().props.CollectionFreeFormView.ChildDrag = this.props.DocumentView)); + ffview && runInAction(() => (ffview().props.CollectionFreeFormView.ChildDrag = this.props.DocumentView())); const dragData = new DragManager.DocumentDragData([this.props.Document]); const [left, top] = this.props.ScreenToLocalTransform().scale(this.ContentScale).inverse().transformPoint(0, 0); dragData.offset = this.props.ScreenToLocalTransform().scale(this.ContentScale).transformDirection(x - left, y - top); @@ -398,7 +398,7 @@ export class DocumentViewInternal extends DocComponent SharingManager.Instance.open(this.props.DocumentView), icon: "users" }); + (this.rootDoc._viewType !== CollectionViewType.Docking || !Doc.UserDoc().noviceMode) && moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: "users" }); if (!Doc.UserDoc().noviceMode) { moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" }); moreItems.push({ description: `${this.Document._chromeStatus !== "disabled" ? "Hide" : "Show"} Chrome`, event: () => this.Document._chromeStatus = (this.Document._chromeStatus !== "disabled" ? "disabled" : "enabled"), icon: "project-diagram" }); @@ -708,7 +708,7 @@ export class DocumentViewInternal extends DocComponent SelectionManager.SelectView(this.props.DocumentView, false), 300); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up. by delaying the selection until hopefully after the pointer up, the context menu will appear. + !this.props.isSelected(true) && setTimeout(() => SelectionManager.SelectView(this.props.DocumentView(), false), 300); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up. by delaying the selection until hopefully after the pointer up, the context menu will appear. } rootSelected = (outsideReaction?: boolean) => this.props.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false; @@ -741,7 +741,7 @@ export class DocumentViewInternal extends DocComponent {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} {this.hideLinkButton ? (null) : - } + }
; } @@ -782,7 +782,11 @@ export class DocumentViewInternal extends DocComponent +
{ PanelWidth = () => this.panelWidth; PanelHeight = () => this.panelHeight; ContentScale = () => this.nativeScaling; + selfView = () => this; screenToLocalTransform = () => { return this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling); } @@ -978,7 +983,7 @@ export class DocumentView extends React.Component { TraceMobx(); const internalProps = { ...this.props, - DocumentView: this, + DocumentView: this.selfView, viewPath: this.docViewPathFunc, PanelWidth: this.PanelWidth, PanelHeight: this.PanelHeight, diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 81bca4c00..33425ba15 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -389,6 +389,7 @@ footnote::after { overflow-x: hidden; color: initial; max-height: 100%; + width: 100%; display: flex; flex-direction: row; transition: opacity 1s; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 9e2e8f1be..d608cc5df 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1719,7 +1719,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp