Merged with master, refactor with route store

7 files changed, 200 insertions, 57 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index ceb9d0a55..b5cafe681 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -44,7 +44,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         (window as any).ReactDOM = ReactDOM;
     }
     public StartOtherDrag(dragDoc: Document, e: any) {
-        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: e.button })
+        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 })
     }
 
     @action
@@ -150,9 +150,13 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         }
     }
     componentWillUnmount: () => void = () => {
-        this._goldenLayout.unbind('itemDropped', this.itemDropped);
-        this._goldenLayout.unbind('tabCreated', this.tabCreated);
-        this._goldenLayout.unbind('stackCreated', this.stackCreated);
+        try {
+            this._goldenLayout.unbind('itemDropped', this.itemDropped);
+            this._goldenLayout.unbind('tabCreated', this.tabCreated);
+            this._goldenLayout.unbind('stackCreated', this.stackCreated);
+        } catch (e) {
+
+        }
         this._goldenLayout.destroy();
         this._goldenLayout = null;
         window.removeEventListener('resize', this.onResize);
@@ -174,17 +178,12 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     }
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if (e.button === 2 && this.props.active()) {
+        var className = (e.target as any).className;
+        if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") {
+            this._flush = true;
+        }
+        if (this.props.active()) {
             e.stopPropagation();
-            e.preventDefault();
-        } else {
-            var className = (e.target as any).className;
-            if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") {
-                this._flush = true;
-            }
-            if (e.buttons === 1 && this.props.active()) {
-                e.stopPropagation();
-            }
         }
     }
 
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index b7b5faf6d..28242c939 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -21,6 +21,13 @@
         height: 100%;
     }
 }
+.collectionfreeformview-marquee{
+    border-style: dashed;
+    box-sizing: border-box;
+    position: absolute;
+    border-width: 1px;
+    border-color: black;
+}
 .collectionfreeformview-overlay {
 
     .collectionfreeformview > .jsx-parser{
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 0d5e15767..0c74d1852 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable, reaction, trace } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { FieldWaiting } from "../../../fields/Field";
@@ -10,9 +10,9 @@ import { DragManager } from "../../util/DragManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
 import { CollectionView } from "../collections/CollectionView";
-import { CollectionPDFView } from "../collections/CollectionPDFView";
 import { InkingCanvas } from "../InkingCanvas";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
@@ -25,13 +25,15 @@ import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
 import React = require("react");
-import { render } from "pug";
+import { SelectionManager } from "../../util/SelectionManager";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
     private _canvasRef = React.createRef<HTMLDivElement>();
+    @observable
     private _lastX: number = 0;
+    @observable
     private _lastY: number = 0;
     private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type)
 
@@ -60,18 +62,23 @@ export class CollectionFreeFormView extends CollectionViewBase {
         super.drop(e, de);
         const docView: DocumentView = de.data["documentView"];
         let doc: Document = docView ? docView.props.Document : de.data["document"];
-        let screenX = de.x - (de.data["xOffset"] as number || 0);
-        let screenY = de.y - (de.data["yOffset"] as number || 0);
-        const [x, y] = this.getTransform().transformPoint(screenX, screenY);
-        doc.SetNumber(KeyStore.X, x);
-        doc.SetNumber(KeyStore.Y, y);
-        this.bringToFront(doc);
+        if (doc) {
+            let screenX = de.x - (de.data["xOffset"] as number || 0);
+            let screenY = de.y - (de.data["yOffset"] as number || 0);
+            const [x, y] = this.getTransform().transformPoint(screenX, screenY);
+            doc.SetNumber(KeyStore.X, x);
+            doc.SetNumber(KeyStore.Y, y);
+            this.bringToFront(doc);
+        }
     }
 
+    @observable
+    _marquee = false;
+
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if (((e.button === 2 && this.props.active()) ||
-            !e.defaultPrevented) && (!this.isAnnotationOverlay || this.zoomScaling != 1 || e.button == 0)) {
+        if (((e.button === 2 && this.props.active()) || !e.defaultPrevented) &&
+            (!this.isAnnotationOverlay || this.zoomScaling != 1 || e.button == 0)) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
@@ -85,10 +92,19 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @action
     onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
+        if (this._marquee) {
+            document.removeEventListener("keydown", this.marqueeCommand);
+        }
         e.stopPropagation();
-        if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+
+        if (this._marquee) {
+            if (!e.shiftKey) {
+                SelectionManager.DeselectAll();
+            }
+            var selectedDocs = this.marqueeSelect();
+            selectedDocs.map(s => this.props.CollectionView.SelectedDocs.push(s.Id));
+        }
+        else if (!this._marquee && Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
             //show preview text cursor on tap
             this._previewCursorVisible = true;
             //select is not already selected
@@ -96,7 +112,48 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 this.props.select(false);
             }
         }
+        this.cleanupInteractions();
+    }
+
+    @action
+    cleanupInteractions = () => {
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        this._marquee = false;
+    }
 
+    intersectRect(r1: { left: number, right: number, top: number, bottom: number },
+        r2: { left: number, right: number, top: number, bottom: number }) {
+        return !(r2.left > r1.right ||
+            r2.right < r1.left ||
+            r2.top > r1.bottom ||
+            r2.bottom < r1.top);
+    }
+
+    marqueeSelect() {
+        this.props.CollectionView.SelectedDocs.length = 0;
+        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
+        let p = this.getTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
+        let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
+        let selRect = { left: p[0], top: p[1], right: p[0] + v[0], bottom: p[1] + v[1] }
+
+        var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1);
+        const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField);
+        let selection: Document[] = [];
+        if (lvalue && lvalue != FieldWaiting) {
+            lvalue.Data.map(doc => {
+                var page = doc.GetNumber(KeyStore.Page, 0);
+                if (page == curPage || page == 0) {
+                    var x = doc.GetNumber(KeyStore.X, 0);
+                    var y = doc.GetNumber(KeyStore.Y, 0);
+                    var w = doc.GetNumber(KeyStore.Width, 0);
+                    var h = doc.GetNumber(KeyStore.Height, 0);
+                    if (this.intersectRect({ left: x, top: y, right: x + w, bottom: y + h }, selRect))
+                        selection.push(doc)
+                }
+            })
+        }
+        return selection;
     }
 
     @action
@@ -104,17 +161,51 @@ export class CollectionFreeFormView extends CollectionViewBase {
         if (!e.cancelBubble && this.props.active()) {
             e.stopPropagation();
             e.preventDefault();
-            let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
-            let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
-            let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
-            this._previewCursorVisible = false;
-            this.SetPan(x - dx, y - dy);
+            let wasMarquee = this._marquee;
+            this._marquee = e.buttons != 2 && !e.altKey && !e.metaKey;
+            if (this._marquee && !wasMarquee) {
+                this._previewCursorVisible = false;
+                document.addEventListener("keydown", this.marqueeCommand);
+            }
+
+            if (!this._marquee) {
+                let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
+                let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
+                let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+                this._previewCursorVisible = false;
+                this.SetPan(x - dx, y - dy);
+            }
         }
         this._lastX = e.pageX;
         this._lastY = e.pageY;
     }
 
     @action
+    marqueeCommand = (e: KeyboardEvent) => {
+        if (e.key == "Backspace") {
+            this.marqueeSelect().map(d => this.props.removeDocument(d));
+            this.cleanupInteractions();
+        }
+        if (e.key == "c") {
+            let p = this.getTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
+            let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
+
+            let selected = this.marqueeSelect().map(m => m);
+            this.marqueeSelect().map(d => this.props.removeDocument(d));
+            //setTimeout(() => {
+            this.props.CollectionView.addDocument(Documents.FreeformDocument(selected.map(d => {
+                d.SetNumber(KeyStore.X, d.GetNumber(KeyStore.X, 0) - p[0] - v[0] / 2);
+                d.SetNumber(KeyStore.Y, d.GetNumber(KeyStore.Y, 0) - p[1] - v[1] / 2);
+                d.SetNumber(KeyStore.Page, this.props.Document.GetNumber(KeyStore.Page, 0));
+                d.SetText(KeyStore.Title, "" + d.GetNumber(KeyStore.Width, 0) + " " + d.GetNumber(KeyStore.Height, 0));
+                return d;
+            }), { x: p[0], y: p[1], panx: 0, pany: 0, width: v[0], height: v[1], title: "a nested collection" }));
+            // }, 100);
+            this.cleanupInteractions();
+        }
+    }
+
+    @action
     onPointerWheel = (e: React.WheelEvent): void => {
         e.stopPropagation();
         e.preventDefault();
@@ -291,6 +382,10 @@ export class CollectionFreeFormView extends CollectionViewBase {
             cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div>
         }
 
+        let p = this.getTransform().transformPoint(this._downX < this._lastX ? this._downX : this._lastX, this._downY < this._lastY ? this._downY : this._lastY);
+        let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY);
+        var marquee = this._marquee ? <div className="collectionfreeformview-marquee" style={{ transform: `translate(${p[0]}px, ${p[1]}px)`, width: `${Math.abs(v[0])}`, height: `${Math.abs(v[1])}` }}></div> : (null);
+
         let [dx, dy] = [this.centeringShiftX, this.centeringShiftY];
 
         const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0);
@@ -317,6 +412,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} />
                     {cursor}
                     {this.views}
+                    {marquee}
                 </div>
                 {this.overlayView}
             </div>
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index 7fd9f0f11..f22c07060 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -6,6 +6,7 @@ import { ContextMenu } from "../ContextMenu";
 import { CollectionView, CollectionViewType } from "./CollectionView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import React = require("react");
+import { FieldId } from "../../../fields/Field";
 
 
 @observer
@@ -17,6 +18,7 @@ export class CollectionPDFView extends React.Component<CollectionViewProps> {
                     isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`;
     }
 
+    public SelectedDocs: FieldId[] = []
     @action onPageBack = () => this.curPage > 1 ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage - 1) : 0;
     @action onPageForward = () => this.curPage < this.numPages ? this.props.Document.SetNumber(KeyStore.CurPage, this.curPage + 1) : 0;
 
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 2868e1322..17eeaa5a2 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -205,6 +205,8 @@ export class CollectionSchemaView extends CollectionViewBase {
         )
         let previewHandle = !this.props.active() ? (null) : (
             <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />);
+        let dividerDragger = this._splitPercentage == 100 ? (null) :
+            <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
         return (
             <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
                 <div className="collectionSchemaView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}>
@@ -234,7 +236,7 @@ export class CollectionSchemaView extends CollectionViewBase {
                             </div>
                         }
                     </Measure>
-                    <div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
+                    {dividerDragger}
                     <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)` }}>
                         {content}
                     </div>
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 49df04163..17a0fbd23 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
@@ -12,7 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import { CollectionTreeView } from "./CollectionTreeView";
-import { Field } from "../../../fields/Field";
+import { Field, FieldId } from "../../../fields/Field";
 
 export enum CollectionViewType {
     Invalid,
@@ -27,6 +27,9 @@ export const COLLECTION_BORDER_WIDTH = 2;
 @observer
 export class CollectionView extends React.Component<CollectionViewProps> {
 
+    @observable
+    public SelectedDocs: FieldId[] = [];
+
     public static LayoutString(fieldKey: string = "DataKey") {
         return `<${CollectionView.name} Document={Document}
                     ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
@@ -96,7 +99,6 @@ export class CollectionView extends React.Component<CollectionViewProps> {
             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) })
         }
     }
 
@@ -116,4 +118,4 @@ export class CollectionView extends React.Component<CollectionViewProps> {
             {this.subView}
         </div>)
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 0a3b965f2..ddde05011 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -1,4 +1,4 @@
-import { action } from "mobx";
+import { action, runInAction } from "mobx";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
 import React = require("react");
@@ -11,6 +11,7 @@ import { Documents, DocumentOptions } from "../../documents/Documents";
 import { Key } from "../../../fields/Key";
 import { Transform } from "../../util/Transform";
 import { CollectionView } from "./CollectionView";
+import { RouteStore } from "../../../server/RouteStore";
 
 export interface CollectionViewProps {
     fieldKey: Key;
@@ -47,7 +48,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
     protected drop(e: Event, de: DragManager.DropEvent) {
         const docView: DocumentView = de.data["documentView"];
         const doc: Document = de.data["document"];
-        if (docView && docView.props.ContainingCollectionView && docView.props.ContainingCollectionView !== this.props.CollectionView) {
+        if (docView && (!docView.props.ContainingCollectionView || docView.props.ContainingCollectionView !== this.props.CollectionView)) {
             if (docView.props.RemoveDocument) {
                 docView.props.RemoveDocument(docView.props.Document);
             }
@@ -68,13 +69,17 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
         let html = e.dataTransfer.getData("text/html");
         let text = e.dataTransfer.getData("text/plain");
         if (html && html.indexOf("<img") != 0) {
+            console.log("not good");
             let htmlDoc = Documents.HtmlDocument(html, { ...options, width: 300, height: 300 });
             htmlDoc.SetText(KeyStore.DocumentText, text);
             this.props.addDocument(htmlDoc);
             return;
         }
 
+        console.log(e.dataTransfer.items.length);
+
         for (let i = 0; i < e.dataTransfer.items.length; i++) {
+            const upload = window.location.origin + RouteStore.upload;
             let item = e.dataTransfer.items[i];
             if (item.kind === "string" && item.type.indexOf("uri") != -1) {
                 e.dataTransfer.items[i].getAsString(function (s) {
@@ -93,28 +98,58 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
 
                 })
             }
-            if (item.kind == "file" && item.type.indexOf("image")) {
+            let type = item.type
+            console.log(type)
+            if (item.kind == "file") {
                 let fReader = new FileReader()
                 let file = item.getAsFile();
-
-                fReader.addEventListener("load", action("drop", () => {
-                    if (fReader.result) {
-                        let url = "" + fReader.result;
-                        let doc = Documents.ImageDocument(url, options)
-                        let docs = that.props.Document.GetT(KeyStore.Data, ListField);
-                        if (docs != FieldWaiting) {
-                            if (!docs) {
-                                docs = new ListField<Document>();
-                                that.props.Document.Set(KeyStore.Data, docs)
-                            }
-                            docs.Data.push(doc);
-                        }
-                    }
-                }), false)
+                let formData = new FormData()
 
                 if (file) {
-                    fReader.readAsDataURL(file)
+                    formData.append('file', file)
                 }
+
+                fetch(upload, {
+                    method: 'POST',
+                    body: formData
+                })
+                    .then((res: Response) => {
+                        return res.json()
+                    }).then(json => {
+
+                        json.map((file: any) => {
+                            let path = window.location.origin + file
+                            runInAction(() => {
+                                var doc: any;
+
+                                if (type.indexOf("image") !== -1) {
+                                    doc = Documents.ImageDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                                }
+                                if (type.indexOf("video") !== -1) {
+                                    doc = Documents.VideoDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                                }
+                                if (type.indexOf("audio") !== -1) {
+                                    doc = Documents.AudioDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                                }
+                                if (type.indexOf("pdf") !== -1) {
+                                    doc = Documents.PdfDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                                }
+                                let docs = that.props.Document.GetT(KeyStore.Data, ListField);
+                                if (docs != FieldWaiting) {
+                                    if (!docs) {
+                                        docs = new ListField<Document>();
+                                        that.props.Document.Set(KeyStore.Data, docs)
+                                    }
+                                    if (doc) {
+                                        docs.Data.push(doc);
+                                    }
+
+                                }
+                            })
+                        })
+                    })
+
+
             }
         }
     }