diff --git a/README.md b/README.md index 132d204..8f2d65b 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ It reads local Engine DJ SQLite databases and Traktor `collection.nml` files dir - Playlist transition summaries derived from playlist ordering - Sparse / missing region surfacing - Mock dataset mode for first-run exploration -- PNG export for both charts +- PNG and PDF export for both charts - GitHub Pages-ready static deployment ## Local development diff --git a/package-lock.json b/package-lock.json index 3f4f696..f1e150c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,20 @@ { "name": "keybpmmap", - "version": "0.13.0", + "version": "0.15.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "keybpmmap", - "version": "0.13.0", + "version": "0.15.0", "dependencies": { "d3": "^7.9.0", "fast-xml-parser": "^5.8.0", + "jspdf": "^4.2.1", "react": "^19.2.6", "react-dom": "^19.2.6", - "sql.js": "^1.14.1" + "sql.js": "^1.14.1", + "svg2pdf.js": "^2.7.0" }, "devDependencies": { "@eslint/js": "^10.0.1", @@ -225,6 +227,15 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/runtime": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz", + "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.28.6", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz", @@ -1221,6 +1232,19 @@ "undici-types": "~7.16.0" } }, + "node_modules/@types/pako": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz", + "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==", + "license": "MIT" + }, + "node_modules/@types/raf": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz", + "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==", + "license": "MIT", + "optional": true + }, "node_modules/@types/react": { "version": "19.2.15", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.15.tgz", @@ -1252,6 +1276,13 @@ "@types/node": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "license": "MIT", + "optional": true + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "8.59.4", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.59.4.tgz", @@ -1694,6 +1725,16 @@ "node": "18 || 20 || >=22" } }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/baseline-browser-mapping": { "version": "2.10.31", "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.31.tgz", @@ -1775,6 +1816,26 @@ ], "license": "CC-BY-4.0" }, + "node_modules/canvg": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz", + "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==", + "license": "MIT", + "optional": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@types/raf": "^3.4.0", + "core-js": "^3.8.3", + "raf": "^3.4.1", + "regenerator-runtime": "^0.13.7", + "rgbcolor": "^1.0.1", + "stackblur-canvas": "^2.0.0", + "svg-pathdata": "^6.0.3" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/chai": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz", @@ -1801,6 +1862,18 @@ "dev": true, "license": "MIT" }, + "node_modules/core-js": { + "version": "3.49.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz", + "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -1816,6 +1889,28 @@ "node": ">= 8" } }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "license": "MIT", + "optional": true, + "dependencies": { + "utrie": "^1.0.2" + } + }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/csstype": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", @@ -2268,6 +2363,16 @@ "node": ">=8" } }, + "node_modules/dompurify": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.5.tgz", + "integrity": "sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA==", + "license": "(MPL-2.0 OR Apache-2.0)", + "optional": true, + "optionalDependencies": { + "@types/trusted-types": "^2.0.7" + } + }, "node_modules/electron-to-chromium": { "version": "1.5.360", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.360.tgz", @@ -2528,6 +2633,17 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-png": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz", + "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==", + "license": "MIT", + "dependencies": { + "@types/pako": "^2.0.3", + "iobuffer": "^5.3.2", + "pako": "^2.1.0" + } + }, "node_modules/fast-xml-builder": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.2.0.tgz", @@ -2584,6 +2700,12 @@ } } }, + "node_modules/fflate": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz", + "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==", + "license": "MIT" + }, "node_modules/file-entry-cache": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", @@ -2635,6 +2757,12 @@ "dev": true, "license": "ISC" }, + "node_modules/font-family-papandreou": { + "version": "0.2.0-patch2", + "resolved": "https://registry.npmjs.org/font-family-papandreou/-/font-family-papandreou-0.2.0-patch2.tgz", + "integrity": "sha512-l/YiRdBSH/eWv6OF3sLGkwErL+n0MqCICi9mppTZBOCL5vixWGDqCYvRcuxB2h7RGCTzaTKOHT2caHvCXQPRlw==", + "license": "MIT" + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2703,6 +2831,20 @@ "hermes-estree": "0.25.1" } }, + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "license": "MIT", + "optional": true, + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -2744,6 +2886,12 @@ "node": ">=12" } }, + "node_modules/iobuffer": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz", + "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==", + "license": "MIT" + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -2828,6 +2976,23 @@ "node": ">=6" } }, + "node_modules/jspdf": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz", + "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.28.6", + "fast-png": "^6.2.0", + "fflate": "^0.8.1" + }, + "optionalDependencies": { + "canvg": "^3.0.11", + "core-js": "^3.6.0", + "dompurify": "^3.3.1", + "html2canvas": "^1.0.0-rc.5" + } + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -3266,6 +3431,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/pako": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", + "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==", + "license": "(MIT AND Zlib)" + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -3308,6 +3479,13 @@ "dev": true, "license": "MIT" }, + "node_modules/performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==", + "license": "MIT", + "optional": true + }, "node_modules/picocolors": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", @@ -3377,6 +3555,16 @@ "node": ">=6" } }, + "node_modules/raf": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", + "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", + "license": "MIT", + "optional": true, + "dependencies": { + "performance-now": "^2.1.0" + } + }, "node_modules/react": { "version": "19.2.6", "resolved": "https://registry.npmjs.org/react/-/react-19.2.6.tgz", @@ -3398,6 +3586,23 @@ "react": "^19.2.6" } }, + "node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", + "license": "MIT", + "optional": true + }, + "node_modules/rgbcolor": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz", + "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==", + "license": "MIT OR SEE LICENSE IN FEEL-FREE.md", + "optional": true, + "engines": { + "node": ">= 0.8.15" + } + }, "node_modules/robust-predicates": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz", @@ -3506,6 +3711,15 @@ "node": ">=0.10.0" } }, + "node_modules/specificity": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz", + "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==", + "license": "MIT", + "bin": { + "specificity": "bin/specificity" + } + }, "node_modules/sql.js": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/sql.js/-/sql.js-1.14.1.tgz", @@ -3519,6 +3733,16 @@ "dev": true, "license": "MIT" }, + "node_modules/stackblur-canvas": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz", + "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=0.1.14" + } + }, "node_modules/std-env": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz", @@ -3538,6 +3762,50 @@ ], "license": "MIT" }, + "node_modules/svg-pathdata": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz", + "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/svg2pdf.js": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/svg2pdf.js/-/svg2pdf.js-2.7.0.tgz", + "integrity": "sha512-nXK4Wx28H0KtOktanm5nsphl1KMEoLNMelAT/776qxPAj9DshwYcqgdpKuBnY1nrcYOriQFHVQLE4tIag+aDJA==", + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "font-family-papandreou": "^0.2.0-patch1", + "specificity": "^0.4.1", + "svgpath": "^2.3.0" + }, + "peerDependencies": { + "jspdf": "^4.0.0 || ^3.0.0 || ^2.0.0" + } + }, + "node_modules/svgpath": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/svgpath/-/svgpath-2.6.0.tgz", + "integrity": "sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==", + "license": "MIT", + "funding": { + "url": "https://github.com/fontello/svg2ttf?sponsor=1" + } + }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "license": "MIT", + "optional": true, + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/tinybench": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", @@ -3702,6 +3970,16 @@ "punycode": "^2.1.0" } }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "license": "MIT", + "optional": true, + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/vite": { "version": "8.0.13", "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.13.tgz", diff --git a/package.json b/package.json index 0f04ec1..e4cf52e 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "name": "keybpmmap", "private": true, - "version": "0.1.0", + "version": "0.15.0", "type": "module", "scripts": { "dev": "vite", + "devhost": "vite --host", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview", @@ -13,9 +14,11 @@ "dependencies": { "d3": "^7.9.0", "fast-xml-parser": "^5.8.0", + "jspdf": "^4.2.1", "react": "^19.2.6", "react-dom": "^19.2.6", - "sql.js": "^1.14.1" + "sql.js": "^1.14.1", + "svg2pdf.js": "^2.7.0" }, "devDependencies": { "@eslint/js": "^10.0.1", diff --git a/src/App.tsx b/src/App.tsx index 676a07d..08e53e9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,7 +13,7 @@ import { summarizeTracks, } from './lib/analysis' import { CAMELOT_KEYS, formatKey, type KeyRepresentation } from './lib/camelot' -import { downloadSvgAsPng } from './lib/exportSvg' +import { downloadSvgAsPdf, downloadSvgAsPng } from './lib/exportSvg' import { loadLibraryFromFile } from './lib/libraryLoader' import { createMockLibrary } from './lib/mockData' import { @@ -772,11 +772,17 @@ function App() { const exportChart = async ( svgElement: SVGSVGElement | null, fileName: string, + format: 'png' | 'pdf', ) => { if (!svgElement) { return } + if (format === 'pdf') { + await downloadSvgAsPdf(svgElement, fileName) + return + } + await downloadSvgAsPng(svgElement, fileName) } @@ -875,7 +881,7 @@ function App() {
  • Reads Traktor collection.nml files and their backups locally in the browser.
  • Reads Rekordbox XML exports locally in the browser.
  • Understands Engine DJ, Traktor, and Rekordbox playlist relationships.
    • -
  • Exports both charts as PNG snapshots.
    • +
  • Exports both charts as PNG and PDF snapshots.
    • Find my music and socials: @@ -1575,10 +1581,17 @@ function App() { +
    exportChart(heatmapRef.current, 'keybpmmap-heatmap.png')} + onClick={() => exportChart(heatmapRef.current, 'keybpmmap-heatmap.png', 'png')} > Export PNG + ( ({ bands, cells, keys, legendMaxCount, formatKeyLabel, selectedCellId, onSelect }, ref) => { @@ -56,13 +56,6 @@ const HeatmapChart = forwardRef( role="img" aria-label="BPM by key heatmap" > - - - {PLASMA_GRADIENT_STOPS.map((stop) => ( - - ))} - - {cells.map((cell) => { @@ -130,7 +123,21 @@ const HeatmapChart = forwardRef( Tracks in cell - + {Array.from({ length: LEGEND_SEGMENT_COUNT }, (_, index) => { + const segmentWidth = LEGEND_WIDTH / LEGEND_SEGMENT_COUNT + const x = index * segmentWidth + + return ( + + ) + })} 1 {legendMaxCount} diff --git a/src/components/PolarDensityChart.tsx b/src/components/PolarDensityChart.tsx index ecc1a79..c1a951e 100644 --- a/src/components/PolarDensityChart.tsx +++ b/src/components/PolarDensityChart.tsx @@ -2,7 +2,6 @@ import { arc, scaleSequential } from 'd3' import { interpolatePlasma } from 'd3-scale-chromatic' import { forwardRef, useMemo } from 'react' import type { BpmBand, DensityCell } from '../types' -import { PLASMA_GRADIENT_STOPS } from './plasmaLegend' interface PolarDensityChartProps { bands: BpmBand[] @@ -29,6 +28,7 @@ const BAND_LABEL_FONT_MAX = 12.5 const BAND_LABEL_REFERENCE_RING_HEIGHT = 18 const LEGEND_WIDTH = 180 const LEGEND_HEIGHT = 12 +const LEGEND_SEGMENT_COUNT = 90 const PolarDensityChart = forwardRef( ({ bands, cells, keys, legendMaxCount, formatKeyLabel, selectedCellId, onSelect }, ref) => { @@ -69,13 +69,6 @@ const PolarDensityChart = forwardRef( role="img" aria-label="Polar harmonic density map" > - - - {PLASMA_GRADIENT_STOPS.map((stop) => ( - - ))} - - {bands.map((band, index) => ( @@ -148,7 +141,21 @@ const PolarDensityChart = forwardRef( Tracks in cell - + {Array.from({ length: LEGEND_SEGMENT_COUNT }, (_, index) => { + const segmentWidth = LEGEND_WIDTH / LEGEND_SEGMENT_COUNT + const x = index * segmentWidth + + return ( + + ) + })} 1 {legendMaxCount} diff --git a/src/lib/exportSvg.ts b/src/lib/exportSvg.ts index 35cf842..7898910 100644 --- a/src/lib/exportSvg.ts +++ b/src/lib/exportSvg.ts @@ -1,19 +1,58 @@ +import { jsPDF } from 'jspdf' +import 'svg2pdf.js' + export async function downloadSvgAsPng( svgElement: SVGSVGElement, fileName: string, ): Promise { - const clonedSvg = svgElement.cloneNode(true) as SVGSVGElement - inlineTextStyles(svgElement, clonedSvg) + const { canvas, url } = await renderSvgToCanvas(svgElement) + + try { + const downloadUrl = canvas.toDataURL('image/png') + triggerDownload(downloadUrl, fileName) + } finally { + URL.revokeObjectURL(url) + } +} + +export async function downloadSvgAsPdf( + svgElement: SVGSVGElement, + fileName: string, +): Promise { + const { clonedSvg, width, height } = cloneSvgForExport(svgElement) + let downloadUrl: string | null = null + + try { + const pdf = new jsPDF({ + compress: true, + format: [width, height], + orientation: width > height ? 'landscape' : 'portrait', + unit: 'pt', + }) + + await pdf.svg(clonedSvg, { height, width, x: 0, y: 0 }) + + const pdfBuffer = pdf.output('arraybuffer') + const pdfBlob = new Blob([pdfBuffer], { type: 'application/pdf' }) + downloadUrl = URL.createObjectURL(pdfBlob) + triggerDownload(downloadUrl, fileName) + } finally { + if (downloadUrl) { + URL.revokeObjectURL(downloadUrl) + } + } +} + +async function renderSvgToCanvas( + svgElement: SVGSVGElement, +): Promise<{ canvas: HTMLCanvasElement; url: string }> { + const { clonedSvg, height, width } = cloneSvgForExport(svgElement) const serializer = new XMLSerializer() const source = serializer.serializeToString(clonedSvg) const blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' }) const url = URL.createObjectURL(blob) - try { const image = await loadImage(url) - const viewBox = svgElement.viewBox.baseVal - const width = viewBox.width || svgElement.clientWidth || 1200 - const height = viewBox.height || svgElement.clientHeight || 800 const canvas = document.createElement('canvas') canvas.width = width canvas.height = height @@ -27,16 +66,35 @@ export async function downloadSvgAsPng( context.fillRect(0, 0, width, height) context.drawImage(image, 0, 0, width, height) - const downloadUrl = canvas.toDataURL('image/png') - const anchor = document.createElement('a') - anchor.href = downloadUrl - anchor.download = fileName - anchor.click() - } finally { + return { canvas, url } + } catch (error) { URL.revokeObjectURL(url) + throw error } } +function cloneSvgForExport( + svgElement: SVGSVGElement, +): { clonedSvg: SVGSVGElement; height: number; width: number } { + const clonedSvg = svgElement.cloneNode(true) as SVGSVGElement + const { height, width } = getSvgExportDimensions(svgElement) + + clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg') + clonedSvg.setAttribute('width', width.toString()) + clonedSvg.setAttribute('height', height.toString()) + inlineTextStyles(svgElement, clonedSvg) + + return { clonedSvg, height, width } +} + +function getSvgExportDimensions(svgElement: SVGSVGElement): { height: number; width: number } { + const viewBox = svgElement.viewBox.baseVal + const width = Math.max(1, Math.round(viewBox.width || svgElement.clientWidth || 1200)) + const height = Math.max(1, Math.round(viewBox.height || svgElement.clientHeight || 800)) + + return { height, width } +} + function inlineTextStyles(sourceSvg: SVGSVGElement, targetSvg: SVGSVGElement): void { const sourceTextNodes = sourceSvg.querySelectorAll('text') const targetTextNodes = targetSvg.querySelectorAll('text') @@ -77,3 +135,10 @@ function loadImage(src: string): Promise { image.src = src }) } + +function triggerDownload(href: string, fileName: string): void { + const anchor = document.createElement('a') + anchor.href = href + anchor.download = fileName + anchor.click() +}