Merge pull request #107 from Lemoncode/feature/#75-refactor-all-shapes

Feature/#75 refactor all shapes

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}

src/common/components/front-components/checkbox-shape.tsx

@@ -1,59 +1,50 @@
+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;
 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>
     );

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}

src/common/components/front-components/datepickerinput-shape.tsx

@@ -1,64 +1,72 @@
-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 margin = 10;
-    const separatorPadding = 15; // Extra padding for spacers
-    const separator1X = width / 3 + margin;
-    const separator2X = (2 * width) / 3 - margin;
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        datepickerInputShapeRestrictions,
+        width,
+        height
+      );
+
+    const separatorPadding = 12;
+    const separator1X = restrictedWidth / 3;
+    const separator2X = (2 * restrictedWidth) / 3;
 
     return (
       <Group
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'datepickerinput')}
       >
         {/* 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}
         />
         <Line
           points={[
             separator2X + separatorPadding,
-            margin * 2 + separatorPadding,
+            separatorPadding - 4,
             separator2X - separatorPadding,
-            margin * 4 + height - separatorPadding,
+            10 + restrictedHeight - separatorPadding,
           ]}
           stroke="black"
           strokeWidth={2}

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,

src/common/components/front-components/progressbar-shape.tsx

@@ -1,36 +1,46 @@
 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')}
       >
         {/* Progressbar background */}
         <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}