Moveable: Resizable not growth from right on google map

Created on 12 Nov 2019  路  2Comments  路  Source: daybrush/moveable

Hi again!

I am using resizable in google map but it's seem work perfectly when I hold the right bottom node.
But when I hold resize top left node and move to left, It's only growth up width and height. I also try to use like frame.translate = drag.beforeTranslate but it's no worked too.

My expected: The first view example on this page: https://daybrush.com/moveable/
Please check my code at: https://jsfiddle.net/abinhho/2bo0k5ye/66/

Please help !

question solved

Most helpful comment

@abinhho
The transform contains both translate and rotate.

    const frame = {
        translate: [0, 0],
        rotate: 50,
    };

    function renderTransform(target) {
        const { translate, rotate } = frame;
        target.style.transform = `translate(${translate[0]}px, ${translate[1]}px) rotate(${rotate}deg)`;
    }
    moveable.on("dragStart", ({ inputEvent }) => {
       inputEvent.stopPropagation();
    }).on("dragEnd", ({ target, isDrag, clientX, clientY }) => {
        console.log("onDragEnd", target, isDrag);
    });
    moveable.on("rotateStart", ({ set }) => {
            set(frame.rotate);
    }).on("rotate", ({ target, beforeRotate }) => {
            frame.rotate = beforeRotate;
      renderTransform(target);
    });
    moveable.on("resizeStart", ({ target, set, setOrigin, dragStart }) => {
        setOrigin(["%", "%"]);

        // If cssSize and offsetSize are different, set cssSize. (no box-sizing)
        const style = window.getComputedStyle(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 }) => {
        console.log(width, height, drag, drag.left, drag.top);
        target.style.width = width + "px";
        target.style.height = height + "px";
        frame.translate = drag.beforeTranslate;
                renderTransform(target);
    });

All 2 comments

@abinhho
The transform contains both translate and rotate.

    const frame = {
        translate: [0, 0],
        rotate: 50,
    };

    function renderTransform(target) {
        const { translate, rotate } = frame;
        target.style.transform = `translate(${translate[0]}px, ${translate[1]}px) rotate(${rotate}deg)`;
    }
    moveable.on("dragStart", ({ inputEvent }) => {
       inputEvent.stopPropagation();
    }).on("dragEnd", ({ target, isDrag, clientX, clientY }) => {
        console.log("onDragEnd", target, isDrag);
    });
    moveable.on("rotateStart", ({ set }) => {
            set(frame.rotate);
    }).on("rotate", ({ target, beforeRotate }) => {
            frame.rotate = beforeRotate;
      renderTransform(target);
    });
    moveable.on("resizeStart", ({ target, set, setOrigin, dragStart }) => {
        setOrigin(["%", "%"]);

        // If cssSize and offsetSize are different, set cssSize. (no box-sizing)
        const style = window.getComputedStyle(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 }) => {
        console.log(width, height, drag, drag.left, drag.top);
        target.style.width = width + "px";
        target.style.height = height + "px";
        frame.translate = drag.beforeTranslate;
                renderTransform(target);
    });

@daybrush
It helped me a lot. It's worked for me.
Thanks you so much!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

adityakrshnn picture adityakrshnn  路  6Comments

jiseopX picture jiseopX  路  4Comments

wassgha picture wassgha  路  6Comments

darsodango picture darsodango  路  3Comments

jameschetwood picture jameschetwood  路  6Comments