feat(web): SVG export

5 files changed, 252 insertions, 35 deletions

diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
index 72ac58fa..cc8b5116 100644
--- a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
+++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -30,11 +30,13 @@ function DotGraphVisualizer({
   fitZoom,
   transitionTime,
   animateThreshold,
+  setSvgContainer,
 }: {
   graph: GraphStore;
   fitZoom?: FitZoomCallback;
   transitionTime?: number;
   animateThreshold?: number;
+  setSvgContainer?: (container: HTMLElement | undefined) => void;
 }): JSX.Element {
   const transitionTimeOrDefault =
     transitionTime ?? DotGraphVisualizer.defaultProps.transitionTime;
@@ -48,6 +50,7 @@ function DotGraphVisualizer({
 
   const setElement = useCallback(
     (element: HTMLDivElement | null) => {
+      setSvgContainer?.(element ?? undefined);
       if (disposerRef.current !== undefined) {
         disposerRef.current();
         disposerRef.current = undefined;
@@ -147,6 +150,7 @@ function DotGraphVisualizer({
       transitionTimeOrDefault,
       animateThresholdOrDefault,
       animate,
+      setSvgContainer,
     ],
   );
 
@@ -157,6 +161,7 @@ DotGraphVisualizer.defaultProps = {
   fitZoom: undefined,
   transitionTime: 250,
   animateThreshold: 100,
+  setSvgContainer: undefined,
 };
 
 export default observer(DotGraphVisualizer);
diff --git a/subprojects/frontend/src/graph/ExportButton.tsx b/subprojects/frontend/src/graph/ExportButton.tsx
new file mode 100644
index 00000000..91445d00
--- /dev/null
+++ b/subprojects/frontend/src/graph/ExportButton.tsx
@@ -0,0 +1,168 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import createCache from '@emotion/cache';
+import { serializeStyles } from '@emotion/serialize';
+import type { StyleSheet } from '@emotion/utils';
+import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
+import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
+import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
+import SaveAltIcon from '@mui/icons-material/SaveAlt';
+import IconButton from '@mui/material/IconButton';
+import { styled, useTheme, type Theme } from '@mui/material/styles';
+import { useCallback } from 'react';
+
+import { createGraphTheme } from './GraphTheme';
+import { SVG_NS } from './postProcessSVG';
+
+const PROLOG = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
+
+const ExportButtonRoot = styled('div', {
+  name: 'ExportButton-Root',
+})(({ theme }) => ({
+  position: 'absolute',
+  padding: theme.spacing(1),
+  top: 0,
+  right: 0,
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'start',
+}));
+
+const ICONS: Map<string, Element> = new Map();
+
+function importSVG(svgSource: string, className: string): void {
+  const parser = new DOMParser();
+  const svgDocument = parser.parseFromString(svgSource, 'image/svg+xml');
+  const root = svgDocument.children[0];
+  if (root === undefined) {
+    return;
+  }
+  root.id = className;
+  root.classList.add(className);
+  ICONS.set(className, root);
+}
+
+importSVG(labelSVG, 'icon-TRUE');
+importSVG(labelOutlinedSVG, 'icon-UNKNOWN');
+importSVG(cancelSVG, 'icon-ERROR');
+
+function appendStyles(
+  svgDocument: XMLDocument,
+  svg: SVGSVGElement,
+  theme: Theme,
+): void {
+  const cache = createCache({
+    key: 'refinery',
+    container: svg,
+    prepend: true,
+  });
+  // @ts-expect-error `CSSObject` types don't match up between `@mui/material` and
+  // `@emotion/serialize`, but they are compatible in practice.
+  const styles = serializeStyles([createGraphTheme], cache.registered, {
+    theme,
+    colorNodes: true,
+    noEmbedIcons: true,
+  });
+  const rules: string[] = [];
+  const sheet = {
+    insert(rule) {
+      rules.push(rule);
+    },
+  } as StyleSheet;
+  cache.insert('', styles, sheet, false);
+  const styleElement = svgDocument.createElementNS(SVG_NS, 'style');
+  svg.prepend(styleElement);
+  styleElement.innerHTML = rules.join('');
+}
+
+function fixForeignObjects(svgDocument: XMLDocument, svg: SVGSVGElement): void {
+  const foreignObjects: SVGForeignObjectElement[] = [];
+  svg
+    .querySelectorAll('foreignObject')
+    .forEach((object) => foreignObjects.push(object));
+  foreignObjects.forEach((object) => {
+    const useElement = svgDocument.createElementNS(SVG_NS, 'use');
+    let x = Number(object.getAttribute('x') ?? '0');
+    let y = Number(object.getAttribute('y') ?? '0');
+    const width = Number(object.getAttribute('width') ?? '0');
+    const height = Number(object.getAttribute('height') ?? '0');
+    const size = Math.min(width, height);
+    x += (width - size) / 2;
+    y += (height - size) / 2;
+    useElement.setAttribute('x', String(x));
+    useElement.setAttribute('y', String(y));
+    useElement.setAttribute('width', String(size));
+    useElement.setAttribute('height', String(size));
+    useElement.id = object.id;
+    object.children[0]?.classList?.forEach((className) => {
+      useElement.classList.add(className);
+      if (ICONS.has(className)) {
+        useElement.setAttribute('href', `#${className}`);
+      }
+    });
+    object.replaceWith(useElement);
+  });
+  const defs = svgDocument.createElementNS(SVG_NS, 'defs');
+  svg.prepend(defs);
+  ICONS.forEach((value) => {
+    const importedValue = svgDocument.importNode(value, true);
+    defs.appendChild(importedValue);
+  });
+}
+
+function downloadSVG(svgDocument: XMLDocument) {
+  const serializer = new XMLSerializer();
+  const svgText = `${PROLOG}\n${serializer.serializeToString(svgDocument)}`;
+  const blob = new Blob([svgText], {
+    type: 'image/svg+xml',
+  });
+  const link = document.createElement('a');
+  link.href = window.URL.createObjectURL(blob);
+  link.download = 'graph.svg';
+  link.style.display = 'none';
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+export default function ExportButton({
+  svgContainer,
+}: {
+  svgContainer: HTMLElement | undefined;
+}): JSX.Element {
+  const theme = useTheme();
+  const saveCallback = useCallback(() => {
+    const svg = svgContainer?.querySelector('svg');
+    if (!svg) {
+      return;
+    }
+    const svgDocument = document.implementation.createDocument(
+      SVG_NS,
+      'svg',
+      null,
+    );
+    const copyOfSVG = svgDocument.importNode(svg, true);
+    const originalRoot = svgDocument.childNodes[0];
+    if (originalRoot === undefined) {
+      svgDocument.appendChild(copyOfSVG);
+    } else {
+      svgDocument.replaceChild(copyOfSVG, originalRoot);
+    }
+    fixForeignObjects(svgDocument, copyOfSVG);
+    appendStyles(svgDocument, copyOfSVG, theme);
+    downloadSVG(svgDocument);
+  }, [theme, svgContainer]);
+
+  return (
+    <ExportButtonRoot>
+      <IconButton aria-label="Save SVG" onClick={saveCallback}>
+        <SaveAltIcon />
+      </IconButton>
+    </ExportButtonRoot>
+  );
+}
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
index d5801b9a..2bf40d1a 100644
--- a/subprojects/frontend/src/graph/GraphArea.tsx
+++ b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -7,9 +7,11 @@
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import DotGraphVisualizer from './DotGraphVisualizer';
+import ExportButton from './ExportButton';
 import type GraphStore from './GraphStore';
 import VisibilityPanel from './VisibilityPanel';
 import ZoomCanvas from './ZoomCanvas';
@@ -19,6 +21,7 @@ function GraphArea({ graph }: { graph: GraphStore }): JSX.Element {
   const { ref, width, height } = useResizeDetector({
     refreshMode: 'debounce',
   });
+  const [svgContainer, setSvgContainer] = useState<HTMLElement | undefined>();
 
   const breakpoint = breakpoints.values.sm;
   const dialog =
@@ -36,9 +39,16 @@ function GraphArea({ graph }: { graph: GraphStore }): JSX.Element {
       ref={ref}
     >
       <ZoomCanvas>
-        {(fitZoom) => <DotGraphVisualizer graph={graph} fitZoom={fitZoom} />}
+        {(fitZoom) => (
+          <DotGraphVisualizer
+            graph={graph}
+            fitZoom={fitZoom}
+            setSvgContainer={setSvgContainer}
+          />
+        )}
       </ZoomCanvas>
       <VisibilityPanel graph={graph} dialog={dialog} />
+      <ExportButton svgContainer={svgContainer} />
     </Box>
   );
 }
diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx
index 7334f559..b3f55a35 100644
--- a/subprojects/frontend/src/graph/GraphTheme.tsx
+++ b/subprojects/frontend/src/graph/GraphTheme.tsx
@@ -52,11 +52,34 @@ function createTypeHashStyles(theme: Theme, colorNodes: boolean): CSSObject {
   return result;
 }
 
-export default styled('div', {
-  name: 'GraphTheme',
-})<{ colorNodes: boolean }>(({ theme, colorNodes }) => ({
-  '& svg': {
-    userSelect: 'none',
+function iconStyle(
+  svg: string,
+  color: string,
+  noEmbedIcons?: boolean,
+): CSSObject {
+  if (noEmbedIcons) {
+    return {
+      fill: color,
+    };
+  }
+  return {
+    maskImage: svgURL(svg),
+    background: color,
+  };
+}
+
+export function createGraphTheme({
+  theme,
+  colorNodes,
+  noEmbedIcons,
+}: {
+  theme: Theme;
+  colorNodes: boolean;
+  noEmbedIcons?: boolean;
+}): CSSObject {
+  const shadowAlapha = theme.palette.mode === 'dark' ? 0.32 : 0.24;
+
+  return {
     '.node': {
       '& text': {
         fontFamily: theme.typography.fontFamily,
@@ -80,12 +103,15 @@ export default styled('div', {
         strokeWidth: 2,
       },
     },
-    '.node-shadow[fill="white"]': {
-      fill: alpha(
-        theme.palette.text.primary,
-        theme.palette.mode === 'dark' ? 0.32 : 0.24,
-      ),
-    },
+    '.node-shadow[fill="white"]': noEmbedIcons
+      ? {
+          // Inkscape can't handle opacity in exported SVG.
+          fill: theme.palette.text.primary,
+          opacity: shadowAlapha,
+        }
+      : {
+          fill: alpha(theme.palette.text.primary, shadowAlapha),
+        },
     '.node-exists-UNKNOWN [stroke="black"]': {
       strokeDasharray: '5 2',
     },
@@ -104,30 +130,38 @@ export default styled('div', {
     },
     ...createEdgeColor('UNKNOWN', theme.palette.text.secondary, 'none'),
     ...createEdgeColor('ERROR', theme.palette.error.main),
-    '.icon': {
-      maskSize: '12px 12px',
-      maskPosition: '50% 50%',
-      maskRepeat: 'no-repeat',
-      width: '100%',
-      height: '100%',
-    },
-    '.icon-TRUE': {
-      maskImage: svgURL(labelSVG),
-      background: theme.palette.text.primary,
-    },
-    '.icon-UNKNOWN': {
-      maskImage: svgURL(labelOutlinedSVG),
-      background: theme.palette.text.secondary,
-    },
-    '.icon-ERROR': {
-      maskImage: svgURL(cancelSVG),
-      background: theme.palette.error.main,
-    },
+    ...(noEmbedIcons
+      ? {}
+      : {
+          '.icon': {
+            maskSize: '12px 12px',
+            maskPosition: '50% 50%',
+            maskRepeat: 'no-repeat',
+            width: '100%',
+            height: '100%',
+          },
+        }),
+    '.icon-TRUE': iconStyle(labelSVG, theme.palette.text.primary, noEmbedIcons),
+    '.icon-UNKNOWN': iconStyle(
+      labelOutlinedSVG,
+      theme.palette.text.secondary,
+      noEmbedIcons,
+    ),
+    '.icon-ERROR': iconStyle(cancelSVG, theme.palette.error.main, noEmbedIcons),
     'text.label-UNKNOWN': {
       fill: theme.palette.text.secondary,
     },
     'text.label-ERROR': {
       fill: theme.palette.error.main,
     },
+  };
+}
+
+export default styled('div', {
+  name: 'GraphTheme',
+})<{ colorNodes: boolean }>((args) => ({
+  '& svg': {
+    userSelect: 'none',
+    ...createGraphTheme(args),
   },
 }));
diff --git a/subprojects/frontend/src/graph/postProcessSVG.ts b/subprojects/frontend/src/graph/postProcessSVG.ts
index a580f5c6..f434f80b 100644
--- a/subprojects/frontend/src/graph/postProcessSVG.ts
+++ b/subprojects/frontend/src/graph/postProcessSVG.ts
@@ -1,13 +1,13 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
 
 import { type BBox, parsePolygonBBox, parsePathBBox } from './parseBBox';
 
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const XLINK_NS = 'http://www.w3.org/1999/xlink';
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+export const XLINK_NS = 'http://www.w3.org/1999/xlink';
 
 function modifyAttribute(element: Element, attribute: string, change: number) {
   const valueString = element.getAttribute(attribute);