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]