diff --git a/src/components/LabCanvas.vue b/src/components/LabCanvas.vue
index c3fe7b5..69a4e02 100644
--- a/src/components/LabCanvas.vue
+++ b/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();
- if (!isNull(pos) && !isUndefined(pos)) {
+ const stage = target.getStage();
+ 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.y1 = pos.y;
- selectionRectangle.x2 = pos.x;
- selectionRectangle.y2 = pos.y;
+ selectionRectangle.x1 = relativePos.x;
+ selectionRectangle.y1 = relativePos.y;
+ selectionRectangle.x2 = relativePos.x;
+ selectionRectangle.y2 = relativePos.y;
}
}
@@ -324,10 +333,17 @@ function handleMouseMove(e: Event) {
return;
}
- const pos = target.getStage()?.getPointerPosition();
- if (!isNull(pos) && !isUndefined(pos)) {
- selectionRectangle.x2 = pos.x;
- selectionRectangle.y2 = pos.y;
+ const stage = target.getStage();
+ 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.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,
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 2fda4ed..b1f5dc2 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -33,11 +33,3 @@ import LabCanvas from "@/components/LabCanvas.vue";
-
-