@shopware-ag/dive 1.16.0 → 1.16.2

package/package.json

@@ -1,62 +1,74 @@
 {
-  "name": "@shopware-ag/dive",
-  "version": "1.16.0",
-  "description": "Shopware Spatial Framework",
-  "type": "module",
-  "main": "./build/dive.cjs",
-  "module": "./build/dive.js",
-  "types": "./build/dive.d.ts",
-  "files": [
-    "build",
-    "LICENSE",
-    "package.json",
-    "README.md",
-    "src"
-  ],
-  "keywords": [
-    "dive",
-    "shopware",
-    "sw6",
-    "three",
-    "three.js",
-    "3d",
-    "typescript"
-  ],
-  "repository": "git@github.com:shopware/dive.git",
-  "author": "ffrank <f.frank@shopware.com>",
-  "license": "MIT",
-  "browserslist": [
-    "> 1%, not dead, not ie 11, not op_mini all"
-  ],
-  "dependencies": {
-    "@tweenjs/tween.js": "^23.1.1",
-    "lodash": "^4.17.21",
-    "three": "^0.163.0",
-    "three-spritetext": "^1.8.2"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.1.1",
-    "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.12",
-    "@types/node": "^20.12.7",
-    "@types/three": "^0.163.0",
-    "eslint": "^9.1.1",
-    "globals": "^15.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jsdom": "^24.0.0",
-    "ts-jest": "^29.1.2",
-    "ts-node": "^10.9.2",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "^7.7.1"
-  },
-  "scripts": {
-    "build": "tsup && yarn genmd",
-    "watch": "tsup --watch",
-    "lint": "eslint",
-    "unit": "jest",
-    "coverage": "jest --coverage",
-    "genmd": "node ./scripts/genmd.js"
-  }
+    "name": "@shopware-ag/dive",
+    "version": "1.16.2",
+    "description": "Shopware Spatial Framework",
+    "type": "module",
+    "main": "./build/dive.cjs",
+    "module": "./build/dive.js",
+    "types": "./build/dive.d.ts",
+    "files": [
+        "build",
+        "LICENSE",
+        "package.json",
+        "README.md",
+        "src"
+    ],
+    "keywords": [
+        "dive",
+        "shopware",
+        "sw6",
+        "three",
+        "three.js",
+        "3d",
+        "typescript"
+    ],
+    "repository": "git@github.com:shopware/dive.git",
+    "author": "ffrank <f.frank@shopware.com>",
+    "license": "MIT",
+    "browserslist": [
+        "> 1%, not dead, not ie 11, not op_mini all"
+    ],
+    "dependencies": {
+        "@tweenjs/tween.js": "^23.1.1",
+        "lodash": "^4.17.21",
+        "three": "^0.163.0",
+        "three-spritetext": "^1.8.2"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.1.1",
+        "@types/jest": "^29.5.12",
+        "@types/lodash": "^4.17.12",
+        "@types/node": "^20.12.7",
+        "@types/three": "^0.163.0",
+        "eslint": "^9.1.1",
+        "globals": "^15.0.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "jsdom": "^24.0.0",
+        "prettier": "^3.3.3",
+        "prettier-plugin-multiline-arrays": "^3.0.6",
+        "ts-jest": "^29.1.2",
+        "ts-node": "^10.9.2",
+        "tsc": "^2.0.4",
+        "tsup": "^8.0.2",
+        "typescript": "^5.4.5",
+        "typescript-eslint": "^7.7.1"
+    },
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "lint": "eslint",
+        "lint:actions": "yarn lint:actions:transpile && yarn lint:actions:check && yarn lint:actions:cleanup",
+        "lint:actions:transpile": "yarn tsc --resolveJsonModule --esModuleInterop ci/lint/lint-actions.ts && mv ci/lint/lint-actions.js ci/lint/lint-actions.cjs",
+        "lint:actions:check": "yarn node ci/lint/lint-actions.cjs",
+        "lint:actions:cleanup": "node -e \"require('fs').unlinkSync('ci/lint/lint-actions.cjs')\"",
+        "prettier:check": "prettier --check .",
+        "prettier:fix": "prettier --write .",
+        "unit": "jest",
+        "coverage": "jest --coverage",
+        "generate-readme": "yarn generate-readme:transpile && yarn generate-readme:write && yarn generate-readme:cleanup",
+        "generate-readme:transpile": "yarn tsc --resolveJsonModule --esModuleInterop ci/readme/generate-readme.ts && mv ci/readme/generate-readme.js ci/readme/generate-readme.cjs",
+        "generate-readme:write": "node ci/readme/generate-readme.cjs",
+        "generate-readme:cleanup": "node -e \"require('fs').unlinkSync('ci/readme/generate-readme.cjs')\""
+    }
 }

package/src/__test__/DIVE.test.ts

@@ -25,15 +25,19 @@ jest.mock('three', () => {
             return this;
         }),
         MathUtils: {
-            generateUUID: () => { return 'test_uuid'; },
+            generateUUID: () => {
+                return 'test_uuid';
+            },
         },
-    }
+    };
 });
 
 jest.mock('three/src/math/MathUtils', () => {
     return {
-        generateUUID: () => { return 'test_uuid'; },
-    }
+        generateUUID: () => {
+            return 'test_uuid';
+        },
+    };
 });
 
 jest.mock('../com/Communication.ts', () => {
@@ -43,14 +47,16 @@ jest.mock('../com/Communication.ts', () => {
                 position: { x: 0, y: 0, z: 0 },
                 target: { x: 0, y: 0, z: 0 },
             });
-            this.Subscribe = jest.fn((action: string, callback: (data: { id: string }) => void) => {
-                callback({ id: 'incorrect id' });
-                callback({ id: 'test_uuid' });
-            });
+            this.Subscribe = jest.fn(
+                (action: string, callback: (data: { id: string }) => void) => {
+                    callback({ id: 'incorrect id' });
+                    callback({ id: 'test_uuid' });
+                },
+            );
             this.DestroyInstance = jest.fn();
 
             return this;
-        })
+        }),
     };
 });
 
@@ -81,7 +87,7 @@ jest.mock('../renderer/Renderer.ts', () => {
             this.Dispose = jest.fn();
             return this;
         }),
-    }
+    };
 });
 
 jest.mock('../scene/Scene.ts', () => {
@@ -93,16 +99,16 @@ jest.mock('../scene/Scene.ts', () => {
             this.dispatchEvent = jest.fn();
             this.position = {
                 set: jest.fn(),
-            }
+            };
             this.SetIntensity = jest.fn();
             this.SetEnabled = jest.fn();
             this.SetColor = jest.fn();
             this.userData = {
                 id: undefined,
-            }
+            };
             this.removeFromParent = jest.fn();
             return this;
-        })
+        }),
     };
 });
 
@@ -113,13 +119,13 @@ jest.mock('../camera/PerspectiveCamera.ts', () => {
         this.dispatchEvent = jest.fn();
         this.position = {
             set: jest.fn(),
-        }
+        };
         this.SetIntensity = jest.fn();
         this.SetEnabled = jest.fn();
         this.SetColor = jest.fn();
         this.userData = {
             id: undefined,
-        }
+        };
         this.removeFromParent = jest.fn();
         this.OnResize = jest.fn();
         return this;
@@ -133,13 +139,13 @@ jest.mock('../controls/OrbitControls.ts', () => {
         this.dispatchEvent = jest.fn();
         this.position = {
             set: jest.fn(),
-        }
+        };
         this.SetIntensity = jest.fn();
         this.SetEnabled = jest.fn();
         this.SetColor = jest.fn();
         this.userData = {
             id: undefined,
-        }
+        };
         this.removeFromParent = jest.fn();
         this.Dispose = jest.fn();
         return this;
@@ -153,13 +159,13 @@ jest.mock('../toolbox/Toolbox.ts', () => {
         this.dispatchEvent = jest.fn();
         this.position = {
             set: jest.fn(),
-        }
+        };
         this.SetIntensity = jest.fn();
         this.SetEnabled = jest.fn();
         this.SetColor = jest.fn();
         this.userData = {
             id: undefined,
-        }
+        };
         this.Dispose = jest.fn();
         this.removeFromParent = jest.fn();
         return this;
@@ -173,13 +179,13 @@ jest.mock('../axiscamera/AxisCamera.ts', () => {
         this.dispatchEvent = jest.fn();
         this.position = {
             set: jest.fn(),
-        }
+        };
         this.SetIntensity = jest.fn();
         this.SetEnabled = jest.fn();
         this.SetColor = jest.fn();
         this.userData = {
             id: undefined,
-        }
+        };
         this.removeFromParent = jest.fn();
         this.SetFromCameraMatrix = jest.fn();
         this.Dispose = jest.fn();
@@ -208,7 +214,7 @@ describe('dive/DIVE', () => {
 
         const settings = {
             displayAxes: true,
-        }
+        };
         dive = new DIVE(settings);
         expect(() => dive.Dispose()).not.toThrow();
     });
@@ -233,7 +239,7 @@ describe('dive/DIVE', () => {
             orbitControls: {
                 enableDamping: false,
                 dampingFactor: 0,
-            }
+            },
         } as DIVESettings;
         const dive = new DIVE(settings);
         expect(dive).toBeDefined();
@@ -280,23 +286,21 @@ describe('dive/DIVE', () => {
             orbitControls: {
                 enableDamping: false,
                 dampingFactor: 0,
-            }
-        }
+            },
+        };
 
         dive.Settings = {
             autoResize: true,
-        }
+        };
 
         Object.assign(dive.Canvas, { parentElement: null });
 
         dive.Settings = {
             autoResize: false,
-        }
+        };
 
         dive.Settings = {
             autoResize: true,
-        }
+        };
     });
-
-
-});
+});

package/src/animation/AnimationSystem.ts

@@ -1,5 +1,5 @@
-import { Tween, update as updateTween } from "@tweenjs/tween.js";
-import { DIVERenderer } from "../renderer/Renderer";
+import { Tween, update as updateTween } from '@tweenjs/tween.js';
+import { DIVERenderer } from '../renderer/Renderer';
 
 /**
  * Updates all animations.
@@ -17,7 +17,7 @@ export class DIVEAnimationSystem {
 
         this._rendererCallbackId = this._renderer.AddPreRenderCallback(() => {
             this.Update();
-        })
+        });
     }
 
     public Dispose(): void {
@@ -31,4 +31,4 @@ export class DIVEAnimationSystem {
     public Animate<T extends object>(object: T): Tween<T> {
         return new Tween<T>(object);
     }
-}
+}

package/src/animation/__test__/AnimationSystem.test.ts

@@ -3,9 +3,9 @@ import { DIVEAnimationSystem } from '../AnimationSystem';
 
 jest.mock('@tweenjs/tween.js', () => {
     return {
-        Tween: jest.fn(() => { }),
+        Tween: jest.fn(() => {}),
         update: jest.fn(),
-    }
+    };
 });
 
 const mockRenderer = {
@@ -44,4 +44,4 @@ describe('dive/animation/DIVEAnimationSystem', () => {
         const anim = new DIVEAnimationSystem(mockRenderer);
         expect(() => anim.Dispose()).not.toThrow();
     });
-});
+});

package/src/axiscamera/AxisCamera.ts

@@ -1,10 +1,24 @@
-import { AxesHelper, Color, Material, Matrix4, OrthographicCamera, Vector4 } from "three";
-import SpriteText from "three-spritetext";
-import { COORDINATE_LAYER_MASK } from "../constant/VisibilityLayerMask.ts";
-import { AxesColorRed, AxesColorGreen, AxesColorBlue, AxesColorRedLetter, AxesColorGreenLetter, AxesColorBlueLetter } from "../constant/AxisHelperColors.ts";
-import { DIVERenderer } from "../renderer/Renderer.ts";
-import { DIVEScene } from "../scene/Scene.ts";
-import DIVEOrbitControls from "../controls/OrbitControls.ts";
+import {
+    AxesHelper,
+    Color,
+    Material,
+    Matrix4,
+    OrthographicCamera,
+    Vector4,
+} from 'three';
+import SpriteText from 'three-spritetext';
+import { COORDINATE_LAYER_MASK } from '../constant/VisibilityLayerMask.ts';
+import {
+    AxesColorRed,
+    AxesColorGreen,
+    AxesColorBlue,
+    AxesColorRedLetter,
+    AxesColorGreenLetter,
+    AxesColorBlueLetter,
+} from '../constant/AxisHelperColors.ts';
+import { DIVERenderer } from '../renderer/Renderer.ts';
+import { DIVEScene } from '../scene/Scene.ts';
+import DIVEOrbitControls from '../controls/OrbitControls.ts';
 
 /**
  * Shows the scene axes in the bottom left corner of the screen.
@@ -20,7 +34,11 @@ export default class DIVEAxisCamera extends OrthographicCamera {
 
     private _renderCallbackId: string;
 
-    constructor(renderer: DIVERenderer, scene: DIVEScene, controls: DIVEOrbitControls) {
+    constructor(
+        renderer: DIVERenderer,
+        scene: DIVEScene,
+        controls: DIVEOrbitControls,
+    ) {
         super(-1, 1, 1, -1, 0.1, 100);
 
         this.layers.mask = COORDINATE_LAYER_MASK;
@@ -33,7 +51,7 @@ export default class DIVEAxisCamera extends OrthographicCamera {
         this.axesHelper.setColors(
             new Color(AxesColorRed),
             new Color(AxesColorGreen),
-            new Color(AxesColorBlue)
+            new Color(AxesColorBlue),
         );
 
         const x = new SpriteText('X', 0.2, AxesColorRedLetter);
@@ -83,6 +101,8 @@ export default class DIVEAxisCamera extends OrthographicCamera {
     }
 
     public SetFromCameraMatrix(matrix: Matrix4): void {
-        this.axesHelper.rotation.setFromRotationMatrix(new Matrix4().extractRotation(matrix).invert());
+        this.axesHelper.rotation.setFromRotationMatrix(
+            new Matrix4().extractRotation(matrix).invert(),
+        );
     }
-}
+}

package/src/axiscamera/__test__/AxisCamera.test.ts

@@ -12,8 +12,13 @@ jest.mock('three', () => {
             return this;
         }),
         Matrix4: jest.fn(function () {
-            this.extractRotation = jest.fn(() => { return this; });
-            this.invert = jest.fn(() => { return this; });
+            this.extractRotation = jest.fn(() => {
+                return this;
+            });
+            this.invert = jest.fn(() => {
+                return this;
+            });
+            // prettier-multiline-arrays-next-line-pattern: 4
             this.elements = [
                 1, 0, 0, 0,
                 0, 1, 0, 0,
@@ -23,7 +28,6 @@ jest.mock('three', () => {
             return this;
         }),
         OrthographicCamera: jest.fn(function () {
-
             this.isObject3D = true;
             this.parent = null;
             this.dispatchEvent = jest.fn();
@@ -53,10 +57,10 @@ jest.mock('three', () => {
             this.setColors = jest.fn();
             this.rotation = {
                 setFromRotationMatrix: jest.fn(),
-            }
+            };
             return this;
         }),
-    }
+    };
 });
 
 jest.mock('three-spritetext', () => {
@@ -72,9 +76,8 @@ jest.mock('three-spritetext', () => {
                 set: jest.fn(),
             },
             removeFromParent: jest.fn(),
-        }
-    },
-    )
+        };
+    });
 });
 
 const mockRenderer = {
@@ -188,7 +191,11 @@ let textAxisCamera: DIVEAxisCamera;
 
 describe('dive/axiscamera/DIVEAxisCamera', () => {
     beforeEach(() => {
-        textAxisCamera = new DIVEAxisCamera(mockRenderer, mockScene, mockController);
+        textAxisCamera = new DIVEAxisCamera(
+            mockRenderer,
+            mockScene,
+            mockController,
+        );
     });
 
     it('should instantiate', () => {
@@ -198,6 +205,7 @@ describe('dive/axiscamera/DIVEAxisCamera', () => {
     it('should set rotation from Matrix4', () => {
         expect.assertions(0);
         const matrix = {
+            // prettier-multiline-arrays-next-line-pattern: 4
             elements: [
                 1, 0, 0, 0,
                 0, 1, 0, 0,
@@ -211,4 +219,4 @@ describe('dive/axiscamera/DIVEAxisCamera', () => {
     it('should dispose', () => {
         textAxisCamera.Dispose();
     });
-});
+});

package/src/camera/PerspectiveCamera.ts

@@ -1,17 +1,23 @@
-import { PerspectiveCamera } from "three";
-import { DEFAULT_LAYER_MASK, HELPER_LAYER_MASK, PRODUCT_LAYER_MASK, UI_LAYER_MASK } from "../constant/VisibilityLayerMask.ts";
+import { PerspectiveCamera } from 'three';
+import {
+    DEFAULT_LAYER_MASK,
+    HELPER_LAYER_MASK,
+    PRODUCT_LAYER_MASK,
+    UI_LAYER_MASK,
+} from '../constant/VisibilityLayerMask.ts';
 
 export type DIVEPerspectiveCameraSettings = {
     fov: number;
     near: number;
     far: number;
-}
+};
 
-export const DIVEPerspectiveCameraDefaultSettings: DIVEPerspectiveCameraSettings = {
-    fov: 80,
-    near: 0.1,
-    far: 1000,
-}
+export const DIVEPerspectiveCameraDefaultSettings: DIVEPerspectiveCameraSettings =
+    {
+        fov: 80,
+        near: 0.1,
+        far: 1000,
+    };
 
 /**
  * A Perspective camera. Can change the layer mask to show different objects.
@@ -20,17 +26,23 @@ export const DIVEPerspectiveCameraDefaultSettings: DIVEPerspectiveCameraSettings
  */
 
 export default class DIVEPerspectiveCamera extends PerspectiveCamera {
-    public static readonly EDITOR_VIEW_LAYER_MASK = DEFAULT_LAYER_MASK | UI_LAYER_MASK | HELPER_LAYER_MASK | PRODUCT_LAYER_MASK;
+    public static readonly EDITOR_VIEW_LAYER_MASK =
+        DEFAULT_LAYER_MASK |
+        UI_LAYER_MASK |
+        HELPER_LAYER_MASK |
+        PRODUCT_LAYER_MASK;
     public static readonly LIVE_VIEW_LAYER_MASK = PRODUCT_LAYER_MASK;
 
-    public onSetCameraLayer: (mask: number) => void = () => { };
+    public onSetCameraLayer: (mask: number) => void = () => {};
 
-    constructor(settings: Partial<DIVEPerspectiveCameraSettings> = DIVEPerspectiveCameraDefaultSettings) {
+    constructor(
+        settings: Partial<DIVEPerspectiveCameraSettings> = DIVEPerspectiveCameraDefaultSettings,
+    ) {
         super(
             settings.fov || DIVEPerspectiveCameraDefaultSettings.fov,
             1,
             settings.near || DIVEPerspectiveCameraDefaultSettings.near,
-            settings.far || DIVEPerspectiveCameraDefaultSettings.far
+            settings.far || DIVEPerspectiveCameraDefaultSettings.far,
         );
 
         this.layers.mask = DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
@@ -42,7 +54,10 @@ export default class DIVEPerspectiveCamera extends PerspectiveCamera {
     }
 
     public SetCameraLayer(layer: 'LIVE' | 'EDITOR'): void {
-        this.layers.mask = layer === 'LIVE' ? DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK : DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
+        this.layers.mask =
+            layer === 'LIVE'
+                ? DIVEPerspectiveCamera.LIVE_VIEW_LAYER_MASK
+                : DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
         this.onSetCameraLayer(this.layers.mask);
     }
 }

package/src/camera/__test__/PerspectiveCamera.test.ts

@@ -1,4 +1,4 @@
-import DIVEPerspectiveCamera, { DIVEPerspectiveCameraDefaultSettings } from '../PerspectiveCamera';
+import DIVEPerspectiveCamera from '../PerspectiveCamera';
 
 let cam: DIVEPerspectiveCamera;
 
@@ -33,4 +33,4 @@ describe('dive/camera/DIVEPerspectiveCamera', () => {
         expect(() => cam.SetCameraLayer('LIVE')).not.toThrow();
         expect(() => cam.SetCameraLayer('EDITOR')).not.toThrow();
     });
-});
+});