diff --git a/src/store/stateStore.ts b/src/store/stateStore.ts index 8e5d8d9a..9d90741e 100644 --- a/src/store/stateStore.ts +++ b/src/store/stateStore.ts @@ -1,6 +1,6 @@ import microDiff from 'microdiff' import { setActivePinia, createPinia, defineStore, StoreDefinition, acceptHMRUpdate } from 'pinia' -import { FlowState, FlowActions, Elements, FlowGetters, GraphNode, NextElements, GraphEdge, FlowElements } from '~/types' +import { FlowState, FlowActions, Elements, FlowGetters, GraphNode, NextElements, GraphEdge } from '~/types' import { clampPosition, getConnectedEdges, @@ -13,6 +13,7 @@ import { isGraphNode, getSourceTargetNodes, isEdge, + isGraphEdge, } from '~/utils' import parseElementsWorker from '~/workers/parseElements' @@ -58,26 +59,31 @@ export default (id: string, preloadedState: FlowState) => { ) : nodes - return n.filter((node) => !node.isHidden) + return n.filter((node) => !node.isHidden) ?? [] }, getEdges(): GraphEdge[] { const edges = this.elements.filter(isEdge) - return edges - .filter((edge) => !edge.isHidden) - .map((edge) => { - const { sourceNode, targetNode } = getSourceTargetNodes(edge, this.getNodes) - if (!sourceNode) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`) - if (!targetNode) console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`) + return ( + edges + .filter((edge) => !edge.isHidden) + .map((edge) => { + if (!isGraphEdge(edge)) { + const { sourceNode, targetNode } = getSourceTargetNodes(edge, this.getNodes) + if (!sourceNode) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`) + if (!targetNode) console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`) - return { - ...edge, - sourceTargetNodes: { - sourceNode, - targetNode, - }, - } - }) - .filter(({ sourceTargetNodes: { sourceNode, targetNode } }) => !!(sourceNode && targetNode)) + return { + ...edge, + sourceTargetNodes: { + sourceNode, + targetNode, + }, + } + } + return edge + }) + .filter(({ sourceTargetNodes: { sourceNode, targetNode } }) => !!(sourceNode && targetNode)) ?? [] + ) }, getSelectedNodes(): GraphNode[] { return this.selectedElements?.filter(isGraphNode) ?? [] @@ -90,13 +96,13 @@ export default (id: string, preloadedState: FlowState) => { nextNodes: [], } if (!this.worker || import.meta.env.SSR || typeof window === 'undefined') { - next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent) + next = await parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent) } else if (this.worker) { const { workerFn, workerTerminate } = parseElementsWorker() const res = await workerFn( deepUnref(elements), - deepUnref(this.nodes), - deepUnref(this.edges), + deepUnref(this.getNodes), + deepUnref(this.getEdges), deepUnref(this.nodeExtent), ).catch((err) => { console.error(err) @@ -105,9 +111,9 @@ export default (id: string, preloadedState: FlowState) => { if (res) { workerTerminate('SUCCESS') next = res - } else next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent) + } else next = await parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent) } else { - next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent) + next = await parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent) } this.elements = [...next.nextNodes, ...next.nextEdges] }, @@ -177,12 +183,6 @@ export default (id: string, preloadedState: FlowState) => { }, setNodeExtent(nodeExtent) { this.nodeExtent = nodeExtent - this.nodes = this.nodes.map((node) => { - return { - ...node, - position: node.position ? clampPosition(node.position, nodeExtent) : { x: 0, y: 0 }, - } - }) }, resetSelectedElements() { this.selectedElements = undefined @@ -204,10 +204,8 @@ export default (id: string, preloadedState: FlowState) => { this.elementsSelectable = isInteractive }, async addElements(elements: Elements) { - const { nextNodes, nextEdges } = await parseElements(elements, this.nodes, this.edges, this.nodeExtent) + const { nextNodes, nextEdges } = await parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent) this.elements = [...this.elements, ...nextNodes, ...nextEdges] - this.nodes = [...this.nodes, ...nextNodes] - this.edges = [...this.edges, ...nextEdges] }, }, }) diff --git a/src/types/store.ts b/src/types/store.ts index 4de4d55f..945641be 100644 --- a/src/types/store.ts +++ b/src/types/store.ts @@ -31,8 +31,6 @@ export interface FlowState extends FlowOptions { instance?: FlowInstance elements: FlowElements - nodes: GraphNode[] - edges: Edge[] d3Zoom?: D3Zoom d3Selection?: D3Selection diff --git a/src/utils/store.ts b/src/utils/store.ts index d5d44486..7bd9bcba 100644 --- a/src/utils/store.ts +++ b/src/utils/store.ts @@ -7,9 +7,9 @@ import { NodeExtent, GraphNode, PanOnScrollMode, - GraphEdge, DefaultNodeTypes, DefaultEdgeTypes, + Edge, } from '~/types' import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components' import { createHooks } from '~/composables' @@ -34,8 +34,6 @@ export const initialState = (): FlowState => ({ }, transform: [0, 0, 1], elements: [], - nodes: [], - edges: [], selectedElements: undefined, selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 }, @@ -99,7 +97,7 @@ export const initialState = (): FlowState => ({ vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-', }) -export const parseElements = async (elements: Elements, nodes: GraphNode[], edges: GraphEdge[], nodeExtent: NodeExtent) => +export const parseElements = async (elements: Elements, nodes: GraphNode[], edges: Edge[], nodeExtent: NodeExtent) => new Promise((resolve) => { const { nextEdges, nextNodes }: NextElements = { nextNodes: [],