feat: change editor default edge

src/components/newtab/workflow/WorkflowEditor.vue

@@ -3,9 +3,9 @@
     :id="props.id"
     :class="{ disabled: isDisabled }"
     :default-edge-options="{
+      type: 'custom',
       updatable: true,
       selectable: true,
-      type: settings.lineType,
       markerEnd: settings.arrow ? MarkerType.ArrowClosed : '',
     }"
   >
@@ -56,6 +56,9 @@
         @update="updateBlockData(nodeProps.id, $event)"
       />
     </template>
+    <template #edge-custom="edgeProps">
+      <editor-custom-edge v-bind="edgeProps" />
+    </template>
   </vue-flow>
 </template>
 <script setup>
@@ -72,6 +75,7 @@ import cloneDeep from 'lodash.clonedeep';
 import { useStore } from '@/stores/main';
 import { categories } from '@/utils/shared';
 import { getBlocks } from '@/utils/getSharedData';
+import EditorCustomEdge from './editor/EditorCustomEdge.vue';
 import EditorSearchBlocks from './editor/EditorSearchBlocks.vue';
 
 const props = defineProps({

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

@@ -0,0 +1,81 @@
+<template>
+  <path
+    :id="id"
+    :style="style"
+    class="vue-flow__edge-path"
+    :d="edgePath"
+    :marker-end="markerEnd"
+  />
+</template>
+<script setup>
+import { computed } from 'vue';
+import { getBezierPath, getSmoothStepPath } from '@braks/vue-flow';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  sourceX: {
+    type: Number,
+    required: true,
+  },
+  sourceY: {
+    type: Number,
+    required: true,
+  },
+  targetX: {
+    type: Number,
+    required: true,
+  },
+  targetY: {
+    type: Number,
+    required: true,
+  },
+  sourcePosition: {
+    type: String,
+    required: true,
+  },
+  targetPosition: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+    required: false,
+    default: () => ({}),
+  },
+  markerEnd: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  style: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+});
+
+const edgePath = computed(() => {
+  const options = {
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  };
+
+  if (props.sourceX > props.targetX) {
+    return getSmoothStepPath(options);
+  }
+
+  return getBezierPath(options);
+});
+</script>
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>

src/newtab/pages/settings/SettingsEditor.vue

@@ -1,34 +1,6 @@
 <template>
   <div class="max-w-2xl">
-    <p class="font-semibold">
-      {{ t('settings.editor.curvature.title') }}
-    </p>
-    <div class="flex items-center space-x-4 mt-2">
-      <div
-        v-for="item in lineTypes"
-        :key="item.id"
-        class="cursor-pointer"
-        role="button"
-        @click="settings.lineType = item.id"
-      >
-        <div
-          :class="{
-            'ring ring-accent': item.id === settings.lineType,
-          }"
-          class="p-0.5 rounded-lg"
-        >
-          <img
-            :src="require(`@/assets/images/${item.img}.png`)"
-            width="140"
-            class="rounded-lg"
-          />
-        </div>
-        <span class="text-sm text-gray-600 dark:text-gray-200 ml-1">
-          {{ item.name }}
-        </span>
-      </div>
-    </div>
-    <p class="font-semibold mt-8">Zoom</p>
+    <p class="font-semibold">Zoom</p>
     <div class="flex items-center mt-1 space-x-4">
       <ui-input
         v-model.number="settings.minZoom"
@@ -91,14 +63,6 @@ import { useI18n } from 'vue-i18n';
 import cloneDeep from 'lodash.clonedeep';
 import { useStore } from '@/stores/main';
 
-const lineTypes = [
-  { id: 'default', name: 'Default', img: 'default' },
-  { id: 'step', name: 'Step', img: 'step' },
-  { id: 'straight', name: 'Straight', img: 'straight' },
-  { id: 'smoothstep', name: 'Smooth step', img: 'smooth-step' },
-  { id: 'simplebezier', name: 'Simple bezier', img: 'default' },
-];
-
 const { t } = useI18n();
 const store = useStore();