@likec4/diagram 1.21.1 → 1.22.1

package/dist/likec4diagram/XYFlow.js

@@ -3,10 +3,12 @@ import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import clsx from "clsx";
 import { shallowEqual } from "fast-equals";
+import { memo } from "react";
 import { BaseXYFlow } from "../base/BaseXYFlow.js";
 import { useDiagram } from "../hooks/useDiagram.js";
 import { useDiagramContext } from "../hooks/useDiagramContext.js";
 import { edgeTypes } from "./custom/index.js";
+import { DiagramUI } from "./DiagramUI.js";
 import { useLayoutConstraints } from "./useLayoutConstraints.js";
 import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
 import { nodeTypes } from "./custom/nodes/nodeTypes.js";
@@ -18,10 +20,17 @@ const selectXYProps = (ctx) => ({
   zoomable: ctx.zoomable,
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly
+  enableReadOnly: ctx.features.enableReadOnly,
+  ...!ctx.features.enableFitView && {
+    viewport: {
+      x: -Math.min(ctx.view.bounds.x, 0),
+      y: -Math.min(ctx.view.bounds.y, 0),
+      zoom: 1
+    }
+  }
 });
-const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
-const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
+const equalsXYProps = (a, b) => a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.fitViewPadding === b.fitViewPadding && a.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport, b.viewport);
+const LikeC4DiagramXYFlow = memo(({ background, nodesDraggable, nodesSelectable }) => {
   const diagram = useDiagram();
   const {
     initialized,
@@ -54,10 +63,10 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyNodeChages", changes });
+        diagram.send({ type: "xyflow.applyNodeChanges", changes });
       }),
       onEdgesChange: useCallbackRef((changes) => {
-        diagram.send({ type: "xyflow.applyEdgeChages", changes });
+        diagram.send({ type: "xyflow.applyEdgeChanges", changes });
       }),
       background: initialized ? background : "transparent",
       fitView: false,
@@ -78,6 +87,7 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
       }),
       onDoubleClick: useCallbackRef((e) => {
         e.stopPropagation();
+        e.preventDefault();
         diagram.send({ type: "xyflow.paneDblClick" });
         onCanvasDblClick == null ? void 0 : onCanvasDblClick(e);
       }),
@@ -87,38 +97,34 @@ const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
       onInit: useCallbackRef((instance) => {
         diagram.send({ type: "xyflow.init", instance });
       }),
-      ...onNodeContextMenu && {
-        onNodeContextMenu: useCallbackRef((event, node) => {
-          const diagramNode = nonNullable(
-            diagram.findDiagramNode(node.id),
-            `diagramNode ${node.id} not found`
-          );
-          onNodeContextMenu(diagramNode, event);
-        })
-      },
-      ...onEdgeContextMenu && {
-        onEdgeContextMenu: useCallbackRef((event, edge) => {
-          const diagramEdge = nonNullable(
-            diagram.findDiagramEdge(edge.id),
-            `diagramEdge ${edge.id} not found`
-          );
-          onEdgeContextMenu(diagramEdge, event);
-        })
-      },
-      ...onCanvasContextMenu && {
-        onPaneContextMenu: useCallbackRef((event) => {
-          onCanvasContextMenu(event);
-        })
-      },
+      onNodeContextMenu: useCallbackRef((event, node) => {
+        const diagramNode = nonNullable(
+          diagram.findDiagramNode(node.id),
+          `diagramNode ${node.id} not found`
+        );
+        onNodeContextMenu == null ? void 0 : onNodeContextMenu(diagramNode, event);
+      }),
+      onEdgeContextMenu: useCallbackRef((event, edge) => {
+        const diagramEdge = nonNullable(
+          diagram.findDiagramEdge(edge.id),
+          `diagramEdge ${edge.id} not found`
+        );
+        onEdgeContextMenu == null ? void 0 : onEdgeContextMenu(diagramEdge, event);
+      }),
+      onPaneContextMenu: useCallbackRef((event) => {
+        onCanvasContextMenu == null ? void 0 : onCanvasContextMenu(event);
+      }),
       ...enableFitView && {
         onViewportResize
       },
-      ...notReadOnly && rest.nodesDraggable && layoutConstraints,
+      nodesDraggable,
+      nodesSelectable,
+      ...notReadOnly && nodesDraggable && layoutConstraints,
       ...props,
-      ...rest
+      children: /* @__PURE__ */ jsx(DiagramUI, {})
     }
   );
-};
+}, shallowEqual);
 export {
   LikeC4DiagramXYFlow
 };

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

@@ -5,7 +5,7 @@ import { IconInfoCircle, IconArrowRight, IconZoomScan, IconFileSymlink } from "@
 import clsx from "clsx";
 import { useCallback, Fragment as Fragment$1, forwardRef } from "react";
 import { pipe, map, filter, isTruthy, partition } from "remeda";
-import { Link } from "../../../base/Link.js";
+import { Link } from "../../../components/Link.js";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
 import { DiagramContext } from "../../state/machine.js";
@@ -89,6 +89,7 @@ function RelationshipsDropdownMenu({
       closeOnClickOutside: true,
       clickOutsideEvents: ["pointerdown", "mousedown", "click"],
       closeOnEscape: true,
+      keepMounted: false,
       closeOnItemClick: false,
       disabled,
       position: "bottom-start",