fix(editor): can't add condition

src/assets/css/drawflow.css

@@ -3,17 +3,6 @@
   @apply translate-y-11;
 }
 
-.drawflow .drawflow-node.comparison .outputs {
-  top: 82px !important;
-  transform: none !important;
-}
-.drawflow .drawflow-node.comparison .output {
-  margin-bottom: 30px;
-}
-.drawflow .drawflow-node.comparison .output:nth-last-child(2) {
-  margin-bottom: 20px;
-}
-
 .drawflow,
 .drawflow .parent-node {
   position: relative

src/components/block/BlockConditions.vue

@@ -6,7 +6,7 @@
         class="inline-block text-sm mr-4 p-2 rounded-lg"
       >
         <v-remixicon :path="icons.riAB" size="20" class="inline-block mr-1" />
-        <span>Comparison</span>
+        <span>conditions</span>
       </div>
       <div class="flex-grow"></div>
       <v-remixicon
@@ -15,7 +15,7 @@
         @click="editor.removeNodeId(`node-${block.id}`)"
       />
       <button
-        :disabled="block.data.comparison && block.data.comparison.length > 4"
+        :disabled="block.data.conditions && block.data.conditions.length > 4"
         class="bg-accent ml-2 rounded-lg text-white text-center"
         style="height: 37px; width: 37px"
         @click="addComparison"
@@ -24,11 +24,11 @@
       </button>
     </div>
     <div
-      v-if="block.data.comparison && block.data.comparison.length !== 0"
+      v-if="block.data.conditions && block.data.conditions.length !== 0"
       class="mt-4 space-y-2"
     >
       <div
-        v-for="(item, index) in block.data.comparison"
+        v-for="(item, index) in block.data.conditions"
         :key="item.id"
         class="flex items-center group justify-end"
       >
@@ -39,8 +39,8 @@
         />
         <div class="flex items-center transition bg-input rounded-lg">
           <select
-            v-model="block.data.comparison[index].type"
-            :title="conditions[block.data.comparison[index]?.type] || 'Equals'"
+            v-model="block.data.conditions[index].type"
+            :title="conditions[block.data.conditions[index]?.type] || 'Equals'"
             class="
               bg-transparent
               font-mono
@@ -62,7 +62,7 @@
           </select>
           <div class="bg-gray-300 w-px" style="height: 30px"></div>
           <input
-            v-model="block.data.comparison[index].value"
+            v-model="block.data.conditions[index].value"
             type="text"
             placeholder="value"
             class="p-2 flex-1 transition rounded-r-lg bg-transparent w-36"
@@ -70,7 +70,7 @@
         </div>
       </div>
       <p
-        v-if="block.data.comparison && block.data.comparison.length !== 0"
+        v-if="block.data.conditions && block.data.conditions.length !== 0"
         class="text-right text-gray-600"
       >
         <span title="Execute when all comparisons don't meet the requirement">
@@ -97,7 +97,7 @@ const props = defineProps({
   },
 });
 
-const componentId = useComponentId('block-comparison');
+const componentId = useComponentId('block-conditions');
 const block = useEditorBlock(`#${componentId}`, props.editor);
 
 const conditions = {
@@ -110,27 +110,27 @@ const conditions = {
 };
 
 function addComparison() {
-  if (block.data.comparison.length >= 5) return;
+  if (block.data.conditions.length >= 5) return;
 
-  block.data.comparison.push({ id: nanoid(6), type: '==', value: '' });
+  block.data.conditions.push({ id: nanoid(6), type: '==', value: '' });
 
-  if (block.data.comparison.length === 1) props.editor.addNodeOutput(block.id);
+  if (block.data.conditions.length === 1) props.editor.addNodeOutput(block.id);
 
   props.editor.addNodeOutput(block.id);
 }
 function deleteComparison(index) {
-  block.data.comparison.splice(index, 1);
+  block.data.conditions.splice(index, 1);
 
   props.editor.removeNodeOutput(block.id, `output_${index + 1}`);
-  if (block.data.comparison.length === 0)
+  if (block.data.conditions.length === 0)
     props.editor.removeNodeOutput(block.id, `output_1`);
 }
 
 watch(
-  () => block.data.comparison,
+  () => block.data.conditions,
   debounce((newValue) => {
     props.editor.updateNodeDataFromId(block.id, {
-      comparison: toRaw(newValue),
+      conditions: toRaw(newValue),
     });
 
     props.editor.updateConnectionNodes(`node-${block.id}`);
@@ -138,3 +138,15 @@ watch(
   { deep: true }
 );
 </script>
+<style>
+.drawflow .drawflow-node.conditions .outputs {
+  top: 82px !important;
+  transform: none !important;
+}
+.drawflow .drawflow-node.conditions .output {
+  margin-bottom: 30px;
+}
+.drawflow .drawflow-node.conditions .output:nth-last-child(2) {
+  margin-bottom: 20px;
+}
+</style>

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -40,8 +40,11 @@ export default {
 
     function dropHandler({ dataTransfer, clientX, clientY }) {
       const block = JSON.parse(dataTransfer.getData('block') || null);
+      const isTriggerExists =
+        block.id === 'trigger' &&
+        editor.value.getNodesFromName('trigger').length !== 0;
 
-      if (!block) return;
+      if (!block || isTriggerExists) return;
 
       const xPosition =
         clientX *