1 files changed, 53 insertions, 3 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 19a455b74..a624c1d7f 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";
@@ -20,6 +21,9 @@ import { KeyValueBox } from "./KeyValueBox"
 import { WebBox } from "../nodes/WebBox";
 import "./DocumentView.scss";
 import React = require("react");
+import { DocumentManager } from "../DocumentManager";
+import { TextField } from "../../../fields/TextField";
+import { Utils } from "../../../Utils";
 import { CollectionViewProps } from "../collections/CollectionViewBase";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
@@ -36,6 +40,7 @@ export interface DocumentViewProps {
     ContentScaling: () => number;
     PanelWidth: () => number;
     PanelHeight: () => number;
+    focus: (doc: Document, x: number, y: number) => void;
     SelectOnLoad: boolean;
 }
 export interface JsxArgs extends DocumentViewProps {
@@ -83,6 +88,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 _downX: number = 0;
@@ -95,6 +110,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;
@@ -175,6 +191,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 => {
+        this.props.focus(this.props.Document, this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0))
+    }
+
     @action
     onContextMenu = (e: React.MouseEvent): void => {
         e.stopPropagation();
@@ -187,6 +209,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
         ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
         ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
+        ContextMenu.Instance.addItem({ description: "Center", event: this.Center })
         ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
         ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
         ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
@@ -222,6 +245,31 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         />
     }
 
+    //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>
@@ -231,8 +279,10 @@ 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,
+            focus: this.props.focus
         };
         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