[BUG] resize could go outside the configured boundaries

[ctf0]

Environments

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

Description

• with rotation it may cuz flickering

• without rotation

• and here is the 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 < 0 ? 0 : left + 'px' target.style.top = top < 0 ? 0 : 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`
})

[daybrush]

@ctf0 Since this is 50% to 50% transform-origin, I think it might be different.

[ctf0]

@daybrush could u plz elaborate ?!!

[daybrush]

@ctf0

Oh. Sorry.

I am confused with the issue below. https://github.com/daybrush/moveable/issues/254

It's duplicate of #235 .

[daybrush]

@ctf0

• moveable 0.17.9
• react-moveable 0.20.9
• preact-moveable 0.19.9
• ngx-moveable 0.13.10
• svelte-moveable 0.8.10

moveable's new version is released. Check it again.

[ctf0]

nothing changed unfortunately 😢

[daybrush]

@ctf0

I'm not sure why?

Add this code:

.on("resizeStart", ({ setOrigin }) => {
    setOrigin(["%", "%"]);
})

If not, wouldn't you give me a test address?

[ctf0]

for the rotated example, it no longer flickers, but now the boundaries are calculated incorrectly.

still, i will prepare a demo and add it today, thank you for ur help.

[ctf0]

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

[daybrush]

@ctf0

• moveable 0.17.10
• react-moveable 0.20.10
• preact-moveable 0.19.10
• ngx-moveable 0.13.11
• svelte-moveable 0.8.11

moveable's new version is released.

[ctf0]

awesome, much appreciated.

btw is there a way to stop the resize once the boundaries are meet instead of the current ? as it flickers a little bit which kinda looks like the box is struggling to whether to resize or not.

[daybrush]

@ctf0

How about using max-width or max-height?

[ctf0]

oh okay, will give it a go, thanx for the headsup