merge resolved

Author: brauliodiez

public/low-wireframes/circleLow.svg

@@ -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-components/shape.const.ts

@@ -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/circle-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/ellipse-low-shape.tsx

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

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

@@ -81,7 +81,8 @@ export type ShapeType =
   | 'horizontalLineLow'
   | 'verticalLineLow'
   | 'ellipseLow'
-  | 'rectangleLow';
+  | 'rectangleLow'
+  | 'circleLow';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -152,6 +153,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   verticalLineLow: 'Vertical Divider',
   ellipseLow: 'Ellipse',
   rectangleLow: 'Rectangle Placeholder',
+  circleLow: 'Circle',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/core/model/index.ts

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

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

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

src/pods/canvas/model/shape-size.mapper.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/model/transformer.model.ts

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