Merge pull request #5165 from plotly/fix5021-disable-text-selection

Disable text selection

Author: archmoj

src/components/legend/draw.js

@@ -89,7 +89,6 @@ module.exports = function draw(gd, opts) {
     if(title.text) {
         var titleEl = Lib.ensureSingle(scrollBox, 'text', 'legendtitletext');
         titleEl.attr('text-anchor', 'start')
-            .classed('user-select-none', true)
             .call(Drawing.font, title.font)
             .text(title.text);
 
@@ -410,7 +409,6 @@ function drawTexts(g, gd, opts) {
     var textEl = Lib.ensureSingle(g, 'text', 'legendtext');
 
     textEl.attr('text-anchor', 'start')
-        .classed('user-select-none', true)
         .call(Drawing.font, opts.font)
         .text(isEditable ? ensureLength(name, maxNameLength) : name);
 

src/components/rangeselector/draw.js

@@ -144,8 +144,7 @@ function drawButtonText(button, selectorLayout, d, gd) {
     }
 
     var text = Lib.ensureSingle(button, 'text', 'selector-text', function(s) {
-        s.classed('user-select-none', true)
-            .attr('text-anchor', 'middle');
+        s.attr('text-anchor', 'middle');
     });
 
     text.call(Drawing.font, selectorLayout.font)

src/components/sliders/draw.js

@@ -302,11 +302,10 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
     }
 
     var text = Lib.ensureSingle(sliderGroup, 'text', constants.labelClass, function(s) {
-        s.classed('user-select-none', true)
-            .attr({
-                'text-anchor': textAnchor,
-                'data-notex': 1
-            });
+        s.attr({
+            'text-anchor': textAnchor,
+            'data-notex': 1
+        });
     });
 
     var str = sliderOpts.currentvalue.prefix ? sliderOpts.currentvalue.prefix : '';
@@ -357,11 +356,10 @@ function drawGrip(sliderGroup, gd, sliderOpts) {
 
 function drawLabel(item, data, sliderOpts) {
     var text = Lib.ensureSingle(item, 'text', constants.labelClass, function(s) {
-        s.classed('user-select-none', true)
-            .attr({
-                'text-anchor': 'middle',
-                'data-notex': 1
-            });
+        s.attr({
+            'text-anchor': 'middle',
+            'data-notex': 1
+        });
     });
 
     var tx = data.step.label;

src/components/updatemenus/draw.js

@@ -195,8 +195,7 @@ function drawHeader(gd, gHeader, gButton, scrollBox, menuOpts) {
 
     // draw drop arrow at the right edge
     var arrow = Lib.ensureSingle(gHeader, 'text', constants.headerArrowClassName, function(s) {
-        s.classed('user-select-none', true)
-            .attr('text-anchor', 'end')
+        s.attr('text-anchor', 'end')
             .call(Drawing.font, menuOpts.font)
             .text(constants.arrowSymbol[menuOpts.direction]);
     });
@@ -435,11 +434,10 @@ function drawItemRect(item, menuOpts) {
 
 function drawItemText(item, menuOpts, itemOpts, gd) {
     var text = Lib.ensureSingle(item, 'text', constants.itemTextClassName, function(s) {
-        s.classed('user-select-none', true)
-            .attr({
-                'text-anchor': 'start',
-                'data-notex': 1
-            });
+        s.attr({
+            'text-anchor': 'start',
+            'data-notex': 1
+        });
     });
 
     var tx = itemOpts.label;

src/plot_api/plot_api.js

@@ -3717,13 +3717,15 @@ function makePlotFramework(gd) {
 
     // Plot container
     fullLayout._container = gd3.selectAll('.plot-container').data([0]);
-    fullLayout._container.enter().insert('div', ':first-child')
+    fullLayout._container.enter()
+        .insert('div', ':first-child')
         .classed('plot-container', true)
         .classed('plotly', true);
 
     // Make the svg container
     fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([0]);
     fullLayout._paperdiv.enter().append('div')
+        .classed('user-select-none', true)
         .classed('svg-container', true)
         .style('position', 'relative');
 

src/plots/gl2d/scene2d.js

@@ -145,11 +145,6 @@ proto.makeFramework = function() {
 
     this.updateSize(canvas);
 
-    // disabling user select on the canvas
-    // sanitizes double-clicks interactions
-    // ref: https://github.com/plotly/plotly.js/issues/744
-    canvas.className += ' user-select-none';
-
     // create SVG container for hover text
     var svgContainer = this.svgContainer = document.createElementNS(
         'http://www.w3.org/2000/svg',

src/traces/carpet/plot.js

@@ -239,7 +239,6 @@ function drawAxisTitle(gd, layer, trace, t, xy, dxy, axis, xa, ya, labelOrientat
                 'rotate(' + orientation.angle + ') ' +
                 'translate(0,' + offset + ')'
             )
-            .classed('user-select-none', true)
             .attr('text-anchor', 'middle')
             .call(Drawing.font, axis.title.font);
     });

src/traces/parcoords/parcoords.js

@@ -350,8 +350,7 @@ function styleExtentTexts(selection) {
     selection
         .classed(c.cn.axisExtentText, true)
         .attr('text-anchor', 'middle')
-        .style('cursor', 'default')
-        .style('user-select', 'none');
+        .style('cursor', 'default');
 }
 
 function parcoordsInteractionState() {
@@ -655,8 +654,7 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
 
     axis.selectAll('text')
         .style('text-shadow', '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff')
-        .style('cursor', 'default')
-        .style('user-select', 'none');
+        .style('cursor', 'default');
 
     var axisHeading = axisOverlays.selectAll('.' + c.cn.axisHeading)
         .data(repeat, keyFun);
@@ -673,7 +671,6 @@ module.exports = function parcoords(gd, cdModule, layout, callbacks) {
         .classed(c.cn.axisTitle, true)
         .attr('text-anchor', 'middle')
         .style('cursor', 'ew-resize')
-        .style('user-select', 'none')
         .style('pointer-events', 'auto');
 
     axisTitle

src/traces/sankey/render.js

@@ -1026,7 +1026,6 @@ module.exports = function(gd, svg, calcData, layout, callbacks) {
         .append('text')
         .classed(c.cn.nodeLabel, true)
         .attr('transform', textFlip)
-        .style('user-select', 'none')
         .style('cursor', 'default')
         .style('fill', 'black');