feat(utils): make addEdge and removeElement mutate the array passed in

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/Basic/Basic.vue

@@ -7,13 +7,10 @@ import {
   Connection,
   Edge,
   Elements,
-  FlowElement,
   FlowInstance,
   addEdge,
   isNode,
   removeElements,
-  Node,
-  useVueFlow,
 } from '~/index'
 
 const onNodeDragStop = (e) => console.log('drag stop', e)
@@ -27,8 +24,8 @@ const elements = ref<Elements>([
   { id: 'e1-3', source: '1', target: '3' },
 ])
 const vfInstance = ref<FlowInstance>()
-const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => removeElements(elementsToRemove, elements.value)
+const onConnect = (params: Edge | Connection) => addEdge(params, elements.value)
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView({ padding: 0.1 })
   vfInstance.value = flowInstance

src/index.ts

@@ -15,7 +15,6 @@ export {
   updateEdge,
   getTransformForBounds,
   getRectOfNodes,
-  isInputDOMNode,
   graphPosToZoomedPos,
 } from './utils/graph'
 export { defaultEdgeTypes, defaultNodeTypes } from './utils/store'

src/utils/graph.ts

@@ -69,11 +69,14 @@ export const getIncomers = (node: GraphNode, elements: Elements) => getConnected
 
 export const removeElements = (elementsToRemove: Elements, elements: Elements) => {
   const nodeIdsToRemove = elementsToRemove.map((n) => n.id)
-
-  return elements.filter((element) => {
+  const shouldRemove = (element: Node | Edge) => {
     const { target, source } = isEdge(element) ? element : { target: '', source: '' }
-    return !(nodeIdsToRemove.includes(element.id) || nodeIdsToRemove.includes(target) || nodeIdsToRemove.includes(source))
+    return nodeIdsToRemove.includes(element.id) || nodeIdsToRemove.includes(target) || nodeIdsToRemove.includes(source)
+  }
+  elements.forEach((element, i) => {
+    if (shouldRemove(element)) elements.splice(i, 1)
   })
+  return elements.filter((element) => !shouldRemove(element))
 }
 
 const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection): ElementId =>
@@ -106,8 +109,8 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements) => {
     } as Edge
   }
   if (connectionExists(edge, elements)) return elements
-
-  return elements.push(edge)
+  elements.push(edge)
+  return [...elements, edge]
 }
 
 export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: Elements) => {