Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 02:16:05 +01:00
Code Issues Packages Projects Releases Activity

chore(views/geomap): reintroduce adding notes

Browse Source
This commit is contained in:
Elian Doran
2025-07-06 17:51:24 +03:00
parent d5e81d77a2
commit b6d2de54b2
4 changed files with 105 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/floating_buttons/geo_map_button.ts
View File

@@ -23,7 +23,7 @@ const TPL = /*html*/`\
export default class GeoMapButtons extends NoteContextAwareWidget {
isEnabled() {
return super.isEnabled() && this.note?.type === "geoMap";
return super.isEnabled() && this.note?.getLabelValue("viewType") === "geoMap";
}
doRender() {

13
apps/client/src/widgets/note_list.ts
View File

@@ -1,7 +1,7 @@
import NoteContextAwareWidget from "./note_context_aware_widget.js";
import NoteListRenderer from "../services/note_list_renderer.js";
import type FNote from "../entities/fnote.js";
import type { CommandListener, CommandListenerData, CommandMappings, CommandNames, EventData } from "../components/app_context.js";
import type { CommandListener, CommandListenerData, CommandMappings, CommandNames, EventData, EventNames } from "../components/app_context.js";
import type ViewMode from "./view_widgets/view_mode.js";
import AttributeDetailWidget from "./attribute_widgets/attribute_detail.js";
import { Attribute } from "../services/attribute_parser.js";
@@ -176,4 +176,15 @@ export default class NoteListWidget extends NoteContextAwareWidget {
return super.triggerCommand(name, data);
}
handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null {
super.handleEventInChildren(name, data);
if (this.viewMode) {
const ret = this.viewMode.handleEvent(name, data);
if (ret) {
return ret;
}
}
}
}

86
apps/client/src/widgets/type_widgets/geo_map.ts
View File

@@ -11,8 +11,6 @@ import attributes from "../../services/attributes.js";
import link from "../../services/link.js";
import { hasTouchBar } from "../../services/utils.js";
const TPL = /*html*/`\
<div class="note-detail-geo-map note-detail-printable">
<style>
@@ -23,22 +21,9 @@ const TPL = /*html*/`\
const LOCATION_ATTRIBUTE = "geolocation";
const CHILD_NOTE_ICON = "bx bx-pin";
// TODO: Deduplicate
interface CreateChildResponse {
note: {
noteId: string;
};
}
enum State {
Normal,
NewNote
}
export default class GeoMapTypeWidget extends TypeWidget {
private geoMapWidget: GeoMapWidget;
private _state: State;
private L!: Leaflet;
private ignoreNextZoomEvent?: boolean;
@@ -51,7 +36,6 @@ export default class GeoMapTypeWidget extends TypeWidget {
this.geoMapWidget = new GeoMapWidget("type", (L: Leaflet) => this.#onMapInitialized(L));
this._state = State.Normal;
this.child(this.geoMapWidget);
}
@@ -66,9 +50,6 @@ export default class GeoMapTypeWidget extends TypeWidget {
async #onMapInitialized(L: Leaflet) {
// this.L = L;
// // Restore markers.
// await this.#reloadMarkers();
// // This fixes an issue with the map appearing cut off at the beginning, due to the container not being properly attached
// setTimeout(() => {
// map.invalidateSize();
@@ -85,62 +66,6 @@ export default class GeoMapTypeWidget extends TypeWidget {
// }
}
#changeState(newState: State) {
this._state = newState;
this.geoMapWidget.$container.toggleClass("placing-note", newState === State.NewNote);
if (hasTouchBar) {
this.triggerCommand("refreshTouchBar");
}
}
async #onMapClicked(e: LeafletMouseEvent) {
if (this._state !== State.NewNote) {
return;
}
toastService.closePersistent("geo-new-note");
const title = await dialogService.prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
if (title?.trim()) {
const { note } = await server.post<CreateChildResponse>(`notes/${this.noteId}/children?target=into`, {
title,
content: "",
type: "text"
});
attributes.setLabel(note.noteId, "iconClass", CHILD_NOTE_ICON);
// this.moveMarker(note.noteId, e.latlng);
}
this.#changeState(State.Normal);
}
async geoMapCreateChildNoteEvent({ ntxId }: EventData<"geoMapCreateChildNote">) {
if (!this.isNoteContext(ntxId)) {
return;
}
toastService.showPersistent({
icon: "plus",
id: "geo-new-note",
title: "New note",
message: t("geo-map.create-child-note-instruction")
});
this.#changeState(State.NewNote);
const globalKeyListener: (this: Window, ev: KeyboardEvent) => any = (e) => {
if (e.key !== "Escape") {
return;
}
this.#changeState(State.Normal);
window.removeEventListener("keydown", globalKeyListener);
toastService.closePersistent("geo-new-note");
};
window.addEventListener("keydown", globalKeyListener);
}
async doRefresh(note: FNote) {
await this.geoMapWidget.refresh();
// this.#restoreViewportAndZoom();
@@ -148,18 +73,7 @@ export default class GeoMapTypeWidget extends TypeWidget {
}
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
// If any of the children branches are altered.
if (loadResults.getBranchRows().find((branch) => branch.parentNoteId === this.noteId)) {
// this.#reloadMarkers();
return;
}
// If any of note has its location attribute changed.
// TODO: Should probably filter by parent here as well.
const attributeRows = loadResults.getAttributeRows();
if (attributeRows.find((at) => [LOCATION_ATTRIBUTE, "color"].includes(at.name ?? ""))) {
// this.#reloadMarkers();
}
}
openGeoLocationEvent({ noteId, event }: EventData<"openGeoLocation">) {

95
apps/client/src/widgets/view_widgets/geo_view/index.ts
View File

@@ -1,10 +1,24 @@
import ViewMode, { ViewModeArgs } from "../view_mode.js";
import L from "leaflet";
import type { GPX, LatLng, Map, Marker } from "leaflet";
import type { GPX, LatLng, LeafletMouseEvent, Map, Marker } from "leaflet";
import SpacedUpdate from "../../../services/spaced_update.js";
import { t } from "../../../services/i18n.js";
import processNoteWithMarker, { processNoteWithGpxTrack } from "./markers.js";
import froca from "../../../services/froca.js";
import { hasTouchBar } from "../../../services/utils.js";
import toast from "../../../services/toast.js";
import { EventData } from "../../../components/app_context.js";
import dialog from "../../../services/dialog.js";
import server from "../../../services/server.js";
import attributes from "../../../services/attributes.js";
import { moveMarker } from "./editing.js";
// TODO: Deduplicate
interface CreateChildResponse {
note: {
noteId: string;
};
}
const TPL = /*html*/`
<div class="geo-view">
@@ -90,6 +104,11 @@ const DEFAULT_ZOOM = 2;
export const LOCATION_ATTRIBUTE = "geolocation";
const CHILD_NOTE_ICON = "bx bx-pin";
enum State {
Normal,
NewNote
}
export default class GeoView extends ViewMode<MapData> {
private args: ViewModeArgs;
@@ -97,6 +116,7 @@ export default class GeoView extends ViewMode<MapData> {
private $container!: JQuery<HTMLElement>;
private map?: Map;
private spacedUpdate: SpacedUpdate;
private _state: State;
private currentMarkerData: Record<string, Marker>;
private currentTrackData: Record<string, GPX>;
@@ -110,6 +130,7 @@ export default class GeoView extends ViewMode<MapData> {
this.currentMarkerData = {};
this.currentTrackData = {};
this._state = State.Normal;
args.$parent.append(this.$root);
}
@@ -144,7 +165,7 @@ export default class GeoView extends ViewMode<MapData> {
const updateFn = () => this.spacedUpdate.scheduleUpdate();
map.on("moveend", updateFn);
map.on("zoomend", updateFn);
// map.on("click", (e) => this.#onMapClicked(e));
map.on("click", (e) => this.#onMapClicked(e));
this.#reloadMarkers();
}
@@ -195,8 +216,9 @@ export default class GeoView extends ViewMode<MapData> {
// Add the new markers.
this.currentMarkerData = {};
await froca.getNotes(this.args.noteIds);
for (const noteId of this.args.noteIds) {
const childNote = await froca.getNote(noteId);
const childNote = froca.getNoteFromCache(noteId);
if (!childNote) {
continue;
}
@@ -219,4 +241,71 @@ export default class GeoView extends ViewMode<MapData> {
return true;
}
#changeState(newState: State) {
this._state = newState;
this.$container.toggleClass("placing-note", newState === State.NewNote);
if (hasTouchBar) {
this.triggerCommand("refreshTouchBar");
}
}
onEntitiesReloaded({ loadResults }: EventData<"entitiesReloaded">): boolean | void {
// If any of the children branches are altered.
if (loadResults.getBranchRows().find((branch) => branch.parentNoteId === this.parentNote.noteId)) {
this.#reloadMarkers();
return;
}
// If any of note has its location attribute changed.
// TODO: Should probably filter by parent here as well.
const attributeRows = loadResults.getAttributeRows();
if (attributeRows.find((at) => [LOCATION_ATTRIBUTE, "color"].includes(at.name ?? ""))) {
this.#reloadMarkers();
}
}
async geoMapCreateChildNoteEvent({ ntxId }: EventData<"geoMapCreateChildNote">) {
toast.showPersistent({
icon: "plus",
id: "geo-new-note",
title: "New note",
message: t("geo-map.create-child-note-instruction")
});
this.#changeState(State.NewNote);
const globalKeyListener: (this: Window, ev: KeyboardEvent) => any = (e) => {
if (e.key !== "Escape") {
return;
}
this.#changeState(State.Normal);
window.removeEventListener("keydown", globalKeyListener);
toast.closePersistent("geo-new-note");
};
window.addEventListener("keydown", globalKeyListener);
}
async #onMapClicked(e: LeafletMouseEvent) {
if (this._state !== State.NewNote) {
return;
}
toast.closePersistent("geo-new-note");
const title = await dialog.prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
if (title?.trim()) {
const { note } = await server.post<CreateChildResponse>(`notes/${this.parentNote.noteId}/children?target=into`, {
title,
content: "",
type: "text"
});
attributes.setLabel(note.noteId, "iconClass", CHILD_NOTE_ICON);
moveMarker(note.noteId, e.latlng);
}
this.#changeState(State.Normal);
}
}