highcharts 9.3.2 → 10.1.0

package/es-modules/Extensions/Boost/WGLRenderer.js

@@ -15,7 +15,7 @@ var color = Color.parse;
 import GLShader from './WGLShader.js';
 import GLVertexBuffer from './WGLVBuffer.js';
 import H from '../../Core/Globals.js';
-var doc = H.doc;
+var doc = H.doc, win = H.win;
 import U from '../../Core/Utilities.js';
 var isNumber = U.isNumber, isObject = U.isObject, merge = U.merge, objectEach = U.objectEach, pick = U.pick;
 /* eslint-disable valid-jsdoc */
@@ -59,6 +59,7 @@ function GLRenderer(postRenderCallback) {
         'columnrange': true,
         'bar': true,
         'area': true,
+        'areaspline': true,
         'arearange': true
     }, asCircle = {
         'scatter': true,
@@ -82,10 +83,22 @@ function GLRenderer(postRenderCallback) {
         }
     };
     // /////////////////////////////////////////////////////////////////////////
+    /**
+     * @private
+     */
+    function getPixelRatio() {
+        return settings.pixelRatio || win.devicePixelRatio || 1;
+    }
     /**
      * @private
      */
     function setOptions(options) {
+        // The pixelRatio defaults to 1. This is an antipattern, we should
+        // refactor the Boost options to include an object of default options as
+        // base for the merge, like other components.
+        if (!('pixelRatio' in options)) {
+            options.pixelRatio = 1;
+        }
         merge(true, settings, options);
     }
     /**
@@ -206,7 +219,7 @@ function GLRenderer(postRenderCallback) {
         //
         cullXThreshold = 1, cullYThreshold = 1, 
         // The following are used in the builder while loop
-        x, y, d, z, i = -1, px = false, nx = false, low, chartDestroyed = typeof chart.index === 'undefined', nextInside = false, prevInside = false, pcolor = false, drawAsBar = asBar[series.type], isXInside = false, isYInside = true, firstPoint = true, zoneAxis = options.zoneAxis || 'y', zones = options.zones || false, zoneColors, zoneDefColor = false, threshold = options.threshold, gapSize = false;
+        x, y, d, z, i = -1, px = false, nx = false, low, chartDestroyed = typeof chart.index === 'undefined', nextInside = false, prevInside = false, pcolor = false, drawAsBar = asBar[series.type], isXInside = false, isYInside = true, firstPoint = true, zoneAxis = options.zoneAxis || 'y', zones = options.zones || false, zoneColors, zoneDefColor = false, threshold = options.threshold, gapSize = false, pixelRatio = getPixelRatio();
         if (options.boostData && options.boostData.length > 0) {
             return;
         }
@@ -260,16 +273,24 @@ function GLRenderer(postRenderCallback) {
          * @private
          */
         function vertice(x, y, checkTreshold, pointSize, color) {
+            if (pointSize === void 0) { pointSize = 1; }
             pushColor(color);
+            // Correct for pixel ratio
+            if (pixelRatio !== 1 && (!settings.useGPUTranslations ||
+                inst.skipTranslation)) {
+                x *= pixelRatio;
+                y *= pixelRatio;
+                pointSize *= pixelRatio;
+            }
             if (settings.usePreallocated) {
-                vbuffer.push(x, y, checkTreshold ? 1 : 0, pointSize || 1);
+                vbuffer.push(x, y, checkTreshold ? 1 : 0, pointSize);
                 vlen += 4;
             }
             else {
                 data.push(x);
                 data.push(y);
-                data.push(checkTreshold ? 1 : 0);
-                data.push(pointSize || 1);
+                data.push(checkTreshold ? pixelRatio : 0);
+                data.push(pointSize);
             }
         }
         /**
@@ -365,7 +386,7 @@ function GLRenderer(postRenderCallback) {
                     // We could also use one color per. vertice to get
                     // better color interpolation.
                     // If there's stroking, we do an additional rect
-                    if (series.type === 'treemap') {
+                    if (series.is('treemap')) {
                         swidth = swidth || 1;
                         scolor = color(pointAttr.stroke).rgba;
                         scolor[0] /= 255.0;
@@ -377,12 +398,12 @@ function GLRenderer(postRenderCallback) {
                     // } else {
                     //     swidth = 0;
                     // }
-                    // Fixes issues with inverted heatmaps (see #6981)
-                    // The root cause is that the coordinate system is flipped.
-                    // In other words, instead of [0,0] being top-left, it's
+                    // Fixes issues with inverted heatmaps (see #6981). The root
+                    // cause is that the coordinate system is flipped. In other
+                    // words, instead of [0,0] being top-left, it's
                     // bottom-right. This causes a vertical and horizontal flip
                     // in the resulting image, making it rotated 180 degrees.
-                    if (series.type === 'heatmap' && chart.inverted) {
+                    if (series.is('heatmap') && chart.inverted) {
                         x_1 = xAxis.len - x_1;
                         y_1 = yAxis.len - y_1;
                         width_1 = -width_1;
@@ -723,7 +744,7 @@ function GLRenderer(postRenderCallback) {
             drawMode: {
                 'area': 'lines',
                 'arearange': 'lines',
-                'areaspline': 'line_strip',
+                'areaspline': 'lines',
                 'column': 'lines',
                 'columnrange': 'lines',
                 'bar': 'lines',
@@ -769,12 +790,13 @@ function GLRenderer(postRenderCallback) {
         if (!shader) {
             return;
         }
-        shader.setUniform('xAxisTrans', axis.transA);
+        var pixelRatio = getPixelRatio();
+        shader.setUniform('xAxisTrans', axis.transA * pixelRatio);
         shader.setUniform('xAxisMin', axis.min);
-        shader.setUniform('xAxisMinPad', axis.minPixelPadding);
+        shader.setUniform('xAxisMinPad', axis.minPixelPadding * pixelRatio);
         shader.setUniform('xAxisPointRange', axis.pointRange);
-        shader.setUniform('xAxisLen', axis.len);
-        shader.setUniform('xAxisPos', axis.pos);
+        shader.setUniform('xAxisLen', axis.len * pixelRatio);
+        shader.setUniform('xAxisPos', axis.pos * pixelRatio);
         shader.setUniform('xAxisCVSCoord', (!axis.horiz));
         shader.setUniform('xAxisIsLog', (!!axis.logarithmic));
         shader.setUniform('xAxisReversed', (!!axis.reversed));
@@ -788,12 +810,13 @@ function GLRenderer(postRenderCallback) {
         if (!shader) {
             return;
         }
-        shader.setUniform('yAxisTrans', axis.transA);
+        var pixelRatio = getPixelRatio();
+        shader.setUniform('yAxisTrans', axis.transA * pixelRatio);
         shader.setUniform('yAxisMin', axis.min);
-        shader.setUniform('yAxisMinPad', axis.minPixelPadding);
+        shader.setUniform('yAxisMinPad', axis.minPixelPadding * pixelRatio);
         shader.setUniform('yAxisPointRange', axis.pointRange);
-        shader.setUniform('yAxisLen', axis.len);
-        shader.setUniform('yAxisPos', axis.pos);
+        shader.setUniform('yAxisLen', axis.len * pixelRatio);
+        shader.setUniform('yAxisPos', axis.pos * pixelRatio);
         shader.setUniform('yAxisCVSCoord', (!axis.horiz));
         shader.setUniform('yAxisIsLog', (!!axis.logarithmic));
         shader.setUniform('yAxisReversed', (!!axis.reversed));
@@ -814,12 +837,10 @@ function GLRenderer(postRenderCallback) {
      * @private
      */
     function render(chart) {
+        var pixelRatio = getPixelRatio();
         if (chart) {
-            if (!chart.chartHeight || !chart.chartWidth) {
-                // chart.setChartSize();
-            }
-            width = chart.chartWidth || 800;
-            height = chart.chartHeight || 400;
+            width = chart.chartWidth * pixelRatio;
+            height = chart.chartHeight * pixelRatio;
         }
         else {
             return false;
@@ -922,18 +943,13 @@ function GLRenderer(postRenderCallback) {
             setYAxis(s.series.yAxis);
             setThreshold(hasThreshold, translatedThreshold);
             if (s.drawMode === 'points') {
-                if (options.marker && isNumber(options.marker.radius)) {
-                    shader.setPointSize(options.marker.radius * 2.0);
-                }
-                else {
-                    shader.setPointSize(1);
-                }
+                shader.setPointSize(pick(options.marker && options.marker.radius, 0.5) * 2 * pixelRatio);
             }
             // If set to true, the toPixels translations in the shader
             // is skipped, i.e it's assumed that the value is a pixel coord.
             shader.setSkipTranslation(s.skipTranslation);
             if (s.series.type === 'bubble') {
-                shader.setBubbleUniforms(s.series, s.zMin, s.zMax);
+                shader.setBubbleUniforms(s.series, s.zMin, s.zMax, pixelRatio);
             }
             shader.setDrawAsCircle(asCircle[s.series.type] || false);
             // Do the actual rendering
@@ -944,12 +960,7 @@ function GLRenderer(postRenderCallback) {
                 }
             }
             if (s.hasMarkers && showMarkers) {
-                if (options.marker && isNumber(options.marker.radius)) {
-                    shader.setPointSize(options.marker.radius * 2.0);
-                }
-                else {
-                    shader.setPointSize(10);
-                }
+                shader.setPointSize(pick(options.marker && options.marker.radius, 5) * 2 * pixelRatio);
                 shader.setDrawAsCircle(true);
                 for (sindex = 0; sindex < s.segments.length; sindex++) {
                     vbuffer.render(s.segments[sindex].from, s.segments[sindex].to, 'POINTS');

package/es-modules/Extensions/Boost/WGLShader.js

@@ -370,7 +370,8 @@ function GLShader(gl) {
      * @private
      * @param series {Highcharts.Series} - the series to use
      */
-    function setBubbleUniforms(series, zCalcMin, zCalcMax) {
+    function setBubbleUniforms(series, zCalcMin, zCalcMax, pixelRatio) {
+        if (pixelRatio === void 0) { pixelRatio = 1; }
         var seriesOptions = series.options, zMin = Number.MAX_VALUE, zMax = -Number.MAX_VALUE;
         if (gl && shaderProgram && series.is('bubble')) {
             var pxSizes = series.getPxExtremes();
@@ -385,8 +386,8 @@ function GLShader(gl) {
             setUniform('bubbleZMin', zMin);
             setUniform('bubbleZMax', zMax);
             setUniform('bubbleZThreshold', series.options.zThreshold);
-            setUniform('bubbleMinSize', pxSizes.minPxSize);
-            setUniform('bubbleMaxSize', pxSizes.maxPxSize);
+            setUniform('bubbleMinSize', pxSizes.minPxSize * pixelRatio);
+            setUniform('bubbleMaxSize', pxSizes.maxPxSize * pixelRatio);
         }
     }
     /**