Tilemap - tileshape square doesn't work

[Basts]

Expected behaviour

It's a regression. The last properly working version is an 8.0.4, so the chart should work as it used to be.
Demo: https://jsfiddle.net/BlackLabel/t9hnvu7g/

Actual behaviour

The points don't draw and the error occurs in the console.

Demo: https://jsfiddle.net/BlackLabel/f7dx9ysa/

Product version

Highmaps JS v8.2.0 (2020-08-20)

[pawelfus]

Internal note:
Bisected to commit 119eb4e
FYI @Denyllon

[Denyllon]

Since heatmap refactoring (implementing possibility to configure series.marker options), the tilemap prototype functions supposed to be separated from heatmap series as much as it is possible for now, but still uses prototype functions from the mentioned series in some places though.

The most efficient and fastest way to fix is to restore the old series.translate method back, and assign it directly to the Highcharts.tileShapeTypes.square.

(function(H) {
  const clamp = H._modules['Core/Utilities.js'].clamp

  H.tileShapeTypes.square.translate = function() {
    var series = this;
    series.generatePoints();
    var _a = series.options,
      _b = _a.colsize,
      colsize = _b === void 0 ? 1 : _b,
      _c = _a.pointPadding,
      seriesPointPadding = _c === void 0 ? 0 : _c,
      _d = _a.rowsize,
      rowsize = _d === void 0 ? 1 : _d,
      points = series.points,
      xAxis = series.xAxis,
      yAxis = series.yAxis;
    var xPad = colsize / 2;
    var yPad = rowsize / 2;
    // Translate point values functionality
    var pointPlacement = series.pointPlacementToXValue(); // #7860
    var translateX = function(value) {
      return Math.round(clamp(xAxis.translate(value, false, false, false, true, pointPlacement), 0, xAxis.len));
    };
    var translateY = function(value) {
      return Math.round(clamp(yAxis.translate(value, false, true, false, true), 0, yAxis.len));
    };
    points.forEach(function(point) {
      var x1 = translateX(point.x - xPad);
      var x2 = translateX(point.x + xPad);
      var y1 = translateY(point.y - yPad);
      var y2 = translateY(point.y + yPad);
      var pointPadding = H.pick(point.pointPadding, seriesPointPadding);
      // Set plotX and plotY for use in K-D-Tree and more
      point.plotX = point.clientX = (x1 + x2) / 2;
      point.plotY = (y1 + y2) / 2;
      point.shapeType = 'rect';
      point.shapeArgs = {
        x: Math.min(x1, x2) + pointPadding,
        y: Math.min(y1, y2) + pointPadding,
        width: Math.max(Math.abs(x2 - x1) - pointPadding * 2, 0),
        height: Math.max(Math.abs(y2 - y1) - pointPadding * 2, 0)
      };
    });
    H.fireEvent(series, 'afterTranslate');
  }
})(Highcharts)

Demo with applied workaround: https://jsfiddle.net/BlackLabel/1L9egoh3/

[KacperMadej]

Updated workaround to work with v9.1.1: https://jsfiddle.net/BlackLabel/1L9egoh3/1/