Recently, I have come across an issue with the function provided below. It seems that when an image is zoomed in, it can be dragged beyond its boundaries. This results in a gap forming between the image and its container, which widens as the image scale increases.
It appears that the dimensions of the image are being accurately captured by the getBoundingClientRect method as it scales. However, the root cause of the problem remains unidentified.
If you have any suggestions or solutions to address this issue, they would be greatly appreciated.
dragMove(event) {
if (this.isDragging && this.imageScale > this.minZoom) {
const containerRect = this.$refs.croquisContainer.getBoundingClientRect();
const imageRect = this.$refs.croquisImage.getBoundingClientRect();
const maxOffsetX = (imageRect.width - containerRect.width) / 2;
const maxOffsetY = (imageRect.height - containerRect.height) / 2;
const deltaX = event.clientX - this.lastX;
const deltaY = event.clientY - this.lastY;
const newOffsetX = this.offsetX + deltaX;
const newOffsetY = this.offsetY + deltaY;
this.offsetX = Math.max(Math.min(newOffsetX, maxOffsetX), -maxOffsetX);
this.offsetY = Math.max(Math.min(newOffsetY, maxOffsetY), -maxOffsetY);
this.lastX = event.clientX;
this.lastY = event.clientY;
}
}
JSFiddle: https://jsfiddle.net/n4d7txwy/
UPDATE
This fixes the initial issue
const maxOffsetX = (imageRect.width - containerRect.width) / (2 * this.imageScale);
const maxOffsetY = (imageRect.height - containerRect.height) / (2 * this.imageScale);