@shotstack/shotstack-canvas 2.0.14 → 2.0.15

package/dist/entry.node.cjs

@@ -1377,17 +1377,45 @@ function mirrorAnimationDirection(direction, isRTL) {
 }
 
 // src/core/layout.ts
+var import_bidi_js2 = __toESM(require("bidi-js"), 1);
 function isEmoji(char) {
   const code = char.codePointAt(0);
   if (!code) return false;
-  return code >= 127744 && code <= 129535 || // Emoticons, symbols, pictographs
-  code >= 9728 && code <= 9983 || // Miscellaneous symbols
-  code >= 9984 && code <= 10175 || // Dingbats
-  code >= 65024 && code <= 65039 || // Variation selectors
-  code >= 128512 && code <= 128591 || // Emoticons
-  code >= 128640 && code <= 128767 || // Transport and map symbols
-  code >= 129280 && code <= 129535 || // Supplemental symbols and pictographs
-  code >= 129648 && code <= 129791;
+  return code >= 127744 && code <= 129535 || code >= 9728 && code <= 9983 || code >= 9984 && code <= 10175 || code >= 65024 && code <= 65039 || code >= 128512 && code <= 128591 || code >= 128640 && code <= 128767 || code >= 129280 && code <= 129535 || code >= 129648 && code <= 129791;
+}
+function reorderRunsVisually(runs) {
+  if (runs.length <= 1) return runs;
+  const result = runs.slice();
+  const runLevels = result.map((r) => r.level);
+  const maxLevel = Math.max(...runLevels);
+  const minLevel = Math.min(...runLevels);
+  const minOddLevel = minLevel % 2 === 1 ? minLevel : minLevel + 1;
+  for (let level = maxLevel; level >= minOddLevel; level--) {
+    let start = 0;
+    while (start < result.length) {
+      if (runLevels[result.indexOf(result[start])] >= level) {
+        let end = start;
+        while (end + 1 < result.length && result[end + 1].level >= level) {
+          end++;
+        }
+        if (start < end) {
+          let left = start;
+          let right = end;
+          while (left < right) {
+            const tmp = result[left];
+            result[left] = result[right];
+            result[right] = tmp;
+            left++;
+            right--;
+          }
+        }
+        start = end + 1;
+      } else {
+        start++;
+      }
+    }
+  }
+  return result;
 }
 var LayoutEngine = class {
   constructor(fonts) {
@@ -1412,6 +1440,9 @@ var LayoutEngine = class {
       try {
         buffer.addText(text);
         buffer.guessSegmentProperties();
+        if (direction) {
+          buffer.setDirection(direction);
+        }
         const font = await this.fonts.getFont(desc);
         const face = await this.fonts.getFace(desc);
         const upem = face?.upem || 1e3;
@@ -1434,6 +1465,64 @@ var LayoutEngine = class {
       );
     }
   }
+  splitIntoBidiRuns(input, levels, desc, emojiFallback) {
+    const runs = [];
+    if (input.length === 0) return runs;
+    let runStart = 0;
+    let runLevel = levels[0];
+    let runIsEmoji = emojiFallback ? isEmoji(input[0]) : false;
+    for (let i = 1; i <= input.length; i++) {
+      const atEnd = i === input.length;
+      const charLevel = atEnd ? -1 : levels[i];
+      const charIsEmoji = !atEnd && emojiFallback ? isEmoji(String.fromCodePoint(input.codePointAt(i) ?? 0)) : false;
+      if (atEnd || charLevel !== runLevel || emojiFallback && charIsEmoji !== runIsEmoji) {
+        const text = input.slice(runStart, i);
+        const font = runIsEmoji && emojiFallback ? emojiFallback : desc;
+        runs.push({ text, startIndex: runStart, endIndex: i, level: runLevel, font });
+        if (!atEnd) {
+          runStart = i;
+          runLevel = charLevel;
+          runIsEmoji = charIsEmoji;
+        }
+      }
+    }
+    return runs;
+  }
+  async shapeWithBidi(input, desc, emojiFallback) {
+    const hasRTL = containsRTLCharacters(input);
+    const hasLTR = /[a-zA-Z0-9]/.test(input);
+    const hasMixedDirection = hasRTL && hasLTR;
+    if (!hasMixedDirection && !emojiFallback) {
+      const textDirection = hasRTL ? "rtl" : void 0;
+      return this.shapeFull(input, desc, textDirection);
+    }
+    const bidi = (0, import_bidi_js2.default)();
+    const { levels } = bidi.getEmbeddingLevels(input);
+    const bidiRuns = this.splitIntoBidiRuns(input, levels, desc, emojiFallback);
+    const shapedRuns = [];
+    for (const run of bidiRuns) {
+      const runDirection = run.level % 2 === 1 ? "rtl" : "ltr";
+      const runShaped = await this.shapeFull(run.text, run.font, runDirection);
+      for (const glyph of runShaped) {
+        glyph.cl += run.startIndex;
+        if (run.font !== desc) {
+          glyph.fontDesc = run.font;
+        }
+      }
+      shapedRuns.push({
+        glyphs: runShaped,
+        startIndex: run.startIndex,
+        endIndex: run.endIndex,
+        level: run.level
+      });
+    }
+    const visualRuns = reorderRunsVisually(shapedRuns);
+    const visualGlyphs = [];
+    for (const run of visualRuns) {
+      visualGlyphs.push(...run.glyphs);
+    }
+    return visualGlyphs;
+  }
   async layout(params) {
     try {
       const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
@@ -1443,38 +1532,7 @@ var LayoutEngine = class {
       }
       let shaped;
       try {
-        if (!emojiFallback) {
-          const textDirection = containsRTLCharacters(input) ? "rtl" : void 0;
-          shaped = await this.shapeFull(input, desc, textDirection);
-        } else {
-          const chars = Array.from(input);
-          const runs = [];
-          let currentRun = { text: "", startIndex: 0, isEmoji: false };
-          for (let i = 0; i < chars.length; i++) {
-            const char = chars[i];
-            const charIsEmoji = isEmoji(char);
-            if (i === 0) {
-              currentRun = { text: char, startIndex: 0, isEmoji: charIsEmoji };
-            } else if (currentRun.isEmoji === charIsEmoji) {
-              currentRun.text += char;
-            } else {
-              runs.push(currentRun);
-              currentRun = { text: char, startIndex: currentRun.startIndex + currentRun.text.length, isEmoji: charIsEmoji };
-            }
-          }
-          if (currentRun.text) runs.push(currentRun);
-          shaped = [];
-          for (const run of runs) {
-            const runFont = run.isEmoji ? emojiFallback : desc;
-            const runDirection = containsRTLCharacters(run.text) ? "rtl" : void 0;
-            const runShaped = await this.shapeFull(run.text, runFont, runDirection);
-            for (const glyph of runShaped) {
-              glyph.cl += run.startIndex;
-              glyph.fontDesc = runFont;
-            }
-            shaped.push(...runShaped);
-          }
-        }
+        shaped = await this.shapeWithBidi(input, desc, emojiFallback);
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -1505,7 +1563,6 @@ var LayoutEngine = class {
           cluster: g.cl,
           char,
           fontDesc: g.fontDesc
-          // Preserve font descriptor
         };
       });
       const lines = [];

package/dist/entry.node.d.cts

@@ -534,6 +534,7 @@ interface HBGlyphInfo {
 interface HBBuffer {
     addText(text: string): void;
     guessSegmentProperties(): void;
+    setDirection(direction: "ltr" | "rtl" | "ttb" | "btt"): void;
     json(): HBGlyphInfo[];
     destroy(): void;
 }

package/dist/entry.node.d.ts

@@ -534,6 +534,7 @@ interface HBGlyphInfo {
 interface HBBuffer {
     addText(text: string): void;
     guessSegmentProperties(): void;
+    setDirection(direction: "ltr" | "rtl" | "ttb" | "btt"): void;
     json(): HBGlyphInfo[];
     destroy(): void;
 }

package/dist/entry.node.js

@@ -974,17 +974,45 @@ function mirrorAnimationDirection(direction, isRTL) {
 }
 
 // src/core/layout.ts
+import bidiFactory2 from "bidi-js";
 function isEmoji(char) {
   const code = char.codePointAt(0);
   if (!code) return false;
-  return code >= 127744 && code <= 129535 || // Emoticons, symbols, pictographs
-  code >= 9728 && code <= 9983 || // Miscellaneous symbols
-  code >= 9984 && code <= 10175 || // Dingbats
-  code >= 65024 && code <= 65039 || // Variation selectors
-  code >= 128512 && code <= 128591 || // Emoticons
-  code >= 128640 && code <= 128767 || // Transport and map symbols
-  code >= 129280 && code <= 129535 || // Supplemental symbols and pictographs
-  code >= 129648 && code <= 129791;
+  return code >= 127744 && code <= 129535 || code >= 9728 && code <= 9983 || code >= 9984 && code <= 10175 || code >= 65024 && code <= 65039 || code >= 128512 && code <= 128591 || code >= 128640 && code <= 128767 || code >= 129280 && code <= 129535 || code >= 129648 && code <= 129791;
+}
+function reorderRunsVisually(runs) {
+  if (runs.length <= 1) return runs;
+  const result = runs.slice();
+  const runLevels = result.map((r) => r.level);
+  const maxLevel = Math.max(...runLevels);
+  const minLevel = Math.min(...runLevels);
+  const minOddLevel = minLevel % 2 === 1 ? minLevel : minLevel + 1;
+  for (let level = maxLevel; level >= minOddLevel; level--) {
+    let start = 0;
+    while (start < result.length) {
+      if (runLevels[result.indexOf(result[start])] >= level) {
+        let end = start;
+        while (end + 1 < result.length && result[end + 1].level >= level) {
+          end++;
+        }
+        if (start < end) {
+          let left = start;
+          let right = end;
+          while (left < right) {
+            const tmp = result[left];
+            result[left] = result[right];
+            result[right] = tmp;
+            left++;
+            right--;
+          }
+        }
+        start = end + 1;
+      } else {
+        start++;
+      }
+    }
+  }
+  return result;
 }
 var LayoutEngine = class {
   constructor(fonts) {
@@ -1009,6 +1037,9 @@ var LayoutEngine = class {
       try {
         buffer.addText(text);
         buffer.guessSegmentProperties();
+        if (direction) {
+          buffer.setDirection(direction);
+        }
         const font = await this.fonts.getFont(desc);
         const face = await this.fonts.getFace(desc);
         const upem = face?.upem || 1e3;
@@ -1031,6 +1062,64 @@ var LayoutEngine = class {
       );
     }
   }
+  splitIntoBidiRuns(input, levels, desc, emojiFallback) {
+    const runs = [];
+    if (input.length === 0) return runs;
+    let runStart = 0;
+    let runLevel = levels[0];
+    let runIsEmoji = emojiFallback ? isEmoji(input[0]) : false;
+    for (let i = 1; i <= input.length; i++) {
+      const atEnd = i === input.length;
+      const charLevel = atEnd ? -1 : levels[i];
+      const charIsEmoji = !atEnd && emojiFallback ? isEmoji(String.fromCodePoint(input.codePointAt(i) ?? 0)) : false;
+      if (atEnd || charLevel !== runLevel || emojiFallback && charIsEmoji !== runIsEmoji) {
+        const text = input.slice(runStart, i);
+        const font = runIsEmoji && emojiFallback ? emojiFallback : desc;
+        runs.push({ text, startIndex: runStart, endIndex: i, level: runLevel, font });
+        if (!atEnd) {
+          runStart = i;
+          runLevel = charLevel;
+          runIsEmoji = charIsEmoji;
+        }
+      }
+    }
+    return runs;
+  }
+  async shapeWithBidi(input, desc, emojiFallback) {
+    const hasRTL = containsRTLCharacters(input);
+    const hasLTR = /[a-zA-Z0-9]/.test(input);
+    const hasMixedDirection = hasRTL && hasLTR;
+    if (!hasMixedDirection && !emojiFallback) {
+      const textDirection = hasRTL ? "rtl" : void 0;
+      return this.shapeFull(input, desc, textDirection);
+    }
+    const bidi = bidiFactory2();
+    const { levels } = bidi.getEmbeddingLevels(input);
+    const bidiRuns = this.splitIntoBidiRuns(input, levels, desc, emojiFallback);
+    const shapedRuns = [];
+    for (const run of bidiRuns) {
+      const runDirection = run.level % 2 === 1 ? "rtl" : "ltr";
+      const runShaped = await this.shapeFull(run.text, run.font, runDirection);
+      for (const glyph of runShaped) {
+        glyph.cl += run.startIndex;
+        if (run.font !== desc) {
+          glyph.fontDesc = run.font;
+        }
+      }
+      shapedRuns.push({
+        glyphs: runShaped,
+        startIndex: run.startIndex,
+        endIndex: run.endIndex,
+        level: run.level
+      });
+    }
+    const visualRuns = reorderRunsVisually(shapedRuns);
+    const visualGlyphs = [];
+    for (const run of visualRuns) {
+      visualGlyphs.push(...run.glyphs);
+    }
+    return visualGlyphs;
+  }
   async layout(params) {
     try {
       const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
@@ -1040,38 +1129,7 @@ var LayoutEngine = class {
       }
       let shaped;
       try {
-        if (!emojiFallback) {
-          const textDirection = containsRTLCharacters(input) ? "rtl" : void 0;
-          shaped = await this.shapeFull(input, desc, textDirection);
-        } else {
-          const chars = Array.from(input);
-          const runs = [];
-          let currentRun = { text: "", startIndex: 0, isEmoji: false };
-          for (let i = 0; i < chars.length; i++) {
-            const char = chars[i];
-            const charIsEmoji = isEmoji(char);
-            if (i === 0) {
-              currentRun = { text: char, startIndex: 0, isEmoji: charIsEmoji };
-            } else if (currentRun.isEmoji === charIsEmoji) {
-              currentRun.text += char;
-            } else {
-              runs.push(currentRun);
-              currentRun = { text: char, startIndex: currentRun.startIndex + currentRun.text.length, isEmoji: charIsEmoji };
-            }
-          }
-          if (currentRun.text) runs.push(currentRun);
-          shaped = [];
-          for (const run of runs) {
-            const runFont = run.isEmoji ? emojiFallback : desc;
-            const runDirection = containsRTLCharacters(run.text) ? "rtl" : void 0;
-            const runShaped = await this.shapeFull(run.text, runFont, runDirection);
-            for (const glyph of runShaped) {
-              glyph.cl += run.startIndex;
-              glyph.fontDesc = runFont;
-            }
-            shaped.push(...runShaped);
-          }
-        }
+        shaped = await this.shapeWithBidi(input, desc, emojiFallback);
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -1102,7 +1160,6 @@ var LayoutEngine = class {
           cluster: g.cl,
           char,
           fontDesc: g.fontDesc
-          // Preserve font descriptor
         };
       });
       const lines = [];

package/dist/entry.web.d.ts

@@ -534,6 +534,7 @@ interface HBGlyphInfo {
 interface HBBuffer {
     addText(text: string): void;
     guessSegmentProperties(): void;
+    setDirection(direction: "ltr" | "rtl" | "ttb" | "btt"): void;
     json(): HBGlyphInfo[];
     destroy(): void;
 }

package/dist/entry.web.js

@@ -33016,14 +33016,41 @@ function mirrorAnimationDirection(direction, isRTL) {
 function isEmoji(char) {
   const code = char.codePointAt(0);
   if (!code) return false;
-  return code >= 127744 && code <= 129535 || // Emoticons, symbols, pictographs
-  code >= 9728 && code <= 9983 || // Miscellaneous symbols
-  code >= 9984 && code <= 10175 || // Dingbats
-  code >= 65024 && code <= 65039 || // Variation selectors
-  code >= 128512 && code <= 128591 || // Emoticons
-  code >= 128640 && code <= 128767 || // Transport and map symbols
-  code >= 129280 && code <= 129535 || // Supplemental symbols and pictographs
-  code >= 129648 && code <= 129791;
+  return code >= 127744 && code <= 129535 || code >= 9728 && code <= 9983 || code >= 9984 && code <= 10175 || code >= 65024 && code <= 65039 || code >= 128512 && code <= 128591 || code >= 128640 && code <= 128767 || code >= 129280 && code <= 129535 || code >= 129648 && code <= 129791;
+}
+function reorderRunsVisually(runs) {
+  if (runs.length <= 1) return runs;
+  const result = runs.slice();
+  const runLevels = result.map((r) => r.level);
+  const maxLevel = Math.max(...runLevels);
+  const minLevel = Math.min(...runLevels);
+  const minOddLevel = minLevel % 2 === 1 ? minLevel : minLevel + 1;
+  for (let level = maxLevel; level >= minOddLevel; level--) {
+    let start = 0;
+    while (start < result.length) {
+      if (runLevels[result.indexOf(result[start])] >= level) {
+        let end = start;
+        while (end + 1 < result.length && result[end + 1].level >= level) {
+          end++;
+        }
+        if (start < end) {
+          let left = start;
+          let right = end;
+          while (left < right) {
+            const tmp = result[left];
+            result[left] = result[right];
+            result[right] = tmp;
+            left++;
+            right--;
+          }
+        }
+        start = end + 1;
+      } else {
+        start++;
+      }
+    }
+  }
+  return result;
 }
 var LayoutEngine = class {
   constructor(fonts) {
@@ -33048,6 +33075,9 @@ var LayoutEngine = class {
       try {
         buffer.addText(text);
         buffer.guessSegmentProperties();
+        if (direction) {
+          buffer.setDirection(direction);
+        }
         const font = await this.fonts.getFont(desc);
         const face = await this.fonts.getFace(desc);
         const upem = face?.upem || 1e3;
@@ -33070,6 +33100,64 @@ var LayoutEngine = class {
       );
     }
   }
+  splitIntoBidiRuns(input, levels, desc, emojiFallback) {
+    const runs = [];
+    if (input.length === 0) return runs;
+    let runStart = 0;
+    let runLevel = levels[0];
+    let runIsEmoji = emojiFallback ? isEmoji(input[0]) : false;
+    for (let i = 1; i <= input.length; i++) {
+      const atEnd = i === input.length;
+      const charLevel = atEnd ? -1 : levels[i];
+      const charIsEmoji = !atEnd && emojiFallback ? isEmoji(String.fromCodePoint(input.codePointAt(i) ?? 0)) : false;
+      if (atEnd || charLevel !== runLevel || emojiFallback && charIsEmoji !== runIsEmoji) {
+        const text = input.slice(runStart, i);
+        const font = runIsEmoji && emojiFallback ? emojiFallback : desc;
+        runs.push({ text, startIndex: runStart, endIndex: i, level: runLevel, font });
+        if (!atEnd) {
+          runStart = i;
+          runLevel = charLevel;
+          runIsEmoji = charIsEmoji;
+        }
+      }
+    }
+    return runs;
+  }
+  async shapeWithBidi(input, desc, emojiFallback) {
+    const hasRTL = containsRTLCharacters(input);
+    const hasLTR = /[a-zA-Z0-9]/.test(input);
+    const hasMixedDirection = hasRTL && hasLTR;
+    if (!hasMixedDirection && !emojiFallback) {
+      const textDirection = hasRTL ? "rtl" : void 0;
+      return this.shapeFull(input, desc, textDirection);
+    }
+    const bidi = bidi_default();
+    const { levels } = bidi.getEmbeddingLevels(input);
+    const bidiRuns = this.splitIntoBidiRuns(input, levels, desc, emojiFallback);
+    const shapedRuns = [];
+    for (const run of bidiRuns) {
+      const runDirection = run.level % 2 === 1 ? "rtl" : "ltr";
+      const runShaped = await this.shapeFull(run.text, run.font, runDirection);
+      for (const glyph of runShaped) {
+        glyph.cl += run.startIndex;
+        if (run.font !== desc) {
+          glyph.fontDesc = run.font;
+        }
+      }
+      shapedRuns.push({
+        glyphs: runShaped,
+        startIndex: run.startIndex,
+        endIndex: run.endIndex,
+        level: run.level
+      });
+    }
+    const visualRuns = reorderRunsVisually(shapedRuns);
+    const visualGlyphs = [];
+    for (const run of visualRuns) {
+      visualGlyphs.push(...run.glyphs);
+    }
+    return visualGlyphs;
+  }
   async layout(params) {
     try {
       const { textTransform, desc, fontSize, letterSpacing, width, emojiFallback } = params;
@@ -33079,38 +33167,7 @@ var LayoutEngine = class {
       }
       let shaped;
       try {
-        if (!emojiFallback) {
-          const textDirection = containsRTLCharacters(input) ? "rtl" : void 0;
-          shaped = await this.shapeFull(input, desc, textDirection);
-        } else {
-          const chars = Array.from(input);
-          const runs = [];
-          let currentRun = { text: "", startIndex: 0, isEmoji: false };
-          for (let i = 0; i < chars.length; i++) {
-            const char = chars[i];
-            const charIsEmoji = isEmoji(char);
-            if (i === 0) {
-              currentRun = { text: char, startIndex: 0, isEmoji: charIsEmoji };
-            } else if (currentRun.isEmoji === charIsEmoji) {
-              currentRun.text += char;
-            } else {
-              runs.push(currentRun);
-              currentRun = { text: char, startIndex: currentRun.startIndex + currentRun.text.length, isEmoji: charIsEmoji };
-            }
-          }
-          if (currentRun.text) runs.push(currentRun);
-          shaped = [];
-          for (const run of runs) {
-            const runFont = run.isEmoji ? emojiFallback : desc;
-            const runDirection = containsRTLCharacters(run.text) ? "rtl" : void 0;
-            const runShaped = await this.shapeFull(run.text, runFont, runDirection);
-            for (const glyph of runShaped) {
-              glyph.cl += run.startIndex;
-              glyph.fontDesc = runFont;
-            }
-            shaped.push(...runShaped);
-          }
-        }
+        shaped = await this.shapeWithBidi(input, desc, emojiFallback);
       } catch (err) {
         throw new Error(`Text shaping failed: ${err instanceof Error ? err.message : String(err)}`);
       }
@@ -33141,7 +33198,6 @@ var LayoutEngine = class {
           cluster: g.cl,
           char,
           fontDesc: g.fontDesc
-          // Preserve font descriptor
         };
       });
       const lines = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",