libre-routing
Version:
This library was generated with [Nx](https://nx.dev).
228 lines • 9.42 kB
JavaScript
import { featureCollection, point, } from '@turf/helpers';
import { LibreRoutingConsts } from '../../consts';
import { debounce } from 'lodash-es';
import { Dispatcher } from '../../utils/dispatcher';
const defaultConfig = {
calculateOnFly: true,
routeLayerIds: [LibreRoutingConsts.RouteLayerId],
waypointsLayerIds: [LibreRoutingConsts.WaypointsLayerId],
pointLayerId: 'route-point',
excludeWorkingLayerIds: [],
pointLayer: {
type: 'circle',
paint: {
'circle-radius': 3.4,
'circle-color': '#fff',
'circle-stroke-width': 4,
'circle-stroke-color': '#e207ff',
},
},
};
const resolveOptions = (ctx, options) => {
return Object.assign(Object.assign({}, options), { routeLayerIds: options.routeLayerIds.map((n) => ctx.getUniqueName(n)), waypointsLayerIds: options.waypointsLayerIds.map((n) => ctx.getUniqueName(n)), pointLayerId: ctx.getUniqueName(options.pointLayerId) });
};
export class MousePlugin {
constructor(options) {
this.mapMoveHandler = this.onMapMove.bind(this);
this.mapClickHandler = this.onMapClick.bind(this);
this.mousedownHandler = this.onMousedown.bind(this);
this.mouseupHandler = this.onMouseup.bind(this);
this.point = featureCollection([point([0, 0])]);
this.waypoints = [];
this.dragRoutePending = false;
this.recalculateDragHandler = debounce((waypointId) => {
this.dragRoutePending = true;
this.ctx.emitWaypointDirtyChanged(waypointId);
this.ctx
.recalculateRoute({ dragMode: true })
.catch((error) => {
if (error.message === 'No routes found') {
this.ctx.clearMap();
}
})
.finally(() => {
this.dragRoutePending = false;
});
}, 100, { maxWait: 300 });
this.recalculateHandler = debounce((waypointOrigin, emitStateChange) => {
return this.ctx
.recalculateRoute()
.catch((error) => {
if (error.message === 'No routes found') {
this.ctx.clearMap();
}
})
.finally(() => {
this.ctx.syncWaypointsPositions({ emitEvent: false });
if (emitStateChange) {
this.ctx.emitWaypointChanged(waypointOrigin);
}
});
}, 100, { maxWait: 300 });
this._dirty = false;
this.dispatcher = new Dispatcher();
this.options = Object.assign(Object.assign({}, defaultConfig), options);
}
set waypointOrigin(value) {
this._waypointOrigin = value;
this._dirty = !!(value === null || value === void 0 ? void 0 : value.toString());
this.fire('dirty', this._dirty);
}
get waypointOrigin() {
return this._waypointOrigin;
}
get dirty() {
return this._dirty;
}
onAdd(ctx) {
this.ctx = ctx;
this.map = ctx.map;
this.options = resolveOptions(ctx, this.options);
ctx.on('waypointsChanged', (waypoints) => (this.waypoints = waypoints));
this.map.addSource(this.options.pointLayerId, {
type: 'geojson',
data: this.point,
});
this.map.addLayer(Object.assign(Object.assign({}, this.options.pointLayer), { id: this.options.pointLayerId, source: this.options.pointLayerId }));
this.map.on('mousedown', this.mousedownHandler);
this.map.on('mouseup', this.mouseupHandler);
this.map.on('click', this.mapClickHandler);
this.map.on('mousemove', this.mapMoveHandler);
}
onRemove() {
this.map.off('mousedown', this.mousedownHandler);
this.map.off('mouseup', this.mouseupHandler);
this.map.off('click', this.mapClickHandler);
this.map.off('mousemove', this.mapMoveHandler);
}
onMapClick(e) {
const features = this.map.queryRenderedFeatures(e.point, {
layers: [
...this.options.routeLayerIds,
...this.options.excludeWorkingLayerIds,
],
});
if (features.find((f) => this.options.excludeWorkingLayerIds.includes(f.layer.id))) {
return;
}
const route = features.find((f) => f.source === this.ctx.options.routeSourceId);
if (route && !route.properties['selected']) {
this.ctx.selectRoute(route.properties.routeId);
return;
}
if (this.waypoints.length >= 2)
return;
// this.addWaypoint(
// e.lngLat.toArray() as LngLatPosition,
// this.waypoints.length - 1
// );
}
onMapMove(e) {
if (this.waypointOrigin != null) {
this.updateWaypoint(e.lngLat.toArray(), this.waypointOrigin, false);
return;
}
const features = this.map.queryRenderedFeatures(e.point, {
layers: [
...this.options.routeLayerIds,
...this.options.waypointsLayerIds,
...this.options.excludeWorkingLayerIds,
],
});
if (features.find((f) => this.options.excludeWorkingLayerIds.includes(f.layer.id))) {
return;
}
const waypoint = features.find(({ source }) => source === this.ctx.options.waypointsSourceId);
const route = features.find(({ source }) => source === this.ctx.options.routeSourceId);
if (waypoint) {
this.map.getCanvas().style.cursor = 'pointer';
this.map.setLayoutProperty(this.options.pointLayerId, 'visibility', 'none');
return;
}
if (!features.length || waypoint || !route) {
if (this.map.getLayoutProperty(this.options.pointLayerId, 'visibility') ===
'visible') {
this.map.setLayoutProperty(this.options.pointLayerId, 'visibility', 'none');
this.map.getCanvas().style.cursor = '';
}
return;
}
if (route.properties['selected']) {
if (this.map.getLayoutProperty(this.options.pointLayerId, 'visibility') !==
'visible') {
this.map.getCanvas().style.cursor = 'pointer';
this.map.setLayoutProperty(this.options.pointLayerId, 'visibility', 'visible');
}
this.point.features[0].geometry.coordinates = e.lngLat.toArray();
this.map.getSource(this.options.pointLayerId).setData(this.point);
return;
}
else {
this.map.getCanvas().style.cursor = 'pointer';
this.map.setLayoutProperty(this.options.pointLayerId, 'visibility', 'none');
}
}
onMousedown(e) {
const features = this.map.queryRenderedFeatures(e.point, {
layers: [
...this.options.routeLayerIds,
...this.options.waypointsLayerIds,
...this.options.excludeWorkingLayerIds,
],
});
if (!features.length ||
features.find((f) => this.options.excludeWorkingLayerIds.includes(f.layer.id))) {
return;
}
const waypoint = features.find((f) => f.source === this.ctx.options.waypointsSourceId);
if (waypoint) {
this.map.dragPan.disable();
this.waypointOrigin = waypoint.properties.id;
return;
}
const route = features.find((f) => f.source === this.ctx.options.routeSourceId);
if (route && route.properties.selected) {
this.map.dragPan.disable();
this.waypointOrigin = route.properties.waypoint + 1;
this.map.setLayoutProperty(this.options.pointLayerId, 'visibility', 'none');
this.addWaypoint(e.lngLat.toArray(), route.properties.waypoint + 1, true);
}
}
onMouseup(e) {
this.map.dragPan.enable();
this.map.setLayoutProperty(this.options.pointLayerId, 'visibility', 'none');
if (this.waypointOrigin != null) {
this.recalculateHandler(this.waypointOrigin, this.dragRoutePending);
if (!this.dragRoutePending) {
this.ctx.syncWaypointsPositions({ emitEvent: false });
this.ctx.emitWaypointChanged(this.waypointOrigin);
}
}
this.ctx.emitWaypointsChanged();
this.waypointOrigin = null;
}
fire(event, data) {
this.dispatcher.fire(event, data);
}
on(event, callback) {
this.dispatcher.on(event, callback);
}
off(event, callback) {
this.dispatcher.off(event, callback);
}
addWaypoint(pos, waypointId, emitEvent = false) {
this.ctx.addWaypoint({ position: pos, properties: { 'waypoint-type': 'middle' } }, waypointId, [0, 0], { emitEvent });
if (!this.dirty || this.options.calculateOnFly) {
this.recalculateHandler();
}
}
updateWaypoint(pos, waypointId, emitEvent = false) {
const updateResult = this.ctx.updateWaypoint({ position: pos }, waypointId, [0, 0], { emitEvent });
if (updateResult && (!this.dirty || this.options.calculateOnFly)) {
this.dragRoutePending = true;
this.recalculateDragHandler(waypointId);
}
return updateResult;
}
}
//# sourceMappingURL=mouse.plugin.js.map