mirror
/
facilmap
kopia lustrzana https://github.com/FacilMap/facilmap
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Get rid of leaflet-almostOver and use transparent line instead 

Solves double tooltip issue
pull/108/head
Candid Dauth 2019-01-14 01:28:37 +01:00
rodzic 8021029b95
commit a7dfe61f24
6 zmienionych plików z 23 dodań i 51 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

60
frontend/app/leaflet/highlightableLayers.js
Wyświetl plik

@ -2,7 +2,6 @@ import fm from '../app';
import $ from 'jquery';
import L from 'leaflet';
import ng from 'angular';
import 'leaflet-almostover';
fm.app.factory("fmHighlightableLayers", function(fmUtils) {
@ -79,12 +78,14 @@ fm.app.factory("fmHighlightableLayers", function(fmUtils) {
class Polyline extends L.Polyline {
constructor(latLngs, options) {
options = Object.assign({
width: 7
}, options);
super(latLngs, options);
this.lineLayer = new L.Polyline(latLngs, Object.assign({}, options, { interactive: false }));
this.borderLayer = new L.Polyline(latLngs, Object.assign({}, options, { interactive: false }));
if(this.options.width == null)
this.options.width = 7;
}
beforeAdd(map) {
@ -95,36 +96,42 @@ fm.app.factory("fmHighlightableLayers", function(fmUtils) {
onAdd() {
super.onAdd(...arguments);
this._map.addLayer(this.lineLayer);
this._map.addLayer(this.borderLayer);
this._map.almostOver.addLayer(this);
this.setStyle({});
}
onRemove() {
this._map.almostOver.removeLayer(this);
this._map.removeLayer(this.lineLayer);
this._map.removeLayer(this.borderLayer);
super.onRemove(...arguments);
}
_regenerateStyle() {
this.options.opacity = 0;
this.options.weight = 20;
let isBright = fmUtils.getBrightness(this.options.color.replace(/^#/, "")) > 0.7;
// A black border makes the lines look thicker, thus we decrease the thickness to make them look the original size again
this.options.weight = isBright ? Math.round(this.options.width / 1.6) : this.options.width;
this.lineLayer.options.weight = isBright ? Math.round(this.options.width / 1.6) : this.options.width;
this.lineLayer.options.opacity = this.borderLayer.options.opacity = this.options.highlight ? 1 : 0.35;
this.options.opacity = this.borderLayer.options.opacity = this.options.highlight ? 1 : 0.35;
this.borderLayer.options.color = this.borderLayer.options.fillColor = isBright ? "#000000" : "#ffffff";
this.borderLayer.options.weight = this.options.weight * 2;
this.borderLayer.options.weight = this.lineLayer.options.weight * 2;
fmHighlightableLayers._updatePane(this, this.options.highlight || this.options.rise ? "fmHighlightPane" : "overlayPane");
fmHighlightableLayers._updatePane(this, "fmAlmostOverPane");
fmHighlightableLayers._updatePane(this.lineLayer, this.options.highlight || this.options.rise ? "fmHighlightPane" : "overlayPane");
fmHighlightableLayers._updatePane(this.borderLayer, this.options.highlight || this.options.rise ? "fmHighlightShadowPane" : "fmShadowPane");
}
redraw() {
this._regenerateStyle();
super.redraw(...arguments);
this.lineLayer.redraw();
this.borderLayer.redraw();
return this;
}
@ -132,26 +139,21 @@ fm.app.factory("fmHighlightableLayers", function(fmUtils) {
setStyle(style) {
L.Util.setOptions(this, style);
L.Util.setOptions(this.borderLayer, style);
L.Util.setOptions(this.lineLayer, style);
this._regenerateStyle();
super.setStyle({});
this.lineLayer.setStyle({});
this.borderLayer.setStyle({});
return this;
}
setLatLngs(latLngs) {
super.setLatLngs(...arguments);
this.lineLayer.setLatLngs(...arguments);
this.borderLayer.setLatLngs(...arguments);
return this;
}
fire(type, data, propagate) {
// Ignore DOM mouse events, otherwise we get them double, once by DOM, once by almostOver
if([ "mouseover", "mousemove", "mouseout" ].includes(type) && (!data.type || !data.type.startsWith("almost:")))
return;
return super.fire.apply(this, arguments);
}
}
@ -311,29 +313,9 @@ fm.app.factory("fmHighlightableLayers", function(fmUtils) {
if(map._fmHighlightableLayersPrepared)
return;
for(let paneName of [ "fmHighlightMarkerPane", "fmHighlightShadowPane", "fmHighlightPane", "fmShadowPane" ])
for(let paneName of [ "fmHighlightMarkerPane", "fmHighlightShadowPane", "fmHighlightPane", "fmShadowPane", "fmAlmostOverPane" ])
map.createPane(paneName);
map.options.almostDistance = 10;
map.on('almost:over', (e) => {
e.layer.fire('mouseover', e, true);
$(map.getContainer()).addClass("fm-almostover");
});
map.on('almost:out', (e) => {
e.layer.fire('mouseout', e, true);
$(map.getContainer()).removeClass("fm-almostover");
});
map.on('almost:click', (e) => {
e.layer.fire('click', e, true);
});
map.on('almost:move', (e) => {
e.layer.fire('mousemove', e, true);
});
map._fmHighlightableLayersPrepared = true;
},

4
frontend/app/leaflet/highlightableLayers.scss
Wyświetl plik

@ -14,6 +14,6 @@
z-index: 399;
}
.fm-almostover {
cursor: pointer !important;
.leaflet-fmAlmostOver-pane {
z-index: 201;
}

1
frontend/app/map/lines/lines.js
Wyświetl plik

@ -126,7 +126,6 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
if(!lineObj)
return;
map.map.almostOver.removeLayer(lineObj);
lineObj.removeFrom(map.map);
delete linesById[line.id];
},

4
frontend/app/map/map/map.js
Wyświetl plik

@ -308,8 +308,6 @@ fm.app.directive("facilmap", function(fmUtils, fmMapMessages, fmMapMarkers, $com
let listenClick = (e) => {
this.interactionEnd();
this.map.almostOver.addHooks();
transparentLayer.removeFrom(this.map).off("click", listenClick);
if(moveListener)
@ -326,8 +324,6 @@ fm.app.directive("facilmap", function(fmUtils, fmMapMessages, fmMapMarkers, $com
if(moveListener)
transparentLayer.on("mousemove", listenMove);
this.map.almostOver.removeHooks();
this.interactionStart();
return {

1
frontend/package.json
Wyświetl plik

@ -49,7 +49,6 @@
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"leaflet": "1.3.4",
"leaflet-almostover": "git+https://github.com/makinacorpus/Leaflet.AlmostOver.git#gh-pages",
"leaflet-geometryutil": "^0.9.0",
"leaflet-graphicscale": "^0.0.2",
"leaflet-hash": "^0.2.1",

4
frontend/yarn.lock
Wyświetl plik

@ -4654,10 +4654,6 @@ lead@^1.0.0:
dependencies:
flush-write-stream "^1.0.2"
"leaflet-almostover@git+https://github.com/makinacorpus/Leaflet.AlmostOver.git#gh-pages":
version "0.0.1"
resolved "git+https://github.com/makinacorpus/Leaflet.AlmostOver.git#28184812de9ce613b265a63d1f03fa5d5772aac3"
leaflet-geometryutil@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/leaflet-geometryutil/-/leaflet-geometryutil-0.9.0.tgz#b5da9ddb49f89c86f7c5516db465676c722280ce"