diff options
5 files changed, 44 insertions, 49 deletions
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index a6816c7f9..eaccbdb63 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -9,7 +9,6 @@ import { CollectionView } from '../views/collections/CollectionView'; import { DocumentView } from '../views/nodes/DocumentView'; import { LinkManager } from './LinkManager'; import { Scripting } from './Scripting'; -import { SelectionManager } from './SelectionManager'; import { LinkDocPreview } from '../views/nodes/LinkDocPreview'; import { FormattedTextBoxComment } from '../views/nodes/formattedText/FormattedTextBoxComment'; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index a7c8a7cdc..be31ca6e5 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -26,6 +26,7 @@ import { TreeView } from "./TreeView"; import React = require("react"); import { DocumentManager } from '../../util/DocumentManager'; import { FormattedTextBoxComment } from '../nodes/formattedText/FormattedTextBoxComment'; +import { DocumentView } from '../nodes/DocumentView'; export type collectionTreeViewProps = { treeViewHideTitle?: boolean; @@ -158,7 +159,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll e.stopPropagation(); e.key === "Enter" && this.makeTextCollection(childDocs); }}> - <ContentFittingDocumentView + <DocumentView Document={this.doc} DataDoc={undefined} LayoutTemplateString={FormattedTextBox.LayoutString("text")} diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 233b6092c..10b9cfe66 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -111,9 +111,8 @@ export class TreeView extends React.Component<TreeViewProps> { @computed get childDocs() { TraceMobx(); return this.childDocList(this.fieldKey); } @computed get childLinks() { return this.childDocList("links"); } @computed get childAnnos() { return this.childDocList(this.fieldKey + "-annotations"); } - @computed get boundsOfCollectionDocument() { - return StrCast(this.props.document.type).indexOf(DocumentType.COL) === -1 || !DocListCast(this.props.document[this.fieldKey]).length ? undefined : - Doc.ComputeContentBounds(DocListCast(this.props.document[this.fieldKey])); + @computed get isCollectionDoc() { + 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"); @@ -284,6 +283,7 @@ export class TreeView extends React.Component<TreeViewProps> { docWidth = () => { const layoutDoc = this.layoutDoc; const aspect = Doc.NativeAspect(layoutDoc); + if (layoutDoc._fitWidth) return Math.min(this.props.panelWidth() - 20, layoutDoc[WidthSym]()); if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.panelWidth() - 20)); return Doc.NativeWidth(layoutDoc) ? Math.min(layoutDoc[WidthSym](), this.props.panelWidth() - 20) : Math.min(this.layoutDoc[WidthSym](), this.props.panelWidth() - 20); } @@ -356,12 +356,14 @@ export class TreeView extends React.Component<TreeViewProps> { rtfWidth = () => Math.min(this.layoutDoc?.[WidthSym](), this.props.panelWidth() - 20); rtfHeight = () => this.rtfWidth() <= this.layoutDoc?.[WidthSym]() ? Math.min(this.layoutDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; rtfOutlineHeight = () => Math.max(this.layoutDoc?.[HeightSym](), 20); - docFinalHeight = () => { + expandPanelHeight = () => { + if (this.layoutDoc._fitWidth) return this.docHeight(); const aspect = this.layoutDoc[WidthSym]() / this.layoutDoc[HeightSym](); const docAspect = this.docWidth() / this.docHeight(); return (docAspect < aspect) ? this.docWidth() / aspect : this.docHeight(); } - docFinalWidth = () => { + expandPanelWidth = () => { + if (this.layoutDoc._fitWidth) return this.docWidth(); const aspect = this.layoutDoc[WidthSym]() / this.layoutDoc[HeightSym](); const docAspect = this.docWidth() / this.docHeight(); return (docAspect > aspect) ? this.docHeight() * aspect : this.docWidth(); @@ -397,8 +399,8 @@ export class TreeView extends React.Component<TreeViewProps> { </div></ul>; } else { const layoutDoc = this.layoutDoc; - const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docFinalHeight; - const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docFinalWidth; + 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 <div ref={this._dref} style={{ display: "inline-block", height: panelHeight() }} key={this.doc[Id]}> <ContentFittingDocumentView Document={this.doc} @@ -409,7 +411,7 @@ export class TreeView extends React.Component<TreeViewProps> { rootSelected={returnTrue} treeViewDoc={undefined} backgroundColor={this.props.backgroundColor} - fitToBox={this.boundsOfCollectionDocument !== undefined} + fitToBox={this.isCollectionDoc !== undefined} FreezeDimensions={true} NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} @@ -567,7 +569,7 @@ export class TreeView extends React.Component<TreeViewProps> { } } else this._editMaxWidth = ""; - const selected = SelectionManager.IsSelected(DocumentManager.Instance.getFirstDocumentView(this.doc)); + const selected = false;// SelectionManager.IsSelected(DocumentManager.Instance.getFirstDocumentView(this.doc)); // bcz: need to fix so that this doesn't get called for every selection/view creation. this is used to highlight bullet items in Slide views return this.doc.treeViewHideHeader || this.outlineMode ? !StrCast(Doc.LayoutField(this.doc)).includes("CollectionView") ? this.renderContent @@ -597,7 +599,7 @@ export class TreeView extends React.Component<TreeViewProps> { rootSelected={returnTrue} treeViewDoc={undefined} backgroundColor={this.props.backgroundColor} - fitToBox={this.boundsOfCollectionDocument !== undefined} + fitToBox={this.isCollectionDoc !== undefined} PanelWidth={this.rtfWidth} PanelHeight={this.rtfOutlineHeight} focus={this.refocus} diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index d31427829..57f845961 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,12 +1,12 @@ import { action, computed, Lambda, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from "react"; -import { Doc, Opt, WidthSym } from '../../../../fields/Doc'; +import { Doc, Opt } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { Id } from '../../../../fields/FieldSymbols'; import { makeInterface } from '../../../../fields/Schema'; import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents, OmitKeys } from '../../../../Utils'; +import { emptyFunction, OmitKeys, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; import { DragManager } from '../../../util/DragManager'; import { SnappingManager } from '../../../util/SnappingManager'; @@ -169,11 +169,14 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ContainingCollectionDoc={this.props.Document} 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={true} + dontCenter={false} />; } diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 70a40f39e..7b698c8bd 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -2,13 +2,11 @@ import React = require("react"); import { computed } from "mobx"; import { observer } from "mobx-react"; import { Doc, HeightSym, WidthSym } from "../../../fields/Doc"; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; +import { Cast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; import { emptyFunction, OmitKeys, returnVal } from "../../../Utils"; import { DocumentView, DocumentViewProps } from "../nodes/DocumentView"; import "./ContentFittingDocumentView.scss"; -import { CollectionViewType } from "../collections/CollectionView"; -import { DocumentType } from "../../documents/DocumentTypes"; interface ContentFittingDocumentViewProps { dontCenter?: boolean; @@ -17,32 +15,30 @@ interface ContentFittingDocumentViewProps { @observer export class ContentFittingDocumentView extends React.Component<DocumentViewProps & ContentFittingDocumentViewProps> { public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive - private get layoutDoc() { + @computed get layoutDoc() { return this.props.LayoutTemplate?.() || (this.props.layoutKey && Doc.Layout(this.props.Document, Cast(this.props.Document[this.props.layoutKey], Doc, null))) || Doc.Layout(this.props.Document); } @computed get freezeDimensions() { return this.props.FreezeDimensions; } - - trueNativeWidth = () => returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, false)); - nativeWidth = () => returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || this.props.PanelWidth()); - nativeHeight = () => returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || this.props.PanelHeight()); + @computed get trueNativeWidth() { return !this.layoutDoc._fitWidth && returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, false)); } + @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 0); } + @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 0); } @computed get nativeScaling() { - const wscale = this.props.PanelWidth() / this.nativeWidth(); - const hscale = this.props.PanelHeight() / this.nativeHeight(); - if (wscale * this.nativeHeight() > this.props.PanelHeight()) { + if (!this.nativeWidth || !this.nativeHeight) return 1; + const wscale = this.props.PanelWidth() / this.nativeWidth; + const hscale = this.props.PanelHeight() / this.nativeHeight; + if (wscale * this.nativeHeight > this.props.PanelHeight()) { return hscale || 1; } return wscale || 1; } - private PanelWidth = () => this.panelWidth; - private PanelHeight = () => this.panelHeight; - @computed get panelWidth() { return this.nativeWidth() && !this.props.Document._fitWidth ? this.nativeWidth() * this.nativeScaling : this.props.PanelWidth(); } + @computed get panelWidth() { return this.trueNativeWidth ? this.nativeWidth * this.nativeScaling : this.props.PanelWidth(); } @computed get panelHeight() { - if (this.nativeHeight()) { - if (!this.props.Document._fitWidth) return this.nativeHeight() * this.nativeScaling; - else return this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 1; + if (this.nativeHeight) { + if (this.props.Document._fitWidth) return Math.min(this.props.PanelHeight(), this.panelWidth / Doc.NativeAspect(this.layoutDoc, this.props.DataDoc, this.freezeDimensions) || 1); + return Math.min(this.props.PanelHeight(), this.nativeHeight * this.nativeScaling); } return this.props.PanelHeight(); } @@ -51,25 +47,19 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp private getTransform = () => 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 get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight() * this.nativeScaling) / 2 : 0; } + private get centeringOffset() { return this.trueNativeWidth && !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); } + PanelWidth = () => this.panelWidth; + PanelHeight = () => this.panelHeight; contentScaling = () => { - if ((this.props.LayoutTemplateString || StrCast(this.layoutDoc.layout)).includes("FormattedTextBox")) return this.nativeScaling; - return this.nativeScaling * this.layoutDoc[WidthSym]() / this.layoutWidth(); - } - - layoutWidth = () => { - let layoutWidth = this.layoutDoc[WidthSym](); - if ((this.props.LayoutTemplateString || StrCast(this.layoutDoc.layout)).includes("CollectionView")) {//} && this.layoutDoc._viewType === CollectionViewType.Freeform) { - const layoutAspect = layoutWidth / this.layoutDoc[HeightSym](); - if (this.props.PanelWidth() / this.props.PanelHeight() > layoutAspect) { - layoutWidth = this.props.PanelHeight() * layoutAspect; - } - } - return Math.min(this.props.PanelWidth(), layoutWidth); + 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(); + return this.nativeScaling * Math.max(wscale, hscale); } render() { @@ -80,8 +70,8 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp style={{ transform: !this.props.dontCenter ? `translate(${this.centeringOffset}px, ${this.centeringYOffset}px)` : undefined, borderRadius: this.borderRounding, - height: Math.abs(this.centeringYOffset) > 0.001 ? `${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.nativeWidth() ? this.layoutWidth() : this.props.PanelWidth(), + height: Math.abs(this.centeringYOffset) > 0.001 ? `${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(), }}> <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit} Document={this.props.Document} |