@canvas3/nuxt 0.1.20 → 0.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json
CHANGED
|
@@ -19,14 +19,17 @@ type MeshAnimation = {
|
|
|
19
19
|
ease: string;
|
|
20
20
|
};
|
|
21
21
|
export type AnimationCallback = () => void;
|
|
22
|
-
|
|
22
|
+
type BaseAnimationCall = {
|
|
23
23
|
onScroll: boolean;
|
|
24
24
|
onResize: boolean;
|
|
25
25
|
onMouseMove: boolean;
|
|
26
26
|
onAnimationsRender: boolean;
|
|
27
27
|
render: boolean;
|
|
28
|
+
animationIds: string[];
|
|
28
29
|
animationCallback: AnimationCallback;
|
|
29
30
|
};
|
|
31
|
+
export type AnimationCallSetup = Omit<BaseAnimationCall, 'animationIds'>;
|
|
32
|
+
export type AnimationCallOptions = BaseAnimationCall;
|
|
30
33
|
export type AnimationCallbacks = Map<string, AnimationCallOptions>;
|
|
31
34
|
export type MeshMaterialUniform = Record<string, {
|
|
32
35
|
duration: number;
|
|
@@ -4,7 +4,7 @@ import type { Pass } from 'three/addons/postprocessing/Pass.js';
|
|
|
4
4
|
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
|
|
5
5
|
import type { ShaderMaterial, WebGLRenderer } from 'three';
|
|
6
6
|
import Scroll from '#canvas3-nuxt/utils/canvas3/scroll';
|
|
7
|
-
import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType,
|
|
7
|
+
import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType, AnimationCallSetup } from '#canvas3-nuxt/types/types';
|
|
8
8
|
declare class Canvas3Class {
|
|
9
9
|
canvasInitiated: import("vue").Ref<boolean, boolean>;
|
|
10
10
|
mouseMoveInProgress: boolean;
|
|
@@ -49,7 +49,7 @@ declare class Canvas3Class {
|
|
|
49
49
|
updateOnScrollActiveElement(updatedBinding: ScrollActionBinding): void;
|
|
50
50
|
removeScrollActiveElement(elNode: HTMLElement): void;
|
|
51
51
|
removeMesh(id: string): void;
|
|
52
|
-
addAnimationToRender(callBackName: string,
|
|
52
|
+
addAnimationToRender(callBackName: string, callBackSetup: AnimationCallSetup): void;
|
|
53
53
|
removeAnimationFromRender(callBackName: string): void;
|
|
54
54
|
addImageAsMesh(imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: MeshMaterialUniform, activateMeshUniforms: MeshMaterialUniform): Promise<void>;
|
|
55
55
|
composerPass(): void;
|
|
@@ -59,7 +59,7 @@ declare class Canvas3Class {
|
|
|
59
59
|
scrollToElBySelector(elQuerySelector: string, delay?: number, margin?: number): void;
|
|
60
60
|
setMeshPositionsUpdate(state: boolean): void;
|
|
61
61
|
setAnimationsToRender(state: boolean): void;
|
|
62
|
-
setAnimationToRender(callBackName: string, state: boolean): void;
|
|
62
|
+
setAnimationToRender(callBackName: string, state: boolean, animationId: string): void;
|
|
63
63
|
externalAnimationsRender(): void;
|
|
64
64
|
render(): void;
|
|
65
65
|
}
|
|
@@ -239,9 +239,10 @@ class Canvas3Class {
|
|
|
239
239
|
this.activateMeshUniformMap.delete(id);
|
|
240
240
|
this.imageStore = this.imageStore.filter((item) => item.name !== id);
|
|
241
241
|
}
|
|
242
|
-
addAnimationToRender(callBackName,
|
|
242
|
+
addAnimationToRender(callBackName, callBackSetup) {
|
|
243
243
|
if (this.animations.has(callBackName)) return;
|
|
244
|
-
|
|
244
|
+
const newCallbackFunction = { ...callBackSetup, animationIds: [] };
|
|
245
|
+
this.animations.set(callBackName, newCallbackFunction);
|
|
245
246
|
}
|
|
246
247
|
removeAnimationFromRender(callBackName) {
|
|
247
248
|
this.animations.delete(callBackName);
|
|
@@ -367,9 +368,15 @@ class Canvas3Class {
|
|
|
367
368
|
setAnimationsToRender(state) {
|
|
368
369
|
this.animationsRender = state;
|
|
369
370
|
}
|
|
370
|
-
setAnimationToRender(callBackName, state) {
|
|
371
|
+
setAnimationToRender(callBackName, state, animationId) {
|
|
371
372
|
const animationToUpdate = this.animations.get(callBackName);
|
|
372
|
-
if (animationToUpdate)
|
|
373
|
+
if (!animationToUpdate) return;
|
|
374
|
+
if (state) {
|
|
375
|
+
animationToUpdate.animationIds.push(animationId);
|
|
376
|
+
} else {
|
|
377
|
+
animationToUpdate.animationIds.splice(animationToUpdate.animationIds.indexOf(animationId), 1);
|
|
378
|
+
}
|
|
379
|
+
animationToUpdate.render = animationToUpdate.animationIds.length > 0;
|
|
373
380
|
}
|
|
374
381
|
externalAnimationsRender() {
|
|
375
382
|
for (const [_key, callbackOption] of this.animations.entries()) {
|
|
@@ -3,13 +3,13 @@ import { getShaderMaterial } from '#canvas3-nuxt/utils/canvas3/helpers';
|
|
|
3
3
|
export declare const Canvas3: {
|
|
4
4
|
addMeshToScene: (mesh: Mesh) => void;
|
|
5
5
|
getMeshFromSceneByName: (meshName: string) => import("three").Object3D<import("three").Object3DEventMap> | undefined;
|
|
6
|
-
addAnimationToRender: (callBackName: string,
|
|
6
|
+
addAnimationToRender: (callBackName: string, callBackSetup: import("../types/types.js").AnimationCallSetup) => void;
|
|
7
7
|
removeAnimationFromRender: (callBackName: string) => void;
|
|
8
8
|
addImageAsMesh: (imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: import("../types/types.js").MeshMaterialUniform, activateMeshUniforms: import("../types/types.js").MeshMaterialUniform) => Promise<void>;
|
|
9
9
|
getShaderMaterial: typeof getShaderMaterial;
|
|
10
10
|
removeMesh: (id: string) => void;
|
|
11
11
|
setAnimationsToRender: (state: boolean) => void;
|
|
12
|
-
setAnimationToRender: (callBackName: string, state: boolean) => void;
|
|
12
|
+
setAnimationToRender: (callBackName: string, state: boolean, animationId: string) => void;
|
|
13
13
|
resizeOnChange: () => void;
|
|
14
14
|
scrollToElBySelector: (elQuerySelector: string, delay?: number, margin?: number) => void;
|
|
15
15
|
setMeshPositionsUpdate: (state: boolean) => void;
|