Is it possible to expose controls on Annotation HTMLLabels?

[lanzhenw]

<HtmlLabel
                  showAnchorLine={true}
                  anchorLineStroke={background}
                  horizontalAnchor="start"
                  verticalAnchor="start"
                  containerStyle={{
                    width: labelWidth,
                    background: background3,
                    border: `1px solid ${accentColor}`,
                    borderRadius: 2,
                    color: background2,
                    fontSize: '0.9em',
                    lineHeight: '1em',
                    padding: '0 0.4em 0 1em',
                    fontWeight: 300,
                }}
              >
                <div style={{display: "flex", flexDirection: "row", justifyContent: "space-between"}}>
                    <h3 style={{ margin: '.5em 0' }}>{events[idx].title}</h3>
                    <div>
                        <Button icon="edit" intent="primary" minimal onClick={() => console.log("editing")}/>
                        <Button icon="trash" intent="danger" minimal onClick={() => onDeleteEvents(events, idx)}/>
                    </div>
                </div>
                <h3 style={{ margin: '.5em 0' }}>{events[idx].date.toLocaleDateString()}</h3>
                <p>{events[idx].description}</p>
              </HtmlLabel>

I want to make my annotation label with control buttons that can listen to onClick events. Is it possible to expose onClick events inside the HTMLlabels?

[williaster]

Hey @lanzhenw 👋 yes this should totally be possible. does the code you pasted not work? I'd guess this is due to pointer-events: none being set by default on the label <g> wrapper (this is the default because often you don't want a annotation or text to interfere with e.g., tooltip events)

[TSIA-SN]

I would also like to do something like this, would like a prop added to Annotation to be able to disable the built-in pointer-events: none. It could be a pointerEvents prop with a default of 'none' that would just forward the value along to the <g> wrapper or a boolean prop like allowPointerEvents.

[williaster]

agree simply adding a prop to turn this on/off would be great. happy to review a PR if there's any interest!