leaflet-anvil 0.2.1 → 0.2.2
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.
- package/README.md +82 -0
- package/dist/index.d.mts +10 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.js +493 -247
- package/dist/index.mjs +513 -247
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
A minimalist, powerful toolkit for drawing and editing geometries in [Leaflet](https://leafletjs.com/). Focused on a clean API, modern
|
|
4
4
|
TypeScript features, and support for complex geometric operations like Union and Subtract.
|
|
5
5
|
|
|
6
|
+
> Leaflet Anvil is currently a work in progress. Feedback, ideas, and bug reports are very welcome.
|
|
7
|
+
> The API and overall behavior are planned to be considered stable starting with `v1.0.0`.
|
|
8
|
+
|
|
6
9
|
## Features
|
|
7
10
|
|
|
8
11
|
- **Drawing Modes**: Marker, Polylines, Polygons, Rectangles, Squares, Triangles, Circles, and Freehand Drawing.
|
|
@@ -85,9 +88,88 @@ Activation via `anvil.enable(AnvilMode.Name)` or through the UI toolbar:
|
|
|
85
88
|
| `snapDistance` | `number` | `10` | **Snap Distance:** Determines the distance in pixels at which a point "jumps" to the nearest existing vertex. |
|
|
86
89
|
| `magnetic` | `boolean` | `false` | **Magnetism:** Enhances snapping behavior. Points are actively attracted once they enter the radius. |
|
|
87
90
|
| `preventSelfIntersection` | `boolean` | `false` | **Validation:** Prevents edges from self-intersecting in polygons and lines. Blocks invalid segments during drawing. |
|
|
91
|
+
| `pathOptions` | `object` | `Leaflet` | Global fallback styles for path-based layers such as polygons, lines, rectangles and circles. |
|
|
92
|
+
| `ghostPathOptions` | `object` | `Inherited` | Global fallback styles for temporary preview geometry while drawing. |
|
|
93
|
+
| `vertexOptions` | `object` | `Leaflet` | Global fallback marker options for marker-based drawing. |
|
|
94
|
+
| `modeStyles` | `object` | `{}` | Per-mode style overrides for drawing, handles and active selection/highlight states. |
|
|
88
95
|
| `controlPosition` | `string` | `'topleft'` | Determines the position of the toolbar on the map (e.g., `'topright'`). |
|
|
89
96
|
| `modes` | `Array` | `All` | Defines which buttons appear in the toolbar. Supports nested arrays for button groups (blocks). |
|
|
90
97
|
|
|
98
|
+
### Mode-Specific Styles
|
|
99
|
+
|
|
100
|
+
Global `pathOptions`, `ghostPathOptions` and `vertexOptions` still work as shared defaults.
|
|
101
|
+
With `modeStyles`, you can override them per mode.
|
|
102
|
+
|
|
103
|
+
Supported per-mode keys:
|
|
104
|
+
|
|
105
|
+
- `pathOptions`: Final style of created path layers for that mode.
|
|
106
|
+
- `ghostPathOptions`: Temporary preview style while drawing.
|
|
107
|
+
- `vertexOptions`: Marker options for marker-based modes.
|
|
108
|
+
- `handleOptions`: Options for helper handles such as polygon close handles or edit handles.
|
|
109
|
+
- `selectionPathOptions`: Highlight style for selected/active geometry in modes like `Edit`, `Drag`, `Scale`, `Rotate`, `Union` and `Subtract`.
|
|
110
|
+
|
|
111
|
+
```typescript
|
|
112
|
+
const anvil = new Anvil(map, {
|
|
113
|
+
pathOptions: {
|
|
114
|
+
color: '#334155',
|
|
115
|
+
weight: 3,
|
|
116
|
+
},
|
|
117
|
+
ghostPathOptions: {
|
|
118
|
+
dashArray: '6 4',
|
|
119
|
+
opacity: 0.7,
|
|
120
|
+
},
|
|
121
|
+
modeStyles: {
|
|
122
|
+
[AnvilMode.Polyline]: {
|
|
123
|
+
pathOptions: {
|
|
124
|
+
color: '#0f766e',
|
|
125
|
+
weight: 5,
|
|
126
|
+
},
|
|
127
|
+
},
|
|
128
|
+
[AnvilMode.Polygon]: {
|
|
129
|
+
pathOptions: {
|
|
130
|
+
color: '#ea580c',
|
|
131
|
+
fillColor: '#fdba74',
|
|
132
|
+
fillOpacity: 0.35,
|
|
133
|
+
},
|
|
134
|
+
handleOptions: {
|
|
135
|
+
radius: 6,
|
|
136
|
+
color: '#ea580c',
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
[AnvilMode.Edit]: {
|
|
140
|
+
selectionPathOptions: {
|
|
141
|
+
color: '#db2777',
|
|
142
|
+
weight: 4,
|
|
143
|
+
},
|
|
144
|
+
handleOptions: {
|
|
145
|
+
color: '#db2777',
|
|
146
|
+
fillColor: '#fff7fb',
|
|
147
|
+
radius: 6,
|
|
148
|
+
},
|
|
149
|
+
},
|
|
150
|
+
[AnvilMode.Rotate]: {
|
|
151
|
+
selectionPathOptions: {
|
|
152
|
+
color: '#8b5cf6',
|
|
153
|
+
weight: 5,
|
|
154
|
+
},
|
|
155
|
+
},
|
|
156
|
+
[AnvilMode.Marker]: {
|
|
157
|
+
vertexOptions: {
|
|
158
|
+
icon: L.divIcon({
|
|
159
|
+
className: 'custom-marker',
|
|
160
|
+
html: '<div class="marker-dot"></div>',
|
|
161
|
+
iconSize: [16, 16],
|
|
162
|
+
iconAnchor: [8, 8],
|
|
163
|
+
}),
|
|
164
|
+
},
|
|
165
|
+
},
|
|
166
|
+
},
|
|
167
|
+
});
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
If you want to style the active highlight of interaction modes, use `selectionPathOptions`.
|
|
171
|
+
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`.
|
|
172
|
+
|
|
91
173
|
### Events (`ANVIL_EVENTS`)
|
|
92
174
|
|
|
93
175
|
All events are fired on the Leaflet map:
|
package/dist/index.d.mts
CHANGED
|
@@ -35,9 +35,18 @@ interface AnvilOptions {
|
|
|
35
35
|
pathOptions?: L.PathOptions;
|
|
36
36
|
ghostPathOptions?: L.PathOptions;
|
|
37
37
|
vertexOptions?: L.MarkerOptions;
|
|
38
|
+
modeStyles?: AnvilModeStyles;
|
|
38
39
|
controlPosition?: L.ControlPosition;
|
|
39
40
|
modes?: (AnvilMode | AnvilMode[])[];
|
|
40
41
|
}
|
|
42
|
+
interface AnvilModeStyleOptions {
|
|
43
|
+
pathOptions?: L.PathOptions;
|
|
44
|
+
ghostPathOptions?: L.PathOptions;
|
|
45
|
+
vertexOptions?: L.MarkerOptions;
|
|
46
|
+
handleOptions?: L.CircleMarkerOptions;
|
|
47
|
+
selectionPathOptions?: L.PathOptions;
|
|
48
|
+
}
|
|
49
|
+
type AnvilModeStyles = Partial<Record<AnvilMode, AnvilModeStyleOptions>>;
|
|
41
50
|
declare class Anvil {
|
|
42
51
|
private map;
|
|
43
52
|
private modeManager;
|
|
@@ -73,4 +82,4 @@ declare class AnvilControl extends L.Control {
|
|
|
73
82
|
}
|
|
74
83
|
declare function anvilControl(anvil: Anvil, options?: AnvilControlOptions): AnvilControl;
|
|
75
84
|
|
|
76
|
-
export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilOptions, type Mode, anvilControl };
|
|
85
|
+
export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilModeStyleOptions, type AnvilModeStyles, type AnvilOptions, type Mode, anvilControl };
|
package/dist/index.d.ts
CHANGED
|
@@ -35,9 +35,18 @@ interface AnvilOptions {
|
|
|
35
35
|
pathOptions?: L.PathOptions;
|
|
36
36
|
ghostPathOptions?: L.PathOptions;
|
|
37
37
|
vertexOptions?: L.MarkerOptions;
|
|
38
|
+
modeStyles?: AnvilModeStyles;
|
|
38
39
|
controlPosition?: L.ControlPosition;
|
|
39
40
|
modes?: (AnvilMode | AnvilMode[])[];
|
|
40
41
|
}
|
|
42
|
+
interface AnvilModeStyleOptions {
|
|
43
|
+
pathOptions?: L.PathOptions;
|
|
44
|
+
ghostPathOptions?: L.PathOptions;
|
|
45
|
+
vertexOptions?: L.MarkerOptions;
|
|
46
|
+
handleOptions?: L.CircleMarkerOptions;
|
|
47
|
+
selectionPathOptions?: L.PathOptions;
|
|
48
|
+
}
|
|
49
|
+
type AnvilModeStyles = Partial<Record<AnvilMode, AnvilModeStyleOptions>>;
|
|
41
50
|
declare class Anvil {
|
|
42
51
|
private map;
|
|
43
52
|
private modeManager;
|
|
@@ -73,4 +82,4 @@ declare class AnvilControl extends L.Control {
|
|
|
73
82
|
}
|
|
74
83
|
declare function anvilControl(anvil: Anvil, options?: AnvilControlOptions): AnvilControl;
|
|
75
84
|
|
|
76
|
-
export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilOptions, type Mode, anvilControl };
|
|
85
|
+
export { ANVIL_EVENTS, Anvil, AnvilControl, type AnvilControlOptions, AnvilMode, type AnvilModeStyleOptions, type AnvilModeStyles, type AnvilOptions, type Mode, anvilControl };
|