commit d6f9dd52c1fcbb219f49c5f52e4d25dee2cc5a43
parent 0a5662b71e681e750051b0bd320fa4ced41870ab
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Tue, 6 Nov 2018 22:46:01 +0100
Merge branch '135-track-highlight' into release-5
Diffstat:
5 files changed, 105 insertions(+), 10 deletions(-)
diff --git a/src/lib/leaflet.control.track-list/track-list.css b/src/lib/leaflet.control.track-list/track-list.css
@@ -97,11 +97,9 @@
height: 4px;
vertical-align: middle;
cursor: pointer;
- margin-left: 2px;
- border-top-width: 6px;
- border-bottom-width: 6px;
- border-color: white;
- border-style: solid;
+ margin-left: 4px;
+ margin-right: 2px;
+ margin-bottom: 2px;
}
.leaflet-control-tracklist .track-name-wrapper {
@@ -258,4 +256,17 @@
.join-line-selecting {
cursor: default;
+}
+
+.tracks-rows-wrapper {
+ margin-top: 2px;
+}
+
+.leaflet-control-tracklist .hover,
+.leaflet-control-tracklist tr:hover {
+ background-color: rgb(93%, 93%, 93%);
+}
+
+.leaflet-control-tracklist .edit {
+ background-color: rgb(217, 232, 255) !important;
}
\ No newline at end of file
diff --git a/src/lib/leaflet.control.track-list/track-list.js b/src/lib/leaflet.control.track-list/track-list.js
@@ -92,7 +92,12 @@ L.Control.TrackList = L.Control.extend({
</div>
<div class="tracks-rows-wrapper" data-bind="style: {maxHeight: trackListHeight}">
<table class="tracks-rows"><tbody data-bind="foreach: {data: tracks, as: 'track'}">
- <tr data-bind="event: {contextmenu: $parent.showTrackMenu.bind($parent)}">
+ <tr data-bind="event: {
+ contextmenu: $parent.showTrackMenu.bind($parent),
+ mouseenter: $parent.highLightTrack.bind($parent, track),
+ mouseleave: $parent.highLightTrack.bind($parent, null)
+ },
+ css: {hover: hover() && $parent.tracks().length > 1, edit: isEdited() && $parent.tracks().length > 1}">
<td><input type="checkbox" class="visibility-switch" data-bind="checked: track.visible"></td>
<td><div class="color-sample" data-bind="style: {backgroundColor: $parent.colors[track.color()]}, click: $parent.onColorSelectorClicked.bind($parent)"></div></td>
<td><div class="track-name-wrapper"><div class="track-name" data-bind="text: track.name, attr: {title: track.name}, click: $parent.setViewToTrack.bind($parent)"></div></div></td>
@@ -125,6 +130,8 @@ L.Control.TrackList = L.Control.extend({
printTransparent: true
}).addTo(map);
this._markerLayer.on('markerclick markercontextmenu', this.onMarkerClick, this);
+ this._markerLayer.on('markerenter', this.onMarkerEnter, this);
+ this._markerLayer.on('markerleave', this.onMarkerLeave, this);
map.on('resize', this._setAdaptiveHeight, this);
setTimeout(() => this._setAdaptiveHeight(), 0);
return container;
@@ -692,6 +699,10 @@ L.Control.TrackList = L.Control.extend({
polyline.on('noderightclick', this.onNodeRightClickShowMenu, this);
polyline.on('segmentrightclick', this.onSegmentRightClickShowMenu, this);
polyline.on('mousemove', this.onMouseMoveOnSegmentUpdateLineJoinCursor, this);
+ polyline.on('mouseover', () => this.onTrackMouseEnter(track));
+ polyline.on('mouseout', () => this.onTrackMouseLeave(track));
+ polyline.on('editstart', () => this.onTrackEditStart(track));
+ polyline.on('editend', () => this.onTrackEditEnd(track));
//polyline.on('editingstart', polyline.setMeasureTicksVisible.bind(polyline, false));
//polyline.on('editingend', this.setTrackMeasureTicksVisibility.bind(this, track));
@@ -793,6 +804,22 @@ L.Control.TrackList = L.Control.extend({
L.DomEvent.stopPropagation(e);
},
+ onTrackMouseEnter: function(track) {
+ track.hover(true);
+ },
+
+ onTrackMouseLeave: function(track) {
+ track.hover(false);
+ },
+
+ onTrackEditStart: function(track) {
+ track.isEdited(true);
+ },
+
+ onTrackEditEnd: function(track) {
+ track.isEdited(false);
+ },
+
onEscPressedStopLineJoinSelection: function(e) {
if ('input' === e.target.tagName.toLowerCase()) {
return;
@@ -878,7 +905,9 @@ L.Control.TrackList = L.Control.extend({
measureTicksShown: ko.observable(geodata.measureTicksShown || false),
feature: L.featureGroup([]),
_pointAutoInc: 0,
- markers: []
+ markers: [],
+ hover: ko.observable(false),
+ isEdited: ko.observable(false)
};
(geodata.tracks || []).forEach(this.addTrackSegment.bind(this, track));
(geodata.points || []).forEach(this.addPoint.bind(this, track));
@@ -888,6 +917,9 @@ L.Control.TrackList = L.Control.extend({
track.visible.subscribe(this.onTrackVisibilityChanged.bind(this, track));
track.measureTicksShown.subscribe(this.setTrackMeasureTicksVisibility.bind(this, track));
track.color.subscribe(this.onTrackColorChanged.bind(this, track));
+ if (!L.Browser.touch) {
+ track.feature.bindTooltip(() => track.name(), {sticky: true, delay: 500});
+ }
//this.onTrackColorChanged(track);
this.onTrackVisibilityChanged(track);
@@ -897,6 +929,30 @@ L.Control.TrackList = L.Control.extend({
return track;
},
+ highLightTrack: function(track, e) {
+ if (L.Browser.touch) {
+ return;
+ }
+ if (this._trackHighlight) {
+ this._trackHighlight.removeFrom(this._map);
+ this._trackHighlight = null;
+ }
+ if (track) {
+ const trackHighlight = L.featureGroup([]);
+
+ track.feature.eachLayer((line) => {
+ L.polyline(line.getLatLngs()).addTo(trackHighlight);
+ });
+
+ trackHighlight.setStyle({
+ color: 'yellow',
+ weight: '15',
+ opacity: 0.5
+ });
+ trackHighlight.addTo(this._map).bringToBack();
+ this._trackHighlight = trackHighlight;
+ }
+ },
setMarkerIcon: function(marker) {
var symbol = 'marker',
@@ -935,6 +991,14 @@ L.Control.TrackList = L.Control.extend({
).show(e);
},
+ onMarkerEnter: function(e) {
+ e.marker._parentTrack.hover(true);
+ },
+
+ onMarkerLeave: function(e) {
+ e.marker._parentTrack.hover(false);
+ },
+
removePoint: function(marker) {
this.stopPlacingPoint();
this._markerLayer.removeMarker(marker);
diff --git a/src/lib/leaflet.fixes/index.js b/src/lib/leaflet.fixes/index.js
@@ -7,8 +7,9 @@ function fixAll() {
fixTouchDetection();
fixMapKeypressEvent();
fixVectorDrawWhileAnimation();
- fixVectorMarkerWorldJump()
+ fixVectorMarkerWorldJump();
allowControlHorizontalStacking();
+ addTooltipDelay();
}
// https://github.com/Leaflet/Leaflet/issues/3575
@@ -84,7 +85,6 @@ function fixVectorDrawWhileAnimation() {
function allowControlHorizontalStacking() {
const original_addTo = L.Control.prototype.addTo;
L.Control.prototype.addTo = function(map) {
- console.log('!!!!!!!!!!');
const result = original_addTo.call(this, map);
if (this.options.stackHorizontally) {
L.DomUtil.addClass(this._container, 'leaflet-control-horizontal-stack');
@@ -93,4 +93,22 @@ function allowControlHorizontalStacking() {
}
}
+function addTooltipDelay() {
+ const origOpenTooltip = L.Layer.prototype._openTooltip;
+ L.Layer.prototype._openTooltip = function(e) {
+ if (this._tooltip.options.delay) {
+ const self = this;
+ this._pendingTooltip = setTimeout(() => origOpenTooltip.call(self, e), this._tooltip.options.delay);
+ } else {
+ origOpenTooltip.call(this, e);
+ }
+ };
+
+ const origCloseTooltip = L.Layer.prototype.closeTooltip;
+ L.Layer.prototype.closeTooltip = function() {
+ clearInterval(this._pendingTooltip);
+ origCloseTooltip.call(this);
+ }
+}
+
export {fixAll}
diff --git a/src/lib/leaflet.layer.canvasMarkers/index.js b/src/lib/leaflet.layer.canvasMarkers/index.js
@@ -391,8 +391,9 @@ L.Layer.CanvasMarkers = L.GridLayer.extend({
onMouseOut: function() {
if (this._hoverMarker) {
+ const marker = this._hoverMarker;
this._hoverMarker = null;
- this.fire('markerleave', {marker: this._hoverMarker});
+ this.fire('markerleave', {marker});
}
},
diff --git a/src/lib/leaflet.polyline-edit/index.js b/src/lib/leaflet.polyline-edit/index.js
@@ -22,6 +22,7 @@ L.Polyline.EditMixin = {
this._storedStyle = {weight: this.options.weight, opacity: this.options.opacity};
this.setStyle({weight: 1.5, opacity: 1});
L.DomUtil.addClass(this._map._container, 'leaflet-line-editing');
+ this.fire('editstart', {target: this});
}
},
