Clicking and highlighting wedges in a semicircular adornment

GoJS
1

Hi Walter,

I understand that Panel inherit GraphicObject. I have a situation where I need to handle the click event on each of the segment. But somehow the click event is never getting fired in the template example given.

Am I missing out something? Could you please help me out?

var HighlighterTemplate =
      $(go.Adornment, "Spot",
        $(go.Placeholder),  // takes the size and position of the adorned Node
        $(go.Panel,
          new go.Binding("itemArray", "colors"),
          {
            itemTemplate:
              $(go.Panel,  // this Panel.itemIndex will tell us which item it is in the colors Array
				{					
					click : function(e,obj) {debugger;}
				},
                $(go.Shape, { strokeWidth: 0.5, stroke: "gray" },
                  new go.Binding("fill", ""),  // the item will be the CSS color string
                  new go.Binding("geometry", "", function(color, shape) {  // compute the Geometry
                    // ignore the color
                    var colorarr = shape.panel.panel.itemArray;
                    var sweep = 180/colorarr.length;  // cannot be zero, else there wouldn't be any item Panel
                    var i = shape.panel.itemIndex;  // the index of the color in the colors Array
                    var b = shape.part.adornedPart.actualBounds;  // the adorned Node's bounds
                    var radius = Math.sqrt(b.width*b.width/4 + b.height*b.height/4) + 12;
                    return makeAnnularWedge(180 + i * sweep, sweep, radius);
                  })))
          })
      );
2

Just set isActionable: true on that Panel.

By default Adornments do not receive click events because that would be annoying/confusing/misleading for most people most of the time. Imagine if selection adornments were clickable and the user wanted to click on an already selected node and not on the adornment.

3

Thanks! Amazing that there are so many configurable attributes.

Just need time and practice to get used to.

4

Thank you. Because we’ve been doing this for over 20 years with many thousands of customer projects, we know (almost) all of the problems that programmers can run into.

5

Thanks Walter.
We have used the HighlighterTemplate for our highlighting and we have it working for most part of it.

We are showing an additional text box in the nodetemplate when the segment of the highlight is clicked. This also is working for us.

We needed you help in making the segment selected thicker than the other segments in the arc. Could you please help us on how to do that in the click event of the Panel inside HighlighterTemplate?

Please let us know if you need more info?

6

The easy thing is to just change the Shape.strokeWidth.

A fancier effect is implemented in Dynamic Pie Chart.

7

Thanks walter.

Is there any way I can get the Adornment using the node object?

8

where the string was given by Part | GoJS API
and used by Part | GoJS API

That’s “HIGHLIGHT” in my code above.

9

Thanks Walter.

My requirement is to highlight the the similar color segments on all the nodes.

Now, I know how to get the adornment, is there any config where I can get segment in the highlight ?
I tried adding the name to the geo and tried to do findObject on the adornment. Had no luck…

10

I would look at each node.data.colors Array and find the index (indexes?) of the color(s?) that you care about. Something like:

myDiagram.nodes.each(function(n) {
  var idx = n.data.colors.indexOf("red");
  if (idx >= 0) {
    var ad = n.findAdornment("HIGHLIGHT");
    if (ad !== null) {
      var wedge = ad.elt(1).elt(idx).elt(0);
      if (wedge) { wedge.strokeWidth = 2; }
    }
  }
})
11

Hi Walter,

I tried this, but it has no effect on stroke and strokeWidth on the wedge object.

I am able to find the wedge object, only that wedge doesnt seem to have the stroke and strokeWidth properties.

When I console wedge.stroke and wedge.strokeWidth before setting the values, I see undefined in the my console.

Anything i am missing?

12

It did work after looking for ad.elt(1).elt(idx).elt(0).