@barefootjs/xyflow 0.1.0

package/src/index.ts

@@ -0,0 +1,134 @@
+// Public API for `@barefootjs/xyflow`.
+//
+// JSX-native renderer components (`<Flow>` / `<Background>` /
+// `<Controls>` / `<MiniMap>` / `<Handle>` / `<NodeWrapper>` /
+// `<SimpleEdge>`) are distributed via the shadcn registry at
+// `ui/components/ui/xyflow/` — install with `bf add xyflow`.
+// This package ships the utility helpers, types, signal hooks, store,
+// and the imperative pointer-paced subsystems those components attach
+// via `ref` callbacks.
+
+// Store / context / signal hooks
+export { createFlowStore } from './store'
+export { FlowContext } from './context'
+export {
+  useFlow,
+  useViewport,
+  useNodes,
+  useEdges,
+  useNodesInitialized,
+  useStore,
+  screenToFlowPosition,
+} from './hooks'
+
+// Geometry helpers consumed by the JSX `<SimpleEdge>` component
+export { computeEdgePosition, getEdgePath } from './edge-path'
+export type { EdgePathTuple } from './edge-path'
+
+// Pointer-paced subsystems attached via `<Flow>` / `<Handle>` `ref`
+// callbacks. JSX gives these no leverage — pan/zoom is owned by
+// `XYPanZoom` (D3-zoom-derived), the selection rectangle owns global
+// pointer capture, connection drag uses `elementFromPoint`, and the
+// node resizer needs raw dimension math.
+export { attachFlowSubsystems, clampDragPositionToParent } from './flow-subsystems'
+export { attachConnectionHandler, attachReconnectionHandler } from './connection'
+export { dispatchNodeType } from './node-type-dispatch'
+export type { NodeInitFn } from './node-type-dispatch'
+export { initNodeResizer, ResizeControlVariant } from './node-resizer'
+export type {
+  NodeResizerOptions,
+  ControlPosition,
+  ControlLinePosition,
+  OnResize,
+  OnResizeStart,
+  OnResizeEnd,
+  ShouldResize,
+  ResizeControlDirection,
+} from './node-resizer'
+export { setupKeyboardHandlers, setupNodeSelection, setupSelectionRectangle } from './selection'
+export type { SelectionRectOptions } from './selection'
+
+// Stable CSS class names for the registry-side JSX components.
+// Imported (rather than declared as inline literals) so site/ui's
+// cssLayerPrefixer leaves the `bf-flow*` names un-prefixed, matching
+// the chart pattern (`CHART_CLASS_*` from `@barefootjs/chart`).
+export {
+  BF_FLOW,
+  BF_FLOW_VIEWPORT,
+  BF_FLOW_EDGES,
+  BF_FLOW_NODES,
+  BF_FLOW_NODE,
+  BF_FLOW_NODE_GROUP,
+  BF_FLOW_NODE_CHILD,
+  BF_FLOW_NODE_SELECTED,
+  BF_FLOW_NODE_CUSTOM,
+  BF_FLOW_EDGE,
+  BF_FLOW_EDGE_SELECTED,
+  BF_FLOW_EDGE_ANIMATED,
+  BF_FLOW_HANDLE,
+  BF_FLOW_HANDLE_TARGET,
+  BF_FLOW_HANDLE_SOURCE,
+  BF_FLOW_CONTROLS,
+  BF_FLOW_CONTROLS_BUTTON,
+  BF_FLOW_MINIMAP,
+  BF_FLOW_MINIMAP_MASK,
+  XYFLOW_VIEWPORT,
+} from './classes'
+
+
+// Types
+export type {
+  FlowProps,
+  FlowStore,
+  InternalFlowStore,
+  FlowStoreOptions,
+  FitViewOptions,
+  NodeBase,
+  EdgeBase,
+  InternalNodeBase,
+  Viewport,
+  NodeLookup,
+  ParentLookup,
+  EdgeLookup,
+  ConnectionLookup,
+  CoordinateExtent,
+  SnapGrid,
+  NodeOrigin,
+  Transform,
+  PanZoomInstance,
+  XYPosition,
+  OnConnect,
+  OnConnectStart,
+  OnConnectEnd,
+  IsValidConnection,
+  NodeDragItem,
+  ConnectionMode,
+  NodeComponentProps,
+  EdgeComponentProps,
+  SelectionMode,
+  OnReconnect,
+  Connection,
+} from './types'
+// HandleType is consumed by the JSX `<Handle>` component (registry-side)
+// for its `type` prop typing. Re-exported here from `@xyflow/system` so
+// consumers don't need a separate import.
+export type { HandleType } from '@xyflow/system'
+
+// Compat layer (React Flow API shims for desk migration)
+export { useNodesState, useEdgesState, useReactFlow, addEdge, reconnectEdge } from './compat'
+
+// Re-export useful utilities from @xyflow/system
+export {
+  getBezierPath,
+  getSmoothStepPath,
+  getStraightPath,
+  getConnectedEdges,
+  getOutgoers,
+  getIncomers,
+  getNodesBounds,
+  getNodesInside,
+  getEdgeToolbarTransform,
+  Position,
+  ConnectionMode as ConnectionModeEnum,
+  MarkerType,
+} from '@xyflow/system'

package/src/node-resizer.ts

@@ -0,0 +1,276 @@
+import { onCleanup, untrack } from '@barefootjs/client'
+import {
+  XYResizer,
+  XY_RESIZER_HANDLE_POSITIONS,
+  XY_RESIZER_LINE_POSITIONS,
+  ResizeControlVariant,
+  updateNodeInternals,
+} from '@xyflow/system'
+import type {
+  NodeBase,
+  InternalNodeUpdate,
+  ControlPosition,
+  ControlLinePosition,
+  OnResize,
+  OnResizeStart,
+  OnResizeEnd,
+  ShouldResize,
+  ResizeControlDirection,
+} from '@xyflow/system'
+import type { XYResizerChange, XYResizerChildChange, XYResizerInstance } from '@xyflow/system'
+import type { FlowStore } from './types'
+
+/**
+ * Options for initNodeResizer.
+ */
+export type NodeResizerOptions = {
+  /** Minimum width the node can be resized to (default: 10) */
+  minWidth?: number
+  /** Minimum height the node can be resized to (default: 10) */
+  minHeight?: number
+  /** Maximum width the node can be resized to (default: Infinity) */
+  maxWidth?: number
+  /** Maximum height the node can be resized to (default: Infinity) */
+  maxHeight?: number
+  /** Whether to keep the aspect ratio during resize (default: false) */
+  keepAspectRatio?: boolean
+  /** Which variant of resize controls to use: 'handle' (corners) or 'line' (edges) */
+  variant?: ResizeControlVariant | 'handle' | 'line'
+  /** Callback fired when resize starts */
+  onResizeStart?: OnResizeStart
+  /** Callback fired during resize with new dimensions */
+  onResize?: OnResize
+  /** Callback fired when resize ends */
+  onResizeEnd?: OnResizeEnd
+  /** Callback to determine if resize should proceed */
+  shouldResize?: ShouldResize
+  /** Whether the node is resizable (default: true) */
+  isVisible?: boolean
+  /** CSS color for the resize handle lines/corners */
+  color?: string
+}
+
+/**
+ * Initialize resize handles on a node element.
+ *
+ * Creates resize handle elements (corners and/or lines) and attaches
+ * XYResizer from @xyflow/system for the resize logic.
+ *
+ * Usage:
+ *   // Inside a custom node type function:
+ *   initNodeResizer(this.parentElement, {
+ *     nodeId: props.id,
+ *     store,
+ *     minWidth: 100,
+ *     minHeight: 50,
+ *     onResize: (event, params) => console.log('Resized:', params),
+ *   })
+ */
+export function initNodeResizer<NodeType extends NodeBase>(
+  nodeEl: HTMLElement,
+  nodeId: string,
+  store: FlowStore<NodeType>,
+  options: NodeResizerOptions = {},
+): () => void {
+  const {
+    minWidth = 10,
+    minHeight = 10,
+    maxWidth = Number.MAX_SAFE_INTEGER,
+    maxHeight = Number.MAX_SAFE_INTEGER,
+    keepAspectRatio = false,
+    variant = ResizeControlVariant.Handle,
+    onResizeStart,
+    onResize,
+    onResizeEnd,
+    shouldResize,
+    isVisible = true,
+    color,
+  } = options
+
+  if (!isVisible) return () => {}
+
+  const resolvedVariant =
+    typeof variant === 'string'
+      ? variant === 'line'
+        ? ResizeControlVariant.Line
+        : ResizeControlVariant.Handle
+      : variant
+
+  // Determine which positions to use based on variant
+  const positions: ControlPosition[] =
+    resolvedVariant === ResizeControlVariant.Line
+      ? (XY_RESIZER_LINE_POSITIONS as ControlPosition[])
+      : XY_RESIZER_HANDLE_POSITIONS
+
+  // Mark node as resizable for CSS
+  nodeEl.classList.add('bf-flow__node--resizable')
+
+  // Container for resize handles
+  const container = document.createElement('div')
+  container.className = 'bf-flow__node-resizer'
+  nodeEl.appendChild(container)
+
+  const resizerInstances: XYResizerInstance[] = []
+
+  for (const position of positions) {
+    const handleEl = document.createElement('div')
+    handleEl.className = `bf-flow__resize-handle bf-flow__resize-handle--${position}`
+
+    if (resolvedVariant === ResizeControlVariant.Line) {
+      handleEl.classList.add('bf-flow__resize-handle--line')
+    } else {
+      handleEl.classList.add('bf-flow__resize-handle--corner')
+    }
+
+    handleEl.dataset.position = position
+
+    if (color) {
+      handleEl.style.setProperty('--bf-resize-color', color)
+    }
+
+    container.appendChild(handleEl)
+
+    // Create XYResizer instance for this handle
+    const resizerInstance = XYResizer({
+      domNode: handleEl as HTMLDivElement,
+      nodeId,
+      getStoreItems: () => {
+        const nodeLookup = untrack(store.nodeLookup)
+        const transform = store.getTransform()
+        return {
+          nodeLookup,
+          transform,
+          snapGrid: store.snapToGrid ? store.snapGrid : undefined,
+          snapToGrid: store.snapToGrid,
+          nodeOrigin: store.nodeOrigin,
+          paneDomNode: untrack(store.domNode) as HTMLDivElement | null,
+        }
+      },
+      onChange: (changes: XYResizerChange, childChanges: XYResizerChildChange[]) => {
+        // Apply dimension and position changes to the node
+        const lookup = untrack(store.nodeLookup)
+        const node = lookup.get(nodeId)
+        if (!node) return
+
+        // Update measured dimensions
+        if (changes.width != null) {
+          node.measured.width = changes.width
+          nodeEl.style.width = `${changes.width}px`
+        }
+        if (changes.height != null) {
+          node.measured.height = changes.height
+          nodeEl.style.height = `${changes.height}px`
+        }
+
+        // Update position if changed (e.g., resizing from top-left)
+        if (changes.x != null || changes.y != null) {
+          const newX = changes.x ?? node.internals.positionAbsolute.x
+          const newY = changes.y ?? node.internals.positionAbsolute.y
+
+          node.internals.positionAbsolute = { x: newX, y: newY }
+          node.internals.userNode.position = { x: newX, y: newY }
+          nodeEl.style.transform = `translate(${newX}px, ${newY}px)`
+        }
+
+        // Apply child position changes
+        for (const childChange of childChanges) {
+          const childNode = lookup.get(childChange.id)
+          if (childNode) {
+            childNode.internals.positionAbsolute = childChange.position
+            childNode.internals.userNode.position = childChange.position
+          }
+        }
+
+        // Update node internals for edge recalculation
+        const updates = new Map<string, InternalNodeUpdate>()
+        updates.set(nodeId, {
+          id: nodeId,
+          nodeElement: nodeEl as HTMLDivElement,
+          force: true,
+        })
+
+        const parentLookup = untrack(store.parentLookup)
+        updateNodeInternals(
+          updates,
+          lookup,
+          parentLookup,
+          untrack(store.domNode),
+          store.nodeOrigin,
+          store.nodeExtent,
+        )
+
+        // Notify position-dependent subscribers (edges etc.)
+        store.triggerPositionUpdate()
+      },
+      onEnd: (change) => {
+        // Commit final dimensions to the nodes array
+        store.setNodes((prev) =>
+          prev.map((n) =>
+            n.id === nodeId
+              ? {
+                  ...n,
+                  position: { x: change.x, y: change.y },
+                  measured: { width: change.width, height: change.height },
+                  style: {
+                    ...(n as any).style,
+                    width: change.width,
+                    height: change.height,
+                  },
+                }
+              : n,
+          ),
+        )
+      },
+    })
+
+    // Determine resize direction for line handles
+    const isLineHandle = resolvedVariant === ResizeControlVariant.Line
+    let resizeDirection: ResizeControlDirection | undefined
+    if (isLineHandle) {
+      if (position === 'left' || position === 'right') {
+        resizeDirection = 'horizontal'
+      } else if (position === 'top' || position === 'bottom') {
+        resizeDirection = 'vertical'
+      }
+    }
+
+    // Configure the resizer instance
+    resizerInstance.update({
+      controlPosition: position,
+      boundaries: { minWidth, minHeight, maxWidth, maxHeight },
+      keepAspectRatio,
+      resizeDirection,
+      onResizeStart,
+      onResize,
+      onResizeEnd,
+      shouldResize,
+    })
+
+    resizerInstances.push(resizerInstance)
+  }
+
+  // Cleanup function
+  const cleanup = () => {
+    for (const instance of resizerInstances) {
+      instance.destroy()
+    }
+    container.remove()
+    nodeEl.classList.remove('bf-flow__node--resizable')
+  }
+
+  onCleanup(cleanup)
+
+  return cleanup
+}
+
+// Re-export types that consumers might need
+export { ResizeControlVariant }
+export type {
+  ControlPosition,
+  ControlLinePosition,
+  OnResize,
+  OnResizeStart,
+  OnResizeEnd,
+  ShouldResize,
+  ResizeControlDirection,
+}

package/src/node-type-dispatch.ts

@@ -0,0 +1,46 @@
+/**
+ * Node-type dispatch — the helper that funnels `<Flow nodeTypes={...}>`
+ * entries into the host `<div>` produced by `FlowNodeTypeBridge`.
+ *
+ * `nodeTypes` accepts two entry shapes through the same map so projects
+ * can migrate custom nodes from imperative to JSX one file at a time
+ * without touching every `<Flow>` call site:
+ *
+ *   1. Imperative: `function MyNode(this: HTMLElement, props): void`
+ *      — mutates `this` (the host element) and returns nothing.
+ *   2. JSX-component shim: post-`'use client'` `.tsx` compile output
+ *      — ignores `this` and returns a real DOM `Node`. The bridge
+ *      appends that returned node into the host so subsequent
+ *      wipe+rebuild cycles see it.
+ *
+ * See piconic-ai/barefootjs#1236 for the migration motivation.
+ */
+
+import type { NodeBase } from './types'
+import type { NodeComponentProps } from './types'
+
+/**
+ * Cross-shape `nodeTypes` entry. The return type covers both supported
+ * shapes — imperative entries return `void`, JSX-component shim
+ * entries return a `Node`.
+ */
+export type NodeInitFn<NodeType extends NodeBase = NodeBase> = (
+  this: HTMLElement,
+  props: NodeComponentProps<NodeType>,
+) => void | Node | undefined
+
+/**
+ * Dispatch a `nodeTypes` entry into the host element. Invokes `initFn`
+ * with `el` bound as `this` (imperative path) and appends its return
+ * value when it is a `Node` (JSX-component shim path). The
+ * `instanceof Node` guard is harmless on the imperative path: `void`
+ * is not an instance of `Node`, so the branch is skipped.
+ */
+export function dispatchNodeType<NT extends NodeBase>(
+  el: HTMLElement,
+  initFn: NodeInitFn<NT>,
+  props: NodeComponentProps<NT>,
+): void {
+  const result = initFn.call(el, props)
+  if (result instanceof Node) el.appendChild(result)
+}