@runtypelabs/react-flow 0.1.0

package/src/utils/layout.ts

@@ -0,0 +1,284 @@
+import type { RuntypeNode, RuntypeEdge } from '../types'
+
+// ============================================================================
+// Layout Constants
+// ============================================================================
+
+const DEFAULT_NODE_WIDTH = 280
+const DEFAULT_NODE_HEIGHT = 150
+const HORIZONTAL_SPACING = 100
+const VERTICAL_SPACING = 80
+const BRANCH_OFFSET = 350
+
+// ============================================================================
+// Auto Layout Algorithm
+// ============================================================================
+
+export interface LayoutOptions {
+  /** Direction of the flow */
+  direction?: 'vertical' | 'horizontal'
+  /** Starting position */
+  startPosition?: { x: number; y: number }
+  /** Node dimensions */
+  nodeWidth?: number
+  nodeHeight?: number
+  /** Spacing between nodes */
+  horizontalSpacing?: number
+  verticalSpacing?: number
+  /** Offset for conditional branches */
+  branchOffset?: number
+}
+
+/**
+ * Automatically layout nodes in a flow-like arrangement
+ */
+export function autoLayout(
+  nodes: RuntypeNode[],
+  edges: RuntypeEdge[],
+  options: LayoutOptions = {}
+): RuntypeNode[] {
+  const {
+    direction = 'vertical',
+    startPosition = { x: 400, y: 50 },
+    nodeWidth = DEFAULT_NODE_WIDTH,
+    nodeHeight = DEFAULT_NODE_HEIGHT,
+    horizontalSpacing = HORIZONTAL_SPACING,
+    verticalSpacing = VERTICAL_SPACING,
+    branchOffset = BRANCH_OFFSET,
+  } = options
+
+  // Build adjacency map from edges
+  const adjacencyMap = new Map<string, string[]>()
+  const incomingMap = new Map<string, string[]>()
+  
+  for (const edge of edges) {
+    const existing = adjacencyMap.get(edge.source) || []
+    adjacencyMap.set(edge.source, [...existing, edge.target])
+    
+    const incoming = incomingMap.get(edge.target) || []
+    incomingMap.set(edge.target, [...incoming, edge.source])
+  }
+
+  // Find root nodes (nodes with no incoming edges)
+  const rootNodes = nodes.filter(node => {
+    const incoming = incomingMap.get(node.id)
+    return !incoming || incoming.length === 0
+  })
+
+  // If no root nodes found, use the first node
+  if (rootNodes.length === 0 && nodes.length > 0) {
+    rootNodes.push(nodes[0])
+  }
+
+  // Track positioned nodes
+  const positionedNodes = new Map<string, { x: number; y: number }>()
+  const visited = new Set<string>()
+
+  // Position nodes using BFS
+  const queue: Array<{ nodeId: string; x: number; y: number; depth: number }> = []
+  
+  // Start with root nodes
+  let startX = startPosition.x
+  for (const rootNode of rootNodes) {
+    queue.push({ nodeId: rootNode.id, x: startX, y: startPosition.y, depth: 0 })
+    startX += nodeWidth + horizontalSpacing
+  }
+
+  while (queue.length > 0) {
+    const { nodeId, x, y, depth } = queue.shift()!
+    
+    if (visited.has(nodeId)) continue
+    visited.add(nodeId)
+    
+    positionedNodes.set(nodeId, { x, y })
+    
+    // Get children
+    const children = adjacencyMap.get(nodeId) || []
+    const node = nodes.find(n => n.id === nodeId)
+    
+    // Check if this is a conditional node
+    const isConditional = node?.data.step.type === 'conditional'
+    
+    if (isConditional && children.length > 0) {
+      // Position conditional branches side by side
+      const trueBranch = children.filter(c => c.includes('-true-'))
+      const falseBranch = children.filter(c => c.includes('-false-'))
+      const normalChildren = children.filter(c => !c.includes('-true-') && !c.includes('-false-'))
+      
+      // Position true branch to the right
+      let trueY = y + nodeHeight + verticalSpacing
+      for (const childId of trueBranch) {
+        if (!visited.has(childId)) {
+          queue.push({
+            nodeId: childId,
+            x: x + branchOffset,
+            y: trueY,
+            depth: depth + 1,
+          })
+          trueY += nodeHeight + verticalSpacing
+        }
+      }
+      
+      // Position false branch to the left
+      let falseY = y + nodeHeight + verticalSpacing
+      for (const childId of falseBranch) {
+        if (!visited.has(childId)) {
+          queue.push({
+            nodeId: childId,
+            x: x - branchOffset,
+            y: falseY,
+            depth: depth + 1,
+          })
+          falseY += nodeHeight + verticalSpacing
+        }
+      }
+      
+      // Position normal children below
+      const maxBranchY = Math.max(trueY, falseY)
+      let childY = maxBranchY
+      for (const childId of normalChildren) {
+        if (!visited.has(childId)) {
+          queue.push({
+            nodeId: childId,
+            x,
+            y: childY,
+            depth: depth + 1,
+          })
+          childY += nodeHeight + verticalSpacing
+        }
+      }
+    } else {
+      // Position children in sequence
+      let childY = y + nodeHeight + verticalSpacing
+      let childX = x
+      
+      for (let i = 0; i < children.length; i++) {
+        const childId = children[i]
+        if (!visited.has(childId)) {
+          if (direction === 'horizontal') {
+            queue.push({
+              nodeId: childId,
+              x: childX + nodeWidth + horizontalSpacing,
+              y,
+              depth: depth + 1,
+            })
+            childX += nodeWidth + horizontalSpacing
+          } else {
+            queue.push({
+              nodeId: childId,
+              x,
+              y: childY,
+              depth: depth + 1,
+            })
+            childY += nodeHeight + verticalSpacing
+          }
+        }
+      }
+    }
+  }
+
+  // Apply positions to nodes
+  return nodes.map(node => {
+    const position = positionedNodes.get(node.id)
+    if (position) {
+      return {
+        ...node,
+        position,
+      }
+    }
+    return node
+  })
+}
+
+/**
+ * Center nodes within a viewport
+ */
+export function centerNodes(
+  nodes: RuntypeNode[],
+  viewportWidth: number,
+  viewportHeight: number
+): RuntypeNode[] {
+  if (nodes.length === 0) return nodes
+
+  // Calculate bounding box
+  let minX = Infinity
+  let maxX = -Infinity
+  let minY = Infinity
+  let maxY = -Infinity
+
+  for (const node of nodes) {
+    minX = Math.min(minX, node.position.x)
+    maxX = Math.max(maxX, node.position.x + DEFAULT_NODE_WIDTH)
+    minY = Math.min(minY, node.position.y)
+    maxY = Math.max(maxY, node.position.y + DEFAULT_NODE_HEIGHT)
+  }
+
+  // Calculate offset to center
+  const contentWidth = maxX - minX
+  const contentHeight = maxY - minY
+  const offsetX = (viewportWidth - contentWidth) / 2 - minX
+  const offsetY = (viewportHeight - contentHeight) / 2 - minY
+
+  // Apply offset
+  return nodes.map(node => ({
+    ...node,
+    position: {
+      x: node.position.x + offsetX,
+      y: node.position.y + offsetY,
+    },
+  }))
+}
+
+/**
+ * Align nodes to a grid
+ */
+export function snapToGrid(
+  nodes: RuntypeNode[],
+  gridSize: number = 20
+): RuntypeNode[] {
+  return nodes.map(node => ({
+    ...node,
+    position: {
+      x: Math.round(node.position.x / gridSize) * gridSize,
+      y: Math.round(node.position.y / gridSize) * gridSize,
+    },
+  }))
+}
+
+/**
+ * Get the bounding box of all nodes
+ */
+export function getNodesBoundingBox(nodes: RuntypeNode[]): {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+  width: number
+  height: number
+} {
+  if (nodes.length === 0) {
+    return { minX: 0, maxX: 0, minY: 0, maxY: 0, width: 0, height: 0 }
+  }
+
+  let minX = Infinity
+  let maxX = -Infinity
+  let minY = Infinity
+  let maxY = -Infinity
+
+  for (const node of nodes) {
+    minX = Math.min(minX, node.position.x)
+    maxX = Math.max(maxX, node.position.x + DEFAULT_NODE_WIDTH)
+    minY = Math.min(minY, node.position.y)
+    maxY = Math.max(maxY, node.position.y + DEFAULT_NODE_HEIGHT)
+  }
+
+  return {
+    minX,
+    maxX,
+    minY,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY,
+  }
+}
+

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "ES2020"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": false,
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}
+

package/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  // DTS generation disabled due to React version conflicts in the monorepo
+  // Types are exported from src/types/index.ts and can be imported directly
+  dts: false,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  external: ['react', 'react-dom', '@xyflow/react'],
+  treeshake: true,
+})
+