3 files changed, 34 insertions, 4 deletions
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index d5343536d..9a4f5ffa1 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -13,6 +13,7 @@ import { SSL_OP_SINGLE_DH_USE } from "constants";
 interface IProps {
     fieldKey: Key;
     doc: Document;
+    isSelected: boolean;
 }
 
 @observer
@@ -26,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;
@@ -54,6 +59,11 @@ export class CollectionFreeFormView extends React.Component<IProps> {
             return;
         }
         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);
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 f955a8c39..d6f4b296d 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import React = require("react");
-import { computed } from "mobx";
+import { computed, observable } from "mobx";
 import { KeyStore, Key } from "../../fields/Key";
 import { NumberField } from "../../fields/NumberField";
 import { TextField } from "../../fields/TextField";
@@ -10,6 +10,7 @@ import { FieldTextBox } from "../nodes/FieldTextBox"
 import { FreeFormCanvas } from "../freeformcanvas/FreeFormCanvas"
 import { CollectionFreeFormView } from "../freeformcanvas/CollectionFreeFormView"
 import "./NodeView.scss"
+import { SelectionManager } from "../../util/SelectionManager";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface IProps {
@@ -18,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));
@@ -66,6 +73,11 @@ export class DocumentView extends React.Component<IProps> {
         return this.props.dvm.Doc.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
     }
 
+    @computed
+    get selected() : string {
+        return SelectionManager.IsSelected(this) ? "5px solid black" : "0px"
+    }
+
     private _isPointerDown = false;
 
     onPointerDown = (e: React.PointerEvent): void => {
@@ -77,6 +89,7 @@ export class DocumentView extends React.Component<IProps> {
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
         }
+        SelectionManager.SelectDoc(this, e.ctrlKey)
     }
 
     onPointerUp = (e: PointerEvent): void => {
@@ -102,7 +115,8 @@ export class DocumentView extends React.Component<IProps> {
     render() {
         let doc = this.props.dvm.Doc;
         let bindings: any = {
-            doc: doc
+            doc: doc,
+            isSelected: this.selected !== "0px"
         };
         for (const key of this.layoutKeys) {
             bindings[key.Name + "Key"] = key;
@@ -113,11 +127,13 @@ export class DocumentView extends React.Component<IProps> {
                 bindings[key.Name] = field.GetValue();
             }
         }
+        
         return (
-            <div className="node" style={{
+            <div className="node" ref={this._mainCont} style={{
                 transform: this.transform,
                 width: this.width,
-                height: this.height
+                height: this.height,
+                border: this.selected
             }} onPointerDown={this.onPointerDown} onContextMenu={
                 (e) => {
                     e.preventDefault()