diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index fdf62379..e4173074 100644 --- a/packages/core/src/store/actions.ts +++ b/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) => { - if ((!state.initialized && !elements.length) || !elements) return + const setElements: Actions['setElements'] = (elements) => { + 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) - if (typeof opts.nodes !== 'undefined') setNodes(opts.nodes, opts.nodeExtent ?? state.nodeExtent) - if (typeof opts.edges !== 'undefined') setEdges(opts.edges) + const elements = opts.modelValue || opts.nodes || opts.edges ? ([] as Elements) : undefined + + 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) diff --git a/packages/core/src/types/store.ts b/packages/core/src/types/store.ts index ab6e922e..03eda1d1 100644 --- a/packages/core/src/types/store.ts +++ b/packages/core/src/types/store.ts @@ -133,13 +133,13 @@ export interface State extends Omit { 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[]), diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 113e98b8..033bd205 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -69,7 +69,7 @@ export const isGraphNode = (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 => { +export const parseNode = (node: Node, defaults?: Partial): GraphNode => { let defaultValues = defaults if (!isGraphNode(node)) { defaultValues = { diff --git a/packages/core/src/utils/store.ts b/packages/core/src/utils/store.ts index 8debb0be..673ce2fb 100644 --- a/packages/core/src/utils/store.ts +++ b/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 = (val: T): val is NonNullable => typeof unref(val) !== 'undefined' @@ -49,16 +49,11 @@ export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edg return newEdge } -export const createGraphNodes = ( - nodes: Node[], - findNode: Actions['findNode'], - currGraphNodes: GraphNode[], - extent: CoordinateExtent, -) => { +export const createGraphNodes = (nodes: Node[], findNode: Actions['findNode'], currGraphNodes: GraphNode[]) => { const parentNodes: Record = {} const graphNodes = nodes.map((node) => { - const parsed = parseNode(node, extent, { + const parsed = parseNode(node, { ...findNode(node.id), parentNode: node.parentNode, })