@jbrowse/plugin-breakpoint-split-view 4.1.3 → 4.1.5

package/esm/BreakpointSplitView/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 }) }));
@@ -19,12 +19,23 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     const [showGridlines, setShowGridlines] = useSvgLocal('gridlines', false);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState();
+    const [format, setFormat] = useSvgLocal('format', 'svg');
     const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
     const [trackLabels, setTrackLabels] = useSvgLocal('tracklabels', 'offset');
     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);
-                        } }), _jsxs(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, 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" })] })] }), _jsxs(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
                             setTrackLabels(event.target.value);
                         }, children: [_jsx(MenuItem, { value: "offset", children: "Offset" }), _jsx(MenuItem, { value: "overlay", children: "Overlay" }), _jsx(MenuItem, { value: "left", children: "Left" }), _jsx(MenuItem, { value: "none", children: "None" })] }), _jsx("br", {}), session.allThemes ? (_jsx(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
                             setThemeName(event.target.value);
@@ -40,6 +51,7 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                             try {
                                 await model.exportSvg({
                                     rasterizeLayers,
+                                    format,
                                     filename,
                                     trackLabels,
                                     themeName,

package/esm/BreakpointSplitView/model.d.ts

@@ -92,6 +92,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly trackHeightsWithResizeHandles: number;
         readonly height: number;
         readonly totalBp: number;
+        getNonElidedRegionCount(bpPerPx: number): number;
+        getInterRegionPaddingPx(bpPerPx: number): number;
         readonly maxBpPerPx: number;
         readonly minBpPerPx: number;
         readonly error: unknown;
@@ -150,7 +152,6 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
             end: number;
         }[];
         horizontalScroll(distance: number): number;
-        center(): void;
         showAllRegions(): void;
         showAllRegionsInAssembly(assemblyName?: string): void;
         setDraggingTrackId(idx?: string): void;
@@ -457,6 +458,8 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
         readonly trackHeightsWithResizeHandles: number;
         readonly height: number;
         readonly totalBp: number;
+        getNonElidedRegionCount(bpPerPx: number): number;
+        getInterRegionPaddingPx(bpPerPx: number): number;
         readonly maxBpPerPx: number;
         readonly minBpPerPx: number;
         readonly error: unknown;
@@ -515,7 +518,6 @@ export default function stateModelFactory(pluginManager: PluginManager): import(
             end: number;
         }[];
         horizontalScroll(distance: number): number;
-        center(): void;
         showAllRegions(): void;
         showAllRegionsInAssembly(assemblyName?: string): void;
         setDraggingTrackId(idx?: string): void;

package/esm/BreakpointSplitView/model.js

@@ -42,7 +42,38 @@ export default function stateModelFactory(pluginManager) {
             const { renderToSvg } = await import("./svgcomponents/SVGBreakpointSplitView.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');
+            }
         },
     }))
         .views(self => ({

package/esm/BreakpointSplitView/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-breakpoint-split-view",
-  "version": "4.1.3",
+  "version": "4.1.5",
   "type": "module",
   "description": "JBrowse 2 breakpoint detail split view",
   "keywords": [
@@ -23,14 +23,14 @@
   "dependencies": {
     "@gmod/vcf": "^7.0.0",
     "@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/plugin-linear-genome-view": "^4.1.3",
-    "@jbrowse/core": "^4.1.3"
+    "@jbrowse/core": "^4.1.5",
+    "@jbrowse/plugin-linear-genome-view": "^4.1.5"
   },
   "peerDependencies": {
     "react": ">=16.8.4",