@likec4/diagram 1.39.5 → 1.40.0

package/src/likec4diagram/xyflow-sequence/sequence-view.ts

@@ -0,0 +1,337 @@
+import {
+  type BBox,
+  type DiagramNode,
+  type LayoutedDynamicView,
+  type NodeId,
+  getParallelStepsPrefix,
+  isStepEdgeId,
+  RichText,
+} from '@likec4/core/types'
+import { DefaultMap, invariant, nonNullable } from '@likec4/core/utils'
+import { hasAtLeast } from 'remeda'
+import type { Types } from '../types'
+import type { Step } from './_types'
+import {
+  CONTINUOUS_OFFSET,
+  SeqParallelAreaColor,
+  SeqZIndex,
+} from './const'
+import { SequenceViewLayouter } from './layouter'
+import { buildCompounds } from './utils'
+
+type Port = {
+  step: Step
+  row: number
+  type: 'source' | 'target'
+  position: 'left' | 'right' | 'top' | 'bottom'
+}
+
+export function sequenceViewToXY(view: LayoutedDynamicView): {
+  bounds: BBox
+  xynodes: Array<Types.SequenceActorNode | Types.SequenceParallelArea | Types.ViewGroupNode>
+  xyedges: Array<Types.SequenceStepEdge>
+} {
+  const actors = [] as Array<DiagramNode>
+  const actorPorts = new DefaultMap<DiagramNode, Port[]>(() => [])
+
+  const steps = [] as Array<Step>
+
+  const getNode = (id: string) => nonNullable(view.nodes.find(n => n.id === id))
+  const parentsLookup: DefaultMap<DiagramNode, DiagramNode[]> = new DefaultMap(
+    key => {
+      const parent = key.parent ? getNode(key.parent) : null
+      if (parent) {
+        return [parent, ...parentsLookup.get(parent)]
+      }
+      return []
+    },
+  )
+
+  const addActor = (...[source, target]: [DiagramNode, DiagramNode]) => {
+    // source actor not yet added
+    if (!actors.includes(source)) {
+      const indexOfTarget = actors.indexOf(target)
+      if (indexOfTarget > 0) {
+        actors.splice(indexOfTarget, 0, source)
+      } else {
+        actors.push(source)
+      }
+    }
+    if (!actors.includes(target)) {
+      actors.push(target)
+    }
+  }
+
+  let row = 0
+
+  for (const edge of view.edges.filter(e => isStepEdgeId(e.id))) {
+    const prevStep = steps.at(-1)
+    const source = getNode(edge.source)
+    const target = getNode(edge.target)
+
+    if (source.children.length || target.children.length) {
+      console.error('Sequence view does not support nested actors')
+      continue
+    }
+
+    let sourceColumn = actors.indexOf(source)
+    let targetColumn = actors.indexOf(target)
+
+    const alreadyAdded = sourceColumn >= 0 && targetColumn >= 0
+
+    if (!alreadyAdded) {
+      if (edge.dir === 'back') {
+        addActor(target, source)
+      } else {
+        addActor(source, target)
+      }
+      sourceColumn = actors.indexOf(source)
+      targetColumn = actors.indexOf(target)
+    }
+
+    const isSelfLoop = source === target
+    const isBack = sourceColumn > targetColumn
+    const parallelPrefix = getParallelStepsPrefix(edge.id)
+
+    let isContinuing = false
+    if (prevStep && prevStep.target == source && prevStep.parallelPrefix === parallelPrefix) {
+      isContinuing = prevStep.isSelfLoop !== isSelfLoop || prevStep.isBack === isBack
+    }
+
+    if (!isContinuing) {
+      row++
+    }
+
+    const step: Step = {
+      id: edge.id,
+      from: {
+        column: sourceColumn,
+        row,
+      },
+      to: {
+        column: targetColumn,
+        row: isSelfLoop ? ++row : row,
+      },
+      edge,
+      isSelfLoop,
+      isBack,
+      parallelPrefix,
+      offset: isContinuing ? (prevStep?.offset ?? 0) + CONTINUOUS_OFFSET : 0,
+      source,
+      target,
+      label: edge.labelBBox
+        ? {
+          height: edge.labelBBox.height + 8 + (edge.navigateTo ? 20 : 0),
+          width: edge.labelBBox.width + 16,
+          text: edge.label,
+        }
+        : null,
+    }
+    steps.push(step)
+    actorPorts.get(source).push({ step, row, type: 'source', position: isBack && !isSelfLoop ? 'left' : 'right' })
+    actorPorts.get(target).push({ step, row, type: 'target', position: isBack || isSelfLoop ? 'right' : 'left' })
+  }
+
+  // Update columns, as actors may have been re-ordered
+  for (const step of steps) {
+    step.from.column = actors.indexOf(step.source)
+    step.to.column = actors.indexOf(step.target)
+  }
+
+  invariant(hasAtLeast(actors, 1), 'actors array must not be empty')
+
+  const layout = new SequenceViewLayouter({
+    actors,
+    steps,
+    compounds: buildCompounds(actors, view.nodes),
+  })
+
+  const bounds = layout.getViewBounds()
+
+  return {
+    bounds,
+    xynodes: [
+      ...layout.getCompoundBoxes().map((box, i) => toCompoundArea(box, i, view)),
+      ...layout.getParallelBoxes().map(box => toSeqParallelArea(box, view)),
+      ...actors.map(actor =>
+        toSeqActorNode({
+          actor,
+          ports: actorPorts.get(actor),
+          bounds,
+          layout,
+          view,
+        })
+      ),
+    ],
+    xyedges: steps.map(({ id, edge, ...step }): Types.SequenceStepEdge => ({
+      id: id,
+      type: 'seq-step',
+      data: {
+        id,
+        label: step.label?.text ?? null,
+        technology: edge.technology,
+        notes: RichText.from(edge.notes),
+        navigateTo: edge.navigateTo,
+        controlPoints: edge.controlPoints ?? null,
+        labelBBox: {
+          x: 0,
+          y: 0,
+          width: step.label?.width ?? edge.labelBBox?.width ?? 32,
+          height: step.label?.height ?? edge.labelBBox?.height ?? 32,
+        },
+        labelXY: null,
+        points: edge.points,
+        color: edge.color ?? 'gray',
+        line: edge.line ?? 'solid',
+        dir: 'forward',
+        head: 'normal',
+        tail: 'none',
+      },
+      selectable: true,
+      focusable: false,
+      zIndex: 20,
+      interactionWidth: 40,
+      source: step.source.id,
+      sourceHandle: id + '_source',
+      target: step.target.id,
+      targetHandle: id + '_target',
+    })),
+  }
+}
+
+/**
+ * Shows a compound as a view group node
+ */
+function toCompoundArea(
+  { node, x, y, width, height, depth }: BBox & { node: DiagramNode; depth: number },
+  index: number,
+  view: LayoutedDynamicView,
+): Types.ViewGroupNode {
+  return {
+    id: `${node.id}-${index}` as NodeId,
+    type: 'view-group',
+    data: {
+      id: node.id,
+      title: node.title,
+      color: node.color ?? 'gray',
+      shape: node.shape,
+      style: node.style,
+      tags: node.tags,
+      position: [x, y],
+      viewId: view.id,
+      depth,
+      isViewGroup: true,
+    },
+    // zIndex: SeqZIndex.compound,
+    position: {
+      x,
+      y,
+    },
+    draggable: false,
+    selectable: false,
+    focusable: false,
+    style: {
+      pointerEvents: 'none',
+    },
+    width,
+    initialWidth: width,
+    height,
+    initialHeight: height,
+  }
+}
+
+function toSeqParallelArea(
+  { parallelPrefix, x, y, width, height }: BBox & { parallelPrefix: string },
+  view: LayoutedDynamicView,
+): Types.SequenceParallelArea {
+  return {
+    id: `seq-parallel-${parallelPrefix}` as NodeId,
+    type: 'seq-parallel',
+    data: {
+      id: `seq-parallel-${parallelPrefix}` as NodeId,
+      title: 'PARALLEL',
+      technology: null,
+      color: SeqParallelAreaColor.default,
+      shape: 'rectangle',
+      style: {},
+      tags: [],
+      position: [x, y],
+      level: 0,
+      icon: null,
+      width,
+      height,
+      description: RichText.EMPTY,
+      viewId: view.id,
+      parallelPrefix,
+    },
+    zIndex: SeqZIndex.parallel,
+    position: {
+      x,
+      y,
+    },
+    draggable: false,
+    deletable: false,
+    selectable: false,
+    focusable: false,
+    style: {
+      pointerEvents: 'none',
+    },
+    width,
+    initialWidth: width,
+    height,
+    initialHeight: height,
+  }
+}
+
+function toSeqActorNode({ actor, ports, bounds, layout, view }: {
+  actor: DiagramNode
+  ports: Port[]
+  bounds: BBox
+  layout: SequenceViewLayouter
+  view: LayoutedDynamicView
+}): Types.SequenceActorNode {
+  const { x, y, width, height } = layout.getActorBox(actor)
+  return {
+    id: actor.id,
+    type: 'seq-actor',
+    data: {
+      id: actor.id,
+      position: [x, y],
+      level: 0,
+      icon: actor.icon ?? null,
+      isMultiple: actor.style.multiple ?? false,
+      title: actor.title,
+      width,
+      height,
+      color: actor.color,
+      navigateTo: actor.navigateTo ?? null,
+      shape: actor.shape,
+      style: actor.style,
+      tags: actor.tags,
+      modelFqn: actor.modelRef ?? null,
+      technology: actor.technology,
+      description: RichText.from(actor.description),
+      viewHeight: bounds.height,
+      viewId: view.id,
+      ports: ports.map((p): Types.SequenceActorNodePort => {
+        const bbox = layout.getPortCenter(p.step, p.type)
+        return ({
+          id: p.step.id + '_' + p.type,
+          cx: bbox.cx - x,
+          cy: bbox.cy - y,
+          height: bbox.height,
+          type: p.type,
+          position: p.position,
+        })
+      }),
+    },
+    deletable: false,
+    selectable: true,
+    zIndex: SeqZIndex.actor,
+    position: { x, y },
+    width,
+    initialWidth: width,
+    height,
+    initialHeight: height,
+  }
+}

package/src/likec4diagram/xyflow-sequence/utils.ts

@@ -0,0 +1,112 @@
+import type { DiagramEdge, DiagramNode, EdgeId } from '@likec4/core/types'
+import { isAncestor, nonNullable, Stack } from '@likec4/core/utils'
+import { groupBy, mapValues, pipe, values } from 'remeda'
+import type { Compound, ParallelRect, Step } from './_types'
+
+/**
+ * From steps find boxes that must be marked as parallel on the layout
+ */
+export function findParallelRects(steps: Array<Step>): Array<ParallelRect> {
+  return pipe(
+    steps,
+    groupBy(s => s.parallelPrefix ?? undefined),
+    mapValues((steps, parallelPrefix) => {
+      return steps.reduce(
+        (acc, step) => {
+          acc.min.column = Math.min(acc.min.column, step.from.column, step.to.column)
+          acc.min.row = Math.min(acc.min.row, step.from.row, step.to.row)
+
+          acc.max.column = Math.max(acc.max.column, step.from.column, step.to.column)
+          acc.max.row = Math.max(acc.max.row, step.from.row, step.to.row)
+
+          return acc
+        },
+        {
+          parallelPrefix,
+          min: {
+            column: Infinity,
+            row: Infinity,
+          },
+          max: {
+            column: -Infinity,
+            row: -Infinity,
+          },
+        } as ParallelRect,
+      )
+    }),
+    values(),
+  )
+}
+
+/**
+ * Builds a tree of compounds from actors and nodes.
+ * @param actors the actors in the sequence view
+ * @param nodes the nodes in likec4 diagram
+ * @returns an array of compounds where each compound is a node in the sequence view
+ * that is an ancestor of one of the actors
+ */
+export function buildCompounds(actors: Array<DiagramNode>, nodes: Array<DiagramNode>): Array<Compound> {
+  if (actors.length === 0 || actors.length === nodes.length) {
+    return []
+  }
+  const getNode = (id: string) => nonNullable(nodes.find(n => n.id === id))
+  function parentsLookup(node: DiagramNode): DiagramNode[] {
+    const parent = node.parent ? getNode(node.parent) : null
+    if (parent) {
+      return [parent, ...parentsLookup(parent)]
+    }
+    return []
+  }
+
+  const stack = new Stack<Compound>()
+  const result = [] as Array<Compound>
+
+  actors.forEach(actor => {
+    const _ancestors = parentsLookup(actor)
+    if (_ancestors.length === 0) {
+      stack.clear()
+      return
+    }
+    const ancestors = Stack.from(_ancestors)
+    let compound: DiagramNode | undefined
+    let parent: DiagramNode | undefined
+    while (true) {
+      compound = stack.peek()?.node
+      parent = ancestors.peek()
+      if (!parent || !compound) {
+        break
+      }
+      // Drop ancestors that are ancestors of the current compound
+      if (isAncestor(parent.id, compound.id) || parent.id === compound.id) {
+        ancestors.pop()
+        continue
+      }
+      // Drop compounds that are not ancestors of the current parent
+      if (!isAncestor(compound.id, parent.id)) {
+        stack.pop()
+        continue
+      }
+      break
+    }
+
+    // Add ancestors to the stack
+    while (parent = ancestors.pop()) {
+      const parentAsCompound = {
+        node: parent,
+        from: actor,
+        to: actor,
+        nested: [],
+      }
+      let compound = stack.peek()
+      if (!compound) {
+        result.push(parentAsCompound)
+      } else {
+        compound.nested.push(parentAsCompound)
+      }
+      stack.push(parentAsCompound)
+    }
+    stack.forEach(c => c.to = actor)
+  })
+
+  return result
+}

package/src/navigationpanel/NavigationPanelControls.tsx

@@ -13,7 +13,7 @@ import { type NavigationPanelActorSnapshot } from './actor'
 import { BurgerButton, NavigationButtons, OpenSource, SearchControl, ToggleReadonly, ViewDetailsCard } from './controls'
 import { useNavigationActor } from './hooks'
 import { breadcrumbTitle } from './styles.css'
-import { StartWalkthroughButton } from './walkthrough'
+import { DynamicViewControls } from './walkthrough'
 
 const selectBreadcrumbs = ({ context }: NavigationPanelActorSnapshot) => {
   const folder = context.viewModel.folder
@@ -126,7 +126,7 @@ export const NavigationPanelControls = () => {
         <OpenSource />
         <ToggleReadonly />
       </m.div>
-      {enableDynamicViewWalkthrough && isDynamicView && <StartWalkthroughButton key="walkthrough-button" />}
+      {enableDynamicViewWalkthrough && isDynamicView && <DynamicViewControls key="dynamic-view-controls" />}
       {enableSearch && <SearchControl key="search-control" />}
     </AnimatePresence>
   )

package/src/navigationpanel/controls/ViewDetailsCard.tsx

@@ -41,6 +41,9 @@ export const ViewDetailsCard = (props: PopoverProps) => {
       shadow="xl"
       clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
       trapFocus
+      offset={{
+        mainAxis: 4,
+      }}
       {...portalProps}
       {...props}
     >
@@ -63,8 +66,8 @@ const ViewDetailsCardTrigger = ({ linksCount }: { linksCount: number }) => (
         'group',
         hstack({
           gap: '2',
-          paddingInline: 'xxs',
-          paddingBlock: 'xxs',
+          paddingInline: '2',
+          paddingBlock: '1',
           rounded: 'sm',
           userSelect: 'none',
           cursor: 'pointer',

package/src/navigationpanel/dropdown/ProjectsMenu.tsx

@@ -23,7 +23,11 @@ export function ProjectsMenu(props: ButtonProps) {
         }}>
         Project
       </Box>
-      <Menu shadow="md" position="bottom-start" offset={{ mainAxis: 2 }} closeOnItemClick>
+      <Menu
+        withinPortal={false} // if we render menu in portal, NavigationPanelDropdown receives onMouseLeave event
+        shadow="md"
+        position="bottom-start"
+        offset={{ mainAxis: 2 }}>
         <MenuTarget>
           <Button
             tabIndex={-1}

package/src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx

@@ -1,9 +1,7 @@
-import { RichText } from '@likec4/core'
 import { css } from '@likec4/styles/css'
 import { Box } from '@likec4/styles/jsx'
 import { Badge, Button, Portal } from '@mantine/core'
 import {
-  IconPlayerPlayFilled,
   IconPlayerSkipBackFilled,
   IconPlayerSkipForwardFilled,
   IconPlayerStopFilled,
@@ -13,40 +11,7 @@ import * as m from 'motion/react-m'
 import { isTruthy } from 'remeda'
 import { useMantinePortalProps } from '../../hooks'
 import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
-import { Tooltip } from '../_common'
-import { useNavigationActor } from '../hooks'
-
-const TriggerWalkthroughButton = Button.withProps({
-  // Button is polymorphic, but we dont want it to inherit the motion props
-  component: m.button as any as 'button',
-  // @ts-expect-error
-  layoutId: 'trigger-dynamic-walkthrough',
-  variant: 'filled',
-  size: 'xs',
-  fw: '500',
-  className: css({
-    flexShrink: 0,
-  }),
-})
-
-export const StartWalkthroughButton = () => {
-  const diagram = useDiagram()
-  const actor = useNavigationActor()
-  return (
-    <Tooltip label="Start Dynamic View Walkthrough">
-      <TriggerWalkthroughButton
-        onClick={e => {
-          e.stopPropagation()
-          actor.closeDropdown()
-          diagram.startWalkthrough()
-        }}
-        rightSection={<IconPlayerPlayFilled size={10} />}
-      >
-        Start
-      </TriggerWalkthroughButton>
-    </Tooltip>
-  )
-}
+import { TriggerWalkthroughButton } from './DynamicViewControls'
 
 const PrevNextButton = Button.withProps({
   // Button is polymorphic, but we dont want it to inherit the motion props
@@ -82,7 +47,7 @@ const ParallelFrame = () => {
   )
 }
 
-export const ActiveWalkthroughControls = () => {
+export function ActiveWalkthroughControls() {
   const diagram = useDiagram()
   const {
     isParallel,
@@ -90,7 +55,6 @@ export const ActiveWalkthroughControls = () => {
     hasPrevious,
     currentStep,
     totalSteps,
-    notes,
   } = useDiagramContext(s => {
     const currentStepIndex = s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId)
     return ({
@@ -99,14 +63,15 @@ export const ActiveWalkthroughControls = () => {
       hasPrevious: currentStepIndex > 0,
       currentStep: currentStepIndex + 1,
       totalSteps: s.xyedges.length,
-      notes: s.xyedges[currentStepIndex]?.data?.notes ?? RichText.EMPTY,
     })
   })
 
   return (
     <AnimatePresence propagate>
       <TriggerWalkthroughButton
+        key="stop-walkthrough"
         variant="light"
+        size="xs"
         color="orange"
         mr={'sm'}
         onClick={e => {
@@ -161,7 +126,7 @@ export const ActiveWalkthroughControls = () => {
       >
         Next
       </PrevNextButton>
-      {isParallel && <ParallelFrame />}
+      {isParallel && <ParallelFrame key="parallel-frame" />}
     </AnimatePresence>
   )
 }