fix: select rect wrong after zoom in / out

src/components/LabCanvas.vue

@@ -197,6 +197,8 @@ const selectionRectangle = reactive({
   y2: 0,
 });
 
+const stageScale = ref(1);
+
 onMounted(() => {
   if (isNull(transformerRef.value)) return;
 
@@ -305,13 +307,20 @@ function handleMouseDown(e: Event) {
 
   // start selection rectangle
   isSelecting.value = true;
-  const pos = target.getStage()?.getPointerPosition();
+  const stage = target.getStage();
-  if (!isNull(pos) && !isUndefined(pos)) {
+  const pos = stage?.getPointerPosition();
+  if (!isNull(pos) && !isUndefined(pos) && !isNull(stage)) {
+    // Convert pointer position to relative coordinates considering scale and position
+    const relativePos = {
+      x: (pos.x - stage.x()) / stage.scaleX(),
+      y: (pos.y - stage.y()) / stage.scaleY(),
+    };
+    
     selectionRectangle.visible = true;
-    selectionRectangle.x1 = pos.x;
+    selectionRectangle.x1 = relativePos.x;
-    selectionRectangle.y1 = pos.y;
+    selectionRectangle.y1 = relativePos.y;
-    selectionRectangle.x2 = pos.x;
+    selectionRectangle.x2 = relativePos.x;
-    selectionRectangle.y2 = pos.y;
+    selectionRectangle.y2 = relativePos.y;
   }
 }
 
@@ -324,10 +333,17 @@ function handleMouseMove(e: Event) {
     return;
   }
 
-  const pos = target.getStage()?.getPointerPosition();
+  const stage = target.getStage();
-  if (!isNull(pos) && !isUndefined(pos)) {
+  const pos = stage?.getPointerPosition();
-    selectionRectangle.x2 = pos.x;
+  if (!isNull(pos) && !isUndefined(pos) && !isNull(stage)) {
-    selectionRectangle.y2 = pos.y;
+    // Convert pointer position to relative coordinates considering scale and position
+    const relativePos = {
+      x: (pos.x - stage.x()) / stage.scaleX(),
+      y: (pos.y - stage.y()) / stage.scaleY(),
+    };
+    
+    selectionRectangle.x2 = relativePos.x;
+    selectionRectangle.y2 = relativePos.y;
   }
 }
 
@@ -425,6 +441,7 @@ function handleWheel(e: { target: any; evt: MouseEvent & { deltaY: number } }) {
   const newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
 
   stage.scale({ x: newScale, y: newScale });
+  stageScale.value = newScale;
 
   const newPos = {
     x: pointer.x - mousePointTo.x * newScale,

src/views/ProjectView.vue

@@ -33,11 +33,3 @@ import LabCanvas from "@/components/LabCanvas.vue";
 <style>
 @import "../assets/main.css";
 </style>
-
-<style module>
-@import "../assets/main.css";
-
-.primary {
-  color: rgb(125, 193, 239);
-}
-</style>