From 446e23da62bd8d32951a547918a909f353fd29a2 Mon Sep 17 00:00:00 2001
From: "LAPTOP-G2U17NSB\\duy_9" <lourdesrsdp@gmail.com>
Date: Mon, 19 Aug 2024 17:40:09 +0200
Subject: [PATCH 1/2] Adding  "checked" property as new "otherprop"

-Checked allowed in Toggle, Checkbox and Radiobutton components
-Also, cleaned up some files by removing console.log statements
---
 .../front-components/checkbox-shape.tsx       | 60 ++++++++++++-------
 .../front-components/radiobutton-shape.tsx    | 18 +++++-
 .../front-components/toggleswitch-shape.tsx   | 17 ++++--
 src/core/model/index.ts                       |  3 +-
 src/pods/canvas/canvas.model.ts               | 19 ++++++
 .../simple-component/checkbox.renderer.tsx    |  1 +
 .../simple-component/radiobutton.renderer.tsx |  1 +
 .../toggleswitch.renderer.tsx                 |  1 +
 .../breadcrumb.renderer.tsx                   |  2 -
 .../heading1.renderer.tsx                     |  2 -
 .../heading2.renderer.tsx                     |  2 -
 .../heading3.renderer.tsx                     |  2 -
 .../normaltext.renderer.tsx                   |  2 -
 .../paragraph.renderer.tsx                    |  2 -
 .../smalltext.renderer.tsx                    |  2 -
 .../checked/checked.component.module.css      | 32 ++++++++++
 .../components/checked/checked.component.tsx  | 25 ++++++++
 src/pods/properties/properties.pod.tsx        |  8 +++
 18 files changed, 156 insertions(+), 43 deletions(-)
 create mode 100644 src/pods/properties/components/checked/checked.component.module.css
 create mode 100644 src/pods/properties/components/checked/checked.component.tsx

diff --git a/src/common/components/front-components/checkbox-shape.tsx b/src/common/components/front-components/checkbox-shape.tsx
index 1714481c..7d8fbaad 100644
--- a/src/common/components/front-components/checkbox-shape.tsx
+++ b/src/common/components/front-components/checkbox-shape.tsx
@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useState } 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,25 @@ 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, setIsOn] = useState(otherProps?.checked ?? false);
+
+    useEffect(() => {
+      if (otherProps?.checked != undefined) {
+        setIsOn(otherProps?.checked);
+      }
+    }, [otherProps?.checked]);
+
+    const handleClick = () => {
+      setIsOn(!isOn);
+    };
+
     return (
       <Group
         x={x}
@@ -33,7 +48,10 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>(
         width={restrictedWidth}
         height={restrictedHeight}
         {...shapeProps}
-        onClick={() => onSelected(id, 'checkbox')}
+        onClick={() => {
+          onSelected(id, 'checkbox');
+          handleClick();
+        }}
       >
         <Rect
           x={0}
@@ -45,25 +63,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}
diff --git a/src/common/components/front-components/radiobutton-shape.tsx b/src/common/components/front-components/radiobutton-shape.tsx
index 2fd1d4b5..2542806d 100644
--- a/src/common/components/front-components/radiobutton-shape.tsx
+++ b/src/common/components/front-components/radiobutton-shape.tsx
@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import { Group, Circle, Text } from 'react-konva';
 import { ShapeProps } from './shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
@@ -13,8 +13,14 @@ 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,
@@ -22,7 +28,13 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>(
         height
       );
 
-    const [isOn, setIsOn] = useState(false);
+    const [isOn, setIsOn] = useState(otherProps?.checked ?? false);
+
+    useEffect(() => {
+      if (otherProps?.checked != undefined) {
+        setIsOn(otherProps?.checked);
+      }
+    }, [otherProps?.checked]);
 
     const handleSwitch = () => {
       setIsOn(!isOn);
diff --git a/src/common/components/front-components/toggleswitch-shape.tsx b/src/common/components/front-components/toggleswitch-shape.tsx
index 3c894183..04e645b7 100644
--- a/src/common/components/front-components/toggleswitch-shape.tsx
+++ b/src/common/components/front-components/toggleswitch-shape.tsx
@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import { ShapeProps } from './shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Circle, Group, Rect } from 'react-konva';
@@ -17,7 +17,7 @@ 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,
@@ -25,14 +25,21 @@ export const ToggleSwitch = forwardRef<any, ShapeProps>(
         height
       );
 
-    const [isOn, setIsOn] = useState(false);
+    const [isOn, setIsOn] = useState(otherProps?.checked ?? false);
 
     const handleSwitch = () => {
-      //TODO: Only available when shape is selected
       setIsOn(!isOn);
     };
 
-    const circleX = isOn ? width - height / 2 : height / 2;
+    useEffect(() => {
+      if (otherProps?.checked != undefined) {
+        setIsOn(otherProps?.checked);
+      }
+    }, [otherProps?.checked]);
+
+    const circleX = isOn
+      ? restrictedWidth - restrictedHeight / 2
+      : restrictedHeight / 2;
 
     return (
       <Group
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
index 6d098268..b33f89bf 100644
--- a/src/core/model/index.ts
+++ b/src/core/model/index.ts
@@ -104,7 +104,8 @@ export interface Coord {
 export interface OtherProps {
   stroke?: string;
   backgroundColor?: string;
-  textColor: string;
+  textColor?: string;
+  checked?: boolean;
 }
 
 export interface ShapeModel {
diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts
index 2d158e53..a744eae8 100644
--- a/src/pods/canvas/canvas.model.ts
+++ b/src/pods/canvas/canvas.model.ts
@@ -18,6 +18,8 @@ import {
   getDatepickerInputShapeSizeRestrictions,
   getButtonShapeSizeRestrictions,
   getTimepickerInputShapeSizeRestrictions,
+  getRadioButtonShapeSizeRestrictions,
+  getCheckboxShapeSizeRestrictions,
 } from '@/common/components/front-components';
 import {
   getBrowserWindowShapeSizeRestrictions,
@@ -220,6 +222,16 @@ export const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
         width: getLargeArrowShapeSizeRestrictions().defaultWidth,
         height: getLargeArrowShapeSizeRestrictions().defaultHeight,
       };
+    case 'radiobutton':
+      return {
+        width: getRadioButtonShapeSizeRestrictions().defaultWidth,
+        height: getRadioButtonShapeSizeRestrictions().defaultHeight,
+      };
+    case 'checkbox':
+      return {
+        width: getCheckboxShapeSizeRestrictions().defaultWidth,
+        height: getCheckboxShapeSizeRestrictions().defaultHeight,
+      };
     default:
       console.warn(
         `** Shape ${shapeType} has not defined default size, check getDefaultSizeFromShape helper function`
@@ -353,6 +365,13 @@ export const generateDefaultOtherProps = (
         backgroundColor: '#d3d3d3',
         textColor: '#000000',
       };
+    case 'toggleswitch':
+    case 'radiobutton':
+    case 'checkbox':
+      return {
+        checked: true,
+      };
+
     default:
       return undefined;
   }
diff --git a/src/pods/canvas/shape-renderer/simple-component/checkbox.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/checkbox.renderer.tsx
index 74df85ad..2b358308 100644
--- a/src/pods/canvas/shape-renderer/simple-component/checkbox.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-component/checkbox.renderer.tsx
@@ -26,6 +26,7 @@ export const renderCheckbox = (
       onTransformEnd={handleTransform}
       isEditable={shape.allowsInlineEdition}
       text={shape.text}
+      otherProps={shape.otherProps}
     />
   );
 };
diff --git a/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx
index b30966c8..635c01f6 100644
--- a/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx
@@ -26,6 +26,7 @@ export const renderRadioButton = (
       onTransformEnd={handleTransform}
       isEditable={shape.allowsInlineEdition}
       text={shape.text}
+      otherProps={shape.otherProps}
     />
   );
 };
diff --git a/src/pods/canvas/shape-renderer/simple-component/toggleswitch.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/toggleswitch.renderer.tsx
index dde20f9a..0dabc916 100644
--- a/src/pods/canvas/shape-renderer/simple-component/toggleswitch.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-component/toggleswitch.renderer.tsx
@@ -24,6 +24,7 @@ export const renderToggleSwitch = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      otherProps={shape.otherProps}
     />
   );
 };
diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/breadcrumb.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/breadcrumb.renderer.tsx
index dcf78f2e..d5804e24 100644
--- a/src/pods/canvas/shape-renderer/simple-rich-components/breadcrumb.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-rich-components/breadcrumb.renderer.tsx
@@ -9,8 +9,6 @@ export const renderBreadcrumb = (
   const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
     shapeRenderedProps;
 
-  console.log(shapeRefs.current[shape.id]);
-
   return (
     <BreadcrumbShape
       id={shape.id}
diff --git a/src/pods/canvas/shape-renderer/simple-text-components/heading1.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/heading1.renderer.tsx
index 1e16a2b7..8930faa7 100644
--- a/src/pods/canvas/shape-renderer/simple-text-components/heading1.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-text-components/heading1.renderer.tsx
@@ -9,8 +9,6 @@ export const renderHeading1 = (
   const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
     shapeRenderedProps;
 
-  console.log(shapeRefs.current[shape.id]);
-
   return (
     <Heading1Shape
       id={shape.id}
diff --git a/src/pods/canvas/shape-renderer/simple-text-components/heading2.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/heading2.renderer.tsx
index 78130857..b81f32f9 100644
--- a/src/pods/canvas/shape-renderer/simple-text-components/heading2.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-text-components/heading2.renderer.tsx
@@ -9,8 +9,6 @@ export const renderHeading2 = (
   const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
     shapeRenderedProps;
 
-  console.log(shapeRefs.current[shape.id]);
-
   return (
     <Heading2Shape
       id={shape.id}
diff --git a/src/pods/canvas/shape-renderer/simple-text-components/heading3.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/heading3.renderer.tsx
index 7cc6ebd3..81f2cf6a 100644
--- a/src/pods/canvas/shape-renderer/simple-text-components/heading3.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-text-components/heading3.renderer.tsx
@@ -9,8 +9,6 @@ export const renderHeading3 = (
   const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
     shapeRenderedProps;
 
-  console.log(shapeRefs.current[shape.id]);
-
   return (
     <Heading3Shape
       id={shape.id}
diff --git a/src/pods/canvas/shape-renderer/simple-text-components/normaltext.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/normaltext.renderer.tsx
index ef241fde..51527cf5 100644
--- a/src/pods/canvas/shape-renderer/simple-text-components/normaltext.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-text-components/normaltext.renderer.tsx
@@ -9,8 +9,6 @@ export const renderNormaltext = (
   const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
     shapeRenderedProps;
 
-  console.log(shapeRefs.current[shape.id]);
-
   return (
     <NormaltextShape
       id={shape.id}
diff --git a/src/pods/canvas/shape-renderer/simple-text-components/paragraph.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/paragraph.renderer.tsx
index af29fe97..e3cacf1c 100644
--- a/src/pods/canvas/shape-renderer/simple-text-components/paragraph.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-text-components/paragraph.renderer.tsx
@@ -9,8 +9,6 @@ export const renderParagraph = (
   const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
     shapeRenderedProps;
 
-  console.log(shapeRefs.current[shape.id]);
-
   return (
     <ParagraphShape
       id={shape.id}
diff --git a/src/pods/canvas/shape-renderer/simple-text-components/smalltext.renderer.tsx b/src/pods/canvas/shape-renderer/simple-text-components/smalltext.renderer.tsx
index a55fe028..8ab4626e 100644
--- a/src/pods/canvas/shape-renderer/simple-text-components/smalltext.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-text-components/smalltext.renderer.tsx
@@ -9,8 +9,6 @@ export const renderSmalltext = (
   const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
     shapeRenderedProps;
 
-  console.log(shapeRefs.current[shape.id]);
-
   return (
     <SmalltextShape
       id={shape.id}
diff --git a/src/pods/properties/components/checked/checked.component.module.css b/src/pods/properties/components/checked/checked.component.module.css
new file mode 100644
index 00000000..8e51ebc3
--- /dev/null
+++ b/src/pods/properties/components/checked/checked.component.module.css
@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.button {
+  border: none;
+  color: var(--text-color);
+  background-color: inherit;
+  width: var(--space-lg);
+  height: var(--space-lg);
+  border-radius: var(--border-radius-s);
+  font-size: var(--fs-xs);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-s);
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: var(--primary-100);
+}
diff --git a/src/pods/properties/components/checked/checked.component.tsx b/src/pods/properties/components/checked/checked.component.tsx
new file mode 100644
index 00000000..e1424b34
--- /dev/null
+++ b/src/pods/properties/components/checked/checked.component.tsx
@@ -0,0 +1,25 @@
+import classes from './checked.component.module.css';
+
+interface Props {
+  checked: boolean;
+  label: string;
+  onChange: (checked: boolean) => void;
+}
+
+export const Checked: React.FC<Props> = props => {
+  const { label, checked, onChange } = props;
+
+  return (
+    <div className={classes.container}>
+      <p>{label}</p>
+      <select
+        onChange={e => onChange(e.target.value === 'true')}
+        className={classes.select}
+        value={checked.toString()}
+      >
+        <option value="true">True</option>
+        <option value="false">False</option>
+      </select>
+    </div>
+  );
+};
diff --git a/src/pods/properties/properties.pod.tsx b/src/pods/properties/properties.pod.tsx
index 941d5590..b7d2fce9 100644
--- a/src/pods/properties/properties.pod.tsx
+++ b/src/pods/properties/properties.pod.tsx
@@ -2,6 +2,7 @@ import { useCanvasContext } from '@/core/providers';
 import classes from './properties.pod.module.css';
 import { ZIndexOptions } from './components/zindex/zindex-option.component';
 import { ColorPicker } from './components/color-picker/color-picker.component';
+import { Checked } from './components/checked/checked.component';
 
 export const PropertiesPod = () => {
   const { selectionInfo } = useCanvasContext();
@@ -45,6 +46,13 @@ export const PropertiesPod = () => {
           onChange={color => updateOtherPropsOnSelected('textColor', color)}
         />
       )}
+      {selectedShapeData?.otherProps?.checked != undefined && (
+        <Checked
+          label="Checked"
+          checked={selectedShapeData?.otherProps?.checked}
+          onChange={checked => updateOtherPropsOnSelected('checked', checked)}
+        />
+      )}
     </div>
   );
 };

From 9c8a7d88d78e1c74188944a03273d733908457bd Mon Sep 17 00:00:00 2001
From: "LAPTOP-G2U17NSB\\duy_9" <lourdesrsdp@gmail.com>
Date: Tue, 20 Aug 2024 18:31:11 +0200
Subject: [PATCH 2/2] Using useMemo instead of useState to manage the checked
 state

---
 .../front-components/checkbox-shape.tsx        | 18 +++++-------------
 .../front-components/radiobutton-shape.tsx     | 18 +++++-------------
 .../front-components/toggleswitch-shape.tsx    | 18 +++++-------------
 3 files changed, 15 insertions(+), 39 deletions(-)

diff --git a/src/common/components/front-components/checkbox-shape.tsx b/src/common/components/front-components/checkbox-shape.tsx
index 7d8fbaad..3ab7a1d9 100644
--- a/src/common/components/front-components/checkbox-shape.tsx
+++ b/src/common/components/front-components/checkbox-shape.tsx
@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef, useEffect, useState } 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';
@@ -28,17 +28,10 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>(
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(checkBoxShapeRestrictions, width, height);
 
-    const [isOn, setIsOn] = useState(otherProps?.checked ?? false);
-
-    useEffect(() => {
-      if (otherProps?.checked != undefined) {
-        setIsOn(otherProps?.checked);
-      }
-    }, [otherProps?.checked]);
-
-    const handleClick = () => {
-      setIsOn(!isOn);
-    };
+    const isOn = useMemo(
+      () => otherProps?.checked ?? true,
+      [otherProps?.checked]
+    );
 
     return (
       <Group
@@ -50,7 +43,6 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>(
         {...shapeProps}
         onClick={() => {
           onSelected(id, 'checkbox');
-          handleClick();
         }}
       >
         <Rect
diff --git a/src/common/components/front-components/radiobutton-shape.tsx b/src/common/components/front-components/radiobutton-shape.tsx
index 2542806d..1d5d42ac 100644
--- a/src/common/components/front-components/radiobutton-shape.tsx
+++ b/src/common/components/front-components/radiobutton-shape.tsx
@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef, useEffect, 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';
@@ -28,17 +28,10 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>(
         height
       );
 
-    const [isOn, setIsOn] = useState(otherProps?.checked ?? false);
-
-    useEffect(() => {
-      if (otherProps?.checked != undefined) {
-        setIsOn(otherProps?.checked);
-      }
-    }, [otherProps?.checked]);
-
-    const handleSwitch = () => {
-      setIsOn(!isOn);
-    };
+    const isOn = useMemo(
+      () => otherProps?.checked ?? true,
+      [otherProps?.checked]
+    );
 
     const radius = restrictedHeight / 2;
 
@@ -63,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}
diff --git a/src/common/components/front-components/toggleswitch-shape.tsx b/src/common/components/front-components/toggleswitch-shape.tsx
index 04e645b7..4bcdddb7 100644
--- a/src/common/components/front-components/toggleswitch-shape.tsx
+++ b/src/common/components/front-components/toggleswitch-shape.tsx
@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef, useEffect, 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';
@@ -25,17 +25,10 @@ export const ToggleSwitch = forwardRef<any, ShapeProps>(
         height
       );
 
-    const [isOn, setIsOn] = useState(otherProps?.checked ?? false);
-
-    const handleSwitch = () => {
-      setIsOn(!isOn);
-    };
-
-    useEffect(() => {
-      if (otherProps?.checked != undefined) {
-        setIsOn(otherProps?.checked);
-      }
-    }, [otherProps?.checked]);
+    const isOn = useMemo(
+      () => otherProps?.checked ?? true,
+      [otherProps?.checked]
+    );
 
     const circleX = isOn
       ? restrictedWidth - restrictedHeight / 2
@@ -62,7 +55,6 @@ export const ToggleSwitch = forwardRef<any, ShapeProps>(
           fill={isOn ? 'lightgreen' : 'lightgray'}
         />
         <Circle
-          onClick={handleSwitch}
           x={circleX}
           y={restrictedHeight / 2}
           radius={restrictedHeight / 2}