Feature/#148 basic shape star

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

@@ -1,3 +1,4 @@
 export * from './rectangle-basic-shape';
 export * from './diamond-shape';
 export * from './line-basic-shape';
+export * from './star-shape';

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>

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

@@ -0,0 +1,49 @@
+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, Star } from 'react-konva';
+
+const starShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 10,
+  minHeight: 10,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 160,
+  defaultHeight: 160,
+};
+
+export const getStarShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  starShapeRestrictions;
+
+export const StarShape = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(starShapeRestrictions, width, height);
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        ref={ref}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'star')}
+      >
+        <Star
+          x={restrictedWidth / 2}
+          y={restrictedHeight / 2}
+          width={restrictedWidth}
+          height={restrictedHeight}
+          numPoints={5}
+          innerRadius={restrictedWidth / 4}
+          outerRadius={restrictedWidth / 2}
+          stroke={'black'}
+          strokeWidth={2}
+          fill={'white'}
+        />
+      </Group>
+    );
+  }
+);

src/core/model/index.ts

@@ -29,7 +29,8 @@ export type ShapeType =
   | 'diamond'
   | 'line'
   | 'accordion'
-  | 'pie';
+  | 'pie'
+  | 'star';
 
 export type EditType = 'input' | 'textarea';
 

src/pods/basic-shapes-gallery/basic-gallery-data/index.ts

@@ -4,4 +4,5 @@ export const mockBasicShapesCollection: ItemInfo[] = [
   { thumbnailSrc: '/shapes/rectangle.svg', type: 'rectangle' },
   { thumbnailSrc: '/shapes/diamond.svg', type: 'diamond' },
   { thumbnailSrc: '/shapes/line.svg', type: 'line' },
+  { thumbnailSrc: '/shapes/star.svg', type: 'star' },
 ];

src/pods/canvas/canvas.model.ts

@@ -22,6 +22,7 @@ import {
   getDiamondShapeSizeRestrictions,
   getRectangleShapeSizeRestrictions,
   getlineShapeRestrictions,
+  getStarShapeSizeRestrictions,
 } from '@/common/components/front-basic-sapes';
 import {
   getAccordionShapeSizeRestrictions,
@@ -127,6 +128,11 @@ export const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
         width: getPieChartShapeSizeRestrictions().defaultWidth,
         height: getPieChartShapeSizeRestrictions().defaultHeight,
       };
+    case 'star':
+      return {
+        width: getStarShapeSizeRestrictions().defaultWidth,
+        height: getStarShapeSizeRestrictions().defaultHeight,
+      };
     default:
       console.warn(
         `** Shape ${shapeType} has not defined default size, check getDefaultSizeFromShape helper function`

src/pods/canvas/shape-renderer/index.tsx

@@ -25,6 +25,7 @@ import {
   renderDiamond,
   renderRectangle,
   renderLine,
+  renderStar,
 } from './simple-basic-shapes';
 import { renderAccordion } from './simple-rich-components/accordion.renderer';
 import { renderPieChart } from './simple-rich-components/pie-chart.renderer';
@@ -76,6 +77,8 @@ export const renderShapeComponent = (
       return renderLine(shape, shapeRenderedProps);
     case 'accordion':
       return renderAccordion(shape, shapeRenderedProps);
+    case 'star':
+      return renderStar(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

src/pods/canvas/shape-renderer/simple-basic-shapes/index.ts

@@ -1,3 +1,4 @@
 export * from './rectangle.rerender';
 export * from './diamond.renderer';
 export * from './line.renderer';
+export * from './star.renderer';

src/pods/canvas/shape-renderer/simple-basic-shapes/star.renderer.tsx

@@ -0,0 +1,29 @@
+import { StarShape } from '@/common/components/front-basic-sapes';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderStar = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <StarShape
+      id={shape.id}
+      key={shape.id}
+      ref={shapeRefs.current[shape.id]}
+      x={shape.x}
+      y={shape.y}
+      name="shape"
+      width={shape.width}
+      height={shape.height}
+      draggable
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+    />
+  );
+};