flocc 0.5.21 → 0.5.22

package/dist/flocc.es.js

@@ -3212,6 +3212,15 @@ var Environment = /** @class */ (function (_super) {
          * 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
@@ -3381,6 +3390,9 @@ var Environment = /** @class */ (function (_super) {
      * @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") {
@@ -3448,6 +3460,47 @@ var Environment = /** @class */ (function (_super) {
         }
         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}
@@ -3984,7 +4037,10 @@ var defaultOptions = {
     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.
@@ -4004,6 +4060,12 @@ var defaultOptions = {
  * - `"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) {
@@ -4019,15 +4081,33 @@ var CanvasRenderer = /** @class */ (function (_super) {
      * - `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);
@@ -4044,9 +4124,158 @@ var CanvasRenderer = /** @class */ (function (_super) {
         _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;
@@ -4083,21 +4312,21 @@ var CanvasRenderer = /** @class */ (function (_super) {
     };
     /** @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)
@@ -4126,24 +4355,26 @@ var CanvasRenderer = /** @class */ (function (_super) {
     /** @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
@@ -4157,25 +4388,55 @@ var CanvasRenderer = /** @class */ (function (_super) {
     };
     /** @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;
@@ -4188,22 +4449,24 @@ var CanvasRenderer = /** @class */ (function (_super) {
         // 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 });
                 }
             });
@@ -4248,8 +4511,8 @@ var CanvasRenderer = /** @class */ (function (_super) {
                     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();
@@ -4281,10 +4544,11 @@ var CanvasRenderer = /** @class */ (function (_super) {
             }
             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)
@@ -4310,6 +4574,12 @@ var CanvasRenderer = /** @class */ (function (_super) {
                 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;
@@ -4400,11 +4670,13 @@ var Histogram = /** @class */ (function (_super) {
     };
     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;
@@ -4433,11 +4705,12 @@ var Histogram = /** @class */ (function (_super) {
         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
@@ -4446,9 +4719,9 @@ var Histogram = /** @class */ (function (_super) {
             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);
@@ -4471,9 +4744,9 @@ var Histogram = /** @class */ (function (_super) {
             .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);
@@ -4483,22 +4756,23 @@ var Histogram = /** @class */ (function (_super) {
     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) {
@@ -4635,12 +4909,16 @@ var LineChartRenderer = /** @class */ (function (_super) {
         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);
@@ -4648,27 +4926,27 @@ var LineChartRenderer = /** @class */ (function (_super) {
         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();
@@ -4685,12 +4963,12 @@ var LineChartRenderer = /** @class */ (function (_super) {
                 _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();
         });
@@ -5038,7 +5316,8 @@ var Heatmap = /** @class */ (function (_super) {
      */
     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.
@@ -5046,7 +5325,8 @@ var Heatmap = /** @class */ (function (_super) {
      */
     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) {
@@ -5089,52 +5369,55 @@ var Heatmap = /** @class */ (function (_super) {
     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));
             }
         }
     };
@@ -5142,6 +5425,8 @@ var Heatmap = /** @class */ (function (_super) {
     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) {
@@ -5150,13 +5435,13 @@ var Heatmap = /** @class */ (function (_super) {
             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();
         }
     };
@@ -5164,6 +5449,9 @@ var Heatmap = /** @class */ (function (_super) {
     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");
@@ -5172,9 +5460,9 @@ var Heatmap = /** @class */ (function (_super) {
             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;
@@ -5182,7 +5470,7 @@ var Heatmap = /** @class */ (function (_super) {
                 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;
@@ -5238,6 +5526,6 @@ var Heatmap = /** @class */ (function (_super) {
 /**
  * The current version of the Flocc library.
  */
-var version = "0.5.21";
+var version = "0.5.22";
 
 export { ASCIIRenderer, Agent, CanvasRenderer, Colors, Environment, GridEnvironment, Heatmap, Histogram, KDTree, LineChartRenderer, Network, NumArray, Rule, TableRenderer, Terrain, version as VERSION, Vector, utils };