From 8b82c4fb33c2edb75c249c4c4148200e68a7dc0f Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Nov 2021 03:16:16 +0100
Subject: [PATCH] feat: Add slots to edges and nodes

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Edges/BezierEdge.vue     | 24 ++++++++++++-----------
 src/components/Edges/EdgeText.vue       | 26 +++++++++++++++----------
 src/components/Edges/SmoothStepEdge.vue | 24 ++++++++++++-----------
 src/components/Edges/StepEdge.vue       |  4 +++-
 src/components/Edges/StraightEdge.vue   | 24 ++++++++++++-----------
 src/components/Nodes/DefaultNode.vue    |  6 ++++--
 src/components/Nodes/InputNode.vue      |  6 ++++--
 src/components/Nodes/OutputNode.vue     |  6 ++++--
 8 files changed, 70 insertions(+), 50 deletions(-)

diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 194b0028..b5dad861 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -65,15 +65,17 @@ export default {
 </script>
 <template>
   <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
-  <EdgeText
-    v-if="props.label"
-    :x="centered[0]"
-    :y="centered[1]"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  />
+  <slot>
+    <EdgeText
+      v-if="props.label"
+      :x="centered[0]"
+      :y="centered[1]"
+      :label="props.label"
+      :label-style="props.labelStyle"
+      :label-show-bg="props.labelShowBg"
+      :label-bg-style="props.labelBgStyle"
+      :label-bg-padding="props.labelBgPadding"
+      :label-bg-border-radius="props.labelBgBorderRadius"
+    />
+  </slot>
 </template>
diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index aa58b50e..1ff398c9 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/src/components/Edges/EdgeText.vue
@@ -4,7 +4,12 @@ import { CSSProperties, HTMLAttributes } from 'vue'
 interface EdgeTextProps extends HTMLAttributes {
   x: number
   y: number
-  label?: any
+  label?:
+    | string
+    | {
+        component: any
+        props?: any
+      }
   labelStyle?: CSSProperties
   labelShowBg?: boolean
   labelBgStyle?: any
@@ -39,15 +44,16 @@ const bgPadding = computed(() => [props.labelBgPadding[0], props.labelBgPadding[
       :ry="props.labelBgBorderRadius"
     />
     <text ref="edge-text" class="vue-flow__edge-text" :y="height / 2" dy="0.3em" :style="props.labelStyle">
-      <component
-        :is="props.label.component"
-        v-if="typeof props.label.component !== 'undefined'"
-        v-bind="{ ...props, ...props.label?.props, width, height, x, y }"
-      />
-      <template v-else v-html="props.label">
-        {{ props.label }}
-      </template>
+      <slot>
+        <component
+          :is="props.label?.component"
+          v-if="typeof props.label !== 'string' && typeof props.label?.component !== 'undefined'"
+          v-bind="{ ...props, ...props.label?.props, width, height, x, y }"
+        />
+        <template v-else v-html="props.label">
+          {{ props.label }}
+        </template>
+      </slot>
     </text>
-    <slot></slot>
   </g>
 </template>
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index d71f2c50..dac2baad 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -68,15 +68,17 @@ export default {
 </script>
 <template>
   <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
-  <EdgeText
-    v-if="props.label"
-    :x="centered[0]"
-    :y="centered[1]"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  />
+  <slot>
+    <EdgeText
+      v-if="props.label"
+      :x="centered[0]"
+      :y="centered[1]"
+      :label="props.label"
+      :label-style="props.labelStyle"
+      :label-show-bg="props.labelShowBg"
+      :label-bg-style="props.labelBgStyle"
+      :label-bg-padding="props.labelBgPadding"
+      :label-bg-border-radius="props.labelBgBorderRadius"
+    />
+  </slot>
 </template>
diff --git a/src/components/Edges/StepEdge.vue b/src/components/Edges/StepEdge.vue
index 9c345148..09761376 100644
--- a/src/components/Edges/StepEdge.vue
+++ b/src/components/Edges/StepEdge.vue
@@ -44,5 +44,7 @@ const props = withDefaults(defineProps<StepEdgeProps>(), {
 })
 </script>
 <template>
-  <SmoothStepEdge v-bind="props" :border-radius="0" />
+  <SmoothStepEdge v-bind="props" :border-radius="0">
+    <slot />
+  </SmoothStepEdge>
 </template>
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index 45ace364..ed17c84d 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -70,15 +70,17 @@ export default {
 </script>
 <template>
   <path :style="props.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
-  <EdgeText
-    v-if="props.label"
-    :x="centerX"
-    :y="centerY"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  />
+  <slot>
+    <EdgeText
+      v-if="props.label"
+      :x="centerX"
+      :y="centerY"
+      :label="props.label"
+      :label-style="props.labelStyle"
+      :label-show-bg="props.labelShowBg"
+      :label-bg-style="props.labelBgStyle"
+      :label-bg-padding="props.labelBgPadding"
+      :label-bg-border-radius="props.labelBgBorderRadius"
+    />
+  </slot>
 </template>
diff --git a/src/components/Nodes/DefaultNode.vue b/src/components/Nodes/DefaultNode.vue
index a838915b..fef54e06 100644
--- a/src/components/Nodes/DefaultNode.vue
+++ b/src/components/Nodes/DefaultNode.vue
@@ -23,7 +23,9 @@ export default {
 </script>
 <template>
   <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
-  <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-  <span v-else v-html="props.data?.label"></span>
+  <slot>
+    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
+    <span v-else v-html="props.data?.label"></span>
+  </slot>
   <Handle type="source" :position="props.sourcePosition" :is-connectable="props.connectable" />
 </template>
diff --git a/src/components/Nodes/InputNode.vue b/src/components/Nodes/InputNode.vue
index 84b49daf..fa73ef4c 100644
--- a/src/components/Nodes/InputNode.vue
+++ b/src/components/Nodes/InputNode.vue
@@ -20,7 +20,9 @@ export default {
 }
 </script>
 <template>
-  <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-  <span v-else v-html="props.data?.label"></span>
+  <slot>
+    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
+    <span v-else v-html="props.data?.label"></span>
+  </slot>
   <Handle type="source" :position="props.sourcePosition" :connectable="props.connectable" />
 </template>
diff --git a/src/components/Nodes/OutputNode.vue b/src/components/Nodes/OutputNode.vue
index 4da0b183..61c4846b 100644
--- a/src/components/Nodes/OutputNode.vue
+++ b/src/components/Nodes/OutputNode.vue
@@ -20,7 +20,9 @@ export default {
 }
 </script>
 <template>
-  <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
-  <span v-else v-html="props.data?.label"></span>
+  <slot>
+    <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
+    <span v-else v-html="props.data?.label"></span>
+  </slot>
   <Handle type="source" :position="props.targetPosition" :is-connectable="props.connectable" />
 </template>