leaflet-anvil 0.2.2 → 0.2.3

package/README.md

@@ -94,6 +94,7 @@ Activation via `anvil.enable(AnvilMode.Name)` or through the UI toolbar:
 | `modeStyles`              | `object`  | `{}`        | Per-mode style overrides for drawing, handles and active selection/highlight states.                                  |
 | `controlPosition`         | `string`  | `'topleft'` | Determines the position of the toolbar on the map (e.g., `'topright'`).                                              |
 | `modes`                   | `Array`   | `All`       | Defines which buttons appear in the toolbar. Supports nested arrays for button groups (blocks).                      |
+| `modeTooltips`            | `object \\| function` | `Defaults` | Overrides toolbar button tooltips. Missing values keep the built-in defaults. Use a function if translations can change after initialization. |
 
 ### Mode-Specific Styles
 
@@ -170,6 +171,30 @@ const anvil = new Anvil(map, {
 If you want to style the active highlight of interaction modes, use `selectionPathOptions`.
 That is what controls the temporary emphasis color when a geometry is selected in modes such as `Edit` or while actively transforming it in `Drag`, `Scale`, `Rotate`, `Union` or `Subtract`.
 
+### Custom Toolbar Tooltips
+
+For simple overrides, pass a static map:
+
+```typescript
+const anvil = new Anvil(map, {
+    modeTooltips: {
+        [AnvilMode.Edit]: 'Edit geometry',
+        [AnvilMode.Delete]: 'Remove geometry',
+        [AnvilMode.Off]: 'Disable tools',
+    },
+});
+```
+
+If your app language can change after `Anvil` has been created, pass a resolver instead.
+The toolbar re-reads the tooltip when a button is focused or hovered, so the next interaction uses the current language without recreating the control.
+The second argument is the built-in default tooltip, so you can preserve defaults without duplicating them.
+
+```typescript
+const anvil = new Anvil(map, {
+    modeTooltips: (mode, fallback) => i18n.t(`mapTools.${mode}`, fallback),
+});
+```
+
 ### Events (`ANVIL_EVENTS`)
 
 All events are fired on the Leaflet map:

package/dist/index.d.mts

@@ -25,6 +25,8 @@ interface Mode {
     enable(): void;
     disable(): void;
 }
+type AnvilModeTooltips = Partial<Record<AnvilMode, string>>;
+type AnvilModeTooltipResolver = (mode: AnvilMode, defaultTooltip: string) => string | null | undefined;
 interface AnvilOptions {
     layerGroup?: L.FeatureGroup;
     snapping?: boolean;
@@ -38,6 +40,7 @@ interface AnvilOptions {
     modeStyles?: AnvilModeStyles;
     controlPosition?: L.ControlPosition;
     modes?: (AnvilMode | AnvilMode[])[];
+    modeTooltips?: AnvilModeTooltips | AnvilModeTooltipResolver;
 }
 interface AnvilModeStyleOptions {
     pathOptions?: L.PathOptions;
@@ -72,6 +75,7 @@ declare const ANVIL_EVENTS: {
 interface AnvilControlOptions extends L.ControlOptions {
     position?: L.ControlPosition;
     modes?: (AnvilMode | AnvilMode[])[];
+    modeTooltips?: AnvilModeTooltips | AnvilModeTooltipResolver;
 }
 declare class AnvilControl extends L.Control {
     private _btns;
@@ -82,4 +86,4 @@ declare class AnvilControl extends L.Control {
 }
 declare function anvilControl(anvil: Anvil, options?: AnvilControlOptions): AnvilControl;
 
-export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilModeStyleOptions, type AnvilModeStyles, type AnvilOptions, type Mode, anvilControl };
+export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilModeStyleOptions, type AnvilModeStyles, type AnvilModeTooltipResolver, type AnvilModeTooltips, type AnvilOptions, type Mode, anvilControl };

package/dist/index.d.ts

@@ -25,6 +25,8 @@ interface Mode {
     enable(): void;
     disable(): void;
 }
+type AnvilModeTooltips = Partial<Record<AnvilMode, string>>;
+type AnvilModeTooltipResolver = (mode: AnvilMode, defaultTooltip: string) => string | null | undefined;
 interface AnvilOptions {
     layerGroup?: L.FeatureGroup;
     snapping?: boolean;
@@ -38,6 +40,7 @@ interface AnvilOptions {
     modeStyles?: AnvilModeStyles;
     controlPosition?: L.ControlPosition;
     modes?: (AnvilMode | AnvilMode[])[];
+    modeTooltips?: AnvilModeTooltips | AnvilModeTooltipResolver;
 }
 interface AnvilModeStyleOptions {
     pathOptions?: L.PathOptions;
@@ -72,6 +75,7 @@ declare const ANVIL_EVENTS: {
 interface AnvilControlOptions extends L.ControlOptions {
     position?: L.ControlPosition;
     modes?: (AnvilMode | AnvilMode[])[];
+    modeTooltips?: AnvilModeTooltips | AnvilModeTooltipResolver;
 }
 declare class AnvilControl extends L.Control {
     private _btns;
@@ -82,4 +86,4 @@ declare class AnvilControl extends L.Control {
 }
 declare function anvilControl(anvil: Anvil, options?: AnvilControlOptions): AnvilControl;
 
-export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilModeStyleOptions, type AnvilModeStyles, type AnvilOptions, type Mode, anvilControl };
+export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilModeStyleOptions, type AnvilModeStyles, type AnvilModeTooltipResolver, type AnvilModeTooltips, type AnvilOptions, type Mode, anvilControl };

package/dist/index.js

@@ -2216,25 +2216,26 @@ var L21 = __toESM(require("leaflet"));
 var import_lucide = require("lucide");
 var ANVIL_TOOLBAR_STYLE_ID = "anvil-toolbar-styles";
 var MODE_CONFIGS = [
-  { id: "marker" /* Marker */, title: "Marker", icon: import_lucide.MapPin },
-  { id: "polyline" /* Polyline */, title: "Line", icon: import_lucide.Waypoints },
-  { id: "polygon" /* Polygon */, title: "Polygon", icon: import_lucide.Pentagon },
-  { id: "rectangle" /* Rectangle */, title: "Rectangle", icon: import_lucide.RectangleHorizontal },
-  { id: "square" /* Square */, title: "Square", icon: import_lucide.Square },
-  { id: "triangle" /* Triangle */, title: "Triangle", icon: import_lucide.Triangle },
-  { id: "circle" /* Circle */, title: "Circle", icon: import_lucide.Circle },
-  { id: "freehand" /* Freehand */, title: "Freehand", icon: import_lucide.Hand },
-  { id: "cut" /* Cut */, title: "Cut", icon: import_lucide.Scissors },
-  { id: "split" /* Split */, title: "Split", icon: import_lucide.Split },
-  { id: "union" /* Union */, title: "Union", icon: import_lucide.SquaresUnite },
-  { id: "subtract" /* Subtract */, title: "Subtract", icon: import_lucide.SquaresSubtract },
-  { id: "drag" /* Drag */, title: "Drag", icon: import_lucide.Move },
-  { id: "scale" /* Scale */, title: "Scale", icon: import_lucide.Scaling },
-  { id: "rotate" /* Rotate */, title: "Rotate", icon: import_lucide.RotateCw },
-  { id: "edit" /* Edit */, title: "Edit", icon: import_lucide.SquarePen },
-  { id: "delete" /* Delete */, title: "Delete", icon: import_lucide.Trash2 },
-  { id: "off" /* Off */, title: "Turn Off", icon: import_lucide.Power }
+  { id: "marker" /* Marker */, defaultTooltip: "Marker", icon: import_lucide.MapPin },
+  { id: "polyline" /* Polyline */, defaultTooltip: "Line", icon: import_lucide.Waypoints },
+  { id: "polygon" /* Polygon */, defaultTooltip: "Polygon", icon: import_lucide.Pentagon },
+  { id: "rectangle" /* Rectangle */, defaultTooltip: "Rectangle", icon: import_lucide.RectangleHorizontal },
+  { id: "square" /* Square */, defaultTooltip: "Square", icon: import_lucide.Square },
+  { id: "triangle" /* Triangle */, defaultTooltip: "Triangle", icon: import_lucide.Triangle },
+  { id: "circle" /* Circle */, defaultTooltip: "Circle", icon: import_lucide.Circle },
+  { id: "freehand" /* Freehand */, defaultTooltip: "Freehand", icon: import_lucide.Hand },
+  { id: "cut" /* Cut */, defaultTooltip: "Cut", icon: import_lucide.Scissors },
+  { id: "split" /* Split */, defaultTooltip: "Split", icon: import_lucide.Split },
+  { id: "union" /* Union */, defaultTooltip: "Union", icon: import_lucide.SquaresUnite },
+  { id: "subtract" /* Subtract */, defaultTooltip: "Subtract", icon: import_lucide.SquaresSubtract },
+  { id: "drag" /* Drag */, defaultTooltip: "Drag", icon: import_lucide.Move },
+  { id: "scale" /* Scale */, defaultTooltip: "Scale", icon: import_lucide.Scaling },
+  { id: "rotate" /* Rotate */, defaultTooltip: "Rotate", icon: import_lucide.RotateCw },
+  { id: "edit" /* Edit */, defaultTooltip: "Edit", icon: import_lucide.SquarePen },
+  { id: "delete" /* Delete */, defaultTooltip: "Delete", icon: import_lucide.Trash2 },
+  { id: "off" /* Off */, defaultTooltip: "Turn Off", icon: import_lucide.Power }
 ];
+var MODE_CONFIGS_BY_ID = new Map(MODE_CONFIGS.map((config) => [config.id, config]));
 function ensureToolbarStyles() {
   if (typeof document === "undefined" || document.getElementById(ANVIL_TOOLBAR_STYLE_ID)) return;
   const style = document.createElement("style");
@@ -2304,6 +2305,12 @@ function buildIcon(iconNode) {
     focusable: "false"
   });
 }
+function resolveModeTooltip(config, modeTooltips) {
+  if (typeof modeTooltips === "function") {
+    return modeTooltips(config.id, config.defaultTooltip) ?? config.defaultTooltip;
+  }
+  return modeTooltips?.[config.id] ?? config.defaultTooltip;
+}
 var AnvilControl = class extends L21.Control {
   constructor(anvil, options) {
     super(L21.Util.extend({ position: "topleft" }, options));
@@ -2321,11 +2328,16 @@ var AnvilControl = class extends L21.Control {
     const createButton = (group, config) => {
       const btn = L21.DomUtil.create("a", "anvil-control-btn", group);
       btn.href = "#";
-      btn.title = config.title;
       btn.setAttribute("role", "button");
-      btn.setAttribute("aria-label", config.title);
       btn.appendChild(buildIcon(config.icon));
+      const syncTooltip = () => {
+        const tooltip = resolveModeTooltip(config, this._options.modeTooltips);
+        btn.title = tooltip;
+        btn.setAttribute("aria-label", tooltip);
+      };
+      syncTooltip();
       L21.DomEvent.disableClickPropagation(btn);
+      L21.DomEvent.on(btn, "mouseover focus", syncTooltip);
       L21.DomEvent.on(btn, "click", (e) => {
         L21.DomEvent.preventDefault(e);
         if (config.id === "off" /* Off */) {
@@ -2339,12 +2351,12 @@ var AnvilControl = class extends L21.Control {
     blocks.forEach((block, index) => {
       const group = L21.DomUtil.create("div", "leaflet-bar anvil-toolbar-group", container);
       block.forEach((modeId) => {
-        const config = MODE_CONFIGS.find(({ id }) => id === modeId);
+        const config = MODE_CONFIGS_BY_ID.get(modeId);
         if (!config) return;
         createButton(group, config);
       });
       if (index === blocks.length - 1 && !this._btns["off" /* Off */]) {
-        createButton(group, MODE_CONFIGS.find(({ id }) => id === "off" /* Off */));
+        createButton(group, MODE_CONFIGS_BY_ID.get("off" /* Off */));
       }
     });
     const updateFn = (mode) => {
@@ -2440,7 +2452,8 @@ var Anvil = class {
     });
     this.control = anvilControl(this, {
       position: this.options.controlPosition,
-      modes: modesFromOptions
+      modes: modesFromOptions,
+      modeTooltips: this.options.modeTooltips
     });
     this.control?.addTo(this.map);
   }

package/dist/index.mjs

@@ -2200,25 +2200,26 @@ import {
 } from "lucide";
 var ANVIL_TOOLBAR_STYLE_ID = "anvil-toolbar-styles";
 var MODE_CONFIGS = [
-  { id: "marker" /* Marker */, title: "Marker", icon: MapPin },
-  { id: "polyline" /* Polyline */, title: "Line", icon: Waypoints },
-  { id: "polygon" /* Polygon */, title: "Polygon", icon: Pentagon },
-  { id: "rectangle" /* Rectangle */, title: "Rectangle", icon: RectangleHorizontal },
-  { id: "square" /* Square */, title: "Square", icon: Square },
-  { id: "triangle" /* Triangle */, title: "Triangle", icon: Triangle },
-  { id: "circle" /* Circle */, title: "Circle", icon: Circle6 },
-  { id: "freehand" /* Freehand */, title: "Freehand", icon: Hand },
-  { id: "cut" /* Cut */, title: "Cut", icon: Scissors },
-  { id: "split" /* Split */, title: "Split", icon: Split },
-  { id: "union" /* Union */, title: "Union", icon: SquaresUnite },
-  { id: "subtract" /* Subtract */, title: "Subtract", icon: SquaresSubtract },
-  { id: "drag" /* Drag */, title: "Drag", icon: Move },
-  { id: "scale" /* Scale */, title: "Scale", icon: Scaling },
-  { id: "rotate" /* Rotate */, title: "Rotate", icon: RotateCw },
-  { id: "edit" /* Edit */, title: "Edit", icon: SquarePen },
-  { id: "delete" /* Delete */, title: "Delete", icon: Trash2 },
-  { id: "off" /* Off */, title: "Turn Off", icon: Power }
+  { id: "marker" /* Marker */, defaultTooltip: "Marker", icon: MapPin },
+  { id: "polyline" /* Polyline */, defaultTooltip: "Line", icon: Waypoints },
+  { id: "polygon" /* Polygon */, defaultTooltip: "Polygon", icon: Pentagon },
+  { id: "rectangle" /* Rectangle */, defaultTooltip: "Rectangle", icon: RectangleHorizontal },
+  { id: "square" /* Square */, defaultTooltip: "Square", icon: Square },
+  { id: "triangle" /* Triangle */, defaultTooltip: "Triangle", icon: Triangle },
+  { id: "circle" /* Circle */, defaultTooltip: "Circle", icon: Circle6 },
+  { id: "freehand" /* Freehand */, defaultTooltip: "Freehand", icon: Hand },
+  { id: "cut" /* Cut */, defaultTooltip: "Cut", icon: Scissors },
+  { id: "split" /* Split */, defaultTooltip: "Split", icon: Split },
+  { id: "union" /* Union */, defaultTooltip: "Union", icon: SquaresUnite },
+  { id: "subtract" /* Subtract */, defaultTooltip: "Subtract", icon: SquaresSubtract },
+  { id: "drag" /* Drag */, defaultTooltip: "Drag", icon: Move },
+  { id: "scale" /* Scale */, defaultTooltip: "Scale", icon: Scaling },
+  { id: "rotate" /* Rotate */, defaultTooltip: "Rotate", icon: RotateCw },
+  { id: "edit" /* Edit */, defaultTooltip: "Edit", icon: SquarePen },
+  { id: "delete" /* Delete */, defaultTooltip: "Delete", icon: Trash2 },
+  { id: "off" /* Off */, defaultTooltip: "Turn Off", icon: Power }
 ];
+var MODE_CONFIGS_BY_ID = new Map(MODE_CONFIGS.map((config) => [config.id, config]));
 function ensureToolbarStyles() {
   if (typeof document === "undefined" || document.getElementById(ANVIL_TOOLBAR_STYLE_ID)) return;
   const style = document.createElement("style");
@@ -2288,6 +2289,12 @@ function buildIcon(iconNode) {
     focusable: "false"
   });
 }
+function resolveModeTooltip(config, modeTooltips) {
+  if (typeof modeTooltips === "function") {
+    return modeTooltips(config.id, config.defaultTooltip) ?? config.defaultTooltip;
+  }
+  return modeTooltips?.[config.id] ?? config.defaultTooltip;
+}
 var AnvilControl = class extends L21.Control {
   constructor(anvil, options) {
     super(L21.Util.extend({ position: "topleft" }, options));
@@ -2305,11 +2312,16 @@ var AnvilControl = class extends L21.Control {
     const createButton = (group, config) => {
       const btn = L21.DomUtil.create("a", "anvil-control-btn", group);
       btn.href = "#";
-      btn.title = config.title;
       btn.setAttribute("role", "button");
-      btn.setAttribute("aria-label", config.title);
       btn.appendChild(buildIcon(config.icon));
+      const syncTooltip = () => {
+        const tooltip = resolveModeTooltip(config, this._options.modeTooltips);
+        btn.title = tooltip;
+        btn.setAttribute("aria-label", tooltip);
+      };
+      syncTooltip();
       L21.DomEvent.disableClickPropagation(btn);
+      L21.DomEvent.on(btn, "mouseover focus", syncTooltip);
       L21.DomEvent.on(btn, "click", (e) => {
         L21.DomEvent.preventDefault(e);
         if (config.id === "off" /* Off */) {
@@ -2323,12 +2335,12 @@ var AnvilControl = class extends L21.Control {
     blocks.forEach((block, index) => {
       const group = L21.DomUtil.create("div", "leaflet-bar anvil-toolbar-group", container);
       block.forEach((modeId) => {
-        const config = MODE_CONFIGS.find(({ id }) => id === modeId);
+        const config = MODE_CONFIGS_BY_ID.get(modeId);
         if (!config) return;
         createButton(group, config);
       });
       if (index === blocks.length - 1 && !this._btns["off" /* Off */]) {
-        createButton(group, MODE_CONFIGS.find(({ id }) => id === "off" /* Off */));
+        createButton(group, MODE_CONFIGS_BY_ID.get("off" /* Off */));
       }
     });
     const updateFn = (mode) => {
@@ -2424,7 +2436,8 @@ var Anvil = class {
     });
     this.control = anvilControl(this, {
       position: this.options.controlPosition,
-      modes: modesFromOptions
+      modes: modesFromOptions,
+      modeTooltips: this.options.modeTooltips
     });
     this.control?.addTo(this.map);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-anvil",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A minimal drawing and editing toolkit for Leaflet.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",