flocc 0.5.21 → 0.5.23

package/dist/flocc.es.js

@@ -817,7 +817,37 @@ var Operators;
     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; };
@@ -841,6 +871,127 @@ var method = function (obj, name) {
         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:
  *
@@ -895,6 +1046,7 @@ var Rule = /** @class */ (function () {
      * |`"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;
@@ -903,10 +1055,12 @@ var Rule = /** @class */ (function () {
         /** @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)
@@ -917,30 +1071,79 @@ var Rule = /** @class */ (function () {
                     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) {
@@ -1028,13 +1231,151 @@ var Rule = /** @class */ (function () {
         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;
 }());
 
@@ -3212,6 +3553,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 +3731,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 +3801,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 +4378,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 +4401,12 @@ var defaultOptions = {
  * - `"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) {
@@ -4019,15 +4422,33 @@ var CanvasRenderer = /** @class */ (function (_super) {
      * - `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);
@@ -4044,9 +4465,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 +4653,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 +4696,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 +4729,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 +4790,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 +4852,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 +4885,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 +4915,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 +5011,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 +5046,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 +5060,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 +5085,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 +5097,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 +5250,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 +5267,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 +5304,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 +5657,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 +5666,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 +5710,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 +5766,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 +5776,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 +5790,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 +5801,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 +5811,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 +5867,6 @@ var Heatmap = /** @class */ (function (_super) {
 /**
  * The current version of the Flocc library.
  */
-var version = "0.5.21";
+var version = "0.5.23";
 
 export { ASCIIRenderer, Agent, CanvasRenderer, Colors, Environment, GridEnvironment, Heatmap, Histogram, KDTree, LineChartRenderer, Network, NumArray, Rule, TableRenderer, Terrain, version as VERSION, Vector, utils };