This commit is contained in:
2024-12-18 22:27:27 +01:00
parent 6af27de3dd
commit a892e1fcb2
4 changed files with 126 additions and 18 deletions

View File

@@ -73,8 +73,14 @@ export const panning = function(superClass) {
this.xOffset = matrix.m41;
this.yOffset = matrix.m42;
this.initialX = e.clientX - this.xOffset;
this.initialY = e.clientY - this.yOffset;
if (this.targetElement === this.canvas) {
this.initialX = e.clientX - this.xOffset;
this.initialY = e.clientY - this.yOffset;
} else {
// For nodes, compensate for scale in initial position too
this.initialX = e.clientX - (this.xOffset * this.scale);
this.initialY = e.clientY - (this.yOffset * this.scale);
}
}
}
@@ -82,11 +88,19 @@ export const panning = function(superClass) {
if (this.isDragging && this.targetElement) {
e.preventDefault();
this.currentX = e.clientX - this.initialX;
this.currentY = e.clientY - this.initialY;
this.targetElement.style.transform =
`translate(${this.currentX}px, ${this.currentY}px)`;
if (this.targetElement === this.canvas) {
// For canvas panning, no scale compensation needed
this.currentX = e.clientX - this.initialX;
this.currentY = e.clientY - this.initialY;
this.targetElement.style.transform =
`translate(${this.currentX}px, ${this.currentY}px) scale(${this.scale})`;
} else {
// For nodes, compensate for canvas scale
this.currentX = (e.clientX - this.initialX) / this.scale;
this.currentY = (e.clientY - this.initialY) / this.scale;
this.targetElement.style.transform =
`translate(${this.currentX}px, ${this.currentY}px)`;
}
}
}