@canvas3/nuxt 0.1.35 → 0.1.37

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-nuxt-layout",
   "configKey": "canvas3Layout",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/directives/canvas3-scroll-action.js

@@ -26,6 +26,17 @@ export const vCanvas3ScrollAction = {
       );
     }
   },
+  updated(el, binding) {
+    if (!Canvas3.canvasInitiated.value) return;
+    const newScrollSpeedValue = binding.value?.scrollSpeedSetTo?.value;
+    if (newScrollSpeedValue !== void 0 && newScrollSpeedValue !== binding.oldValue?.scrollSpeedSetTo?.value) {
+      Canvas3.updateOnScrollActiveElement({
+        elNode: el,
+        options: binding.value,
+        arg: binding.arg
+      });
+    }
+  },
   unmounted(el) {
     Canvas3.removeScrollActiveElement(el);
   },

package/dist/runtime/utils/canvas3/canvas3.d.ts

@@ -42,6 +42,10 @@ declare class Canvas3Class {
         xPrev: number;
         yPrev: number;
     };
+    frameCount: number;
+    lastFpsTime: number;
+    fps: number;
+    fpsUpdateInterval: number;
     init(canvasElement: HTMLElement, scrollableContent: HTMLElement, canvas3Options: Canvas3OptionsType): Promise<void>;
     setScrollShaderByName(shaderName: string): void;
     setRenderDisabled(status: boolean): void;
@@ -52,6 +56,7 @@ declare class Canvas3Class {
     meshUniformsUpdate(id: string, uniforms: MeshMaterialUniform | BaseUniform): void;
     activateMesh(meshId: string, isActive: boolean): void;
     addOnScrollActivateElement(binding: ScrollActionBinding): void;
+    updateOnScrollActiveElement(updatedBinding: ScrollActionBinding): void;
     removeScrollActiveElement(elNode: HTMLElement): void;
     removeMesh(id: string): void;
     addAnimationToRender(callBackName: string, callBackSetup: AnimationCallSetup): void;

package/dist/runtime/utils/canvas3/canvas3.js

@@ -53,6 +53,11 @@ class Canvas3Class {
   customPass = null;
   animations = /* @__PURE__ */ new Map();
   mouse = { x: 0, y: 0, movementX: 0, movementY: 0, xPrev: 0, yPrev: 0 };
+  // FPS tracking
+  frameCount = 0;
+  lastFpsTime = 0;
+  fps = 0;
+  fpsUpdateInterval = 500;
   async init(canvasElement, scrollableContent, canvas3Options) {
     this.options = canvas3Options;
     this.scene = new THREE.Scene();
@@ -222,6 +227,18 @@ class Canvas3Class {
     const newBinding = generateBindingLogic(binding);
     this.scroll?.DOM.onScrollActivateElements.push(newBinding);
   }
+  updateOnScrollActiveElement(updatedBinding) {
+    if (!this.scroll) return;
+    for (const [
+      index,
+      item
+    ] of this.scroll.DOM.onScrollActivateElements.entries()) {
+      if (item.elNode.dataset.scrollActivateId === updatedBinding.elNode.dataset.scrollActivateId) {
+        const updatedBindingFormated = generateBindingLogic(updatedBinding);
+        this.scroll.DOM.onScrollActivateElements[index] = updatedBindingFormated;
+      }
+    }
+  }
   removeScrollActiveElement(elNode) {
     if (!elNode || !this.scroll?.DOM.onScrollActivateElements || this.scroll?.DOM.onScrollActivateElements.length === 0)
       return;
@@ -436,11 +453,40 @@ class Canvas3Class {
       if (!this.lastTime) this.lastTime = timestamp;
       const delta = (timestamp - this.lastTime) / 1e3;
       this.lastTime = timestamp;
+      if (!this.lastFpsTime) this.lastFpsTime = timestamp;
+      this.frameCount++;
+      const elapsedSinceFpsStart = timestamp - this.lastFpsTime;
+      if (elapsedSinceFpsStart >= this.fpsUpdateInterval) {
+        this.fps = Math.round(
+          this.frameCount * 1e3 / elapsedSinceFpsStart
+        );
+        this.frameCount = 0;
+        this.lastFpsTime = timestamp;
+      }
       this.render(delta);
       this.rafId = requestAnimationFrame(loop);
     };
     this.rafId = requestAnimationFrame(loop);
   }
+  // startRenderLoop() {
+  //   if (this.rafId !== null) return
+  //
+  //   const loop = (timestamp: number) => {
+  //     this.rafId = null
+  //
+  //     if (!this.documentVisibility || this.renderDisabled) return
+  //
+  //     if (!this.lastTime) this.lastTime = timestamp
+  //     const delta = (timestamp - this.lastTime) / 1000
+  //     this.lastTime = timestamp
+  //
+  //     this.render(delta)
+  //
+  //     this.rafId = requestAnimationFrame(loop)
+  //   }
+  //
+  //   this.rafId = requestAnimationFrame(loop)
+  // }
   stopRenderLoop() {
     if (this.rafId !== null) {
       cancelAnimationFrame(this.rafId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas3/nuxt",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "publishConfig": {
     "access": "public"
   },