Introducing a map note type

bin/copy-dist.ts

@@ -100,7 +100,8 @@ const copy = async () => {
         "node_modules/codemirror/keymap/",
         "node_modules/mind-elixir/dist/",
         "node_modules/@highlightjs/cdn-assets/languages",
-        "node_modules/@highlightjs/cdn-assets/styles"
+        "node_modules/@highlightjs/cdn-assets/styles",
+        "node_modules/leaflet/dist"
     ];
 
     for (const folder of nodeModulesFolder) {

package.json

@@ -61,6 +61,7 @@
     "@mermaid-js/layout-elk": "0.1.7",
     "@mind-elixir/node-menu": "1.0.3",
     "@triliumnext/express-partial-content": "1.0.1",
+    "@types/leaflet": "1.9.16",
     "@types/react-dom": "18.3.5",
     "archiver": "7.0.1",
     "async-mutex": "0.5.0",
@@ -112,6 +113,7 @@
     "jsplumb": "2.15.6",
     "katex": "0.16.21",
     "knockout": "3.5.1",
+    "leaflet": "1.9.4",
     "mark.js": "8.11.1",
     "marked": "15.0.6",
     "mermaid": "11.4.1",

src/becca/entities/rows.ts

@@ -116,7 +116,8 @@ export const ALLOWED_NOTE_TYPES = [
     "book",
     "webView",
     "code",
-    "mindMap"
+    "mindMap",
+    "geoMap"
 ] as const;
 export type NoteType = (typeof ALLOWED_NOTE_TYPES)[number];
 

src/public/app/components/app_context.ts

@@ -23,6 +23,7 @@ import type LoadResults from "../services/load_results.js";
 import type { Attribute } from "../services/attribute_parser.js";
 import type NoteTreeWidget from "../widgets/note_tree.js";
 import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
+import type { ContextMenuEvent } from "../menus/context_menu.js";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootWidget;
@@ -69,6 +70,7 @@ export interface ExecuteCommandData extends CommandData {
  */
 export type CommandMappings = {
     "api-log-messages": CommandData;
+    focusTree: CommandData,
     focusOnDetail: Required<CommandData>;
     focusOnSearchDefinition: Required<CommandData>;
     searchNotes: CommandData & {
@@ -193,6 +195,10 @@ export type CommandMappings = {
     setZoomFactorAndSave: {
         zoomFactor: string;
     }
+
+    // Geomap
+    deleteFromMap: { noteId: string },
+    openGeoLocation: { noteId: string, event: JQuery.MouseDownEvent }
 };
 
 type EventMappings = {
@@ -227,9 +233,12 @@ type EventMappings = {
     activeContextChanged: {
         noteContext: NoteContext;
     };
+    beforeNoteSwitch: {
+        noteContext: NoteContext;
+    };
     noteSwitched: {
         noteContext: NoteContext;
-        notePath: string;
+        notePath: string | null;
     };
     noteSwitchedAndActivatedEvent: {
         noteContext: NoteContext;
@@ -248,12 +257,16 @@ type EventMappings = {
         noteId: string;
     };
     hoistedNoteChanged: {
-        ntxId: string;
+        noteId: string;
+        ntxId: string | null;
     };
     contextsReopenedEvent: {
         mainNtxId: string;
         tabPosition: number;
     };
+    noteDetailRefreshed: {
+        ntxId?: string | null;
+    };
     noteContextReorderEvent: {
         oldMainNtxId: string;
         newMainNtxId: string;
@@ -266,7 +279,13 @@ type EventMappings = {
     };
     exportSvg: {
         ntxId: string;
-    }
+    };
+    geoMapCreateChildNote: {
+        ntxId: string | null | undefined; // TODO: deduplicate ntxId
+    };
+    tabReorder: {
+        ntxIdsInOrder: string[]
+    };
 };
 
 export type EventListener<T extends EventNames> = {

src/public/app/components/component.ts

@@ -61,7 +61,7 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
         }
     }
 
-    triggerEvent(name: string, data = {}): Promise<unknown> | undefined | null {
+    triggerEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown> | undefined | null {
         return this.parent?.triggerEvent(name, data);
     }
 

src/public/app/entities/fnote.ts

@@ -27,15 +27,16 @@ const NOTE_TYPE_ICONS = {
     launcher: "bx bx-link",
     doc: "bx bxs-file-doc",
     contentWidget: "bx bxs-widget",
-    mindMap: "bx bx-sitemap"
+    mindMap: "bx bx-sitemap",
+    geoMap: "bx bx-map-alt"
 };
 
 /**
  * There are many different Note types, some of which are entirely opaque to the
  * end user. Those types should be used only for checking against, they are
  * not for direct use.
  */
-type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap";
+type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap" | "geoMap";
 
 interface NotePathRecord {
     isArchived: boolean;

src/public/app/layouts/desktop_layout.js

@@ -85,6 +85,7 @@ import ScrollPaddingWidget from "../widgets/scroll_padding.js";
 import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
 import options from "../services/options.js";
 import utils from "../services/utils.js";
+import GeoMapButtons from "../widgets/floating_buttons/geo_map_button.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -200,6 +201,7 @@ export default class DesktopLayout {
                                                                 .child(new ShowHighlightsListWidgetButton())
                                                                 .child(new CodeButtonsWidget())
                                                                 .child(new RelationMapButtons())
+                                                                .child(new GeoMapButtons())
                                                                 .child(new CopyImageReferenceButton())
                                                                 .child(new SvgExportButton())
                                                                 .child(new BacklinksWidget())

src/public/app/menus/context_menu.ts

@@ -1,5 +1,6 @@
 import type { CommandNames } from "../components/app_context.js";
 import keyboardActionService from "../services/keyboard_actions.js";
+import note_tooltip from "../services/note_tooltip.js";
 import utils from "../services/utils.js";
 
 interface ContextMenuOptions<T extends CommandNames> {
@@ -31,6 +32,7 @@ export interface MenuCommandItem<T extends CommandNames> {
 
 export type MenuItem<T extends CommandNames> = MenuCommandItem<T> | MenuSeparatorItem;
 export type MenuHandler<T extends CommandNames> = (item: MenuCommandItem<T>, e: JQuery.MouseDownEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => void;
+export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEvent;
 
 class ContextMenu {
     private $widget: JQuery<HTMLElement>;
@@ -56,6 +58,8 @@ class ContextMenu {
     async show<T extends CommandNames>(options: ContextMenuOptions<T>) {
         this.options = options;
 
+        note_tooltip.dismissAllTooltips();
+
         if (this.$widget.hasClass("show")) {
             // The menu is already visible. Hide the menu then open it again
             // at the new location to re-trigger the opening animation.

src/public/app/menus/link_context_menu.ts

@@ -1,36 +1,44 @@
 import { t } from "../services/i18n.js";
-import contextMenu from "./context_menu.js";
-import appContext from "../components/app_context.js";
+import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
+import appContext, { type CommandNames } from "../components/app_context.js";
 import type { ViewScope } from "../services/link.js";
 
-function openContextMenu(notePath: string, e: PointerEvent | MouseEvent | JQuery.ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
+function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
     contextMenu.show({
         x: e.pageX,
         y: e.pageY,
-        items: [
-            { title: t("link_context_menu.open_note_in_new_tab"), command: "openNoteInNewTab", uiIcon: "bx bx-link-external" },
-            { title: t("link_context_menu.open_note_in_new_split"), command: "openNoteInNewSplit", uiIcon: "bx bx-dock-right" },
-            { title: t("link_context_menu.open_note_in_new_window"), command: "openNoteInNewWindow", uiIcon: "bx bx-window-open" }
-        ],
-        selectMenuItemHandler: ({ command }) => {
-            if (!hoistedNoteId) {
-                hoistedNoteId = appContext.tabManager.getActiveContext().hoistedNoteId;
-            }
+        items: getItems(),
+        selectMenuItemHandler: ({ command }) => handleLinkContextMenuItem(command, notePath, viewScope, hoistedNoteId)
+    });
+}
+
+function getItems(): MenuItem<CommandNames>[] {
+    return [
+        { title: t("link_context_menu.open_note_in_new_tab"), command: "openNoteInNewTab", uiIcon: "bx bx-link-external" },
+        { title: t("link_context_menu.open_note_in_new_split"), command: "openNoteInNewSplit", uiIcon: "bx bx-dock-right" },
+        { title: t("link_context_menu.open_note_in_new_window"), command: "openNoteInNewWindow", uiIcon: "bx bx-window-open" }
+    ];
+}
 
-            if (command === "openNoteInNewTab") {
-                appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
-            } else if (command === "openNoteInNewSplit") {
-                const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
-                const { ntxId } = subContexts[subContexts.length - 1];
+function handleLinkContextMenuItem(command: string | undefined, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
+    if (!hoistedNoteId) {
+        hoistedNoteId = appContext.tabManager.getActiveContext().hoistedNoteId;
+    }
 
-                appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });
-            } else if (command === "openNoteInNewWindow") {
-                appContext.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
-            }
-        }
-    });
+    if (command === "openNoteInNewTab") {
+        appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
+    } else if (command === "openNoteInNewSplit") {
+        const subContexts = appContext.tabManager.getActiveContext().getSubContexts();
+        const { ntxId } = subContexts[subContexts.length - 1];
+
+        appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });
+    } else if (command === "openNoteInNewWindow") {
+        appContext.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
+    }
 }
 
 export default {
+    getItems,
+    handleLinkContextMenuItem,
     openContextMenu
 };

src/public/app/services/library_loader.ts

@@ -106,6 +106,10 @@ const HIGHLIGHT_JS: Library = {
     }
 };
 
+const LEAFLET: Library = {
+    css: [ "node_modules/leaflet/dist/leaflet.css" ],
+}
+
 async function requireLibrary(library: Library) {
     if (library.css) {
         library.css.map((cssUrl) => requireCss(cssUrl));
@@ -196,5 +200,6 @@ export default {
     MERMAID,
     MARKJS,
     I18NEXT,
-    HIGHLIGHT_JS
+    HIGHLIGHT_JS,
+    LEAFLET
 };

src/public/app/services/link.ts

@@ -234,7 +234,7 @@ function goToLink(evt: MouseEvent | JQuery.ClickEvent) {
     return goToLinkExt(evt, hrefLink, $link);
 }
 
-function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | React.PointerEvent<HTMLCanvasElement>, hrefLink: string | undefined, $link: JQuery<HTMLElement> | null) {
+function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement>, hrefLink: string | undefined, $link?: JQuery<HTMLElement> | null) {
     if (hrefLink?.startsWith("data:")) {
         return true;
     }

src/public/app/services/note_tooltip.ts

@@ -18,11 +18,11 @@ function setupGlobalTooltip() {
             return;
         }
 
-        cleanUpTooltips();
+        dismissAllTooltips();
     });
 }
 
-function cleanUpTooltips() {
+function dismissAllTooltips() {
     $(".note-tooltip").remove();
 }
 
@@ -102,12 +102,12 @@ async function mouseEnterHandler(this: HTMLElement) {
             customClass: linkId
         });
 
-        cleanUpTooltips();
+        dismissAllTooltips();
         $(this).tooltip("show");
 
         // Dismiss the tooltip immediately if a link was clicked inside the tooltip.
         $(`.${tooltipClass} a`).on("click", (e) => {
-            cleanUpTooltips();
+            dismissAllTooltips();
         });
 
         // the purpose of the code below is to:
@@ -117,7 +117,7 @@ async function mouseEnterHandler(this: HTMLElement) {
         const checkTooltip = () => {
             if (!$(this).filter(":hover").length && !$(`.${linkId}:hover`).length) {
                 // cursor is neither over the link nor over the tooltip, user likely is not interested
-                cleanUpTooltips();
+                dismissAllTooltips();
             } else {
                 setTimeout(checkTooltip, 1000);
             }
@@ -172,5 +172,6 @@ function renderFootnote($link: JQuery<HTMLElement>, url: string) {
 
 export default {
     setupGlobalTooltip,
-    setupElementTooltip
+    setupElementTooltip,
+    dismissAllTooltips
 };

src/public/app/services/note_types.ts

@@ -18,7 +18,8 @@ async function getNoteTypeItems(command?: NoteTypeCommandNames) {
         { title: t("note_types.mermaid-diagram"), command, type: "mermaid", uiIcon: "bx bx-selection" },
         { title: t("note_types.canvas"), command, type: "canvas", uiIcon: "bx bx-pen" },
         { title: t("note_types.web-view"), command, type: "webView", uiIcon: "bx bx-globe-alt" },
-        { title: t("note_types.mind-map"), command, type: "mindMap", uiIcon: "bx bx-sitemap" }
+        { title: t("note_types.mind-map"), command, type: "mindMap", uiIcon: "bx bx-sitemap" },
+        { title: t("note_types.geo-map"), command, type: "geoMap", uiIcon: "bx bx-map-alt" },
     ];
 
     const templateNoteIds = await server.get<string[]>("search-templates");