yuck

7 files changed, 93 insertions, 2 deletions

diff --git a/src/DocumentDecorations.scss b/src/DocumentDecorations.scss
new file mode 100644
index 000000000..34c279e60
--- /dev/null
+++ b/src/DocumentDecorations.scss
@@ -0,0 +1,3 @@
+.documentDecorations-container {
+    background: blue;
+}
\ No newline at end of file
diff --git a/src/DocumentDecorations.tsx b/src/DocumentDecorations.tsx
new file mode 100644
index 000000000..60596e96a
--- /dev/null
+++ b/src/DocumentDecorations.tsx
@@ -0,0 +1,64 @@
+import { observable, computed } from "mobx";
+import React = require("react");
+import { DocumentView } from "./views/nodes/DocumentView";
+import { SelectionManager } from "./util/SelectionManager";
+
+export class DocumentDecorations extends React.Component {
+    @computed
+    get x(): number {
+        let left = Number.MAX_VALUE;
+        SelectionManager.SelectedDocuments().forEach(element => {
+            if (element.mainCont.current !== null) {
+                left = Math.min(element.mainCont.current.getBoundingClientRect().left, left)
+            }
+        });
+        return left;
+    }
+
+    @computed
+    get y(): number {
+        let top = Number.MAX_VALUE;
+        SelectionManager.SelectedDocuments().forEach(element => {
+            if (element.mainCont.current !== null) {
+                top = Math.min(element.mainCont.current.getBoundingClientRect().top, top)
+            }
+        });
+        return top;
+    }
+
+    @computed
+    get height(): number {
+        let bottom = Number.MIN_VALUE;
+        SelectionManager.SelectedDocuments().forEach(element => {
+            if (element.mainCont.current !== null) {
+                bottom = Math.min(element.mainCont.current.getBoundingClientRect().bottom, bottom)
+            }
+        });
+        return bottom - this.y;
+    }
+
+    @computed
+    get width(): number {
+        let right = Number.MIN_VALUE;
+        console.log(SelectionManager.SelectedDocuments())
+        SelectionManager.SelectedDocuments().forEach(element => {
+            if (element.mainCont.current !== null) {
+                right = Math.min(element.mainCont.current.getBoundingClientRect().right, right)
+            }
+        });
+        return right - this.x;
+    }
+
+    render() {
+        return(
+            <div className="documentDecorations-container" style={{
+                width: `${this.width}px`,
+                height: `${this.height}px`,
+                left: this.x,
+                top: this.y
+            }}>
+
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/Main.tsx b/src/Main.tsx
index 604e443cf..461ee637a 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -11,6 +11,7 @@ import { Document } from './fields/Document';
 import { configure, runInAction } from 'mobx';
 import { NodeStore } from './stores/NodeStore';
 import { Documents } from './documents/Documents';
+import { DocumentDecorations } from './DocumentDecorations';
 
 configure({
     enforceActions: "observed"
@@ -20,6 +21,7 @@ const mainNodeCollection = new NodeCollectionStore();
 ReactDOM.render((
     <div>
         <h1>Dash Web</h1>
+        <DocumentDecorations />
         <FreeFormCanvas store={mainNodeCollection} />
     </div>), document.getElementById('root'));
 
diff --git a/src/util/SelectionManager.ts b/src/util/SelectionManager.ts
index 52c92d174..2a63248c4 100644
--- a/src/util/SelectionManager.ts
+++ b/src/util/SelectionManager.ts
@@ -28,4 +28,12 @@ export namespace SelectionManager {
     export function IsSelected(doc: DocumentView): boolean {
         return manager.SelectedDocuments.indexOf(doc) !== -1;
     }
+
+    export function DeselectAll(): void {
+        manager.SelectedDocuments = []
+    }
+
+    export function SelectedDocuments(): Array<DocumentView> {
+        return manager.SelectedDocuments;
+    }
 }
\ No newline at end of file
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index 33b7ed1ad..9a4f5ffa1 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -27,6 +27,10 @@ export class CollectionFreeFormView extends React.Component<IProps> {
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
+        if (!this.props.isSelected) {
+            return;
+        }
+
         e.stopPropagation();
         if (e.button === 2) {
             this._isPointerDown = true;
diff --git a/src/views/freeformcanvas/FreeFormCanvas.tsx b/src/views/freeformcanvas/FreeFormCanvas.tsx
index 9ef5ab8f7..de5e88fa1 100644
--- a/src/views/freeformcanvas/FreeFormCanvas.tsx
+++ b/src/views/freeformcanvas/FreeFormCanvas.tsx
@@ -10,6 +10,7 @@ import {DocumentView} from "../nodes/DocumentView";
 import {TextField} from "../../fields/TextField";
 import {ListField} from "../../fields/ListField";
 import {Field} from "../../fields/Field";
+import { SelectionManager } from "../../util/SelectionManager";
 
 interface IProps {
     store: NodeCollectionStore;
@@ -34,6 +35,8 @@ export class FreeFormCanvas extends React.Component<IProps> {
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
         }
+
+        SelectionManager.DeselectAll()
     }
 
     @action
@@ -57,6 +60,7 @@ export class FreeFormCanvas extends React.Component<IProps> {
         if (!this._isPointerDown) {
             return;
         }
+
         this.props.store.X += e.movementX;
         this.props.store.Y += e.movementY;
     }
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 1f5ce7f22..d6f4b296d 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -19,6 +19,12 @@ interface IProps {
 
 @observer
 export class DocumentView extends React.Component<IProps> {
+    private _mainCont = React.createRef<HTMLDivElement>();
+
+    get mainCont(): React.RefObject<HTMLDivElement> {
+        return this._mainCont
+    }
+
     @computed
     get x(): number {
         return this.props.dvm.Doc.GetFieldValue(KeyStore.X, NumberField, Number(0));
@@ -110,7 +116,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 !== "0px"
         };
         for (const key of this.layoutKeys) {
             bindings[key.Name + "Key"] = key;
@@ -123,7 +129,7 @@ export class DocumentView extends React.Component<IProps> {
         }
         
         return (
-            <div className="node" style={{
+            <div className="node" ref={this._mainCont} style={{
                 transform: this.transform,
                 width: this.width,
                 height: this.height,