Merge pull request #523 from Lemoncode/feature/fix-thumbnail

fix
Lemoncode · Nov 7, 2024 · 4fca9ce · 4fca9ce
2 parents a9fc289 + 4b30674
commit 4fca9ce
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 35 deletions.
diff --git a/src/pods/thumb-pages/components/thumb-page.business.spec.ts b/src/pods/thumb-pages/components/thumb-page.business.spec.ts
diff --git a/src/pods/thumb-pages/components/thumb-page.business.ts b/src/pods/thumb-pages/components/thumb-page.business.ts
@@ -1,5 +1,24 @@
-import { CanvasBounds } from '@/pods/toolbar/components/export-button/export-button.utils';
+import { ShapeModel } from '@/core/model';
+import { calculateCanvasBounds } from '@/pods/toolbar/components/export-button/export-button.utils';
 
+export const calculateScaleBasedOnBounds = (shapes: ShapeModel[]) => {
+  const bounds = calculateCanvasBounds(shapes);
+  const canvasSizeRough = {
+    width: bounds.x + bounds.width,
+    height: bounds.y + bounds.height,
+  };
+
+  const canvasSize = {
+    width: canvasSizeRough.width > 800 ? canvasSizeRough.width : 800,
+    height: canvasSizeRough.height > 600 ? canvasSizeRough.height : 600,
+  };
+
+  const scaleFactorX = 200 / canvasSize.width;
+  const scaleFactorY = 180 / canvasSize.height;
+  return Math.min(scaleFactorX, scaleFactorY);
+};
+
+/*
 export const calculateScaleBasedOnBounds = (
   canvasBounds: CanvasBounds
 ): number => {
@@ -16,4 +35,4 @@ export const calculateScaleBasedOnBounds = (
   const scaleFactorX = 250 / newCanvasBounds.width;
   const scaleFactorY = 180 / newCanvasBounds.height;
   return Math.min(scaleFactorX, scaleFactorY);
-};
+};*/
diff --git a/src/pods/thumb-pages/components/thumb-page.tsx b/src/pods/thumb-pages/components/thumb-page.tsx
@@ -1,7 +1,6 @@
 import { ShapeRefs } from '@/core/model';
 import { useCanvasContext } from '@/core/providers';
 import { renderShapeComponent } from '@/pods/canvas/shape-renderer';
-import { calculateCanvasBounds } from '@/pods/toolbar/components/export-button/export-button.utils';
 import { KonvaEventObject } from 'konva/lib/Node';
 import { createRef, useRef } from 'react';
 import { Layer, Stage } from 'react-konva';
@@ -24,9 +23,7 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
   const shapes = page.shapes;
   const fakeShapeRefs = useRef<ShapeRefs>({});
 
-  const bounds = calculateCanvasBounds(shapes);
-
-  const finalScale = calculateScaleBasedOnBounds(bounds);
+  const finalScale = calculateScaleBasedOnBounds(shapes);
 
   const {
     showContextMenu,