Two.js: Question: Adding and removing groups updates the scenegraph, but not the DOM

[dev0nian]

I'm trying to understand how to work with and update scenegraph. I have a View object (which is a Two.Group) with the following structure:
View(Group)
--Rectangle
--Group
----Circle
----Circle

On a particular toggle event, I remove the inner group containing the 2 circles, and add them back on the next toggle event. While the removal works, when adding the circle back, it only seems to add to the scenegraph, but not the DOM. Here's the code I'm working with: https://codepen.io/devnar/pen/mgMqrJ

Am I missing something here? Thanks in advance for your help.
--Dev

[jonobr1]

Thanks for writing! It looks like it's a bug. In your example I switched to Two.Types.canvas and it works fine, which leads me to believe there's an issue with the SvgRenderer. I'll report back shortly with a fix / update.

[jonobr1]

Okay, so you should use this URL from JSDeliver: https://cdn.jsdelivr.net/gh/jonobr1/two.js@dev/build/two.js

And then what you need to do is inherit the Two.Group. In order to do this there are three steps required:

javascript var View = function() { Two.Group.call(this); // Initialize the construction code for Two.Group } // Extend the prototypical properties Two.Utils.extend(View.prototype, Two.Group.prototype); // Extend the Getters / Setters Two.Group.MakeObservable(View.prototype);

Then it should work fine! I just tested it locally.

[dev0nian]

Thanks a lot for the quick resolution, Jono! It does work now.
Can you please briefly explain what the fix here does, especially the "MakeObsevable" part? I couldn't glean much information from the docs.

[jonobr1]

What you were doing originally is correct, but particularly the MakeObservable functions (which are on all drawable elements in Two.js) is a simple function to add the getter / setter properties of a type of object for the purpose of inheritance.

In other words most of the prototypical properties in Two.js are actually getters / setters. For instance, translation isn't a property it's a getter setter. So in order to inherit that property correctly you need to add the getter and setter. Again, Two.Group.MakeObservable is just a convenient function to add all the getters and setters from the prototype of Two.Group onto a new object.

Hope this helps! I'm happy to explain it further if it's still confusing

[dev0nian]

Thanks for the explanation, I think I got a decent understanding of what's happening.

[jonobr1]

I'll add an example for inheritance in the updated documentation I'm working on. Been a long time coming, but it's gonna be a big help!

[dev0nian]

Thanks, that will be very helpful!