@likec4/diagram 1.43.0 → 1.45.0

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,20 +1,20 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
-import { useDebouncedEffect } from '@react-hookz/web';
 import { EdgeLabelRenderer } from '@xyflow/react';
-import { line, curveCatmullRomOpen } from 'd3-shape';
 import { useState, useRef, useEffect } from 'react';
-import { isTruthy, first, last } from 'remeda';
 import { ZIndexes } from '../../../base/const.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useDiagram } from '../../../hooks/useDiagram.js';
-import { useXYStoreApi, useXYFlow, useXYInternalNode } from '../../../hooks/useXYFlow.js';
-import { roundDpr } from '../../../utils/roundDpr.js';
-import { VectorImpl, vector } from '../../../utils/vector.js';
-import { isSamePoint, bezierControlPoints, bezierPath } from '../../../utils/xyflow.js';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../../../hooks/safeContext.js';
+import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
+import { useXYFlow, useXYStoreApi } from '../../../hooks/useXYFlow.js';
+import { isSamePoint } from '../../../utils/xyflow.js';
+import { EdgeDrifts } from './EdgeDrifts.js';
 import { controlDragging, controlPointsContainer, controlPoint } from './edges.css.js';
-import { getNodeIntersectionFromCenterToPoint } from './utils.js';
+import { useControlPoints } from './useControlPoints.js';
+import { useRelationshipEdgePath } from './useRelationshipEdgePath.js';
 import { memoEdge } from '../../../base-primitives/memoEdge.js';
 import { EdgeContainer } from '../../../base-primitives/edge/EdgeContainer.js';
 import { EdgePath } from '../../../base-primitives/edge/EdgePath.js';
@@ -22,145 +22,254 @@ import { EdgeLabelContainer } from '../../../base-primitives/edge/EdgeLabelConta
 import { EdgeLabel } from '../../../base-primitives/edge/EdgeLabel.js';
 import { EdgeActionButton } from '../../../base-primitives/edge/EdgeActionButton.js';
 
-const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
+const getEdgeCenter = (path) => {
+  const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5);
+  return {
+    x: Math.round(dompoint.x),
+    y: Math.round(dompoint.y)
+  };
+};
 const RelationshipEdge = memoEdge((props) => {
   const [isControlPointDragging, setIsControlPointDragging] = useState(false);
-  const xyflowStore = useXYStoreApi();
+  const isControlPointDraggingRef = useRef(isControlPointDragging);
+  isControlPointDraggingRef.current = isControlPointDragging;
   const xyflow = useXYFlow();
   const diagram = useDiagram();
   const {
     enableNavigateTo,
-    enableEdgeEditing
+    enableReadOnly,
+    enableCompareWithLatest
   } = useEnabledFeatures();
+  const enabledEditing = !enableReadOnly;
   const {
     id,
-    source,
-    sourceX,
-    sourceY,
-    target,
-    targetX,
-    targetY,
     selected = false,
     data: {
-      id: edgeId,
-      points,
       hovered = false,
       active = false,
       labelBBox,
       labelXY,
       ...data
-    },
-    style = {}
+    }
   } = props;
   const navigateTo = enableNavigateTo ? data.navigateTo : void 0;
-  const sourceNode = nonNullable(useXYInternalNode(source), `source node ${source} not found`);
-  const targetNode = nonNullable(useXYInternalNode(target), `target node ${target} not found`);
-  const isModified = isTruthy(data.controlPoints) || !isSamePoint(sourceNode.internals.positionAbsolute, sourceNode.data) || !isSamePoint(targetNode.internals.positionAbsolute, targetNode.data);
-  let controlPoints = data.controlPoints ?? bezierControlPoints(props.data);
-  let edgePath;
-  if (isModified) {
-    const sourceCenterPos = { x: sourceX, y: sourceY };
-    const targetCenterPos = { x: targetX, y: targetY };
-    const nodeMargin = 6;
-    const points2 = data.dir === "back" ? [
-      targetCenterPos,
-      getNodeIntersectionFromCenterToPoint(targetNode, first(controlPoints) ?? sourceCenterPos, nodeMargin),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(sourceNode, last(controlPoints) ?? targetCenterPos, nodeMargin),
-      sourceCenterPos
-    ] : [
-      sourceCenterPos,
-      getNodeIntersectionFromCenterToPoint(sourceNode, first(controlPoints) ?? targetCenterPos, nodeMargin),
-      ...controlPoints,
-      getNodeIntersectionFromCenterToPoint(targetNode, last(controlPoints) ?? sourceCenterPos, nodeMargin),
-      targetCenterPos
-    ];
-    edgePath = nonNullable(curve(points2));
-  } else {
-    edgePath = bezierPath(points);
-  }
+  const {
+    controlPoints,
+    setControlPoints,
+    insertControlPoint
+  } = useControlPoints(props);
+  let edgePath = useRelationshipEdgePath({
+    props,
+    controlPoints,
+    isControlPointDragging
+  });
   let labelX = labelBBox?.x ?? 0, labelY = labelBBox?.y ?? 0;
   const [labelPos, setLabelPos] = useState({
     x: labelXY?.x ?? labelX,
     y: labelXY?.y ?? labelY
   });
+  useUpdateEffect(() => {
+    if (isControlPointDraggingRef.current) {
+      return;
+    }
+    const next = {
+      x: labelX,
+      y: labelY
+    };
+    setLabelPos((current) => isSamePoint(current, next) ? current : next);
+  }, [labelX, labelY]);
   const svgPathRef = useRef(null);
   useEffect(() => {
     const path = svgPathRef.current;
-    if (!path) return;
-    const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5);
-    const point = {
-      x: roundDpr(dompoint.x),
-      y: roundDpr(dompoint.y)
-    };
-    setLabelPos((current) => isSamePoint(current, point) ? current : point);
-  }, [edgePath]);
-  useDebouncedEffect(
-    () => {
-      if (!labelBBox || labelBBox.x === labelPos.x && labelBBox.y === labelPos.y) {
-        return;
-      }
+    if (!path || !isControlPointDragging) return;
+    const next = getEdgeCenter(path);
+    setLabelPos((current) => isSamePoint(current, next) ? current : next);
+  }, [edgePath, isControlPointDragging]);
+  const updateEdgeData = useCallbackRef((controlPoints2) => {
+    const point = svgPathRef.current ? getEdgeCenter(svgPathRef.current) : null;
+    if (labelBBox && point) {
       diagram.updateEdgeData(id, {
-        labelXY: {
-          x: labelPos.x,
-          y: labelPos.y
+        controlPoints: controlPoints2,
+        labelBBox: {
+          ...labelBBox,
+          ...point
         }
       });
-    },
-    [labelPos],
-    50,
-    300
-  );
-  if (isModified || isControlPointDragging) {
-    labelX = labelPos.x;
-    labelY = labelPos.y;
+    } else {
+      diagram.updateEdgeData(id, { controlPoints: controlPoints2 });
+    }
+    diagram.stopEditing(true);
+    setIsControlPointDragging(false);
+  });
+  const onControlPointerStartMove = useCallbackRef(() => {
+    diagram.startEditing("edge");
+    setIsControlPointDragging(true);
+  });
+  const onControlPointerCancelMove = useCallbackRef(() => {
+    diagram.stopEditing();
+    setIsControlPointDragging(false);
+  });
+  const onControlPointerFinishMove = useCallbackRef((points) => {
+    setControlPoints(points);
+    requestAnimationFrame(() => {
+      updateEdgeData(points);
+    });
+  });
+  const onControlPointerDelete = useCallbackRef((points) => {
+    diagram.startEditing("edge");
+    setIsControlPointDragging(true);
+    setControlPoints(points);
+    requestAnimationFrame(() => {
+      updateEdgeData(points);
+    });
+  });
+  const onEdgePointerDown = useCallbackRef((e) => {
+    if (e.pointerType !== "mouse") {
+      return;
+    }
+    if (e.button !== 2) {
+      return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    diagram.startEditing("edge");
+    const newControlPoints = insertControlPoint(
+      xyflow.screenToFlowPosition(
+        {
+          x: e.clientX,
+          y: e.clientY
+        },
+        { snapToGrid: false }
+      )
+    );
+    diagram.updateEdgeData(id, { controlPoints: newControlPoints });
+    diagram.stopEditing(true);
+  });
+  if (isControlPointDragging && !props.data.hovered) {
+    props = {
+      ...props,
+      data: {
+        ...props.data,
+        hovered: true
+      }
+    };
   }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: cx(isControlPointDragging && controlDragging), children: [
+      /* @__PURE__ */ jsx(
+        EdgePath,
+        {
+          edgeProps: props,
+          svgPath: edgePath,
+          ref: svgPathRef,
+          isDragging: isControlPointDragging,
+          ...enabledEditing && {
+            onEdgePointerDown
+          }
+        }
+      ),
+      enableCompareWithLatest && /* @__PURE__ */ jsx(
+        EdgeDrifts,
+        {
+          edgeProps: props,
+          svgPath: edgePath
+        }
+      ),
+      labelBBox && /* @__PURE__ */ jsx(
+        EdgeLabelContainer,
+        {
+          edgeProps: props,
+          labelPosition: isControlPointDragging ? labelPos : { x: labelX, y: labelY },
+          children: /* @__PURE__ */ jsx(
+            EdgeLabel,
+            {
+              pointerEvents: enabledEditing ? "none" : "all",
+              edgeProps: props,
+              children: !enabledEditing && navigateTo && /* @__PURE__ */ jsx(
+                EdgeActionButton,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    diagram.navigateTo(navigateTo);
+                  }
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    enabledEditing && controlPoints.length > 0 && (selected || active || hovered || isControlPointDragging) && /* @__PURE__ */ jsx(
+      ControlPoints,
+      {
+        edgeProps: props,
+        controlPoints,
+        onMove: setControlPoints,
+        onStartMove: onControlPointerStartMove,
+        onCancelMove: onControlPointerCancelMove,
+        onFinishMove: onControlPointerFinishMove,
+        onDelete: onControlPointerDelete,
+        zIndex: ZIndexes.Element + 500
+      }
+    )
+  ] });
+});
+RelationshipEdge.displayName = "RelationshipEdge";
+function ControlPoints({
+  edgeProps,
+  controlPoints,
+  onMove,
+  onStartMove,
+  onCancelMove,
+  onFinishMove,
+  onDelete,
+  zIndex
+}) {
+  const xyflowStore = useXYStoreApi();
+  const xyflow = useXYFlow();
+  const edgeId = edgeProps.data.id;
   const onLmbControlPointerDown = (index, e, domNode) => {
-    const { addSelectedEdges } = xyflowStore.getState();
-    addSelectedEdges([id]);
-    const wasCanceled = diagram.cancelSaveManualLayout();
-    e.stopPropagation();
     let hasMoved = false;
     let pointer = { x: e.clientX, y: e.clientY };
+    let animationFrameId = null;
+    let cp = controlPoints;
     const onPointerMove = (e2) => {
       const clientPoint = {
         x: e2.clientX,
         y: e2.clientY
       };
       if (!isSamePoint(pointer, clientPoint)) {
-        setIsControlPointDragging(true);
         if (!hasMoved) {
-          diagram.send({ type: "xyflow.edgeEditingStarted", edge: props.data });
           hasMoved = true;
+          onStartMove();
         }
         pointer = clientPoint;
-        const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false });
-        const cp = controlPoints.slice();
-        cp[index] = {
-          x: roundDpr(x),
-          y: roundDpr(y)
-        };
-        diagram.updateEdgeData(id, {
-          controlPoints: cp
+        animationFrameId ??= requestAnimationFrame(() => {
+          animationFrameId = null;
+          cp = cp.slice();
+          const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false });
+          cp[index] = {
+            x: Math.round(x),
+            y: Math.round(y)
+          };
+          onMove(cp);
         });
       }
       e2.stopPropagation();
     };
     const onPointerUp = (e2) => {
+      e2.stopPropagation();
       domNode.removeEventListener("pointermove", onPointerMove, {
         capture: true
       });
+      domNode.removeEventListener("click", stopAndPrevent, {
+        capture: true
+      });
       if (hasMoved) {
-        e2.stopPropagation();
+        onFinishMove(cp);
+      } else {
+        onCancelMove();
       }
-      if (hasMoved || wasCanceled) {
-        diagram.scheduleSaveManualLayout();
-      }
-      setIsControlPointDragging(false);
-    };
-    const onClick = (e2) => {
-      e2.stopPropagation();
-      e2.preventDefault();
     };
     domNode.addEventListener("pointermove", onPointerMove, {
       capture: true
@@ -169,148 +278,78 @@ const RelationshipEdge = memoEdge((props) => {
       once: true,
       capture: true
     });
-    domNode.addEventListener("click", onClick, {
+    domNode.addEventListener("click", stopAndPrevent, {
       capture: true,
       once: true
     });
   };
-  const onRmbControlPointerDown = (index, e, domNode) => {
+  const onRmbControlPointerDown = (index, e) => {
     if (controlPoints.length <= 1) {
       return;
     }
-    const onPointerUp = (e2) => {
-      const newControlPoints = controlPoints.slice();
-      newControlPoints.splice(index, 1);
-      e2.stopPropagation();
-      setTimeout(() => {
-        diagram.updateEdgeData(id, { controlPoints: newControlPoints });
-        diagram.scheduleSaveManualLayout();
-      }, 10);
-    };
-    domNode.addEventListener("pointerup", onPointerUp, {
-      once: true,
-      capture: true
-    });
     e.stopPropagation();
+    e.preventDefault();
+    const newControlPoints = controlPoints.slice();
+    newControlPoints.splice(index, 1);
+    setTimeout(() => {
+      onDelete(newControlPoints);
+    }, 10);
   };
-  const onControlPointerDown = (index, e) => {
-    const { domNode } = xyflowStore.getState();
+  const onControlPointerDown = useCallbackRef((e) => {
+    const { domNode, addSelectedEdges } = xyflowStore.getState();
     if (!domNode || e.pointerType !== "mouse") {
       return;
     }
+    const index = parseFloat(e.currentTarget.getAttribute("data-control-point-index") || "");
+    if (isNaN(index)) {
+      throw new Error("data-control-point-index is not a number");
+    }
     switch (e.button) {
-      case 0:
+      case 0: {
+        e.stopPropagation();
+        addSelectedEdges([edgeId]);
         onLmbControlPointerDown(index, e, domNode);
         break;
+      }
       case 2:
-        onRmbControlPointerDown(index, e, domNode);
+        onRmbControlPointerDown(index, e);
         break;
     }
-  };
-  const onEdgePointerDown = (e) => {
-    const { domNode } = xyflowStore.getState();
-    if (!domNode || e.pointerType !== "mouse") {
-      return;
-    }
-    if (e.button !== 2) {
-      return;
-    }
-    const points2 = [
-      new VectorImpl(sourceX, sourceY),
-      ...controlPoints.map(vector) || [],
-      new VectorImpl(targetX, targetY)
-    ];
-    let pointer = { x: e.clientX, y: e.clientY };
-    const newPoint = vector(xyflow.screenToFlowPosition(pointer, { snapToGrid: false }));
-    let insertionIndex = 0;
-    let minDistance = Infinity;
-    for (let i = 0; i < points2.length - 1; i++) {
-      const a = points2[i], b = points2[i + 1], fromCurrentToNext = b.sub(a), fromCurrentToNew = newPoint.sub(a), fromNextToNew = newPoint.sub(b);
-      if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
-        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).abs() / fromCurrentToNext.abs());
-        if (distanceToEdge < minDistance) {
-          minDistance = distanceToEdge;
-          insertionIndex = i;
-        }
-      }
-    }
-    const newControlPoints = controlPoints.slice() || [];
-    newControlPoints.splice(insertionIndex, 0, newPoint);
-    diagram.updateEdgeData(id, { controlPoints: newControlPoints });
-    diagram.scheduleSaveManualLayout();
-    e.stopPropagation();
-  };
-  let zIndex = ZIndexes.Edge;
-  if (hovered || active) {
-    zIndex = ZIndexes.Element + 1;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: cx(isControlPointDragging && controlDragging), children: [
-      /* @__PURE__ */ jsx(
-        EdgePath,
-        {
-          edgeProps: props,
-          svgPath: edgePath,
-          ref: svgPathRef,
-          ...enableEdgeEditing && {
-            onEdgePointerDown
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EdgeLabelContainer,
+  });
+  return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+    EdgeContainer,
+    {
+      component: "svg",
+      className: controlPointsContainer,
+      ...edgeProps,
+      style: {
+        ...edgeProps.style,
+        zIndex
+      },
+      children: /* @__PURE__ */ jsx(
+        "g",
         {
-          edgeProps: props,
-          labelPosition: {
-            x: labelX,
-            y: labelY,
-            translate: isModified ? "translate(-50%, 0)" : void 0
-          },
-          children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: navigateTo && /* @__PURE__ */ jsx(
-            EdgeActionButton,
+          onContextMenu: stopAndPrevent,
+          children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
+            "circle",
             {
-              onClick: (e) => {
-                e.stopPropagation();
-                diagram.navigateTo(navigateTo);
-              }
-            }
-          ) })
+              "data-control-point-index": i,
+              onPointerDownCapture: onControlPointerDown,
+              className: cx("nodrag nopan", controlPoint),
+              cx: p.x,
+              cy: p.y,
+              r: 3
+            },
+            "controlPoints" + edgeId + "#" + i
+          ))
         }
       )
-    ] }),
-    enableEdgeEditing && controlPoints.length > 0 && (selected || hovered || isControlPointDragging) && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
-      EdgeContainer,
-      {
-        component: "svg",
-        className: controlPointsContainer,
-        ...props,
-        style: {
-          ...style,
-          zIndex
-        },
-        children: /* @__PURE__ */ jsx(
-          "g",
-          {
-            onContextMenu: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            },
-            children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
-              "circle",
-              {
-                onPointerDown: (e) => onControlPointerDown(i, e),
-                className: cx("nodrag nopan", controlPoint),
-                cx: Math.round(p.x),
-                cy: Math.round(p.y),
-                r: 3
-              },
-              "controlPoints" + edgeId + "#" + i
-            ))
-          }
-        )
-      }
-    ) })
-  ] });
-});
+    }
+  ) });
+}
+const stopAndPrevent = (e) => {
+  e.stopPropagation();
+  e.preventDefault();
+};
 
 export { RelationshipEdge };

package/dist/likec4diagram/custom/edges/SequenceStepEdge.js

@@ -1,6 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getSmoothStepPath } from '@xyflow/system';
-import { useDiagram } from '../../../hooks/useDiagram.js';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { useDiagram } from '../../../hooks/safeContext.js';
+import { EdgeDrifts } from './EdgeDrifts.js';
 import { EdgeContainer } from '../../../base-primitives/edge/EdgeContainer.js';
 import { EdgePath } from '../../../base-primitives/edge/EdgePath.js';
 import { EdgeLabelContainer } from '../../../base-primitives/edge/EdgeLabelContainer.js';
@@ -9,6 +14,7 @@ import { EdgeActionButton } from '../../../base-primitives/edge/EdgeActionButton
 
 const LABEL_OFFSET = 16;
 function SequenceStepEdge(props) {
+  const { enableNavigateTo, enableCompareWithLatest } = useEnabledFeatures();
   const diagram = useDiagram();
   const { navigateTo } = props.data;
   const isSelfLoop = props.source === props.target;
@@ -45,6 +51,7 @@ function SequenceStepEdge(props) {
         svgPath: path
       }
     ),
+    enableCompareWithLatest && /* @__PURE__ */ jsx(EdgeDrifts, { edgeProps: props, svgPath: path }),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
       {
@@ -54,7 +61,7 @@ function SequenceStepEdge(props) {
           y: props.sourceY + (!isSelfLoop ? LABEL_OFFSET : 0),
           translate: isBack ? "translate(-100%, 0)" : void 0
         },
-        children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: navigateTo && /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
           EdgeActionButton,
           {
             onClick: (e) => {

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -1,6 +1,5 @@
 import { css } from '@likec4/styles/css';
 
-const isSelected = ".react-flow__edge.selected";
 const controlPointsContainer = css({
   overflow: "visible",
   position: "absolute",
@@ -20,15 +19,15 @@ const controlPoint = css({
   _hover: {
     fillOpacity: 1,
     stroke: "mantine.colors.primary.filledHover",
-    strokeWidth: 10,
+    strokeWidth: 18,
     transition: "stroke 100ms ease-out, stroke-width 100ms ease-out"
   },
-  [`:where(${isSelected}, [data-likec4-hovered='true']) &`]: {
+  [`:where([data-likec4-selected='true'], [data-likec4-hovered='true']) &`]: {
     visibility: "visible",
     transition: "fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out",
     transitionDelay: "50ms",
     fillOpacity: 1,
-    strokeWidth: 5
+    strokeWidth: 12
   }
 });
 const controlDragging = css({

package/dist/likec4diagram/custom/edges/useControlPoints.d.ts

@@ -0,0 +1,8 @@
+import { XYPosition } from '@xyflow/react';
+import { Types } from '../../types';
+import { Dispatch, SetStateAction } from 'react';
+export declare function useControlPoints({ sourceX, sourceY, targetX, targetY, data, }: Types.EdgeProps<'relationship'>): {
+    controlPoints: XYPosition[];
+    setControlPoints: Dispatch<SetStateAction<XYPosition[]>>;
+    insertControlPoint: ({ x, y }: XYPosition) => XYPosition[];
+};