link menu styling

6 files changed, 66 insertions, 57 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7cef48b98..64032e096 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -90,7 +90,7 @@ export namespace DocUtils {
     // export function MakeLink(source: Doc, target: Doc, targetContext?: Doc, title: string = "", description: string = "", tags: string = "Default") {
     //     let protoSrc = source.proto ? source.proto : source;
     //     let protoTarg = target.proto ? target.proto : target;
-    export function MakeLink(source: Doc, target: Doc, targetContext?: Doc) {
+    export function MakeLink(source: Doc, target: Doc, targetContext?: Doc, title: string = "", description: string = "", tags: string = "Default") {
         if (LinkManager.Instance.doesLinkExist(source, target)) {
             console.log("LINK EXISTS"); return;
         }
@@ -99,9 +99,10 @@ export namespace DocUtils {
 
             let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 });
             let linkDocProto = Doc.GetProto(linkDoc);
-            // linkDocProto.title = title === "" ? source.title + " to " + target.title : title;
-            // linkDocProto.linkDescription = description;
-            // linkDocProto.linkTags = tags;
+
+            linkDocProto.title = title; //=== "" ? source.title + " to " + target.title : title;
+            linkDocProto.linkDescription = description;
+            linkDocProto.linkTags = tags;
 
             linkDocProto.anchor1 = source;
             linkDocProto.anchor1Page = source.curPage;
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 544f2edda..fef996bb9 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -3,6 +3,7 @@ import { StrCast, Cast } from "../../new_fields/Types";
 import { Doc, DocListCast } from "../../new_fields/Doc";
 import { listSpec } from "../../new_fields/Schema";
 import { List } from "../../new_fields/List";
+import { Id } from "../../new_fields/FieldSymbols";
 
 
 /* 
@@ -36,8 +37,13 @@ export class LinkManager {
 
     // finds all links that contain the given anchor
     public findAllRelatedLinks(anchor: Doc): Array<Doc> {
-        return LinkManager.Instance.allLinks.filter(
-            link => Doc.AreProtosEqual(anchor, Cast(link.anchor1, Doc, new Doc)) || Doc.AreProtosEqual(anchor, Cast(link.anchor2, Doc, new Doc)));
+        return LinkManager.Instance.allLinks.filter(link => {
+            let protomatch1 = Doc.AreProtosEqual(anchor, Cast(link.anchor1, Doc, new Doc));
+            let protomatch2 = Doc.AreProtosEqual(anchor, Cast(link.anchor2, Doc, new Doc));
+            let idmatch1 = StrCast(anchor[Id]) === StrCast(Cast(link.anchor1, Doc, new Doc)[Id]);
+            let idmatch2 = StrCast(anchor[Id]) === StrCast(Cast(link.anchor2, Doc, new Doc)[Id]);
+            return protomatch1 || protomatch2 || idmatch1 || idmatch2;
+        });
     }
 
     // returns map of group type to anchor's links in that group type
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index 154b4abe3..760887fa2 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -25,17 +25,22 @@
     }
 }
 
+.linkEditor-button {
+    width: 20px;
+    height: 20px;
+    margin-left: 6px;
+    padding: 0;
+    font-size: 12px;
+    border-radius: 10px;
+
+    &:disabled {
+        background-color: gray;
+    }
+}
+
 .linkEditor-groupsLabel {
     display: flex;
     justify-content: space-between;
-
-    button {
-        width: 20px;
-        height: 20px;
-        margin-left: 6px;
-        padding: 0;
-        font-size: 14px;
-    }
 }
 
 .linkEditor-group {
@@ -109,23 +114,20 @@
 .linkEditor-group-buttons {
     height: 20px;
     display: flex;
-    justify-content: space-between;
-
-    .linkEditor-groupOpts {
-        width: calc(20% - 3px);
-        height: 20px;
-        padding: 0;
-        font-size: 10px;
+    justify-content: flex-end;
 
-        &:disabled {
-            background-color: gray;
-        }
+    .linkEditor-button {
+        margin-left: 6px;
     }
 
-    .linkEditor-groupOpts button {
-        width: 100%;
-        height: 20px;
-        font-size: 10px;
-        padding: 0;
-    }
+    // .linkEditor-groupOpts {
+    //     width: calc(20% - 3px);
+    //     height: 20px;
+    //     padding: 0;
+    //     font-size: 10px;
+
+    //     &:disabled {
+    //         background-color: gray;
+    //     }
+    // }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 29ead7388..0d13c6cc8 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -7,12 +7,13 @@ import { Doc } from "../../../new_fields/Doc";
 import { LinkManager } from "../../util/LinkManager";
 import { Docs } from "../../documents/Documents";
 import { Utils } from "../../../Utils";
-import { faArrowLeft, faEllipsisV, faTable, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faArrowLeft, faEllipsisV, faTable, faTrash, faCog } from '@fortawesome/free-solid-svg-icons';
 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);
+library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog);
 
 
 interface GroupTypesDropdownProps {
@@ -256,9 +257,9 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
             let docs: Doc[] = LinkManager.Instance.findAllMetadataDocsInGroup(groupType);
             let createTable = action(() => Docs.SchemaDocument(["anchor1", "anchor2", ...keys!], docs, { width: 200, height: 200, title: groupType + " table" }));
             let ref = React.createRef<HTMLDivElement>();
-            return <div className="linkEditor-groupOpts" ref={ref}><button onPointerDown={SetupDrag(ref, createTable)}><FontAwesomeIcon icon="table" size="sm" /></button></div>;
+            return <div ref={ref}><button className="linkEditor-button" onPointerDown={SetupDrag(ref, createTable)}><FontAwesomeIcon icon="table" size="sm" /></button></div>;
         } else {
-            return <button className="linkEditor-groupOpts" disabled><FontAwesomeIcon icon="table" size="sm" /></button>;
+            return <button className="linkEditor-button" disabled><FontAwesomeIcon icon="table" size="sm" /></button>;
         }
     }
 
@@ -273,12 +274,20 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                     </div>
                     {this.renderMetadata(groupId)}
                     <div className="linkEditor-group-buttons">
-                        {groupDoc.type === "New Group" ? <button className="linkEditor-groupOpts" disabled={true} title="Add KVP">+</button> :
-                            <button className="linkEditor-groupOpts" onClick={() => this.addMetadata(StrCast(groupDoc.proto!.type))} title="Add KVP">+</button>}
-                        <button className="linkEditor-groupOpts" onClick={() => this.copyGroup(groupId, type)} title="Copy group to opposite anchor">↔</button>
-                        <button className="linkEditor-groupOpts" onClick={() => this.removeGroupFromLink(groupId, type)} title="Remove group from link">x</button>
-                        <button className="linkEditor-groupOpts" onClick={() => this.deleteGroup(groupId, type)} title="Delete group">xx</button>
+                        {groupDoc.type === "New Group" ? <button className="linkEditor-button" disabled={true} title="Add KVP">+</button> :
+                            <button className="linkEditor-button" onClick={() => this.addMetadata(StrCast(groupDoc.proto!.type))} title="Add KVP">+</button>}
                         {this.viewGroupAsTable(groupId, type)}
+                        <Flyout
+                            anchorPoint={anchorPoints.LEFT_TOP}
+                            content={
+                                <>
+                                    <button className="linkEditor-groupOpts" onClick={() => this.copyGroup(groupId, type)} title="Copy group to opposite anchor">↔</button>
+                                    <button className="linkEditor-groupOpts" onClick={() => this.removeGroupFromLink(groupId, type)} title="Remove group from link">x</button>
+                                    <button className="linkEditor-groupOpts" onClick={() => this.deleteGroup(groupId, type)} title="Delete group">xx</button>
+                                </>
+                            }>
+                            <button className="linkEditor-button" title="Delete group"><FontAwesomeIcon icon="cog" size="sm" /></button>
+                        </Flyout >
                     </div>
                 </div>
             );
@@ -290,6 +299,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
 
     @action
     addMetadata = (groupType: string): void => {
+        console.log("ADD MD");
         let mdKeys = LinkManager.Instance.groupMetadataKeys.get(groupType);
         if (mdKeys) {
             // only add "new key" if there is no other key with value "new key"; prevents spamming
@@ -331,11 +341,11 @@ 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" onPointerDown={() => this.deleteLink()} title="Delete link"><FontAwesomeIcon icon="trash" size="sm" /></button>
+                    <button className="linkEditor-delete linkEditor-button" onPointerDown={() => this.deleteLink()} title="Delete link"><FontAwesomeIcon icon="trash" size="sm" /></button>
                 </div>
                 <div className="linkEditor-groupsLabel">
                     <b>Relationships:</b>
-                    <button onClick={() => this.addGroup()} title="Add Group">+</button>
+                    <button className="linkEditor-button" onClick={() => this.addGroup()} title=" Add Group">+</button>
                 </div>
                 {groups.length > 0 ? groups : <div className="linkEditor-group">There are currently no relationships associated with this link.</div>}
             </div>
diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index 1ca669d00..ae3446e25 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -11,7 +11,6 @@
 }
 
 .linkMenu-group {
-    // margin-bottom: 10px;
     border-bottom: 0.5px solid lightgray; 
     padding: 5px 0;
 
@@ -30,10 +29,6 @@
             background-color: lightgray;
         }
     }
-
-    // .linkMenu-group-wrapper {
-    //     padding-top: 4px;
-    // }
 }
 
 
diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts
index 5ce47fc2f..fda788f2d 100644
--- a/src/new_fields/Doc.ts
+++ b/src/new_fields/Doc.ts
@@ -234,32 +234,27 @@ export namespace Doc {
     export function MakeCopy(doc: Doc, copyProto: boolean = false): Doc {
         const copy = new Doc;
         Object.keys(doc).forEach(key => {
+            console.log(key);
             const field = doc[key];
             if (key === "proto" && copyProto) {
+                console.log(1);
                 if (field instanceof Doc) {
+                    console.log(2);
                     copy[key] = Doc.MakeCopy(field);
                 }
             } else {
                 if (field instanceof RefField) {
+                    console.log(3);
                     copy[key] = field;
                 } else if (field instanceof ObjectField) {
+                    console.log(4);
                     copy[key] = ObjectField.MakeCopy(field);
                 } else {
+                    console.log(5);
                     copy[key] = field;
                 }
             }
         });
-        console.log("COPY", StrCast(doc.title));
-        let links = LinkManager.Instance.findAllRelatedLinks(doc);
-        links.forEach(linkDoc => {
-            let opp = LinkManager.Instance.findOppositeAnchor(linkDoc, doc);
-            console.log("OPP", StrCast(opp.title));
-            DocUtils.MakeLink(opp, copy);
-        });
-
-        LinkManager.Instance.allLinks.forEach(l => {
-            console.log("LINK", StrCast(Cast(l.anchor1, Doc, new Doc).title), StrCast(Cast(l.anchor2, Doc, new Doc).title));
-        });
 
         return copy;
     }