From e64f6b7bc6edd6260af0a259761f57d29a86ed2d Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Wed, 15 Dec 2021 10:10:37 +0100 Subject: [PATCH] update(types)!: Rename FlowActions/FlowGetters etc. to Actions, Getters Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com> --- cypress/integration/1-store/setState.spec.ts | 6 +-- src/store/actions.ts | 43 ++++++++------------ src/store/getters.ts | 14 +++---- src/store/state.ts | 7 ++-- src/store/store.ts | 10 +++-- src/types/flow.ts | 11 +++-- src/types/store.ts | 17 ++++---- src/utils/graph.ts | 4 +- 8 files changed, 56 insertions(+), 56 deletions(-) diff --git a/cypress/integration/1-store/setState.spec.ts b/cypress/integration/1-store/setState.spec.ts index 5c83ea89..2ba5ff99 100644 --- a/cypress/integration/1-store/setState.spec.ts +++ b/cypress/integration/1-store/setState.spec.ts @@ -1,5 +1,5 @@ import { useVueFlow } from '~/composables' -import { FlowState, FlowStore } from '~/types' +import { State, FlowStore } from '~/types' import useState from '~/store/state' describe('test store state', () => { let store: FlowStore @@ -13,8 +13,8 @@ describe('test store state', () => { it('has default initial state', () => { const initial = useState() Object.keys(store.state).forEach((state) => { - const storedState = store[state] - const initialVal = initial[state] + const storedState = store[state] + const initialVal = initial[state] if (state === 'initialized') return expect(storedState).to.be.true expect(JSON.stringify(storedState)).to.eq(JSON.stringify(initialVal)) }) diff --git a/src/store/actions.ts b/src/store/actions.ts index 83e45304..a25e41c2 100644 --- a/src/store/actions.ts +++ b/src/store/actions.ts @@ -1,14 +1,4 @@ -import { - CoordinateExtent, - EdgeChange, - FlowActions, - FlowGetters, - FlowState, - GraphNode, - Node, - NodeChange, - NodeDimensionChange, -} from '~/types' +import { CoordinateExtent, EdgeChange, Actions, Getters, State, GraphNode, Node, NodeChange, NodeDimensionChange } from '~/types' import { createPositionChange, createSelectionChange, @@ -50,8 +40,8 @@ export const parseChildren = ( } } -export default (state: FlowState, getters: FlowGetters): FlowActions => { - const updateNodePosition: FlowActions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => { +export default (state: State, getters: Getters): Actions => { + const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => { const changes: NodeDimensionChange[] = [] state.nodes.forEach((node) => { @@ -68,7 +58,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => { if (changes.length) state.hooks.nodesChange.trigger(changes) } - const addSelectedNodes: FlowActions['addSelectedNodes'] = (nodes) => { + const addSelectedNodes: Actions['addSelectedNodes'] = (nodes) => { const selectedNodesIds = nodes.map((n) => n.id) let changedNodes: NodeChange[] @@ -77,7 +67,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => { if (changedNodes.length) state.hooks.nodesChange.trigger(changedNodes) } - const addSelectedEdges: FlowActions['addSelectedEdges'] = (edges) => { + const addSelectedEdges: Actions['addSelectedEdges'] = (edges) => { const selectedEdgesIds = edges.map((e) => e.id) let changedEdges: EdgeChange[] @@ -86,27 +76,27 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => { if (changedEdges.length) state.hooks.edgesChange.trigger(changedEdges) } - const addSelectedElements: FlowActions['addSelectedElements'] = (elements) => { + const addSelectedElements: Actions['addSelectedElements'] = (elements) => { addSelectedNodes(elements.filter(isGraphNode)) addSelectedEdges(elements.filter(isGraphEdge)) } - const setMinZoom: FlowActions['setMinZoom'] = (minZoom: any) => { + const setMinZoom: Actions['setMinZoom'] = (minZoom: any) => { state.d3Zoom?.scaleExtent([minZoom, state.maxZoom]) state.minZoom = minZoom } - const setMaxZoom: FlowActions['setMaxZoom'] = (maxZoom: any) => { + const setMaxZoom: Actions['setMaxZoom'] = (maxZoom: any) => { state.d3Zoom?.scaleExtent([state.minZoom, maxZoom]) state.maxZoom = maxZoom } - const setTranslateExtent: FlowActions['setTranslateExtent'] = (translateExtent: any) => { + const setTranslateExtent: Actions['setTranslateExtent'] = (translateExtent: any) => { state.d3Zoom?.translateExtent(translateExtent) state.translateExtent = translateExtent } - const resetSelectedElements: FlowActions['resetSelectedElements'] = () => { + const resetSelectedElements: Actions['resetSelectedElements'] = () => { addSelectedNodes([]) addSelectedEdges([]) } - const setConnectionNodeId: FlowActions['setConnectionNodeId'] = ({ + const setConnectionNodeId: Actions['setConnectionNodeId'] = ({ connectionHandleId, connectionHandleType, connectionNodeId, @@ -115,13 +105,13 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => { state.connectionHandleId = connectionHandleId state.connectionHandleType = connectionHandleType } - const setInteractive: FlowActions['setInteractive'] = (isInteractive) => { + const setInteractive: Actions['setInteractive'] = (isInteractive) => { state.nodesDraggable = isInteractive state.nodesConnectable = isInteractive state.elementsSelectable = isInteractive } - const setNodes: FlowActions['setNodes'] = (nodes, extent?: CoordinateExtent) => { + const setNodes: Actions['setNodes'] = (nodes, extent?: CoordinateExtent) => { nodes = nodes.flatMap((node) => { const children: GraphNode[] = [] parseChildren(node, undefined, children, extent ?? state.nodeExtent, getters.getNode.value) @@ -129,7 +119,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => { }) state.nodes = nodes } - const setEdges: FlowActions['setEdges'] = (edges) => { + const setEdges: Actions['setEdges'] = (edges) => { state.edges = edges.map((edge) => { const sourceNode = getters.getNode.value(edge.source)! const targetNode = getters.getNode.value(edge.target)! @@ -146,13 +136,13 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => { }) } - const setElements: FlowActions['setElements'] = (elements, extent) => { + const setElements: Actions['setElements'] = (elements, extent) => { if (!state.initialized && !elements.length) return setNodes(elements.filter(isNode), extent) setEdges(elements.filter(isEdge)) } - const setState: FlowActions['setState'] = (opts) => { + const setState: Actions['setState'] = (opts) => { if (typeof opts.modelValue !== 'undefined') setElements(opts.modelValue, opts.nodeExtent ?? state.nodeExtent) if (typeof opts.nodes !== 'undefined') setNodes(opts.nodes, opts.nodeExtent ?? state.nodeExtent) if (typeof opts.edges !== 'undefined') setEdges(opts.edges) @@ -181,6 +171,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => { 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.fitViewOnInit !== 'undefined') state.fitViewOnInit = opts.fitViewOnInit if (!state.paneReady) until(() => state.d3Zoom) .not.toBeUndefined() diff --git a/src/store/getters.ts b/src/store/getters.ts index a29b4097..bee2d6cd 100644 --- a/src/store/getters.ts +++ b/src/store/getters.ts @@ -1,8 +1,8 @@ import { defaultEdgeTypes, defaultNodeTypes } from './state' -import { FlowGetters, FlowState, GraphEdge, GraphNode } from '~/types' +import { Getters, State, GraphEdge, GraphNode } from '~/types' import { getNodesInside, isEdgeVisible } from '~/utils' -export default (state: FlowState): FlowGetters => { +export default (state: State): Getters => { const getEdgeTypes = computed(() => { const edgeTypes: Record = { ...defaultEdgeTypes, @@ -69,17 +69,17 @@ export default (state: FlowState): FlowGetters => { return [] }) - const getSelectedNodes: FlowGetters['getSelectedNodes'] = computed(() => state.nodes.filter((n) => n.selected)) - const getSelectedEdges: FlowGetters['getSelectedEdges'] = computed(() => state.edges.filter((e) => e.selected)) - const getSelectedElements: FlowGetters['getSelectedElements'] = computed(() => [ + const getSelectedNodes: Getters['getSelectedNodes'] = computed(() => state.nodes.filter((n) => n.selected)) + const getSelectedEdges: Getters['getSelectedEdges'] = computed(() => state.edges.filter((e) => e.selected)) + const getSelectedElements: Getters['getSelectedElements'] = computed(() => [ ...(getSelectedNodes.value ?? []), ...(getSelectedEdges.value ?? []), ]) const nodeIds = computed(() => state.nodes.map((n) => n.id)) const edgeIds = computed(() => state.edges.map((e) => e.id)) - const getNode: FlowGetters['getNode'] = computed(() => (id: string) => state.nodes[nodeIds.value.indexOf(id)]) - const getEdge: FlowGetters['getEdge'] = computed(() => (id: string) => state.edges[edgeIds.value.indexOf(id)]) + const getNode: Getters['getNode'] = computed(() => (id: string) => state.nodes[nodeIds.value.indexOf(id)]) + const getEdge: Getters['getEdge'] = computed(() => (id: string) => state.edges[edgeIds.value.indexOf(id)]) return { getNode, diff --git a/src/store/state.ts b/src/store/state.ts index a4cbb5a4..308d051d 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -1,5 +1,5 @@ import { createHooks } from './hooks' -import { ConnectionMode, FlowState, PanOnScrollMode, DefaultNodeTypes, DefaultEdgeTypes, ConnectionLineType } from '~/types' +import { ConnectionMode, State, PanOnScrollMode, DefaultNodeTypes, DefaultEdgeTypes, ConnectionLineType } from '~/types' import { DefaultNode, InputNode, OutputNode, BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components' import { isEdge, isNode } from '~/utils' @@ -16,8 +16,8 @@ export const defaultEdgeTypes: DefaultEdgeTypes = { smoothstep: SmoothStepEdge, } -export default (opts?: Partial): FlowState => { - const state: FlowState = { +export default (opts?: Partial): State => { + const state: State = { nodes: [], edges: [], @@ -129,6 +129,7 @@ export default (opts?: Partial): FlowState => { if (typeof opts.minZoom !== 'undefined') state.minZoom = opts.minZoom if (typeof opts.translateExtent !== 'undefined') state.translateExtent = opts.translateExtent if (typeof opts.applyDefault !== 'undefined') state.applyDefault = opts.applyDefault + if (typeof opts.fitViewOnInit !== 'undefined') state.fitViewOnInit = opts.fitViewOnInit } return state diff --git a/src/store/store.ts b/src/store/store.ts index 3d0ec3f0..fb0c7845 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -1,10 +1,10 @@ import useState from './state' import useActions from './actions' import useGetters from './getters' -import { FlowExportObject, FlowHooksOn, FlowOptions, FlowState, GraphEdge, GraphNode, Store } from '~/types' +import { FlowExportObject, FlowHooksOn, FlowOptions, State, GraphEdge, GraphNode, Store } from '~/types' import { isEdge, isNode, onLoadToObject } from '~/utils' -const useFlowStore = (preloadedState: FlowState): Store => { +const useFlowStore = (preloadedState: State): Store => { const state = reactive(useState(preloadedState)) const getters = useGetters(state) const actions = useActions(state, getters) @@ -17,6 +17,8 @@ const useFlowStore = (preloadedState: FlowState): Store => { return { state, + actions, + getters, hooksOn, ...toRefs(state), ...getters, @@ -24,11 +26,11 @@ const useFlowStore = (preloadedState: FlowState): Store => { } } -export default (id: string, options?: FlowOptions) => { +export default (id: string, options?: FlowOptions): Store => { const withStorage = options?.storageKey ?? false let storedState = ref() const storageKey = id ?? options?.id - const preloadedState = options as FlowState + const preloadedState = options as State if (withStorage) { storedState = useStorage(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 }) if (storedState.value) { diff --git a/src/types/flow.ts b/src/types/flow.ts index c5fdf9e6..83709a42 100644 --- a/src/types/flow.ts +++ b/src/types/flow.ts @@ -3,7 +3,7 @@ import { GraphEdge, Edge } from './edge' import { GraphNode, CoordinateExtent, Node } from './node' import { Connection, ConnectionLineType, ConnectionMode } from './connection' import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom' -import { FlowActions, FlowStore } from './store' +import { Actions, Getters, State, FlowStore } from './store' import { EdgeChange, FlowHooksOn, NodeChange } from './hooks' export type FlowElement = GraphNode | GraphEdge @@ -140,21 +140,24 @@ export interface UseElementsStateOptions extends UseStateOptions { export type UseNodesState = { nodes: GraphNode[] applyNodeChanges: (changes: NodeChange[]) => GraphNode[] - setNodes: FlowActions['setNodes'] + setNodes: Actions['setNodes'] addNodes: (nodes: Node[], extent?: CoordinateExtent) => GraphNode[] OnNodesChange: FlowHooksOn['OnNodesChange'] } export type UseEdgesState = { edges: GraphEdge[] applyEdgeChanges: (changes: EdgeChange[]) => GraphEdge[] - setEdges: FlowActions['setEdges'] + setEdges: Actions['setEdges'] addEdges: (params: (Edge | Connection)[]) => GraphEdge[] updateEdge: (oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false OnEdgesChange: FlowHooksOn['OnEdgesChange'] } export type UseElementsState = UseNodesState & UseEdgesState + export type UseVueFlow = { id: string store: FlowStore } & FlowHooksOn & - ToRefs> + ToRefs> & + Getters & + Actions diff --git a/src/types/store.ts b/src/types/store.ts index cc6e322e..28908c0b 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 FlowState extends Omit, 'id' | 'elements'> { +export interface State extends Omit, 'id' | 'elements'> { hooks: FlowHooks instance?: FlowInstance @@ -69,7 +69,7 @@ export interface FlowState extends Omit, 'id' vueFlowVersion: string } -export interface FlowActions { +export interface Actions { setElements: (elements: Elements, extent?: CoordinateExtent) => void setNodes: (nodes: Node[], extent?: CoordinateExtent) => void setEdges: (edges: Edge[]) => void @@ -86,7 +86,7 @@ export interface FlowActions { updateNodePosition: ({ id, diff, dragging }: { id?: string; diff?: XYPosition; dragging?: boolean }) => void } -export interface FlowGetters { +export interface Getters { getEdgeTypes: ComputedRef> getNodeTypes: ComputedRef> getNodes: ComputedRef[]> @@ -97,8 +97,11 @@ export interface FlowGetters { getSelectedNodes: ComputedRef[]> getSelectedEdges: ComputedRef[]> } - -export type Store = { state: FlowState; hooksOn: FlowHooksOn } & ToRefs> & - FlowActions & - FlowGetters +interface StoreBase { + state: State + actions: Actions + getters: Getters + hooksOn: FlowHooksOn +} +export type Store = StoreBase & ToRefs> & Actions & Getters export type FlowStore = UnwrapNestedRefs> diff --git a/src/utils/graph.ts b/src/utils/graph.ts index cd68a1ec..e5a34ae4 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -8,7 +8,7 @@ import { Elements, FlowElements, FlowExportObject, - FlowState, + State, FlowStore, GraphEdge, GraphNode, @@ -291,7 +291,7 @@ export const onLoadGetNodes = (store: FlowStore) => (): GraphNode[] => store.nod export const onLoadGetEdges = (store: FlowStore) => (): GraphEdge[] => store.edges export const onLoadGetElements = (store: FlowStore) => (): FlowElements => [...store.nodes, ...store.edges] -export const onLoadToObject = (store: FlowState) => (): FlowExportObject => { +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 return JSON.parse( JSON.stringify({