@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

package/dist/ui/elements/PcBrushSize/index.js

@@ -0,0 +1,66 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import "../PcNumberSlider/index.js";
+import { BRUSH_SIZE_STEP } from "../../../lib/classes/BrushSettings/index.js";
+import { css, html, nothing } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcBrushSize/index.ts
+/**
+* A brush's size as text: one number when the width and height are the same, otherwise "width × height".
+*
+* @example
+* sizeText({ width: 20, height: 20 }); // "20"
+* sizeText({ width: 30, height: 10 }); // "30 × 10"
+*/
+var sizeText = ({ width, height }) => width === height ? String(width) : `${width} × ${height}`;
+/**
+* A brush or eraser's size, as a `pc-number-slider`: pressed and dragged right or up it gets bigger, left or down
+* smaller, keeping its proportions (see `BrushSettings.resize`). Tapping it lets you type the larger side's size. With
+* keyboard focus, the arrow keys change it by a pixel and Page Up and Page Down by a step (like `]` and `[`).
+*
+* @example
+* html`<pc-brush-size .settings=${app.brush} label="Brush size"></pc-brush-size>`
+*/
+var PcBrushSize = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		settings: { attribute: false },
+		label: { type: String }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: inline-flex;
+      }
+      pc-number-slider {
+        flex: 1;
+      }
+    `];
+	changes = new ChangeController(this, () => [this.settings]);
+	constructor() {
+		super();
+		this.label = "";
+	}
+	/** Resize to the slider's value (the larger side), keeping the proportions */
+	onChange(event) {
+		const settings = this.settings;
+		settings.resize(event.detail.value - settings.largerSide);
+		this.requestUpdate();
+	}
+	render() {
+		const settings = this.settings;
+		if (!settings) return nothing;
+		const larger = settings.largerSide;
+		return html`<pc-number-slider
+      exportparts="control, field"
+      min=${1}
+      max=${256}
+      page-step=${Math.max(1, Math.round(larger * BRUSH_SIZE_STEP))}
+      label=${this.label}
+      .value=${live(larger)}
+      .text=${sizeText(settings)}
+      @pc-change=${this.onChange}
+    ></pc-number-slider>`;
+	}
+};
+defineElement("pc-brush-size", PcBrushSize);
+export { PcBrushSize, sizeText };

package/dist/ui/elements/PcBrushTest/index.d.ts

@@ -8,9 +8,18 @@ export declare const TEST_AREA_WIDTH = 800;
 export declare const TEST_AREA_HEIGHT = 320;
 /** The colour test strokes are drawn in, whatever the current colour */
 export declare const TEST_COLOUR = "#000000";
+/** The colour of the circles showing a stroke's sampled points, while stroke points are shown */
+export declare const POINT_COLOUR = "#e8175d";
+/** The colour of the dots showing where a stroke placed its stamps, while stroke points are shown */
+export declare const STAMP_COLOUR = "#1e88e5";
+/** How long a finished stroke's points stay shown (milliseconds) */
+export declare const STROKE_POINTS_MS = 3000;
 /**
  * A small area to try brush settings before saving them: strokes are drawn in black, at the settings' own size, on a
  * white background at double resolution (800 × 320 pixels shown in the window's width). "Clear" (a red pill) empties it.
+ * "Show stroke points" draws the stroke's sampled points (pink circles) and where it placed stamps (blue dots) over it,
+ * like the canvas's debug overlay, to see how sampling and smoothing work. They go 3 seconds after the stroke ends, or
+ * on "Clear".
  *
  * @example
  * html`<pc-brush-test .config=${config} .tips=${app.tips}></pc-brush-test>`
@@ -23,6 +32,10 @@ export declare class PcBrushTest extends PcElement {
         tips: {
             attribute: boolean;
         };
+        showPoints: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
         translations: {
             attribute: boolean;
         };
@@ -39,6 +52,9 @@ export declare class PcBrushTest extends PcElement {
     config?: BrushConfig;
     /** Brush shapes */
     tips?: BrushTipCache;
+    /** Whether the last stroke's sampled points and stamps are drawn over it */
+    showPoints: boolean;
+    constructor();
     /** Creates the layer and stroke canvases (replaceable for tests) */
     createCanvas: CanvasFactory;
     private layer?;
@@ -46,6 +62,8 @@ export declare class PcBrushTest extends PcElement {
     /** The pointer drawing, if any */
     private pointerId?;
     private readonly onEngineChange;
+    /** Clears the finished stroke's points once they've been shown long enough */
+    private pointsTimer?;
     disconnectedCallback(): void;
     /** The visible canvas */
     private get canvas();
@@ -61,11 +79,19 @@ export declare class PcBrushTest extends PcElement {
     private onPointerMove;
     /** Finish the test stroke */
     private onPointerUp;
+    /** Stop showing the last stroke's points and stamps (still recording the next stroke's while shown) */
+    private clearPoints;
+    /**
+     * Show or hide the last stroke's sampled points and stamps. They're recorded from the next stroke.
+     */
+    setShowPoints(shown: boolean): void;
     /**
      * Empty the testing area.
      */
     clear(): void;
     /** Show the layer (with any stroke in progress) on the visible canvas */
     private paint;
+    /** Draw the last stroke's sampled points (circles) and stamp positions (dots) */
+    private paintPoints;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/ui/elements/PcBrushTest/index.js

@@ -1,4 +1,5 @@
 import style_default from "./style.js";
+import { PILLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
 import StrokeEngine from "../../../lib/brushes/StrokeEngine/index.js";
 import Layer, { createOffscreenCanvas } from "../../../lib/classes/Layer/index.js";
@@ -10,9 +11,20 @@ var TEST_AREA_WIDTH = 800;
 var TEST_AREA_HEIGHT = 320;
 /** The colour test strokes are drawn in, whatever the current colour */
 var TEST_COLOUR = "#000000";
+/** The colour of the circles showing a stroke's sampled points, while stroke points are shown */
+var POINT_COLOUR = "#e8175d";
+/** The colour of the dots showing where a stroke placed its stamps, while stroke points are shown */
+var STAMP_COLOUR = "#1e88e5";
+/** How long a finished stroke's points stay shown (milliseconds) */
+var STROKE_POINTS_MS = 3e3;
+/** Radius of the circles showing a stroke's sampled points (test area pixels) */
+var POINT_RADIUS = 8;
 /**
 * A small area to try brush settings before saving them: strokes are drawn in black, at the settings' own size, on a
 * white background at double resolution (800 × 320 pixels shown in the window's width). "Clear" (a red pill) empties it.
+* "Show stroke points" draws the stroke's sampled points (pink circles) and where it placed stamps (blue dots) over it,
+* like the canvas's debug overlay, to see how sampling and smoothing work. They go 3 seconds after the stroke ends, or
+* on "Clear".
 *
 * @example
 * html`<pc-brush-test .config=${config} .tips=${app.tips}></pc-brush-test>`
@@ -21,9 +33,21 @@ var PcBrushTest = class extends PcElement {
 	static properties = {
 		...PcElement.properties,
 		config: { attribute: false },
-		tips: { attribute: false }
+		tips: { attribute: false },
+		showPoints: {
+			type: Boolean,
+			attribute: "show-points"
+		}
 	};
-	static styles = [PcElement.styles, unsafeCSS(style_default)];
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(PILLS_CSS),
+		unsafeCSS(style_default)
+	];
+	constructor() {
+		super();
+		this.showPoints = false;
+	}
 	/** Creates the layer and stroke canvases (replaceable for tests) */
 	createCanvas = createOffscreenCanvas;
 	layer;
@@ -31,8 +55,11 @@ var PcBrushTest = class extends PcElement {
 	/** The pointer drawing, if any */
 	pointerId;
 	onEngineChange = () => this.paint();
+	/** Clears the finished stroke's points once they've been shown long enough */
+	pointsTimer;
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		clearTimeout(this.pointsTimer);
 		this.engine?.removeEventListener("change", this.onEngineChange);
 	}
 	/** The visible canvas */
@@ -45,6 +72,7 @@ var PcBrushTest = class extends PcElement {
 		if (!this.engine) {
 			this.engine = new StrokeEngine(800, 320, this.createCanvas);
 			this.engine.addEventListener("change", this.onEngineChange);
+			this.engine.setDebug(this.showPoints);
 		}
 		return {
 			layer: this.layer,
@@ -72,6 +100,7 @@ var PcBrushTest = class extends PcElement {
 		const config = this.config;
 		if (!config || !this.tips || event.button !== 0) return;
 		const { layer, engine } = this.drawing;
+		clearTimeout(this.pointsTimer);
 		this.pointerId = event.pointerId;
 		event.currentTarget.setPointerCapture?.(event.pointerId);
 		engine.begin({
@@ -98,12 +127,29 @@ var PcBrushTest = class extends PcElement {
 		this.pointerId = void 0;
 		this.engine?.end(this.point(event), event.timeStamp);
 		this.paint();
+		clearTimeout(this.pointsTimer);
+		this.pointsTimer = setTimeout(() => this.clearPoints(), STROKE_POINTS_MS);
+	}
+	/** Stop showing the last stroke's points and stamps (still recording the next stroke's while shown) */
+	clearPoints() {
+		clearTimeout(this.pointsTimer);
+		this.engine?.setDebug(this.showPoints);
+	}
+	/**
+	* Show or hide the last stroke's sampled points and stamps. They're recorded from the next stroke.
+	*/
+	setShowPoints(shown) {
+		const changed = shown !== this.showPoints;
+		this.showPoints = shown;
+		if (changed) this.engine?.setDebug(shown);
+		this.paint();
 	}
 	/**
 	* Empty the testing area.
 	*/
 	clear() {
 		this.engine?.cancel();
+		this.clearPoints();
 		this.layer?.context.clearRect(0, 0, 800, 320);
 		this.paint();
 	}
@@ -114,6 +160,23 @@ var PcBrushTest = class extends PcElement {
 		ctx.clearRect(0, 0, 800, 320);
 		const image = this.engine?.preview?.image ?? this.layer?.canvas;
 		if (image) ctx.drawImage(image, 0, 0);
+		if (this.showPoints && this.engine) this.paintPoints(ctx, this.engine);
+	}
+	/** Draw the last stroke's sampled points (circles) and stamp positions (dots) */
+	paintPoints(ctx, engine) {
+		const { points, stamps } = engine.debugTrace;
+		ctx.save();
+		ctx.fillStyle = STAMP_COLOUR;
+		for (const { x, y } of stamps) ctx.fillRect(x - 2, y - 2, 4, 4);
+		ctx.strokeStyle = POINT_COLOUR;
+		ctx.lineWidth = 2;
+		ctx.beginPath();
+		for (const { x, y } of points) {
+			ctx.moveTo(x + POINT_RADIUS, y);
+			ctx.arc(x, y, POINT_RADIUS, 0, Math.PI * 2);
+		}
+		ctx.stroke();
+		ctx.restore();
 	}
 	render() {
 		return html`
@@ -126,11 +189,21 @@ var PcBrushTest = class extends PcElement {
         @pointerup=${this.onPointerUp}
         @pointercancel=${this.onPointerUp}
       ></canvas>
-      <button type="button" class="clear" @click=${() => this.clear()}>
-        ${this.t("paintCanvas.common.clear")}
-      </button>
+      <div class="actions">
+        <button type="button" class="pill clear" @click=${() => this.clear()}>
+          ${this.t("paintCanvas.common.clear")}
+        </button>
+        <label class="show-points">
+          <input
+            type="checkbox"
+            .checked=${this.showPoints}
+            @change=${(e) => this.setShowPoints(e.target.checked)}
+          />
+          ${this.t("paintCanvas.brushConfig.showStrokePoints")}
+        </label>
+      </div>
     `;
 	}
 };
 defineElement("pc-brush-test", PcBrushTest);
-export { PcBrushTest, TEST_AREA_HEIGHT, TEST_AREA_WIDTH, TEST_COLOUR };
+export { POINT_COLOUR, PcBrushTest, STAMP_COLOUR, STROKE_POINTS_MS, TEST_AREA_HEIGHT, TEST_AREA_WIDTH, TEST_COLOUR };

package/dist/ui/elements/PcBrushTest/style.js

@@ -1,3 +1,3 @@
 // src/ui/elements/PcBrushTest/style.css?inline
-var style_default = ":host {\n  display: block;\n}\ncanvas {\n  display: block;\n  width: 100%;\n  background: #fff;\n  border: 1px solid var(--pc-border);\n  touch-action: none;\n}\n/* \"Clear\": a red pill */\nbutton.clear {\n  margin-top: 6px;\n  padding: 4px 16px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--pc-red);\n  color: #ffffff;\n  font: inherit;\n  font-weight: bold;\n  cursor: pointer;\n}\nbutton.clear:hover {\n  filter: brightness(1.1);\n}\nbutton.clear:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n";
+var style_default = ":host {\n  display: block;\n}\ncanvas {\n  display: block;\n  width: 100%;\n  background: #fff;\n  border: 1px solid var(--pc-border);\n  touch-action: none;\n}\n/* \"Clear\", then \"Show stroke points\" */\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 12px;\n  margin-top: 6px;\n}\n.show-points {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  cursor: pointer;\n}\n/* \"Clear\": a red pill */\nbutton.pill.clear {\n  background: var(--pc-red);\n  color: #ffffff;\n}\n";
 export { style_default as default };

package/dist/ui/elements/PcButton/index.d.ts

@@ -1,14 +1,17 @@
 import { PcElement } from "../../base";
+import { type PillSize } from "../../styles";
 import "../PcIcon";
 /** How a button looks */
 export type ButtonVariant = "accent" | "cancel" | "dismiss" | "pill" | "icon";
 /**
- * A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a small pill
- * (`pill`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its content.
- * Clicks reach listeners on the element; a disabled button sends none.
+ * A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a pill (`pill`,
+ * the same as `accent`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its
+ * content. All but icon buttons are pills, of the `size` given (`pill` by default; see `PILL_SIZE_STYLES`). Clicks
+ * reach listeners on the element; a disabled button sends none.
  *
  * @example
  * html`<pc-button variant="cancel" @click=${close}>Cancel</pc-button>`
+ * html`<pc-button size="pill-l">Start</pc-button>`
  * html`<pc-button variant="icon" icon="undo" label="Undo"></pc-button>`
  */
 export declare class PcButton extends PcElement {
@@ -17,6 +20,10 @@ export declare class PcButton extends PcElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         icon: {
             type: StringConstructor;
         };
@@ -43,6 +50,8 @@ export declare class PcButton extends PcElement {
     };
     static styles: import("lit").CSSResultGroup[];
     variant: ButtonVariant;
+    /** How big the pill is (not for icon buttons) */
+    size: PillSize;
     /** Name of an icon to show before the text (or alone, for an icon button) */
     icon?: string;
     /** The button's name for screen readers, when its content doesn't say it (e.g. an icon button) */

package/dist/ui/elements/PcButton/index.js

@@ -1,14 +1,19 @@
 import { PcElement, defineElement } from "../../base/index.js";
+import { PILL_SIZES, pillSizeDeclarations } from "../../styles/index.js";
 import "../PcIcon/index.js";
-import { css, html, nothing } from "lit";
+import { css, html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcButton/index.ts
+/** Each pill size, for the buttons that are pills (all but icon buttons) */
+var SIZE_STYLES = unsafeCSS(PILL_SIZES.map((size) => `:host([size="${size}"]) button { ${pillSizeDeclarations(size)} }`).join("\n"));
 /**
-* A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a small pill
-* (`pill`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its content.
-* Clicks reach listeners on the element; a disabled button sends none.
+* A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a pill (`pill`,
+* the same as `accent`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its
+* content. All but icon buttons are pills, of the `size` given (`pill` by default; see `PILL_SIZE_STYLES`). Clicks
+* reach listeners on the element; a disabled button sends none.
 *
 * @example
 * html`<pc-button variant="cancel" @click=${close}>Cancel</pc-button>`
+* html`<pc-button size="pill-l">Start</pc-button>`
 * html`<pc-button variant="icon" icon="undo" label="Undo"></pc-button>`
 */
 var PcButton = class extends PcElement {
@@ -18,6 +23,10 @@ var PcButton = class extends PcElement {
 			type: String,
 			reflect: true
 		},
+		size: {
+			type: String,
+			reflect: true
+		},
 		icon: { type: String },
 		label: { type: String },
 		disabled: {
@@ -38,9 +47,8 @@ var PcButton = class extends PcElement {
         flex: 1;
         align-items: center;
         justify-content: center;
+        box-sizing: border-box;
         gap: var(--pc-space-1);
-        min-height: var(--pc-control-size);
-        padding: var(--pc-space-1) var(--pc-space-3);
         border: 0;
         /* A joined button group gives each button its corners */
         border-radius: var(--pc-group-radius, var(--pc-radius-pill));
@@ -48,10 +56,11 @@ var PcButton = class extends PcElement {
         color: var(--pc-accent-text);
         font: inherit;
         font-family: var(--pc-font);
-        font-size: var(--pc-font-size);
+        ${unsafeCSS(pillSizeDeclarations("pill"))}
         font-weight: bold;
         cursor: pointer;
       }
+      ${SIZE_STYLES}
       button:hover:not(:disabled) {
         filter: brightness(1.15);
       }
@@ -76,12 +85,10 @@ var PcButton = class extends PcElement {
         filter: none;
         text-decoration: underline;
       }
-      :host([variant="pill"]) button {
-        min-height: 30px;
-      }
       :host([variant="icon"]) button {
         min-height: 0;
         padding: 2px;
+        line-height: normal;
         border: 1px solid var(--pc-border);
         border-radius: var(--pc-group-radius, var(--pc-radius-small));
         background: var(--pc-surface);
@@ -101,6 +108,7 @@ var PcButton = class extends PcElement {
 	constructor() {
 		super();
 		this.variant = "accent";
+		this.size = "pill";
 		this.disabled = false;
 	}
 	/** Move keyboard focus to the button */

package/dist/ui/elements/PcCanvas/index.d.ts

@@ -15,6 +15,8 @@ export declare const HANDLE_GRAB_DISTANCE = 8;
 export declare const ANTS_INTERVAL = 100;
 /** In focus pen mode, how long after a pen lifts touches are still ignored (milliseconds) */
 export declare const PEN_LIFT_GRACE_MS = 500;
+/** The most device pixels per CSS pixel the canvases on screen use (see `PcCanvas.pixelRatio`) */
+export declare const MAX_PIXEL_RATIO = 2;
 /**
  * Space covered by the toolbar and chat on a screen of the given width.
  *
@@ -92,7 +94,10 @@ export declare class PcCanvas extends PcElement {
     insets?: Insets;
     /** The insets in effect (see `insets`) */
     private get activeInsets();
-    /** Device pixels per CSS pixel (replaceable for tests) */
+    /**
+     * Device pixels per CSS pixel for the canvases on screen, at most `MAX_PIXEL_RATIO`: phones with 3 have 2.25 times
+     * the pixels to draw and put on screen for little visible difference (replaceable for tests).
+     */
     pixelRatio: () => number;
     private changes;
     /** Whether anything but the stroke in progress changed since the last update (so everything is redrawn) */
@@ -123,6 +128,8 @@ export declare class PcCanvas extends PcElement {
     private drag;
     /** Pointer drawing the current stroke, and the layer it draws on */
     private stroke;
+    /** A press that closed a panel or menu, held until it moves far enough to count (see `onPointerDown`) */
+    private heldPress;
     /** Pointer position over the stage (for the brush cursor), or null when outside */
     private hover;
     /** Name of the key held to zoom with the scroll wheel (replaceable for tests) */
@@ -256,15 +263,33 @@ export declare class PcCanvas extends PcElement {
      * Get a pointer's position relative to the stage.
      */
     private pointerPoint;
+    /**
+     * Send a pointer's events to the canvas until it's lifted, even outside it.
+     */
+    private capturePointer;
+    /**
+     * Handle a press, unless it closed a panel or menu (see `isDismissingPress`): that press is held, and only starts
+     * drawing (or whatever the tool does) once it moves `DRAG_THRESHOLD` pixels, so tapping the canvas to close a panel
+     * leaves no mark.
+     */
+    private onPointerDown;
+    /**
+     * Start a held press (see `onPointerDown`) once it moves far enough. Returns whether the pointer is still held.
+     */
+    private releaseHeldPress;
     /**
      * Start panning, or zoom, depending on the tool and button. In focus pen mode, touches only pan, pinch and make
      * gestures, and are ignored while a pen is down or just lifted (see `focusPenTouch`).
      */
-    private onPointerDown;
+    private pointerDown;
     /**
      * Continue a stroke (using every in-between event the browser recorded), pan while dragging, and move the brush cursor.
      */
     private onPointerMove;
+    /**
+     * Forget a held press lifted (or cancelled) before it moved far enough. Returns whether it was one.
+     */
+    private dropHeldPress;
     /**
      * Finish a stroke (writing it into the layer) or stop panning.
      */

package/dist/ui/elements/PcCanvas/index.js

@@ -4,6 +4,8 @@ import style_default from "./style.js";
 import { NO_TEXT_SELECTION_CSS } from "../../styles/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
+import { isDismissingPress } from "../../dismiss/index.js";
+import "../../drag/index.js";
 import "../../../lib/classes/PaintCanvas/index.js";
 import { PASTEBOARD_COLOUR, drawScene } from "../../../lib/rendering/compositing/index.js";
 import { drawBrushCursor } from "../../../lib/rendering/cursor/index.js";
@@ -37,6 +39,8 @@ var HANDLE_GRAB_DISTANCE = 8;
 var ANTS_INTERVAL = 100;
 /** In focus pen mode, how long after a pen lifts touches are still ignored (milliseconds) */
 var PEN_LIFT_GRACE_MS = 500;
+/** The most device pixels per CSS pixel the canvases on screen use (see `PcCanvas.pixelRatio`) */
+var MAX_PIXEL_RATIO = 2;
 /**
 * Space covered by the toolbar and chat on a screen of the given width.
 *
@@ -129,8 +133,11 @@ var PcCanvas = class extends PcElement {
 		const app = this.app;
 		return this.insets ?? interfaceInsets(app.viewport.width, app.interfaceVisible);
 	}
-	/** Device pixels per CSS pixel (replaceable for tests) */
-	pixelRatio = () => window.devicePixelRatio || 1;
+	/**
+	* Device pixels per CSS pixel for the canvases on screen, at most `MAX_PIXEL_RATIO`: phones with 3 have 2.25 times
+	* the pixels to draw and put on screen for little visible difference (replaceable for tests).
+	*/
+	pixelRatio = () => Math.min(window.devicePixelRatio || 1, 2);
 	changes = new ChangeController(this, () => [
 		this.app,
 		this.app?.brush,
@@ -172,6 +179,8 @@ var PcCanvas = class extends PcElement {
 	drag = null;
 	/** Pointer drawing the current stroke, and the layer it draws on */
 	stroke = null;
+	/** A press that closed a panel or menu, held until it moves far enough to count (see `onPointerDown`) */
+	heldPress = null;
 	/** Pointer position over the stage (for the brush cursor), or null when outside */
 	hover = null;
 	/** Name of the key held to zoom with the scroll wheel (replaceable for tests) */
@@ -238,6 +247,7 @@ var PcCanvas = class extends PcElement {
 		this.frame = 0;
 	}
 	firstUpdated() {
+		this.canvas?.getContext("2d", { willReadFrequently: true });
 		if (typeof ResizeObserver !== "undefined") {
 			this.resizeObserver = new ResizeObserver(() => this.syncSize());
 			this.resizeObserver.observe(this);
@@ -425,7 +435,7 @@ var PcCanvas = class extends PcElement {
 			point: app.viewport.screenToCanvas(screen),
 			constrain: app.constrainProportions
 		};
-		event.currentTarget.setPointerCapture(event.pointerId);
+		this.capturePointer(event.pointerId);
 	}
 	/**
 	* Update the transform box while dragging.
@@ -499,7 +509,7 @@ var PcCanvas = class extends PcElement {
 		const point = this.pointerPoint(event);
 		const first = app.lasso.nodes[0];
 		const nearFirstNode = first !== void 0 && isNear(app.viewport.canvasToScreen(first), point, 8);
-		if (kind !== "polygon") event.currentTarget.setPointerCapture(event.pointerId);
+		if (kind !== "polygon") this.capturePointer(event.pointerId);
 		app.applyLasso(app.lasso.down(kind, app.viewport.screenToCanvas(point), event, nearFirstNode));
 	}
 	/**
@@ -563,7 +573,7 @@ var PcCanvas = class extends PcElement {
 			pointerId: event.pointerId,
 			layerId: layer.id
 		};
-		event.currentTarget.setPointerCapture(event.pointerId);
+		this.capturePointer(event.pointerId);
 		const erasing = app.activeTool === Tool.Eraser;
 		app.strokes.begin({
 			layer,
@@ -594,12 +604,42 @@ var PcCanvas = class extends PcElement {
 		};
 	}
 	/**
+	* Send a pointer's events to the canvas until it's lifted, even outside it.
+	*/
+	capturePointer(pointerId) {
+		this.renderRoot.querySelector("canvas.scene")?.setPointerCapture?.(pointerId);
+	}
+	/**
+	* Handle a press, unless it closed a panel or menu (see `isDismissingPress`): that press is held, and only starts
+	* drawing (or whatever the tool does) once it moves `DRAG_THRESHOLD` pixels, so tapping the canvas to close a panel
+	* leaves no mark.
+	*/
+	onPointerDown(event) {
+		if (!this.app) return;
+		if (!isDismissingPress(event)) {
+			this.pointerDown(event);
+			return;
+		}
+		this.heldPress = event;
+		this.capturePointer(event.pointerId);
+	}
+	/**
+	* Start a held press (see `onPointerDown`) once it moves far enough. Returns whether the pointer is still held.
+	*/
+	releaseHeldPress(event) {
+		const held = this.heldPress;
+		if (held?.pointerId !== event.pointerId) return false;
+		if (Math.hypot(event.clientX - held.clientX, event.clientY - held.clientY) < 4) return true;
+		this.heldPress = null;
+		this.pointerDown(held);
+		return false;
+	}
+	/**
 	* Start panning, or zoom, depending on the tool and button. In focus pen mode, touches only pan, pinch and make
 	* gestures, and are ignored while a pen is down or just lifted (see `focusPenTouch`).
 	*/
-	onPointerDown(event) {
+	pointerDown(event) {
 		const app = this.app;
-		if (!app) return;
 		if (event.pointerType === "pen") this.penDown(event);
 		if (event.pointerType === "touch") {
 			const ignored = this.focusPenTouch(event);
@@ -632,7 +672,7 @@ var PcCanvas = class extends PcElement {
 				pointerId: event.pointerId,
 				last: point
 			};
-			event.currentTarget.setPointerCapture(event.pointerId);
+			this.capturePointer(event.pointerId);
 			this.updateCursor();
 		} else if (app.activeTool === Tool.Zoom && event.button === 0) {
 			if (event.altKey) app.viewport.zoomOut(point);
@@ -645,6 +685,7 @@ var PcCanvas = class extends PcElement {
 	onPointerMove(event) {
 		const app = this.app;
 		if (!app || this.ignoredTouches.has(event.pointerId)) return;
+		if (this.releaseHeldPress(event)) return;
 		const point = this.pointerPoint(event);
 		if (this.touches.has(event.pointerId)) {
 			this.touches.set(event.pointerId, point);
@@ -680,10 +721,18 @@ var PcCanvas = class extends PcElement {
 		this.requestOverlay();
 	}
 	/**
+	* Forget a held press lifted (or cancelled) before it moved far enough. Returns whether it was one.
+	*/
+	dropHeldPress(event) {
+		if (this.heldPress?.pointerId !== event.pointerId) return false;
+		this.heldPress = null;
+		return true;
+	}
+	/**
 	* Finish a stroke (writing it into the layer) or stop panning.
 	*/
 	onPointerUp(event) {
-		if (this.ignoredTouches.delete(event.pointerId)) return;
+		if (this.ignoredTouches.delete(event.pointerId) || this.dropHeldPress(event)) return;
 		this.penUp(event);
 		this.touchUp(event);
 		if (this.sampling?.pointerId === event.pointerId) this.finishSample();
@@ -713,7 +762,7 @@ var PcCanvas = class extends PcElement {
 	* Abandon a stroke or pan when the browser cancels the pointer (e.g. a system gesture).
 	*/
 	onPointerCancel(event) {
-		if (this.ignoredTouches.delete(event.pointerId)) return;
+		if (this.ignoredTouches.delete(event.pointerId) || this.dropHeldPress(event)) return;
 		this.navigationTouches.delete(event.pointerId);
 		this.penUp(event);
 		this.touchUp(event);
@@ -791,7 +840,7 @@ var PcCanvas = class extends PcElement {
 			this.drag = null;
 			const [a, b] = [...this.touches.values()];
 			this.pinch = touchPair(a, b);
-			event.currentTarget.setPointerCapture(event.pointerId);
+			this.capturePointer(event.pointerId);
 		}
 		return true;
 	}
@@ -809,7 +858,7 @@ var PcCanvas = class extends PcElement {
 			point,
 			screen
 		};
-		event.currentTarget.setPointerCapture(event.pointerId);
+		this.capturePointer(event.pointerId);
 		this.updateCursor();
 		this.drawOverlay();
 	}
@@ -841,6 +890,7 @@ var PcCanvas = class extends PcElement {
 		if (!ctx) return;
 		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 		const sampling = this.sampling;
+		this.sampler.hidden = !sampling;
 		if (!sampling) return;
 		const ratio = this.pixelRatio();
 		ctx.save();
@@ -1003,4 +1053,4 @@ var PcCanvas = class extends PcElement {
 	}
 };
 defineElement("pc-canvas", PcCanvas);
-export { ANTS_INTERVAL, CHAT_WIDTH_RATIO, HANDLE_GRAB_DISTANCE, LASSO_TOOLS, PEN_LIFT_GRACE_MS, PcCanvas, SAMPLER_HEIGHT, SAMPLER_WIDTH, TOOLBAR_WIDTH, TOUCH_SAMPLER_GAP, cursorFor, interfaceInsets, samplerPosition };
+export { ANTS_INTERVAL, CHAT_WIDTH_RATIO, HANDLE_GRAB_DISTANCE, LASSO_TOOLS, MAX_PIXEL_RATIO, PEN_LIFT_GRACE_MS, PcCanvas, SAMPLER_HEIGHT, SAMPLER_WIDTH, TOOLBAR_WIDTH, TOUCH_SAMPLER_GAP, cursorFor, interfaceInsets, samplerPosition };