commit 06dad17cfaecde9478ab2a013f522411d8a73ee4
parent 3fc97e82db3e60625bc38d3782d808f20630844d
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Sat, 3 Nov 2018 13:26:35 +0100
[tracks] highlight row in track list when mouse over track on map and when track is being edited #135
Diffstat:
3 files changed, 40 insertions(+), 7 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,16 @@
.join-line-selecting {
cursor: default;
+}
+
+.tracks-rows-wrapper {
+ margin-top: 2px;
+}
+
+.leaflet-control-tracklist .hover td {
+ background-color: rgb(93%, 93%, 93%);
+}
+
+.leaflet-control-tracklist .edit td {
+ background-color: rgb(217, 232, 255);
}
\ 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,7 @@ 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)}, 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>
@@ -690,6 +690,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));
@@ -791,6 +795,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;
@@ -876,7 +896,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));
diff --git a/src/lib/leaflet.polyline-edit/index.js b/src/lib/leaflet.polyline-edit/index.js
@@ -21,6 +21,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});
}
},
