Fix - VueUiDag - Place #free-node-label slot on the last svg layer

Author: graphieros

TestingArena/ArenaVueUiDag.vue

@@ -236,7 +236,7 @@ const configTheme = computed(() => ({
         <template #local>
                     <LocalVueUiDag :dataset="dataset" :config="config" ref="local">
             <!-- <template #node-label="{ node }">
-                {{ node.label }}
+                TEST
             </template>  -->
             <!-- <template #node="{ node }">
                 <div style="width: 100%; height: 100%; border: 1px solid red; color: black;">
@@ -245,8 +245,8 @@ const configTheme = computed(() => ({
             </template> -->
             <!-- <template #tooltip-midpoint="{ edge }">
                 {{ edge }}
-            </template>
-            <template #tooltip-node="{ node }">
+            </template> -->
+            <!-- <template #tooltip-node="{ node }">
                 {{ node }}
             </template> -->
             <!-- <template #free-node-label="{ node, orientation }">

src/components/vue-ui-dag.vue

@@ -1167,7 +1167,50 @@ defineExpose({
                             :style="{
                                 cursor: FINAL_CONFIG.style.chart.nodes.tooltip.showOnClick ? 'pointer' : 'default'
                             }"
-                        />
+                        />                        
+                    </template>
+
+                    <!-- Full `node` slot to customize the node entirely using a div -->
+                    <foreignObject 
+                        v-if="$slots.node"
+                        :x="node.x - node.width / 2"
+                        :y="node.y - node.height / 2"
+                        :width="node.width"
+                        :height="node.height"
+                    >
+                        <slot name="node" v-bind="{ node, orientation: direction }"/>
+                    </foreignObject>
+                </g>
+            </g>
+
+            <!-- Edge arrows -->
+            <g class="vue-ui-dag-edges">
+                <path 
+                    v-for="edge in layoutData.edges" 
+                    :key="edge.id" 
+                    :d="edge.pathData" 
+                    fill="none" 
+                    stroke="transparent"
+                    :stroke-width="FINAL_CONFIG.style.chart.edges.strokeWidth * ((edge.from === highlightedNodeId || edge.id === tooltipEdge?.id) ? 1.3 : 1)" 
+                    stroke-linecap="round" 
+                    stroke-linejoin="round"
+                    :marker-end="layoutData.arrowShape === 'undirected'
+                        ? null
+                        : `url(#${makeMarkerId(edge.original?.color || FINAL_CONFIG.style.chart.edges.stroke)})`"
+                    style="pointer-events: none; transition: stroke-width 0.2s ease-in-out"
+                />
+            </g>
+
+            <!-- Node labels (last layer to overlap edges when offset is applied) -->
+            <g class="vue-ui-dag-node-labels">
+                <g 
+                    v-for="node in layoutData.nodes" 
+                    :key="node.id" 
+                    @click.stop="FINAL_CONFIG.style.chart.nodes.tooltip.showOnClick && showNodeTooltip(node)"
+                    @mouseenter="highlightedNodeId = node.id"
+                    @mouseleave="highlightedNodeId = null"
+                >
+                    <template v-if="!$slots['free-node-label']">
                         <!-- with `node-label` slot -->
                         <text
                             v-if="$slots['node-label']"
@@ -1186,7 +1229,7 @@ defineExpose({
                         <!-- default label, multiline when provided with /n -->
                         <text 
                             data-cy-node-label
-                            v-else-if="!$slots['free-node-label']"
+                            v-else-if="!$slots['free-node-label'] && !$slots.node"
                             :x="node.x" 
                             :y="node.y + FINAL_CONFIG.style.chart.nodes.labels.fontSize / 3" 
                             text-anchor="middle" 
@@ -1208,38 +1251,9 @@ defineExpose({
                     <g v-if="$slots['free-node-label']">
                         <slot name="free-node-label" v-bind="{ node, layoutData, orientation: direction }"/>
                     </g>
-
-                    <!-- Full `node` slot to customize the node entirely using a div -->
-                    <foreignObject 
-                        v-if="$slots.node"
-                        :x="node.x - node.width / 2"
-                        :y="node.y - node.height / 2"
-                        :width="node.width"
-                        :height="node.height"
-                    >
-                        <slot name="node" v-bind="{ node, orientation: direction }"/>
-                    </foreignObject>
                 </g>
             </g>
 
-            <!-- Edge arrows -->
-            <g class="vue-ui-dag-edges">
-                <path 
-                    v-for="edge in layoutData.edges" 
-                    :key="edge.id" 
-                    :d="edge.pathData" 
-                    fill="none" 
-                    stroke="transparent"
-                    :stroke-width="FINAL_CONFIG.style.chart.edges.strokeWidth * ((edge.from === highlightedNodeId || edge.id === tooltipEdge?.id) ? 1.3 : 1)" 
-                    stroke-linecap="round" 
-                    stroke-linejoin="round"
-                    :marker-end="layoutData.arrowShape === 'undirected'
-                        ? null
-                        : `url(#${makeMarkerId(edge.original?.color || FINAL_CONFIG.style.chart.edges.stroke)})`"
-                    style="pointer-events: none; transition: stroke-width 0.2s ease-in-out"
-                />
-            </g>
-
             <slot name="svg" :svg="{ 
                 drawingArea: panZoomViewBox,
                 data: layoutData,