163 lines
4.5 KiB
JavaScript
163 lines
4.5 KiB
JavaScript
"use strict";
|
|
|
|
import {MapDriverInterface} from "../Interfaces/MapDriverInterface.ecma.js";
|
|
import {EventModel} from "../Models/EventModel.ecma.js";
|
|
|
|
/**
|
|
* @typedef {import("../Application/RoutesMaker.ecma.js").RoutesMaker} RoutesMaker
|
|
* @typedef {import("../Models/DotModel.ecma.js").DotModel} DotModel
|
|
*/
|
|
|
|
/**
|
|
* @class
|
|
* @constructor
|
|
* @param {!RoutesMaker} routes_maker
|
|
* @param {?(Object.<string, any|null>|Array.<any|null>)} [inputs = null]
|
|
* @returns {void}
|
|
* @access public
|
|
* @static
|
|
*/
|
|
export const LeafLetOSMDriver = (function(){
|
|
|
|
/**
|
|
* @constructs LeafLetOSMDriver
|
|
* @param {!RoutesMaker} routes_maker
|
|
* @param {?(Object.<string, any|null>|Array.<any|null>)} [inputs = null]
|
|
* @returns {void}
|
|
* @access public
|
|
* @static
|
|
*/
|
|
const LeafLetOSMDriver = function(routes_maker, inputs = null){
|
|
|
|
/** @type {LeafLetOSMDriver} */
|
|
const self = this;
|
|
|
|
/** @type {L.Map} */
|
|
this.map = null;
|
|
/** @type {HTMLElement} */
|
|
this.box = null;
|
|
|
|
/** @type {EventModel} */
|
|
this.on_click = new EventModel();
|
|
|
|
/**
|
|
* @returns {void}
|
|
* @access private
|
|
*/
|
|
const constructor = () => {
|
|
MapDriverInterface.check(self);
|
|
};
|
|
|
|
/**
|
|
* @param {!HTMLElement} box
|
|
* @returns {void}
|
|
* @access public
|
|
*/
|
|
this.build = box => {
|
|
|
|
/** @type {string} */
|
|
let id;
|
|
|
|
if(box.hasAttribute("id"))
|
|
id = box.getAttribute("id");
|
|
else
|
|
box.setAttribute("id", id = routes_maker.random_keys.get());
|
|
|
|
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom : 19,
|
|
attribution : '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(self.map = L.map(id).setView(routes_maker.get_user_coordenates(), 13));
|
|
routes_maker.base.on_change.add(_ => {
|
|
self.map.invalidateSize(true);
|
|
});
|
|
self.map.on("click", event => {
|
|
self.on_click.execute(event.latlng.lng, event.latlng.lat);
|
|
});
|
|
|
|
};
|
|
|
|
/**
|
|
* @param {!DotModel} dot
|
|
* @returns {void}
|
|
* @access public
|
|
*/
|
|
this.add_dot = dot => {
|
|
|
|
/** @type {[number, number]} */
|
|
const point = dot.get_point();
|
|
|
|
(dot.marker = L.marker(point, {draggable : true})).addTo(self.map);
|
|
self.redraw_dot_lines(dot);
|
|
|
|
dot.marker.on("click", event => {
|
|
dot.on_click.execute();
|
|
});
|
|
dot.marker.on("dragend", event => {
|
|
|
|
/** @type {L.LatLng} */
|
|
const coordenates = event.target.getLatLng();
|
|
|
|
dot.on_drop.execute(coordenates.lng, coordenates.lat);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
/**
|
|
* @param {!DotModel} dot
|
|
* @returns {void}
|
|
* @access public
|
|
*/
|
|
this.remove_dot_line = dot => {
|
|
if(dot.line){
|
|
self.map.removeLayer(dot.line);
|
|
dot.line = null;
|
|
};
|
|
};
|
|
|
|
/**
|
|
* @param {!DotModel} dot
|
|
* @returns {void}
|
|
* @access public
|
|
*/
|
|
this.remove_dot_lines = dot => {
|
|
dot.i && self.remove_dot_line(dot);
|
|
dot.i + 1 < dot.route.dots.length && self.remove_dot_line(dot.route.dots[dot.i + 1]);
|
|
};
|
|
|
|
/**
|
|
* @param {!DotModel} dot
|
|
* @returns {void}
|
|
* @access public
|
|
*/
|
|
this.redraw_dot_lines = dot => {
|
|
|
|
/** @type {[number, number]} */
|
|
const point = dot.get_point(),
|
|
/** @type {DotModel|null} */
|
|
previous = dot.i ? dot.route.dots[dot.i - 1] : null,
|
|
/** @type {DotModel|null} */
|
|
next = dot.i + 1 < dot.route.dots.length ? dot.route.dots[dot.i + 1] : null;
|
|
|
|
self.remove_dot_lines(dot);
|
|
previous && (dot.line = L.polyline([previous.get_point(), point])).addTo(self.map);
|
|
next && (next.line = L.polyline([point, next.get_point()])).addTo(self.map);
|
|
|
|
};
|
|
|
|
/**
|
|
* @param {!DotModel} dot
|
|
* @returns {void}
|
|
* @access public
|
|
*/
|
|
this.remove_dot = dot => {
|
|
self.remove_dot_lines(dot);
|
|
self.map.removeLayer(dot.marker);
|
|
};
|
|
|
|
constructor();
|
|
|
|
};
|
|
|
|
return LeafLetOSMDriver;
|
|
})(); |