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

1 files changed, 65 insertions, 39 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index ea6d3a247..eb1cd1c09 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -7,18 +7,18 @@ import * as ReactDOM from 'react-dom';
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/KeyStore";
 import Measure from "react-measure";
-import { FieldId, Opt, Field } from "../../../fields/Field";
-import { Utils, returnTrue, emptyFunction } from "../../../Utils";
+import { FieldId, Opt, Field, FieldWaiting } from "../../../fields/Field";
+import { Utils, returnTrue, emptyFunction, emptyDocFunction } from "../../../Utils";
 import { Server } from "../../Server";
 import { undoBatch } from "../../util/UndoManager";
 import { DocumentView } from "../nodes/DocumentView";
 import "./CollectionDockingView.scss";
-import { COLLECTION_BORDER_WIDTH } from "./CollectionBaseView";
 import React = require("react");
 import { SubCollectionViewProps } from "./CollectionSubView";
 import { ServerUtils } from "../../../server/ServerUtil";
-import { DragManager } from "../../util/DragManager";
+import { DragManager, DragLinksAsDocuments } from "../../util/DragManager";
 import { TextField } from "../../../fields/TextField";
+import { ListField } from "../../../fields/ListField";
 
 @observer
 export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
@@ -50,7 +50,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     public StartOtherDrag(dragDocs: Document[], e: any) {
         dragDocs.map(dragDoc =>
             this.AddRightSplit(dragDoc, true).contentItems[0].tab._dragListener.
-                onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: () => { }, button: 0 }));
+                onMouseDown({ pageX: e.pageX, pageY: e.pageY, preventDefault: emptyFunction, button: 0 }));
     }
 
     @action
@@ -194,23 +194,35 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         var className = (e.target as any).className;
-        if ((className === "lm_title" || className === "lm_tab lm_active") && (e.ctrlKey || e.altKey)) {
+        if (className === "messageCounter") {
             e.stopPropagation();
             e.preventDefault();
+            let x = e.clientX;
+            let y = e.clientY;
             let docid = (e.target as any).DashDocId;
             let tab = (e.target as any).parentElement as HTMLElement;
-            Server.GetField(docid, action((f: Opt<Field>) => {
-                if (f instanceof Document) {
-                    DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f]), e.pageX, e.pageY,
-                        {
-                            handlers: {
-                                dragComplete: action(() => { }),
-                            },
-                            hideSource: false
-                        });
-                }
-            }));
-        }
+            Server.GetField(docid, action(async (sourceDoc: Opt<Field>) =>
+                (sourceDoc instanceof Document) && DragLinksAsDocuments(tab, x, y, sourceDoc)));
+        } else
+            if ((className === "lm_title" || className === "lm_tab lm_active") && !e.shiftKey) {
+                e.stopPropagation();
+                e.preventDefault();
+                let x = e.clientX;
+                let y = e.clientY;
+                let docid = (e.target as any).DashDocId;
+                let tab = (e.target as any).parentElement as HTMLElement;
+                Server.GetField(docid, action((f: Opt<Field>) => {
+                    if (f instanceof Document) {
+                        DragManager.StartDocumentDrag([tab], new DragManager.DocumentDragData([f]), x, y,
+                            {
+                                handlers: {
+                                    dragComplete: action(emptyFunction),
+                                },
+                                hideSource: false
+                            });
+                    }
+                }));
+            }
         if (className === "lm_drag_handle" || className === "lm_close" || className === "lm_maximise" || className === "lm_minimise" || className === "lm_close_tab") {
             this._flush = true;
         }
@@ -229,24 +241,44 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         this.stateChanged();
     }
 
+    htmlToElement(html: string) {
+        var template = document.createElement('template');
+        html = html.trim(); // Never return a text node of whitespace as the result
+        template.innerHTML = html;
+        return template.content.firstChild;
+    }
+
     tabCreated = (tab: any) => {
         if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type !== "stack") {
-            if (tab.titleElement[0].textContent.indexOf("-waiting") !== -1) {
-                Server.GetField(tab.contentItem.config.props.documentId, action((f: Opt<Field>) => {
-                    if (f !== undefined && f instanceof Document) {
-                        f.GetTAsync(KeyStore.Title, TextField, (tfield) => {
-                            if (tfield !== undefined) {
-                                tab.titleElement[0].textContent = f.Title;
-                            }
-                        });
-                    }
-                }));
-                tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
-            }
-            tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
+            Server.GetField(tab.contentItem.config.props.documentId, action((f: Opt<Field>) => {
+                if (f !== undefined && f instanceof Document) {
+                    f.GetTAsync(KeyStore.Title, TextField, (tfield) => {
+                        if (tfield !== undefined) {
+                            tab.titleElement[0].textContent = f.Title;
+                        }
+                    });
+                    f.GetTAsync(KeyStore.LinkedFromDocs, ListField).then(lf =>
+                        f.GetTAsync(KeyStore.LinkedToDocs, ListField).then(lt => {
+                            let count = (lf ? lf.Data.length : 0) + (lt ? lt.Data.length : 0);
+                            let counter: any = this.htmlToElement(`<div class="messageCounter">${count}</div>`);
+                            tab.element.append(counter);
+                            counter.DashDocId = tab.contentItem.config.props.documentId;
+                            (tab as any).reactionDisposer = reaction(() => [f.GetT(KeyStore.LinkedFromDocs, ListField), f.GetT(KeyStore.LinkedToDocs, ListField)],
+                                (lists) => {
+                                    let count = (lists.length > 0 && lists[0] && lists[0]!.Data ? lists[0]!.Data.length : 0) +
+                                        (lists.length > 1 && lists[1] && lists[1]!.Data ? lists[1]!.Data.length : 0);
+                                    counter.innerHTML = count;
+                                });
+                        }));
+                    tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
+                }
+            }));
         }
         tab.closeElement.off('click') //unbind the current click handler
             .click(function () {
+                if (tab.reactionDisposer) {
+                    tab.reactionDisposer();
+                }
                 tab.contentItem.remove();
             });
     }
@@ -271,13 +303,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     render() {
         return (
             <div className="collectiondockingview-container" id="menuContainer"
-                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} ref={this._containerRef}
-                style={{
-                    width: "100%",
-                    height: "100%",
-                    borderStyle: "solid",
-                    borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
-                }} />
+                onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} ref={this._containerRef} />
         );
     }
 }
@@ -325,7 +351,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     selectOnLoad={false}
                     parentActive={returnTrue}
                     onActiveChanged={emptyFunction}
-                    focus={(doc: Document) => { }}
+                    focus={emptyDocFunction}
                     ContainingCollectionView={undefined} />
             </div>;