nonbinary.computer
OR-1 dataflow CPU sketch
feat: add SVG and PNG export functions
+5
dfgraph/frontend/src/cytoscape-svg.d.ts
+5
dfgraph/frontend/src/cytoscape-svg.d.ts
+41
dfgraph/frontend/src/export.ts
+41
dfgraph/frontend/src/export.ts
···
1
+
import cytoscape from "cytoscape";
2
+
3
+
function downloadBlob(blob: Blob, filename: string): void {
4
+
const url = URL.createObjectURL(blob);
5
+
const a = document.createElement("a");
6
+
a.href = url;
7
+
a.download = filename;
8
+
document.body.appendChild(a);
9
+
a.click();
10
+
document.body.removeChild(a);
11
+
URL.revokeObjectURL(url);
12
+
}
13
+
14
+
export function exportSvg(cy: cytoscape.Core): void {
15
+
const svgContent: string = (cy as any).svg({ full: true });
16
+
const blob = new Blob([svgContent], { type: "image/svg+xml" });
17
+
downloadBlob(blob, "dfgraph.svg");
18
+
}
19
+
20
+
export function exportPng(cy: cytoscape.Core): void {
21
+
const pngPromise: Promise<Blob> = (cy as any).png({
22
+
full: true,
23
+
output: "blob-promise",
24
+
scale: 2,
25
+
});
26
+
pngPromise.then((blob: Blob) => {
27
+
downloadBlob(blob, "dfgraph.png");
28
+
});
29
+
}
30
+
31
+
export function copyPng(cy: cytoscape.Core): void {
32
+
const pngPromise: Promise<Blob> = (cy as any).png({
33
+
full: true,
34
+
output: "blob-promise",
35
+
scale: 2,
36
+
});
37
+
pngPromise.then((blob: Blob) => {
38
+
const item = new ClipboardItem({ "image/png": blob });
39
+
navigator.clipboard.write([item]);
40
+
});
41
+
}