@likec4/diagram 1.39.5 → 1.40.0

package/src/state/diagram-machine.ts

@@ -10,6 +10,7 @@ import type {
   DiagramEdge,
   DiagramNode,
   DiagramView,
+  DynamicViewDisplayVariant,
   EdgeId,
   Fqn,
   NodeId,
@@ -29,11 +30,13 @@ import { type EdgeChange, type NodeChange, type Rect, type Viewport, nodeToRect
 import type { MouseEvent } from 'react'
 import { clamp, first, hasAtLeast, prop } from 'remeda'
 import type { PartialDeep } from 'type-fest'
+import type {
+  ActorLogicFrom,
+  ActorRef,
+  AnyEventObject,
+  Snapshot,
+} from 'xstate'
 import {
-  type ActorLogicFrom,
-  type ActorRef,
-  type AnyEventObject,
-  type Snapshot,
   and,
   assertEvent,
   assign,
@@ -53,6 +56,7 @@ import { type EnabledFeatures, type FeatureName, AllDisabled } from '../context/
 import type { OpenSourceParams, ViewPadding } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints'
+import { SeqParallelAreaColor } from '../likec4diagram/xyflow-sequence/const'
 import { overlaysActorLogic } from '../overlays/overlaysActor'
 import { searchActorLogic } from '../search/searchActor'
 import { type AlignmentMode, getAligner, toNodeRect } from './aligners'
@@ -71,7 +75,7 @@ import {
 import { type HotKeyEvent, hotkeyActorLogic } from './hotkeyActor'
 import { DiagramToggledFeaturesPersistence } from './persistence'
 import { type Events as SyncLayoutEvents, syncManualLayoutActorLogic } from './syncManualLayoutActor'
-import { findDiagramEdge, findDiagramNode, focusedBounds, typedSystem } from './utils'
+import { activeSequenceBounds, findDiagramEdge, findDiagramNode, focusedBounds, typedSystem } from './utils'
 
 export type XYStoreApi = ReturnType<typeof useStoreApi<Types.Node, Types.Edge>>
 
@@ -91,6 +95,7 @@ export interface Input {
   pannable: boolean
   fitViewPadding: ViewPadding
   nodesSelectable: boolean
+  dynamicViewVariant?: DynamicViewDisplayVariant | undefined
 }
 
 export type ToggledFeatures = Partial<EnabledFeatures>
@@ -133,6 +138,7 @@ export interface Context extends Input {
   syncLayoutActorRef: null | ActorRef<Snapshot<unknown>, SyncLayoutEvents, AnyEventObject>
 
   // If Dynamic View
+  dynamicViewVariant: DynamicViewDisplayVariant
   activeWalkthrough: null | {
     stepId: StepEdgeId
     parallelPrefix: string | null
@@ -158,7 +164,7 @@ export type Events =
   | { type: 'update.nodeData'; nodeId: NodeId; data: PartialDeep<Types.NodeData> }
   | { type: 'update.edgeData'; edgeId: EdgeId; data: PartialDeep<Types.EdgeData> }
   | { type: 'update.view'; view: DiagramView; xynodes: Types.Node[]; xyedges: Types.Edge[] }
-  | { type: 'update.inputs'; inputs: Partial<Omit<Input, 'view' | 'xystore'>> }
+  | { type: 'update.inputs'; inputs: Partial<Omit<Input, 'view' | 'xystore' | 'dynamicViewVariant'>> }
   | { type: 'update.features'; features: EnabledFeatures }
   | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
   | ({ type: 'open.source' } & OpenSourceParams)
@@ -175,6 +181,7 @@ export type Events =
   | { type: 'saveManualLayout.schedule' }
   | { type: 'saveManualLayout.cancel' }
   | { type: 'focus.node'; nodeId: NodeId }
+  | { type: 'switch.dynamicViewVariant'; variant: DynamicViewDisplayVariant }
   | { type: 'walkthrough.start'; stepId?: StepEdgeId }
   | { type: 'walkthrough.step'; direction: 'next' | 'previous' }
   | { type: 'walkthrough.end' }
@@ -222,10 +229,13 @@ const _diagramMachine = setup({
   guards: {
     'isReady': ({ context }) => context.initialized.xydata && context.initialized.xyflow,
     'enabled: FitView': ({ context }) => context.features.enableFitView,
-    'enabled: FocusMode': ({ context }) => context.features.enableFocusMode,
+    'enabled: FocusMode': ({ context }) =>
+      context.features.enableFocusMode &&
+      (context.view._type !== 'dynamic' || context.dynamicViewVariant !== 'sequence'),
     'enabled: Readonly': ({ context }) => context.features.enableReadOnly,
     'enabled: RelationshipDetails': ({ context }) => context.features.enableRelationshipDetails,
     'enabled: Search': ({ context }) => context.features.enableSearch,
+    'enabled: ElementDetails': ({ context }) => context.features.enableElementDetails,
     'not readonly': ({ context }) => !context.features.enableReadOnly,
     'is dynamic view': ({ context }) => context.view._type === 'dynamic',
     'is another view': ({ context, event }) => {
@@ -238,6 +248,10 @@ const _diagramMachine = setup({
       }
       nonexhaustive(event.type)
     },
+    'click: node has modelFqn': ({ event }) => {
+      assertEvent(event, 'xyflow.nodeClick')
+      return 'modelFqn' in event.node.data
+    },
     'click: selected node': ({ event }) => {
       assertEvent(event, 'xyflow.nodeClick')
       return event.node.selected === true
@@ -269,13 +283,28 @@ const _diagramMachine = setup({
       type: 'openSource',
       params: _params,
     })),
-
     'assign lastClickedNode': assign(({ context, event }) => {
       assertEvent(event, 'xyflow.nodeClick')
       return {
         lastClickedNode: lastClickedNode({ context, event }),
       }
     }),
+    'assign: focusedNode': assign(({ context, event }) => {
+      let focusedNode
+      switch (event.type) {
+        case 'xyflow.nodeClick':
+          focusedNode = event.node.data.id
+          break
+        case 'focus.node':
+          focusedNode = event.nodeId
+          break
+        default:
+          throw new Error(`Unexpected event type: ${event.type} in action 'assign: focusedNode'`)
+      }
+      return {
+        focusedNode,
+      }
+    }),
     'reset lastClickedNode': assign(() => ({
       lastClickedNode: null,
     })),
@@ -315,7 +344,10 @@ const _diagramMachine = setup({
     },
 
     'xyflow:fitFocusedBounds': ({ context }) => {
-      const { bounds, duration = 450 } = focusedBounds({ context })
+      const isActiveSequenceWalkthrough = !!context.activeWalkthrough && context.dynamicViewVariant === 'sequence'
+      const { bounds, duration = 450 } = isActiveSequenceWalkthrough
+        ? activeSequenceBounds({ context })
+        : focusedBounds({ context })
       const { width, height, panZoom, transform } = nonNullable(context.xystore).getState()
 
       const maxZoom = Math.max(1, transform[2])
@@ -554,6 +586,61 @@ const _diagramMachine = setup({
       })),
     })),
     'update active walkthrough': assign(updateActiveWalkthrough),
+    'open element details': sendTo(
+      ({ system }) => typedSystem(system).overlaysActorRef!,
+      ({ context, event }, params?: { fqn: Fqn; fromNode?: NodeId | undefined }) => {
+        let initiatedFrom = null as null | {
+          node: NodeId
+          clientRect: Rect
+        }
+        let fromNodeId: NodeId | undefined, subject: Fqn
+        // Use from params if available
+        if (params) {
+          subject = params.fqn
+          fromNodeId = params.fromNode ?? context.view.nodes.find(n => n.modelRef === params.fqn)?.id
+        }
+        // Use from event if available
+        else if (event.type === 'xyflow.nodeClick') {
+          invariant('modelFqn' in event.node.data && !!event.node.data.modelFqn, 'No modelFqn in event node data')
+          subject = event.node.data.modelFqn
+          fromNodeId = event.node.data.id
+        }
+        else if (event.type === 'open.elementDetails') {
+          subject = event.fqn
+          fromNodeId = event.fromNode
+        }
+        // Use from lastClickedNode if available
+        else {
+          invariant(context.lastClickedNode, 'No last clicked node')
+          fromNodeId = nonNullable(context.lastClickedNode).id
+          const node = nonNullable(context.xynodes.find(n => n.id === fromNodeId))
+          invariant('modelFqn' in node.data && !!node.data.modelFqn, 'No modelFqn in last clicked node')
+          subject = node.data.modelFqn
+        }
+
+        const internalNode = fromNodeId ? context.xystore.getState().nodeLookup.get(fromNodeId) : null
+        if (fromNodeId && internalNode) {
+          const nodeRect = nodeToRect(internalNode)
+          const zoom = context.xyflow!.getZoom()
+
+          const clientRect = {
+            ...context.xyflow!.flowToScreenPosition(nodeRect),
+            width: nodeRect.width * zoom,
+            height: nodeRect.height * zoom,
+          }
+          initiatedFrom = {
+            node: fromNodeId,
+            clientRect,
+          }
+        }
+        return ({
+          type: 'open.elementDetails' as const,
+          subject,
+          currentView: context.view,
+          ...(initiatedFrom && { initiatedFrom }),
+        })
+      },
+    ),
     'emit: walkthroughStarted': emit(({ context }) => {
       const edge = context.xyedges.find(x => x.id === context.activeWalkthrough?.stepId)
       invariant(edge, 'Invalid walkthrough state')
@@ -602,6 +689,12 @@ const _diagramMachine = setup({
         xyedge: event.edge,
       }
     }),
+    'assign: dynamicViewVariant': assign(({ event }) => {
+      assertEvent(event, 'switch.dynamicViewVariant')
+      return {
+        dynamicViewVariant: event.variant,
+      }
+    }),
   },
 }).createMachine({
   initial: 'initializing',
@@ -630,6 +723,9 @@ const _diagramMachine = setup({
     viewport: { x: 0, y: 0, zoom: 1 },
     xyflow: null,
     syncLayoutActorRef: null,
+    dynamicViewVariant: input.dynamicViewVariant ?? (
+      input.view._type === 'dynamic' ? input.view.variant : 'diagram'
+    ) ?? 'diagram',
     activeWalkthrough: null,
   }),
   // entry: ({ spawn }) => spawn(layoutActor, { id: 'layout', input: { parent: self } }),
@@ -736,34 +832,8 @@ const _diagramMachine = setup({
           ],
         },
         'open.elementDetails': {
-          actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => {
-            let initiatedFrom = null as null | {
-              node: NodeId
-              clientRect: Rect
-            }
-            const fromNodeId = event.fromNode ?? context.view.nodes.find(n => n.modelRef === event.fqn)?.id
-            const internalNode = fromNodeId ? nonNullable(context.xystore).getState().nodeLookup.get(fromNodeId) : null
-            if (fromNodeId && internalNode) {
-              const nodeRect = nodeToRect(internalNode)
-              const zoom = context.xyflow!.getZoom()
-
-              const clientRect = {
-                ...context.xyflow!.flowToScreenPosition(nodeRect),
-                width: nodeRect.width * zoom,
-                height: nodeRect.height * zoom,
-              }
-              initiatedFrom = {
-                node: fromNodeId,
-                clientRect,
-              }
-            }
-            return ({
-              type: 'open.elementDetails' as const,
-              subject: event.fqn,
-              currentView: context.view,
-              ...(initiatedFrom && { initiatedFrom }),
-            })
-          }),
+          guard: 'enabled: ElementDetails',
+          actions: 'open element details',
         },
         'open.relationshipsBrowser': {
           actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
@@ -876,14 +946,29 @@ const _diagramMachine = setup({
                   ]),
                 ]) as any,
                 actions: [
-                  assign({
-                    lastClickedNode,
-                    focusedNode: ({ event }) => event.node.id as NodeId,
-                  }),
+                  'assign lastClickedNode',
+                  'assign: focusedNode',
                   'emit: nodeClick',
                 ],
                 target: 'focused',
               },
+              {
+                // TODO: xstate fails to infer the type of the guard
+                guard: and([
+                  'enabled: ElementDetails',
+                  'click: node has modelFqn',
+                  or([
+                    'click: same node',
+                    'click: selected node',
+                  ]),
+                ]) as any,
+                actions: [
+                  'assign lastClickedNode',
+                  'open source of focused or last clicked node',
+                  'open element details',
+                  'emit: nodeClick',
+                ],
+              },
               {
                 actions: [
                   'assign lastClickedNode',
@@ -907,9 +992,7 @@ const _diagramMachine = setup({
             },
             'focus.node': {
               guard: 'enabled: FocusMode',
-              actions: assign({
-                focusedNode: ({ event }) => event.nodeId as NodeId,
-              }),
+              actions: 'assign: focusedNode',
               target: 'focused',
             },
             'xyflow.edgeClick': {
@@ -952,6 +1035,16 @@ const _diagramMachine = setup({
           }),
           on: {
             'xyflow.nodeClick': [
+              {
+                guard: and([
+                  'click: focused node',
+                  'click: node has modelFqn',
+                ]) as any,
+                actions: [
+                  'open element details',
+                  'emit: nodeClick',
+                ],
+              },
               {
                 guard: 'click: focused node',
                 actions: 'emit: nodeClick',
@@ -959,9 +1052,7 @@ const _diagramMachine = setup({
               },
               {
                 actions: [
-                  assign({
-                    lastClickedNode,
-                  }),
+                  'assign lastClickedNode',
                   raise(({ event }) => ({
                     type: 'focus.node',
                     nodeId: event.node.id as NodeId,
@@ -972,9 +1063,7 @@ const _diagramMachine = setup({
             ],
             'focus.node': {
               actions: [
-                assign({
-                  focusedNode: ({ event }) => event.nodeId,
-                }),
+                'assign: focusedNode',
                 'focus on nodes and edges',
                 'open source of focused or last clicked node',
                 'xyflow:fitFocusedBounds',
@@ -1016,6 +1105,34 @@ const _diagramMachine = setup({
             'xyflow:fitFocusedBounds',
             'emit: walkthroughStarted',
           ],
+          exit: enqueueActions(({ enqueue, context, event }) => {
+            enqueue.stopChild('hotkey')
+            if (context.viewportBeforeFocus) {
+              enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
+            } else {
+              enqueue('xyflow:fitDiagram')
+            }
+            // Disable parallel areas highlight
+            if (context.dynamicViewVariant === 'sequence' && context.activeWalkthrough?.parallelPrefix) {
+              enqueue.assign({
+                xynodes: context.xynodes.map(n => {
+                  if (n.type === 'seq-parallel') {
+                    return Base.setData(n, {
+                      color: SeqParallelAreaColor.default,
+                    })
+                  }
+                  return n
+                }),
+              })
+            }
+            enqueue('undim everything')
+            enqueue.assign({
+              activeWalkthrough: null,
+              viewportBeforeFocus: null,
+            })
+
+            enqueue('emit: walkthroughStopped')
+          }),
           on: {
             'key.esc': {
               target: 'idle',
@@ -1089,20 +1206,6 @@ const _diagramMachine = setup({
               target: 'idle',
             },
           },
-          exit: enqueueActions(({ enqueue, context, event }) => {
-            enqueue.stopChild('hotkey')
-            if (context.viewportBeforeFocus) {
-              enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
-            } else {
-              enqueue('xyflow:fitDiagram')
-            }
-            enqueue('undim everything')
-            enqueue.assign({
-              activeWalkthrough: null,
-              viewportBeforeFocus: null,
-            })
-            enqueue('emit: walkthroughStopped')
-          }),
         },
       },
     },
@@ -1123,10 +1226,10 @@ const _diagramMachine = setup({
               enqueue({
                 type: 'xyflow:alignNodeFromToAfterNavigate',
                 params: {
-                  fromNode: fromNode.id,
+                  fromNode: fromNode.id as NodeId,
                   toPosition: {
-                    x: toNode.position[0],
-                    y: toNode.position[1],
+                    x: toNode.data.position[0],
+                    y: toNode.data.position[1],
                   },
                 },
               })
@@ -1208,10 +1311,10 @@ const _diagramMachine = setup({
               enqueue({
                 type: 'xyflow:alignNodeFromToAfterNavigate',
                 params: {
-                  fromNode: fromNode.id,
+                  fromNode: fromNode.id as NodeId,
                   toPosition: {
-                    x: toNode.position[0],
-                    y: toNode.position[1],
+                    x: toNode.data.position[0],
+                    y: toNode.data.position[1],
                   },
                 },
               })
@@ -1223,6 +1326,19 @@ const _diagramMachine = setup({
               })
               enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
             }
+          } else {
+            // Check if dynamic view mode changed
+            const nextView = event.view
+            if (
+              nextView._type === 'dynamic' &&
+              context.view._type === 'dynamic' &&
+              nextView.variant !== context.view.variant
+            ) {
+              enqueue({
+                type: 'xyflow:setViewportCenter',
+                params: BBox.center(nextView.bounds),
+              })
+            }
           }
           enqueue.assign({
             ...mergeXYNodesEdges({ context, event }),
@@ -1249,6 +1365,9 @@ const _diagramMachine = setup({
         'ensure search actor state',
       ],
     },
+    'switch.dynamicViewVariant': {
+      actions: 'assign: dynamicViewVariant',
+    },
   },
   exit: [
     'stopSyncLayout',
@@ -1270,14 +1389,27 @@ const _diagramMachine = setup({
   ],
 })
 
-function nodeRef(node: DiagramNode) {
-  return node.modelRef ?? node.deploymentRef
+function nodeRef(node: Types.Node) {
+  switch (node.type) {
+    case 'element':
+    case 'compound-element':
+    case 'seq-actor':
+      return node.data.modelFqn
+    case 'deployment':
+    case 'compound-deployment':
+      return node.data.modelFqn ?? node.data.deploymentFqn
+    case 'seq-parallel':
+    case 'view-group':
+      return null
+    default:
+      nonexhaustive(node)
+  }
 }
-function findCorrespondingNode(context: Context, event: { view: DiagramView }) {
+function findCorrespondingNode(context: Context, event: { view: DiagramView; xynodes: Types.Node[] }) {
   const fromNodeId = context.lastOnNavigate?.fromNode
-  const fromNode = fromNodeId && context.view.nodes.find(n => n.id === fromNodeId)
+  const fromNode = fromNodeId && context.xynodes.find(n => n.id === fromNodeId)
   const fromRef = fromNode && nodeRef(fromNode)
-  const toNode = fromRef && event.view.nodes.find(n => nodeRef(n) === fromRef)
+  const toNode = fromRef && event.xynodes.find(n => nodeRef(n) === fromRef)
   return { fromNode, toNode }
 }
 

package/src/state/utils.ts

@@ -1,5 +1,9 @@
-import type { BBox, DiagramEdge, DiagramNode, XYPoint } from '@likec4/core/types'
+import { type DiagramEdge, type DiagramNode, type XYPoint, BBox } from '@likec4/core/types'
+import { nonNullable } from '@likec4/core/utils'
+import { getEdgePosition, getNodeDimensions, getNodesBounds } from '@xyflow/system'
 import type { ActorSystem } from 'xstate'
+import type { XYStoreState } from '../hooks'
+import type { Types } from '../likec4diagram/types'
 import type { OverlaysActorRef } from '../overlays/overlaysActor'
 import type { SearchActorRef } from '../search/searchActor'
 import type { Context } from './diagram-machine'
@@ -47,12 +51,12 @@ export function focusedBounds(params: { context: Context }): { bounds: BBox; dur
 
     const width = node.measured?.width ?? node.width ?? node.initialWidth
     const height = node.measured?.height ?? node.height ?? node.initialHeight
-    return {
-      minX: Math.min(acc.minX, position.x),
-      minY: Math.min(acc.minY, position.y),
-      maxX: Math.max(acc.maxX, position.x + width),
-      maxY: Math.max(acc.maxY, position.y + height),
-    }
+
+    acc.minX = Math.min(acc.minX, position.x)
+    acc.minY = Math.min(acc.minY, position.y)
+    acc.maxX = Math.max(acc.maxX, position.x + width)
+    acc.maxY = Math.max(acc.maxY, position.y + height)
+    return acc
   }, {
     minX: Infinity,
     minY: Infinity,
@@ -76,3 +80,73 @@ export function focusedBounds(params: { context: Context }): { bounds: BBox; dur
     },
   }
 }
+
+const MARGIN = 32
+export function activeSequenceBounds(params: { context: Context }): { bounds: BBox; duration?: number } {
+  const activeWalkthrough = nonNullable(params.context.activeWalkthrough)
+
+  const stepEdge = nonNullable(params.context.xyedges.find(e => e.id === activeWalkthrough.stepId))
+  const xystate = params.context.xystore.getState()
+
+  const sourceNode = nonNullable(xystate.nodeLookup.get(stepEdge.source))
+  const targetNode = nonNullable(xystate.nodeLookup.get(stepEdge.target))
+
+  const actorsBounds = getNodesBounds([sourceNode, targetNode], xystate)
+
+  let stepBounds: BBox | undefined | null
+  if (activeWalkthrough.parallelPrefix) {
+    const parallelArea = params.context.xynodes.find(n =>
+      n.type === 'seq-parallel' && n.data.parallelPrefix === activeWalkthrough.parallelPrefix
+    )
+    if (parallelArea) {
+      stepBounds = {
+        x: parallelArea.position.x,
+        y: parallelArea.position.y,
+        ...getNodeDimensions(parallelArea),
+      }
+    }
+  }
+
+  stepBounds ??= getEdgeBounds(stepEdge, xystate)
+
+  if (stepBounds) {
+    stepBounds = BBox.merge(stepBounds, actorsBounds)
+  } else {
+    stepBounds = actorsBounds
+  }
+
+  return {
+    duration: 350,
+    bounds: BBox.expand(
+      stepBounds,
+      MARGIN,
+    ),
+  }
+}
+
+function getEdgeBounds(edge: Types.Edge, store: XYStoreState): BBox | null {
+  const sourceNode = store.nodeLookup.get(edge.source)
+  const targetNode = store.nodeLookup.get(edge.target)
+
+  if (!sourceNode || !targetNode) {
+    return null
+  }
+
+  const edgePosition = getEdgePosition({
+    id: edge.id,
+    sourceNode,
+    targetNode,
+    sourceHandle: edge.sourceHandle || null,
+    targetHandle: edge.targetHandle || null,
+    connectionMode: store.connectionMode,
+  })
+
+  if (!edgePosition) {
+    return null
+  }
+
+  return BBox.fromPoints([
+    [edgePosition.sourceX, edgePosition.sourceY],
+    [edgePosition.targetX, edgePosition.targetY],
+  ])
+}

package/dist/likec4diagram/useViewToNodesEdges.d.ts

@@ -1,12 +0,0 @@
-import { DiagramView, WhereOperator } from '@likec4/core';
-import { Types } from './types';
-type ViewToNodesEdgeInput = {
-    view: DiagramView;
-    where: WhereOperator | null;
-    nodesSelectable: boolean;
-};
-export declare function useViewToNodesEdges(params: ViewToNodesEdgeInput): {
-    xynodes: Types.Node[];
-    xyedges: Types.Edge[];
-};
-export {};