chore(deps): Downgrade draggale to 0.2.5 due to transformation issue with current version

package.json

@@ -35,7 +35,7 @@
     "lint": "yarn lint:js"
   },
   "dependencies": {
-    "@braks/revue-draggable": "0.3.1",
+    "@braks/revue-draggable": "0.2.5",
     "@types/d3": "^7.1.0",
     "@vueuse/core": "^6.6.2",
     "d3": "^7.1.1",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ lockfileVersion: 5.3
 specifiers:
   '@antfu/eslint-config': ^0.9.0
   '@babel/core': ^7.15.8
-  '@braks/revue-draggable': 0.3.1
+  '@braks/revue-draggable': 0.2.5
   '@rollup/plugin-babel': ^5.3.0
   '@rollup/plugin-commonjs': ^19.0.2
   '@rollup/plugin-node-resolve': ^13.0.6
@@ -44,7 +44,7 @@ specifiers:
   vue-tsc: ^0.28.7
 
 dependencies:
-  '@braks/revue-draggable': 0.3.1_vue@3.2.20
+  '@braks/revue-draggable': 0.2.5_vue@3.2.20
   '@types/d3': 7.1.0
   '@vueuse/core': 6.6.2_vue@3.2.20
   d3: 7.1.1
@@ -418,8 +418,8 @@ packages:
       to-fast-properties: 2.0.0
     dev: true
 
-  /@braks/revue-draggable/0.3.1_vue@3.2.20:
-    resolution: {integrity: sha512-IRJssqUG8lrnrP2hTQxg7vttiIL21LimwDuo875t9qYraaVMIEeB2JkEm79gIS+V+7UHjK2Ab2fEhzW8++q5fA==}
+  /@braks/revue-draggable/0.2.5_vue@3.2.20:
+    resolution: {integrity: sha512-iKGLFXaurfEqoyPbkANv8ZuO1229krVvUQDDYN9le5WlVssFWcQtA3hNvBD2TPuwil226qXv9SqXGp5kgDhAsA==}
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
       vue: ^2.0.0 || >=3.0.5

src/components/NodesSelection/NodesSelection.vue

@@ -1,39 +1,39 @@
 <script lang="ts" setup>
 import { DraggableEventListener } from '@braks/revue-draggable'
 import { Node } from '~/types'
-import { isNode } from '~/utils/graph'
+import { getRectOfNodes, isNode } from '~/utils/graph'
 import { useHooks, useStore } from '~/composables'
 
 const store = useStore()
 const hooks = useHooks()
 
-const selectedNodes = computed(() =>
-  store.selectedElements
-    ? store.selectedElements.filter(isNode).map((selectedNode) => {
-        const matchingNode = store.nodes.find((node) => node.id === selectedNode.id)
+const selectedNodes = store.selectedElements
+  ? store.selectedElements.filter(isNode).map((selectedNode) => {
+      const matchingNode = store.nodes.find((node) => node.id === selectedNode.id)
 
-        return {
-          ...matchingNode,
-          position: matchingNode?.__rf.position,
-        } as Node
-      })
-    : [],
-)
+      return {
+        ...matchingNode,
+        position: matchingNode?.__rf.position,
+      } as Node
+    })
+  : []
+
+const selectedNodesBBox = getRectOfNodes(selectedNodes)
 
 const innerStyle = {
-  width: `${store.selectedNodesBbox.width}px`,
-  height: `${store.selectedNodesBbox.height}px`,
-  top: `${store.selectedNodesBbox.y}px`,
-  left: `${store.selectedNodesBbox.x}px`,
+  width: `${selectedNodesBBox.width}px`,
+  height: `${selectedNodesBBox.height}px`,
+  top: `${selectedNodesBBox.y}px`,
+  left: `${selectedNodesBBox.x}px`,
 }
 
 const onStart: DraggableEventListener = ({ event }) => {
-  const nodes = selectedNodes.value
+  const nodes = selectedNodes
   hooks.selectionDragStart.trigger({ event, nodes })
 }
 
 const onDrag: DraggableEventListener = ({ event, data }) => {
-  const nodes = selectedNodes.value
+  const nodes = selectedNodes
   hooks.selectionDrag.trigger({ event, nodes })
   store.updateNodePosDiff({
     diff: {
@@ -45,7 +45,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
 }
 
 const onStop: DraggableEventListener = ({ event }) => {
-  const nodes = selectedNodes.value
+  const nodes = selectedNodes
   hooks.selectionDragStop.trigger({ event, nodes })
   store.updateNodePosDiff({
     isDragging: false,
@@ -53,7 +53,7 @@ const onStop: DraggableEventListener = ({ event }) => {
 }
 
 const onContextMenu = (event: MouseEvent) => {
-  const nodes = selectedNodes.value
+  const nodes = selectedNodes
   hooks.selectionContextMenu.trigger({ event, nodes })
 }
 </script>