Moveable: Resizable - centers

[Minimalpris]

if you resize from left, right, top or bottom, it does a center resize. Moving both right and left or top and bottom.
Other libs. resize by only moving the side you have clicked on and keeping the others in place.
( hope it make sence :-/ )

[daybrush]

@Minimalpris
Please refer to the link below.
https://github.com/daybrush/moveable/issues/19

on("resize", ({ direction, delta }) => {
    width += delta;
    height += delta;
    left += direction[0] < 0 ? delta[0] : 0;
    top += direction[1] < 0 ? delta[1] : 0;
});

[n3gotium]

I've done what you've suggested but now I'm facing a weird resizing behavior when element was rotated. Sorry for asking it here but I think it would be helpful for other people too.

Here is codesandbox with the issue: https://codesandbox.io/s/nice-khayyam-jl3l7

Try to rotate the element and then resize it.

Would be great if you could point out what is going wrong there.

P. S. Thank you for your hard work.

[daybrush]

@n3gotium

Try the following:

// from
const { top, left } = target.getBoundingClientRect();
// to
const { top, left } = transformProps;

[n3gotium]

@daybrush It worked! Thanks a lot for your help!

[LCGijs]

Can you help me with OnScaleGroup? The scale currently gets applied on every direction however I want it to be like sketch. Unfortunately, I can't get it to work.

[daybrush]

@LCGijs

Thank you for feature request.

Please refer to the link below.
https://github.com/daybrush/moveable/issues/41

[daybrush]

@LCGijs

moveable 0.9.0 is released.
react-moveable 0.12.1 is released.
preact-moveable 0.11.2 is released.
ngx-moveable 0.5.1 is released.

https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-resizable

import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
    resizable: true,
});

const frame = {
    translate: [0, 0],
};
moveable.on("resizeStart", ({ set, setOrigin, dragStart }) => {
    // Set origin if transform-orgin use %.
    setOrigin(["%", "%"]);

    // If cssSize and offsetSize are different, set cssSize. (no box-sizing)
    const style = window.getComputedStyle(ev.target);
    const cssWidth = parseFloat(style.width);
    const cssHeight = parseFloat(style.height);
    set([cssWidth, cssHeight]);

    // If a drag event has already occurred, there is no dragStart.
    dragStart && dragStart.set(frame.translate);
}).on("resize", ({ target, width, height, drag }) => {
    target.style.width = `${width}px`;
    target.style.height = `${height}px`;

    // get drag event
    frame.translate = drag.beforeTranslate;
    target.style.transform
        = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`;
}).on("resizeEnd", ({ target, isDrag, clientX, clientY }) => {
    console.log("onResizeEnd", target, isDrag);
});

Thank you :)