@shopware-ag/dive 1.17.1 → 1.18.0

package/README.md

@@ -47,10 +47,6 @@ npm install @shopware-ag/dive
 yarn add @shopware-ag/dive
 ```
 
-# Formatter
-
-DIVE uses Prettier as a preconfigured formatter.
-
 #### Setup in Shopware
 
 Don't forget to include DIVE in your webpack.config.js:
@@ -60,24 +56,33 @@ const path = require('path');
 
 module.exports = () => {
     return {
-        ...
+        // Other configurations...
         resolve: {
-            extensions: ['.ts', '.cjs', '.js'],
+            extensions: [
+                '.ts',
+                '.cjs',
+                '.js',
+            ],
             alias: {
                 three: path.resolve(__dirname, 'path/to/node_modules/three'),
-                "@shopware-ag/dive": path.resolve(__dirname, 'path/to/node_modules/@shopware-ag/dive'),
-            }
+                '@shopware-ag/dive': path.resolve(
+                    __dirname,
+                    'path/to/node_modules/@shopware-ag/dive',
+                ),
+            },
         },
-        ...
         module: {
             rules: [
-                ...
+                // Other rules...
                 {
                     test: /\.(js|ts)$/,
                     loader: 'swc-loader',
                     include: [
                         path.resolve(__dirname, 'path/to/node_modules/three'),
-                        path.resolve(__dirname, 'path/to/node_modules/@shopware-ag/dive')
+                        path.resolve(
+                            __dirname,
+                            'path/to/node_modules/@shopware-ag/dive',
+                        ),
                     ],
                     options: {
                         jsc: {
@@ -88,18 +93,20 @@ module.exports = () => {
                         },
                     },
                 },
-                ...
+                // Other rules...
             ],
-        }
+        },
     };
 };
 ```
 
-# Quick View
+# Usage
+
+## Quick View
 
 QuickView is used to quickly display your assets with as few lines of code as
-possible. Simply call the static `QuickView()` method (with your data-uri as a
-parameter) to create an instance of DIVE with your asset to use in further code.
+possible. Simply call the static `QuickView()` method, with your data URI as a
+parameter, to create an instance of DIVE with your asset to use in further code.
 
 ```ts
 import { DIVE } from '@shopware-ag/dive';
@@ -110,15 +117,30 @@ const myCanvasWrapper = document.createElement('div');
 myCanvasWrapper.appendChild(dive.Canvas);
 ```
 
-# Getting started
+### Example with Error Handling:
+
+```ts
+import { DIVE } from '@shopware-ag/dive';
+
+try {
+    const dive = DIVE.QuickView('your/asset/uri.glb'); // <-- call QuickView()
+
+    const myCanvasWrapper = document.createElement('div');
+    myCanvasWrapper.appendChild(dive.Canvas);
+} catch (error) {
+    console.error('Failed to load asset:', error);
+}
+```
+
+## Getting started
 
-Import:
+### Import:
 
 ```ts
 import { DIVE } from '@shopware-ag/dive'; // <-- import DIVE
 ```
 
-Instantiate:
+### Instantiate:
 
 ```ts
 import { DIVE } from '@shopware-ag/dive';
@@ -127,7 +149,7 @@ const dive = new DIVE(); // <-- instantiate DIVE
 ```
 
 DIVE supplies your application with a HTMLCanvasElement that it uses as a render
-target. After instantiating, you can use the supplied canvas within you frontend
+target. After instantiating, you can use the supplied canvas within your frontend
 code to attach it to your DOM.
 
 ```ts
@@ -155,7 +177,7 @@ com.PerformAction('SET_CAMERA_TRANSFORM', {
 });
 ```
 
-# Actions
+## Actions
 
 Actions symbolize the communication between frontend and 3D space. All actions
 can be performed anywhere, no matter if you are in frontend or 3D.
@@ -206,7 +228,7 @@ com.PerformAction('SET_CAMERA_TRANSFORM', {
 unsubscribe(); // <-- execute unsubscribe callback when done
 ```
 
-# Actions (List)
+### Actions List
 
 In the following you find a list of all available actions to perform on
 DIVECommunication class via
@@ -434,3 +456,15 @@ DIVECommunication class via
         </td>
     </tr>
 </table>
+
+# Unit Tests
+
+All relevant files are covered by Jest tests. If you find any file that has not been covered yet, feel free to add unit tests accordingly.
+
+If there are any modules that have to be mocked (like `three`) you can create a given file in the `__mocks__` folder in project root. Jest manages to mock modules with a given file with the modules name as a file name (for example `three.ts`). Every export will be part of the modules mock. You don't need to mock the module in your test anymore, you only extend the module mock.
+
+If you have any other things from a module to import, you can simply create a folder structure and place the mock file at the end of your structure. To understand better please take a look at the `__mocks__` folder for yourself.
+
+# Formatting
+
+DIVE uses Prettier as a preconfigured formatter.

package/build/dive.cjs

@@ -337,40 +337,7 @@ var init_TransformTool = __esm({
         super(scene, controller);
         this.isTransformTool = true;
         this.name = "DIVETransformTool";
-        this._gizmo = new import_TransformControls.TransformControls(
-          this._controller.object,
-          this._controller.domElement
-        );
-        this._gizmo.mode = "translate";
-        this._gizmo.addEventListener("mouseDown", () => {
-          controller.enabled = false;
-          if (!implementsInterface(
-            this._gizmo.object,
-            "isMovable"
-          ))
-            return;
-          if (!this._gizmo.object.onMoveStart) return;
-          this._gizmo.object.onMoveStart();
-        });
-        this._gizmo.addEventListener("objectChange", () => {
-          if (!implementsInterface(
-            this._gizmo.object,
-            "isMovable"
-          ))
-            return;
-          if (!this._gizmo.object.onMove) return;
-          this._gizmo.object.onMove();
-        });
-        this._gizmo.addEventListener("mouseUp", () => {
-          controller.enabled = true;
-          if (!implementsInterface(
-            this._gizmo.object,
-            "isMovable"
-          ))
-            return;
-          if (!this._gizmo.object.onMoveEnd) return;
-          this._gizmo.object.onMoveEnd();
-        });
+        this._gizmo = this.initGizmo();
         this._scene.add(this._gizmo);
       }
       Activate() {
@@ -382,19 +349,58 @@ var init_TransformTool = __esm({
         const contains = this._scene.children.includes(this._gizmo);
         if (active && !contains) {
           this._scene.add(this._gizmo);
+          if ("isTransformControls" in this._gizmo) {
+            this._gizmo.getRaycaster().layers.enableAll();
+          }
         } else if (!active && contains) {
           this._scene.remove(this._gizmo);
+          if ("isTransformControls" in this._gizmo) {
+            this._gizmo.getRaycaster().layers.disableAll();
+          }
         }
       }
+      // only used for optimizing pointer events with DIVEGizmo
       // public onPointerDown(e: PointerEvent): void {
       //     super.onPointerDown(e);
-      //     // if (this._hovered) {
-      //     //     this._dragRaycastOnObjects = this._gizmo.gizmoPlane.children;
-      //     // }
+      //     if (this._hovered) {
+      //         this._dragRaycastOnObjects = (
+      //             this._gizmo as DIVEGizmo
+      //         ).gizmoPlane?.children;
+      //     }
       // }
+      // only used for optimizing pointer events with DIVEGizmo
       // protected raycast(): Intersection[] {
-      //     return super.raycast(this._gizmo.gizmoNode.children);
+      //     return super.raycast((this._gizmo as DIVEGizmo).gizmoNode.children);
       // }
+      initGizmo() {
+        const g = new import_TransformControls.TransformControls(
+          // this._controller,
+          this._controller.object,
+          this._controller.domElement
+        );
+        g.mode = "translate";
+        g.addEventListener("mouseDown", () => {
+          this._controller.enabled = false;
+          if (!implementsInterface(g.object, "isMovable"))
+            return;
+          if (!g.object.onMoveStart) return;
+          g.object.onMoveStart();
+        });
+        g.addEventListener("objectChange", () => {
+          if (!implementsInterface(g.object, "isMovable"))
+            return;
+          if (!g.object.onMove) return;
+          g.object.onMove();
+        });
+        g.addEventListener("mouseUp", () => {
+          this._controller.enabled = true;
+          if (!implementsInterface(g.object, "isMovable"))
+            return;
+          if (!g.object.onMoveEnd) return;
+          g.object.onMoveEnd();
+        });
+        return g;
+      }
     };
   }
 });
@@ -3086,13 +3092,14 @@ var DIVEModel = class extends DIVENode {
 };
 
 // src/loadingmanager/LoadingManager.ts
-var import_Addons = require("three/examples/jsm/Addons.js");
+var import_DRACOLoader = require("three/examples/jsm/loaders/DRACOLoader");
+var import_GLTFLoader2 = require("three/examples/jsm/loaders/GLTFLoader");
 var DIVELoadingManager = class {
   // ... maybe extend with other loaders later
   constructor() {
     this.progress = /* @__PURE__ */ new Map();
-    this.gltfloader = new import_Addons.GLTFLoader();
-    this.dracoloader = new import_Addons.DRACOLoader();
+    this.gltfloader = new import_GLTFLoader2.GLTFLoader();
+    this.dracoloader = new import_DRACOLoader.DRACOLoader();
     this.dracoloader.setDecoderPath(
       "https://www.gstatic.com/draco/v1/decoders/"
     );
@@ -3388,6 +3395,9 @@ var DIVEGroup = class extends DIVENode {
     this._lines[index].visible = visible;
   }
   attach(object) {
+    if (this._members.includes(object)) {
+      return this;
+    }
     const line = this.createLine();
     this.add(line);
     this._lines.push(line);
@@ -4422,13 +4432,13 @@ var getObjectDelta = (a, b) => {
 };
 
 // src/dive.ts
-var import_MathUtils2 = require("three/src/math/MathUtils");
+var import_three28 = require("three");
 init_Info();
 
 // package.json
 var package_default = {
   name: "@shopware-ag/dive",
-  version: "1.17.1",
+  version: "1.18.0",
   description: "Shopware Spatial Framework",
   type: "module",
   main: "./build/dive.cjs",
@@ -4472,6 +4482,7 @@ var package_default = {
     globals: "^15.0.0",
     jest: "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
     jsdom: "^24.0.0",
     prettier: "^3.3.3",
     "prettier-plugin-multiline-arrays": "^3.0.6",
@@ -4587,7 +4598,7 @@ var DIVE = class _DIVE {
       position: { x: 0, y: 2, z: 2 },
       target: { x: 0, y: 0.5, z: 0 }
     });
-    const lightid = (0, import_MathUtils2.generateUUID)();
+    const lightid = import_three28.MathUtils.generateUUID();
     dive.Communication.PerformAction("ADD_OBJECT", {
       entityType: "light",
       type: "scene",
@@ -4598,7 +4609,7 @@ var DIVE = class _DIVE {
       intensity: 1,
       color: 16777215
     });
-    const modelid = (0, import_MathUtils2.generateUUID)();
+    const modelid = import_three28.MathUtils.generateUUID();
     dive.Communication.Subscribe("MODEL_LOADED", (data) => {
       if (data.id !== modelid) return;
       const transform = dive.Communication.PerformAction(