@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/vector/vectorEditorImport.js

@@ -1,191 +1,177 @@
-import { sid } from './vectorEditorTypes.js';
-
-/**
- * Parse an SVG string and return an array of VShape objects.
- * Throws an Error if the SVG is malformed.
- * Returns an empty array if no supported shapes are found.
- */
+import { sid } from "./vectorEditorTypes.js";
 function parseSVGToShapes(raw) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(raw, 'image/svg+xml');
-    const errs = doc.querySelector('parsererror');
-    if (errs) {
-        throw new Error('Invalid SVG');
-    }
-    const imported = [];
-    const elems = doc.querySelectorAll('rect, ellipse, circle, line, polyline, polygon, text, path');
-    elems.forEach((el) => {
-        const tag = el.tagName.toLowerCase();
-        // audit-allow: literal-color — an imported shape without a fill gets a visible default - document data
-        const fill = el.getAttribute('fill') || (tag === 'line' ? 'none' : '#cccccc');
-        const stroke = el.getAttribute('stroke') || 'none';
-        const sw = parseFloat(el.getAttribute('stroke-width') || '1');
-        const base = {
-            id: sid(),
-            fill,
-            stroke,
-            strokeWidth: sw,
-            opacity: 1,
-            rotation: 0,
-        };
-        switch (tag) {
-            case 'rect': {
-                const x = parseFloat(el.getAttribute('x') || '0');
-                const y = parseFloat(el.getAttribute('y') || '0');
-                const w = parseFloat(el.getAttribute('width') || '0');
-                const h = parseFloat(el.getAttribute('height') || '0');
-                const rxVal = parseFloat(el.getAttribute('rx') || '0');
-                if (rxVal > 0) {
-                    imported.push({
-                        ...base,
-                        type: 'roundrect',
-                        x,
-                        y,
-                        w,
-                        h,
-                        rx: rxVal,
-                    });
-                }
-                else {
-                    imported.push({
-                        ...base,
-                        type: 'rect',
-                        x,
-                        y,
-                        w,
-                        h,
-                    });
-                }
-                break;
-            }
-            case 'ellipse': {
-                const cx2 = parseFloat(el.getAttribute('cx') || '0');
-                const cy2 = parseFloat(el.getAttribute('cy') || '0');
-                const rx = parseFloat(el.getAttribute('rx') || '0');
-                const ry = parseFloat(el.getAttribute('ry') || '0');
-                imported.push({
-                    ...base,
-                    type: 'ellipse',
-                    x: cx2 - rx,
-                    y: cy2 - ry,
-                    w: rx * 2,
-                    h: ry * 2,
-                });
-                break;
-            }
-            case 'circle': {
-                const cx2 = parseFloat(el.getAttribute('cx') || '0');
-                const cy2 = parseFloat(el.getAttribute('cy') || '0');
-                const r = parseFloat(el.getAttribute('r') || '0');
-                imported.push({
-                    ...base,
-                    type: 'ellipse',
-                    x: cx2 - r,
-                    y: cy2 - r,
-                    w: r * 2,
-                    h: r * 2,
-                });
-                break;
-            }
-            case 'line': {
-                const x1 = parseFloat(el.getAttribute('x1') || '0');
-                const y1 = parseFloat(el.getAttribute('y1') || '0');
-                const x2 = parseFloat(el.getAttribute('x2') || '0');
-                const y2 = parseFloat(el.getAttribute('y2') || '0');
-                imported.push({
-                    ...base,
-                    type: 'line',
-                    x: x1,
-                    y: y1,
-                    x2: x2,
-                    y2: y2,
-                    w: Math.abs(x2 - x1),
-                    h: Math.abs(y2 - y1),
-                });
-                break;
-            }
-            case 'polyline':
-            case 'polygon': {
-                const raw2 = el.getAttribute('points') || '';
-                const pts = raw2
-                    .trim()
-                    .split(/\s+/)
-                    .map((p) => {
-                    const [x, y] = p.split(',').map(Number);
-                    return { x: x || 0, y: y || 0 };
-                });
-                if (pts.length > 0) {
-                    const xs = pts.map((p) => p.x);
-                    const ys = pts.map((p) => p.y);
-                    imported.push({
-                        ...base,
-                        type: 'polyline',
-                        x: Math.min(...xs),
-                        y: Math.min(...ys),
-                        w: Math.max(...xs) - Math.min(...xs),
-                        h: Math.max(...ys) - Math.min(...ys),
-                        points: pts,
-                    });
-                }
-                break;
-            }
-            case 'text': {
-                const x = parseFloat(el.getAttribute('x') || '0');
-                const y = parseFloat(el.getAttribute('y') || '0');
-                const fs = parseFloat(el.getAttribute('font-size') || '24');
-                const txt = el.textContent || '';
-                imported.push({
-                    ...base,
-                    type: 'text',
-                    x,
-                    y: y - fs,
-                    w: txt.length * fs * 0.6,
-                    h: fs,
-                    text: txt,
-                    fontSize: fs,
-                });
-                break;
-            }
-            case 'path': {
-                const d = el.getAttribute('d') || '';
-                if (!d) {
-                    break;
-                }
-                // Compute bounding box by mounting briefly in a detached SVG, so the
-                // shape has meaningful x/y/w/h for selection/transform handles.
-                let bx = 0, by = 0, bw = 24, bh = 24;
-                try {
-                    const ns = 'http://www.w3.org/2000/svg';
-                    const tmp = document.createElementNS(ns, 'svg');
-                    tmp.setAttribute('style', 'position:absolute;left:-9999px;width:1px;height:1px;');
-                    const p = document.createElementNS(ns, 'path');
-                    p.setAttribute('d', d);
-                    tmp.appendChild(p);
-                    document.body.appendChild(tmp);
-                    const bb = p.getBBox();
-                    bx = bb.x;
-                    by = bb.y;
-                    bw = bb.width || 1;
-                    bh = bb.height || 1;
-                    document.body.removeChild(tmp);
-                }
-                catch (_a) {
-                    // jsdom / no DOM — fall back to defaults
-                }
-                imported.push({
-                    ...base,
-                    type: 'path',
-                    x: bx,
-                    y: by,
-                    w: bw,
-                    h: bh,
-                    d,
-                });
-                break;
-            }
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(raw, "image/svg+xml");
+  const errs = doc.querySelector("parsererror");
+  if (errs) {
+    throw new Error("Invalid SVG");
+  }
+  const imported = [];
+  const elems = doc.querySelectorAll("rect, ellipse, circle, line, polyline, polygon, text, path");
+  elems.forEach((el) => {
+    const tag = el.tagName.toLowerCase();
+    const fill = el.getAttribute("fill") || (tag === "line" ? "none" : "#cccccc");
+    const stroke = el.getAttribute("stroke") || "none";
+    const sw = parseFloat(el.getAttribute("stroke-width") || "1");
+    const base = {
+      id: sid(),
+      fill,
+      stroke,
+      strokeWidth: sw,
+      opacity: 1,
+      rotation: 0
+    };
+    switch (tag) {
+      case "rect": {
+        const x = parseFloat(el.getAttribute("x") || "0");
+        const y = parseFloat(el.getAttribute("y") || "0");
+        const w = parseFloat(el.getAttribute("width") || "0");
+        const h = parseFloat(el.getAttribute("height") || "0");
+        const rxVal = parseFloat(el.getAttribute("rx") || "0");
+        if (rxVal > 0) {
+          imported.push({
+            ...base,
+            type: "roundrect",
+            x,
+            y,
+            w,
+            h,
+            rx: rxVal
+          });
+        } else {
+          imported.push({
+            ...base,
+            type: "rect",
+            x,
+            y,
+            w,
+            h
+          });
+        }
+        break;
+      }
+      case "ellipse": {
+        const cx2 = parseFloat(el.getAttribute("cx") || "0");
+        const cy2 = parseFloat(el.getAttribute("cy") || "0");
+        const rx = parseFloat(el.getAttribute("rx") || "0");
+        const ry = parseFloat(el.getAttribute("ry") || "0");
+        imported.push({
+          ...base,
+          type: "ellipse",
+          x: cx2 - rx,
+          y: cy2 - ry,
+          w: rx * 2,
+          h: ry * 2
+        });
+        break;
+      }
+      case "circle": {
+        const cx2 = parseFloat(el.getAttribute("cx") || "0");
+        const cy2 = parseFloat(el.getAttribute("cy") || "0");
+        const r = parseFloat(el.getAttribute("r") || "0");
+        imported.push({
+          ...base,
+          type: "ellipse",
+          x: cx2 - r,
+          y: cy2 - r,
+          w: r * 2,
+          h: r * 2
+        });
+        break;
+      }
+      case "line": {
+        const x1 = parseFloat(el.getAttribute("x1") || "0");
+        const y1 = parseFloat(el.getAttribute("y1") || "0");
+        const x2 = parseFloat(el.getAttribute("x2") || "0");
+        const y2 = parseFloat(el.getAttribute("y2") || "0");
+        imported.push({
+          ...base,
+          type: "line",
+          x: x1,
+          y: y1,
+          x2,
+          y2,
+          w: Math.abs(x2 - x1),
+          h: Math.abs(y2 - y1)
+        });
+        break;
+      }
+      case "polyline":
+      case "polygon": {
+        const raw2 = el.getAttribute("points") || "";
+        const pts = raw2.trim().split(/\s+/).map((p) => {
+          const [x, y] = p.split(",").map(Number);
+          return { x: x || 0, y: y || 0 };
+        });
+        if (pts.length > 0) {
+          const xs = pts.map((p) => p.x);
+          const ys = pts.map((p) => p.y);
+          imported.push({
+            ...base,
+            type: "polyline",
+            x: Math.min(...xs),
+            y: Math.min(...ys),
+            w: Math.max(...xs) - Math.min(...xs),
+            h: Math.max(...ys) - Math.min(...ys),
+            points: pts
+          });
+        }
+        break;
+      }
+      case "text": {
+        const x = parseFloat(el.getAttribute("x") || "0");
+        const y = parseFloat(el.getAttribute("y") || "0");
+        const fs = parseFloat(el.getAttribute("font-size") || "24");
+        const txt = el.textContent || "";
+        imported.push({
+          ...base,
+          type: "text",
+          x,
+          y: y - fs,
+          w: txt.length * fs * 0.6,
+          h: fs,
+          text: txt,
+          fontSize: fs
+        });
+        break;
+      }
+      case "path": {
+        const d = el.getAttribute("d") || "";
+        if (!d) {
+          break;
         }
-    });
-    return imported;
+        let bx = 0, by = 0, bw = 24, bh = 24;
+        try {
+          const ns = "http://www.w3.org/2000/svg";
+          const tmp = document.createElementNS(ns, "svg");
+          tmp.setAttribute("style", "position:absolute;left:-9999px;width:1px;height:1px;");
+          const p = document.createElementNS(ns, "path");
+          p.setAttribute("d", d);
+          tmp.appendChild(p);
+          document.body.appendChild(tmp);
+          const bb = p.getBBox();
+          bx = bb.x;
+          by = bb.y;
+          bw = bb.width || 1;
+          bh = bb.height || 1;
+          document.body.removeChild(tmp);
+        } catch {
+        }
+        imported.push({
+          ...base,
+          type: "path",
+          x: bx,
+          y: by,
+          w: bw,
+          h: bh,
+          d
+        });
+        break;
+      }
+    }
+  });
+  return imported;
 }
-
-export { parseSVGToShapes };
+export {
+  parseSVGToShapes
+};

package/dist/esm/vector/vectorEditorTypes.js

@@ -1,63 +1,65 @@
-/* ─── types ─── */
-/* ─── helpers ─── */
 let _sid = 0;
 const sid = () => `s${++_sid}`;
 const cloneShapes = (s) => JSON.parse(JSON.stringify(s));
 const downloadBlob = (blob, name) => {
-    const a = document.createElement('a');
-    const url = URL.createObjectURL(blob);
-    a.href = url;
-    a.download = name;
-    a.click();
-    setTimeout(() => URL.revokeObjectURL(url), 3000);
+  const a = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+  a.href = url;
+  a.download = name;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 3e3);
 };
-// `icon` holds a NiceIcon builtin name (rendered via <NiceIcon name={tool.icon} />).
 const TOOLS = [
-    { id: 'pointer', icon: 'cursor', label: 'Select', key: 'V' },
-    { id: 'rect', icon: 'square', label: 'Rectangle', key: 'R' },
-    { id: 'roundrect', icon: 'square', label: 'Rounded Rect', key: 'U' },
-    { id: 'ellipse', icon: 'circle', label: 'Ellipse', key: 'C' },
-    { id: 'line', icon: 'line', label: 'Line', key: 'L' },
-    { id: 'arrow', icon: 'arrow-right', label: 'Arrow', key: 'A' },
-    { id: 'polygon', icon: 'hexagon', label: 'Polygon', key: 'G' },
-    { id: 'star', icon: 'star', label: 'Star', key: 'S' },
-    { id: 'pen', icon: 'pen', label: 'Pen (polyline)', key: 'P' },
-    { id: 'text', icon: 'type', label: 'Text', key: 'T' },
+  { id: "pointer", icon: "cursor", label: "Select", key: "V" },
+  { id: "rect", icon: "square", label: "Rectangle", key: "R" },
+  { id: "roundrect", icon: "square", label: "Rounded Rect", key: "U" },
+  { id: "ellipse", icon: "circle", label: "Ellipse", key: "C" },
+  { id: "line", icon: "line", label: "Line", key: "L" },
+  { id: "arrow", icon: "arrow-right", label: "Arrow", key: "A" },
+  { id: "polygon", icon: "hexagon", label: "Polygon", key: "G" },
+  { id: "star", icon: "star", label: "Star", key: "S" },
+  { id: "pen", icon: "pen", label: "Pen (polyline)", key: "P" },
+  { id: "text", icon: "type", label: "Text", key: "T" }
 ];
 const FONTS = [
-    'sans-serif',
-    'serif',
-    'monospace',
-    'cursive',
-    'fantasy',
-    'Arial',
-    'Georgia',
-    'Courier New',
-    'Times New Roman',
-    'Verdana',
+  "sans-serif",
+  "serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "Arial",
+  "Georgia",
+  "Courier New",
+  "Times New Roman",
+  "Verdana"
 ];
-/** Generate polygon points string for n-sided regular polygon */
 function polygonPoints(cx, cy, r, sides, rotation) {
-    const pts = [];
-    for (let i = 0; i < sides; i++) {
-        const angle = (Math.PI * 2 * i) / sides - Math.PI / 2 + (rotation * Math.PI) / 180;
-        pts.push(`${cx + r * Math.cos(angle)},${cy + r * Math.sin(angle)}`);
-    }
-    return pts.join(' ');
+  const pts = [];
+  for (let i = 0; i < sides; i++) {
+    const angle = Math.PI * 2 * i / sides - Math.PI / 2 + rotation * Math.PI / 180;
+    pts.push(`${cx + r * Math.cos(angle)},${cy + r * Math.sin(angle)}`);
+  }
+  return pts.join(" ");
 }
-/** Generate star points string */
 function starPoints(cx, cy, outerR, innerR, points, rotation) {
-    const pts = [];
-    for (let i = 0; i < points * 2; i++) {
-        const angle = (Math.PI * i) / points - Math.PI / 2 + (rotation * Math.PI) / 180;
-        const r = i % 2 === 0 ? outerR : innerR;
-        pts.push(`${cx + r * Math.cos(angle)},${cy + r * Math.sin(angle)}`);
-    }
-    return pts.join(' ');
+  const pts = [];
+  for (let i = 0; i < points * 2; i++) {
+    const angle = Math.PI * i / points - Math.PI / 2 + rotation * Math.PI / 180;
+    const r = i % 2 === 0 ? outerR : innerR;
+    pts.push(`${cx + r * Math.cos(angle)},${cy + r * Math.sin(angle)}`);
+  }
+  return pts.join(" ");
 }
-/** Snap a value to grid */
 function snapToGrid(val, gridSize) {
-    return Math.round(val / gridSize) * gridSize;
+  return Math.round(val / gridSize) * gridSize;
 }
-
-export { FONTS, TOOLS, cloneShapes, downloadBlob, polygonPoints, sid, snapToGrid, starPoints };
+export {
+  FONTS,
+  TOOLS,
+  cloneShapes,
+  downloadBlob,
+  polygonPoints,
+  sid,
+  snapToGrid,
+  starPoints
+};