diff --git a/public/low-wireframes/circleLow.svg b/public/low-wireframes/circleLow.svg new file mode 100644 index 00000000..0d9ad5e6 --- /dev/null +++ b/public/low-wireframes/circleLow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts index 8a9bfdf0..ef3b588a 100644 --- a/src/common/components/mock-components/front-components/shape.const.ts +++ b/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, diff --git a/src/common/components/mock-components/front-low-wireframes-components/circle-low-shape.tsx b/src/common/components/mock-components/front-low-wireframes-components/circle-low-shape.tsx new file mode 100644 index 00000000..8776c727 --- /dev/null +++ b/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((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 ( + + + + ); +}); diff --git a/src/common/components/mock-components/front-low-wireframes-components/ellipse-low-shape.tsx b/src/common/components/mock-components/front-low-wireframes-components/ellipse-low-shape.tsx index e0d53bf1..ebae40d4 100644 --- a/src/common/components/mock-components/front-low-wireframes-components/ellipse-low-shape.tsx +++ b/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((props, ref) => { radiusX={restrictedWidth} radiusY={restrictedHeight} stroke={stroke} - strokeWidth={4} + strokeWidth={LOW_WIREFRAME_SHAPE.DEFAULT_STROKE_WIDTH} dash={strokeStyle} /> diff --git a/src/common/components/mock-components/front-low-wireframes-components/index.ts b/src/common/components/mock-components/front-low-wireframes-components/index.ts index b06f4678..48739579 100644 --- a/src/common/components/mock-components/front-low-wireframes-components/index.ts +++ b/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'; diff --git a/src/core/model/index.ts b/src/core/model/index.ts index 3d7c4ef0..e3cd0d79 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -80,7 +80,8 @@ export type ShapeType = | 'imagePlaceholder' | 'horizontalLineLow' | 'verticalLineLow' - | 'ellipseLow'; + | 'ellipseLow' + | 'circleLow'; export const ShapeDisplayName: Record = { multiple: 'multiple', @@ -150,6 +151,7 @@ export const ShapeDisplayName: Record = { horizontalLineLow: 'Horizontal Divider', verticalLineLow: 'Vertical Divider', ellipseLow: 'Ellipse', + circleLow: 'Circle', }; export type EditType = 'input' | 'textarea' | 'imageupload'; diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index a319a05e..ae5e47f3 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/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 { diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts index 7f634020..fa029ea9 100644 --- a/src/pods/canvas/model/shape-size.mapper.ts +++ b/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 ShapeSizeRestrictions> = { horizontalLineLow: getHorizontalLineLowShapeRestrictions, verticalLineLow: getVerticalLineLowShapeRestrictions, ellipseLow: getEllipseLowShapeRestrictions, + circleLow: getCircleLowShapeSizeRestrictions, }; export default shapeSizeMap; diff --git a/src/pods/canvas/model/transformer.model.ts b/src/pods/canvas/model/transformer.model.ts index 91c9ba23..a28695a4 100644 --- a/src/pods/canvas/model/transformer.model.ts +++ b/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 []; diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx index c761ab9e..7e667e91 100644 --- a/src/pods/canvas/shape-renderer/index.tsx +++ b/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); } diff --git a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/circle-low.renderer.tsx b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/circle-low.renderer.tsx new file mode 100644 index 00000000..0c640ba0 --- /dev/null +++ b/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 ( + + ); +}; diff --git a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts index 3687a514..8d2aadce 100644 --- a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/index.ts +++ b/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'; diff --git a/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts b/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts index 2da8c34f..8eec8543 100644 --- a/src/pods/galleries/low-wireframe-gallery/low-wireframe-gallery-data/index.ts +++ b/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', + }, ];