feature/#213 Create a badge component to be placed under Rich Components

src/common/components/mock-components/front-rich-components/badge-label.tsx

@@ -0,0 +1,84 @@
+import { Group, Rect, Text } from 'react-konva';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { BASIC_SHAPE } from '../front-components/shape.const';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const BadgeLabelShapeSizeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 40,
+  minHeight: 40,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 150,
+  defaultHeight: 40,
+};
+
+export const getBadgeLabelShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  BadgeLabelShapeSizeRestrictions;
+
+const shapeType: ShapeType = 'badgelabel';
+
+export const BadgeLabelShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    text,
+    onSelected,
+    otherProps,
+    ...shapeProps
+  } = props;
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    BadgeLabelShapeSizeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeigth } = restrictedSize;
+  const { stroke, strokeStyle, borderRadius, fill, textColor } = useShapeProps(
+    otherProps,
+    BASIC_SHAPE
+  );
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth}
+        height={restrictedHeigth}
+        fill={fill}
+        stroke={stroke}
+        dash={strokeStyle}
+        strokeWidth={2}
+        cornerRadius={borderRadius}
+      />
+
+      <Text
+        x={BASIC_SHAPE.DEFAULT_PADDING}
+        y={BASIC_SHAPE.DEFAULT_PADDING}
+        width={restrictedWidth - BASIC_SHAPE.DEFAULT_PADDING}
+        height={restrictedHeigth - BASIC_SHAPE.DEFAULT_FONT_SIZE}
+        text={text}
+        fontFamily="Arial"
+        fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE}
+        fill={textColor}
+        verticalAlign="middle"
+        align="center"
+        ellipsis={true}
+      />
+    </Group>
+  );
+});

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

@@ -12,5 +12,6 @@ export * from './table/table';
 export * from './modal/modal';
 export * from './appBar';
 export * from './buttonBar/buttonBar';
+export * from './badge-label';
 export * from './tabsbar';
 export * from './audio-player';

src/core/model/index.ts

@@ -66,7 +66,8 @@ export type ShapeType =
   | 'appBar'
   | 'buttonBar'
   | 'tooltip'
-  | 'slider';
+  | 'slider'
+  | 'badgelabel';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -123,6 +124,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   buttonBar: 'Button Bar',
   tooltip: 'Tooltip',
   slider: 'Slider',
+  badgelabel: 'Badge Label',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

src/pods/canvas/model/inline-editable.model.ts

@@ -30,6 +30,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'buttonBar',
   'tabsBar',
   'tooltip',
+  'badgelabel',
   'timepickerinput',
   'datepickerinput',
   'browser',
@@ -67,6 +68,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'appBar',
   'buttonBar',
   'tabsBar',
+  'badgelabel',
   'timepickerinput',
   'datepickerinput',
   'browser',
@@ -101,6 +103,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   appBar: 'AppBar',
   buttonBar: 'Button 1, Button 2, Button 3',
   tabsBar: 'Tab 1, Tab 2, Tab 3',
+  badgelabel: 'Badge Label',
   timepickerinput: 'hh:mm',
   datepickerinput: new Date().toLocaleDateString(),
   browser: 'https://example.com',

src/pods/canvas/model/shape-other-props.utils.ts

@@ -206,6 +206,14 @@ export const generateDefaultOtherProps = (
       return {
         activeElement: 0,
       };
+    case 'badgelabel':
+      return {
+        stroke: '#939393',
+        backgroundColor: '#D3D3D3',
+        textColor: '#000000',
+        strokeStyle: [],
+        borderRadius: '12',
+      };
     default:
       return undefined;
   }

src/pods/canvas/model/shape-size.mapper.ts

@@ -57,6 +57,7 @@ import {
   getTabsBarShapeSizeRestrictions,
   getVerticalMenuShapeSizeRestrictions,
   getVideoPlayerShapeSizeRestrictions,
+  getBadgeLabelShapeSizeRestrictions,
   // other imports
 } from '@/common/components/mock-components/front-rich-components';
 import {
@@ -134,6 +135,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   tooltip: getTooltipShapeSizeRestrictions,
   slider: getSliderShapeSizeRestrictions,
   audioPlayer: getAudioPlayerShapeSizeRestrictions,
+  badgelabel: getBadgeLabelShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;

src/pods/canvas/model/transformer.model.ts

@@ -64,6 +64,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'appBar':
     case 'buttonBar':
     case 'slider':
+    case 'badgelabel':
       return ['middle-left', 'middle-right'];
     case 'verticalLine':
     case 'verticalScrollBar':

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

@@ -40,6 +40,7 @@ import {
   renderAudioPlayer,
   renderModal,
   renderButtonBar,
+  renderBadgeLabel,
   renderTabsBar,
 } from './simple-rich-components';
 import {
@@ -176,6 +177,8 @@ export const renderShapeComponent = (
       return renderTooltip(shape, shapeRenderedProps);
     case 'slider':
       return renderSlider(shape, shapeRenderedProps);
+    case 'badgelabel':
+      return renderBadgeLabel(shape, shapeRenderedProps);
     default:
       return renderNotFound(shape, shapeRenderedProps);
   }

src/pods/canvas/shape-renderer/simple-rich-components/badge-label.renderer.tsx

@@ -0,0 +1,33 @@
+import { BadgeLabelShape } from '@/common/components/mock-components/front-rich-components';
+import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
+
+export const renderBadgeLabel = (
+  shape: ShapeModel,
+  shapeRenderedProps: ShapeRendererProps
+) => {
+  const { handleSelected, shapeRefs, handleDragEnd, handleTransform } =
+    shapeRenderedProps;
+
+  return (
+    <BadgeLabelShape
+      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

@@ -12,5 +12,6 @@ export * from './table.renderer';
 export * from './modal.renderer';
 export * from './appBar.renderer';
 export * from './button-bar.renderer';
+export * from './badge-label.renderer';
 export * from './tabsbar.renderer';
 export * from './audio-player.renderer';

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

@@ -12,12 +12,16 @@ export const mockRichComponentsCollection: ItemInfo[] = [
     thumbnailSrc: '/rich-components/horizontal-menu.svg',
     type: 'horizontal-menu',
   },
+  {
+    thumbnailSrc: '/rich-components/vertical-menu.svg',
+    type: 'vertical-menu',
+  },
+  { thumbnailSrc: '/rich-components/badgelabel.svg', type: 'badgelabel' },
+  { thumbnailSrc: '/rich-components/modal.svg', type: 'modal' },
   { thumbnailSrc: '/rich-components/line-chart.svg', type: 'linechart' },
   { thumbnailSrc: '/rich-components/map.svg', type: 'map' },
-  { thumbnailSrc: '/rich-components/modal.svg', type: 'modal' },
   { thumbnailSrc: '/rich-components/pie.svg', type: 'pie' },
   { thumbnailSrc: '/rich-components/table.svg', type: 'table' },
   { thumbnailSrc: '/rich-components/tabsbar.svg', type: 'tabsBar' },
-  { thumbnailSrc: '/rich-components/vertical-menu.svg', type: 'vertical-menu' },
   { thumbnailSrc: '/rich-components/videoPlayer.svg', type: 'videoPlayer' },
 ];