refactor(core): remove extent option for setNodes & addNodes

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

packages/core/src/store/actions.ts

@@ -1,7 +1,6 @@
 import type {
   Actions,
   ComputedGetters,
-  CoordinateExtent,
   EdgeChange,
   EdgeRemoveChange,
   EdgeSelectionChange,
@@ -281,11 +280,13 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
     state.elementsSelectable = isInteractive
   }
 
-  const setNodes: Actions['setNodes'] = (nodes, extent?: CoordinateExtent) => {
+  const setNodes: Actions['setNodes'] = (nodes) => {
     if (!state.initialized && !nodes.length) return
     if (!state.nodes) state.nodes = []
+
     const curr = nodes instanceof Function ? nodes(state.nodes) : nodes
-    state.nodes = createGraphNodes(curr, findNode, state.nodes, extent ?? state.nodeExtent)
+
+    state.nodes = createGraphNodes(curr, findNode, state.nodes)
   }
 
   const setEdges: Actions['setEdges'] = (edges) => {
@@ -314,18 +315,18 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
     }, [])
   }
 
-  const setElements: Actions['setElements'] = (elements, extent) => {
+  const setElements: Actions['setElements'] = (elements) => {
-    if ((!state.initialized && !elements.length) || !elements) return
+    if (!state.initialized && !elements.length) return
     const curr = elements instanceof Function ? elements([...state.nodes, ...state.edges]) : elements
 
-    setNodes(curr.filter(isNode), extent)
+    setNodes(curr.filter(isNode))
     setEdges(curr.filter(isEdge))
   }
 
-  const addNodes: Actions['addNodes'] = (nodes, extent) => {
+  const addNodes: Actions['addNodes'] = (nodes) => {
     const curr = nodes instanceof Function ? nodes(state.nodes) : nodes
 
-    const graphNodes = createGraphNodes(curr, findNode, state.nodes, extent ?? state.nodeExtent)
+    const graphNodes = createGraphNodes(curr, findNode, state.nodes)
     const changes = graphNodes.map(createAdditionChange)
 
     if (changes.length) state.hooks.nodesChange.trigger(changes)
@@ -507,9 +508,23 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
       'hooks',
     ]
 
-    if (typeof opts.modelValue !== 'undefined') setElements(opts.modelValue, opts.nodeExtent ?? state.nodeExtent)
+    const elements = opts.modelValue || opts.nodes || opts.edges ? ([] as Elements) : undefined
-    if (typeof opts.nodes !== 'undefined') setNodes(opts.nodes, opts.nodeExtent ?? state.nodeExtent)
+
-    if (typeof opts.edges !== 'undefined') setEdges(opts.edges)
+    if (elements) {
+      if (opts.modelValue) {
+        elements.push(...opts.modelValue)
+      }
+
+      if (opts.nodes) {
+        elements.push(...opts.nodes)
+      }
+
+      if (opts.edges) {
+        elements.push(...opts.edges)
+      }
+
+      setElements(elements)
+    }
 
     const setSkippedOptions = () => {
       if (typeof opts.maxZoom !== 'undefined') setMaxZoom(opts.maxZoom)

packages/core/src/types/store.ts

@@ -133,13 +133,13 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   readonly vueFlowVersion: string
 }
 
-export type SetElements = (elements: Elements | ((elements: FlowElements) => Elements), extent?: CoordinateExtent) => void
+export type SetElements = (elements: Elements | ((elements: FlowElements) => Elements)) => void
 
-export type SetNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void
+export type SetNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[])) => void
 
 export type SetEdges = (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void
 
-export type AddNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void
+export type AddNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[])) => void
 
 export type RemoveNodes = (
   nodes: (Node[] | string[]) | ((nodes: GraphNode[]) => Node[] | string[]),

packages/core/src/utils/graph.ts

@@ -69,7 +69,7 @@ export const isGraphNode = <Data = ElementData>(element: MaybeElement): element
 
 export const isRect = (obj: any): obj is Rect => !!obj.width && !!obj.height && !!obj.x && !!obj.y
 
-export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: Partial<GraphNode>): GraphNode => {
+export const parseNode = (node: Node, defaults?: Partial<GraphNode>): GraphNode => {
   let defaultValues = defaults
   if (!isGraphNode(node)) {
     defaultValues = {

packages/core/src/utils/store.ts

@@ -1,4 +1,4 @@
-import type { Actions, Connection, CoordinateExtent, Edge, GraphEdge, GraphNode, Node } from '~/types'
+import type { Actions, Connection, Edge, GraphEdge, GraphNode, Node } from '~/types'
 
 export const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'
 
@@ -49,16 +49,11 @@ export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edg
   return newEdge
 }
 
-export const createGraphNodes = (
+export const createGraphNodes = (nodes: Node[], findNode: Actions['findNode'], currGraphNodes: GraphNode[]) => {
-  nodes: Node[],
-  findNode: Actions['findNode'],
-  currGraphNodes: GraphNode[],
-  extent: CoordinateExtent,
-) => {
   const parentNodes: Record<string, true> = {}
 
   const graphNodes = nodes.map((node) => {
-    const parsed = parseNode(node, extent, {
+    const parsed = parseNode(node, {
       ...findNode(node.id),
       parentNode: node.parentNode,
     })