Resize Breaks when target is updated
djorge-ph opened this issue · comments
Environments
Using ngx-moveable: "ngx-moveable": "^0.44.9",
Description
Hello @daybrush ,
I'm currently rendering a list of elements by using <div class="card" *ngFor="let card of cards$ | async".
cards$ is an observable, that comes from a state management service.
On my ngx-moveable I pass the target like this: <ngx-moveable [target]="target$ | async"
This target$ is an observable stream, that passes the clicked element. I have a mousedown event on .card, and I update the target$ each time it is clicked.
So far so good. I can both resize and drag, and it works fine.
Now comes my problem, onResizeEnd, I'm updating the state with the new shape coordinates (I need to do this to convert the current translate value to percent). Once I update the state, my cards$ service emits again, updating the initial position of the card. At the same time, I update the target$. This is seamless, and doesn't cause any visual glitch.
After this if I try to drag, everything looks good. However, if I try to resize, nothing happens. The resize event doesnt even trigger, and when I check the resizeStart event, it still has the wrong target. I've tried updating the target on multiple ways, tried using moveable.updateRect(), moveable.waitToChangeTarget, even used Selecto to handle the selection part, and the issue is always the same.
Do you have any idea what could cause this?
Thank you for your time
Hello again, the way I found to fix this problem was to stop destroying the items by using trackBy.