From a4b34adcb34184728be0b69b33a561f6d10f0a98 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Fri, 21 Jun 2019 16:27:03 -0400
Subject: can drag just a group of links on a doc

---
 src/client/views/nodes/DocumentView.tsx  |  2 +
 src/client/views/nodes/LinkMenu.scss     | 15 ++++++-
 src/client/views/nodes/LinkMenu.tsx      | 18 ++------
 src/client/views/nodes/LinkMenuGroup.tsx | 74 ++++++++++++++++++++++++++++++++
 src/client/views/nodes/LinkMenuItem.tsx  |  8 ++--
 5 files changed, 97 insertions(+), 20 deletions(-)
 create mode 100644 src/client/views/nodes/LinkMenuGroup.tsx

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index dbbae2d59..1fc2cf770 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -161,7 +161,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this._animateToIconDisposer = reaction(() => this.props.Document.isIconAnimating, (values) =>
             (values instanceof List) && this.animateBetweenIcon(values, values[2], values[3] ? true : false)
             , { fireImmediately: true });
+        // console.log("CREATED NEW DOC VIEW", StrCast(this.props.Document.title), DocumentManager.Instance.DocumentViews.length);
         DocumentManager.Instance.DocumentViews.push(this);
+        // console.log("ADDED TO DOC MAN", StrCast(this.props.Document.title), DocumentManager.Instance.DocumentViews.length);
     }
 
     animateBetweenIcon = (iconPos: number[], startTime: number, maximizing: boolean) => {
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index d2e411c3d..c01ed23c4 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -18,8 +18,19 @@
     }
 
     .linkMenu-group-name {
-        border-bottom: 0.5px solid lightgray; 
-        margin-bottom: 4px;
+        padding: 4px 6px;
+        line-height: 12px;
+        border-radius: 5px;
+        margin-bottom: 2px;
+
+        &:hover {
+            background-color: lightgray;
+        }
+    }
+
+    .linkMenu-group-wrapper {
+        border-top: 0.5px solid lightgray; 
+        padding-top: 4px;
     }
 }
 
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 8aca130a5..f96c7d2e4 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -8,6 +8,9 @@ import React = require("react");
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { LinkManager } from "../../util/LinkManager";
+import { DragLinksAsDocuments, DragManager } from "../../util/DragManager";
+import { emptyFunction } from "../../../Utils";
+import { LinkMenuGroup } from "./LinkMenuGroup";
 
 interface Props {
     docView: DocumentView;
@@ -19,24 +22,11 @@ export class LinkMenu extends React.Component<Props> {
 
     @observable private _editingLink?: Doc;
 
-    renderGroup = (group: Doc[], groupType: string): Array<JSX.Element> => {
-        let source = this.props.docView.Document;
-        return group.map(linkDoc => {
-            let destination = LinkManager.Instance.findOppositeAnchor(linkDoc, source);
-            return <LinkMenuItem key={destination[Id] + source[Id]} groupType={groupType} linkDoc={linkDoc} sourceDoc={source} destinationDoc={destination} showEditor={action(() => this._editingLink = linkDoc)} />;
-        });
-    }
-
     renderAllGroups = (groups: Map<string, Array<Doc>>): Array<JSX.Element> => {
         let linkItems: Array<JSX.Element> = [];
         groups.forEach((group, groupType) => {
             linkItems.push(
-                <div key={groupType} className="linkMenu-group">
-                    <p className="linkMenu-group-name">{groupType}:</p>
-                    <div className="linkMenu-group-wrapper">
-                        {this.renderGroup(group, groupType)}
-                    </div>
-                </div>
+                <LinkMenuGroup key={groupType} sourceDoc={this.props.docView.props.Document} group={group} groupType={groupType} showEditor={action((linkDoc: Doc) => this._editingLink = linkDoc)} />
             );
         });
 
diff --git a/src/client/views/nodes/LinkMenuGroup.tsx b/src/client/views/nodes/LinkMenuGroup.tsx
new file mode 100644
index 000000000..229143d99
--- /dev/null
+++ b/src/client/views/nodes/LinkMenuGroup.tsx
@@ -0,0 +1,74 @@
+import { action, observable } from "mobx";
+import { observer } from "mobx-react";
+import { DocumentView } from "./DocumentView";
+import { LinkMenuItem } from "./LinkMenuItem";
+import { LinkEditor } from "./LinkEditor";
+import './LinkMenu.scss';
+import React = require("react");
+import { Doc, DocListCast } from "../../../new_fields/Doc";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { LinkManager } from "../../util/LinkManager";
+import { DragLinksAsDocuments, DragManager } from "../../util/DragManager";
+import { emptyFunction } from "../../../Utils";
+
+interface LinkMenuGroupProps {
+    sourceDoc: Doc;
+    group: Doc[];
+    groupType: string;
+    showEditor: (linkDoc: Doc) => void;
+}
+
+@observer
+export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
+
+    private _drag = React.createRef<HTMLDivElement>();
+
+    onLinkButtonDown = (e: React.PointerEvent): void => {
+        e.stopPropagation();
+        document.removeEventListener("pointermove", this.onLinkButtonMoved);
+        document.addEventListener("pointermove", this.onLinkButtonMoved);
+        document.removeEventListener("pointerup", this.onLinkButtonUp);
+        document.addEventListener("pointerup", this.onLinkButtonUp);
+    }
+
+    onLinkButtonUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onLinkButtonMoved);
+        document.removeEventListener("pointerup", this.onLinkButtonUp);
+        e.stopPropagation();
+    }
+
+    onLinkButtonMoved = async (e: PointerEvent) => {
+        if (this._drag.current !== null && (e.movementX > 1 || e.movementY > 1)) {
+            document.removeEventListener("pointermove", this.onLinkButtonMoved);
+            document.removeEventListener("pointerup", this.onLinkButtonUp);
+
+            let draggedDocs = this.props.group.map(linkDoc => LinkManager.Instance.findOppositeAnchor(linkDoc, this.props.sourceDoc));
+            let dragData = new DragManager.DocumentDragData(draggedDocs);
+
+            DragManager.StartLinkedDocumentDrag([this._drag.current], dragData, e.x, e.y, {
+                handlers: {
+                    dragComplete: action(emptyFunction),
+                },
+                hideSource: false
+            });
+        }
+        e.stopPropagation();
+    }
+
+    render() {
+        let groupItems = this.props.group.map(linkDoc => {
+            let destination = LinkManager.Instance.findOppositeAnchor(linkDoc, this.props.sourceDoc);
+            return <LinkMenuItem key={destination[Id] + this.props.sourceDoc[Id]} groupType={this.props.groupType}
+                linkDoc={linkDoc} sourceDoc={this.props.sourceDoc} destinationDoc={destination} showEditor={this.props.showEditor} />;
+        });
+
+        return (
+            <div className="linkMenu-group">
+                <p className="linkMenu-group-name" ref={this._drag} onPointerDown={this.onLinkButtonDown} >{this.props.groupType}:</p>
+                <div className="linkMenu-group-wrapper">
+                    {groupItems}
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenuItem.tsx b/src/client/views/nodes/LinkMenuItem.tsx
index 1ef4690b0..42ef353b7 100644
--- a/src/client/views/nodes/LinkMenuItem.tsx
+++ b/src/client/views/nodes/LinkMenuItem.tsx
@@ -21,7 +21,7 @@ interface LinkMenuItemProps {
     linkDoc: Doc;
     sourceDoc: Doc;
     destinationDoc: Doc;
-    showEditor: () => void;
+    showEditor: (linkDoc: Doc) => void;
 }
 
 @observer
@@ -42,7 +42,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
 
     onEdit = (e: React.PointerEvent): void => {
         e.stopPropagation();
-        this.props.showEditor();
+        this.props.showEditor(this.props.linkDoc);
     }
 
     renderMetadata = (): JSX.Element => {
@@ -95,12 +95,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
             <div className="linkMenu-item">
                 <div className={canExpand ? "linkMenu-item-content expand-three" : "linkMenu-item-content expand-two"}>
                     <div className="link-name">
-                        <p>{StrCast(this.props.destinationDoc.title)}</p>
+                        <p ref={this._drag} onPointerDown={this.onLinkButtonDown}>{StrCast(this.props.destinationDoc.title)}</p>
                         <div className="linkMenu-item-buttons">
                             {canExpand ? <div title="Show more" className="button" onPointerDown={() => this.toggleShowMore()}>
                                 <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
                             <div title="Edit link" className="button" onPointerDown={this.onEdit}><FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
-                            <div title="Follow link" className="button" ref={this._drag} onPointerDown={this.onLinkButtonDown} onPointerUp={this.onFollowLink}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
+                            <div title="Follow link" className="button" onPointerDown={this.onFollowLink}><FontAwesomeIcon className="fa-icon" icon="arrow-right" size="sm" /></div>
                         </div>
                     </div>
                     {this._showMore ? this.renderMetadata() : <></>}
-- 
cgit v1.2.3-70-g09d2