/*
* SPDX-FileCopyrightText: 2024 The Refinery Authors
*
* SPDX-License-Identifier: EPL-2.0
*/
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import ContrastIcon from '@mui/icons-material/Contrast';
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';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import FormControlLabel from '@mui/material/FormControlLabel';
import Slider from '@mui/material/Slider';
import Stack from '@mui/material/Stack';
import Switch from '@mui/material/Switch';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Typography from '@mui/material/Typography';
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 type GraphStore from '../GraphStore';
import SlideInPanel from '../SlideInPanel';
import exportDiagram from './exportDiagram';
const log = getLogger('graph.ExportPanel');
const SwitchButtonGroup = styled(ToggleButtonGroup, {
name: 'ExportPanel-SwitchButtonGroup',
})(({ theme }) => ({
marginTop: theme.spacing(2),
marginInline: theme.spacing(2),
minWidth: '260px',
'.MuiToggleButton-root': {
width: '100%',
fontSize: '1rem',
lineHeight: '1.5',
},
'& svg': {
margin: '0 6px 0 0',
},
}));
const AutoThemeMessage = styled(Typography, {
name: 'ExportPanel-AutoThemeMessage',
})(({ theme }) => ({
width: '260px',
marginInline: theme.spacing(2),
}));
function getLabel(value: number): string {
return `${value}%`;
}
const marks = [100, 200, 300, 400].map((value) => ({
value,
label: (
{getLabel(value)}
),
}));
function ExportPanel({
graph,
svgContainer,
dialog,
}: {
graph: GraphStore;
svgContainer: HTMLElement | undefined;
dialog: boolean;
}): JSX.Element {
const { exportSettingsStore } = useRootStore();
const icon = useCallback(
(show: boolean) =>
show && !dialog ? : ,
[dialog],
);
const { format } = exportSettingsStore;
const emptyGraph = graph.semantics.nodes.length === 0;
const buttons = useCallback(
(close: () => void) => (
<>
}
disabled={emptyGraph}
onClick={() => {
exportDiagram(svgContainer, graph, exportSettingsStore, 'download')
.then(close)
.catch((error) => {
log.error('Failed to download diagram', error);
});
}}
>
Download
{'write' in navigator.clipboard && format === 'png' && (
}
disabled={emptyGraph}
onClick={() => {
exportDiagram(svgContainer, graph, exportSettingsStore, 'copy')
.then(close)
.catch((error) => {
log.error('Failed to copy diagram', error);
});
}}
>
Copy
)}
>
),
[svgContainer, graph, exportSettingsStore, format, emptyGraph],
);
return (
exportSettingsStore.setFormat('svg')}
>
SVG
exportSettingsStore.setFormat('pdf')}
>
PDF
exportSettingsStore.setFormat('png')}
>
PNG
exportSettingsStore.setTheme('light')}
>
Light
exportSettingsStore.setTheme('dark')}
>
Dark
{exportSettingsStore.canSetDynamicTheme && (
exportSettingsStore.setTheme('dynamic')}
>
Auto
)}
{exportSettingsStore.canChangeTransparency && (
exportSettingsStore.toggleTransparent()}
/>
}
label="Transparent background"
/>
)}
{exportSettingsStore.canEmbedFonts && (
exportSettingsStore.toggleEmbedFonts()}
/>
}
label={
Embed fonts
{exportSettingsStore.format === 'pdf' ? (
<>+20 kB fully embedded>
) : (
<>+75 kB, only supported in browsers>
)}
}
/>
)}
{exportSettingsStore.theme === 'dynamic' && (
<>
For embedding into HTML directly
Set data-theme="dark"
on a containing element
to use a dark theme
>
)}
{exportSettingsStore.canScale && (
{
if (typeof value === 'number') {
exportSettingsStore.setScale(value);
}
}}
/>
)}
);
}
export default observer(ExportPanel);