refactor: import Emits type
This commit is contained in:
@@ -1,22 +1,10 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { D3ZoomEvent } from 'd3-zoom'
|
|
||||||
import Viewport from '../Viewport/Viewport.vue'
|
import Viewport from '../Viewport/Viewport.vue'
|
||||||
import { useHooks } from '../../store'
|
import { useHooks } from '../../store'
|
||||||
import { useVueFlow } from '../../composables'
|
import { useVueFlow } from '../../composables'
|
||||||
import type { FlowElements, FlowProps } from '../../types/flow'
|
import type { FlowProps } from '../../types/flow'
|
||||||
import { Slots } from '../../context'
|
import { Slots } from '../../context'
|
||||||
import type {
|
import type { Emits, VueFlowStore } from '../../types'
|
||||||
Connection,
|
|
||||||
EdgeChange,
|
|
||||||
EdgeUpdateEvent,
|
|
||||||
GraphEdge,
|
|
||||||
GraphNode,
|
|
||||||
NodeChange,
|
|
||||||
OnConnectStartParams,
|
|
||||||
ViewpaneTransform,
|
|
||||||
VueFlowStore,
|
|
||||||
} from '../../types'
|
|
||||||
import type { EdgeMouseEvent, NodeDragEvent, NodeMouseEvent } from '../../types/hooks'
|
|
||||||
import useWatch from './watch'
|
import useWatch from './watch'
|
||||||
|
|
||||||
const props = withDefaults(defineProps<FlowProps>(), {
|
const props = withDefaults(defineProps<FlowProps>(), {
|
||||||
@@ -41,59 +29,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
|
|||||||
elevateEdgesOnSelect: undefined,
|
elevateEdgesOnSelect: undefined,
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<Emits>()
|
||||||
(event: 'nodesChange', changes: NodeChange[]): void
|
|
||||||
(event: 'edgesChange', changes: EdgeChange[]): void
|
|
||||||
(event: 'nodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'nodeClick', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'nodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'nodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'nodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'nodeContextMenu', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'nodeDragStart', nodeDragEvent: NodeDragEvent): void
|
|
||||||
(event: 'nodeDrag', nodeDragEvent: NodeDragEvent): void
|
|
||||||
(event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
|
|
||||||
(event: 'miniMapNodeClick', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'miniMapNodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'miniMapNodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'miniMapNodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'miniMapNodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
|
|
||||||
(event: 'connect', connectionEvent: Connection): void
|
|
||||||
(
|
|
||||||
event: 'connectStart',
|
|
||||||
connectionEvent: {
|
|
||||||
event: MouseEvent
|
|
||||||
} & OnConnectStartParams,
|
|
||||||
): void
|
|
||||||
(event: 'connectStop', connectionEvent: MouseEvent): void
|
|
||||||
(event: 'connectEnd', connectionEvent: MouseEvent): void
|
|
||||||
(event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
|
|
||||||
(event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
|
|
||||||
(event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }): void
|
|
||||||
(event: 'selectionDragStart', selectionEvent: NodeDragEvent): void
|
|
||||||
(event: 'selectionDrag', selectionEvent: NodeDragEvent): void
|
|
||||||
(event: 'selectionDragStop', selectionEvent: NodeDragEvent): void
|
|
||||||
(event: 'selectionContextMenu', selectionEvent: { event: MouseEvent; nodes: GraphNode[] }): void
|
|
||||||
(event: 'paneReady', paneEvent: VueFlowStore): void
|
|
||||||
(event: 'paneScroll', paneEvent: WheelEvent | undefined): void
|
|
||||||
(event: 'paneClick', paneEvent: MouseEvent): void
|
|
||||||
(event: 'paneContextMenu', paneEvent: MouseEvent): void
|
|
||||||
(event: 'edgeContextMenu', edgeMouseEvent: EdgeMouseEvent): void
|
|
||||||
(event: 'edgeMouseEnter', edgeMouseEvent: EdgeMouseEvent): void
|
|
||||||
(event: 'edgeMouseMove', edgeMouseEvent: EdgeMouseEvent): void
|
|
||||||
(event: 'edgeMouseLeave', edgeMouseEvent: EdgeMouseEvent): void
|
|
||||||
(event: 'edgeDoubleClick', edgeMouseEvent: EdgeMouseEvent): void
|
|
||||||
(event: 'edgeClick', edgeMouseEvent: EdgeMouseEvent): void
|
|
||||||
(event: 'edgeUpdateStart', edgeMouseEvent: EdgeMouseEvent): void
|
|
||||||
(event: 'edgeUpdate', edgeMouseEvent: EdgeUpdateEvent): void
|
|
||||||
(event: 'edgeUpdateEnd', edgeMouseEvent: EdgeMouseEvent): void
|
|
||||||
(event: 'updateNodeInternals', id: string): void
|
|
||||||
|
|
||||||
/** v-model event definitions */
|
|
||||||
(event: 'update:modelValue', value: FlowElements): void
|
|
||||||
(event: 'update:nodes', value: GraphNode[]): void
|
|
||||||
(event: 'update:edges', value: GraphEdge[]): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const modelValue = useVModel(props, 'modelValue', emit)
|
const modelValue = useVModel(props, 'modelValue', emit)
|
||||||
const modelNodes = useVModel(props, 'nodes', emit)
|
const modelNodes = useVModel(props, 'nodes', emit)
|
||||||
@@ -126,7 +62,7 @@ useHooks(emit, hooks.value)
|
|||||||
|
|
||||||
provide(Slots, useSlots())
|
provide(Slots, useSlots())
|
||||||
|
|
||||||
defineExpose({
|
defineExpose<VueFlowStore>({
|
||||||
vueFlowRef,
|
vueFlowRef,
|
||||||
id,
|
id,
|
||||||
hooks,
|
hooks,
|
||||||
|
|||||||
Reference in New Issue
Block a user