@nice2dev/ui-graphics 1.3.14 → 1.3.16

package/dist/esm/vector/vectorGradients.js

@@ -1,193 +1,178 @@
-/**
- * Gradient types and utilities for VectorEditor
- */
-/* ────────────────────────────────────────────────────────────────
-   GRADIENT ID GENERATOR
-──────────────────────────────────────────────────────────────── */
 let _gradId = 0;
 const gradientId = () => `grad${++_gradId}`;
-/* ────────────────────────────────────────────────────────────────
-   PRESET GRADIENTS
-──────────────────────────────────────────────────────────────── */
 const PRESET_GRADIENTS = [
-    // Linear gradients
-    {
-        type: 'linear',
-        id: gradientId(),
-        angle: 0,
-        stops: [
-            { offset: 0, color: '#ff0000' },
-            { offset: 1, color: '#0000ff' },
-        ],
-    },
-    {
-        type: 'linear',
-        id: gradientId(),
-        angle: 45,
-        stops: [
-            { offset: 0, color: '#00ff00' },
-            { offset: 0.5, color: '#ffff00' },
-            { offset: 1, color: '#ff0000' },
-        ],
-    },
-    {
-        type: 'linear',
-        id: gradientId(),
-        angle: 90,
-        stops: [
-            { offset: 0, color: '#ffffff' },
-            { offset: 1, color: '#000000' },
-        ],
-    },
-    {
-        type: 'linear',
-        id: gradientId(),
-        angle: 0,
-        stops: [
-            { offset: 0, color: '#667eea' },
-            { offset: 1, color: '#764ba2' },
-        ],
-    },
-    {
-        type: 'linear',
-        id: gradientId(),
-        angle: 45,
-        stops: [
-            { offset: 0, color: '#f093fb' },
-            { offset: 1, color: '#f5576c' },
-        ],
-    },
-    // Radial gradients
-    {
-        type: 'radial',
-        id: gradientId(),
-        cx: 0.5,
-        cy: 0.5,
-        r: 0.7,
-        stops: [
-            { offset: 0, color: '#ffffff' },
-            { offset: 1, color: '#000000' },
-        ],
-    },
-    {
-        type: 'radial',
-        id: gradientId(),
-        cx: 0.3,
-        cy: 0.3,
-        r: 0.8,
-        stops: [
-            { offset: 0, color: '#ffff88' },
-            { offset: 0.5, color: '#ff8800' },
-            { offset: 1, color: '#880000' },
-        ],
-    },
-    {
-        type: 'radial',
-        id: gradientId(),
-        cx: 0.5,
-        cy: 0.5,
-        r: 0.5,
-        stops: [
-            { offset: 0, color: '#00ffff', opacity: 1 },
-            { offset: 1, color: '#00ffff', opacity: 0 },
-        ],
-    },
+  // Linear gradients
+  {
+    type: "linear",
+    id: gradientId(),
+    angle: 0,
+    stops: [
+      { offset: 0, color: "#ff0000" },
+      { offset: 1, color: "#0000ff" }
+    ]
+  },
+  {
+    type: "linear",
+    id: gradientId(),
+    angle: 45,
+    stops: [
+      { offset: 0, color: "#00ff00" },
+      { offset: 0.5, color: "#ffff00" },
+      { offset: 1, color: "#ff0000" }
+    ]
+  },
+  {
+    type: "linear",
+    id: gradientId(),
+    angle: 90,
+    stops: [
+      { offset: 0, color: "#ffffff" },
+      { offset: 1, color: "#000000" }
+    ]
+  },
+  {
+    type: "linear",
+    id: gradientId(),
+    angle: 0,
+    stops: [
+      { offset: 0, color: "#667eea" },
+      { offset: 1, color: "#764ba2" }
+    ]
+  },
+  {
+    type: "linear",
+    id: gradientId(),
+    angle: 45,
+    stops: [
+      { offset: 0, color: "#f093fb" },
+      { offset: 1, color: "#f5576c" }
+    ]
+  },
+  // Radial gradients
+  {
+    type: "radial",
+    id: gradientId(),
+    cx: 0.5,
+    cy: 0.5,
+    r: 0.7,
+    stops: [
+      { offset: 0, color: "#ffffff" },
+      { offset: 1, color: "#000000" }
+    ]
+  },
+  {
+    type: "radial",
+    id: gradientId(),
+    cx: 0.3,
+    cy: 0.3,
+    r: 0.8,
+    stops: [
+      { offset: 0, color: "#ffff88" },
+      { offset: 0.5, color: "#ff8800" },
+      { offset: 1, color: "#880000" }
+    ]
+  },
+  {
+    type: "radial",
+    id: gradientId(),
+    cx: 0.5,
+    cy: 0.5,
+    r: 0.5,
+    stops: [
+      { offset: 0, color: "#00ffff", opacity: 1 },
+      { offset: 1, color: "#00ffff", opacity: 0 }
+    ]
+  }
 ];
-/* ────────────────────────────────────────────────────────────────
-   GRADIENT TO SVG CONVERSION
-──────────────────────────────────────────────────────────────── */
 function gradientToSVGDef(gradient) {
-    const stopsSVG = gradient.stops
-        .map((stop) => `<stop offset="${stop.offset * 100}%" stop-color="${stop.color}"${stop.opacity !== undefined ? ` stop-opacity="${stop.opacity}"` : ''}/>`)
-        .join('\n      ');
-    switch (gradient.type) {
-        case 'linear': {
-            const rad = (gradient.angle * Math.PI) / 180;
-            const x1 = 50 - Math.cos(rad) * 50;
-            const y1 = 50 - Math.sin(rad) * 50;
-            const x2 = 50 + Math.cos(rad) * 50;
-            const y2 = 50 + Math.sin(rad) * 50;
-            return `<linearGradient id="${gradient.id}" x1="${x1}%" y1="${y1}%" x2="${x2}%" y2="${y2}%">
-      ${stopsSVG}
+  const stopsSVG = gradient.stops.map(
+    (stop) => `<stop offset="${stop.offset * 100}%" stop-color="${stop.color}"${stop.opacity !== void 0 ? ` stop-opacity="${stop.opacity}"` : ""}/>`
+  ).join("\n      ");
+  switch (gradient.type) {
+    case "linear": {
+      const rad = gradient.angle * Math.PI / 180;
+      const x1 = 50 - Math.cos(rad) * 50;
+      const y1 = 50 - Math.sin(rad) * 50;
+      const x2 = 50 + Math.cos(rad) * 50;
+      const y2 = 50 + Math.sin(rad) * 50;
+      return `<linearGradient id="${gradient.id}" x1="${x1}%" y1="${y1}%" x2="${x2}%" y2="${y2}%">
+      ${stopsSVG}
     </linearGradient>`;
-        }
-        case 'radial': {
-            const fxAttr = gradient.fx !== undefined ? ` fx="${gradient.fx * 100}%"` : '';
-            const fyAttr = gradient.fy !== undefined ? ` fy="${gradient.fy * 100}%"` : '';
-            return `<radialGradient id="${gradient.id}" cx="${gradient.cx * 100}%" cy="${gradient.cy * 100}%" r="${gradient.r * 100}%"${fxAttr}${fyAttr}>
-      ${stopsSVG}
+    }
+    case "radial": {
+      const fxAttr = gradient.fx !== void 0 ? ` fx="${gradient.fx * 100}%"` : "";
+      const fyAttr = gradient.fy !== void 0 ? ` fy="${gradient.fy * 100}%"` : "";
+      return `<radialGradient id="${gradient.id}" cx="${gradient.cx * 100}%" cy="${gradient.cy * 100}%" r="${gradient.r * 100}%"${fxAttr}${fyAttr}>
+      ${stopsSVG}
     </radialGradient>`;
-        }
-        case 'conic': {
-            // SVG doesn't support conic gradients natively, so we approximate with many linear stops
-            // This creates a radial gradient with the same appearance
-            return `<radialGradient id="${gradient.id}" cx="${gradient.cx * 100}%" cy="${gradient.cy * 100}%" r="50%">
-      ${stopsSVG}
+    }
+    case "conic": {
+      return `<radialGradient id="${gradient.id}" cx="${gradient.cx * 100}%" cy="${gradient.cy * 100}%" r="50%">
+      ${stopsSVG}
     </radialGradient>`;
-        }
     }
+  }
 }
-/* ────────────────────────────────────────────────────────────────
-   GRADIENT TO CSS
-──────────────────────────────────────────────────────────────── */
 function gradientToCSS(gradient) {
-    const stops = gradient.stops
-        .map((stop) => {
-        const opacity = stop.opacity !== undefined ? stop.opacity : 1;
-        const color = hexToRGBA(stop.color, opacity);
-        return `${color} ${stop.offset * 100}%`;
-    })
-        .join(', ');
-    switch (gradient.type) {
-        case 'linear':
-            return `linear-gradient(${gradient.angle}deg, ${stops})`;
-        case 'radial':
-            return `radial-gradient(ellipse ${gradient.r * 100}% ${gradient.r * 100}% at ${gradient.cx * 100}% ${gradient.cy * 100}%, ${stops})`;
-        case 'conic':
-            return `conic-gradient(from ${gradient.angle}deg at ${gradient.cx * 100}% ${gradient.cy * 100}%, ${stops})`;
-    }
+  const stops = gradient.stops.map((stop) => {
+    const opacity = stop.opacity !== void 0 ? stop.opacity : 1;
+    const color = hexToRGBA(stop.color, opacity);
+    return `${color} ${stop.offset * 100}%`;
+  }).join(", ");
+  switch (gradient.type) {
+    case "linear":
+      return `linear-gradient(${gradient.angle}deg, ${stops})`;
+    case "radial":
+      return `radial-gradient(ellipse ${gradient.r * 100}% ${gradient.r * 100}% at ${gradient.cx * 100}% ${gradient.cy * 100}%, ${stops})`;
+    case "conic":
+      return `conic-gradient(from ${gradient.angle}deg at ${gradient.cx * 100}% ${gradient.cy * 100}%, ${stops})`;
+  }
 }
 function hexToRGBA(hex, opacity) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    if (!result) {
-        return hex;
-    }
-    const r = parseInt(result[1], 16);
-    const g = parseInt(result[2], 16);
-    const b = parseInt(result[3], 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) {
+    return hex;
+  }
+  const r = parseInt(result[1], 16);
+  const g = parseInt(result[2], 16);
+  const b = parseInt(result[3], 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
 }
-/* ────────────────────────────────────────────────────────────────
-   GRADIENT MANIPULATION
-──────────────────────────────────────────────────────────────── */
 function cloneGradient(gradient) {
-    return JSON.parse(JSON.stringify(gradient));
+  return JSON.parse(JSON.stringify(gradient));
 }
 function createLinearGradient(colors, angle = 0) {
-    const stops = colors.map((color, i) => ({
-        offset: i / (colors.length - 1),
-        color,
-    }));
-    return {
-        type: 'linear',
-        id: gradientId(),
-        angle,
-        stops,
-    };
+  const stops = colors.map((color, i) => ({
+    offset: i / (colors.length - 1),
+    color
+  }));
+  return {
+    type: "linear",
+    id: gradientId(),
+    angle,
+    stops
+  };
 }
 function createRadialGradient(colors, cx = 0.5, cy = 0.5, r = 0.7) {
-    const stops = colors.map((color, i) => ({
-        offset: i / (colors.length - 1),
-        color,
-    }));
-    return {
-        type: 'radial',
-        id: gradientId(),
-        cx,
-        cy,
-        r,
-        stops,
-    };
+  const stops = colors.map((color, i) => ({
+    offset: i / (colors.length - 1),
+    color
+  }));
+  return {
+    type: "radial",
+    id: gradientId(),
+    cx,
+    cy,
+    r,
+    stops
+  };
 }
-
-export { PRESET_GRADIENTS, cloneGradient, createLinearGradient, createRadialGradient, gradientId, gradientToCSS, gradientToSVGDef };
+export {
+  PRESET_GRADIENTS,
+  cloneGradient,
+  createLinearGradient,
+  createRadialGradient,
+  gradientId,
+  gradientToCSS,
+  gradientToSVGDef
+};

package/dist/esm/vector/vectorIconExport.js

@@ -1,63 +1,58 @@
-import { starPoints, polygonPoints } from './vectorEditorTypes.js';
-
-/** Build a complete `export const NtdX = createIcon({...})` snippet string. */
+import { starPoints, polygonPoints } from "./vectorEditorTypes.js";
 function shapesToIconSnippet(shapes, opts) {
-    const { iconName, variant = 'solid', artW, artH } = opts;
-    const scale = 24 / Math.max(artW, artH);
-    const cleanName = iconName.replace(/^Ntd/, '').replace(/[^A-Za-z0-9]/g, '');
-    const display = `Ntd${cleanName}`;
-    const jsxLines = shapes
-        .filter((s) => !s.hidden)
-        .map((s) => shapeToJsx(s, scale))
-        .filter(Boolean);
-    return [
-        `export const ${display} = createIcon({`,
-        `  displayName: '${display}',`,
-        `  paths: {`,
-        `    ${variant}: ({ primaryColor, strokeWidth }) => (`,
-        `      <>`,
-        ...jsxLines.map((l) => `        ${l}`),
-        `      </>`,
-        `    ),`,
-        `  },`,
-        `});`,
-    ].join('\n');
+  const { iconName, variant = "solid", artW, artH } = opts;
+  const scale = 24 / Math.max(artW, artH);
+  const cleanName = iconName.replace(/^Ntd/, "").replace(/[^A-Za-z0-9]/g, "");
+  const display = `Ntd${cleanName}`;
+  const jsxLines = shapes.filter((s) => !s.hidden).map((s) => shapeToJsx(s, scale)).filter(Boolean);
+  return [
+    `export const ${display} = createIcon({`,
+    `  displayName: '${display}',`,
+    `  paths: {`,
+    `    ${variant}: ({ primaryColor, strokeWidth }) => (`,
+    `      <>`,
+    ...jsxLines.map((l) => `        ${l}`),
+    `      </>`,
+    `    ),`,
+    `  },`,
+    `});`
+  ].join("\n");
 }
 function shapeToJsx(s, scale) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const n = (v) => +(v * scale).toFixed(3);
-    const fill = s.fill && s.fill !== 'none' ? '{primaryColor}' : '"none"';
-    const stroke = s.stroke && s.stroke !== 'none' ? '{primaryColor}' : '"none"';
-    const sw = s.strokeWidth ? `{strokeWidth}` : '"0"';
-    switch (s.type) {
-        case 'rect':
-            return `<rect x={${n(s.x)}} y={${n(s.y)}} width={${n(s.w)}} height={${n(s.h)}} fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
-        case 'roundrect':
-            return `<rect x={${n(s.x)}} y={${n(s.y)}} width={${n(s.w)}} height={${n(s.h)}} rx={${n(s.rx || 12)}} fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
-        case 'ellipse':
-            return `<ellipse cx={${n(s.x + s.w / 2)}} cy={${n(s.y + s.h / 2)}} rx={${n(s.w / 2)}} ry={${n(s.h / 2)}} fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
-        case 'line':
-            return `<line x1={${n(s.x)}} y1={${n(s.y)}} x2={${n((_a = s.x2) !== null && _a !== void 0 ? _a : s.x)}} y2={${n((_b = s.y2) !== null && _b !== void 0 ? _b : s.y)}} stroke=${stroke} strokeWidth=${sw} />`;
-        case 'arrow':
-            return `<line x1={${n(s.x)}} y1={${n(s.y)}} x2={${n((_c = s.x2) !== null && _c !== void 0 ? _c : s.x)}} y2={${n((_d = s.y2) !== null && _d !== void 0 ? _d : s.y)}} stroke=${stroke} strokeWidth=${sw} />`;
-        case 'polyline':
-            return `<polyline points="${((_e = s.points) !== null && _e !== void 0 ? _e : []).map((p) => `${n(p.x)},${n(p.y)}`).join(' ')}" fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
-        case 'polygon': {
-            const cx = s.x + s.w / 2, cy = s.y + s.h / 2, r = Math.min(s.w, s.h) / 2;
-            return `<polygon points="${polygonPoints(n(cx), n(cy), n(r), s.sides || 6, s.rotation)}" fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
-        }
-        case 'star': {
-            const cx = s.x + s.w / 2, cy = s.y + s.h / 2, r = Math.min(s.w, s.h) / 2;
-            const ir = r * (s.innerRadius || 0.4);
-            return `<polygon points="${starPoints(n(cx), n(cy), n(r), n(ir), s.sides || 5, s.rotation)}" fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
-        }
-        case 'text':
-            return `<text x={${n(s.x)}} y={${n(s.y + (s.fontSize || 24))}} fontSize={${n(s.fontSize || 24)}} fill=${fill}>${(_f = s.text) !== null && _f !== void 0 ? _f : ''}</text>`;
-        case 'path':
-            return `<path d="${(_g = s.d) !== null && _g !== void 0 ? _g : ''}" fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
-        default:
-            return '';
+  const n = (v) => +(v * scale).toFixed(3);
+  const fill = s.fill && s.fill !== "none" ? "{primaryColor}" : '"none"';
+  const stroke = s.stroke && s.stroke !== "none" ? "{primaryColor}" : '"none"';
+  const sw = s.strokeWidth ? `{strokeWidth}` : '"0"';
+  switch (s.type) {
+    case "rect":
+      return `<rect x={${n(s.x)}} y={${n(s.y)}} width={${n(s.w)}} height={${n(s.h)}} fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
+    case "roundrect":
+      return `<rect x={${n(s.x)}} y={${n(s.y)}} width={${n(s.w)}} height={${n(s.h)}} rx={${n(s.rx || 12)}} fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
+    case "ellipse":
+      return `<ellipse cx={${n(s.x + s.w / 2)}} cy={${n(s.y + s.h / 2)}} rx={${n(s.w / 2)}} ry={${n(s.h / 2)}} fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
+    case "line":
+      return `<line x1={${n(s.x)}} y1={${n(s.y)}} x2={${n(s.x2 ?? s.x)}} y2={${n(s.y2 ?? s.y)}} stroke=${stroke} strokeWidth=${sw} />`;
+    case "arrow":
+      return `<line x1={${n(s.x)}} y1={${n(s.y)}} x2={${n(s.x2 ?? s.x)}} y2={${n(s.y2 ?? s.y)}} stroke=${stroke} strokeWidth=${sw} />`;
+    case "polyline":
+      return `<polyline points="${(s.points ?? []).map((p) => `${n(p.x)},${n(p.y)}`).join(" ")}" fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
+    case "polygon": {
+      const cx = s.x + s.w / 2, cy = s.y + s.h / 2, r = Math.min(s.w, s.h) / 2;
+      return `<polygon points="${polygonPoints(n(cx), n(cy), n(r), s.sides || 6, s.rotation)}" fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
     }
+    case "star": {
+      const cx = s.x + s.w / 2, cy = s.y + s.h / 2, r = Math.min(s.w, s.h) / 2;
+      const ir = r * (s.innerRadius || 0.4);
+      return `<polygon points="${starPoints(n(cx), n(cy), n(r), n(ir), s.sides || 5, s.rotation)}" fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
+    }
+    case "text":
+      return `<text x={${n(s.x)}} y={${n(s.y + (s.fontSize || 24))}} fontSize={${n(s.fontSize || 24)}} fill=${fill}>${s.text ?? ""}</text>`;
+    case "path":
+      return `<path d="${s.d ?? ""}" fill=${fill} stroke=${stroke} strokeWidth=${sw} />`;
+    default:
+      return "";
+  }
 }
-
-export { shapesToIconSnippet };
+export {
+  shapesToIconSnippet
+};