@shopware-ag/dive 1.19.1-beta.0 → 1.19.1-beta.2

package/src/ar/webxr/touchscreencontrols/WebXRTouchscreenControls.ts

@@ -1,356 +0,0 @@
-import { Vector2 } from 'three';
-import { DIVEEventExecutor } from '../../../events/EventExecutor';
-
-export type DIVETouchscreenEvents = {
-    TOUCH_START: {
-        touches: {
-            current: Vector2;
-        }[];
-        touchCount: number;
-    };
-    TOUCH_MOVE: {
-        touches: {
-            current: Vector2;
-            delta: Vector2;
-        }[];
-        touchCount: number;
-    };
-    TOUCH_END: {
-        touches: {
-            current: Vector2;
-        }[];
-        touchCount: number;
-    };
-    ROTATE_START: {
-        current: number;
-    };
-    ROTATE_MOVE: {
-        current: number;
-        delta: number;
-    };
-    ROTATE_END: {
-        current: number;
-    };
-    PINCH_START: {
-        current: number;
-    };
-    PINCH_MOVE: {
-        current: number;
-        delta: number;
-    };
-    PINCH_END: {
-        current: number;
-    };
-};
-
-type DIVETouch = {
-    start: Vector2;
-    current: Vector2;
-    delta: Vector2;
-};
-
-export class DIVEWebXRTouchscreenControls extends DIVEEventExecutor<DIVETouchscreenEvents> {
-    // general members
-    private _session: XRSession;
-
-    // touch members
-    private _touchCount: number = 0;
-    private _touches: DIVETouch[] = [];
-
-    // rotate members
-    private _handleRotateStarted: boolean = false;
-    private _handleRotateMoved: boolean = false;
-    private _handleRotateEnded: boolean = false;
-
-    private _startAngle: number = 0;
-    private _lastAngle: number = 0;
-    private _angleDelta: number = 0;
-
-    // scale members
-    private _handlePinchStarted: boolean = false;
-    private _handlePinchMoved: boolean = false;
-    private _handlePinchEnded: boolean = false;
-
-    private _scaleDistanceStart: number = 0;
-    private _currentDistance: number = 1;
-    private _deltaDistance: number = 0;
-
-    constructor(session: XRSession) {
-        super();
-
-        this._session = session;
-
-        this._touches = [
-            {
-                start: new Vector2(),
-                current: new Vector2(),
-                delta: new Vector2(),
-            },
-            {
-                start: new Vector2(),
-                current: new Vector2(),
-                delta: new Vector2(),
-            },
-        ];
-
-        this._handleRotateStarted = false;
-
-        window.addEventListener('touchstart', (e: TouchEvent) =>
-            this.onTouchStart(e),
-        );
-        window.addEventListener('touchmove', (e: TouchEvent) =>
-            this.onTouchMove(e),
-        );
-        window.addEventListener('touchend', (e: TouchEvent) =>
-            this.onTouchEnd(e),
-        );
-
-        this._session.addEventListener('selectstart', () =>
-            this.onSessionSelectStart(),
-        );
-        this._session.addEventListener('selectend', () =>
-            this.onSessionSelectEnd(),
-        );
-    }
-
-    public Dispose(): void {
-        window.removeEventListener('touchstart', (e: TouchEvent) =>
-            this.onTouchStart(e),
-        );
-        window.removeEventListener('touchmove', (e: TouchEvent) =>
-            this.onTouchMove(e),
-        );
-        window.removeEventListener('touchend', (e: TouchEvent) =>
-            this.onTouchEnd(e),
-        );
-
-        this._session.removeEventListener('selectstart', () =>
-            this.onSessionSelectStart(),
-        );
-        this._session.removeEventListener('selectend', () =>
-            this.onSessionSelectEnd(),
-        );
-    }
-
-    private onTouchStart(event: TouchEvent): void {
-        this._touchCount = event.touches.length;
-
-        this._touches[0].start.set(
-            event.touches[0].clientX,
-            event.touches[0].clientY,
-        );
-        this._touches[0].current.set(
-            event.touches[0].clientX,
-            event.touches[0].clientY,
-        );
-        this._touches[0].delta.set(0, 0);
-
-        if (this._touchCount > 1) {
-            this._touches[1].start.set(
-                event.touches[1].clientX,
-                event.touches[1].clientY,
-            );
-            this._touches[1].current.set(
-                event.touches[1].clientX,
-                event.touches[1].clientY,
-            );
-            this._touches[1].delta.set(0, 0);
-        }
-
-        if (this._touchCount === 2) {
-            this.handleRotateStart();
-            this.handlePinchStart();
-        }
-
-        if (this._handleRotateStarted) {
-            this.dispatch('ROTATE_START', {
-                current: 0,
-            });
-            this._handleRotateStarted = false;
-        }
-
-        if (this._handlePinchStarted) {
-            this.dispatch('PINCH_START', {
-                current: 0,
-            });
-            this._handlePinchStarted = false;
-        }
-    }
-
-    private onTouchMove(event: TouchEvent): void {
-        this._touchCount = event.touches.length;
-
-        this._touches[0].start.set(
-            event.touches[0].clientX,
-            event.touches[0].clientY,
-        );
-        this._touches[0].current.set(
-            event.touches[0].clientX,
-            event.touches[0].clientY,
-        );
-        this._touches[0].delta.copy(
-            this._touches[0].current.clone().sub(this._touches[0].start),
-        );
-
-        if (this._touchCount > 1) {
-            this._touches[1].start.set(
-                event.touches[1].clientX,
-                event.touches[1].clientY,
-            );
-            this._touches[1].current.set(
-                event.touches[1].clientX,
-                event.touches[1].clientY,
-            );
-            this._touches[1].delta.copy(
-                this._touches[1].current.clone().sub(this._touches[1].start),
-            );
-        }
-
-        if (this._touchCount === 2) {
-            this.handleRotateMoved();
-            this.handlePinchMoved();
-        }
-
-        if (this._touchCount === 1) {
-            this.dispatch('TOUCH_MOVE', {
-                touches: [
-                    {
-                        current: this._touches[0].current.clone(),
-                        delta: this._touches[0].delta.clone(),
-                    },
-                    {
-                        current: this._touches[1].current.clone(),
-                        delta: this._touches[1].delta.clone(),
-                    },
-                ],
-                touchCount: this._touchCount,
-            });
-        }
-
-        if (this._touchCount === 2) {
-            if (this._handleRotateMoved) {
-                this.dispatch('ROTATE_MOVE', {
-                    current: this._lastAngle,
-                    delta: this._angleDelta,
-                });
-                this._handleRotateMoved = false;
-            }
-
-            if (this._handlePinchMoved) {
-                this.dispatch('PINCH_MOVE', {
-                    current: this._currentDistance,
-                    delta: this._deltaDistance,
-                });
-                this._handlePinchMoved = false;
-            }
-        }
-    }
-
-    private onTouchEnd(event: TouchEvent): void {
-        this._touchCount = event.touches.length;
-
-        if (this._touchCount === 0) {
-            this._touches[0].start.set(0, 0);
-            this._touches[0].current.set(0, 0);
-            this._touches[0].delta.set(0, 0);
-        }
-
-        if (this._touchCount === 1) {
-            this.handleRotateEnded();
-            this.handlePinchEnded();
-
-            this._touches[1].start.set(0, 0);
-            this._touches[1].current.set(0, 0);
-            this._touches[1].delta.set(0, 0);
-        }
-
-        if (this._handleRotateEnded) {
-            this.dispatch('ROTATE_END', {
-                current: this._lastAngle,
-            });
-            this._handleRotateEnded = false;
-        }
-
-        if (this._handlePinchEnded) {
-            this.dispatch('PINCH_END', {
-                current: this._currentDistance,
-            });
-            this._handlePinchEnded = false;
-        }
-    }
-
-    private onSessionSelectStart(): void {
-        this.dispatch('TOUCH_START', {
-            touches: [
-                {
-                    current: this._touches[0].current.clone(),
-                },
-                {
-                    current: this._touches[1].current.clone(),
-                },
-            ],
-            touchCount: this._touchCount,
-        });
-    }
-
-    private onSessionSelectEnd(): void {
-        this.dispatch('TOUCH_END', {
-            touches: [
-                {
-                    current: this._touches[0].current.clone(),
-                },
-                {
-                    current: this._touches[1].current.clone(),
-                },
-            ],
-            touchCount: this._touchCount,
-        });
-    }
-
-    // rotation handler
-    private handleRotateStart(): void {
-        this._handleRotateStarted = true;
-        this._startAngle = this._touches[1].start
-            .clone()
-            .sub(this._touches[0].current)
-            .angle();
-    }
-
-    private handleRotateMoved(): void {
-        this._handleRotateMoved = true;
-        const currentAngle = this._touches[1].current
-            .clone()
-            .sub(this._touches[0].current)
-            .angle();
-        this._angleDelta = currentAngle - this._startAngle;
-        this._lastAngle = this._angleDelta * -1;
-    }
-
-    private handleRotateEnded(): void {
-        this._handleRotateEnded = true;
-    }
-
-    // pinch handler
-    private handlePinchStart(): void {
-        this._handlePinchStarted = true;
-
-        this._scaleDistanceStart = this._touches[1].start.distanceTo(
-            this._touches[0].current,
-        );
-    }
-
-    private handlePinchMoved(): void {
-        this._handlePinchMoved = true;
-
-        const beforeDistance = this._currentDistance;
-        const distance = this._touches[1].current.distanceTo(
-            this._touches[0].current,
-        );
-        this._currentDistance = distance / this._scaleDistanceStart;
-        this._deltaDistance = this._currentDistance - beforeDistance;
-    }
-
-    private handlePinchEnded(): void {
-        this._handlePinchEnded = true;
-    }
-}

package/src/axiscamera/AxisCamera.ts

@@ -1,108 +0,0 @@
-import {
-    AxesHelper,
-    Color,
-    type 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 { type DIVERenderer } from '../renderer/Renderer.ts';
-import { type DIVEScene } from '../scene/Scene.ts';
-import type DIVEOrbitControls from '../controls/OrbitControls.ts';
-
-/**
- * Shows the scene axes in the bottom left corner of the screen.
- *
- * @module
- */
-
-export default class DIVEAxisCamera extends OrthographicCamera {
-    private axesHelper: AxesHelper;
-
-    private _renderer: DIVERenderer;
-    private _scene: DIVEScene;
-
-    private _renderCallbackId: string;
-
-    constructor(
-        renderer: DIVERenderer,
-        scene: DIVEScene,
-        controls: DIVEOrbitControls,
-    ) {
-        super(-1, 1, 1, -1, 0.1, 100);
-
-        this.layers.mask = COORDINATE_LAYER_MASK;
-
-        this.axesHelper = new AxesHelper(0.5);
-        this.axesHelper.layers.mask = COORDINATE_LAYER_MASK;
-        (this.axesHelper.material as Material).depthTest = false; // always draw
-        this.axesHelper.position.set(0, 0, -1);
-
-        this.axesHelper.setColors(
-            new Color(AxesColorRed),
-            new Color(AxesColorGreen),
-            new Color(AxesColorBlue),
-        );
-
-        const x = new SpriteText('X', 0.2, AxesColorRedLetter);
-        const y = new SpriteText('Y', 0.2, AxesColorGreenLetter);
-        const z = new SpriteText('Z', 0.2, AxesColorBlueLetter);
-        x.layers.mask = COORDINATE_LAYER_MASK;
-        y.layers.mask = COORDINATE_LAYER_MASK;
-        z.layers.mask = COORDINATE_LAYER_MASK;
-        x.position.set(0.7, 0, 0);
-        y.position.set(0, 0.7, 0);
-        z.position.set(0, 0, 0.7);
-        this.axesHelper.add(x);
-        this.axesHelper.add(y);
-        this.axesHelper.add(z);
-
-        this.add(this.axesHelper);
-
-        // attach everything to current scene and render cycle
-        this._renderer = renderer;
-        this._scene = scene;
-        this._scene.add(this);
-
-        const restoreViewport = new Vector4();
-
-        this._renderCallbackId = renderer.AddPostRenderCallback(() => {
-            const restoreBackground = scene.background;
-            scene.background = null;
-
-            renderer.getViewport(restoreViewport);
-            renderer.setViewport(0, 0, 150, 150);
-            renderer.autoClear = false;
-
-            this.SetFromCameraMatrix(controls.object.matrix);
-
-            renderer.render(scene, this);
-
-            renderer.setViewport(restoreViewport);
-            renderer.autoClear = true;
-
-            scene.background = restoreBackground;
-        });
-    }
-
-    public Dispose(): void {
-        this._renderer.RemovePostRenderCallback(this._renderCallbackId);
-        this._scene.remove(this);
-    }
-
-    public SetFromCameraMatrix(matrix: Matrix4): void {
-        this.axesHelper.rotation.setFromRotationMatrix(
-            new Matrix4().extractRotation(matrix).invert(),
-        );
-    }
-}

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

@@ -1,150 +0,0 @@
-import { AxesHelper, Matrix4, OrthographicCamera, Vector4 } from 'three';
-import DIVEAxisCamera from '../AxisCamera';
-import { DIVERenderer } from '../../renderer/Renderer';
-import { DIVEScene } from '../../scene/Scene';
-import DIVEOrbitControls from '../../controls/OrbitControls';
-
-const mockRenderer = {
-    render: jest.fn(),
-    OnResize: jest.fn(),
-    getViewport: jest.fn(),
-    setViewport: jest.fn(),
-    AddPostRenderCallback: jest.fn((callback) => {
-        callback();
-    }),
-    RemovePostRenderCallback: jest.fn(),
-} as unknown as DIVERenderer;
-
-const mockScene = {
-    add: jest.fn(),
-    remove: jest.fn(),
-    SetBackground: jest.fn(),
-    AddSceneObject: jest.fn(),
-    UpdateSceneObject: jest.fn(),
-    DeleteSceneObject: jest.fn(),
-    PlaceOnFloor: jest.fn(),
-    GetSceneObject: jest.fn(),
-    background: {
-        getHexString: jest.fn().mockReturnValue('ffffff'),
-    },
-    Root: {
-        Floor: {
-            isFloor: true,
-            visible: true,
-            material: {
-                color: {
-                    getHexString: jest.fn().mockReturnValue('ffffff'),
-                },
-            },
-            SetVisibility: jest.fn(),
-            SetColor: jest.fn(),
-        },
-        Grid: {
-            SetVisibility: jest.fn(),
-        },
-        HelperRoot: {
-            add: jest.fn(),
-            remove: jest.fn(),
-        },
-    },
-} as unknown as DIVEScene;
-
-const mockController = {
-    enableDamping: true,
-    dampingFactor: 0.25,
-    enableZoom: true,
-    enablePan: true,
-    minPolarAngle: 0,
-    maxPolarAngle: Math.PI,
-    minDistance: 0,
-    maxDistance: Infinity,
-    rotateSpeed: 0.5,
-    panSpeed: 0.5,
-    zoomSpeed: 0.5,
-    keyPanSpeed: 0.5,
-    screenSpacePanning: true,
-    autoRotate: false,
-    autoRotateSpeed: 2.0,
-    enableKeys: true,
-    keys: {
-        LEFT: 37,
-        UP: 38,
-        RIGHT: 39,
-        BOTTOM: 40,
-    },
-    mouseButtons: {
-        LEFT: 0,
-        MIDDLE: 1,
-        RIGHT: 2,
-    },
-    target: {
-        x: 4,
-        y: 5,
-        z: 6,
-        set: jest.fn(),
-        clone: jest.fn().mockReturnValue({ x: 4, y: 5, z: 6 }),
-        copy: jest.fn(),
-    },
-    update: jest.fn(),
-    dispose: jest.fn(),
-    ZoomIn: jest.fn(),
-    ZoomOut: jest.fn(),
-    object: {
-        position: {
-            x: 1,
-            y: 2,
-            z: 3,
-            clone: jest.fn().mockReturnValue({ x: 1, y: 2, z: 3 }),
-            copy: jest.fn(),
-        },
-        quaternion: {
-            x: 1,
-            y: 2,
-            z: 3,
-            w: 4,
-            clone: jest.fn().mockReturnValue({ x: 1, y: 2, z: 3, w: 4 }),
-            copy: jest.fn(),
-        },
-        SetCameraLayer: jest.fn(),
-        OnResize: jest.fn(),
-        layers: {
-            mask: 1,
-        },
-    },
-    MoveTo: jest.fn(),
-    RevertLast: jest.fn(),
-} as unknown as DIVEOrbitControls;
-
-let textAxisCamera: DIVEAxisCamera;
-
-describe('dive/axiscamera/DIVEAxisCamera', () => {
-    beforeEach(() => {
-        textAxisCamera = new DIVEAxisCamera(
-            mockRenderer,
-            mockScene,
-            mockController,
-        );
-    });
-
-    it('should instantiate', () => {
-        expect(textAxisCamera).toBeDefined();
-    });
-
-    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,
-                0, 0, 1, 0,
-                0, 0, 0, 1,
-            ],
-        } as Matrix4;
-        textAxisCamera.SetFromCameraMatrix(matrix);
-    });
-
-    it('should dispose', () => {
-        textAxisCamera.Dispose();
-    });
-});

package/src/camera/PerspectiveCamera.ts

@@ -1,63 +0,0 @@
-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: 70,
-        near: 0.1,
-        far: 1000,
-    };
-
-/**
- * A Perspective camera. Can change the layer mask to show different objects.
- *
- * @module
- */
-
-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 LIVE_VIEW_LAYER_MASK = PRODUCT_LAYER_MASK;
-
-    public onSetCameraLayer: (mask: number) => void = () => {};
-
-    constructor(
-        settings: Partial<DIVEPerspectiveCameraSettings> = DIVEPerspectiveCameraDefaultSettings,
-    ) {
-        super(
-            settings.fov || DIVEPerspectiveCameraDefaultSettings.fov,
-            1,
-            settings.near || DIVEPerspectiveCameraDefaultSettings.near,
-            settings.far || DIVEPerspectiveCameraDefaultSettings.far,
-        );
-
-        this.layers.mask = DIVEPerspectiveCamera.EDITOR_VIEW_LAYER_MASK;
-    }
-
-    public OnResize(width: number, height: number): void {
-        this.aspect = width / height;
-        this.updateProjectionMatrix();
-    }
-
-    public SetCameraLayer(layer: 'LIVE' | 'EDITOR'): void {
-        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,36 +0,0 @@
-import DIVEPerspectiveCamera from '../PerspectiveCamera';
-
-let cam: DIVEPerspectiveCamera;
-
-describe('dive/camera/DIVEPerspectiveCamera', () => {
-    beforeEach(() => {
-        jest.clearAllMocks();
-        cam = new DIVEPerspectiveCamera();
-    });
-
-    it('should instantiate', () => {
-        cam = new DIVEPerspectiveCamera({});
-        expect(cam).toBeDefined();
-    });
-
-    it('should instantiate with settings', () => {
-        cam = new DIVEPerspectiveCamera({
-            fov: 45,
-            near: 0.1,
-            far: 100,
-        });
-        expect(cam).toBeDefined();
-    });
-
-    it('should resize', () => {
-        const spy = jest.spyOn(cam, 'updateProjectionMatrix');
-        expect(() => cam.OnResize(800, 600)).not.toThrow();
-        expect(cam.aspect).toBe(800 / 600);
-        expect(spy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should set camera layer', () => {
-        expect(() => cam.SetCameraLayer('LIVE')).not.toThrow();
-        expect(() => cam.SetCameraLayer('EDITOR')).not.toThrow();
-    });
-});