@canvas3/nuxt 0.1.0 → 0.1.3

package/dist/module.json

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

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

@@ -12,3 +12,5 @@ export declare function setScrollActiveElements(elNode: HTMLElement, meshIds: st
 export declare function elementNearViewport(bounds: DOMRect, margin?: number): boolean;
 export declare const lerp: (a: number, b: number, n: number) => number;
 export declare function getShaderMaterial(mesh: Mesh): ShaderMaterial;
+export declare function hasTransformTranslate(el: HTMLElement): boolean;
+export declare function setElTransformTranslate(el: HTMLElement, x?: number, y?: number, z?: number): void;

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

@@ -94,3 +94,24 @@ export const lerp = (a, b, n) => (1 - n) * a + n * b;
 export function getShaderMaterial(mesh) {
   return mesh.material;
 }
+const TRANSLATE_REGEX = /translate3d\([^)]*\)|translateX\([^)]*\)|translateY\([^)]*\)|translate\([^)]*\)/;
+export function hasTransformTranslate(el) {
+  const current = el.style.transform || "";
+  return TRANSLATE_REGEX.test(current);
+}
+export function setElTransformTranslate(el, x = 0, y = 0, z = 0) {
+  const current = el.style.transform || "";
+  const newTranslate = `translate3d(${x}px,${y}px,${z}px)`;
+  if (!current || current === "none") {
+    el.style.transform = newTranslate;
+    return;
+  }
+  if (hasTransformTranslate(el)) {
+    el.style.transform = current.replace(
+      TRANSLATE_REGEX,
+      newTranslate
+    );
+  } else {
+    el.style.transform = `${current} ${newTranslate}`.trim();
+  }
+}

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

@@ -1,6 +1,7 @@
 import {
   elementNearViewport,
   lerp,
+  setElTransformTranslate,
   setScrollActiveElements
 } from "./helpers.js";
 export default class Scroll {
@@ -51,7 +52,7 @@ export default class Scroll {
           item.bounds = item.elNode.getBoundingClientRect();
           item.containerBottom = item.containerEl.getBoundingClientRect().bottom;
         } else {
-          item.elNode.style.transform = `translate3d(0,0px,0)`;
+          setElTransformTranslate(item.elNode, 0, 0);
         }
       }
     }
@@ -119,9 +120,9 @@ export default class Scroll {
           const fixToOriginPx = window.innerHeight * fixToOrigin;
           if (item.childEl && bounds.top < itemMargin + fixToOriginPx && containerBounds.bottom > itemMargin + fixToOriginPx + item.childElBounds.height) {
             const fixedPositionPx = itemMargin - bounds.top + fixToOriginPx;
-            item.childEl.style.transform = `translate3d(0,${fixedPositionPx}px,0)`;
+            setElTransformTranslate(item.childEl, 0, fixedPositionPx);
           } else if (item.childEl && bounds.top > itemMargin + fixToOriginPx && item.childEl.style.transform !== `translate3d(0px, 0px, 0px)`) {
-            item.childEl.style.transform = `translate3d(0px, 0px, 0px)`;
+            setElTransformTranslate(item.childEl, 0, 0);
           }
         } else {
           const speedTrack = elementNearViewport(
@@ -131,18 +132,18 @@ export default class Scroll {
           );
           if (speedTrack) {
             const speed = (window.innerHeight - bounds.top) * item.options.scrollSpeed.value;
-            item.elNode.style.transform = `translate3d(0,${speed}px,0)`;
+            setElTransformTranslate(item.elNode, 0, speed);
           }
         }
       } else {
         item.elNode.style.transition = `linear translate3d 0.3s`;
-        item.elNode.style.transform = `translate3d(0,0,0)`;
+        setElTransformTranslate(item.elNode, 0, 0);
       }
     }
   }
   setScrollPosition() {
     if (Math.round(this.scrollToRender) !== Math.round(this.current) || this.scrollToRender < 10) {
-      this.DOM.scrollable.style.transform = `translate3d(0,${-1 * this.scrollToRender}px,0)`;
+      setElTransformTranslate(this.DOM.scrollable, 0, -1 * this.scrollToRender);
     }
   }
   scrollRenderToFluid(scrollTo) {

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

@@ -1,10 +1,14 @@
 import type { Mesh } from 'three';
+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;
+    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>;
     resizeOnChange: () => void;
     scrollToElBySelector: (elQuerySelector: string, delay?: number) => void;
     setMeshPositionsUpdate: (state: boolean) => void;
     scrollToTop: (delay?: number) => void;
-    addMeshToScene: (mesh: Mesh) => void;
-    getMeshFromSceneByName: (meshName: string) => import("three").Object3D<import("three").Object3DEventMap> | undefined;
 };

package/dist/runtime/utils/exports.js

@@ -1,14 +1,18 @@
 import { Canvas3 as mainClass } from "#canvas3-nuxt/utils/canvas3/canvas3";
+import { getShaderMaterial } from "#canvas3-nuxt/utils/canvas3/helpers";
 export const Canvas3 = {
-  addAnimationToRender: mainClass.addAnimationToRender.bind(mainClass),
-  resizeOnChange: mainClass.resizeOnChange.bind(mainClass),
-  scrollToElBySelector: mainClass.scrollToElBySelector.bind(mainClass),
-  setMeshPositionsUpdate: mainClass.setMeshPositionsUpdate.bind(mainClass),
-  scrollToTop: mainClass.scrollToTop.bind(mainClass),
   addMeshToScene: (mesh) => {
     mainClass.scene.add(mesh);
   },
   getMeshFromSceneByName: (meshName) => {
     return mainClass.scene.getObjectByName(meshName);
-  }
+  },
+  addAnimationToRender: mainClass.addAnimationToRender.bind(mainClass),
+  addImageAsMesh: mainClass.addImageAsMesh.bind(mainClass),
+  getShaderMaterial,
+  removeMesh: mainClass.addImageAsMesh.bind(mainClass),
+  resizeOnChange: mainClass.resizeOnChange.bind(mainClass),
+  scrollToElBySelector: mainClass.scrollToElBySelector.bind(mainClass),
+  setMeshPositionsUpdate: mainClass.setMeshPositionsUpdate.bind(mainClass),
+  scrollToTop: mainClass.scrollToTop.bind(mainClass)
 };

package/package.json

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