@jbrowse/plugin-circular-view 4.1.3 → 4.1.4

package/esm/CircularView/components/ExportSvgDialog.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession, useLocalStorage } from '@jbrowse/core/util';
-import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
-function LoadingMessage() {
-    return (_jsxs("div", { children: [_jsx(CircularProgress, { size: 20, style: { marginRight: 20 } }), _jsx(Typography, { display: "inline", children: "Creating SVG" })] }));
+import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
+function LoadingMessage({ format }) {
+    return (_jsxs("div", { children: [_jsx(CircularProgress, { size: 20, style: { marginRight: 20 } }), _jsxs(Typography, { display: "inline", children: ["Creating ", format.toUpperCase()] })] }));
 }
 function TextField2({ children, ...rest }) {
     return (_jsx("div", { children: _jsx(TextField, { ...rest, children: children }) }));
@@ -18,11 +18,22 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
+    const [format, setFormat] = useSvgLocal('format', 'svg');
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
     const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingMessage, {})) : null, _jsx(TextField2, { helperText: "filename", value: filename, onChange: event => {
-                            setFilename(event.target.value);
-                        } }), session.allThemes ? (_jsx(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
+    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Export image", children: [_jsxs(DialogContent, { children: [error ? (_jsx(ErrorMessage, { error: error })) : loading ? (_jsx(LoadingMessage, { format: format })) : null, _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(TextField, { helperText: "filename", value: filename, onChange: event => {
+                                    setFilename(event.target.value);
+                                } }), _jsxs(ToggleButtonGroup, { value: format, exclusive: true, onChange: (_event, value) => {
+                                    if (value) {
+                                        setFormat(value);
+                                        if (filename.endsWith('.svg') && value === 'png') {
+                                            setFilename(filename.replace(/\.svg$/, '.png'));
+                                        }
+                                        else if (filename.endsWith('.png') && value === 'svg') {
+                                            setFilename(filename.replace(/\.png$/, '.svg'));
+                                        }
+                                    }
+                                }, size: "small", children: [_jsx(ToggleButton, { value: "svg", children: "SVG" }), _jsx(ToggleButton, { value: "png", children: "PNG" })] })] }), session.allThemes ? (_jsx(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
                             setThemeName(event.target.value);
                         }, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: rasterizeLayers, onChange: () => {
                                 setRasterizeLayers(val => !val);
@@ -34,6 +45,7 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                             try {
                                 await model.exportSvg({
                                     rasterizeLayers,
+                                    format,
                                     filename,
                                     themeName,
                                 });

package/esm/CircularView/model.d.ts

@@ -11,6 +11,7 @@ export interface CircularViewInit {
 }
 export interface ExportSvgOptions {
     rasterizeLayers?: boolean;
+    format?: 'svg' | 'png';
     filename?: string;
     Wrapper?: React.FC<{
         children: React.ReactNode;

package/esm/CircularView/model.js

@@ -337,7 +337,38 @@ function stateModelFactory(pluginManager) {
             const { renderToSvg } = await import("./svgcomponents/SVGCircularView.js");
             const html = await renderToSvg(self, opts);
             const { saveAs } = await import('file-saver-es');
-            saveAs(new Blob([html], { type: 'image/svg+xml' }), opts.filename || 'image.svg');
+            if (opts.format === 'png') {
+                const img = new Image();
+                const svgBlob = new Blob([html], { type: 'image/svg+xml' });
+                const url = URL.createObjectURL(svgBlob);
+                await new Promise((resolve, reject) => {
+                    img.onload = () => {
+                        const canvas = document.createElement('canvas');
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+                        const ctx = canvas.getContext('2d');
+                        ctx.drawImage(img, 0, 0);
+                        URL.revokeObjectURL(url);
+                        canvas.toBlob(blob => {
+                            if (blob) {
+                                saveAs(blob, opts.filename || 'image.png');
+                                resolve();
+                            }
+                            else {
+                                reject(new Error(`Failed to create PNG. The image may be too large (${img.width}x${img.height}). Try reducing the view size or use SVG format.`));
+                            }
+                        }, 'image/png');
+                    };
+                    img.onerror = () => {
+                        URL.revokeObjectURL(url);
+                        reject(new Error('Failed to load SVG for PNG conversion'));
+                    };
+                    img.src = url;
+                });
+            }
+            else {
+                saveAs(new Blob([html], { type: 'image/svg+xml' }), opts.filename || 'image.svg');
+            }
         },
     }))
         .actions(self => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-circular-view",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "type": "module",
   "description": "JBrowse 2 circular view",
   "keywords": [
@@ -22,13 +22,13 @@
   ],
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^5.5.0",
-    "@mui/icons-material": "^7.3.7",
-    "@mui/material": "^7.3.7",
+    "@mui/icons-material": "^7.3.8",
+    "@mui/material": "^7.3.8",
     "@types/file-saver-es": "^2.0.3",
     "file-saver-es": "^2.0.5",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "@jbrowse/core": "^4.1.3"
+    "@jbrowse/core": "^4.1.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0",