const createSvgCursor = (svg: string, hotspotX: number, hotspotY: number): string => {
const encoded = encodeURIComponent(svg);
return `url("data:image/svg+xml,${encoded}") ${hotspotX} ${hotspotY}, crosshair`;
};
const brushSvg = ``;
const eraserSvg = ``;
const bucketSvg = ``;
const gradientSvg = ``;
const stampSvg = ``;
const healingSvg = ``;
const spotHealSvg = ``;
const dodgeSvg = ``;
const burnSvg = ``;
const spongeSvg = ``;
const blurSvg = ``;
const sharpenSvg = ``;
const smudgeSvg = ``;
const eyedropperSvg = ``;
const wandSvg = ``;
const lassoSvg = ``;
const cropSvg = ``;
const moveSvg = ``;
const warpSvg = ``;
const perspectiveSvg = ``;
const liquifySvg = ``;
const penSvg = ``;
const textSvg = ``;
const shapeSvg = ``;
const zoomInSvg = ``;
const marqueeSvg = ``;
const ellipseMarqueeSvg = ``;
export const toolCursors: Record = {
'select': 'default',
'hand': 'grab',
'hand-grabbing': 'grabbing',
'zoom': createSvgCursor(zoomInSvg, 11, 11),
'eyedropper': createSvgCursor(eyedropperSvg, 1, 22),
'text': createSvgCursor(textSvg, 12, 14),
'pen': createSvgCursor(penSvg, 2, 22),
'shape': createSvgCursor(shapeSvg, 12, 12),
'crop': createSvgCursor(cropSvg, 6, 6),
'marquee-rect': createSvgCursor(marqueeSvg, 12, 12),
'marquee-ellipse': createSvgCursor(ellipseMarqueeSvg, 12, 12),
'lasso': createSvgCursor(lassoSvg, 5, 18),
'lasso-polygon': createSvgCursor(lassoSvg, 5, 18),
'magic-wand': createSvgCursor(wandSvg, 5, 5),
'brush': createSvgCursor(brushSvg, 4, 20),
'eraser': createSvgCursor(eraserSvg, 4, 20),
'paint-bucket': createSvgCursor(bucketSvg, 14, 20),
'gradient': createSvgCursor(gradientSvg, 12, 12),
'clone-stamp': createSvgCursor(stampSvg, 12, 18),
'healing-brush': createSvgCursor(healingSvg, 12, 12),
'spot-healing': createSvgCursor(spotHealSvg, 12, 12),
'dodge': createSvgCursor(dodgeSvg, 12, 12),
'burn': createSvgCursor(burnSvg, 12, 12),
'sponge': createSvgCursor(spongeSvg, 12, 20),
'blur': createSvgCursor(blurSvg, 12, 12),
'sharpen': createSvgCursor(sharpenSvg, 12, 4),
'smudge': createSvgCursor(smudgeSvg, 8, 2),
'free-transform': createSvgCursor(moveSvg, 12, 12),
'warp': createSvgCursor(warpSvg, 12, 12),
'perspective': createSvgCursor(perspectiveSvg, 12, 12),
'liquify': createSvgCursor(liquifySvg, 12, 12),
};
export const getToolCursor = (tool: string, isDragging?: boolean, dragMode?: string): string => {
if (tool === 'hand') {
return isDragging && dragMode === 'pan' ? 'grabbing' : 'grab';
}
if (isDragging && dragMode === 'paint') {
return toolCursors[tool] || 'crosshair';
}
return toolCursors[tool] || 'crosshair';
};