feat(geomap): adjust cursor when adding new note

This commit is contained in:
Elian Doran 2025-01-21 13:46:18 +02:00
parent ef5b2d60f3
commit fed0598b47
No known key found for this signature in database
2 changed files with 13 additions and 2 deletions

View File

@ -22,6 +22,7 @@ export type InitCallback = ((L: Leaflet) => void);
export default class GeoMapWidget extends NoteContextAwareWidget { export default class GeoMapWidget extends NoteContextAwareWidget {
map?: Map; map?: Map;
$container!: JQuery<HTMLElement>;
private initCallback?: InitCallback; private initCallback?: InitCallback;
constructor(widgetMode: "type", initCallback?: InitCallback) { constructor(widgetMode: "type", initCallback?: InitCallback) {
@ -32,13 +33,13 @@ export default class GeoMapWidget extends NoteContextAwareWidget {
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
const $container = this.$widget.find(".geo-map-container"); this.$container = this.$widget.find(".geo-map-container");
library_loader.requireLibrary(library_loader.LEAFLET) library_loader.requireLibrary(library_loader.LEAFLET)
.then(async () => { .then(async () => {
const L = (await import("leaflet")).default; const L = (await import("leaflet")).default;
const map = L.map($container[0], { const map = L.map(this.$container[0], {
}); });

View File

@ -15,6 +15,10 @@ const TPL = `\
.leaflet-pane { .leaflet-pane {
z-index: 1; z-index: 1;
} }
.geo-map-container.placing-note {
cursor: crosshair;
}
</style> </style>
</div>`; </div>`;
@ -118,6 +122,10 @@ export default class GeoMapTypeWidget extends TypeWidget {
} }
} }
#adjustCursor() {
this.geoMapWidget.$container.toggleClass("placing-note", !!this.clipboard);
}
async #onMapClicked(e: LeafletMouseEvent) { async #onMapClicked(e: LeafletMouseEvent) {
if (!this.clipboard) { if (!this.clipboard) {
return; return;
@ -126,6 +134,7 @@ export default class GeoMapTypeWidget extends TypeWidget {
const { noteId } = this.clipboard; const { noteId } = this.clipboard;
await attributes.setLabel(noteId, LOCATION_ATTRIBUTE, [e.latlng.lat, e.latlng.lng].join(",")); await attributes.setLabel(noteId, LOCATION_ATTRIBUTE, [e.latlng.lat, e.latlng.lng].join(","));
this.clipboard = undefined; this.clipboard = undefined;
this.#adjustCursor();
} }
getData(): any { getData(): any {
@ -166,6 +175,7 @@ export default class GeoMapTypeWidget extends TypeWidget {
toastService.showMessage(t("relation_map.click_on_canvas_to_place_new_note")); toastService.showMessage(t("relation_map.click_on_canvas_to_place_new_note"));
this.clipboard = { noteId: note.noteId, title }; this.clipboard = { noteId: note.noteId, title };
this.#adjustCursor();
} }
async doRefresh(note: FNote) { async doRefresh(note: FNote) {