refactor(flow)!: Use watcher to change every prop as a single item
* 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
@@ -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,
|
||||
|
||||
+105
-63
@@ -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
|
||||
}
|
||||
|
||||
+7
-8
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user