vue-moveable icon indicating copy to clipboard operation
vue-moveable copied to clipboard

Bounds parameter doesn't work for scaling

Open kota-yata opened this issue 4 years ago • 0 comments

I set the bound parameter bounds: { left: 0, top: 100, right: 300, bottom: 500 }, }, and it works correctly for dragging. However scaling doesn't stop even when edge of the target beyond the bounds.

I tried to limit using DOMRect like so:

const targetRect: DOMRect = event.target.getBoundingClientRect();
let isOnEdge: boolean = false;
if (targetRect.top < this.moveable.bounds.top || targetRect.bottom > this.moveable.bounds.bottom) isOnEdge = true;
if (targetRect.left < this.moveable.bounds.left || targetRect.right > this.moveable.bounds.right) isOnEdge = true;
if (!isOnEdge) event.target.style.transform = event.transform;

In this case, I can't scale the target anymore once isOnEdge turns true since targetRect has already been out of the bounds. How can I limit the target scaling?

kota-yata avatar Mar 19 '21 04:03 kota-yata