@shopware-ag/dive 1.18.2 → 1.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@shopware-ag/dive",
-    "version": "1.18.2",
+    "version": "1.18.3",
     "description": "Shopware Spatial Framework",
     "type": "module",
     "main": "./build/dive.cjs",

package/src/com/Communication.ts

@@ -268,6 +268,12 @@ export class DIVECommunication {
                 );
                 break;
             }
+            case 'SET_GIZMO_SCALE_LINKED': {
+                returnValue = this.setGizmoScaleLinked(
+                    payload as Actions['SET_GIZMO_SCALE_LINKED']['PAYLOAD'],
+                );
+                break;
+            }
             case 'USE_TOOL': {
                 returnValue = this.useTool(
                     payload as Actions['USE_TOOL']['PAYLOAD'],
@@ -664,6 +670,14 @@ export class DIVECommunication {
         return payload;
     }
 
+    private setGizmoScaleLinked(
+        payload: Actions['SET_GIZMO_SCALE_LINKED']['PAYLOAD'],
+    ): Actions['SET_GIZMO_SCALE_LINKED']['RETURN'] {
+        console.log('SET_GIZMO_SCALE_LINKED', payload);
+        this.toolbox.SetGizmoScaleLinked(payload);
+        return payload;
+    }
+
     private useTool(
         payload: Actions['USE_TOOL']['PAYLOAD'],
     ): Actions['USE_TOOL']['RETURN'] {

package/src/com/actions/index.ts

@@ -20,6 +20,7 @@ import DESELECT_OBJECT from './object/deselectobject.ts';
 import GET_CAMERA_TRANSFORM from './camera/getcameratransform.ts';
 import DROP_IT from './object/model/dropit.ts';
 import SET_GIZMO_VISIBILITY from './toolbox/transform/setgizmovisible.js';
+import SET_GIZMO_SCALE_LINKED from './toolbox/transform/setgizmoscalelinked.ts';
 import COMPUTE_ENCOMPASSING_VIEW from './camera/computeencompassingview.ts';
 import USE_TOOL from './toolbox/usetool.ts';
 import SET_PARENT from './object/setparent.ts';
@@ -47,6 +48,7 @@ export interface Actions {
     ZOOM_CAMERA: ZOOM_CAMERA;
     SET_GIZMO_MODE: SET_GIZMO_MODE;
     SET_GIZMO_VISIBILITY: SET_GIZMO_VISIBILITY;
+    SET_GIZMO_SCALE_LINKED: SET_GIZMO_SCALE_LINKED;
     USE_TOOL: USE_TOOL;
     MODEL_LOADED: MODEL_LOADED;
     UPDATE_SCENE: UPDATE_SCENE;

package/src/com/actions/toolbox/transform/setgizmoscalelinked.ts

@@ -0,0 +1,5 @@
+export default interface SET_GIZMO_SCALE_LINKED {
+    DESCRIPTION: "Sets the gizmo's unified scale mode.";
+    PAYLOAD: boolean;
+    RETURN: boolean;
+}

package/src/toolbox/Toolbox.ts

@@ -79,6 +79,10 @@ export default class DIVEToolbox {
         this.selectTool.SetGizmoVisibility(active);
     }
 
+    public SetGizmoScaleLinked(linked: boolean): void {
+        this.selectTool.SetGizmoScaleLinked(linked);
+    }
+
     public onPointerMove(e: PointerEvent): void {
         this._activeTool?.onPointerMove(e);
     }

package/src/toolbox/__test__/Toolbox.test.ts

@@ -17,6 +17,7 @@ jest.mock('../select/SelectTool.ts', () => {
             this.onWheel = jest.fn();
             this.SetGizmoMode = jest.fn();
             this.SetGizmoVisibility = jest.fn();
+            this.SetGizmoScaleLinked = jest.fn();
             return this;
         }),
     };
@@ -134,4 +135,9 @@ describe('dive/toolbox/DIVEToolBox', () => {
         const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
         expect(() => toolBox.SetGizmoVisibility(true)).not.toThrow();
     });
+
+    it('should set gizmo unified scale', () => {
+        const toolBox = new DIVEToolbox({} as DIVEScene, mockController);
+        expect(() => toolBox.SetGizmoScaleLinked(true)).not.toThrow();
+    });
 });

package/src/toolbox/transform/TransformTool.ts

@@ -5,6 +5,12 @@ import { TransformControls } from 'three/examples/jsm/controls/TransformControls
 import { type DIVEMovable } from '../../interface/Movable.ts';
 import { implementsInterface } from '../../helper/isInterface/implementsInterface.ts';
 import { DIVEGizmo } from '../../gizmo/Gizmo.ts';
+import { type Mesh, type MeshBasicMaterial } from 'three';
+import {
+    AxesColorBlue,
+    AxesColorGreen,
+    AxesColorRed,
+} from '../../constant/AxisHelperColors.ts';
 
 export const isTransformTool = (
     tool: DIVEBaseTool,
@@ -27,13 +33,17 @@ export interface DIVEObjectEventMap {
 export default class DIVETransformTool extends DIVEBaseTool {
     readonly isTransformTool: boolean = true;
 
+    private _scaleLinked: boolean;
+
     protected _gizmo: TransformControls | DIVEGizmo;
 
     constructor(scene: DIVEScene, controller: DIVEOrbitControls) {
         super(scene, controller);
         this.name = 'DIVETransformTool';
 
-        this._gizmo = this.initGizmo();
+        this._scaleLinked = false;
+
+        this._gizmo = this.initGizmo() as TransformControls;
 
         this._scene.add(this._gizmo);
     }
@@ -63,6 +73,10 @@ export default class DIVETransformTool extends DIVEBaseTool {
         }
     }
 
+    public SetGizmoScaleLinked(linked: boolean): void {
+        this._scaleLinked = linked;
+    }
+
     // only used for optimizing pointer events with DIVEGizmo
     // public onPointerDown(e: PointerEvent): void {
     //     super.onPointerDown(e);
@@ -88,6 +102,31 @@ export default class DIVETransformTool extends DIVEBaseTool {
         // g.debug = true;
         g.mode = 'translate';
 
+        g.traverse((child) => {
+            if (!('isMesh' in child)) return;
+
+            const material = (child as Mesh).material as MeshBasicMaterial;
+
+            if (child.name === 'X') {
+                material.color.set(AxesColorRed);
+            }
+            if (child.name === 'Y') {
+                material.color.set(AxesColorGreen);
+            }
+            if (child.name === 'Z') {
+                material.color.set(AxesColorBlue);
+            }
+            if (child.name === 'XY') {
+                material.color.set(AxesColorBlue);
+            }
+            if (child.name === 'YZ') {
+                material.color.set(AxesColorRed);
+            }
+            if (child.name === 'XZ') {
+                material.color.set(AxesColorGreen);
+            }
+        });
+
         // happens when pointerDown event is called on gizmo
         g.addEventListener('mouseDown', () => {
             this._controller.enabled = false;
@@ -104,6 +143,12 @@ export default class DIVETransformTool extends DIVEBaseTool {
                 return;
             if (!g.object.onMove) return;
             g.object.onMove();
+
+            if (this._scaleLinked) {
+                const scale = g.object.scale;
+                const averageScale = (scale.x + scale.y + scale.z) / 3;
+                g.object.scale.set(averageScale, averageScale, averageScale);
+            }
         });
 
         // happens when pointerUp event is called on gizmo

package/src/toolbox/transform/__test__/TransformTool.test.ts

@@ -6,6 +6,7 @@ import { DIVERenderer } from '../../../renderer/Renderer';
 import { type DIVEBaseTool } from '../../BaseTool';
 import { Tween } from '@tweenjs/tween.js';
 import { DIVEAnimationSystem } from '../../../animation/AnimationSystem';
+import { type TransformControls } from 'three/examples/jsm/controls/TransformControls';
 
 jest.mock('../../../renderer/Renderer', () => {
     return jest.fn(function () {
@@ -129,4 +130,18 @@ describe('dive/toolbox/select/DIVETransformTool', () => {
 
         expect(() => transformTool.SetGizmoVisibility(false)).not.toThrow();
     });
+
+    it('should set gizmo unified scaling', () => {
+        expect(() => transformTool.SetGizmoScaleLinked(true)).not.toThrow();
+
+        // mock that gizmo is in scene
+        jest.spyOn(mockScene.children, 'includes').mockReturnValueOnce(true);
+
+        expect(() => transformTool.SetGizmoVisibility(false)).not.toThrow();
+    });
+
+    it('should scale unified if linked', () => {
+        transformTool.SetGizmoScaleLinked(true);
+        transformTool['initGizmo']();
+    });
 });