From 7c89b3171468709cb2c6877f3347a8d2f023a902 Mon Sep 17 00:00:00 2001 From: Harel Mazor Date: Wed, 24 Apr 2019 22:02:52 +0300 Subject: [PATCH] Migrate to mapbox #997 - support touch events for route editing, allow hebrew fonts, fix icons sprite address, zoom-in-out round to integer, fix osm progressbar color. --- .../intercations/pointer-counter.helper.ts | 25 -------- .../route-edit-poi.interaction.ts | 5 +- .../route-edit-route.interaction.ts | 60 ++++++++++++------- .../components/map/main-map.component.html | 2 +- .../components/map/main-map.component.ts | 9 +-- .../components/osm-user.component.ts | 6 +- .../application/components/zoom.component.ts | 6 +- 7 files changed, 49 insertions(+), 64 deletions(-) delete mode 100644 IsraelHiking.Web/sources/application/components/intercations/pointer-counter.helper.ts diff --git a/IsraelHiking.Web/sources/application/components/intercations/pointer-counter.helper.ts b/IsraelHiking.Web/sources/application/components/intercations/pointer-counter.helper.ts deleted file mode 100644 index 601ccd546..000000000 --- a/IsraelHiking.Web/sources/application/components/intercations/pointer-counter.helper.ts +++ /dev/null @@ -1,25 +0,0 @@ -export class PointerCounterHelper { - private pointers: string[]; - - constructor() { - this.pointers = []; - } - // HM TODO: finsih this - public updatePointers(event: any) { - if (!event.pointerEvent || !(event.pointerEvent as any).pointerId) { - return; - } - let id = (event.pointerEvent as any).pointerId.toString(); - if (event.type === "pointerdown") { - if (this.pointers.indexOf(id) === -1) { - this.pointers.push(id); - } - } else if (event.type === "pointerup") { - this.pointers.splice(this.pointers.indexOf(id), 1); - } - } - - public getPointersCount() { - return this.pointers.length; - } -} \ No newline at end of file diff --git a/IsraelHiking.Web/sources/application/components/intercations/route-edit-poi.interaction.ts b/IsraelHiking.Web/sources/application/components/intercations/route-edit-poi.interaction.ts index 1122ac430..dde99543e 100644 --- a/IsraelHiking.Web/sources/application/components/intercations/route-edit-poi.interaction.ts +++ b/IsraelHiking.Web/sources/application/components/intercations/route-edit-poi.interaction.ts @@ -1,4 +1,4 @@ -import { Injectable, EventEmitter } from "@angular/core"; +import { Injectable } from "@angular/core"; import { MapMouseEvent, Map } from "mapbox-gl"; import { MatDialog } from "@angular/material"; import { NgRedux } from "@angular-redux/store"; @@ -8,14 +8,11 @@ import { SelectedRouteService } from "../../services/layers/routelayers/selected import { PrivatePoiEditDialogComponent } from "../dialogs/private-poi-edit-dialog.component"; import { GeoLocationService } from "../../services/geo-location.service"; import { SnappingService, ISnappingPointResponse } from "../../services/snapping.service"; -import { PointerCounterHelper } from "./pointer-counter.helper"; import { ApplicationState, MarkerData, LatLngAlt } from "../../models/models"; @Injectable() export class RouteEditPoiInteraction { - // private pointerCounterHelper: PointerCounterHelper; - constructor(private readonly matDialog: MatDialog, private readonly selectedRouteService: SelectedRouteService, private readonly geoLocationService: GeoLocationService, diff --git a/IsraelHiking.Web/sources/application/components/intercations/route-edit-route.interaction.ts b/IsraelHiking.Web/sources/application/components/intercations/route-edit-route.interaction.ts index 863657117..2242e2319 100644 --- a/IsraelHiking.Web/sources/application/components/intercations/route-edit-route.interaction.ts +++ b/IsraelHiking.Web/sources/application/components/intercations/route-edit-route.interaction.ts @@ -9,7 +9,6 @@ import { RouterService } from "../../services/routers/router.service"; import { ElevationProvider } from "../../services/elevation.provider"; import { SnappingService } from "../../services/snapping.service"; import { GeoLocationService } from "../../services/geo-location.service"; -import { PointerCounterHelper } from "./pointer-counter.helper"; import { ResourcesService } from "../../services/resources.service"; import { ApplicationState, @@ -24,7 +23,7 @@ import { const SEGMENT = "_segment_"; const SEGMENT_POINT = "_segmentpoint_"; -declare type EditMouseState = "none" | "down" | "dragging"; +declare type EditMouseState = "none" | "down" | "dragging" | "canceled"; @Injectable() export class RouteEditRouteInteraction { @@ -36,7 +35,6 @@ export class RouteEditRouteInteraction { private selectedRoutePoint: GeoJSON.Feature; private selectedRouteSegments: GeoJSON.Feature[]; - private pointerCounterHelper: PointerCounterHelper; private geoJsonData: GeoJSON.FeatureCollection; private map: Map; @@ -49,7 +47,6 @@ export class RouteEditRouteInteraction { private readonly ngZone: NgZone, private readonly ngRedux: NgRedux) { this.geoJsonData = null; - this.pointerCounterHelper = new PointerCounterHelper(); this.selectedRouteSegments = []; this.selectedRoutePoint = null; this.onPointerMove = new EventEmitter(); @@ -82,32 +79,32 @@ export class RouteEditRouteInteraction { public setActive(active: boolean, map: Map) { this.map = map; - // HM TODO: touchmove? remove console.log if (active) { map.on("mousedown", this.handleDown); - // map.on("touchstart", this.handleDown); + map.on("touchstart", this.handleDown); map.on("mousemove", this.handleMove); + map.on("touchmove", this.handleMove); map.on("mouseup", this.handleUp); - // map.on("touchend", this.handleUp); - // map.on("touchmove", this.handleDrag); + map.on("touchend", this.handleUp); } else { map.off("mousedown", this.handleDown); - // map.off("touchstart", this.handleDown); + map.off("touchstart", this.handleDown); map.off("mousemove", this.handleMove); + map.off("touchmove", this.handleMove); map.off("drag", this.handleMove); map.off("mouseup", this.handleUp); - // map.off("touchend", this.handleUp); + map.off("touchend", this.handleUp); } } private handleDown = (event: MapMouseEvent) => { - if (this.pointerCounterHelper.getPointersCount() > 1) { + if (this.isMultiTouchEvent(event.originalEvent)) { this.selectedRoutePoint = null; this.selectedRouteSegments = []; + this.state = "canceled"; return; } this.state = "down"; - console.log("down"); let latLng = this.getSnappingForRoute(event.lngLat); let point = event.target.project(latLng); let th = 10; @@ -142,7 +139,7 @@ export class RouteEditRouteInteraction { } else { this.raisePointerMove(null); } - if (this.selectedRoutePoint != null || this.selectedRouteSegments.length > 0) { + if (this.isUpdating()) { event.preventDefault(); } else { this.map.off("mousemove", this.handleMove); @@ -151,11 +148,13 @@ export class RouteEditRouteInteraction { } private handleMove = (event: MapMouseEvent) => { + if (this.isMultiTouchEvent(event.originalEvent)) { + return; + } if (this.state === "down") { this.state = "dragging"; } if (this.state === "dragging") { - console.log("drag"); this.raiseRoutePointClick(null); this.raisePointerMove(null); if (this.selectedRoutePoint != null) { @@ -164,7 +163,6 @@ export class RouteEditRouteInteraction { this.handleRouteMiddleSegmentDrag(event); } } else { - console.log("move"); let latLng = this.getSnappingForRoute(event.lngLat); this.raisePointerMove(latLng); } @@ -207,19 +205,35 @@ export class RouteEditRouteInteraction { } + private isUpdating() { + return this.selectedRoutePoint != null || this.selectedRouteSegments.length > 0; + } + private handleUp = (event: MapMouseEvent) => { - console.log("up"); - this.map.on("mousemove", this.handleMove); - this.map.off("drag", this.handleMove); + // this is used here to support touch screen and prevent additional mouse events + event.originalEvent.preventDefault(); + if (event.originalEvent instanceof TouchEvent && event.originalEvent.touches.length > 0) { + // more than one touch - no need to do any thing. + return; + } + if (this.state === "canceled") { + this.state = "none"; + return; + } + let isUpdating = this.isUpdating(); + if (!isUpdating) { + this.map.on("mousemove", this.handleMove); + this.map.off("drag", this.handleMove); + } let isDragging = this.state === "dragging"; this.state = "none"; - let updating = this.selectedRoutePoint != null || this.selectedRouteSegments.length !== 0; - if (!updating && isDragging) { + + if (!isUpdating && isDragging) { // regular map pan return; } let latlng = this.getSnappingForRoute(event.lngLat); - if (!updating && !isDragging) { + if (!isUpdating && !isDragging) { // new point this.addPointToEndOfRoute(latlng); return; @@ -411,4 +425,8 @@ export class RouteEditRouteInteraction { this.onRoutePointClick.emit(index); }); } + + private isMultiTouchEvent(event: Event): boolean { + return event instanceof TouchEvent && event.touches.length > 1; + } } \ No newline at end of file diff --git a/IsraelHiking.Web/sources/application/components/map/main-map.component.html b/IsraelHiking.Web/sources/application/components/map/main-map.component.html index cb8984ee5..cfb00d077 100644 --- a/IsraelHiking.Web/sources/application/components/map/main-map.component.html +++ b/IsraelHiking.Web/sources/application/components/map/main-map.component.html @@ -5,7 +5,7 @@
-