Merge remote-tracking branch 'origin/main' into feature/#220-Create-a…

…n-vertical-scroll-bar-and-place-it-under-Front-Components

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

@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ShapeProps } from './shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Line, Text } from 'react-konva';
@@ -21,10 +21,18 @@ const boxTickWidth = 50;
 const tickWidth = boxTickWidth - marginTick;
 
 export const CheckBoxShape = forwardRef<any, ShapeProps>(
-  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
+  (
+    { x, y, width, height, id, onSelected, text, otherProps, ...shapeProps },
+    ref
+  ) => {
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(checkBoxShapeRestrictions, width, height);
 
+    const isOn = useMemo(
+      () => otherProps?.checked ?? true,
+      [otherProps?.checked]
+    );
+
     return (
       <Group
         x={x}
@@ -33,7 +41,9 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>(
         width={restrictedWidth}
         height={restrictedHeight}
         {...shapeProps}
-        onClick={() => onSelected(id, 'checkbox')}
+        onClick={() => {
+          onSelected(id, 'checkbox');
+        }}
       >
         <Rect
           x={0}
@@ -45,25 +55,27 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>(
           strokeWidth={2}
           fill="white"
         />
-        <Line
-          points={[
-            marginTick,
-            height / 2,
-            marginTick + boxTickWidth / 4,
-            height - marginTick,
-            tickWidth - marginTick,
-            marginTick,
-          ]}
-          stroke="black"
-          strokeWidth={2}
-          lineCap="round"
-          lineJoin="round"
-        />
+        {isOn && (
+          <Line
+            points={[
+              marginTick,
+              restrictedHeight / 2,
+              marginTick + boxTickWidth / 4,
+              restrictedHeight - marginTick,
+              tickWidth - marginTick,
+              marginTick,
+            ]}
+            stroke="black"
+            strokeWidth={2}
+            lineCap="round"
+            lineJoin="round"
+          />
+        )}
         <Text
           x={boxTickWidth + marginTick}
-          y={height / 2}
-          width={width - boxTickWidth - marginTick}
-          height={height / 3}
+          y={restrictedHeight / 3}
+          width={restrictedWidth - boxTickWidth - marginTick}
+          height={restrictedHeight / 3}
           text={text}
           fontFamily="Comic Sans MS, cursive"
           fontSize={20}

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

@@ -0,0 +1,105 @@
+import { Group, Line, Rect } from 'react-konva';
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../front-components/shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+
+const HorizontalScrollBarShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 100,
+  minHeight: 10,
+  maxWidth: -1,
+  maxHeight: 20,
+  defaultWidth: 250,
+  defaultHeight: 20,
+};
+
+export const getHorizontalScrollBarShapeSizeRestrictions =
+  (): ShapeSizeRestrictions => HorizontalScrollBarShapeSizeRestrictions;
+
+export const HorizontalScrollBarShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        HorizontalScrollBarShapeSizeRestrictions,
+        width,
+        height
+      );
+
+    const arrowWidth = 20;
+    const thumbWidth = restrictedWidth * 0.3; // Ajuste del ancho del thumb al 30% de la barra
+    const thumbX =
+      arrowWidth + (restrictedWidth - thumbWidth - arrowWidth * 2) / 2; // Centrar el thumb dentro del área disponible
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'horizontalScrollBar')}
+      >
+        {/* Fondo de la barra de scroll */}
+        <Rect
+          x={arrowWidth}
+          y={0}
+          width={restrictedWidth - arrowWidth * 2}
+          height={restrictedHeight}
+          fill="#D0D0D0"
+          stroke="#A0A0A0"
+          strokeWidth={1}
+        />
+
+        {/* Flecha izquierda */}
+        <Rect
+          x={0}
+          y={0}
+          width={arrowWidth}
+          height={restrictedHeight}
+          fill="#E0E0E0"
+          stroke="#A0A0A0"
+          strokeWidth={1}
+        />
+
+        <Line
+          x={4}
+          y={restrictedHeight / 2}
+          points={[8, -4, 2, 0, 8, 4]}
+          fill="black"
+          closed={true}
+        />
+
+        {/* Thumb de la barra de scroll */}
+        <Rect
+          x={thumbX}
+          y={0}
+          width={thumbWidth}
+          height={restrictedHeight}
+          fill="#C0C0C0"
+          stroke="#808080"
+          strokeWidth={1}
+        />
+
+        {/* Flecha derecha */}
+        <Rect
+          x={restrictedWidth - arrowWidth}
+          y={0}
+          width={arrowWidth}
+          height={restrictedHeight}
+          fill="#E0E0E0"
+          stroke="#A0A0A0"
+          strokeWidth={1}
+        />
+
+        <Line
+          x={restrictedWidth - arrowWidth + 6}
+          y={restrictedHeight / 2}
+          points={[2, -4, 8, 0, 2, 4]}
+          fill="black"
+          closed={true}
+        />
+      </Group>
+    );
+  }
+);

src/common/components/front-components/index.ts

@@ -11,3 +11,4 @@ export * from './timepickerinput-shape';
 export * from './radiobutton-shape';
 export * from './icon-shape';
 export * from './verticalscrollbar-shape';
+export * from './horizontalscrollbar-shape';

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

@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Group, Circle, Text } from 'react-konva';
 import { ShapeProps } from './shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
@@ -13,20 +13,25 @@ const radioButtonShapeRestrictions: ShapeSizeRestrictions = {
   defaultHeight: 50,
 };
 
+export const getRadioButtonShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  radioButtonShapeRestrictions;
+
 export const RadioButtonShape = forwardRef<any, ShapeProps>(
-  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
+  (
+    { x, y, width, height, id, onSelected, text, otherProps, ...shapeProps },
+    ref
+  ) => {
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(
         radioButtonShapeRestrictions,
         width,
         height
       );
 
-    const [isOn, setIsOn] = useState(false);
-
-    const handleSwitch = () => {
-      setIsOn(!isOn);
-    };
+    const isOn = useMemo(
+      () => otherProps?.checked ?? true,
+      [otherProps?.checked]
+    );
 
     const radius = restrictedHeight / 2;
 
@@ -51,7 +56,6 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>(
 
         {/* Círculo interior del radio button (checked) */}
         <Circle
-          onClick={handleSwitch}
           x={radius}
           y={radius}
           radius={radius * 0.5}

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

@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ShapeProps } from './shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Circle, Group, Rect } from 'react-konva';
@@ -17,22 +17,22 @@ export const getToggleSwitchShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   toggleSwitchShapeRestrictions;
 
 export const ToggleSwitch = forwardRef<any, ShapeProps>(
-  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+  ({ x, y, width, height, id, onSelected, otherProps, ...shapeProps }, ref) => {
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(
         toggleSwitchShapeRestrictions,
         width,
         height
       );
 
-    const [isOn, setIsOn] = useState(false);
-
-    const handleSwitch = () => {
-      //TODO: Only available when shape is selected
-      setIsOn(!isOn);
-    };
+    const isOn = useMemo(
+      () => otherProps?.checked ?? true,
+      [otherProps?.checked]
+    );
 
-    const circleX = isOn ? width - height / 2 : height / 2;
+    const circleX = isOn
+      ? restrictedWidth - restrictedHeight / 2
+      : restrictedHeight / 2;
 
     return (
       <Group
@@ -55,7 +55,6 @@ export const ToggleSwitch = forwardRef<any, ShapeProps>(
           fill={isOn ? 'lightgreen' : 'lightgray'}
         />
         <Circle
-          onClick={handleSwitch}
           x={circleX}
           y={restrictedHeight / 2}
           radius={restrictedHeight / 2}

src/core/model/index.ts

@@ -47,6 +47,7 @@ export type ShapeType =
   | 'largeArrow'
   | 'bar'
   | 'triangle'
+  | 'horizontalScrollBar'
   | 'image'
   | 'verticalScrollBar';
 
@@ -90,7 +91,6 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   icon: 'Icon',
   bar: 'Bar Chart',
   image: 'Image',
-  verticalScrollBar: 'Vertical Scroll Bar',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';
@@ -123,9 +123,10 @@ export type IconSize = 'XS' | 'S' | 'M' | 'L' | 'XL';
 export interface OtherProps {
   stroke?: string;
   backgroundColor?: string;
+  textColor?: string;
+  checked?: boolean;
   icon?: IconInfo;
   iconSize?: IconSize;
-  textColor?: string;
   imageSrc?: string;
 }