Skip to content

Commit

Permalink
Merge branch 'bytesnz-add-circle-marker-editor'
Browse files Browse the repository at this point in the history
  • Loading branch information
@yohanboniface
yohanboniface committed Sep 5, 2024
2 parents 3d3eba8 + 352b7be commit dadebc3
Show file tree
Hide file tree
Showing 5 changed files with 369 additions and 0 deletions.
58 changes: 58 additions & 0 deletions doc/api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,12 @@ <h3 id='editable-option' class="section">Options</h3>
<td><code>L.Marker</code></td>
<td>Class to be used when creating a new Marker.</td>
</tr>
<tr id='editable-circlemarkerclass'>
<td><code><b>circleMarkerClass</b></code></td>
<td><code>class</code>
<td><code>L.CircleMarker</code></td>
<td>Class to be used when creating a new CircleMarker.</td>
</tr>
<tr id='editable-rectangleclass'>
<td><code><b>rectangleClass</b></code></td>
<td><code>class</code>
Expand Down Expand Up @@ -203,6 +209,12 @@ <h3 id='editable-option' class="section">Options</h3>
<td><code>MarkerEditor</code></td>
<td>Class to be used as Marker editor.</td>
</tr>
<tr id='editable-circlemarkereditorclass'>
<td><code><b>circleMarkerEditorClass</b></code></td>
<td><code>class</code>
<td><code>CircleMarkerEditor</code></td>
<td>Class to be used as CircleMarker editor.</td>
</tr>
<tr id='editable-rectangleeditorclass'>
<td><code><b>rectangleEditorClass</b></code></td>
<td><code>class</code>
Expand Down Expand Up @@ -528,6 +540,13 @@ <h4 id='editable-public-methods'>Public methods</h4>
<td>Start adding a Marker. If <code>latlng</code> is given, the Marker will be shown first at this point.
In any case, it will follow the user mouse, and will have a final <code>latlng</code> on next click (or touch).
If <code>options</code> is given, it will be passed to the Marker class constructor.</td>
</tr>
<tr id='editable-startcirclemarker'>
<td><code><b>startCircleMarker</b>(<nobr>&lt;L.LatLng&gt; <i>latlng</i></nobr>, <nobr>&lt;hash&gt; <i>options</i></nobr>)</nobr></code></td>
<td><code>L.CircleMarker</code></td>
<td>Start adding a CircleMarker. If <code>latlng</code> is given, the CircleMarker will be shown first at this point.
In any case, it will follow the user mouse, and will have a final <code>latlng</code> on next click (or touch).
If <code>options</code> is given, it will be passed to the CircleMarker class constructor.</td>
</tr>
<tr id='editable-startrectangle'>
<td><code><b>startRectangle</b>(<nobr>&lt;L.LatLng&gt; <i>latlng</i></nobr>, <nobr>&lt;hash&gt; <i>options</i></nobr>)</nobr></code></td>
Expand Down Expand Up @@ -1386,6 +1405,45 @@ <h3 id='layerevent-property' class="section">LayerEvent</h3>
</tbody></table>
</section>

<h2 id='circlemarkereditor'>CircleMarkerEditor</h2>
<p>Editor for CircleMarker.</p>

<h3 id='' class="section">Methods</h3>



<div class='accordion'>
<!-- <label>Show inherited <a href='#baseeditor-method'>Methods from BaseEditor</a>.</label> -->
<label><span class='expander'>▶</span> Methods inherited from <a href='#baseeditor'>BaseEditor</a></label>
<div class='accordion-content'><section data-type='[object Object]'>


<table><thead>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead><tbody>
<tr id='circlemarkereditor-enable'>
<td><code><b>enable</b>()</nobr></code></td>
<td><code>this</code></td>
<td>Set up the drawing tools for the feature to be editable.</td>
</tr>
<tr id='circlemarkereditor-disable'>
<td><code><b>disable</b>()</nobr></code></td>
<td><code>this</code></td>
<td>Remove the drawing tools for the feature.</td>
</tr>
<tr id='circlemarkereditor-drawing'>
<td><code><b>drawing</b>()</nobr></code></td>
<td><code>boolean</code></td>
<td>Return true if any drawing action is ongoing with this editor.</td>
</tr>
</tbody></table>
</section></div>
</div>


</div>

Expand Down
12 changes: 12 additions & 0 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,23 @@

});

L.NewCircleMarkerControl = L.EditControl.extend({

options: {
position: 'topleft',
callback: map.editTools.startCircleMarker,
kind: 'circle marker',
html: '◉︎'
}

});

map.addControl(new L.NewMarkerControl());
map.addControl(new L.NewLineControl());
map.addControl(new L.NewPolygonControl());
map.addControl(new L.NewRectangleControl());
map.addControl(new L.NewCircleControl());
map.addControl(new L.NewCircleMarkerControl());

var line = L.polyline([
[43.1292, 1.256],
Expand Down
64 changes: 64 additions & 0 deletions src/Leaflet.Editable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@
// Class to be used when creating a new Marker.
markerClass: L.Marker,

// 🍂option circleMarkerClass: class = L.CircleMarker
// Class to be used when creating a new CircleMarker.
circleMarkerClass: L.CircleMarker,

// 🍂option rectangleClass: class = L.Rectangle
// Class to be used when creating a new Rectangle.
rectangleClass: L.Rectangle,
Expand Down Expand Up @@ -109,6 +113,10 @@
// Class to be used as Marker editor.
markerEditorClass: undefined,

// 🍂option circleMarkerEditorClass: class = CircleMarkerEditor
// Class to be used as CircleMarker editor.
circleMarkerEditorClass: undefined,

// 🍂option rectangleEditorClass: class = RectangleEditor
// Class to be used as Rectangle editor.
rectangleEditorClass: undefined,
Expand Down Expand Up @@ -327,6 +335,17 @@
return marker;
},

// 🍂method startCircleMarker(latlng: L.LatLng, options: hash): L.CircleMarker
// Start adding a CircleMarker. If `latlng` is given, the CircleMarker will be shown first at this point.
// In any case, it will follow the user mouse, and will have a final `latlng` on next click (or touch).
// If `options` is given, it will be passed to the CircleMarker class constructor.
startCircleMarker: function (latlng, options) {
latlng = latlng || this.map.getCenter().clone();
var marker = this.createCircleMarker(latlng, options);
marker.enableEdit(this.map).startDrawing();
return marker;
},

// 🍂method startRectangle(latlng: L.LatLng, options: hash): L.Rectangle
// Start drawing a Rectangle. If `latlng` is given, the Rectangle anchor will be added. In any case, continuing on user drag.
// If `options` is given, it will be passed to the Rectangle class constructor.
Expand Down Expand Up @@ -374,6 +393,10 @@
return this.createLayer(options && options.markerClass || this.options.markerClass, latlng, options);
},

createCircleMarker: function (latlng, options) {
return this.createLayer(options && options.circleMarkerClass || this.options.circleMarkerClass, latlng, options);
},

createRectangle: function (bounds, options) {
return this.createLayer(options && options.rectangleClass || this.options.rectangleClass, bounds, options);
},
Expand Down Expand Up @@ -1015,6 +1038,34 @@

});

// 🍂namespace Editable; 🍂class CircleMarkerEditor; 🍂aka L.Editable.CircleMarkerEditor
// 🍂inherits BaseEditor
// Editor for CircleMarker.
L.Editable.CircleMarkerEditor = L.Editable.BaseEditor.extend({

onDrawingMouseMove: function (e) {
L.Editable.BaseEditor.prototype.onDrawingMouseMove.call(this, e);
if (this._drawing) this.feature.setLatLng(e.latlng);
},

processDrawingClick: function (e) {
// 🍂namespace Editable
// 🍂section Drawing events
// 🍂event editable:drawing:clicked: Event
// Fired when user `click` while drawing, after all internal actions.
this.fireAndForward('editable:drawing:clicked', e);
this.commitDrawing(e);
},

connect: function (e) {
// On touch, the latlng has not been updated because there is
// no mousemove.
if (e) this.feature._latlng = e.latlng;
L.Editable.BaseEditor.prototype.connect.call(this, e);
}

});

// 🍂namespace Editable; 🍂class PathEditor; 🍂aka L.Editable.PathEditor
// 🍂inherits BaseEditor
// Base class for all path editors.
Expand Down Expand Up @@ -1890,6 +1941,14 @@

};

var CircleMarkerMixin = {

getEditorClass: function (tools) {
return (tools && tools.options.circleMarkerEditorClass) ? tools.options.circleMarkerEditorClass : L.Editable.CircleMarkerEditor;
}

};

var RectangleMixin = {

getEditorClass: function (tools) {
Expand Down Expand Up @@ -1928,6 +1987,11 @@
L.Marker.include(MarkerMixin);
L.Marker.addInitHook(keepEditable);
}
if (L.CircleMarker) {
L.CircleMarker.include(EditableMixin);
L.CircleMarker.include(CircleMarkerMixin);
L.CircleMarker.addInitHook(keepEditable);
}
if (L.Rectangle) {
L.Rectangle.include(EditableMixin);
L.Rectangle.include(RectangleMixin);
Expand Down
Loading

0 comments on commit dadebc3

Please sign in to comment.