flocc 0.5.20 → 0.5.22

package/dist/flocc.js

@@ -3218,6 +3218,15 @@
              * such as a {@linkcode LineChartRenderer}, {@linkcode Histogram}, etc.
              */
             _this.renderers = [];
+            /**
+             * Whether the `Environment` tick cycle is currently playing.
+             * Use {@linkcode pause}, {@linkcode resume}, or {@linkcode toggle}
+             * to control playback.
+             * @since 0.5.22
+             */
+            _this.playing = true;
+            /** @hidden */
+            _this._tickIntervalId = null;
             /**
              * This property will always equal the number of tick cycles that
              * have passed since the `Environment` was created. If you call
@@ -3387,6 +3396,9 @@
          * @since 0.0.5
          */
         Environment.prototype.tick = function (opts) {
+            // If paused, skip the tick cycle (use `step()` to advance manually)
+            if (!this.playing)
+                return;
             var _a = this._getTickOptions(opts), activation = _a.activation, activationCount = _a.activationCount, count = _a.count, randomizeOrder = _a.randomizeOrder;
             // for uniform activation, every agent is always activated
             if (activation === "uniform") {
@@ -3454,6 +3466,47 @@
             }
             this.renderers.forEach(function (r) { return r.render(); });
         };
+        /**
+         * Pause the tick cycle. While paused, calling {@linkcode tick} will
+         * be a no-op unless you use {@linkcode step} to advance manually.
+         * @since 0.5.22
+         */
+        Environment.prototype.pause = function () {
+            this.playing = false;
+        };
+        /**
+         * Resume the tick cycle after it has been paused.
+         * @since 0.5.22
+         */
+        Environment.prototype.resume = function () {
+            this.playing = true;
+        };
+        /**
+         * Toggle the tick cycle between playing and paused.
+         * @since 0.5.22
+         */
+        Environment.prototype.toggle = function () {
+            this.playing = !this.playing;
+        };
+        /**
+         * Advance the `Environment` by exactly one tick, regardless of whether
+         * it is paused. This is useful for stepping through the simulation
+         * frame-by-frame while paused.
+         *
+         * ```js
+         * environment.pause();
+         * environment.step(); // advances one tick
+         * ```
+         *
+         * @since 0.5.22
+         */
+        Environment.prototype.step = function (opts) {
+            // Temporarily mark as playing so tick executes, then restore
+            var wasPlaying = this.playing;
+            this.playing = true;
+            this.tick(opts);
+            this.playing = wasPlaying;
+        };
         /**
          * Use a helper with this environment. A helper can be one of:
          * - {@linkcode KDTree}
@@ -3990,7 +4043,10 @@
         width: 500,
         height: 500,
         scale: 1,
-        trace: false
+        trace: false,
+        interactive: false,
+        zoomMin: 0.1,
+        zoomMax: 10
     };
     /**
      * A `CanvasRenderer` renders an {@linkcode Environment} spatially in two dimensions.
@@ -4010,6 +4066,12 @@
      * - `"triangle"` — Draws a triangle centered at the `Agent`'s `"x"` / `"y"` values.
      *   - Also uses the `"size"` value.
      *
+     * When `interactive` is set to `true` in the options, the renderer supports:
+     * - **Click/hover detection** — Use {@linkcode on} to listen for `"click"`, `"hover"`, and `"unhover"` events on agents.
+     * - **Agent selection** — Clicking an agent selects it (highlighted with a stroke). Access selected agents via {@linkcode selected}.
+     * - **Pan** — Click and drag on empty space to pan.
+     * - **Zoom** — Scroll to zoom in/out (bounded by `zoomMin` / `zoomMax`).
+     *
      * @since 0.0.11
      */
     var CanvasRenderer = /** @class */ (function (_super) {
@@ -4025,15 +4087,33 @@
          * - `connectionOpacity` (*number* = `1`) — For `Environment`s using a `Network`, the opacity of lines
          * - `connectionWidth` (*number* = `1`) — For `Environment`s using a `Network`, the width of lines
          * - `height` (*number* = `500`) — The height, in pixels, of the canvas on which to render
+         * - `interactive` (*boolean* = `false`) — Enables interactive features (click/hover detection, selection, pan, zoom)
+         * - `onSelect` (*function*) — Optional callback when an agent is selected or deselected
          * - `origin` (*{ x: number; y: number }* = `{ x: 0, y: 0 }`) — The coordinate of the upper-left point of the space to be rendered
          * - `scale` (*number* = `1`) — The scale at which to render (the larger the scale, the smaller the size of the space that is actually rendered)
          * - `trace` (*boolean* = `false`) — If `true`, the renderer will not clear old drawings, causing the `Agent`s to appear to *trace* their paths across space
          * - `width` (*number* = `500`) — The width, in pixels, of the canvas on which to render
+         * - `zoomMin` (*number* = `0.1`) — Minimum scale when zooming
+         * - `zoomMax` (*number* = `10`) — Maximum scale when zooming
          */
         function CanvasRenderer(environment, opts) {
             var _this = _super.call(this) || this;
             /** @hidden */
             _this.terrainBuffer = document.createElement("canvas");
+            /** The currently selected agents (only used when `interactive` is `true`). */
+            _this.selected = [];
+            /** @hidden */
+            _this._listeners = new Map();
+            /** @hidden */
+            _this._hoveredAgent = null;
+            /** @hidden */
+            _this._isPanning = false;
+            /** @hidden */
+            _this._panStart = null;
+            /** @hidden */
+            _this._panOriginStart = null;
+            /** @hidden */
+            _this._boundHandlers = {};
             _this.environment = environment;
             environment.renderers.push(_this);
             _this.opts = Object.assign({}, defaultOptions);
@@ -4050,9 +4130,158 @@
             _this.terrainBuffer.width = width;
             _this.terrainBuffer.height = height;
             _this.context.fillStyle = opts.background;
-            _this.context.fillRect(0, 0, width, height);
+            _this.context.fillRect(0, 0, _this.width, _this.height);
+            if (_this.opts.interactive) {
+                _this._setupInteractiveListeners();
+            }
             return _this;
         }
+        /**
+         * Register a callback for an interactive event.
+         * Supported event names: `"click"`, `"hover"`, `"unhover"`.
+         *
+         * ```js
+         * renderer.on("click", (agent, event) => {
+         *   console.log("Clicked agent:", agent.id);
+         * });
+         * ```
+         *
+         * @param eventName - The event to listen for.
+         * @param callback - The callback, invoked with the `Agent` and the `MouseEvent`.
+         */
+        CanvasRenderer.prototype.on = function (eventName, callback) {
+            if (!this._listeners.has(eventName)) {
+                this._listeners.set(eventName, []);
+            }
+            this._listeners.get(eventName).push(callback);
+        };
+        /** @hidden */
+        CanvasRenderer.prototype._emit = function (eventName, agent, event) {
+            var callbacks = this._listeners.get(eventName);
+            if (callbacks) {
+                callbacks.forEach(function (cb) { return cb(agent, event); });
+            }
+        };
+        /**
+         * Given a mouse event, return the agent at that position (if any).
+         * Hit-testing accounts for the agent's shape and size.
+         * @hidden
+         */
+        CanvasRenderer.prototype._agentAtPoint = function (clientX, clientY) {
+            var rect = this.canvas.getBoundingClientRect();
+            var dpr = window.devicePixelRatio;
+            var canvasX = (clientX - rect.left) * dpr;
+            var canvasY = (clientY - rect.top) * dpr;
+            var agents = this.environment.getAgents();
+            // Iterate in reverse so topmost-drawn agent is found first
+            for (var i = agents.length - 1; i >= 0; i--) {
+                var agent = agents[i];
+                var data = agent.getData();
+                var ax = this.x(data.x);
+                var ay = this.y(data.y);
+                var shape = data.shape;
+                var size = (data.size || 1) * dpr;
+                if (shape === "rect") {
+                    var w = (data.width || 1) * dpr;
+                    var h = (data.height || 1) * dpr;
+                    var rx = ax - w / 2;
+                    var ry = ay - h / 2;
+                    if (canvasX >= rx && canvasX <= rx + w && canvasY >= ry && canvasY <= ry + h) {
+                        return agent;
+                    }
+                }
+                else if (shape === "triangle") {
+                    // Simple bounding-box hit test for triangles
+                    var halfSize = size / 2;
+                    if (canvasX >= ax - halfSize &&
+                        canvasX <= ax + halfSize &&
+                        canvasY >= ay - halfSize &&
+                        canvasY <= ay + halfSize) {
+                        return agent;
+                    }
+                }
+                else {
+                    // Default: circle (and arrow) — distance-based hit test
+                    var dx = canvasX - ax;
+                    var dy = canvasY - ay;
+                    var hitRadius = Math.max(size, 4 * dpr); // minimum hit area for tiny agents
+                    if (dx * dx + dy * dy <= hitRadius * hitRadius) {
+                        return agent;
+                    }
+                }
+            }
+            return null;
+        };
+        /** @hidden */
+        CanvasRenderer.prototype._setupInteractiveListeners = function () {
+            var _this = this;
+            var onMouseDown = function (e) {
+                var agent = _this._agentAtPoint(e.clientX, e.clientY);
+                if (agent) {
+                    // Agent click — select it
+                    _this.selected = [agent];
+                    if (_this.opts.onSelect)
+                        _this.opts.onSelect(agent);
+                    _this._emit("click", agent, e);
+                    _this.render();
+                }
+                else {
+                    // Empty space — deselect and start panning
+                    if (_this.selected.length > 0) {
+                        _this.selected = [];
+                        if (_this.opts.onSelect)
+                            _this.opts.onSelect(null);
+                        _this.render();
+                    }
+                    _this._isPanning = true;
+                    _this._panStart = { x: e.clientX, y: e.clientY };
+                    _this._panOriginStart = { x: _this.opts.origin.x, y: _this.opts.origin.y };
+                }
+            };
+            var onMouseMove = function (e) {
+                if (_this._isPanning && _this._panStart && _this._panOriginStart) {
+                    var dpr = window.devicePixelRatio;
+                    var dx = e.clientX - _this._panStart.x;
+                    var dy = e.clientY - _this._panStart.y;
+                    _this.opts.origin = {
+                        x: _this._panOriginStart.x - dx / (_this.opts.scale * dpr),
+                        y: _this._panOriginStart.y - dy / (_this.opts.scale * dpr)
+                    };
+                    _this.render();
+                    return;
+                }
+                // Hover detection
+                var agent = _this._agentAtPoint(e.clientX, e.clientY);
+                if (agent !== _this._hoveredAgent) {
+                    if (_this._hoveredAgent) {
+                        _this._emit("unhover", _this._hoveredAgent, e);
+                    }
+                    if (agent) {
+                        _this._emit("hover", agent, e);
+                    }
+                    _this._hoveredAgent = agent;
+                }
+            };
+            var onMouseUp = function (e) {
+                _this._isPanning = false;
+                _this._panStart = null;
+                _this._panOriginStart = null;
+            };
+            var onWheel = function (e) {
+                e.preventDefault();
+                var _a = _this.opts, zoomMin = _a.zoomMin, zoomMax = _a.zoomMax;
+                var delta = e.deltaY > 0 ? 0.9 : 1.1;
+                var newScale = _this.opts.scale * delta;
+                newScale = Math.max(zoomMin, Math.min(zoomMax, newScale));
+                _this.opts.scale = newScale;
+                _this.render();
+            };
+            this._boundHandlers = { mousedown: onMouseDown, mousemove: onMouseMove, mouseup: onMouseUp, wheel: onWheel };
+            this.canvas.addEventListener("mousedown", onMouseDown);
+            this.canvas.addEventListener("mousemove", onMouseMove);
+            this.canvas.addEventListener("mouseup", onMouseUp);
+            this.canvas.addEventListener("wheel", onWheel, { passive: false });
+        };
         /** @hidden */
         CanvasRenderer.prototype.x = function (v) {
             var _a = this.opts, origin = _a.origin, scale = _a.scale;
@@ -4089,21 +4318,21 @@
         };
         /** @hidden */
         CanvasRenderer.prototype.drawPathWrap = function (points) {
-            var _this = this;
             var _a = this, width = _a.width, height = _a.height;
             var right = false;
             var left = false;
             var lower = false;
             var upper = false;
+            // points are already in DPR-scaled pixel space, so compare directly
             points.forEach(function (_a) {
                 var px = _a[0], py = _a[1];
-                if (_this.x(px) >= width)
+                if (px >= width)
                     right = true;
-                if (_this.x(px) < 0)
+                if (px < 0)
                     left = true;
-                if (_this.y(py) >= height)
+                if (py >= height)
                     lower = true;
-                if (_this.y(py) < 0)
+                if (py < 0)
                     upper = true;
             });
             if (right)
@@ -4132,24 +4361,26 @@
         /** @hidden */
         CanvasRenderer.prototype.drawCircleWrap = function (x, y, size) {
             var _a = this, width = _a.width, height = _a.height;
+            var worldWidth = this.opts.width;
+            var worldHeight = this.opts.height;
             if (this.x(x + size) >= width) {
-                this.drawCircle(x - width, y, size);
+                this.drawCircle(x - worldWidth, y, size);
                 if (this.y(y + size) >= height)
-                    this.drawCircle(x - width, y - height, size);
+                    this.drawCircle(x - worldWidth, y - worldHeight, size);
                 if (this.y(y - size) < 0)
-                    this.drawCircle(x - width, y + height, size);
+                    this.drawCircle(x - worldWidth, y + worldHeight, size);
             }
             if (this.x(x - size) < 0) {
-                this.drawCircle(x + width, y, size);
+                this.drawCircle(x + worldWidth, y, size);
                 if (this.y(y + size) >= height)
-                    this.drawCircle(x + width, y - height, size);
+                    this.drawCircle(x + worldWidth, y - worldHeight, size);
                 if (this.y(y - size) < 0)
-                    this.drawCircle(x + width, y + height, size);
+                    this.drawCircle(x + worldWidth, y + worldHeight, size);
             }
             if (this.y(y + size) > height)
-                this.drawCircle(x, y - height, size);
+                this.drawCircle(x, y - worldHeight, size);
             if (this.y(y - size) < 0)
-                this.drawCircle(x, y + height, size);
+                this.drawCircle(x, y + worldHeight, size);
         };
         /**
          * Draw a rectangle centered at (x, y). Automatically calculates the offset
@@ -4163,25 +4394,55 @@
         };
         /** @hidden */
         CanvasRenderer.prototype.drawRectWrap = function (x, y, w, h) {
-            var _a = this.opts, width = _a.width, height = _a.height;
+            var _a = this, width = _a.width, height = _a.height;
+            var worldWidth = this.opts.width;
+            var worldHeight = this.opts.height;
             if (this.x(x + w / 2) >= width) {
-                this.drawRect(x - width, y, w, h);
+                this.drawRect(x - worldWidth, y, w, h);
                 if (this.y(y + h / 2) >= height)
-                    this.drawRect(x - width, y - height, w, h);
-                if (this.y(y - height / 2) < 0)
-                    this.drawRect(x - width, y + height, w, h);
+                    this.drawRect(x - worldWidth, y - worldHeight, w, h);
+                if (this.y(y - h / 2) < 0)
+                    this.drawRect(x - worldWidth, y + worldHeight, w, h);
             }
             if (this.x(x - w / 2) < 0) {
-                this.drawRect(x + width, y, w, h);
+                this.drawRect(x + worldWidth, y, w, h);
                 if (this.y(y + h / 2) >= height)
-                    this.drawRect(x + width, y - height, w, h);
-                if (this.y(y - height / 2) < 0)
-                    this.drawRect(x + width, y + height, w, h);
+                    this.drawRect(x + worldWidth, y - worldHeight, w, h);
+                if (this.y(y - h / 2) < 0)
+                    this.drawRect(x + worldWidth, y + worldHeight, w, h);
             }
             if (this.y(y + h / 2) > height)
-                this.drawRect(x, y - height, w, h);
-            if (this.y(y - height / 2) < 0)
-                this.drawRect(x, y + height, w, h);
+                this.drawRect(x, y - worldHeight, w, h);
+            if (this.y(y - h / 2) < 0)
+                this.drawRect(x, y + worldHeight, w, h);
+        };
+        /**
+         * Draw a selection highlight around the given agent.
+         * @hidden
+         */
+        CanvasRenderer.prototype._drawSelectionHighlight = function (agent) {
+            var bufferContext = this.buffer.getContext("2d");
+            var dpr = window.devicePixelRatio;
+            var data = agent.getData();
+            var ax = this.x(data.x);
+            var ay = this.y(data.y);
+            var shape = data.shape;
+            var size = (data.size || 1) * dpr;
+            bufferContext.save();
+            bufferContext.strokeStyle = "#0af";
+            bufferContext.lineWidth = 2 * dpr;
+            if (shape === "rect") {
+                var w = (data.width || 1) * dpr;
+                var h = (data.height || 1) * dpr;
+                bufferContext.strokeRect(ax - w / 2 - 2 * dpr, ay - h / 2 - 2 * dpr, w + 4 * dpr, h + 4 * dpr);
+            }
+            else {
+                bufferContext.beginPath();
+                var highlightRadius = Math.max(size, 4 * dpr) + 3 * dpr;
+                bufferContext.arc(ax, ay, highlightRadius, 0, 2 * Math.PI);
+                bufferContext.stroke();
+            }
+            bufferContext.restore();
         };
         CanvasRenderer.prototype.render = function () {
             var _this = this;
@@ -4194,22 +4455,24 @@
             // if "trace" is truthy, don't clear the canvas with every frame
             // to trace the paths of agents
             if (!trace) {
-                context.clearRect(0, 0, width * dpr, height * dpr);
+                context.clearRect(0, 0, width, height);
                 context.fillStyle = opts.background;
-                context.fillRect(0, 0, width * dpr, height * dpr);
+                context.fillRect(0, 0, width, height);
             }
             // automatically position agents in an environment that uses a network helper
             if (opts.autoPosition && environment.helpers.network) {
                 environment.getAgents().forEach(function (agent) {
                     var network = _this.environment.helpers.network;
-                    var _a = _this, width = _a.width, height = _a.height;
+                    // Use CSS pixel dimensions (opts), not the DPI-scaled canvas dimensions,
+                    // since x() and y() already apply the devicePixelRatio transform.
+                    var _a = _this.opts, w = _a.width, h = _a.height;
                     // only set once
                     if ((agent.get("x") === null || agent.get("y") === null) &&
                         network.isInNetwork(agent)) {
                         var idx = network.indexOf(agent);
                         var angle = idx / network.agents.length;
-                        var x = width / 2 + 0.4 * width * Math.cos(2 * Math.PI * angle);
-                        var y = height / 2 + 0.4 * height * Math.sin(2 * Math.PI * angle);
+                        var x = w / 2 + 0.4 * w * Math.cos(2 * Math.PI * angle);
+                        var y = h / 2 + 0.4 * h * Math.sin(2 * Math.PI * angle);
                         agent.set({ x: x, y: y });
                     }
                 });
@@ -4254,8 +4517,8 @@
                         context.globalAlpha = _this.opts.connectionOpacity;
                         context.strokeStyle = _this.opts.connectionColor;
                         context.lineWidth = _this.opts.connectionWidth;
-                        context.moveTo(_this.x(x), _this.x(y));
-                        context.lineTo(_this.x(nx), _this.x(ny));
+                        context.moveTo(_this.x(x), _this.y(y));
+                        context.lineTo(_this.x(nx), _this.y(ny));
                         context.stroke();
                         context.closePath();
                         context.restore();
@@ -4287,10 +4550,11 @@
                 }
                 else if (shape === "triangle") {
                     bufferContext.beginPath();
+                    var scaledSize = size * dpr;
                     var points = [
-                        [_this.x(x), _this.y(y) - size / 2],
-                        [_this.x(x) + size / 2, _this.y(y) + size / 2],
-                        [_this.x(x) - size / 2, _this.y(y) + size / 2]
+                        [_this.x(x), _this.y(y) - scaledSize / 2],
+                        [_this.x(x) + scaledSize / 2, _this.y(y) + scaledSize / 2],
+                        [_this.x(x) - scaledSize / 2, _this.y(y) + scaledSize / 2]
                     ];
                     _this.drawPath(points);
                     if (environment.opts.torus)
@@ -4316,6 +4580,12 @@
                     bufferContext.restore();
                 }
             });
+            // Draw selection highlights for selected agents
+            if (opts.interactive && this.selected.length > 0) {
+                this.selected.forEach(function (agent) {
+                    _this._drawSelectionHighlight(agent);
+                });
+            }
             context.drawImage(buffer, 0, 0);
         };
         return CanvasRenderer;
@@ -4406,11 +4676,13 @@
         };
         Histogram.prototype.x = function (value) {
             var _a = this, width = _a.width, markerWidth = _a.markerWidth;
-            return remap(value, 0, width, markerWidth + PADDING_AT_LEFT, width - PADDING_AT_RIGHT);
+            var dpr = window.devicePixelRatio;
+            return remap(value, 0, width, markerWidth + PADDING_AT_LEFT * dpr, width - PADDING_AT_RIGHT * dpr);
         };
         Histogram.prototype.y = function (value) {
             var _a = this, height = _a.height, maxValue = _a.maxValue;
-            return remap(value, 0, maxValue, height - PADDING_AT_BOTTOM, 0);
+            var dpr = window.devicePixelRatio;
+            return remap(value, 0, maxValue, height - PADDING_AT_BOTTOM * dpr, 0);
         };
         Histogram.prototype.setMaxValue = function () {
             var _this = this;
@@ -4439,11 +4711,12 @@
             var context = this.canvas.getContext("2d");
             var _a = this, height = _a.height, width = _a.width;
             var _b = this.opts, aboveMax = _b.aboveMax, belowMin = _b.belowMin, buckets = _b.buckets, min = _b.min, max$1 = _b.max;
+            var dpr = window.devicePixelRatio;
             var yMin = 0;
             var yMax = this.maxValue;
             var markers = extractRoundNumbers({ min: yMin, max: yMax });
             context.fillStyle = "black";
-            context.font = 14 * window.devicePixelRatio + "px Helvetica";
+            context.font = 14 * dpr + "px Helvetica";
             // determine the width of the longest marker
             this.markerWidth = max(markers.map(function (marker) { return context.measureText(marker.toLocaleString()).width; }));
             // draw horizontal lines
@@ -4452,9 +4725,9 @@
                 context.textBaseline = "middle";
                 context.fillText(marker.toLocaleString(), _this.markerWidth, _this.y(marker));
                 context.beginPath();
-                context.moveTo(_this.markerWidth + 10, _this.y(marker));
+                context.moveTo(_this.markerWidth + 10 * dpr, _this.y(marker));
                 context.lineTo(_this.width, _this.y(marker));
-                context.setLineDash(LINE_DASH);
+                context.setLineDash(LINE_DASH.map(function (v) { return v * dpr; }));
                 context.stroke();
             });
             var numBuckets = bucketValues.length - (aboveMax ? 1 : 0) - (belowMin ? 1 : 0);
@@ -4477,9 +4750,9 @@
                 .forEach(function (label, i) {
                 context.save();
                 context.translate(_this.x((i * width) / bucketValues.length +
-                    (0.5 * width) / bucketValues.length), height - 50);
+                    (0.5 * width) / bucketValues.length), height - 50 * dpr);
                 context.rotate(Math.PI / 4);
-                context.font = 12 * window.devicePixelRatio + "px Helvetica";
+                context.font = 12 * dpr + "px Helvetica";
                 context.textAlign = "left";
                 context.textBaseline = "middle";
                 context.fillText(label, 0, 0);
@@ -4489,22 +4762,23 @@
         Histogram.prototype.drawBuckets = function (bucketValues, offset) {
             var _this = this;
             if (offset === void 0) { offset = 0; }
-            var canvas = this.canvas;
+            var _a = this, canvas = _a.canvas, width = _a.width, height = _a.height;
             var metric = this._metric;
             var numMetrics = Array.isArray(metric) ? metric.length : 1;
-            var _a = this.opts, aboveMax = _a.aboveMax, belowMin = _a.belowMin, color = _a.color, width = _a.width, height = _a.height;
+            var _b = this.opts, aboveMax = _b.aboveMax, belowMin = _b.belowMin, color = _b.color;
+            var dpr = window.devicePixelRatio;
             var context = canvas.getContext("2d");
             context.fillStyle = Array.isArray(color)
                 ? color[offset % color.length]
                 : color;
             var numBuckets = bucketValues.length;
-            var barWidth = (width - PADDING_AT_LEFT - PADDING_AT_RIGHT - this.markerWidth) /
+            var barWidth = (width - PADDING_AT_LEFT * dpr - PADDING_AT_RIGHT * dpr - this.markerWidth) /
                 numBuckets;
             barWidth *= 0.8;
             bucketValues.forEach(function (value, i) {
                 var mappedValue = remap(value, 0, _this.maxValue, 0, 1);
                 var x = _this.x(((0.1 + i) * width) / numBuckets);
-                context.fillRect(x + (offset * barWidth - (numMetrics - 1)) / numMetrics + offset, remap(mappedValue, 0, 1, height - PADDING_AT_BOTTOM, 0), barWidth / numMetrics, remap(mappedValue, 0, 1, 0, height - PADDING_AT_BOTTOM));
+                context.fillRect(x + (offset * barWidth - (numMetrics - 1)) / numMetrics + offset, remap(mappedValue, 0, 1, height - PADDING_AT_BOTTOM * dpr, 0), barWidth / numMetrics, remap(mappedValue, 0, 1, 0, height - PADDING_AT_BOTTOM * dpr));
             });
         };
         Histogram.prototype.getBucketValues = function (metric) {
@@ -4632,7 +4906,7 @@
             if (opts.autoScroll && t >= width) {
                 x -= t - width;
             }
-            else if (opts.autoScale && t >= width) {
+            else if (opts.autoScale) {
                 x *= width / t;
             }
             return x | 0;
@@ -4641,12 +4915,16 @@
             var height = this.height;
             var range = this.opts.range;
             var min = range.min, max = range.max;
-            var pxPerUnit = (height - 2 * PADDING_BOTTOM) / (max - min);
-            return Math.round(height - (value - min) * pxPerUnit) - 2 * PADDING_BOTTOM;
+            var dpr = window.devicePixelRatio;
+            var paddingBottom = PADDING_BOTTOM * dpr;
+            var pxPerUnit = (height - 2 * paddingBottom) / (max - min);
+            return Math.round(height - (value - min) * pxPerUnit) - 2 * paddingBottom;
         };
         LineChartRenderer.prototype.drawBackground = function () {
             var _this = this;
             var _a = this, context = _a.context, width = _a.width, height = _a.height, opts = _a.opts, t = _a.t;
+            var dpr = window.devicePixelRatio;
+            var paddingBottom = PADDING_BOTTOM * dpr;
             // draw background and lines
             context.fillStyle = this.opts.background;
             context.fillRect(0, 0, width, height);
@@ -4654,33 +4932,33 @@
             var markers = extractRoundNumbers(range);
             var textMaxWidth = 0;
             // write values on vertical axis
-            context.font = 14 * window.devicePixelRatio + "px Helvetica";
+            context.font = 14 * dpr + "px Helvetica";
             context.fillStyle = "#000";
             context.textBaseline = "middle";
             markers.forEach(function (marker) {
-                if (_this.y(marker) < 10 || _this.y(marker) + 10 > height)
+                if (_this.y(marker) < 10 * dpr || _this.y(marker) + 10 * dpr > height)
                     return;
                 var width = context.measureText(marker.toLocaleString()).width;
                 if (width > textMaxWidth)
                     textMaxWidth = width;
-                context.fillText(marker.toLocaleString(), 5, _this.y(marker));
+                context.fillText(marker.toLocaleString(), 5 * dpr, _this.y(marker));
             });
             // draw horizontal lines for vertical axis
             context.save();
             context.strokeStyle = "#999";
             markers.forEach(function (marker) {
-                if (_this.y(marker) >= height - PADDING_BOTTOM)
+                if (_this.y(marker) >= height - paddingBottom)
                     return;
                 context.beginPath();
-                context.moveTo(textMaxWidth + 10, _this.y(marker));
+                context.moveTo(textMaxWidth + 10 * dpr, _this.y(marker));
                 context.lineTo(_this.x(Math.max(width, _this.environment.time)), _this.y(marker));
-                context.setLineDash(lineDash);
+                context.setLineDash(lineDash.map(function (v) { return v * dpr; }));
                 context.stroke();
             });
             context.restore();
             // draw time values for horizontal axis
             var min = opts.autoScroll && t >= width ? t - width : 0;
-            var max = opts.autoScale && t >= width ? t : width;
+            var max = opts.autoScale ? Math.max(t, 5) : width;
             var timeRange = { min: min, max: max };
             var timeMarkers = extractRoundNumbers(timeRange);
             context.save();
@@ -4691,12 +4969,12 @@
                     _this.x(marker) - width / 2 < textMaxWidth) {
                     return;
                 }
-                context.font = 11 * window.devicePixelRatio + "px Helvetica";
-                context.fillText(marker.toLocaleString(), _this.x(marker), height - PADDING_BOTTOM);
+                context.font = 11 * dpr + "px Helvetica";
+                context.fillText(marker.toLocaleString(), _this.x(marker), height - paddingBottom);
                 context.strokeStyle = "black";
                 context.lineWidth = 1;
                 context.beginPath();
-                context.moveTo(_this.x(marker), height - 4);
+                context.moveTo(_this.x(marker), height - 4 * dpr);
                 context.lineTo(_this.x(marker), height);
                 context.stroke();
             });
@@ -5044,7 +5322,8 @@
          */
         Heatmap.prototype.x = function (value) {
             var width = this.width;
-            return remap(value, this.getMin("x"), this.getMax("x"), PADDING_AT_LEFT$1, width);
+            var dpr = window.devicePixelRatio;
+            return remap(value, this.getMin("x"), this.getMax("x"), PADDING_AT_LEFT$1 * dpr, width);
         };
         /**
          * Map a value (on the range y-min to y-max) onto canvas space to draw it along the y-axis.
@@ -5052,7 +5331,8 @@
          */
         Heatmap.prototype.y = function (value) {
             var height = this.height;
-            return remap(value, this.getMin("y"), this.getMax("y"), height - PADDING_AT_BOTTOM$1, 0);
+            var dpr = window.devicePixelRatio;
+            return remap(value, this.getMin("y"), this.getMax("y"), height - PADDING_AT_BOTTOM$1 * dpr, 0);
         };
         /** @hidden */
         Heatmap.prototype.getKey = function (axis) {
@@ -5095,52 +5375,55 @@
         Heatmap.prototype.drawMarkers = function () {
             var _a = this, context = _a.context, width = _a.width, height = _a.height;
             var _b = this.opts, from = _b.from, to = _b.to;
+            var dpr = window.devicePixelRatio;
+            var padLeft = PADDING_AT_LEFT$1 * dpr;
+            var padBottom = PADDING_AT_BOTTOM$1 * dpr;
             context.strokeStyle = "black";
             context.lineWidth = 1;
-            context.moveTo(PADDING_AT_LEFT$1 - 1, 0);
-            context.lineTo(PADDING_AT_LEFT$1 - 1, height - PADDING_AT_BOTTOM$1 + 1);
-            context.lineTo(width, height - PADDING_AT_BOTTOM$1 + 1);
+            context.moveTo(padLeft - 1, 0);
+            context.lineTo(padLeft - 1, height - padBottom + 1);
+            context.lineTo(width, height - padBottom + 1);
             context.stroke();
             context.lineWidth = 0;
-            var gradient = context.createLinearGradient(10, 0, PADDING_AT_LEFT$1 - 10, 0);
+            var gradient = context.createLinearGradient(10 * dpr, 0, padLeft - 10 * dpr, 0);
             gradient.addColorStop(0, from);
             gradient.addColorStop(1, to);
             context.fillStyle = gradient;
-            context.fillRect(10, height - PADDING_AT_BOTTOM$1 + 20, PADDING_AT_LEFT$1 - 24, 20);
+            context.fillRect(10 * dpr, height - padBottom + 20 * dpr, padLeft - 24 * dpr, 20 * dpr);
             context.fillStyle = "black";
             var step = (this.getMax("x") - this.getMin("x")) / this.getBuckets("x");
             var originalStep = step;
-            while (Math.abs(this.x(step) - this.x(0)) < 35)
+            while (Math.abs(this.x(step) - this.x(0)) < 35 * dpr)
                 step *= 2;
             for (var marker = this.getMin("x"); marker <= this.getMax("x"); marker += originalStep) {
-                if (this.x(marker) + 10 > width)
+                if (this.x(marker) + 10 * dpr > width)
                     continue;
-                context.moveTo(this.x(marker), height - PADDING_AT_BOTTOM$1);
-                context.lineTo(this.x(marker), height - PADDING_AT_BOTTOM$1 + 10);
+                context.moveTo(this.x(marker), height - padBottom);
+                context.lineTo(this.x(marker), height - padBottom + 10 * dpr);
                 context.stroke();
                 if (Math.abs(((marker - this.getMin("x")) / step) % 1) < 0.001 ||
                     Math.abs((((marker - this.getMin("x")) / step) % 1) - 1) < 0.001) {
-                    context.font = 12 * window.devicePixelRatio + "px Helvetica";
+                    context.font = 12 * dpr + "px Helvetica";
                     context.textAlign = "center";
-                    context.fillText(marker.toLocaleString(), this.x(marker), height - PADDING_AT_BOTTOM$1 + 24);
+                    context.fillText(marker.toLocaleString(), this.x(marker), height - padBottom + 24 * dpr);
                 }
             }
             step = (this.getMax("y") - this.getMin("y")) / this.getBuckets("y");
             originalStep = step;
-            while (Math.abs(this.y(step) - this.y(0)) < 20)
+            while (Math.abs(this.y(step) - this.y(0)) < 20 * dpr)
                 step *= 2;
             for (var marker = this.getMin("y"); marker <= this.getMax("y"); marker += originalStep) {
-                if (this.y(marker) - 10 < 0)
+                if (this.y(marker) - 10 * dpr < 0)
                     continue;
-                context.moveTo(PADDING_AT_LEFT$1, this.y(marker));
-                context.lineTo(PADDING_AT_LEFT$1 - 10, this.y(marker));
+                context.moveTo(padLeft, this.y(marker));
+                context.lineTo(padLeft - 10 * dpr, this.y(marker));
                 context.stroke();
                 if (Math.abs(((marker - this.getMin("y")) / step) % 1) < 0.001 ||
                     Math.abs((((marker - this.getMin("y")) / step) % 1) - 1) < 0.001) {
-                    context.font = 12 * window.devicePixelRatio + "px Helvetica";
+                    context.font = 12 * dpr + "px Helvetica";
                     context.textAlign = "right";
                     context.textBaseline = "middle";
-                    context.fillText(marker.toLocaleString(), PADDING_AT_LEFT$1 - 14, this.y(marker));
+                    context.fillText(marker.toLocaleString(), padLeft - 14 * dpr, this.y(marker));
                 }
             }
         };
@@ -5148,6 +5431,8 @@
         Heatmap.prototype.updateScale = function () {
             var _a = this, context = _a.context, environment = _a.environment, height = _a.height;
             var scale = this.opts.scale;
+            var dpr = window.devicePixelRatio;
+            var padLeft = PADDING_AT_LEFT$1 * dpr;
             var max = scale === "relative" ? this.localMax : this.opts.max;
             if (max === undefined) {
                 if (!this.lastUpdatedScale) {
@@ -5156,13 +5441,13 @@
                 max = environment.getAgents().length;
             }
             if (!this.lastUpdatedScale || +new Date() - +this.lastUpdatedScale > 250) {
-                context.clearRect(0, height - 20, PADDING_AT_LEFT$1, 20);
+                context.clearRect(0, height - 20 * dpr, padLeft, 20 * dpr);
                 context.fillStyle = "black";
-                context.font = 12 * window.devicePixelRatio + "px Helvetica";
+                context.font = 12 * dpr + "px Helvetica";
                 context.textAlign = "center";
                 context.textBaseline = "bottom";
-                context.fillText("0", 10, height - 5);
-                context.fillText(max.toString(), PADDING_AT_LEFT$1 - 16, height - 5);
+                context.fillText("0", 10 * dpr, height - 5 * dpr);
+                context.fillText(max.toString(), padLeft - 16 * dpr, height - 5 * dpr);
                 this.lastUpdatedScale = new Date();
             }
         };
@@ -5170,6 +5455,9 @@
         Heatmap.prototype.drawRectangles = function () {
             var _a = this, canvas = _a.canvas, environment = _a.environment, width = _a.width, height = _a.height;
             var _b = this.opts, scale = _b.scale, from = _b.from, to = _b.to;
+            var dpr = window.devicePixelRatio;
+            var padLeft = PADDING_AT_LEFT$1 * dpr;
+            var padBottom = PADDING_AT_BOTTOM$1 * dpr;
             var context = canvas.getContext("2d");
             var xBuckets = this.getBuckets("x");
             var yBuckets = this.getBuckets("y");
@@ -5178,9 +5466,9 @@
                 max = environment.getAgents().length;
             // clear background by drawing background rectangle
             context.fillStyle = from;
-            context.fillRect(PADDING_AT_LEFT$1, 0, width, height - PADDING_AT_BOTTOM$1);
-            var w = width / xBuckets;
-            var h = height / yBuckets;
+            context.fillRect(padLeft, 0, width - padLeft, height - padBottom);
+            var w = (width - padLeft) / xBuckets;
+            var h = (height - padBottom) / yBuckets;
             for (var row = 0; row < yBuckets; row++) {
                 for (var column = 0; column < xBuckets; column++) {
                     var index = row * xBuckets + column;
@@ -5188,7 +5476,7 @@
                     var a = clamp(remap(this.buckets[index], 0, max, 0, 1), 0, 1);
                     context.fillStyle = to;
                     context.globalAlpha = a;
-                    context.fillRect(this.x(remap(column, 0, xBuckets, this.getMin("x"), this.getMax("x"))), this.y(remap(row, -1, yBuckets - 1, this.getMin("y"), this.getMax("y"))), (w * (width - PADDING_AT_LEFT$1)) / width, (h * (height - PADDING_AT_BOTTOM$1)) / height);
+                    context.fillRect(this.x(remap(column, 0, xBuckets, this.getMin("x"), this.getMax("x"))), this.y(remap(row, -1, yBuckets - 1, this.getMin("y"), this.getMax("y"))), w, h);
                 }
             }
             context.globalAlpha = 1;
@@ -5244,7 +5532,7 @@
     /**
      * The current version of the Flocc library.
      */
-    var version = "0.5.20";
+    var version = "0.5.22";
 
     exports.ASCIIRenderer = ASCIIRenderer;
     exports.Agent = Agent;