Temporarily got rid of dvm to draastically improve performance and reduce number of re-renders

5 files changed, 75 insertions, 66 deletions

diff --git a/src/Main.tsx b/src/Main.tsx
index 7c132f179..5482314ae 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -23,12 +23,8 @@ ReactDOM.render((
     <div>
         <FreeFormCanvas store={mainNodeCollection} />
         <DocumentDecorations />
-        <button onClick={minus}>-</button>
     </div>), document.getElementById('root'));
 
-function minus() {
-
-}
 runInAction(() => {
     let doc1 = Documents.TextDocument("Hello world");
     let doc2 = doc1.MakeDelegate();
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index 084666b95..a2d2218af 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -56,7 +56,7 @@ export namespace Documents {
             imageProto.SetField(KeyStore.Y, new NumberField(0));
             imageProto.SetField(KeyStore.Width, new NumberField(300));
             imageProto.SetField(KeyStore.Height, new NumberField(300));
-            imageProto.SetField(KeyStore.Layout, new TextField('<img src={Data} alt="Image not found"/>'));
+            imageProto.SetField(KeyStore.Layout, new TextField('<img src={Data} draggable="false" width="100%" alt="Image not found"/>'));
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
             imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data]));
         }
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index d9a88fcd3..e1aeff534 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -54,7 +54,6 @@ export class CollectionFreeFormView extends React.Component<IProps> {
 
     @action
     onPointerMove = (e: PointerEvent): void => {
-        e.preventDefault();
         e.stopPropagation();
         if (!this._isPointerDown) {
             return;
@@ -97,7 +96,7 @@ export class CollectionFreeFormView extends React.Component<IProps> {
                     <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px)`, transformOrigin: '50% 50%' }}>
                         <div className="node-container">
                             {value.map(doc => {
-                                return (<DocumentView key={doc.Id} dvm={new DocumentViewModel(doc)} />);
+                                return (<DocumentView key={doc.Id} dvm={doc} />);
                             })}
                         </div>
                     </div>
diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx
index de5e88fa1..e051fd97c 100644
--- a/src/views/freeformcanvas/FreeFormCanvas.tsx
+++ b/src/views/freeformcanvas/FreeFormCanvas.tsx
@@ -80,7 +80,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
                 <div className="freeformcanvas" style={{ transform: store.Transform, transformOrigin: '50% 50%' }}>
                     <div className="node-container">
                         {this.props.store.Docs.map(doc => {
-                            return (<DocumentView key={doc.Id} dvm={new DocumentViewModel(doc)} />);
+                            return (<DocumentView key={doc.Id} dvm={doc} />);
                         })}
                     </div>
                 </div>
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index cdc20cdfe..648ea7f50 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -14,10 +14,56 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { DocumentDecorations } from "../../DocumentDecorations";
 import { SSL_OP_DONT_INSERT_EMPTY_FRAGMENTS } from "constants";
 import { DragManager } from "../../util/DragManager";
+import { Document } from "../../fields/Document";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface IProps {
-    dvm: DocumentViewModel;
+    dvm: Document;
+}
+
+@observer
+class DocumentContents extends React.Component<IProps & {isSelected: () => boolean}> {
+
+    @computed
+    get layout(): string {
+        return this.props.dvm.GetFieldValue(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
+    }
+
+    @computed
+    get layoutKeys(): Key[] {
+        return this.props.dvm.GetFieldValue(KeyStore.LayoutKeys, ListField, new Array<Key>());
+    }
+
+    @computed
+    get layoutFields(): Key[] {
+        return this.props.dvm.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
+    }
+    render() {
+        let doc = this.props.dvm;
+        let bindings: any = {
+            doc: doc,
+            isSelected: this.props.isSelected
+        };
+        for (const key of this.layoutKeys) {
+            bindings[key.Name + "Key"] = key;
+        }
+        for (const key of this.layoutFields) {
+            let field = doc.GetField(key);
+            if (field) {
+                bindings[key.Name] = field.GetValue();
+            }
+        }
+        return <JsxParser
+            components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
+            bindings={bindings}
+            jsx={this.layout}
+            showWarnings={true}
+            onError={(test: any) => { console.log(test) }}
+        />
+
+
+    }
+
 }
 
 @observer
@@ -25,7 +71,7 @@ export class DocumentView extends React.Component<IProps> {
     private _mainCont = React.createRef<HTMLDivElement>();
 
     get screenRect(): ClientRect | DOMRect {
-        if(this._mainCont.current) {
+        if (this._mainCont.current) {
             return this._mainCont.current.getBoundingClientRect();
         }
         return new DOMRect();
@@ -33,20 +79,20 @@ export class DocumentView extends React.Component<IProps> {
 
     @computed
     get x(): number {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.X, NumberField, Number(0));
+        return this.props.dvm.GetFieldValue(KeyStore.X, NumberField, Number(0));
     }
 
     @computed
     get y(): number {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+        return this.props.dvm.GetFieldValue(KeyStore.Y, NumberField, Number(0));
     }
 
     set x(x: number) {
-        this.props.dvm.Doc.SetFieldValue(KeyStore.X, x, NumberField)
+        this.props.dvm.SetFieldValue(KeyStore.X, x, NumberField)
     }
 
     set y(y: number) {
-        this.props.dvm.Doc.SetFieldValue(KeyStore.Y, y, NumberField)
+        this.props.dvm.SetFieldValue(KeyStore.Y, y, NumberField)
     }
 
     @computed
@@ -56,35 +102,20 @@ export class DocumentView extends React.Component<IProps> {
 
     @computed
     get width(): number {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.Width, NumberField, Number(0));
+        return this.props.dvm.GetFieldValue(KeyStore.Width, NumberField, Number(0));
     }
 
     set width(w: number) {
-        this.props.dvm.Doc.SetFieldValue(KeyStore.Width, w, NumberField)
+        this.props.dvm.SetFieldValue(KeyStore.Width, w, NumberField)
     }
 
     @computed
     get height(): number {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.Height, NumberField, Number(0));
+        return this.props.dvm.GetFieldValue(KeyStore.Height, NumberField, Number(0));
     }
 
     set height(h: number) {
-        this.props.dvm.Doc.SetFieldValue(KeyStore.Height, h, NumberField)
-    }
-
-    @computed
-    get layout(): string {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
-    }
-
-    @computed
-    get layoutKeys(): Key[] {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutKeys, ListField, new Array<Key>());
-    }
-
-    @computed
-    get layoutFields(): Key[] {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
+        this.props.dvm.SetFieldValue(KeyStore.Height, h, NumberField)
     }
 
     @computed
@@ -92,22 +123,26 @@ export class DocumentView extends React.Component<IProps> {
         return SelectionManager.IsSelected(this)
     }
 
+    isSelected = (): boolean => {
+        return this.selected
+    }
+
     private _isPointerDown = false;
 
     componentDidMount() {
-        if(this._mainCont.current) {
-            DragManager.MakeDraggable(this._mainCont.current, {
-                buttons: 3,
-                handlers: {
-                    dragComplete: () => {},
-                    dragStart: () => {}
-                }
-            })
-        }
+        return;
+        // if(this._mainCont.current) {
+        //     DragManager.MakeDraggable(this._mainCont.current, {
+        //         buttons: 2,
+        //         handlers: {
+        //             dragComplete: () => {},
+        //             dragStart: () => {}
+        //         }
+        //     })
+        // }
     }
 
     onPointerDown = (e: React.PointerEvent): void => {
-        return;
         e.stopPropagation();
         if (e.button === 2) {
             this._isPointerDown = true;
@@ -139,7 +174,7 @@ export class DocumentView extends React.Component<IProps> {
         }
         this.x += e.movementX;
         this.y += e.movementY;
-        DocumentDecorations.Instance.opacity = 0
+        //DocumentDecorations.Instance.opacity = 0
     }
 
     onDragStart = (e: React.DragEvent<HTMLDivElement>): void => {
@@ -150,21 +185,6 @@ export class DocumentView extends React.Component<IProps> {
     }
 
     render() {
-        let doc = this.props.dvm.Doc;
-        let bindings: any = {
-            doc: doc,
-            isSelected: () => this.selected
-        };
-        for (const key of this.layoutKeys) {
-            bindings[key.Name + "Key"] = key;
-        }
-        for (const key of this.layoutFields) {
-            let field = doc.GetField(key);
-            if (field) {
-                bindings[key.Name] = field.GetValue();
-            }
-        }
-
         return (
             <div className="node" ref={this._mainCont} style={{
                 transform: this.transform,
@@ -176,13 +196,7 @@ export class DocumentView extends React.Component<IProps> {
                         e.preventDefault()
                     }}
                 onPointerDown={this.onPointerDown}>
-                <JsxParser
-                    components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
-                    bindings={bindings}
-                    jsx={this.layout}
-                    showWarnings={true}
-                    onError={(test: any) => { console.log(test) }}
-                />
+                <DocumentContents dvm={this.props.dvm} isSelected={this.isSelected} />
             </div>
         );
     }