feat(editor): add validation to blocks

src/assets/css/drawflow.css

@@ -39,6 +39,7 @@
   min-height: 40px;
   z-index: 2;
   cursor: move;
+  white-space: nowrap;
   @apply rounded-lg transition ring-2 ring-transparent duration-200 shadow-lg;
 }
 

src/components/block/BlockBasic.vue

@@ -1,6 +1,8 @@
 <template>
   <block-base
     :id="componentId"
+    :hide-edit="block.details.disableEdit"
+    :hide-delete="block.details.disableDelete"
     content-class="flex items-center"
     @edit="editBlock"
     @delete="editor.removeNodeId(`node-${block.id}`)"

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -22,7 +22,9 @@
   </div>
 </template>
 <script>
+/* eslint-disable camelcase */
 import { onMounted, shallowRef, getCurrentInstance } from 'vue';
+import { tasks } from '@/utils/shared';
 import drawflow from '@/lib/drawflow';
 
 export default {
@@ -68,6 +70,17 @@ export default {
         'vue'
       );
     }
+    function isInputAllowed(allowedInputs, input) {
+      if (typeof allowedInputs === 'boolean') return allowedInputs;
+
+      return allowedInputs.some((item) => {
+        if (item.startsWith('#')) {
+          return tasks[input].category === item.substr(1);
+        }
+
+        return item === input;
+      });
+    }
 
     onMounted(() => {
       const element = document.querySelector('#drawflow', getCurrentInstance());
@@ -99,6 +112,26 @@ export default {
       editor.value.on('nodeRemoved', (id) => {
         emit('deleteBlock', id);
       });
+      editor.value.on(
+        'connectionCreated',
+        ({ output_id, input_id, output_class, input_class }) => {
+          const { name: outputs } = editor.value.getNodeFromId(output_id);
+          const { name: inputName } = editor.value.getNodeFromId(input_id);
+          const { allowedInputs, maxConnection } = tasks[inputName];
+          const isAllowed = isInputAllowed(allowedInputs, inputName);
+          const isMaxConnections =
+            outputs[output_class].connections.length > maxConnection;
+
+          if (!isAllowed || isMaxConnections) {
+            editor.value.removeSingleConnection(
+              output_id,
+              input_id,
+              output_class,
+              input_class
+            );
+          }
+        }
+      );
     });
 
     return {

src/lib/drawflow.js

@@ -12,7 +12,6 @@ export default function (element, ctx) {
   );
 
   editor.useuuid = true;
-  editor.reroute = true;
 
   blockComponents.keys().forEach((key) => {
     const name = key.replace(/(.\/)|\.vue$/g, '');

src/utils/shared.js

@@ -7,7 +7,7 @@ export const tasks = {
     category: 'general',
     inputs: 0,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       description: '',
@@ -22,7 +22,7 @@ export const tasks = {
     category: 'interaction',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       description: '',
@@ -38,7 +38,7 @@ export const tasks = {
     category: 'general',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       time: 500,
@@ -52,7 +52,7 @@ export const tasks = {
     category: 'interaction',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       description: '',
@@ -70,7 +70,7 @@ export const tasks = {
     category: 'general',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       type: 'JSON',
@@ -84,7 +84,7 @@ export const tasks = {
     category: 'interaction',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       description: '',
@@ -102,7 +102,7 @@ export const tasks = {
     category: 'interaction',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       description: '',
@@ -120,7 +120,7 @@ export const tasks = {
     category: 'general',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       url: '',
@@ -134,7 +134,7 @@ export const tasks = {
     category: 'interaction',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       description: '',
@@ -156,7 +156,7 @@ export const tasks = {
     category: 'general',
     inputs: 1,
     outputs: 2,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       repeatFor: 1,
@@ -169,7 +169,7 @@ export const tasks = {
     category: 'interaction',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     disableEdit: true,
     data: {},
@@ -182,7 +182,7 @@ export const tasks = {
     category: 'interaction',
     inputs: 1,
     outputs: 1,
-    allowedInputs: [],
+    allowedInputs: true,
     maxConnection: 1,
     data: {
       description: '',
@@ -200,8 +200,8 @@ export const tasks = {
     category: 'conditions',
     inputs: 1,
     outputs: 0,
-    allowedInputs: [],
-    maxConnection: false,
+    allowedInputs: true,
+    maxConnection: 1,
     data: {
       conditions: [],
     },
@@ -213,8 +213,8 @@ export const tasks = {
     category: 'conditions',
     inputs: 1,
     outputs: 2,
-    allowedInputs: [],
-    maxConnection: false,
+    allowedInputs: true,
+    maxConnection: 1,
     data: {
       selector: '',
     },