diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css index d254a4363..2a313baf8 100644 --- a/apps/client/src/widgets/FloatingButtons.css +++ b/apps/client/src/widgets/FloatingButtons.css @@ -91,4 +91,10 @@ .show-floating-buttons-button:hover { border: 1px solid var(--button-border-color); } +/* #endregion */ + +/* #region Geo map buttons */ +.leaflet-pane { + z-index: 50; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/FloatingButtons.tsx b/apps/client/src/widgets/FloatingButtons.tsx index af66571d8..fa41bc54c 100644 --- a/apps/client/src/widgets/FloatingButtons.tsx +++ b/apps/client/src/widgets/FloatingButtons.tsx @@ -10,7 +10,7 @@ import { ParentComponent } from "./react/react_utils"; import Component from "../components/component"; import { VNode } from "preact"; import attributes from "../services/attributes"; -import appContext from "../components/app_context"; +import appContext, { EventData, EventNames } from "../components/app_context"; import protected_session_holder from "../services/protected_session_holder"; import options from "../services/options"; import { openInAppHelpFromUrl } from "../services/utils"; @@ -23,6 +23,8 @@ interface FloatingButtonContext { parentComponent: Component; note: FNote; noteContext: NoteContext; + /** Shorthand for triggering an event from the parent component. The `ntxId` is automatically handled for convenience. */ + triggerEvent(name: T, data?: Omit, "ntxId">): void; } interface FloatingButtonDefinition { @@ -81,6 +83,10 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [ { component: RelationMapButtons, isEnabled: ({ note }) => note.type === "relationMap" + }, + { + component: GeoMapButtons, + isEnabled: ({ note }) => note?.getLabelValue("viewType") === "geoMap" && !note.hasLabel("readOnly") } ]; @@ -110,7 +116,13 @@ export default function FloatingButtons() { return { note, noteContext, - parentComponent + parentComponent, + triggerEvent(name: T, data?: Omit, "ntxId">) { + parentComponent.triggerEvent(name, { + ntxId: noteContext.ntxId, + ...data + } as EventData); + } }; }, [ note, noteContext, parentComponent ]); @@ -266,38 +278,48 @@ function SaveToNoteButton({ note }: FloatingButtonContext) { /> } -function RelationMapButtons({ parentComponent, noteContext }: FloatingButtonContext) { +function RelationMapButtons({ triggerEvent }: FloatingButtonContext) { return ( <> parentComponent.triggerEvent("relationMapCreateChildNote", { ntxId: noteContext.ntxId })} + onClick={() => triggerEvent("relationMapCreateChildNote")} /> parentComponent.triggerEvent("relationMapResetPanZoom", { ntxId: noteContext.ntxId })} + onClick={() => triggerEvent("relationMapResetPanZoom")} />
parentComponent.triggerEvent("relationMapResetZoomIn", { ntxId: noteContext.ntxId })} + onClick={() => triggerEvent("relationMapResetZoomIn")} /> parentComponent.triggerEvent("relationMapResetZoomOut", { ntxId: noteContext.ntxId })} + onClick={() => triggerEvent("relationMapResetZoomOut")} />
) } +function GeoMapButtons({ triggerEvent }) { + return ( + triggerEvent("geoMapCreateChildNote")} + /> + ); +} + function FloatingButton({ className, ...props }: ActionButtonProps) { return - - -