@likec4/diagram 1.42.1 → 1.44.0

package/dist/likec4diagram/DiagramXYFlow.js

@@ -1,18 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
-import { useTimeout, useDebouncedCallback, useCallbackRef } from '@mantine/hooks';
+import { useTimeout, useDebouncedCallback } from '@mantine/hooks';
 import { useCustomCompareMemo } from '@react-hookz/web';
-import { deepEqual, shallowEqual } from 'fast-equals';
+import { shallowEqual } from 'fast-equals';
 import { isEmpty } from 'remeda';
 import { memoNode } from '../base-primitives/memoNode.js';
 import { BaseXYFlow } from '../base/BaseXYFlow.js';
 import { useIsReducedGraphics, usePanningAtom } from '../context/RootContainerContext.js';
-import { useDiagram, useDiagramContext } from '../hooks/useDiagram.js';
+import { useDiagramActorSnapshot } from '../hooks/useDiagram.js';
 import { depsShallowEqual, useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { BuiltinEdges, BuiltinNodes } from './custom/index.js';
 import { useLayoutConstraints } from './useLayoutConstraints.js';
+import { useDiagram } from '../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
+import { useCallbackRef } from '../hooks/useCallbackRef.js';
 
 const edgeTypes = {
   relationship: BuiltinEdges.RelationshipEdge,
@@ -41,41 +43,48 @@ function prepareNodeTypes(nodeTypes) {
     "seq-parallel": nodeTypes.seqParallel ?? builtinNodes["seq-parallel"]
   };
 }
-const selectXYProps = (ctx) => ({
-  initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
-  nodes: ctx.xynodes,
-  edges: ctx.xyedges,
-  pannable: ctx.pannable,
-  zoomable: ctx.zoomable,
-  fitViewPadding: ctx.fitViewPadding,
-  enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly || ctx.toggledFeatures.enableReadOnly || ctx.dynamicViewVariant === "sequence" && ctx.view._type === "dynamic",
-  ...!ctx.features.enableFitView && {
-    viewport: {
-      x: -Math.min(ctx.view.bounds.x, 0),
-      y: -Math.min(ctx.view.bounds.y, 0),
-      zoom: 1
+const selectXYProps = ({ context: ctx, children }) => {
+  const toggledFeatures = ctx.toggledFeatures;
+  const enableReadOnly = ctx.features.enableReadOnly || toggledFeatures.enableReadOnly === true;
+  const isNotEditingEdge = enableReadOnly || children.syncLayout?.getSnapshot().context.editing !== "edge";
+  return {
+    enableReadOnly,
+    initialized: ctx.initialized.xydata && ctx.initialized.xyflow,
+    nodes: ctx.xynodes,
+    edges: ctx.xyedges,
+    pannable: ctx.pannable,
+    zoomable: ctx.zoomable,
+    nodesDraggable: !enableReadOnly && ctx.nodesDraggable,
+    nodesSelectable: ctx.nodesSelectable && isNotEditingEdge,
+    fitViewPadding: ctx.fitViewPadding,
+    enableFitView: ctx.toggledFeatures.enableFitView ?? ctx.features.enableFitView,
+    ...!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.enableFitView === b.enableFitView && a.enableReadOnly === b.enableReadOnly && deepEqual(a.fitViewPadding, b.fitViewPadding) && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
+  };
+};
+const equalsXYProps = (a, b) => a.enableReadOnly === b.enableReadOnly && a.initialized === b.initialized && a.pannable === b.pannable && a.zoomable === b.zoomable && a.nodesDraggable === b.nodesDraggable && a.nodesSelectable === b.nodesSelectable && a.enableFitView === b.enableFitView && shallowEqual(a.fitViewPadding, b.fitViewPadding) && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges) && shallowEqual(a.viewport ?? null, b.viewport ?? null);
 function LikeC4DiagramXYFlow({
   background = "dots",
-  nodesDraggable = false,
-  nodesSelectable = false,
   reactFlowProps = {},
   children,
   renderNodes
 }) {
   const diagram = useDiagram();
-  const {
+  let {
+    enableReadOnly,
     initialized,
     nodes,
     edges,
-    enableReadOnly,
     enableFitView,
+    nodesDraggable,
+    nodesSelectable,
     ...props
-  } = useDiagramContext(selectXYProps, equalsXYProps);
+  } = useDiagramActorSnapshot(selectXYProps, equalsXYProps);
   const {
     onNodeContextMenu,
     onCanvasContextMenu,
@@ -85,13 +94,11 @@ function LikeC4DiagramXYFlow({
     onCanvasClick,
     onCanvasDblClick
   } = useDiagramEventHandlers();
-  const notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
+  const isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
     $isPanning.set(true);
   }, isReducedGraphics ? 120 : 400), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
-    if ($isPanning.get()) {
-      $isPanning.set(false);
-    }
+    $isPanning.set(false);
   }, isReducedGraphics ? 350 : 200), onMove = useCallbackRef((event) => {
     if (!event) {
       return;
@@ -139,6 +146,10 @@ function LikeC4DiagramXYFlow({
         diagram.send({ type: "xyflow.edgeClick", edge });
         onEdgeClick?.(diagram.findDiagramEdge(edge.id), e);
       }),
+      onEdgeDoubleClick: useCallbackRef((e, edge) => {
+        e.stopPropagation();
+        diagram.send({ type: "xyflow.edgeDoubleClick", edge });
+      }),
       onPaneClick: useCallbackRef((e) => {
         e.stopPropagation();
         diagram.send({ type: "xyflow.paneClick" });
@@ -150,29 +161,21 @@ function LikeC4DiagramXYFlow({
         diagram.send({ type: "xyflow.paneDblClick" });
         onCanvasDblClick?.(e);
       }),
-      onNodeMouseEnter: useCallbackRef((_event, node) => {
-        _event.stopPropagation();
-        if (!node.data.hovered) {
-          diagram.send({ type: "xyflow.nodeMouseEnter", node });
-        }
+      onNodeMouseEnter: useCallbackRef((event, node) => {
+        event.stopPropagation();
+        diagram.send({ type: "xyflow.nodeMouseEnter", node });
       }),
-      onNodeMouseLeave: useCallbackRef((_event, node) => {
-        _event.stopPropagation();
-        if (node.data.hovered) {
-          diagram.send({ type: "xyflow.nodeMouseLeave", node });
-        }
+      onNodeMouseLeave: useCallbackRef((event, node) => {
+        event.stopPropagation();
+        diagram.send({ type: "xyflow.nodeMouseLeave", node });
       }),
       onEdgeMouseEnter: useCallbackRef((event, edge) => {
         event.stopPropagation();
-        if (!edge.data.hovered) {
-          diagram.send({ type: "xyflow.edgeMouseEnter", edge, event });
-        }
+        diagram.send({ type: "xyflow.edgeMouseEnter", edge, event });
       }),
       onEdgeMouseLeave: useCallbackRef((event, edge) => {
         event.stopPropagation();
-        if (edge.data.hovered) {
-          diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
-        }
+        diagram.send({ type: "xyflow.edgeMouseLeave", edge, event });
       }),
       onMove,
       onMoveEnd,
@@ -193,16 +196,16 @@ function LikeC4DiagramXYFlow({
         );
         onEdgeContextMenu?.(diagramEdge, event);
       }),
-      onPaneContextMenu: useCallbackRef((event) => {
-        onCanvasContextMenu?.(event);
-      }),
+      ...onCanvasContextMenu && {
+        onPaneContextMenu: onCanvasContextMenu
+      },
       ...enableFitView && {
         onViewportResize
       },
-      nodesDraggable: notReadOnly && nodesDraggable,
+      nodesDraggable,
       nodesSelectable,
-      edgesFocusable: false,
-      ...notReadOnly && nodesDraggable && layoutConstraints,
+      elevateEdgesOnSelect: !enableReadOnly,
+      ...nodesDraggable && layoutConstraints,
       ...props,
       ...reactFlowProps,
       children

package/dist/likec4diagram/convert-to-xyflow.d.ts

@@ -3,7 +3,6 @@ import { Types } from './types';
 type ConvertToXYFlowInput = {
     view: LayoutedView;
     where: WhereOperator | null;
-    nodesSelectable: boolean;
     dynamicViewVariant: DynamicViewDisplayVariant;
 };
 export declare function convertToXYFlow({ dynamicViewVariant, ...params }: ConvertToXYFlowInput): {