aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/DocumentDecorations.tsx8
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx1
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx1
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx49
-rw-r--r--src/client/views/nodes/DocumentView.tsx35
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) }}