feat: update editor settings

src/components/newtab/workflow/WorkflowEditor.vue

@@ -46,8 +46,15 @@
 <script setup>
 import { onMounted, onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { VueFlow, Background, MiniMap, useVueFlow } from '@braks/vue-flow';
+import {
+  VueFlow,
+  Background,
+  MiniMap,
+  useVueFlow,
+  MarkerType,
+} from '@braks/vue-flow';
 import cloneDeep from 'lodash.clonedeep';
+import { useStore } from '@/stores/main';
 import { tasks, categories } from '@/utils/shared';
 import EditorSearchBlocks from './editor/EditorSearchBlocks.vue';
 
@@ -105,6 +112,7 @@ const nodeTypes = blockComponents.keys().reduce((acc, key) => {
 const getPosition = (position) => (Array.isArray(position) ? position : [0, 0]);
 
 const { t } = useI18n();
+const store = useStore();
 const editor = useVueFlow({
   id: props.id,
   minZoom: 0.4,
@@ -118,9 +126,28 @@ const editor = useVueFlow({
 });
 editor.onConnect((params) => {
   params.class = `source-${params.sourceHandle} target-${params.targetHandle}`;
+  /* eslint-disable-next-line */
+  params = applyEdgeSettings(params);
+
   editor.addEdges([params]);
 });
 
+function applyEdgeSettings(edge) {
+  const settings = store.settings.editor;
+  if (settings.lineType !== 'default') {
+    edge.type = settings.lineType;
+  } else {
+    delete edge.type;
+  }
+
+  if (settings.arrow) {
+    edge.markerEnd = MarkerType.ArrowClosed;
+  } else {
+    delete edge.markerEnd;
+  }
+
+  return edge;
+}
 function minimapNodeClassName({ label }) {
   const { category } = tasks[label];
   const { color } = categories[category];
@@ -158,8 +185,16 @@ function onMousedown(event) {
   }
 }
 function applyFlowData() {
+  const settings = store.settings.editor;
+  const edges = (props.data.edges || []).map((edge) => applyEdgeSettings(edge));
+
+  if (settings.snapToGrid) {
+    editor.snapToGrid.value = true;
+    editor.snapGrid.value = Object.values(settings.snapGrid);
+  }
+
   editor.setNodes(props.data.nodes || []);
-  editor.setEdges(props.data.edges || []);
+  editor.setEdges(edges);
   editor.setTransform({
     x: props.data.x || 0,
     y: props.data.y || 0,

src/locales/en/newtab.json

@@ -64,6 +64,10 @@
       "arrow": {
         "title": "Line arrow",
         "description": "Add an arrow at the end of the line"
+      },
+      "snapGrid": {
+        "title": "Snap to the grid",
+        "description": "Snap to the grid when moving a block"
       }
     },
     "deleteLog": {

src/newtab/pages/settings/SettingsEditor.vue

@@ -1,61 +1,36 @@
 <template>
-  <p>Hello world</p>
-</template>
-<!-- <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 curvatureOptions"
+        v-for="item in lineTypes"
         :key="item.id"
         class="cursor-pointer"
         role="button"
-        @click="updateSetting('disableCurvature', item.value)"
+        @click="settings.lineType = item.id"
       >
         <div
           :class="{
-            'ring ring-accent': item.value === settings.editor.disableCurvature,
+            'ring ring-accent': item.id === settings.lineType,
           }"
           class="p-0.5 rounded-lg"
         >
           <img
-            :src="require(`@/assets/images/${item.id}.png`)"
+            :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">
-          {{ t(`common.${item.name}`) }}
+          {{ item.name }}
         </span>
       </div>
     </div>
-    <transition-expand>
-      <div
-        v-if="!settings.editor.disableCurvature"
-        class="flex space-x-2 items-end mt-1"
-      >
-        <ui-input
-          v-for="item in curvatureSettings"
-          :key="item.id"
-          :model-value="settings.editor[item.key]"
-          :label="t(`settings.editor.curvature.${item.id}`)"
-          type="number"
-          min="0"
-          max="1"
-          class="w-full"
-          placeholder="0.5"
-          @change="updateSetting(item.key, curvatureLimit($event))"
-        />
-      </div>
-    </transition-expand>
-    <ui-list class="mt-8">
+    <ui-list class="mt-8 space-y-2">
       <ui-list-item small>
-        <ui-switch
-          :model-value="settings.editor.arrow"
-          @change="updateSetting('arrow', $event)"
-        />
+        <ui-switch v-model="settings.arrow" />
         <div class="flex-1 ml-4">
           <p class="leading-tight">
             {{ t('settings.editor.arrow.title') }}
@@ -65,43 +40,62 @@
           </p>
         </div>
       </ui-list-item>
+      <ui-list-item small>
+        <ui-switch v-model="settings.snapToGrid" />
+        <div class="flex-1 ml-4">
+          <p class="leading-tight">
+            {{ t('settings.editor.snapGrid.title') }}
+          </p>
+          <p class="text-gray-600 text-sm leading-tight dark:text-gray-200">
+            {{ t('settings.editor.snapGrid.description') }}
+          </p>
+        </div>
+      </ui-list-item>
+      <transition-expand>
+        <div
+          v-if="settings.snapToGrid"
+          class="pl-16 ml-2 space-x-2"
+          style="margin-top: 0"
+        >
+          <ui-input
+            v-model.number="settings.snapGrid[0]"
+            type="number"
+            label="X Axis"
+          />
+          <ui-input
+            v-model.number="settings.snapGrid[1]"
+            type="number"
+            label="Y Axis"
+          />
+        </div>
+      </transition-expand>
     </ui-list>
   </div>
 </template>
 <script setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
+import { reactive, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import browser from 'webextension-polyfill';
+import cloneDeep from 'lodash.clonedeep';
+import { useStore } from '@/stores/main';
 
-const curvatureSettings = [
-  { id: 'line', key: 'curvature' },
-  { id: 'reroute', key: 'reroute_curvature' },
-  { id: 'rerouteFirstLast', key: 'reroute_curvature_start_end' },
-];
-const curvatureOptions = [
-  { id: 'curvature', value: false, name: 'enable' },
-  { id: 'no-curvature', value: true, name: 'disable' },
+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();
 
-const settings = computed(() => store.state.settings);
-
-function updateSetting(path, value) {
-  store.commit('updateStateNested', {
-    value,
-    path: `settings.editor.${path}`,
-  });
+const settings = reactive({});
 
-  browser.storage.local.set({ settings: settings.value });
-}
-function curvatureLimit(value) {
-  if (value > 1) return 1;
-  if (value < 0) return 0;
+watch(settings, () => {
+  store.updateSettings({ editor: settings });
+});
 
-  return value;
-}
+onMounted(() => {
+  Object.assign(settings, cloneDeep(store.settings.editor));
+});
 </script>
- -->

src/stores/main.js

@@ -17,10 +17,9 @@ export const useStore = defineStore('main', {
       deleteLogAfter: 30,
       editor: {
         arrow: false,
-        disableCurvature: false,
-        curvature: 0.5,
-        reroute_curvature: 0.5,
-        reroute_curvature_start_end: 0.5,
+        snapToGrid: false,
+        lineType: 'default',
+        snapGrid: { 0: 15, 1: 15 },
       },
     },
     retrieved: true,
@@ -32,8 +31,9 @@ export const useStore = defineStore('main', {
         this.retrieved = true;
       });
     },
-    updateSettings(settings = {}) {
-      deepmerge(this.settings, settings);
+    async updateSettings(settings = {}) {
+      this.settings = deepmerge(this.settings, settings);
+      await this.saveToStorage('settings');
     },
   },
 });

src/stores/workflow.js

@@ -145,7 +145,7 @@ export const useWorkflowStore = defineStore('workflow', {
       if (!this.workflows[id]) return null;
 
       if (deep) {
-        deepmerge(this.workflows[id], data);
+        this.workflows[id] = deepmerge(this.workflows[id], data);
       } else {
         Object.assign(this.workflows[id], data);
       }