@likec4/diagram 1.0.0-next.2 → 1.0.0

package/src/xyflow/edges/utils.ts

@@ -0,0 +1,110 @@
+import { Position, type XYPosition } from '@xyflow/react'
+import { getNodeDimensions } from '@xyflow/system'
+import type { InternalXYFlowNode } from '../types'
+
+// this helper function returns the intersection point
+// of the line between the center of the intersectionNode and the target node
+function getNodeIntersection(intersectionNode: InternalXYFlowNode, targetNode: InternalXYFlowNode): XYPosition {
+  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight
+  } = getNodeDimensions(intersectionNode)
+  const {
+    width: targetNodeWidth,
+    height: targetNodeHeight
+  } = getNodeDimensions(targetNode)
+
+  const intersectionNodePosition = intersectionNode.internals.positionAbsolute
+  const targetPosition = targetNode.internals.positionAbsolute
+
+  const w = intersectionNodeWidth / 2
+  const h = intersectionNodeHeight / 2
+
+  const x2 = intersectionNodePosition.x + w
+  const y2 = intersectionNodePosition.y + h
+  const x1 = targetPosition.x + targetNodeWidth / 2
+  const y1 = targetPosition.y + targetNodeHeight / 2
+
+  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
+  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
+  const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
+  const xx3 = a * xx1
+  const yy3 = a * yy1
+  const x = w * (xx3 + yy3) + x2
+  const y = h * (-xx3 + yy3) + y2
+
+  return { x, y }
+}
+
+// returns the position (top,right,bottom or right) passed node compared to the intersection point
+export function getPointPosition(node: InternalXYFlowNode, intersectionPoint: XYPosition) {
+  const n = {
+    // x: node.data.element.position[0],
+    // y: node.data.element.position[1],
+    ...node.internals.positionAbsolute,
+    ...getNodeDimensions(node)
+  }
+  const nx = Math.round(n.x)
+  const ny = Math.round(n.y)
+  const px = Math.round(intersectionPoint.x)
+  const py = Math.round(intersectionPoint.y)
+
+  let handlePosition = Position.Top
+  if (px <= nx + 1) {
+    handlePosition = Position.Left
+  } else if (px >= nx + n.width - 1) {
+    handlePosition = Position.Right
+  } else if (py <= ny + 1) {
+    handlePosition = Position.Top
+  } else if (py >= n.y + n.height - 1) {
+    handlePosition = Position.Bottom
+  }
+
+  let handleWidth = 8, handleHeight = 8
+
+  let offsetX = 0
+  let offsetY = 0
+
+  // this is a tiny detail to make the markerEnd of an edge visible.
+  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
+  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
+  switch (handlePosition) {
+    case Position.Left:
+      offsetX = -handleWidth
+      break
+    case Position.Right:
+      offsetX = handleWidth
+      break
+    case Position.Top:
+      offsetY = -handleHeight
+      break
+    case Position.Bottom:
+      offsetY = handleHeight
+      break
+  }
+
+  return [
+    intersectionPoint.x + offsetX,
+    intersectionPoint.y + offsetY,
+    handlePosition
+  ] as const
+}
+
+// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
+export function getEdgeParams(source: InternalXYFlowNode, target: InternalXYFlowNode) {
+  const sourceIntersectionPoint = getNodeIntersection(source, target)
+  const targetIntersectionPoint = getNodeIntersection(target, source)
+
+  const [sx, sy, sourcePos] = getPointPosition(source, sourceIntersectionPoint)
+  const [tx, ty, targetPos] = getPointPosition(target, targetIntersectionPoint)
+
+  return {
+    sx,
+    sy,
+    tx,
+    ty,
+    sourcePos,
+    targetPos
+  }
+}

package/src/xyflow/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useLayoutConstraints'
+export * from './useXYFlow'

package/src/xyflow/hooks/useLayoutConstraints.ts

@@ -0,0 +1,289 @@
+import { invariant, isAncestor, nonNullable } from '@likec4/core'
+import { Expression, Expression as Expr, Operator, Solver, Strength, Variable } from '@lume/kiwi'
+import type { InternalNode, ReactFlowProps, XYPosition } from '@xyflow/react'
+import { getNodeDimensions } from '@xyflow/system'
+import { useMemo, useRef } from 'react'
+import { isNullish } from 'remeda'
+import { useDiagramStoreApi } from '../../state'
+import { type XYFlowInstance, XYFlowNode } from '../types'
+import { useXYStoreApi, type XYStoreApi } from './useXYFlow'
+
+abstract class Rect {
+  id!: string
+  minX = new Variable()
+  minY = new Variable()
+  maxX: Expression | Variable = new Variable()
+  maxY: Expression | Variable = new Variable()
+
+  get x() {
+    return this.minX
+  }
+
+  get y() {
+    return this.minY
+  }
+
+  get positionAbsolute(): XYPosition {
+    return {
+      x: this.x.value(),
+      y: this.y.value()
+    }
+  }
+
+  get dimensions() {
+    return {
+      width: this.maxX.value() - this.minX.value(),
+      height: this.maxY.value() - this.minY.value()
+    }
+  }
+
+  // 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: Compound | null
+}
+
+class Compound extends Rect {
+  protected readonly children = [] as Rect[]
+
+  constructor(
+    protected solver: Solver,
+    xynode: InternalNode<XYFlowNode>,
+    protected readonly parent: Compound | null = null
+  ) {
+    super()
+    this.id = xynode.id
+
+    solver.createConstraint(this.maxX, Operator.Ge, this.minX)
+    solver.createConstraint(this.maxY, Operator.Ge, this.minY)
+
+    if (parent) {
+      parent.addChild(this)
+    }
+  }
+
+  addChild<R extends Rect>(rect: R) {
+    this.children.push(rect)
+
+    const leftPadding = new Expr(
+      rect.minX,
+      [-1, this.minX]
+    )
+    const { weak } = Strength
+    this.solver.createConstraint(leftPadding, Operator.Ge, 40)
+    this.solver.createConstraint(leftPadding, Operator.Eq, 40, weak)
+
+    const topPadding = new Expr(
+      rect.minY,
+      [-1, this.minY]
+    )
+    this.solver.createConstraint(topPadding, Operator.Ge, 60)
+    this.solver.createConstraint(topPadding, Operator.Eq, 60, weak)
+
+    const rightPadding = new Expr(
+      this.maxX,
+      [-1, rect.maxX]
+    )
+    this.solver.createConstraint(rightPadding, Operator.Ge, 40)
+    this.solver.createConstraint(rightPadding, Operator.Eq, 40, weak)
+
+    const bottomPadding = new Expr(
+      this.maxY,
+      [-1, rect.maxY]
+    )
+    this.solver.createConstraint(bottomPadding, Operator.Ge, 40)
+    this.solver.createConstraint(bottomPadding, Operator.Eq, 40, weak)
+  }
+}
+
+class Leaf extends Rect {
+  constructor(
+    solver: Solver,
+    xynode: InternalNode<XYFlowNode>,
+    public readonly parent: Compound | null = null,
+    public readonly isEditing: boolean = false
+  ) {
+    super()
+    this.id = xynode.id
+
+    // const isEditing: boolean = xynode.dragging ?? false
+    const x = Math.ceil(xynode.internals.positionAbsolute.x)
+    const y = Math.ceil(xynode.internals.positionAbsolute.y)
+
+    const { width, height } = getNodeDimensions(xynode)
+
+    this.maxX = new Expression(this.minX, Math.ceil(width))
+    this.maxY = new Expression(this.minY, Math.ceil(height))
+
+    // solver.createConstraint(this.width, Operator.Eq, width, Strength.required)
+    // solver.createConstraint(this.height, Operator.Eq, height, Strength.required)
+
+    if (isEditing) {
+      const superStrong = Strength.create(100, 0, 0)
+      solver.addEditVariable(this.minX, superStrong)
+      solver.addEditVariable(this.minY, superStrong)
+      solver.suggestValue(this.minX, x)
+      solver.suggestValue(this.minY, y)
+    } else {
+      const halfMedium = Strength.create(0.0, 1.0, 0.0, 0.5)
+      solver.createConstraint(this.minX, Operator.Eq, x, halfMedium)
+      solver.createConstraint(this.minY, Operator.Eq, y, halfMedium)
+      // const weaker = Strength.create(0.0, 0.0, 1.0, 0.5)
+      // const weak = Strength.create(0.0, 0.0, 1.0)
+      // const x = new Expr(
+      //   this.minX,
+      //   [-1, pos.x]
+      // )
+      // solver.createConstraint(x, Operator.Eq, 0, weaker)
+      // solver.createConstraint(x, Operator.Ge, -30, weak)
+      // solver.createConstraint(x, Operator.Le, 30, weak)
+
+      // const y = new Expr(
+      //   this.minY,
+      //   [-1, pos.y]
+      // )
+      // solver.createConstraint(y, Operator.Eq, 0, weaker)
+      // solver.createConstraint(y, Operator.Ge, -30, weak)
+      // solver.createConstraint(y, Operator.Le, 30, weak)
+    }
+
+    if (parent) {
+      parent.addChild(this)
+    }
+  }
+}
+
+function createLayoutConstraints(
+  xyflow: XYFlowInstance,
+  xyflowApi: XYStoreApi,
+  draggingNodeId: string
+) {
+  const { parentLookup, nodeLookup } = xyflowApi.getState()
+  const solver = new Solver()
+  const rects = new Map<string, Leaf | Compound>()
+
+  const traverse = new Array<{ xynode: InternalNode<XYFlowNode>; parent: Compound | null }>()
+
+  for (const [, xynode] of nodeLookup) {
+    if (isNullish(xynode.parentId)) {
+      traverse.push({
+        xynode,
+        parent: null
+      })
+    }
+  }
+
+  while (traverse.length > 0) {
+    const { xynode, parent } = traverse.shift()!
+    const isDragging = xynode.dragging === true || xynode.id === draggingNodeId
+
+    // Traverse children if the node is a compound, not dragging, and is an ancestor of the dragging node
+    const shouldTraverse = !isDragging && xynode.type === 'compound' && isAncestor(xynode.id, draggingNodeId)
+
+    const rect = shouldTraverse ? new Compound(solver, xynode, parent) : new Leaf(solver, xynode, parent, isDragging)
+    rects.set(xynode.id, rect)
+
+    if (shouldTraverse) {
+      parentLookup.get(xynode.id)?.forEach(child => {
+        traverse.push({
+          xynode: child,
+          parent: rect as Compound
+        })
+      })
+    }
+  }
+
+  solver.updateVariables()
+  solver.maxIterations = 1000
+
+  function updateXYFlowNodes() {
+    solver.updateVariables()
+
+    xyflow.setNodes(nodes =>
+      nodes.map((n) => {
+        if (n.id === draggingNodeId || n.dragging === true) {
+          return n
+        }
+        const rect = rects.get(n.id)
+        if (!rect) {
+          return n
+        }
+        const dimensions = rect.dimensions
+        const newXY = rect.position
+
+        if (newXY.x !== n.position.x || newXY.y !== n.position.y) {
+          return {
+            ...n,
+            position: rect.position,
+            width: dimensions.width,
+            height: dimensions.height,
+            measured: dimensions
+          }
+        }
+        if (dimensions.width !== n.width || dimensions.height !== n.height) {
+          return {
+            ...n,
+            width: dimensions.width,
+            height: dimensions.height,
+            measured: dimensions
+          }
+        }
+        return n
+      })
+    )
+  }
+
+  let animationFrameId: number | null = null
+
+  /**
+   * Move the editing node to the given position.
+   */
+  function onNodeDrag(xynode: XYFlowNode) {
+    const pos = nodeLookup.get(xynode.id)!.internals.positionAbsolute
+    const rect = nonNullable(rects.get(xynode.id))
+    solver.suggestValue(rect.minX, Math.ceil(pos.x))
+    solver.suggestValue(rect.minY, Math.ceil(pos.y))
+    animationFrameId ??= requestAnimationFrame(() => {
+      updateXYFlowNodes()
+      animationFrameId = null
+    })
+  }
+
+  return {
+    onNodeDrag,
+    updateXYFlowNodes
+  }
+}
+
+type LayoutConstraints = Required<Pick<ReactFlowProps<XYFlowNode>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>
+/**
+ * Keeps the layout constraints (parent nodes and children) when dragging a node
+ */
+export function useLayoutConstraints(): LayoutConstraints {
+  const diagramApi = useDiagramStoreApi()
+  const xyflowApi = useXYStoreApi()
+  const solverRef = useRef<ReturnType<typeof createLayoutConstraints>>()
+
+  return useMemo((): LayoutConstraints => ({
+    onNodeDragStart: (_event, xynode) => {
+      const { xyflow } = diagramApi.getState()
+      solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id)
+    },
+    onNodeDrag: (_event, xynode) => {
+      invariant(solverRef.current, 'solverRef.current should be defined')
+      solverRef.current?.onNodeDrag(xynode)
+    },
+    onNodeDragStop: (_event, _xynode) => {
+      solverRef.current = undefined
+    }
+  }), [xyflowApi])
+}

package/src/xyflow/hooks/useXYFlow.ts

@@ -0,0 +1,20 @@
+import { useNodesData, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
+import { shallowEqual } from 'fast-equals'
+import type { XYFlowEdge, XYFlowNode, XYFlowState } from '../types'
+
+export const useXYFlow = useReactFlow<XYFlowNode, XYFlowEdge>
+
+export const useXYNodesData = useNodesData<XYFlowNode>
+
+export function useXYStore<StateSlice = unknown>(
+  selector: (state: XYFlowState) => StateSlice,
+  equalityFn?: (a: StateSlice, b: StateSlice) => boolean
+): StateSlice {
+  return useStore(
+    // @ts-expect-error - types are not correct
+    selector,
+    equalityFn ?? shallowEqual
+  )
+}
+export const useXYStoreApi = useStoreApi<XYFlowNode, XYFlowEdge>
+export type XYStoreApi = ReturnType<typeof useXYStoreApi>

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -0,0 +1,191 @@
+import { rem } from '@mantine/core'
+import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../../mantine.css'
+import { vars } from '../../../theme.css'
+
+export const cssContainer = style({
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  padding: 0,
+  margin: 0
+})
+
+const bgTransparency = createVar('bgTransparency')
+
+const outlineColor = fallbackVar(
+  mantine.colors.primaryColors.outline,
+  mantine.colors.primaryColors.filled,
+  vars.element.stroke
+)
+
+export const cssCompound = style({
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  borderRadius: rem(6),
+  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
+  padding: rem(8),
+  background: vars.element.fill,
+  transition: 'all 300ms ease-out',
+  selectors: {
+    [`:where(.react-flow__node.selected) &`]: {
+      boxShadow: 'none'
+    },
+    ':where(.react-flow__node:focus-visible) &': {
+      transitionDuration: '0ms',
+      outline: `3px solid ${outlineColor}`,
+      outlineOffset: rem(1.5)
+    }
+  }
+})
+
+// @ts-ignore
+const cssTransparentCompound = style({
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  borderRadius: rem(8),
+  borderStyle: 'dashed',
+  borderWidth: rem(3.5),
+  borderColor: vars.element.fill,
+  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.05) , 0 2px 2px -1px rgba(0,0,0,0.04)',
+  padding: rem(8),
+  background: `color-mix(in srgb , ${vars.element.fill},  transparent ${bgTransparency})`,
+  transition: 'all 200ms ease-out',
+  vars: {
+    [bgTransparency]: '90%'
+  },
+  selectors: {
+    [`:where(${cssContainer}[data-hovered]) &`]: {
+      transitionDelay: '300ms',
+      vars: {
+        [bgTransparency]: '65%'
+      }
+    },
+    [`:where(.react-flow__node.selected) &`]: {
+      transitionDelay: '50ms',
+      boxShadow: 'none',
+      borderColor: 'transparent',
+      vars: {
+        [bgTransparency]: '15%'
+      }
+    }
+  }
+})
+
+export const cssTitle = style({
+  fontFamily: vars.compound.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  textAlign: 'left',
+  display: 'inline-block',
+  fontWeight: 600,
+  fontSize: '13px',
+  textTransform: 'uppercase',
+  letterSpacing: '0.2px',
+  lineHeight: 1,
+  opacity: 0.75,
+  color: vars.compound.titleColor,
+  paddingLeft: rem(12),
+  mixBlendMode: 'lighten',
+  selectors: {
+    [`:where([data-likec4-navigable='true']) &`]: {
+      paddingLeft: rem(26)
+    }
+  }
+})
+
+const indicatorKeyframes = generateIdentifier('indicator')
+globalKeyframes(indicatorKeyframes, {
+  'from': {
+    opacity: 0.6
+  },
+  'to': {
+    opacity: 0.3
+  }
+})
+
+export const cssIndicator = style({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'none',
+  overflow: 'visible',
+  visibility: 'hidden',
+  selectors: {
+    ':where(.react-flow__node.selected:not(:focus-visible)) &': {
+      visibility: 'visible'
+    }
+  }
+})
+
+globalStyle(`${cssIndicator} rect`, {
+  stroke: vars.element.loContrast,
+  transformOrigin: 'center center',
+  strokeWidth: 6,
+  animationDuration: '800ms',
+  animationName: indicatorKeyframes,
+  animationIterationCount: 'infinite',
+  animationDirection: 'alternate',
+  fill: 'none'
+})
+
+globalStyle(`:where(.react-flow__node:focus-within:not(.selected)) ${cssIndicator} rect`, {
+  stroke: `color-mix(in srgb, ${vars.element.stroke} 30%, ${vars.element.loContrast})`,
+  strokeWidth: 8
+})
+
+export const cssNavigateBtn = style({
+  position: 'absolute',
+  pointerEvents: 'all',
+  left: 3,
+  top: 7,
+  cursor: 'pointer',
+  color: vars.element.loContrast,
+  transformOrigin: '90% 70%',
+  opacity: 0.75,
+  transition: 'all 150ms ease-out',
+  transitionDelay: '0ms',
+  backgroundColor: 'var(--ai-bg)',
+  vars: {
+    '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
+    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`
+  },
+  ':hover': {
+    boxShadow: mantine.shadows.lg,
+    transform: 'scale(1.466)',
+    opacity: 1,
+    transitionDelay: '0'
+  },
+  ':active': {
+    transform: 'scale(1.1)',
+    opacity: 1,
+    transitionDelay: '0'
+  },
+  selectors: {
+    [`:where(.react-flow__node:not(.dragging) ${cssContainer}:hover) &:not(:hover)`]: {
+      boxShadow: mantine.shadows.lg,
+      transform: 'scale(1.223)',
+      opacity: 1,
+      transitionDelay: '250ms',
+      vars: {
+        '--ai-bg': 'var(--ai-bg-hover)'
+      }
+    }
+  }
+})
+globalStyle(`${cssNavigateBtn} svg.icon`, {
+  width: '70%',
+  height: '70%',
+  strokeWidth: 1.5
+})
+
+// globalStyle(`:where(.react-flow__node:not(.dragging)) ${cssIndicator}`, {
+//   visibility: 'visible',
+//   ":hover": {
+//   }
+// })