@likec4/diagram 1.39.4 → 1.40.0

package/dist/navigationpanel/walkthrough/DynamicViewControls.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { invariant } from '@likec4/core';
+import { css } from '@likec4/styles/css';
+import { Button, SegmentedControl } from '@mantine/core';
+import * as m from 'motion/react-m';
+import { forwardRef } from 'react';
+import { useDiagramContext, useDiagram } from '../../hooks/useDiagram.js';
+import { Tooltip } from '../_common.js';
+import { useNavigationActor } from '../hooks.js';
+import IconPlayerPlayFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js';
+
+const TriggerWalkthroughButton = forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    variant: "filled",
+    size: "xs",
+    fw: "500",
+    ...props,
+    ref,
+    component: m.button,
+    layoutId: "trigger-dynamic-walkthrough",
+    className: css({
+      flexShrink: 0
+    })
+  }
+));
+function StartWalkthroughButton({ onClick }) {
+  const diagram = useDiagram();
+  const actor = useNavigationActor();
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Start Dynamic View Walkthrough", children: /* @__PURE__ */ jsx(
+    TriggerWalkthroughButton,
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        actor.closeDropdown();
+        diagram.startWalkthrough();
+      },
+      size: "compact-xs",
+      h: 26,
+      classNames: {
+        label: css({
+          display: {
+            base: "none",
+            "@/md": "[inherit]"
+          }
+        }),
+        section: css({
+          marginInlineStart: {
+            base: "0",
+            "@/md": "2"
+          }
+        })
+      },
+      rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, { size: 10 }),
+      children: "Start"
+    }
+  ) });
+}
+function DynamicViewModeSwitcher({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      value,
+      component: m.div,
+      onChange: (variant) => {
+        invariant(variant === "diagram" || variant === "sequence", "Invalid dynamic view variant");
+        onChange(variant);
+      },
+      classNames: {
+        label: css({
+          fontSize: "xxs"
+        })
+      },
+      data: [
+        {
+          value: "diagram",
+          label: "Diagram"
+        },
+        {
+          value: "sequence",
+          label: "Sequence"
+        }
+      ]
+    }
+  ) });
+}
+function DynamicViewControls() {
+  const dynamicViewVariant = useDiagramContext((c) => c.dynamicViewVariant);
+  const diagram = useDiagram();
+  const actor = useNavigationActor();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      DynamicViewModeSwitcher,
+      {
+        value: dynamicViewVariant,
+        onChange: (mode) => {
+          diagram.switchDynamicViewVariant(mode);
+        }
+      },
+      "dynamic-view-mode-switcher"
+    ),
+    /* @__PURE__ */ jsx(
+      StartWalkthroughButton,
+      {
+        onClick: () => {
+          actor.closeDropdown();
+          diagram.startWalkthrough();
+        }
+      },
+      "trigger-dynamic-walkthrough"
+    )
+  ] });
+}
+
+export { DynamicViewControls, TriggerWalkthroughButton };

package/dist/navigationpanel/walkthrough/index.d.ts

@@ -1 +1,2 @@
-export { ActiveWalkthroughControls, StartWalkthroughButton } from './ActiveWalkthroughControls';
+export { ActiveWalkthroughControls } from './ActiveWalkthroughControls';
+export { DynamicViewControls } from './DynamicViewControls';

package/dist/overlays/relationship-details/RelationshipDetails.js

@@ -104,7 +104,10 @@ const RelationshipDetailsInner = memo(() => {
       id: browser.rootElementId,
       nodes,
       edges,
-      className: cx(initialized ? "initialized" : "not-initialized"),
+      className: cx(
+        initialized ? "initialized" : "not-initialized",
+        "likec4-relationship-details"
+      ),
       nodeTypes,
       edgeTypes,
       onNodesChange: useCallbackRef((changes) => {

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

@@ -3,13 +3,13 @@ import { useCustomCompareEffect } 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, useEffect } 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';
@@ -25,6 +25,9 @@ const selectToggledFeatures = (state) => {
   }
   return state.context.toggledFeatures;
 };
+const selectDynamicViewVariant = (state) => {
+  return state.context.dynamicViewVariant;
+};
 function DiagramActorProvider({
   view,
   zoomable,
@@ -32,7 +35,8 @@ function DiagramActorProvider({
   fitViewPadding,
   nodesSelectable,
   where,
-  children
+  children,
+  dynamicViewVariant: _defaultVariant
 }) {
   const { handlersRef } = useDiagramEventHandlers();
   const xystore = useStoreApi();
@@ -62,7 +66,8 @@ function DiagramActorProvider({
         zoomable,
         pannable,
         fitViewPadding,
-        nodesSelectable
+        nodesSelectable,
+        dynamicViewVariant: _defaultVariant
       }
     }
   );
@@ -81,14 +86,17 @@ function DiagramActorProvider({
     [zoomable, pannable, fitViewPadding, nodesSelectable],
     deepEqual
   );
-  const { xyedges, xynodes } = useViewToNodesEdges({
-    view,
-    where,
-    nodesSelectable
-  });
+  const dynamicViewVariant = useSelector(actorRef, selectDynamicViewVariant);
+  const update = useMemo(
+    () => convertToXYFlow({ view, where, nodesSelectable, dynamicViewVariant }),
+    [view, where, nodesSelectable, dynamicViewVariant]
+  );
   useEffect(() => {
-    actorRef.send({ type: "update.view", view, xyedges, xynodes });
-  }, [view, xyedges, xynodes]);
+    actorRef.send({
+      type: "update.view",
+      ...update
+    });
+  }, [actorRef, update]);
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);
   return /* @__PURE__ */ jsxs(DiagramActorContextProvider, { value: actorRef, children: [
     /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CurrentViewModelProvider, { children }) }) }),

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);
     })
   };