refactor(edges): edges z-index 0 by default

# What's changed?

* only group edges by z-index when `elevateEdgesOnSelect` is true
* add `elevateEdgesOnSelect` option

packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -22,13 +22,14 @@ const {
   edgesUpdatable,
   elementsSelectable,
   getSelectedNodes,
+  nodesSelectionActive,
   getNode,
   getNodes,
   getEdges,
   getEdgeTypes,
-  setState,
   addSelectedEdges,
   noPanClassName,
+  elevateEdgesOnSelect,
 } = $(useVueFlow())
 
 const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectable : s)
@@ -57,16 +58,22 @@ const connectionLineVisible = $(
 let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
 
 onPaneReady(() => {
-  watch(
+  const stop = watch(
-    [$$(getSelectedNodes), $$(getEdges), $$(getNodes)],
+    [$$(elevateEdgesOnSelect), $$(getSelectedNodes), $$(getEdges), $$(getNodes)],
     () => {
-      nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
+      if (elevateEdgesOnSelect) {
+        nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
+      }
     },
     {
       flush: 'post',
       immediate: true,
     },
   )
+
+  onBeforeUnmount(() => {
+    stop()
+  })
 })
 
 const getType = (type?: string, template?: GraphEdge['template']) => {
@@ -96,9 +103,7 @@ const getType = (type?: string, template?: GraphEdge['template']) => {
 const onEdgeClick = (event: MouseEvent, edge: GraphEdge) => {
   const data = { event, edge }
   if (selectable(edge.selectable)) {
-    setState({
+    $$(nodesSelectionActive).value = false
-      nodesSelectionActive: false,
-    })
 
     addSelectedEdges([edge])
   }
@@ -156,49 +161,101 @@ export default {
 </script>
 
 <template>
-  <svg v-for="group of groups" :key="group.level" class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
+  <template v-if="elevateEdgesOnSelect">
-    <MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
+    <svg
-    <g>
+      v-for="group of groups"
-      <EdgeWrapper
+      :key="group.level"
-        v-for="edge of group.edges"
+      class="vue-flow__edges vue-flow__container"
-        :id="edge.id"
+      :style="`z-index: ${group.level}`"
-        :key="edge.id"
+    >
-        :type="getType(edge.type, edge.template)"
+      <MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />
-        :name="edge.type || 'default'"
+      <g>
-        :source="edge.source"
+        <EdgeWrapper
-        :target="edge.target"
+          v-for="edge of group.edges"
-        :target-handle-id="edge.targetHandle"
+          :id="edge.id"
-        :source-handle-id="edge.sourceHandle"
+          :key="edge.id"
-        :source-node="getNode(edge.source)"
+          :type="getType(edge.type, edge.template)"
-        :target-node="getNode(edge.target)"
+          :name="edge.type || 'default'"
-        :label="edge.label"
+          :source="edge.source"
-        :data="edge.data"
+          :target="edge.target"
-        :animated="edge.animated"
+          :target-handle-id="edge.targetHandle"
-        :selectable="selectable(edge.selectable)"
+          :source-handle-id="edge.sourceHandle"
-        :selected="edge.selected"
+          :source-node="getNode(edge.source)"
-        :updatable="updatable(edge.updatable)"
+          :target-node="getNode(edge.target)"
-        :label-style="edge.labelStyle"
+          :label="edge.label"
-        :label-show-bg="edge.labelShowBg"
+          :data="edge.data"
-        :label-bg-style="edge.labelBgStyle"
+          :animated="edge.animated"
-        :label-bg-padding="edge.labelBgPadding"
+          :selectable="selectable(edge.selectable)"
-        :label-bg-border-radius="edge.labelBgBorderRadius"
+          :selected="edge.selected"
-        :connection-mode="connectionMode"
+          :updatable="updatable(edge.updatable)"
-        :edge-updater-radius="edgeUpdaterRadius"
+          :label-style="edge.labelStyle"
-        :marker-end="edge.markerEnd"
+          :label-show-bg="edge.labelShowBg"
-        :marker-start="edge.markerStart"
+          :label-bg-style="edge.labelBgStyle"
-        :style="getStyle(edge)"
+          :label-bg-padding="edge.labelBgPadding"
-        :class="getClass(edge)"
+          :label-bg-border-radius="edge.labelBgBorderRadius"
-        @click="(e: MouseEvent) => onEdgeClick(e, edge)"
+          :connection-mode="connectionMode"
-        @dbl-click="(e: MouseEvent) => onDoubleClick(e, edge)"
+          :edge-updater-radius="edgeUpdaterRadius"
-        @contextmenu="(e: MouseEvent) => onEdgeContextMenu(e, edge)"
+          :marker-end="edge.markerEnd"
-        @mouseenter="(e: MouseEvent) => onEdgeMouseEnter(e, edge)"
+          :marker-start="edge.markerStart"
-        @mousemove="(e: MouseEvent) => onEdgeMouseMove(e, edge)"
+          :style="getStyle(edge)"
-        @mouseleave="(e: MouseEvent) => onEdgeMouseLeave(e, edge)"
+          :class="getClass(edge)"
-        @source-mousedown="(e: MouseEvent) => onEdgeUpdaterSourceMouseDown(e, edge)"
+          @click="onEdgeClick($event, edge)"
-        @target-mousedown="(e: MouseEvent) => onEdgeUpdaterTargetMouseDown(e, edge)"
+          @dbl-click="onDoubleClick($event, edge)"
-      />
+          @contextmenu="onEdgeContextMenu($event, edge)"
-    </g>
+          @mouseenter="onEdgeMouseEnter($event, edge)"
-  </svg>
+          @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-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
     <ConnectionLine :source-node="sourceNode" />
   </svg>

packages/vue-flow/src/container/VueFlow/VueFlow.vue

@@ -37,6 +37,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   connectOnClick: undefined,
   connectionLineStyle: undefined,
   autoConnect: undefined,
+  elevateEdgesOnSelect: undefined,
 })
 
 const emit = defineEmits<{

packages/vue-flow/src/store/state.ts

@@ -108,6 +108,7 @@ const defaultState = (): State => ({
   noWheelClassName: 'nowheel',
   noPanClassName: 'nopan',
   defaultEdgeOptions: undefined,
+  elevateEdgesOnSelect: false,
 
   vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
 })

packages/vue-flow/src/types/flow.ts

@@ -129,6 +129,8 @@ export interface FlowProps {
   noPanClassName?: string
   /** does not work for the `addEdge` utility! */
   defaultEdgeOptions?: DefaultEdgeOptions
+  /** elevates edges when selected and applies z-Index to put them above their nodes */
+  elevateEdgesOnSelect?: boolean
 }
 
 export type FlowOptions = FlowProps