Merge branch 'main' into feature/-#167-create-text-container-section-…

…in-right-components-panel

# Conflicts:
#	src/core/model/index.ts
#	src/pods/canvas/canvas.model.ts
#	src/pods/canvas/shape-renderer/index.tsx

README.md

@@ -68,6 +68,12 @@ Contributors to this project
   <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/IonutGabi">
+    <kbd><img src="https://github.com/IonutGabi.png" alt="Gabi Birsan" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>  
+  <a href="https://github.com/antonio06">
+    <kbd><img src="https://github.com/antonio06.png" alt="Antonio Contreras" 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>

src/App.tsx

@@ -1,9 +1,11 @@
-import { MainScene } from "./scenes/main.scene";
+import { ModalDialogComponent } from './common/components/modal-dialog';
+import { MainScene } from './scenes/main.scene';
 
 function App() {
   return (
     <>
       <MainScene />
+      <ModalDialogComponent />
     </>
   );
 }

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

@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ShapeProps } from '../front-components/shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Circle, Group } from 'react-konva';
@@ -17,12 +17,22 @@ export const getCircleShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   circleShapeRestrictions;
 
 export const CircleShape = 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(circleShapeRestrictions, width, height);
 
     const radius = Math.min(restrictedWidth, restrictedHeight) / 2;
 
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+
     return (
       <Group
         x={x}
@@ -37,9 +47,9 @@ export const CircleShape = forwardRef<any, ShapeProps>(
           x={restrictedWidth / 2}
           y={restrictedHeight / 2}
           radius={radius}
-          stroke="black"
+          stroke={stroke}
           strokeWidth={2}
-          fill="white"
+          fill={fill}
         />
       </Group>
     );

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

@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ShapeProps } from '../front-components/shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Line } from 'react-konva';
@@ -17,7 +17,10 @@ export const getDiamondShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   diamondShapeRestrictions;
 
 export const DiamondShape = 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(diamondShapeRestrictions, width, height);
 
@@ -35,6 +38,16 @@ export const DiamondShape = forwardRef<any, ShapeProps>(
       halfHeight, // Left point
     ];
 
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+
     return (
       <Group
         x={x}
@@ -48,9 +61,9 @@ export const DiamondShape = forwardRef<any, ShapeProps>(
         <Line
           points={points}
           closed
-          stroke="black"
+          stroke={stroke}
           strokeWidth={2}
-          fill="white"
+          fill={fill}
         />
       </Group>
     );

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

@@ -2,5 +2,7 @@ export * from './rectangle-basic-shape';
 export * from './postit-basic-shape';
 export * from './diamond-shape';
 export * from './line-basic-shape';
+export * from './triangle-basic-shape';
 export * from './circle-basic-shape';
 export * from './star-shape';
+export * from './large-arrow-shape';

src/common/components/front-basic-sapes/large-arrow-shape.tsx

@@ -0,0 +1,71 @@
+import { Group, Path } from 'react-konva';
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef, useMemo } from 'react';
+import { ShapeProps } from '../front-components/shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+
+const LargeArrowShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 50,
+  minHeight: 50,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 100,
+  defaultHeight: 100,
+};
+
+const LARGE_ARROW_FIX_WIDTH = 100;
+const LARGE_ARROW_FIX_HEIGHT = 100;
+
+const pathData = `M10,35 L200,35 L200,15 L300,50 L200,85 L200,65 L10,65 Z`;
+
+export const getLargeArrowShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  LargeArrowShapeSizeRestrictions;
+export const LargeArrowShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, otherProps, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        LargeArrowShapeSizeRestrictions,
+        width,
+        height
+      );
+
+    const scaleX = useMemo(() => {
+      return restrictedWidth / LARGE_ARROW_FIX_WIDTH;
+    }, [restrictedWidth]);
+
+    const scaleY = useMemo(() => {
+      return restrictedHeight / LARGE_ARROW_FIX_HEIGHT;
+    }, [restrictedHeight]);
+
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        ref={ref}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'largeArrow')}
+      >
+        <Group
+          width={LARGE_ARROW_FIX_WIDTH}
+          height={LARGE_ARROW_FIX_HEIGHT}
+          scaleX={scaleX}
+          scaleY={scaleY}
+        >
+          <Path data={pathData} fill={fill} stroke={stroke} strokeWidth={2} />
+        </Group>
+      </Group>
+    );
+  }
+);

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

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { Group, Line, Rect } from 'react-konva';
 import { ShapeSizeRestrictions } from '@/core/model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
@@ -17,10 +17,18 @@ export const getlineShapeRestrictions = (): ShapeSizeRestrictions =>
   lineShapeRestrictions;
 
 export const LineShape = 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(lineShapeRestrictions, width, height);
 
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
     return (
       <Group
         x={x}
@@ -42,7 +50,7 @@ export const LineShape = forwardRef<any, ShapeProps>(
           x={0}
           y={restrictedHeight / 2}
           points={[0, 0, restrictedWidth, 0]}
-          stroke="black"
+          stroke={stroke}
           strokeWidth={2}
         />
       </Group>

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

@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ShapeProps } from '../front-components/shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text } from 'react-konva';
@@ -17,7 +17,10 @@ export const getPostItShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   postItShapeRestrictions;
 
 export const PostItShape = forwardRef<any, ShapeProps>(
-  ({ x, y, width, height, id, text, onSelected, ...shapeProps }, ref) => {
+  (
+    { x, y, width, height, id, text, onSelected, otherProps, ...shapeProps },
+    ref
+  ) => {
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(postItShapeRestrictions, width, height);
 
@@ -35,6 +38,16 @@ export const PostItShape = forwardRef<any, ShapeProps>(
 
     const tapeRotation = -10;
 
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+
     return (
       <Group
         x={x}
@@ -52,9 +65,9 @@ export const PostItShape = forwardRef<any, ShapeProps>(
           width={postItWidth}
           height={restrictedHeight - 10}
           cornerRadius={10}
-          stroke="black"
+          stroke={stroke}
           strokeWidth={2}
-          fill="#FFFF99"
+          fill={fill}
         />
 
         {/* Tape */}

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

@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ShapeProps } from '../front-components/shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect } from 'react-konva';
@@ -17,10 +17,23 @@ export const getRectangleShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   rectangleShapeRestrictions;
 
 export const RectangleShape = 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(rectangleShapeRestrictions, width, height);
 
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+
     return (
       <Group
         x={x}
@@ -37,8 +50,8 @@ export const RectangleShape = forwardRef<any, ShapeProps>(
           width={restrictedWidth}
           height={restrictedHeight}
           strokeWidth={2}
-          stroke="black"
-          fill={'white'}
+          stroke={stroke}
+          fill={fill}
           cornerRadius={5}
         />
       </Group>

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

@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ShapeProps } from '../front-components/shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Star } from 'react-konva';
@@ -17,10 +17,23 @@ export const getStarShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   starShapeRestrictions;
 
 export const StarShape = 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(starShapeRestrictions, width, height);
 
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+
     return (
       <Group
         x={x}
@@ -39,9 +52,9 @@ export const StarShape = forwardRef<any, ShapeProps>(
           numPoints={5}
           innerRadius={restrictedWidth / 4}
           outerRadius={restrictedWidth / 2}
-          stroke={'black'}
+          stroke={stroke}
           strokeWidth={2}
-          fill={'white'}
+          fill={fill}
         />
       </Group>
     );