fix: clean code, move all debug logic to debugger

apps/playground-2d/src/main.ts

@@ -5,7 +5,7 @@ import { FKeyboard } from '@fibbojs/event'
 import MySquare from './classes/MySquare'
 
 (async () => {
-  const scene = new FScene2d({ debug: true })
+  const scene = new FScene2d()
   await scene.init()
   await scene.initPhysics()
   // Create the debugger

apps/playground-3d/src/main.ts

@@ -7,7 +7,7 @@ import './style.css'
 
 (async () => {
   // Initialize the scene
-  const scene = new FScene3d({ debug: true })
+  const scene = new FScene3d()
   scene.init()
   await scene.initPhysics()
   // Create the debugger

packages/2d/src/FScene2d.ts

@@ -30,18 +30,16 @@ export class FScene2d extends FScene {
   // Pixi.js
   PIXI: typeof PIXI = PIXI
   app: PIXI.Application
-  viewport?: Viewport
+  declare viewport: Viewport
   // Rapier
   gravity: { x: number, y: number, z: number } = { x: 0, y: -9.81, z: 0 }
-  declare world?: World
+  declare world: World
   declare eventQueue: RAPIER.EventQueue
   __RAPIER_TO_COMPONENT__: Map<number, FComponent2d> = new Map()
   // onReadyCallbacks
   public onReadyCallbacks: (() => void)[] = []
-  // Debug
-  __DEBUG_MODE__: boolean = false
 
-  constructor(options: { debug?: boolean } = { debug: false }) {
+  constructor(_options: object = {}) {
     super()
 
     // Verify window and document are available
@@ -50,9 +48,6 @@ export class FScene2d extends FScene {
 
     // Create a new PIXI application
     this.app = new PIXI.Application()
-
-    // Store the debug mode
-    this.__DEBUG_MODE__ = options.debug || false
   }
 
   /**
@@ -103,27 +98,6 @@ export class FScene2d extends FScene {
     // Set the zoom level
     this.viewport.setZoom(0.8, true)
 
-    // Add help grid
-    if (this.__DEBUG_MODE__) {
-      const helpGrid = new PIXI.Graphics()
-      // Draw the grid
-      for (let i = -1000; i <= 1000; i += 100) {
-        helpGrid.moveTo(i, -1000)
-        helpGrid.lineTo(i, 1000)
-        helpGrid.moveTo(-1000, i)
-        helpGrid.lineTo(1000, i)
-      }
-      // Apply style
-      helpGrid.stroke({ width: 4, color: new PIXI.Color({
-        r: 70,
-        g: 70,
-        b: 70,
-        a: 1,
-      }) })
-      // Add the grid to the viewport
-      this.viewport.addChild(helpGrid)
-    }
-
     // onFrame
     this.onFrame((delta) => {
       // Call the onFrame method of each component

packages/3d/src/FScene3d.ts

@@ -42,7 +42,7 @@ export class FScene3d extends FScene {
   // Components can be declared as it will be initialized by the parent class
   declare components: FComponent3d[]
   // Three.js
-  declare THREE: typeof THREE
+  THREE: typeof THREE = THREE
   declare scene: THREE.Scene
   declare renderer: THREE.WebGLRenderer
   declare camera: FCamera3d
@@ -53,21 +53,16 @@ export class FScene3d extends FScene {
   declare world: RAPIER.World
   declare eventQueue: RAPIER.EventQueue
   __RAPIER_TO_COMPONENT__: Map<number, FComponent3d> = new Map()
-  // Debug
-  __DEBUG_MODE__: boolean
 
-  constructor(options: { debug?: boolean } = { debug: false }) {
+  constructor(_options: object = {}) {
     super()
-    this.__DEBUG_MODE__ = options.debug || false
 
     // Verify window and document are available
     if (typeof window === 'undefined' || typeof document === 'undefined')
       throw new Error('FScene must be instantiated in a browser environment')
   }
 
   init() {
-    // Attach THREE to the scene
-    this.THREE = THREE
     // Create scene, camera, and renderer
     this.scene = new THREE.Scene()
     this.scene.background = new THREE.Color(0x222324)
@@ -81,20 +76,9 @@ export class FScene3d extends FScene {
     const light = new THREE.AmbientLight(0xFFFFFF)
     this.scene.add(light)
 
-    // Debug mode
-    if (this.__DEBUG_MODE__) {
-      // Grid helper
-      const gridHelper = new THREE.GridHelper(10, 10)
-      this.scene.add(gridHelper)
-
-      // Orbit controls
-      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
-      this.controls.update()
-
-      // Axes helper
-      const axesHelper = new THREE.AxesHelper(5)
-      this.scene.add(axesHelper)
-    }
+    // Orbit controls
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
+    this.controls.update()
 
     // Add renderer to DOM
     document.body.appendChild(this.renderer.domElement)
@@ -104,11 +88,8 @@ export class FScene3d extends FScene {
       // Call onFrame for each component
       this.components.forEach(component => component.onFrame(delta))
 
-      // Debug mode
-      if (this.__DEBUG_MODE__) {
-        // Update controls
-        this.controls?.update()
-      }
+      // Update controls
+      this.controls?.update()
 
       // Camera
       this.camera.onFrame(delta)

packages/devtools/src/FDebug2d.ts

@@ -17,17 +17,36 @@ export class FDebug2d {
     // Initialize the array for the debug lines
     const DEBUG_LINES: PIXI.Graphics[] = []
 
-    scene.onFrame(() => {
-      if (!scene.world || !scene.viewport)
-        throw new Error('FScene2d must be initialized before debugging')
+    // Add help grid
+    const helpGrid = new scene.PIXI.Graphics()
+    // Draw the grid
+    for (let i = -1000; i <= 1000; i += 100) {
+      helpGrid.moveTo(i, -1000)
+      helpGrid.lineTo(i, 1000)
+      helpGrid.moveTo(-1000, i)
+      helpGrid.lineTo(1000, i)
+    }
+    // Apply style
+    helpGrid.stroke({ width: 4, color: new scene.PIXI.Color({
+      r: 70,
+      g: 70,
+      b: 70,
+      a: 1,
+    }) })
+    // Add the grid to the viewport
+    scene.viewport.addChild(helpGrid)
 
+    /**
+     * Display debug lines on each frame
+     */
+    scene.onFrame(() => {
       const buffers: DebugRenderBuffers = scene.world.debugRender()
       const debugVerticies: Float32Array = buffers.vertices
       const debugColors: Float32Array = buffers.colors
 
       // Remove the previous debug lines
       DEBUG_LINES.forEach((line) => {
-        scene.viewport?.removeChild(line)
+        scene.viewport.removeChild(line)
       })
 
       // For each line (a line is represented by 4 numbers in the vertices array)

packages/devtools/src/FDebug3d.ts

@@ -12,6 +12,17 @@ export class FDebug3d {
    * @param scene The scene to be debugged
    */
   constructor(scene: FScene3d) {
+    // Add grid helper
+    const gridHelper = new scene.THREE.GridHelper(10, 10)
+    scene.scene.add(gridHelper)
+
+    // Axes helper
+    const axesHelper = new scene.THREE.AxesHelper(5)
+    scene.scene.add(axesHelper)
+
+    /**
+     * Display debug lines on each frame
+     */
     scene.onFrame(() => {
       // Remove previous debug lines
       const previousLines = scene.scene.getObjectByName('DEBUG_LINES')