flocc 0.5.21 → 0.5.23

package/dist/flocc.js

@@ -823,7 +823,37 @@
         Operators["agent"] = "agent";
         Operators["environment"] = "environment";
         Operators["vector"] = "vector";
+        Operators["log"] = "log";
     })(Operators || (Operators = {}));
+    var operatorInfo = {
+        add: { min: 2, max: 2 },
+        subtract: { min: 2, max: 2 },
+        multiply: { min: 2, max: 2 },
+        divide: { min: 2, max: 2 },
+        mod: { min: 2, max: 2 },
+        power: { min: 2, max: 2 },
+        get: { min: 1, max: 1 },
+        set: { min: 2, max: 2 },
+        enqueue: { min: 2, max: 2 },
+        local: { min: 1, max: 2 },
+        if: { min: 2, max: 3 },
+        and: { min: 2, max: 2 },
+        or: { min: 2, max: 2 },
+        gt: { min: 2, max: 2 },
+        gte: { min: 2, max: 2 },
+        lt: { min: 2, max: 2 },
+        lte: { min: 2, max: 2 },
+        eq: { min: 2, max: 2 },
+        map: { min: 2, max: 2 },
+        filter: { min: 2, max: 2 },
+        key: { min: 2, max: 2 },
+        method: { min: 2, max: Infinity },
+        agent: { min: 0, max: 0 },
+        environment: { min: 0, max: 0 },
+        vector: { min: 1, max: Infinity },
+        log: { min: 1, max: Infinity }
+    };
+    var ARITHMETIC_OPS = new Set(["add", "subtract", "multiply", "divide", "mod", "power"]);
     var add = function (a, b) { return a + b; };
     var subtract = function (a, b) { return a - b; };
     var multiply = function (a, b) { return a * b; };
@@ -847,6 +877,127 @@
             return null;
         return obj[name].apply(obj, args);
     };
+    /**
+     * Format a single value for step display. If isFirst is true and the value is
+     * a known operator string, render it bare (unquoted).
+     */
+    function formatStepValue(val, isFirst) {
+        if (val === null || val === undefined)
+            return String(val);
+        if (typeof val === "number" || typeof val === "boolean")
+            return String(val);
+        if (typeof val === "string") {
+            if (isFirst && val in Operators)
+                return val;
+            return JSON.stringify(val);
+        }
+        if (val instanceof Array) {
+            if (val.length === 0)
+                return "[]";
+            var parts = val.map(function (s, i) { return formatStepValue(s, i === 0); });
+            return "(" + parts.join(" ") + ")";
+        }
+        if (typeof val === "object") {
+            try {
+                return JSON.stringify(val);
+            }
+            catch (_a) {
+                return String(val);
+            }
+        }
+        return String(val);
+    }
+    /**
+     * Format a step into a readable string representation for logging.
+     */
+    function formatStep(step) {
+        return formatStepValue(step, false);
+    }
+    /**
+     * Format a value as an S-expression atom (no recursion into arrays).
+     */
+    function formatAtom(val) {
+        if (val === null || val === undefined)
+            return "null";
+        if (typeof val === "number" || typeof val === "boolean")
+            return String(val);
+        if (typeof val === "string")
+            return JSON.stringify(val);
+        if (typeof val === "object" && !Array.isArray(val)) {
+            try {
+                return JSON.stringify(val);
+            }
+            catch (_a) {
+                return "[object]";
+            }
+        }
+        return String(val);
+    }
+    /**
+     * Format a value for S-expression display. The first element (operator) of
+     * a step is rendered as a bare identifier; other string values are quoted.
+     */
+    function formatSexpValue(val, isOperator) {
+        if (isOperator && typeof val === "string")
+            return val;
+        return formatAtom(val);
+    }
+    /**
+     * Pretty-print a single step as an S-expression with width-based wrapping.
+     */
+    function prettyFormatStep(step, indentUnit, maxLineWidth, currentIndent) {
+        if (!Array.isArray(step))
+            return formatAtom(step);
+        if (step.length === 0)
+            return "()";
+        // Try compact first
+        var compact = "(" + step.map(function (s, i) {
+            if (Array.isArray(s))
+                return prettyFormatStep(s, indentUnit, Infinity, "");
+            return formatSexpValue(s, i === 0);
+        }).join(" ") + ")";
+        if (currentIndent.length + compact.length <= maxLineWidth)
+            return compact;
+        // Wrap: operator on first line, each arg indented
+        var op = Array.isArray(step[0]) ? prettyFormatStep(step[0], indentUnit, maxLineWidth, currentIndent) : formatSexpValue(step[0], true);
+        var args = step.slice(1);
+        if (args.length === 0)
+            return "(" + op + ")";
+        var childIndent = currentIndent + indentUnit;
+        var formattedArgs = args.map(function (a) { return prettyFormatStep(a, indentUnit, maxLineWidth, childIndent); });
+        return "(" + op + "\n" + formattedArgs.map(function (a) { return childIndent + a; }).join("\n") + ")";
+    }
+    function validOperatorNames() {
+        return Object.keys(operatorInfo).join(", ");
+    }
+    function checkArity(op, argCount, strict) {
+        if (strict === void 0) { strict = false; }
+        var info = operatorInfo[op];
+        if (!info)
+            return null;
+        if (info.min === info.max) {
+            if (argCount < info.min) {
+                return "Rule: \"" + op + "\" expects " + info.min + " argument" + (info.min !== 1 ? "s" : "") + ", got " + argCount;
+            }
+            if (strict && argCount > info.max) {
+                return "Rule: \"" + op + "\" expects " + info.min + " argument" + (info.min !== 1 ? "s" : "") + ", got " + argCount;
+            }
+        }
+        else if (info.max === Infinity) {
+            if (argCount < info.min) {
+                return "Rule: \"" + op + "\" expects at least " + info.min + " argument" + (info.min !== 1 ? "s" : "") + ", got " + argCount;
+            }
+        }
+        else {
+            if (argCount < info.min) {
+                return "Rule: \"" + op + "\" expects " + info.min + "-" + info.max + " arguments, got " + argCount;
+            }
+            if (strict && argCount > info.max) {
+                return "Rule: \"" + op + "\" expects " + info.min + "-" + info.max + " arguments, got " + argCount;
+            }
+        }
+        return null;
+    }
     /**
      * The `Rule` class is an experimental interface for adding behavior to {@linkcode Agent}s. A `Rule` object may be used in place of a `tick` function to be added as `Agent` behavior using `agent.set('tick', tickRule)`. As a trivial example, consider the following `Rule`, which increments the `Agent`'s `x` value with every time step:
      *
@@ -901,6 +1052,7 @@
          * |`"agent"`|`0`|No arguments; returns the `Agent`|
          * |`"environment"`|`0`|No arguments, returns the `Environment`|
          * |`"vector"`|`any`|Creates an n-dimensional {@linkcode Vector} from the supplied arguments|
+         * |`"log"`|`any`|Logs expression(s) and returns the last evaluated value|
          */
         function Rule(environment, steps) {
             var _this = this;
@@ -909,10 +1061,12 @@
             /** @hidden */
             this.locals = {};
             /**
-             * interpret single array step
-             * @since 0.3.0
-             * @hidden
+             * When true, evaluation traces are logged and captured.
              */
+            this.trace = false;
+            this.traceLog = [];
+            /** @hidden */
+            this._traceDepth = 0;
             this.evaluate = function (agent, step) {
                 var first = step && step.length > 0 ? step[0] : null;
                 if (first === undefined || first === null)
@@ -923,30 +1077,79 @@
                         return _this.evaluate(agent, step.slice(1));
                     return innerStep;
                 }
-                if (first === "log") {
-                    console.log("logging", step.slice(1), _this.evaluate(agent, step.slice(1)));
-                    return null;
+                // Trace: check if this is a known operator call to trace
+                var shouldTrace = _this.trace && typeof first === "string" && first in Operators;
+                if (shouldTrace)
+                    _this._traceDepth++;
+                var result = _this._evaluateOp(agent, step, first);
+                if (shouldTrace) {
+                    _this._traceLogEntry(step, result);
+                    _this._traceDepth--;
+                }
+                return result;
+            };
+            /** @hidden */
+            this._evaluateOp = function (agent, step, first) {
+                if (first === Operators.log) {
+                    var args = step.slice(1);
+                    if (args.length === 0) {
+                        console.warn("Rule: \"log\" expects at least 1 argument, got 0");
+                        return null;
+                    }
+                    var lastValue = null;
+                    for (var i = 0; i < args.length; i++) {
+                        var expr = args[i];
+                        var evaluated = _this.evaluate(agent, [expr]);
+                        console.log("Rule log: " + formatStep(expr) + " \u2192 " + formatStep(evaluated));
+                        lastValue = evaluated;
+                    }
+                    return lastValue;
                 }
                 if (!(first in Operators) && step.length > 1) {
+                    if (typeof first === "string") {
+                        console.warn("Rule: unknown operator \"" + first + "\". Valid operators: " + validOperatorNames());
+                    }
                     return step;
                 }
+                var argCount = step.length - 1;
+                // Arity check at runtime for known operators
+                if (typeof first === "string" && first in Operators) {
+                    var arityMsg = checkArity(first, argCount);
+                    if (arityMsg) {
+                        console.warn(arityMsg);
+                    }
+                }
                 var a = step.length > 1 ? [step[1]] : undefined;
                 var b = step.length > 2 ? [step[2]] : undefined;
                 var c = step.length > 3 ? [step[3]] : undefined;
-                if (first === Operators.add)
-                    return add(_this.evaluate(agent, a), _this.evaluate(agent, b));
-                if (first === Operators.subtract)
-                    return subtract(_this.evaluate(agent, a), _this.evaluate(agent, b));
-                if (first === Operators.multiply)
-                    return multiply(_this.evaluate(agent, a), _this.evaluate(agent, b));
-                if (first === Operators.divide)
-                    return divide(_this.evaluate(agent, a), _this.evaluate(agent, b));
-                if (first === Operators.mod)
-                    return mod(_this.evaluate(agent, a), _this.evaluate(agent, b));
-                if (first === Operators.power)
-                    return power(_this.evaluate(agent, a), _this.evaluate(agent, b));
-                if (first === Operators.get)
-                    return get(agent, _this.evaluate(agent, a));
+                // Arithmetic operators with type checking
+                if (ARITHMETIC_OPS.has(first)) {
+                    var va = _this.evaluate(agent, a);
+                    var vb = _this.evaluate(agent, b);
+                    if (typeof va !== "number" || typeof vb !== "number") {
+                        console.warn("Rule: \"" + first + "\" expects numeric arguments, got " + typeof va + " and " + typeof vb);
+                    }
+                    if (first === Operators.add)
+                        return add(va, vb);
+                    if (first === Operators.subtract)
+                        return subtract(va, vb);
+                    if (first === Operators.multiply)
+                        return multiply(va, vb);
+                    if (first === Operators.divide)
+                        return divide(va, vb);
+                    if (first === Operators.mod)
+                        return mod(va, vb);
+                    if (first === Operators.power)
+                        return power(va, vb);
+                }
+                if (first === Operators.get) {
+                    var keyName = _this.evaluate(agent, a);
+                    var result = get(agent, keyName);
+                    if (result === null || result === undefined) {
+                        console.warn("Rule: \"get\" returned null for key \"" + keyName + "\" \u2014 key may not exist on agent");
+                    }
+                    return result;
+                }
                 if (first === Operators.set)
                     return set(agent, _this.evaluate(agent, a), _this.evaluate(agent, b));
                 if (first === Operators.enqueue) {
@@ -1034,13 +1237,151 @@
             this.environment = environment;
             this.steps = steps;
         }
+        /**
+         * Format arbitrary steps as pretty-printed S-expressions.
+         */
+        Rule.formatSteps = function (steps, options) {
+            var indent = (options && options.indent) || "  ";
+            var maxLineWidth = (options && options.maxLineWidth) || 60;
+            // Check if it's multi-step (array of arrays)
+            var isMultiStep = steps.length > 0 && Array.isArray(steps[0]);
+            if (isMultiStep) {
+                return steps.map(function (s) { return prettyFormatStep(s, indent, maxLineWidth, ""); }).join("\n\n");
+            }
+            return prettyFormatStep(steps, indent, maxLineWidth, "");
+        };
+        /**
+         * Pretty-print the rule's step tree as S-expressions.
+         */
+        Rule.prototype.format = function (options) {
+            return Rule.formatSteps(this.steps, options);
+        };
+        /**
+         * Returns a formatted S-expression representation of the rule.
+         */
+        Rule.prototype.toString = function () {
+            return this.format();
+        };
+        /**
+         * Validate the rule's step tree and return an array of diagnostics.
+         * Does not throw — returns diagnostics for inspection.
+         * @since 0.6.0
+         */
+        Rule.prototype.validate = function () {
+            var diagnostics = [];
+            if (!this.steps || (Array.isArray(this.steps) && this.steps.length === 0)) {
+                diagnostics.push({
+                    path: "root",
+                    level: "warning",
+                    message: "Empty steps array"
+                });
+                return diagnostics;
+            }
+            // Check if steps is a single step (first element is a string operator)
+            // or an array of steps (first element is an array)
+            var isMultiStep = Array.isArray(this.steps[0]);
+            if (isMultiStep) {
+                // Multiple top-level steps
+                for (var i = 0; i < this.steps.length; i++) {
+                    var step = this.steps[i];
+                    if (!Array.isArray(step)) {
+                        diagnostics.push({
+                            path: "[" + i + "]",
+                            level: "warning",
+                            message: "Step is a bare value (" + typeof step + ": " + JSON.stringify(step) + ") instead of an array"
+                        });
+                    }
+                    else {
+                        this._validateStep(step, "[" + i + "]", diagnostics);
+                    }
+                }
+            }
+            else {
+                // Single step (the steps array IS the step)
+                this._validateStep(this.steps, "root", diagnostics);
+            }
+            return diagnostics;
+        };
+        /** @hidden */
+        Rule.prototype._validateStep = function (step, path, diagnostics) {
+            if (step.length === 0) {
+                diagnostics.push({
+                    path: path,
+                    level: "warning",
+                    message: "Empty step array"
+                });
+                return;
+            }
+            var first = step[0];
+            // If first element is an array, it's a nested step sequence
+            if (Array.isArray(first)) {
+                this._validateStep(first, path + "[0]", diagnostics);
+                for (var i = 1; i < step.length; i++) {
+                    if (Array.isArray(step[i])) {
+                        this._validateStep(step[i], path + ("[" + i + "]"), diagnostics);
+                    }
+                }
+                return;
+            }
+            if (typeof first === "string") {
+                var argCount = step.length - 1;
+                // Check if operator is known
+                if (!(first in Operators)) {
+                    if (step.length > 1) {
+                        diagnostics.push({
+                            path: path,
+                            level: "error",
+                            message: "Unknown operator \"" + first + "\". Valid operators: " + validOperatorNames()
+                        });
+                    }
+                    return;
+                }
+                // Check arity (strict: also warn on too many args)
+                var arityMsg = checkArity(first, argCount, true);
+                if (arityMsg) {
+                    diagnostics.push({
+                        path: path,
+                        level: "error",
+                        message: arityMsg
+                    });
+                }
+                // Recurse into sub-steps
+                for (var i = 1; i < step.length; i++) {
+                    if (Array.isArray(step[i])) {
+                        this._validateStep(step[i], path + ("[" + i + "]"), diagnostics);
+                    }
+                }
+            }
+        };
+        /**
+         * interpret single array step
+         * @since 0.3.0
+         * @hidden
+         */
+        /** @hidden */
+        Rule.prototype._traceLogEntry = function (step, result) {
+            var indent = "  ".repeat(this._traceDepth - 1);
+            var formatted = formatStep(step);
+            var resultFormatted = formatStep(result);
+            var line = "Rule trace: " + indent + formatted + " \u2192 " + resultFormatted;
+            console.log(line);
+            this.traceLog.push(line);
+        };
         /**
          * @since 0.3.0
          * @hidden
          */
         Rule.prototype.call = function (agent) {
+            if (this.trace) {
+                this.traceLog = [];
+                this._traceDepth = 0;
+            }
             return this.evaluate(agent, this.steps);
         };
+        /**
+         * Static operator info mapping operator names to their expected argument counts.
+         */
+        Rule.operatorInfo = operatorInfo;
         return Rule;
     }());
 
@@ -3218,6 +3559,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 +3737,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 +3807,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 +4384,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 +4407,12 @@
      * - `"triangle"` &mdash; 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** &mdash; Use {@linkcode on} to listen for `"click"`, `"hover"`, and `"unhover"` events on agents.
+     * - **Agent selection** &mdash; Clicking an agent selects it (highlighted with a stroke). Access selected agents via {@linkcode selected}.
+     * - **Pan** &mdash; Click and drag on empty space to pan.
+     * - **Zoom** &mdash; Scroll to zoom in/out (bounded by `zoomMin` / `zoomMax`).
+     *
      * @since 0.0.11
      */
     var CanvasRenderer = /** @class */ (function (_super) {
@@ -4025,15 +4428,33 @@
          * - `connectionOpacity` (*number* = `1`) &mdash; For `Environment`s using a `Network`, the opacity of lines
          * - `connectionWidth` (*number* = `1`) &mdash; For `Environment`s using a `Network`, the width of lines
          * - `height` (*number* = `500`) &mdash; The height, in pixels, of the canvas on which to render
+         * - `interactive` (*boolean* = `false`) &mdash; Enables interactive features (click/hover detection, selection, pan, zoom)
+         * - `onSelect` (*function*) &mdash; Optional callback when an agent is selected or deselected
          * - `origin` (*{ x: number; y: number }* = `{ x: 0, y: 0 }`) &mdash; The coordinate of the upper-left point of the space to be rendered
          * - `scale` (*number* = `1`) &mdash; The scale at which to render (the larger the scale, the smaller the size of the space that is actually rendered)
          * - `trace` (*boolean* = `false`) &mdash; If `true`, the renderer will not clear old drawings, causing the `Agent`s to appear to *trace* their paths across space
          * - `width` (*number* = `500`) &mdash; The width, in pixels, of the canvas on which to render
+         * - `zoomMin` (*number* = `0.1`) &mdash; Minimum scale when zooming
+         * - `zoomMax` (*number* = `10`) &mdash; 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 +4471,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 +4659,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 +4702,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 +4735,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 +4796,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 +4858,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 +4891,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 +4921,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 +5017,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 +5052,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 +5066,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 +5091,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 +5103,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) {
@@ -4641,12 +5256,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,27 +5273,27 @@
             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();
@@ -4691,12 +5310,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 +5663,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 +5672,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 +5716,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 +5772,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 +5782,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 +5796,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 +5807,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 +5817,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 +5873,7 @@
     /**
      * The current version of the Flocc library.
      */
-    var version = "0.5.21";
+    var version = "0.5.23";
 
     exports.ASCIIRenderer = ASCIIRenderer;
     exports.Agent = Agent;