diff options
author | Bob Zeleznik <zzzman@gmail.com> | 2020-04-08 20:56:47 -0400 |
---|---|---|
committer | Bob Zeleznik <zzzman@gmail.com> | 2020-04-08 20:56:47 -0400 |
commit | 051aefd6455ccda271377913a486e923aef40efd (patch) | |
tree | f33e1a52b72bf066e93415a12f47ed74a62f5b4a /src/client/views/nodes/ContentFittingDocumentView.tsx | |
parent | 9a795d09127d10f23e3992f899265fd227e49af4 (diff) | |
parent | b21db9d40c1619df5455ba8ffe3ef76913cc92de (diff) |
Merge branch 'master' into script_documents
Diffstat (limited to 'src/client/views/nodes/ContentFittingDocumentView.tsx')
-rw-r--r-- | src/client/views/nodes/ContentFittingDocumentView.tsx | 47 |
1 files changed, 28 insertions, 19 deletions
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 36233a7e6..641797cac 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -2,7 +2,7 @@ import React = require("react"); import { computed } from "mobx"; import { observer } from "mobx-react"; import "react-table/react-table.css"; -import { Doc, Opt } from "../../../new_fields/Doc"; +import { Doc, Opt, WidthSym, HeightSym } from "../../../new_fields/Doc"; import { ScriptField } from "../../../new_fields/ScriptField"; import { NumCast, StrCast } from "../../../new_fields/Types"; import { TraceMobx } from "../../../new_fields/util"; @@ -12,15 +12,20 @@ import { CollectionView } from "../collections/CollectionView"; import '../DocumentDecorations.scss'; import { DocumentView } from "../nodes/DocumentView"; import "./ContentFittingDocumentView.scss"; +import { dropActionType } from "../../util/DragManager"; interface ContentFittingDocumentViewProps { - Document?: Doc; + Document: Doc; DataDocument?: Doc; LayoutDoc?: () => Opt<Doc>; + NativeWidth?: () => number; + NativeHeight?: () => number; + FreezeDimensions?: boolean; LibraryPath: Doc[]; - childDocs?: Doc[]; renderDepth: number; fitToBox?: boolean; + layoutKey?: string; + dropAction?: dropActionType; PanelWidth: () => number; PanelHeight: () => number; focus?: (doc: Doc) => void; @@ -37,18 +42,20 @@ interface ContentFittingDocumentViewProps { addDocTab: (document: Doc, where: string) => boolean; pinToPres: (document: Doc) => void; dontRegisterView?: boolean; + rootSelected: (outsideReaction?: boolean) => boolean; } @observer export class ContentFittingDocumentView extends React.Component<ContentFittingDocumentViewProps>{ public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive - private get layoutDoc() { return this.props.Document && (this.props.LayoutDoc?.() || Doc.Layout(this.props.Document)); } - private get nativeWidth() { return NumCast(this.layoutDoc?._nativeWidth, this.props.PanelWidth()); } - private get nativeHeight() { return NumCast(this.layoutDoc?._nativeHeight, this.props.PanelHeight()); } + private get layoutDoc() { return this.props.LayoutDoc?.() || Doc.Layout(this.props.Document); } + @computed get freezeDimensions() { return this.props.FreezeDimensions; } + nativeWidth = () => NumCast(this.layoutDoc?._nativeWidth, this.props.NativeWidth?.() || (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[WidthSym]() : this.props.PanelWidth())); + nativeHeight = () => NumCast(this.layoutDoc?._nativeHeight, this.props.NativeHeight?.() || (this.freezeDimensions && this.layoutDoc ? this.layoutDoc[HeightSym]() : this.props.PanelHeight())); @computed get scaling() { - const wscale = this.props.PanelWidth() / (this.nativeWidth || this.props.PanelWidth() || 1); - if (wscale * this.nativeHeight > this.props.PanelHeight()) { - return (this.props.PanelHeight() / (this.nativeHeight || this.props.PanelHeight() || 1)) || 1; + const wscale = this.props.PanelWidth() / this.nativeWidth(); + if (wscale * this.nativeHeight() > this.props.PanelHeight()) { + return (this.props.PanelHeight() / this.nativeHeight()) || 1; } return wscale || 1; } @@ -57,12 +64,12 @@ export class ContentFittingDocumentView extends React.Component<ContentFittingDo private PanelWidth = () => this.panelWidth; private PanelHeight = () => this.panelHeight; - @computed get panelWidth() { return this.nativeWidth && (!this.props.Document || !this.props.Document._fitWidth) ? this.nativeWidth * this.contentScaling() : this.props.PanelWidth(); } - @computed get panelHeight() { return this.nativeHeight && (!this.props.Document || !this.props.Document._fitWidth) ? this.nativeHeight * this.contentScaling() : this.props.PanelHeight(); } + @computed get panelWidth() { return this.nativeWidth && !this.props.Document._fitWidth ? this.nativeWidth() * this.contentScaling() : this.props.PanelWidth(); } + @computed get panelHeight() { return this.nativeHeight && !this.props.Document._fitWidth ? this.nativeHeight() * this.contentScaling() : this.props.PanelHeight(); } private getTransform = () => this.props.getTransform().translate(-this.centeringOffset, -this.centeringYOffset).scale(1 / this.contentScaling()); - private get centeringOffset() { return this.nativeWidth && (!this.props.Document || !this.props.Document._fitWidth) ? (this.props.PanelWidth() - this.nativeWidth * this.contentScaling()) / 2 : 0; } - private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight * this.contentScaling()) / 2 : 0; } + private get centeringOffset() { return this.nativeWidth() && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth() * this.contentScaling()) / 2 : 0; } + private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight() * this.contentScaling()) / 2 : 0; } @computed get borderRounding() { return StrCast(this.props.Document?.borderRounding); } @@ -77,7 +84,7 @@ export class ContentFittingDocumentView extends React.Component<ContentFittingDo style={{ transform: `translate(${this.centeringOffset}px, 0px)`, borderRadius: this.borderRounding, - height: Math.abs(this.centeringYOffset) > 0.001 ? `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), + 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 {...this.props} @@ -85,7 +92,14 @@ export class ContentFittingDocumentView extends React.Component<ContentFittingDo DataDoc={this.props.DataDocument} LayoutDoc={this.props.LayoutDoc} LibraryPath={this.props.LibraryPath} + NativeWidth={this.nativeWidth} + NativeHeight={this.nativeHeight} + PanelWidth={this.PanelWidth} + PanelHeight={this.PanelHeight} + ContentScaling={this.contentScaling} fitToBox={this.props.fitToBox} + layoutKey={this.props.layoutKey} + dropAction={this.props.dropAction} onClick={this.props.onClick} backgroundColor={this.props.backgroundColor} addDocument={this.props.addDocument} @@ -99,14 +113,9 @@ export class ContentFittingDocumentView extends React.Component<ContentFittingDo parentActive={this.props.active} ScreenToLocalTransform={this.getTransform} renderDepth={this.props.renderDepth} - ContentScaling={this.contentScaling} - PanelWidth={this.PanelWidth} - PanelHeight={this.PanelHeight} focus={this.props.focus || emptyFunction} bringToFront={emptyFunction} dontRegisterView={this.props.dontRegisterView} - zoomToScale={emptyFunction} - getScale={returnOne} /> </div>)} </div>); |