leaflet-anvil 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +71 -61
  2. package/dist/index.d.mts +29 -3
  3. package/dist/index.d.ts +29 -3
  4. package/dist/index.js +260 -123
  5. package/dist/index.mjs +259 -123
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,18 +1,18 @@
1
1
  # Leaflet Anvil 🛠️
2
2
 
3
- Ein minimalistisches, leistungsstarkes Toolkit zum Zeichnen und Editieren von Geometrien in [Leaflet](https://leafletjs.com/). Fokus liegt
4
- auf einer sauberen API, modernen TypeScript-Features und Unterstützung für komplexe geometrische Operationen wie Union und Subtract.
3
+ A minimalist, powerful toolkit for drawing and editing geometries in [Leaflet](https://leafletjs.com/). Focused on a clean API, modern
4
+ TypeScript features, and support for complex geometric operations like Union and Subtract.
5
5
 
6
6
  ## Features
7
7
 
8
- - **Zeichen-Modi**: Marker, Polylines, Polygone, Rechtecke, Quadrate, Dreiecke, Kreise und Freehand-Drawing.
9
- - **Editier-Tools**: Drag, Scale, Rotate und Vertex-Editing.
10
- - **Geometrische Operationen**:
11
- - `Union`: Verschmelzen von zwei Polygonen.
12
- - `Subtract`: Abziehen eines Polygons von einem anderen.
13
- - `Cut` & `Split`: Zerschneiden von Linien oder Flächen.
14
- - **Smart Helpers**: Snapping (Einrasten) an vorhandenen Punkten und Magnetic-Modus.
15
- - **Event-basiert**: Einfache Integration durch ein konsistentes Event-System.
8
+ - **Drawing Modes**: Marker, Polylines, Polygons, Rectangles, Squares, Triangles, Circles, and Freehand Drawing.
9
+ - **Editing Tools**: Drag, Scale, Rotate, and Vertex editing.
10
+ - **Geometric Operations**:
11
+ - `Union`: Merge two polygons into one.
12
+ - `Subtract`: Subtract one polygon from another.
13
+ - `Cut` & `Split`: Cut lines or split areas.
14
+ - **Smart Helpers**: Snapping to existing points and Magnetic mode.
15
+ - **Event-driven**: Easy integration through a consistent event system.
16
16
 
17
17
  ## Installation
18
18
 
@@ -20,89 +20,99 @@ auf einer sauberen API, modernen TypeScript-Features und Unterstützung für kom
20
20
  npm install leaflet-anvil
21
21
  ```
22
22
 
23
- *Hinweis: Leaflet ist eine Peer-Dependency und muss ebenfalls installiert sein.*
23
+ *Note: Leaflet is a peer dependency and must be installed separately.*
24
24
 
25
- ## Schnellstart
25
+ ## Quick Start
26
26
 
27
27
  ```typescript
28
28
  import L from 'leaflet';
29
- import { Anvil } from 'leaflet-anvil';
29
+ import { Anvil, AnvilMode } from 'leaflet-anvil';
30
30
 
31
31
  const map = L.map('map').setView([51.505, -0.09], 13);
32
32
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
33
33
 
34
- // Anvil initialisieren
34
+ // Initialize Anvil
35
35
  const anvil = new Anvil(map, {
36
36
  snapping: true,
37
- snapDistance: 15
37
+ snapDistance: 15,
38
+ magnetic: true,
39
+ preventSelfIntersection: true,
40
+ controlPosition: 'topleft',
41
+ modes: [
42
+ [AnvilMode.Polygon, AnvilMode.Marker],
43
+ [AnvilMode.Edit, AnvilMode.Delete]
44
+ ]
38
45
  });
39
46
 
40
- // Einen Modus aktivieren
41
- anvil.enable('draw:polygon');
47
+ // Enable a mode
48
+ anvil.enable(AnvilMode.Polygon);
42
49
 
43
- // Auf Events reagieren
50
+ // React to events
44
51
  map.on('anvil:created', (e) => {
45
- console.log('Neuer Layer erstellt:', e.layer);
52
+ console.log('New layer created:', e.layer);
46
53
  });
47
54
  ```
48
55
 
49
- ## Verfügbare Modi
50
-
51
- Aktivierung über `anvil.enable(modeName)`:
52
-
53
- | Modus | Beschreibung |
54
- |:-----------------|:----------------------------------------|
55
- | `draw:marker` | Setzt einen Marker |
56
- | `draw:polyline` | Zeichnet eine Linie |
57
- | `draw:polygon` | Zeichnet eine geschlossene Fläche |
58
- | `draw:rectangle` | Zeichnet ein Rechteck |
59
- | `draw:circle` | Zeichnet einen Kreis |
60
- | `draw:freehand` | Freihandzeichnen (Klicken und Ziehen) |
61
- | `edit` | Bearbeiten von Eckpunkten (Vertices) |
62
- | `drag` | Verschieben von ganzen Layern |
63
- | `rotate` | Rotieren von Geometrien |
64
- | `scale` | Skalieren von Geometrien |
65
- | `union` | Verschmelzen zweier Polygone |
66
- | `subtract` | Abziehen des zweiten vom ersten Polygon |
67
- | `delete` | Layer per Klick entfernen |
68
-
69
- ## API Referenz
70
-
71
- ### Anvil Options
72
-
73
- | Option | Typ | Standard | Beschreibung |
74
- |:--------------------------|:----------------|:---------|:------------------------------------|
75
- | `snapping` | `boolean` | `false` | Aktiviert Snapping an Eckpunkten |
76
- | `snapDistance` | `number` | `10` | Distanz in Pixeln für Snapping |
77
- | `preventSelfIntersection` | `boolean` | `false` | Verhindert Selbstüberschneidungen |
78
- | `pathOptions` | `L.PathOptions` | `{}` | Standard-Styles für neue Geometrien |
56
+ ## Available Modes
57
+
58
+ Activation via `anvil.enable(AnvilMode.Name)` or through the UI toolbar:
59
+
60
+ | Category | Mode (AnvilMode) | Description |
61
+ |:-------------:|:-----------------|:---------------------------------------------------------|
62
+ | **Drawing** | `Marker` | Places a marker on the map. |
63
+ | | `Polyline` | Creates line strings by clicking. |
64
+ | | `Polygon` | Creates closed surfaces. |
65
+ | | `Freehand` | Draws lines/surfaces by holding the mouse button. |
66
+ | **Shapes** | `Rectangle` | Creates a rectangle (2-point). |
67
+ | | `Square` | Creates a square with a fixed aspect ratio. |
68
+ | | `Triangle` | Creates a triangle. |
69
+ | | `Circle` | Creates a circle with radius determination. |
70
+ | **Transform** | `Edit` | Edit individual vertices. |
71
+ | | `Drag` | Move entire geometries on the map. |
72
+ | | `Scale` | Proportional resizing (scaling). |
73
+ | | `Rotate` | Rotate geometries around their center. |
74
+ | **Geometry** | `Cut` | Cut lines or surfaces at a point. |
75
+ | | `Split` | Split a geometry by a drawn line. |
76
+ | | `Union` | Merge the next two clicked polygons. |
77
+ | | `Subtract` | The second clicked polygon is subtracted from the first. |
78
+ | **Actions** | `Delete` | Deletes the clicked layer immediately. |
79
+
80
+ ## Configuration (AnvilOptions)
81
+
82
+ | Option | Type | Default | Description |
83
+ |:--------------------------|:----------|:------------|:---------------------------------------------------------------------------------------------------------------------|
84
+ | `snapping` | `boolean` | `false` | **Snapping:** If `true`, new points automatically snap to existing vertices of other geometries. |
85
+ | `snapDistance` | `number` | `10` | **Snap Distance:** Determines the distance in pixels at which a point "jumps" to the nearest existing vertex. |
86
+ | `magnetic` | `boolean` | `false` | **Magnetism:** Enhances snapping behavior. Points are actively attracted once they enter the radius. |
87
+ | `preventSelfIntersection` | `boolean` | `false` | **Validation:** Prevents edges from self-intersecting in polygons and lines. Blocks invalid segments during drawing. |
88
+ | `controlPosition` | `string` | `'topleft'` | Determines the position of the toolbar on the map (e.g., `'topright'`). |
89
+ | `modes` | `Array` | `All` | Defines which buttons appear in the toolbar. Supports nested arrays for button groups (blocks). |
79
90
 
80
91
  ### Events (`ANVIL_EVENTS`)
81
92
 
82
- Alle Events werden auf der Leaflet-Map gefeuert:
93
+ All events are fired on the Leaflet map:
83
94
 
84
- - `anvil:created`: Wenn ein neuer Layer fertiggestellt wurde.
85
- - `anvil:edited`: Wenn ein Layer verändert wurde (drag/rotate/edit/scale).
86
- - `anvil:deleted`: Wenn ein Layer entfernt wurde.
87
- - `anvil:modechange`: Wenn der aktive Modus wechselt.
95
+ - `anvil:created`: When a new layer has been finalized.
96
+ - `anvil:edited`: When a layer has been modified (drag/rotate/edit/scale).
97
+ - `anvil:deleted`: When a layer has been removed.
98
+ - `anvil:modechange`: When the active mode changes.
88
99
 
89
- ## Entwicklung
100
+ ## Development
90
101
 
91
102
  ```bash
92
- # Abhängigkeiten installieren
103
+ # Install dependencies
93
104
  npm install
94
105
 
95
- # Entwicklungsserver (Vite)
106
+ # Development server (Vite)
96
107
  npm run dev
97
108
 
98
- # Tests ausführen
109
+ # Run tests
99
110
  npm test
100
111
 
101
- # Build erstellen
112
+ # Create build
102
113
  npm run build
103
114
  ```
104
115
 
105
- ## Lizenz
116
+ ## License
106
117
 
107
118
  MIT
108
-
package/dist/index.d.mts CHANGED
@@ -1,5 +1,26 @@
1
1
  import * as L from 'leaflet';
2
2
 
3
+ declare enum AnvilMode {
4
+ Polygon = "polygon",
5
+ Polyline = "polyline",
6
+ Marker = "marker",
7
+ Rectangle = "rectangle",
8
+ Square = "square",
9
+ Triangle = "triangle",
10
+ Circle = "circle",
11
+ Freehand = "freehand",
12
+ Cut = "cut",
13
+ Split = "split",
14
+ Drag = "drag",
15
+ Scale = "scale",
16
+ Rotate = "rotate",
17
+ Union = "union",
18
+ Subtract = "subtract",
19
+ Edit = "edit",
20
+ Delete = "delete",
21
+ Off = "off"
22
+ }
23
+
3
24
  interface Mode {
4
25
  enable(): void;
5
26
  disable(): void;
@@ -14,14 +35,17 @@ interface AnvilOptions {
14
35
  pathOptions?: L.PathOptions;
15
36
  ghostPathOptions?: L.PathOptions;
16
37
  vertexOptions?: L.MarkerOptions;
38
+ controlPosition?: L.ControlPosition;
39
+ modes?: (AnvilMode | AnvilMode[])[];
17
40
  }
18
41
  declare class Anvil {
19
42
  private map;
20
43
  private modeManager;
21
44
  private store;
22
45
  private options;
46
+ private control?;
23
47
  constructor(map: L.Map, options?: AnvilOptions);
24
- enable(mode: 'draw:polygon' | 'draw:polyline' | 'draw:marker' | 'draw:rectangle' | 'draw:square' | 'draw:triangle' | 'draw:circle' | 'draw:freehand' | 'cut' | 'split' | 'union' | 'subtract' | 'drag' | 'scale' | 'rotate' | 'edit' | 'delete'): void;
48
+ enable(mode: AnvilMode): void;
25
49
  disable(): void;
26
50
  getLayerGroup(): L.FeatureGroup;
27
51
  }
@@ -38,13 +62,15 @@ declare const ANVIL_EVENTS: {
38
62
 
39
63
  interface AnvilControlOptions extends L.ControlOptions {
40
64
  position?: L.ControlPosition;
65
+ modes?: (AnvilMode | AnvilMode[])[];
41
66
  }
42
67
  declare class AnvilControl extends L.Control {
43
68
  private _btns;
44
69
  private _anvil;
45
- constructor(anvil: Anvil, options?: L.ControlOptions);
70
+ private _options;
71
+ constructor(anvil: Anvil, options?: AnvilControlOptions);
46
72
  onAdd(map: L.Map): HTMLElement;
47
73
  }
48
74
  declare function anvilControl(anvil: Anvil, options?: AnvilControlOptions): AnvilControl;
49
75
 
50
- export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, type AnvilOptions, type Mode, anvilControl };
76
+ export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilOptions, type Mode, anvilControl };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,26 @@
1
1
  import * as L from 'leaflet';
2
2
 
3
+ declare enum AnvilMode {
4
+ Polygon = "polygon",
5
+ Polyline = "polyline",
6
+ Marker = "marker",
7
+ Rectangle = "rectangle",
8
+ Square = "square",
9
+ Triangle = "triangle",
10
+ Circle = "circle",
11
+ Freehand = "freehand",
12
+ Cut = "cut",
13
+ Split = "split",
14
+ Drag = "drag",
15
+ Scale = "scale",
16
+ Rotate = "rotate",
17
+ Union = "union",
18
+ Subtract = "subtract",
19
+ Edit = "edit",
20
+ Delete = "delete",
21
+ Off = "off"
22
+ }
23
+
3
24
  interface Mode {
4
25
  enable(): void;
5
26
  disable(): void;
@@ -14,14 +35,17 @@ interface AnvilOptions {
14
35
  pathOptions?: L.PathOptions;
15
36
  ghostPathOptions?: L.PathOptions;
16
37
  vertexOptions?: L.MarkerOptions;
38
+ controlPosition?: L.ControlPosition;
39
+ modes?: (AnvilMode | AnvilMode[])[];
17
40
  }
18
41
  declare class Anvil {
19
42
  private map;
20
43
  private modeManager;
21
44
  private store;
22
45
  private options;
46
+ private control?;
23
47
  constructor(map: L.Map, options?: AnvilOptions);
24
- enable(mode: 'draw:polygon' | 'draw:polyline' | 'draw:marker' | 'draw:rectangle' | 'draw:square' | 'draw:triangle' | 'draw:circle' | 'draw:freehand' | 'cut' | 'split' | 'union' | 'subtract' | 'drag' | 'scale' | 'rotate' | 'edit' | 'delete'): void;
48
+ enable(mode: AnvilMode): void;
25
49
  disable(): void;
26
50
  getLayerGroup(): L.FeatureGroup;
27
51
  }
@@ -38,13 +62,15 @@ declare const ANVIL_EVENTS: {
38
62
 
39
63
  interface AnvilControlOptions extends L.ControlOptions {
40
64
  position?: L.ControlPosition;
65
+ modes?: (AnvilMode | AnvilMode[])[];
41
66
  }
42
67
  declare class AnvilControl extends L.Control {
43
68
  private _btns;
44
69
  private _anvil;
45
- constructor(anvil: Anvil, options?: L.ControlOptions);
70
+ private _options;
71
+ constructor(anvil: Anvil, options?: AnvilControlOptions);
46
72
  onAdd(map: L.Map): HTMLElement;
47
73
  }
48
74
  declare function anvilControl(anvil: Anvil, options?: AnvilControlOptions): AnvilControl;
49
75
 
50
- export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, type AnvilOptions, type Mode, anvilControl };
76
+ export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilOptions, type Mode, anvilControl };