1 files changed, 32 insertions, 17 deletions

diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 7ade846e7..07511d0ec 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -1,10 +1,10 @@
 import { Bezier } from 'bezier-js';
-import { computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Id } from '../../../fields/FieldSymbols';
 import { DocCast, NumCast, StrCast } from '../../../fields/Types';
-import { aggregateBounds, emptyFunction, returnAlways, returnFalse, setupMoveUpEvents, Utils } from '../../../Utils';
+import { aggregateBounds, emptyFunction, lightOrDark, returnAlways, returnFalse, setupMoveUpEvents, Utils } from '../../../Utils';
 import { DocumentManager } from '../../util/DocumentManager';
 import { Transform } from '../../util/Transform';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm';
@@ -110,21 +110,33 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
             { fireImmediately: true }
         );
     }
+
+    select = (ctrlKey: boolean, shiftKey: boolean) => {
+        LinkManager.Instance.currentLink = this.Document;
+    };
+
     descriptionDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, returnFalse, returnFalse, () => {
-            LinkManager.Instance.currentLink = this.Document;
-            LinkDescriptionPopup.Instance.popupX = e.clientX;
-            LinkDescriptionPopup.Instance.popupY = e.clientY;
-            LinkDescriptionPopup.Instance.display = true;
+        setupMoveUpEvents(
+            this,
+            e,
+            returnFalse,
+            returnFalse,
+            () => {
+                LinkManager.Instance.currentLink = this.Document;
+                LinkDescriptionPopup.Instance.popupX = e.clientX;
+                LinkDescriptionPopup.Instance.popupY = e.clientY;
+                LinkDescriptionPopup.Instance.display = true;
 
-            const rect = document.body.getBoundingClientRect();
-            if (LinkDescriptionPopup.Instance.popupX + 200 > rect.width) {
-                LinkDescriptionPopup.Instance.popupX -= 190;
-            }
-            if (LinkDescriptionPopup.Instance.popupY + 100 > rect.height) {
-                LinkDescriptionPopup.Instance.popupY -= 40;
-            }
-        });
+                const rect = document.body.getBoundingClientRect();
+                if (LinkDescriptionPopup.Instance.popupX + 200 > rect.width) {
+                    LinkDescriptionPopup.Instance.popupX -= 190;
+                }
+                if (LinkDescriptionPopup.Instance.popupY + 100 > rect.height) {
+                    LinkDescriptionPopup.Instance.popupY -= 40;
+                }
+            },
+            false
+        );
     };
     componentWillUnmount(): void {
         this.disposer?.();
@@ -134,12 +146,15 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (this.renderProps) {
             const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting);
             const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : undefined;
+            const fontFamily = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily);
+            const fontSize = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize);
+            const color = (c => (c !== 'transparent' ? c : undefined))(StrCast(this.layoutDoc.link_fontColor));
 
             const { pts, lx, ty, rx, by } = this.renderProps;
             const bez = new Bezier(pts.map(p => ({ x: p[0] - lx, y: p[1] - ty })));
             const { x, y } = bez.get(0.5);
             const linkDesc = StrCast(this.dataDoc.link_description) || ' ';
-            const strokeWidth = NumCast(this.dataDoc.stroke_width, 4);
+            const strokeWidth = NumCast(this.Document.stroke_width, 4);
             const dash = StrCast(this.Document.stroke_dash);
             const strokeDasharray = dash && Number(dash) ? String(strokeWidth * Number(dash)) : undefined;
             const pointerEvents = this._props.pointerEvents?.() === 'none' ? 'none' : 'all';
@@ -175,7 +190,7 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 style={{ pointerEvents, background: stroke }}
                                 x={x}
                                 y={y}>
-                                <tspan style={{ background: stroke }}>&nbsp;{linkDesc.substring(0, 50) + (linkDesc.length > 50 ? '...' : '')}&nbsp;</tspan>
+                                <tspan style={{ fontSize, fontFamily, strokeWidth: 0, background: stroke, fill: color || lightOrDark(stroke) }}>&nbsp;{linkDesc.substring(0, 50) + (linkDesc.length > 50 ? '...' : '')}&nbsp;</tspan>
                             </text>
                         )}
                     </svg>