masoneffect 2.0.5 → 2.0.7

package/dist/vue/scrollFadeIn/index.d.ts

@@ -0,0 +1,272 @@
+export declare class Count {
+    container: HTMLElement;
+    config: Required<Omit<CountOptions, 'onUpdate' | 'onComplete'>> & {
+        onUpdate: CountOptions['onUpdate'];
+        onComplete: CountOptions['onComplete'];
+    };
+    currentValue: number;
+    startTime: number | null;
+    animationFrameId: number | null;
+    visibilityManager: VisibilityManager | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    constructor(container: HTMLElement | string, options: CountOptions);
+    init(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    updateDisplay(value: number): void;
+    formatNumber(value: number): string;
+    updateConfig(newConfig: Partial<CountOptions>): void;
+    getValue(): number;
+    destroy(): void;
+}
+
+export declare interface CountOptions {
+    targetValue: number;
+    duration?: number;
+    startValue?: number;
+    enabled?: boolean;
+    easing?: (t: number) => number;
+    threshold?: number;
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    onUpdate?: (value: number) => void;
+    onComplete?: () => void;
+}
+
+declare const easingFunctions: {
+    linear: (t: number) => number;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+};
+export { easingFunctions }
+export { easingFunctions as scrollFadeInEasingFunctions }
+
+export declare interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    tx: number;
+    ty: number;
+    initialX?: number;
+    initialY?: number;
+    j: number;
+}
+
+export declare class ScrollFadeIn {
+    container: HTMLElement;
+    config: Required<Omit<ScrollFadeInOptions, 'onStart' | 'onComplete' | 'easing'>> & {
+        easing: (t: number) => number;
+        onStart: ScrollFadeInOptions['onStart'];
+        onComplete: ScrollFadeInOptions['onComplete'];
+    };
+    visibilityManager: VisibilityManager | null;
+    animationFrameId: number | null;
+    startTime: number | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    initialTransform: string;
+    targetDistance: number;
+    constructor(container: HTMLElement | string, options?: ScrollFadeInOptions);
+    init(): void;
+    parseDistance(distance: string): number;
+    setInitialPosition(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    animate(): void;
+    complete(): void;
+    reset(): void;
+    stop(): void;
+    updateConfig(newConfig: Partial<ScrollFadeInOptions>): void;
+    destroy(): void;
+}
+
+export declare interface ScrollFadeInOptions {
+    direction?: 'top' | 'right' | 'bottom' | 'left';
+    distance?: string;
+    duration?: number;
+    easing?: (t: number) => number;
+    threshold?: number;
+    rootMargin?: string;
+    triggerOnce?: boolean;
+    enabled?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
+declare class TextToParticle {
+    container: HTMLElement;
+    config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {
+        onReady: TextToParticleOptions['onReady'];
+        onUpdate: TextToParticleOptions['onUpdate'];
+    };
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    offCanvas: HTMLCanvasElement;
+    offCtx: CanvasRenderingContext2D;
+    W: number;
+    H: number;
+    DPR: number;
+    particles: Particle[];
+    mouse: {
+        x: number;
+        y: number;
+        down: boolean;
+    };
+    animationId: number | null;
+    isRunning: boolean;
+    visibilityManager: VisibilityManager | null;
+    debounceDelay: number;
+    _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
+    _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
+    constructor(container: HTMLElement | string, options?: TextToParticleOptions);
+    init(): void;
+    setupVisibilityManager(): void;
+    resize(): void;
+    /**
+     * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
+     * @param fontSize 확인할 폰트 크기
+     * @param text 텍스트 (\n으로 줄바꿈 구분)
+     * @param maxWidth 최대 너비
+     * @param maxHeight 최대 높이
+     * @returns { width: number, height: number, fits: boolean }
+         */
+     private measureTextFit;
+     /**
+      * 이진 검색을 사용하여 적절한 폰트 크기를 찾는 최적화된 함수
+      * 반복 횟수를 O(log n)으로 줄여 성능 개선 (최대 15회 반복, 기존 최대 100회에서 대폭 감소)
+      */
+     private findOptimalFontSize;
+     buildTargets(): void;
+     makeParticle(): Particle;
+     initParticles(): void;
+     scatter(): void;
+     morph(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
+     _morphInternal(textOrOptions?: string | Partial<TextToParticleOptions> | null): void;
+     update(): void;
+     animate(): void;
+     start(): void;
+     stop(): void;
+     setupEventListeners(): void;
+     removeEventListeners(): void;
+     handleResize(): void;
+     handleMouseMove(e: MouseEvent): void;
+     handleMouseLeave(): void;
+     handleMouseDown(): void;
+     handleMouseUp(): void;
+     updateConfig(newConfig: Partial<TextToParticleOptions>): void;
+     _updateConfigInternal(newConfig: Partial<TextToParticleOptions>): void;
+     destroy(): void;
+    }
+    export { TextToParticle as MasonEffect }
+    export { TextToParticle }
+    export default TextToParticle;
+
+    declare interface TextToParticleOptions {
+        text?: string;
+        densityStep?: number;
+        maxParticles?: number;
+        pointSize?: number;
+        ease?: number;
+        repelRadius?: number;
+        repelStrength?: number;
+        particleColor?: string;
+        fontFamily?: string;
+        fontSize?: number | null;
+        width?: number | null;
+        height?: number | null;
+        devicePixelRatio?: number | null;
+        debounceDelay?: number;
+        onReady?: (instance: TextToParticle) => void;
+        onUpdate?: (instance: TextToParticle) => void;
+    }
+    export { TextToParticleOptions as MasonEffectOptions }
+    export { TextToParticleOptions }
+
+    export declare class Typing {
+        container: HTMLElement;
+        config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
+            onUpdate: TypingOptions['onUpdate'];
+            onComplete: TypingOptions['onComplete'];
+        };
+        textUnits: string[];
+        charUnitRanges: Array<{
+            start: number;
+            end: number;
+            isHangul: boolean;
+        }>;
+        currentIndex: number;
+        displayedText: string;
+        timeoutId: ReturnType<typeof setTimeout> | null;
+        visibilityManager: VisibilityManager | null;
+        isRunning: boolean;
+        hasTriggered: boolean;
+        originalText: string;
+        constructor(container: HTMLElement | string, options: TypingOptions);
+        init(): void;
+        setupVisibilityManager(): void;
+        private buildTextFromUnits;
+        start(): void;
+        typeNext(): void;
+        stop(): void;
+        reset(): void;
+        updateDisplay(text: string): void;
+        setText(newText: string): void;
+        destroy(): void;
+    }
+
+    export declare interface TypingOptions {
+        text: string;
+        speed?: number;
+        delay?: number;
+        enabled?: boolean;
+        threshold?: number;
+        rootMargin?: string;
+        triggerOnce?: boolean;
+        showCursor?: boolean;
+        cursorChar?: string;
+        onUpdate?: (text: string) => void;
+        onComplete?: () => void;
+    }
+
+    declare class VisibilityManager {
+        private container;
+        private options;
+        private intersectionObserver;
+        private visibilityChangeHandler;
+        private isVisible;
+        private isPageVisible;
+        constructor(container: HTMLElement, options?: VisibilityManagerOptions);
+        private setupIntersectionObserver;
+        private setupPageVisibility;
+        /**
+         * 현재 요소가 화면에 보이는지 확인
+         */
+        getIsVisible(): boolean;
+        /**
+         * 옵션 업데이트
+         */
+        updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
+        /**
+         * 리소스 정리
+         */
+        destroy(): void;
+    }
+
+    /**
+     * VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
+     * 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
+     */
+    declare interface VisibilityManagerOptions {
+        threshold?: number;
+        rootMargin?: string;
+        onVisible?: () => void;
+        onHidden?: () => void;
+    }
+
+    export { }

package/dist/vue/scrollFadeIn/index.mjs

@@ -0,0 +1,447 @@
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot } from "vue";
+class VisibilityManager {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      onVisible: options.onVisible,
+      onHidden: options.onHidden
+    };
+    this.intersectionObserver = null;
+    this.visibilityChangeHandler = null;
+    this.isVisible = false;
+    this.isPageVisible = typeof document !== "undefined" ? !document.hidden : true;
+    this.setupIntersectionObserver();
+    this.setupPageVisibility();
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      this.isVisible = true;
+      if (this.isPageVisible && this.options.onVisible) {
+        this.options.onVisible();
+      }
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting) {
+            this.isVisible = true;
+            if (this.isPageVisible && this.options.onVisible) {
+              this.options.onVisible();
+            }
+          } else {
+            this.isVisible = false;
+            if (this.options.onHidden) {
+              this.options.onHidden();
+            }
+          }
+        }
+      },
+      {
+        threshold: this.options.threshold,
+        rootMargin: this.options.rootMargin
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  setupPageVisibility() {
+    if (typeof document === "undefined") return;
+    this.visibilityChangeHandler = () => {
+      const wasVisible = this.isPageVisible;
+      this.isPageVisible = !document.hidden;
+      if (document.hidden) {
+        if (this.options.onHidden) {
+          this.options.onHidden();
+        }
+      } else if (wasVisible !== this.isPageVisible) {
+        if (this.isVisible && this.options.onVisible) {
+          this.options.onVisible();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+    if (document.hidden && this.isVisible) {
+      if (this.options.onHidden) {
+        this.options.onHidden();
+      }
+    }
+  }
+  /**
+   * 현재 요소가 화면에 보이는지 확인
+   */
+  getIsVisible() {
+    return this.isVisible && this.isPageVisible;
+  }
+  /**
+   * 옵션 업데이트
+   */
+  updateOptions(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    this.setupIntersectionObserver();
+  }
+  /**
+   * 리소스 정리
+   */
+  destroy() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    if (this.visibilityChangeHandler && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
+  }
+}
+const easingFunctions = {
+  easeOutCubic: (t) => --t * t * t + 1
+};
+class ScrollFadeIn {
+  // 계산된 거리 (px)
+  constructor(container, options = {}) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    this.config = {
+      direction: options.direction ?? "bottom",
+      distance: options.distance ?? "50px",
+      duration: options.duration ?? 800,
+      easing: options.easing ?? easingFunctions.easeOutCubic,
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      triggerOnce: options.triggerOnce ?? false,
+      enabled: options.enabled ?? true,
+      onStart: options.onStart || null,
+      onComplete: options.onComplete || null
+    };
+    this.visibilityManager = null;
+    this.animationFrameId = null;
+    this.startTime = null;
+    this.isRunning = false;
+    this.hasTriggered = false;
+    this.initialTransform = "";
+    this.targetDistance = 0;
+    this.init();
+  }
+  init() {
+    const computedStyle = window.getComputedStyle(this.container);
+    this.initialTransform = computedStyle.transform !== "none" ? computedStyle.transform : this.container.style.transform || "";
+    this.targetDistance = this.parseDistance(this.config.distance);
+    this.setInitialPosition();
+    this.setupVisibilityManager();
+  }
+  parseDistance(distance) {
+    const match = distance.match(/^(-?\d+\.?\d*)(px|rem|em|%|vh|vw)$/);
+    if (!match) {
+      const num = parseFloat(distance) || 50;
+      return num;
+    }
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    switch (unit) {
+      case "px":
+        return value;
+      case "rem":
+      case "em":
+        const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+        return value * fontSize;
+      case "%":
+        const rect = this.container.getBoundingClientRect();
+        const dimension = this.config.direction === "top" || this.config.direction === "bottom" ? rect.height : rect.width;
+        return value / 100 * dimension;
+      case "vh":
+        return value / 100 * window.innerHeight;
+      case "vw":
+        return value / 100 * window.innerWidth;
+      default:
+        return value;
+    }
+  }
+  setInitialPosition() {
+    const direction = this.config.direction;
+    let translateX = 0;
+    let translateY = 0;
+    switch (direction) {
+      case "top":
+        translateY = -this.targetDistance;
+        break;
+      case "right":
+        translateX = this.targetDistance;
+        break;
+      case "bottom":
+        translateY = this.targetDistance;
+        break;
+      case "left":
+        translateX = -this.targetDistance;
+        break;
+    }
+    const existingTransform = this.initialTransform || "";
+    const translate = `translate(${translateX}px, ${translateY}px)`;
+    if (existingTransform && existingTransform !== "none") {
+      this.container.style.transform = `${translate} ${existingTransform}`;
+    } else {
+      this.container.style.transform = translate;
+    }
+    this.container.style.opacity = "0";
+    this.container.style.transition = "none";
+  }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      onVisible: () => {
+        if (!this.hasTriggered && this.config.enabled) {
+          this.hasTriggered = true;
+          this.start();
+        }
+      },
+      onHidden: () => {
+        if (!this.config.triggerOnce && this.isRunning) {
+          this.reset();
+        }
+      }
+    });
+  }
+  start() {
+    if (this.isRunning) return;
+    this.isRunning = true;
+    this.startTime = performance.now();
+    if (this.config.onStart) {
+      this.config.onStart();
+    }
+    this.container.style.transition = "none";
+    this.animate();
+  }
+  animate() {
+    if (!this.isRunning) return;
+    const currentTime = performance.now();
+    const elapsed = currentTime - (this.startTime || 0);
+    const progress = Math.min(elapsed / this.config.duration, 1);
+    const easedProgress = this.config.easing(progress);
+    const direction = this.config.direction;
+    let translateX = 0;
+    let translateY = 0;
+    switch (direction) {
+      case "top":
+        translateY = -this.targetDistance * (1 - easedProgress);
+        break;
+      case "right":
+        translateX = this.targetDistance * (1 - easedProgress);
+        break;
+      case "bottom":
+        translateY = this.targetDistance * (1 - easedProgress);
+        break;
+      case "left":
+        translateX = -this.targetDistance * (1 - easedProgress);
+        break;
+    }
+    const existingTransform = this.initialTransform || "";
+    const translate = `translate(${translateX}px, ${translateY}px)`;
+    if (existingTransform && existingTransform !== "none") {
+      this.container.style.transform = `${translate} ${existingTransform}`;
+    } else {
+      this.container.style.transform = translate;
+    }
+    this.container.style.opacity = String(easedProgress);
+    if (progress < 1) {
+      this.animationFrameId = requestAnimationFrame(() => this.animate());
+    } else {
+      this.complete();
+    }
+  }
+  complete() {
+    this.isRunning = false;
+    if (this.initialTransform && this.initialTransform !== "none") {
+      this.container.style.transform = this.initialTransform;
+    } else {
+      this.container.style.transform = "";
+    }
+    this.container.style.opacity = "1";
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    if (this.config.onComplete) {
+      this.config.onComplete();
+    }
+  }
+  reset() {
+    this.stop();
+    this.hasTriggered = false;
+    this.setInitialPosition();
+  }
+  stop() {
+    this.isRunning = false;
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+  // 설정 업데이트
+  updateConfig(newConfig) {
+    const wasRunning = this.isRunning;
+    this.stop();
+    this.config = {
+      ...this.config,
+      ...newConfig,
+      easing: newConfig.easing ?? this.config.easing,
+      onStart: newConfig.onStart ?? this.config.onStart,
+      onComplete: newConfig.onComplete ?? this.config.onComplete
+    };
+    if (newConfig.distance) {
+      this.targetDistance = this.parseDistance(this.config.distance);
+    }
+    this.setInitialPosition();
+    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0) {
+      if (this.visibilityManager) {
+        this.visibilityManager.destroy();
+        this.visibilityManager = null;
+      }
+      this.setupVisibilityManager();
+    }
+    if (wasRunning && this.config.enabled) {
+      this.start();
+    }
+  }
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
+    }
+    this.container.style.transform = this.initialTransform || "";
+    this.container.style.opacity = "";
+    this.container.style.transition = "";
+  }
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ScrollFadeIn",
+  props: {
+    className: { default: "" },
+    style: { default: () => ({}) },
+    direction: { default: "bottom" },
+    distance: { default: "50px" },
+    duration: { default: 800 },
+    easing: { type: Function, default: () => (t) => t },
+    threshold: { default: 0.1 },
+    rootMargin: { default: "0px" },
+    triggerOnce: { type: Boolean, default: false },
+    enabled: { type: Boolean, default: true },
+    onStart: { type: Function, default: null },
+    onComplete: { type: Function, default: null }
+  },
+  emits: ["start", "complete"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const container = ref(null);
+    let instance = null;
+    const init = () => {
+      if (!container.value) return;
+      const options = {
+        direction: props.direction,
+        distance: props.distance,
+        duration: props.duration,
+        easing: props.easing,
+        threshold: props.threshold,
+        rootMargin: props.rootMargin,
+        triggerOnce: props.triggerOnce,
+        enabled: props.enabled,
+        onStart: () => {
+          if (props.onStart) props.onStart();
+          emit("start");
+        },
+        onComplete: () => {
+          if (props.onComplete) props.onComplete();
+          emit("complete");
+        }
+      };
+      instance = new ScrollFadeIn(container.value, options);
+    };
+    watch(
+      () => [
+        props.direction,
+        props.distance,
+        props.duration,
+        props.easing,
+        props.threshold,
+        props.rootMargin,
+        props.triggerOnce,
+        props.enabled
+      ],
+      () => {
+        if (instance) {
+          instance.updateConfig({
+            direction: props.direction,
+            distance: props.distance,
+            duration: props.duration,
+            easing: props.easing,
+            threshold: props.threshold,
+            rootMargin: props.rootMargin,
+            triggerOnce: props.triggerOnce,
+            enabled: props.enabled,
+            onStart: () => {
+              if (props.onStart) props.onStart();
+              emit("start");
+            },
+            onComplete: () => {
+              if (props.onComplete) props.onComplete();
+              emit("complete");
+            }
+          });
+        }
+      }
+    );
+    onMounted(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      if (instance) {
+        instance.destroy();
+        instance = null;
+      }
+    });
+    __expose({
+      start: () => {
+        if (instance) instance.start();
+      },
+      stop: () => {
+        if (instance) instance.stop();
+      },
+      reset: () => {
+        if (instance) instance.reset();
+      },
+      updateConfig: (config) => {
+        if (instance) instance.updateConfig(config);
+      },
+      destroy: () => {
+        if (instance) {
+          instance.destroy();
+          instance = null;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container,
+        class: normalizeClass(__props.className),
+        style: normalizeStyle(__props.style)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};