muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

InteractivePoly: touch hinting at mobile

Browse source
This commit is contained in:
muerwre 2019-02-25 16:23:29 +07:00
parent 15618ad3d7
commit 5b315d97c7
2 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/modules/InteractivePoly.ts
View file

@ -148,13 +148,14 @@ export class Component extends Polyline {
this.is_editing = false; this.is_editing = false;
this.stopDragHinting(); this.stopDragHinting();
this.stopDrawing(); this.stopDrawing();
this.touchHinter.removeFrom(this._map);
this.fire('editordisable'); this.fire('editordisable');
}, },
enable: () => { enable: () => {
this.is_editing = true; this.is_editing = true;
this.showVisibleMarkers(); this.showVisibleMarkers();
this.startDragHinting(); this.startDragHinting();
this.touchHinter.addTo(this._map);
this.fire('editorenable'); this.fire('editorenable');
}, },
@ -525,9 +526,9 @@ export class Component extends Polyline {
}; };
touchHinter: Polyline = new Polyline([], { touchHinter: Polyline = new Polyline([], {
weight: 25, weight: 24,
color: 'rgba(255, 255, 255, 0)',
smoothFactor: 3, smoothFactor: 3,
className: 'touch-hinter-poly'
// bubblingMouseEvents: false, // bubblingMouseEvents: false,
}); });
@ -563,7 +564,7 @@ Component.addInitHook(function () {
this.on('latlngschange', this.updateTouchHinter); this.on('latlngschange', this.updateTouchHinter);
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
this.touchHinter.setStyle({ weight: 50 }); this.touchHinter.setStyle({ weight: 32 });
} }
} }
}); });

9
src/styles/map.less
View file

@ -50,6 +50,7 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
transform: translate(-8px, -8px); transform: translate(-8px, -8px);
background: rgba(255, 50, 0, 0.3);
} }
} }
@ -71,6 +72,14 @@
} }
} }
.touch-hinter-poly {
stroke: rgba(255, 50, 0, 0);
@media (max-width: @mobile_breakpoint) {
stroke: rgba(255, 50, 0, 0.1);
}
}
.leaflet-control-container .leaflet-routing-container-hide { .leaflet-control-container .leaflet-routing-container-hide {
display: none; display: none;
} }