diff --git a/dash_core_components/metadata.json b/dash_core_components/metadata.json index e2adde4bc..d2533e373 100644 --- a/dash_core_components/metadata.json +++ b/dash_core_components/metadata.json @@ -920,6 +920,17 @@ "computed": false } }, + "clear_on_doubleclick": { + "type": { + "name": "bool" + }, + "required": false, + "description": "If True, `clear_on_doubleclick` will clear the `clickData` property\nwhen the user double clicks.", + "defaultValue": { + "value": "false", + "computed": false + } + }, "hoverData": { "type": { "name": "object" diff --git a/src/components/Graph.react.js b/src/components/Graph.react.js index 0315567ba..c6713cbbd 100644 --- a/src/components/Graph.react.js +++ b/src/components/Graph.react.js @@ -102,7 +102,7 @@ export default class PlotlyGraph extends Component { } bindEvents() { - const {id, fireEvent, setProps, clear_on_unhover} = this.props; + const {id, fireEvent, setProps, clear_on_unhover, clear_on_doubleclick} = this.props; const gd = document.getElementById(id); @@ -130,6 +130,10 @@ export default class PlotlyGraph extends Component { gd.on('plotly_deselect', () => { if (setProps) setProps({selectedData: null}); if (fireEvent) fireEvent({event: 'selected'}); + if (clear_on_doubleclick) { + if (setProps) setProps({clickData: null}); + if (fireEvent) fireEvent({event: 'unclick'}); + } }); gd.on('plotly_relayout', (eventData) => { const relayoutData = filterEventData(gd, eventData, 'relayout'); @@ -144,6 +148,13 @@ export default class PlotlyGraph extends Component { if (fireEvent) fireEvent({event: 'unhover'}); } }); + gd.on('plotly_doubleclick', () => { + if (clear_on_doubleclick) { + if (setProps) setProps({clickData: null}); + if (fireEvent) fireEvent({event: 'unclick'}); + } + }) + } componentDidMount() { @@ -212,6 +223,12 @@ PlotlyGraph.propTypes = { */ clickData: PropTypes.object, + /** + * If True, `clear_on_doubleclick` will clear the `clickData` property + * when the user double clicks. + */ + clear_on_doubleclick: PropTypes.bool, + /** * Data from latest hover event */ @@ -225,6 +242,7 @@ PlotlyGraph.propTypes = { */ clear_on_unhover: PropTypes.bool, + /** * Data from latest select event */ @@ -481,6 +499,7 @@ PlotlyGraph.defaultProps = { ease: 'cubic-in-out' } }, + clear_on_doubleclick: false, clear_on_unhover: false, config: { staticPlot: false,