Skip to content

Commit

Permalink
Get Leaflet.Illustrate.PointerHandle#onHandleUpdate working.
Browse files Browse the repository at this point in the history
  • Loading branch information
@justinmanley
justinmanley committed Jul 27, 2014
1 parent e08232d commit 9693851
Show file tree
Hide file tree
Showing 12 changed files with 345 additions and 75 deletions.
1 change: 1 addition & 0 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ module.exports = function(grunt) {
'src/Leaflet.Illustrate.less',
'test/*.js',
'test/*/*Spec.js',
'test/*/*/*Spec.js',
'Gruntfile.js'
],
tasks: [ 'build' ]
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,4 @@ Created for [MapKnitter](mapknitter.org), a free and open-source tool for stitch

Learn more about MapKnitter at [http://publiclab.org/wiki/mapknitter](http://publiclab.org/wiki/mapknitter).

MapKnitter is open-source software created and run by the [Public Lab for Open Technology and Science](publiclab.org), and this project is part of [Google Summer of Code 2014](https://www.google-melange.com/gsoc/homepage/google/gsoc2014).
MapKnitter is open-source software created and run by the [Public Lab for Open Technology and Science](publiclab.org), and this project is sponsored by Google as part of [Google Summer of Code 2014](https://www.google-melange.com/gsoc/homepage/google/gsoc2014).
152 changes: 116 additions & 36 deletions dist/Leaflet.Illustrate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ L.RotatableMarker = L.Marker.extend({
}
});
L.Illustrate.Pointer = L.Path.extend({

options: {
noClip: false
},
Expand Down Expand Up @@ -882,56 +883,135 @@ L.Illustrate.MoveHandle = L.Illustrate.EditHandle.extend({
var handle = event.target;

this._handled.setCenter(handle.getLatLng());

this._handled.fire('illustrate:handledrag');
}
});
L.Illustrate.PointerHandle = L.Illustrate.EditHandle.extend({
initialize: function(shape, options) {
L.Illustrate.EditHandle.prototype.initialize.call(this, shape, options);
this._index = options.index;
this._id = options.id;
this._type = options.type;
},

_onHandleDrag: function(event) {
var handle = event.target,
coordinates = this._handled.getPoints();

this._handleOffset = this._latLngToTextboxCoords(handle.getLatLng());
_onHandleDrag: function() {
this._handleOffset = this._latLngToTextboxCoords(this.getLatLng());

switch(this._type) {
case 'vertex':
coordinates.splice(this._index, 1, this._handleOffset);
this._handled._updateVertex(this._id, this._handleOffset);
break;
case 'midpoint':
coordinates.splice(this._index, 0, this._handleOffset);
this._type = 'vertex';
this._handled._addVertex(this._id, this._handleOffset);
break;
}

this._handled.setPoints(coordinates);
},

_onHandleClick: function() {
// var handle = event.target,
// coordinates = this._handled.getPoints();
// _onHandleClick: function(event) {
// var handle = event.target;

// switch(this._type) {
// case 'vertex':
// break;
// case 'midpoint':
// break;
// }
},
// this._handleOffset = this._latLngToTextboxCoords(handle.getLatLng());

// switch(this._type) {
// case 'vertex':
// this._handled._removeVertex(this._id);
// break;
// case 'midpoint':
// this._type = 'vertex';
// this.setOpacity(1);
// this._handled._addVertex(this._id, this._handleOffset);
// break;
// }
// },

_bindListeners: function() {
L.Illustrate.EditHandle.prototype._bindListeners.call(this);
this.on('click', this._onHandleClick, this);
this._handled.on({
'edit:remove-vertex': this._onVertexRemove,
'edit:add-vertex': this._onVertexAdd,
'edit:update-vertex': this._onVertexUpdate
}, this);
},

_unbindListeners: function() {
L.Illustrate.EditHandle.prototype._unbindListeners.call(this);
this.off('click', this._onHandleClick, this);
this._handled.off({
'edit:remove-vertex': this._onVertexRemove,
'edit:add-vertex': this._onVertexAdd,
'edit:update-vertex': this._onVertexUpdate
}, this);
},

_onVertexAdd: function() {

},

_onVertexRemove: function() {

},

_onVertexUpdate: function(event) {
var id = event.id,
i = this._handleIdToCoordIndex(id, 'vertex'),
pointer = this._handled,
origin = pointer._map.latLngToLayerPoint(pointer.getLatLng()),
midpoint, latlng;

/* Update the positions of the two adjacent 'midpoint' handles. */
if ((this._id === id - 1) && i > 0) {
midpoint = pointer._calculateMidpoint(i - 1, i).add(origin);
latlng = pointer._map.layerPointToLatLng(midpoint);
this.setLatLng(latlng);
} else if ((this._id === id + 1) && i + 1 < pointer.getPoints().length) {
midpoint = pointer._calculateMidpoint(i, i + 1).add(origin);
latlng = pointer._map.layerPointToLatLng(midpoint);
this.setLatLng(latlng);
}
},

_handleIdToCoordIndex: function(id, type) {
var index;

switch(type) {
case 'vertex':
index = id/2;
break;
case 'midpoint':
index = (id - 1)/2;
break;
}
return index;
}
});

L.Illustrate.Pointer.include({
_calculateMidpoint: function(i, j) {
var coordinates = this.getPoints(),
v1 = coordinates[i],
v2 = coordinates[j],
delta = v2.subtract(v1).divideBy(2);

return v1.add(delta);
},

_removeVertex: function(id) {
this._coordinates.splice(id, 1);
this.setPoints(this._coordinates);
this.fire('edit:remove-vertex', { id: id });
},

_addVertex: function(id, coord) {
this._coordinates.splice(id, 0, L.point(coord));
this.setPoints(this._coordinates);
this.fire('edit:add-vertex', { id: id, coord: coord });
},

_updateVertex: function(id, coord) {
var i = id/2;

this._coordinates.splice(i, 1, L.point(coord));
this.setPoints(this._coordinates);
this.fire('edit:update-vertex', { id: id, coord: coord });
}
});
L.Illustrate.ResizeHandle = L.Illustrate.EditHandle.extend({
Expand All @@ -949,8 +1029,6 @@ L.Illustrate.ResizeHandle = L.Illustrate.EditHandle.extend({
offset = this._latLngToOffset(handle.getLatLng());

this._handled.setSize(offset.abs().multiplyBy(2));

this._handled.fire('illustrate:handledrag');
},

updateHandle: function() {
Expand Down Expand Up @@ -1012,8 +1090,6 @@ L.Illustrate.RotateHandle = L.Illustrate.EditHandle.extend({

/* rotate the textbox */
this._handled.setRotation(theta);

this._handled.fire('illustrate:handledrag');
},

updateHandle: function() {
Expand Down Expand Up @@ -1088,14 +1164,14 @@ L.Illustrate.Edit.Pointer = L.Edit.Poly.extend({
this._handleGroup = new L.FeatureGroup();
this._map.addLayer(this._handleGroup);

this._handles = { vertex: [], midpoint: [] };
this._handles = [];

for (i = 0; i < length; i++) {
this._createVertexHandle(i);
}

for (i = 0; i < length - 1; i++) {
this._createMidpointHandle(i);
if ( i < length - 1) {
this._createMidpointHandle(i);
}
}
}
},
Expand All @@ -1104,26 +1180,30 @@ L.Illustrate.Edit.Pointer = L.Edit.Poly.extend({
var coordinates = this._shape.getPoints(),
vertexHandle = new L.Illustrate.PointerHandle(this._shape, {
offset: coordinates[index],
index: index,
id: 2*index,
type: 'vertex'
});

this._handleGroup.addLayer(vertexHandle);
this._handles.vertex[index] = vertexHandle;
this._handles.push(vertexHandle);

return vertexHandle;
},

_createMidpointHandle: function(index) {
var coordinates = this._shape.getPoints(),
delta = coordinates[index+1].subtract(coordinates[index]).divideBy(2),
delta = coordinates[index + 1].subtract(coordinates[index]).divideBy(2),
midpointHandle = new L.Illustrate.PointerHandle(this._shape, {
offset: coordinates[index].add(delta),
index: index,
id: 2*index + 1,
type: 'midpoint'
});

midpointHandle.setOpacity(0.6);
this._handleGroup.addLayer(midpointHandle);
this._handles.midpoint[index] = midpointHandle;
this._handles.push(midpointHandle);

return midpointHandle;
}
});

Expand Down
1 change: 1 addition & 0 deletions src/core/L.Illustrate.Pointer.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
L.Illustrate.Pointer = L.Path.extend({

options: {
noClip: false
},
Expand Down
22 changes: 13 additions & 9 deletions src/edit/L.Illustrate.Edit.Pointer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ L.Illustrate.Edit.Pointer = L.Edit.Poly.extend({
this._handleGroup = new L.FeatureGroup();
this._map.addLayer(this._handleGroup);

this._handles = { vertex: [], midpoint: [] };
this._handles = [];

for (i = 0; i < length; i++) {
this._createVertexHandle(i);
}

for (i = 0; i < length - 1; i++) {
this._createMidpointHandle(i);
if ( i < length - 1) {
this._createMidpointHandle(i);
}
}
}
},
Expand All @@ -49,26 +49,30 @@ L.Illustrate.Edit.Pointer = L.Edit.Poly.extend({
var coordinates = this._shape.getPoints(),
vertexHandle = new L.Illustrate.PointerHandle(this._shape, {
offset: coordinates[index],
index: index,
id: 2*index,
type: 'vertex'
});

this._handleGroup.addLayer(vertexHandle);
this._handles.vertex[index] = vertexHandle;
this._handles.push(vertexHandle);

return vertexHandle;
},

_createMidpointHandle: function(index) {
var coordinates = this._shape.getPoints(),
delta = coordinates[index+1].subtract(coordinates[index]).divideBy(2),
delta = coordinates[index + 1].subtract(coordinates[index]).divideBy(2),
midpointHandle = new L.Illustrate.PointerHandle(this._shape, {
offset: coordinates[index].add(delta),
index: index,
id: 2*index + 1,
type: 'midpoint'
});

midpointHandle.setOpacity(0.6);
this._handleGroup.addLayer(midpointHandle);
this._handles.midpoint[index] = midpointHandle;
this._handles.push(midpointHandle);

return midpointHandle;
}
});

Expand Down
2 changes: 0 additions & 2 deletions src/edit/handles/L.Illustrate.MoveHandle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,5 @@ L.Illustrate.MoveHandle = L.Illustrate.EditHandle.extend({
var handle = event.target;

this._handled.setCenter(handle.getLatLng());

this._handled.fire('illustrate:handledrag');
}
});

0 comments on commit 9693851

Please sign in to comment.