Add diagram.highlightAll()

GoJS
1

I am trying to lower the opacity of all “non selected” elements, but the code logic for that is not implemented in my way, because I also need them to be 100% opacity wode is selected.

So I use isHighlighted=true for non highlighted nodes and isHighlighted=false for highlighted one, this is where I need the diagram.highlightAll() as opposite from diagram.clearHighlighteds

2

It’s probably easiest to have a separate Layer that has Layer.opacity set to 0.1 or whatever. Highlighting or selecting can then change their Part.layerName, switching between a fully opaque layer and a translucent one.

3

I am not sure that is an easiest way or I may miss something, can you go deeper in your explanations

4

This sample uses selection to change opacity – you could use highlighting instead if you don’t want to be dependent on selection behavior.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  Select a Node or Link to make it fully opaque.

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv",
    { "undoManager.isEnabled": true });

// add a slightly translucent layer
myDiagram.addLayerBefore(new go.Layer({ name: "Gray", opacity: 0.2 }), myDiagram.findLayer(""));

myDiagram.nodeTemplate =
  new go.Node("Auto", { layerName: "Gray", selectionAdorned: false })
    .bindObject("layerName", "isSelected", sel => sel ? "" : "Gray")
    .add(
      new go.Shape({ fill: "white" })
        .bind("fill", "color"),
      new go.TextBlock({ margin: 8 })
        .bind("text")
    );

myDiagram.linkTemplate =
  new go.Link({ layerName: "Gray", selectionAdorned: false })
    .bindObject("layerName", "isSelected", sel => sel ? "" : "Gray")
    .add(
      new go.Shape(),
      new go.Shape({ toArrow: "OpenTriangle" })
    );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>
5

yes but in this case when no node is selected, they are translucent but that’s not what I need in my case :/

6

Well, instead of using a translucent Layer, you could just iterate over all of the Diagram.nodes and Diagram.links and change each Part.opacity to be what you want. I guess by default you’d want everything to be the default value, 1.0.