@neurodyn/core-ar 0.2.10 → 0.3.0

package/dist/index.js

@@ -1,4 +1,3 @@
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 let config_runtimeConfig;
 function normalizeHttpOrigin(value, name) {
     let url;
@@ -10,11 +9,6 @@ function normalizeHttpOrigin(value, name) {
     if ('http:' !== url.protocol && 'https:' !== url.protocol) throw new TypeError(`${name} must be an absolute HTTP(S) URL`);
     return url.origin;
 }
-function normalizeHttpBaseUrl(value, name) {
-    const origin = normalizeHttpOrigin(value, name);
-    const pathname = new URL(value).pathname.replace(/\/+$/, '');
-    return pathname ? `${origin}${pathname}` : origin;
-}
 function deriveModelViewerOrigin(viewerOrigin) {
     const url = new URL(viewerOrigin);
     const match = url.hostname.match(/^viewer(-dev)?\.(vizbl\.com|arizo\.ru)$/);
@@ -25,13 +19,11 @@ function resolveCoreArWidgetRuntimeConfig(config) {
     const apiOrigin = normalizeHttpOrigin(config.apiOrigin, 'apiOrigin');
     const viewerOrigin = normalizeHttpOrigin(config.viewerOrigin, 'viewerOrigin');
     const modelViewerOrigin = config.modelViewerOrigin ? normalizeHttpOrigin(config.modelViewerOrigin, 'modelViewerOrigin') : deriveModelViewerOrigin(viewerOrigin);
-    const legacyApiOrigin = config.legacyApiOrigin ? normalizeHttpBaseUrl(config.legacyApiOrigin, 'legacyApiOrigin') : `${apiOrigin}/v1`;
     const brand = new URL(viewerOrigin).hostname.endsWith('arizo.ru') ? 'arizo' : 'vizbl';
     return {
         apiOrigin,
         brand,
         fetchImpl: config.fetchImpl ?? fetch,
-        legacyApiOrigin,
         modelViewerOrigin,
         qrCodeScriptUrl: config.qrCodeScriptUrl ?? `${viewerOrigin}/vendor/qrcode.min.js`,
         viewerOrigin
@@ -61,6 +53,7 @@ function isIOS() {
 }
 function isMobile() {
     if ("u" < typeof window || "u" < typeof navigator) return false;
+    if (isIOS()) return true;
     const hasMultiTouch = navigator.maxTouchPoints > 1;
     const isCoarsePointer = window.matchMedia?.('(pointer: coarse)').matches ?? false;
     const isMobileByUserAgent = /Android|iPhone|iPad|iPod|webOS|BlackBerry|Windows Phone|Opera Mini|IEMobile|Mobile/i.test(getUserAgent());
@@ -612,10 +605,10 @@ async function sendWidgetEvent(event, sessionToken, objectUuid, options = {}) {
     const data = await parseSuccessJson(response);
     if (!data || 'object' != typeof data || Array.isArray(data) || 'boolean' != typeof data.ok) throw new WidgetRuntimeError('INVALID_RESPONSE');
 }
-async function fetchLegacyObject(objectId, signal, runtimeConfig) {
+async function fetchPublicObject(objectId, signal, runtimeConfig) {
     const resolvedConfig = runtimeConfig ?? getCoreArWidgetRuntimeConfig();
-    const { fetchImpl, legacyApiOrigin } = resolvedConfig;
-    const response = await runtimeFetch(`${legacyApiOrigin}/obj/Fetch`, {
+    const { apiOrigin, fetchImpl } = resolvedConfig;
+    const response = await runtimeFetch(`${apiOrigin}/catalog/object`, {
         body: JSON.stringify({
             tinuuid: objectId
         }),
@@ -633,9 +626,9 @@ async function fetchLegacyObject(objectId, signal, runtimeConfig) {
     if (!data || 'object' != typeof data || Array.isArray(data)) throw new WidgetRuntimeError('INVALID_RESPONSE');
     return data;
 }
-async function incrementLegacyObjectView(objectId, runtimeConfig) {
-    const { fetchImpl, legacyApiOrigin } = runtimeConfig ?? getCoreArWidgetRuntimeConfig();
-    await fetchImpl(`${legacyApiOrigin}/obj/IncrViews`, {
+async function incrementObjectViews(objectId, runtimeConfig) {
+    const { apiOrigin, fetchImpl } = runtimeConfig ?? getCoreArWidgetRuntimeConfig();
+    await fetchImpl(`${apiOrigin}/catalog/object/incr-views`, {
         body: JSON.stringify({
             tinuuid: objectId
         }),
@@ -662,7 +655,7 @@ async function initializeAdvancedArTrigger(trigger, options = {}) {
     const variantId = trigger.dataset.objectHid?.trim() || void 0;
     if (!objectId) throw new Error('Object ID is required');
     abortIfNeeded(options.signal);
-    const loadObject = options.loadObject ?? ((id, signal)=>fetchLegacyObject(id, signal, options.runtimeConfig));
+    const loadObject = options.loadObject ?? ((id, signal)=>fetchPublicObject(id, signal, options.runtimeConfig));
     const object = options.object ?? await loadObject(objectId, options.signal);
     abortIfNeeded(options.signal);
     if (!initialization.isCurrent()) return ()=>void 0;
@@ -680,7 +673,7 @@ async function initializeAdvancedArTrigger(trigger, options = {}) {
         createdImage.hidden = true;
         trigger.appendChild(createdImage);
     }
-    const trackView = ()=>options.trackView ? options.trackView() : incrementLegacyObjectView(objectId, options.runtimeConfig);
+    const trackView = ()=>options.trackView ? options.trackView() : incrementObjectViews(objectId, options.runtimeConfig);
     const handleDesktopClick = (event)=>{
         event.preventDefault();
         const revision = ++qrRevision;
@@ -732,6 +725,52 @@ async function initializeAdvancedArTrigger(trigger, options = {}) {
         else trigger.setAttribute('data-native-link', originalNativeLink);
     });
 }
+const DIALOG_EXIT_MS = 300;
+let pendingLoad;
+async function importModelViewerDialog() {
+    const [{ ModelViewerDialog }, { createElement }, { createRoot }] = await Promise.all([
+        import("@neurodyn/react-model-viewer"),
+        import("react"),
+        import("react-dom/client")
+    ]);
+    return {
+        open: ({ onClose, ...props })=>{
+            const container = document.createElement('div');
+            container.setAttribute('data-core-ar-model-viewer', '');
+            document.body.appendChild(container);
+            const root = createRoot(container);
+            let closed = false;
+            const render = (open)=>root.render(createElement(ModelViewerDialog, {
+                    ...props,
+                    onOpenChange: (next)=>{
+                        if (!next) close();
+                    },
+                    open
+                }));
+            function close() {
+                if (closed) return;
+                closed = true;
+                render(false);
+                setTimeout(()=>{
+                    root.unmount();
+                    container.remove();
+                }, DIALOG_EXIT_MS);
+                onClose?.();
+            }
+            render(true);
+            return close;
+        }
+    };
+}
+function loadModelViewerDialog() {
+    if (pendingLoad) return pendingLoad;
+    const promise = importModelViewerDialog();
+    pendingLoad = promise;
+    promise.catch(()=>{
+        if (pendingLoad === promise) pendingLoad = void 0;
+    });
+    return promise;
+}
 const SIZE_TYPES = [
     'cm',
     'inch'
@@ -745,7 +784,6 @@ const DEFAULT_SIZE_TYPE = 'inch';
 const ALL_DIMENSION_AXES = [
     ...DIMENSION_AXES
 ];
-const VIEWER_CONTAINER_ID = 'vizbl_viewer';
 const modal_trigger_beginInitialization = createElementInitializerRegistry();
 function resolveSizeType(value) {
     return value && SIZE_TYPES.includes(value) ? value : DEFAULT_SIZE_TYPE;
@@ -774,177 +812,60 @@ function createModalViewerUrl(params) {
     url.hash = fragment.toString();
     return url.toString();
 }
-function createFrame(src, backgroundColor) {
-    const frame = document.createElement('iframe');
-    frame.src = src;
-    frame.title = '3D model viewer';
-    frame.allow = 'fullscreen; xr-spatial-tracking';
-    Object.assign(frame.style, {
-        backgroundColor: backgroundColor ?? 'white',
-        border: 'none',
-        height: '100%',
-        inset: '0',
-        position: 'absolute',
-        width: '100%',
-        zIndex: '11112'
-    });
-    return frame;
-}
-function createCloseButton(className, close, lang = 'en') {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.setAttribute('aria-label', 'ru' === lang ? 'Закрыть просмотр 3D-модели' : 'Close 3D model viewer');
-    if (className) button.className = className;
-    Object.assign(button.style, {
-        alignItems: 'center',
-        background: '#fff',
-        border: '1px solid #E3E7E7',
-        borderRadius: '4px',
-        boxSizing: 'border-box',
-        cursor: 'pointer',
-        display: 'flex',
-        height: '40px',
-        inset: '24px 24px auto auto',
-        justifyContent: 'center',
-        padding: '8px 16px',
-        position: 'absolute',
-        width: '56px',
-        zIndex: '11113'
-    });
-    button.innerHTML = '<svg aria-hidden="true" style="flex-shrink:0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="#484D50"/></svg>';
-    button.addEventListener('click', close);
-    return button;
-}
-function openModal(options) {
-    if (document.getElementById(VIEWER_CONTAINER_ID)) return null;
-    const root = document.createElement('div');
-    const viewer = document.createElement('div');
-    const overlay = document.createElement('div');
-    const targetContainer = options.containerClassName ? document.getElementsByClassName(options.containerClassName)[0] : null;
-    const isInlineContainer = Boolean(targetContainer);
-    const lockTarget = isInlineContainer ? viewer : root;
-    let closed = false;
-    let close;
-    const handleKeydown = (event)=>{
-        if ('Escape' === event.key) close();
-    };
-    close = ()=>{
-        if (closed) return;
-        closed = true;
-        document.removeEventListener('keydown', handleKeydown);
-        enableBodyScroll(lockTarget);
-        (isInlineContainer ? viewer : root).remove();
-        options.onClose?.();
-        options.restoreFocusTo?.focus({
-            preventScroll: true
-        });
-    };
-    root.id = VIEWER_CONTAINER_ID;
-    Object.assign(root.style, {
-        inset: '0',
-        overflow: 'auto',
-        position: 'fixed',
-        zIndex: '2147483647'
-    });
-    root.style.webkitOverflowScrolling = 'touch';
-    viewer.setAttribute('role', 'dialog');
-    viewer.setAttribute('aria-modal', 'true');
-    viewer.setAttribute('aria-label', 'ru' === options.lang ? 'Просмотр 3D-модели' : '3D model viewer');
-    Object.assign(overlay.style, {
-        animation: 'vex-fadein 0.5s',
-        background: '#fff',
-        inset: '0',
-        position: 'fixed',
-        zIndex: '11111'
-    });
-    overlay.addEventListener('click', close);
-    if (options.width || options.height) {
-        overlay.style.background = 'rgba(0, 0, 0, 0.8)';
-        Object.assign(viewer.style, {
-            borderRadius: '12px',
-            height: options.height ?? '100%',
-            left: '50%',
-            overflow: 'hidden',
-            position: 'absolute',
-            top: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: options.width ?? '100%',
-            zIndex: '11112'
-        });
-    }
-    const closeButton = createCloseButton(options.crossClassName, close, options.lang);
-    viewer.append(createFrame(createModalViewerUrl(options), options.backgroundColor), closeButton);
-    if (targetContainer) {
-        viewer.id = VIEWER_CONTAINER_ID;
-        targetContainer.appendChild(viewer);
-    } else {
-        root.append(overlay, viewer);
-        document.body.appendChild(root);
-    }
-    document.addEventListener('keydown', handleKeydown);
-    disableBodyScroll(lockTarget);
-    closeButton.focus({
-        preventScroll: true
-    });
-    return close;
-}
-function initializeModalTrigger(trigger, options = {}) {
+function initializeModalTrigger(trigger, options) {
     const initialization = modal_trigger_beginInitialization(trigger);
-    let closeOwnedModal;
+    let closeOwnedViewer;
     let pendingOpen = false;
     const handleClick = async ()=>{
-        if (closeOwnedModal || pendingOpen) return;
+        if (closeOwnedViewer || pendingOpen) return;
         const objectId = trigger.dataset.objectTinuuid?.trim();
         if (!objectId) return;
         pendingOpen = true;
-        let widgetSessionToken = options.widgetSessionToken;
+        runSafely(()=>options.onLoading?.());
         try {
-            if (options.getWidgetSessionToken) widgetSessionToken = await options.getWidgetSessionToken();
-        } catch  {
-            pendingOpen = false;
+            const widgetSessionToken = options.getWidgetSessionToken ? await options.getWidgetSessionToken() : options.widgetSessionToken;
+            const viewer = await loadModelViewerDialog();
+            if (closeOwnedViewer || !initialization.isCurrent()) return;
+            const modelViewerOrigin = options.modelViewerOrigin ?? getCoreArWidgetRuntimeConfig().modelViewerOrigin;
+            let closed = false;
+            closeOwnedViewer = viewer.open({
+                apiBaseUrl: options.viewer.apiBaseUrl,
+                apiKey: options.apiKey,
+                cameraOrbit: trigger.dataset.cameraOrbit,
+                dimensionAxes: resolveDimensionAxes(trigger.dataset.dimensionAxes),
+                handoffUrl: new URL('/model-viewer', modelViewerOrigin).toString(),
+                hid: trigger.dataset.objectHid,
+                initialWidgetSessionToken: widgetSessionToken,
+                lang: options.lang,
+                maxCameraOrbit: trigger.dataset.maxCameraOrbit,
+                minCameraOrbit: trigger.dataset.minCameraOrbit,
+                mode: options.mode,
+                onClose: ()=>{
+                    if (closed) return;
+                    closed = true;
+                    closeOwnedViewer = void 0;
+                    options.onClose?.();
+                    trigger.focus({
+                        preventScroll: true
+                    });
+                },
+                sizeType: resolveSizeType(trigger.dataset.sizeType),
+                tinuuid: objectId
+            });
+        } catch (error) {
+            if (initialization.isCurrent()) runSafely(()=>options.onError?.(error));
             return;
+        } finally{
+            pendingOpen = false;
         }
-        pendingOpen = false;
-        if (closeOwnedModal || !initialization.isCurrent()) return;
-        const opened = openModal({
-            apiKey: options.apiKey,
-            backgroundColor: trigger.dataset.background,
-            buttonBgColor: trigger.dataset.buttonBgColor,
-            buttonBorderColor: trigger.dataset.buttonBorderColor,
-            buttonTextColor: trigger.dataset.buttonTextColor,
-            cameraOrbit: trigger.dataset.cameraOrbit,
-            containerClassName: trigger.dataset.container,
-            crossClassName: trigger.dataset.crossClassName,
-            dimensionAxes: resolveDimensionAxes(trigger.dataset.dimensionAxes),
-            height: trigger.dataset.height?.trim(),
-            hid: trigger.dataset.objectHid,
-            hidePreview: trigger.dataset.hidePreview,
-            hideTitle: trigger.dataset.hideTitle,
-            lang: options.lang,
-            maxCameraOrbit: trigger.dataset.maxCameraOrbit,
-            minCameraOrbit: trigger.dataset.minCameraOrbit,
-            mode: options.mode,
-            modelViewerOrigin: options.modelViewerOrigin,
-            onClose: ()=>{
-                closeOwnedModal = void 0;
-                options.onClose?.();
-            },
-            restoreFocusTo: trigger,
-            sizeType: resolveSizeType(trigger.dataset.sizeType),
-            tinuuid: objectId,
-            widgetSessionToken,
-            width: trigger.dataset.width?.trim()
-        });
-        if (!opened) return;
-        closeOwnedModal = opened;
         options.onOpen?.();
         runSafely(()=>options.onAction?.('widget_opened'));
     };
     trigger.addEventListener('click', handleClick);
     return initialization.register(()=>{
         trigger.removeEventListener('click', handleClick);
-        closeOwnedModal?.();
-        closeOwnedModal = void 0;
+        closeOwnedViewer?.();
+        closeOwnedViewer = void 0;
     });
 }
 const native_ar_anchor_beginInitialization = createElementInitializerRegistry();
@@ -959,7 +880,7 @@ async function initializeNativeArAnchor(link, options = {}) {
     const variantId = link.dataset.objectHid?.trim() || void 0;
     if (!objectId) throw new Error('Object ID is required');
     native_ar_anchor_abortIfNeeded(options.signal);
-    const loadObject = options.loadObject ?? ((id, signal)=>fetchLegacyObject(id, signal, options.runtimeConfig));
+    const loadObject = options.loadObject ?? ((id, signal)=>fetchPublicObject(id, signal, options.runtimeConfig));
     const object = options.object ?? await loadObject(objectId, options.signal);
     native_ar_anchor_abortIfNeeded(options.signal);
     if (!initialization.isCurrent()) return ()=>void 0;
@@ -993,7 +914,7 @@ async function initializeNativeArAnchor(link, options = {}) {
         }).catch(()=>void 0);
     };
     const handleMobileClick = ()=>{
-        runSafely(options.trackView ?? (()=>incrementLegacyObjectView(objectId, options.runtimeConfig)));
+        runSafely(options.trackView ?? (()=>incrementObjectViews(objectId, options.runtimeConfig)));
         runSafely(()=>options.onAction?.('ar_launched'));
     };
     if (mobile) {
@@ -1148,6 +1069,31 @@ function installScopedStyles() {
 :where(vizbl-core, arizo-core)[data-state="error"] [data-core-ar-widget-trigger] {
   cursor: not-allowed;
 }
+
+:where(vizbl-core, arizo-core):not([unstyled])[data-state="loading"] [data-core-ar-widget-trigger] {
+  color: transparent;
+  position: relative;
+}
+
+:where(vizbl-core, arizo-core):not([unstyled])[data-state="loading"] [data-core-ar-widget-trigger]::after {
+  animation: core-ar-widget-spin 700ms linear infinite;
+  border: 2px solid var(--core-ar-widget-color);
+  border-radius: 50%;
+  border-right-color: transparent;
+  box-sizing: border-box;
+  content: "";
+  height: 1em;
+  inset: 0;
+  margin: auto;
+  position: absolute;
+  width: 1em;
+}
+
+@keyframes core-ar-widget-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 `;
     document.head.appendChild(style);
 }
@@ -1275,13 +1221,13 @@ class CoreArWidgetElement extends HTMLElementBase {
             this.applyIntegrationData(objectId, variantId, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit);
             let object;
             if ('ar-viewer' === rawType) {
-                object = await fetchLegacyObject(objectId, abortController.signal, runtimeConfig);
+                object = await fetchPublicObject(objectId, abortController.signal, runtimeConfig);
                 this.assertCurrent(revision, abortController.signal);
                 getSelectedMaterial(object, variantId);
                 assertPolicy(rawType, object);
                 this.object = object;
             } else {
-                object = isMobile() ? await this.fetchObjectWithSession(objectId, publicKey, session, runtimeConfig, abortController.signal, variantId) : await fetchLegacyObject(objectId, abortController.signal, runtimeConfig);
+                object = isMobile() ? await this.fetchObjectWithSession(objectId, publicKey, session, runtimeConfig, abortController.signal, variantId) : await fetchPublicObject(objectId, abortController.signal, runtimeConfig);
                 this.assertCurrent(revision, abortController.signal);
                 const material = getSelectedMaterial(object, variantId);
                 assertPolicy(rawType, object);
@@ -1313,6 +1259,16 @@ class CoreArWidgetElement extends HTMLElementBase {
             });
         }
     }
+    failInteraction(code, type) {
+        if (!this.isConnected) return;
+        this.setAttribute('data-error-code', code);
+        this.setState('error');
+        this.dispatchWidgetEvent('core-ar-error', {
+            code,
+            objectId: this.getAttribute('object-id')?.trim() ?? '',
+            type
+        });
+    }
     async ensureSession(publicKey, runtimeConfig, mode, signal, forceRefresh = false) {
         const runtimeKey = `${runtimeConfig.apiOrigin}|${runtimeConfig.viewerOrigin}|${runtimeConfig.modelViewerOrigin}|${mode}`;
         const existing = this.session?.publicKey === publicKey && this.session.runtimeKey === runtimeKey ? this.session : void 0;
@@ -1440,7 +1396,12 @@ class CoreArWidgetElement extends HTMLElementBase {
             onClose: ()=>{
                 if (this.isConnected) this.setState('ready');
             },
+            onError: ()=>this.failInteraction('VIEWER_UNAVAILABLE', type),
+            onLoading: ()=>this.setState('loading'),
             onOpen: ()=>this.setState('opening'),
+            viewer: {
+                apiBaseUrl: runtimeConfig.apiOrigin
+            },
             widgetSessionToken: session.token
         });
         if (!object) throw new CoreArWidgetComponentError('INITIALIZATION_FAILED');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/core-ar",
   "type": "module",
-  "version": "0.2.10",
+  "version": "0.3.0",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -20,18 +20,22 @@
     "dist"
   ],
   "dependencies": {
-    "body-scroll-lock": "^4.0.0-beta.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "@neurodyn/react-model-viewer": "0.1.0"
   },
   "devDependencies": {
+    "@rsbuild/core": "1.7.1",
     "@rslib/core": "^0.18.6",
-    "@types/body-scroll-lock": "^3.1.2",
+    "@types/react": "^19.2.4",
+    "@types/react-dom": "19.2.3",
     "eslint": "9.39.1",
     "happy-dom": "^17.6.3",
     "typescript": "^5.9.3",
     "vitest": "^3.0.5"
   },
   "scripts": {
-    "build": "rslib build",
+    "build": "rslib build && rsbuild build",
     "dev": "rslib build --watch",
     "test": "vitest run",
     "lint": "eslint .",