Feature/#270 horizontal menu selected option

[LourdesRsdp]

Closes #271

[oleojake]

Hi @LourdesRsdp, @brauliodiez told me if I could take a look to the strange behavior of ButtonBar.

I fixed it using the useShapeComponentSelection method instead the old () => onSelected(id, 'buttonBar', true).

There you have the code that worked for me, hope it could help.

import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
import { forwardRef, useEffect, useMemo, useState } from 'react';
import { Group, Path, Text } from 'react-konva';
import { ShapeProps } from '../../front-components/shape.model';
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
import { mapButtonBarTextToItems } from './buttonBar.utils';
import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook';

const buttonBarShapeSizeRestrictions: ShapeSizeRestrictions = {
  minWidth: 75,
  minHeight: 25,
  maxWidth: -1,
  maxHeight: 100,
  defaultWidth: 500,
  defaultHeight: 50,
};

export const getButtonBarShapeSizeRestrictions = (): ShapeSizeRestrictions =>
  buttonBarShapeSizeRestrictions;

const shapeType: ShapeType = 'buttonBar';

export const ButtonBarShape = forwardRef<any, ShapeProps>((props, ref) => {
  const {
    x,
    y,
    width,
    height,
    id,
    onSelected,
    text,
    otherProps,
    ...shapeProps
  } = props;
  const [buttonItems, setButtonItems] = useState<string[]>([]);

  useEffect(() => {
    if (typeof text === 'string') {
      const { items } = mapButtonBarTextToItems(text);
      setButtonItems(items);
    } else {
      setButtonItems([]);
    }
  }, [text]);

  const numberOfItems = buttonItems.length;

  const { width: restrictedWidth, height: restrictedHeight } =
    fitSizeToShapeSizeRestrictions(
      buttonBarShapeSizeRestrictions,
      width,
      height
    );

  const itemWidth =
    numberOfItems > 0 ? restrictedWidth / numberOfItems : restrictedWidth;

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

  const { handleSelection } = useShapeComponentSelection(props, shapeType);

  return (
    <Group
      x={x}
      y={y}
      width={restrictedWidth}
      height={restrictedHeight}
      ref={ref}
      {...shapeProps}
      onClick={handleSelection}
    >
      <Path
        data={`M0,0 H${restrictedWidth} V${restrictedHeight} H0 Z`}
        stroke={strokeColor}
        strokeWidth={2}
        dash={strokeStyle}
        fill={backgroundColor}
      />

      {buttonItems.map((e: string, index: number) => (
        <Group key={index}>
          {/* Vertical strokes */}
          <Path
            data={`M${index * itemWidth},0 V${restrictedHeight}`}
            stroke={strokeColor}
            strokeWidth={1}
            dash={strokeStyle}
          />
          <Text
            x={index * itemWidth}
            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;

[brauliodiez]

Thanks you @oleojake I have just added the fix