feat: disable "insert default column" by default

src/components/block/BlockGroup2.vue

@@ -8,7 +8,7 @@
     style="
       min-width: 400px;
       min-height: 300px;
-      border-color: '#2563eb';
+      border-color: #2563eb;
       background-color: rgb(37, 99, 235, 0.3);
     "
   >
@@ -20,6 +20,12 @@
         class="px-4 py-2 bg-white rounded-lg"
         @input="emit('update', { name: $event.target.value })"
       />
+      <div class="flex-1" />
+      <v-remixicon
+        name="riDeleteBin7Line"
+        class="cursor-pointer"
+        @click="$emit('delete', id)"
+      />
     </div>
     <span
       ref="dragHandle"
@@ -30,7 +36,6 @@
 </template>
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { debounce } from '@/utils/helper';
 
 defineProps({
   id: {
@@ -70,7 +75,7 @@ const initialRect = {
 
 const dragHandle = ref(null);
 
-const onMousemove = debounce((event) => {
+function onMousemove(event) {
   event.preventDefault();
   event.stopPropagation();
 
@@ -81,7 +86,7 @@ const onMousemove = debounce((event) => {
   parent.style.height = `${height}px`;
 
   emit('update', { height, width });
-}, 100);
+}
 
 function onMouseup() {
   document.documentElement.removeEventListener('mouseup', onMouseup);

src/components/newtab/workflow/edit/EditAutocomplete.vue

@@ -1,6 +1,6 @@
 <template>
   <ui-autocomplete
-    :disabled="disabled"
+    :disabled="true"
     :items="autocompleteList"
     :trigger-char="['{{', '}}']"
     :custom-filter="autocompleteFilter"

src/newtab/pages/workflows/[id].vue

@@ -494,31 +494,39 @@ function autoAlign() {
   });
   graph._isMultigraph = true;
   graph.setDefaultEdgeLabel(() => ({}));
-  editor.value.getNodes.value.forEach(({ id, label, dimensions }) => {
-    graph.setNode(id, {
-      label,
-      width: dimensions.width,
-      height: dimensions.height,
-    });
-  });
+  editor.value.getNodes.value.forEach(
+    ({ id, label, dimensions, parentNode }) => {
+      if (label === 'blocks-group-2' || parentNode) return;
+
+      graph.setNode(id, {
+        label,
+        width: dimensions.width,
+        height: dimensions.height,
+      });
+    }
+  );
   editor.value.getEdges.value.forEach(({ source, target, id }) => {
     graph.setEdge(source, target, { id });
   });
 
   dagre.layout(graph);
-  const nodeChanges = graph.nodes().map((nodeId) => {
-    const { x, y } = graph.node(nodeId);
+  const nodeChanges = [];
+  graph.nodes().forEach((nodeId) => {
+    const graphNode = graph.node(nodeId);
+    if (!graphNode) return;
+
+    const { x, y } = graphNode;
 
     if (editorCommands.state.nodes[nodeId]) {
       editorCommands.state.nodes[nodeId].position = { x, y };
     }
 
-    return {
+    nodeChanges.push({
       id: nodeId,
       type: 'position',
       dragging: false,
       position: { x, y },
-    };
+    });
   });
 
   editor.value.applyNodeChanges(nodeChanges);
@@ -731,12 +739,13 @@ function onDropInEditor({ dataTransfer, clientX, clientY, target }) {
   if (isTriggerExists) return;
 
   const position = editor.value.project({ x: clientX - 360, y: clientY - 18 });
+  const nodeId = nanoid();
   const newNode = {
     position,
-    id: nanoid(),
     label: block.id,
     data: block.data,
     type: block.component,
+    id: block.id === 'blocks-group-2' ? `group-${nodeId}` : nodeId,
   };
   editor.value.addNodes([newNode]);
 

src/stores/workflow.js

@@ -53,7 +53,7 @@ const defaultWorkflow = (data = null, options = {}) => {
       inputAutocomplete: true,
       onError: 'stop-workflow',
       executedBlockOnWeb: false,
-      insertDefaultColumn: true,
+      insertDefaultColumn: false,
       defaultColumnName: 'column',
     },
     version: browser.runtime.getManifest().version,

src/utils/shared.js

@@ -739,26 +739,26 @@ export const tasks = {
       blocks: [],
     },
   },
-  'blocks-group-2': {
-    name: 'Blocks group',
-    description: 'Grouping blocks',
-    icon: 'riFolderZipLine',
-    component: 'BlockGroup2',
-    category: 'general',
-    disableEdit: true,
-    inputs: 1,
-    outputs: 1,
-    allowedInputs: true,
-    maxConnection: 1,
-    data: {
-      disableBlock: false,
-      name: '',
-      width: 400,
-      height: 300,
-      borderColor: '#2563eb',
-      backgroundColor: 'rgb(37, 99, 235, 0.3)',
-    },
-  },
+  // 'blocks-group-2': {
+  //   name: 'Blocks group',
+  //   description: 'Grouping blocks',
+  //   icon: 'riFolderZipLine',
+  //   component: 'BlockGroup2',
+  //   category: 'general',
+  //   disableEdit: true,
+  //   inputs: 1,
+  //   outputs: 1,
+  //   allowedInputs: true,
+  //   maxConnection: 1,
+  //   data: {
+  //     disableBlock: false,
+  //     name: '',
+  //     width: 400,
+  //     height: 300,
+  //     borderColor: '#2563eb',
+  //     backgroundColor: 'rgb(37, 99, 235, 0.3)',
+  //   },
+  // },
   clipboard: {
     name: 'Clipboard',
     description: 'Get the copied text from the clipboard',