feat: edge label

package.json

@@ -48,6 +48,7 @@
     "@vuex-orm/core": "^0.36.4",
     "codemirror": "^6.0.1",
     "compare-versions": "^4.1.2",
+    "cron-parser": "^4.6.0",
     "crypto-js": "^4.1.1",
     "css-selector-generator": "^3.6.4",
     "dagre": "^0.8.5",

src/components/newtab/workflow/editor/EditorCustomEdge.vue

@@ -6,10 +6,26 @@
     :d="edgePath"
     :marker-end="markerEnd"
   />
+  <edge-text
+    v-if="label"
+    :x="center[0]"
+    :y="center[1]"
+    :label="label"
+    :label-style="{ fill: 'white' }"
+    :label-show-bg="true"
+    :label-bg-style="{ fill: '#3b82f6' }"
+    :label-bg-padding="[2, 4]"
+    :label-bg-border-radius="2"
+  />
 </template>
 <script setup>
 import { computed } from 'vue';
-import { getBezierPath, getSmoothStepPath } from '@braks/vue-flow';
+import {
+  getBezierPath,
+  getSmoothStepPath,
+  getEdgeCenter,
+  EdgeText,
+} from '@braks/vue-flow';
 
 const props = defineProps({
   id: {
@@ -50,6 +66,11 @@ const props = defineProps({
     required: false,
     default: '',
   },
+  label: {
+    type: String,
+    required: false,
+    default: '',
+  },
   style: {
     type: Object,
     required: false,
@@ -57,6 +78,16 @@ const props = defineProps({
   },
 });
 
+const center = computed(() => {
+  if (!props.label) return null;
+
+  return getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  });
+});
 const edgePath = computed(() => {
   const options = {
     sourceX: props.sourceX,

yarn.lock

@@ -2746,6 +2746,13 @@ crelt@^1.0.5:
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
   integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
 
+cron-parser@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/cron-parser/-/cron-parser-4.6.0.tgz#404c3fdbff10ae80eef6b709555d577ef2fd2e0d"
+  integrity sha512-guZNLMGUgg6z4+eGhmHGw7ft+v6OQeuHzd1gcLxCo9Yg/qoxmG3nindp2/uwGCLizEisf2H0ptqeVXeoCpP6FA==
+  dependencies:
+    luxon "^3.0.1"
+
 cross-env@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
@@ -4696,6 +4703,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+luxon@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.0.3.tgz#573e65531efd3d92265feb640f02ba7a192e2388"
+  integrity sha512-+EfHWnF+UT7GgTnq5zXg3ldnTKL2zdv7QJgsU5bjjpbH17E3qi/puMhQyJVYuCq+FRkogvB5WB6iVvUr+E4a7w==
+
 magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"