add stroke & icon size properties

Author: Aarti Nanwani Samtani

src/common/components/mock-components/front-basic-shapes/index.ts

@@ -10,4 +10,4 @@ export * from './large-arrow-shape';
 export * from './image-shape';
 export * from './modal-cover-shape';
 export * from './cilinder-basic-shape';
-export * from './mouse-cursor-basic-shape';
+export * from './mouse-cursor/mouse-cursor-basic-shape';

src/common/components/mock-components/front-basic-shapes/mouse-cursor/icon-shape.business.ts

@@ -0,0 +1,18 @@
+import { IconSize } from '@/core/model';
+
+export const returnIconSize = (iconSize: IconSize): number[] => {
+  switch (iconSize) {
+    case 'XS':
+      return [25, 25];
+    case 'S':
+      return [50, 50];
+    case 'M':
+      return [100, 100];
+    case 'L':
+      return [125, 125];
+    case 'XL':
+      return [150, 150];
+    default:
+      return [50, 50];
+  }
+};

src/common/components/mock-components/front-basic-shapes/mouse-cursor/index.ts

@@ -0,0 +1 @@
+export * from './mouse-cursor-basic-shape';

…asic-shapes/mouse-cursor-basic-shape.tsx …ouse-cursor/mouse-cursor-basic-shape.tsxsrc/common/components/mock-components/front-basic-shapes/mouse-cursor-basic-shape.tsx renamed to src/common/components/mock-components/front-basic-shapes/mouse-cursor/mouse-cursor-basic-shape.tsx src/common/components/mock-components/front-basic-shapes/mouse-cursor-basic-shape.tsx renamed to src/common/components/mock-components/front-basic-shapes/mouse-cursor/mouse-cursor-basic-shape.tsx

@@ -1,11 +1,13 @@
 import { ShapeSizeRestrictions, ShapeType, BASE_ICONS_URL } from '@/core/model';
 import { forwardRef, useEffect, useState } from 'react';
-import { ShapeProps } from '../shape.model';
+import { ShapeProps } from '../../shape.model';
 import { loadSvgWithFill } from '@/common/utils/svg.utils';
 import { Group, Image } from 'react-konva';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
-import { returnIconSize } from '../front-components/icon/icon-shape.business';
-import { useGroupShapeProps } from '../mock-components.utils';
+import { returnIconSize } from './icon-shape.business';
+import { useGroupShapeProps } from '../../mock-components.utils';
+import { useShapeProps } from '../../../shapes/use-shape-props.hook';
+import { BASIC_SHAPE } from '../../front-components/shape.const';
 
 const MouseCursorSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 25,
@@ -43,6 +45,7 @@ export const MouseCursorShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+  const { stroke } = useShapeProps(otherProps, BASIC_SHAPE);
   const commonGroupProps = useGroupShapeProps(
     props,
     restrictedSize,
@@ -54,10 +57,10 @@ export const MouseCursorShape = forwardRef<any, ShapeProps>((props, ref) => {
   //const imgRef = useRef(null);
   const fileName = 'cursor.svg';
   useEffect(() => {
-    loadSvgWithFill(`${BASE_ICONS_URL}${fileName}`, '').then(img => {
+    loadSvgWithFill(`${BASE_ICONS_URL}${fileName}`, `${stroke}`).then(img => {
       setImage(img);
     });
-  }, []);
+  }, [stroke]);
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       {image && (

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

@@ -266,6 +266,11 @@ export const generateDefaultOtherProps = (
         iconSize: 'M',
         stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,
       };
+    case 'mouseCursor':
+      return {
+        stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,
+        iconSize: 'M',
+      };
     case 'image':
       return {
         imageSrc: '',