From 0be492b7c60c89c0a5131929e885456510977e13 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Nov 2021 13:40:06 +0100
Subject: [PATCH] feat: bind props to slots

* bind props to slots in edges, handle, nodes

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Edges/BezierEdge.vue     | 12 +++++++++++-
 src/components/Edges/EdgeText.vue       |  2 +-
 src/components/Edges/SmoothStepEdge.vue | 11 ++++++++++-
 src/components/Edges/StraightEdge.vue   | 11 ++++++++++-
 src/components/Handle/Handle.vue        |  2 +-
 src/components/Nodes/DefaultNode.vue    |  2 +-
 src/components/Nodes/InputNode.vue      |  2 +-
 src/components/Nodes/OutputNode.vue     |  2 +-
 8 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index b5dad861..f47b9c86 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -34,6 +34,7 @@ interface BezierEdgeProps extends EdgeProps {
   sourceHandleId?: ElementId
   targetHandleId?: ElementId
 }
+
 const props = withDefaults(defineProps<BezierEdgeProps>(), {
   selected: false,
   sourcePosition: Position.Bottom,
@@ -65,7 +66,16 @@ export default {
 </script>
 <template>
   <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
-  <slot>
+  <slot
+    :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"
+  >
     <EdgeText
       v-if="props.label"
       :x="centered[0]"
diff --git a/src/components/Edges/EdgeText.vue b/src/components/Edges/EdgeText.vue
index 1ff398c9..b130a617 100644
--- a/src/components/Edges/EdgeText.vue
+++ b/src/components/Edges/EdgeText.vue
@@ -44,7 +44,7 @@ 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">
-      <slot>
+      <slot v-bind="props">
         <component
           :is="props.label?.component"
           v-if="typeof props.label !== 'string' && typeof props.label?.component !== 'undefined'"
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index dac2baad..46fb95a6 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -68,7 +68,16 @@ export default {
 </script>
 <template>
   <path class="vue-flow__edge-path" :style="props.style" :d="path" :marker-end="markerEnd" />
-  <slot>
+  <slot
+    :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"
+  >
     <EdgeText
       v-if="props.label"
       :x="centered[0]"
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index ed17c84d..6f7ecead 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -70,7 +70,16 @@ export default {
 </script>
 <template>
   <path :style="props.style" class="vue-flow__edge-path" :d="path" :marker-end="markerEnd" />
-  <slot>
+  <slot
+    :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"
+  >
     <EdgeText
       v-if="props.label"
       :x="centerX"
diff --git a/src/components/Handle/Handle.vue b/src/components/Handle/Handle.vue
index 2361f451..a0fcb32f 100644
--- a/src/components/Handle/Handle.vue
+++ b/src/components/Handle/Handle.vue
@@ -43,6 +43,6 @@ const onMouseDownHandler = (event: MouseEvent) =>
     ]"
     @mousedown="onMouseDownHandler"
   >
-    <slot></slot>
+    <slot :node-id="nodeId" v-bind="props"></slot>
   </div>
 </template>
diff --git a/src/components/Nodes/DefaultNode.vue b/src/components/Nodes/DefaultNode.vue
index fef54e06..403bebac 100644
--- a/src/components/Nodes/DefaultNode.vue
+++ b/src/components/Nodes/DefaultNode.vue
@@ -23,7 +23,7 @@ export default {
 </script>
 <template>
   <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
-  <slot>
+  <slot v-bind="props">
     <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
     <span v-else v-html="props.data?.label"></span>
   </slot>
diff --git a/src/components/Nodes/InputNode.vue b/src/components/Nodes/InputNode.vue
index fa73ef4c..c13066b7 100644
--- a/src/components/Nodes/InputNode.vue
+++ b/src/components/Nodes/InputNode.vue
@@ -20,7 +20,7 @@ export default {
 }
 </script>
 <template>
-  <slot>
+  <slot v-bind="props">
     <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
     <span v-else v-html="props.data?.label"></span>
   </slot>
diff --git a/src/components/Nodes/OutputNode.vue b/src/components/Nodes/OutputNode.vue
index 61c4846b..ab9b374d 100644
--- a/src/components/Nodes/OutputNode.vue
+++ b/src/components/Nodes/OutputNode.vue
@@ -20,7 +20,7 @@ export default {
 }
 </script>
 <template>
-  <slot>
+  <slot v-bind="props">
     <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
     <span v-else v-html="props.data?.label"></span>
   </slot>