feat: add editor curvature settings

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -73,6 +73,7 @@ import {
   watch,
   onBeforeUnmount,
 } from 'vue';
+import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { compare } from 'compare-versions';
@@ -109,6 +110,7 @@ export default {
 
     const { t } = useI18n();
     const route = useRoute();
+    const store = useStore();
 
     const contextMenuItems = {
       block: [
@@ -366,7 +368,13 @@ export default {
       const context = getCurrentInstance().appContext.app._context;
       const element = document.querySelector('#drawflow');
 
-      editor.value = drawflow(element, { context, options: { reroute: true } });
+      editor.value = drawflow(element, {
+        context,
+        options: {
+          reroute: true,
+          ...store.state.settings.editor,
+        },
+      });
 
       const editorStates =
         parseJSON(localStorage.getItem('editor-states'), {}) || {};

src/lib/drawflow.js

@@ -8,6 +8,10 @@ export default function (element, { context, options = {} }) {
   const editor = new Drawflow(element, { render, version: 3, h }, context);
 
   editor.useuuid = true;
+  editor.curvature = 0;
+  editor.reroute_curvature = 0;
+  editor.reroute_curvature_start_end = 0;
+  editor.reroute_fix_curvature = true;
 
   Object.entries(options).forEach(([key, value]) => {
     editor[key] = value;

src/lib/v-remixicon.js

@@ -11,6 +11,7 @@ import {
   riEyeLine,
   riAddLine,
   riSortAsc,
+  riMindMap,
   riKey2Line,
   riTBoxLine,
   riSaveLine,
@@ -118,6 +119,7 @@ export const icons = {
   riEyeLine,
   riAddLine,
   riSortAsc,
+  riMindMap,
   riKey2Line,
   riTBoxLine,
   riSaveLine,

src/locales/en/newtab.json

@@ -31,6 +31,7 @@
     },
     "menu": {
       "backup": "Backup Workflows",
+      "editor": "Editor",
       "general": "General",
       "shortcuts": "Shortcuts",
       "about": "About"

src/newtab/pages/Settings.vue

@@ -2,7 +2,7 @@
   <div class="container pt-8 pb-4">
     <h1 class="text-2xl font-semibold mb-10">{{ t('common.settings') }}</h1>
     <div class="flex items-start">
-      <ui-list class="w-64 mr-12 space-y-2">
+      <ui-list class="w-64 mr-12 space-y-2 sticky top-8">
         <router-link
           v-for="menu in menus"
           :key="menu.id"

src/newtab/pages/settings/index.vue → src/newtab/pages/settings/SettingsIndex.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-8">
+  <div class="mb-12">
     <p class="font-semibold mb-1">{{ t('settings.theme') }}</p>
     <div class="flex items-center space-x-4">
       <div
@@ -54,11 +54,54 @@
       {{ t('settings.language.reloadPage') }}
     </p>
   </div>
+  <div class="mt-12 max-w-2xl">
+    <p class="font-semibold">Editor Curvature</p>
+    <div class="flex space-x-2 items-end">
+      <ui-input
+        :model-value="settings.editor.curvature"
+        label="Line"
+        type="number"
+        min="0"
+        max="2"
+        class="w-full"
+        placeholder="0.5"
+        @change="updateSetting('editor.curvature', curvatureLimit($event))"
+      />
+      <ui-input
+        :model-value="settings.editor.reroute_curvature"
+        label="Reroute"
+        type="number"
+        class="w-full"
+        min="0"
+        max="2"
+        placeholder="0.5"
+        @change="
+          updateSetting('editor.reroute_curvature', curvatureLimit($event))
+        "
+      />
+      <ui-input
+        :model-value="settings.editor.reroute_curvature_start_end"
+        label="Reroute first & last point"
+        type="number"
+        class="w-full"
+        min="0"
+        max="2"
+        placeholder="0.5"
+        @change="
+          updateSetting(
+            'editor.reroute_curvature_start_end',
+            curvatureLimit($event)
+          )
+        "
+      />
+    </div>
+  </div>
 </template>
 <script setup>
 import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
+import browser from 'webextension-polyfill';
 import { useTheme } from '@/composable/theme';
 import { supportLocales } from '@/utils/shared';
 
@@ -69,9 +112,23 @@ const theme = useTheme();
 const isLangChange = ref(false);
 const settings = computed(() => store.state.settings);
 
-async function updateLanguage(value) {
+function curvatureLimit(value) {
+  if (value > 2) return 2;
+  if (value < 0) return 0;
+
+  return value;
+}
+function updateSetting(path, value) {
+  store.commit('updateStateNested', {
+    value,
+    path: `settings.${path}`,
+  });
+
+  browser.storage.local.set({ settings: settings.value });
+}
+function updateLanguage(value) {
   isLangChange.value = true;
 
-  store.dispatch('updateSettings', { locale: value });
+  updateSetting('locale', value);
 }
 </script>

src/newtab/router.js

@@ -9,10 +9,10 @@ import CollectionsDetails from './pages/collections/[id].vue';
 import Logs from './pages/Logs.vue';
 import LogsDetails from './pages/logs/[id].vue';
 import Settings from './pages/Settings.vue';
-import SettingsIndex from './pages/settings/index.vue';
-import SettingsAbout from './pages/settings/About.vue';
-import SettingsShortcuts from './pages/settings/Shortcuts.vue';
-import SettingsBackup from './pages/settings/Backup.vue';
+import SettingsIndex from './pages/settings/SettingsIndex.vue';
+import SettingsAbout from './pages/settings/SettingsAbout.vue';
+import SettingsShortcuts from './pages/settings/SettingsShortcuts.vue';
+import SettingsBackup from './pages/settings/SettingsBackup.vue';
 
 const routes = [
   {

src/store/index.js

@@ -20,6 +20,11 @@ const store = createStore({
     workflowHosts: {},
     settings: {
       locale: 'en',
+      editor: {
+        curvature: 0.5,
+        reroute_curvature: 0.5,
+        reroute_curvature_start_end: 0.5,
+      },
     },
     userDataRetrieved: false,
   }),
@@ -41,17 +46,6 @@ const store = createStore({
       ),
   },
   actions: {
-    updateSettings({ state, commit }, data) {
-      commit('updateState', {
-        key: 'settings',
-        value: {
-          ...state.settings,
-          ...data,
-        },
-      });
-
-      browser.storage.local.set({ settings: state.settings });
-    },
     async retrieve({ dispatch, getters, commit, state }, keys = 'workflows') {
       try {
         const data = await browser.storage.local.get(keys);