@likec4/diagram 1.27.0 → 1.27.2

package/dist/hooks/useDiagram.js

@@ -37,17 +37,19 @@ function useDiagram() {
       });
     },
     openSource: (params) => {
-      actor.send({ type: "open.source", ...params });
-    },
-    openElementDetails: (fqn, fromNode) => {
       startTransition(() => {
-        actor.send({ type: "open.elementDetails", fqn, fromNode });
+        actor.send({ type: "open.source", ...params });
       });
     },
-    openRelationshipDetails: (edgeId) => {
-      startTransition(() => {
-        actor.send({ type: "open.relationshipDetails", edgeId });
-      });
+    openElementDetails: (fqn, fromNode) => {
+      actor.send({ type: "open.elementDetails", fqn, fromNode });
+    },
+    openRelationshipDetails: (...params) => {
+      if (params.length === 1) {
+        actor.send({ type: "open.relationshipDetails", params: { edgeId: params[0] } });
+      } else {
+        actor.send({ type: "open.relationshipDetails", params: { source: params[0], target: params[1] } });
+      }
     },
     updateNodeData: (nodeId, data) => {
       actor.send({ type: "update.nodeData", nodeId, data });
@@ -117,6 +119,12 @@ function useDiagram() {
     },
     toggleFeature: (feature, forceValue) => {
       actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
+    },
+    highlightNotation: (notation, kind) => {
+      actor.send({ type: "notations.highlight", notation, ...kind && { kind } });
+    },
+    unhighlightNotation: () => {
+      actor.send({ type: "notations.unhighlight" });
     }
   }), [actor]);
 }

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
-import { useTimeout, useCallbackRef } from '@mantine/hooks';
+import { useTimeout, useDebouncedCallback, useCallbackRef } from '@mantine/hooks';
 import { deepEqual, shallowEqual } from 'fast-equals';
 import { memo } from 'react';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
-import { usePanningAtom } from '../context/ReduceGraphics.js';
+import { useIsReducedGraphics, usePanningAtom } from '../context/ReduceGraphics.js';
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
 import { edgeTypes, nodeTypes } from './custom/index.js';
 import { DiagramUI } from './DiagramUI.js';
@@ -13,7 +13,7 @@ import { useLayoutConstraints } from './useLayoutConstraints.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 
 const selectXYProps = (ctx) => ({
-  initialized: ctx.initialized,
+  initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
   nodes: ctx.xynodes,
   edges: ctx.xyedges,
   pannable: ctx.pannable,
@@ -56,9 +56,11 @@ const LikeC4DiagramXYFlow = memo(({
     onCanvasClick,
     onCanvasDblClick
   } = useDiagramEventHandlers();
-  const notReadOnly = !enableReadOnly, layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
-    $isPanning.set(true);
-  }, 160), notPanning = useTimeout(() => {
+  const notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
+    if (!$isPanning.get()) {
+      $isPanning.set(true);
+    }
+  }, isReducedGraphics ? 150 : 350), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
     if ($isPanning.get()) {
       $isPanning.set(false);
@@ -70,10 +72,9 @@ const LikeC4DiagramXYFlow = memo(({
     if (!$isPanning.get()) {
       isPanning.start();
     }
-    notPanning.clear();
-    notPanning.start();
+    notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    notPanning.start();
+    notPanning.flush();
     diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });

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

@@ -103,7 +103,7 @@ const RelationshipEdge = customEdge((props) => {
       if (!labelBBox || labelBBox.x === labelPos.x && labelBBox.y === labelPos.y) {
         return;
       }
-      xyflow.updateEdgeData(id, {
+      diagram.updateEdgeData(id, {
         labelXY: {
           x: labelPos.x,
           y: labelPos.y
@@ -135,15 +135,13 @@ const RelationshipEdge = customEdge((props) => {
         hasMoved = true;
         pointer = clientPoint;
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false });
-        xyflow.updateEdgeData(id, (xyedge) => {
-          const cp = (xyedge.data.controlPoints ?? controlPoints).slice();
-          cp[index] = {
-            x: Math.round(x),
-            y: Math.round(y)
-          };
-          return {
-            controlPoints: cp
-          };
+        const cp = controlPoints.slice();
+        cp[index] = {
+          x: Math.round(x),
+          y: Math.round(y)
+        };
+        diagram.updateEdgeData(id, {
+          controlPoints: cp
         });
       }
       e2.stopPropagation();
@@ -177,13 +175,9 @@ const RelationshipEdge = customEdge((props) => {
       newControlPoints.splice(index, 1);
       e2.stopPropagation();
       setTimeout(() => {
-        xyflow.updateEdgeData(id, { controlPoints: newControlPoints });
+        diagram.updateEdgeData(id, { controlPoints: newControlPoints });
         diagram.scheduleSaveManualLayout();
       }, 10);
-      domNode.removeEventListener("pointerup", onPointerUp, {
-        capture: true
-      });
-      e2.stopPropagation();
     };
     domNode.addEventListener("pointerup", onPointerUp, {
       once: true,
@@ -213,33 +207,28 @@ const RelationshipEdge = customEdge((props) => {
     if (e.button !== 2) {
       return;
     }
-    xyflow.updateEdgeData(id, (edge) => {
-      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];
-        const fromCurrentToNext = b.sub(a);
-        const fromCurrentToNew = newPoint.sub(a);
-        const 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 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 = edge.data.controlPoints?.slice() || [];
-      newControlPoints.splice(insertionIndex, 0, newPoint);
-      return { controlPoints: newControlPoints };
-    });
+    }
+    const newControlPoints = controlPoints.slice() || [];
+    newControlPoints.splice(insertionIndex, 0, newPoint);
+    diagram.updateEdgeData(id, { controlPoints: newControlPoints });
     diagram.scheduleSaveManualLayout();
     e.stopPropagation();
   };
@@ -290,7 +279,7 @@ const RelationshipEdge = customEdge((props) => {
         }
       )
     ] }),
-    enableEdgeEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+    enableEdgeEditing && controlPoints.length > 0 && (selected || hovered || isControlPointDragging) && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
       EdgeContainer,
       {
         component: "svg",

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js

@@ -57,7 +57,7 @@ function Toolbar({ title, children, nodeProps, ...props }) {
           onDoubleClick: stopPropagation,
           withBorder: true,
           children: /* @__PURE__ */ jsxs(Stack, { gap: "6px", children: [
-            /* @__PURE__ */ jsx(Box, { px: "4px", children: /* @__PURE__ */ jsx(Text, { c: "dimmed", className: toolbarTitle, children: title }) }),
+            /* @__PURE__ */ jsx(Box, { px: "4px", children: /* @__PURE__ */ jsx(Text, { className: toolbarTitle, children: title }) }),
             /* @__PURE__ */ jsx(Group, { gap: 4, children })
           ] })
         }

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js

@@ -1,10 +1,15 @@
 import { css } from '@likec4/styles/css';
 
 const toolbarTitle = css({
+  color: "mantine.colors.dimmed",
   fontSize: "10px",
   fontWeight: 600,
+  maxWidth: "220px",
   cursor: "default",
-  userSelect: "all"
+  userSelect: "all",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap"
 });
 
 export { toolbarTitle };

package/dist/likec4diagram/ui/controls/LayoutDriftNotification.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { HoverCard, HoverCardTarget, Overlay, HoverCardDropdown, Notification, Text, Code } from '@mantine/core';
+import { HoverCard, HoverCardTarget, HoverCardDropdown, Notification, Text, Code } from '@mantine/core';
 import { IconAlertTriangle } from '@tabler/icons-react';
+import { css } from '@likec4/styles/css';
 import { ActionIcon } from './_shared.js';
 
 const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
@@ -11,10 +12,17 @@ const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
     closeDelay: 100,
     ...props,
     children: [
-      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxs(ActionIcon, { c: "orange", children: [
-        /* @__PURE__ */ jsx(Overlay, { color: "orange.lightHover", backgroundOpacity: 1 }),
-        /* @__PURE__ */ jsx(IconAlertTriangle, {})
-      ] }) }),
+      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsx(
+        ActionIcon,
+        {
+          color: "orange",
+          c: "orange",
+          className: css({
+            bg: "mantine.colors.orange.light"
+          }),
+          children: /* @__PURE__ */ jsx(IconAlertTriangle, {})
+        }
+      ) }),
       /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
         Notification,
         {

package/dist/likec4diagram/ui/notation/NotationPanel.css.js

@@ -77,9 +77,9 @@ const shapeBadge = css({
   ["--badge-fz"]: "9.5px",
   ["--badge-padding-x"]: "3px",
   ["--badge-height"]: "13.5px",
-  ["--badge-lh"]: "1"
-  // ['--badge-bg']: vars.element.fill,
-  // ['--badge-color']: vars.element.hiContrast
+  ["--badge-lh"]: "1",
+  ["--badge-bg"]: "{colors.likec4.palette.fill}",
+  ["--badge-color"]: "{colors.likec4.palette.hiContrast}"
 });
 
 export { card, container, elementNotation, icon, shapeBadge, tabPanel };

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
-import { token } from '@likec4/styles/tokens';
+import '@likec4/styles/tokens';
 import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { IconAlertTriangle, IconHelpCircle, IconArrowDownRight } from '@tabler/icons-react';
@@ -22,7 +22,7 @@ const ElementNotation = ({ value }) => {
     shape = "rectangle"
   } = value;
   const [onlyKind, setOnlyKind] = useState(null);
-  useDiagram();
+  const diagram = useDiagram();
   const w = 300;
   const h = 200;
   return /* @__PURE__ */ jsx(
@@ -37,11 +37,14 @@ const ElementNotation = ({ value }) => {
           likec4Palette: color
         })
       ),
+      "data-likec4-color": color,
       onMouseEnter: () => {
         setOnlyKind(null);
+        diagram.highlightNotation(value);
       },
       onMouseLeave: () => {
         setOnlyKind(null);
+        diagram.unhighlightNotation();
       },
       children: /* @__PURE__ */ jsxs(
         Group,
@@ -75,15 +78,18 @@ const ElementNotation = ({ value }) => {
               /* @__PURE__ */ jsx(Group, { gap: 4, flex: "0 0 auto", children: value.kinds.map((kind) => /* @__PURE__ */ jsx(
                 Badge,
                 {
-                  className: shapeBadge,
+                  className: cx(
+                    shapeBadge
+                  ),
                   onMouseEnter: () => {
                     setOnlyKind(kind);
+                    diagram.highlightNotation(value, kind);
                   },
                   onMouseLeave: () => {
                     setOnlyKind(null);
+                    diagram.highlightNotation(value);
                   },
                   opacity: isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1,
-                  color: isNonNullish(onlyKind) && onlyKind !== kind ? "gray" : token("colors.likec4.palette.fill"),
                   children: kind
                 },
                 kind

package/dist/likec4diagram/useLayoutConstraints.d.ts

@@ -20,21 +20,22 @@ declare abstract class Rect {
         height: number;
     };
     get position(): XYPosition;
-    protected abstract parent: Compound | null;
-    constructor(xynode: InternalNode, parent?: Compound | null);
+    protected abstract parent: CompoundRect | null;
+    constructor(xynode: InternalNode, parent?: CompoundRect | null);
 }
-declare class Compound extends Rect {
-    readonly parent: Compound | null;
+declare class CompoundRect extends Rect {
+    readonly parent: CompoundRect | null;
     readonly children: Rect[];
-    constructor(xynode: InternalNode, parent?: Compound | null);
+    constructor(xynode: InternalNode, parent?: CompoundRect | null);
+}
+declare class Leaf extends Rect {
+    readonly parent: CompoundRect | null;
+    constructor(xynode: InternalNode, parent?: CompoundRect | null);
 }
-type NodePositionUpdater = (nodes: Array<{
-    rect: Rect | Compound;
-    node: InternalNode;
-}>) => void;
 export declare function createLayoutConstraints(xyflowApi: XYStoreApi, editingNodeIds: NonEmptyArray<string>): {
+    rects: ReadonlyMap<string, Leaf | CompoundRect>;
     updateXYFlowNodes: () => void;
-    onMove: (updater: NodePositionUpdater) => void;
+    onMove: () => void;
 };
 type LayoutConstraints = {
     onNodeDragStart: OnNodeDrag<Types.Node>;

package/dist/likec4diagram/useLayoutConstraints.js

@@ -2,7 +2,7 @@ import { nonNullable } from '@likec4/core';
 import '@xyflow/react';
 import { getNodeDimensions } from '@xyflow/system';
 import { useRef, useMemo } from 'react';
-import { pipe, filter, map, hasAtLeast, isNullish } from 'remeda';
+import { pipe, filter, hasAtLeast, map } from 'remeda';
 import { useDiagram } from '../hooks/useDiagram.js';
 import { useXYStoreApi } from '../hooks/useXYFlow.js';
 
@@ -62,7 +62,7 @@ class Rect {
     }
   }
 }
-class Compound extends Rect {
+class CompoundRect extends Rect {
   constructor(xynode, parent = null) {
     super(xynode, parent);
     this.parent = parent;
@@ -92,51 +92,51 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
   const ancestorsOfDraggingNodes = new Set(
     editingNodeIds.flatMap(ancestorsOf)
   );
-  const traverse = new Array();
-  for (const [, xynode] of nodeLookup) {
-    if (isNullish(xynode.parentId)) {
-      traverse.push({
-        xynode,
-        parent: null
-      });
-    }
-  }
+  const traverse = [...nodeLookup.values()].flatMap(
+    (x) => !x.parentId ? { xynode: x, parent: null } : []
+  );
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift();
     const isEditing = editingNodeIds.includes(xynode.id);
-    const shouldTraverse = !isEditing && (xynode.type === "compound-element" || xynode.type === "compound-deployment" || xynode.type === "view-group") && ancestorsOfDraggingNodes.has(xynode.id);
-    const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent);
-    rects.set(xynode.id, rect);
+    const shouldTraverse = !isEditing && xynode.type !== "element" && xynode.type !== "deployment" && ancestorsOfDraggingNodes.has(xynode.id);
     if (shouldTraverse) {
+      const rect = new CompoundRect(xynode, parent);
+      rects.set(xynode.id, rect);
       parentLookup.get(xynode.id)?.forEach((child) => {
         traverse.push({
           xynode: child,
           parent: rect
         });
       });
+    } else {
+      rects.set(xynode.id, new Leaf(xynode, parent));
     }
   }
   const rectsToUpdate = [...rects.values()];
   applyConstraints(rectsToUpdate);
   function applyConstraints(targets) {
-    targets.filter((x) => x instanceof Compound).forEach((r) => {
+    for (const r of targets) {
+      if (!(r instanceof CompoundRect)) {
+        continue;
+      }
       applyConstraints(r.children);
-      const childrenBB = r.children.reduce((acc, r2) => ({
-        minX: Math.min(acc.minX, r2.minX),
-        minY: Math.min(acc.minY, r2.minY),
-        maxX: Math.max(acc.maxX, r2.maxX),
-        maxY: Math.max(acc.maxY, r2.maxY)
-      }), {
+      const childrenBB = {
         minX: Infinity,
         minY: Infinity,
         maxX: -Infinity,
         maxY: -Infinity
-      });
+      };
+      for (const child of r.children) {
+        childrenBB.minX = Math.min(childrenBB.minX, child.minX);
+        childrenBB.minY = Math.min(childrenBB.minY, child.minY);
+        childrenBB.maxX = Math.max(childrenBB.maxX, child.maxX);
+        childrenBB.maxY = Math.max(childrenBB.maxY, child.maxY);
+      }
       r.minX = childrenBB.minX - Rect.LeftPadding;
       r.minY = childrenBB.minY - Rect.TopPadding;
       r.maxX = childrenBB.maxX + Rect.RightPadding;
       r.maxY = childrenBB.maxY + Rect.BottomPadding;
-    });
+    }
   }
   function updateXYFlowNodes() {
     applyConstraints(rectsToUpdate);
@@ -149,7 +149,7 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
           position: r.position,
           positionAbsolute: r.positionAbsolute
         });
-        if (r instanceof Compound) {
+        if (r instanceof CompoundRect) {
           acc.push({
             id: r.id,
             type: "dimensions",
@@ -162,26 +162,23 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
     );
   }
   let animationFrameId = null;
-  function onMove(updater) {
+  function onMove() {
     if (rectsToUpdate.length === 0) {
       return;
     }
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null;
-      updater(
-        pipe(
-          editingNodeIds,
-          filter((id) => rects.has(id) && nodeLookup.has(id)),
-          map((id) => ({
-            rect: nonNullable(rects.get(id)),
-            node: nonNullable(nodeLookup.get(id))
-          }))
-        )
-      );
+      const { nodeLookup: nodeLookup2 } = xyflowApi.getState();
+      for (const id of editingNodeIds) {
+        const rect = nonNullable(rects.get(id));
+        const node = nonNullable(nodeLookup2.get(id));
+        rect.positionAbsolute = node.internals.positionAbsolute;
+      }
       updateXYFlowNodes();
     });
   }
   return {
+    rects,
     updateXYFlowNodes,
     onMove
   };
@@ -190,33 +187,39 @@ function useLayoutConstraints() {
   const xystore = useXYStoreApi();
   const diagram = useDiagram();
   const solverRef = useRef(void 0);
-  return useMemo(() => ({
-    onNodeDragStart: (_event, xynode) => {
-      diagram.cancelSaveManualLayout();
-      const { nodeLookup } = xystore.getState();
-      const draggingNodes = pipe(
-        Array.from(nodeLookup.values()),
-        filter((n) => n.dragging === true || n.id === xynode.id || n.selected === true),
-        filter((n) => n.draggable !== false),
-        map((x) => x.id)
-      );
-      if (hasAtLeast(draggingNodes, 1)) {
-        solverRef.current = createLayoutConstraints(xystore, draggingNodes);
+  return useMemo(() => {
+    let wasPending = false;
+    const initial = { x: 0, y: 0 };
+    let moved = false;
+    return {
+      onNodeDragStart: (_event, xynode) => {
+        wasPending = diagram.cancelSaveManualLayout();
+        const { nodeLookup } = xystore.getState();
+        const draggingNodes = pipe(
+          Array.from(nodeLookup.values()),
+          filter((n) => n.draggable !== false && (n.dragging === true || n.id === xynode.id || n.selected === true))
+        );
+        if (hasAtLeast(draggingNodes, 1)) {
+          solverRef.current = createLayoutConstraints(xystore, map(draggingNodes, (x) => x.id));
+        }
+        initial.x = _event.clientX;
+        initial.y = _event.clientY;
+        moved = false;
+      },
+      onNodeDrag: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
+        solverRef.current?.onMove();
+      },
+      onNodeDragStop: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4;
+        console.log("moved", moved);
+        if (wasPending || moved) {
+          diagram.scheduleSaveManualLayout();
+        }
+        solverRef.current = void 0;
       }
-    },
-    onNodeDrag: () => {
-      solverRef.current?.onMove((nodes) => {
-        nodes.forEach(({ rect, node }) => {
-          rect.positionAbsolute = node.internals.positionAbsolute;
-        });
-      });
-    },
-    onNodeDragStop: () => {
-      solverRef.current?.updateXYFlowNodes();
-      diagram.scheduleSaveManualLayout();
-      solverRef.current = void 0;
-    }
-  }), [xystore, diagram]);
+    };
+  }, [xystore, diagram]);
 }
 
 export { createLayoutConstraints, useLayoutConstraints };