feat(selector): improve api

app/components/Common/ButtonSelector.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    rect: [x: number, y: number, width: number, height: number];
     opacity?: number;
   }>(),
   {
@@ -16,18 +13,16 @@ const cornerImage = useTemplateRef("cornerImage");
 
 const ANIMATION_SPEED = 0.25;
 
-let currentX = props.x;
-let currentY = props.y;
-let currentWidth = props.width;
-let currentHeight = props.height;
+let [currentX, currentY, currentWidth, currentHeight] = props.rect;
 
 useRender((ctx) => {
   if (!cornerImage.value) return;
 
-  const dx = props.x - currentX;
-  const dy = props.y - currentY;
-  const dw = props.width - currentWidth;
-  const dh = props.height - currentHeight;
+  const [targetX, targetY, targetWidth, targetHeight] = props.rect;
+  const dx = targetX - currentX;
+  const dy = targetY - currentY;
+  const dw = targetWidth - currentWidth;
+  const dh = targetHeight - currentHeight;
 
   if (
     Math.abs(dx) < 0.5 &&
@@ -35,10 +30,7 @@ useRender((ctx) => {
     Math.abs(dw) < 0.5 &&
     Math.abs(dh) < 0.5
   ) {
-    currentX = props.x;
-    currentY = props.y;
-    currentWidth = props.width;
-    currentHeight = props.height;
+    [currentX, currentY, currentWidth, currentHeight] = props.rect;
   } else {
     currentX += dx * ANIMATION_SPEED;
     currentY += dy * ANIMATION_SPEED;