@likec4/diagram 1.43.0 → 1.45.0

package/dist/hooks/useDiagramCompareLayout.js

@@ -0,0 +1,65 @@
+import { useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { deriveToggledFeatures } from '../likec4diagram/state/machine.setup.js';
+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"
+    };
+  }
+  const {
+    enableCompareWithLatest,
+    enableReadOnly
+  } = deriveToggledFeatures(context);
+  return {
+    isEnabled: true,
+    isEditable: !enableReadOnly,
+    isActive: 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/useLikeC4Project.d.ts

@@ -17,6 +17,11 @@ export declare function useLikeC4ProjectsContext(): LikeC4ProjectsContext;
  */
 export declare function useHasProjects(): boolean;
 /**
- * @returns The current project id.
+ * @returns Current project id, as provided by LikeC4Model
  */
 export declare function useLikeC4ProjectId(): ProjectId;
+/**
+ * Returns current LikeC4 project.
+ * Requires both LikeC4ModelProvider and LikeC4ProjectsProvider in the tree.*
+ */
+export declare function useLikeC4Project(): LikeC4Project;

package/dist/hooks/useLikeC4Project.js

@@ -29,9 +29,21 @@ function useHasProjects() {
 function useLikeC4ProjectId() {
   const ctx = useContext(LikeC4ModelContext);
   if (!ctx) {
-    throw new Error("No LikeC4ModelContext found");
+    throw new Error("No LikeC4ModelProvider found");
   }
   return ctx.projectId;
 }
+function useLikeC4Project() {
+  const projectId = useLikeC4ProjectId();
+  const projectsCtx = useContext(LikeC4ProjectsContext);
+  if (!projectsCtx) {
+    throw new Error("No LikeC4ProjectsProvider found");
+  }
+  const project = projectsCtx.projects.find((p) => p.id === projectId);
+  if (!project) {
+    throw new Error(`Project with id '${projectId}' not found in LikeC4ProjectsProvider`);
+  }
+  return project;
+}
 
-export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };
+export { useHasProjects, useLikeC4Project, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext };

package/dist/hooks/useMediaPrint.d.ts

@@ -0,0 +1,6 @@
+import { ReadableAtom } from 'nanostores';
+export declare const $isPrint: ReadableAtom<boolean>;
+/**
+ * Hook to determine if the current media is print.
+ */
+export declare function useMediaPrint(): boolean;

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,21 @@
 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 { deriveToggledFeatures } from './state/machine.setup.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 +44,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 }) => {
+  ctx.toggledFeatures;
+  const { enableReadOnly } = deriveToggledFeatures(ctx);
+  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.features.enableFitView,
+    ...!ctx.features.enableFitView && {
+      viewport: {
+        x: -ctx.view.bounds.x,
+        y: -ctx.view.bounds.y,
+        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 +95,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;
@@ -102,7 +110,11 @@ function LikeC4DiagramXYFlow({
     notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
     isPanning.clear();
-    diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+    diagram.send({
+      type: "xyflow.viewportMoved",
+      viewport,
+      manually: !!event
+    });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });
   }), nodeTypes = useCustomCompareMemo(
@@ -139,6 +151,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 +166,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 +201,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): {

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

@@ -0,0 +1,6 @@
+import { Types } from '../../types';
+export type EdgeDriftsProps = {
+    edgeProps: Types.EdgeProps;
+    svgPath: string;
+};
+export declare function EdgeDrifts({ edgeProps: { data }, svgPath, }: EdgeDriftsProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx, css } from '@likec4/styles/css';
+
+function EdgeDrifts({
+  edgeProps: { data },
+  svgPath
+}) {
+  const drifts = data.drifts;
+  if (!drifts || drifts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      className: cx(
+        "react-flow__edge-path",
+        css({
+          pointerEvents: "none",
+          stroke: "likec4.compare.manual.outline",
+          fill: "none",
+          mixBlendMode: "plus-lighter",
+          strokeWidth: {
+            base: "8px",
+            _whenHovered: "12px"
+          },
+          strokeOpacity: {
+            base: 0.3,
+            _whenHovered: 0.5
+          }
+        })
+      ),
+      d: svgPath,
+      strokeLinecap: "round"
+    }
+  );
+}
+
+export { EdgeDrifts };