From 536cd22988407ab86099595daa4ffe4f054b2914 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 7 Feb 2024 22:43:00 -0500
Subject: fixed icon placement in linkMenuItem.

---
 src/client/views/PropertiesView.tsx        | 49 ++++++++++++++++--------------
 src/client/views/linking/LinkMenuItem.scss | 32 +++++++++----------
 src/client/views/linking/LinkMenuItem.tsx  | 14 ++++-----
 src/client/views/nodes/LinkBox.tsx         | 16 +++++-----
 4 files changed, 58 insertions(+), 53 deletions(-)

(limited to 'src')

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 3ae2362a1..e4e7bec32 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -41,6 +41,7 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView';
 import { StyleProviderFuncType } from './nodes/FieldView';
 import { KeyValueBox } from './nodes/KeyValueBox';
 import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
+import { LinkBox } from './nodes/LinkBox';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 interface PropertiesViewProps {
@@ -69,6 +70,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.Document || Doc.ActiveDashboard;
     }
 
+    @computed get selectedLink() {
+        return this.selectedDocumentView?.ComponentView instanceof LinkBox ? this.selectedDocumentView.Document : LinkManager.Instance.currentLink;
+    }
+
     @computed get selectedLayoutDoc() {
         return SelectionManager.SelectedSchemaDoc || this.selectedDocumentView?.layoutDoc || Doc.ActiveDashboard;
     }
@@ -110,7 +115,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
 
     componentDidMount() {
         this._disposers.link = reaction(
-            () => LinkManager.Instance.currentLink,
+            () => this.selectedLink,
             link => {
                 link && this.CloseAll();
                 link && (this.openLinks = true);
@@ -583,11 +588,11 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                         </>
                     </p>
                 ) : null}
-                {LinkManager.Instance.currentLink?.title ? (
+                {this.selectedLink?.title ? (
                     <p className="propertiesView-titleExtender">
                         <>
                             <b>Link:</b>
-                            {LinkManager.Instance.currentLink.title}
+                            {this.selectedLink.title}
                         </>
                     </p>
                 ) : null}
@@ -1190,10 +1195,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     }
 
     @computed get description() {
-        return Field.toString(LinkManager.Instance.currentLink?.link_description as any as Field);
+        return Field.toString(this.selectedLink?.link_description as any as Field);
     }
     @computed get relationship() {
-        return StrCast(LinkManager.Instance.currentLink?.link_relationship);
+        return StrCast(this.selectedLink?.link_relationship);
     }
     @observable private relationshipButtonColor: string = '';
 
@@ -1203,7 +1208,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
 
     handleDescriptionChange = undoable(
         action((value: string) => {
-            if (LinkManager.Instance.currentLink && this.selectedDoc) {
+            if (this.selectedLink) {
                 this.setDescripValue(value);
             }
         }),
@@ -1212,7 +1217,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
 
     handlelinkRelationshipChange = undoable(
         action((value: string) => {
-            if (LinkManager.Instance.currentLink && this.selectedDoc) {
+            if (this.selectedLink) {
                 this.setlinkRelationshipValue(value);
             }
         }),
@@ -1221,17 +1226,17 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
 
     @undoBatch
     setDescripValue = action((value: string) => {
-        if (LinkManager.Instance.currentLink) {
-            Doc.GetProto(LinkManager.Instance.currentLink).link_description = value;
+        if (this.selectedLink) {
+            this.selectedLink[DocData].link_description = value;
         }
     });
 
     @undoBatch
     setlinkRelationshipValue = action((value: string) => {
-        if (LinkManager.Instance.currentLink) {
-            const prevRelationship = StrCast(LinkManager.Instance.currentLink.link_relationship);
-            LinkManager.Instance.currentLink.link_relationship = value;
-            Doc.GetProto(LinkManager.Instance.currentLink).link_relationship = value;
+        if (this.selectedLink) {
+            const prevRelationship = StrCast(this.selectedLink.link_relationship);
+            this.selectedLink.link_relationship = value;
+            Doc.GetProto(this.selectedLink).link_relationship = value;
             const linkRelationshipList = StrListCast(Doc.UserDoc().link_relationshipList);
             const linkRelationshipSizes = NumListCast(Doc.UserDoc().link_relationshipSizes);
             const linkColorList = StrListCast(Doc.UserDoc().link_ColorList);
@@ -1315,11 +1320,11 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     };
 
     toggleLinkProp = (e: React.PointerEvent, prop: string) => {
-        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.currentLink && (LinkManager.Instance.currentLink[prop] = !LinkManager.Instance.currentLink[prop]))));
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedLink && (this.selectedLink[prop] = !this.selectedLink[prop]))));
     };
 
     @computed get destinationAnchor() {
-        const ldoc = LinkManager.Instance.currentLink;
+        const ldoc = this.selectedLink;
         const lanch = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.Instance.currentLinkAnchor;
         if (ldoc && lanch) return LinkManager.getOppositeAnchor(ldoc, lanch) ?? lanch;
         return ldoc ? DocCast(ldoc.link_anchor_2) : ldoc;
@@ -1328,7 +1333,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     @computed get sourceAnchor() {
         const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.Instance.currentLinkAnchor;
 
-        return selAnchor ?? (LinkManager.Instance.currentLink && this.destinationAnchor ? LinkManager.getOppositeAnchor(LinkManager.Instance.currentLink, this.destinationAnchor) : LinkManager.Instance.currentLink);
+        return selAnchor ?? (this.selectedLink && this.destinationAnchor ? LinkManager.getOppositeAnchor(this.selectedLink, this.destinationAnchor) : this.selectedLink);
     }
 
     toggleAnchorProp = (e: React.PointerEvent, prop: string, anchor?: Doc, value: any = true, ovalue: any = false, cb: (val: any) => any = val => val) => {
@@ -1354,7 +1359,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                 style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
                 autoComplete={'off'}
                 id="link_relationship_input"
-                value={StrCast(LinkManager.Instance.currentLink?.link_relationship)}
+                value={StrCast(this.selectedLink?.link_relationship)}
                 onKeyDown={this.onRelationshipKey}
                 onBlur={this.onSelectOutRelationship}
                 onChange={e => this.handlelinkRelationshipChange(e.currentTarget.value)}
@@ -1371,7 +1376,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                 autoComplete="off"
                 style={{ textAlign: 'left', color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
                 id="link_description_input"
-                value={StrCast(LinkManager.Instance.currentLink?.link_description)}
+                value={StrCast(this.selectedLink?.link_description)}
                 onKeyDown={this.onDescriptionKey}
                 onBlur={this.onSelectOutDesc}
                 onChange={e => this.handleDescriptionChange(e.currentTarget.value)}
@@ -1393,7 +1398,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
         const zoom = Number((NumCast(this.sourceAnchor?.followLinkZoomScale, 1) * 100).toPrecision(3));
         const targZoom = this.sourceAnchor?.followLinkZoom;
         const indent = 30;
-        const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.Instance.currentLink!);
+        const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(this.selectedLink!);
 
         return (
             <>
@@ -1424,7 +1429,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                                 <option value={OpenWhere.add}>Opening in new tab</option>
                                 <option value={OpenWhere.replace}>Replacing current tab</option>
                                 <option value={OpenWhere.inParent}>Opening in same collection</option>
-                                {LinkManager.Instance.currentLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
+                                {this.selectedLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
                             </select>
                         </div>
                         <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}>
@@ -1609,7 +1614,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
 
     render() {
         const isNovice = Doc.noviceMode;
-        const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.Instance.currentLink!);
+        const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(this.selectedLink!);
         if (!this.selectedDoc && !this.isPres) {
             return (
                 <div className="propertiesView" style={{ width: this._props.width }}>
@@ -1643,7 +1648,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                         {this.fieldsSubMenu}
                         {this.optionsSubMenu}
                         {this.linksSubMenu}
-                        {!LinkManager.Instance.currentLink || !this.openLinks ? null : this.linkProperties}
+                        {!this.selectedLink || !this.openLinks ? null : this.linkProperties}
                         {this.inkSubMenu}
                         {this.contextsSubMenu}
                         {isNovice ? null : this.sharingSubMenu}
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 44c74236f..66ddd6eca 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -18,6 +18,21 @@
         align-items: center;
         display: flex;
 
+        .linkMenu-icon-wrapper {
+            //border: 0.5px solid rgb(161, 161, 161);
+            margin-right: 2px;
+            padding-right: 2px;
+
+            .linkMenu-icon {
+                float: left;
+                width: 12px;
+                height: 12px;
+                padding: 1px;
+                margin-right: 3px;
+                // color: rgb(161, 161, 161);
+            }
+        }
+
         .linkMenu-text {
             width: 100%;
 
@@ -34,22 +49,6 @@
                 display: flex;
                 align-items: center;
                 min-height: 20px;
-
-                .destination-icon-wrapper {
-                    //border: 0.5px solid rgb(161, 161, 161);
-                    margin-right: 2px;
-                    padding-right: 2px;
-
-                    .destination-icon {
-                        float: left;
-                        width: 12px;
-                        height: 12px;
-                        padding: 1px;
-                        margin-right: 3px;
-                        // color: rgb(161, 161, 161);
-                    }
-                }
-
                 .linkMenu-destination-title {
                     text-decoration: none;
                     font-size: 13px;
@@ -111,7 +110,6 @@
     //@extend: right;
     position: relative;
     display: flex;
-    opacity: 0;
 
     .linkMenu-deleteButton {
         width: 20px;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index a44ad26cd..e694806a5 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -178,8 +178,13 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
                         onPointerDown={this.onLinkButtonDown}>
                         <div className="linkMenu-item-buttons">
                             <Tooltip title={<div className="dash-tooltip">Edit Link</div>}>
-                                <div className="button" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
-                                    <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" />
+                                <div className="linkMenu-icon-wrapper" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
+                                    <FontAwesomeIcon className="linkMenu-icon" icon="edit" size="sm" />
+                                </div>
+                            </Tooltip>
+                            <Tooltip title={<div className="dash-tooltip">Show/Hide Link</div>}>
+                                <div title="click to show link" className="linkMenu-icon-wrapper" onPointerDown={this.onIconDown}>
+                                    <FontAwesomeIcon className="linkMenu-icon" icon={destinationIcon} size="sm" />
                                 </div>
                             </Tooltip>
                         </div>
@@ -206,11 +211,6 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> {
                                 </p>
                             ) : null}
                             <div className="linkMenu-title-wrapper">
-                                <Tooltip title={<div className="dash-tooltip">Show/Hide Link</div>}>
-                                    <div title="click to show link" className="destination-icon-wrapper" onPointerDown={this.onIconDown}>
-                                        <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" />
-                                    </div>
-                                </Tooltip>
                                 <Tooltip title={<div className="dash-tooltip">Follow Link</div>}>
                                     <p className="linkMenu-destination-title">
                                         {this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)}
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 998f4f7aa..decdbb240 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -23,7 +23,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return FieldView.LayoutString(LinkBox, fieldKey);
     }
     disposer: IReactionDisposer | undefined;
-    @observable _forceAnimate = 0; // forces xArrow to animate when a transition is detected on something that affects an anchor
+    @observable _forceAnimate = 0; // forces xArrow to animate when a transition animation is detected on something that affects an anchor
     @observable _hide = false; // don't render if anchor is not visible since that breaks xAnchor
 
     constructor(props: FieldViewProps) {
@@ -38,22 +38,26 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const anchor = anch?.layout_unrendered ? DocCast(anch.annotationOn) : anch;
         return DocumentManager.Instance.getDocumentView(anchor, this.DocumentView?.().containerViewPath?.().lastElement());
     };
-    componentWillUnmount(): void {
+    componentWillUnmount() {
         this.disposer?.();
     }
     componentDidMount() {
         this._props.setContentViewBox?.(this);
         this.disposer = reaction(
-            () => ({ drag: SnappingManager.IsDragging, a: this.anchor1, b: this.anchor2 }),
-            ({ drag, a, b }) => {
+            () => ({ drag: SnappingManager.IsDragging }),
+            ({ drag }) => {
                 !LightboxView.Contains(this.DocumentView?.()) &&
                     setTimeout(
-                        // need to wait for drag manager to set 'hidden' flag on dragged elements
+                        // need to wait for drag manager to set 'hidden' flag on dragged DOM elements
                         action(() => {
+                            const a = this.anchor1,
+                                b = this.anchor2;
                             let a1 = a && document.getElementById(a.Guid);
                             let a2 = b && document.getElementById(b.Guid);
+                            // test whether the anchors themselves are hidden,...
                             if (!a1 || !a2 || (a?.ContentDiv as any)?.hidden || (b?.ContentDiv as any)?.hidden) this._hide = true;
                             else {
+                                // .. or whether and of their DOM parents are hidden
                                 for (; a1 && !a1.hidden; a1 = a1.parentElement);
                                 for (; a2 && !a2.hidden; a2 = a2.parentElement);
                                 this._hide = a1 || a2 ? true : false;
@@ -65,8 +69,6 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
         );
     }
 
-    select = (ctrlKey: boolean, shiftKey: boolean) => (LinkManager.Instance.currentLink = this.Document);
-
     render() {
         if (this._hide) return null;
         const a = this.anchor1;
-- 
cgit v1.2.3-70-g09d2