@amcharts/amcharts5 5.0.0-beta.3 → 5.0.0-beta.30

package/.internal/core/render/backend/CanvasRenderer.js

@@ -4,7 +4,7 @@ import { BlendMode } from "./Renderer";
 import { Color } from "../../util/Color";
 import { Matrix } from "../../util/Matrix";
 import { Percent, percent } from "../../util/Percent";
-//import { Throttler } from "../../util/Throttler";
+import { Throttler } from "../../util/Throttler";
 import { Disposer, CounterDisposer } from "../../util/Disposer";
 import { TextFormatter } from "../../util/TextFormatter";
 import * as $utils from "../../util/Utils";
@@ -224,7 +224,7 @@ var CanvasDisplayObject = /** @class */ (function (_super) {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: true
+            value: false
         });
         Object.defineProperty(_this, "buttonMode", {
             enumerable: true,
@@ -845,8 +845,15 @@ var BeginFill = /** @class */ (function (_super) {
  */
 var EndFill = /** @class */ (function (_super) {
     __extends(EndFill, _super);
-    function EndFill() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function EndFill(clearShadow) {
+        var _this = _super.call(this) || this;
+        Object.defineProperty(_this, "clearShadow", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: clearShadow
+        });
+        return _this;
     }
     Object.defineProperty(EndFill.prototype, "colorize", {
         enumerable: false,
@@ -854,6 +861,12 @@ var EndFill = /** @class */ (function (_super) {
         writable: true,
         value: function (context, _forceColor) {
             context.fill();
+            if (this.clearShadow) {
+                context.shadowColor = "";
+                context.shadowBlur = 0;
+                context.shadowOffsetX = 0;
+                context.shadowOffsetY = 0;
+            }
         }
     });
     return EndFill;
@@ -1119,7 +1132,9 @@ var Arc = /** @class */ (function (_super) {
         configurable: true,
         writable: true,
         value: function (context) {
-            context.arc(this.cx, this.cy, this.radius, this.startAngle, this.endAngle, this.anticlockwise);
+            if (this.radius > 0) {
+                context.arc(this.cx, this.cy, this.radius, this.startAngle, this.endAngle, this.anticlockwise);
+            }
         }
     });
     Object.defineProperty(Arc.prototype, "addBounds", {
@@ -1178,7 +1193,9 @@ var ArcTo = /** @class */ (function (_super) {
         configurable: true,
         writable: true,
         value: function (context) {
-            context.arcTo(this.x1, this.y1, this.x2, this.y2, this.radius);
+            if (this.radius > 0) {
+                context.arcTo(this.x1, this.y1, this.x2, this.y2, this.radius);
+            }
         }
     });
     // TODO: add points
@@ -1431,6 +1448,67 @@ var QuadraticCurveTo = /** @class */ (function (_super) {
     });
     return QuadraticCurveTo;
 }(Op));
+/**
+ * @ignore
+ */
+var Shadow = /** @class */ (function (_super) {
+    __extends(Shadow, _super);
+    function Shadow(color, blur, offsetX, offsetY, opacity) {
+        var _this = _super.call(this) || this;
+        Object.defineProperty(_this, "color", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: color
+        });
+        Object.defineProperty(_this, "blur", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: blur
+        });
+        Object.defineProperty(_this, "offsetX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: offsetX
+        });
+        Object.defineProperty(_this, "offsetY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: offsetY
+        });
+        Object.defineProperty(_this, "opacity", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: opacity
+        });
+        return _this;
+    }
+    Object.defineProperty(Shadow.prototype, "colorize", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (context, _forceColor) {
+            if (this.opacity) {
+                context.fillStyle = this.color;
+            }
+            context.shadowColor = this.color;
+            if (this.blur) {
+                context.shadowBlur = this.blur;
+            }
+            if (this.offsetX) {
+                context.shadowOffsetX = this.offsetX;
+            }
+            if (this.offsetY) {
+                context.shadowOffsetY = this.offsetY;
+            }
+        }
+    });
+    return Shadow;
+}(Op));
 /**
  * @ignore
  */
@@ -1450,6 +1528,24 @@ var CanvasGraphics = /** @class */ (function (_super) {
             writable: true,
             value: BlendMode.NORMAL
         });
+        Object.defineProperty(_this, "_hasShadows", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(_this, "_fillAlpha", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "_strokeAlpha", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         return _this;
     }
     Object.defineProperty(CanvasGraphics.prototype, "clear", {
@@ -1475,11 +1571,13 @@ var CanvasGraphics = /** @class */ (function (_super) {
         writable: true,
         value: function (color, alpha) {
             if (alpha === void 0) { alpha = 1; }
+            this._fillAlpha = alpha;
             if (color) {
                 if (color instanceof Color) {
                     this._pushOp(new BeginFill(color.toCSS(alpha)));
                 }
                 else {
+                    this.isMeasured = true;
                     this._pushOp(new BeginFill(color));
                 }
             }
@@ -1493,7 +1591,7 @@ var CanvasGraphics = /** @class */ (function (_super) {
         configurable: true,
         writable: true,
         value: function () {
-            this._pushOp(new EndFill());
+            this._pushOp(new EndFill(this._hasShadows));
         }
     });
     Object.defineProperty(CanvasGraphics.prototype, "endStroke", {
@@ -1511,6 +1609,7 @@ var CanvasGraphics = /** @class */ (function (_super) {
         value: function (width, color, alpha) {
             if (width === void 0) { width = 0; }
             if (alpha === void 0) { alpha = 1; }
+            this._strokeAlpha = alpha;
             if (color) {
                 if (color instanceof Color) {
                     this._pushOp(new LineStyle(width, color.toCSS(alpha)));
@@ -1613,6 +1712,15 @@ var CanvasGraphics = /** @class */ (function (_super) {
             this._pushOp(new ClosePath());
         }
     });
+    Object.defineProperty(CanvasGraphics.prototype, "shadow", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (color, blur, offsetX, offsetY, opacity) {
+            this._hasShadows = true;
+            this._pushOp(new Shadow(opacity ? color.toCSS(opacity) : color.toCSS(this._fillAlpha || this._strokeAlpha), blur, offsetX, offsetY));
+        }
+    });
     // TODO better error checking
     Object.defineProperty(CanvasGraphics.prototype, "svgPath", {
         enumerable: false,
@@ -1859,9 +1967,10 @@ var CanvasGraphics = /** @class */ (function (_super) {
                     context_1.globalCompositeOperation = this.blendMode;
                     context_1.beginPath();
                 }
-                var color_1 = (interactive ? this._getColorId() : undefined);
+                var color_1;
                 if (interactive) {
                     ghostContext_1.beginPath();
+                    color_1 = this._getColorId();
                 }
                 $array.each(this._operations, function (op) {
                     if (layerDirty) {
@@ -1999,14 +2108,15 @@ var CanvasText = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true,
         writable: true,
-        value: function (layer, ignoreGhost) {
+        value: function (layer, ignoreGhost, ignoreFontWeight) {
             if (ignoreGhost === void 0) { ignoreGhost = false; }
+            if (ignoreFontWeight === void 0) { ignoreFontWeight = false; }
             _super.prototype._render.call(this, layer);
             var context = layer.context;
             var ghostContext = this._renderer._ghostContext;
             // Font style
             var style = this.style;
-            var fontStyle = this._getFontStyle();
+            var fontStyle = this._getFontStyle(undefined, ignoreFontWeight);
             context.font = fontStyle;
             if (this._isInteractive() && !ignoreGhost) {
                 ghostContext.font = fontStyle;
@@ -2020,6 +2130,18 @@ var CanvasText = /** @class */ (function (_super) {
                     context.fillStyle = style.fill;
                 }
             }
+            if (style.shadowColor) {
+                layer.context.shadowColor = style.shadowColor.toCSS(style.shadowOpacity || 1);
+            }
+            if (style.shadowBlur) {
+                layer.context.shadowBlur = style.shadowBlur;
+            }
+            if (style.shadowOffsetX) {
+                layer.context.shadowOffsetX = style.shadowOffsetX;
+            }
+            if (style.shadowOffsetY) {
+                layer.context.shadowOffsetY = style.shadowOffsetY;
+            }
             this._shared(context);
             if (this._isInteractive() && !ignoreGhost) {
                 ghostContext.fillStyle = this._getColorId();
@@ -2031,7 +2153,8 @@ var CanvasText = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true,
         writable: true,
-        value: function (style2) {
+        value: function (style2, ignoreFontWeight) {
+            if (ignoreFontWeight === void 0) { ignoreFontWeight = false; }
             // Process defaults
             var style = this.style;
             var fontStyle = [];
@@ -2041,11 +2164,13 @@ var CanvasText = /** @class */ (function (_super) {
             else if (style.fontVariant) {
                 fontStyle.push(style.fontVariant);
             }
-            if (style2 && style2.fontWeight) {
-                fontStyle.push(style2.fontWeight);
-            }
-            else if (style.fontWeight) {
-                fontStyle.push(style.fontWeight);
+            if (!ignoreFontWeight) {
+                if (style2 && style2.fontWeight) {
+                    fontStyle.push(style2.fontWeight);
+                }
+                else if (style.fontWeight) {
+                    fontStyle.push(style.fontWeight);
+                }
             }
             if (style2 && style2.fontStyle) {
                 fontStyle.push(style2.fontStyle);
@@ -2077,14 +2202,6 @@ var CanvasText = /** @class */ (function (_super) {
             return fontStyle.join(" ");
         }
     });
-    Object.defineProperty(CanvasText.prototype, "render", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (parentLayer) {
-            _super.prototype.render.call(this, parentLayer);
-        }
-    });
     Object.defineProperty(CanvasText.prototype, "_render", {
         enumerable: false,
         configurable: true,
@@ -2097,11 +2214,13 @@ var CanvasText = /** @class */ (function (_super) {
                 this._measure(layer);
             }
             if (this._textVisible) {
-                this._prerender(layer);
                 var interactive_1 = this._isInteractive();
                 var context_2 = layer.context;
                 var layerDirty_1 = layer.dirty;
                 var ghostContext_2 = this._renderer._ghostContext;
+                context_2.save();
+                ghostContext_2.save();
+                this._prerender(layer);
                 // const lines = this.text.toString().replace(/\r/g, "").split(/\n/);
                 // const x = this._localBounds && (this._localBounds.left < 0) ? Math.abs(this._localBounds.left) : 0;
                 // Process text info produced by _measure()
@@ -2142,6 +2261,8 @@ var CanvasText = /** @class */ (function (_super) {
                         }
                     });
                 });
+                context_2.restore();
+                ghostContext_2.restore();
             }
         }
     });
@@ -2151,11 +2272,11 @@ var CanvasText = /** @class */ (function (_super) {
         writable: true,
         value: function (bounds) {
             if (this.visible && this.isMeasured) {
-                if (this._textVisible) {
-                    var x = this._measure(this.getLayer());
-                    setPoint(bounds, { x: x.left, y: x.top });
-                    setPoint(bounds, { x: x.right, y: x.bottom });
-                }
+                //if (this._textVisible) {
+                var x = this._measure(this.getLayer());
+                setPoint(bounds, { x: x.left, y: x.top });
+                setPoint(bounds, { x: x.right, y: x.bottom });
+                //}
             }
         }
     });
@@ -2177,7 +2298,7 @@ var CanvasText = /** @class */ (function (_super) {
             // Pre-render
             context.save();
             ghostContext.save();
-            this._prerender(layer, true);
+            this._prerender(layer, true, true);
             // Get default font metrix
             var refText = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 ";
             // Split up text into lines
@@ -2189,7 +2310,16 @@ var CanvasText = /** @class */ (function (_super) {
             var offsetY = 0;
             $array.each(lines, function (line, _index) {
                 // Split up line into format/value chunks
-                var chunks = TextFormatter.chunk(line);
+                var chunks;
+                if (line == "") {
+                    chunks = [{
+                            type: "value",
+                            text: ""
+                        }];
+                }
+                else {
+                    chunks = TextFormatter.chunk(line, false, _this.style.ignoreFormatting);
+                }
                 var _loop_1 = function () {
                     // Init line object
                     var lineInfo = {
@@ -2231,6 +2361,10 @@ var CanvasText = /** @class */ (function (_super) {
                                 currentFormat = chunk.text;
                             }
                             else {
+                                if (!styleRestored) {
+                                    context.restore();
+                                    ghostContext.restore();
+                                }
                                 var format = TextFormatter.getTextStyle(chunk.text);
                                 var fontStyle = _this._getFontStyle(format);
                                 context.save();
@@ -2414,9 +2548,9 @@ var CanvasText = /** @class */ (function (_super) {
                         else {
                             if (!this._originalScale || this._originalScale == 1) {
                                 this._originalScale = this.scale;
-                                this.scale = ratio;
-                                this._textVisible = true;
                             }
+                            this.scale = ratio;
+                            this._textVisible = true;
                         }
                     }
                     else if (oversizedBehavior == "hide") {
@@ -2583,18 +2717,42 @@ var CanvasTextStyle = /** @class */ (function () {
             writable: true,
             value: void 0
         });
-        // dropShadow?: boolean;
-        // dropShadowAlpha?: number;
-        // dropShadowAngle?: number;
-        // dropShadowBlur?: number;
-        // dropShadowColor?: number;
-        // dropShadowDistance?: number;
         Object.defineProperty(this, "fontVariant", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "shadowColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "shadowBlur", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "shadowOffsetX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "shadowOffsetY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "shadowOpacity", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         // leading?: number;
         // letterSpacing?: number;
         Object.defineProperty(this, "lineHeight", {
@@ -2662,6 +2820,12 @@ var CanvasTextStyle = /** @class */ (function () {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "ignoreFormatting", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
     }
     return CanvasTextStyle;
 }());
@@ -2937,7 +3101,7 @@ var CanvasRadialText = /** @class */ (function (_super) {
             var offsetY = 0;
             $array.each(lines, function (line, _index) {
                 // Split up line into format/value chunks
-                var chunks = TextFormatter.chunk(line);
+                var chunks = TextFormatter.chunk(line, false, _this.style.ignoreFormatting);
                 // Init line object
                 var lineInfo = {
                     offsetY: offsetY,
@@ -3082,6 +3246,36 @@ var CanvasImage = /** @class */ (function (_super) {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(_this, "shadowColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "shadowBlur", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "shadowOffsetX", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "shadowOffsetY", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "shadowOpacity", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(_this, "_imageMask", {
             enumerable: true,
             configurable: true,
@@ -3132,6 +3326,18 @@ var CanvasImage = /** @class */ (function (_super) {
                     return;
                 }
                 if (layer.dirty) {
+                    if (this.shadowColor) {
+                        layer.context.shadowColor = this.shadowColor.toCSS(this.shadowOpacity || 1);
+                    }
+                    if (this.shadowBlur) {
+                        layer.context.shadowBlur = this.shadowBlur;
+                    }
+                    if (this.shadowOffsetX) {
+                        layer.context.shadowOffsetX = this.shadowOffsetX;
+                    }
+                    if (this.shadowOffsetY) {
+                        layer.context.shadowOffsetY = this.shadowOffsetY;
+                    }
                     var width = this.width || this.image.naturalWidth;
                     var height = this.height || this.image.naturalHeight;
                     layer.context.drawImage(this.image, 0, 0, width, height);
@@ -3210,6 +3416,12 @@ var CanvasRendererEvent = /** @class */ (function () {
             writable: true,
             value: false
         });
+        Object.defineProperty(this, "native", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
         if ($utils.supports("touchevents") && event instanceof Touch) {
             this.id = event.identifier;
         }
@@ -3294,6 +3506,18 @@ var CanvasRenderer = /** @class */ (function (_super) {
             writable: true,
             value: 0
         });
+        Object.defineProperty(_this, "_clientWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(_this, "_clientHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
         Object.defineProperty(_this, "resolution", {
             enumerable: true,
             configurable: true,
@@ -3367,11 +3591,23 @@ var CanvasRenderer = /** @class */ (function (_super) {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(_this, "_mouseMoveThrottler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Throttler(function () {
+                _this._dispatchGlobalMousemove(_this._lastPointerMoveEvent);
+            })
+        });
         _this.view.appendChild(_this._layerDom);
         // @todo : do the same for ghost
         _this._ghostView = document.createElement("canvas");
         _this._ghostContext = _this._ghostView.getContext("2d", { alpha: false });
         _this._ghostContext.imageSmoothingEnabled = false;
+        // Monitor for possible pixel ratio changes (when page is zoomed)
+        window.addEventListener("resize", function (_ev) {
+            _this.resolution = window.devicePixelRatio;
+        });
         // We need this in order top prevent default touch gestures when dragging
         // draggable elements
         if ($utils.supports("touchevents")) {
@@ -3506,6 +3742,8 @@ var CanvasRenderer = /** @class */ (function (_super) {
         writable: true,
         value: function (width, height) {
             var _this = this;
+            this._clientWidth = width;
+            this._clientHeight = height;
             this._width = Math.floor(width * this.resolution);
             this._height = Math.floor(height * this.resolution);
             $array.each(this.layers, function (layer) {
@@ -3559,6 +3797,21 @@ var CanvasRenderer = /** @class */ (function (_super) {
             return layer;
         }
     });
+    Object.defineProperty(CanvasRenderer.prototype, "getLayerByOrder", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (order) {
+            var layers = this.layers;
+            var length = layers.length;
+            for (var i = 0; i < length; i++) {
+                var layer = layers[i];
+                if (layer.order == order) {
+                    return layer;
+                }
+            }
+        }
+    });
     Object.defineProperty(CanvasRenderer.prototype, "getLayer", {
         enumerable: false,
         configurable: true,
@@ -3566,26 +3819,38 @@ var CanvasRenderer = /** @class */ (function (_super) {
         value: function (order, visible) {
             if (visible === void 0) { visible = true; }
             var layers = this.layers;
-            if (layers.length > order) {
-                var layer_1 = layers[order];
-                if (layer_1) {
-                    return layer_1;
-                }
+            var existingLayer = this.getLayerByOrder(order);
+            if (existingLayer) {
+                return existingLayer;
             }
             var layer = this.createDetachedLayer();
             layer.order = order;
             layer.visible = visible;
-            layers[order] = layer;
-            var next;
-            var length = layers.length;
-            // This finds the next layer
-            for (var i = order + 1; i < length; ++i) {
-                next = layers[i];
-                if (next !== undefined && next.visible) {
-                    break;
+            if (layer.visible && this._width) {
+                layer.view.width = this._width;
+                layer.view.style.width = this._clientWidth + "px";
+                layer.view.height = this._height;
+                layer.view.style.height = this._clientHeight + "px";
+            }
+            layers.push(layer);
+            layers.sort(function (a, b) {
+                if (a.order > b.order) {
+                    return 1;
+                }
+                else if (a.order < b.order) {
+                    return -1;
                 }
                 else {
-                    next = undefined;
+                    return 0;
+                }
+            });
+            var length = layers.length;
+            var layerIndex = $array.indexOf(layers, layer);
+            var next;
+            for (var i = layerIndex + 1; i < length; i++) {
+                if (layers[i].visible) {
+                    next = layers[i];
+                    break;
                 }
             }
             if (visible) {
@@ -3608,7 +3873,6 @@ var CanvasRenderer = /** @class */ (function (_super) {
             this._dirtyLayers.length = 0;
             $array.each(this.layers, function (layer) {
                 if (layer) {
-                    //console.log(layer.order, layer.dirty);
                     if (layer.dirty && layer.visible) {
                         _this._dirtyLayers.push(layer);
                         layer.context.save();
@@ -3630,7 +3894,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
             });
             //}, 100)
             if (this._hovering.size && this._lastPointerMoveEvent) {
-                this._dispatchGlobalMousemove(this._lastPointerMoveEvent);
+                this._mouseMoveThrottler.run();
             }
         }
     });
@@ -3641,7 +3905,6 @@ var CanvasRenderer = /** @class */ (function (_super) {
         value: function (obj) {
             var id = distributeId(++this._colorId);
             var color = Color.fromHex(id).toCSS();
-            //console.log("ASSIGNING", color);
             this._colorMap[color] = obj;
             return color;
         }
@@ -3680,15 +3943,47 @@ var CanvasRenderer = /** @class */ (function (_super) {
         configurable: true,
         writable: true,
         value: function (point) {
-            var pixel = this._ghostContext.getImageData(
-            // TODO should this round ?
-            Math.round(point.x * this.resolution), Math.round(point.y * this.resolution), 1, 1);
-            if (pixel.data[0] === 0 && pixel.data[1] === 0 && pixel.data[2] === 0) {
-                return false;
+            if (point.x < 0 || point.x > this._width / this.resolution || point.y < 0 || point.y > this._height / this.resolution) {
+                return;
+            }
+            else {
+                var pixel = this._ghostContext.getImageData(
+                // TODO should this round ?
+                Math.round(point.x * this.resolution), Math.round(point.y * this.resolution), 1, 1);
+                if (pixel.data[0] === 0 && pixel.data[1] === 0 && pixel.data[2] === 0) {
+                    return false;
+                }
+                var colorId = Color.fromRGB(pixel.data[0], pixel.data[1], pixel.data[2]).toCSS();
+                var hit = this._colorMap[colorId];
+                return hit;
+            }
+        }
+    });
+    Object.defineProperty(CanvasRenderer.prototype, "_withEvents", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (key, f) {
+            var events = this._events[key];
+            if (events !== undefined) {
+                events.dispatching = true;
+                try {
+                    f(events);
+                }
+                finally {
+                    events.dispatching = false;
+                    if (events.cleanup) {
+                        events.cleanup = false;
+                        $array.keepIf(events.callbacks, function (callback) {
+                            return !callback.disposed;
+                        });
+                        if (events.callbacks.length === 0) {
+                            events.disposer.dispose();
+                            delete this._events[key];
+                        }
+                    }
+                }
             }
-            var colorId = Color.fromRGB(pixel.data[0], pixel.data[1], pixel.data[2]).toCSS();
-            var hit = this._colorMap[colorId];
-            return hit;
         }
     });
     Object.defineProperty(CanvasRenderer.prototype, "_dispatchEventAll", {
@@ -3699,12 +3994,13 @@ var CanvasRenderer = /** @class */ (function (_super) {
             if (!this.interactionsEnabled) {
                 return;
             }
-            var events = this._events[key];
-            if (events !== undefined) {
+            this._withEvents(key, function (events) {
                 $array.each(events.callbacks, function (callback) {
-                    callback.callback.call(callback.context, event);
+                    if (!callback.disposed) {
+                        callback.callback.call(callback.context, event);
+                    }
                 });
-            }
+            });
         }
     });
     Object.defineProperty(CanvasRenderer.prototype, "_dispatchEvent", {
@@ -3715,17 +4011,15 @@ var CanvasRenderer = /** @class */ (function (_super) {
             if (!this.interactionsEnabled) {
                 return false;
             }
-            var events = this._events[key];
             var dispatched = false;
-            if (events !== undefined) {
+            this._withEvents(key, function (events) {
                 $array.each(events.callbacks, function (callback) {
-                    //console.log(key, callback.object === target)
-                    if (callback.object === target) {
+                    if (!callback.disposed && callback.object === target) {
                         callback.callback.call(callback.context, event);
                         dispatched = true;
                     }
                 });
-            }
+            });
             return dispatched;
         }
     });
@@ -3735,6 +4029,10 @@ var CanvasRenderer = /** @class */ (function (_super) {
         writable: true,
         value: function (originalEvent) {
             var _this = this;
+            if (originalEvent.button > 0) {
+                // Ignore non-primary mouse buttons
+                return;
+            }
             var event = this.getEvent(originalEvent);
             var target = this._getHitTarget(event.point);
             if (target) {
@@ -3766,7 +4064,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
             var _this = this;
             var event = this.getEvent(originalEvent);
             var target = this._getHitTarget(event.point);
-            this._lastPointerMoveEvent = originalEvent;
+            event.native = this._isNativeEvent(originalEvent);
             if (target) {
                 this._hovering.forEach(function (obj) {
                     if (!obj.contains(target)) {
@@ -3777,19 +4075,22 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         _this._dispatchEvent("pointerout", obj, event);
                     }
                 });
-                eachTargets(target, function (obj) {
-                    if (!_this._hovering.has(obj)) {
-                        _this._hovering.add(obj);
-                        if (obj.cursorOverStyle) {
-                            obj._replacedCursorStyle = $utils.getStyle(document.body, "cursor");
-                            $utils.setStyle(document.body, "cursor", obj.cursorOverStyle);
+                if (event.native) {
+                    eachTargets(target, function (obj) {
+                        if (!_this._hovering.has(obj)) {
+                            _this._hovering.add(obj);
+                            if (obj.cursorOverStyle) {
+                                obj._replacedCursorStyle = $utils.getStyle(document.body, "cursor");
+                                $utils.setStyle(document.body, "cursor", obj.cursorOverStyle);
+                            }
+                            _this._dispatchEvent("pointerover", obj, event);
                         }
-                        _this._dispatchEvent("pointerover", obj, event);
-                    }
-                    return true;
-                });
+                        return true;
+                    });
+                }
+                //} else if (target === false) {
             }
-            else if (target === false) {
+            else {
                 this._hovering.forEach(function (obj) {
                     if (obj.cursorOverStyle) {
                         $utils.setStyle(document.body, "cursor", obj._replacedCursorStyle);
@@ -3801,6 +4102,17 @@ var CanvasRenderer = /** @class */ (function (_super) {
             this._dispatchEventAll("globalpointermove", event);
         }
     });
+    Object.defineProperty(CanvasRenderer.prototype, "_isNativeEvent", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (event) {
+            if (event.target) {
+                return event.target.parentNode === this._layerDom;
+            }
+            return true;
+        }
+    });
     Object.defineProperty(CanvasRenderer.prototype, "_dispatchGlobalMouseup", {
         enumerable: false,
         configurable: true,
@@ -3834,6 +4146,10 @@ var CanvasRenderer = /** @class */ (function (_super) {
         writable: true,
         value: function (originalEvent) {
             var _this = this;
+            if (originalEvent.button > 0) {
+                // Ignore non-primary mouse buttons
+                return;
+            }
             var event = this.getEvent(originalEvent);
             var id = event.id;
             if (this._mousedown.length !== 0) {
@@ -3922,8 +4238,9 @@ var CanvasRenderer = /** @class */ (function (_super) {
                         //const throttler = new Throttler();
                         // TODO handle throttling properly for multitouch
                         return onPointerEvent(window, "pointermove", function (ev) {
+                            _this._lastPointerMoveEvent = ev;
+                            _this._mouseMoveThrottler.run();
                             //throttler.throttle(() => {
-                            _this._dispatchGlobalMousemove(ev);
                             //});
                         });
                     });
@@ -3987,15 +4304,23 @@ var CanvasRenderer = /** @class */ (function (_super) {
                 events = this._events[key] = {
                     disposer: this._initEvent(key),
                     callbacks: [],
+                    dispatching: false,
+                    cleanup: false,
                 };
             }
-            var listener = { object: object, context: context, callback: callback };
+            var listener = { object: object, context: context, callback: callback, disposed: false };
             events.callbacks.push(listener);
             return new Disposer(function () {
-                $array.removeFirst(events.callbacks, listener);
-                if (events.callbacks.length === 0) {
-                    events.disposer.dispose();
-                    delete _this._events[key];
+                listener.disposed = true;
+                if (events.dispatching) {
+                    events.cleanup = true;
+                }
+                else {
+                    $array.removeFirst(events.callbacks, listener);
+                    if (events.callbacks.length === 0) {
+                        events.disposer.dispose();
+                        delete _this._events[key];
+                    }
                 }
             });
         }