@canvas3/nuxt 0.0.3 → 0.0.5

package/dist/module.json

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

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

@@ -16,20 +16,17 @@
 import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
 import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
 const props = defineProps({
-  options: {
-    type: Object,
-    default: () => ({
-      alt: "",
-      src: "",
-      loadStrategy: "lazy",
-      shaderName: void 0,
-      uniforms: {},
-      activateMeshUniforms: {}
-    })
-  }
+  options: { type: Object, required: true, default: () => ({
+    alt: "",
+    src: "",
+    loadStrategy: "lazy",
+    shaderName: void 0,
+    uniforms: {},
+    activateMeshUniforms: {}
+  }) }
 });
 const reducedMotion = computed(() => Canvas3.options?.disabled ?? null);
-const image = ref(null);
+const image = ref();
 const generatedMeshId = "image_" + crypto.randomUUID();
 const imgAddedToCanvas = ref(false);
 const addImageToCanvas = async () => {

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

@@ -1,5 +1,8 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    options: Record<string, any>;
-    $props: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import type { Canvas3ImageBindType } from '#canvas3-nuxt/types/types';
+type __VLS_Props = {
+    options: Canvas3ImageBindType;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    options: Canvas3ImageBindType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/canvas3-text.vue.d.ts

@@ -1,11 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    $props: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

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

@@ -33,6 +33,7 @@ async function tryAdd(el, options) {
   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/layouts/canvas3-layout.vue.d.ts

@@ -1,11 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    $emit: (event: "canvas3-ready", ...args: any[]) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-type __VLS_Slots = {
-    default?: ((props: {}) => any) | undefined;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };

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

@@ -53,14 +53,36 @@ export type MeshType = {
     width: number;
     height: number;
 };
+export type scrollActionBindOptionType = {
+    activateOnce?: boolean;
+    trackOnly?: boolean;
+    fixToParent?: {
+        containerId: string;
+        fixPosition: number;
+        margin: number;
+    };
+    scrollSpeed?: {
+        value: number;
+    };
+    scrollSpeedSetTo?: {
+        value: number;
+        duration: number;
+    };
+    activateCallback?: (item: ScrollActionType) => void;
+    onScrollCallback?: (item: ScrollActionType, scrollSpeed: number, currentPosition: number) => void;
+    activeRangeMargin?: number;
+    activeRangeOrigin?: number;
+    activeRange?: number;
+    bidirectionalActivation?: boolean;
+};
 export type ScrollActionBinding = {
     elNode: HTMLElement;
-    options: DirectiveBinding['value'];
+    options: scrollActionBindOptionType;
     arg: DirectiveBinding['arg'];
 };
 export type ScrollActionType = {
     elNode: HTMLElement;
-    options: DirectiveBinding['value'];
+    options: scrollActionBindOptionType;
     arg: DirectiveBinding['arg'];
     containedMeshIds?: string[];
     bounds?: DOMRect;
@@ -83,6 +105,14 @@ export type Canvas3ImageBinding = {
     uniforms?: MeshMaterialUniform;
     activateMeshUniforms?: MeshMaterialUniform;
 };
+export type Canvas3ImageBindType = {
+    alt: string;
+    src: string;
+    loadStrategy?: 'lazy' | 'eager' | undefined;
+    shaderName?: string;
+    uniforms?: MeshMaterialUniform;
+    activateMeshUniforms: MeshMaterialUniform;
+};
 declare module 'vue' {
     interface GlobalDirectives {
         'canvas3-image': ObjectDirective<HTMLImageElement, Canvas3ImageBinding>;

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

@@ -6,8 +6,7 @@ import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
 import { gsap } from "gsap";
 import {
   generateBindingLogic,
-  getShaderMaterial,
-  loadTexture
+  getShaderMaterial
 } from "./helpers.js";
 import Scroll from "#canvas3-nuxt/utils/canvas3/scroll";
 import { defaultCanvas3Options } from "#canvas3-nuxt/constants/default-canvas3-options";
@@ -352,7 +351,8 @@ class Canvas3Class {
     const position = { top: bounds.top, left: bounds.left };
     position.top += this.currentScroll;
     const geometry = new THREE.PlaneGeometry(1, 1);
-    const texture = await loadTexture(imgHtmlEl.src);
+    const bitmap = await createImageBitmap(imgHtmlEl, { imageOrientation: "flipY" });
+    const texture = new THREE.Texture(bitmap);
     texture.needsUpdate = true;
     const material = new THREE.ShaderMaterial({
       uniforms: {
@@ -366,8 +366,8 @@ class Canvas3Class {
         uMeshSize: { value: new THREE.Vector2(bounds.width, bounds.height) },
         uTextureSize: {
           value: new THREE.Vector2(
-            texture.image.naturalWidth,
-            texture.image.naturalHeight
+            bitmap.width,
+            bitmap.height
           )
         },
         uViewport: {

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

@@ -38,7 +38,7 @@ export function generateBindingLogic(newBindingData) {
       duration: newBindingData.options.scrollSpeedSetTo.duration,
       value: newBindingData.options.scrollSpeedSetTo.value,
       onComplete: () => {
-        binding.elNode.dataset.scrollSpeed = newBindingData.options.scrollSpeedSetTo.value;
+        binding.elNode.dataset.scrollSpeed = newBindingData.options.scrollSpeedSetTo?.value.toString() ?? "0";
       }
     });
   }

package/package.json

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