#171 horizontal menu implemented

src/common/components/front-rich-components/horizontal-menu.tsx

@@ -0,0 +1,77 @@
+import { Group, Rect, Text } from 'react-konva';
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../front-components/shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+
+const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 75,
+  minHeight: 25,
+  maxWidth: -1,
+  maxHeight: 100,
+  defaultWidth: 200,
+  defaultHeight: 50,
+};
+
+export const getHorizontalMenuShapeSizeRestrictions =
+  (): ShapeSizeRestrictions => horizontalMenuShapeSizeRestrictions;
+
+export const HorizontalMenu = forwardRef<any, ShapeProps>(
+  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
+    const menuElements: string[] = text.split('\n');
+    const numberOfItems = menuElements.length;
+    const minItemWidth = 100;
+    const itemSpacing = 20;
+    const totalWidth = Math.max(
+      minItemWidth * numberOfItems + itemSpacing * (numberOfItems + 1),
+      width
+    );
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(
+        horizontalMenuShapeSizeRestrictions,
+        totalWidth,
+        height
+      );
+    const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1);
+    const itemWidth = totalMargins / numberOfItems;
+
+    return (
+      <Group
+        x={x}
+        y={y}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        ref={ref}
+        {...shapeProps}
+        onClick={() => onSelected(id, 'horizontal-menu')}
+      >
+        <Rect
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight}
+          stroke="black"
+          strokeWidth={2}
+          fill="white"
+        />
+
+        {menuElements.map((e: string, index: number) => (
+          <Group key={index}>
+            <Text
+              x={itemSpacing * (index + 1) + itemWidth * index}
+              y={restrictedHeight / 2 - 8}
+              text={e}
+              fontFamily="Arial"
+              fontSize={16}
+              fill="black"
+              width={itemWidth}
+              align="center"
+              wrap="none"
+              ellipsis={true}
+            />
+          </Group>
+        ))}
+      </Group>
+    );
+  }
+);

src/common/components/front-rich-components/index.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './breadcrumb/breadcrumb';
 export * from './pie-chart';
+export * from './horizontal-menu';
 export * from './map-chart';
 export * from './video-player';

src/core/model/index.ts

@@ -30,6 +30,7 @@ export type ShapeType =
   | 'line'
   | 'accordion'
   | 'pie'
+  | 'horizontal-menu'
   | 'breadcrumb'
   | 'map'
   | 'circle'

src/pods/canvas/canvas.model.ts

@@ -30,6 +30,7 @@ import {
   getBreadcrumbShapeSizeRestrictions,
   getPieChartShapeSizeRestrictions,
   getVideoPlayerShapeSizeRestrictions,
+  getHorizontalMenuShapeSizeRestrictions,
   getMapChartShapeSizeRestrictions,
 } from '@/common/components/front-rich-components';
 
@@ -131,6 +132,11 @@ export const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
         width: getPieChartShapeSizeRestrictions().defaultWidth,
         height: getPieChartShapeSizeRestrictions().defaultHeight,
       };
+    case 'horizontal-menu':
+      return {
+        width: getHorizontalMenuShapeSizeRestrictions().defaultWidth,
+        height: getHorizontalMenuShapeSizeRestrictions().defaultHeight,
+      };
     case 'breadcrumb':
       return {
         width: getBreadcrumbShapeSizeRestrictions().defaultWidth,
@@ -169,6 +175,7 @@ const doesShapeAllowInlineEdition = (shapeType: ShapeType): boolean => {
     case 'accordion':
     case 'checkbox':
     case 'radiobutton':
+    case 'horizontal-menu':
     case 'breadcrumb':
       return true;
     default:
@@ -205,6 +212,8 @@ const generateDefaultTextValue = (shapeType: ShapeType): string | undefined => {
       return 'Home\nCategory\nProducts';
     case 'checkbox':
       return 'Check me!';
+    case 'horizontal-menu':
+      return 'Home\nAbout\nServices\nContact';
     default:
       return undefined;
   }
@@ -216,6 +225,7 @@ const getShapeEditInlineType = (shapeType: ShapeType): EditType | undefined => {
   switch (shapeType) {
     case 'textarea':
     case 'accordion':
+    case 'horizontal-menu':
     case 'breadcrumb':
       return 'textarea';
       break;

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

@@ -20,18 +20,21 @@ import {
   renderMobilePhoneContainer,
   renderTablet,
 } from './simple-container';
-import { renderVideoPlayer } from './simple-rich-components';
+import {
+  renderVideoPlayer,
+  renderAccordion,
+  renderHorizontalMenu,
+  renderPieChart,
+  renderMapChart,
+  renderBreadcrumb,
+} from './simple-rich-components';
 import {
   renderDiamond,
   renderRectangle,
   renderLine,
   renderCircle,
   renderStar,
 } from './simple-basic-shapes';
-import { renderAccordion } from './simple-rich-components/accordion.renderer';
-import { renderPieChart } from './simple-rich-components/pie-chart.renderer';
-import { renderBreadcrumb } from './simple-rich-components/breadcrumb.renderer';
-import { renderMapChart } from './simple-rich-components/map-chart.renderer';
 
 export const renderShapeComponent = (
   shape: ShapeModel,
@@ -82,6 +85,8 @@ export const renderShapeComponent = (
       return renderLine(shape, shapeRenderedProps);
     case 'accordion':
       return renderAccordion(shape, shapeRenderedProps);
+    case 'horizontal-menu':
+      return renderHorizontalMenu(shape, shapeRenderedProps);
     case 'breadcrumb':
       return renderBreadcrumb(shape, shapeRenderedProps);
     case 'circle':

src/pods/canvas/shape-renderer/simple-rich-components/horizontal-menu.renderer.tsx

@@ -0,0 +1,32 @@
+import { HorizontalMenu } from '@/common/components/front-rich-components';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderHorizontalMenu = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <HorizontalMenu
+      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
+      onSelected={handleSelected}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+      editType={shape.editType}
+      isEditable={true}
+      text={shape.text}
+    />
+  );
+};

src/pods/canvas/shape-renderer/simple-rich-components/index.ts

@@ -1 +1,6 @@
 export * from './video-player.renderer';
+export * from './accordion.renderer';
+export * from './pie-chart.renderer';
+export * from './horizontal-menu.renderer';
+export * from './map-chart.renderer';
+export * from './breadcrumb.renderer';

src/pods/rich-components-gallery/rich-components-gallery-data/index.ts

@@ -4,6 +4,10 @@ export const mockRichComponentsCollection: ItemInfo[] = [
   { thumbnailSrc: '/rich-components/videoPlayer.svg', type: 'videoPlayer' },
   { thumbnailSrc: '/rich-components/accordion.svg', type: 'accordion' },
   { thumbnailSrc: '/rich-components/pie.svg', type: 'pie' },
+  {
+    thumbnailSrc: '/rich-components/horizontal-menu.svg',
+    type: 'horizontal-menu',
+  },
   { thumbnailSrc: '/rich-components/breadcrumb.svg', type: 'breadcrumb' },
   { thumbnailSrc: '/rich-components/map.svg', type: 'map' },
 ];