@rcarls/rc-virtual-canvas 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,12 @@
 # `@rcarls/rc-virtual-canvas`
 
-A virtualized scrollable canvas component. Overlays a transparent scrollable div on top of a slotted `<canvas>` element, dispatching `rc-virtual-canvas-render` events with the current viewport and content rectangles. Consumers draw only what is visible. Built with [Lit 3](https://lit.dev).
+Scrollable virtual canvas for rendering large coordinate-space content.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-virtual-canvas](https://richardcarls.github.io/rc-webcomponents/components/rc-virtual-canvas).
+
+Overlays a transparent scrollable div on top of a slotted `<canvas>` element, dispatching
+`rc-virtual-canvas-render` events with the current viewport and content rectangles.
+Consumers draw only what is visible.
 
 ---
 
@@ -21,7 +27,9 @@ import { RCVirtualCanvas } from '@rcarls/rc-virtual-canvas';    // named class e
 
 ## Basic usage
 
-Place a `<canvas>` inside the component. Set `contentWidth` and `contentHeight` to the total size of your virtual content. On each `rc-virtual-canvas-render` event, use `detail.viewRect` to determine which portion of that content is visible and draw accordingly.
+Place a `<canvas>` inside the component. Set `contentWidth` and `contentHeight` to the
+total size of your virtual content. On each `rc-virtual-canvas-render` event, use
+`detail.viewRect` to determine which portion of that content is visible and draw accordingly.
 
 ```html
 <rc-virtual-canvas
@@ -47,7 +55,9 @@ Place a `<canvas>` inside the component. Set `contentWidth` and `contentHeight`
 </script>
 ```
 
-The canvas element should match the component's rendered size (set via CSS). The virtual content is larger — scrolling is handled by an absolutely-positioned transparent `<div>` that triggers native scroll events.
+The canvas element should match the component's rendered size (set via CSS). The virtual
+content is larger — scrolling is handled by an absolutely-positioned transparent `<div>`
+that triggers native scroll events.
 
 ---
 
@@ -63,6 +73,13 @@ The canvas element should match the component's rendered size (set via CSS). The
 | `renderMode` | `render-mode` | `'continuous' \| 'viewport-change' \| 'manual'` | `'continuous'` | Controls when render events are dispatched |
 | `imageRendering` | `image-rendering` | `'auto' \| 'crisp-edges' \| 'pixelated'` | `'auto'` | Convenience value applied to the slotted canvas via `image-rendering` |
 
+### Read-only properties
+
+| Property | Type | Description |
+|---|---|---|
+| `canvasScaleX` | `number` | Ratio of canvas backing-store pixels to CSS pixels along the x-axis (≈ `devicePixelRatio` when `autoResizeCanvas` is `true`) |
+| `canvasScaleY` | `number` | Ratio of canvas backing-store pixels to CSS pixels along the y-axis |
+
 ### Methods
 
 | Method | Description |

package/dist/custom-elements.json

@@ -46,7 +46,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "An accessible virtual scrollable canvas component.",
+          "description": "A scrollable virtual canvas component.",
           "name": "RCVirtualCanvas",
           "slots": [
             {
@@ -161,7 +161,8 @@
               "type": {
                 "text": "HTMLDivElement"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Shadow DOM scroll container that owns pointer interaction and native scrolling"
             },
             {
               "kind": "field",
@@ -169,7 +170,8 @@
               "type": {
                 "text": "HTMLDivElement"
               },
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Absolutely-positioned div that establishes the virtual scroll range"
             },
             {
               "kind": "field",
@@ -178,7 +180,8 @@
                 "text": "HTMLCanvasElement | null"
               },
               "privacy": "protected",
-              "default": "null"
+              "default": "null",
+              "description": "Currently-tracked slotted canvas element; `null` when no canvas is slotted"
             },
             {
               "kind": "field",
@@ -187,7 +190,8 @@
                 "text": "object"
               },
               "privacy": "protected",
-              "default": "{ x: 0, y: 0, width: 0, height: 0, }"
+              "default": "{ x: 0, y: 0, width: 0, height: 0, }",
+              "description": "Mutable current-frame viewport geometry; call `getViewRect()` for a frozen snapshot"
             },
             {
               "kind": "field",
@@ -196,18 +200,21 @@
                 "text": "object"
               },
               "privacy": "protected",
-              "default": "{ x: 0, y: 0, width: 0, height: 0, }"
+              "default": "{ x: 0, y: 0, width: 0, height: 0, }",
+              "description": "Mutable content bounds; updated when `contentWidth` or `contentHeight` change"
             },
             {
               "kind": "field",
               "name": "_resizeObserver",
               "privacy": "protected",
-              "default": "new ResizeObserver( (entries: ResizeObserverEntry[]) => { for (const entry of entries) { const devicePixelBoxSize = Array.isArray( entry.devicePixelContentBoxSize, ) ? entry.devicePixelContentBoxSize[0] : entry.devicePixelContentBoxSize; this._viewRect.width = this._getMeasuredCanvasWidth( devicePixelBoxSize?.inlineSize ?? Math.round(entry.contentRect.width * window.devicePixelRatio), ); this._viewRect.height = this._getMeasuredCanvasHeight( devicePixelBoxSize?.blockSize ?? Math.round(entry.contentRect.height * window.devicePixelRatio), ); this._syncCanvasBackingStore(); this._scheduleRender('viewport-change'); } }, )"
+              "default": "new ResizeObserver((entries: ResizeObserverEntry[]) => { for (const entry of entries) { const devicePixelBoxSize = Array.isArray(entry.devicePixelContentBoxSize) ? entry.devicePixelContentBoxSize[0] : entry.devicePixelContentBoxSize; this._viewRect.width = this._getMeasuredCanvasWidth( devicePixelBoxSize?.inlineSize ?? Math.round(entry.contentRect.width * window.devicePixelRatio), ); this._viewRect.height = this._getMeasuredCanvasHeight( devicePixelBoxSize?.blockSize ?? Math.round(entry.contentRect.height * window.devicePixelRatio), ); this._syncCanvasBackingStore(); this._scheduleRender('viewport-change'); } })",
+              "description": "Watches the slotted canvas for DPR-accurate dimension changes"
             },
             {
               "kind": "method",
               "name": "_onScroll",
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Reads scroll position from the root container and schedules a render"
             },
             {
               "kind": "method",
@@ -220,11 +227,13 @@
                     "text": "Event"
                   }
                 }
-              ]
+              ],
+              "description": "Replaces canvas tracking and re-registers the resize observer when slot content changes"
             },
             {
               "kind": "method",
-              "name": "getViewRect"
+              "name": "getViewRect",
+              "description": "Returns a frozen snapshot of the current viewport rectangle.\n\nSafe to keep between frames — the returned object will not be mutated\nby future scroll or resize work."
             },
             {
               "kind": "method",
@@ -234,22 +243,26 @@
                   "name": "x",
                   "type": {
                     "text": "number"
-                  }
+                  },
+                  "description": "Content x coordinate in CSS pixels"
                 },
                 {
                   "name": "y",
                   "type": {
                     "text": "number"
-                  }
+                  },
+                  "description": "Content y coordinate in CSS pixels"
                 },
                 {
                   "name": "options",
                   "default": "{}",
                   "type": {
                     "text": "ScrollOptions"
-                  }
+                  },
+                  "description": "Native scroll options passed to scrollTo"
                 }
-              ]
+              ],
+              "description": "Scrolls so the content coordinate is at the viewport origin."
             },
             {
               "kind": "method",
@@ -259,22 +272,26 @@
                   "name": "x",
                   "type": {
                     "text": "number"
-                  }
+                  },
+                  "description": "Content x coordinate in CSS pixels"
                 },
                 {
                   "name": "y",
                   "type": {
                     "text": "number"
-                  }
+                  },
+                  "description": "Content y coordinate in CSS pixels"
                 },
                 {
                   "name": "options",
                   "default": "{}",
                   "type": {
                     "text": "ScrollOptions"
-                  }
+                  },
+                  "description": "Native scroll options passed to scrollTo"
                 }
-              ]
+              ],
+              "description": "Scrolls so the content coordinate is centered in the viewport."
             },
             {
               "kind": "method",
@@ -284,15 +301,18 @@
                   "name": "clientX",
                   "type": {
                     "text": "number"
-                  }
+                  },
+                  "description": "Browser client x coordinate (e.g. from a pointer event)"
                 },
                 {
                   "name": "clientY",
                   "type": {
                     "text": "number"
-                  }
+                  },
+                  "description": "Browser client y coordinate"
                 }
-              ]
+              ],
+              "description": "Converts browser client coordinates to content coordinates using the current\nbacking-store scale."
             },
             {
               "kind": "method",
@@ -302,15 +322,18 @@
                   "name": "x",
                   "type": {
                     "text": "number"
-                  }
+                  },
+                  "description": "Content x coordinate in CSS pixels"
                 },
                 {
                   "name": "y",
                   "type": {
                     "text": "number"
-                  }
+                  },
+                  "description": "Content y coordinate in CSS pixels"
                 }
-              ]
+              ],
+              "description": "Converts content coordinates back to browser client coordinates."
             },
             {
               "kind": "method",
@@ -321,9 +344,29 @@
                   "default": "'manual'",
                   "type": {
                     "text": "RCVirtualCanvasRenderReason"
-                  }
+                  },
+                  "description": "Render reason reported in the event detail"
                 }
-              ]
+              ],
+              "description": "Queues a render event on the next animation frame.\n\nRequired when `renderMode` is `'manual'`. In other modes the component\nschedules renders automatically; calling this with reason `'animation-frame'`\nis a no-op when `renderMode` is `'viewport-change'`."
+            },
+            {
+              "kind": "field",
+              "name": "canvasScaleX",
+              "type": {
+                "text": "number"
+              },
+              "description": "Ratio of canvas backing-store pixels to CSS pixels along the x-axis.\n\nEquals `devicePixelRatio` when `autoResizeCanvas` is `true`. Use as the x-scale\nfactor in `ctx.scale()` to draw at CSS pixel resolution.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "canvasScaleY",
+              "type": {
+                "text": "number"
+              },
+              "description": "Ratio of canvas backing-store pixels to CSS pixels along the y-axis.\n\nEquals `devicePixelRatio` when `autoResizeCanvas` is `true`. Use as the y-scale\nfactor in `ctx.scale()` to draw at CSS pixel resolution.",
+              "readonly": true
             },
             {
               "kind": "method",
@@ -336,7 +379,8 @@
                     "text": "PointerEvent | MouseEvent"
                   }
                 }
-              ]
+              ],
+              "description": "Maps pointer and mouse events to content coordinates and dispatches `rc-virtual-canvas-pointer`"
             },
             {
               "kind": "method",
@@ -365,9 +409,11 @@
                   "name": "time",
                   "type": {
                     "text": "DOMHighResTimeStamp"
-                  }
+                  },
+                  "description": "High-resolution timestamp from `requestAnimationFrame`"
                 }
-              ]
+              ],
+              "description": "RAF callback. Dispatches `rc-virtual-canvas-render` and re-schedules in continuous mode."
             },
             {
               "kind": "method",

package/dist/{rc-virtual-canvas-BJQbqNEu.js → rc-virtual-canvas-CUVahMP7.js}

@@ -1,5 +1,5 @@
 import { css as _, LitElement as p, html as g } from "lit";
-import { property as h, query as u, state as l } from "lit/decorators.js";
+import { property as h, query as u, state as d } from "lit/decorators.js";
 import { styleMap as b } from "lit/directives/style-map.js";
 const w = _`
   *,
@@ -70,9 +70,9 @@ const w = _`
     image-rendering: var(--rc-virtual-canvas-image-rendering, auto);
   }
 `;
-var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (r, t, e, i) => {
-  for (var s = i > 1 ? void 0 : i ? f(t, e) : t, a = r.length - 1, d; a >= 0; a--)
-    (d = r[a]) && (s = (i ? d(t, e, s) : d(s)) || s);
+var m = Object.defineProperty, R = Object.getOwnPropertyDescriptor, o = (r, t, e, i) => {
+  for (var s = i > 1 ? void 0 : i ? R(t, e) : t, a = r.length - 1, l; a >= 0; a--)
+    (l = r[a]) && (s = (i ? l(t, e, s) : l(s)) || s);
   return i && s && m(t, e, s), s;
 };
 function c(r) {
@@ -95,20 +95,16 @@ const v = class v extends p {
       y: 0,
       width: 0,
       height: 0
-    }, this._resizeObserver = new ResizeObserver(
-      (t) => {
-        for (const e of t) {
-          const i = Array.isArray(
-            e.devicePixelContentBoxSize
-          ) ? e.devicePixelContentBoxSize[0] : e.devicePixelContentBoxSize;
-          this._viewRect.width = this._getMeasuredCanvasWidth(
-            i?.inlineSize ?? Math.round(e.contentRect.width * window.devicePixelRatio)
-          ), this._viewRect.height = this._getMeasuredCanvasHeight(
-            i?.blockSize ?? Math.round(e.contentRect.height * window.devicePixelRatio)
-          ), this._syncCanvasBackingStore(), this._scheduleRender("viewport-change");
-        }
+    }, this._resizeObserver = new ResizeObserver((t) => {
+      for (const e of t) {
+        const i = Array.isArray(e.devicePixelContentBoxSize) ? e.devicePixelContentBoxSize[0] : e.devicePixelContentBoxSize;
+        this._viewRect.width = this._getMeasuredCanvasWidth(
+          i?.inlineSize ?? Math.round(e.contentRect.width * window.devicePixelRatio)
+        ), this._viewRect.height = this._getMeasuredCanvasHeight(
+          i?.blockSize ?? Math.round(e.contentRect.height * window.devicePixelRatio)
+        ), this._syncCanvasBackingStore(), this._scheduleRender("viewport-change");
       }
-    );
+    });
   }
   set contentWidth(t) {
     const e = this._contentWidth;
@@ -124,9 +120,11 @@ const v = class v extends p {
   get contentHeight() {
     return this._contentHeight;
   }
+  /** Reads scroll position from the root container and schedules a render */
   _onScroll() {
     this._viewRect.x = this._$root.scrollLeft, this._viewRect.y = this._$root.scrollTop, this._scheduleRender("viewport-change");
   }
+  /** Replaces canvas tracking and re-registers the resize observer when slot content changes */
   _onSlotChange(t) {
     this._resizeObserver.disconnect(), this._$canvas = t.currentTarget.assignedElements().filter((e) => e instanceof HTMLCanvasElement).at(0) ?? null, this._$canvas != null && (this._viewRect = {
       x: this._$root.scrollLeft ?? 0,
@@ -137,9 +135,22 @@ const v = class v extends p {
       box: "device-pixel-content-box"
     }), this._scheduleRender("viewport-change"));
   }
+  /**
+   * Returns a frozen snapshot of the current viewport rectangle.
+   *
+   * Safe to keep between frames — the returned object will not be mutated
+   * by future scroll or resize work.
+   */
   getViewRect() {
     return c(this._viewRect);
   }
+  /**
+   * Scrolls so the content coordinate is at the viewport origin.
+   *
+   * @param x - Content x coordinate in CSS pixels
+   * @param y - Content y coordinate in CSS pixels
+   * @param options - Native scroll options passed to scrollTo
+   */
   scrollToContent(t, e, i = {}) {
     this._$root.scrollTo({
       ...i,
@@ -147,6 +158,13 @@ const v = class v extends p {
       top: e
     }), this._viewRect.x = this._$root.scrollLeft, this._viewRect.y = this._$root.scrollTop, this._scheduleRender("viewport-change");
   }
+  /**
+   * Scrolls so the content coordinate is centered in the viewport.
+   *
+   * @param x - Content x coordinate in CSS pixels
+   * @param y - Content y coordinate in CSS pixels
+   * @param options - Native scroll options passed to scrollTo
+   */
   centerOnContent(t, e, i = {}) {
     this.scrollToContent(
       t - this._$root.clientWidth * 0.5,
@@ -154,6 +172,19 @@ const v = class v extends p {
       i
     );
   }
+  /**
+   * Converts browser client coordinates to content coordinates using the current
+   * backing-store scale.
+   *
+   * @param clientX - Browser client x coordinate (e.g. from a pointer event)
+   * @param clientY - Browser client y coordinate
+   *
+   * @example
+   * vc.addEventListener('pointerdown', (e) => {
+   *   const { x, y } = vc.clientToContent(e.clientX, e.clientY);
+   *   placeMarkerAt(x, y);
+   * });
+   */
   clientToContent(t, e) {
     const i = this._getCanvasClientRect(), s = this._getViewportScaleX(i), a = this._getViewportScaleY(i);
     return Object.freeze({
@@ -161,6 +192,17 @@ const v = class v extends p {
       y: this._viewRect.y + (e - i.top) * a
     });
   }
+  /**
+   * Converts content coordinates back to browser client coordinates.
+   *
+   * @param x - Content x coordinate in CSS pixels
+   * @param y - Content y coordinate in CSS pixels
+   *
+   * @example
+   * const { x, y } = vc.contentToClient(contentX, contentY);
+   * tooltip.style.left = `${x}px`;
+   * tooltip.style.top = `${y}px`;
+   */
   contentToClient(t, e) {
     const i = this._getCanvasClientRect(), s = this._getViewportScaleX(i), a = this._getViewportScaleY(i);
     return Object.freeze({
@@ -168,11 +210,50 @@ const v = class v extends p {
       y: i.top + (e - this._viewRect.y) / a
     });
   }
+  /**
+   * Queues a render event on the next animation frame.
+   *
+   * Required when `renderMode` is `'manual'`. In other modes the component
+   * schedules renders automatically; calling this with reason `'animation-frame'`
+   * is a no-op when `renderMode` is `'viewport-change'`.
+   *
+   * @param reason - Render reason reported in the event detail
+   */
   requestRender(t = "manual") {
     this._scheduleRender(t);
   }
+  /**
+   * Ratio of canvas backing-store pixels to CSS pixels along the x-axis.
+   *
+   * Equals `devicePixelRatio` when `autoResizeCanvas` is `true`. Use as the x-scale
+   * factor in `ctx.scale()` to draw at CSS pixel resolution.
+   *
+   * @example
+   * vc.addEventListener('rc-virtual-canvas-render', ({ detail: { viewRect } }) => {
+   *   ctx.save();
+   *   ctx.scale(vc.canvasScaleX, vc.canvasScaleY);
+   *   drawScene(ctx, viewRect);
+   *   ctx.restore();
+   * });
+   */
+  get canvasScaleX() {
+    const t = this._getCanvasClientRect();
+    return this._getViewportScaleX(t);
+  }
+  /**
+   * Ratio of canvas backing-store pixels to CSS pixels along the y-axis.
+   *
+   * Equals `devicePixelRatio` when `autoResizeCanvas` is `true`. Use as the y-scale
+   * factor in `ctx.scale()` to draw at CSS pixel resolution.
+   */
+  get canvasScaleY() {
+    const t = this._getCanvasClientRect();
+    return this._getViewportScaleY(t);
+  }
+  /** Maps pointer and mouse events to content coordinates and dispatches `rc-virtual-canvas-pointer` */
   _onPointerEvent(t) {
-    if (this._handledPointerEvents.has(t) || this._isOverlayEvent(t)) return;
+    if (this._handledPointerEvents.has(t) || this._isOverlayEvent(t))
+      return;
     this._handledPointerEvents.add(t);
     const e = this.clientToContent(t.clientX, t.clientY);
     this.dispatchEvent(
@@ -199,10 +280,13 @@ const v = class v extends p {
     ) || t.preventDefault();
   }
   _isOverlayEvent(t) {
-    return t.composedPath().some(
-      (e) => e instanceof HTMLSlotElement && e.name === "overlay"
-    );
+    return t.composedPath().some((e) => e instanceof HTMLSlotElement && e.name === "overlay");
   }
+  /**
+   * RAF callback. Dispatches `rc-virtual-canvas-render` and re-schedules in continuous mode.
+   *
+   * @param time - High-resolution timestamp from `requestAnimationFrame`
+   */
   _update(t) {
     if (this._rafHandle = 0, !this.isConnected || this._$canvas == null)
       return;
@@ -220,17 +304,17 @@ const v = class v extends p {
       })
     ), this.renderMode === "continuous" && this._scheduleRender("animation-frame");
   }
+  /** Registers pointer event listeners and starts rendering in continuous mode */
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("pointerdown", this._boundPointerEvent), this.addEventListener("pointermove", this._boundPointerEvent), this.addEventListener("pointerup", this._boundPointerEvent), this.addEventListener("click", this._boundPointerEvent), this.addEventListener("dblclick", this._boundPointerEvent), this.addEventListener("contextmenu", this._boundPointerEvent), this._rafHandle && (cancelAnimationFrame(this._rafHandle), this._rafHandle = 0), this.renderMode === "continuous" && this._scheduleRender("animation-frame");
   }
+  /** Cancels any pending animation frame, disconnects the resize observer, and removes pointer listeners */
   disconnectedCallback() {
     super.disconnectedCallback(), cancelAnimationFrame(this._rafHandle), this._rafHandle = 0, this._resizeObserver.disconnect(), this.removeEventListener("pointerdown", this._boundPointerEvent), this.removeEventListener("pointermove", this._boundPointerEvent), this.removeEventListener("pointerup", this._boundPointerEvent), this.removeEventListener("click", this._boundPointerEvent), this.removeEventListener("dblclick", this._boundPointerEvent), this.removeEventListener("contextmenu", this._boundPointerEvent);
   }
+  /** Reacts to `renderMode`, `autoResizeCanvas`, and `imageRendering` property changes */
   updated(t) {
-    t.has("renderMode") && (this.renderMode === "continuous" ? this._scheduleRender("animation-frame") : this._pendingRenderReason === "animation-frame" ? (this._rafHandle && (cancelAnimationFrame(this._rafHandle), this._rafHandle = 0), this._pendingRenderReason = void 0) : this.renderMode === "viewport-change" && this._scheduleRender("viewport-change")), t.has("autoResizeCanvas") && this._syncCanvasBackingStore(), t.has("imageRendering") && this.style.setProperty(
-      "--rc-virtual-canvas-image-rendering",
-      this.imageRendering
-    );
+    t.has("renderMode") && (this.renderMode === "continuous" ? this._scheduleRender("animation-frame") : this._pendingRenderReason === "animation-frame" ? (this._rafHandle && (cancelAnimationFrame(this._rafHandle), this._rafHandle = 0), this._pendingRenderReason = void 0) : this.renderMode === "viewport-change" && this._scheduleRender("viewport-change")), t.has("autoResizeCanvas") && this._syncCanvasBackingStore(), t.has("imageRendering") && this.style.setProperty("--rc-virtual-canvas-image-rendering", this.imageRendering);
   }
   _scheduleRender(t) {
     this.renderMode === "manual" && t !== "manual" || this.renderMode === "viewport-change" && t === "animation-frame" || (this._pendingRenderReason = t, !(!this.isConnected || this._rafHandle) && (this._rafHandle = window.requestAnimationFrame(this._boundUpdate)));
@@ -272,6 +356,7 @@ const v = class v extends p {
         <div id="overlay" part="overlay">
           <slot name="overlay"></slot>
         </div>
+
         <div
           id="placeholder"
           style=${b({
@@ -309,15 +394,15 @@ o([
   u("#placeholder", !0)
 ], n.prototype, "_$placeholder", 2);
 o([
-  l()
+  d()
 ], n.prototype, "_$canvas", 2);
 o([
-  l()
+  d()
 ], n.prototype, "_viewRect", 2);
 o([
-  l()
+  d()
 ], n.prototype, "_contentRect", 2);
 export {
   n as R
 };
-//# sourceMappingURL=rc-virtual-canvas-BJQbqNEu.js.map
+//# sourceMappingURL=rc-virtual-canvas-CUVahMP7.js.map

package/dist/rc-virtual-canvas-CUVahMP7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-virtual-canvas-CUVahMP7.js","sources":["../src/rc-virtual-canvas.styles.ts","../src/rc-virtual-canvas.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const virtualCanvasStyles = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    position: relative;\n    display: block;\n    width: max-content;\n    line-height: 0; /* remove extra space under slotted <canvas> element(s) */\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  #root {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n    scrollbar-width: var(--rc-virtual-canvas-scrollbar-width, thin);\n  }\n\n  #root::-webkit-scrollbar {\n    width: var(--rc-virtual-canvas-scrollbar-size, auto);\n    height: var(--rc-virtual-canvas-scrollbar-size, auto);\n  }\n\n  #root::-webkit-scrollbar-thumb {\n    background: var(--rc-virtual-canvas-scrollbar-thumb-background, ButtonFace);\n  }\n\n  #root::-webkit-scrollbar-button {\n    background: var(--rc-virtual-canvas-scrollbar-button-background, ButtonFace);\n  }\n\n  #root::-webkit-scrollbar-track {\n    background: var(--rc-virtual-canvas-scrollbar-track-background, Canvas);\n  }\n\n  #placeholder {\n    pointer-events: none;\n  }\n\n  #overlay {\n    position: sticky;\n    left: 0;\n    top: 0;\n    z-index: 1;\n    display: block;\n    width: 100%;\n    height: 0;\n    pointer-events: none;\n  }\n\n  ::slotted([slot='overlay']) {\n    pointer-events: auto;\n  }\n\n  ::slotted(canvas) {\n    image-rendering: var(--rc-virtual-canvas-image-rendering, auto);\n  }\n`;\n\nexport default virtualCanvasStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport virtualCanvasStyles from './rc-virtual-canvas.styles';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-virtual-canvas': RCVirtualCanvas;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-virtual-canvas-render': CustomEvent<RCVirtualCanvasRenderInit>;\n    'rc-virtual-canvas-pointer': CustomEvent<RCVirtualCanvasPointerInit>;\n  }\n}\n\n/**\n * Scrollable virtual canvas for rendering large coordinate-space content.\n *\n * `x` and `y` are scroll offsets in CSS pixels; `width` and `height` are the canvas\n * backing-store dimensions in device pixels (DPR-accurate when `autoResizeCanvas` is `true`).\n */\nexport type RCVirtualCanvasViewRect = Readonly<{\n  /** Scroll offset x in content space (CSS px) */\n  x: number;\n\n  /** Scroll offset y in content space (CSS px) */\n  y: number;\n\n  /** Visible width in device pixels */\n  width: number;\n\n  /** Visible height in device pixels */\n  height: number;\n}>;\n\n/** Controls when `rc-virtual-canvas-render` events are dispatched */\nexport type RCVirtualCanvasRenderMode = 'continuous' | 'viewport-change' | 'manual';\n\n/** Identifies what triggered a render event */\nexport type RCVirtualCanvasRenderReason = 'animation-frame' | 'viewport-change' | 'manual';\n\n/** Content-space coordinate pair returned by coordinate-conversion methods */\nexport type RCVirtualCanvasPoint = Readonly<{\n  /** Content space x coordinate in CSS pixels */\n  x: number;\n\n  /** Content space y coordinate in CSS pixels */\n  y: number;\n}>;\n\n/**\n * Detail shape for `rc-virtual-canvas-pointer` events.\n *\n * Carries the source event's coordinates in both browser-client and content space,\n * along with all modifier key state.\n */\nexport type RCVirtualCanvasPointerInit = {\n  /** DOM event type (e.g. `'pointerdown'`, `'click'`) */\n  type: string;\n\n  /** Browser client x coordinate from the source event */\n  clientX: number;\n\n  /** Browser client y coordinate from the source event */\n  clientY: number;\n\n  /** Content x coordinate mapped through the current backing-store scale */\n  contentX: number;\n\n  /** Content y coordinate mapped through the current backing-store scale */\n  contentY: number;\n\n  /** Frozen viewport snapshot at the moment the pointer event fired */\n  viewRect: RCVirtualCanvasViewRect;\n\n  /** Mouse button index from the source event */\n  button: number;\n\n  /** Active button bitmask from the source event */\n  buttons: number;\n\n  /** Whether the Alt key was held */\n  altKey: boolean;\n\n  /** Whether the Ctrl key was held */\n  ctrlKey: boolean;\n\n  /** Whether the Shift key was held */\n  shiftKey: boolean;\n\n  /** Whether the Meta key was held */\n  metaKey: boolean;\n\n  /** The original DOM event that produced this detail */\n  sourceEvent: PointerEvent | MouseEvent;\n};\n\n/** CSS `image-rendering` value applied to the slotted canvas */\nexport type RCVirtualCanvasImageRendering = 'auto' | 'crisp-edges' | 'pixelated';\n\n/** Detail shape for `rc-virtual-canvas-render` events */\nexport type RCVirtualCanvasRenderInit = {\n  /** High-resolution timestamp from `requestAnimationFrame` */\n  time: DOMHighResTimeStamp;\n\n  /** What triggered this render */\n  reason: RCVirtualCanvasRenderReason;\n\n  /** Frozen snapshot of the viewport for this frame */\n  viewRect: RCVirtualCanvasViewRect;\n\n  /** Frozen snapshot of the full content bounds for this frame */\n  contentRect: RCVirtualCanvasViewRect;\n};\n\nfunction createRectSnapshot(rect: RCVirtualCanvasViewRect) {\n  return Object.freeze({\n    x: rect.x,\n    y: rect.y,\n    width: rect.width,\n    height: rect.height,\n  });\n}\n\n/**\n * A scrollable virtual canvas component.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-virtual-canvas rc-virtual-canvas docs}\n *\n * @slot - The HTMLCanvasElement\n * @slot overlay - Optional viewport-positioned content rendered inside the\n * scroll container above the canvas.\n *\n * @fires rc-virtual-canvas-render - Fires with viewport data when the canvas should redraw.\n * @fires rc-virtual-canvas-pointer - Fires pointer/mouse input mapped to virtual content coordinates.\n */\nexport class RCVirtualCanvas extends LitElement {\n  static styles = [virtualCanvasStyles];\n\n  private _rafHandle: number = 0;\n  private _pendingRenderReason?: RCVirtualCanvasRenderReason;\n  private readonly _handledPointerEvents = new WeakSet<Event>();\n\n  // Stored bound reference so the same closure is used for scheduling and\n  // cancellation — `bind()` returns a new function every call.\n  private readonly _boundUpdate = (time: DOMHighResTimeStamp) => this._update(time);\n\n  private readonly _boundPointerEvent = (event: PointerEvent | MouseEvent) =>\n    this._onPointerEvent(event);\n\n  /** Pixel width of the virtual content */\n  @property({ type: Number })\n  set contentWidth(val: number) {\n    const oldValue = this._contentWidth;\n\n    this._contentWidth = val;\n\n    this._contentRect.width = this._contentWidth;\n    this.requestUpdate('contentWidth', oldValue);\n    this._scheduleRender('viewport-change');\n  }\n  get contentWidth() {\n    return this._contentWidth;\n  }\n  protected _contentWidth: number = 0;\n\n  /** Pixel height of the virtual content */\n  @property({ type: Number })\n  set contentHeight(val: number) {\n    const oldValue = this._contentHeight;\n\n    this._contentHeight = val;\n\n    this._contentRect.height = this._contentHeight;\n    this.requestUpdate('contentHeight', oldValue);\n    this._scheduleRender('viewport-change');\n  }\n  get contentHeight() {\n    return this._contentHeight;\n  }\n  protected _contentHeight: number = 0;\n\n  /** When true, keep the slotted canvas backing store aligned to the viewport. */\n  @property({ attribute: 'auto-resize-canvas', type: Boolean })\n  autoResizeCanvas: boolean = true;\n\n  /** Controls when render events are dispatched. */\n  @property({ attribute: 'render-mode' })\n  renderMode: RCVirtualCanvasRenderMode = 'continuous';\n\n  /** Convenience image-rendering value applied to the slotted canvas. */\n  @property({ attribute: 'image-rendering' })\n  imageRendering: RCVirtualCanvasImageRendering = 'auto';\n\n  /** Shadow DOM scroll container that owns pointer interaction and native scrolling */\n  @query('#root', true)\n  protected _$root!: HTMLDivElement;\n\n  /** Absolutely-positioned div that establishes the virtual scroll range */\n  @query('#placeholder', true)\n  protected _$placeholder!: HTMLDivElement;\n\n  /** Currently-tracked slotted canvas element; `null` when no canvas is slotted */\n  @state()\n  protected _$canvas: HTMLCanvasElement | null = null;\n\n  /** Mutable current-frame viewport geometry; call `getViewRect()` for a frozen snapshot */\n  @state()\n  protected _viewRect = {\n    x: 0,\n    y: 0,\n    width: 0,\n    height: 0,\n  };\n\n  /** Mutable content bounds; updated when `contentWidth` or `contentHeight` change */\n  @state()\n  protected _contentRect = {\n    x: 0,\n    y: 0,\n    width: 0,\n    height: 0,\n  };\n\n  /** Watches the slotted canvas for DPR-accurate dimension changes */\n  protected _resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n    for (const entry of entries) {\n      const devicePixelBoxSize = Array.isArray(entry.devicePixelContentBoxSize)\n        ? entry.devicePixelContentBoxSize[0]\n        : entry.devicePixelContentBoxSize;\n\n      this._viewRect.width = this._getMeasuredCanvasWidth(\n        devicePixelBoxSize?.inlineSize ??\n          Math.round(entry.contentRect.width * window.devicePixelRatio),\n      );\n\n      this._viewRect.height = this._getMeasuredCanvasHeight(\n        devicePixelBoxSize?.blockSize ??\n          Math.round(entry.contentRect.height * window.devicePixelRatio),\n      );\n\n      this._syncCanvasBackingStore();\n      this._scheduleRender('viewport-change');\n    }\n  });\n\n  /** Reads scroll position from the root container and schedules a render */\n  protected _onScroll() {\n    this._viewRect.x = this._$root.scrollLeft;\n    this._viewRect.y = this._$root.scrollTop;\n\n    this._scheduleRender('viewport-change');\n  }\n\n  /** Replaces canvas tracking and re-registers the resize observer when slot content changes */\n  protected _onSlotChange(e: Event) {\n    this._resizeObserver.disconnect();\n\n    this._$canvas =\n      (e.currentTarget as HTMLSlotElement)\n        .assignedElements()\n        .filter((el) => el instanceof HTMLCanvasElement)\n        .at(0) ?? null;\n\n    if (this._$canvas != null) {\n      this._viewRect = {\n        x: this._$root.scrollLeft ?? 0,\n        y: this._$root.scrollTop ?? 0,\n        width: this._getMeasuredCanvasWidth(this._$canvas.clientWidth),\n        height: this._getMeasuredCanvasHeight(this._$canvas.clientHeight),\n      };\n\n      this._syncCanvasBackingStore();\n      this._resizeObserver.observe(this._$canvas, {\n        box: 'device-pixel-content-box',\n      });\n\n      this._scheduleRender('viewport-change');\n    }\n  }\n\n  /**\n   * Returns a frozen snapshot of the current viewport rectangle.\n   *\n   * Safe to keep between frames — the returned object will not be mutated\n   * by future scroll or resize work.\n   */\n  getViewRect() {\n    return createRectSnapshot(this._viewRect);\n  }\n\n  /**\n   * Scrolls so the content coordinate is at the viewport origin.\n   *\n   * @param x - Content x coordinate in CSS pixels\n   * @param y - Content y coordinate in CSS pixels\n   * @param options - Native scroll options passed to scrollTo\n   */\n  scrollToContent(x: number, y: number, options: ScrollOptions = {}) {\n    this._$root.scrollTo({\n      ...options,\n      left: x,\n      top: y,\n    });\n\n    this._viewRect.x = this._$root.scrollLeft;\n    this._viewRect.y = this._$root.scrollTop;\n    this._scheduleRender('viewport-change');\n  }\n\n  /**\n   * Scrolls so the content coordinate is centered in the viewport.\n   *\n   * @param x - Content x coordinate in CSS pixels\n   * @param y - Content y coordinate in CSS pixels\n   * @param options - Native scroll options passed to scrollTo\n   */\n  centerOnContent(x: number, y: number, options: ScrollOptions = {}) {\n    this.scrollToContent(\n      x - this._$root.clientWidth * 0.5,\n      y - this._$root.clientHeight * 0.5,\n      options,\n    );\n  }\n\n  /**\n   * Converts browser client coordinates to content coordinates using the current\n   * backing-store scale.\n   *\n   * @param clientX - Browser client x coordinate (e.g. from a pointer event)\n   * @param clientY - Browser client y coordinate\n   *\n   * @example\n   * vc.addEventListener('pointerdown', (e) => {\n   *   const { x, y } = vc.clientToContent(e.clientX, e.clientY);\n   *   placeMarkerAt(x, y);\n   * });\n   */\n  clientToContent(clientX: number, clientY: number) {\n    const canvasRect = this._getCanvasClientRect();\n    const scaleX = this._getViewportScaleX(canvasRect);\n    const scaleY = this._getViewportScaleY(canvasRect);\n\n    return Object.freeze({\n      x: this._viewRect.x + (clientX - canvasRect.left) * scaleX,\n      y: this._viewRect.y + (clientY - canvasRect.top) * scaleY,\n    });\n  }\n\n  /**\n   * Converts content coordinates back to browser client coordinates.\n   *\n   * @param x - Content x coordinate in CSS pixels\n   * @param y - Content y coordinate in CSS pixels\n   *\n   * @example\n   * const { x, y } = vc.contentToClient(contentX, contentY);\n   * tooltip.style.left = `${x}px`;\n   * tooltip.style.top = `${y}px`;\n   */\n  contentToClient(x: number, y: number) {\n    const canvasRect = this._getCanvasClientRect();\n    const scaleX = this._getViewportScaleX(canvasRect);\n    const scaleY = this._getViewportScaleY(canvasRect);\n\n    return Object.freeze({\n      x: canvasRect.left + (x - this._viewRect.x) / scaleX,\n      y: canvasRect.top + (y - this._viewRect.y) / scaleY,\n    });\n  }\n\n  /**\n   * Queues a render event on the next animation frame.\n   *\n   * Required when `renderMode` is `'manual'`. In other modes the component\n   * schedules renders automatically; calling this with reason `'animation-frame'`\n   * is a no-op when `renderMode` is `'viewport-change'`.\n   *\n   * @param reason - Render reason reported in the event detail\n   */\n  requestRender(reason: RCVirtualCanvasRenderReason = 'manual') {\n    this._scheduleRender(reason);\n  }\n\n  /**\n   * Ratio of canvas backing-store pixels to CSS pixels along the x-axis.\n   *\n   * Equals `devicePixelRatio` when `autoResizeCanvas` is `true`. Use as the x-scale\n   * factor in `ctx.scale()` to draw at CSS pixel resolution.\n   *\n   * @example\n   * vc.addEventListener('rc-virtual-canvas-render', ({ detail: { viewRect } }) => {\n   *   ctx.save();\n   *   ctx.scale(vc.canvasScaleX, vc.canvasScaleY);\n   *   drawScene(ctx, viewRect);\n   *   ctx.restore();\n   * });\n   */\n  get canvasScaleX(): number {\n    const canvasRect = this._getCanvasClientRect();\n\n    return this._getViewportScaleX(canvasRect);\n  }\n\n  /**\n   * Ratio of canvas backing-store pixels to CSS pixels along the y-axis.\n   *\n   * Equals `devicePixelRatio` when `autoResizeCanvas` is `true`. Use as the y-scale\n   * factor in `ctx.scale()` to draw at CSS pixel resolution.\n   */\n  get canvasScaleY(): number {\n    const canvasRect = this._getCanvasClientRect();\n\n    return this._getViewportScaleY(canvasRect);\n  }\n\n  /** Maps pointer and mouse events to content coordinates and dispatches `rc-virtual-canvas-pointer` */\n  protected _onPointerEvent(event: PointerEvent | MouseEvent) {\n    if (this._handledPointerEvents.has(event)) {\n      return;\n    }\n\n    if (this._isOverlayEvent(event)) {\n      return;\n    }\n\n    this._handledPointerEvents.add(event);\n\n    const contentPoint = this.clientToContent(event.clientX, event.clientY);\n\n    const shouldContinue = this.dispatchEvent(\n      new CustomEvent<RCVirtualCanvasPointerInit>('rc-virtual-canvas-pointer', {\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n        detail: {\n          type: event.type,\n          clientX: event.clientX,\n          clientY: event.clientY,\n          contentX: contentPoint.x,\n          contentY: contentPoint.y,\n          viewRect: createRectSnapshot(this._viewRect),\n          button: event.button,\n          buttons: event.buttons,\n          altKey: event.altKey,\n          ctrlKey: event.ctrlKey,\n          shiftKey: event.shiftKey,\n          metaKey: event.metaKey,\n          sourceEvent: event,\n        },\n      }),\n    );\n\n    if (!shouldContinue) event.preventDefault();\n  }\n\n  private _isOverlayEvent(event: Event): boolean {\n    return event\n      .composedPath()\n      .some((node) => node instanceof HTMLSlotElement && node.name === 'overlay');\n  }\n\n  /**\n   * RAF callback. Dispatches `rc-virtual-canvas-render` and re-schedules in continuous mode.\n   *\n   * @param time - High-resolution timestamp from `requestAnimationFrame`\n   */\n  protected _update(time: DOMHighResTimeStamp) {\n    this._rafHandle = 0;\n\n    if (!this.isConnected || this._$canvas == null) {\n      return;\n    }\n\n    const reason =\n      this._pendingRenderReason ??\n      (this.renderMode === 'continuous' ? 'animation-frame' : 'manual');\n\n    this._pendingRenderReason = undefined;\n\n    this.dispatchEvent(\n      new CustomEvent<RCVirtualCanvasRenderInit>('rc-virtual-canvas-render', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          time,\n          reason,\n          viewRect: createRectSnapshot(this._viewRect),\n          contentRect: createRectSnapshot(this._contentRect),\n        },\n      }),\n    );\n\n    if (this.renderMode === 'continuous') {\n      this._scheduleRender('animation-frame');\n    }\n  }\n\n  /** Registers pointer event listeners and starts rendering in continuous mode */\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('pointerdown', this._boundPointerEvent);\n    this.addEventListener('pointermove', this._boundPointerEvent);\n    this.addEventListener('pointerup', this._boundPointerEvent);\n    this.addEventListener('click', this._boundPointerEvent);\n    this.addEventListener('dblclick', this._boundPointerEvent);\n    this.addEventListener('contextmenu', this._boundPointerEvent);\n\n    if (this._rafHandle) {\n      cancelAnimationFrame(this._rafHandle);\n      this._rafHandle = 0;\n    }\n\n    if (this.renderMode === 'continuous') {\n      this._scheduleRender('animation-frame');\n    }\n  }\n\n  /** Cancels any pending animation frame, disconnects the resize observer, and removes pointer listeners */\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    cancelAnimationFrame(this._rafHandle);\n    this._rafHandle = 0;\n    this._resizeObserver.disconnect();\n\n    this.removeEventListener('pointerdown', this._boundPointerEvent);\n    this.removeEventListener('pointermove', this._boundPointerEvent);\n    this.removeEventListener('pointerup', this._boundPointerEvent);\n    this.removeEventListener('click', this._boundPointerEvent);\n    this.removeEventListener('dblclick', this._boundPointerEvent);\n    this.removeEventListener('contextmenu', this._boundPointerEvent);\n  }\n\n  /** Reacts to `renderMode`, `autoResizeCanvas`, and `imageRendering` property changes */\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has('renderMode')) {\n      if (this.renderMode === 'continuous') {\n        this._scheduleRender('animation-frame');\n      } else if (this._pendingRenderReason === 'animation-frame') {\n        if (this._rafHandle) {\n          cancelAnimationFrame(this._rafHandle);\n\n          this._rafHandle = 0;\n        }\n\n        this._pendingRenderReason = undefined;\n      } else if (this.renderMode === 'viewport-change') {\n        this._scheduleRender('viewport-change');\n      }\n    }\n\n    if (changed.has('autoResizeCanvas')) {\n      this._syncCanvasBackingStore();\n    }\n\n    if (changed.has('imageRendering')) {\n      this.style.setProperty('--rc-virtual-canvas-image-rendering', this.imageRendering);\n    }\n  }\n\n  private _scheduleRender(reason: RCVirtualCanvasRenderReason) {\n    if (this.renderMode === 'manual' && reason !== 'manual') {\n      return;\n    }\n\n    if (this.renderMode === 'viewport-change' && reason === 'animation-frame') {\n      return;\n    }\n\n    this._pendingRenderReason = reason;\n\n    if (!this.isConnected || this._rafHandle) {\n      return;\n    }\n\n    this._rafHandle = window.requestAnimationFrame(this._boundUpdate);\n  }\n\n  private _syncCanvasBackingStore() {\n    if (!this.autoResizeCanvas || this._$canvas == null) {\n      return;\n    }\n\n    const width = Math.max(0, Math.round(this._viewRect.width));\n    const height = Math.max(0, Math.round(this._viewRect.height));\n\n    if (this._$canvas.width !== width) {\n      this._$canvas.width = width;\n    }\n\n    if (this._$canvas.height !== height) {\n      this._$canvas.height = height;\n    }\n  }\n\n  private _getCanvasClientRect() {\n    if (this._$canvas == null) {\n      return this.getBoundingClientRect();\n    }\n\n    return this._$canvas.getBoundingClientRect();\n  }\n\n  private _getMeasuredCanvasWidth(fallbackWidth: number) {\n    if (!this.autoResizeCanvas && this._$canvas && this._$canvas.width > 0) {\n      return this._$canvas.width;\n    }\n\n    return fallbackWidth;\n  }\n\n  private _getMeasuredCanvasHeight(fallbackHeight: number) {\n    if (!this.autoResizeCanvas && this._$canvas && this._$canvas.height > 0) {\n      return this._$canvas.height;\n    }\n\n    return fallbackHeight;\n  }\n\n  private _getViewportScaleX(canvasRect: DOMRect) {\n    return canvasRect.width > 0 ? this._viewRect.width / canvasRect.width : 1;\n  }\n\n  private _getViewportScaleY(canvasRect: DOMRect) {\n    return canvasRect.height > 0 ? this._viewRect.height / canvasRect.height : 1;\n  }\n\n  render() {\n    return html`\n      <div\n        id=\"root\"\n        part=\"scroller\"\n        @scroll=${this._onScroll}\n        @pointerdown=${this._onPointerEvent}\n        @pointermove=${this._onPointerEvent}\n        @pointerup=${this._onPointerEvent}\n        @click=${this._onPointerEvent}\n        @dblclick=${this._onPointerEvent}\n        @contextmenu=${this._onPointerEvent}\n      >\n        <div id=\"overlay\" part=\"overlay\">\n          <slot name=\"overlay\"></slot>\n        </div>\n\n        <div\n          id=\"placeholder\"\n          style=${styleMap({\n            width: `${this.contentWidth}px`,\n            height: `${this.contentHeight}px`,\n          })}\n        ></div>\n      </div>\n\n      <slot @slotchange=${this._onSlotChange}></slot>\n    `;\n  }\n}\n\nexport default RCVirtualCanvas;\n"],"names":["virtualCanvasStyles","css","createRectSnapshot","rect","_RCVirtualCanvas","LitElement","time","event","entries","entry","devicePixelBoxSize","val","oldValue","e","el","x","y","options","clientX","clientY","canvasRect","scaleX","scaleY","reason","contentPoint","node","changed","width","height","fallbackWidth","fallbackHeight","html","styleMap","RCVirtualCanvas","__decorateClass","property","query","state"],"mappings":"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"}

package/dist/rc-virtual-canvas-define.js

@@ -1,4 +1,4 @@
-import { R as a } from "./rc-virtual-canvas-BJQbqNEu.js";
+import { R as a } from "./rc-virtual-canvas-CUVahMP7.js";
 customElements.get("rc-virtual-canvas") || customElements.define("rc-virtual-canvas", a);
 export {
   a as RCVirtualCanvas

package/dist/rc-virtual-canvas.js

@@ -1,4 +1,4 @@
-import { R as o } from "./rc-virtual-canvas-BJQbqNEu.js";
+import { R as o } from "./rc-virtual-canvas-CUVahMP7.js";
 export {
   o as RCVirtualCanvas
 };

package/dist/types/rc-virtual-canvas.d.ts

@@ -1,53 +1,96 @@
 import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-virtual-canvas': RCVirtualCanvas;
+    }
+    interface HTMLElementEventMap {
+        'rc-virtual-canvas-render': CustomEvent<RCVirtualCanvasRenderInit>;
+        'rc-virtual-canvas-pointer': CustomEvent<RCVirtualCanvasPointerInit>;
+    }
+}
+/**
+ * Scrollable virtual canvas for rendering large coordinate-space content.
+ *
+ * `x` and `y` are scroll offsets in CSS pixels; `width` and `height` are the canvas
+ * backing-store dimensions in device pixels (DPR-accurate when `autoResizeCanvas` is `true`).
+ */
 export type RCVirtualCanvasViewRect = Readonly<{
+    /** Scroll offset x in content space (CSS px) */
     x: number;
+    /** Scroll offset y in content space (CSS px) */
     y: number;
+    /** Visible width in device pixels */
     width: number;
+    /** Visible height in device pixels */
     height: number;
 }>;
+/** Controls when `rc-virtual-canvas-render` events are dispatched */
 export type RCVirtualCanvasRenderMode = 'continuous' | 'viewport-change' | 'manual';
+/** Identifies what triggered a render event */
 export type RCVirtualCanvasRenderReason = 'animation-frame' | 'viewport-change' | 'manual';
+/** Content-space coordinate pair returned by coordinate-conversion methods */
 export type RCVirtualCanvasPoint = Readonly<{
+    /** Content space x coordinate in CSS pixels */
     x: number;
+    /** Content space y coordinate in CSS pixels */
     y: number;
 }>;
+/**
+ * Detail shape for `rc-virtual-canvas-pointer` events.
+ *
+ * Carries the source event's coordinates in both browser-client and content space,
+ * along with all modifier key state.
+ */
 export type RCVirtualCanvasPointerInit = {
+    /** DOM event type (e.g. `'pointerdown'`, `'click'`) */
     type: string;
+    /** Browser client x coordinate from the source event */
     clientX: number;
+    /** Browser client y coordinate from the source event */
     clientY: number;
+    /** Content x coordinate mapped through the current backing-store scale */
     contentX: number;
+    /** Content y coordinate mapped through the current backing-store scale */
     contentY: number;
+    /** Frozen viewport snapshot at the moment the pointer event fired */
     viewRect: RCVirtualCanvasViewRect;
+    /** Mouse button index from the source event */
     button: number;
+    /** Active button bitmask from the source event */
     buttons: number;
+    /** Whether the Alt key was held */
     altKey: boolean;
+    /** Whether the Ctrl key was held */
     ctrlKey: boolean;
+    /** Whether the Shift key was held */
     shiftKey: boolean;
+    /** Whether the Meta key was held */
     metaKey: boolean;
+    /** The original DOM event that produced this detail */
     sourceEvent: PointerEvent | MouseEvent;
 };
+/** CSS `image-rendering` value applied to the slotted canvas */
 export type RCVirtualCanvasImageRendering = 'auto' | 'crisp-edges' | 'pixelated';
+/** Detail shape for `rc-virtual-canvas-render` events */
 export type RCVirtualCanvasRenderInit = {
+    /** High-resolution timestamp from `requestAnimationFrame` */
     time: DOMHighResTimeStamp;
+    /** What triggered this render */
     reason: RCVirtualCanvasRenderReason;
+    /** Frozen snapshot of the viewport for this frame */
     viewRect: RCVirtualCanvasViewRect;
+    /** Frozen snapshot of the full content bounds for this frame */
     contentRect: RCVirtualCanvasViewRect;
 };
-declare global {
-    interface HTMLElementTagNameMap {
-        'rc-virtual-canvas': RCVirtualCanvas;
-    }
-    interface HTMLElementEventMap {
-        'rc-virtual-canvas-render': CustomEvent<RCVirtualCanvasRenderInit>;
-        'rc-virtual-canvas-pointer': CustomEvent<RCVirtualCanvasPointerInit>;
-    }
-}
 /**
- * An accessible virtual scrollable canvas component.
+ * A scrollable virtual canvas component.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-virtual-canvas rc-virtual-canvas docs}
  *
  * @slot - The HTMLCanvasElement
  * @slot overlay - Optional viewport-positioned content rendered inside the
  * scroll container above the canvas.
+ *
  * @fires rc-virtual-canvas-render - Fires with viewport data when the canvas should redraw.
  * @fires rc-virtual-canvas-pointer - Fires pointer/mouse input mapped to virtual content coordinates.
  */
@@ -72,46 +115,138 @@ export declare class RCVirtualCanvas extends LitElement {
     renderMode: RCVirtualCanvasRenderMode;
     /** Convenience image-rendering value applied to the slotted canvas. */
     imageRendering: RCVirtualCanvasImageRendering;
+    /** Shadow DOM scroll container that owns pointer interaction and native scrolling */
     protected _$root: HTMLDivElement;
+    /** Absolutely-positioned div that establishes the virtual scroll range */
     protected _$placeholder: HTMLDivElement;
+    /** Currently-tracked slotted canvas element; `null` when no canvas is slotted */
     protected _$canvas: HTMLCanvasElement | null;
+    /** Mutable current-frame viewport geometry; call `getViewRect()` for a frozen snapshot */
     protected _viewRect: {
         x: number;
         y: number;
         width: number;
         height: number;
     };
+    /** Mutable content bounds; updated when `contentWidth` or `contentHeight` change */
     protected _contentRect: {
         x: number;
         y: number;
         width: number;
         height: number;
     };
+    /** Watches the slotted canvas for DPR-accurate dimension changes */
     protected _resizeObserver: ResizeObserver;
+    /** Reads scroll position from the root container and schedules a render */
     protected _onScroll(): void;
+    /** Replaces canvas tracking and re-registers the resize observer when slot content changes */
     protected _onSlotChange(e: Event): void;
+    /**
+     * Returns a frozen snapshot of the current viewport rectangle.
+     *
+     * Safe to keep between frames — the returned object will not be mutated
+     * by future scroll or resize work.
+     */
     getViewRect(): Readonly<{
         x: number;
         y: number;
         width: number;
         height: number;
     }>;
+    /**
+     * Scrolls so the content coordinate is at the viewport origin.
+     *
+     * @param x - Content x coordinate in CSS pixels
+     * @param y - Content y coordinate in CSS pixels
+     * @param options - Native scroll options passed to scrollTo
+     */
     scrollToContent(x: number, y: number, options?: ScrollOptions): void;
+    /**
+     * Scrolls so the content coordinate is centered in the viewport.
+     *
+     * @param x - Content x coordinate in CSS pixels
+     * @param y - Content y coordinate in CSS pixels
+     * @param options - Native scroll options passed to scrollTo
+     */
     centerOnContent(x: number, y: number, options?: ScrollOptions): void;
+    /**
+     * Converts browser client coordinates to content coordinates using the current
+     * backing-store scale.
+     *
+     * @param clientX - Browser client x coordinate (e.g. from a pointer event)
+     * @param clientY - Browser client y coordinate
+     *
+     * @example
+     * vc.addEventListener('pointerdown', (e) => {
+     *   const { x, y } = vc.clientToContent(e.clientX, e.clientY);
+     *   placeMarkerAt(x, y);
+     * });
+     */
     clientToContent(clientX: number, clientY: number): Readonly<{
         x: number;
         y: number;
     }>;
+    /**
+     * Converts content coordinates back to browser client coordinates.
+     *
+     * @param x - Content x coordinate in CSS pixels
+     * @param y - Content y coordinate in CSS pixels
+     *
+     * @example
+     * const { x, y } = vc.contentToClient(contentX, contentY);
+     * tooltip.style.left = `${x}px`;
+     * tooltip.style.top = `${y}px`;
+     */
     contentToClient(x: number, y: number): Readonly<{
         x: number;
         y: number;
     }>;
+    /**
+     * Queues a render event on the next animation frame.
+     *
+     * Required when `renderMode` is `'manual'`. In other modes the component
+     * schedules renders automatically; calling this with reason `'animation-frame'`
+     * is a no-op when `renderMode` is `'viewport-change'`.
+     *
+     * @param reason - Render reason reported in the event detail
+     */
     requestRender(reason?: RCVirtualCanvasRenderReason): void;
+    /**
+     * Ratio of canvas backing-store pixels to CSS pixels along the x-axis.
+     *
+     * Equals `devicePixelRatio` when `autoResizeCanvas` is `true`. Use as the x-scale
+     * factor in `ctx.scale()` to draw at CSS pixel resolution.
+     *
+     * @example
+     * vc.addEventListener('rc-virtual-canvas-render', ({ detail: { viewRect } }) => {
+     *   ctx.save();
+     *   ctx.scale(vc.canvasScaleX, vc.canvasScaleY);
+     *   drawScene(ctx, viewRect);
+     *   ctx.restore();
+     * });
+     */
+    get canvasScaleX(): number;
+    /**
+     * Ratio of canvas backing-store pixels to CSS pixels along the y-axis.
+     *
+     * Equals `devicePixelRatio` when `autoResizeCanvas` is `true`. Use as the y-scale
+     * factor in `ctx.scale()` to draw at CSS pixel resolution.
+     */
+    get canvasScaleY(): number;
+    /** Maps pointer and mouse events to content coordinates and dispatches `rc-virtual-canvas-pointer` */
     protected _onPointerEvent(event: PointerEvent | MouseEvent): void;
     private _isOverlayEvent;
+    /**
+     * RAF callback. Dispatches `rc-virtual-canvas-render` and re-schedules in continuous mode.
+     *
+     * @param time - High-resolution timestamp from `requestAnimationFrame`
+     */
     protected _update(time: DOMHighResTimeStamp): void;
+    /** Registers pointer event listeners and starts rendering in continuous mode */
     connectedCallback(): void;
+    /** Cancels any pending animation frame, disconnects the resize observer, and removes pointer listeners */
     disconnectedCallback(): void;
+    /** Reacts to `renderMode`, `autoResizeCanvas`, and `imageRendering` property changes */
     protected updated(changed: Map<string, unknown>): void;
     private _scheduleRender;
     private _syncCanvasBackingStore;

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless virtual canvas web component built with Lit",
+  "version": "0.3.0",
+  "description": "Scrollable virtual canvas for rendering large coordinate-space content.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
     "directory": "packages/rc-virtual-canvas"
   },
-  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-virtual-canvas",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,17 +37,15 @@
   ],
   "customElements": "dist/custom-elements.json",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build && cem analyze",
     "cem:analyze": "cem analyze",
     "preview": "vite preview",
-    "test:browser": "vitest",
-    "test:browser:chrome": "vitest --project=chromium",
-    "test:browser:firefox": "vitest --project=firefox"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
-    "@guanghechen/rollup-plugin-copy": "^6.0.9",
     "@types/node": "^25.6.0",
     "@vitest/browser-playwright": "4.1.5",
     "lit": "^3.0.0",

package/dist/demo.css

@@ -1,85 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:root {
-  color-scheme: light dark;
-  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
-}
-
-@supports (color: AccentColor) {
-  :root {
-    --rc-accent: AccentColor;
-  }
-}
-
-[data-theme="light"] { color-scheme: light; }
-[data-theme="dark"]  { color-scheme: dark;  }
-
-[data-theme="solarized-light"] {
-  color-scheme: light;
-  --rc-surface: #fdf6e3;
-  --rc-text:    #657b83;
-  --rc-border:  1px solid #93a1a1;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
-}
-
-[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --rc-surface: #002b36;
-  --rc-text:    #839496;
-  --rc-border:  1px solid #586e75;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
-}
-
-body {
-  font-family: system-ui, sans-serif;
-  margin: 0;
-}
-
-.demo-page {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-.demo-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid ButtonBorder;
-}
-
-.demo-controls .demo-title {
-  flex: 1;
-}
-
-.demo-controls h1 {
-  margin: 0 0 0.15rem;
-  font-size: 1.5rem;
-}
-
-.demo-controls a {
-  font-size: 0.8rem;
-}
-
-.demo-section {
-  margin-bottom: 2rem;
-}
-
-.demo-section h2 {
-  margin: 0 0 0.5rem;
-}
-
-.theme-picker {
-  padding: 0.35em 0.75em;
-  font-family: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  border: 1px solid ButtonBorder;
-  border-radius: 4px;
-  background: Canvas;
-  color: CanvasText;
-}

package/dist/demo.js

@@ -1,40 +0,0 @@
-const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
-const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
-
-const stored = localStorage.getItem('rc-demo-theme') ?? '';
-applyTheme(stored);
-
-function applyTheme(theme) {
-  if (theme) {
-    document.documentElement.dataset.theme = theme;
-  } else {
-    delete document.documentElement.dataset.theme;
-  }
-}
-
-function currentIndex() {
-  const current = document.documentElement.dataset.theme ?? '';
-  const idx = THEMES.indexOf(current);
-  return idx === -1 ? 0 : idx;
-}
-
-function updateButtons() {
-  const label = LABELS[currentIndex()];
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.textContent = label;
-  });
-}
-
-window.cycleTheme = function () {
-  const next = THEMES[(currentIndex() + 1) % THEMES.length];
-  applyTheme(next);
-  localStorage.setItem('rc-demo-theme', next);
-  updateButtons();
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  updateButtons();
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.addEventListener('click', window.cycleTheme);
-  });
-});

package/dist/rc-virtual-canvas-BJQbqNEu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rc-virtual-canvas-BJQbqNEu.js","sources":["../src/rc-virtual-canvas.styles.ts","../src/rc-virtual-canvas.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const virtualCanvasStyles = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    position: relative;\n    display: block;\n    width: max-content;\n    line-height: 0; /* remove extra space under slotted <canvas> element(s) */\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  #root {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n    scrollbar-width: var(--rc-virtual-canvas-scrollbar-width, thin);\n  }\n\n  #root::-webkit-scrollbar {\n    width: var(--rc-virtual-canvas-scrollbar-size, auto);\n    height: var(--rc-virtual-canvas-scrollbar-size, auto);\n  }\n\n  #root::-webkit-scrollbar-thumb {\n    background: var(--rc-virtual-canvas-scrollbar-thumb-background, ButtonFace);\n  }\n\n  #root::-webkit-scrollbar-button {\n    background: var(--rc-virtual-canvas-scrollbar-button-background, ButtonFace);\n  }\n\n  #root::-webkit-scrollbar-track {\n    background: var(--rc-virtual-canvas-scrollbar-track-background, Canvas);\n  }\n\n  #placeholder {\n    pointer-events: none;\n  }\n\n  #overlay {\n    position: sticky;\n    left: 0;\n    top: 0;\n    z-index: 1;\n    display: block;\n    width: 100%;\n    height: 0;\n    pointer-events: none;\n  }\n\n  ::slotted([slot='overlay']) {\n    pointer-events: auto;\n  }\n\n  ::slotted(canvas) {\n    image-rendering: var(--rc-virtual-canvas-image-rendering, auto);\n  }\n`;\n\nexport default virtualCanvasStyles;\n","import { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport virtualCanvasStyles from './rc-virtual-canvas.styles';\n\nexport type RCVirtualCanvasViewRect = Readonly<{\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}>;\n\nexport type RCVirtualCanvasRenderMode =\n  | 'continuous'\n  | 'viewport-change'\n  | 'manual';\n\nexport type RCVirtualCanvasRenderReason =\n  | 'animation-frame'\n  | 'viewport-change'\n  | 'manual';\n\nexport type RCVirtualCanvasPoint = Readonly<{\n  x: number;\n  y: number;\n}>;\n\nexport type RCVirtualCanvasPointerInit = {\n  type: string;\n  clientX: number;\n  clientY: number;\n  contentX: number;\n  contentY: number;\n  viewRect: RCVirtualCanvasViewRect;\n  button: number;\n  buttons: number;\n  altKey: boolean;\n  ctrlKey: boolean;\n  shiftKey: boolean;\n  metaKey: boolean;\n  sourceEvent: PointerEvent | MouseEvent;\n};\n\nexport type RCVirtualCanvasImageRendering =\n  | 'auto'\n  | 'crisp-edges'\n  | 'pixelated';\n\nexport type RCVirtualCanvasRenderInit = {\n  time: DOMHighResTimeStamp;\n  reason: RCVirtualCanvasRenderReason;\n  viewRect: RCVirtualCanvasViewRect;\n  contentRect: RCVirtualCanvasViewRect;\n};\n\nfunction createRectSnapshot(rect: RCVirtualCanvasViewRect) {\n  return Object.freeze({\n    x: rect.x,\n    y: rect.y,\n    width: rect.width,\n    height: rect.height,\n  });\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-virtual-canvas': RCVirtualCanvas;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-virtual-canvas-render': CustomEvent<RCVirtualCanvasRenderInit>;\n    'rc-virtual-canvas-pointer': CustomEvent<RCVirtualCanvasPointerInit>;\n  }\n}\n\n/**\n * An accessible virtual scrollable canvas component.\n *\n * @slot - The HTMLCanvasElement\n * @slot overlay - Optional viewport-positioned content rendered inside the\n * scroll container above the canvas.\n * @fires rc-virtual-canvas-render - Fires with viewport data when the canvas should redraw.\n * @fires rc-virtual-canvas-pointer - Fires pointer/mouse input mapped to virtual content coordinates.\n */\nexport class RCVirtualCanvas extends LitElement {\n  static styles = [virtualCanvasStyles];\n\n  private _rafHandle: number = 0;\n  private _pendingRenderReason?: RCVirtualCanvasRenderReason;\n  private readonly _handledPointerEvents = new WeakSet<Event>();\n\n  // Stored bound reference so the same closure is used for scheduling and\n  // cancellation — `bind()` returns a new function every call.\n  private readonly _boundUpdate = (time: DOMHighResTimeStamp) =>\n    this._update(time);\n\n  private readonly _boundPointerEvent = (event: PointerEvent | MouseEvent) =>\n    this._onPointerEvent(event);\n\n  /** Pixel width of the virtual content */\n  @property({ type: Number })\n  set contentWidth(val: number) {\n    const oldValue = this._contentWidth;\n\n    this._contentWidth = val;\n\n    this._contentRect.width = this._contentWidth;\n    this.requestUpdate('contentWidth', oldValue);\n    this._scheduleRender('viewport-change');\n  }\n  get contentWidth() {\n    return this._contentWidth;\n  }\n  protected _contentWidth: number = 0;\n\n  /** Pixel height of the virtual content */\n  @property({ type: Number })\n  set contentHeight(val: number) {\n    const oldValue = this._contentHeight;\n\n    this._contentHeight = val;\n\n    this._contentRect.height = this._contentHeight;\n    this.requestUpdate('contentHeight', oldValue);\n    this._scheduleRender('viewport-change');\n  }\n  get contentHeight() {\n    return this._contentHeight;\n  }\n  protected _contentHeight: number = 0;\n\n  /** When true, keep the slotted canvas backing store aligned to the viewport. */\n  @property({ attribute: 'auto-resize-canvas', type: Boolean })\n  autoResizeCanvas: boolean = true;\n\n  /** Controls when render events are dispatched. */\n  @property({ attribute: 'render-mode' })\n  renderMode: RCVirtualCanvasRenderMode = 'continuous';\n\n  /** Convenience image-rendering value applied to the slotted canvas. */\n  @property({ attribute: 'image-rendering' })\n  imageRendering: RCVirtualCanvasImageRendering = 'auto';\n\n  @query('#root', true)\n  protected _$root!: HTMLDivElement;\n\n  @query('#placeholder', true)\n  protected _$placeholder!: HTMLDivElement;\n\n  @state()\n  protected _$canvas: HTMLCanvasElement | null = null;\n\n  @state()\n  protected _viewRect = {\n    x: 0,\n    y: 0,\n    width: 0,\n    height: 0,\n  };\n\n  @state()\n  protected _contentRect = {\n    x: 0,\n    y: 0,\n    width: 0,\n    height: 0,\n  };\n\n  protected _resizeObserver = new ResizeObserver(\n    (entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const devicePixelBoxSize = Array.isArray(\n          entry.devicePixelContentBoxSize,\n        )\n          ? entry.devicePixelContentBoxSize[0]\n          : entry.devicePixelContentBoxSize;\n\n        this._viewRect.width = this._getMeasuredCanvasWidth(\n          devicePixelBoxSize?.inlineSize\n            ?? Math.round(entry.contentRect.width * window.devicePixelRatio),\n        );\n        this._viewRect.height = this._getMeasuredCanvasHeight(\n          devicePixelBoxSize?.blockSize\n            ?? Math.round(entry.contentRect.height * window.devicePixelRatio),\n        );\n\n        this._syncCanvasBackingStore();\n        this._scheduleRender('viewport-change');\n      }\n    },\n  );\n\n  protected _onScroll() {\n    this._viewRect.x = this._$root.scrollLeft;\n    this._viewRect.y = this._$root.scrollTop;\n\n    this._scheduleRender('viewport-change');\n  }\n\n  protected _onSlotChange(e: Event) {\n    this._resizeObserver.disconnect();\n\n    this._$canvas =\n      (e.currentTarget as HTMLSlotElement)\n        .assignedElements()\n        .filter((el) => el instanceof HTMLCanvasElement)\n        .at(0) ?? null;\n\n    if (this._$canvas != null) {\n      this._viewRect = {\n        x: this._$root.scrollLeft ?? 0,\n        y: this._$root.scrollTop ?? 0,\n        width: this._getMeasuredCanvasWidth(this._$canvas.clientWidth),\n        height: this._getMeasuredCanvasHeight(this._$canvas.clientHeight),\n      };\n\n      this._syncCanvasBackingStore();\n      this._resizeObserver.observe(this._$canvas, {\n        box: 'device-pixel-content-box',\n      });\n      this._scheduleRender('viewport-change');\n    }\n  }\n\n  getViewRect() {\n    return createRectSnapshot(this._viewRect);\n  }\n\n  scrollToContent(x: number, y: number, options: ScrollOptions = {}) {\n    this._$root.scrollTo({\n      ...options,\n      left: x,\n      top: y,\n    });\n\n    this._viewRect.x = this._$root.scrollLeft;\n    this._viewRect.y = this._$root.scrollTop;\n    this._scheduleRender('viewport-change');\n  }\n\n  centerOnContent(x: number, y: number, options: ScrollOptions = {}) {\n    this.scrollToContent(\n      x - (this._$root.clientWidth * 0.5),\n      y - (this._$root.clientHeight * 0.5),\n      options,\n    );\n  }\n\n  clientToContent(clientX: number, clientY: number) {\n    const canvasRect = this._getCanvasClientRect();\n    const scaleX = this._getViewportScaleX(canvasRect);\n    const scaleY = this._getViewportScaleY(canvasRect);\n\n    return Object.freeze({\n      x: this._viewRect.x + ((clientX - canvasRect.left) * scaleX),\n      y: this._viewRect.y + ((clientY - canvasRect.top) * scaleY),\n    });\n  }\n\n  contentToClient(x: number, y: number) {\n    const canvasRect = this._getCanvasClientRect();\n    const scaleX = this._getViewportScaleX(canvasRect);\n    const scaleY = this._getViewportScaleY(canvasRect);\n\n    return Object.freeze({\n      x: canvasRect.left + ((x - this._viewRect.x) / scaleX),\n      y: canvasRect.top + ((y - this._viewRect.y) / scaleY),\n    });\n  }\n\n  requestRender(reason: RCVirtualCanvasRenderReason = 'manual') {\n    this._scheduleRender(reason);\n  }\n\n  protected _onPointerEvent(event: PointerEvent | MouseEvent) {\n    if (this._handledPointerEvents.has(event)) return;\n    if (this._isOverlayEvent(event)) return;\n\n    this._handledPointerEvents.add(event);\n\n    const contentPoint = this.clientToContent(event.clientX, event.clientY);\n\n    const shouldContinue = this.dispatchEvent(\n      new CustomEvent<RCVirtualCanvasPointerInit>('rc-virtual-canvas-pointer', {\n        bubbles: true,\n        composed: true,\n        cancelable: true,\n        detail: {\n          type: event.type,\n          clientX: event.clientX,\n          clientY: event.clientY,\n          contentX: contentPoint.x,\n          contentY: contentPoint.y,\n          viewRect: createRectSnapshot(this._viewRect),\n          button: event.button,\n          buttons: event.buttons,\n          altKey: event.altKey,\n          ctrlKey: event.ctrlKey,\n          shiftKey: event.shiftKey,\n          metaKey: event.metaKey,\n          sourceEvent: event,\n        },\n      }),\n    );\n\n    if (!shouldContinue) event.preventDefault();\n  }\n\n  private _isOverlayEvent(event: Event): boolean {\n    return event.composedPath().some((node) =>\n      node instanceof HTMLSlotElement\n      && node.name === 'overlay',\n    );\n  }\n\n  protected _update(time: DOMHighResTimeStamp) {\n    this._rafHandle = 0;\n\n    if (!this.isConnected || this._$canvas == null) {\n      return;\n    }\n\n    const reason = this._pendingRenderReason\n      ?? (this.renderMode === 'continuous' ? 'animation-frame' : 'manual');\n\n    this._pendingRenderReason = undefined;\n\n    this.dispatchEvent(\n      new CustomEvent<RCVirtualCanvasRenderInit>('rc-virtual-canvas-render', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          time,\n          reason,\n          viewRect: createRectSnapshot(this._viewRect),\n          contentRect: createRectSnapshot(this._contentRect),\n        },\n      }),\n    );\n\n    if (this.renderMode === 'continuous') {\n      this._scheduleRender('animation-frame');\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('pointerdown', this._boundPointerEvent);\n    this.addEventListener('pointermove', this._boundPointerEvent);\n    this.addEventListener('pointerup', this._boundPointerEvent);\n    this.addEventListener('click', this._boundPointerEvent);\n    this.addEventListener('dblclick', this._boundPointerEvent);\n    this.addEventListener('contextmenu', this._boundPointerEvent);\n\n    if (this._rafHandle) {\n      cancelAnimationFrame(this._rafHandle);\n      this._rafHandle = 0;\n    }\n\n    if (this.renderMode === 'continuous') {\n      this._scheduleRender('animation-frame');\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    cancelAnimationFrame(this._rafHandle);\n    this._rafHandle = 0;\n    this._resizeObserver.disconnect();\n\n    this.removeEventListener('pointerdown', this._boundPointerEvent);\n    this.removeEventListener('pointermove', this._boundPointerEvent);\n    this.removeEventListener('pointerup', this._boundPointerEvent);\n    this.removeEventListener('click', this._boundPointerEvent);\n    this.removeEventListener('dblclick', this._boundPointerEvent);\n    this.removeEventListener('contextmenu', this._boundPointerEvent);\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has('renderMode')) {\n      if (this.renderMode === 'continuous') {\n        this._scheduleRender('animation-frame');\n      } else if (this._pendingRenderReason === 'animation-frame') {\n        if (this._rafHandle) {\n          cancelAnimationFrame(this._rafHandle);\n          this._rafHandle = 0;\n        }\n\n        this._pendingRenderReason = undefined;\n      } else if (this.renderMode === 'viewport-change') {\n        this._scheduleRender('viewport-change');\n      }\n    }\n\n    if (changed.has('autoResizeCanvas')) {\n      this._syncCanvasBackingStore();\n    }\n\n    if (changed.has('imageRendering')) {\n      this.style.setProperty(\n        '--rc-virtual-canvas-image-rendering',\n        this.imageRendering,\n      );\n    }\n  }\n\n  private _scheduleRender(reason: RCVirtualCanvasRenderReason) {\n    if (this.renderMode === 'manual' && reason !== 'manual') {\n      return;\n    }\n\n    if (\n      this.renderMode === 'viewport-change'\n      && reason === 'animation-frame'\n    ) {\n      return;\n    }\n\n    this._pendingRenderReason = reason;\n\n    if (!this.isConnected || this._rafHandle) {\n      return;\n    }\n\n    this._rafHandle = window.requestAnimationFrame(this._boundUpdate);\n  }\n\n  private _syncCanvasBackingStore() {\n    if (!this.autoResizeCanvas || this._$canvas == null) {\n      return;\n    }\n\n    const width = Math.max(0, Math.round(this._viewRect.width));\n    const height = Math.max(0, Math.round(this._viewRect.height));\n\n    if (this._$canvas.width !== width) {\n      this._$canvas.width = width;\n    }\n\n    if (this._$canvas.height !== height) {\n      this._$canvas.height = height;\n    }\n  }\n\n  private _getCanvasClientRect() {\n    if (this._$canvas == null) {\n      return this.getBoundingClientRect();\n    }\n\n    return this._$canvas.getBoundingClientRect();\n  }\n\n  private _getMeasuredCanvasWidth(fallbackWidth: number) {\n    if (!this.autoResizeCanvas && this._$canvas && this._$canvas.width > 0) {\n      return this._$canvas.width;\n    }\n\n    return fallbackWidth;\n  }\n\n  private _getMeasuredCanvasHeight(fallbackHeight: number) {\n    if (!this.autoResizeCanvas && this._$canvas && this._$canvas.height > 0) {\n      return this._$canvas.height;\n    }\n\n    return fallbackHeight;\n  }\n\n  private _getViewportScaleX(canvasRect: DOMRect) {\n    return canvasRect.width > 0\n      ? this._viewRect.width / canvasRect.width\n      : 1;\n  }\n\n  private _getViewportScaleY(canvasRect: DOMRect) {\n    return canvasRect.height > 0\n      ? this._viewRect.height / canvasRect.height\n      : 1;\n  }\n\n  render() {\n    return html`\n      <div\n        id=\"root\"\n        part=\"scroller\"\n        @scroll=${this._onScroll}\n        @pointerdown=${this._onPointerEvent}\n        @pointermove=${this._onPointerEvent}\n        @pointerup=${this._onPointerEvent}\n        @click=${this._onPointerEvent}\n        @dblclick=${this._onPointerEvent}\n        @contextmenu=${this._onPointerEvent}\n      >\n        <div id=\"overlay\" part=\"overlay\">\n          <slot name=\"overlay\"></slot>\n        </div>\n        <div\n          id=\"placeholder\"\n          style=${styleMap({\n            width: `${this.contentWidth}px`,\n            height: `${this.contentHeight}px`,\n          })}\n        ></div>\n      </div>\n\n      <slot @slotchange=${this._onSlotChange}></slot>\n    `;\n  }\n}\n\nexport default RCVirtualCanvas;\n"],"names":["virtualCanvasStyles","css","createRectSnapshot","rect","_RCVirtualCanvas","LitElement","time","event","entries","entry","devicePixelBoxSize","val","oldValue","e","el","x","y","options","clientX","clientY","canvasRect","scaleX","scaleY","reason","contentPoint","node","changed","width","height","fallbackWidth","fallbackHeight","html","styleMap","RCVirtualCanvas","__decorateClass","property","query","state"],"mappings":"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"}