Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into editableSchema

5 files changed, 71 insertions, 47 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 19788447e..0f0276929 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,7 +1,7 @@
 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 } from "mobx";
+import { action, observable, reaction, trace } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
 import { Document } from "../../../fields/Document";
@@ -16,6 +16,7 @@ import "./CollectionDockingView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import React = require("react");
 import { SubCollectionViewProps } from "./CollectionViewBase";
+import { ServerUtils } from "../../../server/ServerUtil";
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -36,6 +37,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     private _containerRef = React.createRef<HTMLDivElement>();
     private _fullScreen: any = null;
     private _flush: boolean = false;
+    private _ignoreStateChange = "";
 
     constructor(props: SubCollectionViewProps) {
         super(props);
@@ -44,7 +46,8 @@ 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: 0 })
+        this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.
+            onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 })
     }
 
     @action
@@ -75,7 +78,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     //
     @action
     public AddRightSplit(document: Document, minimize: boolean = false) {
-        this._goldenLayout.emit('stateChanged');
         let newItemStackConfig = {
             type: 'stack',
             content: [CollectionDockingView.makeDocumentConfig(document)]
@@ -104,7 +106,9 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         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();
+
         return newContentItem;
     }
 
@@ -144,7 +148,12 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         if (this._containerRef.current) {
             reaction(
                 () => this.props.Document.GetText(KeyStore.Data, ""),
-                () => setTimeout(() => this.setupGoldenLayout(), 1), { fireImmediately: true });
+                () => {
+                    if (!this._goldenLayout || this._ignoreStateChange != JSON.stringify(this._goldenLayout.toConfig())) {
+                        setTimeout(() => this.setupGoldenLayout(), 1);
+                    }
+                    this._ignoreStateChange = "";
+                }, { fireImmediately: true });
 
             window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
         }
@@ -215,7 +224,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         stack.header.controlsContainer.find('.lm_popout') //get the close icon
             .off('click') //unbind the current click handler
             .click(action(function () {
-                var url = "http://localhost:1050/doc/" + stack.contentItems[0].tab.contentItem.config.props.documentId;
+                var url = ServerUtils.prepend("/doc/" + stack.contentItems[0].tab.contentItem.config.props.documentId);
                 let win = window.open(url, stack.contentItems[0].tab.title, "width=300,height=400");
             }));
     }
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 11addc5a1..0e0570397 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -41,6 +41,7 @@
     background: $light-color-secondary;
   }
 
+  opacity: 0.99;
   position:absolute;
   border: 0px solid transparent;
   border-radius: $border-radius;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 07b4d150a..c2645ea73 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -9,7 +9,6 @@ import { Field, Opt } from "../../../fields/Field";
 import { KeyStore } from "../../../fields/KeyStore";
 import { CompileScript, ToField } from "../../util/Scripting";
 import { Transform } from "../../util/Transform";
-import { ContextMenu } from "../ContextMenu";
 import { EditableView } from "../EditableView";
 import { DocumentView } from "../nodes/DocumentView";
 import { FieldView, FieldViewProps } from "../nodes/FieldView";
@@ -32,8 +31,7 @@ import { faCog } from '@fortawesome/free-solid-svg-icons';
 
 @observer
 class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggle: (key: Key) => void }> {
-    @observable
-    key: Key | undefined;
+    @observable key: Key | undefined;
 
     componentWillReceiveProps() {
         Server.GetField(this.props.keyId, action((field: Opt<Field>) => {
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 303099c16..d4afc69cf 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -13,6 +13,7 @@ import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import { CollectionTreeView } from "./CollectionTreeView";
 import { Field, FieldId } from "../../../fields/Field";
+import { Main } from "../Main";
 
 export enum CollectionViewType {
     Invalid,
@@ -95,7 +96,7 @@ 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
+        if (!e.isPropagationStopped() && this.props.Document.Id != Main.Instance.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: () => 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) })
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 7175e2846..f33007196 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -15,6 +15,8 @@ import { TupleField } from "../../../fields/TupleField";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { NumberField } from "../../../fields/NumberField";
 import { DocumentManager } from "../../util/DocumentManager";
+import request = require("request");
+import { ServerUtils } from "../../../server/ServerUtil";
 
 export interface CollectionViewProps {
     fieldKey: Key;
@@ -94,6 +96,27 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
         }
     }
 
+    protected getDocumentFromType(type: string, path: string, options: DocumentOptions): Opt<Document> {
+        let ctor: ((path: string, options: DocumentOptions) => Document) | undefined;
+        if (type.indexOf("image") !== -1) {
+            ctor = Documents.ImageDocument;
+        }
+        if (type.indexOf("video") !== -1) {
+            ctor = Documents.VideoDocument;
+        }
+        if (type.indexOf("audio") !== -1) {
+            ctor = Documents.AudioDocument;
+        }
+        if (type.indexOf("pdf") !== -1) {
+            ctor = Documents.PdfDocument;
+        }
+        if (type.indexOf("html") !== -1) {
+            ctor = Documents.WebDocument;
+            options = { height: options.width, ...options, };
+        }
+        return ctor ? ctor(path, options) : undefined;
+    }
+
     @action
     protected onDrop(e: React.DragEvent, options: DocumentOptions): void {
         let that = this;
@@ -115,16 +138,25 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
             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(action((s: string) => this.props.addDocument(Documents.WebDocument(s, options), false)))
+                e.dataTransfer.items[i].getAsString(action((s: string) => {
+                    let document: Document;
+                    request.head(ServerUtils.prepend(RouteStore.corsProxy + "/" + s), (err, res, body) => {
+                        let type = res.headers["content-type"];
+                        if (type) {
+                            let doc = this.getDocumentFromType(type, s, { ...options, width: 300, nativeWidth: 300 })
+                            if (doc) {
+                                this.props.addDocument(doc, false);
+                            }
+                        }
+                    });
+                    // this.props.addDocument(Documents.WebDocument(s, { ...options, width: 300, height: 300 }), false)
+                }))
             }
             let type = item.type
-            console.log(type)
             if (item.kind == "file") {
                 let file = item.getAsFile();
                 let formData = new FormData()
@@ -136,44 +168,27 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
                 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: 200, width: 200, })
-                                }
-                                if (type.indexOf("video") !== -1) {
-                                    doc = Documents.VideoDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                }).then((res: Response) => {
+                    return res.json()
+                }).then(json => {
+                    json.map((file: any) => {
+                        let path = window.location.origin + file
+                        runInAction(() => {
+                            let doc = this.getDocumentFromType(type, 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 (type.indexOf("audio") !== -1) {
-                                    doc = Documents.AudioDocument(path, { ...options, nativeWidth: 300, width: 300, })
+                                if (doc) {
+                                    docs.Data.push(doc);
                                 }
-                                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);
-                                    }
-
-                                }
-                            })
+                            }
                         })
                     })
-
-
+                })
             }
         }
     }