Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

leaflet-editable

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

leaflet-editable - npm Package Compare versions

Comparing version 1.0.0-rc.1 to 1.0.0-rc.2

doc/api.html

9

CHANGELOG.md
# CHANGELOG
# dev
- BREAKING editorClass are now properly looked in editTools.options instead of map (cf #92)
- removed Leaflet as peerDependency (cf #72)
- fixed error in canvas due to guides being added to early (cf #80)
- added path dragging (when [Path.Drag.js](https://github.com/Leaflet/Path.Drag.js) is loaded
- allow to draw a rectangle in any direction (cf #87)
- fixed editable:drawing:commit being fired on mousedown instead of mouseup for circle and rectangle (cf #70)
# 1.0.0-rc.1

@@ -4,0 +13,0 @@ - hide middle markers if there is not enough space

19

package.json
{
"name": "leaflet-editable",
"version": "1.0.0-rc.1",
"version": "1.0.0-rc.2",
"description": "Make geometries editable in Leaflet",

@@ -16,6 +16,10 @@ "main": "src/Leaflet.Editable.js",

"devDependencies": {
"chai": "^1.9.1",
"happen": "^0.1.3",
"mocha": "^1.21.3",
"mocha-phantomjs": "3.5.*"
"chai": "^3.5.0",
"happen": "^0.3.1",
"leafdoc": "^1.4.0",
"leaflet": "^1.0.0-rc.3",
"leaflet.path.drag": "0.0.2",
"mocha": "^2.5.3",
"mocha-phantomjs-core": "^1.3.1",
"phantomjs-prebuilt": "^2.1.7"
},

@@ -29,6 +33,3 @@ "repository": {

},
"homepage": "https://github.com/Leaflet/Leaflet.Editable/",
"peerDependencies": {
"leaflet": "rc"
}
"homepage": "https://github.com/Leaflet/Leaflet.Editable/"
}

@@ -1,2 +0,2 @@

[![Build Status](https://travis-ci.org/Leaflet/Leaflet.Editable.svg)](https://travis-ci.org/Leaflet/Leaflet.Editable)
[![Build Status](https://travis-ci.org/Leaflet/Leaflet.Editable.svg?branch=master)](https://travis-ci.org/Leaflet/Leaflet.Editable)
# Leaflet.Editable

@@ -6,3 +6,3 @@

**WARNING: the `gh-pages` branch needs latest Leaflet master (future 1.0). To use the stable
**WARNING: the `master` branch needs latest Leaflet master (future 1.0). To use the stable
Leaflet release, please use the `leaflet0.7` branch.**

@@ -33,3 +33,7 @@

### Path dragging
If you want path dragging, you need to also include [Path.Drag.js](https://github.com/Leaflet/Path.Drag.js).
## Quick start

@@ -72,227 +76,7 @@

Leaflet.Editable is made to be fully extendable. You have three ways to customize
the behaviour: using options, listening to events, or extending.
[See the reference](http://Leaflet.github.io/Leaflet.Editable/doc/api.html)
### L.Map
Leaflet.Editable add options and events to the `L.Map` object.
#### Options
| option name | default | usage |
|---------------------|------------|---------------------------------------------------------------|
| editable | false | Whether to create a L.Editable instance at map init or not. |
| editOptions | {} | Options to pass to L.Editable when instanciating. |
| editToolsClass | L.Editable | Editable class to instanciate. |
#### Events
| event name | properties | cancellable* | usage |
|------------|------------|-------------|-------|
| editable:created | layer | false | Fired when a new feature (Marker, Polyline…) has been created. |
| editable:enable | layer | false | Fired when an existing feature is ready to be edited |
| editable:disable | layer | false | Fired when an existing feature is not ready anymore to be edited |
| editable:editing | layer | false | Fired as soon as any change is made to the feature geometry |
| editable:drawing:start | layer | false | Fired when a feature is to be drawn |
| editable:drawing:end | layer | false | Fired when a feature is not drawn anymore |
| editable:drawing:cancel | layer | false | Fired when user cancel drawing while a feature is being drawn |
| editable:drawing:commit | layer | false | Fired when user finish drawing a feature |
| editable:drawing:mousedown | layer | false | Fired when user mousedown while drawing |
| editable:drawing:mouseup | layer | false | Fired when user mouseup while drawing |
| editable:drawing:click | layer | true | Fired when user click while drawing, before any internal action is being processed |
| editable:drawing:clicked | layer | false | Fired when user click while drawing, after all internal actions |
| editable:drawing:move | layer | false | Fired when move mouse while drawing, while dragging a marker, and while dragging a vertex |
| editable:vertex:click | originalEvent, latlng, vertex, layer | true | Fired when a click is issued on a vertex, before any internal action is being processed |
| editable:vertex:clicked | originalEvent, latlng, vertex, layer | false | Fired when a click is issued on a vertex, after all internal actions |
| editable:vertex:ctrlclick | originalEvent, latlng, vertex, layer | false | Fired when a click having ctrlKey is issued on a vertex |
| editable:vertex:shiftclick | originalEvent, latlng, vertex, layer | false | Fired when a click having shiftKey is issued on a vertex |
| editable:vertex:altclick | originalEvent, latlng, vertex, layer | false | Fired when a click having altKey is issued on a vertex |
| editable:vertex:metakeyclick | originalEvent, latlng, vertex, layer | false | Fired when a click with metaKey pressed is issued on a vertex |
| editable:vertex:rawclick | originalEvent, latlng, vertex, layer | true | Fired when a click is issued on a vertex without any special key and without being in drawing mode |
| editable:vertex:contextmenu | originalEvent, latlng, vertex, layer | false | Fired when a contextmenu is issued on a vertex |
| editable:vertex:deleted | originalEvent, latlng, vertex, layer | false | Fired after a vertex has been deleted by user |
| editable:vertex:mousedown | originalEvent, latlng, vertex, layer | false | Fired when user mousedown a vertex |
| editable:vertex:drag | originalEvent, latlng, vertex, layer | false | Fired when a vertex is dragged by user |
| editable:vertex:dragstart | originalEvent, latlng, vertex, layer | false | Fired before a vertex is dragged by user |
| editable:vertex:dragend | originalEvent, latlng, vertex, layer | false | Fired after a vertex is dragged by user |
| editable:middlemarker:mousedown | originalEvent, latlng, vertex, layer | true | Fired when user mousedown a middle marker |
| editable:shape:new | originalEvent, latlng, shape, layer | false | Fired when a new shape is created in a multi (polygon or polyline) |
| editable:shape:delete | originalEvent, latlng, shape, layer | true | Fired before a new shape is deleted in a multi (polygon or polyline) |
| editable:shape:deleted | originalEvent, latlng, shape, layer | false | Fired after a new shape is deleted in a multi (polygon or polyline) |
Note on *cancellable* events: those event have attached a `cancel` method,
calling this method (eg. `e.cancel()`) will cancel any subsequent action.
### L.Editable
You will usually have only one instance of L.Editable, and generally the one
created automatically at map init: `map.editTools`. It's the toolbox you will
use to create new features, and also the object you will configure with options.
Let's see them.
#### Options
*Note: you can pass them when creating a map using the `editOptions` key.*
| option name | default | usage |
|---------------------|-----------|------------------------------------------|
| polylineClass | L.Polyline | Class to be used when creating a new Polyline |
| polygonClass | L.Polygon | Class to be used when creating a new Polygon |
| markerClass | L.Marker | Class to be used when creating a new Marker |
| drawingCSSClass | leaflet-editable-drawing | CSS class to be added to the map container while drawing |
| drawingCursor | crosshair | cursor mode set to the map while drawing |
| editLayer | new L.LayerGroup() | Layer used to store edit tools (vertex, line guide…) |
| featuresLayer | new L.LayerGroup() | Default layer used to store drawn features (marker, polyline…) |
| vertexMarkerClass | L.Editable.VertexMarker | Class to be used as vertex, for path editing |
| middleMarkerClass | L.Editable.MiddleMarker | Class to be used as middle vertex, pulled by the user to create a new point in the middle of a path |
| polylineEditorClass | L.Editable.PolylineEditor | Class to be used as Polyline editor |
| polygonEditorClass | L.Editable.PolygonEditor | Class to be used as Polygon editor |
| markerEditorClass | L.Editable.MarkerEditor | Class to be used as Marker editor |
| lineGuideOptions | {} | Options to be passed to the line guides |
| skipMiddleMarkers | null | Set this to true if you don't want middle markers |
#### Methods
Those are the public methods. You will generally access them by the `map.editTools`
instance:
map.editTools.startPolyline();
| method name | params | return | usage |
|----------------|---------|--------|---------------------------------|
| startPolyline | latlng\*, options | created L.Polyline instance | Start drawing a polyline. If latlng is given, a first point will be added. In any case, continuing on user click. If options is given, it will be passed to the polyline class constructor. |
| startPolygon | latlng\*, options | created L.Polygon instance | Start drawing a polygon. If latlng is given, a first point will be added. In any case, continuing on user click. If options is given, it will be passed to the polygon class constructor. |
| startMarker | latlng\*, options | created L.Marker instance | Start adding a marker. If latlng 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 latlng on next click (or touch). If options is given, it will be passed to the marker class constructor.|
| stopDrawing | — | — | When you need to stop any ongoing drawing, without needing to know which editor is active. |
| commitDrawing | — | — | When you need to commit any ongoing drawing, without needing to know which editor is active. |
| drawing | — | boolean | Return true if an editor is active and in drawing mode. |
#### Events
Same as L.Map.
### L.Editable.VertexMarker
The marker used to handle path vertex. You will usually interact with a `VertexMarker`
instance when listening for events like `editable:vertex:ctrlclick`.
Those are its public methods.
| method name | params | return | usage |
|----------------|---------|--------|---------------------------------|
| delete | — | — | Delete a vertex and the related latlng. |
| getIndex | — | int | Get the index of the current vertex among others of the same LatLngs group. |
| getLastIndex | — | int | Get last vertex index of the LatLngs group of the current vertex. |
| getPrevious | — | VertexMarker instance | Get the previous VertexMarker in the same LatLngs group. |
| getNext | — | VertexMarker instance | Get the next VertexMarker in the same LatLngs group. |
| split | — | — | Split the vertex LatLngs group at its index, if possible. |
| continue | — | — | Continue the vertex LatLngs from this vertex. Only active for first and last vertices of a Polyline. |
### L.Editable.BaseEditor
When editing a feature (marker, polyline…), an editor is attached to it. This
editor basically knows how to handle the edition.
It has some public methods:
| method name | params | return | usage |
|----------------|---------|--------|---------------------------------|
| enable | — | this | Set up the drawing tools for the feature to be editable. |
| disable | — | this | Remove editing tools. |
### L.Editable.MarkerEditor
Inherit from `L.Editable.BaseEditor`.
### L.Editable.PathEditor
Inherit from `L.Editable.BaseEditor`.
Inherited by `L.Editable.PolylineEditor` and `L.Editable.PolygonEditor`.
Interesting new method:
| method name | params | return | usage |
|----------------|---------|--------|---------------------------------|
| reset | — | — | Rebuild edit elements (vertex, middlemarker, etc.) |
| newShape | latlng | — | Add a new shape (polyline, polygon) in a multi, and setup up drawing tools to draw it; if optional `latlng` is given, start a path at this point |
| push | latlng | — | Programmatically add a point while drawing |
| pop | — | latlng | Programatically remove last point (if any) while drawing |
| shapeAt | latlng | shape or undefined | Return the shape at the given latlng if any |
| deleteShapeAt | latlng | shape | Remove a path shape at the given latlng |
| appendShape | shape | — | Append a new shape to the polygon or polyline |
| prependShape | shape | — | Prepend a new shape to the polygon or polyline |
| insertShape | shape, index | — | Insert a new shape to the polygon or polyline at given index (default is to append) |
| drawing | — | bookean | Return true if editor is drawing |
### L.Editable.PolylineEditor
Inherit from `L.Editable.PathEditor`.
Useful specific methods:
| method name | params | return | usage |
|----------------|---------|--------|---------------------------------|
| continueForward | latlngs | — | Set up drawing tools to continue the line forward |
| continueBackward | latlngs | — | Set up drawing tools to continue the line backward |
| splitShape | latlngs, index | — | Split the given latlngs shape at index `index` and integrate new shape in instance latlngs |
### L.Editable.PolygonEditor
Inherit from `L.Editable.PathEditor`.
| method name | params | return | usage |
|----------------|---------|--------|---------------------------------|
| newHole | latlng\* | — | Set up drawing tools for creating a new hole on the polygon. If the latlng param is given, a first point is created. |
### L.Editable.RectangleEditor
Inherit from `L.Editable.PathEditor`.
### L.Editable.CircleEditor
Inherit from `L.Editable.PathEditor`.
### EditableMixin
`EditableMixin` is included to `L.Polyline`, `L.Polygon` and `L.Marker`. It
adds the following methods to them.
*When editing is enabled, the editor is accessible on the instance with the
`editor` property.*
#### Methods
| method name | params | return | usage |
|----------------|---------|--------|---------------------------------|
| enableEdit | — | related editor instance | Enable editing, by creating an editor if not existing, and then calling `enable` on it |
| disableEdit | — | — | Disable editing, also remove the editor property reference. |
| toggleEdit | — | — | Enable or disable editing, according to current status. |
| editEnabled | — | boolean | Return true if current instance has an editor attached, and this editor is enabled. |
#### Events
Some events are also fired on the feature itself.
| event name | properties | usage |
|---------------------|-----------|------------------------------------------|
| editable:drawing:start | layer | Fired when a feature is to be drawn |
| editable:drawing:end | layer | Fired when a feature is not drawn anymore |
| editable:drawing:cancel | layer | Fired when user cancel drawing while a feature is being drawn |
| editable:drawing:commit | layer | Fired when user finish drawing a feature |
| editable:drawing:click | layer | Fired when user click while drawing |
| editable:vertex:ctrlclick | originalEvent, latlng, vertex, layer | Fired when a click having ctrlKey is issued on a vertex |
| editable:vertex:shiftclick | originalEvent, latlng, vertex, layer | Fired when a click having shiftKey is issued on a vertex |
| editable:vertex:altclick | originalEvent, latlng, vertex, layer | Fired when a click having altKey is issued on a vertex |
| editable:vertex:contextmenu | originalEvent, latlng, vertex, layer | Fired when a contextmenu is issued on a vertex |
| editable:vertex:deleted | originalEvent, latlng, vertex, layer | Fired after a vertex has been deleted by user |
## Licence
`Leaflet.Editable` is released under the WTFPL licence.

@@ -17,6 +17,8 @@ var qs = function (selector) {return document.querySelector(selector);};

happen.at('mousedown', fromX, fromY);
var stepX = fromX < toX ? 1 : -1,
stepY = fromY < toY ? 1 : -1;
var moveX = function () {
if (fromX <= toX) {
happen.at('mousemove', fromX++, fromY);
window.setTimeout(moveX, 5);
if (fromX != toX) {
happen.at('mousemove', fromX += stepX, fromY);
window.setTimeout(moveX, 1);
}

@@ -26,5 +28,5 @@ };

var moveY = function () {
if (fromY <= toY) {
happen.at('mousemove', fromX, fromY++);
window.setTimeout(moveY, 5);
if (fromY != toY) {
happen.at('mousemove', fromX, fromY += stepY);
window.setTimeout(moveY, 1);
}

@@ -31,0 +33,0 @@ };

@@ -81,2 +81,61 @@ 'use strict';

describe('#enableDragging()', function () {
it('should drag a circle', function (done) {
var layer = L.circle(p2ll(200, 200), {radius: 50}).addTo(this.map),
before = layer._latlng.lat;
layer.enableEdit();
assert.equal(before, layer._latlng.lat);
happen.drag(210, 210, 220, 220, function () {
assert.notEqual(before, layer._latlng.lat);
layer.remove();
done();
});
});
it('should send editable:dragstart event', function (done) {
var layer = L.circle(p2ll(200, 200), {radius: 50}).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:dragstart', call);
layer.enableEdit();
assert.equal(called, 0);
happen.drag(210, 210, 220, 220, function () {
assert.equal(called, 1);
layer.remove();
done();
});
});
it('should send editable:dragend event', function (done) {
var layer = L.circle(p2ll(200, 200), {radius: 50}).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:dragend', call);
layer.enableEdit();
assert.equal(called, 0);
happen.drag(210, 210, 220, 220, function () {
assert.equal(called, 1);
layer.remove();
done();
});
});
it('should send editable:drag event', function (done) {
var layer = L.circle(p2ll(200, 200), {radius: 50}).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:drag', call);
layer.enableEdit();
assert.notOk(called);
happen.drag(210, 210, 220, 220, function () {
assert.ok(called);
layer.remove();
done();
});
});
});
describe('#events', function () {

@@ -125,2 +184,16 @@

it('should not fire editable:drawing:commit on mousedown', function () {
var called = 0,
call = function () {called++;};
this.map.on('editable:drawing:commit', call);
var layer = this.map.editTools.startCircle();
assert.equal(called, 0);
happen.at('mousedown', 200, 200);
assert.equal(called, 0);
happen.at('mouseup', 200, 200);
assert.equal(called, 1);
this.map.off('editable:drawing:commit', call);
layer.remove();
});
it('should fire editable:drawing:end on stopDrawing', function () {

@@ -127,0 +200,0 @@ var called = 0,

@@ -45,3 +45,2 @@ 'use strict';

var mustBe05 = function () {
map.off('zoomend', mustBe05);
window.setTimeout(function () {

@@ -53,10 +52,9 @@ assert.equal(line._latlngs[1].__vertex.middleMarker._icon.style.opacity, 0.5);

var mustBe0 = function () {
map.off('zoomend', mustBe0);
window.setTimeout(function () {
assert.equal(line._latlngs[1].__vertex.middleMarker._icon.style.opacity, 0);
map.on('zoomend', mustBe05);
map.once('zoomend', mustBe05);
map.zoomIn(3);
}, 10);
};
map.on('zoomend', mustBe0);
map.once('zoomend', mustBe0);
map.zoomOut(3);

@@ -102,2 +100,3 @@ });

this.map.removeLayer(line);
this.map.setView(startPoint, 16); // Move back to avoid rounding issues when projecting.
});

@@ -104,0 +103,0 @@

@@ -353,2 +353,83 @@ 'use strict';

describe('#enableDragging()', function () {
it('should drag a polygon', function (done) {
var latlngs = [[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]],
layer = L.polygon(latlngs).addTo(this.map),
before = layer._latlngs[0][2].lat;
layer.enableEdit();
assert.equal(before, layer._latlngs[0][2].lat);
happen.drag(150, 150, 170, 170, function () {
assert.notEqual(before, layer._latlngs[0][2].lat);
layer.remove();
done();
});
});
it('should drag a multipolygon with hole', function (done) {
var latlngs = [
[
[p2ll(100, 150), p2ll(150, 300), p2ll(300, 100)],
[p2ll(220, 160), p2ll(150, 170), p2ll(180, 220)]
],
[[p2ll(300, 350), p2ll(350, 400), p2ll(400, 300)]]
],
layer = L.polygon(latlngs).addTo(this.map),
before = layer._latlngs[1][0][2].lat;
layer.enableEdit();
assert.equal(before, layer._latlngs[1][0][2].lat);
happen.drag(150, 150, 170, 170, function () {
assert.notEqual(before, layer._latlngs[1][0][2].lat);
layer.remove();
done();
});
});
it('should send editable:dragstart event', function (done) {
var latlngs = [[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]],
layer = L.polygon(latlngs).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:dragstart', call);
layer.enableEdit();
assert.equal(called, 0);
happen.drag(150, 150, 170, 170, function () {
assert.equal(called, 1);
layer.remove();
done();
});
});
it('should send editable:dragend event', function (done) {
var latlngs = [[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]],
layer = L.polygon(latlngs).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:dragend', call);
layer.enableEdit();
assert.equal(called, 0);
happen.drag(150, 150, 170, 170, function () {
assert.equal(called, 1);
layer.remove();
done();
});
});
it('should send editable:drag event', function (done) {
var latlngs = [[p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)]],
layer = L.polygon(latlngs).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:drag', call);
layer.enableEdit();
assert.notOk(called);
happen.drag(150, 150, 170, 170, function () {
assert.ok(called);
layer.remove();
done();
});
});
});
describe('Events', function () {

@@ -355,0 +436,0 @@

@@ -239,3 +239,3 @@ 'use strict';

layer.enableEdit();
layer.editor.continueBackward();
layer.editor.continueForward();
assert.ok(layer.editor.drawing());

@@ -255,2 +255,42 @@ layer.remove();

describe('#continue forward', function () {
it('should attach forward line guide if points were drawn', function () {
var layer = L.polyline([p2ll(100, 150), p2ll(150, 200)]).addTo(this.map);
layer.enableEdit();
layer.editor.continueForward();
assert.equal(this.map.editTools.editLayer.hasLayer(this.map.editTools.forwardLineGuide), true, 'forward line guide is attached');
layer.remove();
});
it('should not attach forward line guide if no points were drawn', function () {
var layer = L.polyline([]).addTo(this.map);
layer.enableEdit();
layer.editor.continueForward();
assert.equal(this.map.editTools.editLayer.hasLayer(this.map.editTools.forwardLineGuide), false, 'forward line guide is not attached');
layer.remove();
});
});
describe('#continue backward', function () {
it('should attach backward line guide if points were drawn', function () {
var layer = L.polyline([p2ll(100, 150), p2ll(150, 200)]).addTo(this.map);
layer.enableEdit();
layer.editor.continueBackward();
assert.equal(this.map.editTools.editLayer.hasLayer(this.map.editTools.backwardLineGuide), true, 'backward line guide is attached');
layer.remove();
});
it('should not attach backward line guide if no points were drawn', function () {
var layer = L.polyline([]).addTo(this.map);
layer.enableEdit();
layer.editor.continueBackward();
assert.equal(this.map.editTools.editLayer.hasLayer(this.map.editTools.backwardLineGuide), false, 'backward line guide is not attached');
layer.remove();
});
});
describe('#pop', function () {

@@ -371,2 +411,80 @@

describe('#enableDragging()', function () {
it('should drag a polyline', function (done) {
var latlngs = [p2ll(100, 100), p2ll(100, 200)],
layer = L.polyline(latlngs).addTo(this.map),
before = layer._latlngs[1].lat;
layer.enableEdit();
assert.equal(before, layer._latlngs[1].lat);
happen.drag(100, 130, 120, 150, function () {
assert.notEqual(before, layer._latlngs[1].lat);
layer.remove();
done();
});
});
it('should drag a multipolyline', function (done) {
var latlngs = [
[p2ll(100, 100), p2ll(100, 200)],
[p2ll(300, 350), p2ll(350, 400), p2ll(400, 300)]
],
layer = L.polyline(latlngs).addTo(this.map),
before = layer._latlngs[1][2].lat;
layer.enableEdit();
assert.equal(before, layer._latlngs[1][2].lat);
happen.drag(100, 130, 120, 150, function () {
assert.notEqual(before, layer._latlngs[1][2].lat);
layer.remove();
done();
});
});
it('should send editable:dragstart event', function (done) {
var latlngs = [p2ll(100, 100), p2ll(100, 200)],
layer = L.polyline(latlngs).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:dragstart', call);
layer.enableEdit();
assert.equal(called, 0);
happen.drag(100, 130, 120, 150, function () {
assert.equal(called, 1);
layer.remove();
done();
});
});
it('should send editable:dragend event', function (done) {
var latlngs = [p2ll(100, 100), p2ll(100, 200)],
layer = L.polyline(latlngs).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:dragend', call);
layer.enableEdit();
assert.equal(called, 0);
happen.drag(100, 130, 120, 150, function () {
assert.equal(called, 1);
layer.remove();
done();
});
});
it('should send editable:drag event', function (done) {
var latlngs = [p2ll(100, 100), p2ll(100, 200)],
layer = L.polyline(latlngs).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:drag', call);
layer.enableEdit();
assert.notOk(called);
happen.drag(100, 130, 120, 150, function () {
assert.ok(called);
layer.remove();
done();
});
});
});
describe('#events', function () {

@@ -373,0 +491,0 @@

@@ -8,3 +8,3 @@ 'use strict';

p2ll = function (x, y) {
return map.layerPointToLatLng([x, y]);
return map.containerPointToLatLng([x, y]);
};

@@ -21,2 +21,3 @@ });

layer.editor.disable();
layer.remove();
});

@@ -34,10 +35,6 @@

var layer = this.map.editTools.startRectangle();
happen.drag(200, 200, 220, 220, function () {
// L.marker(p2ll(420, 420)).addTo(map);
// callPhantom({'screenshot': 'failure'});
happen.drag(200, 200, 240, 240, function () {
expect(layer._latlngs[0][3].lat).not.to.be.eql(layer._latlngs[0][1].lat);
if (!window.callPhantom) {
expect(layer._latlngs[0][1]).to.be.nearLatLng(p2ll(200, 200));
expect(layer._latlngs[0][3]).to.be.nearLatLng(p2ll(220, 220));
}
expect(layer._latlngs[0][1]).to.be.nearLatLng(p2ll(200, 200));
expect(layer._latlngs[0][3]).to.be.nearLatLng(p2ll(240, 240));
layer.remove();

@@ -48,2 +45,15 @@ done();

it('should draw rectangle on click-drag reverse', function (done) {
var layer = this.map.editTools.startRectangle();
happen.drag(220, 220, 200, 200, function () {
expect(layer._latlngs[0][3].lat).not.to.be.eql(layer._latlngs[0][1].lat);
expect(layer._latlngs[0][1]).to.be.nearLatLng(p2ll(220, 220));
expect(layer._latlngs[0][3]).to.be.nearLatLng(p2ll(200, 200));
// if (!window.callPhantom) {
// }
layer.remove();
done();
});
});
});

@@ -75,2 +85,17 @@

it('should allow reverting rectangle', function (done) {
var layer = L.rectangle([p2ll(200, 200), p2ll(220, 220)]).addTo(this.map);
var before = layer._latlngs[0][3].lat;
layer.enableEdit();
happen.drag(220, 220, 180, 180, function () {
expect(layer._latlngs[0][3].lat).not.to.eql(before);
if (!window.callPhantom) {
expect(layer._latlngs[0][1]).to.be.nearLatLng(p2ll(200, 200)); // Untouched
expect(layer._latlngs[0][3]).to.be.nearLatLng(p2ll(180, 180));
}
layer.remove();
done();
});
});
});

@@ -92,2 +117,64 @@

describe('#enableDragging()', function () {
it('should drag a rectangle', function (done) {
var latlngs = [p2ll(100, 100), p2ll(200, 200)],
layer = L.rectangle(latlngs).addTo(this.map),
before = layer._latlngs[0][1].lat;
layer.enableEdit();
assert.equal(before, layer._latlngs[0][1].lat);
happen.drag(100, 130, 120, 150, function () {
assert.notEqual(before, layer._latlngs[0][1].lat);
layer.remove();
done();
});
});
it('should send editable:dragstart event', function (done) {
var latlngs = [p2ll(100, 100), p2ll(200, 200)],
layer = L.rectangle(latlngs).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:dragstart', call);
layer.enableEdit();
assert.equal(called, 0);
happen.drag(100, 130, 120, 150, function () {
assert.equal(called, 1);
layer.remove();
done();
});
});
it('should send editable:dragend event', function (done) {
var latlngs = [p2ll(100, 100), p2ll(200, 200)],
layer = L.rectangle(latlngs).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:dragend', call);
layer.enableEdit();
assert.equal(called, 0);
happen.drag(100, 130, 120, 150, function () {
assert.equal(called, 1);
layer.remove();
done();
});
});
it('should send editable:drag event', function (done) {
var latlngs = [p2ll(100, 100), p2ll(200, 200)],
layer = L.rectangle(latlngs).addTo(this.map),
called = 0,
call = function () {called++;};
layer.on('editable:drag', call);
layer.enableEdit();
assert.notOk(called);
happen.drag(100, 130, 120, 150, function () {
assert.ok(called);
layer.remove();
done();
});
});
});
describe('#events', function () {

@@ -136,2 +223,16 @@

it('should not fire editable:drawing:commit on mousedown', function () {
var called = 0,
call = function () {called++;};
this.map.on('editable:drawing:commit', call);
var layer = this.map.editTools.startRectangle();
assert.equal(called, 0);
happen.at('mousedown', 200, 200);
assert.equal(called, 0);
happen.at('mouseup', 200, 200);
assert.equal(called, 1);
this.map.off('editable:drawing:commit', call);
layer.remove();
});
it('should fire editable:drawing:end on stopDrawing', function () {

@@ -138,0 +239,0 @@ var called = 0,

@@ -118,4 +118,16 @@ 'use strict';

it('should allow committing on clicked vertex', function () {
var latlngs = [p2ll(100, 150), p2ll(150, 200), p2ll(200, 100)],
layer = L.polyline(latlngs).addTo(this.map);
layer.enableEdit();
layer._latlngs[0].__vertex.continue();
happen.at('click', 100, 150);
assert.equal(layer._latlngs.length, 3);
assert.equal(layer.editor.drawing(), false);
layer.disableEdit();
layer.remove();
});
});
});

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc