1 files changed, 52 insertions, 3 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 87f2e205b..21f64ef35 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,5 +1,6 @@
-import { action, computed } from "mobx";
+import { action, computed, runInAction } from "mobx";
 import { observer } from "mobx-react";
+import { observable } from "mobx";
 import { Document } from "../../../fields/Document";
 import { Field, FieldWaiting, Opt } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
@@ -18,6 +19,9 @@ import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import "./DocumentView.scss";
 import React = require("react");
+import { DocumentManager } from "../DocumentManager";
+import { TextField } from "../../../fields/TextField";
+import { Utils } from "../../../Utils";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 export interface DocumentViewProps {
@@ -78,6 +82,16 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
 
+    public Id: string = Utils.GenerateGuid();
+
+    @observable
+    public Border: string = "white"
+
+    @action
+    public switchColor() {
+        this.Border = "red"
+    }
+
     private _mainCont = React.createRef<HTMLDivElement>();
     private _documentBindings: any = null;
     private _contextMenuCanOpen = false;
@@ -91,6 +105,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
 
     screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
+    size = (): { width: number, height: number } => this._mainCont.current ? { width: this._mainCont.current.clientWidth, height: this._mainCont.current.clientHeight } : { width: 0, height: 0 };
 
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
@@ -166,6 +181,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
 
+    //TODO Monika
+    @action
+    Center = (e: React.MouseEvent): void => {
+        DocumentManager.Instance.centerNode(this)
+    }
+
     @action
     onContextMenu = (e: React.MouseEvent): void => {
         e.preventDefault()
@@ -184,6 +205,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             e.stopPropagation();
 
             ContextMenu.Instance.clearItems();
+            ContextMenu.Instance.addItem({ description: "Center", event: this.Center })
             ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
             ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
             ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
@@ -206,6 +228,32 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             onError={(test: any) => { console.log(test) }}
         />
     }
+
+    //adds doc to global list
+    componentDidMount: () => void = () => {
+        runInAction(() => {
+            DocumentManager.Instance.DocumentViews.push(this);
+        })
+    }
+
+    //removes doc from global list
+    componentWillUnmount: () => void = () => {
+        runInAction(() => {
+            for (let node of DocumentManager.Instance.DocumentViews) {
+                if (Object.is(node, this)) {
+                    DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1);
+                }
+            }
+        })
+    }
+    isSelected = () => {
+        return SelectionManager.IsSelected(this);
+    }
+
+    select = (ctrlPressed: boolean) => {
+        SelectionManager.SelectDoc(this, ctrlPressed)
+    }
+
     render() {
         if (!this.props.Document)
             return <div></div>
@@ -215,8 +263,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
         this._documentBindings = {
             ...this.props,
-            isSelected: () => SelectionManager.IsSelected(this),
-            select: (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed)
+            isSelected: this.isSelected,
+            select: this.select,
+            documentSize: this.size
         };
         for (const key of this.layoutKeys) {
             this._documentBindings[key.Name + "Key"] = key;  // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data