diff --git a/src/pods/toolbar/components/export-button/export-button.tsx b/src/pods/toolbar/components/export-button/export-button.tsx index 698ffcc5..adf00839 100644 --- a/src/pods/toolbar/components/export-button/export-button.tsx +++ b/src/pods/toolbar/components/export-button/export-button.tsx @@ -1,40 +1,16 @@ import { ExportIcon } from '@/common/components/icons/export-icon.component'; import { useCanvasContext } from '@/core/providers'; import classes from '@/pods/toolbar/toolbar.pod.module.css'; -import { Stage } from 'konva/lib/Stage'; -import { calculateCanvasBounds } from './export-button.utils'; +import { + calculateCanvasBounds, + buildExportFileName, + createDownloadLink, +} from './export-button.utils'; import { ToolbarButton } from '../toolbar-button'; import Konva from 'konva'; export const ExportButton = () => { - const { stageRef, shapes } = useCanvasContext(); - - const createDownloadLink = (dataURL: string) => { - const link = document.createElement('a'); - link.href = dataURL; - link.download = 'canvas.png'; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - }; - - const resetScale = (stage: Stage) => { - stage.scale({ x: 1, y: 1 }); - }; - - const applyFiltersToImages = (stage: Stage) => { - stage.find('Image').forEach(node => { - if (node.filters()?.includes(Konva.Filters.Grayscale)) { - node.cache({ - x: 0, - y: 0, - width: node.width(), - height: node.height(), - pixelRatio: 2, - }); - } - }); - }; + const { stageRef, shapes, fileName, getActivePageName } = useCanvasContext(); const handleExport = () => { if (stageRef.current) { @@ -46,7 +22,7 @@ export const ExportButton = () => { const bounds = calculateCanvasBounds(shapes); const dataURL = clonedStage.toDataURL({ - mimeType: 'image/png', // Swap to 'image/jpeg' if necessary + mimeType: 'image/png', x: bounds.x, y: bounds.y, width: bounds.width, @@ -54,10 +30,29 @@ export const ExportButton = () => { pixelRatio: 2, }); - createDownloadLink(dataURL); + const exportFileName = buildExportFileName(fileName, getActivePageName()); + createDownloadLink(dataURL, exportFileName); } }; + const resetScale = (stage: Konva.Stage) => { + stage.scale({ x: 1, y: 1 }); + }; + + const applyFiltersToImages = (stage: Konva.Stage) => { + stage.find('Image').forEach(node => { + if (node.filters()?.includes(Konva.Filters.Grayscale)) { + node.cache({ + x: 0, + y: 0, + width: node.width(), + height: node.height(), + pixelRatio: 2, + }); + } + }); + }; + return ( { return canvasBounds; }; + +export const buildExportFileName = ( + fileName: string, + activePageName: string +): string => { + // Remove extension and replace spaces with dashes from file name + let baseFileName = + fileName === '' + ? 'new-document' + : fileName.substring(0, fileName.lastIndexOf('.')) || fileName; + baseFileName = baseFileName.trim().replace(/\s+/g, '-'); + + // Get the active page name and replace spaces with dashes + const pageName = activePageName + .toLocaleLowerCase() + .trim() + .replace(/\s+/g, '-'); + + return `${baseFileName}-${pageName}.png`; // Add extension jpg also available +}; + +export const createDownloadLink = (dataURL: string, fileName: string) => { + const link = document.createElement('a'); + link.href = dataURL; + link.download = fileName; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +};