From 6362821e6f407cace1862fbc8ba34bf8c0dae97d Mon Sep 17 00:00:00 2001 From: oleojake Date: Wed, 27 Nov 2024 18:20:43 +0100 Subject: [PATCH 1/2] #583-add-filename-to-export-image --- .../export-button/export-button.tsx | 44 +++++------------ .../export-button/export-button.utils.ts | 48 +++++++++++++++++++ 2 files changed, 59 insertions(+), 33 deletions(-) diff --git a/src/pods/toolbar/components/export-button/export-button.tsx b/src/pods/toolbar/components/export-button/export-button.tsx index 698ffcc5..1d1b05f6 100644 --- a/src/pods/toolbar/components/export-button/export-button.tsx +++ b/src/pods/toolbar/components/export-button/export-button.tsx @@ -1,40 +1,17 @@ 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, + resetScale, + applyFiltersToImages, +} 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 +23,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,7 +31,8 @@ export const ExportButton = () => { pixelRatio: 2, }); - createDownloadLink(dataURL); + const exportFileName = buildExportFileName(fileName, getActivePageName()); + createDownloadLink(dataURL, exportFileName); } }; diff --git a/src/pods/toolbar/components/export-button/export-button.utils.ts b/src/pods/toolbar/components/export-button/export-button.utils.ts index a84a5448..ec9a9173 100644 --- a/src/pods/toolbar/components/export-button/export-button.utils.ts +++ b/src/pods/toolbar/components/export-button/export-button.utils.ts @@ -1,4 +1,5 @@ import { ShapeModel } from '@/core/model'; +import Konva from 'konva'; export interface CanvasBounds { x: number; @@ -51,3 +52,50 @@ export const calculateCanvasBounds = (shapes: ShapeModel[]): CanvasBounds => { 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); +}; + +export const resetScale = (stage: Konva.Stage) => { + stage.scale({ x: 1, y: 1 }); +}; + +export 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, + }); + } + }); +}; From f5d22d1d8bd7b37a1ac4d395bdb1872b6a939e82 Mon Sep 17 00:00:00 2001 From: oleojake Date: Wed, 27 Nov 2024 18:38:18 +0100 Subject: [PATCH 2/2] #583 fix unit tests --- .../export-button/export-button.tsx | 21 +++++++++++++++++-- .../export-button/export-button.utils.ts | 19 ----------------- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/pods/toolbar/components/export-button/export-button.tsx b/src/pods/toolbar/components/export-button/export-button.tsx index 1d1b05f6..adf00839 100644 --- a/src/pods/toolbar/components/export-button/export-button.tsx +++ b/src/pods/toolbar/components/export-button/export-button.tsx @@ -5,10 +5,9 @@ import { calculateCanvasBounds, buildExportFileName, createDownloadLink, - resetScale, - applyFiltersToImages, } from './export-button.utils'; import { ToolbarButton } from '../toolbar-button'; +import Konva from 'konva'; export const ExportButton = () => { const { stageRef, shapes, fileName, getActivePageName } = useCanvasContext(); @@ -36,6 +35,24 @@ export const ExportButton = () => { } }; + 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 ( { link.click(); document.body.removeChild(link); }; - -export const resetScale = (stage: Konva.Stage) => { - stage.scale({ x: 1, y: 1 }); -}; - -export 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, - }); - } - }); -};