@likec4/diagram 1.17.0 → 1.18.0

package/src/state/aligners.ts

@@ -0,0 +1,473 @@
+import { invariant, type NonEmptyArray } from '@likec4/core'
+import type { Rect, XYPosition } from '@xyflow/react'
+import { map, pick, pipe, reduce, sortBy } from 'remeda'
+
+export type GridAlignmentMode = 'Column' | 'Row'
+export type LinearAlignmentMode = 'Left' | 'Center' | 'Right' | 'Top' | 'Middle' | 'Bottom'
+
+export abstract class Aligner {
+  abstract computeLayout(nodes: NodeRect[]): void
+  abstract applyPosition(node: NodeRect): Partial<XYPosition>
+}
+
+export class LinearAligner extends Aligner {
+  private alignTo: number | undefined
+  constructor(
+    private getEdgePosition: (nodes: NodeRect[]) => number,
+    private computePosition: (alignTo: number, node: NodeRect) => number,
+    private propertyToEdit: keyof XYPosition
+  ) {
+    super()
+  }
+
+  override computeLayout(nodes: NodeRect[]) {
+    this.alignTo = this.getEdgePosition(nodes)
+  }
+
+  override applyPosition(node: NodeRect): Partial<XYPosition> {
+    return {
+      [this.propertyToEdit]: this.computePosition(this.alignTo!, node)
+    }
+  }
+}
+
+export type NodeRect = Rect & { id: string }
+type Layer = {
+  primaryAxisSize: number
+  nodes: NodeRect[]
+  occupiedSpace: number
+  layout: Layout | null
+}
+type Layout = {
+  nodePositions: Map<string, XYPosition>
+  refLayer: Layer | null
+}
+
+export class GridAligner extends Aligner {
+  private layout: Map<string, XYPosition> = new Map()
+  private axisPreset: {
+    primaryAxisDimension: 'height' | 'width'
+    secondaryAxisDimension: 'height' | 'width'
+    primaryAxisCoord: 'x' | 'y'
+    secondaryAxisCoord: 'x' | 'y'
+  }
+
+  private get primaryAxisCoord() {
+    return this.axisPreset.primaryAxisCoord
+  }
+  private get secondaryAxisCoord() {
+    return this.axisPreset.secondaryAxisCoord
+  }
+  private get primaryAxisDimension() {
+    return this.axisPreset.primaryAxisDimension
+  }
+  private get secondaryAxisDimension() {
+    return this.axisPreset.secondaryAxisDimension
+  }
+
+  constructor(alignmentMode: GridAlignmentMode) {
+    super()
+
+    this.axisPreset = alignmentMode === 'Column'
+      ? {
+        primaryAxisDimension: 'width',
+        secondaryAxisDimension: 'height',
+        primaryAxisCoord: 'x',
+        secondaryAxisCoord: 'y'
+      }
+      : {
+        primaryAxisDimension: 'height',
+        secondaryAxisDimension: 'width',
+        primaryAxisCoord: 'y',
+        secondaryAxisCoord: 'x'
+      }
+  }
+
+  override applyPosition(node: NodeRect): Partial<XYPosition> {
+    return this.layout?.get(node.id) ?? {}
+  }
+
+  override computeLayout(nodes: NodeRect[]) {
+    // Sort by primary axis
+    const sortedNodeRects = pipe(
+      nodes,
+      sortBy(r => r[this.primaryAxisCoord])
+    )
+
+    const layoutRect = this.getLayoutRect(sortedNodeRects)
+
+    const layers = this.getLayers(sortedNodeRects)
+
+    this.layout = this.buildLayout(layers, layoutRect, sortedNodeRects)
+  }
+
+  private getLayoutRect(nodeRects: NodeRect[]): Rect {
+    const x = Math.min(...nodeRects.map(n => n.x))
+    const y = Math.min(...nodeRects.map(n => n.y))
+    const right = Math.max(...nodeRects.map(n => n.x + n.width))
+    const bottom = Math.max(...nodeRects.map(n => n.y + n.height))
+
+    return {
+      x,
+      y,
+      width: right - x,
+      height: bottom - y
+    }
+  }
+
+  private getLayers(sortedNodeRects: NodeRect[]): NonEmptyArray<Layer> {
+    const layers: Layer[] = []
+    let layerEnd = 0
+    let layer = null
+
+    for (let node of sortedNodeRects) {
+      if (!!layer && node[this.primaryAxisCoord] < layerEnd) {
+        layer.nodes.push(node)
+        layer.primaryAxisSize = Math.max(layer.primaryAxisSize, node[this.primaryAxisDimension])
+        layer.occupiedSpace += node[this.secondaryAxisDimension]
+        layerEnd = Math.max(
+          node[this.primaryAxisCoord] + node[this.primaryAxisDimension],
+          layerEnd
+        )
+      } else {
+        layer = {
+          primaryAxisSize: node[this.primaryAxisDimension],
+          nodes: [node],
+          occupiedSpace: node[this.secondaryAxisDimension],
+          layout: null
+        }
+        layers.push(layer)
+        layerEnd = node[this.primaryAxisCoord] + node[this.primaryAxisDimension]
+        continue
+      }
+    }
+
+    layers.forEach(l =>
+      l.nodes.sort((a, b) => a[this.secondaryAxisCoord] - b[this.secondaryAxisCoord])
+    )
+
+    return layers as NonEmptyArray<Layer>
+  }
+
+  private buildLayout(layers: NonEmptyArray<Layer>, layoutRect: Rect, nodeRects: NodeRect[]): Map<string, XYPosition> {
+    const nodeMap = new Map(nodeRects.map(n => [n.id, n]))
+    const layout: [string, XYPosition][] = []
+    const occupiedSpace = layers.reduce((a, b) => a + b.primaryAxisSize, 0)
+    const rowMargin = layers.length > 1
+      ? (layoutRect[this.primaryAxisDimension] - occupiedSpace) / (layers.length - 1)
+      : 0
+
+    // Find the widest layer and layout diagram from there
+    const baseLayerIndex = layers.reduce(
+      (widestLayerIndex, layer, i) =>
+        layers[widestLayerIndex]!.occupiedSpace < layer.occupiedSpace ? i : widestLayerIndex,
+      0
+    )
+    const baseLayer = layers[baseLayerIndex]!
+    const baseLayerPosition = layers.slice(0, baseLayerIndex).reduce(
+      (a, layer) => a + layer.primaryAxisSize + rowMargin,
+      layoutRect[this.primaryAxisCoord]
+    )
+    const baseLayerLayout = this.buildLayerLayout(
+      baseLayer,
+      layoutRect,
+      baseLayerPosition,
+      nodeMap,
+      null
+    )
+    baseLayer.layout = baseLayerLayout
+    layout.push(...baseLayerLayout.nodePositions)
+
+    // Layout layers after the base layer
+    let placeNextLayerAt = baseLayerPosition + baseLayer.primaryAxisSize + rowMargin
+    let refLayer = baseLayer
+    for (let i = baseLayerIndex + 1; i < layers.length; i++) {
+      const layer = layers[i]!
+      layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer)
+
+      layout.push(...layer.layout.nodePositions)
+      refLayer = layer.layout.refLayer ?? layer
+      placeNextLayerAt += layer.primaryAxisSize + rowMargin
+    }
+
+    // Layout layers before the base layer
+    placeNextLayerAt = baseLayerPosition
+    refLayer = baseLayer
+    for (let i = baseLayerIndex - 1; i >= 0; i--) {
+      const layer = layers[i]!
+      placeNextLayerAt -= layer.primaryAxisSize + rowMargin
+
+      layer.layout = this.buildLayerLayout(layer, layoutRect, placeNextLayerAt, nodeMap, refLayer)
+
+      layout.push(...layer.layout.nodePositions)
+      refLayer = layer.layout.refLayer ?? layer
+    }
+
+    return new Map(layout)
+  }
+
+  private buildLayerLayout(
+    layer: Layer,
+    layoutRect: Rect,
+    placeNextLayerAt: number,
+    nodeMap: Map<string, NodeRect>,
+    refLayer: Layer | null
+  ): Layout {
+    let bestLayerLayout = this.scoreLayout(
+      this.spaceAround(layer, layoutRect, placeNextLayerAt),
+      nodeMap
+    )
+
+    if (layer.nodes.length != 1) {
+      const currentlayerLayout = this.scoreLayout(
+        this.spaceBetween(layer, layoutRect, placeNextLayerAt),
+        nodeMap
+      )
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout
+    }
+
+    if (refLayer && refLayer.nodes.length - 1 >= layer.nodes.length) {
+      const currentlayerLayout = this.scoreLayout(
+        this.placeInGaps(layer, placeNextLayerAt, refLayer),
+        nodeMap
+      )
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout
+    }
+
+    if (refLayer && refLayer.nodes.length >= layer.nodes.length) {
+      const currentlayerLayout = this.scoreLayout(
+        this.placeInCells(layer, placeNextLayerAt, refLayer),
+        nodeMap
+      )
+      bestLayerLayout = currentlayerLayout[0] < bestLayerLayout[0] ? currentlayerLayout : bestLayerLayout
+    }
+
+    return bestLayerLayout[1]
+  }
+
+  private spaceBetween(
+    layer: Layer,
+    layoutRect: Rect,
+    placeNextLayerAt: number
+  ): Layout {
+    const freeSpace = layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace
+    const margin = freeSpace / (layer.nodes.length - 1)
+
+    let placeNextNodeAt = layoutRect[this.secondaryAxisCoord]
+    const result = new Map<string, XYPosition>()
+
+    let i = 0
+    for (let node of layer.nodes) {
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: placeNextNodeAt,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      } as XYPosition)
+      placeNextNodeAt += node[this.secondaryAxisDimension] + margin
+      i++
+    }
+
+    return { nodePositions: result, refLayer: null }
+  }
+
+  private spaceAround(
+    layer: Layer,
+    layoutRect: Rect,
+    placeNextLayerAt: number
+  ): Layout {
+    const freeSpace = layoutRect[this.secondaryAxisDimension] - layer.occupiedSpace
+    const margin = freeSpace / (layer.nodes.length + 1)
+
+    let placeNextNodeAt = layoutRect[this.secondaryAxisCoord] + margin
+    const result = new Map<string, XYPosition>()
+
+    for (let node of sortBy(layer.nodes, n => n[this.secondaryAxisCoord])) {
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: placeNextNodeAt,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      } as XYPosition)
+      placeNextNodeAt += node[this.secondaryAxisDimension] + margin
+    }
+
+    return { nodePositions: result, refLayer: null }
+  }
+
+  private placeInGaps(
+    layer: Layer,
+    placeNextLayerAt: number,
+    refLayer: Layer
+  ): Layout {
+    const result = new Map<string, XYPosition>()
+
+    const nodes = layer.nodes
+    const placementOptions = this.getGapsPositions(refLayer)
+
+    let optionIndex = 0
+    for (let i = 0, node = nodes[i]!; i < nodes.length; i++, node = nodes[i]!) {
+      const nodeCenter = node[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2
+
+      let bestOffset = Infinity
+      while (optionIndex - i <= placementOptions.length - nodes.length) {
+        let position = placementOptions[optionIndex]!
+        const offset = position - nodeCenter
+
+        if (Math.abs(offset) < Math.abs(bestOffset)) {
+          bestOffset = offset
+
+          optionIndex++
+        }
+        else {
+          break
+        }
+      }
+
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      } as XYPosition)
+    }
+
+    return { nodePositions: result, refLayer }
+  }
+
+  private placeInCells(
+    layer: Layer,
+    placeNextLayerAt: number,
+    refLayer: Layer
+  ): Layout {
+    const result = new Map<string, XYPosition>()
+
+    const nodes = layer.nodes
+    const placementOptions = this.getNodePositions(refLayer)
+
+    let optionIndex = 0
+    for (let i = 0, node = nodes[i]!; i < nodes.length; i++, node = nodes[i]!) {
+      const nodeCenter = node[this.secondaryAxisCoord] + node[this.secondaryAxisDimension] / 2
+
+      let bestOffset = Infinity
+
+      while (optionIndex - i <= placementOptions.length - nodes.length) {
+        let position = placementOptions[optionIndex]!
+        const offset = position - nodeCenter
+
+        if (Math.abs(offset) < Math.abs(bestOffset)) {
+          bestOffset = offset
+
+          optionIndex++
+        }
+        else {
+          break
+        }
+      }
+
+      result.set(node.id, {
+        [this.secondaryAxisCoord]: node[this.secondaryAxisCoord] + bestOffset,
+        [this.primaryAxisCoord]: placeNextLayerAt
+      } as XYPosition)
+    }
+
+    return { nodePositions: result, refLayer }
+  }
+
+  private scoreLayout(
+    layout: Layout,
+    originalRects: Map<string, NodeRect>
+  ): [number, Layout] {
+    return [
+      pipe(
+        Array.from(layout.nodePositions),
+        map(([id, position]) => {
+          const originalRect = originalRects.get(id)
+          invariant(originalRect, `Could not find original rect for node ${id}`)
+          return [pick(originalRect, ['x', 'y']), position]
+        }),
+        map(([original, suggested]) =>
+          Math.abs(original![this.secondaryAxisCoord] - suggested![this.secondaryAxisCoord])
+        ),
+        reduce((a, b) => a + b, 0)
+      ),
+      layout
+    ]
+  }
+
+  private getGapsPositions(layer: Layer): number[] {
+    const result = []
+    const { layout, nodes } = layer
+
+    invariant(layout, 'Layout of the layer must be computed before calling getGapsPositions')
+
+    for (let i = 1; i < nodes.length; i++) {
+      const previousNode = nodes[i - 1]!
+      const currentNode = nodes[i]!
+      const previousNodePosition = layout.nodePositions.get(previousNode.id)!
+      const currentNodePosition = layout.nodePositions.get(currentNode.id)!
+
+      result.push(
+        (currentNodePosition[this.secondaryAxisCoord]
+          + previousNodePosition[this.secondaryAxisCoord]
+          + previousNode[this.secondaryAxisDimension]) / 2
+      )
+    }
+
+    return result
+  }
+
+  private getNodePositions(layer: Layer): number[] {
+    const result = []
+    const { layout, nodes } = layer
+
+    invariant(layout, 'Layout of the layer must be computed before calling getGapsPositions')
+
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i]!
+      const nodePosition = layout.nodePositions.get(node.id)!
+
+      result.push(
+        nodePosition[this.secondaryAxisCoord]
+          + node[this.secondaryAxisDimension] / 2
+      )
+    }
+
+    return result
+  }
+}
+
+export function getLinearAligner(mode: LinearAlignmentMode): Aligner {
+  switch (mode) {
+    case 'Left':
+      return new LinearAligner(
+        nodes => Math.min(...nodes.map(n => n.x)),
+        (alignTo, _) => Math.floor(alignTo),
+        'x'
+      )
+    case 'Top':
+      return new LinearAligner(
+        nodes => Math.min(...nodes.map(n => n.y)),
+        (alignTo, _) => Math.floor(alignTo),
+        'y'
+      )
+    case 'Right':
+      return new LinearAligner(
+        nodes => Math.max(...nodes.map(n => n.x + n.width)),
+        (alignTo, node) => Math.floor(alignTo - node.width!),
+        'x'
+      )
+    case 'Bottom':
+      return new LinearAligner(
+        nodes => Math.max(...nodes.map(n => n.y + n.height)),
+        (alignTo, node) => Math.floor(alignTo - node.height!),
+        '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'
+      )
+    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'
+      )
+  }
+}

package/src/state/diagramStore.layout.ts

@@ -0,0 +1,67 @@
+import { nonexhaustive } from '@likec4/core'
+import type { InternalNode } from '@xyflow/react'
+import { getNodeDimensions } from '@xyflow/system'
+import { hasAtLeast } from 'remeda'
+import type { DiagramState } from '../hooks'
+import type { XYFlowNode } from '../xyflow/types'
+import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
+import { type Aligner, getLinearAligner, GridAligner, type GridAlignmentMode, type LinearAlignmentMode, type NodeRect } from './aligners'
+
+export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode
+
+export function align(get: () => DiagramState) {
+  return (mode: AlignmentMode) => {
+    const { scheduleSaveManualLayout, xystore } = get()
+    const { nodeLookup, parentLookup } = xystore.getState()
+
+    const selectedNodes = new Set(nodeLookup.values().filter(n => n.selected).map(n => n.id))
+    const nodesToAlign = [...selectedNodes.difference(new Set(parentLookup.keys()))]
+
+    if (!hasAtLeast(nodesToAlign, 2)) {
+      console.warn('At least 2 nodes must be selected to align')
+      return
+    }
+    const constraints = createLayoutConstraints(xystore, nodesToAlign)
+
+    const aligner = getAligner(mode)
+
+    constraints.onMove(nodes => {
+      aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)))
+
+      nodes.forEach(({ rect, node }) => {
+        rect.positionAbsolute = {
+          ...rect.positionAbsolute,
+          ...aligner.applyPosition(toNodeRect(node))
+        }
+      })
+    })
+
+    scheduleSaveManualLayout()
+  }
+}
+
+function toNodeRect(node: InternalNode<XYFlowNode>): NodeRect {
+  return {
+    ...node.internals.positionAbsolute,
+    id: node.id,
+    width: getNodeDimensions(node).width,
+    height: getNodeDimensions(node).height
+  }
+}
+
+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)
+  }
+}