fix component

Author: antonio06

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

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

src/common/components/mock-components/front-components/mouse-cursor/mouse-cursor-shape.tsx

@@ -1,12 +1,13 @@
-import { forwardRef } from 'react';
-import { Group, Path } from 'react-konva';
-import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef, useEffect, useState, useRef } from 'react';
+import { Group, Image } from 'react-konva';
+import { ShapeSizeRestrictions, ShapeType, BASE_ICONS_URL } from '@/core/model';
 import { ShapeProps } from '../../shape.model';
 import { BASIC_SHAPE } from '../shape.const';
 import { useShapeProps } from '../../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../../mock-components.utils';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { returnIconSize } from './icon-shape.business';
+import { loadSvgWithFill } from '@/common/utils/svg.utils';
 
 const MouseCursorSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 25,
@@ -44,8 +45,6 @@ export const MouseCursorShape = forwardRef<any, ShapeProps>((props, ref) => {
     iconHeight
   );
 
-  console.log(iconWidth, iconHeight);
-
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
   const { stroke } = useShapeProps(otherProps, BASIC_SHAPE);
@@ -57,17 +56,29 @@ export const MouseCursorShape = forwardRef<any, ShapeProps>((props, ref) => {
     ref
   );
 
+  const [image, setImage] = useState<HTMLImageElement | null>(null);
+  const imageRef = useRef(null);
+
+  const fileName = 'cursor.svg';
+
+  useEffect(() => {
+    loadSvgWithFill(`${BASE_ICONS_URL}${fileName}`, `${stroke}`).then(img => {
+      setImage(img);
+    });
+  }, []);
+
   return (
     <Group {...commonGroupProps} {...shapeProps}>
-      <Path
-        scaleX={restrictedWidth}
-        scaleY={restrictedHeight}
-        x={0}
-        y={0}
-        data="M166.59 134.1a1.91 1.91 0 0 1-.55-1.79a2 2 0 0 1 1.08-1.42l46.25-17.76l.24-.1A14 14 0 0 0 212.38 87L52.29 34.7A13.95 13.95 0 0 0 34.7 52.29L87 212.38a13.82 13.82 0 0 0 12.6 9.6h.69a13.84 13.84 0 0 0 12.71-8.37a2 2 0 0 0 .1-.24l17.76-46.25a2 2 0 0 1 3.21-.53l51.31 51.31a14 14 0 0 0 19.8 0l12.69-12.69a14 14 0 0 0 0-19.8Zm42.82 62.63l-12.68 12.68a2 2 0 0 1-2.83 0l-51.31-51.31a14 14 0 0 0-22.74 4.32a2 2 0 0 0-.1.24L102 208.91a2 2 0 0 1-3.61-.26L46.11 48.57a1.87 1.87 0 0 1 .47-2a1.92 1.92 0 0 1 1.35-.57a2.2 2.2 0 0 1 .64.1l160.08 52.28a2 2 0 0 1 .26 3.61l-46.25 17.76l-.24.1a14 14 0 0 0-4.32 22.74l51.31 51.31a2 2 0 0 1 0 2.83"
-        stroke={stroke}
-        fill={stroke}
-      />
+      {image && (
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight}
+          ref={imageRef}
+        />
+      )}
     </Group>
   );
 });

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

@@ -41,7 +41,6 @@ const inlineEditableShapes = new Set<ShapeType>([
   'loading-indicator',
   'fileTree',
   'input-stepper',
-  'mousecursor',
 ]);
 
 // Check if a shape type allows inline editing