/**
* Define only the SVG geometry for individual custom cursors
*/
const CUSTOM_CURSOR_GEOMETRIES = {
rotate: ``,
resize: ``,
grabbing: ``,
grab: ``
};
export type CustomCursorType = keyof typeof CUSTOM_CURSOR_GEOMETRIES;
/**
* Return the CSS value for a custom cursor with rotation applied.
*
* The returned value can be set like: element.style.cursor = getCustomCssCursor(...)
*
* @param name Name of the custom cursor
* @param rotation The clockwise angle in degrees to rotate the cursor
* @param The CSS value to set.
*/
export function getCustomCssCursor(opts: {
type: CustomCursorType;
rotation: number;
fallback: string;
}): string {
const { type, rotation, fallback } = opts;
const geometry = CUSTOM_CURSOR_GEOMETRIES[type];
// Build a complete SVG element with rotation applied
const svg = ``;
const dataUrl = `data:image/svg+xml,${svg}`;
const cursor = `url("${dataUrl}") 32 32, ${fallback}`;
return cursor;
}