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

refactor(edges): move classes to Wrapper.ts

Browse Source
This commit is contained in:
Braks
2022-05-21 00:00:28 +02:00
parent 975d5519a4
commit d5a19cd1d8
2 changed files with 82 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
packages/vue-flow/src/components/Edges/Wrapper.ts
View File

@@ -47,6 +47,7 @@ const Wrapper: FunctionalComponent<Props> = function (
animated,
label,
updatable,
selectable,
target,
source,
sourceNode,
@@ -104,68 +105,83 @@ const Wrapper: FunctionalComponent<Props> = function (
targetPosition,
)
return h('g', { class: [`vue-flow__node-${name}`, { updating }] }, [
h(type as any, {
id,
sourceNode,
targetNode,
source,
target,
updatable,
selected,
animated,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
data,
style,
markerStart: `url(#${getMarkerId(markerStart)})`,
markerEnd: `url(#${getMarkerId(markerEnd)})`,
sourcePosition,
targetPosition,
sourceX,
sourceY,
targetX,
targetY,
sourceHandleId,
targetHandleId,
}),
updatable
? [
h(
'g',
{
onMouseDown: onEdgeUpdaterSourceMouseDown,
onMouseEnter: onEdgeUpdaterMouseEnter,
onMouseOut: onEdgeUpdaterMouseOut,
},
h(EdgeAnchor, {
position: sourcePosition,
centerX: sourceX,
centerY: sourceY,
radius: edgeUpdaterRadius,
}),
),
h(
'g',
{
onMouseDown: onEdgeUpdaterTargetMouseDown,
onMouseEnter: onEdgeUpdaterMouseEnter,
onMouseOut: onEdgeUpdaterMouseOut,
},
h(EdgeAnchor, {
position: targetPosition,
centerX: targetX,
centerY: targetY,
radius: edgeUpdaterRadius,
}),
),
]
: null,
])
return h(
'g',
{
class: [
'vue-flow__edge',
`vue-flow__edge-${name}`,
{
updating,
selected,
animated,
inactive: !selectable,
},
],
},
[
h(type as any, {
id,
sourceNode,
targetNode,
source,
target,
updatable,
selected,
animated,
label,
labelStyle,
labelShowBg,
labelBgStyle,
labelBgPadding,
labelBgBorderRadius,
data,
style,
markerStart: `url(#${getMarkerId(markerStart)})`,
markerEnd: `url(#${getMarkerId(markerEnd)})`,
sourcePosition,
targetPosition,
sourceX,
sourceY,
targetX,
targetY,
sourceHandleId,
targetHandleId,
}),
updatable
? [
h(
'g',
{
onMouseDown: onEdgeUpdaterSourceMouseDown,
onMouseEnter: onEdgeUpdaterMouseEnter,
onMouseOut: onEdgeUpdaterMouseOut,
},
h(EdgeAnchor, {
position: sourcePosition,
centerX: sourceX,
centerY: sourceY,
radius: edgeUpdaterRadius,
}),
),
h(
'g',
{
onMouseDown: onEdgeUpdaterTargetMouseDown,
onMouseEnter: onEdgeUpdaterMouseEnter,
onMouseOut: onEdgeUpdaterMouseOut,
},
h(EdgeAnchor, {
position: targetPosition,
centerX: targetX,
centerY: targetY,
radius: edgeUpdaterRadius,
}),
),
]
: null,
],
)
}
Wrapper.props = [

17
packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
View File

@@ -1,10 +1,10 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import type { CSSProperties } from 'vue'
import EdgeWrapper from '../../components/Edges/Wrapper'
import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
import { useHandle, useVueFlow } from '../../composables'
import { connectionExists, groupEdgesByZLevel } from '../../utils'
import { EdgeComponent, GraphEdge } from '../../types'
import type { EdgeComponent, GraphEdge } from '../../types'
import { Slots } from '../../context'
import MarkerDefinitions from './MarkerDefinitions.vue'
@@ -143,16 +143,7 @@ const handleEdgeUpdater = (event: MouseEvent, edge: GraphEdge, isSourceHandle: b
const getClass = (edge: GraphEdge) => {
const extraClass = edge.class instanceof Function ? edge.class(edge) : edge.class
return [
'vue-flow__edge',
noPanClassName,
{
selected: edge.selected,
animated: edge.animated,
inactive: !selectable,
},
extraClass,
]
return [noPanClassName, extraClass]
}
const getStyle = (edge: GraphEdge) => (edge.style instanceof Function ? edge.style(edge) : edge.style) as CSSProperties
@@ -195,7 +186,7 @@ export default {
:style="getStyle(edge)"
:class="getClass(edge)"
@click="(e: MouseEvent) => onEdgeClick(e, edge)"
@dblClick="(e: MouseEvent) => onDoubleClick(e, edge)"
@dbl-click="(e: MouseEvent) => onDoubleClick(e, edge)"
@contextmenu="(e: MouseEvent) => onEdgeContextMenu(e, edge)"
@mouseenter="(e: MouseEvent) => onEdgeMouseEnter(e, edge)"
@mousemove="(e: MouseEvent) => onEdgeMouseMove(e, edge)"