Skip to content

Commit

Permalink
chore(pre-release): merge #301 from dev
Browse files Browse the repository at this point in the history
### Description

- refactor(reactive): improve debug resources
  • Loading branch information
Neosoulink authored Jan 12, 2025
2 parents c21d8dc + 0871ce0 commit 3b56fe8
Show file tree
Hide file tree
Showing 18 changed files with 457 additions and 299 deletions.
13 changes: 13 additions & 0 deletions .changeset/cyan-donuts-cover.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
"@quick-threejs/reactive": patch
---

# Logs

## refactor(reactive): improve debug resources

- Add new register props
- `enableControls`
- `withCameraHelper`
- `miniCamera` is now under **Debug** scope
- Fix debug props usage
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,12 @@
"prettier": "^3.4.2",
"turbo": "latest",
"typescript": "^5.6.3",
"typescript-eslint": "^8.10.0",
"typescript-eslint": "^8.19.1",
"vite": "^6.0.3",
"vite-plugin-dts": "^4.3.0"
},
"dependencies": {
"@changesets/cli": "^2.27.9"
"@changesets/cli": "^2.27.11"
},
"packageManager": "[email protected]",
"engines": {
Expand Down
4 changes: 2 additions & 2 deletions packages/legacy/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@
"test": "jest --passWithNoTests"
},
"dependencies": {
"three": "^0.171.0"
"three": "^0.172.0"
},
"devDependencies": {
"@babel/preset-env": "^7.26.0",
"@quick-threejs/config": "workspace:*",
"@types/events": "^3.0.3",
"@types/jest": "^29.5.14",
"@types/stats.js": "^0.17.3",
"@types/three": "^0.171.0",
"@types/three": "^0.172.0",
"babel-jest": "^29.7.0",
"events": "^3.3.0",
"jest": "^29.7.0",
Expand Down
6 changes: 3 additions & 3 deletions packages/reactive/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,19 @@
"@quick-threejs/utils": "workspace:*",
"rxjs": "^7.8.1",
"threads": "^1.7.0",
"three": "^0.171.0",
"three": "^0.172.0",
"vite-plugin-glslify": "^2.1.0"
},
"peerDependencies": {
"three": "^0.171.0"
"three": "^0.172.0"
},
"devDependencies": {
"@quick-threejs/config": "workspace:*",
"@types/events": "^3.0.3",
"@types/jest": "^29.5.14",
"@types/node": "^22.10.2",
"@types/stats.js": "^0.17.3",
"@types/three": "^0.171.0",
"@types/three": "^0.172.0",
"babel-jest": "^29.7.0",
"events": "^3.3.0",
"jest": "^29.7.0",
Expand Down
25 changes: 24 additions & 1 deletion packages/reactive/src/common/blueprints/props.blueprint.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,22 @@ export class RegisterPropsBlueprint {
/**
* @description Enable the debug mode
*
* @remark __Deactivated if the value is `false` or `undefined`__
*
* @default undefined
*/
enableDebug?: boolean;

/**
* Will enable orbit controls for the cameras.
*
* @remark __Deactivated if the value is `false` or `undefined`__
* @remark __This property depends on {@link RegisterPropsBlueprint.enableDebug enableDebug}__
*
* @default undefined
*/
enableControls?: boolean;

/**
* Define the {@link THREE.AxesHelper} sizes.
*
Expand All @@ -96,12 +108,23 @@ export class RegisterPropsBlueprint {
/**
* Display a mini perfective camera at the top right corner of the screen.
*
* @remark __Deactivated if the value is `false` or `undefined`__
* @remark __This property depends on {@link RegisterPropsBlueprint.enableDebug enableDebug}__
*
* @default false
* @default undefined
*/
withMiniCamera?: boolean;

/**
* Display the camera helper.
*
* @remark __Deactivated if the value is `false` or `undefined`__
* @remark __This property depends on {@link RegisterPropsBlueprint.enableDebug enableDebug}__
*
* @default undefined
*/
withCameraHelper?: boolean;

/**
* @description Handler called when the app is ready.
*
Expand Down
2 changes: 1 addition & 1 deletion packages/reactive/src/core/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export class AppModule
this._service.initialized = true;

this.sizes.init(this._service.canvas);
this.camera.init(props.withMiniCamera);
this.camera.init();
this.world.init();
this.renderer.init(this._service.canvas);
this.timer.init(props.startTimer);
Expand Down
50 changes: 24 additions & 26 deletions packages/reactive/src/core/app/camera/camera.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,57 +11,50 @@ import { CameraService } from "./camera.service";
import { CameraController } from "./camera.controller";
import { SizesService } from "../sizes/sizes.service";
import type { Module } from "../../../common/interfaces/module.interface";
import { Subscription } from "rxjs";

@singleton()
export class CameraModule implements Module {
private readonly _subscriptions: Subscription[] = [];

constructor(
@inject(SizesService) private readonly _sizesService: SizesService,
@inject(CameraController) private readonly _controller: CameraController,
@inject(CameraService) private readonly _service: CameraService
) {}

public init(withMiniCamera?: boolean) {
this._service.initDefaultCamera();
if (withMiniCamera) this._service.setMiniCamera();
public init() {
this._service.init();

this._controller.step$.subscribe(() => {
if (!this._service.enabled) return;
this._service.aspectRatio = this._sizesService.aspect;
this._subscriptions.push(
this._controller.step$.subscribe(() => {
if (!this._service.enabled) return;
this._service.aspectRatio = this._sizesService.aspect;

if (
this._service.instance instanceof PerspectiveCamera ||
this._service.instance instanceof OrthographicCamera
)
this._service.instance?.updateProjectionMatrix();
this._service.miniCamera?.updateProjectionMatrix();
});
if (
this._service.instance instanceof PerspectiveCamera ||
this._service.instance instanceof OrthographicCamera
)
this._service.instance?.updateProjectionMatrix();
})
);
}

public dispose() {
this._service.removeCamera();
this._service.removeMiniCamera();
public enabled(value?: boolean) {
if (typeof value === "boolean") this._service.enabled = value;
return this._service.enabled;
}

public aspectRatio(value?: number) {
if (value) this._service.aspectRatio = value;
return this._service.aspectRatio;
}

public enabled(value?: boolean) {
if (typeof value === "boolean") this._service.enabled = value;
return this._service.enabled;
}

public instance(value?: Camera) {
if (value) this._service.instance = value;
return this._service.instance;
}

public miniCamera(value?: PerspectiveCamera) {
if (value) this._service.miniCamera = value;
return this._service.miniCamera;
}

public position(value?: Vector3) {
if (value) this._service.position = value;
return this._service.position;
Expand All @@ -71,4 +64,9 @@ export class CameraModule implements Module {
if (value) this._service.quaternion = value;
return this._service.quaternion;
}

public dispose() {
this._subscriptions.forEach((sub) => sub.unsubscribe());
this._service.dispose();
}
}
27 changes: 3 additions & 24 deletions packages/reactive/src/core/app/camera/camera.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { DefaultCameraType } from "../../../common/enums/camera.enum";
@singleton()
export class CameraService {
public instance?: Camera;
public miniCamera?: PerspectiveCamera;
public enabled = true;

constructor(
Expand Down Expand Up @@ -42,8 +41,8 @@ export class CameraService {
this.instance?.rotation.copy(rotation);
}

public initDefaultCamera(cameraType?: DefaultCameraType) {
this.removeCamera();
public init(cameraType?: DefaultCameraType) {
this.dispose();

if (
cameraType === DefaultCameraType.PERSPECTIVE ||
Expand Down Expand Up @@ -72,20 +71,7 @@ export class CameraService {
}
}

public setMiniCamera() {
this.removeMiniCamera();

this.miniCamera = new PerspectiveCamera(
75,
this._sizesService.width / this._sizesService.height,
0.1,
500
);
this.miniCamera.position.z = 10;
this.miniCamera.position.x = -5;
}

public removeCamera() {
public dispose() {
if (!(this.instance instanceof Camera)) return;
if (
this.instance instanceof PerspectiveCamera ||
Expand All @@ -95,11 +81,4 @@ export class CameraService {
this.instance.clear();
this.instance = undefined;
}

public removeMiniCamera() {
if (!(this.miniCamera instanceof Camera)) return;
this.miniCamera.clearViewOffset();
this.miniCamera.clear();
this.miniCamera = undefined;
}
}
69 changes: 49 additions & 20 deletions packages/reactive/src/core/app/debug/debug.module.ts
Original file line number Diff line number Diff line change
@@ -1,55 +1,84 @@
import { Subscription } from "rxjs";
import { PerspectiveCamera } from "three";
import { inject, singleton } from "tsyringe";

import { Module } from "../../../common/interfaces/module.interface";
import { Module, AppModulePropsMessageEvent } from "../../../common";

import { DebugService } from "./debug.service";
import { DebugController } from "./debug.controller";

@singleton()
export class DebugModule implements Module {
private readonly _subscriptions: Subscription[] = [];

constructor(
@inject(DebugService) public readonly _service: DebugService,
@inject(DebugController) public readonly _controller: DebugController
) {
this._controller.step$.subscribe(() => {
this._service.update();
});
) {}

public init(props: AppModulePropsMessageEvent["data"]) {
this._service.enabled = !!props.enableDebug;

if (!this._service.enabled) return;

if (props.withMiniCamera) this._service.initMiniCamera();

if (props.enableControls) {
this._service.initOrbitControl();
this._service.initMiniCameraOrbitControls();
}

if (props.withCameraHelper) this._service.initCameraHelper();

if (typeof props?.axesSizes === "number")
this._service.initAxesHelper(props.axesSizes);

if (typeof props?.gridSizes === "number")
this._service.initGridHelper(props.gridSizes);

this._subscriptions.push(
this._controller.step$.subscribe(() => {
this._service.update();
})
);
}

public step$() {
return this._controller.step$;
public enabled(value?: boolean) {
if (value) this._service.enabled = value;
return this._service.enabled;
}

public init(props?: Parameters<DebugService["activate"]>[0]) {
this._service.activate(props);
public miniCamera(value?: PerspectiveCamera) {
if (value) this._service.miniCamera = value;
return this._service.miniCamera;
}

public axesHelper() {
public getAxesHelper() {
return this._service.axesHelper;
}

public cameraControls() {
public getCameraControls() {
return this._service.cameraControls;
}

public cameraHelper() {
public getCameraHelper() {
return this._service.cameraHelper;
}

public enabled(value?: boolean) {
if (value) this._service.enabled = value;
return this._service.enabled;
}

public gridHelper() {
public getGridHelper() {
return this._service.gridHelper;
}

public miniCameraControls() {
public getMiniCameraControls() {
return this._service.miniCameraControls;
}

public getStep$() {
return this._controller.step$;
}

public dispose() {
this._service.deactivate();
this._service.dispose();
this._subscriptions.forEach((sub) => sub.unsubscribe());
}
}
Loading

0 comments on commit 3b56fe8

Please sign in to comment.