Merge pull request #208 from Lemoncode/feature/#192-stroke-and-fill

add stroke and fill
Lemoncode · Aug 16, 2024 · 98861d4 · 98861d4
2 parents a44eb03 + 8a8e130
commit 98861d4
Show file tree

Hide file tree

Showing 26 changed files with 235 additions and 57 deletions.
diff --git a/src/common/components/front-basic-sapes/circle-basic-shape.tsx b/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>
     );

diff --git a/src/common/components/front-basic-sapes/diamond-shape.tsx b/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>
     );

diff --git a/src/common/components/front-basic-sapes/line-basic-shape.tsx b/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>

diff --git a/src/common/components/front-basic-sapes/postit-basic-shape.tsx b/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 */}

diff --git a/src/common/components/front-basic-sapes/rectangle-basic-shape.tsx b/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>

diff --git a/src/common/components/front-basic-sapes/star-shape.tsx b/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>
     );

diff --git a/src/common/components/front-basic-sapes/triangle-basic-shape.tsx b/src/common/components/front-basic-sapes/triangle-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, Line } from 'react-konva';
@@ -20,7 +20,10 @@ export const getTriangleShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   triangleShapeRestrictions;
 
 export const TriangleShape = 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(triangleShapeRestrictions, width, height);
 
@@ -34,6 +37,16 @@ export const TriangleShape = forwardRef<any, ShapeProps>(
       restrictedHeight, // Left point
     ];
 
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+
     return (
       <Group
         x={x}
@@ -47,9 +60,9 @@ export const TriangleShape = forwardRef<any, ShapeProps>(
         <Line
           points={points}
           closed
-          stroke="black"
+          stroke={stroke}
           strokeWidth={2}
-          fill="white"
+          fill={fill}
         />
       </Group>
     );

diff --git a/src/common/components/front-components/button-shape.tsx b/src/common/components/front-components/button-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, Text } from 'react-konva';
@@ -24,6 +24,16 @@ export const ButtonShape = forwardRef<any, ShapeProps>(
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(buttonShapeRestrictions, width, height);
 
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+
     return (
       <Group
         x={x}
@@ -40,9 +50,9 @@ export const ButtonShape = forwardRef<any, ShapeProps>(
           width={restrictedWidth}
           height={restrictedHeight}
           cornerRadius={14}
-          stroke={otherProps?.stroke ?? 'black'}
+          stroke={stroke}
           strokeWidth={2}
-          fill={otherProps?.backgroundColor ?? 'white'}
+          fill={fill}
         />
         <Text
           x={0}