From 65e4c1dd781876374734f4520a9f51b6aae0cf79 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 11 Nov 2020 13:45:20 -0500 Subject: fixes to centering of documents in ContentFittingDocumentView. fixed display of document title in tree view when it was alrady rendered in the tree view. --- src/client/views/PropertiesView.tsx | 2 +- .../views/collections/CollectionSchemaView.tsx | 1 + .../views/collections/CollectionStackingView.tsx | 2 +- src/client/views/collections/TreeView.tsx | 141 ++++++++++----------- .../collectionGrid/CollectionGridView.tsx | 3 +- .../views/nodes/ContentFittingDocumentView.tsx | 28 ++-- 6 files changed, 86 insertions(+), 91 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index fad2f5284..17cfb5a5a 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -273,7 +273,7 @@ export class PropertiesView extends React.Component { backgroundColor={this.props.backgroundColor} fitToBox={true} FreezeDimensions={true} - dontCenter={true} + dontCenter={"y"} NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} PanelWidth={panelWidth} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9f8468253..a1df9d214 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -402,6 +402,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { DataDoc={undefined} fitToBox={true} FreezeDimensions={true} + dontCenter={"y"} focus={emptyFunction} LibraryPath={this.props.LibraryPath} renderDepth={this.props.renderDepth} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 97eacaeab..cf9ced849 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -202,7 +202,7 @@ export class CollectionStackingView extends CollectionSubView { private _openScript: (() => ScriptField) | undefined; private _header?: React.RefObject = React.createRef(); private _treedropDisposer?: DragManager.DragDropDisposer; - private _dref = React.createRef(); + private _dref = React.createRef(); private _tref = React.createRef(); private _docRef = React.createRef(); private _uniqueId = Utils.GenerateGuid(); @@ -112,7 +112,7 @@ export class TreeView extends React.Component { @computed get childLinks() { return this.childDocList("links"); } @computed get childAnnos() { return this.childDocList(this.fieldKey + "-annotations"); } @computed get isCollectionDoc() { - return !StrCast(this.props.document.type).includes(DocumentType.COL) || !DocListCast(this.props.document[this.fieldKey]).length ? false : true + return !StrCast(this.props.document.type).includes(DocumentType.COL) || !DocListCast(this.props.document[this.fieldKey]).length ? false : true; } @undoBatch openRight = () => this.props.addDocTab(this.doc, "add:right"); @@ -272,14 +272,15 @@ export class TreeView extends React.Component { return false; } - refTransform = (ref: HTMLDivElement) => { + refTransform = (ref: HTMLDivElement | undefined | null) => { + if (!ref) return this.props.ScreenToLocalTransform(); const { scale, translateX, translateY } = Utils.GetScreenTransform(ref); const outerXf = this.props.outerXf(); const offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]); } - docTransform = () => this.refTransform(this._dref.current!); - getTransform = () => this.refTransform(this._tref.current!); + docTransform = () => this.refTransform(this._dref.current?.ContentRef?.current); + getTransform = () => this.refTransform(this._tref.current); docWidth = () => { const layoutDoc = this.layoutDoc; const aspect = Doc.NativeAspect(layoutDoc); @@ -394,47 +395,45 @@ export class TreeView extends React.Component { [...this.props.renderedIds, this.doc[Id]], this.props.onCheckedClick, this.props.onChildClick, this.props.ignoreFields, false, this.props.whenActiveChanged, this.props.dontRegisterView)} ; } else if (this.treeViewExpandedView === "fields") { - return
    + return
      {this.expandedField}
    ; } else { const layoutDoc = this.layoutDoc; const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.expandPanelHeight; const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.expandPanelWidth; - return
    - -
    ; + return ; } } @@ -557,7 +556,7 @@ export class TreeView extends React.Component { render() { TraceMobx(); - if (this.props.renderedIds.indexOf(this.doc[Id]) !== -1) return null; + if (this.props.renderedIds.indexOf(this.doc[Id]) !== -1) return "<" + this.doc.title + ">"; const sorting = this.doc[`${this.fieldKey}-sortAscending`]; if (this.showTitleEditorControl) { // find containing CollectionTreeView and set our maximum width so the containing tree view won't have to scroll let par: any = this._header?.current; @@ -589,37 +588,35 @@ export class TreeView extends React.Component { onPointerDown={e => { if (this.props.active(true)) { e.stopPropagation(); e.preventDefault(); } }} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}> {this.renderBullet} -
    - -
    +
    diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 57f845961..5c7373a2f 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -170,13 +170,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { PanelWidth={width} PanelHeight={height} ContentScaling={returnOne} - fitToBox={false} FreezeDimensions={true} ScreenToLocalTransform={dxf} onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} - dontCenter={false} + dontCenter={"y"} />; } diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 7b698c8bd..99b5f7478 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -9,7 +9,7 @@ import { DocumentView, DocumentViewProps } from "../nodes/DocumentView"; import "./ContentFittingDocumentView.scss"; interface ContentFittingDocumentViewProps { - dontCenter?: boolean; + dontCenter?: string; // "x" ,"y", "xy" } @observer @@ -21,8 +21,7 @@ export class ContentFittingDocumentView extends React.Component this.props.dontCenter ? - this.props.ScreenToLocalTransform().scale(this.childXf) : - this.props.ScreenToLocalTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(this.childXf) - private get centeringOffset() { return this.trueNativeWidth && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth * this.nativeScaling) / 2 : 0; } + private getTransform = () => this.props.ScreenToLocalTransform(). + translate(this.props.dontCenter?.includes("x") ? 0 : -this.centeringOffset, this.props.dontCenter?.includes("y") ? 0 : -this.centeringYOffset). + scale(this.childXf) + private get centeringOffset() { return this.nativeWidth && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth * this.nativeScaling) / 2 : 0; } private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 && this.nativeHeight ? (this.props.PanelHeight() - this.nativeHeight * this.nativeScaling) / 2 : 0; } @computed get borderRounding() { return StrCast(this.props.Document?.borderRounding); } @@ -57,20 +56,21 @@ export class ContentFittingDocumentView extends React.Component { const layoutStr = (this.props.LayoutTemplateString || StrCast(this.layoutDoc.layout)); if (layoutStr.includes("FormattedTextBox")) return this.nativeScaling; - const wscale = this.trueNativeWidth ? 1 : this.layoutDoc[WidthSym]() / this.props.PanelWidth(); - const hscale = this.trueNativeWidth ? 1 : this.layoutDoc[HeightSym]() / this.props.PanelHeight(); + const wscale = this.nativeWidth ? 1 : this.layoutDoc[WidthSym]() / this.props.PanelWidth(); + const hscale = this.nativeWidth ? 1 : this.layoutDoc[HeightSym]() / this.props.PanelHeight(); return this.nativeScaling * Math.max(wscale, hscale); } + public ContentRef = React.createRef(); render() { TraceMobx(); return (
    {!this.props.Document || !this.props.PanelWidth ? (null) : ( -
    0.001 ? `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), + height: Math.abs(this.centeringYOffset) > 0.001 && this.nativeWidth ? `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), width: Math.abs(this.centeringOffset) > 0.001 ? `${100 * (this.props.PanelWidth() - this.centeringOffset * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(), }}>