feat(flow): Narrow options type for useNodesState/useEdgesState/useElementsState

* remove storageKey
* make modelValue optional

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/composables/useElementsState.ts

@@ -61,7 +61,7 @@ const updateEdge = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge
 export const applyEdgeChanges = (changes: EdgeChange[], edges: GraphEdge[]) => applyChanges(changes, edges)
 export const applyNodeChanges = (changes: NodeChange[], nodes: GraphNode[]) => applyChanges(changes, nodes)
 
-export const useEdgesState = ({ edges, options }: UseEdgesStateOptions = { options: { applyDefault: true } }): UseEdgesState => {
+export const useEdgesState = ({ edges, options }: UseEdgesStateOptions): UseEdgesState => {
   const { store } = useVueFlow(options)
   if (edges && edges.length) store.setEdges(edges)
   return {
@@ -93,7 +93,7 @@ export const useEdgesState = ({ edges, options }: UseEdgesStateOptions = { optio
   }
 }
 
-export const useNodesState = ({ nodes, options }: UseNodesStateOptions = { options: { applyDefault: true } }): UseNodesState => {
+export const useNodesState = ({ nodes, options }: UseNodesStateOptions): UseNodesState => {
   const { store } = useVueFlow(options)
   if (nodes && nodes.length) store.setNodes(nodes)
   return {
@@ -113,9 +113,7 @@ export const useNodesState = ({ nodes, options }: UseNodesStateOptions = { optio
   }
 }
 
-export const useElementsState = (
+export const useElementsState = ({ edges, nodes, options }: UseElementsStateOptions): UseElementsState => {
-  { edges, nodes, options }: UseElementsStateOptions = { options: { applyDefault: true } },
-): UseElementsState => {
   const nodesState = useNodesState({ nodes, options })
   const edgesState = useEdgesState({ edges, options })
 

src/composables/useVueFlow.ts

@@ -4,7 +4,7 @@ import { VueFlow } from '~/context'
 import { useStore } from '~/store'
 
 let id = 0
-export default (options?: FlowOptions): UseVueFlow => {
+export default (options?: Partial<FlowOptions>): UseVueFlow => {
   const currentInstance: any = getCurrentInstance()
   let vueFlow: UseVueFlow | false | undefined = currentInstance
     ? inject(VueFlow, undefined) ?? (currentInstance.vueFlow as UseVueFlow)

src/container/VueFlow/VueFlow.vue

@@ -49,7 +49,7 @@ if (props.modelValue && !storedNodes.value.length) setElements(props.modelValue)
 if (props.nodes && !storedNodes.value.length) setNodes(props.nodes)
 if (props.edges && !storedEdges.value.length) setEdges(props.edges)
 
-if (modelValue.value) modelValue.value = [...store.nodes, ...store.edges]
+if (modelValue && modelValue.value) modelValue.value = [...store.nodes, ...store.edges]
 if (nodes && nodes.value) nodes.value = store.nodes
 if (edges && edges.value) edges.value = store.edges
 

src/container/VueFlow/watch.ts

@@ -8,7 +8,7 @@ export default (
     nodes,
     edges,
   }: {
-    modelValue?: Ref<Elements>
+    modelValue?: Ref<Elements | undefined>
     nodes?: Ref<Node[] | undefined>
     edges?: Ref<Edge[] | undefined>
   },
@@ -16,7 +16,7 @@ export default (
   store: FlowStore,
 ) => {
   if (isDefined(props.modelValue)) {
-    const { pause, resume } = pausableWatch([() => props.modelValue, () => props.modelValue.length], async ([v]) => {
+    const { pause, resume } = pausableWatch([() => props.modelValue, () => props.modelValue?.length], async ([v]) => {
       if (v && Array.isArray(v)) {
         pause()
         store.setElements(v)

src/store/actions.ts

@@ -160,7 +160,6 @@ export default (state: State, getters: Getters): Actions => {
     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

src/store/state.ts

@@ -94,7 +94,6 @@ export default (opts?: FlowOptions): State => {
 
     hooks: createHooks(),
 
-    storageKey: undefined,
     applyDefault: true,
 
     vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
@@ -111,7 +110,6 @@ export default (opts?: FlowOptions): State => {
     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

src/types/flow.ts

@@ -82,7 +82,7 @@ export type FlowInstance<N = any, E = N> = {
 } & UseZoomPanHelper
 
 export interface FlowProps<N = any, E = N> {
-  modelValue: Elements
+  modelValue?: Elements<N, E>
   nodes?: Node<N>[]
   edges?: Edge<E>[]
   id?: string
@@ -94,7 +94,7 @@ export interface FlowProps<N = any, E = N> {
   multiSelectionKeyCode?: KeyCode
   zoomActivationKeyCode?: KeyCode
   snapToGrid?: boolean
-  snapGrid?: [number, number]
+  snapGrid?: SnapGrid
   onlyRenderVisibleElements?: boolean
   edgesUpdatable?: boolean
   nodesDraggable?: boolean
@@ -117,26 +117,46 @@ export interface FlowProps<N = any, E = N> {
   zoomOnDoubleClick?: boolean
   preventScrolling?: boolean
   edgeUpdaterRadius?: number
-  storageKey?: string
   fitViewOnInit?: boolean
   applyDefault?: boolean
 }
 
 export type FlowOptions<N = any, E = N> = FlowProps<N, E>
 
-type UseStateOptions = {
+export interface UseNodesStateOptions<Data = any> {
-  options?: FlowOptions
+  nodes: Node<Data>[]
+  options?: Pick<
+    FlowOptions<Data, any>,
+    | 'applyDefault'
+    | 'snapToGrid'
+    | 'snapGrid'
+    | 'nodesConnectable'
+    | 'nodesDraggable'
+    | 'elementsSelectable'
+    | 'selectNodesOnDrag'
+    | 'defaultPosition'
+    | 'onlyRenderVisibleElements'
+    | 'nodeExtent'
+    | 'edgeUpdaterRadius'
+  >
 }
-export interface UseNodesStateOptions extends UseStateOptions {
+export interface UseEdgesStateOptions<Data = any> {
-  nodes?: Node[]
+  edges: Edge<Data>[]
-}
+  options?: Pick<
-export interface UseEdgesStateOptions extends UseStateOptions {
+    FlowOptions<any, Data>,
-  edges?: Edge[]
+    | 'applyDefault'
-}
+    | 'connectionMode'
-export interface UseElementsStateOptions extends UseStateOptions {
+    | 'connectionLineType'
-  edges?: Edge[]
+    | 'connectionLineStyle'
-  nodes?: Node[]
+    | 'elementsSelectable'
+    | 'selectNodesOnDrag'
+    | 'defaultPosition'
+    | 'onlyRenderVisibleElements'
+    | 'edgesUpdatable'
+  >
 }
+export type UseElementsStateOptions = UseNodesStateOptions & UseEdgesStateOptions
+
 export type UseNodesState<N = any> = {
   nodes: GraphNode<N>[]
   applyNodeChanges: <ND = N>(changes: NodeChange[]) => GraphNode<ND>[]

src/types/store.ts

@@ -8,7 +8,7 @@ import { GraphNode, CoordinateExtent, Node } from './node'
 import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode } from './zoom'
 import { FlowHooks, FlowHooksOn } from './hooks'
 
-export interface State<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id' | 'elements'> {
+export interface State<N = any, E = N> extends Omit<FlowOptions<N, E>, 'id' | 'modelValue'> {
   hooks: FlowHooks
   instance?: FlowInstance