From a9e7eb31ea2147f225e5fff09126e8d3a5e738f4 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Mon, 20 Dec 2021 12:36:59 +0100 Subject: [PATCH] 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 | 8 ++--- src/composables/useVueFlow.ts | 2 +- src/container/VueFlow/VueFlow.vue | 2 +- src/container/VueFlow/watch.ts | 4 +-- src/store/actions.ts | 1 - src/store/state.ts | 2 -- src/types/flow.ts | 48 ++++++++++++++++++++--------- src/types/store.ts | 2 +- 8 files changed, 42 insertions(+), 27 deletions(-) diff --git a/src/composables/useElementsState.ts b/src/composables/useElementsState.ts index 6d940e08..79ae95d1 100644 --- a/src/composables/useElementsState.ts +++ b/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 = ( - { edges, nodes, options }: UseElementsStateOptions = { options: { applyDefault: true } }, -): UseElementsState => { +export const useElementsState = ({ edges, nodes, options }: UseElementsStateOptions): UseElementsState => { const nodesState = useNodesState({ nodes, options }) const edgesState = useEdgesState({ edges, options }) diff --git a/src/composables/useVueFlow.ts b/src/composables/useVueFlow.ts index e108eb6e..c11854b2 100644 --- a/src/composables/useVueFlow.ts +++ b/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): UseVueFlow => { const currentInstance: any = getCurrentInstance() let vueFlow: UseVueFlow | false | undefined = currentInstance ? inject(VueFlow, undefined) ?? (currentInstance.vueFlow as UseVueFlow) diff --git a/src/container/VueFlow/VueFlow.vue b/src/container/VueFlow/VueFlow.vue index e84df06e..61deae8f 100644 --- a/src/container/VueFlow/VueFlow.vue +++ b/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 diff --git a/src/container/VueFlow/watch.ts b/src/container/VueFlow/watch.ts index 18dfe60c..df8f8b46 100644 --- a/src/container/VueFlow/watch.ts +++ b/src/container/VueFlow/watch.ts @@ -8,7 +8,7 @@ export default ( nodes, edges, }: { - modelValue?: Ref + modelValue?: Ref nodes?: Ref edges?: Ref }, @@ -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) diff --git a/src/store/actions.ts b/src/store/actions.ts index e9f687a0..30252290 100644 --- a/src/store/actions.ts +++ b/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 diff --git a/src/store/state.ts b/src/store/state.ts index 27040522..6ccceda5 100644 --- a/src/store/state.ts +++ b/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 diff --git a/src/types/flow.ts b/src/types/flow.ts index abd16d55..b648bcbd 100644 --- a/src/types/flow.ts +++ b/src/types/flow.ts @@ -82,7 +82,7 @@ export type FlowInstance = { } & UseZoomPanHelper export interface FlowProps { - modelValue: Elements + modelValue?: Elements nodes?: Node[] edges?: Edge[] id?: string @@ -94,7 +94,7 @@ export interface FlowProps { multiSelectionKeyCode?: KeyCode zoomActivationKeyCode?: KeyCode snapToGrid?: boolean - snapGrid?: [number, number] + snapGrid?: SnapGrid onlyRenderVisibleElements?: boolean edgesUpdatable?: boolean nodesDraggable?: boolean @@ -117,26 +117,46 @@ export interface FlowProps { zoomOnDoubleClick?: boolean preventScrolling?: boolean edgeUpdaterRadius?: number - storageKey?: string fitViewOnInit?: boolean applyDefault?: boolean } export type FlowOptions = FlowProps -type UseStateOptions = { - options?: FlowOptions +export interface UseNodesStateOptions { + nodes: Node[] + options?: Pick< + FlowOptions, + | 'applyDefault' + | 'snapToGrid' + | 'snapGrid' + | 'nodesConnectable' + | 'nodesDraggable' + | 'elementsSelectable' + | 'selectNodesOnDrag' + | 'defaultPosition' + | 'onlyRenderVisibleElements' + | 'nodeExtent' + | 'edgeUpdaterRadius' + > } -export interface UseNodesStateOptions extends UseStateOptions { - nodes?: Node[] -} -export interface UseEdgesStateOptions extends UseStateOptions { - edges?: Edge[] -} -export interface UseElementsStateOptions extends UseStateOptions { - edges?: Edge[] - nodes?: Node[] +export interface UseEdgesStateOptions { + edges: Edge[] + options?: Pick< + FlowOptions, + | 'applyDefault' + | 'connectionMode' + | 'connectionLineType' + | 'connectionLineStyle' + | 'elementsSelectable' + | 'selectNodesOnDrag' + | 'defaultPosition' + | 'onlyRenderVisibleElements' + | 'edgesUpdatable' + > } +export type UseElementsStateOptions = UseNodesStateOptions & UseEdgesStateOptions + export type UseNodesState = { nodes: GraphNode[] applyNodeChanges: (changes: NodeChange[]) => GraphNode[] diff --git a/src/types/store.ts b/src/types/store.ts index aff3fb11..06d04c1f 100644 --- a/src/types/store.ts +++ b/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 extends Omit, 'id' | 'elements'> { +export interface State extends Omit, 'id' | 'modelValue'> { hooks: FlowHooks instance?: FlowInstance