leaflet-anvil 0.2.2 → 0.3.0

package/README.md

@@ -9,12 +9,12 @@ TypeScript features, and support for complex geometric operations like Union and
 ## Features
 
 - **Drawing Modes**: Marker, Polylines, Polygons, Rectangles, Squares, Triangles, Circles, and Freehand Drawing.
-- **Editing Tools**: Drag, Scale, Rotate, and Vertex editing.
+- **Editing Tools**: Drag, Scale, Rotate, vertex editing, and full-layer topology editing.
 - **Geometric Operations**:
     - `Union`: Merge two polygons into one.
     - `Subtract`: Subtract one polygon from another.
     - `Cut` & `Split`: Cut lines or split areas.
-- **Smart Helpers**: Snapping to existing points and Magnetic mode.
+- **Smart Helpers**: Snapping to existing points, topology-aware splitting, and linked vertices across touching layers while editing.
 - **Event-driven**: Easy integration through a consistent event system.
 
 ## Installation
@@ -38,7 +38,6 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 const anvil = new Anvil(map, {
     snapping: true,
     snapDistance: 15,
-    magnetic: true,
     preventSelfIntersection: true,
     controlPosition: 'topleft',
     modes: [
@@ -70,7 +69,8 @@ Activation via `anvil.enable(AnvilMode.Name)` or through the UI toolbar:
 |               | `Square`         | Creates a square with a fixed aspect ratio.              |
 |               | `Triangle`       | Creates a triangle.                                      |
 |               | `Circle`         | Creates a circle with radius determination.              |
-| **Transform** | `Edit`           | Edit individual vertices.                                |
+| **Transform** | `Edit`           | Edit selected geometries vertex-by-vertex.               |
+|               | `Topology`       | Edit the whole layer group with linked vertices across touching layers. |
 |               | `Drag`           | Move entire geometries on the map.                       |
 |               | `Scale`          | Proportional resizing (scaling).                         |
 |               | `Rotate`         | Rotate geometries around their center.                   |
@@ -86,7 +86,6 @@ Activation via `anvil.enable(AnvilMode.Name)` or through the UI toolbar:
 |:--------------------------|:----------|:------------|:---------------------------------------------------------------------------------------------------------------------|
 | `snapping`                | `boolean` | `false`     | **Snapping:** If `true`, new points automatically snap to existing vertices of other geometries.                     |
 | `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.                                                  |
@@ -94,6 +93,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
 
@@ -106,7 +106,7 @@ Supported per-mode keys:
 - `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`.
+- `selectionPathOptions`: Highlight style for selected/active geometry in modes like `Edit`, `Topology`, `Drag`, `Scale`, `Rotate`, `Union` and `Subtract`.
 
 ```typescript
 const anvil = new Anvil(map, {
@@ -147,6 +147,17 @@ const anvil = new Anvil(map, {
                 radius: 6,
             },
         },
+        [AnvilMode.Topology]: {
+            selectionPathOptions: {
+                color: '#0891b2',
+                weight: 3,
+            },
+            handleOptions: {
+                color: '#0891b2',
+                fillColor: '#ecfeff',
+                radius: 5,
+            },
+        },
         [AnvilMode.Rotate]: {
             selectionPathOptions: {
                 color: '#8b5cf6',
@@ -168,7 +179,31 @@ 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`.
+That is what controls the temporary emphasis color when a geometry is selected in modes such as `Edit` or while actively transforming it in `Topology`, `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

@@ -17,6 +17,7 @@ declare enum AnvilMode {
     Union = "union",
     Subtract = "subtract",
     Edit = "edit",
+    Topology = "topology",
     Delete = "delete",
     Off = "off"
 }
@@ -25,11 +26,12 @@ 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;
     snapDistance?: number;
-    magnetic?: boolean;
     freehandTolerance?: number;
     preventSelfIntersection?: boolean;
     pathOptions?: L.PathOptions;
@@ -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

@@ -17,6 +17,7 @@ declare enum AnvilMode {
     Union = "union",
     Subtract = "subtract",
     Edit = "edit",
+    Topology = "topology",
     Delete = "delete",
     Off = "off"
 }
@@ -25,11 +26,12 @@ 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;
     snapDistance?: number;
-    magnetic?: boolean;
     freehandTolerance?: number;
     preventSelfIntersection?: boolean;
     pathOptions?: L.PathOptions;
@@ -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 };