diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 8 | ||||
-rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 1 | ||||
-rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 1 | ||||
-rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 49 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 35 |
5 files changed, 77 insertions, 17 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index dccab1dc5..0aaea7ae5 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -25,11 +25,13 @@ export class DocumentDecorations extends React.Component { if (element.props.isTopMost) { return bounds; } - let transform = element.props.ScreenToLocalTransform().inverse(); + let transform = element.ScreenToLocalTransform().inverse(); var [sptX, sptY] = transform.transformPoint(0, 0); - // var [bptX, bptY] = transform.transformDirection(element.width, element.height); let doc = element.props.Document; - let [bptX, bptY] = [doc.GetNumber(KeyStore.Width, 0), doc.GetNumber(KeyStore.Height, 0)]; + let [bptX, bptY] = [ + element.props.PanelSize[0] > 0 ? element.props.PanelSize[0] : doc.GetNumber(KeyStore.Width, 0), + element.props.PanelSize[1] > 0 ? element.props.PanelSize[1] : doc.GetNumber(KeyStore.Height, 0) + ]; [bptX, bptY] = transform.transformPoint(bptX, bptY); return { x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y), diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index ceb638ab4..fc5b8dacd 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -253,6 +253,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { AddDocument={undefined} RemoveDocument={undefined} Scaling={this._parentScaling} + PanelSize={[0, 0]} ScreenToLocalTransform={() => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont); var props = CollectionDockingView.Instance.props; diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 54757cce5..ffd4d211f 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -247,6 +247,7 @@ export class CollectionFreeFormView extends CollectionViewBase { ScreenToLocalTransform={this.getTransform} isTopMost={false} Scaling={1} + PanelSize={[0, 0]} ContainingCollectionView={this} />); })} </div> diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index fa37e0e76..0c7577421 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, observable } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; @@ -14,6 +14,7 @@ import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; +import { Z_DEFAULT_COMPRESSION } from "zlib"; @observer export class CollectionSchemaView extends CollectionViewBase { @@ -117,26 +118,63 @@ export class CollectionSchemaView extends CollectionViewBase { } innerScreenToLocal(tx: number, ty: number) { - return () => this.props.ScreenToLocalTransform().transform(new Transform(-tx - 5 - COLLECTION_BORDER_WIDTH, -ty - COLLECTION_BORDER_WIDTH, 1)) + var zoom = this.props.Document.GetNumber(KeyStore.Scale, 1); + var xf = this.props.ScreenToLocalTransform().transform(new Transform(- 5 - COLLECTION_BORDER_WIDTH, - COLLECTION_BORDER_WIDTH, 1)).translate(-tx, -ty); + var center = [0, 0]; + var sabout = new Transform(center[0] / zoom, center[1] / zoom, 1).scaled(1 / this._parentScaling).translated(-center[0] / zoom, -center[1] / zoom); + var total = xf.transformed(sabout); + return () => total + } + @computed + get scale(): number { + return this.props.Document.GetNumber(KeyStore.Scale, 1); + } + @computed + get translate(): [number, number] { + const x = this.props.Document.GetNumber(KeyStore.PanX, 0); + const y = this.props.Document.GetNumber(KeyStore.PanY, 0); + return [x, y]; + } + + getTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this._dividerX - 5, - COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform()) + } + + getLocalTransform = (): Transform => { + const [x, y] = this.translate; + return Transform.Identity.translate(-x, -y).scale(1 / this.scale / this._parentScaling); + } + + @action + setScaling = (r: any) => { + var me = this; + const children = this.props.Document.GetList<Document>(this.props.fieldKey, []); + const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; + this._panelWidth = r.entry.width; + if (r.entry.height) + this._panelHeight = r.entry.height; + me._parentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width); } @observable _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView @observable _dividerX = 0; - @observable _dividerY = 0; + @observable _panelWidth = 0; + @observable _panelHeight = 0; render() { const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) const children = this.props.Document.GetList<Document>(this.props.fieldKey, []); const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; let me = this; let content = this.selectedIndex == -1 || !selected ? (null) : ( - <Measure onResize={action((r: any) => this._parentScaling = r.entry.width / selected.GetNumber(KeyStore.NativeWidth, r.entry.width))}> + <Measure onResize={this.setScaling}> {({ measureRef }) => <div ref={measureRef}> <DocumentView Document={selected} AddDocument={this.addDocument} RemoveDocument={this.removeDocument} - ScreenToLocalTransform={this.innerScreenToLocal(me._dividerX, me._dividerY)}//TODO This should probably be an actual transform + ScreenToLocalTransform={this.getTransform}//TODO This should probably be an actual transform Scaling={this._parentScaling} isTopMost={false} + PanelSize={[this._panelWidth, this._panelHeight]} ContainingCollectionView={me} /> </div> } @@ -146,6 +184,7 @@ export class CollectionSchemaView extends CollectionViewBase { <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} > <Measure onResize={action((r: any) => { this._dividerX = r.entry.width; + this._panelHeight = r.entry.height; })}> {({ measureRef }) => <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ position: "relative", float: "left", width: `${this._splitPercentage}%`, height: "100%" }}> diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e9b1d5c8a..fa39ad09a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -31,6 +31,7 @@ export interface DocumentViewProps { isTopMost: boolean; //tfs: This shouldn't be necessary I don't think Scaling: number; + PanelSize: number[]; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key } @@ -245,8 +246,19 @@ export class DocumentView extends React.Component<DocumentViewProps> { SelectionManager.SelectDoc(this, ctrlPressed) } - screenToLocalTransform = () => { - return this.props.ScreenToLocalTransform().transform(Transform.Identity.scale(1 / this.props.Scaling)); + ScreenToLocalTransform = () => { + return this.props.PanelSize[0] ? this.backgroundScreenToLocalTransform() : this.props.ScreenToLocalTransform(); + } + + backgroundScreenToLocalTransform = () => { + if (this.props.PanelSize[0]) + return this.props.ScreenToLocalTransform().scale(this.props.Scaling); + else return this.props.ScreenToLocalTransform().scale(1 / this.props.Scaling); + } + documentScreenToLocalTransform = () => { + if (this.props.PanelSize[0]) + return this.props.ScreenToLocalTransform(); + else return this.backgroundScreenToLocalTransform(); } render() { if (!this.props.Document) @@ -255,18 +267,23 @@ export class DocumentView extends React.Component<DocumentViewProps> { if (!lkeys || lkeys === "<Waiting>") { return <p>Error loading layout keys</p>; } - let bindings = { + let backgroundBindings = { ...this.props, - ScreenToLocalTransform: this.screenToLocalTransform, // adds 'Scaling' to the screen to local Xf + ScreenToLocalTransform: this.backgroundScreenToLocalTransform, // adds 'Scaling' to the screen to local Xf isSelected: this.isSelected, select: this.select } as any; for (const key of this.layoutKeys) { - bindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data + backgroundBindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data } for (const key of this.layoutFields) { let field = this.props.Document.Get(key); - bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; + backgroundBindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; + } + + let documentBindings = { + ...backgroundBindings, + ScreenToLocalTransform: this.documentScreenToLocalTransform, // adds 'Scaling' to the screen to local Xf } /* tfs: @@ -278,12 +295,12 @@ export class DocumentView extends React.Component<DocumentViewProps> { if (backgroundLayout) { let backgroundView = () => (<JsxParser components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }} - bindings={bindings} + bindings={backgroundBindings} jsx={this.backgroundLayout} showWarnings={true} onError={(test: any) => { console.log(test) }} />); - bindings.BackgroundView = backgroundView; + documentBindings.BackgroundView = backgroundView; } var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); @@ -297,7 +314,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { onPointerDown={this.onPointerDown} > <JsxParser components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }} - bindings={bindings} + bindings={documentBindings} jsx={this.layout} showWarnings={true} onError={(test: any) => { console.log(test) }} |