interaction: Implement user-created edges

The user can create edges by dragging from a handle to another (or node)
Config options to allow this must be set

Author: rChaoz

examples/src/App.tsx

@@ -11,15 +11,19 @@ const nodes: NewNode[] = [
 ]
 
 const edges: NewEdge[] = [
-    {id: "0", source: "1", target: "0", label: "hehe", markerStart: "arrow", markerEnd: "arrow-filled"},
-    {id: "1", source: "0", target: "2", label: "hihi", markerEnd: "arrow", targetHandle: null},
-    {id: "2", source: "3", target: "2", label: "a", markerEnd: "arrow"},
-    {id: "3", source: "2", target: "3", label: "b", markerEnd: "arrow"},
+    {id: "0", source: "1", target: "0", label: "hehe", markerStart: "arrow-filled", markerEnd: "arrow-filled"},
+    {id: "1", source: "0", target: "2", label: "hihi", targetHandle: null},
+    {id: "2", source: "3", target: "2", label: "a"},
+    {id: "3", source: "2", target: "3", label: "b"},
 ]
 
 const config: GrapherConfig = {
     nodeDefaults: {
         handlePointerEvents: true,
+        allowGrabbingHandles: true,
+        allowNewEdgesFromHandles: true,
+        allowNewEdgeTarget: true,
+        allowNewEdgeTargetForHandles: true,
     },
     edgeDefaults: {
     }

src/components/BaseEdge.tsx

@@ -1,7 +1,7 @@
-import React, {useContext, useEffect, useRef} from "react";
+import React, {SVGProps, useContext, useEffect, useRef} from "react";
 import {InternalContext} from "../context/InternalContext";
 import {cx} from "@emotion/css";
-import {EDGE_CLASS, EDGE_HANDLE_CLASS, EDGE_LABEL_BACKGROUND_CLASS, EDGE_LABEL_CLASS, EDGE_PATH_CLASS} from "../util/constants";
+import {EDGE_CLASS, EDGE_HANDLE_CLASS, EDGE_IN_PROGRESS_CLASS, EDGE_LABEL_BACKGROUND_CLASS, EDGE_LABEL_CLASS, EDGE_PATH_CLASS} from "../util/constants";
 import {errorUnknownEdge, warnInvalidPropValue} from "../util/log";
 // Used by documentation
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -49,6 +49,10 @@ export interface BaseEdgeProps {
      * Label rotation angle.
      */
     labelAngle: number
+    /**
+     * Label background border radius
+     */
+    labelBackgroundRadius: NonNullable<SVGProps<SVGRectElement>["rx"]>
     /**
      * Whether this edge is selected
      */
@@ -69,10 +73,15 @@ export interface BaseEdgeProps {
      * Whether to enable pointer events for this edge.
      */
     pointerEvents: boolean
+    /**
+     * Whether this is an in-progress edge (i.e. currently being created by the user by dragging from a node handle).
+     * This will swap the base class "react-grapher-edge", on the root element, for "react-grapher-edge-in-progress".
+     */
+    inProgress?: boolean
 }
 
-export function BaseEdge({id, path, classes, boxWidth, label, labelPosition, labelOffset, labelAnchor, labelBaseline, labelAngle,
-                             selected, grabbed, markerStart, markerEnd, pointerEvents} : BaseEdgeProps) {
+export function BaseEdge({id, path, classes, boxWidth, label, labelPosition, labelOffset, labelAnchor, labelBaseline, labelAngle, labelBackgroundRadius,
+                             selected, grabbed, markerStart, markerEnd, pointerEvents, inProgress} : BaseEdgeProps) {
     const internals = useContext(InternalContext)
 
     // Ref to the Edge <g> and <path> elements
@@ -81,7 +90,7 @@ export function BaseEdge({id, path, classes, boxWidth, label, labelPosition, lab
     const labelRef = useRef<SVGTextElement>(null), labelBgRef = useRef<SVGRectElement>(null)
     // Get internal edge object
     const edge = internals.getEdge(id)
-    if (edge == null) errorUnknownEdge(id)
+    if (edge == null && !inProgress) errorUnknownEdge(id)
 
     // Set listeners
     useEffect(() => {
@@ -146,19 +155,19 @@ export function BaseEdge({id, path, classes, boxWidth, label, labelPosition, lab
             labelBg.setAttribute("y", String(labelBounds.y - p))
             labelBg.setAttribute("width", String(labelBounds.width + p * 2))
             labelBg.setAttribute("height", String(labelBounds.height + p * 2))
-        } else console.log({labelElem, labelBg, path, label})
+        }
 
     }, [internals, edge, id, path, grabbed, selected, label, labelPosition, labelOffset, labelAngle])
 
     const baseID = internals.id
-    return <g ref={ref} id={`${baseID}-edge-${id}`} className={cx(classes, EDGE_CLASS)} pointerEvents={!pointerEvents || internals.isStatic ? "none" : "stroke"}
-                  data-grabbed={grabbed} data-selected={selected} data-id={id} data-type={"edge"}>
+    return <g ref={ref} id={`${baseID}-edge-${id}`} className={cx(classes, inProgress ? EDGE_IN_PROGRESS_CLASS : EDGE_CLASS)} data-id={id} data-type={"edge"}
+              pointerEvents={!pointerEvents || internals.isStatic || inProgress ? "none" : "stroke"} data-grabbed={grabbed} data-selected={selected}>
         <path d={path} className={EDGE_HANDLE_CLASS} stroke={"transparent"} fill={"none"} strokeWidth={boxWidth}/>
         <path ref={pathRef} d={path} className={EDGE_PATH_CLASS}
               markerStart={markerStart != null ? `url(#${baseID}-${markerStart})` : undefined}
               markerEnd={markerEnd != null ? `url(#${baseID}-${markerEnd})` : undefined}/>
         {label != null && <>
-            <rect ref={labelBgRef} className={EDGE_LABEL_BACKGROUND_CLASS} rx={edge?.labelRadius} pointerEvents={!pointerEvents || internals.isStatic ? "none" : "fill"}/>
+            <rect ref={labelBgRef} className={EDGE_LABEL_BACKGROUND_CLASS} rx={labelBackgroundRadius} pointerEvents={!pointerEvents || internals.isStatic ? "none" : "fill"}/>
             <text ref={labelRef} className={EDGE_LABEL_CLASS} data-label-pos={String(labelPosition)} textAnchor={labelAnchor} dominantBaseline={labelBaseline}
                   x={typeof labelPosition === "object" ? labelPosition.x : undefined}
                   y={typeof labelPosition === "object" ? labelPosition.y : undefined}>

src/components/BaseNode.tsx

@@ -224,22 +224,19 @@ export function BaseNode({id, classes, absolutePosition, grabbed, selected, resi
         const handleElems = container.querySelectorAll<HTMLElement>("." + NODE_HANDLE_CONTAINER_CLASS)
         // Check if handles have changed and update permissions (that we don't care if they change, no need to re-render)
         let handlesChanged = false
-        if (node.handles == null || borderChanged || sizeChanged) handlesChanged = true
-        else {
-            if (node.handles.length !== handleElems.length) handlesChanged = true
-            else for (let i = 0; i < handleElems.length; ++i) {
-                const handleElem = handleElems[i]  // handle element
-                const nodeHandle = node.handles[i] // node handle
-                const style = getComputedStyle(handleElem)
-
-                const [x, y] = [resolveValue(style.left, 0) + border[3] - node.width / 2, resolveValue(style.top, 0) + border[0] - node.height / 2]
-
-                if (handleElem.dataset.name !== nodeHandle.name || Math.abs(x - nodeHandle.x) > 2 || Math.abs(y - nodeHandle.y) > 2) handlesChanged = true
-                else {
-                    nodeHandle.allowNewEdges = stringToBoolean(handleElem.dataset.allowNewEdges)
-                    nodeHandle.allowNewEdgeTarget = stringToBoolean(handleElem.dataset.allowNewEdgesTarget)
-                    nodeHandle.allowGrabbing = stringToBoolean(handleElem.dataset.allowGrabbing)
-                }
+        if (borderChanged || sizeChanged || node.handles.length !== handleElems.length) handlesChanged = true
+        else for (let i = 0; i < handleElems.length; ++i) {
+            const handleElem = handleElems[i]  // handle element
+            const nodeHandle = node.handles[i] // node handle
+            const style = getComputedStyle(handleElem)
+
+            const [x, y] = [resolveValue(style.left, 0) + border[3] - node.width / 2, resolveValue(style.top, 0) + border[0] - node.height / 2]
+
+            if (handleElem.dataset.name !== nodeHandle.name || Math.abs(x - nodeHandle.x) > 2 || Math.abs(y - nodeHandle.y) > 2) handlesChanged = true
+            else {
+                nodeHandle.allowNewEdges = stringToBoolean(handleElem.dataset.allowNewEdges)
+                nodeHandle.allowNewEdgeTarget = stringToBoolean(handleElem.dataset.allowNewEdgesTarget)
+                nodeHandle.allowGrabbing = stringToBoolean(handleElem.dataset.allowGrabbing)
             }
         }
         if (!handlesChanged) return
@@ -379,7 +376,15 @@ export function BaseNode({id, classes, absolutePosition, grabbed, selected, resi
             const allowGrabbing = stringToBoolean(h.dataset.allowGrabbing)
 
             // Save data and make x and y relative to the node's center
-            handles.push({name, roles, x: x - node.width / 2, y: y - node.height / 2, allowNewEdges: allowCreatingEdges, allowNewEdgeTarget: allowCreatingEdgesTarget, allowGrabbing})
+            handles.push({
+                name,
+                roles,
+                x: x - node.width / 2,
+                y: y - node.height / 2,
+                allowNewEdges: allowCreatingEdges,
+                allowNewEdgeTarget: allowCreatingEdgesTarget,
+                allowGrabbing
+            })
         }
         node.handles = handles
     }, [id, internals, node])