feature/#732 Create thick circle placeholder

src/common/components/mock-components/front-components/shape.const.ts

@@ -60,6 +60,10 @@ export const BASIC_SHAPE: DefaultStyleShape = {
   DEFAULT_DISABLED,
 };
 
+export const LOW_WIREFRAME_SHAPE = {
+  DEFAULT_STROKE_WIDTH: 6,
+};
+
 export const INPUT_SHAPE: DefaultStyleShape = {
   DEFAULT_CORNER_RADIUS,
   DEFAULT_STROKE_COLOR,

src/common/components/mock-components/front-low-wireframes-components/circle-low-shape.tsx

@@ -0,0 +1,63 @@
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Circle, Group } from 'react-konva';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import {
+  BASIC_SHAPE,
+  LOW_WIREFRAME_SHAPE,
+} from '../front-components/shape.const';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const circleLowShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 10,
+  minHeight: 10,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 160,
+  defaultHeight: 100,
+};
+
+export const getCircleLowShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  circleLowShapeRestrictions;
+
+const shapeType: ShapeType = 'circleLow';
+
+export const CircleLowShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } =
+    props;
+
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    circleLowShapeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const radius = Math.min(restrictedWidth, restrictedHeight) / 2;
+
+  const { stroke, fill, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Circle
+        x={restrictedWidth / 2}
+        y={restrictedHeight / 2}
+        radius={radius}
+        stroke={stroke}
+        strokeWidth={LOW_WIREFRAME_SHAPE.DEFAULT_STROKE_WIDTH}
+        fill={fill}
+        dash={strokeStyle}
+      />
+    </Group>
+  );
+});

src/common/components/mock-components/front-low-wireframes-components/ellipse-low-shape.tsx

@@ -4,7 +4,10 @@ import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { ShapeProps } from '../shape.model';
 import { useGroupShapeProps } from '../mock-components.utils';
-import { BASIC_SHAPE } from '../front-components/shape.const';
+import {
+  BASIC_SHAPE,
+  LOW_WIREFRAME_SHAPE,
+} from '../front-components/shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 
 const EllipseLowShapeRestrictions: ShapeSizeRestrictions = {
@@ -58,7 +61,7 @@ export const EllipseLowShape = forwardRef<any, ShapeProps>((props, ref) => {
         radiusX={restrictedWidth}
         radiusY={restrictedHeight}
         stroke={stroke}
-        strokeWidth={4}
+        strokeWidth={LOW_WIREFRAME_SHAPE.DEFAULT_STROKE_WIDTH}
         dash={strokeStyle}
       />
     </Group>

src/common/components/mock-components/front-low-wireframes-components/index.ts

@@ -2,3 +2,4 @@ export * from './ellipse-low-shape';
 export * from './horizontal-line-low-shape';
 export * from './image-placeholder-shape';
 export * from './vertical-line-low-shape';
+export * from './circle-low-shape';

src/core/model/index.ts

@@ -80,7 +80,8 @@ export type ShapeType =
   | 'imagePlaceholder'
   | 'horizontalLineLow'
   | 'verticalLineLow'
-  | 'ellipseLow';
+  | 'ellipseLow'
+  | 'circleLow';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -150,6 +151,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   horizontalLineLow: 'Horizontal Divider',
   verticalLineLow: 'Vertical Divider',
   ellipseLow: 'Ellipse',
+  circleLow: 'Circle',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/pods/canvas/model/shape-other-props.utils.ts

@@ -123,6 +123,7 @@ export const generateDefaultOtherProps = (
       };
     case 'horizontalLine':
     case 'horizontalLineLow':
+    case 'circleLow':
     case 'verticalLineLow':
     case 'ellipseLow':
       return {

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

@@ -79,10 +79,11 @@ import {
 } from '@/common/components/mock-components/front-text-components';
 
 import {
-  getEllipseLowShapeRestrictions,
   getHorizontalLineLowShapeRestrictions,
   getImagePlaceholderShapeSizeRestrictions,
   getVerticalLineLowShapeRestrictions,
+  getEllipseLowShapeRestrictions,
+  getCircleLowShapeSizeRestrictions,
 } from '@/common/components/mock-components/front-low-wireframes-components';
 
 const getMultipleNodeSizeRestrictions = (): ShapeSizeRestrictions => ({
@@ -163,6 +164,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   horizontalLineLow: getHorizontalLineLowShapeRestrictions,
   verticalLineLow: getVerticalLineLowShapeRestrictions,
   ellipseLow: getEllipseLowShapeRestrictions,
+  circleLow: getCircleLowShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;

src/pods/canvas/model/transformer.model.ts

@@ -75,6 +75,15 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'verticalScrollBar':
     case 'verticalLineLow':
       return ['top-center', 'bottom-center'];
+    case 'circleLow':
+      return [
+        'top-left',
+        'top-right',
+        'bottom-left',
+        'bottom-right',
+        'top-center',
+        'bottom-center',
+      ];
     case 'icon':
     case 'multiple':
       return [];

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

@@ -74,6 +74,7 @@ import {
   renderSmalltext,
 } from './simple-text-components';
 import {
+  renderCircleLow,
   renderHorizontalLowLine,
   renderImagePlaceHolder,
   renderVerticalLowLine,
@@ -217,6 +218,8 @@ export const renderShapeComponent = (
       return renderVerticalLowLine(shape, shapeRenderedProps);
     case 'ellipseLow':
       return renderEllipseLow(shape, shapeRenderedProps);
+    case 'circleLow':
+      return renderCircleLow(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

src/pods/canvas/shape-renderer/simple-low-wireframes-components/circle-low.renderer.tsx

@@ -0,0 +1,31 @@
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+import { CircleLowShape } from '@/common/components/mock-components/front-low-wireframes-components';
+
+export const renderCircleLow = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <CircleLowShape
+      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-low-wireframes-components/index.ts

@@ -2,3 +2,4 @@ export * from './ellipse-low.renderer';
 export * from './image-placeholder.renderer';
 export * from './low-horizontal-line.renderer';
 export * from './low-vertical-line.renderer';
+export * from './circle-low.renderer';

src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts

@@ -17,4 +17,8 @@ export const mockLowWireframeCollection: ItemInfo[] = [
     thumbnailSrc: '/low-wireframes/ellipseLow.svg',
     type: 'ellipseLow',
   },
+  {
+    thumbnailSrc: '/low-wireframes/circleLow.svg',
+    type: 'circleLow',
+  },
 ];