@canvas3/nuxt 0.1.11 → 0.1.13

package/dist/module.json

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

package/dist/runtime/components/canvas3-image.vue

@@ -29,19 +29,26 @@ const reducedMotion = computed(() => Canvas3.options?.disabled ?? null);
 const image = ref();
 const generatedMeshId = "image_" + crypto.randomUUID();
 const imgAddedToCanvas = ref(false);
+const imgIsAdding = ref(false);
 const addImageToCanvas = async () => {
-  await nextTick();
-  if (!image.value || Canvas3.canvasInitiated.value === false || Canvas3.options?.disabled || imgAddedToCanvas.value) return;
-  if (image.value.naturalWidth === 0) return;
-  image.value.dataset.meshId = generatedMeshId;
-  await Canvas3.addImageAsMesh(
-    image.value,
-    props.options.shaderName ?? null,
-    generatedMeshId,
-    props.options.uniforms ?? {},
-    props.options.activateMeshUniforms ?? {}
-  );
-  imgAddedToCanvas.value = true;
+  if (imgAddedToCanvas.value || imgIsAdding.value) return;
+  imgIsAdding.value = true;
+  try {
+    await nextTick();
+    if (!image.value || Canvas3.canvasInitiated.value === false || Canvas3.options?.disabled || imgAddedToCanvas.value) return;
+    if (image.value.naturalWidth === 0) return;
+    image.value.dataset.meshId = generatedMeshId;
+    await Canvas3.addImageAsMesh(
+      image.value,
+      props.options.shaderName ?? null,
+      generatedMeshId,
+      props.options.uniforms ?? {},
+      props.options.activateMeshUniforms ?? {}
+    );
+    imgAddedToCanvas.value = true;
+  } finally {
+    imgIsAdding.value = false;
+  }
 };
 watch(() => Canvas3.canvasInitiated.value, (ready) => {
   if (ready) addImageToCanvas();

package/dist/runtime/directives/canvas3-image.client.js

@@ -2,38 +2,48 @@ import { watch, nextTick } from "vue";
 import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
 const meshIdMap = /* @__PURE__ */ new WeakMap();
 const addedMap = /* @__PURE__ */ new WeakMap();
+const loadingSet = /* @__PURE__ */ new WeakSet();
 const stopMap = /* @__PURE__ */ new WeakMap();
 const srcMap = /* @__PURE__ */ new WeakMap();
 function getImgSrc(el) {
   return el.currentSrc || el.src || "";
 }
 async function tryAdd(el, options) {
-  if (addedMap.get(el)) return;
-  await nextTick();
-  if (!el.isConnected) return;
-  if (Canvas3.options?.disabled) {
-    el.classList.add("reduced-motion");
-    return;
-  }
-  if (Canvas3.canvasInitiated.value === false) return;
-  if (!el.complete || el.naturalWidth === 0) return;
-  let meshId = meshIdMap.get(el);
-  if (!meshId) {
-    meshId = "image_" + crypto.randomUUID();
-    meshIdMap.set(el, meshId);
-    el.dataset.meshId = meshId;
+  if (addedMap.get(el) || loadingSet.has(el)) return;
+  loadingSet.add(el);
+  try {
+    await nextTick();
+    if (!el.isConnected) return;
+    if (Canvas3.options?.disabled) {
+      el.classList.add("reduced-motion");
+      return;
+    }
+    if (Canvas3.canvasInitiated.value === false) return;
+    if (!el.complete || el.naturalWidth === 0) return;
+    let meshId = meshIdMap.get(el);
+    if (!meshId) {
+      meshId = "image_" + crypto.randomUUID();
+      meshIdMap.set(el, meshId);
+      el.dataset.meshId = meshId;
+    }
+    await Canvas3.addImageAsMesh(
+      el,
+      options.shaderName ?? null,
+      meshId,
+      options?.uniforms ?? {},
+      options?.activateMeshUniforms ?? {}
+    );
+    if (!el.isConnected) {
+      Canvas3.removeMesh(meshId);
+      return;
+    }
+    addedMap.set(el, true);
+    srcMap.set(el, getImgSrc(el));
+    el.classList.add("webgl-img");
+    el.style.opacity = "0";
+  } finally {
+    loadingSet.delete(el);
   }
-  await Canvas3.addImageAsMesh(
-    el,
-    options.shaderName ?? null,
-    meshId,
-    options?.uniforms ?? {},
-    options?.activateMeshUniforms ?? {}
-  );
-  addedMap.set(el, true);
-  srcMap.set(el, getImgSrc(el));
-  el.classList.add("webgl-img");
-  el.style.opacity = "0";
 }
 function remove(el) {
   const meshId = meshIdMap.get(el);

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

@@ -223,19 +223,34 @@ class Canvas3Class {
     }
   }
   removeMesh(id) {
-    const meshToRemove = this.scene.getObjectByName(id);
-    if (!meshToRemove) return;
-    this.scene.remove(meshToRemove);
-    meshToRemove.geometry.dispose();
-    const material = getShaderMaterial(meshToRemove);
-    material.dispose();
-    for (const [index, item] of this.imageStore.entries()) {
+    const meshesToRemove = /* @__PURE__ */ new Set();
+    let meshInScene = this.scene.getObjectByName(id);
+    while (meshInScene) {
+      meshesToRemove.add(meshInScene);
+      this.scene.remove(meshInScene);
+      meshInScene = this.scene.getObjectByName(id);
+    }
+    for (const item of this.imageStore) {
       if (item.name === id) {
-        this.imageStore.splice(index, 1);
-        this.materials.splice(index, 1);
-        break;
+        meshesToRemove.add(item.mesh);
+      }
+    }
+    for (const mesh of meshesToRemove) {
+      mesh.geometry?.dispose();
+      const material = getShaderMaterial(mesh);
+      if (material) {
+        const materialIndex = this.materials.indexOf(material);
+        if (materialIndex !== -1)
+          this.materials.splice(materialIndex, 1);
+        if (material.uniforms?.uImage?.value) {
+          material.uniforms.uImage.value.dispose();
+        }
+        material.dispose();
       }
+      this.scene.remove(mesh);
     }
+    this.activateMeshUniformMap.delete(id);
+    this.imageStore = this.imageStore.filter((item) => item.name !== id);
   }
   addAnimationToRender(callBackName, callBackFunction) {
     this.animations.set(callBackName, callBackFunction);
@@ -430,6 +445,7 @@ class Canvas3Class {
     this.height = this.canvasContainer?.offsetHeight ?? 0;
     if (this.camera) {
       this.camera.aspect = this.width / this.height;
+      this.camera.fov = 2 * Math.atan(this.height / 2 / 600) * (180 / Math.PI);
       this.camera.updateProjectionMatrix();
     }
     if (this.renderer) {

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

@@ -7,7 +7,7 @@ export declare const Canvas3: {
     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: (imgHtmlEl: HTMLImageElement, shaderName: string | null, meshId: string, meshUniforms: import("../types/types.js").MeshMaterialUniform, activateMeshUniforms: import("../types/types.js").MeshMaterialUniform) => Promise<void>;
+    removeMesh: (id: string) => void;
     resizeOnChange: () => void;
     scrollToElBySelector: (elQuerySelector: string, delay?: number) => void;
     setMeshPositionsUpdate: (state: boolean) => void;

package/dist/runtime/utils/exports.js

@@ -11,7 +11,7 @@ export const Canvas3 = {
   removeAnimationFromRender: mainClass.removeAnimationFromRender.bind(mainClass),
   addImageAsMesh: mainClass.addImageAsMesh.bind(mainClass),
   getShaderMaterial,
-  removeMesh: mainClass.addImageAsMesh.bind(mainClass),
+  removeMesh: mainClass.removeMesh.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.11",
+  "version": "0.1.13",
   "publishConfig": {
     "access": "public"
   },