@pyreon/flow 0.5.0

package/src/index.ts

@@ -0,0 +1,83 @@
+/**
+ * @pyreon/flow — Reactive flow diagrams for Pyreon.
+ *
+ * Signal-native nodes, edges, pan/zoom, auto-layout. No D3 dependency.
+ * Per-node signal reactivity — O(1) updates instead of O(n) array diffing.
+ *
+ * @example
+ * ```tsx
+ * import { createFlow, Flow, Background, MiniMap, Controls } from '@pyreon/flow'
+ *
+ * const flow = createFlow({
+ *   nodes: [
+ *     { id: '1', position: { x: 0, y: 0 }, data: { label: 'Start' } },
+ *     { id: '2', position: { x: 200, y: 100 }, data: { label: 'End' } },
+ *   ],
+ *   edges: [{ source: '1', target: '2' }],
+ * })
+ *
+ * <Flow instance={flow}>
+ *   <Background />
+ *   <MiniMap />
+ *   <Controls />
+ * </Flow>
+ * ```
+ */
+
+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'
+// Edge path utilities
+export {
+  getBezierPath,
+  getEdgePath,
+  getHandlePosition,
+  getSmartHandlePositions,
+  getSmoothStepPath,
+  getStepPath,
+  getStraightPath,
+  getWaypointPath,
+} from './edges'
+// Core
+export { createFlow } from './flow'
+// Layout
+export { computeLayout } from './layout'
+// Styles
+export { flowStyles } from './styles'
+export type {
+  BackgroundProps,
+  Connection,
+  ConnectionRule,
+  ControlsProps,
+  Dimensions,
+  EdgePathResult,
+  EdgeType,
+  FlowConfig,
+  FlowEdge,
+  FlowInstance,
+  FlowNode,
+  FlowProps,
+  HandleConfig,
+  HandleProps,
+  HandleType,
+  LayoutAlgorithm,
+  LayoutOptions,
+  MiniMapProps,
+  NodeChange,
+  NodeComponentProps,
+  PanelProps,
+  Rect,
+  Viewport,
+  XYPosition,
+} from './types'
+// Types
+export { Position } from './types'

package/src/layout.ts

@@ -0,0 +1,152 @@
+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',
+}
+
+const ELK_DIRECTIONS: Record<string, string> = {
+  UP: 'UP',
+  DOWN: 'DOWN',
+  LEFT: 'LEFT',
+  RIGHT: 'RIGHT',
+}
+
+// ─── Lazy-loaded ELK instance ────────────────────────────────────────────────
+
+let elkInstance: any = null
+let elkPromise: Promise<any> | null = null
+
+async function getELK(): Promise<any> {
+  if (elkInstance) return elkInstance
+  if (elkPromise) return elkPromise
+
+  elkPromise = import('elkjs/lib/elk.bundled.js').then((mod) => {
+    const ELK = mod.default || mod
+    elkInstance = new ELK()
+    return elkInstance
+  })
+
+  return elkPromise
+}
+
+// ─── Convert flow graph to ELK format ────────────────────────────────────────
+
+interface ElkNode {
+  id: string
+  width: number
+  height: number
+}
+
+interface ElkEdge {
+  id: string
+  sources: string[]
+  targets: string[]
+}
+
+interface ElkGraph {
+  id: string
+  layoutOptions: Record<string, string>
+  children: ElkNode[]
+  edges: ElkEdge[]
+}
+
+interface ElkResult {
+  children: Array<{ id: string; x: number; y: number }>
+}
+
+function toElkGraph(
+  nodes: FlowNode[],
+  edges: FlowEdge[],
+  algorithm: LayoutAlgorithm,
+  options: LayoutOptions,
+): ElkGraph {
+  const layoutOptions: Record<string, string> = {
+    'elk.algorithm': ELK_ALGORITHMS[algorithm] ?? ELK_ALGORITHMS.layered,
+  }
+
+  if (options.direction) {
+    layoutOptions['elk.direction'] = ELK_DIRECTIONS[options.direction] ?? 'DOWN'
+  }
+
+  if (options.nodeSpacing !== undefined) {
+    layoutOptions['elk.spacing.nodeNode'] = String(options.nodeSpacing)
+  }
+
+  if (options.layerSpacing !== undefined) {
+    layoutOptions['elk.layered.spacing.nodeNodeBetweenLayers'] = String(
+      options.layerSpacing,
+    )
+  }
+
+  if (options.edgeRouting) {
+    const routingMap: Record<string, string> = {
+      orthogonal: 'ORTHOGONAL',
+      splines: 'SPLINES',
+      polyline: 'POLYLINE',
+    }
+    layoutOptions['elk.edgeRouting'] =
+      routingMap[options.edgeRouting] ?? 'ORTHOGONAL'
+  }
+
+  return {
+    id: 'root',
+    layoutOptions,
+    children: nodes.map((node) => ({
+      id: node.id,
+      width: node.width ?? 150,
+      height: node.height ?? 40,
+    })),
+    edges: edges.map((edge, i) => ({
+      id: edge.id ?? `e-${i}`,
+      sources: [edge.source],
+      targets: [edge.target],
+    })),
+  }
+}
+
+// ─── Public API ──────────────────────────────────────────────────────────────
+
+/**
+ * Compute a layout for the given nodes and edges using elkjs.
+ * Returns an array of { id, position } for each node.
+ *
+ * elkjs is lazy-loaded — zero bundle cost until this function is called.
+ *
+ * @example
+ * ```ts
+ * const positions = await computeLayout(nodes, edges, 'layered', {
+ *   direction: 'RIGHT',
+ *   nodeSpacing: 50,
+ *   layerSpacing: 100,
+ * })
+ * // positions: [{ id: '1', position: { x: 0, y: 0 } }, ...]
+ * ```
+ */
+export async function computeLayout(
+  nodes: FlowNode[],
+  edges: FlowEdge[],
+  algorithm: LayoutAlgorithm = 'layered',
+  options: LayoutOptions = {},
+): Promise<Array<{ id: string; position: { x: number; y: number } }>> {
+  const elk = await getELK()
+  const graph = toElkGraph(nodes, edges, algorithm, options)
+  const result: ElkResult = await elk.layout(graph)
+
+  return (result.children ?? []).map((child) => ({
+    id: child.id,
+    position: { x: child.x ?? 0, y: child.y ?? 0 },
+  }))
+}

package/src/styles.ts

@@ -0,0 +1,115 @@
+/**
+ * Default CSS styles for the flow diagram.
+ * Inject via `<style>` tag or import in your CSS.
+ *
+ * @example
+ * ```tsx
+ * import { flowStyles } from '@pyreon/flow'
+ *
+ * // Inject once at app root
+ * const style = document.createElement('style')
+ * style.textContent = flowStyles
+ * document.head.appendChild(style)
+ * ```
+ */
+export const flowStyles = `
+/* ── Animated edges ────────────────────────────────────────────────────────── */
+
+.pyreon-flow-edge-animated {
+  stroke-dasharray: 5;
+  animation: pyreon-flow-edge-dash 0.5s linear infinite;
+}
+
+@keyframes pyreon-flow-edge-dash {
+  to {
+    stroke-dashoffset: -10;
+  }
+}
+
+/* ── Node states ──────────────────────────────────────────────────────────── */
+
+.pyreon-flow-node {
+  transition: box-shadow 0.15s ease;
+}
+
+.pyreon-flow-node.dragging {
+  opacity: 0.9;
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
+  cursor: grabbing;
+}
+
+.pyreon-flow-node.selected {
+  filter: drop-shadow(0 0 0 2px rgba(59, 130, 246, 0.3));
+}
+
+/* ── Handles ──────────────────────────────────────────────────────────────── */
+
+.pyreon-flow-handle {
+  transition: transform 0.1s ease, background 0.1s ease;
+}
+
+.pyreon-flow-handle:hover {
+  transform: scale(1.4);
+  background: #3b82f6 !important;
+}
+
+.pyreon-flow-handle-target:hover {
+  background: #22c55e !important;
+  border-color: #22c55e !important;
+}
+
+/* ── Resizer ──────────────────────────────────────────────────────────────── */
+
+.pyreon-flow-resizer {
+  transition: background 0.1s ease, transform 0.1s ease;
+}
+
+.pyreon-flow-resizer:hover {
+  background: #3b82f6 !important;
+  transform: scale(1.2);
+}
+
+/* ── Selection box ────────────────────────────────────────────────────────── */
+
+.pyreon-flow-selection-box {
+  pointer-events: none;
+  border-radius: 2px;
+}
+
+/* ── MiniMap ──────────────────────────────────────────────────────────────── */
+
+.pyreon-flow-minimap {
+  transition: opacity 0.2s ease;
+}
+
+.pyreon-flow-minimap:hover {
+  opacity: 1 !important;
+}
+
+/* ── Node toolbar ─────────────────────────────────────────────────────────── */
+
+.pyreon-flow-node-toolbar {
+  animation: pyreon-flow-toolbar-enter 0.15s ease;
+}
+
+@keyframes pyreon-flow-toolbar-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* ── Controls ─────────────────────────────────────────────────────────────── */
+
+.pyreon-flow-controls button:hover {
+  background: #f3f4f6 !important;
+}
+
+.pyreon-flow-controls button:active {
+  background: #e5e7eb !important;
+}
+`