@digo-org/digo-api 1.0.49 → 1.0.50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digo-org/digo-api",
   "private": false,
-  "version": "1.0.49",
+  "version": "1.0.50",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/templates/balls.tsx

@@ -52,16 +52,16 @@ interface SizeData {
 
 class X {
   // Private fields
-  #config:                XConfig;
-  #postprocessing:        any;
-  #resizeObserver?:       ResizeObserver;
-  #intersectionObserver?: IntersectionObserver;
-  #resizeTimer?:          number;
-  #animationFrameId:      number = 0;
-  #clock:                 Clock = new Clock();
-  #animationState = { elapsed: 0, delta: 0 };
-  #isAnimating:           boolean = false;
-  #isVisible:             boolean = false;
+  private config:                XConfig;
+  private _postprocessing:       any;
+  private resizeObserver?:       ResizeObserver;
+  private intersectionObserver?: IntersectionObserver;
+  private resizeTimer?:          number;
+  private animationFrameId:      number = 0;
+  private clock:                 Clock = new Clock();
+  private animationState = { elapsed: 0, delta: 0 };
+  private isAnimating:           boolean = false;
+  private isVisible:             boolean = false;
 
   canvas!:          HTMLCanvasElement;
   camera!:          PerspectiveCamera;
@@ -81,7 +81,7 @@ class X {
     pixelRatio: 0,
   };
 
-  render: () => void = this.#render.bind(this);
+  // render: () => void = this.render.bind(this);
 
   onBeforeRender: (state: { elapsed: number; delta: number; }) => void =
     () => {};
@@ -91,28 +91,28 @@ class X {
   isDisposed:    boolean = false;
 
   constructor(config: XConfig) {
-    this.#config = { ...config };
-    this.#initCamera();
-    this.#initScene();
-    this.#initRenderer();
+    this.config = { ...config };
+    this.initCamera();
+    this.initScene();
+    this.initRenderer();
     this.resize();
-    this.#initObservers();
+    this.initObservers();
   }
 
-  #initCamera() {
+  private initCamera() {
     this.camera    = new PerspectiveCamera();
     this.cameraFov = this.camera.fov;
   }
 
-  #initScene() {
+  private initScene() {
     this.scene = new Scene();
   }
 
-  #initRenderer() {
-    if (this.#config.canvas) {
-      this.canvas = this.#config.canvas;
-    } else if (this.#config.id) {
-      const elem = document.getElementById(this.#config.id);
+  private initRenderer() {
+    if (this.config.canvas) {
+      this.canvas = this.config.canvas;
+    } else if (this.config.id) {
+      const elem = document.getElementById(this.config.id);
       if (elem instanceof HTMLCanvasElement) {
         this.canvas = elem;
       } else {
@@ -125,42 +125,42 @@ class X {
     const rendererOptions: WebGLRendererParameters = {
       canvas:          this.canvas,
       powerPreference: 'high-performance',
-      ...(this.#config.rendererOptions ?? {}),
+      ...(this.config.rendererOptions ?? {}),
     };
     this.renderer                                  = new WebGLRenderer(rendererOptions);
     this.renderer.outputColorSpace                 = SRGBColorSpace;
   }
 
-  #initObservers() {
-    if (!(this.#config.size instanceof Object)) {
-      window.addEventListener('resize', this.#onResize.bind(this));
-      if (this.#config.size === 'parent' && this.canvas.parentNode) {
-        this.#resizeObserver = new ResizeObserver(this.#onResize.bind(this));
-        this.#resizeObserver.observe(this.canvas.parentNode as Element);
+  private initObservers() {
+    if (!(this.config.size instanceof Object)) {
+      window.addEventListener('resize', this.onResize.bind(this));
+      if (this.config.size === 'parent' && this.canvas.parentNode) {
+        this.resizeObserver = new ResizeObserver(this.onResize.bind(this));
+        this.resizeObserver.observe(this.canvas.parentNode as Element);
       }
     }
-    this.#intersectionObserver = new IntersectionObserver(
-      this.#onIntersection.bind(this),
+    this.intersectionObserver = new IntersectionObserver(
+      this.onIntersection.bind(this),
       { root: null, rootMargin: '0px', threshold: 0 },
     );
-    this.#intersectionObserver.observe(this.canvas);
+    this.intersectionObserver.observe(this.canvas);
     document.addEventListener(
       'visibilitychange',
-      this.#onVisibilityChange.bind(this),
+      this.onVisibilityChange.bind(this),
     );
   }
 
-  #onResize() {
-    if (this.#resizeTimer) clearTimeout(this.#resizeTimer);
-    this.#resizeTimer = window.setTimeout(this.resize.bind(this), 100);
+  private onResize() {
+    if (this.resizeTimer) clearTimeout(this.resizeTimer);
+    this.resizeTimer = window.setTimeout(this.resize.bind(this), 100);
   }
 
   resize() {
     let w: number, h: number;
-    if (this.#config.size instanceof Object) {
-      w = this.#config.size.width;
-      h = this.#config.size.height;
-    } else if (this.#config.size === 'parent' && this.canvas.parentNode) {
+    if (this.config.size instanceof Object) {
+      w = this.config.size.width;
+      h = this.config.size.height;
+    } else if (this.config.size === 'parent' && this.canvas.parentNode) {
       w = (this.canvas.parentNode as HTMLElement).offsetWidth;
       h = (this.canvas.parentNode as HTMLElement).offsetHeight;
     } else {
@@ -170,21 +170,21 @@ class X {
     this.size.width  = w;
     this.size.height = h;
     this.size.ratio  = w / h;
-    this.#updateCamera();
-    this.#updateRenderer();
+    this.updateCamera();
+    this.updateRenderer();
     this.onAfterResize(this.size);
   }
 
-  #updateCamera() {
+  private updateCamera() {
     this.camera.aspect = this.size.width / this.size.height;
     if (this.camera.isPerspectiveCamera && this.cameraFov) {
       if (this.cameraMinAspect && this.camera.aspect < this.cameraMinAspect) {
-        this.#adjustFov(this.cameraMinAspect);
+        this.adjustFov(this.cameraMinAspect);
       } else if (
         this.cameraMaxAspect &&
         this.camera.aspect > this.cameraMaxAspect
       ) {
-        this.#adjustFov(this.cameraMaxAspect);
+        this.adjustFov(this.cameraMaxAspect);
       } else {
         this.camera.fov = this.cameraFov;
       }
@@ -193,7 +193,7 @@ class X {
     this.updateWorldSize();
   }
 
-  #adjustFov(aspect: number) {
+  private adjustFov(aspect: number) {
     const tanFov    = Math.tan(MathUtils.degToRad(this.cameraFov / 2));
     const newTan    = tanFov / (this.camera.aspect / aspect);
     this.camera.fov = 2 * MathUtils.radToDeg(Math.atan(newTan));
@@ -212,9 +212,9 @@ class X {
     }
   }
 
-  #updateRenderer() {
+  private updateRenderer() {
     this.renderer.setSize(this.size.width, this.size.height);
-    this.#postprocessing?.setSize(this.size.width, this.size.height);
+    this._postprocessing?.setSize(this.size.width, this.size.height);
     let pr = window.devicePixelRatio;
     if (this.maxPixelRatio && pr > this.maxPixelRatio) {
       pr = this.maxPixelRatio;
@@ -226,57 +226,57 @@ class X {
   }
 
   get postprocessing() {
-    return this.#postprocessing;
+    return this._postprocessing;
   }
 
   set postprocessing(value: any) {
-    this.#postprocessing = value;
+    this._postprocessing = value;
     this.render          = value.render.bind(value);
   }
 
-  #onIntersection(entries: IntersectionObserverEntry[]) {
-    this.#isAnimating = entries[0].isIntersecting;
-    if (this.#isAnimating) {
-      this.#startAnimation();
+  private onIntersection(entries: IntersectionObserverEntry[]) {
+    this.isAnimating = entries[0].isIntersecting;
+    if (this.isAnimating) {
+      this.startAnimation();
     } else {
-      this.#stopAnimation();
+      this.stopAnimation();
     }
   }
 
-  #onVisibilityChange() {
-    if (this.#isAnimating) {
+  private onVisibilityChange() {
+    if (this.isAnimating) {
       if (document.hidden) {
-        this.#stopAnimation();
+        this.stopAnimation();
       } else {
-        this.#startAnimation();
+        this.startAnimation();
       }
     }
   }
 
-  #startAnimation() {
-    if (this.#isVisible) return;
+  private startAnimation() {
+    if (this.isVisible) return;
     const animateFrame = () => {
-      this.#animationFrameId        = requestAnimationFrame(animateFrame);
-      this.#animationState.delta    = this.#clock.getDelta();
-      this.#animationState.elapsed += this.#animationState.delta;
-      this.onBeforeRender(this.#animationState);
+      this.animationFrameId        = requestAnimationFrame(animateFrame);
+      this.animationState.delta    = this.clock.getDelta();
+      this.animationState.elapsed += this.animationState.delta;
+      this.onBeforeRender(this.animationState);
       this.render();
-      this.onAfterRender(this.#animationState);
+      this.onAfterRender(this.animationState);
     };
-    this.#isVisible = true;
-    this.#clock.start();
+    this.isVisible = true;
+    this.clock.start();
     animateFrame();
   }
 
-  #stopAnimation() {
-    if (this.#isVisible) {
-      cancelAnimationFrame(this.#animationFrameId);
-      this.#isVisible = false;
-      this.#clock.stop();
+  private stopAnimation() {
+    if (this.isVisible) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.isVisible = false;
+      this.clock.stop();
     }
   }
 
-  #render() {
+  private render() {
     this.renderer.render(this.scene, this.camera);
   }
 
@@ -306,20 +306,20 @@ class X {
 
   dispose() {
     this.#onResizeCleanup();
-    this.#stopAnimation();
+    this.stopAnimation();
     this.clear();
-    this.#postprocessing?.dispose();
+    this._postprocessing?.dispose();
     this.renderer.dispose();
     this.isDisposed = true;
   }
 
   #onResizeCleanup() {
-    window.removeEventListener('resize', this.#onResize.bind(this));
-    this.#resizeObserver?.disconnect();
-    this.#intersectionObserver?.disconnect();
+    window.removeEventListener('resize', this.onResize.bind(this));
+    this.resizeObserver?.disconnect();
+    this.intersectionObserver?.disconnect();
     document.removeEventListener(
       'visibilitychange',
-      this.#onVisibilityChange.bind(this),
+      this.onVisibilityChange.bind(this),
     );
   }
 }
@@ -357,11 +357,11 @@ class W {
     this.velocityData = new Float32Array(3 * config.count).fill(0);
     this.sizeData     = new Float32Array(config.count).fill(1);
     this.center       = new Vector3();
-    this.#initializePositions();
+    this.initializePositions();
     this.setSizes();
   }
 
-  #initializePositions() {
+  private initializePositions() {
     const { config, positionData } = this;
     this.center.toArray(positionData, 0);
     for (let i = 1; i < config.count; i++) {