Merge branch 'dev' into fix/increase-bounding-box-width-on-font-resize

Lemoncode · Nov 28, 2024 · edfc57e · edfc57e
2 parents df04867 + 3f0cb33
commit edfc57e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 32 deletions.
diff --git 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,18 +22,37 @@ 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,
         height: bounds.height,
         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 (
     <ToolbarButton
       onClick={handleExport}

diff --git a/src/pods/toolbar/components/export-button/export-button.utils.ts b/src/pods/toolbar/components/export-button/export-button.utils.ts
@@ -51,3 +51,32 @@ 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);
+};