Moved the resvg code into downloads, made both svg and png work the

same way, added a note crediting resvg

src/components/download.js

@@ -1,4 +1,5 @@
 
+import * as resvg from 'npm:@resvg/resvg-wasm';
 
 
 const xmlns = "http://www.w3.org/2000/xmlns/";
@@ -25,7 +26,7 @@ export function download(value, name = "untitled", label = "Save") {
   }
 
   a.onclick = async event => {
-    console.log("clicked");
+    console.log("clicked download");
     b.disabled = true;
     if (a.href) {
       console.log(`already saved: ${a.href}`);
@@ -33,7 +34,9 @@ export function download(value, name = "untitled", label = "Save") {
     }
     b.textContent = "Saving…";
     try {
+      console.log("awaiting value function");
       const object = await (typeof value === "function" ? value() : value);
+      console.log(object);
       b.textContent = "Download";
       a.href = URL.createObjectURL(object); // eslint-disable-line require-atomic-updates
       console.log(`url = ${a.href}`);
@@ -57,7 +60,26 @@ export function svg_to_string(svg) {
 }
 
 
-export function svg_to_blob(svg) {
+export function download_as_svg(svg) {
+  console.log("HEY download_as_svg");
   const str = svg_to_string(svg);
-  return new Blob([string], {type: "image/svg+xml"})
+  return new Blob([str], {type: "image/svg+xml"})
 }
+
+export async function download_as_png (svg) {
+  // The Wasm must be initialized first
+
+  const svgstr = svg_to_string(svg);
+
+  const opts = {
+      fitTo: {
+        mode: 'width', // If you need to change the size
+        value: 400,
+      }
+    };
+  const resvgJS = new resvg.Resvg(svgstr, opts)
+  const pngData = resvgJS.render(svgstr, opts) 
+  const pngBuffer = pngData.asPng();
+  return new Blob([pngBuffer], { type: 'image/png' });
+}
+

src/index.md

@@ -16,7 +16,7 @@ toc: false
 
 import {RADIUS_OPTS, DotMaker} from './components/dots.js';
 import {PALETTES, DotControls} from './components/controls.js';
-import {download, svg_to_string, svg_to_blob} from './components/download.js';
+import {download, download_as_svg, download_as_png} from './components/download.js';
 import random from "npm:random";
 
 import * as resvg from 'npm:@resvg/resvg-wasm';
@@ -160,52 +160,22 @@ display(svg.node());
 
 ```js
 
-display(download(() => svg_to_blob(svg.node()), "poptimal.svg", "Save as SVG"));
+display(download(() => {
+  const thing = download_as_svg(svg.node())
+  return thing;
+}, "poptimal.svg", "Save as SVG"));
 
-```
+display(download(() => {
-
+  console.log("PNG value");
-```js
+  const thing = download_as_png(svg.node())
-
+  return thing;
-const png_img = document.createElement("img");
+}, "poptimal.png", "Save as PNG"));
-
-async function svg_to_png (svg) {
-  // The Wasm must be initialized first
-
-  const svgstr = svg_to_string(svg.node());
-
-  const opts = {
-      background: 'rgba(238, 235, 230, .9)',
-      fitTo: {
-        mode: 'width', // If you need to change the size
-        value: 400,
-      }
-    };
-  const resvgJS = new resvg.Resvg(svgstr, opts)
-  console.log(resvgJS);
-  const pngData = resvgJS.render(svgstr, opts) // Output PNG data, Uint8Array
-  console.log(`pngData = ${pngData}`);
-  const pngBuffer = pngData.asPng();
-  const pngURL = URL.createObjectURL(new Blob([pngBuffer], { type: 'image/png' }))
-  console.log(`url = ${pngURL}`);
-  png_img.src = pngURL
-}
-
-display(png_img);
-
-const made_png = view(Inputs.button("Make PNG"));
-
-```
-
-```js
-made_png;
-console.log(made_png);
-if( made_png > 0 ) {
-  console.log("Trying to make png");
-  await svg_to_png(svg);
-}
 
 
 ```
+(PNGs made with <a href="https://github.com/thx/resvg-js">resvg-wasm</a> in-browser)
+
+
 
 </div>