From 69b2ecd0b8d5db8b1d6ba85170ad7cb6df658133 Mon Sep 17 00:00:00 2001
From: Fran Lopez <franciscolopto@gmail.com>
Date: Thu, 1 Aug 2024 13:22:32 +0200
Subject: [PATCH] refactor all shape front containers

---
 .../front-containers/browserwindow-shape.tsx  | 47 ++++++++++++-------
 .../front-containers/tablet-shape.tsx         | 33 ++++++++-----
 2 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/src/common/components/front-containers/browserwindow-shape.tsx b/src/common/components/front-containers/browserwindow-shape.tsx
index f27e61dc..24728245 100644
--- a/src/common/components/front-containers/browserwindow-shape.tsx
+++ b/src/common/components/front-containers/browserwindow-shape.tsx
@@ -1,20 +1,29 @@
 import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
-import { Group, Rect, Circle, Text } from 'react-konva';
 import { ShapeProps } from '../front-components/shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Circle, Text } from 'react-konva';
+
+const browserWindowShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 200,
+  minHeight: 150,
+  maxWidth: 1000,
+  maxHeight: 1000,
+  defaultWidth: 400,
+  defaultHeight: 300,
+};
 
 export const getBrowserWindowShapeSizeRestrictions =
-  (): ShapeSizeRestrictions => ({
-    minWidth: 200,
-    minHeight: 150,
-    maxWidth: 1000,
-    maxHeight: 1000,
-    defaultWidth: 400,
-    defaultHeight: 300,
-  });
+  (): ShapeSizeRestrictions => browserWindowShapeSizeRestrictions;
 
 export const BrowserWindowShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        browserWindowShapeSizeRestrictions,
+        width,
+        height
+      );
     const margin = 10;
     const titleBarHeight = 30;
     const buttonRadius = 6;
@@ -25,8 +34,8 @@ export const BrowserWindowShape = forwardRef<any, ShapeProps>(
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'browser')}
       >
@@ -34,8 +43,8 @@ export const BrowserWindowShape = forwardRef<any, ShapeProps>(
         <Rect
           x={margin}
           y={margin}
-          width={width - 2 * margin}
-          height={height - 2 * margin}
+          width={restrictedWidth}
+          height={restrictedHeight}
           cornerRadius={15}
           stroke="black"
           strokeWidth={2}
@@ -45,7 +54,7 @@ export const BrowserWindowShape = forwardRef<any, ShapeProps>(
         <Rect
           x={margin}
           y={margin}
-          width={width - 2 * margin}
+          width={restrictedWidth}
           height={titleBarHeight}
           cornerRadius={10}
           stroke="black"
@@ -80,9 +89,9 @@ export const BrowserWindowShape = forwardRef<any, ShapeProps>(
         {/* Content area */}
         <Rect
           x={margin * 2}
-          y={margin + titleBarHeight + 7}
-          width={width - 4 * margin}
-          height={height - titleBarHeight - 3 * margin - 10}
+          y={margin + 40}
+          width={restrictedWidth - 20}
+          height={restrictedHeight - 50}
           stroke="black"
           strokeWidth={1}
           fill="white"
@@ -91,7 +100,7 @@ export const BrowserWindowShape = forwardRef<any, ShapeProps>(
         <Rect
           x={margin * 3}
           y={margin + titleBarHeight + 15}
-          width={width - 6 * margin}
+          width={restrictedWidth - 40}
           height={urlBarHeight}
           cornerRadius={5}
           stroke="black"
@@ -101,6 +110,8 @@ export const BrowserWindowShape = forwardRef<any, ShapeProps>(
         <Text
           x={margin * 3 + 5}
           y={margin + titleBarHeight + 20}
+          width={restrictedWidth - 50}
+          height={restrictedHeight - 50}
           text="https://example.com"
           fontFamily="Comic Sans MS, cursive"
           fontSize={12}
diff --git a/src/common/components/front-containers/tablet-shape.tsx b/src/common/components/front-containers/tablet-shape.tsx
index 0785315a..b85415b7 100644
--- a/src/common/components/front-containers/tablet-shape.tsx
+++ b/src/common/components/front-containers/tablet-shape.tsx
@@ -2,23 +2,32 @@ import { forwardRef } from 'react';
 import { Group, Rect, Circle } from 'react-konva';
 import { ShapeProps } from '../front-components/shape.model';
 import { ShapeSizeRestrictions } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 
-export const getTabletShapeSizeRestrictions = (): ShapeSizeRestrictions => ({
+const tabletShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 200,
   minHeight: 150,
   maxWidth: 1000,
   maxHeight: 1000,
   defaultWidth: 400,
   defaultHeight: 300,
-});
+};
+
+export const getTabletShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  tabletShapeSizeRestrictions;
 
 export const TabletShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        tabletShapeSizeRestrictions,
+        width,
+        height
+      );
     const margin = 20;
     const screenMargin = 15;
     const cameraPadding = 3;
     const buttonPadding = 3;
-
     const cameraRadius = 3;
     const buttonRadius = 5;
 
@@ -27,8 +36,8 @@ export const TabletShape = forwardRef<any, ShapeProps>(
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'tablet')}
       >
@@ -36,8 +45,8 @@ export const TabletShape = forwardRef<any, ShapeProps>(
         <Rect
           x={margin}
           y={margin}
-          width={width - 2 * margin}
-          height={height - 2 * margin}
+          width={restrictedWidth - 2 * margin}
+          height={restrictedHeight - 2 * margin}
           cornerRadius={20}
           stroke="black"
           strokeWidth={2}
@@ -48,8 +57,8 @@ export const TabletShape = forwardRef<any, ShapeProps>(
         <Rect
           x={margin + screenMargin}
           y={margin + screenMargin}
-          width={width - 2 * margin - 2 * screenMargin}
-          height={height - 2 * margin - 2 * screenMargin}
+          width={restrictedWidth - 2 * margin - 2 * screenMargin}
+          height={restrictedHeight - 2 * margin - 2 * screenMargin}
           cornerRadius={10}
           stroke="black"
           strokeWidth={1}
@@ -59,7 +68,7 @@ export const TabletShape = forwardRef<any, ShapeProps>(
         {/* Cámara frontal */}
         <Circle
           x={margin + cameraPadding + cameraRadius}
-          y={height / 2}
+          y={restrictedHeight / 2}
           radius={cameraRadius}
           stroke="black"
           strokeWidth={1}
@@ -68,8 +77,8 @@ export const TabletShape = forwardRef<any, ShapeProps>(
 
         {/* Botón de inicio */}
         <Circle
-          x={width - margin - buttonPadding - buttonRadius}
-          y={height / 2}
+          x={restrictedWidth - margin - buttonPadding - buttonRadius}
+          y={restrictedHeight / 2}
           radius={buttonRadius}
           stroke="black"
           strokeWidth={1.5}