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 !
@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!
Most helpful comment
@abinhho
The transform contains both translate and rotate.