Feature/#689 create fab button

src/common/components/mock-components/front-components/icon/icon-shape.business.ts

@@ -1,20 +1,5 @@
 import { IconSize } from '@/core/model';
 
-export const loadSvgWithFill = async (url: string, fillColor: string) => {
-  const response = await fetch(url);
-  const svgText = await response.text();
-
-  const modifiedSvg = svgText.replace(/fill="[^"]*"/g, `fill="${fillColor}"`);
-
-  const svgBlob = new Blob([modifiedSvg], { type: 'image/svg+xml' });
-  const objectURL = URL.createObjectURL(svgBlob);
-
-  const img = new window.Image();
-  img.src = objectURL;
-
-  return img;
-};
-
 export const returnIconSize = (iconSize: IconSize): number[] => {
   switch (iconSize) {
     case 'XS':

src/common/components/mock-components/front-components/icon/icon-shape.tsx

@@ -7,7 +7,8 @@ import { useModalDialogContext } from '@/core/providers/model-dialog-providers/m
 import { IconModal } from '@/pods/properties/components/icon-selector/modal';
 import { useCanvasContext } from '@/core/providers';
 import { useGroupShapeProps } from '../../mock-components.utils';
-import { loadSvgWithFill, returnIconSize } from './icon-shape.business';
+import { returnIconSize } from './icon-shape.business';
+import { loadSvgWithFill } from '@/common/utils/svg.utils';
 
 const iconShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 25,

src/common/components/mock-components/front-rich-components/fab-button/fab-button.tsx

@@ -0,0 +1,96 @@
+import { BASE_ICONS_URL, ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef, useEffect, useState } from 'react';
+import { Circle, Group, Image } from 'react-konva';
+import { ShapeProps } from '../../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes';
+import { useShapeProps } from '@/common/components/shapes/use-shape-props.hook';
+import { useGroupShapeProps } from '../../mock-components.utils';
+import { BASIC_SHAPE } from '../../front-components/shape.const';
+import { IconModal } from '@/pods/properties/components/icon-selector/modal';
+import { useModalDialogContext } from '@/core/providers/model-dialog-providers/model-dialog.provider';
+import { useCanvasContext } from '@/core/providers';
+import { loadSvgWithFill } from '@/common/utils/svg.utils';
+
+const fabButtonShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 25,
+  minHeight: 25,
+  maxWidth: -1,
+  maxHeight: -1,
+  defaultWidth: 85,
+  defaultHeight: 85,
+};
+
+const shapeType: ShapeType = 'fabButton';
+
+export const getFabButtonShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  fabButtonShapeRestrictions;
+
+export const FabButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } =
+    props;
+
+  const [iconImage, setIconImage] = useState<HTMLImageElement | null>(null);
+
+  const { openModal } = useModalDialogContext();
+  const { selectionInfo } = useCanvasContext();
+  const { updateOtherPropsOnSelected } = selectionInfo;
+
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    fabButtonShapeRestrictions,
+    width,
+    height
+  );
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const radius = Math.min(restrictedWidth, restrictedHeight) / 2;
+  const center = radius;
+
+  const iconInfo = otherProps?.icon;
+  const iconSize = radius * 1.2;
+  const iconStroke = otherProps?.stroke || '#ffffff';
+
+  const { fill } = useShapeProps(otherProps, BASIC_SHAPE);
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  const handleDoubleClick = () => {
+    if (iconInfo) {
+      openModal(
+        <IconModal
+          actualIcon={iconInfo}
+          onChange={icon => updateOtherPropsOnSelected('icon', icon)}
+        />,
+        'Choose Icon'
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (iconInfo?.filename) {
+      loadSvgWithFill(`${BASE_ICONS_URL}${iconInfo.filename}`, iconStroke).then(
+        img => setIconImage(img)
+      );
+    }
+  }, [iconInfo?.filename, iconStroke]);
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps} onDblClick={handleDoubleClick}>
+      {/* Background Circle */}
+      <Circle x={center} y={center} radius={radius} fill={fill} />
+      {/* Icon */}
+      {iconImage && (
+        <Image
+          image={iconImage}
+          x={center - iconSize / 2}
+          y={center - iconSize / 2}
+          width={iconSize}
+          height={iconSize}
+        />
+      )}
+    </Group>
+  );
+});

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

@@ -18,3 +18,4 @@ export * from './loading-indicator';
 export * from './videoconference';
 export * from './togglelightdark-shape';
 export * from './gauge/gauge';
+export * from './fab-button/fab-button';

src/common/utils/svg.utils.ts

@@ -0,0 +1,14 @@
+export const loadSvgWithFill = async (url: string, fillColor: string) => {
+  const response = await fetch(url);
+  const svgText = await response.text();
+
+  const modifiedSvg = svgText.replace(/fill="[^"]*"/g, `fill="${fillColor}"`);
+
+  const svgBlob = new Blob([modifiedSvg], { type: 'image/svg+xml' });
+  const objectURL = URL.createObjectURL(svgBlob);
+
+  const img = new window.Image();
+  img.src = objectURL;
+
+  return img;
+};

src/core/model/index.ts

@@ -84,7 +84,8 @@ export type ShapeType =
   | 'rectangleLow'
   | 'circleLow'
   | 'textScribbled'
-  | 'paragraphScribbled';
+  | 'paragraphScribbled'
+  | 'fabButton';
 
 export const ShapeDisplayName: Record<ShapeType, string> = {
   multiple: 'multiple',
@@ -158,6 +159,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   circleLow: 'Circle',
   textScribbled: 'Text Scribbled',
   paragraphScribbled: 'Paragraph Scribbled',
+  fabButton: 'Fab Button',
 };
 
 export type EditType = 'input' | 'textarea' | 'imageupload';

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

@@ -75,6 +75,17 @@ export const generateDefaultOtherProps = (
         stroke: '#808080',
         textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
       };
+    case 'fabButton':
+      return {
+        icon: {
+          name: 'chat',
+          filename: 'chat.svg',
+          searchTerms: ['chat', 'message', 'conversation', 'chatting'],
+          categories: ['IT'],
+        },
+        stroke: '#ffffff',
+        backgroundColor: '#A9A9A9',
+      };
     case 'buttonBar':
       return {
         stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,

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

@@ -64,6 +64,7 @@ import {
   getVideoPlayerShapeSizeRestrictions,
   getVideoconferenceShapeSizeRestrictions,
   getGaugeShapeSizeRestrictions,
+  getFabButtonShapeSizeRestrictions,
   // other imports
 } from '@/common/components/mock-components/front-rich-components';
 import {
@@ -171,6 +172,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   circleLow: getCircleLowShapeSizeRestrictions,
   textScribbled: getTextScribbledShapeRestrictions,
   paragraphScribbled: getParagraphScribbledShapeRestrictions,
+  fabButton: getFabButtonShapeSizeRestrictions,
 };
 
 export default shapeSizeMap;

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

@@ -48,6 +48,7 @@ import {
   renderCalendar,
   renderAppBar,
   renderLoadingIndicator,
+  renderFabButton,
 } from './simple-rich-components';
 import {
   renderDiamond,
@@ -209,6 +210,8 @@ export const renderShapeComponent = (
       return renderLoadingIndicator(shape, shapeRenderedProps);
     case 'videoconference':
       return renderVideoconference(shape, shapeRenderedProps);
+    case 'fabButton':
+      return renderFabButton(shape, shapeRenderedProps);
     case 'gauge':
       return renderGauge(shape, shapeRenderedProps);
     case 'imagePlaceholder':

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

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

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

@@ -20,3 +20,4 @@ export * from './video-player.renderer';
 export * from './audio-player.renderer';
 export * from './loading-indicator.renderer';
 export * from './videoconference.renderer';
+export * from './fab-button.renderer';

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

@@ -36,4 +36,8 @@ export const mockRichComponentsCollection: ItemInfo[] = [
     thumbnailSrc: '/rich-components/videoconference.svg',
     type: 'videoconference',
   },
+  {
+    thumbnailSrc: '/rich-components/fab-button.svg',
+    type: 'fabButton',
+  },
 ];