@pyreon/flow 0.10.0 → 0.11.1

package/src/edges.ts

@@ -1,5 +1,5 @@
-import type { EdgePathResult, FlowNode, XYPosition } from './types'
-import { Position } from './types'
+import type { EdgePathResult, FlowNode, XYPosition } from "./types"
+import { Position } from "./types"
 
 /**
  * Auto-detect the best handle position based on relative node positions.
@@ -148,10 +148,7 @@ export function getBezierPath(params: {
       break
   }
 
-  const center = getCenter(
-    { x: sourceX, y: sourceY },
-    { x: targetX, y: targetY },
-  )
+  const center = getCenter({ x: sourceX, y: sourceY }, { x: targetX, y: targetY })
 
   return {
     path: `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
@@ -184,46 +181,25 @@ export function getSmoothStepPath(params: {
     offset = 20,
   } = params
 
-  const isHorizontalSource =
-    sourcePosition === Position.Left || sourcePosition === Position.Right
-  const isHorizontalTarget =
-    targetPosition === Position.Left || targetPosition === Position.Right
+  const isHorizontalSource = sourcePosition === Position.Left || sourcePosition === Position.Right
+  const isHorizontalTarget = targetPosition === Position.Left || targetPosition === Position.Right
 
   // Calculate offset points
   const sourceOffsetX =
-    sourcePosition === Position.Right
-      ? offset
-      : sourcePosition === Position.Left
-        ? -offset
-        : 0
+    sourcePosition === Position.Right ? offset : sourcePosition === Position.Left ? -offset : 0
   const sourceOffsetY =
-    sourcePosition === Position.Bottom
-      ? offset
-      : sourcePosition === Position.Top
-        ? -offset
-        : 0
+    sourcePosition === Position.Bottom ? offset : sourcePosition === Position.Top ? -offset : 0
   const targetOffsetX =
-    targetPosition === Position.Right
-      ? offset
-      : targetPosition === Position.Left
-        ? -offset
-        : 0
+    targetPosition === Position.Right ? offset : targetPosition === Position.Left ? -offset : 0
   const targetOffsetY =
-    targetPosition === Position.Bottom
-      ? offset
-      : targetPosition === Position.Top
-        ? -offset
-        : 0
+    targetPosition === Position.Bottom ? offset : targetPosition === Position.Top ? -offset : 0
 
   const sX = sourceX + sourceOffsetX
   const sY = sourceY + sourceOffsetY
   const tX = targetX + targetOffsetX
   const tY = targetY + targetOffsetY
 
-  const center = getCenter(
-    { x: sourceX, y: sourceY },
-    { x: targetX, y: targetY },
-  )
+  const center = getCenter({ x: sourceX, y: sourceY }, { x: targetX, y: targetY })
 
   // Simple smoothstep: source → midpoint → target with rounded corners
   const midX = (sX + tX) / 2
@@ -261,10 +237,7 @@ export function getStraightPath(params: {
   targetY: number
 }): EdgePathResult {
   const { sourceX, sourceY, targetX, targetY } = params
-  const center = getCenter(
-    { x: sourceX, y: sourceY },
-    { x: targetX, y: targetY },
-  )
+  const center = getCenter({ x: sourceX, y: sourceY }, { x: targetX, y: targetY })
 
   return {
     path: `M${sourceX},${sourceY} L${targetX},${targetY}`,
@@ -304,14 +277,10 @@ export function getWaypointPath(params: {
     return getStraightPath({ sourceX, sourceY, targetX, targetY })
   }
 
-  const allPoints = [
-    { x: sourceX, y: sourceY },
-    ...waypoints,
-    { x: targetX, y: targetY },
-  ]
+  const allPoints = [{ x: sourceX, y: sourceY }, ...waypoints, { x: targetX, y: targetY }]
 
   const segments = allPoints.map((p) => `${p.x},${p.y}`)
-  const path = `M${segments.join(' L')}`
+  const path = `M${segments.join(" L")}`
 
   // Label at the middle waypoint
   const midIdx = Math.floor(waypoints.length / 2)
@@ -336,7 +305,7 @@ export function getEdgePath(
   targetPosition: Position,
 ): EdgePathResult {
   switch (type) {
-    case 'smoothstep':
+    case "smoothstep":
       return getSmoothStepPath({
         sourceX,
         sourceY,
@@ -345,9 +314,9 @@ export function getEdgePath(
         targetY,
         targetPosition,
       })
-    case 'straight':
+    case "straight":
       return getStraightPath({ sourceX, sourceY, targetX, targetY })
-    case 'step':
+    case "step":
       return getStepPath({
         sourceX,
         sourceY,

package/src/flow.ts

@@ -1,5 +1,5 @@
-import { batch, computed, signal } from '@pyreon/reactivity'
-import { computeLayout } from './layout'
+import { batch, computed, signal } from "@pyreon/reactivity"
+import { computeLayout } from "./layout"
 import type {
   Connection,
   FlowConfig,
@@ -10,15 +10,15 @@ import type {
   LayoutOptions,
   NodeChange,
   XYPosition,
-} from './types'
+} from "./types"
 
 /**
  * Generate a unique edge id from source/target.
  */
 function edgeId(edge: FlowEdge): string {
   if (edge.id) return edge.id
-  const sh = edge.sourceHandle ? `-${edge.sourceHandle}` : ''
-  const th = edge.targetHandle ? `-${edge.targetHandle}` : ''
+  const sh = edge.sourceHandle ? `-${edge.sourceHandle}` : ""
+  const th = edge.targetHandle ? `-${edge.targetHandle}` : ""
   return `e-${edge.source}${sh}-${edge.target}${th}`
 }
 
@@ -51,7 +51,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
   const {
     nodes: initialNodes = [],
     edges: initialEdges = [],
-    defaultEdgeType = 'bezier',
+    defaultEdgeType = "bezier",
     minZoom = 0.1,
     maxZoom = 4,
     snapToGrid = false,
@@ -112,22 +112,18 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     batch(() => {
       nodes.update((nds) => nds.filter((n) => n.id !== id))
       // Remove connected edges
-      edges.update((eds) =>
-        eds.filter((e) => e.source !== id && e.target !== id),
-      )
+      edges.update((eds) => eds.filter((e) => e.source !== id && e.target !== id))
       selectedNodeIds.update((set) => {
         const next = new Set(set)
         next.delete(id)
         return next
       })
     })
-    emitNodeChanges([{ type: 'remove', id }])
+    emitNodeChanges([{ type: "remove", id }])
   }
 
   function updateNode(id: string, update: Partial<FlowNode>): void {
-    nodes.update((nds) =>
-      nds.map((n) => (n.id === id ? { ...n, ...update } : n)),
-    )
+    nodes.update((nds) => nds.map((n) => (n.id === id ? { ...n, ...update } : n)))
   }
 
   function updateNodePosition(id: string, position: XYPosition): void {
@@ -142,10 +138,8 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     const node = getNode(id)
     pos = clampToExtent(pos, node?.width, node?.height)
 
-    nodes.update((nds) =>
-      nds.map((n) => (n.id === id ? { ...n, position: pos } : n)),
-    )
-    emitNodeChanges([{ type: 'position', id, position: pos }])
+    nodes.update((nds) => nds.map((n) => (n.id === id ? { ...n, position: pos } : n)))
+    emitNodeChanges([{ type: "position", id, position: pos }])
   }
 
   // ── Edge operations ──────────────────────────────────────────────────────
@@ -193,7 +187,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     const sourceNode = getNode(connection.source)
     if (!sourceNode) return false
 
-    const sourceType = sourceNode.type ?? 'default'
+    const sourceType = sourceNode.type ?? "default"
     const rule = connectionRules[sourceType]
     if (!rule) return true // no rule = allow
 
@@ -201,7 +195,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     const targetNode = getNode(connection.target)
     if (!targetNode) return false
 
-    const targetType = targetNode.type ?? 'default'
+    const targetType = targetNode.type ?? "default"
     return rule.outputs.includes(targetType)
   }
 
@@ -275,13 +269,8 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
 
   // ── Viewport ─────────────────────────────────────────────────────────────
 
-  function fitView(
-    nodeIds?: string[],
-    padding = config.fitViewPadding ?? 0.1,
-  ): void {
-    const targetNodes = nodeIds
-      ? nodes.peek().filter((n) => nodeIds.includes(n.id))
-      : nodes.peek()
+  function fitView(nodeIds?: string[], padding = config.fitViewPadding ?? 0.1): void {
+    const targetNodes = nodeIds ? nodes.peek().filter((n) => nodeIds.includes(n.id)) : nodes.peek()
 
     if (targetNodes.length === 0) return
 
@@ -302,8 +291,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     const graphWidth = maxX - minX
     const graphHeight = maxY - minY
 
-    const { width: containerWidth, height: containerHeight } =
-      containerSize.peek()
+    const { width: containerWidth, height: containerHeight } = containerSize.peek()
 
     const zoomX = containerWidth / (graphWidth * (1 + padding * 2))
     const zoomY = containerHeight / (graphHeight * (1 + padding * 2))
@@ -360,29 +348,19 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     const screenW = w * v.zoom
     const screenH = h * v.zoom
     const { width: cw, height: ch } = containerSize.peek()
-    return (
-      screenX + screenW > 0 &&
-      screenX < cw &&
-      screenY + screenH > 0 &&
-      screenY < ch
-    )
+    return screenX + screenW > 0 && screenX < cw && screenY + screenH > 0 && screenY < ch
   }
 
   // ── Layout ───────────────────────────────────────────────────────────────
 
   async function layout(
-    algorithm: LayoutAlgorithm = 'layered',
+    algorithm: LayoutAlgorithm = "layered",
     options: LayoutOptions = {},
   ): Promise<void> {
     const currentNodes = nodes.peek()
     const currentEdges = edges.peek()
 
-    const positions = await computeLayout(
-      currentNodes,
-      currentEdges,
-      algorithm,
-      options,
-    )
+    const positions = await computeLayout(currentNodes, currentEdges, algorithm, options)
 
     const animate = options.animate !== false
     const duration = options.animationDuration ?? 300
@@ -400,9 +378,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     }
 
     // Animated transition — interpolate positions over duration
-    const startPositions = new Map(
-      currentNodes.map((n) => [n.id, { ...n.position }]),
-    )
+    const startPositions = new Map(currentNodes.map((n) => [n.id, { ...n.position }]))
     const targetPositions = new Map(positions.map((p) => [p.id, p.position]))
 
     const startTime = performance.now()
@@ -445,9 +421,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
   // ── Graph queries ────────────────────────────────────────────────────────
 
   function getConnectedEdges(nodeId: string): FlowEdge[] {
-    return edges
-      .peek()
-      .filter((e) => e.source === nodeId || e.target === nodeId)
+    return edges.peek().filter((e) => e.source === nodeId || e.target === nodeId)
   }
 
   function getIncomers(nodeId: string): FlowNode[] {
@@ -469,9 +443,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     return () => connectListeners.delete(callback)
   }
 
-  function onNodesChange(
-    callback: (changes: NodeChange[]) => void,
-  ): () => void {
+  function onNodesChange(callback: (changes: NodeChange[]) => void): () => void {
     nodesChangeListeners.add(callback)
     return () => nodesChangeListeners.delete(callback)
   }
@@ -738,11 +710,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
 
   // ── Edge waypoints ──────────────────────────────────────────────────────
 
-  function addEdgeWaypoint(
-    edgeIdentifier: string,
-    point: XYPosition,
-    index?: number,
-  ): void {
+  function addEdgeWaypoint(edgeIdentifier: string, point: XYPosition, index?: number): void {
     edges.update((eds) =>
       eds.map((e) => {
         if (e.id !== edgeIdentifier) return e
@@ -769,11 +737,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     )
   }
 
-  function updateEdgeWaypoint(
-    edgeIdentifier: string,
-    index: number,
-    point: XYPosition,
-  ): void {
+  function updateEdgeWaypoint(edgeIdentifier: string, index: number, point: XYPosition): void {
     edges.update((eds) =>
       eds.map((e) => {
         if (e.id !== edgeIdentifier) return e
@@ -788,10 +752,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
 
   // ── Proximity connect ───────────────────────────────────────────────────
 
-  function getProximityConnection(
-    nodeId: string,
-    threshold = 50,
-  ): Connection | null {
+  function getProximityConnection(nodeId: string, threshold = 50): Connection | null {
     const node = getNode(nodeId)
     if (!node) return null
 
@@ -888,18 +849,14 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
       // Push in the direction of least overlap
       if (overlapX < overlapY) {
         const dx =
-          node.position.x < other.position.x
-            ? -(overlapX + spacing) / 2
-            : (overlapX + spacing) / 2
+          node.position.x < other.position.x ? -(overlapX + spacing) / 2 : (overlapX + spacing) / 2
         updateNodePosition(other.id, {
           x: other.position.x - dx,
           y: other.position.y,
         })
       } else {
         const dy =
-          node.position.y < other.position.y
-            ? -(overlapY + spacing) / 2
-            : (overlapY + spacing) / 2
+          node.position.y < other.position.y ? -(overlapY + spacing) / 2 : (overlapY + spacing) / 2
         updateNodePosition(other.id, {
           x: other.position.x,
           y: other.position.y - dy,
@@ -910,30 +867,17 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
 
   // ── Node extent (drag boundaries) ──────────────────────────────────────
 
-  function setNodeExtent(
-    extent: [[number, number], [number, number]] | null,
-  ): void {
+  function setNodeExtent(extent: [[number, number], [number, number]] | null): void {
     nodeExtent = extent
   }
 
-  let nodeExtent: [[number, number], [number, number]] | null =
-    config.nodeExtent ?? null
+  let nodeExtent: [[number, number], [number, number]] | null = config.nodeExtent ?? null
 
-  function clampToExtent(
-    position: XYPosition,
-    nodeWidth = 150,
-    nodeHeight = 40,
-  ): XYPosition {
+  function clampToExtent(position: XYPosition, nodeWidth = 150, nodeHeight = 40): XYPosition {
     if (!nodeExtent) return position
     return {
-      x: Math.min(
-        Math.max(position.x, nodeExtent[0][0]),
-        nodeExtent[1][0] - nodeWidth,
-      ),
-      y: Math.min(
-        Math.max(position.y, nodeExtent[0][1]),
-        nodeExtent[1][1] - nodeHeight,
-      ),
+      x: Math.min(Math.max(position.x, nodeExtent[0][0]), nodeExtent[1][0] - nodeWidth),
+      y: Math.min(Math.max(position.y, nodeExtent[0][1]), nodeExtent[1][1] - nodeHeight),
     }
   }
 

package/src/index.ts

@@ -24,18 +24,18 @@
  * ```
  */
 
-export { Background } from './components/background'
-export { Controls } from './components/controls'
-export type { FlowComponentProps } from './components/flow-component'
+export { Background } from "./components/background"
+export { Controls } from "./components/controls"
+export type { FlowComponentProps } from "./components/flow-component"
 // Components
-export { Flow } from './components/flow-component'
-export { Handle } from './components/handle'
-export { MiniMap } from './components/minimap'
-export type { NodeResizerProps } from './components/node-resizer'
-export { NodeResizer } from './components/node-resizer'
-export type { NodeToolbarProps } from './components/node-toolbar'
-export { NodeToolbar } from './components/node-toolbar'
-export { Panel } from './components/panel'
+export { Flow } from "./components/flow-component"
+export { Handle } from "./components/handle"
+export { MiniMap } from "./components/minimap"
+export type { NodeResizerProps } from "./components/node-resizer"
+export { NodeResizer } from "./components/node-resizer"
+export type { NodeToolbarProps } from "./components/node-toolbar"
+export { NodeToolbar } from "./components/node-toolbar"
+export { Panel } from "./components/panel"
 // Edge path utilities
 export {
   getBezierPath,
@@ -46,13 +46,13 @@ export {
   getStepPath,
   getStraightPath,
   getWaypointPath,
-} from './edges'
+} from "./edges"
 // Core
-export { createFlow } from './flow'
+export { createFlow } from "./flow"
 // Layout
-export { computeLayout } from './layout'
+export { computeLayout } from "./layout"
 // Styles
-export { flowStyles } from './styles'
+export { flowStyles } from "./styles"
 export type {
   BackgroundProps,
   Connection,
@@ -78,6 +78,6 @@ export type {
   Rect,
   Viewport,
   XYPosition,
-} from './types'
+} from "./types"
 // Types
-export { Position } from './types'
+export { Position } from "./types"

package/src/layout.ts

@@ -1,27 +1,22 @@
-import type {
-  FlowEdge,
-  FlowNode,
-  LayoutAlgorithm,
-  LayoutOptions,
-} from './types'
+import type { FlowEdge, FlowNode, LayoutAlgorithm, LayoutOptions } from "./types"
 
 // ─── ELK algorithm mapping ───────────────────────────────────────────────────
 
 const ELK_ALGORITHMS: Record<LayoutAlgorithm, string> = {
-  layered: 'org.eclipse.elk.layered',
-  force: 'org.eclipse.elk.force',
-  stress: 'org.eclipse.elk.stress',
-  tree: 'org.eclipse.elk.mrtree',
-  radial: 'org.eclipse.elk.radial',
-  box: 'org.eclipse.elk.box',
-  rectpacking: 'org.eclipse.elk.rectpacking',
+  layered: "org.eclipse.elk.layered",
+  force: "org.eclipse.elk.force",
+  stress: "org.eclipse.elk.stress",
+  tree: "org.eclipse.elk.mrtree",
+  radial: "org.eclipse.elk.radial",
+  box: "org.eclipse.elk.box",
+  rectpacking: "org.eclipse.elk.rectpacking",
 }
 
 const ELK_DIRECTIONS: Record<string, string> = {
-  UP: 'UP',
-  DOWN: 'DOWN',
-  LEFT: 'LEFT',
-  RIGHT: 'RIGHT',
+  UP: "UP",
+  DOWN: "DOWN",
+  LEFT: "LEFT",
+  RIGHT: "RIGHT",
 }
 
 // ─── Lazy-loaded ELK instance ────────────────────────────────────────────────
@@ -33,7 +28,7 @@ async function getELK(): Promise<any> {
   if (elkInstance) return elkInstance
   if (elkPromise) return elkPromise
 
-  elkPromise = import('elkjs/lib/elk.bundled.js').then((mod) => {
+  elkPromise = import("elkjs/lib/elk.bundled.js").then((mod) => {
     const ELK = mod.default || mod
     elkInstance = new ELK()
     return elkInstance
@@ -74,35 +69,32 @@ function toElkGraph(
   options: LayoutOptions,
 ): ElkGraph {
   const layoutOptions: Record<string, string> = {
-    'elk.algorithm': ELK_ALGORITHMS[algorithm] ?? ELK_ALGORITHMS.layered,
+    "elk.algorithm": ELK_ALGORITHMS[algorithm] ?? ELK_ALGORITHMS.layered,
   }
 
   if (options.direction) {
-    layoutOptions['elk.direction'] = ELK_DIRECTIONS[options.direction] ?? 'DOWN'
+    layoutOptions["elk.direction"] = ELK_DIRECTIONS[options.direction] ?? "DOWN"
   }
 
   if (options.nodeSpacing !== undefined) {
-    layoutOptions['elk.spacing.nodeNode'] = String(options.nodeSpacing)
+    layoutOptions["elk.spacing.nodeNode"] = String(options.nodeSpacing)
   }
 
   if (options.layerSpacing !== undefined) {
-    layoutOptions['elk.layered.spacing.nodeNodeBetweenLayers'] = String(
-      options.layerSpacing,
-    )
+    layoutOptions["elk.layered.spacing.nodeNodeBetweenLayers"] = String(options.layerSpacing)
   }
 
   if (options.edgeRouting) {
     const routingMap: Record<string, string> = {
-      orthogonal: 'ORTHOGONAL',
-      splines: 'SPLINES',
-      polyline: 'POLYLINE',
+      orthogonal: "ORTHOGONAL",
+      splines: "SPLINES",
+      polyline: "POLYLINE",
     }
-    layoutOptions['elk.edgeRouting'] =
-      routingMap[options.edgeRouting] ?? 'ORTHOGONAL'
+    layoutOptions["elk.edgeRouting"] = routingMap[options.edgeRouting] ?? "ORTHOGONAL"
   }
 
   return {
-    id: 'root',
+    id: "root",
     layoutOptions,
     children: nodes.map((node) => ({
       id: node.id,
@@ -138,7 +130,7 @@ function toElkGraph(
 export async function computeLayout(
   nodes: FlowNode[],
   edges: FlowEdge[],
-  algorithm: LayoutAlgorithm = 'layered',
+  algorithm: LayoutAlgorithm = "layered",
   options: LayoutOptions = {},
 ): Promise<Array<{ id: string; position: { x: number; y: number } }>> {
   const elk = await getELK()