@react-x11/components 0.4.0 → 0.6.0

package/dist/flow/node.d.ts

@@ -153,16 +153,44 @@ export declare class FlowGraphNode extends Node implements FlowInstance {
     /** who touches whom — what a moved node's damage has to include */
     private _rebuildAdjacency;
     private _viewport;
+    /**
+     * Device pixels per logical pixel — the display scale this pane's window
+     * resolved to (react-x11's docs/scale.md): `1` on an ordinary display,
+     * `2` on a retina panel, fractional on a desktop configured to 1.5.
+     *
+     * The pane thinks in logical pixels throughout. They are the unit its API
+     * speaks (a viewport, a node's size, a `NodeBodyRect`), the unit a
+     * synthetic event's `x`/`y` arrive in, and the unit the sibling boxes
+     * `<Flow>` mounts bodies in are laid out in. What core hands this element
+     * is device pixels — `abs`, `contentBox()`, `this.style`, the paint
+     * context, `paintDamage()`, a rect given to `invalidate` or
+     * `scrollContents`, an a11y scene rect — so each of those crossings
+     * converts, once, in the helpers below, and nothing in between knows the
+     * factor. At 1x every conversion is the identity, which is how a pane
+     * that compared `ev.x` with `contentBox()` passed every test and then
+     * hovered at half the distance, panned at half speed and framed the graph
+     * at half size the day a native backend reported a retina panel.
+     */
+    private get _scale();
+    /** A logical rect on the device grid, grown outward to whole pixels —
+     * what a damage claim has to cover for an antialiased edge to repaint. */
+    private _device;
+    /** One of core's device rects in the pane's logical units. */
+    private _logical;
+    /** Claim a logical rect as damage. Every partial repaint the pane asks
+     * for goes through here; the full ones pass `abs`, which is device
+     * already. */
+    private _claim;
     /**
      * The pane proper: `abs` inset by border and padding, off core's own
      * resolved layout (react-x11#254) — so a `<Flow style={{ borderWidth: 1,
      * padding: 8 }}>` keeps its border, and its padding means what it does on
-     * a `<box>`.
+     * a `<box>`. In logical pixels, like everything the pane computes.
      */
     private _pane;
-    /** Graph point to window pixels. */
+    /** Graph point to logical window pixels. */
     private _toScreen;
-    /** Window pixels to graph point. */
+    /** Logical window pixels to graph point. */
     private _toGraph;
     /** Where a node is *now*: mid-drag that is not where its props say. */
     private _positionOf;
@@ -180,7 +208,7 @@ export declare class FlowGraphNode extends Node implements FlowInstance {
     private _grips;
     private _handlesOf;
     /**
-     * A node's box on screen, **on whole pixels**.
+     * A node's box on screen, **on whole device pixels**.
      *
      * The rounding is not cosmetic. ntk draws a rounded box as cached corner
      * glyphs plus `FillRectangles` when its geometry is integral, and
@@ -189,8 +217,10 @@ export declare class FlowGraphNode extends Node implements FlowInstance {
      * six hundred mask uploads a frame and about four megabytes on the wire;
      * `react-x11/debug`'s trace names it as `fell back … fractional`.
      *
-     * Hit testing reads the same rect, so what is drawn and what is clicked
-     * still agree to the pixel.
+     * The grid is the panel's, not the logical one: at 2x a logical half is
+     * a whole pixel, and at 1.5x a logical integer is not always one. Hit
+     * testing reads the same rect, so what is drawn and what is clicked still
+     * agree to the pixel.
      */
     private _screenRect;
     private _visible;
@@ -212,8 +242,8 @@ export declare class FlowGraphNode extends Node implements FlowInstance {
      * panels repaint in place.
      *
      * Still a full repaint when:
-     *  - the zoom moved (scaling is not a blit) or the shift is fractional —
-     *    every real pan gesture is whole pixels;
+     *  - the zoom moved (scaling is not a blit) or the shift is fractional on
+     *    the device grid — every real pan gesture is whole device pixels;
      *  - mounted node bodies exist: they are core-owned siblings whose
      *    gesture-time commits claim *inside* the rect every step, which
      *    declines the blit anyway — bailing early skips the churn;
@@ -386,7 +416,8 @@ export declare class FlowGraphNode extends Node implements FlowInstance {
     private _paintGridPattern;
     private _makeGridSurface;
     /** Draw one grid cell with the mark at the phase point, wrapped — a mark
-     * near an edge is drawn again a tile over, so the seam never cuts it. */
+     * near an edge is drawn again a tile over, so the seam never cuts it.
+     * Device pixels throughout: `unit` is how many of them a graph unit is. */
     private _renderGridTile;
     private _dropGridTile;
     /** Draws every visible edge; answers whether any of them is animated, so

package/dist/flow/node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../src/flow/node.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../src/flow/node.ts"],"names":[],"mappings":"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"}

package/dist/flow/node.js

@@ -23,7 +23,7 @@ import * as ntk from 'react-x11/ntk';
 import { Node } from 'react-x11/node';
 import { tint } from 'react-x11/style';
 import { ctrlChordLetter, keysymOf, XK_BACKSPACE, XK_DELETE, XK_DOWN, XK_ESCAPE, XK_HOME, XK_LEFT, XK_RIGHT, XK_UP, } from 'react-x11/keysyms';
-import { createPainter, measureText } from './draw.js';
+import { createPainter, measureText, toDevice } from './draw.js';
 import { boundsOf, canConnect, clamp, DEFAULT_MARKER_SIZE, DEFAULT_MAX_ZOOM, DEFAULT_MIN_ZOOM, EDGE_SLOP, EDGE_STEP_OFFSET, fitViewport, handleAnchor, HANDLE_RADIUS, HANDLE_SLOP, gripPoint, inflateRect, intersectRects, measureNode, MIN_NODE_HEIGHT, MIN_NODE_WIDTH, NODE_BODY_INSET, NODE_DESC_SIZE, NODE_HEADER, NODE_LABEL_SIZE, NODE_PAD_X, NODE_PAD_Y, normalizeBackground, normalizeMarker, orientConnection, rectContains, rectsOverlap, RENDER_ZOOM, RESIZE_DIRECTIONS, RESIZE_GRIP, RESIZE_SLOP, resizeRect, resolveHandles, resolvePalette, snapTo, unionRects, ZOOM_STEP, } from './model.js';
 import { distanceToPath, edgePath, endAngle, pathBounds, pointAtFraction, startAngle, trimEnd, } from './paths.js';
 /** Registration key, `kind` and JSX tag, one string — react-x11 rejects a
@@ -350,6 +350,7 @@ export class FlowGraphNode extends Node {
                 this._themeString('fontFamily') ??
                 'sans-serif',
             color: this._palette().text,
+            scale: this._scale,
             cache: this._textCache,
         };
     }
@@ -624,16 +625,66 @@ export class FlowGraphNode extends Node {
     _viewport() {
         return this._prop('viewport') ?? this._vp;
     }
+    /**
+     * Device pixels per logical pixel — the display scale this pane's window
+     * resolved to (react-x11's docs/scale.md): `1` on an ordinary display,
+     * `2` on a retina panel, fractional on a desktop configured to 1.5.
+     *
+     * The pane thinks in logical pixels throughout. They are the unit its API
+     * speaks (a viewport, a node's size, a `NodeBodyRect`), the unit a
+     * synthetic event's `x`/`y` arrive in, and the unit the sibling boxes
+     * `<Flow>` mounts bodies in are laid out in. What core hands this element
+     * is device pixels — `abs`, `contentBox()`, `this.style`, the paint
+     * context, `paintDamage()`, a rect given to `invalidate` or
+     * `scrollContents`, an a11y scene rect — so each of those crossings
+     * converts, once, in the helpers below, and nothing in between knows the
+     * factor. At 1x every conversion is the identity, which is how a pane
+     * that compared `ev.x` with `contentBox()` passed every test and then
+     * hovered at half the distance, panned at half speed and framed the graph
+     * at half size the day a native backend reported a retina panel.
+     */
+    get _scale() {
+        return this.scale > 0 ? this.scale : 1;
+    }
+    /** A logical rect on the device grid, grown outward to whole pixels —
+     * what a damage claim has to cover for an antialiased edge to repaint. */
+    _device(rect) {
+        const s = this._scale;
+        const x = Math.floor(toDevice(rect.x, s));
+        const y = Math.floor(toDevice(rect.y, s));
+        return {
+            x,
+            y,
+            width: Math.ceil(toDevice(rect.x + rect.width, s)) - x,
+            height: Math.ceil(toDevice(rect.y + rect.height, s)) - y,
+        };
+    }
+    /** One of core's device rects in the pane's logical units. */
+    _logical(rect) {
+        const s = this._scale;
+        return {
+            x: rect.x / s,
+            y: rect.y / s,
+            width: rect.width / s,
+            height: rect.height / s,
+        };
+    }
+    /** Claim a logical rect as damage. Every partial repaint the pane asks
+     * for goes through here; the full ones pass `abs`, which is device
+     * already. */
+    _claim(rect, reason) {
+        this.invalidate(false, this._device(rect), reason);
+    }
     /**
      * The pane proper: `abs` inset by border and padding, off core's own
      * resolved layout (react-x11#254) — so a `<Flow style={{ borderWidth: 1,
      * padding: 8 }}>` keeps its border, and its padding means what it does on
-     * a `<box>`.
+     * a `<box>`. In logical pixels, like everything the pane computes.
      */
     _pane() {
-        return this.contentBox();
+        return this._logical(this.contentBox());
     }
-    /** Graph point to window pixels. */
+    /** Graph point to logical window pixels. */
     _toScreen(p) {
         const v = this._viewport();
         const pane = this._pane();
@@ -642,7 +693,7 @@ export class FlowGraphNode extends Node {
             y: pane.y + p.y * v.zoom + v.y,
         };
     }
-    /** Window pixels to graph point. */
+    /** Logical window pixels to graph point. */
     _toGraph(x, y) {
         const v = this._viewport();
         const pane = this._pane();
@@ -703,7 +754,7 @@ export class FlowGraphNode extends Node {
         return entry.specs.map((spec) => handleAnchor(entry.node.id, rect, spec));
     }
     /**
-     * A node's box on screen, **on whole pixels**.
+     * A node's box on screen, **on whole device pixels**.
      *
      * The rounding is not cosmetic. ntk draws a rounded box as cached corner
      * glyphs plus `FillRectangles` when its geometry is integral, and
@@ -712,22 +763,26 @@ export class FlowGraphNode extends Node {
      * six hundred mask uploads a frame and about four megabytes on the wire;
      * `react-x11/debug`'s trace names it as `fell back … fractional`.
      *
-     * Hit testing reads the same rect, so what is drawn and what is clicked
-     * still agree to the pixel.
+     * The grid is the panel's, not the logical one: at 2x a logical half is
+     * a whole pixel, and at 1.5x a logical integer is not always one. Hit
+     * testing reads the same rect, so what is drawn and what is clicked still
+     * agree to the pixel.
      */
     _screenRect(entry) {
         const v = this._viewport();
         const rect = this.rectOf(entry);
         const p = this._toScreen(rect);
-        const x = Math.round(p.x);
-        const y = Math.round(p.y);
+        const s = this._scale;
+        const grid = (value) => Math.round(value * s) / s;
+        const x = grid(p.x);
+        const y = grid(p.y);
         return {
             x,
             y,
             // rounded as edges rather than as a size, so two nodes that share a
             // column still share it after rounding
-            width: Math.round(p.x + rect.width * v.zoom) - x,
-            height: Math.round(p.y + rect.height * v.zoom) - y,
+            width: grid(p.x + rect.width * v.zoom) - x,
+            height: grid(p.y + rect.height * v.zoom) - y,
         };
     }
     _visible() {
@@ -773,8 +828,8 @@ export class FlowGraphNode extends Node {
      * panels repaint in place.
      *
      * Still a full repaint when:
-     *  - the zoom moved (scaling is not a blit) or the shift is fractional —
-     *    every real pan gesture is whole pixels;
+     *  - the zoom moved (scaling is not a blit) or the shift is fractional on
+     *    the device grid — every real pan gesture is whole device pixels;
      *  - mounted node bodies exist: they are core-owned siblings whose
      *    gesture-time commits claim *inside* the rect every step, which
      *    declines the blit anyway — bailing early skips the churn;
@@ -786,11 +841,17 @@ export class FlowGraphNode extends Node {
             return false;
         if (this._bodiesKey !== '')
             return false;
-        const dx = Math.round(next.x - previous.x);
-        const dy = Math.round(next.y - previous.y);
+        // Device pixels: the blit copies the backing store, and its grid is the
+        // panel's. A pointer step lands on it whatever the scale — it came off
+        // the wire as whole device pixels — so every real pan gesture blits.
+        const s = this._scale;
+        const shiftX = toDevice(next.x - previous.x, s);
+        const shiftY = toDevice(next.y - previous.y, s);
+        const dx = Math.round(shiftX);
+        const dy = Math.round(shiftY);
         if (dx === 0 && dy === 0)
             return true; // sub-pixel: nothing to show yet
-        if (next.x - previous.x !== dx || next.y - previous.y !== dy)
+        if (shiftX !== dx || shiftY !== dy)
             return false;
         const pane = this._pane();
         // The horizontal bands the furniture lives in. Full-width, because the
@@ -815,27 +876,34 @@ export class FlowGraphNode extends Node {
             const last = buttons[buttons.length - 1].rect;
             claim(unionRects(first, last), this._controlsOptions()?.position ?? 'bottom-left');
         }
+        // From here on, device pixels: `scrollContents` and the claims speak
+        // core's units. The bands round *up* and the blit is what is left, so
+        // the three sit edge to edge on whole pixels — a claim overlapping the
+        // blit rect by a pixel is a foreign claim, and declines the blit.
+        const box = this.contentBox();
+        const top = Math.ceil(toDevice(topBand, s));
+        const bottom = Math.ceil(toDevice(bottomBand, s));
         const blit = {
-            x: pane.x,
-            y: pane.y + topBand,
-            width: pane.width,
-            height: pane.height - topBand - bottomBand,
+            x: box.x,
+            y: box.y + top,
+            width: box.width,
+            height: box.height - top - bottom,
         };
-        if (blit.width < 64 || blit.height < 64)
+        if (blit.width < 64 * s || blit.height < 64 * s)
             return false;
         if (Math.abs(dx) >= blit.width || Math.abs(dy) >= blit.height) {
             return false;
         }
         this.scrollContents(blit, dx, dy);
-        if (topBand > 0) {
-            this.invalidate(false, { x: pane.x, y: pane.y, width: pane.width, height: topBand }, 'scroll');
+        if (top > 0) {
+            this.invalidate(false, { x: box.x, y: box.y, width: box.width, height: top }, 'scroll');
         }
-        if (bottomBand > 0) {
+        if (bottom > 0) {
             this.invalidate(false, {
-                x: pane.x,
+                x: box.x,
                 y: blit.y + blit.height,
-                width: pane.width,
-                height: bottomBand,
+                width: box.width,
+                height: bottom,
             }, 'scroll');
         }
         return true;
@@ -1496,7 +1564,7 @@ export class FlowGraphNode extends Node {
                 // The box outline is all that moves this step; a node crossing the
                 // boundary changes `selected`, and that repaints through the
                 // controlled round trip like any other selection change.
-                this.invalidate(false, inflateRect(unionRects(oldBox, selectBoxRect(gesture)), CULL_MARGIN), 'style-state');
+                this._claim(inflateRect(unionRects(oldBox, selectBoxRect(gesture)), CULL_MARGIN), 'style-state');
                 return;
             }
             case 'minimap': {
@@ -1668,7 +1736,7 @@ export class FlowGraphNode extends Node {
         }
         this._emitNodes(changes);
         if (damage) {
-            this.invalidate(false, inflateRect(damage, CULL_MARGIN), 'content');
+            this._claim(inflateRect(damage, CULL_MARGIN), 'content');
         }
         else {
             this._repaint();
@@ -1717,7 +1785,7 @@ export class FlowGraphNode extends Node {
             });
         }
         this._emitNodes(changes);
-        this.invalidate(false, inflateRect(damage, CULL_MARGIN), 'content');
+        this._claim(inflateRect(damage, CULL_MARGIN), 'content');
         this._emitBodies();
     }
     _connectStep(gesture, ev) {
@@ -1763,7 +1831,7 @@ export class FlowGraphNode extends Node {
         if (target)
             box = unionRects(box, this._screenRect(target));
         gesture.box = box;
-        this.invalidate(false, inflateRect(oldBox ? unionRects(oldBox, box) : box, CULL_MARGIN), 'style-state');
+        this._claim(inflateRect(oldBox ? unionRects(oldBox, box) : box, CULL_MARGIN), 'style-state');
     }
     /** The pending connection's polyline — one builder for the paint and for
      * the damage it has to claim, so the two cannot disagree. */
@@ -1870,7 +1938,7 @@ export class FlowGraphNode extends Node {
         const damage = unionMaybe(this._hoverDamage(this._hover), this._hoverDamage(next));
         this._hover = next;
         if (damage) {
-            this.invalidate(false, inflateRect(damage, CULL_MARGIN), 'style-state');
+            this._claim(inflateRect(damage, CULL_MARGIN), 'style-state');
         }
         else {
             this._repaint('style-state');
@@ -1882,7 +1950,7 @@ export class FlowGraphNode extends Node {
         const damage = this._hoverDamage(this._hover);
         this._hover = NO_HOVER;
         if (damage) {
-            this.invalidate(false, inflateRect(damage, CULL_MARGIN), 'style-state');
+            this._claim(inflateRect(damage, CULL_MARGIN), 'style-state');
         }
         else {
             this._repaint('style-state');
@@ -1928,7 +1996,8 @@ export class FlowGraphNode extends Node {
             const degree = out.length;
             items.push({
                 id: entry.node.id,
-                rect,
+                // the scene's rects are `abs`'s space — device pixels
+                rect: this._device(rect),
                 role: 'listitem',
                 name: data?.label ?? entry.node.id,
                 description: degree === 0
@@ -2121,7 +2190,7 @@ export class FlowGraphNode extends Node {
         if (damage === 'full')
             this._repaint('props');
         else if (damage)
-            this.invalidate(false, damage, 'props');
+            this._claim(damage, 'props');
         // Core re-reads the scene for aria-prop commits; a `nodes`/`edges`
         // change is invisible to it, so the re-read is asked for by name.
         // Free when no assistive technology is listening.
@@ -2141,7 +2210,7 @@ export class FlowGraphNode extends Node {
                 this._dashPhase += ANIMATION_SPEED;
                 // the box the last paint saw animated edges in, not the pane: a
                 // marching dash should not cost a full grid repaint per tick
-                this.invalidate(false, this._animBox ?? this.abs, 'animation');
+                this.invalidate(false, this._animBox ? this._device(this._animBox) : this.abs, 'animation');
             }, ANIMATION_MS) ?? null;
     }
     _stopAnimation() {
@@ -2195,7 +2264,13 @@ export class FlowGraphNode extends Node {
                 this._fit(this._prop('fitViewOptions'));
             }
         }
-        this._frameClip = this._fitPending ? this._pane() : clip;
+        // `paintDamage()` speaks device pixels, like `abs`; the culling below
+        // speaks logical ones, like everything the pane draws.
+        this._frameClip = this._fitPending
+            ? this._pane()
+            : clip
+                ? this._logical(clip)
+                : null;
         const palette = this._palette();
         const { x, y, width, height } = this._pane();
         painter.save();
@@ -2204,8 +2279,10 @@ export class FlowGraphNode extends Node {
         // clip is the content box rather than `abs` because the border has been
         // stroked already, inside the box, and drawing over it would leave a
         // `borderWidth: 1` looking like half of one.
+        // `this.style` arrives in device pixels (react-x11's docs/scale.md);
+        // the painter takes logical ones.
         const radius = Math.max(0, (this.style.borderRadius ?? 0) -
-            (this.style.borderWidth ?? 0));
+            (this.style.borderWidth ?? 0)) / this._scale;
         // The rounded clip only when this pass can actually reach a corner: a
         // non-rectangular clip forfeits ntk's rounded-box fast path for every
         // fill under it, which multiplies a rounded *pane* into a per-card
@@ -2287,8 +2364,8 @@ export class FlowGraphNode extends Node {
                 continue;
             bodies.push({
                 id: entry.node.id,
-                // pane-relative, because that is what an absolutely positioned box
-                // beside the pane is laid out against
+                // pane-relative and logical, because that is what an absolutely
+                // positioned box beside the pane is laid out against, and in
                 x: Math.round(rect.x + inset - pane.x),
                 y: Math.round(rect.y + header - pane.y),
                 width: Math.round(width),
@@ -2297,8 +2374,11 @@ export class FlowGraphNode extends Node {
                 selected: entry.node.selected ?? false,
             });
         }
+        // The zoom is in the key as well as the rect it produced: it is the
+        // body's subtree scale now, and two zooms a rounding apart can leave a
+        // box on the same integers while the text inside it should have moved.
         const key = bodies
-            .map((b) => `${b.id}:${b.x},${b.y},${b.width},${b.height},${b.selected}`)
+            .map((b) => `${b.id}:${b.x},${b.y},${b.width},${b.height},${b.zoom},${b.selected}`)
             .join('|');
         if (key === this._bodiesKey)
             return;
@@ -2394,8 +2474,13 @@ export class FlowGraphNode extends Node {
      *   24px tile is a handful of requests on any server.
      */
     _paintGridPattern(painter, options, step, color, region) {
-        const tileSize = Math.round(step);
-        if (Math.abs(step - tileSize) > 0.01 || tileSize < 2)
+        // The tile is a pixmap on the panel's grid, so the pitch has to be a
+        // whole number of *device* pixels, and the phase is where the viewport
+        // origin lands on that grid.
+        const s = this._scale;
+        const pitch = toDevice(step, s);
+        const tileSize = Math.round(pitch);
+        if (Math.abs(pitch - tileSize) > 0.01 || tileSize < 2)
             return false;
         const raw = painter.raw;
         if (!raw || typeof raw.createPattern !== 'function')
@@ -2403,9 +2488,11 @@ export class FlowGraphNode extends Node {
         const v = this._viewport();
         const pane = this._pane();
         const mod = (a, m) => ((a % m) + m) % m;
-        const px = Math.round(mod(pane.x + v.x, tileSize)) % tileSize;
-        const py = Math.round(mod(pane.y + v.y, tileSize)) % tileSize;
-        const key = `${options.variant}|${Math.round(options.size * v.zoom * 4)}|${color}|${px},${py}`;
+        const px = Math.round(mod(toDevice(pane.x + v.x, s), tileSize)) % tileSize;
+        const py = Math.round(mod(toDevice(pane.y + v.y, s), tileSize)) % tileSize;
+        // device pixels per graph unit — what a mark's size is drawn in
+        const unit = v.zoom * s;
+        const key = `${options.variant}|${Math.round(options.size * unit * 4)}|${color}|${px},${py}`;
         let tile = this._gridTile;
         if (!tile || tile.size !== tileSize) {
             this._dropGridTile();
@@ -2422,10 +2509,11 @@ export class FlowGraphNode extends Node {
         }
         if (tile.key !== key) {
             tile.key = key;
-            this._renderGridTile(tile, options, v.zoom, color, px, py);
+            this._renderGridTile(tile, options, unit, color, px, py);
         }
         raw.fillStyle = tile.pattern;
-        raw.fillRect?.(region.x, region.y, region.width, region.height);
+        const fill = this._device(region);
+        raw.fillRect?.(fill.x, fill.y, fill.width, fill.height);
         return true;
     }
     _makeGridSurface(tileSize) {
@@ -2444,8 +2532,9 @@ export class FlowGraphNode extends Node {
         }
     }
     /** Draw one grid cell with the mark at the phase point, wrapped — a mark
-     * near an edge is drawn again a tile over, so the seam never cuts it. */
-    _renderGridTile(tile, options, zoom, color, px, py) {
+     * near an edge is drawn again a tile over, so the seam never cuts it.
+     * Device pixels throughout: `unit` is how many of them a graph unit is. */
+    _renderGridTile(tile, options, unit, color, px, py) {
         const t = tile.size;
         tile.surface.render((ctx) => {
             ctx.clearRect?.(0, 0, t, t);
@@ -2461,12 +2550,12 @@ export class FlowGraphNode extends Node {
                             ctx.fillRect(0, cy - 0.5, t, 1);
                     }
                     else if (options.variant === 'cross') {
-                        const arm = Math.max(2, options.size * 3 * zoom);
+                        const arm = Math.max(2, options.size * 3 * unit);
                         ctx.fillRect(cx - arm, cy - 0.5, arm * 2, 1);
                         ctx.fillRect(cx - 0.5, cy - arm, 1, arm * 2);
                     }
                     else {
-                        const dot = Math.max(1, Math.round(options.size * 2 * zoom));
+                        const dot = Math.max(1, Math.round(options.size * 2 * unit));
                         ctx.fillRect(cx - dot / 2, cy - dot / 2, dot, dot);
                     }
                 }