diff --git a/public/low-wireframes/verticalLineLow.svg b/public/low-wireframes/verticalLineLow.svg new file mode 100644 index 00000000..a5fe5920 --- /dev/null +++ b/public/low-wireframes/verticalLineLow.svg @@ -0,0 +1,4 @@ + + + + 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 92eda2a0..0c17a7c2 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 @@ -1 +1,2 @@ export * from './image-placeholder-shape'; +export * from './vertical-line-low-shape'; diff --git a/src/common/components/mock-components/front-low-wireframes-components/vertical-line-low-shape.tsx b/src/common/components/mock-components/front-low-wireframes-components/vertical-line-low-shape.tsx new file mode 100644 index 00000000..f725aabf --- /dev/null +++ b/src/common/components/mock-components/front-low-wireframes-components/vertical-line-low-shape.tsx @@ -0,0 +1,74 @@ +import { forwardRef } from 'react'; +import { Group, Line, Rect } from 'react-konva'; +import { ShapeSizeRestrictions, ShapeType } from '@/core/model'; +import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions'; +import { ShapeProps } from '../shape.model'; +import { useShapeProps } from '../../shapes/use-shape-props.hook'; +import { BASIC_SHAPE } from '../front-components/shape.const'; +import { useGroupShapeProps } from '../mock-components.utils'; + +const verticalLineLowShapeRestrictions: ShapeSizeRestrictions = { + minWidth: 10, + minHeight: 30, + maxWidth: 10, + maxHeight: -1, + defaultWidth: 10, + defaultHeight: 200, +}; + +export const getVerticalLineLowShapeRestrictions = (): ShapeSizeRestrictions => + verticalLineLowShapeRestrictions; + +const shapeType: ShapeType = 'verticalLineLow'; + +export const VerticalLineLowShape = forwardRef( + (props, ref) => { + const { + x, + y, + width, + height, + id, + onSelected, + text, + otherProps, + ...shapeProps + } = props; + const restrictedSize = fitSizeToShapeSizeRestrictions( + verticalLineLowShapeRestrictions, + width, + height + ); + + const { width: restrictedWidth, height: restrictedHeight } = restrictedSize; + + const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE); + + const commonGroupProps = useGroupShapeProps( + props, + restrictedSize, + shapeType, + ref + ); + + return ( + + {/* Transparent rectangle for applying margin */} + + + + + ); + } +); diff --git a/src/core/model/index.ts b/src/core/model/index.ts index 3ce8dc4a..7167a472 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -77,7 +77,8 @@ export type ShapeType = | 'videoconference' | 'richtext' | 'gauge' - | 'imagePlaceholder'; + | 'imagePlaceholder' + | 'verticalLineLow'; export const ShapeDisplayName: Record = { multiple: 'multiple', @@ -144,6 +145,7 @@ export const ShapeDisplayName: Record = { videoconference: 'Videoconference', gauge: 'Gauge', imagePlaceholder: 'Image Placeholder', + verticalLineLow: 'Vertical Divider', }; 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 43e9f5d7..5898ba85 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -122,6 +122,7 @@ export const generateDefaultOtherProps = ( borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`, }; case 'horizontalLine': + case 'verticalLineLow': return { stroke: '#000000', strokeStyle: [], diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts index c4425897..853b98c1 100644 --- a/src/pods/canvas/model/shape-size.mapper.ts +++ b/src/pods/canvas/model/shape-size.mapper.ts @@ -64,7 +64,6 @@ import { getVideoPlayerShapeSizeRestrictions, getVideoconferenceShapeSizeRestrictions, getGaugeShapeSizeRestrictions, - // other imports } from '@/common/components/mock-components/front-rich-components'; import { @@ -80,6 +79,7 @@ import { } from '@/common/components/mock-components/front-text-components'; import { getImagePlaceholderShapeSizeRestrictions } from '@/common/components/mock-components/front-low-wireframes-components'; +import { getVerticalLineLowShapeRestrictions } from '@/common/components/mock-components/front-low-wireframes-components/vertical-line-low-shape'; const getMultipleNodeSizeRestrictions = (): ShapeSizeRestrictions => ({ minWidth: 0, @@ -156,6 +156,7 @@ const shapeSizeMap: Record ShapeSizeRestrictions> = { gauge: getGaugeShapeSizeRestrictions, imagePlaceholder: getImagePlaceholderShapeSizeRestrictions, chip: getChipShapeSizeRestrictions, + verticalLineLow: getVerticalLineLowShapeRestrictions, }; export default shapeSizeMap; diff --git a/src/pods/canvas/model/transformer.model.ts b/src/pods/canvas/model/transformer.model.ts index f5fdb32a..8da7a9eb 100644 --- a/src/pods/canvas/model/transformer.model.ts +++ b/src/pods/canvas/model/transformer.model.ts @@ -72,6 +72,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => { return ['middle-left', 'middle-right']; case 'verticalLine': case 'verticalScrollBar': + case 'verticalLineLow': return ['top-center', 'bottom-center']; case 'icon': case 'multiple': diff --git a/src/pods/canvas/shape-renderer/index.tsx b/src/pods/canvas/shape-renderer/index.tsx index d2f1f668..51f3ff24 100644 --- a/src/pods/canvas/shape-renderer/index.tsx +++ b/src/pods/canvas/shape-renderer/index.tsx @@ -73,7 +73,10 @@ import { renderRichTextParagraph, renderSmalltext, } from './simple-text-components'; -import { renderImagePlaceHolder } from './simple-low-wireframes-components'; +import { + renderImagePlaceHolder, + renderVerticalLowLine, +} from './simple-low-wireframes-components'; export const renderShapeComponent = ( shape: ShapeModel, @@ -206,6 +209,8 @@ export const renderShapeComponent = ( return renderImagePlaceHolder(shape, shapeRenderedProps); case 'chip': return renderChip(shape, shapeRenderedProps); + case 'verticalLineLow': + return renderVerticalLowLine(shape, shapeRenderedProps); default: return renderNotFound(shape, shapeRenderedProps); } 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 dbfa84fd..83283d37 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 @@ -1 +1,2 @@ export * from './image-placeholder.renderer'; +export * from './low-vertical-line.renderer'; diff --git a/src/pods/canvas/shape-renderer/simple-low-wireframes-components/low-vertical-line.renderer.tsx b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/low-vertical-line.renderer.tsx new file mode 100644 index 00000000..5106aa10 --- /dev/null +++ b/src/pods/canvas/shape-renderer/simple-low-wireframes-components/low-vertical-line.renderer.tsx @@ -0,0 +1,31 @@ +import { VerticalLineLowShape } from '@/common/components/mock-components/front-low-wireframes-components/vertical-line-low-shape'; +import { ShapeRendererProps } from '../model'; +import { ShapeModel } from '@/core/model'; + +export const renderVerticalLowLine = ( + shape: ShapeModel, + shapeRenderedProps: ShapeRendererProps +) => { + const { handleSelected, shapeRefs, handleDragEnd, handleTransform } = + shapeRenderedProps; + + return ( + + ); +}; 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 4df50127..acdcfb80 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 @@ -5,4 +5,8 @@ export const mockLowWireframeCollection: ItemInfo[] = [ thumbnailSrc: '/low-wireframes/imagePlaceholder.svg', type: 'imagePlaceholder', }, + { + thumbnailSrc: '/low-wireframes/verticalLineLow.svg', + type: 'verticalLineLow', + }, ];