@neurodyn/react-model-viewer 0.0.3 → 0.0.5

package/dist/index.d.ts

@@ -21,15 +21,15 @@ declare type DialogProps = React_3.ComponentProps<typeof DialogPrimitive.Root>
  */
 export declare type LaunchArOverride = (target: ArLaunchTarget) => boolean | Promise<boolean>;
 
-export declare function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, launchAr, sizeType, layout, background, viewerSurface, className, ...props }: ModelViewerProps & React_2.ComponentProps<'div'>): JSX.Element;
+export declare function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, launchAr, sizeType, dimensionAxes, layout, background, viewerSurface, className, ...props }: ModelViewerProps & React_2.ComponentProps<'div'>): JSX.Element;
 
 export declare type ModelViewerArExperience = 'advanced' | 'standard';
 
 declare type ModelViewerBackground = 'default' | 'transparent';
 
-export declare function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, initialWidgetSessionToken, handoffUrl, hid, sizeType, ...props }: ModelViewerDialogProps): JSX.Element;
+export declare function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, initialWidgetSessionToken, handoffUrl, hid, sizeType, dimensionAxes, ...props }: ModelViewerDialogProps): JSX.Element;
 
-declare interface ModelViewerDialogProps extends Pick<ModelViewerRootProps, 'apiBaseUrl' | 'apiKey' | 'handoffUrl' | 'hid' | 'initialWidgetSessionToken' | 'legacyApiBaseUrl' | 'sizeType' | 'tinuuid'>, Omit<DialogProps, 'children'> {
+declare interface ModelViewerDialogProps extends Pick<ModelViewerRootProps, 'apiBaseUrl' | 'apiKey' | 'dimensionAxes' | 'handoffUrl' | 'hid' | 'initialWidgetSessionToken' | 'legacyApiBaseUrl' | 'sizeType' | 'tinuuid'>, Omit<DialogProps, 'children'> {
 }
 
 declare type ModelViewerLayout = 'default' | 'model';
@@ -62,6 +62,8 @@ declare interface ModelViewerRootProps {
     launchAr?: LaunchArOverride;
     /** Display unit for model dimensions. */
     sizeType?: SizeType;
+    /** Which axes' measurements the "Show dimensions" overlay draws. Defaults to all three. */
+    dimensionAxes?: SizeAxis[];
     /** Controls which viewer UI elements are shown. */
     layout?: ModelViewerLayout;
     /** Controls the viewer container background. */
@@ -76,6 +78,8 @@ declare type ModelViewerSurface = 'dialog' | 'inline' | 'page';
 
 export declare type ModelViewerWidgetMode = 'advanced-ar-view' | 'ar-view' | 'embedded-3d-viewer' | 'ar-viewer' | 'qr-code';
 
+export declare type SizeAxis = 'x' | 'y' | 'z';
+
 declare type SizeType = 'cm' | 'inch';
 
 export { }

package/dist/index.js

@@ -6529,12 +6529,32 @@ async function publicApiControllerReadObjectByTinuuid({ tinuuid }, params, confi
     });
     return res.data;
 }
+function getErrorResponseStatus(error) {
+    if (!isAxiosError(error)) return;
+    return error.response?.status;
+}
+function getModelViewerApiError(error) {
+    if (!isAxiosError(error)) return null;
+    const status = error.response?.status;
+    if (401 === status) return 'unauthorized';
+    if (403 === status) return 'forbidden';
+    if (402 === status) return 'payment-required';
+    return null;
+}
 const WIDGET_SESSION_TOKEN_HEADER = 'x-widget-session-token';
 const DEFAULT_REFRESH_THRESHOLD_MS = 30000;
 const ALLOWED_PRODUCT_TYPES = new Set([
     'core-ar',
     'core-ar-shopify'
 ]);
+const ASSUMED_HANDOFF_SESSION_TTL_SECONDS = 900;
+async function activateCoreArWidgetSession(mode, requestConfig) {
+    const activation = await publicApiControllerActivateCoreAR({
+        mode
+    }, requestConfig);
+    if ('string' != typeof activation.productType || !ALLOWED_PRODUCT_TYPES.has(activation.productType)) throw new TypeError('The API key is not enabled for Core AR');
+    return parseWidgetSession(activation.widgetSession);
+}
 class ModelViewerWidgetSession {
     apiBaseUrl;
     apiKey;
@@ -6577,6 +6597,19 @@ class ModelViewerWidgetSession {
             signal
         };
     }
+    async recoverFromExpiry(signal) {
+        try {
+            await this.refresh();
+        } catch  {
+            this.session = this.toSnapshot(await activateCoreArWidgetSession(this.mode, {
+                baseURL: this.apiBaseUrl,
+                headers: {
+                    'x-api-key': this.apiKey
+                },
+                signal
+            }));
+        }
+    }
     refresh() {
         if (this.refreshPromise) return this.refreshPromise;
         this.refreshPromise = this.issueWidgetToken({
@@ -6603,37 +6636,38 @@ class ModelViewerWidgetSession {
     }
 }
 async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, initialWidgetSessionToken, mode, signal }) {
-    const requestConfig = {
+    if (initialWidgetSessionToken) return new ModelViewerWidgetSession({
+        expiresIn: ASSUMED_HANDOFF_SESSION_TTL_SECONDS,
+        sid: initialWidgetSessionToken,
+        token: initialWidgetSessionToken
+    }, {
+        apiBaseUrl,
+        apiKey,
+        mode
+    });
+    const activationData = await activateCoreArWidgetSession(mode, {
         baseURL: apiBaseUrl,
         headers: {
             'x-api-key': apiKey
         },
         signal
-    };
-    if (initialWidgetSessionToken) try {
-        const refreshed = await publicApiControllerIssueWidgetToken({
-            mode,
-            token: initialWidgetSessionToken
-        }, requestConfig);
-        return new ModelViewerWidgetSession(parseWidgetSession(refreshed), {
-            apiBaseUrl,
-            apiKey,
-            mode
-        });
-    } catch (error) {
-        if (signal?.aborted) throw error;
-    }
-    const activation = await publicApiControllerActivateCoreAR({
-        mode
-    }, requestConfig);
-    if ('string' != typeof activation.productType || !ALLOWED_PRODUCT_TYPES.has(activation.productType)) throw new TypeError('The API key is not enabled for Core AR');
-    return new ModelViewerWidgetSession(parseWidgetSession(activation.widgetSession), {
+    });
+    return new ModelViewerWidgetSession(activationData, {
         apiBaseUrl,
         apiKey,
         mode
     });
 }
 async function fetchModelViewerObject(tinuuid, variantId, session, signal) {
+    try {
+        return await readObjectWithSession(tinuuid, variantId, session, signal);
+    } catch (error) {
+        if (401 !== getErrorResponseStatus(error)) throw error;
+        await session.recoverFromExpiry(signal);
+        return readObjectWithSession(tinuuid, variantId, session, signal);
+    }
+}
+async function readObjectWithSession(tinuuid, variantId, session, signal) {
     return publicApiControllerReadObjectByTinuuid({
         tinuuid
     }, {
@@ -6766,20 +6800,45 @@ function useObjectData(tinuuid, initialHid, options) {
         widgetSession: data?.widgetSession ?? null
     };
 }
-function getErrorResponseStatus(error) {
-    if (!isAxiosError(error)) return;
-    return error.response?.status;
+const RECOVERY_STORAGE_KEY = 'vizbl-model-viewer-blank-canvas-recovery';
+const RENDER_CHECK_DELAY_MS = 2000;
+const SAMPLE_SIZE = 64;
+const NON_ZERO_CHANNEL_THRESHOLD = 8;
+function scheduleBlankCanvasRecovery(modelViewerEl) {
+    window.setTimeout(()=>{
+        if (isCanvasBlank(modelViewerEl) && !hasAlreadyRecovered()) {
+            markRecovered();
+            window.location.reload();
+        }
+    }, RENDER_CHECK_DELAY_MS);
 }
-function getModelViewerApiError(error) {
-    if (!isAxiosError(error)) return null;
-    const status = error.response?.status;
-    if (401 === status) return 'unauthorized';
-    if (403 === status) return 'forbidden';
-    if (402 === status) return 'payment-required';
-    return null;
+function hasAlreadyRecovered() {
+    try {
+        return '1' === window.sessionStorage.getItem(RECOVERY_STORAGE_KEY);
+    } catch  {
+        return false;
+    }
+}
+function markRecovered() {
+    try {
+        window.sessionStorage.setItem(RECOVERY_STORAGE_KEY, '1');
+    } catch  {}
+}
+function isCanvasBlank(modelViewerEl) {
+    const canvas = modelViewerEl.shadowRoot?.querySelector('canvas.show');
+    if (!canvas || 0 === canvas.width || 0 === canvas.height) return false;
+    const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
+    if (!gl) return false;
+    const size = Math.min(SAMPLE_SIZE, canvas.width, canvas.height);
+    const x = Math.max(0, Math.floor((canvas.width - size) / 2));
+    const y = Math.max(0, Math.floor((canvas.height - size) / 2));
+    const pixels = new Uint8Array(size * size * 4);
+    gl.readPixels(x, y, size, size, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+    for(let i = 0; i < pixels.length; i += 4)if (pixels[i] > NON_ZERO_CHANNEL_THRESHOLD || pixels[i + 1] > NON_ZERO_CHANNEL_THRESHOLD || pixels[i + 2] > NON_ZERO_CHANNEL_THRESHOLD || pixels[i + 3] > NON_ZERO_CHANNEL_THRESHOLD) return false;
+    return true;
 }
 const ModelViewerContext = /*#__PURE__*/ createContext(null);
-function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExperience, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, hid, launchAr, layout, background, sizeType, viewerSurface }) {
+function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExperience, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, hid, launchAr, layout, background, sizeType, dimensionAxes, viewerSurface }) {
     const { object, material, error, isLoading, setMaterialHid: setObjectMaterialHid, widgetSession } = useObjectData(tinuuid, hid, {
         apiBaseUrl,
         apiKey,
@@ -6865,6 +6924,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
         };
         const handleLoad = ()=>{
             setIsModelLoading(false);
+            scheduleBlankCanvasRecovery(modelViewerEl);
         };
         const handleError = ()=>{
             setIsModelLoading(false);
@@ -6906,6 +6966,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
             background,
             mode,
             sizeType,
+            dimensionAxes,
             isLoading,
             isModelLoading,
             state,
@@ -6932,6 +6993,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
         background,
         mode,
         sizeType,
+        dimensionAxes,
         isLoading,
         isModelLoading,
         state,
@@ -6951,6 +7013,11 @@ function useModelViewer() {
     if (!context) throw new Error('useModelViewer must be used within a ModelViewerProvider');
     return context;
 }
+function resolveDirectArExperience(mode, arExperience) {
+    if ('ar-view' === mode) return 'standard';
+    if ('advanced-ar-view' === mode || 'ar-viewer' === mode) return 'advanced';
+    if ('qr-code' === mode) return arExperience;
+}
 function getUserAgent() {
     if ("u" < typeof navigator) return '';
     return navigator.userAgent || navigator.vendor || '';
@@ -7055,7 +7122,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
         object?.tinuuid,
         tinuuid
     ]);
-    const directArExperience = 'ar-view' === mode ? 'standard' : 'advanced-ar-view' === mode ? 'advanced' : 'qr-code' === mode ? arExperience : void 0;
+    const directArExperience = resolveDirectArExperience(mode, arExperience);
     const directArLaunchOptions = external_react_useMemo(()=>{
         const native = material?.native;
         if (!directArExperience || !object || !native?.glbUrl || !native.usdzUrl || "u" < typeof window) return null;
@@ -7333,6 +7400,10 @@ const DIMENSION_LABEL_CONFIGS = [
     }
 ];
 const DIMENSION_LABEL_SLOTS = DIMENSION_LABEL_CONFIGS.map((config)=>config.slot);
+const DIMENSION_LABEL_AXIS_BY_SLOT = new Map(DIMENSION_LABEL_CONFIGS.map((config)=>[
+        config.slot,
+        config.sizeAxis
+    ]));
 const LINE_CONNECTIONS = [
     {
         lineIndex: 0,
@@ -7376,7 +7447,7 @@ const Hotspots = /*#__PURE__*/ memo(({ hiddenHotspots, isVisible, labels })=>{
         children: HOTSPOT_CONFIGS.map((hotspot)=>{
             const isDimensionLabel = hotspot.isDimensionLabel;
             const labelData = labelsMap.get(hotspot.slot);
-            const isHidden = !isVisible || !isDimensionLabel || hiddenHotspots.has(hotspot.slot);
+            const isHidden = !isVisible || !isDimensionLabel || !labelData || hiddenHotspots.has(hotspot.slot);
             return /*#__PURE__*/ jsx(button_Button, {
                 slot: hotspot.slot,
                 "data-position": hotspot.position,
@@ -7639,9 +7710,9 @@ function getHotspotConfig(slot) {
     if (!config) throw new Error(`Missing hotspot config for slot "${slot}"`);
     return config;
 }
-function createDimensionLabels(modelViewerEl, sizeType) {
+function createDimensionLabels(modelViewerEl, sizeType, axes) {
     const info = calculateBoundingBoxInfo(modelViewerEl);
-    return DIMENSION_LABEL_CONFIGS.map(({ slot, sizeAxis, offsetMultiplier })=>{
+    return DIMENSION_LABEL_CONFIGS.filter(({ sizeAxis })=>axes.includes(sizeAxis)).map(({ slot, sizeAxis, offsetMultiplier })=>{
         const hotspotConfig = getHotspotConfig(slot);
         return {
             name: slot,
@@ -7658,7 +7729,7 @@ function syncLabelHotspots(modelViewerEl, labels) {
         });
     });
 }
-function useDimensions({ isVisible }) {
+function useDimensions({ isVisible, axes }) {
     const { glbUrl, isModelLoading, modelViewerEl, sizeType } = useModelViewer();
     const [lines, setLines] = useState([]);
     const [labels, setLabels] = useState([]);
@@ -7676,7 +7747,7 @@ function useDimensions({ isVisible }) {
     ]);
     const calculateLabels = useCallback(()=>{
         if (!modelViewerEl) return [];
-        const dimensionLabels = createDimensionLabels(modelViewerEl, sizeType);
+        const dimensionLabels = createDimensionLabels(modelViewerEl, sizeType, axes);
         syncLabelHotspots(modelViewerEl, dimensionLabels);
         return dimensionLabels.map((label)=>({
                 slot: label.name,
@@ -7685,13 +7756,16 @@ function useDimensions({ isVisible }) {
             }));
     }, [
         modelViewerEl,
-        sizeType
+        sizeType,
+        axes
     ]);
     const updateLines = useCallback(()=>{
         if (!modelViewerEl) return;
         const newLines = [];
         const hidden = new Set();
         LINE_CONNECTIONS.forEach((connection)=>{
+            const connectionAxis = connection.dimensionHotspot ? DIMENSION_LABEL_AXIS_BY_SLOT.get(connection.dimensionHotspot) : void 0;
+            if (connectionAxis && !axes.includes(connectionAxis)) return;
             const dotHotspot1 = modelViewerEl.queryHotspot(connection.hotspot1);
             const dotHotspot2 = modelViewerEl.queryHotspot(connection.hotspot2);
             const dimensionHotspot = connection.dimensionHotspot ? modelViewerEl.queryHotspot(connection.dimensionHotspot) : null;
@@ -7713,7 +7787,8 @@ function useDimensions({ isVisible }) {
         setLines(newLines);
         setHiddenHotspots((current)=>areSetsEqual(current, hidden) ? current : hidden);
     }, [
-        modelViewerEl
+        modelViewerEl,
+        axes
     ]);
     useEffect(()=>{
         if (!glbUrl || !isVisible || !isReady || !modelViewerEl || initializedSrc === glbUrl) return;
@@ -7758,7 +7833,7 @@ function useDimensions({ isVisible }) {
     };
 }
 function ModelViewerContainer({ showDialogCloseButton = false }) {
-    const { glbUrl, isModelLoading, object, previewUrl, state, setContainerEl, setModelViewerEl, usdzUrl, layout, background, trackEvent } = useModelViewer();
+    const { glbUrl, isModelLoading, object, previewUrl, state, setContainerEl, setModelViewerEl, usdzUrl, layout, background, dimensionAxes, trackEvent } = useModelViewer();
     const [isDimensionsVisible, setDimensionsVisible] = useState(false);
     const isModelLayout = 'model' === layout;
     const showViewerLoader = 'loading' === state || 'ready' === state && isModelLoading;
@@ -7767,7 +7842,8 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
     const canToggleDimensions = showControls && !isModelLayout && !isModelLoading;
     const isDimensionsActive = isDimensionsVisible && canToggleDimensions;
     const { lines, labels, hiddenHotspots } = useDimensions({
-        isVisible: isDimensionsActive
+        isVisible: isDimensionsActive,
+        axes: dimensionAxes
     });
     const errorState = 'forbidden' === state || 'not-found' === state || 'unauthorized' === state || 'payment-required' === state ? state : null;
     if (errorState) return /*#__PURE__*/ jsx("div", {
@@ -7799,6 +7875,7 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
                     arScale: "fixed",
                     shadowIntensity: 1,
                     interactionPromptThreshold: 100,
+                    loading: "eager",
                     children: [
                         /*#__PURE__*/ jsx("div", {
                             slot: "progress-bar"
@@ -7872,6 +7949,11 @@ function ModelViewerContainer({ showDialogCloseButton = false }) {
 function normalizeApiKey(apiKey) {
     return apiKey?.trim() ?? '';
 }
+const ALL_DIMENSION_AXES = [
+    'x',
+    'y',
+    'z'
+];
 const root_queryClient = new QueryClient({
     defaultOptions: {
         queries: {
@@ -7887,7 +7969,7 @@ const root_queryClient = new QueryClient({
         }
     }
 });
-function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip', arExperience, hid, apiBaseUrl = "https://api.vizbl.com", legacyApiBaseUrl = "https://api.vizbl.com/v1", mode = 'embedded-3d-viewer', initialWidgetSessionToken, handoffUrl = "https://integrations.vizbl.com/model-viewer", launchAr, sizeType = 'cm', layout = 'default', background = 'default', showDialogCloseButton = false, viewerSurface = 'inline' }) {
+function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip', arExperience, hid, apiBaseUrl = "https://api.vizbl.com", legacyApiBaseUrl = "https://api.vizbl.com/v1", mode = 'embedded-3d-viewer', initialWidgetSessionToken, handoffUrl = "https://integrations.vizbl.com/model-viewer", launchAr, sizeType = 'cm', dimensionAxes = ALL_DIMENSION_AXES, layout = 'default', background = 'default', showDialogCloseButton = false, viewerSurface = 'inline' }) {
     const normalizedApiKey = normalizeApiKey(apiKey);
     return /*#__PURE__*/ jsx(QueryClientProvider, {
         client: root_queryClient,
@@ -7906,6 +7988,7 @@ function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip
             layout: layout,
             background: background,
             sizeType: sizeType,
+            dimensionAxes: dimensionAxes,
             viewerSurface: viewerSurface,
             children: /*#__PURE__*/ jsx(ModelViewerContainer, {
                 showDialogCloseButton: showDialogCloseButton
@@ -7913,7 +7996,7 @@ function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip
         })
     });
 }
-function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, initialWidgetSessionToken, handoffUrl, hid, sizeType, ...props }) {
+function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, initialWidgetSessionToken, handoffUrl, hid, sizeType, dimensionAxes, ...props }) {
     const [container, setContainer] = useState(null);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -7954,6 +8037,7 @@ function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, init
                                 handoffUrl: handoffUrl,
                                 hid: hid,
                                 sizeType: sizeType,
+                                dimensionAxes: dimensionAxes,
                                 showDialogCloseButton: true,
                                 viewerSurface: "dialog"
                             })
@@ -7979,7 +8063,7 @@ function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, legacyApiBaseUrl, init
         ]
     });
 }
-function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, launchAr, sizeType, layout, background, viewerSurface, className, ...props }) {
+function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiBaseUrl, legacyApiBaseUrl, mode, initialWidgetSessionToken, handoffUrl, launchAr, sizeType, dimensionAxes, layout, background, viewerSurface, className, ...props }) {
     const [container, setContainer] = useState(null);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -8020,6 +8104,7 @@ function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiB
                                 hid: hid,
                                 launchAr: launchAr,
                                 sizeType: sizeType,
+                                dimensionAxes: dimensionAxes,
                                 layout: layout,
                                 background: background,
                                 viewerSurface: viewerSurface

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-model-viewer",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -36,7 +36,7 @@
     "radix-ui": "1.4.3",
     "react-shadow": "^20.6.0",
     "tailwind-merge": "3.4.0",
-    "three": "^0.185.1"
+    "three": "0.182.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.58.0",