[BUG/Question] when item is rotated, left & top is calculated incorrectly

Environments

• Framework name: vanilla
• Framework version: latest
• Moveable Component version:
• Testable Address(optional):

Description

am not really sure if this is intended or is a bug but when item is rotated, the left/top should be the same as the normal

• rotated

• normal

• code

let rotate = 0
let movable = new Moveable(document.querySelector('product'), {
    target      : document.querySelector('logo'),
    dragArea    : true,
    draggable   : true,
    throttleDrag: 0,

    rotatable     : true,
    throttleRotate: 5,

    resizable     : true,
    throttleResize: 0,
    keepRatio     : true,
    baseDirection : [1, 1],

    pinchable     : true,
    pinchThreshold: 20,
    origin        : false,
    edge          : false,

    snappable         : true,
    snapThreshold     : 0,
    snapCenter        : true,
    isDisplaySnapDigit: false,
    elementGuidelines : [document.querySelector('shirt')],
    bounds            : {
                top   : 0,
                bottom: document.querySelector('shirt').clientHeight,
                left  : 0,
                right : document.querySelector('shirt').clientWidth
            }
    })

movable
    .on('drag', ({target, left, top}) => {
        target.style.left = left + 'px'
        target.style.top = top + 'px'
    })
    .on('resize', ({target, width, height, drag}) => {
        target.style.width  = width + 'px'
        target.style.height = height + 'px'
        target.style.left   = drag.left + 'px'
        target.style.top    = drag.top + 'px'
    })
    .on('rotate', ({target, delta}) => {
        let current = rotate + delta

        if (current > 180 || current < -180) {
            return false
        }

        target.style.transform = `rotate(${(Math.round(current))})deg`
    })

• demo https://jsfiddle.net/muah003/w2x9q04r/9/

[daybrush]

@ctf0

Whenever rotation is finished, set the bounds like this. Moveable doesn’t support your method. However, you can create a method by setting bounds arbitrarily.

    const containerRect = shirt.getBoundingClientRect();
    const itemRect = logo.getBoundingClientRect();
    const itemStyle = window.getComputedStyle(logo);

    const left = itemRect.left - containerRect.left - parseFloat(itemStyle.left);
    const top = itemRect.top - containerRect.top - parseFloat(itemStyle.top);
   moveable.bounds = {
      left, top, .....
   };

[ctf0]

i’ve updated to the last release & the above snippet is no longer needed, the plugin force that internally, good job @daybrush

however, is there a way to make sure the logo is moved all the way to left while keeping the left/top to 0,0? , here is what i have atm

note that this only happens if the item have a different width & height aka.not a box.