tried fixing label on link line

1 files changed, 86 insertions, 3 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index ae79c27e0..17f7e3128 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -21,8 +21,16 @@ export interface CollectionFreeFormLinkViewProps {
 export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFormLinkViewProps> {
     @observable _opacity: number = 0;
     _anchorDisposer: IReactionDisposer | undefined;
+
+    @observable descriptionText = StrCast(this.props.A.props.Document.description);
+    @observable down: boolean = false;
+    @observable downCoor: number[] = [0, 0];
+    @observable offset: number[] = [0, 0];
+
     @action
     componentDidMount() {
+        // document.addEventListener("pointerup", this.onUp);
+
         this._anchorDisposer = reaction(() => [this.props.A.props.ScreenToLocalTransform(), this.props.B.props.ScreenToLocalTransform(), this.props.A.isSelected() || Doc.IsBrushed(this.props.A.props.Document), this.props.A.isSelected() || Doc.IsBrushed(this.props.A.props.Document)],
             action(() => {
                 if (SnappingManager.GetIsDragging()) return;
@@ -82,10 +90,47 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
             })
             , { fireImmediately: true });
     }
+
+    @action
+    onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            this.setDescripValue(this.descriptionText);
+            document.getElementById('input')?.blur();
+        }
+    }
+
+    @action
+    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.descriptionText = e.target.value;
+    }
+
+    @action
+    setDescripValue = (value: string) => {
+        this.props.A.props.Document.description = value;
+        return true;
+    }
+
+    pointerDown = (e: React.PointerEvent) => {
+        this.down = true;
+        this.downCoor[0] = e.screenX;
+        this.downCoor[1] = e.screenY;
+    }
+
+    onUp = (e: React.PointerEvent) => {
+        if (this.down) {
+            this.offset[0] = e.screenX - this.downCoor[0];
+            this.offset[1] = e.screenY - this.downCoor[1];
+        }
+    }
+
+
     @action
     componentWillUnmount() {
         this._anchorDisposer?.();
+        //document.removeEventListener("pointerup", this.onUp);
     }
+
+
     render() {
         if (SnappingManager.GetIsDragging()) return null;
         this.props.A.props.ScreenToLocalTransform().transform(this.props.B.props.ScreenToLocalTransform());
@@ -110,11 +155,49 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         const pt2norm = [pt2vec[0] / pt2len * ptlen, pt2vec[1] / pt2len * ptlen];
         const aActive = this.props.A.isSelected() || Doc.IsBrushed(this.props.A.props.Document);
         const bActive = this.props.A.isSelected() || Doc.IsBrushed(this.props.A.props.Document);
-        const text = StrCast(this.props.A.props.Document.description);
+
+        const textX = (Math.min(pt1[0], pt2[0]) * 2 + Math.max(pt1[0], pt2[0])) / 3 + this.offset[0];
+        const textY = (pt1[1] + pt2[1]) / 2 + this.offset[1];
+
+        const circleStyle = {
+            padding: 10,
+            margin: 20,
+            display: "inline-block",
+            backgroundColor: "red",
+            borderRadius: "50%",
+            width: 100,
+            height: 100,
+            opacity: "30%",
+            border: "1px solid red",
+            top: textX + 50,
+            left: textY + 50
+        };
+
         return !a.width || !b.width || ((!this.props.LinkDocs.length || !this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<>
-            <text x={(Math.min(pt1[0], pt2[0]) * 2 + Math.max(pt1[0], pt2[0])) / 3} y={(pt1[1] + pt2[1]) / 2}>
-                {text}
+
+            {/* {this.down ? <div onPointerUp={this.onUp} style={circleStyle}></div> : null} */}
+
+            <text x={textX} y={textY} onPointerDown={this.pointerDown}
+                style={{ backgroundColor: "white", borderRadius: "6px", padding: "2px" }}>
+                {this.descriptionText}
             </text>
+
+            {/* <input
+                style={{
+                    width: "auto",
+                    position: "absolute",
+                    left: `${textX}px`,
+                    top: `${textY}px`,
+                    backgroundColor: "pink",
+                    borderRadius: "5px",
+                    zIndex: 1000
+                }}
+                id="input"
+                value={this.descriptionText}
+                onKeyDown={this.onKey}
+                onChange={this.handleChange}
+            ></input> */}
+
             <path className="collectionfreeformlinkview-linkLine" style={{ opacity: this._opacity, strokeDasharray: "2 2" }}
                 d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} />
         </>);