diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue index e28173cf..465c10d6 100644 --- a/src/components/NodesSelection/NodesSelection.vue +++ b/src/components/NodesSelection/NodesSelection.vue @@ -4,14 +4,14 @@ import { useVueFlow } from '../../composables' import { getRectOfNodes } from '../../utils' const { id, store } = useVueFlow() -const selectedNodesBBox = computed(() => getRectOfNodes(store.getSelectedNodes)) -const innerStyle = computed(() => ({ - width: `${selectedNodesBBox.value.width}px`, - height: `${selectedNodesBBox.value.height}px`, - top: `${selectedNodesBBox.value.y}px`, - left: `${selectedNodesBBox.value.x}px`, -})) -watch(selectedNodesBBox, (v) => nextTick(() => (store.selectedNodesBbox = v))) +const selectedNodesBBox = getRectOfNodes(store.getSelectedNodes) +const innerStyle = { + width: `${selectedNodesBBox.width}px`, + height: `${selectedNodesBBox.height}px`, + top: `${selectedNodesBBox.y}px`, + left: `${selectedNodesBBox.x}px`, +} +store.selectedNodesBbox = selectedNodesBBox const onStart: DraggableEventListener = ({ event }) => store.hooks.selectionDragStart.trigger({ event, nodes: store.getSelectedNodes }) const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => { @@ -24,7 +24,10 @@ const onStop: DraggableEventListener = ({ event }) => { } const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes }) -const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`) +const scale = controlledComputed( + () => store.transform[2], + () => store.transform[2], +)