Error when resizing svg circle #1149
Description
Hello.
I need to resize, rotate and drag svg circle objects.
Rotate, and drag works correctly, but resizing circle make a strange effect.
circle size is growing very fast and don't follow the mouse moves.
If i use scalable, it's working, but i need to resize because my svg objects contains nested text objects, and i dont want to scale text.
I tried to use delta and dist in resize event, with no luck.
How to resize svg circle ?
Moveable vanilla version 0.53.0
<html>
<head>
<script type="text/javascript" src="/js/moveable/moveable.min.js"></script>
</head>
<body onload="init()">
<div class="root" id="root">
<div class="container" id="container">
<svg viewBox="0 0 800 700" style="border: 1px solid black; width: 800; height:800px;">
<circle class="draggable" style="cx:100px; cy:100px; r:50px"/>
</svg>
</div>
</div>
<script type="text/javascript">
function init() {
const moveable = new Moveable(document.getElementById("container"), {
target: ".draggable",
rotatable: true,
resizable: true,
draggable: true,
keepRatio: false,
throttleResize: 1,
});
moveable.on("render", e => {
e.target.style.cssText += e.cssText;
});
moveable.on("resize", e => {
//console.log(e);
e.target.style.r = `${e.width}px`;
e.target.style.transform = e.drag.transform;
});
moveable.on("drag", e => {
e.target.style.transform = e.transform;
});
}
</script>
</body>
</html>