@rcarls/rc-virtual-canvas 0.3.2 → 0.4.0

package/README.md

@@ -27,15 +27,15 @@ import { RCVirtualCanvas } from '@rcarls/rc-virtual-canvas';    // named class e
 
 ## Basic usage
 
-Place a `<canvas>` inside the component. Set `contentWidth` and `contentHeight` to the
+Place a `<canvas>` inside the component. Set `content-width` and `content-height` 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
   id="vc"
-  contentWidth="4000"
-  contentHeight="3000"
+  content-width="4000"
+  content-height="3000"
   style="width: 800px; height: 600px;"
 >
   <canvas id="canvas" width="800" height="600"></canvas>
@@ -67,8 +67,8 @@ that triggers native scroll events.
 
 | Property | Attribute | Type | Default | Description |
 |---|---|---|---|---|
-| `contentWidth` | `contentWidth` | `number` | `0` | Total pixel width of the virtual content |
-| `contentHeight` | `contentHeight` | `number` | `0` | Total pixel height of the virtual content |
+| `contentWidth` | `content-width` | `number` | `0` | Total pixel width of the virtual content |
+| `contentHeight` | `content-height` | `number` | `0` | Total pixel height of the virtual content |
 | `autoResizeCanvas` | `auto-resize-canvas` | `boolean` | `true` | Keeps the slotted canvas backing store aligned to the measured viewport |
 | `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` |

package/dist/custom-elements.json

@@ -48,6 +48,48 @@
           "kind": "class",
           "description": "A scrollable virtual canvas component.",
           "name": "RCVirtualCanvas",
+          "cssProperties": [
+            {
+              "description": "`scrollbar-width` of the internal scroll container.",
+              "name": "--rc-virtual-canvas-scrollbar-width",
+              "default": "thin"
+            },
+            {
+              "description": "WebKit scrollbar thickness.",
+              "name": "--rc-virtual-canvas-scrollbar-size",
+              "default": "auto"
+            },
+            {
+              "description": "WebKit scrollbar thumb color.",
+              "name": "--rc-virtual-canvas-scrollbar-thumb-background",
+              "default": "ButtonFace"
+            },
+            {
+              "description": "WebKit scrollbar button color.",
+              "name": "--rc-virtual-canvas-scrollbar-button-background",
+              "default": "ButtonFace"
+            },
+            {
+              "description": "WebKit scrollbar track color.",
+              "name": "--rc-virtual-canvas-scrollbar-track-background",
+              "default": "Canvas"
+            },
+            {
+              "description": "`image-rendering` applied to the slotted canvas; kept in sync with the `imageRendering` property.",
+              "name": "--rc-virtual-canvas-image-rendering",
+              "default": "auto"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Internal scroll container that owns the virtual content scroll range.",
+              "name": "scroller"
+            },
+            {
+              "description": "Viewport-positioned overlay container rendered inside the scroll container.",
+              "name": "overlay"
+            }
+          ],
           "slots": [
             {
               "description": "The HTMLCanvasElement",
@@ -65,7 +107,7 @@
               "type": {
                 "text": "number"
               },
-              "privacy": "private",
+              "privacy": "protected",
               "default": "0"
             },
             {
@@ -74,32 +116,32 @@
               "type": {
                 "text": "RCVirtualCanvasRenderReason | undefined"
               },
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
               "kind": "field",
               "name": "_handledPointerEvents",
-              "privacy": "private",
+              "privacy": "protected",
               "readonly": true,
               "default": "new WeakSet<Event>()"
             },
             {
               "kind": "field",
               "name": "_boundUpdate",
-              "privacy": "private",
+              "privacy": "protected",
               "readonly": true
             },
             {
               "kind": "field",
               "name": "_boundPointerEvent",
-              "privacy": "private",
+              "privacy": "protected",
               "readonly": true
             },
             {
               "kind": "field",
               "name": "contentWidth",
               "description": "Pixel width of the virtual content",
-              "attribute": "contentWidth"
+              "attribute": "content-width"
             },
             {
               "kind": "field",
@@ -107,14 +149,14 @@
               "type": {
                 "text": "number"
               },
-              "privacy": "protected",
+              "privacy": "private",
               "default": "0"
             },
             {
               "kind": "field",
               "name": "contentHeight",
               "description": "Pixel height of the virtual content",
-              "attribute": "contentHeight"
+              "attribute": "content-height"
             },
             {
               "kind": "field",
@@ -122,7 +164,7 @@
               "type": {
                 "text": "number"
               },
-              "privacy": "protected",
+              "privacy": "private",
               "default": "0"
             },
             {
@@ -230,6 +272,20 @@
               ],
               "description": "Replaces canvas tracking and re-registers the resize observer when slot content changes"
             },
+            {
+              "kind": "method",
+              "name": "_observeCanvasResize",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "$canvas",
+                  "type": {
+                    "text": "HTMLCanvasElement"
+                  }
+                }
+              ],
+              "description": "Observes canvas size with DPR-accurate boxes when the browser supports them"
+            },
             {
               "kind": "method",
               "name": "getViewRect",
@@ -385,7 +441,7 @@
             {
               "kind": "method",
               "name": "_isOverlayEvent",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "boolean"
@@ -418,7 +474,7 @@
             {
               "kind": "method",
               "name": "_scheduleRender",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "reason",
@@ -431,17 +487,17 @@
             {
               "kind": "method",
               "name": "_syncCanvasBackingStore",
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
               "kind": "method",
               "name": "_getCanvasClientRect",
-              "privacy": "private"
+              "privacy": "protected"
             },
             {
               "kind": "method",
               "name": "_getMeasuredCanvasWidth",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "fallbackWidth",
@@ -454,7 +510,7 @@
             {
               "kind": "method",
               "name": "_getMeasuredCanvasHeight",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "fallbackHeight",
@@ -467,7 +523,7 @@
             {
               "kind": "method",
               "name": "_getViewportScaleX",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "canvasRect",
@@ -480,7 +536,7 @@
             {
               "kind": "method",
               "name": "_getViewportScaleY",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "canvasRect",
@@ -509,40 +565,40 @@
           ],
           "attributes": [
             {
-              "name": "contentWidth",
               "description": "Pixel width of the virtual content",
+              "name": "content-width",
               "fieldName": "contentWidth"
             },
             {
-              "name": "contentHeight",
               "description": "Pixel height of the virtual content",
+              "name": "content-height",
               "fieldName": "contentHeight"
             },
             {
+              "description": "When true, keep the slotted canvas backing store aligned to the viewport.",
               "name": "auto-resize-canvas",
               "type": {
                 "text": "boolean"
               },
               "default": "true",
-              "description": "When true, keep the slotted canvas backing store aligned to the viewport.",
               "fieldName": "autoResizeCanvas"
             },
             {
+              "description": "Controls when render events are dispatched.",
               "name": "render-mode",
               "type": {
                 "text": "RCVirtualCanvasRenderMode"
               },
               "default": "'continuous'",
-              "description": "Controls when render events are dispatched.",
               "fieldName": "renderMode"
             },
             {
+              "description": "Convenience image-rendering value applied to the slotted canvas.",
               "name": "image-rendering",
               "type": {
                 "text": "RCVirtualCanvasImageRendering"
               },
               "default": "'auto'",
-              "description": "Convenience image-rendering value applied to the slotted canvas.",
               "fieldName": "imageRendering"
             }
           ],

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

@@ -70,10 +70,10 @@ const w = _`
     image-rendering: var(--rc-virtual-canvas-image-rendering, auto);
   }
 `;
-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--)
+var R = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (r, t, e, i) => {
+  for (var s = i > 1 ? void 0 : i ? m(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;
+  return i && s && R(t, e, s), s;
 };
 function c(r) {
   return Object.freeze({
@@ -126,14 +126,24 @@ const v = class v extends p {
   }
   /** 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 = {
+    this._resizeObserver.disconnect(), this._$canvas = t.currentTarget.assignedElements().filter((e) => e instanceof HTMLCanvasElement)[0] ?? null, this._$canvas != null && (this._viewRect = {
       x: this._$root.scrollLeft ?? 0,
       y: this._$root.scrollTop ?? 0,
       width: this._getMeasuredCanvasWidth(this._$canvas.clientWidth),
       height: this._getMeasuredCanvasHeight(this._$canvas.clientHeight)
-    }, this._syncCanvasBackingStore(), this._resizeObserver.observe(this._$canvas, {
-      box: "device-pixel-content-box"
-    }), this._scheduleRender("viewport-change"));
+    }, this._syncCanvasBackingStore(), this._observeCanvasResize(this._$canvas), this._scheduleRender("viewport-change"));
+  }
+  /** Observes canvas size with DPR-accurate boxes when the browser supports them */
+  _observeCanvasResize(t) {
+    try {
+      this._resizeObserver.observe(t, {
+        box: "device-pixel-content-box"
+      });
+    } catch (e) {
+      if (!(e instanceof TypeError))
+        throw e;
+      this._resizeObserver.observe(t);
+    }
   }
   /**
    * Returns a frozen snapshot of the current viewport rectangle.
@@ -373,10 +383,10 @@ const v = class v extends p {
 v.styles = [w];
 let n = v;
 o([
-  h({ type: Number })
+  h({ type: Number, attribute: "content-width" })
 ], n.prototype, "contentWidth", 1);
 o([
-  h({ type: Number })
+  h({ type: Number, attribute: "content-height" })
 ], n.prototype, "contentHeight", 1);
 o([
   h({ attribute: "auto-resize-canvas", type: Boolean })
@@ -405,4 +415,4 @@ o([
 export {
   n as R
 };
-//# sourceMappingURL=rc-virtual-canvas-CUVahMP7.js.map
+//# sourceMappingURL=rc-virtual-canvas-BSpF0tcY.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-virtual-canvas-BSpF0tcY.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 *\n * @csspart scroller - Internal scroll container that owns the virtual content scroll range.\n * @csspart overlay - Viewport-positioned overlay container rendered inside the scroll container.\n *\n * @attr content-width - Total pixel width of the virtual content.\n * @attr content-height - Total pixel height of the virtual content.\n * @attr auto-resize-canvas - Keep the slotted canvas backing store aligned to the viewport.\n * @attr render-mode - Controls when render events are dispatched.\n * @attr image-rendering - Convenience `image-rendering` value applied to the slotted canvas.\n *\n * @cssprop [--rc-virtual-canvas-scrollbar-width=thin] - `scrollbar-width` of the internal\n *   scroll container.\n * @cssprop [--rc-virtual-canvas-scrollbar-size=auto] - WebKit scrollbar thickness.\n * @cssprop [--rc-virtual-canvas-scrollbar-thumb-background=ButtonFace] - WebKit scrollbar\n *   thumb color.\n * @cssprop [--rc-virtual-canvas-scrollbar-button-background=ButtonFace] - WebKit scrollbar\n *   button color.\n * @cssprop [--rc-virtual-canvas-scrollbar-track-background=Canvas] - WebKit scrollbar\n *   track color.\n * @cssprop [--rc-virtual-canvas-image-rendering=auto] - `image-rendering` applied to the\n *   slotted canvas; kept in sync with the `imageRendering` property.\n */\nexport class RCVirtualCanvas extends LitElement {\n  static styles = [virtualCanvasStyles];\n\n  protected _rafHandle: number = 0;\n  protected _pendingRenderReason?: RCVirtualCanvasRenderReason;\n  protected 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  protected readonly _boundUpdate = (time: DOMHighResTimeStamp) => this._update(time);\n\n  protected readonly _boundPointerEvent = (event: PointerEvent | MouseEvent) =>\n    this._onPointerEvent(event);\n\n  /** Pixel width of the virtual content */\n  @property({ type: Number, attribute: 'content-width' })\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  private _contentWidth: number = 0;\n\n  /** Pixel height of the virtual content */\n  @property({ type: Number, attribute: 'content-height' })\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  private _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        [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._observeCanvasResize(this._$canvas);\n\n      this._scheduleRender('viewport-change');\n    }\n  }\n\n  /** Observes canvas size with DPR-accurate boxes when the browser supports them */\n  protected _observeCanvasResize($canvas: HTMLCanvasElement) {\n    try {\n      this._resizeObserver.observe($canvas, {\n        box: 'device-pixel-content-box',\n      });\n    } catch (error) {\n      if (!(error instanceof TypeError)) {\n        throw error;\n      }\n\n      this._resizeObserver.observe($canvas);\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  protected _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  protected _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  protected _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  protected _getCanvasClientRect() {\n    if (this._$canvas == null) {\n      return this.getBoundingClientRect();\n    }\n\n    return this._$canvas.getBoundingClientRect();\n  }\n\n  protected _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  protected _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  protected _getViewportScaleX(canvasRect: DOMRect) {\n    return canvasRect.width > 0 ? this._viewRect.width / canvasRect.width : 1;\n  }\n\n  protected _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","$canvas","error","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-CUVahMP7.js";
+import { R as a } from "./rc-virtual-canvas-BSpF0tcY.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-CUVahMP7.js";
+import { R as o } from "./rc-virtual-canvas-BSpF0tcY.js";
 export {
   o as RCVirtualCanvas
 };

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

@@ -93,22 +93,43 @@ export type RCVirtualCanvasRenderInit = {
  *
  * @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.
+ *
+ * @csspart scroller - Internal scroll container that owns the virtual content scroll range.
+ * @csspart overlay - Viewport-positioned overlay container rendered inside the scroll container.
+ *
+ * @attr content-width - Total pixel width of the virtual content.
+ * @attr content-height - Total pixel height of the virtual content.
+ * @attr auto-resize-canvas - Keep the slotted canvas backing store aligned to the viewport.
+ * @attr render-mode - Controls when render events are dispatched.
+ * @attr image-rendering - Convenience `image-rendering` value applied to the slotted canvas.
+ *
+ * @cssprop [--rc-virtual-canvas-scrollbar-width=thin] - `scrollbar-width` of the internal
+ *   scroll container.
+ * @cssprop [--rc-virtual-canvas-scrollbar-size=auto] - WebKit scrollbar thickness.
+ * @cssprop [--rc-virtual-canvas-scrollbar-thumb-background=ButtonFace] - WebKit scrollbar
+ *   thumb color.
+ * @cssprop [--rc-virtual-canvas-scrollbar-button-background=ButtonFace] - WebKit scrollbar
+ *   button color.
+ * @cssprop [--rc-virtual-canvas-scrollbar-track-background=Canvas] - WebKit scrollbar
+ *   track color.
+ * @cssprop [--rc-virtual-canvas-image-rendering=auto] - `image-rendering` applied to the
+ *   slotted canvas; kept in sync with the `imageRendering` property.
  */
 export declare class RCVirtualCanvas extends LitElement {
     static styles: import('lit').CSSResult[];
-    private _rafHandle;
-    private _pendingRenderReason?;
-    private readonly _handledPointerEvents;
-    private readonly _boundUpdate;
-    private readonly _boundPointerEvent;
+    protected _rafHandle: number;
+    protected _pendingRenderReason?: RCVirtualCanvasRenderReason;
+    protected readonly _handledPointerEvents: WeakSet<Event>;
+    protected readonly _boundUpdate: (time: DOMHighResTimeStamp) => void;
+    protected readonly _boundPointerEvent: (event: PointerEvent | MouseEvent) => void;
     /** Pixel width of the virtual content */
     set contentWidth(val: number);
     get contentWidth(): number;
-    protected _contentWidth: number;
+    private _contentWidth;
     /** Pixel height of the virtual content */
     set contentHeight(val: number);
     get contentHeight(): number;
-    protected _contentHeight: number;
+    private _contentHeight;
     /** When true, keep the slotted canvas backing store aligned to the viewport. */
     autoResizeCanvas: boolean;
     /** Controls when render events are dispatched. */
@@ -141,6 +162,8 @@ export declare class RCVirtualCanvas extends LitElement {
     protected _onScroll(): void;
     /** Replaces canvas tracking and re-registers the resize observer when slot content changes */
     protected _onSlotChange(e: Event): void;
+    /** Observes canvas size with DPR-accurate boxes when the browser supports them */
+    protected _observeCanvasResize($canvas: HTMLCanvasElement): void;
     /**
      * Returns a frozen snapshot of the current viewport rectangle.
      *
@@ -235,7 +258,7 @@ export declare class RCVirtualCanvas extends LitElement {
     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;
+    protected _isOverlayEvent(event: Event): boolean;
     /**
      * RAF callback. Dispatches `rc-virtual-canvas-render` and re-schedules in continuous mode.
      *
@@ -248,13 +271,13 @@ export declare class RCVirtualCanvas extends LitElement {
     disconnectedCallback(): void;
     /** Reacts to `renderMode`, `autoResizeCanvas`, and `imageRendering` property changes */
     protected updated(changed: Map<string, unknown>): void;
-    private _scheduleRender;
-    private _syncCanvasBackingStore;
-    private _getCanvasClientRect;
-    private _getMeasuredCanvasWidth;
-    private _getMeasuredCanvasHeight;
-    private _getViewportScaleX;
-    private _getViewportScaleY;
+    protected _scheduleRender(reason: RCVirtualCanvasRenderReason): void;
+    protected _syncCanvasBackingStore(): void;
+    protected _getCanvasClientRect(): DOMRect;
+    protected _getMeasuredCanvasWidth(fallbackWidth: number): number;
+    protected _getMeasuredCanvasHeight(fallbackHeight: number): number;
+    protected _getViewportScaleX(canvasRect: DOMRect): number;
+    protected _getViewportScaleY(canvasRect: DOMRect): number;
     render(): import('lit').TemplateResult<1>;
 }
 export default RCVirtualCanvas;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Scrollable virtual canvas for rendering large coordinate-space content.",
   "repository": {
     "type": "git",

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

@@ -1 +0,0 @@
-{"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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"}