@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
332 lines • 13.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ScaleControlDirective = void 0;
const core_1 = require("@angular/core");
const leaflet_1 = require("leaflet");
const map_provider_1 = require("./map.provider");
const mouse_event_helper_1 = require("./mouse-event-helper");
const i0 = require("@angular/core");
const i1 = require("./map.provider");
/**
* Angular2 directive for the attribution-control of Leaflet.
*
* *You can use this directive in an Angular2 template after importing `YagaModule`.*
*
* How to use in a template:
* ```html
* <yaga-map>
* <yaga-scale-control
* [(display)]="..."
* [(zIndex)]="..."
* [(position)]="..."
*
* [metric]="..."
* [imperial]="..."
* [maxWidth]="..."
*
* (add)="..."
* (remove)="..."
* (click)="..."
* (dblclick)="..."
* (mousedown)="..."
* (mouseover)="..."
* (mouseout)="..."
* >
* </yaga-scale-control>
* </yaga-map>
* ```
*
* @link http://leafletjs.com/reference-1.2.0.html#control-scale Original Leaflet documentation
* @link https://leaflet-ng2.yagajs.org/latest/browser-test?grep=Scale-Control%20Directive Unit-Test
* @link https://leaflet-ng2.yagajs.org/latest/coverage/lcov-report/lib/attribution-control.directive.js.html
* Test coverage
* @link https://leaflet-ng2.yagajs.org/latest/typedoc/classes/scalecontroldirective.html API documentation
* @example https://leaflet-ng2.yagajs.org/latest/examples/scale-control-directive/
*/
class ScaleControlDirective extends leaflet_1.Control.Scale {
constructor(mapProvider) {
super();
this.mapProvider = mapProvider;
/**
* Two-Way bound property for the display status of the control.
* Use it with `<yaga-scale-control [(display)]="someValue">`
* or `<yaga-scale-control (displayChange)="processEvent($event)">`
*/
this.displayChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the zIndex of the control.
* Use it with `<yaga-scale-control [(zIndex)]="someValue">`
* or `<yaga-scale-control (zIndexChange)="processEvent($event)">`
*/
this.zIndexChange = new core_1.EventEmitter();
/**
* Two-Way bound property for the position of the control.
* Use it with `<yaga-scale-control [(position)]="someValue">`
* or `<yaga-scale-control (positionChange)="processEvent($event)">`
*/
this.positionChange = new core_1.EventEmitter();
/**
* From leaflet fired add event.
* Use it with `<yaga-scale-control (add)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-add Original Leaflet documentation
*/
this.addEvent = new core_1.EventEmitter();
/**
* From leaflet fired remove event.
* Use it with `<yaga-scale-control (remove)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-remove Original Leaflet documentation
*/
this.removeEvent = new core_1.EventEmitter();
/**
* From leaflet fired click event.
* Use it with `<yaga-scale-control (click)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-click Original Leaflet documentation
*/
this.clickEvent = new core_1.EventEmitter();
/**
* From leaflet fired dblclick event.
* Use it with `<yaga-scale-control (dblclick)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-dblclick Original Leaflet documentation
*/
this.dblclickEvent = new core_1.EventEmitter();
/**
* From leaflet fired mousedown event.
* Use it with `<yaga-scale-control (mousedown)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-mousedown Original Leaflet documentation
*/
this.mousedownEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseover event.
* Use it with `<yaga-scale-control (mouseover)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-mouseover Original Leaflet documentation
*/
this.mouseoverEvent = new core_1.EventEmitter();
/**
* From leaflet fired mouseout event.
* Use it with `<yaga-scale-control (mouseout)="processEvent($event)">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-mouseout Original Leaflet documentation
*/
this.mouseoutEvent = new core_1.EventEmitter();
this.mapProvider.ref.addControl(this);
// Events
this.getContainer().addEventListener("click", (event) => {
this.clickEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("dblclick", (event) => {
this.dblclickEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("mousedown", (event) => {
this.mousedownEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("mouseover", (event) => {
this.mouseoverEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
this.getContainer().addEventListener("mouseout", (event) => {
this.mouseoutEvent.emit(mouse_event_helper_1.enhanceMouseEvent(event, this._map));
});
}
/**
* Internal method to provide the removal of the control in Leaflet, when removing it from the Angular template
*/
ngOnDestroy() {
this.mapProvider.ref.removeControl(this);
}
/**
* Derived remove function
*/
remove() {
/* tslint:disable */
super.remove();
this.displayChange.emit(false);
this.removeEvent.emit({ target: this, type: "remove" });
return this;
}
/**
* Derived addTo function
*/
addTo(map) {
/* tslint:disable */
super.addTo(map);
this.displayChange.emit(true);
this.addEvent.emit({ target: this, type: "add" });
return this;
}
/**
* Derived method of the original setPosition.
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-setposition Original Leaflet documentation
*/
setPosition(val) {
super.setPosition(val);
this.positionChange.emit(val);
return this;
}
/**
* Two-Way bound property for the opacity.
* Use it with `<yaga-scale-control [(opacity)]="someValue">`
* or `<yaga-scale-control [opacity]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-opacity Original Leaflet documentation
*/
set opacity(val) {
if (typeof val === "number") {
this.getContainer().style.opacity = val.toString();
return;
}
this.getContainer().style.opacity = "";
}
get opacity() {
const val = this.getContainer().style.opacity;
if (typeof val === "string") {
return parseFloat(val);
}
return undefined;
}
/**
* Two-Way bound property for the display state.
* Use it with `<yaga-scale-control [(display)]="someValue">`
* or `<yaga-scale-control [display]="someValue">`
*/
set display(val) {
if (!this._map) {
// No map available...
return;
}
if (val) {
this.getContainer().style.display = "";
return;
}
this.getContainer().style.display = "none";
return;
}
get display() {
return !!this._map && this.getContainer().style.display !== "none";
}
/**
* Two-Way bound property for the position.
* Use it with `<yaga-scale-control [(position)]="someValue">`
* or `<yaga-scale-control [position]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-position Original Leaflet documentation
*/
set position(val) {
this.setPosition(val);
}
get position() {
return this.getPosition();
}
/**
* Two-Way bound property for the zIndex of the control.
* Use it with `<yaga-scale-control [(zIndex)]="someValue">`
* or `<yaga-scale-control (zIndexChange)="processEvent($event)">`
*/
set zIndex(zIndex) {
if (typeof zIndex === "number") {
this.getContainer().style.zIndex = zIndex.toString();
return;
}
this.getContainer().style.zIndex = "";
}
get zIndex() {
const val = this.getContainer().style.zIndex;
if (typeof val === "string") {
return parseInt(val, 10);
}
return undefined;
}
/**
* Input for scale max-width.
* Use it with `<yaga-scale-control [(maxWidth)]="someValue">`
* or `<yaga-scale-control [maxWidth]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-maxwidth Original Leaflet documentation
*/
set maxWidth(val) {
this.options.maxWidth = val;
this._update();
}
get maxWidth() {
return this.options.maxWidth;
}
/**
* Input for state of metric-scale state.
* Use it with `<yaga-scale-control [(metric)]="someValue">`
* or `<yaga-scale-control [metric]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-metric Original Leaflet documentation
*/
set metric(val) {
while (this.getContainer().hasChildNodes()) {
this.getContainer().removeChild(this.getContainer().lastChild);
}
this.options.metric = val;
this._addScales(this.options, "leaflet-control-scale-line", this.getContainer());
this._update();
}
get metric() {
return !!this.options.metric;
}
/**
* Input for state of imperial-scale state.
* Use it with `<yaga-scale-control [(imperial)]="someValue">`
* or `<yaga-scale-control [imperial]="someValue">`
* @link http://leafletjs.com/reference-1.2.0.html#control-scale-imperial Original Leaflet documentation
*/
set imperial(val) {
while (this.getContainer().hasChildNodes()) {
this.getContainer().removeChild(this.getContainer().lastChild);
}
this.options.imperial = val;
this._addScales(this.options, "leaflet-control-scale-line", this.getContainer());
this._update();
}
get imperial() {
return !!this.options.imperial;
}
}
exports.ScaleControlDirective = ScaleControlDirective;
ScaleControlDirective.ɵfac = function ScaleControlDirective_Factory(t) { return new (t || ScaleControlDirective)(i0.ɵɵdirectiveInject(i1.MapProvider)); };
ScaleControlDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ScaleControlDirective, selectors: [["yaga-scale-control"]], inputs: { opacity: "opacity", display: "display", position: "position", zIndex: "zIndex", maxWidth: "maxWidth", metric: "metric", imperial: "imperial" }, outputs: { displayChange: "displayChange", zIndexChange: "zIndexChange", positionChange: "positionChange", addEvent: "add", removeEvent: "remove", clickEvent: "click", dblclickEvent: "dblclick", mousedownEvent: "mousedown", mouseoverEvent: "mouseover", mouseoutEvent: "mouseout" }, features: [i0.ɵɵInheritDefinitionFeature] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ScaleControlDirective, [{
type: core_1.Directive,
args: [{
selector: "yaga-scale-control",
}]
}], function () { return [{ type: i1.MapProvider }]; }, { displayChange: [{
type: core_1.Output
}], zIndexChange: [{
type: core_1.Output
}], positionChange: [{
type: core_1.Output
}], addEvent: [{
type: core_1.Output,
args: ["add"]
}], removeEvent: [{
type: core_1.Output,
args: ["remove"]
}], clickEvent: [{
type: core_1.Output,
args: ["click"]
}], dblclickEvent: [{
type: core_1.Output,
args: ["dblclick"]
}], mousedownEvent: [{
type: core_1.Output,
args: ["mousedown"]
}], mouseoverEvent: [{
type: core_1.Output,
args: ["mouseover"]
}], mouseoutEvent: [{
type: core_1.Output,
args: ["mouseout"]
}], opacity: [{
type: core_1.Input
}], display: [{
type: core_1.Input
}], position: [{
type: core_1.Input
}], zIndex: [{
type: core_1.Input
}], maxWidth: [{
type: core_1.Input
}], metric: [{
type: core_1.Input
}], imperial: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=scale-control.directive.js.map