Disable text selection

[archmoj]

Fixes #5021.

@plotly/plotly_js

[alexcjohnson]

@nicolaskruchten mentioned leaving annotations and scatter text selectable, but ATM these elements already can't be selected normally, due to the way we capture pointer events.

That in mind, would it cause any problems to just put user-select: none at the top level and drop it everywhere else?

Note that ATM we specifically prevent selection on several specific elements, though a few of them (sankey and parcoords) use the simple version without vendor prefixes, which should be fixed if we don't switch to the top level.

 ~/plotly/plotly.js/src> ag user-select
traces/sankey/render.js
1029:        .style('user-select', 'none')

traces/parcoords/parcoords.js
354:        .style('user-select', 'none');
659:        .style('user-select', 'none');
676:        .style('user-select', 'none')

traces/carpet/plot.js
242:            .classed('user-select-none', true)

css/_base.scss
26:.user-select-none {
27:    @include vendor('user-select', none);

components/legend/draw.js
92:            .classed('user-select-none', true)
413:        .classed('user-select-none', true)

components/updatemenus/draw.js
198:        s.classed('user-select-none', true)
438:        s.classed('user-select-none', true)

components/rangeselector/draw.js
147:        s.classed('user-select-none', true)

components/sliders/draw.js
305:        s.classed('user-select-none', true)
360:        s.classed('user-select-none', true)

plots/gl2d/scene2d.js
151:    canvas.className += ' user-select-none';

[archmoj]

One could select annotations and data text on master at the moment. So if we want to keep them as they are, I could make the adjustments?

[alexcjohnson]

Very nice! Let's also remove the .style('user-select', 'none') in sankey and par co ords, but then this looks good to go! 💃

[archmoj]

@alexcjohnson
Seems we cannot remove user-select calls is sankey and parcoords as tried in 89e1342.
So I reverted that commit.

[alexcjohnson]

@alexcjohnson
Seems we cannot remove user-select calls is sankey and parcoords as tried in 89e1342.
So I reverted that commit.

That commit also removes the user-select-none class from the main div

[bharatkrishna]

Is there a way to override this when using dash so that I can select axis values. This is with reference to this post on plotly forums.

[archmoj]

Is there a way to override this when using dash so that I can select axis values. This is with reference to this post on plotly forums.

Not at the moment. But you could try removing 'user-select-none': true CSS from the svg container.

[bharatkrishna]

@archmoj how do I do that? In Dash, graph_objects.Scatter doesn't seem to have any argument to override the CSS. Or do I set 'user-select-none': false as the style of the Div which contains the plot svg?

[archmoj]

@archmoj how do I do that? In Dash, graph_objects.Scatter doesn't seem to have any argument to override the CSS. Or do I set 'user-select-none': false as the style of the Div which contains the plot svg?

Hmm that may not be going to work.
Curious to know how selecting text is useful in your app. You can open a feature request.

[bharatkrishna]

Hmm that may not be going to work.
Curious to know how selecting text is useful in your app. You can open a feature request.

Yes it was important in my app. The x-axis items contained timestamps or serial numbers I copy-paste into another application to get more details. I.e when I see certain upswings or downswings in the line plot, I copy x-axis items to examine them further. In case of items like timestamps, it is not easy to re-type them but rather copy-paste them is.