@shopware-ag/dive 1.17.2 → 1.18.1

package/README.md

@@ -21,9 +21,21 @@ You can find the template in ci/readme/template/TEMPLATE_README.md
     <a href="#badge">
         <img alt="dive: types" src="https://img.shields.io/npm/types/%40shopware-ag%2Fdive">
     </a>
+    <a href="#badge">
+        <img alt="dive: types" src="https://img.shields.io/codecov/c/github/shopware/dive">
+    </a>
 </p>
 
-# About
+## Table of Contents
+
+1. [About](#about)
+2. [Installation](#installation)
+3. [Local development](#local-development)
+4. [Usage](#usage)
+5. [Unit Tests](#unit-tests)
+6. [Formatting](#formatting)
+
+## About
 
 DIVE is a spatial framework made by and optimized for Shopware. It can be used
 directly integrated in a Shopware frontend such as Storefront or in any other
@@ -33,51 +45,106 @@ DIVE supplies your frontend application with all needed tooling to set up a
 basic 3D application with event-based controls called "Actions". For further
 information, see [Getting started](#getting-started).
 
-# Installation
+## Installation
 
-#### npm:
+The `@shopware-ag/dive` package can be installed via
 
-```
+```bash
 npm install @shopware-ag/dive
+
+or
+
+yarn add @shopware-ag/dive
 ```
 
-#### yarn:
+## Local development
+
+### with devenv
 
+If you are using `devenv`, you have to make sure that you are in the correct shell while linking. `nix` (what `devenv` is
+based on) uses it's own instances of `npm` so we need to make sure that the `npm link` get's executed within the correct `devenv` environment a.k.a `nix/store`.
+To make sure you are using the correct instance of `npm` you have to browse to your `devenv` project:
+
+```bash
+cd path/to/your/devenv.nix
 ```
-yarn add @shopware-ag/dive
+
+#### with direnv
+
+If you use `direnv` you should be launched into the correct shell automatically.
+
+#### without direnv
+
+If you don't use `direnv` you can start the correct shell manually by running
+
+```bash
+devenv shell
 ```
 
-# Formatter
+Within the `devenv shell` you have to browse to your DIVE folder
 
-DIVE uses Prettier as a preconfigured formatter.
+```bash
+cd path/to/@shopware-ag/dive
+```
 
-#### Setup in Shopware
+### without devenv
+
+You don't have to do anything special if you don't use `devenv`.
+
+### npm link
+
+If you want to link DIVE package locally after checking out, you can to that in the package's project folder:
+
+```bash
+cd path/to/@shopware-ag/dive
+npm link
+```
 
-Don't forget to include DIVE in your webpack.config.js:
+After registering the package in npm, you can use the sym-link in your project:
+
+```bash
+cd path/to/your/package.json
+npm link @shopware-ag/dive
+```
+
+After successfully linking DIVE into your project you will find the according sym-link in your `node_modules`.
+
+### Setup in Shopware
+
+Don't forget to include DIVE in your `webpack.config.js`:
 
 ```js
 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 +155,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 +179,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 +211,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 +239,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 +290,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 +518,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

@@ -3092,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/"
     );
@@ -3394,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);
@@ -4428,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.2",
+  version: "1.18.1",
   description: "Shopware Spatial Framework",
   type: "module",
   main: "./build/dive.cjs",
@@ -4594,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",
@@ -4605,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(