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

refactor(store)!: use stored node data when re-parsing elements

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-20 19:29:52 +01:00
parent 9e06d6e9b5
commit 6bdea72b20
2 changed files with 61 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/actions.ts
+17 -19
View File
@@ -96,35 +96,32 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
state.elementsSelectable = isInteractive state.elementsSelectable = isInteractive
} }
function getParent(root: Node[], id: string): GraphNode | undefined { const getParent = (root: Node[], id: string): GraphNode | undefined => {
let node let node
root.some((n) => { root.some((n) => {
if (n.id === id) { if (n.id === id) return (node = n)
return (node = n) if (n.children) return (node = getParent(n.children, id))
}
if (n.children) {
return (node = getParent(n.children, id))
}
return false return false
}) })
return node return node
} }
const setNodes: FlowActions['setNodes'] = (nodes, extent: CoordinateExtent) => { const parseChildren = (n: Node, p: GraphNode | undefined, arr: GraphNode[], extent: CoordinateExtent) => {
const parseChildren = (n: Node, p?: GraphNode, arr: GraphNode[] = []) => { const parent = typeof p === 'undefined' || typeof p !== 'object' ? getParent(arr, n.id) : p
const parent = typeof p === 'undefined' || typeof p !== 'object' ? getParent(arr, n.id) : p const parsed = parseNode(n, extent, {
const parsed = parseNode(n, extent, { ...getters.getNode.value(n.id),
parentNode: parent, parentNode: parent,
}) })
arr.push(parsed) arr.push(parsed)
if (n.children && n.children.length) { if (n.children && n.children.length) {
n.children.forEach((c) => parseChildren(c, parsed, arr)) n.children.forEach((c) => parseChildren(c, parsed, arr, extent))
}
} }
}
const setNodes: FlowActions['setNodes'] = (nodes, extent: CoordinateExtent) => {
nodes = nodes.flatMap((node) => { nodes = nodes.flatMap((node) => {
const children: GraphNode[] = [] const children: GraphNode[] = []
parseChildren(node, undefined, children) parseChildren(node, undefined, children, extent)
return children return children
}) })
state.nodes = <GraphNode[]>nodes state.nodes = <GraphNode[]>nodes
@@ -139,6 +136,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`) console.warn(`couldn't create edge for target id: ${edge.target}; edge id: ${edge.id}`)
return parseEdge(edge, { return parseEdge(edge, {
...getters.getEdge.value(edge.id),
sourceNode, sourceNode,
targetNode, targetNode,
}) })
src/utils/graph.ts
+44 -30
View File
@@ -163,40 +163,54 @@ export const pointToRendererPoint = (
export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) => export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) =>
pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid) pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid)
export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: Partial<GraphNode>): GraphNode => ({ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: Partial<GraphNode>): GraphNode => {
...defaults, defaults = !isGraphNode(node)
...node, ? {
id: node.id.toString(), type: node.type ?? 'default',
type: node.type ?? 'default', dimensions: {
dimensions: { width: 0,
width: 0, height: 0,
height: 0, },
}, handleBounds: {
handleBounds: { source: [],
source: [], target: [],
target: [], },
}, computedPosition: {
computedPosition: { z: typeof node.style?.zIndex === 'string' ? parseInt(node.style?.zIndex) : node.style?.zIndex ?? 0,
z: typeof node.style?.zIndex === 'string' ? parseInt(node.style?.zIndex) : node.style?.zIndex ?? 0, ...clampPosition(node.position, nodeExtent),
...clampPosition(node.position, nodeExtent), },
}, isParent: !!(node.children && node.children.length),
isParent: !!(node.children && node.children.length), dragging: false,
dragging: false, ...defaults,
}) }
: defaults
return {
...node,
...(defaults as GraphNode),
id: node.id.toString(),
}
}
export const parseEdge = ( export const parseEdge = (
edge: Edge, edge: Edge,
defaults: Partial<GraphEdge> & { sourceNode: GraphNode; targetNode: GraphNode }, defaults: Partial<GraphEdge> & { sourceNode: GraphNode; targetNode: GraphNode },
): GraphEdge => ({ ): GraphEdge => {
...defaults, defaults = !isGraphEdge(edge)
...edge, ? {
source: edge.source.toString(), sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : undefined,
target: edge.target.toString(), targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined,
sourceHandle: edge.sourceHandle ? edge.sourceHandle.toString() : undefined, type: edge.type ?? 'default',
targetHandle: edge.targetHandle ? edge.targetHandle.toString() : undefined, source: edge.source.toString(),
id: edge.id.toString(), target: edge.target.toString(),
type: edge.type ?? 'default', ...defaults,
}) }
: defaults
return {
...edge,
...defaults,
id: edge.id.toString(),
}
}
const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({ const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({
x: Math.min(box1.x, box2.x), x: Math.min(box1.x, box2.x),