feat: replace block when a block dropped on top of it

src/background/index.js

@@ -354,7 +354,7 @@ browser.runtime.onStartup.addListener(async () => {
           ? parseJSON(currWorkflow.drawflow, {})
           : currWorkflow.drawflow;
 
-      triggerBlock = findTriggerBlock(flow);
+      triggerBlock = findTriggerBlock(flow)?.data;
     }
 
     if (triggerBlock) {

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -173,6 +173,7 @@ export default {
     const prevSelectedEl = {
       output: null,
       connection: null,
+      nodeContent: null,
     };
     const isOutputEl = (el) => el.classList.contains('output');
     const isConnectionEl = (el) =>
@@ -205,18 +206,74 @@ export default {
         classes: 'ring-4',
         active: isOutputEl(target),
       });
+
+      const nodeContent = target.closest('.drawflow_content_node');
+      toggleHoverClass({
+        classes: 'ring-4',
+        target: nodeContent,
+        name: 'nodeContent',
+        active: nodeContent,
+      });
     }
     function dropHandler({ dataTransfer, clientX, clientY, target }) {
       const block = JSON.parse(dataTransfer.getData('block') || null);
 
-      if (!block || block.fromBlockBasic) return;
+      if (!block) return;
 
       const isTriggerExists =
         block.id === 'trigger' &&
         editor.value.getNodesFromName('trigger').length !== 0;
-
       if (isTriggerExists) return;
 
+      if (target.closest('.drawflow_content_node')) {
+        const targetNodeId = target
+          .closest('.drawflow-node')
+          .id.replace(/node-/, '');
+        const targetNode = editor.value.getNodeFromId(targetNodeId);
+        editor.value.removeNodeId(`node-${targetNodeId}`);
+
+        let targetBlock = block;
+        if (block.fromBlockBasic) {
+          targetBlock = { ...tasks[block.id], id: block.id };
+        }
+
+        const newNodeId = editor.value.addNode(
+          targetBlock.id,
+          targetBlock.inputs,
+          targetBlock.outputs,
+          targetNode.pos_x,
+          targetNode.pos_y,
+          targetBlock.id,
+          targetBlock.data,
+          targetBlock.component,
+          'vue'
+        );
+        const duplicateConnections = (nodeIO, type) => {
+          if (block[type] === 0) return;
+
+          Object.keys(nodeIO).forEach((name) => {
+            const { connections } = nodeIO[name];
+
+            connections.forEach(({ node, input, output }) => {
+              if (node === targetNodeId) return;
+
+              if (type === 'inputs') {
+                editor.value.addConnection(node, newNodeId, input, name);
+              } else if (type === 'outputs') {
+                editor.value.addConnection(newNodeId, node, name, output);
+              }
+            });
+          });
+        };
+
+        duplicateConnections(targetNode.inputs, 'inputs');
+        duplicateConnections(targetNode.outputs, 'outputs');
+
+        return;
+      }
+
+      if (block.fromBlockBasic) return;
+
       const xPosition =
         clientX *
           (editor.value.precanvas.clientWidth /
@@ -288,18 +345,18 @@ export default {
             result.inputClass
           );
         } catch (error) {
-          // Do nothing
+          console.error(error);
         }
       } else if (isOutputEl(target)) {
         prevSelectedEl.output?.classList.remove('ring-4');
 
-        const targetBlockId = target
+        const targetNodeId = target
           .closest('.drawflow-node')
           .id.replace(/node-/, '');
         const outputClass = target.classList[1];
 
         editor.value.addConnection(
-          targetBlockId,
+          targetNodeId,
           blockId,
           outputClass,
           'input_1'
@@ -862,4 +919,7 @@ export default {
   border: 2px solid rgba(98, 155, 255, 0.81);
   border-radius: 0.1em;
 }
+.drawflow_content_node {
+  @apply rounded-lg;
+}
 </style>

src/lib/vRemixicon.js

@@ -67,7 +67,6 @@ import {
   riKeyboardLine,
   riFileEditLine,
   riCompass3Line,
-  riComputerLine,
   riFileCopyLine,
   riCalendarLine,
   riFileTextLine,
@@ -179,7 +178,6 @@ export const icons = {
   riKeyboardLine,
   riFileEditLine,
   riCompass3Line,
-  riComputerLine,
   riFileCopyLine,
   riCalendarLine,
   riFileTextLine,

src/newtab/pages/Workflows.vue

@@ -65,6 +65,7 @@
                 tag="button"
                 :active="state.activeTab === 'local'"
                 class="pl-14"
+                @click="state.activeTab = 'local'"
               >
                 <span class="capitalize">
                   {{ t('workflow.type.local') }}
@@ -75,6 +76,7 @@
                 tag="button"
                 :active="state.activeTab === 'shared'"
                 class="pl-14"
+                @click="state.activeTab = 'shared'"
               >
                 <span class="capitalize">
                   {{ t('workflow.type.shared') }}
@@ -85,6 +87,7 @@
                 tag="button"
                 :active="state.activeTab === 'host'"
                 class="pl-14"
+                @click="state.activeTab = 'host'"
               >
                 <span class="capitalize">
                   {{ t('workflow.type.host') }}