refactor(core): replace arr reduce methods (#1467)

* refactor(core): replace arr reduce methods

* chore(core): cleanup

packages/core/src/utils/graph.ts

@@ -69,22 +69,18 @@ export function getHostForElement(element: HTMLElement): Document {
   return window.document
 }
 
-// todo: refactor generic to use MaybeElement
 export function isEdge<Data = ElementData>(element: MaybeElement): element is Edge<Data> {
   return element && typeof element === 'object' && 'id' in element && 'source' in element && 'target' in element
 }
 
-// todo: refactor generic to use MaybeElement
 export function isGraphEdge<Data = ElementData>(element: MaybeElement): element is GraphEdge<Data> {
   return isEdge(element) && 'sourceNode' in element && 'targetNode' in element
 }
 
-// todo: refactor generic to use MaybeElement
 export function isNode<Data = ElementData>(element: MaybeElement): element is Node<Data> {
   return element && typeof element === 'object' && 'id' in element && 'position' in element && !isEdge(element)
 }
 
-// todo: refactor generic to use MaybeElement
 export function isGraphNode<Data = ElementData>(element: MaybeElement): element is GraphNode<Data> {
   return isNode(element) && 'computedPosition' in element
 }
@@ -105,15 +101,15 @@ export function parseNode(node: Node, existingNode?: GraphNode, parentNode?: str
       width: 0,
       height: 0,
     }),
+    computedPosition: markRaw({
+      z: 0,
+      ...node.position,
+    }),
     // todo: shouldn't be defined initially, as we want to use handleBounds to check if a node was actually initialized or not
     handleBounds: {
       source: [],
       target: [],
     },
-    computedPosition: markRaw({
-      z: 0,
-      ...node.position,
-    }),
     draggable: undefined,
     selectable: undefined,
     connectable: undefined,
@@ -356,17 +352,23 @@ export function getBoundsofRects(rect1: Rect, rect2: Rect) {
 }
 
 export function getRectOfNodes(nodes: GraphNode[]) {
-  const box = nodes.reduce(
-    (currBox, { computedPosition = { x: 0, y: 0 }, dimensions = { width: 0, height: 0 } } = {} as any) =>
-      getBoundsOfBoxes(
-        currBox,
-        rectToBox({
-          ...computedPosition,
-          ...dimensions,
-        } as Rect),
-      ),
-    { x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY, x2: Number.NEGATIVE_INFINITY, y2: Number.NEGATIVE_INFINITY },
-  )
+  let box: Box = {
+    x: Number.POSITIVE_INFINITY,
+    y: Number.POSITIVE_INFINITY,
+    x2: Number.NEGATIVE_INFINITY,
+    y2: Number.NEGATIVE_INFINITY,
+  }
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+    box = getBoundsOfBoxes(
+      box,
+      rectToBox({
+        ...node.computedPosition,
+        ...node.dimensions,
+      } as Rect),
+    )
+  }
 
   return boxToRect(box)
 }

packages/core/src/utils/handle.ts

@@ -222,8 +222,12 @@ interface GetHandleLookupParams {
 }
 
 export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHandleLookupParams) {
-  return nodes.reduce<ConnectionHandle[]>((res, node) => {
+  const handleLookup: ConnectionHandle[] = []
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+
     const { handleBounds } = node
+
     let sourceHandles: ConnectionHandle[] = []
     let targetHandles: ConnectionHandle[] = []
 
@@ -232,9 +236,10 @@ export function getHandleLookup({ nodes, nodeId, handleId, handleType }: GetHand
       targetHandles = getHandles(node, handleBounds, 'target', `${nodeId}-${handleId}-${handleType}`)
     }
 
-    res.push(...sourceHandles, ...targetHandles)
-    return res
-  }, [])
+    handleLookup.push(...sourceHandles, ...targetHandles)
+  }
+
+  return handleLookup
 }
 
 export function getHandleType(edgeUpdaterType: HandleType | undefined, handleDomNode: Element | null): HandleType | null {

packages/core/src/utils/store.ts

@@ -89,22 +89,18 @@ export function updateEdgeAction(
   return newEdge
 }
 
-export function createGraphNodes(
-  nodes: Node[],
-  currGraphNodes: GraphNode[],
-  findNode: Actions['findNode'],
-  triggerError: State['hooks']['error']['trigger'],
-) {
+export function createGraphNodes(nodes: Node[], findNode: Actions['findNode'], triggerError: State['hooks']['error']['trigger']) {
   const parentNodes: Record<string, true> = {}
 
-  const nextNodes = nodes.reduce((nextNodes, node, currentIndex) => {
-    // make sure we don't try to add invalid nodes
+  const nextNodes: GraphNode[] = []
+  for (let i = 0; i < nodes.length; ++i) {
+    const node = nodes[i]
+
     if (!isNode(node)) {
       triggerError(
-        new VueFlowError(ErrorCode.NODE_INVALID, (node as undefined | Record<any, any>)?.id) ||
-          `[ID UNKNOWN|INDEX ${currentIndex}]`,
+        new VueFlowError(ErrorCode.NODE_INVALID, (node as undefined | Record<any, any>)?.id) || `[ID UNKNOWN|INDEX ${i}]`,
       )
-      return nextNodes
+      continue
     }
 
     const parsed = parseNode(node, findNode(node.id), node.parentNode)
@@ -113,13 +109,11 @@ export function createGraphNodes(
       parentNodes[node.parentNode] = true
     }
 
-    return nextNodes.concat(parsed)
-  }, [] as GraphNode[])
-
-  const allNodes = [...nextNodes, ...currGraphNodes]
+    nextNodes[i] = parsed
+  }
 
   for (const node of nextNodes) {
-    const parentNode = allNodes.find((n) => n.id === node.parentNode)
+    const parentNode = findNode(node.parentNode) || nextNodes.find((n) => n.id === node.parentNode)
 
     if (node.parentNode && !parentNode) {
       triggerError(new VueFlowError(ErrorCode.NODE_MISSING_PARENT, node.id, node.parentNode))