alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move parseElements to graph utils

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-25 15:21:36 +01:00
parent cf2ded4fc8
commit 5ffeb928ae
3 changed files with 65 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/stateStore.ts
+5 -3
View File
@@ -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]
},
},
})
src/utils/graph.ts
+59 -5
View File
@@ -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
}
src/utils/store.ts
+1 -95
View File
@@ -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<string, any>) => {
const unreffed: Record<string, any> = {}
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)
}