@terraware/web-components 4.2.13 → 4.2.14-rc.1

package/components/VirtualWalkthrough/SplatControls.js

@@ -0,0 +1,252 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Fullscreen, FullscreenExit } from '@mui/icons-material';
+import { Box, IconButton, useTheme } from '@mui/material';
+import { useApp } from '@playcanvas/react/hooks';
+import { XRSPACE_LOCAL, XRTYPE_AR, XRTYPE_VR } from 'playcanvas';
+import useBoolean from '../../hooks/useBoolean';
+import { useCameraPosition } from '../../hooks/useCameraPosition';
+import { getRgbaFromHex } from '../../utils/color';
+import useDeviceInfo from '../../utils/useDeviceInfo';
+import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
+import AnnotationEditPane from './AnnotationEditPane';
+import CameraInfo from './CameraInfo';
+import ControlsInfoPane from './ControlsInfoPane';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SplatControls = ({
+  strings,
+  defaultCameraPosition,
+  defaultCameraFocus,
+  showAnnotations,
+  onToggleAnnotations,
+  autoRotate,
+  onToggleAutoRotate,
+  editable,
+  isEdit,
+  onToggleEdit,
+  onSave,
+  onCancel,
+  onAddAnnotation,
+  onDeleteAnnotation,
+  onDeselectAnnotation,
+  hasSelectedAnnotation,
+  selectedAnnotation,
+  onAnnotationUpdate,
+  onTextFieldFocus,
+  canSave = true,
+  isFullScreen = false,
+  onToggleFullScreen,
+  isFreeFly,
+  onToggleFreeFly,
+  showFreeFly = false,
+  onError
+}) => {
+  const theme = useTheme();
+  const {
+    isDesktop
+  } = useDeviceInfo();
+  const app = useApp();
+  const {
+    setCamera,
+    getCameraState
+  } = useCameraPosition();
+  const [isArAvailable, setIsArAvailable] = useState(false);
+  const [isVrAvailable, setIsVrAvailable] = useState(false);
+  const [isInfoVisible, setIsInfoVisible] = useBoolean(true);
+  const paneRef = useRef(null);
+  const infoButtonRef = useRef(null);
+  const errorCallback = useCallback(err => {
+    if (err) {
+      onError?.(err);
+      app.xr?.end();
+    }
+  }, [app, onError]);
+  const handleAr = useCallback(() => app.xr?.start(app.root.findComponent('camera'), XRTYPE_AR, XRSPACE_LOCAL, {
+    callback: errorCallback
+  }), [app, errorCallback]);
+  const handleVr = useCallback(() => app.xr?.start(app.root.findComponent('camera'), XRTYPE_VR, XRSPACE_LOCAL, {
+    callback: errorCallback
+  }), [app, errorCallback]);
+  useEffect(() => {
+    // this can't be changed to `useMemo(() => app.xr?.isAvailable(XRTYPE_AR), [app])` because `app` doesn't update when
+    // XR's availability is updated
+    const handleAvailable = (type, available) => {
+      if (type === XRTYPE_VR) {
+        setIsVrAvailable(available);
+      } else if (type === XRTYPE_AR) {
+        setIsArAvailable(available);
+      }
+    };
+
+    // Check current availability state on mount
+    if (app.xr?.isAvailable(XRTYPE_VR)) {
+      setIsVrAvailable(true);
+    }
+    if (app.xr?.isAvailable(XRTYPE_AR)) {
+      setIsArAvailable(true);
+    }
+    app.xr?.on('available', handleAvailable);
+    return () => {
+      app.xr?.off('available', handleAvailable);
+    };
+  }, [app]);
+  useEffect(() => {
+    const handleKeyPress = event => {
+      if (event.key === 'r' || event.key === 'R') {
+        if (defaultCameraFocus && !(isEdit && selectedAnnotation !== null)) {
+          setCamera(defaultCameraFocus, defaultCameraPosition);
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyPress);
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [isEdit, defaultCameraFocus, defaultCameraPosition, setCamera, selectedAnnotation]);
+  const handleInfo = useCallback(() => {
+    setIsInfoVisible(prev => !prev);
+  }, [setIsInfoVisible]);
+  useEffect(() => {
+    const handleScroll = event => {
+      if (isInfoVisible && paneRef.current && !paneRef.current.contains(event.target)) {
+        setIsInfoVisible(false);
+      }
+    };
+    const handleMouseDown = event => {
+      const target = event.target;
+      const isClickOnInfoButton = infoButtonRef.current?.contains(target);
+      if (isInfoVisible && paneRef.current && !paneRef.current.contains(target) && !isClickOnInfoButton) {
+        setIsInfoVisible(false);
+      }
+    };
+    if (isInfoVisible) {
+      window.addEventListener('wheel', handleScroll, true);
+      window.addEventListener('mousedown', handleMouseDown, true);
+    }
+    return () => {
+      window.removeEventListener('wheel', handleScroll, true);
+      window.removeEventListener('mousedown', handleMouseDown, true);
+    };
+  }, [isInfoVisible, setIsInfoVisible, infoButtonRef]);
+  const handleEdit = useCallback(() => onToggleEdit?.(true), [onToggleEdit]);
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      height: '100%',
+      pointerEvents: 'none'
+    },
+    children: [isEdit && /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        position: 'absolute',
+        top: 16,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        display: 'flex',
+        gap: 1,
+        pointerEvents: 'auto'
+      },
+      children: [!hasSelectedAnnotation && onAddAnnotation && /*#__PURE__*/_jsx(Button, {
+        label: strings.addAnnotation,
+        onClick: onAddAnnotation
+      }), hasSelectedAnnotation && onDeselectAnnotation && /*#__PURE__*/_jsx(Button, {
+        label: strings.deselectAnnotation,
+        onClick: onDeselectAnnotation
+      }), hasSelectedAnnotation && onDeleteAnnotation && /*#__PURE__*/_jsx(Button, {
+        label: strings.deleteAnnotation,
+        onClick: onDeleteAnnotation
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        position: 'absolute',
+        bottom: 16,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        display: 'flex',
+        gap: 1,
+        pointerEvents: 'auto'
+      },
+      children: [isArAvailable && !isEdit && /*#__PURE__*/_jsx(Button, {
+        label: strings.ar,
+        onClick: handleAr
+      }), isVrAvailable && !isEdit && /*#__PURE__*/_jsx(Button, {
+        label: strings.vr,
+        onClick: handleVr
+      }), isDesktop && editable && !isEdit && onToggleEdit && /*#__PURE__*/_jsx(Button, {
+        label: strings.edit,
+        onClick: handleEdit
+      }), isDesktop && showFreeFly && !isEdit && onToggleFreeFly && /*#__PURE__*/_jsx(Button, {
+        label: isFreeFly ? strings.boundedFly : strings.freeFly,
+        onClick: onToggleFreeFly
+      }), isEdit && onCancel && /*#__PURE__*/_jsx(Button, {
+        label: strings.cancel,
+        onClick: onCancel
+      }), isEdit && onSave && /*#__PURE__*/_jsx(Button, {
+        label: strings.save,
+        onClick: onSave,
+        disabled: !canSave
+      })]
+    }), onToggleFullScreen && /*#__PURE__*/_jsx(IconButton, {
+      sx: {
+        position: 'absolute',
+        bottom: 16,
+        right: 72,
+        backgroundColor: getRgbaFromHex(theme.palette.TwClrIcnOnBrand, 0.9),
+        '&:hover': {
+          backgroundColor: getRgbaFromHex(theme.palette.TwClrIcnOnBrand, 1)
+        },
+        pointerEvents: 'auto'
+      },
+      onClick: onToggleFullScreen,
+      "aria-label": isFullScreen ? 'Exit fullscreen' : 'Enter fullscreen',
+      children: isFullScreen ? /*#__PURE__*/_jsx(FullscreenExit, {
+        sx: {
+          color: theme.palette.TwClrIcnInfo
+        }
+      }) : /*#__PURE__*/_jsx(Fullscreen, {
+        sx: {
+          color: theme.palette.TwClrIcnInfo
+        }
+      })
+    }), /*#__PURE__*/_jsx(IconButton, {
+      ref: infoButtonRef,
+      sx: {
+        position: 'absolute',
+        bottom: 16,
+        right: 16,
+        backgroundColor: getRgbaFromHex(theme.palette.TwClrIcnOnBrand, 0.9),
+        '&:hover': {
+          backgroundColor: getRgbaFromHex(theme.palette.TwClrIcnOnBrand, 1)
+        },
+        pointerEvents: 'auto'
+      },
+      onClick: handleInfo,
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "info",
+        size: 'medium',
+        fillColor: theme.palette.TwClrIcnInfo
+      })
+    }), /*#__PURE__*/_jsx(ControlsInfoPane, {
+      visible: isInfoVisible,
+      paneRef: paneRef,
+      strings: strings.controlsInfoPane,
+      showAnnotations: showAnnotations,
+      onToggleAnnotations: onToggleAnnotations,
+      autoRotate: autoRotate,
+      onToggleAutoRotate: onToggleAutoRotate,
+      isFullScreen: isFullScreen
+    }), /*#__PURE__*/_jsx(AnnotationEditPane, {
+      visible: isEdit === true && hasSelectedAnnotation === true,
+      annotation: selectedAnnotation ?? null,
+      strings: strings.annotationEditPane,
+      onUpdate: onAnnotationUpdate,
+      onTextFieldFocus: onTextFieldFocus
+    }), isEdit && /*#__PURE__*/_jsx(CameraInfo, {
+      strings: strings.cameraInfo,
+      getCameraState: getCameraState
+    })]
+  });
+};
+export default SplatControls;

package/components/VirtualWalkthrough/SplatCrop.d.ts

@@ -0,0 +1,8 @@
+interface SplatCropProps {
+    aabbMin?: [number, number, number];
+    aabbMax?: [number, number, number];
+    edgeScaleFactor?: number;
+}
+declare const SplatCrop: ({ aabbMin, aabbMax, edgeScaleFactor }: SplatCropProps) => import("react/jsx-runtime").JSX.Element;
+export default SplatCrop;
+//# sourceMappingURL=SplatCrop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplatCrop.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/SplatCrop.tsx"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,SAAS,GAAI,uCAAwE,cAAc,4CASxG,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/VirtualWalkthrough/SplatCrop.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Script } from '@playcanvas/react/components';
+import { Vec3 } from 'playcanvas';
+import { GsplatCropShaderEffect } from 'playcanvas/scripts/esm/gsplat/shader-effect-crop.mjs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SplatCrop = ({
+  aabbMin = [-1, -1, -1],
+  aabbMax = [1, 1, 1],
+  edgeScaleFactor = 0.5
+}) => {
+  return /*#__PURE__*/_jsx(Script, {
+    script: GsplatCropShaderEffect,
+    aabbMin: new Vec3(...aabbMin),
+    aabbMax: new Vec3(...aabbMax),
+    edgeScaleFactor: edgeScaleFactor
+  });
+};
+export default SplatCrop;

package/components/VirtualWalkthrough/SplatFadeCrop.d.ts

@@ -0,0 +1,8 @@
+interface SplatFadeCropProps {
+    aabbMin?: [number, number, number];
+    aabbMax?: [number, number, number];
+    fadeDistance?: number;
+}
+declare const SplatFadeCrop: ({ aabbMin, aabbMax, fadeDistance }: SplatFadeCropProps) => import("react/jsx-runtime").JSX.Element;
+export default SplatFadeCrop;
+//# sourceMappingURL=SplatFadeCrop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplatFadeCrop.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/SplatFadeCrop.tsx"],"names":[],"mappings":"AAOA,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,aAAa,GAAI,oCAAqE,kBAAkB,4CAS7G,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/VirtualWalkthrough/SplatFadeCrop.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Script } from '@playcanvas/react/components';
+import { Vec3 } from 'playcanvas';
+import { GsplatFadeCropShaderEffect } from './gsplat-fade-crop-effect';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SplatFadeCrop = ({
+  aabbMin = [-1, -1, -1],
+  aabbMax = [1, 1, 1],
+  fadeDistance = 0.5
+}) => {
+  return /*#__PURE__*/_jsx(Script, {
+    script: GsplatFadeCropShaderEffect,
+    aabbMin: new Vec3(...aabbMin),
+    aabbMax: new Vec3(...aabbMax),
+    fadeDistance: fadeDistance
+  });
+};
+export default SplatFadeCrop;

package/components/VirtualWalkthrough/SplatModel.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface SplatModelProps {
+    splatSrc: string;
+    rotation?: [number, number, number];
+    cropAabbMin?: [number, number, number];
+    cropAabbMax?: [number, number, number];
+    cropEdgeScaleFactor?: number;
+    cropFade?: boolean;
+    cropFadeDistance?: number;
+    revealRain?: boolean;
+    onError?: (error: Error) => void;
+}
+declare const _default: React.MemoExoticComponent<({ splatSrc, rotation, cropAabbMin, cropAabbMax, cropEdgeScaleFactor, cropFade, cropFadeDistance, revealRain, onError, }: SplatModelProps) => import("react/jsx-runtime").JSX.Element | null>;
+export default _default;
+//# sourceMappingURL=SplatModel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplatModel.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/SplatModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAW/C,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;4KAYE,eAAe;AAgClB,wBAAgC"}

package/components/VirtualWalkthrough/SplatModel.js

@@ -0,0 +1,60 @@
+import React, { memo, useEffect } from 'react';
+import { Entity } from '@playcanvas/react';
+import { GSplat } from '@playcanvas/react/components';
+import { useSplat } from '@playcanvas/react/hooks';
+import BlockingSpinner from './BlockingSpinner';
+import SplatCrop from './SplatCrop';
+import SplatFadeCrop from './SplatFadeCrop';
+import SplatRevealRain from './SplatRevealRain';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SplatModel = ({
+  splatSrc,
+  rotation,
+  cropAabbMin,
+  cropAabbMax,
+  cropEdgeScaleFactor,
+  cropFade = false,
+  cropFadeDistance = 0.5,
+  revealRain = false,
+  onError
+}) => {
+  // A filename is required for the file props to assist with the asset loading. Otherwise it assumes that the splatSrc is a ply file.
+  const {
+    asset,
+    loading,
+    error
+  } = useSplat(splatSrc, {
+    file: {
+      filename: 'model.sog'
+    }
+  });
+  useEffect(() => {
+    if (error) {
+      onError?.(new Error(error));
+    }
+  }, [error, onError]);
+  if (loading) {
+    return /*#__PURE__*/_jsx(BlockingSpinner, {});
+  }
+  if (!asset) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Entity, {
+    name: "splat",
+    rotation: rotation,
+    children: [/*#__PURE__*/_jsx(GSplat, {
+      asset: asset
+    }), (cropAabbMin || cropAabbMax) && (cropFade ? /*#__PURE__*/_jsx(SplatFadeCrop, {
+      aabbMin: cropAabbMin,
+      aabbMax: cropAabbMax,
+      fadeDistance: cropFadeDistance
+    }) : /*#__PURE__*/_jsx(SplatCrop, {
+      aabbMin: cropAabbMin,
+      aabbMax: cropAabbMax,
+      edgeScaleFactor: cropEdgeScaleFactor
+    })), /*#__PURE__*/_jsx(SplatRevealRain, {
+      enabled: revealRain
+    })]
+  });
+};
+export default /*#__PURE__*/memo(SplatModel);

package/components/VirtualWalkthrough/SplatRevealRain.d.ts

@@ -0,0 +1,18 @@
+interface SplatRevealRainProps {
+    enabled?: boolean;
+    center?: [number, number, number];
+    distance?: number;
+    speed?: number;
+    acceleration?: number;
+    flightTime?: number;
+    rainSize?: number;
+    rotation?: number;
+    fallTint?: [number, number, number];
+    fallTintIntensity?: number;
+    hitTint?: [number, number, number];
+    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;
+export default SplatRevealRain;
+//# sourceMappingURL=SplatRevealRain.d.ts.map

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

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

package/components/VirtualWalkthrough/SplatRevealRain.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Script } from '@playcanvas/react/components';
+import { Color, Vec3 } from 'playcanvas';
+import { GsplatRevealRain } from 'playcanvas/scripts/esm/gsplat/reveal-rain.mjs';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SplatRevealRain = ({
+  enabled = true,
+  center = [0, 0, 0],
+  distance = 3,
+  speed = 10,
+  acceleration = 5,
+  flightTime = 0.25,
+  rainSize = 0.0,
+  rotation = 0,
+  fallTint = [0, 0, 0],
+  fallTintIntensity = 0,
+  hitTint = [0, 0, 0],
+  hitDuration = 0,
+  endRadius = 5
+}) => {
+  return /*#__PURE__*/_jsx(Script, {
+    script: GsplatRevealRain,
+    enabled: enabled,
+    center: new Vec3(...center),
+    distance: distance,
+    speed: speed,
+    acceleration: acceleration,
+    flightTime: flightTime,
+    rainSize: rainSize,
+    rotation: rotation,
+    fallTint: new Color(...fallTint),
+    fallTintIntensity: fallTintIntensity,
+    hitTint: new Color(...hitTint),
+    hitDuration: hitDuration,
+    endRadius: endRadius
+  });
+};
+export default SplatRevealRain;

package/components/VirtualWalkthrough/TfAnnotationManager.d.ts

@@ -0,0 +1,110 @@
+import { Texture } from 'playcanvas';
+import { AnnotationManager as PcAnnotationManager } from 'playcanvas/scripts/esm/annotations.mjs';
+import { AnnotationIconType } from './Annotation';
+/**
+ * Extended AnnotationManager that adds max size clamping for annotations
+ * and fixes positioning when canvas is not at document origin.
+ */
+export declare class TfAnnotationManager extends PcAnnotationManager {
+    static scriptName: string;
+    private _maxWorldSize;
+    private _customParentDom;
+    private _clickHandlersAttached;
+    private _hotspotBackgroundColor;
+    private _iconImages;
+    /**
+     * Maximum world-space size for annotations.
+     * This prevents annotations from growing beyond this size regardless of camera distance.
+     *
+     * @attribute
+     * @title Max World Size
+     * @type {number}
+     * @default 1.0
+     */
+    set maxWorldSize(value: number);
+    get maxWorldSize(): number;
+    /**
+     * Background color for the hotspot texture canvas (the circle fill color).
+     * This is a hex color string (e.g., '#2C8658') that's drawn on the texture canvas.
+     * Note: This is different from hotspotColor and hoverColor, which are PlayCanvas Color objects
+     * used for the material's emissive property.
+     *
+     * @attribute
+     * @title Hotspot Background Color
+     * @type {string}
+     * @default '#2C8658'
+     */
+    set hotspotBackgroundColor(value: string);
+    get hotspotBackgroundColor(): string;
+    /**
+     * Initialize with custom parent DOM if needed.
+     */
+    initialize(): void;
+    /**
+     * Renders each web-components icon to an SVG image once. When an image finishes
+     * loading, any annotations already using that icon are redrawn.
+     * @private
+     */
+    _loadIconImages(): void;
+    /**
+     * Redraws the texture for all annotations using the given icon, once its image
+     * has loaded.
+     * @private
+     */
+    _refreshIcon(iconType: AnnotationIconType): void;
+    /**
+     * Update loop to attach click handlers to annotations and manage visibility.
+     */
+    update(): void;
+    /**
+     * Override annotation registration to draw the media icon onto the hotspot
+     * texture once the annotation (and its icon) is available.
+     * @private
+     */
+    _registerAnnotation(annotation: any): void;
+    /**
+     * Recreates the hotspot texture with the appropriate media icon drawn on it.
+     * @private
+     */
+    _applyAnnotationIcon(annotation: any): void;
+    /**
+     * Draws the icon image onto the hotspot texture canvas, scaled to fit the
+     * circle. Does nothing if the image has not finished loading yet; the
+     * annotation is redrawn once it has (see `_refreshIcon`).
+     * @private
+     */
+    _drawIcon(ctx: CanvasRenderingContext2D, icon: AnnotationIconType, size: number): void;
+    /**
+     * Keep the media icon drawn on the hotspot texture. The label text itself
+     * is not rendered on the hotspot, so we simply redraw with the icon.
+     * @private
+     */
+    _onLabelChange(annotation: any): void;
+    /**
+     * The hotspot colors are baked into the texture in `_createHotspotTexture`,
+     * so the material emissive is kept white to let those colors render as drawn.
+     * @private
+     */
+    _createHotspotMaterial(texture: any, options?: any): any;
+    _setAnnotationHover(_annotation: any, _hover: boolean): void;
+    _updateAllAnnotationColors(): void;
+    _showTooltip(_annotation: any): void;
+    _onTextChange(_annotation: any, _text: string): void;
+    /**
+     * Override position update to adjust for canvas offset and respect visibility.
+     * @private
+     */
+    _updateAnnotationPositions(annotation: any, resources: any, screenPos: any): void;
+    /**
+     * Override the scale update to clamp the world size to a maximum value.
+     * Also scales the hotspot DOM element to match.
+     * @private
+     */
+    _updateAnnotationRotationAndScale(annotation: any): void;
+    /**
+     * Override to create hotspot texture with custom background color.
+     * @private
+     */
+    _createHotspotTexture(label: string, size?: number, borderWidth?: number, icon?: AnnotationIconType): Texture;
+}
+//# sourceMappingURL=TfAnnotationManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TfAnnotationManager.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/TfAnnotationManager.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoC,OAAO,EAAE,MAAM,YAAY,CAAC;AACvE,OAAO,EAAE,iBAAiB,IAAI,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAIlG,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAelD;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,mBAAmB;IAC1D,MAAM,CAAC,UAAU,SAAyB;IAE1C,OAAO,CAAC,aAAa,CAAO;IAC5B,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,sBAAsB,CAAkB;IAChD,OAAO,CAAC,uBAAuB,CAAa;IAC5C,OAAO,CAAC,WAAW,CAAmD;IAEtE;;;;;;;;OAQG;IACH,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED,IAAI,YAAY,IAJQ,MAAM,CAM7B;IAED;;;;;;;;;;OAUG;IACH,IAAI,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAEvC;IAED,IAAI,sBAAsB,IAJQ,MAAM,CAMvC;IAED;;OAEG;IACH,UAAU;IAgBV;;;;OAIG;IACH,eAAe;IAiBf;;;;OAIG;IACH,YAAY,CAAC,QAAQ,EAAE,kBAAkB;IAazC;;OAEG;IACH,MAAM;IAmCN;;;;OAIG;IACH,mBAAmB,CAAC,UAAU,EAAE,GAAG;IAKnC;;;OAGG;IACH,oBAAoB,CAAC,UAAU,EAAE,GAAG;IAiBpC;;;;;OAKG;IACH,SAAS,CAAC,GAAG,EAAE,wBAAwB,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM;IAW/E;;;;OAIG;IACH,cAAc,CAAC,UAAU,EAAE,GAAG;IAI9B;;;;OAIG;IACH,sBAAsB,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,GAAG;IASlD,mBAAmB,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO;IAKrD,0BAA0B;IAK1B,YAAY,CAAC,WAAW,EAAE,GAAG;IAK7B,aAAa,CAAC,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM;IAI7C;;;OAGG;IACH,0BAA0B,CAAC,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IA6B1E;;;;OAIG;IACH,iCAAiC,CAAC,UAAU,EAAE,GAAG;IAmCjD;;;OAGG;IACH,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,SAAuB,EAAE,WAAW,SAAI,EAAE,IAAI,CAAC,EAAE,kBAAkB;CAyD7G"}