@amcharts/amcharts5 5.1.6 → 5.1.9

package/.internal/charts/xy/XYChart.js

@@ -11,6 +11,8 @@ import { Graphics } from "../../core/render/Graphics";
 import { Percent } from "../../core/util/Percent";
 import * as $array from "../../core/util/Array";
 import * as $type from "../../core/util/Type";
+import * as $order from "../../core/util/Order";
+import * as $object from "../../core/util/Object";
 /**
  * Creates an XY chart.
  *
@@ -108,6 +110,19 @@ var XYChart = /** @class */ (function (_super) {
             writable: true,
             value: _this.yAxesAndPlotContainer.children.push(Container.new(_this._root, { width: p100, height: p100, maskContent: false }))
         });
+        /**
+         * A [[Container]] used for any elements that need to be displayed over
+         * regular `plotContainer`.
+         *
+         * @see {@link https://www.amcharts.com/docs/v5/charts/xy-chart/xy-chart-containers/} for more info
+         * @default Container.new()
+         */
+        Object.defineProperty(_this, "topPlotContainer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: _this.yAxesAndPlotContainer.children.push(Container.new(_this._root, { width: p100, height: p100, isMeasured: false, position: "absolute" }))
+        });
         /**
          * A [[Container]] axis grid elements are stored in.
          *
@@ -192,6 +207,36 @@ var XYChart = /** @class */ (function (_super) {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(_this, "_movePoints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(_this, "_downStartX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "_downEndX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "_downStartY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "_downEndY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         return _this;
     }
     Object.defineProperty(XYChart.prototype, "_afterNew", {
@@ -238,6 +283,16 @@ var XYChart = /** @class */ (function (_super) {
             this._disposers.push(plotContainer.events.on("globalpointermove", function (event) {
                 _this._handlePlotMove(event.originalEvent);
             }));
+            this._maskGrid();
+        }
+    });
+    Object.defineProperty(XYChart.prototype, "_maskGrid", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.gridContainer.set("maskContent", true);
+            this.topGridContainer.set("maskContent", true);
         }
     });
     Object.defineProperty(XYChart.prototype, "_removeSeries", {
@@ -334,10 +389,12 @@ var XYChart = /** @class */ (function (_super) {
                             if (axis.get("panX")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint.x / plotContainer.width());
-                                var delta = wheelStep * (end - start) * shiftX * position;
+                                var delta = _this._getWheelSign(axis) * wheelStep * (end - start) * shiftX;
                                 var newStart = start + delta;
                                 var newEnd = end + delta;
+                                var se = _this._fixWheel(newStart, newEnd);
+                                newStart = se[0];
+                                newEnd = se[1];
                                 _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                             }
                         });
@@ -347,10 +404,12 @@ var XYChart = /** @class */ (function (_super) {
                             if (axis.get("panX")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint.x / plotContainer.width());
-                                var delta = wheelStep * (end - start) * shiftY * position;
+                                var delta = _this._getWheelSign(axis) * wheelStep * (end - start) * shiftY;
                                 var newStart = start + delta;
                                 var newEnd = end + delta;
+                                var se = _this._fixWheel(newStart, newEnd);
+                                newStart = se[0];
+                                newEnd = se[1];
                                 _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                             }
                         });
@@ -360,10 +419,12 @@ var XYChart = /** @class */ (function (_super) {
                             if (axis.get("panY")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint.y / plotContainer.height());
-                                var delta = wheelStep * (end - start) * shiftX * position;
+                                var delta = _this._getWheelSign(axis) * wheelStep * (end - start) * shiftX;
                                 var newStart = start + delta;
                                 var newEnd = end + delta;
+                                var se = _this._fixWheel(newStart, newEnd);
+                                newStart = se[0];
+                                newEnd = se[1];
                                 _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                             }
                         });
@@ -373,10 +434,12 @@ var XYChart = /** @class */ (function (_super) {
                             if (axis.get("panY")) {
                                 var start = axis.get("start");
                                 var end = axis.get("end");
-                                var position = axis.fixPosition(plotPoint.y / plotContainer.height());
-                                var delta = wheelStep * (end - start) * shiftY * position;
+                                var delta = _this._getWheelSign(axis) * wheelStep * (end - start) * shiftY;
                                 var newStart = start - delta;
                                 var newEnd = end - delta;
+                                var se = _this._fixWheel(newStart, newEnd);
+                                newStart = se[0];
+                                newEnd = se[1];
                                 _this._handleWheelAnimation(axis.zoom(newStart, newEnd));
                             }
                         });
@@ -391,15 +454,61 @@ var XYChart = /** @class */ (function (_super) {
             }
         }
     });
+    Object.defineProperty(XYChart.prototype, "_getWheelSign", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (axis) {
+            var sign = 1;
+            if (axis.get("renderer").get("inversed")) {
+                sign = -1;
+            }
+            return sign;
+        }
+    });
+    Object.defineProperty(XYChart.prototype, "_fixWheel", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (start, end) {
+            var diff = end - start;
+            if (start < 0) {
+                start = 0;
+                end = start + diff;
+            }
+            if (end > 1) {
+                end = 1;
+                start = end - diff;
+            }
+            return [start, end];
+        }
+    });
     Object.defineProperty(XYChart.prototype, "_handlePlotDown", {
         enumerable: false,
         configurable: true,
         writable: true,
         value: function (event) {
-            // TODO: handle multitouch
+            var plotContainer = this.plotContainer;
+            var local = plotContainer.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
+            if (this.get("pinchZoomX") || this.get("pinchZoomY")) {
+                var touchEvent = event;
+                var pointerId = touchEvent.pointerId;
+                if (pointerId) {
+                    if ($object.keys(plotContainer._downPoints).length > 0) {
+                        var xAxis = this.xAxes.getIndex(0);
+                        var yAxis = this.yAxes.getIndex(0);
+                        if (xAxis) {
+                            this._downStartX = xAxis.get("start", 0);
+                            this._downEndX = xAxis.get("end", 1);
+                        }
+                        if (yAxis) {
+                            this._downStartY = yAxis.get("start", 0);
+                            this._downEndY = yAxis.get("end", 1);
+                        }
+                    }
+                }
+            }
             if (this.get("panX") || this.get("panY")) {
-                var plotContainer = this.plotContainer;
-                var local = plotContainer.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
                 if (local.x >= 0 && local.y >= 0 && local.x <= plotContainer.width() && local.y <= this.height()) {
                     this._downPoint = local;
                     var panX = this.get("panX");
@@ -479,11 +588,21 @@ var XYChart = /** @class */ (function (_super) {
         configurable: true,
         writable: true,
         value: function (event) {
-            // TODO: handle multitouch
+            var plotContainer = this.plotContainer;
+            if (this.get("pinchZoomX") || this.get("pinchZoomY")) {
+                var touchEvent = event;
+                var pointerId = touchEvent.pointerId;
+                if (pointerId) {
+                    this._movePoints[pointerId] = this._root.documentPointToRoot({ x: event.clientX, y: event.clientY });
+                    if ($object.keys(plotContainer._downPoints).length > 1) {
+                        this._handlePinch();
+                        return;
+                    }
+                }
+            }
             var downPoint = this._downPoint;
             if (downPoint) {
-                var plotContainer_1 = this.plotContainer;
-                var local_1 = plotContainer_1.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
+                var local_1 = plotContainer.toLocal(this._root.documentPointToRoot({ x: event.clientX, y: event.clientY }));
                 var panX = this.get("panX");
                 var panY = this.get("panY");
                 if (panX) {
@@ -498,7 +617,7 @@ var XYChart = /** @class */ (function (_super) {
                             var panStart = axis._panStart;
                             var panEnd = axis._panEnd;
                             var difference = (panEnd - panStart);
-                            var deltaX = difference * (downPoint.x - local_1.x) / plotContainer_1.width();
+                            var deltaX = difference * (downPoint.x - local_1.x) / plotContainer.width();
                             if (axis.get("renderer").get("inversed")) {
                                 deltaX *= -1;
                             }
@@ -526,7 +645,7 @@ var XYChart = /** @class */ (function (_super) {
                             var panStart = axis._panStart;
                             var panEnd = axis._panEnd;
                             var difference = (panEnd - panStart);
-                            var deltaY = difference * (downPoint.y - local_1.y) / plotContainer_1.height();
+                            var deltaY = difference * (downPoint.y - local_1.y) / plotContainer.height();
                             if (axis.get("renderer").get("inversed")) {
                                 deltaY *= -1;
                             }
@@ -545,6 +664,89 @@ var XYChart = /** @class */ (function (_super) {
             }
         }
     });
+    Object.defineProperty(XYChart.prototype, "_handlePinch", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var _a, _b, _c, _d;
+            var _this = this;
+            var plotContainer = this.plotContainer;
+            var i = 0;
+            var downPoints = [];
+            var movePoints = [];
+            $object.each(plotContainer._downPoints, function (k, point) {
+                downPoints[i] = point;
+                var movePoint = _this._movePoints[k];
+                if (movePoint) {
+                    movePoints[i] = movePoint;
+                }
+                i++;
+            });
+            if (downPoints.length > 1 && movePoints.length > 1) {
+                var w = plotContainer.width();
+                var h = plotContainer.height();
+                var downPoint0 = downPoints[0];
+                var downPoint1 = downPoints[1];
+                var movePoint0 = movePoints[0];
+                var movePoint1 = movePoints[1];
+                if (downPoint0 && downPoint1 && movePoint0 && movePoint1) {
+                    movePoint0 = plotContainer.toLocal(movePoint0);
+                    movePoint1 = plotContainer.toLocal(movePoint1);
+                    downPoint0 = plotContainer.toLocal(downPoint0);
+                    downPoint1 = plotContainer.toLocal(downPoint1);
+                    if (this.get("pinchZoomX")) {
+                        var downStartX = this._downStartX;
+                        var downEndX = this._downEndX;
+                        if (downStartX != null && downEndX != null) {
+                            if (downPoint0.x > downPoint1.x) {
+                                _a = __read([downPoint1, downPoint0], 2), downPoint0 = _a[0], downPoint1 = _a[1];
+                                _b = __read([movePoint1, movePoint0], 2), movePoint0 = _b[0], movePoint1 = _b[1];
+                            }
+                            var downPos0 = downStartX + (downPoint0.x / w) * (downEndX - downStartX);
+                            var downPos1 = downStartX + (downPoint1.x / w) * (downEndX - downStartX);
+                            var movePos0 = downStartX + (movePoint0.x / w) * (downEndX - downStartX);
+                            var movePos1 = downStartX + (movePoint1.x / w) * (downEndX - downStartX);
+                            var initialDistance = Math.max(0.001, downPos1 - downPos0);
+                            var currentDistance = Math.max(0.001, movePos1 - movePos0);
+                            var d = initialDistance / currentDistance;
+                            var s_1 = downStartX * d + downPos0 - movePos0 * d;
+                            var e_1 = downEndX * d + downPos1 - movePos1 * d;
+                            this.xAxes.each(function (xAxis) {
+                                var sa = xAxis.fixPosition(s_1);
+                                var ea = xAxis.fixPosition(e_1);
+                                xAxis.zoom(sa, ea, 0);
+                            });
+                        }
+                    }
+                    if (this.get("pinchZoomY")) {
+                        var downStartY = this._downStartY;
+                        var downEndY = this._downEndY;
+                        if (downStartY != null && downEndY != null) {
+                            if (downPoint0.y < downPoint1.y) {
+                                _c = __read([downPoint1, downPoint0], 2), downPoint0 = _c[0], downPoint1 = _c[1];
+                                _d = __read([movePoint1, movePoint0], 2), movePoint0 = _d[0], movePoint1 = _d[1];
+                            }
+                            var downPos0 = downStartY + (1 - downPoint0.y / h) * (downEndY - downStartY);
+                            var downPos1 = downStartY + (1 - downPoint1.y / h) * (downEndY - downStartY);
+                            var movePos0 = downStartY + (1 - movePoint0.y / h) * (downEndY - downStartY);
+                            var movePos1 = downStartY + (1 - movePoint1.y / h) * (downEndY - downStartY);
+                            var initialDistance = Math.max(0.001, downPos1 - downPos0);
+                            var currentDistance = Math.max(0.001, movePos1 - movePos0);
+                            var d = initialDistance / currentDistance;
+                            var s_2 = downStartY * d + downPos0 - movePos0 * d;
+                            var e_2 = downEndY * d + downPos1 - movePos1 * d;
+                            this.yAxes.each(function (yAxis) {
+                                var sa = yAxis.fixPosition(s_2);
+                                var ea = yAxis.fixPosition(e_2);
+                                yAxis.zoom(sa, ea, 0);
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    });
     Object.defineProperty(XYChart.prototype, "_handleCursorPosition", {
         enumerable: false,
         configurable: true,
@@ -953,7 +1155,7 @@ var XYChart = /** @class */ (function (_super) {
         writable: true,
         value: function (point) {
             var plotContainer = this.plotContainer;
-            var otherCharts = this._otherCharts;
+            var otherCharts = this.getPrivate("otherCharts", this._otherCharts);
             var global = plotContainer.toGlobal(point);
             if (point.x >= -0.1 && point.y >= -0.1 && point.x <= plotContainer.width() + 0.1 && point.y <= plotContainer.height() + 0.1) {
                 return true;
@@ -1060,19 +1262,7 @@ var XYChart = /** @class */ (function (_super) {
                 var count = tooltips.length;
                 var average = sum / count;
                 if (average > h / 2 + plotT.y) {
-                    tooltips.sort(function (a, b) {
-                        var ya = a.get("pointTo").y;
-                        var yb = b.get("pointTo").y;
-                        if (ya < yb) {
-                            return 1;
-                        }
-                        else if (ya > yb) {
-                            return -1;
-                        }
-                        else {
-                            return 1;
-                        }
-                    });
+                    tooltips.sort(function (a, b) { return $order.compareNumber(b.get("pointTo").y, a.get("pointTo").y); });
                     var prevY_1 = plotB.y;
                     $array.each(tooltips, function (tooltip) {
                         var height = tooltip.height();
@@ -1087,19 +1277,8 @@ var XYChart = /** @class */ (function (_super) {
                     });
                 }
                 else {
-                    tooltips.sort(function (a, b) {
-                        var ya = a.get("pointTo").y;
-                        var yb = b.get("pointTo").y;
-                        if (ya < yb) {
-                            return -1;
-                        }
-                        else if (ya > yb) {
-                            return 1;
-                        }
-                        else {
-                            return -1;
-                        }
-                    });
+                    tooltips.reverse();
+                    tooltips.sort(function (a, b) { return $order.compareNumber(a.get("pointTo").y, b.get("pointTo").y); });
                     var prevY_2 = 0;
                     $array.each(tooltips, function (tooltip) {
                         var height = tooltip.height();