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 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'src/client/documents/Documents.ts')

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}} />'));
-- 
cgit v1.2.3-70-g09d2


From f3359bd32f8c4ecb612d3c95f198d5e248ab6450 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 11 Feb 2019 21:28:09 -0500
Subject: renamed AnnotatedLaout to BackgroundLayout

---
 src/client/documents/Documents.ts       | 2 +-
 src/client/views/nodes/DocumentView.tsx | 8 ++++----
 src/fields/Key.ts                       | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/client/documents/Documents.ts')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 84aaaa78f..8fbf99da6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -128,7 +128,7 @@ export namespace Documents {
             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.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]));
             Server.AddDocument(imageProto);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index bba5becc3..a2f8ceebe 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -36,8 +36,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @computed
-    get annotatedlayout(): string {
-        return this.props.Document.GetData(KeyStore.AnnotatedLayout, TextField, String("<p>Error loading layout data</p>"));
+    get backgroundLayout(): string {
+        return this.props.Document.GetData(KeyStore.BackgroundLayout, TextField, String("<p>Error loading layout data</p>"));
     }
 
     @computed
@@ -147,11 +147,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         var annotated = <JsxParser
             components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
             bindings={bindings}
-            jsx={this.annotatedlayout}
+            jsx={this.backgroundLayout}
             showWarnings={true}
             onError={(test: any) => { console.log(test) }}
         />;
-        bindings["BackgroundView"] = this.annotatedlayout ? annotated : null;
+        bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
         return (
             <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
                 <JsxParser
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 13bdd01d4..8d92b89b6 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -50,7 +50,7 @@ export namespace KeyStore {
     export const Data = new Key("Data");
     export const Annotations = new Key("Annotations");
     export const Layout = new Key("Layout");
-    export const AnnotatedLayout = new Key("AnnotatedLayout");
+    export const BackgroundLayout = new Key("BackgroundLayout");
     export const LayoutKeys = new Key("LayoutKeys");
     export const LayoutFields = new Key("LayoutFields");
     export const ColumnsKey = new Key("SchemaColumns");
-- 
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/documents/Documents.ts')

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 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/documents/Documents.ts')

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