Skip to content

Commit

Permalink
Merge pull request #58 from shopware/bug/invisible-gizmo-transform
Browse files Browse the repository at this point in the history 
Bug: Invisible gizmo can still transform
  • Loading branch information
@ffrank913
ffrank913 authored Jan 6, 2025
2 parents 2e13125 + 734d6fc commit 73fb495
Show file tree
Hide file tree
Showing 14 changed files with 998 additions and 127 deletions.
9 changes: 9 additions & 0 deletions .github/workflows/ci.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,15 @@ jobs:
run: yarn
- name: Unit-Test DIVE (coverage)
run: yarn coverage
- name: Upload coverage reports to Codecov
uses: codecov/codecov-action@v5
with:
token: ${{ secrets.CODECOV_TOKEN }}
- name: Upload test results to Codecov
if: ${{ !cancelled() }}
uses: codecov/test-results-action@v1
with:
token: ${{ secrets.CODECOV_TOKEN }}
prettier-check:
runs-on: ubuntu-latest
needs: install
Expand Down
779 changes: 779 additions & 0 deletions junit.xml
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"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",
Expand Down
6 changes: 6 additions & 0 deletions src/gizmo/Gizmo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ export class DIVEGizmo extends Object3D {
this.assemble();
}

public set debug(value: boolean) {
this._translateGizmo.debug = value;
this._rotateGizmo.debug = value;
this._scaleGizmo.debug = value;
}

private _gizmoNode: Object3D;
public get gizmoNode(): Object3D {
return this._gizmoNode;
Expand Down
22 changes: 14 additions & 8 deletions src/gizmo/handles/AxisHandle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export class DIVEAxisHandle
readonly isHoverable: true = true;
readonly isDraggable: true = true;

public set debug(value: boolean) {
this._colliderMesh.visible = value;
}

public parent: DIVETranslateGizmo | null = null;

public axis: 'x' | 'y' | 'z';
Expand All @@ -39,6 +43,8 @@ export class DIVEAxisHandle

private _lineMaterial: MeshBasicMaterial;

private _colliderMesh: Mesh;

public get forwardVector(): Vector3 {
return new Vector3(0, 0, 1)
.applyQuaternion(this.quaternion)
Expand Down Expand Up @@ -89,21 +95,21 @@ export class DIVEAxisHandle
this.add(lineMesh);

// create collider
const collider = new CylinderGeometry(0.1, 0.1, length, 3);
const colliderGeo = new CylinderGeometry(0.1, 0.1, length, 3);
const colliderMaterial = new MeshBasicMaterial({
color: 0xff00ff,
transparent: true,
opacity: 0.15,
depthTest: false,
depthWrite: false,
});
const colliderMesh = new Mesh(collider, colliderMaterial);
colliderMesh.visible = false;
colliderMesh.layers.mask = UI_LAYER_MASK;
colliderMesh.renderOrder = Infinity;
colliderMesh.rotateX(Math.PI / 2);
colliderMesh.translateY(length / 2);
this.add(colliderMesh);
this._colliderMesh = new Mesh(colliderGeo, colliderMaterial);
this._colliderMesh.visible = false;
this._colliderMesh.layers.mask = UI_LAYER_MASK;
this._colliderMesh.renderOrder = Infinity;
this._colliderMesh.rotateX(Math.PI / 2);
this._colliderMesh.translateY(length / 2);
this.add(this._colliderMesh);

this.rotateX((direction.y * -Math.PI) / 2);
this.rotateY((direction.x * Math.PI) / 2);
Expand Down
18 changes: 12 additions & 6 deletions src/gizmo/handles/RadialHandle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ export class DIVERadialHandle
readonly isHoverable: true = true;
readonly isDraggable: true = true;

public set debug(value: boolean) {
this._colliderMesh.visible = value;
}

public parent: DIVERotateGizmo | null = null;

public axis: 'x' | 'y' | 'z';
Expand All @@ -39,6 +43,8 @@ export class DIVERadialHandle

private _lineMaterial: MeshBasicMaterial;

private _colliderMesh: Mesh;

public get forwardVector(): Vector3 {
return new Vector3(0, 0, 1)
.applyQuaternion(this.quaternion)
Expand Down Expand Up @@ -87,20 +93,20 @@ export class DIVERadialHandle
this.add(lineMesh);

// create collider
const collider = new TorusGeometry(radius, 0.1, 3, 48, arc);
const colliderGeo = new TorusGeometry(radius, 0.1, 3, 48, arc);
const colliderMaterial = new MeshBasicMaterial({
color: 0xff00ff,
transparent: true,
opacity: 0.15,
depthTest: false,
depthWrite: false,
});
const colliderMesh = new Mesh(collider, colliderMaterial);
colliderMesh.visible = false;
colliderMesh.layers.mask = UI_LAYER_MASK;
colliderMesh.renderOrder = Infinity;
this._colliderMesh = new Mesh(colliderGeo, colliderMaterial);
this._colliderMesh.visible = false;
this._colliderMesh.layers.mask = UI_LAYER_MASK;
this._colliderMesh.renderOrder = Infinity;

this.add(colliderMesh);
this.add(this._colliderMesh);

this.lookAt(direction);
}
Expand Down
22 changes: 14 additions & 8 deletions src/gizmo/handles/ScaleHandle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export class DIVEScaleHandle
readonly isHoverable: true = true;
readonly isDraggable: true = true;

public set debug(value: boolean) {
this._colliderMesh.visible = value;
}

public parent: DIVEScaleGizmo | null = null;

public axis: 'x' | 'y' | 'z';
Expand All @@ -40,6 +44,8 @@ export class DIVEScaleHandle

private _lineMaterial: MeshBasicMaterial;

private _colliderMesh: Mesh;

private _box: Mesh;
private _boxSize: number;

Expand Down Expand Up @@ -113,7 +119,7 @@ export class DIVEScaleHandle
this.add(this._box);

// create collider
const collider = new CylinderGeometry(
const colliderGeo = new CylinderGeometry(
0.1,
0.1,
length + boxSize / 2,
Expand All @@ -126,13 +132,13 @@ export class DIVEScaleHandle
depthTest: false,
depthWrite: false,
});
const colliderMesh = new Mesh(collider, colliderMaterial);
colliderMesh.visible = false;
colliderMesh.layers.mask = UI_LAYER_MASK;
colliderMesh.renderOrder = Infinity;
colliderMesh.rotateX(Math.PI / 2);
colliderMesh.translateY(length / 2);
this.add(colliderMesh);
this._colliderMesh = new Mesh(colliderGeo, colliderMaterial);
this._colliderMesh.visible = false;
this._colliderMesh.layers.mask = UI_LAYER_MASK;
this._colliderMesh.renderOrder = Infinity;
this._colliderMesh.rotateX(Math.PI / 2);
this._colliderMesh.translateY(length / 2);
this.add(this._colliderMesh);

this.rotateX((direction.y * -Math.PI) / 2);
this.rotateY((direction.x * Math.PI) / 2);
Expand Down
6 changes: 6 additions & 0 deletions src/gizmo/rotate/RotateGizmo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ export class DIVERotateGizmo extends Object3D {

private _controller: DIVEOrbitControls;

public set debug(value: boolean) {
this.children.forEach((child) => {
child.debug = value;
});
}

private _startRot: Euler | null;

constructor(controller: DIVEOrbitControls) {
Expand Down
6 changes: 6 additions & 0 deletions src/gizmo/scale/ScaleGizmo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ export class DIVEScaleGizmo extends Object3D implements DIVEHoverable {

private _controller: DIVEOrbitControls;

public set debug(value: boolean) {
this.children.forEach((child) => {
child.debug = value;
});
}

private _startScale: Vector3 | null;

constructor(controller: DIVEOrbitControls) {
Expand Down
6 changes: 6 additions & 0 deletions src/gizmo/translate/TranslateGizmo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ import { DraggableEvent } from '../../toolbox/BaseTool';
export class DIVETranslateGizmo extends Object3D {
private _controller: DIVEOrbitControls;

public set debug(value: boolean) {
this.children.forEach((child) => {
child.debug = value;
});
}

public children: DIVEAxisHandle[];

private _startPos: Vector3 | null;
Expand Down
59 changes: 32 additions & 27 deletions src/toolbox/select/__test__/SelectTool.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,31 +103,37 @@ const mock_detach = jest.fn();
jest.mock('three/examples/jsm/controls/TransformControls', () => {
return {
TransformControls: jest.fn(function () {
(this.addEventListener = (
type: string,
callback: (e: object) => void,
) => {
callback({ value: false });
this.object = {};
callback({ value: false });
this.object = {
onMove: 'hello',
};
callback({ value: false });
this.object = {
onMove: jest.fn(),
};
callback({ value: false });
}),
(this.attach = mock_attach),
(this.detach = mock_detach),
(this.traverse = function (callback: (obj: object) => void) {
callback(this);
});
this.isTransformControls = true;
this.addEventListener = jest.fn(
(type: string, callback: (e: object) => void) => {
callback({ value: false });
this.object = {};
callback({ value: false });
this.object = {
onMove: 'hello',
};
callback({ value: false });
this.object = {
onMove: jest.fn(),
};
callback({ value: false });
},
);
this.attach = jest.fn((object) => {
this.object = object;
});
this.detach = jest.fn(() => {
this.object = null;
});
this.traverse = function (callback: (obj: object) => void) {
callback(this);
};
this.setMode = jest.fn();
this.getRaycaster = jest.fn().mockReturnValue({
layers: {
mask: 0,
disableAll: jest.fn(),
enableAll: jest.fn(),
},
});
this.layers = {
Expand Down Expand Up @@ -169,8 +175,7 @@ describe('dive/toolbox/select/DIVESelectTool', () => {

it('should execute onClick without hit', () => {
const selectTool = new DIVESelectTool(mockScene, mockController);
selectTool['_gizmo'].object = {} as unknown as Object3D &
DIVESelectable;
selectTool.AttachGizmo({} as unknown as DIVESelectable);
expect(() =>
selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent),
).not.toThrow();
Expand Down Expand Up @@ -213,11 +218,11 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
},
]);
const selectTool = new DIVESelectTool(mockScene, mockController);
selectTool['_gizmo'].object = {
selectTool.AttachGizmo({
visible: true,
isSelectable: true,
uuid: 'test0',
} as unknown as Object3D & DIVESelectable;
} as unknown as Object3D & DIVESelectable);
expect(() =>
selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent),
).not.toThrow();
Expand All @@ -241,10 +246,10 @@ describe('dive/toolbox/select/DIVESelectTool', () => {
},
]);
const selectTool = new DIVESelectTool(mockScene, mockController);
selectTool['_gizmo'].object = {
selectTool.AttachGizmo({
isSelectable: true,
uuid: 'test1',
} as unknown as Object3D & DIVESelectable;
} as unknown as Object3D & DIVESelectable);
expect(() =>
selectTool.onClick({ offsetX: 0, offsetY: 0 } as PointerEvent),
).not.toThrow();
Expand Down
Loading

0 comments on commit 73fb495

Please sign in to comment.