Link and shape click

[redCat]

I want to define a hexagon at the midpoint of the line. Then, when the mouse hovers over the line, the hexagon is displayed. When I click on the hexagon, it triggers the event I want.
like this.

However, his click is very strange. No matter how large I set the hexagon, the mouse must be on the link and hexagon at the same time to trigger the click event. I think clicking on the hexagon can trigger the event. Can you help me？

and If I want to hover the mouse over the line and animate the hexagon, such as rotating around the Y axis, what should I do?
thank you

[walter]

When I try it, it seems to work well. Note a few simplifications that I have made:

  myDiagram.linkTemplate =
    $(go.Link,
      $(go.Shape, { strokeWidth: 2, stroke: "#AFB0B1" }),
      $(go.Shape, { toArrow: "Standard", fill: "#AFB0B1", stroke: "#AFB0B1" } }),
      $(go.Shape, "Hexagon",
        {
          width: 15, height: 15, fill: "transparent", strokeWidth: 0,
          click: (e, shape) => {
            alert(shape.part.toString())
          },
          mouseEnter: (e, shape) => shape.part.isHighlighted = true,
          mouseLeave: (e, shape) => shape.part.isHighlighted = false
        },
        new go.Binding("fill", "isHighlighted", h => h ? "#48B25C" : "transparent").ofObject()
      )
    );

But I do notice that once the link is selected, its selection Adornment gets in the way of the mouseEnter and mouseLeave events. You could either change the link not to use a selection Adornment or you could make it un-pickable. Here’s the first choice:

  myDiagram.linkTemplate =
    $(go.Link,
      { selectionAdorned: false, toShortLength: 2 },
      $(go.Shape, { strokeWidth: 2, stroke: "#AFB0B1" },
        new go.Binding("stroke", "isSelected", s => s ? "dodgerblue" : "#AFB0B1").ofObject()),
      $(go.Shape, { toArrow: "Standard", fill: "#AFB0B1", strokeWidth: 0, scale: 1.2 },
        new go.Binding("fill", "isSelected", s => s ? "dodgerblue" : "#AFB0B1").ofObject()),
      $(go.Shape, "Hexagon",
        {
          width: 15, height: 15, fill: "transparent", strokeWidth: 0,
          click: (e, shape) => {
            alert(shape.part.toString())
          },
          mouseEnter: (e, shape) => shape.part.isHighlighted = true,
          mouseLeave: (e, shape) => shape.part.isHighlighted = false
        },
        new go.Binding("fill", "isHighlighted", h => h ? "#48B25C" : "transparent").ofObject()
      )
    );

I don’t understand what you mean by rotating about the Y axis. Do you mean rotating about its center point? If so:

          mouseEnter: (e, shape) => {
            shape.part.isHighlighted = true;
            new go.Animation().add(shape, "angle", shape.angle, shape.angle+360).start();
          },

[redCat]

No matter how big I set the hexagon, when I click on the red area, it doesn’t trigger the Shape click event, it triggers the link

If that’s not happening to you, then maybe I’m interfering somewhere, so let me check again
Then for the animation, I want it to keep playing until I mouse away from shpe
thank you

[walter]

In my example the click event handler is declared on the Shape, not on the Link, but it is being called when the user clicks anywhere within that green hexagonal shape. Hmm, at least when the hexagon is stationary. I think sometimes when I try to click towards the edges in the area where the hexagon is while spinning I might be sometimes be clicking on empty space, depending on how the hexagon was turned at the time. You could set the Shape.background to “transparent” so that a click anywhere in the bounds of the Shape will work, not just in the filled green area.

          mouseEnter: (e, shape) => {
            shape.part.isHighlighted = true;
            const anim = new go.Animation();
            shape._anim = anim;
            anim.duration = 1000;
            anim.easing = go.Animation.EaseLinear;
            anim.runCount = Infinity;
            anim.add(shape, "angle", shape.angle, shape.angle+360);
            anim.start();
          },
          mouseLeave: (e, shape) => {
            shape.part.isHighlighted = false;
            if (shape._anim) { shape._anim.stop(); shape._anim = null; }
          }