fix: select not work

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,14 +140,15 @@ 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,
@@ -150,6 +156,7 @@ function calculateRectBounding(
       height: maxY - minY,
     };
   }
+}
 
 const objMap = reactive<Map<string, CanvasObject>>(new Map());
 onMounted(() => {
@@ -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 }) {
@@ -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);
@@ -374,7 +376,6 @@ function handleMouseUp() {
       return;
     }
 
-    if (isUndefined(shapeConfig.box)) {
     if (isUndefined(shapeConfig.box)) {
       if (
         shapeConfig.config.width &&
@@ -385,6 +386,7 @@ function handleMouseUp() {
           shapeConfig.config.width,
           shapeConfig.config.height,
           shapeConfig.config.rotation,
+          stageScale.value,
           5,
         );
       } else {
@@ -392,7 +394,6 @@ function handleMouseUp() {
         return;
       }
     }
-    }
 
     if (
       Konva.Util.haveIntersection(selBox, {
@@ -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");