implemented low vertical line shape component

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';

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<any, ShapeProps>(
+  (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 (
+      <Group {...commonGroupProps} {...shapeProps}>
+        {/* Transparent rectangle for applying margin */}
+        <Rect
+          width={restrictedWidth}
+          height={restrictedHeight}
+          fill="transparent"
+        />
+
+        <Line
+          x={restrictedWidth / 2}
+          y={0}
+          points={[0, 0, 0, restrictedHeight]}
+          stroke={stroke}
+          strokeWidth={4}
+          dash={strokeStyle}
+        />
+      </Group>
+    );
+  }
+);

src/core/model/index.ts

@@ -77,7 +77,8 @@ export type ShapeType =
   | 'videoconference'
   | 'richtext'
   | 'gauge'
-  | 'imagePlaceholder';
+  | 'imagePlaceholder'
+  | 'verticalLineLow';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -144,6 +145,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   videoconference: 'Videoconference',
   gauge: 'Gauge',
   imagePlaceholder: 'Image Placeholder',
+  verticalLineLow: 'Vertical Divider',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

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: [],

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<ShapeType, () => ShapeSizeRestrictions> = {
   gauge: getGaugeShapeSizeRestrictions,
   imagePlaceholder: getImagePlaceholderShapeSizeRestrictions,
   chip: getChipShapeSizeRestrictions,
+  verticalLineLow: getVerticalLineLowShapeRestrictions,
 };
 
 export default shapeSizeMap;

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':

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);
   }

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';

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 (
+    <VerticalLineLowShape
+      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/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',
+  },
 ];