Ember-Animated (possible) bug in the onCollision

Questions
1

I was recently trying out divs reshuffling with ember-animated via dragging (tutorial 24 in Edward Faulkner’s talk in 2018 - GitHub - ef4/living-animation: Interactive EmberConf 2018 Slides) with Octane and I’m facing an absolute edge-case issue where if my one div moves and collides with two divs at the same time, it stops the activeSprite mid motion and continuously keeps trying to swap within all three touching divs. For now I tried a time-based movement but that causes issues with the fluidity and requires fine-tuning. I was wondering if any of you’ve faced the same and had any hints on a fix for the same. I tried googling and reading docs and examples but couldn’t find anything concrete.

Here is my onCollision function -

drag(activeSprite, {
  others,
  onCollision(otherSprite) {
    let myModel = activeSprite.owner.value;
    let otherModel = otherSprite.owner.value;
    let myPriority = myModel.sortedPriorityValue;
    set(myModel, 'sortPriority', otherModel.sortedPriorityValue);
    set(otherModel, 'sortPriority', myPriority);
  }
});

and the drag function is the same as living-animation/drag.js at master · ef4/living-animation · GitHub

I just changed the syntax to octane locally and tried the same code

Screen-recording in comment below (new users restricted to number of links in a post)

Screen Shot 2021-04-15 at 1.13.45 PM
Screen Shot 2021-04-15 at 1.13.45 PM2830×1598 771 KB

2

Here is a screen recording of the error situation:

3

Hi Akansha, it looks like an exception is being thrown, but I can’t see the real stack trace.

Can you try enabling “pause on caught exceptions” in Chrome devtools right before you reproduce the bug? And then share where the debugging places you?

4

Thanks for trying to help, Edward. I did enable that and try, even then it doesn’t pause anywhere but simply shows the same error as above

5

Having some issues with lodash and other things on twiddle Here is the link to the repo - GitHub - akankshadharkar/DragAndDrop: A drag and drop implemented in Ember Octane using ember animated It runs on latest 3.26, so just a pull, npm i and serve should have it up and running

Trying to get twiddle running in the meantime for ease

6

Finally found the issue with it, seems like the set inside the generator function is what’s causing the issue due to the way it updates values (in relation to the run loop) A helpful thread I found incase anyone wants to check it out for reference is

1 Like