From 262c5e40035a16d54947e6d0c80fdd863c1550c0 Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Tue, 1 Jul 2025 20:12:39 +0800
Subject: [PATCH] fix: select not work

---
 src/components/LabCanvas.vue | 122 ++++++++++++++++++-----------------
 1 file changed, 62 insertions(+), 60 deletions(-)

diff --git a/src/components/LabCanvas.vue b/src/components/LabCanvas.vue
index 69a4e02..2d804de 100644
--- a/src/components/LabCanvas.vue
+++ b/src/components/LabCanvas.vue
@@ -12,7 +12,7 @@
     >
       <v-layer ref="layerRef">
         <template
-          ref="canvasObjects"
+          ref="canvasObjectsRef"
           v-for="item in objMap.values()"
           :key="item.id"
         >
@@ -111,19 +111,24 @@ function calculateRectBounding(
   width: number,
   height: number,
   rotation: number,
+  scale: number = 1,
   padding?: number,
 ) {
+  // Apply scale to dimensions first
+  const scaledWidth = width * scale;
+  const scaledHeight = height * scale;
+
   // calculate bounding box for rotated rectangle
   const radians = (rotation * Math.PI) / 180;
   const cos = Math.cos(radians);
   const sin = Math.sin(radians);
 
-  // calculate corners of the rectangle
+  // calculate corners of the scaled rectangle
   const corners = [
     { x: 0, y: 0 },
-    { x: width, y: 0 },
-    { x: width, y: height },
-    { x: 0, y: height },
+    { x: scaledWidth, y: 0 },
+    { x: scaledWidth, y: scaledHeight },
+    { x: 0, y: scaledHeight },
   ].map((point) => ({
     x: point.x * cos - point.y * sin,
     y: point.x * sin + point.y * cos,
@@ -135,20 +140,22 @@ function calculateRectBounding(
   const minY = Math.min(...corners.map((p) => p.y));
   const maxY = Math.max(...corners.map((p) => p.y));
 
-  if (padding)
+  if (padding) {
+    const scaledPadding = padding * scale;
     return {
-      x: minX - padding,
-      y: minY - padding,
-      width: maxX - minX + padding * 2,
-      height: maxY - minY + padding * 2,
+      x: minX - scaledPadding,
+      y: minY - scaledPadding,
+      width: maxX - minX + scaledPadding * 2,
+      height: maxY - minY + scaledPadding * 2,
     };
-  else
+  } else {
     return {
       x: minX,
       y: minY,
       width: maxX - minX,
       height: maxY - minY,
     };
+  }
 }
 
 const objMap = reactive<Map<string, CanvasObject>>(new Map());
@@ -178,11 +185,11 @@ onMounted(() => {
   }
 });
 
-const layerRef = useTemplateRef<VLayer>("layer");
-const canvasObjectsRef = useTemplateRef<HTMLTemplateElement[]>("canvasObjects");
-const transformerRef = useTemplateRef<VTransformer>("transformer");
-const selectRectRef = useTemplateRef<VNode>("selectRect");
-const stageRef = useTemplateRef<VStage>("stage");
+const layerRef = useTemplateRef<VLayer>("layerRef");
+const canvasObjectsRef = useTemplateRef<HTMLTemplateElement[]>("canvasObjectsRef");
+const transformerRef = useTemplateRef<VTransformer>("transformerRef");
+const selectRectRef = useTemplateRef<VNode>("selectRectRef");
+const stageRef = useTemplateRef<VStage>("StageRef");
 
 const isDragging = ref(false);
 const dragItemId = ref<string | null>(null);
@@ -207,6 +214,26 @@ onMounted(() => {
   selectedBox.rotateEnabled(false);
 });
 
+// Update transformer nodes when selection changes
+watch(selectedIds, () => {
+  if (isNull(transformerRef.value)) return;
+
+  const nodes = selectedIds.value.map((id) => {
+    if (isNull(layerRef.value)) {
+      console.error("layer is null");
+      return null;
+    }
+
+    for (let node of layerRef.value.getNode().children) {
+      if (node instanceof Konva.Group && node.id() === `group-${id}`)
+        return node;
+    }
+  }) as Konva.Node[];
+
+  // console.log(nodes);
+  if (!isUndefined(nodes)) transformerRef.value.getNode().nodes(nodes);
+});
+
 function handleCacheChange(e: Event) {
   const target = e.target as HTMLInputElement;
   const shouldCache = isNull(target) ? false : target.checked;
@@ -227,14 +254,6 @@ function handleDragStart(e: Event) {
   // save drag element:
   const target = e.target as unknown as Konva.Node;
   dragItemId.value = target.id();
-
-  // move current element to the top:
-  // const item = list.value.find((i) => i.id === dragItemId.value);
-  // if (isUndefined(item)) return;
-  //
-  // const index = list.value.indexOf(item);
-  // list.value.splice(index, 1);
-  // list.value.push(item);
 }
 
 function handleDragEnd() {
@@ -242,24 +261,6 @@ function handleDragEnd() {
   dragItemId.value = null;
 }
 
-// Update transformer nodes when selection changes
-watch(selectedIds, () => {
-  if (isNull(transformerRef.value)) return;
-
-  const nodes = selectedIds.value.map((id) => {
-    if (isNull(layerRef.value)) {
-      console.error("layer is null");
-      return null;
-    }
-
-    for (let node of layerRef.value.getNode().children) {
-      if (node instanceof Konva.Group && node.id() === `group-${id}`)
-        return node;
-    }
-  }) as Konva.Node[];
-
-  if (!isUndefined(nodes)) transformerRef.value.getNode().nodes(nodes);
-});
 
 // Mouse event handlers
 function handleStageClick(e: { target: any; evt: MouseEvent }) {
@@ -315,7 +316,7 @@ function handleMouseDown(e: Event) {
       x: (pos.x - stage.x()) / stage.scaleX(),
       y: (pos.y - stage.y()) / stage.scaleY(),
     };
-    
+
     selectionRectangle.visible = true;
     selectionRectangle.x1 = relativePos.x;
     selectionRectangle.y1 = relativePos.y;
@@ -341,7 +342,7 @@ function handleMouseMove(e: Event) {
       x: (pos.x - stage.x()) / stage.scaleX(),
       y: (pos.y - stage.y()) / stage.scaleY(),
     };
-    
+
     selectionRectangle.x2 = relativePos.x;
     selectionRectangle.y2 = relativePos.y;
   }
@@ -367,6 +368,7 @@ function handleMouseUp() {
     height: Math.abs(selectionRectangle.y2 - selectionRectangle.y1),
   };
 
+  // console.log(`Stage Scale: ${stageScale.value}`);
   let currentSelectedIds = [];
   for (let [key, shape] of objMap) {
     const shapeConfig = objMap.get(shape.id);
@@ -375,22 +377,21 @@ function handleMouseUp() {
     }
 
     if (isUndefined(shapeConfig.box)) {
-      if (isUndefined(shapeConfig.box)) {
-        if (
-          shapeConfig.config.width &&
-          shapeConfig.config.height &&
-          shapeConfig.config.rotation
-        ) {
-          shapeConfig.box = calculateRectBounding(
-            shapeConfig.config.width,
-            shapeConfig.config.height,
-            shapeConfig.config.rotation,
-            5,
-          );
-        } else {
-          console.error("Could not calculate rect bounding");
-          return;
-        }
+      if (
+        shapeConfig.config.width &&
+        shapeConfig.config.height &&
+        shapeConfig.config.rotation
+      ) {
+        shapeConfig.box = calculateRectBounding(
+          shapeConfig.config.width,
+          shapeConfig.config.height,
+          shapeConfig.config.rotation,
+          stageScale.value,
+          5,
+        );
+      } else {
+        console.error("Could not calculate rect bounding");
+        return;
       }
     }
 
@@ -482,6 +483,7 @@ function handleCanvasObjectMouseOver(evt: Event) {
         objectConfig.config.width,
         objectConfig.config.height,
         objectConfig.config.rotation,
+        stageScale.value, // 传入当前缩放比例
         5,
       );
     } else console.error("Could not calculate rect bounding");