2 files changed, 33 insertions, 11 deletions
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index 9a4f5ffa1..4e9e0cd21 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -9,6 +9,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import { ListField } from "../../fields/ListField";
 import { NumberField } from "../../fields/NumberField";
 import { SSL_OP_SINGLE_DH_USE } from "constants";
+import { DocumentDecorations } from "../../DocumentDecorations";
 
 interface IProps {
     fieldKey: Key;
@@ -60,14 +61,13 @@ export class CollectionFreeFormView extends React.Component<IProps> {
         }
         const { doc } = this.props;
 
-        // if docView is selected, pan, else dont pan
-        console.log(this.props.isSelected)
-
-
         let x = doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         let y = doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
         doc.SetFieldValue(KeyStore.PanX, x + e.movementX, NumberField);
         doc.SetFieldValue(KeyStore.PanY, y + e.movementY, NumberField);
+
+
+        DocumentDecorations.Instance.forceUpdate()
     }
 
     @action
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 5b0951f45..e37172943 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -11,6 +11,7 @@ import { FreeFormCanvas } from "../freeformcanvas/FreeFormCanvas"
 import { CollectionFreeFormView } from "../freeformcanvas/CollectionFreeFormView"
 import "./NodeView.scss"
 import { SelectionManager } from "../../util/SelectionManager";
+import { DocumentDecorations } from "../../DocumentDecorations";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface IProps {
@@ -53,11 +54,19 @@ export class DocumentView extends React.Component<IProps> {
         return this.props.dvm.Doc.GetFieldValue(KeyStore.Width, NumberField, Number(0));
     }
 
+    set width(w: number) {
+        this.props.dvm.Doc.SetFieldValue(KeyStore.Width, w, NumberField)
+    }
+
     @computed
     get height(): number {
         return this.props.dvm.Doc.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>"));
@@ -99,6 +108,9 @@ export class DocumentView extends React.Component<IProps> {
             this._isPointerDown = false;
             document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
+            console.log(this.x);
+            console.log(this.y)
+            DocumentDecorations.Instance.opacity = 1
         }
     }
 
@@ -110,6 +122,14 @@ export class DocumentView extends React.Component<IProps> {
         }
         this.x += e.movementX;
         this.y += e.movementY;
+        DocumentDecorations.Instance.opacity = 0
+    }
+
+    onDragStart = (e: React.DragEvent<HTMLDivElement>): void => {
+        if (this.mainCont.current !== null) {
+            this.mainCont.current.style.opacity = "0";
+            // e.dataTransfer.setDragImage()
+        }
     }
 
     render() {
@@ -130,13 +150,15 @@ export class DocumentView extends React.Component<IProps> {
         
         return (
             <div className="node" ref={this._mainCont} style={{
-                transform: this.transform,
-                width: this.width,
-                height: this.height
-            }} onPointerDown={this.onPointerDown} onContextMenu={
-                (e) => {
-                    e.preventDefault()
-                }}>
+                    transform: this.transform,
+                    width: this.width,
+                    height: this.height,
+                }}
+                onContextMenu={
+                    (e) => {
+                        e.preventDefault()
+                }}
+                onPointerDown={this.onPointerDown}>
                 <JsxParser
                     components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
                     bindings={bindings}