From 78d8190f585fa35215b6e7451049fa73f91da1c9 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Sun, 22 May 2022 20:00:07 +0200 Subject: [PATCH] chore(vue-flow,store): move store utils to separate file --- packages/vue-flow/src/store/actions.ts | 147 +++++-------------------- packages/vue-flow/src/utils/index.ts | 1 + packages/vue-flow/src/utils/store.ts | 91 +++++++++++++++ 3 files changed, 122 insertions(+), 117 deletions(-) create mode 100644 packages/vue-flow/src/utils/store.ts diff --git a/packages/vue-flow/src/store/actions.ts b/packages/vue-flow/src/store/actions.ts index 33bcf173..2fcdbfa2 100644 --- a/packages/vue-flow/src/store/actions.ts +++ b/packages/vue-flow/src/store/actions.ts @@ -2,122 +2,36 @@ import useState from './state' import type { Actions, ComputedGetters, - Connection, CoordinateExtent, - Edge, EdgeChange, - Getters, GraphEdge, GraphNode, - Node, NodeChange, NodeDimensionChange, NodePositionChange, State, } from '~/types' import { + addEdgeToStore, applyChanges, + createGraphNodes, connectionExists, createAdditionChange, createPositionChange, createSelectionChange, getDimensions, - getEdgeId, getHandleBounds, getSelectionChanges, + isDef, isEdge, isGraphEdge, isGraphNode, isNode, isParentSelected, parseEdge, - parseNode, + updateEdgeAction, } from '~/utils' -const isDef = (val: T): val is NonNullable => typeof val !== 'undefined' - -const addEdge = (edgeParams: Edge | Connection, edges: Edge[]) => { - if (!edgeParams.source || !edgeParams.target) { - console.warn("[vueflow]: Can't create edge. An edge needs a source and a target.") - return false - } - - let edge - if (isEdge(edgeParams)) { - edge = { ...edgeParams } - } else { - edge = { - ...edgeParams, - id: getEdgeId(edgeParams), - } as Edge - } - edge = parseEdge(edge) - if (connectionExists(edge, edges)) return false - return edge -} - -const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge[], add: Actions['addEdges']) => { - if (!newConnection.source || !newConnection.target) { - console.warn("[vueflow]: Can't create new edge. An edge needs a source and a target.") - return false - } - - const foundEdge = edges.find((e) => isGraphEdge(e) && e.id === edge.id) - - if (!foundEdge) { - console.warn(`[vueflow]: The old edge with id=${edge.id} does not exist.`) - return false - } - - edges.splice(edges.indexOf(edge), 1) - const newEdge = { - ...edge, - id: getEdgeId(newConnection), - source: newConnection.source, - target: newConnection.target, - sourceHandle: newConnection.sourceHandle, - targetHandle: newConnection.targetHandle, - } - add([newEdge]) - - return newEdge -} - -const createGraphNodes = (nodes: Node[], getNode: Getters['getNode'], currGraphNodes: GraphNode[], extent: CoordinateExtent) => { - const parentNodes: Record = {} - - const graphNodes = nodes.map((node) => { - const parsed = shallowReactive( - parseNode(node, extent, { - ...getNode(node.id), - parentNode: node.parentNode, - }), - ) - if (node.parentNode) { - parentNodes[node.parentNode] = true - } - - return parsed - }) - - graphNodes.forEach((node) => { - const nextNodes = [...graphNodes, ...currGraphNodes] - if (node.parentNode && !nextNodes.find((n) => n.id === node.parentNode)) { - console.warn(`[vueflow]: Parent node ${node.parentNode} not found`) - } - - if (node.parentNode || parentNodes[node.id]) { - if (parentNodes[node.id]) { - node.isParent = true - } - const parent = node.parentNode ? getNode(node.parentNode) : undefined - if (parent) parent.isParent = true - } - }) - - return graphNodes -} - export default (state: State, getters: ComputedGetters): Actions => { const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 } }) => { const nodePosPromise = new Promise((resolve) => { @@ -173,49 +87,45 @@ export default (state: State, getters: ComputedGetters): Actions => { if (changes.length) state.hooks.nodesChange.trigger(changes) } - const addSelectedNodes: Actions['addSelectedNodes'] = (nodes) => { - const selectedNodesIds = nodes.map((n) => n.id) + const nodeSelectionHandler = (nodes: GraphNode[], selected: boolean) => { + const nodeIds = nodes.map((n) => n.id) let changedNodes: NodeChange[] - if (state.multiSelectionActive) changedNodes = selectedNodesIds.map((nodeId) => createSelectionChange(nodeId, true)) - else changedNodes = getSelectionChanges(state.nodes, selectedNodesIds, getters.getNode.value) + if (state.multiSelectionActive) changedNodes = nodeIds.map((nodeId) => createSelectionChange(nodeId, selected)) + else changedNodes = getSelectionChanges(state.nodes, nodeIds, getters.getNode.value) if (changedNodes.length) state.hooks.nodesChange.trigger(changedNodes) } - const addSelectedEdges: Actions['addSelectedEdges'] = (edges) => { - const selectedEdgesIds = edges.map((e) => e.id) + const edgeSelectionHandler = (edges: GraphEdge[], selected: boolean) => { + const edgeIds = edges.map((e) => e.id) let changedEdges: EdgeChange[] - if (state.multiSelectionActive) changedEdges = selectedEdgesIds.map((edgeId) => createSelectionChange(edgeId, true)) - else changedEdges = getSelectionChanges(state.edges, selectedEdgesIds, getters.getNode.value) + if (state.multiSelectionActive) changedEdges = edgeIds.map((edgeId) => createSelectionChange(edgeId, selected)) + else changedEdges = getSelectionChanges(state.edges, edgeIds, getters.getNode.value) if (changedEdges.length) state.hooks.edgesChange.trigger(changedEdges) } + const addSelectedNodes: Actions['addSelectedNodes'] = (nodes) => { + nodeSelectionHandler(nodes, true) + } + + const addSelectedEdges: Actions['addSelectedEdges'] = (edges) => { + edgeSelectionHandler(edges, true) + } + const addSelectedElements: Actions['addSelectedElements'] = (elements) => { addSelectedNodes(elements.filter(isGraphNode)) addSelectedEdges(elements.filter(isGraphEdge)) } const removeSelectedNodes: Actions['removeSelectedNodes'] = (nodes) => { - const unselectedNodesIds = nodes.map((n) => n.id) - - let changedNodes: NodeChange[] - if (state.multiSelectionActive) changedNodes = unselectedNodesIds.map((nodeId) => createSelectionChange(nodeId, false)) - else changedNodes = getSelectionChanges(state.nodes, unselectedNodesIds, getters.getNode.value) - - if (changedNodes.length) state.hooks.nodesChange.trigger(changedNodes) + nodeSelectionHandler(nodes, false) } const removeSelectedEdges: Actions['removeSelectedEdges'] = (edges) => { - const unselectedEdgesIds = edges.map((e) => e.id) - - let changedEdges: EdgeChange[] - if (state.multiSelectionActive) changedEdges = unselectedEdgesIds.map((edgeId) => createSelectionChange(edgeId, false)) - else changedEdges = getSelectionChanges(state.edges, unselectedEdgesIds, getters.getNode.value) - - if (changedEdges.length) state.hooks.edgesChange.trigger(changedEdges) + edgeSelectionHandler(edges, false) } const removeSelectedElements: Actions['removeSelectedElements'] = (elements) => { @@ -303,7 +213,13 @@ export default (state: State, getters: ComputedGetters): Actions => { const curr = params instanceof Function ? params(state.edges) : params const changes = curr.reduce((acc, param) => { - const edge = addEdge(param, state.edges) + const edge = addEdgeToStore( + { + ...param, + ...state.defaultEdgeOptions, + }, + state.edges, + ) if (edge) { const sourceNode = getters.getNode.value(edge.source)! const targetNode = getters.getNode.value(edge.target)! @@ -315,10 +231,7 @@ export default (state: State, getters: ComputedGetters): Actions => { if (missingTarget || missingSource) return acc acc.push( - createAdditionChange(shallowReactive({ - ...state.defaultEdgeOptions, - ...edge, - })), + createAdditionChange(shallowReactive(edge)), ) } diff --git a/packages/vue-flow/src/utils/index.ts b/packages/vue-flow/src/utils/index.ts index 00810d61..220b5e19 100644 --- a/packages/vue-flow/src/utils/index.ts +++ b/packages/vue-flow/src/utils/index.ts @@ -2,3 +2,4 @@ export * from './edge' export * from './graph' export * from './node' export * from './changes' +export * from './store' diff --git a/packages/vue-flow/src/utils/store.ts b/packages/vue-flow/src/utils/store.ts new file mode 100644 index 00000000..96e3ac12 --- /dev/null +++ b/packages/vue-flow/src/utils/store.ts @@ -0,0 +1,91 @@ +import type { Actions, Connection, CoordinateExtent, Edge, Getters, GraphEdge, GraphNode, Node } from '~/types' +import { connectionExists, getEdgeId, isEdge, isGraphEdge, parseEdge, parseNode } from '~/utils/graph' + +export const isDef = (val: T): val is NonNullable => typeof val !== 'undefined' + +export const addEdgeToStore = (edgeParams: Edge | Connection, edges: Edge[]) => { + if (!edgeParams.source || !edgeParams.target) { + console.warn("[vueflow]: Can't create edge. An edge needs a source and a target.") + return false + } + + let edge + if (isEdge(edgeParams)) { + edge = { ...edgeParams } + } else { + edge = { + ...edgeParams, + id: getEdgeId(edgeParams), + } as Edge + } + edge = parseEdge(edge) + if (connectionExists(edge, edges)) return false + return edge +} + +export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge[], add: Actions['addEdges']) => { + if (!newConnection.source || !newConnection.target) { + console.warn("[vueflow]: Can't create new edge. An edge needs a source and a target.") + return false + } + + const foundEdge = edges.find((e) => isGraphEdge(e) && e.id === edge.id) + + if (!foundEdge) { + console.warn(`[vueflow]: The old edge with id=${edge.id} does not exist.`) + return false + } + + edges.splice(edges.indexOf(edge), 1) + const newEdge = { + ...edge, + id: getEdgeId(newConnection), + source: newConnection.source, + target: newConnection.target, + sourceHandle: newConnection.sourceHandle, + targetHandle: newConnection.targetHandle, + } + add([newEdge]) + + return newEdge +} + +export const createGraphNodes = ( + nodes: Node[], + getNode: Getters['getNode'], + currGraphNodes: GraphNode[], + extent: CoordinateExtent, +) => { + const parentNodes: Record = {} + + const graphNodes = nodes.map((node) => { + const parsed = shallowReactive( + parseNode(node, extent, { + ...getNode(node.id), + parentNode: node.parentNode, + }), + ) + if (node.parentNode) { + parentNodes[node.parentNode] = true + } + + return parsed + }) + + graphNodes.forEach((node) => { + const nextNodes = [...graphNodes, ...currGraphNodes] + if (node.parentNode && !nextNodes.find((n) => n.id === node.parentNode)) { + console.warn(`[vueflow]: Parent node ${node.parentNode} not found`) + } + + if (node.parentNode || parentNodes[node.id]) { + if (parentNodes[node.id]) { + node.isParent = true + } + const parent = node.parentNode ? getNode(node.parentNode) : undefined + if (parent) parent.isParent = true + } + }) + + return graphNodes +}