How to deal with sequence of scale and drag actions

[sunecosuri]

Environments

• Framework name: VueMoveable
• Framework version: 2.0.0-beta57
• Moveable Component version: 0.43.1
• Testable Address(optional):

Description

const transform = translate(${translate[0]}px, ${translate[1]}px) rotate(${rotate}deg) scale(${scale[0]}, ${scale[1]});

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!

[sunecosuri]

reproduce step

Prerequisite

<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>

1. Scaling in Y-axis direction
2. Scaling in X-axis direction
3. In the case of consecutive events, the value of 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

[daybrush]

@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,
}

[daybrush]

@sunecosuri

• croact-moveable 0.4.0
• @moveable/helper 0.1.2
• lit-moveable 0.25.0
• moveable 0.48.0
• preact-moveable 0.50.0
• react-moveable 0.51.0
• svelte-moveable 0.40.0
• vue-moveable 2.0.0-beta.76
• vue3-moveable 0.23.0
• ngx-moveable 0.45.0

moveable'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.