@canvas3/nuxt 0.1.20 → 0.1.22

package/dist/module.json

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

package/dist/runtime/types/types.d.ts

@@ -19,14 +19,17 @@ type MeshAnimation = {
     ease: string;
 };
 export type AnimationCallback = () => void;
-export type AnimationCallOptions = {
+type BaseAnimationCall = {
     onScroll: boolean;
     onResize: boolean;
     onMouseMove: boolean;
     onAnimationsRender: boolean;
     render: boolean;
+    animationIds: string[];
     animationCallback: AnimationCallback;
 };
+export type AnimationCallSetup = Omit<BaseAnimationCall, 'animationIds'>;
+export type AnimationCallOptions = BaseAnimationCall;
 export type AnimationCallbacks = Map<string, AnimationCallOptions>;
 export type MeshMaterialUniform = Record<string, {
     duration: number;

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

@@ -4,11 +4,12 @@ import type { Pass } from 'three/addons/postprocessing/Pass.js';
 import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 import type { ShaderMaterial, WebGLRenderer } from 'three';
 import Scroll from '#canvas3-nuxt/utils/canvas3/scroll';
-import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType, AnimationCallOptions } from '#canvas3-nuxt/types/types';
+import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType, AnimationCallSetup } from '#canvas3-nuxt/types/types';
 declare class Canvas3Class {
     canvasInitiated: import("vue").Ref<boolean, boolean>;
     mouseMoveInProgress: boolean;
     animationsRender: boolean;
+    documentVisibility: boolean;
     resizeInProgress: boolean;
     meshPositionsUpdate: boolean;
     canvasContainer: HTMLElement | null;
@@ -49,7 +50,7 @@ declare class Canvas3Class {
     updateOnScrollActiveElement(updatedBinding: ScrollActionBinding): void;
     removeScrollActiveElement(elNode: HTMLElement): void;
     removeMesh(id: string): void;
-    addAnimationToRender(callBackName: string, callBackOptions: AnimationCallOptions): void;
+    addAnimationToRender(callBackName: string, callBackSetup: AnimationCallSetup): void;
     removeAnimationFromRender(callBackName: string): void;
     addImageAsMesh(imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: MeshMaterialUniform, activateMeshUniforms: MeshMaterialUniform): Promise<void>;
     composerPass(): void;
@@ -59,7 +60,7 @@ declare class Canvas3Class {
     scrollToElBySelector(elQuerySelector: string, delay?: number, margin?: number): void;
     setMeshPositionsUpdate(state: boolean): void;
     setAnimationsToRender(state: boolean): void;
-    setAnimationToRender(callBackName: string, state: boolean): void;
+    setAnimationToRender(callBackName: string, state: boolean, animationId: string): void;
     externalAnimationsRender(): void;
     render(): void;
 }

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

@@ -16,6 +16,7 @@ class Canvas3Class {
   canvasInitiated = canvasInitiated;
   mouseMoveInProgress = false;
   animationsRender = false;
+  documentVisibility = true;
   resizeInProgress = false;
   meshPositionsUpdate = false;
   canvasContainer = null;
@@ -77,6 +78,14 @@ class Canvas3Class {
         this.mouseMoveInProgress = false;
       }, 0);
     });
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) {
+        this.documentVisibility = false;
+      } else {
+        this.documentVisibility = true;
+        this.render();
+      }
+    });
     this.canvasInitiated.value = true;
     studio783log();
   }
@@ -239,9 +248,10 @@ class Canvas3Class {
     this.activateMeshUniformMap.delete(id);
     this.imageStore = this.imageStore.filter((item) => item.name !== id);
   }
-  addAnimationToRender(callBackName, callBackOptions) {
+  addAnimationToRender(callBackName, callBackSetup) {
     if (this.animations.has(callBackName)) return;
-    this.animations.set(callBackName, callBackOptions);
+    const newCallbackFunction = { ...callBackSetup, animationIds: [] };
+    this.animations.set(callBackName, newCallbackFunction);
   }
   removeAnimationFromRender(callBackName) {
     this.animations.delete(callBackName);
@@ -367,9 +377,15 @@ class Canvas3Class {
   setAnimationsToRender(state) {
     this.animationsRender = state;
   }
-  setAnimationToRender(callBackName, state) {
+  setAnimationToRender(callBackName, state, animationId) {
     const animationToUpdate = this.animations.get(callBackName);
-    if (animationToUpdate) animationToUpdate.render = state;
+    if (!animationToUpdate) return;
+    if (state) {
+      animationToUpdate.animationIds.push(animationId);
+    } else {
+      animationToUpdate.animationIds.splice(animationToUpdate.animationIds.indexOf(animationId), 1);
+    }
+    animationToUpdate.render = animationToUpdate.animationIds.length > 0;
   }
   externalAnimationsRender() {
     for (const [_key, callbackOption] of this.animations.entries()) {
@@ -419,6 +435,7 @@ class Canvas3Class {
       this.renderer.render(this.scene, this.camera);
     }
     try {
+      if (!this.documentVisibility) return;
       requestAnimationFrame(this.render.bind(this));
     } catch (e) {
       console.error(e);

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

@@ -3,13 +3,13 @@ import { getShaderMaterial } from '#canvas3-nuxt/utils/canvas3/helpers';
 export declare const Canvas3: {
     addMeshToScene: (mesh: Mesh) => void;
     getMeshFromSceneByName: (meshName: string) => import("three").Object3D<import("three").Object3DEventMap> | undefined;
-    addAnimationToRender: (callBackName: string, callBackOptions: import("../types/types.js").AnimationCallOptions) => void;
+    addAnimationToRender: (callBackName: string, callBackSetup: import("../types/types.js").AnimationCallSetup) => void;
     removeAnimationFromRender: (callBackName: string) => void;
     addImageAsMesh: (imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: import("../types/types.js").MeshMaterialUniform, activateMeshUniforms: import("../types/types.js").MeshMaterialUniform) => Promise<void>;
     getShaderMaterial: typeof getShaderMaterial;
     removeMesh: (id: string) => void;
     setAnimationsToRender: (state: boolean) => void;
-    setAnimationToRender: (callBackName: string, state: boolean) => void;
+    setAnimationToRender: (callBackName: string, state: boolean, animationId: string) => void;
     resizeOnChange: () => void;
     scrollToElBySelector: (elQuerySelector: string, delay?: number, margin?: number) => void;
     setMeshPositionsUpdate: (state: boolean) => void;

package/package.json

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