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",

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,15 +45,15 @@ 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,
   })
 }
 
 const onContextMenu = (event: MouseEvent) => {
-  const nodes = selectedNodes.value
+  const nodes = selectedNodes
   hooks.selectionContextMenu.trigger({ event, nodes })
 }
 </script>