selection manager added

5 files changed, 72 insertions, 15 deletions

diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index bba678bbd..442fb00c7 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -77,7 +77,7 @@ export namespace Documents {
             collectionProto.SetField(KeyStore.Y, new NumberField(0));
             collectionProto.SetField(KeyStore.Width, new NumberField(300));
             collectionProto.SetField(KeyStore.Height, new NumberField(300));
-            collectionProto.SetField(KeyStore.Layout, new TextField('<CollectionFreeFormView doc={doc} fieldKey={DataKey}/>'));
+            collectionProto.SetField(KeyStore.Layout, new TextField('<CollectionFreeFormView doc={doc} fieldKey={DataKey} isSelected={isSelected}/>'));
             collectionProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
         }
         return collectionProto;
diff --git a/src/util/SelectionManager.ts b/src/util/SelectionManager.ts
new file mode 100644
index 000000000..52c92d174
--- /dev/null
+++ b/src/util/SelectionManager.ts
@@ -0,0 +1,31 @@
+import { DocumentView } from "../views/nodes/DocumentView";
+import { observable, action } from "mobx";
+
+export namespace SelectionManager {
+    class Manager {
+        @observable
+        SelectedDocuments: Array<DocumentView> = [];
+
+        @action
+        SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
+            // if doc is not in SelectedDocuments, add it
+            if (!ctrlPressed) {
+                manager.SelectedDocuments = [];
+            }
+
+            if (manager.SelectedDocuments.indexOf(doc) === -1) {
+                manager.SelectedDocuments.push(doc)
+            }
+        }
+    }
+
+    const manager = new Manager;
+
+    export function SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
+        manager.SelectDoc(doc, ctrlPressed)
+    }
+
+    export function IsSelected(doc: DocumentView): boolean {
+        return manager.SelectedDocuments.indexOf(doc) !== -1;
+    }
+}
\ No newline at end of file
diff --git a/src/viewmodels/DocumentViewModel.ts b/src/viewmodels/DocumentViewModel.ts
index 008275f3c..f3154db54 100644
--- a/src/viewmodels/DocumentViewModel.ts
+++ b/src/viewmodels/DocumentViewModel.ts
@@ -8,4 +8,14 @@ export class DocumentViewModel {
     get Doc(): Document {
         return this.doc;
     }
+
+    private _selected = false;
+
+    get Selected() : boolean {
+        return this._selected;
+    }
+
+    set Selected(isSelected: boolean) {
+        this._selected = isSelected;
+    }
 }
\ No newline at end of file
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index 8bdf1849a..7812c4b36 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -4,14 +4,15 @@ import "./FreeFormCanvas.scss";
 import React = require("react");
 import { action } from "mobx";
 import { Document } from "../../fields/Document";
-import {DocumentViewModel} from "../../viewmodels/DocumentViewModel";
-import {DocumentView} from "../nodes/DocumentView";
-import {ListField} from "../../fields/ListField";
-import {NumberField} from "../../fields/NumberField";
+import { DocumentViewModel } from "../../viewmodels/DocumentViewModel";
+import { DocumentView } from "../nodes/DocumentView";
+import { ListField } from "../../fields/ListField";
+import { NumberField } from "../../fields/NumberField";
 
 interface IProps {
-    fieldKey:Key;
-    doc:Document;
+    fieldKey: Key;
+    doc: Document;
+    isSelected: boolean;
 }
 
 @observer
@@ -19,7 +20,7 @@ export class CollectionFreeFormView extends React.Component<IProps> {
 
     private _isPointerDown: boolean = false;
 
-    constructor(props:IProps) {
+    constructor(props: IProps) {
         super(props);
     }
 
@@ -52,11 +53,16 @@ export class CollectionFreeFormView extends React.Component<IProps> {
         if (!this._isPointerDown) {
             return;
         }
-        const {doc} = this.props;
+        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);
+        doc.SetFieldValue(KeyStore.PanX, x + e.movementX, NumberField);
+        doc.SetFieldValue(KeyStore.PanY, y + e.movementY, NumberField);
     }
 
     @action
@@ -68,7 +74,7 @@ export class CollectionFreeFormView extends React.Component<IProps> {
     }
 
     render() {
-        const {fieldKey, doc} = this.props;
+        const { fieldKey, doc } = this.props;
         const value: Document[] = doc.GetFieldValue(fieldKey, ListField, []);
         const panx: number = doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         const pany: number = doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 1c9f850ed..c4101fab9 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 {
@@ -72,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 => {
@@ -83,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 => {
@@ -108,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
         };
         for (const key of this.layoutKeys) {
             bindings[key.Name + "Key"] = key;
@@ -119,11 +127,13 @@ export class DocumentView extends React.Component<IProps> {
                 bindings[key.Name] = field.GetValue();
             }
         }
+        
         return (
             <div className="node" style={{
                 transform: this.transform,
                 width: this.width,
-                height: this.height
+                height: this.height,
+                border: this.selected
             }} onPointerDown={this.onPointerDown} onContextMenu={
                 (e) => {
                     e.preventDefault()