feat: update workflow editor

package.json

@@ -47,8 +47,9 @@
     "@tiptap/starter-kit": "^2.0.4",
     "@tiptap/vue-3": "^2.0.4",
     "@viselect/vanilla": "^3.2.5",
-    "@vue-flow/additional-components": "^1.3.3",
-    "@vue-flow/core": "^1.22.3",
+    "@vue-flow/background": "^1.2.0",
+    "@vue-flow/core": "^1.23.0",
+    "@vue-flow/minimap": "^1.2.0",
     "@vueuse/head": "^1.3.1",
     "@vueuse/rxjs": "^9.12.0",
     "@vuex-orm/core": "^0.36.4",

src/components/block/BlockGroup.vue

@@ -5,7 +5,7 @@
     :block-id="id"
     :block-data="block"
     class="w-64"
-    content-class="p-0"
+    content-class="!p-0"
     @edit="$emit('edit')"
     @delete="$emit('delete', id)"
     @update="$emit('update', $event)"

src/components/newtab/workflow/WorkflowEditor.vue

@@ -86,7 +86,8 @@ import {
   MarkerType,
   getConnectedEdges,
 } from '@vue-flow/core';
-import { Background, MiniMap } from '@vue-flow/additional-components';
+import { Background } from '@vue-flow/background';
+import { MiniMap } from '@vue-flow/minimap';
 import cloneDeep from 'lodash.clonedeep';
 import { useStore } from '@/stores/main';
 import { getBlocks } from '@/utils/getSharedData';
@@ -94,6 +95,7 @@ import { categories } from '@/utils/shared';
 import EditBlockSettings from './edit/EditBlockSettings.vue';
 import EditorCustomEdge from './editor/EditorCustomEdge.vue';
 import EditorSearchBlocks from './editor/EditorSearchBlocks.vue';
+import '@vue-flow/minimap/dist/style.css';
 
 const props = defineProps({
   id: {
@@ -220,7 +222,7 @@ function minimapNodeClassName({ label }) {
 function updateBlockData(nodeId, data = {}) {
   if (isDisabled.value) return;
 
-  const node = editor.getNode.value(nodeId);
+  const node = editor.findNode(nodeId);
   node.data = { ...node.data, ...data };
 
   emit('update:node', node);
@@ -229,7 +231,7 @@ function updateBlockSettingsData(newSettings) {
   if (isDisabled.value) return;
 
   const nodeId = blockSettingsState.data.blockId;
-  const node = editor.getNode.value(nodeId);
+  const node = editor.findNode(nodeId);
 
   if (blockSettingsState.data.itemId) {
     const index = node.data.blocks.findIndex(
@@ -283,7 +285,7 @@ function applyFlowData() {
     props.data?.nodes?.map((node) => ({ ...node, events: {} })) || []
   );
   editor.setEdges(props.data?.edges || []);
-  editor.setTransform({
+  editor.setViewport({
     x: props.data?.x || 0,
     y: props.data?.y || 0,
     zoom: props.data?.zoom || 1,

yarn.lock

@@ -1816,21 +1816,26 @@
   resolved "https://registry.yarnpkg.com/@viselect/vanilla/-/vanilla-3.3.1.tgz#ec4276b0814157b7ffe8ac1f28fdd70df36e1d76"
   integrity sha512-QqkPGV+uyteX/HqzhHp5ZRfpVYiA0A3umh8HT/nfoBKccoA/kiTdI+5B/8ZPijtanBj9NNymMMPCn0W+/BeEyg==
 
-"@vue-flow/additional-components@^1.3.3":
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@vue-flow/additional-components/-/additional-components-1.3.3.tgz#383fe2f79534a7d3a3fecc51006be790c321ca87"
-  integrity sha512-AZhz0diM7VIN7MGKODiuqiu+xiujFQSs2UdiThgNI5vGSwwizd0g9dGzB+LK0Dt4FCRJ1g64xzxqbrAFFfzuFw==
+"@vue-flow/background@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@vue-flow/background/-/background-1.2.0.tgz#6b7c283fd679838df90dda8dd98f322c368b7e59"
+  integrity sha512-ZqmYhOM/0aRmA5dA3KSHJNYpHnhmG2e6tzjmttoibo4JBI3KNbdyOX+OTlqt7Ic0LYUC6NWzRLAwv4gjJuc6Mg==
+
+"@vue-flow/core@^1.23.0":
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/@vue-flow/core/-/core-1.23.0.tgz#f6171f70451d7a4e9804736bd4156659393cee2a"
+  integrity sha512-jfzQNWy5+JVgAmopJciK1acKQcDtPDwu7UM5FUlVXyzNaJgsAJR/8C5guOq7NPzfACz5TodDrBzbDePF40NQZg==
   dependencies:
+    "@vueuse/core" "^10.1.2"
+    d3-drag "^3.0.0"
     d3-selection "^3.0.0"
     d3-zoom "^3.0.0"
 
-"@vue-flow/core@^1.22.3":
-  version "1.22.3"
-  resolved "https://registry.yarnpkg.com/@vue-flow/core/-/core-1.22.3.tgz#2f98bb5185df64ac33e9eaa47093a624ef291698"
-  integrity sha512-1Hz7cnomzbUuBYOghtb+ZUunUAD8UXJC/PrUUjjQQa2HEcaRK9KK3c4sE1QMBbhQh5umcuwjRH/XVJhOVDoIOQ==
+"@vue-flow/minimap@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@vue-flow/minimap/-/minimap-1.2.0.tgz#95770b380dbb55b951bd13339e27429cf171010f"
+  integrity sha512-0Nk7iWjRC9hgyVGEVELKULXZsJtYmzic4CEAM6mIhB/lDVUsQsae9NXB6gYFN0OlBXx71pZHBnqqUYvLxUE0jg==
   dependencies:
-    "@vueuse/core" "^10.1.2"
-    d3-drag "^3.0.0"
     d3-selection "^3.0.0"
     d3-zoom "^3.0.0"