From 9f8653ab3d7f82a5d82b925bf339bef8d6723f5c Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 11 Feb 2019 17:37:03 -0500
Subject: added framework for annotation overlays -- see ImageBox

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 1d53cedc4..a183db828 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -48,7 +48,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
 
     @computed
     get transform(): string {
-        return `translate(${this.x}px, ${this.y}px)`;
+        return `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.x}px, ${this.y}px)`;
     }
 
     @computed
@@ -207,6 +207,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
             <div className="node" ref={this._mainCont} style={{
+                transformOrigin: "left top",
                 transform: freestyling ? this.transform : "",
                 width: freestyling ? this.width : "100%",
                 height: freestyling ? this.height : "100%",
-- 
cgit v1.2.3-70-g09d2


From 793cc99ab134bc5aa4667c95def851ce08d35146 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 11 Feb 2019 21:17:24 -0500
Subject: added aspect resizing.  fixed pinch zoom for macs

---
 src/client/documents/Documents.ts                   | 15 ++++++++++++---
 src/client/views/DocumentDecorations.tsx            |  6 ++++--
 src/client/views/Main.tsx                           |  4 ++--
 .../views/collections/CollectionFreeFormView.tsx    | 17 +++++++++++------
 .../views/nodes/CollectionFreeFormDocumentView.tsx  | 21 ++++++++++++++++++---
 src/fields/Key.ts                                   |  1 +
 6 files changed, 48 insertions(+), 16 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 12eddaec9..84aaaa78f 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -17,6 +17,8 @@ interface DocumentOptions {
     y?: number;
     width?: number;
     height?: number;
+    nativeWidth?: number;
+    nativeHeight?: number;
     title?: string;
 }
 
@@ -34,6 +36,12 @@ export namespace Documents {
         if (options.height) {
             doc.SetData(KeyStore.Height, options.height, NumberField);
         }
+        if (options.nativeWidth) {
+            doc.SetData(KeyStore.NativeWidth, options.nativeWidth, NumberField);
+        }
+        if (options.nativeHeight) {
+            doc.SetData(KeyStore.NativeHeight, options.nativeHeight, NumberField);
+        }
         if (options.title) {
             doc.SetData(KeyStore.Title, options.title, TextField);
         }
@@ -115,9 +123,10 @@ export namespace Documents {
             imageProto.Set(KeyStore.Title, new TextField("IMAGE PROTO"));
             imageProto.Set(KeyStore.X, new NumberField(0));
             imageProto.Set(KeyStore.Y, new NumberField(0));
-            imageProto.Set(KeyStore.NativeWidth, new NumberField(606));
-            imageProto.Set(KeyStore.Width, new NumberField(606));
-            imageProto.Set(KeyStore.Height, new NumberField(446));
+            imageProto.Set(KeyStore.NativeWidth, new NumberField(300));
+            imageProto.Set(KeyStore.NativeHeight, new NumberField(300));
+            imageProto.Set(KeyStore.Width, new NumberField(300));
+            imageProto.Set(KeyStore.Height, new NumberField(300));
             imageProto.Set(KeyStore.Layout, new TextField("<CollectionFreeFormView DocumentForCollection={Document} CollectionFieldKey={AnnotationsKey} BackgroundView={BackgroundView} ContainingDocumentView={DocumentView} />"));
             imageProto.Set(KeyStore.AnnotatedLayout, new TextField(ImageBox.LayoutString()));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8a94bff36..7efaa5533 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -111,8 +111,10 @@ export class DocumentDecorations extends React.Component {
                 let actualdH = Math.max(element.height + (dH * scale), 20);
                 element.x += dX * (actualdW - element.width);
                 element.y += dY * (actualdH - element.height);
-                element.width = actualdW;
-                element.height = actualdH;
+                if (Math.abs(dW) > Math.abs(dH))
+                    element.width = actualdW;
+                else
+                    element.height = actualdH;
             }
         })
     }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 31a709744..8d474698f 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -44,11 +44,11 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     doc2.Set(KS.X, new NumberField(150));
     doc2.Set(KS.Y, new NumberField(20));
     let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
-        x: 450, y: 100, title: "cat 1"
+        x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386
     });
     //doc3.Set(KeyStore.Data, new ImageField);
     const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
-        x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v
+        x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386
     }));
     schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
     schemaDocs[4].SetData(KS.Author, "Bob", TextField);
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9cf8f2e35..bf24965dc 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -34,6 +34,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @computed
     get nativeWidth() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0); }
+    @computed
+    get nativeHeight() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeHeight, 0); }
 
     @computed
     get zoomScaling() { return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1); }
@@ -56,10 +58,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace;
             const screenX = de.x - xOffset;
             const screenY = de.y - yOffset;
-            const docX = (screenX - translateX) / currScale;
-            const docY = (screenY - translateY) / currScale;
-            doc.x = docX;
-            doc.y = docY;
+            doc.x = (screenX - translateX) / currScale;
+            doc.y = (screenY - translateY) / currScale;
             this.bringToFront(doc);
         }
         e.stopPropagation();
@@ -118,10 +118,15 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
+        e.preventDefault();
+        let modes = ['pixels', 'lines', 'page'];
+        let coefficient = 1000;
+        if (modes[e.deltaMode] == 'pixels') coefficient = 50;
+        else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
 
         let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
 
-        var deltaScale = (1 - (e.deltaY / 1000)) * Ss;
+        var deltaScale = (1 - (e.deltaY / coefficient)) * Ss;
         var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
 
         this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
@@ -131,7 +136,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     private SetPan(panX: number, panY: number) {
         const newPanX = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeWidth, Math.min(0, panX));
-        const newPanY = Math.min(0, panY);
+        const newPanY = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeHeight, Math.min(0, panY));
         this.props.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
         this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
     }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a183db828..fafb470f9 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -53,20 +53,35 @@ export class CollectionFreeFormDocumentView extends DocumentView {
 
     @computed
     get width(): number {
-        return this.props.Document.GetData(KeyStore.Width, NumberField, Number(0));
+        return this.props.Document.GetNumber(KeyStore.Width, 0);
+    }
+
+    @computed
+    get nativeWidth(): number {
+        return this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
     }
 
     set width(w: number) {
         this.props.Document.SetData(KeyStore.Width, w, NumberField)
+        if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+            this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w)
+        }
     }
 
     @computed
     get height(): number {
-        return this.props.Document.GetData(KeyStore.Height, NumberField, Number(0));
+        return this.props.Document.GetNumber(KeyStore.Height, 0);
+    }
+    @computed
+    get nativeHeight(): number {
+        return this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
     }
 
     set height(h: number) {
-        this.props.Document.SetData(KeyStore.Height, h, NumberField)
+        this.props.Document.SetData(KeyStore.Height, h, NumberField);
+        if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+            this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h)
+        }
     }
 
     @computed
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 67a5f86fb..13bdd01d4 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -43,6 +43,7 @@ export namespace KeyStore {
     export const PanY = new Key("PanY");
     export const Scale = new Key("Scale");
     export const NativeWidth = new Key("NativeWidth");
+    export const NativeHeight = new Key("NativeHeight");
     export const Width = new Key("Width");
     export const Height = new Key("Height");
     export const ZIndex = new Key("ZIndex");
-- 
cgit v1.2.3-70-g09d2


From dad5b1f21df41444a577db1ee108980b8b8ab0a9 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 11 Feb 2019 21:42:49 -0500
Subject: Changed FieldId type around to clean some stuff up

---
 src/client/Server.ts                               | 23 ++++++++++++----------
 src/client/SocketStub.ts                           |  6 +++---
 src/client/documents/Documents.ts                  |  4 ++--
 src/client/views/nodes/AnnotationView.tsx          | 12 -----------
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  3 ++-
 src/client/views/nodes/FormattedTextBox.tsx        |  1 +
 src/fields/Document.ts                             |  7 +++----
 src/fields/Field.ts                                | 10 +++++-----
 8 files changed, 29 insertions(+), 37 deletions(-)
 delete mode 100644 src/client/views/nodes/AnnotationView.tsx

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/Server.ts b/src/client/Server.ts
index 85e55a84e..0cb6e17c2 100644
--- a/src/client/Server.ts
+++ b/src/client/Server.ts
@@ -1,16 +1,16 @@
-import { Field, FieldWaiting, FIELD_ID, FIELD_WAITING, FieldValue } from "../fields/Field"
+import { Field, FieldWaiting, FieldId, FIELD_WAITING, FieldValue, Opt } from "../fields/Field"
 import { Key, KeyStore } from "../fields/Key"
 import { ObservableMap, action } from "mobx";
 import { Document } from "../fields/Document"
 import { SocketStub } from "./SocketStub";
 
 export class Server {
-    private static ClientFieldsCached: ObservableMap<FIELD_ID, Field | FIELD_WAITING> = new ObservableMap();
+    private static ClientFieldsCached: ObservableMap<FieldId, Field | FIELD_WAITING> = new ObservableMap();
 
     // Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
     // Call this is from within a reaction and test whether the return value is FieldWaiting.
     // 'hackTimeout' is here temporarily for simplicity when debugging things.
-    public static GetField(fieldid: FIELD_ID, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) {
+    public static GetField(fieldid: FieldId, callback: (field: Field) => void = (f) => { }, hackTimeout: number = -1) {
         if (!this.ClientFieldsCached.get(fieldid)) {
             this.ClientFieldsCached.set(fieldid, FieldWaiting);
             //simulating a server call with a registered callback action
@@ -24,15 +24,18 @@ export class Server {
     }
 
     static times = 0; // hack for testing
-    public static GetDocumentField(doc: Document, key: Key) {
+    public static GetDocumentField(doc: Document, key: Key): FieldValue<Field> {
         var hackTimeout: number = key == KeyStore.Data ? (this.times++ == 0 ? 5000 : 1000) : key == KeyStore.X ? 2500 : 500;
 
-        return this.GetField(doc._proxies.get(key),
-            action((fieldfromserver: Field) => {
-                doc._proxies.delete(key);
-                doc.fields.set(key, fieldfromserver);
-            })
-            , hackTimeout);
+        let fieldId = doc._proxies.get(key);
+        if (fieldId) {
+            return this.GetField(fieldId,
+                action((fieldfromserver: Field) => {
+                    doc._proxies.delete(key);
+                    doc.fields.set(key, fieldfromserver);
+                })
+                , hackTimeout);
+        }
     }
 
     public static AddDocument(document: Document) {
diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts
index 58dedbf82..cea30cb8b 100644
--- a/src/client/SocketStub.ts
+++ b/src/client/SocketStub.ts
@@ -1,11 +1,11 @@
-import { Field, FIELD_ID } from "../fields/Field"
+import { Field, FieldId } from "../fields/Field"
 import { Key, KeyStore } from "../fields/Key"
 import { ObservableMap, action } from "mobx";
 import { Document } from "../fields/Document"
 
 export class SocketStub {
 
-    static FieldStore: ObservableMap<FIELD_ID, Field> = new ObservableMap();
+    static FieldStore: ObservableMap<FieldId, Field> = new ObservableMap();
     public static SEND_ADD_DOCUMENT(document: Document) {
 
         // Send a serialized version of the document to the server
@@ -19,7 +19,7 @@ export class SocketStub {
         document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key, (f as Field).Id));
     }
 
-    public static SEND_FIELD_REQUEST(fieldid: FIELD_ID, callback: (field: Field) => void, timeout: number) {
+    public static SEND_FIELD_REQUEST(fieldid: FieldId, callback: (field: Field) => void, timeout: number) {
 
         if (timeout < 0)// this is a hack to make things easier to setup until we have a server... won't be neededa fter that.
             callback(this.FieldStore.get(fieldid) as Field);
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 6925234fe..575112c85 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -10,7 +10,7 @@ import { CollectionSchemaView } from "../views/collections/CollectionSchemaView"
 import { ImageField } from "../../fields/ImageField";
 import { ImageBox } from "../views/nodes/ImageBox";
 import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
-import { FIELD_ID } from "../../fields/Field";
+import { FieldId } from "../../fields/Field";
 
 interface DocumentOptions {
     x?: number;
@@ -107,7 +107,7 @@ export namespace Documents {
     }
 
 
-    let imageProtoId: FIELD_ID;
+    let imageProtoId: FieldId;
     function GetImagePrototype(): Document {
         if (imageProtoId === undefined) {
             let imageProto = new Document();
diff --git a/src/client/views/nodes/AnnotationView.tsx b/src/client/views/nodes/AnnotationView.tsx
deleted file mode 100644
index 2e50370a1..000000000
--- a/src/client/views/nodes/AnnotationView.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React = require('react')
-import { CollectionViewProps } from '../collections/CollectionViewBase';
-
-export class AnnotationView extends React.Component<CollectionViewProps> {
-
-    render() {
-        return (
-            <></>
-        );
-    }
-
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 1d53cedc4..a111a9936 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -17,6 +17,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
     private _contextMenuCanOpen = false;
     private _downX: number = 0;
     private _downY: number = 0;
+    // private _mainCont = React.createRef<HTMLDivElement>();
 
     constructor(props: DocumentViewProps) {
         super(props);
@@ -216,7 +217,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
 
-                <DocumentView {...this.props} DocumentView={this} />
+                <DocumentView {...this.props} DocumentView={this.props.DocumentView} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index eead43b9f..8f959762a 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -12,6 +12,7 @@ import React = require("react")
 import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
 import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
+import { observer } from "mobx-react";
 
 
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 6f9752a8e..c682d8e94 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -1,15 +1,14 @@
-import { Field, Cast, Opt, FieldWaiting, FIELD_ID, FieldValue } from "./Field"
+import { Field, Cast, Opt, FieldWaiting, FieldId, FieldValue } from "./Field"
 import { Key, KeyStore } from "./Key"
 import { NumberField } from "./NumberField";
 import { ObservableMap, computed, action, observable } from "mobx";
 import { TextField } from "./TextField";
 import { ListField } from "./ListField";
-import { findDOMNode } from "react-dom";
 import { Server } from "../client/Server";
 
 export class Document extends Field {
-    public fields: ObservableMap<Key, Opt<Field>> = new ObservableMap();
-    public _proxies: ObservableMap<Key, FIELD_ID> = new ObservableMap();
+    public fields: ObservableMap<Key, Field> = new ObservableMap();
+    public _proxies: ObservableMap<Key, FieldId> = new ObservableMap();
 
     @computed
     public get Title() {
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index 6adee9b61..4a3968699 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -10,21 +10,21 @@ export function Cast<T extends Field>(field: FieldValue<Field>, ctor: { new(): T
     return undefined;
 }
 
-export let FieldWaiting: FIELD_WAITING = "<Waiting>";
+export const FieldWaiting: FIELD_WAITING = "<Waiting>";
 export type FIELD_WAITING = "<Waiting>";
-export type FIELD_ID = string | undefined;
+export type FieldId = string;
 export type Opt<T> = T | undefined;
 export type FieldValue<T> = Opt<T> | FIELD_WAITING;
 
 export abstract class Field {
     //FieldUpdated: TypedEvent<Opt<FieldUpdatedArgs>> = new TypedEvent<Opt<FieldUpdatedArgs>>();
 
-    private id: FIELD_ID;
-    get Id(): FIELD_ID {
+    private id: FieldId;
+    get Id(): FieldId {
         return this.id;
     }
 
-    constructor(id: FIELD_ID = undefined) {
+    constructor(id: Opt<FieldId> = undefined) {
         this.id = id || Utils.GenerateGuid();
     }
 
-- 
cgit v1.2.3-70-g09d2


From e2ca8fa7ec95768ef37914b909ee47fbca6b1251 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 12 Feb 2019 00:44:01 -0500
Subject: Added transforms to everything, not being used yet

---
 package-lock.json                                  | 199 ++++++++++++++++++++-
 package.json                                       |   1 +
 src/client/util/Transform.ts                       |  94 ++++++++++
 src/client/views/Main.tsx                          |   5 +-
 .../views/collections/CollectionDockingView.tsx    |  11 +-
 .../views/collections/CollectionFreeFormView.tsx   |  24 ++-
 .../views/collections/CollectionSchemaView.tsx     |   6 +-
 .../views/collections/CollectionViewBase.tsx       |  11 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |   7 +-
 src/client/views/nodes/DocumentView.tsx            |   8 +-
 10 files changed, 354 insertions(+), 12 deletions(-)
 create mode 100644 src/client/util/Transform.ts

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/package-lock.json b/package-lock.json
index 535c348d5..a4939f1cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -684,6 +684,11 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -745,6 +750,11 @@
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
       "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
     },
+    "ast-types": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz",
+      "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk="
+    },
     "async": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
@@ -883,6 +893,11 @@
         }
       }
     },
+    "base62": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/base62/-/base62-1.2.8.tgz",
+      "integrity": "sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA=="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@@ -1445,8 +1460,7 @@
     "commander": {
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
-      "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==",
-      "dev": true
+      "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -1454,6 +1468,36 @@
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
       "dev": true
     },
+    "commoner": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.8.tgz",
+      "integrity": "sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=",
+      "requires": {
+        "commander": "^2.5.0",
+        "detective": "^4.3.1",
+        "glob": "^5.0.15",
+        "graceful-fs": "^4.1.2",
+        "iconv-lite": "^0.4.5",
+        "mkdirp": "^0.5.0",
+        "private": "^0.1.6",
+        "q": "^1.1.2",
+        "recast": "^0.11.17"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "5.0.15",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
+          "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
+          "requires": {
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "2 || 3",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
     "component-emitter": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
@@ -1594,6 +1638,11 @@
         "serialize-javascript": "^1.4.0"
       }
     },
+    "core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -1884,6 +1933,11 @@
         }
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
+    },
     "del": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/del/-/del-3.0.0.tgz",
@@ -1969,6 +2023,15 @@
       "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
       "dev": true
     },
+    "detective": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-4.7.1.tgz",
+      "integrity": "sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==",
+      "requires": {
+        "acorn": "^5.2.1",
+        "defined": "^1.0.0"
+      }
+    },
     "diff": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
@@ -2127,6 +2190,15 @@
         "tapable": "^1.0.0"
       }
     },
+    "envify": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/envify/-/envify-3.4.1.tgz",
+      "integrity": "sha1-1xIjKejfFoi6dxsSUBkXyc5cvOg=",
+      "requires": {
+        "jstransform": "^11.0.3",
+        "through": "~2.3.4"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -2196,6 +2268,11 @@
         "estraverse": "^4.1.1"
       }
     },
+    "esprima-fb": {
+      "version": "15001.1.0-dev-harmony-fb",
+      "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz",
+      "integrity": "sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE="
+    },
     "esrecurse": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
@@ -2479,6 +2556,18 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fbjs": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.6.1.tgz",
+      "integrity": "sha1-lja3cF9bqWhNRLcveDISVK/IYPc=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "promise": "^7.0.3",
+        "ua-parser-js": "^0.7.9",
+        "whatwg-fetch": "^0.9.0"
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -3649,6 +3738,11 @@
       "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
       "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
     },
+    "immutable": {
+      "version": "4.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0-rc.12.tgz",
+      "integrity": "sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A=="
+    },
     "import-lazy": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
@@ -4092,6 +4186,11 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "json-stringify-pretty-compact": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-1.2.0.tgz",
+      "integrity": "sha512-/11Pj1OyX814QMKO7K8l85SHPTr/KsFxHp8GE2zVa0BtJgGimDjXHfM3FhC7keQdWDea7+nXf+f1de7ATZcZkQ=="
+    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -4122,6 +4221,46 @@
         "verror": "1.10.0"
       }
     },
+    "jstransform": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-11.0.3.tgz",
+      "integrity": "sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=",
+      "requires": {
+        "base62": "^1.1.0",
+        "commoner": "^0.10.1",
+        "esprima-fb": "^15001.1.0-dev-harmony-fb",
+        "object-assign": "^2.0.0",
+        "source-map": "^0.4.2"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz",
+          "integrity": "sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo="
+        }
+      }
+    },
+    "jsx-to-string": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsx-to-string/-/jsx-to-string-1.4.0.tgz",
+      "integrity": "sha1-Ztw013PaufQP6ZPP+ZQOXaZVtwU=",
+      "requires": {
+        "immutable": "^4.0.0-rc.9",
+        "json-stringify-pretty-compact": "^1.0.1",
+        "react": "^0.14.0"
+      },
+      "dependencies": {
+        "react": {
+          "version": "0.14.9",
+          "resolved": "https://registry.npmjs.org/react/-/react-0.14.9.tgz",
+          "integrity": "sha1-kRCmSXxJ1EuhwO3TF67CnC4NkdE=",
+          "requires": {
+            "envify": "^3.0.0",
+            "fbjs": "^0.6.1"
+          }
+        }
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8491,6 +8630,11 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "private": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
+      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg=="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -8502,6 +8646,14 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
       "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -8659,6 +8811,11 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
@@ -8879,6 +9036,29 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "recast": {
+      "version": "0.11.23",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz",
+      "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=",
+      "requires": {
+        "ast-types": "0.9.6",
+        "esprima": "~3.1.0",
+        "private": "~0.1.5",
+        "source-map": "~0.5.0"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -10075,6 +10255,11 @@
         "native-promise-only": "^0.8.1"
       }
     },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -10263,6 +10448,11 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.1.tgz",
       "integrity": "sha512-cTmIDFW7O0IHbn1DPYjkiebHxwtCMU+eTy30ZtJNBPF9j2O1ITu5XH2YnBeVRKWHqF+3JQwWJv0Q0aUgX8W7IA=="
     },
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+    },
     "undefsafe": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
@@ -11238,6 +11428,11 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
+    "whatwg-fetch": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz",
+      "integrity": "sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
diff --git a/package.json b/package.json
index 6697b5f47..657bb875d 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "express": "^4.16.4",
     "flexlayout-react": "^0.3.3",
     "golden-layout": "^1.5.9",
+    "jsx-to-string": "^1.4.0",
     "mobx": "^5.9.0",
     "mobx-react": "^5.3.5",
     "mobx-react-devtools": "^6.0.3",
diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts
new file mode 100644
index 000000000..7861ed308
--- /dev/null
+++ b/src/client/util/Transform.ts
@@ -0,0 +1,94 @@
+export class Transform {
+    private _translateX: number = 0;
+    private _translateY: number = 0;
+    private _scale: number = 1;
+
+    static get Identity(): Transform {
+        return new Transform(0, 0, 1);
+    }
+
+    constructor(x: number, y: number, scale: number) {
+        this._translateX = x;
+        this._translateY = y;
+        this._scale = scale;
+    }
+
+    translate = (x: number, y: number): Transform => {
+        this._translateX += x;
+        this._translateY += y;
+        return this;
+    }
+
+    translated = (x: number, y: number): Transform => {
+        return this.copy().translate(x, y);
+    }
+
+    preTranslate = (x: number, y: number): Transform => {
+        this._translateX += x * this._scale;
+        this._translateY += y * this._scale;
+        return this;
+    }
+
+    preTranslated = (x: number, y: number): Transform => {
+        return this.copy().preTranslate(x, y);
+    }
+
+    scale = (scale: number): Transform => {
+        this._scale *= scale;
+        return this;
+    }
+
+    scaled = (scale: number): Transform => {
+        return this.copy().scale(scale);
+    }
+
+    preScale = (scale: number): Transform => {
+        this._scale *= scale;
+        this._translateX *= scale;
+        this._translateY *= scale;
+        return this;
+    }
+
+    preScaled = (scale: number): Transform => {
+        return this.copy().preScale(scale);
+    }
+
+    transform = (transform: Transform): Transform => {
+        this._translateX += transform._translateX * this._scale;
+        this._translateY += transform._translateY * this._scale;
+        this._scale *= transform._scale;
+        return this;
+    }
+
+    transformed = (transform: Transform): Transform => {
+        return this.copy().transform(transform);
+    }
+
+    preTransform = (transform: Transform): Transform => {
+        this._translateX = transform._translateX + this._translateX * transform._scale;
+        this._translateY = transform._translateY + this._translateY * transform._scale;
+        this._scale *= transform._scale;
+        return this;
+    }
+
+    preTransformed = (transform: Transform): Transform => {
+        return this.copy().preTransform(transform);
+    }
+
+    transformPoint = (x: number, y: number): [number, number] => {
+        x *= this._scale;
+        x += this._translateX;
+        y *= this._scale;
+        y += this._translateY;
+        return [x, y];
+    }
+
+    inverse = () => {
+        return new Transform(-this._translateX / this._scale, -this._translateY / this._scale, 1 / this._scale)
+    }
+
+    copy = () => {
+        return new Transform(this._translateX, this._translateY, this._scale);
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 9a359e868..ac6f1de00 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -13,6 +13,7 @@ import "./Main.scss";
 import { ContextMenu } from './ContextMenu';
 import { DocumentView } from './nodes/DocumentView';
 import { ImageField } from '../../fields/ImageField';
+import { Transform } from '../util/Transform';
 
 
 configure({
@@ -84,7 +85,9 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 
 ReactDOM.render((
     <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-        <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
+        <DocumentView Document={mainContainer}
+            AddDocument={undefined} RemoveDocument={undefined} GetTransform={() => Transform.Identity}
+            ContainingCollectionView={undefined} DocumentView={undefined} />
         <DocumentDecorations />
         <ContextMenu />
     </div>),
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 9aee9c10f..32d00d41a 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -14,6 +14,7 @@ import * as GoldenLayout from "golden-layout";
 import * as ReactDOM from 'react-dom';
 import { DragManager } from "../../util/DragManager";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { Transform } from "../../util/Transform";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
@@ -95,7 +96,10 @@ export class CollectionDockingView extends CollectionViewBase {
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         for (var i: number = 0; i < value.length; i++) {
             if (value[i].Id === component) {
-                return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
+                return (<DocumentView key={value[i].Id} Document={value[i]}
+                    AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
+                    GetTransform={() => Transform.Identity}
+                    ContainingCollectionView={this} DocumentView={undefined} />);
             }
         }
         if (component === "text") {
@@ -236,7 +240,10 @@ export class CollectionDockingView extends CollectionViewBase {
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
                 ReactDOM.render((
-                    <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
+                    <DocumentView key={state.doc.Id} Document={state.doc}
+                        AddDocument={me.addDocument} RemoveDocument={me.removeDocument}
+                        GetTransform={() => Transform.Identity}
+                        ContainingCollectionView={me} DocumentView={undefined} />
                 ),
                     document.getElementById(containingDiv)
                 );
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 9cf29d000..50f4f1892 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -13,6 +13,7 @@ import { ListField } from "../../../fields/ListField";
 import { NumberField } from "../../../fields/NumberField";
 import { Documents } from "../../documents/Documents";
 import { FieldWaiting } from "../../../fields/Field";
+import { Transform } from "../../util/Transform";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
@@ -172,6 +173,23 @@ export class CollectionFreeFormView extends CollectionViewBase {
         }
     }
 
+    @computed
+    get translate(): [number, number] {
+        const x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
+        const y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
+        return [x, y];
+    }
+
+    @computed
+    get scale(): number {
+        return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1);
+    }
+
+    getTransform = (): Transform => {
+        const [x, y] = this.translate;
+        return this.props.GetTransform().scaled(this.scale).translate(x, y);
+    }
+
     render() {
         const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
         const value: Document[] = Document.GetList<Document>(fieldKey, []);
@@ -194,7 +212,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
                         <div className="node-container" ref={this._nodeContainerRef}>
                             {value.map(doc => {
-                                return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
+                                return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
+                                    AddDocument={this.addDocument}
+                                    RemoveDocument={this.removeDocument}
+                                    GetTransform={this.getTransform}
+                                    ContainingCollectionView={this} DocumentView={undefined} />);
                             })}
                         </div>
                     </div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 2d5bd6c99..b897fd481 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -14,6 +14,7 @@ import { CompileScript, ToField } from "../../util/Scripting";
 import { KeyStore as KS, Key } from "../../../fields/Key";
 import { Document } from "../../../fields/Document";
 import { Field } from "../../../fields/Field";
+import { Transform } from "../../util/Transform";
 
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
@@ -104,7 +105,10 @@ export class CollectionSchemaView extends CollectionViewBase {
         let content;
         if (this.selectedIndex != -1) {
             content = (
-                <DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />
+                <DocumentView Document={children[this.selectedIndex]}
+                    AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
+                    GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
+                    DocumentView={undefined} ContainingCollectionView={this} />
             )
         } else {
             content = <div />
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 09e8ec729..ff54d88d7 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -10,12 +10,14 @@ import React = require("react");
 import { DocumentView } from "../nodes/DocumentView";
 import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { Transform } from "../../util/Transform";
 
 
 export interface CollectionViewProps {
     CollectionFieldKey: Key;
     DocumentForCollection: Document;
     ContainingDocumentView: Opt<DocumentView>;
+    GetTransform: () => Transform;
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
@@ -43,15 +45,18 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
     }
 
     @action
-    removeDocument = (doc: Document): void => {
+    removeDocument = (doc: Document): boolean => {
         //TODO This won't create the field if it doesn't already exist
         const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
-        if (value.indexOf(doc) !== -1) {
-            value.splice(value.indexOf(doc), 1)
+        let index = value.indexOf(doc);
+        if (index !== -1) {
+            value.splice(index, 1)
 
             SelectionManager.DeselectAll()
             ContextMenu.Instance.clearItems()
+            return true;
         }
+        return false
     }
 
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a111a9936..0defc8f1d 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu";
 import "./NodeView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
+import { Transform } from "../../util/Transform";
 
 
 @observer
@@ -204,6 +205,10 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         }
     }
 
+    getTransform = (): Transform => {
+        return this.props.GetTransform().translated(this.x, this.y);
+    }
+
     render() {
         var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
@@ -217,7 +222,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
 
-                <DocumentView {...this.props} DocumentView={this.props.DocumentView} />
+                <DocumentView {...this.props} GetTransform={this.getTransform} DocumentView={this.props.DocumentView} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 730ce62f2..ce23a70a6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -15,13 +15,19 @@ import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import "./NodeView.scss";
 import React = require("react");
+import { Transform } from "../../util/Transform";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 export interface DocumentViewProps {
-    Document: Document;
     DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
     ContainingCollectionView: Opt<CollectionViewBase>;
+
+    Document: Document;
+    AddDocument?: (doc: Document) => void;
+    RemoveDocument?: (doc: Document) => boolean;
+    GetTransform: () => Transform;
 }
+
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
 
-- 
cgit v1.2.3-70-g09d2


From 1afff429130469a431af1552b77c3ff197f3820a Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 08:43:39 -0500
Subject: changed back to DocumentView={this} in CollectionFreeFormDocumentView
 - it's needed when panning a collectionl

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 4641ea290..54d3a1b56 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -238,7 +238,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
 
-                <DocumentView {...this.props} GetTransform={this.getTransform} DocumentView={this.props.DocumentView} />
+                <DocumentView {...this.props} GetTransform={this.getTransform} DocumentView={this} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 7a93f60c9529e5d175e617fc7c07145a9b33e572 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 15:49:06 -0500
Subject: more updates to resizing, etc.

---
 src/client/documents/Documents.ts                  |  4 +-
 src/client/views/Main.tsx                          |  6 +--
 .../views/collections/CollectionDockingView.tsx    | 63 +++++++++++++++-------
 .../views/collections/CollectionFreeFormView.tsx   |  7 +--
 .../views/collections/CollectionSchemaView.tsx     |  2 +-
 .../views/collections/CollectionViewBase.tsx       |  5 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  2 +-
 src/client/views/nodes/DocumentView.tsx            |  9 +++-
 src/client/views/nodes/FormattedTextBox.tsx        |  2 +-
 src/client/views/nodes/ImageBox.tsx                |  3 +-
 10 files changed, 68 insertions(+), 35 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7512d25cb..72fa608ad 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -127,7 +127,7 @@ export namespace Documents {
             imageProto.Set(KeyStore.NativeHeight, new NumberField(300));
             imageProto.Set(KeyStore.Width, new NumberField(300));
             imageProto.Set(KeyStore.Height, new NumberField(300));
-            imageProto.Set(KeyStore.Layout, new TextField("<CollectionFreeFormView DocumentForCollection={Document} CollectionFieldKey={AnnotationsKey} BackgroundView={BackgroundView} ContainingDocumentView={DocumentView} />"));
+            imageProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString("AnnotationsKey")));
             imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString()));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
             imageProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations]));
@@ -161,7 +161,7 @@ export namespace Documents {
             collectionProto.Set(KeyStore.PanY, new NumberField(0));
             collectionProto.Set(KeyStore.Width, new NumberField(300));
             collectionProto.Set(KeyStore.Height, new NumberField(300));
-            collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString()));
+            collectionProto.Set(KeyStore.Layout, new TextField(CollectionFreeFormView.LayoutString("DataKey")));
             collectionProto.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
         }
         return collectionProto;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b58704264..ba92cc17e 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -40,7 +40,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 
 //runInAction(() => 
 {
-    let doc1 = Documents.TextDocument({ title: "hello" });
+    let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 });
     let doc2 = doc1.MakeDelegate();
     doc2.Set(KS.X, new NumberField(150));
     doc2.Set(KS.Y, new NumberField(20));
@@ -62,7 +62,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
     //     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
     // });
-    let docset2 = [doc4, doc1, doc3];
+    let docset2 = [doc3, doc1, doc2];
     let doc6 = Documents.CollectionDocument(docset2, {
         x: 350, y: 100, width: 600, height: 600, title: "docking collection"
     });
@@ -76,7 +76,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     mainNodes.Data.push(doc3);
     // mainNodes.Data.push(doc5);
     // mainNodes.Data.push(doc1);
-    //mainNodes.Data.push(doc2);
+    // mainNodes.Data.push(doc2);
     mainNodes.Data.push(doc6);
     mainContainer.Set(KeyStore.Data, mainNodes);
 }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index e3d50eb80..d3e90d11c 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -2,7 +2,7 @@ import FlexLayout from "flexlayout-react";
 import * as GoldenLayout from "golden-layout";
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, computed } from "mobx";
+import { action, computed, reaction, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import { Document } from "../../../fields/Document";
@@ -44,7 +44,7 @@ export class CollectionDockingView extends CollectionViewBase {
         const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         var docs = value.map(doc => {
-            return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
+            return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc, scaling: 1 } };
         });
         return new GoldenLayout({
             settings: {
@@ -111,6 +111,7 @@ export class CollectionDockingView extends CollectionViewBase {
 
     public static myLayout: any = null;
 
+    public rcs: Array<RenderClass> = new Array();
     private static _dragDiv: any = null;
     private static _dragParent: HTMLElement | null = null;
     private static _dragElement: HTMLDivElement;
@@ -119,7 +120,7 @@ export class CollectionDockingView extends CollectionViewBase {
         var newItemConfig = {
             type: 'component',
             componentName: 'documentViewComponent',
-            componentState: { doc: dragDoc }
+            componentState: { doc: dragDoc, scaling: 1 }
         };
         this._dragElement = dragElement;
         this._dragParent = dragElement.parentElement;
@@ -160,7 +161,6 @@ export class CollectionDockingView extends CollectionViewBase {
             CollectionDockingView.myLayout._maximizedStack = null;
         }
     }
-
     //
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
@@ -241,21 +241,8 @@ export class CollectionDockingView extends CollectionViewBase {
             var containingDiv = "component_" + me.nextId();
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
-                var htmlElement = document.getElementById(containingDiv);
-                container.on('resize', (e: any) => {
-                    // state.doc.SetNumber(KeyStore.Width, htmlElement!.clientWidth);
-                    // if (htmlElement!.clientHeight > 0)
-                    //     state.doc.SetNumber(KeyStore.Height, htmlElement!.clientHeight);
-                })
-                ReactDOM.render((
-                    <DocumentView key={state.doc.Id} Document={state.doc}
-                        AddDocument={me.addDocument} RemoveDocument={me.removeDocument}
-                        GetTransform={() => Transform.Identity}
-                        Scaling={1}
-                        ContainingCollectionView={me} DocumentView={undefined} />
-                ),
-                    htmlElement
-                );
+                state.rc = new RenderClass(containingDiv, state.doc, me, container);
+                me.rcs.push(state.rc);
                 if (CollectionDockingView.myLayout._maxstack != null) {
                     CollectionDockingView.myLayout._maxstack.click();
                 }
@@ -294,4 +281,42 @@ export class CollectionDockingView extends CollectionViewBase {
             </div>
         );
     }
+}
+
+class RenderClass {
+
+    @observable _resizeCount: number = 0;
+
+    _collectionDockingView: CollectionDockingView;
+    _htmlElement: any;
+    _document: Document;
+    constructor(containingDiv: string, doc: Document, me: CollectionDockingView, container: any) {
+        this._collectionDockingView = me;
+        this._htmlElement = document.getElementById(containingDiv);
+        this._document = doc;
+        container.on('resize', action((e: any) => {
+            var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0);
+            if (this._htmlElement != null && this._htmlElement.childElementCount > 0 && nativeWidth > 0) {
+                let scaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1;
+                (this._htmlElement!.children[0] as any).style.transformOrigin = "0px 0px";
+                (this._htmlElement!.children[0] as any).style.transform = `translate(0px,0px)  scale(${scaling}, ${scaling}) `;
+                (this._htmlElement!.children[0] as any).style.width = nativeWidth.toString() + "px";
+            }
+        }));
+
+        this.render();
+    }
+    render() {
+        var nativeWidth = this._document.GetNumber(KeyStore.NativeWidth, 0);
+        let scaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1;
+        ReactDOM.render((
+            <DocumentView key={this._document.Id} Document={this._document}
+                AddDocument={this._collectionDockingView.addDocument} RemoveDocument={this._collectionDockingView.removeDocument}
+                GetTransform={() => Transform.Identity}
+                Scaling={scaling}
+                ContainingCollectionView={this._collectionDockingView} DocumentView={undefined} />
+        ),
+            this._htmlElement
+        );
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 977a03f58..15450d737 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -17,7 +17,7 @@ import { Transform } from "../../util/Transform";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
-    public static LayoutString() { return CollectionViewBase.LayoutString("CollectionFreeFormView"); }
+    public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionFreeFormView", fieldKey); }
     private _containerRef = React.createRef<HTMLDivElement>();
     private _canvasRef = React.createRef<HTMLDivElement>();
     private _lastX: number = 0;
@@ -218,6 +218,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const value: Document[] = Document.GetList<Document>(this.props.CollectionFieldKey, []);
         const panx: number = Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = Document.GetNumber(KeyStore.PanY, 0);
+        var me = this;
 
         return (
             <div className="collectionfreeformview-container"
@@ -231,7 +232,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 }}
                 ref={this._containerRef}>
                 <div className="collectionfreeformview"
-                    style={{ width: "100%", transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }}
+                    style={{ width: "100%", transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
                     ref={this._canvasRef}>
 
                     {this.props.BackgroundView}
@@ -240,7 +241,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                             AddDocument={this.addDocument}
                             RemoveDocument={this.removeDocument}
                             GetTransform={this.getTransform}
-                            Scaling={this.resizeScaling}
+                            Scaling={1}
                             ContainingCollectionView={this} DocumentView={undefined} />);
                     })}
                 </div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 331c4f6fe..f1e882e20 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -27,7 +27,7 @@ export class CollectionSchemaView extends CollectionViewBase {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
             fieldKey: rowProps.value[1],
-            DocumentViewForField: undefined
+            DocumentViewForField: undefined,
         }
         let contents = (
             <FieldView {...props} />
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index eea7908ce..7e2fcb39d 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -19,6 +19,7 @@ export interface CollectionViewProps {
     ContainingDocumentView: Opt<DocumentView>;
     GetTransform: () => Transform;
     BackgroundView: Opt<DocumentView>;
+    Scaling: number;
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
@@ -26,8 +27,8 @@ export const COLLECTION_BORDER_WIDTH = 2;
 @observer
 export class CollectionViewBase extends React.Component<CollectionViewProps> {
 
-    public static LayoutString(collectionType: string) {
-        return `<${collectionType} DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={DocumentView}/>`;
+    public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
+        return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
     }
     @computed
     public get active(): boolean {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 54d3a1b56..9cd42a069 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -238,7 +238,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
 
-                <DocumentView {...this.props} GetTransform={this.getTransform} DocumentView={this} />
+                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} DocumentView={this} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 691ac6311..3a73f2fde 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -115,7 +115,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
             var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
             Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH;
+            Yy = ry - COLLECTION_BORDER_WIDTH + 18 * Ss;
         }
 
         let W = COLLECTION_BORDER_WIDTH;
@@ -158,8 +158,13 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             onError={(test: any) => { console.log(test) }}
         />;
         bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
+
+        var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+        var strwidth = width > 0 ? width.toString() + "px" : "100%";
+        var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+        var strheight = height > 0 ? height.toString() + "px" : "100%";
         return (
-            <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
+            <div className="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}>
                 <JsxParser
                     components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
                     bindings={bindings}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8f959762a..f6bd0c0f8 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -118,7 +118,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         return (<div className="formattedTextBox-cont"
             style={{
                 color: "initial",
-                whiteSpace: "initial"
+                whiteSpace: "initial",
             }}
             onPointerDown={this.onPointerDown}
             ref={this._ref} />)
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 60be5f94d..2fa70734d 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -85,10 +85,11 @@ export class ImageBox extends React.Component<FieldViewProps> {
         let field = this.props.doc.Get(this.props.fieldKey);
         let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
             field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
+        let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
 
         return (
             <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={path} width="100%" alt="Image not found" />
+                <img src={path} width={nativeWidth} alt="Image not found" />
                 {this.lightbox(path)}
             </div>)
     }
-- 
cgit v1.2.3-70-g09d2


From e09ddf280d0e2bdef28477a6d7be06c57051dab6 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 21:08:04 -0500
Subject: fixed up nested selections and scaling

---
 src/client/views/DocumentDecorations.tsx           |  9 +-
 src/client/views/Main.tsx                          |  4 +-
 .../views/collections/CollectionDockingView.tsx    | 34 +++-----
 .../views/collections/CollectionFreeFormView.tsx   | 12 +--
 .../views/collections/CollectionSchemaView.tsx     |  2 +-
 .../views/collections/CollectionViewBase.tsx       |  4 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 47 +++++------
 src/client/views/nodes/DocumentView.tsx            | 97 ++++++++++++----------
 8 files changed, 104 insertions(+), 105 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7efaa5533..cc43372af 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -4,6 +4,7 @@ import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
 import { CollectionFreeFormView } from "./collections/CollectionFreeFormView";
+import { KeyStore } from '../../fields/Key'
 
 @observer
 export class DocumentDecorations extends React.Component {
@@ -25,8 +26,8 @@ export class DocumentDecorations extends React.Component {
                 !(element.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
                 return bounds;
             }
-            var spt = element.TransformToScreenPoint(0, 0);
-            var bpt = element.TransformToScreenPoint(element.width, element.height);
+            var spt = element.TransformToScreenPoint(0, 0, 1, 0, 0, false);
+            var bpt = element.TransformToScreenPoint(element.width, element.height, 1, 0, 0, false);
             return {
                 x: Math.min(spt.ScreenX, bounds.x), y: Math.min(spt.ScreenY, bounds.y),
                 r: Math.max(bpt.ScreenX, bounds.r), b: Math.max(bpt.ScreenY, bounds.b)
@@ -109,8 +110,8 @@ export class DocumentDecorations extends React.Component {
                 let scale = element.width / rect.width;
                 let actualdW = Math.max(element.width + (dW * scale), 20);
                 let actualdH = Math.max(element.height + (dH * scale), 20);
-                element.x += dX * (actualdW - element.width);
-                element.y += dY * (actualdH - element.height);
+                element.props.Document.SetNumber(KeyStore.X, element.props.Document.GetNumber(KeyStore.X, 0) + dX * (actualdW - element.width));
+                element.props.Document.SetNumber(KeyStore.Y, element.props.Document.GetNumber(KeyStore.Y, 0) + dY * (actualdH - element.height));
                 if (Math.abs(dW) > Math.abs(dH))
                     element.width = actualdW;
                 else
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index ba92cc17e..e78949ba7 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -62,7 +62,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
     //     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
     // });
-    let docset2 = [doc3, doc1, doc2];
+    let docset2 = [doc3, doc4, doc2];
     let doc6 = Documents.CollectionDocument(docset2, {
         x: 350, y: 100, width: 600, height: 600, title: "docking collection"
     });
@@ -87,7 +87,7 @@ ReactDOM.render((
     <div style={{ position: "absolute", width: "100%", height: "100%" }}>
         <DocumentView Document={mainContainer}
             AddDocument={undefined} RemoveDocument={undefined} GetTransform={() => Transform.Identity}
-            Scaling={1}
+            ParentScaling={1}
             ContainingCollectionView={undefined} DocumentView={undefined} />
         <DocumentDecorations />
         <ContextMenu />
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index d3e90d11c..8abb0dbaa 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -100,7 +100,7 @@ export class CollectionDockingView extends CollectionViewBase {
                 return (<DocumentView key={value[i].Id} Document={value[i]}
                     AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
                     GetTransform={() => Transform.Identity}
-                    Scaling={1}
+                    ParentScaling={1}
                     ContainingCollectionView={this} DocumentView={undefined} />);
             }
         }
@@ -267,17 +267,15 @@ export class CollectionDockingView extends CollectionViewBase {
         }
 
         return (
-            <div className="border" style={{
-                borderStyle: "solid",
-                borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
-            }}>
-                <div className="collectiondockingview-container" id="menuContainer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
-                    style={{
-                        width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH,
-                        height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH
-                    }} >
-                    {chooseLayout()}
-                </div>
+            <div className="collectiondockingview-container" id="menuContainer"
+                onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                style={{
+                    width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH,
+                    height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH,
+                    borderStyle: "solid",
+                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+                }} >
+                {chooseLayout()}
             </div>
         );
     }
@@ -295,25 +293,19 @@ class RenderClass {
         this._htmlElement = document.getElementById(containingDiv);
         this._document = doc;
         container.on('resize', action((e: any) => {
-            var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0);
-            if (this._htmlElement != null && this._htmlElement.childElementCount > 0 && nativeWidth > 0) {
-                let scaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1;
-                (this._htmlElement!.children[0] as any).style.transformOrigin = "0px 0px";
-                (this._htmlElement!.children[0] as any).style.transform = `translate(0px,0px)  scale(${scaling}, ${scaling}) `;
-                (this._htmlElement!.children[0] as any).style.width = nativeWidth.toString() + "px";
-            }
+            this.render();
         }));
 
         this.render();
     }
     render() {
         var nativeWidth = this._document.GetNumber(KeyStore.NativeWidth, 0);
-        let scaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1;
+        let parentScaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1;
         ReactDOM.render((
             <DocumentView key={this._document.Id} Document={this._document}
                 AddDocument={this._collectionDockingView.addDocument} RemoveDocument={this._collectionDockingView.removeDocument}
                 GetTransform={() => Transform.Identity}
-                Scaling={scaling}
+                ParentScaling={parentScaling}
                 ContainingCollectionView={this._collectionDockingView} DocumentView={undefined} />
         ),
             this._htmlElement
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 15450d737..0262e4a6c 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -58,8 +58,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace;
             const screenX = de.x - xOffset;
             const screenY = de.y - yOffset;
-            doc.x = (screenX - translateX) / currScale;
-            doc.y = (screenY - translateY) / currScale;
+            doc.props.Document.SetNumber(KeyStore.X, (screenX - translateX) / currScale);
+            doc.props.Document.SetNumber(KeyStore.Y, (screenY - translateY) / currScale);
             this.bringToFront(doc);
         }
         e.stopPropagation();
@@ -124,7 +124,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         // if (modes[e.deltaMode] == 'pixels') coefficient = 50;
         // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
 
-        let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
+        let { LocalX, Ss, Xx, LocalY, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
 
         var deltaScale = (1 - (e.deltaY / coefficient)) * Ss;
         var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
@@ -135,8 +135,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @action
     private SetPan(panX: number, panY: number) {
-        const newPanX = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeWidth, Math.min(0, panX));
-        const newPanY = Math.max(-(this.resizeScaling * this.zoomScaling - this.resizeScaling) * this.nativeHeight, Math.min(0, panY));
+        const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX));
+        const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY));
         this.props.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
         this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
     }
@@ -241,7 +241,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                             AddDocument={this.addDocument}
                             RemoveDocument={this.removeDocument}
                             GetTransform={this.getTransform}
-                            Scaling={1}
+                            ParentScaling={1}
                             ContainingCollectionView={this} DocumentView={undefined} />);
                     })}
                 </div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index f1e882e20..eec3b275c 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -109,7 +109,7 @@ export class CollectionSchemaView extends CollectionViewBase {
                 <DocumentView Document={children[this.selectedIndex]}
                     AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
                     GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
-                    Scaling={1}
+                    ParentScaling={1}
                     DocumentView={undefined} ContainingCollectionView={this} />
             )
         } else {
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 7e2fcb39d..1cf07ce05 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -19,7 +19,7 @@ export interface CollectionViewProps {
     ContainingDocumentView: Opt<DocumentView>;
     GetTransform: () => Transform;
     BackgroundView: Opt<DocumentView>;
-    Scaling: number;
+    ParentScaling: number;
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
@@ -28,7 +28,7 @@ export const COLLECTION_BORDER_WIDTH = 2;
 export class CollectionViewBase extends React.Component<CollectionViewProps> {
 
     public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
-        return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
+        return `<${collectionType} ParentScaling={ParentScaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
     }
     @computed
     public get active(): boolean {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 9cd42a069..7a895dd60 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -11,6 +11,7 @@ import "./NodeView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
 import { Transform } from "../../util/Transform";
+import { COLLECTION_BORDER_WIDTH } from '../../views/collections/CollectionViewBase';
 
 
 @observer
@@ -30,27 +31,17 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         return new DOMRect();
     }
 
-    @computed
-    get x(): number {
-        return this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
-    }
-
-    @computed
-    get y(): number {
-        return this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
+    public LeftCorner(): number {
+        return this.props.Document.GetNumber(KeyStore.X, 0) + super.LeftCorner();
     }
 
-    set x(x: number) {
-        this.props.Document.SetData(KeyStore.X, x, NumberField)
-    }
-
-    set y(y: number) {
-        this.props.Document.SetData(KeyStore.Y, y, NumberField)
+    public TopCorner(): number {
+        return this.props.Document.GetNumber(KeyStore.Y, 0) + super.TopCorner();
     }
 
     @computed
     get transform(): string {
-        return `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.x}px, ${this.y}px)`;
+        return `scale(${this.props.ParentScaling}, ${this.props.ParentScaling}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px)`;
     }
 
     @computed
@@ -221,24 +212,26 @@ export class CollectionFreeFormDocumentView extends DocumentView {
     }
 
     getTransform = (): Transform => {
-        return this.props.GetTransform().translated(this.x, this.y);
+        return this.props.GetTransform().translated(this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0));
     }
 
     render() {
         var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
+        var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
         return (
-            <div className="node" ref={this._mainCont} style={{
-                transformOrigin: "left top",
-                transform: freestyling ? this.transform : "",
-                width: freestyling ? this.width : "100%",
-                height: freestyling ? this.height : "100%",
-                position: freestyling ? "absolute" : "relative",
-                zIndex: freestyling ? this.zIndex : 0,
-            }}
+            <div className="node" ref={this._mainCont}
                 onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown}>
-
-                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} DocumentView={this} />
+                onPointerDown={this.onPointerDown}
+                style={{
+                    transformOrigin: "left top",
+                    transform: freestyling ? this.transform : "",
+                    width: freestyling ? this.width : "100%",
+                    height: freestyling ? this.height : "100%",
+                    position: freestyling ? "absolute" : "relative",
+                    zIndex: freestyling ? this.zIndex : 0,
+                }}>
+
+                <DocumentView {...this.props} ref={this._renderDoc} ParentScaling={parentScaling} GetTransform={this.getTransform} DocumentView={this} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3a73f2fde..51959841b 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -17,6 +17,7 @@ import "./NodeView.scss";
 import React = require("react");
 import { Transform } from "../../util/Transform";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
+import { CollectionFreeFormDocumentView } from '../../views/nodes/CollectionFreeFormDocumentView';
 
 export interface DocumentViewProps {
     DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
@@ -26,16 +27,23 @@ export interface DocumentViewProps {
     AddDocument?: (doc: Document) => void;
     RemoveDocument?: (doc: Document) => boolean;
     GetTransform: () => Transform;
-    Scaling: number;
+    ParentScaling: number;
 }
 
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
 
+    protected _renderDoc = React.createRef<any>();
     protected _mainCont = React.createRef<any>();
     get MainContent() {
         return this._mainCont;
     }
+
+    @computed
+    get parentScaling(): number {
+        return this._renderDoc.current ? this._renderDoc.current.props.ParentScaling : this.props.ParentScaling > 1 ? this.props.ParentScaling : 1;
+    }
+
     @computed
     get layout(): string {
         return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
@@ -43,7 +51,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @computed
     get backgroundLayout(): string {
-        return this.props.Document.GetData(KeyStore.BackgroundLayout, TextField, String("<p>Error loading layout data</p>"));
+        return this.props.Document.GetText(KeyStore.BackgroundLayout, "");
     }
 
     @computed
@@ -69,67 +77,72 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return 1;
     }
 
+
+    public LeftCorner(): number {
+        if (this.props.ContainingCollectionView) {
+            if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
+                // this is a hacky way to account for the titles/pane placement/etc of a CollectionDockingView 
+                // this only works if the collectionDockingView is the root collection, too.
+                // need to find a better way.
+                var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
+                return rx + COLLECTION_BORDER_WIDTH;
+            }
+            return COLLECTION_BORDER_WIDTH; // assumes all collections have the same border
+        }
+        return 0;
+    }
+
+    public TopCorner(): number {
+        if (this.props.ContainingCollectionView) {
+            if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
+                // this is a hacky way to account for the titles/pane placement/etc of a CollectionDockingView 
+                // this only works if the collectionDockingView is the root collection, too.
+                // need to find a better way.
+                var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
+                return ry + COLLECTION_BORDER_WIDTH;
+            }
+            return COLLECTION_BORDER_WIDTH;  // assumes all collections have the same border
+        }
+        return 0;
+    }
     //
     // Converts a coordinate in the screen space of the app into a local document coordinate.
     //
     public TransformToLocalPoint(screenX: number, screenY: number) {
         // if this collection view is nested within another collection view, then 
         // first transform the screen point into the parent collection's coordinate space.
-        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
+        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView &&
+            this.props.ContainingCollectionView.props.ContainingDocumentView ?
             this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
             { LocalX: screenX, LocalY: screenY };
         let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
         let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
 
-        var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
-        var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
-        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
-        // They also ignore any transformation that may have been applied to their content document.
-        // NOTE: this currently assumes CollectionDockingViews aren't nested.
-        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
-            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
-            Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH;
-        }
-
         let Ss = this.props.Document.GetNumber(KeyStore.Scale, 1);
-        let Panxx = this.props.Document.GetData(KeyStore.PanX, NumberField, Number(0));
-        let Panyy = this.props.Document.GetData(KeyStore.PanY, NumberField, Number(0));
-        let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
-        let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
+        let Panxx = this.props.Document.GetNumber(KeyStore.PanX, 0);
+        let Panyy = this.props.Document.GetNumber(KeyStore.PanY, 0);
+        let LocalX = (ContainerX - (this.LeftCorner() + Panxx)) / Ss;
+        let LocalY = (ContainerY - (this.TopCorner() + Panyy)) / Ss;
 
-        return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
+        return { LocalX, Ss, Xx: this.LeftCorner(), LocalY, Yy: this.TopCorner(), ContainerX, ContainerY };
     }
 
     //
     // Converts a point in the coordinate space of a document to a screen space coordinate.
     //
-    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
-
-        var Xx = this.props.Document.GetData(KeyStore.X, NumberField, Number(0));
-        var Yy = this.props.Document.GetData(KeyStore.Y, NumberField, Number(0));
-        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
-        // They also ignore any transformation that may have been applied to their content document.
-        // NOTE: this currently assumes CollectionDockingViews aren't nested.
-        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
-            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
-            Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH + 18 * Ss;
-        }
+    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0, apply: boolean = true): { ScreenX: number, ScreenY: number } {
+        var parentScaling = apply ? this.parentScaling : 1;
 
-        let W = COLLECTION_BORDER_WIDTH;
-        let H = COLLECTION_BORDER_WIDTH;
-        let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
-        let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
+        let parentX = (Panxx + (localX - COLLECTION_BORDER_WIDTH) * Ss) * parentScaling + this.LeftCorner();
+        let parentY = (Panyy + (localY - COLLECTION_BORDER_WIDTH) * Ss) * parentScaling + this.TopCorner();
 
         // if this collection view is nested within another collection view, then 
         // first transform the local point into the parent collection's coordinate space.
         let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
-        if (containingDocView != undefined) {
-            let ss = containingDocView.props.Document.GetNumber(KeyStore.Scale, 1) * this.props.Scaling;
-            let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
-            let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
+        if (containingDocView) {
+            let ss = containingDocView.props.Document.GetNumber(KeyStore.Scale, 1);
+            let panxx = containingDocView.props.Document.GetNumber(KeyStore.PanX, 0) + COLLECTION_BORDER_WIDTH * ss * parentScaling;
+            let panyy = containingDocView.props.Document.GetNumber(KeyStore.PanY, 0) + COLLECTION_BORDER_WIDTH * ss * parentScaling;
             let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
             parentX = ScreenX;
             parentY = ScreenY;
@@ -158,13 +171,13 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             onError={(test: any) => { console.log(test) }}
         />;
         bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
-
+        bindings["ParentScaling"] = 1;
         var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
         var strwidth = width > 0 ? width.toString() + "px" : "100%";
         var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
         var strheight = height > 0 ? height.toString() + "px" : "100%";
         return (
-            <div className="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}>
+            <div className="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "0 0", transform: `scale(${this.props.ParentScaling},${this.props.ParentScaling})` }}>
                 <JsxParser
                     components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
                     bindings={bindings}
-- 
cgit v1.2.3-70-g09d2


From b48e9b7850d0d244ce1fe519863b32969ed2c7d2 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Feb 2019 22:18:26 -0500
Subject: minor cleanup

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 11 +++++------
 src/client/views/nodes/DocumentView.tsx                   | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 7a895dd60..6c9d4e16a 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -216,7 +216,6 @@ export class CollectionFreeFormDocumentView extends DocumentView {
     }
 
     render() {
-        var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
         return (
             <div className="node" ref={this._mainCont}
@@ -224,11 +223,11 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onPointerDown={this.onPointerDown}
                 style={{
                     transformOrigin: "left top",
-                    transform: freestyling ? this.transform : "",
-                    width: freestyling ? this.width : "100%",
-                    height: freestyling ? this.height : "100%",
-                    position: freestyling ? "absolute" : "relative",
-                    zIndex: freestyling ? this.zIndex : 0,
+                    transform: this.transform,
+                    width: this.width,
+                    height: this.height,
+                    position: "absolute",
+                    zIndex: this.zIndex,
                 }}>
 
                 <DocumentView {...this.props} ref={this._renderDoc} ParentScaling={parentScaling} GetTransform={this.getTransform} DocumentView={this} />
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index bc3017275..9607a4984 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -171,13 +171,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             onError={(test: any) => { console.log(test) }}
         />;
         bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
-        bindings["ParentScaling"] = 1;
-        var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
-        var strwidth = width > 0 ? width.toString() + "px" : "100%";
-        var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
-        var strheight = height > 0 ? height.toString() + "px" : "100%";
+        var nativewidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+        var nativeheight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+        var width = nativewidth > 0 ? nativewidth + "px" : "100%";
+        var height = nativeheight > 0 ? nativeheight + "px" : "100%";
         return (
-            <div className="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "0 0", transform: `scale(${this.props.ParentScaling},${this.props.ParentScaling})` }}>
+            <div className="node" ref={this._mainCont} style={{ width: width, height: height, transformOrigin: "0 0", transform: `scale(${this.props.ParentScaling},${this.props.ParentScaling})` }}>
                 <JsxParser
                     components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
                     bindings={bindings}
-- 
cgit v1.2.3-70-g09d2


From 39988ec578329695d61a090fce7693c4c6217bbd Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 13 Feb 2019 00:16:24 -0500
Subject: last cleanup

---
 .../views/collections/CollectionDockingView.tsx    |  4 ++--
 .../views/collections/CollectionFreeFormView.tsx   |  4 ++--
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  2 +-
 src/client/views/nodes/DocumentView.tsx            | 25 +++++++++++-----------
 4 files changed, 17 insertions(+), 18 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 914ea72fd..725b68a54 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -265,8 +265,8 @@ export class CollectionDockingView extends CollectionViewBase {
         const value: Document[] = Document.GetData(fieldKey, ListField, []);
         // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
         var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1;
-        var w = Document.GetData(KeyStore.Width, NumberField, Number(0)) / s;
-        var h = Document.GetData(KeyStore.Height, NumberField, Number(0)) / s;
+        var w = Document.GetNumber(KeyStore.Width, 0) / s;
+        var h = Document.GetNumber(KeyStore.Height, 0) / s;
 
         var chooseLayout = () => {
             if (!CollectionDockingView.UseGoldenLayout)
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 8b9fa8a87..04373df12 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -149,8 +149,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
         let fReader = new FileReader()
         let file = e.dataTransfer.items[0].getAsFile();
         let that = this;
-        const panx: number = this.props.DocumentForCollection.GetData(KeyStore.PanX, NumberField, Number(0));
-        const pany: number = this.props.DocumentForCollection.GetData(KeyStore.PanY, NumberField, Number(0));
+        const panx: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
+        const pany: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
         let x = e.pageX - panx
         let y = e.pageY - pany
 
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 6c9d4e16a..544ace075 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -79,7 +79,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
 
     @computed
     get zIndex(): number {
-        return this.props.Document.GetData(KeyStore.ZIndex, NumberField, Number(0));
+        return this.props.Document.GetNumber(KeyStore.ZIndex, 0);
     }
 
     set zIndex(h: number) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 355e431e6..ec68e9e51 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -41,12 +41,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @computed
     get parentScaling(): number {
-        return this._renderDoc.current ? this._renderDoc.current.props.ParentScaling : this.props.ParentScaling > 1 ? this.props.ParentScaling : 1;
+        return this._renderDoc.current ? this._renderDoc.current.props.ParentScaling : this.props.ParentScaling > 0 ? this.props.ParentScaling : 1;
     }
 
     @computed
     get layout(): string {
-        return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
+        return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>");
     }
 
     @computed
@@ -130,20 +130,19 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     //
     // Converts a point in the coordinate space of the document to coordinate in app screen coordinates
     //
-    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0, apply: boolean = false): { ScreenX: number, ScreenY: number } {
-        var parentScaling = apply ? this.parentScaling : 1;
-
-        let parentX = (Panxx + (localX - COLLECTION_BORDER_WIDTH) * Ss) * parentScaling + this.LeftCorner();
-        let parentY = (Panyy + (localY - COLLECTION_BORDER_WIDTH) * Ss) * parentScaling + this.TopCorner();
-
+    public TransformToScreenPoint(localX: number, localY: number, applyViewXf: boolean = false): { ScreenX: number, ScreenY: number } {
+        var parentScaling = applyViewXf ? this.parentScaling : 1;
+        let Panxx = applyViewXf ? this.props.Document.GetNumber(KeyStore.PanX, 0) : 0;
+        let Panyy = applyViewXf ? this.props.Document.GetNumber(KeyStore.PanY, 0) : 0;
+        var Zoom = applyViewXf ? this.props.Document.GetNumber(KeyStore.Scale, 1) : 1;
+
+        let parentX = this.LeftCorner() + (Panxx + (localX - COLLECTION_BORDER_WIDTH) * Zoom) * parentScaling;
+        let parentY = this.TopCorner() + (Panyy + (localY - COLLECTION_BORDER_WIDTH) * Zoom) * parentScaling;
         // if this collection view is nested within another collection view, then 
         // first transform the local point into the parent collection's coordinate space.
-        let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
+        let containingDocView = this.props.ContainingCollectionView ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
         if (containingDocView) {
-            let ss = containingDocView.props.Document.GetNumber(KeyStore.Scale, 1);
-            let panxx = containingDocView.props.Document.GetNumber(KeyStore.PanX, 0) + COLLECTION_BORDER_WIDTH * ss * parentScaling;
-            let panyy = containingDocView.props.Document.GetNumber(KeyStore.PanY, 0) + COLLECTION_BORDER_WIDTH * ss * parentScaling;
-            let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy, true);
+            let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX + COLLECTION_BORDER_WIDTH * parentScaling, parentY + COLLECTION_BORDER_WIDTH * parentScaling, true);
             parentX = ScreenX;
             parentY = ScreenY;
         }
-- 
cgit v1.2.3-70-g09d2


From c93c3e1970c6ecc91b60f1782e82b1bfdc7fef30 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 13 Feb 2019 04:50:56 -0500
Subject: A lot of stuff working, a lot of other stuff not working

---
 .vscode/launch.json                                |   6 +-
 src/client/util/DragManager.ts                     |   2 +
 src/client/util/SelectionManager.ts                |  12 +-
 src/client/util/Transform.ts                       |  70 ++++----
 src/client/views/DocumentDecorations.tsx           |  39 ++++-
 src/client/views/Main.tsx                          |   1 +
 .../views/collections/CollectionDockingView.tsx    |  10 +-
 .../views/collections/CollectionFreeFormView.tsx   |  55 +++---
 .../views/collections/CollectionSchemaView.tsx     |   4 +-
 .../views/collections/CollectionViewBase.tsx       |  10 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 138 +---------------
 src/client/views/nodes/DocumentView.tsx            | 184 +++++++++++++++++++--
 src/client/views/nodes/FieldView.tsx               |   6 +-
 src/client/views/nodes/FormattedTextBox.tsx        |   2 +-
 src/client/views/nodes/ImageBox.tsx                |   4 +-
 15 files changed, 303 insertions(+), 240 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 9a0a9afb4..546ede805 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -11,7 +11,11 @@
             "sourceMaps": true,
             "breakOnLoad": true,
             "url": "http://localhost:1050",
-            "webRoot": "${workspaceFolder}"
+            "webRoot": "${workspaceFolder}",
+            "skipFiles": [
+                "${workspaceRoot}/node_modules/**/*.js",
+                "${workspaceRoot}/node_modules/**/*.ts",
+            ]
         },
         {
             "type": "node",
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index f4dcce7c8..93b927f8b 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -78,6 +78,8 @@ export namespace DragManager {
         dragElement.style.transformOrigin = "0 0";
         dragElement.style.zIndex = "1000";
         dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
+        dragElement.style.width = `${rect.width}px`;
+        dragElement.style.height = `${rect.height}px`;
         dragDiv.appendChild(dragElement);
         _lastPointerX = dragData["xOffset"] + rect.left;
         _lastPointerY = dragData["yOffset"] + rect.top;
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 0759ae110..1a711ae64 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -1,13 +1,13 @@
-import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
 import { observable, action } from "mobx";
+import { DocumentView } from "../views/nodes/DocumentView";
 
 export namespace SelectionManager {
     class Manager {
         @observable
-        SelectedDocuments: Array<CollectionFreeFormDocumentView> = [];
+        SelectedDocuments: Array<DocumentView> = [];
 
         @action
-        SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
+        SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
             // if doc is not in SelectedDocuments, add it
             if (!ctrlPressed) {
                 manager.SelectedDocuments = [];
@@ -21,11 +21,11 @@ export namespace SelectionManager {
 
     const manager = new Manager;
 
-    export function SelectDoc(doc: CollectionFreeFormDocumentView, ctrlPressed: boolean): void {
+    export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
         manager.SelectDoc(doc, ctrlPressed)
     }
 
-    export function IsSelected(doc: CollectionFreeFormDocumentView): boolean {
+    export function IsSelected(doc: DocumentView): boolean {
         return manager.SelectedDocuments.indexOf(doc) !== -1;
     }
 
@@ -33,7 +33,7 @@ export namespace SelectionManager {
         manager.SelectedDocuments = []
     }
 
-    export function SelectedDocuments(): Array<CollectionFreeFormDocumentView> {
+    export function SelectedDocuments(): Array<DocumentView> {
         return manager.SelectedDocuments;
     }
 }
\ No newline at end of file
diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts
index 3edc8d569..8ae3f837f 100644
--- a/src/client/util/Transform.ts
+++ b/src/client/util/Transform.ts
@@ -23,29 +23,13 @@ export class Transform {
         return this;
     }
 
-    translated = (x: number, y: number): Transform => {
-        return this.copy().translate(x, y);
-    }
-
-    preTranslate = (x: number, y: number): Transform => {
-        this._translateX += x * this._scale;
-        this._translateY += y * this._scale;
-        return this;
-    }
-
-    preTranslated = (x: number, y: number): Transform => {
-        return this.copy().preTranslate(x, y);
-    }
-
     scale = (scale: number): Transform => {
         this._scale *= scale;
+        this._translateX *= scale;
+        this._translateY *= scale;
         return this;
     }
 
-    scaled = (scale: number): Transform => {
-        return this.copy().scale(scale);
-    }
-
     scaleAbout = (scale: number, x: number, y: number): Transform => {
         this._translateX += x * this._scale - x * this._scale * scale;
         this._translateY += y * this._scale - y * this._scale * scale;
@@ -53,21 +37,6 @@ export class Transform {
         return this;
     }
 
-    scaledAbout = (scale: number, x: number, y: number): Transform => {
-        return this.copy().scaleAbout(scale, x, y);
-    }
-
-    preScale = (scale: number): Transform => {
-        this._scale *= scale;
-        this._translateX *= scale;
-        this._translateY *= scale;
-        return this;
-    }
-
-    preScaled = (scale: number): Transform => {
-        return this.copy().preScale(scale);
-    }
-
     transform = (transform: Transform): Transform => {
         this._translateX += transform._translateX * this._scale;
         this._translateY += transform._translateY * this._scale;
@@ -75,8 +44,15 @@ export class Transform {
         return this;
     }
 
-    transformed = (transform: Transform): Transform => {
-        return this.copy().transform(transform);
+    preTranslate = (x: number, y: number): Transform => {
+        this._translateX += this._scale * x;
+        this._translateY += this._scale * y;
+        return this;
+    }
+
+    preScale = (scale: number): Transform => {
+        this._scale *= scale;
+        return this;
     }
 
     preTransform = (transform: Transform): Transform => {
@@ -86,6 +62,30 @@ export class Transform {
         return this;
     }
 
+    translated = (x: number, y: number): Transform => {
+        return this.copy().translate(x, y);
+    }
+
+    preTranslated = (x: number, y: number): Transform => {
+        return this.copy().preTranslate(x, y);
+    }
+
+    scaled = (scale: number): Transform => {
+        return this.copy().scale(scale);
+    }
+
+    scaledAbout = (scale: number, x: number, y: number): Transform => {
+        return this.copy().scaleAbout(scale, x, y);
+    }
+
+    preScaled = (scale: number): Transform => {
+        return this.copy().preScale(scale);
+    }
+
+    transformed = (transform: Transform): Transform => {
+        return this.copy().transform(transform);
+    }
+
     preTransformed = (transform: Transform): Transform => {
         return this.copy().preTransform(transform);
     }
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 85b44307f..5abe3f5b2 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -4,6 +4,8 @@ import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
 import { CollectionFreeFormView } from "./collections/CollectionFreeFormView";
+import { KeyStore } from "../../fields/Key";
+import { NumberField } from "../../fields/NumberField";
 
 @observer
 export class DocumentDecorations extends React.Component {
@@ -25,9 +27,12 @@ export class DocumentDecorations extends React.Component {
                 !(element.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
                 return bounds;
             }
-            let transform = element.getTransform().inverse();
+            let transform = element.props.GetTransform().inverse();
             var [sptX, sptY] = transform.transformPoint(0, 0);
-            var [bptX, bptY] = transform.transformDirection(element.width, element.height);
+            // 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)];
+            [bptX, bptY] = transform.transformPoint(bptX, bptY);
             return {
                 x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
                 r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
@@ -106,16 +111,32 @@ export class DocumentDecorations extends React.Component {
 
         SelectionManager.SelectedDocuments().forEach(element => {
             const rect = element.screenRect;
+            // if (rect.width !== 0) {
+            //     let scale = element.width / rect.width;
+            //     let actualdW = Math.max(element.width + (dW * scale), 20);
+            //     let actualdH = Math.max(element.height + (dH * scale), 20);
+            //     element.x += dX * (actualdW - element.width);
+            //     element.y += dY * (actualdH - element.height);
+            //     if (Math.abs(dW) > Math.abs(dH))
+            //         element.width = actualdW;
+            //     else
+            //         element.height = actualdH;
+            // }
             if (rect.width !== 0) {
-                let scale = element.width / rect.width;
-                let actualdW = Math.max(element.width + (dW * scale), 20);
-                let actualdH = Math.max(element.height + (dH * scale), 20);
-                element.x += dX * (actualdW - element.width);
-                element.y += dY * (actualdH - element.height);
+                let doc = element.props.Document;
+                let width = doc.GetOrCreate(KeyStore.Width, NumberField);
+                let height = doc.GetOrCreate(KeyStore.Height, NumberField);
+                let x = doc.GetOrCreate(KeyStore.X, NumberField);
+                let y = doc.GetOrCreate(KeyStore.X, NumberField);
+                let scale = width.Data / rect.width;
+                let actualdW = Math.max(width.Data + (dW * scale), 20);
+                let actualdH = Math.max(height.Data + (dH * scale), 20);
+                x.Data += dX * (actualdW - width.Data);
+                y.Data += dY * (actualdH - height.Data);
                 if (Math.abs(dW) > Math.abs(dH))
-                    element.width = actualdW;
+                    width.Data = actualdW;
                 else
-                    element.height = actualdH;
+                    height.Data = actualdH;
             }
         })
     }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6ca0000b8..c7ad3e249 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -84,6 +84,7 @@ ReactDOM.render((
         <DocumentView Document={mainContainer}
             AddDocument={undefined} RemoveDocument={undefined} GetTransform={() => Transform.Identity}
             Scaling={1}
+            isTopMost={true}
             ContainingCollectionView={undefined} DocumentView={undefined} />
         <DocumentDecorations />
         <ContextMenu />
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index d3e90d11c..c870a9cf0 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -16,6 +16,7 @@ import "./CollectionDockingView.scss";
 import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
 import React = require("react");
 import { changeDependenciesStateTo0 } from "mobx/lib/internal";
+import { Utils } from "../../../Utils";
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
@@ -100,6 +101,7 @@ export class CollectionDockingView extends CollectionViewBase {
                 return (<DocumentView key={value[i].Id} Document={value[i]}
                     AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
                     GetTransform={() => Transform.Identity}
+                    isTopMost={true}
                     Scaling={1}
                     ContainingCollectionView={this} DocumentView={undefined} />);
             }
@@ -307,12 +309,16 @@ class RenderClass {
         this.render();
     }
     render() {
-        var nativeWidth = this._document.GetNumber(KeyStore.NativeWidth, 0);
+        let nativeWidth = this._document.GetNumber(KeyStore.NativeWidth, 0);
         let scaling = nativeWidth > 0 ? this._htmlElement!.clientWidth / nativeWidth : 1;
         ReactDOM.render((
             <DocumentView key={this._document.Id} Document={this._document}
                 AddDocument={this._collectionDockingView.addDocument} RemoveDocument={this._collectionDockingView.removeDocument}
-                GetTransform={() => Transform.Identity}
+                GetTransform={() => {
+                    let { scale, translateX, translateY } = Utils.GetScreenTransform(this._htmlElement);
+                    return this._collectionDockingView.props.GetTransform().scale(scale).translate(-translateX, -translateY)
+                }}
+                isTopMost={true}
                 Scaling={scaling}
                 ContainingCollectionView={this._collectionDockingView} DocumentView={undefined} />
         ),
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 975eaaae8..7947b1c51 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -14,6 +14,7 @@ import { NumberField } from "../../../fields/NumberField";
 import { Documents } from "../../documents/Documents";
 import { FieldWaiting } from "../../../fields/Field";
 import { Transform } from "../../util/Transform";
+import { DocumentView } from "../nodes/DocumentView";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
@@ -45,23 +46,21 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
-        const doc = de.data["document"];
+        const doc: DocumentView = de.data["document"];
         var me = this;
-        if (doc instanceof CollectionFreeFormDocumentView) {
-            if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) {
-                doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
-                this.addDocument(doc.props.Document);
-            }
-            const xOffset = de.data["xOffset"] as number || 0;
-            const yOffset = de.data["yOffset"] as number || 0;
-            const { translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
-            const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace;
-            const screenX = de.x - xOffset;
-            const screenY = de.y - yOffset;
-            doc.x = (screenX - translateX) / currScale;
-            doc.y = (screenY - translateY) / currScale;
-            this.bringToFront(doc);
+        if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) {
+            doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
+            this.addDocument(doc.props.Document);
         }
+        const xOffset = de.data["xOffset"] as number || 0;
+        const yOffset = de.data["yOffset"] as number || 0;
+        const transform = doc.props.GetTransform();
+        const screenX = de.x - xOffset;
+        const screenY = de.y - yOffset;
+        const [x, y] = transform.transformPoint(screenX, screenY);
+        doc.props.Document.SetNumber(KeyStore.X, x);
+        doc.props.Document.SetNumber(KeyStore.Y, y);
+        this.bringToFront(doc);
         e.stopPropagation();
     }
 
@@ -94,8 +93,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
         document.removeEventListener("pointerup", this.onPointerUp);
         e.stopPropagation();
         if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
-            if (!SelectionManager.IsSelected(this.props.ContainingDocumentView as CollectionFreeFormDocumentView)) {
-                SelectionManager.SelectDoc(this.props.ContainingDocumentView as CollectionFreeFormDocumentView, false);
+            if (!this.props.isSelected()) {
+                this.props.select(false);
             }
         }
     }
@@ -105,11 +104,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
         if (!e.cancelBubble && this.active) {
             e.preventDefault();
             e.stopPropagation();
-            let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
             let x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
             let y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
+            let [dx, dy] = this.props.GetTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
 
-            this.SetPan(x + (e.pageX - this._lastX) / currScale, y + (e.pageY - this._lastY) / currScale);
+            this.SetPan(x + dx, y + dy);
         }
         this._lastX = e.pageX;
         this._lastY = e.pageY;
@@ -124,15 +123,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
         // if (modes[e.deltaMode] == 'pixels') coefficient = 50;
         // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
         let transform = this.getTransform();
-        let localTransform = this.getLocalTransform();
 
-        let deltaScale = (1 - (e.deltaY / coefficient)) * transform.Scale;
-        let newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
+        let deltaScale = (1 - (e.deltaY / coefficient));
         let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
-        localTransform.scaleAbout(newDeltaScale, x, y);
+        let localTransform = this.getLocalTransform();
+        localTransform.scaleAbout(deltaScale, x, y);
 
-        this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
+        this.props.DocumentForCollection.SetNumber(KeyStore.Scale, localTransform.Scale);
         this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
     }
 
@@ -182,7 +180,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     @action
-    bringToFront(doc: CollectionFreeFormDocumentView) {
+    bringToFront(doc: DocumentView) {
         const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
 
         const value: Document[] = Document.GetList<Document>(fieldKey, []);
@@ -213,12 +211,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     getTransform = (): Transform => {
         const [x, y] = this.translate;
-        return this.props.GetTransform().scaled(this.scale).translate(x, y);
+        return this.props.GetTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform().inverse())
     }
 
     getLocalTransform = (): Transform => {
         const [x, y] = this.translate;
-        return new Transform(x, y, this.scale);
+        return Transform.Identity.scale(this.scale).translate(x, y);
     }
 
     render() {
@@ -249,8 +247,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
                             AddDocument={this.addDocument}
                             RemoveDocument={this.removeDocument}
                             GetTransform={this.getTransform}
+                            isTopMost={false}
                             Scaling={1}
-                            ContainingCollectionView={this} DocumentView={undefined} />);
+                            ContainingCollectionView={this} DocumentView={this.props.ContainingDocumentView} />);
                     })}
                 </div>
             </div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index f1e882e20..adae8560e 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -27,7 +27,8 @@ export class CollectionSchemaView extends CollectionViewBase {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
             fieldKey: rowProps.value[1],
-            DocumentViewForField: undefined,
+            isSelected: () => false,
+            isTopMost: false
         }
         let contents = (
             <FieldView {...props} />
@@ -110,6 +111,7 @@ export class CollectionSchemaView extends CollectionViewBase {
                     AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
                     GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
                     Scaling={1}
+                    isTopMost={false}
                     DocumentView={undefined} ContainingCollectionView={this} />
             )
         } else {
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index cf5bc70c4..2c950c8ae 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -18,6 +18,9 @@ export interface CollectionViewProps {
     DocumentForCollection: Document;
     ContainingDocumentView: Opt<DocumentView>;
     GetTransform: () => Transform;
+    isSelected: () => boolean;
+    isTopMost: boolean;
+    select: (ctrlPressed: boolean) => void;
     BackgroundView: Opt<DocumentView>;
     Scaling: number;
 }
@@ -29,16 +32,15 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
 
     public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
         return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document}
-                    GetTransform={GetTransform} CollectionFieldKey={${fieldKey}}
+                    GetTransform={GetTransform} CollectionFieldKey={${fieldKey}} isSelected={isSelected} select={select}
+                    isTopMost={isTopMost}
                     ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
     }
     @computed
     public get active(): boolean {
         var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
         var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
-        var topMost = this.props.ContainingDocumentView != undefined && (
-            this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
-            this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
+        var topMost = this.props.isTopMost;
         return isSelected || childSelected || topMost;
     }
     @action
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 9cd42a069..54bc7327b 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -14,11 +14,8 @@ import { Transform } from "../../util/Transform";
 
 
 @observer
-export class CollectionFreeFormDocumentView extends DocumentView {
-    private _contextMenuCanOpen = false;
-    private _downX: number = 0;
-    private _downY: number = 0;
-    // private _mainCont = React.createRef<HTMLDivElement>();
+export class CollectionFreeFormDocumentView extends React.Component<DocumentViewProps> {
+    private _mainCont = React.createRef<HTMLDivElement>();
 
     constructor(props: DocumentViewProps) {
         super(props);
@@ -95,130 +92,6 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
     }
 
-    @action
-    dragComplete = (e: DragManager.DragCompleteEvent) => {
-    }
-
-    @computed
-    get active(): boolean {
-        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
-            this.props.ContainingCollectionView.active;
-    }
-
-    @computed
-    get topMost(): boolean {
-        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
-    }
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-        var me = this;
-        if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
-            e.stopPropagation();
-            return;
-        }
-        this._contextMenuCanOpen = e.button == 2;
-        if (this.active && !e.isDefaultPrevented()) {
-            e.stopPropagation();
-            if (e.buttons === 2) {
-                e.preventDefault();
-            }
-            document.removeEventListener("pointermove", this.onPointerMove)
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp)
-            document.addEventListener("pointerup", this.onPointerUp);
-        }
-    }
-
-    onPointerMove = (e: PointerEvent): void => {
-        if (e.cancelBubble) {
-            this._contextMenuCanOpen = false;
-            return;
-        }
-        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            this._contextMenuCanOpen = false;
-            if (this._mainCont.current != null && !this.topMost) {
-                this._contextMenuCanOpen = false;
-                const rect = this.screenRect;
-                let dragData: { [id: string]: any } = {};
-                dragData["document"] = this;
-                dragData["xOffset"] = e.x - rect.left;
-                dragData["yOffset"] = e.y - rect.top;
-                DragManager.StartDrag(this._mainCont.current, dragData, {
-                    handlers: {
-                        dragComplete: this.dragComplete,
-                    },
-                    hideSource: true
-                })
-            }
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove)
-        document.removeEventListener("pointerup", this.onPointerUp)
-        e.stopPropagation();
-        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
-
-    openRight = (e: React.MouseEvent): void => {
-        CollectionDockingView.AddRightSplit(this.props.Document);
-    }
-
-    deleteClicked = (e: React.MouseEvent): void => {
-        if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
-            this.props.ContainingCollectionView.removeDocument(this.props.Document)
-        }
-    }
-    @action
-    fullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.OpenFullScreen(this.props.Document);
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
-    @action
-    closeFullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.CloseFullScreen();
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
-
-    @action
-    onContextMenu = (e: React.MouseEvent): void => {
-        if (!SelectionManager.IsSelected(this)) {
-            return;
-        }
-        e.preventDefault()
-
-        if (!this._contextMenuCanOpen) {
-            return;
-        }
-
-        if (this.topMost) {
-            ContextMenu.Instance.clearItems()
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-        }
-        else {
-            // DocumentViews should stop propogation of this event
-            e.stopPropagation();
-
-            ContextMenu.Instance.clearItems();
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
-            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
 
     getTransform = (): Transform => {
         return this.props.GetTransform().translated(this.x, this.y);
@@ -234,11 +107,10 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 height: freestyling ? this.height : "100%",
                 position: freestyling ? "absolute" : "relative",
                 zIndex: freestyling ? this.zIndex : 0,
-            }}
-                onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown}>
+                backgroundColor: "transparent"
+            }} >
 
-                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} DocumentView={this} />
+                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d7ecc6d9d..cb080c08e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -16,6 +16,9 @@ import { ImageBox } from "../nodes/ImageBox";
 import "./NodeView.scss";
 import React = require("react");
 import { Transform } from "../../util/Transform";
+import { SelectionManager } from "../../util/SelectionManager";
+import { DragManager } from "../../util/DragManager";
+import { ContextMenu } from "../ContextMenu";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 export interface DocumentViewProps {
@@ -26,24 +29,34 @@ export interface DocumentViewProps {
     AddDocument?: (doc: Document) => void;
     RemoveDocument?: (doc: Document) => boolean;
     GetTransform: () => Transform;
+    isTopMost: boolean;
     Scaling: number;
 }
 
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
 
-    protected _mainCont = React.createRef<any>();
+    private _mainCont = React.createRef<HTMLDivElement>();
     get MainContent() {
         return this._mainCont;
     }
+    get screenRect(): ClientRect | DOMRect {
+        if (this._mainCont.current) {
+            return this._mainCont.current.getBoundingClientRect();
+        }
+        return new DOMRect();
+    }
     @computed
     get layout(): string {
         return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
     }
 
     @computed
-    get backgroundLayout(): string {
-        return this.props.Document.GetData(KeyStore.BackgroundLayout, TextField, String("<p>Error loading layout data</p>"));
+    get backgroundLayout(): string | undefined {
+        let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
+        if (field && field !== "<Waiting>") {
+            return field.Data;
+        }
     }
 
     @computed
@@ -56,6 +69,134 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>());
     }
 
+    @computed
+    get active(): boolean {
+        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
+            this.props.ContainingCollectionView.active;
+    }
+
+    private _contextMenuCanOpen = false;
+    private _downX: number = 0;
+    private _downY: number = 0;
+    onPointerDown = (e: React.PointerEvent): void => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
+        var me = this;
+        if (e.shiftKey && e.buttons === 1) {
+            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+            e.stopPropagation();
+            return;
+        }
+        this._contextMenuCanOpen = e.button == 2;
+        if (this.active && !e.isDefaultPrevented()) {
+            e.stopPropagation();
+            if (e.buttons === 2) {
+                e.preventDefault();
+            }
+            document.removeEventListener("pointermove", this.onPointerMove)
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp)
+            document.addEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    @action
+    dragComplete = (e: DragManager.DragCompleteEvent) => {
+    }
+
+    @computed
+    get topMost(): boolean {
+        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
+    }
+
+    onPointerMove = (e: PointerEvent): void => {
+        if (e.cancelBubble) {
+            this._contextMenuCanOpen = false;
+            return;
+        }
+        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+            this._contextMenuCanOpen = false;
+            if (this._mainCont.current != null && !this.topMost) {
+                this._contextMenuCanOpen = false;
+                const [left, top] = this.props.GetTransform().inverse().transformPoint(0, 0);
+                let dragData: { [id: string]: any } = {};
+                dragData["document"] = this;
+                dragData["xOffset"] = e.x - left;
+                dragData["yOffset"] = e.y - top;
+                DragManager.StartDrag(this._mainCont.current, dragData, {
+                    handlers: {
+                        dragComplete: this.dragComplete,
+                    },
+                    hideSource: true
+                })
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onPointerMove)
+        document.removeEventListener("pointerup", this.onPointerUp)
+        e.stopPropagation();
+        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    }
+
+    openRight = (e: React.MouseEvent): void => {
+        CollectionDockingView.AddRightSplit(this.props.Document);
+    }
+
+    deleteClicked = (e: React.MouseEvent): void => {
+        if (this.props.RemoveDocument) {
+            this.props.RemoveDocument(this.props.Document);
+        }
+    }
+    @action
+    fullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.OpenFullScreen(this.props.Document);
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
+    @action
+    closeFullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.CloseFullScreen();
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
+
+    @action
+    onContextMenu = (e: React.MouseEvent): void => {
+        if (!SelectionManager.IsSelected(this)) {
+            return;
+        }
+        e.preventDefault()
+
+        if (!this._contextMenuCanOpen) {
+            return;
+        }
+
+        if (this.topMost) {
+            ContextMenu.Instance.clearItems()
+            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        }
+        else {
+            // DocumentViews should stop propogation of this event
+            e.stopPropagation();
+
+            ContextMenu.Instance.clearItems();
+            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+            ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
+            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    }
+
     // 
     // returns the cumulative scaling between the document and the screen
     //
@@ -69,9 +210,19 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return 1;
     }
 
+    isSelected = () => {
+        return SelectionManager.IsSelected(this);
+    }
+
+    select = (ctrlPressed: boolean) => {
+        SelectionManager.SelectDoc(this, ctrlPressed)
+    }
+
 
     render() {
         let bindings = { ...this.props } as any;
+        bindings.isSelected = this.isSelected;
+        bindings.select = this.select;
         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
         }
@@ -82,26 +233,29 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             let field = this.props.Document.Get(key);
             bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
         }
-        if (bindings.DocumentView === undefined) {
-            bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
+        let annotated = null;
+        let backgroundLayout = this.backgroundLayout;
+        if (backgroundLayout) {
+            annotated = <JsxParser
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+                bindings={bindings}
+                jsx={this.backgroundLayout}
+                showWarnings={true}
+                onError={(test: any) => { console.log(test) }}
+            />;
         }
-        var annotated = <JsxParser
-            components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
-            bindings={bindings}
-            jsx={this.backgroundLayout}
-            showWarnings={true}
-            onError={(test: any) => { console.log(test) }}
-        />;
-        bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
+        bindings.BackgroundView = annotated;
 
         var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
         var strwidth = width > 0 ? width.toString() + "px" : "100%";
         var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
         var strheight = height > 0 ? height.toString() + "px" : "100%";
         return (
-            <div className="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}>
+            <div className="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
+                onContextMenu={this.onContextMenu}
+                onPointerDown={this.onPointerDown} >
                 <JsxParser
-                    components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+                    components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
                     bindings={bindings}
                     jsx={this.layout}
                     showWarnings={true}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 12371eb2e..08de53e1c 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -10,7 +10,6 @@ import { ImageField } from "../../../fields/ImageField";
 import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
-import { DocumentView } from "./DocumentView";
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
@@ -20,12 +19,13 @@ import { DocumentView } from "./DocumentView";
 export interface FieldViewProps {
     fieldKey: Key;
     doc: Document;
-    DocumentViewForField: Opt<DocumentView>
+    isSelected: () => boolean;
+    isTopMost: boolean;
 }
 
 @observer
 export class FieldView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
+    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} isSelected={isSelected} isTopMost={isTopMost} />`; }
     @computed
     get field(): FieldValue<Field> {
         const { doc, fieldKey } = this.props;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index f6bd0c0f8..2e3d396c1 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -110,7 +110,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     }
     onPointerDown = (e: React.PointerEvent): void => {
         let me = this;
-        if (e.buttons === 1 && me.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.DocumentViewForField)) {
+        if (e.buttons === 1 && this.props.isSelected()) {
             e.stopPropagation();
         }
     }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 2fa70734d..e1fa26e2f 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -41,7 +41,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (Date.now() - this._lastTap < 300) {
-            if (e.buttons === 1 && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
+            if (e.buttons === 1 && this.props.isSelected()) {
                 e.stopPropagation();
                 this._downX = e.clientX;
                 this._downY = e.clientY;
@@ -63,7 +63,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
 
     lightbox = (path: string) => {
         const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
-        if (this._isOpen && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
+        if (this._isOpen && this.props.isSelected()) {
             return (<Lightbox
                 mainSrc={images[this._photoIndex]}
                 nextSrc={images[(this._photoIndex + 1) % images.length]}
-- 
cgit v1.2.3-70-g09d2


From 47157f2d95ac1a9541ae313da321d050b073d0a7 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 13 Feb 2019 10:38:59 -0500
Subject: more css playing. moved NodeView to DocumentView.scss

---
 src/client/views/Main.tsx                          |  3 ++-
 .../views/collections/CollectionSchemaView.scss    | 11 +++++++++--
 .../views/collections/CollectionSchemaView.tsx     | 13 ++++++++----
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  5 ++---
 src/client/views/nodes/DocumentView.scss           | 23 ++++++++++++++++++++++
 src/client/views/nodes/DocumentView.tsx            |  6 ++----
 src/client/views/nodes/NodeView.scss               | 23 ----------------------
 7 files changed, 47 insertions(+), 37 deletions(-)
 create mode 100644 src/client/views/nodes/DocumentView.scss
 delete mode 100644 src/client/views/nodes/NodeView.scss

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index e78949ba7..aec9618ae 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -45,12 +45,13 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     doc2.Set(KS.X, new NumberField(150));
     doc2.Set(KS.Y, new NumberField(20));
     let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
-        x: 450, y: 100, title: "cat 1", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386
+        x: 450, y: 100, title: "dog", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386
     });
     //doc3.Set(KeyStore.Data, new ImageField);
     const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
         x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386
     }));
+    schemaDocs.push(doc3);
     schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
     schemaDocs[4].SetData(KS.Author, "Bob", TextField);
     schemaDocs.push(doc2);
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 70715c7a3..7c4726c7b 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,10 +1,17 @@
 
 .collectionSchemaView-container {
-    
+    border-style: solid;
+    box-sizing: border-box;
+    .collectionfreeformview-container {
+        border-width: 0px !important
+    }
     .imageBox-cont {
         position:relative;
         max-height:100%;
     }
+    .ReactTable {
+        position: absolute
+    }
     .ReactTable .rt-th, .ReactTable .rt-td {
         max-height: 75px;
     }
@@ -12,7 +19,7 @@
         object-fit: contain;
         height: 100%
     }
-    .node {
+    .documentView-node {
         width:100% !important;
         height:100% !important;
         .imageBox-cont img {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b6bdccaa9..1d045ac78 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -7,7 +7,7 @@ import { observable, action, computed } from "mobx";
 import SplitPane from "react-split-pane"
 import "./CollectionSchemaView.scss"
 import { ScrollBox } from "../../util/ScrollBox";
-import { CollectionViewBase } from "./CollectionViewBase";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
 import { DocumentView } from "../nodes/DocumentView";
 import { EditableView } from "../EditableView";
 import { CompileScript, ToField } from "../../util/Scripting";
@@ -116,8 +116,12 @@ export class CollectionSchemaView extends CollectionViewBase {
             content = <div />
         }
         return (
-            <div onPointerDown={this.onPointerDown} className="collectionSchemaView-container">
-                <SplitPane split={"vertical"} defaultSize="60%">
+            <div onPointerDown={this.onPointerDown} className="collectionSchemaView-container"
+                style={{
+                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
+                }}
+            >
+                <SplitPane split={"vertical"} defaultSize="60%" style={{ position: "relative", overflow: "none" }}>
                     <ScrollBox>
                         <ReactTable
                             data={children}
@@ -126,7 +130,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                             showPagination={false}
                             style={{
                                 display: "inline-block",
-                                width: "100%"
+                                width: "100%",
+                                postion: "absolute"
                             }}
                             columns={columns.map(col => {
                                 return (
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 544ace075..a2fbe96d2 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -7,11 +7,10 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
 import { ContextMenu } from "../ContextMenu";
-import "./NodeView.scss";
+import "./DocumentView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
 import { Transform } from "../../util/Transform";
-import { COLLECTION_BORDER_WIDTH } from '../../views/collections/CollectionViewBase';
 
 
 @observer
@@ -218,7 +217,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
     render() {
         var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
         return (
-            <div className="node" ref={this._mainCont}
+            <div className="documentView-node" ref={this._mainCont}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}
                 style={{
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
new file mode 100644
index 000000000..8e2ebd690
--- /dev/null
+++ b/src/client/views/nodes/DocumentView.scss
@@ -0,0 +1,23 @@
+.documentView-node {
+    position: absolute;
+    background: #cdcdcd;
+    overflow: hidden;
+    &.minimized {
+        width: 30px;
+        height: 30px;
+    }
+    .top {
+        background: #232323;
+        height: 20px;
+        cursor: pointer;
+    }
+    .content {
+        padding: 20px 20px;
+        height: auto;
+        box-sizing: border-box;
+    }
+    .scroll-box {
+        overflow-y: scroll;
+        height: calc(100% - 20px);
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ec68e9e51..55c8121d3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -4,8 +4,6 @@ import { Document } from "../../../fields/Document";
 import { Opt, FieldWaiting } from "../../../fields/Field";
 import { Key, KeyStore } from "../../../fields/Key";
 import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
-import { TextField } from "../../../fields/TextField";
 import { Utils } from "../../../Utils";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
@@ -13,7 +11,7 @@ import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
-import "./NodeView.scss";
+import "./DocumentView.scss";
 import React = require("react");
 import { Transform } from "../../util/Transform";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
@@ -177,7 +175,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         var width = nativewidth > 0 ? nativewidth + "px" : "100%";
         var height = nativeheight > 0 ? nativeheight + "px" : "100%";
         return (
-            <div className="node" ref={this._mainCont}
+            <div className="documentView-node" ref={this._mainCont}
                 style={{
                     width: width,
                     height: height,
diff --git a/src/client/views/nodes/NodeView.scss b/src/client/views/nodes/NodeView.scss
deleted file mode 100644
index dac1c0a8e..000000000
--- a/src/client/views/nodes/NodeView.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.node {
-    position: absolute;
-    background: #cdcdcd;
-    overflow: hidden;
-    &.minimized {
-        width: 30px;
-        height: 30px;
-    }
-    .top {
-        background: #232323;
-        height: 20px;
-        cursor: pointer;
-    }
-    .content {
-        padding: 20px 20px;
-        height: auto;
-        box-sizing: border-box;
-    }
-    .scroll-box {
-        overflow-y: scroll;
-        height: calc(100% - 20px);
-    }
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 61ff7c05bdddf3228454abcd015b0a4383b75b61 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 13 Feb 2019 20:30:59 -0500
Subject: fixed doc decoration location

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 54bc7327b..f10d8680f 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -94,7 +94,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
 
 
     getTransform = (): Transform => {
-        return this.props.GetTransform().translated(this.x, this.y);
+        return new Transform(-this.x, -this.y, 1).transform(this.props.GetTransform());
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2


From 8931f7c15fcf908fdb051e9c3970bc4f0b833dbe Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 17 Feb 2019 07:02:13 -0500
Subject: Fixed some style stuff

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 2 +-
 src/client/views/nodes/DocumentView.tsx                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index c44496152..31509d3ba 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -82,7 +82,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
     render() {
         var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
         return (
-            <div className="node" ref={this._mainCont} style={{
+            <div ref={this._mainCont} style={{
                 transformOrigin: "left top",
                 transform: this.transform,
                 width: this.width,
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 5e12af972..1db982f87 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -248,7 +248,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
         var strheight = height > 0 ? height.toString() + "px" : "100%";
         return (
-            <div className="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
+            <div className="documentView-node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown} >
                 <JsxParser
-- 
cgit v1.2.3-70-g09d2


From 4ae8e7791d217a04a913caa75c8e276a50608865 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 18 Feb 2019 01:45:19 -0500
Subject: Fixed up a bunch of tranform stuff

---
 src/client/util/Transform.ts                              |  8 ++++----
 src/client/views/DocumentDecorations.tsx                  |  2 +-
 src/client/views/Main.tsx                                 |  2 +-
 src/client/views/collections/CollectionDockingView.tsx    |  6 +++---
 src/client/views/collections/CollectionFreeFormView.tsx   | 15 ++++++---------
 src/client/views/collections/CollectionSchemaView.tsx     |  2 +-
 src/client/views/collections/CollectionViewBase.tsx       |  4 ++--
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx |  4 ++--
 src/client/views/nodes/DocumentView.tsx                   |  7 ++-----
 9 files changed, 22 insertions(+), 28 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts
index 8ae3f837f..9fd4f7bef 100644
--- a/src/client/util/Transform.ts
+++ b/src/client/util/Transform.ts
@@ -38,8 +38,8 @@ export class Transform {
     }
 
     transform = (transform: Transform): Transform => {
-        this._translateX += transform._translateX * this._scale;
-        this._translateY += transform._translateY * this._scale;
+        this._translateX = transform._translateX + transform._scale * this._translateX;
+        this._translateY = transform._translateY + transform._scale * this._translateY;
         this._scale *= transform._scale;
         return this;
     }
@@ -56,8 +56,8 @@ export class Transform {
     }
 
     preTransform = (transform: Transform): Transform => {
-        this._translateX = transform._translateX + this._translateX * transform._scale;
-        this._translateY = transform._translateY + this._translateY * transform._scale;
+        this._translateX += transform._translateX * this._scale;
+        this._translateY += transform._translateY * this._scale;
         this._scale *= transform._scale;
         return this;
     }
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 23c952ef4..d385bcdef 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -27,7 +27,7 @@ export class DocumentDecorations extends React.Component {
                 !(element.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
                 return bounds;
             }
-            let transform = element.props.GetTransform().inverse();
+            let transform = element.props.ScreenToLocalTransform().inverse();
             var [sptX, sptY] = transform.transformPoint(0, 0);
             // var [bptX, bptY] = transform.transformDirection(element.width, element.height);
             let doc = element.props.Document;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 52f4962f7..1eeec7ff5 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -83,7 +83,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 ReactDOM.render((
     <div style={{ position: "absolute", width: "100%", height: "100%" }}>
         <DocumentView Document={mainContainer}
-            AddDocument={undefined} RemoveDocument={undefined} GetTransform={() => Transform.Identity}
+            AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
             Scaling={1}
             isTopMost={true}
             ContainingCollectionView={undefined} DocumentView={undefined} />
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index adfcb96ee..1c1f6f8b4 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -98,7 +98,7 @@ export class CollectionDockingView extends CollectionViewBase {
             if (value[i].Id === component) {
                 return (<DocumentView key={value[i].Id} Document={value[i]}
                     AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
-                    GetTransform={() => Transform.Identity}
+                    ScreenToLocalTransform={() => Transform.Identity}
                     isTopMost={true}
                     Scaling={1}
                     ContainingCollectionView={this} DocumentView={undefined} />);
@@ -309,9 +309,9 @@ export class RenderClass extends React.Component<DockingProps> {
                 AddDocument={this.props.CollectionDockingView.addDocument}
                 RemoveDocument={this.props.CollectionDockingView.removeDocument}
                 Scaling={this._parentScaling}
-                GetTransform={() => {
+                ScreenToLocalTransform={() => {
                     let { scale, translateX, translateY } = Utils.GetScreenTransform(this.props.HtmlElement);
-                    return this.props.CollectionDockingView.props.GetTransform().scale(scale).translate(translateX, translateY)
+                    return this.props.CollectionDockingView.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale)
                 }}
                 isTopMost={true}
                 ContainingCollectionView={this.props.CollectionDockingView} DocumentView={undefined} />
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 49864ca6c..f0cf7f0ca 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -55,9 +55,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const xOffset = de.data["xOffset"] as number || 0;
         const yOffset = de.data["yOffset"] as number || 0;
         //this should be able to use translate and scale methods on an Identity transform, no?
-        const transform = new Transform(0, 0, 1 / me.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1)).transform(
-            new Transform(-me.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0), -me.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0), 1)
-        ).transform(me.props.GetTransform());
+        const transform = me.getTransform();
         const screenX = de.x - xOffset;
         const screenY = de.y - yOffset;
         const [x, y] = transform.transformPoint(screenX, screenY);
@@ -109,7 +107,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
             e.stopPropagation();
             let x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
             let y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
-            let [dx, dy] = this.props.GetTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+            let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
 
             this.SetPan(x + dx, y + dy);
         }
@@ -131,7 +129,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
         let localTransform = this.getLocalTransform();
-        localTransform.scaleAbout(deltaScale, x, y);
+        localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
 
         this.props.DocumentForCollection.SetNumber(KeyStore.Scale, localTransform.Scale);
         this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
@@ -213,13 +211,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     getTransform = (): Transform => {
-        const [x, y] = this.translate;
-        return this.getLocalTransform().inverse().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.props.GetTransform())
+        return this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
     }
 
     getLocalTransform = (): Transform => {
         const [x, y] = this.translate;
-        return Transform.Identity.scale(this.scale).translate(x, y);
+        return Transform.Identity.translate(-x, -y).scale(1 / this.scale);
     }
 
     render() {
@@ -249,7 +246,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                         return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
                             AddDocument={this.addDocument}
                             RemoveDocument={this.removeDocument}
-                            GetTransform={this.getTransform}
+                            ScreenToLocalTransform={this.getTransform}
                             isTopMost={false}
                             Scaling={1}
                             ContainingCollectionView={this} DocumentView={this.props.ContainingDocumentView} />);
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 21780bdb3..9a0ce0782 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -123,7 +123,7 @@ export class CollectionSchemaView extends CollectionViewBase {
                         <div ref={measureRef}>
                             <DocumentView Document={children[this.selectedIndex]}
                                 AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
-                                GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
+                                ScreenToLocalTransform={() => Transform.Identity}//TODO This should probably be an actual transform
                                 Scaling={this._parentScaling}
                                 isTopMost={false}
                                 DocumentView={undefined} ContainingCollectionView={me} />
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index aae85b3f9..a8dceff0a 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -17,7 +17,7 @@ export interface CollectionViewProps {
     CollectionFieldKey: Key;
     DocumentForCollection: Document;
     ContainingDocumentView: Opt<DocumentView>;
-    GetTransform: () => Transform;
+    ScreenToLocalTransform: () => Transform;
     isSelected: () => boolean;
     isTopMost: boolean;
     select: (ctrlPressed: boolean) => void;
@@ -32,7 +32,7 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
 
     public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
         return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document}
-                    GetTransform={GetTransform} CollectionFieldKey={${fieldKey}} isSelected={isSelected} select={select}
+                    ScreenToLocalTransform={ScreenToLocalTransform} CollectionFieldKey={${fieldKey}} isSelected={isSelected} select={select}
                     isTopMost={isTopMost}
                     ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
     }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 31509d3ba..57527076b 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -76,7 +76,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
 
 
     getTransform = (): Transform => {
-        return this.props.GetTransform().translated(this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0));
+        return this.props.ScreenToLocalTransform().translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0));
     }
 
     render() {
@@ -92,7 +92,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
                 backgroundColor: "transparent"
             }} >
 
-                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} />
+                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} ScreenToLocalTransform={this.getTransform} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1db982f87..b25a29ad0 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -27,7 +27,7 @@ export interface DocumentViewProps {
     Document: Document;
     AddDocument?: (doc: Document) => void;
     RemoveDocument?: (doc: Document) => boolean;
-    GetTransform: () => Transform;
+    ScreenToLocalTransform: () => Transform;
     isTopMost: boolean;
     Scaling: number;
 }
@@ -117,7 +117,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             this._contextMenuCanOpen = false;
             if (this._mainCont.current != null && !this.topMost) {
                 this._contextMenuCanOpen = false;
-                const [left, top] = this.props.GetTransform().inverse().transformPoint(0, 0);
+                const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
                 let dragData: { [id: string]: any } = {};
                 dragData["document"] = this;
                 dragData["xOffset"] = e.x - left;
@@ -224,9 +224,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         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
         }
-        if (!bindings.GetTransform) {
-            console.log("test");
-        }
         for (const key of this.layoutFields) {
             let field = this.props.Document.Get(key);
             bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
-- 
cgit v1.2.3-70-g09d2


From 39c6ba3292467979e310f3b577041c2f5e38273f Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 19 Feb 2019 11:33:26 -0500
Subject: fixed selection problem

---
 src/client/views/collections/CollectionDockingView.tsx    | 2 +-
 src/client/views/collections/CollectionViewBase.tsx       | 2 +-
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 2 +-
 src/client/views/nodes/DocumentView.tsx                   | 1 -
 4 files changed, 3 insertions(+), 4 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 9cc92712e..47ed25fa3 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -238,7 +238,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     ScreenToLocalTransform={() => {
                         let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!);
                         var props = this.props.CollectionDockingView ? this.props.CollectionDockingView.props : CollectionDockingView.Instance.props;
-                        return props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale)
+                        return props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._parentScaling)
                     }}
                     isTopMost={true}
                     ContainingCollectionView={this.props.CollectionDockingView} />
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 5dd10722d..1e20da8d2 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -37,7 +37,7 @@ export class CollectionViewBase extends React.Component<CollectionViewProps> {
     }
     @computed
     public get active(): boolean {
-        var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
+        var isSelected = (this.props.ContainingDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
         var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
         var topMost = this.props.isTopMost;
         return isSelected || childSelected || topMost;
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 57527076b..2eb0c5857 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -92,7 +92,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
                 backgroundColor: "transparent"
             }} >
 
-                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} ScreenToLocalTransform={this.getTransform} />
+                <DocumentView {...this.props} Scaling={parentScaling} ScreenToLocalTransform={this.getTransform} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d1fd6fb22..f8770f020 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -80,7 +80,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-        var me = this;
         if (e.shiftKey && e.buttons === 1) {
             CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
             e.stopPropagation();
-- 
cgit v1.2.3-70-g09d2


From 22192a4ec1a1a041b7de3f69f48f5f9b4903248f Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 20 Feb 2019 19:42:24 -0500
Subject: cleaned up screen transforms at last.

---
 src/client/views/DocumentDecorations.tsx            |  9 ++-------
 .../views/collections/CollectionFreeFormView.tsx    |  2 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx  |  9 +++++++--
 src/client/views/nodes/DocumentView.tsx             | 21 +--------------------
 4 files changed, 11 insertions(+), 30 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 0aaea7ae5..4e109d475 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -25,14 +25,9 @@ export class DocumentDecorations extends React.Component {
             if (element.props.isTopMost) {
                 return bounds;
             }
-            let transform = element.ScreenToLocalTransform().inverse();
+            let transform = (element.props.ScreenToLocalTransform().scale(element.props.Scaling)).inverse();
             var [sptX, sptY] = transform.transformPoint(0, 0);
-            let doc = element.props.Document;
-            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);
+            let [bptX, bptY] = transform.transformPoint(element.props.PanelSize[0], element.props.PanelSize[1]);
             return {
                 x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
                 r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index ffd4d211f..412a4d03d 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -247,7 +247,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                             ScreenToLocalTransform={this.getTransform}
                             isTopMost={false}
                             Scaling={1}
-                            PanelSize={[0, 0]}
+                            PanelSize={[doc.GetNumber(KeyStore.Width, 0), doc.GetNumber(KeyStore.Height, 0)]}
                             ContainingCollectionView={this} />);
                     })}
                 </div>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index bb85f85a3..7cad6ffc1 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -77,7 +77,9 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
 
 
     getTransform = (): Transform => {
-        return this.props.ScreenToLocalTransform().translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0));
+        var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
+        return this.props.ScreenToLocalTransform().
+            translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / parentScaling);
     }
 
     render() {
@@ -93,7 +95,10 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
                 backgroundColor: "transparent"
             }} >
 
-                <DocumentView {...this.props} Scaling={parentScaling} ScreenToLocalTransform={this.getTransform} />
+                <DocumentView {...this.props}
+                    Scaling={parentScaling}
+                    ScreenToLocalTransform={this.getTransform}
+                />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 4eb49f18f..20875586d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -246,20 +246,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         SelectionManager.SelectDoc(this, ctrlPressed)
     }
 
-    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)
             return <div></div>
@@ -269,7 +255,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
         let documentBindings = {
             ...this.props,
-            ScreenToLocalTransform: this.documentScreenToLocalTransform, // adds 'Scaling' to the screen to local Xf
             isSelected: this.isSelected,
             select: this.select
         } as any;
@@ -289,13 +274,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
          */
         let backgroundLayout = this.backgroundLayout;
         if (backgroundLayout) {
-            let backgroundBindings = {
-                ...documentBindings,
-                ScreenToLocalTransform: this.backgroundScreenToLocalTransform, // adds 'Scaling' to the screen to local Xf
-            }
             let backgroundView = () => (<JsxParser
                 components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
-                bindings={backgroundBindings}
+                bindings={documentBindings}
                 jsx={this.backgroundLayout}
                 showWarnings={true}
                 onError={(test: any) => { console.log(test) }}
-- 
cgit v1.2.3-70-g09d2


From 9e4403f9c14cdb7e05901af5f8509753269eeb07 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 21 Feb 2019 14:13:44 -0500
Subject: clean up

---
 src/client/util/UndoManager.ts                      |  1 -
 .../views/collections/CollectionDockingView.tsx     | 21 ++++++++++-----------
 .../views/collections/CollectionSchemaView.tsx      |  2 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx  | 12 +++---------
 src/fields/Document.ts                              |  5 -----
 src/fields/ListField.ts                             |  9 ++++-----
 6 files changed, 18 insertions(+), 32 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts
index edb75b55f..46ad558f3 100644
--- a/src/client/util/UndoManager.ts
+++ b/src/client/util/UndoManager.ts
@@ -1,5 +1,4 @@
 import { observable, action } from "mobx";
-import { Opt } from "../../fields/Field";
 
 function propertyDecorator(target: any, key: string | symbol) {
     Object.defineProperty(target, key, {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 35b130a9a..60dc24b5f 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,22 +1,21 @@
 import * as GoldenLayout from "golden-layout";
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, computed, observable, reaction, trace, untracked } from "mobx";
-import { DragManager } from "../../util/DragManager";
-import { DocumentView } from "../nodes/DocumentView";
-import { Document } from "../../../fields/Document";
-import "./CollectionDockingView.scss";
-import { CollectionViewBase, COLLECTION_BORDER_WIDTH, CollectionViewProps } from "./CollectionViewBase";
-import React = require("react");
+import { action, computed, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import Measure from "react-measure";
+import { Document } from "../../../fields/Document";
+import { FieldId, Opt } from "../../../fields/Field";
+import { KeyStore } from "../../../fields/KeyStore";
 import { Utils } from "../../../Utils";
-import { FieldId } from "../../../fields/Field";
 import { Server } from "../../Server";
-import { observer } from "mobx-react";
-import { KeyStore } from "../../../fields/KeyStore";
-import { Opt } from "../../../fields/Field";
+import { DragManager } from "../../util/DragManager";
 import { undoBatch } from "../../util/UndoManager";
+import { DocumentView } from "../nodes/DocumentView";
+import "./CollectionDockingView.scss";
+import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import React = require("react");
 
 @observer
 export class CollectionDockingView extends CollectionViewBase {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index f3217d55d..5ec288b13 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, computed, observable } from "mobx";
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import Measure from "react-measure";
 import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 7cad6ffc1..5568935fa 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,17 +1,11 @@
-import { action, computed } from "mobx";
+import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { KeyStore } from "../../../fields/KeyStore";
 import { NumberField } from "../../../fields/NumberField";
-import { DragManager } from "../../util/DragManager";
-import { SelectionManager } from "../../util/SelectionManager";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
-import { ContextMenu } from "../ContextMenu";
+import { Transform } from "../../util/Transform";
+import { DocumentView, DocumentViewProps } from "./DocumentView";
 import "./DocumentView.scss";
 import React = require("react");
-import { DocumentView, DocumentViewProps } from "./DocumentView";
-import { Utils } from "../../../Utils";
-import { Transform } from "../../util/Transform";
 
 
 @observer
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index d8522fb5b..6667485b6 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -152,16 +152,13 @@ export class Document extends Field {
     SetData<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(): U }, replaceWrongType = true) {
 
         let field = this.Get(key, true);
-        //if (field != WAITING) {  // do we want to wait for the field to come back from the server to set it, or do we overwrite?
         if (field instanceof ctor) {
             field.Data = value;
-            // Server.SetFieldValue(field, value);
         } else if (!field || replaceWrongType) {
             let newField = new ctor();
             newField.Data = value;
             this.Set(key, newField);
         }
-        //}
     }
 
     @action
@@ -213,14 +210,12 @@ export class Document extends Field {
     }
 
     ToJson(): { type: Types, data: [string, string][], _id: string } {
-        // console.log(this.fields)
         let fields: [string, string][] = []
         this._proxies.forEach((field, key) => {
             if (field) {
                 fields.push([key, field as string])
             }
         });
-        // console.log(fields)
 
         return {
             type: Types.Document,
diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts
index ad5374dc9..75c2eb343 100644
--- a/src/fields/ListField.ts
+++ b/src/fields/ListField.ts
@@ -1,10 +1,9 @@
-import { Field, FieldId, FieldValue, Opt } from "./Field";
-import { BasicField } from "./BasicField";
-import { Types } from "../server/Message";
-import { observe, action, IArrayChange, IArraySplice, IObservableArray } from "mobx";
+import { action, IArrayChange, IArraySplice, IObservableArray, observe } from "mobx";
 import { Server } from "../client/Server";
-import { ServerUtils } from "../server/ServerUtil";
 import { UndoManager } from "../client/util/UndoManager";
+import { Types } from "../server/Message";
+import { BasicField } from "./BasicField";
+import { Field, FieldId } from "./Field";
 
 export class ListField<T extends Field> extends BasicField<T[]> {
     private _proxies: string[] = []
-- 
cgit v1.2.3-70-g09d2


From bc9096366d10654d16ed84251e7f4b7fb3a46727 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 22 Feb 2019 15:24:42 -0500
Subject: changed PanelSize to PanelWidth/Height

---
 src/client/views/DocumentDecorations.tsx           |  2 +-
 src/client/views/Main.tsx                          |  3 ++-
 .../views/collections/CollectionDockingView.tsx    |  3 ++-
 .../views/collections/CollectionFreeFormView.tsx   |  3 ++-
 .../views/collections/CollectionSchemaView.tsx     |  3 ++-
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 24 ++++++++++++++--------
 src/client/views/nodes/DocumentView.tsx            |  3 ++-
 7 files changed, 26 insertions(+), 15 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 395a37ba5..7b64a4c2c 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -28,7 +28,7 @@ export class DocumentDecorations extends React.Component {
             }
             let transform = (element.props.ScreenToLocalTransform().scale(element.props.Scaling)).inverse();
             var [sptX, sptY] = transform.transformPoint(0, 0);
-            let [bptX, bptY] = transform.transformPoint(element.props.PanelSize[0], element.props.PanelSize[1]);
+            let [bptX, bptY] = transform.transformPoint(element.props.PanelWidth, element.props.PanelHeight);
             return {
                 x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
                 r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index fe1a999ec..6f6a89839 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -107,7 +107,8 @@ Documents.initProtos(() => {
                 <DocumentView Document={mainContainer}
                     AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
                     Scaling={1}
-                    PanelSize={[0, 0]}
+                    PanelWidth={0}
+                    PanelHeight={0}
                     isTopMost={true}
                     ContainingCollectionView={undefined} />
                 <DocumentDecorations />
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 857af023d..7ac8ea5e4 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -290,7 +290,8 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     AddDocument={undefined}
                     RemoveDocument={undefined}
                     Scaling={this._parentScaling}
-                    PanelSize={[this._nativeWidth, this._nativeHeight]}
+                    PanelWidth={this._nativeWidth}
+                    PanelHeight={this._nativeHeight}
                     ScreenToLocalTransform={this.ScreenToLocalTransform}
                     isTopMost={true}
                     ContainingCollectionView={undefined} />
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index b8312aff7..e31fb25b9 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -187,7 +187,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     ScreenToLocalTransform={this.getTransform}
                     isTopMost={false}
                     Scaling={1}
-                    PanelSize={[doc.GetNumber(KeyStore.Width, 0), doc.GetNumber(KeyStore.Height, 0)]}
+                    PanelWidth={doc.GetNumber(KeyStore.Width, 0)}
+                    PanelHeight={doc.GetNumber(KeyStore.Height, 0)}
                     ContainingCollectionView={this.props.CollectionView} />);
             })
         }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index df732308a..7e7d23fe4 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -149,7 +149,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                             ScreenToLocalTransform={this.getTransform}
                             Scaling={this._parentScaling}
                             isTopMost={false}
-                            PanelSize={[this._panelWidth, this._panelHeight]}
+                            PanelWidth={this._panelWidth}
+                            PanelHeight={this._panelHeight}
                             ContainingCollectionView={this.props.CollectionView} />
                     </div>
                 }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 5568935fa..ad6756918 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,4 +1,4 @@
-import { computed } from "mobx";
+import { computed, trace } from "mobx";
 import { observer } from "mobx-react";
 import { KeyStore } from "../../../fields/KeyStore";
 import { NumberField } from "../../../fields/NumberField";
@@ -69,15 +69,25 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
         this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
     }
 
+    @computed
+    get parentScaling() {
+        return this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
+    }
 
     getTransform = (): Transform => {
-        var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
         return this.props.ScreenToLocalTransform().
-            translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / parentScaling);
+            translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.parentScaling);
+    }
+
+    @computed
+    get docView() {
+        return <DocumentView {...this.props}
+            Scaling={this.parentScaling}
+            ScreenToLocalTransform={this.getTransform}
+        />
     }
 
     render() {
-        var parentScaling = this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
         return (
             <div ref={this._mainCont} style={{
                 transformOrigin: "left top",
@@ -88,11 +98,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
                 zIndex: this.zIndex,
                 backgroundColor: "transparent"
             }} >
-
-                <DocumentView {...this.props}
-                    Scaling={parentScaling}
-                    ScreenToLocalTransform={this.getTransform}
-                />
+                {this.docView}
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 69e413c6f..c026e13cd 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -31,7 +31,8 @@ export interface DocumentViewProps {
     isTopMost: boolean;
     //tfs: This shouldn't be necessary I don't think
     Scaling: number;
-    PanelSize: number[];
+    PanelWidth: number;
+    PanelHeight: number;
 }
 export interface JsxArgs extends DocumentViewProps {
     Keys: { [name: string]: Key }
-- 
cgit v1.2.3-70-g09d2


From 530be8dc0f049a4c05431c7b10ae47e46575fcbe Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 22 Feb 2019 17:10:44 -0500
Subject: fixed re-render issue for collection free form documents.

---
 src/client/views/DocumentDecorations.tsx           |  5 +--
 src/client/views/Main.tsx                          |  6 +--
 .../views/collections/CollectionDockingView.tsx    | 10 ++---
 .../views/collections/CollectionFreeFormView.tsx   | 46 ++++++-------------
 .../views/collections/CollectionSchemaView.tsx     | 52 ++++++++++------------
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  9 ++--
 src/client/views/nodes/DocumentView.tsx            |  8 ++--
 src/fields/Document.ts                             |  4 ++
 8 files changed, 59 insertions(+), 81 deletions(-)

(limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7b64a4c2c..efd50e49e 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -5,7 +5,6 @@ import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
 import { KeyStore } from '../../fields/KeyStore'
 import { NumberField } from "../../fields/NumberField";
-import { number } from "prop-types";
 
 @observer
 export class DocumentDecorations extends React.Component {
@@ -26,9 +25,9 @@ export class DocumentDecorations extends React.Component {
             if (element.props.isTopMost) {
                 return bounds;
             }
-            let transform = (element.props.ScreenToLocalTransform().scale(element.props.Scaling)).inverse();
+            let transform = (element.props.ScreenToLocalTransform().scale(element.props.ContentScaling())).inverse();
             var [sptX, sptY] = transform.transformPoint(0, 0);
-            let [bptX, bptY] = transform.transformPoint(element.props.PanelWidth, element.props.PanelHeight);
+            let [bptX, bptY] = transform.transformPoint(element.props.PanelWidth(), element.props.PanelHeight());
             return {
                 x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
                 r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6f6a89839..661a2ac20 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -106,9 +106,9 @@ Documents.initProtos(() => {
             <div style={{ position: "absolute", width: "100%", height: "100%" }}>
                 <DocumentView Document={mainContainer}
                     AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity}
-                    Scaling={1}
-                    PanelWidth={0}
-                    PanelHeight={0}
+                    ContentScaling={() => 1}
+                    PanelWidth={() => 0}
+                    PanelHeight={() => 0}
                     isTopMost={true}
                     ContainingCollectionView={undefined} />
                 <DocumentDecorations />
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 7ac8ea5e4..86dc66e39 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -272,13 +272,13 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         Server.GetField(this.props.documentId, action((f: Opt<Field>) => this._document = f as Document));
     }
 
-    @computed private get _nativeWidth() { return this._document!.GetNumber(KeyStore.NativeWidth, 0); }
-    @computed private get _nativeHeight() { return this._document!.GetNumber(KeyStore.NativeHeight, 0); }
-    @computed private get _parentScaling() { return this._panelWidth / (this._nativeWidth ? this._nativeWidth : this._panelWidth); }; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
+    private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, 0); }
+    private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, 0); }
+    private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); }
 
     ScreenToLocalTransform = () => {
         let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!);
-        return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._parentScaling)
+        return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling())
     }
 
     render() {
@@ -289,7 +289,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                 <DocumentView key={this._document.Id} Document={this._document}
                     AddDocument={undefined}
                     RemoveDocument={undefined}
-                    Scaling={this._parentScaling}
+                    ContentScaling={this._contentScaling}
                     PanelWidth={this._nativeWidth}
                     PanelHeight={this._nativeHeight}
                     ScreenToLocalTransform={this.ScreenToLocalTransform}
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index e31fb25b9..43bc24a12 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -22,23 +22,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
     private _downX: number = 0;
     private _downY: number = 0;
 
-    @computed
-    get isAnnotationOverlay() { return this.props.fieldKey == KeyStore.Annotations; }
-
-    @computed
-    get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
-    @computed
-    get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
-
-    @computed
-    get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
-
-    @computed
-    get resizeScaling() { return this.isAnnotationOverlay ? this.props.Document.GetNumber(KeyStore.Width, 0) / this.nativeWidth : 1; }
 
-    constructor(props: SubCollectionViewProps) {
-        super(props);
-    }
+    @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
+    @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
+    @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+    @computed get isAnnotationOverlay() { return this.props.fieldKey == KeyStore.Annotations; }
+    @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+    @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
+    @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
 
     @undoBatch
     @action
@@ -154,27 +145,16 @@ export class CollectionFreeFormView extends CollectionViewBase {
         });
     }
 
-    @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];
-    }
-
-    @computed
-    get scale(): number {
-        return this.props.Document.GetNumber(KeyStore.Scale, 1);
-    }
-
     getTransform = (): Transform => {
         return this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
     }
 
     getLocalTransform = (): Transform => {
-        const [x, y] = this.translate;
-        return Transform.Identity.translate(-x, -y).scale(1 / this.scale);
+        return Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
     }
 
+    noScaling = () => 1;
+
     @computed
     get views() {
         const { fieldKey, Document } = this.props;
@@ -186,9 +166,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     RemoveDocument={this.props.removeDocument}
                     ScreenToLocalTransform={this.getTransform}
                     isTopMost={false}
-                    Scaling={1}
-                    PanelWidth={doc.GetNumber(KeyStore.Width, 0)}
-                    PanelHeight={doc.GetNumber(KeyStore.Height, 0)}
+                    ContentScaling={this.noScaling}
+                    PanelWidth={doc.Width}
+                    PanelHeight={doc.Height}
                     ContainingCollectionView={this.props.CollectionView} />);
             })
         }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 7e7d23fe4..ca47f6998 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -19,14 +19,14 @@ import { CollectionViewBase } from "./CollectionViewBase";
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
     private _mainCont = React.createRef<HTMLDivElement>();
-
     private DIVIDER_WIDTH = 5;
 
-    @observable
-    selectedIndex = 0;
-
-    @observable
-    _splitPercentage: number = 50;
+    @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView
+    @observable _dividerX = 0;
+    @observable _panelWidth = 0;
+    @observable _panelHeight = 0;
+    @observable _selectedIndex = 0;
+    @observable _splitPercentage: number = 50;
 
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
@@ -67,7 +67,6 @@ export class CollectionSchemaView extends CollectionViewBase {
         )
     }
 
-
     private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
         const that = this;
         if (!rowInfo) {
@@ -75,7 +74,7 @@ export class CollectionSchemaView extends CollectionViewBase {
         }
         return {
             onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
-                that.selectedIndex = rowInfo.index;
+                that._selectedIndex = rowInfo.index;
                 this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize
 
                 if (handleOriginal) {
@@ -83,8 +82,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                 }
             }),
             style: {
-                background: rowInfo.index == this.selectedIndex ? "#00afec" : "white",
-                color: rowInfo.index == this.selectedIndex ? "white" : "black"
+                background: rowInfo.index == this._selectedIndex ? "#00afec" : "white",
+                color: rowInfo.index == this._selectedIndex ? "white" : "black"
             }
         };
     }
@@ -94,7 +93,6 @@ export class CollectionSchemaView extends CollectionViewBase {
         let nativeWidth = this._mainCont.current!.getBoundingClientRect();
         this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100);
     }
-
     onDividerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointermove", this.onDividerMove);
         document.removeEventListener('pointerup', this.onDividerUp);
@@ -118,39 +116,37 @@ export class CollectionSchemaView extends CollectionViewBase {
         }
     }
 
-
-    getTransform = (): Transform => {
-        return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._parentScaling);
-    }
-
     @action
     setScaling = (r: any) => {
         const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
-        const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined;
+        const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
         this._panelWidth = r.entry.width;
         this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight;
-        this._parentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width);
+        this._contentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width);
+    }
+
+    getContentScaling = (): number => this._contentScaling;
+    getPanelWidth = (): number => this._panelWidth;
+    getPanelHeight = (): number => this._panelHeight;
+    getTransform = (): Transform => {
+        return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling);
     }
 
-    @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 _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 content = this.selectedIndex == -1 || !selected ? (null) : (
+        const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
+        let content = this._selectedIndex == -1 || !selected ? (null) : (
             <Measure onResize={this.setScaling}>
                 {({ measureRef }) =>
                     <div ref={measureRef}>
                         <DocumentView Document={selected}
                             AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument}
-                            ScreenToLocalTransform={this.getTransform}
-                            Scaling={this._parentScaling}
                             isTopMost={false}
-                            PanelWidth={this._panelWidth}
-                            PanelHeight={this._panelHeight}
+                            ScreenToLocalTransform={this.getTransform}
+                            ContentScaling={this.getContentScaling}
+                            PanelWidth={this.getPanelWidth}
+                            PanelHeight={this.getPanelHeight}
                             ContainingCollectionView={this.props.CollectionView} />
                     </div>
                 }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index ad6756918..17123bf52 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -24,7 +24,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
 
     @computed
     get transform(): string {
-        return `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px)`;
+        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)`;
     }
 
     @computed
@@ -69,20 +69,19 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
         this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
     }
 
-    @computed
-    get parentScaling() {
+    contentScaling = () => {
         return this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
     }
 
     getTransform = (): Transform => {
         return this.props.ScreenToLocalTransform().
-            translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.parentScaling);
+            translate(-this.props.Document.GetNumber(KeyStore.X, 0), -this.props.Document.GetNumber(KeyStore.Y, 0)).scale(1 / this.contentScaling());
     }
 
     @computed
     get docView() {
         return <DocumentView {...this.props}
-            Scaling={this.parentScaling}
+            ContentScaling={this.contentScaling}
             ScreenToLocalTransform={this.getTransform}
         />
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c026e13cd..34a230669 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -30,9 +30,9 @@ export interface DocumentViewProps {
     ScreenToLocalTransform: () => Transform;
     isTopMost: boolean;
     //tfs: This shouldn't be necessary I don't think
-    Scaling: number;
-    PanelWidth: number;
-    PanelHeight: number;
+    ContentScaling: () => number;
+    PanelWidth: () => number;
+    PanelHeight: () => number;
 }
 export interface JsxArgs extends DocumentViewProps {
     Keys: { [name: string]: Key }
@@ -293,7 +293,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
         var nodeWidth = nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%";
         var nodeHeight = nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%";
-        var scaling = this.props.Scaling;
+        var scaling = this.props.ContentScaling();
         return (
             <div className="documentView-node" ref={this._mainCont} style={{ width: nodeWidth, height: nodeHeight, transformOrigin: "left top", transform: `scale(${scaling},${scaling})` }}
                 onContextMenu={this.onContextMenu}
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index ff13732b3..0d7d357a0 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -30,6 +30,10 @@ export class Document extends Field {
         }
     }
 
+    public Width = () => { return this.GetNumber(KeyStore.Width, 0) }
+    public Height = () => { return this.GetNumber(KeyStore.Height, 0) }
+    public Scale = () => { return this.GetNumber(KeyStore.Scale, 1) }
+
     @computed
     public get Title() {
         return this.GetText(KeyStore.Title, "<untitled>");
-- 
cgit v1.2.3-70-g09d2