Shape click event does not seem to be available

Open YaellePihan opened this issue 2 years ago • 1 comments

Hello,

it seems that the shape click event is not yet available.

I have a heatmap on which I draw rectangles using "drawrect" button and I want to trigger an event when I click on one, in order to get the shape's index, but I can't find any plotly event already existing that triggers in that situation.

I found in draw.js script from the source code (draw.js) the function that is automatically triggered when a shape is clicked on to change its style and make it draggable, resizable, or erasable (line 189):

path.node().addEventListener('click', function() { return activateShape(gd, path); });

Therefore, I believe there should be a way to add actions to this ‘click’ event and obtain its index as well.

I have also read about some dependencies with the dragmode and clickmode attributes’ values, but I am unable to proceed with them.

A simple example is available here codepenExample or here:

HTML:

  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
<div id="graph"></div>
</body>

JS:

  {
    editable: true,
    label: { text: "" },
    xref: "x",
    yref: "y",
    layer: "above",
    opacity: 1,
    line: { color: "white", width: 5, dash: "solid" },
    fillcolor: "rgba(0, 0, 0, 0)",
    fillrule: "evenodd",
    type: "rect",
    x0: 0.5,
    y0: 0,
    x1: 0.75,
    y1: 1.5
  }
];

var fig = {
  data: [
    {
      z: [
        [1, 20, 30],
        [20, 1, 60],
        [30, 60, 1]
      ],
      type: "heatmap"
    }
  ],
  layout: {
    title: "Heatmap with drawn rectangles",
    shapes: shapes,
    dragmode: "drawrect",
    clickmode: "event+select"
  },
  config: {
    displayModeBar: true,
    modeBarButtons: [[], ["zoom2d", "drawrect", "eraseshape", "autoScale2d"]]
  }
};

var gd = document.getElementById("graph");

Plotly.plot(gd, fig);

gd.on("plotly_click", function (d) {
  alert("plotly click");
  console.log(d);
});

gd.on("plotly_relayouting", function (d) {
  alert("plotly relayouting");
  console.log(d);
});

// gd.on("plotly_relayout", function(d) {
//   alert("plotly relayout")
//   console.log(d)
// })

// gd.on("plotly_selected", function(d) {
//   alert("plotly selected")
//   console.log(d);
// });

// gd.on("plotly_selecting", function(d) {
//   alert("plotly selecting")
//   console.log(d);
// });

If it doesn't exist yet, it would be nice to implement it =)!

Thanks a lot, YP

May 03 '23 12:05 YaellePihan

There still does not appear to be a way to add events to shapes.

Is there perhaps a workaround, e.g. by manipulating the SVG DOM directly?

I've tried that, but not sure whether there are other layers that are absorbing the events and are preventing them from being passed on to the shape layer.

In addition, there seems to be no reliable way to identify, when looking at the DOM, what each shape is, because the shapes do not contain enough data to identify them.

May 12 '25 13:05 mydoghasfleas