@barefootjs/xyflow 0.1.0

package/src/__tests__/store.test.ts

@@ -0,0 +1,399 @@
+import { describe, test, expect } from 'bun:test'
+import { createEffect, createRoot } from '@barefootjs/client'
+import { createFlowStore } from '../store'
+
+describe('createFlowStore', () => {
+  test('returns initial empty state', () => {
+    createRoot(() => {
+      const store = createFlowStore()
+      expect(store.nodes()).toEqual([])
+      expect(store.edges()).toEqual([])
+      expect(store.viewport()).toEqual({ x: 0, y: 0, zoom: 1 })
+      expect(store.width()).toBe(0)
+      expect(store.height()).toBe(0)
+      expect(store.dragging()).toBe(false)
+    })
+  })
+
+  test('accepts initial nodes and edges', () => {
+    createRoot(() => {
+      const nodes = [
+        { id: '1', position: { x: 0, y: 0 }, data: { label: 'A' } },
+        { id: '2', position: { x: 100, y: 50 }, data: { label: 'B' } },
+      ]
+      const edges = [{ id: 'e1-2', source: '1', target: '2' }]
+
+      const store = createFlowStore({ nodes, edges })
+      expect(store.nodes()).toHaveLength(2)
+      expect(store.edges()).toHaveLength(1)
+    })
+  })
+
+  test('accepts custom viewport', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        defaultViewport: { x: 50, y: 100, zoom: 1.5 },
+      })
+      expect(store.viewport()).toEqual({ x: 50, y: 100, zoom: 1.5 })
+    })
+  })
+
+  test('setNodes triggers reactive updates', () => {
+    createRoot(() => {
+      const store = createFlowStore()
+      const updates: number[] = []
+
+      createEffect(() => {
+        updates.push(store.nodes().length)
+      })
+
+      expect(updates).toEqual([0])
+
+      store.setNodes([
+        { id: '1', position: { x: 0, y: 0 }, data: { label: 'A' } },
+      ])
+
+      expect(updates).toEqual([0, 1])
+    })
+  })
+
+  test('setEdges triggers reactive updates', () => {
+    createRoot(() => {
+      const store = createFlowStore()
+      const updates: number[] = []
+
+      createEffect(() => {
+        updates.push(store.edges().length)
+      })
+
+      expect(updates).toEqual([0])
+
+      store.setEdges([{ id: 'e1', source: '1', target: '2' }])
+
+      expect(updates).toEqual([0, 1])
+    })
+  })
+
+  test('per-node selected getter tracks setNodes updates', () => {
+    // Exercises the pattern NodeComponentProps.selected uses internally:
+    // a getter that looks the node up in store.nodes() so custom components
+    // can observe selection changes after mount via createEffect.
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: {} },
+          { id: '2', position: { x: 10, y: 0 }, data: {} },
+        ],
+      })
+
+      const isSelected = (id: string) => () => {
+        const n = store.nodes().find((n) => n.id === id) as
+          | { selected?: boolean }
+          | undefined
+        return n?.selected ?? false
+      }
+
+      const log: boolean[] = []
+      const selectedOne = isSelected('1')
+      createEffect(() => {
+        log.push(selectedOne())
+      })
+
+      expect(log).toEqual([false])
+
+      store.setNodes((nds) =>
+        nds.map((n) => (n.id === '1' ? { ...n, selected: true } : n)),
+      )
+      expect(log).toEqual([false, true])
+
+      // Selecting a different node should not re-emit for node 1 since
+      // the underlying value didn't change — but store.nodes() did, so
+      // the effect re-runs. We just assert the latest value is still true.
+      store.setNodes((nds) =>
+        nds.map((n) => (n.id === '2' ? { ...n, selected: true } : n)),
+      )
+      expect(log[log.length - 1]).toBe(true)
+
+      store.setNodes((nds) =>
+        nds.map((n) => (n.id === '1' ? { ...n, selected: false } : n)),
+      )
+      expect(log[log.length - 1]).toBe(false)
+    })
+  })
+
+  test('setViewport triggers reactive updates', () => {
+    createRoot(() => {
+      const store = createFlowStore()
+      const viewports: Array<{ x: number; y: number; zoom: number }> = []
+
+      createEffect(() => {
+        viewports.push(store.viewport())
+      })
+
+      expect(viewports).toEqual([{ x: 0, y: 0, zoom: 1 }])
+
+      store.setViewport({ x: 10, y: 20, zoom: 2 })
+
+      expect(viewports).toEqual([
+        { x: 0, y: 0, zoom: 1 },
+        { x: 10, y: 20, zoom: 2 },
+      ])
+    })
+  })
+
+  test('nodesInitialized processes nodes through adoptUserNodes', () => {
+    createRoot(() => {
+      const nodes = [
+        { id: '1', position: { x: 0, y: 0 }, data: { label: 'A' } },
+        { id: '2', position: { x: 100, y: 50 }, data: { label: 'B' } },
+      ]
+      const store = createFlowStore({ nodes })
+
+      // nodesInitialized triggers node processing
+      const initialized = store.nodesInitialized()
+
+      // Nodes without measured dimensions are not "initialized"
+      expect(initialized).toBe(false)
+
+      // But nodeLookup should be populated
+      const lookup = store.nodeLookup()
+      expect(lookup.size).toBe(2)
+      expect(lookup.has('1')).toBe(true)
+      expect(lookup.has('2')).toBe(true)
+
+      // Internal node should have positionAbsolute
+      const node1 = lookup.get('1')!
+      expect(node1.internals.positionAbsolute).toEqual({ x: 0, y: 0 })
+    })
+  })
+
+  test('nodeLookup emits a fresh Map on setNodes-driven update (#1270)', () => {
+    // Regression for #1270: `adoptUserNodes` mutates the underlying
+    // Map in place, and the old code re-emitted the same reference.
+    // barefoot's Object.is dedupe swallowed the notification so per-
+    // node consumers stayed stuck on the initial value.
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: { count: 0 } },
+          { id: '2', position: { x: 10, y: 0 }, data: {} },
+        ],
+      })
+      // Touch `nodesInitialized` so the memo evaluates and the lookup
+      // is populated before the assertions below.
+      store.nodesInitialized()
+
+      let fires = 0
+      let lastSeen: unknown
+      createEffect(() => {
+        const lookup = store.nodeLookup()
+        const entry = lookup.get('1')
+        lastSeen = (entry?.internals.userNode.data as { count?: number } | undefined)?.count
+        fires++
+      })
+      expect(fires).toBe(1)
+      expect(lastSeen).toBe(0)
+
+      store.setNodes((nds) =>
+        nds.map((n) => (n.id === '1' ? { ...n, data: { count: 1 } } : n)) as typeof nds,
+      )
+
+      expect(fires).toBe(2)
+      expect(lastSeen).toBe(1)
+    })
+  })
+
+  test('nodeSignal(id) fires only for the changed id (#1270 acceptance)', () => {
+    // Acceptance criterion from #1270: a single-node setNodes update
+    // must NOT wake up every per-node consumer. `nodeSignal(id)`
+    // delivers the fine-grained subscription that satisfies this.
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: { count: 0 } },
+          { id: '2', position: { x: 10, y: 0 }, data: { count: 0 } },
+        ],
+      })
+      store.nodesInitialized()
+
+      let firesForOne = 0
+      let firesForTwo = 0
+      createEffect(() => {
+        store.nodeSignal('1')
+        firesForOne++
+      })
+      createEffect(() => {
+        store.nodeSignal('2')
+        firesForTwo++
+      })
+      expect([firesForOne, firesForTwo]).toEqual([1, 1])
+
+      // Mutate only node '1' — node '2's subscriber must NOT wake up.
+      store.setNodes((nds) =>
+        nds.map((n) => (n.id === '1' ? { ...n, data: { count: 1 } } : n)) as typeof nds,
+      )
+      expect([firesForOne, firesForTwo]).toEqual([2, 1])
+
+      // Mutate only node '2' via `selected` — node '1's subscriber stays asleep.
+      store.setNodes((nds) =>
+        nds.map((n) => (n.id === '2' ? { ...n, selected: true } : n)) as typeof nds,
+      )
+      expect([firesForOne, firesForTwo]).toEqual([2, 2])
+    })
+  })
+
+  test('nodeSignal(id) survives remove and re-add of the same id (#1270)', () => {
+    // Slots are retained across structural changes so a consumer that
+    // subscribed before the node was removed (or before it existed)
+    // resumes receiving updates when the node reappears.
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: { count: 7 } },
+        ],
+      })
+      store.nodesInitialized()
+
+      const seen: Array<number | undefined> = []
+      createEffect(() => {
+        const entry = store.nodeSignal('1')
+        seen.push((entry?.internals.userNode.data as { count?: number } | undefined)?.count)
+      })
+      expect(seen).toEqual([7])
+
+      store.setNodes([])
+      expect(seen).toEqual([7, undefined])
+
+      store.setNodes([{ id: '1', position: { x: 0, y: 0 }, data: { count: 99 } }])
+      expect(seen).toEqual([7, undefined, 99])
+    })
+  })
+
+  test('edgeLookup is derived from edges', () => {
+    createRoot(() => {
+      const edges = [
+        { id: 'e1', source: '1', target: '2' },
+        { id: 'e2', source: '2', target: '3' },
+      ]
+      const store = createFlowStore({ edges })
+
+      const lookup = store.edgeLookup()
+      expect(lookup.size).toBe(2)
+      expect(lookup.has('e1')).toBe(true)
+      expect(lookup.has('e2')).toBe(true)
+    })
+  })
+
+  test('getTransform returns [x, y, zoom] tuple', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        defaultViewport: { x: 10, y: 20, zoom: 1.5 },
+      })
+      expect(store.getTransform()).toEqual([10, 20, 1.5])
+    })
+  })
+
+  test('configuration defaults', () => {
+    createRoot(() => {
+      const store = createFlowStore()
+      expect(store.minZoom).toBe(0.5)
+      expect(store.maxZoom).toBe(2)
+      expect(store.nodeOrigin).toEqual([0, 0])
+      expect(store.snapToGrid).toBe(false)
+      expect(store.snapGrid).toEqual([15, 15])
+    })
+  })
+
+  test('configuration overrides', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        minZoom: 0.1,
+        maxZoom: 5,
+        snapToGrid: true,
+        snapGrid: [10, 10],
+        nodeOrigin: [0.5, 0.5],
+      })
+      expect(store.minZoom).toBe(0.1)
+      expect(store.maxZoom).toBe(5)
+      expect(store.snapToGrid).toBe(true)
+      expect(store.snapGrid).toEqual([10, 10])
+      expect(store.nodeOrigin).toEqual([0.5, 0.5])
+    })
+  })
+
+  test('addEdge adds to edges', () => {
+    createRoot(() => {
+      const store = createFlowStore()
+      expect(store.edges()).toHaveLength(0)
+
+      store.addEdge({ id: 'e1', source: '1', target: '2' })
+      expect(store.edges()).toHaveLength(1)
+      expect(store.edges()[0].id).toBe('e1')
+    })
+  })
+
+  test('deleteElements removes nodes and connected edges', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: {} },
+          { id: '2', position: { x: 100, y: 0 }, data: {} },
+          { id: '3', position: { x: 200, y: 0 }, data: {} },
+        ],
+        edges: [
+          { id: 'e1-2', source: '1', target: '2' },
+          { id: 'e2-3', source: '2', target: '3' },
+        ],
+      })
+
+      store.deleteElements({ nodes: [{ id: '2', position: { x: 100, y: 0 }, data: {} }] })
+
+      expect(store.nodes()).toHaveLength(2)
+      expect(store.nodes().map((n) => n.id)).toEqual(['1', '3'])
+      // Both edges connected to node 2 should be removed
+      expect(store.edges()).toHaveLength(0)
+    })
+  })
+
+  test('deleteElements removes only specified edges', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        edges: [
+          { id: 'e1', source: '1', target: '2' },
+          { id: 'e2', source: '2', target: '3' },
+        ],
+      })
+
+      store.deleteElements({ edges: [{ id: 'e1', source: '1', target: '2' }] })
+
+      expect(store.edges()).toHaveLength(1)
+      expect(store.edges()[0].id).toBe('e2')
+    })
+  })
+
+  test('unselectNodesAndEdges deselects all', () => {
+    createRoot(() => {
+      const store = createFlowStore({
+        nodes: [
+          { id: '1', position: { x: 0, y: 0 }, data: {}, selected: true },
+          { id: '2', position: { x: 100, y: 0 }, data: {}, selected: true },
+        ],
+        edges: [
+          { id: 'e1', source: '1', target: '2', selected: true },
+        ],
+      })
+
+      store.unselectNodesAndEdges()
+
+      expect(store.nodes().every((n) => !n.selected)).toBe(true)
+      expect(store.edges().every((e) => !e.selected)).toBe(true)
+    })
+  })
+
+  test('multiSelectionActive defaults to false', () => {
+    createRoot(() => {
+      const store = createFlowStore()
+      expect(store.multiSelectionActive()).toBe(false)
+    })
+  })
+})

package/src/__tests__/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@barefootjs/jsx",
+    "types": ["bun"],
+    "paths": {
+      "@barefootjs/jsx": ["../../../jsx/src"],
+      "@barefootjs/jsx/jsx-runtime": ["../../../jsx/src/jsx-runtime/index.d.ts"],
+      "@barefootjs/jsx/jsx-dev-runtime": ["../../../jsx/src/jsx-dev-runtime/index.d.ts"],
+      "@barefootjs/client": ["../../../client/src"],
+      "@barefootjs/test": ["../../../test/src"]
+    }
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"]
+}

package/src/classes.ts

@@ -0,0 +1,41 @@
+/**
+ * Stable CSS class names for xyflow primitives.
+ *
+ * Exported as constants so the registry-side `<Flow>` / `<Background>` /
+ * etc. can reference them via `className={BF_FLOW}` instead of
+ * `className="bf-flow"`. site/ui's `cssLayerPrefixer` only rewrites
+ * locally-declared static `className` literals; imported identifiers are
+ * left alone, which keeps `bf-flow*` un-prefixed for the e2e selectors
+ * (the same trick chart uses with `CHART_CLASS_GRID` etc.).
+ */
+
+export const BF_FLOW = 'bf-flow'
+export const BF_FLOW_VIEWPORT = 'bf-flow__viewport'
+export const BF_FLOW_EDGES = 'bf-flow__edges'
+export const BF_FLOW_NODES = 'bf-flow__nodes'
+
+export const BF_FLOW_NODE = 'bf-flow__node'
+export const BF_FLOW_NODE_GROUP = 'bf-flow__node--group'
+export const BF_FLOW_NODE_CHILD = 'bf-flow__node--child'
+export const BF_FLOW_NODE_SELECTED = 'bf-flow__node--selected'
+// Strips the default node card styling (padding / border / background)
+// so a `renderNode` / `nodeTypes` body provides its own visual.
+export const BF_FLOW_NODE_CUSTOM = 'bf-flow__node--custom'
+
+export const BF_FLOW_EDGE = 'bf-flow__edge'
+export const BF_FLOW_EDGE_SELECTED = 'bf-flow__edge--selected'
+export const BF_FLOW_EDGE_ANIMATED = 'bf-flow__edge--animated'
+
+export const BF_FLOW_HANDLE = 'bf-flow__handle'
+export const BF_FLOW_HANDLE_TARGET = 'bf-flow__handle--target'
+export const BF_FLOW_HANDLE_SOURCE = 'bf-flow__handle--source'
+
+export const BF_FLOW_CONTROLS = 'bf-flow__controls'
+export const BF_FLOW_CONTROLS_BUTTON = 'bf-flow__controls-button'
+
+export const BF_FLOW_MINIMAP = 'bf-flow__minimap'
+export const BF_FLOW_MINIMAP_MASK = 'bf-flow__minimap-mask'
+
+// `xyflow__viewport` is a @xyflow/system compatibility class kept on the
+// viewport wrapper.
+export const XYFLOW_VIEWPORT = 'xyflow__viewport'

package/src/compat.ts

@@ -0,0 +1,237 @@
+/**
+ * React Flow compatibility shims for desk migration.
+ *
+ * These functions mirror the React Flow hooks API so that
+ * desk components can be ported with minimal changes.
+ */
+
+import { untrack } from '@barefootjs/client'
+import { addEdge as addEdgeUtil, reconnectEdge as reconnectEdgeUtil, pointToRendererPoint } from '@xyflow/system'
+import { useFlow } from './hooks'
+import type { NodeBase, EdgeBase, Viewport, XYPosition } from './types'
+import type { Connection, NodeChange, EdgeChange } from '@xyflow/system'
+
+/**
+ * useNodesState — mirrors React Flow's useNodesState.
+ * Returns [nodes getter, setNodes, onNodesChange handler].
+ */
+export function useNodesState<NodeType extends NodeBase = NodeBase>(
+  initialNodes: NodeType[],
+): [() => NodeType[], (updater: NodeType[] | ((prev: NodeType[]) => NodeType[])) => void, (changes: NodeChange[]) => void] {
+  const store = useFlow<NodeType>()
+  store.setNodes(initialNodes)
+
+  function onNodesChange(changes: NodeChange[]) {
+    store.setNodes((prev) => applyNodeChanges(prev, changes))
+  }
+
+  return [store.nodes, store.setNodes, onNodesChange]
+}
+
+/**
+ * useEdgesState — mirrors React Flow's useEdgesState.
+ * Returns [edges getter, setEdges, onEdgesChange handler].
+ */
+export function useEdgesState<EdgeType extends EdgeBase = EdgeBase>(
+  initialEdges: EdgeType[],
+): [() => EdgeType[], (updater: EdgeType[] | ((prev: EdgeType[]) => EdgeType[])) => void, (changes: EdgeChange[]) => void] {
+  const store = useFlow<NodeBase, EdgeType>()
+  store.setEdges(initialEdges)
+
+  function onEdgesChange(changes: EdgeChange[]) {
+    store.setEdges((prev) => applyEdgeChanges(prev, changes))
+  }
+
+  return [store.edges, store.setEdges, onEdgesChange]
+}
+
+/**
+ * useReactFlow — mirrors React Flow's useReactFlow hook.
+ * Returns an object with common flow manipulation methods.
+ */
+export function useReactFlow<
+  NodeType extends NodeBase = NodeBase,
+  EdgeType extends EdgeBase = EdgeBase,
+>() {
+  const store = useFlow<NodeType, EdgeType>()
+
+  return {
+    // Getters
+    getNodes: (): NodeType[] => untrack(store.nodes),
+    getEdges: (): EdgeType[] => untrack(store.edges),
+    getNode: (id: string): NodeType | undefined =>
+      untrack(store.nodes).find((n) => n.id === id),
+    getZoom: (): number => untrack(store.viewport).zoom,
+    getViewport: (): Viewport => untrack(store.viewport),
+
+    // Setters
+    setNodes: store.setNodes,
+    setEdges: store.setEdges,
+    setViewport: (vp: Viewport) => {
+      const pz = untrack(store.panZoom)
+      if (pz) pz.setViewport(vp)
+    },
+    setCenter: (x: number, y: number, options?: { zoom?: number; duration?: number }) => {
+      const pz = untrack(store.panZoom)
+      if (!pz) return
+      const w = untrack(store.width)
+      const h = untrack(store.height)
+      const zoom = options?.zoom ?? untrack(store.viewport).zoom
+      pz.setViewport(
+        { x: w / 2 - x * zoom, y: h / 2 - y * zoom, zoom },
+        { duration: options?.duration },
+      )
+    },
+
+    // Actions
+    fitView: store.fitView,
+    zoomIn: (options?: { duration?: number }) => {
+      const pz = untrack(store.panZoom)
+      pz?.scaleBy(1.2, options)
+    },
+    zoomOut: (options?: { duration?: number }) => {
+      const pz = untrack(store.panZoom)
+      pz?.scaleBy(1 / 1.2, options)
+    },
+    zoomTo: (zoom: number, options?: { duration?: number }) => {
+      const pz = untrack(store.panZoom)
+      pz?.scaleTo(zoom, options)
+    },
+
+    // Node mutations
+    updateNode: (id: string, update: Partial<NodeType> | ((node: NodeType) => Partial<NodeType>)) => {
+      store.setNodes((prev) =>
+        prev.map((n) => {
+          if (n.id !== id) return n
+          const patch = typeof update === 'function' ? update(n) : update
+          return { ...n, ...patch }
+        }),
+      )
+    },
+    updateNodeData: (id: string, data: Partial<NodeType['data']> | ((prev: NodeType['data']) => Partial<NodeType['data']>)) => {
+      store.setNodes((prev) =>
+        prev.map((n) => {
+          if (n.id !== id) return n
+          const newData = typeof data === 'function' ? data(n.data) : data
+          return { ...n, data: { ...n.data, ...newData } }
+        }),
+      )
+    },
+
+    // Edge mutations
+    addEdges: (newEdges: EdgeType[]) => {
+      store.setEdges((prev) => [...prev, ...newEdges])
+    },
+
+    // Deletion
+    deleteElements: store.deleteElements,
+
+    // Coordinate conversion
+    screenToFlowPosition: (position: XYPosition): XYPosition => {
+      const domNode = untrack(store.domNode)
+      if (!domNode) return position
+      const rect = domNode.getBoundingClientRect()
+      const transform = store.getTransform()
+      return pointToRendererPoint(
+        { x: position.x - rect.left, y: position.y - rect.top },
+        transform,
+      )
+    },
+  }
+}
+
+/**
+ * useViewport — reactive viewport getter.
+ */
+export { useViewport } from './hooks'
+
+/**
+ * addEdge utility — wraps @xyflow/system's addEdge.
+ */
+export function addEdge<EdgeType extends EdgeBase = EdgeBase>(
+  connection: Connection,
+  edges: EdgeType[],
+): EdgeType[] {
+  return addEdgeUtil(connection, edges) as EdgeType[]
+}
+
+/**
+ * reconnectEdge utility — wraps @xyflow/system's reconnectEdge.
+ */
+export function reconnectEdge<EdgeType extends EdgeBase = EdgeBase>(
+  oldEdge: EdgeType,
+  newConnection: Connection,
+  edges: EdgeType[],
+): EdgeType[] {
+  return reconnectEdgeUtil(oldEdge, newConnection, edges) as EdgeType[]
+}
+
+// --- Internal helpers ---
+
+function applyNodeChanges<NodeType extends NodeBase>(
+  nodes: NodeType[],
+  changes: NodeChange[],
+): NodeType[] {
+  let result = [...nodes]
+
+  for (const change of changes) {
+    switch (change.type) {
+      case 'position':
+        result = result.map((n) =>
+          n.id === change.id
+            ? {
+                ...n,
+                ...(change.position ? { position: change.position } : {}),
+                dragging: change.dragging ?? n.dragging,
+              }
+            : n,
+        )
+        break
+      case 'dimensions':
+        result = result.map((n) =>
+          n.id === change.id && change.dimensions
+            ? { ...n, width: change.dimensions.width, height: change.dimensions.height }
+            : n,
+        )
+        break
+      case 'select':
+        result = result.map((n) =>
+          n.id === change.id ? { ...n, selected: change.selected } : n,
+        )
+        break
+      case 'remove':
+        result = result.filter((n) => n.id !== change.id)
+        break
+      case 'add':
+        result.push(change.item as NodeType)
+        break
+    }
+  }
+
+  return result
+}
+
+function applyEdgeChanges<EdgeType extends EdgeBase>(
+  edges: EdgeType[],
+  changes: EdgeChange[],
+): EdgeType[] {
+  let result = [...edges]
+
+  for (const change of changes) {
+    switch (change.type) {
+      case 'select':
+        result = result.map((e) =>
+          e.id === change.id ? { ...e, selected: change.selected } : e,
+        )
+        break
+      case 'remove':
+        result = result.filter((e) => e.id !== change.id)
+        break
+      case 'add':
+        result.push(change.item as EdgeType)
+        break
+    }
+  }
+
+  return result
+}