@clypra/engine 1.1.0 → 1.1.2

package/dist/index.js

@@ -115,7 +115,7 @@ function layoutWithFontSize(ctx, cfg, fontSize, lines) {
   ctx.font = fontStr;
   const lineWidths = lines.map((line) => measureLine(ctx, line, letterSpacing));
   const maxLineWidth = Math.max(...lineWidths, 1);
-  const textBlockHeight = fontSize + (lines.length - 1) * fontSize * lineHeight;
+  const textBlockHeight = lines.length === 1 ? fontSize : (lines.length - 1) * fontSize * lineHeight + fontSize;
   let align = "center";
   let startX = cWidth / 2;
   if (cfg.textPosX === "left") {
@@ -376,9 +376,8 @@ function createCanvas(width, height) {
 }
 function releaseCanvas(canvas) {
   if (canvas instanceof OffscreenCanvas) return;
-  if (typeof document !== "undefined" && canvas.parentNode) {
-    canvas.parentNode.removeChild(canvas);
-  }
+  canvas.width = 0;
+  canvas.height = 0;
 }
 function _resetPlatformCache() {
   _ctxFilter = null;
@@ -387,6 +386,46 @@ function _resetPlatformCache() {
   _offscreenCanvas = null;
   _webgl2 = null;
 }
+var CanvasDevice = class {
+  static canvases = [];
+  static maxPoolSize = 10;
+  /**
+   * Acquire a Canvas context from the pool or create a new one.
+   * If a canvas is pulled from the pool, it is resized to the target dimensions.
+   */
+  static acquire(width, height) {
+    let canvas;
+    if (this.canvases.length > 0) {
+      canvas = this.canvases.pop();
+      if (canvas.width !== width || canvas.height !== height) {
+        canvas.width = width;
+        canvas.height = height;
+      }
+    } else {
+      canvas = createCanvas(width, height);
+    }
+    return canvas;
+  }
+  /**
+   * Release a canvas back to the pool, or free its resources immediately if pool is full.
+   */
+  static release(canvas) {
+    if (this.canvases.length < this.maxPoolSize) {
+      this.canvases.push(canvas);
+    } else {
+      releaseCanvas(canvas);
+    }
+  }
+  /**
+   * Disposes all pooled canvases to release GPU/memory backing stores.
+   */
+  static clearPool() {
+    while (this.canvases.length > 0) {
+      const c = this.canvases.pop();
+      releaseCanvas(c);
+    }
+  }
+};
 
 // src/engine/procedural/utils.ts
 function getCanvas2DContext(canvas) {
@@ -1905,7 +1944,7 @@ function renderTextEffectCore(ctx, cfg) {
       ctx.globalCompositeOperation = "source-atop";
       const renderCount = Math.max(1, Math.min(20, layer2.strength ?? 1));
       for (let i = 0; i < renderCount; i++) {
-        renderWithShadowTrick("fill", layer2.color, layer2.blur, 0, 0, layer2.opacity, "transparent", layer2.spread ?? 0);
+        renderWithShadowTrick("fill", layer2.color, layer2.blur, 0, 0, layer2.opacity, "#000000", layer2.spread ?? 0);
       }
       ctx.restore();
     }
@@ -1913,7 +1952,7 @@ function renderTextEffectCore(ctx, cfg) {
   if (shadowEnabled && shadowType === "inner" && shadowOpacity > 0) {
     ctx.save();
     ctx.globalCompositeOperation = "source-atop";
-    renderWithShadowTrick("fill", shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY, shadowOpacity, "transparent");
+    renderWithShadowTrick("fill", shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY, shadowOpacity, "#000000");
     ctx.restore();
   }
   if (isGlitch) {
@@ -2346,12 +2385,148 @@ async function initializeFontSystem() {
   }
 }
 function checkFontVariant(variantName) {
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return false;
-  ctx.font = `16px "${variantName}"`;
-  const metrics = ctx.measureText("Test");
-  return metrics.width > 0;
+  if (typeof document === "undefined" || !document.fonts) return false;
+  return document.fonts.check(`16px "${variantName}"`);
+}
+var FontLoader = class {
+  state = {
+    loading: /* @__PURE__ */ new Set(),
+    loaded: /* @__PURE__ */ new Set(),
+    failed: /* @__PURE__ */ new Map(),
+    promises: /* @__PURE__ */ new Map()
+  };
+  async ensureFont(descriptor) {
+    const key = this.getFontKey(descriptor);
+    if (this.state.loaded.has(key)) {
+      return {
+        font: descriptor,
+        loaded: true,
+        loadTimeMs: 0
+      };
+    }
+    if (this.state.failed.has(key)) {
+      return {
+        font: descriptor,
+        loaded: false,
+        error: this.state.failed.get(key),
+        loadTimeMs: 0
+      };
+    }
+    if (this.state.promises.has(key)) {
+      return this.state.promises.get(key);
+    }
+    const promise = this.loadFont(descriptor);
+    this.state.promises.set(key, promise);
+    return promise;
+  }
+  async ensureFonts(descriptors) {
+    return Promise.all(descriptors.map((desc) => this.ensureFont(desc)));
+  }
+  async waitForFontsReady() {
+    if (typeof document === "undefined" || !document.fonts) {
+      return;
+    }
+    await document.fonts.ready;
+  }
+  isLoaded(descriptor) {
+    const key = this.getFontKey(descriptor);
+    return this.state.loaded.has(key);
+  }
+  getStats() {
+    return {
+      loaded: this.state.loaded.size,
+      loading: this.state.loading.size,
+      failed: this.state.failed.size
+    };
+  }
+  clear() {
+    this.state.loading.clear();
+    this.state.loaded.clear();
+    this.state.failed.clear();
+    this.state.promises.clear();
+  }
+  async loadFont(descriptor) {
+    const key = this.getFontKey(descriptor);
+    const startTime = performance.now();
+    this.state.loading.add(key);
+    try {
+      if (typeof document === "undefined" || !document.fonts) {
+        throw new Error("Font API not available");
+      }
+      const weight = this.normalizeFontWeight(descriptor.weight);
+      const style = descriptor.style || "normal";
+      const fontFace = `${style} ${weight} 16px "${descriptor.family}"`;
+      if (document.fonts.check(fontFace)) {
+        this.state.loaded.add(key);
+        this.state.loading.delete(key);
+        this.state.promises.delete(key);
+        return {
+          font: descriptor,
+          loaded: true,
+          loadTimeMs: performance.now() - startTime
+        };
+      }
+      await document.fonts.load(fontFace);
+      if (!document.fonts.check(fontFace)) {
+        throw new Error(`Font "${descriptor.family}" failed to load`);
+      }
+      this.state.loaded.add(key);
+      this.state.loading.delete(key);
+      this.state.promises.delete(key);
+      return {
+        font: descriptor,
+        loaded: true,
+        loadTimeMs: performance.now() - startTime
+      };
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      this.state.failed.set(key, errorMessage);
+      this.state.loading.delete(key);
+      this.state.promises.delete(key);
+      return {
+        font: descriptor,
+        loaded: false,
+        error: errorMessage,
+        loadTimeMs: performance.now() - startTime
+      };
+    }
+  }
+  getFontKey(descriptor) {
+    const weight = this.normalizeFontWeight(descriptor.weight);
+    const style = descriptor.style || "normal";
+    return `${descriptor.family}|${weight}|${style}`;
+  }
+  normalizeFontWeight(weight) {
+    if (typeof weight === "number") {
+      return weight;
+    }
+    if (!weight) return 400;
+    const asNum = parseInt(weight, 10);
+    if (!isNaN(asNum) && asNum >= 100 && asNum <= 900) {
+      return asNum;
+    }
+    const weightMap = {
+      normal: 400,
+      bold: 700,
+      lighter: 300,
+      bolder: 700
+    };
+    return weightMap[weight] ?? 400;
+  }
+};
+var globalFontLoader = null;
+function getFontLoader() {
+  if (!globalFontLoader) {
+    globalFontLoader = new FontLoader();
+  }
+  return globalFontLoader;
+}
+function resetFontLoader() {
+  globalFontLoader = null;
+}
+async function ensureFontsLoaded(descriptors) {
+  const loader = getFontLoader();
+  return loader.ensureFonts(descriptors);
 }
 
 // src/engine/timelineDefaults.ts
@@ -2724,6 +2899,212 @@ function mergeSceneIntoConfig(doc, base) {
   const out = sceneToConfig({ ...doc, legacyConfig: base });
   return out;
 }
+function resolveFontFamilyName(fontFamily) {
+  const f = fontFamily?.toLowerCase() || "";
+  if (f.includes("inter")) return "Inter Variable";
+  if (f.includes("montserrat")) return "Montserrat Variable";
+  if (f.includes("geist")) return "Geist Variable";
+  if (f.includes("space grotesk") || f.includes("grotesk")) return "Space Grotesk Variable";
+  if (f.includes("outfit")) return "Outfit Variable";
+  if (f.includes("roboto variable")) return "Roboto Variable";
+  if (f.includes("roboto condensed")) return "Roboto Condensed";
+  if (f === "roboto") return "Roboto Variable";
+  if (f.includes("open sans")) return "Open Sans Variable";
+  if (f.includes("raleway")) return "Raleway Variable";
+  if (f.includes("oswald")) return "Oswald Variable";
+  if (f.includes("playfair display")) return "Playfair Display Variable";
+  if (f.includes("nunito")) return "Nunito Variable";
+  if (f.includes("dancing script")) return "Dancing Script Variable";
+  if (f === "lato") return "Lato";
+  if (f === "anton") return "Anton";
+  if (f === "bebas neue") return "Bebas Neue";
+  if (f === "poppins") return "Poppins";
+  if (f === "permanent marker") return "Permanent Marker";
+  if (f === "bangers") return "Bangers";
+  if (f === "press start 2p") return "Press Start 2P";
+  if (f === "pacifico") return "Pacifico";
+  return fontFamily;
+}
+function _buildConfig(effect, text, fontSize, canvasWidth, canvasHeight, time, clipStartTime, clipDuration) {
+  const fill = effect.fills?.[0];
+  const stroke = effect.strokes?.[0];
+  const shadow = effect.shadows?.[0];
+  const bevel = effect.bevel;
+  const panel = effect.panel;
+  const ratio = fontSize / 100;
+  const config = {
+    // Canvas / text
+    width: canvasWidth,
+    height: canvasHeight,
+    canvasWidth,
+    canvasHeight,
+    text,
+    time: time ?? 0,
+    clipStartTime: clipStartTime ?? 0,
+    clipDuration: clipDuration ?? 5,
+    // Font
+    fontFamily: resolveFontFamilyName(effect.font.family),
+    fontWeight: effect.font.weight,
+    fontStyle: effect.font.style,
+    fontSize,
+    letterSpacing: effect.font.letterSpacing,
+    lineHeight: effect.font.lineHeight
+  };
+  if (effect.animation) {
+    config.animation = effect.animation;
+  }
+  if (fill) {
+    if (fill.type !== void 0) config.fillType = fill.type;
+    if (fill.color !== void 0) config.fillColor = fill.color;
+    if (fill.gradient?.angle !== void 0) config.fillGradientAngle = fill.gradient.angle;
+    if (fill.gradient?.stops !== void 0) config.fillGradientStops = fill.gradient.stops;
+    if (fill.patternType !== void 0) config.patternType = fill.patternType;
+    if (fill.perCharFillEnabled !== void 0) config.perCharFillEnabled = fill.perCharFillEnabled;
+    if (fill.charFillColors !== void 0) config.charFillColors = fill.charFillColors;
+  } else {
+    config.fillType = "none";
+  }
+  config.strokeEnabled = !!stroke;
+  if (stroke) {
+    if (stroke.color !== void 0) config.strokeColor = stroke.color;
+    if (stroke.width !== void 0) config.strokeWidth = stroke.width * ratio;
+    if (stroke.position !== void 0) config.strokePosition = stroke.position;
+    if (stroke.opacity !== void 0) config.strokeOpacity = stroke.opacity;
+    if (stroke.lineJoin !== void 0) config.strokeLineJoin = stroke.lineJoin;
+    if (stroke.blur !== void 0) config.strokeBlur = stroke.blur * ratio;
+    if (stroke.type !== void 0) config.strokeType = stroke.type;
+    if (stroke.colorSecondary !== void 0) config.strokeColorSecondary = stroke.colorSecondary;
+    if (stroke.widthSecondary !== void 0) config.strokeWidthSecondary = stroke.widthSecondary * ratio;
+    if (stroke.fadeRange !== void 0) config.strokeFadeRange = stroke.fadeRange;
+  }
+  config.shadowEnabled = !!shadow;
+  if (shadow) {
+    if (shadow.color !== void 0) config.shadowColor = shadow.color;
+    if (shadow.blur !== void 0) config.shadowBlur = shadow.blur * ratio;
+    if (shadow.offsetX !== void 0) config.shadowOffsetX = shadow.offsetX * ratio;
+    if (shadow.offsetY !== void 0) config.shadowOffsetY = shadow.offsetY * ratio;
+    if (shadow.opacity !== void 0) config.shadowOpacity = shadow.opacity;
+    if (shadow.type !== void 0) config.shadowType = shadow.type;
+  }
+  config.bevelEnabled = !!bevel;
+  if (bevel) {
+    if (bevel.depth !== void 0) config.bevelDepth = Math.round(bevel.depth * ratio);
+    if (bevel.highlightColor !== void 0) config.bevelHighlight = bevel.highlightColor;
+    if (bevel.shadowColor !== void 0) config.bevelShadow = bevel.shadowColor;
+    if (bevel.direction !== void 0) config.bevelDirection = bevel.direction;
+    if (bevel.coreColor !== void 0) config.bevelCoreColor = bevel.coreColor;
+    if (bevel.edgeColor !== void 0) config.bevelEdgeColor = bevel.edgeColor;
+    if (bevel.edgeWidth !== void 0) config.bevelEdgeWidth = bevel.edgeWidth * ratio;
+    if (bevel.blur !== void 0) config.bevelBlur = bevel.blur * ratio;
+    if (bevel.blurColor !== void 0) config.bevelBlurColor = bevel.blurColor;
+    if (bevel.perspectiveEnabled !== void 0) config.bevelPerspectiveEnabled = bevel.perspectiveEnabled;
+    if (bevel.vanishingPointX !== void 0) config.bevelVanishingPointX = bevel.vanishingPointX;
+    if (bevel.vanishingPointY !== void 0) config.bevelVanishingPointY = bevel.vanishingPointY;
+    if (bevel.focalLength !== void 0) config.bevelFocalLength = bevel.focalLength;
+  }
+  if (effect.stack) {
+    config.stackEnabled = !!effect.stack.count;
+    if (effect.stack.count !== void 0) config.stackCount = effect.stack.count;
+    if (effect.stack.offsetX !== void 0) config.stackOffsetX = effect.stack.offsetX * ratio;
+    if (effect.stack.offsetY !== void 0) config.stackOffsetY = effect.stack.offsetY * ratio;
+    if (effect.stack.opacityDecay !== void 0) config.stackOpacityDecay = effect.stack.opacityDecay;
+    if (effect.stack.color1 !== void 0) config.stackColor1 = effect.stack.color1;
+    if (effect.stack.color2 !== void 0) config.stackColor2 = effect.stack.color2;
+    if (effect.stack.color3 !== void 0) config.stackColor3 = effect.stack.color3;
+    if (effect.stack.color4 !== void 0) config.stackColor4 = effect.stack.color4;
+  }
+  config.panelEnabled = !!panel;
+  if (panel) {
+    if (panel.color !== void 0) config.panelColor = panel.color;
+    if (panel.opacity !== void 0) config.panelOpacity = panel.opacity;
+    if (panel.radius !== void 0) config.panelRadius = panel.radius;
+    if (panel.paddingX !== void 0) config.panelPaddingX = panel.paddingX * ratio;
+    if (panel.paddingY !== void 0) config.panelPaddingY = panel.paddingY * ratio;
+    if (panel.stroke !== void 0) {
+      config.panelStrokeEnabled = !!panel.stroke;
+      if (panel.stroke.color !== void 0) config.panelStrokeColor = panel.stroke.color;
+      if (panel.stroke.width !== void 0) config.panelStrokeWidth = panel.stroke.width * ratio;
+    }
+  }
+  if (effect.glows) {
+    config.glowLayers = effect.glows.map((g) => {
+      const mappedGlow = {
+        enabled: true,
+        color: g.color,
+        blur: typeof g.blur === "number" ? g.blur * ratio : g.blur ?? 0,
+        opacity: g.opacity,
+        type: g.type ?? "outer"
+      };
+      if (g.strength !== void 0) mappedGlow.strength = g.strength;
+      if (g.spread !== void 0) mappedGlow.spread = g.spread * ratio;
+      return mappedGlow;
+    });
+  }
+  const standardKeys = /* @__PURE__ */ new Set([
+    "id",
+    "name",
+    "category",
+    "description",
+    "tags",
+    "font",
+    "fills",
+    "strokes",
+    "shadows",
+    "glows",
+    "bevel",
+    "panel",
+    "text",
+    "animation",
+    "stack"
+  ]);
+  for (const key of Object.keys(effect)) {
+    if (!standardKeys.has(key)) {
+      config[key] = effect[key];
+    }
+  }
+  return config;
+}
+function layerToTextEffectConfig(layer2) {
+  const normWeight = typeof layer2.fontWeight === "number" ? layer2.fontWeight : layer2.fontWeight === "bold" ? 700 : 400;
+  const config = {
+    ...defaultConfig,
+    width: layer2.width,
+    height: layer2.height,
+    canvasWidth: layer2.width,
+    canvasHeight: layer2.height,
+    text: layer2.text,
+    fontFamily: resolveFontFamilyName(layer2.fontFamily),
+    fontWeight: normWeight,
+    fontStyle: layer2.fontStyle || "normal",
+    fontSize: layer2.fontSize,
+    letterSpacing: layer2.letterSpacing ?? 0,
+    lineHeight: layer2.lineHeight ?? 1.2,
+    fillType: layer2.color ? "solid" : "none",
+    fillColor: layer2.color ?? "#FFFFFF",
+    strokeEnabled: !!layer2.stroke,
+    strokeColor: layer2.stroke?.color ?? "#000000",
+    strokeWidth: layer2.stroke?.width ?? 0,
+    strokePosition: "center",
+    strokeOpacity: 100,
+    strokeLineJoin: "round",
+    shadowEnabled: !!layer2.shadow,
+    shadowColor: layer2.shadow?.color ?? "#000000",
+    shadowBlur: layer2.shadow?.blur ?? 0,
+    shadowOffsetX: layer2.shadow?.offsetX ?? 0,
+    shadowOffsetY: layer2.shadow?.offsetY ?? 0,
+    shadowOpacity: 100,
+    shadowType: "drop",
+    panelEnabled: !!layer2.background,
+    panelColor: layer2.background?.color ?? "#1E1E26",
+    panelOpacity: 80,
+    panelRadius: layer2.background?.borderRadius ?? 6,
+    panelPaddingX: layer2.background?.padding ?? 12,
+    panelPaddingY: layer2.background?.padding ?? 12,
+    textPosX: layer2.textAlign || "center",
+    textPosY: layer2.verticalAlign === "middle" ? "middle" : layer2.verticalAlign || "middle"
+  };
+  return config;
+}
 
 // src/engine/animation.ts
 function ease(t, kind = "linear") {
@@ -3009,6 +3390,10 @@ function getCompositor() {
   }
   return sharedCompositor;
 }
+function disposeSharedCompositor() {
+  sharedCompositor?.dispose();
+  sharedCompositor = null;
+}
 function evaluateScene(doc, time, ctx, options = {}) {
   const animated = applyTimelineAtTime(doc, time);
   const cfg = sceneToConfig(animated);
@@ -3029,47 +3414,23 @@ function evaluateScene(doc, time, ctx, options = {}) {
     finishFrame();
     return;
   }
-  if (supportsOffscreenCanvas()) {
-    const off = new OffscreenCanvas(w, h);
-    const offCtx = off.getContext("2d");
-    if (!offCtx) {
-      renderTextEffectCore(ctx, cfg);
-      finishFrame();
-      return;
-    }
-    renderTextEffectCore(offCtx, cfg);
-    applyMaskReveal(offCtx, animated, w, h);
+  const temp = CanvasDevice.acquire(w, h);
+  const tctx = temp.getContext("2d");
+  if (tctx) {
+    tctx.clearRect(0, 0, w, h);
+    renderTextEffectCore(tctx, cfg);
+    applyMaskReveal(tctx, animated, w, h);
     const compositor = options.compositor ?? getCompositor();
     if (compositor?.isSupported) {
-      compositor.renderToContext(ctx, off, comp);
-      return;
-    }
-    ctx.clearRect(0, 0, w, h);
-    ctx.drawImage(off, 0, 0);
-    return;
-  }
-  if (typeof document !== "undefined") {
-    const temp = document.createElement("canvas");
-    temp.width = w;
-    temp.height = h;
-    const tctx = temp.getContext("2d");
-    if (tctx) {
-      renderTextEffectCore(tctx, cfg);
-      applyMaskReveal(tctx, animated, w, h);
-      const compositor = options.compositor ?? getCompositor();
-      if (compositor?.isSupported) {
-        compositor.renderToContext(ctx, temp, comp);
-        temp.width = 0;
-        temp.height = 0;
-        return;
-      }
+      compositor.renderToContext(ctx, temp, comp);
+    } else {
       ctx.clearRect(0, 0, w, h);
       ctx.drawImage(temp, 0, 0);
-      temp.width = 0;
-      temp.height = 0;
-      return;
     }
+    CanvasDevice.release(temp);
+    return;
   }
+  CanvasDevice.release(temp);
   renderTextEffectCore(ctx, cfg);
   finishFrame();
 }
@@ -6036,6 +6397,7 @@ function duplicateTrackAtPlayhead(doc, trackIndex, previewTime) {
 export {
   COMPOSITION_PRESETS,
   CUSTOM_ENGINE_IDS,
+  CanvasDevice,
   DEFAULT_CANVAS_HEIGHT,
   DEFAULT_CANVAS_WIDTH,
   DEFAULT_DURATION,
@@ -6047,6 +6409,7 @@ export {
   ENTRANCE_PRESETS,
   EXIT_PRESETS,
   FONT_WEIGHT_OPTIONS,
+  FontLoader,
   InkBrushEngine,
   LEGACY_RENDERER_MAP,
   LOOP_PRESETS,
@@ -6058,6 +6421,7 @@ export {
   TextEffectRenderer,
   WEBM_EXPORT_MAX_FRAMES,
   WebGLCompositor,
+  _buildConfig,
   _resetPlatformCache,
   addImageLayer,
   addKeyframeAtTime,
@@ -6102,6 +6466,7 @@ export {
   createPulseOpacityTrack,
   defaultConfig,
   deleteKeyframe,
+  disposeSharedCompositor,
   downloadDotLottie,
   downloadLottieJson,
   downloadPngSequenceZip,
@@ -6114,6 +6479,7 @@ export {
   encodeGif,
   ensureDefaultTimeline,
   ensureFontInLottie,
+  ensureFontsLoaded,
   evaluateConfig,
   evaluateScene,
   findTrackIndex,
@@ -6121,6 +6487,7 @@ export {
   getAnimatableParamDef,
   getAnimatableParamsForLayer,
   getDefaultText,
+  getFontLoader,
   getLayerById,
   getPresetScene,
   getSceneTime,
@@ -6139,6 +6506,7 @@ export {
   injectText,
   injectTextStyle,
   isWebMExportSupported,
+  layerToTextEffectConfig,
   loadLottieFonts,
   lottieColorToHex,
   lottieJToAlign,
@@ -6161,10 +6529,12 @@ export {
   renderPngSequence,
   renderSceneWebM,
   renderTextEffectCore,
+  resetFontLoader,
   resetSceneTime,
   resizeCharFillColors,
   resolveAnimatedScalar,
   resolveCustomEngineId,
+  resolveFontFamilyName,
   restoreLetterSpacing,
   scanLottieFonts,
   scanTextLayers,