diff options
author | bob <bcz@cs.brown.edu> | 2019-04-16 11:00:55 -0400 |
---|---|---|
committer | bob <bcz@cs.brown.edu> | 2019-04-16 11:00:55 -0400 |
commit | bb935a1af68c3684640cf93e04b55324142b05ea (patch) | |
tree | 571369e8b17af15e231e1c22f08d05597ae2e815 /src/client/views/nodes/CollectionFreeFormDocumentView.tsx | |
parent | b7a766aa5d53686e032b34d7213ad543108f12c3 (diff) | |
parent | 5acba4487b3cb66d194e7e3c4c06c5ed8e2c04b4 (diff) |
Merge branch 'master' into richTextEditor
Diffstat (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')
-rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 33 |
1 files changed, 18 insertions, 15 deletions
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index b00cefbf6..68e5a70fb 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -9,17 +9,12 @@ import React = require("react"); import { OmitKeys } from "../../../Utils"; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { - zoomFade: number; } @observer export class CollectionFreeFormDocumentView extends React.Component<CollectionFreeFormDocumentViewProps> { private _mainCont = React.createRef<HTMLDivElement>(); - constructor(props: CollectionFreeFormDocumentViewProps) { - super(props); - } - @computed get transform(): string { return `scale(${this.props.ContentScaling()}, ${this.props.ContentScaling()}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px) scale(${this.zoom}, ${this.zoom}) `; @@ -50,33 +45,41 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr this.props.Document.SetData(KeyStore.ZIndex, h, NumberField); } - contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; - getTransform = (): Transform => this.props.ScreenToLocalTransform() .translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)) .scale(1 / this.contentScaling()).scale(1 / this.zoom) + contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1; + panelWidth = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelWidth(); + panelHeight = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelHeight(); + @computed get docView() { - return <DocumentView {...this.docViewProps} + return <DocumentView {...OmitKeys(this.props, ['zoomFade'])} ContentScaling={this.contentScaling} ScreenToLocalTransform={this.getTransform} PanelWidth={this.panelWidth} PanelHeight={this.panelHeight} />; } - @computed - get docViewProps(): DocumentViewProps { - return (OmitKeys(this.props, ['zoomFade'])); - } - panelWidth = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelWidth(); - panelHeight = () => this.props.Document.GetBoolean(KeyStore.Minimized, false) ? 10 : this.props.PanelHeight(); render() { + trace(); + let zoomFade = 1; + // //var zoom = doc.GetNumber(KeyStore.Zoom, 1); + // let transform = (this.props.ScreenToLocalTransform().scale(this.props.ContentScaling())).inverse(); + // var [sptX, sptY] = transform.transformPoint(0, 0); + // let [bptX, bptY] = transform.transformPoint(this.props.PanelWidth(), this.props.PanelHeight()); + // let w = bptX - sptX; + // //zoomFade = area < 100 || area > 800 ? Math.max(0, Math.min(1, 2 - 5 * (zoom < this.scale ? this.scale / zoom : zoom / this.scale))) : 1; + // let fadeUp = .75 * 1800; + // let fadeDown = .075 * 1800; + // zoomFade = w < fadeDown || w > fadeUp ? Math.max(0, Math.min(1, 2 - (w < fadeDown ? fadeDown / w : w / fadeUp))) : 1; + return ( <div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{ - opacity: this.props.zoomFade, + opacity: zoomFade, transformOrigin: "left top", transform: this.transform, pointerEvents: "all", |