diff --git a/src/composables/useElementsState.ts b/src/composables/useElementsState.ts index 13fe06ee..fba30493 100644 --- a/src/composables/useElementsState.ts +++ b/src/composables/useElementsState.ts @@ -58,21 +58,16 @@ const updateEdge = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge return edge } -export const applyEdgeChanges = (changes: EdgeChange[]) => { - const { store } = useVueFlow() - applyChanges(changes, store.edges) -} -export const applyNodeChanges = (changes: NodeChange[]) => { - const { store } = useVueFlow() - applyChanges(changes, store.nodes) -} +const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges) +const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes) export const useEdgesState = ({ edges, applyDefault }: UseEdgesStateOptions = { applyDefault: true }): UseEdgesState => { const { store } = useVueFlow() if (edges && edges.length) store.setEdges(edges) - if (applyDefault) store.hooksOn.OnEdgesChange(applyEdgeChanges) + if (applyDefault) store.hooksOn.OnEdgesChange((e) => applyEdgeChanges(e, store.edges)) return { edges: store.edges, + applyEdgeChanges: (changes) => applyEdgeChanges(changes, store.edges), setEdges: store.setEdges, addEdges: (params) => { params.forEach((param) => { @@ -102,10 +97,10 @@ export const useEdgesState = ({ edges, applyDefault }: UseEdgesStateOptions = { export const useNodesState = ({ nodes, applyDefault }: UseNodesStateOptions = { applyDefault: true }): UseNodesState => { const { store } = useVueFlow() if (nodes && nodes.length) store.setNodes(nodes) - if (applyDefault) store.hooksOn.OnNodesChange(applyNodeChanges) - + if (applyDefault) store.hooksOn.OnNodesChange((c) => applyNodeChanges(c, store.nodes)) return { nodes: store.nodes, + applyNodeChanges: (changes) => applyNodeChanges(changes, store.nodes), setNodes: store.setNodes, addNodes: (nodes, extent) => { const parsed = nodes.flatMap((node) => { diff --git a/src/container/VueFlow/watch.ts b/src/container/VueFlow/watch.ts index 001eaddf..7b20b8ad 100644 --- a/src/container/VueFlow/watch.ts +++ b/src/container/VueFlow/watch.ts @@ -40,121 +40,151 @@ export default ( watch( () => props.maxZoom, (v) => isDef(v) && store.setMaxZoom(v), + { immediate: true }, ) watch( () => props.minZoom, (v) => isDef(v) && store.setMinZoom(v), + { immediate: true }, ) watch( () => props.edgesUpdatable, (v) => isDef(v) && (store.edgesUpdatable = v), + { immediate: true }, ) watch( () => props.elementsSelectable, (v) => isDef(v) && (store.elementsSelectable = v), + { immediate: true }, ) watch( () => props.nodesDraggable, (v) => isDef(v) && (store.nodesDraggable = v), + { immediate: true }, ) watch( () => props.nodesConnectable, (v) => isDef(v) && (store.nodesConnectable = v), + { immediate: true }, ) watch( () => props.onlyRenderVisibleElements, (v) => isDef(v) && (store.onlyRenderVisibleElements = v), + { immediate: true }, ) watch( () => props.snapToGrid, (v) => isDef(v) && (store.snapToGrid = v), + { immediate: true }, ) watch( () => props.snapGrid, (v) => isDef(v) && (store.snapGrid = v), + { immediate: true }, ) watch( () => props.paneMoveable, (v) => isDef(v) && (store.paneMoveable = v), + { immediate: true }, ) watch( () => props.panOnScroll, (v) => isDef(v) && (store.panOnScroll = v), + { immediate: true }, ) watch( () => props.panOnScrollMode, (v) => isDef(v) && (store.panOnScrollMode = v), + { immediate: true }, ) watch( () => props.panOnScrollSpeed, (v) => isDef(v) && (store.panOnScrollSpeed = v), + { immediate: true }, ) watch( () => props.zoomOnPinch, (v) => isDef(v) && (store.zoomOnPinch = v), + { immediate: true }, ) watch( () => props.zoomOnDoubleClick, (v) => isDef(v) && (store.zoomOnDoubleClick = v), + { immediate: true }, ) watch( () => props.zoomOnScroll, (v) => isDef(v) && (store.zoomOnScroll = v), + { immediate: true }, ) watch( () => props.deleteKeyCode, (v) => isDef(v) && (store.deleteKeyCode = v), + { immediate: true }, ) watch( () => props.zoomActivationKeyCode, (v) => isDef(v) && (store.zoomActivationKeyCode = v), + { immediate: true }, ) watch( () => props.selectionKeyCode, (v) => isDef(v) && (store.selectionKeyCode = v), + { immediate: true }, ) watch( () => props.multiSelectionKeyCode, (v) => isDef(v) && (store.multiSelectionKeyCode = v), + { immediate: true }, ) watch( () => props.connectionLineStyle, (v) => isDef(v) && (store.connectionLineStyle = v), + { immediate: true }, ) watch( () => props.connectionMode, (v) => isDef(v) && (store.connectionMode = v), + { immediate: true }, ) watch( () => props.connectionLineType, (v) => isDef(v) && (store.connectionLineType = v), + { immediate: true }, ) watch( () => props.defaultMarkerColor, (v) => isDef(v) && (store.defaultMarkerColor = v), + { immediate: true }, ) watch( () => props.defaultPosition, (v) => isDef(v) && (store.defaultPosition = v), + { immediate: true }, ) watch( () => props.defaultZoom, (v) => isDef(v) && (store.defaultZoom = v), + { immediate: true }, ) watch( () => props.translateExtent, (v) => isDef(v) && (store.translateExtent = v), + { immediate: true }, ) watch( () => props.nodeExtent, (v) => isDef(v) && (store.nodeExtent = v), + { immediate: true }, ) watch( () => props.selectNodesOnDrag, (v) => isDef(v) && (store.selectNodesOnDrag = v), + { immediate: true }, ) watch( () => props.edgeUpdaterRadius, (v) => isDef(v) && (store.edgeUpdaterRadius = v), + { immediate: true }, ) } diff --git a/src/types/flow.ts b/src/types/flow.ts index 82e6df14..812d17dc 100644 --- a/src/types/flow.ts +++ b/src/types/flow.ts @@ -4,7 +4,7 @@ import { GraphNode, CoordinateExtent, Node } from './node' import { Connection, ConnectionLineType, ConnectionMode } from './connection' import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom' import { FlowActions, FlowStore } from './store' -import { FlowHooksOn } from './hooks' +import { EdgeChange, FlowHooksOn, NodeChange } from './hooks' export type FlowElement = GraphNode | GraphEdge export type FlowElements = FlowElement[] @@ -136,22 +136,24 @@ export interface UseElementsStateOptions extends UseStateOptions { edges?: Edge[] nodes?: Node[] } -export type UseNodesState = { - nodes: GraphNode[] +export type UseNodesState = { + nodes: GraphNode[] + applyNodeChanges: (changes: NodeChange[]) => GraphNode[] setNodes: FlowActions['setNodes'] - addNodes: (nodes: Node[], extent?: CoordinateExtent) => GraphNode[] + addNodes: (nodes: Node[], extent?: CoordinateExtent) => GraphNode[] OnNodesChange: FlowHooksOn['OnNodesChange'] } -export type UseEdgesState = { +export type UseEdgesState = { edges: GraphEdge[] + applyEdgeChanges: (changes: EdgeChange[]) => GraphEdge[] setEdges: FlowActions['setEdges'] - addEdges: (params: (Edge | Connection)[]) => GraphEdge[] - updateEdge: (oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false + addEdges: (params: (Edge | Connection)[]) => GraphEdge[] + updateEdge: (oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false OnEdgesChange: FlowHooksOn['OnEdgesChange'] } -export type UseElementsState = UseNodesState & UseEdgesState -export type UseVueFlow = { +export type UseElementsState = UseNodesState & UseEdgesState +export type UseVueFlow = { id: string - store: FlowStore -} & FlowHooksOn & - ToRefs + store: FlowStore +} & FlowHooksOn & + ToRefs>