@likec4/diagram 1.40.0 → 1.42.0

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx

@@ -1,130 +0,0 @@
-import { cx as clsx } from '@likec4/styles/css'
-import { Badge, Box, Button, ButtonGroup } from '@mantine/core'
-import {
-  IconPlayerPlayFilled,
-  IconPlayerSkipBackFilled,
-  IconPlayerSkipForwardFilled,
-  IconPlayerStopFilled,
-} from '@tabler/icons-react'
-import { AnimatePresence, m } from 'motion/react'
-import { isNonNull, isTruthy } from 'remeda'
-import { useXYStore } from '../../../hooks'
-import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
-import * as styles from './DynamicViewWalkthrough.css'
-
-export function DynamicViewWalkthrough() {
-  const isMobile = useXYStore(s => s.width <= 750)
-  const {
-    isActive,
-    isParallel,
-    hasNext,
-    hasPrevious,
-  } = useDiagramContext(s => ({
-    isActive: isNonNull(s.activeWalkthrough),
-    isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
-    hasNext: s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId) < s.xyedges.length - 1,
-    hasPrevious: s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId) > 0,
-  }))
-  const diagram = useDiagram()
-
-  const buttonProps = {
-    className: styles.btn,
-    size: isMobile ? 'compact-md' : 'lg',
-    radius: isMobile ? 'lg' : 'xl',
-  }
-
-  // const startWalkthrough = (e: React.MouseEvent) => {
-  //   e.stopPropagation()
-  //   const {
-  //     xyedges,
-  //     activateWalkthrough
-  //   } = diagramApi.getState()
-  //   const firstEdge = nonNullable(first(xyedges), 'expected at least one edge')
-  //   activateWalkthrough(firstEdge.data.edge.id)
-  // }
-
-  // const nextStep = (increment = 1) => (e: React.MouseEvent) => {
-  //   e.stopPropagation()
-  //   nextDynamicStep(increment)
-  // }
-
-  return (
-    <AnimatePresence>
-      {isParallel && (
-        <Box
-          layout
-          key={'parallel-frame'}
-          component={m.div}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          className={clsx('react-flow__panel', styles.parallelStateFrame)}
-        />
-      )}
-      <Box
-        className={clsx('react-flow__panel', styles.container)}
-        onClick={(e) => e.stopPropagation()}
-        onDoubleClick={(e) => e.stopPropagation()}
-      >
-        {!isActive
-          && (
-            <Button
-              {...buttonProps}
-              className={clsx(styles.buttons, styles.btn)}
-              rightSection={<IconPlayerPlayFilled />}
-              onClick={() => diagram.startWalkthrough()}
-              px={'xl'}>
-              Start
-            </Button>
-          )}
-        {isParallel && (
-          <Badge
-            key={'parallel-badge'}
-            component={m.div}
-            initial={{ opacity: 0.05, transform: 'translateY(20px)' }}
-            animate={{ opacity: 1, transform: 'translateY(0)' }}
-            exit={{
-              opacity: 0,
-              transform: 'translateY(20px)',
-            }}
-            variant="gradient"
-            size={isMobile ? 'xs' : 'md'}
-            gradient={{ from: 'red', to: 'orange', deg: 90 }}
-            radius={'sm'}>
-            parallel
-          </Badge>
-        )}
-        {isActive && (
-          <ButtonGroup className={styles.buttons}>
-            <Button
-              {...buttonProps}
-              pl={'lg'}
-              disabled={!hasPrevious}
-              onClick={() => diagram.walkthroughStep('previous')}>
-              <IconPlayerSkipBackFilled />
-            </Button>
-
-            <Button
-              {...buttonProps}
-              px={hasNext ? 'md' : 'xl'}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.stopWalkthrough()
-              }}>
-              {hasNext && <IconPlayerStopFilled />}
-              {!hasNext && 'End'}
-            </Button>
-            {hasNext && (
-              <Button
-                {...buttonProps}
-                pr={'lg'}
-                onClick={() => diagram.walkthroughStep('next')}>
-                <IconPlayerSkipForwardFilled />
-              </Button>
-            )}
-          </ButtonGroup>
-        )}
-      </Box>
-    </AnimatePresence>
-  )
-}

package/src/likec4diagram/useLayoutConstraints.ts

@@ -1,281 +0,0 @@
-import { type NodeId, type NonEmptyArray, nonNullable } from '@likec4/core'
-import { type InternalNode as RFInternalNode, type NodeChange, type OnNodeDrag, type XYPosition } from '@xyflow/react'
-import { getNodeDimensions } from '@xyflow/system'
-import { useMemo, useRef } from 'react'
-import { filter, hasAtLeast, isNullish, map, pipe } from 'remeda'
-import { type XYStoreApi, useXYStoreApi } from '../hooks'
-// import { type XYStoreApi } from '../hooks/useXYFlow'
-import { useDiagram } from '../hooks/useDiagram'
-import type { Types } from './types'
-
-type InternalNode = RFInternalNode<Types.Node>
-
-abstract class Rect {
-  static readonly LeftPadding = 40
-  static readonly RightPadding = 40
-  static readonly TopPadding = 55
-  static readonly BottomPadding = 40
-
-  id!: string
-  minX: number = Infinity
-  minY: number = Infinity
-  maxX: number = -Infinity
-  maxY: number = -Infinity
-
-  get positionAbsolute(): XYPosition {
-    return {
-      x: this.minX,
-      y: this.minY,
-    }
-  }
-
-  set positionAbsolute(pos: XYPosition) {
-    const x = Math.round(pos.x)
-    const y = Math.round(pos.y)
-    this.maxX += x - this.minX
-    this.maxY += y - this.minY
-
-    this.minX = x
-    this.minY = y
-  }
-
-  get dimensions() {
-    return {
-      width: this.maxX - this.minX,
-      height: this.maxY - this.minY,
-    }
-  }
-
-  // Position relative to parent
-  get position(): XYPosition {
-    const positionAbsolute = this.positionAbsolute
-    if (!this.parent) {
-      return positionAbsolute
-    }
-    const parentPosition = this.parent.positionAbsolute
-    return {
-      x: positionAbsolute.x - parentPosition.x,
-      y: positionAbsolute.y - parentPosition.y,
-    }
-  }
-  protected abstract parent: CompoundRect | null
-
-  constructor(
-    xynode: InternalNode,
-    parent: CompoundRect | null = null,
-  ) {
-    this.id = xynode.id
-
-    this.positionAbsolute = !parent ? xynode.position : {
-      x: xynode.position.x + parent.minX,
-      y: xynode.position.y + parent.minY,
-    }
-
-    const { width, height } = getNodeDimensions(xynode)
-
-    this.maxX = this.minX + Math.ceil(width)
-    this.maxY = this.minY + Math.ceil(height)
-
-    if (parent) {
-      parent.children.push(this)
-    }
-  }
-}
-
-class CompoundRect extends Rect {
-  public readonly children = [] as Rect[]
-
-  constructor(
-    xynode: InternalNode,
-    public readonly parent: CompoundRect | null = null,
-  ) {
-    super(xynode, parent)
-  }
-}
-
-class Leaf extends Rect {
-  constructor(
-    xynode: InternalNode,
-    public readonly parent: CompoundRect | null = null,
-  ) {
-    super(xynode, parent)
-  }
-}
-
-export function createLayoutConstraints(
-  xyflowApi: XYStoreApi,
-  editingNodeIds: NonEmptyArray<string>,
-) {
-  const { parentLookup, nodeLookup } = xyflowApi.getState()
-  const rects = new Map<string, Leaf | CompoundRect>()
-
-  const ancestorsOf = (nodeId: string) => {
-    const ancestors = [] as string[]
-    const xynode = nodeLookup.get(nodeId)
-    let parent = xynode?.parentId
-    let parentNode: InternalNode | undefined
-    while (parent && (parentNode = nodeLookup.get(parent))) {
-      ancestors.push(parentNode.id as NodeId)
-      parent = parentNode.parentId
-    }
-    return ancestors
-  }
-
-  const ancestorsOfDraggingNodes = new Set(
-    editingNodeIds.flatMap(ancestorsOf),
-  )
-
-  const traverse: Array<{ xynode: InternalNode; parent: CompoundRect | null }> = [...nodeLookup.values()].flatMap(x =>
-    !x.parentId ? { xynode: x, parent: null } : []
-  )
-
-  while (traverse.length > 0) {
-    const { xynode, parent } = traverse.shift()!
-    const isEditing = editingNodeIds.includes(xynode.id)
-
-    // Traverse children if the node is a compound, not dragging, and is an ancestor of the dragging node
-    const shouldTraverse = !isEditing
-      && xynode.type !== 'element'
-      && xynode.type !== 'deployment'
-      && ancestorsOfDraggingNodes.has(xynode.id)
-
-    if (shouldTraverse) {
-      const rect = new CompoundRect(xynode, parent)
-      rects.set(xynode.id, rect)
-      parentLookup.get(xynode.id)?.forEach(child => {
-        traverse.push({
-          xynode: child,
-          parent: rect as CompoundRect,
-        })
-      })
-    } else {
-      rects.set(xynode.id, new Leaf(xynode, parent))
-    }
-  }
-
-  const rectsToUpdate = [...rects.values()]
-  applyConstraints(rectsToUpdate)
-
-  function applyConstraints(targets: Rect[]) {
-    for (const r of targets) {
-      if (!(r instanceof CompoundRect)) {
-        continue
-      }
-
-      applyConstraints(r.children)
-
-      const childrenBB = {
-        minX: Infinity,
-        minY: Infinity,
-        maxX: -Infinity,
-        maxY: -Infinity,
-      }
-
-      for (const child of r.children) {
-        childrenBB.minX = Math.min(childrenBB.minX, child.minX)
-        childrenBB.minY = Math.min(childrenBB.minY, child.minY)
-        childrenBB.maxX = Math.max(childrenBB.maxX, child.maxX)
-        childrenBB.maxY = Math.max(childrenBB.maxY, child.maxY)
-      }
-
-      r.minX = childrenBB.minX - Rect.LeftPadding
-      r.minY = childrenBB.minY - Rect.TopPadding
-      r.maxX = childrenBB.maxX + Rect.RightPadding
-      r.maxY = childrenBB.maxY + Rect.BottomPadding
-    }
-  }
-
-  function updateXYFlowNodes() {
-    applyConstraints(rectsToUpdate)
-    xyflowApi.getState().triggerNodeChanges(
-      rectsToUpdate.reduce((acc, r) => {
-        acc.push({
-          id: r.id,
-          type: 'position',
-          dragging: false,
-          position: r.position,
-          positionAbsolute: r.positionAbsolute,
-        })
-        if (r instanceof CompoundRect) {
-          acc.push({
-            id: r.id,
-            type: 'dimensions',
-            setAttributes: true,
-            dimensions: r.dimensions,
-          })
-        }
-        return acc
-      }, [] as NodeChange<Types.Node>[]),
-    )
-  }
-
-  let animationFrameId: number | null = null
-
-  function onMove() {
-    if (rectsToUpdate.length === 0) {
-      return
-    }
-    animationFrameId ??= requestAnimationFrame(() => {
-      animationFrameId = null
-      const { nodeLookup } = xyflowApi.getState()
-      for (const id of editingNodeIds) {
-        const rect = nonNullable(rects.get(id))
-        const node = nonNullable(nodeLookup.get(id))
-        rect.positionAbsolute = node.internals.positionAbsolute
-      }
-      updateXYFlowNodes()
-    })
-  }
-
-  return {
-    rects: rects as ReadonlyMap<string, Leaf | CompoundRect>,
-    updateXYFlowNodes,
-    onMove,
-  }
-}
-
-type LayoutConstraints = {
-  onNodeDragStart: OnNodeDrag<Types.Node>
-  onNodeDrag: OnNodeDrag<Types.Node>
-  onNodeDragStop: OnNodeDrag<Types.Node>
-}
-/**
- * Keeps the layout constraints (parent nodes and children) when dragging a node
- */
-export function useLayoutConstraints(): LayoutConstraints {
-  const xystore = useXYStoreApi()
-  const diagram = useDiagram()
-  const solverRef = useRef<ReturnType<typeof createLayoutConstraints>>(undefined)
-  return useMemo((): LayoutConstraints => {
-    let wasPending = false
-    const initial = { x: 0, y: 0 }
-    let moved = false
-    return ({
-      onNodeDragStart: (_event, xynode) => {
-        wasPending = diagram.cancelSaveManualLayout()
-        const { nodeLookup } = xystore.getState()
-        const draggingNodes = pipe(
-          Array.from(nodeLookup.values()),
-          filter(n => n.draggable !== false && (n.dragging === true || n.id === xynode.id || n.selected === true)),
-        )
-        if (hasAtLeast(draggingNodes, 1)) {
-          solverRef.current = createLayoutConstraints(xystore, map(draggingNodes, x => x.id))
-        }
-        initial.x = _event.clientX
-        initial.y = _event.clientY
-        moved = false
-      },
-      onNodeDrag: (_event) => {
-        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4
-        solverRef.current?.onMove()
-      },
-      onNodeDragStop: (_event) => {
-        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4
-        if (wasPending || moved) {
-          diagram.scheduleSaveManualLayout()
-        }
-        solverRef.current = undefined
-      },
-    })
-  }, [xystore, diagram])
-}

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

@@ -1,275 +0,0 @@
-import {
-  type BBox,
-  type DiagramEdge,
-  type DiagramNode,
-  type DiagramView,
-  type EdgeId,
-  type Fqn,
-  type NodeId,
-  type WhereOperator,
-  GroupElementKind,
-  invariant,
-  nonNullable,
-  Queue,
-  RichText,
-  whereOperatorAsPredicate,
-} from '@likec4/core'
-import { hasAtLeast, pick } from 'remeda'
-import { ZIndexes } from '../../base/const'
-import type { Types } from '../types'
-
-export function diagramToXY(opts: {
-  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | 'bounds' | '_type'>
-  where: WhereOperator | null
-  nodesSelectable: boolean
-}): {
-  bounds: BBox
-  xynodes: Types.Node[]
-  xyedges: Types.Edge[]
-} {
-  const {
-    view,
-    nodesSelectable: selectable,
-  } = opts
-  const isDynamicView = view._type === 'dynamic',
-    xynodes = [] as Types.Node[],
-    xyedges = [] as Types.Edge[],
-    nodeLookup = new Map<Fqn, DiagramNode>()
-
-  type TraverseItem = {
-    node: DiagramNode
-    parent: DiagramNode | null
-  }
-  const queue = Queue.from(view.nodes.reduce(
-    (acc, node) => {
-      nodeLookup.set(node.id, node)
-      if (!node.parent) {
-        acc.push({ node, parent: null })
-      }
-      return acc
-    },
-    [] as TraverseItem[],
-  ))
-
-  let visiblePredicate = (_nodeOrEdge: DiagramNode | DiagramEdge): boolean => true
-  if (opts.where) {
-    try {
-      const filterablePredicate = whereOperatorAsPredicate(opts.where)
-      visiblePredicate = i =>
-        filterablePredicate({
-          ...pick(i, ['tags', 'kind']),
-          ...('source' in i ? { source: nodeById(i.source) } : i),
-          ...('target' in i ? { target: nodeById(i.target) } : i),
-        })
-    } catch (e) {
-      console.error('Error in where filter:', e)
-    }
-  }
-  // const visiblePredicate = opts.where ? whereOperatorAsPredicate(opts.where) : () => true
-
-  // namespace to force unique ids
-  const ns = ''
-  const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
-
-  let next: TraverseItem | undefined
-  while ((next = queue.dequeue())) {
-    const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind
-    if (isCompound) {
-      for (const child of node.children) {
-        queue.enqueue({ node: nodeById(child), parent: node })
-      }
-    }
-
-    const position = {
-      x: node.position[0],
-      y: node.position[1],
-    }
-    if (parent) {
-      position.x -= parent.position[0]
-      position.y -= parent.position[1]
-    }
-
-    const id = ns + node.id as NodeId
-
-    const base = {
-      id,
-      selectable: selectable && node.kind !== GroupElementKind,
-      focusable: selectable && node.kind !== GroupElementKind,
-      deletable: false,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      style: {
-        width: node.width,
-        height: node.height,
-      },
-      initialWidth: node.width,
-      initialHeight: node.height,
-      hidden: node.kind !== GroupElementKind && !visiblePredicate(node),
-      ...(parent && {
-        parentId: ns + parent.id,
-      }),
-    } satisfies Omit<Types.Node, 'data' | 'type'>
-
-    const compoundData = {
-      viewId: view.id,
-      id: node.id,
-      title: node.title,
-      color: node.color,
-      shape: node.shape,
-      style: node.style,
-      depth: node.depth ?? 0,
-      icon: node.icon ?? 'none',
-      tags: node.tags ?? null,
-      position: node.position,
-    } satisfies Types.CompoundNodeData
-
-    const leafNodeData = {
-      viewId: view.id,
-      id: node.id,
-      title: node.title,
-      technology: node.technology,
-      description: RichText.from(node.description),
-      height: node.height,
-      width: node.width,
-      level: node.level,
-      color: node.color,
-      shape: node.shape,
-      style: node.style,
-      icon: node.icon ?? null,
-      tags: node.tags,
-      position: node.position,
-      isMultiple: node.style?.multiple ?? false,
-    } satisfies Types.LeafNodeData
-
-    if (node.kind === GroupElementKind) {
-      xynodes.push({
-        ...base,
-        type: 'view-group',
-        data: {
-          isViewGroup: true,
-          ...compoundData,
-        },
-        dragHandle: '.likec4-compound-title',
-      })
-      continue
-    }
-
-    const modelFqn = node.modelRef ?? null
-    const deploymentFqn = node.deploymentRef ?? null
-    if (!modelFqn && !deploymentFqn) {
-      console.error('Invalid node', node)
-      throw new Error('Element should have either modelRef or deploymentRef')
-    }
-
-    const navigateTo = { navigateTo: node.navigateTo ?? null }
-
-    switch (true) {
-      case isCompound && !!deploymentFqn: {
-        xynodes.push(
-          {
-            ...base,
-            type: 'compound-deployment',
-            data: {
-              ...compoundData,
-              ...navigateTo,
-              deploymentFqn: deploymentFqn,
-              modelFqn,
-            },
-            dragHandle: '.likec4-compound-title',
-          } satisfies Types.CompoundDeploymentNode,
-        )
-        break
-      }
-      case isCompound: {
-        invariant(!!modelFqn, 'ModelRef expected')
-        xynodes.push(
-          {
-            ...base,
-            type: 'compound-element',
-            data: {
-              ...compoundData,
-              ...navigateTo,
-              modelFqn,
-            },
-            dragHandle: '.likec4-compound-title',
-          } satisfies Types.CompoundElementNode,
-        )
-        break
-      }
-      case !!deploymentFqn: {
-        xynodes.push(
-          {
-            ...base,
-            type: 'deployment',
-            data: {
-              ...leafNodeData,
-              ...navigateTo,
-              deploymentFqn: deploymentFqn,
-              modelFqn: modelFqn,
-            },
-          } satisfies Types.DeploymentElementNode,
-        )
-        break
-      }
-      default: {
-        invariant(!!modelFqn, 'ModelRef expected')
-        xynodes.push(
-          {
-            ...base,
-            type: 'element',
-            data: {
-              ...leafNodeData,
-              ...navigateTo,
-              modelFqn: modelFqn,
-            },
-          } satisfies Types.ElementNode,
-        )
-      }
-    }
-  }
-  for (const edge of view.edges) {
-    const source = edge.source
-    const target = edge.target
-    const id = ns + edge.id as EdgeId
-
-    if (!hasAtLeast(edge.points, 2)) {
-      console.error('edge should have at least 2 points', edge)
-      continue
-    }
-
-    xyedges.push({
-      id,
-      type: 'relationship',
-      source: ns + source,
-      target: ns + target,
-      zIndex: ZIndexes.Edge,
-      selectable: selectable,
-      hidden: !visiblePredicate(edge),
-      deletable: false,
-      data: {
-        id: edge.id,
-        label: edge.label,
-        technology: edge.technology,
-        notes: RichText.from(edge.notes),
-        navigateTo: edge.navigateTo,
-        controlPoints: edge.controlPoints ?? null,
-        labelBBox: edge.labelBBox ?? null,
-        labelXY: edge.labelBBox ? { x: edge.labelBBox.x, y: edge.labelBBox.y } : null,
-        points: edge.points,
-        color: edge.color ?? 'gray',
-        line: edge.line ?? 'dashed',
-        dir: edge.dir ?? 'forward',
-        head: edge.head ?? 'normal',
-        tail: edge.tail ?? 'none',
-      },
-      interactionWidth: 20,
-    })
-  }
-
-  return {
-    bounds: view.bounds,
-    xynodes,
-    xyedges,
-  }
-}