Moveable: While resizing, control box is moving only in one direction. (In Angular)

[iprasadg]

@daybrush Hello,

I am working with ngx-moveable in Angular. I am trying to apply resize on an image. Resizing is working fine but the control box along with target always move only in one direction (Top Left).

Ideal Behavior Should:
for e.g If user resize from top-left then box should moves towards bottom-right.

Need Help
Thanks.

[daybrush]

@iprasadg

The behavior I'm expecting and wanting is:

Is the action by your code up or down?

[iprasadg]

Sorry I didn't get you. Sharing my code below.

Codesandbox

[ajinkya-dev]

@daybrush @iprasadg
I'm also facing similar issue.

@daybrush
BTW, thanks for such awesome package.
Thanks in advance.

[daybrush]

@iprasadg @ajinkya-dev

Do you mean this code?

this.frame.set("width", `${width}px`);
this.frame.set("height", `${height}px`);
this.frame.set("left", `${drag.left}px`);
this.frame.set("top", `${drag.top}px`);

https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-resizable

[iprasadg]

@daybrush Thanks buddy, I think I should give you a party :)

[ajinkya-dev]

@daybrush Thanks. Enjoying to play with this package.

[JulesVi]

Hello,
Sorry to reopen the issue but I have troubles with the resize (on angular) on left and top of the tiles on this project :
https://github.com/JulesVi/BugsDragResize
Do you have an idea of this strange behaviour ?
Thanks

[daybrush]

@JulesVi

It seems to use translate, top , left in resize redundantly.
It also seems that the top and left sides are asynchronous.

How about below:

temp.setPos(drag.beforeTranslate[0], drag.beforeTranslate[1]);

target.style.left = `${drag.beforeTranslate[0]}px`;
target.style.top = `${drag.beforeTranslate[1]}px`;

[JulesVi]

It works perfectly !
Thanks