How to hide a node in the diagram while keeping it visible in the overview?

GoJS
1

Hello,
in our project, we are showing overview of the diagram using the following line -

    const miniMap = $(go.Overview, { observed: this.diagram });

And in our diagram, we have added a node that is kept hidden using the following code

const ghostNode: Node = getNodeTemplate();
ghostNode.setProperties({ visible: false });
diagram.add(ghostNode);

Now, as per my use case, I need to hide that ghostNode in the diagram, but I want to keep it visible in the overview. Currently, it is hidden from both the diagram and the overview. Is it possible to keep it visible in the overview while keeping it hidden from the diagram? Please help.

2

In general, whatever is drawn in the observed Diagram will be drawn to the Overview.

However, note one type of exception: Parts in temporary Layers, controlled by Overview.drawsTemporaryLayers Overview | GoJS API

So if you don’t mind showing Adornments and Tool Parts in the Overview, you could put your ghostNode in a Layer that is Layer.isTemporary. That could be either the “Adornment” or the “Tool” layer (in front of regular Parts) or the “Grid” layer (in back, behind regular Parts) or in some layer that you create and add to the diagram, If you have a visible Diagram.grid, you can control its appearance in the Overview via the Overview.drawsGrid property.

3

Hello @walter,

If I put ghostNode in a Layer that is Layer.isTemporary and I keep it visible: true, then by setting Overview.drawsTemporaryLayers to false, I can hide ghostNode from Overview while keeping it visible on the Diagram. But I want the opposite of that. I want to hide ghostNode from the Diagram while keeping it visible on the Overview. Is that possible?

I also tried creating a new temporary layer, setting it visible: false, then rendering ghostNode in that layer, and then setting drawsTemporaryLayers: true in overview properties. But, ghostNode remains hidden in both the Diagram and the Overview in that case.

    const forelayer = this.diagram.findLayer('Foreground');
    this.diagram.addLayerBefore($(go.Layer, { isTemporary: true, name: 'Ghost', visible: false }), forelayer);

    const ghostNode: Node = getNodeTemplate();
    ghostNode.setProperties({ layerName: 'Ghost' });

    const miniMap = $(go.Overview, { drawsTemporaryLayers: true, observed: this.diagram });

Please let me know if you know any other way to achieve this. Thank you.

4

Oops, sorry – I misunderstood your intent.

Hmmm, well, an Overview is just a Diagram with some special ability to render what is in a different Diagram. But you can add whatever you want to any Diagram, including an Overview, but in the case of an Overview such Parts will appear in front of the Parts of the observed Diagram. For example, the Overview.box is an unmodeled Part that is in the Overview but not in the observed Diagram, and it is manipulated by tools in the Overview (not in the observed Diagram!) for moving the box and optionally resizing the box.

But you will need to take complete responsibility for managing the lifetime and interactivity of such Parts that you add to the Overview. Remember that Overviews have limited interactivity because the design is not to let the user interact with the observed Diagram except through very restricted means.

5

Hello @walter,

Thank you for the suggestion. I tried it and it worked. I created a separate node ghostNodeInOverview, kept it visible: true, and added it to the overview. Then, to the original ghostNode which was added to the diagram, I set the property visible: false. And yes, I had to take complete responsibility for managing the lifetime and interactivity for ghostNodeInOverview. But after doing that, all worked fine.

Thanks again.