two.js: Missing call to replaceParent in group.js?

Describe the bug Two.shape objects are not inserted correctly to the desired group when done from a mouse handling function. Instead, they are inserted as an immediate child of the <svg> node.

To Reproduce I’m not sure how to describe the simplified steps to reproduce the bug by trimming down our VueJS project which currently has 350+ files. But I believe the bug shows up whenever a new Two.Shape is added to a group from a mouse event handling.

My attempt to fix So, instead of describing how to reproduce the bug, I will describe the changes I made to group.js that seems to fix the issue for me. I found this fix after debugging the add() function in group.js and noticed that the replaceParent() is not always called.

The following two functions add() and remove() are in group.js (version 0.8.9)

add(objects) {
    // original code not show
    for (let i = 0; i < objects.length; i++) {
        const child = objects[i];
        // original code not shown
        this.children.push(child);
        replaceParent(child, this);     // <-- I inserted this line at the end of the for-loop
    }
   return this;
}

remove(objects) {
    // original code not show
    for (let i = 0; i < objects.length; i++) {
        const object = objects[i];
        // original code not shown
        if (index >= 0) {
            this.children.splice(index, 1);
            replaceParent(object);     // <-- I inserted this line at the end of the for-loop
        }
    }
   return this;
}

Expected behavior Objects are inserted into the desired group. Adding the call to replaceParent() fixes the issue for me.

Screenshots

twojs-group-bug

Environment (please select one):

Code executes in browser (e.g: using script tag to load library)
Packaged software (e.g: ES6 imports, react, angular, vue.js)
Running headless (usually Node.js)

Desktop (please complete the following information):

OS: Windows 11, OSX
Browser: FireFox 101.0

About this issue

Original URL
State: open
Created 2 years ago
Comments: 19 (10 by maintainers)

Most upvoted comments

Here’s a question for you, are you setting and/or modifying the children property?

No, my code does not directly modify the children property, we always use addTo() or remove() to insert/remove our TwoJS objects to a group.

dulimarta on Jun 8, 2022

Ah, thank you so much for explaining the inner working of the TwoJS events. After reading your explanation, I start to have a guess why those TwoJS events are not triggered in our project. Earlier in this conversation thread, I mentioned that our project uses VueJS. By the way this project is a collaboration between @dickinson0718 and me. I included his name because he recently submitted the following issues/enhancement requests:

We are grateful that you have been very responsive in our communications.

Since VueJS also overrides the behavior of the array functions: push(), pop(), splice(), splice(), and many others, I suspect these events are not passed on to TwoJS and hence the bugs that show up specifically in our VueJS-based project but not under a non-VueJS sample that you and I both tested and observed.

I’d like to hear your idea for making this work under our VueJS project (assuming my assumption about the events not being triggered).

Also, I’d like hear your input on my temporary solution below:

Manually calling replaceParent() in add() and remove()
Commenting out the children.ids membership check in remove()

whether these modifications may have negative impact on the other TwoJS functionalities.

dulimarta on Jun 8, 2022

I’ll take a look, but this bug could be related to how you mix and matched imports in [](this bug)

I was able to workaround that issue by creating a “detached” group (i.e. not attached to the scene) by using the following code (more or less):

const twoInstance = new Two({/* options go here */});
const dummy_group = new Group(); // detached group to ignore duplicate two-0

for (let k = 0; k < N; k++) {
  const g = new Group();
  g.addTo(twoInstance.scene);
}

dulimarta on Jun 3, 2022