@clypra/engine 1.1.2 → 1.2.1

package/dist/index.d.cts

@@ -462,7 +462,7 @@ interface CompositionPreset {
     description?: string;
 }
 declare const COMPOSITION_PRESETS: CompositionPreset[];
-/** Soft-wrap paragraphs to fit safe width */
+/** Soft-wrap paragraphs to fit safe width character-by-character */
 declare function wrapTextToWidth(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, text: string, maxWidth: number, letterSpacing: number): string[];
 declare function measureTextFits(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, cfg: TextEffectConfig, fontSize: number, lines: string[]): boolean;
 declare function computeAutoFitFontSize(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, cfg: TextEffectConfig, wrappedLines: string[]): number;

package/dist/index.d.ts

@@ -462,7 +462,7 @@ interface CompositionPreset {
     description?: string;
 }
 declare const COMPOSITION_PRESETS: CompositionPreset[];
-/** Soft-wrap paragraphs to fit safe width */
+/** Soft-wrap paragraphs to fit safe width character-by-character */
 declare function wrapTextToWidth(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, text: string, maxWidth: number, letterSpacing: number): string[];
 declare function measureTextFits(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, cfg: TextEffectConfig, fontSize: number, lines: string[]): boolean;
 declare function computeAutoFitFontSize(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, cfg: TextEffectConfig, wrappedLines: string[]): number;

package/dist/index.js

@@ -73,35 +73,26 @@ function wrapTextToWidth(ctx, text, maxWidth, letterSpacing) {
   const paragraphs = text.split("\n");
   const lines = [];
   for (const para of paragraphs) {
-    if (!para.trim()) {
+    if (para === "") {
       lines.push("");
       continue;
     }
-    const words = para.split(/\s+/).filter(Boolean);
     let current = "";
-    for (const word of words) {
-      const candidate = current ? `${current} ${word}` : word;
-      if (measureLine(ctx, candidate, letterSpacing) <= maxWidth) {
-        current = candidate;
+    for (let i = 0; i < para.length; i++) {
+      const char = para[i];
+      const tryLine = current + char;
+      if (measureLine(ctx, tryLine, letterSpacing) <= maxWidth) {
+        current = tryLine;
       } else {
-        if (current) lines.push(current);
-        if (measureLine(ctx, word, letterSpacing) > maxWidth) {
-          let chunk = "";
-          for (const ch of word) {
-            const tryChunk = chunk + ch;
-            if (measureLine(ctx, tryChunk, letterSpacing) <= maxWidth) chunk = tryChunk;
-            else {
-              if (chunk) lines.push(chunk);
-              chunk = ch;
-            }
-          }
-          current = chunk;
-        } else {
-          current = word;
+        if (current) {
+          lines.push(current);
         }
+        current = char;
       }
     }
-    if (current) lines.push(current);
+    if (current) {
+      lines.push(current);
+    }
   }
   return lines.length > 0 ? lines : [""];
 }
@@ -127,17 +118,17 @@ function layoutWithFontSize(ctx, cfg, fontSize, lines) {
   } else {
     startX = safe.x + safe.width / 2;
   }
-  let startY = safe.y + (safe.height - textBlockHeight) / 2 + fontSize * 0.82;
+  let startY = safe.y + (safe.height - textBlockHeight) / 2 + fontSize * 0.85;
   if (cfg.textPosY === "top") {
-    startY = safe.y + fontSize * 0.82;
+    startY = safe.y + fontSize * 0.85;
   } else if (cfg.textPosY === "bottom") {
-    startY = safe.y + safe.height - textBlockHeight + fontSize * 0.82;
+    startY = safe.y + safe.height - textBlockHeight + fontSize * 0.85;
   }
   let xMin = startX;
   if (align === "center") xMin = startX - maxLineWidth / 2;
   else if (align === "right") xMin = startX - maxLineWidth;
   const yMin = startY - fontSize * 0.85;
-  const yMax = startY + (lines.length - 1) * fontSize * lineHeight + fontSize * 0.25;
+  const yMax = startY + (lines.length - 1) * fontSize * lineHeight + fontSize * 0.15;
   return {
     lines,
     fontSize,
@@ -576,11 +567,11 @@ var InkBrushEngine = class {
     if (letterSpacing !== 0) {
       ctx.letterSpacing = `${letterSpacing}px`;
     }
-    let startY = (height - textBlockHeight) / 2 + fontSize * 0.8;
+    let startY = (height - textBlockHeight) / 2 + fontSize * 0.85;
     if (textPosY === "top") {
-      startY = 40 + fontSize * 0.8;
+      startY = 40 + fontSize * 0.85;
     } else if (textPosY === "bottom") {
-      startY = height - 40 - textBlockHeight + fontSize * 0.8;
+      startY = height - 40 - textBlockHeight + fontSize * 0.85;
     }
     ctx.save();
     if (skewX !== 0) {
@@ -728,11 +719,11 @@ var InkBrushEngine = class {
     if (letterSpacing !== 0) {
       ctx.letterSpacing = `${letterSpacing}px`;
     }
-    let startY = (height - textBlockHeight) / 2 + fontSize * 0.8;
+    let startY = (height - textBlockHeight) / 2 + fontSize * 0.85;
     if (textPosY === "top") {
-      startY = 40 + fontSize * 0.8;
+      startY = 40 + fontSize * 0.85;
     } else if (textPosY === "bottom") {
-      startY = height - 40 - textBlockHeight + fontSize * 0.8;
+      startY = height - 40 - textBlockHeight + fontSize * 0.85;
     }
     ctx.save();
     if (skewX !== 0) {
@@ -817,6 +808,17 @@ function restoreLetterSpacing(ctx, saved) {
 function getCanvas2DContext2(canvas) {
   return canvas.getContext("2d");
 }
+function ctxSupportsFilter(ctx) {
+  try {
+    const prev = ctx.filter;
+    ctx.filter = "blur(4px)";
+    const ok = typeof ctx.filter === "string" && ctx.filter.includes("blur");
+    ctx.filter = prev;
+    return ok;
+  } catch {
+    return false;
+  }
+}
 function renderTextEffectCore(ctx, cfg) {
   if (cfg.customRenderer === "InkBrushEngine") {
     const engine = new InkBrushEngine(cfg);
@@ -1126,19 +1128,31 @@ function renderTextEffectCore(ctx, cfg) {
       const vpy = cHeight / 2 + (bevelVanishingPointY !== void 0 ? bevelVanishingPointY : 80) / 100 * (cHeight / 2);
       const fl = Math.max(100, bevelFocalLength !== void 0 ? bevelFocalLength : 400);
       if (bevelBlur && bevelBlur > 0) {
-        ctx.save();
-        ctx.filter = `blur(${bevelBlur}px)`;
         const blurColor = bevelBlurColor || bevelShadow || "#000000";
-        for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
-          const scale = fl / (fl + i);
+        if (ctxSupportsFilter(ctx)) {
           ctx.save();
-          ctx.translate(vpx, vpy);
-          ctx.scale(scale, scale);
-          ctx.translate(-vpx, -vpy);
-          renderLines("fill", blurColor);
+          ctx.filter = `blur(${bevelBlur}px)`;
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const scale = fl / (fl + i);
+            ctx.save();
+            ctx.translate(vpx, vpy);
+            ctx.scale(scale, scale);
+            ctx.translate(-vpx, -vpy);
+            renderLines("fill", blurColor);
+            ctx.restore();
+          }
           ctx.restore();
+        } else {
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const scale = fl / (fl + i);
+            ctx.save();
+            ctx.translate(vpx, vpy);
+            ctx.scale(scale, scale);
+            ctx.translate(-vpx, -vpy);
+            renderWithShadowTrick("fill", blurColor, bevelBlur, 0, 0, 100);
+            ctx.restore();
+          }
         }
-        ctx.restore();
       }
       ctx.save();
       for (let i = bevelDepth; i > 0; i--) {
@@ -1185,14 +1199,21 @@ function renderTextEffectCore(ctx, cfg) {
         return { dx: i, dy: i };
       };
       if (bevelBlur && bevelBlur > 0) {
-        ctx.save();
-        ctx.filter = `blur(${bevelBlur}px)`;
         const blurColor = bevelBlurColor || bevelShadow || "#000000";
-        for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
-          const { dx, dy } = getDirOffset(i);
-          renderLines("fill", blurColor, dx, dy);
+        if (ctxSupportsFilter(ctx)) {
+          ctx.save();
+          ctx.filter = `blur(${bevelBlur}px)`;
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const { dx, dy } = getDirOffset(i);
+            renderLines("fill", blurColor, dx, dy);
+          }
+          ctx.restore();
+        } else {
+          for (let i = bevelDepth; i > 0; i -= Math.max(1, Math.floor(bevelDepth / 4))) {
+            const { dx, dy } = getDirOffset(i);
+            renderWithShadowTrick("fill", blurColor, bevelBlur, dx, dy, 100);
+          }
         }
-        ctx.restore();
       }
       ctx.save();
       for (let i = bevelDepth; i > 0; i--) {
@@ -1246,24 +1267,51 @@ function renderTextEffectCore(ctx, cfg) {
       customStrokeStyle = grad;
     }
     const drawStrokeLayer = (color, width, blurAmount, opacity, position) => {
-      ctx.save();
-      ctx.globalAlpha = opacity / 100;
-      ctx.strokeStyle = color;
-      if (blurAmount > 0) {
+      if (blurAmount > 0 && ctxSupportsFilter(ctx)) {
+        ctx.save();
+        ctx.globalAlpha = opacity / 100;
+        ctx.strokeStyle = color;
         ctx.filter = `blur(${blurAmount}px)`;
+        if (position === "outside") {
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        } else if (position === "center") {
+          ctx.lineWidth = width;
+          renderLines("stroke");
+        } else if (position === "inside") {
+          ctx.globalCompositeOperation = "source-atop";
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        }
+        ctx.restore();
+      } else if (blurAmount > 0) {
+        const colorStr = typeof color === "string" ? color : strokeColor;
+        const spread = position === "center" ? width / 2 : width;
+        if (position === "inside") {
+          ctx.save();
+          ctx.globalCompositeOperation = "source-atop";
+          renderWithShadowTrick("stroke", colorStr, blurAmount, 0, 0, opacity, void 0, spread);
+          ctx.restore();
+        } else {
+          renderWithShadowTrick("stroke", colorStr, blurAmount, 0, 0, opacity, void 0, spread);
+        }
+      } else {
+        ctx.save();
+        ctx.globalAlpha = opacity / 100;
+        ctx.strokeStyle = color;
+        if (position === "outside") {
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        } else if (position === "center") {
+          ctx.lineWidth = width;
+          renderLines("stroke");
+        } else if (position === "inside") {
+          ctx.globalCompositeOperation = "source-atop";
+          ctx.lineWidth = width * 2;
+          renderLines("stroke");
+        }
+        ctx.restore();
       }
-      if (position === "outside") {
-        ctx.lineWidth = width * 2;
-        renderLines("stroke");
-      } else if (position === "center") {
-        ctx.lineWidth = width;
-        renderLines("stroke");
-      } else if (position === "inside") {
-        ctx.globalCompositeOperation = "source-atop";
-        ctx.lineWidth = width * 2;
-        renderLines("stroke");
-      }
-      ctx.restore();
     };
     if (sType === "double") {
       const outerWidth = strokeWidth + sWidthSecondary;