@canvas3/nuxt 0.1.19 → 0.1.21

package/dist/module.json

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

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

@@ -19,13 +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,7 +4,7 @@ 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;
@@ -49,7 +49,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,6 +59,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, animationId: string): void;
     externalAnimationsRender(): void;
     render(): void;
 }

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

@@ -239,9 +239,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,6 +368,16 @@ class Canvas3Class {
   setAnimationsToRender(state) {
     this.animationsRender = state;
   }
+  setAnimationToRender(callBackName, state, animationId) {
+    const animationToUpdate = this.animations.get(callBackName);
+    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()) {
       const callBack = callbackOption.animationCallback;
@@ -375,7 +386,8 @@ class Canvas3Class {
       const shouldRunOnAnimationsRender = callbackOption.onAnimationsRender && this.animationsRender;
       const shouldRunOnResize = callbackOption.onResize && this.resizeInProgress;
       const shouldRunOnMouseMove = callbackOption.onMouseMove && this.mouseMoveInProgress;
-      if (shouldRunOnScroll || shouldRunOnAnimationsRender || shouldRunOnResize || shouldRunOnMouseMove) {
+      const shouldRender = callbackOption.render;
+      if (shouldRunOnScroll || shouldRunOnAnimationsRender || shouldRunOnResize || shouldRunOnMouseMove || shouldRender) {
         callBack();
       }
     }

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

@@ -3,12 +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, animationId: string) => void;
     resizeOnChange: () => void;
     scrollToElBySelector: (elQuerySelector: string, delay?: number, margin?: number) => void;
     setMeshPositionsUpdate: (state: boolean) => void;

package/dist/runtime/utils/exports.js

@@ -13,6 +13,7 @@ export const Canvas3 = {
   getShaderMaterial,
   removeMesh: mainClass.removeMesh.bind(mainClass),
   setAnimationsToRender: mainClass.setAnimationsToRender.bind(mainClass),
+  setAnimationToRender: mainClass.setAnimationToRender.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.19",
+  "version": "0.1.21",
   "publishConfig": {
     "access": "public"
   },