alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update(types)!: Rename FlowActions/FlowGetters etc. to Actions, Getters

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-20 19:29:52 +01:00
parent a62a891243
commit e64f6b7bc6
8 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/actions.ts
+17 -26
View File
@@ -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 = <GraphNode[]>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()
src/store/getters.ts
+7 -7
View File
@@ -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<string, any> = {
...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,
src/store/state.ts
+4 -3
View File
@@ -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>): FlowState => {
const state: FlowState = {
export default (opts?: Partial<State>): State => {
const state: State = {
nodes: [],
edges: [],
@@ -129,6 +129,7 @@ export default (opts?: Partial<FlowState>): 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
src/store/store.ts
+6 -4
View File
@@ -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<FlowExportObject>()
const storageKey = id ?? options?.id
const preloadedState = options as FlowState
const preloadedState = options as State
if (withStorage) {
storedState = useStorage<FlowExportObject>(storageKey, { edges: [], nodes: [], position: [0, 0], zoom: 0 })
if (storedState.value) {