From c67608a7eeeb6bdee27a8e7b4a8f6f8561db6004 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 21 Jan 2019 22:25:52 -0500
Subject: Small fixes and start of drag drop

---
 src/Main.tsx | 23 +++++------------------
 1 file changed, 5 insertions(+), 18 deletions(-)

(limited to 'src/Main.tsx')

diff --git a/src/Main.tsx b/src/Main.tsx
index 9ce1dd4e9..7c132f179 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -21,40 +21,27 @@ configure({
 const mainNodeCollection = new NodeCollectionStore();
 ReactDOM.render((
     <div>
-        <h1>Dash Web</h1>
-        <DocumentDecorations />
         <FreeFormCanvas store={mainNodeCollection} />
+        <DocumentDecorations />
+        <button onClick={minus}>-</button>
     </div>), document.getElementById('root'));
 
+function minus() {
 
-
-// create a bunch of text and video nodes (you probably want to delete this at some point)
-let numNodes = 300;
-let maxX = 10000;
-let maxY = 10000;
-let nodes:NodeStore[] = []
-for (let i = 0; i < numNodes; i++) {
-    nodes.push(new StaticTextNodeStore({ X: Math.random() * maxX, Y: Math.random() * maxY, Title: "Text Node Title", Text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" }));
 }
-
-for (let i = 0; i < 20; i++) {
-    nodes.push(new VideoNodeStore({ X: Math.random() * maxX, Y: Math.random() * maxY, Title: "Video Node Title", Url: "http://cs.brown.edu/people/peichman/downloads/cted.mp4" }));
-}
-
 runInAction(() => {
-    mainNodeCollection.AddNodes(nodes);
     let doc1 = Documents.TextDocument("Hello world");
     let doc2 = doc1.MakeDelegate();
     doc2.SetField(KS.X, new NumberField(150));
     doc2.SetField(KS.Y, new NumberField(20));
-    let doc3 = Documents.ImageDocument("https://static.boredpanda.com/blog/wp-content/uploads/2018/04/5acb63d83493f__700-png.jpg", {
+    let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
         x: 450, y: 500
     });
     let docset = new Array<Document>(doc1, doc2);
     let doc4 = Documents.CollectionDocument(docset, {
         x: 100, y: 400
     });
-    let doc5 = Documents.ImageDocument("https://static.boredpanda.com/blog/wp-content/uploads/2018/04/5acb63d83493f__700-png.jpg", {
+    let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
         x: 650, y: 500
     });
     mainNodeCollection.Docs.push(doc1);
-- 
cgit v1.2.3-70-g09d2


From 8a1915a73d1d1173059a212db3b79f8efcdd9e9e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 22 Jan 2019 20:31:32 -0500
Subject: Temporarily got rid of dvm to draastically improve performance and
 reduce number of re-renders

---
 src/Main.tsx                                       |   4 -
 src/documents/Documents.ts                         |   2 +-
 .../freeformcanvas/CollectionFreeFormView.tsx      |   3 +-
 src/views/freeformcanvas/FreeFormCanvas.tsx        |   2 +-
 src/views/nodes/DocumentView.tsx                   | 130 ++++++++++++---------
 test/test.ts                                       |   4 +
 6 files changed, 79 insertions(+), 66 deletions(-)

(limited to 'src/Main.tsx')

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>
         );
     }
diff --git a/test/test.ts b/test/test.ts
index 8c1740ba6..3c8fae8d7 100644
--- a/test/test.ts
+++ b/test/test.ts
@@ -40,10 +40,14 @@ describe("Document", () =>{
     it('should update', () => {
         let doc = new Document();
         let key = new Key("Test");
+        let key2 = new Key("Test2");
         let ran = false;
         reaction(() => doc.GetField(key), (field) => {ran = true});
         expect(ran).to.equal(false);
 
+        doc.SetField(key2, new NumberField(4));
+        expect(ran).to.equal(false);
+
         doc.SetField(key, new NumberField(5));
 
         expect(ran).to.equal(true);
-- 
cgit v1.2.3-70-g09d2

