import { map } from '$lib/components/map/map';
import { get, writable, type Writable } from 'svelte/store';
export enum MapCursorState {
DEFAULT,
LAYER_HOVER,
WAYPOINT_DRAGGING,
TRACKPOINT_DRAGGING,
TOOL_WITH_CROSSHAIR,
SCISSORS,
SPLIT_CONTROL,
MAPILLARY_HOVER,
STREET_VIEW_CROSSHAIR,
}
const scissorsCursor = `url('data:image/svg+xml,') 12 12, auto`;
const cursorStyles = {
[MapCursorState.DEFAULT]: 'default',
[MapCursorState.LAYER_HOVER]: 'pointer',
[MapCursorState.WAYPOINT_DRAGGING]: 'grabbing',
[MapCursorState.TRACKPOINT_DRAGGING]: 'grabbing',
[MapCursorState.TOOL_WITH_CROSSHAIR]: 'crosshair',
[MapCursorState.SCISSORS]: scissorsCursor,
[MapCursorState.SPLIT_CONTROL]: 'pointer',
[MapCursorState.MAPILLARY_HOVER]: 'pointer',
[MapCursorState.STREET_VIEW_CROSSHAIR]: 'crosshair',
};
export class MapCursor {
private _states: Writable>;
constructor() {
this._states = writable(new Set());
this._states.subscribe((states) => {
let state = Array.from(states.values()).reduce((max, value) => {
return value > max ? value : max;
}, MapCursorState.DEFAULT);
let canvas = get(map)?.getCanvas();
if (canvas) {
canvas.style.cursor = cursorStyles[state];
}
});
}
notify(cursorState: MapCursorState, isActive: boolean) {
this._states.update((states) => {
if (isActive) {
states.add(cursorState);
} else {
states.delete(cursorState);
}
return states;
});
}
}
export const mapCursor = new MapCursor();