From a13c0bacfb58970b3316c75b18582ad24cf8bee4 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Sat, 9 Mar 2019 15:58:58 -0500
Subject: merge

---
 src/client/views/ContextMenu.scss | 4 ++--
 src/client/views/ContextMenu.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 2ac5d3b52..47a4e38ab 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -7,8 +7,8 @@
 }
 
 .contextMenu-item {
-    width: 10vw;
-    height: 4vh;
+    width: 10vw; //10vw
+    height: auto; //4vh
     background: #DDDDDD;
     display: flex;
     justify-content: center;
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 2359c673d..d4be0dea8 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,7 +1,7 @@
 import React = require("react");
 import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem";
 import { observable, action } from "mobx";
-import { observer } from "mobx-react";
+import { observer } from "mobx-react"
 import "./ContextMenu.scss"
 
 @observer
-- 
cgit v1.2.3-70-g09d2


From d2745992e5a4df1c92c8cb2edfb9829b7a1cc420 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Sat, 9 Mar 2019 16:07:24 -0500
Subject: idk

---
 src/client/views/ContextMenu.scss | 6 ------
 1 file changed, 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 89351c76c..a83572279 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -7,15 +7,9 @@
 }
 
 .contextMenu-item {
-<<<<<<< HEAD
     width: 10vw; //10vw
     height: auto; //4vh
     background: #DDDDDD;
-=======
-    width: auto;
-    height: auto;
-    background: #F0F8FF;
->>>>>>> 09928503be98d605052fba65dcd2f91f9b056f23
     display: flex;
     justify-content: left;
     align-items: center;
-- 
cgit v1.2.3-70-g09d2


From 1f038048612e01d0ada6deb9ff2a056cb8d13702 Mon Sep 17 00:00:00 2001
From: Eleanor Eng <eleanor_eng@brown.edu>
Date: Mon, 11 Mar 2019 17:32:49 -0400
Subject: some changes

---
 src/client/views/ContextMenu.scss           |  13 ++-
 src/client/views/ContextMenu.tsx            |   5 +-
 src/client/views/ContextMenuItem.tsx        |  42 +++++--
 src/client/views/nodes/FormattedTextBox.tsx |  23 ++--
 src/server/index.ts                         | 172 ++++++++++++++++++++--------
 5 files changed, 180 insertions(+), 75 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index ea40c8e99..82e736520 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -6,9 +6,18 @@
     flex-direction: column;
 }
 
+.subMenu-cont {
+    position: relative;
+    display: flex;
+    z-index: 1000;
+    box-shadow: #AAAAAA .2vw .2vw .4vw;
+    flex-direction: column;
+    left: 100%; //should make this appear 100% to the right of the parent element (the original context menu)
+}
+
 .contextMenu-item {
-    width: auto;
-    height: auto;
+    width: 10vw; //auto
+    height: 2vh; //auto
     background: #F0F8FF;
     display: flex;
     justify-content: left;
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index fcb934860..8a8403c62 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -9,6 +9,7 @@ export class ContextMenu extends React.Component {
     static Instance: ContextMenu
 
     @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }];
+    //need to add a subitems component?
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _display: string = "none";
@@ -80,4 +81,6 @@ export class ContextMenu extends React.Component {
     onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this._searchString = e.target.value;
     }
-}
\ No newline at end of file
+}
+
+//<input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
\ No newline at end of file
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 723606dcf..3319b62db 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,26 +1,46 @@
 import React = require("react");
-import { ContextMenu } from "./ContextMenu";
+import { observable, action } from "mobx";
 
-export interface ContextMenuProps {
+export interface OriginalMenuProps {
     description: string;
     event: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 export interface SubmenuProps {
     description: string;
-    subitems: ContextMenuProps[];
+    subitems: OriginalMenuProps[];
 }
 
-export interface ContextMenuItemProps {
-    type: ContextMenuProps | SubmenuProps
-}
+export type ContextMenuProps = OriginalMenuProps | SubmenuProps;
 
 export class ContextMenuItem extends React.Component<ContextMenuProps> {
+    @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }];
+    @observable private _pageX: number = 0;
+    @observable private _pageY: number = 0;
+    @observable private _display: string = "none";
+    @observable private overItem = false;
+
     render() {
-        return (
-            <div className="contextMenu-item" onClick={this.props.event}>
-                <div className="contextMenu-description">{this.props.description}</div>
-            </div>
-        )
+        if ("event" in this.props) {
+            return (
+                <div className="contextMenu-item" onClick={this.props.event}>
+                    <div className="contextMenu-description"> {this.props.description}</div>
+                </div>)
+        }
+        else {
+            let submenu = null;
+            if (this.overItem) {
+                submenu = (<div className="subMenu-cont" style={{ left: this._pageX, marginLeft: "100%", top: this._pageY, display: this._display }}>
+                    {this._items.map(prop => {
+                        return <ContextMenuItem {...prop} key={prop.description} />
+                    })}
+                </div>)
+            }
+            return (
+                <div className="contextMenu-item" onMouseEnter={action(() => this.overItem = true)} onMouseLeave={action(() => this.overItem = false)}>
+                    <div className="contextMenu-description"> {this.props.description}</div>
+                    {submenu}
+                </div>)
+        }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8b3deeb8b..baedf0852 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -119,17 +119,18 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
 
     specificContextMenu = (e: React.MouseEvent): void => {
         ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability });
-        // ContextMenu.Instance.addItem({
-        //     description: "Submenu",
-        //     items: [
-        //         {
-        //             description: "item 1", event:
-        //     },
-        //         {
-        //             description: "item 2", event:
-        //     }
-        //     ]
-        // })
+        ContextMenu.Instance.addItem({
+            description: "Submenu", subitems:
+                [{ description: "Sub 1", event: this.textCapability }]
+            // [{ description: "Sub 2", event: this.textCapability }]
+            //         {
+            //             description: "item 1", event:
+            //     },
+            //         {
+            //             description: "item 2", event:
+            //     }
+            //     ]
+        })
         // e.stopPropagation()
 
     }
diff --git a/src/server/index.ts b/src/server/index.ts
index 84acb72cb..7850fd1d8 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -1,23 +1,75 @@
-import * as express from 'express'
-const app = express()
-import * as webpack from 'webpack'
+import * as express from 'express';
+const app = express();
+import * as webpack from 'webpack';
 import * as wdm from 'webpack-dev-middleware';
 import * as whm from 'webpack-hot-middleware';
-import * as path from 'path'
+import * as path from 'path';
 import * as passport from 'passport';
-import { MessageStore, Message, SetFieldArgs, GetFieldArgs, Transferable } from "./Message";
-import { Client } from './Client';
-import { Socket } from 'socket.io';
-import { Utils } from '../Utils';
-import { ObservableMap } from 'mobx';
-import { FieldId, Field } from '../fields/Field';
-import { Database } from './database';
-import { ServerUtils } from './ServerUtil';
-import { ObjectID } from 'mongodb';
-import { Document } from '../fields/Document';
-import * as io from 'socket.io'
+import {
+    MessageStore,
+    Message,
+    SetFieldArgs,
+    GetFieldArgs,
+    Transferable
+}
+
+    from "./Message";
+import {
+    Client
+}
+
+    from './Client';
+import {
+    Socket
+}
+
+    from 'socket.io';
+import {
+    Utils
+}
+
+    from '../Utils';
+import {
+    ObservableMap
+}
+
+    from 'mobx';
+import {
+    FieldId,
+    Field
+}
+
+    from '../fields/Field';
+import {
+    Database
+}
+
+    from './database';
+import {
+    ServerUtils
+}
+
+    from './ServerUtil';
+import {
+    ObjectID
+}
+
+    from 'mongodb';
+import {
+    Document
+}
+
+    from '../fields/Document';
+import * as io from 'socket.io';
 import * as passportConfig from './authentication/config/passport';
-import { getLogin, postLogin, getSignup, postSignup } from './authentication/controllers/user';
+import {
+    getLogin,
+    postLogin,
+    getSignup,
+    postSignup
+}
+
+    from './authentication/controllers/user';
 const config = require('../../webpack.config');
 const compiler = webpack(config);
 const port = 1050; // default port to listen
@@ -30,17 +82,20 @@ import c = require("crypto");
 const MongoStore = require('connect-mongo')(session);
 const mongoose = require('mongoose');
 const bluebird = require('bluebird');
-import { performance } from 'perf_hooks'
-import * as fs from 'fs';
-import * as request from 'request'
+import {
+    performance
+}
 
+    from 'perf_hooks';
+import * as fs from 'fs';
+import * as request from 'request';
 const download = (url: string, dest: fs.PathLike) => {
     request.get(url).pipe(fs.createWriteStream(dest));
 }
 
 const mongoUrl = 'mongodb://localhost:27017/Dash';
 // mongoose.Promise = bluebird;
-mongoose.connect(mongoUrl)//.then(
+mongoose.connect(mongoUrl) //.then(
 // () => { /** ready to use. The `mongoose.connect()` promise resolves to undefined. */ },
 // ).catch((err: any) => {
 // console.log("MongoDB connection error. Please make sure MongoDB is running. " + err);
@@ -48,77 +103,88 @@ mongoose.connect(mongoUrl)//.then(
 // });
 mongoose.connection.on('connected', function () {
     console.log("connected");
-})
+}
 
+);
 app.use(bodyParser.json());
-app.use(bodyParser.urlencoded({ extended: true }));
+app.use(bodyParser.urlencoded({
+    extended: true
+}
+
+));
 app.use(expressValidator());
 app.use(expressFlash());
 app.use(require('express-session')({
-    secret: `${c.randomBytes(64)}`,
-    resave: true,
-    saveUninitialized: true,
-    store: new MongoStore({
+    secret: `$ {
+        c.randomBytes(64)
+    }
+    `, resave: true, saveUninitialized: true, store: new MongoStore({
         url: 'mongodb://localhost:27017/Dash'
-    })
-}));
+    }
+    )
+}
+
+));
 app.use(passport.initialize());
 app.use(passport.session());
 app.use((req, res, next) => {
     res.locals.user = req.user;
     next();
-});
+}
 
+);
 app.get("/signup", getSignup);
 app.post("/signup", postSignup);
 app.get("/login", getLogin);
 app.post("/login", postLogin);
-
-let FieldStore: ObservableMap<FieldId, Field> = new ObservableMap();
-
+let FieldStore: ObservableMap<FieldId,
+    Field> = new ObservableMap();
 // define a route handler for the default home page
 app.get("/", (req, res) => {
     res.sendFile(path.join(__dirname, '../../deploy/index.html'));
-});
+}
 
+);
 app.get("/hello", (req, res) => {
     res.send("<p>Hello</p>");
-})
+}
 
+);
 app.get("/delete", (req, res) => {
     deleteAll();
     res.redirect("/");
-});
+}
 
+);
 app.use(wdm(compiler, {
     publicPath: config.output.publicPath
-}))
-
-app.use(whm(compiler))
+}
 
-// start the Express server
+))
+app.use(whm(compiler)) // start the Express server
 app.listen(port, () => {
-    console.log(`server started at http://localhost:${port}`);
-})
+    console.log(`server started at http: //localhost:${port}`);
+}
 
+)
 const server = io();
 interface Map {
     [key: string]: Client;
 }
+
 let clients: Map = {}
 
 server.on("connection", function (socket: Socket) {
     console.log("a user has connected")
-
     Utils.Emit(socket, MessageStore.Foo, "handshooken")
-
     Utils.AddServerHandler(socket, MessageStore.Bar, barReceived)
     Utils.AddServerHandler(socket, MessageStore.SetField, (args) => setField(socket, args))
     Utils.AddServerHandlerCallback(socket, MessageStore.GetField, getField)
     Utils.AddServerHandlerCallback(socket, MessageStore.GetFields, getFields)
     Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteAll)
-})
+}
 
+)
 function deleteAll() {
     Database.Instance.deleteAll();
 }
@@ -127,9 +193,7 @@ function barReceived(guid: String) {
     clients[guid.toString()] = new Client(guid.toString());
 }
 
-function addDocument(document: Document) {
-
-}
+function addDocument(document: Document) { }
 
 function getField([id, callback]: [string, (result: any) => void]) {
     Database.Instance.getDocument(id, (result: any) => {
@@ -139,7 +203,8 @@ function getField([id, callback]: [string, (result: any) => void]) {
         else {
             callback(undefined)
         }
-    })
+    }
+    )
 }
 
 function getFields([ids, callback]: [string[], (result: any) => void]) {
@@ -147,11 +212,18 @@ function getFields([ids, callback]: [string[], (result: any) => void]) {
 }
 
 function setField(socket: Socket, newValue: Transferable) {
-    let val = { ...newValue };
+    let val = {
+        ...newValue
+    }
+        ;
     delete val._id;
     Database.Instance.update(newValue._id, val)
     socket.broadcast.emit(MessageStore.SetField.Message, newValue)
 }
 
 server.listen(serverPort);
-console.log(`listening on port ${serverPort}`);
\ No newline at end of file
+console.log(`listening on port $ {
+    serverPort
+}
+
+`);
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 9351426356e06a5c6a7777b1edd118273e29072e Mon Sep 17 00:00:00 2001
From: Eleanor Eng <eleanor_eng@brown.edu>
Date: Tue, 12 Mar 2019 17:45:57 -0400
Subject: working submenu; dimensions use vw, vh

---
 package-lock.json                           | 236 +++++++++++++++-------------
 src/client/views/ContextMenu.scss           |   1 -
 src/client/views/ContextMenu.tsx            |   6 +-
 src/client/views/nodes/FormattedTextBox.tsx |  21 +--
 4 files changed, 140 insertions(+), 124 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 75c02628e..8c9bf9c0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1138,7 +1138,7 @@
         },
         "util": {
           "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
           "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
           "dev": true,
           "requires": {
@@ -1655,7 +1655,7 @@
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
       "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "dev": true,
       "requires": {
@@ -1692,7 +1692,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -1731,7 +1731,7 @@
     },
     "buffer": {
       "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+      "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "dev": true,
       "requires": {
@@ -1852,7 +1852,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "requires": {
         "camelcase": "^2.0.0",
@@ -2282,7 +2282,7 @@
     },
     "content-disposition": {
       "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "resolved": "http://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
       "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
     },
     "content-type": {
@@ -2401,7 +2401,7 @@
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
       "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "dev": true,
       "requires": {
@@ -2414,7 +2414,7 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
       "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "dev": true,
       "requires": {
@@ -2540,7 +2540,7 @@
     },
     "d": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz",
       "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
       "dev": true,
       "requires": {
@@ -2763,7 +2763,7 @@
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
       "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "dev": true,
       "requires": {
@@ -3306,7 +3306,7 @@
       "dependencies": {
         "array-flatten": {
           "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "resolved": "http://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
           "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
         },
         "statuses": {
@@ -3500,7 +3500,7 @@
     },
     "finalhandler": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
       "requires": {
         "debug": "2.6.9",
@@ -3574,14 +3574,18 @@
       },
       "dependencies": {
         "readable-stream": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
-          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
+          "version": "2.3.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
           }
         }
       }
@@ -3703,24 +3707,24 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "resolved": false,
           "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "resolved": false,
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "aproba": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "resolved": false,
           "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.5",
-          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+          "resolved": false,
           "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
           "optional": true,
           "requires": {
@@ -3730,12 +3734,12 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+          "resolved": false,
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "requires": {
             "balanced-match": "^1.0.0",
@@ -3744,34 +3748,34 @@
         },
         "chownr": {
           "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
+          "resolved": false,
           "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "resolved": false,
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
         },
         "concat-map": {
           "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "resolved": false,
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "resolved": false,
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
         },
         "core-util-is": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "resolved": false,
           "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "resolved": false,
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "optional": true,
           "requires": {
@@ -3780,25 +3784,25 @@
         },
         "deep-extend": {
           "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+          "resolved": false,
           "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
           "optional": true
         },
         "delegates": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "resolved": false,
           "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "resolved": false,
           "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+          "resolved": false,
           "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "optional": true,
           "requires": {
@@ -3807,13 +3811,13 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "resolved": false,
           "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "resolved": false,
           "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "optional": true,
           "requires": {
@@ -3829,7 +3833,7 @@
         },
         "glob": {
           "version": "7.1.3",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "resolved": false,
           "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
           "optional": true,
           "requires": {
@@ -3843,13 +3847,13 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "resolved": false,
           "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.24",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "resolved": false,
           "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
           "optional": true,
           "requires": {
@@ -3858,7 +3862,7 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+          "resolved": false,
           "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "optional": true,
           "requires": {
@@ -3867,7 +3871,7 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "resolved": false,
           "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "optional": true,
           "requires": {
@@ -3877,18 +3881,18 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "resolved": false,
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
         },
         "ini": {
           "version": "1.3.5",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "resolved": false,
           "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "requires": {
             "number-is-nan": "^1.0.0"
@@ -3896,13 +3900,13 @@
         },
         "isarray": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "resolved": false,
           "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "requires": {
             "brace-expansion": "^1.1.7"
@@ -3910,12 +3914,12 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": false,
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         },
         "minipass": {
           "version": "2.3.5",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
+          "resolved": false,
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "requires": {
             "safe-buffer": "^5.1.2",
@@ -3924,7 +3928,7 @@
         },
         "minizlib": {
           "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
+          "resolved": false,
           "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
           "optional": true,
           "requires": {
@@ -3933,7 +3937,7 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "requires": {
             "minimist": "0.0.8"
@@ -3941,13 +3945,13 @@
         },
         "ms": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "resolved": false,
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "optional": true
         },
         "needle": {
           "version": "2.2.4",
-          "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.4.tgz",
+          "resolved": false,
           "integrity": "sha512-HyoqEb4wr/rsoaIDfTH2aVL9nWtQqba2/HvMv+++m8u0dz808MaagKILxtfeSN7QU7nvbQ79zk3vYOJp9zsNEA==",
           "optional": true,
           "requires": {
@@ -3958,7 +3962,7 @@
         },
         "node-pre-gyp": {
           "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz",
+          "resolved": false,
           "integrity": "sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==",
           "optional": true,
           "requires": {
@@ -3976,7 +3980,7 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "resolved": false,
           "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "optional": true,
           "requires": {
@@ -3986,13 +3990,13 @@
         },
         "npm-bundled": {
           "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.5.tgz",
+          "resolved": false,
           "integrity": "sha512-m/e6jgWu8/v5niCUKQi9qQl8QdeEduFA96xHDDzFGqly0OOjI7c+60KM/2sppfnUU9JJagf+zs+yGhqSOFj71g==",
           "optional": true
         },
         "npm-packlist": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.2.0.tgz",
+          "resolved": false,
           "integrity": "sha512-7Mni4Z8Xkx0/oegoqlcao/JpPCPEMtUvsmB0q7mgvlMinykJLSRTYuFqoQLYgGY8biuxIeiHO+QNJKbCfljewQ==",
           "optional": true,
           "requires": {
@@ -4002,7 +4006,7 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "resolved": false,
           "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "optional": true,
           "requires": {
@@ -4014,18 +4018,18 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "resolved": false,
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
         },
         "object-assign": {
           "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "resolved": false,
           "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "requires": {
             "wrappy": "1"
@@ -4033,19 +4037,19 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "resolved": false,
           "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "resolved": false,
           "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "resolved": false,
           "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "optional": true,
           "requires": {
@@ -4055,19 +4059,19 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "resolved": false,
           "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "resolved": false,
           "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "optional": true
         },
         "rc": {
           "version": "1.2.8",
-          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+          "resolved": false,
           "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
           "optional": true,
           "requires": {
@@ -4079,7 +4083,7 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "resolved": false,
               "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "optional": true
             }
@@ -4087,7 +4091,7 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "resolved": false,
           "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "optional": true,
           "requires": {
@@ -4102,7 +4106,7 @@
         },
         "rimraf": {
           "version": "2.6.3",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "resolved": false,
           "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
           "optional": true,
           "requires": {
@@ -4111,42 +4115,42 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "resolved": false,
           "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "resolved": false,
           "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "resolved": false,
           "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "optional": true
         },
         "semver": {
           "version": "5.6.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+          "resolved": false,
           "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==",
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "resolved": false,
           "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "resolved": false,
           "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
@@ -4156,7 +4160,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": false,
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "optional": true,
           "requires": {
@@ -4165,7 +4169,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "requires": {
             "ansi-regex": "^2.0.0"
@@ -4173,13 +4177,13 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "resolved": false,
           "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "optional": true
         },
         "tar": {
           "version": "4.4.8",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz",
+          "resolved": false,
           "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
           "optional": true,
           "requires": {
@@ -4194,13 +4198,13 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "resolved": false,
           "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "optional": true
         },
         "wide-align": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+          "resolved": false,
           "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
           "optional": true,
           "requires": {
@@ -4209,12 +4213,12 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "resolved": false,
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
         },
         "yallist": {
           "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
+          "resolved": false,
           "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
         }
       }
@@ -4640,7 +4644,7 @@
     },
     "http-errors": {
       "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
       "requires": {
         "depd": "~1.1.2",
@@ -4943,7 +4947,7 @@
     },
     "is-accessor-descriptor": {
       "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
       "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
       "requires": {
         "kind-of": "^3.0.2"
@@ -4987,7 +4991,7 @@
     },
     "is-data-descriptor": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
       "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
       "requires": {
         "kind-of": "^3.0.2"
@@ -5466,7 +5470,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "requires": {
         "graceful-fs": "^4.1.2",
@@ -5767,7 +5771,7 @@
     },
     "media-typer": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
     "mem": {
@@ -5799,7 +5803,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "requires": {
         "camelcase-keys": "^2.0.0",
@@ -5965,7 +5969,7 @@
     },
     "mkdirp": {
       "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "requires": {
         "minimist": "0.0.8"
@@ -6243,7 +6247,7 @@
     },
     "next-tick": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
@@ -6302,7 +6306,7 @@
         },
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
         },
         "tar": {
@@ -9685,12 +9689,12 @@
     },
     "os-homedir": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
     },
     "os-tmpdir": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
     "osenv": {
@@ -9856,7 +9860,7 @@
     },
     "path-browserify": {
       "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
       "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=",
       "dev": true
     },
@@ -9875,7 +9879,7 @@
     },
     "path-is-absolute": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-is-inside": {
@@ -10888,7 +10892,7 @@
     },
     "readable-stream": {
       "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+      "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
       "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
       "requires": {
         "core-util-is": "~1.0.0",
@@ -11149,7 +11153,7 @@
     },
     "safe-regex": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
       "requires": {
         "ret": "~0.1.10"
@@ -11371,7 +11375,7 @@
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
       "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "dev": true,
       "requires": {
@@ -11929,11 +11933,31 @@
       "requires": {
         "is-fullwidth-code-point": "^2.0.0",
         "strip-ansi": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
       }
     },
     "string_decoder": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "requires": {
         "safe-buffer": "~5.1.0"
@@ -11941,7 +11965,7 @@
     },
     "strip-ansi": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
       "requires": {
         "ansi-regex": "^2.0.0"
@@ -11957,7 +11981,7 @@
     },
     "strip-eof": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
     },
     "strip-indent": {
@@ -12393,7 +12417,7 @@
     },
     "tty-browserify": {
       "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
       "dev": true
     },
@@ -12798,7 +12822,7 @@
     },
     "vm-browserify": {
       "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
+      "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz",
       "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=",
       "dev": true,
       "requires": {
@@ -13587,7 +13611,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "requires": {
         "string-width": "^1.0.1",
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 82e736520..bfd643caf 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -12,7 +12,6 @@
     z-index: 1000;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
     flex-direction: column;
-    left: 100%; //should make this appear 100% to the right of the parent element (the original context menu)
 }
 
 .contextMenu-item {
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 8a8403c62..ce9023352 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -9,7 +9,6 @@ export class ContextMenu extends React.Component {
     static Instance: ContextMenu
 
     @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }];
-    //need to add a subitems component?
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _display: string = "none";
@@ -37,6 +36,7 @@ export class ContextMenu extends React.Component {
         if (this._items.indexOf(item) === -1) {
             this._items.push(item);
         }
+        console.log(`After adding, there are ${this._items.length} items`);
     }
 
     getItems() {
@@ -81,6 +81,4 @@ export class ContextMenu extends React.Component {
     onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this._searchString = e.target.value;
     }
-}
-
-//<input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 411b43cd5..dfc7e9096 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -122,22 +122,17 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     textCapability = (e: React.MouseEvent): void => {
     }
 
+    @action
     specificContextMenu = (e: React.MouseEvent): void => {
         ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability });
         ContextMenu.Instance.addItem({
-            description: "Submenu", subitems:
-                [{ description: "Sub 1", event: this.textCapability }]
-            // [{ description: "Sub 2", event: this.textCapability }]
-            //         {
-            //             description: "item 1", event:
-            //     },
-            //         {
-            //             description: "item 2", event:
-            //     }
-            //     ]
-        })
-        // e.stopPropagation()
-
+            description: "Submenu", subitems: [
+                { description: "Subitem 1", event: this.textCapability },
+                { description: "Subitem 2", event: this.textCapability },
+                { description: "Subitem 3", event: this.textCapability },
+                { description: "Submenu", subitems: [{ description: "Inner Subitem", event: this.textCapability }] }
+            ]
+        });
     }
 
     onPointerWheel = (e: React.WheelEvent): void => {
-- 
cgit v1.2.3-70-g09d2


From 02f0311a868decd92af53d1ffbb6f03bdaa912db Mon Sep 17 00:00:00 2001
From: Eleanor Eng <eleanor_eng@brown.edu>
Date: Sat, 16 Mar 2019 16:53:46 -0400
Subject: submenus overlapping

---
 src/client/views/ContextMenu.scss           |  2 +-
 src/client/views/ContextMenu.tsx            | 11 ++++++++++-
 src/client/views/ContextMenuItem.tsx        |  2 +-
 src/client/views/nodes/FormattedTextBox.tsx |  2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index bcf856d48..265cdefca 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -16,7 +16,7 @@
 
 .contextMenu-item {
     width: 10vw; //10vw
-    height: auto; //4vh
+    height: 2vh;
     background: #DDDDDD;
     display: flex;
     justify-content: left;
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 31c165373..73bad477b 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -3,6 +3,11 @@ import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react"
 import "./ContextMenu.scss"
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+
+library.add(faSearch);
 
 @observer
 export class ContextMenu extends React.Component {
@@ -67,7 +72,11 @@ export class ContextMenu extends React.Component {
     render() {
         return (
             <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
-                <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
+                <div>
+                    <i className="fa fa-search"> </i>
+                    {/* <FontAwesomeIcon icon="search" size="sm" /> */}
+                    <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
+                </div>
                 {this._items.filter(prop => {
                     return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
                 }).map(prop => {
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 67bbc3082..6bd370152 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -38,7 +38,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> {
         else {
             let submenu = null;
             if (this.overItem) {
-                submenu = (<div className="subMenu-cont" style={{ left: this._pageX, top: this._pageY, marginLeft: "47.5%" }}>
+                submenu = (<div className="subMenu-cont" style={{ top: this._pageY, marginLeft: "0" }}>
                     {this._items.map(prop => {
                         return <ContextMenuItem {...prop} key={prop.description} />
                     })}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index dfc7e9096..e402392a7 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -126,7 +126,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     specificContextMenu = (e: React.MouseEvent): void => {
         ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability });
         ContextMenu.Instance.addItem({
-            description: "Submenu", subitems: [
+            description: "Sub", subitems: [
                 { description: "Subitem 1", event: this.textCapability },
                 { description: "Subitem 2", event: this.textCapability },
                 { description: "Subitem 3", event: this.textCapability },
-- 
cgit v1.2.3-70-g09d2


From e1574e421be8a7b7733cdb4a3867cb613df05d2b Mon Sep 17 00:00:00 2001
From: _stanleyyip <33562077+yipstanley@users.noreply.github.com>
Date: Sat, 16 Mar 2019 17:26:38 -0400
Subject: fixed

---
 package-lock.json                    | 16 ++++++++++------
 src/client/views/ContextMenu.scss    |  2 +-
 src/client/views/ContextMenuItem.tsx |  2 +-
 3 files changed, 12 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 8c9bf9c0a..8253c8526 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3735,12 +3735,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "resolved": false,
-          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3760,7 +3762,8 @@
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -3908,6 +3911,7 @@
           "version": "3.0.4",
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4256,7 +4260,7 @@
       "dependencies": {
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
@@ -5490,7 +5494,7 @@
         },
         "pify": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
         }
       }
@@ -6385,7 +6389,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "requires": {
             "ansi-styles": "^2.2.1",
@@ -13620,7 +13624,7 @@
       "dependencies": {
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 265cdefca..43e5033fd 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -7,7 +7,7 @@
 }
 
 .subMenu-cont {
-    position: relative;
+    position: absolute;
     display: flex;
     z-index: 1000;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 6bd370152..6b17c5c19 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -38,7 +38,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> {
         else {
             let submenu = null;
             if (this.overItem) {
-                submenu = (<div className="subMenu-cont" style={{ top: this._pageY, marginLeft: "0" }}>
+                submenu = (<div className="subMenu-cont" style={{ top: this._pageY, marginLeft: "100%", left: "0px" }}>
                     {this._items.map(prop => {
                         return <ContextMenuItem {...prop} key={prop.description} />
                     })}
-- 
cgit v1.2.3-70-g09d2


From 2411f3700c19cea1b2ac52e32ecd64c6e7343284 Mon Sep 17 00:00:00 2001
From: Eleanor Eng <eleanor_eng@brown.edu>
Date: Sat, 16 Mar 2019 17:34:14 -0400
Subject: commit to pull

---
 package-lock.json                | 6 ++++++
 package.json                     | 1 +
 src/client/views/ContextMenu.tsx | 6 +++---
 3 files changed, 10 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 8c9bf9c0a..cc9f55338 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -100,6 +100,12 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.15.tgz",
       "integrity": "sha512-ATBRyKJw1d2ko+0DWN9+BXau0EK3I/Q6pPzPv3LhJD7r052YFAkAdfb1Bd7ZqhBsJrdse/S7jKxWUOZ61qBD4g=="
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.7.2.tgz",
+      "integrity": "sha512-Ha4HshKdCVKgu4TVCtG8XyPPYdzTzNW4/fvPnn+LT7AosRABryhlRv4cc4+o84dgpvVJN9reN7jo/c+nYujFug==",
+      "dev": true
+    },
     "@fortawesome/fontawesome-free-solid": {
       "version": "5.0.13",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz",
diff --git a/package.json b/package.json
index 3bbaf72ad..6509fa449 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "tsc": "tsc"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.7.2",
     "@types/chai": "^4.1.7",
     "@types/mocha": "^5.2.6",
     "@types/react-dom": "^16.8.2",
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 73bad477b..2396ce762 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -73,9 +73,9 @@ export class ContextMenu extends React.Component {
         return (
             <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
                 <div>
-                    <i className="fa fa-search"> </i>
-                    {/* <FontAwesomeIcon icon="search" size="sm" /> */}
-                    <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
+                    {/* <i className="fa fa-search"> </i> */}
+                    <FontAwesomeIcon icon="search" size="lg" />
+                    <input className="contextMenu-item" type="text" placeholder="&#xf002; Search . . ." value={this._searchString} onChange={this.onChange} ></input>
                 </div>
                 {this._items.filter(prop => {
                     return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
-- 
cgit v1.2.3-70-g09d2


From 7db0071a1f1232112597176b0b077e6b7e37679d Mon Sep 17 00:00:00 2001
From: Eleanor Eng <eleanor_eng@brown.edu>
Date: Mon, 18 Mar 2019 19:00:13 -0400
Subject: Added icons

---
 src/client/views/ContextMenu.scss                  | 12 +++++---
 src/client/views/ContextMenu.tsx                   | 14 +++++----
 src/client/views/ContextMenuItem.tsx               | 11 ++++++--
 src/client/views/collections/CollectionPDFView.tsx |  2 +-
 src/client/views/collections/CollectionView.tsx    | 19 ++++++++++---
 src/client/views/nodes/DocumentView.tsx            | 33 ++++++++++++++++------
 src/client/views/nodes/FormattedTextBox.tsx        | 18 +++++++-----
 src/client/views/nodes/ImageBox.tsx                |  2 +-
 8 files changed, 77 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 43e5033fd..5c40c3c43 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -15,10 +15,9 @@
 }
 
 .contextMenu-item {
-    width: 10vw; //10vw
-    height: 2vh;
-    background: #DDDDDD;
-    display: flex;
+    width: 11vw; //10vw
+    height: 2.5vh; //2vh
+    background: #DDDDDD; // display: flex;
     justify-content: left;
     align-items: center;
     -webkit-touch-callout: none;
@@ -46,4 +45,9 @@
     font-size: 1.5vw;
     text-align: left;
     width: 8vw;
+    display: inline; //need this?
+}
+
+.icon-background {
+    background-color: #DDDDDD;
 }
\ No newline at end of file
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 2396ce762..39ccb55b0 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -13,7 +13,7 @@ library.add(faSearch);
 export class ContextMenu extends React.Component {
     static Instance: ContextMenu
 
-    @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }];
+    @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault(), icon: "smile" }];
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _display: string = "none";
@@ -72,11 +72,13 @@ export class ContextMenu extends React.Component {
     render() {
         return (
             <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
-                <div>
-                    {/* <i className="fa fa-search"> </i> */}
-                    <FontAwesomeIcon icon="search" size="lg" />
-                    <input className="contextMenu-item" type="text" placeholder="&#xf002; Search . . ." value={this._searchString} onChange={this.onChange} ></input>
-                </div>
+                <span>
+                    <span className="icon-background">
+                        <FontAwesomeIcon icon="circle" size="lg" />
+                        <FontAwesomeIcon icon="search" size="lg" />
+                    </span>
+                    <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange} ></input>
+                </span>
                 {this._items.filter(prop => {
                     return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
                 }).map(prop => {
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 6b17c5c19..80d9ff6a5 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,10 +1,13 @@
 import React = require("react");
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
+import { library, IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface OriginalMenuProps {
     description: string;
     event: (e: React.MouseEvent<HTMLDivElement>) => void;
+    icon: IconProp; //maybe should be optional (icon?)
 }
 
 export interface SubmenuProps {
@@ -17,8 +20,6 @@ export type ContextMenuProps = OriginalMenuProps | SubmenuProps;
 @observer
 export class ContextMenuItem extends React.Component<ContextMenuProps> {
     @observable private _items: Array<ContextMenuProps> = [];
-    @observable private _pageX: number = 0;
-    @observable private _pageY: number = 0;
     @observable private overItem = false;
 
     constructor(props: ContextMenuProps) {
@@ -32,13 +33,17 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> {
         if ("event" in this.props) {
             return (
                 <div className="contextMenu-item" onClick={this.props.event}>
+                    <span className="icon-background">
+                        <FontAwesomeIcon icon="circle" size="sm" />
+                        <FontAwesomeIcon icon={this.props.icon} size="sm" />
+                    </span>
                     <div className="contextMenu-description"> {this.props.description}</div>
                 </div>)
         }
         else {
             let submenu = null;
             if (this.overItem) {
-                submenu = (<div className="subMenu-cont" style={{ top: this._pageY, marginLeft: "100%", left: "0px" }}>
+                submenu = (<div className="subMenu-cont" style={{ marginLeft: "100.5%", left: "0px" }}>
                     {this._items.map(prop => {
                         return <ContextMenuItem {...prop} key={prop.description} />
                     })}
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index f22c07060..bcb1cd2f7 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -41,7 +41,7 @@ export class CollectionPDFView extends React.Component<CollectionViewProps> {
 
     specificContextMenu = (e: React.MouseEvent): void => {
         if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
-            ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { } });
+            ContextMenu.Instance.addItem({ description: "PDFOptions", event: () => { }, icon: "file-pdf" });
         }
     }
 
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 548a51bf1..b76426429 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -13,6 +13,17 @@ import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import { CollectionTreeView } from "./CollectionTreeView";
 import { Field, FieldId } from "../../../fields/Field";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTh } from '@fortawesome/free-solid-svg-icons';
+import { faTree } from '@fortawesome/free-solid-svg-icons';
+import { faSquare } from '@fortawesome/free-solid-svg-icons';
+import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
+
+library.add(faTh);
+library.add(faTree);
+library.add(faSquare);
+library.add(faProjectDiagram);
 
 export enum CollectionViewType {
     Invalid,
@@ -96,10 +107,10 @@ export class CollectionView extends React.Component<CollectionViewProps> {
 
     specificContextMenu = (e: React.MouseEvent): void => {
         if (!e.isPropagationStopped() && this.props.Document.Id != "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
-            ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
-            ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
-            ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
-            ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+            ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform), icon: "project-diagram" })
+            ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema), icon: "th" })
+            ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree), icon: "tree" })
+            ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking), icon: "square" })
         }
     }
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index dc793c16d..53a3aaa18 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -27,6 +27,23 @@ import React = require("react");
 import { TextField } from "../../../fields/TextField";
 import { DocumentManager } from "../../util/DocumentManager";
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faExpandArrowsAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCompressArrowsAlt } from '@fortawesome/free-solid-svg-icons';
+import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
+import { faAlignCenter } from '@fortawesome/free-solid-svg-icons';
+import { faCaretSquareRight } from '@fortawesome/free-solid-svg-icons';
+import { faSquare } from '@fortawesome/free-solid-svg-icons';
+
+library.add(faTrash);
+library.add(faExpandArrowsAlt);
+library.add(faCompressArrowsAlt);
+library.add(faLayerGroup);
+library.add(faAlignCenter);
+library.add(faCaretSquareRight);
+library.add(faSquare);
 
 
 export interface DocumentViewProps {
@@ -212,14 +229,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     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.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked, icon: "compress-arrows-alt" });
         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.addItem({ description: "Full Screen", event: this.fullScreenClicked, icon: "expand-arrows-alt" })
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
 
@@ -261,18 +278,18 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
         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) })
-        //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked, icon: "expand-arrows-alt" })
+        ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked, icon: "layer-group" })
+        ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document), icon: "align-center" })
+        ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document), icon: "caret-square-right" })
+        ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking), icon: "square" })
         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.addItem({ description: "Delete", event: this.deleteClicked, icon: "trash" })
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
         SelectionManager.SelectDoc(this, e.ctrlKey);
     }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index e402392a7..7a8dbddcc 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -14,9 +14,13 @@ import { Plugin } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 import { TooltipTextMenu } from "../../util/TooltipTextMenu"
 import { ContextMenu } from "../../views/ContextMenu";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit } from '@fortawesome/free-solid-svg-icons';
+import { faSmile } from '@fortawesome/free-solid-svg-icons';
 
-
-
+library.add(faEdit);
+library.add(faSmile);
 
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
 //
@@ -124,13 +128,13 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
 
     @action
     specificContextMenu = (e: React.MouseEvent): void => {
-        ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability });
+        ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability, icon: "edit" });
         ContextMenu.Instance.addItem({
             description: "Sub", subitems: [
-                { description: "Subitem 1", event: this.textCapability },
-                { description: "Subitem 2", event: this.textCapability },
-                { description: "Subitem 3", event: this.textCapability },
-                { description: "Submenu", subitems: [{ description: "Inner Subitem", event: this.textCapability }] }
+                { description: "Subitem 1", event: this.textCapability, icon: "smile" },
+                { description: "Subitem 2", event: this.textCapability, icon: "smile" },
+                { description: "Subitem 3", event: this.textCapability, icon: "smile" },
+                { description: "Submenu", subitems: [{ description: "Inner Subitem", event: this.textCapability, icon: "smile" }] }
             ]
         });
     }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 30910fb1f..62ecea583 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -94,7 +94,7 @@ export class ImageBox extends React.Component<FieldViewProps> {
     }
 
     specificContextMenu = (e: React.MouseEvent): void => {
-        ContextMenu.Instance.addItem({ description: "Image Capability", event: this.imageCapability });
+        ContextMenu.Instance.addItem({ description: "Image Capability", event: this.imageCapability, icon: "smile" });
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2


From 757413b1affeb0e32dbcd0f04ec661cd908a249c Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Mon, 18 Mar 2019 19:11:50 -0400
Subject: fixed

---
 src/client/views/ContextMenu.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 5c40c3c43..e5d41fcb6 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -17,7 +17,8 @@
 .contextMenu-item {
     width: 11vw; //10vw
     height: 2.5vh; //2vh
-    background: #DDDDDD; // display: flex;
+    background: #DDDDDD;
+    display: flex;
     justify-content: left;
     align-items: center;
     -webkit-touch-callout: none;
-- 
cgit v1.2.3-70-g09d2


From 19fca408a19c5f7a759ff6c3bfefe27b96ec3563 Mon Sep 17 00:00:00 2001
From: Eleanor Eng <eleanor_eng@brown.edu>
Date: Tue, 19 Mar 2019 17:51:25 -0400
Subject: contextmenu

---
 src/client/views/ContextMenu.scss               | 2 +-
 src/client/views/ContextMenuItem.tsx            | 2 +-
 src/client/views/collections/CollectionView.tsx | 1 -
 src/client/views/nodes/DocumentView.tsx         | 1 -
 src/client/views/nodes/FormattedTextBox.tsx     | 1 -
 src/client/views/nodes/ImageBox.tsx             | 1 -
 6 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index e5d41fcb6..8bc7708f7 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -18,7 +18,7 @@
     width: 11vw; //10vw
     height: 2.5vh; //2vh
     background: #DDDDDD;
-    display: flex;
+    display: flex; //comment out to allow search icon to be inline with search text
     justify-content: left;
     align-items: center;
     -webkit-touch-callout: none;
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 80d9ff6a5..fac7342aa 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -1,7 +1,7 @@
 import React = require("react");
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
-import { library, IconProp } from '@fortawesome/fontawesome-svg-core';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface OriginalMenuProps {
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index b76426429..d0e2162b1 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -14,7 +14,6 @@ import { CollectionViewProps } from "./CollectionViewBase";
 import { CollectionTreeView } from "./CollectionTreeView";
 import { Field, FieldId } from "../../../fields/Field";
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTh } from '@fortawesome/free-solid-svg-icons';
 import { faTree } from '@fortawesome/free-solid-svg-icons';
 import { faSquare } from '@fortawesome/free-solid-svg-icons';
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 53a3aaa18..907762837 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -28,7 +28,6 @@ import { TextField } from "../../../fields/TextField";
 import { DocumentManager } from "../../util/DocumentManager";
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { faExpandArrowsAlt } from '@fortawesome/free-solid-svg-icons';
 import { faCompressArrowsAlt } from '@fortawesome/free-solid-svg-icons';
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 7a8dbddcc..648037e31 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -15,7 +15,6 @@ import { Decoration, DecorationSet } from 'prosemirror-view'
 import { TooltipTextMenu } from "../../util/TooltipTextMenu"
 import { ContextMenu } from "../../views/ContextMenu";
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEdit } from '@fortawesome/free-solid-svg-icons';
 import { faSmile } from '@fortawesome/free-solid-svg-icons';
 
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 62ecea583..7532e23c8 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,4 +1,3 @@
-
 import { action, observable } from 'mobx';
 import { observer } from "mobx-react";
 import Lightbox from 'react-image-lightbox';
-- 
cgit v1.2.3-70-g09d2


From 8c801b3c98e1eaae297b0f1682b42fc478a1b887 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 14 Apr 2019 00:44:02 -0400
Subject: Got a basic version of search working

---
 src/client/SocketStub.ts |  2 +-
 src/fields/Document.ts   |  6 +++---
 src/server/Search.ts     | 27 +++++++++++++++++++++++++++
 src/server/ServerUtil.ts |  4 ++--
 src/server/database.ts   | 12 ++++++++++++
 src/server/index.ts      | 12 +++++++++++-
 6 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 src/server/Search.ts

(limited to 'src')

diff --git a/src/client/SocketStub.ts b/src/client/SocketStub.ts
index 5e2ca6a98..df5d12827 100644
--- a/src/client/SocketStub.ts
+++ b/src/client/SocketStub.ts
@@ -37,7 +37,7 @@ export class SocketStub {
         // document.fields.forEach((f, key) => (this.FieldStore.get(document.Id) as Document)._proxies.set(key.Id, (f as Field).Id));
 
         console.log("sending " + document.Title);
-        Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(document.ToJson()));
+        // Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(document.ToJson()));
     }
 
     public static SEND_FIELD_REQUEST(fieldid: FieldId): Promise<Opt<Field>>;
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 628fe684c..884e7374b 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -410,11 +410,11 @@ export class Document extends Field {
         return copy;
     }
 
-    ToJson(): { type: Types; data: [string, string][]; _id: string } {
-        let fields: [string, string][] = [];
+    ToJson(): { type: Types; data: { key: string, field: string }[]; _id: string } {
+        let fields: { key: string, field: string }[] = [];
         this._proxies.forEach((field, key) => {
             if (field) {
-                fields.push([key, field]);
+                fields.push({ key, field });
             }
         });
 
diff --git a/src/server/Search.ts b/src/server/Search.ts
new file mode 100644
index 000000000..f9babc433
--- /dev/null
+++ b/src/server/Search.ts
@@ -0,0 +1,27 @@
+import * as rp from 'request-promise';
+import { Database } from './database';
+
+export class Search {
+    public static Instance = new Search();
+    private url = 'http://localhost:8983/solr/';
+
+    public updateDocument(document: any): rp.RequestPromise {
+        return rp.post(this.url + "dash/update/json/docs", {
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(document)
+        });
+    }
+
+    public async search(query: string) {
+        const searchResults = JSON.parse(await rp.get(this.url + "dash/select", {
+            qs: {
+                q: query
+            }
+        }));
+        const fields = searchResults.response.docs;
+        const ids = fields.map((field: any) => field.id);
+        const docs = await Database.Instance.searchQuery(ids);
+        const docIds = docs.map((doc: any) => doc._id);
+        return docIds;
+    }
+}
\ No newline at end of file
diff --git a/src/server/ServerUtil.ts b/src/server/ServerUtil.ts
index 0973f82b1..dc8687b7e 100644
--- a/src/server/ServerUtil.ts
+++ b/src/server/ServerUtil.ts
@@ -73,9 +73,9 @@ export class ServerUtils {
                 return InkField.FromJson(id, data);
             case Types.Document:
                 let doc: Document = new Document(id, false);
-                let fields: [string, string][] = data as [string, string][];
+                let fields: { key: string, field: string }[] = data as { key: string, field: string }[];
                 fields.forEach(element => {
-                    doc._proxies.set(element[0], element[1]);
+                    doc._proxies.set(element.key, element.field);
                 });
                 return doc;
             default:
diff --git a/src/server/database.ts b/src/server/database.ts
index 3290edde0..4011f26bd 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -71,6 +71,18 @@ export class Database {
         });
     }
 
+    public searchQuery(ids: string[], collectionName = Database.DocumentsCollection): Promise<any> {
+        return new Promise<any>(resolve => {
+            this.db && this.db.collection(collectionName).find({ "data.field": { "$in": ids } }).toArray((err, docs) => {
+                if (err) {
+                    console.log(err.message);
+                    console.log(err.errmsg);
+                }
+                resolve(docs);
+            });
+        });
+    }
+
     public print() {
         console.log("db says hi!");
     }
diff --git a/src/server/index.ts b/src/server/index.ts
index a6fe6fa2c..fef26f78a 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -22,7 +22,7 @@ import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLo
 import { DashUserModel } from './authentication/models/user_model';
 import { Client } from './Client';
 import { Database } from './database';
-import { MessageStore, Transferable } from "./Message";
+import { MessageStore, Transferable, Types } from "./Message";
 import { RouteStore } from './RouteStore';
 const app = express();
 const config = require('../../webpack.config');
@@ -32,6 +32,7 @@ const serverPort = 4321;
 import expressFlash = require('express-flash');
 import flash = require('connect-flash');
 import c = require("crypto");
+import { Search } from './Search';
 const MongoStore = require('connect-mongo')(session);
 const mongoose = require('mongoose');
 
@@ -118,6 +119,12 @@ app.get("/pull", (req, res) =>
 
 // GETTERS
 
+app.get("/search", async (req, res) => {
+    let query = req.query.query || "hello";
+    let results = await Search.Instance.search(query);
+    res.send(results);
+});
+
 // anyone attempting to navigate to localhost at this port will
 // first have to login
 addSecureRoute(
@@ -258,6 +265,9 @@ function getFields([ids, callback]: [string[], (result: any) => void]) {
 function setField(socket: Socket, newValue: Transferable) {
     Database.Instance.update(newValue._id, newValue, () =>
         socket.broadcast.emit(MessageStore.SetField.Message, newValue));
+    if (newValue.type === Types.Text) {
+        Search.Instance.updateDocument({ id: newValue._id, data: (newValue as any).data });
+    }
 }
 
 server.listen(serverPort);
-- 
cgit v1.2.3-70-g09d2


From be1976fb0ba33064978ee973993b3a2316cdf43c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 14 Apr 2019 01:02:25 -0400
Subject: deleting database now also clears Solr indexes

---
 src/server/Search.ts | 11 +++++++++++
 src/server/index.ts  |  7 +++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/server/Search.ts b/src/server/Search.ts
index f9babc433..7d8602346 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -24,4 +24,15 @@ export class Search {
         const docIds = docs.map((doc: any) => doc._id);
         return docIds;
     }
+
+    public async clear() {
+        return rp.post(this.url + "dash/update", {
+            body: {
+                delete: {
+                    query: "*:*"
+                }
+            },
+            json: true
+        });
+    }
 }
\ No newline at end of file
diff --git a/src/server/index.ts b/src/server/index.ts
index bea84c6ed..cb4268a2d 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -11,6 +11,7 @@ import { ObservableMap } from 'mobx';
 import * as passport from 'passport';
 import * as path from 'path';
 import * as request from 'request';
+import * as rp from 'request-promise';
 import * as io from 'socket.io';
 import { Socket } from 'socket.io';
 import * as webpack from 'webpack';
@@ -241,14 +242,16 @@ server.on("connection", function (socket: Socket) {
     Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteFields);
 });
 
-function deleteFields() {
-    return Database.Instance.deleteAll();
+async function deleteFields() {
+    await Database.Instance.deleteAll();
+    await Search.Instance.clear();
 }
 
 async function deleteAll() {
     await Database.Instance.deleteAll();
     await Database.Instance.deleteAll('sessions');
     await Database.Instance.deleteAll('users');
+    await Search.Instance.clear();
 }
 
 function barReceived(guid: String) {
-- 
cgit v1.2.3-70-g09d2


From 04fd1451fb33bba806f9fe406d51c13d8d4dd541 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 16 Apr 2019 17:17:41 -0400
Subject: checking other search

---
 src/client/views/Main.scss | 39 ++++++++++++++++++++++++++++-----------
 src/client/views/Main.tsx  |  3 +++
 2 files changed, 31 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 4373534b2..26284974a 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -1,5 +1,6 @@
 @import "globalCssVariables";
 @import "nodeModuleOverrides";
+
 html,
 body {
     width: 100%;
@@ -7,9 +8,9 @@ body {
     overflow: auto;
     font-family: $sans-serif;
     margin: 0;
-    position:absolute;
+    position: absolute;
     top: 0;
-    left:0;
+    left: 0;
 }
 
 #dash-title {
@@ -42,7 +43,7 @@ h1 {
 }
 
 .jsx-parser {
-    width:100%
+    width: 100%
 }
 
 p {
@@ -80,6 +81,10 @@ button:hover {
     cursor: pointer;
 }
 
+search {
+    background: $dark-color;
+}
+
 .clear-db-button {
     position: absolute;
     right: 45%;
@@ -114,6 +119,7 @@ button:hover {
     position: absolute;
     bottom: 62px;
     left: 24px;
+
     .toolbar-button {
         display: block;
         margin-bottom: 10px;
@@ -125,6 +131,7 @@ button:hover {
     position: absolute;
     bottom: 24px;
     left: 24px;
+
     label {
         background: $dark-color;
         color: $light-color;
@@ -137,44 +144,53 @@ button:hover {
         cursor: pointer;
         transition: transform 0.2s;
     }
+
     label p {
         padding-left: 10.5px;
         padding-top: 3px;
     }
+
     label:hover {
         background: $main-accent;
         transform: scale(1.15);
     }
+
     input {
         display: none;
     }
+
     input:not(:checked)~#add-options-content {
         display: none;
     }
+
     input:checked~label {
         transform: rotate(45deg);
         transition: transform 0.5s;
         cursor: pointer;
     }
 }
+
 #root {
     overflow: visible;
 }
+
 #main-div {
-    width:100%;
-    height:100%;
-    position:absolute;
+    width: 100%;
+    height: 100%;
+    position: absolute;
     top: 0;
-    left:0;
+    left: 0;
     overflow: scroll;
 }
+
 #mainContent-div {
-    width:100%;
-    height:100%;
-    position:absolute;
+    width: 100%;
+    height: 100%;
+    position: absolute;
     top: 0;
-    left:0;
+    left: 0;
 }
+
 #add-options-content {
     display: table;
     opacity: 1;
@@ -189,6 +205,7 @@ button:hover {
 ul#add-options-list {
     list-style: none;
     padding: 0;
+
     li {
         display: inline-block;
         padding: 0;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 0469211fa..7d47c9932 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -262,6 +262,9 @@ export class Main extends React.Component {
             </div >,
             <div className="main-buttonDiv" key="workspaces" style={{ top: '34px', left: '2px', position: 'absolute' }} ref={workspacesRef}>
                 <button onClick={toggleWorkspaces}>Workspaces</button></div>,
+
+            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '100px', position: 'absolute' }} ref={workspacesRef}> hello </div>,
+
             <div className="main-buttonDiv" key="logout" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}>
                 <button onClick={() => request.get(ServerUtils.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
         ];
-- 
cgit v1.2.3-70-g09d2


From 2181bc0f19b04a5c1a3e6e20206fc04a086995d2 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 16 Apr 2019 17:28:56 -0400
Subject: attempting graphics

---
 src/client/views/Main.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 7d47c9932..92c7fa7dd 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -263,7 +263,7 @@ export class Main extends React.Component {
             <div className="main-buttonDiv" key="workspaces" style={{ top: '34px', left: '2px', position: 'absolute' }} ref={workspacesRef}>
                 <button onClick={toggleWorkspaces}>Workspaces</button></div>,
 
-            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '100px', position: 'absolute' }} ref={workspacesRef}> hello </div>,
+            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '100px', position: 'absolute' }} ref={workspacesRef}> <SearchBox/> </div>,
 
             <div className="main-buttonDiv" key="logout" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}>
                 <button onClick={() => request.get(ServerUtils.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
-- 
cgit v1.2.3-70-g09d2


From 94fa065ae2a0f3ccb6a16141a45f11543add3b63 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Mon, 22 Apr 2019 19:56:49 -0400
Subject: exploratory sprint

---
 src/server/Search.ts | 1 +
 src/server/index.ts  | 9 +++++++++
 2 files changed, 10 insertions(+)

(limited to 'src')

diff --git a/src/server/Search.ts b/src/server/Search.ts
index 7d8602346..bcea03d5c 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -6,6 +6,7 @@ export class Search {
     private url = 'http://localhost:8983/solr/';
 
     public updateDocument(document: any): rp.RequestPromise {
+        console.log(JSON.stringify(document));
         return rp.post(this.url + "dash/update/json/docs", {
             headers: { 'content-type': 'application/json' },
             body: JSON.stringify(document)
diff --git a/src/server/index.ts b/src/server/index.ts
index a68dabc0c..b3df90199 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -34,6 +34,7 @@ import expressFlash = require('express-flash');
 import flash = require('connect-flash');
 import c = require("crypto");
 import { Search } from './Search';
+import { debug } from 'util';
 const MongoStore = require('connect-mongo')(session);
 const mongoose = require('mongoose');
 
@@ -276,6 +277,7 @@ function setField(socket: Socket, newValue: Transferable) {
         socket.broadcast.emit(MessageStore.SetField.Message, newValue));
     if (newValue.type === Types.Text) {
         Search.Instance.updateDocument({ id: newValue.id, data: (newValue as any).data });
+        console.log("set field");
     }
 }
 
@@ -286,10 +288,17 @@ function GetRefField([id, callback]: [string, (result?: Transferable) => void])
 function UpdateField(socket: Socket, diff: Diff) {
     Database.Instance.update(diff.id, diff.diff,
         () => socket.broadcast.emit(MessageStore.UpdateField.Message, diff), false, "newDocuments");
+    //if (diff.diff === Types.Text) {
+    Search.Instance.updateDocument({ name: "john", burns: "true" });
+    Search.Instance.updateDocument({ id: diff.id, data: diff.diff.data });
+    //console.log("set field");
+    //}
+    console.log("updated field", diff.diff);
 }
 
 function CreateField(newValue: any) {
     Database.Instance.insert(newValue, "newDocuments");
+    console.log("created field");
 }
 
 server.listen(serverPort);
-- 
cgit v1.2.3-70-g09d2


From 85ce4c9a3cd665983067d7783e20eb7701376503 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Tue, 23 Apr 2019 19:00:15 -0400
Subject: idk

---
 src/server/index.ts | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/server/index.ts b/src/server/index.ts
index b3df90199..464d3f68f 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -35,6 +35,7 @@ import flash = require('connect-flash');
 import c = require("crypto");
 import { Search } from './Search';
 import { debug } from 'util';
+import _ = require('lodash');
 const MongoStore = require('connect-mongo')(session);
 const mongoose = require('mongoose');
 
@@ -289,11 +290,32 @@ function UpdateField(socket: Socket, diff: Diff) {
     Database.Instance.update(diff.id, diff.diff,
         () => socket.broadcast.emit(MessageStore.UpdateField.Message, diff), false, "newDocuments");
     //if (diff.diff === Types.Text) {
-    Search.Instance.updateDocument({ name: "john", burns: "true" });
-    Search.Instance.updateDocument({ id: diff.id, data: diff.diff.data });
+    //Search.Instance.updateDocument({ name: "john", burns: "true" });
+    //Search.Instance.updateDocument({ id: diff.id, data: diff.diff.data });
     //console.log("set field");
     //}
-    console.log("updated field", diff.diff);
+    const docid = { id: diff.id };
+    const docfield = diff.diff;
+    console.log("FIELD: ", docfield);
+    var dynfield = false;
+    for (var key in docfield) {
+        const val = docfield[key];
+        if (typeof val === 'number') {
+            key = key + "_n";
+            dynfield = true;
+        }
+        else if (typeof val === 'string') {
+            key = key + "_t";
+            dynfield = true;
+        }
+        console.log(key);
+    }
+    var merged = {};
+    _.extend(merged, docid, docfield);
+    if (dynfield) {
+        console.log("dynamic field detected!");
+        Search.Instance.updateDocument(merged);
+    }
 }
 
 function CreateField(newValue: any) {
-- 
cgit v1.2.3-70-g09d2


From 39bb878a32821d2e14110f4158471890234f4769 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Mon, 29 Apr 2019 19:52:35 -0400
Subject: search UI

---
 src/client/views/Main.scss      |  4 --
 src/client/views/Main.tsx       |  5 ++-
 src/client/views/SearchBox.scss | 64 +++++++++++++++++++++++++++++
 src/client/views/SearchBox.tsx  | 89 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 156 insertions(+), 6 deletions(-)
 create mode 100644 src/client/views/SearchBox.scss
 create mode 100644 src/client/views/SearchBox.tsx

(limited to 'src')

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 26284974a..bca75da47 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -81,10 +81,6 @@ button:hover {
     cursor: pointer;
 }
 
-search {
-    background: $dark-color;
-}
-
 .clear-db-button {
     position: absolute;
     right: 45%;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 92c7fa7dd..87eefe67f 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -38,6 +38,7 @@ import "./Main.scss";
 import { MainOverlayTextBox } from './MainOverlayTextBox';
 import { DocumentView } from './nodes/DocumentView';
 import { PreviewCursor } from './PreviewCursor';
+import { SearchBox } from './SearchBox';
 
 
 @observer
@@ -263,9 +264,9 @@ export class Main extends React.Component {
             <div className="main-buttonDiv" key="workspaces" style={{ top: '34px', left: '2px', position: 'absolute' }} ref={workspacesRef}>
                 <button onClick={toggleWorkspaces}>Workspaces</button></div>,
 
-            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '100px', position: 'absolute' }} ref={workspacesRef}> <SearchBox/> </div>,
+            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={workspacesRef}> <SearchBox /> </div>,
 
-            <div className="main-buttonDiv" key="logout" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}>
+            <div className="main-buttonDiv" key="logout" style={{ bottom: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}>
                 <button onClick={() => request.get(ServerUtils.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
         ];
     }
diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
new file mode 100644
index 000000000..e1a1de142
--- /dev/null
+++ b/src/client/views/SearchBox.scss
@@ -0,0 +1,64 @@
+@import "globalCssVariables";
+
+.searchBox {
+    height: 32px;
+    //display: flex;
+    //padding: 4px;
+    -webkit-transition: width 0.4s ease-in-out;
+    transition: width 0.4s ease-in-out;
+    align-items: center;
+
+    .submit-search {
+        display: inline-block;
+        text-align: right;
+        color: $dark-color;
+        -webkit-transition: right 0.4s;
+        transition: right 0.4s;
+    }
+
+    .submit-search:hover {
+        color: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
+
+    input[type=text] {
+        width: 130px;
+        -webkit-transition: width 0.4s;
+        transition: width 0.4s;
+        position: absolute;
+        right: 100px;
+    }
+
+    input[type=text]:focus {
+        width: 500px;
+        outline: 3px solid lightblue;
+    }
+
+    .filter-button {
+        position: absolute;
+        right: 30px;
+    }
+}
+
+.filter-form {
+    background: $dark-color;
+    height: 400px;
+    width: 400px;
+    position: relative;
+    right: 1px;
+    color: $light-color;
+    padding: 10px;
+    flex-direction: column;
+}
+
+#header {
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 100%;
+    height: 40px;
+}
+
+#option {
+    height: 20px;
+}
\ No newline at end of file
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
new file mode 100644
index 000000000..7f388719d
--- /dev/null
+++ b/src/client/views/SearchBox.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+import { Utils } from '../../Utils';
+import { MessageStore } from '../../server/Message';
+import { Server } from '../Server';
+import "./SearchBox.scss";
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { actionFieldDecorator } from 'mobx/lib/internal';
+
+library.add(faSearch);
+
+@observer
+export class SearchBox extends React.Component {
+    @observable
+    searchString: string = "";
+
+    @observable private _open: boolean = false;
+
+    @action.bound
+    onChange(e: React.ChangeEvent<HTMLInputElement>) {
+        this.searchString = e.target.value;
+
+    }
+
+    submitSearch = () => {
+        Utils.EmitCallback(Server.Socket, MessageStore.SearchFor, this.searchString, (results: string[]) => {
+            for (const result of results) {
+                console.log(result);
+                Utils.GetQueryVariable()
+            }
+        });
+    }
+
+    @action
+    handleClick = (e: Event): void => {
+        var className = (e.target as any).className;
+        var id = (e.target as any).id;
+        console.log(id);
+        //let imgPrev = document.getElementById("img_preview");
+        console.log(className);
+        if (className !== "filter-button" && className !== "filter-form") {
+            console.log("false");
+            this._open = false;
+        }
+
+    }
+
+    componentWillMount() {
+        document.addEventListener('mousedown', this.handleClick, false);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('mousedown', this.handleClick, false);
+    }
+
+    @action
+    toggleDisplay = () => {
+        this._open = !this._open;
+    }
+
+    render() {
+        return (
+            <div id="outer">
+                <div className="searchBox" id="outer">
+                    {/* <input value={this.searchString} onChange={this.onChange} />
+                <button onClick={this.submitSearch} /> */}
+
+                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" />
+                    {/* {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
+                    map(prop => <ContextMenuItem {...prop} key={prop.description} />)} */}
+
+                    <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
+                    <div className="submit-search" ><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
+                </div>
+                <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
+                    <div className="filter-form" id="header">Filter Search Results</div>
+                    <div className="filter-form" id="option">
+                        filter by collection, key, type of node
+                    </div>
+
+                </div>
+            </div>
+
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From df9fa3e362a6bdd616bc0b46ef9b425cfc5a010d Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 30 Apr 2019 16:17:39 -0400
Subject: before pull

---
 src/client/views/SearchBox.scss |  1 -
 src/fields/Document.ts          | 15 +++++++--------
 src/server/Search.ts            | 38 ++++++++++++++++++++++++++++++++++++++
 src/server/database.ts          | 12 ++++++++++++
 src/server/index.ts             | 19 ++++++++++++++++---
 5 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 src/server/Search.ts

(limited to 'src')

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index e1a1de142..92363e681 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -9,7 +9,6 @@
     align-items: center;
 
     .submit-search {
-        display: inline-block;
         text-align: right;
         color: $dark-color;
         -webkit-transition: right 0.4s;
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 2797efc09..6f6533754 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -29,15 +29,14 @@ export class Document extends Field {
     }
     static FromJson(data: any, id: string, save: boolean): Document {
         let doc = new Document(id, save);
-        let fields = data as [string, string][];
-        fields.forEach(pair => doc._proxies.set(pair[0], pair[1]));
+        let fields = data as { key: string, field: string }[];
+        fields.forEach(pair => doc._proxies.set(pair.key, pair.field));
         return doc;
     }
 
-    UpdateFromServer(data: [string, string][]) {
-        for (const key in data) {
-            const element = data[key];
-            this._proxies.set(element[0], element[1]);
+    UpdateFromServer(data: { key: string, field: string }[]) {
+        for (const kv of data) {
+            this._proxies.set(kv.key, kv.field);
         }
     }
 
@@ -448,9 +447,9 @@ export class Document extends Field {
     }
 
     ToJson() {
-        let fields: [string, string][] = [];
+        let fields: { key: string, field: string }[] = [];
         this._proxies.forEach((field, key) =>
-            field && fields.push([key, field]));
+            field && fields.push({ key, field }));
 
         return {
             type: Types.Document,
diff --git a/src/server/Search.ts b/src/server/Search.ts
new file mode 100644
index 000000000..7d8602346
--- /dev/null
+++ b/src/server/Search.ts
@@ -0,0 +1,38 @@
+import * as rp from 'request-promise';
+import { Database } from './database';
+
+export class Search {
+    public static Instance = new Search();
+    private url = 'http://localhost:8983/solr/';
+
+    public updateDocument(document: any): rp.RequestPromise {
+        return rp.post(this.url + "dash/update/json/docs", {
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(document)
+        });
+    }
+
+    public async search(query: string) {
+        const searchResults = JSON.parse(await rp.get(this.url + "dash/select", {
+            qs: {
+                q: query
+            }
+        }));
+        const fields = searchResults.response.docs;
+        const ids = fields.map((field: any) => field.id);
+        const docs = await Database.Instance.searchQuery(ids);
+        const docIds = docs.map((doc: any) => doc._id);
+        return docIds;
+    }
+
+    public async clear() {
+        return rp.post(this.url + "dash/update", {
+            body: {
+                delete: {
+                    query: "*:*"
+                }
+            },
+            json: true
+        });
+    }
+}
\ No newline at end of file
diff --git a/src/server/database.ts b/src/server/database.ts
index 5457e4dd5..d5905c7b3 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -72,6 +72,18 @@ export class Database {
         });
     }
 
+    public searchQuery(ids: string[], collectionName = Database.DocumentsCollection): Promise<any> {
+        return new Promise<any>(resolve => {
+            this.db && this.db.collection(collectionName).find({ "data.field": { "$in": ids } }).toArray((err, docs) => {
+                if (err) {
+                    console.log(err.message);
+                    console.log(err.errmsg);
+                }
+                resolve(docs);
+            });
+        });
+    }
+
     public print() {
         console.log("db says hi!");
     }
diff --git a/src/server/index.ts b/src/server/index.ts
index 70a7d266c..cb4268a2d 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -11,6 +11,7 @@ import { ObservableMap } from 'mobx';
 import * as passport from 'passport';
 import * as path from 'path';
 import * as request from 'request';
+import * as rp from 'request-promise';
 import * as io from 'socket.io';
 import { Socket } from 'socket.io';
 import * as webpack from 'webpack';
@@ -22,7 +23,7 @@ import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLo
 import { DashUserModel } from './authentication/models/user_model';
 import { Client } from './Client';
 import { Database } from './database';
-import { MessageStore, Transferable } from "./Message";
+import { MessageStore, Transferable, Types } from "./Message";
 import { RouteStore } from './RouteStore';
 const app = express();
 const config = require('../../webpack.config');
@@ -32,6 +33,7 @@ const serverPort = 4321;
 import expressFlash = require('express-flash');
 import flash = require('connect-flash');
 import c = require("crypto");
+import { Search } from './Search';
 const MongoStore = require('connect-mongo')(session);
 const mongoose = require('mongoose');
 
@@ -120,6 +122,12 @@ app.get("/pull", (req, res) =>
 
 // GETTERS
 
+app.get("/search", async (req, res) => {
+    let query = req.query.query || "hello";
+    let results = await Search.Instance.search(query);
+    res.send(results);
+});
+
 // anyone attempting to navigate to localhost at this port will
 // first have to login
 addSecureRoute(
@@ -234,14 +242,16 @@ server.on("connection", function (socket: Socket) {
     Utils.AddServerHandler(socket, MessageStore.DeleteAll, deleteFields);
 });
 
-function deleteFields() {
-    return Database.Instance.deleteAll();
+async function deleteFields() {
+    await Database.Instance.deleteAll();
+    await Search.Instance.clear();
 }
 
 async function deleteAll() {
     await Database.Instance.deleteAll();
     await Database.Instance.deleteAll('sessions');
     await Database.Instance.deleteAll('users');
+    await Search.Instance.clear();
 }
 
 function barReceived(guid: String) {
@@ -260,6 +270,9 @@ function getFields([ids, callback]: [string[], (result: Transferable[]) => void]
 function setField(socket: Socket, newValue: Transferable) {
     Database.Instance.update(newValue.id, newValue, () =>
         socket.broadcast.emit(MessageStore.SetField.Message, newValue));
+    if (newValue.type === Types.Text) {
+        Search.Instance.updateDocument({ id: newValue.id, data: (newValue as any).data });
+    }
 }
 
 server.listen(serverPort);
-- 
cgit v1.2.3-70-g09d2


From da792d534024d8e0d266e291f92b9a1e83be51c2 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Tue, 30 Apr 2019 18:38:05 -0400
Subject: set not working

---
 src/debug/Test.tsx  | 50 +++++++++++++++++++++++++-------------------------
 src/server/index.ts | 14 ++++++++++----
 2 files changed, 35 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx
index 6a677f80f..47cfac2c1 100644
--- a/src/debug/Test.tsx
+++ b/src/debug/Test.tsx
@@ -46,34 +46,34 @@ class Test extends React.Component {
         doc.fields = "test";
         doc.test = "hello doc";
         doc.url = url;
-        doc.testDoc = doc2;
+        //doc.testDoc = doc2;
 
 
-        const test1: TestDoc = TestDoc(doc);
-        const test2: Test2Doc = Test2Doc(doc);
-        assert(test1.hello === 5);
-        assert(test1.fields === undefined);
-        assert(test1.test === "hello doc");
-        assert(test1.url === url);
-        assert(test1.testDoc === doc2);
-        test1.myField = 20;
-        assert(test1.myField === 20);
+        // const test1: TestDoc = TestDoc(doc);
+        // const test2: Test2Doc = Test2Doc(doc);
+        // assert(test1.hello === 5);
+        // assert(test1.fields === undefined);
+        // assert(test1.test === "hello doc");
+        // assert(test1.url === url);
+        // //assert(test1.testDoc === doc2);
+        // test1.myField = 20;
+        // assert(test1.myField === 20);
 
-        assert(test2.hello === undefined);
-        // assert(test2.fields === "test");
-        assert(test2.test === undefined);
-        assert(test2.url === undefined);
-        assert(test2.testDoc === undefined);
-        test2.url = 35;
-        assert(test2.url === 35);
-        const l = new List<number>();
-        //TODO push, and other array functions don't go through the proxy
-        l.push(1);
-        //TODO currently length, and any other string fields will get serialized
-        l.length = 3;
-        l[2] = 5;
-        console.log(l.slice());
-        console.log(SerializationHelper.Serialize(l));
+        // assert(test2.hello === undefined);
+        // // assert(test2.fields === "test");
+        // assert(test2.test === undefined);
+        // assert(test2.url === undefined);
+        // assert(test2.testDoc === undefined);
+        // test2.url = 35;
+        // assert(test2.url === 35);
+        // const l = new List<number>();
+        // //TODO push, and other array functions don't go through the proxy
+        // l.push(1);
+        // //TODO currently length, and any other string fields will get serialized
+        // l.length = 3;
+        // l[2] = 5;
+        // console.log(l.slice());
+        // console.log(SerializationHelper.Serialize(l));
     }
 
     render() {
diff --git a/src/server/index.ts b/src/server/index.ts
index 464d3f68f..b57e5c482 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -295,23 +295,29 @@ function UpdateField(socket: Socket, diff: Diff) {
     //console.log("set field");
     //}
     const docid = { id: diff.id };
-    const docfield = diff.diff;
+    var docfield = diff.diff;
+    docfield = JSON.parse(JSON.stringify(docfield).split("fields.").join(""));
     console.log("FIELD: ", docfield);
     var dynfield = false;
     for (var key in docfield) {
         const val = docfield[key];
         if (typeof val === 'number') {
-            key = key + "_n";
+            const new_key: string = key + "_n";
+            docfield = JSON.parse(JSON.stringify(docfield).split(key).join(new_key));
+            //docfield[new_key] = { 'set': val };
             dynfield = true;
         }
         else if (typeof val === 'string') {
-            key = key + "_t";
+            const new_key: string = key + "_t";
+            docfield = JSON.parse(JSON.stringify(docfield).split(key).join(new_key));
+            docfield[new_key] = { 'set': val };
             dynfield = true;
         }
-        console.log(key);
     }
     var merged = {};
     _.extend(merged, docid, docfield);
+    console.log(merged);
+    console.log(docfield);
     if (dynfield) {
         console.log("dynamic field detected!");
         Search.Instance.updateDocument(merged);
-- 
cgit v1.2.3-70-g09d2


From b269ce7d85a9b83280d2b5b23299aa16e6cc5a92 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 30 Apr 2019 19:59:38 -0400
Subject: confused but still goin

---
 src/client/views/SearchBox.tsx                                    | 2 +-
 .../collections/collectionFreeForm/CollectionFreeFormView.tsx     | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 7f388719d..7ceaf1da6 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -29,7 +29,7 @@ export class SearchBox extends React.Component {
         Utils.EmitCallback(Server.Socket, MessageStore.SearchFor, this.searchString, (results: string[]) => {
             for (const result of results) {
                 console.log(result);
-                Utils.GetQueryVariable()
+                //Utils.GetQueryVariable();
             }
         });
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 8647ded8a..08c28e76f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -48,9 +48,13 @@ export class CollectionFreeFormView extends CollectionSubView {
         this.addDocument(newBox, false);
     }
 
-    public addDocument = (newBox: Document, allowDuplicates: boolean) => this.props.addDocument(this.bringToFront(newBox), false);
+    public addDocument = (newBox: Document, allowDuplicates: boolean) => {
+        this.props.addDocument(newBox, false);
+        this.bringToFront(newBox);
+        return true;
+    }
 
-    public selectDocuments = (docs: Document[]) => {
+    private selectDocuments = (docs: Document[]) => {
         SelectionManager.DeselectAll;
         docs.map(doc => DocumentManager.Instance.getDocumentView(doc)).filter(dv => dv).map(dv =>
             SelectionManager.SelectDoc(dv!, true));
-- 
cgit v1.2.3-70-g09d2


From eed0866d6148dfdb29c3f87b42afe365231f258c Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 30 Apr 2019 21:47:03 -0400
Subject: i am CONFUSED

---
 src/client/views/SearchBox.tsx | 31 ++++++++++++++++++++++++-------
 src/server/Search.ts           |  2 ++
 2 files changed, 26 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 7ceaf1da6..0670360a2 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -9,6 +9,10 @@ import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { actionFieldDecorator } from 'mobx/lib/internal';
+// const app = express();
+// import * as express from 'express';
+import { Search } from '../../server/Search';
+
 
 library.add(faSearch);
 
@@ -26,12 +30,25 @@ export class SearchBox extends React.Component {
     }
 
     submitSearch = () => {
-        Utils.EmitCallback(Server.Socket, MessageStore.SearchFor, this.searchString, (results: string[]) => {
-            for (const result of results) {
-                console.log(result);
-                //Utils.GetQueryVariable();
-            }
-        });
+        // Utils.EmitCallback(Server.Socket, MessageStore.SearchFor, this.searchString, (results: string[]) => {
+        //     for (const result of results) {
+        //         console.log(result);
+        //         //Utils.GetQueryVariable();
+        //     }
+        // });
+
+        let query = this.searchString;
+        console.log(query);
+        //something bad is happening here
+        let results = Search.Instance.search(query);
+        console.log(results);
+
+        // app.get("/search", async (req, res) => {
+        //     //let query = req.query.query || "hello";
+        //     let query = this.searchString;
+        //     let results = await Search.Instance.search(query);
+        //     res.send(results);
+        // });
     }
 
     @action
@@ -73,7 +90,7 @@ export class SearchBox extends React.Component {
                     map(prop => <ContextMenuItem {...prop} key={prop.description} />)} */}
 
                     <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
-                    <div className="submit-search" ><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
+                    <div className="submit-search" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
                 </div>
                 <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
                     <div className="filter-form" id="header">Filter Search Results</div>
diff --git a/src/server/Search.ts b/src/server/Search.ts
index 7d8602346..8ae996e9e 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -13,6 +13,8 @@ export class Search {
     }
 
     public async search(query: string) {
+        console.log("____________________________");
+        console.log(query);
         const searchResults = JSON.parse(await rp.get(this.url + "dash/select", {
             qs: {
                 q: query
-- 
cgit v1.2.3-70-g09d2


From 0c28cabf0d496be24da3e5ee414a8fcd925250ab Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 3 May 2019 01:42:54 -0400
Subject: Got part of search working

---
 src/server/Search.ts   | 13 ++++++-------
 src/server/database.ts | 12 ------------
 src/server/index.ts    |  4 ++--
 3 files changed, 8 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/server/Search.ts b/src/server/Search.ts
index bcea03d5c..9e462f0ae 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -1,15 +1,16 @@
 import * as rp from 'request-promise';
 import { Database } from './database';
+import { thisExpression } from 'babel-types';
 
 export class Search {
     public static Instance = new Search();
     private url = 'http://localhost:8983/solr/';
 
-    public updateDocument(document: any): rp.RequestPromise {
-        console.log(JSON.stringify(document));
-        return rp.post(this.url + "dash/update/json/docs", {
+    public async updateDocument(document: any) {
+        console.log("UPDATE: ", JSON.stringify(document));
+        return rp.post(this.url + "dash/update", {
             headers: { 'content-type': 'application/json' },
-            body: JSON.stringify(document)
+            body: JSON.stringify([document])
         });
     }
 
@@ -21,9 +22,7 @@ export class Search {
         }));
         const fields = searchResults.response.docs;
         const ids = fields.map((field: any) => field.id);
-        const docs = await Database.Instance.searchQuery(ids);
-        const docIds = docs.map((doc: any) => doc._id);
-        return docIds;
+        return ids;
     }
 
     public async clear() {
diff --git a/src/server/database.ts b/src/server/database.ts
index 1e8004328..a61b4d823 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -74,18 +74,6 @@ export class Database {
         });
     }
 
-    public searchQuery(ids: string[], collectionName = Database.DocumentsCollection): Promise<any> {
-        return new Promise<any>(resolve => {
-            this.db && this.db.collection(collectionName).find({ "data.field": { "$in": ids } }).toArray((err, docs) => {
-                if (err) {
-                    console.log(err.message);
-                    console.log(err.errmsg);
-                }
-                resolve(docs);
-            });
-        });
-    }
-
     public print() {
         console.log("db says hi!");
     }
diff --git a/src/server/index.ts b/src/server/index.ts
index b57e5c482..b4252c2a1 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -316,8 +316,8 @@ function UpdateField(socket: Socket, diff: Diff) {
     }
     var merged = {};
     _.extend(merged, docid, docfield);
-    console.log(merged);
-    console.log(docfield);
+    console.log("MERGED: ", merged);
+    console.log("DOC_FIELD: ", docfield);
     if (dynfield) {
         console.log("dynamic field detected!");
         Search.Instance.updateDocument(merged);
-- 
cgit v1.2.3-70-g09d2


From 189eeefbb3e7f3d96d1d140beff74fcffe305786 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 3 May 2019 20:28:22 -0400
Subject: Added debugging support and added removing of unused keys in Solr

---
 .vscode/launch.json |  9 +++++++++
 package.json        |  3 ++-
 src/server/index.ts | 40 +++++++++++++++-------------------------
 3 files changed, 26 insertions(+), 26 deletions(-)

(limited to 'src')

diff --git a/.vscode/launch.json b/.vscode/launch.json
index fb91a1080..e92a4949a 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -13,6 +13,15 @@
             "url": "http://localhost:1050/login",
             "webRoot": "${workspaceFolder}",
         },
+        {
+            "type": "node",
+            "request": "attach",
+            "name": "Typescript Server",
+            "protocol": "inspector",
+            "port": 9229,
+            "localRoot": "${workspaceFolder}",
+            "remoteRoot": "."
+        },
         {
             "type": "node",
             "request": "launch",
diff --git a/package.json b/package.json
index 1eb546a80..fd794d062 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "main": "index.js",
     "scripts": {
         "start": "ts-node-dev -- src/server/index.ts",
+        "debug": "ts-node-dev --inspect -- src/server/index.ts",
         "build": "webpack --env production",
         "test": "mocha -r ts-node/register test/**/*.ts",
         "tsc": "tsc"
@@ -171,4 +172,4 @@
         "uuid": "^3.3.2",
         "xoauth2": "^1.2.0"
     }
-}
+}
\ No newline at end of file
diff --git a/src/server/index.ts b/src/server/index.ts
index b4252c2a1..f90724152 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -286,41 +286,31 @@ function GetRefField([id, callback]: [string, (result?: Transferable) => void])
     Database.Instance.getDocument(id, callback, "newDocuments");
 }
 
+const suffixMap: { [type: string]: string } = {
+    "number": "_n",
+    "string": "_t"
+};
 function UpdateField(socket: Socket, diff: Diff) {
     Database.Instance.update(diff.id, diff.diff,
         () => socket.broadcast.emit(MessageStore.UpdateField.Message, diff), false, "newDocuments");
-    //if (diff.diff === Types.Text) {
-    //Search.Instance.updateDocument({ name: "john", burns: "true" });
-    //Search.Instance.updateDocument({ id: diff.id, data: diff.diff.data });
-    //console.log("set field");
-    //}
-    const docid = { id: diff.id };
-    var docfield = diff.diff;
-    docfield = JSON.parse(JSON.stringify(docfield).split("fields.").join(""));
+    const docfield = diff.diff;
+    const update: any = { id: diff.id };
     console.log("FIELD: ", docfield);
-    var dynfield = false;
-    for (var key in docfield) {
+    let dynfield = false;
+    for (let key in docfield) {
+        if (!key.startsWith("fields.")) continue;
         const val = docfield[key];
-        if (typeof val === 'number') {
-            const new_key: string = key + "_n";
-            docfield = JSON.parse(JSON.stringify(docfield).split(key).join(new_key));
-            //docfield[new_key] = { 'set': val };
-            dynfield = true;
-        }
-        else if (typeof val === 'string') {
-            const new_key: string = key + "_t";
-            docfield = JSON.parse(JSON.stringify(docfield).split(key).join(new_key));
-            docfield[new_key] = { 'set': val };
+        const suffix = suffixMap[typeof val];
+        if (suffix !== undefined) {
+            key = key.substring(7);
+            Object.values(suffixMap).forEach(suf => update[key + suf] = null);
+            update[key + suffix] = { set: val };
             dynfield = true;
         }
     }
-    var merged = {};
-    _.extend(merged, docid, docfield);
-    console.log("MERGED: ", merged);
-    console.log("DOC_FIELD: ", docfield);
     if (dynfield) {
         console.log("dynamic field detected!");
-        Search.Instance.updateDocument(merged);
+        Search.Instance.updateDocument(update);
     }
 }
 
-- 
cgit v1.2.3-70-g09d2


From e19fdbba4cf672aee5bfb59b91b6162431d146d3 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Sat, 4 May 2019 18:48:01 -0400
Subject: queries semi work

---
 package.json         |  3 ++-
 src/debug/Test.tsx   | 19 ++++++++++++++++++-
 src/server/Search.ts | 25 +++++++++++++++++++++++++
 src/server/index.ts  |  3 +++
 4 files changed, 48 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/package.json b/package.json
index fd794d062..3393eacc6 100644
--- a/package.json
+++ b/package.json
@@ -167,9 +167,10 @@
         "serializr": "^1.5.1",
         "socket.io": "^2.2.0",
         "socket.io-client": "^2.2.0",
+        "solr-node": "^1.1.3",
         "typescript-collections": "^1.3.2",
         "url-loader": "^1.1.2",
         "uuid": "^3.3.2",
         "xoauth2": "^1.2.0"
     }
-}
\ No newline at end of file
+}
diff --git a/src/debug/Test.tsx b/src/debug/Test.tsx
index 47cfac2c1..7d72a1ba0 100644
--- a/src/debug/Test.tsx
+++ b/src/debug/Test.tsx
@@ -3,6 +3,9 @@ import * as ReactDOM from 'react-dom';
 import { serialize, deserialize, map } from 'serializr';
 import { URLField, Doc, createSchema, makeInterface, makeStrictInterface, List, ListSpec } from '../fields/NewDoc';
 import { SerializationHelper } from '../client/util/SerializationHelper';
+import { Search } from '../server/Search';
+import { restProperty } from 'babel-types';
+import * as rp from 'request-promise';
 
 const schema1 = createSchema({
     hello: "number",
@@ -76,8 +79,22 @@ class Test extends React.Component {
         // console.log(SerializationHelper.Serialize(l));
     }
 
+    onEnter = async (e: any) => {
+        var key = e.keyCode || e.which;
+        if (key === 13) {
+            var query = e.target.value;
+            await rp.get('http://localhost:1050/search', {
+                qs: {
+                    query
+                }
+            });
+        }
+    }
+
     render() {
-        return <button onClick={this.onClick}>Click me</button>;
+        return <div><button onClick={this.onClick}>Click me</button>
+            <input onKeyPress={this.onEnter}></input>
+        </div>;
     }
 }
 
diff --git a/src/server/Search.ts b/src/server/Search.ts
index 9e462f0ae..4911edd1d 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -5,6 +5,31 @@ import { thisExpression } from 'babel-types';
 export class Search {
     public static Instance = new Search();
     private url = 'http://localhost:8983/solr/';
+    private client: any;
+
+    constructor() {
+        console.log("Search Instantiated!");
+        var SolrNode = require('solr-node');
+        this.client = new SolrNode({
+            host: 'localhost',
+            port: '8983',
+            core: 'dash',
+            protocol: 'http'
+        });
+        var strQuery = this.client.query().q('text:test');
+
+        console.log(strQuery);
+
+        // Search documents using strQuery
+        // client.search(strQuery, (err: any, result: any) => {
+        //     if (err) {
+        //         console.log(err);
+        //         return;
+        //     }
+        //     console.log('Response:', result.response);
+        // });
+    }
+
 
     public async updateDocument(document: any) {
         console.log("UPDATE: ", JSON.stringify(document));
diff --git a/src/server/index.ts b/src/server/index.ts
index f90724152..f2bcd3f00 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -122,11 +122,14 @@ app.get("/pull", (req, res) =>
         res.redirect("/");
     }));
 
+// SEARCH
+
 // GETTERS
 
 app.get("/search", async (req, res) => {
     let query = req.query.query || "hello";
     let results = await Search.Instance.search(query);
+    console.log(results);
     res.send(results);
 });
 
-- 
cgit v1.2.3-70-g09d2


From c9f3a1934548169ebe3c2e97968680ff339e304e Mon Sep 17 00:00:00 2001
From: Sam Wilkins <abdullah_ahmed@brown.edu>
Date: Sat, 4 May 2019 18:59:30 -0400
Subject: initial commit - todo: use cursor field rather than generic tuple
 field

---
 .../northstar/operations/HistogramOperation.ts     |  5 +-
 src/client/util/DragManager.ts                     |  8 +--
 src/client/views/DocumentDecorations.tsx           |  2 +-
 src/client/views/PresentationView.tsx              |  4 +-
 src/client/views/PreviewCursor.tsx                 |  4 +-
 .../views/collections/CollectionDockingView.tsx    |  6 ++-
 src/client/views/collections/CollectionSubView.tsx |  9 ++--
 .../views/collections/CollectionTreeView.tsx       |  4 +-
 .../views/collections/CollectionVideoView.tsx      |  2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx |  7 +--
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  9 ++--
 src/client/views/nodes/FormattedTextBox.tsx        |  8 +--
 src/client/views/nodes/PDFBox.tsx                  |  5 +-
 src/new_fields/InkField.ts                         |  2 +-
 src/new_fields/ObjectField.ts                      |  2 +-
 src/new_fields/TupleField.ts                       | 63 ++++++++++++++++++++++
 16 files changed, 106 insertions(+), 34 deletions(-)
 create mode 100644 src/new_fields/TupleField.ts

(limited to 'src')

diff --git a/src/client/northstar/operations/HistogramOperation.ts b/src/client/northstar/operations/HistogramOperation.ts
index 5c9c832c0..78b206bdc 100644
--- a/src/client/northstar/operations/HistogramOperation.ts
+++ b/src/client/northstar/operations/HistogramOperation.ts
@@ -65,7 +65,7 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
     @computed
     public get FilterString(): string {
         if (this.OverridingFilters.length > 0) {
-            return "(" + this.OverridingFilters.filter(fm => fm != null).map(fm => fm.ToPythonString()).join(" || ") + ")";
+            return "(" + this.OverridingFilters.filter(fm => fm !== null).map(fm => fm.ToPythonString()).join(" || ") + ")";
         }
         let filterModels: FilterModel[] = [];
         return FilterModel.GetFilterModelsRecursive(this, new Set<IBaseFilterProvider>(), filterModels, true);
@@ -89,8 +89,9 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
     @action
     public DrillDown(up: boolean) {
         if (!up) {
-            if (!this.BarFilterModels.length)
+            if (!this.BarFilterModels.length) {
                 return;
+            }
             this._stackedFilters.push(this.BarFilterModels.map(f => f));
             this.OverridingFilters.length = 0;
             this.OverridingFilters.push(...this._stackedFilters[this._stackedFilters.length - 1]);
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index a3dbe6e43..8f27f5b21 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -155,9 +155,9 @@ export namespace DragManager {
     export function StartDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions) {
         StartDrag(eles, dragData, downX, downY, options,
             (dropData: { [id: string]: any }) =>
-                (dropData.droppedDocuments = dragData.userDropAction == "alias" || (!dragData.userDropAction && dragData.dropAction == "alias") ?
+                (dropData.droppedDocuments = dragData.userDropAction === "alias" || (!dragData.userDropAction && dragData.dropAction === "alias") ?
                     dragData.draggedDocuments.map(d => Doc.MakeAlias(d)) :
-                    dragData.userDropAction == "copy" || (!dragData.userDropAction && dragData.dropAction == "copy") ?
+                    dragData.userDropAction === "copy" || (!dragData.userDropAction && dragData.dropAction === "copy") ?
                         dragData.draggedDocuments.map(d => Doc.MakeCopy(d, true)) :
                         dragData.draggedDocuments));
     }
@@ -280,7 +280,7 @@ export namespace DragManager {
         };
 
         let hideDragElements = () => {
-            dragElements.map(dragElement => dragElement.parentNode == dragDiv && dragDiv.removeChild(dragElement));
+            dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement));
             eles.map(ele => (ele.hidden = false));
         };
         let endDrag = () => {
@@ -289,7 +289,7 @@ export namespace DragManager {
             if (options) {
                 options.handlers.dragComplete({});
             }
-        }
+        };
 
         AbortDrag = () => {
             hideDragElements();
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 693d6ec55..16e5b6b48 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -278,7 +278,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             iconDoc = this.createIcon([docView], layout);
         }
         if (SelectionManager.SelectedDocuments()[0].props.addDocument !== undefined) {
-            SelectionManager.SelectedDocuments()[0].props.addDocument!(iconDoc!);
+            SelectionManager.SelectedDocuments()[0].props.addDocument!(iconDoc);
         }
         return iconDoc;
     }
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index b4c12d057..d8bdbacca 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
-import React = require("react")
+import React = require("react");
 import { observable, action } from "mobx";
-import "./PresentationView.scss"
+import "./PresentationView.scss";
 import "./Main.tsx";
 import { DocumentManager } from "../util/DocumentManager";
 import { Utils } from "../../Utils";
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 4359ba093..9520f489c 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -17,7 +17,7 @@ export class PreviewCursor extends React.Component<{}> {
 
     constructor(props: any) {
         super(props);
-        document.addEventListener("keydown", this.onKeyPress)
+        document.addEventListener("keydown", this.onKeyPress);
     }
 
     @action
@@ -27,7 +27,7 @@ export class PreviewCursor extends React.Component<{}> {
         // the keyPress here.
         //if not these keys, make a textbox if preview cursor is active!
         if (e.key.startsWith("F") && !e.key.endsWith("F")) {
-        } else if (e.key != "Escape" && e.key != "Alt" && e.key != "Shift" && e.key != "Meta" && e.key != "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
+        } else if (e.key !== "Escape" && e.key !== "Alt" && e.key !== "Shift" && e.key !== "Meta" && e.key !== "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
             if ((!e.ctrlKey && !e.metaKey) || e.key === "v") {
                 PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
                 PreviewCursor.Visible = false;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index cfb1aef7d..725f0ab51 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -350,13 +350,15 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; }
 
     get content() {
-        if (!this._document)
+        if (!this._document) {
             return (null);
+        }
         return (
             <div className="collectionDockingView-content" ref={this._mainCont}
                 style={{ transform: `translate(${this.previewPanelCenteringOffset}px, 0px)` }}>
-                <DocumentView key={this._document![Id]} Document={this._document!}
+                <DocumentView key={this._document[Id]} Document={this._document}
                     toggleMinimized={emptyFunction}
+                    bringToFront={emptyFunction}
                     addDocument={undefined}
                     removeDocument={undefined}
                     ContentScaling={this.contentScaling}
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 828ac880a..1e8723fc6 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -17,6 +17,7 @@ import { Cast, PromiseValue, FieldValue } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { DocServer } from "../../DocServer";
 import { ObjectField } from "../../../new_fields/ObjectField";
+import { TupleField } from "../../../new_fields/TupleField";
 
 export interface CollectionViewProps extends FieldViewProps {
     addDocument: (document: Doc, allowDuplicates?: boolean) => boolean;
@@ -66,12 +67,12 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
                 if (!proto) {
                     return;
                 }
-                let cursors = await Cast(proto.cursors, listSpec(ObjectField));
+                let cursors = await Cast(proto!.cursors, listSpec(TupleField));
                 if (!cursors) {
-                    proto.cursors = cursors = new List<ObjectField>();
+                    proto!.cursors = cursors = new List<TupleField<[]>>();
                 }
-                if (cursors.length > 0 && (ind = cursors.findIndex(entry => entry.Data[0][0] === id)) > -1) {
-                    cursors[ind].Data[1] = position;
+                if (cursors!.length > 0 && (ind = cursors!.findIndex(entry => entry.data[0][0] === id)) > -1) {
+                    cursors![ind].data[1] = position;
                 } else {
                     let entry = new TupleField<[string, string], [number, number]>([textInfo, position]);
                     cursors.push(entry);
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index b67d6f965..7898d74ce 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -117,8 +117,8 @@ class TreeView extends React.Component<TreeViewProps> {
         }
     }
 
-    onPointerEnter = (e: React.PointerEvent): void => { this.props.document.libraryBrush = true; }
-    onPointerLeave = (e: React.PointerEvent): void => { this.props.document.libraryBrush = false; }
+    onPointerEnter = (e: React.PointerEvent): void => { this.props.document.libraryBrush = true; };
+    onPointerLeave = (e: React.PointerEvent): void => { this.props.document.libraryBrush = false; };
 
     render() {
         let bulletType = BulletType.List;
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 9dee217cb..cb3fd1ba4 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -90,7 +90,7 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
         }
     }
 
-    setVideoBox = (player: VideoBox) => { this._videoBox = player; }
+    setVideoBox = (player: VideoBox) => { this._videoBox = player; };
 
     private subView = (_type: CollectionViewType, renderProps: CollectionRenderProps) => {
         let props = { ...this.props, ...renderProps };
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 8c81f6990..a9e627188 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -139,7 +139,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         if (this._commandExecuted) {
             return;
         }
-        if (e.key === "Backspace" || e.key === "Delete" || e.key == "d") {
+        if (e.key === "Backspace" || e.key === "Delete" || e.key === "d") {
             this._commandExecuted = true;
             this.marqueeSelect().map(d => this.props.removeDocument(d));
             let ink = Cast(this.props.container.props.Document.ink, InkField);
@@ -154,8 +154,9 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             e.stopPropagation();
             let bounds = this.Bounds;
             let selected = this.marqueeSelect().map(d => {
-                if (e.key !== "r")
+                if (e.key !== "r") {
                     this.props.removeDocument(d);
+                }
                 d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
                 d.y = NumCast(d.y) - bounds.top - bounds.height / 2;
                 d.page = -1;
@@ -194,7 +195,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     let maxy = NumCast(maximizedDoc.y, undefined);
                     let maxw = NumCast(maximizedDoc.width, undefined);
                     let maxh = NumCast(maximizedDoc.height, undefined);
-                    maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), 0])
+                    maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), 0]);
                 });
             }
             else {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 2ba0458f5..6186cf348 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -148,7 +148,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                         maxw !== undefined && maxh !== undefined) {
                         let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(minx, miny);
                         maximizedDoc.isMinimized = false;
-                        maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), isMinimized ? 1 : 0])
+                        maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), isMinimized ? 1 : 0]);
                     }
                 }
             });
@@ -167,16 +167,17 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             if (await BoolCast(this.props.Document.isButton, false)) {
                 let maximizedDocs = await Cast(this.props.Document.maximizedDocs, listSpec(Doc));
                 if (maximizedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    if (ctrlKey)
+                    if (ctrlKey) {
                         this.props.addDocument && maximizedDocs.filter(d => d instanceof Doc).map(maxDoc => this.props.addDocument!(maxDoc, false));
+                    }
                     this.toggleIcon();
                 }
             }
         }
     }
 
-    onPointerEnter = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = true; }
-    onPointerLeave = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = false; }
+    onPointerEnter = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = true; };
+    onPointerLeave = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = false; };
 
     borderRounding = () => {
         let br = NumCast(this.props.Document.borderRounding);
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index eeb60cb3d..3873dfd62 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -91,7 +91,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 let titlestr = str.substr(0, Math.min(40, str.length));
                 let target = this.props.Document.proto ? this.props.Document.proto : this.props.Document;
                 target.title = "-" + titlestr + (str.length > 40 ? "..." : "");
-            };
+            }
         }
     }
 
@@ -176,8 +176,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.button === 0 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) {
             e.stopPropagation();
-            if (this._toolTipTextMenu && this._toolTipTextMenu.tooltip)
+            if (this._toolTipTextMenu && this._toolTipTextMenu.tooltip) {
                 this._toolTipTextMenu.tooltip.style.opacity = "0";
+            }
         }
         if (e.button === 2 || (e.button === 0 && e.ctrlKey)) {
             this._gotDown = true;
@@ -185,8 +186,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         }
     }
     onPointerUp = (e: React.PointerEvent): void => {
-        if (this._toolTipTextMenu && this._toolTipTextMenu.tooltip)
+        if (this._toolTipTextMenu && this._toolTipTextMenu.tooltip) {
             this._toolTipTextMenu.tooltip.style.opacity = "1";
+        }
         if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
             e.stopPropagation();
         }
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index eb45ea273..caa66cbeb 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -215,8 +215,9 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
             if (e.altKey) {
                 this._alt = true;
             } else {
-                if (e.metaKey)
+                if (e.metaKey) {
                     e.stopPropagation();
+                }
             }
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
@@ -286,7 +287,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     renderHeight = 2400;
     @computed
     get pdfPage() {
-        return <Page height={this.renderHeight} pageNumber={this.curPage} onLoadSuccess={this.onLoaded} />
+        return <Page height={this.renderHeight} pageNumber={this.curPage} onLoadSuccess={this.onLoaded} />;
     }
     @computed
     get pdfContent() {
diff --git a/src/new_fields/InkField.ts b/src/new_fields/InkField.ts
index 86a8bd18a..a3157857f 100644
--- a/src/new_fields/InkField.ts
+++ b/src/new_fields/InkField.ts
@@ -39,6 +39,6 @@ export class InkField extends ObjectField {
     }
 
     [Copy]() {
-        return new InkField(deepCopy(this.inkData))
+        return new InkField(deepCopy(this.inkData));
     }
 }
diff --git a/src/new_fields/ObjectField.ts b/src/new_fields/ObjectField.ts
index 0f3777af6..715c6a924 100644
--- a/src/new_fields/ObjectField.ts
+++ b/src/new_fields/ObjectField.ts
@@ -5,7 +5,7 @@ export const Parent = Symbol("Parent");
 export const Copy = Symbol("Copy");
 
 export abstract class ObjectField {
-    protected [OnUpdate]?: (diff?: any) => void;
+    protected [OnUpdate](diff?: any) { };
     private [Parent]?: Doc;
     abstract [Copy](): ObjectField;
 }
diff --git a/src/new_fields/TupleField.ts b/src/new_fields/TupleField.ts
new file mode 100644
index 000000000..1ff57fefc
--- /dev/null
+++ b/src/new_fields/TupleField.ts
@@ -0,0 +1,63 @@
+import { ObjectField, Copy } from "./ObjectField";
+import { IObservableArray, IArrayChange, IArraySplice, observe, Lambda, observable } from "mobx";
+import { UndoManager } from "../client/util/UndoManager";
+import { Field } from "./Doc";
+import { Deserializable } from "../client/util/SerializationHelper";
+import { serializable, createSimpleSchema, list, object } from "serializr";
+import { array } from "prop-types";
+
+const tupleSchema = createSimpleSchema({
+
+});
+
+@Deserializable("tuple")
+export class TupleField<T, U> extends ObjectField {
+
+
+    @serializable(list(object(tupleSchema)))
+    private Data: [T, U];
+
+    public get data() {
+        return this.Data;
+    }
+
+    constructor(data: [T, U]) {
+        super();
+        this.Data = data;
+        this.observeTuple();
+    }
+
+    private observeDisposer: Lambda | undefined;
+    private observeTuple(): void {
+        this.observeDisposer = observe(this.Data as (T | U)[] as IObservableArray<T | U>, (change: IArrayChange<T | U> | IArraySplice<T | U>) => {
+            if (change.type === "update") {
+                UndoManager.AddEvent({
+                    undo: () => this.Data[change.index] = change.oldValue,
+                    redo: () => this.Data[change.index] = change.newValue
+                });
+            } else {
+                throw new Error("Why are you messing with the length of a tuple, huh?");
+            }
+        });
+    }
+
+    protected setData(value: [T, U]) {
+        if (this.observeDisposer) {
+            this.observeDisposer();
+        }
+        this.Data = observable(value) as (T | U)[] as [T, U];
+        this.observeTuple();
+    }
+
+    UpdateFromServer(values: [T, U]) {
+        this.setData(values);
+    }
+
+    ToScriptString(): string {
+        return `new TupleField([${this.Data[0], this.Data[1]}])`;
+    }
+
+    [Copy]() {
+        return new TupleField<T, U>(this.Data);
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From af2e5dbf49e0e82d76f267c681761968d4bafc62 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 4 May 2019 23:03:49 -0400
Subject: fixed tree view.  added non-data keys.

---
 src/client/views/Main.scss                         |  1 +
 .../views/collections/CollectionTreeView.scss      | 17 +++++++---
 .../views/collections/CollectionTreeView.tsx       | 37 ++++++++++++++--------
 src/new_fields/Doc.ts                              |  2 +-
 4 files changed, 38 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index cbf920793..5c5c252e9 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -182,6 +182,7 @@ button:hover {
     top: 0;
     left: 0;
     overflow: scroll;
+    z-index: 1;
 }
 #mainContent-div {
     width: 100%;
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 19d4abc05..6ce13cf56 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -33,9 +33,10 @@
     }
 
     .bullet {
-        position: absolute;
-        width: 1.5em;
-        display: inline-block;
+        float:left;
+        position: relative;
+        width: 15px;
+        display: block;
         color: $intermediate-color;
         margin-top: 3px;
         transform: scale(1.3,1.3);
@@ -50,7 +51,7 @@
     .docContainer {
         margin-left: 10px;
         display: block;
-        width: max-content;
+        width:100%;//width: max-content;
     }
 
     .docContainer:hover {
@@ -59,6 +60,9 @@
             // width: auto;
         }
     }
+    .editableView-container {
+        font-weight: bold;
+    }
 
     .delete-button {
         color: $intermediate-color;
@@ -67,4 +71,9 @@
         // margin-top: 3px;
         display: inline;
     }
+
+    .collectionTreeView-keyHeader {
+        font-style: italic;
+        font-size: 8pt;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index b67d6f965..17109508d 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -18,6 +18,8 @@ import { Main } from '../Main';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
 import { CollectionDockingView } from './CollectionDockingView';
 import { DocumentManager } from '../../util/DocumentManager';
+import { Utils } from '../../../Utils';
+import { List } from '../../../new_fields/List';
 
 
 export interface TreeViewProps {
@@ -122,17 +124,25 @@ class TreeView extends React.Component<TreeViewProps> {
 
     render() {
         let bulletType = BulletType.List;
-        let contentElement: JSX.Element | null = (null);
-        var children = Cast(this.props.document.data, listSpec(Doc));
-        if (children) { // add children for a collection
-            if (!this._collapsed) {
-                bulletType = BulletType.Collapsible;
-                contentElement = <ul>
-                    {TreeView.GetChildElements(children, this.remove, this.move, this.props.dropAction)}
-                </ul >;
-            }
-            else bulletType = BulletType.Collapsed;
+        let contentElement: (JSX.Element | null)[] = [];
+        let keys = Array.from(Object.keys(this.props.document));
+        if (this.props.document.proto instanceof Doc) {
+            keys.push(...Array.from(Object.keys(this.props.document.proto)));
         }
+        keys.map(key => {
+            let docList = Cast(this.props.document[key], listSpec(Doc));
+            if (docList instanceof List && docList.length && docList[0] instanceof Doc) {
+                if (!this._collapsed) {
+                    bulletType = BulletType.Collapsible;
+                    contentElement.push(<ul key={key + "more"}>
+                        {(key === "data") ? (null) :
+                            <span className="collectionTreeView-keyHeader" key={key}>{key}</span>}
+                        {TreeView.GetChildElements(docList, key !== "data", this.remove, this.move, this.props.dropAction)}
+                    </ul >);
+                } else
+                    bulletType = BulletType.Collapsed;
+            }
+        });
         return <div className="treeViewItem-container"
             style={{ background: BoolCast(this.props.document.libraryBrush, false) ? "#06121212" : "0" }}
             onContextMenu={this.onWorkspaceContextMenu}
@@ -144,8 +154,8 @@ class TreeView extends React.Component<TreeViewProps> {
             </li>
         </div>;
     }
-    public static GetChildElements(docs: Doc[], remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) {
-        return docs.filter(child => !child.excludeFromLibrary).filter(doc => FieldValue(doc)).map(child =>
+    public static GetChildElements(docs: Doc[], allowMinimized: boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) {
+        return docs.filter(child => !child.excludeFromLibrary && (allowMinimized || !child.isMinimized)).filter(doc => FieldValue(doc)).map(child =>
             <TreeView document={child} key={child[Id]} deleteDoc={remove} moveDocument={move} dropAction={dropAction} />);
     }
 }
@@ -168,13 +178,12 @@ export class CollectionTreeView extends CollectionSubView(Document) {
         }
     }
     render() {
-        trace();
         const children = this.children;
         let dropAction = StrCast(this.props.Document.dropAction, "alias") as dropActionType;
         if (!children) {
             return (null);
         }
-        let childElements = TreeView.GetChildElements(children, this.remove, this.props.moveDocument, dropAction);
+        let childElements = TreeView.GetChildElements(children, false, this.remove, this.props.moveDocument, dropAction);
 
         return (
             <div id="body" className="collectionTreeView-dropTarget"
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 3055af1bf..b2863c632 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -186,7 +186,7 @@ export namespace Doc {
         UndoManager.RunInBatch(() => {
             let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 });
             //let linkDoc = new Doc;
-            linkDoc.title = "-link name-";
+            linkDoc.proto!.title = "-link name-";
             linkDoc.linkDescription = "";
             linkDoc.linkTags = "Default";
 
-- 
cgit v1.2.3-70-g09d2


From 7d35ba0df5be5f3c2cd95c0f0d148c0c9c04de7a Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 5 May 2019 00:54:44 -0400
Subject: fix duplicate goldenlayout caused by presentation view

---
 src/client/views/Main.tsx             |  9 +----
 src/client/views/PresentationView.tsx | 62 ++++++++++++++++++++++-------------
 2 files changed, 41 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index c3b48d20f..1a9b1cf3c 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -51,9 +51,6 @@ export class Main extends React.Component {
     }
     private set mainContainer(doc: Opt<Doc>) {
         if (doc) {
-            if (!("presentationView" in doc)) {
-                doc.presentationView = new Doc();
-            }
             CurrentUserUtils.UserDocument.activeWorkspace = doc;
         }
     }
@@ -180,11 +177,7 @@ export class Main extends React.Component {
 
     @computed
     get presentationView() {
-        if (this.mainContainer) {
-            let presentation = FieldValue(Cast(this.mainContainer.presentationView, Doc));
-            return presentation ? <PresentationView Document={presentation} key="presentation" /> : (null);
-        }
-        return (null);
+        return <PresentationView key="presentation" />;
     }
 
     @computed
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index b4c12d057..f2d685443 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -1,18 +1,19 @@
 import { observer } from "mobx-react";
 import React = require("react")
-import { observable, action } from "mobx";
+import { observable, action, runInAction, reaction } from "mobx";
 import "./PresentationView.scss"
 import "./Main.tsx";
 import { DocumentManager } from "../util/DocumentManager";
 import { Utils } from "../../Utils";
 import { Doc } from "../../new_fields/Doc";
 import { listSpec } from "../../new_fields/Schema";
-import { Cast, NumCast, FieldValue } from "../../new_fields/Types";
+import { Cast, NumCast, FieldValue, PromiseValue } from "../../new_fields/Types";
 import { Id } from "../../new_fields/RefField";
 import { List } from "../../new_fields/List";
+import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 
 export interface PresViewProps {
-    Document: Doc;
+    //Document: Doc;
 }
 
 
@@ -22,6 +23,11 @@ export interface PresViewProps {
  */
 class PresentationViewItem extends React.Component<PresViewProps> {
 
+    @observable Document?: Doc;
+    constructor(props: PresViewProps) {
+        super(props);
+        this.Document = FieldValue(Cast(FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc))!.presentationView, Doc))!;
+    }
     //look at CollectionFreeformView.focusDocument(d)
     @action
     openDoc = (doc: Doc) => {
@@ -36,7 +42,7 @@ class PresentationViewItem extends React.Component<PresViewProps> {
   **/
     @action
     public RemoveDoc(doc: Doc) {
-        const value = Cast(this.props.Document.data, listSpec(Doc), []);
+        const value = Cast(this.Document!.data, listSpec(Doc), []);
         let index = -1;
         for (let i = 0; i < value.length; i++) {
             if (value[i][Id] === doc[Id]) {
@@ -57,10 +63,10 @@ class PresentationViewItem extends React.Component<PresViewProps> {
         let title = document.title;
 
         //to get currently selected presentation doc
-        let selected = NumCast(this.props.Document.selectedDoc, 0);
+        let selected = NumCast(this.Document!.selectedDoc, 0);
 
         // finally, if it's a normal document, then render it as such.
-        const children = Cast(this.props.Document.data, listSpec(Doc));
+        const children = Cast(this.Document!.data, listSpec(Doc));
         const styles: any = {};
         if (children && children[selected] === document) {
             //this doc is selected
@@ -76,7 +82,7 @@ class PresentationViewItem extends React.Component<PresViewProps> {
     }
 
     render() {
-        const children = Cast(this.props.Document.data, listSpec(Doc), []);
+        const children = Cast(this.Document!.data, listSpec(Doc), []);
 
         return (
             <div>
@@ -94,13 +100,13 @@ export class PresentationView extends React.Component<PresViewProps>  {
     //observable means render is re-called every time variable is changed
     @observable
     collapsed: boolean = false;
-    closePresentation = action(() => this.props.Document.width = 0);
+    closePresentation = action(() => this.Document!.width = 0);
     next = () => {
-        const current = NumCast(this.props.Document.selectedDoc);
-        const allDocs = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        const current = NumCast(this.Document!.selectedDoc);
+        const allDocs = FieldValue(Cast(this.Document!.data, listSpec(Doc)));
         if (allDocs && current < allDocs.length + 1) {
             //can move forwards
-            this.props.Document.selectedDoc = current + 1;
+            this.Document!.selectedDoc = current + 1;
             const doc = allDocs[current + 1];
             let docView = DocumentManager.Instance.getDocumentView(doc);
             if (docView) {
@@ -110,11 +116,11 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     }
     back = () => {
-        const current = NumCast(this.props.Document.selectedDoc);
-        const allDocs = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        const current = NumCast(this.Document!.selectedDoc);
+        const allDocs = FieldValue(Cast(this.Document!.data, listSpec(Doc)));
         if (allDocs && current - 1 >= 0) {
             //can move forwards
-            this.props.Document.selectedDoc = current - 1;
+            this.Document!.selectedDoc = current - 1;
             const doc = allDocs[current - 1];
             let docView = DocumentManager.Instance.getDocumentView(doc);
             if (docView) {
@@ -125,9 +131,21 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
     private ref = React.createRef<HTMLDivElement>();
 
+    @observable Document?: Doc;
     //initilize class variables
     constructor(props: PresViewProps) {
         super(props);
+        let self = this;
+        reaction(() =>
+            CurrentUserUtils.UserDocument.activeWorkspace,
+            (activeW) => {
+                if (activeW && activeW instanceof Doc) {
+                    PromiseValue(Cast(activeW.presentationView, Doc)).
+                        then(pv => runInAction(() =>
+                            self.Document = pv ? pv : (activeW.presentationView = new Doc())))
+                }
+            },
+            { fireImmediately: true });
         PresentationView.Instance = this;
     }
 
@@ -137,19 +155,21 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @action
     public PinDoc(doc: Doc) {
         //add this new doc to props.Document
-        const data = Cast(this.props.Document.data, listSpec(Doc));
+        const data = Cast(this.Document!.data, listSpec(Doc));
         if (data) {
             data.push(doc);
         } else {
-            this.props.Document.data = new List([doc]);
+            this.Document!.data = new List([doc]);
         }
 
-        this.props.Document.width = 300;
+        this.Document!.width = 300;
     }
 
     render() {
-        let titleStr = this.props.Document.Title;
-        let width = NumCast(this.props.Document.width);
+        if (!this.Document)
+            return (null);
+        let titleStr = this.Document.Title;
+        let width = NumCast(this.Document.width);
 
         //TODO: next and back should be icons
         return (
@@ -163,9 +183,7 @@ export class PresentationView extends React.Component<PresViewProps>  {
 
                 </div>
                 <ul>
-                    <PresentationViewItem
-                        Document={this.props.Document}
-                    />
+                    <PresentationViewItem />
                 </ul>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 9a00685a16ba70f9bed18979508f17f316965045 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 5 May 2019 00:57:12 -0400
Subject: from last

---
 src/client/views/Main.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 1a9b1cf3c..617580332 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -174,19 +174,12 @@ export class Main extends React.Component {
             }
         }, 100);
     }
-
-    @computed
-    get presentationView() {
-        return <PresentationView key="presentation" />;
-    }
-
     @computed
     get mainContent() {
         let pwidthFunc = () => this.pwidth;
         let pheightFunc = () => this.pheight;
         let noScaling = () => 1;
         let mainCont = this.mainContainer;
-        let pcontent = this.presentationView;
         return <Measure onResize={action((r: any) => { this.pwidth = r.entry.width; this.pheight = r.entry.height; })}>
             {({ measureRef }) =>
                 <div ref={measureRef} id="mainContent-div">
@@ -206,7 +199,7 @@ export class Main extends React.Component {
                             whenActiveChanged={emptyFunction}
                             bringToFront={emptyFunction}
                             ContainingCollectionView={undefined} />}
-                    {pcontent}
+                    <PresentationView key="presentation" />
                 </div>
             }
         </Measure>;
-- 
cgit v1.2.3-70-g09d2


From c04cd067dbfd7a3ad439bd66dc9b8914c03a95ae Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 5 May 2019 14:07:06 -0400
Subject: fixed undo when closing tabs

---
 .../views/collections/CollectionDockingView.tsx       | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index cfb1aef7d..98a6ffceb 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -231,6 +231,10 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
     @undoBatch
     stateChanged = () => {
+        let docs = Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc));
+        CollectionDockingView.Instance._removedDocs.map(theDoc =>
+            docs && docs.indexOf(theDoc) !== -1 && docs.splice(docs.indexOf(theDoc), 1));
+        CollectionDockingView.Instance._removedDocs.length = 0;
         var json = JSON.stringify(this._goldenLayout.toConfig());
         this.props.Document.dockingConfig = json;
         if (this.undohack && !this.hack) {
@@ -275,19 +279,19 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             });
         }
         tab.closeElement.off('click') //unbind the current click handler
-            .click(function () {
+            .click(async function () {
                 if (tab.reactionDisposer) {
                     tab.reactionDisposer();
                 }
-                DocServer.GetRefField(tab.contentItem.config.props.documentId).then(async f => runInAction(() => {
-                    if (f instanceof Doc) {
-                        let docs = Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc));
-                        docs && docs.indexOf(f) !== -1 && docs.splice(docs.indexOf(f), 1);
-                    }
-                }));
+                let doc = await DocServer.GetRefField(tab.contentItem.config.props.documentId);
+                if (doc instanceof Doc) {
+                    let theDoc = doc;
+                    CollectionDockingView.Instance._removedDocs.push(theDoc.proto ? theDoc.proto : theDoc);
+                }
                 tab.contentItem.remove();
             });
     }
+    _removedDocs: Doc[] = [];
 
     stackCreated = (stack: any) => {
         //stack.header.controlsContainer.find('.lm_popout').hide();
@@ -368,6 +372,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     parentActive={returnTrue}
                     whenActiveChanged={emptyFunction}
                     focus={emptyFunction}
+                    bringToFront={emptyFunction}
                     ContainingCollectionView={undefined} />
             </div >);
     }
-- 
cgit v1.2.3-70-g09d2


From 237dd0b1280c3f880a1eab9e3cd02b4f882811a5 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 5 May 2019 14:16:07 -0400
Subject: from last

---
 src/client/views/collections/CollectionDockingView.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 98a6ffceb..3bee24c2f 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -233,7 +233,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     stateChanged = () => {
         let docs = Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc));
         CollectionDockingView.Instance._removedDocs.map(theDoc =>
-            docs && docs.indexOf(theDoc) !== -1 && docs.splice(docs.indexOf(theDoc), 1));
+            docs && docs.indexOf(theDoc) !== -1 &&
+            docs.splice(docs.indexOf(theDoc), 1));
         CollectionDockingView.Instance._removedDocs.length = 0;
         var json = JSON.stringify(this._goldenLayout.toConfig());
         this.props.Document.dockingConfig = json;
@@ -286,7 +287,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 let doc = await DocServer.GetRefField(tab.contentItem.config.props.documentId);
                 if (doc instanceof Doc) {
                     let theDoc = doc;
-                    CollectionDockingView.Instance._removedDocs.push(theDoc.proto ? theDoc.proto : theDoc);
+                    CollectionDockingView.Instance._removedDocs.push(theDoc);
                 }
                 tab.contentItem.remove();
             });
-- 
cgit v1.2.3-70-g09d2


From 68d18976359434c46cc9bde3df6fbe708021761e Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 5 May 2019 15:10:18 -0400
Subject: fixed problem with annotations being added to view document instead
 of proto.  added keyvalue indication for fields that only exist on prootype

---
 src/client/views/collections/CollectionBaseView.tsx   | 4 ++--
 src/client/views/collections/CollectionSchemaView.tsx | 1 +
 src/client/views/nodes/KeyValuePair.tsx               | 4 +++-
 3 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 76adfcdcd..cbb568c07 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -100,12 +100,12 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
                     value.push(doc);
                 }
             } else {
-                this.props.Document[this.props.fieldKey] = new List([doc]);
+                Doc.SetOnPrototype(this.props.Document, this.props.fieldKey, new List([doc]));
             }
             // set the ZoomBasis only if hasn't already been set -- bcz: maybe set/resetting the ZoomBasis should be a parameter to addDocument?
             if (this.collectionViewType === CollectionViewType.Freeform || this.collectionViewType === CollectionViewType.Invalid) {
                 let zoom = NumCast(this.props.Document.scale, 1);
-                doc.zoomBasis = zoom;
+                Doc.SetOnPrototype(doc, "zoomBasis", zoom);
             }
         }
         return true;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 67784fa81..4fee9db85 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -268,6 +268,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                         focus={emptyFunction}
                         parentActive={this.props.active}
                         whenActiveChanged={this.props.whenActiveChanged}
+                        bringToFront={emptyFunction}
                     />
                 </div>
                 <input className="collectionSchemaView-input" value={this.previewScript} onChange={this.onPreviewScriptChange}
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 235792cbe..203fb5625 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -40,6 +40,7 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             PanelHeight: returnZero,
         };
         let contents = <FieldView {...props} />;
+        let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")";
         return (
             <tr className={this.props.rowStyle}>
                 <td className="keyValuePair-td-key" style={{ width: `${this.props.keyWidth}%` }}>
@@ -50,11 +51,12 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                         }}>
                             X
                         </button>
-                        <div className="keyValuePair-keyField">{this.props.keyName}</div>
+                        <div className="keyValuePair-keyField">{fieldKey}</div>
                     </div>
                 </td>
                 <td className="keyValuePair-td-value" style={{ width: `${100 - this.props.keyWidth}%` }}>
                     <EditableView contents={contents} height={36} GetValue={() => {
+
                         let field = FieldValue(props.Document[props.fieldKey]);
                         if (field) {
                             //TODO Types
-- 
cgit v1.2.3-70-g09d2


From 09a471ac693e8178598c0d953b83868db9e4c8b4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 5 May 2019 18:24:13 -0400
Subject: fixed link titles, kvp title, and closing a stack of tabs

---
 src/client/views/collections/CollectionDockingView.tsx | 10 ++++++++++
 src/client/views/nodes/DocumentView.tsx                |  2 +-
 src/client/views/nodes/LinkEditor.tsx                  |  5 +++--
 3 files changed, 14 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 3bee24c2f..278065479 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -309,6 +309,16 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 var url = DocServer.prepend("/doc/" + stack.contentItems[0].tab.contentItem.config.props.documentId);
                 let win = window.open(url, stack.contentItems[0].tab.title, "width=300,height=400");
             }));
+        stack.header.controlsContainer.find('.lm_close') //unbind the current click handler
+            .click(async function () {
+                stack.contentItems.map(async (contentItem: any) => {
+                    let doc = await DocServer.GetRefField(contentItem.config.props.documentId);
+                    if (doc instanceof Doc) {
+                        let theDoc = doc;
+                        CollectionDockingView.Instance._removedDocs.push(theDoc);
+                    }
+                });
+            });
     }
 
     render() {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index fd012e7ea..096a02d9b 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -198,7 +198,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this.props.removeDocument && this.props.removeDocument(this.props.Document);
     }
     fieldsClicked = (e: React.MouseEvent): void => {
-        let kvp = Docs.KVPDocument(this.props.Document, { width: 300, height: 300 });
+        let kvp = Docs.KVPDocument(this.props.Document, { title: this.props.Document.title + ".kvp", width: 300, height: 300 });
         CollectionDockingView.Instance.AddRightSplit(kvp);
     }
     makeButton = (e: React.MouseEvent): void => {
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index f82c6e9cb..71a423338 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -24,8 +24,9 @@ export class LinkEditor extends React.Component<Props> {
     onSaveButtonPressed = (e: React.PointerEvent): void => {
         e.stopPropagation();
 
-        this.props.linkDoc.title = this._nameInput;
-        this.props.linkDoc.linkDescription = this._descriptionInput;
+        let linkDoc = this.props.linkDoc.proto ? this.props.linkDoc.proto : this.props.linkDoc;
+        linkDoc.title = this._nameInput;
+        linkDoc.linkDescription = this._descriptionInput;
 
         this.props.showLinks();
     }
-- 
cgit v1.2.3-70-g09d2


From f63217890738e738dfa0e8eca3f8a8996440373e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 6 May 2019 00:25:12 -0400
Subject: Small change in presentation view

---
 src/client/views/PresentationView.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index f2d685443..4853eb151 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -23,7 +23,7 @@ export interface PresViewProps {
  */
 class PresentationViewItem extends React.Component<PresViewProps> {
 
-    @observable Document?: Doc;
+    @observable Document: Doc;
     constructor(props: PresViewProps) {
         super(props);
         this.Document = FieldValue(Cast(FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc))!.presentationView, Doc))!;
@@ -42,7 +42,7 @@ class PresentationViewItem extends React.Component<PresViewProps> {
   **/
     @action
     public RemoveDoc(doc: Doc) {
-        const value = Cast(this.Document!.data, listSpec(Doc), []);
+        const value = Cast(this.Document.data, listSpec(Doc), []);
         let index = -1;
         for (let i = 0; i < value.length; i++) {
             if (value[i][Id] === doc[Id]) {
@@ -63,10 +63,10 @@ class PresentationViewItem extends React.Component<PresViewProps> {
         let title = document.title;
 
         //to get currently selected presentation doc
-        let selected = NumCast(this.Document!.selectedDoc, 0);
+        let selected = NumCast(this.Document.selectedDoc, 0);
 
         // finally, if it's a normal document, then render it as such.
-        const children = Cast(this.Document!.data, listSpec(Doc));
+        const children = Cast(this.Document.data, listSpec(Doc));
         const styles: any = {};
         if (children && children[selected] === document) {
             //this doc is selected
@@ -82,7 +82,7 @@ class PresentationViewItem extends React.Component<PresViewProps> {
     }
 
     render() {
-        const children = Cast(this.Document!.data, listSpec(Doc), []);
+        const children = Cast(this.Document.data, listSpec(Doc), []);
 
         return (
             <div>
-- 
cgit v1.2.3-70-g09d2


From 9830eb15041fa8e99ef8f5bb6fdcf6b3c28c058d Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 6 May 2019 01:10:14 -0400
Subject: added start of "minimap" support via better buttons and summaries.

---
 .../views/collections/CollectionDockingView.tsx    | 36 +++++++++++++++++---
 .../views/collections/CollectionTreeView.scss      | 39 +++++++++++++---------
 .../views/collections/CollectionTreeView.tsx       | 13 +++++---
 .../collections/collectionFreeForm/MarqueeView.tsx | 37 ++++++++++++--------
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 28 +++++++++++++---
 src/client/views/nodes/DocumentView.tsx            |  9 ++---
 src/client/views/nodes/FormattedTextBox.tsx        |  4 +--
 7 files changed, 118 insertions(+), 48 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 278065479..e4f02a4bc 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -72,6 +72,37 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
 
+    @undoBatch
+    @action
+    public CloseRightSplit(document: Doc) {
+        if (this._goldenLayout.root.contentItems[0].isRow) {
+            this._goldenLayout.root.contentItems[0].contentItems.map((child: any, i: number) => {
+                if (child.contentItems.length === 1 && child.contentItems[0].config.component === "DocumentFrameRenderer" &&
+                    child.contentItems[0].config.props.documentId == document[Id]) {
+                    child.contentItems[0].remove();
+                    //this._goldenLayout.root.contentItems[0].contentItems.splice(i, 1);
+                    this.layoutChanged(document);
+                } else
+                    child.contentItems.map((tab: any, j: number) => {
+                        if (tab.config.component === "DocumentFrameRenderer" && tab.config.props.documentId === document[Id]) {
+                            child.contentItems[j].remove();
+                            let docs = Cast(this.props.Document.data, listSpec(Doc));
+                            docs && docs.indexOf(document) !== -1 && docs.splice(docs.indexOf(document), 1);
+                        }
+                    });
+            })
+        }
+    }
+
+    @action
+    layoutChanged(removed?: Doc) {
+        this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
+        this._goldenLayout.emit('sbcreteChanged');
+        this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig());
+        if (removed) CollectionDockingView.Instance._removedDocs.push(removed);
+        this.stateChanged();
+    }
+
     //
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
@@ -107,10 +138,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             newContentItem.config.height = 10;
         }
         newContentItem.callDownwards('_$init');
-        this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
-        this._goldenLayout.emit('stateChanged');
-        this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig());
-        this.stateChanged();
+        this.layoutChanged();
 
         return newContentItem;
     }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 6ce13cf56..411d67ff7 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -23,10 +23,6 @@
         margin: 5px 0;
     }
 
-    .collection-child {
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
 
     .no-indent {
         padding-left: 0;
@@ -42,24 +38,18 @@
         transform: scale(1.3,1.3);
     }
 
-    .coll-title {
-        width:max-content;
-        display: block;
-        font-size: 24px;
-    }
-
     .docContainer {
         margin-left: 10px;
         display: block;
-        width:100%;//width: max-content;
+       // width:100%;//width: max-content;
     }
-
     .docContainer:hover {
-        .delete-button {
-            display: inline;
-            // width: auto;
+        .treeViewItem-openRight {
+            display:inline;
         }
     }
+
+
     .editableView-container {
         font-weight: bold;
     }
@@ -71,7 +61,26 @@
         // margin-top: 3px;
         display: inline;
     }
+    .treeViewItem-openRight {
+        margin-left: 5px;
+        display:none;
+    }
+    .docContainer:hover {
+        .delete-button {
+            display: inline;
+            // width: auto;
+        }
+    }
 
+    .coll-title {
+        width:max-content;
+        display: block;
+        font-size: 24px;
+    }
+    .collection-child {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
     .collectionTreeView-keyHeader {
         font-style: italic;
         font-size: 8pt;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 17109508d..947a066d9 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -1,5 +1,5 @@
 import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
-import { faCaretDown, faCaretRight, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCaretDown, faCaretRight, faTrashAlt, faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, observable, trace } from "mobx";
 import { observer } from "mobx-react";
@@ -36,6 +36,7 @@ export enum BulletType {
 }
 
 library.add(faTrashAlt);
+library.add(faAngleRight);
 library.add(faCaretDown);
 library.add(faCaretRight);
 
@@ -48,6 +49,7 @@ class TreeView extends React.Component<TreeViewProps> {
     @observable _collapsed: boolean = true;
 
     delete = () => this.props.deleteDoc(this.props.document);
+    openRight = () => CollectionDockingView.Instance.AddRightSplit(this.props.document);
 
     get children() {
         return Cast(this.props.document.data, listSpec(Doc), []); // bcz: needed?    .filter(doc => FieldValue(doc));
@@ -100,9 +102,11 @@ class TreeView extends React.Component<TreeViewProps> {
                 }}
             />);
         return (
-            <div className="docContainer" ref={reference} onPointerDown={onItemDown}>
+            <div className="docContainer" ref={reference} onPointerDown={onItemDown}
+                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
                 {editableView(StrCast(this.props.document.title))}
-                {/* <div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div> */}
+                <div className="treeViewItem-openRight" onClick={this.openRight}><FontAwesomeIcon icon="angle-right" size="lg" /><FontAwesomeIcon icon="angle-right" size="lg" /></div>
+                {/* {<div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div>} */}
             </div >);
     }
 
@@ -145,8 +149,7 @@ class TreeView extends React.Component<TreeViewProps> {
         });
         return <div className="treeViewItem-container"
             style={{ background: BoolCast(this.props.document.libraryBrush, false) ? "#06121212" : "0" }}
-            onContextMenu={this.onWorkspaceContextMenu}
-            onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
+            onContextMenu={this.onWorkspaceContextMenu}>
             <li className="collection-child">
                 {this.renderBullet(bulletType)}
                 {this.renderTitle()}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 8c81f6990..805921ad4 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -15,6 +15,8 @@ import { NumCast, Cast } from "../../../../new_fields/Types";
 import { InkField, StrokeData } from "../../../../new_fields/InkField";
 import { Templates } from "../../Templates";
 import { List } from "../../../../new_fields/List";
+import { emitKeypressEvents } from "readline";
+import { listSpec } from "../../../../new_fields/Schema";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -149,16 +151,17 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             this.cleanupInteractions(false);
             e.stopPropagation();
         }
-        if (e.key === "c" || e.key === "r" || e.key === "e") {
+        if (e.key === "c" || e.key === "r" || e.key === "R" || e.key === "e") {
             this._commandExecuted = true;
             e.stopPropagation();
             let bounds = this.Bounds;
             let selected = this.marqueeSelect().map(d => {
-                if (e.key !== "r")
+                if (e.key !== "R") {
                     this.props.removeDocument(d);
-                d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
-                d.y = NumCast(d.y) - bounds.top - bounds.height / 2;
-                d.page = -1;
+                    d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
+                    d.y = NumCast(d.y) - bounds.top - bounds.height / 2;
+                    d.page = -1;
+                }
                 return d;
             });
             let ink = Cast(this.props.container.props.Document.ink, InkField);
@@ -179,16 +182,23 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
             this.marqueeInkDelete(inkData);
             // SelectionManager.DeselectAll();
-            if (e.key === "r") {
-                let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
-                summary.maximizedDocs = new List<Doc>(selected);
-                // summary.doc1 = selected[0];
-                // if (selected.length > 1)
-                //     summary.doc2 = selected[1];
-                // summary.templates = new List<string>([Templates.Summary.Layout]);
-                this.props.addLiveTextDocument(summary);
+            if (e.key === "r" || e.key === "R") {
                 e.preventDefault();
                 let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
+                let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
+
+                if (e.key === "r") {
+                    summary.proto!.maximizeOnRight = true;
+                    let list = Cast(newCollection.data, listSpec(Doc));
+                    if (list && list.length === 1) {
+                        selected = list;
+                    } else {
+                        selected = [newCollection];
+                        this.props.addDocument(newCollection, false);
+                    }
+                }
+                summary.proto!.maximizedDocs = new List<Doc>(selected);
+                summary.proto!.isButton = true;
                 selected.map(maximizedDoc => {
                     let maxx = NumCast(maximizedDoc.x, undefined);
                     let maxy = NumCast(maximizedDoc.y, undefined);
@@ -196,6 +206,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     let maxh = NumCast(maximizedDoc.height, undefined);
                     maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), 0])
                 });
+                this.props.addLiveTextDocument(summary);
             }
             else {
                 this.props.addDocument(newCollection, false);
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 2ba0458f5..cf08c1bc4 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -6,11 +6,12 @@ import "./DocumentView.scss";
 import React = require("react");
 import { DocComponent } from "../DocComponent";
 import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema";
-import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
+import { FieldValue, Cast, NumCast, BoolCast, PromiseValue } from "../../../new_fields/Types";
 import { OmitKeys, Utils } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
 import { Doc } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 }
@@ -86,7 +87,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 let scrpt = this.props.ScreenToLocalTransform().transformPoint(values[0], values[1]);
                 this.animateBetweenIcon(true, scrpt, [values[2], values[3]], values[4], values[5], values[6], this.props.Document, values[7] ? true : false);
             }
-        });
+        }, { fireImmediately: true });
     }
 
     componentWillUnmount() {
@@ -162,14 +163,31 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     onClick = async (e: React.MouseEvent) => {
         e.stopPropagation();
         let ctrlKey = e.ctrlKey;
+        let metaKey = e.metaKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
             if (await BoolCast(this.props.Document.isButton, false)) {
                 let maximizedDocs = await Cast(this.props.Document.maximizedDocs, listSpec(Doc));
                 if (maximizedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    if (ctrlKey)
-                        this.props.addDocument && maximizedDocs.filter(d => d instanceof Doc).map(maxDoc => this.props.addDocument!(maxDoc, false));
-                    this.toggleIcon();
+                    if ((metaKey && !this.props.Document.maximizeOnRight) || (!metaKey && this.props.Document.maximizeOnRight)) {
+                        SelectionManager.DeselectAll();
+                        maximizedDocs.map(async mdoc => {
+                            let maxDoc = await mdoc;
+                            let dataDocs = await Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc));
+                            if (dataDocs) {
+                                Promise.all(dataDocs.map(async doc => await doc)).then(docs => {
+                                    if (!docs || docs.indexOf(maxDoc) == -1) {
+                                        CollectionDockingView.Instance.AddRightSplit(maxDoc);
+                                    } else {
+                                        CollectionDockingView.Instance.CloseRightSplit(maxDoc);
+                                    }
+                                })
+                            }
+                        });
+                    } else {
+                        this.props.addDocument && maximizedDocs.map(async maxDoc => this.props.addDocument!(await maxDoc, false));
+                        this.toggleIcon();
+                    }
                 }
             }
         }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 096a02d9b..9d356cc30 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -202,10 +202,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         CollectionDockingView.Instance.AddRightSplit(kvp);
     }
     makeButton = (e: React.MouseEvent): void => {
-        this.props.Document.isButton = !BoolCast(this.props.Document.isButton, false);
-        if (this.props.Document.isButton && !this.props.Document.nativeWidth) {
-            this.props.Document.nativeWidth = this.props.Document[WidthSym]();
-            this.props.Document.nativeHeight = this.props.Document[HeightSym]();
+        let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document;
+        doc.isButton = !BoolCast(doc.isButton, false);
+        if (doc.isButton && !doc.nativeWidth) {
+            doc.nativeWidth = doc[WidthSym]();
+            doc.nativeHeight = doc[HeightSym]();
         }
     }
     fullScreenClicked = (e: React.MouseEvent): void => {
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index eeb60cb3d..65b8b805f 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -128,7 +128,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             );
         } else {
             this._proxyReactionDisposer = reaction(() => this.props.isSelected(),
-                () => this.props.isSelected() && !BoolCast(this.props.Document.isButton, false) && MainOverlayTextBox.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform));
+                () => this.props.isSelected() && MainOverlayTextBox.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform));
         }
 
 
@@ -310,7 +310,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 // tfs: do we need this event handler
                 onWheel={this.onPointerWheel}
             >
-                <div className={`formattedTextBox-inner${rounded}`} style={{ pointerEvents: this.props.Document.isButton ? "none" : "all" }} ref={this._proseRef} />
+                <div className={`formattedTextBox-inner${rounded}`} style={{ pointerEvents: this.props.Document.isButton && !this.props.isSelected() ? "none" : "all" }} ref={this._proseRef} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 7eba445b92141860da054bc39c08919b758ede73 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 6 May 2019 01:52:27 -0400
Subject: fixed titles of tabs

---
 .../views/collections/CollectionDockingView.tsx    | 28 ++++++++++------------
 1 file changed, 12 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index e4f02a4bc..21ca08471 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -14,7 +14,7 @@ import { SubCollectionViewProps } from "./CollectionSubView";
 import { DragManager, DragLinksAsDocuments } from "../../util/DragManager";
 import { Transform } from '../../util/Transform';
 import { Doc, Opt, Field } from "../../../new_fields/Doc";
-import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
+import { Cast, NumCast, StrCast, PromiseValue } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { DocServer } from "../../DocServer";
 import { listSpec } from "../../../new_fields/Schema";
@@ -284,25 +284,21 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         return template.content.firstChild;
     }
 
-    tabCreated = (tab: any) => {
+    tabCreated = async (tab: any) => {
         if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type !== "stack") {
-            DocServer.GetRefField(tab.contentItem.config.props.documentId).then(async f => {
-                if (f instanceof Doc) {
-                    const title = Cast(f.title, "string");
-                    if (title !== undefined) {
-                        tab.titleElement[0].textContent = title;
-                    }
-                    const lf = await Cast(f.linkedFromDocs, listSpec(Doc));
-                    const lt = await Cast(f.linkedToDocs, listSpec(Doc));
-                    let count = (lf ? lf.length : 0) + (lt ? lt.length : 0);
-                    let counter: any = this.htmlToElement(`<div class="messageCounter">${count}</div>`);
+            DocServer.GetRefField(tab.contentItem.config.props.documentId).then(async doc => {
+                if (doc instanceof Doc) {
+                    let counter: any = this.htmlToElement(`<div class="messageCounter">0</div>`);
                     tab.element.append(counter);
                     counter.DashDocId = tab.contentItem.config.props.documentId;
-                    tab.reactionDisposer = reaction((): [List<Field> | null | undefined, List<Field> | null | undefined] => [lf, lt],
-                        ([linkedFrom, linkedTo]) => {
-                            let count = (linkedFrom ? linkedFrom.length : 0) + (linkedTo ? linkedTo.length : 0);
+                    tab.reactionDisposer = reaction(() => [doc.linkedFromDocs, doc.LinkedToDocs, doc.title],
+                        () => {
+                            const lf = Cast(doc.linkedFromDocs, listSpec(Doc), []);
+                            const lt = Cast(doc.linkedToDocs, listSpec(Doc), []);
+                            let count = (lf ? lf.length : 0) + (lt ? lt.length : 0);
                             counter.innerHTML = count;
-                        });
+                            tab.titleElement[0].textContent = doc.title;
+                        }, { fireImmediately: true });
                     tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
                 }
             });
-- 
cgit v1.2.3-70-g09d2


From c631db5ff9cc8f376588c856a71c9ad09e309f1d Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 6 May 2019 12:50:32 -0400
Subject: added goldenlayout as a file, changed list / type stuff a bit.

---
 src/client/goldenLayout.js                         | 5359 ++++++++++++++++++++
 .../views/collections/CollectionDockingView.tsx    |   48 +-
 .../views/collections/CollectionTreeView.tsx       |   12 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |   39 +-
 src/new_fields/List.ts                             |    2 +-
 5 files changed, 5413 insertions(+), 47 deletions(-)
 create mode 100644 src/client/goldenLayout.js

(limited to 'src')

diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js
new file mode 100644
index 000000000..56a71f1ac
--- /dev/null
+++ b/src/client/goldenLayout.js
@@ -0,0 +1,5359 @@
+(function ($) {
+    var lm = { "config": {}, "container": {}, "controls": {}, "errors": {}, "items": {}, "utils": {} };
+    lm.utils.F = function () {
+    };
+
+    lm.utils.extend = function (subClass, superClass) {
+        subClass.prototype = lm.utils.createObject(superClass.prototype);
+        subClass.prototype.contructor = subClass;
+    };
+
+    lm.utils.createObject = function (prototype) {
+        if (typeof Object.create === 'function') {
+            return Object.create(prototype);
+        } else {
+            lm.utils.F.prototype = prototype;
+            return new lm.utils.F();
+        }
+    };
+
+    lm.utils.objectKeys = function (object) {
+        var keys, key;
+
+        if (typeof Object.keys === 'function') {
+            return Object.keys(object);
+        } else {
+            keys = [];
+            for (key in object) {
+                keys.push(key);
+            }
+            return keys;
+        }
+    };
+
+    lm.utils.getHashValue = function (key) {
+        var matches = location.hash.match(new RegExp(key + '=([^&]*)'));
+        return matches ? matches[1] : null;
+    };
+
+    lm.utils.getQueryStringParam = function (param) {
+        if (window.location.hash) {
+            return lm.utils.getHashValue(param);
+        } else if (!window.location.search) {
+            return null;
+        }
+
+        var keyValuePairs = window.location.search.substr(1).split('&'),
+            params = {},
+            pair,
+            i;
+
+        for (i = 0; i < keyValuePairs.length; i++) {
+            pair = keyValuePairs[i].split('=');
+            params[pair[0]] = pair[1];
+        }
+
+        return params[param] || null;
+    };
+
+    lm.utils.copy = function (target, source) {
+        for (var key in source) {
+            target[key] = source[key];
+        }
+        return target;
+    };
+
+	/**
+	 * This is based on Paul Irish's shim, but looks quite odd in comparison. Why?
+	 * Because
+	 * a) it shouldn't affect the global requestAnimationFrame function
+	 * b) it shouldn't pass on the time that has passed
+	 *
+	 * @param   {Function} fn
+	 *
+	 * @returns {void}
+	 */
+    lm.utils.animFrame = function (fn) {
+        return (window.requestAnimationFrame ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame ||
+            function (callback) {
+                window.setTimeout(callback, 1000 / 60);
+            })(function () {
+                fn();
+            });
+    };
+
+    lm.utils.indexOf = function (needle, haystack) {
+        if (!(haystack instanceof Array)) {
+            throw new Error('Haystack is not an Array');
+        }
+
+        if (haystack.indexOf) {
+            return haystack.indexOf(needle);
+        } else {
+            for (var i = 0; i < haystack.length; i++) {
+                if (haystack[i] === needle) {
+                    return i;
+                }
+            }
+            return -1;
+        }
+    };
+
+    if (typeof /./ != 'function' && typeof Int8Array != 'object') {
+        lm.utils.isFunction = function (obj) {
+            return typeof obj == 'function' || false;
+        };
+    } else {
+        lm.utils.isFunction = function (obj) {
+            return toString.call(obj) === '[object Function]';
+        };
+    }
+
+    lm.utils.fnBind = function (fn, context, boundArgs) {
+
+        if (Function.prototype.bind !== undefined) {
+            return Function.prototype.bind.apply(fn, [context].concat(boundArgs || []));
+        }
+
+        var bound = function () {
+
+            // Join the already applied arguments to the now called ones (after converting to an array again).
+            var args = (boundArgs || []).concat(Array.prototype.slice.call(arguments, 0));
+
+            // If not being called as a constructor
+            if (!(this instanceof bound)) {
+                // return the result of the function called bound to target and partially applied.
+                return fn.apply(context, args);
+            }
+            // If being called as a constructor, apply the function bound to self.
+            fn.apply(this, args);
+        };
+        // Attach the prototype of the function to our newly created function.
+        bound.prototype = fn.prototype;
+        return bound;
+    };
+
+    lm.utils.removeFromArray = function (item, array) {
+        var index = lm.utils.indexOf(item, array);
+
+        if (index === -1) {
+            throw new Error('Can\'t remove item from array. Item is not in the array');
+        }
+
+        array.splice(index, 1);
+    };
+
+    lm.utils.now = function () {
+        if (typeof Date.now === 'function') {
+            return Date.now();
+        } else {
+            return (new Date()).getTime();
+        }
+    };
+
+    lm.utils.getUniqueId = function () {
+        return (Math.random() * 1000000000000000)
+            .toString(36)
+            .replace('.', '');
+    };
+
+	/**
+	 * A basic XSS filter. It is ultimately up to the
+	 * implementing developer to make sure their particular
+	 * applications and usecases are save from cross site scripting attacks
+	 *
+	 * @param   {String} input
+	 * @param    {Boolean} keepTags
+	 *
+	 * @returns {String} filtered input
+	 */
+    lm.utils.filterXss = function (input, keepTags) {
+
+        var output = input
+            .replace(/javascript/gi, 'j&#97;vascript')
+            .replace(/expression/gi, 'expr&#101;ssion')
+            .replace(/onload/gi, 'onlo&#97;d')
+            .replace(/script/gi, '&#115;cript')
+            .replace(/onerror/gi, 'on&#101;rror');
+
+        if (keepTags === true) {
+            return output;
+        } else {
+            return output
+                .replace(/>/g, '&gt;')
+                .replace(/</g, '&lt;');
+        }
+    };
+
+	/**
+	 * Removes html tags from a string
+	 *
+	 * @param   {String} input
+	 *
+	 * @returns {String} input without tags
+	 */
+    lm.utils.stripTags = function (input) {
+        return $.trim(input.replace(/(<([^>]+)>)/ig, ''));
+    };
+	/**
+	 * A generic and very fast EventEmitter
+	 * implementation. On top of emitting the
+	 * actual event it emits an
+	 *
+	 * lm.utils.EventEmitter.ALL_EVENT
+	 *
+	 * event for every event triggered. This allows
+	 * to hook into it and proxy events forwards
+	 *
+	 * @constructor
+	 */
+    lm.utils.EventEmitter = function () {
+        this._mSubscriptions = {};
+        this._mSubscriptions[lm.utils.EventEmitter.ALL_EVENT] = [];
+
+		/**
+		 * Listen for events
+		 *
+		 * @param   {String} sEvent    The name of the event to listen to
+		 * @param   {Function} fCallback The callback to execute when the event occurs
+		 * @param   {[Object]} oContext The value of the this pointer within the callback function
+		 *
+		 * @returns {void}
+		 */
+        this.on = function (sEvent, fCallback, oContext) {
+            if (!lm.utils.isFunction(fCallback)) {
+                throw new Error('Tried to listen to event ' + sEvent + ' with non-function callback ' + fCallback);
+            }
+
+            if (!this._mSubscriptions[sEvent]) {
+                this._mSubscriptions[sEvent] = [];
+            }
+
+            this._mSubscriptions[sEvent].push({ fn: fCallback, ctx: oContext });
+        };
+
+		/**
+		 * Emit an event and notify listeners
+		 *
+		 * @param   {String} sEvent The name of the event
+		 * @param    {Mixed}  various additional arguments that will be passed to the listener
+		 *
+		 * @returns {void}
+		 */
+        this.emit = function (sEvent) {
+            var i, ctx, args;
+
+            args = Array.prototype.slice.call(arguments, 1);
+
+            var subs = this._mSubscriptions[sEvent];
+
+            if (subs) {
+                subs = subs.slice();
+                for (i = 0; i < subs.length; i++) {
+                    ctx = subs[i].ctx || {};
+                    subs[i].fn.apply(ctx, args);
+                }
+            }
+
+            args.unshift(sEvent);
+
+            var allEventSubs = this._mSubscriptions[lm.utils.EventEmitter.ALL_EVENT].slice()
+
+            for (i = 0; i < allEventSubs.length; i++) {
+                ctx = allEventSubs[i].ctx || {};
+                allEventSubs[i].fn.apply(ctx, args);
+            }
+        };
+
+		/**
+		 * Removes a listener for an event, or all listeners if no callback and context is provided.
+		 *
+		 * @param   {String} sEvent    The name of the event
+		 * @param   {Function} fCallback The previously registered callback method (optional)
+		 * @param   {Object} oContext  The previously registered context (optional)
+		 *
+		 * @returns {void}
+		 */
+        this.unbind = function (sEvent, fCallback, oContext) {
+            if (!this._mSubscriptions[sEvent]) {
+                throw new Error('No subscribtions to unsubscribe for event ' + sEvent);
+            }
+
+            var i, bUnbound = false;
+
+            for (i = 0; i < this._mSubscriptions[sEvent].length; i++) {
+                if
+                    (
+                    (!fCallback || this._mSubscriptions[sEvent][i].fn === fCallback) &&
+                    (!oContext || oContext === this._mSubscriptions[sEvent][i].ctx)
+                ) {
+                    this._mSubscriptions[sEvent].splice(i, 1);
+                    bUnbound = true;
+                }
+            }
+
+            if (bUnbound === false) {
+                throw new Error('Nothing to unbind for ' + sEvent);
+            }
+        };
+
+		/**
+		 * Alias for unbind
+		 */
+        this.off = this.unbind;
+
+		/**
+		 * Alias for emit
+		 */
+        this.trigger = this.emit;
+    };
+
+	/**
+	 * The name of the event that's triggered for every other event
+	 *
+	 * usage
+	 *
+	 * myEmitter.on( lm.utils.EventEmitter.ALL_EVENT, function( eventName, argsArray ){
+	 * 	//do stuff
+	 * });
+	 *
+	 * @type {String}
+	 */
+    lm.utils.EventEmitter.ALL_EVENT = '__all';
+    lm.utils.DragListener = function (eElement, nButtonCode) {
+        lm.utils.EventEmitter.call(this);
+
+        this._eElement = $(eElement);
+        this._oDocument = $(document);
+        this._eBody = $(document.body);
+        this._nButtonCode = nButtonCode || 0;
+
+		/**
+		 * The delay after which to start the drag in milliseconds
+		 */
+        this._nDelay = 200;
+
+		/**
+		 * The distance the mouse needs to be moved to qualify as a drag
+		 */
+        this._nDistance = 10;//TODO - works better with delay only
+
+        this._nX = 0;
+        this._nY = 0;
+
+        this._nOriginalX = 0;
+        this._nOriginalY = 0;
+
+        this._bDragging = false;
+
+        this._fMove = lm.utils.fnBind(this.onMouseMove, this);
+        this._fUp = lm.utils.fnBind(this.onMouseUp, this);
+        this._fDown = lm.utils.fnBind(this.onMouseDown, this);
+
+
+        this._eElement.on('mousedown touchstart', this._fDown);
+    };
+
+    lm.utils.DragListener.timeout = null;
+
+    lm.utils.copy(lm.utils.DragListener.prototype, {
+        destroy: function () {
+            this._eElement.unbind('mousedown touchstart', this._fDown);
+            this._oDocument.unbind('mouseup touchend', this._fUp);
+            this._eElement = null;
+            this._oDocument = null;
+            this._eBody = null;
+        },
+
+        onMouseDown: function (oEvent) {
+            oEvent.preventDefault();
+
+            if (oEvent.button == 0 || oEvent.type === "touchstart") {
+                var coordinates = this._getCoordinates(oEvent);
+
+                this._nOriginalX = coordinates.x;
+                this._nOriginalY = coordinates.y;
+
+                this._oDocument.on('mousemove touchmove', this._fMove);
+                this._oDocument.one('mouseup touchend', this._fUp);
+
+                this._timeout = setTimeout(lm.utils.fnBind(this._startDrag, this), this._nDelay);
+            }
+        },
+
+        onMouseMove: function (oEvent) {
+            if (this._timeout != null) {
+                oEvent.preventDefault();
+
+                var coordinates = this._getCoordinates(oEvent);
+
+                this._nX = coordinates.x - this._nOriginalX;
+                this._nY = coordinates.y - this._nOriginalY;
+
+                if (this._bDragging === false) {
+                    if (
+                        Math.abs(this._nX) > this._nDistance ||
+                        Math.abs(this._nY) > this._nDistance
+                    ) {
+                        clearTimeout(this._timeout);
+                        this._startDrag();
+                    }
+                }
+
+                if (this._bDragging) {
+                    this.emit('drag', this._nX, this._nY, oEvent);
+                }
+            }
+        },
+
+        onMouseUp: function (oEvent) {
+            if (this._timeout != null) {
+                clearTimeout(this._timeout);
+                this._eBody.removeClass('lm_dragging');
+                this._eElement.removeClass('lm_dragging');
+                this._oDocument.find('iframe').css('pointer-events', '');
+                this._oDocument.unbind('mousemove touchmove', this._fMove);
+                this._oDocument.unbind('mouseup touchend', this._fUp);
+
+                if (this._bDragging === true) {
+                    this._bDragging = false;
+                    this.emit('dragStop', oEvent, this._nOriginalX + this._nX);
+                }
+            }
+        },
+
+        _startDrag: function () {
+            this._bDragging = true;
+            this._eBody.addClass('lm_dragging');
+            this._eElement.addClass('lm_dragging');
+            this._oDocument.find('iframe').css('pointer-events', 'none');
+            this.emit('dragStart', this._nOriginalX, this._nOriginalY);
+        },
+
+        _getCoordinates: function (event) {
+            event = event.originalEvent && event.originalEvent.touches ? event.originalEvent.touches[0] : event;
+            return {
+                x: event.pageX,
+                y: event.pageY
+            };
+        }
+    });
+	/**
+	 * The main class that will be exposed as GoldenLayout.
+	 *
+	 * @public
+	 * @constructor
+	 * @param {GoldenLayout config} config
+	 * @param {[DOM element container]} container Can be a jQuery selector string or a Dom element. Defaults to body
+	 *
+	 * @returns {VOID}
+	 */
+    lm.LayoutManager = function (config, container) {
+
+        if (!$ || typeof $.noConflict !== 'function') {
+            var errorMsg = 'jQuery is missing as dependency for GoldenLayout. ';
+            errorMsg += 'Please either expose $ on GoldenLayout\'s scope (e.g. window) or add "jquery" to ';
+            errorMsg += 'your paths when using RequireJS/AMD';
+            throw new Error(errorMsg);
+        }
+        lm.utils.EventEmitter.call(this);
+
+        this.isInitialised = false;
+        this._isFullPage = false;
+        this._resizeTimeoutId = null;
+        this._components = { 'lm-react-component': lm.utils.ReactComponentHandler };
+        this._itemAreas = [];
+        this._resizeFunction = lm.utils.fnBind(this._onResize, this);
+        this._unloadFunction = lm.utils.fnBind(this._onUnload, this);
+        this._maximisedItem = null;
+        this._maximisePlaceholder = $('<div class="lm_maximise_place"></div>');
+        this._creationTimeoutPassed = false;
+        this._subWindowsCreated = false;
+        this._dragSources = [];
+        this._updatingColumnsResponsive = false;
+        this._firstLoad = true;
+
+        this.width = null;
+        this.height = null;
+        this.root = null;
+        this.openPopouts = [];
+        this.selectedItem = null;
+        this.isSubWindow = false;
+        this.eventHub = new lm.utils.EventHub(this);
+        this.config = this._createConfig(config);
+        this.container = container;
+        this.dropTargetIndicator = null;
+        this.transitionIndicator = null;
+        this.tabDropPlaceholder = $('<div class="lm_drop_tab_placeholder"></div>');
+
+        if (this.isSubWindow === true) {
+            $('body').css('visibility', 'hidden');
+        }
+
+        this._typeToItem = {
+            'column': lm.utils.fnBind(lm.items.RowOrColumn, this, [true]),
+            'row': lm.utils.fnBind(lm.items.RowOrColumn, this, [false]),
+            'stack': lm.items.Stack,
+            'component': lm.items.Component
+        };
+    };
+
+	/**
+	 * Hook that allows to access private classes
+	 */
+    lm.LayoutManager.__lm = lm;
+
+	/**
+	 * Takes a GoldenLayout configuration object and
+	 * replaces its keys and values recursively with
+	 * one letter codes
+	 *
+	 * @static
+	 * @public
+	 * @param   {Object} config A GoldenLayout config object
+	 *
+	 * @returns {Object} minified config
+	 */
+    lm.LayoutManager.minifyConfig = function (config) {
+        return (new lm.utils.ConfigMinifier()).minifyConfig(config);
+    };
+
+	/**
+	 * Takes a configuration Object that was previously minified
+	 * using minifyConfig and returns its original version
+	 *
+	 * @static
+	 * @public
+	 * @param   {Object} minifiedConfig
+	 *
+	 * @returns {Object} the original configuration
+	 */
+    lm.LayoutManager.unminifyConfig = function (config) {
+        return (new lm.utils.ConfigMinifier()).unminifyConfig(config);
+    };
+
+    lm.utils.copy(lm.LayoutManager.prototype, {
+
+		/**
+		 * Register a component with the layout manager. If a configuration node
+		 * of type component is reached it will look up componentName and create the
+		 * associated component
+		 *
+		 *  {
+		 *		type: "component",
+		 *		componentName: "EquityNewsFeed",
+		 *		componentState: { "feedTopic": "us-bluechips" }
+		 *  }
+		 *
+		 * @public
+		 * @param   {String} name
+		 * @param   {Function} constructor
+		 *
+		 * @returns {void}
+		 */
+        registerComponent: function (name, constructor) {
+            if (typeof constructor !== 'function') {
+                throw new Error('Please register a constructor function');
+            }
+
+            if (this._components[name] !== undefined) {
+                throw new Error('Component ' + name + ' is already registered');
+            }
+
+            this._components[name] = constructor;
+        },
+
+		/**
+		 * Creates a layout configuration object based on the the current state
+		 *
+		 * @public
+		 * @returns {Object} GoldenLayout configuration
+		 */
+        toConfig: function (root) {
+            var config, next, i;
+
+            if (this.isInitialised === false) {
+                throw new Error('Can\'t create config, layout not yet initialised');
+            }
+
+            if (root && !(root instanceof lm.items.AbstractContentItem)) {
+                throw new Error('Root must be a ContentItem');
+            }
+
+			/*
+			 * settings & labels
+			 */
+            config = {
+                settings: lm.utils.copy({}, this.config.settings),
+                dimensions: lm.utils.copy({}, this.config.dimensions),
+                labels: lm.utils.copy({}, this.config.labels)
+            };
+
+			/*
+			 * Content
+			 */
+            config.content = [];
+            next = function (configNode, item) {
+                var key, i;
+
+                for (key in item.config) {
+                    if (key !== 'content') {
+                        configNode[key] = item.config[key];
+                    }
+                }
+
+                if (item.contentItems.length) {
+                    configNode.content = [];
+
+                    for (i = 0; i < item.contentItems.length; i++) {
+                        configNode.content[i] = {};
+                        next(configNode.content[i], item.contentItems[i]);
+                    }
+                }
+            };
+
+            if (root) {
+                next(config, { contentItems: [root] });
+            } else {
+                next(config, this.root);
+            }
+
+			/*
+			 * Retrieve config for subwindows
+			 */
+            this._$reconcilePopoutWindows();
+            config.openPopouts = [];
+            for (i = 0; i < this.openPopouts.length; i++) {
+                config.openPopouts.push(this.openPopouts[i].toConfig());
+            }
+
+			/*
+			 * Add maximised item
+			 */
+            config.maximisedItemId = this._maximisedItem ? '__glMaximised' : null;
+            return config;
+        },
+
+		/**
+		 * Returns a previously registered component
+		 *
+		 * @public
+		 * @param   {String} name The name used
+		 *
+		 * @returns {Function}
+		 */
+        getComponent: function (name) {
+            if (this._components[name] === undefined) {
+                throw new lm.errors.ConfigurationError('Unknown component "' + name + '"');
+            }
+
+            return this._components[name];
+        },
+
+		/**
+		 * Creates the actual layout. Must be called after all initial components
+		 * are registered. Recurses through the configuration and sets up
+		 * the item tree.
+		 *
+		 * If called before the document is ready it adds itself as a listener
+		 * to the document.ready event
+		 *
+		 * @public
+		 *
+		 * @returns {void}
+		 */
+        init: function () {
+
+			/**
+			 * Create the popout windows straight away. If popouts are blocked
+			 * an error is thrown on the same 'thread' rather than a timeout and can
+			 * be caught. This also prevents any further initilisation from taking place.
+			 */
+            if (this._subWindowsCreated === false) {
+                this._createSubWindows();
+                this._subWindowsCreated = true;
+            }
+
+
+			/**
+			 * If the document isn't ready yet, wait for it.
+			 */
+            if (document.readyState === 'loading' || document.body === null) {
+                $(document).ready(lm.utils.fnBind(this.init, this));
+                return;
+            }
+
+			/**
+			 * If this is a subwindow, wait a few milliseconds for the original
+			 * page's js calls to be executed, then replace the bodies content
+			 * with GoldenLayout
+			 */
+            if (this.isSubWindow === true && this._creationTimeoutPassed === false) {
+                setTimeout(lm.utils.fnBind(this.init, this), 7);
+                this._creationTimeoutPassed = true;
+                return;
+            }
+
+            if (this.isSubWindow === true) {
+                this._adjustToWindowMode();
+            }
+
+            this._setContainer();
+            this.dropTargetIndicator = new lm.controls.DropTargetIndicator(this.container);
+            this.transitionIndicator = new lm.controls.TransitionIndicator();
+            this.updateSize();
+            this._create(this.config);
+            this._bindEvents();
+            this.isInitialised = true;
+            this._adjustColumnsResponsive();
+            this.emit('initialised');
+        },
+
+		/**
+		 * Updates the layout managers size
+		 *
+		 * @public
+		 * @param   {[int]} width  height in pixels
+		 * @param   {[int]} height width in pixels
+		 *
+		 * @returns {void}
+		 */
+        updateSize: function (width, height) {
+            if (arguments.length === 2) {
+                this.width = width;
+                this.height = height;
+            } else {
+                this.width = this.container.width();
+                this.height = this.container.height();
+            }
+
+            if (this.isInitialised === true) {
+                this.root.callDownwards('setSize', [this.width, this.height]);
+
+                if (this._maximisedItem) {
+                    this._maximisedItem.element.width(this.container.width());
+                    this._maximisedItem.element.height(this.container.height());
+                    this._maximisedItem.callDownwards('setSize');
+                }
+
+                this._adjustColumnsResponsive();
+            }
+        },
+
+		/**
+		 * Destroys the LayoutManager instance itself as well as every ContentItem
+		 * within it. After this is called nothing should be left of the LayoutManager.
+		 *
+		 * @public
+		 * @returns {void}
+		 */
+        destroy: function () {
+            if (this.isInitialised === false) {
+                return;
+            }
+            this._onUnload();
+            $(window).off('resize', this._resizeFunction);
+            $(window).off('unload beforeunload', this._unloadFunction);
+            this.root.callDownwards('_$destroy', [], true);
+            this.root.contentItems = [];
+            this.tabDropPlaceholder.remove();
+            this.dropTargetIndicator.destroy();
+            this.transitionIndicator.destroy();
+            this.eventHub.destroy();
+
+            this._dragSources.forEach(function (dragSource) {
+                dragSource._dragListener.destroy();
+                dragSource._element = null;
+                dragSource._itemConfig = null;
+                dragSource._dragListener = null;
+            });
+            this._dragSources = [];
+        },
+
+		/**
+		 * Recursively creates new item tree structures based on a provided
+		 * ItemConfiguration object
+		 *
+		 * @public
+		 * @param   {Object} config ItemConfig
+		 * @param   {[ContentItem]} parent The item the newly created item should be a child of
+		 *
+		 * @returns {lm.items.ContentItem}
+		 */
+        createContentItem: function (config, parent) {
+            var typeErrorMsg, contentItem;
+
+            if (typeof config.type !== 'string') {
+                throw new lm.errors.ConfigurationError('Missing parameter \'type\'', config);
+            }
+
+            if (config.type === 'react-component') {
+                config.type = 'component';
+                config.componentName = 'lm-react-component';
+            }
+
+            if (!this._typeToItem[config.type]) {
+                typeErrorMsg = 'Unknown type \'' + config.type + '\'. ' +
+                    'Valid types are ' + lm.utils.objectKeys(this._typeToItem).join(',');
+
+                throw new lm.errors.ConfigurationError(typeErrorMsg);
+            }
+
+
+			/**
+			 * We add an additional stack around every component that's not within a stack anyways.
+			 */
+            if (
+                // If this is a component
+                config.type === 'component' &&
+
+                // and it's not already within a stack
+                !(parent instanceof lm.items.Stack) &&
+
+                // and we have a parent
+                !!parent &&
+
+                // and it's not the topmost item in a new window
+                !(this.isSubWindow === true && parent instanceof lm.items.Root)
+            ) {
+                config = {
+                    type: 'stack',
+                    width: config.width,
+                    height: config.height,
+                    content: [config]
+                };
+            }
+
+            contentItem = new this._typeToItem[config.type](this, config, parent);
+            return contentItem;
+        },
+
+		/**
+		 * Creates a popout window with the specified content and dimensions
+		 *
+		 * @param   {Object|lm.itemsAbstractContentItem} configOrContentItem
+		 * @param   {[Object]} dimensions A map with width, height, left and top
+		 * @param    {[String]} parentId the id of the element this item will be appended to
+		 *                             when popIn is called
+		 * @param    {[Number]} indexInParent The position of this item within its parent element
+	
+		 * @returns {lm.controls.BrowserPopout}
+		 */
+        createPopout: function (configOrContentItem, dimensions, parentId, indexInParent) {
+            var config = configOrContentItem,
+                isItem = configOrContentItem instanceof lm.items.AbstractContentItem,
+                self = this,
+                windowLeft,
+                windowTop,
+                offset,
+                parent,
+                child,
+                browserPopout;
+
+            parentId = parentId || null;
+
+            if (isItem) {
+                config = this.toConfig(configOrContentItem).content;
+                parentId = lm.utils.getUniqueId();
+
+				/**
+				 * If the item is the only component within a stack or for some
+				 * other reason the only child of its parent the parent will be destroyed
+				 * when the child is removed.
+				 *
+				 * In order to support this we move up the tree until we find something
+				 * that will remain after the item is being popped out
+				 */
+                parent = configOrContentItem.parent;
+                child = configOrContentItem;
+                while (parent.contentItems.length === 1 && !parent.isRoot) {
+                    parent = parent.parent;
+                    child = child.parent;
+                }
+
+                parent.addId(parentId);
+                if (isNaN(indexInParent)) {
+                    indexInParent = lm.utils.indexOf(child, parent.contentItems);
+                }
+            } else {
+                if (!(config instanceof Array)) {
+                    config = [config];
+                }
+            }
+
+
+            if (!dimensions && isItem) {
+                windowLeft = window.screenX || window.screenLeft;
+                windowTop = window.screenY || window.screenTop;
+                offset = configOrContentItem.element.offset();
+
+                dimensions = {
+                    left: windowLeft + offset.left,
+                    top: windowTop + offset.top,
+                    width: configOrContentItem.element.width(),
+                    height: configOrContentItem.element.height()
+                };
+            }
+
+            if (!dimensions && !isItem) {
+                dimensions = {
+                    left: window.screenX || window.screenLeft + 20,
+                    top: window.screenY || window.screenTop + 20,
+                    width: 500,
+                    height: 309
+                };
+            }
+
+            if (isItem) {
+                configOrContentItem.remove();
+            }
+
+            browserPopout = new lm.controls.BrowserPopout(config, dimensions, parentId, indexInParent, this);
+
+            browserPopout.on('initialised', function () {
+                self.emit('windowOpened', browserPopout);
+            });
+
+            browserPopout.on('closed', function () {
+                self._$reconcilePopoutWindows();
+            });
+
+            this.openPopouts.push(browserPopout);
+
+            return browserPopout;
+        },
+
+		/**
+		 * Attaches DragListener to any given DOM element
+		 * and turns it into a way of creating new ContentItems
+		 * by 'dragging' the DOM element into the layout
+		 *
+		 * @param   {jQuery DOM element} element
+		 * @param   {Object|Function} itemConfig for the new item to be created, or a function which will provide it
+		 *
+		 * @returns {void}
+		 */
+        createDragSource: function (element, itemConfig) {
+            this.config.settings.constrainDragToContainer = false;
+            var dragSource = new lm.controls.DragSource($(element), itemConfig, this);
+            this._dragSources.push(dragSource);
+
+            return dragSource;
+        },
+
+		/**
+		 * Programmatically selects an item. This deselects
+		 * the currently selected item, selects the specified item
+		 * and emits a selectionChanged event
+		 *
+		 * @param   {lm.item.AbstractContentItem} item#
+		 * @param   {[Boolean]} _$silent Wheather to notify the item of its selection
+		 * @event    selectionChanged
+		 *
+		 * @returns {VOID}
+		 */
+        selectItem: function (item, _$silent) {
+
+            if (this.config.settings.selectionEnabled !== true) {
+                throw new Error('Please set selectionEnabled to true to use this feature');
+            }
+
+            if (item === this.selectedItem) {
+                return;
+            }
+
+            if (this.selectedItem !== null) {
+                this.selectedItem.deselect();
+            }
+
+            if (item && _$silent !== true) {
+                item.select();
+            }
+
+            this.selectedItem = item;
+
+            this.emit('selectionChanged', item);
+        },
+
+		/*************************
+		 * PACKAGE PRIVATE
+		 *************************/
+        _$maximiseItem: function (contentItem) {
+            if (this._maximisedItem !== null) {
+                this._$minimiseItem(this._maximisedItem);
+            }
+            this._maximisedItem = contentItem;
+            this._maximisedItem.addId('__glMaximised');
+            contentItem.element.addClass('lm_maximised');
+            contentItem.element.after(this._maximisePlaceholder);
+            this.root.element.prepend(contentItem.element);
+            contentItem.element.width(this.container.width());
+            contentItem.element.height(this.container.height());
+            contentItem.callDownwards('setSize');
+            this._maximisedItem.emit('maximised');
+            this.emit('stateChanged');
+        },
+
+        _$minimiseItem: function (contentItem) {
+            contentItem.element.removeClass('lm_maximised');
+            contentItem.removeId('__glMaximised');
+            this._maximisePlaceholder.after(contentItem.element);
+            this._maximisePlaceholder.remove();
+            contentItem.parent.callDownwards('setSize');
+            this._maximisedItem = null;
+            contentItem.emit('minimised');
+            this.emit('stateChanged');
+        },
+
+		/**
+		 * This method is used to get around sandboxed iframe restrictions.
+		 * If 'allow-top-navigation' is not specified in the iframe's 'sandbox' attribute
+		 * (as is the case with codepens) the parent window is forbidden from calling certain
+		 * methods on the child, such as window.close() or setting document.location.href.
+		 *
+		 * This prevented GoldenLayout popouts from popping in in codepens. The fix is to call
+		 * _$closeWindow on the child window's gl instance which (after a timeout to disconnect
+		 * the invoking method from the close call) closes itself.
+		 *
+		 * @packagePrivate
+		 *
+		 * @returns {void}
+		 */
+        _$closeWindow: function () {
+            window.setTimeout(function () {
+                window.close();
+            }, 1);
+        },
+
+        _$getArea: function (x, y) {
+            var i, area, smallestSurface = Infinity, mathingArea = null;
+
+            for (i = 0; i < this._itemAreas.length; i++) {
+                area = this._itemAreas[i];
+
+                if (
+                    x > area.x1 &&
+                    x < area.x2 &&
+                    y > area.y1 &&
+                    y < area.y2 &&
+                    smallestSurface > area.surface
+                ) {
+                    smallestSurface = area.surface;
+                    mathingArea = area;
+                }
+            }
+
+            return mathingArea;
+        },
+
+        _$createRootItemAreas: function () {
+            var areaSize = 50;
+            var sides = { y2: 0, x2: 0, y1: 'y2', x1: 'x2' };
+            for (var side in sides) {
+                var area = this.root._$getArea();
+                area.side = side;
+                if (sides[side])
+                    area[side] = area[sides[side]] - areaSize;
+                else
+                    area[side] = areaSize;
+                area.surface = (area.x2 - area.x1) * (area.y2 - area.y1);
+                this._itemAreas.push(area);
+            }
+        },
+
+        _$calculateItemAreas: function () {
+            var i, area, allContentItems = this._getAllContentItems();
+            this._itemAreas = [];
+
+			/**
+			 * If the last item is dragged out, highlight the entire container size to
+			 * allow to re-drop it. allContentItems[ 0 ] === this.root at this point
+			 *
+			 * Don't include root into the possible drop areas though otherwise since it
+			 * will used for every gap in the layout, e.g. splitters
+			 */
+            if (allContentItems.length === 1) {
+                this._itemAreas.push(this.root._$getArea());
+                return;
+            }
+            this._$createRootItemAreas();
+
+            for (i = 0; i < allContentItems.length; i++) {
+
+                if (!(allContentItems[i].isStack)) {
+                    continue;
+                }
+
+                area = allContentItems[i]._$getArea();
+
+                if (area === null) {
+                    continue;
+                } else if (area instanceof Array) {
+                    this._itemAreas = this._itemAreas.concat(area);
+                } else {
+                    this._itemAreas.push(area);
+                    var header = {};
+                    lm.utils.copy(header, area);
+                    lm.utils.copy(header, area.contentItem._contentAreaDimensions.header.highlightArea);
+                    header.surface = (header.x2 - header.x1) * (header.y2 - header.y1);
+                    this._itemAreas.push(header);
+                }
+            }
+        },
+
+		/**
+		 * Takes a contentItem or a configuration and optionally a parent
+		 * item and returns an initialised instance of the contentItem.
+		 * If the contentItem is a function, it is first called
+		 *
+		 * @packagePrivate
+		 *
+		 * @param   {lm.items.AbtractContentItem|Object|Function} contentItemOrConfig
+		 * @param   {lm.items.AbtractContentItem} parent Only necessary when passing in config
+		 *
+		 * @returns {lm.items.AbtractContentItem}
+		 */
+        _$normalizeContentItem: function (contentItemOrConfig, parent) {
+            if (!contentItemOrConfig) {
+                throw new Error('No content item defined');
+            }
+
+            if (lm.utils.isFunction(contentItemOrConfig)) {
+                contentItemOrConfig = contentItemOrConfig();
+            }
+
+            if (contentItemOrConfig instanceof lm.items.AbstractContentItem) {
+                return contentItemOrConfig;
+            }
+
+            if ($.isPlainObject(contentItemOrConfig) && contentItemOrConfig.type) {
+                var newContentItem = this.createContentItem(contentItemOrConfig, parent);
+                newContentItem.callDownwards('_$init');
+                return newContentItem;
+            } else {
+                throw new Error('Invalid contentItem');
+            }
+        },
+
+		/**
+		 * Iterates through the array of open popout windows and removes the ones
+		 * that are effectively closed. This is necessary due to the lack of reliably
+		 * listening for window.close / unload events in a cross browser compatible fashion.
+		 *
+		 * @packagePrivate
+		 *
+		 * @returns {void}
+		 */
+        _$reconcilePopoutWindows: function () {
+            var openPopouts = [], i;
+
+            for (i = 0; i < this.openPopouts.length; i++) {
+                if (this.openPopouts[i].getWindow().closed === false) {
+                    openPopouts.push(this.openPopouts[i]);
+                } else {
+                    this.emit('windowClosed', this.openPopouts[i]);
+                }
+            }
+
+            if (this.openPopouts.length !== openPopouts.length) {
+                this.emit('stateChanged');
+                this.openPopouts = openPopouts;
+            }
+
+        },
+
+		/***************************
+		 * PRIVATE
+		 ***************************/
+		/**
+		 * Returns a flattened array of all content items,
+		 * regardles of level or type
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _getAllContentItems: function () {
+            var allContentItems = [];
+
+            var addChildren = function (contentItem) {
+                allContentItems.push(contentItem);
+
+                if (contentItem.contentItems instanceof Array) {
+                    for (var i = 0; i < contentItem.contentItems.length; i++) {
+                        addChildren(contentItem.contentItems[i]);
+                    }
+                }
+            };
+
+            addChildren(this.root);
+
+            return allContentItems;
+        },
+
+		/**
+		 * Binds to DOM/BOM events on init
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _bindEvents: function () {
+            if (this._isFullPage) {
+                $(window).resize(this._resizeFunction);
+            }
+            $(window).on('unload beforeunload', this._unloadFunction);
+        },
+
+		/**
+		 * Debounces resize events
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _onResize: function () {
+            clearTimeout(this._resizeTimeoutId);
+            this._resizeTimeoutId = setTimeout(lm.utils.fnBind(this.updateSize, this), 100);
+        },
+
+		/**
+		 * Extends the default config with the user specific settings and applies
+		 * derivations. Please note that there's a seperate method (AbstractContentItem._extendItemNode)
+		 * that deals with the extension of item configs
+		 *
+		 * @param   {Object} config
+		 * @static
+		 * @returns {Object} config
+		 */
+        _createConfig: function (config) {
+            var windowConfigKey = lm.utils.getQueryStringParam('gl-window');
+
+            if (windowConfigKey) {
+                this.isSubWindow = true;
+                config = localStorage.getItem(windowConfigKey);
+                config = JSON.parse(config);
+                config = (new lm.utils.ConfigMinifier()).unminifyConfig(config);
+                localStorage.removeItem(windowConfigKey);
+            }
+
+            config = $.extend(true, {}, lm.config.defaultConfig, config);
+
+            var nextNode = function (node) {
+                for (var key in node) {
+                    if (key !== 'props' && typeof node[key] === 'object') {
+                        nextNode(node[key]);
+                    }
+                    else if (key === 'type' && node[key] === 'react-component') {
+                        node.type = 'component';
+                        node.componentName = 'lm-react-component';
+                    }
+                }
+            }
+
+            nextNode(config);
+
+            if (config.settings.hasHeaders === false) {
+                config.dimensions.headerHeight = 0;
+            }
+
+            return config;
+        },
+
+		/**
+		 * This is executed when GoldenLayout detects that it is run
+		 * within a previously opened popout window.
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _adjustToWindowMode: function () {
+            var popInButton = $('<div class="lm_popin" title="' + this.config.labels.popin + '">' +
+                '<div class="lm_icon"></div>' +
+                '<div class="lm_bg"></div>' +
+                '</div>');
+
+            popInButton.click(lm.utils.fnBind(function () {
+                this.emit('popIn');
+            }, this));
+
+            document.title = lm.utils.stripTags(this.config.content[0].title);
+
+            $('head').append($('body link, body style, template, .gl_keep'));
+
+            this.container = $('body')
+                .html('')
+                .css('visibility', 'visible')
+                .append(popInButton);
+
+			/*
+			 * This seems a bit pointless, but actually causes a reflow/re-evaluation getting around
+			 * slickgrid's "Cannot find stylesheet." bug in chrome
+			 */
+            var x = document.body.offsetHeight; // jshint ignore:line
+
+			/*
+			 * Expose this instance on the window object
+			 * to allow the opening window to interact with
+			 * it
+			 */
+            window.__glInstance = this;
+        },
+
+		/**
+		 * Creates Subwindows (if there are any). Throws an error
+		 * if popouts are blocked.
+		 *
+		 * @returns {void}
+		 */
+        _createSubWindows: function () {
+            var i, popout;
+
+            for (i = 0; i < this.config.openPopouts.length; i++) {
+                popout = this.config.openPopouts[i];
+
+                this.createPopout(
+                    popout.content,
+                    popout.dimensions,
+                    popout.parentId,
+                    popout.indexInParent
+                );
+            }
+        },
+
+		/**
+		 * Determines what element the layout will be created in
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _setContainer: function () {
+            var container = $(this.container || 'body');
+
+            if (container.length === 0) {
+                throw new Error('GoldenLayout container not found');
+            }
+
+            if (container.length > 1) {
+                throw new Error('GoldenLayout more than one container element specified');
+            }
+
+            if (container[0] === document.body) {
+                this._isFullPage = true;
+
+                $('html, body').css({
+                    height: '100%',
+                    margin: 0,
+                    padding: 0,
+                    overflow: 'hidden'
+                });
+            }
+
+            this.container = container;
+        },
+
+		/**
+		 * Kicks of the initial, recursive creation chain
+		 *
+		 * @param   {Object} config GoldenLayout Config
+		 *
+		 * @returns {void}
+		 */
+        _create: function (config) {
+            var errorMsg;
+
+            if (!(config.content instanceof Array)) {
+                if (config.content === undefined) {
+                    errorMsg = 'Missing setting \'content\' on top level of configuration';
+                } else {
+                    errorMsg = 'Configuration parameter \'content\' must be an array';
+                }
+
+                throw new lm.errors.ConfigurationError(errorMsg, config);
+            }
+
+            if (config.content.length > 1) {
+                errorMsg = 'Top level content can\'t contain more then one element.';
+                throw new lm.errors.ConfigurationError(errorMsg, config);
+            }
+
+            this.root = new lm.items.Root(this, { content: config.content }, this.container);
+            this.root.callDownwards('_$init');
+
+            if (config.maximisedItemId === '__glMaximised') {
+                this.root.getItemsById(config.maximisedItemId)[0].toggleMaximise();
+            }
+        },
+
+		/**
+		 * Called when the window is closed or the user navigates away
+		 * from the page
+		 *
+		 * @returns {void}
+		 */
+        _onUnload: function () {
+            if (this.config.settings.closePopoutsOnUnload === true) {
+                for (var i = 0; i < this.openPopouts.length; i++) {
+                    this.openPopouts[i].close();
+                }
+            }
+        },
+
+		/**
+		 * Adjusts the number of columns to be lower to fit the screen and still maintain minItemWidth.
+		 *
+		 * @returns {void}
+		 */
+        _adjustColumnsResponsive: function () {
+
+            // If there is no min width set, or not content items, do nothing.
+            if (!this._useResponsiveLayout() || this._updatingColumnsResponsive || !this.config.dimensions || !this.config.dimensions.minItemWidth || this.root.contentItems.length === 0 || !this.root.contentItems[0].isRow) {
+                this._firstLoad = false;
+                return;
+            }
+
+            this._firstLoad = false;
+
+            // If there is only one column, do nothing.
+            var columnCount = this.root.contentItems[0].contentItems.length;
+            if (columnCount <= 1) {
+                return;
+            }
+
+            // If they all still fit, do nothing.
+            var minItemWidth = this.config.dimensions.minItemWidth;
+            var totalMinWidth = columnCount * minItemWidth;
+            if (totalMinWidth <= this.width) {
+                return;
+            }
+
+            // Prevent updates while it is already happening.
+            this._updatingColumnsResponsive = true;
+
+            // Figure out how many columns to stack, and put them all in the first stack container.
+            var finalColumnCount = Math.max(Math.floor(this.width / minItemWidth), 1);
+            var stackColumnCount = columnCount - finalColumnCount;
+
+            var rootContentItem = this.root.contentItems[0];
+            var firstStackContainer = this._findAllStackContainers()[0];
+            for (var i = 0; i < stackColumnCount; i++) {
+                // Stack from right.
+                var column = rootContentItem.contentItems[rootContentItem.contentItems.length - 1];
+                this._addChildContentItemsToContainer(firstStackContainer, column);
+            }
+
+            this._updatingColumnsResponsive = false;
+        },
+
+		/**
+		 * Determines if responsive layout should be used.
+		 *
+		 * @returns {bool} - True if responsive layout should be used; otherwise false.
+		 */
+        _useResponsiveLayout: function () {
+            return this.config.settings && (this.config.settings.responsiveMode == 'always' || (this.config.settings.responsiveMode == 'onload' && this._firstLoad));
+        },
+
+		/**
+		 * Adds all children of a node to another container recursively.
+		 * @param {object} container - Container to add child content items to.
+		 * @param {object} node - Node to search for content items.
+		 * @returns {void}
+		 */
+        _addChildContentItemsToContainer: function (container, node) {
+            if (node.type === 'stack') {
+                node.contentItems.forEach(function (item) {
+                    container.addChild(item);
+                    node.removeChild(item, true);
+                });
+            }
+            else {
+                node.contentItems.forEach(lm.utils.fnBind(function (item) {
+                    this._addChildContentItemsToContainer(container, item);
+                }, this));
+            }
+        },
+
+		/**
+		 * Finds all the stack containers.
+		 * @returns {array} - The found stack containers.
+		 */
+        _findAllStackContainers: function () {
+            var stackContainers = [];
+            this._findAllStackContainersRecursive(stackContainers, this.root);
+
+            return stackContainers;
+        },
+
+		/**
+		 * Finds all the stack containers.
+		 *
+		 * @param {array} - Set of containers to populate.
+		 * @param {object} - Current node to process.
+		 *
+		 * @returns {void}
+		 */
+        _findAllStackContainersRecursive: function (stackContainers, node) {
+            node.contentItems.forEach(lm.utils.fnBind(function (item) {
+                if (item.type == 'stack') {
+                    stackContainers.push(item);
+                }
+                else if (!item.isComponent) {
+                    this._findAllStackContainersRecursive(stackContainers, item);
+                }
+            }, this));
+        }
+    });
+
+	/**
+	 * Expose the Layoutmanager as the single entrypoint using UMD
+	 */
+    (function () {
+        /* global define */
+        if (typeof define === 'function' && define.amd) {
+            define(['jquery'], function (jquery) {
+                $ = jquery;
+                return lm.LayoutManager;
+            }); // jshint ignore:line
+        } else if (typeof exports === 'object') {
+            module.exports = lm.LayoutManager;
+        } else {
+            window.GoldenLayout = lm.LayoutManager;
+        }
+    })();
+
+    lm.config.itemDefaultConfig = {
+        isClosable: true,
+        reorderEnabled: true,
+        title: ''
+    };
+    lm.config.defaultConfig = {
+        openPopouts: [],
+        settings: {
+            hasHeaders: true,
+            constrainDragToContainer: true,
+            reorderEnabled: true,
+            selectionEnabled: false,
+            popoutWholeStack: false,
+            blockedPopoutsThrowError: true,
+            closePopoutsOnUnload: true,
+            showPopoutIcon: true,
+            showMaximiseIcon: true,
+            showCloseIcon: true,
+            responsiveMode: 'onload', // Can be onload, always, or none.
+            tabOverlapAllowance: 0, // maximum pixel overlap per tab
+            reorderOnTabMenuClick: true,
+            tabControlOffset: 10
+        },
+        dimensions: {
+            borderWidth: 5,
+            borderGrabWidth: 15,
+            minItemHeight: 10,
+            minItemWidth: 10,
+            headerHeight: 20,
+            dragProxyWidth: 300,
+            dragProxyHeight: 200
+        },
+        labels: {
+            close: 'close',
+            maximise: 'maximise',
+            minimise: 'minimise',
+            popout: 'open in new window',
+            popin: 'pop in',
+            tabDropdown: 'additional tabs'
+        }
+    };
+
+    lm.container.ItemContainer = function (config, parent, layoutManager) {
+        lm.utils.EventEmitter.call(this);
+
+        this.width = null;
+        this.height = null;
+        this.title = config.componentName;
+        this.parent = parent;
+        this.layoutManager = layoutManager;
+        this.isHidden = false;
+
+        this._config = config;
+        this._element = $([
+            '<div class="lm_item_container">',
+            '<div class="lm_content"></div>',
+            '</div>'
+        ].join(''));
+
+        this._contentElement = this._element.find('.lm_content');
+    };
+
+    lm.utils.copy(lm.container.ItemContainer.prototype, {
+
+		/**
+		 * Get the inner DOM element the container's content
+		 * is intended to live in
+		 *
+		 * @returns {DOM element}
+		 */
+        getElement: function () {
+            return this._contentElement;
+        },
+
+		/**
+		 * Hide the container. Notifies the containers content first
+		 * and then hides the DOM node. If the container is already hidden
+		 * this should have no effect
+		 *
+		 * @returns {void}
+		 */
+        hide: function () {
+            this.emit('hide');
+            this.isHidden = true;
+            this._element.hide();
+        },
+
+		/**
+		 * Shows a previously hidden container. Notifies the
+		 * containers content first and then shows the DOM element.
+		 * If the container is already visible this has no effect.
+		 *
+		 * @returns {void}
+		 */
+        show: function () {
+            this.emit('show');
+            this.isHidden = false;
+            this._element.show();
+            // call shown only if the container has a valid size
+            if (this.height != 0 || this.width != 0) {
+                this.emit('shown');
+            }
+        },
+
+		/**
+		 * Set the size from within the container. Traverses up
+		 * the item tree until it finds a row or column element
+		 * and resizes its items accordingly.
+		 *
+		 * If this container isn't a descendant of a row or column
+		 * it returns false
+		 * @todo  Rework!!!
+		 * @param {Number} width  The new width in pixel
+		 * @param {Number} height The new height in pixel
+		 *
+		 * @returns {Boolean} resizeSuccesful
+		 */
+        setSize: function (width, height) {
+            var rowOrColumn = this.parent,
+                rowOrColumnChild = this,
+                totalPixel,
+                percentage,
+                direction,
+                newSize,
+                delta,
+                i;
+
+            while (!rowOrColumn.isColumn && !rowOrColumn.isRow) {
+                rowOrColumnChild = rowOrColumn;
+                rowOrColumn = rowOrColumn.parent;
+
+
+				/**
+				 * No row or column has been found
+				 */
+                if (rowOrColumn.isRoot) {
+                    return false;
+                }
+            }
+
+            direction = rowOrColumn.isColumn ? "height" : "width";
+            newSize = direction === "height" ? height : width;
+
+            totalPixel = this[direction] * (1 / (rowOrColumnChild.config[direction] / 100));
+            percentage = (newSize / totalPixel) * 100;
+            delta = (rowOrColumnChild.config[direction] - percentage) / (rowOrColumn.contentItems.length - 1);
+
+            for (i = 0; i < rowOrColumn.contentItems.length; i++) {
+                if (rowOrColumn.contentItems[i] === rowOrColumnChild) {
+                    rowOrColumn.contentItems[i].config[direction] = percentage;
+                } else {
+                    rowOrColumn.contentItems[i].config[direction] += delta;
+                }
+            }
+
+            rowOrColumn.callDownwards('setSize');
+
+            return true;
+        },
+
+		/**
+		 * Closes the container if it is closable. Can be called by
+		 * both the component within at as well as the contentItem containing
+		 * it. Emits a close event before the container itself is closed.
+		 *
+		 * @returns {void}
+		 */
+        close: function () {
+            if (this._config.isClosable) {
+                this.emit('close');
+                this.parent.close();
+            }
+        },
+
+		/**
+		 * Returns the current state object
+		 *
+		 * @returns {Object} state
+		 */
+        getState: function () {
+            return this._config.componentState;
+        },
+
+		/**
+		 * Merges the provided state into the current one
+		 *
+		 * @param   {Object} state
+		 *
+		 * @returns {void}
+		 */
+        extendState: function (state) {
+            this.setState($.extend(true, this.getState(), state));
+        },
+
+		/**
+		 * Notifies the layout manager of a stateupdate
+		 *
+		 * @param {serialisable} state
+		 */
+        setState: function (state) {
+            this._config.componentState = state;
+            this.parent.emitBubblingEvent('stateChanged');
+        },
+
+		/**
+		 * Set's the components title
+		 *
+		 * @param {String} title
+		 */
+        setTitle: function (title) {
+            this.parent.setTitle(title);
+        },
+
+		/**
+		 * Set's the containers size. Called by the container's component.
+		 * To set the size programmatically from within the container please
+		 * use the public setSize method
+		 *
+		 * @param {[Int]} width  in px
+		 * @param {[Int]} height in px
+		 *
+		 * @returns {void}
+		 */
+        _$setSize: function (width, height) {
+            if (width !== this.width || height !== this.height) {
+                this.width = width;
+                this.height = height;
+                var cl = this._contentElement[0];
+                var hdelta = cl.offsetWidth - cl.clientWidth;
+                var vdelta = cl.offsetHeight - cl.clientHeight;
+                this._contentElement.width(this.width - hdelta)
+                    .height(this.height - vdelta);
+                this.emit('resize');
+            }
+        }
+    });
+
+	/**
+	 * Pops a content item out into a new browser window.
+	 * This is achieved by
+	 *
+	 *    - Creating a new configuration with the content item as root element
+	 *    - Serializing and minifying the configuration
+	 *    - Opening the current window's URL with the configuration as a GET parameter
+	 *    - GoldenLayout when opened in the new window will look for the GET parameter
+	 *      and use it instead of the provided configuration
+	 *
+	 * @param {Object} config GoldenLayout item config
+	 * @param {Object} dimensions A map with width, height, top and left
+	 * @param {String} parentId The id of the element the item will be appended to on popIn
+	 * @param {Number} indexInParent The position of this element within its parent
+	 * @param {lm.LayoutManager} layoutManager
+	 */
+    lm.controls.BrowserPopout = function (config, dimensions, parentId, indexInParent, layoutManager) {
+        lm.utils.EventEmitter.call(this);
+        this.isInitialised = false;
+
+        this._config = config;
+        this._dimensions = dimensions;
+        this._parentId = parentId;
+        this._indexInParent = indexInParent;
+        this._layoutManager = layoutManager;
+        this._popoutWindow = null;
+        this._id = null;
+        this._createWindow();
+    };
+
+    lm.utils.copy(lm.controls.BrowserPopout.prototype, {
+
+        toConfig: function () {
+            if (this.isInitialised === false) {
+                throw new Error('Can\'t create config, layout not yet initialised');
+                return;
+            }
+            return {
+                dimensions: {
+                    width: this.getGlInstance().width,
+                    height: this.getGlInstance().height,
+                    left: this._popoutWindow.screenX || this._popoutWindow.screenLeft,
+                    top: this._popoutWindow.screenY || this._popoutWindow.screenTop
+                },
+                content: this.getGlInstance().toConfig().content,
+                parentId: this._parentId,
+                indexInParent: this._indexInParent
+            };
+        },
+
+        getGlInstance: function () {
+            return this._popoutWindow.__glInstance;
+        },
+
+        getWindow: function () {
+            return this._popoutWindow;
+        },
+
+        close: function () {
+            if (this.getGlInstance()) {
+                this.getGlInstance()._$closeWindow();
+            } else {
+                try {
+                    this.getWindow().close();
+                } catch (e) {
+                }
+            }
+        },
+
+		/**
+		 * Returns the popped out item to its original position. If the original
+		 * parent isn't available anymore it falls back to the layout's topmost element
+		 */
+        popIn: function () {
+            var childConfig,
+                parentItem,
+                index = this._indexInParent;
+
+            if (this._parentId) {
+
+				/*
+				 * The $.extend call seems a bit pointless, but it's crucial to
+				 * copy the config returned by this.getGlInstance().toConfig()
+				 * onto a new object. Internet Explorer keeps the references
+				 * to objects on the child window, resulting in the following error
+				 * once the child window is closed:
+				 *
+				 * The callee (server [not server application]) is not available and disappeared
+				 */
+                childConfig = $.extend(true, {}, this.getGlInstance().toConfig()).content[0];
+                parentItem = this._layoutManager.root.getItemsById(this._parentId)[0];
+
+				/*
+				 * Fallback if parentItem is not available. Either add it to the topmost
+				 * item or make it the topmost item if the layout is empty
+				 */
+                if (!parentItem) {
+                    if (this._layoutManager.root.contentItems.length > 0) {
+                        parentItem = this._layoutManager.root.contentItems[0];
+                    } else {
+                        parentItem = this._layoutManager.root;
+                    }
+                    index = 0;
+                }
+            }
+
+            parentItem.addChild(childConfig, this._indexInParent);
+            this.close();
+        },
+
+		/**
+		 * Creates the URL and window parameter
+		 * and opens a new window
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _createWindow: function () {
+            var checkReadyInterval,
+                url = this._createUrl(),
+
+				/**
+				 * Bogus title to prevent re-usage of existing window with the
+				 * same title. The actual title will be set by the new window's
+				 * GoldenLayout instance if it detects that it is in subWindowMode
+				 */
+                title = Math.floor(Math.random() * 1000000).toString(36),
+
+				/**
+				 * The options as used in the window.open string
+				 */
+                options = this._serializeWindowOptions({
+                    width: this._dimensions.width,
+                    height: this._dimensions.height,
+                    innerWidth: this._dimensions.width,
+                    innerHeight: this._dimensions.height,
+                    menubar: 'no',
+                    toolbar: 'no',
+                    location: 'no',
+                    personalbar: 'no',
+                    resizable: 'yes',
+                    scrollbars: 'no',
+                    status: 'no'
+                });
+
+            this._popoutWindow = window.open(url, title, options);
+
+            if (!this._popoutWindow) {
+                if (this._layoutManager.config.settings.blockedPopoutsThrowError === true) {
+                    var error = new Error('Popout blocked');
+                    error.type = 'popoutBlocked';
+                    throw error;
+                } else {
+                    return;
+                }
+            }
+
+            $(this._popoutWindow)
+                .on('load', lm.utils.fnBind(this._positionWindow, this))
+                .on('unload beforeunload', lm.utils.fnBind(this._onClose, this));
+
+			/**
+			 * Polling the childwindow to find out if GoldenLayout has been initialised
+			 * doesn't seem optimal, but the alternatives - adding a callback to the parent
+			 * window or raising an event on the window object - both would introduce knowledge
+			 * about the parent to the child window which we'd rather avoid
+			 */
+            checkReadyInterval = setInterval(lm.utils.fnBind(function () {
+                if (this._popoutWindow.__glInstance && this._popoutWindow.__glInstance.isInitialised) {
+                    this._onInitialised();
+                    clearInterval(checkReadyInterval);
+                }
+            }, this), 10);
+        },
+
+		/**
+		 * Serialises a map of key:values to a window options string
+		 *
+		 * @param   {Object} windowOptions
+		 *
+		 * @returns {String} serialised window options
+		 */
+        _serializeWindowOptions: function (windowOptions) {
+            var windowOptionsString = [], key;
+
+            for (key in windowOptions) {
+                windowOptionsString.push(key + '=' + windowOptions[key]);
+            }
+
+            return windowOptionsString.join(',');
+        },
+
+		/**
+		 * Creates the URL for the new window, including the
+		 * config GET parameter
+		 *
+		 * @returns {String} URL
+		 */
+        _createUrl: function () {
+            var config = { content: this._config },
+                storageKey = 'gl-window-config-' + lm.utils.getUniqueId(),
+                urlParts;
+
+            config = (new lm.utils.ConfigMinifier()).minifyConfig(config);
+
+            try {
+                localStorage.setItem(storageKey, JSON.stringify(config));
+            } catch (e) {
+                throw new Error('Error while writing to localStorage ' + e.toString());
+            }
+
+            urlParts = document.location.href.split('?');
+
+            // URL doesn't contain GET-parameters
+            if (urlParts.length === 1) {
+                return urlParts[0] + '?gl-window=' + storageKey;
+
+                // URL contains GET-parameters
+            } else {
+                return document.location.href + '&gl-window=' + storageKey;
+            }
+        },
+
+		/**
+		 * Move the newly created window roughly to
+		 * where the component used to be.
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _positionWindow: function () {
+            this._popoutWindow.moveTo(this._dimensions.left, this._dimensions.top);
+            this._popoutWindow.focus();
+        },
+
+		/**
+		 * Callback when the new window is opened and the GoldenLayout instance
+		 * within it is initialised
+		 *
+		 * @returns {void}
+		 */
+        _onInitialised: function () {
+            this.isInitialised = true;
+            this.getGlInstance().on('popIn', this.popIn, this);
+            this.emit('initialised');
+        },
+
+		/**
+		 * Invoked 50ms after the window unload event
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _onClose: function () {
+            setTimeout(lm.utils.fnBind(this.emit, this, ['closed']), 50);
+        }
+    });
+	/**
+	 * This class creates a temporary container
+	 * for the component whilst it is being dragged
+	 * and handles drag events
+	 *
+	 * @constructor
+	 * @private
+	 *
+	 * @param {Number} x              The initial x position
+	 * @param {Number} y              The initial y position
+	 * @param {lm.utils.DragListener} dragListener
+	 * @param {lm.LayoutManager} layoutManager
+	 * @param {lm.item.AbstractContentItem} contentItem
+	 * @param {lm.item.AbstractContentItem} originalParent
+	 */
+    lm.controls.DragProxy = function (x, y, dragListener, layoutManager, contentItem, originalParent) {
+
+        lm.utils.EventEmitter.call(this);
+
+        this._dragListener = dragListener;
+        this._layoutManager = layoutManager;
+        this._contentItem = contentItem;
+        this._originalParent = originalParent;
+
+        this._area = null;
+        this._lastValidArea = null;
+
+        this._dragListener.on('drag', this._onDrag, this);
+        this._dragListener.on('dragStop', this._onDrop, this);
+
+        this.element = $(lm.controls.DragProxy._template);
+        if (originalParent && originalParent._side) {
+            this._sided = originalParent._sided;
+            this.element.addClass('lm_' + originalParent._side);
+            if (['right', 'bottom'].indexOf(originalParent._side) >= 0)
+                this.element.find('.lm_content').after(this.element.find('.lm_header'));
+        }
+        this.element.css({ left: x, top: y });
+        this.element.find('.lm_tab').attr('title', lm.utils.stripTags(this._contentItem.config.title));
+        this.element.find('.lm_title').html(this._contentItem.config.title);
+        this.childElementContainer = this.element.find('.lm_content');
+        this.childElementContainer.append(contentItem.element);
+
+        this._updateTree();
+        this._layoutManager._$calculateItemAreas();
+        this._setDimensions();
+
+        $(document.body).append(this.element);
+
+        var offset = this._layoutManager.container.offset();
+
+        this._minX = offset.left;
+        this._minY = offset.top;
+        this._maxX = this._layoutManager.container.width() + this._minX;
+        this._maxY = this._layoutManager.container.height() + this._minY;
+        this._width = this.element.width();
+        this._height = this.element.height();
+
+        this._setDropPosition(x, y);
+    };
+
+    lm.controls.DragProxy._template = '<div class="lm_dragProxy">' +
+        '<div class="lm_header">' +
+        '<ul class="lm_tabs">' +
+        '<li class="lm_tab lm_active"><i class="lm_left"></i>' +
+        '<span class="lm_title"></span>' +
+        '<i class="lm_right"></i></li>' +
+        '</ul>' +
+        '</div>' +
+        '<div class="lm_content"></div>' +
+        '</div>';
+
+    lm.utils.copy(lm.controls.DragProxy.prototype, {
+
+		/**
+		 * Callback on every mouseMove event during a drag. Determines if the drag is
+		 * still within the valid drag area and calls the layoutManager to highlight the
+		 * current drop area
+		 *
+		 * @param   {Number} offsetX The difference from the original x position in px
+		 * @param   {Number} offsetY The difference from the original y position in px
+		 * @param   {jQuery DOM event} event
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _onDrag: function (offsetX, offsetY, event) {
+
+            event = event.originalEvent && event.originalEvent.touches ? event.originalEvent.touches[0] : event;
+
+            var x = event.pageX,
+                y = event.pageY,
+                isWithinContainer = x > this._minX && x < this._maxX && y > this._minY && y < this._maxY;
+
+            if (!isWithinContainer && this._layoutManager.config.settings.constrainDragToContainer === true) {
+                return;
+            }
+
+            this._setDropPosition(x, y);
+        },
+
+		/**
+		 * Sets the target position, highlighting the appropriate area
+		 *
+		 * @param   {Number} x The x position in px
+		 * @param   {Number} y The y position in px
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _setDropPosition: function (x, y) {
+            this.element.css({ left: x, top: y });
+            this._area = this._layoutManager._$getArea(x, y);
+
+            if (this._area !== null) {
+                this._lastValidArea = this._area;
+                this._area.contentItem._$highlightDropZone(x, y, this._area);
+            }
+        },
+
+		/**
+		 * Callback when the drag has finished. Determines the drop area
+		 * and adds the child to it
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _onDrop: function () {
+            this._layoutManager.dropTargetIndicator.hide();
+
+			/*
+			 * Valid drop area found
+			 */
+            if (this._area !== null) {
+                this._area.contentItem._$onDrop(this._contentItem, this._area);
+
+				/**
+				 * No valid drop area available at present, but one has been found before.
+				 * Use it
+				 */
+            } else if (this._lastValidArea !== null) {
+                this._lastValidArea.contentItem._$onDrop(this._contentItem, this._lastValidArea);
+
+				/**
+				 * No valid drop area found during the duration of the drag. Return
+				 * content item to its original position if a original parent is provided.
+				 * (Which is not the case if the drag had been initiated by createDragSource)
+				 */
+            } else if (this._originalParent) {
+                this._originalParent.addChild(this._contentItem);
+
+				/**
+				 * The drag didn't ultimately end up with adding the content item to
+				 * any container. In order to ensure clean up happens, destroy the
+				 * content item.
+				 */
+            } else {
+                this._contentItem._$destroy();
+            }
+
+            this.element.remove();
+
+            this._layoutManager.emit('itemDropped', this._contentItem);
+        },
+
+		/**
+		 * Removes the item from its original position within the tree
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _updateTree: function () {
+
+			/**
+			 * parent is null if the drag had been initiated by a external drag source
+			 */
+            if (this._contentItem.parent) {
+                this._contentItem.parent.removeChild(this._contentItem, true);
+            }
+
+            this._contentItem._$setParent(this);
+        },
+
+		/**
+		 * Updates the Drag Proxie's dimensions
+		 *
+		 * @private
+		 *
+		 * @returns {void}
+		 */
+        _setDimensions: function () {
+            var dimensions = this._layoutManager.config.dimensions,
+                width = dimensions.dragProxyWidth,
+                height = dimensions.dragProxyHeight;
+
+            this.element.width(width);
+            this.element.height(height);
+            width -= (this._sided ? dimensions.headerHeight : 0);
+            height -= (!this._sided ? dimensions.headerHeight : 0);
+            this.childElementContainer.width(width);
+            this.childElementContainer.height(height);
+            this._contentItem.element.width(width);
+            this._contentItem.element.height(height);
+            this._contentItem.callDownwards('_$show');
+            this._contentItem.callDownwards('setSize');
+        }
+    });
+
+	/**
+	 * Allows for any DOM item to create a component on drag
+	 * start tobe dragged into the Layout
+	 *
+	 * @param {jQuery element} element
+	 * @param {Object} itemConfig the configuration for the contentItem that will be created
+	 * @param {LayoutManager} layoutManager
+	 *
+	 * @constructor
+	 */
+    lm.controls.DragSource = function (element, itemConfig, layoutManager) {
+        this._element = element;
+        this._itemConfig = itemConfig;
+        this._layoutManager = layoutManager;
+        this._dragListener = null;
+
+        this._createDragListener();
+    };
+
+    lm.utils.copy(lm.controls.DragSource.prototype, {
+
+		/**
+		 * Called initially and after every drag
+		 *
+		 * @returns {void}
+		 */
+        _createDragListener: function () {
+            if (this._dragListener !== null) {
+                this._dragListener.destroy();
+            }
+
+            this._dragListener = new lm.utils.DragListener(this._element);
+            this._dragListener.on('dragStart', this._onDragStart, this);
+            this._dragListener.on('dragStop', this._createDragListener, this);
+        },
+
+		/**
+		 * Callback for the DragListener's dragStart event
+		 *
+		 * @param   {int} x the x position of the mouse on dragStart
+		 * @param   {int} y the x position of the mouse on dragStart
+		 *
+		 * @returns {void}
+		 */
+        _onDragStart: function (x, y) {
+            var itemConfig = this._itemConfig;
+            if (lm.utils.isFunction(itemConfig)) {
+                itemConfig = itemConfig();
+            }
+            var contentItem = this._layoutManager._$normalizeContentItem($.extend(true, {}, itemConfig)),
+                dragProxy = new lm.controls.DragProxy(x, y, this._dragListener, this._layoutManager, contentItem, null);
+
+            this._layoutManager.transitionIndicator.transitionElements(this._element, dragProxy.element);
+        }
+    });
+
+    lm.controls.DropTargetIndicator = function () {
+        this.element = $(lm.controls.DropTargetIndicator._template);
+        $(document.body).append(this.element);
+    };
+
+    lm.controls.DropTargetIndicator._template = '<div class="lm_dropTargetIndicator"><div class="lm_inner"></div></div>';
+
+    lm.utils.copy(lm.controls.DropTargetIndicator.prototype, {
+        destroy: function () {
+            this.element.remove();
+        },
+
+        highlight: function (x1, y1, x2, y2) {
+            this.highlightArea({ x1: x1, y1: y1, x2: x2, y2: y2 });
+        },
+
+        highlightArea: function (area) {
+            this.element.css({
+                left: area.x1,
+                top: area.y1,
+                width: area.x2 - area.x1,
+                height: area.y2 - area.y1
+            }).show();
+        },
+
+        hide: function () {
+            this.element.hide();
+        }
+    });
+	/**
+	 * This class represents a header above a Stack ContentItem.
+	 *
+	 * @param {lm.LayoutManager} layoutManager
+	 * @param {lm.item.AbstractContentItem} parent
+	 */
+    lm.controls.Header = function (layoutManager, parent) {
+        lm.utils.EventEmitter.call(this);
+
+        this.layoutManager = layoutManager;
+        this.element = $(lm.controls.Header._template);
+
+        if (this.layoutManager.config.settings.selectionEnabled === true) {
+            this.element.addClass('lm_selectable');
+            this.element.on('click touchstart', lm.utils.fnBind(this._onHeaderClick, this));
+        }
+
+        this.tabsContainer = this.element.find('.lm_tabs');
+        this.tabDropdownContainer = this.element.find('.lm_tabdropdown_list');
+        this.tabDropdownContainer.hide();
+        this.controlsContainer = this.element.find('.lm_controls');
+        this.parent = parent;
+        this.parent.on('resize', this._updateTabSizes, this);
+        this.tabs = [];
+        this.activeContentItem = null;
+        this.closeButton = null;
+        this.tabDropdownButton = null;
+        this.hideAdditionalTabsDropdown = lm.utils.fnBind(this._hideAdditionalTabsDropdown, this);
+        $(document).mouseup(this.hideAdditionalTabsDropdown);
+
+        this._lastVisibleTabIndex = -1;
+        this._tabControlOffset = this.layoutManager.config.settings.tabControlOffset;
+        this._createControls();
+    };
+
+    lm.controls.Header._template = [
+        '<div class="lm_header">',
+        '<ul class="lm_tabs"></ul>',
+        '<ul class="lm_controls"></ul>',
+        '<ul class="lm_tabdropdown_list"></ul>',
+        '</div>'
+    ].join('');
+
+    lm.utils.copy(lm.controls.Header.prototype, {
+
+		/**
+		 * Creates a new tab and associates it with a contentItem
+		 *
+		 * @param    {lm.item.AbstractContentItem} contentItem
+		 * @param    {Integer} index The position of the tab
+		 *
+		 * @returns {void}
+		 */
+        createTab: function (contentItem, index) {
+            var tab, i;
+
+            //If there's already a tab relating to the
+            //content item, don't do anything
+            for (i = 0; i < this.tabs.length; i++) {
+                if (this.tabs[i].contentItem === contentItem) {
+                    return;
+                }
+            }
+
+            tab = new lm.controls.Tab(this, contentItem);
+
+            if (this.tabs.length === 0) {
+                this.tabs.push(tab);
+                this.tabsContainer.append(tab.element);
+                return;
+            }
+
+            if (index === undefined) {
+                index = this.tabs.length;
+            }
+
+            if (index > 0) {
+                this.tabs[index - 1].element.after(tab.element);
+            } else {
+                this.tabs[0].element.before(tab.element);
+            }
+
+            this.tabs.splice(index, 0, tab);
+            this._updateTabSizes();
+        },
+
+		/**
+		 * Finds a tab based on the contentItem its associated with and removes it.
+		 *
+		 * @param    {lm.item.AbstractContentItem} contentItem
+		 *
+		 * @returns {void}
+		 */
+        removeTab: function (contentItem) {
+            for (var i = 0; i < this.tabs.length; i++) {
+                if (this.tabs[i].contentItem === contentItem) {
+                    this.tabs[i]._$destroy();
+                    this.tabs.splice(i, 1);
+                    return;
+                }
+            }
+
+            throw new Error('contentItem is not controlled by this header');
+        },
+
+		/**
+		 * The programmatical equivalent of clicking a Tab.
+		 *
+		 * @param {lm.item.AbstractContentItem} contentItem
+		 */
+        setActiveContentItem: function (contentItem) {
+            var i, j, isActive, activeTab;
+
+            for (i = 0; i < this.tabs.length; i++) {
+                isActive = this.tabs[i].contentItem === contentItem;
+                this.tabs[i].setActive(isActive);
+                if (isActive === true) {
+                    this.activeContentItem = contentItem;
+                    this.parent.config.activeItemIndex = i;
+                }
+            }
+
+            if (this.layoutManager.config.settings.reorderOnTabMenuClick) {
+				/**
+				 * If the tab selected was in the dropdown, move everything down one to make way for this one to be the first.
+				 * This will make sure the most used tabs stay visible.
+				 */
+                if (this._lastVisibleTabIndex !== -1 && this.parent.config.activeItemIndex > this._lastVisibleTabIndex) {
+                    activeTab = this.tabs[this.parent.config.activeItemIndex];
+                    for (j = this.parent.config.activeItemIndex; j > 0; j--) {
+                        this.tabs[j] = this.tabs[j - 1];
+                    }
+                    this.tabs[0] = activeTab;
+                    this.parent.config.activeItemIndex = 0;
+                }
+            }
+
+            this._updateTabSizes();
+            this.parent.emitBubblingEvent('stateChanged');
+        },
+
+		/**
+		 * Programmatically operate with header position.
+		 *
+		 * @param {string} position one of ('top','left','right','bottom') to set or empty to get it.
+		 *
+		 * @returns {string} previous header position
+		 */
+        position: function (position) {
+            var previous = this.parent._header.show;
+            if (previous && !this.parent._side)
+                previous = 'top';
+            if (position !== undefined && this.parent._header.show != position) {
+                this.parent._header.show = position;
+                this.parent._setupHeaderPosition();
+            }
+            return previous;
+        },
+
+		/**
+		 * Programmatically set closability.
+		 *
+		 * @package private
+		 * @param {Boolean} isClosable Whether to enable/disable closability.
+		 *
+		 * @returns {Boolean} Whether the action was successful
+		 */
+        _$setClosable: function (isClosable) {
+            if (this.closeButton && this._isClosable()) {
+                this.closeButton.element[isClosable ? "show" : "hide"]();
+                return true;
+            }
+
+            return false;
+        },
+
+		/**
+		 * Destroys the entire header
+		 *
+		 * @package private
+		 *
+		 * @returns {void}
+		 */
+        _$destroy: function () {
+            this.emit('destroy', this);
+
+            for (var i = 0; i < this.tabs.length; i++) {
+                this.tabs[i]._$destroy();
+            }
+            $(document).off('mouseup', this.hideAdditionalTabsDropdown);
+            this.element.remove();
+        },
+
+		/**
+		 * get settings from header
+		 *
+		 * @returns {string} when exists
+		 */
+        _getHeaderSetting: function (name) {
+            if (name in this.parent._header)
+                return this.parent._header[name];
+        },
+		/**
+		 * Creates the popout, maximise and close buttons in the header's top right corner
+		 *
+		 * @returns {void}
+		 */
+        _createControls: function () {
+            var closeStack,
+                popout,
+                label,
+                maximiseLabel,
+                minimiseLabel,
+                maximise,
+                maximiseButton,
+                tabDropdownLabel,
+                showTabDropdown;
+
+			/**
+			 * Dropdown to show additional tabs.
+			 */
+            showTabDropdown = lm.utils.fnBind(this._showAdditionalTabsDropdown, this);
+            tabDropdownLabel = this.layoutManager.config.labels.tabDropdown;
+            this.tabDropdownButton = new lm.controls.HeaderButton(this, tabDropdownLabel, 'lm_tabdropdown', showTabDropdown);
+            this.tabDropdownButton.element.hide();
+
+			/**
+			 * Popout control to launch component in new window.
+			 */
+            if (this._getHeaderSetting('popout')) {
+                popout = lm.utils.fnBind(this._onPopoutClick, this);
+                label = this._getHeaderSetting('popout');
+                new lm.controls.HeaderButton(this, label, 'lm_popout', popout);
+            }
+
+			/**
+			 * Maximise control - set the component to the full size of the layout
+			 */
+            if (this._getHeaderSetting('maximise')) {
+                maximise = lm.utils.fnBind(this.parent.toggleMaximise, this.parent);
+                maximiseLabel = this._getHeaderSetting('maximise');
+                minimiseLabel = this._getHeaderSetting('minimise');
+                maximiseButton = new lm.controls.HeaderButton(this, maximiseLabel, 'lm_maximise', maximise);
+
+                this.parent.on('maximised', function () {
+                    maximiseButton.element.attr('title', minimiseLabel);
+                });
+
+                this.parent.on('minimised', function () {
+                    maximiseButton.element.attr('title', maximiseLabel);
+                });
+            }
+
+			/**
+			 * Close button
+			 */
+            if (this._isClosable()) {
+                closeStack = lm.utils.fnBind(this.parent.remove, this.parent);
+                label = this._getHeaderSetting('close');
+                this.closeButton = new lm.controls.HeaderButton(this, label, 'lm_close', closeStack);
+            }
+        },
+
+		/**
+		 * Shows drop down for additional tabs when there are too many to display.
+		 *
+		 * @returns {void}
+		 */
+        _showAdditionalTabsDropdown: function () {
+            this.tabDropdownContainer.show();
+        },
+
+		/**
+		 * Hides drop down for additional tabs when there are too many to display.
+		 *
+		 * @returns {void}
+		 */
+        _hideAdditionalTabsDropdown: function (e) {
+            this.tabDropdownContainer.hide();
+        },
+
+		/**
+		 * Checks whether the header is closable based on the parent config and
+		 * the global config.
+		 *
+		 * @returns {Boolean} Whether the header is closable.
+		 */
+        _isClosable: function () {
+            return this.parent.config.isClosable && this.layoutManager.config.settings.showCloseIcon;
+        },
+
+        _onPopoutClick: function () {
+            if (this.layoutManager.config.settings.popoutWholeStack === true) {
+                this.parent.popout();
+            } else {
+                this.activeContentItem.popout();
+            }
+        },
+
+
+		/**
+		 * Invoked when the header's background is clicked (not it's tabs or controls)
+		 *
+		 * @param    {jQuery DOM event} event
+		 *
+		 * @returns {void}
+		 */
+        _onHeaderClick: function (event) {
+            if (event.target === this.element[0]) {
+                this.parent.select();
+            }
+        },
+
+		/**
+		 * Pushes the tabs to the tab dropdown if the available space is not sufficient
+		 *
+		 * @returns {void}
+		 */
+        _updateTabSizes: function (showTabMenu) {
+            if (this.tabs.length === 0) {
+                return;
+            }
+
+            //Show the menu based on function argument
+            this.tabDropdownButton.element.toggle(showTabMenu === true);
+
+            var size = function (val) {
+                return val ? 'width' : 'height';
+            };
+            this.element.css(size(!this.parent._sided), '');
+            this.element[size(this.parent._sided)](this.layoutManager.config.dimensions.headerHeight);
+            var availableWidth = this.element.outerWidth() - this.controlsContainer.outerWidth() - this._tabControlOffset,
+                cumulativeTabWidth = 0,
+                visibleTabWidth = 0,
+                tabElement,
+                i,
+                j,
+                marginLeft,
+                overlap = 0,
+                tabWidth,
+                tabOverlapAllowance = this.layoutManager.config.settings.tabOverlapAllowance,
+                tabOverlapAllowanceExceeded = false,
+                activeIndex = (this.activeContentItem ? this.tabs.indexOf(this.activeContentItem.tab) : 0),
+                activeTab = this.tabs[activeIndex];
+            if (this.parent._sided)
+                availableWidth = this.element.outerHeight() - this.controlsContainer.outerHeight() - this._tabControlOffset;
+            this._lastVisibleTabIndex = -1;
+
+            for (i = 0; i < this.tabs.length; i++) {
+                tabElement = this.tabs[i].element;
+
+                //Put the tab in the tabContainer so its true width can be checked
+                this.tabsContainer.append(tabElement);
+                tabWidth = tabElement.outerWidth() + parseInt(tabElement.css('margin-right'), 10);
+
+                cumulativeTabWidth += tabWidth;
+
+                //Include the active tab's width if it isn't already
+                //This is to ensure there is room to show the active tab
+                if (activeIndex <= i) {
+                    visibleTabWidth = cumulativeTabWidth;
+                } else {
+                    visibleTabWidth = cumulativeTabWidth + activeTab.element.outerWidth() + parseInt(activeTab.element.css('margin-right'), 10);
+                }
+
+                // If the tabs won't fit, check the overlap allowance.
+                if (visibleTabWidth > availableWidth) {
+
+                    //Once allowance is exceeded, all remaining tabs go to menu.
+                    if (!tabOverlapAllowanceExceeded) {
+
+                        //No overlap for first tab or active tab
+                        //Overlap spreads among non-active, non-first tabs
+                        if (activeIndex > 0 && activeIndex <= i) {
+                            overlap = (visibleTabWidth - availableWidth) / (i - 1);
+                        } else {
+                            overlap = (visibleTabWidth - availableWidth) / i;
+                        }
+
+                        //Check overlap against allowance.
+                        if (overlap < tabOverlapAllowance) {
+                            for (j = 0; j <= i; j++) {
+                                marginLeft = (j !== activeIndex && j !== 0) ? '-' + overlap + 'px' : '';
+                                this.tabs[j].element.css({ 'z-index': i - j, 'margin-left': marginLeft });
+                            }
+                            this._lastVisibleTabIndex = i;
+                            this.tabsContainer.append(tabElement);
+                        } else {
+                            tabOverlapAllowanceExceeded = true;
+                        }
+
+                    } else if (i === activeIndex) {
+                        //Active tab should show even if allowance exceeded. (We left room.)
+                        tabElement.css({ 'z-index': 'auto', 'margin-left': '' });
+                        this.tabsContainer.append(tabElement);
+                    }
+
+                    if (tabOverlapAllowanceExceeded && i !== activeIndex) {
+                        if (showTabMenu) {
+                            //Tab menu already shown, so we just add to it.
+                            tabElement.css({ 'z-index': 'auto', 'margin-left': '' });
+                            this.tabDropdownContainer.append(tabElement);
+                        } else {
+                            //We now know the tab menu must be shown, so we have to recalculate everything.
+                            this._updateTabSizes(true);
+                            return;
+                        }
+                    }
+
+                }
+                else {
+                    this._lastVisibleTabIndex = i;
+                    tabElement.css({ 'z-index': 'auto', 'margin-left': '' });
+                    this.tabsContainer.append(tabElement);
+                }
+            }
+
+        }
+    });
+
+
+    lm.controls.HeaderButton = function (header, label, cssClass, action) {
+        this._header = header;
+        this.element = $('<li class="' + cssClass + '" title="' + label + '"></li>');
+        this._header.on('destroy', this._$destroy, this);
+        this._action = action;
+        this.element.on('click touchstart', this._action);
+        this._header.controlsContainer.append(this.element);
+    };
+
+    lm.utils.copy(lm.controls.HeaderButton.prototype, {
+        _$destroy: function () {
+            this.element.off();
+            this.element.remove();
+        }
+    });
+    lm.controls.Splitter = function (isVertical, size, grabSize) {
+        this._isVertical = isVertical;
+        this._size = size;
+        this._grabSize = grabSize < size ? size : grabSize;
+
+        this.element = this._createElement();
+        this._dragListener = new lm.utils.DragListener(this.element);
+    };
+
+    lm.utils.copy(lm.controls.Splitter.prototype, {
+        on: function (event, callback, context) {
+            this._dragListener.on(event, callback, context);
+        },
+
+        _$destroy: function () {
+            this.element.remove();
+        },
+
+        _createElement: function () {
+            var dragHandle = $('<div class="lm_drag_handle"></div>');
+            var element = $('<div class="lm_splitter"></div>');
+            element.append(dragHandle);
+
+            var handleExcessSize = this._grabSize - this._size;
+            var handleExcessPos = handleExcessSize / 2;
+
+            if (this._isVertical) {
+                dragHandle.css('top', -handleExcessPos);
+                dragHandle.css('height', this._size + handleExcessSize);
+                element.addClass('lm_vertical');
+                element['height'](this._size);
+            } else {
+                dragHandle.css('left', -handleExcessPos);
+                dragHandle.css('width', this._size + handleExcessSize);
+                element.addClass('lm_horizontal');
+                element['width'](this._size);
+            }
+
+            return element;
+        }
+    });
+
+	/**
+	 * Represents an individual tab within a Stack's header
+	 *
+	 * @param {lm.controls.Header} header
+	 * @param {lm.items.AbstractContentItem} contentItem
+	 *
+	 * @constructor
+	 */
+    lm.controls.Tab = function (header, contentItem) {
+        this.header = header;
+        this.contentItem = contentItem;
+        this.element = $(lm.controls.Tab._template);
+        this.titleElement = this.element.find('.lm_title');
+        this.closeElement = this.element.find('.lm_close_tab');
+        this.closeElement[contentItem.config.isClosable ? 'show' : 'hide']();
+        this.isActive = false;
+
+        this.setTitle(contentItem.config.title);
+        this.contentItem.on('titleChanged', this.setTitle, this);
+
+        this._layoutManager = this.contentItem.layoutManager;
+
+        if (
+            this._layoutManager.config.settings.reorderEnabled === true &&
+            contentItem.config.reorderEnabled === true
+        ) {
+            this._dragListener = new lm.utils.DragListener(this.element);
+            this._dragListener.on('dragStart', this._onDragStart, this);
+            this.contentItem.on('destroy', this._dragListener.destroy, this._dragListener);
+        }
+
+        this._onTabClickFn = lm.utils.fnBind(this._onTabClick, this);
+        this._onCloseClickFn = lm.utils.fnBind(this._onCloseClick, this);
+
+        this.element.on('mousedown touchstart', this._onTabClickFn);
+
+        if (this.contentItem.config.isClosable) {
+            this.closeElement.on('click touchstart', this._onCloseClickFn);
+            this.closeElement.on('mousedown', this._onCloseMousedown);
+        } else {
+            this.closeElement.remove();
+        }
+
+        this.contentItem.tab = this;
+        this.contentItem.emit('tab', this);
+        this.contentItem.layoutManager.emit('tabCreated', this);
+
+        if (this.contentItem.isComponent) {
+            this.contentItem.container.tab = this;
+            this.contentItem.container.emit('tab', this);
+        }
+    };
+
+	/**
+	 * The tab's html template
+	 *
+	 * @type {String}
+	 */
+    lm.controls.Tab._template = '<li class="lm_tab"><i class="lm_left"></i>' +
+        '<span class="lm_title"></span><div class="lm_close_tab"></div>' +
+        '<i class="lm_right"></i></li>';
+
+    lm.utils.copy(lm.controls.Tab.prototype, {
+
+		/**
+		 * Sets the tab's title to the provided string and sets
+		 * its title attribute to a pure text representation (without
+		 * html tags) of the same string.
+		 *
+		 * @public
+		 * @param {String} title can contain html
+		 */
+        setTitle: function (title) {
+            this.element.attr('title', lm.utils.stripTags(title));
+            this.titleElement.html(title);
+        },
+
+		/**
+		 * Sets this tab's active state. To programmatically
+		 * switch tabs, use header.setActiveContentItem( item ) instead.
+		 *
+		 * @public
+		 * @param {Boolean} isActive
+		 */
+        setActive: function (isActive) {
+            if (isActive === this.isActive) {
+                return;
+            }
+            this.isActive = isActive;
+
+            if (isActive) {
+                this.element.addClass('lm_active');
+            } else {
+                this.element.removeClass('lm_active');
+            }
+        },
+
+		/**
+		 * Destroys the tab
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _$destroy: function () {
+            this.element.off('mousedown touchstart', this._onTabClickFn);
+            this.closeElement.off('click touchstart', this._onCloseClickFn);
+            if (this._dragListener) {
+                this.contentItem.off('destroy', this._dragListener.destroy, this._dragListener);
+                this._dragListener.off('dragStart', this._onDragStart);
+                this._dragListener = null;
+            }
+            this.element.remove();
+        },
+
+		/**
+		 * Callback for the DragListener
+		 *
+		 * @param   {Number} x The tabs absolute x position
+		 * @param   {Number} y The tabs absolute y position
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _onDragStart: function (x, y) {
+            if (this.contentItem.parent.isMaximised === true) {
+                this.contentItem.parent.toggleMaximise();
+            }
+            new lm.controls.DragProxy(
+                x,
+                y,
+                this._dragListener,
+                this._layoutManager,
+                this.contentItem,
+                this.header.parent
+            );
+        },
+
+		/**
+		 * Callback when the tab is clicked
+		 *
+		 * @param {jQuery DOM event} event
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _onTabClick: function (event) {
+            // left mouse button or tap
+            if (event.button === 0 || event.type === 'touchstart') {
+                var activeContentItem = this.header.parent.getActiveContentItem();
+                if (this.contentItem !== activeContentItem) {
+                    this.header.parent.setActiveContentItem(this.contentItem);
+                }
+
+                // middle mouse button
+            } else if (event.button === 1 && this.contentItem.config.isClosable) {
+                this._onCloseClick(event);
+            }
+        },
+
+		/**
+		 * Callback when the tab's close button is
+		 * clicked
+		 *
+		 * @param   {jQuery DOM event} event
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _onCloseClick: function (event) {
+            event.stopPropagation();
+            this.header.parent.removeChild(this.contentItem);
+        },
+
+
+		/**
+		 * Callback to capture tab close button mousedown
+		 * to prevent tab from activating.
+		 *
+		 * @param (jQuery DOM event) event
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _onCloseMousedown: function (event) {
+            event.stopPropagation();
+        }
+    });
+
+    lm.controls.TransitionIndicator = function () {
+        this._element = $('<div class="lm_transition_indicator"></div>');
+        $(document.body).append(this._element);
+
+        this._toElement = null;
+        this._fromDimensions = null;
+        this._totalAnimationDuration = 200;
+        this._animationStartTime = null;
+    };
+
+    lm.utils.copy(lm.controls.TransitionIndicator.prototype, {
+        destroy: function () {
+            this._element.remove();
+        },
+
+        transitionElements: function (fromElement, toElement) {
+			/**
+			 * TODO - This is not quite as cool as expected. Review.
+			 */
+            return;
+            this._toElement = toElement;
+            this._animationStartTime = lm.utils.now();
+            this._fromDimensions = this._measure(fromElement);
+            this._fromDimensions.opacity = 0.8;
+            this._element.show().css(this._fromDimensions);
+            lm.utils.animFrame(lm.utils.fnBind(this._nextAnimationFrame, this));
+        },
+
+        _nextAnimationFrame: function () {
+            var toDimensions = this._measure(this._toElement),
+                animationProgress = (lm.utils.now() - this._animationStartTime) / this._totalAnimationDuration,
+                currentFrameStyles = {},
+                cssProperty;
+
+            if (animationProgress >= 1) {
+                this._element.hide();
+                return;
+            }
+
+            toDimensions.opacity = 0;
+
+            for (cssProperty in this._fromDimensions) {
+                currentFrameStyles[cssProperty] = this._fromDimensions[cssProperty] +
+                    (toDimensions[cssProperty] - this._fromDimensions[cssProperty]) *
+                    animationProgress;
+            }
+
+            this._element.css(currentFrameStyles);
+            lm.utils.animFrame(lm.utils.fnBind(this._nextAnimationFrame, this));
+        },
+
+        _measure: function (element) {
+            var offset = element.offset();
+
+            return {
+                left: offset.left,
+                top: offset.top,
+                width: element.outerWidth(),
+                height: element.outerHeight()
+            };
+        }
+    });
+    lm.errors.ConfigurationError = function (message, node) {
+        Error.call(this);
+
+        this.name = 'Configuration Error';
+        this.message = message;
+        this.node = node;
+    };
+
+    lm.errors.ConfigurationError.prototype = new Error();
+
+	/**
+	 * This is the baseclass that all content items inherit from.
+	 * Most methods provide a subset of what the sub-classes do.
+	 *
+	 * It also provides a number of functions for tree traversal
+	 *
+	 * @param {lm.LayoutManager} layoutManager
+	 * @param {item node configuration} config
+	 * @param {lm.item} parent
+	 *
+	 * @event stateChanged
+	 * @event beforeItemDestroyed
+	 * @event itemDestroyed
+	 * @event itemCreated
+	 * @event componentCreated
+	 * @event rowCreated
+	 * @event columnCreated
+	 * @event stackCreated
+	 *
+	 * @constructor
+	 */
+    lm.items.AbstractContentItem = function (layoutManager, config, parent) {
+        lm.utils.EventEmitter.call(this);
+
+        this.config = this._extendItemNode(config);
+        this.type = config.type;
+        this.contentItems = [];
+        this.parent = parent;
+
+        this.isInitialised = false;
+        this.isMaximised = false;
+        this.isRoot = false;
+        this.isRow = false;
+        this.isColumn = false;
+        this.isStack = false;
+        this.isComponent = false;
+
+        this.layoutManager = layoutManager;
+        this._pendingEventPropagations = {};
+        this._throttledEvents = ['stateChanged'];
+
+        this.on(lm.utils.EventEmitter.ALL_EVENT, this._propagateEvent, this);
+
+        if (config.content) {
+            this._createContentItems(config);
+        }
+    };
+
+    lm.utils.copy(lm.items.AbstractContentItem.prototype, {
+
+		/**
+		 * Set the size of the component and its children, called recursively
+		 *
+		 * @abstract
+		 * @returns void
+		 */
+        setSize: function () {
+            throw new Error('Abstract Method');
+        },
+
+		/**
+		 * Calls a method recursively downwards on the tree
+		 *
+		 * @param   {String} functionName      the name of the function to be called
+		 * @param   {[Array]}functionArguments optional arguments that are passed to every function
+		 * @param   {[bool]} bottomUp          Call methods from bottom to top, defaults to false
+		 * @param   {[bool]} skipSelf          Don't invoke the method on the class that calls it, defaults to false
+		 *
+		 * @returns {void}
+		 */
+        callDownwards: function (functionName, functionArguments, bottomUp, skipSelf) {
+            var i;
+
+            if (bottomUp !== true && skipSelf !== true) {
+                this[functionName].apply(this, functionArguments || []);
+            }
+            for (i = 0; i < this.contentItems.length; i++) {
+                this.contentItems[i].callDownwards(functionName, functionArguments, bottomUp);
+            }
+            if (bottomUp === true && skipSelf !== true) {
+                this[functionName].apply(this, functionArguments || []);
+            }
+        },
+
+		/**
+		 * Removes a child node (and its children) from the tree
+		 *
+		 * @param   {lm.items.ContentItem} contentItem
+		 *
+		 * @returns {void}
+		 */
+        removeChild: function (contentItem, keepChild) {
+
+			/*
+			 * Get the position of the item that's to be removed within all content items this node contains
+			 */
+            var index = lm.utils.indexOf(contentItem, this.contentItems);
+
+			/*
+			 * Make sure the content item to be removed is actually a child of this item
+			 */
+            if (index === -1) {
+                throw new Error('Can\'t remove child item. Unknown content item');
+            }
+
+			/**
+			 * Call ._$destroy on the content item. This also calls ._$destroy on all its children
+			 */
+            if (keepChild !== true) {
+                this.contentItems[index]._$destroy();
+            }
+
+			/**
+			 * Remove the content item from this nodes array of children
+			 */
+            this.contentItems.splice(index, 1);
+
+			/**
+			 * Remove the item from the configuration
+			 */
+            this.config.content.splice(index, 1);
+
+			/**
+			 * If this node still contains other content items, adjust their size
+			 */
+            if (this.contentItems.length > 0) {
+                this.callDownwards('setSize');
+
+				/**
+				 * If this was the last content item, remove this node as well
+				 */
+            } else if (!(this instanceof lm.items.Root) && this.config.isClosable === true) {
+                this.parent.removeChild(this);
+            }
+        },
+
+		/**
+		 * Sets up the tree structure for the newly added child
+		 * The responsibility for the actual DOM manipulations lies
+		 * with the concrete item
+		 *
+		 * @param {lm.items.AbstractContentItem} contentItem
+		 * @param {[Int]} index If omitted item will be appended
+		 */
+        addChild: function (contentItem, index) {
+            if (index === undefined) {
+                index = this.contentItems.length;
+            }
+
+            this.contentItems.splice(index, 0, contentItem);
+
+            if (this.config.content === undefined) {
+                this.config.content = [];
+            }
+
+            this.config.content.splice(index, 0, contentItem.config);
+            contentItem.parent = this;
+
+            if (contentItem.parent.isInitialised === true && contentItem.isInitialised === false) {
+                contentItem._$init();
+            }
+        },
+
+		/**
+		 * Replaces oldChild with newChild. This used to use jQuery.replaceWith... which for
+		 * some reason removes all event listeners, so isn't really an option.
+		 *
+		 * @param   {lm.item.AbstractContentItem} oldChild
+		 * @param   {lm.item.AbstractContentItem} newChild
+		 *
+		 * @returns {void}
+		 */
+        replaceChild: function (oldChild, newChild, _$destroyOldChild) {
+
+            newChild = this.layoutManager._$normalizeContentItem(newChild);
+
+            var index = lm.utils.indexOf(oldChild, this.contentItems),
+                parentNode = oldChild.element[0].parentNode;
+
+            if (index === -1) {
+                throw new Error('Can\'t replace child. oldChild is not child of this');
+            }
+
+            parentNode.replaceChild(newChild.element[0], oldChild.element[0]);
+
+			/*
+			 * Optionally destroy the old content item
+			 */
+            if (_$destroyOldChild === true) {
+                oldChild.parent = null;
+                oldChild._$destroy();
+            }
+
+			/*
+			 * Wire the new contentItem into the tree
+			 */
+            this.contentItems[index] = newChild;
+            newChild.parent = this;
+
+			/*
+			 * Update tab reference
+			 */
+            if (this.isStack) {
+                this.header.tabs[index].contentItem = newChild;
+            }
+
+            //TODO This doesn't update the config... refactor to leave item nodes untouched after creation
+            if (newChild.parent.isInitialised === true && newChild.isInitialised === false) {
+                newChild._$init();
+            }
+
+            this.callDownwards('setSize');
+        },
+
+		/**
+		 * Convenience method.
+		 * Shorthand for this.parent.removeChild( this )
+		 *
+		 * @returns {void}
+		 */
+        remove: function () {
+            this.parent.removeChild(this);
+        },
+
+		/**
+		 * Removes the component from the layout and creates a new
+		 * browser window with the component and its children inside
+		 *
+		 * @returns {lm.controls.BrowserPopout}
+		 */
+        popout: function () {
+            var browserPopout = this.layoutManager.createPopout(this);
+            this.emitBubblingEvent('stateChanged');
+            return browserPopout;
+        },
+
+		/**
+		 * Maximises the Item or minimises it if it is already maximised
+		 *
+		 * @returns {void}
+		 */
+        toggleMaximise: function (e) {
+            e && e.preventDefault();
+            if (this.isMaximised === true) {
+                this.layoutManager._$minimiseItem(this);
+            } else {
+                this.layoutManager._$maximiseItem(this);
+            }
+
+            this.isMaximised = !this.isMaximised;
+            this.emitBubblingEvent('stateChanged');
+        },
+
+		/**
+		 * Selects the item if it is not already selected
+		 *
+		 * @returns {void}
+		 */
+        select: function () {
+            if (this.layoutManager.selectedItem !== this) {
+                this.layoutManager.selectItem(this, true);
+                this.element.addClass('lm_selected');
+            }
+        },
+
+		/**
+		 * De-selects the item if it is selected
+		 *
+		 * @returns {void}
+		 */
+        deselect: function () {
+            if (this.layoutManager.selectedItem === this) {
+                this.layoutManager.selectedItem = null;
+                this.element.removeClass('lm_selected');
+            }
+        },
+
+		/**
+		 * Set this component's title
+		 *
+		 * @public
+		 * @param {String} title
+		 *
+		 * @returns {void}
+		 */
+        setTitle: function (title) {
+            this.config.title = title;
+            this.emit('titleChanged', title);
+            this.emit('stateChanged');
+        },
+
+		/**
+		 * Checks whether a provided id is present
+		 *
+		 * @public
+		 * @param   {String}  id
+		 *
+		 * @returns {Boolean} isPresent
+		 */
+        hasId: function (id) {
+            if (!this.config.id) {
+                return false;
+            } else if (typeof this.config.id === 'string') {
+                return this.config.id === id;
+            } else if (this.config.id instanceof Array) {
+                return lm.utils.indexOf(id, this.config.id) !== -1;
+            }
+        },
+
+		/**
+		 * Adds an id. Adds it as a string if the component doesn't
+		 * have an id yet or creates/uses an array
+		 *
+		 * @public
+		 * @param {String} id
+		 *
+		 * @returns {void}
+		 */
+        addId: function (id) {
+            if (this.hasId(id)) {
+                return;
+            }
+
+            if (!this.config.id) {
+                this.config.id = id;
+            } else if (typeof this.config.id === 'string') {
+                this.config.id = [this.config.id, id];
+            } else if (this.config.id instanceof Array) {
+                this.config.id.push(id);
+            }
+        },
+
+		/**
+		 * Removes an existing id. Throws an error
+		 * if the id is not present
+		 *
+		 * @public
+		 * @param   {String} id
+		 *
+		 * @returns {void}
+		 */
+        removeId: function (id) {
+            if (!this.hasId(id)) {
+                throw new Error('Id not found');
+            }
+
+            if (typeof this.config.id === 'string') {
+                delete this.config.id;
+            } else if (this.config.id instanceof Array) {
+                var index = lm.utils.indexOf(id, this.config.id);
+                this.config.id.splice(index, 1);
+            }
+        },
+
+		/****************************************
+		 * SELECTOR
+		 ****************************************/
+        getItemsByFilter: function (filter) {
+            var result = [],
+                next = function (contentItem) {
+                    for (var i = 0; i < contentItem.contentItems.length; i++) {
+
+                        if (filter(contentItem.contentItems[i]) === true) {
+                            result.push(contentItem.contentItems[i]);
+                        }
+
+                        next(contentItem.contentItems[i]);
+                    }
+                };
+
+            next(this);
+            return result;
+        },
+
+        getItemsById: function (id) {
+            return this.getItemsByFilter(function (item) {
+                if (item.config.id instanceof Array) {
+                    return lm.utils.indexOf(id, item.config.id) !== -1;
+                } else {
+                    return item.config.id === id;
+                }
+            });
+        },
+
+        getItemsByType: function (type) {
+            return this._$getItemsByProperty('type', type);
+        },
+
+        getComponentsByName: function (componentName) {
+            var components = this._$getItemsByProperty('componentName', componentName),
+                instances = [],
+                i;
+
+            for (i = 0; i < components.length; i++) {
+                instances.push(components[i].instance);
+            }
+
+            return instances;
+        },
+
+		/****************************************
+		 * PACKAGE PRIVATE
+		 ****************************************/
+        _$getItemsByProperty: function (key, value) {
+            return this.getItemsByFilter(function (item) {
+                return item[key] === value;
+            });
+        },
+
+        _$setParent: function (parent) {
+            this.parent = parent;
+        },
+
+        _$highlightDropZone: function (x, y, area) {
+            this.layoutManager.dropTargetIndicator.highlightArea(area);
+        },
+
+        _$onDrop: function (contentItem) {
+            this.addChild(contentItem);
+        },
+
+        _$hide: function () {
+            this._callOnActiveComponents('hide');
+            this.element.hide();
+            this.layoutManager.updateSize();
+        },
+
+        _$show: function () {
+            this._callOnActiveComponents('show');
+            this.element.show();
+            this.layoutManager.updateSize();
+        },
+
+        _callOnActiveComponents: function (methodName) {
+            var stacks = this.getItemsByType('stack'),
+                activeContentItem,
+                i;
+
+            for (i = 0; i < stacks.length; i++) {
+                activeContentItem = stacks[i].getActiveContentItem();
+
+                if (activeContentItem && activeContentItem.isComponent) {
+                    activeContentItem.container[methodName]();
+                }
+            }
+        },
+
+		/**
+		 * Destroys this item ands its children
+		 *
+		 * @returns {void}
+		 */
+        _$destroy: function () {
+            this.emitBubblingEvent('beforeItemDestroyed');
+            this.callDownwards('_$destroy', [], true, true);
+            this.element.remove();
+            this.emitBubblingEvent('itemDestroyed');
+        },
+
+		/**
+		 * Returns the area the component currently occupies in the format
+		 *
+		 * {
+		 *		x1: int
+		 *		xy: int
+		 *		y1: int
+		 *		y2: int
+		 *		contentItem: contentItem
+		 * }
+		 */
+        _$getArea: function (element) {
+            element = element || this.element;
+
+            var offset = element.offset(),
+                width = element.width(),
+                height = element.height();
+
+            return {
+                x1: offset.left,
+                y1: offset.top,
+                x2: offset.left + width,
+                y2: offset.top + height,
+                surface: width * height,
+                contentItem: this
+            };
+        },
+
+		/**
+		 * The tree of content items is created in two steps: First all content items are instantiated,
+		 * then init is called recursively from top to bottem. This is the basic init function,
+		 * it can be used, extended or overwritten by the content items
+		 *
+		 * Its behaviour depends on the content item
+		 *
+		 * @package private
+		 *
+		 * @returns {void}
+		 */
+        _$init: function () {
+            var i;
+            this.setSize();
+
+            for (i = 0; i < this.contentItems.length; i++) {
+                this.childElementContainer.append(this.contentItems[i].element);
+            }
+
+            this.isInitialised = true;
+            this.emitBubblingEvent('itemCreated');
+            this.emitBubblingEvent(this.type + 'Created');
+        },
+
+		/**
+		 * Emit an event that bubbles up the item tree.
+		 *
+		 * @param   {String} name The name of the event
+		 *
+		 * @returns {void}
+		 */
+        emitBubblingEvent: function (name) {
+            var event = new lm.utils.BubblingEvent(name, this);
+            this.emit(name, event);
+        },
+
+		/**
+		 * Private method, creates all content items for this node at initialisation time
+		 * PLEASE NOTE, please see addChild for adding contentItems add runtime
+		 * @private
+		 * @param   {configuration item node} config
+		 *
+		 * @returns {void}
+		 */
+        _createContentItems: function (config) {
+            var oContentItem, i;
+
+            if (!(config.content instanceof Array)) {
+                throw new lm.errors.ConfigurationError('content must be an Array', config);
+            }
+
+            for (i = 0; i < config.content.length; i++) {
+                oContentItem = this.layoutManager.createContentItem(config.content[i], this);
+                this.contentItems.push(oContentItem);
+            }
+        },
+
+		/**
+		 * Extends an item configuration node with default settings
+		 * @private
+		 * @param   {configuration item node} config
+		 *
+		 * @returns {configuration item node} extended config
+		 */
+        _extendItemNode: function (config) {
+
+            for (var key in lm.config.itemDefaultConfig) {
+                if (config[key] === undefined) {
+                    config[key] = lm.config.itemDefaultConfig[key];
+                }
+            }
+
+            return config;
+        },
+
+		/**
+		 * Called for every event on the item tree. Decides whether the event is a bubbling
+		 * event and propagates it to its parent
+		 *
+		 * @param    {String} name the name of the event
+		 * @param   {lm.utils.BubblingEvent} event
+		 *
+		 * @returns {void}
+		 */
+        _propagateEvent: function (name, event) {
+            if (event instanceof lm.utils.BubblingEvent &&
+                event.isPropagationStopped === false &&
+                this.isInitialised === true) {
+
+				/**
+				 * In some cases (e.g. if an element is created from a DragSource) it
+				 * doesn't have a parent and is not below root. If that's the case
+				 * propagate the bubbling event from the top level of the substree directly
+				 * to the layoutManager
+				 */
+                if (this.isRoot === false && this.parent) {
+                    this.parent.emit.apply(this.parent, Array.prototype.slice.call(arguments, 0));
+                } else {
+                    this._scheduleEventPropagationToLayoutManager(name, event);
+                }
+            }
+        },
+
+		/**
+		 * All raw events bubble up to the root element. Some events that
+		 * are propagated to - and emitted by - the layoutManager however are
+		 * only string-based, batched and sanitized to make them more usable
+		 *
+		 * @param {String} name the name of the event
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _scheduleEventPropagationToLayoutManager: function (name, event) {
+            if (lm.utils.indexOf(name, this._throttledEvents) === -1) {
+                this.layoutManager.emit(name, event.origin);
+            } else {
+                if (this._pendingEventPropagations[name] !== true) {
+                    this._pendingEventPropagations[name] = true;
+                    lm.utils.animFrame(lm.utils.fnBind(this._propagateEventToLayoutManager, this, [name, event]));
+                }
+            }
+
+        },
+
+		/**
+		 * Callback for events scheduled by _scheduleEventPropagationToLayoutManager
+		 *
+		 * @param {String} name the name of the event
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _propagateEventToLayoutManager: function (name, event) {
+            this._pendingEventPropagations[name] = false;
+            this.layoutManager.emit(name, event);
+        }
+    });
+
+	/**
+	 * @param {[type]} layoutManager [description]
+	 * @param {[type]} config      [description]
+	 * @param {[type]} parent        [description]
+	 */
+    lm.items.Component = function (layoutManager, config, parent) {
+        lm.items.AbstractContentItem.call(this, layoutManager, config, parent);
+
+        var ComponentConstructor = layoutManager.getComponent(this.config.componentName),
+            componentConfig = $.extend(true, {}, this.config.componentState || {});
+
+        componentConfig.componentName = this.config.componentName;
+        this.componentName = this.config.componentName;
+
+        if (this.config.title === '') {
+            this.config.title = this.config.componentName;
+        }
+
+        this.isComponent = true;
+        this.container = new lm.container.ItemContainer(this.config, this, layoutManager);
+        this.instance = new ComponentConstructor(this.container, componentConfig);
+        this.element = this.container._element;
+    };
+
+    lm.utils.extend(lm.items.Component, lm.items.AbstractContentItem);
+
+    lm.utils.copy(lm.items.Component.prototype, {
+
+        close: function () {
+            this.parent.removeChild(this);
+        },
+
+        setSize: function () {
+            if (this.element.is(':visible')) {
+                // Do not update size of hidden components to prevent unwanted reflows
+                this.container._$setSize(this.element.width(), this.element.height());
+            }
+        },
+
+        _$init: function () {
+            lm.items.AbstractContentItem.prototype._$init.call(this);
+            this.container.emit('open');
+        },
+
+        _$hide: function () {
+            this.container.hide();
+            lm.items.AbstractContentItem.prototype._$hide.call(this);
+        },
+
+        _$show: function () {
+            this.container.show();
+            lm.items.AbstractContentItem.prototype._$show.call(this);
+        },
+
+        _$shown: function () {
+            this.container.shown();
+            lm.items.AbstractContentItem.prototype._$shown.call(this);
+        },
+
+        _$destroy: function () {
+            this.container.emit('destroy', this);
+            lm.items.AbstractContentItem.prototype._$destroy.call(this);
+        },
+
+		/**
+		 * Dragging onto a component directly is not an option
+		 *
+		 * @returns null
+		 */
+        _$getArea: function () {
+            return null;
+        }
+    });
+
+    lm.items.Root = function (layoutManager, config, containerElement) {
+        lm.items.AbstractContentItem.call(this, layoutManager, config, null);
+        this.isRoot = true;
+        this.type = 'root';
+        this.element = $('<div class="lm_goldenlayout lm_item lm_root"></div>');
+        this.childElementContainer = this.element;
+        this._containerElement = containerElement;
+        this._containerElement.append(this.element);
+    };
+
+    lm.utils.extend(lm.items.Root, lm.items.AbstractContentItem);
+
+    lm.utils.copy(lm.items.Root.prototype, {
+        addChild: function (contentItem) {
+            if (this.contentItems.length > 0) {
+                throw new Error('Root node can only have a single child');
+            }
+
+            contentItem = this.layoutManager._$normalizeContentItem(contentItem, this);
+            this.childElementContainer.append(contentItem.element);
+            lm.items.AbstractContentItem.prototype.addChild.call(this, contentItem);
+
+            this.callDownwards('setSize');
+            this.emitBubblingEvent('stateChanged');
+        },
+
+        setSize: function (width, height) {
+            width = (typeof width === 'undefined') ? this._containerElement.width() : width;
+            height = (typeof height === 'undefined') ? this._containerElement.height() : height;
+
+            this.element.width(width);
+            this.element.height(height);
+
+			/*
+			 * Root can be empty
+			 */
+            if (this.contentItems[0]) {
+                this.contentItems[0].element.width(width);
+                this.contentItems[0].element.height(height);
+            }
+        },
+        _$highlightDropZone: function (x, y, area) {
+            this.layoutManager.tabDropPlaceholder.remove();
+            lm.items.AbstractContentItem.prototype._$highlightDropZone.apply(this, arguments);
+        },
+
+        _$onDrop: function (contentItem, area) {
+            var stack;
+
+            if (contentItem.isComponent) {
+                stack = this.layoutManager.createContentItem({
+                    type: 'stack',
+                    header: contentItem.config.header || {}
+                }, this);
+                stack._$init();
+                stack.addChild(contentItem);
+                contentItem = stack;
+            }
+
+            if (!this.contentItems.length) {
+                this.addChild(contentItem);
+            } else {
+                var type = area.side[0] == 'x' ? 'row' : 'column';
+                var dimension = area.side[0] == 'x' ? 'width' : 'height';
+                var insertBefore = area.side[1] == '2';
+                var column = this.contentItems[0];
+                if (!column instanceof lm.items.RowOrColumn || column.type != type) {
+                    var rowOrColumn = this.layoutManager.createContentItem({ type: type }, this);
+                    this.replaceChild(column, rowOrColumn);
+                    rowOrColumn.addChild(contentItem, insertBefore ? 0 : undefined, true);
+                    rowOrColumn.addChild(column, insertBefore ? undefined : 0, true);
+                    column.config[dimension] = 50;
+                    contentItem.config[dimension] = 50;
+                    rowOrColumn.callDownwards('setSize');
+                } else {
+                    var sibbling = column.contentItems[insertBefore ? 0 : column.contentItems.length - 1]
+                    column.addChild(contentItem, insertBefore ? 0 : undefined, true);
+                    sibbling.config[dimension] *= 0.5;
+                    contentItem.config[dimension] = sibbling.config[dimension];
+                    column.callDownwards('setSize');
+                }
+            }
+        }
+    });
+
+
+
+    lm.items.RowOrColumn = function (isColumn, layoutManager, config, parent) {
+        lm.items.AbstractContentItem.call(this, layoutManager, config, parent);
+
+        this.isRow = !isColumn;
+        this.isColumn = isColumn;
+
+        this.element = $('<div class="lm_item lm_' + (isColumn ? 'column' : 'row') + '"></div>');
+        this.childElementContainer = this.element;
+        this._splitterSize = layoutManager.config.dimensions.borderWidth;
+        this._splitterGrabSize = layoutManager.config.dimensions.borderGrabWidth;
+        this._isColumn = isColumn;
+        this._dimension = isColumn ? 'height' : 'width';
+        this._splitter = [];
+        this._splitterPosition = null;
+        this._splitterMinPosition = null;
+        this._splitterMaxPosition = null;
+    };
+
+    lm.utils.extend(lm.items.RowOrColumn, lm.items.AbstractContentItem);
+
+    lm.utils.copy(lm.items.RowOrColumn.prototype, {
+
+		/**
+		 * Add a new contentItem to the Row or Column
+		 *
+		 * @param {lm.item.AbstractContentItem} contentItem
+		 * @param {[int]} index The position of the new item within the Row or Column.
+		 *                      If no index is provided the item will be added to the end
+		 * @param {[bool]} _$suspendResize If true the items won't be resized. This will leave the item in
+		 *                                 an inconsistent state and is only intended to be used if multiple
+		 *                                 children need to be added in one go and resize is called afterwards
+		 *
+		 * @returns {void}
+		 */
+        addChild: function (contentItem, index, _$suspendResize) {
+
+            var newItemSize, itemSize, i, splitterElement;
+
+            contentItem = this.layoutManager._$normalizeContentItem(contentItem, this);
+
+            if (index === undefined) {
+                index = this.contentItems.length;
+            }
+
+            if (this.contentItems.length > 0) {
+                splitterElement = this._createSplitter(Math.max(0, index - 1)).element;
+
+                if (index > 0) {
+                    this.contentItems[index - 1].element.after(splitterElement);
+                    splitterElement.after(contentItem.element);
+                } else {
+                    this.contentItems[0].element.before(splitterElement);
+                    splitterElement.before(contentItem.element);
+                }
+            } else {
+                this.childElementContainer.append(contentItem.element);
+            }
+
+            lm.items.AbstractContentItem.prototype.addChild.call(this, contentItem, index);
+
+            let fixedItemSize = 0;
+            let variableItemCount = 0;
+            for (i = 0; i < this.contentItems.length; i++) {
+                if (this.contentItems[i].config.fixed)
+                    fixedItemSize += this.contentItems[i].config[this._dimension];
+                else variableItemCount++;
+            }
+
+            newItemSize = (1 / variableItemCount) * (100 - fixedItemSize);
+
+            if (_$suspendResize === true) {
+                this.emitBubblingEvent('stateChanged');
+                return;
+            }
+
+            for (i = 0; i < this.contentItems.length; i++) {
+                if (this.contentItems[i].config.fixed)
+                    ;
+                else if (this.contentItems[i] === contentItem) {
+                    contentItem.config[this._dimension] = newItemSize;
+                } else {
+                    itemSize = this.contentItems[i].config[this._dimension] *= (100 - newItemSize - fixedItemSize) / (100 - fixedItemSize);
+                    this.contentItems[i].config[this._dimension] = itemSize;
+                }
+            }
+
+            this.callDownwards('setSize');
+            this.emitBubblingEvent('stateChanged');
+
+        },
+
+		/**
+		 * Removes a child of this element
+		 *
+		 * @param   {lm.items.AbstractContentItem} contentItem
+		 * @param   {boolean} keepChild   If true the child will be removed, but not destroyed
+		 *
+		 * @returns {void}
+		 */
+        removeChild: function (contentItem, keepChild) {
+            var removedItemSize = contentItem.config[this._dimension],
+                index = lm.utils.indexOf(contentItem, this.contentItems),
+                splitterIndex = Math.max(index - 1, 0),
+                i,
+                childItem;
+
+            if (index === -1) {
+                throw new Error('Can\'t remove child. ContentItem is not child of this Row or Column');
+            }
+
+			/**
+			 * Remove the splitter before the item or after if the item happens
+			 * to be the first in the row/column
+			 */
+            if (this._splitter[splitterIndex]) {
+                this._splitter[splitterIndex]._$destroy();
+                this._splitter.splice(splitterIndex, 1);
+            }
+
+            let fixedItemSize = 0;
+            for (i = 0; i < this.contentItems.length; i++) {
+                if (this.contentItems[i].config.fixed)
+                    fixedItemSize += this.contentItems[i].config[this._dimension];
+            }
+			/**
+			 * Allocate the space that the removed item occupied to the remaining items
+			 */
+            for (i = 0; i < this.contentItems.length; i++) {
+                if (this.contentItems[i].config.fixed)
+                    ;
+                else if (this.contentItems[i] !== contentItem) {
+                    this.contentItems[i].config[this._dimension] *= (100 - fixedItemSize) / (100 - removedItemSize - fixedItemSize);
+                }
+            }
+
+            lm.items.AbstractContentItem.prototype.removeChild.call(this, contentItem, keepChild);
+
+            if (this.contentItems.length === 1 && this.config.isClosable === true) {
+                childItem = this.contentItems[0];
+                this.contentItems = [];
+                this.parent.replaceChild(this, childItem, true);
+            } else {
+                this.callDownwards('setSize');
+                this.emitBubblingEvent('stateChanged');
+            }
+        },
+
+		/**
+		 * Replaces a child of this Row or Column with another contentItem
+		 *
+		 * @param   {lm.items.AbstractContentItem} oldChild
+		 * @param   {lm.items.AbstractContentItem} newChild
+		 *
+		 * @returns {void}
+		 */
+        replaceChild: function (oldChild, newChild) {
+            var size = oldChild.config[this._dimension];
+            lm.items.AbstractContentItem.prototype.replaceChild.call(this, oldChild, newChild);
+            newChild.config[this._dimension] = size;
+            this.callDownwards('setSize');
+            this.emitBubblingEvent('stateChanged');
+        },
+
+		/**
+		 * Called whenever the dimensions of this item or one of its parents change
+		 *
+		 * @returns {void}
+		 */
+        setSize: function () {
+            if (this.contentItems.length > 0) {
+                this._calculateRelativeSizes();
+                this._setAbsoluteSizes();
+            }
+            this.emitBubblingEvent('stateChanged');
+            this.emit('resize');
+        },
+
+		/**
+		 * Invoked recursively by the layout manager. AbstractContentItem.init appends
+		 * the contentItem's DOM elements to the container, RowOrColumn init adds splitters
+		 * in between them
+		 *
+		 * @package private
+		 * @override AbstractContentItem._$init
+		 * @returns {void}
+		 */
+        _$init: function () {
+            if (this.isInitialised === true) return;
+
+            var i;
+
+            lm.items.AbstractContentItem.prototype._$init.call(this);
+
+            for (i = 0; i < this.contentItems.length - 1; i++) {
+                this.contentItems[i].element.after(this._createSplitter(i).element);
+            }
+        },
+
+		/**
+		 * Turns the relative sizes calculated by _calculateRelativeSizes into
+		 * absolute pixel values and applies them to the children's DOM elements
+		 *
+		 * Assigns additional pixels to counteract Math.floor
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _setAbsoluteSizes: function () {
+            var i,
+                sizeData = this._calculateAbsoluteSizes();
+
+            for (i = 0; i < this.contentItems.length; i++) {
+                if (sizeData.additionalPixel - i > 0) {
+                    sizeData.itemSizes[i]++;
+                }
+
+                if (this._isColumn) {
+                    this.contentItems[i].element.width(sizeData.totalWidth);
+                    this.contentItems[i].element.height(sizeData.itemSizes[i]);
+                } else {
+                    this.contentItems[i].element.width(sizeData.itemSizes[i]);
+                    this.contentItems[i].element.height(sizeData.totalHeight);
+                }
+            }
+        },
+
+		/**
+		 * Calculates the absolute sizes of all of the children of this Item.
+		 * @returns {object} - Set with absolute sizes and additional pixels.
+		 */
+        _calculateAbsoluteSizes: function () {
+            var i,
+                totalSplitterSize = (this.contentItems.length - 1) * this._splitterSize,
+                totalWidth = this.element.width(),
+                totalHeight = this.element.height(),
+                totalAssigned = 0,
+                additionalPixel,
+                itemSize,
+                itemSizes = [];
+
+            if (this._isColumn) {
+                totalHeight -= totalSplitterSize;
+            } else {
+                totalWidth -= totalSplitterSize;
+            }
+
+            for (i = 0; i < this.contentItems.length; i++) {
+                if (this._isColumn) {
+                    itemSize = Math.floor(totalHeight * (this.contentItems[i].config.height / 100));
+                } else {
+                    itemSize = Math.floor(totalWidth * (this.contentItems[i].config.width / 100));
+                }
+
+                totalAssigned += itemSize;
+                itemSizes.push(itemSize);
+            }
+
+            additionalPixel = Math.floor((this._isColumn ? totalHeight : totalWidth) - totalAssigned);
+
+            return {
+                itemSizes: itemSizes,
+                additionalPixel: additionalPixel,
+                totalWidth: totalWidth,
+                totalHeight: totalHeight
+            };
+        },
+
+		/**
+		 * Calculates the relative sizes of all children of this Item. The logic
+		 * is as follows:
+		 *
+		 * - Add up the total size of all items that have a configured size
+		 *
+		 * - If the total == 100 (check for floating point errors)
+		 *        Excellent, job done
+		 *
+		 * - If the total is > 100,
+		 *        set the size of items without set dimensions to 1/3 and add this to the total
+		 *        set the size off all items so that the total is hundred relative to their original size
+		 *
+		 * - If the total is < 100
+		 *        If there are items without set dimensions, distribute the remainder to 100 evenly between them
+		 *        If there are no items without set dimensions, increase all items sizes relative to
+		 *        their original size so that they add up to 100
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _calculateRelativeSizes: function () {
+
+            var i,
+                total = 0,
+                itemsWithoutSetDimension = [],
+                dimension = this._isColumn ? 'height' : 'width';
+
+            for (i = 0; i < this.contentItems.length; i++) {
+                if (this.contentItems[i].config[dimension] !== undefined) {
+                    total += this.contentItems[i].config[dimension];
+                } else {
+                    itemsWithoutSetDimension.push(this.contentItems[i]);
+                }
+            }
+
+			/**
+			 * Everything adds up to hundred, all good :-)
+			 */
+            if (Math.round(total) === 100) {
+                this._respectMinItemWidth();
+                return;
+            }
+
+			/**
+			 * Allocate the remaining size to the items without a set dimension
+			 */
+            if (Math.round(total) < 100 && itemsWithoutSetDimension.length > 0) {
+                for (i = 0; i < itemsWithoutSetDimension.length; i++) {
+                    itemsWithoutSetDimension[i].config[dimension] = (100 - total) / itemsWithoutSetDimension.length;
+                }
+                this._respectMinItemWidth();
+                return;
+            }
+
+			/**
+			 * If the total is > 100, but there are also items without a set dimension left, assing 50
+			 * as their dimension and add it to the total
+			 *
+			 * This will be reset in the next step
+			 */
+            if (Math.round(total) > 100) {
+                for (i = 0; i < itemsWithoutSetDimension.length; i++) {
+                    itemsWithoutSetDimension[i].config[dimension] = 50;
+                    total += 50;
+                }
+            }
+
+			/**
+			 * Set every items size relative to 100 relative to its size to total
+			 */
+            for (i = 0; i < this.contentItems.length; i++) {
+                this.contentItems[i].config[dimension] = (this.contentItems[i].config[dimension] / total) * 100;
+            }
+
+            this._respectMinItemWidth();
+        },
+
+		/**
+		 * Adjusts the column widths to respect the dimensions minItemWidth if set.
+		 * @returns {}
+		 */
+        _respectMinItemWidth: function () {
+            var minItemWidth = this.layoutManager.config.dimensions ? (this.layoutManager.config.dimensions.minItemWidth || 0) : 0,
+                sizeData = null,
+                entriesOverMin = [],
+                totalOverMin = 0,
+                totalUnderMin = 0,
+                remainingWidth = 0,
+                itemSize = 0,
+                contentItem = null,
+                reducePercent,
+                reducedWidth,
+                allEntries = [],
+                entry;
+
+            if (this._isColumn || !minItemWidth || this.contentItems.length <= 1) {
+                return;
+            }
+
+            sizeData = this._calculateAbsoluteSizes();
+
+			/**
+			 * Figure out how much we are under the min item size total and how much room we have to use.
+			 */
+            for (var i = 0; i < this.contentItems.length; i++) {
+
+                contentItem = this.contentItems[i];
+                itemSize = sizeData.itemSizes[i];
+
+                if (itemSize < minItemWidth) {
+                    totalUnderMin += minItemWidth - itemSize;
+                    entry = { width: minItemWidth };
+
+                }
+                else {
+                    totalOverMin += itemSize - minItemWidth;
+                    entry = { width: itemSize };
+                    entriesOverMin.push(entry);
+                }
+
+                allEntries.push(entry);
+            }
+
+			/**
+			 * If there is nothing under min, or there is not enough over to make up the difference, do nothing.
+			 */
+            if (totalUnderMin === 0 || totalUnderMin > totalOverMin) {
+                return;
+            }
+
+			/**
+			 * Evenly reduce all columns that are over the min item width to make up the difference.
+			 */
+            reducePercent = totalUnderMin / totalOverMin;
+            remainingWidth = totalUnderMin;
+            for (i = 0; i < entriesOverMin.length; i++) {
+                entry = entriesOverMin[i];
+                reducedWidth = Math.round((entry.width - minItemWidth) * reducePercent);
+                remainingWidth -= reducedWidth;
+                entry.width -= reducedWidth;
+            }
+
+			/**
+			 * Take anything remaining from the last item.
+			 */
+            if (remainingWidth !== 0) {
+                allEntries[allEntries.length - 1].width -= remainingWidth;
+            }
+
+			/**
+			 * Set every items size relative to 100 relative to its size to total
+			 */
+            for (i = 0; i < this.contentItems.length; i++) {
+                this.contentItems[i].config.width = (allEntries[i].width / sizeData.totalWidth) * 100;
+            }
+        },
+
+		/**
+		 * Instantiates a new lm.controls.Splitter, binds events to it and adds
+		 * it to the array of splitters at the position specified as the index argument
+		 *
+		 * What it doesn't do though is append the splitter to the DOM
+		 *
+		 * @param   {Int} index The position of the splitter
+		 *
+		 * @returns {lm.controls.Splitter}
+		 */
+        _createSplitter: function (index) {
+            var splitter;
+            splitter = new lm.controls.Splitter(this._isColumn, this._splitterSize, this._splitterGrabSize);
+            splitter.on('drag', lm.utils.fnBind(this._onSplitterDrag, this, [splitter]), this);
+            splitter.on('dragStop', lm.utils.fnBind(this._onSplitterDragStop, this, [splitter]), this);
+            splitter.on('dragStart', lm.utils.fnBind(this._onSplitterDragStart, this, [splitter]), this);
+            this._splitter.splice(index, 0, splitter);
+            return splitter;
+        },
+
+		/**
+		 * Locates the instance of lm.controls.Splitter in the array of
+		 * registered splitters and returns a map containing the contentItem
+		 * before and after the splitters, both of which are affected if the
+		 * splitter is moved
+		 *
+		 * @param   {lm.controls.Splitter} splitter
+		 *
+		 * @returns {Object} A map of contentItems that the splitter affects
+		 */
+        _getItemsForSplitter: function (splitter) {
+            var index = lm.utils.indexOf(splitter, this._splitter);
+
+            return {
+                before: this.contentItems[index],
+                after: this.contentItems[index + 1]
+            };
+        },
+
+		/**
+		 * Gets the minimum dimensions for the given item configuration array
+		 * @param item
+		 * @private
+		 */
+        _getMinimumDimensions: function (arr) {
+            var minWidth = 0, minHeight = 0;
+
+            for (var i = 0; i < arr.length; ++i) {
+                minWidth = Math.max(arr[i].minWidth || 0, minWidth);
+                minHeight = Math.max(arr[i].minHeight || 0, minHeight);
+            }
+
+            return { horizontal: minWidth, vertical: minHeight };
+        },
+
+		/**
+		 * Invoked when a splitter's dragListener fires dragStart. Calculates the splitters
+		 * movement area once (so that it doesn't need calculating on every mousemove event)
+		 *
+		 * @param   {lm.controls.Splitter} splitter
+		 *
+		 * @returns {void}
+		 */
+        _onSplitterDragStart: function (splitter) {
+            var items = this._getItemsForSplitter(splitter),
+                minSize = this.layoutManager.config.dimensions[this._isColumn ? 'minItemHeight' : 'minItemWidth'];
+
+            var beforeMinDim = this._getMinimumDimensions(items.before.config.content);
+            var beforeMinSize = this._isColumn ? beforeMinDim.vertical : beforeMinDim.horizontal;
+
+            var afterMinDim = this._getMinimumDimensions(items.after.config.content);
+            var afterMinSize = this._isColumn ? afterMinDim.vertical : afterMinDim.horizontal;
+
+            this._splitterPosition = 0;
+            this._splitterMinPosition = -1 * (items.before.element[this._dimension]() - (beforeMinSize || minSize));
+            this._splitterMaxPosition = items.after.element[this._dimension]() - (afterMinSize || minSize);
+        },
+
+		/**
+		 * Invoked when a splitter's DragListener fires drag. Updates the splitters DOM position,
+		 * but not the sizes of the elements the splitter controls in order to minimize resize events
+		 *
+		 * @param   {lm.controls.Splitter} splitter
+		 * @param   {Int} offsetX  Relative pixel values to the splitters original position. Can be negative
+		 * @param   {Int} offsetY  Relative pixel values to the splitters original position. Can be negative
+		 *
+		 * @returns {void}
+		 */
+        _onSplitterDrag: function (splitter, offsetX, offsetY) {
+            var offset = this._isColumn ? offsetY : offsetX;
+
+            if (offset > this._splitterMinPosition && offset < this._splitterMaxPosition) {
+                this._splitterPosition = offset;
+                splitter.element.css(this._isColumn ? 'top' : 'left', offset);
+            }
+        },
+
+		/**
+		 * Invoked when a splitter's DragListener fires dragStop. Resets the splitters DOM position,
+		 * and applies the new sizes to the elements before and after the splitter and their children
+		 * on the next animation frame
+		 *
+		 * @param   {lm.controls.Splitter} splitter
+		 *
+		 * @returns {void}
+		 */
+        _onSplitterDragStop: function (splitter) {
+
+            var items = this._getItemsForSplitter(splitter),
+                sizeBefore = items.before.element[this._dimension](),
+                sizeAfter = items.after.element[this._dimension](),
+                splitterPositionInRange = (this._splitterPosition + sizeBefore) / (sizeBefore + sizeAfter),
+                totalRelativeSize = items.before.config[this._dimension] + items.after.config[this._dimension];
+
+            items.before.config[this._dimension] = splitterPositionInRange * totalRelativeSize;
+            items.after.config[this._dimension] = (1 - splitterPositionInRange) * totalRelativeSize;
+
+            splitter.element.css({
+                'top': 0,
+                'left': 0
+            });
+
+            lm.utils.animFrame(lm.utils.fnBind(this.callDownwards, this, ['setSize']));
+        }
+    });
+
+    lm.items.Stack = function (layoutManager, config, parent) {
+        lm.items.AbstractContentItem.call(this, layoutManager, config, parent);
+
+        this.element = $('<div class="lm_item lm_stack"></div>');
+        this._activeContentItem = null;
+        var cfg = layoutManager.config;
+        this._header = { // defaults' reconstruction from old configuration style
+            show: cfg.settings.hasHeaders === true && config.hasHeaders !== false,
+            popout: cfg.settings.showPopoutIcon && cfg.labels.popout,
+            maximise: cfg.settings.showMaximiseIcon && cfg.labels.maximise,
+            close: cfg.settings.showCloseIcon && cfg.labels.close,
+            minimise: cfg.labels.minimise,
+        };
+        if (cfg.header) // load simplified version of header configuration (https://github.com/deepstreamIO/golden-layout/pull/245)
+            lm.utils.copy(this._header, cfg.header);
+        if (config.header) // load from stack
+            lm.utils.copy(this._header, config.header);
+        if (config.content && config.content[0] && config.content[0].header) // load from component if stack omitted
+            lm.utils.copy(this._header, config.content[0].header);
+
+        this._dropZones = {};
+        this._dropSegment = null;
+        this._contentAreaDimensions = null;
+        this._dropIndex = null;
+
+        this.isStack = true;
+
+        this.childElementContainer = $('<div class="lm_items"></div>');
+        this.header = new lm.controls.Header(layoutManager, this);
+
+        this.element.append(this.header.element);
+        this.element.append(this.childElementContainer);
+        this._setupHeaderPosition();
+        this._$validateClosability();
+    };
+
+    lm.utils.extend(lm.items.Stack, lm.items.AbstractContentItem);
+
+    lm.utils.copy(lm.items.Stack.prototype, {
+
+        setSize: function () {
+            var i,
+                headerSize = this._header.show ? this.layoutManager.config.dimensions.headerHeight : 0,
+                contentWidth = this.element.width() - (this._sided ? headerSize : 0),
+                contentHeight = this.element.height() - (!this._sided ? headerSize : 0);
+
+            this.childElementContainer.width(contentWidth);
+            this.childElementContainer.height(contentHeight);
+
+            for (i = 0; i < this.contentItems.length; i++) {
+                this.contentItems[i].element.width(contentWidth).height(contentHeight);
+            }
+            this.emit('resize');
+            this.emitBubblingEvent('stateChanged');
+        },
+
+        _$init: function () {
+            var i, initialItem;
+
+            if (this.isInitialised === true) return;
+
+            lm.items.AbstractContentItem.prototype._$init.call(this);
+
+            for (i = 0; i < this.contentItems.length; i++) {
+                this.header.createTab(this.contentItems[i]);
+                this.contentItems[i]._$hide();
+            }
+
+            if (this.contentItems.length > 0) {
+                initialItem = this.contentItems[this.config.activeItemIndex || 0];
+
+                if (!initialItem) {
+                    throw new Error('Configured activeItemIndex out of bounds');
+                }
+
+                this.setActiveContentItem(initialItem);
+            }
+        },
+
+        setActiveContentItem: function (contentItem) {
+            if (lm.utils.indexOf(contentItem, this.contentItems) === -1) {
+                throw new Error('contentItem is not a child of this stack');
+            }
+
+            if (this._activeContentItem !== null) {
+                this._activeContentItem._$hide();
+            }
+
+            this._activeContentItem = contentItem;
+            this.header.setActiveContentItem(contentItem);
+            contentItem._$show();
+            this.emit('activeContentItemChanged', contentItem);
+            this.layoutManager.emit('activeContentItemChanged', contentItem);
+            this.emitBubblingEvent('stateChanged');
+        },
+
+        getActiveContentItem: function () {
+            return this.header.activeContentItem;
+        },
+
+        addChild: function (contentItem, index) {
+            contentItem = this.layoutManager._$normalizeContentItem(contentItem, this);
+            lm.items.AbstractContentItem.prototype.addChild.call(this, contentItem, index);
+            this.childElementContainer.append(contentItem.element);
+            this.header.createTab(contentItem, index);
+            this.setActiveContentItem(contentItem);
+            this.callDownwards('setSize');
+            this._$validateClosability();
+            this.emitBubblingEvent('stateChanged');
+        },
+
+        removeChild: function (contentItem, keepChild) {
+            var index = lm.utils.indexOf(contentItem, this.contentItems);
+            lm.items.AbstractContentItem.prototype.removeChild.call(this, contentItem, keepChild);
+            this.header.removeTab(contentItem);
+            if (this.header.activeContentItem === contentItem) {
+                if (this.contentItems.length > 0) {
+                    this.setActiveContentItem(this.contentItems[Math.max(index - 1, 0)]);
+                } else {
+                    this._activeContentItem = null;
+                }
+            }
+
+            this._$validateClosability();
+            this.emitBubblingEvent('stateChanged');
+        },
+
+		/**
+		 * Validates that the stack is still closable or not. If a stack is able
+		 * to close, but has a non closable component added to it, the stack is no
+		 * longer closable until all components are closable.
+		 *
+		 * @returns {void}
+		 */
+        _$validateClosability: function () {
+            var contentItem,
+                isClosable,
+                len,
+                i;
+
+            isClosable = this.header._isClosable();
+
+            for (i = 0, len = this.contentItems.length; i < len; i++) {
+                if (!isClosable) {
+                    break;
+                }
+
+                isClosable = this.contentItems[i].config.isClosable;
+            }
+
+            this.header._$setClosable(isClosable);
+        },
+
+        _$destroy: function () {
+            lm.items.AbstractContentItem.prototype._$destroy.call(this);
+            this.header._$destroy();
+        },
+
+
+		/**
+		 * Ok, this one is going to be the tricky one: The user has dropped {contentItem} onto this stack.
+		 *
+		 * It was dropped on either the stacks header or the top, right, bottom or left bit of the content area
+		 * (which one of those is stored in this._dropSegment). Now, if the user has dropped on the header the case
+		 * is relatively clear: We add the item to the existing stack... job done (might be good to have
+		 * tab reordering at some point, but lets not sweat it right now)
+		 *
+		 * If the item was dropped on the content part things are a bit more complicated. If it was dropped on either the
+		 * top or bottom region we need to create a new column and place the items accordingly.
+		 * Unless, of course if the stack is already within a column... in which case we want
+		 * to add the newly created item to the existing column...
+		 * either prepend or append it, depending on wether its top or bottom.
+		 *
+		 * Same thing for rows and left / right drop segments... so in total there are 9 things that can potentially happen
+		 * (left, top, right, bottom) * is child of the right parent (row, column) + header drop
+		 *
+		 * @param    {lm.item} contentItem
+		 *
+		 * @returns {void}
+		 */
+        _$onDrop: function (contentItem) {
+
+			/*
+			 * The item was dropped on the header area. Just add it as a child of this stack and
+			 * get the hell out of this logic
+			 */
+            if (this._dropSegment === 'header') {
+                this._resetHeaderDropZone();
+                this.addChild(contentItem, this._dropIndex);
+                return;
+            }
+
+			/*
+			 * The stack is empty. Let's just add the element.
+			 */
+            if (this._dropSegment === 'body') {
+                this.addChild(contentItem);
+                return;
+            }
+
+			/*
+			 * The item was dropped on the top-, left-, bottom- or right- part of the content. Let's
+			 * aggregate some conditions to make the if statements later on more readable
+			 */
+            var isVertical = this._dropSegment === 'top' || this._dropSegment === 'bottom',
+                isHorizontal = this._dropSegment === 'left' || this._dropSegment === 'right',
+                insertBefore = this._dropSegment === 'top' || this._dropSegment === 'left',
+                hasCorrectParent = (isVertical && this.parent.isColumn) || (isHorizontal && this.parent.isRow),
+                type = isVertical ? 'column' : 'row',
+                dimension = isVertical ? 'height' : 'width',
+                index,
+                stack,
+                rowOrColumn;
+
+			/*
+			 * The content item can be either a component or a stack. If it is a component, wrap it into a stack
+			 */
+            if (contentItem.isComponent) {
+                stack = this.layoutManager.createContentItem({
+                    type: 'stack',
+                    header: contentItem.config.header || {}
+                }, this);
+                stack._$init();
+                stack.addChild(contentItem);
+                contentItem = stack;
+            }
+
+			/*
+			 * If the item is dropped on top or bottom of a column or left and right of a row, it's already
+			 * layd out in the correct way. Just add it as a child
+			 */
+            if (hasCorrectParent) {
+                index = lm.utils.indexOf(this, this.parent.contentItems);
+                this.parent.addChild(contentItem, insertBefore ? index : index + 1, true);
+                this.config[dimension] *= 0.5;
+                contentItem.config[dimension] = this.config[dimension];
+                this.parent.callDownwards('setSize');
+				/*
+				 * This handles items that are dropped on top or bottom of a row or left / right of a column. We need
+				 * to create the appropriate contentItem for them to live in
+				 */
+            } else {
+                type = isVertical ? 'column' : 'row';
+                rowOrColumn = this.layoutManager.createContentItem({ type: type }, this);
+                this.parent.replaceChild(this, rowOrColumn);
+
+                rowOrColumn.addChild(contentItem, insertBefore ? 0 : undefined, true);
+                rowOrColumn.addChild(this, insertBefore ? undefined : 0, true);
+
+                this.config[dimension] = 50;
+                contentItem.config[dimension] = 50;
+                rowOrColumn.callDownwards('setSize');
+            }
+        },
+
+		/**
+		 * If the user hovers above the header part of the stack, indicate drop positions for tabs.
+		 * otherwise indicate which segment of the body the dragged item would be dropped on
+		 *
+		 * @param    {Int} x Absolute Screen X
+		 * @param    {Int} y Absolute Screen Y
+		 *
+		 * @returns {void}
+		 */
+        _$highlightDropZone: function (x, y) {
+            var segment, area;
+
+            for (segment in this._contentAreaDimensions) {
+                area = this._contentAreaDimensions[segment].hoverArea;
+
+                if (area.x1 < x && area.x2 > x && area.y1 < y && area.y2 > y) {
+
+                    if (segment === 'header') {
+                        this._dropSegment = 'header';
+                        this._highlightHeaderDropZone(this._sided ? y : x);
+                    } else {
+                        this._resetHeaderDropZone();
+                        this._highlightBodyDropZone(segment);
+                    }
+
+                    return;
+                }
+            }
+        },
+
+        _$getArea: function () {
+            if (this.element.is(':visible') === false) {
+                return null;
+            }
+
+            var getArea = lm.items.AbstractContentItem.prototype._$getArea,
+                headerArea = getArea.call(this, this.header.element),
+                contentArea = getArea.call(this, this.childElementContainer),
+                contentWidth = contentArea.x2 - contentArea.x1,
+                contentHeight = contentArea.y2 - contentArea.y1;
+
+            this._contentAreaDimensions = {
+                header: {
+                    hoverArea: {
+                        x1: headerArea.x1,
+                        y1: headerArea.y1,
+                        x2: headerArea.x2,
+                        y2: headerArea.y2
+                    },
+                    highlightArea: {
+                        x1: headerArea.x1,
+                        y1: headerArea.y1,
+                        x2: headerArea.x2,
+                        y2: headerArea.y2
+                    }
+                }
+            };
+
+			/**
+			 * If this Stack is a parent to rows, columns or other stacks only its
+			 * header is a valid dropzone.
+			 */
+            if (this._activeContentItem && this._activeContentItem.isComponent === false) {
+                return headerArea;
+            }
+
+			/**
+			 * Highlight the entire body if the stack is empty
+			 */
+            if (this.contentItems.length === 0) {
+
+                this._contentAreaDimensions.body = {
+                    hoverArea: {
+                        x1: contentArea.x1,
+                        y1: contentArea.y1,
+                        x2: contentArea.x2,
+                        y2: contentArea.y2
+                    },
+                    highlightArea: {
+                        x1: contentArea.x1,
+                        y1: contentArea.y1,
+                        x2: contentArea.x2,
+                        y2: contentArea.y2
+                    }
+                };
+
+                return getArea.call(this, this.element);
+            }
+
+            this._contentAreaDimensions.left = {
+                hoverArea: {
+                    x1: contentArea.x1,
+                    y1: contentArea.y1,
+                    x2: contentArea.x1 + contentWidth * 0.25,
+                    y2: contentArea.y2
+                },
+                highlightArea: {
+                    x1: contentArea.x1,
+                    y1: contentArea.y1,
+                    x2: contentArea.x1 + contentWidth * 0.5,
+                    y2: contentArea.y2
+                }
+            };
+
+            this._contentAreaDimensions.top = {
+                hoverArea: {
+                    x1: contentArea.x1 + contentWidth * 0.25,
+                    y1: contentArea.y1,
+                    x2: contentArea.x1 + contentWidth * 0.75,
+                    y2: contentArea.y1 + contentHeight * 0.5
+                },
+                highlightArea: {
+                    x1: contentArea.x1,
+                    y1: contentArea.y1,
+                    x2: contentArea.x2,
+                    y2: contentArea.y1 + contentHeight * 0.5
+                }
+            };
+
+            this._contentAreaDimensions.right = {
+                hoverArea: {
+                    x1: contentArea.x1 + contentWidth * 0.75,
+                    y1: contentArea.y1,
+                    x2: contentArea.x2,
+                    y2: contentArea.y2
+                },
+                highlightArea: {
+                    x1: contentArea.x1 + contentWidth * 0.5,
+                    y1: contentArea.y1,
+                    x2: contentArea.x2,
+                    y2: contentArea.y2
+                }
+            };
+
+            this._contentAreaDimensions.bottom = {
+                hoverArea: {
+                    x1: contentArea.x1 + contentWidth * 0.25,
+                    y1: contentArea.y1 + contentHeight * 0.5,
+                    x2: contentArea.x1 + contentWidth * 0.75,
+                    y2: contentArea.y2
+                },
+                highlightArea: {
+                    x1: contentArea.x1,
+                    y1: contentArea.y1 + contentHeight * 0.5,
+                    x2: contentArea.x2,
+                    y2: contentArea.y2
+                }
+            };
+
+            return getArea.call(this, this.element);
+        },
+
+        _highlightHeaderDropZone: function (x) {
+            var i,
+                tabElement,
+                tabsLength = this.header.tabs.length,
+                isAboveTab = false,
+                tabTop,
+                tabLeft,
+                offset,
+                placeHolderLeft,
+                headerOffset,
+                tabWidth,
+                halfX;
+
+            // Empty stack
+            if (tabsLength === 0) {
+                headerOffset = this.header.element.offset();
+
+                this.layoutManager.dropTargetIndicator.highlightArea({
+                    x1: headerOffset.left,
+                    x2: headerOffset.left + 100,
+                    y1: headerOffset.top + this.header.element.height() - 20,
+                    y2: headerOffset.top + this.header.element.height()
+                });
+
+                return;
+            }
+
+            for (i = 0; i < tabsLength; i++) {
+                tabElement = this.header.tabs[i].element;
+                offset = tabElement.offset();
+                if (this._sided) {
+                    tabLeft = offset.top;
+                    tabTop = offset.left;
+                    tabWidth = tabElement.height();
+                } else {
+                    tabLeft = offset.left;
+                    tabTop = offset.top;
+                    tabWidth = tabElement.width();
+                }
+
+                if (x > tabLeft && x < tabLeft + tabWidth) {
+                    isAboveTab = true;
+                    break;
+                }
+            }
+
+            if (isAboveTab === false && x < tabLeft) {
+                return;
+            }
+
+            halfX = tabLeft + tabWidth / 2;
+
+            if (x < halfX) {
+                this._dropIndex = i;
+                tabElement.before(this.layoutManager.tabDropPlaceholder);
+            } else {
+                this._dropIndex = Math.min(i + 1, tabsLength);
+                tabElement.after(this.layoutManager.tabDropPlaceholder);
+            }
+
+
+            if (this._sided) {
+                placeHolderTop = this.layoutManager.tabDropPlaceholder.offset().top;
+                this.layoutManager.dropTargetIndicator.highlightArea({
+                    x1: tabTop,
+                    x2: tabTop + tabElement.innerHeight(),
+                    y1: placeHolderTop,
+                    y2: placeHolderTop + this.layoutManager.tabDropPlaceholder.width()
+                });
+                return;
+            }
+            placeHolderLeft = this.layoutManager.tabDropPlaceholder.offset().left;
+
+            this.layoutManager.dropTargetIndicator.highlightArea({
+                x1: placeHolderLeft,
+                x2: placeHolderLeft + this.layoutManager.tabDropPlaceholder.width(),
+                y1: tabTop,
+                y2: tabTop + tabElement.innerHeight()
+            });
+        },
+
+        _resetHeaderDropZone: function () {
+            this.layoutManager.tabDropPlaceholder.remove();
+        },
+
+        _setupHeaderPosition: function () {
+            var side = ['right', 'left', 'bottom'].indexOf(this._header.show) >= 0 && this._header.show;
+            this.header.element.toggle(!!this._header.show);
+            this._side = side;
+            this._sided = ['right', 'left'].indexOf(this._side) >= 0;
+            this.element.removeClass('lm_left lm_right lm_bottom');
+            if (this._side)
+                this.element.addClass('lm_' + this._side);
+            if (this.element.find('.lm_header').length && this.childElementContainer) {
+                var headerPosition = ['right', 'bottom'].indexOf(this._side) >= 0 ? 'before' : 'after';
+                this.header.element[headerPosition](this.childElementContainer);
+                this.callDownwards('setSize');
+            }
+        },
+
+        _highlightBodyDropZone: function (segment) {
+            var highlightArea = this._contentAreaDimensions[segment].highlightArea;
+            this.layoutManager.dropTargetIndicator.highlightArea(highlightArea);
+            this._dropSegment = segment;
+        }
+    });
+
+    lm.utils.BubblingEvent = function (name, origin) {
+        this.name = name;
+        this.origin = origin;
+        this.isPropagationStopped = false;
+    };
+
+    lm.utils.BubblingEvent.prototype.stopPropagation = function () {
+        this.isPropagationStopped = true;
+    };
+	/**
+	 * Minifies and unminifies configs by replacing frequent keys
+	 * and values with one letter substitutes. Config options must
+	 * retain array position/index, add new options at the end.
+	 *
+	 * @constructor
+	 */
+    lm.utils.ConfigMinifier = function () {
+        this._keys = [
+            'settings',
+            'hasHeaders',
+            'constrainDragToContainer',
+            'selectionEnabled',
+            'dimensions',
+            'borderWidth',
+            'minItemHeight',
+            'minItemWidth',
+            'headerHeight',
+            'dragProxyWidth',
+            'dragProxyHeight',
+            'labels',
+            'close',
+            'maximise',
+            'minimise',
+            'popout',
+            'content',
+            'componentName',
+            'componentState',
+            'id',
+            'width',
+            'type',
+            'height',
+            'isClosable',
+            'title',
+            'popoutWholeStack',
+            'openPopouts',
+            'parentId',
+            'activeItemIndex',
+            'reorderEnabled',
+            'borderGrabWidth',
+
+
+
+
+            //Maximum 36 entries, do not cross this line!
+        ];
+        if (this._keys.length > 36) {
+            throw new Error('Too many keys in config minifier map');
+        }
+
+        this._values = [
+            true,
+            false,
+            'row',
+            'column',
+            'stack',
+            'component',
+            'close',
+            'maximise',
+            'minimise',
+            'open in new window'
+        ];
+    };
+
+    lm.utils.copy(lm.utils.ConfigMinifier.prototype, {
+
+		/**
+		 * Takes a GoldenLayout configuration object and
+		 * replaces its keys and values recursively with
+		 * one letter counterparts
+		 *
+		 * @param   {Object} config A GoldenLayout config object
+		 *
+		 * @returns {Object} minified config
+		 */
+        minifyConfig: function (config) {
+            var min = {};
+            this._nextLevel(config, min, '_min');
+            return min;
+        },
+
+		/**
+		 * Takes a configuration Object that was previously minified
+		 * using minifyConfig and returns its original version
+		 *
+		 * @param   {Object} minifiedConfig
+		 *
+		 * @returns {Object} the original configuration
+		 */
+        unminifyConfig: function (minifiedConfig) {
+            var orig = {};
+            this._nextLevel(minifiedConfig, orig, '_max');
+            return orig;
+        },
+
+		/**
+		 * Recursive function, called for every level of the config structure
+		 *
+		 * @param   {Array|Object} orig
+		 * @param   {Array|Object} min
+		 * @param    {String} translationFn
+		 *
+		 * @returns {void}
+		 */
+        _nextLevel: function (from, to, translationFn) {
+            var key, minKey;
+
+            for (key in from) {
+
+				/**
+				 * For in returns array indices as keys, so let's cast them to numbers
+				 */
+                if (from instanceof Array) key = parseInt(key, 10);
+
+				/**
+				 * In case something has extended Object prototypes
+				 */
+                if (!from.hasOwnProperty(key)) continue;
+
+				/**
+				 * Translate the key to a one letter substitute
+				 */
+                minKey = this[translationFn](key, this._keys);
+
+				/**
+				 * For Arrays and Objects, create a new Array/Object
+				 * on the minified object and recurse into it
+				 */
+                if (typeof from[key] === 'object') {
+                    to[minKey] = from[key] instanceof Array ? [] : {};
+                    this._nextLevel(from[key], to[minKey], translationFn);
+
+					/**
+					 * For primitive values (Strings, Numbers, Boolean etc.)
+					 * minify the value
+					 */
+                } else {
+                    to[minKey] = this[translationFn](from[key], this._values);
+                }
+            }
+        },
+
+		/**
+		 * Minifies value based on a dictionary
+		 *
+		 * @param   {String|Boolean} value
+		 * @param   {Array<String|Boolean>} dictionary
+		 *
+		 * @returns {String} The minified version
+		 */
+        _min: function (value, dictionary) {
+			/**
+			 * If a value actually is a single character, prefix it
+			 * with ___ to avoid mistaking it for a minification code
+			 */
+            if (typeof value === 'string' && value.length === 1) {
+                return '___' + value;
+            }
+
+            var index = lm.utils.indexOf(value, dictionary);
+
+			/**
+			 * value not found in the dictionary, return it unmodified
+			 */
+            if (index === -1) {
+                return value;
+
+				/**
+				 * value found in dictionary, return its base36 counterpart
+				 */
+            } else {
+                return index.toString(36);
+            }
+        },
+
+        _max: function (value, dictionary) {
+			/**
+			 * value is a single character. Assume that it's a translation
+			 * and return the original value from the dictionary
+			 */
+            if (typeof value === 'string' && value.length === 1) {
+                return dictionary[parseInt(value, 36)];
+            }
+
+			/**
+			 * value originally was a single character and was prefixed with ___
+			 * to avoid mistaking it for a translation. Remove the prefix
+			 * and return the original character
+			 */
+            if (typeof value === 'string' && value.substr(0, 3) === '___') {
+                return value[3];
+            }
+			/**
+			 * value was not minified
+			 */
+            return value;
+        }
+    });
+
+	/**
+	 * An EventEmitter singleton that propagates events
+	 * across multiple windows. This is a little bit trickier since
+	 * windows are allowed to open childWindows in their own right
+	 *
+	 * This means that we deal with a tree of windows. Hence the rules for event propagation are:
+	 *
+	 * - Propagate events from this layout to both parents and children
+	 * - Propagate events from parent to this and children
+	 * - Propagate events from children to the other children (but not the emitting one) and the parent
+	 *
+	 * @constructor
+	 *
+	 * @param {lm.LayoutManager} layoutManager
+	 */
+    lm.utils.EventHub = function (layoutManager) {
+        lm.utils.EventEmitter.call(this);
+        this._layoutManager = layoutManager;
+        this._dontPropagateToParent = null;
+        this._childEventSource = null;
+        this.on(lm.utils.EventEmitter.ALL_EVENT, lm.utils.fnBind(this._onEventFromThis, this));
+        this._boundOnEventFromChild = lm.utils.fnBind(this._onEventFromChild, this);
+        $(window).on('gl_child_event', this._boundOnEventFromChild);
+    };
+
+	/**
+	 * Called on every event emitted on this eventHub, regardles of origin.
+	 *
+	 * @private
+	 *
+	 * @param {Mixed}
+	 *
+	 * @returns {void}
+	 */
+    lm.utils.EventHub.prototype._onEventFromThis = function () {
+        var args = Array.prototype.slice.call(arguments);
+
+        if (this._layoutManager.isSubWindow && args[0] !== this._dontPropagateToParent) {
+            this._propagateToParent(args);
+        }
+        this._propagateToChildren(args);
+
+        //Reset
+        this._dontPropagateToParent = null;
+        this._childEventSource = null;
+    };
+
+	/**
+	 * Called by the parent layout.
+	 *
+	 * @param   {Array} args Event name + arguments
+	 *
+	 * @returns {void}
+	 */
+    lm.utils.EventHub.prototype._$onEventFromParent = function (args) {
+        this._dontPropagateToParent = args[0];
+        this.emit.apply(this, args);
+    };
+
+	/**
+	 * Callback for child events raised on the window
+	 *
+	 * @param   {DOMEvent} event
+	 * @private
+	 *
+	 * @returns {void}
+	 */
+    lm.utils.EventHub.prototype._onEventFromChild = function (event) {
+        this._childEventSource = event.originalEvent.__gl;
+        this.emit.apply(this, event.originalEvent.__glArgs);
+    };
+
+	/**
+	 * Propagates the event to the parent by emitting
+	 * it on the parent's DOM window
+	 *
+	 * @param   {Array} args Event name + arguments
+	 * @private
+	 *
+	 * @returns {void}
+	 */
+    lm.utils.EventHub.prototype._propagateToParent = function (args) {
+        var event,
+            eventName = 'gl_child_event';
+
+        if (document.createEvent) {
+            event = window.opener.document.createEvent('HTMLEvents');
+            event.initEvent(eventName, true, true);
+        } else {
+            event = window.opener.document.createEventObject();
+            event.eventType = eventName;
+        }
+
+        event.eventName = eventName;
+        event.__glArgs = args;
+        event.__gl = this._layoutManager;
+
+        if (document.createEvent) {
+            window.opener.dispatchEvent(event);
+        } else {
+            window.opener.fireEvent('on' + event.eventType, event);
+        }
+    };
+
+	/**
+	 * Propagate events to children
+	 *
+	 * @param   {Array} args Event name + arguments
+	 * @private
+	 *
+	 * @returns {void}
+	 */
+    lm.utils.EventHub.prototype._propagateToChildren = function (args) {
+        var childGl, i;
+
+        for (i = 0; i < this._layoutManager.openPopouts.length; i++) {
+            childGl = this._layoutManager.openPopouts[i].getGlInstance();
+
+            if (childGl && childGl !== this._childEventSource) {
+                childGl.eventHub._$onEventFromParent(args);
+            }
+        }
+    };
+
+
+	/**
+	 * Destroys the EventHub
+	 *
+	 * @public
+	 * @returns {void}
+	 */
+
+    lm.utils.EventHub.prototype.destroy = function () {
+        $(window).off('gl_child_event', this._boundOnEventFromChild);
+    };
+	/**
+	 * A specialised GoldenLayout component that binds GoldenLayout container
+	 * lifecycle events to react components
+	 *
+	 * @constructor
+	 *
+	 * @param {lm.container.ItemContainer} container
+	 * @param {Object} state state is not required for react components
+	 */
+    lm.utils.ReactComponentHandler = function (container, state) {
+        this._reactComponent = null;
+        this._originalComponentWillUpdate = null;
+        this._container = container;
+        this._initialState = state;
+        this._reactClass = this._getReactClass();
+        this._container.on('open', this._render, this);
+        this._container.on('destroy', this._destroy, this);
+    };
+
+    lm.utils.copy(lm.utils.ReactComponentHandler.prototype, {
+
+		/**
+		 * Creates the react class and component and hydrates it with
+		 * the initial state - if one is present
+		 *
+		 * By default, react's getInitialState will be used
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _render: function () {
+            this._reactComponent = ReactDOM.render(this._getReactComponent(), this._container.getElement()[0]);
+            this._originalComponentWillUpdate = this._reactComponent.componentWillUpdate || function () {
+            };
+            this._reactComponent.componentWillUpdate = this._onUpdate.bind(this);
+            if (this._container.getState()) {
+                this._reactComponent.setState(this._container.getState());
+            }
+        },
+
+		/**
+		 * Removes the component from the DOM and thus invokes React's unmount lifecycle
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _destroy: function () {
+            ReactDOM.unmountComponentAtNode(this._container.getElement()[0]);
+            this._container.off('open', this._render, this);
+            this._container.off('destroy', this._destroy, this);
+        },
+
+		/**
+		 * Hooks into React's state management and applies the componentstate
+		 * to GoldenLayout
+		 *
+		 * @private
+		 * @returns {void}
+		 */
+        _onUpdate: function (nextProps, nextState) {
+            this._container.setState(nextState);
+            this._originalComponentWillUpdate.call(this._reactComponent, nextProps, nextState);
+        },
+
+		/**
+		 * Retrieves the react class from GoldenLayout's registry
+		 *
+		 * @private
+		 * @returns {React.Class}
+		 */
+        _getReactClass: function () {
+            var componentName = this._container._config.component;
+            var reactClass;
+
+            if (!componentName) {
+                throw new Error('No react component name. type: react-component needs a field `component`');
+            }
+
+            reactClass = this._container.layoutManager.getComponent(componentName);
+
+            if (!reactClass) {
+                throw new Error('React component "' + componentName + '" not found. ' +
+                    'Please register all components with GoldenLayout using `registerComponent(name, component)`');
+            }
+
+            return reactClass;
+        },
+
+		/**
+		 * Copies and extends the properties array and returns the React element
+		 *
+		 * @private
+		 * @returns {React.Element}
+		 */
+        _getReactComponent: function () {
+            var defaultProps = {
+                glEventHub: this._container.layoutManager.eventHub,
+                glContainer: this._container,
+            };
+            var props = $.extend(defaultProps, this._container._config.props);
+            return React.createElement(this._reactClass, props);
+        }
+    });
+})(window.$);
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 21ca08471..6f721a0c8 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,25 +1,23 @@
-import * as GoldenLayout from "golden-layout";
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, observable, reaction, trace, runInAction } from "mobx";
+import { action, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import Measure from "react-measure";
-import { Utils, returnTrue, emptyFunction, returnOne, returnZero } from "../../../Utils";
+import * as GoldenLayout from "../../../client/goldenLayout";
+import { Doc, Field, Opt } from "../../../new_fields/Doc";
+import { FieldId, Id } from "../../../new_fields/RefField";
+import { listSpec } from "../../../new_fields/Schema";
+import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
+import { emptyFunction, returnTrue, Utils } from "../../../Utils";
+import { DocServer } from "../../DocServer";
+import { DragLinksAsDocuments, DragManager } from "../../util/DragManager";
+import { Transform } from '../../util/Transform';
 import { undoBatch, UndoManager } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
-import React = require("react");
 import { SubCollectionViewProps } from "./CollectionSubView";
-import { DragManager, DragLinksAsDocuments } from "../../util/DragManager";
-import { Transform } from '../../util/Transform';
-import { Doc, Opt, Field } from "../../../new_fields/Doc";
-import { Cast, NumCast, StrCast, PromiseValue } from "../../../new_fields/Types";
-import { List } from "../../../new_fields/List";
-import { DocServer } from "../../DocServer";
-import { listSpec } from "../../../new_fields/Schema";
-import { Id, FieldId } from "../../../new_fields/RefField";
-import { faSignInAlt } from "@fortawesome/free-solid-svg-icons";
+import React = require("react");
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -286,6 +284,9 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
     tabCreated = async (tab: any) => {
         if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type !== "stack") {
+            if (tab.contentItem.config.fixed) {
+                tab.contentItem.parent.config.fixed = true;
+            }
             DocServer.GetRefField(tab.contentItem.config.props.documentId).then(async doc => {
                 if (doc instanceof Doc) {
                     let counter: any = this.htmlToElement(`<div class="messageCounter">0</div>`);
@@ -325,16 +326,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             .click(action(function () {
                 //if (confirm('really close this?')) {
                 stack.remove();
-                //}
-            }));
-        stack.header.controlsContainer.find('.lm_popout') //get the close icon
-            .off('click') //unbind the current click handler
-            .click(action(function () {
-                var url = DocServer.prepend("/doc/" + stack.contentItems[0].tab.contentItem.config.props.documentId);
-                let win = window.open(url, stack.contentItems[0].tab.title, "width=300,height=400");
-            }));
-        stack.header.controlsContainer.find('.lm_close') //unbind the current click handler
-            .click(async function () {
                 stack.contentItems.map(async (contentItem: any) => {
                     let doc = await DocServer.GetRefField(contentItem.config.props.documentId);
                     if (doc instanceof Doc) {
@@ -342,7 +333,15 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                         CollectionDockingView.Instance._removedDocs.push(theDoc);
                     }
                 });
-            });
+                //}
+            }));
+        stack.header.controlsContainer.find('.lm_popout') //get the close icon
+            .off('click') //unbind the current click handler
+            .click(action(function () {
+                stack.config.fixed = !stack.config.fixed;
+                // var url = DocServer.prepend("/doc/" + stack.contentItems[0].tab.contentItem.config.props.documentId);
+                // let win = window.open(url, stack.contentItems[0].tab.title, "width=300,height=400");
+            }));
     }
 
     render() {
@@ -351,6 +350,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} ref={this._containerRef} />
         );
     }
+
 }
 
 interface DockedFrameProps {
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 947a066d9..429d0f047 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -20,6 +20,7 @@ import { CollectionDockingView } from './CollectionDockingView';
 import { DocumentManager } from '../../util/DocumentManager';
 import { Utils } from '../../../Utils';
 import { List } from '../../../new_fields/List';
+import { indexOf } from 'typescript-collections/dist/lib/arrays';
 
 
 export interface TreeViewProps {
@@ -48,8 +49,15 @@ class TreeView extends React.Component<TreeViewProps> {
 
     @observable _collapsed: boolean = true;
 
-    delete = () => this.props.deleteDoc(this.props.document);
-    openRight = () => CollectionDockingView.Instance.AddRightSplit(this.props.document);
+    @undoBatch delete = () => this.props.deleteDoc(this.props.document);
+
+    @undoBatch openRight = () => {
+        if (this.props.document.dockingConfig) {
+            Main.Instance.openWorkspace(this.props.document);
+        } else {
+            CollectionDockingView.Instance.AddRightSplit(this.props.document);
+        }
+    };
 
     get children() {
         return Cast(this.props.document.data, listSpec(Doc), []); // bcz: needed?    .filter(doc => FieldValue(doc));
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index cf08c1bc4..2c8e6aef3 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -125,15 +125,15 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public toggleIcon = async (): Promise<void> => {
         SelectionManager.DeselectAll();
         let isMinimized: boolean | undefined;
-        let maximizedDocs = await Cast(this.props.Document.maximizedDocs, listSpec(Doc));
+        let maximizedDocs = Cast(this.props.Document.maximizedDocs, listSpec(Doc));
         let minimizedDoc: Doc | undefined = this.props.Document;
         if (!maximizedDocs) {
             minimizedDoc = await Cast(this.props.Document.minimizedDoc, Doc);
-            if (minimizedDoc) maximizedDocs = await Cast(minimizedDoc.maximizedDocs, listSpec(Doc));
+            if (minimizedDoc) maximizedDocs = Cast(minimizedDoc.maximizedDocs, listSpec(Doc));
         }
-        if (minimizedDoc && maximizedDocs && maximizedDocs instanceof List) {
+        if (minimizedDoc && maximizedDocs) {
             let minimizedTarget = minimizedDoc;
-            maximizedDocs.map(maximizedDoc => {
+            (await Promise.all(maximizedDocs)).forEach(maximizedDoc => {
                 let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
                 if (!iconAnimating || (Date.now() - iconAnimating[6] > 1000)) {
                     if (isMinimized === undefined) {
@@ -166,26 +166,25 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         let metaKey = e.metaKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
-            if (await BoolCast(this.props.Document.isButton, false)) {
+            if (BoolCast(this.props.Document.isButton, false)) {
                 let maximizedDocs = await Cast(this.props.Document.maximizedDocs, listSpec(Doc));
                 if (maximizedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
                     if ((metaKey && !this.props.Document.maximizeOnRight) || (!metaKey && this.props.Document.maximizeOnRight)) {
-                        SelectionManager.DeselectAll();
-                        maximizedDocs.map(async mdoc => {
-                            let maxDoc = await mdoc;
-                            let dataDocs = await Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc));
-                            if (dataDocs) {
-                                Promise.all(dataDocs.map(async doc => await doc)).then(docs => {
-                                    if (!docs || docs.indexOf(maxDoc) == -1) {
-                                        CollectionDockingView.Instance.AddRightSplit(maxDoc);
-                                    } else {
-                                        CollectionDockingView.Instance.CloseRightSplit(maxDoc);
-                                    }
-                                })
-                            }
-                        });
+                        let dataDocs = Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc));
+                        if (dataDocs) {
+                            const docs = await Promise.all(dataDocs);
+                            const maxDocs = await Promise.all(maximizedDocs);
+                            SelectionManager.DeselectAll();
+                            maxDocs.forEach(maxDoc => {
+                                if (!docs || docs.indexOf(maxDoc) == -1) {
+                                    CollectionDockingView.Instance.AddRightSplit(maxDoc);
+                                } else {
+                                    CollectionDockingView.Instance.CloseRightSplit(maxDoc);
+                                }
+                            });
+                        }
                     } else {
-                        this.props.addDocument && maximizedDocs.map(async maxDoc => this.props.addDocument!(await maxDoc, false));
+                        this.props.addDocument && maximizedDocs.forEach(async maxDoc => this.props.addDocument!(await maxDoc, false));
                         this.toggleIcon();
                     }
                 }
diff --git a/src/new_fields/List.ts b/src/new_fields/List.ts
index 96018dafa..213ed21aa 100644
--- a/src/new_fields/List.ts
+++ b/src/new_fields/List.ts
@@ -206,7 +206,7 @@ class ListImpl<T extends Field> extends ObjectField {
         return list;
     }
 
-    [key: number]: FieldResult<T>;
+    [key: number]: T | (T extends RefField ? Promise<T> : never);
 
     @serializable(alias("fields", list(autoObject())))
     private get __fields() {
-- 
cgit v1.2.3-70-g09d2


From e96e3382104a2ae8dbe41252c0b38206b983e94a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 6 May 2019 13:10:19 -0400
Subject: addd doc list cast

---
 .../views/collections/CollectionSchemaView.tsx       | 10 ++++------
 .../views/nodes/CollectionFreeFormDocumentView.tsx   | 20 +++++++++-----------
 src/new_fields/Doc.ts                                |  5 +++++
 src/new_fields/List.ts                               |  2 +-
 src/new_fields/Types.ts                              |  2 +-
 5 files changed, 20 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 4fee9db85..16818affd 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -19,7 +19,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
-import { Opt, Field, Doc } from "../../../new_fields/Doc";
+import { Opt, Field, Doc, DocListCast } from "../../../new_fields/Doc";
 import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
 import { List } from "../../../new_fields/List";
@@ -111,17 +111,15 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                         }
                         return applyToDoc(props.Document, script.run);
                     }}
-                    OnFillDown={(value: string) => {
+                    OnFillDown={async (value: string) => {
                         let script = CompileScript(value, { addReturn: true, params: { this: Document.name } });
                         if (!script.compiled) {
                             return;
                         }
                         const run = script.run;
                         //TODO This should be able to be refactored to compile the script once
-                        const val = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc));
-                        if (val) {
-                            val.forEach(doc => applyToDoc(doc, run));
-                        }
+                        const val = await DocListCast(this.props.Document[this.props.fieldKey])
+                        val && val.forEach(doc => applyToDoc(doc, run));
                     }}>
                 </EditableView>
             </div >
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 2c8e6aef3..24a75049a 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -6,10 +6,10 @@ import "./DocumentView.scss";
 import React = require("react");
 import { DocComponent } from "../DocComponent";
 import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema";
-import { FieldValue, Cast, NumCast, BoolCast, PromiseValue } from "../../../new_fields/Types";
+import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
 import { OmitKeys, Utils } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
-import { Doc } from "../../../new_fields/Doc";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 
@@ -125,15 +125,15 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public toggleIcon = async (): Promise<void> => {
         SelectionManager.DeselectAll();
         let isMinimized: boolean | undefined;
-        let maximizedDocs = Cast(this.props.Document.maximizedDocs, listSpec(Doc));
+        let maximizedDocs = await DocListCast(this.props.Document.maximizedDocs);
         let minimizedDoc: Doc | undefined = this.props.Document;
         if (!maximizedDocs) {
             minimizedDoc = await Cast(this.props.Document.minimizedDoc, Doc);
-            if (minimizedDoc) maximizedDocs = Cast(minimizedDoc.maximizedDocs, listSpec(Doc));
+            if (minimizedDoc) maximizedDocs = await DocListCast(minimizedDoc.maximizedDocs);
         }
         if (minimizedDoc && maximizedDocs) {
             let minimizedTarget = minimizedDoc;
-            (await Promise.all(maximizedDocs)).forEach(maximizedDoc => {
+            maximizedDocs.forEach(maximizedDoc => {
                 let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
                 if (!iconAnimating || (Date.now() - iconAnimating[6] > 1000)) {
                     if (isMinimized === undefined) {
@@ -167,16 +167,14 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
             if (BoolCast(this.props.Document.isButton, false)) {
-                let maximizedDocs = await Cast(this.props.Document.maximizedDocs, listSpec(Doc));
+                let maximizedDocs = await DocListCast(this.props.Document.maximizedDocs);
                 if (maximizedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
                     if ((metaKey && !this.props.Document.maximizeOnRight) || (!metaKey && this.props.Document.maximizeOnRight)) {
-                        let dataDocs = Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc));
+                        let dataDocs = await DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
-                            const docs = await Promise.all(dataDocs);
-                            const maxDocs = await Promise.all(maximizedDocs);
                             SelectionManager.DeselectAll();
-                            maxDocs.forEach(maxDoc => {
-                                if (!docs || docs.indexOf(maxDoc) == -1) {
+                            maximizedDocs.forEach(maxDoc => {
+                                if (!dataDocs || dataDocs.indexOf(maxDoc) == -1) {
                                     CollectionDockingView.Instance.AddRightSplit(maxDoc);
                                 } else {
                                     CollectionDockingView.Instance.CloseRightSplit(maxDoc);
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index b2863c632..70dd8361b 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -29,6 +29,11 @@ const SelfProxy = Symbol("SelfProxy");
 export const WidthSym = Symbol("Width");
 export const HeightSym = Symbol("Height");
 
+export function DocListCast(field: FieldResult) {
+    const list = Cast(field, listSpec(Doc))
+    return list ? Promise.all(list) : Promise.resolve(undefined);
+}
+
 @Deserializable("doc").withFields(["id"])
 export class Doc extends RefField {
     constructor(id?: FieldId, forceSave?: boolean) {
diff --git a/src/new_fields/List.ts b/src/new_fields/List.ts
index 213ed21aa..5aba64406 100644
--- a/src/new_fields/List.ts
+++ b/src/new_fields/List.ts
@@ -236,5 +236,5 @@ class ListImpl<T extends Field> extends ObjectField {
 
     private [Self] = this;
 }
-export type List<T extends Field> = ListImpl<T> & T[];
+export type List<T extends Field> = ListImpl<T> & (T | (T extends RefField ? Promise<T> : never))[];
 export const List: { new <T extends Field>(fields?: T[]): List<T> } = ListImpl as any;
\ No newline at end of file
diff --git a/src/new_fields/Types.ts b/src/new_fields/Types.ts
index 60f08dc90..c07d38786 100644
--- a/src/new_fields/Types.ts
+++ b/src/new_fields/Types.ts
@@ -1,4 +1,4 @@
-import { Field, Opt, FieldResult } from "./Doc";
+import { Field, Opt, FieldResult, Doc } from "./Doc";
 import { List } from "./List";
 
 export type ToType<T extends ToConstructor<Field> | ListSpec<Field>> =
-- 
cgit v1.2.3-70-g09d2


From d6919d0779df080990c52157540564af95c98a18 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 6 May 2019 15:17:59 -0400
Subject: Added synchronization to db insert

---
 src/server/database.ts | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/server/database.ts b/src/server/database.ts
index 37cfcf3a3..69005d2d3 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -22,13 +22,6 @@ export class Database {
                 return new Promise<void>(resolve => {
                     collection.updateOne({ _id: id }, value, { upsert }
                         , (err, res) => {
-                            if (err) {
-                                console.log(err.message);
-                                console.log(err.errmsg);
-                            }
-                            // if (res) {
-                            //     console.log(JSON.stringify(res.result));
-                            // }
                             if (this.currentWrites[id] === newProm) {
                                 delete this.currentWrites[id];
                             }
@@ -52,11 +45,27 @@ export class Database {
     }
 
     public insert(value: any, collectionName = Database.DocumentsCollection) {
+        if (!this.db) { return; }
         if ("id" in value) {
             value._id = value.id;
             delete value.id;
         }
-        this.db && this.db.collection(collectionName).insertOne(value);
+        const id = value._id;
+        const collection = this.db.collection(collectionName);
+        const prom = this.currentWrites[id];
+        let newProm: Promise<void>;
+        const run = (): Promise<void> => {
+            return new Promise<void>(resolve => {
+                collection.insertOne(value, (err, res) => {
+                    if (this.currentWrites[id] === newProm) {
+                        delete this.currentWrites[id];
+                    }
+                    resolve();
+                });
+            });
+        };
+        newProm = prom ? prom.then(run) : run();
+        this.currentWrites[id] = newProm;
     }
 
     public getDocument(id: string, fn: (result?: Transferable) => void, collectionName = Database.DocumentsCollection) {
-- 
cgit v1.2.3-70-g09d2


From 684c8e190098dee8c285665ebf1e2c598bd5cf4c Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 6 May 2019 15:28:59 -0400
Subject: fixed a few golden layout and tree view issues.

---
 src/client/views/collections/CollectionDockingView.tsx |  4 +++-
 src/client/views/collections/CollectionTreeView.tsx    | 18 ++++++++++++++----
 src/client/views/nodes/IconBox.tsx                     | 14 +++++++++++++-
 src/new_fields/Doc.ts                                  |  1 -
 4 files changed, 30 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 6f721a0c8..05c467763 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -78,14 +78,16 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 if (child.contentItems.length === 1 && child.contentItems[0].config.component === "DocumentFrameRenderer" &&
                     child.contentItems[0].config.props.documentId == document[Id]) {
                     child.contentItems[0].remove();
-                    //this._goldenLayout.root.contentItems[0].contentItems.splice(i, 1);
                     this.layoutChanged(document);
+                    this.stateChanged();
                 } else
                     child.contentItems.map((tab: any, j: number) => {
                         if (tab.config.component === "DocumentFrameRenderer" && tab.config.props.documentId === document[Id]) {
                             child.contentItems[j].remove();
+                            child.config.activeItemIndex = Math.max(child.contentItems.length - 1, 0);
                             let docs = Cast(this.props.Document.data, listSpec(Doc));
                             docs && docs.indexOf(document) !== -1 && docs.splice(docs.indexOf(document), 1);
+                            this.stateChanged();
                         }
                     });
             })
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 429d0f047..6fa374464 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -10,7 +10,7 @@ import "./CollectionTreeView.scss";
 import React = require("react");
 import { Document, listSpec } from '../../../new_fields/Schema';
 import { Cast, StrCast, BoolCast, FieldValue } from '../../../new_fields/Types';
-import { Doc } from '../../../new_fields/Doc';
+import { Doc, DocListCast } from '../../../new_fields/Doc';
 import { Id } from '../../../new_fields/RefField';
 import { ContextMenu } from '../ContextMenu';
 import { undoBatch } from '../../util/UndoManager';
@@ -51,7 +51,7 @@ class TreeView extends React.Component<TreeViewProps> {
 
     @undoBatch delete = () => this.props.deleteDoc(this.props.document);
 
-    @undoBatch openRight = () => {
+    @undoBatch openRight = async () => {
         if (this.props.document.dockingConfig) {
             Main.Instance.openWorkspace(this.props.document);
         } else {
@@ -63,6 +63,10 @@ class TreeView extends React.Component<TreeViewProps> {
         return Cast(this.props.document.data, listSpec(Doc), []); // bcz: needed?    .filter(doc => FieldValue(doc));
     }
 
+    onPointerDown = (e: React.PointerEvent) => {
+        e.stopPropagation();
+    }
+
     @action
     remove = (document: Document) => {
         let children = Cast(this.props.document.data, listSpec(Doc), []);
@@ -109,11 +113,18 @@ class TreeView extends React.Component<TreeViewProps> {
                     return true;
                 }}
             />);
+        let dataDocs = Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc), []);
+        let openRight = dataDocs && dataDocs.indexOf(this.props.document) !== -1 ? (null) : (
+            <div className="treeViewItem-openRight" onPointerDown={this.onPointerDown} onClick={this.openRight}>
+                <FontAwesomeIcon icon="angle-right" size="lg" />
+                <FontAwesomeIcon icon="angle-right" size="lg" />
+            </div>);
         return (
             <div className="docContainer" ref={reference} onPointerDown={onItemDown}
+                style={{ background: BoolCast(this.props.document.libraryBrush, false) ? "#06121212" : "0" }}
                 onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
                 {editableView(StrCast(this.props.document.title))}
-                <div className="treeViewItem-openRight" onClick={this.openRight}><FontAwesomeIcon icon="angle-right" size="lg" /><FontAwesomeIcon icon="angle-right" size="lg" /></div>
+                {openRight}
                 {/* {<div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div>} */}
             </div >);
     }
@@ -156,7 +167,6 @@ class TreeView extends React.Component<TreeViewProps> {
             }
         });
         return <div className="treeViewItem-container"
-            style={{ background: BoolCast(this.props.document.libraryBrush, false) ? "#06121212" : "0" }}
             onContextMenu={this.onWorkspaceContextMenu}>
             <li className="collection-child">
                 {this.renderBullet(bulletType)}
diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx
index 3fab10df4..b521d5ce6 100644
--- a/src/client/views/nodes/IconBox.tsx
+++ b/src/client/views/nodes/IconBox.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, observable, runInAction } from "mobx";
+import { action, computed, observable, runInAction, reaction, IReactionDisposer } from "mobx";
 import { observer } from "mobx-react";
 import { SelectionManager } from "../../util/SelectionManager";
 import { FieldView, FieldViewProps } from './FieldView';
@@ -25,6 +25,17 @@ library.add(faFilm);
 @observer
 export class IconBox extends React.Component<FieldViewProps> {
     public static LayoutString() { return FieldView.LayoutString(IconBox); }
+    _reactionDisposer?: IReactionDisposer;
+    componentDidMount() {
+        this._reactionDisposer = reaction(() => [this.props.Document.maximizedDocs],
+            () => {
+                let maxDoc = Cast(this.props.Document.maximizedDocs, listSpec(Doc), []);
+                this.props.Document.title = maxDoc && (maxDoc.length === 1 ? maxDoc[0].title + ".icon" : "");
+            }, { fireImmediately: true });
+    }
+    componentWillUnmount() {
+        if (this._reactionDisposer) this._reactionDisposer();
+    }
 
     @computed get layout(): string { const field = Cast(this.props.Document[this.props.fieldKey], IconField); return field ? field.icon : "<p>Error loading icon data</p>"; }
     @computed get minimizedIcon() { return IconBox.DocumentIcon(this.layout); }
@@ -52,6 +63,7 @@ export class IconBox extends React.Component<FieldViewProps> {
     @observable _panelWidth: number = 0;
     @observable _panelHeight: number = 0;
     render() {
+        let title = this._title;
         let labelField = StrCast(this.props.Document.labelField);
         let hideLabel = BoolCast(this.props.Document.hideLabel);
         let maxDoc = Cast(this.props.Document.maximizedDocs, listSpec(Doc), []);
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 70dd8361b..38c220bc8 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -220,7 +220,6 @@ export namespace Doc {
             return undefined;
         }
         const delegate = new Doc();
-        //TODO Does this need to be doc[Self]?
         delegate.proto = doc;
         return delegate;
     }
-- 
cgit v1.2.3-70-g09d2


From 8ed190ae29f90442c3589ee692578150b8ad8667 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 6 May 2019 15:39:14 -0400
Subject: switched to alt key for toggling how minimized views appear

---
 src/client/views/collections/CollectionDockingView.tsx    | 5 +++--
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 5 ++---
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 05c467763..d894909d0 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -134,8 +134,9 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             newContentItem.config.width = 50;
         }
         if (minimize) {
-            newContentItem.config.width = 10;
-            newContentItem.config.height = 10;
+            // bcz: this makes the drag image show up better, but it also messes with fixed layout sizes
+            // newContentItem.config.width = 10;
+            // newContentItem.config.height = 10;
         }
         newContentItem.callDownwards('_$init');
         this.layoutChanged();
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 24a75049a..91ef1e59d 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -162,14 +162,13 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
     onClick = async (e: React.MouseEvent) => {
         e.stopPropagation();
-        let ctrlKey = e.ctrlKey;
-        let metaKey = e.metaKey;
+        let altKey = e.altKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
             if (BoolCast(this.props.Document.isButton, false)) {
                 let maximizedDocs = await DocListCast(this.props.Document.maximizedDocs);
                 if (maximizedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    if ((metaKey && !this.props.Document.maximizeOnRight) || (!metaKey && this.props.Document.maximizeOnRight)) {
+                    if ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight)) {
                         let dataDocs = await DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
                             SelectionManager.DeselectAll();
-- 
cgit v1.2.3-70-g09d2


From 911a8b6af776e58e7bf9d2653c3b604c583a458d Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 6 May 2019 15:44:26 -0400
Subject: fixed dragging document to new tab to drag an alias.

---
 src/client/views/nodes/DocumentView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9d356cc30..a20a8a93b 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -165,8 +165,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (e.shiftKey && e.buttons === 1) {
             if (this.props.isTopMost) {
                 this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey ? "alias" : undefined);
-            } else {
-                CollectionDockingView.Instance.StartOtherDrag([this.props.Document], e);
+            } else if (this.props.Document) {
+                CollectionDockingView.Instance.StartOtherDrag([Doc.MakeAlias(this.props.Document)], e);
             }
             e.stopPropagation();
         } else if (this.active) {
-- 
cgit v1.2.3-70-g09d2


From d2ec862ad60f0501a5184f9d424cc5db07b998b0 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 6 May 2019 17:26:45 -0400
Subject: Added author and creation date

---
 src/client/documents/Documents.ts    |  8 ++++++++
 src/client/views/nodes/FieldView.tsx |  3 +++
 src/new_fields/DateField.ts          | 18 ++++++++++++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 src/new_fields/DateField.ts

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 8706359e4..37d263e75 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -33,6 +33,7 @@ import { listSpec } from "../../new_fields/Schema";
 import { DocServer } from "../DocServer";
 import { StrokeData, InkField } from "../../new_fields/InkField";
 import { dropActionType } from "../util/DragManager";
+import { DateField } from "../../new_fields/DateField";
 
 export interface DocumentOptions {
     x?: number;
@@ -168,6 +169,13 @@ export namespace Docs {
 
     function CreateInstance(proto: Doc, data: Field, options: DocumentOptions) {
         const { omit: protoProps, extract: delegateProps } = OmitKeys(options, delegateKeys);
+        if (!("author" in protoProps)) {
+            protoProps.author = CurrentUserUtils.email;
+        }
+        if (!("creationDate" in protoProps)) {
+            protoProps.creationDate = new DateField;
+        }
+
         return SetDelegateOptions(SetInstanceOptions(proto, protoProps, data), delegateProps);
     }
 
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index a1e083b36..613c24fa4 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -17,6 +17,7 @@ import { List } from "../../../new_fields/List";
 import { ImageField, VideoField, AudioField } from "../../../new_fields/URLField";
 import { IconField } from "../../../new_fields/IconField";
 import { RichTextField } from "../../../new_fields/RichTextField";
+import { DateField } from "../../../new_fields/DateField";
 
 
 //
@@ -77,6 +78,8 @@ export class FieldView extends React.Component<FieldViewProps> {
         }
         else if (field instanceof AudioField) {
             return <AudioBox {...this.props} />;
+        } else if (field instanceof DateField) {
+            return <p>{field.date.toLocaleString()}</p>;
         }
         else if (field instanceof Doc) {
             return (
diff --git a/src/new_fields/DateField.ts b/src/new_fields/DateField.ts
new file mode 100644
index 000000000..c0a79f267
--- /dev/null
+++ b/src/new_fields/DateField.ts
@@ -0,0 +1,18 @@
+import { Deserializable } from "../client/util/SerializationHelper";
+import { serializable, date } from "serializr";
+import { ObjectField, Copy } from "./ObjectField";
+
+@Deserializable("date")
+export class DateField extends ObjectField {
+    @serializable(date())
+    readonly date: Date;
+
+    constructor(date: Date = new Date()) {
+        super();
+        this.date = date;
+    }
+
+    [Copy]() {
+        return new DateField(this.date);
+    }
+}
-- 
cgit v1.2.3-70-g09d2


From 364396d9062381d72c618c5b9931267c6cc55c97 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Mon, 6 May 2019 19:37:37 -0400
Subject: things happening

---
 src/client/views/SearchBox.tsx  | 87 +++++++++++++++++++++++++++++------------
 src/client/views/SearchItem.tsx | 34 ++++++++++++++++
 2 files changed, 95 insertions(+), 26 deletions(-)
 create mode 100644 src/client/views/SearchItem.tsx

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 0670360a2..2fd809d9e 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -12,6 +12,9 @@ import { actionFieldDecorator } from 'mobx/lib/internal';
 // const app = express();
 // import * as express from 'express';
 import { Search } from '../../server/Search';
+import * as rp from 'request-promise';
+import { Document } from '../../fields/Document';
+import { SearchItem } from './SearchItem';
 
 
 library.add(faSearch);
@@ -23,43 +26,74 @@ export class SearchBox extends React.Component {
 
     @observable private _open: boolean = false;
 
+    @observable
+    private _results: any;
+
+    constructor(props: any) {
+        super(props);
+        let searchInput = document.getElementById("input");
+        if (searchInput) {
+            searchInput.addEventListener("keydown", this.onKeyPress)
+        }
+    }
+
+    //this is not working?????
+    @action
+    onKeyPress = (e: KeyboardEvent) => {
+        console.log('things happening')
+        //Number 13 is the "Enter" key on the keyboard
+        if (e.keyCode === 13) {
+            console.log("happi")
+            // Cancel the default action, if needed
+            e.preventDefault();
+            // Trigger the button element with a click
+            let btn = document.getElementById("submit");
+            if (btn) {
+                console.log("yesyesyes")
+                btn.click();
+            }
+        }
+    }
+
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this.searchString = e.target.value;
+    };
 
-    }
-
-    submitSearch = () => {
-        // Utils.EmitCallback(Server.Socket, MessageStore.SearchFor, this.searchString, (results: string[]) => {
-        //     for (const result of results) {
-        //         console.log(result);
-        //         //Utils.GetQueryVariable();
-        //     }
-        // });
+    submitSearch = async () => {
 
         let query = this.searchString;
-        console.log(query);
-        //something bad is happening here
-        let results = Search.Instance.search(query);
-        console.log(results);
-
-        // app.get("/search", async (req, res) => {
-        //     //let query = req.query.query || "hello";
-        //     let query = this.searchString;
-        //     let results = await Search.Instance.search(query);
-        //     res.send(results);
-        // });
+
+        let response = await rp.get('http://localhost:1050/search', {
+            qs: {
+                query
+            }
+        });
+
+        let results = JSON.parse(response);
+
+        this._results = results;
+
+        let doc = await Server.GetField(this._results[1]);
+        if (doc instanceof Document) {
+            console.log("doc");
+            console.log(doc.Title);
+        }
+
+        // console.log("results")
+        // console.log(results);
+        // console.log("type")
+        // console.log(results.type)
+        console.log(this._results);
+
+
     }
 
     @action
     handleClick = (e: Event): void => {
         var className = (e.target as any).className;
         var id = (e.target as any).id;
-        console.log(id);
-        //let imgPrev = document.getElementById("img_preview");
-        console.log(className);
         if (className !== "filter-button" && className !== "filter-form") {
-            console.log("false");
             this._open = false;
         }
 
@@ -85,12 +119,13 @@ export class SearchBox extends React.Component {
                     {/* <input value={this.searchString} onChange={this.onChange} />
                 <button onClick={this.submitSearch} /> */}
 
-                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" />
+                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" />
                     {/* {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
                     map(prop => <ContextMenuItem {...prop} key={prop.description} />)} */}
+                    {/* {this._results.map(doc => <SearchItem {...doc} key={doc.Title} />)} */}
 
                     <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
-                    <div className="submit-search" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
+                    <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
                 </div>
                 <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
                     <div className="filter-form" id="header">Filter Search Results</div>
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
new file mode 100644
index 000000000..f030e011b
--- /dev/null
+++ b/src/client/views/SearchItem.tsx
@@ -0,0 +1,34 @@
+import React = require("react");
+import { Document } from "../../fields/Document";
+
+export interface SearchProps {
+    doc: Document;
+    //description: string;
+    //event: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+// export interface SubmenuProps {
+//     description: string;
+//     subitems: ContextMenuProps[];
+// }
+
+// export interface ContextMenuItemProps {
+//     type: ContextMenuProps | SubmenuProps;
+// }
+
+
+
+export class SearchItem extends React.Component<SearchProps> {
+
+    onClick = () => {
+        console.log("clicked search item");
+    };
+
+    render() {
+        return (
+            <div className="search-item" onClick={this.onClick}>
+                <div className="search-title">{this.props.doc.Title}</div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From ad74425473aa76e718ea3b35d38b5f3b7ca358e1 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 6 May 2019 19:59:04 -0400
Subject: Changed some types to be more correct for lists

---
 src/new_fields/Doc.ts   | 8 +++++---
 src/new_fields/Types.ts | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 38c220bc8..afcf71fc9 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -29,9 +29,11 @@ const SelfProxy = Symbol("SelfProxy");
 export const WidthSym = Symbol("Width");
 export const HeightSym = Symbol("Height");
 
-export function DocListCast(field: FieldResult) {
-    const list = Cast(field, listSpec(Doc))
-    return list ? Promise.all(list) : Promise.resolve(undefined);
+export function DocListCast(field: FieldResult): Promise<Doc[] | undefined>;
+export function DocListCast(field: FieldResult, defaultValue: Doc[]): Promise<Doc[]>;
+export function DocListCast(field: FieldResult, defaultValue?: Doc[]) {
+    const list = Cast(field, listSpec(Doc));
+    return list ? Promise.all(list) : Promise.resolve(defaultValue);
 }
 
 @Deserializable("doc").withFields(["id"])
diff --git a/src/new_fields/Types.ts b/src/new_fields/Types.ts
index c07d38786..4b4c58eb8 100644
--- a/src/new_fields/Types.ts
+++ b/src/new_fields/Types.ts
@@ -1,5 +1,6 @@
 import { Field, Opt, FieldResult, Doc } from "./Doc";
 import { List } from "./List";
+import { RefField } from "./RefField";
 
 export type ToType<T extends ToConstructor<Field> | ListSpec<Field>> =
     T extends "string" ? string :
@@ -71,7 +72,7 @@ export function BoolCast(field: FieldResult, defaultVal: boolean | null = null)
     return Cast(field, "boolean", defaultVal);
 }
 
-type WithoutList<T extends Field> = T extends List<infer R> ? R[] : T;
+type WithoutList<T extends Field> = T extends List<infer R> ? (R extends RefField ? (R | Promise<R>)[] : R[]) : T;
 
 export function FieldValue<T extends Field, U extends WithoutList<T>>(field: FieldResult<T>, defaultValue: U): WithoutList<T>;
 export function FieldValue<T extends Field>(field: FieldResult<T>): Opt<T>;
-- 
cgit v1.2.3-70-g09d2


From b87ad40e0b5c41c5d078f1c4af9827d14af0daaf Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 6 May 2019 22:16:32 -0400
Subject: cleaned up brushing a little.

---
 .../CollectionFreeFormLinksView.tsx                | 92 +++++++++++-----------
 1 file changed, 45 insertions(+), 47 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index b34e0856e..a00051166 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -7,7 +7,7 @@ import { CollectionViewProps } from "../CollectionSubView";
 import "./CollectionFreeFormLinksView.scss";
 import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView";
 import React = require("react");
-import { Doc } from "../../../../new_fields/Doc";
+import { Doc, DocListCast } from "../../../../new_fields/Doc";
 import { Cast, FieldValue, NumCast, StrCast } from "../../../../new_fields/Types";
 import { listSpec } from "../../../../new_fields/Schema";
 import { List } from "../../../../new_fields/List";
@@ -18,59 +18,57 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
 
     _brushReactionDisposer?: IReactionDisposer;
     componentDidMount() {
-        this._brushReactionDisposer = reaction(() => Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).map(doc => NumCast(doc.x)),
+        this._brushReactionDisposer = reaction(
             () => {
-                let views = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).filter(doc => StrCast(doc.backgroundLayout, "").indexOf("istogram") !== -1);
-                for (let i = 0; i < views.length; i++) {
-                    for (let j = 0; j < views.length; j++) {
-                        let srcDoc = views[j];
-                        let dstDoc = views[i];
+                let doclist = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []);
+                return { doclist: doclist ? doclist : [], xs: doclist instanceof List ? doclist.map(d => d instanceof Doc && d.x) : [] };
+            },
+            async () => {
+                let doclist = await DocListCast(this.props.Document[this.props.fieldKey]);
+                let views = doclist ? doclist.filter(doc => StrCast(doc.backgroundLayout).indexOf("istogram") === -1) : [];
+                views.forEach((dstDoc, i) => {
+                    views.forEach((srcDoc, j) => {
+                        let dstTarg = dstDoc;
+                        let srcTarg = srcDoc;
                         let x1 = NumCast(srcDoc.x);
-                        let x1w = NumCast(srcDoc.width, -1);
                         let x2 = NumCast(dstDoc.x);
+                        let x1w = NumCast(srcDoc.width, -1);
                         let x2w = NumCast(dstDoc.width, -1);
-                        if (x1w < 0 || x2w < 0 || i === j) {
-                            continue;
-                        }
-                        let dstTarg = dstDoc;
-                        let srcTarg = srcDoc;
-                        let findBrush = (field: List<Doc>) => field.findIndex(brush => {
-                            let bdocs = brush ? Cast(brush.brushingDocs, listSpec(Doc), []) : [];
-                            return (bdocs.length && ((bdocs[0] === dstTarg && bdocs[1] === srcTarg)) ? true : false);
-                        });
-                        let brushAction = (field: List<Doc>) => {
-                            let found = findBrush(field);
-                            if (found !== -1) {
-                                console.log("REMOVE BRUSH " + srcTarg.Title + " " + dstTarg.Title);
-                                field.splice(found, 1);
-                            }
-                        };
-                        if (Math.abs(x1 + x1w - x2) < 20) {
-                            let linkDoc: Doc = new Doc();
-                            linkDoc.title = "Histogram Brush";
-                            linkDoc.linkDescription = "Brush between " + StrCast(srcTarg.title) + " and " + StrCast(dstTarg.Title);
-                            linkDoc.brushingDocs = new List([dstTarg, srcTarg]);
-
-                            brushAction = (field: List<Doc>) => {
-                                if (findBrush(field) === -1) {
-                                    console.log("ADD BRUSH " + srcTarg.Title + " " + dstTarg.Title);
-                                    (findBrush(field) === -1) && field.push(linkDoc);
+                        if (x1w < 0 || x2w < 0 || i === j) { }
+                        else {
+                            let findBrush = (field: (Doc | Promise<Doc>)[]) => field.findIndex(brush => {
+                                let bdocs = brush instanceof Doc ? Cast(brush.brushingDocs, listSpec(Doc), []) : undefined;
+                                return bdocs && bdocs.length && ((bdocs[0] === dstTarg && bdocs[1] === srcTarg)) ? true : false;
+                            });
+                            let brushAction = (field: (Doc | Promise<Doc>)[]) => {
+                                let found = findBrush(field);
+                                if (found !== -1) {
+                                    console.log("REMOVE BRUSH " + srcTarg.title + " " + dstTarg.title);
+                                    field.splice(found, 1);
                                 }
                             };
-                        }
-                        let dstBrushDocs = Cast(dstTarg.brushingDocs, listSpec(Doc));
-                        if (dstBrushDocs === undefined) {
-                            dstTarg.brushingDocs = dstBrushDocs = new List<Doc>();
-                        }
-                        let srcBrushDocs = Cast(srcTarg.brushingDocs, listSpec(Doc));
-                        if (srcBrushDocs === undefined) {
-                            srcTarg.brushingDocs = srcBrushDocs = new List<Doc>();
-                        }
-                        brushAction(dstBrushDocs);
-                        brushAction(srcBrushDocs);
+                            if (Math.abs(x1 + x1w - x2) < 20) {
+                                let linkDoc: Doc = new Doc();
+                                linkDoc.title = "Histogram Brush";
+                                linkDoc.linkDescription = "Brush between " + StrCast(srcTarg.title) + " and " + StrCast(dstTarg.Title);
+                                linkDoc.brushingDocs = new List([dstTarg, srcTarg]);
 
-                    }
-                }
+                                brushAction = (field: (Doc | Promise<Doc>)[]) => {
+                                    if (findBrush(field) === -1) {
+                                        console.log("ADD BRUSH " + srcTarg.title + " " + dstTarg.title);
+                                        field.push(linkDoc);
+                                    }
+                                };
+                            }
+                            let dstBrushDocs = Cast(dstTarg.brushingDocs, listSpec(Doc), []);
+                            let srcBrushDocs = Cast(srcTarg.brushingDocs, listSpec(Doc), []);
+                            if (dstBrushDocs === undefined) dstTarg.brushingDocs = dstBrushDocs = new List<Doc>();
+                            else brushAction(dstBrushDocs);
+                            if (srcBrushDocs === undefined) srcTarg.brushingDocs = srcBrushDocs = new List<Doc>();
+                            else brushAction(srcBrushDocs);
+                        }
+                    })
+                })
             });
     }
     componentWillUnmount() {
-- 
cgit v1.2.3-70-g09d2


From 64095f454fba618d89725438668bcb27740f3e78 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 6 May 2019 22:34:08 -0400
Subject: from last

---
 .../collections/collectionFreeForm/CollectionFreeFormLinksView.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index a00051166..2d815a302 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -25,7 +25,7 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
             },
             async () => {
                 let doclist = await DocListCast(this.props.Document[this.props.fieldKey]);
-                let views = doclist ? doclist.filter(doc => StrCast(doc.backgroundLayout).indexOf("istogram") === -1) : [];
+                let views = doclist ? doclist.filter(doc => StrCast(doc.backgroundLayout).indexOf("istogram") !== -1) : [];
                 views.forEach((dstDoc, i) => {
                     views.forEach((srcDoc, j) => {
                         let dstTarg = dstDoc;
-- 
cgit v1.2.3-70-g09d2


From 5aa66529751fb638d8f6b721ab1606fb9dc48d3f Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 6 May 2019 22:53:52 -0400
Subject: fixed icon box titles.  fixed artifact related to maximizing icons.

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx |  3 ++-
 src/client/views/nodes/IconBox.tsx                        | 15 +++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 91ef1e59d..f1083f859 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -9,7 +9,7 @@ import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schem
 import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
 import { OmitKeys, Utils } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
-import { Doc, DocListCast } from "../../../new_fields/Doc";
+import { Doc, DocListCast, HeightSym } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 
@@ -148,6 +148,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     if (minx !== undefined && miny !== undefined && maxx !== undefined && maxy !== undefined &&
                         maxw !== undefined && maxh !== undefined) {
                         let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(minx, miny);
+                        maximizedDoc.width = maximizedDoc.height = 1;
                         maximizedDoc.isMinimized = false;
                         maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), isMinimized ? 1 : 0])
                     }
diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx
index b521d5ce6..19abec4af 100644
--- a/src/client/views/nodes/IconBox.tsx
+++ b/src/client/views/nodes/IconBox.tsx
@@ -2,13 +2,12 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, observable, runInAction, reaction, IReactionDisposer } from "mobx";
+import { computed, observable, runInAction, reaction, IReactionDisposer } from "mobx";
 import { observer } from "mobx-react";
-import { SelectionManager } from "../../util/SelectionManager";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./IconBox.scss";
 import { Cast, StrCast, BoolCast } from "../../../new_fields/Types";
-import { Doc, WidthSym, HeightSym } from "../../../new_fields/Doc";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { IconField } from "../../../new_fields/IconField";
 import { ContextMenu } from "../ContextMenu";
 import Measure from "react-measure";
@@ -28,9 +27,9 @@ export class IconBox extends React.Component<FieldViewProps> {
     _reactionDisposer?: IReactionDisposer;
     componentDidMount() {
         this._reactionDisposer = reaction(() => [this.props.Document.maximizedDocs],
-            () => {
-                let maxDoc = Cast(this.props.Document.maximizedDocs, listSpec(Doc), []);
-                this.props.Document.title = maxDoc && (maxDoc.length === 1 ? maxDoc[0].title + ".icon" : "");
+            async () => {
+                let maxDoc = await DocListCast(this.props.Document.maximizedDocs);
+                this.props.Document.title = (maxDoc && maxDoc.length === 1 ? maxDoc[0].title + ".icon" : "");
             }, { fireImmediately: true });
     }
     componentWillUnmount() {
@@ -63,11 +62,11 @@ export class IconBox extends React.Component<FieldViewProps> {
     @observable _panelWidth: number = 0;
     @observable _panelHeight: number = 0;
     render() {
-        let title = this._title;
         let labelField = StrCast(this.props.Document.labelField);
         let hideLabel = BoolCast(this.props.Document.hideLabel);
         let maxDoc = Cast(this.props.Document.maximizedDocs, listSpec(Doc), []);
-        let label = !hideLabel && maxDoc && labelField ? (maxDoc.length === 1 ? maxDoc[0][labelField] : this.props.Document[labelField]) : "";
+        let firstDoc = maxDoc && maxDoc.length > 0 && maxDoc[0] instanceof Doc ? maxDoc[0] as Doc : undefined;
+        let label = !hideLabel && firstDoc && labelField ? firstDoc[labelField] : "";
         return (
             <div className="iconBox-container" onContextMenu={this.specificContextMenu}>
                 {this.minimizedIcon}
-- 
cgit v1.2.3-70-g09d2


From 4ba63508738ec7ea68d7e8a9a7932c2e764ac545 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 6 May 2019 23:25:25 -0400
Subject: fixed undo for minimizing docs

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index f1083f859..c4f85847a 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -12,6 +12,7 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { Doc, DocListCast, HeightSym } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { undoBatch, UndoManager } from "../../util/UndoManager";
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 }
@@ -95,6 +96,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
 
     animateBetweenIcon(first: boolean, icon: number[], targ: number[], width: number, height: number, stime: number, target: Doc, maximizing: boolean) {
+        if (first) {
+            if (maximizing) target.width = target.height = 1;
+        }
         setTimeout(() => {
             let now = Date.now();
             let progress = Math.min(1, (now - stime) / 200);
@@ -133,6 +137,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         }
         if (minimizedDoc && maximizedDocs) {
             let minimizedTarget = minimizedDoc;
+            CollectionFreeFormDocumentView._undoBatch = UndoManager.StartBatch("iconAnimating");
             maximizedDocs.forEach(maximizedDoc => {
                 let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
                 if (!iconAnimating || (Date.now() - iconAnimating[6] > 1000)) {
@@ -148,14 +153,18 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     if (minx !== undefined && miny !== undefined && maxx !== undefined && maxy !== undefined &&
                         maxw !== undefined && maxh !== undefined) {
                         let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(minx, miny);
-                        maximizedDoc.width = maximizedDoc.height = 1;
                         maximizedDoc.isMinimized = false;
                         maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), isMinimized ? 1 : 0])
                     }
                 }
             });
+            setTimeout(() => {
+                CollectionFreeFormDocumentView._undoBatch && CollectionFreeFormDocumentView._undoBatch.end();
+                CollectionFreeFormDocumentView._undoBatch = undefined;
+            }, 500);
         }
     }
+    static _undoBatch?: UndoManager.Batch = undefined;
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-- 
cgit v1.2.3-70-g09d2


From 337335bc3f7daa61ca9116feaec85882ffd0853a Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 6 May 2019 23:50:59 -0400
Subject: added some undo support for creating and editing text boxes

---
 .../views/collections/collectionFreeForm/MarqueeView.tsx    |  5 ++++-
 src/client/views/nodes/FormattedTextBox.tsx                 | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 805921ad4..0484c181e 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { Docs } from "../../../documents/Documents";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { Transform } from "../../../util/Transform";
-import { undoBatch } from "../../../util/UndoManager";
+import { undoBatch, UndoManager } from "../../../util/UndoManager";
 import { InkingCanvas } from "../../InkingCanvas";
 import { PreviewCursor } from "../../PreviewCursor";
 import { CollectionFreeFormView } from "./CollectionFreeFormView";
@@ -17,6 +17,8 @@ import { Templates } from "../../Templates";
 import { List } from "../../../../new_fields/List";
 import { emitKeypressEvents } from "readline";
 import { listSpec } from "../../../../new_fields/Schema";
+import { undo } from "prosemirror-history";
+import { FormattedTextBox } from "../../nodes/FormattedTextBox";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -50,6 +52,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         this._visible = false;
     }
 
+    @undoBatch
     @action
     onKeyPress = (e: KeyboardEvent) => {
         //make textbox and add it to this collection
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 65b8b805f..ffd68fd48 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -23,6 +23,7 @@ import { InkingControl } from "../InkingControl";
 import { StrCast, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
 import { RichTextField } from "../../../new_fields/RichTextField";
 import { Id } from "../../../new_fields/RefField";
+import { UndoManager } from "../../util/UndoManager";
 const { buildMenuItems } = require("prosemirror-example-setup");
 const { menuBar } = require("prosemirror-menu");
 
@@ -271,7 +272,13 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             }
         });
     }
-
+    onBlur = (e: any) => {
+        if (this._undoTyping) {
+            this._undoTyping.end();
+            this._undoTyping = undefined;
+        }
+    }
+    public _undoTyping?: UndoManager.Batch;
     onKeyPress = (e: React.KeyboardEvent) => {
         if (e.key === "Escape") {
             SelectionManager.DeselectAll();
@@ -287,6 +294,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             let target = this.props.Document.proto ? this.props.Document.proto : this.props.Document;
             target.title = "-" + titlestr + (str.length > 40 ? "..." : "");
         }
+        if (!this._undoTyping) {
+            this._undoTyping = UndoManager.StartBatch("undoTyping");
+        }
     }
     render() {
         let style = this.props.isOverlay ? "scroll" : "hidden";
@@ -303,6 +313,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 onKeyPress={this.onKeyPress}
                 onFocus={this.onFocused}
                 onClick={this.onClick}
+                onBlur={this.onBlur}
                 onPointerUp={this.onPointerUp}
                 onPointerDown={this.onPointerDown}
                 onMouseDown={this.onMouseDown}
-- 
cgit v1.2.3-70-g09d2


From 5ffd715a2ce6c25daff22410ed9b6b009e8938d3 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 7 May 2019 00:21:03 -0400
Subject: playing with templates for text.  weird stuff happens 50% of the time
 with text typing backward.

---
 src/client/views/DocumentDecorations.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 693d6ec55..e2f445874 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -78,11 +78,15 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 if (SelectionManager.SelectedDocuments().length > 0) {
                     let field = SelectionManager.SelectedDocuments()[0].props.Document[this._fieldKey];
                     if (typeof field === "number") {
-                        SelectionManager.SelectedDocuments().forEach(d =>
-                            d.props.Document[this._fieldKey] = +this._title);
+                        SelectionManager.SelectedDocuments().forEach(d => {
+                            let doc = d.props.Document.proto ? d.props.Document.proto : d.props.Document;
+                            doc[this._fieldKey] = +this._title;
+                        });
                     } else {
-                        SelectionManager.SelectedDocuments().forEach(d =>
-                            d.props.Document[this._fieldKey] = this._title);
+                        SelectionManager.SelectedDocuments().forEach(d => {
+                            let doc = d.props.Document.proto ? d.props.Document.proto : d.props.Document;
+                            doc[this._fieldKey] = this._title;
+                        });
                     }
                 }
             }
-- 
cgit v1.2.3-70-g09d2


From 20f31796ed6f6c9fb71fa80cf858a7ac353300cf Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 7 May 2019 00:22:01 -0400
Subject: from last

---
 src/client/views/Templates.tsx | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 5858ee014..738272913 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -51,24 +51,22 @@ export namespace Templates {
     );
 
     export const Title = new Template("Title", TemplatePosition.InnerTop,
-        `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div><div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.title}</div></div>`
+        `<div><div style="height:calc(100% - 25px); margin-top: 25px; width:100%;position:absolute;">{layout}</div>
+        <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.title}</div></div>`
     );
     export const Summary = new Template("Title", TemplatePosition.InnerTop,
-        `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div><div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.doc1.title}</div></div>`
+        `<div style="height:100%; width:100%;position:absolute; margin:0; padding: 0">
+            <div style="height:60%; width:100%;position:absolute;background:yellow; padding:0; margin:0">
+                {layout}
+            </div>
+            <div style="bottom:0px; height:40%; width:50%; position:absolute; background-color: rgba(0, 0, 0, .4); color: white;">
+                <FieldView {...props} fieldKey={"doc1"} />
+            </div>
+            <div style="bottom:0; left: 50%; height:40%; width:50%; position:absolute; background-color: rgba(0, 0, 0, .4); color: white;">
+                <FieldView {...props} fieldKey={"doc2"} />
+            </div>
+        </div>`
     );
-    // export const Summary = new Template("Title", TemplatePosition.InnerTop,
-    //     `<div style="height:100%; width:100%;position:absolute; margin:0; padding: 0">
-    //         <div style="height:60%; width:100%;position:absolute;background:yellow; padding:0; margin:0">
-    //             {layout}
-    //         </div>
-    //         <div style="bottom:0px; height:40%; width:50%; position:absolute; background-color: rgba(0, 0, 0, .4); color: white;">
-    //             <FieldView {...props} fieldKey={"doc1"} />
-    //         </div>
-    //         <div style="bottom:0; left: 50%; height:40%; width:50%; position:absolute; background-color: rgba(0, 0, 0, .4); color: white;">
-    //             <FieldView {...props} fieldKey={"doc2"} />
-    //         </div>
-    //     </div>`
-    // );
 
     export const TemplateList: Template[] = [Title, OuterCaption, InnerCaption, SideCaption];
 
-- 
cgit v1.2.3-70-g09d2


From 3b012d7555c0f32b88a2506b1f474262df5a5f2d Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 7 May 2019 01:10:34 -0400
Subject: very minor stuff

---
 .../collections/collectionFreeForm/CollectionFreeFormLinksView.tsx    | 4 ++--
 src/new_fields/util.ts                                                | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 2d815a302..1c62db862 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -67,8 +67,8 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
                             if (srcBrushDocs === undefined) srcTarg.brushingDocs = srcBrushDocs = new List<Doc>();
                             else brushAction(srcBrushDocs);
                         }
-                    })
-                })
+                    });
+                });
             });
     }
     componentWillUnmount() {
diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts
index bbd8157f6..a5f5e368b 100644
--- a/src/new_fields/util.ts
+++ b/src/new_fields/util.ts
@@ -56,6 +56,7 @@ export function getter(target: any, prop: string | symbol | number, receiver: an
     return getField(target, prop);
 }
 
+//TODO The callback parameter is never being passed in currently, so we should be able to get rid of it.
 export function getField(target: any, prop: string | number, ignoreProto: boolean = false, callback?: (field: Field | undefined) => void): any {
     const field = target.__fields[prop];
     if (field instanceof ProxyField) {
-- 
cgit v1.2.3-70-g09d2


From c3e613aebc056fd75bb1a5b3ac95f2367532b098 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 7 May 2019 13:11:13 -0400
Subject: type issues??

---
 src/client/views/SearchBox.tsx  | 87 ++++++++++++++++++++++++++---------------
 src/client/views/SearchItem.tsx |  2 +-
 2 files changed, 56 insertions(+), 33 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 2fd809d9e..eb3cd56fd 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -15,6 +15,7 @@ import { Search } from '../../server/Search';
 import * as rp from 'request-promise';
 import { Document } from '../../fields/Document';
 import { SearchItem } from './SearchItem';
+import { isString } from 'util';
 
 
 library.add(faSearch);
@@ -26,40 +27,41 @@ export class SearchBox extends React.Component {
 
     @observable private _open: boolean = false;
 
-    @observable
-    private _results: any;
-
-    constructor(props: any) {
-        super(props);
-        let searchInput = document.getElementById("input");
-        if (searchInput) {
-            searchInput.addEventListener("keydown", this.onKeyPress)
-        }
-    }
-
-    //this is not working?????
-    @action
-    onKeyPress = (e: KeyboardEvent) => {
-        console.log('things happening')
-        //Number 13 is the "Enter" key on the keyboard
-        if (e.keyCode === 13) {
-            console.log("happi")
-            // Cancel the default action, if needed
-            e.preventDefault();
-            // Trigger the button element with a click
-            let btn = document.getElementById("submit");
-            if (btn) {
-                console.log("yesyesyes")
-                btn.click();
-            }
-        }
-    }
+    //@observable
+    private _results: Document[] = [];
+
+    // constructor(props: any) {
+    //     super(props);
+    //     let searchInput = document.getElementById("input");
+    //     if (searchInput) {
+    //         // searchInput.addEventListener("keydown", this.onKeyPress)
+    //     }
+    // }
+
+    // //this is not working?????
+    // @action
+    // onKeyPress = (e: KeyboardEvent) => {
+    //     console.log('things happening')
+    //     //Number 13 is the "Enter" key on the keyboard
+    //     if (e.keyCode === 13) {
+    //         console.log("happi")
+    //         // Cancel the default action, if needed
+    //         e.preventDefault();
+    //         // Trigger the button element with a click
+    //         let btn = document.getElementById("submit");
+    //         if (btn) {
+    //             console.log("yesyesyes")
+    //             btn.click();
+    //         }
+    //     }
+    // }
 
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this.searchString = e.target.value;
-    };
+    }
 
+    //@action
     submitSearch = async () => {
 
         let query = this.searchString;
@@ -74,17 +76,38 @@ export class SearchBox extends React.Component {
 
         this._results = results;
 
-        let doc = await Server.GetField(this._results[1]);
+        let doc = await Server.GetField(results[1]);
         if (doc instanceof Document) {
             console.log("doc");
             console.log(doc.Title);
         }
 
+        // weird things happening
         // console.log("results")
         // console.log(results);
         // console.log("type")
         // console.log(results.type)
-        console.log(this._results);
+        let temp: string = this._results[1].Id;
+        // console.log(this._results)
+        // console.log(this._results[1])
+
+        console.log(this._results[1].constructor.name)
+
+        if (this._results[1] instanceof Document) {
+            console.log("is a doc")
+        }
+
+        if (this._results[1]) {
+            console.log("is a string")
+        }
+
+        console.log(temp);
+        let doc2 = await Server.GetField(temp);
+        console.log(doc2);
+        if (doc2 instanceof Document) {
+            console.log("doc2");
+            console.log(doc2.Title);
+        }
 
 
     }
@@ -122,7 +145,7 @@ export class SearchBox extends React.Component {
                     <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" />
                     {/* {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
                     map(prop => <ContextMenuItem {...prop} key={prop.description} />)} */}
-                    {/* {this._results.map(doc => <SearchItem {...doc} key={doc.Title} />)} */}
+                    {this._results.map(doc => <SearchItem {...doc} key={doc.Title} />)}
 
                     <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
                     <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index f030e011b..c8fd6457b 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -22,7 +22,7 @@ export class SearchItem extends React.Component<SearchProps> {
 
     onClick = () => {
         console.log("clicked search item");
-    };
+    }
 
     render() {
         return (
-- 
cgit v1.2.3-70-g09d2


From dc9275ec0308ecca1246942a1cf9ef342e9e3300 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 7 May 2019 13:48:49 -0400
Subject: changed css for text background colors. made api to add text to new
 textboxes..  added ctrl-q to paste text in boxes based on "paragraph"
 recognition rules.

---
 src/client/documents/Documents.ts                  |  2 +-
 src/client/views/PreviewCursor.tsx                 |  2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx | 23 ++++++++++++++++++++--
 src/client/views/globalCssVariables.scss           |  2 +-
 src/client/views/nodes/FormattedTextBox.scss       |  2 +-
 src/client/views/nodes/FormattedTextBox.tsx        |  5 +++++
 6 files changed, 30 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 37d263e75..a770ccc93 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -132,7 +132,7 @@ export namespace Docs {
     }
     function CreateTextPrototype(): Doc {
         let textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(),
-            { x: 0, y: 0, width: 300, height: 150 });
+            { x: 0, y: 0, width: 300, height: 150, backgroundColor: "#f1efeb" });
         return textProto;
     }
     function CreatePdfPrototype(): Doc {
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 4359ba093..4ac4b9c95 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -28,7 +28,7 @@ export class PreviewCursor extends React.Component<{}> {
         //if not these keys, make a textbox if preview cursor is active!
         if (e.key.startsWith("F") && !e.key.endsWith("F")) {
         } else if (e.key != "Escape" && e.key != "Alt" && e.key != "Shift" && e.key != "Meta" && e.key != "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
-            if ((!e.ctrlKey && !e.metaKey) || e.key === "v") {
+            if ((!e.ctrlKey && !e.metaKey) || e.key === "v" || e.key === "q") {
                 PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
                 PreviewCursor.Visible = false;
             }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 0484c181e..c9b0b28f7 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -57,8 +57,27 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
     onKeyPress = (e: KeyboardEvent) => {
         //make textbox and add it to this collection
         let [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY);
-        let newBox = Docs.TextDocument({ width: 200, height: 100, x: x, y: y, title: "-typed text-" });
-        this.props.addLiveTextDocument(newBox);
+        if (e.key === "q" && e.ctrlKey) {
+            e.preventDefault();
+            (async () => {
+                let text = await navigator.clipboard.readText();
+                let ns = text.split("\n").filter(t => t != "\r");
+                for (let i = 0; i < ns.length - 1; i++) {
+                    while (!(ns[i].endsWith("-\r") || ns[i].endsWith(".\r") || ns[i].endsWith(":\r")) && i < ns.length - 1) {
+                        ns.splice(i, 2, ns[i].substr(0, ns[i].length - 1) + ns[i + 1].trimLeft());
+                    }
+                }
+                ns.map(line => {
+                    let indent = line.search(/\S|$/);
+                    let newBox = Docs.TextDocument({ width: 200, height: 35, x: x + indent / 3 * 10, y: y, documentText: "@@@" + line, title: line });
+                    this.props.addDocument(newBox, false);
+                    y += 40 * this.props.getTransform().Scale;
+                })
+            })();
+        } else {
+            let newBox = Docs.TextDocument({ width: 200, height: 100, x: x, y: y, title: "-typed text-" });
+            this.props.addLiveTextDocument(newBox);
+        }
         e.stopPropagation();
     }
     @action
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index 4f68b71b0..cb4d1ad87 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Crimson+Text:400,400i,700");
 // colors
 $light-color: #fcfbf7;
-$light-color-secondary: rgb(241, 239, 235);
+$light-color-secondary:#f1efeb;
 $main-accent: #61aaa3;
 // $alt-accent: #cdd5ec;
 // $alt-accent: #cdeceb;
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index d43aa4e02..9e58a8e7f 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -11,7 +11,7 @@
 }
 
 .formattedTextBox-cont-scroll, .formattedTextBox-cont-hidden  {
-  background: $light-color-secondary;
+  background: inherit;
   padding: 0;
   border-width: 0px;
   border-radius: inherit;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index ffd68fd48..8d2f1c780 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -151,6 +151,11 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 state: field && field.Data ? EditorState.fromJSON(config, JSON.parse(field.Data)) : EditorState.create(config),
                 dispatchTransaction: this.dispatchTransaction
             });
+            let text = StrCast(this.props.Document.documentText);
+            if (text.startsWith("@@@")) {
+                this.props.Document.proto!.documentText = undefined;
+                this._editorView.dispatch(this._editorView.state.tr.insertText(text.substr(3)));
+            }
         }
 
         if (this.props.selectOnLoad) {
-- 
cgit v1.2.3-70-g09d2


From f8f96fe4006f96459e6ad4b9889fdaefc339467e Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 7 May 2019 13:57:57 -0400
Subject: fixed calling whenActiveChanged so you can drag text box when parent
 collection is active.

---
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 17c25c9db..7fa945891 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -265,7 +265,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             ContainingCollectionView: this.props.CollectionView,
             focus: this.focusDocument,
             parentActive: this.props.active,
-            whenActiveChanged: this.props.active,
+            whenActiveChanged: this.props.whenActiveChanged,
             bringToFront: this.bringToFront,
         };
     }
@@ -274,7 +274,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     get views() {
         let curPage = FieldValue(this.Document.curPage, -1);
         let docviews = (this.children || []).filter(doc => doc).reduce((prev, doc) => {
-            if (!FieldValue(doc)) return prev;
+            if (!(doc instanceof Doc)) return prev;
             var page = NumCast(doc.page, -1);
             if (page === curPage || page === -1) {
                 let minim = Cast(doc.isMinimized, "boolean");
-- 
cgit v1.2.3-70-g09d2


From 96d9bd38cb3ae6d59945d15071e1b346e4d0a8e2 Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 7 May 2019 14:38:23 -0400
Subject: hacky way of getting search to work

---
 src/client/views/SearchBox.scss | 52 ++++++++++++++++++++++++++++++++---------
 src/client/views/SearchBox.tsx  | 52 +++++++++++------------------------------
 2 files changed, 55 insertions(+), 49 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 92363e681..1aad13b2e 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -8,18 +8,7 @@
     transition: width 0.4s ease-in-out;
     align-items: center;
 
-    .submit-search {
-        text-align: right;
-        color: $dark-color;
-        -webkit-transition: right 0.4s;
-        transition: right 0.4s;
-    }
 
-    .submit-search:hover {
-        color: $main-accent;
-        transform: scale(1.05);
-        cursor: pointer;
-    }
 
     input[type=text] {
         width: 130px;
@@ -38,6 +27,19 @@
         position: absolute;
         right: 30px;
     }
+
+    .submit-search {
+        text-align: right;
+        color: $dark-color;
+        -webkit-transition: right 0.4s;
+        transition: right 0.4s;
+    }
+
+    .submit-search:hover {
+        color: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
 }
 
 .filter-form {
@@ -60,4 +62,32 @@
 
 #option {
     height: 20px;
+}
+
+.search-item {
+    width: 500px;
+    height: 50px;
+    background: $light-color-secondary;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    transition: all 0.1s;
+    border-width: 0.11px;
+    border-style: none;
+    border-color: $intermediate-color;
+    border-bottom-style: solid;
+    padding: 10px;
+    white-space: nowrap;
+    font-size: 13px;
+}
+
+.search-item:hover {
+    transition: all 0.1s;
+    background: $lighter-alt-accent;
+}
+
+.search-title {
+    text-transform: uppercase;
+    text-align: left;
+    width: 8vw;
 }
\ No newline at end of file
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index eb3cd56fd..eecd9c8bb 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -74,42 +74,19 @@ export class SearchBox extends React.Component {
 
         let results = JSON.parse(response);
 
-        this._results = results;
-
-        let doc = await Server.GetField(results[1]);
-        if (doc instanceof Document) {
-            console.log("doc");
-            console.log(doc.Title);
-        }
-
-        // weird things happening
-        // console.log("results")
-        // console.log(results);
-        // console.log("type")
-        // console.log(results.type)
-        let temp: string = this._results[1].Id;
-        // console.log(this._results)
-        // console.log(this._results[1])
-
-        console.log(this._results[1].constructor.name)
-
-        if (this._results[1] instanceof Document) {
-            console.log("is a doc")
-        }
-
-        if (this._results[1]) {
-            console.log("is a string")
-        }
-
-        console.log(temp);
-        let doc2 = await Server.GetField(temp);
-        console.log(doc2);
-        if (doc2 instanceof Document) {
-            console.log("doc2");
-            console.log(doc2.Title);
-        }
+        //gets json result into a list of documents that can be used
+        this.getResults(results);
 
+    }
 
+    getResults = async (res: string[]) => {
+        let doc;
+        res.map(async result => {
+            doc = await Server.GetField(result);
+            if (doc instanceof Document) {
+                this._results.push(doc);
+            }
+        });
     }
 
     @action
@@ -143,10 +120,9 @@ export class SearchBox extends React.Component {
                 <button onClick={this.submitSearch} /> */}
 
                     <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" />
-                    {/* {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
-                    map(prop => <ContextMenuItem {...prop} key={prop.description} />)} */}
-                    {this._results.map(doc => <SearchItem {...doc} key={doc.Title} />)}
-
+                    <div style={this._open ? { display: "flex" } : { display: "none" }}>
+                        {this._results.map(result => <SearchItem doc={result} key={result.Id} />)}
+                    </div>
                     <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
                     <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
                 </div>
-- 
cgit v1.2.3-70-g09d2


From 26141a697ae52a7edf3cc6845ce2153111f8860e Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 7 May 2019 15:26:29 -0400
Subject: added Bullet template

---
 src/client/views/DocumentDecorations.tsx             | 15 ++++++++++++---
 src/client/views/TemplateMenu.tsx                    | 20 +++++++++++++++-----
 src/client/views/Templates.tsx                       | 18 +++++-------------
 src/client/views/collections/CollectionBaseView.tsx  | 10 +++++++---
 .../views/nodes/CollectionFreeFormDocumentView.tsx   |  9 +++++----
 5 files changed, 44 insertions(+), 28 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index e2f445874..8ae71fdc8 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -507,9 +507,18 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         }
 
         let templates: Map<Template, boolean> = new Map();
-        let doc = SelectionManager.SelectedDocuments()[0];
         Array.from(Object.values(Templates.TemplateList)).map(template => {
-            let docTemps = doc.templates;
+            let docTemps = SelectionManager.SelectedDocuments().reduce((res: string[], doc: DocumentView, i) => {
+                let temps = doc.props.Document.templates;
+                if (temps instanceof List) {
+                    temps.map(temp => {
+                        if (temp !== Templates.Bullet.Layout || i === 0) {
+                            res.push(temp);
+                        }
+                    })
+                }
+                return res
+            }, [] as string[]);
             let checked = false;
             docTemps.forEach(temp => {
                 if (template.Layout === temp) {
@@ -560,7 +569,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                             <FontAwesomeIcon className="fa-icon-link" icon="link" size="sm" />
                         </div>
                     </div>
-                    <TemplateMenu doc={doc} templates={templates} />
+                    <TemplateMenu docs={SelectionManager.SelectedDocuments()} templates={templates} />
                 </div>
             </div >
         </div>
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index f29d9c8a1..376feb5a5 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -4,6 +4,8 @@ import { observer } from "mobx-react";
 import './DocumentDecorations.scss';
 import { Template } from "./Templates";
 import { DocumentView } from "./nodes/DocumentView";
+import { List } from "../../new_fields/List";
+import { Doc } from "../../new_fields/Doc";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -25,24 +27,32 @@ class TemplateToggle extends React.Component<{ template: Template, checked: bool
 }
 
 export interface TemplateMenuProps {
-    doc: DocumentView;
+    docs: DocumentView[];
     templates: Map<Template, boolean>;
 }
 
 @observer
 export class TemplateMenu extends React.Component<TemplateMenuProps> {
-
     @observable private _hidden: boolean = true;
 
-
     @action
     toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => {
         if (event.target.checked) {
-            this.props.doc.addTemplate(template);
+            if (template.Name == "Bullet") {
+                this.props.docs[0].addTemplate(template);
+                this.props.docs[0].props.Document.maximizedDocs = new List<Doc>(this.props.docs.filter((v, i) => i !== 0).map(v => v.props.Document));
+            } else {
+                this.props.docs.map(d => d.addTemplate(template));
+            }
             this.props.templates.set(template, true);
             this.props.templates.forEach((checked, template) => console.log("Set Checked + " + checked + " " + this.props.templates.get(template)));
         } else {
-            this.props.doc.removeTemplate(template);
+            if (template.Name == "Bullet") {
+                this.props.docs[0].removeTemplate(template);
+                this.props.docs[0].props.Document.maximizedDocs = undefined;
+            } else {
+                this.props.docs.map(d => d.removeTemplate(template));
+            }
             this.props.templates.set(template, false);
             this.props.templates.forEach((checked, template) => console.log("Unset Checked + " + checked + " " + this.props.templates.get(template)));
         }
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 738272913..51fca4c41 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -54,21 +54,13 @@ export namespace Templates {
         `<div><div style="height:calc(100% - 25px); margin-top: 25px; width:100%;position:absolute;">{layout}</div>
         <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.title}</div></div>`
     );
-    export const Summary = new Template("Title", TemplatePosition.InnerTop,
-        `<div style="height:100%; width:100%;position:absolute; margin:0; padding: 0">
-            <div style="height:60%; width:100%;position:absolute;background:yellow; padding:0; margin:0">
-                {layout}
-            </div>
-            <div style="bottom:0px; height:40%; width:50%; position:absolute; background-color: rgba(0, 0, 0, .4); color: white;">
-                <FieldView {...props} fieldKey={"doc1"} />
-            </div>
-            <div style="bottom:0; left: 50%; height:40%; width:50%; position:absolute; background-color: rgba(0, 0, 0, .4); color: white;">
-                <FieldView {...props} fieldKey={"doc2"} />
-            </div>
-        </div>`
+
+    export const Bullet = new Template("Bullet", TemplatePosition.InnerTop,
+        `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div>
+        <div className="isBullet" style="height:25px; width:25px; margin-left:-25px; pointer-events:all; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px"/></div>`
     );
 
-    export const TemplateList: Template[] = [Title, OuterCaption, InnerCaption, SideCaption];
+    export const TemplateList: Template[] = [Title, OuterCaption, InnerCaption, SideCaption, Bullet];
 
     export function sortTemplates(a: Template, b: Template) {
         if (a.Position < b.Position) { return -1; }
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index cbb568c07..14b92af48 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -95,15 +95,18 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
         if (!this.createsCycle(doc, props.Document)) {
             //TODO This won't create the field if it doesn't already exist
             const value = Cast(props.Document[props.fieldKey], listSpec(Doc));
+            let alreadyAdded = true;
             if (value !== undefined) {
-                if (allowDuplicates || !value.some(v => v[Id] === doc[Id])) {
+                if (allowDuplicates || !value.some(v => v instanceof Doc && v[Id] === doc[Id])) {
+                    alreadyAdded = false;
                     value.push(doc);
                 }
             } else {
+                alreadyAdded = false;
                 Doc.SetOnPrototype(this.props.Document, this.props.fieldKey, new List([doc]));
             }
             // set the ZoomBasis only if hasn't already been set -- bcz: maybe set/resetting the ZoomBasis should be a parameter to addDocument?
-            if (this.collectionViewType === CollectionViewType.Freeform || this.collectionViewType === CollectionViewType.Invalid) {
+            if (!alreadyAdded && (this.collectionViewType === CollectionViewType.Freeform || this.collectionViewType === CollectionViewType.Invalid)) {
                 let zoom = NumCast(this.props.Document.scale, 1);
                 Doc.SetOnPrototype(doc, "zoomBasis", zoom);
             }
@@ -118,7 +121,8 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
         const value = Cast(props.Document[props.fieldKey], listSpec(Doc), []);
         let index = -1;
         for (let i = 0; i < value.length; i++) {
-            if (value[i][Id] === doc[Id]) {
+            let v = value[i];
+            if (v instanceof Doc && v[Id] === doc[Id]) {
                 index = i;
                 break;
             }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index c4f85847a..df78d92e2 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -127,6 +127,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
     @action
     public toggleIcon = async (): Promise<void> => {
+        UndoManager.GetOpenBatches().forEach(batch => console.log(batch.batchName));
         SelectionManager.DeselectAll();
         let isMinimized: boolean | undefined;
         let maximizedDocs = await DocListCast(this.props.Document.maximizedDocs);
@@ -144,8 +145,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     if (isMinimized === undefined) {
                         isMinimized = BoolCast(maximizedDoc.isMinimized, false);
                     }
-                    let minx = NumCast(minimizedTarget.x, undefined) + NumCast(minimizedTarget.width, undefined) / 2;
-                    let miny = NumCast(minimizedTarget.y, undefined) + NumCast(minimizedTarget.height, undefined) / 2;
+                    let minx = NumCast(minimizedTarget.x, undefined) + NumCast(minimizedTarget.width, undefined) * this.getTransform().Scale / 2;
+                    let miny = NumCast(minimizedTarget.y, undefined) + NumCast(minimizedTarget.height, undefined) * this.getTransform().Scale / 2;
                     let maxx = NumCast(maximizedDoc.x, undefined);
                     let maxy = NumCast(maximizedDoc.y, undefined);
                     let maxw = NumCast(maximizedDoc.width, undefined);
@@ -153,7 +154,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     if (minx !== undefined && miny !== undefined && maxx !== undefined && maxy !== undefined &&
                         maxw !== undefined && maxh !== undefined) {
                         let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(minx, miny);
-                        maximizedDoc.isMinimized = false;
+                        if (isMinimized) maximizedDoc.isMinimized = false;
                         maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), isMinimized ? 1 : 0])
                     }
                 }
@@ -175,7 +176,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         let altKey = e.altKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
-            if (BoolCast(this.props.Document.isButton, false)) {
+            if (BoolCast(this.props.Document.isButton, false) || (e.target as any).className === "isBullet") {
                 let maximizedDocs = await DocListCast(this.props.Document.maximizedDocs);
                 if (maximizedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
                     if ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight)) {
-- 
cgit v1.2.3-70-g09d2


From 500f75d10f82db4717cba968577f9421d901a17c Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 7 May 2019 15:51:00 -0400
Subject: things showing up

---
 src/client/views/SearchBox.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index eecd9c8bb..0760578a8 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { observable, action } from 'mobx';
+import { observable, action, runInAction } from 'mobx';
 import { Utils } from '../../Utils';
 import { MessageStore } from '../../server/Message';
 import { Server } from '../Server';
@@ -8,7 +8,6 @@ import "./SearchBox.scss";
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { actionFieldDecorator } from 'mobx/lib/internal';
 // const app = express();
 // import * as express from 'express';
 import { Search } from '../../server/Search';
@@ -26,8 +25,9 @@ export class SearchBox extends React.Component {
     searchString: string = "";
 
     @observable private _open: boolean = false;
+    @observable private _resultsOpen: boolean = false;
 
-    //@observable
+    @observable
     private _results: Document[] = [];
 
     // constructor(props: any) {
@@ -61,7 +61,7 @@ export class SearchBox extends React.Component {
         this.searchString = e.target.value;
     }
 
-    //@action
+    @action
     submitSearch = async () => {
 
         let query = this.searchString;
@@ -71,20 +71,20 @@ export class SearchBox extends React.Component {
                 query
             }
         });
-
         let results = JSON.parse(response);
 
         //gets json result into a list of documents that can be used
         this.getResults(results);
 
+        runInAction(() => { this._resultsOpen = true; });
     }
 
+    @action
     getResults = async (res: string[]) => {
-        let doc;
         res.map(async result => {
-            doc = await Server.GetField(result);
+            const doc = await Server.GetField(result);
             if (doc instanceof Document) {
-                this._results.push(doc);
+                runInAction(() => this._results.push(doc));
             }
         });
     }
@@ -120,7 +120,7 @@ export class SearchBox extends React.Component {
                 <button onClick={this.submitSearch} /> */}
 
                     <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" />
-                    <div style={this._open ? { display: "flex" } : { display: "none" }}>
+                    <div style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
                         {this._results.map(result => <SearchItem doc={result} key={result.Id} />)}
                     </div>
                     <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
-- 
cgit v1.2.3-70-g09d2


From 93d2214b84eaef61c9a9f980d24b5c1addbd67dc Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 7 May 2019 16:26:51 -0400
Subject: things working

---
 src/client/views/SearchBox.scss |  6 ++++++
 src/client/views/SearchBox.tsx  | 46 ++++++++++++-----------------------------
 src/client/views/SearchItem.tsx |  2 +-
 3 files changed, 20 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 1aad13b2e..f4fc0029e 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -64,6 +64,12 @@
     height: 20px;
 }
 
+.results {
+    top: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
 .search-item {
     width: 500px;
     height: 50px;
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 0760578a8..ff215efab 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -15,6 +15,7 @@ import * as rp from 'request-promise';
 import { Document } from '../../fields/Document';
 import { SearchItem } from './SearchItem';
 import { isString } from 'util';
+import { constant } from 'async';
 
 
 library.add(faSearch);
@@ -30,40 +31,15 @@ export class SearchBox extends React.Component {
     @observable
     private _results: Document[] = [];
 
-    // constructor(props: any) {
-    //     super(props);
-    //     let searchInput = document.getElementById("input");
-    //     if (searchInput) {
-    //         // searchInput.addEventListener("keydown", this.onKeyPress)
-    //     }
-    // }
-
-    // //this is not working?????
-    // @action
-    // onKeyPress = (e: KeyboardEvent) => {
-    //     console.log('things happening')
-    //     //Number 13 is the "Enter" key on the keyboard
-    //     if (e.keyCode === 13) {
-    //         console.log("happi")
-    //         // Cancel the default action, if needed
-    //         e.preventDefault();
-    //         // Trigger the button element with a click
-    //         let btn = document.getElementById("submit");
-    //         if (btn) {
-    //             console.log("yesyesyes")
-    //             btn.click();
-    //         }
-    //     }
-    // }
-
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this.searchString = e.target.value;
+        console.log(this.searchString)
     }
 
     @action
     submitSearch = async () => {
-
+        runInAction(() => this._results = []);
         let query = this.searchString;
 
         let response = await rp.get('http://localhost:1050/search', {
@@ -112,19 +88,23 @@ export class SearchBox extends React.Component {
         this._open = !this._open;
     }
 
+    enter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            this.submitSearch();
+        }
+    }
+
     render() {
         return (
             <div id="outer">
                 <div className="searchBox" id="outer">
-                    {/* <input value={this.searchString} onChange={this.onChange} />
-                <button onClick={this.submitSearch} /> */}
 
-                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" />
-                    <div style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
-                        {this._results.map(result => <SearchItem doc={result} key={result.Id} />)}
-                    </div>
+                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" onKeyPress={this.enter} />
                     <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
                     <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
+                    <div className="results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
+                        {this._results.map(result => <SearchItem doc={result} key={result.Id} />)}
+                    </div>
                 </div>
                 <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
                     <div className="filter-form" id="header">Filter Search Results</div>
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index c8fd6457b..6021c0736 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -21,7 +21,7 @@ export interface SearchProps {
 export class SearchItem extends React.Component<SearchProps> {
 
     onClick = () => {
-        console.log("clicked search item");
+        console.log("document clicked: ", this.props.doc);
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2


From 6683c5450eb25da291090091421e791bf0498aba Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 7 May 2019 16:56:41 -0400
Subject: Fix after merge

---
 src/server/index.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/server/index.ts b/src/server/index.ts
index 2381f9840..6b92e8e8e 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -303,7 +303,10 @@ const suffixMap: { [type: string]: string } = {
 function UpdateField(socket: Socket, diff: Diff) {
     Database.Instance.update(diff.id, diff.diff,
         () => socket.broadcast.emit(MessageStore.UpdateField.Message, diff), false, "newDocuments");
-    const docfield = diff.diff;
+    const docfield = diff.diff.$set;
+    if (!docfield) {
+        return;
+    }
     const update: any = { id: diff.id };
     console.log("FIELD: ", docfield);
     let dynfield = false;
-- 
cgit v1.2.3-70-g09d2


From 11ab63f6c91093951fdc293c3d67e63073fb2f4c Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Tue, 7 May 2019 17:42:37 -0400
Subject: navigate to searched doc

---
 src/client/util/DocumentManager.ts | 30 +++++++++++++++++++++++++++++-
 src/client/views/Main.tsx          |  2 +-
 src/client/views/SearchBox.tsx     |  2 +-
 src/client/views/SearchItem.tsx    | 16 ++--------------
 src/client/views/nodes/LinkBox.tsx | 23 +----------------------
 5 files changed, 34 insertions(+), 39 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 69964e2c9..3151bcfb5 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -1,8 +1,10 @@
 import { computed, observable } from 'mobx';
 import { DocumentView } from '../views/nodes/DocumentView';
 import { Doc } from '../../new_fields/Doc';
-import { FieldValue, Cast } from '../../new_fields/Types';
+import { FieldValue, Cast, NumCast } from '../../new_fields/Types';
 import { listSpec } from '../../new_fields/Schema';
+import { undoBatch } from './UndoManager';
+import { CollectionDockingView } from '../views/collections/CollectionDockingView';
 
 
 export class DocumentManager {
@@ -87,4 +89,30 @@ export class DocumentManager {
             return pairs;
         }, [] as { a: DocumentView, b: DocumentView, l: Doc }[]);
     }
+
+    @undoBatch
+    public jumpToDocument = async (doc: Doc): Promise<void> => {
+        let docView = DocumentManager.Instance.getDocumentView(doc);
+        if (docView) {
+            docView.props.focus(docView.props.Document);
+        } else {
+            const contextDoc = await Cast(doc.annotationOn, Doc);
+            if (!contextDoc) {
+                CollectionDockingView.Instance.AddRightSplit(Doc.MakeDelegate(doc));
+            } else {
+                const page = NumCast(doc.page, undefined);
+                const curPage = NumCast(contextDoc.curPage, undefined);
+                if (page !== curPage) {
+                    contextDoc.curPage = page;
+                }
+                let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
+                if (contextView) {
+                    contextDoc.panTransformType = "Ease";
+                    contextView.props.focus(contextDoc);
+                } else {
+                    CollectionDockingView.Instance.AddRightSplit(contextDoc);
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 677902c5b..c9d5c395c 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -267,7 +267,7 @@ export class Main extends React.Component {
                 <button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /></button>
             </div >,
             <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <SearchBox /> </div>,
-            <div className="main-buttonDiv" key="logout" style={{ top: '34px', right: '1px', position: 'absolute' }} ref={logoutRef}>
+            <div className="main-buttonDiv" key="logout" style={{ bottom: '0px', right: '1px', position: 'absolute' }} ref={logoutRef}>
                 <button onClick={() => request.get(DocServer.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
         ];
 
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index a52598f4c..827d468df 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -17,6 +17,7 @@ import { constant } from 'async';
 import { DocServer } from '../DocServer';
 import { Doc } from '../../new_fields/Doc';
 import { Id } from '../../new_fields/RefField';
+import { DocumentManager } from '../util/DocumentManager';
 
 
 library.add(faSearch);
@@ -35,7 +36,6 @@ export class SearchBox extends React.Component {
     @action.bound
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         this.searchString = e.target.value;
-        console.log(this.searchString)
     }
 
     @action
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 82cb5404c..81da7ebd2 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -1,27 +1,15 @@
 import React = require("react");
 import { Doc } from "../../new_fields/Doc";
+import { DocumentManager } from "../util/DocumentManager";
 
 export interface SearchProps {
     doc: Doc;
-    //description: string;
-    //event: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-// export interface SubmenuProps {
-//     description: string;
-//     subitems: ContextMenuProps[];
-// }
-
-// export interface ContextMenuItemProps {
-//     type: ContextMenuProps | SubmenuProps;
-// }
-
-
-
 export class SearchItem extends React.Component<SearchProps> {
 
     onClick = () => {
-        console.log("document clicked: ", this.props.doc);
+        DocumentManager.Instance.jumpToDocument(this.props.doc)
     }
 
     render() {
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 08cfa590b..611cb66b6 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -31,28 +31,7 @@ export class LinkBox extends React.Component<Props> {
     @undoBatch
     onViewButtonPressed = async (e: React.PointerEvent): Promise<void> => {
         e.stopPropagation();
-        let docView = DocumentManager.Instance.getDocumentView(this.props.pairedDoc);
-        if (docView) {
-            docView.props.focus(docView.props.Document);
-        } else {
-            const contextDoc = await Cast(this.props.pairedDoc.annotationOn, Doc);
-            if (!contextDoc) {
-                CollectionDockingView.Instance.AddRightSplit(Doc.MakeDelegate(this.props.pairedDoc));
-            } else {
-                const page = NumCast(this.props.pairedDoc.page, undefined);
-                const curPage = NumCast(contextDoc.curPage, undefined);
-                if (page !== curPage) {
-                    contextDoc.curPage = page;
-                }
-                let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
-                if (contextView) {
-                    contextDoc.panTransformType = "Ease";
-                    contextView.props.focus(contextDoc);
-                } else {
-                    CollectionDockingView.Instance.AddRightSplit(contextDoc);
-                }
-            }
-        }
+        DocumentManager.Instance.jumpToDocument(this.props.pairedDoc);
     }
 
     onEditButtonPressed = (e: React.PointerEvent): void => {
-- 
cgit v1.2.3-70-g09d2


From 152fadbad5d3c4e9c452bb6a1ade543bd84c6416 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 7 May 2019 19:26:36 -0400
Subject: Added copy fields to search to enable easier searching

---
 solr/conf/schema.xml | 13 ++++++++++---
 src/server/Search.ts | 26 --------------------------
 src/server/index.ts  |  3 ---
 3 files changed, 10 insertions(+), 32 deletions(-)

(limited to 'src')

diff --git a/solr/conf/schema.xml b/solr/conf/schema.xml
index 5e80b17d9..99087a1db 100644
--- a/solr/conf/schema.xml
+++ b/solr/conf/schema.xml
@@ -40,10 +40,17 @@
   <fieldType name="pdate" class="solr.DatePointField" docValues="true"/>
   <fieldType name="pdouble" class="solr.DoublePointField" docValues="true"/>
 
-  <field name="data" type="text" indexed="true" stored="true" uninvertible="false"/>
+  <field name="text" type="text" indexed="true" stored="false" uninvertible="false" multiValued="true"/>
   <field name="id" type="string" indexed="true" stored="true" uninvertible="false" required="true"/>
   <field name="_version_" type="plong" indexed="false" stored="false"/>
 
-  <dynamicField name="*_t" type="string" indexed="true" stored="true"/>
-  <dynamicField name="*_n" type="pdouble" indexed="true" stored="true"/>
+  <dynamicField name="*_t" type="text" indexed="true" stored="true" uninvertible="false"/>
+  <dynamicField name="*_n" type="pdouble" indexed="true" stored="true" uninvertible="false"/>
+
+  <dynamicField name="*_a" type="text" indexed="true" stored="false" uninvertible="false"/>
+
+  <copyField source="*_t" dest="text"/>
+
+  <copyField source="*_t" dest="*_a"/>
+  <copyField source="*_n" dest="*_a"/>
 </schema>
diff --git a/src/server/Search.ts b/src/server/Search.ts
index 4911edd1d..59bdd4803 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -5,34 +5,8 @@ import { thisExpression } from 'babel-types';
 export class Search {
     public static Instance = new Search();
     private url = 'http://localhost:8983/solr/';
-    private client: any;
-
-    constructor() {
-        console.log("Search Instantiated!");
-        var SolrNode = require('solr-node');
-        this.client = new SolrNode({
-            host: 'localhost',
-            port: '8983',
-            core: 'dash',
-            protocol: 'http'
-        });
-        var strQuery = this.client.query().q('text:test');
-
-        console.log(strQuery);
-
-        // Search documents using strQuery
-        // client.search(strQuery, (err: any, result: any) => {
-        //     if (err) {
-        //         console.log(err);
-        //         return;
-        //     }
-        //     console.log('Response:', result.response);
-        // });
-    }
-
 
     public async updateDocument(document: any) {
-        console.log("UPDATE: ", JSON.stringify(document));
         return rp.post(this.url + "dash/update", {
             headers: { 'content-type': 'application/json' },
             body: JSON.stringify([document])
diff --git a/src/server/index.ts b/src/server/index.ts
index 6b92e8e8e..44251de3d 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -308,7 +308,6 @@ function UpdateField(socket: Socket, diff: Diff) {
         return;
     }
     const update: any = { id: diff.id };
-    console.log("FIELD: ", docfield);
     let dynfield = false;
     for (let key in docfield) {
         if (!key.startsWith("fields.")) continue;
@@ -322,14 +321,12 @@ function UpdateField(socket: Socket, diff: Diff) {
         }
     }
     if (dynfield) {
-        console.log("dynamic field detected!");
         Search.Instance.updateDocument(update);
     }
 }
 
 function CreateField(newValue: any) {
     Database.Instance.insert(newValue, "newDocuments");
-    console.log("created field");
 }
 
 server.listen(serverPort);
-- 
cgit v1.2.3-70-g09d2


From 85d8e29c15b45cd83d258f185d3d55ff400a145e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 7 May 2019 21:57:48 -0400
Subject: Added date support

---
 solr/conf/schema.xml     |  1 +
 solr/conf/solrconfig.xml |  2 +-
 src/server/index.ts      | 24 ++++++++++++++++++++----
 3 files changed, 22 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/solr/conf/schema.xml b/solr/conf/schema.xml
index 99087a1db..3d1ccb698 100644
--- a/solr/conf/schema.xml
+++ b/solr/conf/schema.xml
@@ -46,6 +46,7 @@
 
   <dynamicField name="*_t" type="text" indexed="true" stored="true" uninvertible="false"/>
   <dynamicField name="*_n" type="pdouble" indexed="true" stored="true" uninvertible="false"/>
+  <dynamicField name="*_d" type="pdate" indexed="true" stored="true" uninvertible="false"/>
 
   <dynamicField name="*_a" type="text" indexed="true" stored="false" uninvertible="false"/>
 
diff --git a/solr/conf/solrconfig.xml b/solr/conf/solrconfig.xml
index 981500022..90eff5363 100644
--- a/solr/conf/solrconfig.xml
+++ b/solr/conf/solrconfig.xml
@@ -696,7 +696,7 @@
     <lst name="defaults">
       <str name="echoParams">explicit</str>
       <int name="rows">10</int>
-      <str name="df">data</str> 
+      <str name="df">text</str> 
       <!-- Default search field
          <str name="df">text</str> 
         -->
diff --git a/src/server/index.ts b/src/server/index.ts
index 44251de3d..5023bf717 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -296,10 +296,17 @@ function GetRefFields([ids, callback]: [string[], (result?: Transferable[]) => v
 }
 
 
-const suffixMap: { [type: string]: string } = {
+const suffixMap: { [type: string]: string | [string, string] | [string, string, (json: any) => any] } = {
     "number": "_n",
-    "string": "_t"
+    "string": "_t",
+    "image": ["_t", "url"],
+    "video": ["_t", "url"],
+    "pdf": ["_t", "url"],
+    "audio": ["_t", "url"],
+    "web": ["_t", "url"],
+    "date": ["_d", "date", millis => new Date(millis).toISOString()],
 };
+
 function UpdateField(socket: Socket, diff: Diff) {
     Database.Instance.update(diff.id, diff.diff,
         () => socket.broadcast.emit(MessageStore.UpdateField.Message, diff), false, "newDocuments");
@@ -311,9 +318,18 @@ function UpdateField(socket: Socket, diff: Diff) {
     let dynfield = false;
     for (let key in docfield) {
         if (!key.startsWith("fields.")) continue;
-        const val = docfield[key];
-        const suffix = suffixMap[typeof val];
+        let val = docfield[key];
+        const type = val.__type || typeof val;
+        let suffix = suffixMap[type];
         if (suffix !== undefined) {
+            if (Array.isArray(suffix)) {
+                val = val[suffix[1]];
+                const func = suffix[2];
+                if (func) {
+                    val = func(val);
+                }
+                suffix = suffix[0];
+            }
             key = key.substring(7);
             Object.values(suffixMap).forEach(suf => update[key + suf] = null);
             update[key + suffix] = { set: val };
-- 
cgit v1.2.3-70-g09d2


From 823b04d8084f14e298a408615eccf712dd76e2b9 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 7 May 2019 22:27:15 -0400
Subject: Removed console.logs

---
 src/server/Search.ts | 2 --
 src/server/index.ts  | 1 -
 2 files changed, 3 deletions(-)

(limited to 'src')

diff --git a/src/server/Search.ts b/src/server/Search.ts
index 7a670e21b..59bdd4803 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -14,8 +14,6 @@ export class Search {
     }
 
     public async search(query: string) {
-        console.log("____________________________");
-        console.log(query);
         const searchResults = JSON.parse(await rp.get(this.url + "dash/select", {
             qs: {
                 q: query
diff --git a/src/server/index.ts b/src/server/index.ts
index 5023bf717..5c54babb2 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -128,7 +128,6 @@ app.get("/pull", (req, res) =>
 app.get("/search", async (req, res) => {
     let query = req.query.query || "hello";
     let results = await Search.Instance.search(query);
-    console.log(results);
     res.send(results);
 });
 
-- 
cgit v1.2.3-70-g09d2


From d588a4543f1ccc06d1e45fe748007b730c18c042 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 8 May 2019 00:45:14 -0400
Subject: small fixes to titles, templates, minimizing, and  keyvalue deletion

---
 src/client/views/Templates.tsx                             | 12 ++++++++++--
 .../views/collections/collectionFreeForm/MarqueeView.tsx   | 13 +++++++++++--
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx  |  6 +++---
 src/client/views/nodes/DocumentContentsView.tsx            | 14 ++++++++++----
 src/client/views/nodes/KeyValuePair.tsx                    |  5 +++--
 5 files changed, 37 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 51fca4c41..de94a1578 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -50,6 +50,10 @@ export namespace Templates {
         `<div><div style="margin:auto; height:100%; width:100%;">{layout}</div><div style="height:100%; width:300px; position:absolute; top: 0; right: -300px;"><FormattedTextBox {...props} fieldKey={"caption"}/></div> </div>`
     );
 
+    export const TitleOverlay = new Template("TitleOverlay", TemplatePosition.InnerTop,
+        `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div>
+        <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.title}</div></div>`
+    );
     export const Title = new Template("Title", TemplatePosition.InnerTop,
         `<div><div style="height:calc(100% - 25px); margin-top: 25px; width:100%;position:absolute;">{layout}</div>
         <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.title}</div></div>`
@@ -57,10 +61,14 @@ export namespace Templates {
 
     export const Bullet = new Template("Bullet", TemplatePosition.InnerTop,
         `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div>
-        <div className="isBullet" style="height:25px; width:25px; margin-left:-25px; pointer-events:all; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px"/></div>`
+        <div id="isBullet" style="height:15px; width:15px; margin-left:-16px; pointer-events:all; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white;">
+        <img  id="isBullet"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAZlBMVEX///8AAABmZmb7+/tYWFhgYGBFRUVSUlL4+Pg/Pz9jY2N5eXmcnJyioqKBgYFzc3NtbW1LS0s3NzfW1taWlpaOjo6IiIgvLy9WVlampqZcXFw5OTlvb28mJiYxMTHe3t7l5eUjIyMY8kIZAAAD2UlEQVR4nO2d61biMBRGW1FBEVHxfp15/5ecOVa5lHxtArmck/Xtn1BotjtNoXQtm4YQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEFIrX6UHEA1gsmrneceRjHm7cj28attKFOf/TRyKIliH4vzbZE+xE2zbZYkxRWX5Y9JT/BW0X3G+NtlR3Ahar7jcMtlS3Ba0XXG+Y7JW3BW0XHHZM/lR7AvaVewL/ijuC1pV3Bf8VnQJ2lR0CYriq/Nxg4puwfa1aZ7dz9yUHnEgN26NZ3luWkPFd7fEtHsWVDwpO+YgTgYKCuYn6tAU7TBecaygcGpZEQie7m5luKJPQQFUvCwx5iAuvQoK4KShvSIoOHVtCz7dnOUecxBn7kG/urc2eCz6T9EOcxXDCgpAUetyAwoOCBqrGF5QMKR4mCA8L+pTBIJwkRl95eifJjPHTDYTFQ8vePyrs3BsBfXLzfFHkvKKMY4j1ctNnCmmuGKslfCQT0RZiPdFVmnFmOcy36sDWYn7DU9hxdifRkKuEGQh/pWW0K/QiUlxtUxVxTTXyhQtN6kuI6mpmO5qpxJFIBjl1yMVimmvV4PfrnIq3iYsKICTRj7F9L84gIq38fYwCCj4HnMfRY/FPL8ZFayYo6BQbLlJeZrYpVDFXAUFcMtKWkUgmOhmnwKKOQsK4NaxdIp5CwqZj8X8gv27jNecJ9nZuXtnie/SzjhRQcHkt6Fnq1imoAAUY1csVVDIUrFcQSGDIhC8jriLQZIrli0oXKdVLF1QSFqxfEEBVLyI8NYXCgoKySaqhinakajimxrBRBX1FBQSVNRyDP4SXVGbYHRFfYJN8xhTESwyj5HHHEjEihoLCqDiXfAb3aksKESqCAoqEIxUUW9BAS03E+93mOhcZDYcXVF3QeHBPcI3v4qo4EPiUQcBKr75vHaiv6AAKt6NV0SCqgoKqOKYovpFZgOo+DmsOHkyUlA4ZKKamaIdQPEJK5oqKKCKM7D9zFZBIayiuYICWm5cFWef7o3vs486CP8VdQIEVRcU7sFE7VecgSmqvKDgVxEJqi8ogIof2xVnH2YLCuMT1fAU7RirOPtrXHCsovmCwlDFCgoKWNH4IrMBTdQ/NUzRjiu3CeCq9HAPAVSspaDgX9FkQcG3ollB34qGBf0UTQv6KBoXHFc0LzimWIFg0ywGBBelBxcHXLGKggKqWElBwV2xIkF3xaoEXYqVCe4rVifYV3wpPZwULOouKLzUXVBY1F1QeKm7oLCoXVAqVi7YNM7/F0YIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCG+/ANh4i1CHdc63QAAAABJRU5ErkJggg==" 
+         width="15px" height="15px"/>
+         </div>
+        </div>`
     );
 
-    export const TemplateList: Template[] = [Title, OuterCaption, InnerCaption, SideCaption, Bullet];
+    export const TemplateList: Template[] = [Title, TitleOverlay, OuterCaption, InnerCaption, SideCaption, Bullet];
 
     export function sortTemplates(a: Template, b: Template) {
         if (a.Position < b.Position) { return -1; }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index c9b0b28f7..b9a6792ed 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -63,8 +63,17 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 let text = await navigator.clipboard.readText();
                 let ns = text.split("\n").filter(t => t != "\r");
                 for (let i = 0; i < ns.length - 1; i++) {
-                    while (!(ns[i].endsWith("-\r") || ns[i].endsWith(".\r") || ns[i].endsWith(":\r")) && i < ns.length - 1) {
-                        ns.splice(i, 2, ns[i].substr(0, ns[i].length - 1) + ns[i + 1].trimLeft());
+                    if (ns[i].trim() === "") {
+                        ns.splice(i, 1);
+                        continue;
+                    }
+                    while (!(ns[i].trim() === "" || ns[i].endsWith("-\r") || ns[i].endsWith("-") ||
+                        ns[i].endsWith(".\r") || ns[i].endsWith(".") ||
+                        ns[i].endsWith(":\r") || ns[i].endsWith(":")) && i < ns.length - 1) {
+                        let sub = ns[i].endsWith("\r") ? 1 : 0;
+                        let br = ns[i + 1].trim() === "";
+                        ns.splice(i, 2, ns[i].substr(0, ns[i].length - sub) + ns[i + 1].trimLeft());
+                        if (br) break;
                     }
                 }
                 ns.map(line => {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index df78d92e2..0e34cb626 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -145,8 +145,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     if (isMinimized === undefined) {
                         isMinimized = BoolCast(maximizedDoc.isMinimized, false);
                     }
-                    let minx = NumCast(minimizedTarget.x, undefined) + NumCast(minimizedTarget.width, undefined) * this.getTransform().Scale / 2;
-                    let miny = NumCast(minimizedTarget.y, undefined) + NumCast(minimizedTarget.height, undefined) * this.getTransform().Scale / 2;
+                    let minx = NumCast(minimizedTarget.x, undefined) + NumCast(minimizedTarget.width, undefined) * this.getTransform().Scale * this.contentScaling() / 2;
+                    let miny = NumCast(minimizedTarget.y, undefined) + NumCast(minimizedTarget.height, undefined) * this.getTransform().Scale * this.contentScaling() / 2;
                     let maxx = NumCast(maximizedDoc.x, undefined);
                     let maxy = NumCast(maximizedDoc.y, undefined);
                     let maxw = NumCast(maximizedDoc.width, undefined);
@@ -176,7 +176,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         let altKey = e.altKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
-            if (BoolCast(this.props.Document.isButton, false) || (e.target as any).className === "isBullet") {
+            if (BoolCast(this.props.Document.isButton, false) || (e.target as any).id === "isBullet") {
                 let maximizedDocs = await DocListCast(this.props.Document.maximizedDocs);
                 if (maximizedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
                     if ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight)) {
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index bbc927b5a..1dc6343e8 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -64,10 +64,16 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
         let base = baseLayout;
         let layout = baseLayout;
 
-        this.templates.forEach(template => {
-            layout = template.replace("{layout}", base);
-            base = layout;
-        });
+        // bcz: templates are intended for the main document layout.  However, 
+        // a DocumentContentsView is also used to render the annotation overlay for a document.
+        // So we detect that here by checking the layoutKey.  This should probably be moved into
+        // a prop so that the overlay can explicitly turn off templates.
+        if (this.props.layoutKey !== "backgroundLayout") {
+            this.templates.forEach(template => {
+                layout = template.replace("{layout}", base);
+                base = layout;
+            });
+        }
         return layout;
     }
 
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 203fb5625..5de660d57 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -46,8 +46,9 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                 <td className="keyValuePair-td-key" style={{ width: `${this.props.keyWidth}%` }}>
                     <div className="keyValuePair-td-key-container">
                         <button className="keyValuePair-td-key-delete" onClick={() => {
-                            let field = FieldValue(props.Document[props.fieldKey]);
-                            field && (props.Document[props.fieldKey] = undefined);
+                            if (Object.keys(props.Document).indexOf(props.fieldKey) !== -1)
+                                props.Document[props.fieldKey] = undefined;
+                            else props.Document.proto![props.fieldKey] = undefined;
                         }}>
                             X
                         </button>
-- 
cgit v1.2.3-70-g09d2


From a8a5cf33985c47cb6e7c68f30c482232fc8d023a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 8 May 2019 10:13:13 -0400
Subject: converted template constants to screen space - need to think about
 more flexible api

---
 src/client/views/Templates.tsx                  |  8 ++++++--
 src/client/views/nodes/DocumentContentsView.tsx | 14 ++++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index de94a1578..6f706bdc5 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -52,11 +52,15 @@ export namespace Templates {
 
     export const TitleOverlay = new Template("TitleOverlay", TemplatePosition.InnerTop,
         `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div>
-        <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.title}</div></div>`
+        <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; ">
+        <span style="text-align:center;width:100%;font-size:20px;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{props.Document.title}</span>
+        </div></div>`
     );
     export const Title = new Template("Title", TemplatePosition.InnerTop,
         `<div><div style="height:calc(100% - 25px); margin-top: 25px; width:100%;position:absolute;">{layout}</div>
-        <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; padding:2px 10px">{props.Document.title}</div></div>`
+        <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; ">
+            <span style="text-align:center;width:100%;font-size:20px;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{props.Document.title}</span>
+        </div></div>`
     );
 
     export const Bullet = new Template("Bullet", TemplatePosition.InnerTop,
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 1dc6343e8..294e17720 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -64,13 +64,19 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
         let base = baseLayout;
         let layout = baseLayout;
 
-        // bcz: templates are intended for the main document layout.  However, 
-        // a DocumentContentsView is also used to render the annotation overlay for a document.
-        // So we detect that here by checking the layoutKey.  This should probably be moved into
+        // bcz: templates are intended only for a document's primary layout (not background).  However, 
+        // a DocumentContentsView is used to render  annotation overlays, so we detect that here 
+        // by checking the layoutKey.  This should probably be moved into
         // a prop so that the overlay can explicitly turn off templates.
         if (this.props.layoutKey !== "backgroundLayout") {
             this.templates.forEach(template => {
-                layout = template.replace("{layout}", base);
+                let self = this;
+                function convertConstantsToNative(match: string, offset: number, x: string) {
+                    let px = Number(match.replace("px", ""));
+                    return `${px * self.props.ScreenToLocalTransform().Scale}px`;
+                }
+                let nativizedTemplate = template.replace(/([0-9]+)px/g, convertConstantsToNative);
+                layout = nativizedTemplate.replace("{layout}", base);
                 base = layout;
             });
         }
-- 
cgit v1.2.3-70-g09d2


From a573867d2443a806f174db58e2a920db3405934c Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 8 May 2019 10:23:28 -0400
Subject: added delete from non-data keys in tree view.  fixed undo
 iconanimating problem

---
 src/client/views/collections/CollectionTreeView.tsx  | 20 ++++++++++++--------
 .../views/nodes/CollectionFreeFormDocumentView.tsx   |  4 +++-
 2 files changed, 15 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 6fa374464..6e690236f 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -68,8 +68,8 @@ class TreeView extends React.Component<TreeViewProps> {
     }
 
     @action
-    remove = (document: Document) => {
-        let children = Cast(this.props.document.data, listSpec(Doc), []);
+    remove = (document: Document, key: string) => {
+        let children = Cast(this.props.document[key], listSpec(Doc), []);
         if (children) {
             children.splice(children.indexOf(document), 1);
         }
@@ -81,7 +81,7 @@ class TreeView extends React.Component<TreeViewProps> {
             return true;
         }
         //TODO This should check if it was removed
-        this.remove(document);
+        this.remove(document, "data");
         return addDoc(document);
     }
 
@@ -136,7 +136,11 @@ class TreeView extends React.Component<TreeViewProps> {
             if (DocumentManager.Instance.getDocumentViews(this.props.document).length) {
                 ContextMenu.Instance.addItem({ description: "Focus", event: () => DocumentManager.Instance.getDocumentViews(this.props.document).map(view => view.props.focus(this.props.document)) });
             }
-            ContextMenu.Instance.addItem({ description: "Delete", event: undoBatch(() => this.props.deleteDoc(this.props.document)) });
+            ContextMenu.Instance.addItem({
+                description: "Delete", event: undoBatch(() => {
+                    this.props.deleteDoc(this.props.document);
+                })
+            });
             ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
             e.stopPropagation();
         }
@@ -160,7 +164,7 @@ class TreeView extends React.Component<TreeViewProps> {
                     contentElement.push(<ul key={key + "more"}>
                         {(key === "data") ? (null) :
                             <span className="collectionTreeView-keyHeader" key={key}>{key}</span>}
-                        {TreeView.GetChildElements(docList, key !== "data", this.remove, this.move, this.props.dropAction)}
+                        {TreeView.GetChildElements(docList, key !== "data", (doc: Doc) => this.remove(doc, key), this.move, this.props.dropAction)}
                     </ul >);
                 } else
                     bulletType = BulletType.Collapsed;
@@ -175,9 +179,9 @@ class TreeView extends React.Component<TreeViewProps> {
             </li>
         </div>;
     }
-    public static GetChildElements(docs: Doc[], allowMinimized: boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) {
-        return docs.filter(child => !child.excludeFromLibrary && (allowMinimized || !child.isMinimized)).filter(doc => FieldValue(doc)).map(child =>
-            <TreeView document={child} key={child[Id]} deleteDoc={remove} moveDocument={move} dropAction={dropAction} />);
+    public static GetChildElements(docs: (Doc | Promise<Doc>)[], allowMinimized: boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) {
+        return docs.filter(child => child instanceof Doc && !child.excludeFromLibrary && (allowMinimized || !child.isMinimized)).filter(doc => FieldValue(doc)).map(child =>
+            <TreeView document={child as Doc} key={(child as Doc)[Id]} deleteDoc={remove} moveDocument={move} dropAction={dropAction} />);
     }
 }
 
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 0e34cb626..5efc75793 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -138,7 +138,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         }
         if (minimizedDoc && maximizedDocs) {
             let minimizedTarget = minimizedDoc;
-            CollectionFreeFormDocumentView._undoBatch = UndoManager.StartBatch("iconAnimating");
+            if (!CollectionFreeFormDocumentView._undoBatch) {
+                CollectionFreeFormDocumentView._undoBatch = UndoManager.StartBatch("iconAnimating");
+            }
             maximizedDocs.forEach(maximizedDoc => {
                 let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
                 if (!iconAnimating || (Date.now() - iconAnimating[6] > 1000)) {
-- 
cgit v1.2.3-70-g09d2


From 9573fe783fe9edfa38421d806a473d4cc496733f Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 8 May 2019 11:16:30 -0400
Subject: cleaned up template menu.  made icon doc deletable.

---
 src/client/util/UndoManager.ts                            | 5 ++++-
 src/client/views/DocumentDecorations.scss                 | 7 ++++---
 src/client/views/DocumentDecorations.tsx                  | 7 +++----
 src/client/views/TemplateMenu.tsx                         | 4 +---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 1 -
 5 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/client/util/UndoManager.ts b/src/client/util/UndoManager.ts
index 0b5280c4a..c0ed015bd 100644
--- a/src/client/util/UndoManager.ts
+++ b/src/client/util/UndoManager.ts
@@ -1,7 +1,6 @@
 import { observable, action, runInAction } from "mobx";
 import 'source-map-support/register';
 import { Without } from "../../Utils";
-import { string } from "prop-types";
 
 function getBatchName(target: any, key: string | symbol): string {
     let keyName = key.toString();
@@ -94,6 +93,10 @@ export namespace UndoManager {
         return redoStack.length > 0;
     }
 
+    export function PrintBatches(): void {
+        GetOpenBatches().forEach(batch => console.log(batch.batchName));
+    }
+
     let openBatches: Batch[] = [];
     export function GetOpenBatches(): Without<Batch, 'end'>[] {
         return openBatches;
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 158b02b5a..6a2e33836 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -210,14 +210,15 @@ $linkGap : 3px;
     position: absolute;
     top: 0;
     left: 30px;
-    width: 150px;
-    line-height: 25px;
-    max-height: 175px;
+    width: max-content;
     font-family: $sans-serif;
     font-size: 12px;
     background-color: $light-color-secondary;
     padding: 2px 12px;
     list-style: none;
+    .templateToggle {
+        text-align: left;
+    }
 
     input {
         margin-right: 10px;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8ae71fdc8..e3eb034fa 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -29,6 +29,7 @@ import { CollectionFreeFormView } from "./collections/collectionFreeForm/Collect
 import { CollectionView } from "./collections/CollectionView";
 import { createCipher } from "crypto";
 import { FieldView } from "./nodes/FieldView";
+import { DocumentManager } from "../util/DocumentManager";
 
 library.add(faLink);
 
@@ -277,13 +278,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     public getIconDoc = async (docView: DocumentView): Promise<Doc | undefined> => {
         let doc = docView.props.Document;
         let iconDoc: Doc | undefined = await Cast(doc.minimizedDoc, Doc);
-        if (!iconDoc) {
+
+        if (!iconDoc || !DocumentManager.Instance.getDocumentView(iconDoc)) {
             const layout = StrCast(doc.backgroundLayout, StrCast(doc.layout, FieldView.LayoutString(DocumentView)));
             iconDoc = this.createIcon([docView], layout);
         }
-        if (SelectionManager.SelectedDocuments()[0].props.addDocument !== undefined) {
-            SelectionManager.SelectedDocuments()[0].props.addDocument!(iconDoc!);
-        }
         return iconDoc;
     }
     moveIconDoc(iconDoc: Doc) {
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index 376feb5a5..d74982ef8 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -15,7 +15,7 @@ class TemplateToggle extends React.Component<{ template: Template, checked: bool
     render() {
         if (this.props.template) {
             return (
-                <li>
+                <li className="templateToggle">
                     <input type="checkbox" checked={this.props.checked} onChange={(event) => this.props.toggle(event, this.props.template)} />
                     {this.props.template.Name}
                 </li>
@@ -45,7 +45,6 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
                 this.props.docs.map(d => d.addTemplate(template));
             }
             this.props.templates.set(template, true);
-            this.props.templates.forEach((checked, template) => console.log("Set Checked + " + checked + " " + this.props.templates.get(template)));
         } else {
             if (template.Name == "Bullet") {
                 this.props.docs[0].removeTemplate(template);
@@ -54,7 +53,6 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
                 this.props.docs.map(d => d.removeTemplate(template));
             }
             this.props.templates.set(template, false);
-            this.props.templates.forEach((checked, template) => console.log("Unset Checked + " + checked + " " + this.props.templates.get(template)));
         }
     }
 
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 5efc75793..a9c53933e 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -127,7 +127,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
     @action
     public toggleIcon = async (): Promise<void> => {
-        UndoManager.GetOpenBatches().forEach(batch => console.log(batch.batchName));
         SelectionManager.DeselectAll();
         let isMinimized: boolean | undefined;
         let maximizedDocs = await DocListCast(this.props.Document.maximizedDocs);
-- 
cgit v1.2.3-70-g09d2


From 6f9316683929b86e27fd4e2e30609670cd89f964 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 8 May 2019 12:10:07 -0400
Subject: adjusted titling of icons and summaries.

---
 .../collectionFreeForm/MarqueeView.scss            |  2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx | 55 ++++++++++++----------
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  1 +
 src/client/views/nodes/DocumentView.tsx            | 23 ++++++---
 src/client/views/nodes/IconBox.tsx                 | 11 -----
 5 files changed, 48 insertions(+), 44 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.scss b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
index ae0a9fd48..6e8ec8662 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.scss
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
@@ -21,6 +21,6 @@
         white-space:nowrap;
     }
     .marquee-legend::after {
-        content: "Press: C (collection), or Delete"
+        content: "Press: c (collection), s (summary), r (replace) or Delete"
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index b9a6792ed..9764db1d4 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -9,7 +9,7 @@ import { PreviewCursor } from "../../PreviewCursor";
 import { CollectionFreeFormView } from "./CollectionFreeFormView";
 import "./MarqueeView.scss";
 import React = require("react");
-import { Utils } from "../../../../Utils";
+import { Utils, deepCopy } from "../../../../Utils";
 import { Doc } from "../../../../new_fields/Doc";
 import { NumCast, Cast } from "../../../../new_fields/Types";
 import { InkField, StrokeData } from "../../../../new_fields/InkField";
@@ -68,6 +68,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                         continue;
                     }
                     while (!(ns[i].trim() === "" || ns[i].endsWith("-\r") || ns[i].endsWith("-") ||
+                        ns[i].endsWith(";\r") || ns[i].endsWith(";") ||
                         ns[i].endsWith(".\r") || ns[i].endsWith(".") ||
                         ns[i].endsWith(":\r") || ns[i].endsWith(":")) && i < ns.length - 1) {
                         let sub = ns[i].endsWith("\r") ? 1 : 0;
@@ -182,12 +183,19 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             this.cleanupInteractions(false);
             e.stopPropagation();
         }
-        if (e.key === "c" || e.key === "r" || e.key === "R" || e.key === "e") {
+        if (e.key === "c" || e.key === "r" || e.key === "s" || e.key === "e") {
             this._commandExecuted = true;
             e.stopPropagation();
             let bounds = this.Bounds;
             let selected = this.marqueeSelect().map(d => {
-                if (e.key !== "R") {
+                if (e.key === "s") {
+                    let dCopy = Doc.MakeCopy(d);
+                    dCopy.x = NumCast(d.x) - bounds.left - bounds.width / 2;
+                    dCopy.y = NumCast(d.y) - bounds.top - bounds.height / 2;
+                    dCopy.page = -1;
+                    return dCopy;
+                }
+                else if (e.key !== "r") {
                     this.props.removeDocument(d);
                     d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
                     d.y = NumCast(d.y) - bounds.top - bounds.height / 2;
@@ -208,25 +216,20 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 width: bounds.width * zoomBasis,
                 height: bounds.height * zoomBasis,
                 ink: inkData ? new InkField(this.marqueeInkSelect(inkData)) : undefined,
-                title: "a nested collection"
+                title: "a nested collection",
             });
 
             this.marqueeInkDelete(inkData);
             // SelectionManager.DeselectAll();
-            if (e.key === "r" || e.key === "R") {
+            if (e.key === "s" || e.key === "r") {
                 e.preventDefault();
                 let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
                 let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
 
-                if (e.key === "r") {
+                if (e.key === "s") {
                     summary.proto!.maximizeOnRight = true;
-                    let list = Cast(newCollection.data, listSpec(Doc));
-                    if (list && list.length === 1) {
-                        selected = list;
-                    } else {
-                        selected = [newCollection];
-                        this.props.addDocument(newCollection, false);
-                    }
+                    newCollection.proto!.summaryDoc = summary;
+                    selected = [newCollection];
                 }
                 summary.proto!.maximizedDocs = new List<Doc>(selected);
                 summary.proto!.isButton = true;
@@ -243,20 +246,20 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 this.props.addDocument(newCollection, false);
             }
             this.cleanupInteractions(false);
-        }
-        if (e.key === "s") {
-            this._commandExecuted = true;
-            e.stopPropagation();
-            e.preventDefault();
-            let bounds = this.Bounds;
-            let selected = this.marqueeSelect();
-            SelectionManager.DeselectAll();
-            let summary = Docs.TextDocument({ x: bounds.left + bounds.width + 25, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
-            this.props.addLiveTextDocument(summary);
-            selected.forEach(select => Doc.MakeLink(summary.proto!, select.proto!));
+        } else
+            if (e.key === "s") {
+                // this._commandExecuted = true;
+                // e.stopPropagation();
+                // e.preventDefault();
+                // let bounds = this.Bounds;
+                // let selected = this.marqueeSelect();
+                // SelectionManager.DeselectAll();
+                // let summary = Docs.TextDocument({ x: bounds.left + bounds.width + 25, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
+                // this.props.addLiveTextDocument(summary);
+                // selected.forEach(select => Doc.MakeLink(summary.proto!, select.proto!));
 
-            this.cleanupInteractions(false);
-        }
+                // this.cleanupInteractions(false);
+            }
     }
     @action
     marqueeInkSelect(ink: Map<any, any>) {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a9c53933e..1f8d22ab0 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -185,6 +185,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                         if (dataDocs) {
                             SelectionManager.DeselectAll();
                             maximizedDocs.forEach(maxDoc => {
+                                maxDoc.isMinimized = false;
                                 if (!dataDocs || dataDocs.indexOf(maxDoc) == -1) {
                                     CollectionDockingView.Instance.AddRightSplit(maxDoc);
                                 } else {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a20a8a93b..38efeeba5 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, runInAction } from "mobx";
+import { action, computed, runInAction, reaction, IReactionDisposer } from "mobx";
 import { observer } from "mobx-react";
 import { emptyFunction, Utils } from "../../../Utils";
 import { Docs } from "../../documents/Documents";
@@ -16,10 +16,10 @@ import { Template, Templates } from "./../Templates";
 import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
 import React = require("react");
-import { Opt, Doc, WidthSym, HeightSym } from "../../../new_fields/Doc";
+import { Opt, Doc, WidthSym, HeightSym, DocListCast } from "../../../new_fields/Doc";
 import { DocComponent } from "../DocComponent";
 import { createSchema, makeInterface } from "../../../new_fields/Schema";
-import { FieldValue, StrCast, BoolCast } from "../../../new_fields/Types";
+import { FieldValue, StrCast, BoolCast, Cast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
@@ -99,6 +99,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     set templates(templates: List<string>) { this.props.Document.templates = templates; }
     screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
 
+    _reactionDisposer?: IReactionDisposer;
     @action
     componentDidMount() {
         if (this._mainCont.current) {
@@ -106,6 +107,17 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 handlers: { drop: this.drop.bind(this) }
             });
         }
+        this._reactionDisposer = reaction(() => [this.props.Document.maximizedDocs, this.props.Document.summaryDoc, this.props.Document.summaryDoc instanceof Doc ? this.props.Document.summaryDoc.title : ""],
+            async () => {
+                let maxDoc = await DocListCast(this.props.Document.maximizedDocs);
+                if (maxDoc && StrCast(this.props.Document.layout).indexOf("IconBox") !== -1) {
+                    this.props.Document.title = (maxDoc && maxDoc.length === 1 ? maxDoc[0].title + ".icon" : "");
+                }
+                let sumDoc = Cast(this.props.Document.summaryDoc, Doc);
+                if (sumDoc instanceof Doc) {
+                    this.props.Document.title = sumDoc.title + ".expanded";
+                }
+            }, { fireImmediately: true });
         DocumentManager.Instance.DocumentViews.push(this);
     }
     @action
@@ -121,9 +133,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
     @action
     componentWillUnmount() {
-        if (this._dropDisposer) {
-            this._dropDisposer();
-        }
+        if (this._reactionDisposer) this._reactionDisposer();
+        if (this._dropDisposer) this._dropDisposer();
         DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1);
     }
 
diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx
index 19abec4af..4bcb4c636 100644
--- a/src/client/views/nodes/IconBox.tsx
+++ b/src/client/views/nodes/IconBox.tsx
@@ -24,17 +24,6 @@ library.add(faFilm);
 @observer
 export class IconBox extends React.Component<FieldViewProps> {
     public static LayoutString() { return FieldView.LayoutString(IconBox); }
-    _reactionDisposer?: IReactionDisposer;
-    componentDidMount() {
-        this._reactionDisposer = reaction(() => [this.props.Document.maximizedDocs],
-            async () => {
-                let maxDoc = await DocListCast(this.props.Document.maximizedDocs);
-                this.props.Document.title = (maxDoc && maxDoc.length === 1 ? maxDoc[0].title + ".icon" : "");
-            }, { fireImmediately: true });
-    }
-    componentWillUnmount() {
-        if (this._reactionDisposer) this._reactionDisposer();
-    }
 
     @computed get layout(): string { const field = Cast(this.props.Document[this.props.fieldKey], IconField); return field ? field.icon : "<p>Error loading icon data</p>"; }
     @computed get minimizedIcon() { return IconBox.DocumentIcon(this.layout); }
-- 
cgit v1.2.3-70-g09d2


From c67fc234cf4a524c19989134d878797563207e93 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 8 May 2019 16:05:02 -0400
Subject: fixes for templates and for dragging

---
 src/client/util/DragManager.ts                           | 16 +++++++++-------
 .../collectionFreeForm/CollectionFreeFormView.tsx        | 12 ++++--------
 .../views/nodes/CollectionFreeFormDocumentView.tsx       |  2 +-
 src/client/views/nodes/DocumentContentsView.tsx          | 13 +++++++------
 src/client/views/nodes/FormattedTextBox.tsx              |  2 +-
 5 files changed, 22 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index a3dbe6e43..ec192eaff 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -3,7 +3,7 @@ import { emptyFunction } from "../../Utils";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import * as globalCssVariables from "../views/globalCssVariables.scss";
 import { MainOverlayTextBox } from "../views/MainOverlayTextBox";
-import { Doc } from "../../new_fields/Doc";
+import { Doc, DocListCast } from "../../new_fields/Doc";
 import { Cast } from "../../new_fields/Types";
 import { listSpec } from "../../new_fields/Schema";
 
@@ -42,12 +42,14 @@ export function SetupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc:
 
 export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: number, sourceDoc: Doc) {
     let srcTarg = sourceDoc.proto;
-    let draggedDocs = srcTarg ?
-        Cast(srcTarg.linkedToDocs, listSpec(Doc), []).map(linkDoc =>
-            Cast(linkDoc.linkedTo, Doc) as Doc) : [];
-    let draggedFromDocs = srcTarg ?
-        Cast(srcTarg.linkedFromDocs, listSpec(Doc), []).map(linkDoc =>
-            Cast(linkDoc.linkedFrom, Doc) as Doc) : [];
+    let draggedDocs: Doc[] = [];
+    let draggedFromDocs: Doc[] = []
+    if (srcTarg) {
+        let linkToDocs = await DocListCast(srcTarg.linkedToDocs);
+        let linkFromDocs = await DocListCast(srcTarg.linkedFromDocs);
+        if (linkToDocs) draggedDocs = linkToDocs.map(linkDoc => Cast(linkDoc.linkedTo, Doc) as Doc);
+        if (linkFromDocs) draggedFromDocs = linkFromDocs.map(linkDoc => Cast(linkDoc.linkedFrom, Doc) as Doc);
+    }
     draggedDocs.push(...draggedFromDocs);
     if (draggedDocs.length) {
         let moddrag: Doc[] = [];
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 7fa945891..fcc73d5b6 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -326,10 +326,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 @observer
 class CollectionFreeFormOverlayView extends React.Component<DocumentViewProps> {
     @computed get overlayView() {
-        let overlayLayout = Cast(this.props.Document.overlayLayout, "string", "");
-        return !overlayLayout ? (null) :
-            (<DocumentContentsView {...this.props} layoutKey={"overlayLayout"}
-                isTopMost={this.props.isTopMost} isSelected={returnFalse} select={emptyFunction} />);
+        return (<DocumentContentsView {...this.props} layoutKey={"overlayLayout"}
+            isTopMost={this.props.isTopMost} isSelected={returnFalse} select={emptyFunction} />);
     }
     render() {
         return this.overlayView;
@@ -339,10 +337,8 @@ class CollectionFreeFormOverlayView extends React.Component<DocumentViewProps> {
 @observer
 class CollectionFreeFormBackgroundView extends React.Component<DocumentViewProps & { isSelected: () => boolean }> {
     @computed get backgroundView() {
-        let backgroundLayout = Cast(this.props.Document.backgroundLayout, "string", "");
-        return !backgroundLayout ? (null) :
-            (<DocumentContentsView {...this.props} layoutKey={"backgroundLayout"}
-                isTopMost={this.props.isTopMost} isSelected={this.props.isSelected} select={emptyFunction} />);
+        return (<DocumentContentsView {...this.props} layoutKey={"backgroundLayout"}
+            isTopMost={this.props.isTopMost} isSelected={this.props.isSelected} select={emptyFunction} />);
     }
     render() {
         return this.backgroundView;
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 1f8d22ab0..470c0c2f8 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -170,7 +170,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-        e.stopPropagation();
+        // e.stopPropagation();
     }
     onClick = async (e: React.MouseEvent) => {
         e.stopPropagation();
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 294e17720..f404b7bc6 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -1,4 +1,4 @@
-import { computed } from "mobx";
+import { computed, trace } from "mobx";
 import { observer } from "mobx-react";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
@@ -45,7 +45,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
     select: (ctrl: boolean) => void,
     layoutKey: string
 }> {
-    @computed get layout(): string { return Cast(this.props.Document[this.props.layoutKey], "string", "<p>Error loading layout data</p>"); }
+    @computed get layout(): string { return Cast(this.props.Document[this.props.layoutKey], "string", this.props.layoutKey === "layout" ? "<p>Error loading layout data</p>" : ""); }
 
     CreateBindings(): JsxBindings {
         return { props: OmitKeys(this.props, ['parentActive'], (obj: any) => obj.active = this.props.parentActive).omit };
@@ -58,17 +58,17 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
         }
         return new List<string>();
     }
-    set templates(templates: List<string>) { this.props.Document.templates = templates; }
-    get finalLayout() {
+    @computed get finalLayout() {
         const baseLayout = this.layout;
         let base = baseLayout;
         let layout = baseLayout;
 
-        // bcz: templates are intended only for a document's primary layout (not background).  However, 
+        // bcz: templates are intended only for a document's primary layout or overlay (not background).  However, 
         // a DocumentContentsView is used to render  annotation overlays, so we detect that here 
         // by checking the layoutKey.  This should probably be moved into
         // a prop so that the overlay can explicitly turn off templates.
-        if (this.props.layoutKey !== "backgroundLayout") {
+        if ((this.props.layoutKey === "overlayLayout" && StrCast(this.props.Document.layout).indexOf("CollectionView") !== -1) ||
+            (this.props.layoutKey === "layout" && StrCast(this.props.Document.layout).indexOf("CollectionView") === -1)) {
             this.templates.forEach(template => {
                 let self = this;
                 function convertConstantsToNative(match: string, offset: number, x: string) {
@@ -84,6 +84,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
     }
 
     render() {
+        if (!this.layout && (this.props.layoutKey !== "overlayLayout" || !this.templates.length)) return (null);
         return <ObserverJsxParser
             components={{ FormattedTextBox, ImageBox, IconBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, CollectionPDFView, CollectionVideoView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, HistogramBox }}
             bindings={this.CreateBindings()}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8d2f1c780..ee6000da7 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -154,7 +154,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             let text = StrCast(this.props.Document.documentText);
             if (text.startsWith("@@@")) {
                 this.props.Document.proto!.documentText = undefined;
-                this._editorView.dispatch(this._editorView.state.tr.insertText(text.substr(3)));
+                this._editorView.dispatch(this._editorView.state.tr.insertText(text.replace("@@@", "")));
             }
         }
 
-- 
cgit v1.2.3-70-g09d2


From 007433dabbd6a8a5f702ac393ecd2b40b1c3a9d8 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 8 May 2019 18:31:14 -0400
Subject: fixes for templates including changing the relative order of
 CollectionOverlayView in the stack

---
 src/client/views/MainOverlayTextBox.tsx                   |  1 +
 src/client/views/Templates.tsx                            |  2 +-
 .../collectionFreeForm/CollectionFreeFormLinksView.tsx    |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.scss        |  8 ++++++--
 .../collectionFreeForm/CollectionFreeFormView.tsx         | 15 +++++----------
 .../views/collections/collectionFreeForm/MarqueeView.tsx  |  3 +++
 src/client/views/nodes/FormattedTextBox.scss              |  1 +
 src/client/views/nodes/FormattedTextBox.tsx               |  6 ++----
 8 files changed, 20 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx
index d32e3f21b..3b75c248a 100644
--- a/src/client/views/MainOverlayTextBox.tsx
+++ b/src/client/views/MainOverlayTextBox.tsx
@@ -43,6 +43,7 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
         this._textXf = tx ? tx : () => Transform.Identity();
         this._textTargetDiv = div;
         if (div) {
+            if (div.parentElement && div.parentElement instanceof HTMLDivElement && div.parentElement.id === "screenSpace") this._textXf = () => Transform.Identity();
             this._textColor = div.style.color;
             div.style.color = "transparent";
             this.TextScroll = div.scrollTop;
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 6f706bdc5..02f9aa510 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -39,7 +39,7 @@ export namespace Templates {
     // export const BasicLayout = new Template("Basic layout", "{layout}");
 
     export const OuterCaption = new Template("Outer caption", TemplatePosition.OutterBottom,
-        `<div><div style="margin:auto; height:calc(100%); width:100%;">{layout}</div><div style="height:(100% + 50px); width:100%; position:absolute"><FormattedTextBox {...props} fieldKey={"caption"} /></div></div>`
+        `<div id="screenSpace" style="margin-top: 100%; font-size:14px; background:yellow; width:100%; position:absolute"><FormattedTextBox {...props} fieldKey={"caption"} /></div>`
     );
 
     export const InnerCaption = new Template("Inner caption", TemplatePosition.InnerBottom,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 2d815a302..cbfbb1d2c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -1,4 +1,4 @@
-import { computed, IReactionDisposer, reaction } from "mobx";
+import { computed, IReactionDisposer, reaction, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Utils } from "../../../../Utils";
 import { DocumentManager } from "../../../util/DocumentManager";
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index cb849b325..063c9e2cf 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -37,7 +37,9 @@
     border-radius: $border-radius;
     box-sizing: border-box;
     position: absolute;
-    overflow: hidden;
+    .marqueeView {
+        overflow: hidden;
+    }
     top: 0;
     left: 0;
     width: 100%;
@@ -61,7 +63,9 @@
     border-radius: $border-radius;
     box-sizing: border-box;
     position:absolute;
-    overflow: hidden;
+    .marqueeView {
+        overflow: hidden;
+    }
     top: 0;
     left: 0;
     width: 100%;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index fcc73d5b6..797f94d5f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -110,15 +110,11 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        let childSelected = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), [] as Doc[]).filter(doc => doc).reduce((childSelected, doc) => {
-            var dv = DocumentManager.Instance.getDocumentView(doc);
-            return childSelected || (dv && SelectionManager.IsSelected(dv) ? true : false);
-        }, false);
         if ((CollectionFreeFormView.RIGHT_BTN_DRAG &&
             (((e.button === 2 && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) ||
-                (e.button === 0 && e.altKey)) && (childSelected || this.props.active()))) ||
+                (e.button === 0 && e.altKey)) && this.props.active())) ||
             (!CollectionFreeFormView.RIGHT_BTN_DRAG &&
-                ((e.button === 0 && !e.altKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) && (childSelected || this.props.active())))) {
+                ((e.button === 0 && !e.altKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) && this.props.active()))) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointermove", this.onPointerMove);
@@ -233,7 +229,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             return NumCast(doc1.zIndex) - NumCast(doc2.zIndex);
         }).forEach((doc, index) => doc.zIndex = index + 1);
         doc.zIndex = docs.length + 1;
-        return doc;
     }
 
     focusDocument = (doc: Doc) => {
@@ -316,18 +311,18 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                         </CollectionFreeFormLinksView>
                         {/* <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" /> */}
                     </CollectionFreeFormViewPannableContents>
-                    <CollectionFreeFormOverlayView {...this.getDocumentViewProps(this.props.Document)} {...this.props} />
                 </MarqueeView>
+                <CollectionFreeFormOverlayView {...this.getDocumentViewProps(this.props.Document)} {...this.props} />
             </div>
         );
     }
 }
 
 @observer
-class CollectionFreeFormOverlayView extends React.Component<DocumentViewProps> {
+class CollectionFreeFormOverlayView extends React.Component<DocumentViewProps & { isSelected: () => boolean }> {
     @computed get overlayView() {
         return (<DocumentContentsView {...this.props} layoutKey={"overlayLayout"}
-            isTopMost={this.props.isTopMost} isSelected={returnFalse} select={emptyFunction} />);
+            isTopMost={this.props.isTopMost} isSelected={this.props.isSelected} select={emptyFunction} />);
     }
     render() {
         return this.overlayView;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 9764db1d4..740c50297 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -101,6 +101,8 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             document.addEventListener("pointermove", this.onPointerMove, true);
             document.addEventListener("pointerup", this.onPointerUp, true);
             document.addEventListener("keydown", this.marqueeCommand, true);
+            console.log(this.props.container.props.Document.title);
+            e.stopPropagation();
         }
         if (e.altKey) {
             e.preventDefault();
@@ -180,6 +182,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             if (ink) {
                 this.marqueeInkDelete(ink.inkData);
             }
+            SelectionManager.DeselectAll();
             this.cleanupInteractions(false);
             e.stopPropagation();
         }
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 9e58a8e7f..458a62c5b 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -17,6 +17,7 @@
   border-radius: inherit;
   border-color: $intermediate-color;
   box-sizing: border-box;
+  background-color: inherit;
   border-style: solid;
   overflow-y: scroll;
   overflow-x: hidden;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index ee6000da7..4b3172e82 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -24,8 +24,8 @@ import { StrCast, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
 import { RichTextField } from "../../../new_fields/RichTextField";
 import { Id } from "../../../new_fields/RefField";
 import { UndoManager } from "../../util/UndoManager";
-const { buildMenuItems } = require("prosemirror-example-setup");
-const { menuBar } = require("prosemirror-menu");
+import { Transform } from "prosemirror-transform";
+import { Transform as MatrixTransform } from "../../util/Transform";
 
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
 //
@@ -306,13 +306,11 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
     render() {
         let style = this.props.isOverlay ? "scroll" : "hidden";
         let rounded = NumCast(this.props.Document.borderRounding) < 0 ? "-rounded" : "";
-        let color = StrCast(this.props.Document.backgroundColor);
         let interactive = InkingControl.Instance.selectedTool ? "" : "interactive";
         return (
             <div className={`formattedTextBox-cont-${style}`} ref={this._ref}
                 style={{
                     pointerEvents: interactive ? "all" : "none",
-                    background: color,
                 }}
                 onKeyDown={this.onKeyPress}
                 onKeyPress={this.onKeyPress}
-- 
cgit v1.2.3-70-g09d2


From 890d43c23c5aaafc8ebc2978cd1ad2e19bfcd830 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 8 May 2019 18:41:15 -0400
Subject: fixed selection after marquee.

---
 .../views/collections/collectionFreeForm/MarqueeView.tsx       | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 740c50297..0345d5efd 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -9,16 +9,11 @@ import { PreviewCursor } from "../../PreviewCursor";
 import { CollectionFreeFormView } from "./CollectionFreeFormView";
 import "./MarqueeView.scss";
 import React = require("react");
-import { Utils, deepCopy } from "../../../../Utils";
+import { Utils } from "../../../../Utils";
 import { Doc } from "../../../../new_fields/Doc";
 import { NumCast, Cast } from "../../../../new_fields/Types";
 import { InkField, StrokeData } from "../../../../new_fields/InkField";
-import { Templates } from "../../Templates";
 import { List } from "../../../../new_fields/List";
-import { emitKeypressEvents } from "readline";
-import { listSpec } from "../../../../new_fields/Schema";
-import { undo } from "prosemirror-history";
-import { FormattedTextBox } from "../../nodes/FormattedTextBox";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -101,7 +96,6 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             document.addEventListener("pointermove", this.onPointerMove, true);
             document.addEventListener("pointerup", this.onPointerUp, true);
             document.addEventListener("keydown", this.marqueeCommand, true);
-            console.log(this.props.container.props.Document.title);
             e.stopPropagation();
         }
         if (e.altKey) {
@@ -247,6 +241,8 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             }
             else {
                 this.props.addDocument(newCollection, false);
+                SelectionManager.DeselectAll();
+                this.props.selectDocuments([newCollection]);
             }
             this.cleanupInteractions(false);
         } else
-- 
cgit v1.2.3-70-g09d2


From b5fac34cf22bcb47854c00671848e25b7ee9d37f Mon Sep 17 00:00:00 2001
From: Monika Hedman <monika_hedman@brown.edu>
Date: Wed, 8 May 2019 20:38:02 -0400
Subject: issues with icon

---
 src/client/views/SearchBox.scss | 50 ++++++++++++++++++++---------------------
 src/client/views/SearchBox.tsx  | 24 +++++++++++++++-----
 src/client/views/SearchItem.tsx | 36 ++++++++++++++++++++++++++---
 3 files changed, 76 insertions(+), 34 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index f4fc0029e..792d6dd3c 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -68,32 +68,32 @@
     top: 300px;
     display: flex;
     flex-direction: column;
-}
 
-.search-item {
-    width: 500px;
-    height: 50px;
-    background: $light-color-secondary;
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    transition: all 0.1s;
-    border-width: 0.11px;
-    border-style: none;
-    border-color: $intermediate-color;
-    border-bottom-style: solid;
-    padding: 10px;
-    white-space: nowrap;
-    font-size: 13px;
-}
+    .search-item {
+        width: 500px;
+        height: 50px;
+        background: $light-color-secondary;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        transition: all 0.1s;
+        border-width: 0.11px;
+        border-style: none;
+        border-color: $intermediate-color;
+        border-bottom-style: solid;
+        padding: 10px;
+        white-space: nowrap;
+        font-size: 13px;
+    }
 
-.search-item:hover {
-    transition: all 0.1s;
-    background: $lighter-alt-accent;
-}
+    .search-item:hover {
+        transition: all 0.1s;
+        background: $lighter-alt-accent;
+    }
 
-.search-title {
-    text-transform: uppercase;
-    text-align: left;
-    width: 8vw;
+    .search-title {
+        text-transform: uppercase;
+        text-align: left;
+        width: 8vw;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 827d468df..7dd1af4e7 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -67,7 +67,7 @@ export class SearchBox extends React.Component {
     }
 
     @action
-    handleClick = (e: Event): void => {
+    handleClickFilter = (e: Event): void => {
         var className = (e.target as any).className;
         var id = (e.target as any).id;
         if (className !== "filter-button" && className !== "filter-form") {
@@ -76,16 +76,28 @@ export class SearchBox extends React.Component {
 
     }
 
+    @action
+    handleClickResults = (e: Event): void => {
+        var className = (e.target as any).className;
+        var id = (e.target as any).id;
+        if (id !== "result") {
+            this._resultsOpen = false;
+        }
+
+    }
+
     componentWillMount() {
-        document.addEventListener('mousedown', this.handleClick, false);
+        document.addEventListener('mousedown', this.handleClickFilter, false);
+        document.addEventListener('mousedown', this.handleClickResults, false);
     }
 
     componentWillUnmount() {
-        document.removeEventListener('mousedown', this.handleClick, false);
+        document.removeEventListener('mousedown', this.handleClickFilter, false);
+        document.removeEventListener('mousedown', this.handleClickResults, false);
     }
 
     @action
-    toggleDisplay = () => {
+    toggleFilterDisplay = () => {
         this._open = !this._open;
     }
 
@@ -101,9 +113,9 @@ export class SearchBox extends React.Component {
                 <div className="searchBox" id="outer">
 
                     <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" onKeyPress={this.enter} />
-                    <button className="filter-button" onClick={this.toggleDisplay}> Filter </button>
+                    <button className="filter-button" onClick={this.toggleFilterDisplay}> Filter </button>
                     <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
-                    <div className="results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
+                    <div className="results" id="results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
                         {this._results.map(result => <SearchItem doc={result} key={result[Id]} />)}
                     </div>
                 </div>
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 81da7ebd2..539d6b5e5 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -1,21 +1,51 @@
 import React = require("react");
 import { Doc } from "../../new_fields/Doc";
 import { DocumentManager } from "../util/DocumentManager";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Cast } from "../../new_fields/Types";
+import { FieldView, FieldViewProps } from './nodes/FieldView';
+import { computed } from "mobx";
+import { IconField } from "../../new_fields/IconField";
+
 
 export interface SearchProps {
     doc: Doc;
 }
 
+library.add(faCaretUp);
+library.add(faObjectGroup);
+library.add(faStickyNote);
+library.add(faFilePdf);
+library.add(faFilm);
+
 export class SearchItem extends React.Component<SearchProps> {
 
     onClick = () => {
-        DocumentManager.Instance.jumpToDocument(this.props.doc)
+        DocumentManager.Instance.jumpToDocument(this.props.doc);
+    }
+
+    //needs help
+    // @computed get layout(): string { const field = Cast(this.props.doc[fieldKey], IconField); return field ? field.icon : "<p>Error loading icon data</p>"; }
+
+
+    public static DocumentIcon(layout: string) {
+        let button = layout.indexOf("PDFBox") !== -1 ? faFilePdf :
+            layout.indexOf("ImageBox") !== -1 ? faImage :
+                layout.indexOf("Formatted") !== -1 ? faStickyNote :
+                    layout.indexOf("Video") !== -1 ? faFilm :
+                        layout.indexOf("Collection") !== -1 ? faObjectGroup :
+                            faCaretUp;
+        return <FontAwesomeIcon icon={button} className="documentView-minimizedIcon" />;
     }
 
     render() {
         return (
-            <div className="search-item" onClick={this.onClick}>
-                <div className="search-title">{this.props.doc.title}</div>
+            <div className="search-item" id="result" onClick={this.onClick}>
+                <div className="search-title" id="result" >title: {this.props.doc.title}</div>
+                <div className="search-type" id="result" >Type: {this.props.doc.layout}</div>
+                {/* <div className="search-type" >{SearchItem.DocumentIcon(this.layout)}</div> */}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 086391b7e45ed4b3cb29602a776f5812f142fff2 Mon Sep 17 00:00:00 2001
From: Sam Wilkins <abdullah_ahmed@brown.edu>
Date: Wed, 8 May 2019 22:30:46 -0400
Subject: restoration of cursor functionality: cursor field

---
 src/client/views/collections/CollectionSubView.tsx | 21 +++----
 .../CollectionFreeFormRemoteCursors.tsx            | 66 +++++++++++++---------
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  4 +-
 src/new_fields/CursorField.ts                      | 55 ++++++++++++++++++
 src/new_fields/InkField.ts                         |  3 +-
 src/new_fields/List.ts                             | 39 +++++++++++--
 src/new_fields/TupleField.ts                       | 63 ---------------------
 7 files changed, 140 insertions(+), 111 deletions(-)
 create mode 100644 src/new_fields/CursorField.ts
 delete mode 100644 src/new_fields/TupleField.ts

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 1e8723fc6..232679a59 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -10,14 +10,14 @@ import * as rp from 'request-promise';
 import { CollectionView } from "./CollectionView";
 import { CollectionPDFView } from "./CollectionPDFView";
 import { CollectionVideoView } from "./CollectionVideoView";
-import { Doc, Opt } from "../../../new_fields/Doc";
+import { Doc, Opt, FieldResult } from "../../../new_fields/Doc";
 import { DocComponent } from "../DocComponent";
 import { listSpec } from "../../../new_fields/Schema";
-import { Cast, PromiseValue, FieldValue } from "../../../new_fields/Types";
+import { Cast, PromiseValue, FieldValue, ListSpec } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { DocServer } from "../../DocServer";
 import { ObjectField } from "../../../new_fields/ObjectField";
-import { TupleField } from "../../../new_fields/TupleField";
+import CursorField, { CursorPosition, CursorMetadata } from "../../../new_fields/CursorField";
 
 export interface CollectionViewProps extends FieldViewProps {
     addDocument: (document: Doc, allowDuplicates?: boolean) => boolean;
@@ -31,8 +31,6 @@ export interface SubCollectionViewProps extends CollectionViewProps {
     CollectionView: CollectionView | CollectionPDFView | CollectionVideoView;
 }
 
-export type CursorEntry = TupleField<[string, string], [number, number]>;
-
 export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
     class CollectionSubView extends DocComponent<SubCollectionViewProps, T>(schemaCtor) {
         private dropDisposer?: DragManager.DragDropDisposer;
@@ -56,25 +54,24 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
 
         @action
         protected async setCursorPosition(position: [number, number]) {
-            return;
             let ind;
             let doc = this.props.Document;
             let id = CurrentUserUtils.id;
             let email = CurrentUserUtils.email;
+            let pos = { x: position[0], y: position[1] };
             if (id && email) {
-                let textInfo: [string, string] = [id, email];
                 const proto = await doc.proto;
                 if (!proto) {
                     return;
                 }
-                let cursors = await Cast(proto!.cursors, listSpec(TupleField));
+                let cursors = Cast(proto.cursors, listSpec(CursorField));
                 if (!cursors) {
-                    proto!.cursors = cursors = new List<TupleField<[]>>();
+                    proto.cursors = cursors = new List<CursorField>();
                 }
-                if (cursors!.length > 0 && (ind = cursors!.findIndex(entry => entry.data[0][0] === id)) > -1) {
-                    cursors![ind].data[1] = position;
+                if (cursors.length > 0 && (ind = cursors.findIndex(entry => entry.data.metadata.id === id)) > -1) {
+                    cursors[ind].setPosition(pos);
                 } else {
-                    let entry = new TupleField<[string, string], [number, number]>([textInfo, position]);
+                    let entry = new CursorField({ metadata: { id: id, identifier: email }, position: pos });
                     cursors.push(entry);
                 }
             }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
index 036745eca..c22f430ac 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
@@ -1,26 +1,38 @@
 import { computed } from "mobx";
 import { observer } from "mobx-react";
-import { CollectionViewProps, CursorEntry } from "../CollectionSubView";
+import { CollectionViewProps } from "../CollectionSubView";
 import "./CollectionFreeFormView.scss";
 import React = require("react");
 import v5 = require("uuid/v5");
 import { CurrentUserUtils } from "../../../../server/authentication/models/current_user_utils";
+import CursorField from "../../../../new_fields/CursorField";
+import { List } from "../../../../new_fields/List";
+import { Cast } from "../../../../new_fields/Types";
+import { listSpec } from "../../../../new_fields/Schema";
 
 @observer
 export class CollectionFreeFormRemoteCursors extends React.Component<CollectionViewProps> {
-    protected getCursors(): CursorEntry[] {
+
+    protected getCursors(): CursorField[] {
         let doc = this.props.Document;
+
         let id = CurrentUserUtils.id;
-        let cursors = doc.GetList(KeyStore.Cursors, [] as CursorEntry[]);
-        let notMe = cursors.filter(entry => entry.Data[0][0] !== id);
-        return id ? notMe : [];
+        if (!id) {
+            return [];
+        }
+
+        let cursors = Cast(doc.cursors, listSpec(CursorField));
+        if (!cursors) {
+            doc.cursors = cursors = new List<CursorField>();
+        }
+
+        return cursors.filter(cursor => cursor.data.metadata.id !== id);
     }
 
     private crosshairs?: HTMLCanvasElement;
     drawCrosshairs = (backgroundColor: string) => {
         if (this.crosshairs) {
-            let c = this.crosshairs;
-            let ctx = c.getContext('2d');
+            let ctx = this.crosshairs.getContext('2d');
             if (ctx) {
                 ctx.fillStyle = backgroundColor;
                 ctx.fillRect(0, 0, 20, 20);
@@ -49,29 +61,27 @@ export class CollectionFreeFormRemoteCursors extends React.Component<CollectionV
             }
         }
     }
+
     @computed
     get sharedCursors() {
-        return this.getCursors().map(entry => {
-            if (entry.Data.length > 0) {
-                let id = entry.Data[0][0];
-                let email = entry.Data[0][1];
-                let point = entry.Data[1];
-                this.drawCrosshairs("#" + v5(id, v5.URL).substring(0, 6).toUpperCase() + "22");
-                return (
-                    <div key={id} className="collectionFreeFormRemoteCursors-cont"
-                        style={{ transform: `translate(${point[0] - 10}px, ${point[1] - 10}px)` }}
-                    >
-                        <canvas className="collectionFreeFormRemoteCursors-canvas"
-                            ref={(el) => { if (el) this.crosshairs = el; }}
-                            width={20}
-                            height={20}
-                        />
-                        <p className="collectionFreeFormRemoteCursors-symbol">
-                            {email[0].toUpperCase()}
-                        </p>
-                    </div>
-                );
-            }
+        return this.getCursors().map(c => {
+            let m = c.data.metadata;
+            let l = c.data.position;
+            this.drawCrosshairs("#" + v5(m.id, v5.URL).substring(0, 6).toUpperCase() + "22");
+            return (
+                <div key={m.id} className="collectionFreeFormRemoteCursors-cont"
+                    style={{ transform: `translate(${l.x - 10}px, ${l.y - 10}px)` }}
+                >
+                    <canvas className="collectionFreeFormRemoteCursors-canvas"
+                        ref={(el) => { if (el) this.crosshairs = el; }}
+                        width={20}
+                        height={20}
+                    />
+                    <p className="collectionFreeFormRemoteCursors-symbol">
+                        {m.identifier[0].toUpperCase()}
+                    </p>
+                </div>
+            );
         });
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 17c25c9db..59f7fa442 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -70,7 +70,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
     public getActiveDocuments = () => {
         const curPage = FieldValue(this.Document.curPage, -1);
-        return FieldValue(this.children, [] as Doc[]).filter(doc => {
+        return this.children.filter(doc => {
             var page = NumCast(doc.page, -1);
             return page === curPage || page === -1;
         });
@@ -314,7 +314,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                                 {this.childViews}
                             </InkingCanvas>
                         </CollectionFreeFormLinksView>
-                        {/* <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" /> */}
+                        <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />
                     </CollectionFreeFormViewPannableContents>
                     <CollectionFreeFormOverlayView {...this.getDocumentViewProps(this.props.Document)} {...this.props} />
                 </MarqueeView>
diff --git a/src/new_fields/CursorField.ts b/src/new_fields/CursorField.ts
new file mode 100644
index 000000000..7fd326a5f
--- /dev/null
+++ b/src/new_fields/CursorField.ts
@@ -0,0 +1,55 @@
+import { ObjectField, Copy, OnUpdate } from "./ObjectField";
+import { observable } from "mobx";
+import { Deserializable } from "../client/util/SerializationHelper";
+import { serializable, createSimpleSchema, object } from "serializr";
+
+export type CursorPosition = {
+    x: number,
+    y: number
+}
+
+export type CursorMetadata = {
+    id: string,
+    identifier: string
+}
+
+export type CursorData = {
+    metadata: CursorMetadata,
+    position: CursorPosition
+}
+
+const PositionSchema = createSimpleSchema({
+    x: true,
+    y: true
+});
+
+const MetadataSchema = createSimpleSchema({
+    id: true,
+    identifier: true
+});
+
+const CursorSchema = createSimpleSchema({
+    metadata: object(MetadataSchema),
+    position: object(PositionSchema)
+});
+
+@Deserializable("cursor")
+export default class CursorField extends ObjectField {
+
+    @serializable(object(CursorSchema))
+    readonly data: CursorData;
+
+    constructor(data: CursorData) {
+        super();
+        this.data = data;
+    }
+
+    setPosition(position: CursorPosition) {
+        this.data.position = position;
+        this[OnUpdate]();
+    }
+
+    [Copy]() {
+        return new CursorField(this.data);
+    }
+}
\ No newline at end of file
diff --git a/src/new_fields/InkField.ts b/src/new_fields/InkField.ts
index a3157857f..2d75f8a19 100644
--- a/src/new_fields/InkField.ts
+++ b/src/new_fields/InkField.ts
@@ -1,8 +1,6 @@
 import { Deserializable } from "../client/util/SerializationHelper";
 import { serializable, custom, createSimpleSchema, list, object, map } from "serializr";
 import { ObjectField, Copy } from "./ObjectField";
-import { number } from "prop-types";
-import { any } from "bluebird";
 import { deepCopy } from "../Utils";
 
 export enum InkTool {
@@ -11,6 +9,7 @@ export enum InkTool {
     Highlighter,
     Eraser
 }
+
 export interface StrokeData {
     pathData: Array<{ x: number, y: number }>;
     color: string;
diff --git a/src/new_fields/List.ts b/src/new_fields/List.ts
index 96018dafa..3e5fee646 100644
--- a/src/new_fields/List.ts
+++ b/src/new_fields/List.ts
@@ -1,9 +1,9 @@
 import { Deserializable, autoObject } from "../client/util/SerializationHelper";
 import { Field, Update, Self, FieldResult } from "./Doc";
-import { setter, getter, deleteProperty } from "./util";
+import { setter, getter, deleteProperty, updateFunction } from "./util";
 import { serializable, alias, list } from "serializr";
 import { observable, action } from "mobx";
-import { ObjectField, OnUpdate, Copy } from "./ObjectField";
+import { ObjectField, OnUpdate, Copy, Parent } from "./ObjectField";
 import { RefField } from "./RefField";
 import { ProxyField } from "./Proxy";
 
@@ -27,7 +27,17 @@ const listHandlers: any = {
     },
     push: action(function (this: any, ...items: any[]) {
         items = items.map(toObjectField);
-        const res = this[Self].__fields.push(...items);
+        const list = this[Self];
+        const length = list.__fields.length;
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            //TODO Error checking to make sure parent doesn't already exist
+            if (item instanceof ObjectField) {
+                item[Parent] = list;
+                item[OnUpdate] = updateFunction(list, i + length, item, this);
+            }
+        }
+        const res = list.__fields.push(...items);
         this[Update]();
         return res;
     }),
@@ -48,12 +58,33 @@ const listHandlers: any = {
     },
     splice: action(function (this: any, start: number, deleteCount: number, ...items: any[]) {
         items = items.map(toObjectField);
-        const res = this[Self].__fields.splice(start, deleteCount, ...items);
+        const list = this[Self];
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            //TODO Error checking to make sure parent doesn't already exist
+            //TODO Need to change indices of other fields in array
+            if (item instanceof ObjectField) {
+                item[Parent] = list;
+                item[OnUpdate] = updateFunction(list, i + start, item, this);
+            }
+        }
+        const res = list.__fields.splice(start, deleteCount, ...items);
         this[Update]();
         return res.map(toRealField);
     }),
     unshift(...items: any[]) {
         items = items.map(toObjectField);
+        const list = this[Self];
+        const length = list.__fields.length;
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            //TODO Error checking to make sure parent doesn't already exist
+            //TODO Need to change indices of other fields in array
+            if (item instanceof ObjectField) {
+                item[Parent] = list;
+                item[OnUpdate] = updateFunction(list, i, item, this);
+            }
+        }
         const res = this[Self].__fields.unshift(...items);
         this[Update]();
         return res;
diff --git a/src/new_fields/TupleField.ts b/src/new_fields/TupleField.ts
deleted file mode 100644
index 1ff57fefc..000000000
--- a/src/new_fields/TupleField.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { ObjectField, Copy } from "./ObjectField";
-import { IObservableArray, IArrayChange, IArraySplice, observe, Lambda, observable } from "mobx";
-import { UndoManager } from "../client/util/UndoManager";
-import { Field } from "./Doc";
-import { Deserializable } from "../client/util/SerializationHelper";
-import { serializable, createSimpleSchema, list, object } from "serializr";
-import { array } from "prop-types";
-
-const tupleSchema = createSimpleSchema({
-
-});
-
-@Deserializable("tuple")
-export class TupleField<T, U> extends ObjectField {
-
-
-    @serializable(list(object(tupleSchema)))
-    private Data: [T, U];
-
-    public get data() {
-        return this.Data;
-    }
-
-    constructor(data: [T, U]) {
-        super();
-        this.Data = data;
-        this.observeTuple();
-    }
-
-    private observeDisposer: Lambda | undefined;
-    private observeTuple(): void {
-        this.observeDisposer = observe(this.Data as (T | U)[] as IObservableArray<T | U>, (change: IArrayChange<T | U> | IArraySplice<T | U>) => {
-            if (change.type === "update") {
-                UndoManager.AddEvent({
-                    undo: () => this.Data[change.index] = change.oldValue,
-                    redo: () => this.Data[change.index] = change.newValue
-                });
-            } else {
-                throw new Error("Why are you messing with the length of a tuple, huh?");
-            }
-        });
-    }
-
-    protected setData(value: [T, U]) {
-        if (this.observeDisposer) {
-            this.observeDisposer();
-        }
-        this.Data = observable(value) as (T | U)[] as [T, U];
-        this.observeTuple();
-    }
-
-    UpdateFromServer(values: [T, U]) {
-        this.setData(values);
-    }
-
-    ToScriptString(): string {
-        return `new TupleField([${this.Data[0], this.Data[1]}])`;
-    }
-
-    [Copy]() {
-        return new TupleField<T, U>(this.Data);
-    }
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 59c52553a942d327b3cdf7377eb85f4b0b19c2dd Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 8 May 2019 23:52:13 -0400
Subject: added imageResize handle in text boxes.

---
 src/client/util/RichTextSchema.tsx                 | 85 +++++++++++++++++++++-
 src/client/util/TooltipTextMenu.tsx                |  1 +
 .../collections/collectionFreeForm/MarqueeView.tsx |  6 +-
 src/client/views/nodes/FormattedTextBox.tsx        | 22 ++----
 4 files changed, 91 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
index 9ef71e305..c036bfe97 100644
--- a/src/client/util/RichTextSchema.tsx
+++ b/src/client/util/RichTextSchema.tsx
@@ -84,6 +84,7 @@ export const nodes: { [index: string]: NodeSpec } = {
         inline: true,
         attrs: {
             src: {},
+            width: { default: "100px" },
             alt: { default: null },
             title: { default: null }
         },
@@ -94,11 +95,16 @@ export const nodes: { [index: string]: NodeSpec } = {
                 return {
                     src: dom.getAttribute("src"),
                     title: dom.getAttribute("title"),
-                    alt: dom.getAttribute("alt")
-                };
+                    alt: dom.getAttribute("alt"),
+                    width: Math.min(100, Number(dom.getAttribute("width"))),
+                }
             }
         }],
-        toDOM(node: any) { return ["img", node.attrs]; }
+        // TODO if we don't define toDom, something weird happens: dragging the image will not move it but clone it. Why?
+        toDOM(node) {
+            const attrs = { style: `width: ${node.attrs.width}` }
+            return ["img", { ...node.attrs, ...attrs }]
+        }
     },
 
     // :: NodeSpec A hard line break, represented in the DOM as `<br>`.
@@ -290,6 +296,13 @@ export const marks: { [index: string]: MarkSpec } = {
         }]
     },
 
+    p14: {
+        parseDOM: [{ style: 'font-size: 14px;' }],
+        toDOM: () => ['span', {
+            style: 'font-size: 14px;'
+        }]
+    },
+
     p16: {
         parseDOM: [{ style: 'font-size: 16px;' }],
         toDOM: () => ['span', {
@@ -325,7 +338,73 @@ export const marks: { [index: string]: MarkSpec } = {
         }]
     },
 };
+function getFontSize(element: any) {
+    return parseFloat((getComputedStyle(element) as any).fontSize);
+}
+
+export class ImageResizeView {
+    _handle: HTMLElement;
+    _img: HTMLElement;
+    _outer: HTMLElement;
+    constructor(node: any, view: any, getPos: any) {
+        this._handle = document.createElement("span");
+        this._img = document.createElement("img");
+        this._outer = document.createElement("span");
+        this._outer.style.position = "relative";
+        this._outer.style.width = node.attrs.width;
+        this._outer.style.display = "inline-block";
+        this._outer.style.overflow = "hidden";
+
+        this._img.setAttribute("src", node.attrs.src);
+        this._img.style.width = "100%";
+        this._handle.style.position = "absolute";
+        this._handle.style.width = "20px";
+        this._handle.style.height = "20px";
+        this._handle.style.backgroundColor = "blue";
+        this._handle.style.borderRadius = "15px";
+        this._handle.style.display = "none";
+        this._handle.style.bottom = "-10px";
+        this._handle.style.right = "-10px";
+        let self = this;
+        this._handle.onpointerdown = function (e: any) {
+            e.preventDefault();
+            const startX = e.pageX;
+            const startWidth = parseFloat(node.attrs.width);
+            const onpointermove = (e: any) => {
+                const currentX = e.pageX;
+                const diffInPx = currentX - startX;
+                self._outer.style.width = `${startWidth + diffInPx}`;
+            }
+
+            const onpointerup = () => {
+                document.removeEventListener("pointermove", onpointermove);
+                document.removeEventListener("pointerup", onpointerup);
+                view.dispatch(
+                    view.state.tr.setNodeMarkup(getPos(), null,
+                        { src: node.attrs.src, width: self._outer.style.width }));
+            }
+
+            document.addEventListener("pointermove", onpointermove)
+            document.addEventListener("pointerup", onpointerup)
+        }
 
+        this._outer.appendChild(this._handle);
+        this._outer.appendChild(this._img);
+        (this as any).dom = this._outer;
+    }
+
+    selectNode() {
+        this._img.classList.add("ProseMirror-selectednode");
+
+        this._handle.style.display = "";
+    }
+
+    deselectNode() {
+        this._img.classList.remove("ProseMirror-selectednode");
+
+        this._handle.style.display = "none";
+    }
+}
 // :: Schema
 // This schema rougly corresponds to the document schema used by
 // [CommonMark](http://commonmark.org/), minus the list elements,
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 68a73375e..e33c53a1a 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -94,6 +94,7 @@ export class TooltipTextMenu {
         this.fontSizeToNum = new Map();
         this.fontSizeToNum.set(schema.marks.p10, 10);
         this.fontSizeToNum.set(schema.marks.p12, 12);
+        this.fontSizeToNum.set(schema.marks.p14, 14);
         this.fontSizeToNum.set(schema.marks.p16, 16);
         this.fontSizeToNum.set(schema.marks.p24, 24);
         this.fontSizeToNum.set(schema.marks.p32, 32);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 0345d5efd..6057aaeba 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -180,7 +180,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             this.cleanupInteractions(false);
             e.stopPropagation();
         }
-        if (e.key === "c" || e.key === "r" || e.key === "s" || e.key === "e") {
+        if (e.key === "c" || e.key === "r" || e.key === "s" || e.key === "e" || e.key === "p") {
             this._commandExecuted = true;
             e.stopPropagation();
             let bounds = this.Bounds;
@@ -218,12 +218,12 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
             this.marqueeInkDelete(inkData);
             // SelectionManager.DeselectAll();
-            if (e.key === "s" || e.key === "r") {
+            if (e.key === "s" || e.key === "r" || e.key === "p") {
                 e.preventDefault();
                 let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
                 let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
 
-                if (e.key === "s") {
+                if (e.key === "s" || e.key === "p") {
                     summary.proto!.maximizeOnRight = true;
                     newCollection.proto!.summaryDoc = summary;
                     selected = [newCollection];
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 4b3172e82..445a834ee 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -6,7 +6,7 @@ import { EditorState, Plugin, Transaction } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import buildKeymap from "../../util/ProsemirrorKeymap";
 import { inpRules } from "../../util/RichTextRules";
-import { schema } from "../../util/RichTextSchema";
+import { schema, ImageResizeView } from "../../util/RichTextSchema";
 import { TooltipLinkingMenu } from "../../util/TooltipLinkingMenu";
 import { TooltipTextMenu } from "../../util/TooltipTextMenu";
 import { ContextMenu } from "../../views/ContextMenu";
@@ -24,8 +24,6 @@ import { StrCast, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
 import { RichTextField } from "../../../new_fields/RichTextField";
 import { Id } from "../../../new_fields/RefField";
 import { UndoManager } from "../../util/UndoManager";
-import { Transform } from "prosemirror-transform";
-import { Transform as MatrixTransform } from "../../util/Transform";
 
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
 //
@@ -149,7 +147,10 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         if (this._proseRef.current) {
             this._editorView = new EditorView(this._proseRef.current, {
                 state: field && field.Data ? EditorState.fromJSON(config, JSON.parse(field.Data)) : EditorState.create(config),
-                dispatchTransaction: this.dispatchTransaction
+                dispatchTransaction: this.dispatchTransaction,
+                nodeViews: {
+                    image(node, view, getPos) { return new ImageResizeView(node, view, getPos) }
+                }
             });
             let text = StrCast(this.props.Document.documentText);
             if (text.startsWith("@@@")) {
@@ -228,19 +229,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             description: NumCast(this.props.Document.nativeWidth) ? "Unfreeze" : "Freeze",
             event: this.textCapability
         });
-
-        // ContextMenu.Instance.addItem({
-        //     description: "Submenu",
-        //     items: [
-        //         {
-        //             description: "item 1", event:
-        //     },
-        //         {
-        //             description: "item 2", event:
-        //     }
-        //     ]
-        // })
-        // e.stopPropagation()
     }
 
     onPointerWheel = (e: React.WheelEvent): void => {
-- 
cgit v1.2.3-70-g09d2


From fc21d178bd636229ba8338c3f3f9c12cc267a8d3 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 9 May 2019 00:01:47 -0400
Subject: keep image selected on pointer up.

---
 src/client/util/RichTextSchema.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
index c036bfe97..c0e6f7899 100644
--- a/src/client/util/RichTextSchema.tsx
+++ b/src/client/util/RichTextSchema.tsx
@@ -368,6 +368,7 @@ export class ImageResizeView {
         let self = this;
         this._handle.onpointerdown = function (e: any) {
             e.preventDefault();
+            e.stopPropagation();
             const startX = e.pageX;
             const startWidth = parseFloat(node.attrs.width);
             const onpointermove = (e: any) => {
@@ -381,7 +382,8 @@ export class ImageResizeView {
                 document.removeEventListener("pointerup", onpointerup);
                 view.dispatch(
                     view.state.tr.setNodeMarkup(getPos(), null,
-                        { src: node.attrs.src, width: self._outer.style.width }));
+                        { src: node.attrs.src, width: self._outer.style.width })
+                        .setSelection(view.state.selection));
             }
 
             document.addEventListener("pointermove", onpointermove)
-- 
cgit v1.2.3-70-g09d2


From c7b2ccddb6d75283a7255b612693c5e809b68f5f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 9 May 2019 00:26:09 -0400
Subject: Added lists and documents to search

---
 solr/conf/schema.xml              | 12 +++++----
 src/client/documents/Documents.ts |  1 +
 src/server/index.ts               | 51 ++++++++++++++++++++++++++++-----------
 3 files changed, 45 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/solr/conf/schema.xml b/solr/conf/schema.xml
index 92ba9c6ff..a568db14c 100644
--- a/solr/conf/schema.xml
+++ b/solr/conf/schema.xml
@@ -35,19 +35,21 @@
     </analyzer>
   </fieldType>
 
-  <fieldType name="plong" class="solr.LongPointField" docValues="true"/>
+  <fieldType name="plong" class="solr.LongPointField"/>
   <fieldType name="boolean" class="solr.BoolField" sortMissingLast="true"/>
-  <fieldType name="pdate" class="solr.DatePointField" docValues="true"/>
-  <fieldType name="pdaterange" class="solr.DateRangeField" docValues="true"/>
-  <fieldType name="pdouble" class="solr.DoublePointField" docValues="true"/>
+  <fieldType name="pdate" class="solr.DatePointField"/>
+  <fieldType name="pdaterange" class="solr.DateRangeField"/>
+  <fieldType name="pdouble" class="solr.DoublePointField"/>
 
   <field name="text" type="text" indexed="true" stored="false" uninvertible="false" multiValued="true"/>
   <field name="id" type="string" indexed="true" stored="true" uninvertible="false" required="true"/>
-  <field name="_version_" type="plong" indexed="false" stored="false"/>
+  <field name="_version_" type="plong" indexed="true" stored="true"/>
 
   <dynamicField name="*_t" type="text" indexed="true" stored="true" uninvertible="false" docValues="false"/>
   <dynamicField name="*_n" type="pdouble" indexed="true" stored="true" uninvertible="false" docValues="false"/>
   <dynamicField name="*_d" type="pdaterange" indexed="true" stored="true" uninvertible="false" docValues="false"/>
+  <dynamicField name="*_l" type="text" indexed="true" stored="true" uninvertible="false" docValues="false" multiValued="true"/>
+  <dynamicField name="*_i" type="string" indexed="true" stored="true" uninvertible="false" docValues="false"/>
 
   <dynamicField name="*_a" type="text" indexed="true" stored="false" uninvertible="false" docValues="false"/>
 
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index a770ccc93..00233a989 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -175,6 +175,7 @@ export namespace Docs {
         if (!("creationDate" in protoProps)) {
             protoProps.creationDate = new DateField;
         }
+        protoProps.isPrototype = true;
 
         return SetDelegateOptions(SetInstanceOptions(proto, protoProps, data), delegateProps);
     }
diff --git a/src/server/index.ts b/src/server/index.ts
index 5c54babb2..93e4cafbf 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -295,7 +295,7 @@ function GetRefFields([ids, callback]: [string[], (result?: Transferable[]) => v
 }
 
 
-const suffixMap: { [type: string]: string | [string, string] | [string, string, (json: any) => any] } = {
+const suffixMap: { [type: string]: (string | [string, string | ((json: any) => any)]) } = {
     "number": "_n",
     "string": "_t",
     "image": ["_t", "url"],
@@ -303,9 +303,40 @@ const suffixMap: { [type: string]: string | [string, string] | [string, string,
     "pdf": ["_t", "url"],
     "audio": ["_t", "url"],
     "web": ["_t", "url"],
-    "date": ["_d", "date", millis => new Date(millis).toISOString()],
+    "date": ["_d", value => new Date(value.date).toISOString()],
+    "proxy": ["_i", "fieldId"],
+    "list": ["_l", list => {
+        const results = [];
+        for (const value of list.fields) {
+            const term = ToSearchTerm(value);
+            if (term) {
+                results.push(term.value);
+            }
+        }
+        return results.length ? results : null;
+    }]
 };
 
+function ToSearchTerm(val: any): { suffix: string, value: any } | undefined {
+    const type = val.__type || typeof val;
+    let suffix = suffixMap[type];
+    if (!suffix) {
+        return;
+    }
+
+    if (Array.isArray(suffix)) {
+        const accessor = suffix[1];
+        if (typeof accessor === "function") {
+            val = accessor(val);
+        } else {
+            val = val[accessor];
+        }
+        suffix = suffix[0];
+    }
+
+    return { suffix, value: val }
+}
+
 function UpdateField(socket: Socket, diff: Diff) {
     Database.Instance.update(diff.id, diff.diff,
         () => socket.broadcast.emit(MessageStore.UpdateField.Message, diff), false, "newDocuments");
@@ -318,20 +349,12 @@ function UpdateField(socket: Socket, diff: Diff) {
     for (let key in docfield) {
         if (!key.startsWith("fields.")) continue;
         let val = docfield[key];
-        const type = val.__type || typeof val;
-        let suffix = suffixMap[type];
-        if (suffix !== undefined) {
-            if (Array.isArray(suffix)) {
-                val = val[suffix[1]];
-                const func = suffix[2];
-                if (func) {
-                    val = func(val);
-                }
-                suffix = suffix[0];
-            }
+        let term = ToSearchTerm(val);
+        if (term !== undefined) {
+            let { suffix, value } = term;
             key = key.substring(7);
             Object.values(suffixMap).forEach(suf => update[key + suf] = null);
-            update[key + suffix] = { set: val };
+            update[key + suffix] = { set: value };
             dynfield = true;
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 9015421a227ab58f309906eabf884654d3a31a17 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 9 May 2019 11:58:36 -0400
Subject: added start of hyperlinks to text boxes

---
 src/client/util/DragManager.ts          |   3 +-
 src/client/util/TooltipTextMenu.tsx     | 101 +++++++++++++++++++++++++++++++-
 src/client/views/nodes/DocumentView.tsx |   1 +
 3 files changed, 102 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index ec192eaff..fbf20e244 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -172,6 +172,7 @@ export namespace DragManager {
         droppedDocuments: Doc[] = [];
         linkSourceDocument: Doc;
         blacklist: Doc[];
+        dontClearTextBox?: boolean;
         [id: string]: any;
     }
 
@@ -188,7 +189,7 @@ export namespace DragManager {
             dragDiv.style.pointerEvents = "none";
             DragManager.Root().appendChild(dragDiv);
         }
-        MainOverlayTextBox.Instance.SetTextDoc();
+        if (!dragData.dontClearTextBox) MainOverlayTextBox.Instance.SetTextDoc();
 
         let scaleXs: number[] = [];
         let scaleYs: number[] = [];
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index e33c53a1a..15895fd1c 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -6,19 +6,28 @@ import { keymap } from "prosemirror-keymap";
 import { EditorState, Transaction, NodeSelection, TextSelection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { schema } from "./RichTextSchema";
-import { Schema, NodeType, MarkType } from "prosemirror-model";
+import { Schema, NodeType, MarkType, Mark } from "prosemirror-model";
 import React = require("react");
 import "./TooltipTextMenu.scss";
 const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { wrapInList, bulletList, liftListItem, listItem, } from 'prosemirror-schema-list';
-import { liftTarget } from 'prosemirror-transform';
+import { liftTarget, RemoveMarkStep, AddMarkStep } from 'prosemirror-transform';
 import {
     faListUl,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FieldViewProps } from "../views/nodes/FieldView";
 import { throwStatement } from "babel-types";
+import { View } from "@react-pdf/renderer";
+import { DragManager } from "./DragManager";
+import { Doc, Opt, Field } from "../../new_fields/Doc";
+import { Id } from "../../new_fields/RefField";
+import { Utils } from "../northstar/utils/Utils";
+import { DocServer } from "../DocServer";
+import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { DocumentManager } from "./DocumentManager";
 
 const SVG = "http://www.w3.org/2000/svg";
 
@@ -37,6 +46,8 @@ export class TooltipTextMenu {
     private fontStylesToName: Map<MarkType, string>;
     private listTypeToIcon: Map<NodeType, string>;
     private fontSizeIndicator: HTMLSpanElement = document.createElement("span");
+    private linkEditor?: HTMLDivElement;
+    private linkText?: HTMLDivElement;
     //dropdown doms
     private fontSizeDom?: Node;
     private fontStyleDom?: Node;
@@ -150,6 +161,90 @@ export class TooltipTextMenu {
         this.tooltip.appendChild(this.fontStyleDom);
     }
 
+    updateLinkMenu() {
+        if (!this.linkEditor || !this.linkText) {
+            this.linkEditor = document.createElement("div");
+            this.linkEditor.style.color = "white";
+            this.linkText = document.createElement("div");
+            this.linkText.style.cssFloat = "left";
+            this.linkText.style.marginRight = "5px";
+            this.linkText.setAttribute("contenteditable", "true");
+            this.linkText.style.color = "white";
+            let linkBtn = document.createElement("div");
+            linkBtn.textContent = ">>";
+            linkBtn.style.width = "20px";
+            linkBtn.style.height = "20px";
+            linkBtn.style.color = "white";
+            linkBtn.style.cssFloat = "left";
+            linkBtn.onpointerdown = (e: PointerEvent) => {
+                let node = this.view.state.selection.$from.nodeAfter;
+                let link = node && node.marks.find(m => m.type.name === "link");
+                if (link) {
+                    console.log("Link to : " + link.attrs.href);
+                    let href: string = link.attrs.href;
+                    if (href.indexOf(DocServer.prepend("/doc/")) === 0) {
+                        let docid = href.replace(DocServer.prepend("/doc/"), "");
+                        DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
+                            if (f instanceof Doc) {
+                                if (DocumentManager.Instance.getDocumentView(f))
+                                    DocumentManager.Instance.getDocumentView(f)!.props.focus(f);
+                                else CollectionDockingView.Instance.AddRightSplit(f);
+                            }
+                        }));
+                    }
+                    e.stopPropagation();
+                    e.preventDefault();
+                }
+            }
+            let linkDrag = document.createElement("div");
+            linkDrag.textContent = "O";
+            linkDrag.style.width = "20px";
+            linkDrag.style.height = "20px";
+            linkDrag.style.color = "white";
+            linkDrag.style.cssFloat = "left";
+            linkDrag.onpointerdown = (e: PointerEvent) => {
+                let dragData = new DragManager.LinkDragData(this.editorProps.Document);
+                dragData.dontClearTextBox = true;
+                DragManager.StartLinkDrag(this.linkEditor!, dragData, e.clientX, e.clientY,
+                    {
+                        handlers: {
+                            dragComplete: action(() => {
+                                let m = dragData.droppedDocuments as Doc[];
+                                this.makeLink(DocServer.prepend("/doc/" + m[0][Id]));
+                            }),
+                        },
+                        hideSource: false
+                    })
+            };
+            this.linkEditor.appendChild(this.linkText);
+            this.linkEditor.appendChild(linkBtn);
+            this.linkEditor.appendChild(linkDrag)
+            this.tooltip.appendChild(this.linkEditor);
+        }
+
+        let node = this.view.state.selection.$from.nodeAfter;
+        let link = node && node.marks.find(m => m.type.name === "link");
+        this.linkText.textContent = link ? link.attrs.href : "-empty-";
+
+        this.linkText.onkeydown = (e: KeyboardEvent) => {
+            if (e.key === "Enter") {
+                this.makeLink(this.linkText!.textContent!);
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        }
+        this.tooltip.appendChild(this.linkEditor);
+    }
+
+    makeLink = (target: string) => {
+        let node = this.view.state.selection.$from.nodeAfter;
+        let link = this.view.state.schema.mark(this.view.state.schema.marks.link, { href: target });
+        this.view.dispatch(this.view.state.tr.removeMark(this.view.state.selection.from, this.view.state.selection.to, this.view.state.schema.marks.link));
+        this.view.dispatch(this.view.state.tr.addMark(this.view.state.selection.from, this.view.state.selection.to, link));
+        node = this.view.state.selection.$from.nodeAfter;
+        link = node && node.marks.find(m => m.type.name === "link");
+    }
+
     //will display a remove-list-type button if selection is in list, otherwise will show list type dropdown
     updateListItemDropdown(label: string, listTypeBtn: Node) {
         //remove old btn
@@ -348,6 +443,8 @@ export class TooltipTextMenu {
         } else { //multiple font sizes selected
             this.updateFontSizeDropdown("Various");
         }
+
+        this.updateLinkMenu();
     }
 
     //finds all active marks on selection in given group
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 38efeeba5..c3bf36553 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -238,6 +238,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             const protoDest = destDoc.proto;
             const protoSrc = sourceDoc.proto;
             Doc.MakeLink(protoSrc ? protoSrc : sourceDoc, protoDest ? protoDest : destDoc);
+            de.data.droppedDocuments.push(destDoc);
             e.stopPropagation();
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 244d4d127e7e1a0faadbc5a8baed7922ef03522c Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 9 May 2019 14:11:35 -0400
Subject: cleaned up textlinking a little.

---
 src/client/util/DragManager.ts                     | 13 ++--
 src/client/util/SelectionManager.ts                |  4 +-
 src/client/util/TooltipTextMenu.tsx                | 25 +++---
 src/client/views/DocumentDecorations.tsx           |  8 +-
 src/client/views/MainOverlayTextBox.tsx            | 30 ++++---
 .../views/collections/CollectionSchemaView.tsx     |  3 +-
 src/client/views/collections/CollectionSubView.tsx |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  8 +-
 src/client/views/nodes/FieldView.tsx               |  2 +-
 src/client/views/nodes/FormattedTextBox.tsx        | 91 ++++++++++++++++++----
 10 files changed, 122 insertions(+), 64 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index fbf20e244..eaf851a75 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,11 +1,9 @@
-import { action } from "mobx";
+import { action, runInAction } from "mobx";
+import { Doc, DocListCast } from "../../new_fields/Doc";
+import { Cast } from "../../new_fields/Types";
 import { emptyFunction } from "../../Utils";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import * as globalCssVariables from "../views/globalCssVariables.scss";
-import { MainOverlayTextBox } from "../views/MainOverlayTextBox";
-import { Doc, DocListCast } from "../../new_fields/Doc";
-import { Cast } from "../../new_fields/Types";
-import { listSpec } from "../../new_fields/Schema";
 
 export type dropActionType = "alias" | "copy" | undefined;
 export function SetupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Doc, moveFunc?: DragManager.MoveFunction, dropAction?: dropActionType) {
@@ -154,7 +152,10 @@ export namespace DragManager {
         [id: string]: any;
     }
 
+    export let StartDragFunctions: (() => void)[] = [];
+
     export function StartDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions) {
+        runInAction(() => StartDragFunctions.map(func => func()));
         StartDrag(eles, dragData, downX, downY, options,
             (dropData: { [id: string]: any }) =>
                 (dropData.droppedDocuments = dragData.userDropAction == "alias" || (!dragData.userDropAction && dragData.dropAction == "alias") ?
@@ -189,7 +190,6 @@ export namespace DragManager {
             dragDiv.style.pointerEvents = "none";
             DragManager.Root().appendChild(dragDiv);
         }
-        if (!dragData.dontClearTextBox) MainOverlayTextBox.Instance.SetTextDoc();
 
         let scaleXs: number[] = [];
         let scaleYs: number[] = [];
@@ -217,6 +217,7 @@ export namespace DragManager {
             dragElement.style.top = "0";
             dragElement.style.bottom = "";
             dragElement.style.left = "0";
+            dragElement.style.color = "black";
             dragElement.style.transformOrigin = "0 0";
             dragElement.style.zIndex = globalCssVariables.contextMenuZindex;// "1000";
             dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`;
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index fe5acf4b4..a3a8172c7 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -1,7 +1,7 @@
 import { observable, action } from "mobx";
 import { Doc } from "../../new_fields/Doc";
-import { MainOverlayTextBox } from "../views/MainOverlayTextBox";
 import { DocumentView } from "../views/nodes/DocumentView";
+import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
 
 export namespace SelectionManager {
     class Manager {
@@ -25,7 +25,7 @@ export namespace SelectionManager {
         DeselectAll(): void {
             manager.SelectedDocuments.map(dv => dv.props.whenActiveChanged(false));
             manager.SelectedDocuments = [];
-            MainOverlayTextBox.Instance.SetTextDoc();
+            FormattedTextBox.InputBoxOverlay = undefined;
         }
         @action
         ReselectAll() {
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 15895fd1c..6eb654319 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -48,6 +48,7 @@ export class TooltipTextMenu {
     private fontSizeIndicator: HTMLSpanElement = document.createElement("span");
     private linkEditor?: HTMLDivElement;
     private linkText?: HTMLDivElement;
+    private linkDrag?: HTMLImageElement;
     //dropdown doms
     private fontSizeDom?: Node;
     private fontStyleDom?: Node;
@@ -168,8 +169,13 @@ export class TooltipTextMenu {
             this.linkText = document.createElement("div");
             this.linkText.style.cssFloat = "left";
             this.linkText.style.marginRight = "5px";
+            this.linkText.style.marginLeft = "5px";
             this.linkText.setAttribute("contenteditable", "true");
+            this.linkText.style.whiteSpace = "nowrap";
+            this.linkText.style.width = "150px";
+            this.linkText.style.overflow = "hidden";
             this.linkText.style.color = "white";
+            this.linkText.onpointerdown = (e: PointerEvent) => { e.stopPropagation(); }
             let linkBtn = document.createElement("div");
             linkBtn.textContent = ">>";
             linkBtn.style.width = "20px";
@@ -196,16 +202,17 @@ export class TooltipTextMenu {
                     e.preventDefault();
                 }
             }
-            let linkDrag = document.createElement("div");
-            linkDrag.textContent = "O";
-            linkDrag.style.width = "20px";
-            linkDrag.style.height = "20px";
-            linkDrag.style.color = "white";
-            linkDrag.style.cssFloat = "left";
-            linkDrag.onpointerdown = (e: PointerEvent) => {
+            this.linkDrag = document.createElement("img");
+            this.linkDrag.src = "https://seogurusnyc.com/wp-content/uploads/2016/12/link-1.png";
+            this.linkDrag.style.width = "20px";
+            this.linkDrag.style.height = "20px";
+            this.linkDrag.style.color = "white";
+            this.linkDrag.style.background = "black";
+            this.linkDrag.style.cssFloat = "left";
+            this.linkDrag.onpointerdown = (e: PointerEvent) => {
                 let dragData = new DragManager.LinkDragData(this.editorProps.Document);
                 dragData.dontClearTextBox = true;
-                DragManager.StartLinkDrag(this.linkEditor!, dragData, e.clientX, e.clientY,
+                DragManager.StartLinkDrag(this.linkDrag!, dragData, e.clientX, e.clientY,
                     {
                         handlers: {
                             dragComplete: action(() => {
@@ -216,9 +223,9 @@ export class TooltipTextMenu {
                         hideSource: false
                     })
             };
+            this.linkEditor.appendChild(this.linkDrag);
             this.linkEditor.appendChild(this.linkText);
             this.linkEditor.appendChild(linkBtn);
-            this.linkEditor.appendChild(linkDrag)
             this.tooltip.appendChild(this.linkEditor);
         }
 
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index e3eb034fa..85ddadd64 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -5,7 +5,6 @@ import { DragLinksAsDocuments, DragManager } from "../util/DragManager";
 import { SelectionManager } from "../util/SelectionManager";
 import { undoBatch } from "../util/UndoManager";
 import './DocumentDecorations.scss';
-import { MainOverlayTextBox } from "./MainOverlayTextBox";
 import { DocumentView, PositionDocument } from "./nodes/DocumentView";
 import { LinkMenu } from "./nodes/LinkMenu";
 import { TemplateMenu } from "./TemplateMenu";
@@ -25,11 +24,9 @@ import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss";
-import { CollectionFreeFormView } from "./collections/collectionFreeForm/CollectionFreeFormView";
 import { CollectionView } from "./collections/CollectionView";
-import { createCipher } from "crypto";
-import { FieldView } from "./nodes/FieldView";
 import { DocumentManager } from "../util/DocumentManager";
+import { FormattedTextBox } from "./nodes/FormattedTextBox";
 
 library.add(faLink);
 
@@ -328,6 +325,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             let selDoc = SelectionManager.SelectedDocuments()[0];
             let container = selDoc.props.ContainingCollectionView ? selDoc.props.ContainingCollectionView.props.Document.proto : undefined;
             let dragData = new DragManager.LinkDragData(selDoc.props.Document, container ? [container] : []);
+            FormattedTextBox.InputBoxOverlay = undefined;
             DragManager.StartLinkDrag(this._linkerButton.current, dragData, e.pageX, e.pageY, {
                 handlers: {
                     dragComplete: action(emptyFunction),
@@ -410,7 +408,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 break;
         }
 
-        MainOverlayTextBox.Instance.SetTextDoc();
+        FormattedTextBox.InputBoxOverlay = undefined;
         SelectionManager.SelectedDocuments().forEach(element => {
             const rect = element.ContentDiv ? element.ContentDiv.getBoundingClientRect() : new DOMRect();
 
diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx
index 3b75c248a..91f626737 100644
--- a/src/client/views/MainOverlayTextBox.tsx
+++ b/src/client/views/MainOverlayTextBox.tsx
@@ -1,16 +1,12 @@
-import { action, observable, trace } from 'mobx';
+import { action, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
-import "normalize.css";
 import * as React from 'react';
 import { emptyFunction, returnTrue, returnZero } from '../../Utils';
-import '../northstar/model/ModelExtensions';
-import '../northstar/utils/Extensions';
 import { DragManager } from '../util/DragManager';
 import { Transform } from '../util/Transform';
+import "normalize.css";
 import "./MainOverlayTextBox.scss";
 import { FormattedTextBox } from './nodes/FormattedTextBox';
-import { Doc } from '../../new_fields/Doc';
-import { NumCast } from '../../new_fields/Types';
 
 interface MainOverlayTextBoxProps {
 }
@@ -18,8 +14,6 @@ interface MainOverlayTextBoxProps {
 @observer
 export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps> {
     public static Instance: MainOverlayTextBox;
-    @observable public TextDoc?: Doc = undefined;
-    public TextScroll: number = 0;
     @observable _textXf: () => Transform = () => Transform.Identity();
     private _textFieldKey: string = "data";
     private _textColor: string | null = null;
@@ -30,15 +24,18 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
         super(props);
         this._textProxyDiv = React.createRef();
         MainOverlayTextBox.Instance = this;
+        reaction(() => FormattedTextBox.InputBoxOverlay,
+            (box?: FormattedTextBox) => {
+                if (box) this.setTextDoc(box.props.fieldKey, box.CurrentDiv, box.props.ScreenToLocalTransform);
+                else this.setTextDoc();
+            });
     }
 
     @action
-    SetTextDoc(textDoc?: Doc, textFieldKey?: string, div?: HTMLDivElement, tx?: () => Transform) {
+    private setTextDoc(textFieldKey?: string, div?: HTMLDivElement, tx?: () => Transform) {
         if (this._textTargetDiv) {
             this._textTargetDiv.style.color = this._textColor;
         }
-
-        this.TextDoc = textDoc;
         this._textFieldKey = textFieldKey!;
         this._textXf = tx ? tx : () => Transform.Identity();
         this._textTargetDiv = div;
@@ -46,15 +43,13 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
             if (div.parentElement && div.parentElement instanceof HTMLDivElement && div.parentElement.id === "screenSpace") this._textXf = () => Transform.Identity();
             this._textColor = div.style.color;
             div.style.color = "transparent";
-            this.TextScroll = div.scrollTop;
         }
     }
 
     @action
     textScroll = (e: React.UIEvent) => {
         if (this._textProxyDiv.current && this._textTargetDiv) {
-            this.TextScroll = (e as any)._targetInst.stateNode.scrollTop;//  this._textProxyDiv.current.children[0].scrollTop;
-            this._textTargetDiv.scrollTop = this.TextScroll;
+            this._textTargetDiv.scrollTop = (e as any)._targetInst.stateNode.scrollTop;
         }
     }
 
@@ -64,11 +59,12 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
             document.addEventListener('pointerup', this.textBoxUp);
         }
     }
+    @action
     textBoxMove = (e: PointerEvent) => {
         if (e.movementX > 1 || e.movementY > 1) {
             document.removeEventListener("pointermove", this.textBoxMove);
             document.removeEventListener('pointerup', this.textBoxUp);
-            let dragData = new DragManager.DocumentDragData([this.TextDoc!]);
+            let dragData = new DragManager.DocumentDragData(FormattedTextBox.InputBoxOverlay ? [FormattedTextBox.InputBoxOverlay.props.Document] : []);
             const [left, top] = this._textXf().inverse().transformPoint(0, 0);
             dragData.xOffset = e.clientX - left;
             dragData.yOffset = e.clientY - top;
@@ -86,13 +82,13 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
     }
 
     render() {
-        if (this.TextDoc && this._textTargetDiv) {
+        if (FormattedTextBox.InputBoxOverlay && this._textTargetDiv) {
             let textRect = this._textTargetDiv.getBoundingClientRect();
             let s = this._textXf().Scale;
             return <div className="mainOverlayTextBox-textInput" style={{ transform: `translate(${textRect.left}px, ${textRect.top}px) scale(${1 / s},${1 / s})`, width: "auto", height: "auto" }} >
                 <div className="mainOverlayTextBox-textInput" onPointerDown={this.textBoxDown} ref={this._textProxyDiv} onScroll={this.textScroll}
                     style={{ width: `${textRect.width * s}px`, height: `${textRect.height * s}px` }}>
-                    <FormattedTextBox fieldKey={this._textFieldKey} isOverlay={true} Document={this.TextDoc} isSelected={returnTrue} select={emptyFunction} isTopMost={true}
+                    <FormattedTextBox fieldKey={this._textFieldKey} isOverlay={true} Document={FormattedTextBox.InputBoxOverlay.props.Document} isSelected={returnTrue} select={emptyFunction} isTopMost={true}
                         selectOnLoad={true} ContainingCollectionView={undefined} whenActiveChanged={emptyFunction} active={returnTrue}
                         ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} />
                 </div>
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 16818affd..6dd0e5935 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -322,8 +322,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     render() {
         library.add(faCog);
         library.add(faPlus);
-        //This can't just pass FieldValue to filter because filter passes other arguments to the passed in function, which end up as default values in FieldValue
-        const children = (this.children || []).filter(doc => FieldValue(doc));
+        const children = this.children;
         return (
             <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} onWheel={this.onWheel}
                 onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createTarget}>
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 828ac880a..082692d8d 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -50,7 +50,7 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
         get children() {
             //TODO tfs: This might not be what we want?
             //This linter error can't be fixed because of how js arguments work, so don't switch this to filter(FieldValue)
-            return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).filter(doc => FieldValue(doc));
+            return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).filter(doc => FieldValue(doc)).map(doc => doc as Doc);
         }
 
         @action
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 797f94d5f..c1d149098 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -70,7 +70,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
     public getActiveDocuments = () => {
         const curPage = FieldValue(this.Document.curPage, -1);
-        return FieldValue(this.children, [] as Doc[]).filter(doc => {
+        return this.children.filter(doc => {
             var page = NumCast(doc.page, -1);
             return page === curPage || page === -1;
         });
@@ -169,7 +169,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         // if (!this.props.active()) {
         //     return;
         // }
-        let childSelected = (this.children || []).filter(doc => doc).some(doc => {
+        let childSelected = this.children.some(doc => {
             var dv = DocumentManager.Instance.getDocumentView(doc);
             return dv && SelectionManager.IsSelected(dv) ? true : false;
         });
@@ -222,7 +222,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
 
     bringToFront = (doc: Doc) => {
-        const docs = (this.children || []);
+        const docs = this.children;
         docs.slice().sort((doc1, doc2) => {
             if (doc1 === doc) return 1;
             if (doc2 === doc) return -1;
@@ -268,7 +268,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     @computed.struct
     get views() {
         let curPage = FieldValue(this.Document.curPage, -1);
-        let docviews = (this.children || []).filter(doc => doc).reduce((prev, doc) => {
+        let docviews = this.children.reduce((prev, doc) => {
             if (!(doc instanceof Doc)) return prev;
             var page = NumCast(doc.page, -1);
             if (page === curPage || page === -1) {
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 613c24fa4..cdc1bdc85 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { observer } from "mobx-react";
-import { computed } from "mobx";
+import { computed, observable } from "mobx";
 import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageBox } from "./ImageBox";
 import { VideoBox } from "./VideoBox";
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 445a834ee..e7fb94777 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -1,29 +1,31 @@
-import { action, IReactionDisposer, reaction, trace, computed, _allowStateChangesInsideComputed } from "mobx";
+import { action, IReactionDisposer, observable, reaction } from "mobx";
+import { observer } from "mobx-react";
 import { baseKeymap } from "prosemirror-commands";
 import { history } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
 import { EditorState, Plugin, Transaction } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
+import { Doc, Field, HeightSym, Opt, WidthSym } from "../../../new_fields/Doc";
+import { RichTextField } from "../../../new_fields/RichTextField";
+import { createSchema, makeInterface } from "../../../new_fields/Schema";
+import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
+import { DocServer } from "../../DocServer";
+import { DocumentManager } from "../../util/DocumentManager";
+import { DragManager } from "../../util/DragManager";
 import buildKeymap from "../../util/ProsemirrorKeymap";
 import { inpRules } from "../../util/RichTextRules";
-import { schema, ImageResizeView } from "../../util/RichTextSchema";
+import { ImageResizeView, schema } from "../../util/RichTextSchema";
+import { SelectionManager } from "../../util/SelectionManager";
 import { TooltipLinkingMenu } from "../../util/TooltipLinkingMenu";
 import { TooltipTextMenu } from "../../util/TooltipTextMenu";
+import { undoBatch, UndoManager } from "../../util/UndoManager";
 import { ContextMenu } from "../../views/ContextMenu";
-import { MainOverlayTextBox } from "../MainOverlayTextBox";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { DocComponent } from "../DocComponent";
+import { InkingControl } from "../InkingControl";
 import { FieldView, FieldViewProps } from "./FieldView";
 import "./FormattedTextBox.scss";
 import React = require("react");
-import { SelectionManager } from "../../util/SelectionManager";
-import { DocComponent } from "../DocComponent";
-import { createSchema, makeInterface } from "../../../new_fields/Schema";
-import { Opt, Doc, WidthSym, HeightSym } from "../../../new_fields/Doc";
-import { observer } from "mobx-react";
-import { InkingControl } from "../InkingControl";
-import { StrCast, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
-import { RichTextField } from "../../../new_fields/RichTextField";
-import { Id } from "../../../new_fields/RefField";
-import { UndoManager } from "../../util/UndoManager";
 
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
 //
@@ -62,15 +64,23 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
     private _proseRef: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _gotDown: boolean = false;
+    private _dropDisposer?: DragManager.DragDropDisposer;
     private _reactionDisposer: Opt<IReactionDisposer>;
     private _inputReactionDisposer: Opt<IReactionDisposer>;
     private _proxyReactionDisposer: Opt<IReactionDisposer>;
+    public get CurrentDiv(): HTMLDivElement { return this._ref.current!; }
+
+    @observable public static InputBoxOverlay?: FormattedTextBox = undefined;
+    public static InputBoxOverlayScroll: number = 0;
 
     constructor(props: FieldViewProps) {
         super(props);
 
         this._ref = React.createRef();
         this._proseRef = React.createRef();
+        if (this.props.isOverlay) {
+            DragManager.StartDragFunctions.push(() => FormattedTextBox.InputBoxOverlay = undefined);
+        }
     }
 
     _applyingChange: boolean = false;
@@ -94,7 +104,27 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         }
     }
 
+    @undoBatch
+    @action
+    drop = async (e: Event, de: DragManager.DropEvent) => {
+        if (de.data instanceof DragManager.LinkDragData) {
+            let sourceDoc = de.data.linkSourceDocument;
+            let destDoc = this.props.Document;
+
+            const protoDest = destDoc.proto;
+            const protoSrc = sourceDoc.proto;
+            Doc.MakeLink(protoSrc ? protoSrc : sourceDoc, protoDest ? protoDest : destDoc);
+            de.data.droppedDocuments.push(destDoc);
+            e.stopPropagation();
+        }
+    }
+
     componentDidMount() {
+        if (this._ref.current) {
+            this._dropDisposer = DragManager.MakeDropTarget(this._ref.current, {
+                handlers: { drop: this.drop.bind(this) }
+            });
+        }
         const config = {
             schema,
             inpRules, //these currently don't do anything, but could eventually be helpful
@@ -117,7 +147,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         };
 
         if (this.props.isOverlay) {
-            this._inputReactionDisposer = reaction(() => MainOverlayTextBox.Instance.TextDoc && MainOverlayTextBox.Instance.TextDoc[Id],
+            this._inputReactionDisposer = reaction(() => FormattedTextBox.InputBoxOverlay,
                 () => {
                     if (this._editorView) {
                         this._editorView.destroy();
@@ -127,7 +157,12 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             );
         } else {
             this._proxyReactionDisposer = reaction(() => this.props.isSelected(),
-                () => this.props.isSelected() && MainOverlayTextBox.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform));
+                () => {
+                    if (this.props.isSelected()) {
+                        FormattedTextBox.InputBoxOverlay = this;
+                        FormattedTextBox.InputBoxOverlayScroll = this._ref.current!.scrollTop;
+                    }
+                });
         }
 
 
@@ -178,6 +213,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         if (this._proxyReactionDisposer) {
             this._proxyReactionDisposer();
         }
+        if (this._dropDisposer) {
+            this._dropDisposer();
+        }
     }
 
     onPointerDown = (e: React.PointerEvent): void => {
@@ -186,6 +224,24 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             if (this._toolTipTextMenu && this._toolTipTextMenu.tooltip)
                 this._toolTipTextMenu.tooltip.style.opacity = "0";
         }
+        if (e.button === 0 && ((!this.props.isSelected() && !e.ctrlKey) || (this.props.isSelected() && e.ctrlKey)) && !e.metaKey) {
+            if (e.target && (e.target as any).href) {
+                let href = (e.target as any).href;
+                if (href.indexOf(DocServer.prepend("/doc/")) === 0) {
+                    let docid = href.replace(DocServer.prepend("/doc/"), "");
+                    DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
+                        if (f instanceof Doc) {
+                            if (DocumentManager.Instance.getDocumentView(f))
+                                DocumentManager.Instance.getDocumentView(f)!.props.focus(f);
+                            else CollectionDockingView.Instance.AddRightSplit(f);
+                        }
+                    }));
+                }
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+        }
         if (e.button === 2 || (e.button === 0 && e.ctrlKey)) {
             this._gotDown = true;
             e.preventDefault();
@@ -199,12 +255,13 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         }
     }
 
+    @action
     onFocused = (e: React.FocusEvent): void => {
         if (!this.props.isOverlay) {
-            MainOverlayTextBox.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform);
+            FormattedTextBox.InputBoxOverlay = this;
         } else {
             if (this._proseRef.current) {
-                this._proseRef.current.scrollTop = MainOverlayTextBox.Instance.TextScroll;
+                this._proseRef.current.scrollTop = FormattedTextBox.InputBoxOverlayScroll;
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2


From b83cfb1c48cced31f930e3f72a9c5ae503b81790 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 9 May 2019 14:15:42 -0400
Subject: from last

---
 src/client/views/DocumentDecorations.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 85ddadd64..2bde4e0c8 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -318,6 +318,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         e.stopPropagation();
     }
 
+    @action
     onLinkerButtonMoved = (e: PointerEvent): void => {
         if (this._linkerButton.current !== null) {
             document.removeEventListener("pointermove", this.onLinkerButtonMoved);
-- 
cgit v1.2.3-70-g09d2


From 168cd36282087bbf9e0157352a129d90b20b7394 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 9 May 2019 14:40:03 -0400
Subject: fixed some compile errors

---
 src/client/northstar/dash-nodes/HistogramBox.tsx      | 8 ++++----
 src/client/util/DocumentManager.ts                    | 2 +-
 src/client/views/DocumentDecorations.tsx              | 1 +
 src/client/views/collections/CollectionBaseView.tsx   | 4 ++--
 src/client/views/collections/CollectionSchemaView.tsx | 2 +-
 src/client/views/nodes/FieldView.tsx                  | 3 ++-
 src/client/views/nodes/LinkMenu.tsx                   | 4 ++--
 7 files changed, 13 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx
index 765ecf8f0..5e7b867b3 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBox.tsx
@@ -117,15 +117,15 @@ export class HistogramBox extends React.Component<FieldViewProps> {
             runInAction(() => {
                 this.HistoOp = histoOp ? histoOp.HistoOp : HistogramOperation.Empty;
                 if (this.HistoOp !== HistogramOperation.Empty) {
-                    reaction(() => Cast(this.props.Document.linkedFromDocs, listSpec(Doc), []), (docs) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true });
+                    reaction(() => Cast(this.props.Document.linkedFromDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc), (docs) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true });
                     reaction(() => Cast(this.props.Document.brushingDocs, listSpec(Doc), []).length,
                         () => {
-                            let brushingDocs = Cast(this.props.Document.brushingDocs, listSpec(Doc), []);
+                            let brushingDocs = Cast(this.props.Document.brushingDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
                             const proto = this.props.Document.proto;
                             if (proto) {
                                 this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...brushingDocs.map((brush, i) => {
-                                    brush.bckgroundColor = StyleConstants.BRUSH_COLORS[i % StyleConstants.BRUSH_COLORS.length];
-                                    let brushed = Cast(brush.brushingDocs, listSpec(Doc), []);
+                                    brush.backgroundColor = StyleConstants.BRUSH_COLORS[i % StyleConstants.BRUSH_COLORS.length];
+                                    let brushed = Cast(brush.brushingDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
                                     return { l: brush, b: brushed[0][Id] === proto[Id] ? brushed[1] : brushed[0] };
                                 }));
                             }
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 69964e2c9..4c264c7ec 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -71,7 +71,7 @@ export class DocumentManager {
     @computed
     public get LinkedDocumentViews() {
         return DocumentManager.Instance.DocumentViews.reduce((pairs, dv) => {
-            let linksList = Cast(dv.props.Document.linkedToDocs, listSpec(Doc));
+            let linksList = Cast(dv.props.Document.linkedToDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
             if (linksList && linksList.length) {
                 pairs.push(...linksList.reduce((pairs, link) => {
                     if (link) {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 2bde4e0c8..705e7a6d8 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -27,6 +27,7 @@ import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss";
 import { CollectionView } from "./collections/CollectionView";
 import { DocumentManager } from "../util/DocumentManager";
 import { FormattedTextBox } from "./nodes/FormattedTextBox";
+import { FieldView } from "./nodes/FieldView";
 
 library.add(faLink);
 
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 14b92af48..2b1f7bb37 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -63,13 +63,13 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
         if (!(documentToAdd instanceof Doc)) {
             return false;
         }
-        let data = Cast(documentToAdd.data, listSpec(Doc), []);
+        let data = Cast(documentToAdd.data, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
         for (const doc of data.filter(d => d instanceof Document)) {
             if (this.createsCycle(doc, containerDocument)) {
                 return true;
             }
         }
-        let annots = Cast(documentToAdd.annotations, listSpec(Doc), []);
+        let annots = Cast(documentToAdd.annotations, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
         for (const annot of annots) {
             if (this.createsCycle(annot, containerDocument)) {
                 return true;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 6dd0e5935..ae949b2ed 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -276,7 +276,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 
     get documentKeysCheckList() {
-        const docs = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []);
+        const docs = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).filter(d => d).map(d => d as Doc);
         let keys: { [key: string]: boolean } = {};
         // bcz: ugh.  this is untracked since otherwise a large collection of documents will blast the server for all their fields.
         //  then as each document's fields come back, we update the documents _proxies.  Each time we do this, the whole schema will be
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index cdc1bdc85..8bdf34181 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -99,7 +99,8 @@ export class FieldView extends React.Component<FieldViewProps> {
                     ContainingCollectionView={this.props.ContainingCollectionView}
                     parentActive={this.props.active}
                     toggleMinimized={emptyFunction}
-                    whenActiveChanged={this.props.whenActiveChanged} />
+                    whenActiveChanged={this.props.whenActiveChanged}
+                    bringToFront={emptyFunction} />
             );
         }
         else if (field instanceof List) {
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index e21adebbc..24901913d 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -31,8 +31,8 @@ export class LinkMenu extends React.Component<Props> {
 
     render() {
         //get list of links from document
-        let linkFrom: Doc[] = Cast(this.props.docView.props.Document.linkedFromDocs, listSpec(Doc), []);
-        let linkTo: Doc[] = Cast(this.props.docView.props.Document.linkedToDocs, listSpec(Doc), []);
+        let linkFrom = Cast(this.props.docView.props.Document.linkedFromDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
+        let linkTo = Cast(this.props.docView.props.Document.linkedToDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
         if (this._editingLink === undefined) {
             return (
                 <div id="linkMenu-container">
-- 
cgit v1.2.3-70-g09d2


From 39fd912fd4cd33f30a943290295a59992b9868eb Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 9 May 2019 17:39:44 -0400
Subject: various cleanup to icons, summaries...

---
 src/client/util/DocumentManager.ts                 | 18 ++++++++++++--
 src/client/util/SelectionManager.ts                | 17 +++++++++++++
 src/client/views/DocumentDecorations.tsx           | 28 ++++++++++++++++++----
 src/client/views/TemplateMenu.tsx                  | 16 +++++++++----
 .../CollectionFreeFormLinkView.scss                |  8 +++----
 .../CollectionFreeFormLinkView.tsx                 |  6 ++---
 .../CollectionFreeFormLinksView.tsx                |  2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx | 17 ++++++-------
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 17 ++++++-------
 src/client/views/nodes/DocumentView.tsx            | 14 +++++++----
 10 files changed, 104 insertions(+), 39 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 4c264c7ec..779b07ce5 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -1,8 +1,9 @@
 import { computed, observable } from 'mobx';
 import { DocumentView } from '../views/nodes/DocumentView';
 import { Doc } from '../../new_fields/Doc';
-import { FieldValue, Cast } from '../../new_fields/Types';
+import { FieldValue, Cast, BoolCast } from '../../new_fields/Types';
 import { listSpec } from '../../new_fields/Schema';
+import { SelectionManager } from './SelectionManager';
 
 
 export class DocumentManager {
@@ -70,7 +71,7 @@ export class DocumentManager {
 
     @computed
     public get LinkedDocumentViews() {
-        return DocumentManager.Instance.DocumentViews.reduce((pairs, dv) => {
+        return DocumentManager.Instance.DocumentViews.filter(dv => dv.isSelected() || BoolCast(dv.props.Document.libraryBrush, false)).reduce((pairs, dv) => {
             let linksList = Cast(dv.props.Document.linkedToDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
             if (linksList && linksList.length) {
                 pairs.push(...linksList.reduce((pairs, link) => {
@@ -84,6 +85,19 @@ export class DocumentManager {
                     return pairs;
                 }, [] as { a: DocumentView, b: DocumentView, l: Doc }[]));
             }
+            linksList = Cast(dv.props.Document.linkedFromDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
+            if (linksList && linksList.length) {
+                pairs.push(...linksList.reduce((pairs, link) => {
+                    if (link) {
+                        let linkFromDoc = FieldValue(Cast(link.linkedFrom, Doc));
+                        if (linkFromDoc) {
+                            DocumentManager.Instance.getDocumentViews(linkFromDoc).map(docView1 =>
+                                pairs.push({ a: dv, b: docView1, l: link }));
+                        }
+                    }
+                    return pairs;
+                }, pairs));
+            }
             return pairs;
         }, [] as { a: DocumentView, b: DocumentView, l: Doc }[]);
     }
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index a3a8172c7..8c92c2023 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -2,6 +2,7 @@ import { observable, action } from "mobx";
 import { Doc } from "../../new_fields/Doc";
 import { DocumentView } from "../views/nodes/DocumentView";
 import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
+import { NumCast } from "../../new_fields/Types";
 
 export namespace SelectionManager {
     class Manager {
@@ -68,4 +69,20 @@ export namespace SelectionManager {
     export function SelectedDocuments(): Array<DocumentView> {
         return manager.SelectedDocuments;
     }
+    export function ViewsSortedVertically(): DocumentView[] {
+        let sorted = SelectionManager.SelectedDocuments().slice().sort((doc1, doc2) => {
+            if (NumCast(doc1.props.Document.x) > NumCast(doc2.props.Document.x)) return 1;
+            if (NumCast(doc1.props.Document.x) < NumCast(doc2.props.Document.x)) return -1;
+            return 0;
+        });
+        return sorted;
+    }
+    export function ViewsSortedHorizontally(): DocumentView[] {
+        let sorted = SelectionManager.SelectedDocuments().slice().sort((doc1, doc2) => {
+            if (NumCast(doc1.props.Document.y) > NumCast(doc2.props.Document.y)) return 1;
+            if (NumCast(doc1.props.Document.y) < NumCast(doc2.props.Document.y)) return -1;
+            return 0;
+        });
+        return sorted;
+    }
 }
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 705e7a6d8..4786b4de6 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -249,7 +249,22 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             if (this._iconDoc && selectedDocs.length === 1 && this._removeIcon) {
                 selectedDocs[0].props.removeDocument && selectedDocs[0].props.removeDocument(this._iconDoc);
             }
-            !this._removeIcon && selectedDocs.length === 1 && this.getIconDoc(selectedDocs[0]).then(icon => selectedDocs[0].props.toggleMinimized());
+            if (!this._removeIcon) {
+                if (selectedDocs.length === 1)
+                    this.getIconDoc(selectedDocs[0]).then(icon => selectedDocs[0].props.toggleMinimized());
+                else {
+                    let docViews = SelectionManager.ViewsSortedVertically();
+                    let topDocView = docViews[0];
+                    let ind = topDocView.templates.indexOf(Templates.Bullet.Layout);
+                    if (ind !== -1) {
+                        topDocView.templates.splice(ind, 1);
+                        topDocView.props.Document.subBulletDocs = undefined;
+                    } else {
+                        topDocView.addTemplate(Templates.Bullet);
+                        topDocView.props.Document.subBulletDocs = new List<Doc>(docViews.filter(v => v !== topDocView).map(v => v.props.Document));
+                    }
+                }
+            }
             this._removeIcon = false;
         }
         runInAction(() => this._minimizedX = this._minimizedY = 0);
@@ -410,7 +425,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 break;
         }
 
-        FormattedTextBox.InputBoxOverlay = undefined;
+        runInAction(() => FormattedTextBox.InputBoxOverlay = undefined);
         SelectionManager.SelectedDocuments().forEach(element => {
             const rect = element.ContentDiv ? element.ContentDiv.getBoundingClientRect() : new DOMRect();
 
@@ -507,7 +522,12 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
 
         let templates: Map<Template, boolean> = new Map();
         Array.from(Object.values(Templates.TemplateList)).map(template => {
-            let docTemps = SelectionManager.SelectedDocuments().reduce((res: string[], doc: DocumentView, i) => {
+            let sorted = SelectionManager.ViewsSortedVertically().slice().sort((doc1, doc2) => {
+                if (NumCast(doc1.props.Document.x) > NumCast(doc2.props.Document.x)) return 1;
+                if (NumCast(doc1.props.Document.x) < NumCast(doc2.props.Document.x)) return -1;
+                return 0;
+            });
+            let docTemps = sorted.reduce((res: string[], doc: DocumentView, i) => {
                 let temps = doc.props.Document.templates;
                 if (temps instanceof List) {
                     temps.map(temp => {
@@ -568,7 +588,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                             <FontAwesomeIcon className="fa-icon-link" icon="link" size="sm" />
                         </div>
                     </div>
-                    <TemplateMenu docs={SelectionManager.SelectedDocuments()} templates={templates} />
+                    <TemplateMenu docs={SelectionManager.ViewsSortedVertically()} templates={templates} />
                 </div>
             </div >
         </div>
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index d74982ef8..e2b3bd07a 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -6,6 +6,7 @@ import { Template } from "./Templates";
 import { DocumentView } from "./nodes/DocumentView";
 import { List } from "../../new_fields/List";
 import { Doc } from "../../new_fields/Doc";
+import { NumCast } from "../../new_fields/Types";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -35,20 +36,27 @@ export interface TemplateMenuProps {
 export class TemplateMenu extends React.Component<TemplateMenuProps> {
     @observable private _hidden: boolean = true;
 
+    constructor(props: TemplateMenuProps) {
+        super(props);
+        console.log("");
+    }
+
     @action
     toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => {
         if (event.target.checked) {
             if (template.Name == "Bullet") {
-                this.props.docs[0].addTemplate(template);
-                this.props.docs[0].props.Document.maximizedDocs = new List<Doc>(this.props.docs.filter((v, i) => i !== 0).map(v => v.props.Document));
+                let topDocView = this.props.docs[0];
+                topDocView.addTemplate(template);
+                topDocView.props.Document.subBulletDocs = new List<Doc>(this.props.docs.filter(v => v !== topDocView).map(v => v.props.Document));
             } else {
                 this.props.docs.map(d => d.addTemplate(template));
             }
             this.props.templates.set(template, true);
         } else {
             if (template.Name == "Bullet") {
-                this.props.docs[0].removeTemplate(template);
-                this.props.docs[0].props.Document.maximizedDocs = undefined;
+                let topDocView = this.props.docs[0];
+                topDocView.removeTemplate(template);
+                topDocView.props.Document.subBulletDocs = undefined;
             } else {
                 this.props.docs.map(d => d.removeTemplate(template));
             }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
index 3e8a8a442..737ffba7d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.scss
@@ -1,12 +1,12 @@
 .collectionfreeformlinkview-linkLine {
     stroke: black;
-    stroke-width: 3;
     transform: translate(10000px,10000px);
+    opacity: 0.5;
     pointer-events: all;
 }
 .collectionfreeformlinkview-linkCircle {
-    stroke: black;
-    stroke-width: 3;
+    stroke: rgb(0,0,0);
+    opacity: 0.5;
     transform: translate(10000px,10000px);
     pointer-events: all;
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 3b700b053..63d2f7642 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -47,11 +47,11 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         return (
             <>
                 <line key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkLine"
-                    style={{ strokeWidth: `${l.length * 5}` }}
+                    style={{ strokeWidth: `${l.length / 2}` }}
                     x1={`${x1}`} y1={`${y1}`}
                     x2={`${x2}`} y2={`${y2}`} />
-                <circle key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkLine"
-                    cx={(x1 + x2) / 2} cy={(y1 + y2) / 2} r={10} onPointerDown={this.onPointerDown} />
+                <circle key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkCircle"
+                    cx={(x1 + x2) / 2} cy={(y1 + y2) / 2} r={5} onPointerDown={this.onPointerDown} />
             </>
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index cbfbb1d2c..1d4584cfe 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -84,7 +84,7 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
         }
         if (view.props.ContainingCollectionView) {
             let collid = view.props.ContainingCollectionView.props.Document[Id];
-            Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).
+            Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).filter(d => d).map(d => d as Doc).
                 filter(child =>
                     child[Id] === collid).map(view =>
                         DocumentManager.Instance.getDocumentViews(view).map(view =>
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 6057aaeba..d8855fe66 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -96,7 +96,8 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             document.addEventListener("pointermove", this.onPointerMove, true);
             document.addEventListener("pointerup", this.onPointerUp, true);
             document.addEventListener("keydown", this.marqueeCommand, true);
-            e.stopPropagation();
+            // bcz: do we need this?   it kills the context menu on the main collection
+            // e.stopPropagation();
         }
         if (e.altKey) {
             e.preventDefault();
@@ -228,14 +229,14 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     newCollection.proto!.summaryDoc = summary;
                     selected = [newCollection];
                 }
-                summary.proto!.maximizedDocs = new List<Doc>(selected);
+                summary.proto!.summarizedDocs = new List<Doc>(selected);
                 summary.proto!.isButton = true;
-                selected.map(maximizedDoc => {
-                    let maxx = NumCast(maximizedDoc.x, undefined);
-                    let maxy = NumCast(maximizedDoc.y, undefined);
-                    let maxw = NumCast(maximizedDoc.width, undefined);
-                    let maxh = NumCast(maximizedDoc.height, undefined);
-                    maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), 0])
+                selected.map(summarizedDoc => {
+                    let maxx = NumCast(summarizedDoc.x, undefined);
+                    let maxy = NumCast(summarizedDoc.y, undefined);
+                    let maxw = NumCast(summarizedDoc.width, undefined);
+                    let maxh = NumCast(summarizedDoc.height, undefined);
+                    summarizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), 0])
                 });
                 this.props.addLiveTextDocument(summary);
             }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 470c0c2f8..92033ea44 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -6,7 +6,7 @@ import "./DocumentView.scss";
 import React = require("react");
 import { DocComponent } from "../DocComponent";
 import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema";
-import { FieldValue, Cast, NumCast, BoolCast } from "../../../new_fields/Types";
+import { FieldValue, Cast, NumCast, BoolCast, StrCast } from "../../../new_fields/Types";
 import { OmitKeys, Utils } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
 import { Doc, DocListCast, HeightSym } from "../../../new_fields/Doc";
@@ -65,7 +65,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
     panelWidth = () => this.props.PanelWidth();
     panelHeight = () => this.props.PanelHeight();
-    toggleMinimized = () => this.toggleIcon();
+    toggleMinimized = async () => this.toggleIcon(await DocListCast(this.props.Document.maximizedDocs));
     getTransform = (): Transform => this.props.ScreenToLocalTransform()
         .translate(-this.X, -this.Y)
         .scale(1 / this.contentScaling()).scale(1 / this.zoom)
@@ -126,10 +126,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             2);
     }
     @action
-    public toggleIcon = async (): Promise<void> => {
+    public toggleIcon = async (maximizedDocs: Doc[] | undefined): Promise<void> => {
         SelectionManager.DeselectAll();
         let isMinimized: boolean | undefined;
-        let maximizedDocs = await DocListCast(this.props.Document.maximizedDocs);
         let minimizedDoc: Doc | undefined = this.props.Document;
         if (!maximizedDocs) {
             minimizedDoc = await Cast(this.props.Document.minimizedDoc, Doc);
@@ -177,8 +176,10 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         let altKey = e.altKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
-            if (BoolCast(this.props.Document.isButton, false) || (e.target as any).id === "isBullet") {
-                let maximizedDocs = await DocListCast(this.props.Document.maximizedDocs);
+            let isBullet = (e.target as any).id === "isBullet";
+            let isIcon = StrCast(this.props.Document.layout).indexOf("IconBox") !== -1;
+            if (BoolCast(this.props.Document.isButton, false) || isBullet) {
+                let maximizedDocs = await DocListCast(isBullet ? this.props.Document.subBulletDocs : isIcon ? this.props.Document.maximizedDocs : this.props.Document.summarizedDocs);
                 if (maximizedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
                     if ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight)) {
                         let dataDocs = await DocListCast(CollectionDockingView.Instance.props.Document.data);
@@ -195,7 +196,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                         }
                     } else {
                         this.props.addDocument && maximizedDocs.forEach(async maxDoc => this.props.addDocument!(await maxDoc, false));
-                        this.toggleIcon();
+                        this.toggleIcon(maximizedDocs);
                     }
                 }
             }
@@ -230,7 +231,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont}
                 onPointerDown={this.onPointerDown}
-                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
+                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} onPointerOver={this.onPointerEnter}
                 onClick={this.onClick}
                 style={{
                     outlineColor: "black",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c3bf36553..25a75904b 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -18,7 +18,7 @@ import "./DocumentView.scss";
 import React = require("react");
 import { Opt, Doc, WidthSym, HeightSym, DocListCast } from "../../../new_fields/Doc";
 import { DocComponent } from "../DocComponent";
-import { createSchema, makeInterface } from "../../../new_fields/Schema";
+import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema";
 import { FieldValue, StrCast, BoolCast, Cast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
@@ -107,6 +107,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 handlers: { drop: this.drop.bind(this) }
             });
         }
+        // bcz: kind of ugly .. setup a reaction to update the title of a summary document's target (maximizedDocs) whenver the summary doc's title changes
         this._reactionDisposer = reaction(() => [this.props.Document.maximizedDocs, this.props.Document.summaryDoc, this.props.Document.summaryDoc instanceof Doc ? this.props.Document.summaryDoc.title : ""],
             async () => {
                 let maxDoc = await DocListCast(this.props.Document.maximizedDocs);
@@ -142,10 +143,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         e.stopPropagation();
     }
 
-    startDragging(x: number, y: number, dropAction: dropActionType) {
+    startDragging(x: number, y: number, dropAction: dropActionType, dragSubBullets: boolean) {
         if (this._mainCont.current) {
+            let allConnected = dragSubBullets ? [this.props.Document, ...Cast(this.props.Document.subBulletDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc)] : [this.props.Document];
             const [left, top] = this.props.ScreenToLocalTransform().scale(this.props.ContentScaling()).inverse().transformPoint(0, 0);
-            let dragData = new DragManager.DocumentDragData([this.props.Document]);
+            let dragData = new DragManager.DocumentDragData(allConnected);
             const [xoff, yoff] = this.props.ScreenToLocalTransform().scale(this.props.ContentScaling()).transformDirection(x - left, y - top);
             dragData.dropAction = dropAction;
             dragData.xOffset = xoff;
@@ -167,15 +169,17 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
     }
+    _hitIsBullet = false;
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
         if (CollectionFreeFormView.RIGHT_BTN_DRAG && (e.button === 2 || (e.button === 0 && e.altKey)) && !this.isSelected()) {
             return;
         }
+        this._hitIsBullet = (e.target && (e.target as any).id === "isBullet");
         if (e.shiftKey && e.buttons === 1) {
             if (this.props.isTopMost) {
-                this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey ? "alias" : undefined);
+                this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey ? "alias" : undefined, this._hitIsBullet);
             } else if (this.props.Document) {
                 CollectionDockingView.Instance.StartOtherDrag([Doc.MakeAlias(this.props.Document)], e);
             }
@@ -193,7 +197,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 document.removeEventListener("pointermove", this.onPointerMove);
                 document.removeEventListener("pointerup", this.onPointerUp);
                 if (!e.altKey && !this.topMost && (!CollectionFreeFormView.RIGHT_BTN_DRAG && e.buttons === 1) || (CollectionFreeFormView.RIGHT_BTN_DRAG && e.buttons === 2)) {
-                    this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey ? "alias" : undefined);
+                    this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey ? "alias" : undefined, this._hitIsBullet);
                 }
             }
             e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
-- 
cgit v1.2.3-70-g09d2


From d6b7ee34014be0e990d0d3967225dde1daaed5d0 Mon Sep 17 00:00:00 2001
From: Sam Wilkins <abdullah_ahmed@brown.edu>
Date: Thu, 9 May 2019 18:45:20 -0400
Subject: removed template field, cleaned up cursor refactor

---
 src/client/documents/Documents.ts |  1 -
 src/fields/TemplateField.ts       | 43 ---------------------------------------
 2 files changed, 44 deletions(-)
 delete mode 100644 src/fields/TemplateField.ts

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index a770ccc93..63ba01b6a 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -19,7 +19,6 @@ import { ColumnAttributeModel } from "../northstar/core/attribute/AttributeModel
 import { AttributeTransformationModel } from "../northstar/core/attribute/AttributeTransformationModel";
 import { AggregateFunction } from "../northstar/model/idea/idea";
 import { Template } from "../views/Templates";
-import { TemplateField } from "../../fields/TemplateField";
 import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss";
 import { IconBox } from "../views/nodes/IconBox";
 import { Field, Doc, Opt } from "../../new_fields/Doc";
diff --git a/src/fields/TemplateField.ts b/src/fields/TemplateField.ts
deleted file mode 100644
index 72ae13c2e..000000000
--- a/src/fields/TemplateField.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { BasicField } from "./BasicField";
-import { Types } from "../server/Message";
-import { FieldId } from "./Field";
-import { Template, TemplatePosition } from "../client/views/Templates";
-
-
-export class TemplateField extends BasicField<Array<Template>> {
-    constructor(data: Array<Template> = [], id?: FieldId, save: boolean = true) {
-        super(data, save, id);
-    }
-
-    ToScriptString(): string {
-        return `new TemplateField("${this.Data}")`;
-    }
-
-    Copy() {
-        return new TemplateField(this.Data);
-    }
-
-    ToJson() {
-        let templates: Array<{ name: string, position: TemplatePosition, layout: string }> = [];
-        this.Data.forEach(template => {
-            templates.push({ name: template.Name, layout: template.Layout, position: template.Position });
-        });
-        return {
-            type: Types.Templates,
-            data: templates,
-            id: this.Id,
-        };
-    }
-
-    UpdateFromServer(data: any) {
-        this.data = new Array(data);
-    }
-
-    static FromJson(id: string, data: any): TemplateField {
-        let templates: Array<Template> = [];
-        data.forEach((template: { name: string, position: number, layout: string }) => {
-            templates.push(new Template(template.name, template.position, template.layout));
-        });
-        return new TemplateField(templates, id, false);
-    }
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 7a7ac91adfa76ad1811fc6a985a99502367053ca Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 9 May 2019 19:12:08 -0400
Subject: Disabled type in search results for now

---
 src/client/views/SearchItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 539d6b5e5..d30579907 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -44,7 +44,7 @@ export class SearchItem extends React.Component<SearchProps> {
         return (
             <div className="search-item" id="result" onClick={this.onClick}>
                 <div className="search-title" id="result" >title: {this.props.doc.title}</div>
-                <div className="search-type" id="result" >Type: {this.props.doc.layout}</div>
+                {/* <div className="search-type" id="result" >Type: {this.props.doc.layout}</div> */}
                 {/* <div className="search-type" >{SearchItem.DocumentIcon(this.layout)}</div> */}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From b18aec5d4b07bbc859a5b1b2d22ca3bd92ca53cd Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 9 May 2019 20:30:40 -0400
Subject: Added try catches to search to not throw errors on the server

---
 src/server/Search.ts | 48 ++++++++++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/server/Search.ts b/src/server/Search.ts
index 59bdd4803..1d8cfdcf0 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -7,31 +7,39 @@ export class Search {
     private url = 'http://localhost:8983/solr/';
 
     public async updateDocument(document: any) {
-        return rp.post(this.url + "dash/update", {
-            headers: { 'content-type': 'application/json' },
-            body: JSON.stringify([document])
-        });
+        try {
+            return rp.post(this.url + "dash/update", {
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify([document])
+            });
+        } catch { }
     }
 
     public async search(query: string) {
-        const searchResults = JSON.parse(await rp.get(this.url + "dash/select", {
-            qs: {
-                q: query
-            }
-        }));
-        const fields = searchResults.response.docs;
-        const ids = fields.map((field: any) => field.id);
-        return ids;
+        try {
+            const searchResults = JSON.parse(await rp.get(this.url + "dash/select", {
+                qs: {
+                    q: query
+                }
+            }));
+            const fields = searchResults.response.docs;
+            const ids = fields.map((field: any) => field.id);
+            return ids;
+        } catch {
+            return [];
+        }
     }
 
     public async clear() {
-        return rp.post(this.url + "dash/update", {
-            body: {
-                delete: {
-                    query: "*:*"
-                }
-            },
-            json: true
-        });
+        try {
+            return rp.post(this.url + "dash/update", {
+                body: {
+                    delete: {
+                        query: "*:*"
+                    }
+                },
+                json: true
+            });
+        } catch { }
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 2b5e170c1bbca43ab804d7746a816715c490cc37 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 9 May 2019 20:37:59 -0400
Subject: simplified templates.  made bullets always drag sub-bullets.

---
 src/client/views/Templates.tsx          | 15 +++------------
 src/client/views/nodes/DocumentView.tsx |  2 +-
 2 files changed, 4 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 02f9aa510..bbedc95f1 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -38,18 +38,9 @@ export class Template {
 export namespace Templates {
     // export const BasicLayout = new Template("Basic layout", "{layout}");
 
-    export const OuterCaption = new Template("Outer caption", TemplatePosition.OutterBottom,
-        `<div id="screenSpace" style="margin-top: 100%; font-size:14px; background:yellow; width:100%; position:absolute"><FormattedTextBox {...props} fieldKey={"caption"} /></div>`
+    export const Caption = new Template("Caption", TemplatePosition.OutterBottom,
+        `<div id="screenSpace" style="top: 100%; font-size:14px; background:yellow; width:100%; position:absolute"><FormattedTextBox {...props} fieldKey={"caption"} /></div>`
     );
-
-    export const InnerCaption = new Template("Inner caption", TemplatePosition.InnerBottom,
-        `<div><div style="margin:auto; height:calc(100% - 50px); width:100%;">{layout}</div><div style="height:50px; width:100%; position:absolute"><FormattedTextBox {...props} fieldKey={"caption"}/></div></div>`
-    );
-
-    export const SideCaption = new Template("Side caption", TemplatePosition.OutterRight,
-        `<div><div style="margin:auto; height:100%; width:100%;">{layout}</div><div style="height:100%; width:300px; position:absolute; top: 0; right: -300px;"><FormattedTextBox {...props} fieldKey={"caption"}/></div> </div>`
-    );
-
     export const TitleOverlay = new Template("TitleOverlay", TemplatePosition.InnerTop,
         `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div>
         <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; ">
@@ -72,7 +63,7 @@ export namespace Templates {
         </div>`
     );
 
-    export const TemplateList: Template[] = [Title, TitleOverlay, OuterCaption, InnerCaption, SideCaption, Bullet];
+    export const TemplateList: Template[] = [Title, TitleOverlay, Caption, Bullet];
 
     export function sortTemplates(a: Template, b: Template) {
         if (a.Position < b.Position) { return -1; }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 25a75904b..5aa74c703 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -176,7 +176,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (CollectionFreeFormView.RIGHT_BTN_DRAG && (e.button === 2 || (e.button === 0 && e.altKey)) && !this.isSelected()) {
             return;
         }
-        this._hitIsBullet = (e.target && (e.target as any).id === "isBullet");
+        this._hitIsBullet = (e.target && (e.target as any).id === "isBullet") || Cast(this.props.Document.subBulletDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc).length > 0;
         if (e.shiftKey && e.buttons === 1) {
             if (this.props.isTopMost) {
                 this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey ? "alias" : undefined, this._hitIsBullet);
-- 
cgit v1.2.3-70-g09d2


From 9c004c61dad1b6d68dc5bbe6989a12c399866343 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 9 May 2019 21:04:45 -0400
Subject: Fixed exceptions in search

---
 src/server/Search.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/server/Search.ts b/src/server/Search.ts
index 1d8cfdcf0..c3cb3c3e6 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -8,7 +8,7 @@ export class Search {
 
     public async updateDocument(document: any) {
         try {
-            return rp.post(this.url + "dash/update", {
+            return await rp.post(this.url + "dash/update", {
                 headers: { 'content-type': 'application/json' },
                 body: JSON.stringify([document])
             });
@@ -32,7 +32,7 @@ export class Search {
 
     public async clear() {
         try {
-            return rp.post(this.url + "dash/update", {
+            return await rp.post(this.url + "dash/update", {
                 body: {
                     delete: {
                         query: "*:*"
-- 
cgit v1.2.3-70-g09d2


From 5d3c1921644e5a99b0d3281bb601d14c7484bc6f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 9 May 2019 23:45:56 -0400
Subject: Fixed a couple small search things

---
 src/server/index.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/server/index.ts b/src/server/index.ts
index 93e4cafbf..7a548607f 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -318,6 +318,9 @@ const suffixMap: { [type: string]: (string | [string, string | ((json: any) => a
 };
 
 function ToSearchTerm(val: any): { suffix: string, value: any } | undefined {
+    if (val === null || val === undefined) {
+        return;
+    }
     const type = val.__type || typeof val;
     let suffix = suffixMap[type];
     if (!suffix) {
@@ -334,7 +337,11 @@ function ToSearchTerm(val: any): { suffix: string, value: any } | undefined {
         suffix = suffix[0];
     }
 
-    return { suffix, value: val }
+    return { suffix, value: val };
+}
+
+function getSuffix(value: string | [string, any]): string {
+    return typeof value === "string" ? value : value[0];
 }
 
 function UpdateField(socket: Socket, diff: Diff) {
@@ -348,14 +355,14 @@ function UpdateField(socket: Socket, diff: Diff) {
     let dynfield = false;
     for (let key in docfield) {
         if (!key.startsWith("fields.")) continue;
+        dynfield = true;
+        Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = null);
         let val = docfield[key];
         let term = ToSearchTerm(val);
         if (term !== undefined) {
             let { suffix, value } = term;
             key = key.substring(7);
-            Object.values(suffixMap).forEach(suf => update[key + suf] = null);
             update[key + suffix] = { set: value };
-            dynfield = true;
         }
     }
     if (dynfield) {
-- 
cgit v1.2.3-70-g09d2


From 913244091c3ad3fefad7c9e3eeeeb432a9b3d15e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 10 May 2019 06:39:00 -0400
Subject: Refactored SearchBox Made DragManager able to handle async functions
 Cleaned up some other stuff

---
 src/client/util/DragManager.ts  |  16 +++---
 src/client/views/SearchBox.scss |  43 ++++++++--------
 src/client/views/SearchBox.tsx  | 106 ++++++++++++++++++++++++++++------------
 src/server/Search.ts            |   5 +-
 src/server/index.ts             |   4 +-
 5 files changed, 110 insertions(+), 64 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 266679c16..c0402f0c9 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -6,28 +6,28 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie
 import * as globalCssVariables from "../views/globalCssVariables.scss";
 
 export type dropActionType = "alias" | "copy" | undefined;
-export function SetupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Doc, moveFunc?: DragManager.MoveFunction, dropAction?: dropActionType) {
-    let onRowMove = action((e: PointerEvent): void => {
+export function SetupDrag(_reference: React.RefObject<HTMLElement>, docFunc: () => Doc | Promise<Doc>, moveFunc?: DragManager.MoveFunction, dropAction?: dropActionType) {
+    let onRowMove = async (e: PointerEvent) => {
         e.stopPropagation();
         e.preventDefault();
 
         document.removeEventListener("pointermove", onRowMove);
         document.removeEventListener('pointerup', onRowUp);
-        var dragData = new DragManager.DocumentDragData([docFunc()]);
+        var dragData = new DragManager.DocumentDragData([await docFunc()]);
         dragData.dropAction = dropAction;
         dragData.moveDocument = moveFunc;
         DragManager.StartDocumentDrag([_reference.current!], dragData, e.x, e.y);
-    });
-    let onRowUp = action((e: PointerEvent): void => {
+    };
+    let onRowUp = (): void => {
         document.removeEventListener("pointermove", onRowMove);
         document.removeEventListener('pointerup', onRowUp);
-    });
-    let onItemDown = (e: React.PointerEvent) => {
+    };
+    let onItemDown = async (e: React.PointerEvent) => {
         // if (this.props.isSelected() || this.props.isTopMost) {
         if (e.button === 0) {
             e.stopPropagation();
             if (e.shiftKey) {
-                CollectionDockingView.Instance.StartOtherDrag([docFunc()], e);
+                CollectionDockingView.Instance.StartOtherDrag([await docFunc()], e);
             } else {
                 document.addEventListener("pointermove", onRowMove);
                 document.addEventListener("pointerup", onRowUp);
diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss
index 792d6dd3c..b38e6091d 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/SearchBox.scss
@@ -1,47 +1,50 @@
 @import "globalCssVariables";
 
-.searchBox {
+.searchBox-bar {
     height: 32px;
-    //display: flex;
-    //padding: 4px;
-    -webkit-transition: width 0.4s ease-in-out;
-    transition: width 0.4s ease-in-out;
+    display: flex;
+    justify-content: flex-end;
     align-items: center;
+    padding-left: 2px;
+    padding-right: 2px;
 
-
-
-    input[type=text] {
+    .searchBox-input {
         width: 130px;
         -webkit-transition: width 0.4s;
         transition: width 0.4s;
-        position: absolute;
-        right: 100px;
+        align-self: stretch;
     }
 
-    input[type=text]:focus {
+    .searchBox-input:focus {
         width: 500px;
         outline: 3px solid lightblue;
     }
 
-    .filter-button {
-        position: absolute;
-        right: 30px;
+    .searchBox-barChild {
+        flex: 0 1 auto;
+        margin-left: 2px;
+        margin-right: 2px;
     }
 
-    .submit-search {
-        text-align: right;
+    .searchBox-filter {
+        align-self: stretch;
+    }
+
+    .searchBox-submit {
         color: $dark-color;
-        -webkit-transition: right 0.4s;
-        transition: right 0.4s;
     }
 
-    .submit-search:hover {
+    .searchBox-submit:hover {
         color: $main-accent;
         transform: scale(1.05);
         cursor: pointer;
     }
 }
 
+.searchBox-results {
+    margin-left: 27px; //Is there a better way to do this?
+}
+
 .filter-form {
     background: $dark-color;
     height: 400px;
@@ -64,7 +67,7 @@
     height: 20px;
 }
 
-.results {
+.searchBox-results {
     top: 300px;
     display: flex;
     flex-direction: column;
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 7dd1af4e7..9b9735a4b 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -4,7 +4,7 @@ import { observable, action, runInAction } from 'mobx';
 import { Utils } from '../../Utils';
 import { MessageStore } from '../../server/Message';
 import "./SearchBox.scss";
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faSearch, faObjectGroup } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 // const app = express();
@@ -18,9 +18,11 @@ import { DocServer } from '../DocServer';
 import { Doc } from '../../new_fields/Doc';
 import { Id } from '../../new_fields/RefField';
 import { DocumentManager } from '../util/DocumentManager';
-
+import { SetupDrag } from '../util/DragManager';
+import { Docs } from '../documents/Documents';
 
 library.add(faSearch);
+library.add(faObjectGroup);
 
 @observer
 export class SearchBox extends React.Component {
@@ -40,30 +42,33 @@ export class SearchBox extends React.Component {
 
     @action
     submitSearch = async () => {
-        runInAction(() => this._results = []);
         let query = this.searchString;
-
-        let response = await rp.get('http://localhost:1050/search', {
-            qs: {
-                query
-            }
-        });
-        let results = JSON.parse(response);
-
         //gets json result into a list of documents that can be used
-        this.getResults(results);
+        const results = await this.getResults(query);
 
-        runInAction(() => { this._resultsOpen = true; });
+        runInAction(() => {
+            this._resultsOpen = true;
+            this._results = results;
+        });
     }
 
     @action
-    getResults = async (res: string[]) => {
-        res.map(async result => {
-            const doc = await DocServer.GetRefField(result);
-            if (doc instanceof Doc) {
-                runInAction(() => this._results.push(doc));
+    getResults = async (query: string) => {
+        let response = await rp.get('http://localhost:1050/search', {
+            qs: {
+                query
             }
         });
+        let res: string[] = JSON.parse(response);
+        const fields = await DocServer.GetRefFields(res);
+        const docs: Doc[] = [];
+        for (const id of res) {
+            const field = fields[id];
+            if (field instanceof Doc) {
+                docs.push(field);
+            }
+        }
+        return docs;
     }
 
     @action
@@ -82,6 +87,7 @@ export class SearchBox extends React.Component {
         var id = (e.target as any).id;
         if (id !== "result") {
             this._resultsOpen = false;
+            this._results = [];
         }
 
     }
@@ -107,27 +113,63 @@ export class SearchBox extends React.Component {
         }
     }
 
+    collectionRef = React.createRef<HTMLSpanElement>();
+    startDragCollection = async () => {
+        const results = await this.getResults(this.searchString);
+        const docs = results.map(doc => {
+            const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
+            if (isProto) {
+                return Doc.MakeDelegate(doc);
+            } else {
+                return Doc.MakeAlias(doc);
+            }
+        });
+        let x = 0;
+        let y = 0;
+        for (const doc of docs) {
+            doc.x = x;
+            doc.y = y;
+            doc.width = 200;
+            doc.height = 200;
+            x += 250;
+            if (x > 1000) {
+                x = 0;
+                y += 250;
+            }
+        }
+        return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, title: `Search Docs: "${this.searchString}"` });
+    }
+
     render() {
         return (
-            <div id="outer">
-                <div className="searchBox" id="outer">
-
-                    <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search.." className="search" id="input" onKeyPress={this.enter} />
-                    <button className="filter-button" onClick={this.toggleFilterDisplay}> Filter </button>
-                    <div className="submit-search" id="submit" onClick={this.submitSearch}><FontAwesomeIcon style={{ height: "100%" }} icon="search" size="lg" /></div>
-                    <div className="results" id="results" style={this._resultsOpen ? { display: "flex" } : { display: "none" }}>
-                        {this._results.map(result => <SearchItem doc={result} key={result[Id]} />)}
+            <div>
+                <div className="searchBox-container">
+                    <div className="searchBox-bar">
+                        <span onPointerDown={SetupDrag(this.collectionRef, this.startDragCollection)} ref={this.collectionRef}>
+                            <FontAwesomeIcon icon="object-group" className="searchBox-barChild" size="lg" />
+                        </span>
+                        <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search..."
+                            className="searchBox-barChild searchBox-input" onKeyPress={this.enter}
+                            style={{ width: this._resultsOpen ? "500px" : undefined }} />
+                        <button className="searchBox-barChild searchBox-filter" onClick={this.toggleFilterDisplay}>Filter</button>
+                        <FontAwesomeIcon icon="search" size="lg" className="searchBox-barChild searchBox-submit" />
                     </div>
+                    {this._resultsOpen ? (
+                        <div className="searchBox-results">
+                            {this._results.map(result => <SearchItem doc={result} key={result[Id]} />)}
+                        </div>
+                    ) : null}
                 </div>
-                <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
-                    <div className="filter-form" id="header">Filter Search Results</div>
-                    <div className="filter-form" id="option">
-                        filter by collection, key, type of node
+                {this._open ? (
+                    <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
+                        <div className="filter-form" id="header">Filter Search Results</div>
+                        <div className="filter-form" id="option">
+                            filter by collection, key, type of node
                     </div>
 
-                </div>
+                    </div>
+                ) : null}
             </div>
-
         );
     }
 }
\ No newline at end of file
diff --git a/src/server/Search.ts b/src/server/Search.ts
index c3cb3c3e6..1bede5b49 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -8,11 +8,12 @@ export class Search {
 
     public async updateDocument(document: any) {
         try {
-            return await rp.post(this.url + "dash/update", {
+            const res = await rp.post(this.url + "dash/update", {
                 headers: { 'content-type': 'application/json' },
                 body: JSON.stringify([document])
             });
-        } catch { }
+            return res;
+        } catch (e) { }
     }
 
     public async search(query: string) {
diff --git a/src/server/index.ts b/src/server/index.ts
index 7a548607f..6c64aa161 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -356,12 +356,12 @@ function UpdateField(socket: Socket, diff: Diff) {
     for (let key in docfield) {
         if (!key.startsWith("fields.")) continue;
         dynfield = true;
-        Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = null);
         let val = docfield[key];
+        key = key.substring(7);
+        Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = null);
         let term = ToSearchTerm(val);
         if (term !== undefined) {
             let { suffix, value } = term;
-            key = key.substring(7);
             update[key + suffix] = { set: value };
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 89ca54d2d335cf7d44107b03014333ee5501eb7b Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 10 May 2019 11:42:42 -0400
Subject: fixed search!

---
 src/client/views/collections/CollectionDockingView.tsx | 1 -
 src/server/index.ts                                    | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 159815ea5..5ee943da9 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -412,7 +412,6 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     parentActive={returnTrue}
                     whenActiveChanged={emptyFunction}
                     focus={emptyFunction}
-                    bringToFront={emptyFunction}
                     ContainingCollectionView={undefined} />
             </div >);
     }
diff --git a/src/server/index.ts b/src/server/index.ts
index 6c64aa161..e5cc3ce68 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -358,7 +358,7 @@ function UpdateField(socket: Socket, diff: Diff) {
         dynfield = true;
         let val = docfield[key];
         key = key.substring(7);
-        Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = null);
+        Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = { set: null });
         let term = ToSearchTerm(val);
         if (term !== undefined) {
             let { suffix, value } = term;
-- 
cgit v1.2.3-70-g09d2


From f38d2de249ddf2cad533e2f92197738835688a73 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 10 May 2019 11:54:33 -0400
Subject: fixed dragging search results.

---
 src/client/views/SearchItem.tsx | 13 ++++++++++++-
 src/new_fields/Doc.ts           |  4 ++--
 2 files changed, 14 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index d30579907..0da0bdae8 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -8,6 +8,7 @@ import { Cast } from "../../new_fields/Types";
 import { FieldView, FieldViewProps } from './nodes/FieldView';
 import { computed } from "mobx";
 import { IconField } from "../../new_fields/IconField";
+import { SetupDrag } from "../util/DragManager";
 
 
 export interface SearchProps {
@@ -40,9 +41,19 @@ export class SearchItem extends React.Component<SearchProps> {
         return <FontAwesomeIcon icon={button} className="documentView-minimizedIcon" />;
     }
 
+    collectionRef = React.createRef<HTMLDivElement>();
+    startDocDrag = () => {
+        let doc = this.props.doc;
+        const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
+        if (isProto) {
+            return Doc.MakeDelegate(doc);
+        } else {
+            return Doc.MakeAlias(doc);
+        }
+    }
     render() {
         return (
-            <div className="search-item" id="result" onClick={this.onClick}>
+            <div className="search-item" ref={this.collectionRef} id="result" onClick={this.onClick} onPointerDown={SetupDrag(this.collectionRef, this.startDocDrag)} >
                 <div className="search-title" id="result" >title: {this.props.doc.title}</div>
                 {/* <div className="search-type" id="result" >Type: {this.props.doc.layout}</div> */}
                 {/* <div className="search-type" >{SearchItem.DocumentIcon(this.layout)}</div> */}
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index f844dad6e..2ab145fa3 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -92,8 +92,8 @@ export class Doc extends RefField {
 
     private [Self] = this;
     private [SelfProxy]: any;
-    public [WidthSym] = () => NumCast(this.__fields.width);  // bcz: is this the right way to access width/height?   it didn't work with : this.width
-    public [HeightSym] = () => NumCast(this.__fields.height);
+    public [WidthSym] = () => NumCast(this[SelfProxy].width);  // bcz: is this the right way to access width/height?   it didn't work with : this.width
+    public [HeightSym] = () => NumCast(this[SelfProxy].height);
 
     public [HandleUpdate](diff: any) {
         console.log(diff);
-- 
cgit v1.2.3-70-g09d2


From 464843e773022edc9a6ce6228b88ffb72021fa85 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 10 May 2019 13:13:35 -0400
Subject: Fixed search url

---
 src/client/views/SearchBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 9b9735a4b..134201071 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -54,7 +54,7 @@ export class SearchBox extends React.Component {
 
     @action
     getResults = async (query: string) => {
-        let response = await rp.get('http://localhost:1050/search', {
+        let response = await rp.get(DocServer.prepend('/search'), {
             qs: {
                 query
             }
-- 
cgit v1.2.3-70-g09d2


From 7da76d2538ebde21d7a878b5096d5a673e5d6375 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 10 May 2019 23:01:08 -0400
Subject: added summary screen grab icon as a template view of a text document.
  converted Cast(...ListSpec(Doc)) pattern to DocListCast

---
 src/client/northstar/dash-nodes/HistogramBox.tsx   | 10 +++----
 src/client/util/DocumentManager.ts                 |  6 ++--
 src/client/util/DragManager.ts                     |  6 ++--
 src/client/views/PresentationView.tsx              | 11 +++++--
 src/client/views/Templates.tsx                     | 35 +++++++++++++++-------
 .../views/collections/CollectionBaseView.tsx       |  8 ++---
 .../views/collections/CollectionSchemaView.tsx     |  6 ++--
 src/client/views/collections/CollectionSubView.tsx |  4 +--
 .../views/collections/CollectionTreeView.tsx       | 22 +++++++-------
 .../CollectionFreeFormLinksView.tsx                | 12 ++++----
 .../collections/collectionFreeForm/MarqueeView.tsx | 24 +++++++++++----
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 28 +++++++++--------
 src/client/views/nodes/DocumentView.tsx            | 23 +++++++-------
 src/client/views/nodes/IconBox.tsx                 |  4 +--
 src/client/views/nodes/ImageBox.tsx                | 14 ++++++---
 src/client/views/nodes/LinkMenu.tsx                |  6 ++--
 src/new_fields/Doc.ts                              | 10 +++++--
 17 files changed, 137 insertions(+), 92 deletions(-)

(limited to 'src')

diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx
index 5e7b867b3..ed556cf45 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBox.tsx
@@ -19,7 +19,7 @@ import { HistogramLabelPrimitives } from "./HistogramLabelPrimitives";
 import { StyleConstants } from "../utils/StyleContants";
 import { NumCast, Cast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
-import { Doc } from "../../../new_fields/Doc";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/RefField";
 
 
@@ -117,15 +117,15 @@ export class HistogramBox extends React.Component<FieldViewProps> {
             runInAction(() => {
                 this.HistoOp = histoOp ? histoOp.HistoOp : HistogramOperation.Empty;
                 if (this.HistoOp !== HistogramOperation.Empty) {
-                    reaction(() => Cast(this.props.Document.linkedFromDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc), (docs) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true });
-                    reaction(() => Cast(this.props.Document.brushingDocs, listSpec(Doc), []).length,
+                    reaction(() => DocListCast(this.props.Document.linkedFromDocs), (docs) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true });
+                    reaction(() => DocListCast(this.props.Document.brushingDocs).length,
                         () => {
-                            let brushingDocs = Cast(this.props.Document.brushingDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
+                            let brushingDocs = DocListCast(this.props.Document.brushingDocs);
                             const proto = this.props.Document.proto;
                             if (proto) {
                                 this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...brushingDocs.map((brush, i) => {
                                     brush.backgroundColor = StyleConstants.BRUSH_COLORS[i % StyleConstants.BRUSH_COLORS.length];
-                                    let brushed = Cast(brush.brushingDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
+                                    let brushed = DocListCast(brush.brushingDocs);
                                     return { l: brush, b: brushed[0][Id] === proto[Id] ? brushed[1] : brushed[0] };
                                 }));
                             }
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index a8b643d4d..9a7a94228 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -1,6 +1,6 @@
 import { computed, observable } from 'mobx';
 import { DocumentView } from '../views/nodes/DocumentView';
-import { Doc } from '../../new_fields/Doc';
+import { Doc, DocListCast } from '../../new_fields/Doc';
 import { FieldValue, Cast, NumCast, BoolCast } from '../../new_fields/Types';
 import { listSpec } from '../../new_fields/Schema';
 import { undoBatch } from './UndoManager';
@@ -73,7 +73,7 @@ export class DocumentManager {
     @computed
     public get LinkedDocumentViews() {
         return DocumentManager.Instance.DocumentViews.filter(dv => dv.isSelected() || BoolCast(dv.props.Document.libraryBrush, false)).reduce((pairs, dv) => {
-            let linksList = Cast(dv.props.Document.linkedToDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
+            let linksList = DocListCast(dv.props.Document.linkedToDocs);
             if (linksList && linksList.length) {
                 pairs.push(...linksList.reduce((pairs, link) => {
                     if (link) {
@@ -86,7 +86,7 @@ export class DocumentManager {
                     return pairs;
                 }, [] as { a: DocumentView, b: DocumentView, l: Doc }[]));
             }
-            linksList = Cast(dv.props.Document.linkedFromDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
+            linksList = DocListCast(dv.props.Document.linkedFromDocs);
             if (linksList && linksList.length) {
                 pairs.push(...linksList.reduce((pairs, link) => {
                     if (link) {
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index c0402f0c9..2da0d5b51 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -1,5 +1,5 @@
 import { action, runInAction } from "mobx";
-import { Doc, DocListCast } from "../../new_fields/Doc";
+import { Doc, DocListCastAsync } from "../../new_fields/Doc";
 import { Cast } from "../../new_fields/Types";
 import { emptyFunction } from "../../Utils";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
@@ -43,8 +43,8 @@ export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: n
     let draggedDocs: Doc[] = [];
     let draggedFromDocs: Doc[] = []
     if (srcTarg) {
-        let linkToDocs = await DocListCast(srcTarg.linkedToDocs);
-        let linkFromDocs = await DocListCast(srcTarg.linkedFromDocs);
+        let linkToDocs = await DocListCastAsync(srcTarg.linkedToDocs);
+        let linkFromDocs = await DocListCastAsync(srcTarg.linkedFromDocs);
         if (linkToDocs) draggedDocs = linkToDocs.map(linkDoc => Cast(linkDoc.linkedTo, Doc) as Doc);
         if (linkFromDocs) draggedFromDocs = linkFromDocs.map(linkDoc => Cast(linkDoc.linkedFrom, Doc) as Doc);
     }
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index 4853eb151..3fb24a339 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -141,8 +141,15 @@ export class PresentationView extends React.Component<PresViewProps>  {
             (activeW) => {
                 if (activeW && activeW instanceof Doc) {
                     PromiseValue(Cast(activeW.presentationView, Doc)).
-                        then(pv => runInAction(() =>
-                            self.Document = pv ? pv : (activeW.presentationView = new Doc())))
+                        then(pv => runInAction(() => {
+                            if (pv) self.Document = pv;
+                            else {
+                                pv = new Doc();
+                                pv.title = "Presentation Doc";
+                                activeW.presentationView = pv;
+                                self.Document = pv;
+                            }
+                        }))
                 }
             },
             { fireImmediately: true });
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index bbedc95f1..a98870b04 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -5,6 +5,7 @@ export enum TemplatePosition {
     InnerBottom,
     InnerRight,
     InnerLeft,
+    TopRight,
     OutterTop,
     OutterBottom,
     OutterRight,
@@ -39,30 +40,42 @@ export namespace Templates {
     // export const BasicLayout = new Template("Basic layout", "{layout}");
 
     export const Caption = new Template("Caption", TemplatePosition.OutterBottom,
-        `<div id="screenSpace" style="top: 100%; font-size:14px; background:yellow; width:100%; position:absolute"><FormattedTextBox {...props} fieldKey={"caption"} /></div>`
-    );
+        `<div id="screenSpace" style="top: 100%; font-size:14px; background:yellow; width:100%; position:absolute">
+            <FormattedTextBox {...props} fieldKey={"caption"} />
+        </div>` );
+
     export const TitleOverlay = new Template("TitleOverlay", TemplatePosition.InnerTop,
-        `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div>
-        <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; ">
-        <span style="text-align:center;width:100%;font-size:20px;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{props.Document.title}</span>
-        </div></div>`
-    );
+        `<div>
+            <div style="height:100%; width:100%;position:absolute;">{layout}</div>
+            <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; ">
+                <span style="text-align:center;width:100%;font-size:20px;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{props.Document.title}</span>
+            </div>
+        </div>` );
+
     export const Title = new Template("Title", TemplatePosition.InnerTop,
         `<div><div style="height:calc(100% - 25px); margin-top: 25px; width:100%;position:absolute;">{layout}</div>
         <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; ">
             <span style="text-align:center;width:100%;font-size:20px;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{props.Document.title}</span>
-        </div></div>`
-    );
+        </div></div>` );
 
     export const Bullet = new Template("Bullet", TemplatePosition.InnerTop,
         `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div>
-        <div id="isBullet" style="height:15px; width:15px; margin-left:-16px; pointer-events:all; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white;">
-        <img  id="isBullet"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAZlBMVEX///8AAABmZmb7+/tYWFhgYGBFRUVSUlL4+Pg/Pz9jY2N5eXmcnJyioqKBgYFzc3NtbW1LS0s3NzfW1taWlpaOjo6IiIgvLy9WVlampqZcXFw5OTlvb28mJiYxMTHe3t7l5eUjIyMY8kIZAAAD2UlEQVR4nO2d61biMBRGW1FBEVHxfp15/5ecOVa5lHxtArmck/Xtn1BotjtNoXQtm4YQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEFIrX6UHEA1gsmrneceRjHm7cj28attKFOf/TRyKIliH4vzbZE+xE2zbZYkxRWX5Y9JT/BW0X3G+NtlR3Ahar7jcMtlS3Ba0XXG+Y7JW3BW0XHHZM/lR7AvaVewL/ijuC1pV3Bf8VnQJ2lR0CYriq/Nxg4puwfa1aZ7dz9yUHnEgN26NZ3luWkPFd7fEtHsWVDwpO+YgTgYKCuYn6tAU7TBecaygcGpZEQie7m5luKJPQQFUvCwx5iAuvQoK4KShvSIoOHVtCz7dnOUecxBn7kG/urc2eCz6T9EOcxXDCgpAUetyAwoOCBqrGF5QMKR4mCA8L+pTBIJwkRl95eifJjPHTDYTFQ8vePyrs3BsBfXLzfFHkvKKMY4j1ctNnCmmuGKslfCQT0RZiPdFVmnFmOcy36sDWYn7DU9hxdifRkKuEGQh/pWW0K/QiUlxtUxVxTTXyhQtN6kuI6mpmO5qpxJFIBjl1yMVimmvV4PfrnIq3iYsKICTRj7F9L84gIq38fYwCCj4HnMfRY/FPL8ZFayYo6BQbLlJeZrYpVDFXAUFcMtKWkUgmOhmnwKKOQsK4NaxdIp5CwqZj8X8gv27jNecJ9nZuXtnie/SzjhRQcHkt6Fnq1imoAAUY1csVVDIUrFcQSGDIhC8jriLQZIrli0oXKdVLF1QSFqxfEEBVLyI8NYXCgoKySaqhinakajimxrBRBX1FBQSVNRyDP4SXVGbYHRFfYJN8xhTESwyj5HHHEjEihoLCqDiXfAb3aksKESqCAoqEIxUUW9BAS03E+93mOhcZDYcXVF3QeHBPcI3v4qo4EPiUQcBKr75vHaiv6AAKt6NV0SCqgoKqOKYovpFZgOo+DmsOHkyUlA4ZKKamaIdQPEJK5oqKKCKM7D9zFZBIayiuYICWm5cFWef7o3vs486CP8VdQIEVRcU7sFE7VecgSmqvKDgVxEJqi8ogIof2xVnH2YLCuMT1fAU7RirOPtrXHCsovmCwlDFCgoKWNH4IrMBTdQ/NUzRjiu3CeCq9HAPAVSspaDgX9FkQcG3ollB34qGBf0UTQv6KBoXHFc0LzimWIFg0ywGBBelBxcHXLGKggKqWElBwV2xIkF3xaoEXYqVCe4rVifYV3wpPZwULOouKLzUXVBY1F1QeKm7oLCoXVAqVi7YNM7/F0YIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCG+/ANh4i1CHdc63QAAAABJRU5ErkJggg==" 
+        <div id="isExpander" style="height:15px; width:15px; margin-left:-16px; pointer-events:all; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white;">
+        <img  id="isExpander"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAZlBMVEX///8AAABmZmb7+/tYWFhgYGBFRUVSUlL4+Pg/Pz9jY2N5eXmcnJyioqKBgYFzc3NtbW1LS0s3NzfW1taWlpaOjo6IiIgvLy9WVlampqZcXFw5OTlvb28mJiYxMTHe3t7l5eUjIyMY8kIZAAAD2UlEQVR4nO2d61biMBRGW1FBEVHxfp15/5ecOVa5lHxtArmck/Xtn1BotjtNoXQtm4YQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEFIrX6UHEA1gsmrneceRjHm7cj28attKFOf/TRyKIliH4vzbZE+xE2zbZYkxRWX5Y9JT/BW0X3G+NtlR3Ahar7jcMtlS3Ba0XXG+Y7JW3BW0XHHZM/lR7AvaVewL/ijuC1pV3Bf8VnQJ2lR0CYriq/Nxg4puwfa1aZ7dz9yUHnEgN26NZ3luWkPFd7fEtHsWVDwpO+YgTgYKCuYn6tAU7TBecaygcGpZEQie7m5luKJPQQFUvCwx5iAuvQoK4KShvSIoOHVtCz7dnOUecxBn7kG/urc2eCz6T9EOcxXDCgpAUetyAwoOCBqrGF5QMKR4mCA8L+pTBIJwkRl95eifJjPHTDYTFQ8vePyrs3BsBfXLzfFHkvKKMY4j1ctNnCmmuGKslfCQT0RZiPdFVmnFmOcy36sDWYn7DU9hxdifRkKuEGQh/pWW0K/QiUlxtUxVxTTXyhQtN6kuI6mpmO5qpxJFIBjl1yMVimmvV4PfrnIq3iYsKICTRj7F9L84gIq38fYwCCj4HnMfRY/FPL8ZFayYo6BQbLlJeZrYpVDFXAUFcMtKWkUgmOhmnwKKOQsK4NaxdIp5CwqZj8X8gv27jNecJ9nZuXtnie/SzjhRQcHkt6Fnq1imoAAUY1csVVDIUrFcQSGDIhC8jriLQZIrli0oXKdVLF1QSFqxfEEBVLyI8NYXCgoKySaqhinakajimxrBRBX1FBQSVNRyDP4SXVGbYHRFfYJN8xhTESwyj5HHHEjEihoLCqDiXfAb3aksKESqCAoqEIxUUW9BAS03E+93mOhcZDYcXVF3QeHBPcI3v4qo4EPiUQcBKr75vHaiv6AAKt6NV0SCqgoKqOKYovpFZgOo+DmsOHkyUlA4ZKKamaIdQPEJK5oqKKCKM7D9zFZBIayiuYICWm5cFWef7o3vs486CP8VdQIEVRcU7sFE7VecgSmqvKDgVxEJqi8ogIof2xVnH2YLCuMT1fAU7RirOPtrXHCsovmCwlDFCgoKWNH4IrMBTdQ/NUzRjiu3CeCq9HAPAVSspaDgX9FkQcG3ollB34qGBf0UTQv6KBoXHFc0LzimWIFg0ywGBBelBxcHXLGKggKqWElBwV2xIkF3xaoEXYqVCe4rVifYV3wpPZwULOouKLzUXVBY1F1QeKm7oLCoXVAqVi7YNM7/F0YIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCG+/ANh4i1CHdc63QAAAABJRU5ErkJggg==" 
          width="15px" height="15px"/>
          </div>
         </div>`
     );
 
+    export function ImageOverlay(width: number, height: number, field: string = "thumbnail") {
+        return (`<div>
+                <div style="height:100%; width:100%;position:absolute;">{layout}</div>
+                <div style="width:${width}px; height:${height}px; top:0; right:0; background:rgba(0,0,0,0.25); position:absolute;overflow:hidden;">
+                    <ImageBox id="isExpander" {...props} PanelWidth={${width}} fieldKey={"${field}"} />
+                </div>
+            </div>`);
+    }
+
     export const TemplateList: Template[] = [Title, TitleOverlay, Caption, Bullet];
 
     export function sortTemplates(a: Template, b: Template) {
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 2b1f7bb37..645296d27 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ContextMenu } from '../ContextMenu';
 import { FieldViewProps } from '../nodes/FieldView';
 import { Cast, FieldValue, PromiseValue, NumCast } from '../../../new_fields/Types';
-import { Doc, FieldResult, Opt } from '../../../new_fields/Doc';
+import { Doc, FieldResult, Opt, DocListCast } from '../../../new_fields/Doc';
 import { listSpec } from '../../../new_fields/Schema';
 import { List } from '../../../new_fields/List';
 import { Id } from '../../../new_fields/RefField';
@@ -63,13 +63,13 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
         if (!(documentToAdd instanceof Doc)) {
             return false;
         }
-        let data = Cast(documentToAdd.data, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
-        for (const doc of data.filter(d => d instanceof Document)) {
+        let data = DocListCast(documentToAdd.data);
+        for (const doc of data) {
             if (this.createsCycle(doc, containerDocument)) {
                 return true;
             }
         }
-        let annots = Cast(documentToAdd.annotations, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
+        let annots = DocListCast(documentToAdd.annotations);
         for (const annot of annots) {
             if (this.createsCycle(annot, containerDocument)) {
                 return true;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index ae949b2ed..506e60a65 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -19,7 +19,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
-import { Opt, Field, Doc, DocListCast } from "../../../new_fields/Doc";
+import { Opt, Field, Doc, DocListCastAsync, DocListCast } from "../../../new_fields/Doc";
 import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
 import { List } from "../../../new_fields/List";
@@ -118,7 +118,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                         }
                         const run = script.run;
                         //TODO This should be able to be refactored to compile the script once
-                        const val = await DocListCast(this.props.Document[this.props.fieldKey])
+                        const val = await DocListCastAsync(this.props.Document[this.props.fieldKey])
                         val && val.forEach(doc => applyToDoc(doc, run));
                     }}>
                 </EditableView>
@@ -276,7 +276,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 
     get documentKeysCheckList() {
-        const docs = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).filter(d => d).map(d => d as Doc);
+        const docs = DocListCast(this.props.Document[this.props.fieldKey]);
         let keys: { [key: string]: boolean } = {};
         // bcz: ugh.  this is untracked since otherwise a large collection of documents will blast the server for all their fields.
         //  then as each document's fields come back, we update the documents _proxies.  Each time we do this, the whole schema will be
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 0b08e150a..a86d250bd 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -10,7 +10,7 @@ import * as rp from 'request-promise';
 import { CollectionView } from "./CollectionView";
 import { CollectionPDFView } from "./CollectionPDFView";
 import { CollectionVideoView } from "./CollectionVideoView";
-import { Doc, Opt, FieldResult } from "../../../new_fields/Doc";
+import { Doc, Opt, FieldResult, DocListCast } from "../../../new_fields/Doc";
 import { DocComponent } from "../DocComponent";
 import { listSpec } from "../../../new_fields/Schema";
 import { Cast, PromiseValue, FieldValue, ListSpec } from "../../../new_fields/Types";
@@ -49,7 +49,7 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
         get children() {
             //TODO tfs: This might not be what we want?
             //This linter error can't be fixed because of how js arguments work, so don't switch this to filter(FieldValue)
-            return Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).filter(doc => FieldValue(doc)).map(doc => doc as Doc);
+            return DocListCast(this.props.Document[this.props.fieldKey]);
         }
 
         @action
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 33787f06b..78c84cc89 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -18,9 +18,7 @@ import { Main } from '../Main';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
 import { CollectionDockingView } from './CollectionDockingView';
 import { DocumentManager } from '../../util/DocumentManager';
-import { Utils } from '../../../Utils';
 import { List } from '../../../new_fields/List';
-import { indexOf } from 'typescript-collections/dist/lib/arrays';
 
 
 export interface TreeViewProps {
@@ -155,16 +153,21 @@ class TreeView extends React.Component<TreeViewProps> {
         let keys = Array.from(Object.keys(this.props.document));
         if (this.props.document.proto instanceof Doc) {
             keys.push(...Array.from(Object.keys(this.props.document.proto)));
+            while (keys.indexOf("proto") !== -1) keys.splice(keys.indexOf("proto"), 1);
         }
         keys.map(key => {
-            let docList = Cast(this.props.document[key], listSpec(Doc));
-            if (docList instanceof List && docList.length && docList[0] instanceof Doc) {
+            let docList = DocListCast(this.props.document[key]);
+            let doc = Cast(this.props.document[key], Doc);
+            if (doc instanceof Doc || docList.length) {
                 if (!this._collapsed) {
                     bulletType = BulletType.Collapsible;
+                    let spacing = (key === "data") ? 0 : -10;
                     contentElement.push(<ul key={key + "more"}>
                         {(key === "data") ? (null) :
-                            <span className="collectionTreeView-keyHeader" key={key}>{key}</span>}
-                        {TreeView.GetChildElements(docList, key !== "data", (doc: Doc) => this.remove(doc, key), this.move, this.props.dropAction)}
+                            <span className="collectionTreeView-keyHeader" style={{ display: "block", marginTop: "7px" }} key={key}>{key}</span>}
+                        <div style={{ display: "block", marginTop: `${spacing}px` }}>
+                            {TreeView.GetChildElements(doc instanceof Doc ? [doc] : docList, key !== "data", (doc: Doc) => this.remove(doc, key), this.move, this.props.dropAction)}
+                        </div>
                     </ul >);
                 } else
                     bulletType = BulletType.Collapsed;
@@ -179,7 +182,7 @@ class TreeView extends React.Component<TreeViewProps> {
             </li>
         </div>;
     }
-    public static GetChildElements(docs: (Doc | Promise<Doc>)[], allowMinimized: boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) {
+    public static GetChildElements(docs: Doc[], allowMinimized: boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) {
         return docs.filter(child => child instanceof Doc && !child.excludeFromLibrary && (allowMinimized || !child.isMinimized)).filter(doc => FieldValue(doc)).map(child =>
             <TreeView document={child as Doc} key={(child as Doc)[Id]} deleteDoc={remove} moveDocument={move} dropAction={dropAction} />);
     }
@@ -203,12 +206,11 @@ export class CollectionTreeView extends CollectionSubView(Document) {
         }
     }
     render() {
-        const children = this.children;
         let dropAction = StrCast(this.props.Document.dropAction, "alias") as dropActionType;
-        if (!children) {
+        if (!this.children) {
             return (null);
         }
-        let childElements = TreeView.GetChildElements(children, false, this.remove, this.props.moveDocument, dropAction);
+        let childElements = TreeView.GetChildElements(this.children, false, this.remove, this.props.moveDocument, dropAction);
 
         return (
             <div id="body" className="collectionTreeView-dropTarget"
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 62b1456cf..d5ce4e1e7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -7,7 +7,7 @@ import { CollectionViewProps } from "../CollectionSubView";
 import "./CollectionFreeFormLinksView.scss";
 import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView";
 import React = require("react");
-import { Doc, DocListCast } from "../../../../new_fields/Doc";
+import { Doc, DocListCastAsync, DocListCast } from "../../../../new_fields/Doc";
 import { Cast, FieldValue, NumCast, StrCast } from "../../../../new_fields/Types";
 import { listSpec } from "../../../../new_fields/Schema";
 import { List } from "../../../../new_fields/List";
@@ -20,11 +20,11 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
     componentDidMount() {
         this._brushReactionDisposer = reaction(
             () => {
-                let doclist = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []);
-                return { doclist: doclist ? doclist : [], xs: doclist instanceof List ? doclist.map(d => d instanceof Doc && d.x) : [] };
+                let doclist = DocListCast(this.props.Document[this.props.fieldKey]);
+                return { doclist: doclist ? doclist : [], xs: doclist.map(d => d.x) };
             },
-            async () => {
-                let doclist = await DocListCast(this.props.Document[this.props.fieldKey]);
+            () => {
+                let doclist = DocListCast(this.props.Document[this.props.fieldKey]);
                 let views = doclist ? doclist.filter(doc => StrCast(doc.backgroundLayout).indexOf("istogram") !== -1) : [];
                 views.forEach((dstDoc, i) => {
                     views.forEach((srcDoc, j) => {
@@ -84,7 +84,7 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
         }
         if (view.props.ContainingCollectionView) {
             let collid = view.props.ContainingCollectionView.props.Document[Id];
-            Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []).filter(d => d).map(d => d as Doc).
+            DocListCast(this.props.Document[this.props.fieldKey]).
                 filter(child =>
                     child[Id] === collid).map(view =>
                         DocumentManager.Instance.getDocumentViews(view).map(view =>
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 1bf39e335..9ace0272a 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -1,3 +1,4 @@
+import * as htmlToImage from "html-to-image";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Docs } from "../../../documents/Documents";
@@ -14,6 +15,8 @@ import { Doc } from "../../../../new_fields/Doc";
 import { NumCast, Cast } from "../../../../new_fields/Types";
 import { InkField, StrokeData } from "../../../../new_fields/InkField";
 import { List } from "../../../../new_fields/List";
+import { ImageField } from "../../../../new_fields/URLField";
+import { Template, Templates } from "../../Templates";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -30,6 +33,7 @@ interface MarqueeViewProps {
 @observer
 export class MarqueeView extends React.Component<MarqueeViewProps>
 {
+    private _mainCont = React.createRef<HTMLDivElement>();
     @observable _lastX: number = 0;
     @observable _lastY: number = 0;
     @observable _downX: number = 0;
@@ -166,7 +170,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
     @undoBatch
     @action
-    marqueeCommand = (e: KeyboardEvent) => {
+    marqueeCommand = async (e: KeyboardEvent) => {
         if (this._commandExecuted) {
             return;
         }
@@ -224,13 +228,17 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
                 let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
 
+                let dataUrl = await htmlToImage.toPng(this._mainCont.current!, { width: bounds.width, height: bounds.height, quality: 1 });
+                summary.proto!.thumbnail = new ImageField(new URL(dataUrl));
+
+                summary.proto!.templates = new List<string>([Templates.ImageOverlay(Math.min(50, bounds.width), bounds.height * Math.min(50, bounds.width) / bounds.width, "thumbnail")]);
                 if (e.key === "s" || e.key === "p") {
                     summary.proto!.maximizeOnRight = true;
                     newCollection.proto!.summaryDoc = summary;
                     selected = [newCollection];
                 }
                 summary.proto!.summarizedDocs = new List<Doc>(selected);
-                summary.proto!.isButton = true;
+                //summary.proto!.isButton = true;
                 selected.map(summarizedDoc => {
                     let maxx = NumCast(summarizedDoc.x, undefined);
                     let maxy = NumCast(summarizedDoc.y, undefined);
@@ -313,17 +321,21 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
     @computed
     get marqueeDiv() {
-        let p = this.props.getContainerTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
         let v = this.props.getContainerTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
-        return <div className="marquee" style={{ transform: `translate(${p[0]}px, ${p[1]}px)`, width: `${Math.abs(v[0])}`, height: `${Math.abs(v[1])}` }} >
+        return <div className="marquee" style={{ width: `${Math.abs(v[0])}`, height: `${Math.abs(v[1])}` }} >
             <span className="marquee-legend" />
         </div>;
     }
 
     render() {
+        let p = this.props.getContainerTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
         return <div className="marqueeView" style={{ borderRadius: "inherit" }} onClick={this.onClick} onPointerDown={this.onPointerDown}>
-            {this.props.children}
-            {!this._visible ? (null) : this.marqueeDiv}
+            <div style={{ position: "absolute", transform: `translate(${p[0]}px, ${p[1]}px)` }} >
+                <div ref={this._mainCont} style={{ position: "absolute", transform: `translate(${-p[0]}px, ${-p[1]}px)` }} >
+                    {this.props.children}
+                </div>
+                {!this._visible ? null : this.marqueeDiv}
+            </div>
         </div>;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index b05f2eea2..39d216da0 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -9,10 +9,10 @@ import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schem
 import { FieldValue, Cast, NumCast, BoolCast, StrCast } from "../../../new_fields/Types";
 import { OmitKeys, Utils } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
-import { Doc, DocListCast, HeightSym } from "../../../new_fields/Doc";
+import { Doc, DocListCastAsync, DocListCast, } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { undoBatch, UndoManager } from "../../util/UndoManager";
+import { UndoManager } from "../../util/UndoManager";
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 }
@@ -65,7 +65,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
     panelWidth = () => this.props.PanelWidth();
     panelHeight = () => this.props.PanelHeight();
-    toggleMinimized = async () => this.toggleIcon(await DocListCast(this.props.Document.maximizedDocs));
+    toggleMinimized = async () => this.toggleIcon(await DocListCastAsync(this.props.Document.maximizedDocs));
     getTransform = (): Transform => this.props.ScreenToLocalTransform()
         .translate(-this.X, -this.Y)
         .scale(1 / this.contentScaling()).scale(1 / this.zoom)
@@ -132,7 +132,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         let minimizedDoc: Doc | undefined = this.props.Document;
         if (!maximizedDocs) {
             minimizedDoc = await Cast(this.props.Document.minimizedDoc, Doc);
-            if (minimizedDoc) maximizedDocs = await DocListCast(minimizedDoc.maximizedDocs);
+            if (minimizedDoc) maximizedDocs = await DocListCastAsync(minimizedDoc.maximizedDocs);
         }
         if (minimizedDoc && maximizedDocs) {
             let minimizedTarget = minimizedDoc;
@@ -176,16 +176,18 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         let altKey = e.altKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
-            let isBullet = (e.target as any).id === "isBullet";
-            let isIcon = StrCast(this.props.Document.layout).indexOf("IconBox") !== -1;
-            if (BoolCast(this.props.Document.isButton, false) || isBullet) {
-                let maximizedDocs = await DocListCast(isBullet ? this.props.Document.subBulletDocs : isIcon ? this.props.Document.maximizedDocs : this.props.Document.summarizedDocs);
-                if (maximizedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
+            let isExpander = (e.target as any).id === "isExpander";
+            if (BoolCast(this.props.Document.isButton, false) || isExpander) {
+                let subBulletDocs = await DocListCastAsync(this.props.Document.subBulletDocs);
+                let maximizedDocs = await DocListCastAsync(this.props.Document.maximizedDocs);
+                let summarizedDocs = await DocListCastAsync(this.props.Document.summarizedDocs);
+                let expandedDocs = [...(subBulletDocs ? subBulletDocs : []), ...(maximizedDocs ? maximizedDocs : []), ...(summarizedDocs ? summarizedDocs : [])];
+                if (expandedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
                     if ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight)) {
-                        let dataDocs = await DocListCast(CollectionDockingView.Instance.props.Document.data);
+                        let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
                             SelectionManager.DeselectAll();
-                            maximizedDocs.forEach(maxDoc => {
+                            expandedDocs.forEach(maxDoc => {
                                 maxDoc.isMinimized = false;
                                 if (!dataDocs || dataDocs.indexOf(maxDoc) == -1) {
                                     CollectionDockingView.Instance.AddRightSplit(maxDoc);
@@ -195,8 +197,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                             });
                         }
                     } else {
-                        this.props.addDocument && maximizedDocs.forEach(async maxDoc => this.props.addDocument!(await maxDoc, false));
-                        this.toggleIcon(maximizedDocs);
+                        this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(await maxDoc, false));
+                        this.toggleIcon(expandedDocs);
                     }
                 }
             }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 5aa74c703..90f67db7c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -12,13 +12,13 @@ import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
 import { CollectionView } from "../collections/CollectionView";
 import { ContextMenu } from "../ContextMenu";
-import { Template, Templates } from "./../Templates";
+import { Template } from "./../Templates";
 import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
 import React = require("react");
-import { Opt, Doc, WidthSym, HeightSym, DocListCast } from "../../../new_fields/Doc";
+import { Opt, Doc, WidthSym, HeightSym, DocListCastAsync, DocListCast } from "../../../new_fields/Doc";
 import { DocComponent } from "../DocComponent";
-import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema";
+import { createSchema, makeInterface } from "../../../new_fields/Schema";
 import { FieldValue, StrCast, BoolCast, Cast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
@@ -109,8 +109,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
         // bcz: kind of ugly .. setup a reaction to update the title of a summary document's target (maximizedDocs) whenver the summary doc's title changes
         this._reactionDisposer = reaction(() => [this.props.Document.maximizedDocs, this.props.Document.summaryDoc, this.props.Document.summaryDoc instanceof Doc ? this.props.Document.summaryDoc.title : ""],
-            async () => {
-                let maxDoc = await DocListCast(this.props.Document.maximizedDocs);
+            () => {
+                let maxDoc = DocListCast(this.props.Document.maximizedDocs);
                 if (maxDoc && StrCast(this.props.Document.layout).indexOf("IconBox") !== -1) {
                     this.props.Document.title = (maxDoc && maxDoc.length === 1 ? maxDoc[0].title + ".icon" : "");
                 }
@@ -145,7 +145,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     startDragging(x: number, y: number, dropAction: dropActionType, dragSubBullets: boolean) {
         if (this._mainCont.current) {
-            let allConnected = dragSubBullets ? [this.props.Document, ...Cast(this.props.Document.subBulletDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc)] : [this.props.Document];
+            let allConnected = [this.props.Document, ...(dragSubBullets ? DocListCast(this.props.Document.subBulletDocs) : [])];
             const [left, top] = this.props.ScreenToLocalTransform().scale(this.props.ContentScaling()).inverse().transformPoint(0, 0);
             let dragData = new DragManager.DocumentDragData(allConnected);
             const [xoff, yoff] = this.props.ScreenToLocalTransform().scale(this.props.ContentScaling()).transformDirection(x - left, y - top);
@@ -169,17 +169,17 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
     }
-    _hitIsBullet = false;
+    _hitExpander = false;
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
         if (CollectionFreeFormView.RIGHT_BTN_DRAG && (e.button === 2 || (e.button === 0 && e.altKey)) && !this.isSelected()) {
             return;
         }
-        this._hitIsBullet = (e.target && (e.target as any).id === "isBullet") || Cast(this.props.Document.subBulletDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc).length > 0;
+        this._hitExpander = DocListCast(this.props.Document.subBulletDocs).length > 0;
         if (e.shiftKey && e.buttons === 1) {
             if (this.props.isTopMost) {
-                this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey ? "alias" : undefined, this._hitIsBullet);
+                this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey ? "alias" : undefined, this._hitExpander);
             } else if (this.props.Document) {
                 CollectionDockingView.Instance.StartOtherDrag([Doc.MakeAlias(this.props.Document)], e);
             }
@@ -197,7 +197,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 document.removeEventListener("pointermove", this.onPointerMove);
                 document.removeEventListener("pointerup", this.onPointerUp);
                 if (!e.altKey && !this.topMost && (!CollectionFreeFormView.RIGHT_BTN_DRAG && e.buttons === 1) || (CollectionFreeFormView.RIGHT_BTN_DRAG && e.buttons === 2)) {
-                    this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey ? "alias" : undefined, this._hitIsBullet);
+                    this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey ? "alias" : undefined, this._hitExpander);
                 }
             }
             e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document'  however it does mark the event as cancelBubble=true which we test for in the move event handlers
@@ -232,6 +232,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         ContextMenu.Instance.clearItems();
         SelectionManager.DeselectAll();
     }
+
     @undoBatch
     @action
     drop = async (e: Event, de: DragManager.DropEvent) => {
@@ -259,7 +260,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
-
     @action
     addTemplate = (template: Template) => {
         this.templates.push(template.Layout);
@@ -307,7 +307,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
-
     isSelected = () => SelectionManager.IsSelected(this);
     select = (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed);
 
diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx
index 4bcb4c636..48aecdcd0 100644
--- a/src/client/views/nodes/IconBox.tsx
+++ b/src/client/views/nodes/IconBox.tsx
@@ -2,12 +2,12 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { computed, observable, runInAction, reaction, IReactionDisposer } from "mobx";
+import { computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./IconBox.scss";
 import { Cast, StrCast, BoolCast } from "../../../new_fields/Types";
-import { Doc, DocListCast } from "../../../new_fields/Doc";
+import { Doc } from "../../../new_fields/Doc";
 import { IconField } from "../../../new_fields/IconField";
 import { ContextMenu } from "../ContextMenu";
 import Measure from "react-measure";
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 0e9e904a8..f9659a4b2 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,5 +1,5 @@
 
-import { action, observable } from 'mobx';
+import { action, observable, trace } from 'mobx';
 import { observer } from "mobx-react";
 import Lightbox from 'react-image-lightbox';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
@@ -157,15 +157,21 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     }
 
     render() {
+        trace();
         let field = this.Document[this.props.fieldKey];
         let paths: string[] = ["http://www.cs.brown.edu/~bcz/face.gif"];
         if (field instanceof ImageField) paths = [field.url.href];
         else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => (p as ImageField).url.href);
-        let nativeWidth = FieldValue(this.Document.nativeWidth, 1);
+        let nativeWidth = FieldValue(this.Document.nativeWidth, (this.props.PanelWidth as any) as string ? Number((this.props.PanelWidth as any) as string) : 50);
         let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
+        let id = this.props.id;
         return (
-            <div className={`imageBox-cont${interactive}`} onPointerDown={this.onPointerDown} onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
-                <img src={paths[Math.min(paths.length, this._photoIndex)]} style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} />
+            <div id={id} className={`imageBox-cont${interactive}`} onPointerDown={this.onPointerDown} onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
+                <img id={id} src={paths[Math.min(paths.length, this._photoIndex)]}
+                    style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }}
+                    width={nativeWidth}
+                    ref={this._imgRef}
+                    onLoad={this.onLoad} />
                 {paths.length > 1 ? this.dots(paths) : (null)}
                 {this.lightbox(paths)}
             </div>);
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 24901913d..7bf13d5f9 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -5,7 +5,7 @@ import { LinkBox } from "./LinkBox";
 import { LinkEditor } from "./LinkEditor";
 import './LinkMenu.scss';
 import React = require("react");
-import { Doc } from "../../../new_fields/Doc";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Cast, FieldValue } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
 import { Id } from "../../../new_fields/RefField";
@@ -31,8 +31,8 @@ export class LinkMenu extends React.Component<Props> {
 
     render() {
         //get list of links from document
-        let linkFrom = Cast(this.props.docView.props.Document.linkedFromDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
-        let linkTo = Cast(this.props.docView.props.Document.linkedToDocs, listSpec(Doc), []).filter(d => d).map(d => d as Doc);
+        let linkFrom = DocListCast(this.props.docView.props.Document.linkedFromDocs);
+        let linkTo = DocListCast(this.props.docView.props.Document.linkedToDoc);
         if (this._editingLink === undefined) {
             return (
                 <div id="linkMenu-container">
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 2ab145fa3..46ccb3e90 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -29,13 +29,17 @@ export const SelfProxy = Symbol("SelfProxy");
 export const WidthSym = Symbol("Width");
 export const HeightSym = Symbol("Height");
 
-export function DocListCast(field: FieldResult): Promise<Doc[] | undefined>;
-export function DocListCast(field: FieldResult, defaultValue: Doc[]): Promise<Doc[]>;
-export function DocListCast(field: FieldResult, defaultValue?: Doc[]) {
+export function DocListCastAsync(field: FieldResult): Promise<Doc[] | undefined>;
+export function DocListCastAsync(field: FieldResult, defaultValue: Doc[]): Promise<Doc[]>;
+export function DocListCastAsync(field: FieldResult, defaultValue?: Doc[]) {
     const list = Cast(field, listSpec(Doc));
     return list ? Promise.all(list) : Promise.resolve(defaultValue);
 }
 
+export function DocListCast(field: FieldResult) {
+    return Cast(field, listSpec(Doc), []).filter(d => d && d instanceof Doc).map(d => d as Doc)
+}
+
 @Deserializable("doc").withFields(["id"])
 export class Doc extends RefField {
     constructor(id?: FieldId, forceSave?: boolean) {
-- 
cgit v1.2.3-70-g09d2


From f105afd4c239940ebc41ae370b4203248cdb7b26 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 11 May 2019 18:53:22 -0400
Subject: fixed deep copy

---
 src/Utils.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/Utils.ts b/src/Utils.ts
index d4b6f5377..24878a368 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -128,6 +128,7 @@ export function deepCopy<K, V>(source: Map<K, V>, predicate?: Predicate<K, V>) {
         if (!predicate || predicate(entry)) {
             deepCopy.set(entry[0], entry[1]);
         }
+        next = entries.next();
     }
     return deepCopy;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 8eec22e546b6c6a4b8891deef3c666774cb105fe Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 11 May 2019 21:40:18 -0400
Subject: fixed some panning issues with ink and zoom

---
 src/client/views/InkingCanvas.tsx                  |  8 +++++
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 42 ++++++++++++++--------
 2 files changed, 36 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index 1c0d13545..afe3e3ecb 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -30,6 +30,14 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
                 selRect.top < val.y && selRect.top + selRect.height > val.y)
             , false);
     }
+    public static StrokeRect(stroke: StrokeData): { left: number, top: number, right: number, bottom: number } {
+        return stroke.pathData.reduce((bounds: { left: number, top: number, right: number, bottom: number }, val) =>
+            ({
+                left: Math.min(bounds.left, val.x), top: Math.min(bounds.top, val.y),
+                right: Math.max(bounds.right, val.x), bottom: Math.max(bounds.bottom, val.y)
+            })
+            , { left: Number.MAX_VALUE, top: Number.MAX_VALUE, right: -Number.MAX_VALUE, bottom: -Number.MAX_VALUE });
+    }
 
     componentDidMount() {
         PromiseValue(Cast(this.props.Document.ink, InkField)).then(ink => runInAction(() => {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6861ce58b..dc86f38b6 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -23,6 +23,7 @@ import { Doc, WidthSym, HeightSym } from "../../../../new_fields/Doc";
 import { FieldValue, Cast, NumCast } from "../../../../new_fields/Types";
 import { pageSchema } from "../../nodes/ImageBox";
 import { Id } from "../../../../new_fields/RefField";
+import { InkField, StrokeData } from "../../../../new_fields/InkField";
 
 export const panZoomSchema = createSchema({
     panX: "number",
@@ -42,8 +43,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     private get _pwidth() { return this.props.PanelWidth(); }
     private get _pheight() { return this.props.PanelHeight(); }
 
-    @computed get nativeWidth() { return FieldValue(this.Document.nativeWidth, 0); }
-    @computed get nativeHeight() { return FieldValue(this.Document.nativeHeight, 0); }
+    @computed get nativeWidth() { return NumCast(this.Document.nativeWidth, 0); }
+    @computed get nativeHeight() { return NumCast(this.Document.nativeHeight, 0); }
     private get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; }
     private get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; }
     private panX = () => FieldValue(this.Document.panX, 0);
@@ -132,23 +133,32 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     @action
     onPointerMove = (e: PointerEvent): void => {
         if (!e.cancelBubble) {
-            let x = Cast(this.props.Document.panX, "number", 0);
-            let y = Cast(this.props.Document.panY, "number", 0);
+            let x = NumCast(this.props.Document.panX);
+            let y = NumCast(this.props.Document.panY);
             let docs = this.children || [];
             let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
             if (!this.isAnnotationOverlay) {
-                let minx = docs.length ? Cast(docs[0].x, "number", 0) : 0;
-                let maxx = docs.length ? Cast(docs[0].width, "number", 0) + minx : minx;
-                let miny = docs.length ? Cast(docs[0].y, "number", 0) : 0;
-                let maxy = docs.length ? Cast(docs[0].height, "number", 0) + miny : miny;
+                let minx = docs.length ? NumCast(docs[0].x) : 0;
+                let maxx = docs.length ? NumCast(docs[0].width) + minx : minx;
+                let miny = docs.length ? NumCast(docs[0].y) : 0;
+                let maxy = docs.length ? NumCast(docs[0].height) + miny : miny;
                 let ranges = docs.filter(doc => doc).reduce((range, doc) => {
-                    let x = Cast(doc.x, "number", 0);
-                    let xe = x + Cast(doc.width, "number", 0);
-                    let y = Cast(doc.y, "number", 0);
-                    let ye = y + Cast(doc.height, "number", 0);
+                    let x = NumCast(doc.x);
+                    let xe = x + NumCast(doc.width);
+                    let y = NumCast(doc.y);
+                    let ye = y + NumCast(doc.height);
                     return [[range[0][0] > x ? x : range[0][0], range[0][1] < xe ? xe : range[0][1]],
                     [range[1][0] > y ? y : range[1][0], range[1][1] < ye ? ye : range[1][1]]];
                 }, [[minx, maxx], [miny, maxy]]);
+                let ink = Cast(this.props.Document.ink, InkField);
+                if (ink && ink.inkData) {
+                    ink.inkData.forEach((value: StrokeData, key: string) => {
+                        let bounds = InkingCanvas.StrokeRect(value);
+                        ranges[0] = [Math.min(ranges[0][0], bounds.left), Math.max(ranges[0][1], bounds.right)];
+                        ranges[1] = [Math.min(ranges[1][0], bounds.top), Math.max(ranges[1][1], bounds.bottom)];
+                    });
+                }
+
                 let panelwidth = this._pwidth / this.zoomScaling() / 2;
                 let panelheight = this._pheight / this.zoomScaling() / 2;
                 if (x - dx < ranges[0][0] - panelwidth) x = ranges[0][1] + panelwidth + dx;
@@ -181,8 +191,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 
         if (e.ctrlKey) {
             let deltaScale = (1 - (e.deltaY / coefficient));
-            this.props.Document.nativeWidth = this.nativeWidth * deltaScale;
-            this.props.Document.nativeHeight = this.nativeHeight * deltaScale;
+            let nw = this.nativeWidth * deltaScale;
+            let nh = this.nativeHeight * deltaScale;
+            if (nw && nh) {
+                this.props.Document.nativeWidth = nw;
+                this.props.Document.nativeHeight = nh;
+            }
             e.stopPropagation();
             e.preventDefault();
         } else {
-- 
cgit v1.2.3-70-g09d2


From 0103346e8bae5113f5ea6f34d2745addac3a192e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 11 May 2019 22:55:44 -0400
Subject: Changed measure params that we use

---
 src/client/views/Main.tsx                              | 2 +-
 src/client/views/collections/CollectionDockingView.tsx | 2 +-
 src/client/views/nodes/IconBox.tsx                     | 2 +-
 src/client/views/nodes/PDFBox.tsx                      | 4 ++--
 src/client/views/nodes/VideoBox.tsx                    | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index c9d5c395c..158de31f5 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -180,7 +180,7 @@ export class Main extends React.Component {
         let pheightFunc = () => this.pheight;
         let noScaling = () => 1;
         let mainCont = this.mainContainer;
-        return <Measure onResize={action((r: any) => { this.pwidth = r.entry.width; this.pheight = r.entry.height; })}>
+        return <Measure offset onResize={action((r: any) => { this.pwidth = r.offset.width; this.pheight = r.offset.height; })}>
             {({ measureRef }) =>
                 <div ref={measureRef} id="mainContent-div">
                     {!mainCont ? (null) :
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 5ee943da9..efcee9c02 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -419,7 +419,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     render() {
         let theContent = this.content;
         return !this._document ? (null) :
-            <Measure onResize={action((r: any) => { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}>
+            <Measure offset onResize={action((r: any) => { this._panelWidth = r.offset.width; this._panelHeight = r.offset.height; })}>
                 {({ measureRef }) => <div ref={measureRef}>  {theContent} </div>}
             </Measure>;
     }
diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx
index 48aecdcd0..071930633 100644
--- a/src/client/views/nodes/IconBox.tsx
+++ b/src/client/views/nodes/IconBox.tsx
@@ -59,7 +59,7 @@ export class IconBox extends React.Component<FieldViewProps> {
         return (
             <div className="iconBox-container" onContextMenu={this.specificContextMenu}>
                 {this.minimizedIcon}
-                <Measure onResize={(r) => runInAction(() => { if (r.entry.width || BoolCast(this.props.Document.hideLabel)) this.props.Document.nativeWidth = this.props.Document.width = (r.entry.width + Number(MINIMIZED_ICON_SIZE)); })}>
+                <Measure offset onResize={(r) => runInAction(() => { if (r.offset!.width || BoolCast(this.props.Document.hideLabel)) this.props.Document.nativeWidth = this.props.Document.width = (r.offset!.width + Number(MINIMIZED_ICON_SIZE)); })}>
                     {({ measureRef }) =>
                         <span ref={measureRef} className="iconBox-label">{label}</span>
                     }
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index caa66cbeb..f2fa6f47c 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -279,7 +279,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
         //      so this design is flawed.
         var nativeWidth = FieldValue(this.Document.nativeWidth, 0);
         if (!FieldValue(this.Document.nativeHeight, 0)) {
-            var nativeHeight = nativeWidth * r.entry.height / r.entry.width;
+            var nativeHeight = nativeWidth * r.offset.height / r.offset.width;
             this.props.Document.height = nativeHeight / nativeWidth * FieldValue(this.Document.width, 0);
             this.props.Document.nativeHeight = nativeHeight;
         }
@@ -297,7 +297,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
         let xf = FieldValue(this.Document.nativeHeight, 0) / renderHeight;
         let body = NumCast(this.props.Document.nativeHeight) ?
             this.pdfPage :
-            <Measure onResize={this.setScaling}>
+            <Measure offset onResize={this.setScaling}>
                 {({ measureRef }) =>
                     <div className="pdfBox-page" ref={measureRef}>
                         {this.pdfPage}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 422508f90..97c5d8818 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -35,7 +35,7 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
             // bcz: the nativeHeight should really be set when the document is imported.
             var nativeWidth = FieldValue(this.Document.nativeWidth, 0);
             var nativeHeight = FieldValue(this.Document.nativeHeight, 0);
-            var newNativeHeight = nativeWidth * r.entry.height / r.entry.width;
+            var newNativeHeight = nativeWidth * r.offset.height / r.offset.width;
             if (!nativeHeight && newNativeHeight !== nativeHeight && !isNaN(newNativeHeight)) {
                 this.Document.height = newNativeHeight / nativeWidth * FieldValue(this.Document.width, 0);
                 this.Document.nativeHeight = newNativeHeight;
@@ -71,7 +71,7 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         let content = this.videoContent(field.url.href);
         return NumCast(this.props.Document.nativeHeight) ?
             content :
-            <Measure onResize={this.setScaling}>
+            <Measure offset onResize={this.setScaling}>
                 {({ measureRef }) =>
                     <div style={{ width: "100%", height: "auto" }} ref={measureRef}>
                         {content}
-- 
cgit v1.2.3-70-g09d2


From 1cf69275b509a86697389e1d4abc82492e9cceb5 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 11 May 2019 23:16:14 -0400
Subject: Fixed pdfs not rendering

---
 src/client/views/nodes/PDFBox.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index f2fa6f47c..cb27b3f1b 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -294,6 +294,9 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
         let page = this.curPage;
         const renderHeight = 2400;
         let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField);
+        if (!pdfUrl) {
+            return <p>No pdf url to render</p>;
+        }
         let xf = FieldValue(this.Document.nativeHeight, 0) / renderHeight;
         let body = NumCast(this.props.Document.nativeHeight) ?
             this.pdfPage :
@@ -305,7 +308,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
                 }
             </Measure>;
         return <div className="pdfBox-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}>
-            <Document file={window.origin + RouteStore.corsProxy + `/${pdfUrl}`} renderMode={this._renderAsSvg ? "svg" : "canvas"}>
+            <Document file={window.origin + RouteStore.corsProxy + `/${pdfUrl.url}`} renderMode={this._renderAsSvg ? "svg" : "canvas"}>
                 {body}
             </Document>
         </div >;
-- 
cgit v1.2.3-70-g09d2


From a225d9f4ee0d44e8cb14f30f27571ec0e846e1e1 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 12 May 2019 01:43:03 -0400
Subject: Small search changed

---
 solr/conf/schema.xml           | 3 ++-
 src/client/views/SearchBox.tsx | 3 +++
 src/server/Search.ts           | 4 +++-
 src/server/index.ts            | 1 +
 4 files changed, 9 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/solr/conf/schema.xml b/solr/conf/schema.xml
index a568db14c..9217e015b 100644
--- a/solr/conf/schema.xml
+++ b/solr/conf/schema.xml
@@ -48,8 +48,9 @@
   <dynamicField name="*_t" type="text" indexed="true" stored="true" uninvertible="false" docValues="false"/>
   <dynamicField name="*_n" type="pdouble" indexed="true" stored="true" uninvertible="false" docValues="false"/>
   <dynamicField name="*_d" type="pdaterange" indexed="true" stored="true" uninvertible="false" docValues="false"/>
-  <dynamicField name="*_l" type="text" indexed="true" stored="true" uninvertible="false" docValues="false" multiValued="true"/>
+  <dynamicField name="*_l" type="string" indexed="true" stored="true" uninvertible="false" docValues="false" multiValued="true"/>
   <dynamicField name="*_i" type="string" indexed="true" stored="true" uninvertible="false" docValues="false"/>
+  <dynamicField name="*_b" type="boolean" indexed="true" stored="true" uninvertible="false" docValues="false"/>
 
   <dynamicField name="*_a" type="text" indexed="true" stored="false" uninvertible="false" docValues="false"/>
 
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 134201071..6e64e1af1 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -140,6 +140,9 @@ export class SearchBox extends React.Component {
         return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, title: `Search Docs: "${this.searchString}"` });
     }
 
+    // Useful queries:
+    // Delegates of a document: {!join from=id to=proto_i}id:{protoId}
+    // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId}
     render() {
         return (
             <div>
diff --git a/src/server/Search.ts b/src/server/Search.ts
index 1bede5b49..0f7004bdf 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -13,7 +13,9 @@ export class Search {
                 body: JSON.stringify([document])
             });
             return res;
-        } catch (e) { }
+        } catch (e) {
+            console.warn("Search error: " + e + document);
+        }
     }
 
     public async search(query: string) {
diff --git a/src/server/index.ts b/src/server/index.ts
index e5cc3ce68..da6bc0165 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -298,6 +298,7 @@ function GetRefFields([ids, callback]: [string[], (result?: Transferable[]) => v
 const suffixMap: { [type: string]: (string | [string, string | ((json: any) => any)]) } = {
     "number": "_n",
     "string": "_t",
+    // "boolean": "_b",
     "image": ["_t", "url"],
     "video": ["_t", "url"],
     "pdf": ["_t", "url"],
-- 
cgit v1.2.3-70-g09d2


From 0e457c6f8268c70408d3740984f3976437535f51 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 12 May 2019 09:12:50 -0400
Subject: adjustments to treeview and ctrl-q pasting.

---
 src/client/views/DocumentDecorations.scss               |  2 +-
 src/client/views/EditableView.scss                      | 17 ++++++++++++++++-
 src/client/views/EditableView.tsx                       |  7 ++++---
 src/client/views/collections/CollectionTreeView.tsx     | 14 ++++++++++++--
 .../collections/collectionFreeForm/MarqueeView.tsx      |  8 ++------
 src/client/views/globalCssVariables.scss                |  6 ++++--
 6 files changed, 39 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 6a2e33836..ba9f32d7d 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -65,7 +65,7 @@ $linkGap : 3px;
         cursor: ew-resize;
     }
     .title{
-        background: lightblue;
+        background: $alt-accent;
         grid-column-start: 3;
         grid-column-end: 4;
         pointer-events: auto;
diff --git a/src/client/views/EditableView.scss b/src/client/views/EditableView.scss
index ea401eaf9..dfa110f8d 100644
--- a/src/client/views/EditableView.scss
+++ b/src/client/views/EditableView.scss
@@ -1,5 +1,20 @@
-.editableView-container-editing {
+.editableView-container-editing, .editableView-container-editing-oneLine {
     overflow-wrap: break-word;
     word-wrap: break-word;
     hyphens: auto;
+    overflow: hidden;
+}
+.editableView-container-editing-oneLine {
+    span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display:block;
+    }
+    input {
+        display:block;
+    }
+}
+.editableView-input {
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 73467eb9d..78143ccda 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -24,6 +24,7 @@ export interface EditableProps {
     contents: any;
     height: number;
     display?: string;
+    oneLine?: boolean;
 }
 
 /**
@@ -54,11 +55,11 @@ export class EditableView extends React.Component<EditableProps> {
 
     render() {
         if (this.editing) {
-            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
-                style={{ display: this.props.display }}></input>;
+            return <input className="editableView-input" defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
+                style={{ display: this.props.display }} />;
         } else {
             return (
-                <div className="editableView-container-editing" style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }}
+                <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`} style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }}
                     onClick={action(() => this.editing = true)} >
                     <span>{this.props.contents}</span>
                 </div>
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 78c84cc89..9bd32a89f 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -93,6 +93,15 @@ class TreeView extends React.Component<TreeViewProps> {
         return <div className="bullet" onClick={onClicked}>{bullet ? <FontAwesomeIcon icon={bullet} /> : ""} </div>;
     }
 
+    @action
+    onMouseEnter = () => {
+        this._isOver = true;
+    }
+    @observable _isOver: boolean = false;
+    @action
+    onMouseLeave = () => {
+        this._isOver = false;
+    }
     /**
      * Renders the EditableView title element for placement into the tree.
      */
@@ -101,7 +110,8 @@ class TreeView extends React.Component<TreeViewProps> {
         let onItemDown = SetupDrag(reference, () => this.props.document, this.props.moveDocument, this.props.dropAction);
         let editableView = (titleString: string) =>
             (<EditableView
-                display={"inline"}
+                oneLine={!this._isOver ? true : false}
+                display={"block"}
                 contents={titleString}
                 height={36}
                 GetValue={() => StrCast(this.props.document.title)}
@@ -118,7 +128,7 @@ class TreeView extends React.Component<TreeViewProps> {
                 <FontAwesomeIcon icon="angle-right" size="lg" />
             </div>);
         return (
-            <div className="docContainer" ref={reference} onPointerDown={onItemDown}
+            <div className="docContainer" ref={reference} onPointerDown={onItemDown} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
                 style={{ background: BoolCast(this.props.document.libraryBrush, false) ? "#06121212" : "0" }}
                 onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
                 {editableView(StrCast(this.props.document.title))}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 9ace0272a..718a75770 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -59,13 +59,9 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         if (e.key === "q" && e.ctrlKey) {
             e.preventDefault();
             (async () => {
-                let text = await navigator.clipboard.readText();
-                let ns = text.split("\n").filter(t => t != "\r");
+                let text: string = await navigator.clipboard.readText();
+                let ns = text.split("\n").filter(t => t.trim() != "\r" && t.trim() != "");
                 for (let i = 0; i < ns.length - 1; i++) {
-                    if (ns[i].trim() === "") {
-                        ns.splice(i, 1);
-                        continue;
-                    }
                     while (!(ns[i].trim() === "" || ns[i].endsWith("-\r") || ns[i].endsWith("-") ||
                         ns[i].endsWith(";\r") || ns[i].endsWith(";") ||
                         ns[i].endsWith(".\r") || ns[i].endsWith(".") ||
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index cb4d1ad87..838d4d9ac 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -2,10 +2,12 @@
 // colors
 $light-color: #fcfbf7;
 $light-color-secondary:#f1efeb;
-$main-accent: #61aaa3;
+//$main-accent: #61aaa3;
+$main-accent: #aaaaa3;
 // $alt-accent: #cdd5ec;
 // $alt-accent: #cdeceb;
-$alt-accent: #59dff7;
+//$alt-accent: #59dff7;
+$alt-accent: #c2c2c5;
 $lighter-alt-accent: rgb(207, 220, 240);
 $intermediate-color: #9c9396;
 $dark-color: #121721;
-- 
cgit v1.2.3-70-g09d2


From 2d0063aa868f6f26b0c7717d65f0f5cf2cfab8df Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 12 May 2019 18:33:46 -0400
Subject: Added youtube import

---
 src/client/views/collections/CollectionSubView.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index a86d250bd..ffd3e0659 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -18,6 +18,7 @@ import { List } from "../../../new_fields/List";
 import { DocServer } from "../../DocServer";
 import { ObjectField } from "../../../new_fields/ObjectField";
 import CursorField, { CursorPosition, CursorMetadata } from "../../../new_fields/CursorField";
+import { url } from "inspector";
 
 export interface CollectionViewProps extends FieldViewProps {
     addDocument: (document: Doc, allowDuplicates?: boolean) => boolean;
@@ -168,6 +169,11 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
                 this.props.addDocument(htmlDoc, false);
                 return;
             }
+            if (text && text.indexOf("www.youtube.com/watch") !== -1) {
+                const url = text.replace("youtube.com/watch?v=", "youtube.com/embed/");
+                this.props.addDocument(Docs.WebDocument(url, { ...options, width: 300, height: 300 }));
+                return;
+            }
 
             let batch = UndoManager.StartBatch("collection view drop");
             let promises: Promise<void>[] = [];
-- 
cgit v1.2.3-70-g09d2


From 47424484409938367f47068274af4c0f51d4490c Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 12 May 2019 20:24:26 -0400
Subject: fixed issues with scrolled text input.  preview region for schema. 
 and pasting in tables with ctrl-t.

---
 src/client/util/TooltipTextMenu.scss               | 26 +++++++-------
 src/client/views/PreviewCursor.tsx                 |  9 ++++-
 .../views/collections/CollectionSchemaView.tsx     |  2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx | 40 ++++++++++++++++++++++
 src/client/views/nodes/FormattedTextBox.scss       |  3 +-
 src/client/views/nodes/FormattedTextBox.tsx        |  4 +--
 6 files changed, 65 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
index 70d9ad772..437da0d63 100644
--- a/src/client/util/TooltipTextMenu.scss
+++ b/src/client/util/TooltipTextMenu.scss
@@ -162,19 +162,6 @@
   .ProseMirror-icon span {
     vertical-align: text-top;
   }  
-.ProseMirror-example-setup-style hr {
-    padding: 2px 10px;
-    border: none;
-    margin: 1em 0;
-  }
-  
-  .ProseMirror-example-setup-style hr:after {
-    content: "";
-    display: block;
-    height: 1px;
-    background-color: silver;
-    line-height: 2px;
-  }
   
   .ProseMirror ul, .ProseMirror ol {
     padding-left: 30px;
@@ -255,6 +242,19 @@
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     pointer-events: all;
+    .ProseMirror-example-setup-style hr {
+      padding: 2px 10px;
+      border: none;
+      margin: 1em 0;
+    }
+    
+    .ProseMirror-example-setup-style hr:after {
+      content: "";
+      display: block;
+      height: 1px;
+      background-color: silver;
+      line-height: 2px;
+    }
 }
 
 .tooltipMenu:before {
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 78024a58c..4218ea7c9 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -18,6 +18,13 @@ export class PreviewCursor extends React.Component<{}> {
     constructor(props: any) {
         super(props);
         document.addEventListener("keydown", this.onKeyPress);
+        document.addEventListener("paste", this.paste);
+    }
+    paste = (e: ClipboardEvent) => {
+        console.log(e.clipboardData);
+        console.log(e.clipboardData.getData("text/html"));
+        console.log(e.clipboardData.getData("text/csv"));
+        console.log(e.clipboardData.getData("text/plain"));
     }
 
     @action
@@ -28,7 +35,7 @@ export class PreviewCursor extends React.Component<{}> {
         //if not these keys, make a textbox if preview cursor is active!
         if (e.key.startsWith("F") && !e.key.endsWith("F")) {
         } else if (e.key !== "Escape" && e.key !== "Alt" && e.key !== "Shift" && e.key !== "Meta" && e.key !== "Control" && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
-            if ((!e.ctrlKey && !e.metaKey) || e.key === "v" || e.key === "q") {
+            if ((!e.ctrlKey && !e.metaKey) || (e.key >= "a" && e.key <= "z")) {
                 PreviewCursor.Visible && PreviewCursor._onKeyPress && PreviewCursor._onKeyPress(e);
                 PreviewCursor.Visible = false;
             }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 506e60a65..18319dc77 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -253,7 +253,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     get previewPanel() {
         // let doc = CompileScript(this.previewScript, { this: selected }, true)();
         const previewDoc = this.previewDocument;
-        return !previewDoc ? (null) : (
+        return !previewDoc || !this.previewRegionWidth ? (null) : (
             <div className="collectionSchemaView-previewRegion" style={{ width: `${this.previewRegionWidth}px` }}>
                 <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.previewPanelCenteringOffset}px, 0px)` }}>
                     <DocumentView Document={previewDoc} isTopMost={false} selectOnLoad={false}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 718a75770..611ee7fd6 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -79,6 +79,46 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     y += 40 * this.props.getTransform().Scale;
                 })
             })();
+        } else if (e.key === "t" && e.ctrlKey) {
+            //heuristically converts pasted text into a table.
+            // assumes each entry is separated by a tab
+            // skips all rows until it gets to a row with more than one entry
+            // assumes that 1st row has header entry for each column
+            // assumes subsequent rows have entries for each column header OR
+            //         any row that has only one column is a section header-- this header is then added as a column to subsequent rows until the next header
+            // assumes each cell is a string or a number
+            e.preventDefault();
+            (async () => {
+                let text: string = await navigator.clipboard.readText();
+                let ns = text.split("\n").filter(t => t.trim() != "\r" && t.trim() != "");
+                while (ns.length > 0 && ns[0].split("\t").length < 2)
+                    ns.splice(0, 1);
+                if (ns.length > 0) {
+                    let columns = ns[0].split("\t");
+                    let docList: Doc[] = [];
+                    let groupAttr: string | number = "";
+                    for (let i = 1; i < ns.length - 1; i++) {
+                        let values = ns[i].split("\t");
+                        if (values.length === 1 && columns.length > 1) {
+                            groupAttr = values[0];
+                            continue;
+                        }
+                        let doc = new Doc();
+                        columns.forEach((col, i) => {
+                            console.log(values[i] + " " + Number(values[i]).toString());
+                            doc[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined);
+                        });
+                        if (groupAttr) {
+                            doc["_group"] = groupAttr;
+                        }
+                        doc.title = i.toString();
+                        docList.push(doc);
+                    }
+                    let newCol = Docs.SchemaDocument(docList, { x: x, y: y, title: "-dropped table-", width: 300, height: 100 });
+                    newCol.proto!.schemaColumns = new List<string>([...(groupAttr ? ["_group"] : []), ...columns.filter(c => c)]);
+                    this.props.addDocument(newCol, false);
+                }
+            })();
         } else {
             let newBox = Docs.TextDocument({ width: 200, height: 100, x: x, y: y, title: "-typed text-" });
             this.props.addLiveTextDocument(newBox);
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 458a62c5b..4a29c1949 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -19,7 +19,7 @@
   box-sizing: border-box;
   background-color: inherit;
   border-style: solid;
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: hidden;
   color: initial;
   height: 100%;
@@ -27,7 +27,6 @@
 }
 
 .formattedTextBox-cont-hidden {
-    overflow: hidden;
     pointer-events: none;
 }
 .formattedTextBox-inner-rounded {
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 37dc05ca5..7ebc31b0a 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -262,8 +262,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         if (!this.props.isOverlay) {
             FormattedTextBox.InputBoxOverlay = this;
         } else {
-            if (this._proseRef.current) {
-                this._proseRef.current.scrollTop = FormattedTextBox.InputBoxOverlayScroll;
+            if (this._ref.current) {
+                this._ref.current.scrollTop = FormattedTextBox.InputBoxOverlayScroll;
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2


From b9d32e8e07137484c57f3d1ab89090b27d56cfe6 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 12 May 2019 21:52:04 -0400
Subject: finally fixed disappearing videobox and changed marquee div structure

---
 src/client/views/collections/CollectionTreeView.tsx             | 5 +++++
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 8 ++++----
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx       | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 9bd32a89f..d22418b2c 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -19,6 +19,7 @@ import { CurrentUserUtils } from '../../../server/authentication/models/current_
 import { CollectionDockingView } from './CollectionDockingView';
 import { DocumentManager } from '../../util/DocumentManager';
 import { List } from '../../../new_fields/List';
+import { Docs } from '../../documents/Documents';
 
 
 export interface TreeViewProps {
@@ -141,6 +142,10 @@ class TreeView extends React.Component<TreeViewProps> {
         if (!e.isPropagationStopped() && this.props.document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             ContextMenu.Instance.addItem({ description: "Open as Workspace", event: undoBatch(() => Main.Instance.openWorkspace(this.props.document)) });
             ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.document) });
+            ContextMenu.Instance.addItem({
+                description: "Open Fields", event: () => CollectionDockingView.Instance.AddRightSplit(Docs.KVPDocument(this.props.document,
+                    { title: this.props.document.title + ".kvp", width: 300, height: 300 }))
+            });
             if (DocumentManager.Instance.getDocumentViews(this.props.document).length) {
                 ContextMenu.Instance.addItem({ description: "Focus", event: () => DocumentManager.Instance.getDocumentViews(this.props.document).map(view => view.props.focus(this.props.document)) });
             }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 611ee7fd6..080c484f4 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -358,7 +358,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
     @computed
     get marqueeDiv() {
         let v = this.props.getContainerTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
-        return <div className="marquee" style={{ width: `${Math.abs(v[0])}`, height: `${Math.abs(v[1])}` }} >
+        return <div className="marquee" style={{ width: `${Math.abs(v[0])}`, height: `${Math.abs(v[1])}`, zIndex: 2000 }} >
             <span className="marquee-legend" />
         </div>;
     }
@@ -366,11 +366,11 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
     render() {
         let p = this.props.getContainerTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
         return <div className="marqueeView" style={{ borderRadius: "inherit" }} onClick={this.onClick} onPointerDown={this.onPointerDown}>
-            <div style={{ position: "absolute", transform: `translate(${p[0]}px, ${p[1]}px)` }} >
-                <div ref={this._mainCont} style={{ position: "absolute", transform: `translate(${-p[0]}px, ${-p[1]}px)` }} >
+            <div style={{ position: "relative", transform: `translate(${p[0]}px, ${p[1]}px)` }} >
+                {!this._visible ? null : this.marqueeDiv}
+                <div ref={this._mainCont} style={{ transform: `translate(${-p[0]}px, ${-p[1]}px)` }} >
                     {this.props.children}
                 </div>
-                {!this._visible ? null : this.marqueeDiv}
             </div>
         </div>;
     }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 39d216da0..817a23ce8 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -228,7 +228,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         const screenWidth = Math.min(50 * NumCast(this.props.Document.nativeWidth, 0), 1800);
         let fadeUp = .75 * screenWidth;
         let fadeDown = (maximizedDoc ? .0075 : .075) * screenWidth;
-        zoomFade = w < fadeDown  /* || w > fadeUp */ ? Math.max(0.1, Math.min(1, 2 - (w < fadeDown ? fadeDown / w : w / fadeUp))) : 1;
+        zoomFade = w < fadeDown  /* || w > fadeUp */ ? Math.max(0.1, Math.min(1, 2 - (w < fadeDown ? Math.sqrt(Math.sqrt(fadeDown / w)) : w / fadeUp))) : 1;
 
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont}
-- 
cgit v1.2.3-70-g09d2


From f52f5a408c62b93ae79eb690ff86538a6fbf60ed Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 12 May 2019 22:56:13 -0400
Subject: Started adding flyout to go up a level

---
 src/client/goldenLayout.js                         |  1 +
 .../views/collections/CollectionDockingView.tsx    | 18 +++++++++-
 .../views/collections/ParentDocumentSelector.scss  |  8 +++++
 .../views/collections/ParentDocumentSelector.tsx   | 39 ++++++++++++++++++++++
 src/server/Search.ts                               |  3 +-
 5 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/client/views/collections/ParentDocumentSelector.scss
 create mode 100644 src/client/views/collections/ParentDocumentSelector.tsx

(limited to 'src')

diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js
index 56a71f1ac..ab2bcefed 100644
--- a/src/client/goldenLayout.js
+++ b/src/client/goldenLayout.js
@@ -2902,6 +2902,7 @@
 		 * @returns {void}
 		 */
         _$destroy: function () {
+            this._layoutManager.emit('tabDestroyed', this);
             this.element.off('mousedown touchstart', this._onTabClickFn);
             this.closeElement.off('click touchstart', this._onCloseClickFn);
             if (this._dragListener) {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index efcee9c02..8739a213f 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -18,6 +18,7 @@ import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
 import { SubCollectionViewProps } from "./CollectionSubView";
 import React = require("react");
+import { ParentDocSelector } from './ParentDocumentSelector';
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -157,6 +158,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 try {
                     this._goldenLayout.unbind('itemDropped', this.itemDropped);
                     this._goldenLayout.unbind('tabCreated', this.tabCreated);
+                    this._goldenLayout.unbind('tabDestroyed', this.tabDestroyed);
                     this._goldenLayout.unbind('stackCreated', this.stackCreated);
                 } catch (e) { }
                 this._goldenLayout.destroy();
@@ -164,6 +166,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             }
             this._goldenLayout.on('itemDropped', this.itemDropped);
             this._goldenLayout.on('tabCreated', this.tabCreated);
+            this._goldenLayout.on('tabDestroyed', this.tabDestroyed);
             this._goldenLayout.on('stackCreated', this.stackCreated);
             this._goldenLayout.registerComponent('DocumentFrameRenderer', DockedFrameRenderer);
             this._goldenLayout.container = this._containerRef.current;
@@ -196,6 +199,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             this._goldenLayout.unbind('itemDropped', this.itemDropped);
             this._goldenLayout.unbind('tabCreated', this.tabCreated);
             this._goldenLayout.unbind('stackCreated', this.stackCreated);
+            this._goldenLayout.unbind('tabDestroyed', this.tabDestroyed);
         } catch (e) {
 
         }
@@ -292,8 +296,12 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             }
             DocServer.GetRefField(tab.contentItem.config.props.documentId).then(async doc => {
                 if (doc instanceof Doc) {
-                    let counter: any = this.htmlToElement(`<div class="messageCounter">0</div>`);
+                    let counter: any = this.htmlToElement(`<span class="messageCounter">0</div>`);
                     tab.element.append(counter);
+                    let upDiv = document.createElement("span");
+                    ReactDOM.render(<ParentDocSelector Document={doc} />, upDiv);
+                    tab.reactComponents = [upDiv];
+                    tab.element.append(upDiv);
                     counter.DashDocId = tab.contentItem.config.props.documentId;
                     tab.reactionDisposer = reaction(() => [doc.linkedFromDocs, doc.LinkedToDocs, doc.title],
                         () => {
@@ -320,6 +328,14 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 tab.contentItem.remove();
             });
     }
+
+    tabDestroyed = (tab: any) => {
+        if (tab.reactComponents) {
+            for (const ele of tab.reactComponents) {
+                ReactDOM.unmountComponentAtNode(ele);
+            }
+        }
+    }
     _removedDocs: Doc[] = [];
 
     stackCreated = (stack: any) => {
diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss
new file mode 100644
index 000000000..f3c605f3e
--- /dev/null
+++ b/src/client/views/collections/ParentDocumentSelector.scss
@@ -0,0 +1,8 @@
+.PDS-flyout {
+    position: absolute;
+    z-index: 9999;
+    background-color: #d3d3d3;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    min-width: 150px;
+    color: black;
+}
\ No newline at end of file
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
new file mode 100644
index 000000000..1fdb9d4d9
--- /dev/null
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import './ParentDocumentSelector.scss';
+import { Doc } from "../../../new_fields/Doc";
+import { observer } from "mobx-react";
+import { observable, action } from "mobx";
+
+@observer
+export class ParentDocSelector extends React.Component<{ Document: Doc }> {
+    @observable hover = false;
+
+    @action
+    onMouseLeave = () => {
+        this.hover = false;
+    }
+
+    @action
+    onMouseEnter = () => {
+        this.hover = true;
+    }
+
+    render() {
+        let flyout;
+        if (this.hover) {
+            flyout = (
+                <div className="PDS-flyout">
+                    <p>Hello world</p>
+                </div>
+            );
+        }
+        return (
+            <span style={{ position: "relative", display: "inline-block" }}
+                onMouseEnter={this.onMouseEnter}
+                onMouseLeave={this.onMouseLeave}>
+                <p>^</p>
+                {flyout}
+            </span>
+        );
+    }
+}
diff --git a/src/server/Search.ts b/src/server/Search.ts
index 0f7004bdf..5ca5578a7 100644
--- a/src/server/Search.ts
+++ b/src/server/Search.ts
@@ -22,7 +22,8 @@ export class Search {
         try {
             const searchResults = JSON.parse(await rp.get(this.url + "dash/select", {
                 qs: {
-                    q: query
+                    q: query,
+                    fl: "id"
                 }
             }));
             const fields = searchResults.response.docs;
-- 
cgit v1.2.3-70-g09d2


From 9047fbe7dc69572bd8178bc29616ed2c855933ce Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 13 May 2019 00:37:03 -0400
Subject: fixed putting link info on protoype. making images and videos show up
 reasonably in schema and kvp.  dragging of docs from schema.

---
 .../views/collections/CollectionSchemaView.scss    |  4 +++
 .../views/collections/CollectionSchemaView.tsx     | 32 +++++++++++-----------
 .../views/collections/CollectionVideoView.scss     |  2 +-
 src/client/views/nodes/FieldView.tsx               | 10 ++++---
 src/client/views/nodes/IconBox.scss                |  4 +--
 src/client/views/nodes/KeyValuePair.scss           |  8 ++++++
 src/new_fields/Doc.ts                              |  8 +++---
 7 files changed, 41 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index cfdb3ab22..b9ed99155 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -14,6 +14,10 @@
 
     .collectionSchemaView-cellContents {
         height: $MAX_ROW_HEIGHT;
+        img {
+            width:auto;
+            max-height: $MAX_ROW_HEIGHT;
+        }
     }
     
     .collectionSchemaView-previewRegion {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 18319dc77..4984e26d1 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -24,6 +24,7 @@ import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
 import { List } from "../../../new_fields/List";
 import { Id } from "../../../new_fields/RefField";
+import { isUndefined } from "typescript-collections/dist/lib/util";
 
 
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
@@ -77,23 +78,22 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             PanelHeight: returnZero,
             PanelWidth: returnZero,
         };
-        let contents = (
-            <FieldView {...props} />
-        );
+        let fieldContentView = <FieldView {...props} />;
         let reference = React.createRef<HTMLDivElement>();
-        let onItemDown = SetupDrag(reference, () => props.Document, this.props.moveDocument);
+        let onItemDown = (e: React.PointerEvent) =>
+            (this.props.CollectionView!.props.isSelected() ?
+                SetupDrag(reference, () => props.Document, this.props.moveDocument)(e) : undefined);
         let applyToDoc = (doc: Doc, run: (args?: { [name: string]: any }) => any) => {
             const res = run({ this: doc });
             if (!res.success) return false;
-            const field = res.result;
-            doc[props.fieldKey] = field;
+            doc[props.fieldKey] = res.result;
             return true;
         };
         return (
             <div className="collectionSchemaView-cellContents" onPointerDown={onItemDown} key={props.Document[Id]} ref={reference}>
                 <EditableView
                     display={"inline"}
-                    contents={contents}
+                    contents={fieldContentView}
                     height={Number(MAX_ROW_HEIGHT)}
                     GetValue={() => {
                         let field = props.Document[props.fieldKey];
@@ -224,10 +224,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         this.previewScript = e.currentTarget.value;
     }
 
+    @computed
     get previewDocument(): Doc | undefined {
-        const children = Cast(this.props.Document[this.props.fieldKey], listSpec(Doc), []);
+        const children = DocListCast(this.props.Document[this.props.fieldKey]);
         const selected = children.length > this._selectedIndex ? FieldValue(children[this._selectedIndex]) : undefined;
-        return selected ? (this.previewScript ? FieldValue(Cast(selected[this.previewScript], Doc)) : selected) : undefined;
+        return selected ? (this.previewScript && this.previewScript != "this" ? FieldValue(Cast(selected[this.previewScript], Doc)) : selected) : undefined;
     }
     get tableWidth() { return (this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH) * (1 - this.splitPercentage / 100); }
     get previewRegionHeight() { return this.props.PanelHeight() - 2 * this.borderWidth; }
@@ -253,8 +254,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     get previewPanel() {
         // let doc = CompileScript(this.previewScript, { this: selected }, true)();
         const previewDoc = this.previewDocument;
-        return !previewDoc || !this.previewRegionWidth ? (null) : (
-            <div className="collectionSchemaView-previewRegion" style={{ width: `${this.previewRegionWidth}px` }}>
+        return (<div className="collectionSchemaView-previewRegion" style={{ width: `${this.previewRegionWidth}px` }}>
+            {!previewDoc || !this.previewRegionWidth ? (null) : (
                 <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.previewPanelCenteringOffset}px, 0px)` }}>
                     <DocumentView Document={previewDoc} isTopMost={false} selectOnLoad={false}
                         toggleMinimized={emptyFunction}
@@ -268,11 +269,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                         whenActiveChanged={this.props.whenActiveChanged}
                         bringToFront={emptyFunction}
                     />
-                </div>
-                <input className="collectionSchemaView-input" value={this.previewScript} onChange={this.onPreviewScriptChange}
-                    style={{ left: `calc(50% - ${Math.min(75, this.previewPanelWidth() / 2)}px)` }} />
-            </div>
-        );
+                </div>)}
+            <input className="collectionSchemaView-input" value={this.previewScript} onChange={this.onPreviewScriptChange}
+                style={{ left: `calc(50% - ${Math.min(75, (previewDoc ? this.previewPanelWidth() / 2 : 75))}px)` }} />
+        </div>);
     }
 
     get documentKeysCheckList() {
diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss
index ed56ad268..db8b84832 100644
--- a/src/client/views/collections/CollectionVideoView.scss
+++ b/src/client/views/collections/CollectionVideoView.scss
@@ -2,7 +2,7 @@
 .collectionVideoView-cont{
     width: 100%;
     height: 100%;
-    position: absolute;
+    position: inherit;
     top: 0;
     left:0;
  
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 8bdf34181..34b6c5e70 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -7,7 +7,7 @@ import { VideoBox } from "./VideoBox";
 import { AudioBox } from "./AudioBox";
 import { DocumentContentsView } from "./DocumentContentsView";
 import { Transform } from "../../util/Transform";
-import { returnFalse, emptyFunction } from "../../../Utils";
+import { returnFalse, emptyFunction, returnOne } from "../../../Utils";
 import { CollectionView } from "../collections/CollectionView";
 import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
@@ -18,6 +18,7 @@ import { ImageField, VideoField, AudioField } from "../../../new_fields/URLField
 import { IconField } from "../../../new_fields/IconField";
 import { RichTextField } from "../../../new_fields/RichTextField";
 import { DateField } from "../../../new_fields/DateField";
+import { NumCast } from "../../../new_fields/Types";
 
 
 //
@@ -82,14 +83,15 @@ export class FieldView extends React.Component<FieldViewProps> {
             return <p>{field.date.toLocaleString()}</p>;
         }
         else if (field instanceof Doc) {
+            let returnHundred = () => 100;
             return (
                 <DocumentContentsView Document={field}
                     addDocument={undefined}
                     removeDocument={undefined}
                     ScreenToLocalTransform={Transform.Identity}
-                    ContentScaling={() => 1}
-                    PanelWidth={() => 100}
-                    PanelHeight={() => 100}
+                    ContentScaling={returnOne}
+                    PanelWidth={returnHundred}
+                    PanelHeight={returnHundred}
                     isTopMost={true} //TODO Why is this top most?
                     selectOnLoad={false}
                     focus={emptyFunction}
diff --git a/src/client/views/nodes/IconBox.scss b/src/client/views/nodes/IconBox.scss
index 85bbdeb59..f6d9860a3 100644
--- a/src/client/views/nodes/IconBox.scss
+++ b/src/client/views/nodes/IconBox.scss
@@ -1,7 +1,7 @@
 
 @import "../globalCssVariables";
 .iconBox-container {
-    position: absolute;
+    position: inherit;
     left:0;
     top:0;
     height: 100%;
@@ -14,7 +14,7 @@
         background: white;
     }
     .iconBox-label {
-        position: inherit;
+        position: absolute;
         width:max-content;
         font-size: 14px;
         margin-top: 3px;
diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss
index ff6885965..4f305dc91 100644
--- a/src/client/views/nodes/KeyValuePair.scss
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -26,4 +26,12 @@
 .keyValuePair-td-value {
     display:inline-block;
     overflow: scroll;
+    img { 
+        max-height: 36px;
+        width: auto;
+    }
+    .videobox-cont{
+        width: auto; 
+        max-height: 36px; 
+    }
 }
\ No newline at end of file
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 46ccb3e90..42d04e93f 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -198,11 +198,11 @@ export namespace Doc {
             let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 });
             //let linkDoc = new Doc;
             linkDoc.proto!.title = "-link name-";
-            linkDoc.linkDescription = "";
-            linkDoc.linkTags = "Default";
+            linkDoc.proto!.linkDescription = "";
+            linkDoc.proto!.linkTags = "Default";
 
-            linkDoc.linkedTo = target;
-            linkDoc.linkedFrom = source;
+            linkDoc.proto!.linkedTo = target;
+            linkDoc.proto!.linkedFrom = source;
 
             let linkedFrom = Cast(target.linkedFromDocs, listSpec(Doc));
             if (!linkedFrom) {
-- 
cgit v1.2.3-70-g09d2


From 2767d6b439dd9e90543f955c68e521e03c690af0 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 13 May 2019 02:09:08 -0400
Subject: Added "find aliases" and "see collections that contain me"

---
 src/client/util/SearchUtil.ts                      | 25 +++++++++++++++++
 .../views/collections/ParentDocumentSelector.tsx   | 31 ++++++++++++++++++++--
 src/client/views/nodes/DocumentView.tsx            | 27 ++++++++++++-------
 src/new_fields/Doc.ts                              |  4 +--
 4 files changed, 73 insertions(+), 14 deletions(-)
 create mode 100644 src/client/util/SearchUtil.ts

(limited to 'src')

diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
new file mode 100644
index 000000000..4ccff0d1b
--- /dev/null
+++ b/src/client/util/SearchUtil.ts
@@ -0,0 +1,25 @@
+import * as rp from 'request-promise';
+import { DocServer } from '../DocServer';
+import { Doc } from '../../new_fields/Doc';
+import { Id } from '../../new_fields/RefField';
+
+export namespace SearchUtil {
+    export function Search(query: string, returnDocs: true): Promise<Doc[]>;
+    export function Search(query: string, returnDocs: false): Promise<string[]>;
+    export async function Search(query: string, returnDocs: boolean) {
+        const ids = JSON.parse(await rp.get(DocServer.prepend("/search"), {
+            qs: { query }
+        }));
+        if (!returnDocs) {
+            return ids;
+        }
+        const docMap = await DocServer.GetRefFields(ids);
+        return ids.map((id: string) => docMap[id]).filter((doc: any) => doc instanceof Doc);
+    }
+
+    export async function GetAliasesOfDocument(doc: Doc): Promise<Doc[]> {
+        const proto = await Doc.GetT(doc, "proto", Doc, true);
+        const protoId = (proto || doc)[Id];
+        return Search(`{!join from=id to=proto_i}id:${protoId}`, true);
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 1fdb9d4d9..dd1516da7 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -2,7 +2,34 @@ import * as React from "react";
 import './ParentDocumentSelector.scss';
 import { Doc } from "../../../new_fields/Doc";
 import { observer } from "mobx-react";
-import { observable, action } from "mobx";
+import { observable, action, runInAction } from "mobx";
+import { Id } from "../../../new_fields/RefField";
+import { SearchUtil } from "../../util/SearchUtil";
+import { CollectionDockingView } from "./CollectionDockingView";
+
+@observer
+export class SelectorContextMenu extends React.Component<{ Document: Doc }> {
+    @observable private _docs: Doc[] = [];
+
+    constructor(props: { Document: Doc }) {
+        super(props);
+
+        this.fetchDocuments();
+    }
+
+    async fetchDocuments() {
+        const docs = await SearchUtil.Search(`data_l:${this.props.Document[Id]}`, true);
+        runInAction(() => this._docs = docs);
+    }
+
+    render() {
+        return (
+            <>
+                {this._docs.map(doc => <p><a onClick={() => CollectionDockingView.Instance.AddRightSplit(doc)}>{doc.title}</a></p>)}
+            </>
+        );
+    }
+}
 
 @observer
 export class ParentDocSelector extends React.Component<{ Document: Doc }> {
@@ -23,7 +50,7 @@ export class ParentDocSelector extends React.Component<{ Document: Doc }> {
         if (this.hover) {
             flyout = (
                 <div className="PDS-flyout">
-                    <p>Hello world</p>
+                    <SelectorContextMenu Document={this.props.Document} />
                 </div>
             );
         }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 90f67db7c..edc2158f0 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -26,6 +26,7 @@ import { CurrentUserUtils } from "../../../server/authentication/models/current_
 import { DocServer } from "../../DocServer";
 import { Id } from "../../../new_fields/RefField";
 import { PresentationView } from "../PresentationView";
+import { SearchUtil } from "../../util/SearchUtil";
 
 const linkSchema = createSchema({
     title: "string",
@@ -287,16 +288,22 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
         e.preventDefault();
 
-        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked });
-        ContextMenu.Instance.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeButton });
-        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: () => Utils.CopyText(DocServer.prepend("/doc/" + this.props.Document[Id])) });
-        ContextMenu.Instance.addItem({ description: "Copy ID", event: () => Utils.CopyText(this.props.Document[Id]) });
-        //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
-        ContextMenu.Instance.addItem({ description: "Pin to Presentation", event: () => PresentationView.Instance.PinDoc(this.props.Document) });
-        ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked });
+        const cm = ContextMenu.Instance;
+        cm.addItem({ description: "Full Screen", event: this.fullScreenClicked });
+        cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeButton });
+        cm.addItem({ description: "Fields", event: this.fieldsClicked });
+        cm.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) });
+        cm.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) });
+        cm.addItem({
+            description: "Find aliases", event: async () => {
+                const aliases = await SearchUtil.GetAliasesOfDocument(this.props.Document);
+                CollectionDockingView.Instance.AddRightSplit(Docs.SchemaDocument(aliases, {}));
+            }
+        });
+        cm.addItem({ description: "Copy URL", event: () => Utils.CopyText(DocServer.prepend("/doc/" + this.props.Document[Id])) });
+        cm.addItem({ description: "Copy ID", event: () => Utils.CopyText(this.props.Document[Id]) });
+        cm.addItem({ description: "Pin to Presentation", event: () => PresentationView.Instance.PinDoc(this.props.Document) });
+        cm.addItem({ description: "Delete", event: this.deleteClicked });
         if (!this.topMost) {
             // DocumentViews should stop propagation of this event
             e.stopPropagation();
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 46ccb3e90..c08049a39 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -130,8 +130,8 @@ export namespace Doc {
         const self = doc[Self];
         return getField(self, key, ignoreProto);
     }
-    export function GetT<T extends Field>(doc: Doc, key: string, ctor: ToConstructor<T>, ignoreProto: boolean = false): T | null | undefined {
-        return Cast(Get(doc, key, ignoreProto), ctor) as T | null | undefined;
+    export function GetT<T extends Field>(doc: Doc, key: string, ctor: ToConstructor<T>, ignoreProto: boolean = false): FieldResult<T> {
+        return Cast(Get(doc, key, ignoreProto), ctor) as FieldResult<T>;
     }
     export async function SetOnPrototype(doc: Doc, key: string, value: Field) {
         const proto = doc.proto;
-- 
cgit v1.2.3-70-g09d2


From 48b0f98ea2519d861a0eecee541dc0986a2c2f12 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 13 May 2019 10:56:12 -0400
Subject: small fixes

---
 src/client/util/DocumentManager.ts                 | 10 +++++++---
 src/client/views/InkingControl.tsx                 |  9 +++------
 .../views/collections/CollectionDockingView.tsx    | 22 +++++++++++++++-------
 .../collections/collectionFreeForm/MarqueeView.tsx |  2 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  6 ++----
 src/new_fields/Doc.ts                              | 12 +++++++++++-
 6 files changed, 39 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 9a7a94228..47bcb153f 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -5,6 +5,7 @@ import { FieldValue, Cast, NumCast, BoolCast } from '../../new_fields/Types';
 import { listSpec } from '../../new_fields/Schema';
 import { undoBatch } from './UndoManager';
 import { CollectionDockingView } from '../views/collections/CollectionDockingView';
+import { Id } from '../../new_fields/RefField';
 
 
 export class DocumentManager {
@@ -26,13 +27,13 @@ export class DocumentManager {
         // this.DocumentViews = new Array<DocumentView>();
     }
 
-    public getDocumentView(toFind: Doc): DocumentView | null {
+    public getDocumentViewById(id: string): DocumentView | null {
 
         let toReturn: DocumentView | null = null;
 
         //gets document view that is in a freeform canvas collection
         DocumentManager.Instance.DocumentViews.map(view => {
-            if (view.props.Document === toFind) {
+            if (view.props.Document[Id] === id) {
                 toReturn = view;
                 return;
             }
@@ -40,7 +41,7 @@ export class DocumentManager {
         if (!toReturn) {
             DocumentManager.Instance.DocumentViews.map(view => {
                 let doc = view.props.Document.proto;
-                if (doc && Object.is(doc, toFind)) {
+                if (doc && doc.Id === id) {
                     toReturn = view;
                 }
             });
@@ -48,6 +49,9 @@ export class DocumentManager {
 
         return toReturn;
     }
+
+    public getDocumentView(toFind: Doc): DocumentView | null { return this.getDocumentViewById(toFind[Id]); }
+
     public getDocumentViews(toFind: Doc): DocumentView[] {
 
         let toReturn: DocumentView[] = [];
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 4b3dbd4e0..17d4a1e49 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -35,12 +35,9 @@ export class InkingControl extends React.Component {
     @action
     switchColor = (color: ColorResult): void => {
         this._selectedColor = color.hex;
-        if (SelectionManager.SelectedDocuments().length === 1) {
-            var sdoc = SelectionManager.SelectedDocuments()[0];
-            if (sdoc.props.ContainingCollectionView) {
-                Doc.SetOnPrototype(sdoc.props.Document, "backgroundColor", color.hex);
-            }
-        }
+        SelectionManager.SelectedDocuments().forEach(doc =>
+            doc.props.ContainingCollectionView && Doc.SetOnPrototype(doc.props.Document, "backgroundColor", color.hex)
+        );
     }
 
     @action
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 8739a213f..0aa067972 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -19,6 +19,7 @@ import "./CollectionDockingView.scss";
 import { SubCollectionViewProps } from "./CollectionSubView";
 import React = require("react");
 import { ParentDocSelector } from './ParentDocumentSelector';
+import { DocumentManager } from '../../util/DocumentManager';
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -73,26 +74,33 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
     @undoBatch
     @action
-    public CloseRightSplit(document: Doc) {
+    public CloseRightSplit(document: Doc): boolean {
+        let retVal = false;
         if (this._goldenLayout.root.contentItems[0].isRow) {
-            this._goldenLayout.root.contentItems[0].contentItems.map((child: any, i: number) => {
+            retVal = Array.from(this._goldenLayout.root.contentItems[0].contentItems).some((child: any) => {
                 if (child.contentItems.length === 1 && child.contentItems[0].config.component === "DocumentFrameRenderer" &&
-                    child.contentItems[0].config.props.documentId == document[Id]) {
+                    Doc.AreProtosEqual(DocumentManager.Instance.getDocumentViewById(child.contentItems[0].config.props.documentId)!.Document, document)) {
                     child.contentItems[0].remove();
                     this.layoutChanged(document);
-                    this.stateChanged();
+                    return true;
                 } else
-                    child.contentItems.map((tab: any, j: number) => {
-                        if (tab.config.component === "DocumentFrameRenderer" && tab.config.props.documentId === document[Id]) {
+                    Array.from(child.contentItems).filter((tab: any) => tab.config.component === "DocumentFrameRenderer").some((tab: any, j: number) => {
+                        if (Doc.AreProtosEqual(DocumentManager.Instance.getDocumentViewById(tab.config.props.documentId)!.Document, document)) {
                             child.contentItems[j].remove();
                             child.config.activeItemIndex = Math.max(child.contentItems.length - 1, 0);
                             let docs = Cast(this.props.Document.data, listSpec(Doc));
                             docs && docs.indexOf(document) !== -1 && docs.splice(docs.indexOf(document), 1);
-                            this.stateChanged();
+                            return true;
                         }
+                        return false;
                     });
+                return false;
             })
         }
+        if (retVal) {
+            this.stateChanged();
+        }
+        return retVal;
     }
 
     @action
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 080c484f4..1c29ebaae 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -79,7 +79,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     y += 40 * this.props.getTransform().Scale;
                 })
             })();
-        } else if (e.key === "t" && e.ctrlKey) {
+        } else if (e.key === "b" && e.ctrlKey) {
             //heuristically converts pasted text into a table.
             // assumes each entry is separated by a tab
             // skips all rows until it gets to a row with more than one entry
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 817a23ce8..2a041bf70 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -189,10 +189,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                             SelectionManager.DeselectAll();
                             expandedDocs.forEach(maxDoc => {
                                 maxDoc.isMinimized = false;
-                                if (!dataDocs || dataDocs.indexOf(maxDoc) == -1) {
-                                    CollectionDockingView.Instance.AddRightSplit(maxDoc);
-                                } else {
-                                    CollectionDockingView.Instance.CloseRightSplit(maxDoc);
+                                if (!CollectionDockingView.Instance.CloseRightSplit(maxDoc)) {
+                                    CollectionDockingView.Instance.AddRightSplit(Doc.MakeCopy(maxDoc));
                                 }
                             });
                         }
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 625ba0d6a..a8c9d28e1 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -134,7 +134,8 @@ export namespace Doc {
         return Cast(Get(doc, key, ignoreProto), ctor) as FieldResult<T>;
     }
     export async function SetOnPrototype(doc: Doc, key: string, value: Field) {
-        const proto = doc.proto;
+        const proto = Object.getOwnPropertyNames(doc).indexOf("isProto") == -1 ? doc.proto : doc;
+
         if (proto) {
             proto[key] = value;
         }
@@ -160,6 +161,15 @@ export namespace Doc {
         return doc;
     }
 
+    // compare whether documents or their protos match
+    export function AreProtosEqual(doc: Doc, other: Doc) {
+        let r = (doc[Id] === other[Id]);
+        let r2 = (doc.proto && doc.proto.Id === other[Id]);
+        let r3 = (other.proto && other.proto.Id === doc[Id]);
+        let r4 = (doc.proto && other.proto && doc.proto[Id] === other.proto[Id]);
+        return r || r2 || r3 || r4 ? true : false;
+    }
+
     export function MakeAlias(doc: Doc) {
         const alias = new Doc;
 
-- 
cgit v1.2.3-70-g09d2


From 3be42131bc08024f06e0daec8d09e45bf3f1ddab Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 13 May 2019 16:21:28 -0400
Subject: a bunch of fixes to schemas, marquees, and an experimental feature to
 set a document's data with linking UI

---
 src/client/util/DragManager.ts                             |  6 ++++--
 src/client/views/DocumentDecorations.tsx                   |  2 ++
 src/client/views/collections/CollectionDockingView.tsx     |  7 ++-----
 src/client/views/collections/CollectionSchemaView.tsx      |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx          |  4 ++--
 .../views/collections/collectionFreeForm/MarqueeView.tsx   |  8 +++-----
 src/client/views/nodes/DocumentContentsView.tsx            |  9 +++++++--
 src/client/views/nodes/DocumentView.tsx                    | 13 +++++++++++--
 src/client/views/nodes/ImageBox.tsx                        |  3 ++-
 src/client/views/nodes/KeyValueBox.tsx                     |  6 +++---
 src/client/views/nodes/LinkMenu.tsx                        |  2 +-
 src/client/views/nodes/PDFBox.tsx                          |  4 ++--
 src/new_fields/Doc.ts                                      | 14 +++++++++-----
 13 files changed, 49 insertions(+), 31 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 2da0d5b51..26da34e67 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -105,7 +105,8 @@ export namespace DragManager {
         constructor(
             readonly x: number,
             readonly y: number,
-            readonly data: { [id: string]: any }
+            readonly data: { [id: string]: any },
+            readonly mods: string
         ) { }
     }
 
@@ -334,7 +335,8 @@ export namespace DragManager {
                     detail: {
                         x: e.x,
                         y: e.y,
-                        data: dragData
+                        data: dragData,
+                        mods: e.ctrlKey ? "Control" : ""
                     }
                 })
             );
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 4786b4de6..5aa3d804d 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -239,6 +239,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             this._removeIcon = snapped;
         }
     }
+    @undoBatch
     @action
     onMinimizeUp = (e: PointerEvent): void => {
         e.stopPropagation();
@@ -270,6 +271,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         runInAction(() => this._minimizedX = this._minimizedY = 0);
     }
 
+    @undoBatch
     @action createIcon = (selected: DocumentView[], layoutString: string): Doc => {
         let doc = selected[0].props.Document;
         let iconDoc = Docs.IconDocument(layoutString);
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 0aa067972..a755e0f91 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import Measure from "react-measure";
 import * as GoldenLayout from "../../../client/goldenLayout";
-import { Doc, Field, Opt } from "../../../new_fields/Doc";
+import { Doc, Field, Opt, DocListCast } from "../../../new_fields/Doc";
 import { FieldId, Id } from "../../../new_fields/RefField";
 import { listSpec } from "../../../new_fields/Schema";
 import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
@@ -313,10 +313,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                     counter.DashDocId = tab.contentItem.config.props.documentId;
                     tab.reactionDisposer = reaction(() => [doc.linkedFromDocs, doc.LinkedToDocs, doc.title],
                         () => {
-                            const lf = Cast(doc.linkedFromDocs, listSpec(Doc), []);
-                            const lt = Cast(doc.linkedToDocs, listSpec(Doc), []);
-                            let count = (lf ? lf.length : 0) + (lt ? lt.length : 0);
-                            counter.innerHTML = count;
+                            counter.innerHTML = DocListCast(doc.linkedFromDocs).length + DocListCast(doc.linkedToDocs).length;
                             tab.titleElement[0].textContent = doc.title;
                         }, { fireImmediately: true });
                     tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 4984e26d1..9ecccc559 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -254,7 +254,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     get previewPanel() {
         // let doc = CompileScript(this.previewScript, { this: selected }, true)();
         const previewDoc = this.previewDocument;
-        return (<div className="collectionSchemaView-previewRegion" style={{ width: `${this.previewRegionWidth}px` }}>
+        return (<div className="collectionSchemaView-previewRegion" style={{ width: `${Math.max(0, this.previewRegionWidth - 1)}px` }}>
             {!previewDoc || !this.previewRegionWidth ? (null) : (
                 <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.previewPanelCenteringOffset}px, 0px)` }}>
                     <DocumentView Document={previewDoc} isTopMost={false} selectOnLoad={false}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index dc86f38b6..c36c708db 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -339,7 +339,7 @@ class CollectionFreeFormOverlayView extends React.Component<DocumentViewProps &
             isTopMost={this.props.isTopMost} isSelected={this.props.isSelected} select={emptyFunction} />);
     }
     render() {
-        return this.overlayView;
+        return this.props.Document.overlayLayout ? this.overlayView : (null);
     }
 }
 
@@ -350,7 +350,7 @@ class CollectionFreeFormBackgroundView extends React.Component<DocumentViewProps
             isTopMost={this.props.isTopMost} isSelected={this.props.isSelected} select={emptyFunction} />);
     }
     render() {
-        return this.backgroundView;
+        return this.props.Document.backgroundLayout ? this.backgroundView : (null);
     }
 }
 
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 1c29ebaae..24dea200e 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -104,10 +104,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                             continue;
                         }
                         let doc = new Doc();
-                        columns.forEach((col, i) => {
-                            console.log(values[i] + " " + Number(values[i]).toString());
-                            doc[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined);
-                        });
+                        columns.forEach((col, i) => doc[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined));
                         if (groupAttr) {
                             doc["_group"] = groupAttr;
                         }
@@ -207,7 +204,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
     @undoBatch
     @action
     marqueeCommand = async (e: KeyboardEvent) => {
-        if (this._commandExecuted) {
+        if (this._commandExecuted || (e as any).propagationIsStopped) {
             return;
         }
         if (e.key === "Backspace" || e.key === "Delete" || e.key === "d") {
@@ -224,6 +221,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         if (e.key === "c" || e.key === "r" || e.key === "s" || e.key === "e" || e.key === "p") {
             this._commandExecuted = true;
             e.stopPropagation();
+            (e as any).propagationIsStopped = true;
             let bounds = this.Bounds;
             let selected = this.marqueeSelect().map(d => {
                 if (e.key === "s") {
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index f404b7bc6..3ddf8eb00 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -43,9 +43,14 @@ const ObserverJsxParser: typeof JsxParser = ObserverJsxParser1 as any;
 export class DocumentContentsView extends React.Component<DocumentViewProps & {
     isSelected: () => boolean,
     select: (ctrl: boolean) => void,
-    layoutKey: string
+    layoutKey: string,
 }> {
-    @computed get layout(): string { return Cast(this.props.Document[this.props.layoutKey], "string", this.props.layoutKey === "layout" ? "<p>Error loading layout data</p>" : ""); }
+    @computed get layout(): string {
+        return StrCast(this.props.Document[this.props.layoutKey],
+            this.props.Document.data ?
+                "<FieldView {...props} fieldKey='data' />" :
+                KeyValueBox.LayoutString(this.props.Document.proto ? "proto" : ""));
+    }
 
     CreateBindings(): JsxBindings {
         return { props: OmitKeys(this.props, ['parentActive'], (obj: any) => obj.active = this.props.parentActive).omit };
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index edc2158f0..b7ad9249a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -243,8 +243,17 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
             const protoDest = destDoc.proto;
             const protoSrc = sourceDoc.proto;
-            Doc.MakeLink(protoSrc ? protoSrc : sourceDoc, protoDest ? protoDest : destDoc);
-            de.data.droppedDocuments.push(destDoc);
+            if (de.mods == "Control") {
+                let src = protoSrc ? protoSrc : sourceDoc;
+                let dst = protoDest ? protoDest : destDoc;
+                dst.data = src;
+                dst.nativeWidth = src.nativeWidth;
+                dst.nativeHeight = src.nativeHeight;
+            }
+            else {
+                Doc.MakeLink(protoSrc ? protoSrc : sourceDoc, protoDest ? protoDest : destDoc);
+                de.data.droppedDocuments.push(destDoc);
+            }
             e.stopPropagation();
         }
     }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index f9659a4b2..05742f8d1 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -42,8 +42,9 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     onLoad = (target: any) => {
         var h = this._imgRef.current!.naturalHeight;
         var w = this._imgRef.current!.naturalWidth;
+        console.log("title: " + this.Document.title);
         if (this._photoIndex === 0) {
-            this.Document.nativeHeight = FieldValue(this.Document.nativeWidth, 0) * h / w;
+            Doc.SetOnPrototype(this.Document, "nativeHeight", FieldValue(this.Document.nativeWidth, 0) * h / w);
             this.Document.height = FieldValue(this.Document.width, 0) * h / w;
         }
     }
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 876a3c173..c9d665ceb 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -18,7 +18,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     @observable private _keyInput: string = "";
     @observable private _valueInput: string = "";
     @computed get splitPercentage() { return NumCast(this.props.Document.schemaSplitPercentage, 50); }
-
+    get fieldDocToLayout() { return this.props.fieldKey ? FieldValue(Cast(this.props.Document[this.props.fieldKey], Doc)) : this.props.Document }
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -28,7 +28,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     onEnterKey = (e: React.KeyboardEvent): void => {
         if (e.key === 'Enter') {
             if (this._keyInput && this._valueInput) {
-                let doc = FieldValue(Cast(this.props.Document.data, Doc));
+                let doc = this.fieldDocToLayout;
                 if (!doc) {
                     return;
                 }
@@ -60,7 +60,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     }
 
     createTable = () => {
-        let doc = FieldValue(Cast(this.props.Document.data, Doc));
+        let doc = this.fieldDocToLayout;
         if (!doc) {
             return <tr><td>Loading...</td></tr>;
         }
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 7bf13d5f9..5dabfc30d 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -32,7 +32,7 @@ export class LinkMenu extends React.Component<Props> {
     render() {
         //get list of links from document
         let linkFrom = DocListCast(this.props.docView.props.Document.linkedFromDocs);
-        let linkTo = DocListCast(this.props.docView.props.Document.linkedToDoc);
+        let linkTo = DocListCast(this.props.docView.props.Document.linkedToDocs);
         if (this._editingLink === undefined) {
             return (
                 <div id="linkMenu-container">
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index cb27b3f1b..ff8737192 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -1,5 +1,5 @@
 import * as htmlToImage from "html-to-image";
-import { action, computed, IReactionDisposer, observable, reaction, Reaction, trace } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, Reaction, trace, runInAction } from 'mobx';
 import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css';
 import Measure from "react-measure";
@@ -223,7 +223,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
             document.addEventListener("pointerup", this.onPointerUp);
         }
         if (this.props.isSelected() && e.buttons === 2) {
-            this._alt = true;
+            runInAction(() => this._alt = true);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
         }
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index a8c9d28e1..4c837fcbd 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -173,11 +173,15 @@ export namespace Doc {
     export function MakeAlias(doc: Doc) {
         const alias = new Doc;
 
-        PromiseValue(Cast(doc.proto, Doc)).then(proto => {
-            if (proto) {
-                alias.proto = proto;
-            }
-        });
+        if (!doc.proto) {
+            alias.proto = doc;
+        } else {
+            PromiseValue(Cast(doc.proto, Doc)).then(proto => {
+                if (proto) {
+                    alias.proto = proto;
+                }
+            });
+        }
 
         return alias;
     }
-- 
cgit v1.2.3-70-g09d2


From 0624c1696f84a7f302888e9cd3cf829e3c47c52f Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 13 May 2019 23:10:40 -0400
Subject: fixed following links to docs that are in workspace

---
 src/client/util/DocumentManager.ts  | 6 ++++--
 src/client/views/nodes/ImageBox.tsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 47bcb153f..49c5d8c19 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -41,7 +41,7 @@ export class DocumentManager {
         if (!toReturn) {
             DocumentManager.Instance.DocumentViews.map(view => {
                 let doc = view.props.Document.proto;
-                if (doc && doc.Id === id) {
+                if (doc && doc[Id] === id) {
                     toReturn = view;
                 }
             });
@@ -50,7 +50,9 @@ export class DocumentManager {
         return toReturn;
     }
 
-    public getDocumentView(toFind: Doc): DocumentView | null { return this.getDocumentViewById(toFind[Id]); }
+    public getDocumentView(toFind: Doc): DocumentView | null {
+        return this.getDocumentViewById(toFind[Id]);
+    }
 
     public getDocumentViews(toFind: Doc): DocumentView[] {
 
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 05742f8d1..6472ae711 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -165,7 +165,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => (p as ImageField).url.href);
         let nativeWidth = FieldValue(this.Document.nativeWidth, (this.props.PanelWidth as any) as string ? Number((this.props.PanelWidth as any) as string) : 50);
         let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
-        let id = this.props.id;
+        let id = this.props.id; // bcz: used to set id = "isExpander" in templates.tsx
         return (
             <div id={id} className={`imageBox-cont${interactive}`} onPointerDown={this.onPointerDown} onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
                 <img id={id} src={paths[Math.min(paths.length, this._photoIndex)]}
-- 
cgit v1.2.3-70-g09d2


From c3a24f3cd2d1d3baf5738c649552baadf3677385 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 14 May 2019 01:31:11 -0400
Subject: Refactored most of presentation view

---
 src/client/views/Main.scss                         |  19 ---
 src/client/views/Main.tsx                          |  57 ++++---
 src/client/views/PresentationView.scss             |  71 +++++----
 src/client/views/PresentationView.tsx              | 166 ++++++++-------------
 src/client/views/TemplateMenu.tsx                  |   1 -
 .../views/collections/CollectionDockingView.tsx    |  13 +-
 src/client/views/nodes/LinkMenu.tsx                |   2 +-
 src/new_fields/Doc.ts                              |  10 +-
 8 files changed, 155 insertions(+), 184 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 2430e8f6c..d63b0147b 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -27,25 +27,6 @@ div {
     z-index: 9999;
 }
 
-h1 {
-    font-size: 50px;
-    position: fixed;
-    top: 30px;
-    left: 50%;
-    transform: translateX(-50%);
-    color: $dark-color;
-    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
-    z-index: 9999;
-    font-family: $sans-serif;
-    font-weight: 700;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
 .jsx-parser {
     width: 100%;
     pointer-events: none;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 158de31f5..66205f8ca 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -1,7 +1,7 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
 import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, configure, observable, runInAction } from 'mobx';
+import { action, computed, configure, observable, runInAction, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import "normalize.css";
 import * as React from 'react';
@@ -51,6 +51,9 @@ export class Main extends React.Component {
     }
     private set mainContainer(doc: Opt<Doc>) {
         if (doc) {
+            if (!("presentationView" in doc)) {
+                doc.presentationView = new Doc();
+            }
             CurrentUserUtils.UserDocument.activeWorkspace = doc;
         }
     }
@@ -174,32 +177,42 @@ export class Main extends React.Component {
             }
         }, 100);
     }
+    @action
+    onResize = (r: any) => {
+        this.pwidth = r.offset.width;
+        this.pheight = r.offset.height;
+    }
+    getPWidth = () => {
+        return this.pwidth;
+    }
+    getPHeight = () => {
+        return this.pheight;
+    }
     @computed
     get mainContent() {
-        let pwidthFunc = () => this.pwidth;
-        let pheightFunc = () => this.pheight;
-        let noScaling = () => 1;
         let mainCont = this.mainContainer;
-        return <Measure offset onResize={action((r: any) => { this.pwidth = r.offset.width; this.pheight = r.offset.height; })}>
+        let content = !mainCont ? (null) :
+            <DocumentView Document={mainCont}
+                toggleMinimized={emptyFunction}
+                addDocument={undefined}
+                removeDocument={undefined}
+                ScreenToLocalTransform={Transform.Identity}
+                ContentScaling={returnOne}
+                PanelWidth={this.getPWidth}
+                PanelHeight={this.getPHeight}
+                isTopMost={true}
+                selectOnLoad={false}
+                focus={emptyFunction}
+                parentActive={returnTrue}
+                whenActiveChanged={emptyFunction}
+                bringToFront={emptyFunction}
+                ContainingCollectionView={undefined} />;
+        const pres = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined;
+        return <Measure offset onResize={this.onResize}>
             {({ measureRef }) =>
                 <div ref={measureRef} id="mainContent-div">
-                    {!mainCont ? (null) :
-                        <DocumentView Document={mainCont}
-                            toggleMinimized={emptyFunction}
-                            addDocument={undefined}
-                            removeDocument={undefined}
-                            ScreenToLocalTransform={Transform.Identity}
-                            ContentScaling={noScaling}
-                            PanelWidth={pwidthFunc}
-                            PanelHeight={pheightFunc}
-                            isTopMost={true}
-                            selectOnLoad={false}
-                            focus={emptyFunction}
-                            parentActive={returnTrue}
-                            whenActiveChanged={emptyFunction}
-                            bringToFront={emptyFunction}
-                            ContainingCollectionView={undefined} />}
-                    <PresentationView key="presentation" />
+                    {content}
+                    {pres ? <PresentationView Document={pres} key="presentation" /> : null}
                 </div>
             }
         </Measure>;
diff --git a/src/client/views/PresentationView.scss b/src/client/views/PresentationView.scss
index 7c5677f0d..fb4a851c4 100644
--- a/src/client/views/PresentationView.scss
+++ b/src/client/views/PresentationView.scss
@@ -4,15 +4,14 @@
     z-index: 1;
     box-shadow: #AAAAAA .2vw .2vw .4vw;
     right: 0;
-    top:0;
-    bottom:0;
+    top: 0;
+    bottom: 0;
 }
 
 .presentationView-item {
-    width: 220px;
-    height: 40px;
-    vertical-align: center;
-    padding-top: 15px;
+    padding: 10px;
+    display: inline-block;
+    width: 100%;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -22,47 +21,59 @@
     transition: all .1s;
 }
 
+.presentationView-listCont {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
 .presentationView-item:hover {
     transition: all .1s;
     background: #AAAAAA
 }
 
+.presentationView-selected {
+    background: gray;
+}
+
 .presentationView-heading {
-     margin-top: 0px;
-    height: 40px;
     background: lightseagreen;
-    padding: 30px;
+    padding: 10px;
+    display: inline-block;
+    width: 100%;
 }
+
 .presentationView-title {
-   padding-top: 3px; 
-   padding-bottom: 3px; 
-   font-size: 25px;
-   float:left;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    font-size: 25px;
+    display: inline-block;
 }
-.presentation-icon{
+
+.presentation-icon {
     float: right;
-    display: inline;
-    width: 10px;
-    margin-top: 7px;
 }
-.presentationView-header {
-    padding-top: 1px; 
-    padding-bottom: 1px; 
+
+.presentationView-name {
     font-size: 15px;
-    float:left;
- }
+    display: inline-block;
+}
+
+.presentation-button {
+    margin-right: 12.5%;
+    margin-left: 12.5%;
+    width: 25%;
+}
 
- .presentation-next{
-     float: right;
- }
- .presentation-back{
-     float: left;
- }
- .presentation-next:hover{
+.presentation-buttons {
+    padding: 10px;
+}
+
+.presentation-next:hover {
     transition: all .1s;
     background: #AAAAAA
 }
-.presentation-back:hover{
+
+.presentation-back:hover {
     transition: all .1s;
     background: #AAAAAA
 }
\ No newline at end of file
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index 3fb24a339..098e725c7 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -5,15 +5,20 @@ import "./PresentationView.scss"
 import "./Main.tsx";
 import { DocumentManager } from "../util/DocumentManager";
 import { Utils } from "../../Utils";
-import { Doc } from "../../new_fields/Doc";
+import { Doc, DocListCast, DocListCastAsync } from "../../new_fields/Doc";
 import { listSpec } from "../../new_fields/Schema";
-import { Cast, NumCast, FieldValue, PromiseValue } from "../../new_fields/Types";
+import { Cast, NumCast, FieldValue, PromiseValue, StrCast } from "../../new_fields/Types";
 import { Id } from "../../new_fields/RefField";
 import { List } from "../../new_fields/List";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 
 export interface PresViewProps {
-    //Document: Doc;
+    Document: Doc;
+}
+
+interface PresListProps extends PresViewProps {
+    deleteDocument(index: number): void;
+    gotoDocument(index: number): void;
 }
 
 
@@ -21,72 +26,40 @@ export interface PresViewProps {
 /**
  * Component that takes in a document prop and a boolean whether it's collapsed or not.
  */
-class PresentationViewItem extends React.Component<PresViewProps> {
-
-    @observable Document: Doc;
-    constructor(props: PresViewProps) {
-        super(props);
-        this.Document = FieldValue(Cast(FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc))!.presentationView, Doc))!;
-    }
-    //look at CollectionFreeformView.focusDocument(d)
-    @action
-    openDoc = (doc: Doc) => {
-        let docView = DocumentManager.Instance.getDocumentView(doc);
-        if (docView) {
-            docView.props.focus(docView.props.Document);
-        }
-    }
-
-    /**
-  * Removes a document from the presentation view
-  **/
-    @action
-    public RemoveDoc(doc: Doc) {
-        const value = Cast(this.Document.data, listSpec(Doc), []);
-        let index = -1;
-        for (let i = 0; i < value.length; i++) {
-            if (value[i][Id] === doc[Id]) {
-                index = i;
-                break;
-            }
-        }
-        if (index !== -1) {
-            value.splice(index, 1);
-        }
-    }
+class PresentationViewList extends React.Component<PresListProps> {
 
     /**
      * Renders a single child document. It will just append a list element.
      * @param document The document to render.
      */
-    renderChild(document: Doc) {
+    renderChild = (document: Doc, index: number) => {
         let title = document.title;
 
         //to get currently selected presentation doc
-        let selected = NumCast(this.Document.selectedDoc, 0);
+        let selected = NumCast(this.props.Document.selectedDoc, 0);
 
-        // finally, if it's a normal document, then render it as such.
-        const children = Cast(this.Document.data, listSpec(Doc));
-        const styles: any = {};
-        if (children && children[selected] === document) {
+        let className = "presentationView-item";
+        if (selected === index) {
             //this doc is selected
-            styles.background = "gray";
+            className += " presentationView-selected";
         }
         return (
-            <li className="presentationView-item" style={styles} key={Utils.GenerateGuid()}>
-                <div className="presentationView-header" onClick={() => this.openDoc(document)}>{title}</div>
-                <div className="presentation-icon" onClick={() => this.RemoveDoc(document)}>X</div>
-            </li>
+            <div className={className} key={document[Id] + index} onClick={e => { this.props.gotoDocument(index); e.stopPropagation(); }}>
+                <strong className="presentationView-name">
+                    {`${index + 1}. ${title}`}
+                </strong>
+                <button className="presentation-icon" onClick={e => { this.props.deleteDocument(index); e.stopPropagation(); }}>X</button>
+            </div>
         );
 
     }
 
     render() {
-        const children = Cast(this.Document.data, listSpec(Doc), []);
+        const children = DocListCast(this.props.Document.data);
 
         return (
-            <div>
-                {children.map(value => this.renderChild(value))}
+            <div className="presentationView-listCont">
+                {children.map(this.renderChild)}
             </div>
         );
     }
@@ -100,59 +73,42 @@ export class PresentationView extends React.Component<PresViewProps>  {
     //observable means render is re-called every time variable is changed
     @observable
     collapsed: boolean = false;
-    closePresentation = action(() => this.Document!.width = 0);
+    closePresentation = action(() => this.props.Document.width = 0);
     next = () => {
-        const current = NumCast(this.Document!.selectedDoc);
-        const allDocs = FieldValue(Cast(this.Document!.data, listSpec(Doc)));
-        if (allDocs && current < allDocs.length + 1) {
-            //can move forwards
-            this.Document!.selectedDoc = current + 1;
-            const doc = allDocs[current + 1];
-            let docView = DocumentManager.Instance.getDocumentView(doc);
-            if (docView) {
-                docView.props.focus(docView.props.Document);
-            }
-        }
+        const current = NumCast(this.props.Document.selectedDoc);
+        this.gotoDocument(current + 1);
 
     }
     back = () => {
-        const current = NumCast(this.Document!.selectedDoc);
-        const allDocs = FieldValue(Cast(this.Document!.data, listSpec(Doc)));
-        if (allDocs && current - 1 >= 0) {
-            //can move forwards
-            this.Document!.selectedDoc = current - 1;
-            const doc = allDocs[current - 1];
-            let docView = DocumentManager.Instance.getDocumentView(doc);
-            if (docView) {
-                docView.props.focus(docView.props.Document);
-            }
+        const current = NumCast(this.props.Document.selectedDoc);
+        this.gotoDocument(current - 1);
+    }
+
+    @action
+    public RemoveDoc = (index: number) => {
+        const value = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        if (value) {
+            value.splice(index, 1);
         }
     }
 
-    private ref = React.createRef<HTMLDivElement>();
+    public gotoDocument = async (index: number) => {
+        const list = FieldValue(Cast(this.props.Document.data, listSpec(Doc)));
+        if (!list) {
+            return;
+        }
+        if (index < 0 || index >= list.length) {
+            return;
+        }
+
+        this.props.Document.selectedDoc = index;
+        const doc = await list[index];
+        DocumentManager.Instance.jumpToDocument(doc);
+    }
 
-    @observable Document?: Doc;
     //initilize class variables
     constructor(props: PresViewProps) {
         super(props);
-        let self = this;
-        reaction(() =>
-            CurrentUserUtils.UserDocument.activeWorkspace,
-            (activeW) => {
-                if (activeW && activeW instanceof Doc) {
-                    PromiseValue(Cast(activeW.presentationView, Doc)).
-                        then(pv => runInAction(() => {
-                            if (pv) self.Document = pv;
-                            else {
-                                pv = new Doc();
-                                pv.title = "Presentation Doc";
-                                activeW.presentationView = pv;
-                                self.Document = pv;
-                            }
-                        }))
-                }
-            },
-            { fireImmediately: true });
         PresentationView.Instance = this;
     }
 
@@ -162,36 +118,32 @@ export class PresentationView extends React.Component<PresViewProps>  {
     @action
     public PinDoc(doc: Doc) {
         //add this new doc to props.Document
-        const data = Cast(this.Document!.data, listSpec(Doc));
+        const data = Cast(this.props.Document.data, listSpec(Doc));
         if (data) {
             data.push(doc);
         } else {
-            this.Document!.data = new List([doc]);
+            this.props.Document.data = new List([doc]);
         }
 
-        this.Document!.width = 300;
+        this.props.Document.width = 300;
     }
 
     render() {
-        if (!this.Document)
-            return (null);
-        let titleStr = this.Document.Title;
-        let width = NumCast(this.Document.width);
+        let titleStr = StrCast(this.props.Document.title);
+        let width = NumCast(this.props.Document.width);
 
         //TODO: next and back should be icons
         return (
             <div className="presentationView-cont" style={{ width: width, overflow: "hidden" }}>
                 <div className="presentationView-heading">
                     <div className="presentationView-title">{titleStr}</div>
-                    <div className='presentation-icon' onClick={this.closePresentation}>X</div></div>
-                <div>
-                    <div className="presentation-back" onClick={this.back}>back</div>
-                    <div className="presentation-next" onClick={this.next}>next</div>
-
+                    <button className='presentation-icon' onClick={this.closePresentation}>X</button>
+                </div>
+                <div className="presentation-buttons">
+                    <button className="presentation-button" onClick={this.back}>back</button>
+                    <button className="presentation-button" onClick={this.next}>next</button>
                 </div>
-                <ul>
-                    <PresentationViewItem />
-                </ul>
+                <PresentationViewList Document={this.props.Document} deleteDocument={this.RemoveDoc} gotoDocument={this.gotoDocument} />
             </div>
         );
     }
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index e2b3bd07a..22c4edc25 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -38,7 +38,6 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
 
     constructor(props: TemplateMenuProps) {
         super(props);
-        console.log("");
     }
 
     @action
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index a755e0f91..6651a834d 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,6 +1,6 @@
 import 'golden-layout/src/css/goldenlayout-base.css';
 import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, observable, reaction } from "mobx";
+import { action, observable, reaction, Lambda } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import Measure from "react-measure";
@@ -188,12 +188,16 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
             this._goldenLayout.init();
         }
     }
+    reactionDisposer?: Lambda;
     componentDidMount: () => void = () => {
+        console.log("Docking mount");
         if (this._containerRef.current) {
-            reaction(
+            this.reactionDisposer = reaction(
                 () => StrCast(this.props.Document.dockingConfig),
                 () => {
                     if (!this._goldenLayout || this._ignoreStateChange !== JSON.stringify(this._goldenLayout.toConfig())) {
+                        // Because this is in a set timeout, if this component unmounts right after mounting,
+                        // we will leak a GoldenLayout, because we try to destroy it before we ever create it
                         setTimeout(() => this.setupGoldenLayout(), 1);
                     }
                     this._ignoreStateChange = "";
@@ -203,6 +207,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         }
     }
     componentWillUnmount: () => void = () => {
+        console.log("Docking unmount");
         try {
             this._goldenLayout.unbind('itemDropped', this.itemDropped);
             this._goldenLayout.unbind('tabCreated', this.tabCreated);
@@ -214,6 +219,10 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         if (this._goldenLayout) this._goldenLayout.destroy();
         this._goldenLayout = null;
         window.removeEventListener('resize', this.onResize);
+
+        if (this.reactionDisposer) {
+            this.reactionDisposer();
+        }
     }
     @action
     onResize = (event: any) => {
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 5dabfc30d..11117122d 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -36,7 +36,7 @@ export class LinkMenu extends React.Component<Props> {
         if (this._editingLink === undefined) {
             return (
                 <div id="linkMenu-container">
-                    <input id="linkMenu-searchBar" type="text" placeholder="Search..."></input>
+                    {/* <input id="linkMenu-searchBar" type="text" placeholder="Search..."></input> */}
                     <div id="linkMenu-list">
                         {this.renderLinkItems(linkTo, "linkedTo", "Destination: ")}
                         {this.renderLinkItems(linkFrom, "linkedFrom", "Source: ")}
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 4c837fcbd..89901490d 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -29,15 +29,21 @@ export const SelfProxy = Symbol("SelfProxy");
 export const WidthSym = Symbol("Width");
 export const HeightSym = Symbol("Height");
 
+/**
+ * Cast any field to either a List of Docs or undefined if the given field isn't a List of Docs.  
+ * If a default value is given, that will be returned instead of undefined.  
+ * If a default value is given, the returned value should not be modified as it might be a temporary value.  
+ * If no default value is given, and the returned value is not undefined, it can be safely modified.  
+ */
 export function DocListCastAsync(field: FieldResult): Promise<Doc[] | undefined>;
 export function DocListCastAsync(field: FieldResult, defaultValue: Doc[]): Promise<Doc[]>;
 export function DocListCastAsync(field: FieldResult, defaultValue?: Doc[]) {
     const list = Cast(field, listSpec(Doc));
-    return list ? Promise.all(list) : Promise.resolve(defaultValue);
+    return list ? Promise.all(list).then(() => list) : Promise.resolve(defaultValue);
 }
 
 export function DocListCast(field: FieldResult) {
-    return Cast(field, listSpec(Doc), []).filter(d => d && d instanceof Doc).map(d => d as Doc)
+    return Cast(field, listSpec(Doc), []).filter(d => d && d instanceof Doc).map(d => d as Doc);
 }
 
 @Deserializable("doc").withFields(["id"])
-- 
cgit v1.2.3-70-g09d2


From a96b2d61fe05eacaaad793f2d9e19c3d99708137 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 14 May 2019 10:03:03 -0400
Subject: added non-working mp4 youtube video streamer

---
 src/client/views/nodes/PDFBox.tsx   | 35 ++++++++--------------------
 src/client/views/nodes/VideoBox.tsx | 46 +++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index ff8737192..6cbf066ca 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -53,8 +53,10 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     public static LayoutString() { return FieldView.LayoutString(PDFBox); }
 
     private _mainDiv = React.createRef<HTMLDivElement>();
+    private renderHeight = 2400;
 
     @observable private _renderAsSvg = true;
+    @observable private _alt = false;
 
     private _reactionDisposer: Opt<IReactionDisposer>;
 
@@ -65,8 +67,8 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     @observable private _interactive: boolean = false;
     @observable private _loaded: boolean = false;
 
-    @computed private get curPage() { return FieldValue(this.Document.curPage, 1); }
-    @computed private get thumbnailPage() { return Cast(this.props.Document.thumbnailPage, "number", -1); }
+    @computed private get curPage() { return NumCast(this.Document.curPage, 1); }
+    @computed private get thumbnailPage() { return NumCast(this.props.Document.thumbnailPage, -1); }
 
     componentDidMount() {
         this._reactionDisposer = reaction(
@@ -162,10 +164,8 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
         let index: any;
         this._pageInfo.divs.forEach((obj: any) => {
             obj.spans.forEach((element: any) => {
-                if (element === span) {
-                    if (!index) {
-                        index = this._pageInfo.divs.indexOf(obj);
-                    }
+                if (element === span && !index) {
+                    index = this._pageInfo.divs.indexOf(obj);
                 }
             });
         });
@@ -243,7 +243,6 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     }
 
 
-
     @action
     saveThumbnail = () => {
         this._renderAsSvg = false;
@@ -284,20 +283,16 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
             this.props.Document.nativeHeight = nativeHeight;
         }
     }
-    renderHeight = 2400;
     @computed
     get pdfPage() {
         return <Page height={this.renderHeight} pageNumber={this.curPage} onLoadSuccess={this.onLoaded} />;
     }
     @computed
     get pdfContent() {
-        let page = this.curPage;
-        const renderHeight = 2400;
         let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField);
         if (!pdfUrl) {
             return <p>No pdf url to render</p>;
         }
-        let xf = FieldValue(this.Document.nativeHeight, 0) / renderHeight;
         let body = NumCast(this.props.Document.nativeHeight) ?
             this.pdfPage :
             <Measure offset onResize={this.setScaling}>
@@ -307,6 +302,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
                     </div>
                 }
             </Measure>;
+        let xf = NumCast(this.Document.nativeHeight) / this.renderHeight;
         return <div className="pdfBox-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}>
             <Document file={window.origin + RouteStore.corsProxy + `/${pdfUrl.url}`} renderMode={this._renderAsSvg ? "svg" : "canvas"}>
                 {body}
@@ -339,22 +335,11 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
         }
         return (null);
     }
-    @observable _alt = false;
-    @action
-    onKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Alt") {
-            this._alt = true;
-        }
-    }
-    @action
-    onKeyUp = (e: React.KeyboardEvent) => {
-        if (e.key === "Alt") {
-            this._alt = false;
-        }
-    }
+    @action onKeyDown = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = true);
+    @action onKeyUp = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = false);
     render() {
         trace();
-        let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
+        let classname = "pdfBox-cont"; // + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
         return (
             <div className={classname} tabIndex={0} ref={this._mainDiv} onPointerDown={this.onPointerDown} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} >
                 {this.pdfRenderer}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 97c5d8818..740d4cc1b 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -1,6 +1,7 @@
 import React = require("react");
 import { observer } from "mobx-react";
 import { FieldView, FieldViewProps } from './FieldView';
+import * as rp from "request-promise";
 import "./VideoBox.scss";
 import { action, computed, trace } from "mobx";
 import { DocComponent } from "../DocComponent";
@@ -12,6 +13,8 @@ import { VideoField } from "../../../new_fields/URLField";
 import Measure from "react-measure";
 import "./VideoBox.scss";
 import { Field, FieldResult, Opt } from "../../../new_fields/Doc";
+import { RouteStore } from "../../../server/RouteStore";
+import { DocServer } from "../../DocServer";
 
 type VideoDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>;
 const VideoDocument = makeInterface(positionSchema, pageSchema);
@@ -63,11 +66,54 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         </video>;
     }
 
+    getMp4ForVideo(videoId: string = "JN5beCVArMs") {
+        return new Promise(async (resolve, reject) => {
+            const videoInfoRequestConfig = {
+                headers: {
+                    connection: 'keep-alive',
+                    "user-agent": 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/46.0',
+                },
+
+            }
+            try {
+                let responseSchema: any = {};
+                const videoInfoResponse = await rp.get(DocServer.prepend(RouteStore.corsProxy + "/" + `https://www.youtube.com/watch?v=${videoId}`), videoInfoRequestConfig)
+                const dataHtml = videoInfoResponse;
+                const start = dataHtml.indexOf('ytplayer.config = ') + 18;
+                const end = dataHtml.indexOf(';ytplayer.load');
+                const subString = dataHtml.substring(start, end)
+                const subJson = JSON.parse(subString);
+                const stringSub = subJson.args.player_response;
+                const stringSubJson = JSON.parse(stringSub);
+                const adaptiveFormats = stringSubJson.streamingData.adaptiveFormats;
+                const videoDetails = stringSubJson.videoDetails
+                responseSchema["adaptiveFormats"] = adaptiveFormats;
+                responseSchema["videoDetails"] = videoDetails;
+                resolve(responseSchema)
+            }
+            catch (err) {
+                console.log(`
+                --- Youtube ---
+                Function: getMp4ForVideo
+                Error: `, err)
+                reject(err)
+            }
+        })
+    }
+
+
     render() {
         let field = Cast(this.Document[this.props.fieldKey], VideoField);
         if (!field) {
             return <div>Loading</div>;
         }
+
+        // this.getMp4ForVideo().then((mp4) => {
+        //     console.log(mp4);
+        // }).catch(e => {
+        //     console.log("")
+        // });
+        // //
         let content = this.videoContent(field.url.href);
         return NumCast(this.props.Document.nativeHeight) ?
             content :
-- 
cgit v1.2.3-70-g09d2


From 281bfa589bd1ca66823003ca91cc11ce895fe5e2 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 14 May 2019 18:59:32 -0400
Subject: fixes for northstar

---
 src/client/documents/Documents.ts                  |  9 ++-
 src/client/northstar/dash-fields/HistogramField.ts | 11 ++--
 .../dash-nodes/HistogramBinPrimitiveCollection.ts  |  4 +-
 src/client/northstar/dash-nodes/HistogramBox.tsx   | 16 +++---
 .../dash-nodes/HistogramBoxPrimitives.tsx          |  3 -
 src/client/northstar/manager/Gateway.ts            | 12 ++++
 src/client/northstar/model/ModelHelpers.ts         | 10 +++-
 src/client/northstar/model/idea/idea.ts            |  6 ++
 src/client/northstar/operations/BaseOperation.ts   | 17 ------
 .../northstar/operations/HistogramOperation.ts     | 12 ++--
 src/client/views/Main.tsx                          | 54 +-----------------
 .../views/collections/CollectionSchemaView.tsx     | 39 ++++++++++++-
 .../collections/collectionFreeForm/MarqueeView.tsx |  7 ++-
 src/client/views/nodes/DocumentView.tsx            |  2 +-
 .../authentication/models/current_user_utils.ts    | 65 ++++++++++++++++++++--
 15 files changed, 162 insertions(+), 105 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 11929455c..ed260d42e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -33,6 +33,7 @@ import { DocServer } from "../DocServer";
 import { StrokeData, InkField } from "../../new_fields/InkField";
 import { dropActionType } from "../util/DragManager";
 import { DateField } from "../../new_fields/DateField";
+import { schema } from "prosemirror-schema-basic";
 
 export interface DocumentOptions {
     x?: number;
@@ -207,16 +208,18 @@ export namespace Docs {
     export function PdfDocument(url: string, options: DocumentOptions = {}) {
         return CreateInstance(pdfProto, new PdfField(new URL(url)), options);
     }
+
     export async function DBDocument(url: string, options: DocumentOptions = {}) {
         let schemaName = options.title ? options.title : "-no schema-";
         let ctlog = await Gateway.Instance.GetSchema(url, schemaName);
         if (ctlog && ctlog.schemas) {
             let schema = ctlog.schemas[0];
             let schemaDoc = Docs.TreeDocument([], { ...options, nativeWidth: undefined, nativeHeight: undefined, width: 150, height: 100, title: schema.displayName! });
-            let schemaDocuments = Cast(schemaDoc.data, listSpec(Doc));
+            let schemaDocuments = Cast(schemaDoc.data, listSpec(Doc), []);
             if (!schemaDocuments) {
                 return;
             }
+            CurrentUserUtils.AddNorthstarSchema(schema, schemaDoc);
             const docs = schemaDocuments;
             CurrentUserUtils.GetAllNorthstarColumnAttributes(schema).map(attr => {
                 DocServer.GetRefField(attr.displayName! + ".alias").then(action((field: Opt<Field>) => {
@@ -251,8 +254,8 @@ export namespace Docs {
         }
         return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Freeform });
     }
-    export function SchemaDocument(documents: Array<Doc>, options: DocumentOptions) {
-        return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Schema });
+    export function SchemaDocument(schemaColumns: string[], documents: Array<Doc>, options: DocumentOptions) {
+        return CreateInstance(collProto, new List(documents), { schemaColumns: new List(schemaColumns), ...options, viewType: CollectionViewType.Schema });
     }
     export function TreeDocument(documents: Array<Doc>, options: DocumentOptions) {
         return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Tree });
diff --git a/src/client/northstar/dash-fields/HistogramField.ts b/src/client/northstar/dash-fields/HistogramField.ts
index f01f08487..aabc77bb2 100644
--- a/src/client/northstar/dash-fields/HistogramField.ts
+++ b/src/client/northstar/dash-fields/HistogramField.ts
@@ -9,7 +9,8 @@ import { OmitKeys } from "../../../Utils";
 import { Deserializable } from "../../util/SerializationHelper";
 
 function serialize(field: HistogramField) {
-    return OmitKeys(field.HistoOp, ['Links', 'BrushLinks', 'Result', 'BrushColors', 'FilterModels', 'FilterOperand']).omit;
+    let obj = OmitKeys(field, ['Links', 'BrushLinks', 'Result', 'BrushColors', 'FilterModels', 'FilterOperand']).omit;
+    return obj;
 }
 
 function deserialize(jp: any) {
@@ -31,10 +32,10 @@ function deserialize(jp: any) {
             }
         });
         if (X && Y && V) {
-            return new HistogramField(new HistogramOperation(jp.SchemaName, X, Y, V, jp.Normalization));
+            return new HistogramOperation(jp.SchemaName, X, Y, V, jp.Normalization);
         }
     }
-    return new HistogramField(HistogramOperation.Empty);
+    return HistogramOperation.Empty;
 }
 
 @Deserializable("histogramField")
@@ -50,6 +51,8 @@ export class HistogramField extends ObjectField {
     }
 
     [Copy]() {
-        return new HistogramField(this.HistoOp.Copy());
+        let y = this.HistoOp;
+        let z = this.HistoOp["Copy"];
+        return new HistogramField(HistogramOperation.Duplicate(this.HistoOp));
     }
 }
\ No newline at end of file
diff --git a/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts b/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts
index 6291ec1fc..3e9145a1b 100644
--- a/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts
+++ b/src/client/northstar/dash-nodes/HistogramBinPrimitiveCollection.ts
@@ -198,8 +198,8 @@ export class HistogramBinPrimitiveCollection {
         var marginParams = new MarginAggregateParameters();
         marginParams.aggregateFunction = axis.AggregateFunction;
         var marginAggregateKey = ModelHelpers.CreateAggregateKey(this.histoOp.Schema!.distinctAttributeParameters, axis, this.histoResult, brush.brushIndex!, marginParams);
-        var marginResult = ModelHelpers.GetAggregateResult(bin, marginAggregateKey) as MarginAggregateResult;
-        return !marginResult ? 0 : marginResult.absolutMargin!;
+        let aggResult = ModelHelpers.GetAggregateResult(bin, marginAggregateKey);
+        return aggResult instanceof MarginAggregateResult && aggResult.absolutMargin ? aggResult.absolutMargin : 0;
     }
 
     private createBinPrimitive(barAxis: number, brush: Brush, marginRect: PIXIRectangle,
diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx
index ed556cf45..eb1ad69b7 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBox.tsx
@@ -17,9 +17,8 @@ import "./HistogramBox.scss";
 import { HistogramBoxPrimitives } from './HistogramBoxPrimitives';
 import { HistogramLabelPrimitives } from "./HistogramLabelPrimitives";
 import { StyleConstants } from "../utils/StyleContants";
-import { NumCast, Cast } from "../../../new_fields/Types";
-import { listSpec } from "../../../new_fields/Schema";
-import { Doc, DocListCast } from "../../../new_fields/Doc";
+import { Cast } from "../../../new_fields/Types";
+import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/RefField";
 
 
@@ -119,15 +118,16 @@ export class HistogramBox extends React.Component<FieldViewProps> {
                 if (this.HistoOp !== HistogramOperation.Empty) {
                     reaction(() => DocListCast(this.props.Document.linkedFromDocs), (docs) => this.HistoOp.Links.splice(0, this.HistoOp.Links.length, ...docs), { fireImmediately: true });
                     reaction(() => DocListCast(this.props.Document.brushingDocs).length,
-                        () => {
-                            let brushingDocs = DocListCast(this.props.Document.brushingDocs);
+                        async () => {
+                            let brushingDocs = await DocListCastAsync(this.props.Document.brushingDocs);
                             const proto = this.props.Document.proto;
-                            if (proto) {
-                                this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...brushingDocs.map((brush, i) => {
+                            if (proto && brushingDocs) {
+                                let mapped = brushingDocs.map((brush, i) => {
                                     brush.backgroundColor = StyleConstants.BRUSH_COLORS[i % StyleConstants.BRUSH_COLORS.length];
                                     let brushed = DocListCast(brush.brushingDocs);
                                     return { l: brush, b: brushed[0][Id] === proto[Id] ? brushed[1] : brushed[0] };
-                                }));
+                                });
+                                this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...mapped);
                             }
                         }, { fireImmediately: true });
                     reaction(() => this.createOperationParamsCache, () => this.HistoOp.Update(), { fireImmediately: true });
diff --git a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
index 721bf6a89..350987695 100644
--- a/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBoxPrimitives.tsx
@@ -11,9 +11,6 @@ import { StyleConstants } from "../../northstar/utils/StyleContants";
 import { HistogramBinPrimitiveCollection, HistogramBinPrimitive } from "./HistogramBinPrimitiveCollection";
 import { HistogramBox } from "./HistogramBox";
 import "./HistogramBoxPrimitives.scss";
-import { JSXElement } from "babel-types";
-import { Utils } from "../utils/Utils";
-import { all } from "bluebird";
 
 export interface HistogramPrimitivesProps {
     HistoBox: HistogramBox;
diff --git a/src/client/northstar/manager/Gateway.ts b/src/client/northstar/manager/Gateway.ts
index d26f2724f..c541cce6a 100644
--- a/src/client/northstar/manager/Gateway.ts
+++ b/src/client/northstar/manager/Gateway.ts
@@ -23,6 +23,18 @@ export class Gateway {
         }
     }
 
+    public async PostSchema(csvdata: string, schemaname: string): Promise<string> {
+        try {
+            const json = await this.MakePostJsonRequest("postSchema", { csv: csvdata, schema: schemaname });
+            // const cat = Catalog.fromJS(json);
+            // return cat;
+            return json;
+        }
+        catch (error) {
+            throw new Error("can not reach northstar's backend");
+        }
+    }
+
     public async GetSchema(pathname: string, schemaname: string): Promise<Catalog> {
         try {
             const json = await this.MakeGetRequest("schema", undefined, { path: pathname, schema: schemaname });
diff --git a/src/client/northstar/model/ModelHelpers.ts b/src/client/northstar/model/ModelHelpers.ts
index ac807b41f..80bb71224 100644
--- a/src/client/northstar/model/ModelHelpers.ts
+++ b/src/client/northstar/model/ModelHelpers.ts
@@ -31,7 +31,15 @@ export class ModelHelpers {
     }
 
     public static GetAggregateParametersIndex(histogramResult: HistogramResult, aggParameters?: AggregateParameters): number {
-        return ArrayUtil.IndexOfWithEqual(histogramResult.aggregateParameters!, aggParameters);
+        return Array.from(histogramResult.aggregateParameters!).findIndex((value, i, set) => {
+            if (set[i] instanceof CountAggregateParameters && value instanceof CountAggregateParameters)
+                return true;
+            if (set[i] instanceof MarginAggregateParameters && value instanceof MarginAggregateParameters)
+                return true;
+            if (set[i] instanceof SumAggregateParameters && value instanceof SumAggregateParameters)
+                return true;
+            return false;
+        });
     }
 
     public static GetAggregateParameter(distinctAttributeParameters: AttributeParameters | undefined, atm: AttributeTransformationModel): AggregateParameters | undefined {
diff --git a/src/client/northstar/model/idea/idea.ts b/src/client/northstar/model/idea/idea.ts
index 9d9d60678..c73a822c7 100644
--- a/src/client/northstar/model/idea/idea.ts
+++ b/src/client/northstar/model/idea/idea.ts
@@ -22,6 +22,9 @@ export abstract class AggregateParameters implements IAggregateParameters {
 
     protected _discriminator: string;
 
+    public Equals(other: Object): boolean {
+        return this == other;
+    }
     constructor(data?: IAggregateParameters) {
         if (data) {
             for (var property in data) {
@@ -204,6 +207,9 @@ export interface IAverageAggregateParameters extends ISingleDimensionAggregatePa
 export abstract class AttributeParameters implements IAttributeParameters {
     visualizationHints?: VisualizationHint[] | undefined;
     rawName?: string | undefined;
+    public Equals(other: Object): boolean {
+        return this == other;
+    }
 
     protected _discriminator: string;
 
diff --git a/src/client/northstar/operations/BaseOperation.ts b/src/client/northstar/operations/BaseOperation.ts
index c6d5f0a15..0d1361ebf 100644
--- a/src/client/northstar/operations/BaseOperation.ts
+++ b/src/client/northstar/operations/BaseOperation.ts
@@ -25,23 +25,6 @@ export abstract class BaseOperation {
 
     @computed
     public get FilterString(): string {
-
-        // let filterModels: FilterModel[] = [];
-        // return FilterModel.GetFilterModelsRecursive(this, new Set<GraphNode<BaseOperationViewModel, FilterLinkViewModel>>(), filterModels, true)
-        // if (this.OverridingFilters.length > 0) {
-        //     return "(" + this.OverridingFilters.filter(fm => fm !== null).map(fm => fm.ToPythonString()).join(" || ") + ")";
-        // }
-        // let rdg = MainManager.Instance.MainViewModel.FilterReverseDependencyGraph;
-        // let sliceModel = this.TypedViewModel.IncomingSliceModel;
-        // if (sliceModel !== null && sliceModel.Source !== null && instanceOfIBaseFilterProvider(sliceModel.Source) && rdg.has(sliceModel.Source)) {
-        //     let filterModels = sliceModel.Source.FilterModels.map(f => f);
-        //     return FilterModel.GetFilterModelsRecursive(rdg.get(sliceModel.Source), new Set<GraphNode<BaseOperationViewModel, FilterLinkViewModel>>(), filterModels, false);
-        // }
-
-        // if (rdg.has(this.TypedViewModel)) {
-        //     let filterModels = [];
-        //     return FilterModel.GetFilterModelsRecursive(rdg.get(this.TypedViewModel), new Set<GraphNode<BaseOperationViewModel, FilterLinkViewModel>>(), filterModels, true)
-        // }
         return "";
     }
 
diff --git a/src/client/northstar/operations/HistogramOperation.ts b/src/client/northstar/operations/HistogramOperation.ts
index 78b206bdc..74e23ea48 100644
--- a/src/client/northstar/operations/HistogramOperation.ts
+++ b/src/client/northstar/operations/HistogramOperation.ts
@@ -30,7 +30,7 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
     @observable public V: AttributeTransformationModel;
     @observable public SchemaName: string;
     @observable public QRange: QuantitativeBinRange | undefined;
-    @computed public get Schema() { return CurrentUserUtils.GetNorthstarSchema(this.SchemaName); }
+    public get Schema() { return CurrentUserUtils.GetNorthstarSchema(this.SchemaName); }
 
     constructor(schemaName: string, x: AttributeTransformationModel, y: AttributeTransformationModel, v: AttributeTransformationModel, normalized?: number) {
         super();
@@ -41,7 +41,11 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
         this.SchemaName = schemaName;
     }
 
-    Copy(): HistogramOperation {
+    public static Duplicate(op: HistogramOperation) {
+
+        return new HistogramOperation(op.SchemaName, op.X, op.Y, op.V, op.Normalization);
+    }
+    public Copy(): HistogramOperation {
         return new HistogramOperation(this.SchemaName, this.X, this.Y, this.V, this.Normalization);
     }
 
@@ -50,7 +54,7 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
     }
 
 
-    @computed public get FilterModels() {
+    public get FilterModels() {
         return this.BarFilterModels;
     }
     @action
@@ -71,9 +75,7 @@ export class HistogramOperation extends BaseOperation implements IBaseFilterCons
         return FilterModel.GetFilterModelsRecursive(this, new Set<IBaseFilterProvider>(), filterModels, true);
     }
 
-    @computed
     public get BrushString(): string[] {
-        trace();
         let brushes: string[] = [];
         this.BrushLinks.map(brushLink => {
             let brushHistogram = Cast(brushLink.b.data, HistogramField);
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 66205f8ca..385fc6ead 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -12,13 +12,6 @@ import { CurrentUserUtils } from '../../server/authentication/models/current_use
 import { RouteStore } from '../../server/RouteStore';
 import { emptyFunction, returnTrue, Utils, returnOne, returnZero } from '../../Utils';
 import { Docs } from '../documents/Documents';
-import { ColumnAttributeModel } from '../northstar/core/attribute/AttributeModel';
-import { AttributeTransformationModel } from '../northstar/core/attribute/AttributeTransformationModel';
-import { Gateway, NorthstarSettings } from '../northstar/manager/Gateway';
-import { AggregateFunction, Catalog } from '../northstar/model/idea/idea';
-import '../northstar/model/ModelExtensions';
-import { HistogramOperation } from '../northstar/operations/HistogramOperation';
-import '../northstar/utils/Extensions';
 import { SetupDrag, DragManager } from '../util/DragManager';
 import { Transform } from '../util/Transform';
 import { UndoManager } from '../util/UndoManager';
@@ -70,8 +63,6 @@ export class Main extends React.Component {
             }
         }
 
-        CurrentUserUtils.loadCurrentUser();
-
         library.add(faFont);
         library.add(faImage);
         library.add(faFilePdf);
@@ -84,15 +75,8 @@ export class Main extends React.Component {
         library.add(faFilm);
         library.add(faMusic);
         library.add(faTree);
-
         this.initEventListeners();
         this.initAuthenticationRouters();
-
-        // try {
-        //     this.initializeNorthstar();
-        // } catch (e) {
-
-        // }
     }
 
     componentDidMount() { window.onpopstate = this.onHistory; }
@@ -155,7 +139,7 @@ export class Main extends React.Component {
             // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
             setTimeout(() => {
                 this.openWorkspace(mainDoc);
-                let pendingDocument = Docs.SchemaDocument([], { title: "New Mobile Uploads" });
+                let pendingDocument = Docs.SchemaDocument(["title"], [], { title: "New Mobile Uploads" });
                 mainDoc.optionalRightCollection = pendingDocument;
             }, 0);
         }
@@ -229,7 +213,7 @@ export class Main extends React.Component {
 
         let addTextNode = action(() => Docs.TextDocument({ borderRounding: -1, width: 200, height: 200, title: "a text note" }));
         let addColNode = action(() => Docs.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
-        let addSchemaNode = action(() => Docs.SchemaDocument([], { width: 200, height: 200, title: "a schema collection" }));
+        let addSchemaNode = action(() => Docs.SchemaDocument(["title"], [], { width: 200, height: 200, title: "a schema collection" }));
         let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" }));
         // let addTreeNode = action(() => Docs.TreeDocument(this._northstarSchemas, { width: 250, height: 400, title: "northstar schemas", dropAction: "copy"  }));
         let addVideoNode = action(() => Docs.VideoDocument(videourl, { width: 200, title: "video node" }));
@@ -300,40 +284,6 @@ export class Main extends React.Component {
             </div>
         );
     }
-
-    // --------------- Northstar hooks ------------- /
-    private _northstarSchemas: Doc[] = [];
-
-    @action SetNorthstarCatalog(ctlog: Catalog) {
-        CurrentUserUtils.NorthstarDBCatalog = ctlog;
-        if (ctlog && ctlog.schemas) {
-            ctlog.schemas.map(schema => {
-                let schemaDocuments: Doc[] = [];
-                let attributesToBecomeDocs = CurrentUserUtils.GetAllNorthstarColumnAttributes(schema);
-                Promise.all(attributesToBecomeDocs.reduce((promises, attr) => {
-                    promises.push(DocServer.GetRefField(attr.displayName! + ".alias").then(action((field: Opt<Field>) => {
-                        if (field instanceof Doc) {
-                            schemaDocuments.push(field);
-                        } else {
-                            var atmod = new ColumnAttributeModel(attr);
-                            let histoOp = new HistogramOperation(schema.displayName!,
-                                new AttributeTransformationModel(atmod, AggregateFunction.None),
-                                new AttributeTransformationModel(atmod, AggregateFunction.Count),
-                                new AttributeTransformationModel(atmod, AggregateFunction.Count));
-                            schemaDocuments.push(Docs.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName! }));
-                        }
-                    })));
-                    return promises;
-                }, [] as Promise<void>[])).finally(() =>
-                    this._northstarSchemas.push(Docs.TreeDocument(schemaDocuments, { width: 50, height: 100, title: schema.displayName! })));
-            });
-        }
-    }
-    async initializeNorthstar(): Promise<void> {
-        const getEnvironment = await fetch("/assets/env.json", { redirect: "follow", method: "GET", credentials: "include" });
-        NorthstarSettings.Instance.UpdateEnvironment(await getEnvironment.json());
-        Gateway.Instance.ClearCatalog().then(async () => this.SetNorthstarCatalog(await Gateway.Instance.GetCatalog()));
-    }
 }
 
 (async () => {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 9ecccc559..f4ad5b357 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -20,11 +20,20 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { Opt, Field, Doc, DocListCastAsync, DocListCast } from "../../../new_fields/Doc";
-import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
+import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
 import { List } from "../../../new_fields/List";
 import { Id } from "../../../new_fields/RefField";
 import { isUndefined } from "typescript-collections/dist/lib/util";
+import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
+import { Gateway } from "../../northstar/manager/Gateway";
+import { DocServer } from "../../DocServer";
+import { ColumnAttributeModel } from "../../northstar/core/attribute/AttributeModel";
+import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
+import { AggregateFunction } from "../../northstar/model/idea/idea";
+import { AttributeTransformationModel } from "../../northstar/core/attribute/AttributeTransformationModel";
+import { Docs } from "../../documents/Documents";
+import { ContextMenu } from "../ContextMenu";
 
 
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
@@ -207,6 +216,32 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         }
     }
 
+    onContextMenu = (e: React.MouseEvent): void => {
+        if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+            ContextMenu.Instance.addItem({ description: "Make DB", event: this.makeDB });
+        }
+    }
+
+    @action
+    makeDB = async () => {
+        let csv: string = this.columns.reduce((val, col) => val + col + ",", "");
+        csv = csv.substr(0, csv.length - 1) + "\n";
+        let self = this;
+        DocListCast(this.props.Document.data).map(doc => {
+            csv += self.columns.reduce((val, col) => val + (doc[col] ? doc[col]!.toString() : "") + ",", "");
+            csv = csv.substr(0, csv.length - 1) + "\n";
+        })
+        csv.substring(0, csv.length - 1);
+        let dbName = StrCast(this.props.Document.title);
+        let res = await Gateway.Instance.PostSchema(csv, dbName);
+        if (self.props.CollectionView.props.addDocument) {
+            let schemaDoc = await Docs.DBDocument("https://www.cs.brown.edu/" + dbName, { title: dbName });
+            if (schemaDoc) {
+                self.props.CollectionView.props.addDocument(schemaDoc, false); 
+            }
+        }
+    }
+
     @action
     addColumn = () => {
         this.columns.push(this._newKeyName);
@@ -325,7 +360,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         const children = this.children;
         return (
             <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} onWheel={this.onWheel}
-                onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createTarget}>
+                onDrop={(e: React.DragEvent) => this.onDrop(e, {})} onContextMenu={this.onContextMenu} ref={this.createTarget}>
                 <div className="collectionSchemaView-tableContainer" style={{ width: `${this.tableWidth}px` }}>
                     <ReactTable data={children} page={0} pageSize={children.length} showPagination={false}
                         columns={this.columns.map(col => ({
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 24dea200e..be7cddca6 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -17,6 +17,9 @@ import { InkField, StrokeData } from "../../../../new_fields/InkField";
 import { List } from "../../../../new_fields/List";
 import { ImageField } from "../../../../new_fields/URLField";
 import { Template, Templates } from "../../Templates";
+import { Gateway } from "../../../northstar/manager/Gateway";
+import { DocServer } from "../../../DocServer";
+import { Id } from "../../../../new_fields/RefField";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -111,8 +114,8 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                         doc.title = i.toString();
                         docList.push(doc);
                     }
-                    let newCol = Docs.SchemaDocument(docList, { x: x, y: y, title: "-dropped table-", width: 300, height: 100 });
-                    newCol.proto!.schemaColumns = new List<string>([...(groupAttr ? ["_group"] : []), ...columns.filter(c => c)]);
+                    let newCol = Docs.SchemaDocument([...(groupAttr ? ["_group"] : []), ...columns.filter(c => c)], docList, { x: x, y: y, title: "droppedTable", width: 300, height: 100 });
+
                     this.props.addDocument(newCol, false);
                 }
             })();
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b7ad9249a..c97bcbd94 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -306,7 +306,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         cm.addItem({
             description: "Find aliases", event: async () => {
                 const aliases = await SearchUtil.GetAliasesOfDocument(this.props.Document);
-                CollectionDockingView.Instance.AddRightSplit(Docs.SchemaDocument(aliases, {}));
+                CollectionDockingView.Instance.AddRightSplit(Docs.SchemaDocument(["title"], aliases, {}));
             }
         });
         cm.addItem({ description: "Copy URL", event: () => Utils.CopyText(DocServer.prepend("/doc/" + this.props.Document[Id])) });
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 5f45d7bcc..5b63ac356 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -1,15 +1,21 @@
 import { computed, observable, action, runInAction } from "mobx";
 import * as rp from 'request-promise';
 import { Docs } from "../../../client/documents/Documents";
-import { Attribute, AttributeGroup, Catalog, Schema } from "../../../client/northstar/model/idea/idea";
+import { Attribute, AttributeGroup, Catalog, Schema, AggregateFunction } from "../../../client/northstar/model/idea/idea";
 import { ArrayUtil } from "../../../client/northstar/utils/ArrayUtil";
 import { RouteStore } from "../../RouteStore";
 import { DocServer } from "../../../client/DocServer";
-import { Doc } from "../../../new_fields/Doc";
+import { Doc, Opt, Field } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { CollectionViewType } from "../../../client/views/collections/CollectionBaseView";
 import { CollectionTreeView } from "../../../client/views/collections/CollectionTreeView";
 import { CollectionView } from "../../../client/views/collections/CollectionView";
+import { NorthstarSettings, Gateway } from "../../../client/northstar/manager/Gateway";
+import { AttributeTransformationModel } from "../../../client/northstar/core/attribute/AttributeTransformationModel";
+import { ColumnAttributeModel } from "../../../client/northstar/core/attribute/AttributeModel";
+import { HistogramOperation } from "../../../client/northstar/operations/HistogramOperation";
+import { Cast, PromiseValue } from "../../../new_fields/Types";
+import { listSpec } from "../../../new_fields/Schema";
 
 export class CurrentUserUtils {
     private static curr_email: string;
@@ -31,13 +37,13 @@ export class CurrentUserUtils {
         doc.title = this.email;
         doc.data = new List<Doc>();
         doc.excludeFromLibrary = true;
-        doc.optionalRightCollection = Docs.SchemaDocument([], { title: "Pending documents" });
+        doc.optionalRightCollection = Docs.SchemaDocument(["title"], [], { title: "Pending documents" });
         // doc.library = Docs.TreeDocument([doc], { title: `Library: ${CurrentUserUtils.email}` });
         // (doc.library as Doc).excludeFromLibrary = true;
         return doc;
     }
 
-    public static loadCurrentUser(): Promise<any> {
+    public static async loadCurrentUser(): Promise<any> {
         let userPromise = rp.get(DocServer.prepend(RouteStore.getCurrUser)).then(response => {
             if (response) {
                 let obj = JSON.parse(response);
@@ -47,7 +53,7 @@ export class CurrentUserUtils {
                 throw new Error("There should be a user! Why does Dash think there isn't one?");
             }
         });
-        let userDocPromise = rp.get(DocServer.prepend(RouteStore.getUserDocumentId)).then(id => {
+        let userDocPromise = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId)).then(id => {
             if (id) {
                 return DocServer.GetRefField(id).then(field =>
                     runInAction(() => this.user_document = field instanceof Doc ? field : this.createUserDocument(id)));
@@ -55,14 +61,63 @@ export class CurrentUserUtils {
                 throw new Error("There should be a user id! Why does Dash think there isn't one?");
             }
         });
+        try {
+            const getEnvironment = await fetch("/assets/env.json", { redirect: "follow", method: "GET", credentials: "include" });
+            NorthstarSettings.Instance.UpdateEnvironment(await getEnvironment.json());
+            await Gateway.Instance.ClearCatalog();
+            const extraSchemas = Cast(CurrentUserUtils.UserDocument.DBSchemas, listSpec("string"), []);
+            let extras = await Promise.all(extraSchemas.map(async sc => await Gateway.Instance.GetSchema("", sc)));
+            let catprom = CurrentUserUtils.SetNorthstarCatalog(await Gateway.Instance.GetCatalog(), extras);
+            if (catprom) await Promise.all(catprom);
+        } catch (e) {
+
+        }
         return Promise.all([userPromise, userDocPromise]);
     }
 
     /* Northstar catalog ... really just for testing so this should eventually go away */
+    // --------------- Northstar hooks ------------- /
+    static _northstarSchemas: Doc[] = [];
     @observable private static _northstarCatalog?: Catalog;
     @computed public static get NorthstarDBCatalog() { return this._northstarCatalog; }
+
+    @action static SetNorthstarCatalog(ctlog: Catalog, extras: Catalog[]) {
+        CurrentUserUtils.NorthstarDBCatalog = ctlog;
+        if (ctlog && ctlog.schemas) {
+            extras.map(ex => ctlog.schemas!.push(ex));
+            return ctlog.schemas.map(async schema => {
+                let schemaDocuments: Doc[] = [];
+                let attributesToBecomeDocs = CurrentUserUtils.GetAllNorthstarColumnAttributes(schema);
+                await Promise.all(attributesToBecomeDocs.reduce((promises, attr) => {
+                    promises.push(DocServer.GetRefField(attr.displayName! + ".alias").then(action((field: Opt<Field>) => {
+                        if (field instanceof Doc) {
+                            schemaDocuments.push(field);
+                        } else {
+                            var atmod = new ColumnAttributeModel(attr);
+                            let histoOp = new HistogramOperation(schema.displayName!,
+                                new AttributeTransformationModel(atmod, AggregateFunction.None),
+                                new AttributeTransformationModel(atmod, AggregateFunction.Count),
+                                new AttributeTransformationModel(atmod, AggregateFunction.Count));
+                            schemaDocuments.push(Docs.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName! }));
+                        }
+                    })));
+                    return promises;
+                }, [] as Promise<void>[]));
+                return CurrentUserUtils._northstarSchemas.push(Docs.TreeDocument(schemaDocuments, { width: 50, height: 100, title: schema.displayName! }));
+            });
+        }
+    }
     public static set NorthstarDBCatalog(ctlog: Catalog | undefined) { this._northstarCatalog = ctlog; }
 
+    public static AddNorthstarSchema(schema: Schema, schemaDoc: Doc) {
+        if (this._northstarCatalog && CurrentUserUtils._northstarSchemas) {
+            this._northstarCatalog.schemas!.push(schema);
+            CurrentUserUtils._northstarSchemas.push(schemaDoc);
+            let schemas = Cast(CurrentUserUtils.UserDocument.DBSchemas, listSpec("string"), []);
+            schemas.push(schema.displayName!);
+            CurrentUserUtils.UserDocument.DBSchemas = new List<string>(schemas);
+        }
+    }
     public static GetNorthstarSchema(name: string): Schema | undefined {
         return !this._northstarCatalog || !this._northstarCatalog.schemas ? undefined :
             ArrayUtil.FirstOrDefault<Schema>(this._northstarCatalog.schemas, (s: Schema) => s.displayName === name);
-- 
cgit v1.2.3-70-g09d2


From 8d03f27dc28e3d0ed8bb0a86339fec18ee56ef38 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 14 May 2019 19:07:31 -0400
Subject: fixed changing titles.

---
 src/client/views/DocumentDecorations.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 5aa3d804d..627bedde2 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -96,7 +96,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         this._downX = e.clientX;
         this._downY = e.clientY;
         e.stopPropagation();
-        this.onBackgroundDown(e);
         document.removeEventListener("pointermove", this.onTitleMove);
         document.removeEventListener("pointerup", this.onTitleUp);
         document.addEventListener("pointermove", this.onTitleMove);
-- 
cgit v1.2.3-70-g09d2


From 1ae0370e6a116404085f6864c8b644fcde80f460 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 14 May 2019 19:59:23 -0400
Subject: Added History module and ability to go back and forward when
 following links

---
 src/client/util/History.ts                         | 122 +++++++++++++++++++++
 src/client/views/Main.tsx                          |  19 +---
 .../views/collections/CollectionDockingView.tsx    |   2 -
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  36 +++++-
 src/new_fields/Doc.ts                              |   7 +-
 5 files changed, 159 insertions(+), 27 deletions(-)
 create mode 100644 src/client/util/History.ts

(limited to 'src')

diff --git a/src/client/util/History.ts b/src/client/util/History.ts
new file mode 100644
index 000000000..92d2b2b44
--- /dev/null
+++ b/src/client/util/History.ts
@@ -0,0 +1,122 @@
+import { Doc, Opt, Field } from "../../new_fields/Doc";
+import { DocServer } from "../DocServer";
+import { Main } from "../views/Main";
+import { RouteStore } from "../../server/RouteStore";
+
+export namespace HistoryUtil {
+    export interface DocInitializerList {
+        [key: string]: string | number;
+    }
+
+    export interface DocUrl {
+        type: "doc";
+        docId: string;
+        initializers: {
+            [docId: string]: DocInitializerList;
+        };
+    }
+
+    export type ParsedUrl = DocUrl;
+
+    // const handlers: ((state: ParsedUrl | null) => void)[] = [];
+    function onHistory(e: PopStateEvent) {
+        if (window.location.pathname !== RouteStore.home) {
+            const url = e.state as ParsedUrl || parseUrl(window.location.pathname);
+            if (url) {
+                switch (url.type) {
+                    case "doc":
+                        onDocUrl(url);
+                        break;
+                }
+            }
+        }
+        // for (const handler of handlers) {
+        //     handler(e.state);
+        // }
+    }
+
+    export function pushState(state: ParsedUrl) {
+        history.pushState(state, "", createUrl(state));
+    }
+
+    export function replaceState(state: ParsedUrl) {
+        history.replaceState(state, "", createUrl(state));
+    }
+
+    function copyState(state: ParsedUrl): ParsedUrl {
+        return JSON.parse(JSON.stringify(state));
+    }
+
+    export function getState(): ParsedUrl {
+        return copyState(history.state);
+    }
+
+    // export function addHandler(handler: (state: ParsedUrl | null) => void) {
+    //     handlers.push(handler);
+    // }
+
+    // export function removeHandler(handler: (state: ParsedUrl | null) => void) {
+    //     const index = handlers.indexOf(handler);
+    //     if (index !== -1) {
+    //         handlers.splice(index, 1);
+    //     }
+    // }
+
+    export function parseUrl(pathname: string): ParsedUrl | undefined {
+        let pathnameSplit = pathname.split("/");
+        if (pathnameSplit.length !== 2) {
+            return undefined;
+        }
+        const type = pathnameSplit[0];
+        const data = pathnameSplit[1];
+
+        if (type === "doc") {
+            const s = data.split("?");
+            if (s.length < 1 || s.length > 2) {
+                return undefined;
+            }
+            const docId = s[0];
+            const initializers = s.length === 2 ? JSON.parse(decodeURIComponent(s[1])) : {};
+            return {
+                type: "doc",
+                docId,
+                initializers
+            };
+        }
+
+        return undefined;
+    }
+
+    export function createUrl(params: ParsedUrl): string {
+        let baseUrl = DocServer.prepend(`/${params.type}`);
+        switch (params.type) {
+            case "doc":
+                const initializers = encodeURIComponent(JSON.stringify(params.initializers));
+                const id = params.docId;
+                let url = baseUrl + `/${id}`;
+                if (Object.keys(params.initializers).length) {
+                    url += `?${initializers}`;
+                }
+                return url;
+        }
+        return "";
+    }
+
+    export async function initDoc(id: string, initializer: DocInitializerList) {
+        const doc = await DocServer.GetRefField(id);
+        if (!(doc instanceof Doc)) {
+            return;
+        }
+        Doc.assign(doc, initializer);
+    }
+
+    async function onDocUrl(url: DocUrl) {
+        const field = await DocServer.GetRefField(url.docId);
+        await Promise.all(Object.keys(url.initializers).map(id => initDoc(id, url.initializers[id])));
+        if (field instanceof Doc) {
+            Main.Instance.openWorkspace(field, true);
+        }
+    }
+
+    window.onpopstate = onHistory;
+}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 66205f8ca..55252ab1d 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -38,6 +38,8 @@ import { Cast, FieldValue, StrCast } from '../../new_fields/Types';
 import { DocServer } from '../DocServer';
 import { listSpec } from '../../new_fields/Schema';
 import { Id } from '../../new_fields/RefField';
+import { HistoryUtil } from '../util/History';
+
 
 @observer
 export class Main extends React.Component {
@@ -95,21 +97,6 @@ export class Main extends React.Component {
         // }
     }
 
-    componentDidMount() { window.onpopstate = this.onHistory; }
-
-    componentWillUnmount() { window.onpopstate = null; }
-
-    onHistory = () => {
-        if (window.location.pathname !== RouteStore.home) {
-            let pathname = window.location.pathname.split("/");
-            DocServer.GetRefField(pathname[pathname.length - 1]).then(action((field: Opt<Field>) => {
-                if (field instanceof Doc) {
-                    this.openWorkspace(field, true);
-                }
-            }));
-        }
-    }
-
     initEventListeners = () => {
         // window.addEventListener("pointermove", (e) => this.reportLocation(e))
         window.addEventListener("drop", (e) => e.preventDefault(), false); // drop event handler
@@ -165,7 +152,7 @@ export class Main extends React.Component {
     openWorkspace = async (doc: Doc, fromHistory = false) => {
         CurrentUserUtils.MainDocId = doc[Id];
         this.mainContainer = doc;
-        fromHistory || window.history.pushState(null, StrCast(doc.title), "/doc/" + doc[Id]);
+        fromHistory || HistoryUtil.pushState({ type: "doc", docId: doc[Id], initializers: {} });
         const col = await Cast(CurrentUserUtils.UserDocument.optionalRightCollection, Doc);
         // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized)
         setTimeout(async () => {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 6651a834d..58f1e33a1 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -190,7 +190,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     }
     reactionDisposer?: Lambda;
     componentDidMount: () => void = () => {
-        console.log("Docking mount");
         if (this._containerRef.current) {
             this.reactionDisposer = reaction(
                 () => StrCast(this.props.Document.dockingConfig),
@@ -207,7 +206,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         }
     }
     componentWillUnmount: () => void = () => {
-        console.log("Docking unmount");
         try {
             this._goldenLayout.unbind('itemDropped', this.itemDropped);
             this._goldenLayout.unbind('tabCreated', this.tabCreated);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index c36c708db..e60bb2fb2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -24,6 +24,7 @@ import { FieldValue, Cast, NumCast } from "../../../../new_fields/Types";
 import { pageSchema } from "../../nodes/ImageBox";
 import { Id } from "../../../../new_fields/RefField";
 import { InkField, StrokeData } from "../../../../new_fields/InkField";
+import { HistoryUtil } from "../../../util/History";
 
 export const panZoomSchema = createSchema({
     panX: "number",
@@ -219,6 +220,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 
     @action
     setPan(panX: number, panY: number) {
+        this.panDisposer && clearTimeout(this.panDisposer);
+        this.props.Document.panTransformType = "None";
         var scale = this.getLocalTransform().inverse().Scale;
         const newPanX = Math.min((1 - 1 / scale) * this.nativeWidth, Math.max(0, panX));
         const newPanY = Math.min((1 - 1 / scale) * this.nativeHeight, Math.max(0, panY));
@@ -245,16 +248,37 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         doc.zIndex = docs.length + 1;
     }
 
+    panDisposer?: NodeJS.Timeout;
     focusDocument = (doc: Doc) => {
+        const panX = this.Document.panX;
+        const panY = this.Document.panY;
+        const id = this.Document[Id];
+        const state = HistoryUtil.getState();
+        // TODO This technically isn't correct if type !== "doc", as 
+        // currently nothing is done, but we should probably push a new state
+        if (state.type === "doc" && panX !== undefined && panY !== undefined) {
+            const init = state.initializers[id];
+            if (!init) {
+                state.initializers[id] = {
+                    panX, panY
+                };
+                HistoryUtil.pushState(state);
+            } else if (init.panX !== panX || init.panY !== panY) {
+                init.panX = panX;
+                init.panY = panY;
+                HistoryUtil.pushState(state);
+            }
+        }
         SelectionManager.DeselectAll();
+        const newPanX = NumCast(doc.x) + NumCast(doc.width) / 2;
+        const newPanY = NumCast(doc.y) + NumCast(doc.height) / 2;
+        const newState = HistoryUtil.getState();
+        newState.initializers[id] = { panX: newPanX, panY: newPanY };
+        HistoryUtil.pushState(newState);
+        this.setPan(newPanX, newPanY);
         this.props.Document.panTransformType = "Ease";
-        this.setPan(
-            NumCast(doc.x) + NumCast(doc.width) / 2,
-            NumCast(doc.y) + NumCast(doc.height) / 2);
         this.props.focus(this.props.Document);
-        if (this.props.Document.panTransformType === "Ease") {
-            setTimeout(() => this.props.Document.panTransformType = "None", 2000);  // wait 3 seconds, then reset to false
-        }
+        this.panDisposer = setTimeout(() => this.props.Document.panTransformType = "None", 2000);  // wait 3 seconds, then reset to false
     }
 
 
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 89901490d..d6043ef7a 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -159,9 +159,10 @@ export namespace Doc {
         for (const key in fields) {
             if (fields.hasOwnProperty(key)) {
                 const value = fields[key];
-                if (value !== undefined) {
-                    doc[key] = value;
-                }
+                // Do we want to filter out undefineds?
+                // if (value !== undefined) {
+                doc[key] = value;
+                // }
             }
         }
         return doc;
-- 
cgit v1.2.3-70-g09d2


From 0b677567dce5673bc45f08704485901801c90646 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 14 May 2019 22:46:08 -0400
Subject: fixed following links to video frames

---
 src/client/util/DocumentManager.ts                 | 12 ++---
 .../views/collections/CollectionBaseView.tsx       |  2 +-
 .../views/collections/CollectionSchemaView.scss    |  2 +-
 .../views/collections/CollectionVideoView.tsx      | 51 +++++++--------------
 src/client/views/collections/CollectionView.tsx    |  2 -
 src/client/views/nodes/KeyValuePair.scss           |  2 +-
 src/client/views/nodes/PDFBox.tsx                  |  7 +--
 src/client/views/nodes/VideoBox.scss               |  6 ++-
 src/client/views/nodes/VideoBox.tsx                | 53 ++++++++++++++++++----
 9 files changed, 76 insertions(+), 61 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 49c5d8c19..51f5fbe9f 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -111,19 +111,19 @@ export class DocumentManager {
 
     @undoBatch
     public jumpToDocument = async (doc: Doc): Promise<void> => {
+        const page = NumCast(doc.page, undefined);
+        const contextDoc = await Cast(doc.annotationOn, Doc);
+        if (contextDoc) {
+            const curPage = NumCast(contextDoc.curPage, page);
+            if (page !== curPage) contextDoc.curPage = page;
+        }
         let docView = DocumentManager.Instance.getDocumentView(doc);
         if (docView) {
             docView.props.focus(docView.props.Document);
         } else {
-            const contextDoc = await Cast(doc.annotationOn, Doc);
             if (!contextDoc) {
                 CollectionDockingView.Instance.AddRightSplit(Doc.MakeDelegate(doc));
             } else {
-                const page = NumCast(doc.page, undefined);
-                const curPage = NumCast(contextDoc.curPage, undefined);
-                if (page !== curPage) {
-                    contextDoc.curPage = page;
-                }
                 let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
                 if (contextView) {
                     contextDoc.panTransformType = "Ease";
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 645296d27..31bdf213e 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -87,7 +87,7 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
     @action.bound
     addDocument(doc: Doc, allowDuplicates: boolean = false): boolean {
         let props = this.props;
-        var curPage = Cast(props.Document.curPage, "number", -1);
+        var curPage = NumCast(props.Document.curPage, -1);
         Doc.SetOnPrototype(doc, "page", curPage);
         if (curPage >= 0) {
             Doc.SetOnPrototype(doc, "annotationOn", props.Document);
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index b9ed99155..5e9d2ac67 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -127,7 +127,7 @@
                 max-width: 100%;
                 height: 100%;
             }
-            .videobox-cont {
+            .videoBox-cont {
                 object-fit: contain;
                 width: auto;
                 height: 100%;
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index cb3fd1ba4..16121bb1b 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -9,27 +9,26 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import { emptyFunction } from "../../../Utils";
 import { Id } from "../../../new_fields/RefField";
 import { VideoBox } from "../nodes/VideoBox";
+import { NumCast } from "../../../new_fields/Types";
 
 
 @observer
 export class CollectionVideoView extends React.Component<FieldViewProps> {
-    private _videoBox: VideoBox | undefined = undefined;
-    @observable _playTimer?: NodeJS.Timeout = undefined;
-
-    @observable _currentTimecode: number = 0;
+    private _videoBox?: VideoBox;
 
     public static LayoutString(fieldKey: string = "data") {
         return FieldView.LayoutString(CollectionVideoView, fieldKey);
     }
     private get uIButtons() {
         let scaling = Math.min(1.8, this.props.ScreenToLocalTransform().Scale);
+        let curTime = NumCast(this.props.Document.curPage);
         return ([
             <div className="collectionVideoView-time" key="time" onPointerDown={this.onResetDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
-                <span>{"" + Math.round(this._currentTimecode)}</span>
-                <span style={{ fontSize: 8 }}>{" " + Math.round((this._currentTimecode - Math.trunc(this._currentTimecode)) * 100)}</span>
+                <span>{"" + Math.round(curTime)}</span>
+                <span style={{ fontSize: 8 }}>{" " + Math.round((curTime - Math.trunc(curTime)) * 100)}</span>
             </div>,
             <div className="collectionVideoView-play" key="play" onPointerDown={this.onPlayDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
-                {this._playTimer ? "\"" : ">"}
+                {this._videoBox && this._videoBox.Playing ? "\"" : ">"}
             </div>,
             <div className="collectionVideoView-full" key="full" onPointerDown={this.onFullDown} style={{ transform: `scale(${scaling}, ${scaling})` }}>
                 F
@@ -37,37 +36,21 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
         ]);
     }
 
-    @action
-    updateTimecode = () => {
-        if (this._videoBox && this._videoBox.player) {
-            this._currentTimecode = this._videoBox.player.currentTime;
-            this.props.Document.curPage = Math.round(this._currentTimecode);
-        }
-    }
-
-    componentDidMount() { this.updateTimecode(); }
-
-    componentWillUnmount() { if (this._playTimer) clearInterval(this._playTimer); }
-
     @action
     onPlayDown = () => {
         if (this._videoBox && this._videoBox.player) {
-            if (this._videoBox.player.paused) {
-                this._videoBox.player.play();
-                if (!this._playTimer) this._playTimer = setInterval(this.updateTimecode, 1000);
+            if (this._videoBox.Playing) {
+                this._videoBox.Pause();
             } else {
-                this._videoBox.player.pause();
-                if (this._playTimer) clearInterval(this._playTimer);
-                this._playTimer = undefined;
-
+                this._videoBox.Play();
             }
         }
     }
 
     @action
     onFullDown = (e: React.PointerEvent) => {
-        if (this._videoBox && this._videoBox.player) {
-            this._videoBox.player.requestFullscreen();
+        if (this._videoBox) {
+            this._videoBox.FullScreen();
             e.stopPropagation();
             e.preventDefault();
         }
@@ -75,12 +58,9 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
 
     @action
     onResetDown = () => {
-        if (this._videoBox && this._videoBox.player) {
-            this._videoBox.player.pause();
-            this._videoBox.player.currentTime = 0;
-            if (this._playTimer) clearInterval(this._playTimer);
-            this._playTimer = undefined;
-            this.updateTimecode();
+        if (this._videoBox) {
+            this._videoBox.Pause();
+            this.props.Document.curPage = 0;
         }
     }
 
@@ -90,7 +70,7 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
         }
     }
 
-    setVideoBox = (player: VideoBox) => { this._videoBox = player; };
+    setVideoBox = (videoBox: VideoBox) => { this._videoBox = videoBox; };
 
     private subView = (_type: CollectionViewType, renderProps: CollectionRenderProps) => {
         let props = { ...this.props, ...renderProps };
@@ -101,6 +81,7 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
     }
 
     render() {
+        trace();
         return (
             <CollectionBaseView {...this.props} className="collectionVideoView-cont" onContextMenu={this.onContextMenu}>
                 {this.subView}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 8c1442d38..55fd2a284 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -9,9 +9,7 @@ import { ContextMenu } from '../ContextMenu';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
 import { observer } from 'mobx-react';
 import { undoBatch } from '../../util/UndoManager';
-import { trace } from 'mobx';
 import { Id } from '../../../new_fields/RefField';
-import { Main } from '../Main';
 
 @observer
 export class CollectionView extends React.Component<FieldViewProps> {
diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss
index 4f305dc91..a1c5d5537 100644
--- a/src/client/views/nodes/KeyValuePair.scss
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -30,7 +30,7 @@
         max-height: 36px;
         width: auto;
     }
-    .videobox-cont{
+    .videoBox-cont{
         width: auto; 
         max-height: 36px; 
     }
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 6cbf066ca..14fe2df80 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -58,7 +58,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     @observable private _renderAsSvg = true;
     @observable private _alt = false;
 
-    private _reactionDisposer: Opt<IReactionDisposer>;
+    private _reactionDisposer?: IReactionDisposer;
 
     @observable private _perPageInfo: Object[] = []; //stores pageInfo
     @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno
@@ -84,9 +84,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     }
 
     componentWillUnmount() {
-        if (this._reactionDisposer) {
-            this._reactionDisposer();
-        }
+        if (this._reactionDisposer) this._reactionDisposer();
     }
 
     /**
@@ -338,7 +336,6 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     @action onKeyDown = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = true);
     @action onKeyUp = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = false);
     render() {
-        trace();
         let classname = "pdfBox-cont"; // + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
         return (
             <div className={classname} tabIndex={0} ref={this._mainDiv} onPointerDown={this.onPointerDown} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} >
diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 76bbeb37c..35db64cf4 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -1,4 +1,8 @@
-.videobox-cont{
+.videoBox-cont, .videoBox-cont-fullScreen{
     width: 100%; 
     height: Auto; 
+}
+
+.videoBox-cont-fullScreen {
+    pointer-events: all;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 740d4cc1b..96dc884c8 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -3,16 +3,15 @@ import { observer } from "mobx-react";
 import { FieldView, FieldViewProps } from './FieldView';
 import * as rp from "request-promise";
 import "./VideoBox.scss";
-import { action, computed, trace } from "mobx";
+import { action, IReactionDisposer, reaction, observable } from "mobx";
 import { DocComponent } from "../DocComponent";
 import { positionSchema } from "./DocumentView";
 import { makeInterface } from "../../../new_fields/Schema";
 import { pageSchema } from "./ImageBox";
-import { Cast, FieldValue, NumCast, ToConstructor, ListSpec } from "../../../new_fields/Types";
+import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
 import { VideoField } from "../../../new_fields/URLField";
 import Measure from "react-measure";
 import "./VideoBox.scss";
-import { Field, FieldResult, Opt } from "../../../new_fields/Doc";
 import { RouteStore } from "../../../server/RouteStore";
 import { DocServer } from "../../DocServer";
 
@@ -21,10 +20,12 @@ const VideoDocument = makeInterface(positionSchema, pageSchema);
 
 @observer
 export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoDocument) {
-
+    private _reactionDisposer?: IReactionDisposer;
     private _videoRef: HTMLVideoElement | null = null;
     private _loaded: boolean = false;
-    private get initialTimecode() { return FieldValue(this.Document.curPage, -1); }
+    @observable _playTimer?: NodeJS.Timeout = undefined;
+    @observable _fullScreen = false;
+    @observable public Playing: boolean = false;
     public static LayoutString() { return FieldView.LayoutString(VideoBox); }
 
     public get player(): HTMLVideoElement | undefined {
@@ -48,19 +49,50 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         }
     }
 
+    @action public Play() {
+        this.Playing = true;
+        if (this.player) this.player.play();
+        if (!this._playTimer) this._playTimer = setInterval(this.updateTimecode, 1000);
+    }
+
+    @action public Pause() {
+        this.Playing = false;
+        if (this.player) this.player.pause();
+        if (this._playTimer) {
+            clearInterval(this._playTimer);
+            this._playTimer = undefined;
+        }
+    }
+
+    @action public FullScreen() {
+        this._fullScreen = true;
+        this.player && this.player.requestFullscreen();
+    }
+
+    @action
+    updateTimecode = () => this.player && (this.props.Document.curPage = this.player.currentTime);
+
     componentDidMount() {
         if (this.props.setVideoBox) this.props.setVideoBox(this);
     }
+    componentWillUnmount() {
+        this.Pause();
+        if (this._reactionDisposer) this._reactionDisposer();
+    }
 
     @action
     setVideoRef = (vref: HTMLVideoElement | null) => {
         this._videoRef = vref;
-        if (this.initialTimecode >= 0 && vref) {
-            vref.currentTime = this.initialTimecode;
+        if (vref) {
+            vref.onfullscreenchange = action((e) => this._fullScreen = vref.webkitDisplayingFullscreen);
+            if (this._reactionDisposer) this._reactionDisposer();
+            this._reactionDisposer = reaction(() => this.props.Document.curPage, () =>
+                vref.currentTime = NumCast(this.props.Document.curPage, 0), { fireImmediately: true });
         }
     }
     videoContent(path: string) {
-        return <video className="videobox-cont" ref={this.setVideoRef}>
+        let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : "");
+        return <video className={`${style}`} ref={this.setVideoRef} onPointerDown={this.onPointerDown}>
             <source src={path} type="video/mp4" />
             Not supported.
         </video>;
@@ -100,7 +132,10 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
             }
         })
     }
-
+    onPointerDown = (e: React.PointerEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }
 
     render() {
         let field = Cast(this.Document[this.props.fieldKey], VideoField);
-- 
cgit v1.2.3-70-g09d2


From 75496b6ef50206f78e23ce998b7c932d06f23239 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 14 May 2019 23:19:54 -0400
Subject: changed Make Button to work with links

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 2a041bf70..2d4900509 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -13,6 +13,7 @@ import { Doc, DocListCastAsync, DocListCast, } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { UndoManager } from "../../util/UndoManager";
+import { DocumentManager } from "../../util/DocumentManager";
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 }
@@ -181,7 +182,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 let subBulletDocs = await DocListCastAsync(this.props.Document.subBulletDocs);
                 let maximizedDocs = await DocListCastAsync(this.props.Document.maximizedDocs);
                 let summarizedDocs = await DocListCastAsync(this.props.Document.summarizedDocs);
-                let expandedDocs = [...(subBulletDocs ? subBulletDocs : []), ...(maximizedDocs ? maximizedDocs : []), ...(summarizedDocs ? summarizedDocs : [])];
+                let linkedToDocs = await DocListCastAsync(this.props.Document.linkedToDocs);
+                let linkedFromDocs = await DocListCastAsync(this.props.Document.linkedFromDocs);
+                let expandedDocs = [...(subBulletDocs ? subBulletDocs : []),
+                ...(maximizedDocs ? maximizedDocs : []),
+                ...(summarizedDocs ? summarizedDocs : []),];
                 if (expandedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
                     if ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight)) {
                         let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
@@ -195,10 +200,16 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                             });
                         }
                     } else {
-                        this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(await maxDoc, false));
+                        this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(maxDoc, false));
                         this.toggleIcon(expandedDocs);
                     }
                 }
+                let linkedDocs = [
+                    ...(linkedFromDocs ? linkedFromDocs.map(l => l.linkedFrom as Doc) : []),
+                    ...(linkedToDocs ? linkedToDocs.map(l => l.linkedTo as Doc) : [])];
+                if (linkedDocs) {
+                    DocumentManager.Instance.jumpToDocument(linkedDocs[0]);
+                }
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2


From 4ed116991b86e4667fd78eb9ea034e3a9cc75a3e Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 15 May 2019 00:42:35 -0400
Subject: small fixes to start allowing trails of links.

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 10 +++++-----
 src/client/views/nodes/DocumentView.tsx                   |  4 ++--
 src/client/views/nodes/FormattedTextBox.tsx               |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 2d4900509..fc1dc2b1e 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -204,11 +204,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                         this.toggleIcon(expandedDocs);
                     }
                 }
-                let linkedDocs = [
-                    ...(linkedFromDocs ? linkedFromDocs.map(l => l.linkedFrom as Doc) : []),
-                    ...(linkedToDocs ? linkedToDocs.map(l => l.linkedTo as Doc) : [])];
-                if (linkedDocs) {
-                    DocumentManager.Instance.jumpToDocument(linkedDocs[0]);
+                let linkedFwdDocs = [
+                    linkedToDocs ? linkedToDocs[0].linkedTo as Doc : linkedFromDocs ? linkedFromDocs[0].linkedFrom as Doc : expandedDocs[0],
+                    linkedFromDocs ? linkedFromDocs[0].linkedFrom as Doc : linkedToDocs ? linkedToDocs[0].linkedTo as Doc : expandedDocs[0]];
+                if (linkedFwdDocs) {
+                    DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0]);
                 }
             }
         }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c97bcbd94..b88d18046 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -221,8 +221,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document;
         doc.isButton = !BoolCast(doc.isButton, false);
         if (doc.isButton && !doc.nativeWidth) {
-            doc.nativeWidth = doc[WidthSym]();
-            doc.nativeHeight = doc[HeightSym]();
+            doc.nativeWidth = this.props.Document[WidthSym]();
+            doc.nativeHeight = this.props.Document[HeightSym]();
         }
     }
     fullScreenClicked = (e: React.MouseEvent): void => {
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 7ebc31b0a..cb09ad42c 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -229,7 +229,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             if (e.target && (e.target as any).href) {
                 let href = (e.target as any).href;
                 if (href.indexOf(DocServer.prepend("/doc/")) === 0) {
-                    let docid = href.replace(DocServer.prepend("/doc/"), "");
+                    let docid = href.replace(DocServer.prepend("/doc/"), "").split("%")[0];
                     DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
                         if (f instanceof Doc) {
                             if (DocumentManager.Instance.getDocumentView(f))
-- 
cgit v1.2.3-70-g09d2


From 89556cce212e8d8d2678e628f3bba5ca1768c902 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 15 May 2019 00:53:40 -0400
Subject: tweaks.

---
 .../collectionFreeForm/CollectionFreeFormView.tsx    | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e60bb2fb2..eaa91fd74 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -20,7 +20,7 @@ import React = require("react");
 import v5 = require("uuid/v5");
 import { createSchema, makeInterface, listSpec } from "../../../../new_fields/Schema";
 import { Doc, WidthSym, HeightSym } from "../../../../new_fields/Doc";
-import { FieldValue, Cast, NumCast } from "../../../../new_fields/Types";
+import { FieldValue, Cast, NumCast, BoolCast } from "../../../../new_fields/Types";
 import { pageSchema } from "../../nodes/ImageBox";
 import { Id } from "../../../../new_fields/RefField";
 import { InkField, StrokeData } from "../../../../new_fields/InkField";
@@ -44,16 +44,16 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     private get _pwidth() { return this.props.PanelWidth(); }
     private get _pheight() { return this.props.PanelHeight(); }
 
-    @computed get nativeWidth() { return NumCast(this.Document.nativeWidth, 0); }
-    @computed get nativeHeight() { return NumCast(this.Document.nativeHeight, 0); }
+    @computed get nativeWidth() { return this.Document.nativeWidth || 0; }
+    @computed get nativeHeight() { return this.Document.nativeHeight || 0; }
     private get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; }
     private get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; }
-    private panX = () => FieldValue(this.Document.panX, 0);
-    private panY = () => FieldValue(this.Document.panY, 0);
-    private zoomScaling = () => FieldValue(this.Document.scale, 1);
+    private panX = () => this.Document.panX || 0;
+    private panY = () => this.Document.panY || 0;
+    private zoomScaling = () => this.Document.scale || 1;
     private centeringShiftX = () => !this.nativeWidth ? this._pwidth / 2 : 0;  // shift so pan position is at center of window for non-overlay collections
     private centeringShiftY = () => !this.nativeHeight ? this._pheight / 2 : 0;// shift so pan position is at center of window for non-overlay collections
-    private getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.borderWidth, -this.borderWidth).translate(-this.centeringShiftX(), -this.centeringShiftY()).transform(this.getLocalTransform());
+    private getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.borderWidth + 1, -this.borderWidth + 1).translate(-this.centeringShiftX(), -this.centeringShiftY()).transform(this.getLocalTransform());
     private getContainerTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.borderWidth, -this.borderWidth);
     private getLocalTransform = (): Transform => Transform.Identity().scale(1 / this.zoomScaling()).translate(this.panX(), this.panY());
     private addLiveTextBox = (newBox: Doc) => {
@@ -134,8 +134,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     @action
     onPointerMove = (e: PointerEvent): void => {
         if (!e.cancelBubble) {
-            let x = NumCast(this.props.Document.panX);
-            let y = NumCast(this.props.Document.panY);
+            let x = this.props.Document.panX || 0;
+            let y = this.props.Document.panY || 0;
             let docs = this.children || [];
             let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
             if (!this.isAnnotationOverlay) {
@@ -310,7 +310,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             if (!(doc instanceof Doc)) return prev;
             var page = NumCast(doc.page, -1);
             if (page === curPage || page === -1) {
-                let minim = Cast(doc.isMinimized, "boolean");
+                let minim = BoolCast(doc.isMinimized, false);
                 if (minim === undefined || !minim) {
                     prev.push(<CollectionFreeFormDocumentView key={doc[Id]} {...this.getDocumentViewProps(doc)} />);
                 }
-- 
cgit v1.2.3-70-g09d2


From dae85deb62168cbfae4557aa8632896592d71cf9 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 15 May 2019 09:10:41 -0400
Subject: set hover highlight for search results

---
 src/client/views/SearchItem.tsx                           | 12 +++++++++++-
 src/client/views/collections/CollectionTreeView.tsx       |  2 +-
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx |  4 +++-
 src/new_fields/Doc.ts                                     |  2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 0da0bdae8..01c7316d6 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -40,6 +40,14 @@ export class SearchItem extends React.Component<SearchProps> {
                             faCaretUp;
         return <FontAwesomeIcon icon={button} className="documentView-minimizedIcon" />;
     }
+    onPointerEnter = (e: React.PointerEvent) => {
+        this.props.doc.libraryBrush = true;
+        Doc.SetOnPrototype(this.props.doc, "protoBrush", true);
+    }
+    onPointerLeave = (e: React.PointerEvent) => {
+        this.props.doc.libraryBrush = false;
+        Doc.SetOnPrototype(this.props.doc, "protoBrush", false);
+    }
 
     collectionRef = React.createRef<HTMLDivElement>();
     startDocDrag = () => {
@@ -53,7 +61,9 @@ export class SearchItem extends React.Component<SearchProps> {
     }
     render() {
         return (
-            <div className="search-item" ref={this.collectionRef} id="result" onClick={this.onClick} onPointerDown={SetupDrag(this.collectionRef, this.startDocDrag)} >
+            <div className="search-item" ref={this.collectionRef} id="result"
+                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
+                onClick={this.onClick} onPointerDown={SetupDrag(this.collectionRef, this.startDocDrag)} >
                 <div className="search-title" id="result" >title: {this.props.doc.title}</div>
                 {/* <div className="search-type" id="result" >Type: {this.props.doc.layout}</div> */}
                 {/* <div className="search-type" >{SearchItem.DocumentIcon(this.layout)}</div> */}
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index d22418b2c..70c09d97c 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -130,7 +130,7 @@ class TreeView extends React.Component<TreeViewProps> {
             </div>);
         return (
             <div className="docContainer" ref={reference} onPointerDown={onItemDown} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
-                style={{ background: BoolCast(this.props.document.libraryBrush, false) ? "#06121212" : "0" }}
+                style={{ background: BoolCast(this.props.document.protoBrush, false) ? "#06123232" : BoolCast(this.props.document.libraryBrush, false) ? "#06121212" : "0" }}
                 onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
                 {editableView(StrCast(this.props.document.title))}
                 {openRight}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index fc1dc2b1e..925945b17 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -247,7 +247,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 style={{
                     outlineColor: "black",
                     outlineStyle: "dashed",
-                    outlineWidth: BoolCast(this.props.Document.libraryBrush, false) ? `${0.5 / this.contentScaling()}px` : "0px",
+                    outlineWidth:
+                        BoolCast(this.props.Document.protoBrush, false) ? `${1 / this.contentScaling()}px` :
+                            BoolCast(this.props.Document.libraryBrush, false) ? `${0.5 / this.contentScaling()}px` : "0px",
                     opacity: zoomFade,
                     borderRadius: `${this.borderRounding()}px`,
                     transformOrigin: "left top",
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index d6043ef7a..2ae816da4 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -140,7 +140,7 @@ export namespace Doc {
         return Cast(Get(doc, key, ignoreProto), ctor) as FieldResult<T>;
     }
     export async function SetOnPrototype(doc: Doc, key: string, value: Field) {
-        const proto = Object.getOwnPropertyNames(doc).indexOf("isProto") == -1 ? doc.proto : doc;
+        const proto = Object.getOwnPropertyNames(doc).indexOf("isPrototype") == -1 ? doc.proto : doc;
 
         if (proto) {
             proto[key] = value;
-- 
cgit v1.2.3-70-g09d2


From d79d721baa25947dfbbd17eda173835d9ae93fa6 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 15 May 2019 15:05:57 -0400
Subject: several smaller fixes.

---
 src/client/views/DocumentDecorations.tsx           | 30 +++++++------
 .../views/collections/ParentDocumentSelector.tsx   |  2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx | 17 ++-----
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 52 ++++++++++++----------
 src/client/views/nodes/DocumentView.tsx            |  8 ++--
 src/client/views/nodes/FormattedTextBox.tsx        |  2 +-
 src/client/views/nodes/IconBox.scss                |  4 +-
 src/client/views/nodes/IconBox.tsx                 | 27 ++++++++---
 src/new_fields/List.ts                             | 10 +++++
 9 files changed, 87 insertions(+), 65 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 627bedde2..8d85f7e2c 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -252,18 +252,20 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             if (!this._removeIcon) {
                 if (selectedDocs.length === 1)
                     this.getIconDoc(selectedDocs[0]).then(icon => selectedDocs[0].props.toggleMinimized());
-                else {
-                    let docViews = SelectionManager.ViewsSortedVertically();
-                    let topDocView = docViews[0];
-                    let ind = topDocView.templates.indexOf(Templates.Bullet.Layout);
-                    if (ind !== -1) {
-                        topDocView.templates.splice(ind, 1);
-                        topDocView.props.Document.subBulletDocs = undefined;
-                    } else {
-                        topDocView.addTemplate(Templates.Bullet);
-                        topDocView.props.Document.subBulletDocs = new List<Doc>(docViews.filter(v => v !== topDocView).map(v => v.props.Document));
+                else
+                    if (Math.abs(e.pageX - this._downX) < Utils.DRAG_THRESHOLD &&
+                        Math.abs(e.pageY - this._downY) < Utils.DRAG_THRESHOLD) {
+                        let docViews = SelectionManager.ViewsSortedVertically();
+                        let topDocView = docViews[0];
+                        let ind = topDocView.templates.indexOf(Templates.Bullet.Layout);
+                        if (ind !== -1) {
+                            topDocView.templates.splice(ind, 1);
+                            topDocView.props.Document.subBulletDocs = undefined;
+                        } else {
+                            topDocView.addTemplate(Templates.Bullet);
+                            topDocView.props.Document.subBulletDocs = new List<Doc>(docViews.filter(v => v !== topDocView).map(v => v.props.Document));
+                        }
                     }
-                }
             }
             this._removeIcon = false;
         }
@@ -275,9 +277,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         let doc = selected[0].props.Document;
         let iconDoc = Docs.IconDocument(layoutString);
         iconDoc.isButton = true;
-        iconDoc.title = selected.length > 1 ? "ICONset" : "ICON" + StrCast(doc.title);
-        iconDoc.labelField = this._fieldKey;
-        iconDoc[this._fieldKey] = selected.length > 1 ? "collection" : undefined;
+        iconDoc.proto!.title = selected.length > 1 ? "ICONset" : "ICON" + StrCast(doc.title);
+        iconDoc.labelField = selected.length > 1 ? undefined : this._fieldKey;
+        iconDoc.proto![this._fieldKey] = selected.length > 1 ? "collection" : undefined;
         iconDoc.isMinimized = false;
         iconDoc.width = Number(MINIMIZED_ICON_SIZE);
         iconDoc.height = Number(MINIMIZED_ICON_SIZE);
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index dd1516da7..52f7914f3 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -18,7 +18,7 @@ export class SelectorContextMenu extends React.Component<{ Document: Doc }> {
     }
 
     async fetchDocuments() {
-        const docs = await SearchUtil.Search(`data_l:${this.props.Document[Id]}`, true);
+        const docs = await SearchUtil.Search(`data_l:"${this.props.Document[Id]}"`, true);
         runInAction(() => this._docs = docs);
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index be7cddca6..ae4852aa2 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -212,6 +212,8 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         }
         if (e.key === "Backspace" || e.key === "Delete" || e.key === "d") {
             this._commandExecuted = true;
+            e.stopPropagation();
+            (e as any).propagationIsStopped = true;
             this.marqueeSelect().map(d => this.props.removeDocument(d));
             let ink = Cast(this.props.container.props.Document.ink, InkField);
             if (ink) {
@@ -291,20 +293,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 this.props.selectDocuments([newCollection]);
             }
             this.cleanupInteractions(false);
-        } else
-            if (e.key === "s") {
-                // this._commandExecuted = true;
-                // e.stopPropagation();
-                // e.preventDefault();
-                // let bounds = this.Bounds;
-                // let selected = this.marqueeSelect();
-                // SelectionManager.DeselectAll();
-                // let summary = Docs.TextDocument({ x: bounds.left + bounds.width + 25, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
-                // this.props.addLiveTextDocument(summary);
-                // selected.forEach(select => Doc.MakeLink(summary.proto!, select.proto!));
-
-                // this.cleanupInteractions(false);
-            }
+        }
     }
     @action
     marqueeInkSelect(ink: Map<any, any>) {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 925945b17..38ac5cb90 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,19 +1,19 @@
-import { computed, trace, action, reaction, IReactionDisposer } from "mobx";
+import { action, computed, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
+import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
+import { List } from "../../../new_fields/List";
+import { createSchema, listSpec, makeInterface } from "../../../new_fields/Schema";
+import { BoolCast, Cast, FieldValue, NumCast } from "../../../new_fields/Types";
+import { OmitKeys, Utils } from "../../../Utils";
+import { DocumentManager } from "../../util/DocumentManager";
+import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
+import { UndoManager } from "../../util/UndoManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { DocComponent } from "../DocComponent";
 import { DocumentView, DocumentViewProps, positionSchema } from "./DocumentView";
 import "./DocumentView.scss";
 import React = require("react");
-import { DocComponent } from "../DocComponent";
-import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema";
-import { FieldValue, Cast, NumCast, BoolCast, StrCast } from "../../../new_fields/Types";
-import { OmitKeys, Utils } from "../../../Utils";
-import { SelectionManager } from "../../util/SelectionManager";
-import { Doc, DocListCastAsync, DocListCast, } from "../../../new_fields/Doc";
-import { List } from "../../../new_fields/List";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { UndoManager } from "../../util/UndoManager";
-import { DocumentManager } from "../../util/DocumentManager";
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 }
@@ -140,7 +140,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             if (!CollectionFreeFormDocumentView._undoBatch) {
                 CollectionFreeFormDocumentView._undoBatch = UndoManager.StartBatch("iconAnimating");
             }
-            maximizedDocs.forEach(maximizedDoc => {
+            maximizedDocs.map(maximizedDoc => {
                 let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
                 if (!iconAnimating || (Date.now() - iconAnimating[6] > 1000)) {
                     if (isMinimized === undefined) {
@@ -182,12 +182,16 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 let subBulletDocs = await DocListCastAsync(this.props.Document.subBulletDocs);
                 let maximizedDocs = await DocListCastAsync(this.props.Document.maximizedDocs);
                 let summarizedDocs = await DocListCastAsync(this.props.Document.summarizedDocs);
-                let linkedToDocs = await DocListCastAsync(this.props.Document.linkedToDocs);
-                let linkedFromDocs = await DocListCastAsync(this.props.Document.linkedFromDocs);
-                let expandedDocs = [...(subBulletDocs ? subBulletDocs : []),
-                ...(maximizedDocs ? maximizedDocs : []),
-                ...(summarizedDocs ? summarizedDocs : []),];
-                if (expandedDocs) {   // bcz: need a better way to associate behaviors with click events on widget-documents
+                let linkedToDocs = await DocListCastAsync(this.props.Document.linkedToDocs, []);
+                let linkedFromDocs = await DocListCastAsync(this.props.Document.linkedFromDocs, []);
+                let expandedDocs: Doc[] = [];
+                expandedDocs = subBulletDocs ? [...subBulletDocs, ...expandedDocs] : expandedDocs;
+                expandedDocs = maximizedDocs ? [...maximizedDocs, ...expandedDocs] : expandedDocs;
+                expandedDocs = summarizedDocs ? [...summarizedDocs, ...expandedDocs] : expandedDocs;
+                // let expandedDocs = [...(subBulletDocs ? subBulletDocs : []),
+                // ...(maximizedDocs ? maximizedDocs : []),
+                // ...(summarizedDocs ? summarizedDocs : []),];
+                if (expandedDocs.length) {   // bcz: need a better way to associate behaviors with click events on widget-documents
                     if ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight)) {
                         let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
@@ -204,11 +208,13 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                         this.toggleIcon(expandedDocs);
                     }
                 }
-                let linkedFwdDocs = [
-                    linkedToDocs ? linkedToDocs[0].linkedTo as Doc : linkedFromDocs ? linkedFromDocs[0].linkedFrom as Doc : expandedDocs[0],
-                    linkedFromDocs ? linkedFromDocs[0].linkedFrom as Doc : linkedToDocs ? linkedToDocs[0].linkedTo as Doc : expandedDocs[0]];
-                if (linkedFwdDocs) {
-                    DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0]);
+                else if (linkedToDocs.length || linkedFromDocs.length) {
+                    let linkedFwdDocs = [
+                        linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : expandedDocs[0],
+                        linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : expandedDocs[0]];
+                    if (linkedFwdDocs) {
+                        DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0]);
+                    }
                 }
             }
         }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b88d18046..27896f02b 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -112,8 +112,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this._reactionDisposer = reaction(() => [this.props.Document.maximizedDocs, this.props.Document.summaryDoc, this.props.Document.summaryDoc instanceof Doc ? this.props.Document.summaryDoc.title : ""],
             () => {
                 let maxDoc = DocListCast(this.props.Document.maximizedDocs);
-                if (maxDoc && StrCast(this.props.Document.layout).indexOf("IconBox") !== -1) {
-                    this.props.Document.title = (maxDoc && maxDoc.length === 1 ? maxDoc[0].title + ".icon" : "");
+                if (maxDoc.length === 1 && StrCast(maxDoc[0].title).startsWith("-") && StrCast(this.props.Document.layout).indexOf("IconBox") !== -1) {
+                    this.props.Document.proto!.title = maxDoc[0].title + ".icon";
                 }
                 let sumDoc = Cast(this.props.Document.summaryDoc, Doc);
                 if (sumDoc instanceof Doc) {
@@ -332,8 +332,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     render() {
         var scaling = this.props.ContentScaling();
-        var nativeHeight = this.nativeHeight > 0 ? this.nativeHeight.toString() + "px" : "100%";
-        var nativeWidth = this.nativeWidth > 0 ? this.nativeWidth.toString() + "px" : "100%";
+        var nativeHeight = this.nativeHeight > 0 ? `${this.nativeHeight}px` : (StrCast(this.props.Document.layout).indexOf("IconBox") === -1 ? "100%" : "auto");
+        var nativeWidth = this.nativeWidth > 0 ? `${this.nativeWidth}px` : "100%";
 
         return (
             <div className={`documentView-node${this.props.isTopMost ? "-topmost" : ""}`}
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index cb09ad42c..8e04071c7 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -229,7 +229,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             if (e.target && (e.target as any).href) {
                 let href = (e.target as any).href;
                 if (href.indexOf(DocServer.prepend("/doc/")) === 0) {
-                    let docid = href.replace(DocServer.prepend("/doc/"), "").split("%")[0];
+                    let docid = href.replace(DocServer.prepend("/doc/"), "").split("?")[0];
                     DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
                         if (f instanceof Doc) {
                             if (DocumentManager.Instance.getDocumentView(f))
diff --git a/src/client/views/nodes/IconBox.scss b/src/client/views/nodes/IconBox.scss
index f6d9860a3..893dc2d36 100644
--- a/src/client/views/nodes/IconBox.scss
+++ b/src/client/views/nodes/IconBox.scss
@@ -4,13 +4,13 @@
     position: inherit;
     left:0;
     top:0;
-    height: 100%;
+    height: auto;
     width: max-content;
     // overflow: hidden;
     pointer-events: all;
     svg {
         width:  $MINIMIZED_ICON_SIZE !important;
-        height: 100%;
+        height: auto;
         background: white;
     }
     .iconBox-label {
diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx
index 071930633..b42eb44a5 100644
--- a/src/client/views/nodes/IconBox.tsx
+++ b/src/client/views/nodes/IconBox.tsx
@@ -7,7 +7,7 @@ import { observer } from "mobx-react";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./IconBox.scss";
 import { Cast, StrCast, BoolCast } from "../../../new_fields/Types";
-import { Doc } from "../../../new_fields/Doc";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { IconField } from "../../../new_fields/IconField";
 import { ContextMenu } from "../ContextMenu";
 import Measure from "react-measure";
@@ -41,25 +41,40 @@ export class IconBox extends React.Component<FieldViewProps> {
     setLabelField = (e: React.MouseEvent): void => {
         this.props.Document.hideLabel = !BoolCast(this.props.Document.hideLabel);
     }
+    setUseOwnTitleField = (e: React.MouseEvent): void => {
+        this.props.Document.useOwnTitle = !BoolCast(this.props.Document.useTargetTitle);
+    }
 
     specificContextMenu = (e: React.MouseEvent): void => {
         ContextMenu.Instance.addItem({
-            description: BoolCast(this.props.Document.hideLabel) ? "show label" : "hide label",
+            description: BoolCast(this.props.Document.hideLabel) ? "Show label with icon" : "Remove label from icon",
             event: this.setLabelField
         });
+        let maxDocs = DocListCast(this.props.Document.maximizedDocs);
+        if (maxDocs.length === 1 && !BoolCast(this.props.Document.hideLabel)) {
+            ContextMenu.Instance.addItem({
+                description: BoolCast(this.props.Document.useOwnTitle) ? "Use target title for label" : "Use own title label",
+                event: this.setUseOwnTitleField
+            });
+        }
     }
     @observable _panelWidth: number = 0;
     @observable _panelHeight: number = 0;
     render() {
         let labelField = StrCast(this.props.Document.labelField);
         let hideLabel = BoolCast(this.props.Document.hideLabel);
-        let maxDoc = Cast(this.props.Document.maximizedDocs, listSpec(Doc), []);
-        let firstDoc = maxDoc && maxDoc.length > 0 && maxDoc[0] instanceof Doc ? maxDoc[0] as Doc : undefined;
-        let label = !hideLabel && firstDoc && labelField ? firstDoc[labelField] : "";
+        let maxDocs = DocListCast(this.props.Document.maximizedDocs);
+        let firstDoc = maxDocs.length ? maxDocs[0] : undefined;
+        let label = hideLabel ? "" : (firstDoc && labelField && !BoolCast(this.props.Document.useOwnTitle, false) ? firstDoc[labelField] : this.props.Document.title);
         return (
             <div className="iconBox-container" onContextMenu={this.specificContextMenu}>
                 {this.minimizedIcon}
-                <Measure offset onResize={(r) => runInAction(() => { if (r.offset!.width || BoolCast(this.props.Document.hideLabel)) this.props.Document.nativeWidth = this.props.Document.width = (r.offset!.width + Number(MINIMIZED_ICON_SIZE)); })}>
+                <Measure offset onResize={(r) => runInAction(() => {
+                    if (r.offset!.width || BoolCast(this.props.Document.hideLabel)) {
+                        this.props.Document.nativeWidth = (r.offset!.width + Number(MINIMIZED_ICON_SIZE));
+                        if (this.props.Document.height === Number(MINIMIZED_ICON_SIZE)) this.props.Document.width = this.props.Document.nativeWidth;
+                    }
+                })}>
                     {({ measureRef }) =>
                         <span ref={measureRef} className="iconBox-label">{label}</span>
                     }
diff --git a/src/new_fields/List.ts b/src/new_fields/List.ts
index 88a65eba4..70e36f911 100644
--- a/src/new_fields/List.ts
+++ b/src/new_fields/List.ts
@@ -230,6 +230,16 @@ class ListImpl<T extends Field> extends ObjectField {
         const list = new Proxy<this>(this, {
             set: setter,
             get: listGetter,
+            ownKeys: target => Object.keys(target.__fields),
+            getOwnPropertyDescriptor: (target, prop) => {
+                if (prop in target.__fields) {
+                    return {
+                        configurable: true,//TODO Should configurable be true?
+                        enumerable: true,
+                    };
+                }
+                return Reflect.getOwnPropertyDescriptor(target, prop);
+            },
             deleteProperty: deleteProperty,
             defineProperty: () => { throw new Error("Currently properties can't be defined on documents using Object.defineProperty"); },
         });
-- 
cgit v1.2.3-70-g09d2


From 09afa3cc843a69eca59b63018e6f50f8e2bee089 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 15 May 2019 16:09:47 -0400
Subject: small fixes.  stopped view from panning when switching to tab
 dragging.

---
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 3 +--
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx       | 9 ++++++---
 src/client/views/nodes/DocumentView.tsx                         | 9 +++++----
 3 files changed, 12 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index ae4852aa2..865bae729 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -257,7 +257,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 width: bounds.width * zoomBasis,
                 height: bounds.height * zoomBasis,
                 ink: inkData ? new InkField(this.marqueeInkSelect(inkData)) : undefined,
-                title: "a nested collection",
+                title: e.key === "s" ? "-summary-" : e.key === "r" ? "-replacement-" : e.key === "p" ? "-summary-" : "a nested collection",
             });
 
             this.marqueeInkDelete(inkData);
@@ -283,7 +283,6 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     let maxy = NumCast(summarizedDoc.y, undefined);
                     let maxw = NumCast(summarizedDoc.width, undefined);
                     let maxh = NumCast(summarizedDoc.height, undefined);
-                    summarizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), 0])
                 });
                 this.props.addLiveTextDocument(summary);
             }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 38ac5cb90..631bf1ba8 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -170,7 +170,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-        // e.stopPropagation();
+        if (e.button === 0 && e.altKey) {
+            e.stopPropagation(); // prevents panning from happening on collection if shift is pressed after a document drag has started
+        } // allow pointer down to go through otherwise so that marquees can be drawn starting over a document 
     }
     onClick = async (e: React.MouseEvent) => {
         e.stopPropagation();
@@ -192,14 +194,15 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 // ...(maximizedDocs ? maximizedDocs : []),
                 // ...(summarizedDocs ? summarizedDocs : []),];
                 if (expandedDocs.length) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    if ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight)) {
+                    let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0].proto!);
+                    if (!hasView && ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight))) {
                         let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
                             SelectionManager.DeselectAll();
                             expandedDocs.forEach(maxDoc => {
                                 maxDoc.isMinimized = false;
                                 if (!CollectionDockingView.Instance.CloseRightSplit(maxDoc)) {
-                                    CollectionDockingView.Instance.AddRightSplit(Doc.MakeCopy(maxDoc));
+                                    CollectionDockingView.Instance.AddRightSplit(maxDoc.proto ? Doc.MakeDelegate(maxDoc.proto) : maxDoc);
                                 }
                             });
                         }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 27896f02b..260630216 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -112,12 +112,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this._reactionDisposer = reaction(() => [this.props.Document.maximizedDocs, this.props.Document.summaryDoc, this.props.Document.summaryDoc instanceof Doc ? this.props.Document.summaryDoc.title : ""],
             () => {
                 let maxDoc = DocListCast(this.props.Document.maximizedDocs);
-                if (maxDoc.length === 1 && StrCast(maxDoc[0].title).startsWith("-") && StrCast(this.props.Document.layout).indexOf("IconBox") !== -1) {
-                    this.props.Document.proto!.title = maxDoc[0].title + ".icon";
+                if (maxDoc.length === 1 && StrCast(this.props.Document.title).startsWith("-") && StrCast(this.props.Document.layout).indexOf("IconBox") !== -1) {
+                    this.props.Document.proto!.title = "-" + maxDoc[0].title + ".icon";
                 }
                 let sumDoc = Cast(this.props.Document.summaryDoc, Doc);
-                if (sumDoc instanceof Doc) {
-                    this.props.Document.title = sumDoc.title + ".expanded";
+                if (sumDoc instanceof Doc && StrCast(this.props.Document.title).startsWith("-")) {
+                    this.props.Document.proto!.title = "-" + sumDoc.title + ".expanded";
                 }
             }, { fireImmediately: true });
         DocumentManager.Instance.DocumentViews.push(this);
@@ -186,6 +186,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             }
             e.stopPropagation();
         } else if (this.active) {
+            //e.stopPropagation(); // bcz: doing this will block click events from CollectionFreeFormDocumentView which are needed for iconifying,etc
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
-- 
cgit v1.2.3-70-g09d2


From 53351f6c5b448b93f2865eb38868bddb95ec4c1d Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 15 May 2019 22:02:39 -0400
Subject: fixed templates on images.

---
 src/client/views/Templates.tsx                                     | 7 +++++--
 .../collections/collectionFreeForm/CollectionFreeFormView.tsx      | 2 +-
 src/client/views/nodes/DocumentContentsView.tsx                    | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index a98870b04..ca0c04d1b 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -40,8 +40,11 @@ export namespace Templates {
     // export const BasicLayout = new Template("Basic layout", "{layout}");
 
     export const Caption = new Template("Caption", TemplatePosition.OutterBottom,
-        `<div id="screenSpace" style="top: 100%; font-size:14px; background:yellow; width:100%; position:absolute">
-            <FormattedTextBox {...props} fieldKey={"caption"} />
+        `<div>
+            <div style="height:100%; width:100%;position:absolute;">{layout}</div>
+            <div id="screenSpace" style="top: 100%; font-size:14px; background:yellow; width:100%; position:absolute">
+                <FormattedTextBox {...props} fieldKey={"caption"} />
+            </div>
         </div>` );
 
     export const TitleOverlay = new Template("TitleOverlay", TemplatePosition.InnerTop,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index eaa91fd74..b8bed795d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -363,7 +363,7 @@ class CollectionFreeFormOverlayView extends React.Component<DocumentViewProps &
             isTopMost={this.props.isTopMost} isSelected={this.props.isSelected} select={emptyFunction} />);
     }
     render() {
-        return this.props.Document.overlayLayout ? this.overlayView : (null);
+        return this.overlayView;
     }
 }
 
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 3ddf8eb00..f3d76c49b 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -64,7 +64,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
         return new List<string>();
     }
     @computed get finalLayout() {
-        const baseLayout = this.layout;
+        const baseLayout = this.props.layoutKey === "overlayLayout" ? "<div/>" : this.layout;
         let base = baseLayout;
         let layout = baseLayout;
 
-- 
cgit v1.2.3-70-g09d2


From 6e767972574c9cd8a2cd1e10a8fa327839ca3525 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 16 May 2019 01:17:44 -0400
Subject: changes  to make maximizing stuff apply to data documents.  problem
 with zooiming after resizing a summarized doc

---
 src/client/views/DocumentDecorations.tsx           |  4 ++--
 src/client/views/TemplateMenu.tsx                  |  2 +-
 src/client/views/Templates.tsx                     | 15 ++++++------
 .../collections/collectionFreeForm/MarqueeView.tsx |  8 ++++---
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 28 ++++++++++------------
 5 files changed, 28 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 8d85f7e2c..b2c65a31f 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -263,7 +263,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                             topDocView.props.Document.subBulletDocs = undefined;
                         } else {
                             topDocView.addTemplate(Templates.Bullet);
-                            topDocView.props.Document.subBulletDocs = new List<Doc>(docViews.filter(v => v !== topDocView).map(v => v.props.Document));
+                            topDocView.props.Document.subBulletDocs = new List<Doc>(docViews.filter(v => v !== topDocView).map(v => v.props.Document.proto!));
                         }
                     }
             }
@@ -285,7 +285,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         iconDoc.height = Number(MINIMIZED_ICON_SIZE);
         iconDoc.x = NumCast(doc.x);
         iconDoc.y = NumCast(doc.y) - 24;
-        iconDoc.maximizedDocs = new List<Doc>(selected.map(s => s.props.Document));
+        iconDoc.maximizedDocs = new List<Doc>(selected.map(s => s.props.Document.proto!));
         doc.minimizedDoc = iconDoc;
         selected[0].props.addDocument && selected[0].props.addDocument(iconDoc, false);
         return iconDoc;
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index 22c4edc25..cfe1b0663 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -46,7 +46,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
             if (template.Name == "Bullet") {
                 let topDocView = this.props.docs[0];
                 topDocView.addTemplate(template);
-                topDocView.props.Document.subBulletDocs = new List<Doc>(this.props.docs.filter(v => v !== topDocView).map(v => v.props.Document));
+                topDocView.props.Document.subBulletDocs = new List<Doc>(this.props.docs.filter(v => v !== topDocView).map(v => v.props.Document.proto!));
             } else {
                 this.props.docs.map(d => d.addTemplate(template));
             }
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index ca0c04d1b..f0ee2856b 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -62,18 +62,19 @@ export namespace Templates {
         </div></div>` );
 
     export const Bullet = new Template("Bullet", TemplatePosition.InnerTop,
-        `<div><div style="height:100%; width:100%;position:absolute;">{layout}</div>
-        <div id="isExpander" style="height:15px; width:15px; margin-left:-16px; pointer-events:all; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white;">
-        <img  id="isExpander"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAZlBMVEX///8AAABmZmb7+/tYWFhgYGBFRUVSUlL4+Pg/Pz9jY2N5eXmcnJyioqKBgYFzc3NtbW1LS0s3NzfW1taWlpaOjo6IiIgvLy9WVlampqZcXFw5OTlvb28mJiYxMTHe3t7l5eUjIyMY8kIZAAAD2UlEQVR4nO2d61biMBRGW1FBEVHxfp15/5ecOVa5lHxtArmck/Xtn1BotjtNoXQtm4YQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEFIrX6UHEA1gsmrneceRjHm7cj28attKFOf/TRyKIliH4vzbZE+xE2zbZYkxRWX5Y9JT/BW0X3G+NtlR3Ahar7jcMtlS3Ba0XXG+Y7JW3BW0XHHZM/lR7AvaVewL/ijuC1pV3Bf8VnQJ2lR0CYriq/Nxg4puwfa1aZ7dz9yUHnEgN26NZ3luWkPFd7fEtHsWVDwpO+YgTgYKCuYn6tAU7TBecaygcGpZEQie7m5luKJPQQFUvCwx5iAuvQoK4KShvSIoOHVtCz7dnOUecxBn7kG/urc2eCz6T9EOcxXDCgpAUetyAwoOCBqrGF5QMKR4mCA8L+pTBIJwkRl95eifJjPHTDYTFQ8vePyrs3BsBfXLzfFHkvKKMY4j1ctNnCmmuGKslfCQT0RZiPdFVmnFmOcy36sDWYn7DU9hxdifRkKuEGQh/pWW0K/QiUlxtUxVxTTXyhQtN6kuI6mpmO5qpxJFIBjl1yMVimmvV4PfrnIq3iYsKICTRj7F9L84gIq38fYwCCj4HnMfRY/FPL8ZFayYo6BQbLlJeZrYpVDFXAUFcMtKWkUgmOhmnwKKOQsK4NaxdIp5CwqZj8X8gv27jNecJ9nZuXtnie/SzjhRQcHkt6Fnq1imoAAUY1csVVDIUrFcQSGDIhC8jriLQZIrli0oXKdVLF1QSFqxfEEBVLyI8NYXCgoKySaqhinakajimxrBRBX1FBQSVNRyDP4SXVGbYHRFfYJN8xhTESwyj5HHHEjEihoLCqDiXfAb3aksKESqCAoqEIxUUW9BAS03E+93mOhcZDYcXVF3QeHBPcI3v4qo4EPiUQcBKr75vHaiv6AAKt6NV0SCqgoKqOKYovpFZgOo+DmsOHkyUlA4ZKKamaIdQPEJK5oqKKCKM7D9zFZBIayiuYICWm5cFWef7o3vs486CP8VdQIEVRcU7sFE7VecgSmqvKDgVxEJqi8ogIof2xVnH2YLCuMT1fAU7RirOPtrXHCsovmCwlDFCgoKWNH4IrMBTdQ/NUzRjiu3CeCq9HAPAVSspaDgX9FkQcG3ollB34qGBf0UTQv6KBoXHFc0LzimWIFg0ywGBBelBxcHXLGKggKqWElBwV2xIkF3xaoEXYqVCe4rVifYV3wpPZwULOouKLzUXVBY1F1QeKm7oLCoXVAqVi7YNM7/F0YIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCG+/ANh4i1CHdc63QAAAABJRU5ErkJggg==" 
-         width="15px" height="15px"/>
-         </div>
+        `<div>
+            <div style="height:100%; width:100%;position:absolute;">{layout}</div>
+            <div id="isExpander" style="height:15px; width:15px; margin-left:-16px; pointer-events:all; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white;">
+                <img  id="isExpander"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAZlBMVEX///8AAABmZmb7+/tYWFhgYGBFRUVSUlL4+Pg/Pz9jY2N5eXmcnJyioqKBgYFzc3NtbW1LS0s3NzfW1taWlpaOjo6IiIgvLy9WVlampqZcXFw5OTlvb28mJiYxMTHe3t7l5eUjIyMY8kIZAAAD2UlEQVR4nO2d61biMBRGW1FBEVHxfp15/5ecOVa5lHxtArmck/Xtn1BotjtNoXQtm4YQQgghhBBCCCGEEEIIIYQQQgghhBBCCCGEEFIrX6UHEA1gsmrneceRjHm7cj28attKFOf/TRyKIliH4vzbZE+xE2zbZYkxRWX5Y9JT/BW0X3G+NtlR3Ahar7jcMtlS3Ba0XXG+Y7JW3BW0XHHZM/lR7AvaVewL/ijuC1pV3Bf8VnQJ2lR0CYriq/Nxg4puwfa1aZ7dz9yUHnEgN26NZ3luWkPFd7fEtHsWVDwpO+YgTgYKCuYn6tAU7TBecaygcGpZEQie7m5luKJPQQFUvCwx5iAuvQoK4KShvSIoOHVtCz7dnOUecxBn7kG/urc2eCz6T9EOcxXDCgpAUetyAwoOCBqrGF5QMKR4mCA8L+pTBIJwkRl95eifJjPHTDYTFQ8vePyrs3BsBfXLzfFHkvKKMY4j1ctNnCmmuGKslfCQT0RZiPdFVmnFmOcy36sDWYn7DU9hxdifRkKuEGQh/pWW0K/QiUlxtUxVxTTXyhQtN6kuI6mpmO5qpxJFIBjl1yMVimmvV4PfrnIq3iYsKICTRj7F9L84gIq38fYwCCj4HnMfRY/FPL8ZFayYo6BQbLlJeZrYpVDFXAUFcMtKWkUgmOhmnwKKOQsK4NaxdIp5CwqZj8X8gv27jNecJ9nZuXtnie/SzjhRQcHkt6Fnq1imoAAUY1csVVDIUrFcQSGDIhC8jriLQZIrli0oXKdVLF1QSFqxfEEBVLyI8NYXCgoKySaqhinakajimxrBRBX1FBQSVNRyDP4SXVGbYHRFfYJN8xhTESwyj5HHHEjEihoLCqDiXfAb3aksKESqCAoqEIxUUW9BAS03E+93mOhcZDYcXVF3QeHBPcI3v4qo4EPiUQcBKr75vHaiv6AAKt6NV0SCqgoKqOKYovpFZgOo+DmsOHkyUlA4ZKKamaIdQPEJK5oqKKCKM7D9zFZBIayiuYICWm5cFWef7o3vs486CP8VdQIEVRcU7sFE7VecgSmqvKDgVxEJqi8ogIof2xVnH2YLCuMT1fAU7RirOPtrXHCsovmCwlDFCgoKWNH4IrMBTdQ/NUzRjiu3CeCq9HAPAVSspaDgX9FkQcG3ollB34qGBf0UTQv6KBoXHFc0LzimWIFg0ywGBBelBxcHXLGKggKqWElBwV2xIkF3xaoEXYqVCe4rVifYV3wpPZwULOouKLzUXVBY1F1QeKm7oLCoXVAqVi7YNM7/F0YIIYQQQgghhBBCCCGEEEIIIYQQQgghhBBCCCG+/ANh4i1CHdc63QAAAABJRU5ErkJggg==" 
+                width="15px" height="15px"/>
+            </div>
         </div>`
     );
 
     export function ImageOverlay(width: number, height: number, field: string = "thumbnail") {
         return (`<div>
-                <div style="height:100%; width:100%;position:absolute;">{layout}</div>
-                <div style="width:${width}px; height:${height}px; top:0; right:0; background:rgba(0,0,0,0.25); position:absolute;overflow:hidden;">
+                <div style="height:100%; position:absolute;">{layout}</div>
+                <div style="height:${height}px; top:0; right:0; background:rgba(0,0,0,0.25); position:absolute;overflow:hidden;">
                     <ImageBox id="isExpander" {...props} PanelWidth={${width}} fieldKey={"${field}"} />
                 </div>
             </div>`);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 865bae729..c063115e7 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -264,7 +264,6 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             // SelectionManager.DeselectAll();
             if (e.key === "s" || e.key === "r" || e.key === "p") {
                 e.preventDefault();
-                let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
                 let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
 
                 let dataUrl = await htmlToImage.toPng(this._mainCont.current!, { width: bounds.width, height: bounds.height, quality: 1 });
@@ -272,12 +271,15 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
                 summary.proto!.templates = new List<string>([Templates.ImageOverlay(Math.min(50, bounds.width), bounds.height * Math.min(50, bounds.width) / bounds.width, "thumbnail")]);
                 if (e.key === "s" || e.key === "p") {
-                    summary.proto!.maximizeOnRight = true;
+                    // summary.proto!.maximizeOnRight = true;
                     newCollection.proto!.summaryDoc = summary;
                     selected = [newCollection];
+                    newCollection.proto!.isMinimized = true;
+                    this.props.addDocument(newCollection, false);
                 }
-                summary.proto!.summarizedDocs = new List<Doc>(selected);
+                summary.proto!.summarizedDocs = new List<Doc>(selected.map(s => s.proto!));
                 //summary.proto!.isButton = true;
+                let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
                 selected.map(summarizedDoc => {
                     let maxx = NumCast(summarizedDoc.x, undefined);
                     let maxy = NumCast(summarizedDoc.y, undefined);
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 631bf1ba8..03538ae66 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -87,7 +87,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             this.props.bringToFront(this.props.Document);
             if (values instanceof List) {
                 let scrpt = this.props.ScreenToLocalTransform().transformPoint(values[0], values[1]);
-                this.animateBetweenIcon(true, scrpt, [values[2], values[3]], values[4], values[5], values[6], this.props.Document, values[7] ? true : false);
+                this.animateBetweenIcon(true, scrpt, [NumCast(this.props.Document.x), NumCast(this.props.Document.y)],
+                    NumCast(this.props.Document.width), NumCast(this.props.Document.height), values[2], this.props.Document, values[3] ? true : false);
             }
         }, { fireImmediately: true });
     }
@@ -98,7 +99,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
 
     animateBetweenIcon(first: boolean, icon: number[], targ: number[], width: number, height: number, stime: number, target: Doc, maximizing: boolean) {
         if (first) {
-            if (maximizing) target.width = target.height = 1;
+            if (maximizing) target.proto!.width = target.proto!.height = 1;
         }
         setTimeout(() => {
             let now = Date.now();
@@ -115,13 +116,13 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             }
             else {
                 if (!maximizing) {
-                    target.isMinimized = true;
+                    target.proto!.isMinimized = true;
                     target.x = targ[0];
                     target.y = targ[1];
                     target.width = width;
                     target.height = height;
                 }
-                target.isIconAnimating = undefined;
+                target.proto!.isIconAnimating = undefined;
             }
         },
             2);
@@ -146,17 +147,12 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     if (isMinimized === undefined) {
                         isMinimized = BoolCast(maximizedDoc.isMinimized, false);
                     }
-                    let minx = NumCast(minimizedTarget.x, undefined) + NumCast(minimizedTarget.width, undefined) * this.getTransform().Scale * this.contentScaling() / 2;
-                    let miny = NumCast(minimizedTarget.y, undefined) + NumCast(minimizedTarget.height, undefined) * this.getTransform().Scale * this.contentScaling() / 2;
-                    let maxx = NumCast(maximizedDoc.x, undefined);
-                    let maxy = NumCast(maximizedDoc.y, undefined);
-                    let maxw = NumCast(maximizedDoc.width, undefined);
-                    let maxh = NumCast(maximizedDoc.height, undefined);
-                    if (minx !== undefined && miny !== undefined && maxx !== undefined && maxy !== undefined &&
-                        maxw !== undefined && maxh !== undefined) {
+                    let minx = NumCast(minimizedTarget.x, undefined) + NumCast(minimizedTarget.width, undefined) / 2;
+                    let miny = NumCast(minimizedTarget.y, undefined) + NumCast(minimizedTarget.height, undefined) / 2;
+                    if (minx !== undefined && miny !== undefined) {
                         let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(minx, miny);
                         if (isMinimized) maximizedDoc.isMinimized = false;
-                        maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), isMinimized ? 1 : 0])
+                        maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], Date.now(), isMinimized ? 1 : 0])
                     }
                 }
             });
@@ -194,7 +190,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 // ...(maximizedDocs ? maximizedDocs : []),
                 // ...(summarizedDocs ? summarizedDocs : []),];
                 if (expandedDocs.length) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0].proto!);
+                    let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0]);
                     if (!hasView && ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight))) {
                         let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
@@ -202,12 +198,12 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                             expandedDocs.forEach(maxDoc => {
                                 maxDoc.isMinimized = false;
                                 if (!CollectionDockingView.Instance.CloseRightSplit(maxDoc)) {
-                                    CollectionDockingView.Instance.AddRightSplit(maxDoc.proto ? Doc.MakeDelegate(maxDoc.proto) : maxDoc);
+                                    CollectionDockingView.Instance.AddRightSplit(Doc.MakeDelegate(maxDoc));
                                 }
                             });
                         }
                     } else {
-                        this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(maxDoc, false));
+                        //if (altKey) this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(maxDoc, false));
                         this.toggleIcon(expandedDocs);
                     }
                 }
-- 
cgit v1.2.3-70-g09d2


From 33c7af8d3e09e5add3ae56d5c7a697acee4104c3 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 16 May 2019 10:27:19 -0400
Subject: running into performance problems.   fixed some things about
 summaries.

---
 src/client/views/PreviewCursor.tsx                 |  8 ++-
 src/client/views/Templates.tsx                     |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  4 +-
 .../collections/collectionFreeForm/MarqueeView.tsx | 70 +++++++++++-----------
 4 files changed, 42 insertions(+), 42 deletions(-)

(limited to 'src')

diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 4218ea7c9..7c1d00eb0 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -22,9 +22,11 @@ export class PreviewCursor extends React.Component<{}> {
     }
     paste = (e: ClipboardEvent) => {
         console.log(e.clipboardData);
-        console.log(e.clipboardData.getData("text/html"));
-        console.log(e.clipboardData.getData("text/csv"));
-        console.log(e.clipboardData.getData("text/plain"));
+        if (e.clipboardData) {
+            console.log(e.clipboardData.getData("text/html"));
+            console.log(e.clipboardData.getData("text/csv"));
+            console.log(e.clipboardData.getData("text/plain"));
+        }
     }
 
     @action
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index f0ee2856b..8d6bfbefd 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -73,7 +73,7 @@ export namespace Templates {
 
     export function ImageOverlay(width: number, height: number, field: string = "thumbnail") {
         return (`<div>
-                <div style="height:100%; position:absolute;">{layout}</div>
+                <div style="height:100%; width:100%; position:absolute;">{layout}</div>
                 <div style="height:${height}px; top:0; right:0; background:rgba(0,0,0,0.25); position:absolute;overflow:hidden;">
                     <ImageBox id="isExpander" {...props} PanelWidth={${width}} fieldKey={"${field}"} />
                 </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index b8bed795d..6e4c79e62 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -134,8 +134,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     @action
     onPointerMove = (e: PointerEvent): void => {
         if (!e.cancelBubble) {
-            let x = this.props.Document.panX || 0;
-            let y = this.props.Document.panY || 0;
+            let x = this.Document.panX || 0;
+            let y = this.Document.panY || 0;
             let docs = this.children || [];
             let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
             if (!this.isAnnotationOverlay) {
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index c063115e7..17d0a533e 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -223,27 +223,21 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             this.cleanupInteractions(false);
             e.stopPropagation();
         }
-        if (e.key === "c" || e.key === "r" || e.key === "s" || e.key === "e" || e.key === "p") {
+        if (e.key === "c" || e.key === "s" || e.key === "e" || e.key === "p") {
             this._commandExecuted = true;
             e.stopPropagation();
             (e as any).propagationIsStopped = true;
             let bounds = this.Bounds;
-            let selected = this.marqueeSelect().map(d => {
-                if (e.key === "s") {
-                    let dCopy = Doc.MakeCopy(d);
-                    dCopy.x = NumCast(d.x) - bounds.left - bounds.width / 2;
-                    dCopy.y = NumCast(d.y) - bounds.top - bounds.height / 2;
-                    dCopy.page = -1;
-                    return dCopy;
-                }
-                else if (e.key !== "r") {
+            let selected = this.marqueeSelect();
+            if (e.key === "c") {
+                selected.map(d => {
                     this.props.removeDocument(d);
                     d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
                     d.y = NumCast(d.y) - bounds.top - bounds.height / 2;
                     d.page = -1;
-                }
-                return d;
-            });
+                    return d;
+                });
+            }
             let ink = Cast(this.props.container.props.Document.ink, InkField);
             let inkData = ink ? ink.inkData : undefined;
             let zoomBasis = NumCast(this.props.container.props.Document.scale, 1);
@@ -257,36 +251,40 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 width: bounds.width * zoomBasis,
                 height: bounds.height * zoomBasis,
                 ink: inkData ? new InkField(this.marqueeInkSelect(inkData)) : undefined,
-                title: e.key === "s" ? "-summary-" : e.key === "r" ? "-replacement-" : e.key === "p" ? "-summary-" : "a nested collection",
+                title: e.key === "s" ? "-summary-" : e.key === "p" ? "-summary-" : "a nested collection",
             });
-
             this.marqueeInkDelete(inkData);
-            // SelectionManager.DeselectAll();
-            if (e.key === "s" || e.key === "r" || e.key === "p") {
-                e.preventDefault();
-                let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
 
-                let dataUrl = await htmlToImage.toPng(this._mainCont.current!, { width: bounds.width, height: bounds.height, quality: 1 });
-                summary.proto!.thumbnail = new ImageField(new URL(dataUrl));
+            if (e.key === "s" || e.key === "p") {
 
-                summary.proto!.templates = new List<string>([Templates.ImageOverlay(Math.min(50, bounds.width), bounds.height * Math.min(50, bounds.width) / bounds.width, "thumbnail")]);
-                if (e.key === "s" || e.key === "p") {
-                    // summary.proto!.maximizeOnRight = true;
+                htmlToImage.toPng(this._mainCont.current!, { width: bounds.width, height: bounds.height, quality: 1 }).then((dataUrl) => {
+                    selected.map(d => {
+                        this.props.removeDocument(d);
+                        d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
+                        d.y = NumCast(d.y) - bounds.top - bounds.height / 2;
+                        d.page = -1;
+                        return d;
+                    });
+                    let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
+                    summary.proto!.thumbnail = new ImageField(new URL(dataUrl));
+                    summary.proto!.templates = new List<string>([Templates.ImageOverlay(Math.min(50, bounds.width), bounds.height * Math.min(50, bounds.width) / bounds.width, "thumbnail")]);
                     newCollection.proto!.summaryDoc = summary;
                     selected = [newCollection];
-                    newCollection.proto!.isMinimized = true;
+                    newCollection.x = bounds.left + bounds.width;
                     this.props.addDocument(newCollection, false);
-                }
-                summary.proto!.summarizedDocs = new List<Doc>(selected.map(s => s.proto!));
-                //summary.proto!.isButton = true;
-                let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
-                selected.map(summarizedDoc => {
-                    let maxx = NumCast(summarizedDoc.x, undefined);
-                    let maxy = NumCast(summarizedDoc.y, undefined);
-                    let maxw = NumCast(summarizedDoc.width, undefined);
-                    let maxh = NumCast(summarizedDoc.height, undefined);
-                });
-                this.props.addLiveTextDocument(summary);
+                    summary.proto!.summarizedDocs = new List<Doc>(selected.map(s => s.proto!));
+                    //summary.proto!.maximizeOnRight = true;
+                    //summary.proto!.isButton = true;
+                    //let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
+                    // selected.map(summarizedDoc => {
+                    //     let maxx = NumCast(summarizedDoc.x, undefined);
+                    //     let maxy = NumCast(summarizedDoc.y, undefined);
+                    //     let maxw = NumCast(summarizedDoc.width, undefined);
+                    //     let maxh = NumCast(summarizedDoc.height, undefined);
+                    //     summarizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), 0]);
+                    // });
+                    this.props.addLiveTextDocument(summary);
+                })
             }
             else {
                 this.props.addDocument(newCollection, false);
-- 
cgit v1.2.3-70-g09d2


From 22d9a6540f2994331c397154f6a1fecd6e46ef8c Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 16 May 2019 11:19:50 -0400
Subject: fixed glitch in unminimizing

---
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 51 ++++++++++------------
 1 file changed, 24 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 03538ae66..b82d02af5 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -20,7 +20,7 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 
 const schema = createSchema({
     zoomBasis: "number",
-    zIndex: "number"
+    zIndex: "number",
 });
 
 //TODO Types: The import order is wrong, so positionSchema is undefined
@@ -43,9 +43,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     @computed get zoom(): number { return 1 / FieldValue(this.Document.zoomBasis, 1); }
     @computed get nativeWidth(): number { return FieldValue(this.Document.nativeWidth, 0); }
     @computed get nativeHeight(): number { return FieldValue(this.Document.nativeHeight, 0); }
-    @computed get width(): number { return FieldValue(this.Document.width, 0); }
-    @computed get height(): number { return FieldValue(this.Document.height, 0); }
-    @computed get zIndex(): number { return FieldValue(this.Document.zIndex, 0); }
+    @computed get width(): number { return BoolCast(this.props.Document.willMaximize) ? 0 : FieldValue(this.Document.width, 0); }
+    @computed get height(): number { return BoolCast(this.props.Document.willMaximize) ? 0 : FieldValue(this.Document.height, 0); }
 
     set width(w: number) {
         this.Document.width = w;
@@ -59,10 +58,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             this.Document.width = this.nativeWidth / this.nativeHeight * h;
         }
     }
-    set zIndex(h: number) {
-        this.Document.zIndex = h;
-    }
-
     contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
     panelWidth = () => this.props.PanelWidth();
     panelHeight = () => this.props.PanelHeight();
@@ -87,8 +82,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             this.props.bringToFront(this.props.Document);
             if (values instanceof List) {
                 let scrpt = this.props.ScreenToLocalTransform().transformPoint(values[0], values[1]);
-                this.animateBetweenIcon(true, scrpt, [NumCast(this.props.Document.x), NumCast(this.props.Document.y)],
-                    NumCast(this.props.Document.width), NumCast(this.props.Document.height), values[2], this.props.Document, values[3] ? true : false);
+                this.animateBetweenIcon(true, scrpt, [this.Document.x || 0, this.Document.y || 0],
+                    this.Document.width || 0, this.Document.height || 0, values[2], values[3] ? true : false);
             }
         }, { fireImmediately: true });
     }
@@ -97,32 +92,33 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         if (this._bringToFrontDisposer) this._bringToFrontDisposer();
     }
 
-    animateBetweenIcon(first: boolean, icon: number[], targ: number[], width: number, height: number, stime: number, target: Doc, maximizing: boolean) {
-        if (first) {
-            if (maximizing) target.proto!.width = target.proto!.height = 1;
-        }
+    animateBetweenIcon(first: boolean, icon: number[], targ: number[], width: number, height: number, stime: number, maximizing: boolean) {
+
         setTimeout(() => {
             let now = Date.now();
             let progress = Math.min(1, (now - stime) / 200);
             let pval = maximizing ?
                 [icon[0] + (targ[0] - icon[0]) * progress, icon[1] + (targ[1] - icon[1]) * progress] :
                 [targ[0] + (icon[0] - targ[0]) * progress, targ[1] + (icon[1] - targ[1]) * progress];
-            target.width = maximizing ? 25 + (width - 25) * progress : width + (25 - width) * progress;
-            target.height = maximizing ? 25 + (height - 25) * progress : height + (25 - height) * progress;
-            target.x = pval[0];
-            target.y = pval[1];
+            this.props.Document.width = maximizing ? 25 + (width - 25) * progress : width + (25 - width) * progress;
+            this.props.Document.height = maximizing ? 25 + (height - 25) * progress : height + (25 - height) * progress;
+            this.props.Document.x = pval[0];
+            this.props.Document.y = pval[1];
+            if (first) {
+                this.props.Document.proto!.willMaximize = false;
+            }
             if (now < stime + 200) {
-                this.animateBetweenIcon(false, icon, targ, width, height, stime, target, maximizing);
+                this.animateBetweenIcon(false, icon, targ, width, height, stime, maximizing);
             }
             else {
                 if (!maximizing) {
-                    target.proto!.isMinimized = true;
-                    target.x = targ[0];
-                    target.y = targ[1];
-                    target.width = width;
-                    target.height = height;
+                    this.props.Document.proto!.isMinimized = true;
+                    this.props.Document.x = targ[0];
+                    this.props.Document.y = targ[1];
+                    this.props.Document.width = width;
+                    this.props.Document.height = height;
                 }
-                target.proto!.isIconAnimating = undefined;
+                this.props.Document.proto!.isIconAnimating = undefined;
             }
         },
             2);
@@ -151,7 +147,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     let miny = NumCast(minimizedTarget.y, undefined) + NumCast(minimizedTarget.height, undefined) / 2;
                     if (minx !== undefined && miny !== undefined) {
                         let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(minx, miny);
-                        if (isMinimized) maximizedDoc.isMinimized = false;
+                        maximizedDoc.willMaximize = isMinimized;
+                        maximizedDoc.isMinimized = false;
                         maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], Date.now(), isMinimized ? 1 : 0])
                     }
                 }
@@ -263,7 +260,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     width: this.width,
                     height: this.height,
                     position: "absolute",
-                    zIndex: this.zIndex,
+                    zIndex: this.Document.zIndex || 0,
                     backgroundColor: "transparent"
                 }} >
                 {this.docView}
-- 
cgit v1.2.3-70-g09d2


From 5c7926ebe144644814043c43c0cdc2cf8866e4cd Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 16 May 2019 11:36:15 -0400
Subject: fixed highlighting thickness as much as possible. seems to be a
 minimum width of around 0.1 which is a problem zooming in.

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index b82d02af5..7c7ca9e25 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -247,11 +247,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} onPointerOver={this.onPointerEnter}
                 onClick={this.onClick}
                 style={{
-                    outlineColor: "black",
+                    outlineColor: "maroon",
                     outlineStyle: "dashed",
-                    outlineWidth:
-                        BoolCast(this.props.Document.protoBrush, false) ? `${1 / this.contentScaling()}px` :
-                            BoolCast(this.props.Document.libraryBrush, false) ? `${0.5 / this.contentScaling()}px` : "0px",
+                    outlineWidth: BoolCast(this.props.Document.libraryBrush, false) ||
+                        BoolCast(this.props.Document.protoBrush, false) ?
+                        `${1 * this.getTransform().Scale}px` : "0px",
                     opacity: zoomFade,
                     borderRadius: `${this.borderRounding()}px`,
                     transformOrigin: "left top",
-- 
cgit v1.2.3-70-g09d2


From 25e5aa78f858e35eb0f8e7b49d528bdac6691513 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 16 May 2019 12:28:31 -0400
Subject: fixed MakeAlias to check if doc is prototype.  fixed summary template
 to bottom/right + capture image when zoomed, fixed full screen to copy view
 data on delegate

---
 src/client/views/Templates.tsx                                  | 2 +-
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 2 +-
 src/client/views/nodes/DocumentView.tsx                         | 2 +-
 src/new_fields/Doc.ts                                           | 5 +++--
 4 files changed, 6 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 8d6bfbefd..5d29e68ae 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -74,7 +74,7 @@ export namespace Templates {
     export function ImageOverlay(width: number, height: number, field: string = "thumbnail") {
         return (`<div>
                 <div style="height:100%; width:100%; position:absolute;">{layout}</div>
-                <div style="height:${height}px; top:0; right:0; background:rgba(0,0,0,0.25); position:absolute;overflow:hidden;">
+                <div style="height:${height}px; bottom:0; right:0; background:rgba(0,0,0,0.25); position:absolute;overflow:hidden;">
                     <ImageBox id="isExpander" {...props} PanelWidth={${width}} fieldKey={"${field}"} />
                 </div>
             </div>`);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 17d0a533e..12edb2c2a 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -257,7 +257,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
             if (e.key === "s" || e.key === "p") {
 
-                htmlToImage.toPng(this._mainCont.current!, { width: bounds.width, height: bounds.height, quality: 1 }).then((dataUrl) => {
+                htmlToImage.toPng(this._mainCont.current!, { width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, quality: 1 }).then((dataUrl) => {
                     selected.map(d => {
                         this.props.removeDocument(d);
                         d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 260630216..cf8bcbb42 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -227,7 +227,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
     fullScreenClicked = (e: React.MouseEvent): void => {
-        const doc = Doc.MakeDelegate(FieldValue(this.Document.proto));
+        const doc = Doc.MakeCopy(this.props.Document, false);
         if (doc) {
             CollectionDockingView.Instance.OpenFullScreen(doc);
         }
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 2ae816da4..de72be3ea 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -140,7 +140,7 @@ export namespace Doc {
         return Cast(Get(doc, key, ignoreProto), ctor) as FieldResult<T>;
     }
     export async function SetOnPrototype(doc: Doc, key: string, value: Field) {
-        const proto = Object.getOwnPropertyNames(doc).indexOf("isPrototype") == -1 ? doc.proto : doc;
+        const proto = Object.getOwnPropertyNames(doc).indexOf("isPrototype") === -1 ? doc.proto : doc;
 
         if (proto) {
             proto[key] = value;
@@ -178,9 +178,10 @@ export namespace Doc {
     }
 
     export function MakeAlias(doc: Doc) {
+        const proto = Object.getOwnPropertyNames(doc).indexOf("isPrototype") === -1 ? doc.proto : undefined;
         const alias = new Doc;
 
-        if (!doc.proto) {
+        if (!proto) {
             alias.proto = doc;
         } else {
             PromiseValue(Cast(doc.proto, Doc)).then(proto => {
-- 
cgit v1.2.3-70-g09d2


From 171f285b5e61d7a0591578f1499f81b779a3c340 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 16 May 2019 15:54:34 -0400
Subject: fixed ? pdf rendering.   freezing text boxes.

---
 src/client/views/nodes/FormattedTextBox.tsx | 12 ++++++------
 src/client/views/nodes/PDFBox.tsx           | 25 +++++++++++++++----------
 2 files changed, 21 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8e04071c7..f24d4ae88 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -269,14 +269,14 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
     }
 
     //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
-    textCapability = (e: React.MouseEvent): void => {
+    freezeNativeDimensions = (e: React.MouseEvent): void => {
         if (NumCast(this.props.Document.nativeWidth)) {
-            this.props.Document.nativeWidth = undefined;
-            this.props.Document.nativeHeight = undefined;
+            this.props.Document.proto!.nativeWidth = undefined;
+            this.props.Document.proto!.nativeHeight = undefined;
 
         } else {
-            this.props.Document.nativeWidth = this.props.Document[WidthSym]();
-            this.props.Document.nativeHeight = this.props.Document[HeightSym]();
+            this.props.Document.proto!.nativeWidth = this.props.Document[WidthSym]();
+            this.props.Document.proto!.nativeHeight = this.props.Document[HeightSym]();
         }
     }
     specificContextMenu = (e: React.MouseEvent): void => {
@@ -286,7 +286,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         }
         ContextMenu.Instance.addItem({
             description: NumCast(this.props.Document.nativeWidth) ? "Unfreeze" : "Freeze",
-            event: this.textCapability
+            event: this.freezeNativeDimensions
         });
     }
 
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 14fe2df80..f6328fa83 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -71,13 +71,14 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     @computed private get thumbnailPage() { return NumCast(this.props.Document.thumbnailPage, -1); }
 
     componentDidMount() {
+        let wasSelected = false;
         this._reactionDisposer = reaction(
-            () => [SelectionManager.SelectedDocuments().slice()],
+            () => this.props.isSelected(),
             () => {
-                if (this.curPage > 0 && this.thumbnailPage > 0 && this.curPage !== this.thumbnailPage && !this.props.isSelected()) {
+                if (this.curPage > 0 && this.curPage !== this.thumbnailPage && wasSelected && !this.props.isSelected()) {
                     this.saveThumbnail();
-                    this._interactive = true;
                 }
+                wasSelected = this._interactive = this.props.isSelected();
             },
             { fireImmediately: true });
 
@@ -256,7 +257,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
                 .catch(function (error: any) {
                     console.error('oops, something went wrong!', error);
                 });
-        }, 250);
+        }, 1250);
     }
 
     @action
@@ -283,24 +284,27 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     }
     @computed
     get pdfPage() {
-        return <Page height={this.renderHeight} pageNumber={this.curPage} onLoadSuccess={this.onLoaded} />;
+        console.log(this.curPage);
+        return <Page height={this.renderHeight} renderTextLayer={false} pageNumber={this.curPage} onLoadSuccess={this.onLoaded} />;
     }
     @computed
     get pdfContent() {
+        trace();
         let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField);
         if (!pdfUrl) {
             return <p>No pdf url to render</p>;
         }
-        let body = NumCast(this.props.Document.nativeHeight) ?
-            this.pdfPage :
+        let pdfpage = this.pdfPage;
+        let body = this.Document.nativeHeight ?
+            pdfpage :
             <Measure offset onResize={this.setScaling}>
                 {({ measureRef }) =>
                     <div className="pdfBox-page" ref={measureRef}>
-                        {this.pdfPage}
+                        {pdfpage}
                     </div>
                 }
             </Measure>;
-        let xf = NumCast(this.Document.nativeHeight) / this.renderHeight;
+        let xf = (this.Document.nativeHeight || 0) / this.renderHeight;
         return <div className="pdfBox-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}>
             <Document file={window.origin + RouteStore.corsProxy + `/${pdfUrl.url}`} renderMode={this._renderAsSvg ? "svg" : "canvas"}>
                 {body}
@@ -336,7 +340,8 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     @action onKeyDown = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = true);
     @action onKeyUp = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = false);
     render() {
-        let classname = "pdfBox-cont"; // + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
+        trace();
+        let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
         return (
             <div className={classname} tabIndex={0} ref={this._mainDiv} onPointerDown={this.onPointerDown} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} >
                 {this.pdfRenderer}
-- 
cgit v1.2.3-70-g09d2


From c96e61de2cea0fee1f6c80caf426535dbdc3d37c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 16 May 2019 16:08:53 -0400
Subject: Changed Clear DB Button

---
 .vscode/launch.json       | 9 +++++++++
 src/client/views/Main.tsx | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/.vscode/launch.json b/.vscode/launch.json
index e92a4949a..452acc823 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -13,6 +13,15 @@
             "url": "http://localhost:1050/login",
             "webRoot": "${workspaceFolder}",
         },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against Dash server",
+            "sourceMaps": true,
+            "breakOnLoad": true,
+            "url": "http://dash-web.eastus2.cloudapp.azure.com:1050/login",
+            "webRoot": "${workspaceFolder}",
+        },
         {
             "type": "node",
             "request": "attach",
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 7aef7d3e5..866da010a 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -244,7 +244,7 @@ export class Main extends React.Component {
         let logoutRef = React.createRef<HTMLDivElement>();
 
         return [
-            <button className="clear-db-button" key="clear-db" onClick={DocServer.DeleteDatabase}>Clear Database</button>,
+            <button className="clear-db-button" key="clear-db" onClick={e => e.shiftKey && e.ctrlKey && DocServer.DeleteDatabase()}>Clear Database</button>,
             <div id="toolbar" key="toolbar">
                 <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
-- 
cgit v1.2.3-70-g09d2


From b29a0d1cef60b55f609fcd94ad38232ae557e681 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 16 May 2019 18:32:57 -0400
Subject: Fixed linter errors

---
 src/client/goldenLayout.d.ts                       |  3 +++
 src/client/northstar/dash-fields/HistogramField.ts |  2 +-
 src/client/northstar/model/ModelHelpers.ts         |  9 +++----
 src/client/util/DragManager.ts                     |  2 +-
 src/client/util/RichTextSchema.tsx                 | 16 +++++------
 src/client/util/TooltipTextMenu.tsx                | 13 ++++-----
 src/client/views/DocumentDecorations.tsx           | 31 +++++++++++-----------
 src/client/views/PresentationView.tsx              |  4 +--
 src/client/views/TemplateMenu.tsx                  |  4 +--
 .../views/collections/CollectionDockingView.tsx    |  5 ++--
 .../views/collections/CollectionSchemaView.tsx     | 10 +++----
 .../views/collections/CollectionTreeView.tsx       |  9 ++++---
 .../collections/collectionFreeForm/MarqueeView.tsx | 13 ++++-----
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  2 +-
 src/client/views/nodes/DocumentView.tsx            |  2 +-
 src/client/views/nodes/FormattedTextBox.tsx        |  8 +++---
 src/client/views/nodes/ImageBox.tsx                |  2 +-
 src/client/views/nodes/KeyValueBox.tsx             |  2 +-
 src/client/views/nodes/KeyValuePair.tsx            |  3 ++-
 src/client/views/nodes/VideoBox.tsx                | 22 +++++++--------
 src/new_fields/CursorField.ts                      |  6 ++---
 src/new_fields/Doc.ts                              |  4 +--
 src/new_fields/ObjectField.ts                      |  2 +-
 .../authentication/models/current_user_utils.ts    |  2 +-
 24 files changed, 91 insertions(+), 85 deletions(-)
 create mode 100644 src/client/goldenLayout.d.ts

(limited to 'src')

diff --git a/src/client/goldenLayout.d.ts b/src/client/goldenLayout.d.ts
new file mode 100644
index 000000000..b50240563
--- /dev/null
+++ b/src/client/goldenLayout.d.ts
@@ -0,0 +1,3 @@
+
+declare const GoldenLayout: any;
+export = GoldenLayout;
\ No newline at end of file
diff --git a/src/client/northstar/dash-fields/HistogramField.ts b/src/client/northstar/dash-fields/HistogramField.ts
index aabc77bb2..1ee2189b9 100644
--- a/src/client/northstar/dash-fields/HistogramField.ts
+++ b/src/client/northstar/dash-fields/HistogramField.ts
@@ -52,7 +52,7 @@ export class HistogramField extends ObjectField {
 
     [Copy]() {
         let y = this.HistoOp;
-        let z = this.HistoOp["Copy"];
+        let z = this.HistoOp.Copy;
         return new HistogramField(HistogramOperation.Duplicate(this.HistoOp));
     }
 }
\ No newline at end of file
diff --git a/src/client/northstar/model/ModelHelpers.ts b/src/client/northstar/model/ModelHelpers.ts
index 80bb71224..88e6e72b8 100644
--- a/src/client/northstar/model/ModelHelpers.ts
+++ b/src/client/northstar/model/ModelHelpers.ts
@@ -32,12 +32,9 @@ export class ModelHelpers {
 
     public static GetAggregateParametersIndex(histogramResult: HistogramResult, aggParameters?: AggregateParameters): number {
         return Array.from(histogramResult.aggregateParameters!).findIndex((value, i, set) => {
-            if (set[i] instanceof CountAggregateParameters && value instanceof CountAggregateParameters)
-                return true;
-            if (set[i] instanceof MarginAggregateParameters && value instanceof MarginAggregateParameters)
-                return true;
-            if (set[i] instanceof SumAggregateParameters && value instanceof SumAggregateParameters)
-                return true;
+            if (set[i] instanceof CountAggregateParameters && value instanceof CountAggregateParameters) return true;
+            if (set[i] instanceof MarginAggregateParameters && value instanceof MarginAggregateParameters) return true;
+            if (set[i] instanceof SumAggregateParameters && value instanceof SumAggregateParameters) return true;
             return false;
         });
     }
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 26da34e67..05eb5c38a 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -41,7 +41,7 @@ export function SetupDrag(_reference: React.RefObject<HTMLElement>, docFunc: ()
 export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: number, sourceDoc: Doc) {
     let srcTarg = sourceDoc.proto;
     let draggedDocs: Doc[] = [];
-    let draggedFromDocs: Doc[] = []
+    let draggedFromDocs: Doc[] = [];
     if (srcTarg) {
         let linkToDocs = await DocListCastAsync(srcTarg.linkedToDocs);
         let linkFromDocs = await DocListCastAsync(srcTarg.linkedFromDocs);
diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
index c0e6f7899..3e3e98206 100644
--- a/src/client/util/RichTextSchema.tsx
+++ b/src/client/util/RichTextSchema.tsx
@@ -97,13 +97,13 @@ export const nodes: { [index: string]: NodeSpec } = {
                     title: dom.getAttribute("title"),
                     alt: dom.getAttribute("alt"),
                     width: Math.min(100, Number(dom.getAttribute("width"))),
-                }
+                };
             }
         }],
         // TODO if we don't define toDom, something weird happens: dragging the image will not move it but clone it. Why?
         toDOM(node) {
-            const attrs = { style: `width: ${node.attrs.width}` }
-            return ["img", { ...node.attrs, ...attrs }]
+            const attrs = { style: `width: ${node.attrs.width}` };
+            return ["img", { ...node.attrs, ...attrs }];
         }
     },
 
@@ -375,7 +375,7 @@ export class ImageResizeView {
                 const currentX = e.pageX;
                 const diffInPx = currentX - startX;
                 self._outer.style.width = `${startWidth + diffInPx}`;
-            }
+            };
 
             const onpointerup = () => {
                 document.removeEventListener("pointermove", onpointermove);
@@ -384,11 +384,11 @@ export class ImageResizeView {
                     view.state.tr.setNodeMarkup(getPos(), null,
                         { src: node.attrs.src, width: self._outer.style.width })
                         .setSelection(view.state.selection));
-            }
+            };
 
-            document.addEventListener("pointermove", onpointermove)
-            document.addEventListener("pointerup", onpointerup)
-        }
+            document.addEventListener("pointermove", onpointermove);
+            document.addEventListener("pointerup", onpointerup);
+        };
 
         this._outer.appendChild(this._handle);
         this._outer.appendChild(this._img);
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 6eb654319..223921428 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -175,7 +175,7 @@ export class TooltipTextMenu {
             this.linkText.style.width = "150px";
             this.linkText.style.overflow = "hidden";
             this.linkText.style.color = "white";
-            this.linkText.onpointerdown = (e: PointerEvent) => { e.stopPropagation(); }
+            this.linkText.onpointerdown = (e: PointerEvent) => { e.stopPropagation(); };
             let linkBtn = document.createElement("div");
             linkBtn.textContent = ">>";
             linkBtn.style.width = "20px";
@@ -192,8 +192,9 @@ export class TooltipTextMenu {
                         let docid = href.replace(DocServer.prepend("/doc/"), "");
                         DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
                             if (f instanceof Doc) {
-                                if (DocumentManager.Instance.getDocumentView(f))
+                                if (DocumentManager.Instance.getDocumentView(f)) {
                                     DocumentManager.Instance.getDocumentView(f)!.props.focus(f);
+                                }
                                 else CollectionDockingView.Instance.AddRightSplit(f);
                             }
                         }));
@@ -201,7 +202,7 @@ export class TooltipTextMenu {
                     e.stopPropagation();
                     e.preventDefault();
                 }
-            }
+            };
             this.linkDrag = document.createElement("img");
             this.linkDrag.src = "https://seogurusnyc.com/wp-content/uploads/2016/12/link-1.png";
             this.linkDrag.style.width = "20px";
@@ -216,12 +217,12 @@ export class TooltipTextMenu {
                     {
                         handlers: {
                             dragComplete: action(() => {
-                                let m = dragData.droppedDocuments as Doc[];
+                                let m = dragData.droppedDocuments;
                                 this.makeLink(DocServer.prepend("/doc/" + m[0][Id]));
                             }),
                         },
                         hideSource: false
-                    })
+                    });
             };
             this.linkEditor.appendChild(this.linkDrag);
             this.linkEditor.appendChild(this.linkText);
@@ -239,7 +240,7 @@ export class TooltipTextMenu {
                 e.stopPropagation();
                 e.preventDefault();
             }
-        }
+        };
         this.tooltip.appendChild(this.linkEditor);
     }
 
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b2c65a31f..7083b1003 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -250,22 +250,21 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 selectedDocs[0].props.removeDocument && selectedDocs[0].props.removeDocument(this._iconDoc);
             }
             if (!this._removeIcon) {
-                if (selectedDocs.length === 1)
+                if (selectedDocs.length === 1) {
                     this.getIconDoc(selectedDocs[0]).then(icon => selectedDocs[0].props.toggleMinimized());
-                else
-                    if (Math.abs(e.pageX - this._downX) < Utils.DRAG_THRESHOLD &&
-                        Math.abs(e.pageY - this._downY) < Utils.DRAG_THRESHOLD) {
-                        let docViews = SelectionManager.ViewsSortedVertically();
-                        let topDocView = docViews[0];
-                        let ind = topDocView.templates.indexOf(Templates.Bullet.Layout);
-                        if (ind !== -1) {
-                            topDocView.templates.splice(ind, 1);
-                            topDocView.props.Document.subBulletDocs = undefined;
-                        } else {
-                            topDocView.addTemplate(Templates.Bullet);
-                            topDocView.props.Document.subBulletDocs = new List<Doc>(docViews.filter(v => v !== topDocView).map(v => v.props.Document.proto!));
-                        }
+                } else if (Math.abs(e.pageX - this._downX) < Utils.DRAG_THRESHOLD &&
+                    Math.abs(e.pageY - this._downY) < Utils.DRAG_THRESHOLD) {
+                    let docViews = SelectionManager.ViewsSortedVertically();
+                    let topDocView = docViews[0];
+                    let ind = topDocView.templates.indexOf(Templates.Bullet.Layout);
+                    if (ind !== -1) {
+                        topDocView.templates.splice(ind, 1);
+                        topDocView.props.Document.subBulletDocs = undefined;
+                    } else {
+                        topDocView.addTemplate(Templates.Bullet);
+                        topDocView.props.Document.subBulletDocs = new List<Doc>(docViews.filter(v => v !== topDocView).map(v => v.props.Document.proto!));
                     }
+                }
             }
             this._removeIcon = false;
         }
@@ -537,9 +536,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                         if (temp !== Templates.Bullet.Layout || i === 0) {
                             res.push(temp);
                         }
-                    })
+                    });
                 }
-                return res
+                return res;
             }, [] as string[]);
             let checked = false;
             docTemps.forEach(temp => {
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index 098e725c7..7d0dc2913 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
-import React = require("react")
+import React = require("react");
 import { observable, action, runInAction, reaction } from "mobx";
-import "./PresentationView.scss"
+import "./PresentationView.scss";
 import "./Main.tsx";
 import { DocumentManager } from "../util/DocumentManager";
 import { Utils } from "../../Utils";
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index cfe1b0663..e5b679e24 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -43,7 +43,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
     @action
     toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => {
         if (event.target.checked) {
-            if (template.Name == "Bullet") {
+            if (template.Name === "Bullet") {
                 let topDocView = this.props.docs[0];
                 topDocView.addTemplate(template);
                 topDocView.props.Document.subBulletDocs = new List<Doc>(this.props.docs.filter(v => v !== topDocView).map(v => v.props.Document.proto!));
@@ -52,7 +52,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
             }
             this.props.templates.set(template, true);
         } else {
-            if (template.Name == "Bullet") {
+            if (template.Name === "Bullet") {
                 let topDocView = this.props.docs[0];
                 topDocView.removeTemplate(template);
                 topDocView.props.Document.subBulletDocs = undefined;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 58f1e33a1..deec64225 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -83,7 +83,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                     child.contentItems[0].remove();
                     this.layoutChanged(document);
                     return true;
-                } else
+                } else {
                     Array.from(child.contentItems).filter((tab: any) => tab.config.component === "DocumentFrameRenderer").some((tab: any, j: number) => {
                         if (Doc.AreProtosEqual(DocumentManager.Instance.getDocumentViewById(tab.config.props.documentId)!.Document, document)) {
                             child.contentItems[j].remove();
@@ -94,8 +94,9 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                         }
                         return false;
                     });
+                }
                 return false;
-            })
+            });
         }
         if (retVal) {
             this.stateChanged();
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index f4ad5b357..497dfde88 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -90,7 +90,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         let fieldContentView = <FieldView {...props} />;
         let reference = React.createRef<HTMLDivElement>();
         let onItemDown = (e: React.PointerEvent) =>
-            (this.props.CollectionView!.props.isSelected() ?
+            (this.props.CollectionView.props.isSelected() ?
                 SetupDrag(reference, () => props.Document, this.props.moveDocument)(e) : undefined);
         let applyToDoc = (doc: Doc, run: (args?: { [name: string]: any }) => any) => {
             const res = run({ this: doc });
@@ -127,7 +127,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                         }
                         const run = script.run;
                         //TODO This should be able to be refactored to compile the script once
-                        const val = await DocListCastAsync(this.props.Document[this.props.fieldKey])
+                        const val = await DocListCastAsync(this.props.Document[this.props.fieldKey]);
                         val && val.forEach(doc => applyToDoc(doc, run));
                     }}>
                 </EditableView>
@@ -230,14 +230,14 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         DocListCast(this.props.Document.data).map(doc => {
             csv += self.columns.reduce((val, col) => val + (doc[col] ? doc[col]!.toString() : "") + ",", "");
             csv = csv.substr(0, csv.length - 1) + "\n";
-        })
+        });
         csv.substring(0, csv.length - 1);
         let dbName = StrCast(this.props.Document.title);
         let res = await Gateway.Instance.PostSchema(csv, dbName);
         if (self.props.CollectionView.props.addDocument) {
             let schemaDoc = await Docs.DBDocument("https://www.cs.brown.edu/" + dbName, { title: dbName });
             if (schemaDoc) {
-                self.props.CollectionView.props.addDocument(schemaDoc, false); 
+                self.props.CollectionView.props.addDocument(schemaDoc, false);
             }
         }
     }
@@ -263,7 +263,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     get previewDocument(): Doc | undefined {
         const children = DocListCast(this.props.Document[this.props.fieldKey]);
         const selected = children.length > this._selectedIndex ? FieldValue(children[this._selectedIndex]) : undefined;
-        return selected ? (this.previewScript && this.previewScript != "this" ? FieldValue(Cast(selected[this.previewScript], Doc)) : selected) : undefined;
+        return selected ? (this.previewScript && this.previewScript !== "this" ? FieldValue(Cast(selected[this.previewScript], Doc)) : selected) : undefined;
     }
     get tableWidth() { return (this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH) * (1 - this.splitPercentage / 100); }
     get previewRegionHeight() { return this.props.PanelHeight() - 2 * this.borderWidth; }
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 70c09d97c..6acef434e 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -56,7 +56,7 @@ class TreeView extends React.Component<TreeViewProps> {
         } else {
             CollectionDockingView.Instance.AddRightSplit(this.props.document);
         }
-    };
+    }
 
     get children() {
         return Cast(this.props.document.data, listSpec(Doc), []); // bcz: needed?    .filter(doc => FieldValue(doc));
@@ -184,8 +184,9 @@ class TreeView extends React.Component<TreeViewProps> {
                             {TreeView.GetChildElements(doc instanceof Doc ? [doc] : docList, key !== "data", (doc: Doc) => this.remove(doc, key), this.move, this.props.dropAction)}
                         </div>
                     </ul >);
-                } else
+                } else {
                     bulletType = BulletType.Collapsed;
+                }
             }
         });
         return <div className="treeViewItem-container"
@@ -198,8 +199,8 @@ class TreeView extends React.Component<TreeViewProps> {
         </div>;
     }
     public static GetChildElements(docs: Doc[], allowMinimized: boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) {
-        return docs.filter(child => child instanceof Doc && !child.excludeFromLibrary && (allowMinimized || !child.isMinimized)).filter(doc => FieldValue(doc)).map(child =>
-            <TreeView document={child as Doc} key={(child as Doc)[Id]} deleteDoc={remove} moveDocument={move} dropAction={dropAction} />);
+        return docs.filter(child => !child.excludeFromLibrary && (allowMinimized || !child.isMinimized)).map(child =>
+            <TreeView document={child} key={child[Id]} deleteDoc={remove} moveDocument={move} dropAction={dropAction} />);
     }
 }
 
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 12edb2c2a..c3c4115b8 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -63,7 +63,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             e.preventDefault();
             (async () => {
                 let text: string = await navigator.clipboard.readText();
-                let ns = text.split("\n").filter(t => t.trim() != "\r" && t.trim() != "");
+                let ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== "");
                 for (let i = 0; i < ns.length - 1; i++) {
                     while (!(ns[i].trim() === "" || ns[i].endsWith("-\r") || ns[i].endsWith("-") ||
                         ns[i].endsWith(";\r") || ns[i].endsWith(";") ||
@@ -80,7 +80,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     let newBox = Docs.TextDocument({ width: 200, height: 35, x: x + indent / 3 * 10, y: y, documentText: "@@@" + line, title: line });
                     this.props.addDocument(newBox, false);
                     y += 40 * this.props.getTransform().Scale;
-                })
+                });
             })();
         } else if (e.key === "b" && e.ctrlKey) {
             //heuristically converts pasted text into a table.
@@ -93,9 +93,10 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             e.preventDefault();
             (async () => {
                 let text: string = await navigator.clipboard.readText();
-                let ns = text.split("\n").filter(t => t.trim() != "\r" && t.trim() != "");
-                while (ns.length > 0 && ns[0].split("\t").length < 2)
+                let ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== "");
+                while (ns.length > 0 && ns[0].split("\t").length < 2) {
                     ns.splice(0, 1);
+                }
                 if (ns.length > 0) {
                     let columns = ns[0].split("\t");
                     let docList: Doc[] = [];
@@ -109,7 +110,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                         let doc = new Doc();
                         columns.forEach((col, i) => doc[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined));
                         if (groupAttr) {
-                            doc["_group"] = groupAttr;
+                            doc._group = groupAttr;
                         }
                         doc.title = i.toString();
                         docList.push(doc);
@@ -284,7 +285,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     //     summarizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), 0]);
                     // });
                     this.props.addLiveTextDocument(summary);
-                })
+                });
             }
             else {
                 this.props.addDocument(newCollection, false);
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 7c7ca9e25..d4f660b3f 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -149,7 +149,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                         let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(minx, miny);
                         maximizedDoc.willMaximize = isMinimized;
                         maximizedDoc.isMinimized = false;
-                        maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], Date.now(), isMinimized ? 1 : 0])
+                        maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], Date.now(), isMinimized ? 1 : 0]);
                     }
                 }
             });
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index cf8bcbb42..428dd9b36 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -244,7 +244,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
             const protoDest = destDoc.proto;
             const protoSrc = sourceDoc.proto;
-            if (de.mods == "Control") {
+            if (de.mods === "Control") {
                 let src = protoSrc ? protoSrc : sourceDoc;
                 let dst = protoDest ? protoDest : destDoc;
                 dst.data = src;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index f24d4ae88..f30022508 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -184,7 +184,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 state: field && field.Data ? EditorState.fromJSON(config, JSON.parse(field.Data)) : EditorState.create(config),
                 dispatchTransaction: this.dispatchTransaction,
                 nodeViews: {
-                    image(node, view, getPos) { return new ImageResizeView(node, view, getPos) }
+                    image(node, view, getPos) { return new ImageResizeView(node, view, getPos); }
                 }
             });
             let text = StrCast(this.props.Document.documentText);
@@ -232,9 +232,11 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                     let docid = href.replace(DocServer.prepend("/doc/"), "").split("?")[0];
                     DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
                         if (f instanceof Doc) {
-                            if (DocumentManager.Instance.getDocumentView(f))
+                            if (DocumentManager.Instance.getDocumentView(f)) {
                                 DocumentManager.Instance.getDocumentView(f)!.props.focus(f);
-                            else CollectionDockingView.Instance.AddRightSplit(f);
+                            } else {
+                                CollectionDockingView.Instance.AddRightSplit(f);
+                            }
                         }
                     }));
                 }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 6472ae711..3cc60a6c5 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -165,7 +165,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => (p as ImageField).url.href);
         let nativeWidth = FieldValue(this.Document.nativeWidth, (this.props.PanelWidth as any) as string ? Number((this.props.PanelWidth as any) as string) : 50);
         let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
-        let id = this.props.id; // bcz: used to set id = "isExpander" in templates.tsx
+        let id = (this.props as any).id; // bcz: used to set id = "isExpander" in templates.tsx
         return (
             <div id={id} className={`imageBox-cont${interactive}`} onPointerDown={this.onPointerDown} onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
                 <img id={id} src={paths[Math.min(paths.length, this._photoIndex)]}
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index c9d665ceb..86437a6c1 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -18,7 +18,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     @observable private _keyInput: string = "";
     @observable private _valueInput: string = "";
     @computed get splitPercentage() { return NumCast(this.props.Document.schemaSplitPercentage, 50); }
-    get fieldDocToLayout() { return this.props.fieldKey ? FieldValue(Cast(this.props.Document[this.props.fieldKey], Doc)) : this.props.Document }
+    get fieldDocToLayout() { return this.props.fieldKey ? FieldValue(Cast(this.props.Document[this.props.fieldKey], Doc)) : this.props.Document; }
 
     constructor(props: FieldViewProps) {
         super(props);
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 5de660d57..4f7919f50 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -46,8 +46,9 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                 <td className="keyValuePair-td-key" style={{ width: `${this.props.keyWidth}%` }}>
                     <div className="keyValuePair-td-key-container">
                         <button className="keyValuePair-td-key-delete" onClick={() => {
-                            if (Object.keys(props.Document).indexOf(props.fieldKey) !== -1)
+                            if (Object.keys(props.Document).indexOf(props.fieldKey) !== -1) {
                                 props.Document[props.fieldKey] = undefined;
+                            }
                             else props.Document.proto![props.fieldKey] = undefined;
                         }}>
                             X
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 96dc884c8..81c429a02 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -70,7 +70,7 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
     }
 
     @action
-    updateTimecode = () => this.player && (this.props.Document.curPage = this.player.currentTime);
+    updateTimecode = () => this.player && (this.props.Document.curPage = this.player.currentTime)
 
     componentDidMount() {
         if (this.props.setVideoBox) this.props.setVideoBox(this);
@@ -106,31 +106,31 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
                     "user-agent": 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/46.0',
                 },
 
-            }
+            };
             try {
                 let responseSchema: any = {};
-                const videoInfoResponse = await rp.get(DocServer.prepend(RouteStore.corsProxy + "/" + `https://www.youtube.com/watch?v=${videoId}`), videoInfoRequestConfig)
+                const videoInfoResponse = await rp.get(DocServer.prepend(RouteStore.corsProxy + "/" + `https://www.youtube.com/watch?v=${videoId}`), videoInfoRequestConfig);
                 const dataHtml = videoInfoResponse;
                 const start = dataHtml.indexOf('ytplayer.config = ') + 18;
                 const end = dataHtml.indexOf(';ytplayer.load');
-                const subString = dataHtml.substring(start, end)
+                const subString = dataHtml.substring(start, end);
                 const subJson = JSON.parse(subString);
                 const stringSub = subJson.args.player_response;
                 const stringSubJson = JSON.parse(stringSub);
                 const adaptiveFormats = stringSubJson.streamingData.adaptiveFormats;
-                const videoDetails = stringSubJson.videoDetails
-                responseSchema["adaptiveFormats"] = adaptiveFormats;
-                responseSchema["videoDetails"] = videoDetails;
-                resolve(responseSchema)
+                const videoDetails = stringSubJson.videoDetails;
+                responseSchema.adaptiveFormats = adaptiveFormats;
+                responseSchema.videoDetails = videoDetails;
+                resolve(responseSchema);
             }
             catch (err) {
                 console.log(`
                 --- Youtube ---
                 Function: getMp4ForVideo
-                Error: `, err)
-                reject(err)
+                Error: `, err);
+                reject(err);
             }
-        })
+        });
     }
     onPointerDown = (e: React.PointerEvent) => {
         e.preventDefault();
diff --git a/src/new_fields/CursorField.ts b/src/new_fields/CursorField.ts
index 7fd326a5f..fc144222c 100644
--- a/src/new_fields/CursorField.ts
+++ b/src/new_fields/CursorField.ts
@@ -6,17 +6,17 @@ import { serializable, createSimpleSchema, object } from "serializr";
 export type CursorPosition = {
     x: number,
     y: number
-}
+};
 
 export type CursorMetadata = {
     id: string,
     identifier: string
-}
+};
 
 export type CursorData = {
     metadata: CursorMetadata,
     position: CursorPosition
-}
+};
 
 const PositionSchema = createSimpleSchema({
     x: true,
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index de72be3ea..c898f697b 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -42,8 +42,8 @@ export function DocListCastAsync(field: FieldResult, defaultValue?: Doc[]) {
     return list ? Promise.all(list).then(() => list) : Promise.resolve(defaultValue);
 }
 
-export function DocListCast(field: FieldResult) {
-    return Cast(field, listSpec(Doc), []).filter(d => d && d instanceof Doc).map(d => d as Doc);
+export function DocListCast(field: FieldResult): Doc[] {
+    return Cast(field, listSpec(Doc), []).filter(d => d && d instanceof Doc) as Doc[];
 }
 
 @Deserializable("doc").withFields(["id"])
diff --git a/src/new_fields/ObjectField.ts b/src/new_fields/ObjectField.ts
index f276bfa67..51768c6db 100644
--- a/src/new_fields/ObjectField.ts
+++ b/src/new_fields/ObjectField.ts
@@ -6,7 +6,7 @@ export const Parent = Symbol("Parent");
 export const Copy = Symbol("Copy");
 
 export abstract class ObjectField {
-    protected [OnUpdate](diff?: any) { };
+    protected [OnUpdate](diff?: any) { }
     private [Parent]?: RefField | ObjectField;
     abstract [Copy](): ObjectField;
 }
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 5b63ac356..aef2d3f4a 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -66,7 +66,7 @@ export class CurrentUserUtils {
             NorthstarSettings.Instance.UpdateEnvironment(await getEnvironment.json());
             await Gateway.Instance.ClearCatalog();
             const extraSchemas = Cast(CurrentUserUtils.UserDocument.DBSchemas, listSpec("string"), []);
-            let extras = await Promise.all(extraSchemas.map(async sc => await Gateway.Instance.GetSchema("", sc)));
+            let extras = await Promise.all(extraSchemas.map(sc => Gateway.Instance.GetSchema("", sc)));
             let catprom = CurrentUserUtils.SetNorthstarCatalog(await Gateway.Instance.GetCatalog(), extras);
             if (catprom) await Promise.all(catprom);
         } catch (e) {
-- 
cgit v1.2.3-70-g09d2


From a2333e76fea26d2ce03272947d8a89973489fa46 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 16 May 2019 20:31:21 -0400
Subject: Made KVP not render while documents are loading

---
 src/client/views/nodes/DocumentContentsView.tsx | 12 +++++++++---
 src/new_fields/util.ts                          | 22 ++++++++++++++--------
 2 files changed, 23 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index f3d76c49b..e96a0f068 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -46,10 +46,16 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
     layoutKey: string,
 }> {
     @computed get layout(): string {
-        return StrCast(this.props.Document[this.props.layoutKey],
-            this.props.Document.data ?
+        const layout = Cast(this.props.Document[this.props.layoutKey], "string");
+        if (layout === undefined) {
+            return this.props.Document.data ?
                 "<FieldView {...props} fieldKey='data' />" :
-                KeyValueBox.LayoutString(this.props.Document.proto ? "proto" : ""));
+                KeyValueBox.LayoutString(this.props.Document.proto ? "proto" : "");
+        } else if (typeof layout === "string") {
+            return layout;
+        } else {
+            return "<p>Loading layout</p>";
+        }
     }
 
     CreateBindings(): JsxBindings {
diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts
index a5f5e368b..3a16a6b42 100644
--- a/src/new_fields/util.ts
+++ b/src/new_fields/util.ts
@@ -55,6 +55,17 @@ export function getter(target: any, prop: string | symbol | number, receiver: an
     }
     return getField(target, prop);
 }
+function getProtoField(protoField: Doc | undefined, prop: string | number, cb?: (field: Field | undefined) => void) {
+    if (!protoField) return undefined;
+    let field = protoField[prop];
+    if (field instanceof Promise) {
+        cb && field.then(cb);
+        return field;
+    } else {
+        cb && cb(field);
+        return field;
+    }
+}
 
 //TODO The callback parameter is never being passed in currently, so we should be able to get rid of it.
 export function getField(target: any, prop: string | number, ignoreProto: boolean = false, callback?: (field: Field | undefined) => void): any {
@@ -65,14 +76,9 @@ export function getField(target: any, prop: string | number, ignoreProto: boolea
     if (field === undefined && !ignoreProto) {
         const proto = getField(target, "proto", true);
         if (proto instanceof Doc) {
-            let field = proto[prop];
-            if (field instanceof Promise) {
-                callback && field.then(callback);
-                return undefined;
-            } else {
-                callback && callback(field);
-                return field;
-            }
+            return getProtoField(proto, prop, callback);
+        } else if (proto instanceof Promise) {
+            return proto.then(async proto => getProtoField(proto, prop, callback));
         }
     }
     callback && callback(field);
-- 
cgit v1.2.3-70-g09d2


From c878f1153352db8bf87d47486a0e1f35a1a29f09 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 16 May 2019 20:46:44 -0400
Subject: Put open workspace right button on same line

---
 src/client/views/collections/CollectionTreeView.scss | 17 +++++++++++------
 src/client/views/collections/CollectionTreeView.tsx  |  2 +-
 2 files changed, 12 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 411d67ff7..5f82137c6 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -29,23 +29,24 @@
     }
 
     .bullet {
-        float:left;
+        float: left;
         position: relative;
         width: 15px;
         display: block;
         color: $intermediate-color;
         margin-top: 3px;
-        transform: scale(1.3,1.3);
+        transform: scale(1.3, 1.3);
     }
 
     .docContainer {
         margin-left: 10px;
         display: block;
-       // width:100%;//width: max-content;
+        // width:100%;//width: max-content;
     }
+
     .docContainer:hover {
         .treeViewItem-openRight {
-            display:inline;
+            display: inline;
         }
     }
 
@@ -61,10 +62,12 @@
         // margin-top: 3px;
         display: inline;
     }
+
     .treeViewItem-openRight {
         margin-left: 5px;
-        display:none;
+        display: none;
     }
+
     .docContainer:hover {
         .delete-button {
             display: inline;
@@ -73,14 +76,16 @@
     }
 
     .coll-title {
-        width:max-content;
+        width: max-content;
         display: block;
         font-size: 24px;
     }
+
     .collection-child {
         margin-top: 10px;
         margin-bottom: 10px;
     }
+
     .collectionTreeView-keyHeader {
         font-style: italic;
         font-size: 8pt;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 6acef434e..3fcc2bc70 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -112,7 +112,7 @@ class TreeView extends React.Component<TreeViewProps> {
         let editableView = (titleString: string) =>
             (<EditableView
                 oneLine={!this._isOver ? true : false}
-                display={"block"}
+                display={"inline-block"}
                 contents={titleString}
                 height={36}
                 GetValue={() => StrCast(this.props.document.title)}
-- 
cgit v1.2.3-70-g09d2


From 530dc40f7519b8288d91db61103468ab713dfbdd Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 16 May 2019 21:02:15 -0400
Subject: fixed some small layout issues related to isButton and  templates

---
 src/client/views/Templates.tsx                  | 4 ++--
 src/client/views/nodes/DocumentContentsView.tsx | 8 ++++++--
 src/client/views/nodes/DocumentView.tsx         | 3 +++
 src/client/views/nodes/ImageBox.scss            | 6 +++++-
 src/client/views/nodes/ImageBox.tsx             | 3 +--
 src/client/views/nodes/PDFBox.tsx               | 1 -
 6 files changed, 17 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 5d29e68ae..5a99b3d90 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -74,8 +74,8 @@ export namespace Templates {
     export function ImageOverlay(width: number, height: number, field: string = "thumbnail") {
         return (`<div>
                 <div style="height:100%; width:100%; position:absolute;">{layout}</div>
-                <div style="height:${height}px; bottom:0; right:0; background:rgba(0,0,0,0.25); position:absolute;overflow:hidden;">
-                    <ImageBox id="isExpander" {...props} PanelWidth={${width}} fieldKey={"${field}"} />
+                <div style="height:auto; width:${width}px; bottom:0; right:0; background:rgba(0,0,0,0.25); position:absolute;overflow:hidden;">
+                    <ImageBox id="isExpander" {...props} style="width:100%; height=auto;" PanelWidth={${width}} fieldKey={"${field}"} />
                 </div>
             </div>`);
     }
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index f3d76c49b..ace8d4aa5 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -21,7 +21,7 @@ import { HistogramBox } from "../../northstar/dash-nodes/HistogramBox";
 import React = require("react");
 import { FieldViewProps } from "./FieldView";
 import { Without, OmitKeys } from "../../../Utils";
-import { Cast, StrCast } from "../../../new_fields/Types";
+import { Cast, StrCast, NumCast } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
@@ -76,9 +76,13 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
             (this.props.layoutKey === "layout" && StrCast(this.props.Document.layout).indexOf("CollectionView") === -1)) {
             this.templates.forEach(template => {
                 let self = this;
+                // this scales constants in the markup by the scaling applied to the document, but caps the constants to be smaller
+                // than the width/height of the containing document
                 function convertConstantsToNative(match: string, offset: number, x: string) {
                     let px = Number(match.replace("px", ""));
-                    return `${px * self.props.ScreenToLocalTransform().Scale}px`;
+                    return `${Math.min(NumCast(self.props.Document.height, 0),
+                        Math.min(NumCast(self.props.Document.width, 0),
+                            px * self.props.ScreenToLocalTransform().Scale))}px`;
                 }
                 let nativizedTemplate = template.replace(/([0-9]+)px/g, convertConstantsToNative);
                 layout = nativizedTemplate.replace("{layout}", base);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 428dd9b36..40ad55d25 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -224,6 +224,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (doc.isButton && !doc.nativeWidth) {
             doc.nativeWidth = this.props.Document[WidthSym]();
             doc.nativeHeight = this.props.Document[HeightSym]();
+        } else {
+
+            doc.nativeWidth = doc.nativeHeight = undefined;
         }
     }
     fullScreenClicked = (e: React.MouseEvent): void => {
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 2316a050e..f1b73a676 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -25,7 +25,11 @@
 }
 
 .imageBox-cont img {
-    height: 100%;
+    height: auto;
+    width:100%;
+}
+.imageBox-cont-interactive img {
+    height: auto;
     width:100%;
 }
 
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 3cc60a6c5..a06adfcf0 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -42,8 +42,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     onLoad = (target: any) => {
         var h = this._imgRef.current!.naturalHeight;
         var w = this._imgRef.current!.naturalWidth;
-        console.log("title: " + this.Document.title);
-        if (this._photoIndex === 0) {
+        if (this._photoIndex === 0 && (this.props as any).id !== "isExpander") {
             Doc.SetOnPrototype(this.Document, "nativeHeight", FieldValue(this.Document.nativeWidth, 0) * h / w);
             this.Document.height = FieldValue(this.Document.width, 0) * h / w;
         }
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index f6328fa83..e71ac4924 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -284,7 +284,6 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     }
     @computed
     get pdfPage() {
-        console.log(this.curPage);
         return <Page height={this.renderHeight} renderTextLayer={false} pageNumber={this.curPage} onLoadSuccess={this.onLoaded} />;
     }
     @computed
-- 
cgit v1.2.3-70-g09d2


From 9d17f2aaaf8ffc229c7b02006070380b0b35e7d3 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 16 May 2019 21:38:38 -0400
Subject: Small change

---
 src/client/views/collections/CollectionSchemaView.tsx        |  2 +-
 src/client/views/collections/CollectionSubView.tsx           |  2 +-
 src/client/views/collections/CollectionTreeView.tsx          |  4 ++--
 .../collectionFreeForm/CollectionFreeFormView.tsx            | 12 ++++++------
 src/new_fields/Doc.ts                                        |  2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 497dfde88..a975d3fef 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -357,7 +357,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     render() {
         library.add(faCog);
         library.add(faPlus);
-        const children = this.children;
+        const children = this.childDocs;
         return (
             <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} onWheel={this.onWheel}
                 onDrop={(e: React.DragEvent) => this.onDrop(e, {})} onContextMenu={this.onContextMenu} ref={this.createTarget}>
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index ffd3e0659..864fdfa4b 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -47,7 +47,7 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
             this.createDropTarget(ele);
         }
 
-        get children() {
+        get childDocs() {
             //TODO tfs: This might not be what we want?
             //This linter error can't be fixed because of how js arguments work, so don't switch this to filter(FieldValue)
             return DocListCast(this.props.Document[this.props.fieldKey]);
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 3fcc2bc70..35a9f34cf 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -223,10 +223,10 @@ export class CollectionTreeView extends CollectionSubView(Document) {
     }
     render() {
         let dropAction = StrCast(this.props.Document.dropAction, "alias") as dropActionType;
-        if (!this.children) {
+        if (!this.childDocs) {
             return (null);
         }
-        let childElements = TreeView.GetChildElements(this.children, false, this.remove, this.props.moveDocument, dropAction);
+        let childElements = TreeView.GetChildElements(this.childDocs, false, this.remove, this.props.moveDocument, dropAction);
 
         return (
             <div id="body" className="collectionTreeView-dropTarget"
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6e4c79e62..ccc81f1ad 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -72,7 +72,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
     public getActiveDocuments = () => {
         const curPage = FieldValue(this.Document.curPage, -1);
-        return this.children.filter(doc => {
+        return this.childDocs.filter(doc => {
             var page = NumCast(doc.page, -1);
             return page === curPage || page === -1;
         });
@@ -90,7 +90,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                 let y = yp - de.data.yOffset / zoom;
                 let dropX = NumCast(de.data.droppedDocuments[0].x);
                 let dropY = NumCast(de.data.droppedDocuments[0].y);
-                de.data.droppedDocuments.map(d => {
+                de.data.droppedDocuments.forEach(d => {
                     d.x = x + NumCast(d.x) - dropX;
                     d.y = y + NumCast(d.y) - dropY;
                     if (!NumCast(d.width)) {
@@ -136,7 +136,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         if (!e.cancelBubble) {
             let x = this.Document.panX || 0;
             let y = this.Document.panY || 0;
-            let docs = this.children || [];
+            let docs = this.childDocs || [];
             let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
             if (!this.isAnnotationOverlay) {
                 let minx = docs.length ? NumCast(docs[0].x) : 0;
@@ -180,7 +180,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         // if (!this.props.active()) {
         //     return;
         // }
-        let childSelected = this.children.some(doc => {
+        let childSelected = this.childDocs.some(doc => {
             var dv = DocumentManager.Instance.getDocumentView(doc);
             return dv && SelectionManager.IsSelected(dv) ? true : false;
         });
@@ -239,7 +239,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
 
     bringToFront = (doc: Doc) => {
-        const docs = this.children;
+        const docs = this.childDocs;
         docs.slice().sort((doc1, doc2) => {
             if (doc1 === doc) return 1;
             if (doc2 === doc) return -1;
@@ -306,7 +306,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     @computed.struct
     get views() {
         let curPage = FieldValue(this.Document.curPage, -1);
-        let docviews = this.children.reduce((prev, doc) => {
+        let docviews = this.childDocs.reduce((prev, doc) => {
             if (!(doc instanceof Doc)) return prev;
             var page = NumCast(doc.page, -1);
             if (page === curPage || page === -1) {
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index c898f697b..f76999627 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -43,7 +43,7 @@ export function DocListCastAsync(field: FieldResult, defaultValue?: Doc[]) {
 }
 
 export function DocListCast(field: FieldResult): Doc[] {
-    return Cast(field, listSpec(Doc), []).filter(d => d && d instanceof Doc) as Doc[];
+    return Cast(field, listSpec(Doc), []).filter(d => d instanceof Doc) as Doc[];
 }
 
 @Deserializable("doc").withFields(["id"])
-- 
cgit v1.2.3-70-g09d2


From 6e65b1e32eb972358d9c8dbd7f8d984d3baefc4b Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 16 May 2019 22:56:19 -0400
Subject: fixed links so that you can adjust the pan location of a collection
 when its a link endoint

---
 src/client/util/DocumentManager.ts                        |  5 +++--
 src/client/util/DragManager.ts                            |  2 +-
 src/client/util/TooltipTextMenu.tsx                       |  1 -
 src/client/views/Main.tsx                                 |  2 +-
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx |  3 ++-
 src/client/views/nodes/DocumentView.tsx                   | 11 ++++++-----
 src/client/views/nodes/FormattedTextBox.tsx               |  4 +---
 src/client/views/nodes/LinkBox.tsx                        |  2 +-
 src/client/views/nodes/LinkMenu.tsx                       |  5 ++---
 src/new_fields/Doc.ts                                     | 10 ++++++----
 10 files changed, 23 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 51f5fbe9f..c6962ad8d 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -110,7 +110,8 @@ export class DocumentManager {
     }
 
     @undoBatch
-    public jumpToDocument = async (doc: Doc): Promise<void> => {
+    public jumpToDocument = async (docDelegate: Doc, makeCopy: boolean = true): Promise<void> => {
+        let doc = docDelegate.proto ? docDelegate.proto : docDelegate;
         const page = NumCast(doc.page, undefined);
         const contextDoc = await Cast(doc.annotationOn, Doc);
         if (contextDoc) {
@@ -122,7 +123,7 @@ export class DocumentManager {
             docView.props.focus(docView.props.Document);
         } else {
             if (!contextDoc) {
-                CollectionDockingView.Instance.AddRightSplit(Doc.MakeDelegate(doc));
+                CollectionDockingView.Instance.AddRightSplit(docDelegate ? (makeCopy ? Doc.MakeCopy(docDelegate) : docDelegate) : Doc.MakeDelegate(doc));
             } else {
                 let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
                 if (contextView) {
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 05eb5c38a..7f75a95f0 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -336,7 +336,7 @@ export namespace DragManager {
                         x: e.x,
                         y: e.y,
                         data: dragData,
-                        mods: e.ctrlKey ? "Control" : ""
+                        mods: e.altKey ? "AltKey" : ""
                     }
                 })
             );
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 223921428..4d40d09b2 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -186,7 +186,6 @@ export class TooltipTextMenu {
                 let node = this.view.state.selection.$from.nodeAfter;
                 let link = node && node.marks.find(m => m.type.name === "link");
                 if (link) {
-                    console.log("Link to : " + link.attrs.href);
                     let href: string = link.attrs.href;
                     if (href.indexOf(DocServer.prepend("/doc/")) === 0) {
                         let docid = href.replace(DocServer.prepend("/doc/"), "");
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 866da010a..51ad0aa49 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -244,7 +244,7 @@ export class Main extends React.Component {
         let logoutRef = React.createRef<HTMLDivElement>();
 
         return [
-            <button className="clear-db-button" key="clear-db" onClick={e => e.shiftKey && e.ctrlKey && DocServer.DeleteDatabase()}>Clear Database</button>,
+            <button className="clear-db-button" key="clear-db" onClick={e => e.shiftKey && e.altKey && DocServer.DeleteDatabase()}>Clear Database</button>,
             <div id="toolbar" key="toolbar">
                 <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index d4f660b3f..001ce3095 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -205,11 +205,12 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     }
                 }
                 else if (linkedToDocs.length || linkedFromDocs.length) {
+                    SelectionManager.DeselectAll();
                     let linkedFwdDocs = [
                         linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : expandedDocs[0],
                         linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : expandedDocs[0]];
                     if (linkedFwdDocs) {
-                        DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0]);
+                        DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0], altKey);
                     }
                 }
             }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 40ad55d25..5264773b0 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -27,6 +27,7 @@ import { DocServer } from "../../DocServer";
 import { Id } from "../../../new_fields/RefField";
 import { PresentationView } from "../PresentationView";
 import { SearchUtil } from "../../util/SearchUtil";
+import { ObjectField, Copy } from "../../../new_fields/ObjectField";
 
 const linkSchema = createSchema({
     title: "string",
@@ -245,17 +246,17 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             let sourceDoc = de.data.linkSourceDocument;
             let destDoc = this.props.Document;
 
-            const protoDest = destDoc.proto;
-            const protoSrc = sourceDoc.proto;
-            if (de.mods === "Control") {
+            if (de.mods === "AltKey") {
+                const protoDest = destDoc.proto;
+                const protoSrc = sourceDoc.proto;
                 let src = protoSrc ? protoSrc : sourceDoc;
                 let dst = protoDest ? protoDest : destDoc;
-                dst.data = src;
+                dst.data = (src.data! as ObjectField)[Copy]();
                 dst.nativeWidth = src.nativeWidth;
                 dst.nativeHeight = src.nativeHeight;
             }
             else {
-                Doc.MakeLink(protoSrc ? protoSrc : sourceDoc, protoDest ? protoDest : destDoc);
+                Doc.MakeLink(sourceDoc, destDoc);
                 de.data.droppedDocuments.push(destDoc);
             }
             e.stopPropagation();
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index f30022508..bf98fb40b 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -111,9 +111,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             let sourceDoc = de.data.linkSourceDocument;
             let destDoc = this.props.Document;
 
-            const protoDest = destDoc.proto;
-            const protoSrc = sourceDoc.proto;
-            Doc.MakeLink(protoSrc ? protoSrc : sourceDoc, protoDest ? protoDest : destDoc);
+            Doc.MakeLink(sourceDoc, destDoc);
             de.data.droppedDocuments.push(destDoc);
             e.stopPropagation();
         }
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 611cb66b6..68b692aad 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -31,7 +31,7 @@ export class LinkBox extends React.Component<Props> {
     @undoBatch
     onViewButtonPressed = async (e: React.PointerEvent): Promise<void> => {
         e.stopPropagation();
-        DocumentManager.Instance.jumpToDocument(this.props.pairedDoc);
+        DocumentManager.Instance.jumpToDocument(this.props.pairedDoc, e.altKey);
     }
 
     onEditButtonPressed = (e: React.PointerEvent): void => {
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 11117122d..4cf798249 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -6,8 +6,7 @@ import { LinkEditor } from "./LinkEditor";
 import './LinkMenu.scss';
 import React = require("react");
 import { Doc, DocListCast } from "../../../new_fields/Doc";
-import { Cast, FieldValue } from "../../../new_fields/Types";
-import { listSpec } from "../../../new_fields/Schema";
+import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/RefField";
 
 interface Props {
@@ -24,7 +23,7 @@ export class LinkMenu extends React.Component<Props> {
         return links.map(link => {
             let doc = FieldValue(Cast(link[key], Doc));
             if (doc) {
-                return <LinkBox key={doc[Id]} linkDoc={link} linkName={Cast(link.title, "string", "")} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={type} />;
+                return <LinkBox key={doc[Id]} linkDoc={link} linkName={StrCast(link.title)} pairedDoc={doc} showEditor={action(() => this._editingLink = link)} type={type} />;
             }
         });
     }
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index c898f697b..ad3b880cd 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -216,6 +216,8 @@ export namespace Doc {
     }
 
     export function MakeLink(source: Doc, target: Doc) {
+        let protoSrc = source.proto ? source.proto : source;
+        let protoTarg = target.proto ? target.proto : target;
         UndoManager.RunInBatch(() => {
             let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 });
             //let linkDoc = new Doc;
@@ -226,15 +228,15 @@ export namespace Doc {
             linkDoc.proto!.linkedTo = target;
             linkDoc.proto!.linkedFrom = source;
 
-            let linkedFrom = Cast(target.linkedFromDocs, listSpec(Doc));
+            let linkedFrom = Cast(protoTarg.linkedFromDocs, listSpec(Doc));
             if (!linkedFrom) {
-                target.linkedFromDocs = linkedFrom = new List<Doc>();
+                protoTarg.linkedFromDocs = linkedFrom = new List<Doc>();
             }
             linkedFrom.push(linkDoc);
 
-            let linkedTo = Cast(source.linkedToDocs, listSpec(Doc));
+            let linkedTo = Cast(protoSrc.linkedToDocs, listSpec(Doc));
             if (!linkedTo) {
-                source.linkedToDocs = linkedTo = new List<Doc>();
+                protoSrc.linkedToDocs = linkedTo = new List<Doc>();
             }
             linkedTo.push(linkDoc);
             return linkDoc;
-- 
cgit v1.2.3-70-g09d2


From 2c8aaae6f026199e3675f5e7b4677724d5089ae7 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 17 May 2019 14:53:09 -0400
Subject: added something to follow links in current tab ?

---
 src/client/util/DocumentManager.ts                 | 33 +++++++++++++---------
 .../views/collections/CollectionSchemaView.tsx     |  7 -----
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  2 +-
 3 files changed, 20 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index c6962ad8d..d06af6dd5 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -1,11 +1,14 @@
 import { computed, observable } from 'mobx';
 import { DocumentView } from '../views/nodes/DocumentView';
-import { Doc, DocListCast } from '../../new_fields/Doc';
+import { Doc, DocListCast, Opt } from '../../new_fields/Doc';
 import { FieldValue, Cast, NumCast, BoolCast } from '../../new_fields/Types';
 import { listSpec } from '../../new_fields/Schema';
 import { undoBatch } from './UndoManager';
 import { CollectionDockingView } from '../views/collections/CollectionDockingView';
 import { Id } from '../../new_fields/RefField';
+import { CollectionView } from '../views/collections/CollectionView';
+import { CollectionPDFView } from '../views/collections/CollectionPDFView';
+import { CollectionVideoView } from '../views/collections/CollectionVideoView';
 
 
 export class DocumentManager {
@@ -27,31 +30,33 @@ export class DocumentManager {
         // this.DocumentViews = new Array<DocumentView>();
     }
 
-    public getDocumentViewById(id: string): DocumentView | null {
+    public getDocumentViewById(id: string, preferredCollection?: CollectionView | CollectionPDFView | CollectionVideoView): DocumentView | null {
 
         let toReturn: DocumentView | null = null;
+        let passes = preferredCollection ? [preferredCollection, undefined] : [undefined];
 
-        //gets document view that is in a freeform canvas collection
-        DocumentManager.Instance.DocumentViews.map(view => {
-            if (view.props.Document[Id] === id) {
-                toReturn = view;
-                return;
-            }
-        });
-        if (!toReturn) {
+        for (let i = 0; i < passes.length; i++) {
             DocumentManager.Instance.DocumentViews.map(view => {
-                let doc = view.props.Document.proto;
-                if (doc && doc[Id] === id) {
+                if (view.props.Document[Id] === id && (!passes[i] || view.props.ContainingCollectionView === preferredCollection)) {
                     toReturn = view;
+                    return;
                 }
             });
+            if (!toReturn) {
+                DocumentManager.Instance.DocumentViews.map(view => {
+                    let doc = view.props.Document.proto;
+                    if (doc && doc[Id] === id && (!passes[i] || view.props.ContainingCollectionView === preferredCollection)) {
+                        toReturn = view;
+                    }
+                });
+            }
         }
 
         return toReturn;
     }
 
-    public getDocumentView(toFind: Doc): DocumentView | null {
-        return this.getDocumentViewById(toFind[Id]);
+    public getDocumentView(toFind: Doc, preferredCollection?: CollectionView | CollectionPDFView | CollectionVideoView): DocumentView | null {
+        return this.getDocumentViewById(toFind[Id], preferredCollection);
     }
 
     public getDocumentViews(toFind: Doc): DocumentView[] {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 497dfde88..e2b90e26d 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -24,14 +24,7 @@ import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
 import { List } from "../../../new_fields/List";
 import { Id } from "../../../new_fields/RefField";
-import { isUndefined } from "typescript-collections/dist/lib/util";
-import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { Gateway } from "../../northstar/manager/Gateway";
-import { DocServer } from "../../DocServer";
-import { ColumnAttributeModel } from "../../northstar/core/attribute/AttributeModel";
-import { HistogramOperation } from "../../northstar/operations/HistogramOperation";
-import { AggregateFunction } from "../../northstar/model/idea/idea";
-import { AttributeTransformationModel } from "../../northstar/core/attribute/AttributeTransformationModel";
 import { Docs } from "../../documents/Documents";
 import { ContextMenu } from "../ContextMenu";
 
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 001ce3095..00aa71656 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -187,7 +187,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 // ...(maximizedDocs ? maximizedDocs : []),
                 // ...(summarizedDocs ? summarizedDocs : []),];
                 if (expandedDocs.length) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0]);
+                    let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0], this.props.ContainingCollectionView);
                     if (!hasView && ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight))) {
                         let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
-- 
cgit v1.2.3-70-g09d2


From 4e244951b7b18d7973360f423e8de80c42466228 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 17 May 2019 19:50:32 -0400
Subject: added right-click "open Tab" and double-click open tab

---
 src/client/views/Main.tsx                            |  1 +
 .../views/collections/CollectionDockingView.tsx      | 20 ++++++++++++++++++--
 .../collectionFreeForm/CollectionFreeFormView.tsx    |  1 +
 .../views/nodes/CollectionFreeFormDocumentView.tsx   | 19 +++++++++++++++++++
 src/client/views/nodes/DocumentView.tsx              |  2 ++
 src/client/views/nodes/FieldView.tsx                 |  2 ++
 src/client/views/nodes/ImageBox.tsx                  |  4 +++-
 7 files changed, 46 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 51ad0aa49..177047a9a 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -166,6 +166,7 @@ export class Main extends React.Component {
             <DocumentView Document={mainCont}
                 toggleMinimized={emptyFunction}
                 addDocument={undefined}
+                addDocTab={emptyFunction}
                 removeDocument={undefined}
                 ScreenToLocalTransform={Transform.Identity}
                 ContentScaling={returnOne}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index deec64225..28624e020 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -107,7 +107,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     @action
     layoutChanged(removed?: Doc) {
         this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
-        this._goldenLayout.emit('sbcreteChanged');
+        this._goldenLayout.emit('stateChanged');
         this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig());
         if (removed) CollectionDockingView.Instance._removedDocs.push(removed);
         this.stateChanged();
@@ -153,6 +153,17 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
         return newContentItem;
     }
+    @action
+    public AddTab(stack: any, document: Doc) {
+        let docs = Cast(this.props.Document.data, listSpec(Doc));
+        if (docs) {
+            docs.push(document);
+        }
+        let docContentConfig = CollectionDockingView.makeDocumentConfig(document);
+        var newContentItem = stack.layoutManager.createContentItem(docContentConfig, this._goldenLayout);
+        stack.addChild(newContentItem.contentItems[0], undefined);
+        this.layoutChanged();
+    }
 
     setupGoldenLayout() {
         var config = StrCast(this.props.Document.dockingConfig);
@@ -395,9 +406,10 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     @observable private _panelWidth = 0;
     @observable private _panelHeight = 0;
     @observable private _document: Opt<Doc>;
-
+    _stack: any;
     constructor(props: any) {
         super(props);
+        this._stack = (this.props as any).glContainer.parent.parent;
         DocServer.GetRefField(this.props.documentId).then(action((f: Opt<Field>) => this._document = f as Doc));
     }
 
@@ -420,6 +432,9 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     }
     get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; }
 
+    addDocTab = (doc: Doc) => {
+        CollectionDockingView.Instance.AddTab(this._stack, doc);
+    }
     get content() {
         if (!this._document) {
             return (null);
@@ -441,6 +456,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     parentActive={returnTrue}
                     whenActiveChanged={emptyFunction}
                     focus={emptyFunction}
+                    addDocTab={this.addDocTab}
                     ContainingCollectionView={undefined} />
             </div >);
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6e4c79e62..ad32f70dc 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -300,6 +300,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             parentActive: this.props.active,
             whenActiveChanged: this.props.whenActiveChanged,
             bringToFront: this.bringToFront,
+            addDocTab: this.props.addDocTab,
         };
     }
 
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 00aa71656..a0efc3154 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -159,6 +159,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             }, 500);
         }
     }
+    private _lastTap: number = 0;
     static _undoBatch?: UndoManager.Batch = undefined;
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
@@ -166,6 +167,24 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         if (e.button === 0 && e.altKey) {
             e.stopPropagation(); // prevents panning from happening on collection if shift is pressed after a document drag has started
         } // allow pointer down to go through otherwise so that marquees can be drawn starting over a document 
+        if (Date.now() - this._lastTap < 300) {
+            if (e.buttons === 1) {
+                this._downX = e.clientX;
+                this._downY = e.clientY;
+                document.removeEventListener("pointerup", this.onPointerUp);
+                document.addEventListener("pointerup", this.onPointerUp);
+            }
+        } else {
+            this._lastTap = Date.now();
+        }
+    }
+    onPointerUp = (e: PointerEvent): void => {
+
+        document.removeEventListener("pointerup", this.onPointerUp);
+        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
+            this.props.addDocTab(this.props.Document);
+        }
+        e.stopPropagation();
     }
     onClick = async (e: React.MouseEvent) => {
         e.stopPropagation();
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 5264773b0..9a5d21b49 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -57,6 +57,7 @@ export interface DocumentViewProps {
     whenActiveChanged: (isActive: boolean) => void;
     toggleMinimized: () => void;
     bringToFront: (doc: Doc) => void;
+    addDocTab: (doc: Doc) => void;
 }
 
 const schema = createSchema({
@@ -307,6 +308,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeButton });
         cm.addItem({ description: "Fields", event: this.fieldsClicked });
         cm.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) });
+        cm.addItem({ description: "Open Tab", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document) });
         cm.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) });
         cm.addItem({
             description: "Find aliases", event: async () => {
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 34b6c5e70..b5dfd18eb 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -35,6 +35,7 @@ export interface FieldViewProps {
     isTopMost: boolean;
     selectOnLoad: boolean;
     addDocument?: (document: Doc, allowDuplicates?: boolean) => boolean;
+    addDocTab: (document: Doc) => boolean;
     removeDocument?: (document: Doc) => boolean;
     moveDocument?: (document: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean;
     ScreenToLocalTransform: () => Transform;
@@ -87,6 +88,7 @@ export class FieldView extends React.Component<FieldViewProps> {
             return (
                 <DocumentContentsView Document={field}
                     addDocument={undefined}
+                    addDocTab={this.props.addDocTab}
                     removeDocument={undefined}
                     ScreenToLocalTransform={Transform.Identity}
                     ContentScaling={returnOne}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index a06adfcf0..49c2f1b44 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -166,7 +166,9 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
         let id = (this.props as any).id; // bcz: used to set id = "isExpander" in templates.tsx
         return (
-            <div id={id} className={`imageBox-cont${interactive}`} onPointerDown={this.onPointerDown} onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
+            <div id={id} className={`imageBox-cont${interactive}`}
+                // onPointerDown={this.onPointerDown}
+                onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
                 <img id={id} src={paths[Math.min(paths.length, this._photoIndex)]}
                     style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }}
                     width={nativeWidth}
-- 
cgit v1.2.3-70-g09d2


From c627be793938188ebcb16d2ca3db93728b609116 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 17 May 2019 22:35:43 -0400
Subject: fixed shift-drag of main collection.

---
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +-
 src/client/views/nodes/DocumentView.tsx                             | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ad32f70dc..b44a2f527 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -116,7 +116,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             (((e.button === 2 && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) ||
                 (e.button === 0 && e.altKey)) && this.props.active())) ||
             (!CollectionFreeFormView.RIGHT_BTN_DRAG &&
-                ((e.button === 0 && !e.altKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) && this.props.active()))) {
+                ((e.button === 0 && !e.shiftKey && !e.altKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) && this.props.active()))) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointermove", this.onPointerMove);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9a5d21b49..b7d8eda9c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -181,11 +181,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
         this._hitExpander = DocListCast(this.props.Document.subBulletDocs).length > 0;
         if (e.shiftKey && e.buttons === 1) {
-            if (this.props.isTopMost) {
-                this.startDragging(e.pageX, e.pageY, e.altKey || e.ctrlKey ? "alias" : undefined, this._hitExpander);
-            } else if (this.props.Document) {
-                CollectionDockingView.Instance.StartOtherDrag([Doc.MakeAlias(this.props.Document)], e);
-            }
+            CollectionDockingView.Instance.StartOtherDrag([Doc.MakeAlias(this.props.Document)], e);
             e.stopPropagation();
         } else if (this.active) {
             //e.stopPropagation(); // bcz: doing this will block click events from CollectionFreeFormDocumentView which are needed for iconifying,etc
-- 
cgit v1.2.3-70-g09d2


From 5220b9dc1f416a5e592fd359fb31033c63602e77 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 17 May 2019 23:16:11 -0400
Subject: fixed sorting within Schemas

---
 src/client/views/collections/CollectionSchemaView.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index e2b90e26d..2b4361e50 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -66,8 +66,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
-            Document: rowProps.value[0],
-            fieldKey: rowProps.value[1],
+            Document: rowProps.original,
+            fieldKey: rowProps.column.id as string,
             ContainingCollectionView: this.props.CollectionView,
             isSelected: returnFalse,
             select: emptyFunction,
@@ -79,6 +79,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             whenActiveChanged: emptyFunction,
             PanelHeight: returnZero,
             PanelWidth: returnZero,
+            addDocTab: this.props.addDocTab,
         };
         let fieldContentView = <FieldView {...props} />;
         let reference = React.createRef<HTMLDivElement>();
@@ -296,6 +297,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                         parentActive={this.props.active}
                         whenActiveChanged={this.props.whenActiveChanged}
                         bringToFront={emptyFunction}
+                        addDocTab={this.props.addDocTab}
                     />
                 </div>)}
             <input className="collectionSchemaView-input" value={this.previewScript} onChange={this.onPreviewScriptChange}
@@ -358,7 +360,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                     <ReactTable data={children} page={0} pageSize={children.length} showPagination={false}
                         columns={this.columns.map(col => ({
                             Header: col,
-                            accessor: (doc: Doc) => [doc, col],
+                            accessor: (doc: Doc) => doc ? doc[col] : 0,
                             id: col
                         }))}
                         column={{ ...ReactTableDefaults.column, Cell: this.renderCell, }}
-- 
cgit v1.2.3-70-g09d2


From 4d6e5c21c452d4a9423f7925f6117b4f6d97093b Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 00:27:32 -0400
Subject: removed some prints

---
 src/client/views/nodes/ImageBox.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 3cc60a6c5..881c4553a 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -42,7 +42,6 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     onLoad = (target: any) => {
         var h = this._imgRef.current!.naturalHeight;
         var w = this._imgRef.current!.naturalWidth;
-        console.log("title: " + this.Document.title);
         if (this._photoIndex === 0) {
             Doc.SetOnPrototype(this.Document, "nativeHeight", FieldValue(this.Document.nativeWidth, 0) * h / w);
             this.Document.height = FieldValue(this.Document.width, 0) * h / w;
@@ -158,7 +157,6 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     }
 
     render() {
-        trace();
         let field = this.Document[this.props.fieldKey];
         let paths: string[] = ["http://www.cs.brown.edu/~bcz/face.gif"];
         if (field instanceof ImageField) paths = [field.url.href];
-- 
cgit v1.2.3-70-g09d2


From c89cd609b9887e9dd5c32b74297699d8c675cc9b Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 00:38:07 -0400
Subject: Fixed errors

---
 package-lock.json                    | 28 +++++++++++++++++++++-------
 src/client/views/ContextMenuItem.tsx | 25 +++++++++++++------------
 2 files changed, 34 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index 6d4719d29..a1c954ef5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4137,12 +4137,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "resolved": false,
-          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4157,17 +4159,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "resolved": false,
-          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": false,
-          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4284,7 +4289,8 @@
         "inherits": {
           "version": "2.0.3",
           "resolved": false,
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4296,6 +4302,7 @@
           "version": "1.0.0",
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4310,6 +4317,7 @@
           "version": "3.0.4",
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4317,12 +4325,14 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": false,
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "resolved": false,
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4341,6 +4351,7 @@
           "version": "0.5.1",
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4421,7 +4432,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "resolved": false,
-          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4433,6 +4445,7 @@
           "version": "1.4.0",
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4554,6 +4567,7 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index aefc633bc..ed583942a 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 export interface OriginalMenuProps {
     description: string;
     event: (e: React.MouseEvent<HTMLDivElement>) => void;
-    icon: IconProp; //maybe should be optional (icon?)
+    icon?: IconProp; //maybe should be optional (icon?)
 }
 
 export interface SubmenuProps {
@@ -38,27 +38,28 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> {
                 <div className="contextMenu-item" onClick={this.props.event}>
                     <span className="icon-background">
                         <FontAwesomeIcon icon="circle" size="sm" />
-                        <FontAwesomeIcon icon={this.props.icon} size="sm" />
+                        {this.props.icon ? <FontAwesomeIcon icon={this.props.icon} size="sm" /> : null}
                     </span>
                     <div className="contextMenu-description"> {this.props.description}</div>
-                </div>)
+                </div>
+            );
         }
         else {
             let submenu = null;
             if (this.overItem) {
-                submenu = (<div className="subMenu-cont" style={{ marginLeft: "100.5%", left: "0px" }}>
-                    {this._items.map(prop => {
-                        return <ContextMenuItem {...prop} key={prop.description} />
-                    })}
-                </div>)
+                submenu = (
+                    <div className="subMenu-cont" style={{ marginLeft: "100.5%", left: "0px" }}>
+                        {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} />)}
+                    </div>
+                );
             }
             return (
-                <div className="contextMenu-item" onClick={this.props.event} onMouseEnter={action(() => {
-                    this.overItem = true
-                })} onMouseLeave={action(() => this.overItem = false)}>
+                <div className="contextMenu-item" onMouseEnter={action(() => { this.overItem = true; })}
+                    onMouseLeave={action(() => this.overItem = false)}>
                     <div className="contextMenu-description"> {this.props.description}</div>
                     {submenu}
-                </div>)
+                </div>
+            );
         }
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 215e59b22281573f05c42a9376d9b28263ed2518 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 00:40:59 -0400
Subject: deleted print

---
 src/client/views/ContextMenu.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 30ac23adf..9ccbb7149 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -43,7 +43,6 @@ export class ContextMenu extends React.Component {
         if (this._items.indexOf(item) === -1) {
             this._items.push(item);
         }
-        console.log(`After adding, there are ${this._items.length} items`);
     }
 
     getItems() {
-- 
cgit v1.2.3-70-g09d2


From 764755f0b025eb3be234d53090ed1fce9a0e1300 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 01:09:15 -0400
Subject: Shrunk context menu text Uncapitalized header of columns in schema
 Added dragging to columns of schema

---
 src/client/views/ContextMenu.scss                  | 31 ++++----
 .../views/collections/CollectionSchemaView.scss    | 85 +++++++++++++++-------
 .../views/collections/CollectionSchemaView.tsx     | 23 ++++--
 3 files changed, 94 insertions(+), 45 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 3b1b18f88..0a14c8ce7 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -1,24 +1,25 @@
 @import "globalCssVariables";
+
 .contextMenu-cont {
-  position: absolute;
-  display: flex;
-  z-index: $contextMenu-zindex;
-  box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
-  flex-direction: column;
+    position: absolute;
+    display: flex;
+    z-index: $contextMenu-zindex;
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
+    flex-direction: column;
 }
 
 .contextMenu-item:first-child {
-  background: $intermediate-color;
-  color: $light-color;
+    background: $intermediate-color;
+    color: $light-color;
 }
 
 .contextMenu-item:first-child::placeholder {
-  color: $light-color;
+    color: $light-color;
 }
 
 .contextMenu-item:first-child:hover {
-  background: $intermediate-color;
-  color: $light-color;
+    background: $intermediate-color;
+    color: $light-color;
 }
 
 .subMenu-cont {
@@ -49,16 +50,16 @@
     border-bottom-style: solid;
     padding: 10px;
     white-space: nowrap;
-    font-size: 1.5vw;
+    font-size: 1vw;
 }
 
 .contextMenu-item:hover {
-  transition: all 0.1s;
-  background: $lighter-alt-accent;
+    transition: all 0.1s;
+    background: $lighter-alt-accent;
 }
 
 .contextMenu-description {
-    font-size: 1.5vw;
+    font-size: 1vw;
     text-align: left;
     width: 8vw;
     display: inline; //need this?
@@ -66,4 +67,4 @@
 
 .icon-background {
     background-color: #DDDDDD;
-}
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 5e9d2ac67..df5c52d01 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -4,7 +4,7 @@
 
 .collectionSchemaView-container {
     border-width: $COLLECTION_BORDER_WIDTH;
-    border-color : $intermediate-color;
+    border-color: $intermediate-color;
     border-style: solid;
     border-radius: $border-radius;
     box-sizing: border-box;
@@ -14,46 +14,52 @@
 
     .collectionSchemaView-cellContents {
         height: $MAX_ROW_HEIGHT;
+
         img {
-            width:auto;
+            width: auto;
             max-height: $MAX_ROW_HEIGHT;
         }
     }
-    
+
     .collectionSchemaView-previewRegion {
         position: relative;
         background: $light-color;
         float: left;
         height: 100%;
+
         .collectionSchemaView-previewDoc {
             height: 100%;
-            width: 100%; 
+            width: 100%;
             position: absolute;
         }
+
         .collectionSchemaView-input {
             position: absolute;
             max-width: 150px;
             width: 100%;
             bottom: 0px;
         }
+
         .documentView-node:first-child {
             position: relative;
             background: $light-color;
         }
     }
+
     .collectionSchemaView-previewHandle {
         position: absolute;
         height: 15px;
-        width: 15px; 
-        z-index: 20; 
-        right: 0; 
-        top: 20px; 
-        background: Black ;
+        width: 15px;
+        z-index: 20;
+        right: 0;
+        top: 20px;
+        background: Black;
     }
-    .collectionSchemaView-dividerDragger{
-        position: relative; 
-        background: black; 
-        float: left; 
+
+    .collectionSchemaView-dividerDragger {
+        position: relative;
+        background: black;
+        float: left;
         height: 37px;
         width: 20px;
         z-index: 20;
@@ -61,6 +67,7 @@
         top: 0;
         background: $main-accent;
     }
+
     .collectionSchemaView-columnsHandle {
         position: absolute;
         height: 37px;
@@ -70,6 +77,7 @@
         bottom: 0;
         background: $main-accent;
     }
+
     .collectionSchemaView-colDividerDragger {
         position: relative;
         box-sizing: border-box;
@@ -78,6 +86,7 @@
         float: top;
         width: 100%;
     }
+
     .collectionSchemaView-dividerDragger {
         position: relative;
         box-sizing: border-box;
@@ -86,11 +95,13 @@
         float: left;
         height: 100%;
     }
+
     .collectionSchemaView-tableContainer {
         position: relative;
         float: left;
         height: 100%;
     }
+
     .ReactTable {
         // position: absolute; // display: inline-block;
         // overflow: auto;
@@ -99,6 +110,7 @@
         background: $light-color;
         box-sizing: border-box;
         border: none !important;
+
         .rt-table {
             overflow-y: auto;
             overflow-x: auto;
@@ -107,26 +119,32 @@
             direction: ltr; // direction:rtl;
             // display:block;
         }
+
         .rt-tbody {
             //direction: ltr;
             direction: rtl;
         }
+
         .rt-tr-group {
             direction: ltr;
             max-height: $MAX_ROW_HEIGHT;
         }
+
         .rt-td {
             border-width: 1px;
             border-right-color: $intermediate-color;
+
             .imageBox-cont {
                 position: relative;
                 max-height: 100%;
             }
+
             .imageBox-cont img {
                 object-fit: contain;
                 max-width: 100%;
                 height: 100%;
             }
+
             .videoBox-cont {
                 object-fit: contain;
                 width: auto;
@@ -134,15 +152,17 @@
             }
         }
     }
+
     .ReactTable .rt-thead.-header {
         background: $intermediate-color;
         color: $light-color;
-        text-transform: uppercase;
+        // text-transform: uppercase;
         letter-spacing: 2px;
         font-size: 12px;
         height: 30px;
         padding-top: 4px;
     }
+
     .ReactTable .rt-th,
     .ReactTable .rt-td {
         max-height: $MAX_ROW_HEIGHT;
@@ -150,32 +170,36 @@
         font-size: 13px;
         text-align: center;
     }
+
     .ReactTable .rt-tbody .rt-tr-group:last-child {
         border-bottom: $intermediate-color;
         border-bottom-style: solid;
         border-bottom-width: 1;
     }
+
     .documentView-node-topmost {
-        text-align:left;
+        text-align: left;
         transform-origin: center top;
         display: inline-block;
     }
+
     .documentView-node:first-child {
         background: $light-color;
     }
 }
+
 //options menu styling
 #schemaOptionsMenuBtn {
     position: absolute;
     height: 20px;
     width: 20px;
     border-radius: 50%;
-    z-index: 21; 
+    z-index: 21;
     right: 4px;
-    top: 4px; 
+    top: 4px;
     pointer-events: auto;
-    background-color:black;
-    display:inline-block;
+    background-color: black;
+    display: inline-block;
     padding: 0px;
     font-size: 100%;
 }
@@ -189,10 +213,12 @@ ul {
     padding: 0px;
     margin: 0px;
 }
+
 .schema-options-subHeader {
     color: $intermediate-color;
     margin-bottom: 5px;
 }
+
 #schemaOptionsMenuBtn:hover {
     transform: scale(1.15);
 }
@@ -202,15 +228,15 @@ ul {
     font-size: 12px;
 }
 
-  #options-flyout-div {
+#options-flyout-div {
     text-align: left;
-    padding:0px;
+    padding: 0px;
     z-index: 100;
     font-family: $sans-serif;
     padding-left: 5px;
-  }
+}
 
-  #schema-col-checklist {
+#schema-col-checklist {
     overflow: scroll;
     text-align: left;
     //background-color: $light-color-secondary;
@@ -218,8 +244,8 @@ ul {
     max-height: 175px;
     font-family: $sans-serif;
     font-size: 12px;
-  }
-  
+}
+
 
 .Resizer {
     box-sizing: border-box;
@@ -227,6 +253,7 @@ ul {
     opacity: 0.5;
     z-index: 1;
     background-clip: padding-box;
+
     &.horizontal {
         height: 11px;
         margin: -5px 0;
@@ -234,22 +261,26 @@ ul {
         border-bottom: 5px solid rgba(255, 255, 255, 0);
         cursor: row-resize;
         width: 100%;
+
         &:hover {
             border-top: 5px solid rgba(0, 0, 0, 0.5);
             border-bottom: 5px solid rgba(0, 0, 0, 0.5);
         }
     }
+
     &.vertical {
         width: 11px;
         margin: 0 -5px;
         border-left: 5px solid rgba(255, 255, 255, 0);
         border-right: 5px solid rgba(255, 255, 255, 0);
         cursor: col-resize;
+
         &:hover {
             border-left: 5px solid rgba(0, 0, 0, 0.5);
             border-right: 5px solid rgba(0, 0, 0, 0.5);
         }
     }
+
     &:hover {
         -webkit-transition: all 2s ease;
         transition: all 2s ease;
@@ -270,10 +301,12 @@ ul {
         -ms-flex-direction: column;
         flex-direction: column;
     }
+
     header {
         padding: 1rem;
         background: #eee;
     }
+
     footer {
         padding: 1rem;
         background: #eee;
@@ -287,10 +320,12 @@ ul {
         display: flex;
         flex-direction: column;
     }
+
     header {
         padding: 1rem;
         background: #eee;
     }
+
     footer {
         padding: 1rem;
         background: #eee;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index c6b0ff014..f15da41ff 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -64,6 +64,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @computed get columns() { return Cast(this.props.Document.schemaColumns, listSpec("string"), []); }
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
 
+    @computed get tableColumns() {
+        return this.columns.map(col => {
+            const ref = React.createRef<HTMLParagraphElement>();
+            return {
+                Header: <p ref={ref} onPointerDown={SetupDrag(ref, () => this.onHeaderDrag(col))}>{col}</p>,
+                accessor: (doc: Doc) => doc ? doc[col] : 0,
+                id: col
+            };
+        });
+    }
+
+    onHeaderDrag = (columnName: string) => {
+        return this.props.Document;
+    }
+
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
             Document: rowProps.original,
@@ -349,6 +364,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />;
     }
 
+
+
     render() {
         library.add(faCog);
         library.add(faPlus);
@@ -358,11 +375,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 onDrop={(e: React.DragEvent) => this.onDrop(e, {})} onContextMenu={this.onContextMenu} ref={this.createTarget}>
                 <div className="collectionSchemaView-tableContainer" style={{ width: `${this.tableWidth}px` }}>
                     <ReactTable data={children} page={0} pageSize={children.length} showPagination={false}
-                        columns={this.columns.map(col => ({
-                            Header: col,
-                            accessor: (doc: Doc) => doc ? doc[col] : 0,
-                            id: col
-                        }))}
+                        columns={this.tableColumns}
                         column={{ ...ReactTableDefaults.column, Cell: this.renderCell, }}
                         getTrProps={this.getTrProps}
                     />
-- 
cgit v1.2.3-70-g09d2


From a3fab7b55372dd031a19af0ae583cf6f100c0854 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 02:32:08 -0400
Subject: Added immediate fetching of prototypes

---
 src/client/DocServer.ts | 13 +++++++++----
 src/new_fields/util.ts  |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index a288d394a..e2f9b3601 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -21,12 +21,10 @@ export namespace DocServer {
     export async function GetRefField(id: string): Promise<Opt<RefField>> {
         let cached = _cache[id];
         if (cached === undefined) {
-            const prom = Utils.EmitCallback(_socket, MessageStore.GetRefField, id).then(fieldJson => {
+            const prom = Utils.EmitCallback(_socket, MessageStore.GetRefField, id).then(async fieldJson => {
                 const field = SerializationHelper.Deserialize(fieldJson);
-                if (_cache[id] !== undefined && !(_cache[id] instanceof Promise)) {
-                    id;
-                }
                 if (field !== undefined) {
+                    await field.proto;
                     _cache[id] = field;
                 } else {
                     delete _cache[id];
@@ -65,6 +63,7 @@ export namespace DocServer {
                     fieldMap[field.id] = SerializationHelper.Deserialize(field);
                 }
             }
+
             return fieldMap;
         });
         requestedIds.forEach(id => _cache[id] = prom.then(fields => fields[id]));
@@ -78,6 +77,12 @@ export namespace DocServer {
             }
             map[id] = field;
         });
+        await Promise.all(requestedIds.map(async id => {
+            const field = fields[id];
+            if (field) {
+                await (field as any).proto;
+            }
+        }));
         const otherFields = await Promise.all(promises);
         waitingIds.forEach((id, index) => map[id] = otherFields[index]);
         return map;
diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts
index 3a16a6b42..d94994a07 100644
--- a/src/new_fields/util.ts
+++ b/src/new_fields/util.ts
@@ -73,7 +73,7 @@ export function getField(target: any, prop: string | number, ignoreProto: boolea
     if (field instanceof ProxyField) {
         return field.value(callback);
     }
-    if (field === undefined && !ignoreProto) {
+    if (field === undefined && !ignoreProto && prop !== "proto") {
         const proto = getField(target, "proto", true);
         if (proto instanceof Doc) {
             return getProtoField(proto, prop, callback);
-- 
cgit v1.2.3-70-g09d2


From 718269e2fa50e20227bfbb32b1a1b6ec8f78184d Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 18 May 2019 09:42:43 -0400
Subject: fixed font error message.  Improved opening summaries as either inTab
 or inPlace and switching with the alt-key

---
 src/client/views/ContextMenu.tsx                   |  3 ++-
 src/client/views/DocumentDecorations.tsx           |  2 +-
 .../views/collections/CollectionDockingView.tsx    |  7 +++--
 .../collections/collectionFreeForm/MarqueeView.tsx |  4 +--
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 30 ++++++++++++----------
 src/client/views/nodes/DocumentView.tsx            |  4 +--
 src/client/views/nodes/FieldView.tsx               |  2 +-
 7 files changed, 30 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 9ccbb7149..9143c012e 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -5,9 +5,10 @@ import { observer } from "mobx-react"
 import "./ContextMenu.scss"
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faSearch, faCircle } from '@fortawesome/free-solid-svg-icons';
 
 library.add(faSearch);
+library.add(faCircle);
 
 @observer
 export class ContextMenu extends React.Component {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7083b1003..d440ed898 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -279,7 +279,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         iconDoc.proto!.title = selected.length > 1 ? "ICONset" : "ICON" + StrCast(doc.title);
         iconDoc.labelField = selected.length > 1 ? undefined : this._fieldKey;
         iconDoc.proto![this._fieldKey] = selected.length > 1 ? "collection" : undefined;
-        iconDoc.isMinimized = false;
+        iconDoc.proto!.isMinimized = false;
         iconDoc.width = Number(MINIMIZED_ICON_SIZE);
         iconDoc.height = Number(MINIMIZED_ICON_SIZE);
         iconDoc.x = NumCast(doc.x);
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 28624e020..74f8ad242 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -432,8 +432,11 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     }
     get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; }
 
-    addDocTab = (doc: Doc) => {
-        CollectionDockingView.Instance.AddTab(this._stack, doc);
+    addDocTab = (doc: Doc, location: string) => {
+        if (location === "onRight")
+            CollectionDockingView.Instance.AddRightSplit(doc);
+        else
+            CollectionDockingView.Instance.AddTab(this._stack, doc);
     }
     get content() {
         if (!this._document) {
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index c3c4115b8..6301fd27e 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -272,9 +272,9 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     newCollection.proto!.summaryDoc = summary;
                     selected = [newCollection];
                     newCollection.x = bounds.left + bounds.width;
-                    this.props.addDocument(newCollection, false);
+                    //this.props.addDocument(newCollection, false);
                     summary.proto!.summarizedDocs = new List<Doc>(selected.map(s => s.proto!));
-                    //summary.proto!.maximizeOnRight = true;
+                    summary.proto!.maximizeLocation = "inTab";  // or "inPlace", or "onRight"
                     //summary.proto!.isButton = true;
                     //let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
                     // selected.map(summarizedDoc => {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a0efc3154..833947ac3 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { createSchema, listSpec, makeInterface } from "../../../new_fields/Schema";
-import { BoolCast, Cast, FieldValue, NumCast } from "../../../new_fields/Types";
+import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types";
 import { OmitKeys, Utils } from "../../../Utils";
 import { DocumentManager } from "../../util/DocumentManager";
 import { SelectionManager } from "../../util/SelectionManager";
@@ -139,7 +139,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             }
             maximizedDocs.map(maximizedDoc => {
                 let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
-                if (!iconAnimating || (Date.now() - iconAnimating[6] > 1000)) {
+                if (!iconAnimating || (Date.now() - iconAnimating[2] > 1000)) {
                     if (isMinimized === undefined) {
                         isMinimized = BoolCast(maximizedDoc.isMinimized, false);
                     }
@@ -179,10 +179,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         }
     }
     onPointerUp = (e: PointerEvent): void => {
-
         document.removeEventListener("pointerup", this.onPointerUp);
         if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
-            this.props.addDocTab(this.props.Document);
+            this.props.addDocTab(this.props.Document, "inTab");
         }
         e.stopPropagation();
     }
@@ -193,6 +192,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
             let isExpander = (e.target as any).id === "isExpander";
             if (BoolCast(this.props.Document.isButton, false) || isExpander) {
+                SelectionManager.DeselectAll();
                 let subBulletDocs = await DocListCastAsync(this.props.Document.subBulletDocs);
                 let maximizedDocs = await DocListCastAsync(this.props.Document.maximizedDocs);
                 let summarizedDocs = await DocListCastAsync(this.props.Document.summarizedDocs);
@@ -202,29 +202,33 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 expandedDocs = subBulletDocs ? [...subBulletDocs, ...expandedDocs] : expandedDocs;
                 expandedDocs = maximizedDocs ? [...maximizedDocs, ...expandedDocs] : expandedDocs;
                 expandedDocs = summarizedDocs ? [...summarizedDocs, ...expandedDocs] : expandedDocs;
-                // let expandedDocs = [...(subBulletDocs ? subBulletDocs : []),
-                // ...(maximizedDocs ? maximizedDocs : []),
-                // ...(summarizedDocs ? summarizedDocs : []),];
+                // let expandedDocs = [...(subBulletDocs ? subBulletDocs : []), ...(maximizedDocs ? maximizedDocs : []), ...(summarizedDocs ? summarizedDocs : []),];
                 if (expandedDocs.length) {   // bcz: need a better way to associate behaviors with click events on widget-documents
                     let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0], this.props.ContainingCollectionView);
-                    if (!hasView && ((altKey && !this.props.Document.maximizeOnRight) || (!altKey && this.props.Document.maximizeOnRight))) {
+                    let maxLocation = StrCast(this.props.Document.maximizeLocation, "inPlace");
+                    if (!hasView && altKey) {
+                        expandedDocs.forEach(maxDoc => maxDoc.isMinimized = false);
+                        hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0], this.props.ContainingCollectionView);
+                        maxLocation = this.props.Document.maximizeLocation = (maxLocation === "inPlace" ? "inTab" : "inPlace");
+                        if (!hasView && maxLocation === "inPlace") {
+                            this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(Doc.MakeDelegate(maxDoc), false));
+                            expandedDocs.forEach(maxDoc => maxDoc.isMinimized = true);
+                        }
+                    }
+                    if (!hasView && maxLocation !== "inPlace") {
                         let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
-                            SelectionManager.DeselectAll();
                             expandedDocs.forEach(maxDoc => {
-                                maxDoc.isMinimized = false;
                                 if (!CollectionDockingView.Instance.CloseRightSplit(maxDoc)) {
-                                    CollectionDockingView.Instance.AddRightSplit(Doc.MakeDelegate(maxDoc));
+                                    this.props.addDocTab(Doc.MakeDelegate(maxDoc), maxLocation);
                                 }
                             });
                         }
                     } else {
-                        //if (altKey) this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(maxDoc, false));
                         this.toggleIcon(expandedDocs);
                     }
                 }
                 else if (linkedToDocs.length || linkedFromDocs.length) {
-                    SelectionManager.DeselectAll();
                     let linkedFwdDocs = [
                         linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : expandedDocs[0],
                         linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : expandedDocs[0]];
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7167da93b..760e31b49 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -68,7 +68,7 @@ export interface DocumentViewProps {
     whenActiveChanged: (isActive: boolean) => void;
     toggleMinimized: () => void;
     bringToFront: (doc: Doc) => void;
-    addDocTab: (doc: Doc) => void;
+    addDocTab: (doc: Doc, where: string) => void;
 }
 
 const schema = createSchema({
@@ -315,7 +315,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeButton, icon: "expand-arrows-alt" });
         cm.addItem({ description: "Fields", event: this.fieldsClicked, icon: "layer-group" });
         cm.addItem({ description: "Center", event: () => this.props.focus(this.props.Document), icon: "align-center" });
-        cm.addItem({ description: "Open Tab", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document), icon: "expand-arrows-alt" });
+        cm.addItem({ description: "Open Tab", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, "inTab"), icon: "expand-arrows-alt" });
         cm.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document), icon: "caret-square-right" });
         cm.addItem({
             description: "Find aliases", event: async () => {
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index b5dfd18eb..5c149af99 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -35,7 +35,7 @@ export interface FieldViewProps {
     isTopMost: boolean;
     selectOnLoad: boolean;
     addDocument?: (document: Doc, allowDuplicates?: boolean) => boolean;
-    addDocTab: (document: Doc) => boolean;
+    addDocTab: (document: Doc, where: string) => boolean;
     removeDocument?: (document: Doc) => boolean;
     moveDocument?: (document: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean;
     ScreenToLocalTransform: () => Transform;
-- 
cgit v1.2.3-70-g09d2


From 3fd191a2d031e1a186a4eb2e009887399a4bc347 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 18 May 2019 10:50:28 -0400
Subject: more fixes to maximizing docs to default to showing the same
 prototype each time.

---
 .../collections/collectionFreeForm/MarqueeView.tsx |  2 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 35 ++++++++++++----------
 src/new_fields/Doc.ts                              |  6 ++++
 3 files changed, 26 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 6301fd27e..d102c8af2 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -273,7 +273,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     selected = [newCollection];
                     newCollection.x = bounds.left + bounds.width;
                     //this.props.addDocument(newCollection, false);
-                    summary.proto!.summarizedDocs = new List<Doc>(selected.map(s => s.proto!));
+                    summary.proto!.summarizedDocs = new List<Doc>(selected);
                     summary.proto!.maximizeLocation = "inTab";  // or "inPlace", or "onRight"
                     //summary.proto!.isButton = true;
                     //let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 833947ac3..7cb4c1dfe 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -137,7 +137,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             if (!CollectionFreeFormDocumentView._undoBatch) {
                 CollectionFreeFormDocumentView._undoBatch = UndoManager.StartBatch("iconAnimating");
             }
-            maximizedDocs.map(maximizedDoc => {
+            maximizedDocs.map(d => Doc.GetProto(d)).map(maximizedDoc => {
                 let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
                 if (!iconAnimating || (Date.now() - iconAnimating[2] > 1000)) {
                     if (isMinimized === undefined) {
@@ -204,28 +204,31 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 expandedDocs = summarizedDocs ? [...summarizedDocs, ...expandedDocs] : expandedDocs;
                 // let expandedDocs = [...(subBulletDocs ? subBulletDocs : []), ...(maximizedDocs ? maximizedDocs : []), ...(summarizedDocs ? summarizedDocs : []),];
                 if (expandedDocs.length) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0], this.props.ContainingCollectionView);
+                    let expandedProtoDocs = expandedDocs.map(doc => Doc.GetProto(doc))
                     let maxLocation = StrCast(this.props.Document.maximizeLocation, "inPlace");
-                    if (!hasView && altKey) {
-                        expandedDocs.forEach(maxDoc => maxDoc.isMinimized = false);
-                        hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedDocs[0], this.props.ContainingCollectionView);
-                        maxLocation = this.props.Document.maximizeLocation = (maxLocation === "inPlace" ? "inTab" : "inPlace");
-                        if (!hasView && maxLocation === "inPlace") {
-                            this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(Doc.MakeDelegate(maxDoc), false));
-                            expandedDocs.forEach(maxDoc => maxDoc.isMinimized = true);
+                    let getDispDoc = (target: Doc) => Object.getOwnPropertyNames(target).indexOf("isPrototype") === -1 ? target : Doc.MakeDelegate(target);
+                    if (altKey) {
+                        maxLocation = this.props.Document.maximizeLocation = (maxLocation === "inPlace" || !maxLocation ? "inTab" : "inPlace");
+                        if (!maxLocation || maxLocation === "inPlace") {
+                            let hadView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedProtoDocs[0], this.props.ContainingCollectionView);
+                            let wasMinimized = !hadView && expandedDocs.reduce((min, d) => !min && !BoolCast(d.IsMinimized, false), false);
+                            expandedDocs.forEach(maxDoc => Doc.GetProto(maxDoc).isMinimized = false);
+                            let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedProtoDocs[0], this.props.ContainingCollectionView);
+                            if (!hasView) {
+                                this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(getDispDoc(maxDoc), false));
+                            }
+                            expandedProtoDocs.forEach(maxDoc => maxDoc.isMinimized = wasMinimized);
                         }
                     }
-                    if (!hasView && maxLocation !== "inPlace") {
+                    if (maxLocation && maxLocation !== "inPlace") {
                         let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
-                            expandedDocs.forEach(maxDoc => {
-                                if (!CollectionDockingView.Instance.CloseRightSplit(maxDoc)) {
-                                    this.props.addDocTab(Doc.MakeDelegate(maxDoc), maxLocation);
-                                }
-                            });
+                            expandedDocs.forEach(maxDoc =>
+                                (!CollectionDockingView.Instance.CloseRightSplit(Doc.GetProto(maxDoc)) &&
+                                    this.props.addDocTab(getDispDoc(maxDoc), maxLocation)));
                         }
                     } else {
-                        this.toggleIcon(expandedDocs);
+                        this.toggleIcon(expandedProtoDocs);
                     }
                 }
                 else if (linkedToDocs.length || linkedFromDocs.length) {
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index a7aa571f8..020f764a2 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -177,6 +177,12 @@ export namespace Doc {
         return r || r2 || r3 || r4 ? true : false;
     }
 
+    // gets the document's prototype or returns the document if it is a prototype
+    export function GetProto(doc: Doc) {
+        return Object.getOwnPropertyNames(doc).indexOf("isPrototype") === -1 ? doc.proto! : doc;
+    }
+
+
     export function MakeAlias(doc: Doc) {
         const proto = Object.getOwnPropertyNames(doc).indexOf("isPrototype") === -1 ? doc.proto : undefined;
         const alias = new Doc;
-- 
cgit v1.2.3-70-g09d2


From ea0b202809a2c4ddddf5f391cdf6fe8bc6523092 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 15:25:42 -0400
Subject: Refactored some things to get Debug viewer working again

---
 src/client/util/History.ts                         |   4 +-
 src/client/views/Main.tsx                          | 280 +---------------
 src/client/views/MainView.tsx                      | 274 ++++++++++++++++
 src/client/views/PresentationView.tsx              |   1 -
 .../views/collections/CollectionTreeView.tsx       |   8 +-
 src/debug/Viewer.tsx                               | 364 +++++++++++----------
 6 files changed, 468 insertions(+), 463 deletions(-)
 create mode 100644 src/client/views/MainView.tsx

(limited to 'src')

diff --git a/src/client/util/History.ts b/src/client/util/History.ts
index 92d2b2b44..545ea8629 100644
--- a/src/client/util/History.ts
+++ b/src/client/util/History.ts
@@ -1,7 +1,7 @@
 import { Doc, Opt, Field } from "../../new_fields/Doc";
 import { DocServer } from "../DocServer";
-import { Main } from "../views/Main";
 import { RouteStore } from "../../server/RouteStore";
+import { MainView } from "../views/MainView";
 
 export namespace HistoryUtil {
     export interface DocInitializerList {
@@ -114,7 +114,7 @@ export namespace HistoryUtil {
         const field = await DocServer.GetRefField(url.docId);
         await Promise.all(Object.keys(url.initializers).map(id => initDoc(id, url.initializers[id])));
         if (field instanceof Doc) {
-            Main.Instance.openWorkspace(field, true);
+            MainView.Instance.openWorkspace(field, true);
         }
     }
 
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 177047a9a..3d9750a85 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -1,281 +1,11 @@
-import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, configure, observable, runInAction, trace } from 'mobx';
-import { observer } from 'mobx-react';
-import "normalize.css";
-import * as React from 'react';
+import { MainView } from "./MainView";
+import { Docs } from "../documents/Documents";
+import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import * as ReactDOM from 'react-dom';
-import Measure from 'react-measure';
-import * as request from 'request';
-import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils';
-import { RouteStore } from '../../server/RouteStore';
-import { emptyFunction, returnTrue, Utils, returnOne, returnZero } from '../../Utils';
-import { Docs } from '../documents/Documents';
-import { SetupDrag, DragManager } from '../util/DragManager';
-import { Transform } from '../util/Transform';
-import { UndoManager } from '../util/UndoManager';
-import { PresentationView } from './PresentationView';
-import { CollectionDockingView } from './collections/CollectionDockingView';
-import { ContextMenu } from './ContextMenu';
-import { DocumentDecorations } from './DocumentDecorations';
-import { InkingControl } from './InkingControl';
-import "./Main.scss";
-import { MainOverlayTextBox } from './MainOverlayTextBox';
-import { DocumentView } from './nodes/DocumentView';
-import { PreviewCursor } from './PreviewCursor';
-import { SearchBox } from './SearchBox';
-import { SelectionManager } from '../util/SelectionManager';
-import { FieldResult, Field, Doc, Opt } from '../../new_fields/Doc';
-import { Cast, FieldValue, StrCast } from '../../new_fields/Types';
-import { DocServer } from '../DocServer';
-import { listSpec } from '../../new_fields/Schema';
-import { Id } from '../../new_fields/RefField';
-import { HistoryUtil } from '../util/History';
-
-
-@observer
-export class Main extends React.Component {
-    public static Instance: Main;
-    @observable private _workspacesShown: boolean = false;
-    @observable public pwidth: number = 0;
-    @observable public pheight: number = 0;
-
-    @computed private get mainContainer(): Opt<Doc> {
-        return FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc));
-    }
-    private set mainContainer(doc: Opt<Doc>) {
-        if (doc) {
-            if (!("presentationView" in doc)) {
-                doc.presentationView = new Doc();
-            }
-            CurrentUserUtils.UserDocument.activeWorkspace = doc;
-        }
-    }
-
-    constructor(props: Readonly<{}>) {
-        super(props);
-        Main.Instance = this;
-        // causes errors to be generated when modifying an observable outside of an action
-        configure({ enforceActions: "observed" });
-        if (window.location.pathname !== RouteStore.home) {
-            let pathname = window.location.pathname.split("/");
-            if (pathname.length > 1 && pathname[pathname.length - 2] === 'doc') {
-                CurrentUserUtils.MainDocId = pathname[pathname.length - 1];
-            }
-        }
-
-        library.add(faFont);
-        library.add(faImage);
-        library.add(faFilePdf);
-        library.add(faObjectGroup);
-        library.add(faTable);
-        library.add(faGlobeAsia);
-        library.add(faUndoAlt);
-        library.add(faRedoAlt);
-        library.add(faPenNib);
-        library.add(faFilm);
-        library.add(faMusic);
-        library.add(faTree);
-        this.initEventListeners();
-        this.initAuthenticationRouters();
-    }
-
-    initEventListeners = () => {
-        // window.addEventListener("pointermove", (e) => this.reportLocation(e))
-        window.addEventListener("drop", (e) => e.preventDefault(), false); // drop event handler
-        window.addEventListener("dragover", (e) => e.preventDefault(), false); // drag event handler
-        window.addEventListener("keydown", (e) => {
-            if (e.key === "Escape") {
-                DragManager.AbortDrag();
-                SelectionManager.DeselectAll();
-            }
-        }, false); // drag event handler
-        // click interactions for the context menu
-        document.addEventListener("pointerdown", action(function (e: PointerEvent) {
-            if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
-                ContextMenu.Instance.clearItems();
-            }
-        }), true);
-    }
-
-    initAuthenticationRouters = async () => {
-        // Load the user's active workspace, or create a new one if initial session after signup
-        if (!CurrentUserUtils.MainDocId) {
-            const doc = await Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc);
-            if (doc) {
-                this.openWorkspace(doc);
-            } else {
-                this.createNewWorkspace();
-            }
-        } else {
-            DocServer.GetRefField(CurrentUserUtils.MainDocId).then(field =>
-                field instanceof Doc ? this.openWorkspace(field) :
-                    this.createNewWorkspace(CurrentUserUtils.MainDocId));
-        }
-    }
-
-    @action
-    createNewWorkspace = async (id?: string) => {
-        const list = Cast(CurrentUserUtils.UserDocument.data, listSpec(Doc));
-        if (list) {
-            let freeformDoc = Docs.FreeformDocument([], { x: 0, y: 400, title: `WS collection ${list.length + 1}` });
-            var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(CurrentUserUtils.UserDocument, 150), CollectionDockingView.makeDocumentConfig(freeformDoc, 600)] }] };
-            let mainDoc = Docs.DockDocument([CurrentUserUtils.UserDocument, freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` });
-            list.push(mainDoc);
-            // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
-            setTimeout(() => {
-                this.openWorkspace(mainDoc);
-                let pendingDocument = Docs.SchemaDocument(["title"], [], { title: "New Mobile Uploads" });
-                mainDoc.optionalRightCollection = pendingDocument;
-            }, 0);
-        }
-    }
-
-    @action
-    openWorkspace = async (doc: Doc, fromHistory = false) => {
-        CurrentUserUtils.MainDocId = doc[Id];
-        this.mainContainer = doc;
-        fromHistory || HistoryUtil.pushState({ type: "doc", docId: doc[Id], initializers: {} });
-        const col = await Cast(CurrentUserUtils.UserDocument.optionalRightCollection, Doc);
-        // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized)
-        setTimeout(async () => {
-            if (col) {
-                const l = Cast(col.data, listSpec(Doc));
-                if (l && l.length > 0) {
-                    CollectionDockingView.Instance.AddRightSplit(col);
-                }
-            }
-        }, 100);
-    }
-    @action
-    onResize = (r: any) => {
-        this.pwidth = r.offset.width;
-        this.pheight = r.offset.height;
-    }
-    getPWidth = () => {
-        return this.pwidth;
-    }
-    getPHeight = () => {
-        return this.pheight;
-    }
-    @computed
-    get mainContent() {
-        let mainCont = this.mainContainer;
-        let content = !mainCont ? (null) :
-            <DocumentView Document={mainCont}
-                toggleMinimized={emptyFunction}
-                addDocument={undefined}
-                addDocTab={emptyFunction}
-                removeDocument={undefined}
-                ScreenToLocalTransform={Transform.Identity}
-                ContentScaling={returnOne}
-                PanelWidth={this.getPWidth}
-                PanelHeight={this.getPHeight}
-                isTopMost={true}
-                selectOnLoad={false}
-                focus={emptyFunction}
-                parentActive={returnTrue}
-                whenActiveChanged={emptyFunction}
-                bringToFront={emptyFunction}
-                ContainingCollectionView={undefined} />;
-        const pres = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined;
-        return <Measure offset onResize={this.onResize}>
-            {({ measureRef }) =>
-                <div ref={measureRef} id="mainContent-div">
-                    {content}
-                    {pres ? <PresentationView Document={pres} key="presentation" /> : null}
-                </div>
-            }
-        </Measure>;
-    }
-
-    /* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */
-    nodesMenu() {
-
-        let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";
-        let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c27211_sample_explain.pdf";
-        let weburl = "https://cs.brown.edu/courses/cs166/";
-        let audiourl = "http://techslides.com/demos/samples/sample.mp3";
-        let videourl = "http://techslides.com/demos/sample-videos/small.mp4";
-
-        let addTextNode = action(() => Docs.TextDocument({ borderRounding: -1, width: 200, height: 200, title: "a text note" }));
-        let addColNode = action(() => Docs.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
-        let addSchemaNode = action(() => Docs.SchemaDocument(["title"], [], { width: 200, height: 200, title: "a schema collection" }));
-        let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" }));
-        // let addTreeNode = action(() => Docs.TreeDocument(this._northstarSchemas, { width: 250, height: 400, title: "northstar schemas", dropAction: "copy"  }));
-        let addVideoNode = action(() => Docs.VideoDocument(videourl, { width: 200, title: "video node" }));
-        let addPDFNode = action(() => Docs.PdfDocument(pdfurl, { width: 200, height: 200, title: "a pdf doc" }));
-        let addImageNode = action(() => Docs.ImageDocument(imgurl, { width: 200, title: "an image of a cat" }));
-        let addWebNode = action(() => Docs.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
-        let addAudioNode = action(() => Docs.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" }));
-
-        let btns: [React.RefObject<HTMLDivElement>, IconName, string, () => Doc][] = [
-            [React.createRef<HTMLDivElement>(), "font", "Add Textbox", addTextNode],
-            [React.createRef<HTMLDivElement>(), "image", "Add Image", addImageNode],
-            [React.createRef<HTMLDivElement>(), "file-pdf", "Add PDF", addPDFNode],
-            [React.createRef<HTMLDivElement>(), "film", "Add Video", addVideoNode],
-            [React.createRef<HTMLDivElement>(), "music", "Add Audio", addAudioNode],
-            [React.createRef<HTMLDivElement>(), "globe-asia", "Add Web Clipping", addWebNode],
-            [React.createRef<HTMLDivElement>(), "object-group", "Add Collection", addColNode],
-            [React.createRef<HTMLDivElement>(), "tree", "Add Tree", addTreeNode],
-            [React.createRef<HTMLDivElement>(), "table", "Add Schema", addSchemaNode],
-        ];
-
-        return < div id="add-nodes-menu" >
-            <input type="checkbox" id="add-menu-toggle" />
-            <label htmlFor="add-menu-toggle" title="Add Node"><p>+</p></label>
-
-            <div id="add-options-content">
-                <ul id="add-options-list">
-                    {btns.map(btn =>
-                        <li key={btn[1]} ><div ref={btn[0]}>
-                            <button className="round-button add-button" title={btn[2]} onPointerDown={SetupDrag(btn[0], btn[3])}>
-                                <FontAwesomeIcon icon={btn[1]} size="sm" />
-                            </button>
-                        </div></li>)}
-                </ul>
-            </div>
-        </div >;
-    }
-
-    /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */
-    @computed
-    get miscButtons() {
-        let logoutRef = React.createRef<HTMLDivElement>();
-
-        return [
-            <button className="clear-db-button" key="clear-db" onClick={e => e.shiftKey && e.altKey && DocServer.DeleteDatabase()}>Clear Database</button>,
-            <div id="toolbar" key="toolbar">
-                <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
-                <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
-                <button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /></button>
-            </div >,
-            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <SearchBox /> </div>,
-            <div className="main-buttonDiv" key="logout" style={{ bottom: '0px', right: '1px', position: 'absolute' }} ref={logoutRef}>
-                <button onClick={() => request.get(DocServer.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
-        ];
-
-    }
-
-    render() {
-        return (
-            <div id="main-div">
-                <DocumentDecorations />
-                {this.mainContent}
-                <PreviewCursor />
-                <ContextMenu />
-                {this.nodesMenu()}
-                {this.miscButtons}
-                <InkingControl />
-                <MainOverlayTextBox />
-            </div>
-        );
-    }
-}
+import * as React from 'react';
 
 (async () => {
     await Docs.initProtos();
     await CurrentUserUtils.loadCurrentUser();
-    ReactDOM.render(<Main />, document.getElementById('root'));
+    ReactDOM.render(<MainView />, document.getElementById('root'));
 })();
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
new file mode 100644
index 000000000..d0d77bbf4
--- /dev/null
+++ b/src/client/views/MainView.tsx
@@ -0,0 +1,274 @@
+import { IconName, library } from '@fortawesome/fontawesome-svg-core';
+import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, configure, observable, runInAction, trace } from 'mobx';
+import { observer } from 'mobx-react';
+import "normalize.css";
+import * as React from 'react';
+import Measure from 'react-measure';
+import * as request from 'request';
+import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils';
+import { RouteStore } from '../../server/RouteStore';
+import { emptyFunction, returnTrue, Utils, returnOne, returnZero } from '../../Utils';
+import { Docs } from '../documents/Documents';
+import { SetupDrag, DragManager } from '../util/DragManager';
+import { Transform } from '../util/Transform';
+import { UndoManager } from '../util/UndoManager';
+import { PresentationView } from './PresentationView';
+import { CollectionDockingView } from './collections/CollectionDockingView';
+import { ContextMenu } from './ContextMenu';
+import { DocumentDecorations } from './DocumentDecorations';
+import { InkingControl } from './InkingControl';
+import "./Main.scss";
+import { MainOverlayTextBox } from './MainOverlayTextBox';
+import { DocumentView } from './nodes/DocumentView';
+import { PreviewCursor } from './PreviewCursor';
+import { SearchBox } from './SearchBox';
+import { SelectionManager } from '../util/SelectionManager';
+import { FieldResult, Field, Doc, Opt } from '../../new_fields/Doc';
+import { Cast, FieldValue, StrCast } from '../../new_fields/Types';
+import { DocServer } from '../DocServer';
+import { listSpec } from '../../new_fields/Schema';
+import { Id } from '../../new_fields/RefField';
+import { HistoryUtil } from '../util/History';
+
+
+@observer
+export class MainView extends React.Component {
+    public static Instance: MainView;
+    @observable private _workspacesShown: boolean = false;
+    @observable public pwidth: number = 0;
+    @observable public pheight: number = 0;
+
+    @computed private get mainContainer(): Opt<Doc> {
+        return FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc));
+    }
+    private set mainContainer(doc: Opt<Doc>) {
+        if (doc) {
+            if (!("presentationView" in doc)) {
+                doc.presentationView = new Doc();
+            }
+            CurrentUserUtils.UserDocument.activeWorkspace = doc;
+        }
+    }
+
+    constructor(props: Readonly<{}>) {
+        super(props);
+        MainView.Instance = this;
+        // causes errors to be generated when modifying an observable outside of an action
+        configure({ enforceActions: "observed" });
+        if (window.location.pathname !== RouteStore.home) {
+            let pathname = window.location.pathname.split("/");
+            if (pathname.length > 1 && pathname[pathname.length - 2] === 'doc') {
+                CurrentUserUtils.MainDocId = pathname[pathname.length - 1];
+            }
+        }
+
+        library.add(faFont);
+        library.add(faImage);
+        library.add(faFilePdf);
+        library.add(faObjectGroup);
+        library.add(faTable);
+        library.add(faGlobeAsia);
+        library.add(faUndoAlt);
+        library.add(faRedoAlt);
+        library.add(faPenNib);
+        library.add(faFilm);
+        library.add(faMusic);
+        library.add(faTree);
+        this.initEventListeners();
+        this.initAuthenticationRouters();
+    }
+
+    initEventListeners = () => {
+        // window.addEventListener("pointermove", (e) => this.reportLocation(e))
+        window.addEventListener("drop", (e) => e.preventDefault(), false); // drop event handler
+        window.addEventListener("dragover", (e) => e.preventDefault(), false); // drag event handler
+        window.addEventListener("keydown", (e) => {
+            if (e.key === "Escape") {
+                DragManager.AbortDrag();
+                SelectionManager.DeselectAll();
+            }
+        }, false); // drag event handler
+        // click interactions for the context menu
+        document.addEventListener("pointerdown", action(function (e: PointerEvent) {
+            if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
+                ContextMenu.Instance.clearItems();
+            }
+        }), true);
+    }
+
+    initAuthenticationRouters = async () => {
+        // Load the user's active workspace, or create a new one if initial session after signup
+        if (!CurrentUserUtils.MainDocId) {
+            const doc = await Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc);
+            if (doc) {
+                this.openWorkspace(doc);
+            } else {
+                this.createNewWorkspace();
+            }
+        } else {
+            DocServer.GetRefField(CurrentUserUtils.MainDocId).then(field =>
+                field instanceof Doc ? this.openWorkspace(field) :
+                    this.createNewWorkspace(CurrentUserUtils.MainDocId));
+        }
+    }
+
+    @action
+    createNewWorkspace = async (id?: string) => {
+        const list = Cast(CurrentUserUtils.UserDocument.data, listSpec(Doc));
+        if (list) {
+            let freeformDoc = Docs.FreeformDocument([], { x: 0, y: 400, title: `WS collection ${list.length + 1}` });
+            var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(CurrentUserUtils.UserDocument, 150), CollectionDockingView.makeDocumentConfig(freeformDoc, 600)] }] };
+            let mainDoc = Docs.DockDocument([CurrentUserUtils.UserDocument, freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` });
+            list.push(mainDoc);
+            // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
+            setTimeout(() => {
+                this.openWorkspace(mainDoc);
+                let pendingDocument = Docs.SchemaDocument(["title"], [], { title: "New Mobile Uploads" });
+                mainDoc.optionalRightCollection = pendingDocument;
+            }, 0);
+        }
+    }
+
+    @action
+    openWorkspace = async (doc: Doc, fromHistory = false) => {
+        CurrentUserUtils.MainDocId = doc[Id];
+        this.mainContainer = doc;
+        fromHistory || HistoryUtil.pushState({ type: "doc", docId: doc[Id], initializers: {} });
+        const col = await Cast(CurrentUserUtils.UserDocument.optionalRightCollection, Doc);
+        // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized)
+        setTimeout(async () => {
+            if (col) {
+                const l = Cast(col.data, listSpec(Doc));
+                if (l && l.length > 0) {
+                    CollectionDockingView.Instance.AddRightSplit(col);
+                }
+            }
+        }, 100);
+    }
+    @action
+    onResize = (r: any) => {
+        this.pwidth = r.offset.width;
+        this.pheight = r.offset.height;
+    }
+    getPWidth = () => {
+        return this.pwidth;
+    }
+    getPHeight = () => {
+        return this.pheight;
+    }
+    @computed
+    get mainContent() {
+        let mainCont = this.mainContainer;
+        let content = !mainCont ? (null) :
+            <DocumentView Document={mainCont}
+                toggleMinimized={emptyFunction}
+                addDocument={undefined}
+                addDocTab={emptyFunction}
+                removeDocument={undefined}
+                ScreenToLocalTransform={Transform.Identity}
+                ContentScaling={returnOne}
+                PanelWidth={this.getPWidth}
+                PanelHeight={this.getPHeight}
+                isTopMost={true}
+                selectOnLoad={false}
+                focus={emptyFunction}
+                parentActive={returnTrue}
+                whenActiveChanged={emptyFunction}
+                bringToFront={emptyFunction}
+                ContainingCollectionView={undefined} />;
+        const pres = mainCont ? FieldValue(Cast(mainCont.presentationView, Doc)) : undefined;
+        return <Measure offset onResize={this.onResize}>
+            {({ measureRef }) =>
+                <div ref={measureRef} id="mainContent-div">
+                    {content}
+                    {pres ? <PresentationView Document={pres} key="presentation" /> : null}
+                </div>
+            }
+        </Measure>;
+    }
+
+    /* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */
+    nodesMenu() {
+
+        let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";
+        let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c27211_sample_explain.pdf";
+        let weburl = "https://cs.brown.edu/courses/cs166/";
+        let audiourl = "http://techslides.com/demos/samples/sample.mp3";
+        let videourl = "http://techslides.com/demos/sample-videos/small.mp4";
+
+        let addTextNode = action(() => Docs.TextDocument({ borderRounding: -1, width: 200, height: 200, title: "a text note" }));
+        let addColNode = action(() => Docs.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
+        let addSchemaNode = action(() => Docs.SchemaDocument(["title"], [], { width: 200, height: 200, title: "a schema collection" }));
+        let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" }));
+        // let addTreeNode = action(() => Docs.TreeDocument(this._northstarSchemas, { width: 250, height: 400, title: "northstar schemas", dropAction: "copy"  }));
+        let addVideoNode = action(() => Docs.VideoDocument(videourl, { width: 200, title: "video node" }));
+        let addPDFNode = action(() => Docs.PdfDocument(pdfurl, { width: 200, height: 200, title: "a pdf doc" }));
+        let addImageNode = action(() => Docs.ImageDocument(imgurl, { width: 200, title: "an image of a cat" }));
+        let addWebNode = action(() => Docs.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
+        let addAudioNode = action(() => Docs.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" }));
+
+        let btns: [React.RefObject<HTMLDivElement>, IconName, string, () => Doc][] = [
+            [React.createRef<HTMLDivElement>(), "font", "Add Textbox", addTextNode],
+            [React.createRef<HTMLDivElement>(), "image", "Add Image", addImageNode],
+            [React.createRef<HTMLDivElement>(), "file-pdf", "Add PDF", addPDFNode],
+            [React.createRef<HTMLDivElement>(), "film", "Add Video", addVideoNode],
+            [React.createRef<HTMLDivElement>(), "music", "Add Audio", addAudioNode],
+            [React.createRef<HTMLDivElement>(), "globe-asia", "Add Web Clipping", addWebNode],
+            [React.createRef<HTMLDivElement>(), "object-group", "Add Collection", addColNode],
+            [React.createRef<HTMLDivElement>(), "tree", "Add Tree", addTreeNode],
+            [React.createRef<HTMLDivElement>(), "table", "Add Schema", addSchemaNode],
+        ];
+
+        return < div id="add-nodes-menu" >
+            <input type="checkbox" id="add-menu-toggle" />
+            <label htmlFor="add-menu-toggle" title="Add Node"><p>+</p></label>
+
+            <div id="add-options-content">
+                <ul id="add-options-list">
+                    {btns.map(btn =>
+                        <li key={btn[1]} ><div ref={btn[0]}>
+                            <button className="round-button add-button" title={btn[2]} onPointerDown={SetupDrag(btn[0], btn[3])}>
+                                <FontAwesomeIcon icon={btn[1]} size="sm" />
+                            </button>
+                        </div></li>)}
+                </ul>
+            </div>
+        </div >;
+    }
+
+    /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */
+    @computed
+    get miscButtons() {
+        let logoutRef = React.createRef<HTMLDivElement>();
+
+        return [
+            <button className="clear-db-button" key="clear-db" onClick={e => e.shiftKey && e.altKey && DocServer.DeleteDatabase()}>Clear Database</button>,
+            <div id="toolbar" key="toolbar">
+                <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
+                <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
+                <button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /></button>
+            </div >,
+            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <SearchBox /> </div>,
+            <div className="main-buttonDiv" key="logout" style={{ bottom: '0px', right: '1px', position: 'absolute' }} ref={logoutRef}>
+                <button onClick={() => request.get(DocServer.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
+        ];
+
+    }
+
+    render() {
+        return (
+            <div id="main-div">
+                <DocumentDecorations />
+                {this.mainContent}
+                <PreviewCursor />
+                <ContextMenu />
+                {this.nodesMenu()}
+                {this.miscButtons}
+                <InkingControl />
+                <MainOverlayTextBox />
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index 7d0dc2913..9c37e9000 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -2,7 +2,6 @@ import { observer } from "mobx-react";
 import React = require("react");
 import { observable, action, runInAction, reaction } from "mobx";
 import "./PresentationView.scss";
-import "./Main.tsx";
 import { DocumentManager } from "../util/DocumentManager";
 import { Utils } from "../../Utils";
 import { Doc, DocListCast, DocListCastAsync } from "../../new_fields/Doc";
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 35a9f34cf..4cc4ae6b6 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -14,12 +14,12 @@ import { Doc, DocListCast } from '../../../new_fields/Doc';
 import { Id } from '../../../new_fields/RefField';
 import { ContextMenu } from '../ContextMenu';
 import { undoBatch } from '../../util/UndoManager';
-import { Main } from '../Main';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
 import { CollectionDockingView } from './CollectionDockingView';
 import { DocumentManager } from '../../util/DocumentManager';
 import { List } from '../../../new_fields/List';
 import { Docs } from '../../documents/Documents';
+import { MainView } from '../MainView';
 
 
 export interface TreeViewProps {
@@ -52,7 +52,7 @@ class TreeView extends React.Component<TreeViewProps> {
 
     @undoBatch openRight = async () => {
         if (this.props.document.dockingConfig) {
-            Main.Instance.openWorkspace(this.props.document);
+            MainView.Instance.openWorkspace(this.props.document);
         } else {
             CollectionDockingView.Instance.AddRightSplit(this.props.document);
         }
@@ -140,7 +140,7 @@ class TreeView extends React.Component<TreeViewProps> {
 
     onWorkspaceContextMenu = (e: React.MouseEvent): void => {
         if (!e.isPropagationStopped() && this.props.document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
-            ContextMenu.Instance.addItem({ description: "Open as Workspace", event: undoBatch(() => Main.Instance.openWorkspace(this.props.document)) });
+            ContextMenu.Instance.addItem({ description: "Open as Workspace", event: undoBatch(() => MainView.Instance.openWorkspace(this.props.document)) });
             ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.document) });
             ContextMenu.Instance.addItem({
                 description: "Open Fields", event: () => CollectionDockingView.Instance.AddRightSplit(Docs.KVPDocument(this.props.document,
@@ -215,7 +215,7 @@ export class CollectionTreeView extends CollectionSubView(Document) {
     }
     onContextMenu = (e: React.MouseEvent): void => {
         if (!e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
-            ContextMenu.Instance.addItem({ description: "Create Workspace", event: undoBatch(() => Main.Instance.createNewWorkspace()) });
+            ContextMenu.Instance.addItem({ description: "Create Workspace", event: undoBatch(() => MainView.Instance.createNewWorkspace()) });
         }
         if (!ContextMenu.Instance.getItems().some(item => item.description === "Delete")) {
             ContextMenu.Instance.addItem({ description: "Delete", event: undoBatch(() => this.remove(this.props.Document)) });
diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index 4cac09dee..d9b07aac6 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -3,184 +3,186 @@ import "normalize.css";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { observer } from 'mobx-react';
-
-// configure({
-//     enforceActions: "observed"
-// });
-
-// @observer
-// class FieldViewer extends React.Component<{ field: BasicField<any> }> {
-//     render() {
-//         return <span>{JSON.stringify(this.props.field.Data)} ({this.props.field.Id})</span>;
-//     }
-// }
-
-// @observer
-// class KeyViewer extends React.Component<{ field: Key }> {
-//     render() {
-//         return this.props.field.Name;
-//     }
-// }
-
-// @observer
-// class ListViewer extends React.Component<{ field: ListField<Field> }>{
-//     @observable
-//     expanded = false;
-
-//     render() {
-//         let content;
-//         if (this.expanded) {
-//             content = (
-//                 <div>
-//                     {this.props.field.Data.map(field => <DebugViewer fieldId={field.Id} key={field.Id} />)}
-//                 </div>
-//             );
-//         } else {
-//             content = <>[...] ({this.props.field.Id})</>;
-//         }
-//         return (
-//             <div>
-//                 <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
-//                 {content}
-//             </div >
-//         );
-//     }
-// }
-
-// @observer
-// class DocumentViewer extends React.Component<{ field: Document }> {
-//     private keyMap: ObservableMap<string, Key> = new ObservableMap;
-
-//     private disposer?: Lambda;
-
-//     componentDidMount() {
-//         let f = () => {
-//             Array.from(this.props.field._proxies.keys()).forEach(id => {
-//                 if (!this.keyMap.has(id)) {
-//                     Server.GetField(id, (field) => {
-//                         if (field && field instanceof Key) {
-//                             this.keyMap.set(id, field);
-//                         }
-//                     });
-//                 }
-//             });
-//         };
-//         this.disposer = this.props.field._proxies.observe(f);
-//         f();
-//     }
-
-//     componentWillUnmount() {
-//         if (this.disposer) {
-//             this.disposer();
-//         }
-//     }
-
-//     render() {
-//         let fields = Array.from(this.props.field._proxies.entries()).map(kv => {
-//             let key = this.keyMap.get(kv[0]);
-//             return (
-//                 <div key={kv[0]}>
-//                     <b>({key ? key.Name : kv[0]}): </b>
-//                     <DebugViewer fieldId={kv[1]}></DebugViewer>
-//                 </div>
-//             );
-//         });
-//         return (
-//             <div>
-//                 Document ({this.props.field.Id})
-//                 <div style={{ paddingLeft: "25px" }}>
-//                     {fields}
-//                 </div>
-//             </div>
-//         );
-//     }
-// }
-
-// @observer
-// class DebugViewer extends React.Component<{ fieldId: string }> {
-//     @observable
-//     private field?: Field;
-
-//     @observable
-//     private error?: string;
-
-//     constructor(props: { fieldId: string }) {
-//         super(props);
-//         this.update();
-//     }
-
-//     update() {
-//         Server.GetField(this.props.fieldId, action((field: Opt<Field>) => {
-//             this.field = field;
-//             if (!field) {
-//                 this.error = `Field with id ${this.props.fieldId} not found`;
-//             }
-//         }));
-
-//     }
-
-//     render() {
-//         let content;
-//         if (this.field) {
-//             // content = this.field.ToJson();
-//             if (this.field instanceof ListField) {
-//                 content = (<ListViewer field={this.field} />);
-//             } else if (this.field instanceof Document) {
-//                 content = (<DocumentViewer field={this.field} />);
-//             } else if (this.field instanceof BasicField) {
-//                 content = (<FieldViewer field={this.field} />);
-//             } else if (this.field instanceof Key) {
-//                 content = (<KeyViewer field={this.field} />);
-//             } else {
-//                 content = (<span>Unrecognized field type</span>);
-//             }
-//         } else if (this.error) {
-//             content = <span>Field <b>{this.props.fieldId}</b> not found <button onClick={() => this.update()}>Refresh</button></span>;
-//         } else {
-//             content = <span>Field loading: {this.props.fieldId}</span>;
-//         }
-//         return content;
-//     }
-// }
-
-// @observer
-// class Viewer extends React.Component {
-//     @observable
-//     private idToAdd: string = '';
-
-//     @observable
-//     private ids: string[] = [];
-
-//     @action
-//     inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//         this.idToAdd = e.target.value;
-//     }
-
-//     @action
-//     onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
-//         if (e.key === "Enter") {
-//             this.ids.push(this.idToAdd);
-//             this.idToAdd = "";
-//         }
-//     }
-
-//     render() {
-//         return (
-//             <>
-//                 <input value={this.idToAdd}
-//                     onChange={this.inputOnChange}
-//                     onKeyDown={this.onKeyPress} />
-//                 <div>
-//                     {this.ids.map(id => <DebugViewer fieldId={id} key={id}></DebugViewer>)}
-//                 </div>
-//             </>
-//         );
-//     }
-// }
-
-// ReactDOM.render((
-//     <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-//         <Viewer />
-//     </div>),
-//     document.getElementById('root')
-// );
\ No newline at end of file
+import { CurrentUserUtils } from '../server/authentication/models/current_user_utils';
+import { RouteStore } from '../server/RouteStore';
+import { emptyFunction } from '../Utils';
+import { Docs } from '../client/documents/Documents';
+import { SetupDrag } from '../client/util/DragManager';
+import { Transform } from '../client/util/Transform';
+import { UndoManager } from '../client/util/UndoManager';
+import { PresentationView } from '../client/views/PresentationView';
+import { CollectionDockingView } from '../client/views/collections/CollectionDockingView';
+import { ContextMenu } from '../client/views/ContextMenu';
+import { DocumentDecorations } from '../client/views/DocumentDecorations';
+import { InkingControl } from '../client/views/InkingControl';
+import { MainOverlayTextBox } from '../client/views/MainOverlayTextBox';
+import { DocumentView } from '../client/views/nodes/DocumentView';
+import { PreviewCursor } from '../client/views/PreviewCursor';
+import { SearchBox } from '../client/views/SearchBox';
+import { SelectionManager } from '../client/util/SelectionManager';
+import { Doc, Field, FieldResult } from '../new_fields/Doc';
+import { Cast } from '../new_fields/Types';
+import { DocServer } from '../client/DocServer';
+import { listSpec } from '../new_fields/Schema';
+import { Id } from '../new_fields/RefField';
+import { HistoryUtil } from '../client/util/History';
+import { List } from '../new_fields/List';
+import { URLField } from '../new_fields/URLField';
+
+CurrentUserUtils;
+RouteStore;
+emptyFunction;
+Docs;
+SetupDrag;
+Transform;
+UndoManager;
+PresentationView;
+CollectionDockingView;
+ContextMenu;
+DocumentDecorations;
+InkingControl;
+MainOverlayTextBox;
+DocumentView;
+PreviewCursor;
+SearchBox;
+SelectionManager;
+Doc;
+Cast;
+DocServer;
+listSpec;
+Id;
+HistoryUtil;
+
+configure({
+    enforceActions: "observed"
+});
+
+@observer
+class ListViewer extends React.Component<{ field: List<Field> }>{
+    @observable
+    expanded = false;
+
+    render() {
+        let content;
+        if (this.expanded) {
+            content = (
+                <div>
+                    {this.props.field.map((field, index) => <DebugViewer field={field} key={index} />)}
+                </div>
+            );
+        } else {
+            content = <>[...]</>;
+        }
+        return (
+            <div>
+                <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
+                {content}
+            </div >
+        );
+    }
+}
+
+@observer
+class DocumentViewer extends React.Component<{ field: Doc }> {
+    @observable
+    expanded = false;
+    render() {
+        let content;
+        if (this.expanded) {
+            const keys = Object.keys(this.props.field);
+            let fields = keys.map(key => {
+                return (
+                    <div key={key}>
+                        <b>({key}): </b>
+                        <DebugViewer field={this.props.field[key]}></DebugViewer>
+                    </div>
+                );
+            });
+            content = (
+                <div>
+                    Document ({this.props.field[Id]})
+                <div style={{ paddingLeft: "25px" }}>
+                        {fields}
+                    </div>
+                </div>
+            );
+        } else {
+            content = <>[...] ({this.props.field[Id]})</>;
+        }
+        return (
+            <div>
+                <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
+                {content}
+            </div >
+        );
+    }
+}
+
+@observer
+class DebugViewer extends React.Component<{ field: FieldResult }> {
+
+    render() {
+        let content;
+        const field = this.props.field;
+        if (field instanceof List) {
+            content = (<ListViewer field={field} />);
+        } else if (field instanceof Doc) {
+            content = (<DocumentViewer field={field} />);
+        } else if (typeof field === "string") {
+            content = <p>"{field}"</p>;
+        } else if (typeof field === "number" || typeof field === "boolean") {
+            content = <p>{field}</p>;
+        } else if (field instanceof URLField) {
+            content = <p>{field.url.href}</p>;
+        } else {
+            content = <p>Unrecognized field type</p>;
+        }
+        return content;
+    }
+}
+
+@observer
+class Viewer extends React.Component {
+    @observable
+    private idToAdd: string = '';
+
+    @observable
+    private fields: Field[] = [];
+
+    @action
+    inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.idToAdd = e.target.value;
+    }
+
+    @action
+    onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter") {
+            DocServer.GetRefField(this.idToAdd).then(action((field: any) => {
+                if (field !== undefined) {
+                    this.fields.push(field);
+                }
+            }));
+            this.idToAdd = "";
+        }
+    }
+
+    render() {
+        return (
+            <>
+                <input value={this.idToAdd}
+                    onChange={this.inputOnChange}
+                    onKeyDown={this.onKeyPress} />
+                <div>
+                    {this.fields.map((field, index) => <DebugViewer field={field} key={index}></DebugViewer>)}
+                </div>
+            </>
+        );
+    }
+}
+
+ReactDOM.render((
+    <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        <Viewer />
+    </div>),
+    document.getElementById('root')
+);
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From ffecdb309695ac9030626346b21013bcbf2e7731 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 17:06:18 -0400
Subject: server debugging

---
 src/client/views/collections/CollectionBaseView.tsx | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 31bdf213e..8687442a5 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -39,6 +39,9 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
     get collectionViewType(): CollectionViewType | undefined {
         let Document = this.props.Document;
         let viewField = Cast(Document.viewType, "number");
+        if (viewField === CollectionViewType.Freeform) {
+            return CollectionViewType.Tree;
+        }
         if (viewField !== undefined) {
             return viewField;
         } else {
-- 
cgit v1.2.3-70-g09d2


From 5b4ffd962d7f89a40edcb3409b5904a752f13fbb Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 17:16:30 -0400
Subject: More debugging

---
 src/client/views/collections/CollectionBaseView.tsx | 4 ++++
 src/client/views/collections/CollectionView.tsx     | 1 +
 2 files changed, 5 insertions(+)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 8687442a5..73eb1fbbc 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -16,6 +16,7 @@ export enum CollectionViewType {
     Schema,
     Docking,
     Tree,
+    RealFreeform
 }
 
 export interface CollectionRenderProps {
@@ -42,6 +43,9 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
         if (viewField === CollectionViewType.Freeform) {
             return CollectionViewType.Tree;
         }
+        if (viewField === CollectionViewType.RealFreeform) {
+            return CollectionViewType.Freeform;
+        }
         if (viewField !== undefined) {
             return viewField;
         } else {
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 3d9b4990a..33427a991 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -41,6 +41,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
     onContextMenu = (e: React.MouseEvent): void => {
         if (!this.isAnnotationOverlay && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             ContextMenu.Instance.addItem({ description: "Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Freeform), icon: "project-diagram" });
+            ContextMenu.Instance.addItem({ description: "Freeform2", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.RealFreeform), icon: "project-diagram" });
             ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "project-diagram" });
             ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
         }
-- 
cgit v1.2.3-70-g09d2


From b841d1daa793c3e911a3188ffa27228481055974 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 17:21:07 -0400
Subject: Read only database

---
 src/server/index.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/server/index.ts b/src/server/index.ts
index da6bc0165..9696dab94 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -278,6 +278,7 @@ function getFields([ids, callback]: [string[], (result: Transferable[]) => void]
 }
 
 function setField(socket: Socket, newValue: Transferable) {
+    return;
     Database.Instance.update(newValue.id, newValue, () =>
         socket.broadcast.emit(MessageStore.SetField.Message, newValue));
     if (newValue.type === Types.Text) {
@@ -346,6 +347,7 @@ function getSuffix(value: string | [string, any]): string {
 }
 
 function UpdateField(socket: Socket, diff: Diff) {
+    return;
     Database.Instance.update(diff.id, diff.diff,
         () => socket.broadcast.emit(MessageStore.UpdateField.Message, diff), false, "newDocuments");
     const docfield = diff.diff.$set;
@@ -362,8 +364,8 @@ function UpdateField(socket: Socket, diff: Diff) {
         Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = { set: null });
         let term = ToSearchTerm(val);
         if (term !== undefined) {
-            let { suffix, value } = term;
-            update[key + suffix] = { set: value };
+            // let { suffix, value } = term;
+            // update[key + suffix] = { set: value };
         }
     }
     if (dynfield) {
@@ -372,6 +374,7 @@ function UpdateField(socket: Socket, diff: Diff) {
 }
 
 function CreateField(newValue: any) {
+    return;
     Database.Instance.insert(newValue, "newDocuments");
 }
 
-- 
cgit v1.2.3-70-g09d2


From 8b647aec9184f92364d396d755f4b32bd47af67c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 17:33:26 -0400
Subject: more debugging

---
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 264c89d67..63c090d84 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -138,7 +138,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             let y = this.Document.panY || 0;
             let docs = this.childDocs || [];
             let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
-            if (!this.isAnnotationOverlay) {
+            if (false && !this.isAnnotationOverlay) {
                 let minx = docs.length ? NumCast(docs[0].x) : 0;
                 let maxx = docs.length ? NumCast(docs[0].width) + minx : minx;
                 let miny = docs.length ? NumCast(docs[0].y) : 0;
-- 
cgit v1.2.3-70-g09d2


From 20a1c2a1e59c02b29bbe744c57df6022952e2741 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 18:10:31 -0400
Subject: more debugging

---
 src/client/views/collections/CollectionTreeView.tsx                    | 3 +--
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx    | 2 +-
 src/server/index.ts                                                    | 3 ---
 3 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 4cc4ae6b6..72fa69cb1 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -17,7 +17,6 @@ import { undoBatch } from '../../util/UndoManager';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
 import { CollectionDockingView } from './CollectionDockingView';
 import { DocumentManager } from '../../util/DocumentManager';
-import { List } from '../../../new_fields/List';
 import { Docs } from '../../documents/Documents';
 import { MainView } from '../MainView';
 
@@ -232,7 +231,7 @@ export class CollectionTreeView extends CollectionSubView(Document) {
             <div id="body" className="collectionTreeView-dropTarget"
                 style={{ borderRadius: "inherit" }}
                 onContextMenu={this.onContextMenu}
-                onWheel={(e: React.WheelEvent) => e.stopPropagation()}
+                onWheel={(e: React.WheelEvent) => this.props.isSelected() && e.stopPropagation()}
                 onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}>
                 <div className="coll-title">
                     <EditableView
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 63c090d84..264c89d67 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -138,7 +138,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             let y = this.Document.panY || 0;
             let docs = this.childDocs || [];
             let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
-            if (false && !this.isAnnotationOverlay) {
+            if (!this.isAnnotationOverlay) {
                 let minx = docs.length ? NumCast(docs[0].x) : 0;
                 let maxx = docs.length ? NumCast(docs[0].width) + minx : minx;
                 let miny = docs.length ? NumCast(docs[0].y) : 0;
diff --git a/src/server/index.ts b/src/server/index.ts
index 9696dab94..d19c65e0a 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -278,7 +278,6 @@ function getFields([ids, callback]: [string[], (result: Transferable[]) => void]
 }
 
 function setField(socket: Socket, newValue: Transferable) {
-    return;
     Database.Instance.update(newValue.id, newValue, () =>
         socket.broadcast.emit(MessageStore.SetField.Message, newValue));
     if (newValue.type === Types.Text) {
@@ -347,7 +346,6 @@ function getSuffix(value: string | [string, any]): string {
 }
 
 function UpdateField(socket: Socket, diff: Diff) {
-    return;
     Database.Instance.update(diff.id, diff.diff,
         () => socket.broadcast.emit(MessageStore.UpdateField.Message, diff), false, "newDocuments");
     const docfield = diff.diff.$set;
@@ -374,7 +372,6 @@ function UpdateField(socket: Socket, diff: Diff) {
 }
 
 function CreateField(newValue: any) {
-    return;
     Database.Instance.insert(newValue, "newDocuments");
 }
 
-- 
cgit v1.2.3-70-g09d2


From 130b5c55f954a011e91355c79ade4b9f91bd84e9 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 18:17:39 -0400
Subject: clamped scale and reverted safe mode

---
 src/client/views/collections/CollectionBaseView.tsx        | 14 +++++++-------
 .../collectionFreeForm/CollectionFreeFormView.tsx          |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 73eb1fbbc..2da8c4e40 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -16,7 +16,7 @@ export enum CollectionViewType {
     Schema,
     Docking,
     Tree,
-    RealFreeform
+    // RealFreeform
 }
 
 export interface CollectionRenderProps {
@@ -40,12 +40,12 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
     get collectionViewType(): CollectionViewType | undefined {
         let Document = this.props.Document;
         let viewField = Cast(Document.viewType, "number");
-        if (viewField === CollectionViewType.Freeform) {
-            return CollectionViewType.Tree;
-        }
-        if (viewField === CollectionViewType.RealFreeform) {
-            return CollectionViewType.Freeform;
-        }
+        // if (viewField === CollectionViewType.Freeform) {
+        //     return CollectionViewType.Tree;
+        // }
+        // if (viewField === CollectionViewType.RealFreeform) {
+        //     return CollectionViewType.Freeform;
+        // }
         if (viewField !== undefined) {
             return viewField;
         } else {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 264c89d67..956a5668a 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -211,7 +211,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             let [x, y] = this.getTransform().transformPoint(e.clientX, e.clientY);
             let localTransform = this.getLocalTransform().inverse().scaleAbout(deltaScale, x, y);
 
-            let safeScale = Math.abs(localTransform.Scale);
+            let safeScale = Math.max(0.002, localTransform.Scale);
             this.props.Document.scale = Math.abs(safeScale);
             this.setPan(-localTransform.TranslateX / safeScale, -localTransform.TranslateY / safeScale);
             e.stopPropagation();
-- 
cgit v1.2.3-70-g09d2


From 3be734d7bca7276e173a9c50a1163c697143bb64 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 18 May 2019 19:28:42 -0400
Subject: Clamped scale of collections

---
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 956a5668a..33521528f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -211,7 +211,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             let [x, y] = this.getTransform().transformPoint(e.clientX, e.clientY);
             let localTransform = this.getLocalTransform().inverse().scaleAbout(deltaScale, x, y);
 
-            let safeScale = Math.max(0.002, localTransform.Scale);
+            let safeScale = Math.min(Math.max(0.15, localTransform.Scale), 40);
             this.props.Document.scale = Math.abs(safeScale);
             this.setPan(-localTransform.TranslateX / safeScale, -localTransform.TranslateY / safeScale);
             e.stopPropagation();
-- 
cgit v1.2.3-70-g09d2


From ff3ef22630ad9c32b4ed1b0872bbc8b5753761eb Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 18 May 2019 23:16:36 -0400
Subject: fixed zoomBasis issues with wrapping, text size, and normalizing
 outlines.

---
 src/client/views/DocumentDecorations.tsx           | 34 ++++++++++------------
 .../views/collections/CollectionBaseView.tsx       |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  8 ++---
 3 files changed, 21 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index d440ed898..5ec090f05 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -431,31 +431,29 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         SelectionManager.SelectedDocuments().forEach(element => {
             const rect = element.ContentDiv ? element.ContentDiv.getBoundingClientRect() : new DOMRect();
 
-            if (rect.width !== 0) {
+            if (rect.width !== 0 && (dX != 0 || dY != 0 || dW != 0 || dH != 0)) {
                 let doc = PositionDocument(element.props.Document);
-                let width = FieldValue(doc.width, 0);
-                let nwidth = FieldValue(doc.nativeWidth, 0);
-                let nheight = FieldValue(doc.nativeHeight, 0);
-                let height = FieldValue(doc.height, nwidth ? nheight / nwidth * width : 0);
-                let x = FieldValue(doc.x, 0);
-                let y = FieldValue(doc.y, 0);
+                let nwidth = doc.nativeWidth || 0;
+                let nheight = doc.nativeHeight || 0;
+                let zoomBasis = NumCast(doc.zoomBasis, 1);
+                let width = (doc.width || 0) / zoomBasis;
+                let height = (doc.height || (nheight / nwidth * width)) / zoomBasis;
                 let scale = width / rect.width;
                 let actualdW = Math.max(width + (dW * scale), 20);
                 let actualdH = Math.max(height + (dH * scale), 20);
-                x += dX * (actualdW - width);
-                y += dY * (actualdH - height);
-                doc.x = x;
-                doc.y = y;
-                var nativeWidth = FieldValue(doc.nativeWidth, 0);
-                var nativeHeight = FieldValue(doc.nativeHeight, 0);
-                if (nativeWidth > 0 && nativeHeight > 0) {
+                doc.x = (doc.x || 0) + dX * (actualdW - width);
+                doc.y = (doc.y || 0) + dY * (actualdH - height);
+                if (nwidth > 0 && nheight > 0) {
                     if (Math.abs(dW) > Math.abs(dH)) {
-                        actualdH = nativeHeight / nativeWidth * actualdW;
+                        doc.zoomBasis = zoomBasis * width / actualdW;
                     }
-                    else actualdW = nativeWidth / nativeHeight * actualdH;
+                    else {
+                        doc.zoomBasis = zoomBasis * height / actualdH;
+                    }
+                } else {
+                    doc.width = zoomBasis * actualdW;
+                    doc.height = zoomBasis * actualdH;
                 }
-                doc.width = actualdW;
-                doc.height = actualdH;
             }
         });
     }
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 2da8c4e40..76270f2e8 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -114,7 +114,7 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
             }
             // set the ZoomBasis only if hasn't already been set -- bcz: maybe set/resetting the ZoomBasis should be a parameter to addDocument?
             if (!alreadyAdded && (this.collectionViewType === CollectionViewType.Freeform || this.collectionViewType === CollectionViewType.Invalid)) {
-                let zoom = NumCast(this.props.Document.scale, 1);
+                let zoom = NumCast(this.props.Document.scale, 1) / this.props.ScreenToLocalTransform().Scale;// ;
                 Doc.SetOnPrototype(doc, "zoomBasis", zoom);
             }
         }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 33521528f..b4b811da4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -140,14 +140,14 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
             if (!this.isAnnotationOverlay) {
                 let minx = docs.length ? NumCast(docs[0].x) : 0;
-                let maxx = docs.length ? NumCast(docs[0].width) + minx : minx;
+                let maxx = docs.length ? NumCast(docs[0].width) / NumCast(docs[0].zoomBasis) + minx : minx;
                 let miny = docs.length ? NumCast(docs[0].y) : 0;
-                let maxy = docs.length ? NumCast(docs[0].height) + miny : miny;
+                let maxy = docs.length ? NumCast(docs[0].height) / NumCast(docs[0].zoomBasis) + miny : miny;
                 let ranges = docs.filter(doc => doc).reduce((range, doc) => {
                     let x = NumCast(doc.x);
-                    let xe = x + NumCast(doc.width);
+                    let xe = x + NumCast(doc.width) / NumCast(doc.zoomBasis);
                     let y = NumCast(doc.y);
-                    let ye = y + NumCast(doc.height);
+                    let ye = y + NumCast(doc.height) / NumCast(doc.zoomBasis);
                     return [[range[0][0] > x ? x : range[0][0], range[0][1] < xe ? xe : range[0][1]],
                     [range[1][0] > y ? y : range[1][0], range[1][1] < ye ? ye : range[1][1]]];
                 }, [[minx, maxx], [miny, maxy]]);
-- 
cgit v1.2.3-70-g09d2


From a07655cb99cec80cb5d4e670b26e667999d259ec Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 19 May 2019 00:03:46 -0400
Subject: added switching of tabs w/o using the Shift key

---
 src/client/views/collections/CollectionDockingView.tsx | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 74f8ad242..5aa268e36 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -269,6 +269,10 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 let y = e.clientY;
                 let docid = (e.target as any).DashDocId;
                 let tab = (e.target as any).parentElement as HTMLElement;
+                let glTab = (e.target as any).Tab;
+                if (glTab && glTab.contentItem && glTab.contentItem.parent) {
+                    glTab.contentItem.parent.setActiveContentItem(glTab.contentItem);
+                }
                 DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
                     if (f instanceof Doc) {
                         DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f]), x, y,
@@ -339,6 +343,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 }
             });
         }
+        tab.titleElement[0].Tab = tab;
         tab.closeElement.off('click') //unbind the current click handler
             .click(async function () {
                 if (tab.reactionDisposer) {
-- 
cgit v1.2.3-70-g09d2


From 3f12e4a4b776010e09d12a1adfb1d243675bcd6e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 19 May 2019 01:15:22 -0400
Subject: Reorganized some stuff to hopefully make circular imports harder

---
 src/client/documents/Documents.ts           | 33 ++++++++++++++++++++++
 src/client/views/nodes/DocumentView.tsx     |  4 +--
 src/client/views/nodes/FormattedTextBox.tsx |  3 +-
 src/debug/Viewer.tsx                        | 44 -----------------------------
 src/new_fields/Doc.ts                       | 31 --------------------
 5 files changed, 37 insertions(+), 78 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ed260d42e..0ebf6ff75 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -34,6 +34,7 @@ import { StrokeData, InkField } from "../../new_fields/InkField";
 import { dropActionType } from "../util/DragManager";
 import { DateField } from "../../new_fields/DateField";
 import { schema } from "prosemirror-schema-basic";
+import { UndoManager } from "../util/UndoManager";
 
 export interface DocumentOptions {
     x?: number;
@@ -64,6 +65,38 @@ export interface DocumentOptions {
 }
 const delegateKeys = ["x", "y", "width", "height", "panX", "panY"];
 
+export namespace DocUtils {
+    export function MakeLink(source: Doc, target: Doc) {
+        let protoSrc = source.proto ? source.proto : source;
+        let protoTarg = target.proto ? target.proto : target;
+        UndoManager.RunInBatch(() => {
+            let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 });
+            //let linkDoc = new Doc;
+            linkDoc.proto!.title = "-link name-";
+            linkDoc.proto!.linkDescription = "";
+            linkDoc.proto!.linkTags = "Default";
+
+            linkDoc.proto!.linkedTo = target;
+            linkDoc.proto!.linkedFrom = source;
+
+            let linkedFrom = Cast(protoTarg.linkedFromDocs, listSpec(Doc));
+            if (!linkedFrom) {
+                protoTarg.linkedFromDocs = linkedFrom = new List<Doc>();
+            }
+            linkedFrom.push(linkDoc);
+
+            let linkedTo = Cast(protoSrc.linkedToDocs, listSpec(Doc));
+            if (!linkedTo) {
+                protoSrc.linkedToDocs = linkedTo = new List<Doc>();
+            }
+            linkedTo.push(linkDoc);
+            return linkDoc;
+        }, "make link");
+    }
+
+
+}
+
 export namespace Docs {
     let textProto: Doc;
     let histoProto: Doc;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 760e31b49..ccf09f999 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -11,7 +11,7 @@ import { BoolCast, Cast, FieldValue, StrCast } from "../../../new_fields/Types";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { emptyFunction, Utils } from "../../../Utils";
 import { DocServer } from "../../DocServer";
-import { Docs } from "../../documents/Documents";
+import { Docs, DocUtils } from "../../documents/Documents";
 import { DocumentManager } from "../../util/DocumentManager";
 import { DragManager, dropActionType } from "../../util/DragManager";
 import { SearchUtil } from "../../util/SearchUtil";
@@ -264,7 +264,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 dst.nativeHeight = src.nativeHeight;
             }
             else {
-                Doc.MakeLink(sourceDoc, destDoc);
+                DocUtils.MakeLink(sourceDoc, destDoc);
                 de.data.droppedDocuments.push(destDoc);
             }
             e.stopPropagation();
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 98abde89e..d15813f9a 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -28,6 +28,7 @@ import { InkingControl } from "../InkingControl";
 import { FieldView, FieldViewProps } from "./FieldView";
 import "./FormattedTextBox.scss";
 import React = require("react");
+import { DocUtils } from '../../documents/Documents';
 
 library.add(faEdit);
 library.add(faSmile);
@@ -116,7 +117,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             let sourceDoc = de.data.linkSourceDocument;
             let destDoc = this.props.Document;
 
-            Doc.MakeLink(sourceDoc, destDoc);
+            DocUtils.MakeLink(sourceDoc, destDoc);
             de.data.droppedDocuments.push(destDoc);
             e.stopPropagation();
         }
diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index d9b07aac6..720e1640a 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -3,56 +3,12 @@ import "normalize.css";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { observer } from 'mobx-react';
-import { CurrentUserUtils } from '../server/authentication/models/current_user_utils';
-import { RouteStore } from '../server/RouteStore';
-import { emptyFunction } from '../Utils';
-import { Docs } from '../client/documents/Documents';
-import { SetupDrag } from '../client/util/DragManager';
-import { Transform } from '../client/util/Transform';
-import { UndoManager } from '../client/util/UndoManager';
-import { PresentationView } from '../client/views/PresentationView';
-import { CollectionDockingView } from '../client/views/collections/CollectionDockingView';
-import { ContextMenu } from '../client/views/ContextMenu';
-import { DocumentDecorations } from '../client/views/DocumentDecorations';
-import { InkingControl } from '../client/views/InkingControl';
-import { MainOverlayTextBox } from '../client/views/MainOverlayTextBox';
-import { DocumentView } from '../client/views/nodes/DocumentView';
-import { PreviewCursor } from '../client/views/PreviewCursor';
-import { SearchBox } from '../client/views/SearchBox';
-import { SelectionManager } from '../client/util/SelectionManager';
 import { Doc, Field, FieldResult } from '../new_fields/Doc';
-import { Cast } from '../new_fields/Types';
 import { DocServer } from '../client/DocServer';
-import { listSpec } from '../new_fields/Schema';
 import { Id } from '../new_fields/RefField';
-import { HistoryUtil } from '../client/util/History';
 import { List } from '../new_fields/List';
 import { URLField } from '../new_fields/URLField';
 
-CurrentUserUtils;
-RouteStore;
-emptyFunction;
-Docs;
-SetupDrag;
-Transform;
-UndoManager;
-PresentationView;
-CollectionDockingView;
-ContextMenu;
-DocumentDecorations;
-InkingControl;
-MainOverlayTextBox;
-DocumentView;
-PreviewCursor;
-SearchBox;
-SelectionManager;
-Doc;
-Cast;
-DocServer;
-listSpec;
-Id;
-HistoryUtil;
-
 configure({
     enforceActions: "observed"
 });
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 020f764a2..c6fa31a99 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -4,12 +4,9 @@ import { autoObject, SerializationHelper, Deserializable } from "../client/util/
 import { DocServer } from "../client/DocServer";
 import { setter, getter, getField, updateFunction, deleteProperty } from "./util";
 import { Cast, ToConstructor, PromiseValue, FieldValue, NumCast } from "./Types";
-import { UndoManager, undoBatch } from "../client/util/UndoManager";
 import { listSpec } from "./Schema";
-import { List } from "./List";
 import { ObjectField, Parent, OnUpdate } from "./ObjectField";
 import { RefField, FieldId, Id, HandleUpdate } from "./RefField";
-import { Docs } from "../client/documents/Documents";
 
 export function IsField(field: any): field is Field {
     return (typeof field === "string")
@@ -221,34 +218,6 @@ export namespace Doc {
         return copy;
     }
 
-    export function MakeLink(source: Doc, target: Doc) {
-        let protoSrc = source.proto ? source.proto : source;
-        let protoTarg = target.proto ? target.proto : target;
-        UndoManager.RunInBatch(() => {
-            let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 });
-            //let linkDoc = new Doc;
-            linkDoc.proto!.title = "-link name-";
-            linkDoc.proto!.linkDescription = "";
-            linkDoc.proto!.linkTags = "Default";
-
-            linkDoc.proto!.linkedTo = target;
-            linkDoc.proto!.linkedFrom = source;
-
-            let linkedFrom = Cast(protoTarg.linkedFromDocs, listSpec(Doc));
-            if (!linkedFrom) {
-                protoTarg.linkedFromDocs = linkedFrom = new List<Doc>();
-            }
-            linkedFrom.push(linkDoc);
-
-            let linkedTo = Cast(protoSrc.linkedToDocs, listSpec(Doc));
-            if (!linkedTo) {
-                protoSrc.linkedToDocs = linkedTo = new List<Doc>();
-            }
-            linkedTo.push(linkDoc);
-            return linkDoc;
-        }, "make link");
-    }
-
     export function MakeDelegate(doc: Doc): Doc;
     export function MakeDelegate(doc: Opt<Doc>): Opt<Doc>;
     export function MakeDelegate(doc: Opt<Doc>): Opt<Doc> {
-- 
cgit v1.2.3-70-g09d2


From 4667498586c19f7fff1e411f5842e8ae6903b39a Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 19 May 2019 02:18:50 -0400
Subject: Added readonly mode and fixed being able to set id of new workspace

---
 src/client/DocServer.ts                            | 25 ++++++++++++++++++----
 src/client/documents/Documents.ts                  | 12 +++++------
 src/client/views/MainView.tsx                      | 14 ++++++++----
 .../views/collections/CollectionDockingView.tsx    |  5 +++--
 src/new_fields/Doc.ts                              |  8 +++----
 5 files changed, 44 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index e2f9b3601..f1b50d5a0 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -1,7 +1,7 @@
 import * as OpenSocket from 'socket.io-client';
 import { MessageStore } from "./../server/Message";
 import { Opt } from '../new_fields/Doc';
-import { Utils } from '../Utils';
+import { Utils, emptyFunction } from '../Utils';
 import { SerializationHelper } from './util/SerializationHelper';
 import { RefField, HandleUpdate, Id } from '../new_fields/RefField';
 
@@ -10,6 +10,12 @@ export namespace DocServer {
     const _socket = OpenSocket(`${window.location.protocol}//${window.location.hostname}:4321`);
     const GUID: string = Utils.GenerateGuid();
 
+    export function makeReadOnly() {
+        _CreateField = emptyFunction;
+        _UpdateField = emptyFunction;
+        _respondToUpdate = emptyFunction;
+    }
+
     export function prepend(extension: string): string {
         return window.location.origin + extension;
     }
@@ -88,21 +94,29 @@ export namespace DocServer {
         return map;
     }
 
-    export function UpdateField(id: string, diff: any) {
+    let _UpdateField = (id: string, diff: any) => {
         if (id === updatingId) {
             return;
         }
         Utils.Emit(_socket, MessageStore.UpdateField, { id, diff });
+    };
+
+    export function UpdateField(id: string, diff: any) {
+        _UpdateField(id, diff);
     }
 
-    export function CreateField(field: RefField) {
+    let _CreateField = (field: RefField) => {
         _cache[field[Id]] = field;
         const initialState = SerializationHelper.Serialize(field);
         Utils.Emit(_socket, MessageStore.CreateField, initialState);
+    };
+
+    export function CreateField(field: RefField) {
+        _CreateField(field);
     }
 
     let updatingId: string | undefined;
-    function respondToUpdate(diff: any) {
+    let _respondToUpdate = (diff: any) => {
         const id = diff.id;
         if (id === undefined) {
             return;
@@ -124,6 +138,9 @@ export namespace DocServer {
         } else {
             update(field);
         }
+    };
+    function respondToUpdate(diff: any) {
+        _respondToUpdate(diff);
     }
 
     function connected() {
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 0ebf6ff75..9d2f4d3cd 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -142,8 +142,8 @@ export namespace Docs {
         deleg.data = value;
         return Doc.assign(deleg, options);
     }
-    function SetDelegateOptions<U extends Field>(doc: Doc, options: DocumentOptions) {
-        const deleg = Doc.MakeDelegate(doc);
+    function SetDelegateOptions(doc: Doc, options: DocumentOptions, id?: string) {
+        const deleg = Doc.MakeDelegate(doc, id);
         return Doc.assign(deleg, options);
     }
 
@@ -200,7 +200,7 @@ export namespace Docs {
         return audioProto;
     }
 
-    function CreateInstance(proto: Doc, data: Field, options: DocumentOptions) {
+    function CreateInstance(proto: Doc, data: Field, options: DocumentOptions, delegId?: string) {
         const { omit: protoProps, extract: delegateProps } = OmitKeys(options, delegateKeys);
         if (!("author" in protoProps)) {
             protoProps.author = CurrentUserUtils.email;
@@ -210,7 +210,7 @@ export namespace Docs {
         }
         protoProps.isPrototype = true;
 
-        return SetDelegateOptions(SetInstanceOptions(proto, protoProps, data), delegateProps);
+        return SetDelegateOptions(SetInstanceOptions(proto, protoProps, data), delegateProps, delegId);
     }
 
     export function ImageDocument(url: string, options: DocumentOptions = {}) {
@@ -293,8 +293,8 @@ export namespace Docs {
     export function TreeDocument(documents: Array<Doc>, options: DocumentOptions) {
         return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Tree });
     }
-    export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions) {
-        return CreateInstance(collProto, new List(documents), { ...options, viewType: CollectionViewType.Docking, dockingConfig: config });
+    export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
+        return CreateInstance(collProto, new List(documents), { ...options, viewType: CollectionViewType.Docking, dockingConfig: config }, id);
     }
 
     export function CaptionDocument(doc: Doc) {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index d0d77bbf4..c3f3a63de 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -57,10 +57,16 @@ export class MainView extends React.Component {
         MainView.Instance = this;
         // causes errors to be generated when modifying an observable outside of an action
         configure({ enforceActions: "observed" });
+        if (window.location.search.includes("readonly")) {
+            DocServer.makeReadOnly();
+        }
         if (window.location.pathname !== RouteStore.home) {
-            let pathname = window.location.pathname.split("/");
-            if (pathname.length > 1 && pathname[pathname.length - 2] === 'doc') {
-                CurrentUserUtils.MainDocId = pathname[pathname.length - 1];
+            let pathname = window.location.pathname.substr(1).split("/");
+            if (pathname.length > 1) {
+                let type = pathname[0];
+                if (type === "doc") {
+                    CurrentUserUtils.MainDocId = pathname[1];
+                }
             }
         }
 
@@ -120,7 +126,7 @@ export class MainView extends React.Component {
         if (list) {
             let freeformDoc = Docs.FreeformDocument([], { x: 0, y: 400, title: `WS collection ${list.length + 1}` });
             var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(CurrentUserUtils.UserDocument, 150), CollectionDockingView.makeDocumentConfig(freeformDoc, 600)] }] };
-            let mainDoc = Docs.DockDocument([CurrentUserUtils.UserDocument, freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` });
+            let mainDoc = Docs.DockDocument([CurrentUserUtils.UserDocument, freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` }, id);
             list.push(mainDoc);
             // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
             setTimeout(() => {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 5aa268e36..eeec3eaf0 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -438,10 +438,11 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; }
 
     addDocTab = (doc: Doc, location: string) => {
-        if (location === "onRight")
+        if (location === "onRight") {
             CollectionDockingView.Instance.AddRightSplit(doc);
-        else
+        } else {
             CollectionDockingView.Instance.AddTab(this._stack, doc);
+        }
     }
     get content() {
         if (!this._document) {
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index c6fa31a99..02dd34cb4 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -218,13 +218,13 @@ export namespace Doc {
         return copy;
     }
 
-    export function MakeDelegate(doc: Doc): Doc;
-    export function MakeDelegate(doc: Opt<Doc>): Opt<Doc>;
-    export function MakeDelegate(doc: Opt<Doc>): Opt<Doc> {
+    export function MakeDelegate(doc: Doc, id?: string): Doc;
+    export function MakeDelegate(doc: Opt<Doc>, id?: string): Opt<Doc>;
+    export function MakeDelegate(doc: Opt<Doc>, id?: string): Opt<Doc> {
         if (!doc) {
             return undefined;
         }
-        const delegate = new Doc();
+        const delegate = new Doc(id, true);
         delegate.proto = doc;
         return delegate;
     }
-- 
cgit v1.2.3-70-g09d2


From 10d7773dccdc3cada5e7e34926de69b9f3631414 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 19 May 2019 02:43:08 -0400
Subject: Added safe mode

---
 src/client/views/MainView.tsx                       |  7 +++++++
 src/client/views/collections/CollectionBaseView.tsx | 20 ++++++++++++--------
 src/client/views/collections/CollectionView.tsx     |  4 +++-
 3 files changed, 22 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c3f3a63de..bdd3e9650 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -31,6 +31,7 @@ import { DocServer } from '../DocServer';
 import { listSpec } from '../../new_fields/Schema';
 import { Id } from '../../new_fields/RefField';
 import { HistoryUtil } from '../util/History';
+import { CollectionBaseView } from './collections/CollectionBaseView';
 
 
 @observer
@@ -60,6 +61,12 @@ export class MainView extends React.Component {
         if (window.location.search.includes("readonly")) {
             DocServer.makeReadOnly();
         }
+        if (window.location.search.includes("safe")) {
+            if (!window.location.search.includes("nro")) {
+                DocServer.makeReadOnly();
+            }
+            CollectionBaseView.SetSafeMode(true);
+        }
         if (window.location.pathname !== RouteStore.home) {
             let pathname = window.location.pathname.substr(1).split("/");
             if (pathname.length > 1) {
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 76270f2e8..9d52ce6ff 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from 'mobx';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ContextMenu } from '../ContextMenu';
@@ -16,7 +16,6 @@ export enum CollectionViewType {
     Schema,
     Docking,
     Tree,
-    // RealFreeform
 }
 
 export interface CollectionRenderProps {
@@ -37,15 +36,20 @@ export interface CollectionViewProps extends FieldViewProps {
 
 @observer
 export class CollectionBaseView extends React.Component<CollectionViewProps> {
+    @observable private static _safeMode = false;
+    static InSafeMode() { return this._safeMode; }
+    static SetSafeMode(safeMode: boolean) { this._safeMode = safeMode; }
     get collectionViewType(): CollectionViewType | undefined {
         let Document = this.props.Document;
         let viewField = Cast(Document.viewType, "number");
-        // if (viewField === CollectionViewType.Freeform) {
-        //     return CollectionViewType.Tree;
-        // }
-        // if (viewField === CollectionViewType.RealFreeform) {
-        //     return CollectionViewType.Freeform;
-        // }
+        if (CollectionBaseView._safeMode) {
+            if (viewField === CollectionViewType.Freeform) {
+                return CollectionViewType.Tree;
+            }
+            if (viewField === CollectionViewType.Invalid) {
+                return CollectionViewType.Freeform;
+            }
+        }
         if (viewField !== undefined) {
             return viewField;
         } else {
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 33427a991..b9ffc11a2 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -41,7 +41,9 @@ export class CollectionView extends React.Component<FieldViewProps> {
     onContextMenu = (e: React.MouseEvent): void => {
         if (!this.isAnnotationOverlay && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             ContextMenu.Instance.addItem({ description: "Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Freeform), icon: "project-diagram" });
-            ContextMenu.Instance.addItem({ description: "Freeform2", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.RealFreeform), icon: "project-diagram" });
+            if (CollectionBaseView.InSafeMode()) {
+                ContextMenu.Instance.addItem({ description: "Test Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Invalid), icon: "project-diagram" });
+            }
             ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "project-diagram" });
             ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
         }
-- 
cgit v1.2.3-70-g09d2


From 12796ace87581ffeac9d67fa5d7ebff8cecd1a52 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 19 May 2019 11:33:42 -0400
Subject: added opaque background for non-annotation collections.  fixed
 marquee view when there's zoomBasis, fixed double-click opening to
 stopPropagation. got rid of RIGHT_BTN_DRAG stuff.

---
 .../views/collections/CollectionBaseView.tsx       |  4 ++--
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 11 +++--------
 .../collections/collectionFreeForm/MarqueeView.tsx | 23 ++++++++--------------
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  3 ++-
 src/client/views/nodes/DocumentView.tsx            |  5 +----
 5 files changed, 16 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 76270f2e8..54e76fd5e 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -89,7 +89,7 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
         }
         return false;
     }
-    @computed get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; }
+    @computed get isAnnotationOverlay() { return this.props.fieldKey === "annotations"; }
 
     @action.bound
     addDocument(doc: Doc, allowDuplicates: boolean = false): boolean {
@@ -114,7 +114,7 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
             }
             // set the ZoomBasis only if hasn't already been set -- bcz: maybe set/resetting the ZoomBasis should be a parameter to addDocument?
             if (!alreadyAdded && (this.collectionViewType === CollectionViewType.Freeform || this.collectionViewType === CollectionViewType.Invalid)) {
-                let zoom = NumCast(this.props.Document.scale, 1) / this.props.ScreenToLocalTransform().Scale;// ;
+                let zoom = NumCast(this.props.Document.scale, 1);
                 Doc.SetOnPrototype(doc, "zoomBasis", zoom);
             }
         }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index b4b811da4..9cb8443f4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -37,7 +37,6 @@ const PanZoomDocument = makeInterface(panZoomSchema, positionSchema, pageSchema)
 
 @observer
 export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
-    public static RIGHT_BTN_DRAG = false;
     private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type)
     private _lastX: number = 0;
     private _lastY: number = 0;
@@ -46,8 +45,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 
     @computed get nativeWidth() { return this.Document.nativeWidth || 0; }
     @computed get nativeHeight() { return this.Document.nativeHeight || 0; }
+    public get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; }
     private get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; }
-    private get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; }
     private panX = () => this.Document.panX || 0;
     private panY = () => this.Document.panY || 0;
     private zoomScaling = () => this.Document.scale || 1;
@@ -66,7 +65,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         return true;
     }
     private selectDocuments = (docs: Doc[]) => {
-        SelectionManager.DeselectAll;
+        SelectionManager.DeselectAll();
         docs.map(doc => DocumentManager.Instance.getDocumentView(doc)).filter(dv => dv).map(dv =>
             SelectionManager.SelectDoc(dv!, true));
     }
@@ -112,11 +111,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if ((CollectionFreeFormView.RIGHT_BTN_DRAG &&
-            (((e.button === 2 && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) ||
-                (e.button === 0 && e.altKey)) && this.props.active())) ||
-            (!CollectionFreeFormView.RIGHT_BTN_DRAG &&
-                ((e.button === 0 && !e.shiftKey && !e.altKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1)) && this.props.active()))) {
+        if (e.button === 0 && !e.shiftKey && !e.altKey && (!this.isAnnotationOverlay || this.zoomScaling() !== 1) && this.props.active()) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointermove", this.onPointerMove);
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index d102c8af2..4587c2227 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -132,17 +132,18 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         this._downY = this._lastY = e.pageY;
         this._commandExecuted = false;
         PreviewCursor.Visible = false;
-        if ((CollectionFreeFormView.RIGHT_BTN_DRAG && e.button === 0 && !e.altKey && !e.metaKey && this.props.container.props.active()) ||
-            (!CollectionFreeFormView.RIGHT_BTN_DRAG && (e.button === 2 || (e.button === 0 && e.altKey)) && this.props.container.props.active())) {
+        if (e.button === 2 || (e.button === 0 && e.altKey)) {
+            if (!this.props.container.props.active()) this.props.selectDocuments([this.props.container.props.Document]);
             document.addEventListener("pointermove", this.onPointerMove, true);
             document.addEventListener("pointerup", this.onPointerUp, true);
             document.addEventListener("keydown", this.marqueeCommand, true);
-            // bcz: do we need this?   it kills the context menu on the main collection
+            if (e.altKey) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+            // bcz: do we need this?   it kills the context menu on the main collection if !altKey
             // e.stopPropagation();
         }
-        if (e.altKey) {
-            e.preventDefault();
-        }
     }
 
     @action
@@ -248,6 +249,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 panX: 0,
                 panY: 0,
                 borderRounding: e.key === "e" ? -1 : undefined,
+                backgroundColor: this.props.container.isAnnotationOverlay ? undefined : "white",
                 scale: zoomBasis,
                 width: bounds.width * zoomBasis,
                 height: bounds.height * zoomBasis,
@@ -275,15 +277,6 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     //this.props.addDocument(newCollection, false);
                     summary.proto!.summarizedDocs = new List<Doc>(selected);
                     summary.proto!.maximizeLocation = "inTab";  // or "inPlace", or "onRight"
-                    //summary.proto!.isButton = true;
-                    //let scrpt = this.props.getTransform().inverse().transformPoint(bounds.left, bounds.top);
-                    // selected.map(summarizedDoc => {
-                    //     let maxx = NumCast(summarizedDoc.x, undefined);
-                    //     let maxy = NumCast(summarizedDoc.y, undefined);
-                    //     let maxw = NumCast(summarizedDoc.width, undefined);
-                    //     let maxh = NumCast(summarizedDoc.height, undefined);
-                    //     summarizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], maxx, maxy, maxw, maxh, Date.now(), 0]);
-                    // });
                     this.props.addLiveTextDocument(summary);
                 });
             }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 7cb4c1dfe..8851e4b93 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -180,8 +180,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
     onPointerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointerup", this.onPointerUp);
-        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
+        if (!(e as any).propagationIsStopped && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
             this.props.addDocTab(this.props.Document, "inTab");
+            (e as any).propagationIsStopped = true;
         }
         e.stopPropagation();
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 760e31b49..bb5daaf4e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -187,9 +187,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-        if (CollectionFreeFormView.RIGHT_BTN_DRAG && (e.button === 2 || (e.button === 0 && e.altKey)) && !this.isSelected()) {
-            return;
-        }
         this._hitExpander = DocListCast(this.props.Document.subBulletDocs).length > 0;
         if (e.shiftKey && e.buttons === 1) {
             CollectionDockingView.Instance.StartOtherDrag([Doc.MakeAlias(this.props.Document)], e);
@@ -207,7 +204,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             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 (!e.altKey && !this.topMost && (!CollectionFreeFormView.RIGHT_BTN_DRAG && e.buttons === 1) || (CollectionFreeFormView.RIGHT_BTN_DRAG && e.buttons === 2)) {
+                if (!e.altKey && !this.topMost && e.buttons === 1) {
                     this.startDragging(this._downX, this._downY, e.ctrlKey || e.altKey ? "alias" : undefined, this._hitExpander);
                 }
             }
-- 
cgit v1.2.3-70-g09d2


From 01a223f2e6685506cc1e5db69e9062d5ff0d3246 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 19 May 2019 13:43:37 -0400
Subject: fixed dragging out tree view to drag out user document.  fixed
 opening collections in a tab to show same layout as outside the tab.

---
 src/client/views/MainView.tsx                            |  3 ++-
 src/client/views/collections/CollectionDockingView.tsx   | 16 ++++++++++++++--
 .../views/nodes/CollectionFreeFormDocumentView.tsx       | 16 +++++++++-------
 3 files changed, 25 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index bdd3e9650..cdb105e21 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -214,7 +214,8 @@ export class MainView extends React.Component {
         let addTextNode = action(() => Docs.TextDocument({ borderRounding: -1, width: 200, height: 200, title: "a text note" }));
         let addColNode = action(() => Docs.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
         let addSchemaNode = action(() => Docs.SchemaDocument(["title"], [], { width: 200, height: 200, title: "a schema collection" }));
-        let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" }));
+        let addTreeNode = action(() => CurrentUserUtils.UserDocument);
+        //let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" }));
         // let addTreeNode = action(() => Docs.TreeDocument(this._northstarSchemas, { width: 250, height: 400, title: "northstar schemas", dropAction: "copy"  }));
         let addVideoNode = action(() => Docs.VideoDocument(videourl, { width: 200, title: "video node" }));
         let addPDFNode = action(() => Docs.PdfDocument(pdfurl, { width: 200, height: 200, title: "a pdf doc" }));
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index eeec3eaf0..06b262d79 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -20,6 +20,7 @@ import { SubCollectionViewProps } from "./CollectionSubView";
 import React = require("react");
 import { ParentDocSelector } from './ParentDocumentSelector';
 import { DocumentManager } from '../../util/DocumentManager';
+import { CollectionViewType } from './CollectionBaseView';
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -431,10 +432,21 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         if (this._mainCont.current && this._mainCont.current.children) {
             let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current.children[0].firstChild as HTMLElement);
             scale = Utils.GetScreenTransform(this._mainCont.current).scale;
-            return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this.contentScaling());
+            return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(1 / scale);
         }
         return Transform.Identity();
     }
+    get scaleToFitMultiplier() {
+        let docWidth = NumCast(this._document!.width);
+        let docHeight = NumCast(this._document!.height);
+        if (NumCast(this._document!.nativeWidth) || !docWidth || !this._panelWidth || !this._panelHeight) return 1;
+        if (StrCast(this._document!.layout).indexOf("Collection") === -1 ||
+            NumCast(this._document!.viewType) !== CollectionViewType.Freeform) return 1;
+        let scaling = Math.max(1, this._panelWidth / docWidth * docHeight > this._panelHeight ?
+            this._panelHeight / docHeight : this._panelWidth / docWidth);
+        console.log("Scaling = " + scaling);
+        return scaling;
+    }
     get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; }
 
     addDocTab = (doc: Doc, location: string) => {
@@ -450,7 +462,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         }
         return (
             <div className="collectionDockingView-content" ref={this._mainCont}
-                style={{ transform: `translate(${this.previewPanelCenteringOffset}px, 0px)` }}>
+                style={{ transform: `translate(${this.previewPanelCenteringOffset}px, 0px) scale(${this.scaleToFitMultiplier}, ${this.scaleToFitMultiplier})` }}>
                 <DocumentView key={this._document[Id]} Document={this._document}
                     toggleMinimized={emptyFunction}
                     bringToFront={emptyFunction}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 8851e4b93..fa44ec9f3 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -32,6 +32,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     private _mainCont = React.createRef<HTMLDivElement>();
     private _downX: number = 0;
     private _downY: number = 0;
+    private _doubleTap = false;
+    private _lastTap: number = 0;
     _bringToFrontDisposer?: IReactionDisposer;
 
     @computed get transform() {
@@ -159,18 +161,16 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             }, 500);
         }
     }
-    private _lastTap: number = 0;
     static _undoBatch?: UndoManager.Batch = undefined;
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
+        this._doubleTap = false;
         if (e.button === 0 && e.altKey) {
             e.stopPropagation(); // prevents panning from happening on collection if shift is pressed after a document drag has started
         } // allow pointer down to go through otherwise so that marquees can be drawn starting over a document 
         if (Date.now() - this._lastTap < 300) {
             if (e.buttons === 1) {
-                this._downX = e.clientX;
-                this._downY = e.clientY;
                 document.removeEventListener("pointerup", this.onPointerUp);
                 document.addEventListener("pointerup", this.onPointerUp);
             }
@@ -180,14 +180,16 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
     onPointerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointerup", this.onPointerUp);
-        if (!(e as any).propagationIsStopped && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
-            this.props.addDocTab(this.props.Document, "inTab");
-            (e as any).propagationIsStopped = true;
+        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
+            this._doubleTap = true;
         }
-        e.stopPropagation();
     }
     onClick = async (e: React.MouseEvent) => {
         e.stopPropagation();
+        if (this._doubleTap) {
+            this.props.addDocTab(this.props.Document, "inTab");
+            SelectionManager.DeselectAll();
+        }
         let altKey = e.altKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
-- 
cgit v1.2.3-70-g09d2


From f53ba030a86bf3fc384ff3c00efcf3c1f0497b9b Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 19 May 2019 18:10:53 -0400
Subject: cleaned up context menu icons.

---
 src/client/views/ContextMenu.scss                  |  3 ++-
 src/client/views/ContextMenu.tsx                   |  1 -
 src/client/views/ContextMenuItem.tsx               |  3 +--
 .../views/collections/CollectionDockingView.tsx    |  1 -
 src/client/views/collections/CollectionView.tsx    |  8 ++++---
 src/client/views/nodes/DocumentView.tsx            | 28 +++++++++++++---------
 6 files changed, 25 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 0a14c8ce7..b12ee3faa 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -48,7 +48,7 @@
     border-style: none;
     border-color: $intermediate-color; //  rgb(187, 186, 186);
     border-bottom-style: solid;
-    padding: 10px;
+    padding: 10px 0px 10px 0px;
     white-space: nowrap;
     font-size: 1vw;
 }
@@ -67,4 +67,5 @@
 
 .icon-background {
     background-color: #DDDDDD;
+    margin-right: 2px;
 }
\ No newline at end of file
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 9143c012e..84c17a642 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -90,7 +90,6 @@ export class ContextMenu extends React.Component {
             <div className="contextMenu-cont" style={style} ref={this.ref}>
                 <span>
                     <span className="icon-background">
-                        <FontAwesomeIcon icon="circle" size="lg" />
                         <FontAwesomeIcon icon="search" size="lg" />
                     </span>
                     <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange} />
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index ed583942a..b9239dac9 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -37,8 +37,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> {
             return (
                 <div className="contextMenu-item" onClick={this.props.event}>
                     <span className="icon-background">
-                        <FontAwesomeIcon icon="circle" size="sm" />
-                        {this.props.icon ? <FontAwesomeIcon icon={this.props.icon} size="sm" /> : null}
+                        {this.props.icon ? <FontAwesomeIcon icon={this.props.icon} size="sm" /> : <FontAwesomeIcon icon="circle" size="sm" />}
                     </span>
                     <div className="contextMenu-description"> {this.props.description}</div>
                 </div>
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 06b262d79..483209f86 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -444,7 +444,6 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
             NumCast(this._document!.viewType) !== CollectionViewType.Freeform) return 1;
         let scaling = Math.max(1, this._panelWidth / docWidth * docHeight > this._panelHeight ?
             this._panelHeight / docHeight : this._panelWidth / docWidth);
-        console.log("Scaling = " + scaling);
         return scaling;
     }
     get previewPanelCenteringOffset() { return (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2; }
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index b9ffc11a2..59c763be8 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,5 +1,5 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faProjectDiagram, faSquare, faTh, faTree } from '@fortawesome/free-solid-svg-icons';
+import { faProjectDiagram, faSquare, faTh, faTree, faSignature, faThList } from '@fortawesome/free-solid-svg-icons';
 import { observer } from "mobx-react";
 import * as React from 'react';
 import { Id } from '../../../new_fields/RefField';
@@ -18,6 +18,8 @@ library.add(faTh);
 library.add(faTree);
 library.add(faSquare);
 library.add(faProjectDiagram);
+library.add(faSignature);
+library.add(faThList);
 
 @observer
 export class CollectionView extends React.Component<FieldViewProps> {
@@ -40,11 +42,11 @@ export class CollectionView extends React.Component<FieldViewProps> {
 
     onContextMenu = (e: React.MouseEvent): void => {
         if (!this.isAnnotationOverlay && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
-            ContextMenu.Instance.addItem({ description: "Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Freeform), icon: "project-diagram" });
+            ContextMenu.Instance.addItem({ description: "Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Freeform), icon: "signature" });
             if (CollectionBaseView.InSafeMode()) {
                 ContextMenu.Instance.addItem({ description: "Test Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Invalid), icon: "project-diagram" });
             }
-            ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "project-diagram" });
+            ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "th-list" });
             ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
         }
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 38f3db19f..9e86b411e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,5 +1,5 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faAlignCenter, faCaretSquareRight, faCompressArrowsAlt, faExpandArrowsAlt, faLayerGroup, faSquare, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faAlignCenter, faCaretSquareRight, faCompressArrowsAlt, faExpandArrowsAlt, faLayerGroup, faSquare, faTrash, faConciergeBell, faFolder, faMapPin, faLink, faFingerprint, faCrosshairs, faDesktop } from '@fortawesome/free-solid-svg-icons';
 import { action, computed, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../new_fields/Doc";
@@ -19,7 +19,6 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
 import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
 import { CollectionView } from "../collections/CollectionView";
@@ -39,6 +38,13 @@ library.add(faLayerGroup);
 library.add(faAlignCenter);
 library.add(faCaretSquareRight);
 library.add(faSquare);
+library.add(faConciergeBell);
+library.add(faFolder);
+library.add(faMapPin);
+library.add(faLink);
+library.add(faFingerprint);
+library.add(faCrosshairs);
+library.add(faDesktop);
 
 const linkSchema = createSchema({
     title: "string",
@@ -308,21 +314,21 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         e.preventDefault();
 
         const cm = ContextMenu.Instance;
-        cm.addItem({ description: "Full Screen", event: this.fullScreenClicked, icon: "expand-arrows-alt" });
-        cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeButton, icon: "expand-arrows-alt" });
-        cm.addItem({ description: "Fields", event: this.fieldsClicked, icon: "layer-group" });
-        cm.addItem({ description: "Center", event: () => this.props.focus(this.props.Document), icon: "align-center" });
-        cm.addItem({ description: "Open Tab", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, "inTab"), icon: "expand-arrows-alt" });
+        cm.addItem({ description: "Full Screen", event: this.fullScreenClicked, icon: "desktop" });
+        cm.addItem({ description: "Open Tab", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, "inTab"), icon: "folder" });
         cm.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document), icon: "caret-square-right" });
+        cm.addItem({ description: "Fields", event: this.fieldsClicked, icon: "layer-group" });
+        cm.addItem({ description: "Pin to Pres", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "map-pin" });
+        cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeButton, icon: "concierge-bell" });
         cm.addItem({
             description: "Find aliases", event: async () => {
                 const aliases = await SearchUtil.GetAliasesOfDocument(this.props.Document);
                 CollectionDockingView.Instance.AddRightSplit(Docs.SchemaDocument(["title"], aliases, {}));
-            }, icon: "expand-arrows-alt"
+            }, icon: "search"
         });
-        cm.addItem({ description: "Copy URL", event: () => Utils.CopyText(DocServer.prepend("/doc/" + this.props.Document[Id])), icon: "expand-arrows-alt" });
-        cm.addItem({ description: "Copy ID", event: () => Utils.CopyText(this.props.Document[Id]), icon: "expand-arrows-alt" });
-        cm.addItem({ description: "Pin to Pres", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "expand-arrows-alt" });
+        cm.addItem({ description: "Center View", event: () => this.props.focus(this.props.Document), icon: "crosshairs" });
+        cm.addItem({ description: "Copy URL", event: () => Utils.CopyText(DocServer.prepend("/doc/" + this.props.Document[Id])), icon: "link" });
+        cm.addItem({ description: "Copy ID", event: () => Utils.CopyText(this.props.Document[Id]), icon: "fingerprint" });
         cm.addItem({ description: "Delete", event: this.deleteClicked, icon: "trash" });
         if (!this.topMost) {
             // DocumentViews should stop propagation of this event
-- 
cgit v1.2.3-70-g09d2


From c103acbe8f8df919e87f9a18872a94eb8bc1a001 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 19 May 2019 19:55:26 -0400
Subject: fixed some small things with presentation and icon

---
 src/client/views/DocumentDecorations.tsx | 6 +++---
 src/client/views/MainView.tsx            | 2 +-
 src/client/views/nodes/DocumentView.tsx  | 3 ++-
 src/client/views/nodes/IconBox.tsx       | 1 -
 4 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 5ec090f05..319e91337 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -276,16 +276,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         let doc = selected[0].props.Document;
         let iconDoc = Docs.IconDocument(layoutString);
         iconDoc.isButton = true;
-        iconDoc.proto!.title = selected.length > 1 ? "ICONset" : "ICON" + StrCast(doc.title);
+        iconDoc.proto!.title = selected.length > 1 ? "-multiple-.icon" : StrCast(doc.title) + ".icon";
         iconDoc.labelField = selected.length > 1 ? undefined : this._fieldKey;
-        iconDoc.proto![this._fieldKey] = selected.length > 1 ? "collection" : undefined;
+        //iconDoc.proto![this._fieldKey] = selected.length > 1 ? "collection" : undefined;
         iconDoc.proto!.isMinimized = false;
         iconDoc.width = Number(MINIMIZED_ICON_SIZE);
         iconDoc.height = Number(MINIMIZED_ICON_SIZE);
         iconDoc.x = NumCast(doc.x);
         iconDoc.y = NumCast(doc.y) - 24;
         iconDoc.maximizedDocs = new List<Doc>(selected.map(s => s.props.Document.proto!));
-        doc.minimizedDoc = iconDoc;
+        selected.length === 1 && (doc.minimizedDoc = iconDoc);
         selected[0].props.addDocument && selected[0].props.addDocument(iconDoc, false);
         return iconDoc;
     }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index cdb105e21..400562f12 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -47,7 +47,7 @@ export class MainView extends React.Component {
     private set mainContainer(doc: Opt<Doc>) {
         if (doc) {
             if (!("presentationView" in doc)) {
-                doc.presentationView = new Doc();
+                doc.presentationView = Docs.TreeDocument([], { title: "Presentation" });
             }
             CurrentUserUtils.UserDocument.activeWorkspace = doc;
         }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9e86b411e..5f218fd1f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -128,7 +128,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             });
         }
         // bcz: kind of ugly .. setup a reaction to update the title of a summary document's target (maximizedDocs) whenver the summary doc's title changes
-        this._reactionDisposer = reaction(() => [this.props.Document.maximizedDocs, this.props.Document.summaryDoc, this.props.Document.summaryDoc instanceof Doc ? this.props.Document.summaryDoc.title : ""],
+        this._reactionDisposer = reaction(() => [DocListCast(this.props.Document.maximizedDocs).map(md => md.title),
+        this.props.Document.summaryDoc, this.props.Document.summaryDoc instanceof Doc ? this.props.Document.summaryDoc.title : ""],
             () => {
                 let maxDoc = DocListCast(this.props.Document.maximizedDocs);
                 if (maxDoc.length === 1 && StrCast(this.props.Document.title).startsWith("-") && StrCast(this.props.Document.layout).indexOf("IconBox") !== -1) {
diff --git a/src/client/views/nodes/IconBox.tsx b/src/client/views/nodes/IconBox.tsx
index b42eb44a5..00021bc78 100644
--- a/src/client/views/nodes/IconBox.tsx
+++ b/src/client/views/nodes/IconBox.tsx
@@ -12,7 +12,6 @@ import { IconField } from "../../../new_fields/IconField";
 import { ContextMenu } from "../ContextMenu";
 import Measure from "react-measure";
 import { MINIMIZED_ICON_SIZE } from "../../views/globalCssVariables.scss";
-import { listSpec } from "../../../new_fields/Schema";
 
 
 library.add(faCaretUp);
-- 
cgit v1.2.3-70-g09d2


From b789ac4cc3fe013139825f811d7574e1d305c2cc Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sun, 19 May 2019 20:30:50 -0400
Subject: Added link follow behavior

---
 src/client/util/DocumentManager.ts                        | 7 ++++---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index d06af6dd5..be448098a 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -115,7 +115,7 @@ export class DocumentManager {
     }
 
     @undoBatch
-    public jumpToDocument = async (docDelegate: Doc, makeCopy: boolean = true): Promise<void> => {
+    public jumpToDocument = async (docDelegate: Doc, makeCopy: boolean = true, dockFunc?: (doc: Doc) => void): Promise<void> => {
         let doc = docDelegate.proto ? docDelegate.proto : docDelegate;
         const page = NumCast(doc.page, undefined);
         const contextDoc = await Cast(doc.annotationOn, Doc);
@@ -128,14 +128,15 @@ export class DocumentManager {
             docView.props.focus(docView.props.Document);
         } else {
             if (!contextDoc) {
-                CollectionDockingView.Instance.AddRightSplit(docDelegate ? (makeCopy ? Doc.MakeCopy(docDelegate) : docDelegate) : Doc.MakeDelegate(doc));
+                const actualDoc = docDelegate ? (makeCopy ? Doc.MakeCopy(docDelegate) : docDelegate) : Doc.MakeDelegate(doc);
+                (dockFunc || CollectionDockingView.Instance.AddRightSplit)(actualDoc);
             } else {
                 let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
                 if (contextView) {
                     contextDoc.panTransformType = "Ease";
                     contextView.props.focus(contextDoc);
                 } else {
-                    CollectionDockingView.Instance.AddRightSplit(contextDoc);
+                    (dockFunc || CollectionDockingView.Instance.AddRightSplit)(contextDoc);
                 }
             }
         }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index fa44ec9f3..5bff08280 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -239,7 +239,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                         linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : expandedDocs[0],
                         linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : expandedDocs[0]];
                     if (linkedFwdDocs) {
-                        DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0], altKey);
+                        let maxLocation = StrCast(linkedFwdDocs[altKey ? 1 : 0].maximizeLocation, "inTab");
+                        DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0], altKey, document => this.props.addDocTab(document, maxLocation));
                     }
                 }
             }
-- 
cgit v1.2.3-70-g09d2


From af2346983eae1145167b70faf96a9aec0ca82427 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 20 May 2019 00:09:47 -0400
Subject: Fixed a bunch of demo bugs Moved Field Symbols to separate file
 Editing is mostly working in debug viewer

---
 deploy/debug/viewer.html                           |   1 +
 src/client/DocServer.ts                            |   3 +-
 src/client/northstar/dash-fields/HistogramField.ts |   7 +-
 src/client/northstar/dash-nodes/HistogramBox.tsx   |   2 +-
 src/client/util/DocumentManager.ts                 |   2 +-
 src/client/util/SearchUtil.ts                      |   2 +-
 src/client/util/TooltipTextMenu.tsx                |   2 +-
 src/client/util/type_decls.d                       | 128 +++++++--------------
 src/client/views/EditableView.tsx                  |  10 +-
 src/client/views/MainView.tsx                      |   2 +-
 src/client/views/PresentationView.tsx              |   2 +-
 src/client/views/SearchBox.tsx                     |   2 +-
 .../views/collections/CollectionBaseView.tsx       |   2 +-
 .../views/collections/CollectionDockingView.tsx    |  14 ++-
 src/client/views/collections/CollectionPDFView.tsx |   2 +-
 .../views/collections/CollectionSchemaView.tsx     |   2 +-
 .../views/collections/CollectionTreeView.tsx       |   2 +-
 .../views/collections/CollectionVideoView.tsx      |   2 +-
 src/client/views/collections/CollectionView.tsx    |   2 +-
 .../views/collections/ParentDocumentSelector.tsx   |   2 +-
 .../CollectionFreeFormLinksView.tsx                |   2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx |   3 -
 src/client/views/nodes/DocumentView.tsx            |   4 +-
 src/client/views/nodes/KeyValueBox.tsx             |   4 +-
 src/client/views/nodes/KeyValuePair.tsx            |   4 +-
 src/client/views/nodes/LinkMenu.tsx                |   2 +-
 src/debug/Viewer.tsx                               |  53 +++++++--
 src/new_fields/CursorField.ts                      |   7 +-
 src/new_fields/DateField.ts                        |   7 +-
 src/new_fields/Doc.ts                              |  43 ++++---
 src/new_fields/FieldSymbols.ts                     |  10 ++
 src/new_fields/HtmlField.ts                        |   7 +-
 src/new_fields/IconField.ts                        |   7 +-
 src/new_fields/InkField.ts                         |   7 +-
 src/new_fields/List.ts                             |  16 ++-
 src/new_fields/ObjectField.ts                      |   7 +-
 src/new_fields/Proxy.ts                            |   9 +-
 src/new_fields/RefField.ts                         |   5 +-
 src/new_fields/RichTextField.ts                    |   7 +-
 src/new_fields/URLField.ts                         |   9 +-
 src/new_fields/util.ts                             |   7 +-
 42 files changed, 240 insertions(+), 173 deletions(-)
 create mode 100644 src/new_fields/FieldSymbols.ts

(limited to 'src')

diff --git a/deploy/debug/viewer.html b/deploy/debug/viewer.html
index 3785a6602..8c265ccb8 100644
--- a/deploy/debug/viewer.html
+++ b/deploy/debug/viewer.html
@@ -3,6 +3,7 @@
 <head>
     <title>Document Debugger</title>
     <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script>
 </head>
 
 <body>
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index f1b50d5a0..cbcf751ee 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -3,7 +3,8 @@ import { MessageStore } from "./../server/Message";
 import { Opt } from '../new_fields/Doc';
 import { Utils, emptyFunction } from '../Utils';
 import { SerializationHelper } from './util/SerializationHelper';
-import { RefField, HandleUpdate, Id } from '../new_fields/RefField';
+import { RefField } from '../new_fields/RefField';
+import { Id, HandleUpdate } from '../new_fields/FieldSymbols';
 
 export namespace DocServer {
     const _cache: { [id: string]: RefField | Promise<Opt<RefField>> } = {};
diff --git a/src/client/northstar/dash-fields/HistogramField.ts b/src/client/northstar/dash-fields/HistogramField.ts
index 1ee2189b9..31040a474 100644
--- a/src/client/northstar/dash-fields/HistogramField.ts
+++ b/src/client/northstar/dash-fields/HistogramField.ts
@@ -3,10 +3,11 @@ import { custom, serializable } from "serializr";
 import { ColumnAttributeModel } from "../../../client/northstar/core/attribute/AttributeModel";
 import { AttributeTransformationModel } from "../../../client/northstar/core/attribute/AttributeTransformationModel";
 import { HistogramOperation } from "../../../client/northstar/operations/HistogramOperation";
-import { ObjectField, Copy } from "../../../new_fields/ObjectField";
+import { ObjectField } from "../../../new_fields/ObjectField";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { OmitKeys } from "../../../Utils";
 import { Deserializable } from "../../util/SerializationHelper";
+import { Copy, ToScriptString } from "../../../new_fields/FieldSymbols";
 
 function serialize(field: HistogramField) {
     let obj = OmitKeys(field, ['Links', 'BrushLinks', 'Result', 'BrushColors', 'FilterModels', 'FilterOperand']).omit;
@@ -55,4 +56,8 @@ export class HistogramField extends ObjectField {
         let z = this.HistoOp.Copy;
         return new HistogramField(HistogramOperation.Duplicate(this.HistoOp));
     }
+
+    [ToScriptString]() {
+        return "invalid";
+    }
 }
\ No newline at end of file
diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx
index eb1ad69b7..a9646ed31 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBox.tsx
@@ -19,7 +19,7 @@ import { HistogramLabelPrimitives } from "./HistogramLabelPrimitives";
 import { StyleConstants } from "../utils/StyleContants";
 import { Cast } from "../../../new_fields/Types";
 import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
-import { Id } from "../../../new_fields/RefField";
+import { Id } from "../../../new_fields/FieldSymbols";
 
 
 @observer
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index be448098a..a5e768dcf 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -5,10 +5,10 @@ import { FieldValue, Cast, NumCast, BoolCast } from '../../new_fields/Types';
 import { listSpec } from '../../new_fields/Schema';
 import { undoBatch } from './UndoManager';
 import { CollectionDockingView } from '../views/collections/CollectionDockingView';
-import { Id } from '../../new_fields/RefField';
 import { CollectionView } from '../views/collections/CollectionView';
 import { CollectionPDFView } from '../views/collections/CollectionPDFView';
 import { CollectionVideoView } from '../views/collections/CollectionVideoView';
+import { Id } from '../../new_fields/FieldSymbols';
 
 
 export class DocumentManager {
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index 4ccff0d1b..e8eb70837 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -1,7 +1,7 @@
 import * as rp from 'request-promise';
 import { DocServer } from '../DocServer';
 import { Doc } from '../../new_fields/Doc';
-import { Id } from '../../new_fields/RefField';
+import { Id } from '../../new_fields/FieldSymbols';
 
 export namespace SearchUtil {
     export function Search(query: string, returnDocs: true): Promise<Doc[]>;
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 4d40d09b2..a1f80120f 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -22,12 +22,12 @@ import { throwStatement } from "babel-types";
 import { View } from "@react-pdf/renderer";
 import { DragManager } from "./DragManager";
 import { Doc, Opt, Field } from "../../new_fields/Doc";
-import { Id } from "../../new_fields/RefField";
 import { Utils } from "../northstar/utils/Utils";
 import { DocServer } from "../DocServer";
 import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView";
 import { CollectionDockingView } from "../views/collections/CollectionDockingView";
 import { DocumentManager } from "./DocumentManager";
+import { Id } from "../../new_fields/FieldSymbols";
 
 const SVG = "http://www.w3.org/2000/svg";
 
diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d
index 47c3481b2..51114d0e2 100644
--- a/src/client/util/type_decls.d
+++ b/src/client/util/type_decls.d
@@ -119,104 +119,54 @@ interface URL {
     username: string;
     toJSON(): string;
 }
+interface PromiseLike<T> {
+    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): PromiseLike<TResult1 | TResult2>;
+}
+interface Promise<T> {
+    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;
+    catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
+}
 
-declare type FieldId = string;
+declare const Update: unique symbol;
+declare const Self: unique symbol;
+declare const SelfProxy: unique symbol;
+declare const HandleUpdate: unique symbol;
+declare const Id: unique symbol;
+declare const OnUpdate: unique symbol;
+declare const Parent: unique symbol;
+declare const Copy: unique symbol;
+declare const ToScriptString: unique symbol;
 
-declare abstract class Field {
-    Id: FieldId;
-    abstract ToScriptString(): string;
-    abstract TrySetValue(value: any): boolean;
-    abstract GetValue(): any;
-    abstract Copy(): Field;
-}
+declare abstract class RefField {
+    readonly [Id]: FieldId;
+
+    constructor(id?: FieldId);
+    protected [HandleUpdate]?(diff: any): void;
 
-declare abstract class BasicField<T> extends Field {
-    constructor(data: T);
-    Data: T;
-    TrySetValue(value: any): boolean;
-    GetValue(): any;
+    abstract [ToScriptString](): string;
 }
 
-declare class TextField extends BasicField<string>{
-    constructor();
-    constructor(data: string);
-    ToScriptString(): string;
-    Copy(): Field;
-}
-declare class ImageField extends BasicField<URL>{
-    constructor();
-    constructor(data: URL);
-    ToScriptString(): string;
-    Copy(): Field;
-}
-declare class HtmlField extends BasicField<string>{
-    constructor();
-    constructor(data: string);
-    ToScriptString(): string;
-    Copy(): Field;
-}
-declare class NumberField extends BasicField<number>{
-    constructor();
-    constructor(data: number);
-    ToScriptString(): string;
-    Copy(): Field;
-}
-declare class WebField extends BasicField<URL>{
-    constructor();
-    constructor(data: URL);
-    ToScriptString(): string;
-    Copy(): Field;
-}
-declare class ListField<T> extends BasicField<T[]>{
-    constructor();
-    constructor(data: T[]);
-    ToScriptString(): string;
-    Copy(): Field;
-}
-declare class Key extends Field {
-    constructor(name:string);
-    Name: string;
-    TrySetValue(value: any): boolean;
-    GetValue(): any;
-    Copy(): Field;
-    ToScriptString(): string;
-}
-declare type FIELD_WAITING = null;
-declare type Opt<T> = T | undefined;
-declare type FieldValue<T> = Opt<T> | FIELD_WAITING;
-// @ts-ignore
-declare class Document extends Field {
-    TrySetValue(value: any): boolean;
-    GetValue(): any;
-    Copy(): Field;
-    ToScriptString(): string;
+declare abstract class ObjectField {
+    protected [OnUpdate](diff?: any): void;
+    private [Parent]?: RefField | ObjectField;
+    abstract [Copy](): ObjectField;
 
-    Width(): number;
-    Height(): number;
-    Scale(): number;
-    Title: string;
+    abstract [ToScriptString](): string;
+}
+declare type FieldId = string;
 
-    Get(key: Key): FieldValue<Field>;
-    GetAsync(key: Key, callback: (field: Field) => void): boolean;
-    GetOrCreateAsync<T extends Field>(key: Key, ctor: { new(): T }, callback: (field: T) => void): void;
-    GetT<T extends Field>(key: Key, ctor: { new(): T }): FieldValue<T>;
-    GetOrCreate<T extends Field>(key: Key, ctor: { new(): T }): T;
-    GetData<T, U extends Field & { Data: T }>(key: Key, ctor: { new(): U }, defaultVal: T): T;
-    GetHtml(key: Key, defaultVal: string): string;
-    GetNumber(key: Key, defaultVal: number): number;
-    GetText(key: Key, defaultVal: string): string;
-    GetList<T extends Field>(key: Key, defaultVal: T[]): T[];
-    Set(key: Key, field: Field | undefined): void;
-    SetData<T, U extends Field & { Data: T }>(key: Key, value: T, ctor: { new(): U }): void;
-    SetText(key: Key, value: string): void;
-    SetNumber(key: Key, value: number): void;
-    GetPrototype(): FieldValue<Document>;
-    GetAllPrototypes(): Document[];
-    MakeDelegate(): Document;
+declare type Field = number | string | boolean | ObjectField | RefField;
+
+declare type Opt<T> = T | undefined;
+declare class Doc extends RefField {
+    [key: string]: Field | undefined;
+    [ToScriptString](): string;
 }
 
-declare const KeyStore: {
-    [name: string]: Key;
+declare class ListImpl<T extends Field> extends ObjectField {
+    [index: number]: T | (T extends RefField ? Promise<T> : never);
+    [ToScriptString](): string;
+    [Copy](): ObjectField;
 }
 
 // @ts-ignore
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 78143ccda..c946d68e1 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -22,7 +22,7 @@ export interface EditableProps {
      * The contents to render when not editing
      */
     contents: any;
-    height: number;
+    height?: number;
     display?: string;
     oneLine?: boolean;
 }
@@ -53,6 +53,12 @@ export class EditableView extends React.Component<EditableProps> {
         }
     }
 
+    @action
+    onClick = (e: React.MouseEvent) => {
+        this.editing = true;
+        e.stopPropagation();
+    }
+
     render() {
         if (this.editing) {
             return <input className="editableView-input" defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
@@ -60,7 +66,7 @@ export class EditableView extends React.Component<EditableProps> {
         } else {
             return (
                 <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`} style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }}
-                    onClick={action(() => this.editing = true)} >
+                    onClick={this.onClick} >
                     <span>{this.props.contents}</span>
                 </div>
             );
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 400562f12..9edbba997 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -29,7 +29,7 @@ import { FieldResult, Field, Doc, Opt } from '../../new_fields/Doc';
 import { Cast, FieldValue, StrCast } from '../../new_fields/Types';
 import { DocServer } from '../DocServer';
 import { listSpec } from '../../new_fields/Schema';
-import { Id } from '../../new_fields/RefField';
+import { Id } from '../../new_fields/FieldSymbols';
 import { HistoryUtil } from '../util/History';
 import { CollectionBaseView } from './collections/CollectionBaseView';
 
diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index 9c37e9000..ce679aa0a 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -7,7 +7,7 @@ import { Utils } from "../../Utils";
 import { Doc, DocListCast, DocListCastAsync } from "../../new_fields/Doc";
 import { listSpec } from "../../new_fields/Schema";
 import { Cast, NumCast, FieldValue, PromiseValue, StrCast } from "../../new_fields/Types";
-import { Id } from "../../new_fields/RefField";
+import { Id } from "../../new_fields/FieldSymbols";
 import { List } from "../../new_fields/List";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 6e64e1af1..8efd8d266 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -16,7 +16,7 @@ import { isString } from 'util';
 import { constant } from 'async';
 import { DocServer } from '../DocServer';
 import { Doc } from '../../new_fields/Doc';
-import { Id } from '../../new_fields/RefField';
+import { Id } from '../../new_fields/FieldSymbols';
 import { DocumentManager } from '../util/DocumentManager';
 import { SetupDrag } from '../util/DragManager';
 import { Docs } from '../documents/Documents';
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 84ffbac36..5686ccfef 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -7,8 +7,8 @@ import { Cast, FieldValue, PromiseValue, NumCast } from '../../../new_fields/Typ
 import { Doc, FieldResult, Opt, DocListCast } from '../../../new_fields/Doc';
 import { listSpec } from '../../../new_fields/Schema';
 import { List } from '../../../new_fields/List';
-import { Id } from '../../../new_fields/RefField';
 import { SelectionManager } from '../../util/SelectionManager';
+import { Id } from '../../../new_fields/FieldSymbols';
 
 export enum CollectionViewType {
     Invalid,
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 483209f86..e904358a9 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -6,7 +6,7 @@ import * as ReactDOM from 'react-dom';
 import Measure from "react-measure";
 import * as GoldenLayout from "../../../client/goldenLayout";
 import { Doc, Field, Opt, DocListCast } from "../../../new_fields/Doc";
-import { FieldId, Id } from "../../../new_fields/RefField";
+import { FieldId } from "../../../new_fields/RefField";
 import { listSpec } from "../../../new_fields/Schema";
 import { Cast, NumCast, StrCast } from "../../../new_fields/Types";
 import { emptyFunction, returnTrue, Utils } from "../../../Utils";
@@ -21,6 +21,7 @@ import React = require("react");
 import { ParentDocSelector } from './ParentDocumentSelector';
 import { DocumentManager } from '../../util/DocumentManager';
 import { CollectionViewType } from './CollectionBaseView';
+import { Id } from '../../../new_fields/FieldSymbols';
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -75,7 +76,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
 
     @undoBatch
     @action
-    public CloseRightSplit(document: Doc): boolean {
+    public CloseRightSplit = (document: Doc): boolean => {
         let retVal = false;
         if (this._goldenLayout.root.contentItems[0].isRow) {
             retVal = Array.from(this._goldenLayout.root.contentItems[0].contentItems).some((child: any) => {
@@ -118,7 +119,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //
     @action
-    public AddRightSplit(document: Doc, minimize: boolean = false) {
+    public AddRightSplit = (document: Doc, minimize: boolean = false) => {
         let docs = Cast(this.props.Document.data, listSpec(Doc));
         if (docs) {
             docs.push(document);
@@ -155,7 +156,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         return newContentItem;
     }
     @action
-    public AddTab(stack: any, document: Doc) {
+    public AddTab = (stack: any, document: Doc) => {
         let docs = Cast(this.props.Document.data, listSpec(Doc));
         if (docs) {
             docs.push(document);
@@ -412,10 +413,11 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     @observable private _panelWidth = 0;
     @observable private _panelHeight = 0;
     @observable private _document: Opt<Doc>;
-    _stack: any;
+    get _stack(): any {
+        return (this.props as any).glContainer.parent.parent;
+    }
     constructor(props: any) {
         super(props);
-        this._stack = (this.props as any).glContainer.parent.parent;
         DocServer.GetRefField(this.props.documentId).then(action((f: Opt<Field>) => this._document = f as Doc));
     }
 
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index a6614da21..5e51437a4 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -8,7 +8,7 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import { CollectionRenderProps, CollectionBaseView, CollectionViewType } from "./CollectionBaseView";
 import { emptyFunction } from "../../../Utils";
 import { NumCast } from "../../../new_fields/Types";
-import { Id } from "../../../new_fields/RefField";
+import { Id } from "../../../new_fields/FieldSymbols";
 
 
 @observer
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index f15da41ff..b25b48339 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -23,7 +23,7 @@ import { Opt, Field, Doc, DocListCastAsync, DocListCast } from "../../../new_fie
 import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
 import { List } from "../../../new_fields/List";
-import { Id } from "../../../new_fields/RefField";
+import { Id } from "../../../new_fields/FieldSymbols";
 import { Gateway } from "../../northstar/manager/Gateway";
 import { Docs } from "../../documents/Documents";
 import { ContextMenu } from "../ContextMenu";
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 72fa69cb1..8ad495762 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -11,7 +11,7 @@ import React = require("react");
 import { Document, listSpec } from '../../../new_fields/Schema';
 import { Cast, StrCast, BoolCast, FieldValue } from '../../../new_fields/Types';
 import { Doc, DocListCast } from '../../../new_fields/Doc';
-import { Id } from '../../../new_fields/RefField';
+import { Id } from '../../../new_fields/FieldSymbols';
 import { ContextMenu } from '../ContextMenu';
 import { undoBatch } from '../../util/UndoManager';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 9ab959f3c..27f23a1a8 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -7,7 +7,7 @@ import "./CollectionVideoView.scss";
 import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView";
 import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import { emptyFunction } from "../../../Utils";
-import { Id } from "../../../new_fields/RefField";
+import { Id } from "../../../new_fields/FieldSymbols";
 import { VideoBox } from "../nodes/VideoBox";
 import { NumCast } from "../../../new_fields/Types";
 
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 59c763be8..bfdef8e8c 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { faProjectDiagram, faSquare, faTh, faTree, faSignature, faThList } from '@fortawesome/free-solid-svg-icons';
 import { observer } from "mobx-react";
 import * as React from 'react';
-import { Id } from '../../../new_fields/RefField';
+import { Id } from '../../../new_fields/FieldSymbols';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
 import { undoBatch } from '../../util/UndoManager';
 import { ContextMenu } from "../ContextMenu";
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 52f7914f3..4d07c31a7 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -3,7 +3,7 @@ import './ParentDocumentSelector.scss';
 import { Doc } from "../../../new_fields/Doc";
 import { observer } from "mobx-react";
 import { observable, action, runInAction } from "mobx";
-import { Id } from "../../../new_fields/RefField";
+import { Id } from "../../../new_fields/FieldSymbols";
 import { SearchUtil } from "../../util/SearchUtil";
 import { CollectionDockingView } from "./CollectionDockingView";
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index d5ce4e1e7..e1ff715d1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -11,7 +11,7 @@ import { Doc, DocListCastAsync, DocListCast } from "../../../../new_fields/Doc";
 import { Cast, FieldValue, NumCast, StrCast } from "../../../../new_fields/Types";
 import { listSpec } from "../../../../new_fields/Schema";
 import { List } from "../../../../new_fields/List";
-import { Id } from "../../../../new_fields/RefField";
+import { Id } from "../../../../new_fields/FieldSymbols";
 
 @observer
 export class CollectionFreeFormLinksView extends React.Component<CollectionViewProps> {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 9cb8443f4..ee6f4821f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -22,9 +22,9 @@ import { createSchema, makeInterface, listSpec } from "../../../../new_fields/Sc
 import { Doc, WidthSym, HeightSym } from "../../../../new_fields/Doc";
 import { FieldValue, Cast, NumCast, BoolCast } from "../../../../new_fields/Types";
 import { pageSchema } from "../../nodes/ImageBox";
-import { Id } from "../../../../new_fields/RefField";
 import { InkField, StrokeData } from "../../../../new_fields/InkField";
 import { HistoryUtil } from "../../../util/History";
+import { Id } from "../../../../new_fields/FieldSymbols";
 
 export const panZoomSchema = createSchema({
     panX: "number",
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 4587c2227..2029b91e5 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -17,9 +17,6 @@ import { InkField, StrokeData } from "../../../../new_fields/InkField";
 import { List } from "../../../../new_fields/List";
 import { ImageField } from "../../../../new_fields/URLField";
 import { Template, Templates } from "../../Templates";
-import { Gateway } from "../../../northstar/manager/Gateway";
-import { DocServer } from "../../../DocServer";
-import { Id } from "../../../../new_fields/RefField";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 5f218fd1f..87c88f57c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -4,8 +4,7 @@ import { action, computed, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
-import { Copy, ObjectField } from "../../../new_fields/ObjectField";
-import { Id } from "../../../new_fields/RefField";
+import { ObjectField } from "../../../new_fields/ObjectField";
 import { createSchema, makeInterface } from "../../../new_fields/Schema";
 import { BoolCast, Cast, FieldValue, StrCast } from "../../../new_fields/Types";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
@@ -29,6 +28,7 @@ import { Template } from "./../Templates";
 import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
 import React = require("react");
+import { Id, Copy } from '../../../new_fields/FieldSymbols';
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 library.add(faTrash);
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 86437a6c1..8cb576786 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -8,7 +8,7 @@ import "./KeyValueBox.scss";
 import { KeyValuePair } from "./KeyValuePair";
 import React = require("react");
 import { NumCast, Cast, FieldValue } from "../../../new_fields/Types";
-import { Doc, IsField } from "../../../new_fields/Doc";
+import { Doc, Field } from "../../../new_fields/Doc";
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
@@ -41,7 +41,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                 let res = script.run();
                 if (!res.success) return;
                 const field = res.result;
-                if (IsField(field)) {
+                if (Field.IsField(field)) {
                     realDoc[this._keyInput] = field;
                 }
                 this._keyInput = "";
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 4f7919f50..7a88985c0 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -9,7 +9,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import "./KeyValueBox.scss";
 import "./KeyValuePair.scss";
 import React = require("react");
-import { Doc, Opt, IsField } from '../../../new_fields/Doc';
+import { Doc, Opt, Field } from '../../../new_fields/Doc';
 import { FieldValue } from '../../../new_fields/Types';
 
 // Represents one row in a key value plane
@@ -75,7 +75,7 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                             let res = script.run();
                             if (!res.success) return false;
                             const field = res.result;
-                            if (IsField(field)) {
+                            if (Field.IsField(field)) {
                                 props.Document[props.fieldKey] = field;
                                 return true;
                             }
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 4cf798249..3f09d6214 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -7,7 +7,7 @@ import './LinkMenu.scss';
 import React = require("react");
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
-import { Id } from "../../../new_fields/RefField";
+import { Id } from "../../../new_fields/FieldSymbols";
 
 interface Props {
     docView: DocumentView;
diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index 720e1640a..4314e2132 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -3,11 +3,27 @@ import "normalize.css";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { observer } from 'mobx-react';
-import { Doc, Field, FieldResult } from '../new_fields/Doc';
+import { Doc, Field, FieldResult, Opt } from '../new_fields/Doc';
 import { DocServer } from '../client/DocServer';
-import { Id } from '../new_fields/RefField';
+import { Id } from '../new_fields/FieldSymbols';
 import { List } from '../new_fields/List';
 import { URLField } from '../new_fields/URLField';
+import { EditableView } from '../client/views/EditableView';
+import { CompileScript } from '../client/util/Scripting';
+
+function applyToDoc(doc: { [index: string]: FieldResult }, key: string, scriptString: string): boolean;
+function applyToDoc(doc: { [index: number]: FieldResult }, key: number, scriptString: string): boolean;
+function applyToDoc(doc: any, key: string | number, scriptString: string): boolean {
+    let script = CompileScript(scriptString, { addReturn: true, params: { this: doc instanceof Doc ? Doc.name : List.name } });
+    if (!script.compiled) {
+        return false;
+    }
+    const res = script.run({ this: doc });
+    if (!res.success) return false;
+    if (!Field.IsField(res.result)) return false;
+    doc[key] = res.result;
+    return true;
+}
 
 configure({
     enforceActions: "observed"
@@ -18,12 +34,18 @@ class ListViewer extends React.Component<{ field: List<Field> }>{
     @observable
     expanded = false;
 
+    @action
+    onClick = (e: React.MouseEvent) => {
+        this.expanded = !this.expanded;
+        e.stopPropagation();
+    }
+
     render() {
         let content;
         if (this.expanded) {
             content = (
                 <div>
-                    {this.props.field.map((field, index) => <DebugViewer field={field} key={index} />)}
+                    {this.props.field.map((field, index) => <DebugViewer field={field} key={index} setValue={value => applyToDoc(this.props.field, index, value)} />)}
                 </div>
             );
         } else {
@@ -31,7 +53,7 @@ class ListViewer extends React.Component<{ field: List<Field> }>{
         }
         return (
             <div>
-                <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
+                <button onClick={this.onClick}>Toggle</button>
                 {content}
             </div >
         );
@@ -42,6 +64,13 @@ class ListViewer extends React.Component<{ field: List<Field> }>{
 class DocumentViewer extends React.Component<{ field: Doc }> {
     @observable
     expanded = false;
+
+    @action
+    onClick = (e: React.MouseEvent) => {
+        this.expanded = !this.expanded;
+        e.stopPropagation();
+    }
+
     render() {
         let content;
         if (this.expanded) {
@@ -50,7 +79,7 @@ class DocumentViewer extends React.Component<{ field: Doc }> {
                 return (
                     <div key={key}>
                         <b>({key}): </b>
-                        <DebugViewer field={this.props.field[key]}></DebugViewer>
+                        <DebugViewer field={this.props.field[key]} setValue={value => applyToDoc(this.props.field, key, value)}></DebugViewer>
                     </div>
                 );
             });
@@ -67,7 +96,7 @@ class DocumentViewer extends React.Component<{ field: Doc }> {
         }
         return (
             <div>
-                <button onClick={action(() => this.expanded = !this.expanded)}>Toggle</button>
+                <button onClick={this.onClick}>Toggle</button>
                 {content}
             </div >
         );
@@ -75,7 +104,7 @@ class DocumentViewer extends React.Component<{ field: Doc }> {
 }
 
 @observer
-class DebugViewer extends React.Component<{ field: FieldResult }> {
+class DebugViewer extends React.Component<{ field: FieldResult, setValue(value: string): boolean }> {
 
     render() {
         let content;
@@ -90,10 +119,14 @@ class DebugViewer extends React.Component<{ field: FieldResult }> {
             content = <p>{field}</p>;
         } else if (field instanceof URLField) {
             content = <p>{field.url.href}</p>;
+        } else if (field instanceof Promise) {
+            return <p>Field loading</p>;
         } else {
-            content = <p>Unrecognized field type</p>;
+            return <p>Unrecognized field type</p>;
         }
-        return content;
+
+        return <EditableView GetValue={() => Field.toScriptString(field)} SetValue={this.props.setValue}
+            contents={content}></EditableView>;
     }
 }
 
@@ -129,7 +162,7 @@ class Viewer extends React.Component {
                     onChange={this.inputOnChange}
                     onKeyDown={this.onKeyPress} />
                 <div>
-                    {this.fields.map((field, index) => <DebugViewer field={field} key={index}></DebugViewer>)}
+                    {this.fields.map((field, index) => <DebugViewer field={field} key={index} setValue={() => false}></DebugViewer>)}
                 </div>
             </>
         );
diff --git a/src/new_fields/CursorField.ts b/src/new_fields/CursorField.ts
index fc144222c..1be1ec3e0 100644
--- a/src/new_fields/CursorField.ts
+++ b/src/new_fields/CursorField.ts
@@ -1,7 +1,8 @@
-import { ObjectField, Copy, OnUpdate } from "./ObjectField";
+import { ObjectField } from "./ObjectField";
 import { observable } from "mobx";
 import { Deserializable } from "../client/util/SerializationHelper";
 import { serializable, createSimpleSchema, object } from "serializr";
+import { OnUpdate, ToScriptString, Copy } from "./FieldSymbols";
 
 export type CursorPosition = {
     x: number,
@@ -52,4 +53,8 @@ export default class CursorField extends ObjectField {
     [Copy]() {
         return new CursorField(this.data);
     }
+
+    [ToScriptString]() {
+        return "invalid";
+    }
 }
\ No newline at end of file
diff --git a/src/new_fields/DateField.ts b/src/new_fields/DateField.ts
index c0a79f267..fc8abb9d9 100644
--- a/src/new_fields/DateField.ts
+++ b/src/new_fields/DateField.ts
@@ -1,6 +1,7 @@
 import { Deserializable } from "../client/util/SerializationHelper";
 import { serializable, date } from "serializr";
-import { ObjectField, Copy } from "./ObjectField";
+import { ObjectField } from "./ObjectField";
+import { Copy, ToScriptString } from "./FieldSymbols";
 
 @Deserializable("date")
 export class DateField extends ObjectField {
@@ -15,4 +16,8 @@ export class DateField extends ObjectField {
     [Copy]() {
         return new DateField(this.date);
     }
+
+    [ToScriptString]() {
+        return `new DateField(new Date(${this.date.toISOString()}))`;
+    }
 }
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 02dd34cb4..f4514c33e 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -5,27 +5,33 @@ import { DocServer } from "../client/DocServer";
 import { setter, getter, getField, updateFunction, deleteProperty } from "./util";
 import { Cast, ToConstructor, PromiseValue, FieldValue, NumCast } from "./Types";
 import { listSpec } from "./Schema";
-import { ObjectField, Parent, OnUpdate } from "./ObjectField";
-import { RefField, FieldId, Id, HandleUpdate } from "./RefField";
-
-export function IsField(field: any): field is Field {
-    return (typeof field === "string")
-        || (typeof field === "number")
-        || (typeof field === "boolean")
-        || (field instanceof ObjectField)
-        || (field instanceof RefField);
+import { ObjectField } from "./ObjectField";
+import { RefField, FieldId } from "./RefField";
+import { ToScriptString, SelfProxy, Parent, OnUpdate, Self, HandleUpdate, Update, Id } from "./FieldSymbols";
+
+export namespace Field {
+    export function toScriptString(field: Field): string {
+        if (typeof field === "string") {
+            return `"${field}"`;
+        } else if (typeof field === "number" || typeof field === "boolean") {
+            return String(field);
+        } else {
+            return field[ToScriptString]();
+        }
+    }
+    export function IsField(field: any): field is Field {
+        return (typeof field === "string")
+            || (typeof field === "number")
+            || (typeof field === "boolean")
+            || (field instanceof ObjectField)
+            || (field instanceof RefField);
+    }
 }
 export type Field = number | string | boolean | ObjectField | RefField;
 export type Opt<T> = T | undefined;
 export type FieldWaiting<T extends RefField = RefField> = T extends undefined ? never : Promise<T | undefined>;
 export type FieldResult<T extends Field = Field> = Opt<T> | FieldWaiting<Extract<T, RefField>>;
 
-export const Update = Symbol("Update");
-export const Self = Symbol("Self");
-export const SelfProxy = Symbol("SelfProxy");
-export const WidthSym = Symbol("Width");
-export const HeightSym = Symbol("Height");
-
 /**
  * Cast any field to either a List of Docs or undefined if the given field isn't a List of Docs.  
  * If a default value is given, that will be returned instead of undefined.  
@@ -43,6 +49,9 @@ export function DocListCast(field: FieldResult): Doc[] {
     return Cast(field, listSpec(Doc), []).filter(d => d instanceof Doc) as Doc[];
 }
 
+export const WidthSym = Symbol("Width");
+export const HeightSym = Symbol("Height");
+
 @Deserializable("doc").withFields(["id"])
 export class Doc extends RefField {
     constructor(id?: FieldId, forceSave?: boolean) {
@@ -102,6 +111,10 @@ export class Doc extends RefField {
     public [WidthSym] = () => NumCast(this[SelfProxy].width);  // bcz: is this the right way to access width/height?   it didn't work with : this.width
     public [HeightSym] = () => NumCast(this[SelfProxy].height);
 
+    [ToScriptString]() {
+        return "invalid";
+    }
+
     public [HandleUpdate](diff: any) {
         console.log(diff);
         const set = diff.$set;
diff --git a/src/new_fields/FieldSymbols.ts b/src/new_fields/FieldSymbols.ts
new file mode 100644
index 000000000..a436dcf2b
--- /dev/null
+++ b/src/new_fields/FieldSymbols.ts
@@ -0,0 +1,10 @@
+
+export const Update = Symbol("Update");
+export const Self = Symbol("Self");
+export const SelfProxy = Symbol("SelfProxy");
+export const HandleUpdate = Symbol("HandleUpdate");
+export const Id = Symbol("Id");
+export const OnUpdate = Symbol("OnUpdate");
+export const Parent = Symbol("Parent");
+export const Copy = Symbol("Copy");
+export const ToScriptString = Symbol("Copy");
\ No newline at end of file
diff --git a/src/new_fields/HtmlField.ts b/src/new_fields/HtmlField.ts
index d998746bb..f952acff9 100644
--- a/src/new_fields/HtmlField.ts
+++ b/src/new_fields/HtmlField.ts
@@ -1,6 +1,7 @@
 import { Deserializable } from "../client/util/SerializationHelper";
 import { serializable, primitive } from "serializr";
-import { ObjectField, Copy } from "./ObjectField";
+import { ObjectField } from "./ObjectField";
+import { Copy, ToScriptString } from "./FieldSymbols";
 
 @Deserializable("html")
 export class HtmlField extends ObjectField {
@@ -15,4 +16,8 @@ export class HtmlField extends ObjectField {
     [Copy]() {
         return new HtmlField(this.html);
     }
+
+    [ToScriptString]() {
+        return "invalid";
+    }
 }
diff --git a/src/new_fields/IconField.ts b/src/new_fields/IconField.ts
index 1a928389d..62b2cd254 100644
--- a/src/new_fields/IconField.ts
+++ b/src/new_fields/IconField.ts
@@ -1,6 +1,7 @@
 import { Deserializable } from "../client/util/SerializationHelper";
 import { serializable, primitive } from "serializr";
-import { ObjectField, Copy } from "./ObjectField";
+import { ObjectField } from "./ObjectField";
+import { Copy, ToScriptString } from "./FieldSymbols";
 
 @Deserializable("icon")
 export class IconField extends ObjectField {
@@ -15,4 +16,8 @@ export class IconField extends ObjectField {
     [Copy]() {
         return new IconField(this.icon);
     }
+
+    [ToScriptString]() {
+        return "invalid";
+    }
 }
diff --git a/src/new_fields/InkField.ts b/src/new_fields/InkField.ts
index 2d75f8a19..4e3b7abe0 100644
--- a/src/new_fields/InkField.ts
+++ b/src/new_fields/InkField.ts
@@ -1,6 +1,7 @@
 import { Deserializable } from "../client/util/SerializationHelper";
 import { serializable, custom, createSimpleSchema, list, object, map } from "serializr";
-import { ObjectField, Copy } from "./ObjectField";
+import { ObjectField } from "./ObjectField";
+import { Copy, ToScriptString } from "./FieldSymbols";
 import { deepCopy } from "../Utils";
 
 export enum InkTool {
@@ -40,4 +41,8 @@ export class InkField extends ObjectField {
     [Copy]() {
         return new InkField(deepCopy(this.inkData));
     }
+
+    [ToScriptString]() {
+        return "invalid";
+    }
 }
diff --git a/src/new_fields/List.ts b/src/new_fields/List.ts
index 70e36f911..f1e4c4721 100644
--- a/src/new_fields/List.ts
+++ b/src/new_fields/List.ts
@@ -1,11 +1,12 @@
 import { Deserializable, autoObject } from "../client/util/SerializationHelper";
-import { Field, Update, Self, FieldResult, SelfProxy } from "./Doc";
+import { Field } from "./Doc";
 import { setter, getter, deleteProperty, updateFunction } from "./util";
 import { serializable, alias, list } from "serializr";
 import { observable, action } from "mobx";
-import { ObjectField, OnUpdate, Copy, Parent } from "./ObjectField";
+import { ObjectField } from "./ObjectField";
 import { RefField } from "./RefField";
 import { ProxyField } from "./Proxy";
+import { Self, Update, Parent, OnUpdate, SelfProxy, ToScriptString, Copy } from "./FieldSymbols";
 
 const listHandlers: any = {
     /// Mutator methods
@@ -225,7 +226,7 @@ type StoredType<T extends Field> = T extends RefField ? ProxyField<T> : T;
 
 @Deserializable("list")
 class ListImpl<T extends Field> extends ObjectField {
-    constructor(fields: T[] = []) {
+    constructor(fields?: T[]) {
         super();
         const list = new Proxy<this>(this, {
             set: setter,
@@ -244,7 +245,9 @@ class ListImpl<T extends Field> extends ObjectField {
             defineProperty: () => { throw new Error("Currently properties can't be defined on documents using Object.defineProperty"); },
         });
         this[SelfProxy] = list;
-        (list as any).push(...fields);
+        if (fields) {
+            (list as any).push(...fields);
+        }
         return list;
     }
 
@@ -284,6 +287,11 @@ class ListImpl<T extends Field> extends ObjectField {
 
     private [Self] = this;
     private [SelfProxy]: any;
+
+    [ToScriptString]() {
+        return "invalid";
+        // return `new List([${(this as any).map((field => Field.toScriptString(field))}])`;
+    }
 }
 export type List<T extends Field> = ListImpl<T> & (T | (T extends RefField ? Promise<T> : never))[];
 export const List: { new <T extends Field>(fields?: T[]): List<T> } = ListImpl as any;
\ No newline at end of file
diff --git a/src/new_fields/ObjectField.ts b/src/new_fields/ObjectField.ts
index 51768c6db..5f4a6f8fb 100644
--- a/src/new_fields/ObjectField.ts
+++ b/src/new_fields/ObjectField.ts
@@ -1,14 +1,13 @@
 import { Doc } from "./Doc";
 import { RefField } from "./RefField";
-
-export const OnUpdate = Symbol("OnUpdate");
-export const Parent = Symbol("Parent");
-export const Copy = Symbol("Copy");
+import { OnUpdate, Parent, Copy, ToScriptString } from "./FieldSymbols";
 
 export abstract class ObjectField {
     protected [OnUpdate](diff?: any) { }
     private [Parent]?: RefField | ObjectField;
     abstract [Copy](): ObjectField;
+
+    abstract [ToScriptString](): string;
 }
 
 export namespace ObjectField {
diff --git a/src/new_fields/Proxy.ts b/src/new_fields/Proxy.ts
index fd99ae1c0..130ec066e 100644
--- a/src/new_fields/Proxy.ts
+++ b/src/new_fields/Proxy.ts
@@ -3,8 +3,9 @@ import { FieldWaiting } from "./Doc";
 import { primitive, serializable } from "serializr";
 import { observable, action } from "mobx";
 import { DocServer } from "../client/DocServer";
-import { RefField, Id } from "./RefField";
-import { ObjectField, Copy } from "./ObjectField";
+import { RefField } from "./RefField";
+import { ObjectField } from "./ObjectField";
+import { Id, Copy, ToScriptString } from "./FieldSymbols";
 
 @Deserializable("proxy")
 export class ProxyField<T extends RefField> extends ObjectField {
@@ -26,6 +27,10 @@ export class ProxyField<T extends RefField> extends ObjectField {
         return new ProxyField<T>(this.fieldId);
     }
 
+    [ToScriptString]() {
+        return "invalid";
+    }
+
     @serializable(primitive())
     readonly fieldId: string = "";
 
diff --git a/src/new_fields/RefField.ts b/src/new_fields/RefField.ts
index 202c65f21..75ce4287f 100644
--- a/src/new_fields/RefField.ts
+++ b/src/new_fields/RefField.ts
@@ -1,9 +1,8 @@
 import { serializable, primitive, alias } from "serializr";
 import { Utils } from "../Utils";
+import { Id, HandleUpdate, ToScriptString } from "./FieldSymbols";
 
 export type FieldId = string;
-export const HandleUpdate = Symbol("HandleUpdate");
-export const Id = Symbol("Id");
 export abstract class RefField {
     @serializable(alias("id", primitive()))
     private __id: FieldId;
@@ -15,4 +14,6 @@ export abstract class RefField {
     }
 
     protected [HandleUpdate]?(diff: any): void;
+
+    abstract [ToScriptString](): string;
 }
diff --git a/src/new_fields/RichTextField.ts b/src/new_fields/RichTextField.ts
index eb30e76de..89d077a47 100644
--- a/src/new_fields/RichTextField.ts
+++ b/src/new_fields/RichTextField.ts
@@ -1,6 +1,7 @@
-import { ObjectField, Copy } from "./ObjectField";
+import { ObjectField } from "./ObjectField";
 import { serializable } from "serializr";
 import { Deserializable } from "../client/util/SerializationHelper";
+import { Copy, ToScriptString } from "./FieldSymbols";
 
 @Deserializable("RichTextField")
 export class RichTextField extends ObjectField {
@@ -15,4 +16,8 @@ export class RichTextField extends ObjectField {
     [Copy]() {
         return new RichTextField(this.Data);
     }
+
+    [ToScriptString]() {
+        return "invalid";
+    }
 }
\ No newline at end of file
diff --git a/src/new_fields/URLField.ts b/src/new_fields/URLField.ts
index d00a95a16..a6f8f1cc5 100644
--- a/src/new_fields/URLField.ts
+++ b/src/new_fields/URLField.ts
@@ -1,6 +1,7 @@
 import { Deserializable } from "../client/util/SerializationHelper";
 import { serializable, custom } from "serializr";
-import { ObjectField, Copy } from "./ObjectField";
+import { ObjectField } from "./ObjectField";
+import { ToScriptString, Copy } from "./FieldSymbols";
 
 function url() {
     return custom(
@@ -13,7 +14,7 @@ function url() {
     );
 }
 
-export class URLField extends ObjectField {
+export abstract class URLField extends ObjectField {
     @serializable(url())
     readonly url: URL;
 
@@ -22,6 +23,10 @@ export class URLField extends ObjectField {
         this.url = url;
     }
 
+    [ToScriptString]() {
+        return `new ${this.constructor.name}(new URL(${this.url.href}))`;
+    }
+
     [Copy](): this {
         return new (this.constructor as any)(this.url);
     }
diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts
index d94994a07..65a37a0d1 100644
--- a/src/new_fields/util.ts
+++ b/src/new_fields/util.ts
@@ -1,11 +1,12 @@
 import { UndoManager } from "../client/util/UndoManager";
-import { Update, Doc, Field } from "./Doc";
+import { Doc, Field } from "./Doc";
 import { SerializationHelper } from "../client/util/SerializationHelper";
 import { ProxyField } from "./Proxy";
 import { FieldValue } from "./Types";
-import { RefField, Id } from "./RefField";
-import { ObjectField, Parent, OnUpdate } from "./ObjectField";
+import { RefField } from "./RefField";
+import { ObjectField } from "./ObjectField";
 import { action } from "mobx";
+import { Parent, OnUpdate, Update, Id } from "./FieldSymbols";
 
 export const setter = action(function (target: any, prop: string | symbol | number, value: any, receiver: any): boolean {
     if (SerializationHelper.IsSerializing()) {
-- 
cgit v1.2.3-70-g09d2


From 873e2b9381a12ad0b2e6303f6a308d5d47e1f14f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 20 May 2019 04:31:11 -0400
Subject: Added downsizing images

---
 package.json                       |  2 ++
 src/server/downsize.ts             | 40 ++++++++++++++++++++++++++++++++++++++
 src/server/index.ts                | 33 ++++++++++++++++++++++++++++---
 src/server/public/files/.gitignore |  3 ++-
 4 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 src/server/downsize.ts

(limited to 'src')

diff --git a/package.json b/package.json
index 147f59c25..0d0e6ff3e 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
         "@types/react-table": "^6.7.22",
         "@types/request": "^2.48.1",
         "@types/request-promise": "^4.1.42",
+        "@types/sharp": "^0.22.2",
         "@types/socket.io": "^2.1.2",
         "@types/socket.io-client": "^1.4.32",
         "@types/typescript": "^2.0.0",
@@ -165,6 +166,7 @@
         "request": "^2.88.0",
         "request-promise": "^4.2.4",
         "serializr": "^1.5.1",
+        "sharp": "^0.22.1",
         "socket.io": "^2.2.0",
         "socket.io-client": "^2.2.0",
         "solr-node": "^1.1.3",
diff --git a/src/server/downsize.ts b/src/server/downsize.ts
new file mode 100644
index 000000000..ed68fbecc
--- /dev/null
+++ b/src/server/downsize.ts
@@ -0,0 +1,40 @@
+import * as sharp from 'sharp';
+import * as fs from 'fs';
+
+const folder = "./src/server/public/files/";
+const pngTypes = ["png", "PNG"];
+const jpgTypes = ["jpg", "JPG", "jpeg", "JPEG"];
+const smallResizer = sharp().resize(100);
+fs.readdir(folder, async (err, files) => {
+    if (err) {
+        console.log(err);
+        return;
+    }
+    // files.forEach(file => {
+    //     if (file.includes("_s") || file.includes("_m") || file.includes("_l")) {
+    //         fs.unlink(folder + file, () => { });
+    //     }
+    // });
+    for (const file of files) {
+        const filesplit = file.split(".");
+        let resizers = [
+            { resizer: sharp().resize(100, undefined, { withoutEnlargement: true }), suffix: "_s" },
+            { resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: "_m" },
+            { resizer: sharp().resize(900, undefined, { withoutEnlargement: true }), suffix: "_l" },
+        ];
+        if (pngTypes.some(type => file.endsWith(type))) {
+            resizers.forEach(element => {
+                element.resizer = element.resizer.png();
+            });
+        } else if (jpgTypes.some(type => file.endsWith(type))) {
+            resizers.forEach(element => {
+                element.resizer = element.resizer.jpeg();
+            });
+        } else {
+            continue;
+        }
+        resizers.forEach(resizer => {
+            fs.createReadStream(folder + file).pipe(resizer.resizer).pipe(fs.createWriteStream(folder + filesplit[0] + resizer.suffix + "." + filesplit[1]));
+        });
+    }
+});
\ No newline at end of file
diff --git a/src/server/index.ts b/src/server/index.ts
index d19c65e0a..af99b116a 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -6,6 +6,7 @@ import * as session from 'express-session';
 import * as expressValidator from 'express-validator';
 import * as formidable from 'formidable';
 import * as fs from 'fs';
+import * as sharp from 'sharp';
 import * as mobileDetect from 'mobile-detect';
 import { ObservableMap } from 'mobx';
 import * as passport from 'passport';
@@ -166,13 +167,15 @@ addSecureRoute(
     RouteStore.getCurrUser
 );
 
+const pngTypes = [".png", ".PNG"];
+const jpgTypes = [".jpg", ".JPG", ".jpeg", ".JPEG"];
+const uploadDir = __dirname + "/public/files/";
 // SETTERS
-
 addSecureRoute(
     Method.POST,
     (user, res, req) => {
         let form = new formidable.IncomingForm();
-        form.uploadDir = __dirname + "/public/files/";
+        form.uploadDir = uploadDir;
         form.keepExtensions = true;
         // let path = req.body.path;
         console.log("upload");
@@ -180,7 +183,31 @@ addSecureRoute(
             console.log("parsing");
             let names: string[] = [];
             for (const name in files) {
-                names.push(`/files/` + path.basename(files[name].path));
+                const file = path.basename(files[name].path);
+                const ext = path.extname(file);
+                let resizers = [
+                    { resizer: sharp().resize(100, undefined, { withoutEnlargement: true }), suffix: "_s" },
+                    { resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: "_m" },
+                    { resizer: sharp().resize(900, undefined, { withoutEnlargement: true }), suffix: "_l" },
+                ];
+                let isImage = false;
+                if (pngTypes.includes(ext)) {
+                    resizers.forEach(element => {
+                        element.resizer = element.resizer.png();
+                    });
+                    isImage = true;
+                } else if (jpgTypes.includes(ext)) {
+                    resizers.forEach(element => {
+                        element.resizer = element.resizer.jpeg();
+                    });
+                    isImage = true;
+                }
+                if (isImage) {
+                    resizers.forEach(resizer => {
+                        fs.createReadStream(uploadDir + file).pipe(resizer.resizer).pipe(fs.createWriteStream(uploadDir + file.substring(0, file.length - ext.length) + resizer.suffix + ext));
+                    });
+                }
+                names.push(`/files/` + file);
             }
             res.send(names);
         });
diff --git a/src/server/public/files/.gitignore b/src/server/public/files/.gitignore
index f59ec20aa..c96a04f00 100644
--- a/src/server/public/files/.gitignore
+++ b/src/server/public/files/.gitignore
@@ -1 +1,2 @@
-*
\ No newline at end of file
+*
+!.gitignore
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From dedcb16fd7ae8211ca60bdf3630a0532525d3646 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 20 May 2019 04:36:53 -0400
Subject: Fixed deleting fields

---
 src/new_fields/util.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/new_fields/util.ts b/src/new_fields/util.ts
index 65a37a0d1..2b304c373 100644
--- a/src/new_fields/util.ts
+++ b/src/new_fields/util.ts
@@ -38,7 +38,11 @@ export const setter = action(function (target: any, prop: string | symbol | numb
         delete curValue[Parent];
         delete curValue[OnUpdate];
     }
-    target.__fields[prop] = value;
+    if (value === undefined) {
+        delete target.__fields[prop];
+    } else {
+        target.__fields[prop] = value;
+    }
     target[Update]({ '$set': { ["fields." + prop]: value instanceof ObjectField ? SerializationHelper.Serialize(value) : (value === undefined ? null : value) } });
     UndoManager.AddEvent({
         redo: () => receiver[prop] = value,
-- 
cgit v1.2.3-70-g09d2


From f62f4d92001e775b7248b7e786de733225e107b5 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 11:15:43 -0400
Subject: added switching to low res version based on display size. fixed
 marqueeing on full size images,  fixed bug with kvp pane and image sizing,

---
 src/client/views/MainView.tsx                      |  2 +-
 .../views/collections/CollectionDockingView.tsx    |  2 +-
 src/client/views/nodes/ImageBox.tsx                | 38 ++++++++++++++++++----
 3 files changed, 33 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 9edbba997..6169466bc 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -131,7 +131,7 @@ export class MainView extends React.Component {
     createNewWorkspace = async (id?: string) => {
         const list = Cast(CurrentUserUtils.UserDocument.data, listSpec(Doc));
         if (list) {
-            let freeformDoc = Docs.FreeformDocument([], { x: 0, y: 400, title: `WS collection ${list.length + 1}` });
+            let freeformDoc = Docs.FreeformDocument([], { x: 0, y: 400, width: this.pwidth * .7, height: this.pheight, title: `WS collection ${list.length + 1}` });
             var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(CurrentUserUtils.UserDocument, 150), CollectionDockingView.makeDocumentConfig(freeformDoc, 600)] }] };
             let mainDoc = Docs.DockDocument([CurrentUserUtils.UserDocument, freeformDoc], JSON.stringify(dockingLayout), { title: `Workspace ${list.length + 1}` }, id);
             list.push(mainDoc);
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index e904358a9..9721bf804 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -434,7 +434,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         if (this._mainCont.current && this._mainCont.current.children) {
             let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current.children[0].firstChild as HTMLElement);
             scale = Utils.GetScreenTransform(this._mainCont.current).scale;
-            return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(1 / scale);
+            return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(1 / this.contentScaling() / scale);
         }
         return Transform.Identity();
     }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 828ac9bc8..0a479cf41 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -17,6 +17,13 @@ import { ImageField } from '../../../new_fields/URLField';
 import { List } from '../../../new_fields/List';
 import { InkingControl } from '../InkingControl';
 import { Doc } from '../../../new_fields/Doc';
+import { faImage } from '@fortawesome/free-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+var path = require('path');
+
+library.add(faImage);
+
 
 export const pageSchema = createSchema({
     curPage: "number"
@@ -41,7 +48,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     onLoad = (target: any) => {
         var h = this._imgRef.current!.naturalHeight;
         var w = this._imgRef.current!.naturalWidth;
-        if (this._photoIndex === 0 && (this.props as any).id !== "isExpander") {
+        if (this._photoIndex === 0 && (this.props as any).id !== "isExpander" && (!this.Document.nativeHeight || !this.Document.nativeWidth)) {
             Doc.SetOnPrototype(this.Document, "nativeHeight", FieldValue(this.Document.nativeWidth, 0) * h / w);
             this.Document.height = FieldValue(this.Document.width, 0) * h / w;
         }
@@ -155,14 +162,30 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         );
     }
 
+    @observable _smallImageMissing = false;
     render() {
-        let field = this.Document[this.props.fieldKey];
-        let paths: string[] = ["http://www.cs.brown.edu/~bcz/face.gif"];
-        if (field instanceof ImageField) paths = [field.url.href];
-        else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => (p as ImageField).url.href);
-        let nativeWidth = FieldValue(this.Document.nativeWidth, (this.props.PanelWidth as any) as string ? Number((this.props.PanelWidth as any) as string) : 50);
-        let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
+        let transform = this.props.ScreenToLocalTransform().inverse();
+        let pw = Object.keys(this.props.PanelWidth).length === 0 ? this.props.PanelWidth() : (this.props.PanelWidth as any) as string ? Number((this.props.PanelWidth as any) as string) : 50;
+        var [sptX, sptY] = transform.transformPoint(0, 0);
+        let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
+        let w = bptX - sptX;
+
         let id = (this.props as any).id; // bcz: used to set id = "isExpander" in templates.tsx
+        let nativeWidth = FieldValue(this.Document.nativeWidth, pw);
+        let paths: string[] = ["http://www.cs.brown.edu/~bcz/noImage.png"];
+        if (w > 20) {
+            if (w < 100 && !this._smallImageMissing) {
+                let field = this.Document[this.props.fieldKey];
+                if (field instanceof ImageField) paths = [field.url.href.replace(path.extname(field.url.href), "_s" + path.extname(field.url.href))];
+                else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p =>
+                    (p as ImageField).url.href.replace(path.extname((p as ImageField).url.href), "_s" + path.extname((p as ImageField).url.href)));
+            } else {
+                let field = this.Document[this.props.fieldKey];
+                if (field instanceof ImageField) paths = [field.url.href];
+                else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => (p as ImageField).url.href);
+            }
+        }
+        let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
         return (
             <div id={id} className={`imageBox-cont${interactive}`}
                 // onPointerDown={this.onPointerDown}
@@ -171,6 +194,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
                     style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }}
                     width={nativeWidth}
                     ref={this._imgRef}
+                    onError={action(() => this._smallImageMissing = true)}
                     onLoad={this.onLoad} />
                 {paths.length > 1 ? this.dots(paths) : (null)}
                 {this.lightbox(paths)}
-- 
cgit v1.2.3-70-g09d2


From baa57bae05df83c37e4573b7afb92948fc6e910b Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 11:24:54 -0400
Subject: using all image sizes now.

---
 src/client/views/nodes/ImageBox.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 0a479cf41..b4aae3646 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -163,6 +163,9 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     }
 
     @observable _smallImageMissing = false;
+    @observable _mediumImageMissing = false;
+    @observable _largeImageMissing = false;
+    _curImageSize = "";
     render() {
         let transform = this.props.ScreenToLocalTransform().inverse();
         let pw = Object.keys(this.props.PanelWidth).length === 0 ? this.props.PanelWidth() : (this.props.PanelWidth as any) as string ? Number((this.props.PanelWidth as any) as string) : 50;
@@ -175,14 +178,23 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         let paths: string[] = ["http://www.cs.brown.edu/~bcz/noImage.png"];
         if (w > 20) {
             if (w < 100 && !this._smallImageMissing) {
+                this._curImageSize = "small";
                 let field = this.Document[this.props.fieldKey];
                 if (field instanceof ImageField) paths = [field.url.href.replace(path.extname(field.url.href), "_s" + path.extname(field.url.href))];
                 else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p =>
                     (p as ImageField).url.href.replace(path.extname((p as ImageField).url.href), "_s" + path.extname((p as ImageField).url.href)));
-            } else {
+            } else if (w < 600 && !this._mediumImageMissing) {
+                this._curImageSize = "medium";
                 let field = this.Document[this.props.fieldKey];
-                if (field instanceof ImageField) paths = [field.url.href];
-                else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => (p as ImageField).url.href);
+                if (field instanceof ImageField) paths = [field.url.href.replace(path.extname(field.url.href), "_m" + path.extname(field.url.href))];
+                else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p =>
+                    (p as ImageField).url.href.replace(path.extname((p as ImageField).url.href), "_m" + path.extname((p as ImageField).url.href)));
+            } else if (!this._largeImageMissing) {
+                this._curImageSize = "large";
+                let field = this.Document[this.props.fieldKey];
+                if (field instanceof ImageField) paths = [field.url.href.replace(path.extname(field.url.href), "_l" + path.extname(field.url.href))];
+                else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p =>
+                    (p as ImageField).url.href.replace(path.extname((p as ImageField).url.href), "_l" + path.extname((p as ImageField).url.href)));
             }
         }
         let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
@@ -194,7 +206,11 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
                     style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }}
                     width={nativeWidth}
                     ref={this._imgRef}
-                    onError={action(() => this._smallImageMissing = true)}
+                    onError={action(() => {
+                        if (this._curImageSize === "small") this._smallImageMissing = true;
+                        if (this._curImageSize === "medium") this._mediumImageMissing = true;
+                        if (this._curImageSize === "large") this._largeImageMissing = true;
+                    })}
                     onLoad={this.onLoad} />
                 {paths.length > 1 ? this.dots(paths) : (null)}
                 {this.lightbox(paths)}
-- 
cgit v1.2.3-70-g09d2


From e5d71fc1362c77f076c10187625c74fe294669aa Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 12:20:57 -0400
Subject: fixes to caching.  lower quality Summary images.

---
 .../collections/collectionFreeForm/MarqueeView.tsx |  2 +-
 src/client/views/nodes/ImageBox.tsx                | 57 +++++++++++-----------
 2 files changed, 30 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 2029b91e5..6ea230aab 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -257,7 +257,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
             if (e.key === "s" || e.key === "p") {
 
-                htmlToImage.toPng(this._mainCont.current!, { width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, quality: 1 }).then((dataUrl) => {
+                htmlToImage.toPng(this._mainCont.current!, { width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, quality: 0.2 }).then((dataUrl) => {
                     selected.map(d => {
                         this.props.removeDocument(d);
                         d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index b4aae3646..29a99e53c 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -162,13 +162,25 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         );
     }
 
-    @observable _smallImageMissing = false;
-    @observable _mediumImageMissing = false;
-    @observable _largeImageMissing = false;
-    _curImageSize = "";
+    choosePath(url: URL) {
+        if (url.protocol === "data")
+            return url.href;
+        let ext = path.extname(url.href);
+        return url.href.replace(ext, this._curSuffix + ext);
+    }
+
+    @observable _smallRetryCount = 1;
+    @observable _mediumRetryCount = 1;
+    @observable _largeRetryCount = 1;
+    @action retryPath = () => {
+        if (this._curSuffix === "_s") this._smallRetryCount++;
+        if (this._curSuffix === "_m") this._mediumRetryCount++;
+        if (this._curSuffix === "_l") this._largeRetryCount++;
+    }
+    _curSuffix = "";
     render() {
         let transform = this.props.ScreenToLocalTransform().inverse();
-        let pw = Object.keys(this.props.PanelWidth).length === 0 ? this.props.PanelWidth() : (this.props.PanelWidth as any) as string ? Number((this.props.PanelWidth as any) as string) : 50;
+        let pw = typeof this.props.PanelWidth === "function" ? this.props.PanelWidth() : typeof this.props.PanelWidth === "number" ? (this.props.PanelWidth as any) as number : 50;
         var [sptX, sptY] = transform.transformPoint(0, 0);
         let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
         let w = bptX - sptX;
@@ -176,40 +188,29 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         let id = (this.props as any).id; // bcz: used to set id = "isExpander" in templates.tsx
         let nativeWidth = FieldValue(this.Document.nativeWidth, pw);
         let paths: string[] = ["http://www.cs.brown.edu/~bcz/noImage.png"];
+        this._curSuffix = "";
         if (w > 20) {
-            if (w < 100 && !this._smallImageMissing) {
-                this._curImageSize = "small";
-                let field = this.Document[this.props.fieldKey];
-                if (field instanceof ImageField) paths = [field.url.href.replace(path.extname(field.url.href), "_s" + path.extname(field.url.href))];
-                else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p =>
-                    (p as ImageField).url.href.replace(path.extname((p as ImageField).url.href), "_s" + path.extname((p as ImageField).url.href)));
-            } else if (w < 600 && !this._mediumImageMissing) {
-                this._curImageSize = "medium";
-                let field = this.Document[this.props.fieldKey];
-                if (field instanceof ImageField) paths = [field.url.href.replace(path.extname(field.url.href), "_m" + path.extname(field.url.href))];
-                else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p =>
-                    (p as ImageField).url.href.replace(path.extname((p as ImageField).url.href), "_m" + path.extname((p as ImageField).url.href)));
-            } else if (!this._largeImageMissing) {
-                this._curImageSize = "large";
-                let field = this.Document[this.props.fieldKey];
-                if (field instanceof ImageField) paths = [field.url.href.replace(path.extname(field.url.href), "_l" + path.extname(field.url.href))];
-                else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p =>
-                    (p as ImageField).url.href.replace(path.extname((p as ImageField).url.href), "_l" + path.extname((p as ImageField).url.href)));
-            }
+            let field = this.Document[this.props.fieldKey];
+            if (w < 100) this._curSuffix = "_s";
+            else if (w < 600) this._curSuffix = "_m";
+            else this._curSuffix = "_l";
+            if (field instanceof ImageField) paths = [this.choosePath(field.url)];
+            else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => this.choosePath((p as ImageField).url));
         }
         let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
         return (
             <div id={id} className={`imageBox-cont${interactive}`}
                 // onPointerDown={this.onPointerDown}
                 onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
-                <img id={id} src={paths[Math.min(paths.length, this._photoIndex)]}
+                <img id={id}
+                    key={this._smallRetryCount + (this._mediumRetryCount << 4) + (this._largeRetryCount << 8)} // force cache to update on retrys
+                    src={paths[Math.min(paths.length, this._photoIndex)]}
                     style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }}
                     width={nativeWidth}
                     ref={this._imgRef}
                     onError={action(() => {
-                        if (this._curImageSize === "small") this._smallImageMissing = true;
-                        if (this._curImageSize === "medium") this._mediumImageMissing = true;
-                        if (this._curImageSize === "large") this._largeImageMissing = true;
+                        let timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount;
+                        setTimeout(this.retryPath, Math.min(10000, timeout * 5));
                     })}
                     onLoad={this.onLoad} />
                 {paths.length > 1 ? this.dots(paths) : (null)}
-- 
cgit v1.2.3-70-g09d2


From 850ac067fb4e62f91a6eee8df40fe95eca3a3326 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 13:15:16 -0400
Subject: changed so that cat image works.

---
 src/client/views/nodes/ImageBox.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 29a99e53c..1bd1b80a7 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -177,6 +177,11 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         if (this._curSuffix === "_m") this._mediumRetryCount++;
         if (this._curSuffix === "_l") this._largeRetryCount++;
     }
+    @action onError = () => {
+        let timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount;
+        if (timeout < 10)
+            setTimeout(this.retryPath, Math.min(10000, timeout * 5));
+    }
     _curSuffix = "";
     render() {
         let transform = this.props.ScreenToLocalTransform().inverse();
@@ -191,9 +196,9 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         this._curSuffix = "";
         if (w > 20) {
             let field = this.Document[this.props.fieldKey];
-            if (w < 100) this._curSuffix = "_s";
-            else if (w < 600) this._curSuffix = "_m";
-            else this._curSuffix = "_l";
+            if (w < 100 && this._smallRetryCount < 10) this._curSuffix = "_s";
+            else if (w < 600 && this._mediumRetryCount < 10) this._curSuffix = "_m";
+            else if (this._largeRetryCount < 10) this._curSuffix = "_l";
             if (field instanceof ImageField) paths = [this.choosePath(field.url)];
             else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => this.choosePath((p as ImageField).url));
         }
@@ -205,16 +210,13 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
                 <img id={id}
                     key={this._smallRetryCount + (this._mediumRetryCount << 4) + (this._largeRetryCount << 8)} // force cache to update on retrys
                     src={paths[Math.min(paths.length, this._photoIndex)]}
-                    style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }}
+                    // style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }}
                     width={nativeWidth}
                     ref={this._imgRef}
-                    onError={action(() => {
-                        let timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount;
-                        setTimeout(this.retryPath, Math.min(10000, timeout * 5));
-                    })}
+                    onError={this.onError}
                     onLoad={this.onLoad} />
                 {paths.length > 1 ? this.dots(paths) : (null)}
-                {this.lightbox(paths)}
+                {/* {this.lightbox(paths)} */}
             </div>);
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 9c8cd369019f1da21c75c07abecdbe3cf5da4cfe Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 13:25:06 -0400
Subject: only apply suffixes to urls that are on our server...

---
 src/client/views/nodes/ImageBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 1bd1b80a7..a2291c7cf 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -163,7 +163,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     }
 
     choosePath(url: URL) {
-        if (url.protocol === "data")
+        if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1)
             return url.href;
         let ext = path.extname(url.href);
         return url.href.replace(ext, this._curSuffix + ext);
-- 
cgit v1.2.3-70-g09d2


From e32ccd138ff70f2225e5c2c13e0003e02593ef09 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 14:14:19 -0400
Subject: minimal change to brushing presentation view.

---
 src/client/views/PresentationView.tsx                      | 14 ++++++++++++--
 .../views/collections/collectionFreeForm/MarqueeView.tsx   |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/PresentationView.tsx b/src/client/views/PresentationView.tsx
index ce679aa0a..9d5798ff1 100644
--- a/src/client/views/PresentationView.tsx
+++ b/src/client/views/PresentationView.tsx
@@ -6,7 +6,7 @@ import { DocumentManager } from "../util/DocumentManager";
 import { Utils } from "../../Utils";
 import { Doc, DocListCast, DocListCastAsync } from "../../new_fields/Doc";
 import { listSpec } from "../../new_fields/Schema";
-import { Cast, NumCast, FieldValue, PromiseValue, StrCast } from "../../new_fields/Types";
+import { Cast, NumCast, FieldValue, PromiseValue, StrCast, BoolCast } from "../../new_fields/Types";
 import { Id } from "../../new_fields/FieldSymbols";
 import { List } from "../../new_fields/List";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
@@ -27,6 +27,7 @@ interface PresListProps extends PresViewProps {
  */
 class PresentationViewList extends React.Component<PresListProps> {
 
+
     /**
      * Renders a single child document. It will just append a list element.
      * @param document The document to render.
@@ -42,8 +43,17 @@ class PresentationViewList extends React.Component<PresListProps> {
             //this doc is selected
             className += " presentationView-selected";
         }
+        let onEnter = (e: React.PointerEvent) => { document.libraryBrush = true; }
+        let onLeave = (e: React.PointerEvent) => { document.libraryBrush = false; }
         return (
-            <div className={className} key={document[Id] + index} onClick={e => { this.props.gotoDocument(index); e.stopPropagation(); }}>
+            <div className={className} key={document[Id] + index}
+                onPointerEnter={onEnter} onPointerLeave={onLeave}
+                style={{
+                    outlineColor: "maroon",
+                    outlineStyle: "dashed",
+                    outlineWidth: BoolCast(document.libraryBrush, false) || BoolCast(document.protoBrush, false) ? `1px` : "0px",
+                }}
+                onClick={e => { this.props.gotoDocument(index); e.stopPropagation(); }}>
                 <strong className="presentationView-name">
                     {`${index + 1}. ${title}`}
                 </strong>
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 6ea230aab..97e610e13 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -135,7 +135,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             document.addEventListener("pointerup", this.onPointerUp, true);
             document.addEventListener("keydown", this.marqueeCommand, true);
             if (e.altKey) {
-                e.stopPropagation();
+                //e.stopPropagation(); // bcz: removed so that you can alt-click on button in a collection to switch link following behaviors.
                 e.preventDefault();
             }
             // bcz: do we need this?   it kills the context menu on the main collection if !altKey
-- 
cgit v1.2.3-70-g09d2


From 99bbb42cfa5718f543213f7a64463bd31c73d781 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 20 May 2019 14:36:43 -0400
Subject: Added route to save data uri as image

---
 package.json             |  1 +
 src/server/RouteStore.ts |  1 +
 src/server/index.ts      | 40 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 42 insertions(+)

(limited to 'src')

diff --git a/package.json b/package.json
index 0d0e6ff3e..40402b44c 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,7 @@
         "golden-layout": "^1.5.9",
         "html-to-image": "^0.1.0",
         "i": "^0.3.6",
+        "image-data-uri": "^2.0.0",
         "jsonwebtoken": "^8.5.0",
         "jsx-to-string": "^1.4.0",
         "lodash": "^4.17.11",
diff --git a/src/server/RouteStore.ts b/src/server/RouteStore.ts
index fdf5b6a5c..c4af5cdaa 100644
--- a/src/server/RouteStore.ts
+++ b/src/server/RouteStore.ts
@@ -11,6 +11,7 @@ export enum RouteStore {
     // UPLOAD AND STATIC FILE SERVING
     public = "/public",
     upload = "/upload",
+    dataUriToImage = "/uploadURI",
     images = "/images",
 
     // USER AND WORKSPACES
diff --git a/src/server/index.ts b/src/server/index.ts
index af99b116a..a12751fe3 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -7,6 +7,7 @@ import * as expressValidator from 'express-validator';
 import * as formidable from 'formidable';
 import * as fs from 'fs';
 import * as sharp from 'sharp';
+const imageDataUri = require('image-data-uri');
 import * as mobileDetect from 'mobile-detect';
 import { ObservableMap } from 'mobx';
 import * as passport from 'passport';
@@ -216,6 +217,45 @@ addSecureRoute(
     RouteStore.upload
 );
 
+addSecureRoute(
+    Method.POST,
+    (user, res, req) => {
+        const uri = req.query.uri;
+        const filename = req.query.name;
+        if (!uri || !filename) {
+            res.status(400).send("incorrect parameters specified");
+            return;
+        }
+        imageDataUri.outputFile(uri, uploadDir + filename).then((savedName: string) => {
+            const ext = path.extname(savedName);
+            let resizers = [
+                { resizer: sharp().resize(100, undefined, { withoutEnlargement: true }), suffix: "_s" },
+                { resizer: sharp().resize(400, undefined, { withoutEnlargement: true }), suffix: "_m" },
+                { resizer: sharp().resize(900, undefined, { withoutEnlargement: true }), suffix: "_l" },
+            ];
+            let isImage = false;
+            if (pngTypes.includes(ext)) {
+                resizers.forEach(element => {
+                    element.resizer = element.resizer.png();
+                });
+                isImage = true;
+            } else if (jpgTypes.includes(ext)) {
+                resizers.forEach(element => {
+                    element.resizer = element.resizer.jpeg();
+                });
+                isImage = true;
+            }
+            if (isImage) {
+                resizers.forEach(resizer => {
+                    fs.createReadStream(savedName).pipe(resizer.resizer).pipe(fs.createWriteStream(uploadDir + filename + resizer.suffix + ext));
+                });
+            }
+            res.send("/files/" + filename + ext);
+        });
+    },
+    undefined,
+    RouteStore.dataUriToImage
+);
 // AUTHENTICATION
 
 // Sign Up
-- 
cgit v1.2.3-70-g09d2


From e02e8bee7ee36490b83edb0a416978216b0f4a17 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 15:46:21 -0400
Subject: hooking up image data url stuff.

---
 src/client/views/SearchBox.tsx    | 17 +++++++++++++++++
 src/client/views/nodes/PDFBox.tsx | 10 +++++++---
 src/server/index.ts               |  8 +++++---
 3 files changed, 29 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 8efd8d266..0ec1a6758 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -20,6 +20,7 @@ import { Id } from '../../new_fields/FieldSymbols';
 import { DocumentManager } from '../util/DocumentManager';
 import { SetupDrag } from '../util/DragManager';
 import { Docs } from '../documents/Documents';
+import { RouteStore } from '../../server/RouteStore';
 
 library.add(faSearch);
 library.add(faObjectGroup);
@@ -70,6 +71,22 @@ export class SearchBox extends React.Component {
         }
         return docs;
     }
+    public static async convertDataUri(imageUri: string, returnedFilename: string) {
+        try {
+            let posting = DocServer.prepend(RouteStore.dataUriToImage);
+            const returnedUri = await rp.post(posting, {
+                body: {
+                    uri: imageUri,
+                    name: returnedFilename
+                },
+                json: true,
+            });
+            return returnedUri;
+
+        } catch (e) {
+            console.log(e);
+        }
+    }
 
     @action
     handleClickFilter = (e: Event): void => {
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index e71ac4924..1017f5235 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -21,6 +21,8 @@ import { positionSchema } from "./DocumentView";
 import { pageSchema } from "./ImageBox";
 import { ImageField, PdfField } from "../../../new_fields/URLField";
 import { InkingControl } from "../InkingControl";
+import { SearchBox } from "../SearchBox";
+import { Id } from "../../../new_fields/FieldSymbols";
 
 /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
  * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
@@ -250,9 +252,11 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
             let nheight = FieldValue(this.Document.nativeHeight, 0);
             htmlToImage.toPng(this._mainDiv.current!, { width: nwidth, height: nheight, quality: 1 })
                 .then(action((dataUrl: string) => {
-                    this.props.Document.thumbnail = new ImageField(new URL(dataUrl));
-                    this.props.Document.thumbnailPage = FieldValue(this.Document.curPage, -1);
-                    this._renderAsSvg = true;
+                    SearchBox.convertDataUri(dataUrl, this.Document[Id] + "_" + this.curPage).then((returnedFilename) => {
+                        this.props.Document.thumbnail = new ImageField(new URL(dataUrl));
+                        this.props.Document.thumbnailPage = FieldValue(this.Document.curPage, -1);
+                        this._renderAsSvg = true;
+                    })
                 }))
                 .catch(function (error: any) {
                     console.error('oops, something went wrong!', error);
diff --git a/src/server/index.ts b/src/server/index.ts
index a12751fe3..6843afbe4 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -114,6 +114,8 @@ function addSecureRoute(method: Method,
 app.use(express.static(__dirname + RouteStore.public));
 app.use(RouteStore.images, express.static(__dirname + RouteStore.public));
 
+app.use(express.json());
+
 app.get("/pull", (req, res) =>
     exec('"C:\\Program Files\\Git\\git-bash.exe" -c "git pull"', (err, stdout, stderr) => {
         if (err) {
@@ -220,10 +222,10 @@ addSecureRoute(
 addSecureRoute(
     Method.POST,
     (user, res, req) => {
-        const uri = req.query.uri;
-        const filename = req.query.name;
+        const uri = req.body.uri;
+        const filename = req.body.name;
         if (!uri || !filename) {
-            res.status(400).send("incorrect parameters specified");
+            res.status(401).send("incorrect parameters specified");
             return;
         }
         imageDataUri.outputFile(uri, uploadDir + filename).then((savedName: string) => {
-- 
cgit v1.2.3-70-g09d2


From ba57c927bbb7b7ba80e65e8ada9520533f1270b6 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 20 May 2019 15:49:57 -0400
Subject: uncommented search thing

---
 src/server/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/server/index.ts b/src/server/index.ts
index a12751fe3..0952e20aa 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -429,8 +429,8 @@ function UpdateField(socket: Socket, diff: Diff) {
         Object.values(suffixMap).forEach(suf => update[key + getSuffix(suf)] = { set: null });
         let term = ToSearchTerm(val);
         if (term !== undefined) {
-            // let { suffix, value } = term;
-            // update[key + suffix] = { set: value };
+            let { suffix, value } = term;
+            update[key + suffix] = { set: value };
         }
     }
     if (dynfield) {
-- 
cgit v1.2.3-70-g09d2


From fe3a7e6fbdcb10d764813d551ae052fa837f76ff Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 20 May 2019 15:56:20 -0400
Subject: Fixed pdf uploader

---
 src/server/index.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/server/index.ts b/src/server/index.ts
index 5cdd62726..574241f62 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -60,7 +60,7 @@ app.use(session({
 
 app.use(flash());
 app.use(expressFlash());
-app.use(bodyParser.json());
+app.use(bodyParser.json({ limit: "10mb" }));
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(expressValidator());
 app.use(passport.initialize());
@@ -114,8 +114,6 @@ function addSecureRoute(method: Method,
 app.use(express.static(__dirname + RouteStore.public));
 app.use(RouteStore.images, express.static(__dirname + RouteStore.public));
 
-app.use(express.json());
-
 app.get("/pull", (req, res) =>
     exec('"C:\\Program Files\\Git\\git-bash.exe" -c "git pull"', (err, stdout, stderr) => {
         if (err) {
-- 
cgit v1.2.3-70-g09d2


From 7cde8383e45ccf8293ec9cba2beddc64bceda2aa Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 20 May 2019 17:08:40 -0400
Subject: Added update search script Added debug current file launch config
 Made database not ignore requests before it is initialized.

---
 .vscode/launch.json        |  24 +++++----
 package.json               |   1 +
 src/server/database.ts     | 124 +++++++++++++++++++++++++++++----------------
 src/server/updateSearch.ts | 101 ++++++++++++++++++++++++++++++++++++
 4 files changed, 196 insertions(+), 54 deletions(-)
 create mode 100644 src/server/updateSearch.ts

(limited to 'src')

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 452acc823..d245be2ad 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -31,6 +31,20 @@
             "localRoot": "${workspaceFolder}",
             "remoteRoot": "."
         },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Current TS File",
+            "runtimeExecutable": "npx",
+            "runtimeArgs": [
+                "ts-node-dev",
+                "--nolazy",
+                "--inspect",
+                "--",
+                "${relativeFile}"
+            ],
+            "port": 9229
+        },
         {
             "type": "node",
             "request": "launch",
@@ -65,15 +79,5 @@
             "internalConsoleOptions": "openOnSessionStart",
             "protocol": "inspector"
         },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Launch via NPM",
-            "runtimeExecutable": "npm",
-            "runtimeArgs": [
-                "start"
-            ],
-            "port": 9229
-        }
     ]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 40402b44c..790535728 100644
--- a/package.json
+++ b/package.json
@@ -133,6 +133,7 @@
         "nodemon": "^1.18.10",
         "normalize.css": "^8.0.1",
         "npm": "^6.9.0",
+        "p-limit": "^2.2.0",
         "passport": "^0.4.0",
         "passport-local": "^1.0.0",
         "prosemirror-commands": "^1.0.7",
diff --git a/src/server/database.ts b/src/server/database.ts
index 69005d2d3..70b3efced 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -8,9 +8,13 @@ export class Database {
     private url = 'mongodb://localhost:27017/Dash';
     private currentWrites: { [id: string]: Promise<void> } = {};
     private db?: mongodb.Db;
+    private onConnect: (() => void)[] = [];
 
     constructor() {
-        this.MongoClient.connect(this.url, (err, client) => this.db = client.db());
+        this.MongoClient.connect(this.url, (err, client) => {
+            this.db = client.db();
+            this.onConnect.forEach(fn => fn());
+        });
     }
 
     public update(id: string, value: any, callback: () => void, upsert = true, collectionName = Database.DocumentsCollection) {
@@ -32,66 +36,98 @@ export class Database {
             };
             newProm = prom ? prom.then(run) : run();
             this.currentWrites[id] = newProm;
+        } else {
+            this.onConnect.push(() => this.update(id, value, callback, upsert, collectionName));
         }
     }
 
     public delete(id: string, collectionName = Database.DocumentsCollection) {
-        this.db && this.db.collection(collectionName).remove({ id: id });
+        if (this.db) {
+            this.db.collection(collectionName).remove({ id: id });
+        } else {
+            this.onConnect.push(() => this.delete(id, collectionName));
+        }
     }
 
     public deleteAll(collectionName = Database.DocumentsCollection): Promise<any> {
-        return new Promise(res =>
-            this.db && this.db.collection(collectionName).deleteMany({}, res));
+        return new Promise(res => {
+            if (this.db) {
+                this.db.collection(collectionName).deleteMany({}, res);
+            } else {
+                this.onConnect.push(() => this.db && this.db.collection(collectionName).deleteMany({}, res));
+            }
+        });
     }
 
     public insert(value: any, collectionName = Database.DocumentsCollection) {
-        if (!this.db) { return; }
-        if ("id" in value) {
-            value._id = value.id;
-            delete value.id;
-        }
-        const id = value._id;
-        const collection = this.db.collection(collectionName);
-        const prom = this.currentWrites[id];
-        let newProm: Promise<void>;
-        const run = (): Promise<void> => {
-            return new Promise<void>(resolve => {
-                collection.insertOne(value, (err, res) => {
-                    if (this.currentWrites[id] === newProm) {
-                        delete this.currentWrites[id];
-                    }
-                    resolve();
+        if (this.db) {
+            if ("id" in value) {
+                value._id = value.id;
+                delete value.id;
+            }
+            const id = value._id;
+            const collection = this.db.collection(collectionName);
+            const prom = this.currentWrites[id];
+            let newProm: Promise<void>;
+            const run = (): Promise<void> => {
+                return new Promise<void>(resolve => {
+                    collection.insertOne(value, (err, res) => {
+                        if (this.currentWrites[id] === newProm) {
+                            delete this.currentWrites[id];
+                        }
+                        resolve();
+                    });
                 });
-            });
-        };
-        newProm = prom ? prom.then(run) : run();
-        this.currentWrites[id] = newProm;
+            };
+            newProm = prom ? prom.then(run) : run();
+            this.currentWrites[id] = newProm;
+        } else {
+            this.onConnect.push(() => this.insert(value, collectionName));
+        }
     }
 
     public getDocument(id: string, fn: (result?: Transferable) => void, collectionName = Database.DocumentsCollection) {
-        this.db && this.db.collection(collectionName).findOne({ _id: id }, (err, result) => {
-            if (result) {
-                result.id = result._id;
-                delete result._id;
-                fn(result);
-            } else {
-                fn(undefined);
-            }
-        });
+        if (this.db) {
+            this.db.collection(collectionName).findOne({ _id: id }, (err, result) => {
+                if (result) {
+                    result.id = result._id;
+                    delete result._id;
+                    fn(result);
+                } else {
+                    fn(undefined);
+                }
+            });
+        } else {
+            this.onConnect.push(() => this.getDocument(id, fn, collectionName));
+        }
     }
 
     public getDocuments(ids: string[], fn: (result: Transferable[]) => void, collectionName = Database.DocumentsCollection) {
-        this.db && this.db.collection(collectionName).find({ _id: { "$in": ids } }).toArray((err, docs) => {
-            if (err) {
-                console.log(err.message);
-                console.log(err.errmsg);
-            }
-            fn(docs.map(doc => {
-                doc.id = doc._id;
-                delete doc._id;
-                return doc;
-            }));
-        });
+        if (this.db) {
+            this.db.collection(collectionName).find({ _id: { "$in": ids } }).toArray((err, docs) => {
+                if (err) {
+                    console.log(err.message);
+                    console.log(err.errmsg);
+                }
+                fn(docs.map(doc => {
+                    doc.id = doc._id;
+                    delete doc._id;
+                    return doc;
+                }));
+            });
+        } else {
+            this.onConnect.push(() => this.getDocuments(ids, fn, collectionName));
+        }
+    }
+
+    public query(query: any): Promise<mongodb.Cursor> {
+        if (this.db) {
+            return Promise.resolve<mongodb.Cursor>(this.db.collection('newDocuments').find(query));
+        } else {
+            return new Promise<mongodb.Cursor>(res => {
+                this.onConnect.push(() => res(this.query(query)));
+            });
+        }
     }
 
     public print() {
diff --git a/src/server/updateSearch.ts b/src/server/updateSearch.ts
new file mode 100644
index 000000000..da33e3747
--- /dev/null
+++ b/src/server/updateSearch.ts
@@ -0,0 +1,101 @@
+import { Database } from "./database";
+import { Cursor } from "mongodb";
+import { Search } from "./Search";
+import pLimit from 'p-limit';
+
+const suffixMap: { [type: string]: (string | [string, string | ((json: any) => any)]) } = {
+    "number": "_n",
+    "string": "_t",
+    // "boolean": "_b",
+    "image": ["_t", "url"],
+    "video": ["_t", "url"],
+    "pdf": ["_t", "url"],
+    "audio": ["_t", "url"],
+    "web": ["_t", "url"],
+    "date": ["_d", value => new Date(value.date).toISOString()],
+    "proxy": ["_i", "fieldId"],
+    "list": ["_l", list => {
+        const results = [];
+        for (const value of list.fields) {
+            const term = ToSearchTerm(value);
+            if (term) {
+                results.push(term.value);
+            }
+        }
+        return results.length ? results : null;
+    }]
+};
+
+function ToSearchTerm(val: any): { suffix: string, value: any } | undefined {
+    if (val === null || val === undefined) {
+        return;
+    }
+    const type = val.__type || typeof val;
+    let suffix = suffixMap[type];
+    if (!suffix) {
+        return;
+    }
+
+    if (Array.isArray(suffix)) {
+        const accessor = suffix[1];
+        if (typeof accessor === "function") {
+            val = accessor(val);
+        } else {
+            val = val[accessor];
+        }
+        suffix = suffix[0];
+    }
+
+    return { suffix, value: val };
+}
+
+function getSuffix(value: string | [string, any]): string {
+    return typeof value === "string" ? value : value[0];
+}
+
+const limit = pLimit(5);
+async function update() {
+    // await new Promise(res => setTimeout(res, 5));
+    console.log("update");
+    await Search.Instance.clear();
+    const cursor = await Database.Instance.query({});
+    console.log("Cleared");
+    const updates: any[] = [];
+    let numDocs = 0;
+    function updateDoc(doc: any) {
+        numDocs++;
+        if ((numDocs % 50) === 0) {
+            console.log("updateDoc " + numDocs);
+        }
+        console.log("doc " + numDocs);
+        if (doc.__type !== "Doc") {
+            return;
+        }
+        const fields = doc.fields;
+        if (!fields) {
+            return;
+        }
+        const update: any = { id: doc._id };
+        let dynfield = false;
+        for (const key in fields) {
+            const value = fields[key];
+            const term = ToSearchTerm(value);
+            if (term !== undefined) {
+                let { suffix, value } = term;
+                update[key + suffix] = value;
+                dynfield = true;
+            }
+        }
+        if (dynfield) {
+            updates.push(update);
+            console.log(updates.length);
+        }
+    }
+    await cursor.forEach(updateDoc);
+    await Promise.all(updates.map(update => {
+        return limit(() => Search.Instance.updateDocument(update));
+    }));
+    cursor.close();
+}
+
+update();
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 059faf25a0f8ba80e1d2853dcefa1a70df4cbb6a Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 17:10:21 -0400
Subject: fixed icons for pdfs.  fixed activeItem issue for golden layout.

---
 src/client/goldenLayout.js                         |  2 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  1 +
 src/client/views/nodes/PDFBox.tsx                  | 58 +++++++++++-----------
 3 files changed, 31 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js
index ab2bcefed..54c9c6068 100644
--- a/src/client/goldenLayout.js
+++ b/src/client/goldenLayout.js
@@ -4466,7 +4466,7 @@
             }
 
             if (this.contentItems.length > 0) {
-                initialItem = this.contentItems[this.config.activeItemIndex || 0];
+                initialItem = this.contentItems[Math.min(this.contentItems.length - 1, this.config.activeItemIndex || 0)];
 
                 if (!initialItem) {
                     throw new Error('Configured activeItemIndex out of bounds');
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 5bff08280..fa2b09ba7 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -189,6 +189,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         if (this._doubleTap) {
             this.props.addDocTab(this.props.Document, "inTab");
             SelectionManager.DeselectAll();
+            this.props.Document.libraryBrush = false;
         }
         let altKey = e.altKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 1017f5235..d1b9098b0 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -1,28 +1,27 @@
 import * as htmlToImage from "html-to-image";
-import { action, computed, IReactionDisposer, observable, reaction, Reaction, trace, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
 import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css';
 import Measure from "react-measure";
 //@ts-ignore
 import { Document, Page } from "react-pdf";
 import 'react-pdf/dist/Page/AnnotationLayer.css';
+import { Id } from "../../../new_fields/FieldSymbols";
+import { makeInterface } from "../../../new_fields/Schema";
+import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
+import { ImageField, PdfField } from "../../../new_fields/URLField";
 import { RouteStore } from "../../../server/RouteStore";
 import { Utils } from '../../../Utils';
+import { DocServer } from "../../DocServer";
+import { DocComponent } from "../DocComponent";
+import { InkingControl } from "../InkingControl";
+import { SearchBox } from "../SearchBox";
 import { Annotation } from './Annotation';
+import { positionSchema } from "./DocumentView";
 import { FieldView, FieldViewProps } from './FieldView';
+import { pageSchema } from "./ImageBox";
 import "./PDFBox.scss";
 import React = require("react");
-import { SelectionManager } from "../../util/SelectionManager";
-import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
-import { Opt } from "../../../new_fields/Doc";
-import { DocComponent } from "../DocComponent";
-import { makeInterface } from "../../../new_fields/Schema";
-import { positionSchema } from "./DocumentView";
-import { pageSchema } from "./ImageBox";
-import { ImageField, PdfField } from "../../../new_fields/URLField";
-import { InkingControl } from "../InkingControl";
-import { SearchBox } from "../SearchBox";
-import { Id } from "../../../new_fields/FieldSymbols";
 
 /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
  * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
@@ -73,11 +72,11 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     @computed private get thumbnailPage() { return NumCast(this.props.Document.thumbnailPage, -1); }
 
     componentDidMount() {
-        let wasSelected = false;
+        let wasSelected = this.props.isSelected();
         this._reactionDisposer = reaction(
-            () => this.props.isSelected(),
+            () => [this.props.isSelected(), this.curPage],
             () => {
-                if (this.curPage > 0 && this.curPage !== this.thumbnailPage && wasSelected && !this.props.isSelected()) {
+                if (this.curPage > 0 && !this.props.isTopMost && this.curPage !== this.thumbnailPage && wasSelected && !this.props.isSelected()) {
                     this.saveThumbnail();
                 }
                 wasSelected = this._interactive = this.props.isSelected();
@@ -246,16 +245,19 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
 
     @action
     saveThumbnail = () => {
+        this.props.Document.thumbnailPage = FieldValue(this.Document.curPage, -1);
         this._renderAsSvg = false;
         setTimeout(() => {
             let nwidth = FieldValue(this.Document.nativeWidth, 0);
             let nheight = FieldValue(this.Document.nativeHeight, 0);
-            htmlToImage.toPng(this._mainDiv.current!, { width: nwidth, height: nheight, quality: 1 })
+            htmlToImage.toPng(this._mainDiv.current!, { width: nwidth, height: nheight, quality: 0.8 })
                 .then(action((dataUrl: string) => {
-                    SearchBox.convertDataUri(dataUrl, this.Document[Id] + "_" + this.curPage).then((returnedFilename) => {
-                        this.props.Document.thumbnail = new ImageField(new URL(dataUrl));
-                        this.props.Document.thumbnailPage = FieldValue(this.Document.curPage, -1);
-                        this._renderAsSvg = true;
+                    SearchBox.convertDataUri(dataUrl, "icon" + this.Document[Id] + "_" + this.curPage).then((returnedFilename) => {
+                        if (returnedFilename) {
+                            let url = DocServer.prepend(returnedFilename);
+                            this.props.Document.thumbnail = new ImageField(new URL(url));
+                        }
+                        runInAction(() => this._renderAsSvg = true);
                     })
                 }))
                 .catch(function (error: any) {
@@ -292,7 +294,6 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     }
     @computed
     get pdfContent() {
-        trace();
         let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField);
         if (!pdfUrl) {
             return <p>No pdf url to render</p>;
@@ -309,7 +310,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
             </Measure>;
         let xf = (this.Document.nativeHeight || 0) / this.renderHeight;
         return <div className="pdfBox-contentContainer" key="container" style={{ transform: `scale(${xf}, ${xf})` }}>
-            <Document file={window.origin + RouteStore.corsProxy + `/${pdfUrl.url}`} renderMode={this._renderAsSvg ? "svg" : "canvas"}>
+            <Document file={window.origin + RouteStore.corsProxy + `/${pdfUrl.url}`} renderMode={this._renderAsSvg || this.props.isTopMost ? "svg" : "canvas"}>
                 {body}
             </Document>
         </div >;
@@ -317,26 +318,25 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
 
     @computed
     get pdfRenderer() {
-        let proxy = this._loaded ? (null) : this.imageProxyRenderer;
         let pdfUrl = Cast(this.props.Document[this.props.fieldKey], PdfField);
-        if ((!this._interactive && proxy) || !pdfUrl) {
+        let proxy = this.imageProxyRenderer;
+        if ((!this._interactive && proxy && (!this.props.ContainingCollectionView || !this.props.ContainingCollectionView.props.isTopMost)) || !pdfUrl) {
             return proxy;
         }
         return [
             this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element),
             this._currAnno.map((element: any) => element),
-            this.pdfContent,
-            proxy
+            this.pdfContent
         ];
     }
 
     @computed
     get imageProxyRenderer() {
         let thumbField = this.props.Document.thumbnail;
-        if (thumbField) {
-            let path = this.thumbnailPage !== this.curPage ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+        if (thumbField && this._renderAsSvg) {
+            let path = // this.thumbnailPage !== this.curPage ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
                 thumbField instanceof ImageField ? thumbField.url.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
-            return <img src={path} width="100%" />;
+            return <img key={Utils.GenerateGuid()} src={path} width="100%" />;
         }
         return (null);
     }
-- 
cgit v1.2.3-70-g09d2


From e5c9ba12e9a50a688e8c1554b525c87b1efbafb8 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 17:23:09 -0400
Subject: added s/m/l icons for pdf rendering.

---
 src/client/views/nodes/ImageBox.tsx |  1 -
 src/client/views/nodes/PDFBox.tsx   | 43 +++++++++++++++++++++++++++++++++----
 2 files changed, 39 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index a2291c7cf..8156ec872 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -19,7 +19,6 @@ import { InkingControl } from '../InkingControl';
 import { Doc } from '../../../new_fields/Doc';
 import { faImage } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 var path = require('path');
 
 library.add(faImage);
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index d1b9098b0..2a59eb7e5 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -21,6 +21,7 @@ import { positionSchema } from "./DocumentView";
 import { FieldView, FieldViewProps } from './FieldView';
 import { pageSchema } from "./ImageBox";
 import "./PDFBox.scss";
+var path = require('path');
 import React = require("react");
 
 /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
@@ -330,20 +331,54 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
         ];
     }
 
+    choosePath(url: URL) {
+        if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1)
+            return url.href;
+        let ext = path.extname(url.href);
+        return url.href.replace(ext, this._curSuffix + ext);
+    }
+    @observable _smallRetryCount = 1;
+    @observable _mediumRetryCount = 1;
+    @observable _largeRetryCount = 1;
+    @action retryPath = () => {
+        if (this._curSuffix === "_s") this._smallRetryCount++;
+        if (this._curSuffix === "_m") this._mediumRetryCount++;
+        if (this._curSuffix === "_l") this._largeRetryCount++;
+    }
+    @action onError = () => {
+        let timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount;
+        if (timeout < 10)
+            setTimeout(this.retryPath, Math.min(10000, timeout * 5));
+    }
+    _curSuffix = "";
+
     @computed
     get imageProxyRenderer() {
         let thumbField = this.props.Document.thumbnail;
         if (thumbField && this._renderAsSvg) {
-            let path = // this.thumbnailPage !== this.curPage ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
-                thumbField instanceof ImageField ? thumbField.url.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
-            return <img key={Utils.GenerateGuid()} src={path} width="100%" />;
+
+            let transform = this.props.ScreenToLocalTransform().inverse();
+            let pw = typeof this.props.PanelWidth === "function" ? this.props.PanelWidth() : typeof this.props.PanelWidth === "number" ? (this.props.PanelWidth as any) as number : 50;
+            var [sptX, sptY] = transform.transformPoint(0, 0);
+            let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
+            let w = bptX - sptX;
+
+            let path = thumbField instanceof ImageField ? thumbField.url.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
+            this._curSuffix = "";
+            if (w > 20) {
+                let field = thumbField;
+                if (w < 100 && this._smallRetryCount < 10) this._curSuffix = "_s";
+                else if (w < 400 && this._mediumRetryCount < 10) this._curSuffix = "_m";
+                else if (this._largeRetryCount < 10) this._curSuffix = "_l";
+                if (field instanceof ImageField) path = this.choosePath(field.url);
+            }
+            return <img key={path} src={path} width="100%" />;
         }
         return (null);
     }
     @action onKeyDown = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = true);
     @action onKeyUp = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = false);
     render() {
-        trace();
         let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
         return (
             <div className={classname} tabIndex={0} ref={this._mainDiv} onPointerDown={this.onPointerDown} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} >
-- 
cgit v1.2.3-70-g09d2


From 2e2dafc6d805e54e4119e28943a3800fe08c0ca9 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 20 May 2019 17:33:59 -0400
Subject: Disabled images in search

---
 src/server/index.ts        | 2 +-
 src/server/updateSearch.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/server/index.ts b/src/server/index.ts
index 574241f62..5a534afae 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -366,7 +366,7 @@ const suffixMap: { [type: string]: (string | [string, string | ((json: any) => a
     "number": "_n",
     "string": "_t",
     // "boolean": "_b",
-    "image": ["_t", "url"],
+    // "image": ["_t", "url"],
     "video": ["_t", "url"],
     "pdf": ["_t", "url"],
     "audio": ["_t", "url"],
diff --git a/src/server/updateSearch.ts b/src/server/updateSearch.ts
index da33e3747..de1fd25e1 100644
--- a/src/server/updateSearch.ts
+++ b/src/server/updateSearch.ts
@@ -7,7 +7,7 @@ const suffixMap: { [type: string]: (string | [string, string | ((json: any) => a
     "number": "_n",
     "string": "_t",
     // "boolean": "_b",
-    "image": ["_t", "url"],
+    // "image": ["_t", "url"],
     "video": ["_t", "url"],
     "pdf": ["_t", "url"],
     "audio": ["_t", "url"],
-- 
cgit v1.2.3-70-g09d2


From 70930405f8bdf43c05a77cb3dcbdadcbd3c9ab70 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Mon, 20 May 2019 19:10:10 -0400
Subject: PDF and Image test Context work

---
 .../views/collections/CollectionDockingView.tsx    |  3 ++-
 .../views/collections/ParentDocumentSelector.scss  | 10 ++++++++
 .../views/collections/ParentDocumentSelector.tsx   | 24 ++++++++++++++-----
 src/client/views/nodes/ImageBox.tsx                | 28 +++++++++++-----------
 src/client/views/nodes/PDFBox.tsx                  | 26 ++++++++++----------
 src/new_fields/Doc.ts                              | 13 ++++++----
 6 files changed, 65 insertions(+), 39 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 9721bf804..180a8be46 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -332,7 +332,8 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                     let counter: any = this.htmlToElement(`<span class="messageCounter">0</div>`);
                     tab.element.append(counter);
                     let upDiv = document.createElement("span");
-                    ReactDOM.render(<ParentDocSelector Document={doc} />, upDiv);
+                    const stack = tab.contentItem.parent;
+                    ReactDOM.render(<ParentDocSelector Document={doc} addDocTab={(doc, location) => CollectionDockingView.Instance.AddTab(stack, doc)} />, upDiv);
                     tab.reactComponents = [upDiv];
                     tab.element.append(upDiv);
                     counter.DashDocId = tab.contentItem.config.props.documentId;
diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss
index f3c605f3e..1ab12bb72 100644
--- a/src/client/views/collections/ParentDocumentSelector.scss
+++ b/src/client/views/collections/ParentDocumentSelector.scss
@@ -5,4 +5,14 @@
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     min-width: 150px;
     color: black;
+
+    hr {
+        height: 1px;
+        margin: 0px;
+        background-color: gray;
+        border-top: 0px;
+        border-bottom: 0px;
+        border-right: 0px;
+        border-left: 0px;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 4d07c31a7..65ae7f9ec 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -7,32 +7,44 @@ import { Id } from "../../../new_fields/FieldSymbols";
 import { SearchUtil } from "../../util/SearchUtil";
 import { CollectionDockingView } from "./CollectionDockingView";
 
+type SelectorProps = { Document: Doc, addDocTab(doc: Doc, location: string): void };
 @observer
-export class SelectorContextMenu extends React.Component<{ Document: Doc }> {
+export class SelectorContextMenu extends React.Component<SelectorProps> {
     @observable private _docs: Doc[] = [];
+    @observable private _otherDocs: Doc[] = [];
 
-    constructor(props: { Document: Doc }) {
+    constructor(props: SelectorProps) {
         super(props);
 
         this.fetchDocuments();
     }
 
     async fetchDocuments() {
+        let aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document)).filter(doc => doc !== this.props.Document);
         const docs = await SearchUtil.Search(`data_l:"${this.props.Document[Id]}"`, true);
-        runInAction(() => this._docs = docs);
+        const otherDocs: Set<Doc> = new Set;
+        const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search(`data_l:"${doc[Id]}"`, true)));
+        allDocs.forEach(docs => docs.forEach(doc => otherDocs.add(doc)));
+        docs.forEach(doc => otherDocs.delete(doc));
+        runInAction(() => {
+            this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document));
+            this._otherDocs = Array.from(otherDocs).filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document));
+        });
     }
 
     render() {
         return (
             <>
-                {this._docs.map(doc => <p><a onClick={() => CollectionDockingView.Instance.AddRightSplit(doc)}>{doc.title}</a></p>)}
+                {this._docs.map(doc => <p><a onClick={() => this.props.addDocTab(Doc.IsPrototype(doc) ? Doc.MakeDelegate(doc) : doc, "inTab")}>{doc.title}</a></p>)}
+                {this._otherDocs.length ? <hr></hr> : null}
+                {this._otherDocs.map(doc => <p><a onClick={() => this.props.addDocTab(Doc.IsPrototype(doc) ? Doc.MakeDelegate(doc) : doc, "inTab")}>{doc.title}</a></p>)}
             </>
         );
     }
 }
 
 @observer
-export class ParentDocSelector extends React.Component<{ Document: Doc }> {
+export class ParentDocSelector extends React.Component<SelectorProps> {
     @observable hover = false;
 
     @action
@@ -50,7 +62,7 @@ export class ParentDocSelector extends React.Component<{ Document: Doc }> {
         if (this.hover) {
             flyout = (
                 <div className="PDS-flyout">
-                    <SelectorContextMenu Document={this.props.Document} />
+                    <SelectorContextMenu {...this.props} />
                 </div>
             );
         }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 8156ec872..e022793eb 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -181,26 +181,26 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         if (timeout < 10)
             setTimeout(this.retryPath, Math.min(10000, timeout * 5));
     }
-    _curSuffix = "";
+    _curSuffix = "_m";
     render() {
-        let transform = this.props.ScreenToLocalTransform().inverse();
+        // let transform = this.props.ScreenToLocalTransform().inverse();
         let pw = typeof this.props.PanelWidth === "function" ? this.props.PanelWidth() : typeof this.props.PanelWidth === "number" ? (this.props.PanelWidth as any) as number : 50;
-        var [sptX, sptY] = transform.transformPoint(0, 0);
-        let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
-        let w = bptX - sptX;
+        // var [sptX, sptY] = transform.transformPoint(0, 0);
+        // let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
+        // let w = bptX - sptX;
 
         let id = (this.props as any).id; // bcz: used to set id = "isExpander" in templates.tsx
         let nativeWidth = FieldValue(this.Document.nativeWidth, pw);
         let paths: string[] = ["http://www.cs.brown.edu/~bcz/noImage.png"];
-        this._curSuffix = "";
-        if (w > 20) {
-            let field = this.Document[this.props.fieldKey];
-            if (w < 100 && this._smallRetryCount < 10) this._curSuffix = "_s";
-            else if (w < 600 && this._mediumRetryCount < 10) this._curSuffix = "_m";
-            else if (this._largeRetryCount < 10) this._curSuffix = "_l";
-            if (field instanceof ImageField) paths = [this.choosePath(field.url)];
-            else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => this.choosePath((p as ImageField).url));
-        }
+        // this._curSuffix = "";
+        // if (w > 20) {
+        let field = this.Document[this.props.fieldKey];
+        // if (w < 100 && this._smallRetryCount < 10) this._curSuffix = "_s";
+        // else if (w < 600 && this._mediumRetryCount < 10) this._curSuffix = "_m";
+        // else if (this._largeRetryCount < 10) this._curSuffix = "_l";
+        if (field instanceof ImageField) paths = [this.choosePath(field.url)];
+        else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => this.choosePath((p as ImageField).url));
+        // }
         let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
         return (
             <div id={id} className={`imageBox-cont${interactive}`}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 2a59eb7e5..3bffdd02d 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -350,28 +350,28 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
         if (timeout < 10)
             setTimeout(this.retryPath, Math.min(10000, timeout * 5));
     }
-    _curSuffix = "";
+    _curSuffix = "_m";
 
     @computed
     get imageProxyRenderer() {
         let thumbField = this.props.Document.thumbnail;
         if (thumbField && this._renderAsSvg) {
 
-            let transform = this.props.ScreenToLocalTransform().inverse();
+            // let transform = this.props.ScreenToLocalTransform().inverse();
             let pw = typeof this.props.PanelWidth === "function" ? this.props.PanelWidth() : typeof this.props.PanelWidth === "number" ? (this.props.PanelWidth as any) as number : 50;
-            var [sptX, sptY] = transform.transformPoint(0, 0);
-            let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
-            let w = bptX - sptX;
+            // var [sptX, sptY] = transform.transformPoint(0, 0);
+            // let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
+            // let w = bptX - sptX;
 
             let path = thumbField instanceof ImageField ? thumbField.url.href : "http://cs.brown.edu/people/bcz/prairie.jpg";
-            this._curSuffix = "";
-            if (w > 20) {
-                let field = thumbField;
-                if (w < 100 && this._smallRetryCount < 10) this._curSuffix = "_s";
-                else if (w < 400 && this._mediumRetryCount < 10) this._curSuffix = "_m";
-                else if (this._largeRetryCount < 10) this._curSuffix = "_l";
-                if (field instanceof ImageField) path = this.choosePath(field.url);
-            }
+            // this._curSuffix = "";
+            // if (w > 20) {
+            let field = thumbField;
+            // if (w < 100 && this._smallRetryCount < 10) this._curSuffix = "_s";
+            // else if (w < 400 && this._mediumRetryCount < 10) this._curSuffix = "_m";
+            // else if (this._largeRetryCount < 10) this._curSuffix = "_l";
+            if (field instanceof ImageField) path = this.choosePath(field.url);
+            // }
             return <img key={path} src={path} width="100%" />;
         }
         return (null);
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index f4514c33e..92d3c140a 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -149,6 +149,9 @@ export namespace Doc {
     export function GetT<T extends Field>(doc: Doc, key: string, ctor: ToConstructor<T>, ignoreProto: boolean = false): FieldResult<T> {
         return Cast(Get(doc, key, ignoreProto), ctor) as FieldResult<T>;
     }
+    export function IsPrototype(doc: Doc) {
+        return GetT(doc, "isPrototype", "boolean", true);
+    }
     export async function SetOnPrototype(doc: Doc, key: string, value: Field) {
         const proto = Object.getOwnPropertyNames(doc).indexOf("isPrototype") === -1 ? doc.proto : doc;
 
@@ -180,11 +183,11 @@ export namespace Doc {
 
     // compare whether documents or their protos match
     export function AreProtosEqual(doc: Doc, other: Doc) {
-        let r = (doc[Id] === other[Id]);
-        let r2 = (doc.proto && doc.proto.Id === other[Id]);
-        let r3 = (other.proto && other.proto.Id === doc[Id]);
-        let r4 = (doc.proto && other.proto && doc.proto[Id] === other.proto[Id]);
-        return r || r2 || r3 || r4 ? true : false;
+        let r = (doc === other);
+        let r2 = (doc.proto === other);
+        let r3 = (other.proto === doc);
+        let r4 = (doc.proto === other.proto);
+        return r || r2 || r3 || r4;
     }
 
     // gets the document's prototype or returns the document if it is a prototype
-- 
cgit v1.2.3-70-g09d2


From 060455feec89c94073636f612ccca54a0aaabb90 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 21:29:17 -0400
Subject: fixed a few things for Firefox - dragging images, typing spaces,
 scrool speed.  and focusing proeprly with zoomBasis.

---
 .vscode/launch.json                                              | 9 +++++++++
 .../collections/collectionFreeForm/CollectionFreeFormView.tsx    | 9 +++------
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx        | 3 +++
 src/client/views/nodes/FormattedTextBox.tsx                      | 4 ++--
 4 files changed, 17 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/.vscode/launch.json b/.vscode/launch.json
index d245be2ad..3b6549767 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -13,6 +13,15 @@
             "url": "http://localhost:1050/login",
             "webRoot": "${workspaceFolder}",
         },
+        {
+            "type": "firefox",
+            "request": "launch",
+            "name": "Launch Firefox against localhost",
+            "sourceMaps": "client",
+            "reAttach": true,
+            "url": "http://localhost:1050/login",
+            "webRoot": "${workspaceFolder}",
+        },
         {
             "type": "chrome",
             "request": "launch",
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ee6f4821f..3ec7184d2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -183,7 +183,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             return;
         }
         e.stopPropagation();
-        const coefficient = 1000;
+        const coefficient = 100;
 
         if (e.ctrlKey) {
             let deltaScale = (1 - (e.deltaY / coefficient));
@@ -215,7 +215,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 
     @action
     setPan(panX: number, panY: number) {
-        this.panDisposer && clearTimeout(this.panDisposer);
         this.props.Document.panTransformType = "None";
         var scale = this.getLocalTransform().inverse().Scale;
         const newPanX = Math.min((1 - 1 / scale) * this.nativeWidth, Math.max(0, panX));
@@ -243,7 +242,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         doc.zIndex = docs.length + 1;
     }
 
-    panDisposer?: NodeJS.Timeout;
     focusDocument = (doc: Doc) => {
         const panX = this.Document.panX;
         const panY = this.Document.panY;
@@ -265,15 +263,14 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             }
         }
         SelectionManager.DeselectAll();
-        const newPanX = NumCast(doc.x) + NumCast(doc.width) / 2;
-        const newPanY = NumCast(doc.y) + NumCast(doc.height) / 2;
+        const newPanX = NumCast(doc.x) + NumCast(doc.width) / NumCast(doc.zoomBasis, 1) / 2;
+        const newPanY = NumCast(doc.y) + NumCast(doc.height) / NumCast(doc.zoomBasis, 1) / 2;
         const newState = HistoryUtil.getState();
         newState.initializers[id] = { panX: newPanX, panY: newPanY };
         HistoryUtil.pushState(newState);
         this.setPan(newPanX, newPanY);
         this.props.Document.panTransformType = "Ease";
         this.props.focus(this.props.Document);
-        this.panDisposer = setTimeout(() => this.props.Document.panTransformType = "None", 2000);  // wait 3 seconds, then reset to false
     }
 
 
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index fa2b09ba7..7c3180496 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -177,6 +177,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         } else {
             this._lastTap = Date.now();
         }
+        if (e.button === 0) {
+            e.preventDefault();  // prevents Firefox from dragging images (we want to do that ourself)
+        }
     }
     onPointerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointerup", this.onPointerUp);
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index d15813f9a..5afef221c 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -366,7 +366,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 style={{
                     pointerEvents: interactive ? "all" : "none",
                 }}
-                onKeyDown={this.onKeyPress}
+                // onKeyDown={this.onKeyPress}
                 onKeyPress={this.onKeyPress}
                 onFocus={this.onFocused}
                 onClick={this.onClick}
@@ -378,7 +378,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 // tfs: do we need this event handler
                 onWheel={this.onPointerWheel}
             >
-                <div className={`formattedTextBox-inner${rounded}`} style={{ pointerEvents: this.props.Document.isButton && !this.props.isSelected() ? "none" : "all" }} ref={this._proseRef} />
+                <div className={`formattedTextBox-inner${rounded}`} style={{ whiteSpace: "pre-wrap", pointerEvents: this.props.Document.isButton && !this.props.isSelected() ? "none" : "all" }} ref={this._proseRef} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 505676028698f22e46854fdd8ea25ea3118b5d6f Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 20 May 2019 22:31:37 -0400
Subject: fixed annotation pages for videos

---
 src/Utils.ts                                                | 13 +++++++++++++
 src/client/views/InkingCanvas.tsx                           |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx           |  2 +-
 src/client/views/nodes/VideoBox.tsx                         |  6 ++++--
 4 files changed, 19 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/Utils.ts b/src/Utils.ts
index 24878a368..611c61135 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -39,6 +39,19 @@ export class Utils {
         document.body.removeChild(textArea);
     }
 
+    public static GetClipboardText(): string {
+        var textArea = document.createElement("textarea");
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
+        try { document.execCommand('paste'); } catch (err) { }
+
+        const val = textArea.value;
+        document.body.removeChild(textArea);
+        return val;
+    }
+
     public static loggingEnabled: Boolean = false;
     public static logFilter: number | undefined = undefined;
     private static log(prefix: string, messageName: string, message: any, receiving: boolean) {
diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx
index afe3e3ecb..42ab08001 100644
--- a/src/client/views/InkingCanvas.tsx
+++ b/src/client/views/InkingCanvas.tsx
@@ -146,7 +146,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> {
     get drawnPaths() {
         let curPage = NumCast(this.props.Document.curPage, -1);
         let paths = Array.from(this.inkData).reduce((paths, [id, strokeData]) => {
-            if (strokeData.page === -1 || strokeData.page === curPage) {
+            if (strokeData.page === -1 || Math.round(strokeData.page) === Math.round(curPage)) {
                 paths.push(<InkingStroke key={id} id={id}
                     line={strokeData.pathData}
                     count={strokeData.pathData.length}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 3ec7184d2..ba6a4bbab 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -302,7 +302,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         let docviews = this.childDocs.reduce((prev, doc) => {
             if (!(doc instanceof Doc)) return prev;
             var page = NumCast(doc.page, -1);
-            if (page === curPage || page === -1) {
+            if (Math.round(page) === Math.round(curPage) || page === -1) {
                 let minim = BoolCast(doc.isMinimized, false);
                 if (minim === undefined || !minim) {
                     prev.push(<CollectionFreeFormDocumentView key={doc[Id]} {...this.getDocumentViewProps(doc)} />);
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 81c429a02..6ae55d151 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -52,7 +52,7 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
     @action public Play() {
         this.Playing = true;
         if (this.player) this.player.play();
-        if (!this._playTimer) this._playTimer = setInterval(this.updateTimecode, 1000);
+        if (!this._playTimer) this._playTimer = setInterval(this.updateTimecode, 500);
     }
 
     @action public Pause() {
@@ -70,7 +70,9 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
     }
 
     @action
-    updateTimecode = () => this.player && (this.props.Document.curPage = this.player.currentTime)
+    updateTimecode = () => {
+        this.player && (this.props.Document.curPage = this.player.currentTime);
+    }
 
     componentDidMount() {
         if (this.props.setVideoBox) this.props.setVideoBox(this);
-- 
cgit v1.2.3-70-g09d2


From c91a87d8e324089166373ec828f101836555585a Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 05:50:22 -0400
Subject: Going up a level now centers on the document

---
 .../views/collections/ParentDocumentSelector.tsx   | 33 ++++++++++++++++------
 1 file changed, 24 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 65ae7f9ec..e6eb51a0c 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -6,12 +6,14 @@ import { observable, action, runInAction } from "mobx";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { SearchUtil } from "../../util/SearchUtil";
 import { CollectionDockingView } from "./CollectionDockingView";
+import { NumCast } from "../../../new_fields/Types";
+import { CollectionViewType } from "./CollectionBaseView";
 
 type SelectorProps = { Document: Doc, addDocTab(doc: Doc, location: string): void };
 @observer
 export class SelectorContextMenu extends React.Component<SelectorProps> {
-    @observable private _docs: Doc[] = [];
-    @observable private _otherDocs: Doc[] = [];
+    @observable private _docs: { col: Doc, target: Doc }[] = [];
+    @observable private _otherDocs: { col: Doc, target: Doc }[] = [];
 
     constructor(props: SelectorProps) {
         super(props);
@@ -22,22 +24,35 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
     async fetchDocuments() {
         let aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document)).filter(doc => doc !== this.props.Document);
         const docs = await SearchUtil.Search(`data_l:"${this.props.Document[Id]}"`, true);
-        const otherDocs: Set<Doc> = new Set;
+        const map: Map<Doc, Doc> = new Map;
         const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search(`data_l:"${doc[Id]}"`, true)));
-        allDocs.forEach(docs => docs.forEach(doc => otherDocs.add(doc)));
-        docs.forEach(doc => otherDocs.delete(doc));
+        allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index])));
+        docs.forEach(doc => map.delete(doc));
         runInAction(() => {
-            this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document));
-            this._otherDocs = Array.from(otherDocs).filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document));
+            this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.Document }));
+            this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target }));
         });
     }
 
+    getOnClick({ col, target }: { col: Doc, target: Doc }) {
+        return () => {
+            col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col;
+            if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) {
+                const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2;
+                const newPanY = NumCast(target.y) + NumCast(target.height) / NumCast(target.zoomBasis, 1) / 2;
+                col.panX = newPanX;
+                col.panY = newPanY;
+            }
+            this.props.addDocTab(col, "inTab");
+        };
+    }
+
     render() {
         return (
             <>
-                {this._docs.map(doc => <p><a onClick={() => this.props.addDocTab(Doc.IsPrototype(doc) ? Doc.MakeDelegate(doc) : doc, "inTab")}>{doc.title}</a></p>)}
+                {this._docs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
                 {this._otherDocs.length ? <hr></hr> : null}
-                {this._otherDocs.map(doc => <p><a onClick={() => this.props.addDocTab(Doc.IsPrototype(doc) ? Doc.MakeDelegate(doc) : doc, "inTab")}>{doc.title}</a></p>)}
+                {this._otherDocs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
             </>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 3abf1b817a5ed0e2bcacaa08f4a15a9193794a3a Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 08:22:24 -0400
Subject: Fixed performance problems

---
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 6 +++---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx       | 8 +++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 97e610e13..31864f357 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -1,5 +1,5 @@
 import * as htmlToImage from "html-to-image";
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Docs } from "../../../documents/Documents";
 import { SelectionManager } from "../../../util/SelectionManager";
@@ -344,10 +344,10 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
     }
 
     render() {
-        let p = this.props.getContainerTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
+        let p: [number, number] = this._visible ? this.props.getContainerTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY) : [0, 0];
         return <div className="marqueeView" style={{ borderRadius: "inherit" }} onClick={this.onClick} onPointerDown={this.onPointerDown}>
             <div style={{ position: "relative", transform: `translate(${p[0]}px, ${p[1]}px)` }} >
-                {!this._visible ? null : this.marqueeDiv}
+                {this._visible ? this.marqueeDiv : null}
                 <div ref={this._mainCont} style={{ transform: `translate(${-p[0]}px, ${-p[1]}px)` }} >
                     {this.props.children}
                 </div>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 7c3180496..bf0c272e3 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, IReactionDisposer, reaction } from "mobx";
+import { action, computed, IReactionDisposer, reaction, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
@@ -211,7 +211,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 expandedDocs = summarizedDocs ? [...summarizedDocs, ...expandedDocs] : expandedDocs;
                 // let expandedDocs = [...(subBulletDocs ? subBulletDocs : []), ...(maximizedDocs ? maximizedDocs : []), ...(summarizedDocs ? summarizedDocs : []),];
                 if (expandedDocs.length) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    let expandedProtoDocs = expandedDocs.map(doc => Doc.GetProto(doc))
+                    let expandedProtoDocs = expandedDocs.map(doc => Doc.GetProto(doc));
                     let maxLocation = StrCast(this.props.Document.maximizeLocation, "inPlace");
                     let getDispDoc = (target: Doc) => Object.getOwnPropertyNames(target).indexOf("isPrototype") === -1 ? target : Doc.MakeDelegate(target);
                     if (altKey) {
@@ -286,7 +286,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     outlineStyle: "dashed",
                     outlineWidth: BoolCast(this.props.Document.libraryBrush, false) ||
                         BoolCast(this.props.Document.protoBrush, false) ?
-                        `${1 * this.getTransform().Scale}px` : "0px",
+                        `${1 * this.getTransform().Scale}px`
+                        // "2px"
+                        : "0px",
                     opacity: zoomFade,
                     borderRadius: `${this.borderRounding()}px`,
                     transformOrigin: "left top",
-- 
cgit v1.2.3-70-g09d2


From 1d0a66ca924da1b5c24e10461e3a7c26f550f348 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 09:34:10 -0400
Subject: Fixed speed again?

---
 src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 10 +++++-----
 src/client/views/nodes/DocumentContentsView.tsx           |  5 +++--
 src/client/views/nodes/ImageBox.tsx                       |  2 +-
 src/new_fields/Doc.ts                                     |  1 -
 4 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index bf0c272e3..aaaa6a9c5 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -266,15 +266,15 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         let maximizedDoc = FieldValue(Cast(this.props.Document.maximizedDocs, listSpec(Doc)));
         let zoomFade = 1;
         //var zoom = doc.GetNumber(KeyStore.ZoomBasis, 1);
-        let transform = this.getTransform().scale(this.contentScaling()).inverse();
-        var [sptX, sptY] = transform.transformPoint(0, 0);
-        let [bptX, bptY] = transform.transformPoint(this.props.PanelWidth(), this.props.PanelHeight());
-        let w = bptX - sptX;
+        // let transform = this.getTransform().scale(this.contentScaling()).inverse();
+        // var [sptX, sptY] = transform.transformPoint(0, 0);
+        // let [bptX, bptY] = transform.transformPoint(this.props.PanelWidth(), this.props.PanelHeight());
+        // let w = bptX - sptX;
         //zoomFade = area < 100 || area > 800 ? Math.max(0, Math.min(1, 2 - 5 * (zoom < this.scale ? this.scale / zoom : zoom / this.scale))) : 1;
         const screenWidth = Math.min(50 * NumCast(this.props.Document.nativeWidth, 0), 1800);
         let fadeUp = .75 * screenWidth;
         let fadeDown = (maximizedDoc ? .0075 : .075) * screenWidth;
-        zoomFade = w < fadeDown  /* || w > fadeUp */ ? Math.max(0.1, Math.min(1, 2 - (w < fadeDown ? Math.sqrt(Math.sqrt(fadeDown / w)) : w / fadeUp))) : 1;
+        // zoomFade = w < fadeDown  /* || w > fadeUp */ ? Math.max(0.1, Math.min(1, 2 - (w < fadeDown ? Math.sqrt(Math.sqrt(fadeDown / w)) : w / fadeUp))) : 1;
 
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index d2cb11586..52a9582d2 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -90,8 +90,9 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
                         Math.min(NumCast(self.props.Document.width, 0),
                             px * self.props.ScreenToLocalTransform().Scale))}px`;
                 }
-                let nativizedTemplate = template.replace(/([0-9]+)px/g, convertConstantsToNative);
-                layout = nativizedTemplate.replace("{layout}", base);
+                // let nativizedTemplate = template.replace(/([0-9]+)px/g, convertConstantsToNative);
+                // layout = nativizedTemplate.replace("{layout}", base);
+                layout = template.replace("{layout}", base);
                 base = layout;
             });
         }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index e022793eb..d9d964ee9 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, trace } from 'mobx';
 import { observer } from "mobx-react";
 import Lightbox from 'react-image-lightbox';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 92d3c140a..08bc2ec4d 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -116,7 +116,6 @@ export class Doc extends RefField {
     }
 
     public [HandleUpdate](diff: any) {
-        console.log(diff);
         const set = diff.$set;
         if (set) {
             for (const key in set) {
-- 
cgit v1.2.3-70-g09d2


From 6eb5234a0def9e5714319e512e8dd927bd894b82 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 11:44:51 -0400
Subject: Fixed various scripting things

---
 src/client/util/type_decls.d                       | 33 ++++++++++++++++------
 .../views/collections/CollectionSchemaView.tsx     | 10 +++----
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  2 +-
 src/client/views/nodes/KeyValuePair.tsx            |  8 ++----
 src/debug/Viewer.tsx                               |  2 +-
 src/new_fields/Doc.ts                              |  7 +++--
 src/new_fields/URLField.ts                         |  9 ++++--
 7 files changed, 46 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/client/util/type_decls.d b/src/client/util/type_decls.d
index 51114d0e2..557f6f574 100644
--- a/src/client/util/type_decls.d
+++ b/src/client/util/type_decls.d
@@ -140,33 +140,50 @@ declare const ToScriptString: unique symbol;
 declare abstract class RefField {
     readonly [Id]: FieldId;
 
-    constructor(id?: FieldId);
-    protected [HandleUpdate]?(diff: any): void;
+    constructor();
+    // protected [HandleUpdate]?(diff: any): void;
 
-    abstract [ToScriptString](): string;
+    // abstract [ToScriptString](): string;
 }
 
 declare abstract class ObjectField {
     protected [OnUpdate](diff?: any): void;
     private [Parent]?: RefField | ObjectField;
-    abstract [Copy](): ObjectField;
+    // abstract [Copy](): ObjectField;
 
-    abstract [ToScriptString](): string;
+    // abstract [ToScriptString](): string;
 }
+
+declare abstract class URLField extends ObjectField {
+    readonly url: URL;
+
+    constructor(url: string);
+    constructor(url: URL);
+}
+
+declare class AudioField extends URLField { }
+declare class VideoField extends URLField { }
+declare class ImageField extends URLField { }
+declare class WebField extends URLField { }
+declare class PdfField extends URLField { }
+
 declare type FieldId = string;
 
 declare type Field = number | string | boolean | ObjectField | RefField;
 
 declare type Opt<T> = T | undefined;
 declare class Doc extends RefField {
+    constructor();
+
     [key: string]: Field | undefined;
-    [ToScriptString](): string;
+    // [ToScriptString](): string;
 }
 
 declare class ListImpl<T extends Field> extends ObjectField {
+    constructor(fields?: T[]);
     [index: number]: T | (T extends RefField ? Promise<T> : never);
-    [ToScriptString](): string;
-    [Copy](): ObjectField;
+    // [ToScriptString](): string;
+    // [Copy](): ObjectField;
 }
 
 // @ts-ignore
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b25b48339..488f7d6cb 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -115,22 +115,20 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                     height={Number(MAX_ROW_HEIGHT)}
                     GetValue={() => {
                         let field = props.Document[props.fieldKey];
-                        if (field) {
-                            //TODO Types
-                            // return field.ToScriptString();
-                            return String(field);
+                        if (Field.IsField(field)) {
+                            return Field.toScriptString(field);
                         }
                         return "";
                     }}
                     SetValue={(value: string) => {
-                        let script = CompileScript(value, { addReturn: true, params: { this: Document.name } });
+                        let script = CompileScript(value, { addReturn: true, params: { this: Doc.name } });
                         if (!script.compiled) {
                             return false;
                         }
                         return applyToDoc(props.Document, script.run);
                     }}
                     OnFillDown={async (value: string) => {
-                        let script = CompileScript(value, { addReturn: true, params: { this: Document.name } });
+                        let script = CompileScript(value, { addReturn: true, params: { this: Doc.name } });
                         if (!script.compiled) {
                             return;
                         }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ba6a4bbab..7a0a02318 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -183,7 +183,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             return;
         }
         e.stopPropagation();
-        const coefficient = 100;
+        const coefficient = 1000;
 
         if (e.ctrlKey) {
             let deltaScale = (1 - (e.deltaY / coefficient));
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 7a88985c0..2363553df 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -60,10 +60,8 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                     <EditableView contents={contents} height={36} GetValue={() => {
 
                         let field = FieldValue(props.Document[props.fieldKey]);
-                        if (field) {
-                            //TODO Types
-                            return String(field);
-                            // return field.ToScriptString();
+                        if (Field.IsField(field)) {
+                            return Field.toScriptString(field);
                         }
                         return "";
                     }}
@@ -75,7 +73,7 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                             let res = script.run();
                             if (!res.success) return false;
                             const field = res.result;
-                            if (Field.IsField(field)) {
+                            if (Field.IsField(field, true)) {
                                 props.Document[props.fieldKey] = field;
                                 return true;
                             }
diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index 4314e2132..b22300d0b 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -20,7 +20,7 @@ function applyToDoc(doc: any, key: string | number, scriptString: string): boole
     }
     const res = script.run({ this: doc });
     if (!res.success) return false;
-    if (!Field.IsField(res.result)) return false;
+    if (!Field.IsField(res.result, true)) return false;
     doc[key] = res.result;
     return true;
 }
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 08bc2ec4d..b0237d04d 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -19,12 +19,15 @@ export namespace Field {
             return field[ToScriptString]();
         }
     }
-    export function IsField(field: any): field is Field {
+    export function IsField(field: any): field is Field;
+    export function IsField(field: any, includeUndefined: true): field is Field | undefined;
+    export function IsField(field: any, includeUndefined: boolean = false): field is Field | undefined {
         return (typeof field === "string")
             || (typeof field === "number")
             || (typeof field === "boolean")
             || (field instanceof ObjectField)
-            || (field instanceof RefField);
+            || (field instanceof RefField)
+            || (includeUndefined && field === undefined);
     }
 }
 export type Field = number | string | boolean | ObjectField | RefField;
diff --git a/src/new_fields/URLField.ts b/src/new_fields/URLField.ts
index a6f8f1cc5..4a2841fb6 100644
--- a/src/new_fields/URLField.ts
+++ b/src/new_fields/URLField.ts
@@ -18,13 +18,18 @@ export abstract class URLField extends ObjectField {
     @serializable(url())
     readonly url: URL;
 
-    constructor(url: URL) {
+    constructor(url: string);
+    constructor(url: URL);
+    constructor(url: URL | string) {
         super();
+        if (typeof url === "string") {
+            url = new URL(url);
+        }
         this.url = url;
     }
 
     [ToScriptString]() {
-        return `new ${this.constructor.name}(new URL(${this.url.href}))`;
+        return `new ${this.constructor.name}("${this.url.href}")`;
     }
 
     [Copy](): this {
-- 
cgit v1.2.3-70-g09d2


From cfb7fdb1a7b2db263502677e57ee882a6fe23f13 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 12:29:28 -0400
Subject: Made cursors disappear after 1 second

---
 package.json                                                     | 1 +
 src/client/views/collections/CollectionSubView.tsx               | 6 ++----
 .../collectionFreeForm/CollectionFreeFormRemoteCursors.tsx       | 5 ++++-
 src/new_fields/CursorField.ts                                    | 9 ++++++---
 4 files changed, 13 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/package.json b/package.json
index 790535728..aa4abb0a5 100644
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
         "mobx": "^5.9.0",
         "mobx-react": "^5.3.5",
         "mobx-react-devtools": "^6.1.1",
+        "mobx-utils": "^5.4.0",
         "mongodb": "^3.1.13",
         "mongoose": "^5.4.18",
         "node-sass": "^4.12.0",
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 864fdfa4b..7800b35df 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -16,9 +16,7 @@ import { listSpec } from "../../../new_fields/Schema";
 import { Cast, PromiseValue, FieldValue, ListSpec } from "../../../new_fields/Types";
 import { List } from "../../../new_fields/List";
 import { DocServer } from "../../DocServer";
-import { ObjectField } from "../../../new_fields/ObjectField";
-import CursorField, { CursorPosition, CursorMetadata } from "../../../new_fields/CursorField";
-import { url } from "inspector";
+import CursorField from "../../../new_fields/CursorField";
 
 export interface CollectionViewProps extends FieldViewProps {
     addDocument: (document: Doc, allowDuplicates?: boolean) => boolean;
@@ -72,7 +70,7 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
                 if (cursors.length > 0 && (ind = cursors.findIndex(entry => entry.data.metadata.id === id)) > -1) {
                     cursors[ind].setPosition(pos);
                 } else {
-                    let entry = new CursorField({ metadata: { id: id, identifier: email }, position: pos });
+                    let entry = new CursorField({ metadata: { id: id, identifier: email, timestamp: Date.now() }, position: pos });
                     cursors.push(entry);
                 }
             }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
index 642118d75..2838b7905 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx
@@ -9,6 +9,7 @@ import CursorField from "../../../../new_fields/CursorField";
 import { List } from "../../../../new_fields/List";
 import { Cast } from "../../../../new_fields/Types";
 import { listSpec } from "../../../../new_fields/Schema";
+import * as mobxUtils from 'mobx-utils';
 
 @observer
 export class CollectionFreeFormRemoteCursors extends React.Component<CollectionViewProps> {
@@ -23,7 +24,9 @@ export class CollectionFreeFormRemoteCursors extends React.Component<CollectionV
 
         let cursors = Cast(doc.cursors, listSpec(CursorField));
 
-        return (cursors || []).filter(cursor => cursor.data.metadata.id !== id);
+        const now = mobxUtils.now();
+        // const now = Date.now();
+        return (cursors || []).filter(cursor => cursor.data.metadata.id !== id && (now - cursor.data.metadata.timestamp) < 1000);
     }
 
     private crosshairs?: HTMLCanvasElement;
diff --git a/src/new_fields/CursorField.ts b/src/new_fields/CursorField.ts
index 1be1ec3e0..fd86031a8 100644
--- a/src/new_fields/CursorField.ts
+++ b/src/new_fields/CursorField.ts
@@ -1,7 +1,7 @@
 import { ObjectField } from "./ObjectField";
 import { observable } from "mobx";
 import { Deserializable } from "../client/util/SerializationHelper";
-import { serializable, createSimpleSchema, object } from "serializr";
+import { serializable, createSimpleSchema, object, date } from "serializr";
 import { OnUpdate, ToScriptString, Copy } from "./FieldSymbols";
 
 export type CursorPosition = {
@@ -11,7 +11,8 @@ export type CursorPosition = {
 
 export type CursorMetadata = {
     id: string,
-    identifier: string
+    identifier: string,
+    timestamp: number
 };
 
 export type CursorData = {
@@ -26,7 +27,8 @@ const PositionSchema = createSimpleSchema({
 
 const MetadataSchema = createSimpleSchema({
     id: true,
-    identifier: true
+    identifier: true,
+    timestamp: true
 });
 
 const CursorSchema = createSimpleSchema({
@@ -47,6 +49,7 @@ export default class CursorField extends ObjectField {
 
     setPosition(position: CursorPosition) {
         this.data.position = position;
+        this.data.metadata.timestamp = Date.now();
         this[OnUpdate]();
     }
 
-- 
cgit v1.2.3-70-g09d2


From 7bafa21e8c37826686a012151674b71631fa9c8b Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 21 May 2019 12:35:36 -0400
Subject: fixed dragging headers for histograms

---
 src/client/documents/Documents.ts                        |  1 -
 src/client/views/collections/CollectionSchemaView.tsx    | 16 +++++++++++++---
 .../views/collections/collectionFreeForm/MarqueeView.tsx |  5 ++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 9d2f4d3cd..3d65826a9 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -33,7 +33,6 @@ import { DocServer } from "../DocServer";
 import { StrokeData, InkField } from "../../new_fields/InkField";
 import { dropActionType } from "../util/DragManager";
 import { DateField } from "../../new_fields/DateField";
-import { schema } from "prosemirror-schema-basic";
 import { UndoManager } from "../util/UndoManager";
 
 export interface DocumentOptions {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b25b48339..c42a0332d 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -68,7 +68,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         return this.columns.map(col => {
             const ref = React.createRef<HTMLParagraphElement>();
             return {
-                Header: <p ref={ref} onPointerDown={SetupDrag(ref, () => this.onHeaderDrag(col))}>{col}</p>,
+                Header: <p ref={ref} onPointerDown={SetupDrag(ref, () => this.onHeaderDrag(col), undefined, "copy")}>{col}</p>,
                 accessor: (doc: Doc) => doc ? doc[col] : 0,
                 id: col
             };
@@ -76,6 +76,15 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 
     onHeaderDrag = (columnName: string) => {
+        let dbDoc = Cast(this.props.Document.DBDoc, Doc);
+        if (dbDoc instanceof Doc) {
+            let columnDocs = DocListCast(dbDoc.data);
+            if (columnDocs) {
+                let ddoc = columnDocs.find(doc => doc.title === columnName);
+                if (ddoc)
+                    return ddoc;
+            }
+        }
         return this.props.Document;
     }
 
@@ -237,7 +246,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         csv = csv.substr(0, csv.length - 1) + "\n";
         let self = this;
         DocListCast(this.props.Document.data).map(doc => {
-            csv += self.columns.reduce((val, col) => val + (doc[col] ? doc[col]!.toString() : "") + ",", "");
+            csv += self.columns.reduce((val, col) => val + (doc[col] ? doc[col]!.toString() : "0") + ",", "");
             csv = csv.substr(0, csv.length - 1) + "\n";
         });
         csv.substring(0, csv.length - 1);
@@ -246,7 +255,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         if (self.props.CollectionView.props.addDocument) {
             let schemaDoc = await Docs.DBDocument("https://www.cs.brown.edu/" + dbName, { title: dbName });
             if (schemaDoc) {
-                self.props.CollectionView.props.addDocument(schemaDoc, false);
+                //self.props.CollectionView.props.addDocument(schemaDoc, false);
+                self.props.Document.DBDoc = schemaDoc;
             }
         }
     }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 31864f357..7ccf480f3 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -98,18 +98,21 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     let columns = ns[0].split("\t");
                     let docList: Doc[] = [];
                     let groupAttr: string | number = "";
+                    let rowProto = new Doc();
+                    rowProto.width = 200;
                     for (let i = 1; i < ns.length - 1; i++) {
                         let values = ns[i].split("\t");
                         if (values.length === 1 && columns.length > 1) {
                             groupAttr = values[0];
                             continue;
                         }
-                        let doc = new Doc();
+                        let doc = Doc.MakeDelegate(rowProto);
                         columns.forEach((col, i) => doc[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined));
                         if (groupAttr) {
                             doc._group = groupAttr;
                         }
                         doc.title = i.toString();
+                        doc.width = 200;
                         docList.push(doc);
                     }
                     let newCol = Docs.SchemaDocument([...(groupAttr ? ["_group"] : []), ...columns.filter(c => c)], docList, { x: x, y: y, title: "droppedTable", width: 300, height: 100 });
-- 
cgit v1.2.3-70-g09d2


From 7e5ba95b02e4ead3ee2b41eca1af0acb72d6f7cd Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 21 May 2019 14:15:06 -0400
Subject: fixes for histogram brushing.

---
 src/client/northstar/dash-fields/HistogramField.ts |  2 +-
 src/client/northstar/dash-nodes/HistogramBox.tsx   |  4 ++-
 .../CollectionFreeFormLinksView.tsx                | 12 +++----
 .../collections/collectionFreeForm/MarqueeView.tsx | 38 ++++++++++++----------
 src/client/views/nodes/FieldView.tsx               |  2 +-
 5 files changed, 31 insertions(+), 27 deletions(-)

(limited to 'src')

diff --git a/src/client/northstar/dash-fields/HistogramField.ts b/src/client/northstar/dash-fields/HistogramField.ts
index 31040a474..e6f32272e 100644
--- a/src/client/northstar/dash-fields/HistogramField.ts
+++ b/src/client/northstar/dash-fields/HistogramField.ts
@@ -58,6 +58,6 @@ export class HistogramField extends ObjectField {
     }
 
     [ToScriptString]() {
-        return "invalid";
+        return this.toString();
     }
 }
\ No newline at end of file
diff --git a/src/client/northstar/dash-nodes/HistogramBox.tsx b/src/client/northstar/dash-nodes/HistogramBox.tsx
index a9646ed31..d7732ee86 100644
--- a/src/client/northstar/dash-nodes/HistogramBox.tsx
+++ b/src/client/northstar/dash-nodes/HistogramBox.tsx
@@ -125,9 +125,11 @@ export class HistogramBox extends React.Component<FieldViewProps> {
                                 let mapped = brushingDocs.map((brush, i) => {
                                     brush.backgroundColor = StyleConstants.BRUSH_COLORS[i % StyleConstants.BRUSH_COLORS.length];
                                     let brushed = DocListCast(brush.brushingDocs);
+                                    if (!brushed.length)
+                                        return null;
                                     return { l: brush, b: brushed[0][Id] === proto[Id] ? brushed[1] : brushed[0] };
                                 });
-                                this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...mapped);
+                                runInAction(() => this.HistoOp.BrushLinks.splice(0, this.HistoOp.BrushLinks.length, ...mapped.filter(m => m) as { l: Doc, b: Doc }[]));
                             }
                         }, { fireImmediately: true });
                     reaction(() => this.createOperationParamsCache, () => this.HistoOp.Update(), { fireImmediately: true });
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index e1ff715d1..c5f7ad0d1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -32,8 +32,8 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
                         let srcTarg = srcDoc;
                         let x1 = NumCast(srcDoc.x);
                         let x2 = NumCast(dstDoc.x);
-                        let x1w = NumCast(srcDoc.width, -1);
-                        let x2w = NumCast(dstDoc.width, -1);
+                        let x1w = NumCast(srcDoc.width, -1) / NumCast(srcDoc.zoomBasis, 1);
+                        let x2w = NumCast(dstDoc.width, -1) / NumCast(srcDoc.zoomBasis, 1);
                         if (x1w < 0 || x2w < 0 || i === j) { }
                         else {
                             let findBrush = (field: (Doc | Promise<Doc>)[]) => field.findIndex(brush => {
@@ -60,12 +60,12 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
                                     }
                                 };
                             }
+                            if (dstTarg.brushingDocs === undefined) dstTarg.brushingDocs = new List<Doc>();
+                            if (srcTarg.brushingDocs === undefined) srcTarg.brushingDocs = new List<Doc>();
                             let dstBrushDocs = Cast(dstTarg.brushingDocs, listSpec(Doc), []);
                             let srcBrushDocs = Cast(srcTarg.brushingDocs, listSpec(Doc), []);
-                            if (dstBrushDocs === undefined) dstTarg.brushingDocs = dstBrushDocs = new List<Doc>();
-                            else brushAction(dstBrushDocs);
-                            if (srcBrushDocs === undefined) srcTarg.brushingDocs = srcBrushDocs = new List<Doc>();
-                            else brushAction(srcBrushDocs);
+                            brushAction(dstBrushDocs);
+                            brushAction(srcBrushDocs);
                         }
                     });
                 });
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 7ccf480f3..f0ccda140 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -228,6 +228,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         if (e.key === "c" || e.key === "s" || e.key === "e" || e.key === "p") {
             this._commandExecuted = true;
             e.stopPropagation();
+            e.preventDefault();
             (e as any).propagationIsStopped = true;
             let bounds = this.Bounds;
             let selected = this.marqueeSelect();
@@ -260,25 +261,26 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
 
             if (e.key === "s" || e.key === "p") {
 
-                htmlToImage.toPng(this._mainCont.current!, { width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, quality: 0.2 }).then((dataUrl) => {
-                    selected.map(d => {
-                        this.props.removeDocument(d);
-                        d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
-                        d.y = NumCast(d.y) - bounds.top - bounds.height / 2;
-                        d.page = -1;
-                        return d;
-                    });
-                    let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
-                    summary.proto!.thumbnail = new ImageField(new URL(dataUrl));
-                    summary.proto!.templates = new List<string>([Templates.ImageOverlay(Math.min(50, bounds.width), bounds.height * Math.min(50, bounds.width) / bounds.width, "thumbnail")]);
-                    newCollection.proto!.summaryDoc = summary;
-                    selected = [newCollection];
-                    newCollection.x = bounds.left + bounds.width;
-                    //this.props.addDocument(newCollection, false);
-                    summary.proto!.summarizedDocs = new List<Doc>(selected);
-                    summary.proto!.maximizeLocation = "inTab";  // or "inPlace", or "onRight"
-                    this.props.addLiveTextDocument(summary);
+                // htmlToImage.toPng(this._mainCont.current!, { width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, quality: 0.2 }).then((dataUrl) => {
+                selected.map(d => {
+                    this.props.removeDocument(d);
+                    d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
+                    d.y = NumCast(d.y) - bounds.top - bounds.height / 2;
+                    d.page = -1;
+                    return d;
                 });
+                let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
+                // summary.proto!.thumbnail = new ImageField(new URL(dataUrl));
+                // summary.proto!.templates = new List<string>([Templates.ImageOverlay(Math.min(50, bounds.width), bounds.height * Math.min(50, bounds.width) / bounds.width, "thumbnail")]);
+                newCollection.proto!.summaryDoc = summary;
+                selected = [newCollection];
+                newCollection.x = bounds.left + bounds.width;
+                //this.props.addDocument(newCollection, false);
+                summary.proto!.summarizedDocs = new List<Doc>(selected);
+                summary.proto!.maximizeLocation = "inTab";  // or "inPlace", or "onRight"
+
+                this.props.addLiveTextDocument(summary);
+                // });
             }
             else {
                 this.props.addDocument(newCollection, false);
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 5c149af99..092ccb9b0 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -117,7 +117,7 @@ export class FieldView extends React.Component<FieldViewProps> {
         //     return <WebBox {...this.props} />
         // }
         else if (!(field instanceof Promise)) {
-            return <p>{JSON.stringify(field)}</p>;
+            return <p>{field.toString()}</p>;
         }
         else {
             return <p> {"Waiting for server..."} </p>;
-- 
cgit v1.2.3-70-g09d2


From b3f1e5f60ee4a00522d3e4b0b03495685bde006c Mon Sep 17 00:00:00 2001
From: Abdullah Ahmed <abdullah_ahmed@brown.edu>
Date: Tue, 21 May 2019 16:31:45 -0400
Subject: testing

---
 src/server/index.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/server/index.ts b/src/server/index.ts
index af99b116a..83c0bc222 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -310,6 +310,7 @@ function setField(socket: Socket, newValue: Transferable) {
     if (newValue.type === Types.Text) {
         Search.Instance.updateDocument({ id: newValue.id, data: (newValue as any).data });
         console.log("set field");
+        console.log("checking in");
     }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 2f1e56285750bcce6820ba2e1f24b7ad112b9db4 Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Tue, 21 May 2019 17:11:17 -0400
Subject: search bar ui fixes

---
 src/client/views/MainView.tsx  | 20 +++++++++++++++++++-
 src/client/views/SearchBox.tsx |  4 ++--
 2 files changed, 21 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 6169466bc..aa34a12ed 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -40,6 +40,7 @@ export class MainView extends React.Component {
     @observable private _workspacesShown: boolean = false;
     @observable public pwidth: number = 0;
     @observable public pheight: number = 0;
+    private searchbox: React.RefObject<HTMLDivElement>;
 
     @computed private get mainContainer(): Opt<Doc> {
         return FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc));
@@ -56,6 +57,7 @@ export class MainView extends React.Component {
     constructor(props: Readonly<{}>) {
         super(props);
         MainView.Instance = this;
+        this.searchbox = React.createRef();
         // causes errors to be generated when modifying an observable outside of an action
         configure({ enforceActions: "observed" });
         if (window.location.search.includes("readonly")) {
@@ -260,17 +262,33 @@ export class MainView extends React.Component {
         return [
             <button className="clear-db-button" key="clear-db" onClick={e => e.shiftKey && e.altKey && DocServer.DeleteDatabase()}>Clear Database</button>,
             <div id="toolbar" key="toolbar">
+                <button className="toolbar-button round-button" title="Search" onClick={this.toggleSearch}><FontAwesomeIcon icon="search" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /></button>
             </div >,
-            <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <SearchBox /> </div>,
+            <div ref={this.searchbox} className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <SearchBox /> </div>,
             <div className="main-buttonDiv" key="logout" style={{ bottom: '0px', right: '1px', position: 'absolute' }} ref={logoutRef}>
                 <button onClick={() => request.get(DocServer.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
         ];
 
     }
 
+    @action
+    toggleSearch = () => {
+        const sb = this.searchbox.current;
+        if (sb !== null) {
+            console.log("toggle search")
+            if (sb.style.display === "none") {
+                sb.style.display = "block";
+            }
+            else {
+                sb.style.display = "none";
+            }
+        }
+
+    }
+
     render() {
         return (
             <div id="main-div">
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 0ec1a6758..911fc8d9c 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -171,8 +171,8 @@ export class SearchBox extends React.Component {
                         <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search..."
                             className="searchBox-barChild searchBox-input" onKeyPress={this.enter}
                             style={{ width: this._resultsOpen ? "500px" : undefined }} />
-                        <button className="searchBox-barChild searchBox-filter" onClick={this.toggleFilterDisplay}>Filter</button>
-                        <FontAwesomeIcon icon="search" size="lg" className="searchBox-barChild searchBox-submit" />
+                        {/* <button className="searchBox-barChild searchBox-filter" onClick={this.toggleFilterDisplay}>Filter</button> */}
+                        {/* <FontAwesomeIcon icon="search" size="lg" className="searchBox-barChild searchBox-submit" /> */}
                     </div>
                     {this._resultsOpen ? (
                         <div className="searchBox-results">
-- 
cgit v1.2.3-70-g09d2


From 2c4026368078e2dc856c1cf4f8fe375cd30fbcdd Mon Sep 17 00:00:00 2001
From: ab <abdullah_ahmed@brown.edu>
Date: Tue, 21 May 2019 18:03:27 -0400
Subject: alt and linking

---
 src/client/util/DocumentManager.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index a5e768dcf..82776ff59 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -125,10 +125,20 @@ export class DocumentManager {
         }
         let docView = DocumentManager.Instance.getDocumentView(doc);
         if (docView) {
-            docView.props.focus(docView.props.Document);
+            console.log("navigating to linked doc...");
+            // using makecopy as a flag for splitting linked to doc to the right...can change later if needed
+            if (makeCopy) {
+                if (!contextDoc) {
+                    const actualDoc = Doc.MakeAlias(docDelegate);
+                    (dockFunc || CollectionDockingView.Instance.AddRightSplit)(actualDoc);
+                }
+            }
+            else {
+                docView.props.focus(docView.props.Document);
+            }
         } else {
             if (!contextDoc) {
-                const actualDoc = docDelegate ? (makeCopy ? Doc.MakeCopy(docDelegate) : docDelegate) : Doc.MakeDelegate(doc);
+                const actualDoc = Doc.MakeAlias(docDelegate);
                 (dockFunc || CollectionDockingView.Instance.AddRightSplit)(actualDoc);
             } else {
                 let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
-- 
cgit v1.2.3-70-g09d2


From f196645935814b7f2d3faef0da7fd6c5d46f14f0 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 18:04:16 -0400
Subject: various fixes

---
 src/client/util/SearchUtil.ts                      |  3 +-
 src/client/views/MainOverlayTextBox.tsx            |  2 +-
 .../views/collections/CollectionTreeView.scss      |  4 +-
 src/client/views/nodes/FieldView.tsx               |  2 +-
 src/client/views/nodes/KeyValuePair.tsx            |  3 +-
 .../authentication/models/current_user_utils.ts    | 46 +++++++++++-----------
 6 files changed, 32 insertions(+), 28 deletions(-)

(limited to 'src')

diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index e8eb70837..28ec8ca14 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -20,6 +20,7 @@ export namespace SearchUtil {
     export async function GetAliasesOfDocument(doc: Doc): Promise<Doc[]> {
         const proto = await Doc.GetT(doc, "proto", Doc, true);
         const protoId = (proto || doc)[Id];
-        return Search(`{!join from=id to=proto_i}id:${protoId}`, true);
+        return Search(`proto_i:"${protoId}"`, true);
+        // return Search(`{!join from=id to=proto_i}id:${protoId}`, true);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx
index 91f626737..9be408049 100644
--- a/src/client/views/MainOverlayTextBox.tsx
+++ b/src/client/views/MainOverlayTextBox.tsx
@@ -90,7 +90,7 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
                     style={{ width: `${textRect.width * s}px`, height: `${textRect.height * s}px` }}>
                     <FormattedTextBox fieldKey={this._textFieldKey} isOverlay={true} Document={FormattedTextBox.InputBoxOverlay.props.Document} isSelected={returnTrue} select={emptyFunction} isTopMost={true}
                         selectOnLoad={true} ContainingCollectionView={undefined} whenActiveChanged={emptyFunction} active={returnTrue}
-                        ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} />
+                        ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} addDocTab={emptyFunction} />
                 </div>
             </ div>;
         }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 5f82137c6..2f0329fc4 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -46,7 +46,9 @@
 
     .docContainer:hover {
         .treeViewItem-openRight {
-            display: inline;
+            display: inline-block;
+            // display: inline;
+            transform: translate(0px, -3px); //TODO Fix this
         }
     }
 
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 092ccb9b0..d3d765eed 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -35,7 +35,7 @@ export interface FieldViewProps {
     isTopMost: boolean;
     selectOnLoad: boolean;
     addDocument?: (document: Doc, allowDuplicates?: boolean) => boolean;
-    addDocTab: (document: Doc, where: string) => boolean;
+    addDocTab: (document: Doc, where: string) => void;
     removeDocument?: (document: Doc) => boolean;
     moveDocument?: (document: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean;
     ScreenToLocalTransform: () => Transform;
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 2363553df..228d07018 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,7 +1,7 @@
 import { action, observable } from 'mobx';
 import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-import { emptyFunction, returnFalse, returnZero } from '../../../Utils';
+import { emptyFunction, returnFalse, returnZero, returnTrue } from '../../../Utils';
 import { CompileScript } from "../../util/Scripting";
 import { Transform } from '../../util/Transform';
 import { EditableView } from "../EditableView";
@@ -38,6 +38,7 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
             focus: emptyFunction,
             PanelWidth: returnZero,
             PanelHeight: returnZero,
+            addDocTab: emptyFunction
         };
         let contents = <FieldView {...props} />;
         let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")";
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index aef2d3f4a..b947f5e01 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -83,29 +83,29 @@ export class CurrentUserUtils {
 
     @action static SetNorthstarCatalog(ctlog: Catalog, extras: Catalog[]) {
         CurrentUserUtils.NorthstarDBCatalog = ctlog;
-        if (ctlog && ctlog.schemas) {
-            extras.map(ex => ctlog.schemas!.push(ex));
-            return ctlog.schemas.map(async schema => {
-                let schemaDocuments: Doc[] = [];
-                let attributesToBecomeDocs = CurrentUserUtils.GetAllNorthstarColumnAttributes(schema);
-                await Promise.all(attributesToBecomeDocs.reduce((promises, attr) => {
-                    promises.push(DocServer.GetRefField(attr.displayName! + ".alias").then(action((field: Opt<Field>) => {
-                        if (field instanceof Doc) {
-                            schemaDocuments.push(field);
-                        } else {
-                            var atmod = new ColumnAttributeModel(attr);
-                            let histoOp = new HistogramOperation(schema.displayName!,
-                                new AttributeTransformationModel(atmod, AggregateFunction.None),
-                                new AttributeTransformationModel(atmod, AggregateFunction.Count),
-                                new AttributeTransformationModel(atmod, AggregateFunction.Count));
-                            schemaDocuments.push(Docs.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName! }));
-                        }
-                    })));
-                    return promises;
-                }, [] as Promise<void>[]));
-                return CurrentUserUtils._northstarSchemas.push(Docs.TreeDocument(schemaDocuments, { width: 50, height: 100, title: schema.displayName! }));
-            });
-        }
+        // if (ctlog && ctlog.schemas) {
+        //     extras.map(ex => ctlog.schemas!.push(ex));
+        //     return ctlog.schemas.map(async schema => {
+        //         let schemaDocuments: Doc[] = [];
+        //         let attributesToBecomeDocs = CurrentUserUtils.GetAllNorthstarColumnAttributes(schema);
+        //         await Promise.all(attributesToBecomeDocs.reduce((promises, attr) => {
+        //             promises.push(DocServer.GetRefField(attr.displayName! + ".alias").then(action((field: Opt<Field>) => {
+        //                 if (field instanceof Doc) {
+        //                     schemaDocuments.push(field);
+        //                 } else {
+        //                     var atmod = new ColumnAttributeModel(attr);
+        //                     let histoOp = new HistogramOperation(schema.displayName!,
+        //                         new AttributeTransformationModel(atmod, AggregateFunction.None),
+        //                         new AttributeTransformationModel(atmod, AggregateFunction.Count),
+        //                         new AttributeTransformationModel(atmod, AggregateFunction.Count));
+        //                     schemaDocuments.push(Docs.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName! }));
+        //                 }
+        //             })));
+        //             return promises;
+        //         }, [] as Promise<void>[]));
+        //         return CurrentUserUtils._northstarSchemas.push(Docs.TreeDocument(schemaDocuments, { width: 50, height: 100, title: schema.displayName! }));
+        //     });
+        // }
     }
     public static set NorthstarDBCatalog(ctlog: Catalog | undefined) { this._northstarCatalog = ctlog; }
 
-- 
cgit v1.2.3-70-g09d2


From 2845bb8a29d4592964b707d82ca3b07ca15b632c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 18:30:48 -0400
Subject: Added highlighting of target doc

---
 src/client/util/DocumentManager.ts | 3 ++-
 src/new_fields/Doc.ts              | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index a5e768dcf..94d77f467 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -116,13 +116,14 @@ export class DocumentManager {
 
     @undoBatch
     public jumpToDocument = async (docDelegate: Doc, makeCopy: boolean = true, dockFunc?: (doc: Doc) => void): Promise<void> => {
-        let doc = docDelegate.proto ? docDelegate.proto : docDelegate;
+        let doc = Doc.GetProto(docDelegate);
         const page = NumCast(doc.page, undefined);
         const contextDoc = await Cast(doc.annotationOn, Doc);
         if (contextDoc) {
             const curPage = NumCast(contextDoc.curPage, page);
             if (page !== curPage) contextDoc.curPage = page;
         }
+        docDelegate.libraryBrush = true;
         let docView = DocumentManager.Instance.getDocumentView(doc);
         if (docView) {
             docView.props.focus(docView.props.Document);
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index b0237d04d..793a83750 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -194,7 +194,7 @@ export namespace Doc {
 
     // gets the document's prototype or returns the document if it is a prototype
     export function GetProto(doc: Doc) {
-        return Object.getOwnPropertyNames(doc).indexOf("isPrototype") === -1 ? doc.proto! : doc;
+        return Doc.GetT(doc, "isPrototype", "boolean", true) ? doc : doc.proto!;
     }
 
 
-- 
cgit v1.2.3-70-g09d2


From 3020cfcf20d187c976a7f386a95bec0c41cba06b Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 18:35:04 -0400
Subject: fixes

---
 src/client/util/DocumentManager.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 94d77f467..fefd3a972 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -123,16 +123,18 @@ export class DocumentManager {
             const curPage = NumCast(contextDoc.curPage, page);
             if (page !== curPage) contextDoc.curPage = page;
         }
-        docDelegate.libraryBrush = true;
         let docView = DocumentManager.Instance.getDocumentView(doc);
         if (docView) {
+            docView.props.Document.libraryBrush = true;
             docView.props.focus(docView.props.Document);
         } else {
             if (!contextDoc) {
                 const actualDoc = docDelegate ? (makeCopy ? Doc.MakeCopy(docDelegate) : docDelegate) : Doc.MakeDelegate(doc);
+                actualDoc.libraryBrush = true;
                 (dockFunc || CollectionDockingView.Instance.AddRightSplit)(actualDoc);
             } else {
                 let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
+                docDelegate.libraryBrush = true;
                 if (contextView) {
                     contextDoc.panTransformType = "Ease";
                     contextView.props.focus(contextDoc);
-- 
cgit v1.2.3-70-g09d2


From 72fae9407783a6d17d8d5e202ae0a8d379f57da7 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 19:12:10 -0400
Subject: Changes to DocumentManager

---
 src/client/util/DocumentManager.ts | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index cf470a015..369becccb 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -123,30 +123,20 @@ export class DocumentManager {
             const curPage = NumCast(contextDoc.curPage, page);
             if (page !== curPage) contextDoc.curPage = page;
         }
-        let docView = DocumentManager.Instance.getDocumentView(doc);
-        if (docView) {
-            console.log("navigating to linked doc...");
-            // using makecopy as a flag for splitting linked to doc to the right...can change later if needed
-            if (makeCopy) {
-                if (!contextDoc) {
-                    const actualDoc = Doc.MakeAlias(docDelegate);
-                    actualDoc.libraryBrush = true;
-                    (dockFunc || CollectionDockingView.Instance.AddRightSplit)(actualDoc);
-                }
-            }
-            else {
-                docView.props.Document.libraryBrush = true;
-                docView.props.focus(docView.props.Document);
-            }
+        let docView: DocumentView | null;
+        // using makecopy as a flag for splitting linked to doc to the right...can change later if needed
+        if (!makeCopy && (docView = DocumentManager.Instance.getDocumentView(doc))) {
+            docView.props.Document.libraryBrush = true;
+            docView.props.focus(docView.props.Document);
         } else {
             if (!contextDoc) {
                 const actualDoc = Doc.MakeAlias(docDelegate);
-
+                actualDoc.libraryBrush = true;
                 (dockFunc || CollectionDockingView.Instance.AddRightSplit)(actualDoc);
             } else {
-                let contextView = DocumentManager.Instance.getDocumentView(contextDoc);
+                let contextView: DocumentView | null;
                 docDelegate.libraryBrush = true;
-                if (contextView) {
+                if (!makeCopy && (contextView = DocumentManager.Instance.getDocumentView(contextDoc))) {
                     contextDoc.panTransformType = "Ease";
                     contextView.props.focus(contextDoc);
                 } else {
-- 
cgit v1.2.3-70-g09d2


From 1f2b6f2ff438be8ea914a431b0efa8198ec23d96 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 19:16:07 -0400
Subject: Changes

---
 src/client/views/MainView.tsx | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index aa34a12ed..af224747d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -40,8 +40,6 @@ export class MainView extends React.Component {
     @observable private _workspacesShown: boolean = false;
     @observable public pwidth: number = 0;
     @observable public pheight: number = 0;
-    private searchbox: React.RefObject<HTMLDivElement>;
-
     @computed private get mainContainer(): Opt<Doc> {
         return FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc));
     }
@@ -57,7 +55,6 @@ export class MainView extends React.Component {
     constructor(props: Readonly<{}>) {
         super(props);
         MainView.Instance = this;
-        this.searchbox = React.createRef();
         // causes errors to be generated when modifying an observable outside of an action
         configure({ enforceActions: "observed" });
         if (window.location.search.includes("readonly")) {
@@ -267,26 +264,17 @@ export class MainView extends React.Component {
                 <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><FontAwesomeIcon icon="pen-nib" size="sm" /></button>
             </div >,
-            <div ref={this.searchbox} className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <SearchBox /> </div>,
+            this.isSearchVisible ? <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <SearchBox /> </div> : null,
             <div className="main-buttonDiv" key="logout" style={{ bottom: '0px', right: '1px', position: 'absolute' }} ref={logoutRef}>
                 <button onClick={() => request.get(DocServer.prepend(RouteStore.logout), emptyFunction)}>Log Out</button></div>
         ];
 
     }
 
+    @observable isSearchVisible = false;
     @action
     toggleSearch = () => {
-        const sb = this.searchbox.current;
-        if (sb !== null) {
-            console.log("toggle search")
-            if (sb.style.display === "none") {
-                sb.style.display = "block";
-            }
-            else {
-                sb.style.display = "none";
-            }
-        }
-
+        this.isSearchVisible = !this.isSearchVisible;
     }
 
     render() {
-- 
cgit v1.2.3-70-g09d2


From b08e28ac279c0199d7f828d05e6e346865579592 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 19:44:27 -0400
Subject: Fixed image upload

---
 src/mobile/ImageUpload.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 1f9e160ce..690937339 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -20,12 +20,15 @@ import { List } from '../new_fields/List';
 //     }
 // }
 
-const onFileLoad = async (file: any) => {
+const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
+    file.persist();
+    await Docs.initProtos();
     let imgPrev = document.getElementById("img_preview");
     if (imgPrev) {
-        let files: File[] = file.target.files;
-        if (files.length !== 0) {
+        let files: FileList | null = file.target.files;
+        if (files && files.length !== 0) {
             console.log(files[0]);
+            const name = files[0].name;
             let formData = new FormData();
             formData.append("file", files[0]);
 
@@ -37,7 +40,7 @@ const onFileLoad = async (file: any) => {
             const json = await res.json();
             json.map(async (file: any) => {
                 let path = window.location.origin + file;
-                var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200 });
+                var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
 
                 const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
                 if (!res) {
-- 
cgit v1.2.3-70-g09d2


From ab001ffd9749814c3f0b0f30e9f86f65e2f8ac0c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 21 May 2019 20:49:49 -0400
Subject: "Rebased" Stanley's image upload changes

---
 src/client/documents/Documents.ts                  |  3 ++
 src/client/views/Main.scss                         | 15 ++++++
 src/client/views/MainView.tsx                      | 33 ++++++++++---
 .../views/collections/CollectionBaseView.tsx       |  1 +
 .../views/collections/CollectionStackingView.scss  | 44 ++++++++++++++++++
 .../views/collections/CollectionStackingView.tsx   | 54 ++++++++++++++++++++++
 src/client/views/collections/CollectionView.tsx    |  3 ++
 src/mobile/ImageUpload.scss                        | 21 ++++++++-
 src/mobile/ImageUpload.tsx                         |  1 +
 .../authentication/models/current_user_utils.ts    |  2 +-
 10 files changed, 168 insertions(+), 9 deletions(-)
 create mode 100644 src/client/views/collections/CollectionStackingView.scss
 create mode 100644 src/client/views/collections/CollectionStackingView.tsx

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 3d65826a9..b17544229 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -292,6 +292,9 @@ export namespace Docs {
     export function TreeDocument(documents: Array<Doc>, options: DocumentOptions) {
         return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Tree });
     }
+    export function StackingDocument(documents: Array<Doc>, options: DocumentOptions) {
+        return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Stacking });
+    }
     export function DockDocument(documents: Array<Doc>, config: string, options: DocumentOptions, id?: string) {
         return CreateInstance(collProto, new List(documents), { ...options, viewType: CollectionViewType.Docking, dockingConfig: config }, id);
     }
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index d63b0147b..302c49c10 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -97,6 +97,21 @@ button:hover {
     right: 0px;
 }
 
+.main-notifs-badge {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    color: white;
+    background: #f44b42;
+    font-weight: 300;
+    border-radius: 100%;
+    width: 25px;
+    height: 25px;
+    text-align: center;
+    padding-top: 4px;
+    font-size: 12px;
+}
+
 //toolbar stuff
 #toolbar {
     position: absolute;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index af224747d..1d491d11f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt } from '@fortawesome/free-solid-svg-icons';
+import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt, faBell } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, runInAction, trace } from 'mobx';
 import { observer } from 'mobx-react';
@@ -25,7 +25,7 @@ import { DocumentView } from './nodes/DocumentView';
 import { PreviewCursor } from './PreviewCursor';
 import { SearchBox } from './SearchBox';
 import { SelectionManager } from '../util/SelectionManager';
-import { FieldResult, Field, Doc, Opt } from '../../new_fields/Doc';
+import { FieldResult, Field, Doc, Opt, DocListCast } from '../../new_fields/Doc';
 import { Cast, FieldValue, StrCast } from '../../new_fields/Types';
 import { DocServer } from '../DocServer';
 import { listSpec } from '../../new_fields/Schema';
@@ -137,12 +137,14 @@ export class MainView extends React.Component {
             // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
             setTimeout(() => {
                 this.openWorkspace(mainDoc);
-                let pendingDocument = Docs.SchemaDocument(["title"], [], { title: "New Mobile Uploads" });
-                mainDoc.optionalRightCollection = pendingDocument;
+                // let pendingDocument = Docs.StackingDocument([], { title: "New Mobile Uploads" });
+                // mainDoc.optionalRightCollection = pendingDocument;
             }, 0);
         }
     }
 
+    @observable _notifsCol: Opt<Doc>;
+
     @action
     openWorkspace = async (doc: Doc, fromHistory = false) => {
         CurrentUserUtils.MainDocId = doc[Id];
@@ -153,12 +155,19 @@ export class MainView extends React.Component {
         setTimeout(async () => {
             if (col) {
                 const l = Cast(col.data, listSpec(Doc));
-                if (l && l.length > 0) {
-                    CollectionDockingView.Instance.AddRightSplit(col);
+                if (l) {
+                    runInAction(() => this._notifsCol = col);
                 }
             }
         }, 100);
     }
+
+    openNotifsCol = () => {
+        if (this._notifsCol) {
+            CollectionDockingView.Instance.AddRightSplit(this._notifsCol);
+        }
+    }
+
     @action
     onResize = (r: any) => {
         this.pwidth = r.offset.width;
@@ -254,11 +263,23 @@ export class MainView extends React.Component {
     /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */
     @computed
     get miscButtons() {
+        const length = this._notifsCol ? DocListCast(this._notifsCol.data).length : 0;
+        const notifsRef = React.createRef<HTMLDivElement>();
+        const dragNotifs = action(() => this._notifsCol!);
         let logoutRef = React.createRef<HTMLDivElement>();
 
         return [
             <button className="clear-db-button" key="clear-db" onClick={e => e.shiftKey && e.altKey && DocServer.DeleteDatabase()}>Clear Database</button>,
             <div id="toolbar" key="toolbar">
+                <div ref={notifsRef}>
+                    <button className="toolbar-button round-button" title="Notifs"
+                        onClick={this.openNotifsCol} onPointerDown={this._notifsCol ? SetupDrag(notifsRef, dragNotifs) : emptyFunction}>
+                        <FontAwesomeIcon icon={faBell} size="sm" />
+                    </button>
+                    <div className="main-notifs-badge" style={length > 0 ? { "display": "initial" } : { "display": "none" }}>
+                        {length}
+                    </div>
+                </div>
                 <button className="toolbar-button round-button" title="Search" onClick={this.toggleSearch}><FontAwesomeIcon icon="search" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 5686ccfef..2bccde241 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -16,6 +16,7 @@ export enum CollectionViewType {
     Schema,
     Docking,
     Tree,
+    Stacking
 }
 
 export interface CollectionRenderProps {
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
new file mode 100644
index 000000000..803e680e5
--- /dev/null
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -0,0 +1,44 @@
+@import "../globalCssVariables";
+
+.collectionStackingView {
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    overflow-y: scroll;
+    min-width: 250px;
+    border-width: 0;
+    box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
+    border-color: $light-color-secondary;
+    border-style: solid;
+    border-radius: 0 0 $border-radius $border-radius;
+    box-sizing: border-box;
+
+    .collectionStackingView-docView-container {
+        width: 45%;
+        margin: 5% 2.5%;
+        padding-left: 2.5%;
+        height: auto;
+    }
+
+    .collectionStackingView-flexCont {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .collectionStackingView-description {
+        font-size: 100%;
+        margin-bottom: 1vw;
+        padding: 10px;
+        height: 2vw;
+        width: 100%;
+        font-family: $sans-serif;
+        background: $dark-color;
+        color: $light-color;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
new file mode 100644
index 000000000..a1cb73123
--- /dev/null
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -0,0 +1,54 @@
+import React = require("react");
+import { observer } from "mobx-react";
+import { CollectionSubView } from "./CollectionSubView";
+import Measure from "react-measure";
+import { Doc, WidthSym, HeightSym } from "../../../new_fields/Doc";
+import { DocumentView } from "../nodes/DocumentView";
+import { Transform } from "../../util/Transform";
+import { emptyFunction, returnOne } from "../../../Utils";
+import "./CollectionStackingView.scss";
+import { runInAction, action, observable, computed } from "mobx";
+import { StrCast } from "../../../new_fields/Types";
+
+@observer
+export class CollectionStackingView extends CollectionSubView(doc => doc) {
+    getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform();
+
+    @action
+    moveDocument = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => {
+        this.props.removeDocument(doc);
+        addDocument(doc);
+        return true;
+    }
+
+    render() {
+        const docs = this.childDocs;
+        return (
+            <div className="collectionStackingView" onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
+                <div className="collectionStackingView-description">{StrCast(this.props.Document.documentText, StrCast(this.props.Document.title, "stacking collection"))}</div>
+                <div className="collectionStackingView-flexCont">
+                    {docs.map(d => {
+                        return (<div className="collectionStackingView-docView-container">
+                            <DocumentView Document={d}
+                                addDocument={this.props.addDocument} removeDocument={this.props.removeDocument}
+                                moveDocument={this.moveDocument}
+                                ContainingCollectionView={this.props.CollectionView}
+                                isTopMost={false}
+                                ScreenToLocalTransform={this.getPreviewTransform}
+                                focus={emptyFunction}
+                                ContentScaling={returnOne}
+                                PanelWidth={d[WidthSym]}
+                                PanelHeight={d[HeightSym]}
+                                selectOnLoad={false}
+                                parentActive={this.props.active}
+                                addDocTab={this.props.addDocTab}
+                                bringToFront={emptyFunction}
+                                toggleMinimized={emptyFunction}
+                                whenActiveChanged={this.props.active} />
+                        </div>);
+                    })}
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index bfdef8e8c..39c8af4ab 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -12,6 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionTreeView } from "./CollectionTreeView";
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
+import { CollectionStackingView } from './CollectionStackingView';
 export const COLLECTION_BORDER_WIDTH = 2;
 
 library.add(faTh);
@@ -31,6 +32,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
             case CollectionViewType.Schema: return (<CollectionSchemaView {...props} CollectionView={this} />);
             case CollectionViewType.Docking: return (<CollectionDockingView {...props} CollectionView={this} />);
             case CollectionViewType.Tree: return (<CollectionTreeView {...props} CollectionView={this} />);
+            case CollectionViewType.Stacking: return (<CollectionStackingView {...props} CollectionView={this} />);
             case CollectionViewType.Freeform:
             default:
                 return (<CollectionFreeFormView {...props} CollectionView={this} />);
@@ -48,6 +50,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
             }
             ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "th-list" });
             ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
+            ContextMenu.Instance.addItem({ description: "Stacking", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Stacking), icon: "th-list" });
         }
     }
 
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index d0b7d4e41..65305dd04 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -1,7 +1,13 @@
+@import "../client/views/globalCssVariables.scss";
+
 .imgupload_cont {
-    height: 100vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
     width: 100vw;
-    align-content: center;
+    height: 100vh;
+
     .button_file {
         text-align: center;
         height: 50%;
@@ -10,4 +16,15 @@
         color: grey;
         font-size: 3em;
     }
+
+    .upload_label {
+        width: 80vw;
+        height: 40vh;
+        background: $dark-color;
+        font-size: 10vw;
+        font-family: $sans-serif;
+        text-align: center;
+        padding-top: 20vh;
+        color: white;
+    }
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 690937339..84bbfeb14 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -71,6 +71,7 @@ const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
 ReactDOM.render((
     <div className="imgupload_cont">
         {/* <button className = "button_file"  = {onPointerDown}> Open Image </button> */}
+        <label htmlFor="input_image_file" className="upload_label">Upload an Image</label>
         <input type="file" accept="image/*" onChange={onFileLoad} className="input_file" id="input_image_file"></input>
         <img id="img_preview" src=""></img>
         <div id="message" />
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index b947f5e01..e85aa2c74 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -37,7 +37,7 @@ export class CurrentUserUtils {
         doc.title = this.email;
         doc.data = new List<Doc>();
         doc.excludeFromLibrary = true;
-        doc.optionalRightCollection = Docs.SchemaDocument(["title"], [], { title: "Pending documents" });
+        doc.optionalRightCollection = Docs.StackingDocument([], { title: "New mobile uploads" });
         // doc.library = Docs.TreeDocument([doc], { title: `Library: ${CurrentUserUtils.email}` });
         // (doc.library as Doc).excludeFromLibrary = true;
         return doc;
-- 
cgit v1.2.3-70-g09d2


From b1de1ab5757330950fe0f79749f098ca2a9f14e0 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 21 May 2019 21:13:58 -0400
Subject: fix to annotations/controls for videos?

---
 src/client/views/InkingCanvas.scss                                  | 6 ++++++
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index 2c550051c..8277ff785 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -2,6 +2,12 @@
 
 .inkingCanvas {
     opacity:0.99;
+    .jsx-parser {
+        position:absolute;
+        z-index: -1;
+        width:100%;
+        height:100%;
+    }
 }
 .inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-noSelect, .inkingCanvas-canSelect {
     position: absolute;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 7a0a02318..ebe1df4de 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -321,7 +321,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
     }
 
-    private childViews = () => [...this.views, <CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />];
+    private childViews = () => [<CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />, ...this.views];
     render() {
         const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`;
         const easing = () => this.props.Document.panTransformType === "Ease";
-- 
cgit v1.2.3-70-g09d2


From d3ed10ff3ff9f2e7dec577d81a98318c941c9bdc Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 21 May 2019 22:49:23 -0400
Subject: fixed problems with link drawing to doc centers, and wraparound
 panning caused by zoomBasis

---
 .../CollectionFreeFormLinkView.tsx                 |  8 ++++----
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 22 ++++++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 63d2f7642..f646c7bde 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -40,10 +40,10 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         let l = this.props.LinkDocs;
         let a = this.props.A;
         let b = this.props.B;
-        let x1 = NumCast(a.x) + (BoolCast(a.isMinimized, false) ? 5 : NumCast(a.width) / 2);
-        let y1 = NumCast(a.y) + (BoolCast(a.isMinimized, false) ? 5 : NumCast(a.height) / 2);
-        let x2 = NumCast(b.x) + (BoolCast(b.isMinimized, false) ? 5 : NumCast(b.width) / 2);
-        let y2 = NumCast(b.y) + (BoolCast(b.isMinimized, false) ? 5 : NumCast(b.height) / 2);
+        let x1 = NumCast(a.x) + (BoolCast(a.isMinimized, false) ? 5 : NumCast(a.width) / NumCast(a.zoomBasis, 1) / 2);
+        let y1 = NumCast(a.y) + (BoolCast(a.isMinimized, false) ? 5 : NumCast(a.height) / NumCast(a.zoomBasis, 1) / 2);
+        let x2 = NumCast(b.x) + (BoolCast(b.isMinimized, false) ? 5 : NumCast(b.width) / NumCast(b.zoomBasis, 1) / 2);
+        let y2 = NumCast(b.y) + (BoolCast(b.isMinimized, false) ? 5 : NumCast(b.height) / NumCast(b.zoomBasis, 1) / 2);
         return (
             <>
                 <line key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkLine"
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ebe1df4de..778071126 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -135,14 +135,14 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
             if (!this.isAnnotationOverlay) {
                 let minx = docs.length ? NumCast(docs[0].x) : 0;
-                let maxx = docs.length ? NumCast(docs[0].width) / NumCast(docs[0].zoomBasis) + minx : minx;
+                let maxx = docs.length ? NumCast(docs[0].width) / NumCast(docs[0].zoomBasis, 1) + minx : minx;
                 let miny = docs.length ? NumCast(docs[0].y) : 0;
-                let maxy = docs.length ? NumCast(docs[0].height) / NumCast(docs[0].zoomBasis) + miny : miny;
+                let maxy = docs.length ? NumCast(docs[0].height) / NumCast(docs[0].zoomBasis, 1) + miny : miny;
                 let ranges = docs.filter(doc => doc).reduce((range, doc) => {
                     let x = NumCast(doc.x);
-                    let xe = x + NumCast(doc.width) / NumCast(doc.zoomBasis);
+                    let xe = x + NumCast(doc.width) / NumCast(doc.zoomBasis, 1);
                     let y = NumCast(doc.y);
-                    let ye = y + NumCast(doc.height) / NumCast(doc.zoomBasis);
+                    let ye = y + NumCast(doc.height) / NumCast(doc.zoomBasis, 1);
                     return [[range[0][0] > x ? x : range[0][0], range[0][1] < xe ? xe : range[0][1]],
                     [range[1][0] > y ? y : range[1][0], range[1][1] < ye ? ye : range[1][1]]];
                 }, [[minx, maxx], [miny, maxy]]);
@@ -155,12 +155,14 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                     });
                 }
 
-                let panelwidth = this._pwidth / this.zoomScaling() / 2;
-                let panelheight = this._pheight / this.zoomScaling() / 2;
-                if (x - dx < ranges[0][0] - panelwidth) x = ranges[0][1] + panelwidth + dx;
-                if (x - dx > ranges[0][1] + panelwidth) x = ranges[0][0] - panelwidth + dx;
-                if (y - dy < ranges[1][0] - panelheight) y = ranges[1][1] + panelheight + dy;
-                if (y - dy > ranges[1][1] + panelheight) y = ranges[1][0] - panelheight + dy;
+                let panelDim = this.props.ScreenToLocalTransform().transformDirection(this._pwidth / this.zoomScaling(),
+                    this._pheight / this.zoomScaling());
+                let panelwidth = panelDim[0];
+                let panelheight = panelDim[1];
+                if (ranges[0][0] - dx > (this.panX() + panelwidth / 2)) x = ranges[0][1] + panelwidth / 2;
+                if (ranges[0][1] - dx < (this.panX() - panelwidth / 2)) x = ranges[0][0] - panelwidth / 2;
+                if (ranges[1][0] - dy > (this.panY() + panelheight / 2)) y = ranges[1][1] + panelheight / 2;
+                if (ranges[1][1] - dy < (this.panY() - panelheight / 2)) y = ranges[1][0] - panelheight / 2;
             }
             this.setPan(x - dx, y - dy);
             this._lastX = e.pageX;
-- 
cgit v1.2.3-70-g09d2


From 54e41cfe7f3538e9cc4b1871a6692b38d21c8c46 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 22 May 2019 10:58:19 -0400
Subject: added shift+ctrl dragging of images natively.  changed z-index &
 ordering to allow videos to swho controls & ink. fixed dragging schema docs
 to copy

---
 src/client/documents/Documents.ts                  |  5 +++--
 src/client/views/InkingCanvas.scss                 |  1 -
 src/client/views/Main.scss                         |  2 +-
 .../views/collections/CollectionSchemaView.tsx     | 12 +++++------
 .../views/collections/CollectionVideoView.scss     |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.scss |  1 +
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx | 14 +++++++-----
 src/client/views/nodes/ImageBox.tsx                | 25 ++++++++++++----------
 9 files changed, 36 insertions(+), 28 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b17544229..323534b2b 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -60,6 +60,7 @@ export interface DocumentOptions {
     borderRounding?: number;
     schemaColumns?: List<string>;
     dockingConfig?: string;
+    dbDoc?: Doc;
     // [key: string]: Opt<Field>;
 }
 const delegateKeys = ["x", "y", "width", "height", "panX", "panY"];
@@ -241,7 +242,7 @@ export namespace Docs {
         return CreateInstance(pdfProto, new PdfField(new URL(url)), options);
     }
 
-    export async function DBDocument(url: string, options: DocumentOptions = {}) {
+    export async function DBDocument(url: string, options: DocumentOptions = {}, columnOptions: DocumentOptions = {}) {
         let schemaName = options.title ? options.title : "-no schema-";
         let ctlog = await Gateway.Instance.GetSchema(url, schemaName);
         if (ctlog && ctlog.schemas) {
@@ -263,7 +264,7 @@ export namespace Docs {
                             new AttributeTransformationModel(atmod, AggregateFunction.None),
                             new AttributeTransformationModel(atmod, AggregateFunction.Count),
                             new AttributeTransformationModel(atmod, AggregateFunction.Count));
-                        docs.push(Docs.HistogramDocument(histoOp, { width: 200, height: 200, title: attr.displayName! }));
+                        docs.push(Docs.HistogramDocument(histoOp, { ...columnOptions, width: 200, height: 200, title: attr.displayName! }));
                     }
                 }));
             });
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index 8277ff785..8bcaf41dd 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -4,7 +4,6 @@
     opacity:0.99;
     .jsx-parser {
         position:absolute;
-        z-index: -1;
         width:100%;
         height:100%;
     }
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 302c49c10..385298e18 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -40,7 +40,7 @@ p {
 
 ::-webkit-scrollbar {
     -webkit-appearance: none;
-    height: 5px;
+    height: 10px;
     width: 10px;
 }
 
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index bfd70ceae..b793447ff 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -76,9 +76,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 
     onHeaderDrag = (columnName: string) => {
-        let dbDoc = Cast(this.props.Document.DBDoc, Doc);
-        if (dbDoc instanceof Doc) {
-            let columnDocs = DocListCast(dbDoc.data);
+        let schemaDoc = Cast(this.props.Document.schemaDoc, Doc);
+        if (schemaDoc instanceof Doc) {
+            let columnDocs = DocListCast(schemaDoc.data);
             if (columnDocs) {
                 let ddoc = columnDocs.find(doc => doc.title === columnName);
                 if (ddoc)
@@ -109,7 +109,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         let reference = React.createRef<HTMLDivElement>();
         let onItemDown = (e: React.PointerEvent) =>
             (this.props.CollectionView.props.isSelected() ?
-                SetupDrag(reference, () => props.Document, this.props.moveDocument)(e) : undefined);
+                SetupDrag(reference, () => props.Document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e) : undefined);
         let applyToDoc = (doc: Doc, run: (args?: { [name: string]: any }) => any) => {
             const res = run({ this: doc });
             if (!res.success) return false;
@@ -251,10 +251,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         let dbName = StrCast(this.props.Document.title);
         let res = await Gateway.Instance.PostSchema(csv, dbName);
         if (self.props.CollectionView.props.addDocument) {
-            let schemaDoc = await Docs.DBDocument("https://www.cs.brown.edu/" + dbName, { title: dbName });
+            let schemaDoc = await Docs.DBDocument("https://www.cs.brown.edu/" + dbName, { title: dbName }, { dbDoc: self.props.Document });
             if (schemaDoc) {
                 //self.props.CollectionView.props.addDocument(schemaDoc, false);
-                self.props.Document.DBDoc = schemaDoc;
+                self.props.Document.schemaDoc = schemaDoc;
             }
         }
     }
diff --git a/src/client/views/collections/CollectionVideoView.scss b/src/client/views/collections/CollectionVideoView.scss
index db8b84832..9d2c23d3e 100644
--- a/src/client/views/collections/CollectionVideoView.scss
+++ b/src/client/views/collections/CollectionVideoView.scss
@@ -5,7 +5,7 @@
     position: inherit;
     top: 0;
     left:0;
- 
+    z-index: -1;
 }
 .collectionVideoView-time{
     color : white;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 063c9e2cf..8557a3db4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -63,6 +63,7 @@
     border-radius: $border-radius;
     box-sizing: border-box;
     position:absolute;
+    z-index: -1;
     .marqueeView {
         overflow: hidden;
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 778071126..8be0766eb 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -323,7 +323,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
     }
 
-    private childViews = () => [<CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />, ...this.views];
+    private childViews = () => [...this.views, <CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />];
     render() {
         const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`;
         const easing = () => this.props.Document.panTransformType === "Ease";
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index f0ccda140..6cdb117ff 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -99,19 +99,23 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     let docList: Doc[] = [];
                     let groupAttr: string | number = "";
                     let rowProto = new Doc();
+                    rowProto.title = rowProto.Id;
                     rowProto.width = 200;
+                    rowProto.isPrototype = true;
                     for (let i = 1; i < ns.length - 1; i++) {
                         let values = ns[i].split("\t");
                         if (values.length === 1 && columns.length > 1) {
                             groupAttr = values[0];
                             continue;
                         }
-                        let doc = Doc.MakeDelegate(rowProto);
-                        columns.forEach((col, i) => doc[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined));
+                        let docDataProto = Doc.MakeDelegate(rowProto);
+                        docDataProto.isPrototype = true;
+                        columns.forEach((col, i) => docDataProto[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined));
                         if (groupAttr) {
-                            doc._group = groupAttr;
+                            docDataProto._group = groupAttr;
                         }
-                        doc.title = i.toString();
+                        docDataProto.title = i.toString();
+                        let doc = Doc.MakeDelegate(docDataProto);
                         doc.width = 200;
                         docList.push(doc);
                     }
@@ -269,7 +273,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     d.page = -1;
                     return d;
                 });
-                let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "yellow", title: "-summary-" });
+                let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "#e2ad32" /* yellow */, title: "-summary-" });
                 // summary.proto!.thumbnail = new ImageField(new URL(dataUrl));
                 // summary.proto!.templates = new List<string>([Templates.ImageOverlay(Math.min(50, bounds.width), bounds.height * Math.min(50, bounds.width) / bounds.width, "thumbnail")]);
                 newCollection.proto!.summaryDoc = summary;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d9d964ee9..71bda6fea 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -93,16 +93,19 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     }
 
     onPointerDown = (e: React.PointerEvent): void => {
-        if (Date.now() - this._lastTap < 300) {
-            if (e.buttons === 1) {
-                this._downX = e.clientX;
-                this._downY = e.clientY;
-                document.removeEventListener("pointerup", this.onPointerUp);
-                document.addEventListener("pointerup", this.onPointerUp);
-            }
-        } else {
-            this._lastTap = Date.now();
-        }
+        if (e.shiftKey && e.ctrlKey)
+            e.stopPropagation();
+
+        // if (Date.now() - this._lastTap < 300) {
+        //     if (e.buttons === 1) {
+        //         this._downX = e.clientX;
+        //         this._downY = e.clientY;
+        //         document.removeEventListener("pointerup", this.onPointerUp);
+        //         document.addEventListener("pointerup", this.onPointerUp);
+        //     }
+        // } else {
+        //     this._lastTap = Date.now();
+        // }
     }
     @action
     onPointerUp = (e: PointerEvent): void => {
@@ -204,7 +207,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
         return (
             <div id={id} className={`imageBox-cont${interactive}`}
-                // onPointerDown={this.onPointerDown}
+                onPointerDown={this.onPointerDown}
                 onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}>
                 <img id={id}
                     key={this._smallRetryCount + (this._mediumRetryCount << 4) + (this._largeRetryCount << 8)} // force cache to update on retrys
-- 
cgit v1.2.3-70-g09d2


From dcfbe047add9768f21d84b06a3ed45e11295a15f Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 22 May 2019 11:07:20 -0400
Subject: fixed presentation view link follow default.

---
 src/client/util/DocumentManager.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 369becccb..f113ff1d7 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -115,7 +115,7 @@ export class DocumentManager {
     }
 
     @undoBatch
-    public jumpToDocument = async (docDelegate: Doc, makeCopy: boolean = true, dockFunc?: (doc: Doc) => void): Promise<void> => {
+    public jumpToDocument = async (docDelegate: Doc, forceDockFunc: boolean = false, dockFunc?: (doc: Doc) => void): Promise<void> => {
         let doc = Doc.GetProto(docDelegate);
         const page = NumCast(doc.page, undefined);
         const contextDoc = await Cast(doc.annotationOn, Doc);
@@ -124,8 +124,8 @@ export class DocumentManager {
             if (page !== curPage) contextDoc.curPage = page;
         }
         let docView: DocumentView | null;
-        // using makecopy as a flag for splitting linked to doc to the right...can change later if needed
-        if (!makeCopy && (docView = DocumentManager.Instance.getDocumentView(doc))) {
+        // using forceDockFunc as a flag for splitting linked to doc to the right...can change later if needed
+        if (!forceDockFunc && (docView = DocumentManager.Instance.getDocumentView(doc))) {
             docView.props.Document.libraryBrush = true;
             docView.props.focus(docView.props.Document);
         } else {
@@ -136,7 +136,7 @@ export class DocumentManager {
             } else {
                 let contextView: DocumentView | null;
                 docDelegate.libraryBrush = true;
-                if (!makeCopy && (contextView = DocumentManager.Instance.getDocumentView(contextDoc))) {
+                if (!forceDockFunc && (contextView = DocumentManager.Instance.getDocumentView(contextDoc))) {
                     contextDoc.panTransformType = "Ease";
                     contextView.props.focus(contextDoc);
                 } else {
-- 
cgit v1.2.3-70-g09d2


From 4b0e534e49b36c44e8a3f295bdfd5e3c90a6c612 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 22 May 2019 11:29:24 -0400
Subject: added summary w/ image using capital S instead of 's'

---
 .../collections/collectionFreeForm/MarqueeView.tsx | 41 +++++++++++++++++-----
 1 file changed, 33 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 6cdb117ff..f898c10d2 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -17,6 +17,9 @@ import { InkField, StrokeData } from "../../../../new_fields/InkField";
 import { List } from "../../../../new_fields/List";
 import { ImageField } from "../../../../new_fields/URLField";
 import { Template, Templates } from "../../Templates";
+import { SearchBox } from "../../SearchBox";
+import { DocServer } from "../../../DocServer";
+import { Id } from "../../../../new_fields/FieldSymbols";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -229,7 +232,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             this.cleanupInteractions(false);
             e.stopPropagation();
         }
-        if (e.key === "c" || e.key === "s" || e.key === "e" || e.key === "p") {
+        if (e.key === "c" || e.key === "s" || e.key === "S" || e.key === "e" || e.key === "p") {
             this._commandExecuted = true;
             e.stopPropagation();
             e.preventDefault();
@@ -259,13 +262,11 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 width: bounds.width * zoomBasis,
                 height: bounds.height * zoomBasis,
                 ink: inkData ? new InkField(this.marqueeInkSelect(inkData)) : undefined,
-                title: e.key === "s" ? "-summary-" : e.key === "p" ? "-summary-" : "a nested collection",
+                title: e.key === "s" || e.key === "S" ? "-summary-" : e.key === "p" ? "-summary-" : "a nested collection",
             });
             this.marqueeInkDelete(inkData);
 
-            if (e.key === "s" || e.key === "p") {
-
-                // htmlToImage.toPng(this._mainCont.current!, { width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, quality: 0.2 }).then((dataUrl) => {
+            if (e.key === "s") {
                 selected.map(d => {
                     this.props.removeDocument(d);
                     d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
@@ -274,17 +275,41 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     return d;
                 });
                 let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "#e2ad32" /* yellow */, title: "-summary-" });
-                // summary.proto!.thumbnail = new ImageField(new URL(dataUrl));
-                // summary.proto!.templates = new List<string>([Templates.ImageOverlay(Math.min(50, bounds.width), bounds.height * Math.min(50, bounds.width) / bounds.width, "thumbnail")]);
                 newCollection.proto!.summaryDoc = summary;
                 selected = [newCollection];
                 newCollection.x = bounds.left + bounds.width;
-                //this.props.addDocument(newCollection, false);
                 summary.proto!.summarizedDocs = new List<Doc>(selected);
                 summary.proto!.maximizeLocation = "inTab";  // or "inPlace", or "onRight"
 
                 this.props.addLiveTextDocument(summary);
                 // });
+            } else if (e.key === "S") {
+                await htmlToImage.toPng(this._mainCont.current!, { width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, quality: 0.2 }).then((dataUrl) => {
+                    selected.map(d => {
+                        this.props.removeDocument(d);
+                        d.x = NumCast(d.x) - bounds.left - bounds.width / 2;
+                        d.y = NumCast(d.y) - bounds.top - bounds.height / 2;
+                        d.page = -1;
+                        return d;
+                    });
+                    let summary = Docs.TextDocument({ x: bounds.left, y: bounds.top, width: 300, height: 100, backgroundColor: "#e2ad32" /* yellow */, title: "-summary-" });
+                    SearchBox.convertDataUri(dataUrl, "icon" + summary[Id] + "_image").then((returnedFilename) => {
+                        if (returnedFilename) {
+                            let url = DocServer.prepend(returnedFilename);
+                            let imageSummary = Docs.ImageDocument(url, { x: bounds.left + bounds.width, y: bounds.top, width: 300 });
+                            summary.imageSummary = imageSummary;
+                            this.props.addDocument(imageSummary, false);
+                        }
+                    })
+                    newCollection.proto!.summaryDoc = summary;
+                    selected = [newCollection];
+                    newCollection.x = bounds.left + bounds.width;
+                    //this.props.addDocument(newCollection, false);
+                    summary.proto!.summarizedDocs = new List<Doc>(selected);
+                    summary.proto!.maximizeLocation = "inTab";  // or "inPlace", or "onRight"
+
+                    this.props.addLiveTextDocument(summary);
+                });
             }
             else {
                 this.props.addDocument(newCollection, false);
-- 
cgit v1.2.3-70-g09d2


From e878910abf712f53113994b4d6f242b5c2231453 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 22 May 2019 11:57:37 -0400
Subject: Pdf proxy rendering

---
 src/client/views/nodes/PDFBox.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 3bffdd02d..5b8b15ed8 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -249,6 +249,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
         this.props.Document.thumbnailPage = FieldValue(this.Document.curPage, -1);
         this._renderAsSvg = false;
         setTimeout(() => {
+            runInAction(() => this._smallRetryCount = this._mediumRetryCount = this._largeRetryCount = 0);
             let nwidth = FieldValue(this.Document.nativeWidth, 0);
             let nheight = FieldValue(this.Document.nativeHeight, 0);
             htmlToImage.toPng(this._mainDiv.current!, { width: nwidth, height: nheight, quality: 0.8 })
@@ -325,6 +326,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
             return proxy;
         }
         return [
+            proxy,
             this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element),
             this._currAnno.map((element: any) => element),
             this.pdfContent
@@ -372,7 +374,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
             // else if (this._largeRetryCount < 10) this._curSuffix = "_l";
             if (field instanceof ImageField) path = this.choosePath(field.url);
             // }
-            return <img key={path} src={path} width="100%" />;
+            return <img key={path + (this._mediumRetryCount).toString()} style={{ position: "absolute", width: "100%" }} src={path} onError={this.onError} />;
         }
         return (null);
     }
-- 
cgit v1.2.3-70-g09d2


From bc1271babcce90ef70aa437d7d630b0244a52bb2 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 22 May 2019 12:12:43 -0400
Subject: Thumbnail stuff

---
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index f898c10d2..d72046800 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -296,7 +296,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     SearchBox.convertDataUri(dataUrl, "icon" + summary[Id] + "_image").then((returnedFilename) => {
                         if (returnedFilename) {
                             let url = DocServer.prepend(returnedFilename);
-                            let imageSummary = Docs.ImageDocument(url, { x: bounds.left + bounds.width, y: bounds.top, width: 300 });
+                            let imageSummary = Docs.ImageDocument(url, { x: bounds.left, y: bounds.top + 100 / zoomBasis, width: 150, title: "-summary image-" });
                             summary.imageSummary = imageSummary;
                             this.props.addDocument(imageSummary, false);
                         }
-- 
cgit v1.2.3-70-g09d2


From fe9dbb871d613d6a55873bd317d0d1af13a50ad8 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 22 May 2019 13:34:59 -0400
Subject: Tried script

---
 src/server/remapUrl.ts | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/server/remapUrl.ts

(limited to 'src')

diff --git a/src/server/remapUrl.ts b/src/server/remapUrl.ts
new file mode 100644
index 000000000..90044738f
--- /dev/null
+++ b/src/server/remapUrl.ts
@@ -0,0 +1,59 @@
+import { Database } from "./database";
+import { Search } from "./Search";
+import * as path from 'path';
+
+const suffixMap: { [type: string]: true } = {
+    "video": true,
+    "pdf": true,
+    "audio": true,
+    "web": true
+};
+
+async function update() {
+    await new Promise(res => setTimeout(res, 10));
+    console.log("update");
+    const cursor = await Database.Instance.query({});
+    console.log("Cleared");
+    const updates: [string, any][] = [];
+    function updateDoc(doc: any) {
+        if (doc.__type !== "Doc") {
+            return;
+        }
+        const fields = doc.fields;
+        if (!fields) {
+            return;
+        }
+        const update: any = {
+        };
+        let dynfield = false;
+        for (const key in fields) {
+            const value = fields[key];
+            if (value && value.__type && suffixMap[value.__type]) {
+                const url = new URL(value.url);
+                if (url.href.includes("azure")) {
+                    dynfield = true;
+
+                    update.$set = { ["fields." + key]: { url: `${url.protocol}//localhost:1050${url.pathname}`, __type: "image" } };
+                }
+            }
+        }
+        if (dynfield) {
+            updates.push([doc._id, update]);
+        }
+    }
+    await cursor.forEach(updateDoc);
+    await Promise.all(updates.map(doc => {
+        console.log(doc[0], doc[1]);
+        return new Promise(res => Database.Instance.update(doc[0], doc[1], () => {
+            console.log("wrote " + JSON.stringify(doc[1]));
+            res();
+        }));
+    }));
+    console.log("Done");
+    // await Promise.all(updates.map(update => {
+    //     return limit(() => Search.Instance.updateDocument(update));
+    // }));
+    cursor.close();
+}
+
+update();
-- 
cgit v1.2.3-70-g09d2


From 30fdae9e869e0f132c76b4fa99b784e75d6c8dae Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 22 May 2019 19:51:49 -0400
Subject: A bunch of fixes/changes

---
 src/client/documents/Documents.ts                  |  2 +
 src/client/util/DocumentManager.ts                 |  6 ++-
 src/client/views/InkingCanvas.scss                 | 42 ++++++++++++--------
 src/client/views/SearchBox.tsx                     | 10 +++--
 .../views/collections/CollectionPDFView.scss       | 39 ++++++++++--------
 src/client/views/collections/CollectionSubView.tsx |  4 ++
 .../views/collections/CollectionVideoView.tsx      | 46 +++++++++++++++++++++-
 .../collections/collectionFreeForm/MarqueeView.tsx |  5 ++-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  9 ++++-
 src/client/views/nodes/DocumentView.tsx            | 12 +++---
 src/client/views/nodes/ImageBox.tsx                |  6 ++-
 src/client/views/nodes/KeyValueBox.tsx             |  2 +-
 src/client/views/nodes/PDFBox.tsx                  | 16 +++++++-
 src/client/views/nodes/VideoBox.tsx                |  8 +++-
 14 files changed, 153 insertions(+), 54 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 323534b2b..ae190a989 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -77,7 +77,9 @@ export namespace DocUtils {
             linkDoc.proto!.linkTags = "Default";
 
             linkDoc.proto!.linkedTo = target;
+            linkDoc.proto!.linkedToPage = target.curPage;
             linkDoc.proto!.linkedFrom = source;
+            linkDoc.proto!.linkedFromPage = source.curPage;
 
             let linkedFrom = Cast(protoTarg.linkedFromDocs, listSpec(Doc));
             if (!linkedFrom) {
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index f113ff1d7..65c4b9e4b 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -115,11 +115,11 @@ export class DocumentManager {
     }
 
     @undoBatch
-    public jumpToDocument = async (docDelegate: Doc, forceDockFunc: boolean = false, dockFunc?: (doc: Doc) => void): Promise<void> => {
+    public jumpToDocument = async (docDelegate: Doc, forceDockFunc: boolean = false, dockFunc?: (doc: Doc) => void, linkPage?: number): Promise<void> => {
         let doc = Doc.GetProto(docDelegate);
-        const page = NumCast(doc.page, undefined);
         const contextDoc = await Cast(doc.annotationOn, Doc);
         if (contextDoc) {
+            const page = NumCast(doc.page, linkPage || 0);
             const curPage = NumCast(contextDoc.curPage, page);
             if (page !== curPage) contextDoc.curPage = page;
         }
@@ -127,11 +127,13 @@ export class DocumentManager {
         // using forceDockFunc as a flag for splitting linked to doc to the right...can change later if needed
         if (!forceDockFunc && (docView = DocumentManager.Instance.getDocumentView(doc))) {
             docView.props.Document.libraryBrush = true;
+            if (linkPage !== undefined) docView.props.Document.curPage = linkPage;
             docView.props.focus(docView.props.Document);
         } else {
             if (!contextDoc) {
                 const actualDoc = Doc.MakeAlias(docDelegate);
                 actualDoc.libraryBrush = true;
+                if (linkPage !== undefined) actualDoc.curPage = linkPage;
                 (dockFunc || CollectionDockingView.Instance.AddRightSplit)(actualDoc);
             } else {
                 let contextView: DocumentView | null;
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index 8bcaf41dd..d95398f17 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,40 +1,50 @@
 @import "globalCssVariables";
 
 .inkingCanvas {
-    opacity:0.99;
+    opacity: 0.99;
+
     .jsx-parser {
-        position:absolute;
-        width:100%;
-        height:100%;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: -1; // allows annotations to appear on videos when screen is full-size & ... 
     }
 }
-.inkingCanvas-paths-ink, .inkingCanvas-paths-markers, .inkingCanvas-noSelect, .inkingCanvas-canSelect {
+
+.inkingCanvas-paths-ink,
+.inkingCanvas-paths-markers,
+.inkingCanvas-noSelect,
+.inkingCanvas-canSelect {
     position: absolute;
     top: 0;
-    left:0;
+    left: 0;
     width: 8192px;
     height: 8192px;
-    cursor:"crosshair";
+    cursor: "crosshair";
     pointer-events: auto;
-    
+
 }
-.inkingCanvas-canSelect, 
-.inkingCanvas-noSelect    {
-    top:-50000px;
-    left:-50000px;
+
+.inkingCanvas-canSelect,
+.inkingCanvas-noSelect {
+    top: -50000px;
+    left: -50000px;
     width: 100000px;
     height: 100000px;
 }
-.inkingCanvas-noSelect  {
+
+.inkingCanvas-noSelect {
     pointer-events: none;
     cursor: "arrow";
 }
-.inkingCanvas-paths-ink, .inkingCanvas-paths-markers {
+
+.inkingCanvas-paths-ink,
+.inkingCanvas-paths-markers {
     pointer-events: none;
     z-index: 10000; // overlays ink on top of everything 
     cursor: "arrow";
 }
+
 .inkingCanvas-paths-markers {
     mix-blend-mode: multiply;
-}
-
+}
\ No newline at end of file
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index 911fc8d9c..fa9462acf 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -21,6 +21,7 @@ import { DocumentManager } from '../util/DocumentManager';
 import { SetupDrag } from '../util/DragManager';
 import { Docs } from '../documents/Documents';
 import { RouteStore } from '../../server/RouteStore';
+import { NumCast } from '../../new_fields/Types';
 
 library.add(faSearch);
 library.add(faObjectGroup);
@@ -143,18 +144,21 @@ export class SearchBox extends React.Component {
         });
         let x = 0;
         let y = 0;
+        let maxy = 300;
         for (const doc of docs) {
             doc.x = x;
             doc.y = y;
             doc.width = 200;
-            doc.height = 200;
+            doc.height = 200 * NumCast(doc.nativeHeight) / NumCast(doc.nativeWidth, 1);
+            maxy = Math.max(doc.height, maxy);
             x += 250;
             if (x > 1000) {
+                maxy = 300;
                 x = 0;
-                y += 250;
+                y += maxy + 25;
             }
         }
-        return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, title: `Search Docs: "${this.searchString}"` });
+        return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this.searchString}"` });
     }
 
     // Useful queries:
diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss
index f6fb79582..50201bae8 100644
--- a/src/client/views/collections/CollectionPDFView.scss
+++ b/src/client/views/collections/CollectionPDFView.scss
@@ -1,49 +1,56 @@
 .collectionPdfView-buttonTray {
-    top : 15px;
-    left : 20px;
-    position: relative; 
+    top: 15px;
+    left: 20px;
+    position: relative;
     transform-origin: left top;
     position: absolute;
 }
+
 .collectionPdfView-thumb {
-    width:25px;
-    height:25px;
+    width: 25px;
+    height: 25px;
     transform-origin: left top;
     position: absolute;
     background: darkgray;
 }
+
 .collectionPdfView-slider {
-    width:25px;
-    height:25px;
+    width: 25px;
+    height: 25px;
     transform-origin: left top;
     position: absolute;
     background: lightgray;
 }
-.collectionPdfView-cont{
+
+.collectionPdfView-cont {
     width: 100%;
     height: 100%;
-    position: absolute; 
+    position: absolute;
     top: 0;
-    left:0;
+    left: 0;
+    z-index: -1;
 }
+
 .collectionPdfView-cont-dragging {
     span {
         user-select: none;
     }
 }
+
 .collectionPdfView-backward {
-    color : white;
+    color: white;
     font-size: 24px;
-    top :0px;
-    left : 0px;
+    top: 0px;
+    left: 0px;
     position: absolute;
     background-color: rgba(50, 50, 50, 0.2);
 }
+
 .collectionPdfView-forward {
-    color : white;
+    color: white;
     font-size: 24px;
-    top :0px;
-    left : 45px;
+    top: 0px;
+    left: 45px;
     position: absolute;
     background-color: rgba(50, 50, 50, 0.2);
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 7800b35df..4a21e4465 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -153,6 +153,10 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
         @undoBatch
         @action
         protected onDrop(e: React.DragEvent, options: DocumentOptions): void {
+            if (e.ctrlKey) {
+                e.stopPropagation(); // bcz: this is a hack to stop propagation when dropping an image on a text document with shift+ctrl
+                return;
+            }
             let html = e.dataTransfer.getData("text/html");
             let text = e.dataTransfer.getData("text/plain");
 
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 27f23a1a8..7853544d5 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -1,4 +1,5 @@
 import { action, observable, trace } from "mobx";
+import * as htmlToImage from "html-to-image";
 import { observer } from "mobx-react";
 import { ContextMenu } from "../ContextMenu";
 import { CollectionViewType, CollectionBaseView, CollectionRenderProps } from "./CollectionBaseView";
@@ -6,10 +7,14 @@ import React = require("react");
 import "./CollectionVideoView.scss";
 import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView";
 import { FieldView, FieldViewProps } from "../nodes/FieldView";
-import { emptyFunction } from "../../../Utils";
+import { emptyFunction, Utils } from "../../../Utils";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { VideoBox } from "../nodes/VideoBox";
-import { NumCast } from "../../../new_fields/Types";
+import { NumCast, Cast, StrCast } from "../../../new_fields/Types";
+import { VideoField } from "../../../new_fields/URLField";
+import { SearchBox } from "../SearchBox";
+import { DocServer } from "../../DocServer";
+import { Docs, DocUtils } from "../../documents/Documents";
 
 
 @observer
@@ -67,6 +72,43 @@ export class CollectionVideoView extends React.Component<FieldViewProps> {
     onContextMenu = (e: React.MouseEvent): void => {
         if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
         }
+
+        let field = Cast(this.props.Document[this.props.fieldKey], VideoField);
+        if (field) {
+            let url = field.url.href;
+            ContextMenu.Instance.addItem({
+                description: "Copy path", event: () => { Utils.CopyText(url); }, icon: "expand-arrows-alt"
+            });
+        }
+        let width = NumCast(this.props.Document.width);
+        let height = NumCast(this.props.Document.height);
+        ContextMenu.Instance.addItem({
+            description: "Take Snapshot", event: async () => {
+                var canvas = document.createElement('canvas');
+                canvas.width = 640;
+                canvas.height = 640 * NumCast(this.props.Document.nativeHeight) / NumCast(this.props.Document.nativeWidth);
+                var ctx = canvas.getContext('2d');//draw image to canvas. scale to target dimensions
+                ctx && ctx.drawImage(this._videoBox!.player!, 0, 0, canvas.width, canvas.height);
+
+                //convert to desired file format
+                var dataUrl = canvas.toDataURL('image/png'); // can also use 'image/png'
+                // if you want to preview the captured image,
+
+                let filename = encodeURIComponent("snapshot" + this.props.Document.title + "_" + this.props.Document.curPage).replace(/\./g, "");
+                SearchBox.convertDataUri(dataUrl, filename).then((returnedFilename) => {
+                    if (returnedFilename) {
+                        let url = DocServer.prepend(returnedFilename);
+                        let imageSummary = Docs.ImageDocument(url, {
+                            x: NumCast(this.props.Document.x) + width, y: NumCast(this.props.Document.y),
+                            width: 150, height: height / width * 150, title: "--snapshot" + NumCast(this.props.Document.curPage) + " image-"
+                        });
+                        this.props.addDocument && this.props.addDocument(imageSummary, false);
+                        DocUtils.MakeLink(imageSummary, this.props.Document);
+                    }
+                });
+            },
+            icon: "expand-arrows-alt"
+        });
     }
 
     setVideoBox = (videoBox: VideoBox) => { this._videoBox = videoBox; };
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index d72046800..973ebfbdd 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -296,7 +296,10 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                     SearchBox.convertDataUri(dataUrl, "icon" + summary[Id] + "_image").then((returnedFilename) => {
                         if (returnedFilename) {
                             let url = DocServer.prepend(returnedFilename);
-                            let imageSummary = Docs.ImageDocument(url, { x: bounds.left, y: bounds.top + 100 / zoomBasis, width: 150, title: "-summary image-" });
+                            let imageSummary = Docs.ImageDocument(url, {
+                                x: bounds.left, y: bounds.top + 100 / zoomBasis,
+                                width: 150, height: bounds.height / bounds.width * 150, title: "-summary image-"
+                            });
                             summary.imageSummary = imageSummary;
                             this.props.addDocument(imageSummary, false);
                         }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index aaaa6a9c5..66d91f9c2 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -195,6 +195,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             this.props.Document.libraryBrush = false;
         }
         let altKey = e.altKey;
+        let ctrlKey = e.ctrlKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
             Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
             let isExpander = (e.target as any).id === "isExpander";
@@ -242,9 +243,13 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     let linkedFwdDocs = [
                         linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : expandedDocs[0],
                         linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : expandedDocs[0]];
-                    if (linkedFwdDocs) {
+
+                    let linkedFwdPage = [
+                        linkedToDocs.length ? NumCast(linkedToDocs[0].linkedToPage, undefined) : linkedFromDocs.length ? NumCast(linkedFromDocs[0].linkedFromPage, undefined) : undefined,
+                        linkedFromDocs.length ? NumCast(linkedFromDocs[0].linkedFromPage, undefined) : linkedToDocs.length ? NumCast(linkedToDocs[0].linkedToPage, undefined) : undefined];
+                    if (!linkedFwdDocs.some(l => l instanceof Promise)) {
                         let maxLocation = StrCast(linkedFwdDocs[altKey ? 1 : 0].maximizeLocation, "inTab");
-                        DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0], altKey, document => this.props.addDocTab(document, maxLocation));
+                        DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0], ctrlKey, document => this.props.addDocTab(document, maxLocation), linkedFwdPage[altKey ? 1 : 0]);
                     }
                 }
             }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 87c88f57c..01c4d82fb 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -234,12 +234,14 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     makeButton = (e: React.MouseEvent): void => {
         let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document;
         doc.isButton = !BoolCast(doc.isButton, false);
-        if (doc.isButton && !doc.nativeWidth) {
-            doc.nativeWidth = this.props.Document[WidthSym]();
-            doc.nativeHeight = this.props.Document[HeightSym]();
-        } else {
+        if (StrCast(doc.layout).indexOf("Formatted") !== -1) { // only need to freeze the dimensions of text boxes since they don't have a native width and height naturally
+            if (doc.isButton && !doc.nativeWidth) {
+                doc.nativeWidth = this.props.Document[WidthSym]();
+                doc.nativeHeight = this.props.Document[HeightSym]();
+            } else {
 
-            doc.nativeWidth = doc.nativeHeight = undefined;
+                doc.nativeWidth = doc.nativeHeight = undefined;
+            }
         }
     }
     fullScreenClicked = (e: React.MouseEvent): void => {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 71bda6fea..cc0dc8220 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -47,7 +47,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     onLoad = (target: any) => {
         var h = this._imgRef.current!.naturalHeight;
         var w = this._imgRef.current!.naturalWidth;
-        if (this._photoIndex === 0 && (this.props as any).id !== "isExpander" && (!this.Document.nativeHeight || !this.Document.nativeWidth)) {
+        if (this._photoIndex === 0 && (this.props as any).id !== "isExpander" && (!this.Document.nativeWidth || !this.Document.nativeHeight || Math.abs(this.Document.nativeWidth / this.Document.nativeHeight - w / h) > 0.05)) {
             Doc.SetOnPrototype(this.Document, "nativeHeight", FieldValue(this.Document.nativeWidth, 0) * h / w);
             this.Document.height = FieldValue(this.Document.width, 0) * h / w;
         }
@@ -165,8 +165,10 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     }
 
     choosePath(url: URL) {
-        if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1)
+        const lower = url.href.toLowerCase();
+        if (url.protocol === "data" || url.href.indexOf(window.location.origin) === -1 || !(lower.endsWith(".png") || lower.endsWith(".jpg") || lower.endsWith(".jpeg"))) {
             return url.href;
+        }
         let ext = path.extname(url.href);
         return url.href.replace(ext, this._curSuffix + ext);
     }
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 8cb576786..849f17aa4 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -78,7 +78,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
 
         let rows: JSX.Element[] = [];
         let i = 0;
-        for (let key in ids) {
+        for (let key of Object.keys(ids).sort()) {
             rows.push(<KeyValuePair doc={realDoc} keyWidth={100 - this.splitPercentage} rowStyle={"keyValueBox-" + (i++ % 2 ? "oddRow" : "evenRow")} key={key} keyName={key} />);
         }
         return rows;
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 5b8b15ed8..733bc920f 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -23,6 +23,7 @@ import { pageSchema } from "./ImageBox";
 import "./PDFBox.scss";
 var path = require('path');
 import React = require("react");
+import { ContextMenu } from "../ContextMenu";
 
 /** ALSO LOOK AT: Annotation.tsx, Sticky.tsx
  * This method renders PDF and puts all kinds of functionalities such as annotation, highlighting, 
@@ -357,7 +358,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     @computed
     get imageProxyRenderer() {
         let thumbField = this.props.Document.thumbnail;
-        if (thumbField && this._renderAsSvg) {
+        if (thumbField && this._renderAsSvg && NumCast(this.props.Document.thumbnailPage, 0) === this.Document.curPage) {
 
             // let transform = this.props.ScreenToLocalTransform().inverse();
             let pw = typeof this.props.PanelWidth === "function" ? this.props.PanelWidth() : typeof this.props.PanelWidth === "number" ? (this.props.PanelWidth as any) as number : 50;
@@ -380,10 +381,21 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     }
     @action onKeyDown = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = true);
     @action onKeyUp = (e: React.KeyboardEvent) => e.key === "Alt" && (this._alt = false);
+    onContextMenu = (e: React.MouseEvent): void => {
+        let field = Cast(this.Document[this.props.fieldKey], PdfField);
+        if (field) {
+            let url = field.url.href;
+            ContextMenu.Instance.addItem({
+                description: "Copy path", event: () => {
+                    Utils.CopyText(url);
+                }, icon: "expand-arrows-alt"
+            });
+        }
+    }
     render() {
         let classname = "pdfBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !this._alt ? "-interactive" : "");
         return (
-            <div className={classname} tabIndex={0} ref={this._mainDiv} onPointerDown={this.onPointerDown} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} >
+            <div className={classname} tabIndex={0} ref={this._mainDiv} onPointerDown={this.onPointerDown} onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} onContextMenu={this.onContextMenu} >
                 {this.pdfRenderer}
             </div >
         );
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 6ae55d151..ab57b4b04 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -88,10 +88,14 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         if (vref) {
             vref.onfullscreenchange = action((e) => this._fullScreen = vref.webkitDisplayingFullscreen);
             if (this._reactionDisposer) this._reactionDisposer();
-            this._reactionDisposer = reaction(() => this.props.Document.curPage, () =>
-                vref.currentTime = NumCast(this.props.Document.curPage, 0), { fireImmediately: true });
+            this._reactionDisposer = reaction(() => this.props.Document.curPage, () => {
+                if (!this.Playing) {
+                    vref.currentTime = NumCast(this.props.Document.curPage, 0);
+                }
+            }, { fireImmediately: true });
         }
     }
+
     videoContent(path: string) {
         let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : "");
         return <video className={`${style}`} ref={this.setVideoRef} onPointerDown={this.onPointerDown}>
-- 
cgit v1.2.3-70-g09d2


From c65d4f5f14c5a0fac9c06a7c4e0771b342a57b74 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Wed, 22 May 2019 20:10:00 -0400
Subject: Made search collection slightly better

---
 src/client/views/SearchBox.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index fa9462acf..63d2065e2 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -144,18 +144,26 @@ export class SearchBox extends React.Component {
         });
         let x = 0;
         let y = 0;
-        let maxy = 300;
         for (const doc of docs) {
             doc.x = x;
             doc.y = y;
-            doc.width = 200;
-            doc.height = 200 * NumCast(doc.nativeHeight) / NumCast(doc.nativeWidth, 1);
-            maxy = Math.max(doc.height, maxy);
+            const size = 200;
+            const aspect = NumCast(doc.nativeHeight) / NumCast(doc.nativeWidth, 1);
+            if (aspect > 1) {
+                doc.height = size;
+                doc.width = size / aspect;
+            } else if (aspect > 0) {
+                doc.width = size;
+                doc.height = size * aspect;
+            } else {
+                doc.width = size;
+                doc.height = size;
+            }
+            doc.zoomBasis = 1;
             x += 250;
             if (x > 1000) {
-                maxy = 300;
                 x = 0;
-                y += maxy + 25;
+                y += 300;
             }
         }
         return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this.searchString}"` });
-- 
cgit v1.2.3-70-g09d2


From 7353812e677de24a462dd53a84987848698b1b5b Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:07:45 -0400
Subject: Made going up context drop down look and feel better

---
 src/client/views/collections/ParentDocumentSelector.scss | 6 +++++-
 src/client/views/collections/ParentDocumentSelector.tsx  | 5 +++--
 2 files changed, 8 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss
index 1ab12bb72..2dd3e49f2 100644
--- a/src/client/views/collections/ParentDocumentSelector.scss
+++ b/src/client/views/collections/ParentDocumentSelector.scss
@@ -1,10 +1,14 @@
 .PDS-flyout {
     position: absolute;
     z-index: 9999;
-    background-color: #d3d3d3;
+    background-color: #eeeeee;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     min-width: 150px;
     color: black;
+    top: 12px;
+
+    padding: 10px;
+    border-radius: 3px;
 
     hr {
         height: 1px;
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index e6eb51a0c..f11af04a3 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -50,6 +50,7 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
     render() {
         return (
             <>
+                <p>Contexts:</p>
                 {this._docs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
                 {this._otherDocs.length ? <hr></hr> : null}
                 {this._otherDocs.map(doc => <p><a onClick={this.getOnClick(doc)}>{doc.col.title}</a></p>)}
@@ -76,13 +77,13 @@ export class ParentDocSelector extends React.Component<SelectorProps> {
         let flyout;
         if (this.hover) {
             flyout = (
-                <div className="PDS-flyout">
+                <div className="PDS-flyout" title=" ">
                     <SelectorContextMenu {...this.props} />
                 </div>
             );
         }
         return (
-            <span style={{ position: "relative", display: "inline-block" }}
+            <span style={{ position: "relative", display: "inline-block", paddingLeft: "5px", paddingRight: "5px" }}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}>
                 <p>^</p>
-- 
cgit v1.2.3-70-g09d2


From d34fea1a5a74a406055f51db4ba57ff73a7530a8 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:08:03 -0400
Subject: Made dragged collection bigger to work better with dragging into a
 docked pane

---
 src/client/views/MainView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 1d491d11f..438607157 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -220,7 +220,7 @@ export class MainView extends React.Component {
         let videourl = "http://techslides.com/demos/sample-videos/small.mp4";
 
         let addTextNode = action(() => Docs.TextDocument({ borderRounding: -1, width: 200, height: 200, title: "a text note" }));
-        let addColNode = action(() => Docs.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
+        let addColNode = action(() => Docs.FreeformDocument([], { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" }));
         let addSchemaNode = action(() => Docs.SchemaDocument(["title"], [], { width: 200, height: 200, title: "a schema collection" }));
         let addTreeNode = action(() => CurrentUserUtils.UserDocument);
         //let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" }));
-- 
cgit v1.2.3-70-g09d2


From 422119419afb3dda7c7b9992bdf8a910821c312f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:08:18 -0400
Subject: Made image upload hopefully work on mobile

---
 src/mobile/ImageUpload.scss | 14 +++++++++-----
 src/mobile/ImageUpload.tsx  | 11 ++++++-----
 2 files changed, 15 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index 65305dd04..eea69b81c 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -17,14 +17,18 @@
         font-size: 3em;
     }
 
-    .upload_label {
-        width: 80vw;
-        height: 40vh;
+    .input_file {
+        display: none;
+    }
+
+    .upload_label,
+    .upload_button {
         background: $dark-color;
-        font-size: 10vw;
+        font-size: 500%;
         font-family: $sans-serif;
         text-align: center;
-        padding-top: 20vh;
+        padding: 5vh;
+        margin-bottom: 20px;
         color: white;
     }
 }
\ No newline at end of file
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 84bbfeb14..7776cf5d4 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -19,13 +19,13 @@ import { List } from '../new_fields/List';
 //         imgInput.click();
 //     }
 // }
+const inputRef = React.createRef<HTMLInputElement>();
 
-const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
-    file.persist();
+const onClick = async () => {
     await Docs.initProtos();
     let imgPrev = document.getElementById("img_preview");
     if (imgPrev) {
-        let files: FileList | null = file.target.files;
+        let files: FileList | null = inputRef.current!.files;
         if (files && files.length !== 0) {
             console.log(files[0]);
             const name = files[0].name;
@@ -71,8 +71,9 @@ const onFileLoad = async (file: React.ChangeEvent<HTMLInputElement>) => {
 ReactDOM.render((
     <div className="imgupload_cont">
         {/* <button className = "button_file"  = {onPointerDown}> Open Image </button> */}
-        <label htmlFor="input_image_file" className="upload_label">Upload an Image</label>
-        <input type="file" accept="image/*" onChange={onFileLoad} className="input_file" id="input_image_file"></input>
+        <label htmlFor="input_image_file" className="upload_label">Choose an Image</label>
+        <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
+        <button onClick={onClick} className="upload_button">Upload</button>
         <img id="img_preview" src=""></img>
         <div id="message" />
     </div>),
-- 
cgit v1.2.3-70-g09d2


From 54a4ff2f080b1e5ab87b7a0954272fd82194924e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:08:27 -0400
Subject: Fixed remapUrl script

---
 src/server/remapUrl.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/server/remapUrl.ts b/src/server/remapUrl.ts
index 90044738f..6f4d6642f 100644
--- a/src/server/remapUrl.ts
+++ b/src/server/remapUrl.ts
@@ -33,7 +33,7 @@ async function update() {
                 if (url.href.includes("azure")) {
                     dynfield = true;
 
-                    update.$set = { ["fields." + key]: { url: `${url.protocol}//localhost:1050${url.pathname}`, __type: "image" } };
+                    update.$set = { ["fields." + key + ".url"]: `${url.protocol}//localhost:1050${url.pathname}` };
                 }
             }
         }
@@ -47,7 +47,7 @@ async function update() {
         return new Promise(res => Database.Instance.update(doc[0], doc[1], () => {
             console.log("wrote " + JSON.stringify(doc[1]));
             res();
-        }));
+        }, false, "newDocuments"));
     }));
     console.log("Done");
     // await Promise.all(updates.map(update => {
-- 
cgit v1.2.3-70-g09d2


From adbe3e98e67e92d7f4e03e9c0beb54ad7b617fb6 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:16:15 -0400
Subject: More image upload changes

---
 src/mobile/ImageUpload.tsx | 122 +++++++++++++++++++++++++++------------------
 1 file changed, 74 insertions(+), 48 deletions(-)

(limited to 'src')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 7776cf5d4..91a8858d8 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -9,6 +9,8 @@ import { Opt, Doc } from '../new_fields/Doc';
 import { Cast } from '../new_fields/Types';
 import { listSpec } from '../new_fields/Schema';
 import { List } from '../new_fields/List';
+import { observer } from 'mobx-react';
+import { observable } from 'mobx';
 
 
 
@@ -21,61 +23,85 @@ import { List } from '../new_fields/List';
 // }
 const inputRef = React.createRef<HTMLInputElement>();
 
-const onClick = async () => {
-    await Docs.initProtos();
-    let imgPrev = document.getElementById("img_preview");
-    if (imgPrev) {
-        let files: FileList | null = inputRef.current!.files;
-        if (files && files.length !== 0) {
-            console.log(files[0]);
-            const name = files[0].name;
-            let formData = new FormData();
-            formData.append("file", files[0]);
+@observer
+class Uploader extends React.Component {
+    @observable
+    error: string = "";
 
-            const upload = window.location.origin + "/upload";
-            const res = await fetch(upload, {
-                method: 'POST',
-                body: formData
-            });
-            const json = await res.json();
-            json.map(async (file: any) => {
-                let path = window.location.origin + file;
-                var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
+    onClick = async () => {
+        try {
+            this.error = "initializing protos";
+            await Docs.initProtos();
+            let imgPrev = document.getElementById("img_preview");
+            if (imgPrev) {
+                let files: FileList | null = inputRef.current!.files;
+                if (files && files.length !== 0) {
+                    console.log(files[0]);
+                    const name = files[0].name;
+                    let formData = new FormData();
+                    formData.append("file", files[0]);
 
-                const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
-                if (!res) {
-                    throw new Error("No user id returned");
-                }
-                const field = await DocServer.GetRefField(res);
-                let pending: Opt<Doc>;
-                if (field instanceof Doc) {
-                    pending = await Cast(field.optionalRightCollection, Doc);
-                }
-                if (pending) {
-                    const data = await Cast(pending.data, listSpec(Doc));
-                    if (data) {
-                        data.push(doc);
-                    } else {
-                        pending.data = new List([doc]);
-                    }
-                }
-            });
+                    const upload = window.location.origin + "/upload";
+                    this.error = "uploading image";
+                    const res = await fetch(upload, {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const json = await res.json();
+                    json.map(async (file: any) => {
+                        let path = window.location.origin + file;
+                        var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
+
+                        this.error = "getting user document";
+
+                        const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
+                        if (!res) {
+                            throw new Error("No user id returned");
+                        }
+                        const field = await DocServer.GetRefField(res);
+                        let pending: Opt<Doc>;
+                        if (field instanceof Doc) {
+                            pending = await Cast(field.optionalRightCollection, Doc);
+                        }
+                        if (pending) {
+                            this.error = "has pending docs";
+                            const data = await Cast(pending.data, listSpec(Doc));
+                            if (data) {
+                                data.push(doc);
+                            } else {
+                                pending.data = new List([doc]);
+                            }
+                            this.error = "finished";
+                        }
+                    });
 
-            // console.log(window.location.origin + file[0])
+                    // console.log(window.location.origin + file[0])
 
-            //imgPrev.setAttribute("src", window.location.origin + files[0].name)
+                    //imgPrev.setAttribute("src", window.location.origin + files[0].name)
+                }
+            }
+        } catch (error) {
+            this.error = JSON.stringify(error);
         }
     }
-};
+
+    render() {
+        return (
+            <div className="imgupload_cont">
+                <label htmlFor="input_image_file" className="upload_label">Choose an Image</label>
+                <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
+                <button onClick={this.onClick} className="upload_button">Upload</button>
+                <img id="img_preview" src=""></img>
+                <p>{this.error}</p>
+            </div>
+        );
+    }
+
+}
+
 
 ReactDOM.render((
-    <div className="imgupload_cont">
-        {/* <button className = "button_file"  = {onPointerDown}> Open Image </button> */}
-        <label htmlFor="input_image_file" className="upload_label">Choose an Image</label>
-        <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
-        <button onClick={onClick} className="upload_button">Upload</button>
-        <img id="img_preview" src=""></img>
-        <div id="message" />
-    </div>),
+    <Uploader />
+),
     document.getElementById('root')
 );
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 517816327526520b99e439345b48549ebc79db6b Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:24:15 -0400
Subject: More image upload changes

---
 src/mobile/ImageUpload.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 91a8858d8..bfc1738fc 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -27,10 +27,12 @@ const inputRef = React.createRef<HTMLInputElement>();
 class Uploader extends React.Component {
     @observable
     error: string = "";
+    @observable
+    status: string = "";
 
     onClick = async () => {
         try {
-            this.error = "initializing protos";
+            this.status = "initializing protos";
             await Docs.initProtos();
             let imgPrev = document.getElementById("img_preview");
             if (imgPrev) {
@@ -42,17 +44,18 @@ class Uploader extends React.Component {
                     formData.append("file", files[0]);
 
                     const upload = window.location.origin + "/upload";
-                    this.error = "uploading image";
+                    this.status = "uploading image";
                     const res = await fetch(upload, {
                         method: 'POST',
                         body: formData
                     });
+                    this.status = "upload image, getting json";
                     const json = await res.json();
                     json.map(async (file: any) => {
                         let path = window.location.origin + file;
                         var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name });
 
-                        this.error = "getting user document";
+                        this.status = "getting user document";
 
                         const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId));
                         if (!res) {
@@ -64,14 +67,14 @@ class Uploader extends React.Component {
                             pending = await Cast(field.optionalRightCollection, Doc);
                         }
                         if (pending) {
-                            this.error = "has pending docs";
+                            this.status = "has pending docs";
                             const data = await Cast(pending.data, listSpec(Doc));
                             if (data) {
                                 data.push(doc);
                             } else {
                                 pending.data = new List([doc]);
                             }
-                            this.error = "finished";
+                            this.status = "finished";
                         }
                     });
 
@@ -92,6 +95,7 @@ class Uploader extends React.Component {
                 <input type="file" accept="image/*" className="input_file" id="input_image_file" ref={inputRef}></input>
                 <button onClick={this.onClick} className="upload_button">Upload</button>
                 <img id="img_preview" src=""></img>
+                <p>{this.status}</p>
                 <p>{this.error}</p>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From b286d5a80b0c4cf56aa8ab1e6940bf711402ed59 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:27:59 -0400
Subject: More image upload changes

---
 src/mobile/ImageUpload.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index bfc1738fc..6ca3a6f23 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -50,6 +50,8 @@ class Uploader extends React.Component {
                         body: formData
                     });
                     this.status = "upload image, getting json";
+                    this.status = await res.text();
+                    return;
                     const json = await res.json();
                     json.map(async (file: any) => {
                         let path = window.location.origin + file;
-- 
cgit v1.2.3-70-g09d2


From 20f45adceb17b8cfe47f979d6f20329163477126 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:32:33 -0400
Subject: More image upload changes

---
 src/server/index.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/server/index.ts b/src/server/index.ts
index deb3c1bd6..fd66c90b4 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -172,9 +172,9 @@ const pngTypes = [".png", ".PNG"];
 const jpgTypes = [".jpg", ".JPG", ".jpeg", ".JPEG"];
 const uploadDir = __dirname + "/public/files/";
 // SETTERS
-addSecureRoute(
-    Method.POST,
-    (user, res, req) => {
+app.post(
+    RouteStore.upload,
+    (req, res) => {
         let form = new formidable.IncomingForm();
         form.uploadDir = uploadDir;
         form.keepExtensions = true;
@@ -212,9 +212,7 @@ addSecureRoute(
             }
             res.send(names);
         });
-    },
-    undefined,
-    RouteStore.upload
+    }
 );
 
 addSecureRoute(
-- 
cgit v1.2.3-70-g09d2


From a2faa344dc76407e8120ffb83d7431b851d01cb8 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 01:34:46 -0400
Subject: final image upload change?

---
 src/mobile/ImageUpload.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src')

diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 6ca3a6f23..bfc1738fc 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -50,8 +50,6 @@ class Uploader extends React.Component {
                         body: formData
                     });
                     this.status = "upload image, getting json";
-                    this.status = await res.text();
-                    return;
                     const json = await res.json();
                     json.map(async (file: any) => {
                         let path = window.location.origin + file;
-- 
cgit v1.2.3-70-g09d2


From 05771afc1687f18bd645991d9a853637cc85e16f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 02:46:37 -0400
Subject: Enabled https

---
 package.json            |  1 +
 src/client/DocServer.ts |  2 +-
 src/server/index.ts     | 14 ++++++++++----
 src/server/server.cert  | 21 +++++++++++++++++++++
 src/server/server.key   | 28 ++++++++++++++++++++++++++++
 5 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 src/server/server.cert
 create mode 100644 src/server/server.key

(limited to 'src')

diff --git a/package.json b/package.json
index aa4abb0a5..8e8d93747 100644
--- a/package.json
+++ b/package.json
@@ -117,6 +117,7 @@
         "formidable": "^1.2.1",
         "golden-layout": "^1.5.9",
         "html-to-image": "^0.1.0",
+        "https": "^1.0.0",
         "i": "^0.3.6",
         "image-data-uri": "^2.0.0",
         "jsonwebtoken": "^8.5.0",
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index cbcf751ee..b1b5ae529 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -8,7 +8,7 @@ import { Id, HandleUpdate } from '../new_fields/FieldSymbols';
 
 export namespace DocServer {
     const _cache: { [id: string]: RefField | Promise<Opt<RefField>> } = {};
-    const _socket = OpenSocket(`${window.location.protocol}//${window.location.hostname}:4321`);
+    const _socket = OpenSocket(`${window.location.origin}`);
     const GUID: string = Utils.GenerateGuid();
 
     export function makeReadOnly() {
diff --git a/src/server/index.ts b/src/server/index.ts
index fd66c90b4..e39dfcc14 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -2,6 +2,7 @@ import * as bodyParser from 'body-parser';
 import { exec } from 'child_process';
 import * as cookieParser from 'cookie-parser';
 import * as express from 'express';
+import * as https from 'https';
 import * as session from 'express-session';
 import * as expressValidator from 'express-validator';
 import * as formidable from 'formidable';
@@ -172,6 +173,8 @@ const pngTypes = [".png", ".PNG"];
 const jpgTypes = [".jpg", ".JPG", ".jpeg", ".JPEG"];
 const uploadDir = __dirname + "/public/files/";
 // SETTERS
+//TODO This should be a secured route, but iPhones don't seem to deal well with out authentication,
+// so in order for the image upload from phones to work, we can make this authenticated
 app.post(
     RouteStore.upload,
     (req, res) => {
@@ -289,10 +292,13 @@ app.use(wdm(compiler, { publicPath: config.output.publicPath }));
 app.use(whm(compiler));
 
 // start the Express server
-app.listen(port, () =>
+const httpsServer = https.createServer({
+    key: fs.readFileSync(__dirname + '/server.key'),
+    cert: fs.readFileSync(__dirname + '/server.cert')
+}, app).listen(port, () =>
     console.log(`server started at http://localhost:${port}`));
 
-const server = io();
+const server = io(httpsServer);
 interface Map {
     [key: string]: Client;
 }
@@ -441,5 +447,5 @@ function CreateField(newValue: any) {
     Database.Instance.insert(newValue, "newDocuments");
 }
 
-server.listen(serverPort);
-console.log(`listening on port ${serverPort}`);
\ No newline at end of file
+// server.listen(serverPort);
+// console.log(`listening on port ${serverPort}`);
\ No newline at end of file
diff --git a/src/server/server.cert b/src/server/server.cert
new file mode 100644
index 000000000..e1610914c
--- /dev/null
+++ b/src/server/server.cert
@@ -0,0 +1,21 @@
+-----BEGIN CERTIFICATE-----
+MIIDfzCCAmegAwIBAgIJAJzroap7RHCoMA0GCSqGSIb3DQEBCwUAMFYxCzAJBgNV
+BAYTAlVTMRUwEwYDVQQIDAxSaG9kZSBJc2xhbmQxEzARBgNVBAcMClByb3ZpZGVu
+Y2UxGzAZBgNVBAoMEkJyb3duIEdyYXBoaWNzIExhYjAeFw0xOTA1MjMwNjMxMDla
+Fw0xOTA2MjIwNjMxMDlaMFYxCzAJBgNVBAYTAlVTMRUwEwYDVQQIDAxSaG9kZSBJ
+c2xhbmQxEzARBgNVBAcMClByb3ZpZGVuY2UxGzAZBgNVBAoMEkJyb3duIEdyYXBo
+aWNzIExhYjCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBAMZK+dfIICO/
+w2E28yd98HFMiUNqKVWq5wEncvtaCk3zT/xSRvPrdQo8wvkgGqmjdbbi9hH1wu4u
+79MZTLIaSfU4JtVlchWyqT0Tp+y74KPEFAtIlV/PpHFYkG9728DumaBGg7x+a40j
+8aCLKhy4ij97IVXdn43sVCOQJNfwuxuHz2ofgjg90T/HOP2Jt5mEOygkCjPQmU45
+iR2iwVDu0DFKgD+EsosJdZk5n8yBdMTKFNoIgWpo9IJRzQ3ROqq1npcXI7rSQ3MB
+b+Hw3AkUIXfB18dfLZ+7WKzS0KEm5NM0H+C/bkzRo2D26BLYZQrzFZkk1diTevex
+Ws7e+4khn+8CAwEAAaNQME4wHQYDVR0OBBYEFAYSFlBF7Z0zQHVzLspbaIpGvTp1
+MB8GA1UdIwQYMBaAFAYSFlBF7Z0zQHVzLspbaIpGvTp1MAwGA1UdEwQFMAMBAf8w
+DQYJKoZIhvcNAQELBQADggEBAI2P2nl4Xn2BUwCOpFwCuyqB3/LTTmlz3qqdOfBj
+glxw6UqiLTiEQUe/q1ssthDE71NbtuVRSggzdJcoIdjMQrtG+eN79Ao22ZzhGnAj
+S/MTeybZmO+1Y7yV3RSEjXCmpxIGKueQsCYAdeoTpMny7BEtr09ZROccxDPcLI2H
+K91FtuCZbG7Inx10X4/PVnp9Yr1GW6zWxMkEXLPXko0o8gIf9Kj7njNEF0RPsHd9
+L3tJny4y92huYSs2aPJWeEtRit0nXIu86qXfoomMFBCsFLbGhqtwCpqogeL+QS+1
+bv0MKJk82jMpG/oLxbWwesBk2tb8R4knL2WlX32HegawoHs=
+-----END CERTIFICATE-----
diff --git a/src/server/server.key b/src/server/server.key
new file mode 100644
index 000000000..c8a4f2745
--- /dev/null
+++ b/src/server/server.key
@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDGSvnXyCAjv8Nh
+NvMnffBxTIlDailVqucBJ3L7WgpN80/8Ukbz63UKPML5IBqpo3W24vYR9cLuLu/T
+GUyyGkn1OCbVZXIVsqk9E6fsu+CjxBQLSJVfz6RxWJBve9vA7pmgRoO8fmuNI/Gg
+iyocuIo/eyFV3Z+N7FQjkCTX8Lsbh89qH4I4PdE/xzj9ibeZhDsoJAoz0JlOOYkd
+osFQ7tAxSoA/hLKLCXWZOZ/MgXTEyhTaCIFqaPSCUc0N0TqqtZ6XFyO60kNzAW/h
+8NwJFCF3wdfHXy2fu1is0tChJuTTNB/gv25M0aNg9ugS2GUK8xWZJNXYk3r3sVrO
+3vuJIZ/vAgMBAAECggEAXvm+XUoviq/oxwFoyXua1MmR3UZV8gBfkL/yZM2lrdxi
+bTqDXYVjk7mysVxdKO9wDF78+XE7IpY8rGGryIqq7dctUny6fgYK5YQqpEsAt6/M
+4fKsCS4NV3TSCXPLt8cQsiHUK05p+TpEG19MlmEVZn51Ywk5yOJvEnGSFBPrqq0z
+IRYksRThVeoFqy6J3BS26UqDVEwlhYAPk5bg9j/RaeyEmhEXzcjfnXuYdhqhMhzW
+sS6O4DM/QYs9DTn31kJ2ycgyVaQ/LYNRhp9yIDVSCCJyaInBbV6PV8DdNdr8oXOH
+4G95OtNGTuk9N6BMLDgj1KCEFUjE8bQD0TgMqljV0QKBgQD4aF+qinyAg8xwLsLl
+SKw4amPtlipC1YrOZ17Vtq7bU0WFSfLrKJAyDkvkf5L9OIWWsQNzLbq6enomlurm
+wgjjQyaNVEvQhuJ0P9ewu6CVSC3kT7jnTrQFEnIDSgY+Mt4dyp1HhDqxp4kdMOdf
+DUjyXWhyXpkokq+YXSsyM84q/QKBgQDMWnycVF/vjBy/RbbYO0rZDOl8z6F2WIl/
+wDYVi4fwe1KVWo2J/95dJd9g5DkHqkuyGBQs5Thq05QBBNhsFG87I2ghHCSC7OIz
+ME4sbkouXq4TpAvoiSvCZo5/Whgypuycx5Gn3aSWVStXOyZgyiLF2NcEvoaT4Qss
+w9hfcIU4WwKBgQDvrbVwlYKfdYvSSiweksoo/O5CFXvdVLFDihXE2ylH0cboXnuW
+TmMjCQxNApLO5LRwu4b6oQrkVrx5c3BfCqUMsoQGJWmpYBwr0lXI3qCIqUYuXoWo
+GRY1NqDvb4MqjGYoFJFAqeL/+wifM8pquiTCRUI75+6baT0oI+1D2Rx5+QKBgQCQ
+gDO5P5iPBR6Wyi8e+95TWOQJ07AyxSyFX19fIMlBbZLZ9aw8NugAKfWox/jjyLG5
+/3jUvkmEkJQJnGmFE3YL9V9+ei3/Po488B13IY3m+CBT1x5skgKVdnuw5f5SYuLR
+gfUnJH1rqFH7XuImcwjfqhNxUWBMVUfXoazw39n0HQKBgDXGubSFovavDSTAhh1t
+soMP+3yO+Ny/+Mv47cMfblqN7dItC58VcEX2IHd9Z9QgMNQ4BDCqRRDK4O1N7RLO
+bq6qV9WPyNwsDAZJLH2h9Y3gpDvUNFo+Kq/7V4ZTqaJC1YOjDKTXRnoZIwAje+5x
+iNk2xg38zIscD1Ff+tTCOnYA
+-----END PRIVATE KEY-----
-- 
cgit v1.2.3-70-g09d2


From 999f5ad95498a772aeed9ca84cf176d101efd946 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 03:22:31 -0400
Subject: Small changes

---
 src/client/views/collections/CollectionSubView.tsx     | 2 +-
 src/server/authentication/models/current_user_utils.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 4a21e4465..c4e72b23a 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -129,7 +129,7 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
                 options.dropAction = "copy";
             }
             if (type.indexOf("html") !== -1) {
-                if (path.includes('localhost')) {
+                if (path.includes(window.location.hostname)) {
                     let s = path.split('/');
                     let id = s[s.length - 1];
                     DocServer.GetRefField(id).then(field => {
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index e85aa2c74..add347a88 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -68,7 +68,7 @@ export class CurrentUserUtils {
             const extraSchemas = Cast(CurrentUserUtils.UserDocument.DBSchemas, listSpec("string"), []);
             let extras = await Promise.all(extraSchemas.map(sc => Gateway.Instance.GetSchema("", sc)));
             let catprom = CurrentUserUtils.SetNorthstarCatalog(await Gateway.Instance.GetCatalog(), extras);
-            if (catprom) await Promise.all(catprom);
+            // if (catprom) await Promise.all(catprom);
         } catch (e) {
 
         }
-- 
cgit v1.2.3-70-g09d2


From e90059327d8910f46b9f2fb48716eb9267a060b5 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 03:24:03 -0400
Subject: Revert "Enabled https"

This reverts commit 05771afc1687f18bd645991d9a853637cc85e16f.
---
 package.json            |  1 -
 src/client/DocServer.ts |  2 +-
 src/server/index.ts     | 14 ++++----------
 src/server/server.cert  | 21 ---------------------
 src/server/server.key   | 28 ----------------------------
 5 files changed, 5 insertions(+), 61 deletions(-)
 delete mode 100644 src/server/server.cert
 delete mode 100644 src/server/server.key

(limited to 'src')

diff --git a/package.json b/package.json
index 8e8d93747..aa4abb0a5 100644
--- a/package.json
+++ b/package.json
@@ -117,7 +117,6 @@
         "formidable": "^1.2.1",
         "golden-layout": "^1.5.9",
         "html-to-image": "^0.1.0",
-        "https": "^1.0.0",
         "i": "^0.3.6",
         "image-data-uri": "^2.0.0",
         "jsonwebtoken": "^8.5.0",
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index b1b5ae529..cbcf751ee 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -8,7 +8,7 @@ import { Id, HandleUpdate } from '../new_fields/FieldSymbols';
 
 export namespace DocServer {
     const _cache: { [id: string]: RefField | Promise<Opt<RefField>> } = {};
-    const _socket = OpenSocket(`${window.location.origin}`);
+    const _socket = OpenSocket(`${window.location.protocol}//${window.location.hostname}:4321`);
     const GUID: string = Utils.GenerateGuid();
 
     export function makeReadOnly() {
diff --git a/src/server/index.ts b/src/server/index.ts
index e39dfcc14..fd66c90b4 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -2,7 +2,6 @@ import * as bodyParser from 'body-parser';
 import { exec } from 'child_process';
 import * as cookieParser from 'cookie-parser';
 import * as express from 'express';
-import * as https from 'https';
 import * as session from 'express-session';
 import * as expressValidator from 'express-validator';
 import * as formidable from 'formidable';
@@ -173,8 +172,6 @@ const pngTypes = [".png", ".PNG"];
 const jpgTypes = [".jpg", ".JPG", ".jpeg", ".JPEG"];
 const uploadDir = __dirname + "/public/files/";
 // SETTERS
-//TODO This should be a secured route, but iPhones don't seem to deal well with out authentication,
-// so in order for the image upload from phones to work, we can make this authenticated
 app.post(
     RouteStore.upload,
     (req, res) => {
@@ -292,13 +289,10 @@ app.use(wdm(compiler, { publicPath: config.output.publicPath }));
 app.use(whm(compiler));
 
 // start the Express server
-const httpsServer = https.createServer({
-    key: fs.readFileSync(__dirname + '/server.key'),
-    cert: fs.readFileSync(__dirname + '/server.cert')
-}, app).listen(port, () =>
+app.listen(port, () =>
     console.log(`server started at http://localhost:${port}`));
 
-const server = io(httpsServer);
+const server = io();
 interface Map {
     [key: string]: Client;
 }
@@ -447,5 +441,5 @@ function CreateField(newValue: any) {
     Database.Instance.insert(newValue, "newDocuments");
 }
 
-// server.listen(serverPort);
-// console.log(`listening on port ${serverPort}`);
\ No newline at end of file
+server.listen(serverPort);
+console.log(`listening on port ${serverPort}`);
\ No newline at end of file
diff --git a/src/server/server.cert b/src/server/server.cert
deleted file mode 100644
index e1610914c..000000000
--- a/src/server/server.cert
+++ /dev/null
@@ -1,21 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIDfzCCAmegAwIBAgIJAJzroap7RHCoMA0GCSqGSIb3DQEBCwUAMFYxCzAJBgNV
-BAYTAlVTMRUwEwYDVQQIDAxSaG9kZSBJc2xhbmQxEzARBgNVBAcMClByb3ZpZGVu
-Y2UxGzAZBgNVBAoMEkJyb3duIEdyYXBoaWNzIExhYjAeFw0xOTA1MjMwNjMxMDla
-Fw0xOTA2MjIwNjMxMDlaMFYxCzAJBgNVBAYTAlVTMRUwEwYDVQQIDAxSaG9kZSBJ
-c2xhbmQxEzARBgNVBAcMClByb3ZpZGVuY2UxGzAZBgNVBAoMEkJyb3duIEdyYXBo
-aWNzIExhYjCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBAMZK+dfIICO/
-w2E28yd98HFMiUNqKVWq5wEncvtaCk3zT/xSRvPrdQo8wvkgGqmjdbbi9hH1wu4u
-79MZTLIaSfU4JtVlchWyqT0Tp+y74KPEFAtIlV/PpHFYkG9728DumaBGg7x+a40j
-8aCLKhy4ij97IVXdn43sVCOQJNfwuxuHz2ofgjg90T/HOP2Jt5mEOygkCjPQmU45
-iR2iwVDu0DFKgD+EsosJdZk5n8yBdMTKFNoIgWpo9IJRzQ3ROqq1npcXI7rSQ3MB
-b+Hw3AkUIXfB18dfLZ+7WKzS0KEm5NM0H+C/bkzRo2D26BLYZQrzFZkk1diTevex
-Ws7e+4khn+8CAwEAAaNQME4wHQYDVR0OBBYEFAYSFlBF7Z0zQHVzLspbaIpGvTp1
-MB8GA1UdIwQYMBaAFAYSFlBF7Z0zQHVzLspbaIpGvTp1MAwGA1UdEwQFMAMBAf8w
-DQYJKoZIhvcNAQELBQADggEBAI2P2nl4Xn2BUwCOpFwCuyqB3/LTTmlz3qqdOfBj
-glxw6UqiLTiEQUe/q1ssthDE71NbtuVRSggzdJcoIdjMQrtG+eN79Ao22ZzhGnAj
-S/MTeybZmO+1Y7yV3RSEjXCmpxIGKueQsCYAdeoTpMny7BEtr09ZROccxDPcLI2H
-K91FtuCZbG7Inx10X4/PVnp9Yr1GW6zWxMkEXLPXko0o8gIf9Kj7njNEF0RPsHd9
-L3tJny4y92huYSs2aPJWeEtRit0nXIu86qXfoomMFBCsFLbGhqtwCpqogeL+QS+1
-bv0MKJk82jMpG/oLxbWwesBk2tb8R4knL2WlX32HegawoHs=
------END CERTIFICATE-----
diff --git a/src/server/server.key b/src/server/server.key
deleted file mode 100644
index c8a4f2745..000000000
--- a/src/server/server.key
+++ /dev/null
@@ -1,28 +0,0 @@
------BEGIN PRIVATE KEY-----
-MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDGSvnXyCAjv8Nh
-NvMnffBxTIlDailVqucBJ3L7WgpN80/8Ukbz63UKPML5IBqpo3W24vYR9cLuLu/T
-GUyyGkn1OCbVZXIVsqk9E6fsu+CjxBQLSJVfz6RxWJBve9vA7pmgRoO8fmuNI/Gg
-iyocuIo/eyFV3Z+N7FQjkCTX8Lsbh89qH4I4PdE/xzj9ibeZhDsoJAoz0JlOOYkd
-osFQ7tAxSoA/hLKLCXWZOZ/MgXTEyhTaCIFqaPSCUc0N0TqqtZ6XFyO60kNzAW/h
-8NwJFCF3wdfHXy2fu1is0tChJuTTNB/gv25M0aNg9ugS2GUK8xWZJNXYk3r3sVrO
-3vuJIZ/vAgMBAAECggEAXvm+XUoviq/oxwFoyXua1MmR3UZV8gBfkL/yZM2lrdxi
-bTqDXYVjk7mysVxdKO9wDF78+XE7IpY8rGGryIqq7dctUny6fgYK5YQqpEsAt6/M
-4fKsCS4NV3TSCXPLt8cQsiHUK05p+TpEG19MlmEVZn51Ywk5yOJvEnGSFBPrqq0z
-IRYksRThVeoFqy6J3BS26UqDVEwlhYAPk5bg9j/RaeyEmhEXzcjfnXuYdhqhMhzW
-sS6O4DM/QYs9DTn31kJ2ycgyVaQ/LYNRhp9yIDVSCCJyaInBbV6PV8DdNdr8oXOH
-4G95OtNGTuk9N6BMLDgj1KCEFUjE8bQD0TgMqljV0QKBgQD4aF+qinyAg8xwLsLl
-SKw4amPtlipC1YrOZ17Vtq7bU0WFSfLrKJAyDkvkf5L9OIWWsQNzLbq6enomlurm
-wgjjQyaNVEvQhuJ0P9ewu6CVSC3kT7jnTrQFEnIDSgY+Mt4dyp1HhDqxp4kdMOdf
-DUjyXWhyXpkokq+YXSsyM84q/QKBgQDMWnycVF/vjBy/RbbYO0rZDOl8z6F2WIl/
-wDYVi4fwe1KVWo2J/95dJd9g5DkHqkuyGBQs5Thq05QBBNhsFG87I2ghHCSC7OIz
-ME4sbkouXq4TpAvoiSvCZo5/Whgypuycx5Gn3aSWVStXOyZgyiLF2NcEvoaT4Qss
-w9hfcIU4WwKBgQDvrbVwlYKfdYvSSiweksoo/O5CFXvdVLFDihXE2ylH0cboXnuW
-TmMjCQxNApLO5LRwu4b6oQrkVrx5c3BfCqUMsoQGJWmpYBwr0lXI3qCIqUYuXoWo
-GRY1NqDvb4MqjGYoFJFAqeL/+wifM8pquiTCRUI75+6baT0oI+1D2Rx5+QKBgQCQ
-gDO5P5iPBR6Wyi8e+95TWOQJ07AyxSyFX19fIMlBbZLZ9aw8NugAKfWox/jjyLG5
-/3jUvkmEkJQJnGmFE3YL9V9+ei3/Po488B13IY3m+CBT1x5skgKVdnuw5f5SYuLR
-gfUnJH1rqFH7XuImcwjfqhNxUWBMVUfXoazw39n0HQKBgDXGubSFovavDSTAhh1t
-soMP+3yO+Ny/+Mv47cMfblqN7dItC58VcEX2IHd9Z9QgMNQ4BDCqRRDK4O1N7RLO
-bq6qV9WPyNwsDAZJLH2h9Y3gpDvUNFo+Kq/7V4ZTqaJC1YOjDKTXRnoZIwAje+5x
-iNk2xg38zIscD1Ff+tTCOnYA
------END PRIVATE KEY-----
-- 
cgit v1.2.3-70-g09d2


From 34b38c7382a40fb2a117d3c7418a81b34fa7ed7f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 23 May 2019 03:46:46 -0400
Subject: Cleaned up context menu

---
 src/client/views/ContextMenu.scss | 15 ++++++++-------
 src/client/views/ContextMenu.tsx  |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index b12ee3faa..61ae69179 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -31,8 +31,8 @@
 }
 
 .contextMenu-item {
-    width: 11vw; //10vw
-    height: 2.5vh; //2vh
+    // width: 11vw; //10vw
+    height: 30px; //2vh
     background: #DDDDDD;
     display: flex; //comment out to allow search icon to be inline with search text
     justify-content: left;
@@ -48,9 +48,9 @@
     border-style: none;
     border-color: $intermediate-color; //  rgb(187, 186, 186);
     border-bottom-style: solid;
-    padding: 10px 0px 10px 0px;
+    // padding: 10px 0px 10px 0px;
     white-space: nowrap;
-    font-size: 1vw;
+    font-size: 20px;
 }
 
 .contextMenu-item:hover {
@@ -59,13 +59,14 @@
 }
 
 .contextMenu-description {
-    font-size: 1vw;
+    font-size: 20px;
     text-align: left;
-    width: 8vw;
     display: inline; //need this?
 }
 
 .icon-background {
     background-color: #DDDDDD;
-    margin-right: 2px;
+    width: 35px;
+    text-align: center;
+    font-size: 22px;
 }
\ No newline at end of file
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 84c17a642..542d259d6 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -92,7 +92,7 @@ export class ContextMenu extends React.Component {
                     <span className="icon-background">
                         <FontAwesomeIcon icon="search" size="lg" />
                     </span>
-                    <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange} />
+                    <input className="contextMenu-item contextMenu-description" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange} />
                 </span>
                 {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
                     map(prop => <ContextMenuItem {...prop} key={prop.description} />)}
-- 
cgit v1.2.3-70-g09d2


From 8fea6a1d622b08cc1386960b94c72caf83cc6531 Mon Sep 17 00:00:00 2001
From: Sam Wilkins <samuel_wilkins@brown.edu>
Date: Thu, 23 May 2019 03:53:00 -0400
Subject: Made link lines bigger

---
 .../collections/collectionFreeForm/CollectionFreeFormLinkView.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index f646c7bde..d6097b9a3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -47,11 +47,11 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         return (
             <>
                 <line key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkLine"
-                    style={{ strokeWidth: `${l.length / 2}` }}
+                    style={{ strokeWidth: `${35 * l.length / 2}` }}
                     x1={`${x1}`} y1={`${y1}`}
                     x2={`${x2}`} y2={`${y2}`} />
                 <circle key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkCircle"
-                    cx={(x1 + x2) / 2} cy={(y1 + y2) / 2} r={5} onPointerDown={this.onPointerDown} />
+                    cx={(x1 + x2) / 2} cy={(y1 + y2) / 2} r={8} onPointerDown={this.onPointerDown} />
             </>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From dcfc5d77779117616503c31fc03f36841e25a3f9 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 24 May 2019 00:56:32 -0400
Subject: Added basic repl page

---
 deploy/debug/repl.html       | 14 +++++++++++
 src/client/util/Scripting.ts |  7 +++---
 src/debug/Repl.tsx           | 58 ++++++++++++++++++++++++++++++++++++++++++++
 src/new_fields/Doc.ts        | 15 +++++++++++-
 webpack.config.js            |  1 +
 5 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 deploy/debug/repl.html
 create mode 100644 src/debug/Repl.tsx

(limited to 'src')

diff --git a/deploy/debug/repl.html b/deploy/debug/repl.html
new file mode 100644
index 000000000..8ab07ec49
--- /dev/null
+++ b/deploy/debug/repl.html
@@ -0,0 +1,14 @@
+<html>
+
+<head>
+    <title>Debug REPL</title>
+    <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.3.1/typescript.min.js"></script>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="../repl.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index e45f61c11..beaf5cb03 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -41,7 +41,7 @@ export type CompileResult = CompiledScript | CompileError;
 
 function Run(script: string | undefined, customParams: string[], diagnostics: any[], originalScript: string, options: ScriptOptions): CompileResult {
     const errors = diagnostics.some(diag => diag.category === ts.DiagnosticCategory.Error);
-    if (errors || !script) {
+    if ((options.typecheck !== false && errors) || !script) {
         return { compiled: false, errors: diagnostics };
     }
 
@@ -131,10 +131,11 @@ export interface ScriptOptions {
     addReturn?: boolean;
     params?: { [name: string]: string };
     capturedVariables?: { [name: string]: Field };
+    typecheck?: boolean;
 }
 
 export function CompileScript(script: string, options: ScriptOptions = {}): CompileResult {
-    const { requiredType = "", addReturn = false, params = {}, capturedVariables = {} } = options;
+    const { requiredType = "", addReturn = false, params = {}, capturedVariables = {}, typecheck = true } = options;
     let host = new ScriptingCompilerHost;
     let paramNames: string[] = [];
     if ("this" in params || "this" in capturedVariables) {
@@ -158,7 +159,7 @@ export function CompileScript(script: string, options: ScriptOptions = {}): Comp
         ${addReturn ? `return ${script};` : script}
     })`;
     host.writeFile("file.ts", funcScript);
-    host.writeFile('node_modules/typescript/lib/lib.d.ts', typescriptlib);
+    if (typecheck) host.writeFile('node_modules/typescript/lib/lib.d.ts', typescriptlib);
     let program = ts.createProgram(["file.ts"], {}, host);
     let testResult = program.emit();
     let outputText = host.readFile("file.js");
diff --git a/src/debug/Repl.tsx b/src/debug/Repl.tsx
new file mode 100644
index 000000000..16aef1925
--- /dev/null
+++ b/src/debug/Repl.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { observer } from 'mobx-react';
+import { observable, computed } from 'mobx';
+import { CompileScript } from '../client/util/Scripting';
+
+@observer
+class Repl extends React.Component {
+    @observable text: string = "";
+
+    @observable executedCommands: { command: string, result: any }[] = [];
+
+    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.text = e.target.value;
+    }
+
+    onKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter") {
+            const script = CompileScript(this.text, { addReturn: true, typecheck: false });
+            if (!script.compiled) {
+                this.executedCommands.push({ command: this.text, result: "Compile Error" });
+            } else {
+                const result = script.run();
+                if (result.success) {
+                    this.executedCommands.push({ command: this.text, result: result.result });
+                } else {
+                    this.executedCommands.push({ command: this.text, result: result.error });
+                }
+            }
+            this.text = "";
+        }
+    }
+
+    @computed
+    get commands() {
+        return this.executedCommands.map(command => {
+            return (
+                <div style={{ marginTop: "5px" }}>
+                    <p>{command.command}</p>
+                    <p>{JSON.stringify(command.result)}</p>
+                </div>
+            );
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <div style={{ verticalAlign: "bottom" }}>
+                    {this.commands}
+                </div>
+                <input style={{ width: "100%", position: "absolute", bottom: "0px" }} value={this.text} onChange={this.onChange} onKeyDown={this.onKeyDown} />
+            </div>
+        );
+    }
+}
+
+ReactDOM.render(<Repl />, document.getElementById("root"));
\ No newline at end of file
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 793a83750..0c74b8f65 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -62,6 +62,7 @@ export class Doc extends RefField {
         const doc = new Proxy<this>(this, {
             set: setter,
             get: getter,
+            // getPrototypeOf: (target) => Cast(target[SelfProxy].proto, Doc) || null, // TODO this might be able to replace the proto logic in getter
             has: (target, key) => key in target.__fields,
             ownKeys: target => Object.keys(target.__fields),
             getOwnPropertyDescriptor: (target, prop) => {
@@ -69,6 +70,7 @@ export class Doc extends RefField {
                     return {
                         configurable: true,//TODO Should configurable be true?
                         enumerable: true,
+                        value: target.__fields[prop]
                     };
                 }
                 return Reflect.getOwnPropertyDescriptor(target, prop);
@@ -197,6 +199,18 @@ export namespace Doc {
         return Doc.GetT(doc, "isPrototype", "boolean", true) ? doc : doc.proto!;
     }
 
+    export function allKeys(doc: Doc): string[] {
+        const results: Set<string> = new Set;
+
+        let proto: Doc | undefined = doc;
+        while (proto) {
+            Object.keys(proto).forEach(key => results.add(key));
+            proto = proto.proto;
+        }
+
+        return Array.from(results);
+    }
+
 
     export function MakeAlias(doc: Doc) {
         const proto = Object.getOwnPropertyNames(doc).indexOf("isPrototype") === -1 ? doc.proto : undefined;
@@ -246,5 +260,4 @@ export namespace Doc {
         delegate.proto = doc;
         return delegate;
     }
-    export const Prototype = Symbol("Prototype");
 }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index c08742272..5e0a6a883 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,6 +8,7 @@ module.exports = {
     entry: {
         bundle: ["./src/client/views/Main.tsx", 'webpack-hot-middleware/client?reload=true'],
         viewer: ["./src/debug/Viewer.tsx", 'webpack-hot-middleware/client?reload=true'],
+        repl: ["./src/debug/Repl.tsx", 'webpack-hot-middleware/client?reload=true'],
         test: ["./src/debug/Test.tsx", 'webpack-hot-middleware/client?reload=true'],
         inkControls: ["./src/mobile/InkControls.tsx", 'webpack-hot-middleware/client?reload=true'],
         imageUpload: ["./src/mobile/ImageUpload.tsx", 'webpack-hot-middleware/client?reload=true'],
-- 
cgit v1.2.3-70-g09d2


From 568a3907a1277259eb9a0a5ae62cfcf5d7e60bf2 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 24 May 2019 01:11:23 -0400
Subject: Fixed firefox user select stuff Made repl multi-line

---
 src/client/views/Main.scss | 3 +++
 src/debug/Repl.tsx         | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 385298e18..57a53c999 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -15,6 +15,9 @@ body {
 
 div {
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }
 
 #dash-title {
diff --git a/src/debug/Repl.tsx b/src/debug/Repl.tsx
index 16aef1925..ef00ed466 100644
--- a/src/debug/Repl.tsx
+++ b/src/debug/Repl.tsx
@@ -10,12 +10,12 @@ class Repl extends React.Component {
 
     @observable executedCommands: { command: string, result: any }[] = [];
 
-    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         this.text = e.target.value;
     }
 
     onKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
+        if (e.ctrlKey && e.key === "Enter") {
             const script = CompileScript(this.text, { addReturn: true, typecheck: false });
             if (!script.compiled) {
                 this.executedCommands.push({ command: this.text, result: "Compile Error" });
@@ -49,7 +49,7 @@ class Repl extends React.Component {
                 <div style={{ verticalAlign: "bottom" }}>
                     {this.commands}
                 </div>
-                <input style={{ width: "100%", position: "absolute", bottom: "0px" }} value={this.text} onChange={this.onChange} onKeyDown={this.onKeyDown} />
+                <textarea style={{ width: "100%", position: "absolute", bottom: "0px" }} value={this.text} onChange={this.onChange} onKeyDown={this.onKeyDown} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 01d172a91d9a140129d2dd938c3289d7a0d25f16 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 24 May 2019 14:10:32 -0400
Subject: cleaned up nativewidth/height for Image and Video and some PDF stuff.

---
 package.json                                       |  1 +
 src/client/documents/Documents.ts                  | 12 +++-
 .../CollectionFreeFormLinkView.tsx                 |  4 +-
 .../CollectionFreeFormLinksView.tsx                |  7 ++-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  5 +-
 src/client/views/nodes/ImageBox.tsx                | 15 +----
 src/client/views/nodes/PDFBox.scss                 |  4 ++
 src/client/views/nodes/PDFBox.tsx                  |  2 +-
 src/client/views/nodes/VideoBox.tsx                | 68 +++++++---------------
 9 files changed, 53 insertions(+), 65 deletions(-)

(limited to 'src')

diff --git a/package.json b/package.json
index aa4abb0a5..d5abc808e 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
         "react-split-pane": "^0.1.85",
         "react-table": "^6.9.2",
         "request": "^2.88.0",
+        "request-image-size": "^2.1.0",
         "request-promise": "^4.2.4",
         "serializr": "^1.5.1",
         "sharp": "^0.22.1",
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ae190a989..1f4b76384 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -34,6 +34,7 @@ import { StrokeData, InkField } from "../../new_fields/InkField";
 import { dropActionType } from "../util/DragManager";
 import { DateField } from "../../new_fields/DateField";
 import { UndoManager } from "../util/UndoManager";
+var requestImageSize = require('request-image-size');
 
 export interface DocumentOptions {
     x?: number;
@@ -216,7 +217,16 @@ export namespace Docs {
     }
 
     export function ImageDocument(url: string, options: DocumentOptions = {}) {
-        return CreateInstance(imageProto, new ImageField(new URL(url)), options);
+        let inst = CreateInstance(imageProto, new ImageField(new URL(url)), options);
+        requestImageSize(url)
+            .then((size: any) => {
+                if (!inst.proto!.nativeWidth) {
+                    inst.proto!.nativeWidth = size.width;
+                }
+                inst.proto!.nativeHeight = Number(inst.proto!.nativeWidth!) * size.height / size.width;
+            })
+            .catch((err: any) => console.log(err));
+        return inst;
         // let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] },
         //     [new URL(url), ImageField]);
         // doc.SetText(KeyStore.Caption, "my caption...");
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index d6097b9a3..61de83f57 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -46,11 +46,11 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         let y2 = NumCast(b.y) + (BoolCast(b.isMinimized, false) ? 5 : NumCast(b.height) / NumCast(b.zoomBasis, 1) / 2);
         return (
             <>
-                <line key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkLine"
+                <line key={"linkLine"} className="collectionfreeformlinkview-linkLine"
                     style={{ strokeWidth: `${35 * l.length / 2}` }}
                     x1={`${x1}`} y1={`${y1}`}
                     x2={`${x2}`} y2={`${y2}`} />
-                <circle key={Utils.GenerateGuid()} className="collectionfreeformlinkview-linkCircle"
+                <circle key={"linkCircle"} className="collectionfreeformlinkview-linkCircle"
                     cx={(x1 + x2) / 2} cy={(y1 + y2) / 2} r={8} onPointerDown={this.onPointerDown} />
             </>
         );
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index c5f7ad0d1..85556fb90 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -113,8 +113,11 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
             );
             return drawnPairs;
         }, [] as { a: Doc, b: Doc, l: Doc[] }[]);
-        return connections.map(c => <CollectionFreeFormLinkView key={Utils.GenerateGuid()} A={c.a} B={c.b} LinkDocs={c.l}
-            removeDocument={this.props.removeDocument} addDocument={this.props.addDocument} />);
+        return connections.map(c => {
+            let x = c.l.reduce((p, l) => p + l[Id], "");
+            return <CollectionFreeFormLinkView key={x} A={c.a} B={c.b} LinkDocs={c.l}
+                removeDocument={this.props.removeDocument} addDocument={this.props.addDocument} />;
+        });
     }
 
     render() {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 8be0766eb..d1c4fb72d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -323,7 +323,10 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
     }
 
-    private childViews = () => [...this.views, <CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />];
+    private childViews = () => [
+        <CollectionFreeFormBackgroundView key="backgroundView" {...this.props} {...this.getDocumentViewProps(this.props.Document)} />,
+        ...this.views
+    ];
     render() {
         const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`;
         const easing = () => this.props.Document.panTransformType === "Ease";
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index cc0dc8220..128f3c6f8 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -12,7 +12,7 @@ import React = require("react");
 import { createSchema, makeInterface, listSpec } from '../../../new_fields/Schema';
 import { DocComponent } from '../DocComponent';
 import { positionSchema } from './DocumentView';
-import { FieldValue, Cast, StrCast } from '../../../new_fields/Types';
+import { FieldValue, Cast, StrCast, PromiseValue } from '../../../new_fields/Types';
 import { ImageField } from '../../../new_fields/URLField';
 import { List } from '../../../new_fields/List';
 import { InkingControl } from '../InkingControl';
@@ -21,6 +21,7 @@ import { faImage } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
 var path = require('path');
 
+
 library.add(faImage);
 
 
@@ -43,15 +44,6 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
     @observable private _isOpen: boolean = false;
     private dropDisposer?: DragManager.DragDropDisposer;
 
-    @action
-    onLoad = (target: any) => {
-        var h = this._imgRef.current!.naturalHeight;
-        var w = this._imgRef.current!.naturalWidth;
-        if (this._photoIndex === 0 && (this.props as any).id !== "isExpander" && (!this.Document.nativeWidth || !this.Document.nativeHeight || Math.abs(this.Document.nativeWidth / this.Document.nativeHeight - w / h) > 0.05)) {
-            Doc.SetOnPrototype(this.Document, "nativeHeight", FieldValue(this.Document.nativeWidth, 0) * h / w);
-            this.Document.height = FieldValue(this.Document.width, 0) * h / w;
-        }
-    }
 
 
     protected createDropTarget = (ele: HTMLDivElement) => {
@@ -217,8 +209,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
                     // style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }}
                     width={nativeWidth}
                     ref={this._imgRef}
-                    onError={this.onError}
-                    onLoad={this.onLoad} />
+                    onError={this.onError} />
                 {paths.length > 1 ? this.dots(paths) : (null)}
                 {/* {this.lightbox(paths)} */}
             </div>);
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 3760e378a..449408a61 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -17,6 +17,10 @@
     z-index: 25;
     pointer-events: all;
 }
+.pdfBox-thumbnail {
+    position: absolute;
+    width: 100%;
+}
 .pdfButton {
     pointer-events: all;
     width: 100px;
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 733bc920f..aa29a7170 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -375,7 +375,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
             // else if (this._largeRetryCount < 10) this._curSuffix = "_l";
             if (field instanceof ImageField) path = this.choosePath(field.url);
             // }
-            return <img key={path + (this._mediumRetryCount).toString()} style={{ position: "absolute", width: "100%" }} src={path} onError={this.onError} />;
+            return <img className="pdfBox-thumbnail" key={path + (this._mediumRetryCount).toString()} src={path} onError={this.onError} />;
         }
         return (null);
     }
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index ab57b4b04..35ecf12f6 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -10,10 +10,10 @@ import { makeInterface } from "../../../new_fields/Schema";
 import { pageSchema } from "./ImageBox";
 import { Cast, FieldValue, NumCast } from "../../../new_fields/Types";
 import { VideoField } from "../../../new_fields/URLField";
-import Measure from "react-measure";
 import "./VideoBox.scss";
 import { RouteStore } from "../../../server/RouteStore";
 import { DocServer } from "../../DocServer";
+import { actionFieldDecorator } from "mobx/lib/internal";
 
 type VideoDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>;
 const VideoDocument = makeInterface(positionSchema, pageSchema);
@@ -22,30 +22,23 @@ const VideoDocument = makeInterface(positionSchema, pageSchema);
 export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoDocument) {
     private _reactionDisposer?: IReactionDisposer;
     private _videoRef: HTMLVideoElement | null = null;
-    private _loaded: boolean = false;
     @observable _playTimer?: NodeJS.Timeout = undefined;
     @observable _fullScreen = false;
     @observable public Playing: boolean = false;
     public static LayoutString() { return FieldView.LayoutString(VideoBox); }
 
-    public get player(): HTMLVideoElement | undefined {
-        if (this._videoRef) {
-            return this._videoRef;
-        }
+    public get player(): HTMLVideoElement | null {
+        return this._videoRef;
     }
-    @action
-    setScaling = (r: any) => {
-        if (this._loaded) {
-            // bcz: the nativeHeight should really be set when the document is imported.
-            var nativeWidth = FieldValue(this.Document.nativeWidth, 0);
-            var nativeHeight = FieldValue(this.Document.nativeHeight, 0);
-            var newNativeHeight = nativeWidth * r.offset.height / r.offset.width;
-            if (!nativeHeight && newNativeHeight !== nativeHeight && !isNaN(newNativeHeight)) {
-                this.Document.height = newNativeHeight / nativeWidth * FieldValue(this.Document.width, 0);
-                this.Document.nativeHeight = newNativeHeight;
-            }
-        } else {
-            this._loaded = true;
+
+    videoLoad = () => {
+        let aspect = this.player!.videoWidth / this.player!.videoHeight;
+        var nativeWidth = FieldValue(this.Document.nativeWidth, 0);
+        var nativeHeight = FieldValue(this.Document.nativeHeight, 0);
+        if (!nativeWidth || !nativeHeight) {
+            if (!this.Document.nativeWidth) this.Document.nativeWidth = this.player!.videoWidth;
+            this.Document.nativeHeight = this.Document.nativeWidth / aspect;
+            this.Document.height = FieldValue(this.Document.width, 0) / aspect;
         }
     }
 
@@ -88,22 +81,12 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         if (vref) {
             vref.onfullscreenchange = action((e) => this._fullScreen = vref.webkitDisplayingFullscreen);
             if (this._reactionDisposer) this._reactionDisposer();
-            this._reactionDisposer = reaction(() => this.props.Document.curPage, () => {
-                if (!this.Playing) {
-                    vref.currentTime = NumCast(this.props.Document.curPage, 0);
-                }
-            }, { fireImmediately: true });
+            this._reactionDisposer = reaction(() => this.props.Document.curPage, () =>
+                !this.Playing && (vref.currentTime = this.Document.curPage || 0)
+                , { fireImmediately: true });
         }
     }
 
-    videoContent(path: string) {
-        let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : "");
-        return <video className={`${style}`} ref={this.setVideoRef} onPointerDown={this.onPointerDown}>
-            <source src={path} type="video/mp4" />
-            Not supported.
-        </video>;
-    }
-
     getMp4ForVideo(videoId: string = "JN5beCVArMs") {
         return new Promise(async (resolve, reject) => {
             const videoInfoRequestConfig = {
@@ -111,7 +94,6 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
                     connection: 'keep-alive',
                     "user-agent": 'Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/46.0',
                 },
-
             };
             try {
                 let responseSchema: any = {};
@@ -145,9 +127,6 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
 
     render() {
         let field = Cast(this.Document[this.props.fieldKey], VideoField);
-        if (!field) {
-            return <div>Loading</div>;
-        }
 
         // this.getMp4ForVideo().then((mp4) => {
         //     console.log(mp4);
@@ -155,15 +134,12 @@ export class VideoBox extends DocComponent<FieldViewProps, VideoDocument>(VideoD
         //     console.log("")
         // });
         // //
-        let content = this.videoContent(field.url.href);
-        return NumCast(this.props.Document.nativeHeight) ?
-            content :
-            <Measure offset onResize={this.setScaling}>
-                {({ measureRef }) =>
-                    <div style={{ width: "100%", height: "auto" }} ref={measureRef}>
-                        {content}
-                    </div>
-                }
-            </Measure>;
+
+        let style = "videoBox-cont" + (this._fullScreen ? "-fullScreen" : "");
+        return !field ? <div>Loading</div> :
+            <video className={`${style}`} ref={this.setVideoRef} onCanPlay={this.videoLoad} onPointerDown={this.onPointerDown}>
+                <source src={field.url.href} type="video/mp4" />
+                Not supported.
+            </video>;
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From f7ae243462a819c69ee4ba9d828b69b3685a0e13 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 24 May 2019 17:54:30 -0400
Subject: restructured schemaView for performance/clarity

---
 .../views/collections/CollectionSchemaView.tsx     | 193 ++++++++++++---------
 1 file changed, 114 insertions(+), 79 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b793447ff..1af13765b 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, untracked, runInAction } from "mobx";
+import { action, computed, observable, untracked, runInAction, trace } from "mobx";
 import { observer } from "mobx-react";
 import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
 import { MAX_ROW_HEIGHT } from '../../views/globalCssVariables.scss';
@@ -27,8 +27,13 @@ import { Id } from "../../../new_fields/FieldSymbols";
 import { Gateway } from "../../northstar/manager/Gateway";
 import { Docs } from "../../documents/Documents";
 import { ContextMenu } from "../ContextMenu";
+import { CollectionView } from "./CollectionView";
+import { CollectionPDFView } from "./CollectionPDFView";
+import { CollectionVideoView } from "./CollectionVideoView";
 
 
+library.add(faCog);
+library.add(faPlus);
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
 
@@ -51,7 +56,7 @@ class KeyToggle extends React.Component<{ keyName: string, checked: boolean, tog
 @observer
 export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     private _mainCont?: HTMLDivElement;
-    private _startSplitPercent = 0;
+    private _startPreviewWidth = 0;
     private DIVIDER_WIDTH = 4;
 
     @observable _columns: Array<string> = ["title", "data", "author"];
@@ -60,10 +65,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @observable _keys: string[] = [];
     @observable _newKeyName: string = "";
 
-    @computed get splitPercentage() { return NumCast(this.props.Document.schemaSplitPercentage); }
+    @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
+    @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
+    @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); }
     @computed get columns() { return Cast(this.props.Document.schemaColumns, listSpec("string"), []); }
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
-
     @computed get tableColumns() {
         return this.columns.map(col => {
             const ref = React.createRef<HTMLParagraphElement>();
@@ -194,30 +200,31 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
     //toggles preview side-panel of schema
     @action
-    toggleExpander = (event: React.ChangeEvent<HTMLInputElement>) => {
-        this.props.Document.schemaSplitPercentage = this.splitPercentage === 0 ? 33 : 0;
+    toggleExpander = () => {
+        this.props.Document.schemaPreviewWidth = this.previewWidth() === 0 ? Math.min(this.tableWidth / 3, 200) : 0;
     }
 
+    onDividerDown = (e: React.PointerEvent) => {
+        this._startPreviewWidth = this.previewWidth();
+        e.stopPropagation();
+        e.preventDefault();
+        document.addEventListener("pointermove", this.onDividerMove);
+        document.addEventListener('pointerup', this.onDividerUp);
+    }
     @action
     onDividerMove = (e: PointerEvent): void => {
         let nativeWidth = this._mainCont!.getBoundingClientRect();
-        this.props.Document.schemaSplitPercentage = Math.max(0, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100));
+        this.props.Document.schemaPreviewWidth = Math.min(nativeWidth.right - nativeWidth.left - 40,
+            this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]);
     }
     @action
     onDividerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointermove", this.onDividerMove);
         document.removeEventListener('pointerup', this.onDividerUp);
-        if (this._startSplitPercent === this.splitPercentage) {
-            this.props.Document.schemaSplitPercentage = this.splitPercentage === 0 ? 33 : 0;
+        if (this._startPreviewWidth === this.previewWidth()) {
+            this.toggleExpander();
         }
     }
-    onDividerDown = (e: React.PointerEvent) => {
-        this._startSplitPercent = this.splitPercentage;
-        e.stopPropagation();
-        e.preventDefault();
-        document.addEventListener("pointermove", this.onDividerMove);
-        document.addEventListener('pointerup', this.onDividerUp);
-    }
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) {
@@ -270,63 +277,16 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         this._newKeyName = e.currentTarget.value;
     }
 
-    @observable previewScript: string = "";
-    @action
-    onPreviewScriptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.previewScript = e.currentTarget.value;
-    }
-
     @computed
     get previewDocument(): Doc | undefined {
         const children = DocListCast(this.props.Document[this.props.fieldKey]);
         const selected = children.length > this._selectedIndex ? FieldValue(children[this._selectedIndex]) : undefined;
         return selected ? (this.previewScript && this.previewScript !== "this" ? FieldValue(Cast(selected[this.previewScript], Doc)) : selected) : undefined;
     }
-    get tableWidth() { return (this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH) * (1 - this.splitPercentage / 100); }
-    get previewRegionHeight() { return this.props.PanelHeight() - 2 * this.borderWidth; }
-    get previewRegionWidth() { return (this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH) * this.splitPercentage / 100; }
-
-    private previewDocNativeWidth = () => Cast(this.previewDocument!.nativeWidth, "number", this.previewRegionWidth);
-    private previewDocNativeHeight = () => Cast(this.previewDocument!.nativeHeight, "number", this.previewRegionHeight);
-    private previewContentScaling = () => {
-        let wscale = this.previewRegionWidth / (this.previewDocNativeWidth() ? this.previewDocNativeWidth() : this.previewRegionWidth);
-        if (wscale * this.previewDocNativeHeight() > this.previewRegionHeight) {
-            return this.previewRegionHeight / (this.previewDocNativeHeight() ? this.previewDocNativeHeight() : this.previewRegionHeight);
-        }
-        return wscale;
-    }
-    private previewPanelWidth = () => this.previewDocNativeWidth() * this.previewContentScaling();
-    private previewPanelHeight = () => this.previewDocNativeHeight() * this.previewContentScaling();
-    get previewPanelCenteringOffset() { return (this.previewRegionWidth - this.previewDocNativeWidth() * this.previewContentScaling()) / 2; }
+
     getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform().translate(
-        - this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth - this.previewPanelCenteringOffset,
-        - this.borderWidth).scale(1 / this.previewContentScaling())
+        - this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth, - this.borderWidth);
 
-    @computed
-    get previewPanel() {
-        // let doc = CompileScript(this.previewScript, { this: selected }, true)();
-        const previewDoc = this.previewDocument;
-        return (<div className="collectionSchemaView-previewRegion" style={{ width: `${Math.max(0, this.previewRegionWidth - 1)}px` }}>
-            {!previewDoc || !this.previewRegionWidth ? (null) : (
-                <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.previewPanelCenteringOffset}px, 0px)` }}>
-                    <DocumentView Document={previewDoc} isTopMost={false} selectOnLoad={false}
-                        toggleMinimized={emptyFunction}
-                        addDocument={this.props.addDocument} removeDocument={this.props.removeDocument}
-                        ScreenToLocalTransform={this.getPreviewTransform}
-                        ContentScaling={this.previewContentScaling}
-                        PanelWidth={this.previewPanelWidth} PanelHeight={this.previewPanelHeight}
-                        ContainingCollectionView={this.props.CollectionView}
-                        focus={emptyFunction}
-                        parentActive={this.props.active}
-                        whenActiveChanged={this.props.whenActiveChanged}
-                        bringToFront={emptyFunction}
-                        addDocTab={this.props.addDocTab}
-                    />
-                </div>)}
-            <input className="collectionSchemaView-input" value={this.previewScript} onChange={this.onPreviewScriptChange}
-                style={{ left: `calc(50% - ${Math.min(75, (previewDoc ? this.previewPanelWidth() / 2 : 75))}px)` }} />
-        </div>);
-    }
 
     get documentKeysCheckList() {
         const docs = DocListCast(this.props.Document[this.props.fieldKey]);
@@ -352,7 +312,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                     <div id="schema-options-header"><h5><b>Options</b></h5></div>
                     <div id="options-flyout-div">
                         <h6 className="schema-options-subHeader">Preview Window</h6>
-                        <div id="preview-schema-checkbox-div"><input type="checkbox" key={"Show Preview"} checked={this.splitPercentage !== 0} onChange={this.toggleExpander} />  Show Preview </div>
+                        <div id="preview-schema-checkbox-div"><input type="checkbox" key={"Show Preview"} checked={this.previewWidth() !== 0} onChange={this.toggleExpander} />  Show Preview </div>
                         <h6 className="schema-options-subHeader" >Displayed Columns</h6>
                         <ul id="schema-col-checklist" >
                             {this.documentKeysCheckList}
@@ -366,32 +326,107 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             </Flyout>);
     }
 
+    @computed
+    get reactTable() {
+        trace();
+        let previewWidth = this.previewWidth() + 2 * this.borderWidth + this.DIVIDER_WIDTH + 1;
+        return <ReactTable style={{ position: "relative", float: "left", width: `calc(100% - ${previewWidth}px` }} data={this.childDocs} page={0} pageSize={this.childDocs.length} showPagination={false}
+            columns={this.tableColumns}
+            column={{ ...ReactTableDefaults.column, Cell: this.renderCell, }}
+            getTrProps={this.getTrProps}
+        />
+    }
+
     @computed
     get dividerDragger() {
-        return this.splitPercentage === 0 ? (null) :
+        return this.previewWidth() === 0 ? (null) :
             <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />;
     }
 
-
+    @computed
+    get previewPanel() {
+        trace();
+        return !this.previewDocument ? (null) : <CollectionSchemaPreview
+            Document={this.previewDocument}
+            width={this.previewWidth}
+            height={this.previewHeight}
+            getTransform={this.getPreviewTransform}
+            CollectionView={this.props.CollectionView}
+            addDocument={this.props.addDocument}
+            removeDocument={this.props.removeDocument}
+            active={this.props.active}
+            whenActiveChanged={this.props.whenActiveChanged}
+            addDocTab={this.props.addDocTab}
+        />
+    }
 
     render() {
-        library.add(faCog);
-        library.add(faPlus);
-        const children = this.childDocs;
+        trace();
         return (
             <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} onWheel={this.onWheel}
                 onDrop={(e: React.DragEvent) => this.onDrop(e, {})} onContextMenu={this.onContextMenu} ref={this.createTarget}>
-                <div className="collectionSchemaView-tableContainer" style={{ width: `${this.tableWidth}px` }}>
-                    <ReactTable data={children} page={0} pageSize={children.length} showPagination={false}
-                        columns={this.tableColumns}
-                        column={{ ...ReactTableDefaults.column, Cell: this.renderCell, }}
-                        getTrProps={this.getTrProps}
-                    />
-                </div>
+                {this.reactTable}
                 {this.dividerDragger}
-                {this.previewPanel}
+                {!this.previewWidth() ? (null) : this.previewPanel}
                 {this.tableOptionsPanel}
             </div>
         );
     }
+}
+interface CollectionSchemaPreviewProps {
+    Document: Doc;
+    width: () => number;
+    height: () => number;
+    CollectionView: CollectionView | CollectionPDFView | CollectionVideoView;
+    getTransform: () => Transform;
+    addDocument: (document: Doc, allowDuplicates?: boolean) => boolean;
+    removeDocument: (document: Doc) => boolean;
+    active: () => boolean;
+    whenActiveChanged: (isActive: boolean) => void;
+    addDocTab: (document: Doc, where: string) => void;
+}
+
+@observer
+class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewProps>{
+    @observable previewScript: string = "";
+    private get nativeWidth() { return NumCast(this.props.Document.nativeWidth, this.props.width()); }
+    private get nativeHeight() { return NumCast(this.props.Document.nativeHeight, this.props.height()); }
+    private contentScaling = () => {
+        let wscale = this.props.width() / (this.nativeWidth ? this.nativeWidth : this.props.width());
+        if (wscale * this.nativeHeight > this.props.height()) {
+            return this.props.height() / (this.nativeHeight ? this.nativeHeight : this.props.height());
+        }
+        return wscale;
+    }
+    private PanelWidth = () => this.nativeWidth * this.contentScaling();
+    private PanelHeight = () => this.nativeHeight * this.contentScaling();
+    private getTransform = () => this.props.getTransform().translate(-this.centeringOffset, 0).scale(1 / this.contentScaling())
+    get centeringOffset() { return (this.props.width() - this.nativeWidth * this.contentScaling()) / 2; }
+    @action
+    onPreviewScriptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.previewScript = e.currentTarget.value;
+    }
+    render() {
+        trace();
+        return (<div className="collectionSchemaView-previewRegion" style={{ width: this.props.width() }}>
+            {!this.props.Document || !this.props.width ? (null) : (
+                <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.centeringOffset}px, 0px)` }}>
+                    <DocumentView Document={this.props.Document} isTopMost={false} selectOnLoad={false}
+                        toggleMinimized={emptyFunction}
+                        addDocument={this.props.addDocument} removeDocument={this.props.removeDocument}
+                        ScreenToLocalTransform={this.getTransform}
+                        ContentScaling={this.contentScaling}
+                        PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight}
+                        ContainingCollectionView={this.props.CollectionView}
+                        focus={emptyFunction}
+                        parentActive={this.props.active}
+                        whenActiveChanged={this.props.whenActiveChanged}
+                        bringToFront={emptyFunction}
+                        addDocTab={this.props.addDocTab}
+                    />
+                </div>)}
+            <input className="collectionSchemaView-input" value={this.previewScript} onChange={this.onPreviewScriptChange}
+                style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} />
+        </div>);
+    }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From ca95adb9a7b213455ea919b18c70eef0f2334bd9 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 28 May 2019 13:46:47 -0400
Subject: Made REPL formatting better

---
 src/debug/Repl.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/debug/Repl.tsx b/src/debug/Repl.tsx
index ef00ed466..01acb0e76 100644
--- a/src/debug/Repl.tsx
+++ b/src/debug/Repl.tsx
@@ -24,7 +24,7 @@ class Repl extends React.Component {
                 if (result.success) {
                     this.executedCommands.push({ command: this.text, result: result.result });
                 } else {
-                    this.executedCommands.push({ command: this.text, result: result.error });
+                    this.executedCommands.push({ command: this.text, result: result.error.message || result.error });
                 }
             }
             this.text = "";
@@ -37,7 +37,7 @@ class Repl extends React.Component {
             return (
                 <div style={{ marginTop: "5px" }}>
                     <p>{command.command}</p>
-                    <p>{JSON.stringify(command.result)}</p>
+                    <pre>{JSON.stringify(command.result, null, 2)}</pre>
                 </div>
             );
         });
-- 
cgit v1.2.3-70-g09d2


From e4a298e8e5410af8654e0e2aafd6e21c212ecee1 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 28 May 2019 14:36:02 -0400
Subject: added pasting of img url's with ctrl-b, switched stacking view to a
 masonry view like pinterest. fixed template overlays.

---
 package.json                                       |  1 +
 src/client/documents/Documents.ts                  |  3 +-
 src/client/views/Templates.tsx                     | 10 ++-
 .../views/collections/CollectionStackingView.scss  |  7 ++
 .../views/collections/CollectionStackingView.tsx   | 62 ++++++++++++---
 .../collectionFreeForm/CollectionFreeFormView.scss |  7 ++
 .../collections/collectionFreeForm/MarqueeView.tsx | 88 ++++++++++++----------
 src/client/views/nodes/ImageBox.tsx                |  2 +-
 8 files changed, 122 insertions(+), 58 deletions(-)

(limited to 'src')

diff --git a/package.json b/package.json
index d5abc808e..df0767b50 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
         "html-to-image": "^0.1.0",
         "i": "^0.3.6",
         "image-data-uri": "^2.0.0",
+        "imagesloaded": "^4.1.4",
         "jsonwebtoken": "^8.5.0",
         "jsx-to-string": "^1.4.0",
         "lodash": "^4.17.11",
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1f4b76384..4bc0df31f 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -34,6 +34,7 @@ import { StrokeData, InkField } from "../../new_fields/InkField";
 import { dropActionType } from "../util/DragManager";
 import { DateField } from "../../new_fields/DateField";
 import { UndoManager } from "../util/UndoManager";
+import { RouteStore } from "../../server/RouteStore";
 var requestImageSize = require('request-image-size');
 
 export interface DocumentOptions {
@@ -218,7 +219,7 @@ export namespace Docs {
 
     export function ImageDocument(url: string, options: DocumentOptions = {}) {
         let inst = CreateInstance(imageProto, new ImageField(new URL(url)), options);
-        requestImageSize(url)
+        requestImageSize(window.origin + RouteStore.corsProxy + "/" + url)
             .then((size: any) => {
                 if (!inst.proto!.nativeWidth) {
                     inst.proto!.nativeWidth = size.width;
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 5a99b3d90..303f3f3b8 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -56,10 +56,12 @@ export namespace Templates {
         </div>` );
 
     export const Title = new Template("Title", TemplatePosition.InnerTop,
-        `<div><div style="height:calc(100% - 25px); margin-top: 25px; width:100%;position:absolute;">{layout}</div>
-        <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; ">
-            <span style="text-align:center;width:100%;font-size:20px;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{props.Document.title}</span>
-        </div></div>` );
+        `<div>
+            <div style="height:calc(100% - 25px); margin-top: 25px; width:100%;position:absolute;">{layout}</div>
+            <div style="height:25px; width:100%; position:absolute; top: 0; background-color: rgba(0, 0, 0, .4); color: white; ">
+                <span style="text-align:center;width:100%;font-size:20px;position:absolute;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">{props.Document.title}</span>
+            </div>
+        </div>` );
 
     export const Bullet = new Template("Bullet", TemplatePosition.InnerTop,
         `<div>
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 803e680e5..6043a813d 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -31,6 +31,13 @@
         align-items: center;
     }
 
+    .collectionStackingview-masonryGrid {
+        display:grid;
+        width:100%;
+        height:100%;
+        position: absolute;
+    }
+
     .collectionStackingView-description {
         font-size: 100%;
         margin-bottom: 1vw;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index a1cb73123..a29648d5b 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -1,36 +1,76 @@
 import React = require("react");
 import { observer } from "mobx-react";
-import { CollectionSubView } from "./CollectionSubView";
-import Measure from "react-measure";
-import { Doc, WidthSym, HeightSym } from "../../../new_fields/Doc";
+import { CollectionSubView, CollectionViewProps, SubCollectionViewProps } from "./CollectionSubView";
+import { Doc, WidthSym, HeightSym, DocListCast } from "../../../new_fields/Doc";
 import { DocumentView } from "../nodes/DocumentView";
 import { Transform } from "../../util/Transform";
 import { emptyFunction, returnOne } from "../../../Utils";
 import "./CollectionStackingView.scss";
-import { runInAction, action, observable, computed } from "mobx";
-import { StrCast } from "../../../new_fields/Types";
+import { action, reaction } from "mobx";
+import { StrCast, NumCast } from "../../../new_fields/Types";
+import { Id } from "../../../new_fields/FieldSymbols";
+
+
 
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
     getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform();
 
+    constructor(props: SubCollectionViewProps) {
+        super(props);
+        // reaction(() => [this.props.PanelHeight() + this.props.PanelWidth(),
+        // (this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.Document[this.props.ContainingCollectionView.props.fieldKey])], () => {
+        //         if (this.props.ContainingCollectionView) {
+        //             let allItems = DocListCast(this.props.ContainingCollectionView.props.Document[this.props.ContainingCollectionView.props.fieldKey]);
+        //             for (let x = 0; x < allItems.length; x++) {
+        //                 resizeGridItem(allItems[x]);
+        //             }
+        //         }
+        //     }
+        // );
+    }
+
     @action
     moveDocument = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => {
         this.props.removeDocument(doc);
         addDocument(doc);
         return true;
     }
-
     render() {
         const docs = this.childDocs;
+        let gridGap = 10;
+        let gridSize = 20;
+        let itemWidth = NumCast(this.props.Document.itemWidth, 250);
+        let leftMargin = 20;
+        let topMargin = 20;
+        let itemCols = Math.ceil(itemWidth / (gridSize + gridGap));
+        let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (gridSize + gridGap)));
         return (
-            <div className="collectionStackingView" onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
-                <div className="collectionStackingView-description">{StrCast(this.props.Document.documentText, StrCast(this.props.Document.title, "stacking collection"))}</div>
-                <div className="collectionStackingView-flexCont">
+            <div className="collectionStackingView" ref={this.createDropTarget} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
+                <div className="collectionStackingview-masonryGrid"
+                    style={{
+                        padding: `${topMargin}px 0px 0px ${leftMargin}px`,
+                        width: `${cells * itemCols * (gridSize + gridGap) + leftMargin}`,
+                        margin: "auto", position: "relative",
+                        gridGap: gridGap,
+                        gridTemplateColumns: `repeat(auto-fill, minmax(${gridSize}px,1fr))`,
+                        gridAutoRows: `${gridSize}px`
+                    }}
+                >
                     {docs.map(d => {
-                        return (<div className="collectionStackingView-docView-container">
+                        let colSpan = Math.ceil((itemWidth + gridGap) / (gridSize + gridGap));
+                        let rowSpan = Math.ceil((itemWidth / d[WidthSym]() * d[HeightSym]() + gridGap) / (gridSize + gridGap));
+                        return (<div className="mycontent" id={StrCast(d.title, "")}
+                            key={d[Id]}
+                            style={{
+                                transformOrigin: "top left",
+                                gridRowEnd: `span  ${rowSpan}`,
+                                gridColumnEnd: `span  ${colSpan}`,
+                                transform: `scale(${itemWidth / NumCast(d.nativeWidth, 1)}, ${itemWidth / NumCast(d.nativeWidth, 1)})`
+                            }} >
                             <DocumentView Document={d}
-                                addDocument={this.props.addDocument} removeDocument={this.props.removeDocument}
+                                addDocument={this.props.addDocument}
+                                removeDocument={this.props.removeDocument}
                                 moveDocument={this.moveDocument}
                                 ContainingCollectionView={this.props.CollectionView}
                                 isTopMost={false}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 8557a3db4..e10ba9d7e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -25,6 +25,9 @@
         height: 100%;
         width: 100%;
     }
+    >.jsx-parser {
+        z-index:0;
+    }
 
     //nested freeform views
     // .collectionfreeformview-container {
@@ -52,6 +55,10 @@
         position: inherit;
         height: 100%;
     }
+    
+    >.jsx-parser {
+        z-index:0;
+    }
 
     .formattedTextBox-cont {
         background: $light-color-secondary;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 973ebfbdd..64d5301c9 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -83,56 +83,62 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 });
             })();
         } else if (e.key === "b" && e.ctrlKey) {
-            //heuristically converts pasted text into a table.
-            // assumes each entry is separated by a tab
-            // skips all rows until it gets to a row with more than one entry
-            // assumes that 1st row has header entry for each column
-            // assumes subsequent rows have entries for each column header OR
-            //         any row that has only one column is a section header-- this header is then added as a column to subsequent rows until the next header
-            // assumes each cell is a string or a number
             e.preventDefault();
-            (async () => {
-                let text: string = await navigator.clipboard.readText();
+            navigator.clipboard.readText().then(text => {
                 let ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== "");
-                while (ns.length > 0 && ns[0].split("\t").length < 2) {
-                    ns.splice(0, 1);
-                }
-                if (ns.length > 0) {
-                    let columns = ns[0].split("\t");
-                    let docList: Doc[] = [];
-                    let groupAttr: string | number = "";
-                    let rowProto = new Doc();
-                    rowProto.title = rowProto.Id;
-                    rowProto.width = 200;
-                    rowProto.isPrototype = true;
-                    for (let i = 1; i < ns.length - 1; i++) {
-                        let values = ns[i].split("\t");
-                        if (values.length === 1 && columns.length > 1) {
-                            groupAttr = values[0];
-                            continue;
-                        }
-                        let docDataProto = Doc.MakeDelegate(rowProto);
-                        docDataProto.isPrototype = true;
-                        columns.forEach((col, i) => docDataProto[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined));
-                        if (groupAttr) {
-                            docDataProto._group = groupAttr;
-                        }
-                        docDataProto.title = i.toString();
-                        let doc = Doc.MakeDelegate(docDataProto);
-                        doc.width = 200;
-                        docList.push(doc);
-                    }
-                    let newCol = Docs.SchemaDocument([...(groupAttr ? ["_group"] : []), ...columns.filter(c => c)], docList, { x: x, y: y, title: "droppedTable", width: 300, height: 100 });
-
-                    this.props.addDocument(newCol, false);
+                if (ns.length === 1 && text.startsWith("http")) {
+                    this.props.addDocument(Docs.ImageDocument(text, { width: 300, x: x, y: y }), false);// paste an image from its URL in the paste buffer
+                } else {
+                    this.pasteTable(ns, x, y);
                 }
-            })();
+            });
         } else {
             let newBox = Docs.TextDocument({ width: 200, height: 100, x: x, y: y, title: "-typed text-" });
             this.props.addLiveTextDocument(newBox);
         }
         e.stopPropagation();
     }
+    //heuristically converts pasted text into a table.
+    // assumes each entry is separated by a tab
+    // skips all rows until it gets to a row with more than one entry
+    // assumes that 1st row has header entry for each column
+    // assumes subsequent rows have entries for each column header OR
+    //         any row that has only one column is a section header-- this header is then added as a column to subsequent rows until the next header
+    // assumes each cell is a string or a number
+    pasteTable(ns: string[], x: number, y: number) {
+        while (ns.length > 0 && ns[0].split("\t").length < 2) {
+            ns.splice(0, 1);
+        }
+        if (ns.length > 0) {
+            let columns = ns[0].split("\t");
+            let docList: Doc[] = [];
+            let groupAttr: string | number = "";
+            let rowProto = new Doc();
+            rowProto.title = rowProto.Id;
+            rowProto.width = 200;
+            rowProto.isPrototype = true;
+            for (let i = 1; i < ns.length - 1; i++) {
+                let values = ns[i].split("\t");
+                if (values.length === 1 && columns.length > 1) {
+                    groupAttr = values[0];
+                    continue;
+                }
+                let docDataProto = Doc.MakeDelegate(rowProto);
+                docDataProto.isPrototype = true;
+                columns.forEach((col, i) => docDataProto[columns[i]] = (values.length > i ? ((values[i].indexOf(Number(values[i]).toString()) !== -1) ? Number(values[i]) : values[i]) : undefined));
+                if (groupAttr) {
+                    docDataProto._group = groupAttr;
+                }
+                docDataProto.title = i.toString();
+                let doc = Doc.MakeDelegate(docDataProto);
+                doc.width = 200;
+                docList.push(doc);
+            }
+            let newCol = Docs.SchemaDocument([...(groupAttr ? ["_group"] : []), ...columns.filter(c => c)], docList, { x: x, y: y, title: "droppedTable", width: 300, height: 100 });
+
+            this.props.addDocument(newCol, false);
+        }
+    }
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = this._lastX = e.pageX;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 128f3c6f8..d70068295 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -86,8 +86,8 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.shiftKey && e.ctrlKey)
-            e.stopPropagation();
 
+            e.stopPropagation();
         // if (Date.now() - this._lastTap < 300) {
         //     if (e.buttons === 1) {
         //         this._downX = e.clientX;
-- 
cgit v1.2.3-70-g09d2


From 435f0c8ef035995001dde92f8e7a04fe35a3a41d Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Tue, 28 May 2019 20:00:50 -0400
Subject: Added default values for Document Schemas

---
 src/client/views/nodes/DocumentView.tsx | 13 +++++++------
 src/debug/Repl.tsx                      | 11 ++++++++---
 src/new_fields/Schema.ts                | 18 +++++++++++++++---
 src/new_fields/Types.ts                 | 12 +++++++++---
 4 files changed, 39 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 01c4d82fb..2fb794925 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { ObjectField } from "../../../new_fields/ObjectField";
-import { createSchema, makeInterface } from "../../../new_fields/Schema";
+import { createSchema, makeInterface, defaultSpec } from "../../../new_fields/Schema";
 import { BoolCast, Cast, FieldValue, StrCast } from "../../../new_fields/Types";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { emptyFunction, Utils } from "../../../Utils";
@@ -60,15 +60,15 @@ const LinkDoc = makeInterface(linkSchema);
 export interface DocumentViewProps {
     ContainingCollectionView: Opt<CollectionView | CollectionPDFView | CollectionVideoView>;
     Document: Doc;
-    addDocument?: (doc: Document, allowDuplicates?: boolean) => boolean;
-    removeDocument?: (doc: Document) => boolean;
-    moveDocument?: (doc: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean;
+    addDocument?: (doc: Doc, allowDuplicates?: boolean) => boolean;
+    removeDocument?: (doc: Doc) => boolean;
+    moveDocument?: (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean;
     ScreenToLocalTransform: () => Transform;
     isTopMost: boolean;
     ContentScaling: () => number;
     PanelWidth: () => number;
     PanelHeight: () => number;
-    focus: (doc: Document) => void;
+    focus: (doc: Doc) => void;
     selectOnLoad: boolean;
     parentActive: () => boolean;
     whenActiveChanged: (isActive: boolean) => void;
@@ -81,7 +81,8 @@ const schema = createSchema({
     layout: "string",
     nativeWidth: "number",
     nativeHeight: "number",
-    backgroundColor: "string"
+    backgroundColor: "string",
+    test: defaultSpec("number", 5)
 });
 
 export const positionSchema = createSchema({
diff --git a/src/debug/Repl.tsx b/src/debug/Repl.tsx
index 01acb0e76..c2db3bdcb 100644
--- a/src/debug/Repl.tsx
+++ b/src/debug/Repl.tsx
@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom';
 import { observer } from 'mobx-react';
 import { observable, computed } from 'mobx';
 import { CompileScript } from '../client/util/Scripting';
+import { makeInterface } from '../new_fields/Schema';
 
 @observer
 class Repl extends React.Component {
@@ -15,12 +16,16 @@ class Repl extends React.Component {
     }
 
     onKeyDown = (e: React.KeyboardEvent) => {
-        if (e.ctrlKey && e.key === "Enter") {
-            const script = CompileScript(this.text, { addReturn: true, typecheck: false });
+        if (!e.ctrlKey && e.key === "Enter") {
+            e.preventDefault();
+            const script = CompileScript(this.text, {
+                addReturn: true, typecheck: false,
+                params: { makeInterface: "any" }
+            });
             if (!script.compiled) {
                 this.executedCommands.push({ command: this.text, result: "Compile Error" });
             } else {
-                const result = script.run();
+                const result = script.run({ makeInterface });
                 if (result.success) {
                     this.executedCommands.push({ command: this.text, result: result.result });
                 } else {
diff --git a/src/new_fields/Schema.ts b/src/new_fields/Schema.ts
index b821baec9..250f3c975 100644
--- a/src/new_fields/Schema.ts
+++ b/src/new_fields/Schema.ts
@@ -1,4 +1,4 @@
-import { Interface, ToInterface, Cast, ToConstructor, HasTail, Head, Tail, ListSpec, ToType } from "./Types";
+import { Interface, ToInterface, Cast, ToConstructor, HasTail, Head, Tail, ListSpec, ToType, DefaultFieldConstructor } from "./Types";
 import { Doc, Field } from "./Doc";
 
 type AllToInterface<T extends Interface[]> = {
@@ -10,7 +10,7 @@ export const emptySchema = createSchema({});
 export const Document = makeInterface(emptySchema);
 export type Document = makeInterface<[typeof emptySchema]>;
 
-export type makeInterface<T extends Interface[]> = Partial<AllToInterface<T>> & Doc & { proto: Doc | undefined };
+export type makeInterface<T extends Interface[]> = AllToInterface<T> & Doc & { proto: Doc | undefined };
 // export function makeInterface<T extends Interface[], U extends Doc>(schemas: T): (doc: U) => All<T, U>;
 // export function makeInterface<T extends Interface, U extends Doc>(schema: T): (doc: U) => makeInterface<T, U>; 
 export function makeInterface<T extends Interface[]>(...schemas: T): (doc?: Doc) => makeInterface<T> {
@@ -24,7 +24,12 @@ export function makeInterface<T extends Interface[]>(...schemas: T): (doc?: Doc)
         get(target: any, prop, receiver) {
             const field = receiver.doc[prop];
             if (prop in schema) {
-                return Cast(field, (schema as any)[prop]);
+                const desc = (schema as any)[prop];
+                if (typeof desc === "object" && "defaultVal" in desc && "type" in desc) {
+                    return Cast(field, desc.type, desc.defaultVal);
+                } else {
+                    return Cast(field, (schema as any)[prop]);
+                }
             }
             return field;
         },
@@ -79,4 +84,11 @@ export function createSchema<T extends Interface>(schema: T): T & { proto: ToCon
 
 export function listSpec<U extends ToConstructor<Field>>(type: U): ListSpec<ToType<U>> {
     return { List: type as any };//TODO Types
+}
+
+export function defaultSpec<T extends ToConstructor<Field>>(type: T, defaultVal: ToType<T>): DefaultFieldConstructor<ToType<T>> {
+    return {
+        type: type as any,
+        defaultVal
+    };
 }
\ No newline at end of file
diff --git a/src/new_fields/Types.ts b/src/new_fields/Types.ts
index 4b4c58eb8..c04dd5e6d 100644
--- a/src/new_fields/Types.ts
+++ b/src/new_fields/Types.ts
@@ -2,12 +2,13 @@ import { Field, Opt, FieldResult, Doc } from "./Doc";
 import { List } from "./List";
 import { RefField } from "./RefField";
 
-export type ToType<T extends ToConstructor<Field> | ListSpec<Field>> =
+export type ToType<T extends ToConstructor<Field> | ListSpec<Field> | DefaultFieldConstructor<Field>> =
     T extends "string" ? string :
     T extends "number" ? number :
     T extends "boolean" ? boolean :
     T extends ListSpec<infer U> ? List<U> :
     // T extends { new(...args: any[]): infer R } ? (R | Promise<R>) : never;
+    T extends DefaultFieldConstructor<infer _U> ? never :
     T extends { new(...args: any[]): List<Field> } ? never :
     T extends { new(...args: any[]): infer R } ? R : never;
 
@@ -19,12 +20,17 @@ export type ToConstructor<T extends Field> =
     new (...args: any[]) => T;
 
 export type ToInterface<T extends Interface> = {
-    [P in Exclude<keyof T, "proto">]: FieldResult<ToType<T[P]>>;
+    [P in Exclude<keyof T, "proto">]: T[P] extends DefaultFieldConstructor<infer F> ? Exclude<FieldResult<F>, undefined> : FieldResult<ToType<T[P]>>;
 };
 
 // type ListSpec<T extends Field[]> = { List: ToContructor<Head<T>> | ListSpec<Tail<T>> };
 export type ListSpec<T extends Field> = { List: ToConstructor<T> };
 
+export type DefaultFieldConstructor<T extends Field> = {
+    type: ToConstructor<T>,
+    defaultVal: T
+};
+
 // type ListType<U extends Field[]> = { 0: List<ListType<Tail<U>>>, 1: ToType<Head<U>> }[HasTail<U> extends true ? 0 : 1];
 
 export type Head<T extends any[]> = T extends [any, ...any[]] ? T[0] : never;
@@ -34,7 +40,7 @@ export type HasTail<T extends any[]> = T extends ([] | [any]) ? false : true;
 
 //TODO Allow you to optionally specify default values for schemas, which should then make that field not be partial
 export interface Interface {
-    [key: string]: ToConstructor<Field> | ListSpec<Field>;
+    [key: string]: ToConstructor<Field> | ListSpec<Field> | DefaultFieldConstructor<Field>;
     // [key: string]: ToConstructor<Field> | ListSpec<Field[]>;
 }
 
-- 
cgit v1.2.3-70-g09d2


From 732cc8c3aec072525535d246b1177181bbd3f7da Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 29 May 2019 12:06:44 -0400
Subject: improved stacking view and captions templates.

---
 src/client/documents/Documents.ts                  |   6 +-
 src/client/views/MainOverlayTextBox.tsx            |   7 +-
 src/client/views/Templates.tsx                     |   4 +-
 .../views/collections/CollectionStackingView.tsx   | 125 ++++++++++++---------
 src/client/views/collections/CollectionSubView.tsx |   2 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |   6 +-
 src/client/views/nodes/DocumentContentsView.tsx    |   1 +
 src/client/views/nodes/DocumentView.tsx            |   5 +
 src/client/views/nodes/FormattedTextBox.tsx        |  21 +++-
 9 files changed, 107 insertions(+), 70 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 4bc0df31f..9bf62196f 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -26,7 +26,7 @@ import { OmitKeys } from "../../Utils";
 import { ImageField, VideoField, AudioField, PdfField, WebField } from "../../new_fields/URLField";
 import { HtmlField } from "../../new_fields/HtmlField";
 import { List } from "../../new_fields/List";
-import { Cast } from "../../new_fields/Types";
+import { Cast, NumCast } from "../../new_fields/Types";
 import { IconField } from "../../new_fields/IconField";
 import { listSpec } from "../../new_fields/Schema";
 import { DocServer } from "../DocServer";
@@ -221,10 +221,12 @@ export namespace Docs {
         let inst = CreateInstance(imageProto, new ImageField(new URL(url)), options);
         requestImageSize(window.origin + RouteStore.corsProxy + "/" + url)
             .then((size: any) => {
+                let aspect = size.height / size.width;
                 if (!inst.proto!.nativeWidth) {
                     inst.proto!.nativeWidth = size.width;
                 }
-                inst.proto!.nativeHeight = Number(inst.proto!.nativeWidth!) * size.height / size.width;
+                inst.proto!.nativeHeight = Number(inst.proto!.nativeWidth!) * aspect;
+                inst.proto!.height = NumCast(inst.proto!.width) * aspect;
             })
             .catch((err: any) => console.log(err));
         return inst;
diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx
index 9be408049..6e8e6f8ce 100644
--- a/src/client/views/MainOverlayTextBox.tsx
+++ b/src/client/views/MainOverlayTextBox.tsx
@@ -17,6 +17,7 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
     @observable _textXf: () => Transform = () => Transform.Identity();
     private _textFieldKey: string = "data";
     private _textColor: string | null = null;
+    private _textHideOnLeave?: boolean;
     private _textTargetDiv: HTMLDivElement | undefined;
     private _textProxyDiv: React.RefObject<HTMLDivElement>;
 
@@ -39,9 +40,9 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
         this._textFieldKey = textFieldKey!;
         this._textXf = tx ? tx : () => Transform.Identity();
         this._textTargetDiv = div;
+        this._textHideOnLeave = FormattedTextBox.InputBoxOverlay && FormattedTextBox.InputBoxOverlay.props.hideOnLeave;
         if (div) {
-            if (div.parentElement && div.parentElement instanceof HTMLDivElement && div.parentElement.id === "screenSpace") this._textXf = () => Transform.Identity();
-            this._textColor = div.style.color;
+            this._textColor = (getComputedStyle(div) as any).color;
             div.style.color = "transparent";
         }
     }
@@ -88,7 +89,7 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
             return <div className="mainOverlayTextBox-textInput" style={{ transform: `translate(${textRect.left}px, ${textRect.top}px) scale(${1 / s},${1 / s})`, width: "auto", height: "auto" }} >
                 <div className="mainOverlayTextBox-textInput" onPointerDown={this.textBoxDown} ref={this._textProxyDiv} onScroll={this.textScroll}
                     style={{ width: `${textRect.width * s}px`, height: `${textRect.height * s}px` }}>
-                    <FormattedTextBox fieldKey={this._textFieldKey} isOverlay={true} Document={FormattedTextBox.InputBoxOverlay.props.Document} isSelected={returnTrue} select={emptyFunction} isTopMost={true}
+                    <FormattedTextBox fieldKey={this._textFieldKey} hideOnLeave={this._textHideOnLeave} isOverlay={true} Document={FormattedTextBox.InputBoxOverlay.props.Document} isSelected={returnTrue} select={emptyFunction} isTopMost={true}
                         selectOnLoad={true} ContainingCollectionView={undefined} whenActiveChanged={emptyFunction} active={returnTrue}
                         ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} addDocTab={emptyFunction} />
                 </div>
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 303f3f3b8..0cd367bcb 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -42,8 +42,8 @@ export namespace Templates {
     export const Caption = new Template("Caption", TemplatePosition.OutterBottom,
         `<div>
             <div style="height:100%; width:100%;position:absolute;">{layout}</div>
-            <div id="screenSpace" style="top: 100%; font-size:14px; background:yellow; width:100%; position:absolute">
-                <FormattedTextBox {...props} fieldKey={"caption"} />
+            <div style="bottom: 0; font-size:14px; width:100%; position:absolute">
+                <FormattedTextBox {...props} fieldKey={"caption"} hideOnLeave={"true"} />
             </div>
         </div>` );
 
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index a29648d5b..425eecebb 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -4,9 +4,9 @@ import { CollectionSubView, CollectionViewProps, SubCollectionViewProps } from "
 import { Doc, WidthSym, HeightSym, DocListCast } from "../../../new_fields/Doc";
 import { DocumentView } from "../nodes/DocumentView";
 import { Transform } from "../../util/Transform";
-import { emptyFunction, returnOne } from "../../../Utils";
+import { emptyFunction, returnOne, Utils } from "../../../Utils";
 import "./CollectionStackingView.scss";
-import { action, reaction } from "mobx";
+import { action, reaction, trace, computed } from "mobx";
 import { StrCast, NumCast } from "../../../new_fields/Types";
 import { Id } from "../../../new_fields/FieldSymbols";
 
@@ -14,20 +14,13 @@ import { Id } from "../../../new_fields/FieldSymbols";
 
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
-    getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform();
+
+    get gridGap() { return 10; }
+    get gridSize() { return 20; }
+    get itemWidth() { return NumCast(this.props.Document.itemWidth, 250); }
 
     constructor(props: SubCollectionViewProps) {
         super(props);
-        // reaction(() => [this.props.PanelHeight() + this.props.PanelWidth(),
-        // (this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.Document[this.props.ContainingCollectionView.props.fieldKey])], () => {
-        //         if (this.props.ContainingCollectionView) {
-        //             let allItems = DocListCast(this.props.ContainingCollectionView.props.Document[this.props.ContainingCollectionView.props.fieldKey]);
-        //             for (let x = 0; x < allItems.length; x++) {
-        //                 resizeGridItem(allItems[x]);
-        //             }
-        //         }
-        //     }
-        // );
     }
 
     @action
@@ -36,57 +29,79 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         addDocument(doc);
         return true;
     }
+    getDocTransform(doc: Doc, dref: HTMLDivElement) {
+        let { scale, translateX, translateY } = Utils.GetScreenTransform(dref);
+        let outerXf = Utils.GetScreenTransform(this.masonryGridRef!);
+        let offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY);
+        return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]).scale(NumCast(doc.width, 1) / this.itemWidth);
+    }
+    masonryGridRef: HTMLDivElement | null = null;
+    createRef = (ele: HTMLDivElement | null) => {
+        this.masonryGridRef = ele;
+        this.createDropTarget(ele!);
+    }
+    @computed
+    get children() {
+        return this.childDocs.map(d => {
+            let colSpan = Math.ceil((this.itemWidth + this.gridGap) / (this.gridSize + this.gridGap));
+            let rowSpan = Math.ceil((this.itemWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
+            let dref = React.createRef<HTMLDivElement>();
+            let dxf = () => this.getDocTransform(d, dref.current!);
+            return (<div className="colletionStackingView-masonryDoc"
+                key={d[Id]}
+                ref={dref}
+                style={{
+                    transformOrigin: "top left",
+                    gridRowEnd: `span ${rowSpan}`,
+                    gridColumnEnd: `span ${colSpan}`,
+                    transform: `scale(${this.itemWidth / NumCast(d.nativeWidth, 1)}, ${this.itemWidth / NumCast(d.nativeWidth, 1)})`
+                }} >
+                <DocumentView key={d[Id]} Document={d}
+                    addDocument={this.props.addDocument}
+                    removeDocument={this.props.removeDocument}
+                    moveDocument={this.moveDocument}
+                    ContainingCollectionView={this.props.CollectionView}
+                    isTopMost={false}
+                    ScreenToLocalTransform={dxf}
+                    focus={emptyFunction}
+                    ContentScaling={returnOne}
+                    PanelWidth={d[WidthSym]}
+                    PanelHeight={d[HeightSym]}
+                    selectOnLoad={false}
+                    parentActive={this.props.active}
+                    addDocTab={this.props.addDocTab}
+                    bringToFront={emptyFunction}
+                    toggleMinimized={emptyFunction}
+                    whenActiveChanged={this.props.whenActiveChanged} />
+            </div>);
+        })
+    }
+    onClick = (e: React.MouseEvent) => {
+        if (this.props.active()) {
+            let rect = (this.masonryGridRef!.firstChild! as HTMLElement).getBoundingClientRect();
+            if (e.clientX < rect.left || e.clientX > rect.right || e.clientY > rect.bottom) this.props.select(false);
+            e.stopPropagation();
+        }
+    }
     render() {
-        const docs = this.childDocs;
-        let gridGap = 10;
-        let gridSize = 20;
-        let itemWidth = NumCast(this.props.Document.itemWidth, 250);
         let leftMargin = 20;
         let topMargin = 20;
-        let itemCols = Math.ceil(itemWidth / (gridSize + gridGap));
-        let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (gridSize + gridGap)));
+        let itemCols = Math.ceil(this.itemWidth / (this.gridSize + this.gridGap));
+        let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (this.gridSize + this.gridGap)));
         return (
-            <div className="collectionStackingView" ref={this.createDropTarget} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
+            <div className="collectionStackingView" ref={this.createRef} onClick={this.onClick} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
                 <div className="collectionStackingview-masonryGrid"
                     style={{
                         padding: `${topMargin}px 0px 0px ${leftMargin}px`,
-                        width: `${cells * itemCols * (gridSize + gridGap) + leftMargin}`,
-                        margin: "auto", position: "relative",
-                        gridGap: gridGap,
-                        gridTemplateColumns: `repeat(auto-fill, minmax(${gridSize}px,1fr))`,
-                        gridAutoRows: `${gridSize}px`
+                        width: `${cells * itemCols * (this.gridSize + this.gridGap) + leftMargin}`,
+                        height: "auto",
+                        marginLeft: "auto", marginRight: "auto", position: "relative",
+                        gridGap: this.gridGap,
+                        gridTemplateColumns: `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`,
+                        gridAutoRows: `${this.gridSize}px`
                     }}
                 >
-                    {docs.map(d => {
-                        let colSpan = Math.ceil((itemWidth + gridGap) / (gridSize + gridGap));
-                        let rowSpan = Math.ceil((itemWidth / d[WidthSym]() * d[HeightSym]() + gridGap) / (gridSize + gridGap));
-                        return (<div className="mycontent" id={StrCast(d.title, "")}
-                            key={d[Id]}
-                            style={{
-                                transformOrigin: "top left",
-                                gridRowEnd: `span  ${rowSpan}`,
-                                gridColumnEnd: `span  ${colSpan}`,
-                                transform: `scale(${itemWidth / NumCast(d.nativeWidth, 1)}, ${itemWidth / NumCast(d.nativeWidth, 1)})`
-                            }} >
-                            <DocumentView Document={d}
-                                addDocument={this.props.addDocument}
-                                removeDocument={this.props.removeDocument}
-                                moveDocument={this.moveDocument}
-                                ContainingCollectionView={this.props.CollectionView}
-                                isTopMost={false}
-                                ScreenToLocalTransform={this.getPreviewTransform}
-                                focus={emptyFunction}
-                                ContentScaling={returnOne}
-                                PanelWidth={d[WidthSym]}
-                                PanelHeight={d[HeightSym]}
-                                selectOnLoad={false}
-                                parentActive={this.props.active}
-                                addDocTab={this.props.addDocTab}
-                                bringToFront={emptyFunction}
-                                toggleMinimized={emptyFunction}
-                                whenActiveChanged={this.props.active} />
-                        </div>);
-                    })}
+                    {this.children}
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index c4e72b23a..fe9e12640 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -212,7 +212,7 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
                     }).then(async (res: Response) => {
                         (await res.json()).map(action((file: any) => {
                             let path = window.location.origin + file;
-                            let docPromise = this.getDocumentFromType(type, path, { ...options, nativeWidth: 600, width: 300, title: dropFileName });
+                            let docPromise = this.getDocumentFromType(type, path, { ...options, nativeWidth: 300, width: 300, title: dropFileName });
 
                             docPromise.then(doc => doc && this.props.addDocument(doc));
                         }));
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 66d91f9c2..04e0a91f8 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -256,9 +256,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         }
     }
 
-    onPointerEnter = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = true; };
-    onPointerLeave = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = false; };
-
     borderRounding = () => {
         let br = NumCast(this.props.Document.borderRounding);
         return br >= 0 ? br :
@@ -283,8 +280,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
 
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont}
-                onPointerDown={this.onPointerDown}
-                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} onPointerOver={this.onPointerEnter}
+                onPointerDown={this.onPointerDown} onPointerOver={this.onPointerEnter}
                 onClick={this.onClick}
                 style={{
                     outlineColor: "maroon",
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 52a9582d2..02396c3af 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -44,6 +44,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
     isSelected: () => boolean,
     select: (ctrl: boolean) => void,
     layoutKey: string,
+    hideOnLeave?: boolean
 }> {
     @computed get layout(): string {
         const layout = Cast(this.props.Document[this.props.layoutKey], "string");
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 01c4d82fb..ed5862660 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -343,6 +343,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
+    onPointerEnter = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = true; };
+    onPointerLeave = (e: React.PointerEvent): void => { this.props.Document.libraryBrush = false; };
+
     isSelected = () => SelectionManager.IsSelected(this);
     select = (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed);
 
@@ -366,6 +369,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                     transform: `scale(${scaling}, ${scaling})`
                 }}
                 onDrop={this.onDrop} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
+
+                onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
             >
                 {this.contents}
             </div>
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 5afef221c..5b74c2e7e 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -50,8 +50,9 @@ library.add(faSmile);
 //  this will edit the document and assign the new value to that field.
 //]
 
-export interface FormattedTextBoxOverlay {
+export interface FormattedTextBoxProps {
     isOverlay?: boolean;
+    hideOnLeave?: boolean;
 }
 
 const richTextSchema = createSchema({
@@ -62,7 +63,7 @@ type RichTextDocument = makeInterface<[typeof richTextSchema]>;
 const RichTextDocument = makeInterface(richTextSchema);
 
 @observer
-export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTextBoxOverlay), RichTextDocument>(RichTextDocument) {
+export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTextBoxProps), RichTextDocument>(RichTextDocument) {
     public static LayoutString(fieldStr: string = "data") {
         return FieldView.LayoutString(FormattedTextBox, fieldStr);
     }
@@ -357,6 +358,17 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             this._undoTyping = UndoManager.StartBatch("undoTyping");
         }
     }
+
+    @observable
+    _entered = false;
+    @action
+    onPointerEnter = (e: React.PointerEvent) => {
+        this._entered = true;
+    }
+    @action
+    onPointerLeave = (e: React.PointerEvent) => {
+        this._entered = false;
+    }
     render() {
         let style = this.props.isOverlay ? "scroll" : "hidden";
         let rounded = NumCast(this.props.Document.borderRounding) < 0 ? "-rounded" : "";
@@ -364,6 +376,9 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         return (
             <div className={`formattedTextBox-cont-${style}`} ref={this._ref}
                 style={{
+                    background: this.props.hideOnLeave ? "rgba(0,0,0,0.4)" : undefined,
+                    opacity: this.props.hideOnLeave ? (this._entered || this.props.isSelected() || this.props.Document.libraryBrush ? 1 : 0.1) : 1,
+                    color: this.props.hideOnLeave ? "white" : "initial",
                     pointerEvents: interactive ? "all" : "none",
                 }}
                 // onKeyDown={this.onKeyPress}
@@ -377,6 +392,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 onContextMenu={this.specificContextMenu}
                 // tfs: do we need this event handler
                 onWheel={this.onPointerWheel}
+                onPointerEnter={this.onPointerEnter}
+                onPointerLeave={this.onPointerLeave}
             >
                 <div className={`formattedTextBox-inner${rounded}`} style={{ whiteSpace: "pre-wrap", pointerEvents: this.props.Document.isButton && !this.props.isSelected() ? "none" : "all" }} ref={this._proseRef} />
             </div>
-- 
cgit v1.2.3-70-g09d2


From 9dbf61fccc96f7c4d6bd63e25a7208b82df28705 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 29 May 2019 18:21:03 -0400
Subject: stacking view focus fixes.  linkview fixes.-

---
 src/client/documents/Documents.ts                      |  3 ++-
 .../views/collections/CollectionStackingView.scss      |  2 +-
 .../views/collections/CollectionStackingView.tsx       | 10 ++++++++--
 src/client/views/collections/CollectionView.tsx        | 13 +++++++++++++
 .../collectionFreeForm/CollectionFreeFormLinksView.tsx | 18 +++++++++++-------
 .../collections/collectionFreeForm/MarqueeView.tsx     |  2 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx     |  9 +--------
 src/client/views/nodes/DocumentView.tsx                |  6 ++++++
 src/client/views/nodes/FormattedTextBox.tsx            |  1 -
 9 files changed, 43 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 9bf62196f..fffada459 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -36,6 +36,7 @@ import { DateField } from "../../new_fields/DateField";
 import { UndoManager } from "../util/UndoManager";
 import { RouteStore } from "../../server/RouteStore";
 var requestImageSize = require('request-image-size');
+var path = require('path');
 
 export interface DocumentOptions {
     x?: number;
@@ -218,7 +219,7 @@ export namespace Docs {
     }
 
     export function ImageDocument(url: string, options: DocumentOptions = {}) {
-        let inst = CreateInstance(imageProto, new ImageField(new URL(url)), options);
+        let inst = CreateInstance(imageProto, new ImageField(new URL(url)), { title: path.basename(url), ...options });
         requestImageSize(window.origin + RouteStore.corsProxy + "/" + url)
             .then((size: any) => {
                 let aspect = size.height / size.width;
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 6043a813d..0e4a8bb7e 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -8,7 +8,7 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    overflow-y: scroll;
+    overflow-y: auto;
     min-width: 250px;
     border-width: 0;
     box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 425eecebb..6d44aa37d 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -47,14 +47,20 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             let rowSpan = Math.ceil((this.itemWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
             let dref = React.createRef<HTMLDivElement>();
             let dxf = () => this.getDocTransform(d, dref.current!);
+            let childFocus = (doc: Doc) => {
+                doc.libraryBrush = true;
+                this.props.focus(this.props.Document); // just focus on this collection, not the underlying document because the API doesn't support adding an offset to focus on and we can't pan zoom our contents to be centered.
+            }
             return (<div className="colletionStackingView-masonryDoc"
                 key={d[Id]}
                 ref={dref}
                 style={{
+                    width: NumCast(d.nativeWidth, d[WidthSym]()),
+                    height: NumCast(d.nativeHeight, d[HeightSym]()),
                     transformOrigin: "top left",
                     gridRowEnd: `span ${rowSpan}`,
                     gridColumnEnd: `span ${colSpan}`,
-                    transform: `scale(${this.itemWidth / NumCast(d.nativeWidth, 1)}, ${this.itemWidth / NumCast(d.nativeWidth, 1)})`
+                    transform: `scale(${this.itemWidth / NumCast(d.nativeWidth, d[WidthSym]())}, ${this.itemWidth / NumCast(d.nativeWidth, d[WidthSym]())})`
                 }} >
                 <DocumentView key={d[Id]} Document={d}
                     addDocument={this.props.addDocument}
@@ -63,7 +69,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                     ContainingCollectionView={this.props.CollectionView}
                     isTopMost={false}
                     ScreenToLocalTransform={dxf}
-                    focus={emptyFunction}
+                    focus={childFocus}
                     ContentScaling={returnOne}
                     PanelWidth={d[WidthSym]}
                     PanelHeight={d[HeightSym]}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 39c8af4ab..a1e7c7c69 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -13,6 +13,8 @@ import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionTreeView } from "./CollectionTreeView";
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import { CollectionStackingView } from './CollectionStackingView';
+import { NumCast } from '../../../new_fields/Types';
+import { WidthSym, HeightSym } from '../../../new_fields/Doc';
 export const COLLECTION_BORDER_WIDTH = 2;
 
 library.add(faTh);
@@ -42,6 +44,16 @@ export class CollectionView extends React.Component<FieldViewProps> {
 
     get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; } // bcz: ? Why do we need to compare Id's?
 
+    freezeNativeDimensions = (e: React.MouseEvent): void => {
+        if (NumCast(this.props.Document.nativeWidth)) {
+            this.props.Document.proto!.nativeWidth = undefined;
+            this.props.Document.proto!.nativeHeight = undefined;
+
+        } else {
+            this.props.Document.proto!.nativeWidth = this.props.Document[WidthSym]();
+            this.props.Document.proto!.nativeHeight = this.props.Document[HeightSym]();
+        }
+    }
     onContextMenu = (e: React.MouseEvent): void => {
         if (!this.isAnnotationOverlay && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             ContextMenu.Instance.addItem({ description: "Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Freeform), icon: "signature" });
@@ -51,6 +63,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
             ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "th-list" });
             ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
             ContextMenu.Instance.addItem({ description: "Stacking", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Stacking), icon: "th-list" });
+            ContextMenu.Instance.addItem({ description: NumCast(this.props.Document.nativeWidth) ? "Unfreeze" : "Freeze", event: this.freezeNativeDimensions, icon: "edit" });
         }
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 85556fb90..6207dc8af 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -95,22 +95,26 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
 
     @computed
     get uniqueConnections() {
+        console.log("-----");
         let connections = DocumentManager.Instance.LinkedDocumentViews.reduce((drawnPairs, connection) => {
             let srcViews = this.documentAnchors(connection.a);
             let targetViews = this.documentAnchors(connection.b);
             let possiblePairs: { a: Doc, b: Doc, }[] = [];
             srcViews.map(sv => targetViews.map(tv => possiblePairs.push({ a: sv.props.Document, b: tv.props.Document })));
-            possiblePairs.map(possiblePair =>
-                drawnPairs.reduce((found, drawnPair) => {
-                    let match = (possiblePair.a === drawnPair.a && possiblePair.b === drawnPair.b);
+            possiblePairs.map(possiblePair => {
+                if (!drawnPairs.reduce((found, drawnPair) => {
+                    let match1 = (Doc.AreProtosEqual(possiblePair.a, drawnPair.a) && Doc.AreProtosEqual(possiblePair.b, drawnPair.b));
+                    let match2 = (Doc.AreProtosEqual(possiblePair.a, drawnPair.b) && Doc.AreProtosEqual(possiblePair.b, drawnPair.a));
+                    let match = match1 || match2;
                     if (match && !drawnPair.l.reduce((found, link) => found || link[Id] === connection.l[Id], false)) {
                         drawnPair.l.push(connection.l);
                     }
                     return match || found;
-                }, false)
-                ||
-                drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] })
-            );
+                }, false)) {
+                    console.log("A" + possiblePair.a[Id] + " B" + possiblePair.b[Id] + " L" + connection.l[Id]);
+                    drawnPairs.push({ a: possiblePair.a, b: possiblePair.b, l: [connection.l] })
+                }
+            });
             return drawnPairs;
         }, [] as { a: Doc, b: Doc, l: Doc[] }[]);
         return connections.map(c => {
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 64d5301c9..14dbe1899 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -87,7 +87,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             navigator.clipboard.readText().then(text => {
                 let ns = text.split("\n").filter(t => t.trim() !== "\r" && t.trim() !== "");
                 if (ns.length === 1 && text.startsWith("http")) {
-                    this.props.addDocument(Docs.ImageDocument(text, { width: 300, x: x, y: y }), false);// paste an image from its URL in the paste buffer
+                    this.props.addDocument(Docs.ImageDocument(text, { nativeWidth: 300, width: 300, x: x, y: y }), false);// paste an image from its URL in the paste buffer
                 } else {
                     this.pasteTable(ns, x, y);
                 }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 04e0a91f8..5f4d9e9ec 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -280,16 +280,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
 
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont}
-                onPointerDown={this.onPointerDown} onPointerOver={this.onPointerEnter}
+                onPointerDown={this.onPointerDown}
                 onClick={this.onClick}
                 style={{
-                    outlineColor: "maroon",
-                    outlineStyle: "dashed",
-                    outlineWidth: BoolCast(this.props.Document.libraryBrush, false) ||
-                        BoolCast(this.props.Document.protoBrush, false) ?
-                        `${1 * this.getTransform().Scale}px`
-                        // "2px"
-                        : "0px",
                     opacity: zoomFade,
                     borderRadius: `${this.borderRounding()}px`,
                     transformOrigin: "left top",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ed5862660..98f4f050a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -362,6 +362,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             <div className={`documentView-node${this.props.isTopMost ? "-topmost" : ""}`}
                 ref={this._mainCont}
                 style={{
+                    outlineColor: "maroon",
+                    outlineStyle: "dashed",
+                    outlineWidth: BoolCast(this.props.Document.libraryBrush, false) ||
+                        BoolCast(this.props.Document.protoBrush, false) ?
+                        `${1 * this.props.ScreenToLocalTransform().Scale}px`
+                        : "0px",
                     borderRadius: "inherit",
                     background: this.Document.backgroundColor || "",
                     width: nativeWidth,
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 5b74c2e7e..da584c811 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -275,7 +275,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
         }
     }
 
-    //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
     freezeNativeDimensions = (e: React.MouseEvent): void => {
         if (NumCast(this.props.Document.nativeWidth)) {
             this.props.Document.proto!.nativeWidth = undefined;
-- 
cgit v1.2.3-70-g09d2


From 83edfcd06b659839f161121728de02aca91d4af8 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 30 May 2019 00:20:35 -0400
Subject: added image rotation.  added double click on stacking views.  need to
 cleanup/fix DocumentView click events

---
 .../views/collections/CollectionStackingView.scss   |  2 +-
 .../views/collections/CollectionStackingView.tsx    | 15 +++++++++++----
 .../views/nodes/CollectionFreeFormDocumentView.tsx  | 21 +--------------------
 src/client/views/nodes/DocumentView.tsx             | 12 +++++++++++-
 src/client/views/nodes/ImageBox.tsx                 | 19 +++++++++++++++++--
 5 files changed, 41 insertions(+), 28 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 0e4a8bb7e..4d240342c 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -31,7 +31,7 @@
         align-items: center;
     }
 
-    .collectionStackingview-masonryGrid {
+    .collectionStackingView-masonryGrid {
         display:grid;
         width:100%;
         height:100%;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 6d44aa37d..943e8dd5f 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -83,10 +83,17 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         })
     }
     onClick = (e: React.MouseEvent) => {
+        let hitBackground = (e.target as any).className === "collectionStackingView-masonryGrid" ||
+            (e.target as any).className === "collectionStackingView";
         if (this.props.active()) {
-            let rect = (this.masonryGridRef!.firstChild! as HTMLElement).getBoundingClientRect();
-            if (e.clientX < rect.left || e.clientX > rect.right || e.clientY > rect.bottom) this.props.select(false);
-            e.stopPropagation();
+            if (!hitBackground)
+                e.stopPropagation();
+        }
+        if (hitBackground) {
+            if (!this.props.active() && this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.active()) {
+                e.stopPropagation();
+            }
+            this.props.select(false);
         }
     }
     render() {
@@ -96,7 +103,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (this.gridSize + this.gridGap)));
         return (
             <div className="collectionStackingView" ref={this.createRef} onClick={this.onClick} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
-                <div className="collectionStackingview-masonryGrid"
+                <div className="collectionStackingView-masonryGrid"
                     style={{
                         padding: `${topMargin}px 0px 0px ${leftMargin}px`,
                         width: `${cells * itemCols * (this.gridSize + this.gridGap) + leftMargin}`,
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 5f4d9e9ec..5d11e051d 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -33,7 +33,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     private _downX: number = 0;
     private _downY: number = 0;
     private _doubleTap = false;
-    private _lastTap: number = 0;
     _bringToFrontDisposer?: IReactionDisposer;
 
     @computed get transform() {
@@ -169,31 +168,13 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         if (e.button === 0 && e.altKey) {
             e.stopPropagation(); // prevents panning from happening on collection if shift is pressed after a document drag has started
         } // allow pointer down to go through otherwise so that marquees can be drawn starting over a document 
-        if (Date.now() - this._lastTap < 300) {
-            if (e.buttons === 1) {
-                document.removeEventListener("pointerup", this.onPointerUp);
-                document.addEventListener("pointerup", this.onPointerUp);
-            }
-        } else {
-            this._lastTap = Date.now();
-        }
+
         if (e.button === 0) {
             e.preventDefault();  // prevents Firefox from dragging images (we want to do that ourself)
         }
     }
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointerup", this.onPointerUp);
-        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
-            this._doubleTap = true;
-        }
-    }
     onClick = async (e: React.MouseEvent) => {
         e.stopPropagation();
-        if (this._doubleTap) {
-            this.props.addDocTab(this.props.Document, "inTab");
-            SelectionManager.DeselectAll();
-            this.props.Document.libraryBrush = false;
-        }
         let altKey = e.altKey;
         let ctrlKey = e.ctrlKey;
         if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 98f4f050a..36c14fbf2 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -183,13 +183,21 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
+    _doubleTap = false;
     onClick = (e: React.MouseEvent): void => {
-        if (CurrentUserUtils.MainDocId !== this.props.Document[Id] &&
+        if (this._doubleTap && !this.props.isTopMost) {
+            this.props.addDocTab(this.props.Document, "inTab");
+            SelectionManager.DeselectAll();
+            this.props.Document.libraryBrush = false;
+            e.stopPropagation();
+        }
+        else if (CurrentUserUtils.MainDocId !== this.props.Document[Id] &&
             (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
                 Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
     }
+    private _lastTap: number = 0;
     _hitExpander = false;
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
@@ -222,6 +230,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     onPointerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
+        this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2);
+        this._lastTap = Date.now();
     }
 
     deleteClicked = (): void => {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d70068295..8ea6c5436 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -12,11 +12,11 @@ import React = require("react");
 import { createSchema, makeInterface, listSpec } from '../../../new_fields/Schema';
 import { DocComponent } from '../DocComponent';
 import { positionSchema } from './DocumentView';
-import { FieldValue, Cast, StrCast, PromiseValue } from '../../../new_fields/Types';
+import { FieldValue, Cast, StrCast, PromiseValue, NumCast } from '../../../new_fields/Types';
 import { ImageField } from '../../../new_fields/URLField';
 import { List } from '../../../new_fields/List';
 import { InkingControl } from '../InkingControl';
-import { Doc } from '../../../new_fields/Doc';
+import { Doc, WidthSym, HeightSym } from '../../../new_fields/Doc';
 import { faImage } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
 var path = require('path');
@@ -136,6 +136,17 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
                     Utils.CopyText(url);
                 }, icon: "expand-arrows-alt"
             });
+            ContextMenu.Instance.addItem({
+                description: "Rotate", event: action(() => {
+                    this.props.Document.rotation = (NumCast(this.props.Document.rotation) + 90) % 360;
+                    let nw = this.props.Document.nativeWidth;
+                    this.props.Document.nativeWidth = this.props.Document.nativeHeight;
+                    this.props.Document.nativeHeight = nw;
+                    let w = this.props.Document.width;
+                    this.props.Document.width = this.props.Document.height;
+                    this.props.Document.height = w;
+                }), icon: "expand-arrows-alt"
+            });
         }
     }
 
@@ -199,6 +210,9 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         else if (field instanceof List) paths = field.filter(val => val instanceof ImageField).map(p => this.choosePath((p as ImageField).url));
         // }
         let interactive = InkingControl.Instance.selectedTool ? "" : "-interactive";
+        let rotation = NumCast(this.props.Document.rotation, 0);
+        let aspect = (rotation % 180) ? this.props.Document[HeightSym]() / this.props.Document[WidthSym]() : 1;
+        let shift = (rotation % 180) ? (this.props.Document[HeightSym]() - this.props.Document[WidthSym]() / aspect) / 2 : 0;
         return (
             <div id={id} className={`imageBox-cont${interactive}`}
                 onPointerDown={this.onPointerDown}
@@ -206,6 +220,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
                 <img id={id}
                     key={this._smallRetryCount + (this._mediumRetryCount << 4) + (this._largeRetryCount << 8)} // force cache to update on retrys
                     src={paths[Math.min(paths.length, this._photoIndex)]}
+                    style={{ transform: `translate(0px, ${shift}px) rotate(${rotation}deg) scale(${aspect})` }}
                     // style={{ objectFit: (this._photoIndex === 0 ? undefined : "contain") }}
                     width={nativeWidth}
                     ref={this._imgRef}
-- 
cgit v1.2.3-70-g09d2


From 37e16bb59a38c000ba80312a0661e1f54c93f3c6 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 30 May 2019 10:51:00 -0400
Subject: cleaned up event handling for documentviews.   fixed context menu
 closing.

---
 src/client/documents/Documents.ts                  |   2 +-
 src/client/views/ContextMenu.tsx                   |   7 +-
 src/client/views/ContextMenuItem.tsx               |  34 +++--
 src/client/views/DocumentDecorations.tsx           |   2 +-
 src/client/views/MainView.tsx                      |   1 -
 .../views/collections/CollectionBaseView.tsx       |   1 +
 .../views/collections/CollectionDockingView.tsx    |   1 -
 .../views/collections/CollectionSchemaView.tsx     |   1 -
 .../views/collections/CollectionStackingView.tsx   |  28 +----
 .../views/collections/CollectionTreeView.tsx       |  22 ++--
 .../CollectionFreeFormLinksView.tsx                |   1 -
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   1 -
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 119 ------------------
 src/client/views/nodes/DocumentView.tsx            | 140 ++++++++++++++++-----
 src/client/views/nodes/FieldView.tsx               |   1 -
 15 files changed, 153 insertions(+), 208 deletions(-)

(limited to 'src')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index fffada459..ab61b915c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -295,7 +295,7 @@ export namespace Docs {
         return CreateInstance(webProto, new HtmlField(html), options);
     }
     export function KVPDocument(document: Doc, options: DocumentOptions = {}) {
-        return CreateInstance(kvpProto, document, options);
+        return CreateInstance(kvpProto, document, { title: document.title + ".kvp", ...options });
     }
     export function FreeformDocument(documents: Array<Doc>, options: DocumentOptions, makePrototype: boolean = true) {
         if (!makePrototype) {
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 542d259d6..da374455e 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -81,6 +81,11 @@ export class ContextMenu extends React.Component {
         return false;
     }
 
+    @action
+    closeMenu = () => {
+        this.clearItems();
+    }
+
     render() {
         let style = this._yRelativeToTop ? { left: this._pageX, top: this._pageY, display: this._display } :
             { left: this._pageX, bottom: this._pageY, display: this._display };
@@ -95,7 +100,7 @@ export class ContextMenu extends React.Component {
                     <input className="contextMenu-item contextMenu-description" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange} />
                 </span>
                 {this._items.filter(prop => prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1).
-                    map(prop => <ContextMenuItem {...prop} key={prop.description} />)}
+                    map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.closeMenu} />)}
             </div>
         );
     }
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index b9239dac9..63347e076 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -8,11 +8,13 @@ export interface OriginalMenuProps {
     description: string;
     event: (e: React.MouseEvent<HTMLDivElement>) => void;
     icon?: IconProp; //maybe should be optional (icon?)
+    closeMenu?: () => void;
 }
 
 export interface SubmenuProps {
     description: string;
     subitems: ContextMenuProps[];
+    closeMenu?: () => void;
 }
 
 export interface ContextMenuItemProps {
@@ -32,30 +34,36 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> {
         }
     }
 
+    handleEvent = (e: React.MouseEvent<HTMLDivElement>) => {
+        if ("event" in this.props) {
+            this.props.event(e);
+            this.props.closeMenu && this.props.closeMenu();
+        }
+    }
+
     render() {
         if ("event" in this.props) {
             return (
-                <div className="contextMenu-item" onClick={this.props.event}>
+                <div className="contextMenu-item" onClick={this.handleEvent}>
                     <span className="icon-background">
                         {this.props.icon ? <FontAwesomeIcon icon={this.props.icon} size="sm" /> : <FontAwesomeIcon icon="circle" size="sm" />}
                     </span>
-                    <div className="contextMenu-description"> {this.props.description}</div>
+                    <div className="contextMenu-description">
+                        {this.props.description}
+                    </div>
                 </div>
             );
         }
         else {
-            let submenu = null;
-            if (this.overItem) {
-                submenu = (
-                    <div className="subMenu-cont" style={{ marginLeft: "100.5%", left: "0px" }}>
-                        {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} />)}
-                    </div>
-                );
-            }
+            let submenu = !this.overItem ? (null) :
+                <div className="subMenu-cont" style={{ marginLeft: "100.5%", left: "0px" }}>
+                    {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />)}
+                </div>;
             return (
-                <div className="contextMenu-item" onMouseEnter={action(() => { this.overItem = true; })}
-                    onMouseLeave={action(() => this.overItem = false)}>
-                    <div className="contextMenu-description"> {this.props.description}</div>
+                <div className="contextMenu-item" onMouseEnter={action(() => { this.overItem = true; })} onMouseLeave={action(() => this.overItem = false)}>
+                    <div className="contextMenu-description">
+                        {this.props.description}
+                    </div>
                     {submenu}
                 </div>
             );
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 319e91337..e06fd6119 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -251,7 +251,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
             }
             if (!this._removeIcon) {
                 if (selectedDocs.length === 1) {
-                    this.getIconDoc(selectedDocs[0]).then(icon => selectedDocs[0].props.toggleMinimized());
+                    this.getIconDoc(selectedDocs[0]).then(icon => selectedDocs[0].toggleMinimized());
                 } else if (Math.abs(e.pageX - this._downX) < Utils.DRAG_THRESHOLD &&
                     Math.abs(e.pageY - this._downY) < Utils.DRAG_THRESHOLD) {
                     let docViews = SelectionManager.ViewsSortedVertically();
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 438607157..74dafadc4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -184,7 +184,6 @@ export class MainView extends React.Component {
         let mainCont = this.mainContainer;
         let content = !mainCont ? (null) :
             <DocumentView Document={mainCont}
-                toggleMinimized={emptyFunction}
                 addDocument={undefined}
                 addDocTab={emptyFunction}
                 removeDocument={undefined}
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index 2bccde241..e89b8be0f 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -128,6 +128,7 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
 
     @action.bound
     removeDocument(doc: Doc): boolean {
+        SelectionManager.DeselectAll();
         const props = this.props;
         //TODO This won't create the field if it doesn't already exist
         const value = Cast(props.Document[props.fieldKey], listSpec(Doc), []);
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 180a8be46..b6076b5f7 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -466,7 +466,6 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
             <div className="collectionDockingView-content" ref={this._mainCont}
                 style={{ transform: `translate(${this.previewPanelCenteringOffset}px, 0px) scale(${this.scaleToFitMultiplier}, ${this.scaleToFitMultiplier})` }}>
                 <DocumentView key={this._document[Id]} Document={this._document}
-                    toggleMinimized={emptyFunction}
                     bringToFront={emptyFunction}
                     addDocument={undefined}
                     removeDocument={undefined}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 1af13765b..b17d5b865 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -412,7 +412,6 @@ class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewPro
             {!this.props.Document || !this.props.width ? (null) : (
                 <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.centeringOffset}px, 0px)` }}>
                     <DocumentView Document={this.props.Document} isTopMost={false} selectOnLoad={false}
-                        toggleMinimized={emptyFunction}
                         addDocument={this.props.addDocument} removeDocument={this.props.removeDocument}
                         ScreenToLocalTransform={this.getTransform}
                         ContentScaling={this.contentScaling}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 943e8dd5f..bf246d4ec 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -14,15 +14,11 @@ import { Id } from "../../../new_fields/FieldSymbols";
 
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
-
+    _masonryGridRef: HTMLDivElement | null = null;
     get gridGap() { return 10; }
     get gridSize() { return 20; }
     get itemWidth() { return NumCast(this.props.Document.itemWidth, 250); }
 
-    constructor(props: SubCollectionViewProps) {
-        super(props);
-    }
-
     @action
     moveDocument = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => {
         this.props.removeDocument(doc);
@@ -31,13 +27,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     }
     getDocTransform(doc: Doc, dref: HTMLDivElement) {
         let { scale, translateX, translateY } = Utils.GetScreenTransform(dref);
-        let outerXf = Utils.GetScreenTransform(this.masonryGridRef!);
+        let outerXf = Utils.GetScreenTransform(this._masonryGridRef!);
         let offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY);
         return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]).scale(NumCast(doc.width, 1) / this.itemWidth);
     }
-    masonryGridRef: HTMLDivElement | null = null;
     createRef = (ele: HTMLDivElement | null) => {
-        this.masonryGridRef = ele;
+        this._masonryGridRef = ele;
         this.createDropTarget(ele!);
     }
     @computed
@@ -77,32 +72,17 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                     parentActive={this.props.active}
                     addDocTab={this.props.addDocTab}
                     bringToFront={emptyFunction}
-                    toggleMinimized={emptyFunction}
                     whenActiveChanged={this.props.whenActiveChanged} />
             </div>);
         })
     }
-    onClick = (e: React.MouseEvent) => {
-        let hitBackground = (e.target as any).className === "collectionStackingView-masonryGrid" ||
-            (e.target as any).className === "collectionStackingView";
-        if (this.props.active()) {
-            if (!hitBackground)
-                e.stopPropagation();
-        }
-        if (hitBackground) {
-            if (!this.props.active() && this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.active()) {
-                e.stopPropagation();
-            }
-            this.props.select(false);
-        }
-    }
     render() {
         let leftMargin = 20;
         let topMargin = 20;
         let itemCols = Math.ceil(this.itemWidth / (this.gridSize + this.gridGap));
         let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (this.gridSize + this.gridGap)));
         return (
-            <div className="collectionStackingView" ref={this.createRef} onClick={this.onClick} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
+            <div className="collectionStackingView" ref={this.createRef} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
                 <div className="collectionStackingView-masonryGrid"
                     style={{
                         padding: `${topMargin}px 0px 0px ${leftMargin}px`,
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 8ad495762..85aab96d3 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -26,6 +26,7 @@ export interface TreeViewProps {
     deleteDoc: (doc: Doc) => void;
     moveDocument: DragManager.MoveFunction;
     dropAction: "alias" | "copy" | undefined;
+    addDocTab: (doc: Doc, where: string) => void;
 }
 
 export enum BulletType {
@@ -140,19 +141,12 @@ class TreeView extends React.Component<TreeViewProps> {
     onWorkspaceContextMenu = (e: React.MouseEvent): void => {
         if (!e.isPropagationStopped() && this.props.document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             ContextMenu.Instance.addItem({ description: "Open as Workspace", event: undoBatch(() => MainView.Instance.openWorkspace(this.props.document)) });
-            ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.document) });
-            ContextMenu.Instance.addItem({
-                description: "Open Fields", event: () => CollectionDockingView.Instance.AddRightSplit(Docs.KVPDocument(this.props.document,
-                    { title: this.props.document.title + ".kvp", width: 300, height: 300 }))
-            });
+            ContextMenu.Instance.addItem({ description: "Open Right", event: () => this.props.addDocTab(this.props.document, "onRight") });
+            ContextMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.KVPDocument(this.props.document, { width: 300, height: 300 }), "onRight") });
             if (DocumentManager.Instance.getDocumentViews(this.props.document).length) {
                 ContextMenu.Instance.addItem({ description: "Focus", event: () => DocumentManager.Instance.getDocumentViews(this.props.document).map(view => view.props.focus(this.props.document)) });
             }
-            ContextMenu.Instance.addItem({
-                description: "Delete", event: undoBatch(() => {
-                    this.props.deleteDoc(this.props.document);
-                })
-            });
+            ContextMenu.Instance.addItem({ description: "Delete", event: undoBatch(() => this.props.deleteDoc(this.props.document)) });
             ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
             e.stopPropagation();
         }
@@ -180,7 +174,7 @@ class TreeView extends React.Component<TreeViewProps> {
                         {(key === "data") ? (null) :
                             <span className="collectionTreeView-keyHeader" style={{ display: "block", marginTop: "7px" }} key={key}>{key}</span>}
                         <div style={{ display: "block", marginTop: `${spacing}px` }}>
-                            {TreeView.GetChildElements(doc instanceof Doc ? [doc] : docList, key !== "data", (doc: Doc) => this.remove(doc, key), this.move, this.props.dropAction)}
+                            {TreeView.GetChildElements(doc instanceof Doc ? [doc] : docList, key !== "data", (doc: Doc) => this.remove(doc, key), this.move, this.props.dropAction, this.props.addDocTab)}
                         </div>
                     </ul >);
                 } else {
@@ -197,9 +191,9 @@ class TreeView extends React.Component<TreeViewProps> {
             </li>
         </div>;
     }
-    public static GetChildElements(docs: Doc[], allowMinimized: boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) {
+    public static GetChildElements(docs: Doc[], allowMinimized: boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType, addDocTab: (doc: Doc, where: string) => void) {
         return docs.filter(child => !child.excludeFromLibrary && (allowMinimized || !child.isMinimized)).map(child =>
-            <TreeView document={child} key={child[Id]} deleteDoc={remove} moveDocument={move} dropAction={dropAction} />);
+            <TreeView document={child} key={child[Id]} deleteDoc={remove} moveDocument={move} dropAction={dropAction} addDocTab={addDocTab} />);
     }
 }
 
@@ -225,7 +219,7 @@ export class CollectionTreeView extends CollectionSubView(Document) {
         if (!this.childDocs) {
             return (null);
         }
-        let childElements = TreeView.GetChildElements(this.childDocs, false, this.remove, this.props.moveDocument, dropAction);
+        let childElements = TreeView.GetChildElements(this.childDocs, false, this.remove, this.props.moveDocument, dropAction, this.props.addDocTab);
 
         return (
             <div id="body" className="collectionTreeView-dropTarget"
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 6207dc8af..a43c5f241 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -95,7 +95,6 @@ export class CollectionFreeFormLinksView extends React.Component<CollectionViewP
 
     @computed
     get uniqueConnections() {
-        console.log("-----");
         let connections = DocumentManager.Instance.LinkedDocumentViews.reduce((drawnPairs, connection) => {
             let srcViews = this.documentAnchors(connection.a);
             let targetViews = this.documentAnchors(connection.b);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d1c4fb72d..1a1614ac7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -279,7 +279,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     getDocumentViewProps(document: Doc): DocumentViewProps {
         return {
             Document: document,
-            toggleMinimized: emptyFunction,
             addDocument: this.props.addDocument,
             removeDocument: this.props.removeDocument,
             moveDocument: this.props.moveDocument,
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 5d11e051d..411e8c059 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -30,9 +30,6 @@ const FreeformDocument = makeInterface(schema, positionSchema);
 @observer
 export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps, FreeformDocument>(FreeformDocument) {
     private _mainCont = React.createRef<HTMLDivElement>();
-    private _downX: number = 0;
-    private _downY: number = 0;
-    private _doubleTap = false;
     _bringToFrontDisposer?: IReactionDisposer;
 
     @computed get transform() {
@@ -62,7 +59,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     contentScaling = () => this.nativeWidth > 0 ? this.width / this.nativeWidth : 1;
     panelWidth = () => this.props.PanelWidth();
     panelHeight = () => this.props.PanelHeight();
-    toggleMinimized = async () => this.toggleIcon(await DocListCastAsync(this.props.Document.maximizedDocs));
     getTransform = (): Transform => this.props.ScreenToLocalTransform()
         .translate(-this.X, -this.Y)
         .scale(1 / this.contentScaling()).scale(1 / this.zoom)
@@ -70,7 +66,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     @computed
     get docView() {
         return <DocumentView {...OmitKeys(this.props, ['zoomFade']).omit}
-            toggleMinimized={this.toggleMinimized}
             ContentScaling={this.contentScaling}
             ScreenToLocalTransform={this.getTransform}
             PanelWidth={this.panelWidth}
@@ -124,118 +119,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         },
             2);
     }
-    @action
-    public toggleIcon = async (maximizedDocs: Doc[] | undefined): Promise<void> => {
-        SelectionManager.DeselectAll();
-        let isMinimized: boolean | undefined;
-        let minimizedDoc: Doc | undefined = this.props.Document;
-        if (!maximizedDocs) {
-            minimizedDoc = await Cast(this.props.Document.minimizedDoc, Doc);
-            if (minimizedDoc) maximizedDocs = await DocListCastAsync(minimizedDoc.maximizedDocs);
-        }
-        if (minimizedDoc && maximizedDocs) {
-            let minimizedTarget = minimizedDoc;
-            if (!CollectionFreeFormDocumentView._undoBatch) {
-                CollectionFreeFormDocumentView._undoBatch = UndoManager.StartBatch("iconAnimating");
-            }
-            maximizedDocs.map(d => Doc.GetProto(d)).map(maximizedDoc => {
-                let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
-                if (!iconAnimating || (Date.now() - iconAnimating[2] > 1000)) {
-                    if (isMinimized === undefined) {
-                        isMinimized = BoolCast(maximizedDoc.isMinimized, false);
-                    }
-                    let minx = NumCast(minimizedTarget.x, undefined) + NumCast(minimizedTarget.width, undefined) / 2;
-                    let miny = NumCast(minimizedTarget.y, undefined) + NumCast(minimizedTarget.height, undefined) / 2;
-                    if (minx !== undefined && miny !== undefined) {
-                        let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(minx, miny);
-                        maximizedDoc.willMaximize = isMinimized;
-                        maximizedDoc.isMinimized = false;
-                        maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], Date.now(), isMinimized ? 1 : 0]);
-                    }
-                }
-            });
-            setTimeout(() => {
-                CollectionFreeFormDocumentView._undoBatch && CollectionFreeFormDocumentView._undoBatch.end();
-                CollectionFreeFormDocumentView._undoBatch = undefined;
-            }, 500);
-        }
-    }
-    static _undoBatch?: UndoManager.Batch = undefined;
-    onPointerDown = (e: React.PointerEvent): void => {
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-        this._doubleTap = false;
-        if (e.button === 0 && e.altKey) {
-            e.stopPropagation(); // prevents panning from happening on collection if shift is pressed after a document drag has started
-        } // allow pointer down to go through otherwise so that marquees can be drawn starting over a document 
-
-        if (e.button === 0) {
-            e.preventDefault();  // prevents Firefox from dragging images (we want to do that ourself)
-        }
-    }
-    onClick = async (e: React.MouseEvent) => {
-        e.stopPropagation();
-        let altKey = e.altKey;
-        let ctrlKey = e.ctrlKey;
-        if (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
-            Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD) {
-            let isExpander = (e.target as any).id === "isExpander";
-            if (BoolCast(this.props.Document.isButton, false) || isExpander) {
-                SelectionManager.DeselectAll();
-                let subBulletDocs = await DocListCastAsync(this.props.Document.subBulletDocs);
-                let maximizedDocs = await DocListCastAsync(this.props.Document.maximizedDocs);
-                let summarizedDocs = await DocListCastAsync(this.props.Document.summarizedDocs);
-                let linkedToDocs = await DocListCastAsync(this.props.Document.linkedToDocs, []);
-                let linkedFromDocs = await DocListCastAsync(this.props.Document.linkedFromDocs, []);
-                let expandedDocs: Doc[] = [];
-                expandedDocs = subBulletDocs ? [...subBulletDocs, ...expandedDocs] : expandedDocs;
-                expandedDocs = maximizedDocs ? [...maximizedDocs, ...expandedDocs] : expandedDocs;
-                expandedDocs = summarizedDocs ? [...summarizedDocs, ...expandedDocs] : expandedDocs;
-                // let expandedDocs = [...(subBulletDocs ? subBulletDocs : []), ...(maximizedDocs ? maximizedDocs : []), ...(summarizedDocs ? summarizedDocs : []),];
-                if (expandedDocs.length) {   // bcz: need a better way to associate behaviors with click events on widget-documents
-                    let expandedProtoDocs = expandedDocs.map(doc => Doc.GetProto(doc));
-                    let maxLocation = StrCast(this.props.Document.maximizeLocation, "inPlace");
-                    let getDispDoc = (target: Doc) => Object.getOwnPropertyNames(target).indexOf("isPrototype") === -1 ? target : Doc.MakeDelegate(target);
-                    if (altKey) {
-                        maxLocation = this.props.Document.maximizeLocation = (maxLocation === "inPlace" || !maxLocation ? "inTab" : "inPlace");
-                        if (!maxLocation || maxLocation === "inPlace") {
-                            let hadView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedProtoDocs[0], this.props.ContainingCollectionView);
-                            let wasMinimized = !hadView && expandedDocs.reduce((min, d) => !min && !BoolCast(d.IsMinimized, false), false);
-                            expandedDocs.forEach(maxDoc => Doc.GetProto(maxDoc).isMinimized = false);
-                            let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedProtoDocs[0], this.props.ContainingCollectionView);
-                            if (!hasView) {
-                                this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(getDispDoc(maxDoc), false));
-                            }
-                            expandedProtoDocs.forEach(maxDoc => maxDoc.isMinimized = wasMinimized);
-                        }
-                    }
-                    if (maxLocation && maxLocation !== "inPlace") {
-                        let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
-                        if (dataDocs) {
-                            expandedDocs.forEach(maxDoc =>
-                                (!CollectionDockingView.Instance.CloseRightSplit(Doc.GetProto(maxDoc)) &&
-                                    this.props.addDocTab(getDispDoc(maxDoc), maxLocation)));
-                        }
-                    } else {
-                        this.toggleIcon(expandedProtoDocs);
-                    }
-                }
-                else if (linkedToDocs.length || linkedFromDocs.length) {
-                    let linkedFwdDocs = [
-                        linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : expandedDocs[0],
-                        linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : expandedDocs[0]];
-
-                    let linkedFwdPage = [
-                        linkedToDocs.length ? NumCast(linkedToDocs[0].linkedToPage, undefined) : linkedFromDocs.length ? NumCast(linkedFromDocs[0].linkedFromPage, undefined) : undefined,
-                        linkedFromDocs.length ? NumCast(linkedFromDocs[0].linkedFromPage, undefined) : linkedToDocs.length ? NumCast(linkedToDocs[0].linkedToPage, undefined) : undefined];
-                    if (!linkedFwdDocs.some(l => l instanceof Promise)) {
-                        let maxLocation = StrCast(linkedFwdDocs[altKey ? 1 : 0].maximizeLocation, "inTab");
-                        DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0], ctrlKey, document => this.props.addDocTab(document, maxLocation), linkedFwdPage[altKey ? 1 : 0]);
-                    }
-                }
-            }
-        }
-    }
 
     borderRounding = () => {
         let br = NumCast(this.props.Document.borderRounding);
@@ -261,8 +144,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
 
         return (
             <div className="collectionFreeFormDocumentView-container" ref={this._mainCont}
-                onPointerDown={this.onPointerDown}
-                onClick={this.onClick}
                 style={{
                     opacity: zoomFade,
                     borderRadius: `${this.borderRounding()}px`,
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 36c14fbf2..a16a52ac6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -2,11 +2,11 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { faAlignCenter, faCaretSquareRight, faCompressArrowsAlt, faExpandArrowsAlt, faLayerGroup, faSquare, faTrash, faConciergeBell, faFolder, faMapPin, faLink, faFingerprint, faCrosshairs, faDesktop } from '@fortawesome/free-solid-svg-icons';
 import { action, computed, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../new_fields/Doc";
+import { Doc, DocListCast, HeightSym, Opt, WidthSym, DocListCastAsync } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { ObjectField } from "../../../new_fields/ObjectField";
 import { createSchema, makeInterface } from "../../../new_fields/Schema";
-import { BoolCast, Cast, FieldValue, StrCast } from "../../../new_fields/Types";
+import { BoolCast, Cast, FieldValue, StrCast, NumCast } from "../../../new_fields/Types";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { emptyFunction, Utils } from "../../../Utils";
 import { DocServer } from "../../DocServer";
@@ -16,7 +16,7 @@ import { DragManager, dropActionType } from "../../util/DragManager";
 import { SearchUtil } from "../../util/SearchUtil";
 import { SelectionManager } from "../../util/SelectionManager";
 import { Transform } from "../../util/Transform";
-import { undoBatch } from "../../util/UndoManager";
+import { undoBatch, UndoManager } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { CollectionVideoView } from "../collections/CollectionVideoView";
@@ -72,9 +72,9 @@ export interface DocumentViewProps {
     selectOnLoad: boolean;
     parentActive: () => boolean;
     whenActiveChanged: (isActive: boolean) => void;
-    toggleMinimized: () => void;
     bringToFront: (doc: Doc) => void;
     addDocTab: (doc: Doc, where: string) => void;
+    whenClicked?: () => void;
 }
 
 const schema = createSchema({
@@ -103,6 +103,9 @@ const Document = makeInterface(schema);
 export class DocumentView extends DocComponent<DocumentViewProps, Document>(Document) {
     private _downX: number = 0;
     private _downY: number = 0;
+    private _lastTap: number = 0;
+    private _doubleTap = false;
+    private _hitExpander = false;
     private _mainCont = React.createRef<HTMLDivElement>();
     private _dropDisposer?: DragManager.DragDropDisposer;
 
@@ -182,23 +185,112 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             });
         }
     }
+    toggleMinimized = async () => {
+        let minimizedDoc = await Cast(this.props.Document.minimizedDoc, Doc);
+        if (minimizedDoc) {
+            let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(
+                NumCast(minimizedDoc.x) - NumCast(this.Document.x), NumCast(minimizedDoc.y) - NumCast(this.Document.y));
+            this.collapseToPoint(scrpt, await DocListCastAsync(minimizedDoc.maximizedDocs));
+        }
+    }
 
-    _doubleTap = false;
-    onClick = (e: React.MouseEvent): void => {
+    static _undoBatch?: UndoManager.Batch = undefined;
+    @action
+    public collapseToPoint = async (scrpt: number[], expandedDocs: Doc[] | undefined): Promise<void> => {
+        SelectionManager.DeselectAll();
+        if (expandedDocs) {
+            if (!DocumentView._undoBatch) {
+                DocumentView._undoBatch = UndoManager.StartBatch("iconAnimating");
+            }
+            let isMinimized: boolean | undefined;
+            expandedDocs.map(d => Doc.GetProto(d)).map(maximizedDoc => {
+                let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
+                if (!iconAnimating || (Date.now() - iconAnimating[2] > 1000)) {
+                    if (isMinimized === undefined) {
+                        isMinimized = BoolCast(maximizedDoc.isMinimized, false);
+                    }
+                    maximizedDoc.willMaximize = isMinimized;
+                    maximizedDoc.isMinimized = false;
+                    maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], Date.now(), isMinimized ? 1 : 0]);
+                }
+            });
+            setTimeout(() => {
+                DocumentView._undoBatch && DocumentView._undoBatch.end();
+                DocumentView._undoBatch = undefined;
+            }, 500);
+        }
+    }
+    onClick = async (e: React.MouseEvent) => {
+        e.stopPropagation();
+        let altKey = e.altKey;
+        let ctrlKey = e.ctrlKey;
         if (this._doubleTap && !this.props.isTopMost) {
             this.props.addDocTab(this.props.Document, "inTab");
             SelectionManager.DeselectAll();
             this.props.Document.libraryBrush = false;
-            e.stopPropagation();
         }
         else if (CurrentUserUtils.MainDocId !== this.props.Document[Id] &&
             (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD &&
                 Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
             SelectionManager.SelectDoc(this, e.ctrlKey);
+            let isExpander = (e.target as any).id === "isExpander";
+            if (BoolCast(this.props.Document.isButton, false) || isExpander) {
+                SelectionManager.DeselectAll();
+                let subBulletDocs = await DocListCastAsync(this.props.Document.subBulletDocs);
+                let maximizedDocs = await DocListCastAsync(this.props.Document.maximizedDocs);
+                let summarizedDocs = await DocListCastAsync(this.props.Document.summarizedDocs);
+                let linkedToDocs = await DocListCastAsync(this.props.Document.linkedToDocs, []);
+                let linkedFromDocs = await DocListCastAsync(this.props.Document.linkedFromDocs, []);
+                let expandedDocs: Doc[] = [];
+                expandedDocs = subBulletDocs ? [...subBulletDocs, ...expandedDocs] : expandedDocs;
+                expandedDocs = maximizedDocs ? [...maximizedDocs, ...expandedDocs] : expandedDocs;
+                expandedDocs = summarizedDocs ? [...summarizedDocs, ...expandedDocs] : expandedDocs;
+                // let expandedDocs = [...(subBulletDocs ? subBulletDocs : []), ...(maximizedDocs ? maximizedDocs : []), ...(summarizedDocs ? summarizedDocs : []),];
+                if (expandedDocs.length) {   // bcz: need a better way to associate behaviors with click events on widget-documents
+                    let expandedProtoDocs = expandedDocs.map(doc => Doc.GetProto(doc));
+                    let maxLocation = StrCast(this.props.Document.maximizeLocation, "inPlace");
+                    let getDispDoc = (target: Doc) => Object.getOwnPropertyNames(target).indexOf("isPrototype") === -1 ? target : Doc.MakeDelegate(target);
+                    if (altKey) {
+                        maxLocation = this.props.Document.maximizeLocation = (maxLocation === "inPlace" || !maxLocation ? "inTab" : "inPlace");
+                        if (!maxLocation || maxLocation === "inPlace") {
+                            let hadView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedProtoDocs[0], this.props.ContainingCollectionView);
+                            let wasMinimized = !hadView && expandedDocs.reduce((min, d) => !min && !BoolCast(d.IsMinimized, false), false);
+                            expandedDocs.forEach(maxDoc => Doc.GetProto(maxDoc).isMinimized = false);
+                            let hasView = expandedDocs.length === 1 && DocumentManager.Instance.getDocumentView(expandedProtoDocs[0], this.props.ContainingCollectionView);
+                            if (!hasView) {
+                                this.props.addDocument && expandedDocs.forEach(async maxDoc => this.props.addDocument!(getDispDoc(maxDoc), false));
+                            }
+                            expandedProtoDocs.forEach(maxDoc => maxDoc.isMinimized = wasMinimized);
+                        }
+                    }
+                    if (maxLocation && maxLocation !== "inPlace") {
+                        let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
+                        if (dataDocs) {
+                            expandedDocs.forEach(maxDoc =>
+                                (!CollectionDockingView.Instance.CloseRightSplit(Doc.GetProto(maxDoc)) &&
+                                    this.props.addDocTab(getDispDoc(maxDoc), maxLocation)));
+                        }
+                    } else {
+                        let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(NumCast(this.Document.width) / 2, NumCast(this.Document.height) / 2);
+                        this.collapseToPoint(scrpt, expandedProtoDocs);
+                    }
+                }
+                else if (linkedToDocs.length || linkedFromDocs.length) {
+                    let linkedFwdDocs = [
+                        linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : expandedDocs[0],
+                        linkedFromDocs.length ? linkedFromDocs[0].linkedFrom as Doc : linkedToDocs.length ? linkedToDocs[0].linkedTo as Doc : expandedDocs[0]];
+
+                    let linkedFwdPage = [
+                        linkedToDocs.length ? NumCast(linkedToDocs[0].linkedToPage, undefined) : linkedFromDocs.length ? NumCast(linkedFromDocs[0].linkedFromPage, undefined) : undefined,
+                        linkedFromDocs.length ? NumCast(linkedFromDocs[0].linkedFromPage, undefined) : linkedToDocs.length ? NumCast(linkedToDocs[0].linkedToPage, undefined) : undefined];
+                    if (!linkedFwdDocs.some(l => l instanceof Promise)) {
+                        let maxLocation = StrCast(linkedFwdDocs[altKey ? 1 : 0].maximizeLocation, "inTab");
+                        DocumentManager.Instance.jumpToDocument(linkedFwdDocs[altKey ? 1 : 0], ctrlKey, document => this.props.addDocTab(document, maxLocation), linkedFwdPage[altKey ? 1 : 0]);
+                    }
+                }
+            }
         }
     }
-    private _lastTap: number = 0;
-    _hitExpander = false;
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
@@ -206,8 +298,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (e.shiftKey && e.buttons === 1) {
             CollectionDockingView.Instance.StartOtherDrag([Doc.MakeAlias(this.props.Document)], e);
             e.stopPropagation();
-        } else if (this.active) {
-            //e.stopPropagation(); // bcz: doing this will block click events from CollectionFreeFormDocumentView which are needed for iconifying,etc
+        } else {
+            if (this.active) e.stopPropagation(); // events stop at the lowest document that is active.  
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
@@ -215,7 +307,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
     onPointerMove = (e: PointerEvent): void => {
-        if (!e.cancelBubble) {
+        if (!e.cancelBubble && this.active) {
             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);
@@ -234,32 +326,22 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this._lastTap = Date.now();
     }
 
-    deleteClicked = (): void => {
-        this.props.removeDocument && this.props.removeDocument(this.props.Document);
-    }
-    fieldsClicked = (e: React.MouseEvent): void => {
-        let kvp = Docs.KVPDocument(this.props.Document, { title: this.props.Document.title + ".kvp", width: 300, height: 300 });
-        CollectionDockingView.Instance.AddRightSplit(kvp);
-    }
-    makeButton = (e: React.MouseEvent): void => {
-        let doc = this.props.Document.proto ? this.props.Document.proto : this.props.Document;
+    deleteClicked = (): void => { this.props.removeDocument && this.props.removeDocument(this.props.Document); }
+    fieldsClicked = (): void => { this.props.addDocTab(Docs.KVPDocument(this.Document, { width: 300, height: 300 }), "onRight") };
+    makeBtnClicked = (): void => {
+        let doc = Doc.GetProto(this.props.Document);
         doc.isButton = !BoolCast(doc.isButton, false);
         if (StrCast(doc.layout).indexOf("Formatted") !== -1) { // only need to freeze the dimensions of text boxes since they don't have a native width and height naturally
             if (doc.isButton && !doc.nativeWidth) {
                 doc.nativeWidth = this.props.Document[WidthSym]();
                 doc.nativeHeight = this.props.Document[HeightSym]();
             } else {
-
                 doc.nativeWidth = doc.nativeHeight = undefined;
             }
         }
     }
-    fullScreenClicked = (e: React.MouseEvent): void => {
-        const doc = Doc.MakeCopy(this.props.Document, false);
-        if (doc) {
-            CollectionDockingView.Instance.OpenFullScreen(doc);
-        }
-        ContextMenu.Instance.clearItems();
+    fullScreenClicked = (): void => {
+        CollectionDockingView.Instance.OpenFullScreen(Doc.MakeCopy(this.props.Document, false));
         SelectionManager.DeselectAll();
     }
 
@@ -332,7 +414,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         cm.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document), icon: "caret-square-right" });
         cm.addItem({ description: "Fields", event: this.fieldsClicked, icon: "layer-group" });
         cm.addItem({ description: "Pin to Pres", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "map-pin" });
-        cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeButton, icon: "concierge-bell" });
+        cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeBtnClicked, icon: "concierge-bell" });
         cm.addItem({
             description: "Find aliases", event: async () => {
                 const aliases = await SearchUtil.GetAliasesOfDocument(this.props.Document);
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index d3d765eed..7b642b299 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -102,7 +102,6 @@ export class FieldView extends React.Component<FieldViewProps> {
                     layoutKey={"layout"}
                     ContainingCollectionView={this.props.ContainingCollectionView}
                     parentActive={this.props.active}
-                    toggleMinimized={emptyFunction}
                     whenActiveChanged={this.props.whenActiveChanged}
                     bringToFront={emptyFunction} />
             );
-- 
cgit v1.2.3-70-g09d2


From 890a40ef8cc2efa7beea5722301b59ede5141238 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 30 May 2019 13:47:53 -0400
Subject: fixed context menus and tree view jitter.

---
 src/client/util/DragManager.ts                     |  4 +--
 src/client/util/TooltipTextMenu.tsx                |  2 +-
 src/client/views/ContextMenu.scss                  |  2 +-
 src/client/views/ContextMenuItem.tsx               |  2 +-
 src/client/views/MainView.tsx                      |  6 ++--
 .../views/collections/CollectionDockingView.tsx    |  6 +++-
 .../views/collections/CollectionTreeView.scss      |  6 +++-
 .../views/collections/CollectionTreeView.tsx       | 33 +++++++++++++---------
 src/client/views/collections/CollectionView.tsx    | 30 +++++++-------------
 src/client/views/nodes/DocumentView.tsx            | 31 ++++++++++++++------
 src/client/views/nodes/FormattedTextBox.tsx        | 25 +---------------
 src/client/views/nodes/ImageBox.tsx                | 11 ++++----
 .../authentication/models/current_user_utils.ts    | 20 ++++++-------
 13 files changed, 85 insertions(+), 93 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 7f75a95f0..8f0cce095 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -26,7 +26,7 @@ export function SetupDrag(_reference: React.RefObject<HTMLElement>, docFunc: ()
         // if (this.props.isSelected() || this.props.isTopMost) {
         if (e.button === 0) {
             e.stopPropagation();
-            if (e.shiftKey) {
+            if (e.shiftKey && CollectionDockingView.Instance) {
                 CollectionDockingView.Instance.StartOtherDrag([await docFunc()], e);
             } else {
                 document.addEventListener("pointermove", onRowMove);
@@ -264,7 +264,7 @@ export namespace DragManager {
             if (dragData instanceof DocumentDragData) {
                 dragData.userDropAction = e.ctrlKey || e.altKey ? "alias" : undefined;
             }
-            if (e.shiftKey) {
+            if (e.shiftKey && CollectionDockingView.Instance) {
                 AbortDrag();
                 CollectionDockingView.Instance.StartOtherDrag(docs, {
                     pageX: e.pageX,
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index a1f80120f..5dd10f1bf 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -194,7 +194,7 @@ export class TooltipTextMenu {
                                 if (DocumentManager.Instance.getDocumentView(f)) {
                                     DocumentManager.Instance.getDocumentView(f)!.props.focus(f);
                                 }
-                                else CollectionDockingView.Instance.AddRightSplit(f);
+                                else if (CollectionDockingView.Instance) CollectionDockingView.Instance.AddRightSplit(f);
                             }
                         }));
                     }
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 61ae69179..74acba615 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -22,7 +22,7 @@
     color: $light-color;
 }
 
-.subMenu-cont {
+.contextMenu-subMenu-cont {
     position: absolute;
     display: flex;
     z-index: 1000;
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 63347e076..fcda0db89 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -56,7 +56,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps> {
         }
         else {
             let submenu = !this.overItem ? (null) :
-                <div className="subMenu-cont" style={{ marginLeft: "100.5%", left: "0px" }}>
+                <div className="contextMenu-subMenu-cont" style={{ marginLeft: "100.5%", left: "0px" }}>
                     {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />)}
                 </div>;
             return (
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 74dafadc4..a093ffdec 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -104,7 +104,9 @@ export class MainView extends React.Component {
         }, false); // drag event handler
         // click interactions for the context menu
         document.addEventListener("pointerdown", action(function (e: PointerEvent) {
-            if (!ContextMenu.Instance.intersects(e.pageX, e.pageY)) {
+
+            const targets = document.elementsFromPoint(e.x, e.y);
+            if (targets && targets.length && targets[0].className.toString().indexOf("contextMenu") === -1) {
                 ContextMenu.Instance.clearItems();
             }
         }), true);
@@ -163,7 +165,7 @@ export class MainView extends React.Component {
     }
 
     openNotifsCol = () => {
-        if (this._notifsCol) {
+        if (this._notifsCol && CollectionDockingView.Instance) {
             CollectionDockingView.Instance.AddRightSplit(this._notifsCol);
         }
     }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index b6076b5f7..dcc1bd95d 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -22,6 +22,7 @@ import { ParentDocSelector } from './ParentDocumentSelector';
 import { DocumentManager } from '../../util/DocumentManager';
 import { CollectionViewType } from './CollectionBaseView';
 import { Id } from '../../../new_fields/FieldSymbols';
+import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -415,7 +416,10 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     @observable private _panelHeight = 0;
     @observable private _document: Opt<Doc>;
     get _stack(): any {
-        return (this.props as any).glContainer.parent.parent;
+        let parent = (this.props as any).glContainer.parent.parent;
+        if (this._document && this._document.excludeFromLibrary && parent.parent && parent.parent.contentItems.length > 1)
+            return parent.parent.contentItems[1];
+        return parent;
     }
     constructor(props: any) {
         super(props);
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 2f0329fc4..bb3be0a73 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -48,7 +48,11 @@
         .treeViewItem-openRight {
             display: inline-block;
             // display: inline;
-            transform: translate(0px, -3px); //TODO Fix this
+            svg {
+                display:block;
+                padding:0px;
+                margin: 0px;
+            }
         }
     }
 
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 85aab96d3..2814c0502 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -9,7 +9,7 @@ import { CollectionSubView } from "./CollectionSubView";
 import "./CollectionTreeView.scss";
 import React = require("react");
 import { Document, listSpec } from '../../../new_fields/Schema';
-import { Cast, StrCast, BoolCast, FieldValue } from '../../../new_fields/Types';
+import { Cast, StrCast, BoolCast, FieldValue, NumCast } from '../../../new_fields/Types';
 import { Doc, DocListCast } from '../../../new_fields/Doc';
 import { Id } from '../../../new_fields/FieldSymbols';
 import { ContextMenu } from '../ContextMenu';
@@ -19,6 +19,7 @@ import { CollectionDockingView } from './CollectionDockingView';
 import { DocumentManager } from '../../util/DocumentManager';
 import { Docs } from '../../documents/Documents';
 import { MainView } from '../MainView';
+import { CollectionViewType } from './CollectionBaseView';
 
 
 export interface TreeViewProps {
@@ -54,7 +55,7 @@ class TreeView extends React.Component<TreeViewProps> {
         if (this.props.document.dockingConfig) {
             MainView.Instance.openWorkspace(this.props.document);
         } else {
-            CollectionDockingView.Instance.AddRightSplit(this.props.document);
+            this.props.addDocTab(this.props.document, "openRight");
         }
     }
 
@@ -122,11 +123,11 @@ class TreeView extends React.Component<TreeViewProps> {
                     return true;
                 }}
             />);
-        let dataDocs = Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc), []);
+        let dataDocs = CollectionDockingView.Instance ? Cast(CollectionDockingView.Instance.props.Document.data, listSpec(Doc), []) : [];
         let openRight = dataDocs && dataDocs.indexOf(this.props.document) !== -1 ? (null) : (
             <div className="treeViewItem-openRight" onPointerDown={this.onPointerDown} onClick={this.openRight}>
                 <FontAwesomeIcon icon="angle-right" size="lg" />
-                <FontAwesomeIcon icon="angle-right" size="lg" />
+                {/* <FontAwesomeIcon icon="angle-right" size="lg" /> */}
             </div>);
         return (
             <div className="docContainer" ref={reference} onPointerDown={onItemDown} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
@@ -139,14 +140,19 @@ class TreeView extends React.Component<TreeViewProps> {
     }
 
     onWorkspaceContextMenu = (e: React.MouseEvent): void => {
-        if (!e.isPropagationStopped() && this.props.document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+        if (!e.isPropagationStopped()) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             ContextMenu.Instance.addItem({ description: "Open as Workspace", event: undoBatch(() => MainView.Instance.openWorkspace(this.props.document)) });
-            ContextMenu.Instance.addItem({ description: "Open Right", event: () => this.props.addDocTab(this.props.document, "onRight") });
-            ContextMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.KVPDocument(this.props.document, { width: 300, height: 300 }), "onRight") });
-            if (DocumentManager.Instance.getDocumentViews(this.props.document).length) {
-                ContextMenu.Instance.addItem({ description: "Focus", event: () => DocumentManager.Instance.getDocumentViews(this.props.document).map(view => view.props.focus(this.props.document)) });
+            ContextMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.KVPDocument(this.props.document, { width: 300, height: 300 }), "onRight"), icon: "layer-group" });
+            if (NumCast(this.props.document.viewType) !== CollectionViewType.Docking) {
+                ContextMenu.Instance.addItem({ description: "Open Tab", event: () => this.props.addDocTab(this.props.document, "inTab"), icon: "folder" });
+                ContextMenu.Instance.addItem({ description: "Open Right", event: () => this.props.addDocTab(this.props.document, "onRight"), icon: "caret-square-right" });
+                if (DocumentManager.Instance.getDocumentViews(this.props.document).length) {
+                    ContextMenu.Instance.addItem({ description: "Focus", event: () => DocumentManager.Instance.getDocumentViews(this.props.document).map(view => view.props.focus(this.props.document)) });
+                }
+                ContextMenu.Instance.addItem({ description: "Delete Item", event: undoBatch(() => this.props.deleteDoc(this.props.document)) });
+            } else {
+                ContextMenu.Instance.addItem({ description: "Delete Workspace", event: undoBatch(() => this.props.deleteDoc(this.props.document)) });
             }
-            ContextMenu.Instance.addItem({ description: "Delete", event: undoBatch(() => this.props.deleteDoc(this.props.document)) });
             ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
             e.stopPropagation();
         }
@@ -207,11 +213,10 @@ export class CollectionTreeView extends CollectionSubView(Document) {
         }
     }
     onContextMenu = (e: React.MouseEvent): void => {
-        if (!e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
+        // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout
+        if (!e.isPropagationStopped() && this.props.Document.excludeFromLibrary) { // excludeFromLibrary means this is the user document
             ContextMenu.Instance.addItem({ description: "Create Workspace", event: undoBatch(() => MainView.Instance.createNewWorkspace()) });
-        }
-        if (!ContextMenu.Instance.getItems().some(item => item.description === "Delete")) {
-            ContextMenu.Instance.addItem({ description: "Delete", event: undoBatch(() => this.remove(this.props.Document)) });
+            ContextMenu.Instance.addItem({ description: "Delete Workspace", event: undoBatch(() => this.remove(this.props.Document)) });
         }
     }
     render() {
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index a1e7c7c69..68eefab4c 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,20 +1,19 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faProjectDiagram, faSquare, faTh, faTree, faSignature, faThList } from '@fortawesome/free-solid-svg-icons';
+import { faProjectDiagram, faSignature, faSquare, faTh, faThList, faTree } from '@fortawesome/free-solid-svg-icons';
 import { observer } from "mobx-react";
 import * as React from 'react';
 import { Id } from '../../../new_fields/FieldSymbols';
 import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
 import { undoBatch } from '../../util/UndoManager';
 import { ContextMenu } from "../ContextMenu";
+import { ContextMenuProps } from '../ContextMenuItem';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import { CollectionBaseView, CollectionRenderProps, CollectionViewType } from './CollectionBaseView';
 import { CollectionDockingView } from "./CollectionDockingView";
-import { CollectionSchemaView } from "./CollectionSchemaView";
-import { CollectionTreeView } from "./CollectionTreeView";
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
+import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionStackingView } from './CollectionStackingView';
-import { NumCast } from '../../../new_fields/Types';
-import { WidthSym, HeightSym } from '../../../new_fields/Doc';
+import { CollectionTreeView } from "./CollectionTreeView";
 export const COLLECTION_BORDER_WIDTH = 2;
 
 library.add(faTh);
@@ -44,26 +43,17 @@ export class CollectionView extends React.Component<FieldViewProps> {
 
     get isAnnotationOverlay() { return this.props.fieldKey && this.props.fieldKey === "annotations"; } // bcz: ? Why do we need to compare Id's?
 
-    freezeNativeDimensions = (e: React.MouseEvent): void => {
-        if (NumCast(this.props.Document.nativeWidth)) {
-            this.props.Document.proto!.nativeWidth = undefined;
-            this.props.Document.proto!.nativeHeight = undefined;
-
-        } else {
-            this.props.Document.proto!.nativeWidth = this.props.Document[WidthSym]();
-            this.props.Document.proto!.nativeHeight = this.props.Document[HeightSym]();
-        }
-    }
     onContextMenu = (e: React.MouseEvent): void => {
         if (!this.isAnnotationOverlay && !e.isPropagationStopped() && this.props.Document[Id] !== CurrentUserUtils.MainDocId) { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
-            ContextMenu.Instance.addItem({ description: "Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Freeform), icon: "signature" });
+            let subItems: ContextMenuProps[] = [];
+            subItems.push({ description: "Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Freeform), icon: "signature" });
             if (CollectionBaseView.InSafeMode()) {
                 ContextMenu.Instance.addItem({ description: "Test Freeform", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Invalid), icon: "project-diagram" });
             }
-            ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "th-list" });
-            ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
-            ContextMenu.Instance.addItem({ description: "Stacking", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Stacking), icon: "th-list" });
-            ContextMenu.Instance.addItem({ description: NumCast(this.props.Document.nativeWidth) ? "Unfreeze" : "Freeze", event: this.freezeNativeDimensions, icon: "edit" });
+            subItems.push({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "th-list" });
+            subItems.push({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" });
+            subItems.push({ description: "Stacking", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Stacking), icon: "th-list" });
+            ContextMenu.Instance.addItem({ description: "View Modes...", subitems: subItems });
         }
     }
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a16a52ac6..69691b6f3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -29,6 +29,7 @@ import { DocumentContentsView } from "./DocumentContentsView";
 import "./DocumentView.scss";
 import React = require("react");
 import { Id, Copy } from '../../../new_fields/FieldSymbols';
+import { ContextMenuProps } from '../ContextMenuItem';
 const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 library.add(faTrash);
@@ -263,7 +264,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                             expandedProtoDocs.forEach(maxDoc => maxDoc.isMinimized = wasMinimized);
                         }
                     }
-                    if (maxLocation && maxLocation !== "inPlace") {
+                    if (maxLocation && maxLocation !== "inPlace" && CollectionDockingView.Instance) {
                         let dataDocs = DocListCast(CollectionDockingView.Instance.props.Document.data);
                         if (dataDocs) {
                             expandedDocs.forEach(maxDoc =>
@@ -295,7 +296,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this._downX = e.clientX;
         this._downY = e.clientY;
         this._hitExpander = DocListCast(this.props.Document.subBulletDocs).length > 0;
-        if (e.shiftKey && e.buttons === 1) {
+        if (e.shiftKey && e.buttons === 1 && CollectionDockingView.Instance) {
             CollectionDockingView.Instance.StartOtherDrag([Doc.MakeAlias(this.props.Document)], e);
             e.stopPropagation();
         } else {
@@ -341,7 +342,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
     fullScreenClicked = (): void => {
-        CollectionDockingView.Instance.OpenFullScreen(Doc.MakeCopy(this.props.Document, false));
+        CollectionDockingView.Instance && CollectionDockingView.Instance.OpenFullScreen(Doc.MakeCopy(this.props.Document, false));
         SelectionManager.DeselectAll();
     }
 
@@ -398,6 +399,17 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this.templates = this.templates;
     }
 
+    freezeNativeDimensions = (e: React.MouseEvent): void => {
+        if (NumCast(this.props.Document.nativeWidth)) {
+            this.props.Document.proto!.nativeWidth = undefined;
+            this.props.Document.proto!.nativeHeight = undefined;
+
+        } else {
+            this.props.Document.proto!.nativeWidth = this.props.Document[WidthSym]();
+            this.props.Document.proto!.nativeHeight = this.props.Document[HeightSym]();
+        }
+    }
+
     @action
     onContextMenu = (e: React.MouseEvent): void => {
         e.stopPropagation();
@@ -409,16 +421,19 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         e.preventDefault();
 
         const cm = ContextMenu.Instance;
-        cm.addItem({ description: "Full Screen", event: this.fullScreenClicked, icon: "desktop" });
-        cm.addItem({ description: "Open Tab", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, "inTab"), icon: "folder" });
-        cm.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document), icon: "caret-square-right" });
-        cm.addItem({ description: "Fields", event: this.fieldsClicked, icon: "layer-group" });
+        let subitems: ContextMenuProps[] = [];
+        subitems.push({ description: "Open Full Screen", event: this.fullScreenClicked, icon: "desktop" });
+        subitems.push({ description: "Open Tab", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, "inTab"), icon: "folder" });
+        subitems.push({ description: "Open Right", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, "onRight"), icon: "caret-square-right" });
+        subitems.push({ description: "Open Fields", event: this.fieldsClicked, icon: "layer-group" });
+        cm.addItem({ description: "Open...", subitems: subitems });
+        cm.addItem({ description: NumCast(this.props.Document.nativeWidth) ? "Unfreeze" : "Freeze", event: this.freezeNativeDimensions, icon: "edit" });
         cm.addItem({ description: "Pin to Pres", event: () => PresentationView.Instance.PinDoc(this.props.Document), icon: "map-pin" });
         cm.addItem({ description: this.props.Document.isButton ? "Remove Button" : "Make Button", event: this.makeBtnClicked, icon: "concierge-bell" });
         cm.addItem({
             description: "Find aliases", event: async () => {
                 const aliases = await SearchUtil.GetAliasesOfDocument(this.props.Document);
-                CollectionDockingView.Instance.AddRightSplit(Docs.SchemaDocument(["title"], aliases, {}));
+                this.props.addDocTab && this.props.addDocTab(Docs.SchemaDocument(["title"], aliases, {}), "onRight");
             }, icon: "search"
         });
         cm.addItem({ description: "Center View", event: () => this.props.focus(this.props.Document), icon: "crosshairs" });
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index da584c811..5d93edaac 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -240,7 +240,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                             if (DocumentManager.Instance.getDocumentView(f)) {
                                 DocumentManager.Instance.getDocumentView(f)!.props.focus(f);
                             } else {
-                                CollectionDockingView.Instance.AddRightSplit(f);
+                                this.props.addDocTab && this.props.addDocTab(f, "onRight");
                             }
                         }
                     }));
@@ -274,29 +274,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             }
         }
     }
-
-    freezeNativeDimensions = (e: React.MouseEvent): void => {
-        if (NumCast(this.props.Document.nativeWidth)) {
-            this.props.Document.proto!.nativeWidth = undefined;
-            this.props.Document.proto!.nativeHeight = undefined;
-
-        } else {
-            this.props.Document.proto!.nativeWidth = this.props.Document[WidthSym]();
-            this.props.Document.proto!.nativeHeight = this.props.Document[HeightSym]();
-        }
-    }
-    specificContextMenu = (e: React.MouseEvent): void => {
-        if (!this._gotDown) {
-            e.preventDefault();
-            return;
-        }
-        ContextMenu.Instance.addItem({
-            description: NumCast(this.props.Document.nativeWidth) ? "Unfreeze" : "Freeze",
-            event: this.freezeNativeDimensions,
-            icon: "edit"
-        });
-    }
-
     onPointerWheel = (e: React.WheelEvent): void => {
         if (this.props.isSelected()) {
             e.stopPropagation();
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 8ea6c5436..4c2b73b70 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -19,6 +19,7 @@ import { InkingControl } from '../InkingControl';
 import { Doc, WidthSym, HeightSym } from '../../../new_fields/Doc';
 import { faImage } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
+import { ContextMenuItemProps, ContextMenuProps } from '../ContextMenuItem';
 var path = require('path');
 
 
@@ -131,12 +132,9 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
         let field = Cast(this.Document[this.props.fieldKey], ImageField);
         if (field) {
             let url = field.url.href;
-            ContextMenu.Instance.addItem({
-                description: "Copy path", event: () => {
-                    Utils.CopyText(url);
-                }, icon: "expand-arrows-alt"
-            });
-            ContextMenu.Instance.addItem({
+            let subitems: ContextMenuProps[] = [];
+            subitems.push({ description: "Copy path", event: () => Utils.CopyText(url), icon: "expand-arrows-alt" });
+            subitems.push({
                 description: "Rotate", event: action(() => {
                     this.props.Document.rotation = (NumCast(this.props.Document.rotation) + 90) % 360;
                     let nw = this.props.Document.nativeWidth;
@@ -147,6 +145,7 @@ export class ImageBox extends DocComponent<FieldViewProps, ImageDocument>(ImageD
                     this.props.Document.height = w;
                 }), icon: "expand-arrows-alt"
             });
+            ContextMenu.Instance.addItem({ description: "Image Funcs...", subitems: subitems });
         }
     }
 
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index add347a88..e5b7a025b 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -1,21 +1,17 @@
-import { computed, observable, action, runInAction } from "mobx";
+import { action, computed, observable, runInAction } from "mobx";
 import * as rp from 'request-promise';
+import { DocServer } from "../../../client/DocServer";
 import { Docs } from "../../../client/documents/Documents";
-import { Attribute, AttributeGroup, Catalog, Schema, AggregateFunction } from "../../../client/northstar/model/idea/idea";
+import { Gateway, NorthstarSettings } from "../../../client/northstar/manager/Gateway";
+import { Attribute, AttributeGroup, Catalog, Schema } from "../../../client/northstar/model/idea/idea";
 import { ArrayUtil } from "../../../client/northstar/utils/ArrayUtil";
-import { RouteStore } from "../../RouteStore";
-import { DocServer } from "../../../client/DocServer";
-import { Doc, Opt, Field } from "../../../new_fields/Doc";
-import { List } from "../../../new_fields/List";
 import { CollectionViewType } from "../../../client/views/collections/CollectionBaseView";
-import { CollectionTreeView } from "../../../client/views/collections/CollectionTreeView";
 import { CollectionView } from "../../../client/views/collections/CollectionView";
-import { NorthstarSettings, Gateway } from "../../../client/northstar/manager/Gateway";
-import { AttributeTransformationModel } from "../../../client/northstar/core/attribute/AttributeTransformationModel";
-import { ColumnAttributeModel } from "../../../client/northstar/core/attribute/AttributeModel";
-import { HistogramOperation } from "../../../client/northstar/operations/HistogramOperation";
-import { Cast, PromiseValue } from "../../../new_fields/Types";
+import { Doc } from "../../../new_fields/Doc";
+import { List } from "../../../new_fields/List";
 import { listSpec } from "../../../new_fields/Schema";
+import { Cast } from "../../../new_fields/Types";
+import { RouteStore } from "../../RouteStore";
 
 export class CurrentUserUtils {
     private static curr_email: string;
-- 
cgit v1.2.3-70-g09d2


From 0348b9f5ecb5419965bcd9eb5a37d629dd4f3a6e Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 30 May 2019 13:52:48 -0400
Subject: from last.

---
 src/client/views/collections/CollectionStackingView.scss | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 4d240342c..1bb0b2674 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -9,7 +9,6 @@
     height: 100%;
     position: absolute;
     overflow-y: auto;
-    min-width: 250px;
     border-width: 0;
     box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
     border-color: $light-color-secondary;
-- 
cgit v1.2.3-70-g09d2


From 1c954ccf7583d1e63613a7e47724fbdc2000a8f5 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 30 May 2019 23:05:40 -0400
Subject: fixed dragging schemas w/ preview open by adding overflow hidden.

---
 src/client/views/InkingControl.tsx                     | 4 +---
 src/client/views/collections/CollectionSchemaView.scss | 1 +
 2 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 17d4a1e49..d456f531f 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -35,9 +35,7 @@ export class InkingControl extends React.Component {
     @action
     switchColor = (color: ColorResult): void => {
         this._selectedColor = color.hex;
-        SelectionManager.SelectedDocuments().forEach(doc =>
-            doc.props.ContainingCollectionView && Doc.SetOnPrototype(doc.props.Document, "backgroundColor", color.hex)
-        );
+        SelectionManager.SelectedDocuments().forEach(doc => Doc.GetProto(doc.props.Document).backgroundColor = color.hex);
     }
 
     @action
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index df5c52d01..186e006f3 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -11,6 +11,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    overflow: hidden;
 
     .collectionSchemaView-cellContents {
         height: $MAX_ROW_HEIGHT;
-- 
cgit v1.2.3-70-g09d2


From 2814e59614c516aa2ba6a8e7555ace3e79911c38 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 30 May 2019 23:49:45 -0400
Subject: restored preview script in schema view.

---
 .../views/collections/CollectionSchemaView.tsx     | 24 +++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b17d5b865..10db6e0bb 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -64,6 +64,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @observable _columnsPercentage = 0;
     @observable _keys: string[] = [];
     @observable _newKeyName: string = "";
+    @observable previewScript: string = "";
 
     @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
     @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
@@ -346,7 +347,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @computed
     get previewPanel() {
         trace();
-        return !this.previewDocument ? (null) : <CollectionSchemaPreview
+        return <CollectionSchemaPreview
             Document={this.previewDocument}
             width={this.previewWidth}
             height={this.previewHeight}
@@ -357,8 +358,14 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             active={this.props.active}
             whenActiveChanged={this.props.whenActiveChanged}
             addDocTab={this.props.addDocTab}
+            setPreviewScript={this.setPreviewScript}
+            previewScript={this.previewScript}
         />
     }
+    @action
+    setPreviewScript = (script: string) => {
+        this.previewScript = script;
+    }
 
     render() {
         trace();
@@ -374,7 +381,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 }
 interface CollectionSchemaPreviewProps {
-    Document: Doc;
+    Document?: Doc;
     width: () => number;
     height: () => number;
     CollectionView: CollectionView | CollectionPDFView | CollectionVideoView;
@@ -384,13 +391,14 @@ interface CollectionSchemaPreviewProps {
     active: () => boolean;
     whenActiveChanged: (isActive: boolean) => void;
     addDocTab: (document: Doc, where: string) => void;
+    setPreviewScript: (script: string) => void;
+    previewScript: string;
 }
 
 @observer
 class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewProps>{
-    @observable previewScript: string = "";
-    private get nativeWidth() { return NumCast(this.props.Document.nativeWidth, this.props.width()); }
-    private get nativeHeight() { return NumCast(this.props.Document.nativeHeight, this.props.height()); }
+    private get nativeWidth() { return NumCast(this.props.Document!.nativeWidth, this.props.width()); }
+    private get nativeHeight() { return NumCast(this.props.Document!.nativeHeight, this.props.height()); }
     private contentScaling = () => {
         let wscale = this.props.width() / (this.nativeWidth ? this.nativeWidth : this.props.width());
         if (wscale * this.nativeHeight > this.props.height()) {
@@ -404,10 +412,11 @@ class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewPro
     get centeringOffset() { return (this.props.width() - this.nativeWidth * this.contentScaling()) / 2; }
     @action
     onPreviewScriptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.previewScript = e.currentTarget.value;
+        this.props.setPreviewScript(e.currentTarget.value);
     }
     render() {
         trace();
+        console.log(this.props.Document);
         return (<div className="collectionSchemaView-previewRegion" style={{ width: this.props.width() }}>
             {!this.props.Document || !this.props.width ? (null) : (
                 <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.centeringOffset}px, 0px)` }}>
@@ -422,9 +431,10 @@ class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewPro
                         whenActiveChanged={this.props.whenActiveChanged}
                         bringToFront={emptyFunction}
                         addDocTab={this.props.addDocTab}
+                        toggleMinimized={emptyFunction}
                     />
                 </div>)}
-            <input className="collectionSchemaView-input" value={this.previewScript} onChange={this.onPreviewScriptChange}
+            <input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange}
                 style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} />
         </div>);
     }
-- 
cgit v1.2.3-70-g09d2


From e83c2a88303ae6d994a0ac2e84214947cac4d96d Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Fri, 31 May 2019 00:44:30 -0400
Subject: Added Open Tab Alias and Open Right Alias to context menu Cleaned up
 MakeAlias

---
 src/client/util/TooltipTextMenu.tsx     |  1 +
 src/client/views/nodes/DocumentView.tsx |  2 ++
 src/new_fields/Doc.ts                   | 13 ++-----------
 3 files changed, 5 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 5dd10f1bf..f517f757a 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -198,6 +198,7 @@ export class TooltipTextMenu {
                             }
                         }));
                     }
+                    // TODO This should have an else to handle external links
                     e.stopPropagation();
                     e.preventDefault();
                 }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c7c142c3b..4905f0ddc 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -424,7 +424,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         let subitems: ContextMenuProps[] = [];
         subitems.push({ description: "Open Full Screen", event: this.fullScreenClicked, icon: "desktop" });
         subitems.push({ description: "Open Tab", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, "inTab"), icon: "folder" });
+        subitems.push({ description: "Open Tab Alias", event: () => this.props.addDocTab && this.props.addDocTab(Doc.MakeAlias(this.props.Document), "inTab"), icon: "folder" });
         subitems.push({ description: "Open Right", event: () => this.props.addDocTab && this.props.addDocTab(this.props.Document, "onRight"), icon: "caret-square-right" });
+        subitems.push({ description: "Open Right Alias", event: () => this.props.addDocTab && this.props.addDocTab(Doc.MakeAlias(this.props.Document), "onRight"), icon: "caret-square-right" });
         subitems.push({ description: "Open Fields", event: this.fieldsClicked, icon: "layer-group" });
         cm.addItem({ description: "Open...", subitems: subitems });
         cm.addItem({ description: NumCast(this.props.Document.nativeWidth) ? "Unfreeze" : "Freeze", event: this.freezeNativeDimensions, icon: "edit" });
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 0c74b8f65..7f7263cf1 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -213,19 +213,10 @@ export namespace Doc {
 
 
     export function MakeAlias(doc: Doc) {
-        const proto = Object.getOwnPropertyNames(doc).indexOf("isPrototype") === -1 ? doc.proto : undefined;
         const alias = new Doc;
-
-        if (!proto) {
-            alias.proto = doc;
-        } else {
-            PromiseValue(Cast(doc.proto, Doc)).then(proto => {
-                if (proto) {
-                    alias.proto = proto;
-                }
-            });
+        if (!GetT(doc, "isPrototype", "boolean", true)) {
+            alias.proto = doc.proto;
         }
-
         return alias;
     }
 
-- 
cgit v1.2.3-70-g09d2


From d1b0f462ced168f3a9ac5d007ba1219e98a3b6cf Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 31 May 2019 18:18:05 -0400
Subject: stacking views and more..

---
 src/client/views/MainOverlayTextBox.tsx            | 11 +++++++--
 .../views/collections/CollectionBaseView.tsx       |  2 +-
 .../views/collections/CollectionStackingView.scss  |  2 +-
 .../views/collections/CollectionStackingView.tsx   | 28 +++++++++++++++-------
 src/client/views/nodes/DocumentView.tsx            |  2 +-
 src/client/views/nodes/FormattedTextBox.tsx        | 13 ++++------
 6 files changed, 36 insertions(+), 22 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx
index 6e8e6f8ce..24327b995 100644
--- a/src/client/views/MainOverlayTextBox.tsx
+++ b/src/client/views/MainOverlayTextBox.tsx
@@ -7,6 +7,8 @@ import { Transform } from '../util/Transform';
 import "normalize.css";
 import "./MainOverlayTextBox.scss";
 import { FormattedTextBox } from './nodes/FormattedTextBox';
+import { CollectionDockingView } from './collections/CollectionDockingView';
+import { Doc } from '../../new_fields/Doc';
 
 interface MainOverlayTextBoxProps {
 }
@@ -82,6 +84,11 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
         document.removeEventListener('pointerup', this.textBoxUp);
     }
 
+    addDocTab = (doc: Doc, location: string) => {
+        if (true) { // location === "onRight") { need to figure out stack to add "inTab"
+            CollectionDockingView.Instance.AddRightSplit(doc);
+        }
+    }
     render() {
         if (FormattedTextBox.InputBoxOverlay && this._textTargetDiv) {
             let textRect = this._textTargetDiv.getBoundingClientRect();
@@ -91,10 +98,10 @@ export class MainOverlayTextBox extends React.Component<MainOverlayTextBoxProps>
                     style={{ width: `${textRect.width * s}px`, height: `${textRect.height * s}px` }}>
                     <FormattedTextBox fieldKey={this._textFieldKey} hideOnLeave={this._textHideOnLeave} isOverlay={true} Document={FormattedTextBox.InputBoxOverlay.props.Document} isSelected={returnTrue} select={emptyFunction} isTopMost={true}
                         selectOnLoad={true} ContainingCollectionView={undefined} whenActiveChanged={emptyFunction} active={returnTrue}
-                        ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} addDocTab={emptyFunction} />
+                        ScreenToLocalTransform={this._textXf} PanelWidth={returnZero} PanelHeight={returnZero} focus={emptyFunction} addDocTab={this.addDocTab} />
                 </div>
             </ div>;
         }
-        else return (null);
+        else return (null); Z
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx
index e89b8be0f..734669893 100644
--- a/src/client/views/collections/CollectionBaseView.tsx
+++ b/src/client/views/collections/CollectionBaseView.tsx
@@ -120,7 +120,7 @@ export class CollectionBaseView extends React.Component<CollectionViewProps> {
             // set the ZoomBasis only if hasn't already been set -- bcz: maybe set/resetting the ZoomBasis should be a parameter to addDocument?
             if (!alreadyAdded && (this.collectionViewType === CollectionViewType.Freeform || this.collectionViewType === CollectionViewType.Invalid)) {
                 let zoom = NumCast(this.props.Document.scale, 1);
-                Doc.SetOnPrototype(doc, "zoomBasis", zoom);
+                // Doc.GetProto(doc).zoomBasis = zoom;
             }
         }
         return true;
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 1bb0b2674..1ab335cc3 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -6,7 +6,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 100%;
+    height: auto;
     position: absolute;
     overflow-y: auto;
     border-width: 0;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index bf246d4ec..a616b5ac7 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -1,24 +1,36 @@
 import React = require("react");
+import { action, computed, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
-import { CollectionSubView, CollectionViewProps, SubCollectionViewProps } from "./CollectionSubView";
-import { Doc, WidthSym, HeightSym, DocListCast } from "../../../new_fields/Doc";
-import { DocumentView } from "../nodes/DocumentView";
-import { Transform } from "../../util/Transform";
+import { Doc, HeightSym, WidthSym } from "../../../new_fields/Doc";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { NumCast } from "../../../new_fields/Types";
 import { emptyFunction, returnOne, Utils } from "../../../Utils";
+import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionStackingView.scss";
-import { action, reaction, trace, computed } from "mobx";
-import { StrCast, NumCast } from "../../../new_fields/Types";
-import { Id } from "../../../new_fields/FieldSymbols";
+import { CollectionSubView } from "./CollectionSubView";
 
 
 
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
     _masonryGridRef: HTMLDivElement | null = null;
+    _heightDisposer?: IReactionDisposer;
     get gridGap() { return 10; }
     get gridSize() { return 20; }
     get itemWidth() { return NumCast(this.props.Document.itemWidth, 250); }
 
+    componentDidMount() {
+        this._heightDisposer = reaction(() => [this.childDocs.map(d => d[HeightSym]()), this.props.PanelWidth()],
+            () => {
+                let hgt = (this.props.PanelWidth() > 500) ? this.props.Document[HeightSym]() :
+                    this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => height + d[HeightSym]() + this.gridGap, this.gridGap + 20 /* top margin */);
+                this.props.Document.height = hgt;
+            }, { fireImmediately: true });
+    }
+    componentWillUnmount() {
+        if (this._heightDisposer) this._heightDisposer();
+    }
+
     @action
     moveDocument = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => {
         this.props.removeDocument(doc);
@@ -37,7 +49,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     }
     @computed
     get children() {
-        return this.childDocs.map(d => {
+        return this.childDocs.filter(d => !d.isMinimized).map(d => {
             let colSpan = Math.ceil((this.itemWidth + this.gridGap) / (this.gridSize + this.gridGap));
             let rowSpan = Math.ceil((this.itemWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
             let dref = React.createRef<HTMLDivElement>();
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 69691b6f3..f3a596558 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -328,7 +328,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     deleteClicked = (): void => { this.props.removeDocument && this.props.removeDocument(this.props.Document); }
-    fieldsClicked = (): void => { this.props.addDocTab(Docs.KVPDocument(this.Document, { width: 300, height: 300 }), "onRight") };
+    fieldsClicked = (): void => { this.props.addDocTab(Docs.KVPDocument(this.props.Document, { width: 300, height: 300 }), "onRight") };
     makeBtnClicked = (): void => {
         let doc = Doc.GetProto(this.props.Document);
         doc.isButton = !BoolCast(doc.isButton, false);
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 5d93edaac..3b61c68dd 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -230,20 +230,15 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
                 this._toolTipTextMenu.tooltip.style.opacity = "0";
             }
         }
+        let ctrlKey = e.ctrlKey;
         if (e.button === 0 && ((!this.props.isSelected() && !e.ctrlKey) || (this.props.isSelected() && e.ctrlKey)) && !e.metaKey) {
             if (e.target && (e.target as any).href) {
                 let href = (e.target as any).href;
                 if (href.indexOf(DocServer.prepend("/doc/")) === 0) {
                     let docid = href.replace(DocServer.prepend("/doc/"), "").split("?")[0];
-                    DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
-                        if (f instanceof Doc) {
-                            if (DocumentManager.Instance.getDocumentView(f)) {
-                                DocumentManager.Instance.getDocumentView(f)!.props.focus(f);
-                            } else {
-                                this.props.addDocTab && this.props.addDocTab(f, "onRight");
-                            }
-                        }
-                    }));
+                    DocServer.GetRefField(docid).then(f => {
+                        (f instanceof Doc) && DocumentManager.Instance.jumpToDocument(f, ctrlKey, document => this.props.addDocTab(document, "inTab"))
+                    });
                 }
                 e.stopPropagation();
                 e.preventDefault();
-- 
cgit v1.2.3-70-g09d2


From 448996fbc234b82a27da952f85587a27cabe8881 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 1 Jun 2019 15:21:19 -0400
Subject: fixed stacking views to work with minimized documents

---
 .../views/collections/CollectionStackingView.tsx   | 30 +++++++++++++---
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 42 +++++++++++++++++-----
 src/client/views/nodes/DocumentView.tsx            | 30 ++--------------
 3 files changed, 62 insertions(+), 40 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index a616b5ac7..d06413154 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -3,11 +3,14 @@ import { action, computed, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, HeightSym, WidthSym } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/FieldSymbols";
-import { NumCast } from "../../../new_fields/Types";
+import { NumCast, Cast, BoolCast } from "../../../new_fields/Types";
 import { emptyFunction, returnOne, Utils } from "../../../Utils";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionStackingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
+import { undoBatch } from "../../util/UndoManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { List } from "../../../new_fields/List";
 
 
 
@@ -20,10 +23,13 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     get itemWidth() { return NumCast(this.props.Document.itemWidth, 250); }
 
     componentDidMount() {
-        this._heightDisposer = reaction(() => [this.childDocs.map(d => d[HeightSym]()), this.props.PanelWidth()],
+        this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelWidth()],
             () => {
                 let hgt = (this.props.PanelWidth() > 500) ? this.props.Document[HeightSym]() :
-                    this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => height + d[HeightSym]() + this.gridGap, this.gridGap + 20 /* top margin */);
+                    this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
+                        let rowSpan = Math.ceil((this.itemWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
+                        return height + rowSpan * (this.gridSize + this.gridGap);
+                    }, 10);
                 this.props.Document.height = hgt;
             }, { fireImmediately: true });
     }
@@ -47,6 +53,20 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         this._masonryGridRef = ele;
         this.createDropTarget(ele!);
     }
+    @undoBatch
+    @action
+    public collapseToPoint = (scrpt: number[], expandedDocs: Doc[] | undefined): void => {
+        SelectionManager.DeselectAll();
+        if (expandedDocs) {
+            let isMinimized: boolean | undefined;
+            expandedDocs.map(d => Doc.GetProto(d)).map(maximizedDoc => {
+                if (isMinimized === undefined) {
+                    isMinimized = BoolCast(maximizedDoc.isMinimized, false);
+                }
+                maximizedDoc.isMinimized = !isMinimized;
+            });
+        }
+    }
     @computed
     get children() {
         return this.childDocs.filter(d => !d.isMinimized).map(d => {
@@ -84,7 +104,9 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                     parentActive={this.props.active}
                     addDocTab={this.props.addDocTab}
                     bringToFront={emptyFunction}
-                    whenActiveChanged={this.props.whenActiveChanged} />
+                    whenActiveChanged={this.props.whenActiveChanged}
+                    collapseToPoint={this.collapseToPoint}
+                />
             </div>);
         })
     }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 411e8c059..499b83c0f 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,19 +1,17 @@
-import { action, computed, IReactionDisposer, reaction, trace } from "mobx";
+import { computed, IReactionDisposer, reaction, action } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc";
+import { Doc } from "../../../new_fields/Doc";
 import { List } from "../../../new_fields/List";
 import { createSchema, listSpec, makeInterface } from "../../../new_fields/Schema";
-import { BoolCast, Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types";
-import { OmitKeys, Utils } from "../../../Utils";
-import { DocumentManager } from "../../util/DocumentManager";
-import { SelectionManager } from "../../util/SelectionManager";
+import { BoolCast, Cast, FieldValue, NumCast } from "../../../new_fields/Types";
+import { OmitKeys } from "../../../Utils";
 import { Transform } from "../../util/Transform";
-import { UndoManager } from "../../util/UndoManager";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { DocComponent } from "../DocComponent";
 import { DocumentView, DocumentViewProps, positionSchema } from "./DocumentView";
 import "./DocumentView.scss";
 import React = require("react");
+import { UndoManager } from "../../util/UndoManager";
+import { SelectionManager } from "../../util/SelectionManager";
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 }
@@ -70,6 +68,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             ScreenToLocalTransform={this.getTransform}
             PanelWidth={this.panelWidth}
             PanelHeight={this.panelHeight}
+            collapseToPoint={this.collapseToPoint}
         />;
     }
 
@@ -88,6 +87,33 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         if (this._bringToFrontDisposer) this._bringToFrontDisposer();
     }
 
+    static _undoBatch?: UndoManager.Batch = undefined;
+    @action
+    public collapseToPoint = async (scrpt: number[], expandedDocs: Doc[] | undefined): Promise<void> => {
+        SelectionManager.DeselectAll();
+        if (expandedDocs) {
+            if (!CollectionFreeFormDocumentView._undoBatch) {
+                CollectionFreeFormDocumentView._undoBatch = UndoManager.StartBatch("iconAnimating");
+            }
+            let isMinimized: boolean | undefined;
+            expandedDocs.map(d => Doc.GetProto(d)).map(maximizedDoc => {
+                let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
+                if (!iconAnimating || (Date.now() - iconAnimating[2] > 1000)) {
+                    if (isMinimized === undefined) {
+                        isMinimized = BoolCast(maximizedDoc.isMinimized, false);
+                    }
+                    maximizedDoc.willMaximize = isMinimized;
+                    maximizedDoc.isMinimized = false;
+                    maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], Date.now(), isMinimized ? 1 : 0]);
+                }
+            });
+            setTimeout(() => {
+                CollectionFreeFormDocumentView._undoBatch && CollectionFreeFormDocumentView._undoBatch.end();
+                CollectionFreeFormDocumentView._undoBatch = undefined;
+            }, 500);
+        }
+    }
+
     animateBetweenIcon(first: boolean, icon: number[], targ: number[], width: number, height: number, stime: number, maximizing: boolean) {
 
         setTimeout(() => {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index be40efbfa..80c1292ae 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -75,7 +75,7 @@ export interface DocumentViewProps {
     whenActiveChanged: (isActive: boolean) => void;
     bringToFront: (doc: Doc) => void;
     addDocTab: (doc: Doc, where: string) => void;
-    whenClicked?: () => void;
+    collapseToPoint?: (scrpt: number[], expandedDocs: Doc[] | undefined) => void;
 }
 
 const schema = createSchema({
@@ -195,32 +195,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
-    static _undoBatch?: UndoManager.Batch = undefined;
-    @action
-    public collapseToPoint = async (scrpt: number[], expandedDocs: Doc[] | undefined): Promise<void> => {
-        SelectionManager.DeselectAll();
-        if (expandedDocs) {
-            if (!DocumentView._undoBatch) {
-                DocumentView._undoBatch = UndoManager.StartBatch("iconAnimating");
-            }
-            let isMinimized: boolean | undefined;
-            expandedDocs.map(d => Doc.GetProto(d)).map(maximizedDoc => {
-                let iconAnimating = Cast(maximizedDoc.isIconAnimating, List);
-                if (!iconAnimating || (Date.now() - iconAnimating[2] > 1000)) {
-                    if (isMinimized === undefined) {
-                        isMinimized = BoolCast(maximizedDoc.isMinimized, false);
-                    }
-                    maximizedDoc.willMaximize = isMinimized;
-                    maximizedDoc.isMinimized = false;
-                    maximizedDoc.isIconAnimating = new List<number>([scrpt[0], scrpt[1], Date.now(), isMinimized ? 1 : 0]);
-                }
-            });
-            setTimeout(() => {
-                DocumentView._undoBatch && DocumentView._undoBatch.end();
-                DocumentView._undoBatch = undefined;
-            }, 500);
-        }
-    }
     onClick = async (e: React.MouseEvent) => {
         e.stopPropagation();
         let altKey = e.altKey;
@@ -273,7 +247,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                         }
                     } else {
                         let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(NumCast(this.Document.width) / 2, NumCast(this.Document.height) / 2);
-                        this.collapseToPoint(scrpt, expandedProtoDocs);
+                        this.props.collapseToPoint && this.props.collapseToPoint(scrpt, expandedProtoDocs);
                     }
                 }
                 else if (linkedToDocs.length || linkedFromDocs.length) {
-- 
cgit v1.2.3-70-g09d2


From b86a60410675f6cf6e46c56bc12cf689245583f0 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 2 Jun 2019 13:24:02 -0400
Subject: fixes for stackingview for single vs multi-column.  single needs
 work.

---
 src/client/views/DocumentDecorations.tsx           |  3 +-
 .../views/collections/CollectionStackingView.scss  |  1 -
 .../views/collections/CollectionStackingView.tsx   | 45 +++++++++++++---------
 3 files changed, 29 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index e06fd6119..da9b1253e 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -433,6 +433,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
 
             if (rect.width !== 0 && (dX != 0 || dY != 0 || dW != 0 || dH != 0)) {
                 let doc = PositionDocument(element.props.Document);
+                let docHeightBefore = doc.height;
                 let nwidth = doc.nativeWidth || 0;
                 let nheight = doc.nativeHeight || 0;
                 let zoomBasis = NumCast(doc.zoomBasis, 1);
@@ -452,7 +453,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                     }
                 } else {
                     doc.width = zoomBasis * actualdW;
-                    doc.height = zoomBasis * actualdH;
+                    if (docHeightBefore === doc.height) doc.height = zoomBasis * actualdH;
                 }
             }
         });
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 1ab335cc3..fd063dada 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -6,7 +6,6 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: auto;
     position: absolute;
     overflow-y: auto;
     border-width: 0;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index d06413154..6820746db 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -3,16 +3,13 @@ import { action, computed, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, HeightSym, WidthSym } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/FieldSymbols";
-import { NumCast, Cast, BoolCast } from "../../../new_fields/Types";
+import { BoolCast, NumCast } from "../../../new_fields/Types";
 import { emptyFunction, returnOne, Utils } from "../../../Utils";
+import { SelectionManager } from "../../util/SelectionManager";
+import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionStackingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
-import { undoBatch } from "../../util/UndoManager";
-import { SelectionManager } from "../../util/SelectionManager";
-import { List } from "../../../new_fields/List";
-
-
 
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
@@ -20,17 +17,28 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     _heightDisposer?: IReactionDisposer;
     get gridGap() { return 10; }
     get gridSize() { return 20; }
-    get itemWidth() { return NumCast(this.props.Document.itemWidth, 250); }
+    get singleColumn() { return BoolCast(this.props.Document.singleColumn, true); }
+    get columnWidth() { return this.singleColumn ? this.props.PanelWidth() - 2 * this.gridSize - this.gridGap : NumCast(this.props.Document.columnWidth, 250); }
 
     componentDidMount() {
+        reaction(() => [this.props.PanelWidth()],
+            () => {
+                this.props.Document.columnWidth = this.props.PanelWidth() - 2 * this.gridSize - this.gridGap;
+            }, { fireImmediately: true });
         this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelWidth()],
             () => {
-                let hgt = (this.props.PanelWidth() > 500) ? this.props.Document[HeightSym]() :
-                    this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
-                        let rowSpan = Math.ceil((this.itemWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
+                if (this.singleColumn) {
+                    this.childDocs.filter(d => !d.isMinimized).map(d => {
+                        d.width = this.props.PanelWidth();
+                        let nw = NumCast(d.nativeWidth);
+                        let nh = NumCast(d.nativeHeight);
+                        if (nw && nh) d.height = nh / nw * d.width;
+                    });
+                    this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
+                        let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
                         return height + rowSpan * (this.gridSize + this.gridGap);
                     }, 10);
-                this.props.Document.height = hgt;
+                }
             }, { fireImmediately: true });
     }
     componentWillUnmount() {
@@ -47,7 +55,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         let { scale, translateX, translateY } = Utils.GetScreenTransform(dref);
         let outerXf = Utils.GetScreenTransform(this._masonryGridRef!);
         let offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY);
-        return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]).scale(NumCast(doc.width, 1) / this.itemWidth);
+        return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]).scale(NumCast(doc.width, 1) / this.columnWidth);
     }
     createRef = (ele: HTMLDivElement | null) => {
         this._masonryGridRef = ele;
@@ -70,8 +78,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     @computed
     get children() {
         return this.childDocs.filter(d => !d.isMinimized).map(d => {
-            let colSpan = Math.ceil((this.itemWidth + this.gridGap) / (this.gridSize + this.gridGap));
-            let rowSpan = Math.ceil((this.itemWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
+            let colSpan = Math.ceil((this.columnWidth + this.gridGap) / (this.gridSize + this.gridGap));
+            let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
             let dref = React.createRef<HTMLDivElement>();
             let dxf = () => this.getDocTransform(d, dref.current!);
             let childFocus = (doc: Doc) => {
@@ -87,7 +95,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                     transformOrigin: "top left",
                     gridRowEnd: `span ${rowSpan}`,
                     gridColumnEnd: `span ${colSpan}`,
-                    transform: `scale(${this.itemWidth / NumCast(d.nativeWidth, d[WidthSym]())}, ${this.itemWidth / NumCast(d.nativeWidth, d[WidthSym]())})`
+                    transform: `scale(${this.columnWidth / NumCast(d.nativeWidth, d[WidthSym]())}, ${this.columnWidth / NumCast(d.nativeWidth, d[WidthSym]())})`
                 }} >
                 <DocumentView key={d[Id]} Document={d}
                     addDocument={this.props.addDocument}
@@ -113,15 +121,16 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     render() {
         let leftMargin = 20;
         let topMargin = 20;
-        let itemCols = Math.ceil(this.itemWidth / (this.gridSize + this.gridGap));
+        let itemCols = Math.ceil(this.columnWidth / (this.gridSize + this.gridGap));
         let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (this.gridSize + this.gridGap)));
         return (
-            <div className="collectionStackingView" ref={this.createRef} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
+            <div className="collectionStackingView" style={{ height: this.singleColumn ? "auto" : "100%" }}
+                ref={this.createRef} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
                 <div className="collectionStackingView-masonryGrid"
                     style={{
                         padding: `${topMargin}px 0px 0px ${leftMargin}px`,
                         width: `${cells * itemCols * (this.gridSize + this.gridGap) + leftMargin}`,
-                        height: "auto",
+                        height: this.singleColumn ? "auto" : "100%",
                         marginLeft: "auto", marginRight: "auto", position: "relative",
                         gridGap: this.gridGap,
                         gridTemplateColumns: `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`,
-- 
cgit v1.2.3-70-g09d2


From fdde776c4b35d15a9f017dc3f41c0ca9ebd05597 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 2 Jun 2019 13:31:54 -0400
Subject: from last

---
 src/client/views/collections/CollectionStackingView.tsx | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 6820746db..62af92633 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -21,10 +21,6 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     get columnWidth() { return this.singleColumn ? this.props.PanelWidth() - 2 * this.gridSize - this.gridGap : NumCast(this.props.Document.columnWidth, 250); }
 
     componentDidMount() {
-        reaction(() => [this.props.PanelWidth()],
-            () => {
-                this.props.Document.columnWidth = this.props.PanelWidth() - 2 * this.gridSize - this.gridGap;
-            }, { fireImmediately: true });
         this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelWidth()],
             () => {
                 if (this.singleColumn) {
-- 
cgit v1.2.3-70-g09d2


From 2194afbd13099ab7e6f78e8c69b703282275f607 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 2 Jun 2019 15:42:07 -0400
Subject: better stacking view for single column

---
 .../views/collections/CollectionSchemaView.tsx     | 30 ++++++++--
 .../views/collections/CollectionStackingView.tsx   | 64 +++++++++++++++++-----
 2 files changed, 74 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 10db6e0bb..11d71d023 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -20,7 +20,7 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { Opt, Field, Doc, DocListCastAsync, DocListCast } from "../../../new_fields/Doc";
-import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types";
+import { Cast, FieldValue, NumCast, StrCast, BoolCast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
 import { List } from "../../../new_fields/List";
 import { Id } from "../../../new_fields/FieldSymbols";
@@ -30,6 +30,8 @@ import { ContextMenu } from "../ContextMenu";
 import { CollectionView } from "./CollectionView";
 import { CollectionPDFView } from "./CollectionPDFView";
 import { CollectionVideoView } from "./CollectionVideoView";
+import { SelectionManager } from "../../util/SelectionManager";
+import { undoBatch } from "../../util/UndoManager";
 
 
 library.add(faCog);
@@ -392,11 +394,11 @@ interface CollectionSchemaPreviewProps {
     whenActiveChanged: (isActive: boolean) => void;
     addDocTab: (document: Doc, where: string) => void;
     setPreviewScript: (script: string) => void;
-    previewScript: string;
+    previewScript?: string;
 }
 
 @observer
-class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewProps>{
+export class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewProps>{
     private get nativeWidth() { return NumCast(this.props.Document!.nativeWidth, this.props.width()); }
     private get nativeHeight() { return NumCast(this.props.Document!.nativeHeight, this.props.height()); }
     private contentScaling = () => {
@@ -414,9 +416,26 @@ class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewPro
     onPreviewScriptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.props.setPreviewScript(e.currentTarget.value);
     }
+    @undoBatch
+    @action
+    public collapseToPoint = (scrpt: number[], expandedDocs: Doc[] | undefined): void => {
+        SelectionManager.DeselectAll();
+        if (expandedDocs) {
+            let isMinimized: boolean | undefined;
+            expandedDocs.map(d => Doc.GetProto(d)).map(maximizedDoc => {
+                if (isMinimized === undefined) {
+                    isMinimized = BoolCast(maximizedDoc.isMinimized, false);
+                }
+                maximizedDoc.isMinimized = !isMinimized;
+            });
+        }
+    }
     render() {
         trace();
         console.log(this.props.Document);
+        let input = this.props.previewScript === undefined ? (null) :
+            <input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange}
+                style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} />;
         return (<div className="collectionSchemaView-previewRegion" style={{ width: this.props.width() }}>
             {!this.props.Document || !this.props.width ? (null) : (
                 <div className="collectionSchemaView-previewDoc" style={{ transform: `translate(${this.centeringOffset}px, 0px)` }}>
@@ -431,11 +450,10 @@ class CollectionSchemaPreview extends React.Component<CollectionSchemaPreviewPro
                         whenActiveChanged={this.props.whenActiveChanged}
                         bringToFront={emptyFunction}
                         addDocTab={this.props.addDocTab}
-                        toggleMinimized={emptyFunction}
+                        collapseToPoint={this.collapseToPoint}
                     />
                 </div>)}
-            <input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange}
-                style={{ left: `calc(50% - ${Math.min(75, (this.props.Document ? this.PanelWidth() / 2 : 75))}px)` }} />
+            {input}
         </div>);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 62af92633..25cc55be9 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -10,6 +10,7 @@ import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionStackingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
+import { CollectionSchemaPreview } from "./CollectionSchemaView";
 
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
@@ -21,17 +22,15 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     get columnWidth() { return this.singleColumn ? this.props.PanelWidth() - 2 * this.gridSize - this.gridGap : NumCast(this.props.Document.columnWidth, 250); }
 
     componentDidMount() {
-        this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelWidth()],
+        this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelHeight(), this.props.PanelWidth()],
             () => {
                 if (this.singleColumn) {
-                    this.childDocs.filter(d => !d.isMinimized).map(d => {
-                        d.width = this.props.PanelWidth();
+                    this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
+                        let hgt = d[HeightSym]();
                         let nw = NumCast(d.nativeWidth);
                         let nh = NumCast(d.nativeHeight);
-                        if (nw && nh) d.height = nh / nw * d.width;
-                    });
-                    this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
-                        let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
+                        if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]());
+                        let rowSpan = Math.ceil((hgt + this.gridGap) / (this.gridSize + this.gridGap));
                         return height + rowSpan * (this.gridSize + this.gridGap);
                     }, 10);
                 }
@@ -71,13 +70,49 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             });
         }
     }
+
+    @computed
+    get singleColumnChildren() {
+        return this.childDocs.filter(d => !d.isMinimized).map(d => {
+            let dref = React.createRef<HTMLDivElement>();
+            let script = undefined;
+            let colWidth = () => this.columnWidth;
+            let rowHeight = () => {
+                let hgt = d[HeightSym]();
+                let nw = NumCast(d.nativeWidth);
+                let nh = NumCast(d.nativeHeight);
+                if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]());
+                return hgt;
+            }
+            let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]());
+            return <div className="colletionStackingView-masonryDoc"
+                key={d[Id]}
+                ref={dref}
+                style={{ width: colWidth(), height: rowHeight() }} >
+                <CollectionSchemaPreview
+                    Document={d}
+                    width={colWidth}
+                    height={rowHeight}
+                    getTransform={dxf}
+                    CollectionView={this.props.CollectionView}
+                    addDocument={this.props.addDocument}
+                    removeDocument={this.props.removeDocument}
+                    active={this.props.active}
+                    whenActiveChanged={this.props.whenActiveChanged}
+                    addDocTab={this.props.addDocTab}
+                    setPreviewScript={emptyFunction}
+                    previewScript={script}>
+                </CollectionSchemaPreview>
+            </div>;
+        });
+    }
     @computed
     get children() {
         return this.childDocs.filter(d => !d.isMinimized).map(d => {
-            let colSpan = Math.ceil((this.columnWidth + this.gridGap) / (this.gridSize + this.gridGap));
-            let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
             let dref = React.createRef<HTMLDivElement>();
             let dxf = () => this.getDocTransform(d, dref.current!);
+            let colSpan = Math.ceil((this.columnWidth + this.gridGap) / (this.gridSize + this.gridGap));
+            let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
             let childFocus = (doc: Doc) => {
                 doc.libraryBrush = true;
                 this.props.focus(this.props.Document); // just focus on this collection, not the underlying document because the API doesn't support adding an offset to focus on and we can't pan zoom our contents to be centered.
@@ -120,20 +155,21 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         let itemCols = Math.ceil(this.columnWidth / (this.gridSize + this.gridGap));
         let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (this.gridSize + this.gridGap)));
         return (
-            <div className="collectionStackingView" style={{ height: this.singleColumn ? "auto" : "100%" }}
+            <div className="collectionStackingView" style={{ height: "100%" }}
                 ref={this.createRef} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
                 <div className="collectionStackingView-masonryGrid"
                     style={{
                         padding: `${topMargin}px 0px 0px ${leftMargin}px`,
                         width: `${cells * itemCols * (this.gridSize + this.gridGap) + leftMargin}`,
-                        height: this.singleColumn ? "auto" : "100%",
+                        height: "100%",
+                        overflow: "hidden",
                         marginLeft: "auto", marginRight: "auto", position: "relative",
                         gridGap: this.gridGap,
-                        gridTemplateColumns: `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`,
-                        gridAutoRows: `${this.gridSize}px`
+                        gridTemplateColumns: this.singleColumn ? undefined : `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`,
+                        gridAutoRows: this.singleColumn ? undefined : `${this.gridSize}px`
                     }}
                 >
-                    {this.children}
+                    {this.singleColumn ? this.singleColumnChildren : this.children}
                 </div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From f4e6d81f4be7e26ec8866ea5a6e9d2433b89a79c Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 2 Jun 2019 22:22:05 -0400
Subject: fixes to stacking view and freezing collections

---
 .../views/collections/CollectionStackingView.tsx    | 21 +++++++++++----------
 .../collections/collectionFreeForm/MarqueeView.tsx  | 12 ++++++++----
 src/client/views/nodes/DocumentView.tsx             | 21 +++++++++++++++------
 3 files changed, 34 insertions(+), 20 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 25cc55be9..dcc7417ad 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -22,14 +22,14 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     get columnWidth() { return this.singleColumn ? this.props.PanelWidth() - 2 * this.gridSize - this.gridGap : NumCast(this.props.Document.columnWidth, 250); }
 
     componentDidMount() {
-        this._heightDisposer = reaction(() => [this.childDocs.map(d => [d[HeightSym](), d.isMinimized]), this.props.PanelHeight(), this.props.PanelWidth()],
+        this._heightDisposer = reaction(() => [this.childDocs.map(d => [d.height, d.width, d.zoomBasis, d.nativeHeight, d.nativeWidth, d.isMinimized]), this.columnWidth, this.props.PanelHeight()],
             () => {
                 if (this.singleColumn) {
                     this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
-                        let hgt = d[HeightSym]();
+                        let hgt = d[HeightSym]() / NumCast(d.zoomBasis, 1);
                         let nw = NumCast(d.nativeWidth);
                         let nh = NumCast(d.nativeHeight);
-                        if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]());
+                        if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]() / NumCast(d.zoomBasis, 1));
                         let rowSpan = Math.ceil((hgt + this.gridGap) / (this.gridSize + this.gridGap));
                         return height + rowSpan * (this.gridSize + this.gridGap);
                     }, 10);
@@ -76,19 +76,20 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         return this.childDocs.filter(d => !d.isMinimized).map(d => {
             let dref = React.createRef<HTMLDivElement>();
             let script = undefined;
-            let colWidth = () => this.columnWidth;
+            let colWidth = () => d.nativeWidth ? Math.min(d[WidthSym]() / NumCast(d.zoomBasis, 1), this.columnWidth) : this.columnWidth;
+            let margin = colWidth() < this.columnWidth ? "auto" : undefined;
             let rowHeight = () => {
-                let hgt = d[HeightSym]();
+                let hgt = d[HeightSym]() / NumCast(d.zoomBasis, 1);
                 let nw = NumCast(d.nativeWidth);
                 let nh = NumCast(d.nativeHeight);
-                if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]());
+                if (nw && nh) hgt = nh / nw * colWidth();
                 return hgt;
             }
             let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]());
             return <div className="colletionStackingView-masonryDoc"
                 key={d[Id]}
                 ref={dref}
-                style={{ width: colWidth(), height: rowHeight() }} >
+                style={{ width: colWidth(), height: rowHeight(), marginLeft: margin, marginRight: margin }} >
                 <CollectionSchemaPreview
                     Document={d}
                     width={colWidth}
@@ -111,13 +112,13 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         return this.childDocs.filter(d => !d.isMinimized).map(d => {
             let dref = React.createRef<HTMLDivElement>();
             let dxf = () => this.getDocTransform(d, dref.current!);
-            let colSpan = Math.ceil((this.columnWidth + this.gridGap) / (this.gridSize + this.gridGap));
+            let colSpan = Math.ceil(Math.min(d[WidthSym](), this.columnWidth + this.gridGap) / (this.gridSize + this.gridGap));
             let rowSpan = Math.ceil((this.columnWidth / d[WidthSym]() * d[HeightSym]() + this.gridGap) / (this.gridSize + this.gridGap));
             let childFocus = (doc: Doc) => {
                 doc.libraryBrush = true;
                 this.props.focus(this.props.Document); // just focus on this collection, not the underlying document because the API doesn't support adding an offset to focus on and we can't pan zoom our contents to be centered.
             }
-            return (<div className="colletionStackingView-masonryDoc"
+            return (<div className="collectionStackingView-masonryDoc"
                 key={d[Id]}
                 ref={dref}
                 style={{
@@ -163,7 +164,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                         width: `${cells * itemCols * (this.gridSize + this.gridGap) + leftMargin}`,
                         height: "100%",
                         overflow: "hidden",
-                        marginLeft: "auto", marginRight: "auto", position: "relative",
+                        marginRight: "auto", position: "relative",
                         gridGap: this.gridGap,
                         gridTemplateColumns: this.singleColumn ? undefined : `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`,
                         gridAutoRows: this.singleColumn ? undefined : `${this.gridSize}px`
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 14dbe1899..a19f40978 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -20,6 +20,8 @@ import { Template, Templates } from "../../Templates";
 import { SearchBox } from "../../SearchBox";
 import { DocServer } from "../../../DocServer";
 import { Id } from "../../../../new_fields/FieldSymbols";
+import { CollectionView } from "../CollectionView";
+import { CollectionViewType } from "../CollectionBaseView";
 
 interface MarqueeViewProps {
     getContainerTransform: () => Transform;
@@ -284,10 +286,12 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 newCollection.proto!.summaryDoc = summary;
                 selected = [newCollection];
                 newCollection.x = bounds.left + bounds.width;
-                summary.proto!.summarizedDocs = new List<Doc>(selected);
-                summary.proto!.maximizeLocation = "inTab";  // or "inPlace", or "onRight"
-
-                this.props.addLiveTextDocument(summary);
+                summary.proto!.subBulletDocs = new List<Doc>(selected);
+                //summary.proto!.maximizeLocation = "inTab";  // or "inPlace", or "onRight"
+                summary.templates = new List<string>([Templates.Bullet.Layout]);
+                let container = Docs.FreeformDocument([summary, newCollection], { x: bounds.left, y: bounds.top, width: 300, height: 200, title: "-summary-" });
+                container.viewType = CollectionViewType.Stacking;
+                this.props.addLiveTextDocument(container);
                 // });
             } else if (e.key === "S") {
                 await htmlToImage.toPng(this._mainCont.current!, { width: bounds.width * zoomBasis, height: bounds.height * zoomBasis, quality: 0.2 }).then((dataUrl) => {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 80c1292ae..b9e000ec8 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -375,12 +375,21 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     freezeNativeDimensions = (e: React.MouseEvent): void => {
         if (NumCast(this.props.Document.nativeWidth)) {
-            this.props.Document.proto!.nativeWidth = undefined;
-            this.props.Document.proto!.nativeHeight = undefined;
-
-        } else {
-            this.props.Document.proto!.nativeWidth = this.props.Document[WidthSym]();
-            this.props.Document.proto!.nativeHeight = this.props.Document[HeightSym]();
+            let proto = Doc.GetProto(this.props.Document);
+            let nw = proto.nativeWidth;
+            let nh = proto.nativeHeight;
+            proto.nativeWidth = proto.nativeHeight = undefined;
+            this.props.Document.width = this.props.Document.frozenWidth;
+            this.props.Document.height = this.props.Document.frozenHeight;
+        }
+        else {
+            let scale = this.props.ScreenToLocalTransform().Scale * NumCast(this.props.Document.zoomBasis, 1);
+            let scr = this.screenRect();
+            let proto = Doc.GetProto(this.props.Document);
+            this.props.Document.frozenWidth = this.props.Document.width;
+            this.props.Document.frozenHeight = this.props.Document.height;
+            this.props.Document.height = proto.nativeHeight = scr.height * scale;
+            this.props.Document.width = proto.nativeWidth = scr.width * scale;
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 66b93fe0e7fb90ad1bd2ce54e5ed49f5ead02cd9 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 2 Jun 2019 22:27:34 -0400
Subject: fixed zoomBasis for new collections

---
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index a19f40978..29734fa19 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -272,6 +272,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
                 ink: inkData ? new InkField(this.marqueeInkSelect(inkData)) : undefined,
                 title: e.key === "s" || e.key === "S" ? "-summary-" : e.key === "p" ? "-summary-" : "a nested collection",
             });
+            newCollection.zoomBasis = zoomBasis;
             this.marqueeInkDelete(inkData);
 
             if (e.key === "s") {
-- 
cgit v1.2.3-70-g09d2


From 8edac25c7e39ba660d3d2b76f38d579a61e5d016 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sun, 2 Jun 2019 23:22:20 -0400
Subject: more small fixes

---
 .../views/collections/CollectionStackingView.scss  |  6 +++--
 .../views/collections/CollectionStackingView.tsx   | 29 +++++++++++-----------
 2 files changed, 19 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index fd063dada..4d84aaaa9 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -29,12 +29,14 @@
         align-items: center;
     }
 
-    .collectionStackingView-masonryGrid {
-        display:grid;
+    .collectionStackingView-masonrySingle, .collectionStackingView-masonryGrid{
         width:100%;
         height:100%;
         position: absolute;
     }
+    .collectionStackingView-masonryGrid {
+        display:grid;
+    }
 
     .collectionStackingView-description {
         font-size: 100%;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index dcc7417ad..ea3c144f2 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -8,9 +8,9 @@ import { emptyFunction, returnOne, Utils } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
 import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
+import { CollectionSchemaPreview } from "./CollectionSchemaView";
 import "./CollectionStackingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
-import { CollectionSchemaPreview } from "./CollectionSchemaView";
 
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
@@ -19,7 +19,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     get gridGap() { return 10; }
     get gridSize() { return 20; }
     get singleColumn() { return BoolCast(this.props.Document.singleColumn, true); }
-    get columnWidth() { return this.singleColumn ? this.props.PanelWidth() - 2 * this.gridSize - this.gridGap : NumCast(this.props.Document.columnWidth, 250); }
+    get columnWidth() { return this.singleColumn ? this.props.PanelWidth() - 4 * this.gridGap : NumCast(this.props.Document.columnWidth, 250); }
 
     componentDidMount() {
         this._heightDisposer = reaction(() => [this.childDocs.map(d => [d.height, d.width, d.zoomBasis, d.nativeHeight, d.nativeWidth, d.isMinimized]), this.columnWidth, this.props.PanelHeight()],
@@ -27,12 +27,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                 if (this.singleColumn) {
                     this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
                         let hgt = d[HeightSym]() / NumCast(d.zoomBasis, 1);
+                        let wid = d[WidthSym]() / NumCast(d.zoomBasis, 1);
                         let nw = NumCast(d.nativeWidth);
                         let nh = NumCast(d.nativeHeight);
-                        if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, d[WidthSym]() / NumCast(d.zoomBasis, 1));
-                        let rowSpan = Math.ceil((hgt + this.gridGap) / (this.gridSize + this.gridGap));
-                        return height + rowSpan * (this.gridSize + this.gridGap);
-                    }, 10);
+                        if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, wid);
+                        return height + hgt + 2 * this.gridGap;
+                    }, this.gridGap * 2);
                 }
             }, { fireImmediately: true });
     }
@@ -73,7 +73,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
 
     @computed
     get singleColumnChildren() {
-        return this.childDocs.filter(d => !d.isMinimized).map(d => {
+        return this.childDocs.filter(d => !d.isMinimized).map((d, i) => {
             let dref = React.createRef<HTMLDivElement>();
             let script = undefined;
             let colWidth = () => d.nativeWidth ? Math.min(d[WidthSym]() / NumCast(d.zoomBasis, 1), this.columnWidth) : this.columnWidth;
@@ -86,10 +86,10 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                 return hgt;
             }
             let dxf = () => this.getDocTransform(d, dref.current!).scale(this.columnWidth / d[WidthSym]());
-            return <div className="colletionStackingView-masonryDoc"
+            return <div className="collectionStackingView-masonryDoc"
                 key={d[Id]}
                 ref={dref}
-                style={{ width: colWidth(), height: rowHeight(), marginLeft: margin, marginRight: margin }} >
+                style={{ marginTop: `${i ? 2 * this.gridGap : 0}px`, width: colWidth(), height: rowHeight(), marginLeft: margin, marginRight: margin }} >
                 <CollectionSchemaPreview
                     Document={d}
                     width={colWidth}
@@ -151,20 +151,21 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         })
     }
     render() {
-        let leftMargin = 20;
-        let topMargin = 20;
+        let leftMargin = 2 * this.gridGap;
+        let topMargin = 2 * this.gridGap;
         let itemCols = Math.ceil(this.columnWidth / (this.gridSize + this.gridGap));
         let cells = Math.floor((this.props.PanelWidth() - leftMargin) / (itemCols * (this.gridSize + this.gridGap)));
         return (
             <div className="collectionStackingView" style={{ height: "100%" }}
                 ref={this.createRef} onWheel={(e: React.WheelEvent) => e.stopPropagation()}>
-                <div className="collectionStackingView-masonryGrid"
+                <div className={`collectionStackingView-masonry${this.singleColumn ? "Single" : "Grid"}`}
                     style={{
                         padding: `${topMargin}px 0px 0px ${leftMargin}px`,
-                        width: `${cells * itemCols * (this.gridSize + this.gridGap) + leftMargin}`,
+                        width: this.singleColumn ? "100%" : `${cells * itemCols * (this.gridSize + this.gridGap) + leftMargin}`,
                         height: "100%",
                         overflow: "hidden",
-                        marginRight: "auto", position: "relative",
+                        marginRight: "auto",
+                        position: "relative",
                         gridGap: this.gridGap,
                         gridTemplateColumns: this.singleColumn ? undefined : `repeat(auto-fill, minmax(${this.gridSize}px,1fr))`,
                         gridAutoRows: this.singleColumn ? undefined : `${this.gridSize}px`
-- 
cgit v1.2.3-70-g09d2


From 2a985b3201e8a8c3dc2f7ffa9604d916ad5aeab6 Mon Sep 17 00:00:00 2001
From: Brandon <brandon_li@brown.edu>
Date: Mon, 3 Jun 2019 17:01:31 -0400
Subject: fixed icons in menu

---
 src/client/views/ContextMenu.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 74acba615..7e066d53a 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -65,6 +65,7 @@
 }
 
 .icon-background {
+    pointer-events: none;
     background-color: #DDDDDD;
     width: 35px;
     text-align: center;
-- 
cgit v1.2.3-70-g09d2


From eccf79cb6e7abe2dd0555054e57d5037465c0bd2 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 4 Jun 2019 09:06:33 -0400
Subject: fix for stackingview with zoombasis.   fix for text box links w/
 styles

---
 src/client/views/collections/CollectionStackingView.tsx | 2 +-
 src/client/views/nodes/FormattedTextBox.tsx             | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index ea3c144f2..acd585268 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -32,7 +32,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                         let nh = NumCast(d.nativeHeight);
                         if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, wid);
                         return height + hgt + 2 * this.gridGap;
-                    }, this.gridGap * 2);
+                    }, this.gridGap * 2) * NumCast(this.props.Document.zoomBasis, 1);
                 }
             }, { fireImmediately: true });
     }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 3b61c68dd..5c635cc0c 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -231,9 +231,12 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
             }
         }
         let ctrlKey = e.ctrlKey;
-        if (e.button === 0 && ((!this.props.isSelected() && !e.ctrlKey) || (this.props.isSelected() && e.ctrlKey)) && !e.metaKey) {
-            if (e.target && (e.target as any).href) {
-                let href = (e.target as any).href;
+        if (e.button === 0 && ((!this.props.isSelected() && !e.ctrlKey) || (this.props.isSelected() && e.ctrlKey)) && !e.metaKey && e.target) {
+            let href = (e.target as any).href;
+            for (let parent = (e.target as any).parentNode; !href && parent; parent = parent.parentNode) {
+                href = parent.childNodes[0].href;
+            }
+            if (href) {
                 if (href.indexOf(DocServer.prepend("/doc/")) === 0) {
                     let docid = href.replace(DocServer.prepend("/doc/"), "").split("?")[0];
                     DocServer.GetRefField(docid).then(f => {
-- 
cgit v1.2.3-70-g09d2


From 6f49d067b58caf6297f7ae7687cf05b627c27a1d Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 4 Jun 2019 09:48:18 -0400
Subject: icon and stacking view fixes.

---
 src/client/util/DragManager.ts                          |  3 +--
 src/client/views/collections/CollectionStackingView.tsx | 10 +++++-----
 src/client/views/nodes/DocumentView.tsx                 |  4 ++--
 src/client/views/nodes/IconBox.scss                     |  1 +
 4 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 8f0cce095..1e84a0db0 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -279,8 +279,7 @@ export namespace DragManager {
             lastX = e.pageX;
             lastY = e.pageY;
             dragElements.map((dragElement, i) => (dragElement.style.transform =
-                `translate(${(xs[i] += moveX)}px, ${(ys[i] += moveY)}px) 
-                scale(${scaleXs[i]}, ${scaleYs[i]})`)
+                `translate(${(xs[i] += moveX)}px, ${(ys[i] += moveY)}px)  scale(${scaleXs[i]}, ${scaleYs[i]})`)
             );
         };
 
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index acd585268..da7ea50c6 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -26,13 +26,13 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             () => {
                 if (this.singleColumn) {
                     this.props.Document.height = this.childDocs.filter(d => !d.isMinimized).reduce((height, d) => {
-                        let hgt = d[HeightSym]() / NumCast(d.zoomBasis, 1);
-                        let wid = d[WidthSym]() / NumCast(d.zoomBasis, 1);
+                        let hgt = d[HeightSym]();
+                        let wid = d[WidthSym]();
                         let nw = NumCast(d.nativeWidth);
                         let nh = NumCast(d.nativeHeight);
                         if (nw && nh) hgt = nh / nw * Math.min(this.columnWidth, wid);
                         return height + hgt + 2 * this.gridGap;
-                    }, this.gridGap * 2) * NumCast(this.props.Document.zoomBasis, 1);
+                    }, this.gridGap * 2);
                 }
             }, { fireImmediately: true });
     }
@@ -76,10 +76,10 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         return this.childDocs.filter(d => !d.isMinimized).map((d, i) => {
             let dref = React.createRef<HTMLDivElement>();
             let script = undefined;
-            let colWidth = () => d.nativeWidth ? Math.min(d[WidthSym]() / NumCast(d.zoomBasis, 1), this.columnWidth) : this.columnWidth;
+            let colWidth = () => d.nativeWidth ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth;
             let margin = colWidth() < this.columnWidth ? "auto" : undefined;
             let rowHeight = () => {
-                let hgt = d[HeightSym]() / NumCast(d.zoomBasis, 1);
+                let hgt = d[HeightSym]();
                 let nw = NumCast(d.nativeWidth);
                 let nh = NumCast(d.nativeHeight);
                 if (nw && nh) hgt = nh / nw * colWidth();
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b9e000ec8..7750b9173 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -191,7 +191,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (minimizedDoc) {
             let scrpt = this.props.ScreenToLocalTransform().inverse().transformPoint(
                 NumCast(minimizedDoc.x) - NumCast(this.Document.x), NumCast(minimizedDoc.y) - NumCast(this.Document.y));
-            this.collapseToPoint(scrpt, await DocListCastAsync(minimizedDoc.maximizedDocs));
+            this.props.collapseToPoint && this.props.collapseToPoint(scrpt, await DocListCastAsync(minimizedDoc.maximizedDocs));
         }
     }
 
@@ -447,7 +447,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     render() {
         var scaling = this.props.ContentScaling();
-        var nativeHeight = this.nativeHeight > 0 ? `${this.nativeHeight}px` : (StrCast(this.props.Document.layout).indexOf("IconBox") === -1 ? "100%" : "auto");
+        var nativeHeight = this.nativeHeight > 0 ? `${this.nativeHeight}px` : "100%";
         var nativeWidth = this.nativeWidth > 0 ? `${this.nativeWidth}px` : "100%";
 
         return (
diff --git a/src/client/views/nodes/IconBox.scss b/src/client/views/nodes/IconBox.scss
index 893dc2d36..488681027 100644
--- a/src/client/views/nodes/IconBox.scss
+++ b/src/client/views/nodes/IconBox.scss
@@ -10,6 +10,7 @@
     pointer-events: all;
     svg {
         width:  $MINIMIZED_ICON_SIZE !important;
+        height:  $MINIMIZED_ICON_SIZE !important;
         height: auto;
         background: white;
     }
-- 
cgit v1.2.3-70-g09d2