Fix - VueUiDag - Set #free-node-label slot to be visible when #node slot is also employed

Author: graphieros

TestingArena/ArenaVueUiDag.vue

@@ -212,9 +212,9 @@ const configTheme = computed(() => ({
                     <LocalVueUiDag :dataset="dataset" :config="config" ref="local">
             <!-- <template #node-label="{ node }">
                 {{ node.label }}
-            </template> 
-            <template #node="{ node }">
-                <div style="width: 100%; height: 100%; border: 1px solid red; color: black">
+            </template>  -->
+            <!-- <template #node="{ node }">
+                <div style="width: 100%; height: 100%; border: 1px solid red; color: black;">
                     {{ node.label }}
                 </div>
             </template> -->

src/DAG/layout.js

@@ -249,29 +249,29 @@ function translateGraph(graph) {
     graphLabel.height = maximumY - minimumY + marginY;
 }
 
-function assignNodeIntersects(graph) {
-    const ENDPOINT_OFFSET = 4;
+function shortenPoint(point, neighborPoint, offset) {
+    if (!offset || !neighborPoint) {
+        return point;
+    }
 
-    function shortenPoint(point, neighborPoint, offset) {
-        if (!offset || !neighborPoint) {
-            return point;
-        }
+    const deltaX = neighborPoint.x - point.x;
+    const deltaY = neighborPoint.y - point.y;
+    const segmentLength = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
 
-        const deltaX = neighborPoint.x - point.x;
-        const deltaY = neighborPoint.y - point.y;
-        const segmentLength = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    if (!segmentLength || segmentLength <= offset) {
+        return point;
+    }
 
-        if (!segmentLength || segmentLength <= offset) {
-            return point;
-        }
+    const ratio = offset / segmentLength;
 
-        const ratio = offset / segmentLength;
+    return {
+        x: point.x + deltaX * ratio,
+        y: point.y + deltaY * ratio,
+    };
+}
 
-        return {
-            x: point.x + deltaX * ratio,
-            y: point.y + deltaY * ratio,
-        };
-    }
+function assignNodeIntersects(graph) {
+    const ENDPOINT_OFFSET = 4;
 
     graph.edges().forEach(edgeObject => {
         const edge = graph.edge(edgeObject);

src/components/vue-ui-dag.vue

@@ -1004,10 +1004,11 @@ defineExpose({
                                 autoOffset: true
                             })"
                         />
-                        <g v-if="$slots['free-node-label']">
-                            <slot name="free-node-label" v-bind="{ node, layoutData }"/>
-                        </g>
                     </template>
+                    
+                    <g v-if="$slots['free-node-label']">
+                        <slot name="free-node-label" v-bind="{ node, layoutData }"/>
+                    </g>
 
                     <!-- Full `node` slot to customize the node entirely using a div -->
                     <foreignObject