fix: styling when dragging workflow card using mouse

package.json

@@ -46,7 +46,7 @@
     "@tiptap/pm": "^2.0.4",
     "@tiptap/starter-kit": "^2.0.4",
     "@tiptap/vue-3": "^2.0.4",
-    "@viselect/vanilla": "^3.2.5",
+    "@viselect/vanilla": "^3.5.0",
     "@vue-flow/background": "^1.2.0",
     "@vue-flow/core": "^1.23.0",
     "@vue-flow/minimap": "^1.2.0",

src/components/newtab/workflows/WorkflowsLocal.vue

@@ -174,6 +174,9 @@ const selection = new SelectionArea({
   startareas: ['.workflows-list'],
   boundaries: ['.workflows-list'],
   selectables: ['.local-workflow'],
+  behaviour: {
+    overlap: 'invert',
+  },
 });
 selection
   .on('beforestart', ({ event }) => {
@@ -184,7 +187,8 @@ selection
   })
   .on('start', () => {
     /* eslint-disable-next-line */
-  clearSelectedWorkflows();
+    clearSelectedWorkflows();
+    document.body.style.userSelect = 'none';
   })
   .on('move', (event) => {
     event.store.changed.added.forEach((el) => {
@@ -198,6 +202,7 @@ selection
     state.selectedWorkflows = event.store.selected.map(
       (el) => el.dataset?.workflow
     );
+    document.body.style.userSelect = '';
   });
 
 const filteredWorkflows = computed(() => {
@@ -422,3 +427,10 @@ onBeforeUnmount(() => {
   window.removeEventListener('keydown', deleteSelectedWorkflows);
 });
 </script>
+<style>
+.selection-area {
+  background: rgba(46, 115, 252, 0.11);
+  border: 2px solid rgba(98, 155, 255, 0.81);
+  border-radius: 0.1em;
+}
+</style>

yarn.lock

@@ -1811,10 +1811,10 @@
     hookable "^5.5.3"
     unhead "1.3.9"
 
-"@viselect/vanilla@^3.2.5":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@viselect/vanilla/-/vanilla-3.3.1.tgz#ec4276b0814157b7ffe8ac1f28fdd70df36e1d76"
-  integrity sha512-QqkPGV+uyteX/HqzhHp5ZRfpVYiA0A3umh8HT/nfoBKccoA/kiTdI+5B/8ZPijtanBj9NNymMMPCn0W+/BeEyg==
+"@viselect/vanilla@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@viselect/vanilla/-/vanilla-3.5.0.tgz#3be43b7f335712bc4ee5fcd5d2b68a525d1b6c4a"
+  integrity sha512-drPkEQ/0CZl/c7D0gx5lWkY6iCdbyJm6KWFJpY2oQEKEnCrW9LUdQOsbNP/RG2L8BNUaiDBmwyTTW2RYIroZhA==
 
 "@vue-flow/background@^1.2.0":
   version "1.2.0"