1 files changed, 34 insertions, 1 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f368fdeaf..9bd8c0288 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 { observer } from "mobx-react";
+import { observable } from "mobx";
 import { Document } from "../../../fields/Document";
 import { Opt, FieldWaiting } from "../../../fields/Field";
 import { Key, KeyStore } from "../../../fields/Key";
@@ -14,6 +15,7 @@ import { ImageBox } from "../nodes/ImageBox";
 import "./DocumentView.scss";
 import React = require("react");
 import { Transform } from "../../util/Transform";
+import { DocumentManager } from "../DocumentManager";
 import { SelectionManager } from "../../util/SelectionManager";
 import { DragManager } from "../../util/DragManager";
 import { ContextMenu } from "../ContextMenu";
@@ -35,6 +37,16 @@ export interface DocumentViewProps {
 @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>();
     get MainContent() {
         return this._mainCont;
@@ -168,6 +180,13 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @action
+    Center = (e: React.MouseEvent): void => {
+        DocumentManager.Instance.centerNode(this.props.Document)
+        DocumentManager.Instance.centerNode(this)
+        //console.log(this.props.ContainingCollectionView.props.)
+    }
+
+    @action
     onContextMenu = (e: React.MouseEvent): void => {
         if (!SelectionManager.IsSelected(this)) {
             return;
@@ -188,6 +207,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: this.openRight })
             ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
@@ -209,6 +229,19 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return 1;
     }
 
+    //adds doc to global list
+    componentDidMount: () => void = () => {
+        DocumentManager.Instance.DocumentViews.push(this);
+    }
+
+    //removes doc from global list
+    componentWillUnmount: () => void = () => {
+        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);
     }
@@ -250,7 +283,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
         var strheight = height > 0 ? height.toString() + "px" : "100%";
         return (
-            <div className="documentView-node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
+            <div className="documentView-node" ref={this._mainCont} style={{ borderColor: this.Border, width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown} >
                 <JsxParser