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

refactor(edges): move edge event handlers into Wrapper component

Browse Source
This commit is contained in:
braks
2022-10-10 18:28:24 +02:00
committed by Braks
parent 2684272308
commit 13fed0a3fb
3 changed files with 121 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/vite/src/Stress/StressExample.vue
View File

@@ -4,7 +4,7 @@ import { getElements } from './utils'
const { nodes, edges } = getElements(10, 10)
const { getNode, onPaneReady } = useVueFlow({
const { onPaneReady } = useVueFlow({
nodes,
edges,
})
@@ -13,6 +13,8 @@ onPaneReady((i) => {
i.fitView({
padding: 0.2,
})
console.log(i.getEdges.value)
console.log(i.getElements.value)
})
</script>

203
packages/core/src/components/Edges/Wrapper.ts
View File

@@ -1,111 +1,130 @@
import type { CSSProperties, Component, VNode } from 'vue'
import EdgeAnchor from './EdgeAnchor'
import type { EdgeComponent, EdgeEventsOn, EdgeMarkerType, EdgeTextProps, EdgeUpdatable, GraphNode } from '~/types'
import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, GraphNode, HandleType } from '~/types'
import { ConnectionMode, Position } from '~/types'
import { getEdgePositions, getHandle, getMarkerId } from '~/utils'
import { connectionExists, getEdgePositions, getHandle, getMarkerId } from '~/utils'
import { EdgeId, EdgeRef } from '~/context'
import { useEdgeHooks, useHandle, useVueFlow } from '~/composables'
interface Props {
id: string
type: EdgeComponent | Function | Object | false
name: string
source: string
target: string
sourceNode?: GraphNode
targetNode?: GraphNode
targetHandleId?: string | null
sourceHandleId?: string | null
selectable?: boolean
updatable?: EdgeUpdatable
label?: string | VNode | Component<EdgeTextProps> | Object
data?: any
events: EdgeEventsOn
labelStyle?: CSSProperties
labelShowBg?: boolean
labelBgStyle?: any
labelBgPadding?: [number, number]
labelBgBorderRadius?: number
animated?: boolean
selected?: boolean
style: CSSProperties
markerEnd?: EdgeMarkerType
markerStart?: EdgeMarkerType
connectionMode: ConnectionMode
edgeUpdaterRadius: number
updating?: boolean
edge: GraphEdge
sourceNode: GraphNode
targetNode: GraphNode
}
const Wrapper = defineComponent({
props: [
'name',
'type',
'id',
'data',
'events',
'labelBgBorderRadius',
'labelBgPadding',
'labelBgStyle',
'labelStyle',
'labelShowBg',
'style',
'animated',
'label',
'updatable',
'selectable',
'target',
'source',
'sourceNode',
'targetNode',
'sourceHandleId',
'targetHandleId',
'selected',
'markerEnd',
'markerStart',
'connectionMode',
'edgeUpdaterRadius',
'updating',
],
emits: ['source-mousedown', 'target-mousedown'],
setup(props: Props, { emit }) {
props: ['name', 'type', 'id', 'updatable', 'selectable', 'edge', 'sourceNode', 'targetNode'],
setup(props: Props) {
const { addSelectedEdges, connectionMode, edgeUpdaterRadius, emits, nodesSelectionActive, getEdges } = useVueFlow()
const hooks = useEdgeHooks(props.edge, emits)
const edge = $(useVModel(props, 'edge'))
let mouseOver = $ref(false)
let updating = $ref(false)
const nodeId = ref('')
const handleId = ref<string | null>(null)
const type = ref<HandleType>('source')
const elementEdgeUpdaterType = ref<HandleType>('source')
const mouseEvent = ref<MouseEvent>()
const edgeEl = ref()
provide(EdgeId, props.id)
provide(EdgeRef, edgeEl)
const onEdgeUpdaterMouseEnter = () => (updating = true)
const onEdgeUpdaterMouseEnter = () => (mouseOver = true)
const onEdgeUpdaterMouseOut = () => (updating = false)
const onEdgeUpdaterMouseOut = () => (mouseOver = false)
const onEdgeUpdaterSourceMouseDown = (e: MouseEvent) => {
emit('source-mousedown', e)
const onEdgeUpdate = (connection: Connection) => {
if (!connectionExists(connection, getEdges.value)) hooks.emit.update({ edge, connection })
}
const onEdgeUpdaterTargetMouseDown = (e: MouseEvent) => {
emit('target-mousedown', e)
const onEdgeUpdateEnd = () => {
if (!mouseEvent.value) return
hooks.emit.updateEnd({ event: mouseEvent.value, edge })
updating = false
}
const { onMouseDown } = useHandle({
nodeId,
handleId,
type,
isValidConnection: undefined,
elementEdgeUpdaterType,
onEdgeUpdate,
onEdgeUpdateEnd,
})
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
nodeId.value = isSourceHandle ? edge.target : edge.source
handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
type.value = isSourceHandle ? 'target' : 'source'
elementEdgeUpdaterType.value = type.value
mouseEvent.value = event
hooks.emit.updateStart({ event, edge })
onMouseDown(event)
}
const onEdgeClick = (event: MouseEvent) => {
const data = { event, edge }
if (props.selectable) {
nodesSelectionActive.value = false
addSelectedEdges([edge])
}
hooks.emit.click(data)
}
const onEdgeContextMenu = (event: MouseEvent) => hooks.emit.contextMenu({ event, edge })
const onDoubleClick = (event: MouseEvent) => hooks.emit.doubleClick({ event, edge })
const onEdgeMouseEnter = (event: MouseEvent) => hooks.emit.mouseEnter({ event, edge })
const onEdgeMouseMove = (event: MouseEvent) => hooks.emit.mouseMove({ event, edge })
const onEdgeMouseLeave = (event: MouseEvent) => hooks.emit.mouseLeave({ event, edge })
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
updating = true
handleEdgeUpdater(event, true)
}
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
updating = true
handleEdgeUpdater(event, false)
}
return () => {
if (!props.sourceNode || !props.targetNode) return null
let sourceNodeHandles
if (props.connectionMode === ConnectionMode.Strict) {
if (connectionMode.value === ConnectionMode.Strict) {
sourceNodeHandles = props.sourceNode.handleBounds.source
} else {
sourceNodeHandles = props.sourceNode.handleBounds.source ?? props.sourceNode.handleBounds.target
}
const sourceHandle = getHandle(sourceNodeHandles, props.sourceHandleId)
const sourceHandle = getHandle(sourceNodeHandles, edge.sourceHandle)
let targetNodeHandles
if (props.connectionMode === ConnectionMode.Strict) {
if (connectionMode.value === ConnectionMode.Strict) {
targetNodeHandles = props.targetNode.handleBounds.target
} else {
targetNodeHandles = props.targetNode.handleBounds.target ?? props.targetNode.handleBounds.source
}
const targetHandle = getHandle(targetNodeHandles, props.targetHandleId)
const targetHandle = getHandle(targetNodeHandles, edge.targetHandle)
const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom
@@ -129,44 +148,50 @@ const Wrapper = defineComponent({
'vue-flow__edge',
`vue-flow__edge-${props.name}`,
{
updating,
selected: props.selected,
animated: props.animated,
updating: mouseOver,
selected: edge.selected,
animated: edge.animated,
inactive: !props.selectable,
},
],
'onClick': onEdgeClick,
'onContextmenu': onEdgeContextMenu,
'onDblclick': onDoubleClick,
'onMouseenter': onEdgeMouseEnter,
'onMousemove': onEdgeMouseMove,
'onMouseleave': onEdgeMouseLeave,
},
[
props.updating
updating
? null
: h(props.type as any, {
id: props.id,
sourceNode: props.sourceNode,
targetNode: props.targetNode,
source: props.source,
target: props.target,
source: edge.source,
target: edge.target,
updatable: props.updatable,
selected: props.selected,
animated: props.animated,
label: props.label,
labelStyle: props.labelStyle,
labelShowBg: props.labelShowBg,
labelBgStyle: props.labelBgStyle,
labelBgPadding: props.labelBgPadding,
labelBgBorderRadius: props.labelBgBorderRadius,
data: props.data,
events: props.events,
style: props.style,
markerStart: `url(#${getMarkerId(props.markerStart)})`,
markerEnd: `url(#${getMarkerId(props.markerEnd)})`,
selected: edge.selected,
animated: edge.animated,
label: edge.label,
labelStyle: edge.labelStyle,
labelShowBg: edge.labelShowBg,
labelBgStyle: edge.labelBgStyle,
labelBgPadding: edge.labelBgPadding,
labelBgBorderRadius: edge.labelBgBorderRadius,
data: edge.data,
events: { ...edge.events, ...hooks.on },
style: edge.style,
markerStart: `url(#${getMarkerId(edge.markerStart)})`,
markerEnd: `url(#${getMarkerId(edge.markerEnd)})`,
sourcePosition,
targetPosition,
sourceX,
sourceY,
targetX,
targetY,
sourceHandleId: props.sourceHandleId,
targetHandleId: props.targetHandleId,
sourceHandleId: edge.sourceHandle,
targetHandleId: edge.targetHandle,
}),
[
@@ -183,7 +208,7 @@ const Wrapper = defineComponent({
'position': sourcePosition,
'centerX': sourceX,
'centerY': sourceY,
'radius': props.edgeUpdaterRadius,
'radius': edgeUpdaterRadius.value,
'data-type': 'source',
}),
),
@@ -202,7 +227,7 @@ const Wrapper = defineComponent({
'position': targetPosition,
'centerX': targetX,
'centerY': targetY,
'radius': props.edgeUpdaterRadius,
'radius': edgeUpdaterRadius.value,
'data-type': 'target',
}),
),

112
packages/core/src/container/EdgeRenderer/EdgeRenderer.vue
View File

@@ -2,9 +2,9 @@
import type { CSSProperties, EffectScope } from 'vue'
import EdgeWrapper from '../../components/Edges/Wrapper'
import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
import { connectionExists, groupEdgesByZLevel } from '../../utils'
import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType } from '../../types'
import { useVueFlow } from '../../composables'
import { groupEdgesByZLevel } from '../../utils'
import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
import { Slots } from '../../context'
import MarkerDefinitions from './MarkerDefinitions.vue'
@@ -34,8 +34,6 @@ const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectab
const updatable = (u?: EdgeUpdatable) => (typeof u === 'undefined' ? edgesUpdatable : u)
const updating = ref<string>()
const sourceNode = $(
controlledComputed(
() => connectionStartHandle?.nodeId,
@@ -59,8 +57,6 @@ const connectionLineVisible = $(
),
)
const hooks = $ref<Record<string, ReturnType<typeof useEdgeHooks>>>({})
let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
let scope: EffectScope | null = effectScope()
@@ -72,11 +68,6 @@ onPaneReady(() => {
watch(
[$$(getSelectedNodes), $$(getEdges)],
() => {
getEdges.forEach((edge) => {
if (hooks[edge.id]) return
hooks[edge.id] = useEdgeHooks(edge, emits)
})
if (elevateEdgesOnSelect) {
nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
} else {
@@ -123,75 +114,6 @@ const getType = (type?: string, template?: GraphEdge['template']) => {
return slot
}
const onEdgeClick = (event: MouseEvent, edge: GraphEdge) => {
const data = { event, edge }
if (selectable(edge.selectable)) {
$$(nodesSelectionActive).value = false
addSelectedEdges([edge])
}
hooks[edge.id].emit.click(data)
}
const onEdgeContextMenu = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.contextMenu({ event, edge })
const onDoubleClick = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.doubleClick({ event, edge })
const onEdgeMouseEnter = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.mouseEnter({ event, edge })
const onEdgeMouseMove = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.mouseMove({ event, edge })
const onEdgeMouseLeave = (event: MouseEvent, edge: GraphEdge) => hooks[edge.id].emit.mouseLeave({ event, edge })
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent, edge: GraphEdge) => {
updating.value = edge.id
handleEdgeUpdater(event, edge, true)
}
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent, edge: GraphEdge) => {
updating.value = edge.id
handleEdgeUpdater(event, edge, false)
}
const nodeId = ref('')
const handleId = ref<string | null>(null)
const type = ref<HandleType>('source')
const elementEdgeUpdaterType = ref<HandleType>('source')
const toUpdate = ref<GraphEdge>()
const mouseEvent = ref<MouseEvent>()
const onEdgeUpdate = (connection: Connection) => {
if (!connectionExists(connection, getEdges) && toUpdate.value)
hooks[toUpdate.value.id].emit.update({ edge: toUpdate.value, connection })
}
const onEdgeUpdateEnd = () => {
if (!toUpdate.value || !mouseEvent.value) return
hooks[toUpdate.value.id].emit.updateEnd({ event: mouseEvent.value, edge: toUpdate.value })
updating.value = ''
}
const { onMouseDown } = useHandle({
nodeId,
handleId,
type,
isValidConnection: undefined,
elementEdgeUpdaterType,
onEdgeUpdate,
onEdgeUpdateEnd,
})
const handleEdgeUpdater = (event: MouseEvent, edge: GraphEdge, isSourceHandle: boolean) => {
nodeId.value = isSourceHandle ? edge.target : edge.source
handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
type.value = isSourceHandle ? 'target' : 'source'
elementEdgeUpdaterType.value = type.value
toUpdate.value = edge
mouseEvent.value = event
hooks[edge.id].emit.updateStart({ event, edge })
onMouseDown(event)
}
const getClass = (edge: GraphEdge) => {
const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
return [noPanClassName, extraClass]
@@ -214,41 +136,15 @@ export default {
v-for="edge of group.edges"
:id="edge.id"
:key="edge.id"
:edge="edge"
:type="getType(edge.type, edge.template)"
:name="edge.type || 'default'"
:source="edge.source"
:target="edge.target"
:target-handle-id="edge.targetHandle"
:source-handle-id="edge.sourceHandle"
:source-node="getNode(edge.source)"
:target-node="getNode(edge.target)"
:label="edge.label"
:data="edge.data"
:events="{ ...edge.events, ...hooks[edge.id].on }"
:animated="edge.animated"
:selectable="selectable(edge.selectable)"
:selected="edge.selected"
:updatable="updatable(edge.updatable)"
:updating="edge.id === updating"
:label-style="edge.labelStyle"
:label-show-bg="edge.labelShowBg"
:label-bg-style="edge.labelBgStyle"
:label-bg-padding="edge.labelBgPadding"
:label-bg-border-radius="edge.labelBgBorderRadius"
:connection-mode="connectionMode"
:edge-updater-radius="edgeUpdaterRadius"
:marker-end="edge.markerEnd"
:marker-start="edge.markerStart"
:style="getStyle(edge)"
:class="getClass(edge)"
@click="onEdgeClick($event, edge)"
@dblclick="onDoubleClick($event, edge)"
@contextmenu="onEdgeContextMenu($event, edge)"
@mouseenter="onEdgeMouseEnter($event, edge)"
@mousemove="onEdgeMouseMove($event, edge)"
@mouseleave="onEdgeMouseLeave($event, edge)"
@source-mousedown="onEdgeUpdaterSourceMouseDown($event, edge)"
@target-mousedown="onEdgeUpdaterTargetMouseDown($event, edge)"
/>
</g>
</svg>