working on link relationships

1 files changed, 110 insertions, 12 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index d65db3a6b..dd6e0e3e7 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -6,7 +6,7 @@ import { intersection } from "lodash";
 import { action, autorun, computed, Lambda, observable } from "mobx";
 import { observer } from "mobx-react";
 import { ColorState, SketchPicker } from "react-color";
-import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, AclSelfEdit, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, Opt, WidthSym } from "../../fields/Doc";
+import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, AclSelfEdit, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, NumListCast, Opt, StrListCast, WidthSym } from "../../fields/Doc";
 import { Id } from "../../fields/FieldSymbols";
 import { InkField } from "../../fields/InkField";
 import { List } from "../../fields/List";
@@ -1079,14 +1079,86 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @observable
     description = Field.toString(LinkManager.currentLink?.description as any as Field);
+    // @observable
+    // linkRelationship = Field.toString(LinkManager.currentLink?.linkRelationship as any as Field);
+    @observable relationship = StrCast(LinkManager.currentLink?.linkRelationship);
+    @observable
+    private relationshipButtonColor: string = "";
 
-    @action
-    handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
+    // @action
+    // handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
+    // handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.relationship = e.target.value; }
+
+    @undoBatch
+    handleDescriptionChange = action((value: string) => {
+        if (LinkManager.currentLink) {
+            // this.description = value;
+            console.log("changing description to " + value)
+            this.selectedDoc.description = value;
+            return true;
+        }
+    });
+
+    @undoBatch
+    handleLinkRelationshipChange = action((value: string) => {
+        if (LinkManager.currentLink) {
+            // this.relationship = value;
+            console.log("changing linkRelationship to " + value)
+            this.selectedDoc.relationship = value;
+            return true;
+        }
+    });
 
     @undoBatch
     setDescripValue = action((value: string) => {
         if (LinkManager.currentLink) {
             Doc.GetProto(LinkManager.currentLink).description = value;
+            console.log("the link description was set to " + Doc.GetProto(LinkManager.currentLink).description)
+            // this.selectedDoc.description = value;
+            // this.description = value;
+            return true;
+        }
+    });
+
+    @undoBatch
+    setLinkRelationshipValue = action((value: string) => {
+        if (LinkManager.currentLink) {
+            const prevRelationship = LinkManager.currentLink.linkRelationship as string;
+            LinkManager.currentLink.linkRelationship = value;
+            Doc.GetProto(LinkManager.currentLink).linkRelationship = value;
+            const linkRelationshipList = StrListCast(Doc.UserDoc().linkRelationshipList);
+            const linkRelationshipSizes = NumListCast(Doc.UserDoc().linkRelationshipSizes);
+            const linkColorList = StrListCast(Doc.UserDoc().linkColorList);
+
+            // if the relationship does not exist in the list, add it and a corresponding unique randomly generated color 
+            if (!linkRelationshipList?.includes(value)) {
+                linkRelationshipList.push(value);
+                linkRelationshipSizes.push(1);
+                const randColor = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
+                linkColorList.push(randColor);
+                // if the relationship is already in the list AND the new rel is different from the prev rel, update the rel sizes
+            } else if (linkRelationshipList && value !== prevRelationship) {
+                const index = linkRelationshipList.indexOf(value);
+                //increment size of new relationship size
+                if (index !== -1 && index < linkRelationshipSizes.length) {
+                    const pvalue = linkRelationshipSizes[index];
+                    linkRelationshipSizes[index] = (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue + 1);
+                }
+                //decrement the size of the previous relationship if it already exists (i.e. not default 'link' relationship upon link creation)
+                if (linkRelationshipList.includes(prevRelationship)) {
+                    const pindex = linkRelationshipList.indexOf(prevRelationship);
+                    if (pindex !== -1 && pindex < linkRelationshipSizes.length) {
+                        const pvalue = linkRelationshipSizes[pindex];
+                        linkRelationshipSizes[pindex] = Math.max(0, (pvalue === undefined || !Number.isFinite(pvalue) ? 1 : pvalue - 1));
+                    }
+                }
+
+            }
+            this.relationshipButtonColor = "rgb(62, 133, 55)";
+            console.log("the linkRelationship was set to " + Doc.GetProto(LinkManager.currentLink).linkRelationship)
+            // this.selectedDoc.relationship = value;
+            // this.relationship = value;
+            setTimeout(action(() => this.relationshipButtonColor = ""), 750);
             return true;
         }
     });
@@ -1099,15 +1171,27 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         }
     });
 
-    onSelectOut = () => {
+    onSelectOutDesc = () => {
         this.setDescripValue(this.description);
-        document.getElementById('input')?.blur();
+        document.getElementById('link_description_input')?.blur();
     }
 
     onDescriptionKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Enter") {
             this.setDescripValue(this.description);
-            document.getElementById('input')?.blur();
+            document.getElementById('link_description_input')?.blur();
+        }
+    }
+
+    onSelectOutRelationship = () => {
+        this.setLinkRelationshipValue(this.relationship);
+        document.getElementById('link_relationship_input')?.blur();
+    }
+
+    onRelationshipKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            this.setLinkRelationshipValue(this.relationship);
+            document.getElementById('link_relationship_input')?.blur();
         }
     }
 
@@ -1116,14 +1200,28 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed
+    get editRelationship() {
+        return <input
+            autoComplete={"off"}
+            id="link_relationship_input"
+            value={StrCast(this.selectedDoc.relationship)}
+            onKeyDown={this.onRelationshipKey}
+            onBlur={this.onSelectOutRelationship}
+            onChange={e => this.handleLinkRelationshipChange(e.currentTarget.value)}
+            className="text"
+            type="text"
+        />
+    }
+
+    @computed
     get editDescription() {
         return <input
             autoComplete={"off"}
-            id="input"
-            value={this.description}
+            id="link_description_input"
+            value={StrCast(this.selectedDoc.description)}
             onKeyDown={this.onDescriptionKey}
-            onBlur={this.onSelectOut}
-            onChange={this.handleDescriptionChange}
+            onBlur={this.onSelectOutDesc}
+            onChange={e => this.handleDescriptionChange(e.currentTarget.value)}
             className="text"
             type="text"
         />
@@ -1158,8 +1256,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="propertiesView-section">
                         <p className="propertiesView-label">Information</p>
                         <div className="propertiesView-input first" id="propertiesView-category">
-                            <p>Category</p>
-                            <input className="text" type="text" />
+                            <p>Link Relationship</p>
+                            {this.editRelationship}
                         </div>
                         <div className="propertiesView-input" id="propertiesView-description">
                             <p>Description</p>