plotly / plotly/plotly.js

plotly_click handler return value is ignored, no way to cancel event processing from custom handler

未關閉
#5,477 1 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

bug P3
主要語言
JavaScript
星號
18.3k
分支
2k
平均合併
2 天 12 小時
30 天內合併 PR
28

描述

I'm currently using a plotly_click custom handler (via react-plotly onClick prop) on a treemap, where I would like to cancel the default zoom-in / zoom-out behaviour if the user is pressing control.

For plotly_legendclick for example, the convention is to return false from the custom handler, which will stop default event processing. See https://community.plotly.com/t/disable-legend-click-functionality-hiding-traces/1345/4 for @alexcjohnson 's reply in this regard.

However, for the plotly_click event I've traced the code into this little section in plotlyjs attachFxHandlers.onClick():

        var clickVal = Events.triggerHandler(gd, 'plotly_' + trace.type + 'click', typeClickEvtData);

        if(clickVal !== false && fullLayoutNow.hovermode) {
            gd._hoverdata = [makeEventData(pt, traceNow, opts.eventDataKeys)];
            Fx.click(gd, d3.event);
        }

// 2 lines ommitted

        // if custom handler returns false, we're done!
        if(clickVal === false) return;

So the event for plotly_treemapclick in this case will honour the convention as can be seen from the clickVal = ..., but the standard plotly_click handler is invoked by the Fx.click() invocation, which ignores the handler return values.

Unfortunately, the call chain from Fx.click() is quite deep: onClick() -> click() -> emitClick() -> plotObj.emit() -> emit() -> emitOne() -> customHandler. To bring back the return value is going to be quite the adventure. Also, at some spots along the chain, return values are used for a different purpose.

Alternatively, the code in the uppermost onClick() could for example check event.defaultPrevented -- this is not quite the Plotly convention, but then again that convention is not very well documented at all, and this would be far more straight-forward to implement rather than bringing back the custom handler return value. Furthermore, many javascript programmers know to look for preventDefault.

In addition, this fix would immediately also work from React.

What do people think about this?

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

從 attachFxHandlers.onClick() 開始,接著沿著文件記載的 Fx.click() 呼叫鏈追蹤 click()、emitClick()、plotObj.emit()、emit() 和 emitOne()。將 plotly_treemapclick 的回傳值處理與標準的 plotly_click 路徑進行比較,並確定取消應如何傳播。當回傳 false 或以其他受支援方式處理的自訂處理程序能夠阻止預設點擊處理(包括透過 React)時,即視為完成。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
javascript, react
領域
data-visualization, frontend
Issue 類型
缺陷
難度
4/5
預估耗時
3-5 天
活躍度
停滯
描述清晰度
基本清楚
新手友好度
32/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。