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

update: remove useHooks usage

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-18 23:17:09 +01:00
parent 99dbd4b2cc
commit 470ab3782a
16 changed files with 97 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/EdgeWithButton/ButtonEdge.vue
+3 -4
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { useHooks, useStore, getEdgeCenter, getBezierPath, getMarkerEnd, ArrowHeadType, Edge, ElementId, Position } from '~/index'
import { getEdgeCenter, getBezierPath, getMarkerEnd, ArrowHeadType, Edge, ElementId, Position, useVueFlow } from '~/index'
interface CustomEdgeProps<T = any> extends Edge<T> {
id: ElementId
@@ -15,12 +15,11 @@ interface CustomEdgeProps<T = any> extends Edge<T> {
}
const props = defineProps<CustomEdgeProps>()
const store = useStore()
const hooks = useHooks()
const store = useVueFlow()
const onEdgeClick = (evt: Event, id: string) => {
const edge = store.edges.find((edge) => edge.id === id)
if (edge) {
hooks.elementsRemove.trigger([edge])
store.hooks.elementsRemove.trigger([edge])
}
evt.stopPropagation()
alert(`remove ${id}`)
src/components/Edges/Edge.vue
+8 -9
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { useHandle, useHooks, useStore } from '../../composables'
import { useHandle, useStore } from '../../composables'
import { ConnectionMode, Edge, EdgePositions, EdgeType, Position } from '../../types'
import EdgeAnchor from './EdgeAnchor.vue'
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
@@ -15,7 +15,6 @@ interface EdgeProps {
const props = withDefaults(defineProps<EdgeProps>(), {})
const store = useStore()
const hooks = useHooks()
const onEdgeClick = (event: MouseEvent) => {
if (store.elementsSelectable) {
@@ -23,20 +22,20 @@ const onEdgeClick = (event: MouseEvent) => {
store.addSelectedElements([props.edge])
}
hooks.edgeClick.trigger({ event, edge: props.edge })
store.hooks.edgeClick.trigger({ event, edge: props.edge })
}
const onEdgeContextMenu = (event: MouseEvent) =>
hooks.edgeContextMenu.trigger({
store.hooks.edgeContextMenu.trigger({
event,
edge: props.edge,
})
const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: props.edge })
const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: props.edge })
const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
const handler = useHandle()
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
@@ -45,9 +44,9 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
const isValidConnection = () => true
const isTarget = isSourceHandle
hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
store.hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
handler(event, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source', (connection) =>
hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
store.hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
)
}
src/components/Handle/Handle.vue
+2 -3
View File
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { useHandle, useHooks, useStore } from '../../composables'
import { useHandle, useStore } from '../../composables'
import { Position, ValidConnectionFunc } from '../../types'
import { NodeId } from '~/context'
import { NodeId } from '../../context'
interface HandleProps {
id?: string
@@ -19,7 +19,6 @@ const props = withDefaults(defineProps<HandleProps>(), {
})
const store = useStore()
const hooks = useHooks()
const nodeId = inject(NodeId)!
const handler = useHandle()
src/components/Nodes/Node.vue
+11 -12
View File
@@ -1,8 +1,8 @@
<script lang="ts" setup>
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { useHooks, useStore } from '../../composables'
import { useStore } from '../../composables'
import { Node, NodeType, SnapGrid } from '../../types'
import { NodeId } from '~/context'
import { NodeId } from '../../context'
interface NodeProps {
node: Node
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<NodeProps>(), {
})
const store = useStore()
const hooks = useHooks()
provide(NodeId, props.node.id)
const nodeElement = templateRef<HTMLDivElement>('node-element', null)
@@ -33,15 +32,15 @@ const connectable = computed(() =>
const scale = computed(() => store.transform[2])
const onMouseEnterHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
const onMouseMoveHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: props.node }))
props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
const onMouseLeaveHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: props.node }))
props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
const onContextMenuHandler = () => (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: props.node })
const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
const onSelectNodeHandler = (event: MouseEvent) => {
if (!draggable.value) {
@@ -51,13 +50,13 @@ const onSelectNodeHandler = (event: MouseEvent) => {
if (!props.selected) store.addSelectedElements([n])
}
hooks.nodeClick.trigger({ event, node: n })
store.hooks.nodeClick.trigger({ event, node: n })
}
}
const onDragStart: DraggableEventListener = ({ event }) => {
const n = props.node
hooks.nodeDragStart.trigger({ event, node: n })
store.hooks.nodeDragStart.trigger({ event, node: n })
if (props.selectNodesOnDrag && selectable) {
store.unsetNodesSelection()
@@ -73,7 +72,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
const n = props.node
n.position.x += data.deltaX
n.position.y += data.deltaY
hooks.nodeDrag.trigger({ event, node: n })
store.hooks.nodeDrag.trigger({ event, node: n })
store.updateNodePosDiff({
id: props.node.id,
@@ -93,7 +92,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
if (selectable.value && !props.selectNodesOnDrag && !props.selected) {
store.addSelectedElements([n])
}
hooks.nodeClick.trigger({ event, node: n })
store.hooks.nodeClick.trigger({ event, node: n })
return
}
@@ -103,7 +102,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
isDragging: false,
})
hooks.nodeDragStop.trigger({ event, node: n })
store.hooks.nodeDragStop.trigger({ event, node: n })
}
onMounted(() => {
src/components/NodesSelection/NodesSelection.vue
+5 -6
View File
@@ -1,11 +1,10 @@
<script lang="ts" setup>
import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
import { useHooks, useStore } from '../../composables'
import { useStore } from '../../composables'
import { Node } from '../../types'
import { getRectOfNodes, isNode } from '../../utils'
const store = useStore()
const hooks = useHooks()
const selectedNodes = store.selectedElements
? store.selectedElements.filter(isNode).map((selectedNode) => {
@@ -29,12 +28,12 @@ const innerStyle = {
const onStart: DraggableEventListener = ({ event }) => {
const nodes = selectedNodes
hooks.selectionDragStart.trigger({ event, nodes })
store.hooks.selectionDragStart.trigger({ event, nodes })
}
const onDrag: DraggableEventListener = ({ event, data }) => {
const nodes = selectedNodes
hooks.selectionDrag.trigger({ event, nodes })
store.hooks.selectionDrag.trigger({ event, nodes })
store.updateNodePosDiff({
diff: {
x: data.deltaX,
@@ -46,7 +45,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
const onStop: DraggableEventListener = ({ event }) => {
const nodes = selectedNodes
hooks.selectionDragStop.trigger({ event, nodes })
store.hooks.selectionDragStop.trigger({ event, nodes })
store.updateNodePosDiff({
isDragging: false,
})
@@ -54,7 +53,7 @@ const onStop: DraggableEventListener = ({ event }) => {
const onContextMenu = (event: MouseEvent) => {
const nodes = selectedNodes
hooks.selectionContextMenu.trigger({ event, nodes })
store.hooks.selectionContextMenu.trigger({ event, nodes })
}
const transform = computed(() => store.transform)
src/composables/useHandle.ts
+5 -7
View File
@@ -1,5 +1,4 @@
import useStore from './useStore'
import useHooks from './useHooks'
import { getHostForElement } from '~/utils'
import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
@@ -70,7 +69,6 @@ const resetRecentHandle = (hoveredHandle: Element): void => {
export default () => {
const store = useStore()
const hooks = useHooks()
return (
event: MouseEvent,
@@ -107,7 +105,7 @@ export default () => {
connectionHandleId: handleId,
connectionHandleType: handleType,
})
hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } })
store.hooks.connectStart.trigger({ event, params: { nodeId, handleId, handleType } })
function onMouseMove(event: MouseEvent) {
store.connectionPosition.x = event.clientX - containerBounds.left
@@ -147,16 +145,16 @@ export default () => {
doc,
)
hooks.connectStop.trigger(event)
store.hooks.connectStop.trigger(event)
if (isValid) {
hooks.connect.trigger(connection)
store.hooks.connect.trigger(connection)
onEdgeUpdate?.(connection)
}
hooks.connectEnd.trigger(event)
store.hooks.connectEnd.trigger(event)
if (elementEdgeUpdaterType) hooks.edgeUpdateEnd.trigger(event)
if (elementEdgeUpdaterType) store.hooks.edgeUpdateEnd.trigger(event)
resetRecentHandle(recentHoveredHandle)
store.setConnectionNodeId({ connectionNodeId: undefined, connectionHandleId: undefined, connectionHandleType: undefined })
src/composables/useHooks.ts
+2 -3
View File
@@ -1,4 +1,3 @@
import useStore from './useStore'
import {
Connection,
Edge,
@@ -10,6 +9,7 @@ import {
OnConnectStartParams,
FlowInstance,
FlowEvents,
FlowStore,
} from '~/types'
import { Hooks } from '~/context'
@@ -66,10 +66,9 @@ const bind = (emit: EmitFunc, hooks: FlowHooks) => {
}
}
export default (emit?: EmitFunc) => {
export default (store: FlowStore, emit?: EmitFunc) => {
let hooks = inject(Hooks)!
if (!hooks) {
const store = useStore()
if (import.meta.env.DEV) console.warn('hooks context not found; creating default hooks')
hooks = store.hooks
if (typeof emit === 'function') bind(emit, hooks)
src/composables/useStore.ts
+25 -4
View File
@@ -1,16 +1,37 @@
import { FlowOptions } from '~/types'
import { FlowExportObject, FlowOptions } from '~/types'
import { useFlowStore, initialState } from '~/store'
import { Store } from '~/context'
import { onLoadToObject } from '~/utils'
let id = 0
export default (options?: Partial<FlowOptions>) => {
let store = inject(Store)!
const withStorage = options?.storageKey ?? false
if (!store) {
if (import.meta.env.DEV) console.warn('store context not found; creating default store')
store = useFlowStore({
...initialState(),
let storedState = ref<FlowExportObject>()
const initial = initialState()
const storageKey = typeof options?.storageKey === 'string' ? options.storageKey : options?.id ?? `vue-flow-${id++}`
if (withStorage) {
storedState = useStorage(storageKey, {} as FlowExportObject)
if (storedState.value) {
initial.elements = storedState.value.elements ?? options?.elements ?? []
if (storedState.value.position && storedState.value.zoom)
initial.transform = [storedState.value.position[0], storedState.value.position[1], storedState.value.zoom]
}
}
const preloadedState = {
...initial,
...options,
})()
}
store = useFlowStore(storageKey, preloadedState)()
if (withStorage && storageKey === store.$id) {
const toObject = onLoadToObject(store)
store.$subscribe(() => {
storedState.value = toObject()
})
}
provide(Store, store)
}
src/composables/useVueFlow.ts
+5 -5
View File
@@ -1,10 +1,10 @@
import useHooks from './useHooks'
import useStore from './useStore'
import { EmitFunc } from '~/types'
import { EmitFunc, FlowOptions } from '~/types'
export const initFlow = (emit: EmitFunc) => {
const store = useStore()
const hooks = useHooks(emit)
export const initFlow = (emit: EmitFunc, options: Partial<FlowOptions>) => {
const store = useStore(options)
const hooks = useHooks(store, emit)
return {
store,
@@ -12,4 +12,4 @@ export const initFlow = (emit: EmitFunc) => {
}
}
export default () => useStore()
export default (options?: Partial<FlowOptions>) => useStore(options)
src/container/SelectionPane/SelectionPane.vue
+5 -6
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { ElementId, FlowElement, KeyCode } from '../../types'
import { useHooks, useStore, useKeyPress } from '../../composables'
import { useStore, useKeyPress } from '../../composables'
import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
import UserSelection from '../../components/UserSelection/UserSelection.vue'
import { getConnectedEdges, isNode } from '../../utils'
@@ -17,17 +17,16 @@ const props = withDefaults(defineProps<SelectionPaneProps>(), {
})
const store = useStore()
const hooks = useHooks()
const onClick = (event: MouseEvent) => {
hooks.paneClick.trigger(event)
store.hooks.paneClick.trigger(event)
store.unsetNodesSelection()
store.resetSelectedElements()
}
const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event)
const onContextMenu = (event: MouseEvent) => store.hooks.paneContextMenu.trigger(event)
const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event)
const onWheel = (event: WheelEvent) => store.hooks.paneScroll.trigger(event)
const selectionKeyPresed = ref(false)
@@ -41,7 +40,7 @@ onMounted(() => {
new Map<ElementId, FlowElement>(),
)
hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))
store.hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))
store.unsetNodesSelection()
store.resetSelectedElements()
}
src/container/VueFlow/VueFlow.vue
+10 -10
View File
@@ -13,7 +13,6 @@ import {
TranslateExtent,
NodeExtent,
FlowOptions,
FlowEvents,
} from '../../types'
import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
@@ -21,7 +20,7 @@ import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
import { initFlow } from '~/composables'
import { createHooks, initFlow } from '../../composables'
export interface FlowProps extends FlowOptions {
elements: Elements
@@ -59,6 +58,7 @@ export interface FlowProps extends FlowOptions {
edgeUpdaterRadius?: number
edgeTypesId?: string
nodeTypesId?: string
storage?: string
}
const props = withDefaults(defineProps<FlowProps>(), {
@@ -100,9 +100,8 @@ const props = withDefaults(defineProps<FlowProps>(), {
edgeTypesId: '1',
nodeTypesId: '1',
})
export type DefineFlowEvents = { (event: keyof FlowEvents, flowEvent: FlowEvents[keyof FlowEvents]): void }
const emit = defineEmits<DefineFlowEvents>()
const emit = defineEmits(Object.keys(createHooks()))
const defaultNodeTypes: Record<string, NodeType> = {
input: InputNode as NodeType,
@@ -117,11 +116,10 @@ const defaultEdgeTypes: Record<string, EdgeType> = {
smoothstep: SmoothStepEdge as EdgeType,
}
const { store, hooks } = initFlow(emit)
const { store, hooks } = initFlow(emit, props)
const init = (opts: typeof props) => {
store.$state = { ...store.$state, ...opts }
store.setElements(opts.elements)
store.$state = { ...store.$state, ...(props as any) }
store.setMinZoom(opts.minZoom)
store.setMaxZoom(opts.maxZoom)
store.setTranslateExtent(opts.translateExtent)
@@ -147,10 +145,12 @@ invoke(async () => {
watch(
elements,
(val, oldVal) => {
const hasDiff = diff(val, oldVal)
if (hasDiff.length > 0) store.setElements(val)
nextTick(() => {
const hasDiff = diff(val, oldVal)
if (hasDiff.length > 0) store.setElements(val)
})
},
{ flush: 'pre', deep: true },
{ flush: 'post', deep: true },
)
const nodeTypes = computed(() => {
src/container/ZoomPane/ZoomPane.vue
+5 -6
View File
@@ -3,7 +3,7 @@ import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
import { get, invoke } from '@vueuse/core'
import { pointer, select } from 'd3-selection'
import { FlowInstance, FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '../../composables'
import { useKeyPress, useStore, useZoomPanHelper } from '../../composables'
import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
interface ZoomPaneProps {
@@ -34,7 +34,6 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
paneMoveable: true,
})
const store = useStore()
const hooks = useHooks()
const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
@@ -75,7 +74,7 @@ invoke(async () => {
if (viewChanged(transform.value, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform)
transform.value = flowTransform
hooks.moveStart.trigger(flowTransform)
store.hooks.moveStart.trigger(flowTransform)
}
})
@@ -83,7 +82,7 @@ invoke(async () => {
if (viewChanged(transform.value, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform)
transform.value = flowTransform
hooks.moveEnd.trigger(flowTransform)
store.hooks.moveEnd.trigger(flowTransform)
}
})
@@ -95,7 +94,7 @@ invoke(async () => {
if (viewChanged(transform.value, event.transform)) {
const flowTransform = eventToFlowTransform(event.transform)
transform.value = flowTransform
hooks.move.trigger(flowTransform)
store.hooks.move.trigger(flowTransform)
}
})
}
@@ -196,7 +195,7 @@ invoke(async () => {
getElements: onLoadGetElements(store),
toObject: onLoadToObject(store),
}
hooks.load.trigger(instance)
store.hooks.load.trigger(instance)
})
watch(
src/store/flowStore.ts
+5 -3
View File
@@ -19,7 +19,6 @@ type NextElements = {
nextEdges: Edge[]
}
const pinia = createPinia()
let id = 0
const parseElements = (elements: Elements, nodes: Node[], edges: Edge[], nodeExtent: NodeExtent) => {
const nextElements: NextElements = {
@@ -68,11 +67,14 @@ const parseElements = (elements: Elements, nodes: Node[], edges: Edge[], nodeExt
return nextElements
}
export default function flowStore(preloadedState: FlowState): StoreDefinition<string, FlowState, any, FlowActions> {
export default function flowStore(id: string, preloadedState: FlowState): StoreDefinition<string, FlowState, any, FlowActions> {
setActivePinia(pinia)
const { nextEdges, nextNodes } = parseElements(preloadedState.elements, [], [], preloadedState.nodeExtent)
preloadedState.nodes = nextNodes
preloadedState.edges = nextEdges
return defineStore({
id: `vue-flow-${id++}`,
id: id ?? 'vue-flow',
state: () => ({
...preloadedState,
}),
src/store/index.ts
+1
View File
@@ -59,6 +59,7 @@ export const initialState = (): FlowState => ({
isReady: false,
hooks: createHooks(),
storageKey: undefined,
vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
})
src/types/store.ts
+4 -3
View File
@@ -1,14 +1,14 @@
import { Store } from 'pinia'
import { Dimensions, ElementId, Elements, Rect, SelectionRect, SnapGrid, Transform, XYPosition } from './types'
import { Dimensions, ElementId, Elements, FlowOptions, Rect, SelectionRect, SnapGrid, Transform, XYPosition } from './types'
import { HandleType } from './handle'
import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc } from './connection'
import { Edge, EdgeType } from './edge'
import { Node, NodeExtent, NodeType, TranslateExtent } from './node'
import { FlowActions } from './actions'
import { D3Selection, D3Zoom, D3ZoomHandler } from './panel'
import { FlowHooks } from '~/types/hooks'
import { FlowHooks } from './hooks'
export interface FlowState {
export interface FlowState extends FlowOptions {
dimensions: Dimensions
transform: Transform
elements: Elements
@@ -56,6 +56,7 @@ export interface FlowState {
isReady: boolean
hooks: FlowHooks
storageKey?: string
}
export type FlowStore = Store<string, FlowState, any, FlowActions>
src/types/types.ts
+1
View File
@@ -124,4 +124,5 @@ export interface FlowOptions extends Omit<HTMLAttributes, 'onLoad'> {
edgeUpdaterRadius?: number
nodeTypesId?: string
edgeTypesId?: string
storageKey?: string
}