@shopware-ag/dive 1.1.2 → 1.2.0

package/src/com/__test__/Communication.test.ts

@@ -289,6 +289,47 @@ describe('dive/communication/DIVECommunication', () => {
         expect(successSet).toBe(true);
     });
 
+    it('should perform action DROP_IT with existing model', () => {
+        const payload = {
+            entityType: "model",
+            id: "model",
+            position: { x: 0, y: 0, z: 0 },
+            rotation: { x: 0, y: 0, z: 0 },
+            scale: { x: 0.01, y: 0.01, z: 0.01 },
+
+            uri: "https://threejs.org/examples/models/gltf/LittlestTokyo.glb",
+        } as COMModel;
+
+        testCom.PerformAction('ADD_OBJECT', payload);
+
+        const placeSpy = jest.spyOn(mockScene, 'GetSceneObject').mockReturnValue({
+            DropIt: jest.fn(),
+        } as unknown as Object3D);
+
+        const successPlace = testCom.PerformAction('DROP_IT', payload);
+        expect(successPlace).toBe(true);
+        expect(placeSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should perform action DROP_IT without existing model', () => {
+        const payload = {
+            entityType: "model",
+            id: "model",
+            position: { x: 0, y: 0, z: 0 },
+            rotation: { x: 0, y: 0, z: 0 },
+            scale: { x: 0.01, y: 0.01, z: 0.01 },
+
+            uri: "https://threejs.org/examples/models/gltf/LittlestTokyo.glb",
+        };
+        const placeSpy = jest.spyOn(mockScene, 'GetSceneObject').mockReturnValue({
+            DropIt: jest.fn(),
+        } as unknown as Object3D);
+
+        const successPlace = testCom.PerformAction('DROP_IT', payload);
+        expect(successPlace).toBe(false);
+        expect(placeSpy).toHaveBeenCalledTimes(0);
+    });
+
     it('should perform action PLACE_ON_FLOOR with existing model', () => {
         const payload = {
             entityType: "model",

package/src/com/actions/index.ts

@@ -17,6 +17,7 @@ import GENERATE_MEDIA from "./media/generatemedia.ts";
 import GET_ALL_SCENE_DATA from "./scene/getallscenedata.ts";
 import SELECT_OBJECT from "./object/selectobject.ts";
 import GET_CAMERA_TRANSFORM from "./camera/getcameratransform.ts";
+import DROP_IT from "./object/model/dropit.ts";
 
 export type Actions = {
     GET_ALL_SCENE_DATA: GET_ALL_SCENE_DATA,
@@ -27,6 +28,7 @@ export type Actions = {
     DELETE_OBJECT: DELETE_OBJECT,
     SELECT_OBJECT: SELECT_OBJECT,
     SET_BACKGROUND: SET_BACKGROUND,
+    DROP_IT: DROP_IT,
     PLACE_ON_FLOOR: PLACE_ON_FLOOR,
     SET_CAMERA_TRANSFORM: SET_CAMERA_TRANSFORM,
     GET_CAMERA_TRANSFORM: GET_CAMERA_TRANSFORM,

package/src/com/actions/object/model/dropit.ts

@@ -0,0 +1,4 @@
+export default interface DROP_IT {
+    'PAYLOAD': { id: string },
+    'RETURN': boolean,
+};

package/src/helper/findSceneRecursive/__test__/findSceneRecursive.test.ts

@@ -0,0 +1,40 @@
+import type { Object3D } from 'three';
+import { findSceneRecursive } from '../findSceneRecursive.ts';
+
+describe('dive/helper/findSceneRecursive', () => {
+    it('should find itself if parent is not set', () => {
+        const obj = {} as Object3D;
+
+        const found = findSceneRecursive(obj);
+
+        expect(found).toStrictEqual(obj);
+    });
+
+    it('should find itself if it has no parent', () => {
+        const obj = {
+            parent: null,
+        } as Object3D;
+
+        const found = findSceneRecursive(obj);
+
+        expect(found).toStrictEqual(obj);
+    });
+
+    it('should find itself if it has no parent', () => {
+        const scene = {
+            parent: null,
+        } as Object3D;
+
+        const objparent = {
+            parent: scene,
+        } as Object3D;
+
+        const obj = {
+            parent: objparent,
+        } as Object3D;
+
+        const found = findSceneRecursive(obj);
+
+        expect(found).toStrictEqual(scene);
+    });
+});

package/src/helper/findSceneRecursive/findSceneRecursive.ts

@@ -0,0 +1,16 @@
+import type { Object3D } from 'three';
+import type DIVEScene from '../../scene/Scene';
+
+/**
+ * Find the scene object of an object.
+ *
+ * @param object - The object to find the scene of.
+ * @returns The scene object.
+ */
+
+export const findSceneRecursive = (object: Object3D): DIVEScene => {
+    if (object.parent) {
+        return findSceneRecursive(object.parent);
+    }
+    return object as DIVEScene;
+}

package/src/model/Model.ts

@@ -1,9 +1,10 @@
-import { Box3, Object3D, Vector3, Vector3Like } from 'three';
+import { Box3, type Mesh, Object3D, Raycaster, Vector3, Vector3Like } from 'three';
 import { DIVESelectable } from '../interface/Selectable';
 import { PRODUCT_LAYER_MASK } from '../constant/VisibilityLayerMask';
 import { DIVEMoveable } from '../interface/Moveable';
 import DIVECommunication from '../com/Communication';
 import type { GLTF, TransformControls } from 'three/examples/jsm/Addons.js';
+import { findSceneRecursive } from '../helper/findSceneRecursive/findSceneRecursive';
 
 /**
  * A basic model class.
@@ -66,6 +67,39 @@ export default class DIVEModel extends Object3D implements DIVESelectable, DIVEM
         DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
     }
 
+    public DropIt(): void {
+        if (!this.parent) {
+            console.warn('DIVEModel: DropIt() called on a model that is not in the scene.', this);
+            return;
+        }
+
+        // calculate the bottom center of the bounding box
+        const bottomY = this.boundingBox.min.y * this.scale.y;
+        const bbBottomCenter = this.localToWorld(this.boundingBox.getCenter(new Vector3()).multiply(this.scale));
+        bbBottomCenter.y = bottomY + this.position.y;
+
+        // set up raycaster and raycast all scene objects (product layer)
+        const raycaster = new Raycaster(bbBottomCenter, new Vector3(0, -1, 0));
+        raycaster.layers.mask = PRODUCT_LAYER_MASK;
+        const intersections = raycaster.intersectObjects(findSceneRecursive(this).Root.children, true);
+
+        // if we hit something, move the model to the top on the hit object's bounding box
+        if (intersections.length > 0) {
+            const mesh = intersections[0].object as Mesh;
+            mesh.geometry.computeBoundingBox();
+            const meshBB = mesh.geometry.boundingBox!;
+            const worldPos = mesh.localToWorld(meshBB.max.clone());
+
+            const oldPos = this.position.clone();
+            const newPos = this.position.clone().setY(worldPos.y).add(new Vector3(0, bottomY, 0));
+            this.position.copy(newPos);
+
+            // if the position changed, update the object in communication
+            if (this.position.y === oldPos.y) return;
+            DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
+        }
+    }
+
     public onMove(): void {
         DIVECommunication.get(this.userData.id)?.PerformAction('UPDATE_OBJECT', { id: this.userData.id, position: this.position, rotation: this.rotation, scale: this.scale });
     }

package/src/model/__test__/Model.test.ts

@@ -1,11 +1,49 @@
 import Model from '../Model';
 import DIVECommunication from '../../com/Communication';
 import { GLTF } from 'three/examples/jsm/Addons';
+import DIVEScene from '../../scene/Scene';
+import { Vector3, Box3, Mesh } from 'three';
+
+const intersectObjectsMock = jest.fn();
 
 jest.mock('three', () => {
     return {
         Vector3: jest.fn(function (x: number, y: number, z: number) {
-            return { x, y, z };
+            this.x = x;
+            this.y = y;
+            this.z = z;
+            this.copy = (vec3: Vector3) => {
+                this.x = vec3.x;
+                this.y = vec3.y;
+                this.z = vec3.z;
+                return this;
+            };
+            this.set = (x: number, y: number, z: number) => {
+                this.x = x;
+                this.y = y;
+                this.z = z;
+                return this;
+            };
+            this.multiply = (vec3: Vector3) => {
+                this.x *= vec3.x;
+                this.y *= vec3.y;
+                this.z *= vec3.z;
+                return this;
+            };
+            this.clone = () => {
+                return new Vector3(this.x, this.y, this.z);
+            };
+            this.setY = (y: number) => {
+                this.y = y;
+                return this;
+            }
+            this.add = (vec3: Vector3) => {
+                this.x += vec3.x;
+                this.y += vec3.y;
+                this.z += vec3.z;
+                return this;
+            };
+            return this;
         }),
         Object3D: jest.fn(function () {
             this.clear = jest.fn();
@@ -31,12 +69,7 @@ jest.mock('three', () => {
                 },
             }];
             this.userData = {};
-            this.position = {
-                x: 0,
-                y: 0,
-                z: 0,
-                set: jest.fn(),
-            };
+            this.position = new Vector3();
             this.rotation = {
                 x: 0,
                 y: 0,
@@ -49,11 +82,46 @@ jest.mock('three', () => {
                 z: 1,
                 set: jest.fn(),
             };
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
+            this.mesh = new Mesh();
             return this;
         }),
         Box3: jest.fn(function () {
-            this.min = { x: 0, y: 0, z: 0 };
+            this.min = new Vector3(Infinity, Infinity, Infinity);
+            this.max = new Vector3(-Infinity, -Infinity, -Infinity);
+            this.getCenter = jest.fn(() => {
+                return new Vector3(0, 0, 0);
+            });
             this.expandByObject = jest.fn();
+
+            return this;
+        }),
+        Raycaster: jest.fn(function () {
+            this.intersectObjects = intersectObjectsMock;
+            this.layers = {
+                mask: 0,
+            };
+            return this;
+        }),
+        Mesh: jest.fn(function () {
+            this.geometry = {
+                computeBoundingBox: jest.fn(),
+                boundingBox: new Box3(),
+            };
+            this.material = {};
+            this.castShadow = true;
+            this.receiveShadow = true;
+            this.layers = {
+                mask: 0,
+            };
+            this.updateWorldMatrix = jest.fn();
+            this.traverse = jest.fn();
+            this.removeFromParent = jest.fn();
+            this.localToWorld = (vec3: Vector3) => {
+                return vec3;
+            };
             return this;
         }),
     }
@@ -151,6 +219,71 @@ describe('dive/model/DIVEModel', () => {
         expect(() => model.PlaceOnFloor()).not.toThrow();
     });
 
+    it('should drop it', () => {
+        const comMock = {
+            PerformAction: jest.fn(),
+        } as unknown as DIVECommunication;
+        jest.spyOn(DIVECommunication, 'get').mockReturnValue(comMock);
+
+        const size = {
+            x: 1,
+            y: 1,
+            z: 1,
+        };
+
+        const model = new Model();
+        model.userData.id = 'something';
+        model.position.set(0, 4, 0);
+        model['boundingBox'] = {
+            min: new Vector3(-size.x / 2, -size.y / 2, -size.z / 2),
+            max: new Vector3(size.x / 2, size.y / 2, size.z / 2),
+            getCenter: jest.fn(() => {
+                return new Vector3(0, 0, 0);
+            }),
+        } as unknown as Box3;
+
+
+        const hitObject = new Mesh();
+        hitObject.geometry.boundingBox = new Box3();
+        hitObject.geometry.boundingBox.max = new Vector3(0, 2, 0);
+        intersectObjectsMock.mockReturnValue([{
+            object: hitObject,
+
+        }]);
+
+        const scene = {
+            parent: null,
+            Root: {
+                children: [
+                    model,
+                ],
+            },
+        } as unknown as DIVEScene;
+        scene.Root.parent = scene;
+
+        // test when parent is not set
+        console.warn = jest.fn();
+        expect(() => model.DropIt()).not.toThrow();
+        expect(console.warn).toHaveBeenCalledTimes(1);
+
+        model.parent = scene.Root;
+
+        expect(() => model.DropIt()).not.toThrow();
+        expect(model.position.y).toBe(1.5);
+        expect(comMock.PerformAction).toHaveBeenCalledTimes(1);
+
+        expect(() => model.DropIt()).not.toThrow();
+        expect(comMock.PerformAction).toHaveBeenCalledTimes(1);
+
+        // reset for PerformAction to be called again
+        model.position.y = 2;
+        jest.spyOn(DIVECommunication, 'get').mockReturnValueOnce(undefined);
+        expect(() => model.DropIt()).not.toThrow();
+        expect(comMock.PerformAction).toHaveBeenCalledTimes(1);
+
+
+    });
+
     it('should onMove', () => {
         const model = new Model();
         model.userData.id = 'something';