svelte-asciiart 0.0.3 → 0.0.5

package/README.md

@@ -39,6 +39,7 @@ npm install svelte-asciiart
 | `margin`     | `number \| [number, number] \| [number, number, number, number]` | `0`      | Margin around the frame in grid cells (top/right/bottom/left) |
 | `frameClass` | `string`                                                         | `''`     | CSS class for the frame `<rect>`                              |
 | `svg`        | `SVGSVGElement \| null`                                          | bindable | Optionally bind the underlying `<svg>` element                |
+| `baseSize`   | `number`                                                         | `50`     | Pixels per viewBox unit for intrinsic SVG size (for exports)  |
 | `...rest`    | `SVGAttributes<SVGSVGElement>`                                   | -        | All other SVG attributes are forwarded to the `<svg>` element |
 
 ## Grid Mode

package/dist/AsciiArt.svelte

@@ -15,6 +15,8 @@
 		margin?: Margin;
 		frameClass?: string;
 		svg?: SVGSVGElement | null;
+		/** Pixels per viewBox unit for intrinsic size. Default: 50 */
+		baseSize?: number;
 	}
 
 	let {
@@ -29,6 +31,7 @@
 		margin = 0,
 		frameClass = '',
 		svg = $bindable(),
+		baseSize = 50,
 		...rest
 	}: Props = $props();
 
@@ -79,12 +82,18 @@
 	const offsetY = $derived(parsedMargin.top * cellHeight);
 
 	const viewBox = $derived(`0 0 ${fmt(viewBoxWidth)} ${fmt(viewBoxHeight)}`);
+
+	// Intrinsic size for export (actual rendering uses style for responsiveness)
+	const intrinsicWidth = $derived(fmt(viewBoxWidth * baseSize));
+	const intrinsicHeight = $derived(fmt(viewBoxHeight * baseSize));
 </script>
 
 <svg
 	bind:this={svg}
 	{...rest}
 	{viewBox}
+	width={intrinsicWidth}
+	height={intrinsicHeight}
 	overflow="hidden"
 	preserveAspectRatio="xMinYMin meet"
 	xmlns="http://www.w3.org/2000/svg"

package/dist/AsciiArt.svelte.d.ts

@@ -11,6 +11,8 @@ interface Props extends SVGAttributes<SVGSVGElement> {
     margin?: Margin;
     frameClass?: string;
     svg?: SVGSVGElement | null;
+    /** Pixels per viewBox unit for intrinsic size. Default: 50 */
+    baseSize?: number;
 }
 declare const AsciiArt: import("svelte").Component<Props, {}, "svg">;
 type AsciiArt = ReturnType<typeof AsciiArt>;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { default as AsciiArt } from './AsciiArt.svelte';
-export { exportSvg, exportSvgToPng, type ExportSvgOptions, type ExportPngOptions } from './utils.js';
+export { exportSvg, exportSvgToPng, svgStringToPng, type ExportSvgOptions, type ExportPngOptions, type SvgStringToPngOptions } from './utils.js';

package/dist/index.js

@@ -1,3 +1,3 @@
 // Reexport your entry components here
 export { default as AsciiArt } from './AsciiArt.svelte';
-export { exportSvg, exportSvgToPng } from './utils.js';
+export { exportSvg, exportSvgToPng, svgStringToPng } from './utils.js';

package/dist/utils.d.ts

@@ -10,11 +10,25 @@ export interface ExportSvgOptions {
  */
 export declare function exportSvg(svgEl: SVGSVGElement, options?: ExportSvgOptions): string;
 export interface ExportPngOptions extends ExportSvgOptions {
-    /** Scale factor for the PNG. Default: 2 (for retina) */
+    /** Scale factor for the PNG. Default: 1 */
     scale?: number;
     /** Output format. Default: 'dataUrl' */
     output?: 'dataUrl' | 'blob';
 }
+export interface SvgStringToPngOptions {
+    /** Scale factor for the PNG. Default: 1 */
+    scale?: number;
+    /** Output format. Default: 'dataUrl' */
+    output?: 'dataUrl' | 'blob';
+}
+/**
+ * Convert an SVG string to PNG.
+ * Uses the browser's computed dimensions from the loaded image.
+ */
+export declare function svgStringToPng(svgString: string, options: SvgStringToPngOptions & {
+    output: 'blob';
+}): Promise<Blob>;
+export declare function svgStringToPng(svgString: string, options?: SvgStringToPngOptions): Promise<string>;
 /**
  * Export an SVG element to PNG.
  * Returns a data URL or Blob depending on options.

package/dist/utils.js

@@ -102,33 +102,29 @@ export function exportSvg(svgEl, options = {}) {
     }
     return new XMLSerializer().serializeToString(clone);
 }
-export async function exportSvgToPng(svgEl, options = {}) {
-    const { scale = 2, output = 'dataUrl', ...svgOptions } = options;
-    // Get the exported SVG with embedded styles
-    const svgString = exportSvg(svgEl, svgOptions);
-    // Parse viewBox to get dimensions
-    const viewBox = svgEl.getAttribute('viewBox');
-    if (!viewBox)
-        throw new Error('SVG must have a viewBox attribute');
-    const [, , vbWidth, vbHeight] = viewBox.split(/\s+/).map(Number);
-    // Use a reasonable base size (e.g., 100px per viewBox unit, then scale)
-    const baseSize = 100;
-    const width = Math.round(vbWidth * baseSize * scale);
-    const height = Math.round(vbHeight * baseSize * scale);
-    // Create canvas
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext('2d');
-    if (!ctx)
-        throw new Error('Could not get canvas 2d context');
-    // Create image from SVG
+export async function svgStringToPng(svgString, options = {}) {
+    const { scale = 1, output = 'dataUrl' } = options;
     const img = new Image();
     const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
     const url = URL.createObjectURL(svgBlob);
     return new Promise((resolve, reject) => {
         img.onload = () => {
             URL.revokeObjectURL(url);
+            // Use browser's computed dimensions
+            const width = Math.round(img.naturalWidth * scale);
+            const height = Math.round(img.naturalHeight * scale);
+            if (width === 0 || height === 0) {
+                reject(new Error('SVG has zero dimensions - ensure it has width/height or viewBox'));
+                return;
+            }
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                reject(new Error('Could not get canvas 2d context'));
+                return;
+            }
             ctx.drawImage(img, 0, 0, width, height);
             if (output === 'blob') {
                 canvas.toBlob((blob) => {
@@ -149,3 +145,8 @@ export async function exportSvgToPng(svgEl, options = {}) {
         img.src = url;
     });
 }
+export async function exportSvgToPng(svgEl, options = {}) {
+    const { scale, output, ...svgOptions } = options;
+    const svgString = exportSvg(svgEl, svgOptions);
+    return svgStringToPng(svgString, { scale, output });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-asciiart",
-	"version": "0.0.3",
+	"version": "0.0.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",