From 689ae550d54a6c3e356237f8de935f3b03bf574e Mon Sep 17 00:00:00 2001
From: Fran Lopez <franciscolopto@gmail.com>
Date: Wed, 31 Jul 2024 17:18:28 +0200
Subject: [PATCH 1/3] refactor all shape front components

---
 .../front-components/button-shape.tsx         | 26 +++++++----
 .../front-components/checkbox-shape.tsx       | 46 ++++++++-----------
 .../front-components/combobox-shape.tsx       | 20 ++++----
 .../datepickerinput-shape.tsx                 | 34 +++++++++-----
 .../front-components/input-shape.tsx          |  2 +-
 .../front-components/progressbar-shape.tsx    | 42 ++++++++++-------
 .../front-components/textarea-shape.tsx       | 27 +++++++----
 .../timepickerinput-shape.tsx                 | 42 ++++++++++-------
 .../front-components/toggleswitch-shape.tsx   | 40 ++++++++++------
 .../front-containers/browserwindow-shape.tsx  |  2 +
 10 files changed, 167 insertions(+), 114 deletions(-)

diff --git a/src/common/components/front-components/button-shape.tsx b/src/common/components/front-components/button-shape.tsx
index 00d58dff..9afb71e2 100644
--- a/src/common/components/front-components/button-shape.tsx
+++ b/src/common/components/front-components/button-shape.tsx
@@ -1,34 +1,41 @@
-import { forwardRef } from 'react';
-import { Group, Rect, Text } from 'react-konva';
 import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef } from 'react';
 import { ShapeProps } from './shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Text } from 'react-konva';
 
-export const getButtonShapeSizeRestrictions = (): ShapeSizeRestrictions => ({
-  minWidth: 150,
+const buttonShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 60,
   minHeight: 50,
   maxWidth: -1,
   maxHeight: 50,
   defaultWidth: 150,
   defaultHeight: 50,
-});
+};
+
+export const getButtonShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  buttonShapeRestrictions;
 
 export const ButtonShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(buttonShapeRestrictions, width, height);
+
     return (
       <Group
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'button')}
       >
         <Rect
           x={0}
           y={0}
-          width={width}
-          height={height}
+          width={restrictedWidth}
+          height={restrictedHeight}
           cornerRadius={14}
           stroke="black"
           strokeWidth={2}
@@ -38,6 +45,7 @@ export const ButtonShape = forwardRef<any, ShapeProps>(
           x={0}
           y={20}
           width={width}
+          height={height - 20}
           text="Click Me!"
           fontFamily="Comic Sans MS, cursive"
           fontSize={15}
diff --git a/src/common/components/front-components/checkbox-shape.tsx b/src/common/components/front-components/checkbox-shape.tsx
index cb9b852a..66e4e730 100644
--- a/src/common/components/front-components/checkbox-shape.tsx
+++ b/src/common/components/front-components/checkbox-shape.tsx
@@ -1,16 +1,20 @@
+import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
-import { Group, Rect, Line, Text } from 'react-konva';
 import { ShapeProps } from './shape.model';
-import { ShapeSizeRestrictions } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Line, Text } from 'react-konva';
 
-export const getCheckboxShapeSizeRestrictions = (): ShapeSizeRestrictions => ({
-  minWidth: 150,
+const checkBoxShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 100,
   minHeight: 30,
   maxWidth: -1,
   maxHeight: 50,
-  defaultWidth: 220,
+  defaultWidth: 200,
   defaultHeight: 50,
-});
+};
+
+export const getCheckboxShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  checkBoxShapeRestrictions;
 
 const marginTick = 5;
 const boxTickWidth = 50;
@@ -18,42 +22,29 @@ const tickWidth = boxTickWidth - marginTick;
 
 export const CheckBoxShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
-    const handleClick = () => {
-      onSelected(id, 'checkbox');
-    };
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(checkBoxShapeRestrictions, width, height);
 
     return (
       <Group
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
-        onClick={handleClick}
+        onClick={() => onSelected(id, 'checkbox')}
       >
-        {/* Caja del checkbox */}
         <Rect
           x={0}
           y={0}
           width={boxTickWidth}
-          height={height}
+          height={restrictedHeight}
           cornerRadius={5}
           stroke="black"
           strokeWidth={2}
           fill="white"
         />
-
-        {/* Marca de verificación (checked) */}
-
-        {/*
-        ----------
-       |     *
-       | *  *
-       |  *
-       -----------
-      */}
-
         <Line
           points={[
             marginTick,
@@ -68,8 +59,6 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>(
           lineCap="round"
           lineJoin="round"
         />
-
-        {/* Texto */}
         <Text
           x={boxTickWidth + marginTick}
           y={height / 2}
@@ -79,7 +68,10 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>(
           fontFamily="Comic Sans MS, cursive"
           fontSize={20}
           fill="black"
+          align="left"
           verticalAlign="middle"
+          ellipsis={true}
+          wrap="none"
         />
       </Group>
     );
diff --git a/src/common/components/front-components/combobox-shape.tsx b/src/common/components/front-components/combobox-shape.tsx
index bbcea518..e567724d 100644
--- a/src/common/components/front-components/combobox-shape.tsx
+++ b/src/common/components/front-components/combobox-shape.tsx
@@ -1,26 +1,33 @@
 import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
-import { Path, Group, Text } from 'react-konva';
 import { ShapeProps } from './shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Path, Group, Text } from 'react-konva';
 
-export const getComboBoxShapeSizeRestrictions = (): ShapeSizeRestrictions => ({
+const comboBoxShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 100,
   minHeight: 50,
   maxWidth: -1,
   maxHeight: 50,
   defaultWidth: 220,
   defaultHeight: 50,
-});
+};
+
+export const getComboBoxShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  comboBoxShapeRestrictions;
 
 export const ComboBoxShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(comboBoxShapeRestrictions, width, height);
+
     return (
       <Group
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'combobox')}
       >
@@ -37,15 +44,12 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>(
           } L${width - 20},${(height + 10) / 2}`}
           fill="black"
         />
-
         {/* Combo arrow vertical line separator */}
         <Path
           data={`M${width - 40},1 L${width - 40},${height - 1}`}
           stroke="black"
           strokeWidth={2}
         />
-
-        {/* Text */}
         <Text
           x={10}
           y={(height - 25) / 2 + 5}
diff --git a/src/common/components/front-components/datepickerinput-shape.tsx b/src/common/components/front-components/datepickerinput-shape.tsx
index 95a10d7e..0dd8aa62 100644
--- a/src/common/components/front-components/datepickerinput-shape.tsx
+++ b/src/common/components/front-components/datepickerinput-shape.tsx
@@ -1,20 +1,30 @@
-import { Group, Rect, Line } from 'react-konva';
+import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
 import { ShapeProps } from './shape.model';
-import { ShapeSizeRestrictions } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Line } from 'react-konva';
+
+const datepickerInputShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 80,
+  minHeight: 50,
+  maxWidth: -1,
+  maxHeight: 50,
+  defaultWidth: 220,
+  defaultHeight: 50,
+};
 
 export const getDatepickerInputShapeSizeRestrictions =
-  (): ShapeSizeRestrictions => ({
-    minWidth: 80,
-    minHeight: 50,
-    maxWidth: -1,
-    maxHeight: 50,
-    defaultWidth: 220,
-    defaultHeight: 50,
-  });
+  (): ShapeSizeRestrictions => datepickerInputShapeRestrictions;
 
 export const DatepickerInputShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        datepickerInputShapeRestrictions,
+        width,
+        height
+      );
+
     const margin = 10;
     const separatorPadding = 15; // Extra padding for spacers
     const separator1X = width / 3 + margin;
@@ -25,8 +35,8 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'datepickerinput')}
       >
diff --git a/src/common/components/front-components/input-shape.tsx b/src/common/components/front-components/input-shape.tsx
index f250793b..ef26a65b 100644
--- a/src/common/components/front-components/input-shape.tsx
+++ b/src/common/components/front-components/input-shape.tsx
@@ -1,8 +1,8 @@
 import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
 import { ShapeProps } from './shape.model';
-import { Group, Rect, Text } from 'react-konva';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Text } from 'react-konva';
 
 const inputShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 60,
diff --git a/src/common/components/front-components/progressbar-shape.tsx b/src/common/components/front-components/progressbar-shape.tsx
index 668ca712..9d1dd76f 100644
--- a/src/common/components/front-components/progressbar-shape.tsx
+++ b/src/common/components/front-components/progressbar-shape.tsx
@@ -1,27 +1,37 @@
 import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
-import { Group, Rect } from 'react-konva';
 import { ShapeProps } from './shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect } from 'react-konva';
 
-export const getProgressBarShapeSizeRestrictions =
-  (): ShapeSizeRestrictions => ({
-    minWidth: 100,
-    minHeight: 20,
-    maxWidth: -1,
-    maxHeight: 30,
-    defaultWidth: 300,
-    defaultHeight: 20,
-  });
+const progressBarShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 100,
+  minHeight: 20,
+  maxWidth: -1,
+  maxHeight: 30,
+  defaultWidth: 300,
+  defaultHeight: 20,
+};
+
+export const getProgressBarShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  progressBarShapeRestrictions;
 
 export const ProgressBarShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        progressBarShapeRestrictions,
+        width,
+        height
+      );
+
     return (
       <Group
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'progressbar')}
       >
@@ -29,8 +39,8 @@ export const ProgressBarShape = forwardRef<any, ShapeProps>(
         <Rect
           x={0}
           y={0}
-          width={width}
-          height={height}
+          width={restrictedWidth}
+          height={restrictedHeight}
           cornerRadius={10}
           stroke="black"
           strokeWidth={2}
@@ -41,8 +51,8 @@ export const ProgressBarShape = forwardRef<any, ShapeProps>(
         <Rect
           x={0}
           y={0}
-          width={width / 2}
-          height={height}
+          width={restrictedWidth / 2}
+          height={restrictedHeight}
           cornerRadius={10}
           stroke="black"
           strokeWidth={2}
diff --git a/src/common/components/front-components/textarea-shape.tsx b/src/common/components/front-components/textarea-shape.tsx
index b7baa936..80cb08ed 100644
--- a/src/common/components/front-components/textarea-shape.tsx
+++ b/src/common/components/front-components/textarea-shape.tsx
@@ -1,25 +1,32 @@
+import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
-import { Group, Rect, Text } from 'react-konva';
 import { ShapeProps } from './shape.model';
-import { ShapeSizeRestrictions } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Text } from 'react-konva';
 
-export const getTextAreaSizeRestrictions = (): ShapeSizeRestrictions => ({
+const textAreaShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 80,
-  minHeight: 90,
+  minHeight: 70,
   maxWidth: -1,
   maxHeight: 500,
   defaultWidth: 190,
   defaultHeight: 100,
-});
+};
+
+export const getTextAreaSizeRestrictions = (): ShapeSizeRestrictions =>
+  textAreaShapeRestrictions;
 
 export const TextAreaShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(textAreaShapeRestrictions, width, height);
+
     return (
       <Group
         x={x}
         y={y}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         ref={ref}
         {...shapeProps}
         onClick={() => onSelected(id, 'textarea')}
@@ -27,8 +34,8 @@ export const TextAreaShape = forwardRef<any, ShapeProps>(
         <Rect
           x={0}
           y={0}
-          width={width + 10}
-          height={height}
+          width={restrictedWidth + 10}
+          height={restrictedHeight}
           cornerRadius={5}
           stroke="black"
           strokeWidth={2}
@@ -39,13 +46,13 @@ export const TextAreaShape = forwardRef<any, ShapeProps>(
           x={10}
           y={10}
           width={width}
+          height={height - 10}
           text="Your text here..."
           fontFamily="Comic Sans MS, cursive"
           fontSize={15}
           fill="gray"
           align="left"
           ellipsis={true}
-          height={height - 10}
         />
       </Group>
     );
diff --git a/src/common/components/front-components/timepickerinput-shape.tsx b/src/common/components/front-components/timepickerinput-shape.tsx
index dd8e3389..16d7a080 100644
--- a/src/common/components/front-components/timepickerinput-shape.tsx
+++ b/src/common/components/front-components/timepickerinput-shape.tsx
@@ -1,20 +1,30 @@
-import { Group, Rect, Text } from 'react-konva';
+import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
 import { ShapeProps } from './shape.model';
-import { ShapeSizeRestrictions } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Text } from 'react-konva';
+
+const timepickerInputShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 100,
+  minHeight: 50,
+  maxWidth: -1,
+  maxHeight: 50,
+  defaultWidth: 220,
+  defaultHeight: 50,
+};
 
 export const getTimepickerInputShapeSizeRestrictions =
-  (): ShapeSizeRestrictions => ({
-    minWidth: 80,
-    minHeight: 50,
-    maxWidth: -1,
-    maxHeight: 50,
-    defaultWidth: 220,
-    defaultHeight: 50,
-  });
+  (): ShapeSizeRestrictions => timepickerInputShapeRestrictions;
 
 export const TimepickerInputShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        timepickerInputShapeRestrictions,
+        width,
+        height
+      );
+
     const margin = 10;
     const separatorPadding = 15; // Extra padding for spacers
     const separator1X = width / 3 + margin;
@@ -25,8 +35,8 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'timepickerinput')}
       >
@@ -34,8 +44,8 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
         <Rect
           x={margin}
           y={margin * 3}
-          width={width - 2 * margin}
-          height={height}
+          width={restrictedWidth - 2 * margin}
+          height={restrictedHeight}
           cornerRadius={10}
           stroke="black"
           strokeWidth={2}
@@ -45,7 +55,7 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
         {/* Separators : */}
         <Text
           x={separator1X - 10}
-          y={margin * 3 + height / 2 + 5 - separatorPadding}
+          y={margin * 3 + restrictedHeight / 2 + 5 - separatorPadding}
           text=":"
           fontFamily="Comic Sans MS, cursive"
           fontSize={20}
@@ -53,7 +63,7 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
         />
         <Text
           x={separator2X - 10}
-          y={margin * 3 + height / 2 + 5 - separatorPadding}
+          y={margin * 3 + restrictedHeight / 2 + 5 - separatorPadding}
           text=":"
           fontFamily="Comic Sans MS, cursive"
           fontSize={20}
diff --git a/src/common/components/front-components/toggleswitch-shape.tsx b/src/common/components/front-components/toggleswitch-shape.tsx
index 0f1df915..3c894183 100644
--- a/src/common/components/front-components/toggleswitch-shape.tsx
+++ b/src/common/components/front-components/toggleswitch-shape.tsx
@@ -1,20 +1,30 @@
 import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef, useState } from 'react';
 import { ShapeProps } from './shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Circle, Group, Rect } from 'react-konva';
 
-export const getToggleSwitchShapeSizeRestrictions =
-  (): ShapeSizeRestrictions => ({
-    minWidth: 50,
-    minHeight: 25,
-    maxWidth: 100,
-    maxHeight: 35,
-    defaultWidth: 60,
-    defaultHeight: 25,
-  });
+const toggleSwitchShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 50,
+  minHeight: 25,
+  maxWidth: 100,
+  maxHeight: 35,
+  defaultWidth: 60,
+  defaultHeight: 25,
+};
+
+export const getToggleSwitchShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  toggleSwitchShapeRestrictions;
 
 export const ToggleSwitch = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        toggleSwitchShapeRestrictions,
+        width,
+        height
+      );
+
     const [isOn, setIsOn] = useState(false);
 
     const handleSwitch = () => {
@@ -29,16 +39,16 @@ export const ToggleSwitch = forwardRef<any, ShapeProps>(
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'toggleswitch')}
       >
         <Rect
           x={0}
           y={0}
-          width={width}
-          height={height}
+          width={restrictedWidth}
+          height={restrictedHeight}
           cornerRadius={50}
           stroke="black"
           strokeWidth={2}
@@ -47,8 +57,8 @@ export const ToggleSwitch = forwardRef<any, ShapeProps>(
         <Circle
           onClick={handleSwitch}
           x={circleX}
-          y={height / 2}
-          radius={height / 2}
+          y={restrictedHeight / 2}
+          radius={restrictedHeight / 2}
           stroke="black"
           strokeWidth={2}
           fill="white"
diff --git a/src/common/components/front-containers/browserwindow-shape.tsx b/src/common/components/front-containers/browserwindow-shape.tsx
index 4d2c1f3e..f27e61dc 100644
--- a/src/common/components/front-containers/browserwindow-shape.tsx
+++ b/src/common/components/front-containers/browserwindow-shape.tsx
@@ -105,6 +105,8 @@ export const BrowserWindowShape = forwardRef<any, ShapeProps>(
           fontFamily="Comic Sans MS, cursive"
           fontSize={12}
           fill="black"
+          ellipsis={true}
+          wrap="none"
         />
       </Group>
     );

From db9aa1d388831c2d0fb513b3c529d50900b6dfdd Mon Sep 17 00:00:00 2001
From: Fran Lopez <franciscolopto@gmail.com>
Date: Wed, 31 Jul 2024 17:54:39 +0200
Subject: [PATCH 2/3] fix datepicker and timepicker shape

---
 .../datepickerinput-shape.tsx                 | 24 +++++++++----------
 .../timepickerinput-shape.tsx                 | 17 +++++++------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/common/components/front-components/datepickerinput-shape.tsx b/src/common/components/front-components/datepickerinput-shape.tsx
index 0dd8aa62..6e7f28c4 100644
--- a/src/common/components/front-components/datepickerinput-shape.tsx
+++ b/src/common/components/front-components/datepickerinput-shape.tsx
@@ -25,10 +25,9 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
         height
       );
 
-    const margin = 10;
-    const separatorPadding = 15; // Extra padding for spacers
-    const separator1X = width / 3 + margin;
-    const separator2X = (2 * width) / 3 - margin;
+    const separatorPadding = 12;
+    const separator1X = restrictedWidth / 3;
+    const separator2X = (2 * restrictedWidth) / 3;
 
     return (
       <Group
@@ -42,23 +41,22 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
       >
         {/* input frame */}
         <Rect
-          x={margin}
-          y={margin * 3}
-          width={width - 2 * margin}
-          height={height}
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight + 4}
           cornerRadius={10}
           stroke="black"
           strokeWidth={2}
           fill="white"
         />
-
         {/* Inverted diagonal spacers */}
         <Line
           points={[
             separator1X + separatorPadding,
-            margin * 2 + separatorPadding,
+            separatorPadding - 4,
             separator1X - separatorPadding,
-            margin * 4 + height - separatorPadding,
+            10 + restrictedHeight - separatorPadding,
           ]}
           stroke="black"
           strokeWidth={2}
@@ -66,9 +64,9 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
         <Line
           points={[
             separator2X + separatorPadding,
-            margin * 2 + separatorPadding,
+            separatorPadding - 4,
             separator2X - separatorPadding,
-            margin * 4 + height - separatorPadding,
+            10 + restrictedHeight - separatorPadding,
           ]}
           stroke="black"
           strokeWidth={2}
diff --git a/src/common/components/front-components/timepickerinput-shape.tsx b/src/common/components/front-components/timepickerinput-shape.tsx
index 16d7a080..288e0b37 100644
--- a/src/common/components/front-components/timepickerinput-shape.tsx
+++ b/src/common/components/front-components/timepickerinput-shape.tsx
@@ -25,10 +25,9 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
         height
       );
 
-    const margin = 10;
-    const separatorPadding = 15; // Extra padding for spacers
-    const separator1X = width / 3 + margin;
-    const separator2X = (2 * width) / 3 - margin;
+    const separatorPadding = 3; // Extra padding for spacers
+    const separator1X = restrictedWidth / 3;
+    const separator2X = (2 * restrictedWidth) / 3;
 
     return (
       <Group
@@ -42,9 +41,9 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
       >
         {/* input frame */}
         <Rect
-          x={margin}
-          y={margin * 3}
-          width={restrictedWidth - 2 * margin}
+          x={0}
+          y={0}
+          width={restrictedWidth}
           height={restrictedHeight}
           cornerRadius={10}
           stroke="black"
@@ -55,7 +54,7 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
         {/* Separators : */}
         <Text
           x={separator1X - 10}
-          y={margin * 3 + restrictedHeight / 2 + 5 - separatorPadding}
+          y={restrictedHeight / separatorPadding}
           text=":"
           fontFamily="Comic Sans MS, cursive"
           fontSize={20}
@@ -63,7 +62,7 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
         />
         <Text
           x={separator2X - 10}
-          y={margin * 3 + restrictedHeight / 2 + 5 - separatorPadding}
+          y={restrictedHeight / separatorPadding}
           text=":"
           fontFamily="Comic Sans MS, cursive"
           fontSize={20}

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 3/3] 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}