feat: support JSON as workflow parameter (#883)

package.json

@@ -44,8 +44,8 @@
     "@tiptap/starter-kit": "^2.0.0-beta.197",
     "@tiptap/vue-3": "^2.0.0-beta.96",
     "@viselect/vanilla": "^3.1.0",
-    "@vue-flow/additional-components": "^1.1.0",
-    "@vue-flow/core": "^1.2.0",
+    "@vue-flow/additional-components": "1.0.0",
+    "@vue-flow/core": "1.0.0",
     "@vueuse/head": "^0.9.7",
     "@vueuse/rxjs": "^9.1.1",
     "@vuex-orm/core": "^0.36.4",

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

@@ -133,6 +133,7 @@ import cloneDeep from 'lodash.clonedeep';
 import workflowParameters from '@business/parameters';
 import Draggable from 'vuedraggable';
 import ParameterInputValue from './Parameter/ParameterInputValue.vue';
+import ParameterJsonValue from './Parameter/ParameterJsonValue.vue';
 import ParameterInputOptions from './Parameter/ParameterInputOptions.vue';
 
 const props = defineProps({
@@ -165,6 +166,14 @@ const paramTypes = {
       required: false,
     },
   },
+  json: {
+    id: 'json',
+    name: 'Input (JSON)',
+    valueComp: ParameterJsonValue,
+    data: {
+      required: false,
+    },
+  },
   ...customParameters,
 };
 const paramTypesArr = Object.values(paramTypes)

src/components/newtab/workflow/editor/EditorCustomEdge.vue

@@ -3,13 +3,13 @@
     :id="id"
     :style="style"
     class="vue-flow__edge-path"
-    :d="edgePath[0]"
+    :d="edgePath"
     :marker-end="markerEnd"
   />
   <edge-text
     v-if="label"
-    :x="edgePath[1]"
-    :y="edgePath[2]"
+    :x="center[0]"
+    :y="center[1]"
     :label="label"
     :label-style="{ fill: 'white' }"
     :label-show-bg="true"
@@ -20,7 +20,12 @@
 </template>
 <script setup>
 import { computed } from 'vue';
-import { getBezierPath, getSmoothStepPath, EdgeText } from '@vue-flow/core';
+import {
+  getBezierPath,
+  getSmoothStepPath,
+  getEdgeCenter,
+  EdgeText,
+} from '@vue-flow/core';
 
 const props = defineProps({
   id: {
@@ -73,6 +78,16 @@ const props = defineProps({
   },
 });
 
+const center = computed(() => {
+  if (!props.label) return null;
+
+  return getEdgeCenter({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  });
+});
 const edgePath = computed(() => {
   const options = {
     sourceX: props.sourceX,

src/content/commandPalette/App.vue

@@ -186,8 +186,9 @@ import {
 import browser from 'webextension-polyfill';
 import workflowParameters from '@business/parameters';
 import { sendMessage } from '@/utils/message';
-import { debounce } from '@/utils/helper';
+import { debounce, parseJSON } from '@/utils/helper';
 import ParameterInputValue from '@/components/newtab/workflow/edit/Parameter/ParameterInputValue.vue';
+import ParameterJsonValue from '@/components/newtab/workflow/edit/Parameter/ParameterJsonValue.vue';
 
 const paramsList = {
   string: {
@@ -195,6 +196,11 @@ const paramsList = {
     name: 'Input (string)',
     valueComp: ParameterInputValue,
   },
+  json: {
+    id: 'json',
+    name: 'Input (JSON)',
+    valueComp: ParameterJsonValue,
+  },
 };
 
 const os = navigator.appVersion.indexOf('Mac') !== -1 ? 'mac' : 'win';
@@ -299,6 +305,7 @@ function getParamsValues(params) {
   const getParamVal = {
     string: (str) => str,
     number: (num) => (Number.isNaN(+num) ? 0 : +num),
+    json: (value) => parseJSON(value, null),
     default: (value) => value,
   };
 

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

@@ -1207,13 +1207,6 @@ function onEditorInit(instance) {
     });
   });
 
-  instance.removeSelectedNodes(
-    instance.getSelectedNodes.value.map(({ id }) => id)
-  );
-  instance.removeSelectedEdges(
-    instance.getSelectedEdges.value.map(({ id }) => id)
-  );
-
   const editorContainer = document.querySelector(
     '.vue-flow__viewport.vue-flow__container'
   );

src/params/App.vue

@@ -110,7 +110,9 @@ import workflowParameters from '@business/parameters';
 import automa from '@business';
 import { useTheme } from '@/composable/theme';
 import dayjs from '@/lib/dayjs';
+import { parseJSON } from '@/utils/helper';
 import ParameterInputValue from '@/components/newtab/workflow/edit/Parameter/ParameterInputValue.vue';
+import ParameterJsonValue from '@/components/newtab/workflow/edit/Parameter/ParameterJsonValue.vue';
 
 const paramsList = {
   string: {
@@ -118,6 +120,11 @@ const paramsList = {
     name: 'Input (string)',
     valueComp: ParameterInputValue,
   },
+  json: {
+    id: 'json',
+    name: 'Input (JSON)',
+    valueComp: ParameterJsonValue,
+  },
 };
 
 const theme = useTheme();
@@ -197,6 +204,7 @@ function getParamsValues(params) {
   const getParamVal = {
     string: (str) => str,
     number: (num) => (Number.isNaN(+num) ? 0 : +num),
+    json: (value) => parseJSON(value, null),
     default: (value) => value,
   };
 

yarn.lock

@@ -1671,15 +1671,15 @@
   resolved "https://registry.yarnpkg.com/@viselect/vanilla/-/vanilla-3.1.1.tgz#e63ef3529f819cc83e8c1aea6b3ab9936d550f76"
   integrity sha512-aS1UF6WkV3TvO5vqg2uQk8WRI36b2SAtfozVrxtfVI1WTuaOG0uYxvdXTmIYwfki6fFF4qQpkiQcg8+NqpJA8Q==
 
-"@vue-flow/additional-components@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@vue-flow/additional-components/-/additional-components-1.1.0.tgz#744ff2ce35be1af9109462e9973118366b53dc66"
-  integrity sha512-uWz/xieBI80UwcIolnFkGojgKZwr46nspLMpz1oZuzCN09kqd7ZK2VgZSS04r7j8aWNNanioun2AvDXr+vg8vg==
+"@vue-flow/additional-components@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@vue-flow/additional-components/-/additional-components-1.0.0.tgz#527edb54ed6ce527cd0370a46ea4ca74a6a7d8c2"
+  integrity sha512-xHDe5r60unpn2YuNEPdNAOgaS2KghdpVMOo5dVFdYJeRDaW8e0tVyXIUzGaP2iDT9t1WL1rlM/8BXizfFIdBaw==
 
-"@vue-flow/core@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@vue-flow/core/-/core-1.2.0.tgz#741bb372d99b255dc5898e01daeed81b3704531b"
-  integrity sha512-1QXdAt4k/7zC4SLr314hvJUuId3/8+4VVJmmY2HukgkSkNl4veDly/2tvzl3cOj4DSdbMPUjSsGk0iMN2NG9IQ==
+"@vue-flow/core@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@vue-flow/core/-/core-1.0.0.tgz#b342863b4b96635d6e914c6c57141e37ba4ebbde"
+  integrity sha512-CU0Q8o31vXFC8BdOoPdRU7rN0EkgAFNwlG/gLR18Kk6ZnIflAc8BcaT3fShoVXNZLysXg10UF5C/L4wWPk2Gjw==
   dependencies:
     "@vueuse/core" "^9.3.0"
     d3-drag "^3.0.0"