Navigation Menu

Skip to content
This repository has been archived by the owner on Feb 28, 2023. It is now read-only.

Commit

Permalink
First shot of vertex in place toolbar (cf #94)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yohanboniface
yohanboniface committed Jul 31, 2015
1 parent a8b91ca commit 57b5bad
Show file tree
Hide file tree
Showing 11 changed files with 461 additions and 118 deletions.
14 changes: 7 additions & 7 deletions .eslintrc
View file
Expand Up @@ -3,13 +3,13 @@
"browser": true
},
"rules": {
"quotes": "single",
"no-underscore-dangle": false,
"curly": false,
"consistent-return": false,
"new-cap": false,
"strict": global,
"indent": 4
"quotes": [2, "single"],
"no-underscore-dangle": 0,
"curly": 0,
"consistent-return": 0,
"new-cap": 0,
"strict": [2, "global"],
"semi-spacing": 0
},
"globals": {L: true}
}
2 changes: 1 addition & 1 deletion contrib/css/storage.ui.default.css
View file
Expand Up @@ -150,7 +150,7 @@ fieldset.toggle.on .more_style_options {
border-left: 1px solid #ddd;
display: none;
overflow-x: auto;
z-index: 10;
z-index: 1000;
background-color: #fff;
opacity: 0.93;
}
Expand Down
15 changes: 12 additions & 3 deletions src/css/storage.css
View file
Expand Up @@ -562,11 +562,20 @@ a.storage-control-text {
.storage-new-hole {
background-position: -125px -165px;
}
.storage-delete-feature {
.storage-delete-all {
background-position: -165px -85px;
}
.storage-delete-one-of-multi {
background-position: -165px -125px;
}
.storage-delete-one-of-one {
background-position: -165px -165px;
}
.storage-delete-shape {
background-position: -45px -5px;
.storage-delete-vertex {
background-position: -205px -165px;
}
.storage-continue-line {
background-position: -165px -5px;
}
.storage-browse-features .feature-title,
.leaflet-control-browse .storage-browse-actions .layer-title {
Expand Down
Binary file modified src/img/16.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
344 changes: 298 additions & 46 deletions src/img/16.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
113 changes: 83 additions & 30 deletions src/js/leaflet.storage.controls.js
View file
Expand Up @@ -160,16 +160,19 @@ L.Storage.BaseFeatureAction = L.ToolbarAction.extend({
this.feature = feature;
this.latlng = latlng;
L.ToolbarAction.prototype.initialize.call(this);
this.postInit();
},

hideToolbar: function () {
postInit: function () {},

hideToolbar: function () {
this.map.removeLayer(this.toolbar);
},
},

addHooks: function () {
addHooks: function () {
this.onClick({latlng: this.latlng});
this.hideToolbar();
}
}

});

Expand Down Expand Up @@ -208,11 +211,15 @@ L.Storage.DeleteFeatureAction = L.S.BaseFeatureAction.extend({

options: {
toolbarIcon: {
className: 'storage-delete-feature',
className: 'storage-delete-all',
tooltip: L._('Delete this feature')
}
},

postInit: function () {
if (!this.feature.isMulti()) this.options.toolbarIcon.className = 'storage-delete-one-of-one';
},

onClick: function (e) {
this.feature.confirmDelete(e);
}
Expand All @@ -223,7 +230,7 @@ L.Storage.DeleteShapeAction = L.S.BaseFeatureAction.extend({

options: {
toolbarIcon: {
className: 'storage-delete-shape',
className: 'storage-delete-one-of-multi',
tooltip: L._('Delete this shape')
}
},
Expand All @@ -234,6 +241,45 @@ L.Storage.DeleteShapeAction = L.S.BaseFeatureAction.extend({

});

L.Storage.BaseVertexAction = L.S.BaseFeatureAction.extend({

initialize: function (map, feature, latlng, vertex) {
this.vertex = vertex;
L.S.BaseFeatureAction.prototype.initialize.call(this, map, feature, latlng);
}

});

L.Storage.DeleteVertexAction = L.S.BaseVertexAction.extend({

options: {
toolbarIcon: {
className: 'storage-delete-vertex',
tooltip: L._('Delete this vertex')
}
},

onClick: function () {
this.vertex.delete();
}

});

L.Storage.ContinueLineAction = L.S.BaseVertexAction.extend({

options: {
toolbarIcon: {
className: 'storage-continue-line',
tooltip: L._('Continue line')
}
},

onClick: function () {
this.vertex.continue();
}

});

// Leaflet.Toolbar doesn't allow twice same toolbar class…
L.Storage.SettingsToolbar = L.Toolbar.Control.extend({});
L.Storage.DrawToolbar = L.Toolbar.Control.extend({
Expand Down Expand Up @@ -323,7 +369,7 @@ L.Storage.MoreControls = L.Control.extend({
position: 'topleft'
},

onAdd: function (map) {
onAdd: function () {
var container = L.DomUtil.create('div', ''),
more = L.DomUtil.create('a', 'storage-control-more storage-control-text', container),
less = L.DomUtil.create('a', 'storage-control-less storage-control-text', container);
Expand Down Expand Up @@ -423,12 +469,12 @@ L.Storage.DataLayersControl = L.Control.extend({
},

addDataLayer: function (datalayer) {
var datalayer_li = L.DomUtil.create('li', '', this._datalayers_container);
datalayer.renderToolbox(datalayer_li);
var title = L.DomUtil.add('span', 'layer-title', datalayer_li, datalayer.options.name);
var datalayerLi = L.DomUtil.create('li', '', this._datalayers_container);
datalayer.renderToolbox(datalayerLi);
var title = L.DomUtil.add('span', 'layer-title', datalayerLi, datalayer.options.name);

datalayer_li.id = 'browse_data_toggle_' + datalayer.storage_id;
L.DomUtil.classIf(datalayer_li, 'off', !datalayer.isVisible());
datalayerLi.id = 'browse_data_toggle_' + datalayer.storage_id;
L.DomUtil.classIf(datalayerLi, 'off', !datalayer.isVisible());

title.innerHTML = datalayer.options.name;
},
Expand All @@ -444,15 +490,15 @@ L.Storage.DataLayer.include({

renderToolbox: function (container) {
var toggle = L.DomUtil.create('i', 'layer-toggle', container),
zoom_to = L.DomUtil.create('i', 'layer-zoom_to', container),
zoomTo = L.DomUtil.create('i', 'layer-zoom_to', container),
edit = L.DomUtil.create('i', 'layer-edit show-on-edit', container),
table = L.DomUtil.create('i', 'layer-table-edit show-on-edit', container);
zoom_to.title = L._('Zoom to layer extent');
zoomTo.title = L._('Zoom to layer extent');
toggle.title = L._('Show/hide layer');
edit.title = L._('Edit');
table.title = L._('Edit properties in a table');
L.DomEvent.on(toggle, 'click', this.toggle, this);
L.DomEvent.on(zoom_to, 'click', this.zoomTo, this);
L.DomEvent.on(zoomTo, 'click', this.zoomTo, this);
L.DomEvent.on(edit, 'click', this.edit, this);
L.DomEvent.on(table, 'click', this.tableEdit, this);
L.DomUtil.addClass(container, this.getHidableClass());
Expand All @@ -463,7 +509,7 @@ L.Storage.DataLayer.include({
return this.storage_id || 'tmp' + L.Util.stamp(this);
},

getHidableElements: function () {
getHidableElements: function () {
return document.querySelectorAll('.' + this.getHidableClass());
},

Expand Down Expand Up @@ -592,7 +638,7 @@ L.Storage.TileLayerControl = L.Control.extend({
position: 'topleft'
},

onAdd: function (map) {
onAdd: function () {
var container = L.DomUtil.create('div', 'leaflet-control-tilelayers storage-control');

var link = L.DomUtil.create('a', '', container);
Expand All @@ -609,7 +655,6 @@ L.Storage.TileLayerControl = L.Control.extend({
},

openSwitcher: function (options) {
var self = this;
this._tilelayers_container = L.DomUtil.create('ul', 'storage-tilelayer-switcher-container');
this.buildList(options);
},
Expand All @@ -622,13 +667,13 @@ L.Storage.TileLayerControl = L.Control.extend({
},

addTileLayerElement: function (tilelayer, options) {
var selectedClass = this._map.hasLayer(tilelayer) ? 'selected': '',
var selectedClass = this._map.hasLayer(tilelayer) ? 'selected' : '',
el = L.DomUtil.create('li', selectedClass, this._tilelayers_container),
img = L.DomUtil.create('img', '', el),
name = L.DomUtil.create('div', '', el);
img.src = L.Util.template(tilelayer.options.url_template, this._map.demoTileInfos);
name.innerHTML = tilelayer.options.name;
L.DomEvent.on(el, 'click', function (e) {
L.DomEvent.on(el, 'click', function () {
this._map.selectTileLayer(tilelayer);
L.S.fire('ui:end');
if (options && options.callback) {
Expand Down Expand Up @@ -667,7 +712,7 @@ L.Storage.HomeControl = L.Control.extend({
position: 'topleft'
},

onAdd: function (map) {
onAdd: function () {
var container = L.DomUtil.create('div', 'leaflet-control-home storage-control'),
link = L.DomUtil.create('a', '', container);

Expand All @@ -690,7 +735,7 @@ L.Storage.LocateControl = L.Control.extend({
link = L.DomUtil.create('a', '', container);
link.href = '#';
link.title = L._('Center map on your location');
var fn = function (e) {
var fn = function () {
map.locate({
setView: true,
enableHighAccuracy: true
Expand All @@ -703,7 +748,8 @@ L.Storage.LocateControl = L.Control.extend({
.on(link, 'click', fn, map)
.on(link, 'dblclick', L.DomEvent.stopPropagation);

return container; }
return container;
}
});


Expand All @@ -726,8 +772,8 @@ L.Storage.JumpToLocationControl = L.Control.extend({
link.title = input.placeholder = L._('Jump to location');
link.innerHTML = ' ';
var fn = function () {
var search_terms = input.value;
if (!search_terms) {
var searchTerms = input.value;
if (!searchTerms) {
return;
}
L.DomUtil.addClass(link, 'loading');
Expand All @@ -743,7 +789,7 @@ L.Storage.JumpToLocationControl = L.Control.extend({
viewbox = viewbox.join(',');
var params = {
format: 'json',
q: search_terms,
q: searchTerms,
viewbox: viewbox, // this is just a preferred area, not a constraint
limit: 1
};
Expand All @@ -756,7 +802,7 @@ L.Storage.JumpToLocationControl = L.Control.extend({
map.setZoom(map.getOption('zoomTo'));
}
else {
L.S.fire('ui:alert', {content: L._('Sorry, no location found for {location}', {location: search_terms})});
L.S.fire('ui:alert', {content: L._('Sorry, no location found for {location}', {location: searchTerms})});
}
}
});
Expand All @@ -772,7 +818,8 @@ L.Storage.JumpToLocationControl = L.Control.extend({
.on(link, 'click', fn)
.on(link, 'dblclick', L.DomEvent.stopPropagation);

return container; }
return container;
}
});


Expand Down Expand Up @@ -933,9 +980,9 @@ L.S.Editable = L.Editable.extend({
});
this.on('editable:vertex:ctrlclick', function (e) {
var index = e.vertex.getIndex();
if (index === 0) e.layer.editor.continueBackward();
else if (index === e.vertex.getLastIndex()) e.layer.editor.continueForward();
if (index === 0 || index === e.vertex.getLastIndex() && e.vertex.continue) e.vertex.continue();
});
this.on('editable:vertex:rawclick', this.onVertexRawClick);
},

createPolyline: function (latlngs) {
Expand Down Expand Up @@ -977,6 +1024,12 @@ L.S.Editable = L.Editable.extend({

closeTooltip: function () {
L.S.fire('ui:tooltip:abort');
},

onVertexRawClick: function (e) {
e.layer.onVertexRawClick(e);
L.DomEvent.stop(e);
e.cancel();
}

});

0 comments on commit 57b5bad

Please sign in to comment.