masoneffect 2.0.3 → 2.0.4

package/dist/vue/typing/index.mjs

@@ -19,25 +19,48 @@ function decomposeHangul(char) {
   }
   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;
+  return { units, charUnitRanges };
 }
 class Typing {
   // 원본 텍스트
   constructor(container, options) {
-    this.originalChars = [];
-    this.charUnitMap = [];
     this.container = typeof container === "string" ? document.querySelector(container) : container;
     if (!this.container) {
       throw new Error("Container element not found");
@@ -56,10 +79,9 @@ class Typing {
       onUpdate: options.onUpdate || null,
       onComplete: options.onComplete || null
     };
-    this.textUnits = decomposeText(this.config.text);
-    this.originalChars = [];
-    this.charUnitMap = [];
-    this.initializeTextStructure();
+    const decomposed = decomposeText(this.config.text);
+    this.textUnits = decomposed.units;
+    this.charUnitRanges = decomposed.charUnitRanges;
     this.currentIndex = 0;
     this.displayedText = "";
     this.timeoutId = null;
@@ -102,54 +124,36 @@ class Typing {
     );
     this.intersectionObserver.observe(this.container);
   }
-  // 각 글자에 해당하는 단위 개수
-  initializeTextStructure() {
-    this.originalChars = [];
-    this.charUnitMap = [];
-    for (let i = 0; i < this.originalText.length; i++) {
-      const char = this.originalText[i];
-      const code = char.charCodeAt(0);
-      this.originalChars.push(char);
-      if (code >= 44032 && code <= 55203) {
-        const decomposed = decomposeHangul(char);
-        this.charUnitMap.push(decomposed.length);
-      } else {
-        this.charUnitMap.push(1);
+  // 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
+  // 한글의 경우 자음/모음이 하나씩 보이도록 합성
+  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;
       }
-    }
-  }
-  // 단위 인덱스를 원본 텍스트의 글자 인덱스로 변환
-  // unitIndex: 현재까지 입력된 단위 개수 (0부터 시작)
-  // 반환: 표시할 글자 개수 (0부터 시작, exclusive)
-  getCharIndexFromUnitIndex(unitIndex) {
-    if (unitIndex === 0) return 0;
-    let charIndex = 0;
-    let currentUnits = 0;
-    for (let i = 0; i < this.charUnitMap.length; i++) {
-      const unitsForChar = this.charUnitMap[i];
-      currentUnits += unitsForChar;
-      if (unitIndex >= currentUnits) {
-        charIndex = i + 1;
+      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 {
-        const unitsEntered = unitIndex - (currentUnits - unitsForChar);
         if (unitsEntered > 0) {
-          const isHangul = this.originalChars[i] && this.originalChars[i].charCodeAt(0) >= 44032 && this.originalChars[i].charCodeAt(0) <= 55203;
-          if (isHangul && unitsEntered >= 2) {
-            charIndex = i + 1;
-          } else if (!isHangul && unitsEntered >= 1) {
-            charIndex = i + 1;
-          }
+          result += this.textUnits[range.start];
         }
-        break;
       }
     }
-    return charIndex;
-  }
-  // 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
-  buildTextFromUnits(units) {
-    if (units.length === 0) return "";
-    const charIndex = this.getCharIndexFromUnitIndex(units.length);
-    return this.originalText.substring(0, charIndex);
+    return result;
   }
   start() {
     if (this.isRunning) return;
@@ -169,8 +173,7 @@ class Typing {
       }
       return;
     }
-    const unitsToShow = this.textUnits.slice(0, this.currentIndex + 1);
-    this.displayedText = this.buildTextFromUnits(unitsToShow);
+    this.displayedText = this.buildTextFromUnits(this.currentIndex + 1);
     let displayText = this.displayedText;
     if (this.config.showCursor) {
       displayText += this.config.cursorChar;
@@ -205,8 +208,9 @@ class Typing {
   setText(newText) {
     this.originalText = newText;
     this.config.text = newText;
-    this.textUnits = decomposeText(newText);
-    this.initializeTextStructure();
+    const decomposed = decomposeText(newText);
+    this.textUnits = decomposed.units;
+    this.charUnitRanges = decomposed.charUnitRanges;
     this.reset();
     if (this.config.enabled) {
       setTimeout(() => this.start(), this.config.delay);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A collection of animation effects library. Supports React, Vue, Svelte, and vanilla JavaScript with Tree-shaking support.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",