@canvas3/nuxt 0.1.28 → 0.1.31

package/dist/module.json

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

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

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

package/dist/runtime/directives/{action-on-scroll.js → canvas3-scroll-action.js}

@@ -1,8 +1,9 @@
 import { watch } from "vue";
 import { Canvas3 } from "#canvas3-nuxt/utils/canvas3/canvas3";
-export const vOnScrollActivate = {
+export const vCanvas3ScrollAction = {
   mounted(el, binding) {
-    el.dataset.scrollActivateId = crypto.randomUUID();
+    const id = crypto.randomUUID();
+    el.dataset.scrollActivateId = id;
     if (binding.value?.scrollSpeedSetTo?.value) {
       el.dataset.scrollSpeed = binding.value?.scrollSpeedSetTo?.value;
     }
@@ -26,13 +27,24 @@ export const vOnScrollActivate = {
       );
     }
   },
-  updated(el, binding) {
-    Canvas3.updateOnScrollActiveElement({
-      elNode: el,
-      options: binding.value,
-      arg: binding.arg
-    });
-  },
+  //* ************************
+  // DEACTIVATE UPDATES - no need as uniforms are reference based and do not need updates
+  // updated(el, binding) {
+  // const existingElement = Canvas3.getScrollActiveElement(el.dataset.scrollActivateId)
+  // if (existingElement) {
+  //   const oldBinding = existingElement.options
+  //
+  //   const isSame = shallowEqualObject(binding.value, oldBinding)
+  //   if (!isSame) {
+  //     console.log('isSame', isSame, el.dataset.scrollActivateId)
+  //     Canvas3.updateOnScrollActiveElement({
+  //       elNode: el,
+  //       options: binding.value,
+  //       arg: binding.arg,
+  //     })
+  //   }
+  // }
+  // },
   unmounted(el) {
     Canvas3.removeScrollActiveElement(el);
   },

package/dist/runtime/plugins/directives.js

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

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

@@ -4,7 +4,7 @@ import type { Pass } from 'three/addons/postprocessing/Pass.js';
 import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 import type { ShaderMaterial, WebGLRenderer } from 'three';
 import Scroll from '#canvas3-nuxt/utils/canvas3/scroll';
-import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType, AnimationCallSetup } from '#canvas3-nuxt/types/types';
+import type { AnimationCallbacks, Canvas3OptionsType, ScrollActionBinding, MeshMaterialUniform, MeshType, myEffectType, AnimationCallSetup, ScrollActionType } from '#canvas3-nuxt/types/types';
 declare class Canvas3Class {
     canvasInitiated: import("vue").Ref<boolean, boolean>;
     renderDisabled: boolean;
@@ -49,6 +49,7 @@ declare class Canvas3Class {
     meshUniformsUpdate(id: string, uniforms: MeshMaterialUniform): void;
     activateMesh(meshId: string, isActive: boolean): void;
     addOnScrollActivateElement(binding: ScrollActionBinding): void;
+    getScrollActiveElement(scrollActiveElementId: string): ScrollActionType | undefined;
     updateOnScrollActiveElement(updatedBinding: ScrollActionBinding): void;
     removeScrollActiveElement(elNode: HTMLElement): void;
     removeMesh(id: string): void;

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

@@ -206,6 +206,19 @@ class Canvas3Class {
     const newBinding = generateBindingLogic(binding);
     this.scroll?.DOM.onScrollActivateElements.push(newBinding);
   }
+  getScrollActiveElement(scrollActiveElementId) {
+    if (!this.scroll) return;
+    let scrollActiveElement;
+    for (const [
+      index,
+      item
+    ] of this.scroll.DOM.onScrollActivateElements.entries()) {
+      if (item.elNode.dataset.scrollActivateId === scrollActiveElementId) {
+        scrollActiveElement = this.scroll.DOM.onScrollActivateElements[index];
+      }
+    }
+    return scrollActiveElement;
+  }
   updateOnScrollActiveElement(updatedBinding) {
     if (!this.scroll) return;
     for (const [

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

@@ -99,12 +99,12 @@ export default class Scroll {
         if (item.options.onScrollCallback && this.scrollInProgress) {
           item.options.onScrollCallback(item, this.speed, this.current);
         }
-        if (!item.isInView && !item.options.activateOnce) {
+        if (!item.isInView) {
           item.isInView = true;
           this.setElementActive(item, true);
         }
       } else {
-        if (item.isInView) {
+        if (item.isInView && !item.options.activateOnce) {
           item.isInView = false;
           this.setElementActive(item, false);
         }

package/package.json

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

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

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