From 95bc46e61659df1a679ac832beeced6373128b35 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 29 Mar 2022 20:21:53 +0200 Subject: [PATCH] fix(flow): store & usevueflow types --- package/src/composables/useHandle.ts | 4 ++-- package/src/composables/useVueFlow.ts | 10 ++++------ package/src/composables/useZoomPanHelper.ts | 4 ++-- package/src/container/VueFlow/VueFlow.vue | 2 +- package/src/container/VueFlow/watch.ts | 4 ++-- package/src/store/hooks.ts | 2 +- package/src/store/store.ts | 12 +++++------- package/src/types/store.ts | 9 +++------ package/src/utils/graph.ts | 10 +++++----- 9 files changed, 25 insertions(+), 32 deletions(-) diff --git a/package/src/composables/useHandle.ts b/package/src/composables/useHandle.ts index 60be9006..d3984a02 100644 --- a/package/src/composables/useHandle.ts +++ b/package/src/composables/useHandle.ts @@ -1,6 +1,6 @@ import useVueFlow from './useVueFlow' import { getHostForElement } from '~/utils' -import { Connection, ConnectionMode, HandleType, FlowStore, ValidConnectionFunc } from '~/types' +import { Connection, ConnectionMode, HandleType, Store, ValidConnectionFunc } from '~/types' type Result = { elementBelow: Element | null @@ -67,7 +67,7 @@ const resetRecentHandle = (hoveredHandle: Element): void => { hoveredHandle?.classList.remove('vue-flow__handle-connecting') } -export default (store: FlowStore = useVueFlow().store) => { +export default (store: Store = useVueFlow().store) => { let recentHoveredHandle: Element const onMouseDown = ( diff --git a/package/src/composables/useVueFlow.ts b/package/src/composables/useVueFlow.ts index d7e66ebf..00c84b46 100644 --- a/package/src/composables/useVueFlow.ts +++ b/package/src/composables/useVueFlow.ts @@ -30,14 +30,12 @@ export class Storage { public create(id: string, options?: Partial) { const store = useStore(options) - const flow = { + const flow: UseVueFlow = { id, - store: reactive(store), + store, + ...(store as any), ...toRefs(store.state), - ...store.getters, - ...store.actions, - ...store.hooksOn, - } as unknown as UseVueFlow + } this.set(id, flow) return flow } diff --git a/package/src/composables/useZoomPanHelper.ts b/package/src/composables/useZoomPanHelper.ts index d6b7688a..167be1c7 100644 --- a/package/src/composables/useZoomPanHelper.ts +++ b/package/src/composables/useZoomPanHelper.ts @@ -2,13 +2,13 @@ import { zoomIdentity } from 'd3-zoom' import useVueFlow from './useVueFlow' import useWindow from './useWindow' import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils' -import { GraphNode, FlowStore, UseZoomPanHelper, D3Selection } from '~/types' +import { GraphNode, Store, UseZoomPanHelper, D3Selection } from '~/types' const DEFAULT_PADDING = 0.1 const transition = (selection: D3Selection, ms = 0) => selection.transition().duration(ms) -export default (store: FlowStore = useVueFlow().store): UseZoomPanHelper => ({ +export default (store: Store = useVueFlow().store): UseZoomPanHelper => ({ zoomIn: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1.2), zoomOut: (options) => store.d3Selection && store.d3Zoom?.scaleBy(transition(store.d3Selection, options?.duration), 1 / 1.2), zoomTo: (zoomLevel, options) => diff --git a/package/src/container/VueFlow/VueFlow.vue b/package/src/container/VueFlow/VueFlow.vue index 4306531f..a006b60f 100644 --- a/package/src/container/VueFlow/VueFlow.vue +++ b/package/src/container/VueFlow/VueFlow.vue @@ -43,7 +43,7 @@ const { nodes: storedNodes, edges: storedEdges, } = useVueFlow(props) -useHooks(hooks.value, emit) +useHooks(emit, hooks.value) const { modelValue, nodes, edges } = useVModels(props, emit) onMounted(() => useWatch({ modelValue, nodes, edges }, props, store)) diff --git a/package/src/container/VueFlow/watch.ts b/package/src/container/VueFlow/watch.ts index 04276415..e885c432 100644 --- a/package/src/container/VueFlow/watch.ts +++ b/package/src/container/VueFlow/watch.ts @@ -1,5 +1,5 @@ import { Ref } from 'vue' -import { FlowProps, FlowStore, Node, Edge, Elements } from '~/types' +import { FlowProps, Store, Node, Edge, Elements } from '~/types' const isDef = (val: T): val is NonNullable => typeof val !== 'undefined' export default ( @@ -13,7 +13,7 @@ export default ( edges?: Ref }, props: FlowProps, - store: FlowStore, + store: Store, ) => { const scope = getCurrentScope() scope?.run(() => { diff --git a/package/src/store/hooks.ts b/package/src/store/hooks.ts index 2b0f075c..44491573 100644 --- a/package/src/store/hooks.ts +++ b/package/src/store/hooks.ts @@ -47,4 +47,4 @@ const bind = (emit: EmitFunc, hooks: FlowHooks) => { } } -export default (hooks: FlowHooks, emit: EmitFunc) => bind(emit, hooks) +export default (emit: EmitFunc, hooks: FlowHooks) => bind(emit, hooks) diff --git a/package/src/store/store.ts b/package/src/store/store.ts index efd5e15f..7f88e11a 100644 --- a/package/src/store/store.ts +++ b/package/src/store/store.ts @@ -1,7 +1,7 @@ import useState from './state' import useActions from './actions' import useGetters from './getters' -import { FlowHooksOn, FlowOptions, State, Store } from '~/types' +import { FlowHook, FlowHooksOn, FlowOptions, Store, State } from '~/types' export default (preloadedState?: FlowOptions): Store => { const state: State = useState(preloadedState) @@ -11,7 +11,7 @@ export default (preloadedState?: FlowOptions): Store => { const hooksOn: FlowHooksOn = {} Object.entries(reactiveState.hooks).forEach(([n, h]) => { const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}` - hooksOn[name] = h.on as any + hooksOn[name] = h.on as FlowHook['on'] }) actions.setState(reactiveState) if (preloadedState) { @@ -20,13 +20,11 @@ export default (preloadedState?: FlowOptions): Store => { if (preloadedState.edges) actions.setEdges(preloadedState.edges) } - return { + return reactive({ state: reactiveState, - actions, - getters, - hooksOn, + ...hooksOn, ...toRefs(reactiveState), ...getters, ...actions, - } as unknown as Store + }) } diff --git a/package/src/types/store.ts b/package/src/types/store.ts index cafba3b4..aad967e0 100644 --- a/package/src/types/store.ts +++ b/package/src/types/store.ts @@ -96,6 +96,7 @@ export interface Actions { addNodes: (nodes: Node[], extent?: CoordinateExtent) => void /** parses edges and adds to state */ addEdges: (edgesOrConnections: (Edge | Connection)[]) => void + /** updates an edge */ updateEdge: (oldEdge: GraphEdge, newConnection: Connection) => boolean applyEdgeChanges: (changes: EdgeChange[]) => GraphEdge[] applyNodeChanges: (changes: NodeChange[]) => GraphNode[] @@ -137,17 +138,13 @@ export type ComputedGetters = { [key in keyof Getters]: Co interface StoreBase { state: State - actions: Actions - getters: ComputedGetters - hooksOn: FlowHooksOn } -export type Store = StoreBase & ToRefs> & Actions & ComputedGetters -export type FlowStore = StoreBase & State & Actions & Getters +export type Store = StoreBase & State & Actions & Getters export type UseVueFlow = { id: string - store: FlowStore + store: Store } & FlowHooksOn & ToRefs> & ComputedGetters & diff --git a/package/src/utils/graph.ts b/package/src/utils/graph.ts index 01aa7f68..5c9fe4ec 100644 --- a/package/src/utils/graph.ts +++ b/package/src/utils/graph.ts @@ -9,7 +9,7 @@ import { FlowElements, FlowExportObject, State, - FlowStore, + Store, GraphEdge, GraphNode, Node, @@ -207,7 +207,7 @@ export const pointToRendererPoint = ( return position } -export const onLoadProject = (currentStore: FlowStore) => (position: XYPosition) => +export const onLoadProject = (currentStore: Store) => (position: XYPosition) => pointToRendererPoint(position, currentStore.transform, currentStore.snapToGrid, currentStore.snapGrid) const getBoundsOfBoxes = (box1: Box, box2: Box): Box => ({ @@ -287,9 +287,9 @@ export const getConnectedEdges = (nodes: GraphNode[], edges: GraphEdge[]) => { return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target)) } -export const onLoadGetNodes = (store: FlowStore) => (): GraphNode[] => store.nodes -export const onLoadGetEdges = (store: FlowStore) => (): GraphEdge[] => store.edges -export const onLoadGetElements = (store: FlowStore) => (): FlowElements => [...store.nodes, ...store.edges] +export const onLoadGetNodes = (store: Store) => (): GraphNode[] => store.nodes +export const onLoadGetEdges = (store: Store) => (): GraphEdge[] => store.edges +export const onLoadGetElements = (store: Store) => (): FlowElements => [...store.nodes, ...store.edges] export const onLoadToObject = (store: State) => (): FlowExportObject => { // we have to stringify/parse so objects containing refs (like nodes and edges) can potentially be saved in a storage