@canvas3/nuxt 0.1.23 → 0.1.25

package/dist/module.json

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

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

@@ -7,6 +7,7 @@ import Scroll from '#canvas3-nuxt/utils/canvas3/scroll';
 import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType, AnimationCallSetup } from '#canvas3-nuxt/types/types';
 declare class Canvas3Class {
     canvasInitiated: import("vue").Ref<boolean, boolean>;
+    renderDisabled: boolean;
     mouseMoveInProgress: boolean;
     animationsRender: boolean;
     documentVisibility: boolean;
@@ -40,6 +41,7 @@ declare class Canvas3Class {
         yPrev: number;
     };
     init(canvasElement: HTMLElement, scrollableContent: HTMLElement, canvas3Options: Canvas3OptionsType): Promise<void>;
+    setRenderDisabled(status: boolean): void;
     setCanvasAndCamera(): void;
     resizeOnChange(): void;
     resizeImageStore(): void;

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

@@ -12,8 +12,10 @@ import Scroll from "#canvas3-nuxt/utils/canvas3/scroll";
 import { defaultCanvas3Options } from "#canvas3-nuxt/constants/default-canvas3-options";
 import { studio783log } from "#canvas3-nuxt/constants/studio783Log";
 const canvasInitiated = ref(false);
+const ANIMATION_FALSE_STATE_DELAY = 0;
 class Canvas3Class {
   canvasInitiated = canvasInitiated;
+  renderDisabled = false;
   mouseMoveInProgress = false;
   animationsRender = false;
   documentVisibility = true;
@@ -89,6 +91,13 @@ class Canvas3Class {
     this.canvasInitiated.value = true;
     studio783log();
   }
+  setRenderDisabled(status) {
+    if (!status && this.renderDisabled) {
+      this.renderDisabled = false;
+      this.render();
+    }
+    this.renderDisabled = status;
+  }
   setCanvasAndCamera() {
     this.width = this.canvasContainer?.offsetWidth ?? 0;
     this.height = this.canvasContainer?.offsetHeight ?? 0;
@@ -375,7 +384,13 @@ class Canvas3Class {
     this.meshPositionsUpdate = state;
   }
   setAnimationsToRender(state) {
-    this.animationsRender = state;
+    if (state) {
+      this.animationsRender = state;
+    } else {
+      setTimeout(() => {
+        this.animationsRender = state;
+      }, ANIMATION_FALSE_STATE_DELAY);
+    }
   }
   setAnimationToRender(callBackName, state, animationId) {
     const animationToUpdate = this.animations.get(callBackName);
@@ -385,7 +400,14 @@ class Canvas3Class {
     } else {
       animationToUpdate.animationIds.splice(animationToUpdate.animationIds.indexOf(animationId), 1);
     }
-    animationToUpdate.render = animationToUpdate.animationIds.length > 0;
+    const newState = animationToUpdate.animationIds.length > 0;
+    if (newState) {
+      animationToUpdate.render = newState;
+    } else {
+      setTimeout(() => {
+        animationToUpdate.render = newState;
+      }, ANIMATION_FALSE_STATE_DELAY);
+    }
   }
   externalAnimationsRender() {
     for (const [_key, callbackOption] of this.animations.entries()) {
@@ -439,6 +461,7 @@ class Canvas3Class {
     }
     try {
       if (!this.documentVisibility) return;
+      if (this.renderDisabled) return;
       requestAnimationFrame(this.render.bind(this));
     } catch (e) {
       console.error(e);

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

@@ -10,6 +10,7 @@ export declare const Canvas3: {
     removeMesh: (id: string) => void;
     setAnimationsToRender: (state: boolean) => void;
     setAnimationToRender: (callBackName: string, state: boolean, animationId: string) => void;
+    setRenderDisabled: (status: boolean) => void;
     resizeOnChange: () => void;
     scrollToElBySelector: (elQuerySelector: string, delay?: number, margin?: number) => void;
     setMeshPositionsUpdate: (state: boolean) => void;

package/dist/runtime/utils/exports.js

@@ -14,6 +14,7 @@ export const Canvas3 = {
   removeMesh: mainClass.removeMesh.bind(mainClass),
   setAnimationsToRender: mainClass.setAnimationsToRender.bind(mainClass),
   setAnimationToRender: mainClass.setAnimationToRender.bind(mainClass),
+  setRenderDisabled: mainClass.setRenderDisabled.bind(mainClass),
   resizeOnChange: mainClass.resizeOnChange.bind(mainClass),
   scrollToElBySelector: mainClass.scrollToElBySelector.bind(mainClass),
   setMeshPositionsUpdate: mainClass.setMeshPositionsUpdate.bind(mainClass),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas3/nuxt",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "publishConfig": {
     "access": "public"
   },
@@ -41,11 +41,13 @@
   },
   "dependencies": {
     "@nuxt/kit": "^4.0.0",
-    "gsap": "^3.13.0",
-    "three": "^0.178.0",
     "vite-plugin-glsl": "^1.5.1",
     "vue": "^3.5.18"
   },
+  "peerDependencies": {
+    "gsap": "^3.13.0",
+    "three": "^0.178.0"
+  },
   "devDependencies": {
     "@nuxt/devtools": "2.6.4",
     "@nuxt/eslint-config": "^1.2.0",
@@ -58,6 +60,8 @@
     "nuxt": "^4.4.6",
     "typescript": "~5.8.3",
     "vitest": "^3.2.4",
-    "vue-tsc": "^3.0.1"
+    "vue-tsc": "^3.0.1",
+    "gsap": "^3.13.0",
+    "three": "^0.178.0"
   }
 }