nav working

7 files changed, 118 insertions, 3 deletions

diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts
index 8ae3f837f..aa922f358 100644
--- a/src/client/util/Transform.ts
+++ b/src/client/util/Transform.ts
@@ -55,6 +55,13 @@ export class Transform {
         return this;
     }
 
+    //MONIKA
+    center = (x: number, y: number): Transform => {
+        this._translateX = x
+        this._translateY = y
+        return this;
+    }
+
     preTransform = (transform: Transform): Transform => {
         this._translateX = transform._translateX + this._translateX * transform._scale;
         this._translateY = transform._translateY + this._translateY * transform._scale;
diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx
index b69d40148..2ab643657 100644
--- a/src/client/views/DocumentManager.tsx
+++ b/src/client/views/DocumentManager.tsx
@@ -3,6 +3,9 @@ import { observer } from 'mobx-react';
 import { observable, action } from 'mobx';
 import { DocumentView } from './nodes/DocumentView';
 import { Document } from "../../fields/Document"
+import { CollectionFreeFormView } from './collections/CollectionFreeFormView';
+import { KeyStore } from '../../fields/Key';
+import { CollectionViewBase } from './collections/CollectionViewBase';
 
 
 export class DocumentManager {
@@ -29,19 +32,95 @@ export class DocumentManager {
         let toReturn: DocumentView | null;
         toReturn = null;
 
+        //gets document view that is in a freeform canvas collection
         DocumentManager.Instance.DocumentViews.map(view => {
             let doc = view.props.Document;
+            // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+            //     if (Object.is(doc, toFind)) {
+            //         toReturn = view;
+            //         return;
+            //     }
+            // }
+
             if (Object.is(doc, toFind)) {
                 toReturn = view;
                 return;
             }
+
+        })
+
+        return (toReturn);
+    }
+
+    public getDocumentViewFreeform(toFind: Document): DocumentView | null {
+
+        let toReturn: DocumentView | null;
+        toReturn = null;
+
+        //gets document view that is in a freeform canvas collection
+        DocumentManager.Instance.DocumentViews.map(view => {
+            let doc = view.props.Document;
+            if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+                if (Object.is(doc, toFind)) {
+                    toReturn = view;
+                    return;
+                }
+            }
         })
 
         return (toReturn);
     }
 
-    public centerNode(doc: DocumentView) {
+    public centerNode(doc: Document): any {
+
+        //gets document view that is in freeform collection
+        let docView: DocumentView | null = this.getDocumentViewFreeform(doc)
+
+        let scale: number;
+        let XView: number;
+        let YView: number;
+        let width: number;
+        let height: number;
+
+        //if the view exists in a freeform collection
+        if (docView != null) {
+            //view.props.GetTransform().TranslateX
+            width = docView.props.Document.GetNumber(KeyStore.NativeWidth, 0)
+            height = docView.props.Document.GetNumber(KeyStore.NativeHeight, 0)
+
+            //base case: parent does not exist (aka is parent)
+            if (docView.props.ContainingCollectionView == null) {
+                // scale = RootStore.Instance.MainNodeCollection.Scale;
+                // XView = (-node.X * scale) + (window.innerWidth / 2) - (node.Width * scale / 2);
+                // YView = (-node.Y * scale) + (window.innerHeight / 2) - (node.Height * scale / 2);
+                // RootStore.Instance.MainNodeCollection.SetViewportXY(XView, YView);
+                scale = docView.props.GetTransform().Scale
+                XView = (-docView.props.GetTransform().TranslateX * scale) + (window.innerWidth / 2) - (width * scale / 2)
+                YView = (-docView.props.GetTransform().TranslateY * scale) + (window.innerHeight / 2) - (height * scale / 2)
+            }
+            //parent is not main, parent is centered and calls itself
+            else {
+                if (docView.props.ContainingCollectionView.props.ContainingDocumentView != null) {
+
+                    let parentWidth = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document.GetNumber(KeyStore.NativeWidth, 0)
+                    let parentHeight = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document.GetNumber(KeyStore.NativeHeight, 0)
+
+                    scale = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.GetTransform().Scale
+                    XView = (-docView.props.GetTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2);
+                    YView = (-docView.props.GetTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2);
+                    //node.Parent.setViewportXY(XView, YView);
+                    this.setViewportXY(docView.props.ContainingCollectionView, XView, YView)
+
+                    return this.centerNode(docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document);
+                }
+            }
+        }
+    }
 
+    private setViewportXY(collection: CollectionViewBase, x: number, y: number) {
+        if (collection.props.ContainingDocumentView != null) {
+            collection.props.ContainingDocumentView.props.GetTransform().center(x, y)
+        }
     }
 
     public setPosition(doc: DocumentView) {
diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx
index 8dd256c8a..5bb44fde2 100644
--- a/src/client/views/TempTreeView.tsx
+++ b/src/client/views/TempTreeView.tsx
@@ -17,13 +17,18 @@ export class TempTreeView extends React.Component<IProps>{
         let view = DocumentManager.Instance.getDocumentView(doc);
         if (view != null) {
             console.log(view.Id)
+            console.log(view.props.GetTransform().TranslateX)
+
             console.log(view.props.Document.Title)
             if (view.props.ContainingCollectionView != undefined) {
                 //console.log(view.props.ContainingCollectionView.Id)
+                // view.props.ContainingCollectionView
             }
             else {
                 console.log("containing collection is undefined")
             }
+
+            view.switchColor();
         }
     }
 
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 7947b1c51..d60b98edd 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -25,6 +25,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
     private _lastY: number = 0;
     private _downX: number = 0;
     private _downY: number = 0;
+    private _borderColor: string = "red"
 
     constructor(props: CollectionViewProps) {
         super(props);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index bc27c424c..f653919cf 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";
@@ -38,7 +39,14 @@ export interface DocumentViewProps {
 export class DocumentView extends React.Component<DocumentViewProps> {
 
     public Id: string = Utils.GenerateGuid();
-    public tempTitle: string = "hello there"
+
+    @observable
+    public Border: string = "white"
+
+    @action
+    public switchColor() {
+        this.Border = "red"
+    }
 
     private _mainCont = React.createRef<HTMLDivElement>();
     get MainContent() {
@@ -173,6 +181,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @action
+    Center = (e: React.MouseEvent): void => {
+        //DocumentManager.Instance.centerNode()
+        console.log("centering...")
+    }
+
+    @action
     onContextMenu = (e: React.MouseEvent): void => {
         if (!SelectionManager.IsSelected(this)) {
             return;
@@ -193,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 })
@@ -268,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="node" ref={this._mainCont} style={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
+            <div className="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
diff --git a/src/client/views/nodes/NodeView.scss b/src/client/views/nodes/NodeView.scss
index dac1c0a8e..5615ecafd 100644
--- a/src/client/views/nodes/NodeView.scss
+++ b/src/client/views/nodes/NodeView.scss
@@ -2,6 +2,8 @@
     position: absolute;
     background: #cdcdcd;
     overflow: hidden;
+    border-style: solid;
+    border-width: 2px; //border-color: blue;
     &.minimized {
         width: 30px;
         height: 30px;
diff --git a/src/temp.txt b/src/temp.txt
index 251606e02..481424859 100644
--- a/src/temp.txt
+++ b/src/temp.txt
@@ -29,6 +29,12 @@
 
     }
 
+    @observable
+    public SetViewportXY(x: number, y: number) {
+        this.ViewportX = x;
+        this.ViewportY = y;
+    }
+
 
     //NAV
     /**