Add prettier and reformat code
This commit is contained in:
Gautier Pelloux-Prayer
parent
68eb00bae9
commit
970a34981f
37 changed files with 3459 additions and 1969 deletions
|
|
@ -1,7 +1,7 @@
|
|||
L.Routing.Draw.prototype._hideTrailer = function() {
|
||||
if (this._trailer.options.opacity !== 0.0) {
|
||||
this._trailer.setStyle({opacity: 0.0});
|
||||
}
|
||||
if (this._trailer.options.opacity !== 0.0) {
|
||||
this._trailer.setStyle({ opacity: 0.0 });
|
||||
}
|
||||
};
|
||||
|
||||
BR.Routing = L.Routing.extend({
|
||||
|
|
@ -20,7 +20,7 @@ BR.Routing = L.Routing.extend({
|
|||
zIndexOffset: -2000
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
onAdd: function(map) {
|
||||
this._segmentsCasing = new L.FeatureGroup().addTo(map);
|
||||
|
||||
var container = L.Routing.prototype.onAdd.call(this, map);
|
||||
|
|
@ -31,35 +31,50 @@ BR.Routing = L.Routing.extend({
|
|||
this._waypoints.on('layeradd', this._setMarkerOpacity, this);
|
||||
|
||||
// turn line mouse marker off while over waypoint marker
|
||||
this.on('waypoint:mouseover', function(e) {
|
||||
// L.Routing.Edit._segmentOnMouseout without firing 'segment:mouseout' (enables draw)
|
||||
if (this._dragging) { return; }
|
||||
this.on(
|
||||
'waypoint:mouseover',
|
||||
function(e) {
|
||||
// L.Routing.Edit._segmentOnMouseout without firing 'segment:mouseout' (enables draw)
|
||||
if (this._dragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._mouseMarker.setOpacity(0.0);
|
||||
this._map.off('mousemove', this._segmentOnMousemove, this);
|
||||
this._suspended = true;
|
||||
}, this._edit);
|
||||
this._mouseMarker.setOpacity(0.0);
|
||||
this._map.off('mousemove', this._segmentOnMousemove, this);
|
||||
this._suspended = true;
|
||||
},
|
||||
this._edit
|
||||
);
|
||||
|
||||
this.on('waypoint:mouseout', function(e) {
|
||||
this._segmentOnMouseover(e);
|
||||
this._suspended = false;
|
||||
}, this._edit);
|
||||
this.on(
|
||||
'waypoint:mouseout',
|
||||
function(e) {
|
||||
this._segmentOnMouseover(e);
|
||||
this._suspended = false;
|
||||
},
|
||||
this._edit
|
||||
);
|
||||
|
||||
this._edit._mouseMarker.setIcon(L.divIcon({
|
||||
className: 'line-mouse-marker'
|
||||
,iconAnchor: [8, 8] // size/2 + border/2
|
||||
,iconSize: [16, 16]
|
||||
}));
|
||||
this._edit._mouseMarker.setIcon(
|
||||
L.divIcon({
|
||||
className: 'line-mouse-marker',
|
||||
iconAnchor: [8, 8], // size/2 + border/2
|
||||
iconSize: [16, 16]
|
||||
})
|
||||
);
|
||||
|
||||
// Forward mousemove event to snapped feature (for Leaflet.Elevation to
|
||||
// update indicator), see also L.Routing.Edit._segmentOnMousemove
|
||||
this._edit._mouseMarker.on('move', L.bind(function(e) {
|
||||
var latLng = e.latlng;
|
||||
if (latLng._feature) {
|
||||
this._mouseMarker._feature = latLng._feature;
|
||||
latLng._feature.fire('mousemove', e, true);
|
||||
}
|
||||
}, this._edit));
|
||||
this._edit._mouseMarker.on(
|
||||
'move',
|
||||
L.bind(function(e) {
|
||||
var latLng = e.latlng;
|
||||
if (latLng._feature) {
|
||||
this._mouseMarker._feature = latLng._feature;
|
||||
latLng._feature.fire('mousemove', e, true);
|
||||
}
|
||||
}, this._edit)
|
||||
);
|
||||
var mouseoutHandler = function(e) {
|
||||
if (this._mouseMarker._feature) {
|
||||
this._mouseMarker._feature.fire('mouseout', e, true);
|
||||
|
|
@ -79,12 +94,20 @@ BR.Routing = L.Routing.extend({
|
|||
|
||||
// intercept listener: only re-show draw trailer after marker hover
|
||||
// when edit is not active (i.e. wasn't also supended)
|
||||
this._parent.off('waypoint:mouseout' , this._catchWaypointEvent, this);
|
||||
this.on('waypoint:mouseout' , function(e) {
|
||||
if (!this._parent._edit._suspended) {
|
||||
this._catchWaypointEvent(e);
|
||||
}
|
||||
}, this);
|
||||
this._parent.off(
|
||||
'waypoint:mouseout',
|
||||
this._catchWaypointEvent,
|
||||
this
|
||||
);
|
||||
this.on(
|
||||
'waypoint:mouseout',
|
||||
function(e) {
|
||||
if (!this._parent._edit._suspended) {
|
||||
this._catchWaypointEvent(e);
|
||||
}
|
||||
},
|
||||
this
|
||||
);
|
||||
});
|
||||
this._draw.on('disabled', function() {
|
||||
L.DomUtil.removeClass(map.getContainer(), 'routing-draw-enabled');
|
||||
|
|
@ -111,7 +134,12 @@ BR.Routing = L.Routing.extend({
|
|||
this._map.off('mouseout', hide, this);
|
||||
this._map.off('mouseover', show, this);
|
||||
L.DomEvent.off(this._map._controlContainer, 'mouseout', show, this);
|
||||
L.DomEvent.off(this._map._controlContainer, 'mouseover', hide, this);
|
||||
L.DomEvent.off(
|
||||
this._map._controlContainer,
|
||||
'mouseover',
|
||||
hide,
|
||||
this
|
||||
);
|
||||
});
|
||||
|
||||
// Call show after deleting last waypoint, but hide trailer.
|
||||
|
|
@ -119,191 +147,209 @@ BR.Routing = L.Routing.extend({
|
|||
// mouseout to show again never fires when deleted. Click handler
|
||||
// _onMouseClick aborts when hidden, so no waypoint can be added
|
||||
// although enabled.
|
||||
this.on('waypoint:click', function() {
|
||||
if (this._hidden && !this._parent._waypoints._first) {
|
||||
this._show();
|
||||
this._hideTrailer();
|
||||
}
|
||||
}, this._draw);
|
||||
this.on(
|
||||
'waypoint:click',
|
||||
function() {
|
||||
if (this._hidden && !this._parent._waypoints._first) {
|
||||
this._show();
|
||||
this._hideTrailer();
|
||||
}
|
||||
},
|
||||
this._draw
|
||||
);
|
||||
|
||||
// keys not working when map container does not have focus, use document instead
|
||||
L.DomEvent.removeListener(this._container, 'keyup', this._keyupListener);
|
||||
L.DomEvent.removeListener(
|
||||
this._container,
|
||||
'keyup',
|
||||
this._keyupListener
|
||||
);
|
||||
L.DomEvent.addListener(document, 'keyup', this._keyupListener, this);
|
||||
|
||||
// enable drawing mode
|
||||
this.draw(true);
|
||||
|
||||
return container;
|
||||
}
|
||||
},
|
||||
|
||||
,_addSegmentCasing: function(e) {
|
||||
var casing = L.polyline(e.layer.getLatLngs(), this.options.styles.trackCasing);
|
||||
this._segmentsCasing.addLayer(casing);
|
||||
e.layer._casing = casing;
|
||||
this._segments.bringToFront();
|
||||
}
|
||||
_addSegmentCasing: function(e) {
|
||||
var casing = L.polyline(
|
||||
e.layer.getLatLngs(),
|
||||
this.options.styles.trackCasing
|
||||
);
|
||||
this._segmentsCasing.addLayer(casing);
|
||||
e.layer._casing = casing;
|
||||
this._segments.bringToFront();
|
||||
},
|
||||
|
||||
,_removeSegmentCasing: function(e) {
|
||||
this._segmentsCasing.removeLayer(e.layer._casing);
|
||||
}
|
||||
_removeSegmentCasing: function(e) {
|
||||
this._segmentsCasing.removeLayer(e.layer._casing);
|
||||
},
|
||||
|
||||
,setOpacity: function(opacity) {
|
||||
// Due to the second Polyline layer for casing, the combined opacity is less
|
||||
// transparent than with a single layer and the slider is non-linear. The
|
||||
// inverted formula is used to get the same result as with a single layer.
|
||||
// SVG simple alpha compositing: Ca' = 1 - (1 - Ea) * (1 - Ca)
|
||||
// https://www.w3.org/TR/SVG11/masking.html#SimpleAlphaBlending
|
||||
var sourceOpacity = 1 - Math.sqrt(1 - opacity);
|
||||
setOpacity: function(opacity) {
|
||||
// Due to the second Polyline layer for casing, the combined opacity is less
|
||||
// transparent than with a single layer and the slider is non-linear. The
|
||||
// inverted formula is used to get the same result as with a single layer.
|
||||
// SVG simple alpha compositing: Ca' = 1 - (1 - Ea) * (1 - Ca)
|
||||
// https://www.w3.org/TR/SVG11/masking.html#SimpleAlphaBlending
|
||||
var sourceOpacity = 1 - Math.sqrt(1 - opacity);
|
||||
|
||||
this.options.styles.track.opacity = sourceOpacity;
|
||||
this.options.styles.trackCasing.opacity = sourceOpacity;
|
||||
this.options.icons.opacity = opacity;
|
||||
this.options.styles.track.opacity = sourceOpacity;
|
||||
this.options.styles.trackCasing.opacity = sourceOpacity;
|
||||
this.options.icons.opacity = opacity;
|
||||
|
||||
this._segments.setStyle({
|
||||
opacity: sourceOpacity
|
||||
});
|
||||
this._segmentsCasing.setStyle({
|
||||
opacity: sourceOpacity
|
||||
});
|
||||
this._waypoints.eachLayer(function(marker) {
|
||||
marker.setOpacity(opacity);
|
||||
});
|
||||
}
|
||||
|
||||
,_setMarkerOpacity: function(e) {
|
||||
e.layer.setOpacity(this.options.icons.opacity);
|
||||
}
|
||||
|
||||
,_removeMarkerEvents: function(marker) {
|
||||
marker.off('mouseover', this._fireWaypointEvent, this);
|
||||
marker.off('mouseout' , this._fireWaypointEvent, this);
|
||||
marker.off('dragstart', this._fireWaypointEvent, this);
|
||||
marker.off('dragend' , this._fireWaypointEvent, this);
|
||||
marker.off('drag' , this._fireWaypointEvent, this);
|
||||
marker.off('click' , this._fireWaypointEvent, this);
|
||||
}
|
||||
|
||||
,clear: function() {
|
||||
var drawEnabled = this._draw._enabled;
|
||||
var current = this._waypoints._first;
|
||||
|
||||
this.draw(false);
|
||||
|
||||
if (current === null) { return; }
|
||||
this._removeMarkerEvents(current);
|
||||
while (current._routing.nextMarker) {
|
||||
var marker = current._routing.nextMarker;
|
||||
this._removeMarkerEvents(marker);
|
||||
current = marker;
|
||||
};
|
||||
|
||||
this._waypoints._first = null;
|
||||
this._waypoints._last = null;
|
||||
this._waypoints.clearLayers();
|
||||
this._segments.clearLayers();
|
||||
|
||||
if (drawEnabled) {
|
||||
this.draw(true);
|
||||
}
|
||||
}
|
||||
|
||||
,setWaypoints: function(latLngs, cb) {
|
||||
var i;
|
||||
var callbackCount = 0;
|
||||
var firstErr;
|
||||
var $this = this;
|
||||
|
||||
var callback = function(err, data) {
|
||||
callbackCount++;
|
||||
firstErr = firstErr || err;
|
||||
if (callbackCount >= latLngs.length) {
|
||||
$this.fire('routing:setWaypointsEnd', { err: firstErr });
|
||||
if (cb) {
|
||||
cb(firstErr);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.fire('routing:setWaypointsStart');
|
||||
for (i = 0; latLngs && i < latLngs.length; i++) {
|
||||
this.addWaypoint(latLngs[i], this._waypoints._last, null, callback);
|
||||
}
|
||||
}
|
||||
|
||||
// patch to fix error when line is null or error line
|
||||
// (when called while still segments to calculate, e.g. permalink or fast drawing)
|
||||
,toPolyline: function() {
|
||||
var latLngs = [];
|
||||
|
||||
this._eachSegment(function(m1, m2, line) {
|
||||
// omit if null (still calculating) or error
|
||||
// NOTE: feature check specific to BRouter GeoJSON response, workaround to detect error line
|
||||
if (line && line.feature) {
|
||||
latLngs = latLngs.concat(line.getLatLngs());
|
||||
}
|
||||
});
|
||||
|
||||
return L.polyline(latLngs);
|
||||
}
|
||||
|
||||
,_routeSegment: function(m1, m2, cb) {
|
||||
var loadingTrailer;
|
||||
|
||||
// change segment color before request to indicate recalculation (mark old)
|
||||
if (m1 && m1._routing.nextLine !== null) {
|
||||
m1._routing.nextLine.setStyle({color: 'dimgray' });
|
||||
}
|
||||
|
||||
// animate dashed trailer as loading indicator
|
||||
if (m1 && m2) {
|
||||
loadingTrailer = new L.Polyline([m1.getLatLng(), m2.getLatLng()], {
|
||||
color: this.options.styles.track.color,
|
||||
opacity: this.options.styles.trailer.opacity,
|
||||
dashArray: [10, 10],
|
||||
className: 'loading-trailer'
|
||||
this._segments.setStyle({
|
||||
opacity: sourceOpacity
|
||||
});
|
||||
loadingTrailer.addTo(this._map);
|
||||
}
|
||||
this._segmentsCasing.setStyle({
|
||||
opacity: sourceOpacity
|
||||
});
|
||||
this._waypoints.eachLayer(function(marker) {
|
||||
marker.setOpacity(opacity);
|
||||
});
|
||||
},
|
||||
|
||||
L.Routing.prototype._routeSegment.call(this, m1, m2, L.bind(function(err, data) {
|
||||
if (loadingTrailer) {
|
||||
this._map.removeLayer(loadingTrailer);
|
||||
_setMarkerOpacity: function(e) {
|
||||
e.layer.setOpacity(this.options.icons.opacity);
|
||||
},
|
||||
|
||||
_removeMarkerEvents: function(marker) {
|
||||
marker.off('mouseover', this._fireWaypointEvent, this);
|
||||
marker.off('mouseout', this._fireWaypointEvent, this);
|
||||
marker.off('dragstart', this._fireWaypointEvent, this);
|
||||
marker.off('dragend', this._fireWaypointEvent, this);
|
||||
marker.off('drag', this._fireWaypointEvent, this);
|
||||
marker.off('click', this._fireWaypointEvent, this);
|
||||
},
|
||||
|
||||
clear: function() {
|
||||
var drawEnabled = this._draw._enabled;
|
||||
var current = this._waypoints._first;
|
||||
|
||||
this.draw(false);
|
||||
|
||||
if (current === null) {
|
||||
return;
|
||||
}
|
||||
this._removeMarkerEvents(current);
|
||||
while (current._routing.nextMarker) {
|
||||
var marker = current._routing.nextMarker;
|
||||
this._removeMarkerEvents(marker);
|
||||
current = marker;
|
||||
}
|
||||
cb(err, data);
|
||||
}, this));
|
||||
}
|
||||
|
||||
,getSegments: function() {
|
||||
var segments = [];
|
||||
this._waypoints._first = null;
|
||||
this._waypoints._last = null;
|
||||
this._waypoints.clearLayers();
|
||||
this._segments.clearLayers();
|
||||
|
||||
this._eachSegment(function(m1, m2, line) {
|
||||
// omit if null (still calculating) or error
|
||||
// NOTE: feature check specific to BRouter GeoJSON response, workaround to detect error line
|
||||
if (line && line.feature) {
|
||||
segments.push(line);
|
||||
}
|
||||
});
|
||||
if (drawEnabled) {
|
||||
this.draw(true);
|
||||
}
|
||||
},
|
||||
|
||||
return segments;
|
||||
}
|
||||
setWaypoints: function(latLngs, cb) {
|
||||
var i;
|
||||
var callbackCount = 0;
|
||||
var firstErr;
|
||||
var $this = this;
|
||||
|
||||
// add 'esc' to disable drawing
|
||||
,_keyupListener: function (e) {
|
||||
if (e.keyCode === 27) {
|
||||
this._draw.disable();
|
||||
} else {
|
||||
L.Routing.prototype._keyupListener.call(this, e);
|
||||
var callback = function(err, data) {
|
||||
callbackCount++;
|
||||
firstErr = firstErr || err;
|
||||
if (callbackCount >= latLngs.length) {
|
||||
$this.fire('routing:setWaypointsEnd', { err: firstErr });
|
||||
if (cb) {
|
||||
cb(firstErr);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.fire('routing:setWaypointsStart');
|
||||
for (i = 0; latLngs && i < latLngs.length; i++) {
|
||||
this.addWaypoint(latLngs[i], this._waypoints._last, null, callback);
|
||||
}
|
||||
},
|
||||
|
||||
// patch to fix error when line is null or error line
|
||||
// (when called while still segments to calculate, e.g. permalink or fast drawing)
|
||||
toPolyline: function() {
|
||||
var latLngs = [];
|
||||
|
||||
this._eachSegment(function(m1, m2, line) {
|
||||
// omit if null (still calculating) or error
|
||||
// NOTE: feature check specific to BRouter GeoJSON response, workaround to detect error line
|
||||
if (line && line.feature) {
|
||||
latLngs = latLngs.concat(line.getLatLngs());
|
||||
}
|
||||
});
|
||||
|
||||
return L.polyline(latLngs);
|
||||
},
|
||||
|
||||
_routeSegment: function(m1, m2, cb) {
|
||||
var loadingTrailer;
|
||||
|
||||
// change segment color before request to indicate recalculation (mark old)
|
||||
if (m1 && m1._routing.nextLine !== null) {
|
||||
m1._routing.nextLine.setStyle({ color: 'dimgray' });
|
||||
}
|
||||
|
||||
// animate dashed trailer as loading indicator
|
||||
if (m1 && m2) {
|
||||
loadingTrailer = new L.Polyline([m1.getLatLng(), m2.getLatLng()], {
|
||||
color: this.options.styles.track.color,
|
||||
opacity: this.options.styles.trailer.opacity,
|
||||
dashArray: [10, 10],
|
||||
className: 'loading-trailer'
|
||||
});
|
||||
loadingTrailer.addTo(this._map);
|
||||
}
|
||||
|
||||
L.Routing.prototype._routeSegment.call(
|
||||
this,
|
||||
m1,
|
||||
m2,
|
||||
L.bind(function(err, data) {
|
||||
if (loadingTrailer) {
|
||||
this._map.removeLayer(loadingTrailer);
|
||||
}
|
||||
cb(err, data);
|
||||
}, this)
|
||||
);
|
||||
},
|
||||
|
||||
getSegments: function() {
|
||||
var segments = [];
|
||||
|
||||
this._eachSegment(function(m1, m2, line) {
|
||||
// omit if null (still calculating) or error
|
||||
// NOTE: feature check specific to BRouter GeoJSON response, workaround to detect error line
|
||||
if (line && line.feature) {
|
||||
segments.push(line);
|
||||
}
|
||||
});
|
||||
|
||||
return segments;
|
||||
},
|
||||
|
||||
// add 'esc' to disable drawing
|
||||
_keyupListener: function(e) {
|
||||
if (e.keyCode === 27) {
|
||||
this._draw.disable();
|
||||
} else {
|
||||
L.Routing.prototype._keyupListener.call(this, e);
|
||||
}
|
||||
},
|
||||
|
||||
isDrawing: function() {
|
||||
return this._draw._enabled;
|
||||
},
|
||||
|
||||
reverse: function() {
|
||||
var waypoints = this.getWaypoints();
|
||||
waypoints.reverse();
|
||||
this.clear();
|
||||
this.setWaypoints(waypoints);
|
||||
}
|
||||
}
|
||||
|
||||
,isDrawing: function () {
|
||||
return this._draw._enabled;
|
||||
}
|
||||
|
||||
,reverse: function() {
|
||||
var waypoints = this.getWaypoints();
|
||||
waypoints.reverse();
|
||||
this.clear();
|
||||
this.setWaypoints(waypoints);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue