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

refactor(flow)!: Use watcher to change every prop as a single item

Browse Source 
* instead of replacing the whole state on each watch trigger, split into multiple watchers that set a single state
* improve reacitivty and two-way binding for v-models
* remove elements option -> only modelValue (old api) or nodes/edges

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 cc7cedfda0
commit f8a23c59ec
9 changed files with 284 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/VueFlow/VueFlow.vue
+5 -13
View File
@@ -3,6 +3,7 @@ import { createHooks, useHooks } from '../../store'
import type { FlowProps } from '../../types/flow'
import ZoomPane from '../ZoomPane/ZoomPane.vue'
import { useVueFlow } from '../../composables'
import useWatch from './watch'
const props = withDefaults(defineProps<FlowProps>(), {
snapToGrid: false,
@@ -25,19 +26,10 @@ const { modelValue, nodes, edges } = useVModels(props, emit)
const { store } = useVueFlow(props)
useHooks(store.hooks, emit)
nextTick(() => {
modelValue && (modelValue.value = [...store.nodes, ...store.edges])
nodes && (nodes.value = store.nodes)
})
nextTick(() => {
modelValue && (modelValue.value = [...store.nodes, ...store.edges])
edges && (edges.value = store.edges)
})
watch(
() => props,
(v) => nextTick(() => store.setState(v)),
{ flush: 'sync', deep: true, immediate: true },
)
onMounted(() => useWatch(modelValue, nodes, edges, props, store))
modelValue && (modelValue.value = [...store.nodes, ...store.edges])
nodes && (nodes.value = store.nodes)
edges && (edges.value = store.edges)
</script>
<script lang="ts">
export default {
src/container/VueFlow/watch.ts
+160
View File
@@ -0,0 +1,160 @@
import { Ref } from 'vue'
import { FlowProps, FlowStore } from '~/types'
const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
export default (
modelValue: Ref<any[] | undefined> | undefined,
nodes: Ref<any[] | undefined> | undefined,
edges: Ref<any[] | undefined> | undefined,
props: FlowProps,
store: FlowStore,
) => {
if (isDefined(modelValue)) {
const { pause, resume } = pausableWatch(modelValue, (v) => {
if (v) {
pause()
store.setElements(v)
resume()
}
})
}
if (isDefined(nodes)) {
const { pause, resume } = pausableWatch(nodes, (v) => {
if (v) {
pause()
store.setNodes(v)
resume()
}
})
}
if (isDefined(edges)) {
const { pause, resume } = pausableWatch(edges, (v) => {
if (v) {
pause()
store.setEdges(v)
resume()
}
})
}
watch(
() => props.maxZoom,
(v) => isDef(v) && store.setMaxZoom(v),
)
watch(
() => props.minZoom,
(v) => isDef(v) && store.setMinZoom(v),
)
watch(
() => props.edgesUpdatable,
(v) => isDef(v) && (store.edgesUpdatable = v),
)
watch(
() => props.elementsSelectable,
(v) => isDef(v) && (store.elementsSelectable = v),
)
watch(
() => props.nodesDraggable,
(v) => isDef(v) && (store.nodesDraggable = v),
)
watch(
() => props.nodesConnectable,
(v) => isDef(v) && (store.nodesConnectable = v),
)
watch(
() => props.onlyRenderVisibleElements,
(v) => isDef(v) && (store.onlyRenderVisibleElements = v),
)
watch(
() => props.snapToGrid,
(v) => isDef(v) && (store.snapToGrid = v),
)
watch(
() => props.snapGrid,
(v) => isDef(v) && (store.snapGrid = v),
)
watch(
() => props.paneMoveable,
(v) => isDef(v) && (store.paneMoveable = v),
)
watch(
() => props.panOnScroll,
(v) => isDef(v) && (store.panOnScroll = v),
)
watch(
() => props.panOnScrollMode,
(v) => isDef(v) && (store.panOnScrollMode = v),
)
watch(
() => props.panOnScrollSpeed,
(v) => isDef(v) && (store.panOnScrollSpeed = v),
)
watch(
() => props.zoomOnPinch,
(v) => isDef(v) && (store.zoomOnPinch = v),
)
watch(
() => props.zoomOnDoubleClick,
(v) => isDef(v) && (store.zoomOnDoubleClick = v),
)
watch(
() => props.zoomOnScroll,
(v) => isDef(v) && (store.zoomOnScroll = v),
)
watch(
() => props.deleteKeyCode,
(v) => isDef(v) && (store.deleteKeyCode = v),
)
watch(
() => props.zoomActivationKeyCode,
(v) => isDef(v) && (store.zoomActivationKeyCode = v),
)
watch(
() => props.selectionKeyCode,
(v) => isDef(v) && (store.selectionKeyCode = v),
)
watch(
() => props.multiSelectionKeyCode,
(v) => isDef(v) && (store.multiSelectionKeyCode = v),
)
watch(
() => props.connectionLineStyle,
(v) => isDef(v) && (store.connectionLineStyle = v),
)
watch(
() => props.connectionMode,
(v) => isDef(v) && (store.connectionMode = v),
)
watch(
() => props.connectionLineType,
(v) => isDef(v) && (store.connectionLineType = v),
)
watch(
() => props.defaultMarkerColor,
(v) => isDef(v) && (store.defaultMarkerColor = v),
)
watch(
() => props.defaultPosition,
(v) => isDef(v) && (store.defaultPosition = v),
)
watch(
() => props.defaultZoom,
(v) => isDef(v) && (store.defaultZoom = v),
)
watch(
() => props.translateExtent,
(v) => isDef(v) && (store.translateExtent = v),
)
watch(
() => props.nodeExtent,
(v) => isDef(v) && (store.nodeExtent = v),
)
watch(
() => props.selectNodesOnDrag,
(v) => isDef(v) && (store.selectNodesOnDrag = v),
)
watch(
() => props.edgeUpdaterRadius,
(v) => isDef(v) && (store.edgeUpdaterRadius = v),
)
}
src/container/ZoomPane/ZoomPane.vue
+2 -2
View File
@@ -175,7 +175,7 @@ onMounted(() => {
store.dimensions.height = newHeight
})
},
{ flush: 'sync', immediate: true },
{ flush: 'post', immediate: true },
)
watch(
transform,
@@ -183,7 +183,7 @@ onMounted(() => {
const { x, y } = clampPosition(val, store.translateExtent)
nextTick(() => (store.transform = [x, y, clamp(val.zoom, store.minZoom, store.maxZoom)]))
},
{ flush: 'pre', immediate: true },
{ flush: 'post', immediate: true },
)
})
nextTick(async () => {
src/store/actions.ts
+2 -1
View File
@@ -147,13 +147,13 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
}
const setElements: FlowActions['setElements'] = (elements, extent) => {
if (!state.initialized && !elements.length) return
setNodes(elements.filter(isNode), extent)
setEdges(elements.filter(isEdge))
}
const setState: FlowActions['setState'] = (opts) => {
if (typeof opts.modelValue !== 'undefined') setElements(opts.modelValue, opts.nodeExtent ?? state.nodeExtent)
if (typeof opts.elements !== 'undefined') setElements(opts.elements, opts.nodeExtent ?? state.nodeExtent)
if (typeof opts.nodes !== 'undefined') setNodes(opts.nodes, opts.nodeExtent ?? state.nodeExtent)
if (typeof opts.edges !== 'undefined') setEdges(opts.edges)
if (typeof opts.panOnScroll !== 'undefined') state.panOnScroll = opts.panOnScroll
@@ -194,6 +194,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
if (typeof opts.minZoom !== 'undefined') setMinZoom(opts.minZoom)
if (typeof opts.translateExtent !== 'undefined') setTranslateExtent(opts.translateExtent)
}
if (!state.initialized) state.initialized = true
}
return {
updateNodePosition,
src/store/state.ts
+105 -63
View File
@@ -1,6 +1,7 @@
import { createHooks } from './hooks'
import { ConnectionMode, FlowState, PanOnScrollMode, DefaultNodeTypes, DefaultEdgeTypes, ConnectionLineType } from '~/types'
import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
import { isEdge, isNode } from '~/utils'
export const defaultNodeTypes: DefaultNodeTypes = {
input: InputNode,
@@ -15,77 +16,118 @@ export const defaultEdgeTypes: DefaultEdgeTypes = {
smoothstep: SmoothStepEdge,
}
export default (preloadedState?: Partial<FlowState>): FlowState => ({
nodes: [],
edges: [],
export default (opts?: Partial<FlowState>): FlowState => {
const state: FlowState = {
nodes: [],
edges: [],
paneReady: false,
instance: undefined,
paneReady: false,
initialized: false,
instance: undefined,
dimensions: {
width: 0,
height: 0,
},
transform: [0, 0, 1],
dimensions: {
width: 0,
height: 0,
},
transform: [0, 0, 1],
d3Zoom: undefined,
d3Selection: undefined,
d3ZoomHandler: undefined,
minZoom: 0.5,
maxZoom: 2,
translateExtent: [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
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],
],
preventScrolling: true,
zoomOnScroll: true,
zoomOnPinch: true,
zoomOnDoubleClick: true,
panOnScroll: false,
panOnScrollSpeed: 0.5,
panOnScrollMode: PanOnScrollMode.Free,
paneMoveable: true,
edgeUpdaterRadius: 10,
onlyRenderVisibleElements: false,
defaultZoom: 1,
defaultPosition: [0, 0],
nodeExtent: [
[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
[Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
],
preventScrolling: true,
zoomOnScroll: true,
zoomOnPinch: true,
zoomOnDoubleClick: true,
panOnScroll: false,
panOnScrollSpeed: 0.5,
panOnScrollMode: PanOnScrollMode.Free,
paneMoveable: true,
edgeUpdaterRadius: 10,
onlyRenderVisibleElements: false,
defaultZoom: 1,
defaultPosition: [0, 0],
nodesSelectionActive: false,
selectionActive: false,
selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
nodesSelectionActive: false,
selectionActive: false,
selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
defaultMarkerColor: '#b1b1b7',
connectionLineStyle: {},
connectionLineType: ConnectionLineType.Bezier,
connectionNodeId: undefined,
connectionHandleId: undefined,
connectionHandleType: 'source',
connectionPosition: { x: NaN, y: NaN },
connectionMode: ConnectionMode.Loose,
defaultMarkerColor: '#b1b1b7',
connectionLineStyle: {},
connectionLineType: ConnectionLineType.Bezier,
connectionNodeId: undefined,
connectionHandleId: undefined,
connectionHandleType: 'source',
connectionPosition: { x: NaN, y: NaN },
connectionMode: ConnectionMode.Loose,
snapGrid: [15, 15],
snapToGrid: false,
snapGrid: [15, 15],
snapToGrid: false,
edgesUpdatable: false,
nodesConnectable: true,
nodesDraggable: true,
elementsSelectable: true,
selectNodesOnDrag: true,
multiSelectionActive: false,
selectionKeyCode: 'Shift',
multiSelectionKeyCode: 'Meta',
zoomActivationKeyCode: 'Meta',
deleteKeyCode: 'Backspace',
edgesUpdatable: false,
nodesConnectable: true,
nodesDraggable: true,
elementsSelectable: true,
selectNodesOnDrag: true,
multiSelectionActive: false,
selectionKeyCode: 'Shift',
multiSelectionKeyCode: 'Meta',
zoomActivationKeyCode: 'Meta',
deleteKeyCode: 'Backspace',
hooks: createHooks(),
hooks: createHooks(),
storageKey: undefined,
storageKey: undefined,
vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
...preloadedState,
})
vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
}
if (opts) {
if (typeof opts.modelValue !== 'undefined') {
state.nodes = opts.modelValue.filter((el) => isNode(el))
state.edges = opts.modelValue.filter((el) => isEdge(el))
}
if (typeof opts.nodes !== 'undefined') state.nodes = opts.nodes
if (typeof opts.edges !== 'undefined') state.edges = opts.edges
if (typeof opts.panOnScroll !== 'undefined') state.panOnScroll = opts.panOnScroll
if (typeof opts.panOnScrollMode !== 'undefined') state.panOnScrollMode = opts.panOnScrollMode
if (typeof opts.panOnScrollSpeed !== 'undefined') state.panOnScrollSpeed = opts.panOnScrollSpeed
if (typeof opts.paneMoveable !== 'undefined') state.paneMoveable = opts.paneMoveable
if (typeof opts.zoomOnScroll !== 'undefined') state.zoomOnScroll = opts.zoomOnScroll
if (typeof opts.preventScrolling !== 'undefined') state.preventScrolling = opts.preventScrolling
if (typeof opts.zoomOnDoubleClick !== 'undefined') state.zoomOnDoubleClick = opts.zoomOnDoubleClick
if (typeof opts.zoomOnPinch !== 'undefined') state.zoomOnPinch = opts.zoomOnPinch
if (typeof opts.defaultZoom !== 'undefined') state.defaultZoom = opts.defaultZoom
if (typeof opts.defaultPosition !== 'undefined') state.defaultPosition = opts.defaultPosition
if (typeof opts.storageKey !== 'undefined') state.storageKey = opts.storageKey
if (typeof opts.edgeUpdaterRadius !== 'undefined') state.edgeUpdaterRadius = opts.edgeUpdaterRadius
if (typeof opts.elementsSelectable !== 'undefined') state.elementsSelectable = opts.elementsSelectable
if (typeof opts.onlyRenderVisibleElements !== 'undefined') state.onlyRenderVisibleElements = opts.onlyRenderVisibleElements
if (typeof opts.edgesUpdatable !== 'undefined') state.edgesUpdatable = opts.edgesUpdatable
if (typeof opts.nodesConnectable !== 'undefined') state.nodesConnectable = opts.nodesConnectable
if (typeof opts.nodesDraggable !== 'undefined') state.nodesDraggable = opts.nodesDraggable
if (typeof opts.defaultMarkerColor !== 'undefined') state.defaultMarkerColor = opts.defaultMarkerColor
if (typeof opts.deleteKeyCode !== 'undefined') state.deleteKeyCode = opts.deleteKeyCode
if (typeof opts.selectionKeyCode !== 'undefined') state.selectionKeyCode = opts.selectionKeyCode
if (typeof opts.zoomActivationKeyCode !== 'undefined') state.zoomActivationKeyCode = opts.zoomActivationKeyCode
if (typeof opts.multiSelectionKeyCode !== 'undefined') state.multiSelectionKeyCode = opts.multiSelectionKeyCode
if (typeof opts.snapToGrid !== 'undefined') state.snapToGrid = opts.snapToGrid
if (typeof opts.snapGrid !== 'undefined') state.snapGrid = opts.snapGrid
if (typeof opts.nodeExtent !== 'undefined') state.nodeExtent = opts.nodeExtent
if (typeof opts.maxZoom !== 'undefined') state.maxZoom = opts.maxZoom
if (typeof opts.minZoom !== 'undefined') state.minZoom = opts.minZoom
if (typeof opts.translateExtent !== 'undefined') state.translateExtent = opts.translateExtent
}
return state
}
src/store/store.ts
+7 -8
View File
@@ -13,7 +13,8 @@ const useFlowStore = (preloadedState: FlowState): Store => {
const name = `On${n.charAt(0).toUpperCase() + n.slice(1)}`
hooksOn[<keyof FlowHooksOn>name] = h.on as any
})
actions.setState(preloadedState)
actions.setState(state)
return {
state,
hooksOn,
@@ -27,9 +28,7 @@ export default (id: string, options?: FlowOptions) => {
const withStorage = options?.storageKey ?? false
let storedState = ref<FlowExportObject>()
const storageKey = id ?? options?.id
const preloadedState = {
...(options as FlowState),
}
const preloadedState = options as FlowState
if (withStorage) {
storedState = useStorage<FlowExportObject>(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 })
if (storedState.value) {
@@ -38,8 +37,8 @@ export default (id: string, options?: FlowOptions) => {
? storedState.value.nodes
: options?.nodes
? options.nodes
: options?.elements
? options?.elements.filter((el) => isNode(el))
: options?.modelValue
? options?.modelValue.filter((el) => isNode(el))
: []
) as GraphNode[]
preloadedState.edges = (
@@ -47,8 +46,8 @@ export default (id: string, options?: FlowOptions) => {
? storedState.value.edges
: options?.edges
? options.edges
: options?.elements
? options?.elements.filter((el) => isEdge(el))
: options?.modelValue
? options?.modelValue.filter((el) => isEdge(el))
: []
) as GraphEdge[]
if (storedState.value.position && storedState.value.zoom)
src/types/flow.ts
-1
View File
@@ -85,7 +85,6 @@ export interface FlowProps<N = any, E = N> {
modelValue?: any[]
nodes?: Node<N>[]
edges?: Edge<E>[]
elements?: Elements
id?: string
connectionMode?: ConnectionMode
connectionLineType?: ConnectionLineType
src/types/node.ts
+2 -3
View File
@@ -62,13 +62,12 @@ export interface NodeProps<T = any> {
source?: HandleElement[]
target?: HandleElement[]
}
// todo plugin not allowing for nested types currently
parentNode?: any
parentNode?: GraphNode[]
isParent?: boolean
computedPosition: XYZPosition
position: XYPosition
draggable?: boolean
selectable?: boolean
children?: any[]
children?: Node[]
dimensions?: Dimensions
}
src/types/store.ts
+1
View File
@@ -64,6 +64,7 @@ export interface FlowState<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id'
preventScrolling: boolean
paneReady: boolean
initialized: boolean
vueFlowVersion: string
}