@terraware/web-components 5.0.3 → 5.0.4

package/components/VirtualWalkthrough/AnnotationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,UAAU,oBAAoB;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IAInC,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjE,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAoDD,QAAA,MAAM,eAAe,GAAI,0CAA0C,oBAAoB,mDA8ItF,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AnnotationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,UAAU,oBAAoB;IAC5B,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IAInC,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjE,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAiED,QAAA,MAAM,eAAe,GAAI,0CAA0C,oBAAoB,mDAsItF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/VirtualWalkthrough/AnnotationPanel.js

@@ -1,5 +1,5 @@
 import { useRef, useState, useEffect, useLayoutEffect } from 'react';
-import { useTheme } from '@mui/material';
+import { useTheme, Box } from '@mui/material';
 import PhotosCarousel from '../PhotosCarousel/index.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
@@ -36,17 +36,33 @@ const PANEL_STYLE = {
   display: 'flex',
   flexDirection: 'column'
 };
-const CAROUSEL_STYLE = {
+const CAROUSEL_SX = {
   width: 'min(60vw, 640px)',
   borderRadius: '12px 12px 0 0',
   overflow: 'hidden',
-  flexShrink: 0
+  flexShrink: 0,
+  '& .photos-carousel-image': {
+    height: 'min(400px, 40vh)'
+  },
+  '& .photos-carousel-container': {
+    minHeight: 'min(200px, 20vh)'
+  }
 };
 const TEXT_BLOCK_STYLE = {
   padding: '24px',
   display: 'flex',
   flexDirection: 'column',
-  gap: 8
+  gap: 8,
+  minHeight: 0
+};
+const BODY_STYLE = {
+  fontSize: 16,
+  lineHeight: '24px',
+  margin: 0,
+  minHeight: 0,
+  overflowY: 'auto',
+  overscrollBehavior: 'contain',
+  scrollbarWidth: 'thin'
 };
 const AnnotationPanel = ({
   annotation,
@@ -149,8 +165,8 @@ const AnnotationPanel = ({
       ref: panelRef,
       "data-testid": "annotation-panel",
       style: panelStyle,
-      children: [annotation.imageUrls && annotation.imageUrls.length > 0 && /*#__PURE__*/jsx("div", {
-        style: CAROUSEL_STYLE,
+      children: [annotation.imageUrls && annotation.imageUrls.length > 0 && /*#__PURE__*/jsx(Box, {
+        sx: CAROUSEL_SX,
         children: /*#__PURE__*/jsx(PhotosCarousel, {
           photos: annotation.imageUrls.map(url => ({
             url,
@@ -187,10 +203,8 @@ const AnnotationPanel = ({
         }), annotation.bodyText && /*#__PURE__*/jsx("p", {
           "data-testid": "annotation-panel-description",
           style: {
-            fontSize: 16,
-            color: theme.palette.TwClrTxt,
-            lineHeight: '24px',
-            margin: 0
+            ...BODY_STYLE,
+            color: theme.palette.TwClrTxt
           },
           children: annotation.bodyText
         })]

package/components/VirtualWalkthrough/vr-annotation-panel-layout.d.ts

@@ -3,4 +3,69 @@
  * each candidate line. A single word wider than `maxWidth` still gets its own line.
  */
 export declare const wrapText: (text: string, maxWidth: number, measure: (segment: string) => number) => string[];
+export declare const PANEL_CANVAS_WIDTH = 1024;
+/** Tallest the panel can grow; also the canvas the content is painted into. */
+export declare const PANEL_MAX_HEIGHT = 768;
+/** Shortest the panel can shrink, so a bare title still reads as a panel rather than a sliver. */
+export declare const PANEL_MIN_HEIGHT = 200;
+export declare const PANEL_PAD_X = 48;
+export declare const PANEL_PAD_Y = 40;
+export declare const IMAGE_BAND_HEIGHT = 360;
+export declare const CHIP_HEIGHT = 44;
+export declare const TITLE_LINE_HEIGHT = 56;
+export declare const BODY_LINE_HEIGHT = 40;
+/**
+ * Tallest canvas the body text is rasterised into. The body scrolls as a window onto this canvas,
+ * so it bounds how much text an annotation can show — far more than the panel itself holds.
+ */
+export declare const TEXT_CANVAS_MAX_HEIGHT = 2048;
+export declare const PANEL_FONTS: {
+    readonly label: "600 28px sans-serif";
+    readonly title: "700 48px sans-serif";
+    readonly body: "400 32px sans-serif";
+};
+export type PanelTextStyle = keyof typeof PANEL_FONTS;
+export interface PanelLayoutInput {
+    title: string;
+    label?: string;
+    bodyText?: string;
+    imageCount: number;
+    contentWidth: number;
+    measure: (text: string, style: PanelTextStyle) => number;
+}
+export interface PanelLayout {
+    /** Painted height of the panel, between the min and max bounds. */
+    height: number;
+    image: {
+        y: number;
+        height: number;
+    } | null;
+    dotsY: number | null;
+    chip: {
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    title: {
+        y: number;
+        lines: string[];
+    };
+    body: {
+        /** Top of the body viewport, in panel coordinates. */
+        y: number;
+        lines: string[];
+        /** Height of all the lines together, which is also the text canvas height. */
+        contentHeight: number;
+        /** Height of the visible window onto that canvas. */
+        viewportHeight: number;
+        scrollable: boolean;
+    };
+}
+/**
+ * Lays the panel's blocks out top-to-bottom and reports the height they need, so the quad
+ * can be sized to the content instead of a fixed aspect. Everything above the body is a header
+ * that has to fit within `PANEL_MAX_HEIGHT`; the body instead scrolls within whatever height
+ * the header leaves it.
+ */
+export declare const layoutPanel: ({ title, label, bodyText, imageCount, contentWidth, measure, }: PanelLayoutInput) => PanelLayout;
 //# sourceMappingURL=vr-annotation-panel-layout.d.ts.map

package/components/VirtualWalkthrough/vr-annotation-panel-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vr-annotation-panel-layout.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/vr-annotation-panel-layout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,EAAE,UAAU,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,KAAG,MAAM,EAoBrG,CAAC"}
+{"version":3,"file":"vr-annotation-panel-layout.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/vr-annotation-panel-layout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,EAAE,UAAU,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,KAAG,MAAM,EAoBrG,CAAC;AAEF,eAAO,MAAM,kBAAkB,OAAO,CAAC;AACvC,+EAA+E;AAC/E,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,kGAAkG;AAClG,eAAO,MAAM,gBAAgB,MAAM,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,WAAW,KAAK,CAAC;AAE9B,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAKrC,eAAO,MAAM,WAAW,KAAK,CAAC;AAI9B,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAE3C,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,KAAK,MAAM,CAAC;CAC1D;AAED,MAAM,WAAW,WAAW;IAC1B,mEAAmE;IACnE,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC5C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC1D,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;IACtC,IAAI,EAAE;QACJ,sDAAsD;QACtD,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,8EAA8E;QAC9E,aAAa,EAAE,MAAM,CAAC;QACtB,qDAAqD;QACrD,cAAc,EAAE,MAAM,CAAC;QACvB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH;AASD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,gEAOzB,gBAAgB,KAAG,WA8CrB,CAAC"}

package/components/VirtualWalkthrough/vr-annotation-panel-layout.js

@@ -20,5 +20,103 @@ const wrapText = (text, maxWidth, measure) => {
   }
   return lines;
 };
+const PANEL_CANVAS_WIDTH = 1024;
+/** Tallest the panel can grow; also the canvas the content is painted into. */
+const PANEL_MAX_HEIGHT = 768;
+/** Shortest the panel can shrink, so a bare title still reads as a panel rather than a sliver. */
+const PANEL_MIN_HEIGHT = 200;
+const PANEL_PAD_X = 48;
+const PANEL_PAD_Y = 40;
+const IMAGE_BAND_HEIGHT = 360;
+const IMAGE_GAP = 16;
+const DOTS_BLOCK_HEIGHT = 32;
+const DOTS_CENTER_OFFSET = 4;
+const CHIP_HEIGHT = 44;
+const CHIP_PAD_X = 16;
+const CHIP_GAP = 24;
+const TITLE_LINE_HEIGHT = 56;
+const TITLE_GAP = 16;
+const BODY_LINE_HEIGHT = 40;
 
-export { wrapText };
+/**
+ * Tallest canvas the body text is rasterised into. The body scrolls as a window onto this canvas,
+ * so it bounds how much text an annotation can show — far more than the panel itself holds.
+ */
+const TEXT_CANVAS_MAX_HEIGHT = 2048;
+const PANEL_FONTS = {
+  label: '600 28px sans-serif',
+  title: '700 48px sans-serif',
+  body: '400 32px sans-serif'
+};
+/** Keeps the lines whose full line box fits above the bottom padding. */
+const fitLines = (lines, y, lineHeight) => {
+  const room = Math.max(0, Math.floor((PANEL_MAX_HEIGHT - PANEL_PAD_Y - y) / lineHeight));
+  return lines.slice(0, room);
+};
+
+/**
+ * Lays the panel's blocks out top-to-bottom and reports the height they need, so the quad
+ * can be sized to the content instead of a fixed aspect. Everything above the body is a header
+ * that has to fit within `PANEL_MAX_HEIGHT`; the body instead scrolls within whatever height
+ * the header leaves it.
+ */
+const layoutPanel = ({
+  title,
+  label,
+  bodyText,
+  imageCount,
+  contentWidth,
+  measure
+}) => {
+  let y = PANEL_PAD_Y;
+  const image = imageCount > 0 ? {
+    y,
+    height: IMAGE_BAND_HEIGHT
+  } : null;
+  let dotsY = null;
+  if (image) {
+    y += IMAGE_BAND_HEIGHT + IMAGE_GAP;
+    if (imageCount > 1) {
+      dotsY = y + DOTS_CENTER_OFFSET;
+      y += DOTS_BLOCK_HEIGHT;
+    }
+    y += IMAGE_GAP;
+  }
+  const chip = label ? {
+    y,
+    width: measure(label, 'label') + CHIP_PAD_X * 2,
+    height: CHIP_HEIGHT
+  } : null;
+  if (chip) {
+    y += CHIP_HEIGHT + CHIP_GAP;
+  }
+  const titleLines = wrapText(title, contentWidth, segment => measure(segment, 'title'));
+  const fittedTitle = fitLines(titleLines, y, TITLE_LINE_HEIGHT);
+  const titleY = y;
+  y += fittedTitle.length * TITLE_LINE_HEIGHT + TITLE_GAP;
+  const bodyLines = bodyText ? wrapText(bodyText, contentWidth, segment => measure(segment, 'body')) : [];
+  const fittedBody = bodyLines.slice(0, Math.floor(TEXT_CANVAS_MAX_HEIGHT / BODY_LINE_HEIGHT));
+  const bodyY = y;
+  const contentHeight = fittedBody.length * BODY_LINE_HEIGHT;
+  const viewportHeight = Math.min(contentHeight, Math.max(0, PANEL_MAX_HEIGHT - PANEL_PAD_Y - bodyY));
+  const height = Math.max(PANEL_MIN_HEIGHT, Math.min(PANEL_MAX_HEIGHT, bodyY + viewportHeight + PANEL_PAD_Y));
+  return {
+    height,
+    image,
+    dotsY,
+    chip,
+    title: {
+      y: titleY,
+      lines: fittedTitle
+    },
+    body: {
+      y: bodyY,
+      lines: fittedBody,
+      contentHeight,
+      viewportHeight,
+      scrollable: viewportHeight > 0 && contentHeight > viewportHeight
+    }
+  };
+};
+
+export { BODY_LINE_HEIGHT, CHIP_HEIGHT, IMAGE_BAND_HEIGHT, PANEL_CANVAS_WIDTH, PANEL_FONTS, PANEL_MAX_HEIGHT, PANEL_MIN_HEIGHT, PANEL_PAD_X, PANEL_PAD_Y, TEXT_CANVAS_MAX_HEIGHT, TITLE_LINE_HEIGHT, layoutPanel, wrapText };

package/components/VirtualWalkthrough/vr-annotation-panel.d.ts

@@ -6,13 +6,28 @@ export declare class VrAnnotationPanel extends Script {
     bodyText?: string;
     imageUrls?: string[];
     annotationIndex: number;
-    private _material?;
-    private _texture?;
-    private _mesh?;
-    private _canvas?;
+    private _chromeMaterial?;
+    private _chromeTexture?;
+    private _chromeMesh?;
+    private _chromeCanvas?;
+    private _textMaterial?;
+    private _textTexture?;
+    private _textMesh?;
+    private _textCanvas?;
+    private _textInstance?;
+    private _thumbMaterial?;
+    private _thumbMesh?;
+    private _thumbInstance?;
     private _drawnSignature;
     private _currentImage;
     private _loadToken;
+    private _loadedImage?;
+    private _layout?;
+    private _scrollY;
+    private _maxScroll;
+    /** Height (canvas px) the chrome occupies; the rest of its canvas is unused. */
+    private _canvasHeight;
+    private _panelHeight;
     private _headRotation;
     private _anchor;
     private _scratchDir;
@@ -22,17 +37,35 @@ export declare class VrAnnotationPanel extends Script {
     private _scratchScale;
     private _onSelect;
     initialize(): void;
-    private _createMesh;
+    private _createTexture;
+    private _createTexturedMaterial;
+    private _createQuadMesh;
+    /** Rewrites the quad's four corners and the slice of its texture they map to. */
+    private _writeQuad;
+    /** Converts a y in panel canvas coordinates to the entity's local space. */
+    private _localY;
+    private _writeChromeQuad;
+    /** Maps the visible window of the (much taller) text texture onto the body quad. */
+    private _writeTextQuad;
+    private _writeThumbQuad;
     private _roundRect;
     private _drawArrow;
     private _drawDots;
-    private _drawContent;
+    /** Re-measures the content, resizes the panel, and repaints both canvases. */
+    private _rebuild;
+    private _drawChrome;
+    /**
+     * Paints every body line onto its own canvas, tall enough to hold all of them. Scrolling then
+     * only moves the quad's UV window over this texture, so no repaint or upload happens per frame.
+     */
+    private _drawText;
     private _setImage;
     private _loadCurrentImage;
     private _rayQuadHit;
     /** True when the ray points at the panel quad (used to suppress the empty-select dismiss). */
     rayHitsPanel(origin: Vec3, direction: Vec3): boolean;
-    update(): void;
+    update(dt: number): void;
+    private _scroll;
     private _trackHead;
     private _teardown;
 }

package/components/VirtualWalkthrough/vr-annotation-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vr-annotation-panel.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/vr-annotation-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,MAAM,EAGN,IAAI,EAEL,MAAM,YAAY,CAAC;AAmCpB,qBAAa,iBAAkB,SAAQ,MAAM;IAC3C,MAAM,CAAC,UAAU,SAAuB;IAGxC,KAAK,SAAM;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,eAAe,SAAM;IAErB,OAAO,CAAC,SAAS,CAAC,CAAmB;IACrC,OAAO,CAAC,QAAQ,CAAC,CAAU;IAC3B,OAAO,CAAC,KAAK,CAAC,CAAO;IACrB,OAAO,CAAC,OAAO,CAAC,CAAoB;IACpC,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAK;IAEvB,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,aAAa,CAAc;IAEnC,OAAO,CAAC,SAAS,CAsBf;IAEF,UAAU;IAwCV,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,YAAY;IAqFpB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,WAAW;IAmBnB,8FAA8F;IAC9F,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO;IAIpD,MAAM;IAmCN,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,SAAS;CAYlB"}
+{"version":3,"file":"vr-annotation-panel.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/vr-annotation-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,MAAM,EAGN,IAAI,EAEL,MAAM,YAAY,CAAC;AA2CpB,qBAAa,iBAAkB,SAAQ,MAAM;IAC3C,MAAM,CAAC,UAAU,SAAuB;IAGxC,KAAK,SAAM;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,eAAe,SAAM;IAErB,OAAO,CAAC,eAAe,CAAC,CAAmB;IAC3C,OAAO,CAAC,cAAc,CAAC,CAAU;IACjC,OAAO,CAAC,WAAW,CAAC,CAAO;IAC3B,OAAO,CAAC,aAAa,CAAC,CAAoB;IAE1C,OAAO,CAAC,aAAa,CAAC,CAAmB;IACzC,OAAO,CAAC,YAAY,CAAC,CAAU;IAC/B,OAAO,CAAC,SAAS,CAAC,CAAO;IACzB,OAAO,CAAC,WAAW,CAAC,CAAoB;IACxC,OAAO,CAAC,aAAa,CAAC,CAAe;IAErC,OAAO,CAAC,cAAc,CAAC,CAAmB;IAC1C,OAAO,CAAC,UAAU,CAAC,CAAO;IAC1B,OAAO,CAAC,cAAc,CAAC,CAAe;IAEtC,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAAC,CAAmB;IACxC,OAAO,CAAC,OAAO,CAAC,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,UAAU,CAAK;IACvB,gFAAgF;IAChF,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,YAAY,CAA8B;IAElD,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,UAAU,CAAc;IAChC,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,aAAa,CAAc;IAEnC,OAAO,CAAC,SAAS,CAwBf;IAEF,UAAU;IA0CV,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,uBAAuB;IAgB/B,OAAO,CAAC,eAAe;IASvB,iFAAiF;IACjF,OAAO,CAAC,UAAU;IAelB,4EAA4E;IAC5E,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,gBAAgB;IASxB,oFAAoF;IACpF,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,eAAe;IA0BvB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,SAAS;IAWjB,8EAA8E;IAC9E,OAAO,CAAC,QAAQ;IAuChB,OAAO,CAAC,WAAW;IAoEnB;;;OAGG;IACH,OAAO,CAAC,SAAS;IAmCjB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,WAAW;IAmBnB,8FAA8F;IAC9F,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO;IAIpD,MAAM,CAAC,EAAE,EAAE,MAAM;IAkCjB,OAAO,CAAC,OAAO;IAsBf,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,SAAS;CAsBlB"}

package/components/VirtualWalkthrough/vr-annotation-panel.js

@@ -1,19 +1,22 @@
-import { Vec3, Script, Quat, Texture, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE, StandardMaterial, Color, BLEND_NORMAL, CULLFACE_NONE, MeshInstance, LAYERID_IMMEDIATE, Mesh } from 'playcanvas';
-import { wrapText } from './vr-annotation-panel-layout.js';
+import { Vec3, Script, Quat, StandardMaterial, MeshInstance, Color, BLEND_NORMAL, CULLFACE_NONE, LAYERID_IMMEDIATE, Texture, FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE, Mesh } from 'playcanvas';
+import { PANEL_MAX_HEIGHT, PANEL_CANVAS_WIDTH, layoutPanel, PANEL_PAD_X, PANEL_FONTS, TITLE_LINE_HEIGHT, BODY_LINE_HEIGHT } from './vr-annotation-panel-layout.js';
+import { readScrollAxis, nextScrollY } from './vr-annotation-scroll.js';
 import { rayQuadHit } from './xr-ray-quad.js';
 
-const CANVAS_WIDTH = 1024;
-const CANVAS_HEIGHT = 768;
 const PANEL_WIDTH = 7.5;
-const PANEL_HEIGHT = PANEL_WIDTH * CANVAS_HEIGHT / CANVAS_WIDTH;
 
 /** Gap (m) between the top of the hotspot and the bottom edge of the panel. */
 const PANEL_GAP = 0.75;
+const PX_TO_M = PANEL_WIDTH / PANEL_CANVAS_WIDTH;
 
-/** World-space offset from the anchored hotspot: raise the panel above it so the
- * (tall) panel clears the hotspot rather than covering it. */
-const PANEL_OFFSET = new Vec3(0, PANEL_HEIGHT / 2 + PANEL_GAP, 0);
-const PAD_X = 48;
+/** Local +z faces the viewer, so the overlay quads sit just in front of the chrome quad. Their
+ * draw order would otherwise depend on how the transparent sort breaks a tie between coplanar
+ * quads, all of which have depth testing off. */
+const TEXT_Z = 0.001;
+const THUMB_Z = 0.002;
+const SCROLLBAR_WIDTH = 10;
+const SCROLLBAR_INSET = 18;
+const SCROLLBAR_MIN_HEIGHT = 48;
 
 /** Local +z (the quad's front face) — used to derive the panel's yaw toward the viewer. */
 const FORWARD_Z = new Vec3(0, 0, 1);
@@ -22,10 +25,6 @@ const RIGHT_AXIS = new Vec3(1, 0, 0);
 const UP_AXIS = new Vec3(0, 1, 0);
 const RAD_TO_DEG = 180 / Math.PI;
 
-/** Fixed image band (canvas px) so arrows/dots keep a stable position while images load. */
-const IMAGE_Y = 40;
-const IMAGE_H = 360;
-
 /** Width (canvas px) of the left/right arrow hit + draw zones over the image band. */
 const ARROW_ZONE_W = 170;
 class VrAnnotationPanel extends Script {
@@ -37,6 +36,11 @@ class VrAnnotationPanel extends Script {
   _drawnSignature = null;
   _currentImage = 0;
   _loadToken = 0;
+  _scrollY = 0;
+  _maxScroll = 0;
+  /** Height (canvas px) the chrome occupies; the rest of its canvas is unused. */
+  _canvasHeight = PANEL_MAX_HEIGHT;
+  _panelHeight = PANEL_MAX_HEIGHT * PX_TO_M;
   _headRotation = new Quat();
   _anchor = new Vec3();
   _scratchDir = new Vec3();
@@ -49,73 +53,136 @@ class VrAnnotationPanel extends Script {
       return;
     }
     const images = this.imageUrls ?? [];
-    if (images.length <= 1) {
+    const band = this._layout?.image;
+    if (images.length <= 1 || !band) {
       return;
     }
     const hit = this._rayQuadHit(inputSource.getOrigin(), inputSource.getDirection());
     if (!hit) {
       return;
     }
-    const cx = (hit.u + 1) / 2 * CANVAS_WIDTH;
-    const cy = (1 - hit.v) / 2 * CANVAS_HEIGHT;
-    if (cy < IMAGE_Y || cy > IMAGE_Y + IMAGE_H) {
+    const cx = (hit.u + 1) / 2 * PANEL_CANVAS_WIDTH;
+    // The image sits on the chrome quad, which doesn't scroll, so this needs no scroll offset.
+    const cy = (1 - hit.v) / 2 * this._canvasHeight;
+    if (cy < band.y || cy > band.y + band.height) {
       return;
     }
     if (cx <= ARROW_ZONE_W) {
       this._setImage((this._currentImage - 1 + images.length) % images.length);
-    } else if (cx >= CANVAS_WIDTH - ARROW_ZONE_W) {
+    } else if (cx >= PANEL_CANVAS_WIDTH - ARROW_ZONE_W) {
       this._setImage((this._currentImage + 1) % images.length);
     }
   };
   initialize() {
-    this._canvas = document.createElement('canvas');
-    this._canvas.width = CANVAS_WIDTH;
-    this._canvas.height = CANVAS_HEIGHT;
-    this._texture = new Texture(this.app.graphicsDevice, {
-      name: 'vr-annotation-panel',
-      width: CANVAS_WIDTH,
-      height: CANVAS_HEIGHT,
+    this._chromeCanvas = document.createElement('canvas');
+    this._chromeCanvas.width = PANEL_CANVAS_WIDTH;
+    this._chromeCanvas.height = PANEL_MAX_HEIGHT;
+    this._chromeTexture = this._createTexture('vr-annotation-panel', this._chromeCanvas);
+    this._chromeMaterial = this._createTexturedMaterial(this._chromeTexture);
+    this._chromeMesh = this._createQuadMesh();
+
+    // Sized once the first layout runs; until then it has nothing to show.
+    this._textMesh = this._createQuadMesh();
+    this._textMaterial = new StandardMaterial();
+    this._textInstance = new MeshInstance(this._textMesh, this._textMaterial);
+    this._textInstance.visible = false;
+    this._thumbMaterial = new StandardMaterial();
+    this._thumbMaterial.useLighting = false;
+    this._thumbMaterial.emissive = new Color(0, 0, 0);
+    this._thumbMaterial.opacity = 0.3;
+    this._thumbMaterial.blendType = BLEND_NORMAL;
+    this._thumbMaterial.depthTest = false;
+    this._thumbMaterial.depthWrite = false;
+    this._thumbMaterial.cull = CULLFACE_NONE;
+    this._thumbMaterial.update();
+    this._thumbMesh = this._createQuadMesh();
+    this._thumbInstance = new MeshInstance(this._thumbMesh, this._thumbMaterial);
+    this._thumbInstance.visible = false;
+    this.entity.addComponent('render', {
+      meshInstances: [new MeshInstance(this._chromeMesh, this._chromeMaterial), this._textInstance, this._thumbInstance],
+      layers: [LAYERID_IMMEDIATE]
+    });
+    this.app.xr?.input?.on('select', this._onSelect);
+    // Script removal fires a 'destroy' event rather than calling a destroy() method, so the
+    // teardown has to be registered as a listener or the handler and GPU resources outlive us.
+    this.once('destroy', () => this._teardown());
+  }
+  _createTexture(name, source) {
+    const texture = new Texture(this.app.graphicsDevice, {
+      name,
+      width: source.width,
+      height: source.height,
       addressU: ADDRESS_CLAMP_TO_EDGE,
       addressV: ADDRESS_CLAMP_TO_EDGE,
       minFilter: FILTER_LINEAR,
       magFilter: FILTER_LINEAR,
       mipmaps: true
     });
-    this._texture.setSource(this._canvas);
+    texture.setSource(source);
+    return texture;
+  }
+  _createTexturedMaterial(texture) {
     const material = new StandardMaterial();
     material.useLighting = false;
     material.emissive = new Color(1, 1, 1);
-    material.emissiveMap = this._texture;
-    material.opacityMap = this._texture;
+    material.emissiveMap = texture;
+    material.opacityMap = texture;
     material.opacityMapChannel = 'a';
     material.blendType = BLEND_NORMAL;
     material.depthTest = false;
     material.depthWrite = false;
     material.cull = CULLFACE_NONE;
     material.update();
-    this._material = material;
-    this._mesh = this._createMesh();
-    const meshInstance = new MeshInstance(this._mesh, material);
-    this.entity.addComponent('render', {
-      meshInstances: [meshInstance],
-      layers: [LAYERID_IMMEDIATE]
-    });
-    this.app.xr?.input?.on('select', this._onSelect);
-    // Script removal fires a 'destroy' event rather than calling a destroy() method, so the
-    // teardown has to be registered as a listener or the handler and GPU resources outlive us.
-    this.once('destroy', () => this._teardown());
+    return material;
   }
-  _createMesh() {
-    const hw = PANEL_WIDTH / 2;
-    const hh = PANEL_HEIGHT / 2;
+  _createQuadMesh() {
     const mesh = new Mesh(this.app.graphicsDevice);
-    mesh.setPositions([-hw, -hh, 0, hw, -hh, 0, hw, hh, 0, -hw, hh, 0]);
     mesh.setNormals([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
-    mesh.setUvs(0, [0, 1, 1, 1, 1, 0, 0, 0]);
     mesh.setIndices([0, 1, 2, 0, 2, 3]);
-    mesh.update();
+    this._writeQuad(mesh, -PANEL_WIDTH / 2, PANEL_WIDTH / 2, 0, 0, 0, 0, 1);
     return mesh;
   }
+
+  /** Rewrites the quad's four corners and the slice of its texture they map to. */
+  _writeQuad(mesh, left, right, top, bottom, z, vTop, vBottom) {
+    mesh.setPositions([left, bottom, z, right, bottom, z, right, top, z, left, top, z]);
+    mesh.setUvs(0, [0, vBottom, 1, vBottom, 1, vTop, 0, vTop]);
+    mesh.update();
+  }
+
+  /** Converts a y in panel canvas coordinates to the entity's local space. */
+  _localY(canvasY) {
+    return this._panelHeight / 2 - canvasY * PX_TO_M;
+  }
+  _writeChromeQuad() {
+    if (!this._chromeMesh) {
+      return;
+    }
+    const hw = PANEL_WIDTH / 2;
+    const hh = this._panelHeight / 2;
+    this._writeQuad(this._chromeMesh, -hw, hw, hh, -hh, 0, 0, this._canvasHeight / PANEL_MAX_HEIGHT);
+  }
+
+  /** Maps the visible window of the (much taller) text texture onto the body quad. */
+  _writeTextQuad() {
+    const body = this._layout?.body;
+    if (!this._textMesh || !this._textInstance || !body || body.contentHeight === 0) {
+      return;
+    }
+    this._writeQuad(this._textMesh, -PANEL_WIDTH / 2, PANEL_WIDTH / 2, this._localY(body.y), this._localY(body.y + body.viewportHeight), TEXT_Z, this._scrollY / body.contentHeight, (this._scrollY + body.viewportHeight) / body.contentHeight);
+  }
+  _writeThumbQuad() {
+    const body = this._layout?.body;
+    if (!this._thumbMesh || !body?.scrollable) {
+      return;
+    }
+    // The minimum keeps the thumb grabbable on very long text, but never past the track itself.
+    const height = Math.min(body.viewportHeight, Math.max(SCROLLBAR_MIN_HEIGHT, body.viewportHeight * body.viewportHeight / body.contentHeight));
+    const travel = body.viewportHeight - height;
+    const top = body.y + (this._maxScroll > 0 ? this._scrollY / this._maxScroll * travel : 0);
+    const right = PANEL_CANVAS_WIDTH - SCROLLBAR_INSET;
+    this._writeQuad(this._thumbMesh, (right - SCROLLBAR_WIDTH) * PX_TO_M - PANEL_WIDTH / 2, right * PX_TO_M - PANEL_WIDTH / 2, this._localY(top), this._localY(top + height), THUMB_Z, 0, 1);
+  }
   _roundRect(ctx, x, y, w, h, r) {
     ctx.beginPath();
     ctx.moveTo(x + r, y);
@@ -143,7 +210,7 @@ class VrAnnotationPanel extends Script {
   }
   _drawDots(ctx, count, dotY) {
     const gap = 26;
-    const startX = CANVAS_WIDTH / 2 - (count - 1) * gap / 2;
+    const startX = PANEL_CANVAS_WIDTH / 2 - (count - 1) * gap / 2;
     for (let i = 0; i < count; i++) {
       ctx.beginPath();
       ctx.arc(startX + i * gap, dotY, 7, 0, Math.PI * 2);
@@ -151,83 +218,144 @@ class VrAnnotationPanel extends Script {
       ctx.fill();
     }
   }
-  _drawContent(image) {
-    const ctx = this._canvas?.getContext('2d');
+
+  /** Re-measures the content, resizes the panel, and repaints both canvases. */
+  _rebuild() {
+    const ctx = this._chromeCanvas?.getContext('2d');
     if (!ctx) {
       return;
     }
-    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+    const images = this.imageUrls ?? [];
+    this._layout = layoutPanel({
+      title: this.title,
+      label: this.label,
+      bodyText: this.bodyText,
+      imageCount: images.length,
+      contentWidth: PANEL_CANVAS_WIDTH - PANEL_PAD_X * 2,
+      measure: (text, style) => {
+        ctx.font = PANEL_FONTS[style];
+        return ctx.measureText(text).width;
+      }
+    });
+    const {
+      body
+    } = this._layout;
+    this._maxScroll = body.contentHeight - body.viewportHeight;
+    this._canvasHeight = this._layout.height;
+    this._panelHeight = this._layout.height * PX_TO_M;
+    this._drawChrome();
+    this._drawText();
+    this._writeChromeQuad();
+    this._writeTextQuad();
+    this._writeThumbQuad();
+    if (this._textInstance) {
+      this._textInstance.visible = body.contentHeight > 0;
+    }
+    if (this._thumbInstance) {
+      this._thumbInstance.visible = body.scrollable;
+    }
+  }
+  _drawChrome() {
+    const ctx = this._chromeCanvas?.getContext('2d');
+    const layout = this._layout;
+    if (!ctx || !layout) {
+      return;
+    }
+    const contentWidth = PANEL_CANVAS_WIDTH - PANEL_PAD_X * 2;
+    const images = this.imageUrls ?? [];
+    ctx.clearRect(0, 0, PANEL_CANVAS_WIDTH, PANEL_MAX_HEIGHT);
     ctx.fillStyle = 'rgba(255, 255, 255, 0.96)';
-    this._roundRect(ctx, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT, 32);
+    this._roundRect(ctx, 0, 0, PANEL_CANVAS_WIDTH, layout.height, 32);
     ctx.fill();
-    let y = IMAGE_Y;
-    const contentWidth = CANVAS_WIDTH - PAD_X * 2;
-    const images = this.imageUrls ?? [];
-    if (images.length > 0) {
+    if (layout.image) {
+      const {
+        y: bandY,
+        height: bandH
+      } = layout.image;
       ctx.save();
-      this._roundRect(ctx, PAD_X, IMAGE_Y, contentWidth, IMAGE_H, 16);
+      this._roundRect(ctx, PANEL_PAD_X, bandY, contentWidth, bandH, 16);
       ctx.clip();
+      const image = this._loadedImage;
       if (image) {
-        const scale = Math.max(contentWidth / image.width, IMAGE_H / image.height);
+        const scale = Math.max(contentWidth / image.width, bandH / image.height);
         const dw = image.width * scale;
         const dh = image.height * scale;
-        ctx.drawImage(image, PAD_X + (contentWidth - dw) / 2, IMAGE_Y + (IMAGE_H - dh) / 2, dw, dh);
+        ctx.drawImage(image, PANEL_PAD_X + (contentWidth - dw) / 2, bandY + (bandH - dh) / 2, dw, dh);
       } else {
         ctx.fillStyle = 'rgba(0, 0, 0, 0.06)';
-        ctx.fillRect(PAD_X, IMAGE_Y, contentWidth, IMAGE_H);
+        ctx.fillRect(PANEL_PAD_X, bandY, contentWidth, bandH);
       }
       ctx.restore();
-      y = IMAGE_Y + IMAGE_H + 16;
-      if (images.length > 1) {
-        const bandCenterY = IMAGE_Y + IMAGE_H / 2;
+      if (layout.dotsY !== null) {
+        const bandCenterY = bandY + bandH / 2;
         this._drawArrow(ctx, ARROW_ZONE_W / 2, bandCenterY, true);
-        this._drawArrow(ctx, CANVAS_WIDTH - ARROW_ZONE_W / 2, bandCenterY, false);
-        this._drawDots(ctx, images.length, y + 4);
-        y += 32;
+        this._drawArrow(ctx, PANEL_CANVAS_WIDTH - ARROW_ZONE_W / 2, bandCenterY, false);
+        this._drawDots(ctx, images.length, layout.dotsY);
       }
-      y += 16;
     }
-    if (this.label) {
-      ctx.font = '600 28px sans-serif';
+    if (layout.chip && this.label) {
+      ctx.font = PANEL_FONTS.label;
       ctx.textBaseline = 'middle';
-      const chipW = ctx.measureText(this.label).width + 32;
-      const chipH = 44;
       ctx.fillStyle = 'rgba(44, 134, 88, 0.95)';
-      this._roundRect(ctx, PAD_X, y, chipW, chipH, 12);
+      this._roundRect(ctx, PANEL_PAD_X, layout.chip.y, layout.chip.width, layout.chip.height, 12);
       ctx.fill();
       ctx.fillStyle = '#ffffff';
-      ctx.fillText(this.label, PAD_X + 16, y + chipH / 2);
-      y += chipH + 24;
+      ctx.fillText(this.label, PANEL_PAD_X + 16, layout.chip.y + layout.chip.height / 2);
     }
     ctx.textBaseline = 'top';
     ctx.fillStyle = '#000000';
-    ctx.font = '700 48px sans-serif';
-    const titleLines = wrapText(this.title, contentWidth, s => ctx.measureText(s).width);
-    for (const line of titleLines) {
-      if (y > CANVAS_HEIGHT - 40) {
-        break;
-      }
-      ctx.fillText(line, PAD_X, y);
-      y += 56;
+    ctx.font = PANEL_FONTS.title;
+    layout.title.lines.forEach((line, index) => {
+      ctx.fillText(line, PANEL_PAD_X, layout.title.y + index * TITLE_LINE_HEIGHT);
+    });
+    if (layout.body.scrollable) {
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.08)';
+      const trackX = PANEL_CANVAS_WIDTH - SCROLLBAR_INSET - SCROLLBAR_WIDTH;
+      this._roundRect(ctx, trackX, layout.body.y, SCROLLBAR_WIDTH, layout.body.viewportHeight, SCROLLBAR_WIDTH / 2);
+      ctx.fill();
     }
-    y += 16;
-    if (this.bodyText) {
-      ctx.font = '400 32px sans-serif';
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
-      const lines = wrapText(this.bodyText, contentWidth, s => ctx.measureText(s).width);
-      for (const line of lines) {
-        if (y > CANVAS_HEIGHT - 40) {
-          break;
-        }
-        ctx.fillText(line, PAD_X, y);
-        y += 40;
+    this._chromeTexture?.upload();
+  }
+
+  /**
+   * Paints every body line onto its own canvas, tall enough to hold all of them. Scrolling then
+   * only moves the quad's UV window over this texture, so no repaint or upload happens per frame.
+   */
+  _drawText() {
+    const body = this._layout?.body;
+    if (!body) {
+      return;
+    }
+    const height = Math.max(1, body.contentHeight);
+    if (!this._textCanvas || this._textCanvas.height !== height) {
+      this._textCanvas = document.createElement('canvas');
+      this._textCanvas.width = PANEL_CANVAS_WIDTH;
+      this._textCanvas.height = height;
+      this._textTexture?.destroy();
+      this._textTexture = this._createTexture('vr-annotation-panel-text', this._textCanvas);
+      this._textMaterial?.destroy();
+      this._textMaterial = this._createTexturedMaterial(this._textTexture);
+      if (this._textInstance) {
+        this._textInstance.material = this._textMaterial;
       }
     }
-    this._texture?.upload();
+    const ctx = this._textCanvas.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+    ctx.clearRect(0, 0, PANEL_CANVAS_WIDTH, height);
+    ctx.textBaseline = 'top';
+    ctx.font = PANEL_FONTS.body;
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.85)';
+    body.lines.forEach((line, index) => {
+      ctx.fillText(line, PANEL_PAD_X, index * BODY_LINE_HEIGHT);
+    });
+    this._textTexture?.upload();
   }
   _setImage(index) {
     this._currentImage = index;
-    this._drawContent();
+    this._loadedImage = undefined;
+    this._drawChrome();
     this._loadCurrentImage();
   }
   _loadCurrentImage() {
@@ -241,7 +369,8 @@ class VrAnnotationPanel extends Script {
     img.onload = () => {
       // Ignore a stale load that a newer navigation has superseded.
       if (token === this._loadToken) {
-        this._drawContent(img);
+        this._loadedImage = img;
+        this._drawChrome();
       }
     };
     // onerror (e.g. a host without CORS headers): keep the placeholder + text already drawn.
@@ -253,7 +382,7 @@ class VrAnnotationPanel extends Script {
     rotation.transformVector(UP_AXIS, this._axisUp);
     this.entity.getWorldTransform().getScale(this._scratchScale);
     const halfWidth = PANEL_WIDTH / 2 * this._scratchScale.x;
-    const halfHeight = PANEL_HEIGHT / 2 * this._scratchScale.y;
+    const halfHeight = this._panelHeight / 2 * this._scratchScale.y;
     return rayQuadHit(origin, direction, this.entity.getPosition(), this._axisRight, this._axisUp, halfWidth, halfHeight);
   }
 
@@ -261,7 +390,7 @@ class VrAnnotationPanel extends Script {
   rayHitsPanel(origin, direction) {
     return this._rayQuadHit(origin, direction) !== null;
   }
-  update() {
+  update(dt) {
     if (this.app.xr?.active !== true) {
       return;
     }
@@ -269,16 +398,19 @@ class VrAnnotationPanel extends Script {
     if (signature !== this._drawnSignature) {
       this._drawnSignature = signature;
       this._currentImage = 0;
-      this._drawContent();
+      this._scrollY = 0;
+      this._loadedImage = undefined;
+      this._rebuild();
       this._loadCurrentImage();
     }
+    this._scroll(dt);
     this._trackHead();
     const anchor = this.app.root.findByName(`annotation-${this.annotationIndex}`);
     if (!anchor) {
       return;
     }
     this._anchor.copy(anchor.getPosition());
-    this.entity.setPosition(this._anchor.x + PANEL_OFFSET.x, this._anchor.y + PANEL_OFFSET.y, this._anchor.z + PANEL_OFFSET.z);
+    this.entity.setPosition(this._anchor.x, this._anchor.y + this._panelHeight / 2 + PANEL_GAP, this._anchor.z);
 
     // Billboard on yaw only: face the viewer horizontally but stay upright and level, so
     // tilting/rolling the headset does not tilt the panel. Derived from the head's forward
@@ -288,6 +420,25 @@ class VrAnnotationPanel extends Script {
     this._yawQuat.setFromEulerAngles(0, yaw, 0);
     this.entity.setRotation(this._yawQuat);
   }
+  _scroll(dt) {
+    if (this._maxScroll <= 0) {
+      return;
+    }
+    let axis = 0;
+    for (const inputSource of this.app.xr?.input?.inputSources ?? []) {
+      const sourceAxis = readScrollAxis(inputSource);
+      if (Math.abs(sourceAxis) > Math.abs(axis)) {
+        axis = sourceAxis;
+      }
+    }
+    const scrollY = nextScrollY(this._scrollY, axis, dt, this._maxScroll);
+    if (scrollY === this._scrollY) {
+      return;
+    }
+    this._scrollY = scrollY;
+    this._writeTextQuad();
+    this._writeThumbQuad();
+  }
   _trackHead() {
     const views = this.app.xr?.views?.list;
     if (!views || views.length === 0) {
@@ -300,12 +451,22 @@ class VrAnnotationPanel extends Script {
     if (this.entity.render) {
       this.entity.render.meshInstances = [];
     }
-    this._mesh?.destroy();
-    this._material?.destroy();
-    this._texture?.destroy();
-    this._mesh = undefined;
-    this._material = undefined;
-    this._texture = undefined;
+    this._chromeMesh?.destroy();
+    this._textMesh?.destroy();
+    this._thumbMesh?.destroy();
+    this._chromeMaterial?.destroy();
+    this._textMaterial?.destroy();
+    this._thumbMaterial?.destroy();
+    this._chromeTexture?.destroy();
+    this._textTexture?.destroy();
+    this._chromeMesh = undefined;
+    this._textMesh = undefined;
+    this._thumbMesh = undefined;
+    this._chromeMaterial = undefined;
+    this._textMaterial = undefined;
+    this._thumbMaterial = undefined;
+    this._chromeTexture = undefined;
+    this._textTexture = undefined;
   }
 }
 

package/components/VirtualWalkthrough/vr-annotation-scroll.d.ts

@@ -0,0 +1,23 @@
+/** Deflection the stick must pass before the text moves, so a resting thumb doesn't drift it. */
+export declare const SCROLL_DEADZONE = 0.15;
+/** Canvas px per second at full deflection. */
+export declare const SCROLL_SPEED = 1200;
+interface ThumbstickSource {
+    handedness: string;
+    gamepad?: {
+        axes: ArrayLike<number>;
+    } | null;
+}
+/**
+ * Thumbstick Y for a source that can scroll the panel. Only the right hand scrolls: the left
+ * stick drives locomotion, and right-stick Y is free because snap-vertical is turned off.
+ * Hand-tracked sources report a gamepad with no axes, which would read as NaN.
+ */
+export declare const readScrollAxis: (inputSource: ThumbstickSource) => number;
+/**
+ * Advances the scroll position for one frame of stick deflection, ramping from a standstill at
+ * the deadzone edge. A forward push reports negative Y and moves further into the text.
+ */
+export declare const nextScrollY: (scrollY: number, axisY: number, dt: number, maxScroll: number) => number;
+export {};
+//# sourceMappingURL=vr-annotation-scroll.d.ts.map

package/components/VirtualWalkthrough/vr-annotation-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vr-annotation-scroll.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/vr-annotation-scroll.ts"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,eAAO,MAAM,eAAe,OAAO,CAAC;AAEpC,+CAA+C;AAC/C,eAAO,MAAM,YAAY,OAAO,CAAC;AAEjC,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI,CAAC;CAC9C;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,aAAa,gBAAgB,KAAG,MAO9D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,SAAS,MAAM,EAAE,OAAO,MAAM,EAAE,IAAI,MAAM,EAAE,WAAW,MAAM,KAAG,MAU3F,CAAC"}

package/components/VirtualWalkthrough/vr-annotation-scroll.js

@@ -0,0 +1,33 @@
+/** Deflection the stick must pass before the text moves, so a resting thumb doesn't drift it. */
+const SCROLL_DEADZONE = 0.15;
+
+/** Canvas px per second at full deflection. */
+const SCROLL_SPEED = 1200;
+/**
+ * Thumbstick Y for a source that can scroll the panel. Only the right hand scrolls: the left
+ * stick drives locomotion, and right-stick Y is free because snap-vertical is turned off.
+ * Hand-tracked sources report a gamepad with no axes, which would read as NaN.
+ */
+const readScrollAxis = inputSource => {
+  const axes = inputSource.gamepad?.axes;
+  if (inputSource.handedness !== 'right' || !axes || axes.length < 4) {
+    return 0;
+  }
+  return axes[3];
+};
+
+/**
+ * Advances the scroll position for one frame of stick deflection, ramping from a standstill at
+ * the deadzone edge. A forward push reports negative Y and moves further into the text.
+ */
+const nextScrollY = (scrollY, axisY, dt, maxScroll) => {
+  const magnitude = Math.abs(axisY);
+  if (magnitude <= SCROLL_DEADZONE) {
+    return Math.min(Math.max(scrollY, 0), maxScroll);
+  }
+  const ramped = (magnitude - SCROLL_DEADZONE) / (1 - SCROLL_DEADZONE);
+  const delta = -Math.sign(axisY) * ramped * SCROLL_SPEED * dt;
+  return Math.min(Math.max(scrollY + delta, 0), maxScroll);
+};
+
+export { SCROLL_DEADZONE, SCROLL_SPEED, nextScrollY, readScrollAxis };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {