@terraware/web-components 5.0.2 → 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/SplatModel.js

@@ -76,7 +76,8 @@ const SplatModel = ({
       aabbMax: cropAabbMax,
       edgeScaleFactor: cropEdgeScaleFactor
     })), /*#__PURE__*/jsx(SplatRevealRain, {
-      enabled: revealRain
+      enabled: revealRain,
+      scaleFactor: scaleFactor
     })]
   });
 };

package/components/VirtualWalkthrough/SplatRevealRain.d.ts

@@ -1,5 +1,7 @@
 interface SplatRevealRainProps {
     enabled?: boolean;
+    restartOnVr?: boolean;
+    scaleFactor?: number;
     center?: [number, number, number];
     distance?: number;
     speed?: number;
@@ -13,6 +15,6 @@ interface SplatRevealRainProps {
     hitDuration?: number;
     endRadius?: number;
 }
-declare const SplatRevealRain: ({ enabled, center, distance, speed, acceleration, flightTime, rainSize, rotation, fallTint, fallTintIntensity, hitTint, hitDuration, endRadius, }: SplatRevealRainProps) => import("react/jsx-runtime").JSX.Element;
+declare const SplatRevealRain: ({ enabled, restartOnVr, scaleFactor, center, distance, speed, acceleration, flightTime, rainSize, rotation, fallTint, fallTintIntensity, hitTint, hitDuration, endRadius, }: SplatRevealRainProps) => import("react/jsx-runtime").JSX.Element;
 export default SplatRevealRain;
 //# sourceMappingURL=SplatRevealRain.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplatRevealRain.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/SplatRevealRain.tsx"],"names":[],"mappings":"AAMA,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,mJActB,oBAAoB,4CAmBtB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SplatRevealRain.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/SplatRevealRain.tsx"],"names":[],"mappings":"AAQA,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,6KAgBtB,oBAAoB,4CAyBtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/VirtualWalkthrough/SplatRevealRain.js

@@ -1,14 +1,17 @@
-import 'react';
+import { useRef } from 'react';
 import { Script } from '@playcanvas/react/components';
 import { Color, Vec3 } from 'playcanvas';
 import { GSplatRevealRain } from 'playcanvas/scripts/esm/gsplat/reveal-rain.mjs';
+import useRestartOnVr from './useRestartOnVr.js';
 import { jsx } from 'react/jsx-runtime';
 
 const SplatRevealRain = ({
   enabled = true,
+  restartOnVr = true,
+  scaleFactor = 1,
   center = [0, 0, 0],
   distance = 3,
-  speed = 10,
+  speed = 1,
   acceleration = 5,
   flightTime = 0.25,
   rainSize = 0.0,
@@ -19,21 +22,25 @@ const SplatRevealRain = ({
   hitDuration = 0,
   endRadius = 5
 }) => {
+  const scale = value => value * scaleFactor;
+  const scriptRef = useRef(null);
+  useRestartOnVr(scriptRef, enabled && restartOnVr);
   return /*#__PURE__*/jsx(Script, {
+    ref: scriptRef,
     script: GSplatRevealRain,
     enabled: enabled,
-    center: new Vec3(...center),
-    distance: distance,
-    speed: speed,
-    acceleration: acceleration,
+    center: new Vec3(...center).mulScalar(scaleFactor),
+    distance: scale(distance),
+    speed: scale(speed),
+    acceleration: scale(acceleration),
     flightTime: flightTime,
-    rainSize: rainSize,
+    rainSize: scale(rainSize),
     rotation: rotation,
     fallTint: new Color(...fallTint),
     fallTintIntensity: fallTintIntensity,
     hitTint: new Color(...hitTint),
     hitDuration: hitDuration,
-    endRadius: endRadius
+    endRadius: scale(endRadius)
   });
 };
 

package/components/VirtualWalkthrough/useRestartOnVr.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+import { Script } from 'playcanvas';
+/**
+ * Replays a one-shot script effect at the start of every VR session.
+ *
+ * `GSplatShaderEffect` zeroes its timeline on the script's `enable` event and switches itself off
+ * once the animation has played out, so re-enabling a finished effect runs it again. The `enabled`
+ * setter only fires the event on a change of state, which is why an effect still mid-play is taken
+ * back through disabled first.
+ *
+ * @param scriptRef - The script instance to replay, as handed back by `Script`'s ref.
+ * @param enabled - Whether the effect is in use at all. No session is watched while false.
+ */
+export declare const useRestartOnVr: (scriptRef: RefObject<Script | null>, enabled: boolean) => void;
+export default useRestartOnVr;
+//# sourceMappingURL=useRestartOnVr.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useRestartOnVr.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/useRestartOnVr.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAa,MAAM,YAAY,CAAC;AAE/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,SAAS,OAAO,SAwBnF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/VirtualWalkthrough/useRestartOnVr.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useApp } from '@playcanvas/react/hooks';
+import { XRTYPE_VR } from 'playcanvas';
+
+/**
+ * Replays a one-shot script effect at the start of every VR session.
+ *
+ * `GSplatShaderEffect` zeroes its timeline on the script's `enable` event and switches itself off
+ * once the animation has played out, so re-enabling a finished effect runs it again. The `enabled`
+ * setter only fires the event on a change of state, which is why an effect still mid-play is taken
+ * back through disabled first.
+ *
+ * @param scriptRef - The script instance to replay, as handed back by `Script`'s ref.
+ * @param enabled - Whether the effect is in use at all. No session is watched while false.
+ */
+const useRestartOnVr = (scriptRef, enabled) => {
+  const app = useApp();
+  useEffect(() => {
+    const xr = app?.xr;
+    if (!xr || !enabled) {
+      return;
+    }
+    const restart = () => {
+      const script = scriptRef.current;
+      if (!script || xr.type !== XRTYPE_VR) {
+        return;
+      }
+      script.enabled = false;
+      script.enabled = true;
+    };
+    xr.on('start', restart);
+    return () => {
+      xr.off('start', restart);
+    };
+  }, [app, enabled, scriptRef]);
+};
+
+export { useRestartOnVr as default, useRestartOnVr };

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"}