@canvas3/nuxt 0.1.3 → 0.1.4

package/dist/module.json

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

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

@@ -69,6 +69,7 @@ export type scrollActionBindOptionType = {
         duration: number;
     };
     activateCallback?: (item: ScrollActionType) => void;
+    deactivateCallback?: (item: ScrollActionType) => void;
     onScrollCallback?: (item: ScrollActionType, scrollSpeed: number, currentPosition: number) => void;
     activeRangeMargin?: number;
     activeRangeOrigin?: number;
@@ -94,6 +95,7 @@ export type ScrollActionType = {
     margin?: number;
     containerBottom?: number;
     trackOnly?: boolean;
+    isInView: boolean;
 };
 export type myEffectType = {
     uniforms: BaseUniform;

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

@@ -1,6 +1,6 @@
-import type { ScrollActionType } from '#canvas3-nuxt/types/types';
+import type { ScrollActionBinding, ScrollActionType } from '#canvas3-nuxt/types/types';
 import type { Mesh, ShaderMaterial, Texture } from 'three';
-export declare function generateBindingLogic(newBindingData: ScrollActionType): ScrollActionType;
+export declare function generateBindingLogic(newBindingData: ScrollActionBinding): ScrollActionType;
 export declare function findMeshIDs(elParent: HTMLElement): false | string[];
 export declare function loadTexture(src: string): Promise<Texture>;
 export declare const heightPositionCoef = 1.38;
@@ -9,7 +9,7 @@ export declare function getMSDFFontMeshScales(boundsWidth: number, geometryWidth
     scaleY: number;
 };
 export declare function setScrollActiveElements(elNode: HTMLElement, meshIds: string[], state: string): void;
-export declare function elementNearViewport(bounds: DOMRect, margin?: number): boolean;
+export declare function elementNearViewport(bounds: DOMRect, activeRangeInPx: 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;

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

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import { gsap } from "gsap";
 export function generateBindingLogic(newBindingData) {
-  const binding = newBindingData;
+  const binding = { ...newBindingData, isInView: false };
   binding.elNode.dataset.activeScroll = newBindingData?.elNode?.dataset?.activeScroll ?? "false";
   binding.containedMeshIds = [];
   binding.bounds = binding.elNode.getBoundingClientRect();
@@ -86,9 +86,8 @@ export function setScrollActiveElements(elNode, meshIds, state) {
     }
   }
 }
-export function elementNearViewport(bounds, margin = 200) {
-  const windowHeight = window.innerHeight;
-  return bounds.top >= -margin && bounds.top <= windowHeight || bounds.bottom >= -margin && bounds.bottom <= windowHeight || bounds.top <= -margin && bounds.bottom >= windowHeight;
+export function elementNearViewport(bounds, activeRangeInPx) {
+  return bounds.top <= activeRangeInPx && bounds.top >= -bounds.height;
 }
 export const lerp = (a, b, n) => (1 - n) * a + n * b;
 export function getShaderMaterial(mesh) {

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

@@ -67,17 +67,20 @@ export default class Scroll {
   }
   setElementActive(item, isActive) {
     if (!item.containedMeshIds) return;
+    item.isInView = isActive;
+    const isActiveString = isActive ? "true" : "false";
+    item.elNode.dataset.activeScroll = isActiveString;
+    setScrollActiveElements(item.elNode, item.containedMeshIds, isActiveString);
     if (isActive) {
-      item.elNode.dataset.activeScroll = "true";
-      setScrollActiveElements(item.elNode, item.containedMeshIds, "true");
       item.elNode.classList.add("active");
       if (item.options.activateCallback) {
         item.options.activateCallback(item);
       }
     } else {
-      item.elNode.dataset.activeScroll = "false";
-      setScrollActiveElements(item.elNode, item.containedMeshIds, "false");
       if (!item.trackOnly) item.elNode.classList.remove("active");
+      if (item.options.deactivateCallback) {
+        item.options.deactivateCallback(item);
+      }
     }
     if (item.containedMeshIds.length > 0 && !item.trackOnly) {
       for (const meshId of item.containedMeshIds) {
@@ -87,29 +90,20 @@ export default class Scroll {
   }
   setElementsScrollPositions() {
     if (this.DOM.onScrollActivateElements.length === 0) return;
+    const windowInnerHeight = window.innerHeight;
     for (const item of this.DOM.onScrollActivateElements) {
       const bounds = item.elNode.getBoundingClientRect();
       const itemRangeMargin = item.options.activeRangeMargin ?? 0;
-      const elementTrack = elementNearViewport(bounds, 200 + itemRangeMargin);
-      if (elementTrack) {
-        const activeRange = item.options.activeRange ?? 1;
-        const activeRangeOrigin = item.options.activeRangeOrigin ?? 1;
-        const activeRangeOriginPx = activeRangeOrigin * window.innerHeight;
-        const activeRangeInPx = (1 - activeRange) * activeRangeOriginPx;
-        const itemRangeMargin2 = item.options.activeRangeMargin ?? 0;
-        const activeFromTop = bounds.top - itemRangeMargin2 <= activeRangeOriginPx - activeRangeInPx;
-        const activeFromBottom = !item.options.bidirectionalActivation || bounds.bottom - itemRangeMargin2 >= activeRangeInPx + activeRangeOriginPx;
-        if (activeFromTop && activeFromBottom) {
-          if (item.options.onScrollCallback && this.scrollInProgress)
-            item.options.onScrollCallback(item, this.speed, this.current);
-          if (item.elNode.dataset.activeScroll !== "true") {
-            this.setElementActive(item, true);
-          }
-        } else {
-          if (item.elNode.dataset.activeScroll === "true" && !item.options.activateOnce) {
-            this.setElementActive(item, false);
-          }
-        }
+      const activeRange = item.options.activeRange ?? 1;
+      const activeRangeInPx = activeRange * windowInnerHeight;
+      const isInView = elementNearViewport(bounds, activeRangeInPx);
+      if (isInView) {
+        if (item.options.onScrollCallback && this.scrollInProgress)
+          item.options.onScrollCallback(item, this.speed, this.current);
+        if (!item.isInView)
+          this.setElementActive(item, true);
+      } else if (item.isInView && !item.options.activateOnce) {
+        this.setElementActive(item, false);
       }
       if (typeof item.options.scrollSpeed?.value === "number") {
         item.elNode.style.transition = `linear translate3d 0s`;

package/package.json

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