@zumer/snapdom 2.0.0-dev.0 → 2.0.0-dev.1

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.2.0.0-dev.0
+* v.2.0.0-dev.1
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -1443,6 +1443,123 @@ function isIconFont2(input) {
   if (/icon/i.test(text) || /glyph/i.test(text) || /symbols/i.test(text) || /feather/i.test(text) || /fontawesome/i.test(text)) return true;
   return false;
 }
+function isMaterialFamily(family = "") {
+  const s = String(family).toLowerCase();
+  return /\bmaterial\s*icons\b/.test(s) || /\bmaterial\s*symbols\b/.test(s);
+}
+async function ensureMaterialFontsReady(family = "Material Icons", px = 24) {
+  try {
+    await Promise.all([
+      document.fonts.load(`400 ${px}px "${family.replace(/["']/g, "")}"`),
+      document.fonts.ready
+    ]);
+  } catch {
+  }
+}
+function resolvePaintColor(cs) {
+  let fill = cs.getPropertyValue("-webkit-text-fill-color")?.trim() || "";
+  const isTransparent = /rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(fill);
+  if (fill && !isTransparent && fill.toLowerCase() !== "currentcolor") {
+    return fill;
+  }
+  const c = cs.color?.trim();
+  return c && c !== "inherit" ? c : "#000";
+}
+async function materialIconToImage(ligatureText, {
+  family = "Material Icons",
+  weight = "normal",
+  fontSize = 32,
+  color = "#000",
+  variation = ""
+} = {}) {
+  const fam = String(family || "").replace(/^['"]+|['"]+$/g, "");
+  const dpr = window.devicePixelRatio || 1;
+  await ensureMaterialFontsReady(fam, fontSize);
+  const span = document.createElement("span");
+  span.textContent = ligatureText;
+  span.style.position = "absolute";
+  span.style.visibility = "hidden";
+  span.style.left = "-99999px";
+  span.style.whiteSpace = "nowrap";
+  span.style.fontFamily = `"${fam}"`;
+  span.style.fontWeight = String(weight || "normal");
+  span.style.fontSize = `${fontSize}px`;
+  span.style.lineHeight = "1";
+  span.style.margin = "0";
+  span.style.padding = "0";
+  span.style.fontFeatureSettings = "'liga' 1";
+  span.style.fontVariantLigatures = "normal";
+  if (variation) span.style.fontVariationSettings = variation;
+  span.style.color = color;
+  document.body.appendChild(span);
+  const rect = span.getBoundingClientRect();
+  const width = Math.max(1, Math.ceil(rect.width));
+  const height = Math.max(1, Math.ceil(rect.height));
+  document.body.removeChild(span);
+  const canvas = document.createElement("canvas");
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  const ctx = canvas.getContext("2d");
+  ctx.scale(dpr, dpr);
+  ctx.font = `${weight ? `${weight} ` : ""}${fontSize}px "${fam}"`;
+  ctx.textAlign = "left";
+  ctx.textBaseline = "top";
+  ctx.fillStyle = color;
+  try {
+    ctx.fontKerning = "normal";
+  } catch {
+  }
+  ctx.fillText(ligatureText, 0, 0);
+  return {
+    dataUrl: canvas.toDataURL(),
+    width,
+    height
+  };
+}
+async function ligatureIconToImage(cloneRoot, sourceRoot) {
+  if (!(cloneRoot instanceof Element)) return 0;
+  const selector = '.material-icons, [class*="material-symbols"]';
+  const cloneNodes = Array.from(
+    cloneRoot.querySelectorAll(selector)
+  ).filter((n) => n && n.textContent && n.textContent.trim());
+  if (cloneNodes.length === 0) return 0;
+  const sourceNodes = sourceRoot instanceof Element ? Array.from(sourceRoot.querySelectorAll(selector)).filter((n) => n && n.textContent && n.textContent.trim()) : [];
+  let replaced = 0;
+  for (let i = 0; i < cloneNodes.length; i++) {
+    const el = cloneNodes[i];
+    const src = sourceNodes[i] || null;
+    try {
+      const csSrc = src ? getComputedStyle(src) : getComputedStyle(el);
+      const family = csSrc.fontFamily || "Material Icons";
+      if (!isMaterialFamily(family)) continue;
+      const text = (src || el).textContent.trim();
+      if (!text) continue;
+      const size = parseInt(csSrc.fontSize, 10) || 24;
+      const weight = csSrc.fontWeight && csSrc.fontWeight !== "normal" ? csSrc.fontWeight : "normal";
+      const color = resolvePaintColor(csSrc);
+      const variation = csSrc.fontVariationSettings && csSrc.fontVariationSettings !== "normal" ? csSrc.fontVariationSettings : "";
+      const { dataUrl, width, height } = await materialIconToImage(text, {
+        family,
+        weight,
+        fontSize: size,
+        color,
+        variation
+      });
+      el.textContent = "";
+      const img = el.ownerDocument.createElement("img");
+      img.src = dataUrl;
+      img.alt = text;
+      img.style.height = `${size}px`;
+      img.style.width = `${Math.max(1, Math.round(width / height * size))}px`;
+      img.style.objectFit = "contain";
+      img.style.verticalAlign = getComputedStyle(el).verticalAlign || "baseline";
+      el.appendChild(img);
+      replaced++;
+    } catch {
+    }
+  }
+  return replaced;
+}
 
 // src/modules/fonts.js
 async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
@@ -3446,8 +3563,8 @@ async function captureDOM(element, options) {
   if (!element) throw new Error("Element cannot be null or undefined");
   applyCachePolicy(options.cache);
   const fast = options.fast;
-  const straighten = !!options.straighten;
-  const noShadows = !!options.noShadows;
+  const outerTransforms = options.outerTransforms !== false;
+  const outerShadows = !!options.outerShadows;
   let state = { element, options, plugins: options.plugins };
   let clone, classCSS, styleCache;
   let fontsCSS = "";
@@ -3460,17 +3577,21 @@ async function captureDOM(element, options) {
   const undoClamp = lineClamp(state.element);
   try {
     ({ clone, classCSS, styleCache } = await prepareClone(state.element, state.options));
-    if (straighten && clone) {
-      rootTransform2D = normalizeRootTransforms(state.element, state.clone);
+    if (!outerTransforms && clone) {
+      rootTransform2D = normalizeRootTransforms(state.element, clone);
     }
-    if (noShadows && clone) {
-      stripRootShadows(state.element, state.clone);
+    if (!outerShadows && clone) {
+      stripRootShadows(state.element, clone);
     }
   } finally {
     undoClamp();
   }
   state = { clone, classCSS, styleCache, ...state };
   await runHook("afterClone", state);
+  try {
+    await ligatureIconToImage(state.clone, state.element);
+  } catch {
+  }
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(state.clone, state.options);
@@ -3550,7 +3671,7 @@ async function captureDOM(element, options) {
         h = h0;
       }
       let minX = 0, minY = 0, maxX = w0, maxY = h0;
-      if (straighten && rootTransform2D && Number.isFinite(rootTransform2D.a)) {
+      if (!outerTransforms && rootTransform2D && Number.isFinite(rootTransform2D.a)) {
         const M2 = {
           a: rootTransform2D.a,
           b: rootTransform2D.b || 0,
@@ -3565,7 +3686,7 @@ async function captureDOM(element, options) {
         maxX = limitDecimals(bb2.maxX);
         maxY = limitDecimals(bb2.maxY);
       } else {
-        const useTFBBox = !straighten && hasTFBBox(state.element);
+        const useTFBBox = outerTransforms && hasTFBBox(state.element);
         if (useTFBBox) {
           const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
           const ind2 = readIndividualTransforms(state.element);
@@ -3588,7 +3709,7 @@ async function captureDOM(element, options) {
       const bleedBlur = parseFilterBlur(csEl);
       const bleedOutline = parseOutline(csEl);
       const drop = parseFilterDropShadows(csEl);
-      const bleed = noShadows ? { top: 0, right: 0, bottom: 0, left: 0 } : {
+      const bleed = !outerShadows ? { top: 0, right: 0, bottom: 0, left: 0 } : {
         top: limitDecimals(bleedShadow.top + bleedBlur.top + bleedOutline.top + drop.bleed.top),
         right: limitDecimals(bleedShadow.right + bleedBlur.right + bleedOutline.right + drop.bleed.right),
         bottom: limitDecimals(bleedShadow.bottom + bleedBlur.bottom + bleedOutline.bottom + drop.bleed.bottom),
@@ -3606,7 +3727,7 @@ async function captureDOM(element, options) {
       const outH = Math.max(1, limitDecimals(vbH0 * scaleH));
       const svgNS = "http://www.w3.org/2000/svg";
       const basePad = isSafari() ? 1 : 0;
-      const extraPad = straighten ? 1 : 0;
+      const extraPad = !outerTransforms ? 1 : 0;
       const pad = limitDecimals(basePad + extraPad);
       const fo = document.createElementNS(svgNS, "foreignObject");
       const vbMinX = limitDecimals(minX);
@@ -3963,8 +4084,8 @@ function createContext(options = {}) {
     backgroundColor: options.backgroundColor ?? (["jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null),
     filename: options.filename ?? "snapDOM",
     // NEW flags (user-friendly)
-    straighten: options.straighten ?? false,
-    noShadows: options.noShadows ?? false
+    outerTransforms: options.outerTransforms ?? true,
+    outerShadows: options.outerShadows ?? false
     // Plugins (reservado)
     // plugins: normalizePlugins(...),
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "2.0.0-dev.0",
+  "version": "2.0.0-dev.1",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",

package/types/snapdom.d.ts

@@ -78,13 +78,13 @@ export interface SnapdomOptions {
   /** How to apply `filter` ("hide" or "remove"). Default "hide". */
   filterMode?: "hide" | "remove";
 
-  /** Straighten the root: remove translate/rotate, keep scale/skew. */
-  straighten?: boolean;
+  /** outerTransforms the root: remove translate/rotate, keep scale/skew. */
+  outerTransforms?: boolean;
   /**
    * Do not expand root bbox for shadows/blur/outline; also strip shadows/outline
    * from the cloned root to get a tight capture box.
    */
-  noShadows?: boolean;
+  outerShadows?: boolean;
 
   /** Inline non-icon fonts actually used within the subtree. */
   embedFonts?: boolean;