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) {
nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
} else {
groups = [
{
isMaxLevel: true,
edges: getEdges,
level: 0,
},
]
}
},
{
@@ -163,101 +171,49 @@ export default {
</script>
<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}`"
>
<MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
<g>
<EdgeWrapper
v-for="edge of group.edges"
: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>
<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-for="group of groups" :key="group.level" class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
<MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
<g>
<EdgeWrapper
v-for="edge of group.edges"
: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>
<svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
<ConnectionLine :source-node="sourceNode" />
</svg>