Render hacky screenshot of current sheet

It won't work in many browsers, nor with many cells contents. But it
works with some, and that is enough to be sort of useful. It works
particularly well in Chrome, and it works fine with text cells.

Author: jstrieb

TODO.md

@@ -28,7 +28,6 @@
   - Highlight referenced cells when in insert mode
   - Cells can run functions in a destructor
   - Context menu as last child of body, gets moved by right click
-  - Render tables to images to save and share screenshots
   - Settings input with numeric input and buttons on either side
   - CSP to restrict `worker-src` (except that we don't want to block web
     workers, only service workers)
@@ -165,3 +164,4 @@
     vertical scrolling
   - Accidentally typing "RC" while typing another formula can cause everything
     to hang
+  - Tons of issues with screenshot rendering

src/App.svelte

@@ -116,7 +116,12 @@
   import { State, Sheet } from "./classes.svelte.js";
   import { compressText } from "./compress.js";
   import { evalDebounced, functions } from "./formula-functions.svelte.js";
-  import { debounce, replaceValues, nextZIndex } from "./helpers.js";
+  import {
+    debounce,
+    replaceValues,
+    nextZIndex,
+    domToImage,
+  } from "./helpers.js";
   import { actions, keyboardHandler, keybindings } from "./keyboard.js";
 
   let { urlData } = $props();
@@ -127,6 +132,8 @@
   let startHeight = $state(0);
   let scrollArea = $state();
   let imageData = $state();
+  let tableImage = $state();
+  let showScreenshot = $state(false);
 
   // svelte-ignore state_referenced_locally
   if (!urlData) {
@@ -174,6 +181,9 @@
       // HTMLElements)
       window.history.pushState(undefined, "", "#" + compressed);
     }
+    if (showScreenshot) {
+      tableImage = domToImage(table);
+    }
   }, 1000);
   $effect(() => {
     // Allow cell changes with get or update to trigger save. Those updates
@@ -200,6 +210,12 @@
       formulaCode: globals.formulaCode,
     });
   });
+  $effect(() => {
+    globals.currentSheetIndex;
+    if (showScreenshot) {
+      tableImage = domToImage(table);
+    }
+  });
 
   Object.entries(window.localStorage)
     .filter(([k, _]) => k.startsWith("settings."))
@@ -351,6 +367,23 @@
   <div
     style="display: flex; flex-direction: column; gap: 0.5em; padding: 0.5em;"
   >
+    <Details bind:open={showScreenshot}>
+      {#snippet summary()}Screenshot{/snippet}
+      <p>
+        This feature is likely to not work correctly for some sheet cells and
+        some browsers.
+      </p>
+      {#await tableImage}
+        <p>Loading...</p>
+      {:then src}
+        <img
+          style="display: block; width: 100%; min-width: 0px; min-height: 0px; object-fit: contain;"
+          {src}
+        />
+      {:catch err}
+        <p>Error {err}</p>
+      {/await}
+    </Details>
     <SaveLoad bind:globals {imageData} />
   </div>
 </Dialog>

src/helpers.js

@@ -81,3 +81,90 @@ export function nextZIndex(increment = 1) {
   nextIndex += increment;
   return result;
 }
+
+const elementProperties = Object.getOwnPropertyNames(HTMLElement.prototype);
+const objectProperties = Object.getOwnPropertyNames(Object.prototype);
+function cloneNode(node) {
+  const result = node.cloneNode(false);
+  let style;
+  try {
+    style = window.getComputedStyle(node);
+  } catch {
+    return result;
+  }
+  for (const s of style) {
+    result.style[s] = style.getPropertyValue(s);
+  }
+  for (const prop of Object.getOwnPropertyNames(node.__proto__)) {
+    if (typeof node[prop] == "function") continue;
+    if (objectProperties.includes(prop)) continue;
+    if (elementProperties.includes(prop)) continue;
+    const attribute = node[prop];
+    if (attribute == null || attribute == "") continue;
+    result.setAttribute(prop, attribute);
+  }
+  for (const child of node.childNodes) {
+    result.appendChild(cloneNode(child));
+  }
+  return result;
+}
+
+export async function domToImage(node) {
+  if (node == null) return undefined;
+
+  const { width, height } = node.getBoundingClientRect();
+  const padding = 10;
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("width", width + padding * 2);
+  svg.setAttribute("height", width + padding * 2);
+  Array.from(
+    document.querySelectorAll("link[rel='stylesheet'], style"),
+  ).forEach((tag) => {
+    svg.append(cloneNode(tag));
+  });
+  const foreignObject = Object.assign(
+    document.createElementNS("http://www.w3.org/2000/svg", "foreignObject"),
+    { style: "width: 100%; height: 100%;" },
+  );
+  const root = Object.assign(
+    document.createElementNS("http://www.w3.org/1999/xhtml", "div"),
+    { style: `width: 100%; height: 100%; padding: ${(padding * 3) / 4}px;` },
+  );
+  root.appendChild(cloneNode(node));
+  foreignObject.append(root);
+  svg.appendChild(foreignObject);
+
+  const serializer = new XMLSerializer();
+  const blob = new Blob([serializer.serializeToString(svg)], {
+    type: "image/svg+xml",
+  });
+  const dataUrl = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("load", (e) => {
+      resolve(e.target.result);
+    });
+    reader.addEventListener("error", (e) => {
+      reject(e);
+    });
+    reader.readAsDataURL(blob);
+  });
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width + padding * 2;
+  canvas.height = height + padding * 2;
+  const context = canvas.getContext("2d");
+  context.fillStyle = "white";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  await new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => {
+      context.drawImage(image, 0, 0);
+      resolve();
+    });
+    image.addEventListener("error", (e) => {
+      reject(e);
+    });
+    image.src = dataUrl;
+  });
+  return canvas.toDataURL("image/png");
+}