ButtonBar implementation

src/common/components/front-rich-components/buttonBar.tsx

@@ -0,0 +1,100 @@
+import { ShapeSizeRestrictions } from '@/core/model';
+import { forwardRef, useMemo } from 'react';
+import { Group, Rect, Text } from 'react-konva';
+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 getButtonBarShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  horizontalMenuShapeSizeRestrictions;
+
+export const ButtonBarShape = forwardRef<any, ShapeProps>(
+  (
+    { x, y, width, height, id, onSelected, text, otherProps, ...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;
+
+    const textColor = useMemo(
+      () => otherProps?.textColor ?? 'black',
+      [otherProps?.textColor]
+    );
+    const backgroundColor = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+    const strokeColor = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+    const strokeStyle = useMemo(
+      () => otherProps?.strokeStyle ?? [],
+      [otherProps?.strokeStyle]
+    );
+
+    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={strokeColor}
+          strokeWidth={2}
+          dash={strokeStyle}
+          fill={backgroundColor}
+        />
+
+        {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={textColor}
+              width={itemWidth}
+              align="center"
+              wrap="none"
+              ellipsis={true}
+            />
+          </Group>
+        ))}
+      </Group>
+    );
+  }
+);
+
+export default ButtonBarShape;

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

@@ -11,3 +11,4 @@ export * from './calendar/calendar';
 export * from './table/table';
 export * from './modal/modal';
 export * from './appBar';
+export * from './buttonBar';

src/core/model/index.ts

@@ -58,7 +58,8 @@ export type ShapeType =
   | 'verticalScrollBar'
   | 'horizontalScrollBar'
   | 'modal'
-  | 'appBar';
+  | 'appBar'
+  | 'buttonBar';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   combobox: 'Combobox',
@@ -108,6 +109,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   verticalScrollBar: 'Vertical Scroll Bar',
   modal: 'Modal',
   appBar: 'AppBar',
+  buttonBar: 'Button Bar',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/pods/canvas/canvas.model.ts

@@ -57,6 +57,7 @@ import {
   getTableSizeRestrictions,
   getModalShapeSizeRestrictions,
   getAppBarShapeSizeRestrictions,
+  getButtonBarShapeSizeRestrictions,
 } from '@/common/components/front-rich-components';
 import {
   getHeading1SizeRestrictions,
@@ -169,6 +170,8 @@ export const getSizeRestrictionFromShape = (
       return getModalShapeSizeRestrictions();
     case 'appBar':
       return getAppBarShapeSizeRestrictions();
+    case 'buttonBar':
+      return getButtonBarShapeSizeRestrictions();
     default:
       console.warn(
         `** Shape ${shapeType} has not defined default size, check getDefaultSizeFromShape helper function`
@@ -223,6 +226,7 @@ const doesShapeAllowInlineEdition = (shapeType: ShapeType): boolean => {
     case 'table':
     case 'modal':
     case 'appBar':
+    case 'buttonBar':
       return true;
     default:
       return false;
@@ -252,6 +256,7 @@ const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'smalltext':
     case 'horizontalScrollBar':
     case 'appBar':
+    case 'buttonBar':
       return ['middle-left', 'middle-right'];
     case 'verticalScrollBar':
       return ['top-center', 'bottom-center'];
@@ -317,6 +322,8 @@ const generateDefaultTextValue = (shapeType: ShapeType): string | undefined => {
       return 'Alert\nWarning: The action you are about to perform may affect existing data. Are you sure you want to proceed? Once confirmed, this action cannot be undone.\nConfirm,Cancel';
     case 'appBar':
       return 'AppBar';
+    case 'buttonBar':
+      return 'Button 1\nButton 2\nButton 3';
     default:
       return undefined;
   }
@@ -337,6 +344,7 @@ const getShapeEditInlineType = (shapeType: ShapeType): EditType | undefined => {
     case 'table':
     case 'modal':
     case 'appBar':
+    case 'buttonBar':
       return 'textarea';
       break;
     case 'image':
@@ -366,6 +374,7 @@ export const generateDefaultOtherProps = (
     case 'datepickerinput':
     case 'timepickerinput':
     case 'modal':
+    case 'buttonBar':
       return {
         stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,
         backgroundColor: BASIC_SHAPE.DEFAULT_FILL_BACKGROUND,

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

@@ -36,6 +36,7 @@ import {
   renderVerticalMenuShape,
   renderTable,
   renderModal,
+  renderButtonBar,
 } from './simple-rich-components';
 import {
   renderDiamond,
@@ -158,6 +159,8 @@ export const renderShapeComponent = (
       return renderModal(shape, shapeRenderedProps);
     case 'appBar':
       return renderAppBar(shape, shapeRenderedProps);
+    case 'buttonBar':
+      return renderButtonBar(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

src/pods/canvas/shape-renderer/simple-rich-components/button-bar.renderer.tsx

@@ -0,0 +1,33 @@
+import { ButtonBarShape } from '@/common/components/front-rich-components/buttonBar';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderButtonBar = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <ButtonBarShape
+      id={shape.id}
+      key={shape.id}
+      x={shape.x}
+      y={shape.y}
+      width={shape.width}
+      height={shape.height}
+      name="shape"
+      draggable
+      typeOfTransformer={shape.typeOfTransformer}
+      onSelected={handleSelected}
+      ref={shapeRefs.current[shape.id]}
+      onDragEnd={handleDragEnd(shape.id)}
+      onTransform={handleTransform}
+      onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
+      otherProps={shape.otherProps}
+    />
+  );
+};

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

@@ -11,3 +11,4 @@ export * from './calendar.renderer';
 export * from './table.renderer';
 export * from './modal.renderer';
 export * from './appBar.renderer';
+export * from './button-bar.renderer';

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

@@ -20,4 +20,5 @@ export const mockRichComponentsCollection: ItemInfo[] = [
   { thumbnailSrc: '/rich-components/table.svg', type: 'table' },
   { thumbnailSrc: '/rich-components/modal.svg', type: 'modal' },
   { thumbnailSrc: '/rich-components/appBar.svg', type: 'appBar' },
+  { thumbnailSrc: '/rich-components/button-bar-group.svg', type: 'buttonBar' },
 ];