minor changes

9 files changed, 117 insertions, 138 deletions

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index d7798ebfd..877475347 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -68,7 +68,6 @@ export class DocumentManager {
         //gets document view that is in a freeform canvas collection
         DocumentManager.Instance.DocumentViews.map(view => {
             let doc = view.props.Document;
-            // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) {
 
             if (doc === toFind) {
                 toReturn.push(view);
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 27063d1c2..8e6abe18e 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -71,7 +71,6 @@ export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: n
             });
         }
     }
-    // draggedDocs.push(...draggedFromDocs);
     if (draggedDocs.length) {
         let moddrag: Doc[] = [];
         for (const draggedDoc of draggedDocs) {
@@ -79,20 +78,6 @@ export async function DragLinksAsDocuments(dragEle: HTMLElement, x: number, y: n
             if (doc) moddrag.push(doc);
         }
         let dragData = new DragManager.DocumentDragData(moddrag.length ? moddrag : draggedDocs);
-        // dragData.moveDocument = (document, targetCollection, addDocument) => {
-        //     return false;
-        // };
-
-        // runInAction(() => StartDragFunctions.map(func => func()));
-        // (eles, dragData, downX, downY, options,
-        //     (dropData: { [id: string]: any }) => {
-        //         (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.draggedDocuments.map(d => Doc.MakeCopy(d, true)) :
-        //                 dragData.draggedDocuments
-        //         );
-        //     });
         DragManager.StartLinkedDocumentDrag([dragEle], sourceDoc, dragData, x, y, {
             handlers: {
                 dragComplete: action(emptyFunction),
@@ -230,19 +215,14 @@ export namespace DragManager {
             (dropData: { [id: string]: any }) => {
                 dropData.droppedDocuments = dragData.draggedDocuments.map(d => {
                     let dv = DocumentManager.Instance.getDocumentView(d);
-                    // return d;
                     if (dv) {
                         if (dv.props.ContainingCollectionView === SelectionManager.SelectedDocuments()[0].props.ContainingCollectionView) {
                             return d;
                         } else {
-                            let r = Doc.MakeAlias(d);
-                            // DocUtils.MakeLink(r, sourceDoc);
-                            return r;
+                            return Doc.MakeAlias(d);
                         }
                     } else {
-                        let r = Doc.MakeAlias(d);
-                        // DocUtils.MakeLink(r, sourceDoc);
-                        return r;
+                        return Doc.MakeAlias(d);
                     }
                 });
 
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 97c816001..1db686751 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -151,7 +151,7 @@ export class LinkManager {
     // removes group doc of given group type only from given anchor on given link
     public removeGroupFromAnchor(linkDoc: Doc, anchor: Doc, groupType: string) {
         let groups = LinkManager.Instance.getAnchorGroups(linkDoc, anchor);
-        let newGroups = groups.filter(groupDoc => { StrCast(groupDoc.type).toUpperCase() !== groupType.toUpperCase() });
+        let newGroups = groups.filter(groupDoc => StrCast(groupDoc.type).toUpperCase() !== groupType.toUpperCase());
         LinkManager.Instance.setAnchorGroups(linkDoc, anchor, newGroups);
     }
 
@@ -165,23 +165,25 @@ export class LinkManager {
             if (groups.length > 0) {
                 groups.forEach(groupDoc => {
                     let groupType = StrCast(groupDoc.type);
-                    let group = anchorGroups.get(groupType);
-                    if (group) group.push(link);
-                    else group = [link];
-                    anchorGroups.set(groupType, group);
+                    if (groupType === "") {
+                        let group = anchorGroups.get("*");
+                        anchorGroups.set("*", group ? [...group, link] : [link]);
+                    } else {
+                        let group = anchorGroups.get(groupType);
+                        anchorGroups.set(groupType, group ? [...group, link] : [link]);
+                    }
                 });
             } else {
                 // if link is in no groups then put it in default group
                 let group = anchorGroups.get("*");
-                if (group) group.push(link);
-                else group = [link];
-                anchorGroups.set("*", group);
+                anchorGroups.set("*", group ? [...group, link] : [link]);
             }
 
         });
         return anchorGroups;
     }
 
+    // gets a list of strings representing the keys of the metadata associated with the given group type
     public getMetadataKeysInGroup(groupType: string): string[] {
         if (LinkManager.Instance.LinkManagerDoc) {
             return LinkManager.Instance.LinkManagerDoc[groupType] ? Cast(LinkManager.Instance.LinkManagerDoc[groupType], listSpec("string"), []) : [];
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index 2602b8816..1424d7633 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -10,18 +10,15 @@
     margin-bottom: 6px;
 }
 
-.linKEditor-info {
+.linkEditor-info {
     border-bottom: 0.5px solid $light-color-secondary; 
     padding-bottom: 6px;
     margin-bottom: 6px;
     display: flex;
     justify-content: space-between;
 
-    .linkEditor-delete {
-        width: 20px;
-        height: 20px;
-        margin-left: 6px;
-        padding: 0;
+    .linkEditor-linkedTo {
+        width: calc(100% - 26px);
     }
 }
 
@@ -105,8 +102,7 @@
         cursor: pointer;
 
         &:hover {
-            background-color: $intermediate-color;
-            font-weight: bold;
+            background-color: lightgray;
         }
     }
 }
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 87ebeefdb..51efcc36d 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -11,7 +11,6 @@ import { faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTim
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { SetupDrag } from "../../util/DragManager";
-import { anchorPoints, Flyout } from "../DocumentDecorations";
 
 library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus);
 
@@ -35,6 +34,11 @@ class GroupTypesDropdown extends React.Component<GroupTypesDropdownProps> {
         LinkManager.Instance.addGroupType(groupType);
     }
 
+    onChange = (val: string): void => {
+        this.setSearchTerm(val);
+        this.setGroupType(val);
+    }
+
     renderOptions = (): JSX.Element[] | JSX.Element => {
         if (this._searchTerm === "") return <></>;
 
@@ -59,12 +63,12 @@ class GroupTypesDropdown extends React.Component<GroupTypesDropdownProps> {
     render() {
         return (
             <div className="linkEditor-dropdown">
-                <input type="text" value={this._groupType} placeholder="Search for a group or create a new group"
-                    onChange={e => { this.setSearchTerm(e.target.value); this.setGroupType(e.target.value); }}></input>
+                <input type="text" value={this._groupType} placeholder="Search for or create a new group"
+                    onChange={e => this.onChange(e.target.value)}></input>
                 <div className="linkEditor-options-wrapper">
                     {this.renderOptions()}
                 </div>
-            </div>
+            </div >
         );
     }
 }
@@ -326,7 +330,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 <button className="linkEditor-back" onPointerDown={() => this.props.showLinks()}><FontAwesomeIcon icon="arrow-left" size="sm" /></button>
                 <div className="linkEditor-info">
                     <p className="linkEditor-linkedTo">editing link to: <b>{destination.proto!.title}</b></p>
-                    <button className="linkEditor-delete linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link"><FontAwesomeIcon icon="trash" size="sm" /></button>
+                    <button className="linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link"><FontAwesomeIcon icon="trash" size="sm" /></button>
                 </div>
                 <div className="linkEditor-groupsLabel">
                     <b>Relationships:</b>
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index 1dd933c32..429977326 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -46,5 +46,89 @@
     }
 }
 
+.linkMenu-item {
+    // border-top: 0.5px solid $main-accent; 
+    position: relative;
+    display: flex;
+    font-size: 12px;
+    
+
+    .link-name {
+        position: relative;
+
+        p {
+            padding: 4px 6px;
+            line-height: 12px;
+            border-radius: 5px;
+            overflow-wrap: break-word;
+        }
+    }
+
+    .linkMenu-item-content {
+        width: 100%;
+    }
+    
+    .link-metadata {
+        padding: 0 10px 0 16px;
+        margin-bottom: 4px;
+        color: $main-accent;
+        font-style: italic;
+        font-size: 10.5px;
+    }
+
+    &:hover {
+        .linkMenu-item-buttons {
+            display: flex;
+        }
+        .linkMenu-item-content {
+            &.expand-two p {
+                width: calc(100% - 52px);
+                background-color: lightgray;
+            }
+            &.expand-three p {
+                width: calc(100% - 84px);
+                background-color: lightgray;
+            }
+        }
+    }
+}
+
+.linkMenu-item-buttons {
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+
+    .button {
+        width: 20px;
+        height: 20px;
+        margin: 0;
+        margin-right: 6px;
+        border-radius: 50%;
+        cursor: pointer;
+        pointer-events: auto;
+        background-color: $dark-color;
+        color: $light-color;
+        font-size: 65%;
+        transition: transform 0.2s;
+        text-align: center;
+        position: relative;
+
+        .fa-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+        &:hover {
+            background: $main-accent;
+        }
+    }
+}
 
 
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 04ca47db3..8ef899cfc 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -1,15 +1,11 @@
 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 { Doc } from "../../../new_fields/Doc";
 import { LinkManager } from "../../util/LinkManager";
-import { DragLinksAsDocuments, DragManager } from "../../util/DragManager";
-import { emptyFunction } from "../../../Utils";
 import { LinkMenuGroup } from "./LinkMenuGroup";
 
 interface Props {
@@ -22,6 +18,11 @@ export class LinkMenu extends React.Component<Props> {
 
     @observable private _editingLink?: Doc;
 
+    @action
+    componentWillReceiveProps() {
+        this._editingLink = undefined;
+    }
+
     renderAllGroups = (groups: Map<string, Array<Doc>>): Array<JSX.Element> => {
         let linkItems: Array<JSX.Element> = [];
         groups.forEach((group, groupType) => {
diff --git a/src/client/views/nodes/LinkMenuItem.scss b/src/client/views/nodes/LinkMenuItem.scss
deleted file mode 100644
index 175a93cb2..000000000
--- a/src/client/views/nodes/LinkMenuItem.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-@import "../globalCssVariables";
-
-.linkMenu-item {
-    // border-top: 0.5px solid $main-accent; 
-    position: relative;
-    display: flex;
-    font-size: 12px;
-    
-
-    .link-name {
-        position: relative;
-
-        p {
-            padding: 4px 6px;
-            line-height: 12px;
-            border-radius: 5px;
-            overflow-wrap: break-word;
-        }
-    }
-
-    .linkMenu-item-content {
-        width: 100%;
-    }
-    
-    .link-metadata {
-        padding: 0 10px 0 16px;
-        margin-bottom: 4px;
-        color: $main-accent;
-        font-style: italic;
-        font-size: 10.5px;
-    }
-
-    &:hover {
-        .linkMenu-item-buttons {
-            display: flex;
-        }
-        .linkMenu-item-content {
-            &.expand-two p {
-                width: calc(100% - 52px);
-                background-color: lightgray;
-            }
-            &.expand-three p {
-                width: calc(100% - 84px);
-                background-color: lightgray;
-            }
-        }
-    }
-}
-
-.linkMenu-item-buttons {
-    display: none;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-
-    .button {
-        width: 20px;
-        height: 20px;
-        margin: 0;
-        margin-right: 6px;
-        border-radius: 50%;
-        cursor: pointer;
-        pointer-events: auto;
-        background-color: $dark-color;
-        color: $light-color;
-        font-size: 65%;
-        transition: transform 0.2s;
-        text-align: center;
-        position: relative;
-
-        .fa-icon {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-
-        &:last-child {
-            margin-right: 0;
-        }
-        &:hover {
-            background: $main-accent;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkMenuItem.tsx b/src/client/views/nodes/LinkMenuItem.tsx
index 28694721d..486e3dc9b 100644
--- a/src/client/views/nodes/LinkMenuItem.tsx
+++ b/src/client/views/nodes/LinkMenuItem.tsx
@@ -4,14 +4,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observer } from "mobx-react";
 import { DocumentManager } from "../../util/DocumentManager";
 import { undoBatch } from "../../util/UndoManager";
-import './LinkMenuItem.scss';
+import './LinkMenu.scss';
 import React = require("react");
 import { Doc } from '../../../new_fields/Doc';
 import { StrCast, Cast } from '../../../new_fields/Types';
 import { observable, action } from 'mobx';
 import { LinkManager } from '../../util/LinkManager';
-import { DragLinksAsDocuments, DragLinkAsDocument } from '../../util/DragManager';
-import { SelectionManager } from '../../util/SelectionManager';
+import { DragLinkAsDocument } from '../../util/DragManager';
 import { CollectionDockingView } from '../collections/CollectionDockingView';
 library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp);