added linkRelationship to linkEditor. fixed warnings.

5 files changed, 71 insertions, 47 deletions

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 0cf958681..ae27e78d5 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -32,10 +32,6 @@ export class GestureOverlay extends Touchable {
     @observable public InkShape: string = "";
     @observable public SavedColor?: string;
     @observable public SavedWidth?: string;
-    @observable public SavedFill?: string;
-    @observable public SavedArrowStart: string = "none";
-    @observable public SavedArrowEnd: string = "none";
-    @observable public SavedDash: String = "0";
     @observable public Tool: ToolglassTools = ToolglassTools.None;
 
     @observable private _thumbX?: number;
@@ -653,15 +649,7 @@ export class GestureOverlay extends Touchable {
         } else {
             this._points = [];
         }
-        //get out of ink mode after each stroke=
-        if (CollectionFreeFormViewChrome.Instance && !CollectionFreeFormViewChrome.Instance?._keepPrimitiveMode) {
-            Doc.SetSelectedTool(InkTool.None);
-            CollectionFreeFormViewChrome.Instance._selectedPrimitive = CollectionFreeFormViewChrome.Instance._shapesPrimNum;
-            SetActiveArrowStart("none");
-            GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart();
-            SetActiveArrowEnd("none");
-            GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd();
-        }
+        CollectionFreeFormViewChrome.Instance.primCreated();
     }
 
     makePolygon = (shape: string, gesture: boolean) => {
@@ -969,13 +957,9 @@ Scripting.addGlobal(function setPen(width: any, color: any, fill: any, arrowStar
         SetActiveInkColor(color);
         GestureOverlay.Instance.SavedWidth = ActiveInkWidth();
         SetActiveInkWidth(width);
-        GestureOverlay.Instance.SavedFill = ActiveFillColor();
         SetActiveFillColor(fill);
-        GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart();
         SetActiveArrowStart(arrowStart);
-        GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd();
         SetActiveArrowStart(arrowEnd);
-        GestureOverlay.Instance.SavedDash = ActiveDash();
         SetActiveDash(dash);
     });
 });
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 4e2d81e61..7ba857449 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -25,7 +25,7 @@ import { undoBatch } from "../../util/UndoManager";
 import { AntimodeMenu, AntimodeMenuProps } from "../AntimodeMenu";
 import { EditableView } from "../EditableView";
 import { GestureOverlay } from "../GestureOverlay";
-import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "../InkingStroke";
+import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth, ActiveArrowStart, ActiveArrowEnd } from "../InkingStroke";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
 import { RichTextMenu } from "../nodes/formattedText/RichTextMenu";
@@ -591,12 +591,19 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     private _faName = ["pen-fancy", "minus", "long-arrow-alt-right", "arrows-alt-h", "square", "circle"];
     @observable _selectedPrimitive = this._shapePrims.length;
     @observable _keepPrimitiveMode = false; // for whether primitive selection enters a one-shot or persistent mode
-
     @observable _colorBtn = false;
     @observable _widthBtn = false;
     @observable _fillBtn = false;
 
     @action clearKeepPrimitiveMode() { this._selectedPrimitive = this._shapePrims.length; }
+    @action primCreated() {
+        if (!this._keepPrimitiveMode) { //get out of ink mode after each stroke=
+            Doc.SetSelectedTool(InkTool.None);
+            this._selectedPrimitive = this._shapePrims.length;
+            SetActiveArrowStart("none");
+            SetActiveArrowEnd("none");
+        }
+    }
 
     @action
     changeColor = (color: string, type: string) => {
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 435b9d904..f74b422d3 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -4,7 +4,6 @@ import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../fields/Doc";
 import { DateCast, StrCast } from "../../../fields/Types";
-import { Utils } from "../../../Utils";
 import { LinkManager } from "../../util/LinkManager";
 import { undoBatch } from "../../util/UndoManager";
 import './LinkEditor.scss';
@@ -21,31 +20,41 @@ interface LinkEditorProps {
 export class LinkEditor extends React.Component<LinkEditorProps> {
 
     @observable description = StrCast(LinkManager.currentLink?.description);
+    @observable relationship = StrCast(LinkManager.currentLink?.linkRelationship);
     @observable openDropdown: boolean = false;
     @observable showInfo: boolean = false;
     @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; }
     @observable private buttonColor: string = "";
-
+    @observable private relationshipButtonColor: string = "";
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
 
-    @undoBatch @action
+    @undoBatch
     deleteLink = (): void => {
         LinkManager.Instance.deleteLink(this.props.linkDoc);
         this.props.showLinks();
     }
 
-    @undoBatch @action
-    setDescripValue = (value: string) => {
+    @undoBatch
+    setRelationshipValue = action((value: string) => {
+        if (LinkManager.currentLink) {
+            LinkManager.currentLink.linkRelationship = value;
+            this.relationshipButtonColor = "rgb(62, 133, 55)";
+            setTimeout(action(() => this.relationshipButtonColor = ""), 750);
+            return true;
+        }
+    });
+
+    @undoBatch
+    setDescripValue = action((value: string) => {
         if (LinkManager.currentLink) {
             LinkManager.currentLink.description = value;
             this.buttonColor = "rgb(62, 133, 55)";
             setTimeout(action(() => this.buttonColor = ""), 750);
             return true;
         }
-    }
+    });
 
-    @action
     onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Enter") {
             this.setDescripValue(this.description);
@@ -53,22 +62,48 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         }
     }
 
-    @action
-    onDown = () => {
-        this.setDescripValue(this.description);
+    onRelationshipKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            this.setRelationshipValue(this.relationship);
+            document.getElementById('input')?.blur();
+        }
     }
 
+    onDown = () => this.setDescripValue(this.description);
+    onRelationshipDown = () => this.setRelationshipValue(this.description);
+
     @action
-    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.description = e.target.value;
-    }
+    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; }
+    @action
+    handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.relationship = e.target.value; }
 
+    @computed
+    get editRelationship() {
+        return <div className="linkEditor-description">
+            <div className="linkEditor-description-label">Link Relationship:</div>
+            <div className="linkEditor-description-input">
+                <div className="linkEditor-description-editing">
+                    <input
+                        style={{ width: "100%" }}
+                        id="input"
+                        value={this.relationship}
+                        placeholder={"enter link label"}
+                        // color={"rgb(88, 88, 88)"}
+                        onKeyDown={this.onRelationshipKey}
+                        onChange={this.handleRelationshipChange}
+                    ></input>
+                </div>
+                <div className="linkEditor-description-add-button"
+                    style={{ background: this.relationshipButtonColor }}
+                    onPointerDown={this.onRelationshipDown}>Set</div>
+            </div>
+        </div>;
+    }
 
     @computed
     get editDescription() {
         return <div className="linkEditor-description">
-            <div className="linkEditor-description-label">
-                Link Label:</div>
+            <div className="linkEditor-description-label">Link Description:</div>
             <div className="linkEditor-description-input">
                 <div className="linkEditor-description-editing">
                     <input
@@ -84,13 +119,12 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                 <div className="linkEditor-description-add-button"
                     style={{ background: this.buttonColor }}
                     onPointerDown={this.onDown}>Set</div>
-            </div></div>;
+            </div>
+        </div>;
     }
 
     @action
-    changeDropdown = () => {
-        this.openDropdown = !this.openDropdown;
-    }
+    changeDropdown = () => { this.openDropdown = !this.openDropdown; }
 
     @undoBatch
     changeFollowBehavior = action((follow: string) => {
@@ -101,8 +135,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @computed
     get followingDropdown() {
         return <div className="linkEditor-followingDropdown">
-            <div className="linkEditor-followingDropdown-label">
-                Follow Behavior:</div>
+            <div className="linkEditor-followingDropdown-label">Follow Behavior:</div>
             <div className="linkEditor-followingDropdown-dropdown">
                 <div className="linkEditor-followingDropdown-header"
                     onPointerDown={this.changeDropdown}>
@@ -157,9 +190,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     }
 
     @action
-    changeInfo = () => {
-        this.showInfo = !this.showInfo;
-    }
+    changeInfo = () => { this.showInfo = !this.showInfo; }
 
     render() {
         const destination = LinkManager.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc);
@@ -186,8 +217,9 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                         {DateCast(this.props.linkDoc.creationDate).toString()}</div> : null}</div>
                 </div> : null}
 
-                <div>{this.editDescription}</div>
-                <div>{this.followingDropdown}</div>
+                {this.editDescription}
+                {this.editRelationship}
+                {this.followingDropdown}
             </div>
 
         );
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 438395ab0..352abd1e7 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -256,6 +256,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         } catch (e) {
             console.log("WebBox URL error:" + this._url);
         }
+        return true;
     }
 
     editToggleBtn() {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 8b1e58ceb..b3abcf90a 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -67,7 +67,7 @@ import { StyleProp } from '../../StyleProvider';
 import { AnchorMenu } from '../../pdf/AnchorMenu';
 import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
 import { DocumentManager } from '../../../util/DocumentManager';
-const translateGoogleApi = require("translate-google-api")
+const translateGoogleApi = require("translate-google-api");
 
 export interface FormattedTextBoxProps {
     makeLink?: () => Opt<Doc>;  // bcz: hack: notifies the text document when the container has made a link.  allows the text doc to react and setup a hyeprlink for any selected text
@@ -947,7 +947,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                             this.tryUpdateHeight();
                         }
                     } else if (incomingValue?.str) {
-                        selectAll(this._editorView!.state, tx => this._editorView?.dispatch(tx.insertText(incomingValue.str)));
+                        selectAll(this._editorView.state, tx => this._editorView?.dispatch(tx.insertText(incomingValue.str)));
                     }
                 }
             },