On selection is not reflecting over on highlight

GoJS
1

We have kept isSelected as well as isHighlighted for a node as follows :

return make(
    go.Shape,
    'DataNodeBox',
    {
      name: 'SHAPE',
      fromLinkable: true,
      toLinkable: true,
      fill: COLOR.WHITE,
      stroke: COLOR.DARK_BLUE_GREY,
      strokeWidth: 1,
      maxSize: new go.Size(14 * REM_VALUE, 3 * REM_VALUE),
      minSize: new go.Size(14 * REM_VALUE, 3 * REM_VALUE),
    },
    new go.Binding('stroke', 'isSelected', (sel) => (sel ? COLOR.CERULEAN : COLOR.DARK_BLUE_GREY)).ofObject(''),
    new go.Binding('stroke', 'isHighlighted', (sel) => (sel ? COLOR.BLOOD_ORANGE : COLOR.DARK_BLUE_GREY)).ofObject('')
  );

When my node is selected and later it is shifted to highlighted it is working fine, but when the node is highlighted and on that moment if user selects that node then highlight styles are removed but selected styles are not applied.
Can you please suggest solution for this?

2

When I try it, it works as you describe it should – the newly selected node appears with the CERULEAN color stroke.

What you have implemented does mean that the Shape can only show the color associated with the most recent state change of Node.isSelected and Node.isHighlighted. Maybe you want to show a fourth color when the node is both selected and highlighted? Or use two separate Shapes for that?

3

When node is highlighted and at that time if that node is selected, then on selection of that node I am setting isHighlight to false.
So I think it is keeping highlight styles when both are selected, but when I am setting isHighlight to false at that time

new go.Binding('stroke', 'isHighlighted', (sel) => (sel ? COLOR.BLOOD_ORANGE : COLOR.DARK_BLUE_GREY)).ofObject('')

as per above condition it is setting stroke to DARK_BLUE_GREY Color
and it is not binding

    new go.Binding('stroke', 'isSelected', (sel) => (sel ? COLOR.CERULEAN : COLOR.DARK_BLUE_GREY)).ofObject(''),

Selected style as the selection is not changed.
Can I any how retrigger the isSelected binding at the time I am setting isHighlight to false…?

4

I think this is closer to what you want:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { selectionAdorned: false },
        $(go.Shape,
          {
            name: 'SHAPE',
            fromLinkable: true,
            toLinkable: true,
            fill: "white",
            stroke: "blue",
            strokeWidth: 3
          },
          new go.Binding('stroke', 'isSelected', strokeColor).ofObject(),
          new go.Binding('stroke', 'isHighlighted', strokeColor).ofObject()
        ),
        $(go.TextBlock, { margin: 8 }, new go.Binding("text"))
      );

    function strokeColor(b, shape) {
      const node = shape.part;
      if (node.isSelected) return "cyan";
      if (node.isHighlighted) return "orange";
      return "blue";
    }

Obviously I used some real CSS colors because I couldn’t tell what you are actually using. The point is that because there is only one Shape whose Shape.stroke color can be controlled, you have to decide for each combination of Part.isSelected and Part.isHighlighted which color to return in the conversion function.

5

Thank you Walter,
This is exactly what I wanted.