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

chore(edges): simplify elevateEdgesOnSelect logic

Browse Source
This commit is contained in:
bcakmakoglu
2022-06-23 19:13:50 +02:00
committed by Braks
parent be68a27b33
commit d036769d58
1 changed files with 51 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
+51 -95
View File
@@ -66,6 +66,14 @@ onPaneReady(() => {
() => { () => {
if (elevateEdgesOnSelect) { if (elevateEdgesOnSelect) {
nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode))) nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
} else {
groups = [
{
isMaxLevel: true,
edges: getEdges,
level: 0,
},
]
} }
}, },
{ {
@@ -163,101 +171,49 @@ export default {
</script> </script>
<template> <template>
<template v-if="elevateEdgesOnSelect"> <svg v-for="group of groups" :key="group.level" class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
<svg <MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
v-for="group of groups" <g>
:key="group.level" <EdgeWrapper
class="vue-flow__edges vue-flow__container" v-for="edge of group.edges"
:style="`z-index: ${group.level}`" :id="edge.id"
> :key="edge.id"
<MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" /> :type="getType(edge.type, edge.template)"
<g> :name="edge.type || 'default'"
<EdgeWrapper :source="edge.source"
v-for="edge of group.edges" :target="edge.target"
:id="edge.id" :target-handle-id="edge.targetHandle"
:key="edge.id" :source-handle-id="edge.sourceHandle"
:type="getType(edge.type, edge.template)" :source-node="getNode(edge.source)"
:name="edge.type || 'default'" :target-node="getNode(edge.target)"
:source="edge.source" :label="edge.label"
:target="edge.target" :data="edge.data"
:target-handle-id="edge.targetHandle" :animated="edge.animated"
:source-handle-id="edge.sourceHandle" :selectable="selectable(edge.selectable)"
:source-node="getNode(edge.source)" :selected="edge.selected"
:target-node="getNode(edge.target)" :updatable="updatable(edge.updatable)"
:label="edge.label" :label-style="edge.labelStyle"
:data="edge.data" :label-show-bg="edge.labelShowBg"
:animated="edge.animated" :label-bg-style="edge.labelBgStyle"
:selectable="selectable(edge.selectable)" :label-bg-padding="edge.labelBgPadding"
:selected="edge.selected" :label-bg-border-radius="edge.labelBgBorderRadius"
:updatable="updatable(edge.updatable)" :connection-mode="connectionMode"
:label-style="edge.labelStyle" :edge-updater-radius="edgeUpdaterRadius"
:label-show-bg="edge.labelShowBg" :marker-end="edge.markerEnd"
:label-bg-style="edge.labelBgStyle" :marker-start="edge.markerStart"
:label-bg-padding="edge.labelBgPadding" :style="getStyle(edge)"
:label-bg-border-radius="edge.labelBgBorderRadius" :class="getClass(edge)"
:connection-mode="connectionMode" @click="onEdgeClick($event, edge)"
:edge-updater-radius="edgeUpdaterRadius" @dbl-click="onDoubleClick($event, edge)"
:marker-end="edge.markerEnd" @contextmenu="onEdgeContextMenu($event, edge)"
:marker-start="edge.markerStart" @mouseenter="onEdgeMouseEnter($event, edge)"
:style="getStyle(edge)" @mousemove="onEdgeMouseMove($event, edge)"
:class="getClass(edge)" @mouseleave="onEdgeMouseLeave($event, edge)"
@click="onEdgeClick($event, edge)" @source-mousedown="onEdgeUpdaterSourceMouseDown($event, edge)"
@dbl-click="onDoubleClick($event, edge)" @target-mousedown="onEdgeUpdaterTargetMouseDown($event, edge)"
@contextmenu="onEdgeContextMenu($event, edge)" />
@mouseenter="onEdgeMouseEnter($event, edge)" </g>
@mousemove="onEdgeMouseMove($event, edge)" </svg>
@mouseleave="onEdgeMouseLeave($event, edge)"
@source-mousedown="onEdgeUpdaterSourceMouseDown($event, edge)"
@target-mousedown="onEdgeUpdaterTargetMouseDown($event, edge)"
/>
</g>
</svg>
</template>
<template v-else>
<svg class="vue-flow__edges vue-flow__container">
<MarkerDefinitions :default-color="defaultMarkerColor" />
<g>
<EdgeWrapper
v-for="edge of getEdges"
:id="edge.id"
:key="edge.id"
: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"
:animated="edge.animated"
:selectable="selectable(edge.selectable)"
:selected="edge.selected"
:updatable="updatable(edge.updatable)"
: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)"
@dbl-click="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>
</template>
<svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container"> <svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
<ConnectionLine :source-node="sourceNode" /> <ConnectionLine :source-node="sourceNode" />
</svg> </svg>