@canvas3/nuxt 0.1.17 → 0.1.19

package/dist/module.json

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

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

@@ -19,7 +19,14 @@ type MeshAnimation = {
     ease: string;
 };
 export type AnimationCallback = () => void;
-export type AnimationCallbacks = Map<string, AnimationCallback>;
+export type AnimationCallOptions = {
+    onScroll: boolean;
+    onResize: boolean;
+    onMouseMove: boolean;
+    onAnimationsRender: boolean;
+    animationCallback: AnimationCallback;
+};
+export type AnimationCallbacks = Map<string, AnimationCallOptions>;
 export type MeshMaterialUniform = Record<string, {
     duration: number;
     ease: string | null | undefined;

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

@@ -4,10 +4,13 @@ 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 { AnimationCallback, AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType } from '#canvas3-nuxt/types/types';
+import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType, AnimationCallOptions } from '#canvas3-nuxt/types/types';
 declare class Canvas3Class {
     canvasInitiated: import("vue").Ref<boolean, boolean>;
-    animateImageMesh: boolean;
+    mouseMoveInProgress: boolean;
+    animationsRender: boolean;
+    resizeInProgress: boolean;
+    meshPositionsUpdate: boolean;
     canvasContainer: HTMLElement | null;
     scrollableContent: HTMLElement | null;
     time: number;
@@ -46,7 +49,7 @@ declare class Canvas3Class {
     updateOnScrollActiveElement(updatedBinding: ScrollActionBinding): void;
     removeScrollActiveElement(elNode: HTMLElement): void;
     removeMesh(id: string): void;
-    addAnimationToRender(callBackName: string, callBackFunction: AnimationCallback): void;
+    addAnimationToRender(callBackName: string, callBackOptions: AnimationCallOptions): void;
     removeAnimationFromRender(callBackName: string): void;
     addImageAsMesh(imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: MeshMaterialUniform, activateMeshUniforms: MeshMaterialUniform): Promise<void>;
     composerPass(): void;
@@ -55,6 +58,8 @@ declare class Canvas3Class {
     scrollTo(position: number, delay?: number): void;
     scrollToElBySelector(elQuerySelector: string, delay?: number, margin?: number): void;
     setMeshPositionsUpdate(state: boolean): void;
+    setAnimationsToRender(state: boolean): void;
+    externalAnimationsRender(): void;
     render(): void;
 }
 export declare const Canvas3: Canvas3Class;

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

@@ -14,7 +14,10 @@ import { studio783log } from "#canvas3-nuxt/constants/studio783Log";
 const canvasInitiated = ref(false);
 class Canvas3Class {
   canvasInitiated = canvasInitiated;
-  animateImageMesh = false;
+  mouseMoveInProgress = false;
+  animationsRender = false;
+  resizeInProgress = false;
+  meshPositionsUpdate = false;
   canvasContainer = null;
   scrollableContent = null;
   time = 0;
@@ -59,6 +62,7 @@ class Canvas3Class {
     this.composerPass();
     this.render();
     window.addEventListener("mousemove", (event) => {
+      this.mouseMoveInProgress = true;
       this.mouse.x = event.clientX / this.width;
       this.mouse.y = event.clientY / this.height;
       setTimeout(() => {
@@ -69,6 +73,9 @@ class Canvas3Class {
         this.mouse.movementX = this.mouse.x;
         this.mouse.movementY = this.mouse.y;
       }
+      setTimeout(() => {
+        this.mouseMoveInProgress = false;
+      }, 0);
     });
     this.canvasInitiated.value = true;
     studio783log();
@@ -91,10 +98,14 @@ class Canvas3Class {
     this.canvasContainer?.appendChild(this.renderer.domElement);
   }
   resizeOnChange() {
+    this.resizeInProgress = true;
     this.setSize();
     this.resizeImageStore();
     this.scroll?.resizeMobileBreakEvents();
     this.scroll?.setSize();
+    setTimeout(() => {
+      this.resizeInProgress = false;
+    }, 0);
   }
   resizeImageStore() {
     for (const item of this.imageStore) {
@@ -110,19 +121,6 @@ class Canvas3Class {
     }
     this.setImageMeshPositions();
   }
-  // resizeTextStore() {
-  //   for (const item of this.textStore) {
-  //     const bounds = item.htmlEl.getBoundingClientRect()
-  //     const { scaleX, scaleY } = getMSDFFontMeshScales(
-  //       bounds.width,
-  //       item.mesh.geometry?._layout?._width,
-  //     )
-  //     item.mesh.scale.set(scaleX, scaleY, 1)
-  //     item.width = bounds.width
-  //     item.height = bounds.height * heightPositionCoef
-  //   }
-  //   this.setTextMeshPositions()
-  // }
   setImageMeshPositions() {
     if (this.imageStore.length === 0) return;
     for (const item of this.imageStore) {
@@ -130,17 +128,6 @@ class Canvas3Class {
       item.mesh.position.y = -item.htmlEl.getBoundingClientRect().top + this.height / 2 - item.height / 2;
     }
   }
-  // setTextMeshPositions() {
-  //   if (this.textStore.length === 0) return
-  //   for (const item of this.textStore) {
-  //     item.mesh.position.x
-  //       = item.htmlEl.getBoundingClientRect().left - this.width / 2
-  //     item.mesh.position.y
-  //       = -item.htmlEl.getBoundingClientRect().top
-  //         + this.height / 2
-  //         - item.height / 2
-  //   }
-  // }
   meshUniformsUpdate(id, uniforms) {
     const mesh = this.scene.getObjectByName(id);
     if (!mesh) return;
@@ -200,7 +187,6 @@ class Canvas3Class {
   addOnScrollActivateElement(binding) {
     const newBinding = generateBindingLogic(binding);
     this.scroll?.DOM.onScrollActivateElements.push(newBinding);
-    console.log("this.scroll?.DOM.onScrollActivateElements", this.scroll?.DOM.onScrollActivateElements.length);
   }
   updateOnScrollActiveElement(updatedBinding) {
     if (!this.scroll) return;
@@ -253,113 +239,13 @@ class Canvas3Class {
     this.activateMeshUniformMap.delete(id);
     this.imageStore = this.imageStore.filter((item) => item.name !== id);
   }
-  addAnimationToRender(callBackName, callBackFunction) {
+  addAnimationToRender(callBackName, callBackOptions) {
     if (this.animations.has(callBackName)) return;
-    this.animations.set(callBackName, callBackFunction);
-    console.log("addAnimationToRender", this.animations);
+    this.animations.set(callBackName, callBackOptions);
   }
   removeAnimationFromRender(callBackName) {
     this.animations.delete(callBackName);
   }
-  // addTextAsMSDF(shaderName: string, meshId: string, htmlEl: HTMLElement, textContent: string, theme: string, meshUniforms: MeshMaterialUniform, activateMeshUniforms: MeshMaterialUniform) {
-  //   this.activateMeshUniformMap.set(meshId, activateMeshUniforms)
-  //
-  //   let vertexShader = this.options.shaders.default.textVertex
-  //   let fragmentShader = this.options.shaders.default.textFragment
-  //   if (shaderName && this.options.shaders[shaderName]) {
-  //     vertexShader = this.options.shaders[shaderName].vertexShader
-  //     fragmentShader = this.options.shaders[shaderName].fragmentShader
-  //   }
-  //
-  //   const bounds = htmlEl.getBoundingClientRect()
-  //   const position = { top: bounds.top, left: bounds.left }
-  //   position.top += this.currentScroll
-  //
-  //   //* ****************************
-  //   // MSDF
-  //   //* ****************************
-  //
-  //   const geometry = new MSDFTextGeometry({
-  //     text: textContent.trim(),
-  //     font: this.MSDFTextGeometryFont.data,
-  //   })
-  //
-  //   const material = new THREE.ShaderMaterial({
-  //     side: THREE.DoubleSide,
-  //     transparent: true,
-  //     defines: {
-  //       IS_SMALL: false, // false,
-  //     },
-  //     uniforms: {
-  //       uDevicePixelRatio: { value: window.devicePixelRatio },
-  //       uColor: {
-  //         // TODO: colors dynamic from component
-  //         value: new THREE.Vector4(
-  //           theme === 'dark' ? 27 / 255 : 191 / 255, // R
-  //           theme === 'dark' ? 24 / 255 : 192 / 255, // G
-  //           theme === 'dark' ? 24 / 255 : 178 / 255, // B
-  //         ),
-  //       },
-  //       uViewport: {
-  //         value: new THREE.Vector2(this.width, this.height),
-  //       },
-  //       // Common
-  //       uMouse: { value: new THREE.Vector2(0, 0) },
-  //       uMouseMovement: { value: new THREE.Vector2(0, 0) },
-  //       uFooterGameBall: { value: new THREE.Vector2(0, 0) },
-  //       uMap: { value: null },
-  //       // Rendering
-  //       uThreshold: { value: 0.05 },
-  //       uAlphaTest: { value: 0.01 },
-  //       uStrokeOutsetWidth: { value: 0.0 },
-  //       uStrokeInsetWidth: { value: 0.3 }, // 0.3
-  //       // new generic
-  //       uTime: { value: 0 },
-  //       uMeshSize: { value: new THREE.Vector2(bounds.width, bounds.height) },
-  //       ...this.options.activateMeshOptions.text,
-  //       ...activateMeshUniforms,
-  //       ...meshUniforms,
-  //     },
-  //     vertexShader: vertexShader,
-  //     fragmentShader: fragmentShader,
-  //   })
-  //
-  //   if (material.uniforms.uMap)
-  //     material.uniforms.uMap.value = this.MSDFTextGeometryAtlas
-  //
-  //   this.materials.push(material)
-  //
-  //   const mesh = new THREE.Mesh(geometry, material)
-  //   mesh.name = meshId
-  //   mesh.renderOrder = 1
-  //
-  //   const { scaleX, scaleY } = getMSDFFontMeshScales(
-  //     bounds.width,
-  //     mesh.geometry?._layout?._width,
-  //   )
-  //
-  //   mesh.scale.set(scaleX, scaleY, 1)
-  //
-  //   this.scene.add(mesh)
-  //
-  //   const newMesh: MeshType = {
-  //     name: meshId,
-  //     htmlEl: htmlEl,
-  //     mesh: mesh,
-  //     top: position.top,
-  //     left: position.left,
-  //     width: bounds.width,
-  //     height: bounds.height * heightPositionCoef,
-  //   }
-  //
-  //   this.textStore.push(newMesh)
-  //
-  //   this.setTextMeshPositions()
-  //
-  //   if (htmlEl.dataset.activeScroll === 'true') {
-  //     this.activateMesh(meshId, true)
-  //   }
-  // }
   async addImageAsMesh(imgHtmlEl, shaderName, meshId, meshUniforms, activateMeshUniforms) {
     if (activateMeshUniforms) {
       this.activateMeshUniformMap.set(meshId, activateMeshUniforms);
@@ -476,7 +362,23 @@ class Canvas3Class {
     }, delay * 1e3);
   }
   setMeshPositionsUpdate(state) {
-    this.animateImageMesh = state;
+    this.meshPositionsUpdate = state;
+  }
+  setAnimationsToRender(state) {
+    this.animationsRender = state;
+  }
+  externalAnimationsRender() {
+    for (const [_key, callbackOption] of this.animations.entries()) {
+      const callBack = callbackOption.animationCallback;
+      if (!callBack) return;
+      const shouldRunOnScroll = callbackOption.onScroll && this.scroll?.scrollInProgress;
+      const shouldRunOnAnimationsRender = callbackOption.onAnimationsRender && this.animationsRender;
+      const shouldRunOnResize = callbackOption.onResize && this.resizeInProgress;
+      const shouldRunOnMouseMove = callbackOption.onMouseMove && this.mouseMoveInProgress;
+      if (shouldRunOnScroll || shouldRunOnAnimationsRender || shouldRunOnResize || shouldRunOnMouseMove) {
+        callBack();
+      }
+    }
   }
   render() {
     this.time += 0.05;
@@ -486,9 +388,10 @@ class Canvas3Class {
         this.customPass.uniforms.scrollSpeed.value = this.scroll?.speedTarget;
       this.setImageMeshPositions();
     }
-    if (this.animateImageMesh) {
+    if (this.meshPositionsUpdate) {
       this.resizeImageStore();
     }
+    this.externalAnimationsRender();
     if (this.materials.length > 0) {
       for (const material of this.materials) {
         if (material.uniforms.uTime)
@@ -505,9 +408,6 @@ class Canvas3Class {
           );
       }
     }
-    for (const [_key, callback] of this.animations.entries()) {
-      callback?.();
-    }
     if (this.composer) {
       this.composer.render();
     } else if (this.renderer && this.camera) {

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

@@ -3,11 +3,12 @@ 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, callBackFunction: import("../types/types.js").AnimationCallback) => void;
+    addAnimationToRender: (callBackName: string, callBackOptions: import("../types/types.js").AnimationCallOptions) => 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;
     resizeOnChange: () => void;
     scrollToElBySelector: (elQuerySelector: string, delay?: number, margin?: number) => void;
     setMeshPositionsUpdate: (state: boolean) => void;

package/dist/runtime/utils/exports.js

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