Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web into propsRefactor

1 files changed, 197 insertions, 88 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2a9b3b9ac..31adec0d7 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,11 +1,13 @@
 import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
-import { Field, Opt, FieldWaiting } from "../../../fields/Field";
+import { Field, FieldWaiting, Opt } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
+import { BooleanField } from "../../../fields/BooleanField";
 import { TextField } from "../../../fields/TextField";
+import { ServerUtils } from "../../../server/ServerUtil";
 import { Utils } from "../../../Utils";
 import { Documents } from "../../documents/Documents";
 import { DocumentManager } from "../../util/DocumentManager";
@@ -18,8 +20,6 @@ import { ContextMenu } from "../ContextMenu";
 import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
 import React = require("react");
-import { ServerUtils } from "../../../server/ServerUtil";
-import { CollectionViewType } from "../collections/CollectionBaseView";
 
 
 export interface DocumentViewProps {
@@ -39,8 +39,8 @@ export interface DocumentViewProps {
     onActiveChanged: (isActive: boolean) => void;
 }
 export interface JsxArgs extends DocumentViewProps {
-    Keys: { [name: string]: Key }
-    Fields: { [name: string]: Field }
+    Keys: { [name: string]: Key };
+    Fields: { [name: string]: Field };
 }
 
 /*
@@ -59,16 +59,16 @@ Example usage of this function:
     }
 */
 export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
-    let Keys: { [name: string]: any } = {}
-    let Fields: { [name: string]: any } = {}
+    let Keys: { [name: string]: any } = {};
+    let Fields: { [name: string]: any } = {};
     for (const key of keys) {
-        let fn = () => { }
-        Object.defineProperty(fn, "name", { value: key + "Key" })
+        let fn = () => { };
+        Object.defineProperty(fn, "name", { value: key + "Key" });
         Keys[key] = fn;
     }
     for (const field of fields) {
-        let fn = () => { }
-        Object.defineProperty(fn, "name", { value: field })
+        let fn = () => { };
+        Object.defineProperty(fn, "name", { value: field });
         Fields[field] = fn;
     }
     let args: JsxArgs = {
@@ -80,8 +80,6 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
     return args;
 }
 
-
-
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
     private _mainCont = React.createRef<HTMLDivElement>();
@@ -102,27 +100,29 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         if (e.shiftKey && e.buttons === 2) {
             if (this.props.isTopMost) {
                 this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey);
-            }
-            else CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e);
+            } else
+                CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e);
             e.stopPropagation();
         } else {
             if (this.active && !e.isDefaultPrevented()) {
                 e.stopPropagation();
-                document.removeEventListener("pointermove", this.onPointerMove)
+                document.removeEventListener("pointermove", this.onPointerMove);
                 document.addEventListener("pointermove", this.onPointerMove);
-                document.removeEventListener("pointerup", this.onPointerUp)
+                document.removeEventListener("pointerup", this.onPointerUp);
                 document.addEventListener("pointerup", this.onPointerUp);
             }
         }
-    }
+    };
 
     private dropDisposer?: DragManager.DragDropDisposer;
 
     componentDidMount() {
         if (this._mainCont.current) {
-            this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
+            this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
+                handlers: { drop: this.drop.bind(this) }
+            });
         }
-        runInAction(() => DocumentManager.Instance.DocumentViews.push(this))
+        runInAction(() => DocumentManager.Instance.DocumentViews.push(this));
     }
 
     componentDidUpdate() {
@@ -130,7 +130,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             this.dropDisposer();
         }
         if (this._mainCont.current) {
-            this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, { handlers: { drop: this.drop.bind(this) } });
+            this.dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, {
+                handlers: { drop: this.drop.bind(this) }
+            });
         }
     }
 
@@ -138,12 +140,15 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         if (this.dropDisposer) {
             this.dropDisposer();
         }
-        runInAction(() => DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1))
+        runInAction(() => DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1));
     }
 
     startDragging(x: number, y: number, dropAliasOfDraggedDoc: boolean) {
         if (this._mainCont.current) {
-            const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            const [left, top] = this.props
+                .ScreenToLocalTransform()
+                .inverse()
+                .transformPoint(0, 0);
             let dragData = new DragManager.DocumentDragData([this.props.Document]);
             dragData.aliasOnDrop = dropAliasOfDraggedDoc;
             dragData.xOffset = x - left;
@@ -151,10 +156,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             dragData.moveDocument = this.props.moveDocument;
             DragManager.StartDocumentDrag([this._mainCont.current], dragData, {
                 handlers: {
-                    dragComplete: action(() => { }),
+                    dragComplete: action(() => { })
                 },
                 hideSource: !dropAliasOfDraggedDoc
-            })
+            });
         }
     }
 
@@ -162,52 +167,74 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         if (e.cancelBubble) {
             return;
         }
-        if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            document.removeEventListener("pointermove", this.onPointerMove)
+        if (
+            Math.abs(this._downX - e.clientX) > 3 ||
+            Math.abs(this._downY - e.clientY) > 3
+        ) {
+            document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
-            if (!this.topMost || e.buttons == 2 || e.altKey) {
+            if (!this.topMost || e.buttons === 2 || e.altKey) {
                 this.startDragging(e.x, e.y, e.ctrlKey || e.altKey);
             }
         }
         e.stopPropagation();
         e.preventDefault();
-    }
+    };
     onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove)
-        document.removeEventListener("pointerup", this.onPointerUp)
+        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) {
+        if (!SelectionManager.IsSelected(this) &&
+            Math.abs(e.clientX - this._downX) < 4 &&
+            Math.abs(e.clientY - this._downY) < 4
+        ) {
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
-    }
+    };
     stopPropogation = (e: React.SyntheticEvent) => {
         e.stopPropagation();
-    }
+    };
 
     deleteClicked = (): void => {
         if (this.props.removeDocument) {
             this.props.removeDocument(this.props.Document);
         }
-    }
+    };
 
     fieldsClicked = (e: React.MouseEvent): void => {
         if (this.props.addDocument) {
             this.props.addDocument(Documents.KVPDocument(this.props.Document, { width: 300, height: 300 }), false);
         }
-    }
+    };
     fullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.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)
-    }
+        ContextMenu.Instance.addItem({
+            description: "Close Full Screen",
+            event: this.closeFullScreenClicked
+        });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
+    };
 
     closeFullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.CloseFullScreen();
         ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
+        ContextMenu.Instance.addItem({
+            description: "Full Screen",
+            event: this.fullScreenClicked
+        });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
+    };
+
+    @action
+    public minimize = (): void => {
+        this.props.Document.SetData(
+            KeyStore.Minimized,
+            true as boolean,
+            BooleanField
+        );
+        SelectionManager.DeselectAll();
+    };
 
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
@@ -219,23 +246,37 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             }
             let linkDoc: Document = new Document();
 
-            destDoc.GetTAsync(KeyStore.Prototype, Document).then((protoDest) =>
-                sourceDoc.GetTAsync(KeyStore.Prototype, Document).then((protoSrc) => runInAction(() => {
-                    linkDoc.Set(KeyStore.Title, new TextField("New Link"));
-                    linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
-                    linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
+            destDoc.GetTAsync(KeyStore.Prototype, Document).then(protoDest =>
+                sourceDoc.GetTAsync(KeyStore.Prototype, Document).then(protoSrc =>
+                    runInAction(() => {
+                        linkDoc.Set(KeyStore.Title, new TextField("New Link"));
+                        linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
+                        linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
 
-                    let dstTarg = (protoDest ? protoDest : destDoc);
-                    let srcTarg = (protoSrc ? protoSrc : sourceDoc);
-                    linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
-                    linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
-                    dstTarg.GetOrCreateAsync(KeyStore.LinkedFromDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
-                    srcTarg.GetOrCreateAsync(KeyStore.LinkedToDocs, ListField, field => { (field as ListField<Document>).Data.push(linkDoc) })
-                }))
-            )
+                        let dstTarg = protoDest ? protoDest : destDoc;
+                        let srcTarg = protoSrc ? protoSrc : sourceDoc;
+                        linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
+                        linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
+                        dstTarg.GetOrCreateAsync(
+                            KeyStore.LinkedFromDocs,
+                            ListField,
+                            field => {
+                                (field as ListField<Document>).Data.push(linkDoc);
+                            }
+                        );
+                        srcTarg.GetOrCreateAsync(
+                            KeyStore.LinkedToDocs,
+                            ListField,
+                            field => {
+                                (field as ListField<Document>).Data.push(linkDoc);
+                            }
+                        );
+                    })
+                )
+            );
             e.stopPropagation();
         }
-    }
+    };
 
     onDrop = (e: React.DragEvent) => {
         if (e.isDefaultPrevented()) {
@@ -249,22 +290,43 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             e.stopPropagation();
             e.preventDefault();
         }
-    }
+    };
 
     @action
     onContextMenu = (e: React.MouseEvent): void => {
         e.stopPropagation();
-        let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
+        let moved =
+            Math.abs(this._downX - e.clientX) > 3 ||
+            Math.abs(this._downY - e.clientY) > 3;
         if (moved || e.isDefaultPrevented()) {
-            e.preventDefault()
+            e.preventDefault();
             return;
         }
-        e.preventDefault()
+        e.preventDefault();
 
-        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-        ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked })
-        ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) })
-        ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
+        if (!this.isMinimized()) {
+            ContextMenu.Instance.addItem({
+                description: "Minimize",
+                event: this.minimize
+            });
+        }
+        ContextMenu.Instance.addItem({
+            description: "Full Screen",
+            event: this.fullScreenClicked
+        });
+        ContextMenu.Instance.addItem({
+            description: "Fields",
+            event: this.fieldsClicked
+        });
+        ContextMenu.Instance.addItem({
+            description: "Center",
+            event: () => this.props.focus(this.props.Document)
+        });
+        ContextMenu.Instance.addItem({
+            description: "Open Right",
+            event: () =>
+                CollectionDockingView.Instance.AddRightSplit(this.props.Document)
+        });
         ContextMenu.Instance.addItem({
             description: "Copy URL",
             event: () => {
@@ -278,46 +340,93 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             }
         });
         //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
         if (!this.topMost) {
             // DocumentViews should stop propagation of this event
             e.stopPropagation();
         }
 
-        ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        ContextMenu.Instance.addItem({
+            description: "Delete",
+            event: this.deleteClicked
+        });
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
         SelectionManager.SelectDoc(this, e.ctrlKey);
-    }
+    };
+
+    isMinimized = () => {
+        let field = this.props.Document.GetT(KeyStore.Minimized, BooleanField);
+        if (field && field !== FieldWaiting) {
+            return field.Data;
+        }
+    };
 
+    @action
+    expand = () => {
+        this.props.Document.SetData(
+            KeyStore.Minimized,
+            false as boolean,
+            BooleanField
+        );
+    };
 
     isSelected = () => SelectionManager.IsSelected(this)
 
     select = (ctrlPressed: boolean) => {
-        SelectionManager.SelectDoc(this, ctrlPressed)
-    }
+        SelectionManager.SelectDoc(this, ctrlPressed);
+    };
 
     render() {
         if (!this.props.Document) {
-            return (null);
+            return null;
         }
+
         var scaling = this.props.ContentScaling();
         var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
         var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
-        var backgroundcolor = this.props.Document.GetText(KeyStore.BackgroundColor, "");
-        return (
-            <div className="documentView-node" ref={this._mainCont}
-                style={{
-                    background: backgroundcolor,
-                    width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
-                    height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
-                    transformOrigin: "left top",
-                    transform: `scale(${scaling} , ${scaling})`
-                }}
-                onDrop={this.onDrop}
-                onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown} >
-                <DocumentContentsView {...this.props} isSelected={this.isSelected} select={this.select} layoutKey={KeyStore.Layout} />
-            </div >
-        )
+
+        if (this.isMinimized()) {
+            return (
+                <div
+                    className="minimized-box"
+                    ref={this._mainCont}
+                    style={{
+                        transformOrigin: "left top",
+                        transform: `scale(${scaling} , ${scaling})`
+                    }}
+                    onClick={this.expand}
+                    onDrop={this.onDrop}
+                    onPointerDown={this.onPointerDown}
+                />
+            );
+        } else {
+            var backgroundcolor = this.props.Document.GetText(
+                KeyStore.BackgroundColor,
+                ""
+            );
+            return (
+                <div
+                    className="documentView-node"
+                    ref={this._mainCont}
+                    style={{
+                        background: backgroundcolor,
+                        width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
+                        height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
+                        transformOrigin: "left top",
+                        transform: `scale(${scaling} , ${scaling})`
+                    }}
+                    onDrop={this.onDrop}
+                    onContextMenu={this.onContextMenu}
+                    onPointerDown={this.onPointerDown}
+                >
+                    <DocumentContentsView
+                        {...this.props}
+                        isSelected={this.isSelected}
+                        select={this.select}
+                        layoutKey={KeyStore.Layout}
+                    />
+                </div>
+            );
+        }
     }
-}
\ No newline at end of file
+}