From 1461e371ad130719c0ba2efcb470561da2f24488 Mon Sep 17 00:00:00 2001 From: Rizumu Ayaka Date: Wed, 8 Oct 2025 13:52:43 +0800 Subject: [PATCH] perf: avoid calling getBoundingClientRect too often in useSelectionToolboxPosition (#5976) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5976-perf-avoid-calling-getBoundingClientRect-too-often-in-useSelectionToolboxPosition-2866d73d365081639755d8087e80377c) by [Unito](https://www.unito.io) --- .../canvas/useSelectionToolboxPosition.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/composables/canvas/useSelectionToolboxPosition.ts b/src/composables/canvas/useSelectionToolboxPosition.ts index 70be10bd3..3be0a4bbe 100644 --- a/src/composables/canvas/useSelectionToolboxPosition.ts +++ b/src/composables/canvas/useSelectionToolboxPosition.ts @@ -1,4 +1,4 @@ -import { useRafFn } from '@vueuse/core' +import { useElementBounding, useRafFn } from '@vueuse/core' import { computed, onUnmounted, ref, watch } from 'vue' import type { Ref } from 'vue' @@ -57,6 +57,11 @@ export function useSelectionToolboxPosition( const visible = ref(false) + // Use VueUse to reactively track canvas bounding rect + const { left: canvasLeft, top: canvasTop } = useElementBounding( + lgCanvas.canvas + ) + /** * Update position based on selection */ @@ -114,11 +119,11 @@ export function useSelectionToolboxPosition( if (!visible.value) return const { scale, offset } = lgCanvas.ds - const canvasRect = lgCanvas.canvas.getBoundingClientRect() const screenX = - (worldPosition.value.x + offset[0]) * scale + canvasRect.left - const screenY = (worldPosition.value.y + offset[1]) * scale + canvasRect.top + (worldPosition.value.x + offset[0]) * scale + canvasLeft.value + const screenY = + (worldPosition.value.y + offset[1]) * scale + canvasTop.value // Update CSS custom properties directly for best performance if (toolboxRef.value) {