masoneffect 2.0.2 → 2.0.4

package/dist/svelte/textToParticle/index.d.ts

@@ -160,4 +160,57 @@ declare class TextToParticle {
     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;
+        intersectionObserver: IntersectionObserver | null;
+        isRunning: boolean;
+        hasTriggered: boolean;
+        originalText: string;
+        constructor(container: HTMLElement | string, options: TypingOptions);
+        init(): void;
+        setupIntersectionObserver(): void;
+        private buildTextFromUnits;
+        start(): void;
+        typeNext(): void;
+        stop(): void;
+        reset(): void;
+        updateDisplay(text: string): void;
+        setText(newText: string): void;
+        destroy(): void;
+    }
+
+    /**
+     * Typing - 타이핑 애니메이션 효과
+     * 바닐라 JS 코어 클래스
+     *
+     * 사용법:
+     * import { Typing } from 'masoneffect/typing';
+     */
+    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;
+    }
+
     export { }

package/dist/svelte/typing/index.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty,e=(e,n,s)=>((e,n,s)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[n]=s)(e,"symbol"!=typeof n?n+"":n,s);const n=require("svelte");function s(){}function i(t){return t()}function r(){return Object.create(null)}function o(t){t.forEach(i)}function c(t){return"function"==typeof t}function u(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function h(t,e,n){t.$$.on_destroy.push(function(t,...e){if(null==t){for(const t of e)t(void 0);return s}const n=t.subscribe(...e);return n.unsubscribe?()=>n.unsubscribe():n}(e,n))}function a(t){t.parentNode&&t.parentNode.removeChild(t)}function l(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}let d;function f(t){d=t}const g=[],p=[];let x=[];const $=[],y=Promise.resolve();let b=!1;function m(t){x.push(t)}const v=new Set;let w=0;function T(){if(0!==w)return;const t=d;do{try{for(;w<g.length;){const t=g[w];w++,f(t),_(t.$$)}}catch(e){throw g.length=0,w=0,e}for(f(null),g.length=0,w=0;p.length;)p.pop()();for(let t=0;t<x.length;t+=1){const e=x[t];v.has(e)||(v.add(e),e())}x.length=0}while(g.length);for(;$.length;)$.pop()();b=!1,v.clear(),f(t)}function _(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(m)}}const C=new Set;function O(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];x.forEach(s=>-1===t.indexOf(s)?e.push(s):n.push(s)),n.forEach(t=>t()),x=e}(n.after_update),o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function U(t,e){-1===t.$$.dirty[0]&&(g.push(t),b||(b=!0,y.then(T)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function I(t,e,n,u,h,l,g=null,p=[-1]){const x=d;f(t);const $=t.$$={fragment:null,ctx:[],props:l,update:s,not_equal:h,bound:r(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(x?x.$$.context:[])),callbacks:r(),dirty:p,skip_bound:!1,root:e.target||x.$$.root};g&&g($.root);let y=!1;if($.ctx=n?n(t,e.props||{},(e,n,...s)=>{const i=s.length?s[0]:n;return $.ctx&&h($.ctx[e],$.ctx[e]=i)&&(!$.skip_bound&&$.bound[e]&&$.bound[e](i),y&&U(t,e)),n}):[],$.update(),y=!0,o($.before_update),$.fragment=!!u&&u($.ctx),e.target){if(e.hydrate){const t=(w=e.target,Array.from(w.childNodes));$.fragment&&$.fragment.l(t),t.forEach(a)}else $.fragment&&$.fragment.c();e.intro&&((b=t.$$.fragment)&&b.i&&(C.delete(b),b.i(v))),function(t,e,n){const{fragment:s,after_update:r}=t.$$;s&&s.m(e,n),m(()=>{const e=t.$$.on_mount.map(i).filter(c);t.$$.on_destroy?t.$$.on_destroy.push(...e):o(e),t.$$.on_mount=[]}),r.forEach(m)}(t,e.target,e.anchor),T()}var b,v,w;f(x)}class R{constructor(){e(this,"$$"),e(this,"$$set")}$destroy(){O(this,1),this.$destroy=s}$on(t,e){if(!c(e))return s;const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}function M(t){const e=t.charCodeAt(0);if(e<44032||e>55203)return[t];const n=e-44032,s=Math.floor(n/588),i=Math.floor(n%588/28),r=n%28,o=["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"],c=[];return c.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][s]),c.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][i]),r>0&&c.push(o[r]),c}function k(t,e,n){const s=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),i=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(e),r=n?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(n):0;if(-1===s||-1===i)return t+(e||"")+(n||"");const o=44032+21*s*28+28*i+r;return String.fromCharCode(o)}function E(t){const e=[],n=[];for(let s=0;s<t.length;s++){const i=t[s],r=i.charCodeAt(0),o=e.length;if(r>=44032&&r<=55203){const t=M(i);e.push(...t),n.push({start:o,end:e.length,isHangul:!0})}else e.push(i),n.push({start:o,end:e.length,isHangul:!1})}return{units:e,charUnitRanges:n}}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");class N{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=e.text,this.config={text:e.text,speed:e.speed??50,delay:e.delay??0,enabled:e.enabled??!0,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,showCursor:e.showCursor??!0,cursorChar:e.cursorChar??"|",onUpdate:e.onUpdate||null,onComplete:e.onComplete||null};const n=E(this.config.text);this.textUnits=n.units,this.charUnitRanges=n.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const n of t)n.target===this.container&&n.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.disconnect()))},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}buildTextFromUnits(t){if(0===t)return"";let e="";for(let n=0;n<this.charUnitRanges.length;n++){const s=this.charUnitRanges[n];if(s.start>=t)break;const i=Math.min(t-s.start,s.end-s.start);if(i<=0)break;if(s.isHangul){const t=this.textUnits.slice(s.start,s.start+i);1===t.length?e+=t[0]:2===t.length?e+=k(t[0],t[1]):t.length>=3&&(e+=k(t[0],t[1],t[2]))}else i>0&&(e+=this.textUnits[s.start])}return e}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const e=E(t);this.textUnits=e.units,this.charUnitRanges=e.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function A(t){let e;return{c(){var n;n="div",e=document.createElement(n),l(e,"class",t[1]),l(e,"style",t[2])},m(n,s){!function(t,e,n){t.insertBefore(e,n||null)}(n,e,s),t[8](e)},p:s,i:s,o:s,d(n){n&&a(e),t[8](null)}}}function D(t,e,s){let i,r;h(t,effect,t=>s(10,i=t)),h(t,props,t=>s(11,r=t));let{text:o,speed:c=50,delay:u=0,enabled:a=!0,threshold:l=.2,rootMargin:d="0px 0px -100px 0px",triggerOnce:f=!1,showCursor:g=!0,cursorChar:x="|",className:$="",style:y="",onUpdate:b,onComplete:m}=r(),v=null,w=null;return n.onMount(()=>{if(!v)return;w=new N(v,{text:o,speed:c,delay:u,enabled:a,threshold:l,rootMargin:d,triggerOnce:f,showCursor:g,cursorChar:x,onUpdate:b,onComplete:m})}),n.onDestroy(()=>{w&&(w.destroy(),w=null)}),i(()=>{w&&o!==w.originalText&&w.setText(o)}),[v,$,y,function(){null==w||w.start()},function(){null==w||w.stop()},function(){null==w||w.reset()},function(t){null==w||w.setText(t)},function(){w&&(w.destroy(),w=null)},function(t){p[t?"unshift":"push"](()=>{v=t,s(0,v)})}]}module.exports=class extends R{constructor(t){super(),I(this,t,D,A,u,{start:3,stop:4,reset:5,setText:6,destroy:7})}get start(){return this.$$.ctx[3]}get stop(){return this.$$.ctx[4]}get reset(){return this.$$.ctx[5]}get setText(){return this.$$.ctx[6]}get destroy(){return this.$$.ctx[7]}};

package/dist/svelte/typing/index.d.ts

@@ -0,0 +1,216 @@
+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;
+    intersectionObserver: IntersectionObserver | null;
+    isRunning: boolean;
+    hasTriggered: boolean;
+    constructor(container: HTMLElement | string, options: CountOptions);
+    init(): void;
+    setupIntersectionObserver(): void;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    updateDisplay(value: number): void;
+    formatNumber(value: number): string;
+    updateConfig(newConfig: Partial<CountOptions>): void;
+    getValue(): number;
+    destroy(): void;
+}
+
+/**
+ * Count - 숫자 카운팅 애니메이션 효과
+ * 바닐라 JS 코어 클래스
+ *
+ * 사용법:
+ * import { Count } from 'masoneffect/count';
+ */
+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;
+}
+
+export declare const easingFunctions: {
+    linear: (t: number) => number;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+};
+
+export declare interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    tx: number;
+    ty: number;
+    initialX?: number;
+    initialY?: number;
+    j: number;
+}
+
+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;
+    isVisible: boolean;
+    intersectionObserver: IntersectionObserver | null;
+    debounceDelay: number;
+    _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
+    _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
+    constructor(container: HTMLElement | string, options?: TextToParticleOptions);
+    init(): void;
+    setupIntersectionObserver(): 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;
+
+    /**
+     * TextToParticle - 텍스트를 파티클로 변환하는 효과
+     * 바닐라 JS 코어 클래스
+     *
+     * 사용법:
+     * import { TextToParticle } from 'masoneffect/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;
+        intersectionObserver: IntersectionObserver | null;
+        isRunning: boolean;
+        hasTriggered: boolean;
+        originalText: string;
+        constructor(container: HTMLElement | string, options: TypingOptions);
+        init(): void;
+        setupIntersectionObserver(): void;
+        private buildTextFromUnits;
+        start(): void;
+        typeNext(): void;
+        stop(): void;
+        reset(): void;
+        updateDisplay(text: string): void;
+        setText(newText: string): void;
+        destroy(): void;
+    }
+
+    /**
+     * Typing - 타이핑 애니메이션 효과
+     * 바닐라 JS 코어 클래스
+     *
+     * 사용법:
+     * import { Typing } from 'masoneffect/typing';
+     */
+    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;
+    }
+
+    export { }