feature/#598-create a cilinder basic shape

src/common/components/mock-components/front-basic-shapes/cilinder-basic-shape.tsx

@@ -0,0 +1,95 @@
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Group, Rect, Ellipse, Line } from 'react-konva';
+import { BASIC_SHAPE } from '../front-components/shape.const';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const cilinderShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 10,
+  minHeight: 10,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 160,
+  defaultHeight: 110,
+};
+
+export const getCilinderShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  cilinderShapeRestrictions;
+
+const shapeType = 'cilinder';
+
+export const CilinderShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    onSelected,
+    text,
+    otherProps,
+    ...shapeProps
+  } = props;
+
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    cilinderShapeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const { strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Ellipse
+        x={restrictedWidth / 2}
+        y={restrictedHeight}
+        radiusX={restrictedWidth / 2}
+        radiusY={restrictedWidth / 8}
+        fill="#B0B0B0"
+        stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+        strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+      />
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+        fill="#B0B0B0"
+        dash={strokeStyle}
+      />
+      <Line
+        points={[0, 0, 0, restrictedHeight]}
+        stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+        strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+      />
+      <Line
+        points={[restrictedWidth, 0, restrictedWidth, restrictedHeight]}
+        stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+        strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+      />
+      <Ellipse
+        x={restrictedWidth / 2}
+        y={0}
+        radiusX={restrictedWidth / 2}
+        radiusY={restrictedWidth / 8}
+        fill="#CFCFCF"
+        stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+        strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+      />
+    </Group>
+  );
+});

src/common/components/mock-components/front-basic-shapes/index.ts

@@ -9,3 +9,4 @@ export * from './star-shape';
 export * from './large-arrow-shape';
 export * from './image-shape';
 export * from './modal-cover-shape';
+export * from './cilinder-basic-shape';

src/core/model/index.ts

@@ -69,6 +69,7 @@ export type ShapeType =
   | 'tooltip'
   | 'slider'
   | 'link'
+  | 'cilinder'
   | 'richtext';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
@@ -129,6 +130,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   tooltip: 'Tooltip',
   slider: 'Slider',
   richtext: 'Rich Text',
+  cilinder: 'Cilinder',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/pods/canvas/model/shape-size.mapper.ts

@@ -39,6 +39,7 @@ import {
   getRectangleShapeSizeRestrictions,
   getStarShapeSizeRestrictions,
   getModalCoverShapeSizeRestrictions,
+  getCilinderShapeSizeRestrictions,
   // other imports
 } from '@/common/components/mock-components/front-basic-shapes';
 import {
@@ -140,6 +141,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   tooltip: getTooltipShapeSizeRestrictions,
   slider: getSliderShapeSizeRestrictions,
   audioPlayer: getAudioPlayerShapeSizeRestrictions,
+  cilinder: getCilinderShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;

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

@@ -53,6 +53,7 @@ import {
   renderStar,
   renderPostit,
   renderLargeArrowShape,
+  renderCilinder,
 } from './simple-basic-shapes';
 import {
   renderHeading1,
@@ -185,6 +186,8 @@ export const renderShapeComponent = (
       return renderTooltip(shape, shapeRenderedProps);
     case 'slider':
       return renderSlider(shape, shapeRenderedProps);
+    case 'cilinder':
+      return renderCilinder(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

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

@@ -0,0 +1,31 @@
+import { CilinderShape } from '@/common/components/mock-components/front-basic-shapes';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderCilinder = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <CilinderShape
+      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
+      typeOfTransformer={shape.typeOfTransformer}
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+      otherProps={shape.otherProps}
+    />
+  );
+};

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

@@ -8,3 +8,4 @@ export * from './circle.renderer';
 export * from './star.renderer';
 export * from './large-arrow.renderer';
 export * from './modal-cover.rerender';
+export * from './cilinder.renderer';

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

@@ -12,4 +12,5 @@ export const mockBasicShapesCollection: ItemInfo[] = [
   { thumbnailSrc: '/shapes/star.svg', type: 'star' },
   { thumbnailSrc: '/shapes/triangle.svg', type: 'triangle' },
   { thumbnailSrc: '/shapes/verticalLine.svg', type: 'verticalLine' },
+  { thumbnailSrc: '/shapes/cilinder.svg', type: 'cilinder' },
 ];