Merge branch 'transforms' of https://github.com/browngraphicslab/Dash-Web into hedmanLocal

5 files changed, 179 insertions, 162 deletions

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 95c28e414..54bc7327b 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -14,11 +14,8 @@ import { Transform } from "../../util/Transform";
 
 
 @observer
-export class CollectionFreeFormDocumentView extends DocumentView {
-    private _contextMenuCanOpen = false;
-    private _downX: number = 0;
-    private _downY: number = 0;
-    // private _mainCont = React.createRef<HTMLDivElement>();
+export class CollectionFreeFormDocumentView extends React.Component<DocumentViewProps> {
+    private _mainCont = React.createRef<HTMLDivElement>();
 
     constructor(props: DocumentViewProps) {
         super(props);
@@ -95,138 +92,6 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
     }
 
-    @action
-    dragComplete = (e: DragManager.DragCompleteEvent) => {
-    }
-
-    @computed
-    get active(): boolean {
-        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
-            this.props.ContainingCollectionView.active;
-    }
-
-    @computed
-    get topMost(): boolean {
-        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
-    }
-
-    onPointerDown = (e: React.PointerEvent): void => {
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-        var me = this;
-        if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
-            e.stopPropagation();
-            return;
-        }
-        this._contextMenuCanOpen = e.button == 2;
-        if (this.active && !e.isDefaultPrevented()) {
-            e.stopPropagation();
-            if (e.buttons === 2) {
-                e.preventDefault();
-            }
-            document.removeEventListener("pointermove", this.onPointerMove)
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp)
-            document.addEventListener("pointerup", this.onPointerUp);
-        }
-    }
-
-    onPointerMove = (e: PointerEvent): void => {
-        if (e.cancelBubble) {
-            this._contextMenuCanOpen = false;
-            return;
-        }
-        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            this._contextMenuCanOpen = false;
-            if (this._mainCont.current != null && !this.topMost) {
-                this._contextMenuCanOpen = false;
-                const rect = this.screenRect;
-                let dragData: { [id: string]: any } = {};
-                dragData["document"] = this;
-                dragData["xOffset"] = e.x - rect.left;
-                dragData["yOffset"] = e.y - rect.top;
-                DragManager.StartDrag(this._mainCont.current, dragData, {
-                    handlers: {
-                        dragComplete: this.dragComplete,
-                    },
-                    hideSource: true
-                })
-            }
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove)
-        document.removeEventListener("pointerup", this.onPointerUp)
-        e.stopPropagation();
-        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
-
-    openRight = (e: React.MouseEvent): void => {
-        CollectionDockingView.AddRightSplit(this.props.Document);
-    }
-
-    deleteClicked = (e: React.MouseEvent): void => {
-        if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
-            this.props.ContainingCollectionView.removeDocument(this.props.Document)
-        }
-    }
-    @action
-    fullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.OpenFullScreen(this.props.Document);
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
-    @action
-    closeFullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.CloseFullScreen();
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
-
-    //MONIKA TODO
-    //needs to be @action?
-    @action
-    centerNode = (e: React.MouseEvent): void => {
-        
-    }
-
-    @action
-    onContextMenu = (e: React.MouseEvent): void => {
-        if (!SelectionManager.IsSelected(this)) {
-            return;
-        }
-        e.preventDefault()
-
-        if (!this._contextMenuCanOpen) {
-            return;
-        }
-
-        if (this.topMost) {
-            ContextMenu.Instance.clearItems()
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-        }
-        else {
-            // DocumentViews should stop propogation of this event
-            e.stopPropagation();
-
-            ContextMenu.Instance.clearItems();
-            ContextMenu.Instance.addItem({ description: "Center", event: this.centerNode })
-            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 })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
 
     getTransform = (): Transform => {
         return this.props.GetTransform().translated(this.x, this.y);
@@ -242,11 +107,10 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 height: freestyling ? this.height : "100%",
                 position: freestyling ? "absolute" : "relative",
                 zIndex: freestyling ? this.zIndex : 0,
-            }}
-                onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown}>
+                backgroundColor: "transparent"
+            }} >
 
-                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} DocumentView={this} />
+                <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} GetTransform={this.getTransform} />
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3be8afda3..bc27c424c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -17,6 +17,9 @@ import "./NodeView.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";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 export interface DocumentViewProps {
@@ -27,6 +30,7 @@ export interface DocumentViewProps {
     AddDocument?: (doc: Document) => void;
     RemoveDocument?: (doc: Document) => boolean;
     GetTransform: () => Transform;
+    isTopMost: boolean;
     Scaling: number;
 }
 
@@ -36,18 +40,27 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     public Id: string = Utils.GenerateGuid();
     public tempTitle: string = "hello there"
 
-    protected _mainCont = React.createRef<any>();
+    private _mainCont = React.createRef<HTMLDivElement>();
     get MainContent() {
         return this._mainCont;
     }
+    get screenRect(): ClientRect | DOMRect {
+        if (this._mainCont.current) {
+            return this._mainCont.current.getBoundingClientRect();
+        }
+        return new DOMRect();
+    }
     @computed
     get layout(): string {
         return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
     }
 
     @computed
-    get backgroundLayout(): string {
-        return this.props.Document.GetData(KeyStore.BackgroundLayout, TextField, String("<p>Error loading layout data</p>"));
+    get backgroundLayout(): string | undefined {
+        let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
+        if (field && field !== "<Waiting>") {
+            return field.Data;
+        }
     }
 
     @computed
@@ -60,6 +73,134 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>());
     }
 
+    @computed
+    get active(): boolean {
+        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined ||
+            this.props.ContainingCollectionView.active;
+    }
+
+    private _contextMenuCanOpen = false;
+    private _downX: number = 0;
+    private _downY: number = 0;
+    onPointerDown = (e: React.PointerEvent): void => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
+        var me = this;
+        if (e.shiftKey && e.buttons === 1) {
+            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+            e.stopPropagation();
+            return;
+        }
+        this._contextMenuCanOpen = e.button == 2;
+        if (this.active && !e.isDefaultPrevented()) {
+            e.stopPropagation();
+            if (e.buttons === 2) {
+                e.preventDefault();
+            }
+            document.removeEventListener("pointermove", this.onPointerMove)
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp)
+            document.addEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    @action
+    dragComplete = (e: DragManager.DragCompleteEvent) => {
+    }
+
+    @computed
+    get topMost(): boolean {
+        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
+    }
+
+    onPointerMove = (e: PointerEvent): void => {
+        if (e.cancelBubble) {
+            this._contextMenuCanOpen = false;
+            return;
+        }
+        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+            this._contextMenuCanOpen = false;
+            if (this._mainCont.current != null && !this.topMost) {
+                this._contextMenuCanOpen = false;
+                const [left, top] = this.props.GetTransform().inverse().transformPoint(0, 0);
+                let dragData: { [id: string]: any } = {};
+                dragData["document"] = this;
+                dragData["xOffset"] = e.x - left;
+                dragData["yOffset"] = e.y - top;
+                DragManager.StartDrag(this._mainCont.current, dragData, {
+                    handlers: {
+                        dragComplete: this.dragComplete,
+                    },
+                    hideSource: true
+                })
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onPointerMove)
+        document.removeEventListener("pointerup", this.onPointerUp)
+        e.stopPropagation();
+        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    }
+
+    openRight = (e: React.MouseEvent): void => {
+        CollectionDockingView.AddRightSplit(this.props.Document);
+    }
+
+    deleteClicked = (e: React.MouseEvent): void => {
+        if (this.props.RemoveDocument) {
+            this.props.RemoveDocument(this.props.Document);
+        }
+    }
+    @action
+    fullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.OpenFullScreen(this.props.Document);
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
+    @action
+    closeFullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.CloseFullScreen();
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
+
+    @action
+    onContextMenu = (e: React.MouseEvent): void => {
+        if (!SelectionManager.IsSelected(this)) {
+            return;
+        }
+        e.preventDefault()
+
+        if (!this._contextMenuCanOpen) {
+            return;
+        }
+
+        if (this.topMost) {
+            ContextMenu.Instance.clearItems()
+            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        }
+        else {
+            // DocumentViews should stop propogation of this event
+            e.stopPropagation();
+
+            ContextMenu.Instance.clearItems();
+            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 })
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    }
+
     // 
     // returns the cumulative scaling between the document and the screen
     //
@@ -86,10 +227,19 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             }
         }
     }
+    isSelected = () => {
+        return SelectionManager.IsSelected(this);
+    }
+
+    select = (ctrlPressed: boolean) => {
+        SelectionManager.SelectDoc(this, ctrlPressed)
+    }
 
 
     render() {
         let bindings = { ...this.props } as any;
+        bindings.isSelected = this.isSelected;
+        bindings.select = this.select;
         for (const key of this.layoutKeys) {
             bindings[key.Name + "Key"] = key;  // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
         }
@@ -100,26 +250,29 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             let field = this.props.Document.Get(key);
             bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
         }
-        if (bindings.DocumentView === undefined) {
-            bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
+        let annotated = null;
+        let backgroundLayout = this.backgroundLayout;
+        if (backgroundLayout) {
+            annotated = <JsxParser
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+                bindings={bindings}
+                jsx={this.backgroundLayout}
+                showWarnings={true}
+                onError={(test: any) => { console.log(test) }}
+            />;
         }
-        var annotated = <JsxParser
-            components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
-            bindings={bindings}
-            jsx={this.backgroundLayout}
-            showWarnings={true}
-            onError={(test: any) => { console.log(test) }}
-        />;
-        bindings["BackgroundView"] = this.backgroundLayout ? annotated : null;
+        bindings.BackgroundView = annotated;
 
         var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
         var strwidth = width > 0 ? width.toString() + "px" : "100%";
         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={{ width: strwidth, height: strheight, transformOrigin: "left top", transform: `scale(${this.props.Scaling},${this.props.Scaling})` }}
+                onContextMenu={this.onContextMenu}
+                onPointerDown={this.onPointerDown} >
                 <JsxParser
-                    components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+                    components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
                     bindings={bindings}
                     jsx={this.layout}
                     showWarnings={true}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 12371eb2e..08de53e1c 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -10,7 +10,6 @@ import { ImageField } from "../../../fields/ImageField";
 import { Key } from "../../../fields/Key";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
-import { DocumentView } from "./DocumentView";
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
@@ -20,12 +19,13 @@ import { DocumentView } from "./DocumentView";
 export interface FieldViewProps {
     fieldKey: Key;
     doc: Document;
-    DocumentViewForField: Opt<DocumentView>
+    isSelected: () => boolean;
+    isTopMost: boolean;
 }
 
 @observer
 export class FieldView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
+    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} isSelected={isSelected} isTopMost={isTopMost} />`; }
     @computed
     get field(): FieldValue<Field> {
         const { doc, fieldKey } = this.props;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index f6bd0c0f8..2e3d396c1 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -110,7 +110,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     }
     onPointerDown = (e: React.PointerEvent): void => {
         let me = this;
-        if (e.buttons === 1 && me.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.DocumentViewForField)) {
+        if (e.buttons === 1 && this.props.isSelected()) {
             e.stopPropagation();
         }
     }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 2fa70734d..e1fa26e2f 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -41,7 +41,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (Date.now() - this._lastTap < 300) {
-            if (e.buttons === 1 && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
+            if (e.buttons === 1 && this.props.isSelected()) {
                 e.stopPropagation();
                 this._downX = e.clientX;
                 this._downY = e.clientY;
@@ -63,7 +63,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
 
     lightbox = (path: string) => {
         const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
-        if (this._isOpen && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
+        if (this._isOpen && this.props.isSelected()) {
             return (<Lightbox
                 mainSrc={images[this._photoIndex]}
                 nextSrc={images[(this._photoIndex + 1) % images.length]}