@neurodyn/react-room-viewer 0.0.6 → 0.0.7

package/dist/index.d.ts

@@ -53,6 +53,11 @@ declare const resources: {
                 readonly scanQrCode: "Scan this QR code with your phone's camera to view the object in Augmented Reality";
                 readonly deviceRequirementsDisclaimer: "*Requires AR-supported device and browser. We recommend iOS 12 or later with Safari, or Android 7.0 or later with Chrome.";
             };
+            readonly legal: {
+                readonly termsOfUse: "Terms of Use";
+                readonly conjunction: "and";
+                readonly privacyPolicy: "Privacy Policy";
+            };
             readonly shareMessage: {
                 readonly wallart: "Preview wall art";
                 readonly rugs: "Preview rug";
@@ -161,6 +166,11 @@ declare const resources: {
                 readonly scanQrCode: "Отсканируйте этот QR-код камерой телефона, чтобы просмотреть объект в дополненной реальности";
                 readonly deviceRequirementsDisclaimer: "*Требуется устройство и браузер с поддержкой AR. Рекомендуем iOS 12 или новее с Safari либо Android 7.0 или новее с Chrome.";
             };
+            readonly legal: {
+                readonly termsOfUse: "Условия использования";
+                readonly conjunction: "и";
+                readonly privacyPolicy: "Политика конфиденциальности";
+            };
             readonly shareMessage: {
                 readonly wallart: "Примерить настенный декор";
                 readonly rugs: "Примерить ковер";

package/dist/index.js

@@ -21,9 +21,9 @@ import { formatHex, oklch } from "culori";
 import qrcode from "qrcode";
 import { GLTFExporter, USDZExporter } from "three/examples/jsm/Addons.js";
 import "@google/model-viewer";
-import { Clone, DragControls, Environment, useGLTF, useProgress } from "@react-three/drei";
+import { Clone, DragControls, Environment, useGLTF, useProgress, useTexture } from "@react-three/drei";
 import { Canvas, useLoader, useThree } from "@react-three/fiber";
-import { ACESFilmicToneMapping, BufferGeometry, ClampToEdgeWrapping, DoubleSide, Float32BufferAttribute, LinearFilter, MathUtils, Matrix4, NearestFilter, PerspectiveCamera, Quaternion, SRGBColorSpace, TextureLoader, Vector2, Vector3 } from "three";
+import { ACESFilmicToneMapping, Box3, BufferGeometry, ClampToEdgeWrapping, DoubleSide, Float32BufferAttribute, LinearFilter, MathUtils, Matrix4, NearestFilter, PerspectiveCamera, Plane, Quaternion, SRGBColorSpace, TextureLoader, Vector2, Vector3 } from "three";
 import { Indicator as react_radio_group_Indicator, Item, Root as react_radio_group_Root } from "@radix-ui/react-radio-group";
 import { Swiper, SwiperSlide } from "swiper/react";
 var __webpack_modules__ = {
@@ -3029,6 +3029,14 @@ var __webpack_modules__ = {
     font-variant-numeric: tabular-nums;
   }
 
+  .underline {
+    text-decoration-line: underline;
+  }
+
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
+
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
@@ -6595,6 +6603,11 @@ const ns1 = {
         scanQrCode: 'Scan this QR code with your phone\'s camera to view the object in Augmented Reality',
         deviceRequirementsDisclaimer: '*Requires AR-supported device and browser. We recommend iOS 12 or later with Safari, or Android 7.0 or later with Chrome.'
     },
+    legal: {
+        termsOfUse: 'Terms of Use',
+        conjunction: 'and',
+        privacyPolicy: 'Privacy Policy'
+    },
     shareMessage: {
         wallart: 'Preview wall art',
         rugs: 'Preview rug',
@@ -6702,6 +6715,11 @@ const ns1_ns1 = {
         scanQrCode: 'Отсканируйте этот QR-код камерой телефона, чтобы просмотреть объект в дополненной реальности',
         deviceRequirementsDisclaimer: '*Требуется устройство и браузер с поддержкой AR. Рекомендуем iOS 12 или новее с Safari либо Android 7.0 или новее с Chrome.'
     },
+    legal: {
+        termsOfUse: 'Условия использования',
+        conjunction: 'и',
+        privacyPolicy: 'Политика конфиденциальности'
+    },
     shareMessage: {
         wallart: 'Примерить настенный декор',
         rugs: 'Примерить ковер',
@@ -8697,12 +8715,16 @@ const config_env = {
     NODE_API_BASE_URL: "https://api.neurodyn.ai/",
     TENANTS: {
         arizo: {
+            PRIVACY_URL: 'https://arizo.ru/privacy-policy/',
             POSTER_URL: "https://viewer.arizo.ru/poster/app/index.html",
-            ROOM_URL: "https://viewer.arizo.ru/room-viewer"
+            ROOM_URL: "https://integrations.arizo.ru/room-viewer",
+            TERMS_URL: 'https://arizo.ru/terms-of-use/'
         },
         vizbl: {
+            PRIVACY_URL: 'https://vizbl.com/legal/privacy-policy',
             POSTER_URL: "https://viewer.vizbl.com/poster/app/index.html",
-            ROOM_URL: "https://integrations.vizbl.com/room-viewer"
+            ROOM_URL: "https://integrations.vizbl.com/room-viewer",
+            TERMS_URL: 'https://vizbl.com/legal/terms-of-use'
         }
     },
     APP_CLIP_BUNDLE_ID: "com.us.vizbl.Clip"
@@ -9455,7 +9477,11 @@ function AR({ className, buttonClassName, buttonLeadingIcon, buttonLabel, button
     const handleClick = async ()=>{
         if ('floor' === placement) {
             if (!tinuuid) return;
-            if (isIOS && appClipUrl) return void window.location.assign(appClipUrl);
+            if (isIOS && appClipUrl) {
+                sendWidgetEvent(widgetSession, 'appclip');
+                window.location.assign(appClipUrl);
+                return;
+            }
             await refreshHandoffWidgetSessionToken();
             setOpen(true);
             return;
@@ -9542,9 +9568,37 @@ function AR({ className, buttonClassName, buttonLeadingIcon, buttonLabel, button
                             className: "text-lg text-center text-text-sub font-medium",
                             children: t('ar.scanQrCode')
                         }),
-                        /*#__PURE__*/ jsx_runtime_jsx("p", {
+                        /*#__PURE__*/ jsxs("p", {
                             className: "text-xs text-center text-text-light",
-                            children: t('ar.deviceRequirementsDisclaimer')
+                            children: [
+                                t('ar.deviceRequirementsDisclaimer'),
+                                /*#__PURE__*/ jsx_runtime_jsx("br", {}),
+                                /*#__PURE__*/ jsx_runtime_jsx("a", {
+                                    href: tenantConfig.TERMS_URL,
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    className: "underline underline-offset-2 transition-colors duration-300 hover:text-text-dark",
+                                    style: {
+                                        textDecoration: 'underline',
+                                        textUnderlineOffset: '2px'
+                                    },
+                                    children: t('legal.termsOfUse')
+                                }),
+                                ' ',
+                                t('legal.conjunction'),
+                                ' ',
+                                /*#__PURE__*/ jsx_runtime_jsx("a", {
+                                    href: tenantConfig.PRIVACY_URL,
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    className: "underline underline-offset-2 transition-colors duration-300 hover:text-text-dark",
+                                    style: {
+                                        textDecoration: 'underline',
+                                        textUnderlineOffset: '2px'
+                                    },
+                                    children: t('legal.privacyPolicy')
+                                })
+                            ]
                         }),
                         /*#__PURE__*/ jsx_runtime_jsx(DialogClose, {
                             asChild: true,
@@ -9723,14 +9777,34 @@ async function canvasToPngBlob(canvas, errorMessage) {
         }, 'image/png');
     });
 }
+function hideSceneCaptureExclusions(scene) {
+    const previousVisibility = new Map();
+    scene.traverse((object)=>{
+        if (true === object.userData.excludeFromCapture) {
+            previousVisibility.set(object, object.visible);
+            object.visible = false;
+        }
+    });
+    return ()=>{
+        previousVisibility.forEach((visible, object)=>{
+            object.visible = visible;
+        });
+    };
+}
 function CanvasCaptureBridge({ ref }) {
     const { camera, gl, invalidate, scene } = useThree();
     useImperativeHandle(ref, ()=>({
             capture: async ()=>{
                 invalidate();
                 await new Promise((resolve)=>requestAnimationFrame(()=>resolve()));
-                gl.render(scene, camera);
-                return canvasToPngBlob(gl.domElement, 'Failed to create scene share image');
+                const restoreVisibility = hideSceneCaptureExclusions(scene);
+                try {
+                    gl.render(scene, camera);
+                    return await canvasToPngBlob(gl.domElement, 'Failed to create scene share image');
+                } finally{
+                    restoreVisibility();
+                    invalidate();
+                }
             }
         }), [
         camera,
@@ -9766,6 +9840,17 @@ function createPoseFromPlane(mesh, point, camera, placement) {
         activePlaneId: mesh.userData.planeId
     };
 }
+function createPointerDragOffset(resourcePose, pointerPose) {
+    const inverseSurfaceQuaternion = new Quaternion(...pointerPose.quaternion).invert();
+    return new Vector3(...resourcePose.position).sub(new Vector3(...pointerPose.position)).applyQuaternion(inverseSurfaceQuaternion).toArray();
+}
+function applyPointerDragOffset(pointerPose, offset) {
+    const position = new Vector3(...offset).applyQuaternion(new Quaternion(...pointerPose.quaternion)).add(new Vector3(...pointerPose.position));
+    return {
+        ...pointerPose,
+        position: position.toArray()
+    };
+}
 function isRoomScenePlaneAllowedForResource(plane, placement) {
     return 'floor' === placement ? 'floor' === plane.kind : 'floor' !== plane.kind;
 }
@@ -9846,6 +9931,7 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
     const [placementState, dispatchPlacementState] = useReducer(reduceRoomScenePlacementState, placementKey, createInitialRoomScenePlacementState);
     const activePlaneIdRef = useRef(null);
     const planeMapRef = useRef(new Map());
+    const pointerDragOffsetRef = useRef(null);
     const planeIdMap = placementState.placementKey === placementKey ? placementState.planeIdMap : null;
     const resourcePose = placementState.placementKey === placementKey ? placementState.resourcePose : null;
     const allowedPlanes = external_react_useMemo(()=>getAllowedRoomScenePlanes(scene, placement), [
@@ -9899,12 +9985,14 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
         });
         activePlaneIdRef.current = null;
         activePlaneIdUniform.value = 0;
+        pointerDragOffsetRef.current = null;
     }, [
         activePlaneIdUniform,
         placementKey
     ]);
-    const updatePoseFromPlane = useCallback((mesh, point)=>{
-        const pose = createPoseFromPlane(mesh, point, camera, placement);
+    const updatePoseFromPlane = useCallback((mesh, point, pointerDragOffset = null)=>{
+        const pointerPose = createPoseFromPlane(mesh, point, camera, placement);
+        const pose = pointerDragOffset ? applyPointerDragOffset(pointerPose, pointerDragOffset) : pointerPose;
         activePlaneIdRef.current = pose.activePlaneId;
         activePlaneIdUniform.value = pose.activePlaneId;
         dispatchPlacementState({
@@ -9964,17 +10052,37 @@ function useRoomScenePlacement({ camera, invalidate, pointer, raycaster, roomId,
         resourcePose,
         placement
     ]);
+    const handleDragStart = useCallback(()=>{
+        const hit = findHitForPointer(pointer);
+        if (!hit || !resourcePose) {
+            pointerDragOffsetRef.current = null;
+            return;
+        }
+        const pointerPose = createPoseFromPlane(hit.object, hit.point, camera, placement);
+        pointerDragOffsetRef.current = createPointerDragOffset(resourcePose, pointerPose);
+    }, [
+        camera,
+        findHitForPointer,
+        placement,
+        pointer,
+        resourcePose
+    ]);
     const handleDrag = useCallback(()=>{
         const hit = findHitForPointer(pointer);
-        if (hit) updatePoseFromPlane(hit.object, hit.point);
+        if (hit) updatePoseFromPlane(hit.object, hit.point, pointerDragOffsetRef.current);
     }, [
         findHitForPointer,
         pointer,
         updatePoseFromPlane
     ]);
+    const handleDragEnd = useCallback(()=>{
+        pointerDragOffsetRef.current = null;
+    }, []);
     return {
         activePlaneIdUniform,
         handleDrag,
+        handleDragEnd,
+        handleDragStart,
         planeGeometries,
         readiness,
         resourcePose,
@@ -10091,16 +10199,128 @@ function collectClonedMaterials(source) {
     });
     return Array.from(materials);
 }
+import arrows_rug_namespaceObject from "./static/image/arrows-rug.png";
+const CONTROL_SIZE_MULTIPLIER = 1.15;
+const CONTROL_SURFACE_GAP_MULTIPLIER = 0.001;
+function isRugRotationControlPrimaryHit(control, intersectedObjects) {
+    return intersectedObjects[0] === control;
+}
+function createRugRotationControlLayout(resourceBounds) {
+    const size = resourceBounds.getSize(new Vector3());
+    const side = Math.max(size.x, size.y) * CONTROL_SIZE_MULTIPLIER;
+    return {
+        positionZ: resourceBounds.min.z - side * CONTROL_SURFACE_GAP_MULTIPLIER,
+        side
+    };
+}
+function normalizeDegrees(degrees) {
+    return ((degrees + 180) % 360 + 360) % 360 - 180;
+}
+function getPointAngle(point, center, inverseSurfaceQuaternion) {
+    const localPoint = point.clone().sub(center).applyQuaternion(inverseSurfaceQuaternion);
+    return Math.atan2(localPoint.y, localPoint.x);
+}
+function resolveRugRotationDegrees({ center, currentPoint, initialPoint, initialRotation, surfaceQuaternion }) {
+    const inverseSurfaceQuaternion = surfaceQuaternion.clone().invert();
+    const initialAngle = getPointAngle(initialPoint, center, inverseSurfaceQuaternion);
+    const currentAngle = getPointAngle(currentPoint, center, inverseSurfaceQuaternion);
+    const deltaDegrees = MathUtils.radToDeg(currentAngle - initialAngle);
+    return normalizeDegrees(initialRotation + deltaDegrees);
+}
+const CAPTURE_EXCLUSION_USER_DATA = {
+    excludeFromCapture: true
+};
+function RugRotationControl({ resourceBounds }) {
+    const { resourceRef, rotation, setIsDragging, setRotation } = useRoomViewerSceneState();
+    const texture = useTexture(arrows_rug_namespaceObject);
+    const gestureRef = useRef(null);
+    const layout = external_react_useMemo(()=>createRugRotationControlLayout(resourceBounds), [
+        resourceBounds
+    ]);
+    useLayoutEffect(()=>{
+        texture.colorSpace = SRGBColorSpace;
+        texture.needsUpdate = true;
+    }, [
+        texture
+    ]);
+    const handlePointerDown = (event)=>{
+        const resource = resourceRef.current;
+        if (!resource || !isRugRotationControlPrimaryHit(event.object, event.intersections.map((intersection)=>intersection.object))) return;
+        event.stopPropagation();
+        const pointerTarget = event.target;
+        pointerTarget.setPointerCapture(event.pointerId);
+        resource.updateWorldMatrix(true, false);
+        const surfaceQuaternion = resource.getWorldQuaternion(new Quaternion());
+        const center = resource.getWorldPosition(new Vector3());
+        const normal = new Vector3(0, 0, 1).applyQuaternion(surfaceQuaternion);
+        gestureRef.current = {
+            center,
+            initialPoint: event.point.clone(),
+            initialRotation: rotation,
+            plane: new Plane().setFromNormalAndCoplanarPoint(normal, center),
+            pointerId: event.pointerId,
+            pointerTarget,
+            surfaceQuaternion
+        };
+        setIsDragging(true);
+    };
+    const handlePointerMove = (event)=>{
+        const gesture = gestureRef.current;
+        if (!gesture) return;
+        event.stopPropagation();
+        const currentPoint = event.ray.intersectPlane(gesture.plane, new Vector3());
+        if (!currentPoint) return;
+        setRotation(resolveRugRotationDegrees({
+            ...gesture,
+            currentPoint
+        }));
+    };
+    const endGesture = (event)=>{
+        if (!gestureRef.current) return;
+        event.stopPropagation();
+        const { pointerId, pointerTarget } = gestureRef.current;
+        if (pointerTarget.hasPointerCapture(pointerId)) pointerTarget.releasePointerCapture(pointerId);
+        gestureRef.current = null;
+        setIsDragging(false);
+    };
+    if (layout.side <= 0) return null;
+    return /*#__PURE__*/ jsxs("mesh", {
+        "position-z": layout.positionZ,
+        userData: CAPTURE_EXCLUSION_USER_DATA,
+        onPointerCancel: endGesture,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: endGesture,
+        children: [
+            /*#__PURE__*/ jsx_runtime_jsx("planeGeometry", {
+                args: [
+                    layout.side,
+                    layout.side
+                ]
+            }),
+            /*#__PURE__*/ jsx_runtime_jsx("meshBasicMaterial", {
+                map: texture,
+                transparent: true,
+                depthWrite: false,
+                side: DoubleSide,
+                toneMapped: false
+            })
+        ]
+    });
+}
 const FLOOR_RESOURCE_ROTATION_X = Math.PI / 2;
 function FloorResource({ glbUrl, position, quaternion, materialPatch }) {
+    const { type } = useRoomViewerMetadata();
     const { resourceRef, rotation, setIsDragging } = useRoomViewerSceneState();
     const gltf = useGLTF(glbUrl);
-    const { sceneInstance, materials } = external_react_useMemo(()=>{
+    const { sceneInstance, materials, resourceBounds } = external_react_useMemo(()=>{
         const sceneInstance = gltf.scene.clone(true);
         const materials = collectClonedMaterials(sceneInstance);
+        const resourceBounds = new Box3().setFromObject(sceneInstance).applyMatrix4(new Matrix4().makeRotationX(FLOOR_RESOURCE_ROTATION_X));
         return {
             sceneInstance,
-            materials
+            materials,
+            resourceBounds
         };
     }, [
         gltf
@@ -10124,14 +10344,19 @@ function FloorResource({ glbUrl, position, quaternion, materialPatch }) {
         onPointerDown: ()=>setIsDragging(true),
         onPointerUp: ()=>setIsDragging(false),
         onPointerLeave: ()=>setIsDragging(false),
-        children: /*#__PURE__*/ jsx_runtime_jsx("group", {
+        children: /*#__PURE__*/ jsxs("group", {
             "rotation-z": rotationRadians,
-            children: /*#__PURE__*/ jsx_runtime_jsx("group", {
-                "rotation-x": FLOOR_RESOURCE_ROTATION_X,
-                children: /*#__PURE__*/ jsx_runtime_jsx("primitive", {
-                    object: sceneInstance
+            children: [
+                'rugs' === type ? /*#__PURE__*/ jsx_runtime_jsx(RugRotationControl, {
+                    resourceBounds: resourceBounds
+                }) : null,
+                /*#__PURE__*/ jsx_runtime_jsx("group", {
+                    "rotation-x": FLOOR_RESOURCE_ROTATION_X,
+                    children: /*#__PURE__*/ jsx_runtime_jsx("primitive", {
+                        object: sceneInstance
+                    })
                 })
-            })
+            ]
         })
     });
 }
@@ -10602,6 +10827,8 @@ function Room() {
             'floor' === placement ? scenePlacement.resourcePose && glbUrl && /*#__PURE__*/ jsx_runtime_jsx(DragControls, {
                 autoTransform: false,
                 onDrag: scenePlacement.handleDrag,
+                onDragEnd: scenePlacement.handleDragEnd,
+                onDragStart: scenePlacement.handleDragStart,
                 children: /*#__PURE__*/ jsx_runtime_jsx(FloorResource, {
                     glbUrl: glbUrl,
                     position: scenePlacement.resourcePose.position,
@@ -10611,6 +10838,8 @@ function Room() {
             }) : scenePlacement.resourcePose && src && /*#__PURE__*/ jsx_runtime_jsx(DragControls, {
                 autoTransform: false,
                 onDrag: scenePlacement.handleDrag,
+                onDragEnd: scenePlacement.handleDragEnd,
+                onDragStart: scenePlacement.handleDragStart,
                 children: /*#__PURE__*/ jsx_runtime_jsx(WallResource, {
                     src: src,
                     position: scenePlacement.resourcePose.position,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-room-viewer",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "publishConfig": {
     "access": "public"
   },