@likec4/diagram 1.39.5 → 1.40.0

package/src/navigationpanel/walkthrough/DynamicViewControls.tsx

@@ -0,0 +1,125 @@
+import { invariant } from '@likec4/core'
+import type { DynamicViewDisplayVariant } from '@likec4/core/types'
+import { css } from '@likec4/styles/css'
+import { type ButtonProps, Button, SegmentedControl } from '@mantine/core'
+import {
+  IconPlayerPlayFilled,
+} from '@tabler/icons-react'
+import { type HTMLMotionProps } from 'motion/react'
+import * as m from 'motion/react-m'
+import { forwardRef } from 'react'
+import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
+import { Tooltip } from '../_common'
+import { useNavigationActor } from '../hooks'
+
+export const TriggerWalkthroughButton = forwardRef<HTMLButtonElement, ButtonProps & HTMLMotionProps<'button'>>((
+  props,
+  ref,
+) => (
+  <Button
+    variant="filled"
+    size="xs"
+    fw="500"
+    {...props}
+    ref={ref}
+    component={m.button}
+    layoutId={'trigger-dynamic-walkthrough'}
+    className={css({
+      flexShrink: 0,
+    })}
+  />
+))
+
+function StartWalkthroughButton({ onClick }: { onClick: () => void }) {
+  const diagram = useDiagram()
+  const actor = useNavigationActor()
+  return (
+    <Tooltip label="Start Dynamic View Walkthrough">
+      <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={<IconPlayerPlayFilled size={10} />}
+      >
+        Start
+      </TriggerWalkthroughButton>
+    </Tooltip>
+  )
+}
+
+function DynamicViewModeSwitcher({
+  value,
+  onChange,
+}: {
+  value: DynamicViewDisplayVariant
+  onChange: (variant: DynamicViewDisplayVariant) => void
+}) {
+  return (
+    <m.div layout="position">
+      <SegmentedControl
+        size="xs"
+        value={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',
+          },
+        ]} />
+    </m.div>
+  )
+}
+
+export function DynamicViewControls() {
+  const dynamicViewVariant = useDiagramContext(c => c.dynamicViewVariant)
+  const diagram = useDiagram()
+  const actor = useNavigationActor()
+  return (
+    <>
+      <DynamicViewModeSwitcher
+        key="dynamic-view-mode-switcher"
+        value={dynamicViewVariant}
+        onChange={mode => {
+          diagram.switchDynamicViewVariant(mode)
+        }}
+      />
+      <StartWalkthroughButton
+        key="trigger-dynamic-walkthrough"
+        onClick={() => {
+          actor.closeDropdown()
+          diagram.startWalkthrough()
+        }} />
+    </>
+  )
+}

package/src/navigationpanel/walkthrough/index.tsx

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

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -1,5 +1,5 @@
 import { type DiagramEdge, type DiagramView, invariant, isAncestor, nonNullable } from '@likec4/core'
-import { cx as clsx } from '@likec4/styles/css'
+import { cx } from '@likec4/styles/css'
 import { ActionIcon, Group } from '@mantine/core'
 import { useCallbackRef, useStateHistory } from '@mantine/hooks'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
@@ -145,7 +145,10 @@ const RelationshipDetailsInner = memo(() => {
       id={browser.rootElementId}
       nodes={nodes}
       edges={edges}
-      className={clsx(initialized ? 'initialized' : 'not-initialized')}
+      className={cx(
+        initialized ? 'initialized' : 'not-initialized',
+        'likec4-relationship-details',
+      )}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       onNodesChange={useCallbackRef((changes) => {

package/src/state/DiagramActorProvider.tsx

@@ -1,9 +1,9 @@
-import type { DiagramView, WhereOperator } from '@likec4/core/types'
+import type { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types'
 import { useCustomCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { deepEqual, shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect, useRef } from 'react'
+import { type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
 import { ErrorBoundary } from '../components/ErrorFallback'
 import { useDiagramEventHandlers } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
@@ -11,8 +11,8 @@ import { useOnDiagramEvent } from '../custom'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
 import { useCurrentViewId } from '../hooks/useCurrentViewId'
 import type { ViewPadding } from '../LikeC4Diagram.props'
+import { convertToXYFlow } from '../likec4diagram/convert-to-xyflow'
 import type { Types } from '../likec4diagram/types'
-import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
 import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { type DiagramMachine, diagramMachine } from './diagram-machine'
@@ -29,6 +29,10 @@ const selectToggledFeatures = (state: DiagramActorSnapshot) => {
   return state.context.toggledFeatures
 }
 
+const selectDynamicViewVariant = (state: DiagramActorSnapshot) => {
+  return state.context.dynamicViewVariant
+}
+
 export function DiagramActorProvider({
   view,
   zoomable,
@@ -37,6 +41,7 @@ export function DiagramActorProvider({
   nodesSelectable,
   where,
   children,
+  dynamicViewVariant: _defaultVariant,
 }: PropsWithChildren<{
   view: DiagramView
   zoomable: boolean
@@ -44,6 +49,7 @@ export function DiagramActorProvider({
   fitViewPadding: ViewPadding
   nodesSelectable: boolean
   where: WhereOperator | null
+  dynamicViewVariant: DynamicViewDisplayVariant | undefined
 }>) {
   const { handlersRef } = useDiagramEventHandlers()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
@@ -76,6 +82,7 @@ export function DiagramActorProvider({
         pannable,
         fitViewPadding,
         nodesSelectable,
+        dynamicViewVariant: _defaultVariant,
       },
     },
   )
@@ -97,15 +104,19 @@ export function DiagramActorProvider({
     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)
 

package/src/state/assign.ts

@@ -5,6 +5,7 @@ import { isEmpty, mergeDeep, omit } from 'remeda'
 import { assertEvent } from 'xstate'
 import { Base } from '../base/types'
 import type { Types } from '../likec4diagram/types'
+import { SeqParallelAreaColor } from '../likec4diagram/xyflow-sequence/const'
 import { type Vector, vector, VectorImpl } from '../utils/vector'
 import type { ActionArg, Context as DiagramContext } from './diagram-machine'
 
@@ -68,21 +69,25 @@ export function mergeXYNodesEdges({ context, event }: ActionArg): Partial<Diagra
     const currentEdges = context.xyedges
     xyedges = event.xyedges.map((update): Types.Edge => {
       const existing = currentEdges.find(n => n.id === update.id)
-      if (existing) {
+      if (existing && existing.type === update.type) {
         if (
           eq(existing.hidden ?? false, update.hidden ?? false)
           && eq(existing.data, update.data)
+          && eq(existing.source, update.source)
+          && eq(existing.target, update.target)
+          && eq(existing.sourceHandle, update.sourceHandle)
+          && eq(existing.targetHandle, update.targetHandle)
         ) {
           return existing
         }
         return {
-          ...existing,
+          ...omit(existing, ['sourceHandle', 'targetHandle']),
           ...update,
           data: {
             ...existing.data,
             ...update.data,
           },
-        }
+        } as Types.Edge
       }
       return update
     })
@@ -388,7 +393,7 @@ export function resetEdgeControlPoints({ context }: ActionArg): Partial<DiagramC
           ...edge.data,
           controlPoints: getControlPointForEdge(edge),
         },
-      })
+      } as Types.Edge)
     }),
   }
 }
@@ -401,11 +406,19 @@ export function updateActiveWalkthrough({ context }: ActionArg): Partial<Diagram
       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)
     }),
   }