@likec4/diagram 1.43.0 → 1.44.0

package/dist/hooks/useDiagram.js

@@ -1,132 +1,12 @@
-import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { useMemo, useCallback, useRef, useEffect } from 'react';
-import { findDiagramEdge, findDiagramNode } from '../likec4diagram/state/utils.js';
+import { useCallback, useRef, useEffect } from 'react';
 import { useDiagramActorRef } from './safeContext.js';
+export { useDiagram } from './safeContext.js';
 
-function useDiagram() {
-  const actor = useDiagramActorRef();
-  return useMemo(() => ({
-    actor,
-    send: (event) => actor.send(event),
-    navigateTo: (viewId, fromNode) => {
-      actor.send({
-        type: "navigate.to",
-        viewId,
-        ...fromNode && { fromNode }
-      });
-    },
-    navigate: (direction) => {
-      actor.send({ type: `navigate.${direction}` });
-    },
-    fitDiagram: (duration = 350) => {
-      actor.send({ type: "fitDiagram", duration });
-    },
-    openRelationshipsBrowser: (fqn) => {
-      actor.send({ type: "open.relationshipsBrowser", fqn });
-    },
-    openSource: (params) => {
-      actor.send({ type: "open.source", ...params });
-    },
-    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 });
-    },
-    updateEdgeData: (edgeId, data) => {
-      actor.send({
-        type: "update.edgeData",
-        edgeId,
-        data
-      });
-    },
-    scheduleSaveManualLayout: () => {
-      actor.send({ type: "saveManualLayout.schedule" });
-    },
-    /**
-     * @returns true if there was pending request to save layout
-     */
-    cancelSaveManualLayout: () => {
-      const syncState = actor.getSnapshot().children.syncLayout?.getSnapshot().value;
-      actor.send({ type: "saveManualLayout.cancel" });
-      return syncState === "pending" || syncState === "paused";
-    },
-    align: (mode) => {
-      actor.send({ type: "layout.align", mode });
-    },
-    resetEdgeControlPoints: () => {
-      actor.send({ type: "layout.resetEdgeControlPoints" });
-    },
-    focusNode: (nodeId) => {
-      actor.send({ type: "focus.node", nodeId });
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    get currentView() {
-      return actor.getSnapshot().context.view;
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    getSnapshot: () => actor.getSnapshot(),
-    /**
-     * @warning Do not use in render phase
-     */
-    getContext: () => actor.getSnapshot().context,
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramNode: (xynodeId) => {
-      return findDiagramNode(actor.getSnapshot().context, xynodeId);
-    },
-    findEdge: (xyedgeId) => {
-      return actor.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramEdge: (xyedgeId) => {
-      return findDiagramEdge(actor.getSnapshot().context, xyedgeId);
-    },
-    startWalkthrough: () => {
-      actor.send({ type: "walkthrough.start" });
-    },
-    walkthroughStep: (direction = "next") => {
-      actor.send({ type: "walkthrough.step", direction });
-    },
-    stopWalkthrough: () => {
-      actor.send({ type: "walkthrough.end" });
-    },
-    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" });
-    },
-    openSearch: (searchValue) => {
-      actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
-    },
-    switchDynamicViewVariant: (variant) => {
-      actor.send({ type: "switch.dynamicViewVariant", variant });
-    }
-  }), [actor]);
-}
 function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
-  return useSelector(actorRef, useCallbackRef(selector), compare);
+  return useSelector(actorRef, selector, compare);
 }
 function useDiagramContext(selector, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef();
@@ -138,13 +18,13 @@ function useOnDiagramEvent(event, callback) {
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
   useEffect(() => {
-    const subscription = actorRef.on(event, (event2) => {
-      callbackRef.current(event2);
+    const subscription = actorRef.on(event, (payload) => {
+      callbackRef.current(payload);
     });
     return () => {
       subscription.unsubscribe();
     };
-  }, [actorRef]);
+  }, [actorRef, event]);
 }
 
-export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };
+export { useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.d.ts

@@ -0,0 +1,35 @@
+import { DiagramActorSnapshot } from '../likec4diagram/state/types';
+import type * as t from '@likec4/core/types';
+declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
+    isEnabled: false;
+    isEditable: false;
+    isActive: false;
+    drifts: never[];
+    layout: t.LayoutType;
+} | {
+    isEnabled: true;
+    isEditable: boolean;
+    isActive: boolean;
+    drifts: t.NonEmptyReadonlyArray<t.LayoutedViewDriftReason>;
+    layout: t.LayoutType;
+};
+type DiagramCompareLayoutState = ReturnType<typeof selectCompareLayoutState>;
+type DiagramCompareLayoutOps = {
+    /**
+     * Toggles the compare mode on or off.
+     */
+    toggleCompare: (force?: 'on' | 'off') => void;
+    /**
+     * Switches the layout type between 'auto' and 'manual'.
+     */
+    switchLayout: (layoutType: t.LayoutType) => void;
+    /**
+     * Resets the manual layout to its default state.
+     */
+    resetManualLayout: () => void;
+};
+export declare function useDiagramCompareLayout(): [
+    DiagramCompareLayoutState,
+    DiagramCompareLayoutOps
+];
+export {};

package/dist/hooks/useDiagramCompareLayout.js

@@ -0,0 +1,60 @@
+import { useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { useDiagramActorRef } from './safeContext.js';
+import { useCallbackRef } from './useCallbackRef.js';
+
+const selectCompareLayoutState = ({ context }) => {
+  const drifts = context.view.drifts ?? null;
+  if (!context.features.enableCompareWithLatest || !drifts) {
+    return {
+      isEnabled: false,
+      isEditable: false,
+      isActive: false,
+      drifts: [],
+      layout: context.view._layout ?? "auto"
+    };
+  }
+  return {
+    isEnabled: true,
+    isEditable: !context.features.enableReadOnly,
+    isActive: context.toggledFeatures.enableCompareWithLatest === true,
+    drifts,
+    layout: context.view._layout ?? "auto"
+  };
+};
+function useDiagramCompareLayout() {
+  const actorRef = useDiagramActorRef();
+  const state = useSelector(actorRef, selectCompareLayoutState, shallowEqual);
+  const switchLayout = useCallbackRef((layoutType) => {
+    if (!state.isEnabled) {
+      console.warn("Compare with latest feature is not enabled");
+      return;
+    }
+    actorRef.send({ type: "emit.onLayoutTypeChange", layoutType });
+  });
+  const toggleCompare = useCallbackRef((force) => {
+    if (!state.isEnabled) {
+      console.warn("Compare with latest feature is not enabled");
+      return;
+    }
+    const nextIsActive = force ? force === "on" : !state.isActive;
+    if (state.isActive && !nextIsActive && state.layout === "auto") {
+      switchLayout("manual");
+    }
+    actorRef.send({
+      type: "toggle.feature",
+      feature: "CompareWithLatest",
+      forceValue: nextIsActive
+    });
+  });
+  const resetManualLayout = useCallbackRef(() => {
+    if (!state.isEnabled) {
+      console.warn("Compare with latest feature is not enabled");
+      return;
+    }
+    actorRef.send({ type: "layout.resetManualLayout" });
+  });
+  return [state, { toggleCompare, switchLayout, resetManualLayout }];
+}
+
+export { useDiagramCompareLayout };

package/dist/hooks/useUpdateEffect.js

@@ -11,12 +11,10 @@ const depsShallowEqual = (d1, d2) => {
     return false;
   }
   for (const [i, element] of d1.entries()) {
-    if (element === d2[i]) {
+    if (element === d2[i] || shallowEqual(element, d2[i])) {
       continue;
     }
-    if (!shallowEqual(element, d2[i])) {
-      return false;
-    }
+    return false;
   }
   return true;
 };

package/dist/hooks/useXYFlow.d.ts

@@ -8,6 +8,7 @@ export declare function useXYStoreApi(): XYStoreApi;
 export type XYStoreApi = {
     getState: () => XYStoreState;
     setState: (state: Partial<XYStoreState> | ((state: XYStoreState) => Partial<XYStoreState>)) => void;
+    subscribe: (listener: (state: XYStoreState, prevState: XYStoreState) => void) => () => void;
 };
 export type XYInternalNode = InternalNode<Types.AnyNode>;
 export declare function useXYInternalNode(id: string): XYInternalNode | undefined;

package/dist/hooks/useXYFlow.js

@@ -1,6 +1,6 @@
-import { useCallbackRef } from '@mantine/hooks';
-import { useStore, useStoreApi, useReactFlow, useInternalNode } from '@xyflow/react';
+import { useStore, useStoreApi, useReactFlow } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
+import { useCallbackRef } from './useCallbackRef.js';
 
 function useXYFlow() {
   return useReactFlow();
@@ -8,15 +8,12 @@ function useXYFlow() {
 function useXYStore(selector, equalityFn) {
   return useStore(
     useCallbackRef(selector),
-    shallowEqual
+    equalityFn ?? shallowEqual
   );
 }
 function useXYStoreApi() {
   return useStoreApi();
 }
-function useXYInternalNode(id) {
-  return useInternalNode(id);
-}
 const selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
 function useCurrentZoom() {
   return useStore(selectCurrentZoom);
@@ -26,4 +23,4 @@ function useIsZoomTooSmall() {
   return useStore(selectZoom);
 }
 
-export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi };
+export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYStore, useXYStoreApi };

package/dist/index.d.ts

@@ -14,5 +14,5 @@ export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export { LikeC4View } from './LikeC4View';
 export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View';
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
-export { useCurrentViewId } from './hooks/useCurrentViewId';
-export { getViewBounds } from './utils/get-view-bounds';
+export { useCurrentViewId } from './hooks/useCurrentView';
+export { pickViewBounds } from './utils/view-bounds';

package/dist/index.js

@@ -2,7 +2,7 @@ export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
 export { LikeC4ProjectsProvider } from './LikeC4ProjectsProvider.js';
-export { useDiagram, useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
+export { useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './hooks/useLikeC4Model.js';
 export { useCurrentViewModel } from './hooks/useCurrentViewModel.js';
 export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from './hooks/useLikeC4Project.js';
@@ -11,5 +11,6 @@ export { useUpdateEffect } from './hooks/useUpdateEffect.js';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
 export { LikeC4View } from './LikeC4View.js';
 export { ReactLikeC4 } from './ReactLikeC4.js';
-export { useCurrentViewId } from './hooks/useCurrentViewId.js';
-export { getViewBounds } from './utils/get-view-bounds.js';
+export { useCurrentViewId } from './hooks/useCurrentView.js';
+export { pickViewBounds } from './utils/view-bounds.js';
+export { useDiagram } from './hooks/safeContext.js';

package/dist/likec4diagram/DiagramUI.js

@@ -1,33 +1,40 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRerender } from '@react-hookz/web';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { ErrorBoundary } from '../components/ErrorFallback.js';
-import { EnsureCurrentViewModel } from '../context/LikeC4ModelContext.js';
+import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
 import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
 import { RelationshipPopover } from './relationship-popover/RelationshipPopover.js';
-import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { NavigationPanel } from '../navigationpanel/NavigationPanel.js';
 import { NotationPanel } from './ui/notation/NotationPanel.js';
+import { LayoutDriftFrame } from './ui/LayoutDriftFrame.js';
 
 const LikeC4DiagramUI = memo(() => {
   const {
     enableControls,
     enableNotations,
     enableSearch,
-    enableRelationshipDetails
+    enableRelationshipDetails,
+    enableReadOnly,
+    enableCompareWithLatest
   } = useEnabledFeatures();
   const rerender = useRerender();
   const overlaysActorRef = useOverlaysActorRef();
   const searchActorRef = useSearchActorRef();
-  return /* @__PURE__ */ jsxs(ErrorBoundary, { onReset: rerender, children: [
-    enableControls && /* @__PURE__ */ jsx(EnsureCurrentViewModel, { children: /* @__PURE__ */ jsx(NavigationPanel, {}) }),
+  const handleReset = useCallback(() => {
+    console.warn("DiagramUI: resetting error boundary and rerendering...");
+    rerender();
+  }, []);
+  return /* @__PURE__ */ jsxs(ErrorBoundary, { onReset: handleReset, children: [
+    enableControls && /* @__PURE__ */ jsx(NavigationPanel, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
     enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef }),
-    enableRelationshipDetails && /* @__PURE__ */ jsx(RelationshipPopover, {})
+    enableRelationshipDetails && enableReadOnly && /* @__PURE__ */ jsx(RelationshipPopover, {}),
+    enableCompareWithLatest && /* @__PURE__ */ jsx(LayoutDriftFrame, {})
   ] });
 });
 LikeC4DiagramUI.displayName = "DiagramUI";

package/dist/likec4diagram/DiagramXYFlow.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { Simplify } from 'type-fest';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-export type LikeC4DiagramXYFlowProps = PropsWithChildren<Simplify<Pick<LikeC4DiagramProperties<any>, 'background' | 'nodesDraggable' | 'nodesSelectable' | 'reactFlowProps' | 'renderNodes'>>>;
-export declare function LikeC4DiagramXYFlow({ background, nodesDraggable, nodesSelectable, reactFlowProps, children, renderNodes, }: LikeC4DiagramXYFlowProps): import("react/jsx-runtime").JSX.Element;
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Simplify<Pick<LikeC4DiagramProperties<any>, 'background' | 'reactFlowProps' | 'renderNodes'>>>;
+export declare function LikeC4DiagramXYFlow({ background, reactFlowProps, children, renderNodes, }: LikeC4DiagramXYFlowProps): import("react/jsx-runtime").JSX.Element;

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): {