chore: remove old edge wrapper component
This commit is contained in:
bcakmakoglu
@@ -1,219 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import type { CSSProperties } from 'vue'
|
|
||||||
import { useHandle, useVueFlow } from '../../composables'
|
|
||||||
import type { EdgeComponent, GraphEdge } from '../../types'
|
|
||||||
import { ConnectionMode, Position } from '../../types'
|
|
||||||
import { connectionExists, getEdgePositions, getHandle, getMarkerId } from '../../utils'
|
|
||||||
import EdgeAnchor from './EdgeAnchor'
|
|
||||||
|
|
||||||
const { id, edge, name, selectable, updatable, type } = defineProps<{
|
|
||||||
id: string
|
|
||||||
edge: GraphEdge
|
|
||||||
selectable?: boolean
|
|
||||||
updatable?: boolean
|
|
||||||
type: EdgeComponent | Function | Object | false
|
|
||||||
name: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const { emits, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdges, getEdge, getNode, addSelectedEdges } = $(
|
|
||||||
useVueFlow(),
|
|
||||||
)
|
|
||||||
|
|
||||||
let updating = $ref(false)
|
|
||||||
|
|
||||||
const sourceNode = $computed(() => getNode(edge.source))
|
|
||||||
const targetNode = $computed(() => getNode(edge.target))
|
|
||||||
|
|
||||||
const { onMouseDown } = useHandle()
|
|
||||||
|
|
||||||
const onEdgeClick = (event: MouseEvent) => {
|
|
||||||
const data = { event, edge }
|
|
||||||
if (selectable) {
|
|
||||||
setState({
|
|
||||||
nodesSelectionActive: false,
|
|
||||||
})
|
|
||||||
|
|
||||||
addSelectedEdges([edge])
|
|
||||||
}
|
|
||||||
emits.edgeClick(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onEdgeContextMenu = (event: MouseEvent) => emits.edgeContextMenu({ event, edge })
|
|
||||||
|
|
||||||
const onDoubleClick = (event: MouseEvent) => emits.edgeDoubleClick({ event, edge })
|
|
||||||
|
|
||||||
const onEdgeMouseEnter = (event: MouseEvent) => emits.edgeMouseEnter({ event, edge })
|
|
||||||
|
|
||||||
const onEdgeMouseMove = (event: MouseEvent) => emits.edgeMouseMove({ event, edge })
|
|
||||||
|
|
||||||
const onEdgeMouseLeave = (event: MouseEvent) => emits.edgeMouseLeave({ event, edge })
|
|
||||||
|
|
||||||
const onEdgeUpdaterMouseEnter = () => (updating = true)
|
|
||||||
|
|
||||||
const onEdgeUpdaterMouseOut = () => (updating = false)
|
|
||||||
|
|
||||||
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, true)
|
|
||||||
|
|
||||||
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, false)
|
|
||||||
|
|
||||||
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
|
|
||||||
const nodeId = isSourceHandle ? edge.target : edge.source
|
|
||||||
const handleId = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
|
|
||||||
|
|
||||||
emits.edgeUpdateStart({ event, edge })
|
|
||||||
|
|
||||||
onMouseDown(
|
|
||||||
event,
|
|
||||||
handleId,
|
|
||||||
nodeId,
|
|
||||||
isSourceHandle,
|
|
||||||
undefined,
|
|
||||||
isSourceHandle ? 'target' : 'source',
|
|
||||||
(connection) => {
|
|
||||||
if (!connectionExists(connection, getEdges)) emits.edgeUpdate({ edge, connection })
|
|
||||||
},
|
|
||||||
() => emits.edgeUpdateEnd({ event, edge }),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const sourceHandle = $computed(() => {
|
|
||||||
if (!sourceNode) return
|
|
||||||
|
|
||||||
let sourceNodeHandles
|
|
||||||
if (connectionMode === ConnectionMode.Strict) {
|
|
||||||
sourceNodeHandles = sourceNode.handleBounds.source
|
|
||||||
} else {
|
|
||||||
sourceNodeHandles = sourceNode.handleBounds.source ?? sourceNode.handleBounds.target
|
|
||||||
}
|
|
||||||
|
|
||||||
return getHandle(sourceNodeHandles, edge.sourceHandle)
|
|
||||||
})
|
|
||||||
|
|
||||||
const targetHandle = $computed(() => {
|
|
||||||
if (!targetNode) return
|
|
||||||
|
|
||||||
let targetNodeHandles
|
|
||||||
if (connectionMode === ConnectionMode.Strict) {
|
|
||||||
targetNodeHandles = targetNode.handleBounds.target
|
|
||||||
} else {
|
|
||||||
targetNodeHandles = targetNode.handleBounds.target ?? targetNode.handleBounds.source
|
|
||||||
}
|
|
||||||
|
|
||||||
return getHandle(targetNodeHandles, edge.targetHandle)
|
|
||||||
})
|
|
||||||
|
|
||||||
const sourcePosition = $(controlledComputed($$(sourceHandle), () => (sourceHandle ? sourceHandle.position : Position.Bottom)))
|
|
||||||
|
|
||||||
const targetPosition = $(controlledComputed($$(targetHandle), () => (targetHandle ? targetHandle.position : Position.Top)))
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const stop = watch(
|
|
||||||
[
|
|
||||||
$$(sourcePosition),
|
|
||||||
$$(targetPosition),
|
|
||||||
() => sourceNode?.computedPosition,
|
|
||||||
() => targetNode?.computedPosition,
|
|
||||||
() => sourceNode?.dimensions,
|
|
||||||
() => targetNode?.dimensions,
|
|
||||||
],
|
|
||||||
() => {
|
|
||||||
if (sourceNode && targetNode) {
|
|
||||||
const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
|
|
||||||
sourceNode,
|
|
||||||
sourceHandle,
|
|
||||||
sourcePosition,
|
|
||||||
targetNode,
|
|
||||||
targetHandle,
|
|
||||||
targetPosition,
|
|
||||||
)
|
|
||||||
|
|
||||||
const storedEdge = getEdge(id)!
|
|
||||||
if (storedEdge) {
|
|
||||||
if (edge.sourceX !== sourceX) storedEdge.sourceX = sourceX
|
|
||||||
if (edge.sourceY !== sourceY) storedEdge.sourceY = sourceY
|
|
||||||
if (edge.targetX !== targetX) storedEdge.targetX = targetX
|
|
||||||
if (edge.targetY !== targetY) storedEdge.targetY = targetY
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true, flush: 'pre' },
|
|
||||||
)
|
|
||||||
|
|
||||||
onBeforeUnmount(() => stop())
|
|
||||||
})
|
|
||||||
|
|
||||||
const getClass = () => {
|
|
||||||
const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
|
|
||||||
return [
|
|
||||||
'vue-flow__edge',
|
|
||||||
`vue-flow__edge-${name}`,
|
|
||||||
noPanClassName,
|
|
||||||
{
|
|
||||||
selected: edge.selected,
|
|
||||||
animated: edge.animated,
|
|
||||||
inactive: !selectable,
|
|
||||||
updating,
|
|
||||||
},
|
|
||||||
extraClass,
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const getStyle = () => (edge.style instanceof Function ? edge.style(edge) : edge.style) as CSSProperties
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'Edge',
|
|
||||||
inheritAttrs: false,
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<g
|
|
||||||
:class="getClass()"
|
|
||||||
@click="onEdgeClick"
|
|
||||||
@dbl-click="onDoubleClick"
|
|
||||||
@contextmenu="onEdgeContextMenu"
|
|
||||||
@mouseenter="onEdgeMouseEnter"
|
|
||||||
@mousemove="onEdgeMouseMove"
|
|
||||||
@mouseleave="onEdgeMouseLeave"
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="type"
|
|
||||||
:id="edge.id"
|
|
||||||
:source-node="sourceNode"
|
|
||||||
:target-node="targetNode"
|
|
||||||
:source="edge.source"
|
|
||||||
:target="edge.target"
|
|
||||||
:updatable="updatable"
|
|
||||||
:selected="edge.selected"
|
|
||||||
:animated="edge.animated"
|
|
||||||
:label="edge.label"
|
|
||||||
: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"
|
|
||||||
:data="edge.data"
|
|
||||||
:style="getStyle()"
|
|
||||||
:marker-start="`url(#${getMarkerId(edge.markerStart)})`"
|
|
||||||
:marker-end="`url(#${getMarkerId(edge.markerEnd)})`"
|
|
||||||
:source-position="sourcePosition"
|
|
||||||
:target-position="targetPosition"
|
|
||||||
:source-x="edge.sourceX"
|
|
||||||
:source-y="edge.sourceY"
|
|
||||||
:target-x="edge.targetX"
|
|
||||||
:target-y="edge.targetY"
|
|
||||||
:source-handle-id="edge.sourceHandle"
|
|
||||||
:target-handle-id="edge.targetHandle"
|
|
||||||
/>
|
|
||||||
<template v-if="updatable">
|
|
||||||
<g @mousedown="onEdgeUpdaterSourceMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
|
|
||||||
<EdgeAnchor :position="sourcePosition" :center-x="edge.sourceX" :center-y="edge.sourceY" :radius="edgeUpdaterRadius" />
|
|
||||||
</g>
|
|
||||||
<g @mousedown="onEdgeUpdaterTargetMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
|
|
||||||
<EdgeAnchor :position="targetPosition" :center-x="edge.targetX" :center-y="edge.targetY" :radius="edgeUpdaterRadius" />
|
|
||||||
</g>
|
|
||||||
</template>
|
|
||||||
</g>
|
|
||||||
</template>
|
|
||||||
Reference in New Issue
Block a user