Hiding element dynamically


#1

Hi,
i need to hide exisiting element based on some trigger that user performes.

i found the only way to do it is via:

   private setElementHidden(element, hidden: boolean){
        element.hidden = hidden;
        const type = element.waypoints ? 'connection' : 'shape';
        const gfx = this.elementRegistry.getGraphics(element, false);
        this.graphicsFactory.update(type, element, gfx);
    }

is there any existing functionallity for hiding/ showing elements after they are created ??

Thanks
Elia


#2

You could listen for commandStack.shape.create.postExecute and commandStack.connection.create.postExecute to assign the hidden property before the first rendering.


#3

you are assuming i want to hide, right after the user creates something, but this is not my case

assume you have an exisitng tree, and when you click on a specific type of node, it hide/shows additional nodes.

for example:
i added an overlay to shapes, and when you click the overlay, it shows/hide the shape children


#4

Well, I’m kind of confused now. You were originally saying in your first post that you look for an event which will be triggered after an element is created right? That can be done by the events Philipp mentioned before.

But in your current explanation you mentioned you want to handle it on a click event, right? So than you don’t need to listen for an event, just create a click-handler for the shape and execute your hidden-function to all children.