masoneffect 2.0.2 → 2.0.4

package/dist/svelte/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/index.mjs

@@ -22,6 +22,19 @@ function safe_not_equal(a, b) {
 function is_empty(obj) {
   return Object.keys(obj).length === 0;
 }
+function subscribe(store, ...callbacks) {
+  if (store == null) {
+    for (const callback of callbacks) {
+      callback(void 0);
+    }
+    return noop;
+  }
+  const unsub = store.subscribe(...callbacks);
+  return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
+}
+function component_subscribe(component, store, callback) {
+  component.$$.on_destroy.push(subscribe(store, callback));
+}
 function insert(target, node, anchor) {
   target.insertBefore(node, anchor || null);
 }
@@ -155,14 +168,14 @@ function make_dirty(component, i) {
   }
   component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
 }
-function init(component, options, instance, create_fragment2, not_equal, props, append_styles = null, dirty = [-1]) {
+function init(component, options, instance2, create_fragment2, not_equal, props2, append_styles = null, dirty = [-1]) {
   const parent_component = current_component;
   set_current_component(component);
   const $$ = component.$$ = {
     fragment: null,
     ctx: [],
     // state
-    props,
+    props: props2,
     update: noop,
     not_equal,
     bound: blank_object(),
@@ -181,7 +194,7 @@ function init(component, options, instance, create_fragment2, not_equal, props,
   };
   append_styles && append_styles($$.root);
   let ready = false;
-  $$.ctx = instance ? instance(component, options.props || {}, (i, ret, ...rest) => {
+  $$.ctx = instance2 ? instance2(component, options.props || {}, (i, ret, ...rest) => {
     const value = rest.length ? rest[0] : ret;
     if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
       if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value);
@@ -252,10 +265,10 @@ class SvelteComponent {
    * @param {Partial<Props>} props
    * @returns {void}
    */
-  $set(props) {
-    if (this.$$set && !is_empty(props)) {
+  $set(props2) {
+    if (this.$$set && !is_empty(props2)) {
       this.$$.skip_bound = true;
-      this.$$set(props);
+      this.$$set(props2);
       this.$$.skip_bound = false;
     }
   }
@@ -847,7 +860,232 @@ class Count {
     }
   }
 }
-function create_fragment$1(ctx) {
+function decomposeHangul(char) {
+  const code = char.charCodeAt(0);
+  if (code < 44032 || code > 55203) {
+    return [char];
+  }
+  const base = code - 44032;
+  const initial = Math.floor(base / (21 * 28));
+  const medial = Math.floor(base % (21 * 28) / 28);
+  const final = base % 28;
+  const initialChars = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const medialChars = ["ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ", "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ", "ㅣ"];
+  const finalChars = ["", "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ", "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const result = [];
+  result.push(initialChars[initial]);
+  result.push(medialChars[medial]);
+  if (final > 0) {
+    result.push(finalChars[final]);
+  }
+  return result;
+}
+function composeHangul(initial, medial, final) {
+  const initialChars = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const medialChars = ["ㅏ", "ㅐ", "ㅑ", "ㅒ", "ㅓ", "ㅔ", "ㅕ", "ㅖ", "ㅗ", "ㅘ", "ㅙ", "ㅚ", "ㅛ", "ㅜ", "ㅝ", "ㅞ", "ㅟ", "ㅠ", "ㅡ", "ㅢ", "ㅣ"];
+  const finalChars = ["", "ㄱ", "ㄲ", "ㄳ", "ㄴ", "ㄵ", "ㄶ", "ㄷ", "ㄹ", "ㄺ", "ㄻ", "ㄼ", "ㄽ", "ㄾ", "ㄿ", "ㅀ", "ㅁ", "ㅂ", "ㅄ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
+  const initialIndex = initialChars.indexOf(initial);
+  const medialIndex = medialChars.indexOf(medial);
+  const finalIndex = final ? finalChars.indexOf(final) : 0;
+  if (initialIndex === -1 || medialIndex === -1) {
+    return initial + (medial || "") + (final || "");
+  }
+  const code = 44032 + initialIndex * 21 * 28 + medialIndex * 28 + finalIndex;
+  return String.fromCharCode(code);
+}
+function decomposeText(text) {
+  const units = [];
+  const charUnitRanges = [];
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i];
+    const code = char.charCodeAt(0);
+    const startIndex = units.length;
+    if (code >= 44032 && code <= 55203) {
+      const decomposed = decomposeHangul(char);
+      units.push(...decomposed);
+      charUnitRanges.push({
+        start: startIndex,
+        end: units.length,
+        isHangul: true
+      });
+    } else {
+      units.push(char);
+      charUnitRanges.push({
+        start: startIndex,
+        end: units.length,
+        isHangul: false
+      });
+    }
+  }
+  return { units, charUnitRanges };
+}
+class Typing {
+  // 원본 텍스트
+  constructor(container, options) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    this.originalText = options.text;
+    this.config = {
+      text: options.text,
+      speed: options.speed ?? 50,
+      delay: options.delay ?? 0,
+      enabled: options.enabled ?? true,
+      threshold: options.threshold ?? 0.2,
+      rootMargin: options.rootMargin ?? "0px 0px -100px 0px",
+      triggerOnce: options.triggerOnce ?? false,
+      showCursor: options.showCursor ?? true,
+      cursorChar: options.cursorChar ?? "|",
+      onUpdate: options.onUpdate || null,
+      onComplete: options.onComplete || null
+    };
+    const decomposed = decomposeText(this.config.text);
+    this.textUnits = decomposed.units;
+    this.charUnitRanges = decomposed.charUnitRanges;
+    this.currentIndex = 0;
+    this.displayedText = "";
+    this.timeoutId = null;
+    this.intersectionObserver = null;
+    this.isRunning = false;
+    this.hasTriggered = false;
+    this.init();
+  }
+  init() {
+    this.updateDisplay("");
+    this.setupIntersectionObserver();
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      if (this.config.enabled) {
+        setTimeout(() => this.start(), this.config.delay);
+      }
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        var _a;
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting && !this.hasTriggered) {
+            if (this.config.enabled) {
+              setTimeout(() => this.start(), this.config.delay);
+            }
+            this.hasTriggered = true;
+            if (this.config.triggerOnce) {
+              (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect();
+            }
+          }
+        }
+      },
+      {
+        threshold: this.config.threshold,
+        rootMargin: this.config.rootMargin
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  // 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
+  // 한글의 경우 자음/모음이 하나씩 보이도록 합성
+  buildTextFromUnits(unitCount) {
+    if (unitCount === 0) return "";
+    let result = "";
+    for (let charIndex = 0; charIndex < this.charUnitRanges.length; charIndex++) {
+      const range = this.charUnitRanges[charIndex];
+      if (range.start >= unitCount) {
+        break;
+      }
+      const unitsEntered = Math.min(unitCount - range.start, range.end - range.start);
+      if (unitsEntered <= 0) {
+        break;
+      }
+      if (range.isHangul) {
+        const charUnits = this.textUnits.slice(range.start, range.start + unitsEntered);
+        if (charUnits.length === 1) {
+          result += charUnits[0];
+        } else if (charUnits.length === 2) {
+          result += composeHangul(charUnits[0], charUnits[1]);
+        } else if (charUnits.length >= 3) {
+          result += composeHangul(charUnits[0], charUnits[1], charUnits[2]);
+        }
+      } else {
+        if (unitsEntered > 0) {
+          result += this.textUnits[range.start];
+        }
+      }
+    }
+    return result;
+  }
+  start() {
+    if (this.isRunning) return;
+    this.isRunning = true;
+    this.currentIndex = 0;
+    this.displayedText = "";
+    this.typeNext();
+  }
+  typeNext() {
+    if (this.currentIndex >= this.textUnits.length) {
+      this.isRunning = false;
+      if (this.config.showCursor) {
+        this.updateDisplay(this.originalText);
+      }
+      if (this.config.onComplete) {
+        this.config.onComplete();
+      }
+      return;
+    }
+    this.displayedText = this.buildTextFromUnits(this.currentIndex + 1);
+    let displayText = this.displayedText;
+    if (this.config.showCursor) {
+      displayText += this.config.cursorChar;
+    }
+    this.updateDisplay(displayText);
+    if (this.config.onUpdate) {
+      this.config.onUpdate(this.displayedText);
+    }
+    this.currentIndex++;
+    this.timeoutId = setTimeout(() => {
+      this.typeNext();
+    }, this.config.speed);
+  }
+  stop() {
+    this.isRunning = false;
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+  }
+  reset() {
+    this.stop();
+    this.currentIndex = 0;
+    this.displayedText = "";
+    this.hasTriggered = false;
+    this.updateDisplay("");
+  }
+  updateDisplay(text) {
+    this.container.textContent = text;
+  }
+  // 텍스트 변경
+  setText(newText) {
+    this.originalText = newText;
+    this.config.text = newText;
+    const decomposed = decomposeText(newText);
+    this.textUnits = decomposed.units;
+    this.charUnitRanges = decomposed.charUnitRanges;
+    this.reset();
+    if (this.config.enabled) {
+      setTimeout(() => this.start(), this.config.delay);
+    }
+  }
+  destroy() {
+    this.stop();
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+  }
+}
+function create_fragment$2(ctx) {
   let div;
   return {
     c() {
@@ -917,7 +1155,7 @@ function instance_1$1($$self, $$props, $$invalidate) {
   let { style = {} } = $$props;
   const dispatch = createEventDispatcher();
   let container;
-  let instance = null;
+  let instance2 = null;
   onMount(() => {
     if (!container) return;
     const options = {
@@ -941,33 +1179,33 @@ function instance_1$1($$self, $$props, $$invalidate) {
         dispatch("update", inst);
       }
     };
-    $$invalidate(20, instance = new TextToParticle(container, options));
+    $$invalidate(20, instance2 = new TextToParticle(container, options));
   });
   onDestroy(() => {
-    if (instance) {
-      instance.destroy();
-      $$invalidate(20, instance = null);
+    if (instance2) {
+      instance2.destroy();
+      $$invalidate(20, instance2 = null);
     }
   });
   function morph(textOrOptions) {
-    if (instance) {
-      instance.morph(textOrOptions);
+    if (instance2) {
+      instance2.morph(textOrOptions);
     }
   }
   function scatter() {
-    if (instance) {
-      instance.scatter();
+    if (instance2) {
+      instance2.scatter();
     }
   }
   function updateConfig(config) {
-    if (instance) {
-      instance.updateConfig(config);
+    if (instance2) {
+      instance2.updateConfig(config);
     }
   }
   function destroy() {
-    if (instance) {
-      instance.destroy();
-      $$invalidate(20, instance = null);
+    if (instance2) {
+      instance2.destroy();
+      $$invalidate(20, instance2 = null);
     }
   }
   function div_binding($$value) {
@@ -997,8 +1235,8 @@ function instance_1$1($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty & /*instance, text, densityStep, maxParticles, pointSize, ease, repelRadius, repelStrength, particleColor, fontFamily, fontSize, width, height, devicePixelRatio*/
     1114104) {
       {
-        if (instance) {
-          instance.updateConfig({
+        if (instance2) {
+          instance2.updateConfig({
             text,
             densityStep,
             maxParticles,
@@ -1038,14 +1276,14 @@ function instance_1$1($$self, $$props, $$invalidate) {
     scatter,
     updateConfig,
     destroy,
-    instance,
+    instance2,
     div_binding
   ];
 }
 class TextToParticle_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance_1$1, create_fragment$1, safe_not_equal, {
+    init(this, options, instance_1$1, create_fragment$2, safe_not_equal, {
       text: 3,
       densityStep: 4,
       maxParticles: 5,
@@ -1080,7 +1318,7 @@ class TextToParticle_1 extends SvelteComponent {
     return this.$$.ctx[19];
   }
 }
-function create_fragment(ctx) {
+function create_fragment$1(ctx) {
   let div;
   return {
     c() {
@@ -1145,7 +1383,7 @@ function instance_1($$self, $$props, $$invalidate) {
   let { style = {} } = $$props;
   const dispatch = createEventDispatcher();
   let container;
-  let instance = null;
+  let instance2 = null;
   onMount(() => {
     if (!container) return;
     const options = {
@@ -1164,44 +1402,44 @@ function instance_1($$self, $$props, $$invalidate) {
         dispatch("complete");
       }
     };
-    $$invalidate(17, instance = new Count(container, options));
+    $$invalidate(17, instance2 = new Count(container, options));
   });
   onDestroy(() => {
-    if (instance) {
-      instance.destroy();
-      $$invalidate(17, instance = null);
+    if (instance2) {
+      instance2.destroy();
+      $$invalidate(17, instance2 = null);
     }
   });
   function start() {
-    if (instance) {
-      instance.start();
+    if (instance2) {
+      instance2.start();
     }
   }
   function stop() {
-    if (instance) {
-      instance.stop();
+    if (instance2) {
+      instance2.stop();
     }
   }
   function reset() {
-    if (instance) {
-      instance.reset();
+    if (instance2) {
+      instance2.reset();
     }
   }
   function getValue() {
-    if (instance) {
-      return instance.getValue();
+    if (instance2) {
+      return instance2.getValue();
     }
     return 0;
   }
   function updateConfig(config) {
-    if (instance) {
-      instance.updateConfig(config);
+    if (instance2) {
+      instance2.updateConfig(config);
     }
   }
   function destroy() {
-    if (instance) {
-      instance.destroy();
-      $$invalidate(17, instance = null);
+    if (instance2) {
+      instance2.destroy();
+      $$invalidate(17, instance2 = null);
     }
   }
   function div_binding($$value) {
@@ -1226,8 +1464,8 @@ function instance_1($$self, $$props, $$invalidate) {
     if ($$self.$$.dirty & /*instance, targetValue, duration, startValue, enabled, easing, threshold, rootMargin, triggerOnce*/
     133112) {
       {
-        if (instance) {
-          instance.updateConfig({
+        if (instance2) {
+          instance2.updateConfig({
             targetValue,
             duration,
             startValue,
@@ -1265,14 +1503,14 @@ function instance_1($$self, $$props, $$invalidate) {
     getValue,
     updateConfig,
     destroy,
-    instance,
+    instance2,
     div_binding
   ];
 }
 class Count_1 extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance_1, create_fragment, safe_not_equal, {
+    init(this, options, instance_1, create_fragment$1, safe_not_equal, {
       targetValue: 3,
       duration: 4,
       startValue: 5,
@@ -1310,9 +1548,142 @@ class Count_1 extends SvelteComponent {
     return this.$$.ctx[16];
   }
 }
+function create_fragment(ctx) {
+  let div;
+  return {
+    c() {
+      div = element("div");
+      attr(
+        div,
+        "class",
+        /*className*/
+        ctx[1]
+      );
+      attr(
+        div,
+        "style",
+        /*style*/
+        ctx[2]
+      );
+    },
+    m(target, anchor) {
+      insert(target, div, anchor);
+      ctx[8](div);
+    },
+    p: noop,
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching) {
+        detach(div);
+      }
+      ctx[8](null);
+    }
+  };
+}
+function instance($$self, $$props, $$invalidate) {
+  let $effect;
+  let $props;
+  component_subscribe($$self, effect, ($$value) => $$invalidate(10, $effect = $$value));
+  component_subscribe($$self, props, ($$value) => $$invalidate(11, $props = $$value));
+  let { text, speed = 50, delay = 0, enabled = true, threshold = 0.2, rootMargin = "0px 0px -100px 0px", triggerOnce = false, showCursor = true, cursorChar = "|", className = "", style = "", onUpdate, onComplete } = $props();
+  let containerRef = null;
+  let instanceRef = null;
+  onMount(() => {
+    if (!containerRef) return;
+    const options = {
+      text,
+      speed,
+      delay,
+      enabled,
+      threshold,
+      rootMargin,
+      triggerOnce,
+      showCursor,
+      cursorChar,
+      onUpdate,
+      onComplete
+    };
+    instanceRef = new Typing(containerRef, options);
+  });
+  onDestroy(() => {
+    if (instanceRef) {
+      instanceRef.destroy();
+      instanceRef = null;
+    }
+  });
+  $effect(() => {
+    if (instanceRef && text !== instanceRef["originalText"]) {
+      instanceRef.setText(text);
+    }
+  });
+  function start() {
+    instanceRef == null ? void 0 : instanceRef.start();
+  }
+  function stop() {
+    instanceRef == null ? void 0 : instanceRef.stop();
+  }
+  function reset() {
+    instanceRef == null ? void 0 : instanceRef.reset();
+  }
+  function setText(newText) {
+    instanceRef == null ? void 0 : instanceRef.setText(newText);
+  }
+  function destroy() {
+    if (instanceRef) {
+      instanceRef.destroy();
+      instanceRef = null;
+    }
+  }
+  function div_binding($$value) {
+    binding_callbacks[$$value ? "unshift" : "push"](() => {
+      containerRef = $$value;
+      $$invalidate(0, containerRef);
+    });
+  }
+  return [
+    containerRef,
+    className,
+    style,
+    start,
+    stop,
+    reset,
+    setText,
+    destroy,
+    div_binding
+  ];
+}
+class Typing_1 extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance, create_fragment, safe_not_equal, {
+      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];
+  }
+}
 export {
   Count_1 as Count,
   TextToParticle_1 as MasonEffect,
   TextToParticle_1 as TextToParticle,
+  Typing_1 as Typing,
   TextToParticle_1 as default
 };