Skip to content

Commit 70ae074

Browse files
bcakmakoglubcakmakoglu
committed
chore(core): cleanup slots
1 parent 196cafd commit 70ae074

File tree

3 files changed

+13
-116
lines changed

3 files changed

+13
-116
lines changed

‎packages/core/src/container/Viewport/Viewport.vue

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -394,10 +394,8 @@ export default {
394394
:class="{ connecting: !!connectionStartHandle, dragging: paneDragging, draggable: shouldPanOnDrag }"
395395
>
396396
<Transform>
397-
<slot name="zoom-pane" />
397+
<slot />
398398
</Transform>
399399
</Pane>
400400
</div>
401-
402-
<slot />
403401
</template>

‎packages/core/src/container/VueFlow/VueFlow.vue

Lines changed: 9 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,9 @@
11
<script lang="ts" setup>
22
import { useVModel } from '@vueuse/core'
3-
import { onUnmounted, provide, useSlots } from 'vue'
4-
import type { D3ZoomEvent } from 'd3-zoom'
3+
import { onUnmounted, provide } from 'vue'
54
import Viewport from '../Viewport/Viewport.vue'
65
import A11yDescriptions from '../../components/A11y/A11yDescriptions.vue'
7-
import type { FlowElements, FlowProps } from '../../types/flow'
8-
import type {
9-
Connection,
10-
EdgeChange,
11-
EdgeMouseEvent,
12-
EdgeUpdateEvent,
13-
GraphEdge,
14-
GraphNode,
15-
NodeChange,
16-
NodeDragEvent,
17-
NodeMouseEvent,
18-
OnConnectStartParams,
19-
ViewportTransform,
20-
VueFlowStore,
21-
} from '../../types'
22-
import type { VueFlowError } from '../../utils/errors'
6+
import type { FlowEmits, FlowProps, FlowSlots, VueFlowStore } from '../../types'
237
import { useVueFlow, useWatchProps } from '../../composables'
248
import { useHooks } from '../../store'
259
import { Slots } from '../../context'
@@ -59,75 +43,9 @@ const props = withDefaults(defineProps<FlowProps>(), {
5943
zoomActivationKeyCode: undefined,
6044
})
6145
62-
const emit = defineEmits<{
63-
(event: 'nodesChange', changes: NodeChange[]): void
64-
(event: 'edgesChange', changes: EdgeChange[]): void
65-
(event: 'nodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
66-
(event: 'nodeClick', nodeMouseEvent: NodeMouseEvent): void
67-
(event: 'nodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
68-
(event: 'nodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
69-
(event: 'nodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
70-
(event: 'nodeContextMenu', nodeMouseEvent: NodeMouseEvent): void
71-
(event: 'nodeDragStart', nodeDragEvent: NodeDragEvent): void
72-
(event: 'nodeDrag', nodeDragEvent: NodeDragEvent): void
73-
(event: 'nodeDragStop', nodeDragEvent: NodeDragEvent): void
74-
(event: 'nodesInitialized'): void
75-
(event: 'miniMapNodeClick', nodeMouseEvent: NodeMouseEvent): void
76-
(event: 'miniMapNodeDoubleClick', nodeMouseEvent: NodeMouseEvent): void
77-
(event: 'miniMapNodeMouseEnter', nodeMouseEvent: NodeMouseEvent): void
78-
(event: 'miniMapNodeMouseMove', nodeMouseEvent: NodeMouseEvent): void
79-
(event: 'miniMapNodeMouseLeave', nodeMouseEvent: NodeMouseEvent): void
80-
(event: 'connect', connectionEvent: Connection): void
81-
(
82-
event: 'connectStart',
83-
connectionEvent: {
84-
event?: MouseEvent
85-
} & OnConnectStartParams,
86-
): void
87-
(event: 'connectEnd', connectionEvent?: MouseEvent): void
88-
(
89-
event: 'clickConnectStart',
90-
connectionEvent: {
91-
event?: MouseEvent
92-
} & OnConnectStartParams,
93-
): void
94-
(event: 'clickConnectEnd', connectionEvent?: MouseEvent): void
95-
(event: 'moveStart', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
96-
(event: 'move', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
97-
(event: 'moveEnd', moveEvent: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewportTransform }): void
98-
(event: 'selectionDragStart', selectionEvent: NodeDragEvent): void
99-
(event: 'selectionDrag', selectionEvent: NodeDragEvent): void
100-
(event: 'selectionDragStop', selectionEvent: NodeDragEvent): void
101-
(event: 'selectionContextMenu', selectionEvent: { event: MouseEvent; nodes: GraphNode[] }): void
102-
(event: 'selectionStart', selectionEvent: MouseEvent): void
103-
(event: 'selectionEnd', selectionEvent: MouseEvent): void
104-
(event: 'viewportChangeStart', viewport: ViewportTransform): void
105-
(event: 'viewportChange', viewport: ViewportTransform): void
106-
(event: 'viewportChangeEnd', viewport: ViewportTransform): void
107-
(event: 'paneReady', paneEvent: VueFlowStore): void
108-
(event: 'paneScroll', paneEvent: WheelEvent | undefined): void
109-
(event: 'paneClick', paneEvent: MouseEvent): void
110-
(event: 'paneContextMenu', paneEvent: MouseEvent): void
111-
(event: 'paneMouseEnter', paneEvent: MouseEvent): void
112-
(event: 'paneMouseMove', paneEvent: MouseEvent): void
113-
(event: 'paneMouseLeave', paneEvent: MouseEvent): void
114-
(event: 'edgeContextMenu', edgeMouseEvent: EdgeMouseEvent): void
115-
(event: 'edgeMouseEnter', edgeMouseEvent: EdgeMouseEvent): void
116-
(event: 'edgeMouseMove', edgeMouseEvent: EdgeMouseEvent): void
117-
(event: 'edgeMouseLeave', edgeMouseEvent: EdgeMouseEvent): void
118-
(event: 'edgeDoubleClick', edgeMouseEvent: EdgeMouseEvent): void
119-
(event: 'edgeClick', edgeMouseEvent: EdgeMouseEvent): void
120-
(event: 'edgeUpdateStart', edgeMouseEvent: EdgeMouseEvent): void
121-
(event: 'edgeUpdate', edgeUpdateEvent: EdgeUpdateEvent): void
122-
(event: 'edgeUpdateEnd', edgeMouseEvent: EdgeMouseEvent): void
123-
(event: 'updateNodeInternals'): void
124-
(event: 'error', error: VueFlowError): void
46+
const emit = defineEmits<FlowEmits>()
12547
126-
/** v-model event definitions */
127-
(event: 'update:modelValue', value: FlowElements): void
128-
(event: 'update:nodes', value: GraphNode[]): void
129-
(event: 'update:edges', value: GraphEdge[]): void
130-
}>()
48+
const slots = defineSlots<FlowSlots>()
13149
13250
const modelValue = useVModel(props, 'modelValue', emit)
13351
const modelNodes = useVModel(props, 'nodes', emit)
@@ -145,7 +63,7 @@ const dispose = useWatchProps({ modelValue, nodes: modelNodes, edges: modelEdges
14563
14664
useHooks(emit, hooks)
14765
148-
provide(Slots, useSlots())
66+
provide(Slots, slots)
14967
15068
onUnmounted(() => {
15169
dispose()
@@ -170,32 +88,13 @@ export default {
17088
<template>
17189
<div ref="vueFlowRef" class="vue-flow">
17290
<Viewport>
173-
<!-- Pseudo-slots for nodes and edges so we can collect the templates using `useSlots` -->
174-
<template #nodes>
175-
<template v-for="nodeName of Object.keys(getNodeTypes)">
176-
<slot :name="`node-${nodeName}`" />
177-
</template>
178-
</template>
179-
180-
<template #edges>
181-
<template v-for="edgeName of Object.keys(getEdgeTypes)">
182-
<slot :name="`edge-${edgeName}`" />
183-
</template>
184-
</template>
185-
186-
<template #connection-line>
187-
<slot name="connection-line" />
188-
</template>
189-
19091
<!-- This slot will be passed down to the transformation-pane and rendered inside there, meaning it's affected by zooming/panning -->
191-
<template #zoom-pane>
192-
<slot name="zoom-pane" />
193-
</template>
194-
195-
<!-- This slot will render outside the transformation-pane, meaning it's *not* affected by zooming and panning -->
196-
<slot />
92+
<slot name="zoom-pane" />
19793
</Viewport>
19894

95+
<!-- This slot will render outside the transformation-pane, meaning it's *not* affected by zooming and panning -->
96+
<slot />
97+
19998
<A11yDescriptions />
20099
</div>
201100
</template>

‎packages/core/src/context/index.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import type { InjectionKey, Ref, Slots as TSlots } from 'vue'
2-
import type { VueFlowStore } from '~/types'
1+
import type { InjectionKey, Ref } from 'vue'
2+
import type { FlowSlots, VueFlowStore } from '~/types'
33

44
export const VueFlow: InjectionKey<VueFlowStore> = Symbol('vueFlow')
55
export const NodeId: InjectionKey<string> = Symbol('nodeId')
66
export const NodeRef: InjectionKey<Ref<HTMLDivElement | null>> = Symbol('nodeRef')
77
export const EdgeId: InjectionKey<string> = Symbol('edgeId')
88
export const EdgeRef: InjectionKey<Ref<SVGElement | null>> = Symbol('edgeRef')
9-
export const Slots: InjectionKey<TSlots> = Symbol('slots')
9+
export const Slots: InjectionKey<Readonly<FlowSlots>> = Symbol('slots')

0 commit comments

Comments
 (0)