Small fixes and start of drag drop

4 files changed, 41 insertions, 18 deletions

diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index 4e9e0cd21..d9a88fcd3 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -14,7 +14,7 @@ import { DocumentDecorations } from "../../DocumentDecorations";
 interface IProps {
     fieldKey: Key;
     doc: Document;
-    isSelected: boolean;
+    isSelected: () => boolean;
 }
 
 @observer
@@ -28,7 +28,7 @@ export class CollectionFreeFormView extends React.Component<IProps> {
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if (!this.props.isSelected) {
+        if (!this.props.isSelected()) {
             return;
         }
 
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index e37172943..cdc20cdfe 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -12,6 +12,8 @@ import { CollectionFreeFormView } from "../freeformcanvas/CollectionFreeFormView
 import "./NodeView.scss"
 import { SelectionManager } from "../../util/SelectionManager";
 import { DocumentDecorations } from "../../DocumentDecorations";
+import { SSL_OP_DONT_INSERT_EMPTY_FRAGMENTS } from "constants";
+import { DragManager } from "../../util/DragManager";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface IProps {
@@ -22,8 +24,11 @@ interface IProps {
 export class DocumentView extends React.Component<IProps> {
     private _mainCont = React.createRef<HTMLDivElement>();
 
-    get mainCont(): React.RefObject<HTMLDivElement> {
-        return this._mainCont
+    get screenRect(): ClientRect | DOMRect {
+        if(this._mainCont.current) {
+            return this._mainCont.current.getBoundingClientRect();
+        }
+        return new DOMRect();
     }
 
     @computed
@@ -83,13 +88,26 @@ export class DocumentView extends React.Component<IProps> {
     }
 
     @computed
-    get selected() : boolean {
+    get selected(): boolean {
         return SelectionManager.IsSelected(this)
     }
 
     private _isPointerDown = false;
 
+    componentDidMount() {
+        if(this._mainCont.current) {
+            DragManager.MakeDraggable(this._mainCont.current, {
+                buttons: 3,
+                handlers: {
+                    dragComplete: () => {},
+                    dragStart: () => {}
+                }
+            })
+        }
+    }
+
     onPointerDown = (e: React.PointerEvent): void => {
+        return;
         e.stopPropagation();
         if (e.button === 2) {
             this._isPointerDown = true;
@@ -97,8 +115,9 @@ export class DocumentView extends React.Component<IProps> {
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
+        } else {
+            SelectionManager.SelectDoc(this, e.ctrlKey)
         }
-        SelectionManager.SelectDoc(this, e.ctrlKey)
     }
 
     onPointerUp = (e: PointerEvent): void => {
@@ -108,8 +127,6 @@ 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
         }
     }
@@ -126,8 +143,8 @@ export class DocumentView extends React.Component<IProps> {
     }
 
     onDragStart = (e: React.DragEvent<HTMLDivElement>): void => {
-        if (this.mainCont.current !== null) {
-            this.mainCont.current.style.opacity = "0";
+        if (this._mainCont.current !== null) {
+            this._mainCont.current.style.opacity = "0";
             // e.dataTransfer.setDragImage()
         }
     }
@@ -136,7 +153,7 @@ export class DocumentView extends React.Component<IProps> {
         let doc = this.props.dvm.Doc;
         let bindings: any = {
             doc: doc,
-            isSelected: this.selected
+            isSelected: () => this.selected
         };
         for (const key of this.layoutKeys) {
             bindings[key.Name + "Key"] = key;
@@ -147,22 +164,24 @@ export class DocumentView extends React.Component<IProps> {
                 bindings[key.Name] = field.GetValue();
             }
         }
-        
+
         return (
             <div className="node" ref={this._mainCont} style={{
-                    transform: this.transform,
-                    width: this.width,
-                    height: this.height,
-                }}
+                transform: this.transform,
+                width: this.width,
+                height: this.height,
+            }}
                 onContextMenu={
                     (e) => {
                         e.preventDefault()
-                }}
+                    }}
                 onPointerDown={this.onPointerDown}>
                 <JsxParser
                     components={{ FieldTextBox, FreeFormCanvas, CollectionFreeFormView }}
                     bindings={bindings}
                     jsx={this.layout}
+                    showWarnings={true}
+                    onError={(test: any) => { console.log(test) }}
                 />
             </div>
         );
diff --git a/src/views/nodes/FieldTextBox.scss b/src/views/nodes/FieldTextBox.scss
new file mode 100644
index 000000000..2885caa4c
--- /dev/null
+++ b/src/views/nodes/FieldTextBox.scss
@@ -0,0 +1,3 @@
+.ProseMirror:focus {
+    outline: none !important
+}
\ No newline at end of file
diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx
index dbac3906a..2cd55e26e 100644
--- a/src/views/nodes/FieldTextBox.tsx
+++ b/src/views/nodes/FieldTextBox.tsx
@@ -13,6 +13,8 @@ import {baseKeymap} from "prosemirror-commands"
 import {undo, redo, history} from "prosemirror-history"
 import { Opt } from "../../fields/Field";
 
+import "./FieldTextBox.scss"
+
 interface IProps {
     fieldKey:Key;
     doc:Document;
@@ -34,7 +36,6 @@ interface IProps {
 //  specified Key and assigns it to an HTML input node.  When changes are made tot his node, 
 //  this will edit the document and assign the new value to that field.
 //
-@observer
 export class FieldTextBox extends React.Component<IProps> {
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;