Programmatically set size does not work correctly

[RLatypov]

When you set the size programmatically with the option :lock-aspect-ratio="true", this does not work correctly. Please see an example https://codepen.io/ruslan-latypov/pen/GRJNOmr

How can this be fixed?

[TitanFighter]

Looks like a bug. @mauricius should look at this issue.

[RLatypov]

@TitanFighter @mauricius any updates?

[mauricius]

I'm not really sure what the issue is here. It looks like that it is something related to the Vuejs reactivity mechanism because I'm not always able to replicate it. However I can tell you that you can remove the onResize handler from your code, because there's no need to set back the values for x, y, w and h. First of all they are already coming from the component, but also they are ignored during dragging and resizing. You can use the resizestop event if you want to keep them in sync. Alternatively you can use the key prop to force the component to the initial state, since the values in your parent component did not change.

[RLatypov]

@mauricius I replaced the method onResize toresizestop, thanks for the hint. I see the size is not set, because the condition is false: https://github.com/mauricius/vue-draggable-resizable/blob/56cef60abb34eeac95c2c19e9c88c6bea6d197f9/src/components/vue-draggable-resizable.vue#L811 I can do this.$children[0].rawBottom = this.h but this is not the right way.

[skylingfly]

same here, actually, we want to some api to set values for x, y, w dynamicly and h to handle the boundary issues or something else. waiting for your feedback, tks. example as below:

private onDrag(left: number, top: number) {
    if (top < 0) {
      this.dragPic.y = 0
     ......
    }
    if (left < 0) {
      this.dragPic.x = 0
      ....
    }
  }

[Flourad]

same here, actually, we want to some api to set values for x, y, w dynamicly and h to handle the boundary issues or something else. waiting for your feedback, tks. example as below:

private onDrag(left: number, top: number) {
    if (top < 0) {
      this.dragPic.y = 0
     ......
    }
    if (left < 0) {
      this.dragPic.x = 0
      ....
    }
  }

we want to some api to set values for x, y, w dynamicly and h to handle the boundary i +1

[Flourad]

I'm not really sure what the issue is here. It looks like that it is something related to the Vuejs reactivity mechanism because I'm not always able to replicate it. However I can tell you that you can remove the onResize handler from your code, because there's no need to set back the values for x, y, w and h. First of all they are already coming from the component, but also they are ignored during dragging and resizing. You can use the resizestop event if you want to keep them in sync. Alternatively you can use the key prop to force the component to the initial state, since the values in your parent component did not change.

How to use the resizestop and the ky prop? Could you give a demo?

[TitanFighter]

resizestop -> https://github.com/mauricius/vue-draggable-resizable#resizestop key is a vue's built-in prop, it is not module specific -> https://vuejs.org/v2/api/#key

[Flourad]

resizestop -> https://github.com/mauricius/vue-draggable-resizable#resizestop key is a vue's built-in prop, it is not module specific -> https://vuejs.org/v2/api/#key

Thx