129 lines
5.4 KiB
JavaScript
129 lines
5.4 KiB
JavaScript
"use strict";
|
|
var __extends = (this && this.__extends) || (function () {
|
|
var extendStatics = function (d, b) {
|
|
extendStatics = Object.setPrototypeOf ||
|
|
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
return extendStatics(d, b);
|
|
};
|
|
return function (d, b) {
|
|
extendStatics(d, b);
|
|
function __() { this.constructor = d; }
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
};
|
|
})();
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.AddButton = void 0;
|
|
var UIEventSource_1 = require("./UIEventSource");
|
|
var UIElement_1 = require("./UIElement");
|
|
var AddButton = /** @class */ (function (_super) {
|
|
__extends(AddButton, _super);
|
|
function AddButton(basemap, changes, options) {
|
|
var _this = _super.call(this, undefined) || this;
|
|
_this.curentAddSelection = new UIEventSource_1.UIEventSource("");
|
|
_this.SELECTING_POI = "selecting_POI";
|
|
_this.PLACING_POI = "placing_POI";
|
|
/*State is one of:
|
|
* "": the default stated
|
|
* "select_POI": show a 'select which POI to add' query (skipped if only one option exists)
|
|
* "placing_point": shown while adding a point
|
|
* ""
|
|
*/
|
|
_this.state = new UIEventSource_1.UIEventSource("");
|
|
_this.zoomlevel = basemap.Location;
|
|
_this.ListenTo(_this.zoomlevel);
|
|
_this._options = options;
|
|
_this.ListenTo(_this.curentAddSelection);
|
|
_this.ListenTo(_this.state);
|
|
_this.state.setData(_this.SELECTING_POI);
|
|
_this.changes = changes;
|
|
var self = _this;
|
|
basemap.map.on("click", function (e) {
|
|
var location = e.latlng;
|
|
console.log("Clicked at ", location);
|
|
self.HandleClick(location.lat, location.lng);
|
|
});
|
|
basemap.map.on("mousemove", function () {
|
|
if (self.state.data === self.PLACING_POI) {
|
|
var icon = "crosshair";
|
|
for (var _i = 0, _a = self._options; _i < _a.length; _i++) {
|
|
var option = _a[_i];
|
|
if (option.name === self.curentAddSelection.data && option.icon !== undefined) {
|
|
icon = 'url("' + option.icon + '") 32 32 ,crosshair';
|
|
console.log("Cursor icon: ", icon);
|
|
}
|
|
}
|
|
document.getElementById('leafletDiv').style.cursor = icon;
|
|
}
|
|
else {
|
|
// @ts-ignore
|
|
document.getElementById('leafletDiv').style.cursor = '';
|
|
}
|
|
});
|
|
return _this;
|
|
}
|
|
AddButton.prototype.HandleClick = function (lat, lon) {
|
|
this.state.setData(this.SELECTING_POI);
|
|
console.log("Handling click", lat, lon, this.curentAddSelection.data);
|
|
for (var _i = 0, _a = this._options; _i < _a.length; _i++) {
|
|
var option = _a[_i];
|
|
if (this.curentAddSelection.data === option.name) {
|
|
console.log("PLACING a ", option);
|
|
var feature = this.changes.createElement(option.tags, lat, lon);
|
|
option.layerToAddTo.AddNewElement(feature);
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
AddButton.prototype.InnerRender = function () {
|
|
if (this.zoomlevel.data.zoom < 19) {
|
|
return "Zoom in om een punt toe te voegen";
|
|
}
|
|
if (this.state.data === this.SELECTING_POI) {
|
|
var html = "<form>";
|
|
for (var _i = 0, _a = this._options; _i < _a.length; _i++) {
|
|
var option = _a[_i];
|
|
// <button type='button'> looks SO retarded
|
|
// the default type of button is 'submit', which performs a POST and page reload
|
|
html += "<button type='button' class='addPOIoption' value='" + option.name + "'>Voeg een " + option.name + " toe</button><br/>";
|
|
}
|
|
html += "</form>";
|
|
return html;
|
|
}
|
|
if (this.state.data === this.PLACING_POI) {
|
|
return "<div id='clickOnMapInstruction'>Klik op de kaart om een nieuw punt toe te voegen<div>" +
|
|
"<div id='cancelInstruction'>Klik hier om toevoegen te annuleren</div>";
|
|
}
|
|
if (this.curentAddSelection.data === "") {
|
|
return "<span onclick>Voeg een punt toe...</span>";
|
|
}
|
|
return "Annuleer";
|
|
};
|
|
AddButton.prototype.InnerUpdate = function (htmlElement) {
|
|
var self = this;
|
|
htmlElement.onclick = function (event) {
|
|
// @ts-ignore
|
|
if (event.consumed) {
|
|
return;
|
|
}
|
|
if (self.state.data === self.PLACING_POI) {
|
|
self.state.setData(self.SELECTING_POI);
|
|
}
|
|
};
|
|
var buttons = htmlElement.getElementsByClassName('addPOIoption');
|
|
var _loop_1 = function (button) {
|
|
button.onclick = function (event) {
|
|
self.curentAddSelection.setData(button.value);
|
|
self.state.setData(self.PLACING_POI);
|
|
event.consumed = true;
|
|
};
|
|
};
|
|
// @ts-ignore
|
|
for (var _i = 0, buttons_1 = buttons; _i < buttons_1.length; _i++) {
|
|
var button = buttons_1[_i];
|
|
_loop_1(button);
|
|
}
|
|
};
|
|
return AddButton;
|
|
}(UIElement_1.UIElement));
|
|
exports.AddButton = AddButton;
|