@nice2dev/ui-graphics 1.3.14 → 1.3.16

package/dist/cjs/vector/vectorIconImport.js

@@ -1,236 +1,186 @@
-'use strict';
-
-var React = require('react');
-var server = require('react-dom/server');
-var vectorEditorImport = require('./vectorEditorImport.js');
-
-/**
- * vectorIconImport — load an @nice2dev/icons component into the vector editor
- * as a set of editable VShape objects.
- *
- * Strategy:
- *   1. Render the icon to static SVG markup using react-dom/server.
- *   2. Parse with parseSVGToShapes (handles rect/circle/ellipse/line/polyline/polygon/text/path).
- *   3. Scale + translate the resulting shapes to fit the artboard with margin.
- *
- * Doesn't require the editor to know anything about how icons are authored —
- * any component that renders an <svg>{…}</svg> tree works.
- */
-/**
- * Convert an icon React component into a tray of editable VShapes.
- *
- * Pass `iconProps` to control how the icon is rendered before parsing —
- * e.g. variant, color, stroke width:
- *
- * ```ts
- * iconComponentToShapes(NtdHomeIcon, {
- *   artW: 512,
- *   artH: 512,
- *   iconProps: { variant: 'outline', strokeWidth: 1.5 },
- * });
- * ```
- *
- * Supported variants depend on the icon: `solid` | `outline` | `duotone` |
- * `cutout` | `vivid`. Anything in `iconProps` is merged over the default
- * render props (size: 'lg', primary/secondary colors, strokeWidth: 2).
- */
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const server = require("react-dom/server");
+const vectorEditorImport = require("./vectorEditorImport.js");
 function iconComponentToShapes(Icon, options) {
-    const { artW, artH, iconProps, margin = 32 } = options;
-    // Force a generous size and visible colors so the parser sees concrete strokes/fills.
-    const renderProps = {
-        size: 'lg',
-        // audit-allow: literal-color +2 — an imported icon's default colours - document data
-        primaryColor: '#5566cc',
-        secondaryColor: '#a29bfe',
-        strokeWidth: 2,
-        ...iconProps,
+  const { artW, artH, iconProps, margin = 32 } = options;
+  const renderProps = {
+    size: "lg",
+    // audit-allow: literal-color +2 — an imported icon's default colours - document data
+    primaryColor: "#5566cc",
+    secondaryColor: "#a29bfe",
+    strokeWidth: 2,
+    ...iconProps
+  };
+  const markup = server.renderToStaticMarkup(React.createElement(Icon, renderProps));
+  const wrapped = markup.trim().startsWith("<svg") ? markup : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${markup}</svg>`;
+  const shapes = vectorEditorImport.parseSVGToShapes(wrapped);
+  if (shapes.length === 0) {
+    return shapes;
+  }
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const s of shapes) {
+    minX = Math.min(minX, s.x);
+    minY = Math.min(minY, s.y);
+    maxX = Math.max(maxX, s.x + s.w);
+    maxY = Math.max(maxY, s.y + s.h);
+    if (s.x2 != null && s.y2 != null) {
+      minX = Math.min(minX, s.x2);
+      minY = Math.min(minY, s.y2);
+      maxX = Math.max(maxX, s.x2);
+      maxY = Math.max(maxY, s.y2);
+    }
+    if (s.points) {
+      for (const p of s.points) {
+        minX = Math.min(minX, p.x);
+        minY = Math.min(minY, p.y);
+        maxX = Math.max(maxX, p.x);
+        maxY = Math.max(maxY, p.y);
+      }
+    }
+  }
+  const srcW = Math.max(1, maxX - minX);
+  const srcH = Math.max(1, maxY - minY);
+  const target = Math.min(artW - margin * 2, artH - margin * 2);
+  const scale = target / Math.max(srcW, srcH);
+  const offsetX = (artW - srcW * scale) / 2 - minX * scale;
+  const offsetY = (artH - srcH * scale) / 2 - minY * scale;
+  return shapes.map((s, i) => {
+    const next = {
+      ...s,
+      name: s.name ?? `${s.type}-${i + 1}`,
+      x: s.x * scale + offsetX,
+      y: s.y * scale + offsetY,
+      w: s.w * scale,
+      h: s.h * scale
     };
-    const markup = server.renderToStaticMarkup(React.createElement(Icon, renderProps));
-    // Wrap in <svg> if the icon renders fragment-only (most use forwardRef returning <svg>)
-    const wrapped = markup.trim().startsWith('<svg')
-        ? markup
-        : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${markup}</svg>`;
-    const shapes = vectorEditorImport.parseSVGToShapes(wrapped);
-    if (shapes.length === 0) {
-        return shapes;
+    if (s.x2 != null) {
+      next.x2 = s.x2 * scale + offsetX;
+    }
+    if (s.y2 != null) {
+      next.y2 = s.y2 * scale + offsetY;
+    }
+    if (s.strokeWidth) {
+      next.strokeWidth = s.strokeWidth * scale;
+    }
+    if (s.points) {
+      next.points = s.points.map((p) => ({ x: p.x * scale + offsetX, y: p.y * scale + offsetY }));
     }
-    // Compute the bounding box of all imported shapes (in source coordinate space).
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const s of shapes) {
-        minX = Math.min(minX, s.x);
-        minY = Math.min(minY, s.y);
-        maxX = Math.max(maxX, s.x + s.w);
-        maxY = Math.max(maxY, s.y + s.h);
-        if (s.x2 != null && s.y2 != null) {
-            minX = Math.min(minX, s.x2);
-            minY = Math.min(minY, s.y2);
-            maxX = Math.max(maxX, s.x2);
-            maxY = Math.max(maxY, s.y2);
-        }
-        if (s.points) {
-            for (const p of s.points) {
-                minX = Math.min(minX, p.x);
-                minY = Math.min(minY, p.y);
-                maxX = Math.max(maxX, p.x);
-                maxY = Math.max(maxY, p.y);
-            }
-        }
+    if (s.d) {
+      next.d = transformPathD(s.d, scale, offsetX, offsetY);
     }
-    const srcW = Math.max(1, maxX - minX);
-    const srcH = Math.max(1, maxY - minY);
-    const target = Math.min(artW - margin * 2, artH - margin * 2);
-    const scale = target / Math.max(srcW, srcH);
-    const offsetX = (artW - srcW * scale) / 2 - minX * scale;
-    const offsetY = (artH - srcH * scale) / 2 - minY * scale;
-    return shapes.map((s, i) => {
-        var _a;
-        const next = {
-            ...s,
-            name: (_a = s.name) !== null && _a !== void 0 ? _a : `${s.type}-${i + 1}`,
-            x: s.x * scale + offsetX,
-            y: s.y * scale + offsetY,
-            w: s.w * scale,
-            h: s.h * scale,
-        };
-        if (s.x2 != null) {
-            next.x2 = s.x2 * scale + offsetX;
-        }
-        if (s.y2 != null) {
-            next.y2 = s.y2 * scale + offsetY;
-        }
-        if (s.strokeWidth) {
-            next.strokeWidth = s.strokeWidth * scale;
-        }
-        if (s.points) {
-            next.points = s.points.map((p) => ({ x: p.x * scale + offsetX, y: p.y * scale + offsetY }));
-        }
-        if (s.d) {
-            // Transform path data so the path renders at the new position/scale.
-            // We wrap the original `d` in a synthetic <g transform="…"> at render time
-            // would be cleaner, but VShape has no group; bake the transform into the path.
-            next.d = transformPathD(s.d, scale, offsetX, offsetY);
-        }
-        return next;
-    });
+    return next;
+  });
 }
-/** Apply translate+scale to every absolute coordinate in an SVG path 'd' string.
- * Supports the common subset used by icons (M, L, H, V, C, S, Q, T, A, Z) — both
- * uppercase (absolute) and lowercase (relative). Relative commands keep their
- * deltas multiplied by `scale`; absolute commands get translated as well. */
 function transformPathD(d, scale, tx, ty) {
-    var _a;
-    const tokens = (_a = d.match(/[a-zA-Z]|-?\d*\.?\d+(?:e[-+]?\d+)?/g)) !== null && _a !== void 0 ? _a : [];
-    let out = '';
-    let i = 0;
-    let cmd = '';
-    while (i < tokens.length) {
-        const tk = tokens[i];
-        if (/[a-zA-Z]/.test(tk)) {
-            cmd = tk;
-            out += (out ? ' ' : '') + tk;
-            i++;
-            continue;
-        }
-        // numeric — read a tuple according to current command
-        const params = readParams(tokens, i, cmd);
-        i += params.length;
-        const transformed = transformParams(params, cmd, scale, tx, ty);
-        out += ' ' + transformed.join(' ');
-        // Repeating commands: M followed by extra coords are implicit L; m → l
-        if (cmd === 'M') {
-            cmd = 'L';
-        }
-        else if (cmd === 'm') {
-            cmd = 'l';
-        }
+  const tokens = d.match(/[a-zA-Z]|-?\d*\.?\d+(?:e[-+]?\d+)?/g) ?? [];
+  let out = "";
+  let i = 0;
+  let cmd = "";
+  while (i < tokens.length) {
+    const tk = tokens[i];
+    if (/[a-zA-Z]/.test(tk)) {
+      cmd = tk;
+      out += (out ? " " : "") + tk;
+      i++;
+      continue;
     }
-    return out.trim();
+    const params = readParams(tokens, i, cmd);
+    i += params.length;
+    const transformed = transformParams(params, cmd, scale, tx, ty);
+    out += " " + transformed.join(" ");
+    if (cmd === "M") {
+      cmd = "L";
+    } else if (cmd === "m") {
+      cmd = "l";
+    }
+  }
+  return out.trim();
 }
 function readParams(tokens, from, cmd) {
-    const n = paramCount(cmd);
-    if (n <= 0) {
-        return [];
-    }
-    const out = [];
-    for (let i = 0; i < n; i++) {
-        if (from + i >= tokens.length || /[a-zA-Z]/.test(tokens[from + i])) {
-            break;
-        }
-        out.push(tokens[from + i]);
+  const n = paramCount(cmd);
+  if (n <= 0) {
+    return [];
+  }
+  const out = [];
+  for (let i = 0; i < n; i++) {
+    if (from + i >= tokens.length || /[a-zA-Z]/.test(tokens[from + i])) {
+      break;
     }
-    return out;
+    out.push(tokens[from + i]);
+  }
+  return out;
 }
 function paramCount(cmd) {
-    switch (cmd.toLowerCase()) {
-        case 'm':
-        case 'l':
-        case 't':
-            return 2;
-        case 'h':
-        case 'v':
-            return 1;
-        case 's':
-        case 'q':
-            return 4;
-        case 'c':
-            return 6;
-        case 'a':
-            return 7;
-        case 'z':
-            return 0;
-        default:
-            return 0;
-    }
+  switch (cmd.toLowerCase()) {
+    case "m":
+    case "l":
+    case "t":
+      return 2;
+    case "h":
+    case "v":
+      return 1;
+    case "s":
+    case "q":
+      return 4;
+    case "c":
+      return 6;
+    case "a":
+      return 7;
+    case "z":
+      return 0;
+    default:
+      return 0;
+  }
 }
 function transformParams(params, cmd, scale, tx, ty) {
-    if (params.length === 0) {
-        return params;
-    }
-    const isAbs = cmd === cmd.toUpperCase();
-    const c = cmd.toLowerCase();
-    const nums = params.map((p) => parseFloat(p));
-    const fmt = (n) => +n.toFixed(3) + '';
-    switch (c) {
-        case 'm':
-        case 'l':
-        case 't':
-            return [fmt(nums[0] * scale + (isAbs ? tx : 0)), fmt(nums[1] * scale + (isAbs ? ty : 0))];
-        case 'h':
-            return [fmt(nums[0] * scale + (isAbs ? tx : 0))];
-        case 'v':
-            return [fmt(nums[0] * scale + (isAbs ? ty : 0))];
-        case 'c':
-            return [
-                fmt(nums[0] * scale + (isAbs ? tx : 0)),
-                fmt(nums[1] * scale + (isAbs ? ty : 0)),
-                fmt(nums[2] * scale + (isAbs ? tx : 0)),
-                fmt(nums[3] * scale + (isAbs ? ty : 0)),
-                fmt(nums[4] * scale + (isAbs ? tx : 0)),
-                fmt(nums[5] * scale + (isAbs ? ty : 0)),
-            ];
-        case 's':
-        case 'q':
-            return [
-                fmt(nums[0] * scale + (isAbs ? tx : 0)),
-                fmt(nums[1] * scale + (isAbs ? ty : 0)),
-                fmt(nums[2] * scale + (isAbs ? tx : 0)),
-                fmt(nums[3] * scale + (isAbs ? ty : 0)),
-            ];
-        case 'a':
-            // rx ry x-axis-rotation large-arc sweep x y
-            return [
-                fmt(nums[0] * scale),
-                fmt(nums[1] * scale),
-                fmt(nums[2]),
-                fmt(nums[3]),
-                fmt(nums[4]),
-                fmt(nums[5] * scale + (isAbs ? tx : 0)),
-                fmt(nums[6] * scale + (isAbs ? ty : 0)),
-            ];
-        default:
-            return params;
-    }
+  if (params.length === 0) {
+    return params;
+  }
+  const isAbs = cmd === cmd.toUpperCase();
+  const c = cmd.toLowerCase();
+  const nums = params.map((p) => parseFloat(p));
+  const fmt = (n) => +n.toFixed(3) + "";
+  switch (c) {
+    case "m":
+    case "l":
+    case "t":
+      return [fmt(nums[0] * scale + (isAbs ? tx : 0)), fmt(nums[1] * scale + (isAbs ? ty : 0))];
+    case "h":
+      return [fmt(nums[0] * scale + (isAbs ? tx : 0))];
+    case "v":
+      return [fmt(nums[0] * scale + (isAbs ? ty : 0))];
+    case "c":
+      return [
+        fmt(nums[0] * scale + (isAbs ? tx : 0)),
+        fmt(nums[1] * scale + (isAbs ? ty : 0)),
+        fmt(nums[2] * scale + (isAbs ? tx : 0)),
+        fmt(nums[3] * scale + (isAbs ? ty : 0)),
+        fmt(nums[4] * scale + (isAbs ? tx : 0)),
+        fmt(nums[5] * scale + (isAbs ? ty : 0))
+      ];
+    case "s":
+    case "q":
+      return [
+        fmt(nums[0] * scale + (isAbs ? tx : 0)),
+        fmt(nums[1] * scale + (isAbs ? ty : 0)),
+        fmt(nums[2] * scale + (isAbs ? tx : 0)),
+        fmt(nums[3] * scale + (isAbs ? ty : 0))
+      ];
+    case "a":
+      return [
+        fmt(nums[0] * scale),
+        fmt(nums[1] * scale),
+        fmt(nums[2]),
+        fmt(nums[3]),
+        fmt(nums[4]),
+        fmt(nums[5] * scale + (isAbs ? tx : 0)),
+        fmt(nums[6] * scale + (isAbs ? ty : 0))
+      ];
+    default:
+      return params;
+  }
 }
-
 exports.iconComponentToShapes = iconComponentToShapes;
 exports.transformPathD = transformPathD;