update: pass selected elements as prop to nodesselection

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/NodesSelection/NodesSelection.vue

@@ -1,21 +1,17 @@
 <script lang="ts" setup>
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
-import { GraphNode } from '../../types'
+import { FlowElements, GraphNode } from '../../types'
 import { getRectOfNodes, isGraphNode } from '../../utils'
 
+interface NodesSelectionProps {
+  selectedElements: FlowElements
+}
+
 const store = useStore()
 
-const selectedNodes: GraphNode[] = store.selectedElements
+const props = defineProps<NodesSelectionProps>()
-  ? store.selectedElements.filter(isGraphNode).map((selectedNode) => {
+const selectedNodes: GraphNode[] = props.selectedElements ? props.selectedElements.filter(isGraphNode) : []
-      const matchingNode = store.nodes.find((node) => node.id === selectedNode.id)
-
-      return {
-        ...matchingNode,
-        position: matchingNode?.__vf?.position,
-      } as GraphNode
-    })
-  : []
 
 const selectedNodesBBox = getRectOfNodes(selectedNodes)
 
@@ -56,7 +52,7 @@ const onContextMenu = (event: MouseEvent) => {
   store.hooks.selectionContextMenu.trigger({ event, nodes })
 }
 
-const transform = computed(() => store.transform)
+const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 </script>
 <script lang="ts">
 export default {
@@ -64,14 +60,14 @@ export default {
 }
 </script>
 <template>
-  <div
+  <div class="vue-flow__nodesselection" :style="{ transform }">
-    class="vue-flow__nodesselection"
-    :style="{
-      transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
-    }"
-  >
     <Draggable @start="onStart" @move="onDrag" @stop="onStop">
-      <div class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />
+      <div
+        :key="`vue-flow-nodesselection-rect-${store.$id}`"
+        class="vue-flow__nodesselection-rect"
+        :style="innerStyle"
+        @contextmenu="onContextMenu"
+      />
     </Draggable>
   </div>
 </template>

src/container/SelectionPane/SelectionPane.vue

@@ -70,6 +70,11 @@ export default {
 <template>
   <slot></slot>
   <UserSelection v-if="userSelection" id="user-selection" :key="`user-selection-${store.$id}`" />
-  <NodesSelection v-if="props.nodesSelectionActive" id="nodes-selection" :key="`nodes-selction-${store.$id}`" />
+  <NodesSelection
+    v-if="props.nodesSelectionActive"
+    id="nodes-selection"
+    :key="`nodes-selction-${store.$id}`"
+    :selected-elements="props.selectedElements"
+  />
   <div :key="`flow-pane-${store.$id}`" class="vue-flow__pane" @click="onClick" @contextmenu="onContextMenu" @wheel="onWheel" />
 </template>