@canvas3/nuxt 0.0.1

package/dist/runtime/directives/action-on-scroll.d.ts

@@ -0,0 +1,2 @@
+import { type Directive } from 'vue';
+export declare const vOnScrollActivate: Directive;

package/dist/runtime/directives/action-on-scroll.js

@@ -0,0 +1,42 @@
+import { watch } from "vue";
+import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
+export const vOnScrollActivate = {
+  mounted(el, binding) {
+    el.dataset.scrollActivateId = crypto.randomUUID();
+    if (binding.value?.scrollSpeedSetTo?.value) {
+      el.dataset.scrollSpeed = binding.value?.scrollSpeedSetTo?.value;
+    }
+    const addToCanvas = () => {
+      Canvas3.addOnScrollActivateElement({
+        elNode: el,
+        options: binding.value,
+        arg: binding.arg
+      });
+    };
+    if (Canvas3.canvasInitiated.value) {
+      addToCanvas();
+    } else {
+      watch(
+        () => Canvas3.canvasInitiated.value,
+        (newValue) => {
+          if (newValue) {
+            addToCanvas();
+          }
+        }
+      );
+    }
+  },
+  updated(el, binding) {
+    Canvas3.updateOnScrollActiveElement({
+      elNode: el,
+      options: binding.value,
+      arg: binding.arg
+    });
+  },
+  unmounted(el) {
+    Canvas3.removeScrollActiveElement(el);
+  },
+  getSSRProps() {
+    return {};
+  }
+};

package/dist/runtime/directives/canvas3-image-directive.client.d.ts

@@ -0,0 +1,6 @@
+import type { Directive } from 'vue';
+export declare const vCanvas3Image: Directive<HTMLImageElement, {
+    shaderName?: string;
+    uniforms?: Record<string, any>;
+    activateMeshUniforms?: Record<string, any>;
+}>;

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

@@ -0,0 +1,104 @@
+import { watch, nextTick } from "vue";
+import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
+const meshIdMap = /* @__PURE__ */ new WeakMap();
+const addedMap = /* @__PURE__ */ new WeakMap();
+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;
+  }
+  Canvas3.addImageAsMesh(
+    el,
+    options?.shaderName,
+    meshId,
+    options?.uniforms ?? {},
+    options?.activateMeshUniforms ?? {}
+  );
+  addedMap.set(el, true);
+  srcMap.set(el, getImgSrc(el));
+  el.classList.add("webgl-img");
+}
+function remove(el) {
+  const meshId = meshIdMap.get(el);
+  if (meshId) {
+    Canvas3.removeMesh(meshId);
+  }
+  addedMap.delete(el);
+  meshIdMap.delete(el);
+  srcMap.delete(el);
+  const stop = stopMap.get(el);
+  if (stop) {
+    stop();
+    stopMap.delete(el);
+  }
+}
+export const vCanvas3Image = {
+  async mounted(el, binding) {
+    if (el.tagName !== "IMG") {
+      return;
+    }
+    const options = binding.value || {};
+    const stop = watch(
+      () => Canvas3.canvasInitiated.value,
+      (ready) => {
+        if (ready) tryAdd(el, options);
+      },
+      { immediate: true }
+    );
+    stopMap.set(el, stop);
+    const onLoad = () => tryAdd(el, options);
+    if (el.complete) {
+      await tryAdd(el, options);
+    } else {
+      el.addEventListener("load", onLoad, { once: true });
+    }
+  },
+  updated(el, binding) {
+    const options = binding.value || {};
+    const meshId = meshIdMap.get(el);
+    if (meshId && options?.uniforms) {
+      Canvas3.meshUniformsUpdate(meshId, options.uniforms);
+    }
+    const prevSrc = srcMap.get(el);
+    const current = getImgSrc(el);
+    if (prevSrc && current && prevSrc !== current) {
+      remove(el);
+      const stop = watch(
+        () => Canvas3.canvasInitiated.value,
+        (ready) => {
+          if (ready) tryAdd(el, options);
+        },
+        { immediate: true }
+      );
+      stopMap.set(el, stop);
+      if (el.complete) {
+        tryAdd(el, options);
+      } else {
+        const onLoad = () => tryAdd(el, options);
+        el.addEventListener("load", onLoad, { once: true });
+      }
+    }
+  },
+  unmounted(el) {
+    remove(el);
+  },
+  getSSRProps() {
+    return {};
+  }
+};

package/dist/runtime/directives/set-data-attributes.d.ts

@@ -0,0 +1,3 @@
+import type { Directive } from 'vue';
+export type AttrsType = Record<string, number | string>;
+export declare const vSetDataAttribute: Directive;

package/dist/runtime/directives/set-data-attributes.js

@@ -0,0 +1,34 @@
+const addDataSetToEl = (attrs, el) => {
+  if (!el) return;
+  if (el.nodeName == "#text") return;
+  for (const key in attrs) {
+    if (Object.prototype.hasOwnProperty.call(attrs, key) && el.setAttribute && attrs[key]?.toString()) {
+      el.setAttribute("data-" + key, attrs[key]?.toString());
+    }
+  }
+};
+const setElementsWithDataSets = (binding, el) => {
+  addDataSetToEl(binding.value, el);
+  if (el.childNodes) {
+    const setChildNodes = (el2) => {
+      for (const child of Array.from(el2.childNodes)) {
+        addDataSetToEl(binding.value, child ?? null);
+        if (child && child.childNodes && child.childNodes.length > 0) {
+          setChildNodes(child);
+        }
+      }
+    };
+    setChildNodes(el);
+  }
+};
+export const vSetDataAttribute = {
+  mounted(el, binding) {
+    setElementsWithDataSets(binding, el);
+  },
+  updated(el, binding) {
+    setElementsWithDataSets(binding, el);
+  },
+  getSSRProps() {
+    return {};
+  }
+};

package/dist/runtime/layouts/canvas3-layout.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="appContainer">
+    <div id="scrollContainer">
+      <div
+        id="scrollableContent"
+        ref="scrollableContent"
+      >
+        <slot />
+      </div>
+    </div>
+
+    <div
+      id="animationContainer"
+      ref="canvasEl"
+      :style="{ zIndex: props.canvas3options.canvasElement.zIndex }"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
+const emit = defineEmits(["canvas3-ready"]);
+const props = useAttrs();
+const canvasEl = ref("canvasEl");
+const scrollableContent = ref("scrollableContent");
+watch(
+  () => props.canvas3enabled,
+  async (newValue) => {
+    if (newValue) {
+      await Canvas3.init(
+        canvasEl.value,
+        scrollableContent.value,
+        props.canvas3options
+      );
+      emit("canvas3-ready");
+    }
+  }
+);
+</script>
+
+<style>
+#scrollContainer{height:100%;left:0;margin:0;overflow:hidden;padding:0;position:fixed;top:0;width:100%}#scrollableContent{will-change:transform}#animationContainer{height:100vh;left:0;margin:0 auto;max-height:100%;pointer-events:none;position:fixed;right:0;top:0;width:100%}
+</style>

package/dist/runtime/layouts/canvas3-layout.vue.d.ts

@@ -0,0 +1,11 @@
+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;
+};

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,3 @@
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((_nuxtApp) => {
+});

package/dist/runtime/plugins/directives.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/directives.js

@@ -0,0 +1,9 @@
+import { vOnScrollActivate } from "../directives/action-on-scroll.js";
+import { vSetDataAttribute } from "../directives/set-data-attributes.js";
+import { vCanvas3Image } from "../directives/canvas3-image-directive.client.js";
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("action-on-scroll", vOnScrollActivate);
+  nuxtApp.vueApp.directive("set-data-attributes", vSetDataAttribute);
+  nuxtApp.vueApp.directive("canvas3-image", vCanvas3Image);
+});

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

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

@@ -0,0 +1,4 @@
+declare module '*.glsl' {
+  const value: string
+  export default value
+}

package/dist/runtime/types/three-msdf-text-utils.d.ts

@@ -0,0 +1,36 @@
+declare module 'three-msdf-text-utils' {
+  import * as THREE from 'three'
+
+  export interface GlyphGeometryOptions {
+    flipY?: boolean
+    negate?: boolean
+    multipage?: boolean
+  }
+
+  export class GlyphGeometry extends THREE.BufferGeometry {
+    constructor(text: string, font: any, options?: GlyphGeometryOptions)
+    layout: any
+    update(text: string): void
+  }
+
+  export interface MSDFShaderOptions {
+    map?: THREE.Texture
+    color?: THREE.Color | string | number
+    opacity?: number
+    alphaTest?: number
+    negate?: boolean
+    precision?: string
+    multipage?: boolean
+    side?: THREE.Side
+    transparent?: boolean
+    defines?: { [key: string]: any }
+    uniforms?: { [key: string]: any }
+  }
+
+  export function createMSDFShader(options?: MSDFShaderOptions): {
+    uniforms: { [key: string]: THREE.IUniform }
+    vertexShader: string
+    fragmentShader: string
+    defines: { [key: string]: any }
+  }
+}

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

@@ -0,0 +1,71 @@
+import type { Mesh } from 'three';
+import type { DirectiveBinding } from 'vue';
+export type AnimationCallback = () => void;
+export type AnimationCallbacks = Map<string, AnimationCallback>;
+export type MeshMaterialUniform = Record<string, {
+    duration: number;
+    ease: string;
+    value: number;
+}>;
+type Shader = {
+    fragmentShader: string;
+    vertexShader: string;
+    textFragment?: string;
+    textVertex?: string;
+};
+type Shaders = {
+    default: Shader;
+} & Record<string, Shader>;
+type Font = {
+    fnt: string;
+    atlas: string;
+};
+type MeshAnimation = {
+    value: number;
+    duration: number;
+    ease: string;
+};
+export type Canvas3OptionsType = {
+    font: Font;
+    shaders: Shaders;
+    activateMeshOptions: {
+        image: Record<string, MeshAnimation>;
+        text: Record<string, MeshAnimation>;
+    };
+    canvasElement: {
+        zIndex: number;
+    };
+    prefersReducedMotion: boolean;
+    isMobile: boolean;
+    disabled: boolean;
+};
+export type MeshType = {
+    name: string;
+    htmlEl: HTMLElement;
+    mesh: Mesh;
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export type ScrollActionBinding = {
+    elNode: HTMLElement;
+    options: DirectiveBinding['value'];
+    arg: DirectiveBinding['arg'];
+};
+export type ScrollActionType = {
+    elNode: HTMLElement;
+    options: DirectiveBinding['value'];
+    arg: DirectiveBinding['arg'];
+    containedMeshIds?: string[];
+    bounds: DOMRect;
+    containerId?: string;
+    fixPosition?: number;
+    containerEl?: HTMLElement;
+    childEl?: HTMLElement;
+    childElBounds?: DOMRect;
+    margin?: number;
+    containerBottom?: number;
+    trackOnly?: boolean;
+};
+export {};

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/TextLayout.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/createIndices.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/utils.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/MSDFFont/MSDFTextGeometry/vertices.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,65 @@
+import * as THREE from 'three';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import type { Pass } from 'three/addons/postprocessing/Pass.js';
+import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+import type { ShaderMaterial } from 'three';
+import Scroll from '#canvas3-nuxt/utils/canvas3/scroll';
+import type { AnimationCallback, AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType } from '#canvas3-nuxt/types/types';
+declare class Canvas3Class {
+    canvasInitiated: import("vue").Ref<boolean, boolean>;
+    animateImageMesh: boolean;
+    canvasContainer: HTMLElement | null;
+    scrollableContent: HTMLElement | null;
+    time: number;
+    scene: THREE.Scene;
+    MSDFTextGeometryAtlas: any;
+    MSDFTextGeometryFont: any;
+    materials: ShaderMaterial[];
+    imageStore: MeshType[];
+    textStore: MeshType[];
+    activateMeshUniformMap: Map<string, MeshMaterialUniform>;
+    scroll: Scroll | null;
+    currentScroll: number;
+    options: Canvas3OptionsType;
+    width: number;
+    height: number;
+    camera: THREE.PerspectiveCamera | null;
+    composer: EffectComposer | null;
+    renderPass: Pass | null;
+    renderer: any;
+    myEffect: any;
+    customPass: ShaderPass | null;
+    animations: AnimationCallbacks;
+    mouse: {
+        x: number;
+        y: number;
+        movementX: number;
+        movementY: number;
+        xPrev: number;
+        yPrev: number;
+    };
+    init(canvasElement: HTMLElement, scrollableContent: HTMLElement, canvas3Options: Canvas3OptionsType): Promise<void>;
+    setCanvasAndCamera(): void;
+    resizeOnChange(): void;
+    resizeImageStore(): void;
+    resizeTextStore(): void;
+    setImageMeshPositions(): void;
+    setTextMeshPositions(): void;
+    meshUniformsUpdate(id: string, uniforms: MeshMaterialUniform): void;
+    activateMesh(meshId: string, isActive: boolean): void;
+    addOnScrollActivateElement(binding: ScrollActionBinding): void;
+    updateOnScrollActiveElement(updatedBinding: ScrollActionBinding): void;
+    removeScrollActiveElement(elNode: HTMLElement): void;
+    removeMesh(id: string): void;
+    addAnimationToRender(callBackName: string, callBackFunction: AnimationCallback): void;
+    addImageAsMesh(imgHtmlEl: HTMLImageElement, shaderName: string, meshId: string, meshUniforms: MeshMaterialUniform, activateMeshUniforms: MeshMaterialUniform): Promise<void>;
+    composerPass(): void;
+    setSize(): void;
+    scrollToTop(delay?: number): void;
+    scrollTo(position: number, delay?: number): void;
+    scrollToElBySelector(elQuerySelector: string, delay?: number): void;
+    setMeshPositionsUpdate(state: boolean): void;
+    render(): void;
+}
+export declare const Canvas3: Canvas3Class;
+export {};