@likec4/diagram 1.19.1 → 1.20.0

package/src/{state → likec4diagram/state}/aligners.ts

@@ -1,9 +1,11 @@
-import { invariant, type NonEmptyArray } from '@likec4/core'
-import type { Rect, XYPosition } from '@xyflow/react'
+import { type NonEmptyArray, invariant, nonexhaustive } from '@likec4/core'
+import type { InternalNode, Rect, XYPosition } from '@xyflow/react'
+import { getNodeDimensions } from '@xyflow/system'
 import { map, pick, pipe, reduce, sortBy } from 'remeda'
 
 export type GridAlignmentMode = 'Column' | 'Row'
 export type LinearAlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom'
+export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode
 
 export abstract class Aligner {
   abstract computeLayout(nodes: NodeRect[]): void
@@ -15,7 +17,7 @@ export class LinearAligner extends Aligner {
   constructor(
     private getEdgePosition: (nodes: NodeRect[]) => number,
     private computePosition: (alignTo: number, node: NodeRect) => number,
-    private propertyToEdit: keyof XYPosition
+    private propertyToEdit: keyof XYPosition,
   ) {
     super()
   }
@@ -26,7 +28,7 @@ export class LinearAligner extends Aligner {
 
   override applyPosition(node: NodeRect): Partial<XYPosition> {
     return {
-      [this.propertyToEdit]: this.computePosition(this.alignTo!, node)
+      [this.propertyToEdit]: this.computePosition(this.alignTo!, node),
     }
   }
 }
@@ -73,13 +75,13 @@ export class GridAligner extends Aligner {
         primaryAxisDimension: 'width',
         secondaryAxisDimension: 'height',
         primaryAxisCoord: 'x',
-        secondaryAxisCoord: 'y'
+        secondaryAxisCoord: 'y',
       }
       : {
         primaryAxisDimension: 'height',
         secondaryAxisDimension: 'width',
         primaryAxisCoord: 'y',
-        secondaryAxisCoord: 'x'
+        secondaryAxisCoord: 'x',
       }
   }
 
@@ -91,7 +93,7 @@ export class GridAligner extends Aligner {
     // Sort by primary axis
     const sortedNodeRects = pipe(
       nodes,
-      sortBy(r => r[this.primaryAxisCoord])
+      sortBy(r => r[this.primaryAxisCoord]),
     )
 
     const layoutRect = this.getLayoutRect(sortedNodeRects)
@@ -111,7 +113,7 @@ export class GridAligner extends Aligner {
       x,
       y,
       width: right - x,
-      height: bottom - y
+      height: bottom - y,
     }
   }
 
@@ -127,14 +129,14 @@ export class GridAligner extends Aligner {
         layer.occupiedSpace += node[this.secondaryAxisDimension]
         layerEnd = Math.max(
           node[this.primaryAxisCoord] + node[this.primaryAxisDimension],
-          layerEnd
+          layerEnd,
         )
       } else {
         layer = {
           primaryAxisSize: node[this.primaryAxisDimension],
           nodes: [node],
           occupiedSpace: node[this.secondaryAxisDimension],
-          layout: null
+          layout: null,
         }
         layers.push(layer)
         layerEnd = node[this.primaryAxisCoord] + node[this.primaryAxisDimension]
@@ -142,9 +144,7 @@ export class GridAligner extends Aligner {
       }
     }
 
-    layers.forEach(l =>
-      l.nodes.sort((a, b) => a[this.secondaryAxisCoord] - b[this.secondaryAxisCoord])
-    )
+    layers.forEach(l => l.nodes.sort((a, b) => a[this.secondaryAxisCoord] - b[this.secondaryAxisCoord]))
 
     return layers as NonEmptyArray<Layer>
   }
@@ -161,19 +161,19 @@ export class GridAligner extends Aligner {
     const baseLayerIndex = layers.reduce(
       (widestLayerIndex, layer, i) =>
         layers[widestLayerIndex]!.occupiedSpace < layer.occupiedSpace ? i : widestLayerIndex,
-      0
+      0,
     )
     const baseLayer = layers[baseLayerIndex]!
     const baseLayerPosition = layers.slice(0, baseLayerIndex).reduce(
       (a, layer) => a + layer.primaryAxisSize + rowMargin,
-      layoutRect[this.primaryAxisCoord]
+      layoutRect[this.primaryAxisCoord],
     )
     const baseLayerLayout = this.buildLayerLayout(
       baseLayer,
       layoutRect,
       baseLayerPosition,
       nodeMap,
-      null
+      null,
     )
     baseLayer.layout = baseLayerLayout
     layout.push(...baseLayerLayout.nodePositions)
@@ -211,17 +211,17 @@ export class GridAligner extends Aligner {
     layoutRect: Rect,
     placeNextLayerAt: number,
     nodeMap: Map<string, NodeRect>,
-    refLayer: Layer | null
+    refLayer: Layer | null,
   ): Layout {
     let bestLayerLayout = this.scoreLayout(
       this.spaceAround(layer, layoutRect, placeNextLayerAt),
-      nodeMap
+      nodeMap,
     )
 
     if (layer.nodes.length != 1) {
       const currentlayerLayout = this.scoreLayout(
         this.spaceBetween(layer, layoutRect, placeNextLayerAt),
-        nodeMap
+        nodeMap,
       )
       bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout
     }
@@ -229,7 +229,7 @@ export class GridAligner extends Aligner {
     if (refLayer && refLayer.nodes.length - 1 >= layer.nodes.length) {
       const currentlayerLayout = this.scoreLayout(
         this.placeInGaps(layer, placeNextLayerAt, refLayer),
-        nodeMap
+        nodeMap,
       )
       bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout
     }
@@ -237,7 +237,7 @@ export class GridAligner extends Aligner {
     if (refLayer && refLayer.nodes.length >= layer.nodes.length) {
       const currentlayerLayout = this.scoreLayout(
         this.placeInCells(layer, placeNextLayerAt, refLayer),
-        nodeMap
+        nodeMap,
       )
       bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout
     }
@@ -248,7 +248,7 @@ export class GridAligner extends Aligner {
   private spaceBetween(
     layer: Layer,
     layoutRect: Rect,
-    placeNextLayerAt: number
+    placeNextLayerAt: number,
   ): Layout {
     const freeSpace = layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace
     const margin = freeSpace / (layer.nodes.length - 1)
@@ -260,7 +260,7 @@ export class GridAligner extends Aligner {
     for (let node of layer.nodes) {
       result.set(node.id, {
         [this.secondaryAxisCoord]: placeNextNodeAt,
-        [this.primaryAxisCoord]: placeNextLayerAt
+        [this.primaryAxisCoord]: placeNextLayerAt,
       } as XYPosition)
       placeNextNodeAt += node[this.secondaryAxisDimension] + margin
       i++
@@ -272,7 +272,7 @@ export class GridAligner extends Aligner {
   private spaceAround(
     layer: Layer,
     layoutRect: Rect,
-    placeNextLayerAt: number
+    placeNextLayerAt: number,
   ): Layout {
     const freeSpace = layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace
     const margin = freeSpace / (layer.nodes.length + 1)
@@ -283,7 +283,7 @@ export class GridAligner extends Aligner {
     for (let node of sortBy(layer.nodes, n => n[this.secondaryAxisCoord])) {
       result.set(node.id, {
         [this.secondaryAxisCoord]: placeNextNodeAt,
-        [this.primaryAxisCoord]: placeNextLayerAt
+        [this.primaryAxisCoord]: placeNextLayerAt,
       } as XYPosition)
       placeNextNodeAt += node[this.secondaryAxisDimension] + margin
     }
@@ -294,7 +294,7 @@ export class GridAligner extends Aligner {
   private placeInGaps(
     layer: Layer,
     placeNextLayerAt: number,
-    refLayer: Layer
+    refLayer: Layer,
   ): Layout {
     const result = new Map<string, XYPosition>()
 
@@ -322,7 +322,7 @@ export class GridAligner extends Aligner {
 
       result.set(node.id, {
         [this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
-        [this.primaryAxisCoord]: placeNextLayerAt
+        [this.primaryAxisCoord]: placeNextLayerAt,
       } as XYPosition)
     }
 
@@ -332,7 +332,7 @@ export class GridAligner extends Aligner {
   private placeInCells(
     layer: Layer,
     placeNextLayerAt: number,
-    refLayer: Layer
+    refLayer: Layer,
   ): Layout {
     const result = new Map<string, XYPosition>()
 
@@ -361,7 +361,7 @@ export class GridAligner extends Aligner {
 
       result.set(node.id, {
         [this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
-        [this.primaryAxisCoord]: placeNextLayerAt
+        [this.primaryAxisCoord]: placeNextLayerAt,
       } as XYPosition)
     }
 
@@ -370,7 +370,7 @@ export class GridAligner extends Aligner {
 
   private scoreLayout(
     layout: Layout,
-    originalRects: Map<string, NodeRect>
+    originalRects: Map<string, NodeRect>,
   ): [number, Layout] {
     return [
       pipe(
@@ -383,9 +383,9 @@ export class GridAligner extends Aligner {
         map(([original, suggested]) =>
           Math.abs(original![this.secondaryAxisCoord] - suggested![this.secondaryAxisCoord])
         ),
-        reduce((a, b) => a + b, 0)
+        reduce((a, b) => a + b, 0),
       ),
-      layout
+      layout,
     ]
   }
 
@@ -404,7 +404,7 @@ export class GridAligner extends Aligner {
       result.push(
         (currentNodePosition[this.secondaryAxisCoord]
           + previousNodePosition[this.secondaryAxisCoord]
-          + previousNode[this.secondaryAxisDimension]) / 2
+          + previousNode[this.secondaryAxisDimension]) / 2,
       )
     }
 
@@ -423,7 +423,7 @@ export class GridAligner extends Aligner {
 
       result.push(
         nodePosition[this.secondaryAxisCoord]
-          + node[this.secondaryAxisDimension] / 2
+          + node[this.secondaryAxisDimension] / 2,
       )
     }
 
@@ -437,37 +437,64 @@ export function getLinearAligner(mode: LinearAlignmentMode): Aligner {
       return new LinearAligner(
         nodes => Math.min(...nodes.map(n => n.x)),
         (alignTo, _) => Math.floor(alignTo),
-        'x'
+        'x',
       )
     case 'Top':
       return new LinearAligner(
         nodes => Math.min(...nodes.map(n => n.y)),
         (alignTo, _) => Math.floor(alignTo),
-        'y'
+        'y',
       )
     case 'Right':
       return new LinearAligner(
         nodes => Math.max(...nodes.map(n => n.x + n.width)),
         (alignTo, node) => Math.floor(alignTo - node.width!),
-        'x'
+        'x',
       )
     case 'Bottom':
       return new LinearAligner(
         nodes => Math.max(...nodes.map(n => n.y + n.height)),
         (alignTo, node) => Math.floor(alignTo - node.height!),
-        'y'
+        'y',
       )
     case 'Center':
       return new LinearAligner(
         nodes => Math.min(...nodes.map(n => n.x + n.width / 2)),
         (alignTo, node) => Math.floor(alignTo - node.width / 2),
-        'x'
+        'x',
       )
     case 'Middle':
       return new LinearAligner(
         nodes => Math.min(...nodes.map(n => n.y + n.height / 2)),
         (alignTo, node) => Math.floor(alignTo - node.height / 2),
-        'y'
+        'y',
       )
   }
 }
+
+export function toNodeRect(node: InternalNode): NodeRect {
+  const { width, height } = getNodeDimensions(node)
+  return {
+    ...node.internals.positionAbsolute,
+    id: node.id,
+    width,
+    height,
+  }
+}
+
+export function getAligner(mode: AlignmentMode): Aligner {
+  switch (mode) {
+    case 'Left':
+    case 'Right':
+    case 'Top':
+    case 'Bottom':
+    case 'Center':
+    case 'Middle':
+      return getLinearAligner(mode)
+    case 'Column':
+    case 'Row':
+      return new GridAligner(mode)
+    default:
+      nonexhaustive(mode)
+  }
+}

package/src/likec4diagram/state/assign.ts

@@ -0,0 +1,384 @@
+import { type NodeId, type XYPoint, invariant, nonNullable } from '@likec4/core'
+import { getNodeDimensions } from '@xyflow/system'
+import { deepEqual as eq } from 'fast-equals'
+import { isEmpty, mergeDeep, omit } from 'remeda'
+import { assertEvent } from 'xstate'
+import { Base } from '../../base'
+import { type Vector, vector, VectorImpl } from '../../utils/vector'
+import type { Types } from '../types'
+import type { ActionArg, DiagramContext } from './machine'
+
+export function lastClickedNode(
+  params: { context: DiagramContext; event: { node: Types.Node } },
+): DiagramContext['lastClickedNode'] {
+  const { lastClickedNode } = params.context
+  if (!lastClickedNode || lastClickedNode.id !== params.event.node.id) {
+    return {
+      id: params.event.node.id as NodeId,
+      clicks: 1,
+      timestamp: Date.now(),
+    }
+  }
+  return {
+    id: lastClickedNode.id,
+    clicks: lastClickedNode.clicks + 1,
+    timestamp: Date.now(),
+  }
+}
+
+export function mergeXYNodesEdges({ context, event }: ActionArg): Partial<DiagramContext> {
+  assertEvent(event, 'update.view')
+  const nextView = event.view
+  const isSameView = context.view.id === nextView.id
+
+  const currentNodes = context.xynodes
+  const xynodes = event.xynodes.map((update) => {
+    const existing = currentNodes.find(n => n.id === update.id)
+    if (existing) {
+      const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing)
+      if (
+        eq(existing.type, update.type)
+        && eq(existingWidth, update.initialWidth)
+        && eq(existingHeight, update.initialHeight)
+        && eq(existing.hidden ?? false, update.hidden ?? false)
+        && eq(existing.position, update.position)
+        && eq(existing.data, update.data)
+        && eq(existing.parentId ?? null, update.parentId ?? null)
+      ) {
+        return existing
+      }
+      return {
+        ...omit(existing, ['measured', 'parentId']),
+        ...update,
+        // Force dimensions from update
+        width: update.initialWidth,
+        height: update.initialHeight,
+        data: {
+          ...existing.data,
+          ...update.data,
+        },
+      } as Types.Node
+    }
+    return update
+  })
+  // Merge with existing edges, but only if the view is the same
+  // and the edges have no layout drift
+  let xyedges = event.xyedges
+  if (isSameView && !nextView.hasLayoutDrift) {
+    const currentEdges = context.xyedges
+    xyedges = event.xyedges.map((update): Types.Edge => {
+      const existing = currentEdges.find(n => n.id === update.id)
+      if (existing) {
+        if (
+          eq(existing.hidden ?? false, update.hidden ?? false)
+          && eq(existing.data, update.data)
+        ) {
+          return existing
+        }
+        return {
+          ...existing,
+          ...update,
+          data: {
+            ...existing.data,
+            ...update.data,
+          },
+        }
+      }
+      return update
+    })
+  }
+
+  if (!isSameView) {
+    for (const node of xynodes) {
+      node.data = {
+        ...node.data,
+        dimmed: false,
+        hovered: false,
+      }
+    }
+    for (const edge of xyedges) {
+      edge.data = {
+        ...edge.data,
+        dimmed: false,
+        hovered: false,
+        active: false,
+      }
+    }
+  }
+
+  return {
+    xynodes,
+    xyedges,
+    view: nextView,
+  }
+}
+
+export function focusNodesEdges(params: ActionArg): Partial<DiagramContext> {
+  const { xynodes: _xynodes, xyedges: _xyedges, focusedNode } = params.context
+  if (!focusedNode) {
+    return {}
+  }
+  const focused = new Set([focusedNode as string])
+  const xyedges = _xyedges.map((edge) => {
+    if (edge.source === focusedNode || edge.target === focusedNode) {
+      focused.add(edge.source)
+      focused.add(edge.target)
+      return Base.setData(edge, {
+        dimmed: false,
+        active: true,
+      })
+    }
+    return Base.setData(edge, {
+      dimmed: true,
+      active: false,
+    })
+  })
+
+  return {
+    xynodes: _xynodes.map(n => Base.setDimmed(n, !focused.has(n.id))),
+    xyedges,
+  }
+}
+
+export function unfocusNodesEdges({ context }: ActionArg): Partial<DiagramContext> {
+  const { xynodes, xyedges } = context
+  return {
+    xynodes: xynodes.map(Base.setDimmed(false)),
+    xyedges: xyedges.map(Base.setData({
+      dimmed: false,
+      active: false,
+    })),
+  }
+}
+
+export function updateNavigationHistory({ context, event }: ActionArg): Partial<DiagramContext> {
+  assertEvent(event, 'update.view')
+  let {
+    view,
+    navigationHistory: {
+      currentIndex,
+      history,
+    },
+    lastOnNavigate,
+    viewport,
+  } = context
+  const stepCurrent = nonNullable(history[currentIndex])
+  if (stepCurrent.viewId !== event.view.id) {
+    // Navigation by browser back/forward ?
+    if (!lastOnNavigate) {
+      const stepBack = currentIndex > 0 ? nonNullable(history[currentIndex - 1]) : null
+      if (stepBack && stepBack.viewId === event.view.id) {
+        return {
+          navigationHistory: {
+            currentIndex: currentIndex - 1,
+            history,
+          },
+          lastOnNavigate: {
+            fromView: stepCurrent.viewId,
+            toView: stepBack.viewId,
+            fromNode: stepCurrent.fromNode,
+          },
+        }
+      }
+      const stepForward = currentIndex < history.length - 1 ? nonNullable(history[currentIndex + 1]) : null
+      if (stepForward && stepForward.viewId === event.view.id) {
+        return {
+          navigationHistory: {
+            currentIndex: currentIndex + 1,
+            history,
+          },
+          lastOnNavigate: {
+            fromView: stepCurrent.viewId,
+            toView: stepForward.viewId,
+            fromNode: stepForward.fromNode,
+          },
+        }
+      }
+    }
+
+    history = [
+      ...history.slice(0, currentIndex + 1),
+      {
+        viewId: event.view.id,
+        fromNode: lastOnNavigate?.fromNode ?? null,
+        viewport: { ...viewport },
+      },
+    ]
+    currentIndex = history.length - 1
+    return {
+      navigationHistory: {
+        currentIndex,
+        history,
+      },
+    }
+  }
+  return {}
+}
+
+export function navigateBack({ context }: ActionArg): Partial<DiagramContext> {
+  const {
+    navigationHistory: {
+      currentIndex,
+      history,
+    },
+  } = context
+  invariant(currentIndex > 0, 'Cannot navigate back')
+  const stepCurrent = history[currentIndex]!
+  const stepBack = history[currentIndex - 1]!
+  return {
+    navigationHistory: {
+      currentIndex: currentIndex - 1,
+      history,
+    },
+    lastOnNavigate: {
+      fromView: stepCurrent.viewId,
+      toView: stepBack.viewId,
+      fromNode: stepCurrent.fromNode,
+    },
+  }
+}
+
+export function navigateForward({ context }: ActionArg): Partial<DiagramContext> {
+  const {
+    navigationHistory: {
+      currentIndex,
+      history,
+    },
+  } = context
+  invariant(currentIndex < history.length - 1, 'Cannot navigate forward')
+  const stepCurrent = history[currentIndex]!
+  const stepForward = history[currentIndex + 1]!
+  return {
+    navigationHistory: {
+      currentIndex: currentIndex + 1,
+      history,
+    },
+    lastOnNavigate: {
+      fromView: stepCurrent.viewId,
+      toView: stepForward.viewId,
+      fromNode: stepForward.fromNode,
+    },
+  }
+}
+
+export function updateNodeData({ context, event }: ActionArg): Partial<DiagramContext> {
+  assertEvent(event, 'update.nodeData')
+  const xynodes = context.xynodes.map((node): Types.Node =>
+    node.id !== event.nodeId ? node : (({
+      ...node,
+      data: mergeDeep(node.data as any, event.data as any),
+    }) as Types.Node)
+  )
+  return { xynodes }
+}
+
+export function updateEdgeData({ context, event }: ActionArg): Partial<DiagramContext> {
+  assertEvent(event, 'update.edgeData')
+  const xyedges = context.xyedges.map((edge): Types.Edge =>
+    edge.id !== event.edgeId ? edge : (({
+      ...edge,
+      data: mergeDeep(edge.data as any, event.data as any),
+    }) as Types.Edge)
+  )
+  return { xyedges }
+}
+
+export function resetEdgeControlPoints({ context }: ActionArg): Partial<DiagramContext> {
+  const { xynodes } = context
+
+  function getNodeCenter(node: Types.Node, nodes: Types.Node[]) {
+    const dimensions = vector({ x: node.width || 0, y: node.height || 0 })
+    let position = vector(node.position)
+      .add(dimensions.mul(0.5))
+
+    let currentNode = node
+    do {
+      const parent = currentNode.parentId && nodes.find(x => x.id == currentNode.parentId)
+
+      if (!parent) {
+        break
+      }
+
+      currentNode = parent
+      position = position.add(parent.position)
+    } while (true)
+
+    return position
+  }
+
+  function getControlPointForEdge(edge: Types.Edge): XYPoint[] {
+    const source = xynodes.find(x => x.id == edge.source)
+    const target = xynodes.find(x => x.id == edge.target)
+    if (!source || !target) {
+      return []
+    }
+
+    const sourceCenter = getNodeCenter(source, xynodes)
+    const targetCenter = getNodeCenter(target, xynodes)
+
+    if (!sourceCenter || !targetCenter) {
+      return []
+    }
+
+    // Edge is a loop
+    if (source == target) {
+      const loopSize = 80
+      const centerOfTopBoundary = new VectorImpl(0, source.height || 0)
+        .mul(-0.5)
+        .add(sourceCenter)
+
+      return [
+        centerOfTopBoundary.add(new VectorImpl(-loopSize / 2.5, -loopSize)),
+        centerOfTopBoundary.add(new VectorImpl(loopSize / 2.5, -loopSize)),
+      ]
+    }
+
+    const sourceToTargetVector = targetCenter.sub(sourceCenter)
+    const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector)
+    const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.mul(-1))
+
+    return [sourceBorderPoint.add(targetBorderPoint.sub(sourceBorderPoint).mul(0.3))]
+  }
+
+  function getBorderPointOnVector(node: Types.Node, nodeCenter: Vector, v: Vector) {
+    const xScale = (node.width || 0) / 2 / v.x
+    const yScale = (node.height || 0) / 2 / v.y
+
+    const scale = Math.min(Math.abs(xScale), Math.abs(yScale))
+
+    return vector(v).mul(scale).add(nodeCenter)
+  }
+
+  return {
+    xyedges: context.xyedges.map(edge => {
+      if (!edge.data.controlPoints || isEmpty(edge.data.controlPoints)) {
+        return edge
+      }
+      return ({
+        ...edge,
+        data: {
+          ...edge.data,
+          controlPoints: getControlPointForEdge(edge),
+        },
+      })
+    }),
+  }
+}
+
+export function updateActiveWalkthrough({ context }: ActionArg): Partial<DiagramContext> {
+  const { stepId, parallelPrefix } = nonNullable(context.activeWalkthrough, 'activeWalkthrough is null')
+  const step = nonNullable(context.xyedges.find(x => x.id === stepId))
+  return {
+    xyedges: context.xyedges.map(edge => {
+      const active = stepId === edge.id || (!!parallelPrefix && edge.id.startsWith(parallelPrefix))
+      return Base.setData(edge, {
+        active,
+        dimmed: !active,
+      })
+    }),
+    xynodes: context.xynodes.map(node => {
+      const active = step.source === node.id || step.target === node.id
+      return Base.setDimmed(node, !active)
+    }),
+  }
+}