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

package/README.md

@@ -72,8 +72,8 @@ It captures any HTML element as a scalable SVG image, preserving styles, fonts,
     - [iconFonts](#iconfonts)
     - [excludeFonts](#excludefonts)
   - [Filtering nodes: `exclude` vs `filter`](#filtering-nodes-exclude-vs-filter)
-  - [straighten](#straighten)
-  - [noShadows](#no-shadows)
+  - [outerTransforms](#outerTransforms)
+  - [outerShadows](#no-shadows)
   - [Cache control](#cache-control)
 - [preCache](#precache--optional-helper)
 - [Plugins (BETA)](#plugins-beta)
@@ -228,8 +228,8 @@ All capture methods accept an `options` object:
 | `cache`           | string   | `"soft"` | `disabled` \| `soft` \| `auto` \| `full`        |
 | `placeholders`    | boolean  | `true`   | Show placeholders for images/CORS iframes       |
 | `fallbackURL`     | string \| function  | - | Fallback image for `<img>` load failure |
-| `straighten`      | boolean  | `false`  | Straightens the root: removes `translate/rotate` but preserves `scale/skew`, producing a flat, reusable capture |
-| `noShadows`       | boolean  | `false`  | Do not expand the root’s bounding box for shadows/blur/outline, and strip those visual effects from the cloned root |
+| `outerTransforms`      | boolean  | `true`  | When `false` removes `translate/rotate` but preserves `scale/skew`, producing a flat, reusable capture |
+| `outerShadows`       | boolean  | `false`  | Do not expand the root’s bounding box for shadows/blur/outline, and strip those visual effects from the cloned root |
 
 ### Fallback image on `<img>` load failure
 
@@ -354,26 +354,25 @@ await snapdom.toPng(el, {
 });
 ```
 
-### Straighten 
+### outerTransforms 
 
-When capturing rotated or translated elements, you may want to **straighten** the root so the snapshot can be reused in another layout without inheriting those transforms.
+When capturing rotated or translated elements, you may want use **outerTransforms: false** option if you want to eliminate those external transforms. So, the output is **flat, upright, and ready** to use elsewhere.
 
-- **`straighten: true`**  
-  Straightens the cloned root: **removes `translate` and `rotate`** but **keeps `scale/skew`** to preserve proportions.  
-  The output is **flat, upright, and ready** to embed elsewhere.
+- **`outerTransforms: true (default)`**  
+  **Keeps the original `transforms` and `rotate`**.  
+  
 
-
-### noShadows
-- **`noShadows: true`**  
+### outerShadows
+- **`outerShadows: false (default)`**  
   Prevents expanding the bounding box for shadows, blur, or outline on the root, and also strips `box-shadow`, `text-shadow`, `filter: blur()/drop-shadow()`, and `outline` from the cloned root.  
 
-> 💡 **Tip:** Using both (`straighten` + `noShadows`) produces a strict, minimal bounding box with no visual bleed.
+> 💡 **Tip:** Using both (`outerTransforms: false` + `outerShadows: false`) produces a strict, minimal bounding box with no visual bleed.
 
 **Example**
 
 ```js
-// Straighten and remove shadow bleed
-await snapdom.toSvg(el, { straighten: true, noShadows: true });
+// outerTransforms and remove shadow bleed
+await snapdom.toSvg(el, { outerTransforms: true, outerShadows: true });
 ```
 
 ## Cache control
@@ -474,7 +473,7 @@ const out = await snapdom(element, {
 Every hook receives a single `context` object that contains normalized capture state:
 
 * **Input & options:**
-  `element`, `debug`, `fast`, `scale`, `dpr`, `width`, `height`, `backgroundColor`, `quality`, `useProxy`, `cache`, `straighten`, `noShadows`, `embedFonts`, `localFonts`, `iconFonts`, `excludeFonts`, `exclude`, `excludeMode`, `filter`, `filterMode`, `fallbackURL`.
+  `element`, `debug`, `fast`, `scale`, `dpr`, `width`, `height`, `backgroundColor`, `quality`, `useProxy`, `cache`, `outerTransforms`, `outerShadows`, `embedFonts`, `localFonts`, `iconFonts`, `excludeFonts`, `exclude`, `excludeMode`, `filter`, `filterMode`, `fallbackURL`.
 
 * **Intermediate values (depending on stage):**
   `clone`, `classCSS`, `styleCache`, `fontsCSS`, `baseCSS`, `svgString`, `dataURL`.

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.2.0.0-dev.0
+* v.2.0.0-dev.1
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -1504,6 +1504,130 @@
     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);
+  }
+  function ensureMaterialFontsReady(family = "Material Icons", px = 24) {
+    return __async(this, null, function* () {
+      try {
+        yield Promise.all([
+          document.fonts.load(`400 ${px}px "${family.replace(/["']/g, "")}"`),
+          document.fonts.ready
+        ]);
+      } catch (e) {
+      }
+    });
+  }
+  function resolvePaintColor(cs) {
+    var _a, _b;
+    let fill = ((_a = cs.getPropertyValue("-webkit-text-fill-color")) == null ? void 0 : _a.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 = (_b = cs.color) == null ? void 0 : _b.trim();
+    return c && c !== "inherit" ? c : "#000";
+  }
+  function materialIconToImage(_0) {
+    return __async(this, arguments, function* (ligatureText, {
+      family = "Material Icons",
+      weight = "normal",
+      fontSize = 32,
+      color = "#000",
+      variation = ""
+    } = {}) {
+      const fam = String(family || "").replace(/^['"]+|['"]+$/g, "");
+      const dpr = window.devicePixelRatio || 1;
+      yield 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 (e) {
+      }
+      ctx.fillText(ligatureText, 0, 0);
+      return {
+        dataUrl: canvas.toDataURL(),
+        width,
+        height
+      };
+    });
+  }
+  function ligatureIconToImage(cloneRoot, sourceRoot) {
+    return __async(this, null, function* () {
+      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 } = yield 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 (e) {
+        }
+      }
+      return replaced;
+    });
+  }
 
   // src/modules/fonts.js
   function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
@@ -3563,8 +3687,8 @@ ${imported}
       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 = "";
@@ -3577,17 +3701,21 @@ ${imported}
       const undoClamp = lineClamp(state.element);
       try {
         ({ clone, classCSS, styleCache } = yield 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 = __spreadValues({ clone, classCSS, styleCache }, state);
       yield runHook("afterClone", state);
+      try {
+        yield ligatureIconToImage(state.clone, state.element);
+      } catch (e) {
+      }
       yield new Promise((resolve) => {
         idle(() => __async(null, null, function* () {
           yield inlineImages(state.clone, state.options);
@@ -3667,7 +3795,7 @@ ${imported}
             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,
@@ -3682,7 +3810,7 @@ ${imported}
             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);
@@ -3705,7 +3833,7 @@ ${imported}
           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),
@@ -3723,7 +3851,7 @@ ${imported}
           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);
@@ -4085,8 +4213,8 @@ ${imported}
       backgroundColor: (_q = options.backgroundColor) != null ? _q : ["jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null,
       filename: (_r = options.filename) != null ? _r : "snapDOM",
       // NEW flags (user-friendly)
-      straighten: (_s = options.straighten) != null ? _s : false,
-      noShadows: (_t = options.noShadows) != null ? _t : false
+      outerTransforms: (_s = options.outerTransforms) != null ? _s : true,
+      outerShadows: (_t = options.outerShadows) != null ? _t : false
       // Plugins (reservado)
       // plugins: normalizePlugins(...),
     };