From 5ffeb928ae5f8c75baa5151c0db5aee0aa091437 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 24 Nov 2021 15:36:28 +0100 Subject: [PATCH] refactor: move parseElements to graph utils Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com> --- src/store/stateStore.ts | 8 ++-- src/utils/graph.ts | 64 ++++++++++++++++++++++++--- src/utils/store.ts | 96 +---------------------------------------- 3 files changed, 65 insertions(+), 103 deletions(-) diff --git a/src/store/stateStore.ts b/src/store/stateStore.ts index 8fe8c6ee..50fbe9bf 100644 --- a/src/store/stateStore.ts +++ b/src/store/stateStore.ts @@ -85,7 +85,8 @@ export default (id: string, preloadedState: FlowState) => { }, actions: { setElements(elements) { - this.elements = parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent) + const { nodes, edges } = parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent) + this.elements = [...nodes, ...edges] }, setUserSelection(mousePos) { this.selectionActive = true @@ -173,8 +174,9 @@ export default (id: string, preloadedState: FlowState) => { this.nodesConnectable = isInteractive this.elementsSelectable = isInteractive }, - async addElements(elements: Elements) { - this.elements = [...this.elements, ...parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent)] + addElements(elements: Elements) { + const { nodes, edges } = parseElements(elements, this.getNodes, this.getEdges, this.nodeExtent) + this.elements = [...this.elements, ...nodes, ...edges] }, }, }) diff --git a/src/utils/graph.ts b/src/utils/graph.ts index 6ce4a40a..d6f29bcd 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -17,6 +17,7 @@ import { GraphEdge, } from '~/types' import { useWindow } from '~/composables' +import { getSourceTargetNodes } from '~/utils/edge' const isHTMLElement = (el: EventTarget): el is HTMLElement => ('nodeName' || 'hasAttribute') in el @@ -104,12 +105,9 @@ export const addEdge = (edgeParams: Edge | Connection, elements: Elements) => { id: getEdgeId(edgeParams), } as Edge } + if (connectionExists(edge, elements)) return elements - if (connectionExists(edge, elements)) { - return elements - } - - return elements.concat(edge) + return elements.push(edge) } export const updateEdge = (oldEdge: Edge, newConnection: Connection, elements: Elements) => { @@ -310,3 +308,59 @@ export const getTransformForBounds = ( return [x, y, clampedZoom] } + +type NextElements = { + nodes: GraphNode[] + edges: GraphEdge[] +} +export const parseElements = (elements: Elements, nodes: GraphNode[], edges: GraphEdge[], nodeExtent: NodeExtent) => { + const next: NextElements = { + nodes: [], + edges: [], + } + for (const element of elements) { + if (isNode(element)) { + const storeNode = nodes[nodes.map((x) => x.id).indexOf(element.id)] + + if (storeNode) { + const updatedNode = { + ...storeNode, + ...element, + } as GraphNode + + if (typeof element.type !== 'undefined' && element.type !== storeNode.type) { + // we reset the elements dimensions here in order to force a re-calculation of the bounds. + // When the type of a node changes it is possible that the number or positions of handles changes too. + updatedNode.__vf.width = 0 + } + + next.nodes.push(updatedNode) + } else { + next.nodes.push(parseNode(element, nodeExtent)) + } + } else if (isEdge(element)) { + const storeEdge = edges[edges.map((x) => x.id).indexOf(element.id)] + + if (storeEdge) { + next.edges.push({ + ...storeEdge, + ...element, + } as GraphEdge) + } else { + next.edges.push(parseEdge(element)) + } + } + } + next.edges.forEach((edge, i, arr) => { + const { sourceNode, targetNode } = getSourceTargetNodes(edge, next.nodes) + 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}`) + + arr[i] = { + ...edge, + sourceNode, + targetNode, + } + }) + return next +} diff --git a/src/utils/store.ts b/src/utils/store.ts index df908400..20a3ca92 100644 --- a/src/utils/store.ts +++ b/src/utils/store.ts @@ -1,15 +1,4 @@ -import { isEdge, isNode, parseEdge, parseNode } from './graph' -import { - ConnectionMode, - Elements, - FlowState, - NodeExtent, - GraphNode, - PanOnScrollMode, - DefaultNodeTypes, - DefaultEdgeTypes, - GraphEdge, -} from '~/types' +import { ConnectionMode, FlowState, PanOnScrollMode, DefaultNodeTypes, DefaultEdgeTypes } from '~/types' import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components' import { createHooks } from '~/composables' @@ -95,86 +84,3 @@ export const initialState = (): FlowState => ({ vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-', }) - -export const parseElements = (elements: Elements, nodes: GraphNode[], edges: GraphEdge[], nodeExtent: NodeExtent) => { - const parsedElements = [] - for (const element of elements) { - if (isNode(element)) { - const storeNode = nodes[nodes.map((x) => x.id).indexOf(element.id)] - - if (storeNode) { - const updatedNode = { - ...storeNode, - ...element, - } as GraphNode - - if (typeof element.type !== 'undefined' && element.type !== storeNode.type) { - // we reset the elements dimensions here in order to force a re-calculation of the bounds. - // When the type of a node changes it is possible that the number or positions of handles changes too. - updatedNode.__vf.width = 0 - } - - parsedElements.push(updatedNode) - } else { - parsedElements.push(parseNode(element, nodeExtent)) - } - } else if (isEdge(element)) { - const storeEdge = edges[edges.map((x) => x.id).indexOf(element.id)] - - if (storeEdge) { - parsedElements.push({ - ...storeEdge, - ...element, - } as GraphEdge) - } else { - parsedElements.push(parseEdge(element)) - } - } - } - return parsedElements -} -const isObject = (val: any) => val !== null && typeof val === 'object' -const isArray = Array.isArray - -const smartUnref = (val: any) => { - if (val !== null && !isRef(val) && typeof val === 'object') { - // eslint-disable-next-line no-use-before-define - return deepUnref(val) - } - - return unref(val) -} - -const unrefArray = (arr: any[]) => { - const unreffed: any[] = [] - - arr.forEach((val) => { - unreffed.push(smartUnref(val)) - }) - - return unreffed -} - -const unrefObject = (obj: Record) => { - const unreffed: Record = {} - - Object.keys(obj).forEach((key) => { - unreffed[key] = smartUnref(obj[key]) - }) - - return unreffed -} - -export const deepUnref = (val: any) => { - const checkedVal = isRef(val) ? unref(val) : val - - if (!isObject(checkedVal)) { - return checkedVal - } - - if (isArray(checkedVal)) { - return unrefArray(checkedVal) - } - - return unrefObject(checkedVal) -}