@rcarls/rc-virtual-canvas 0.1.0

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,323 @@
+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 { styleMap as b } from "lit/directives/style-map.js";
+const w = _`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    position: relative;
+    display: block;
+    width: max-content;
+    line-height: 0; /* remove extra space under slotted <canvas> element(s) */
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  #root {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    overflow: auto;
+    scrollbar-width: var(--rc-virtual-canvas-scrollbar-width, thin);
+  }
+
+  #root::-webkit-scrollbar {
+    width: var(--rc-virtual-canvas-scrollbar-size, auto);
+    height: var(--rc-virtual-canvas-scrollbar-size, auto);
+  }
+
+  #root::-webkit-scrollbar-thumb {
+    background: var(--rc-virtual-canvas-scrollbar-thumb-background, ButtonFace);
+  }
+
+  #root::-webkit-scrollbar-button {
+    background: var(--rc-virtual-canvas-scrollbar-button-background, ButtonFace);
+  }
+
+  #root::-webkit-scrollbar-track {
+    background: var(--rc-virtual-canvas-scrollbar-track-background, Canvas);
+  }
+
+  #placeholder {
+    pointer-events: none;
+  }
+
+  #overlay {
+    position: sticky;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    display: block;
+    width: 100%;
+    height: 0;
+    pointer-events: none;
+  }
+
+  ::slotted([slot='overlay']) {
+    pointer-events: auto;
+  }
+
+  ::slotted(canvas) {
+    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);
+  return i && s && m(t, e, s), s;
+};
+function c(r) {
+  return Object.freeze({
+    x: r.x,
+    y: r.y,
+    width: r.width,
+    height: r.height
+  });
+}
+const v = class v extends p {
+  constructor() {
+    super(...arguments), this._rafHandle = 0, this._handledPointerEvents = /* @__PURE__ */ new WeakSet(), this._boundUpdate = (t) => this._update(t), this._boundPointerEvent = (t) => this._onPointerEvent(t), this._contentWidth = 0, this._contentHeight = 0, this.autoResizeCanvas = !0, this.renderMode = "continuous", this.imageRendering = "auto", this._$canvas = null, this._viewRect = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    }, this._contentRect = {
+      x: 0,
+      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");
+        }
+      }
+    );
+  }
+  set contentWidth(t) {
+    const e = this._contentWidth;
+    this._contentWidth = t, this._contentRect.width = this._contentWidth, this.requestUpdate("contentWidth", e), this._scheduleRender("viewport-change");
+  }
+  get contentWidth() {
+    return this._contentWidth;
+  }
+  set contentHeight(t) {
+    const e = this._contentHeight;
+    this._contentHeight = t, this._contentRect.height = this._contentHeight, this.requestUpdate("contentHeight", e), this._scheduleRender("viewport-change");
+  }
+  get contentHeight() {
+    return this._contentHeight;
+  }
+  _onScroll() {
+    this._viewRect.x = this._$root.scrollLeft, this._viewRect.y = this._$root.scrollTop, this._scheduleRender("viewport-change");
+  }
+  _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,
+      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"));
+  }
+  getViewRect() {
+    return c(this._viewRect);
+  }
+  scrollToContent(t, e, i = {}) {
+    this._$root.scrollTo({
+      ...i,
+      left: t,
+      top: e
+    }), this._viewRect.x = this._$root.scrollLeft, this._viewRect.y = this._$root.scrollTop, this._scheduleRender("viewport-change");
+  }
+  centerOnContent(t, e, i = {}) {
+    this.scrollToContent(
+      t - this._$root.clientWidth * 0.5,
+      e - this._$root.clientHeight * 0.5,
+      i
+    );
+  }
+  clientToContent(t, e) {
+    const i = this._getCanvasClientRect(), s = this._getViewportScaleX(i), a = this._getViewportScaleY(i);
+    return Object.freeze({
+      x: this._viewRect.x + (t - i.left) * s,
+      y: this._viewRect.y + (e - i.top) * a
+    });
+  }
+  contentToClient(t, e) {
+    const i = this._getCanvasClientRect(), s = this._getViewportScaleX(i), a = this._getViewportScaleY(i);
+    return Object.freeze({
+      x: i.left + (t - this._viewRect.x) / s,
+      y: i.top + (e - this._viewRect.y) / a
+    });
+  }
+  requestRender(t = "manual") {
+    this._scheduleRender(t);
+  }
+  _onPointerEvent(t) {
+    if (this._handledPointerEvents.has(t) || this._isOverlayEvent(t)) return;
+    this._handledPointerEvents.add(t);
+    const e = this.clientToContent(t.clientX, t.clientY);
+    this.dispatchEvent(
+      new CustomEvent("rc-virtual-canvas-pointer", {
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0,
+        detail: {
+          type: t.type,
+          clientX: t.clientX,
+          clientY: t.clientY,
+          contentX: e.x,
+          contentY: e.y,
+          viewRect: c(this._viewRect),
+          button: t.button,
+          buttons: t.buttons,
+          altKey: t.altKey,
+          ctrlKey: t.ctrlKey,
+          shiftKey: t.shiftKey,
+          metaKey: t.metaKey,
+          sourceEvent: t
+        }
+      })
+    ) || t.preventDefault();
+  }
+  _isOverlayEvent(t) {
+    return t.composedPath().some(
+      (e) => e instanceof HTMLSlotElement && e.name === "overlay"
+    );
+  }
+  _update(t) {
+    if (this._rafHandle = 0, !this.isConnected || this._$canvas == null)
+      return;
+    const e = this._pendingRenderReason ?? (this.renderMode === "continuous" ? "animation-frame" : "manual");
+    this._pendingRenderReason = void 0, this.dispatchEvent(
+      new CustomEvent("rc-virtual-canvas-render", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          time: t,
+          reason: e,
+          viewRect: c(this._viewRect),
+          contentRect: c(this._contentRect)
+        }
+      })
+    ), this.renderMode === "continuous" && this._scheduleRender("animation-frame");
+  }
+  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");
+  }
+  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);
+  }
+  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
+    );
+  }
+  _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)));
+  }
+  _syncCanvasBackingStore() {
+    if (!this.autoResizeCanvas || this._$canvas == null)
+      return;
+    const t = Math.max(0, Math.round(this._viewRect.width)), e = Math.max(0, Math.round(this._viewRect.height));
+    this._$canvas.width !== t && (this._$canvas.width = t), this._$canvas.height !== e && (this._$canvas.height = e);
+  }
+  _getCanvasClientRect() {
+    return this._$canvas == null ? this.getBoundingClientRect() : this._$canvas.getBoundingClientRect();
+  }
+  _getMeasuredCanvasWidth(t) {
+    return !this.autoResizeCanvas && this._$canvas && this._$canvas.width > 0 ? this._$canvas.width : t;
+  }
+  _getMeasuredCanvasHeight(t) {
+    return !this.autoResizeCanvas && this._$canvas && this._$canvas.height > 0 ? this._$canvas.height : t;
+  }
+  _getViewportScaleX(t) {
+    return t.width > 0 ? this._viewRect.width / t.width : 1;
+  }
+  _getViewportScaleY(t) {
+    return t.height > 0 ? this._viewRect.height / t.height : 1;
+  }
+  render() {
+    return g`
+      <div
+        id="root"
+        part="scroller"
+        @scroll=${this._onScroll}
+        @pointerdown=${this._onPointerEvent}
+        @pointermove=${this._onPointerEvent}
+        @pointerup=${this._onPointerEvent}
+        @click=${this._onPointerEvent}
+        @dblclick=${this._onPointerEvent}
+        @contextmenu=${this._onPointerEvent}
+      >
+        <div id="overlay" part="overlay">
+          <slot name="overlay"></slot>
+        </div>
+        <div
+          id="placeholder"
+          style=${b({
+      width: `${this.contentWidth}px`,
+      height: `${this.contentHeight}px`
+    })}
+        ></div>
+      </div>
+
+      <slot @slotchange=${this._onSlotChange}></slot>
+    `;
+  }
+};
+v.styles = [w];
+let n = v;
+o([
+  h({ type: Number })
+], n.prototype, "contentWidth", 1);
+o([
+  h({ type: Number })
+], n.prototype, "contentHeight", 1);
+o([
+  h({ attribute: "auto-resize-canvas", type: Boolean })
+], n.prototype, "autoResizeCanvas", 2);
+o([
+  h({ attribute: "render-mode" })
+], n.prototype, "renderMode", 2);
+o([
+  h({ attribute: "image-rendering" })
+], n.prototype, "imageRendering", 2);
+o([
+  u("#root", !0)
+], n.prototype, "_$root", 2);
+o([
+  u("#placeholder", !0)
+], n.prototype, "_$placeholder", 2);
+o([
+  l()
+], n.prototype, "_$canvas", 2);
+o([
+  l()
+], n.prototype, "_viewRect", 2);
+o([
+  l()
+], n.prototype, "_contentRect", 2);
+export {
+  n as R
+};
+//# sourceMappingURL=rc-virtual-canvas-BJQbqNEu.js.map

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

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

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

@@ -0,0 +1,6 @@
+import { R as a } from "./rc-virtual-canvas-BJQbqNEu.js";
+customElements.get("rc-virtual-canvas") || customElements.define("rc-virtual-canvas", a);
+export {
+  a as RCVirtualCanvas
+};
+//# sourceMappingURL=rc-virtual-canvas-define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-virtual-canvas-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCVirtualCanvas } from './index.js';\n\ncustomElements.get('rc-virtual-canvas') || customElements.define('rc-virtual-canvas', RCVirtualCanvas);\n\nexport * from './index.js';\n"],"names":["RCVirtualCanvas"],"mappings":";AAEA,eAAe,IAAI,mBAAmB,KAAK,eAAe,OAAO,qBAAqBA,CAAe;"}

package/dist/rc-virtual-canvas.js

@@ -0,0 +1,5 @@
+import { R as o } from "./rc-virtual-canvas-BJQbqNEu.js";
+export {
+  o as RCVirtualCanvas
+};
+//# sourceMappingURL=rc-virtual-canvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-virtual-canvas.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-virtual-canvas';

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

@@ -0,0 +1,125 @@
+import { LitElement } from 'lit';
+export type RCVirtualCanvasViewRect = Readonly<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>;
+export type RCVirtualCanvasRenderMode = 'continuous' | 'viewport-change' | 'manual';
+export type RCVirtualCanvasRenderReason = 'animation-frame' | 'viewport-change' | 'manual';
+export type RCVirtualCanvasPoint = Readonly<{
+    x: number;
+    y: number;
+}>;
+export type RCVirtualCanvasPointerInit = {
+    type: string;
+    clientX: number;
+    clientY: number;
+    contentX: number;
+    contentY: number;
+    viewRect: RCVirtualCanvasViewRect;
+    button: number;
+    buttons: number;
+    altKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    metaKey: boolean;
+    sourceEvent: PointerEvent | MouseEvent;
+};
+export type RCVirtualCanvasImageRendering = 'auto' | 'crisp-edges' | 'pixelated';
+export type RCVirtualCanvasRenderInit = {
+    time: DOMHighResTimeStamp;
+    reason: RCVirtualCanvasRenderReason;
+    viewRect: RCVirtualCanvasViewRect;
+    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.
+ *
+ * @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.
+ */
+export declare class RCVirtualCanvas extends LitElement {
+    static styles: import('lit').CSSResult[];
+    private _rafHandle;
+    private _pendingRenderReason?;
+    private readonly _handledPointerEvents;
+    private readonly _boundUpdate;
+    private readonly _boundPointerEvent;
+    /** Pixel width of the virtual content */
+    set contentWidth(val: number);
+    get contentWidth(): number;
+    protected _contentWidth: number;
+    /** Pixel height of the virtual content */
+    set contentHeight(val: number);
+    get contentHeight(): number;
+    protected _contentHeight: number;
+    /** When true, keep the slotted canvas backing store aligned to the viewport. */
+    autoResizeCanvas: boolean;
+    /** Controls when render events are dispatched. */
+    renderMode: RCVirtualCanvasRenderMode;
+    /** Convenience image-rendering value applied to the slotted canvas. */
+    imageRendering: RCVirtualCanvasImageRendering;
+    protected _$root: HTMLDivElement;
+    protected _$placeholder: HTMLDivElement;
+    protected _$canvas: HTMLCanvasElement | null;
+    protected _viewRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    protected _contentRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    protected _resizeObserver: ResizeObserver;
+    protected _onScroll(): void;
+    protected _onSlotChange(e: Event): void;
+    getViewRect(): Readonly<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }>;
+    scrollToContent(x: number, y: number, options?: ScrollOptions): void;
+    centerOnContent(x: number, y: number, options?: ScrollOptions): void;
+    clientToContent(clientX: number, clientY: number): Readonly<{
+        x: number;
+        y: number;
+    }>;
+    contentToClient(x: number, y: number): Readonly<{
+        x: number;
+        y: number;
+    }>;
+    requestRender(reason?: RCVirtualCanvasRenderReason): void;
+    protected _onPointerEvent(event: PointerEvent | MouseEvent): void;
+    private _isOverlayEvent;
+    protected _update(time: DOMHighResTimeStamp): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _scheduleRender;
+    private _syncCanvasBackingStore;
+    private _getCanvasClientRect;
+    private _getMeasuredCanvasWidth;
+    private _getMeasuredCanvasHeight;
+    private _getViewportScaleX;
+    private _getViewportScaleY;
+    render(): import('lit').TemplateResult<1>;
+}
+export default RCVirtualCanvas;

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

@@ -0,0 +1,2 @@
+export declare const virtualCanvasStyles: import('lit').CSSResult;
+export default virtualCanvasStyles;