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

refactor(types)!: Remove elements prop, change EdgeTypes/NodeTypes prop to string[]

Browse Source 
* no more elements prop - v-model instead!
* Instead of passing an object map to components just pass in an array of strings as nodeTypes/edgeTypes object
* the string name will either be resolved to a dynamic component with :is="type" or a slot with the type-name
* update all examples

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-20 22:10:25 +01:00
parent 0a1c2d4ede
commit 39b21faa5b
34 changed files with 169 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/stateStore.ts
+19 -11
View File
@@ -1,7 +1,7 @@
import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
import diff from 'microdiff'
import { parseElements, defaultNodeTypes, defaultEdgeTypes, deepUnref } from './utils'
import { FlowState, Node, FlowActions, Elements, FlowGetters, Edge, EdgeTypes, NodeTypes } from '~/types'
import { parseElements, defaultNodeTypes, defaultEdgeTypes, deepUnref, NextElements } from './utils'
import { FlowState, Node, FlowActions, Elements, FlowGetters, Edge } from '~/types'
import { clampPosition, getDimensions, getConnectedEdges, getNodesInside, getRectOfNodes, isNode } from '~/utils'
import { getHandleBounds } from '~/components/Nodes/utils'
import parseElementsWorker from '~/workers/parseElements'
@@ -20,11 +20,19 @@ export default function flowStore(
...preloadedState,
}),
getters: {
getEdgeTypes(): EdgeTypes {
return { ...defaultEdgeTypes, ...this.edgeTypes }
getEdgeTypes() {
const edgeTypes: Record<string, any> = {
...defaultEdgeTypes,
}
this.edgeTypes?.forEach((n) => (edgeTypes[n] = n))
return edgeTypes
},
getNodeTypes(): NodeTypes {
return { ...defaultNodeTypes, ...this.nodeTypes }
getNodeTypes() {
const nodeTypes: Record<string, any> = {
...defaultNodeTypes,
}
this.nodeTypes?.forEach((n) => (nodeTypes[n] = n))
return nodeTypes
},
getNodes(): Node[] {
const n = this.onlyRenderVisibleElements
@@ -50,12 +58,12 @@ export default function flowStore(
},
actions: {
async setElements(elements) {
let next: any = {
let next: NextElements = {
nextEdges: [],
nextNodes: [],
}
if (!this.worker || import.meta.env.SSR || typeof window === 'undefined') {
next = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
} else if (this.worker) {
const { workerFn, workerTerminate } = parseElementsWorker()
const res = await workerFn(
@@ -70,7 +78,7 @@ export default function flowStore(
if (res) {
workerTerminate('SUCCESS')
next = res
} else next = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
} else next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
}
if (next) {
this.elements = elements ?? []
@@ -255,8 +263,8 @@ export default function flowStore(
this.nodesConnectable = isInteractive
this.elementsSelectable = isInteractive
},
addElements(elements: Elements) {
const { nextNodes, nextEdges } = parseElements(elements, this.nodes, this.edges, this.nodeExtent)
async addElements(elements: Elements) {
const { nextNodes, nextEdges } = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
this.elements = [...this.elements, ...elements]
this.nodes = [...this.nodes, ...nextNodes]
this.edges = [...this.edges, ...nextEdges]
src/store/utils.ts
+52 -51
View File
@@ -1,25 +1,26 @@
import { ConnectionMode, Edge, EdgeTypes, Elements, FlowState, Node, NodeExtent, NodeTypes, PanOnScrollMode } from '~/types'
import { Component } from 'vue'
import { ConnectionMode, Edge, EdgeProps, Elements, FlowState, Node, NodeExtent, NodeProps, PanOnScrollMode } from '~/types'
import { isEdge, isNode, parseEdge, parseNode } from '~/utils'
import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
import { createHooks } from '~/composables'
type NextElements = {
export type NextElements = {
nextNodes: Node[]
nextEdges: Edge[]
}
export const defaultNodeTypes: NodeTypes = {
input: markRaw(InputNode),
default: markRaw(DefaultNode),
output: markRaw(OutputNode),
export const defaultNodeTypes: Record<string, Component<NodeProps>> = {
input: InputNode,
default: DefaultNode,
output: OutputNode,
}
export const defaultEdgeTypes: EdgeTypes = {
default: markRaw(BezierEdge),
straight: markRaw(StraightEdge),
step: markRaw(StepEdge),
smoothstep: markRaw(SmoothStepEdge),
export const defaultEdgeTypes: Record<string, Component<EdgeProps>> = {
default: BezierEdge,
straight: StraightEdge,
step: StepEdge,
smoothstep: SmoothStepEdge,
}
export const initialState = (): FlowState => ({
@@ -93,52 +94,52 @@ export const initialState = (): FlowState => ({
vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
})
export const parseElements = (elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) => {
const nextElements: NextElements = {
nextNodes: [],
nextEdges: [],
}
for (const element of elements) {
if (isNode(element)) {
const storeNode = nodes[nodes.map((x) => x.id).indexOf(element.id)]
export const parseElements = async (elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) =>
new Promise<NextElements>((resolve) => {
const nextElements: NextElements = {
nextNodes: [],
nextEdges: [],
}
for (const element of elements) {
if (isNode(element)) {
const storeNode = nodes[nodes.map((x) => x.id).indexOf(element.id)]
if (storeNode) {
const updatedNode: Node = {
...storeNode,
...element,
if (storeNode) {
const updatedNode: Node = {
...storeNode,
...element,
}
if (!updatedNode.__rf) updatedNode.__rf = {}
if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
updatedNode.__rf.position = element.position
}
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.__rf.width = undefined
}
nextElements.nextNodes.push(updatedNode)
} else {
nextElements.nextNodes.push(parseNode(element, nodeExtent))
}
if (!updatedNode.__rf) updatedNode.__rf = {}
} else if (isEdge(element)) {
const storeEdge = edges[edges.map((x) => x.id).indexOf(element.id)]
if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
updatedNode.__rf.position = element.position
if (storeEdge) {
nextElements.nextEdges.push({
...storeEdge,
...element,
})
} else {
nextElements.nextEdges.push(parseEdge(element))
}
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.__rf.width = undefined
}
nextElements.nextNodes.push(updatedNode)
} else {
nextElements.nextNodes.push(parseNode(element, nodeExtent))
}
} else if (isEdge(element)) {
const storeEdge = edges[edges.map((x) => x.id).indexOf(element.id)]
if (storeEdge) {
nextElements.nextEdges.push({
...storeEdge,
...element,
})
} else {
nextElements.nextEdges.push(parseEdge(element))
}
}
}
return nextElements
}
resolve(nextElements)
})
const isObject = (val: any) => val !== null && typeof val === 'object'
const isArray = Array.isArray