aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/ContentFittingDocumentView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/ContentFittingDocumentView.tsx')
-rw-r--r--src/client/views/nodes/ContentFittingDocumentView.tsx47
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>);