Open sunecosuri opened 1 year ago
<template>
<VueMoveable
ref="moveable"
:target="targets"
:resizeable="true"
:draggable="true"
:scalable="true"
:snappable="true"
:snap-gap="true"
:snap-digit="0"
:is-display-snap-digit="true"
:snap-threshold="5"
:keep-ratio="false"
:element-guidelines="targets.map((_, i) => `.target${i}`)"
:snap-directions="{
top: true,
right: true,
bottom: true,
left: true,
}"
:element-snap-directions="{
top: true,
right: true,
bottom: true,
left: true,
}"
@scale="onScale"
/>
</template>
<script lang="ts">
export default defineComponent({
setup() {
const targets = []
const onScale = (event: OnScale) => {
console.log(event)
}
return {
targets,
onScale
}
}
})
</script>
event.cssText
(ex: "transform: translate(NaNpx, NaNpx) scale(NaN, NaN);") is include NaN, and the frame moves to the upper left corner. https://github.com/daybrush/moveable/assets/13265134/75b86839-1916-4ec6-aa9c-f04ac83bb92f
@sunecosuri
Is there an address I can test on?
It is difficult to reproduce the cause of the problem.
Also I will return a transform object from the render
event in the next version.
onRender(e) {
e.transformObject.translate,
e.transformObject.scale,
}
@sunecosuri
croact-moveable
0.4.0@moveable/helper
0.1.2lit-moveable
0.25.0moveable
0.48.0preact-moveable
0.50.0react-moveable
0.51.0svelte-moveable
0.40.0vue-moveable
2.0.0-beta.76vue3-moveable
0.23.0ngx-moveable
0.45.0moveable's new version is released.
onRender(e) {
e.transformObject.translate,
e.transformObject.scale,
}
You can use the transformObject
property in the render event.
rotate is a number and everything else is an array of numbers.
Environments
Description
I would like to move and scale in succession similar to this issue. I would like to use translate without using helper, how can I get the 'translate[]' and 'scale[]' value? I could not find the above state even with movable.getRect() or onDragEvent. A sample code of how to get it would be great!