Merge branch 'main' into feature/#158-multiline-edition-to-listbox

README.md

@@ -65,6 +65,9 @@ Contributors to this project
   <a href="https://github.com/Bomasen">
     <kbd><img src="https://github.com/Bomasen.png" alt="Borja Martínez Sendra" width="50" height="50" style="border-radius: 50%;"></kbd>
   </a>
+  <a href="https://github.com/Pableras90">
+    <kbd><img src="https://github.com/Pableras90.png" alt="Pablo Reinaldo" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
   <a href="https://github.com/brauliodiez">
     <kbd><img src="https://github.com/brauliodiez.png" alt="Braulio Díez" width="50" height="50" style="border-radius: 50%;"></kbd>
   </a>

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
     "@types/lodash.clonedeep": "^4.5.9",
+    "immer": "^10.1.1",
     "konva": "^9.3.12",
     "lodash.clonedeep": "^4.5.0",
     "react": "^18.3.1",

src/common/components/front-basic-sapes/circle-basic-shape.tsx

@@ -0,0 +1,47 @@
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../front-components/shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Circle, Group } from 'react-konva';
+
+const circleShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 10,
+  minHeight: 10,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 160,
+  defaultHeight: 160,
+};
+
+export const getCircleShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  circleShapeRestrictions;
+
+export const CircleShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(circleShapeRestrictions, width, height);
+
+    const radius = Math.min(restrictedWidth, restrictedHeight) / 2;
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'circle')}
+      >
+        <Circle
+          x={restrictedWidth / 2}
+          y={restrictedHeight / 2}
+          radius={radius}
+          stroke="black"
+          strokeWidth={2}
+          fill="white"
+        />
+      </Group>
+    );
+  }
+);

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

@@ -1,2 +1,6 @@
 export * from './rectangle-basic-shape';
+export * from './postit-basic-shape';
 export * from './diamond-shape';
+export * from './line-basic-shape';
+export * from './circle-basic-shape';
+export * from './star-shape';

src/common/components/front-basic-sapes/line-basic-shape.tsx

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react';
+import { Group, Line, Rect } from 'react-konva';
+import { ShapeSizeRestrictions } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { ShapeProps } from '../front-components/shape.model';
+
+const lineShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 50,
+  minHeight: 10,
+  maxWidth: -1,
+  maxHeight: 10,
+  defaultWidth: 200,
+  defaultHeight: 10,
+};
+
+export const getlineShapeRestrictions = (): ShapeSizeRestrictions =>
+  lineShapeRestrictions;
+
+export const LineShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(lineShapeRestrictions, width, height);
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'line')}
+      >
+        {/* Transparent rectangle for applying margin */}
+        <Rect
+          width={restrictedWidth}
+          height={restrictedHeight}
+          fill="transparent"
+        />
+
+        <Line
+          x={0}
+          y={restrictedHeight / 2}
+          points={[0, 0, restrictedWidth, 0]}
+          stroke="black"
+          strokeWidth={2}
+        />
+      </Group>
+    );
+  }
+);

src/common/components/front-basic-sapes/postit-basic-shape.tsx

@@ -0,0 +1,85 @@
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../front-components/shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Text } from 'react-konva';
+
+const postItShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 80,
+  minHeight: 80,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 160,
+  defaultHeight: 160,
+};
+
+export const getPostItShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  postItShapeRestrictions;
+
+export const PostItShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, text, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(postItShapeRestrictions, width, height);
+
+    const handleClick = () => {
+      onSelected(id, 'postit');
+    };
+
+    const postItWidth = restrictedWidth;
+    const postItHeight = restrictedHeight;
+    const tapeWidth = postItWidth * 0.4;
+    const tapeHeight = postItHeight * 0.18;
+
+    const tapeX = (width - tapeWidth) / 2;
+    const tapeY = 0;
+
+    const tapeRotation = -10;
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        {...shapeProps}
+        onClick={handleClick}
+      >
+        {/* Post-it frame */}
+        <Rect
+          x={0}
+          y={10}
+          width={postItWidth}
+          height={restrictedHeight - 10}
+          cornerRadius={10}
+          stroke="black"
+          strokeWidth={2}
+          fill="#FFFF99"
+        />
+
+        {/* Tape */}
+        <Rect
+          x={tapeX}
+          y={tapeY}
+          width={tapeWidth}
+          height={tapeHeight}
+          rotation={tapeRotation}
+          stroke="black"
+          strokeWidth={2}
+          fill="gray"
+        />
+        <Text
+          x={5}
+          y={tapeHeight + 5}
+          width={postItWidth - 5}
+          height={restrictedHeight - tapeHeight - 10}
+          text={text}
+          fontSize={18}
+          fill="black"
+          wrap="wrap"
+          ellipsis={true}
+        />
+      </Group>
+    );
+  }
+);

src/common/components/front-basic-sapes/rectangle-basic-shape.tsx

@@ -38,7 +38,7 @@ export const RectangleShape = forwardRef<any, ShapeProps>(
           height={restrictedHeight}
           strokeWidth={2}
           stroke="black"
-          fille={null}
+          fill={'white'}
           cornerRadius={5}
         />
       </Group>