draw.io

Is it possible to write a simple custom link that shows or hides all layers on a page?

I have a draw.io diagram page consisting of over 40 layers. But because I don't know which layers the user will have hidden/shown on the published diagram, I want to provide a button with an action set that hides all layers, then shows 3 specific layers.

Is it possible to hide all layers using a wildcard or similar, or do I need to manually create a huge (in manual management terms) layer id JSON array?

From what I can tell it's not possible, which surprises me, hence my asking. For my diagram it means I need to maintain huge JSON arrays in many links.

I've tried various custom links using cell and tag action wildcards, but my tests suggest tags only work for shapes (not layers), and cells includes both shapes AND layers.

data:action/json,{"actions":[{"hide":{"cells":["*"]}}]}

I hoped using the above custom link would cause all layers to be hidden, which it did, but it also caused shapes on the currently selected layer to be hidden. It also caused shapes on the currently selected layer to appear deleted within the editor, so I needed to use the Undo feature to get the shapes back. I guess this is a bug, unless I'm doing something wrong or my drawing has become corrupt.

Something like this would be a really useful feature:

data:action/json,{"actions":[{"hide":{"layers":["*"]}}]}

I would consider writing a plugin, but can't find any help documentation on the subject. Could someone advise on this?

Solution

  • I worked around the problem of not being able to hide all layers on a page via wildcard by using tags.

    It's possible to tag individual shapes, or by grouping shapes and adding the tags property at the group level. So long as a shape or group has a "tags" property in the "Edit Data" screen with a value in it, it's possible to hide all by using the following custom link:

    data:action/json,{"actions":[{"hide":{"tags":[""]}}]}

    The same for showing all tags on a page:

    data:action/json,{"actions":[{"show":{"tags":[""]}}]}

    To show everything on a page without using tags it's possible to just use:

    data:action/json,{"actions":[{"show":{"cells":["*"]}}]}

    I also needed to add two buttons to an admin layer:

    1. A "reset" button with "hide"/"show" custom link actions to reset the diagram to an initial state.
    2. A "show all" button with "show" custom link actions to get all the shapes visible again, otherwise it wasn't possible to access them when editing the diagram.