Merge pull request #228 from Lemoncode/feature/-#197-boolean-prop-che…

…cked

Adding  "checked" property as new "otherprop"

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/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

@@ -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;
 }
 

src/pods/canvas/canvas.model.ts

@@ -18,6 +18,8 @@ import {
   getDatepickerInputShapeSizeRestrictions,
   getButtonShapeSizeRestrictions,
   getTimepickerInputShapeSizeRestrictions,
+  getRadioButtonShapeSizeRestrictions,
+  getCheckboxShapeSizeRestrictions,
   getIconShapeSizeRestrictions,
   getHorizontalScrollBarShapeSizeRestrictions,
 } from '@/common/components/front-components';
@@ -230,6 +232,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,
+      };
     case 'icon':
       return {
         width: getIconShapeSizeRestrictions().defaultWidth,
@@ -403,6 +415,13 @@ export const generateDefaultOtherProps = (
         backgroundColor: '#d3d3d3',
         textColor: '#000000',
       };
+    case 'toggleswitch':
+    case 'radiobutton':
+    case 'checkbox':
+      return {
+        checked: true,
+      };
+
     case 'icon':
       return {
         icon: {

src/pods/canvas/shape-renderer/simple-component/checkbox.renderer.tsx

@@ -27,6 +27,7 @@ export const renderCheckbox = (
       onTransformEnd={handleTransform}
       isEditable={shape.allowsInlineEdition}
       text={shape.text}
+      otherProps={shape.otherProps}
     />
   );
 };

src/pods/canvas/shape-renderer/simple-component/radiobutton.renderer.tsx

@@ -27,6 +27,7 @@ export const renderRadioButton = (
       onTransformEnd={handleTransform}
       isEditable={shape.allowsInlineEdition}
       text={shape.text}
+      otherProps={shape.otherProps}
     />
   );
 };

src/pods/canvas/shape-renderer/simple-component/toggleswitch.renderer.tsx

@@ -25,6 +25,7 @@ export const renderToggleSwitch = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      otherProps={shape.otherProps}
     />
   );
 };

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}

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}

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}

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}

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}

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}

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}

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);
+}

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>
+  );
+};