@likec4/diagram 1.39.5 → 1.41.0

package/dist/state/DiagramActorProvider.d.ts

@@ -1,11 +1,12 @@
-import { DiagramView, WhereOperator } from '@likec4/core/types';
+import { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
 import { ViewPadding } from '../LikeC4Diagram.props';
-export declare function DiagramActorProvider({ view, zoomable, pannable, fitViewPadding, nodesSelectable, where, children, }: PropsWithChildren<{
+export declare function DiagramActorProvider({ view, zoomable, pannable, fitViewPadding, nodesSelectable, where, children, dynamicViewVariant: _defaultVariant, }: PropsWithChildren<{
     view: DiagramView;
     zoomable: boolean;
     pannable: boolean;
     fitViewPadding: ViewPadding;
     nodesSelectable: boolean;
     where: WhereOperator | null;
+    dynamicViewVariant: DynamicViewDisplayVariant | undefined;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/state/DiagramActorProvider.js

@@ -1,29 +1,22 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCustomCompareEffect } from '@react-hookz/web';
+import { useCustomCompareEffect, useRafEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual, deepEqual } from 'fast-equals';
-import { useRef, useEffect } from 'react';
+import { useRef, useMemo } from 'react';
 import { ErrorBoundary } from '../components/ErrorFallback.js';
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorContextProvider } from '../hooks/safeContext.js';
-import { useCurrentViewId } from '../hooks/useCurrentViewId.js';
-import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
+import { convertToXYFlow } from '../likec4diagram/convert-to-xyflow.js';
 import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext.js';
 import { useLikeC4Model } from '../likec4model/useLikeC4Model.js';
 import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 import { useOnDiagramEvent } from '../hooks/useDiagram.js';
 
-const selectToggledFeatures = (state) => {
-  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
-    return {
-      ...state.context.toggledFeatures,
-      enableReadOnly: true
-    };
-  }
-  return state.context.toggledFeatures;
+const selectDynamicViewVariant = (state) => {
+  return state.context.dynamicViewVariant;
 };
 function DiagramActorProvider({
   view,
@@ -32,7 +25,8 @@ function DiagramActorProvider({
   fitViewPadding,
   nodesSelectable,
   where,
-  children
+  children,
+  dynamicViewVariant: _defaultVariant
 }) {
   const { handlersRef } = useDiagramEventHandlers();
   const xystore = useStoreApi();
@@ -62,7 +56,8 @@ function DiagramActorProvider({
         zoomable,
         pannable,
         fitViewPadding,
-        nodesSelectable
+        nodesSelectable,
+        dynamicViewVariant: _defaultVariant
       }
     }
   );
@@ -81,25 +76,42 @@ function DiagramActorProvider({
     [zoomable, pannable, fitViewPadding, nodesSelectable],
     deepEqual
   );
-  const { xyedges, xynodes } = useViewToNodesEdges({
-    view,
-    where,
-    nodesSelectable
-  });
-  useEffect(() => {
-    actorRef.send({ type: "update.view", view, xyedges, xynodes });
-  }, [view, xyedges, xynodes]);
-  const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);
+  const dynamicViewVariant = useSelector(actorRef, selectDynamicViewVariant);
+  const update = useMemo(
+    () => convertToXYFlow({ view, where, nodesSelectable, dynamicViewVariant }),
+    [view, where, nodesSelectable, dynamicViewVariant]
+  );
+  useRafEffect(() => {
+    actorRef.send({
+      type: "update.view",
+      ...update
+    });
+  }, [actorRef, update]);
   return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: actorRef, children: [
-    /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }),
+    /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { actorRef, children }) }),
     /* @__PURE__ */ jsx(DiagramActorEventListener, { actorRef })
   ] });
 }
-function CurrentViewModelProvider({ children }) {
-  const viewId = useCurrentViewId();
+const selectViewIdAndToggledFeatures = (state) => {
+  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
+    return {
+      viewId: state.context.view.id,
+      toggledFeatures: {
+        ...state.context.toggledFeatures,
+        enableReadOnly: true
+      }
+    };
+  }
+  return {
+    viewId: state.context.view.id,
+    toggledFeatures: state.context.toggledFeatures
+  };
+};
+function CurrentViewModelProvider({ children, actorRef }) {
+  const { viewId, toggledFeatures } = useSelector(actorRef, selectViewIdAndToggledFeatures, deepEqual);
   const likec4model = useLikeC4Model();
   const viewmodel = likec4model.findView(viewId);
-  return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children });
+  return /* @__PURE__ */ jsx(CurrentViewModelContext.Provider, { value: viewmodel, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
 function DiagramActorEventListener({ actorRef }) {
   const {
@@ -107,20 +119,7 @@ function DiagramActorEventListener({ actorRef }) {
     onOpenSource
   } = useDiagramEventHandlers();
   useOnDiagramEvent("openSource", ({ params }) => onOpenSource?.(params));
-  useEffect(() => {
-    if (!onNavigateTo) return;
-    let frame;
-    const subscription = actorRef.on("navigateTo", ({ viewId }) => {
-      cancelAnimationFrame(frame);
-      frame = requestAnimationFrame(() => {
-        onNavigateTo(viewId);
-      });
-    });
-    return () => {
-      cancelAnimationFrame(frame);
-      subscription.unsubscribe();
-    };
-  }, [actorRef, onNavigateTo]);
+  useOnDiagramEvent("navigateTo", ({ viewId }) => onNavigateTo?.(viewId));
   return null;
 }
 

package/dist/state/assign.js

@@ -4,6 +4,7 @@ import { deepEqual } from 'fast-equals';
 import { omit, mergeDeep, isEmpty } from 'remeda';
 import { assertEvent } from 'xstate';
 import { Base } from '../base/types.js';
+import { SeqParallelAreaColor } from '../likec4diagram/xyflow-sequence/const.js';
 import { VectorImpl, vector } from '../utils/vector.js';
 
 function lastClickedNode(params) {
@@ -52,12 +53,12 @@ function mergeXYNodesEdges({ context, event }) {
     const currentEdges = context.xyedges;
     xyedges = event.xyedges.map((update) => {
       const existing = currentEdges.find((n) => n.id === update.id);
-      if (existing) {
-        if (deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.data, update.data)) {
+      if (existing && existing.type === update.type) {
+        if (deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.data, update.data) && deepEqual(existing.source, update.source) && deepEqual(existing.target, update.target) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle)) {
           return existing;
         }
         return {
-          ...existing,
+          ...omit(existing, ["sourceHandle", "targetHandle"]),
           ...update,
           data: {
             ...existing.data,
@@ -338,11 +339,17 @@ function updateActiveWalkthrough({ context }) {
       const active = stepId === edge.id || !!parallelPrefix && edge.id.startsWith(parallelPrefix);
       return Base.setData(edge, {
         active,
-        dimmed: !active
+        dimmed: stepId !== edge.id
       });
     }),
     xynodes: context.xynodes.map((node) => {
       const dimmed = step.source !== node.id && step.target !== node.id;
+      if (node.type === "seq-parallel") {
+        return Base.setData(node, {
+          color: parallelPrefix === node.data.parallelPrefix ? SeqParallelAreaColor.active : SeqParallelAreaColor.default,
+          dimmed
+        });
+      }
       return Base.setDimmed(node, dimmed);
     })
   };