ngx-select-angle
Version:
A component for selecting an angle between 0 and 360 degrees in the Angular framework
238 lines (231 loc) • 11.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, forwardRef, Component, Input, ViewChild, HostListener, NgModule } from '@angular/core';
import { FormControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
class NgxSelectAngleService {
constructor() { }
getOffsetPosition(evt, parent) {
if (evt instanceof MouseEvent) {
return {
x: evt.offsetX,
y: evt.offsetY,
};
}
var position = {
x: evt.targetTouches
? evt.targetTouches[0].pageX
: evt.touches[0].clientX,
y: evt.targetTouches
? evt.targetTouches[0].pageY
: evt.touches[0].clientY,
};
while (parent.offsetParent) {
position.x -= parent.offsetLeft - parent.scrollLeft;
position.y -= parent.offsetTop - parent.scrollTop;
parent = parent.offsetParent;
}
return position;
}
}
NgxSelectAngleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgxSelectAngleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxSelectAngleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgxSelectAngleService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgxSelectAngleService, decorators: [{
type: Injectable
}], ctorParameters: function () { return []; } });
class NgxSelectAngleComponent {
constructor(
// @Inject(DOCUMENT) private document: Document,
_selectAngleService, _renderer) {
this._selectAngleService = _selectAngleService;
this._renderer = _renderer;
this._size = 60;
this._color = '#1f2667';
this._strokeWidth = 2;
this._pointerWidth = 4;
this.isDisabled = false;
this.myControl = new FormControl([0, [Validators.min(0), Validators.max(360)]]);
this.position = { x: 0, y: 0 };
this.dragging = false;
this.tooltip = '';
this._onChange = (value) => { };
this._onTouched = () => { };
this._validatorOnChange = () => { };
}
set size(s) {
this._size = s !== null && s !== void 0 ? s : 60;
}
set strokeWidth(s) {
this._strokeWidth = s !== null && s !== void 0 ? s : 2;
}
set pointerWidth(s) {
this._pointerWidth = s !== null && s !== void 0 ? s : 4;
}
set color(s) {
this._color = s !== null && s !== void 0 ? s : '#1f2667';
}
writeValue(value) {
this.myControl.setValue(+value);
let deg = this.myControl.value;
let transform = 'translateZ(0px) rotate(' + deg + 'deg)';
this.tooltip = deg + '\xb0';
this._renderer.setStyle(this.pointer.nativeElement, 'transform', transform);
}
validate(control) {
return this.myControl.errors;
}
registerOnValidatorChange(fn) {
this._validatorOnChange = fn;
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
setDisabledState(disabled) {
this.isDisabled = disabled;
if (disabled)
this.myControl.disable();
else
this.myControl.enable();
}
ngOnInit() { }
/**
* End dragging
* on document mouse up
* @param ev mouse event | touch event
*/
onMouseUp(ev) {
this.dragging = false;
}
/**
* End dragging
* on document touch end
* @param ev mouse event | touch event
*/
onTouchEnd(ev) {
this.dragging = false;
}
/**
* Start dragging
* on mouse or touch down
* @param ev mouse event | touch event
*/
onMouseDown(ev) {
ev.preventDefault();
ev.stopPropagation();
this.position = this._selectAngleService.getOffsetPosition(ev, this.selectAngle.nativeElement);
this.dragging = true;
this.updateAngle();
}
/**
* Move
* on mouse or touch move
* @param ev mouse event | touch event
*/
onMouseMove(ev) {
if (!this.dragging) {
return;
}
ev.preventDefault();
ev.stopPropagation();
this.position = this._selectAngleService.getOffsetPosition(ev, this.selectAngle.nativeElement);
this.updateAngle();
}
/**
* get angle and update view
*/
updateAngle() {
let x2 = this.position.x;
let y2 = this.position.y;
let radians = Math.atan2(y2 - this._size / 2, x2 - this._size / 2);
let e = radians * (180 / Math.PI);
e = 90 + e;
e < 0 && (e = 360 + e);
e = Math.round(e);
let transform = 'translateZ(0px) rotate(' + e + 'deg)';
let deg = Math.round(e);
this.tooltip = deg + '\xb0';
this.myControl.setValue(deg);
// this.pointer.nativeElement.style.transform = transform;
this._renderer.setStyle(this.pointer.nativeElement, 'transform', transform);
this._onChange(deg);
}
}
NgxSelectAngleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgxSelectAngleComponent, deps: [{ token: NgxSelectAngleService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
NgxSelectAngleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: NgxSelectAngleComponent, selector: "ngx-select-angle", inputs: { size: "size", strokeWidth: "strokeWidth", pointerWidth: "pointerWidth", color: "color" }, host: { listeners: { "document:mouseup": "onMouseUp($event)", "document:touchend": "onTouchEnd($event)" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxSelectAngleComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => NgxSelectAngleComponent),
multi: true,
},
], viewQueries: [{ propertyName: "selectAngle", first: true, predicate: ["selectAngle"], descendants: true, static: true }, { propertyName: "pointer", first: true, predicate: ["pointer"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n #selectAngle\r\n class=\"select-angle\"\r\n [title]=\"tooltip\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (touchstart)=\"onMouseDown($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n (touchmove)=\"onMouseMove($event)\"\r\n [style.width.px]=\"_size\"\r\n [style.height.px]=\"_size\"\r\n [style.borderColor]=\"_color\"\r\n [style.borderWidth.px]=\"_strokeWidth\"\r\n>\r\n <div class=\"pointer-container\" #pointer [style.width.px]=\"_pointerWidth\">\r\n <div\r\n class=\"angle-pointer\"\r\n [style.width.px]=\"_pointerWidth\"\r\n [style.height.px]=\"_pointerWidth\"\r\n [style.background]=\"_color\"\r\n ></div>\r\n </div>\r\n</div>\r\n", styles: [".select-angle{border:2px #1f2667 solid;position:relative;display:flex;align-items:center;justify-content:center;border-radius:100%;width:60px;height:60px}.select-angle .pointer-container{position:relative;width:6px;height:100%;pointer-events:none}.select-angle .pointer-container .angle-pointer{position:absolute;width:6px;height:6px;top:2px;border-radius:100%;background:#1f2667}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgxSelectAngleComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-select-angle', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxSelectAngleComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => NgxSelectAngleComponent),
multi: true,
},
], template: "<div\r\n #selectAngle\r\n class=\"select-angle\"\r\n [title]=\"tooltip\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (touchstart)=\"onMouseDown($event)\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n (touchmove)=\"onMouseMove($event)\"\r\n [style.width.px]=\"_size\"\r\n [style.height.px]=\"_size\"\r\n [style.borderColor]=\"_color\"\r\n [style.borderWidth.px]=\"_strokeWidth\"\r\n>\r\n <div class=\"pointer-container\" #pointer [style.width.px]=\"_pointerWidth\">\r\n <div\r\n class=\"angle-pointer\"\r\n [style.width.px]=\"_pointerWidth\"\r\n [style.height.px]=\"_pointerWidth\"\r\n [style.background]=\"_color\"\r\n ></div>\r\n </div>\r\n</div>\r\n", styles: [".select-angle{border:2px #1f2667 solid;position:relative;display:flex;align-items:center;justify-content:center;border-radius:100%;width:60px;height:60px}.select-angle .pointer-container{position:relative;width:6px;height:100%;pointer-events:none}.select-angle .pointer-container .angle-pointer{position:absolute;width:6px;height:6px;top:2px;border-radius:100%;background:#1f2667}\n"] }]
}], ctorParameters: function () { return [{ type: NgxSelectAngleService }, { type: i0.Renderer2 }]; }, propDecorators: { size: [{
type: Input
}], strokeWidth: [{
type: Input
}], pointerWidth: [{
type: Input
}], color: [{
type: Input
}], selectAngle: [{
type: ViewChild,
args: ['selectAngle', { static: true }]
}], pointer: [{
type: ViewChild,
args: ['pointer', { static: true }]
}], onMouseUp: [{
type: HostListener,
args: ['document:mouseup', ['$event']]
}], onTouchEnd: [{
type: HostListener,
args: ['document:touchend', ['$event']]
}] } });
class NgxSelectAngleModule {
}
NgxSelectAngleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgxSelectAngleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxSelectAngleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgxSelectAngleModule, declarations: [NgxSelectAngleComponent], exports: [NgxSelectAngleComponent] });
NgxSelectAngleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgxSelectAngleModule, providers: [
NgxSelectAngleService
], imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgxSelectAngleModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxSelectAngleComponent
],
imports: [],
exports: [
NgxSelectAngleComponent
],
providers: [
NgxSelectAngleService
]
}]
}] });
/*
* Public API Surface of ngx-select-angle
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxSelectAngleComponent, NgxSelectAngleModule, NgxSelectAngleService };
//# sourceMappingURL=ngx-select-angle.mjs.map