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. --- .../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 - 6 files changed, 57 insertions(+), 48 deletions(-) (limited to 'src/client/views') 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