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

update!: graphnode and node typing

Browse Source 
* graphnode is a node containing internal Vue Flow data
* move util files to util directory
* move flow actions type into store file
* rename panel type file to zoom
* rename types file to flow
* Rename Node to NodeWrapper
* Rename Edge to EdgeWrapper

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-21 16:25:27 +01:00
parent ba24f3ca62
commit 062aee45b2
36 changed files with 280 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/index.ts
-1
View File
@@ -1,2 +1 @@
export { default as useStateStore } from './stateStore'
export { defaultEdgeTypes, defaultNodeTypes, initialState } from './utils'
src/store/stateStore.ts
+22 -19
View File
@@ -1,9 +1,20 @@
import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
import microDiff from 'microdiff'
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 { FlowState, Node, FlowActions, Elements, FlowGetters, Edge, GraphNode, NextElements } from '~/types'
import {
clampPosition,
getDimensions,
getConnectedEdges,
getNodesInside,
getRectOfNodes,
isNode,
parseElements,
defaultNodeTypes,
defaultEdgeTypes,
deepUnref,
getHandleBounds,
isGraphNode,
} from '~/utils'
import parseElementsWorker from '~/workers/parseElements'
const pinia = createPinia()
@@ -81,7 +92,7 @@ export default function flowStore(
} else next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
}
if (next) {
this.elements = elements ?? []
this.elements = [...next.nextNodes, ...next.nextEdges]
this.nodes = next?.nextNodes ?? []
this.edges = next?.nextEdges ?? []
}
@@ -102,7 +113,6 @@ export default function flowStore(
this.nodes.splice(i, 1, {
...node,
__vf: {
position: { x: 0, y: 0 },
...node.__vf,
...dimensions,
handleBounds,
@@ -125,21 +135,16 @@ export default function flowStore(
this.nodes.splice(i, 1, {
...node,
__vf: {
width: 0,
height: 0,
...node.__vf,
position: pos,
},
})
},
updateNodePosDiff({ id, diff, isDragging }) {
const update = (node: Node, i: number) => {
const updatedNode: Node = {
const update = (node: GraphNode, i: number) => {
const updatedNode: GraphNode = {
...node,
__vf: {
width: 0,
height: 0,
position: { x: 0, y: 0 },
...node.__vf,
isDragging,
},
@@ -161,8 +166,8 @@ export default function flowStore(
if (!id) {
const selectedNodes = this.nodes.filter((x) => this.selectedElements?.find((sNode) => sNode?.id === x.id))
selectedNodes.forEach((node) => {
const i = this.nodes.map((x) => x.id).indexOf((node as Node).id)
update(node as Node, i)
const i = this.nodes.map((x) => x.id).indexOf(node.id)
update(node, i)
})
} else {
const i = this.nodes.map((x) => x.id).indexOf(id)
@@ -202,7 +207,7 @@ export default function flowStore(
this.selectedElements = nextSelectedElements
},
unsetUserSelection() {
const selectedNodes = this.selectedElements?.filter((node) => node && isNode(node) && node.__vf) as Node[]
const selectedNodes = this.selectedElements?.filter((node) => node && isGraphNode(node) && node.__vf) as GraphNode[]
this.selectionActive = false
this.userSelectionRect.draw = false
@@ -243,8 +248,6 @@ export default function flowStore(
return {
...node,
__vf: {
height: 0,
width: 0,
...node.__vf,
position: node.__vf?.position ? clampPosition(node.__vf.position, nodeExtent) : { x: 0, y: 0 },
},
@@ -272,7 +275,7 @@ export default function flowStore(
},
async addElements(elements: Elements) {
const { nextNodes, nextEdges } = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
this.elements = [...this.elements, ...elements]
this.elements = [...this.elements, ...nextNodes, ...nextEdges]
this.nodes = [...this.nodes, ...nextNodes]
this.edges = [...this.edges, ...nextEdges]
},
src/store/utils.ts
-188
View File
@@ -1,188 +0,0 @@
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'
export type NextElements = {
nextNodes: Node[]
nextEdges: Edge[]
}
export const defaultNodeTypes: Record<string, Component<NodeProps>> = {
input: InputNode,
default: DefaultNode,
output: OutputNode,
}
export const defaultEdgeTypes: Record<string, Component<EdgeProps>> = {
default: BezierEdge,
straight: StraightEdge,
step: StepEdge,
smoothstep: SmoothStepEdge,
}
export const initialState = (): FlowState => ({
dimensions: {
width: 0,
height: 0,
},
transform: [0, 0, 1],
elements: [],
nodes: [],
edges: [],
selectedElements: undefined,
selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
d3Zoom: undefined,
d3Selection: undefined,
d3ZoomHandler: undefined,
minZoom: 0.5,
maxZoom: 2,
translateExtent: [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
nodeExtent: [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
zoomOnScroll: true,
zoomOnPinch: true,
zoomOnDoubleClick: true,
panOnScroll: false,
panOnScrollSpeed: 0.5,
panOnScrollMode: PanOnScrollMode.Free,
paneMoveable: true,
edgeUpdaterRadius: 10,
nodesSelectionActive: false,
selectionActive: false,
userSelectionRect: {
startX: 0,
startY: 0,
x: 0,
y: 0,
width: 0,
height: 0,
draw: false,
},
arrowHeadColor: '#b1b1b7',
connectionNodeId: undefined,
connectionHandleId: undefined,
connectionHandleType: 'source',
connectionPosition: { x: NaN, y: NaN },
connectionMode: ConnectionMode.Loose,
snapGrid: [15, 15],
snapToGrid: false,
nodesDraggable: true,
nodesConnectable: true,
elementsSelectable: true,
multiSelectionActive: false,
isReady: false,
hooks: createHooks(),
loading: false,
vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
})
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 (!updatedNode.__vf) updatedNode.__vf = {}
if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
updatedNode.__vf.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.__vf.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))
}
}
}
resolve(nextElements)
})
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)
}