feat: add regex variable block

src/background/workflowEngine/blocksHandler/handlerIncreaseVariable.js

@@ -1,6 +1,6 @@
 import { objectHasKey } from '@/utils/helper';
 
-export async function logData({ id, data }) {
+export async function increaseVariable({ id, data }) {
   const refVariables = this.engine.referenceData.variables;
 
   if (!objectHasKey(refVariables, data.variableName)) {
@@ -22,4 +22,4 @@ export async function logData({ id, data }) {
   };
 }
 
-export default logData;
+export default increaseVariable;

src/background/workflowEngine/blocksHandler/handlerRegexVariable.js

@@ -0,0 +1,29 @@
+import { objectHasKey } from '@/utils/helper';
+
+export async function regexVariable({ id, data }) {
+  const refVariables = this.engine.referenceData.variables;
+
+  if (!objectHasKey(refVariables, data.variableName)) {
+    throw new Error(`Cant find "${data.variableName}" variable`);
+  }
+
+  const currentVar = refVariables[data.variableName];
+  if (typeof currentVar !== 'string') {
+    throw new Error(
+      `The value of the "${data.variableName}" variable is not a string/text`
+    );
+  }
+
+  const regex = new RegExp(data.expression, data.flag.join(''));
+  const matches = currentVar.match(regex);
+  const newValue = matches && !data.flag.includes('g') ? matches[0] : matches;
+
+  refVariables[data.variableName] = newValue;
+
+  return {
+    data: newValue,
+    nextBlockId: this.getBlockConnections(id),
+  };
+}
+
+export default regexVariable;

src/background/workflowEngine/blocksHandler/handlerSliceVariable.js

@@ -1,4 +1,4 @@
-export async function logData({ id, data }) {
+export async function sliceData({ id, data }) {
   const variable = this.engine.referenceData.variables[data.variableName];
   const payload = {
     data: variable,
@@ -24,4 +24,4 @@ export async function logData({ id, data }) {
   return payload;
 }
 
-export default logData;
+export default sliceData;

src/components/newtab/workflow/WorkflowEditor.vue

@@ -126,7 +126,7 @@ const { t } = useI18n();
 const store = useStore();
 const editor = useVueFlow({
   id: props.id,
-  minZoom: 1,
+  minZoom: 0.7,
   edgeUpdaterRadius: 20,
   deleteKeyCode: 'Delete',
   elevateEdgesOnSelect: true,

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

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <ui-textarea
+      :model-value="data.description"
+      :placeholder="t('common.description')"
+      class="w-full"
+      @change="updateData({ description: $event })"
+    />
+    <ui-input
+      :model-value="data.variableName"
+      :label="t('workflow.variables.name')"
+      :title="t('workflow.variables.name')"
+      class="mt-2 w-full"
+      @change="updateData({ variableName: $event })"
+    />
+    <div class="flex items-end mt-2">
+      <div class="flex-1 mr-2">
+        <label
+          class="ml-1 block text-gray-600 dark:text-gray-200 text-sm"
+          for="var-expression"
+        >
+          RegEx
+        </label>
+        <div
+          class="flex items-center bg-input transition-colors px-4 rounded-lg"
+        >
+          <span>/</span>
+          <input
+            id="var-expression"
+            :value="data.expression"
+            placeholder="Expression"
+            class="py-2 w-11/12 bg-transparent focus:ring-0 px-1"
+            @input="updateData({ expression: $event.target.value })"
+          />
+          <span class="text-right">/</span>
+        </div>
+      </div>
+      <ui-popover>
+        <template #trigger>
+          <button class="p-2 rounded-lg bg-input" title="Flags">
+            {{ data.flag.length === 0 ? 'flags' : data.flag.join('') }}
+          </button>
+        </template>
+        <p>Flags</p>
+        <ul class="mt-2 space-y-1">
+          <li v-for="flag in flags" :key="flag.id">
+            <ui-checkbox
+              :model-value="data.flag.includes(flag.id)"
+              @change="updateFlag($event, flag.id)"
+            >
+              {{ flag.name }}
+            </ui-checkbox>
+          </li>
+        </ul>
+      </ui-popover>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+const emit = defineEmits(['update:data']);
+
+const { t } = useI18n();
+const flags = [
+  { id: 'g', name: 'global' },
+  { id: 'i', name: 'ignore case' },
+  { id: 'm', name: 'multiline' },
+];
+
+function updateData(value) {
+  emit('update:data', { ...props.data, ...value });
+}
+function updateFlag(include, flag) {
+  const copyFlag = [...props.data.flag];
+
+  if (include) {
+    copyFlag.push(flag);
+  } else {
+    const index = copyFlag.indexOf(flag);
+    copyFlag.splice(index, 1);
+  }
+
+  updateData({ flag: copyFlag });
+}
+</script>
+<style>
+.log-data .block-variable {
+  margin-top: 4px;
+}
+</style>

src/lib/vRemixicon.js

@@ -248,6 +248,8 @@ export const icons = {
   mdiEqual: 'M19,10H5V8H19V10M19,16H5V14H19V16Z',
   mdiVariable:
     'M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z',
+  mdiRegex:
+    'M16,16.92C15.67,16.97 15.34,17 15,17C14.66,17 14.33,16.97 14,16.92V13.41L11.5,15.89C11,15.5 10.5,15 10.11,14.5L12.59,12H9.08C9.03,11.67 9,11.34 9,11C9,10.66 9.03,10.33 9.08,10H12.59L10.11,7.5C10.3,7.25 10.5,7 10.76,6.76V6.76C11,6.5 11.25,6.3 11.5,6.11L14,8.59V5.08C14.33,5.03 14.66,5 15,5C15.34,5 15.67,5.03 16,5.08V8.59L18.5,6.11C19,6.5 19.5,7 19.89,7.5L17.41,10H20.92C20.97,10.33 21,10.66 21,11C21,11.34 20.97,11.67 20.92,12H17.41L19.89,14.5C19.7,14.75 19.5,15 19.24,15.24V15.24C19,15.5 18.75,15.7 18.5,15.89L16,13.41V16.92H16V16.92M5,19A2,2 0 0,1 7,17A2,2 0 0,1 9,19A2,2 0 0,1 7,21A2,2 0 0,1 5,19H5Z',
   mdiDrag:
     'M7,19V17H9V19H7M11,19V17H13V19H11M15,19V17H17V19H15M7,15V13H9V15H7M11,15V13H13V15H11M15,15V13H17V15H15M7,11V9H9V11H7M11,11V9H13V11H11M15,11V9H17V11H15M7,7V5H9V7H7M11,7V5H13V7H11M15,7V5H17V7H15Z',
   webhookIcon:

src/locales/en/blocks.json

@@ -101,6 +101,10 @@
         "start": "Start index",
         "end": "End index"
       },
+      "regex-variable": {
+        "name": "RegEx variable",
+        "description": "Matching a variable value against a regular expression"
+      },
       "increase-variable": {
         "name": "Increase variable",
         "description": "Increase the value of a variable by specific amount",

src/stores/workflow.js

@@ -20,7 +20,7 @@ const defaultWorkflow = (data = null, options = {}) => {
     connectedTable: null,
     drawflow: {
       edges: [],
-      position: { zoom: 1 },
+      zoom: 1.3,
       nodes: [
         {
           position: {

src/utils/shared.js

@@ -1088,6 +1088,24 @@ export const tasks = {
       variableName: '',
     },
   },
+  'regex-variable': {
+    name: 'RegEx variable',
+    description: 'Matching a variable value against a regular expression',
+    icon: 'mdiRegex',
+    editComponent: 'EditRegexVariable',
+    component: 'BlockBasic',
+    category: 'data',
+    inputs: 1,
+    outputs: 1,
+    allowedInputs: true,
+    maxConnection: 1,
+    data: {
+      disableBlock: false,
+      description: '',
+      expression: '',
+      flag: [],
+    },
+  },
 };
 
 export const categories = {