12 files changed, 130 insertions, 17 deletions

diff --git a/subprojects/frontend/src/RootStore.ts b/subprojects/frontend/src/RootStore.ts
index 27bff0de..8a17d2de 100644
--- a/subprojects/frontend/src/RootStore.ts
+++ b/subprojects/frontend/src/RootStore.ts
@@ -9,7 +9,7 @@ import { makeAutoObservable, runInAction } from 'mobx';
 
 import PWAStore from './PWAStore';
 import type EditorStore from './editor/EditorStore';
-import ExportSettingsScotre from './graph/ExportSettingsStore';
+import ExportSettingsScotre from './graph/export/ExportSettingsStore';
 import Compressor from './persistence/Compressor';
 import ThemeStore from './theme/ThemeStore';
 
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
index 1416a259..b5d93aef 100644
--- a/subprojects/frontend/src/graph/GraphArea.tsx
+++ b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -11,10 +11,10 @@ import { useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import DotGraphVisualizer from './DotGraphVisualizer';
-import ExportPanel from './ExportPanel';
 import type GraphStore from './GraphStore';
 import VisibilityPanel from './VisibilityPanel';
 import ZoomCanvas from './ZoomCanvas';
+import ExportPanel from './export/ExportPanel';
 
 function GraphArea({ graph }: { graph: GraphStore }): JSX.Element {
   const { breakpoints } = useTheme();
diff --git a/subprojects/frontend/src/graph/ExportPanel.tsx b/subprojects/frontend/src/graph/export/ExportPanel.tsx
index 2621deff..c93fa837 100644
--- a/subprojects/frontend/src/graph/ExportPanel.tsx
+++ b/subprojects/frontend/src/graph/export/ExportPanel.tsx
@@ -8,6 +8,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import ImageIcon from '@mui/icons-material/Image';
+import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import SaveAltIcon from '@mui/icons-material/SaveAlt';
 import ShapeLineIcon from '@mui/icons-material/ShapeLine';
@@ -24,11 +25,11 @@ import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 
-import { useRootStore } from '../RootStoreProvider';
-import getLogger from '../utils/getLogger';
+import { useRootStore } from '../../RootStoreProvider';
+import getLogger from '../../utils/getLogger';
+import type GraphStore from '../GraphStore';
+import SlideInPanel from '../SlideInPanel';
 
-import type GraphStore from './GraphStore';
-import SlideInPanel from './SlideInPanel';
 import exportDiagram from './exportDiagram';
 
 const log = getLogger('graph.ExportPanel');
@@ -138,6 +139,13 @@ function ExportPanel({
           <ShapeLineIcon fontSize="small" /> SVG
         </ToggleButton>
         <ToggleButton
+          value="pdf"
+          selected={exportSettingsStore.format === 'pdf'}
+          onClick={() => exportSettingsStore.setFormat('pdf')}
+        >
+          <InsertDriveFileOutlinedIcon fontSize="small" /> PDF
+        </ToggleButton>
+        <ToggleButton
           value="png"
           selected={exportSettingsStore.format === 'png'}
           onClick={() => exportSettingsStore.setFormat('png')}
@@ -170,7 +178,7 @@ function ExportPanel({
         }
         label="Transparent background"
       />
-      {exportSettingsStore.format === 'svg' && (
+      {exportSettingsStore.canEmbedFonts && (
         <FormControlLabel
           control={
             <Switch
@@ -182,13 +190,17 @@ function ExportPanel({
             <Stack direction="column">
               <Typography>Embed fonts</Typography>
               <Typography variant="caption">
-                +75&thinsp;kB, only supported in browsers
+                {exportSettingsStore.format === 'pdf' ? (
+                  <>+20&thinsp;kB fully embedded</>
+                ) : (
+                  <>+75&thinsp;kB, only supported in browsers</>
+                )}
               </Typography>
             </Stack>
           }
         />
       )}
-      {exportSettingsStore.format === 'png' && (
+      {exportSettingsStore.canScale && (
         <Box mx={4} mt={1} mb={2}>
           <Slider
             aria-label="Image scale"
diff --git a/subprojects/frontend/src/graph/ExportSettingsStore.tsx b/subprojects/frontend/src/graph/export/ExportSettingsStore.tsx
index 8ee91b73..53a161ab 100644
--- a/subprojects/frontend/src/graph/ExportSettingsStore.tsx
+++ b/subprojects/frontend/src/graph/export/ExportSettingsStore.tsx
@@ -6,7 +6,7 @@
 
 import { makeAutoObservable } from 'mobx';
 
-export type ExportFormat = 'svg' | 'png';
+export type ExportFormat = 'svg' | 'pdf' | 'png';
 export type ExportTheme = 'light' | 'dark';
 
 export default class ExportSettingsStore {
@@ -16,7 +16,9 @@ export default class ExportSettingsStore {
 
   transparent = true;
 
-  embedFonts = false;
+  embedSVGFonts = false;
+
+  embedPDFFonts = true;
 
   scale = 100;
 
@@ -43,4 +45,23 @@ export default class ExportSettingsStore {
   setScale(scale: number): void {
     this.scale = scale;
   }
+
+  get embedFonts(): boolean {
+    return this.format === 'pdf' ? this.embedPDFFonts : this.embedSVGFonts;
+  }
+
+  private set embedFonts(embedFonts: boolean) {
+    if (this.format === 'pdf') {
+      this.embedPDFFonts = embedFonts;
+    }
+    this.embedSVGFonts = embedFonts;
+  }
+
+  get canEmbedFonts(): boolean {
+    return this.format === 'svg' || this.format === 'pdf';
+  }
+
+  get canScale(): boolean {
+    return this.format === 'png';
+  }
 }
diff --git a/subprojects/frontend/src/graph/exportDiagram.tsx b/subprojects/frontend/src/graph/export/exportDiagram.tsx
index 3ba278f9..685b6ace 100644
--- a/subprojects/frontend/src/graph/exportDiagram.tsx
+++ b/subprojects/frontend/src/graph/export/exportDiagram.tsx
@@ -17,13 +17,13 @@ import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
 import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
 import type { Theme } from '@mui/material/styles';
 
-import { darkTheme, lightTheme } from '../theme/ThemeProvider';
-import { copyBlob, saveBlob } from '../utils/fileIO';
+import { darkTheme, lightTheme } from '../../theme/ThemeProvider';
+import { copyBlob, saveBlob } from '../../utils/fileIO';
+import type GraphStore from '../GraphStore';
+import { createGraphTheme } from '../GraphTheme';
+import { SVG_NS } from '../postProcessSVG';
 
 import type ExportSettingsStore from './ExportSettingsStore';
-import type GraphStore from './GraphStore';
-import { createGraphTheme } from './GraphTheme';
-import { SVG_NS } from './postProcessSVG';
 
 const PROLOG = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
 const PNG_CONTENT_TYPE = 'image/png';
@@ -283,6 +283,20 @@ async function serializePNG(
   });
 }
 
+let serializePDFCached:
+  | ((svg: SVGSVGElement, embedFonts: boolean) => Promise<Blob>)
+  | undefined;
+
+async function serializePDF(
+  svg: SVGSVGElement,
+  settings: ExportSettingsStore,
+): Promise<Blob> {
+  if (serializePDFCached === undefined) {
+    serializePDFCached = (await import('./serializePDF')).default;
+  }
+  return serializePDFCached(svg, settings.embedFonts);
+}
+
 export default async function exportDiagram(
   svgContainer: HTMLElement | undefined,
   graph: GraphStore,
@@ -319,11 +333,16 @@ export default async function exportDiagram(
     // If we are creating a PNG, font file size doesn't matter,
     // and we can reuse fonts the browser has already downloaded.
     fontsCSS = await fetchVariableFontCSS();
-  } else if (settings.embedFonts) {
+  } else if (settings.format === 'svg' && settings.embedFonts) {
     fontsCSS = await fetchFontCSS();
   }
   appendStyles(svgDocument, copyOfSVG, theme, colorNodes, fontsCSS);
 
+  if (settings.format === 'pdf') {
+    const pdf = await serializePDF(copyOfSVG, settings);
+    await saveBlob(pdf, 'graph.pdf', 'application/pdf', EXPORT_ID);
+    return;
+  }
   const serializedSVG = serializeSVG(svgDocument);
   if (settings.format === 'png') {
     const png = await serializePNG(serializedSVG, svg, settings, theme);
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf b/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf
new file mode 100644
index 00000000..7472d192
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf.license b/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf.license
new file mode 100644
index 00000000..442f1821
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-bold.ttf.license
@@ -0,0 +1,8 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+SPDX-License-Identifier: OFL-1.1
+
+This file was derived from Open Sans v3.3
+(https://github.com/googlefonts/opensans/blob/bd7e37632246368c60fdcbd374dbf9bad11969b6/fonts/ttf/OpenSans-Bold.ttf)
+using the Font Squirrel Web Font Generator (https://www.fontsquirrel.com/tools/webfont-generator)
+with the Basic Subsetting setting to reduce the file size by retaining latin characters only.
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf b/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf
new file mode 100644
index 00000000..cecb0ce1
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf.license b/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf.license
new file mode 100644
index 00000000..0657164a
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-italic.ttf.license
@@ -0,0 +1,8 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+SPDX-License-Identifier: OFL-1.1
+
+This file was derived from Open Sans v3.3
+(https://github.com/googlefonts/opensans/blob/bd7e37632246368c60fdcbd374dbf9bad11969b6/fonts/ttf/OpenSans-Italic.ttf)
+using the Font Squirrel Web Font Generator (https://www.fontsquirrel.com/tools/webfont-generator)
+with the Basic Subsetting setting to reduce the file size by retaining latin characters only.
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf b/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf
new file mode 100644
index 00000000..46c0f716
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf
diff --git a/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf.license b/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf.license
new file mode 100644
index 00000000..8bc20e51
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/open-sans-latin-regular.ttf.license
@@ -0,0 +1,8 @@
+Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans)
+
+SPDX-License-Identifier: OFL-1.1
+
+This file was derived from Open Sans v3.3
+(https://github.com/googlefonts/opensans/blob/bd7e37632246368c60fdcbd374dbf9bad11969b6/fonts/ttf/OpenSans-Regular.ttf)
+using the Font Squirrel Web Font Generator (https://www.fontsquirrel.com/tools/webfont-generator)
+with the Basic Subsetting setting to reduce the file size by retaining latin characters only.
diff --git a/subprojects/frontend/src/graph/export/serializePDF.ts b/subprojects/frontend/src/graph/export/serializePDF.ts
new file mode 100644
index 00000000..75d1a4f4
--- /dev/null
+++ b/subprojects/frontend/src/graph/export/serializePDF.ts
@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import { jsPDF } from 'jspdf';
+import { svg2pdf } from 'svg2pdf.js';
+
+import boldFontURL from './open-sans-latin-bold.ttf?url';
+import italicFontURL from './open-sans-latin-italic.ttf?url';
+import normalFontURL from './open-sans-latin-regular.ttf?url';
+
+export default async function serializePDF(
+  svg: SVGSVGElement,
+  embedFonts: boolean,
+): Promise<Blob> {
+  const width = svg.width.baseVal.value;
+  const height = svg.height.baseVal.value;
+  // eslint-disable-next-line new-cap -- jsPDF uses a lowercase constructor.
+  const document = new jsPDF({
+    orientation: width > height ? 'l' : 'p',
+    unit: 'px',
+    format: [width, height],
+    compress: true,
+  });
+  if (embedFonts) {
+    document.addFont(normalFontURL, 'Open Sans', 'normal', 400);
+    document.addFont(italicFontURL, 'Open Sans', 'italic', 400);
+    document.addFont(boldFontURL, 'Open Sans', 'normal', 700);
+  }
+  const result = await svg2pdf(svg, document, {
+    width,
+    height,
+  });
+  return result.output('blob');
+}