Create a mouse pointer shape

[brauliodiez]

It could be a good idea to highlight interactions

[brauliodiez]

In the toolbar createa a new Group called Mouse Pointers

And there we will create several mouse pointers options, e.g.

• Standard icon
• Drag
• Select
• ...

[brauliodiez]

Some tips, .e.g Mouse pointer

and SVG

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 32 32"
  width="32"
  height="32"
  fill="#ffffff"
  stroke="#000000"
  stroke-width="2"
  stroke-linejoin="miter"
  vector-effect="non-scaling-stroke"
  shape-rendering="geometricPrecision"
  aria-label="Cursor pointer"
>
  <!-- Puntero clásico: triángulo con 'cola' y punta hacia la esquina superior izquierda -->
  <path d="M4 3 L4 25 L11 18 L15 29 L19 27 L15 17 L26 17 Z"/>
</svg>

And possible React Konva component

import { ShapeSizeRestrictions } from '@/core/model';
import { forwardRef } from 'react';
import { ShapeProps } from '../shape.model';
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
import { Group, Path } from 'react-konva';
import { BASIC_SHAPE } from '../front-components/shape.const';
import { useShapeProps } from '../../shapes/use-shape-props.hook';
import { useGroupShapeProps } from '../mock-components.utils';

const cursorPointerShapeRestrictions: ShapeSizeRestrictions = {
  minWidth: 10,
  minHeight: 10,
  maxWidth: -1,
  maxHeight: -1,
  defaultWidth: 32,
  defaultHeight: 32,
};

export const getCursorPointerShapeSizeRestrictions = (): ShapeSizeRestrictions =>
  cursorPointerShapeRestrictions;

const shapeType = 'cursorPointer';

export const CursorPointerShape = forwardRef<any, ShapeProps>((props, ref) => {
  const {
    x,
    y,
    width,
    height,
    id,
    onSelected,
    text,
    otherProps,
    ...shapeProps
  } = props;

  const restrictedSize = fitSizeToShapeSizeRestrictions(
    cursorPointerShapeRestrictions,
    width,
    height
  );

  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;

  const { stroke, strokeStyle, fill } = useShapeProps(otherProps, BASIC_SHAPE);

  const commonGroupProps = useGroupShapeProps(
    props,
    restrictedSize,
    shapeType,
    ref
  );

  // Base viewBox dimensions (match the original SVG)
  const baseW = 32;
  const baseH = 32;

  // Classic mouse pointer path (tip pointing to the top-left corner)
  // Equivalent to the SVG path:
  // <path d="M4 3 L4 25 L11 18 L15 29 L19 27 L15 17 L26 17 Z" />
  const pointerPathData = 'M4 3 L4 25 L11 18 L15 29 L19 27 L15 17 L26 17 Z';

  return (
    <Group {...commonGroupProps} {...shapeProps}>
      <Path
        x={0}
        y={0}
        data={pointerPathData}
        // Scale the path to match width/height while preserving proportions
        scaleX={restrictedWidth / baseW}
        scaleY={restrictedHeight / baseH}
        fill={fill}                // e.g. white (if defined in theme)
        stroke={stroke}            // e.g. black outline
        dash={strokeStyle}
        strokeWidth={2}            // constant visible stroke thickness
        strokeScaleEnabled={false} // prevents stroke width from scaling
        listening={true}
        perfectDrawEnabled={false}
        hitStrokeWidth={8}         // improves selection hit area
      />
    </Group>
  );
});