leaflet-anvil 0.2.1 → 0.2.3

package/README.md

@@ -3,6 +3,9 @@
 A minimalist, powerful toolkit for drawing and editing geometries in [Leaflet](https://leafletjs.com/). Focused on a clean API, modern
 TypeScript features, and support for complex geometric operations like Union and Subtract.
 
+> Leaflet Anvil is currently a work in progress. Feedback, ideas, and bug reports are very welcome.
+> The API and overall behavior are planned to be considered stable starting with `v1.0.0`.
+
 ## Features
 
 - **Drawing Modes**: Marker, Polylines, Polygons, Rectangles, Squares, Triangles, Circles, and Freehand Drawing.
@@ -85,8 +88,112 @@ Activation via `anvil.enable(AnvilMode.Name)` or through the UI toolbar:
 | `snapDistance`            | `number`  | `10`        | **Snap Distance:** Determines the distance in pixels at which a point "jumps" to the nearest existing vertex.        |
 | `magnetic`                | `boolean` | `false`     | **Magnetism:** Enhances snapping behavior. Points are actively attracted once they enter the radius.                 |
 | `preventSelfIntersection` | `boolean` | `false`     | **Validation:** Prevents edges from self-intersecting in polygons and lines. Blocks invalid segments during drawing. |
+| `pathOptions`             | `object`  | `Leaflet`   | Global fallback styles for path-based layers such as polygons, lines, rectangles and circles.                        |
+| `ghostPathOptions`        | `object`  | `Inherited` | Global fallback styles for temporary preview geometry while drawing.                                                  |
+| `vertexOptions`           | `object`  | `Leaflet`   | Global fallback marker options for marker-based drawing.                                                              |
+| `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
+
+Global `pathOptions`, `ghostPathOptions` and `vertexOptions` still work as shared defaults.
+With `modeStyles`, you can override them per mode.
+
+Supported per-mode keys:
+
+- `pathOptions`: Final style of created path layers for that mode.
+- `ghostPathOptions`: Temporary preview style while drawing.
+- `vertexOptions`: Marker options for marker-based modes.
+- `handleOptions`: Options for helper handles such as polygon close handles or edit handles.
+- `selectionPathOptions`: Highlight style for selected/active geometry in modes like `Edit`, `Drag`, `Scale`, `Rotate`, `Union` and `Subtract`.
+
+```typescript
+const anvil = new Anvil(map, {
+    pathOptions: {
+        color: '#334155',
+        weight: 3,
+    },
+    ghostPathOptions: {
+        dashArray: '6 4',
+        opacity: 0.7,
+    },
+    modeStyles: {
+        [AnvilMode.Polyline]: {
+            pathOptions: {
+                color: '#0f766e',
+                weight: 5,
+            },
+        },
+        [AnvilMode.Polygon]: {
+            pathOptions: {
+                color: '#ea580c',
+                fillColor: '#fdba74',
+                fillOpacity: 0.35,
+            },
+            handleOptions: {
+                radius: 6,
+                color: '#ea580c',
+            },
+        },
+        [AnvilMode.Edit]: {
+            selectionPathOptions: {
+                color: '#db2777',
+                weight: 4,
+            },
+            handleOptions: {
+                color: '#db2777',
+                fillColor: '#fff7fb',
+                radius: 6,
+            },
+        },
+        [AnvilMode.Rotate]: {
+            selectionPathOptions: {
+                color: '#8b5cf6',
+                weight: 5,
+            },
+        },
+        [AnvilMode.Marker]: {
+            vertexOptions: {
+                icon: L.divIcon({
+                    className: 'custom-marker',
+                    html: '<div class="marker-dot"></div>',
+                    iconSize: [16, 16],
+                    iconAnchor: [8, 8],
+                }),
+            },
+        },
+    },
+});
+```
+
+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`)
 

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;
@@ -35,9 +37,19 @@ interface AnvilOptions {
     pathOptions?: L.PathOptions;
     ghostPathOptions?: L.PathOptions;
     vertexOptions?: L.MarkerOptions;
+    modeStyles?: AnvilModeStyles;
     controlPosition?: L.ControlPosition;
     modes?: (AnvilMode | AnvilMode[])[];
+    modeTooltips?: AnvilModeTooltips | AnvilModeTooltipResolver;
 }
+interface AnvilModeStyleOptions {
+    pathOptions?: L.PathOptions;
+    ghostPathOptions?: L.PathOptions;
+    vertexOptions?: L.MarkerOptions;
+    handleOptions?: L.CircleMarkerOptions;
+    selectionPathOptions?: L.PathOptions;
+}
+type AnvilModeStyles = Partial<Record<AnvilMode, AnvilModeStyleOptions>>;
 declare class Anvil {
     private map;
     private modeManager;
@@ -63,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;
@@ -73,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 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;
@@ -35,9 +37,19 @@ interface AnvilOptions {
     pathOptions?: L.PathOptions;
     ghostPathOptions?: L.PathOptions;
     vertexOptions?: L.MarkerOptions;
+    modeStyles?: AnvilModeStyles;
     controlPosition?: L.ControlPosition;
     modes?: (AnvilMode | AnvilMode[])[];
+    modeTooltips?: AnvilModeTooltips | AnvilModeTooltipResolver;
 }
+interface AnvilModeStyleOptions {
+    pathOptions?: L.PathOptions;
+    ghostPathOptions?: L.PathOptions;
+    vertexOptions?: L.MarkerOptions;
+    handleOptions?: L.CircleMarkerOptions;
+    selectionPathOptions?: L.PathOptions;
+}
+type AnvilModeStyles = Partial<Record<AnvilMode, AnvilModeStyleOptions>>;
 declare class Anvil {
     private map;
     private modeManager;
@@ -63,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;
@@ -73,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 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 };