From f9d241406c62b6aba1a84b5947d339c1a4c28a6d Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 30 Jan 2019 13:36:03 -0500
Subject: fixed dragging and doc decorations for all docking locations I think.

---
 src/views/nodes/DocumentView.tsx | 78 ++++++++++++++++++++++------------------
 1 file changed, 43 insertions(+), 35 deletions(-)

(limited to 'src/views/nodes/DocumentView.tsx')

diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 1e4cc1cca..3c4dfa36f 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -1,19 +1,20 @@
+import { action, computed } from "mobx";
 import { observer } from "mobx-react";
-import React = require("react");
-import { computed, observable, action } from "mobx";
-import { KeyStore, Key } from "../../fields/Key";
+import { Document } from "../../fields/Document";
+import { Opt } from "../../fields/Field";
+import { Key, KeyStore } from "../../fields/Key";
+import { ListField } from "../../fields/ListField";
 import { NumberField } from "../../fields/NumberField";
 import { TextField } from "../../fields/TextField";
-import { ListField } from "../../fields/ListField";
-import { FieldTextBox } from "../nodes/FieldTextBox"
-import { Document } from "../../fields/Document";
-import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"
-import { CollectionDockingView } from "../collections/CollectionDockingView"
-import "./NodeView.scss"
+import { DragManager } from "../../util/DragManager";
 import { SelectionManager } from "../../util/SelectionManager";
+import { Utils } from "../../Utils";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
 import { ContextMenu } from "../ContextMenu";
-import { Opt } from "../../fields/Field";
-import { DragManager } from "../../util/DragManager";
+import { FieldTextBox } from "../nodes/FieldTextBox";
+import "./NodeView.scss";
+import React = require("react");
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface DocumentViewProps {
@@ -28,13 +29,7 @@ export interface CollectionViewProps {
     ContainingDocumentView: Opt<DocumentView>;
 }
 
-// these properties are set via the render() method of the DocumentView when it creates this node.
-// However, these properties are set below in the LayoutString() static method
-export interface DocumentFieldViewProps {
-    fieldKey: Key;
-    doc: Document;
-    containingDocumentView: DocumentView
-}
+export const COLLECTION_BORDER_WIDTH = 2;
 
 interface CollectionView {
     addDocument: (doc: Document) => void;
@@ -169,20 +164,25 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     // Converts a coordinate in the screen space of the app into a local document coordinate.
     //
     public TransformToLocalPoint(screenX: number, screenY: number) {
-        let ContainerX = screenX - CollectionFreeFormView.BORDER_WIDTH;
-        let ContainerY = screenY - CollectionFreeFormView.BORDER_WIDTH;
-
         // if this collection view is nested within another collection view, then 
         // first transform the screen point into the parent collection's coordinate space.
-        if (this.props.ContainingDocumentView != undefined) {
-            let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(screenX, screenY);
-            ContainerX = LocalX - CollectionFreeFormView.BORDER_WIDTH;
-            ContainerY = LocalY - CollectionFreeFormView.BORDER_WIDTH;
+        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingDocumentView != undefined ?
+            this.props.ContainingDocumentView!.TransformToLocalPoint(screenX, screenY) :
+            { LocalX: screenX, LocalY: screenY };
+        let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
+        let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
+
+        var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+        var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
+        // They also ignore any transformation that may have been applied to their content document.
+        // NOTE: this currently assumes CollectionDockingViews aren't nested.
+        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
+            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this._mainCont.current!);
+            Xx = rx - COLLECTION_BORDER_WIDTH;
+            Yy = ry - COLLECTION_BORDER_WIDTH;
         }
 
-        let dockingViewChromeHack = this.props.ContainingCollectionView instanceof CollectionDockingView;
-        let Xx = dockingViewChromeHack ? 0 : this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
-        let Yy = dockingViewChromeHack ? CollectionDockingView.TAB_HEADER_HEIGHT : this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
         let Ss = this.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
         let Panxx = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         let Panyy = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
@@ -197,11 +197,19 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     //
     public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
 
-        let dockingViewChromeHack = this.props.ContainingCollectionView instanceof CollectionDockingView;
-        let W = CollectionFreeFormView.BORDER_WIDTH; // this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
-        let H = CollectionFreeFormView.BORDER_WIDTH;
-        let Xx = dockingViewChromeHack ? 0 : this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
-        let Yy = dockingViewChromeHack ? CollectionDockingView.TAB_HEADER_HEIGHT : this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+        var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+        var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
+        // They also ignore any transformation that may have been applied to their content document.
+        // NOTE: this currently assumes CollectionDockingViews aren't nested.
+        if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
+            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this._mainCont.current!);
+            Xx = rx - COLLECTION_BORDER_WIDTH;
+            Yy = ry - COLLECTION_BORDER_WIDTH;
+        }
+
+        let W = COLLECTION_BORDER_WIDTH;
+        let H = COLLECTION_BORDER_WIDTH;
         let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
         let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
 
@@ -210,8 +218,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         let containingDocView = this.props.ContainingDocumentView;
         if (containingDocView != undefined) {
             let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
-            let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + CollectionFreeFormView.BORDER_WIDTH * ss;
-            let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + CollectionFreeFormView.BORDER_WIDTH * ss;
+            let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
+            let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
             let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
             parentX = ScreenX;
             parentY = ScreenY;
-- 
cgit v1.2.3-70-g09d2


From 0493f7f18a3eb49d0443f1742d53bb214bf9dd70 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 30 Jan 2019 17:36:30 -0500
Subject: drag drop fixes for docking

---
 package-lock.json                                | 144 ++++++++++++++++++-----
 package.json                                     |   3 +-
 src/Main.tsx                                     |   4 +-
 src/util/DragManager.ts                          |   2 +
 src/views/collections/CollectionDockingView.scss |  25 ++--
 src/views/collections/CollectionDockingView.tsx  |  58 +++++++--
 src/views/collections/CollectionFreeFormView.tsx |   1 +
 src/views/nodes/DocumentView.tsx                 |   7 ++
 webpack.config.js                                |  11 ++
 9 files changed, 202 insertions(+), 53 deletions(-)

(limited to 'src/views/nodes/DocumentView.tsx')

diff --git a/package-lock.json b/package-lock.json
index 192a10f9e..de2300c03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -392,14 +392,12 @@
     "ajv-errors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
     },
     "ajv-keywords": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz",
-      "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=",
-      "dev": true
+      "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo="
     },
     "amdefine": {
       "version": "1.0.1",
@@ -711,8 +709,7 @@
     "big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
-      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
-      "dev": true
+      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
     },
     "binary-extensions": {
       "version": "1.12.0",
@@ -1540,23 +1537,55 @@
       }
     },
     "css-loader": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-2.0.1.tgz",
-      "integrity": "sha512-XIVwoIOzSFRVsafOKa060GJ/A70c0IP/C1oVPHEX4eHIFF39z0Jl7j8Kua1SUTiqWDupUnbY3/yQx9r7EUB35w==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-2.1.0.tgz",
+      "integrity": "sha512-MoOu+CStsGrSt5K2OeZ89q3Snf+IkxRfAIt9aAKg4piioTrhtP1iEFPu+OVn3Ohz24FO6L+rw9UJxBILiSBw5Q==",
       "dev": true,
       "requires": {
         "icss-utils": "4.0.0",
-        "loader-utils": "1.1.0",
+        "loader-utils": "1.2.3",
         "lodash": "4.17.11",
-        "postcss": "7.0.7",
+        "postcss": "7.0.14",
         "postcss-modules-extract-imports": "2.0.0",
-        "postcss-modules-local-by-default": "2.0.2",
+        "postcss-modules-local-by-default": "2.0.4",
         "postcss-modules-scope": "2.0.1",
         "postcss-modules-values": "2.0.0",
         "postcss-value-parser": "3.3.1",
         "schema-utils": "1.0.0"
       },
       "dependencies": {
+        "big.js": {
+          "version": "5.2.2",
+          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
+          "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==",
+          "dev": true,
+          "requires": {
+            "big.js": "5.2.2",
+            "emojis-list": "2.1.0",
+            "json5": "1.0.1"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "dev": true
+        },
         "schema-utils": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -1895,8 +1924,7 @@
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
-      "dev": true
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -3384,7 +3412,7 @@
       "integrity": "sha512-bA/xGiwWM17qjllIs9X/y0EjsB7e0AV08F3OL8UPsoNkNRibIuu8f1eKTnQ8QO1DteKKTxTUAn+IEWUToIwGOA==",
       "dev": true,
       "requires": {
-        "postcss": "7.0.7"
+        "postcss": "7.0.14"
       }
     },
     "ieee754": {
@@ -3773,8 +3801,7 @@
     "json5": {
       "version": "0.5.1",
       "resolved": "http://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
-      "dev": true
+      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
     },
     "jsprim": {
       "version": "1.4.1",
@@ -3837,7 +3864,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
       "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
-      "dev": true,
       "requires": {
         "big.js": "3.2.0",
         "emojis-list": "2.1.0",
@@ -7981,21 +8007,52 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.7.tgz",
-      "integrity": "sha512-HThWSJEPkupqew2fnuQMEI2YcTj/8gMV3n80cMdJsKxfIh5tHf7nM5JigNX6LxVMqo6zkgQNAI88hyFvBk41Pg==",
+      "version": "7.0.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
+      "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
       "dev": true,
       "requires": {
-        "chalk": "2.4.1",
+        "chalk": "2.4.2",
         "source-map": "0.6.1",
-        "supports-color": "5.5.0"
+        "supports-color": "6.1.0"
       },
       "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
         }
       }
     },
@@ -8005,17 +8062,17 @@
       "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==",
       "dev": true,
       "requires": {
-        "postcss": "7.0.7"
+        "postcss": "7.0.14"
       }
     },
     "postcss-modules-local-by-default": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.2.tgz",
-      "integrity": "sha512-qghHvHeydUBQ3EQic5NjYryZ5jzXzAYxHR7lZQlCNmjGpJtINRyX/ELnh/7fxBBmHNkEzNkq2l5cV6trfidYng==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.4.tgz",
+      "integrity": "sha512-WvuSaTKXUqYJbnT7R3YrsNrHv/C5vRfr5VglS4bFOk0MYT4CLBfc/xgExA+x2RftlYgiBDvWmVs191Xv8S8gZQ==",
       "dev": true,
       "requires": {
         "css-selector-tokenizer": "0.7.1",
-        "postcss": "7.0.7",
+        "postcss": "7.0.14",
         "postcss-value-parser": "3.3.1"
       }
     },
@@ -8026,7 +8083,7 @@
       "dev": true,
       "requires": {
         "css-selector-tokenizer": "0.7.1",
-        "postcss": "7.0.7"
+        "postcss": "7.0.14"
       }
     },
     "postcss-modules-values": {
@@ -8036,7 +8093,7 @@
       "dev": true,
       "requires": {
         "icss-replace-symbols": "1.1.0",
-        "postcss": "7.0.7"
+        "postcss": "7.0.14"
       }
     },
     "postcss-value-parser": {
@@ -9849,6 +9906,33 @@
         }
       }
     },
+    "url-loader": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.2.tgz",
+      "integrity": "sha512-dXHkKmw8FhPqu8asTc1puBfe3TehOCo2+RmOOev5suNCIYBcT626kxiWg1NBVkwc4rO8BGa7gP70W7VXuqHrjg==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "mime": "2.4.0",
+        "schema-utils": "1.0.0"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz",
+          "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w=="
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "requires": {
+            "ajv": "6.6.2",
+            "ajv-errors": "1.0.1",
+            "ajv-keywords": "3.2.0"
+          }
+        }
+      }
+    },
     "url-parse": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.4.tgz",
diff --git a/package.json b/package.json
index 3dfa158d8..8aa4c01c0 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "awesome-typescript-loader": "^5.2.1",
     "chai": "^4.2.0",
     "copy-webpack-plugin": "^4.6.0",
-    "css-loader": "^2.0.1",
+    "css-loader": "^2.1.0",
     "mocha": "^5.2.0",
     "sass-loader": "^7.1.0",
     "scss-loader": "0.0.1",
@@ -59,6 +59,7 @@
     "react-golden-layout": "^1.0.6",
     "react-jsx-parser": "^1.13.0",
     "react-mosaic": "0.0.20",
+    "url-loader": "^1.1.2",
     "uuid": "^3.3.2"
   }
 }
diff --git a/src/Main.tsx b/src/Main.tsx
index 73fc06941..2770ccff2 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -46,14 +46,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     doc2.SetField(KS.X, new NumberField(150));
     doc2.SetField(KS.Y, new NumberField(20));
     let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 450, y: 500
+        x: 450, y: 500, title: "cat 1"
     });
     let docset = new Array<Document>(doc1, doc2, doc3);
     let doc4 = Documents.CollectionDocument(docset, {
         x: 0, y: 400, title: "mini collection"
     });
     let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
-        x: 650, y: 500, width: 600, height: 600, title: "cat"
+        x: 650, y: 500, width: 600, height: 600, title: "cat 2"
     });
     let docset2 = new Array<Document>(doc4, doc1, doc3);
     let doc6 = Documents.CollectionDocument(docset2, {
diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
index ca5b6c0ea..5a854c76d 100644
--- a/src/util/DragManager.ts
+++ b/src/util/DragManager.ts
@@ -2,6 +2,8 @@ import { Opt } from "../fields/Field";
 import { DocumentView } from "../views/nodes/DocumentView";
 import { DocumentDecorations } from "../DocumentDecorations";
 import { SelectionManager } from "./SelectionManager";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { Document } from "../fields/Document";
 
 export namespace DragManager {
     export let rootId = "root";
diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss
index 43af7c538..249f837f7 100644
--- a/src/views/collections/CollectionDockingView.scss
+++ b/src/views/collections/CollectionDockingView.scss
@@ -5,9 +5,11 @@
     left: 0;
     overflow: hidden;
     .flexlayout__layout {
-        width: 100%;
-        height: 100%;
-        position: relative;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
         overflow:hidden;
     }
     
@@ -79,9 +81,10 @@
     
     .flexlayout__tab {
         overflow: auto;
-        position: absolute;
+        position:absolute;
         box-sizing: border-box;
         background-color: #222;
+        color:black;
     }
     
     .flexlayout__tab_button {
@@ -137,7 +140,7 @@
     
     .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
     .flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
-        //background: transparent url("../images/close_white.png") no-repeat center;
+        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
     
     .flexlayout__tab_button_overflow {
@@ -150,7 +153,7 @@
         font-size: 10px;
         color:lightgray;
         font-family: Arial, sans-serif;
-        //background: transparent url("../images/more.png") no-repeat left;
+        background: transparent url("../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
     }
     
     .flexlayout__tabset_header
@@ -185,12 +188,12 @@
     
     .flexlayout__tabset-selected
     {
-        //background-image: linear-gradient(#111, #444);
+        background-image: linear-gradient(#111, #444);
     }
     
     .flexlayout__tabset-maximized
     {
-        //background-image: linear-gradient(#666, #333);
+        background-image: linear-gradient(#666, #333);
     }
     
     .flexlayout__tab_toolbar {
@@ -208,7 +211,7 @@
         height:20px;
         border:none;
         outline-width: 0;
-        //background: transparent url("../images/maximize.png") no-repeat center;
+        background: transparent url("../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
     
     }
     .flexlayout__tab_toolbar_button-max {
@@ -216,7 +219,7 @@
         height:20px;
         border:none;
         outline-width: 0;
-        //background: transparent url("../images/restore.png") no-repeat center;
+        background: transparent url("../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
     }
     
     .flexlayout__popup_menu {
@@ -339,7 +342,7 @@
     
     .flexlayout__border_button:hover .flexlayout__border_button_trailing,
     .flexlayout__border_button--selected .flexlayout__border_button_trailing{
-        //background: transparent url("../images/close_white.png") no-repeat center;
+        background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
     
     
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index f08bdaab4..8fc8e879b 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -15,6 +15,7 @@ import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
 import * as GoldenLayout from "golden-layout";
 import * as ReactDOM from 'react-dom';
+import { DragManager } from "../../util/DragManager";
 
 @observer
 export class CollectionDockingView extends React.Component<CollectionViewProps> {
@@ -46,7 +47,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
             var d = { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
             return d;
         });
-        return new GoldenLayout({ content: [ { type: 'row', content: docs } ] });
+        return new GoldenLayout({
+            settings: {
+                selectionEnabled: true
+            }, content: [ { type: 'row', content: docs } ]
+        });
     }
     constructor(props: CollectionViewProps) {
         super(props);
@@ -114,10 +119,38 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         }
     }
 
+    public static myLayout: any = null;
+
+    private static _dragSource: any = null;
+    private static _dragDiv: any = null;
+    private static _dragParent: HTMLElement | null = null;
+    public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
+        var newItemConfig = {
+            type: 'component',
+            componentName: 'documentViewComponent',
+            componentState: { doc: dragDoc }
+        };
+        const root = document.getElementById(DragManager.rootId);
+        if (!this._dragDiv) {
+            if (!root) {
+                throw new Error("No root element found");
+            }
+            this._dragDiv = document.createElement("div");
+            this._dragSource = CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
+            root.appendChild(this._dragDiv);
+        }
+        // var r = dragElement.getBoundingClientRect();
+        // var x = root!.getBoundingClientRect();
+        //this._dragDiv.style.transform = `translate(${r.left - x.left}px, ${r.top - x.top}px)`;
+        this._dragSource._itemConfig = newItemConfig;
+        this._dragParent = dragElement.parentElement;
+        this._dragDiv.appendChild(dragElement);
+    }
     goldenLayoutFactory() {
-        var myLayout = this.modelForGoldenLayout;
+        CollectionDockingView.myLayout = this.modelForGoldenLayout;
 
-        myLayout.on('stackCreated', function (stack: any) {
+        CollectionDockingView.myLayout.on('stackCreated', function (stack: any) {
+            stack.header.controlsContainer.find('.lm_popout').hide();
             stack.header.controlsContainer.find('.lm_close') //get the close icon
                 .off('click') //unbind the current click handler
                 .click(function () {
@@ -127,7 +160,14 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
                 });
         });
 
-        myLayout.on('tabCreated', function (tab: any) {
+        CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
+            if (CollectionDockingView._dragDiv) {
+                for (var i = 0; i < CollectionDockingView._dragDiv.childElementCount; i++) {
+                    var child = CollectionDockingView._dragDiv.childNodes[ CollectionDockingView._dragDiv.childElementCount - i - 1 ];
+                    CollectionDockingView._dragDiv.removeChild(child);
+                    CollectionDockingView._dragParent!.appendChild(child);
+                }
+            }
             tab.setTitle(tab.contentItem.config.componentState.doc.Title);
             tab.closeElement.off('click') //unbind the current click handler
                 .click(function () {
@@ -138,7 +178,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         });
 
         var me = this;
-        myLayout.registerComponent('documentViewComponent', function (container: any, state: any) {
+        CollectionDockingView.myLayout.registerComponent('documentViewComponent', function (container: any, state: any) {
             // bcz: this is crufty
             // calling html() causes a div tag to be added in the DOM with id 'containingDiv'. 
             // Apparently, we need to wait to allow a live html div element to actually be instantiated.
@@ -150,11 +190,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
                     <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} ContainingDocumentView={me.props.ContainingDocumentView} />
                 ),
                     document.getElementById(containingDiv)
-                )
+                );
             }, 0);
         });
-        myLayout.container = this._containerRef.current;
-        myLayout.init();
+        CollectionDockingView.myLayout.container = this._containerRef.current;
+        CollectionDockingView.myLayout.init();
     }
 
 
@@ -176,7 +216,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
                 borderStyle: "solid",
                 borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
             }}>
-                <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                <div className="collectiondockingview-container" id="menuContainer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
                     style={{
                         width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH,
                         height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index 58e694698..b118f7ac8 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -181,6 +181,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
         const panx: number = Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         const pany: number = Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
         const currScale: number = Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+        console.log("DocsR " + value.length);
         return (
             <div className="border" style={{
                 borderStyle: "solid",
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 3c4dfa36f..657cd62c9 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -15,6 +15,7 @@ import { ContextMenu } from "../ContextMenu";
 import { FieldTextBox } from "../nodes/FieldTextBox";
 import "./NodeView.scss";
 import React = require("react");
+import { cpus } from "os";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface DocumentViewProps {
@@ -230,6 +231,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
+        var me = this;
+        if (e.shiftKey) {
+            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+            e.stopPropagation();
+            return;
+        }
         this._contextMenuCanOpen = e.button == 2;
         if (this.active && !e.isDefaultPrevented()) {
             e.stopPropagation();
diff --git a/webpack.config.js b/webpack.config.js
index ed678edc8..a30868b93 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -33,6 +33,17 @@ module.exports = {
           loader: "sass-loader"
         }
       ]
+    },
+    {
+      test: /\.(png|jpg|gif)$/i,
+      use: [
+        {
+          loader: 'url-loader',
+          options: {
+            limit: 8192
+          }
+        }
+      ]
     }]
   },
   plugins: [
-- 
cgit v1.2.3-70-g09d2


From e882783aeb3e425c339a15d80e602674261d2823 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 31 Jan 2019 11:51:01 -0500
Subject: just one more bug to fix with docking...

---
 src/util/DragManager.ts                         | 15 ++++----
 src/views/collections/CollectionDockingView.tsx | 46 ++++++++++++++-----------
 src/views/nodes/DocumentView.tsx                |  9 +++--
 3 files changed, 39 insertions(+), 31 deletions(-)

(limited to 'src/views/nodes/DocumentView.tsx')

diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
index 5a854c76d..a864a2bbe 100644
--- a/src/util/DragManager.ts
+++ b/src/util/DragManager.ts
@@ -6,7 +6,14 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie
 import { Document } from "../fields/Document";
 
 export namespace DragManager {
-    export let rootId = "root";
+    export function Root() {
+        const root = document.getElementById("root");
+        if (!root) {
+            throw new Error("No root element found");
+        }
+        return root;
+    }
+
     let dragDiv: HTMLDivElement;
 
     export enum DragButtons {
@@ -63,12 +70,8 @@ export namespace DragManager {
     let _lastPointerY: number = 0;
     export function StartDrag(ele: HTMLElement, dragData: { [ id: string ]: any }, options: DragOptions) {
         if (!dragDiv) {
-            const root = document.getElementById(rootId);
-            if (!root) {
-                throw new Error("No root element found");
-            }
             dragDiv = document.createElement("div");
-            root.appendChild(dragDiv);
+            DragManager.Root().appendChild(dragDiv);
         }
         const w = ele.offsetWidth, h = ele.offsetHeight;
         const rect = ele.getBoundingClientRect();
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index 8fc8e879b..b64e4179d 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -121,30 +121,36 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
 
     public static myLayout: any = null;
 
-    private static _dragSource: any = null;
     private static _dragDiv: any = null;
     private static _dragParent: HTMLElement | null = null;
+    private static _dragElement: HTMLDivElement;
+    private static _dragFakeElement: HTMLDivElement;
     public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
         var newItemConfig = {
             type: 'component',
             componentName: 'documentViewComponent',
             componentState: { doc: dragDoc }
         };
-        const root = document.getElementById(DragManager.rootId);
-        if (!this._dragDiv) {
-            if (!root) {
-                throw new Error("No root element found");
-            }
-            this._dragDiv = document.createElement("div");
-            this._dragSource = CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
-            root.appendChild(this._dragDiv);
-        }
-        // var r = dragElement.getBoundingClientRect();
-        // var x = root!.getBoundingClientRect();
-        //this._dragDiv.style.transform = `translate(${r.left - x.left}px, ${r.top - x.top}px)`;
-        this._dragSource._itemConfig = newItemConfig;
+        this._dragElement = dragElement;
         this._dragParent = dragElement.parentElement;
-        this._dragDiv.appendChild(dragElement);
+        // bcz: we want to copy this document into the header, not move it there.
+        //   However, GoldenLayout is setup to move things, so we have to do some kludgy stuff:
+
+        //   - create a temporary invisible div and register that as a DragSource with GoldenLayout
+        this._dragDiv = document.createElement("div");
+        this._dragDiv.style.opacity = 0;
+        DragManager.Root().appendChild(this._dragDiv);
+        CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
+
+        //   - add our document to that div so that GoldenLayout will get the move events its listening for
+        this._dragDiv.appendChild(this._dragElement);
+
+        //   - add a duplicate of our document to the original document's container 
+        //     (GoldenLayout will be removing our original one)
+        this._dragFakeElement = dragElement.cloneNode(true) as HTMLDivElement;
+        this._dragParent!.appendChild(this._dragFakeElement);
+
+        // all of this must be undone when the document has been dropped (see registerComponent())
     }
     goldenLayoutFactory() {
         CollectionDockingView.myLayout = this.modelForGoldenLayout;
@@ -162,11 +168,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
 
         CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
             if (CollectionDockingView._dragDiv) {
-                for (var i = 0; i < CollectionDockingView._dragDiv.childElementCount; i++) {
-                    var child = CollectionDockingView._dragDiv.childNodes[ CollectionDockingView._dragDiv.childElementCount - i - 1 ];
-                    CollectionDockingView._dragDiv.removeChild(child);
-                    CollectionDockingView._dragParent!.appendChild(child);
-                }
+                CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement);
+                CollectionDockingView._dragParent!.removeChild(CollectionDockingView._dragFakeElement);
+                CollectionDockingView._dragParent!.appendChild(CollectionDockingView._dragElement);
+                DragManager.Root().removeChild(CollectionDockingView._dragDiv);
+                CollectionDockingView._dragDiv = null;
             }
             tab.setTitle(tab.contentItem.config.componentState.doc.Title);
             tab.closeElement.off('click') //unbind the current click handler
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 657cd62c9..7e2635438 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -16,12 +16,13 @@ import { FieldTextBox } from "../nodes/FieldTextBox";
 import "./NodeView.scss";
 import React = require("react");
 import { cpus } from "os";
+import { relative } from "path";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface DocumentViewProps {
     Document: Document;
     ContainingCollectionView: Opt<CollectionView>;
-    ContainingDocumentView: Opt<DocumentView>
+    ContainingDocumentView: Opt<DocumentView>;
 }
 
 export interface CollectionViewProps {
@@ -75,10 +76,7 @@ class DocumentContents extends React.Component<DocumentViewProps> {
             showWarnings={true}
             onError={(test: any) => { console.log(test) }}
         />
-
-
     }
-
 }
 
 @observer
@@ -232,7 +230,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         this._downX = e.clientX;
         this._downY = e.clientY;
         var me = this;
-        if (e.shiftKey) {
+        if (e.shiftKey && e.buttons === 1) {
             CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
             e.stopPropagation();
             return;
@@ -320,6 +318,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                 transform: freestyling ? this.transform : "",
                 width: freestyling ? this.width : "100%",
                 height: freestyling ? this.height : "100%",
+                position: freestyling ? "absolute" : "relative",
             }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
-- 
cgit v1.2.3-70-g09d2


From 73bff98b9476df0ecc91af548d80b30f56967a8d Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 31 Jan 2019 13:19:39 -0500
Subject: working?

---
 src/Main.tsx                                    | 4 ++--
 src/views/collections/CollectionDockingView.tsx | 4 ++++
 src/views/nodes/DocumentView.tsx                | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

(limited to 'src/views/nodes/DocumentView.tsx')

diff --git a/src/Main.tsx b/src/Main.tsx
index 2770ccff2..56065b946 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -23,7 +23,7 @@ configure({
 
 const mainNodeCollection = new Array<Document>();
 let mainContainer = Documents.DockDocument(mainNodeCollection, {
-    x: 0, y: 0, width: window.screen.width, height: window.screen.height, title: "main container"
+    x: 0, y: 0, title: "main container"
 })
 
 window.addEventListener("drop", function (e) {
@@ -76,7 +76,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 //);
 
 ReactDOM.render((
-    <div style={{ display: "grid" }}>
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
         <DocumentView Document={mainContainer} ContainingCollectionView={undefined} ContainingDocumentView={undefined} />
         <DocumentDecorations />
         <ContextMenu />
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index b64e4179d..e1d36864f 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -16,6 +16,7 @@ import 'golden-layout/src/css/goldenlayout-dark-theme.css';
 import * as GoldenLayout from "golden-layout";
 import * as ReactDOM from 'react-dom';
 import { DragManager } from "../../util/DragManager";
+import { CollectionFreeFormView } from "./CollectionFreeFormView";
 
 @observer
 export class CollectionDockingView extends React.Component<CollectionViewProps> {
@@ -68,6 +69,9 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
     componentDidMount: () => void = () => {
         if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) {
             this.goldenLayoutFactory();
+            window.addEventListener('resize', function (event) {
+                CollectionDockingView.myLayout.updateSize(window.innerWidth, window.innerHeight);
+            });
         }
     }
     private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 7e2635438..5e72db492 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -312,7 +312,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
 
     render() {
-        var freestyling = this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView instanceof CollectionFreeFormView;
+        var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
             <div className="node" ref={this._mainCont} style={{
                 transform: freestyling ? this.transform : "",
-- 
cgit v1.2.3-70-g09d2


From 772af9c62ff6e96747c94190cae5f0b2a94d3485 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 31 Jan 2019 18:01:48 -0500
Subject: clean up

---
 src/views/collections/CollectionDockingView.scss | 14 +++++--
 src/views/collections/CollectionDockingView.tsx  | 47 ++++++++++++++----------
 src/views/nodes/DocumentView.tsx                 |  4 ++
 3 files changed, 43 insertions(+), 22 deletions(-)

(limited to 'src/views/nodes/DocumentView.tsx')

diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss
index 249f837f7..118662d89 100644
--- a/src/views/collections/CollectionDockingView.scss
+++ b/src/views/collections/CollectionDockingView.scss
@@ -4,6 +4,17 @@
     top: 0;
     left: 0;
     overflow: hidden;
+      
+    .lm_controls>li {
+        opacity: 0.6;
+        transform: scale(1.2);
+    }
+    .lm_maximised .lm_controls .lm_maximise {
+        opacity:1;
+        transform: scale(0.8);
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important;
+    }
+
     .flexlayout__layout {
         left: 0;
         top: 0;
@@ -110,12 +121,10 @@
     }
     
     .flexlayout__tab_button_leading {
-        float: left;
         display:inline-block;
     }
     
     .flexlayout__tab_button_content {
-        float: left;
         display:inline-block;
     }
     
@@ -130,7 +139,6 @@
     }
     
     .flexlayout__tab_button_trailing {
-        float: left;
         display:inline-block;
         margin-left:5px;
         margin-top:3px;
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index e1d36864f..8c822fba4 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -16,7 +16,6 @@ import 'golden-layout/src/css/goldenlayout-dark-theme.css';
 import * as GoldenLayout from "golden-layout";
 import * as ReactDOM from 'react-dom';
 import { DragManager } from "../../util/DragManager";
-import { CollectionFreeFormView } from "./CollectionFreeFormView";
 
 @observer
 export class CollectionDockingView extends React.Component<CollectionViewProps> {
@@ -69,11 +68,12 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
     componentDidMount: () => void = () => {
         if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) {
             this.goldenLayoutFactory();
-            window.addEventListener('resize', function (event) {
-                CollectionDockingView.myLayout.updateSize(window.innerWidth, window.innerHeight);
-            });
+            window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
         }
     }
+    componentWillUnmount: () => void = () => {
+        window.removeEventListener('resize', this.onResize);
+    }
     private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
 
     @action
@@ -94,6 +94,15 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
             ContextMenu.Instance.clearItems()
         }
     }
+
+    @action
+    onResize = (event: any) => {
+        var cur = this.props.ContainingDocumentView!.MainContent.current;
+
+        // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed
+        CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
+    }
+
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.button === 2 && this.active) {
@@ -154,22 +163,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         this._dragFakeElement = dragElement.cloneNode(true) as HTMLDivElement;
         this._dragParent!.appendChild(this._dragFakeElement);
 
-        // all of this must be undone when the document has been dropped (see registerComponent())
+        // all of this must be undone when the document has been dropped (see tabCreated)
     }
     goldenLayoutFactory() {
         CollectionDockingView.myLayout = this.modelForGoldenLayout;
 
-        CollectionDockingView.myLayout.on('stackCreated', function (stack: any) {
-            stack.header.controlsContainer.find('.lm_popout').hide();
-            stack.header.controlsContainer.find('.lm_close') //get the close icon
-                .off('click') //unbind the current click handler
-                .click(function () {
-                    if (confirm('really close this?')) {
-                        stack.remove();
-                    }
-                });
-        });
-
         CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
             if (CollectionDockingView._dragDiv) {
                 CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement);
@@ -181,9 +179,20 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
             tab.setTitle(tab.contentItem.config.componentState.doc.Title);
             tab.closeElement.off('click') //unbind the current click handler
                 .click(function () {
-                    if (confirm('really close this?')) {
-                        tab.contentItem.remove();
-                    }
+                    //if (confirm('really close this?')) {
+                    tab.contentItem.remove();
+                    //}
+                });
+        });
+
+        CollectionDockingView.myLayout.on('stackCreated', function (stack: any) {
+            stack.header.controlsContainer.find('.lm_popout').hide();
+            stack.header.controlsContainer.find('.lm_close') //get the close icon
+                .off('click') //unbind the current click handler
+                .click(function () {
+                    //if (confirm('really close this?')) {
+                    stack.remove();
+                    //}
                 });
         });
 
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 5e72db492..a3d7d550e 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -96,6 +96,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return new DOMRect();
     }
 
+    get MainContent() {
+        return this._mainCont;
+    }
+
     @computed
     get x(): number {
         return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
-- 
cgit v1.2.3-70-g09d2


From b2c95923e631bc4acae8bb3d10913704d8ec9939 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 31 Jan 2019 19:37:49 -0500
Subject: added full screen toggle

---
 src/views/collections/CollectionDockingView.tsx  | 25 ++++++++++++++++++++++
 src/views/collections/CollectionFreeFormView.tsx |  2 --
 src/views/nodes/DocumentView.tsx                 | 27 ++++++++++++++++++++++--
 3 files changed, 50 insertions(+), 4 deletions(-)

(limited to 'src/views/nodes/DocumentView.tsx')

diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index 8c822fba4..d4965645c 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -165,6 +165,24 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
 
         // all of this must be undone when the document has been dropped (see tabCreated)
     }
+
+    _makeFullScreen: boolean = false;
+    _maximizedStack: any = null;
+    public static OpenFullScreen(dv: DocumentView) {
+        var newItemConfig = {
+            type: 'component',
+            componentName: 'documentViewComponent',
+            componentState: { doc: dv.props.Document }
+        };
+        CollectionDockingView.myLayout._makeFullScreen = true;
+        CollectionDockingView.myLayout.root.contentItems[ 0 ].addChild(newItemConfig);
+    }
+    public static CloseFullScreen() {
+        if (CollectionDockingView.myLayout._maximizedStack != null) {
+            CollectionDockingView.myLayout._maximizedStack.header.controlsContainer.find('.lm_close').click();
+            CollectionDockingView.myLayout._maximizedStack = null;
+        }
+    }
     goldenLayoutFactory() {
         CollectionDockingView.myLayout = this.modelForGoldenLayout;
 
@@ -186,6 +204,10 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         });
 
         CollectionDockingView.myLayout.on('stackCreated', function (stack: any) {
+            if (CollectionDockingView.myLayout._makeFullScreen) {
+                CollectionDockingView.myLayout._maximizedStack = stack;
+                CollectionDockingView.myLayout._maxstack = stack.header.controlsContainer.find('.lm_maximise');
+            }
             stack.header.controlsContainer.find('.lm_popout').hide();
             stack.header.controlsContainer.find('.lm_close') //get the close icon
                 .off('click') //unbind the current click handler
@@ -210,6 +232,9 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
                 ),
                     document.getElementById(containingDiv)
                 );
+                if (CollectionDockingView.myLayout._maxstack != null) {
+                    CollectionDockingView.myLayout._maxstack.click();
+                }
             }, 0);
         });
         CollectionDockingView.myLayout.container = this._containerRef.current;
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index b118f7ac8..39a8fc44f 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -70,8 +70,6 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.button === 2 && this.active) {
-            e.stopPropagation();
-            e.preventDefault();
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index a3d7d550e..147727a67 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -253,7 +253,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     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.props.ContainingCollectionView != null) {
                 this._contextMenuCanOpen = false;
                 const rect = this.screenRect;
@@ -287,6 +292,20 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             this.props.ContainingCollectionView.removeDocument(this.props.Document)
         }
     }
+    @action
+    fullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.OpenFullScreen(this);
+        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 => {
@@ -299,17 +318,21 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             return;
         }
 
-        var topMost = this.props.ContainingCollectionView == undefined;
+        var topMost = this.props.ContainingCollectionView == undefined ||
+            this.props.ContainingCollectionView instanceof CollectionDockingView;
         if (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: "Delete", event: this.deleteClicked })
-            ContextMenu.Instance.displayMenu(e.pageX, e.pageY)
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
     }
-- 
cgit v1.2.3-70-g09d2

