@nice2dev/ui-graphics 1.3.15 → 1.3.17

package/dist/esm/vector/vectorEditorExport.js

@@ -1,223 +1,228 @@
-import { starPoints, polygonPoints, downloadBlob } from './vectorEditorTypes.js';
-
-/** Convert a ShapeAnimation to SMIL child element strings. Returns indented
- *  multiline string ready to be embedded inside a shape element. */
+import { starPoints, polygonPoints, downloadBlob } from "./vectorEditorTypes.js";
 function animationToSMIL(a, cx, cy) {
-    const repeatCount = a.repeat === 'infinite' ? 'indefinite' : String(a.repeat);
-    const dur = `${a.duration}ms`;
-    const kfs = [...a.keyframes].sort((p, q) => p.t - q.t);
-    const alternate = a.direction === 'alternate';
-    const expand = (arr) => (alternate ? [...arr, ...arr.slice(0, -1).reverse()] : arr);
-    const keyTimes = (() => {
-        if (!alternate) {
-            return kfs.map((k) => k.t.toFixed(3)).join(';');
-        }
-        const half = kfs.map((k) => k.t / 2);
-        const second = kfs
-            .slice(0, -1)
-            .reverse()
-            .map((k) => 1 - k.t / 2);
-        return [...half, ...second].map((x) => x.toFixed(3)).join(';');
-    })();
-    const parts = [];
-    const has = (field) => kfs.some((k) => k[field] != null);
-    if (has('rotate')) {
-        const vals = expand(kfs.map((k) => { var _a; return `${(_a = k.rotate) !== null && _a !== void 0 ? _a : 0} ${cx} ${cy}`; })).join(';');
-        parts.push(`    <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="${vals}" keyTimes="${keyTimes}" dur="${dur}" repeatCount="${repeatCount}" additive="sum" />`);
-    }
-    if (has('scale')) {
-        const vals = expand(kfs.map((k) => { var _a; return `${(_a = k.scale) !== null && _a !== void 0 ? _a : 1}`; })).join(';');
-        parts.push(`    <animateTransform attributeName="transform" attributeType="XML" type="scale" values="${vals}" keyTimes="${keyTimes}" dur="${dur}" repeatCount="${repeatCount}" additive="sum" />`);
-    }
-    if (has('translateX') || has('translateY')) {
-        const vals = expand(kfs.map((k) => { var _a, _b; return `${(_a = k.translateX) !== null && _a !== void 0 ? _a : 0} ${(_b = k.translateY) !== null && _b !== void 0 ? _b : 0}`; })).join(';');
-        parts.push(`    <animateTransform attributeName="transform" attributeType="XML" type="translate" values="${vals}" keyTimes="${keyTimes}" dur="${dur}" repeatCount="${repeatCount}" additive="sum" />`);
-    }
-    if (has('opacity')) {
-        const vals = expand(kfs.map((k) => { var _a; return `${(_a = k.opacity) !== null && _a !== void 0 ? _a : 1}`; })).join(';');
-        parts.push(`    <animate attributeName="opacity" values="${vals}" keyTimes="${keyTimes}" dur="${dur}" repeatCount="${repeatCount}" />`);
+  const repeatCount = a.repeat === "infinite" ? "indefinite" : String(a.repeat);
+  const dur = `${a.duration}ms`;
+  const kfs = [...a.keyframes].sort((p, q) => p.t - q.t);
+  const alternate = a.direction === "alternate";
+  const expand = (arr) => alternate ? [...arr, ...arr.slice(0, -1).reverse()] : arr;
+  const keyTimes = (() => {
+    if (!alternate) {
+      return kfs.map((k) => k.t.toFixed(3)).join(";");
     }
-    return parts.join('\n');
+    const half = kfs.map((k) => k.t / 2);
+    const second = kfs.slice(0, -1).reverse().map((k) => 1 - k.t / 2);
+    return [...half, ...second].map((x) => x.toFixed(3)).join(";");
+  })();
+  const parts = [];
+  const has = (field) => kfs.some((k) => k[field] != null);
+  if (has("rotate")) {
+    const vals = expand(kfs.map((k) => `${k.rotate ?? 0} ${cx} ${cy}`)).join(";");
+    parts.push(
+      `    <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="${vals}" keyTimes="${keyTimes}" dur="${dur}" repeatCount="${repeatCount}" additive="sum" />`
+    );
+  }
+  if (has("scale")) {
+    const vals = expand(kfs.map((k) => `${k.scale ?? 1}`)).join(";");
+    parts.push(
+      `    <animateTransform attributeName="transform" attributeType="XML" type="scale" values="${vals}" keyTimes="${keyTimes}" dur="${dur}" repeatCount="${repeatCount}" additive="sum" />`
+    );
+  }
+  if (has("translateX") || has("translateY")) {
+    const vals = expand(kfs.map((k) => `${k.translateX ?? 0} ${k.translateY ?? 0}`)).join(";");
+    parts.push(
+      `    <animateTransform attributeName="transform" attributeType="XML" type="translate" values="${vals}" keyTimes="${keyTimes}" dur="${dur}" repeatCount="${repeatCount}" additive="sum" />`
+    );
+  }
+  if (has("opacity")) {
+    const vals = expand(kfs.map((k) => `${k.opacity ?? 1}`)).join(";");
+    parts.push(
+      `    <animate attributeName="opacity" values="${vals}" keyTimes="${keyTimes}" dur="${dur}" repeatCount="${repeatCount}" />`
+    );
+  }
+  return parts.join("\n");
 }
-/** Wrap a self-closing element string with SMIL child animations. */
 function wrapWithAnim(elementStr, smil) {
-    if (!smil) {
-        return elementStr;
-    }
-    // strip trailing " />" or "/>" then append children + closing tag.
-    const openMatch = elementStr.match(/^(\s*)<(\w+)\s+([\s\S]*?)\s*\/>$/);
-    if (!openMatch) {
-        return elementStr;
-    }
-    const [, indent, tag, attrs] = openMatch;
-    return `${indent}<${tag} ${attrs}>\n${smil}\n${indent}</${tag}>`;
+  if (!smil) {
+    return elementStr;
+  }
+  const openMatch = elementStr.match(/^(\s*)<(\w+)\s+([\s\S]*?)\s*\/>$/);
+  if (!openMatch) {
+    return elementStr;
+  }
+  const [, indent, tag, attrs] = openMatch;
+  return `${indent}<${tag} ${attrs}>
+${smil}
+${indent}</${tag}>`;
 }
-/** Build SVG markup string from shapes */
 function buildSVGString(shapes, artW, artH, animations) {
-    const parts = [
-        `<svg xmlns="http://www.w3.org/2000/svg" width="${artW}" height="${artH}" viewBox="0 0 ${artW} ${artH}">`,
-    ];
-    // Arrow marker definition
-    parts.push(`  <defs><marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="context-stroke"/></marker></defs>`);
-    for (const s of shapes) {
-        const opacityAttr = s.opacity < 1 ? ` opacity="${s.opacity.toFixed(2)}"` : '';
-        const rotAttr = s.rotation
-            ? ` transform="rotate(${s.rotation} ${s.x + s.w / 2} ${s.y + s.h / 2})"`
-            : '';
-        let element = null;
-        switch (s.type) {
-            case 'rect':
-                element = `  <rect x="${s.x}" y="${s.y}" width="${s.w}" height="${s.h}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr}${rotAttr} />`;
-                break;
-            case 'roundrect':
-                element = `  <rect x="${s.x}" y="${s.y}" width="${s.w}" height="${s.h}" rx="${s.rx || 12}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr}${rotAttr} />`;
-                break;
-            case 'ellipse':
-                element = `  <ellipse cx="${s.x + s.w / 2}" cy="${s.y + s.h / 2}" rx="${s.w / 2}" ry="${s.h / 2}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr}${rotAttr} />`;
-                break;
-            case 'line':
-                element = `  <line x1="${s.x}" y1="${s.y}" x2="${s.x2}" y2="${s.y2}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr} />`;
-                break;
-            case 'arrow':
-                element = `  <line x1="${s.x}" y1="${s.y}" x2="${s.x2}" y2="${s.y2}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}" marker-end="url(#arrowhead)"${opacityAttr} />`;
-                break;
-            case 'polyline':
-                if (s.points) {
-                    const pts = s.points.map((p) => `${p.x},${p.y}`).join(' ');
-                    element = `  <polyline points="${pts}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr} />`;
-                }
-                break;
-            case 'polygon': {
-                const cx2 = s.x + s.w / 2;
-                const cy2 = s.y + s.h / 2;
-                const r2 = Math.min(s.w, s.h) / 2;
-                const pts = polygonPoints(cx2, cy2, r2, s.sides || 6, s.rotation);
-                element = `  <polygon points="${pts}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr} />`;
-                break;
-            }
-            case 'star': {
-                const cx2 = s.x + s.w / 2;
-                const cy2 = s.y + s.h / 2;
-                const r2 = Math.min(s.w, s.h) / 2;
-                const ir = r2 * (s.innerRadius || 0.4);
-                const pts = starPoints(cx2, cy2, r2, ir, s.sides || 5, s.rotation);
-                element = `  <polygon points="${pts}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr} />`;
-                break;
-            }
-            case 'text': {
-                const esc = (s.text || '')
-                    .replace(/&/g, '&amp;')
-                    .replace(/</g, '&lt;')
-                    .replace(/>/g, '&gt;');
-                const ff = (s.fontFamily || 'sans-serif').replace(/"/g, '&quot;');
-                element = `  <text x="${s.x}" y="${s.y + (s.fontSize || 24)}" font-size="${s.fontSize || 24}" font-family="${ff}" fill="${s.fill}"${opacityAttr}>${esc}</text>`;
-                break;
-            }
-        }
-        if (!element) {
-            continue;
-        }
-        const anim = animations === null || animations === void 0 ? void 0 : animations[s.id];
-        if (anim) {
-            const cx = s.x + s.w / 2;
-            const cy = s.y + s.h / 2;
-            const smil = animationToSMIL(anim, cx, cy);
-            parts.push(wrapWithAnim(element, smil));
-        }
-        else {
-            parts.push(element);
+  const parts = [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${artW}" height="${artH}" viewBox="0 0 ${artW} ${artH}">`
+  ];
+  parts.push(
+    `  <defs><marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="context-stroke"/></marker></defs>`
+  );
+  for (const s of shapes) {
+    const opacityAttr = s.opacity < 1 ? ` opacity="${s.opacity.toFixed(2)}"` : "";
+    const rotAttr = s.rotation ? ` transform="rotate(${s.rotation} ${s.x + s.w / 2} ${s.y + s.h / 2})"` : "";
+    let element = null;
+    switch (s.type) {
+      case "rect":
+        element = `  <rect x="${s.x}" y="${s.y}" width="${s.w}" height="${s.h}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr}${rotAttr} />`;
+        break;
+      case "roundrect":
+        element = `  <rect x="${s.x}" y="${s.y}" width="${s.w}" height="${s.h}" rx="${s.rx || 12}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr}${rotAttr} />`;
+        break;
+      case "ellipse":
+        element = `  <ellipse cx="${s.x + s.w / 2}" cy="${s.y + s.h / 2}" rx="${s.w / 2}" ry="${s.h / 2}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr}${rotAttr} />`;
+        break;
+      case "line":
+        element = `  <line x1="${s.x}" y1="${s.y}" x2="${s.x2}" y2="${s.y2}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr} />`;
+        break;
+      case "arrow":
+        element = `  <line x1="${s.x}" y1="${s.y}" x2="${s.x2}" y2="${s.y2}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}" marker-end="url(#arrowhead)"${opacityAttr} />`;
+        break;
+      case "polyline":
+        if (s.points) {
+          const pts = s.points.map((p) => `${p.x},${p.y}`).join(" ");
+          element = `  <polyline points="${pts}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr} />`;
         }
+        break;
+      case "polygon": {
+        const cx2 = s.x + s.w / 2;
+        const cy2 = s.y + s.h / 2;
+        const r2 = Math.min(s.w, s.h) / 2;
+        const pts = polygonPoints(cx2, cy2, r2, s.sides || 6, s.rotation);
+        element = `  <polygon points="${pts}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr} />`;
+        break;
+      }
+      case "star": {
+        const cx2 = s.x + s.w / 2;
+        const cy2 = s.y + s.h / 2;
+        const r2 = Math.min(s.w, s.h) / 2;
+        const ir = r2 * (s.innerRadius || 0.4);
+        const pts = starPoints(cx2, cy2, r2, ir, s.sides || 5, s.rotation);
+        element = `  <polygon points="${pts}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${s.strokeWidth}"${opacityAttr} />`;
+        break;
+      }
+      case "text": {
+        const esc = (s.text || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        const ff = (s.fontFamily || "sans-serif").replace(/"/g, "&quot;");
+        element = `  <text x="${s.x}" y="${s.y + (s.fontSize || 24)}" font-size="${s.fontSize || 24}" font-family="${ff}" fill="${s.fill}"${opacityAttr}>${esc}</text>`;
+        break;
+      }
+    }
+    if (!element) {
+      continue;
+    }
+    const anim = animations?.[s.id];
+    if (anim) {
+      const cx = s.x + s.w / 2;
+      const cy = s.y + s.h / 2;
+      const smil = animationToSMIL(anim, cx, cy);
+      parts.push(wrapWithAnim(element, smil));
+    } else {
+      parts.push(element);
     }
-    parts.push('</svg>');
-    return parts.join('\n');
+  }
+  parts.push("</svg>");
+  return parts.join("\n");
 }
-/** Helper to render SVG to an Image, then invoke a callback with the loaded image */
 function svgToImage(svg, onLoad, onError) {
-    const img = new Image();
-    if (onError) {
-        img.onerror = onError;
-    }
-    img.onload = () => onLoad(img);
-    img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+  const img = new Image();
+  if (onError) {
+    img.onerror = onError;
+  }
+  img.onload = () => onLoad(img);
+  img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
 }
 function exportSVGFile(shapes, artW, artH, animations) {
-    const svg = buildSVGString(shapes, artW, artH, animations);
-    downloadBlob(new Blob([svg], { type: 'image/svg+xml' }), 'drawing.svg');
+  const svg = buildSVGString(shapes, artW, artH, animations);
+  downloadBlob(new Blob([svg], { type: "image/svg+xml" }), "drawing.svg");
 }
 function exportPNGFile(shapes, artW, artH) {
-    const svg = buildSVGString(shapes, artW, artH);
-    svgToImage(svg, (img) => {
-        const cv = document.createElement('canvas');
-        cv.width = artW;
-        cv.height = artH;
-        cv.getContext('2d').drawImage(img, 0, 0);
-        cv.toBlob((b) => b && downloadBlob(b, 'drawing.png'));
-    }, () => console.warn('[VectorEditor] Failed to export PNG.'));
+  const svg = buildSVGString(shapes, artW, artH);
+  svgToImage(
+    svg,
+    (img) => {
+      const cv = document.createElement("canvas");
+      cv.width = artW;
+      cv.height = artH;
+      cv.getContext("2d").drawImage(img, 0, 0);
+      cv.toBlob((b) => b && downloadBlob(b, "drawing.png"));
+    },
+    () => console.warn("[VectorEditor] Failed to export PNG.")
+  );
 }
 function exportJPGFile(shapes, artW, artH) {
-    const svg = buildSVGString(shapes, artW, artH);
-    svgToImage(svg, (img) => {
-        const cv = document.createElement('canvas');
-        cv.width = artW;
-        cv.height = artH;
-        const ctx = cv.getContext('2d');
-        ctx.fillStyle = '#ffffff';
-        ctx.fillRect(0, 0, artW, artH);
-        ctx.drawImage(img, 0, 0);
-        cv.toBlob((b) => b && downloadBlob(b, 'drawing.jpg'), 'image/jpeg', 0.92);
-    });
+  const svg = buildSVGString(shapes, artW, artH);
+  svgToImage(svg, (img) => {
+    const cv = document.createElement("canvas");
+    cv.width = artW;
+    cv.height = artH;
+    const ctx = cv.getContext("2d");
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, artW, artH);
+    ctx.drawImage(img, 0, 0);
+    cv.toBlob((b) => b && downloadBlob(b, "drawing.jpg"), "image/jpeg", 0.92);
+  });
 }
 function exportWebPFile(shapes, artW, artH) {
-    const svg = buildSVGString(shapes, artW, artH);
-    svgToImage(svg, (img) => {
-        const cv = document.createElement('canvas');
-        cv.width = artW;
-        cv.height = artH;
-        cv.getContext('2d').drawImage(img, 0, 0);
-        cv.toBlob((b) => b && downloadBlob(b, 'drawing.webp'), 'image/webp', 0.92);
-    });
+  const svg = buildSVGString(shapes, artW, artH);
+  svgToImage(svg, (img) => {
+    const cv = document.createElement("canvas");
+    cv.width = artW;
+    cv.height = artH;
+    cv.getContext("2d").drawImage(img, 0, 0);
+    cv.toBlob((b) => b && downloadBlob(b, "drawing.webp"), "image/webp", 0.92);
+  });
 }
 function exportBMPFile(shapes, artW, artH) {
-    const svg = buildSVGString(shapes, artW, artH);
-    svgToImage(svg, (img) => {
-        const cv = document.createElement('canvas');
-        cv.width = artW;
-        cv.height = artH;
-        const ctx = cv.getContext('2d');
-        ctx.fillStyle = '#ffffff';
-        ctx.fillRect(0, 0, artW, artH);
-        ctx.drawImage(img, 0, 0);
-        const id = ctx.getImageData(0, 0, artW, artH);
-        const w = artW, h = artH;
-        const rowSize = Math.ceil((w * 3) / 4) * 4;
-        const pixelDataSize = rowSize * h;
-        const fileSize = 54 + pixelDataSize;
-        const buf = new ArrayBuffer(fileSize);
-        const view = new DataView(buf);
-        view.setUint8(0, 0x42);
-        view.setUint8(1, 0x4d);
-        view.setUint32(2, fileSize, true);
-        view.setUint32(10, 54, true);
-        view.setUint32(14, 40, true);
-        view.setInt32(18, w, true);
-        view.setInt32(22, h, true);
-        view.setUint16(26, 1, true);
-        view.setUint16(28, 24, true);
-        view.setUint32(34, pixelDataSize, true);
-        const d = id.data;
-        for (let y = 0; y < h; y++) {
-            const srcRow = (h - 1 - y) * w * 4;
-            const dstRow = 54 + y * rowSize;
-            for (let x = 0; x < w; x++) {
-                const si = srcRow + x * 4;
-                const di = dstRow + x * 3;
-                view.setUint8(di, d[si + 2]);
-                view.setUint8(di + 1, d[si + 1]);
-                view.setUint8(di + 2, d[si]);
-            }
-        }
-        downloadBlob(new Blob([buf], { type: 'image/bmp' }), 'drawing.bmp');
-    });
+  const svg = buildSVGString(shapes, artW, artH);
+  svgToImage(svg, (img) => {
+    const cv = document.createElement("canvas");
+    cv.width = artW;
+    cv.height = artH;
+    const ctx = cv.getContext("2d");
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, artW, artH);
+    ctx.drawImage(img, 0, 0);
+    const id = ctx.getImageData(0, 0, artW, artH);
+    const w = artW, h = artH;
+    const rowSize = Math.ceil(w * 3 / 4) * 4;
+    const pixelDataSize = rowSize * h;
+    const fileSize = 54 + pixelDataSize;
+    const buf = new ArrayBuffer(fileSize);
+    const view = new DataView(buf);
+    view.setUint8(0, 66);
+    view.setUint8(1, 77);
+    view.setUint32(2, fileSize, true);
+    view.setUint32(10, 54, true);
+    view.setUint32(14, 40, true);
+    view.setInt32(18, w, true);
+    view.setInt32(22, h, true);
+    view.setUint16(26, 1, true);
+    view.setUint16(28, 24, true);
+    view.setUint32(34, pixelDataSize, true);
+    const d = id.data;
+    for (let y = 0; y < h; y++) {
+      const srcRow = (h - 1 - y) * w * 4;
+      const dstRow = 54 + y * rowSize;
+      for (let x = 0; x < w; x++) {
+        const si = srcRow + x * 4;
+        const di = dstRow + x * 3;
+        view.setUint8(di, d[si + 2]);
+        view.setUint8(di + 1, d[si + 1]);
+        view.setUint8(di + 2, d[si]);
+      }
+    }
+    downloadBlob(new Blob([buf], { type: "image/bmp" }), "drawing.bmp");
+  });
 }
-
-export { buildSVGString, exportBMPFile, exportJPGFile, exportPNGFile, exportSVGFile, exportWebPFile };
+export {
+  buildSVGString,
+  exportBMPFile,
+  exportJPGFile,
+  exportPNGFile,
+  exportSVGFile,
+  exportWebPFile
+};