ngx-select-angle
Version:
A component for selecting an angle between 0 and 360 degrees in the Angular framework
1 lines • 12.4 kB
Source Map (JSON)
{"version":3,"file":"ngx-select-angle.mjs","sources":["../../../projects/ngx-select-angle/src/lib/ngx-select-angle.service.ts","../../../projects/ngx-select-angle/src/lib/ngx-select-angle.component.ts","../../../projects/ngx-select-angle/src/lib/ngx-select-angle.component.html","../../../projects/ngx-select-angle/src/lib/ngx-select-angle.module.ts","../../../projects/ngx-select-angle/src/public-api.ts","../../../projects/ngx-select-angle/src/ngx-select-angle.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable()\nexport class NgxSelectAngleService {\n constructor() {}\n\n getOffsetPosition(evt: MouseEvent | TouchEvent, parent: HTMLElement) {\n if (evt instanceof MouseEvent) {\n return {\n x: evt.offsetX,\n y: evt.offsetY,\n };\n }\n var position = {\n x: evt.targetTouches\n ? evt.targetTouches[0].pageX\n : evt.touches[0].clientX,\n y: evt.targetTouches\n ? evt.targetTouches[0].pageY\n : evt.touches[0].clientY,\n };\n\n while (parent.offsetParent) {\n position.x -= parent.offsetLeft - parent.scrollLeft;\n position.y -= parent.offsetTop - parent.scrollTop;\n\n parent = parent.offsetParent as any;\n }\n\n return position;\n }\n}\n","import {\n Component,\n ElementRef,\n HostListener,\n Input,\n OnInit,\n Renderer2,\n ViewChild,\n forwardRef,\n} from '@angular/core';\nimport {\n AbstractControl,\n ControlValueAccessor,\n FormControl,\n NG_VALIDATORS,\n NG_VALUE_ACCESSOR,\n ValidationErrors,\n Validator,\n Validators,\n} from '@angular/forms';\nimport { NgxSelectAngleService } from './ngx-select-angle.service';\n\n@Component({\n selector: 'ngx-select-angle',\n templateUrl: './ngx-select-angle.component.html',\n styleUrls: ['./ngx-select-angle.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NgxSelectAngleComponent),\n multi: true,\n },\n {\n provide: NG_VALIDATORS,\n useExisting: forwardRef(() => NgxSelectAngleComponent),\n multi: true,\n },\n ],\n})\nexport class NgxSelectAngleComponent\n implements ControlValueAccessor, OnInit, Validator\n{\n _size = 60;\n _color = '#1f2667';\n _strokeWidth = 2;\n _pointerWidth = 4;\n @Input() set size(s: number) {\n this._size = s ?? 60;\n }\n @Input() set strokeWidth(s: number) {\n this._strokeWidth = s ?? 2;\n }\n @Input() set pointerWidth(s: number) {\n this._pointerWidth = s ?? 4;\n }\n @Input() set color(s: string) {\n this._color = s ?? '#1f2667';\n }\n isDisabled = false;\n myControl = new FormControl([0, [Validators.min(0), Validators.max(360)]]);\n position = { x: 0, y: 0 };\n dragging = false;\n tooltip = '';\n _onChange = (value: any) => {};\n _onTouched = () => {};\n _validatorOnChange = () => {};\n\n @ViewChild('selectAngle', { static: true })\n selectAngle!: ElementRef<HTMLDivElement>;\n @ViewChild('pointer', { static: true })\n pointer!: ElementRef<HTMLDivElement>;\n constructor(\n // @Inject(DOCUMENT) private document: Document,\n private _selectAngleService: NgxSelectAngleService,\n private _renderer: Renderer2\n ) {}\n writeValue(value: any): void {\n this.myControl.setValue(+value);\n let deg = this.myControl.value;\n let transform = 'translateZ(0px) rotate(' + deg + 'deg)';\n this.tooltip = deg + '\\xb0';\n this._renderer.setStyle(this.pointer.nativeElement, 'transform', transform);\n }\n\n validate(control: AbstractControl): ValidationErrors | null {\n return this.myControl.errors;\n }\n registerOnValidatorChange?(fn: () => void): void {\n this._validatorOnChange = fn;\n }\n\n registerOnChange(fn: any): void {\n this._onChange = fn;\n }\n registerOnTouched(fn: any): void {\n this._onTouched = fn;\n }\n setDisabledState?(disabled: boolean): void {\n this.isDisabled = disabled;\n if (disabled) this.myControl.disable();\n else this.myControl.enable();\n }\n\n ngOnInit(): void {}\n\n /**\n * End dragging\n * on document mouse up\n * @param ev mouse event | touch event\n */\n @HostListener('document:mouseup', ['$event'])\n onMouseUp(ev: MouseEvent | TouchEvent) {\n this.dragging = false;\n }\n /**\n * End dragging\n * on document touch end\n * @param ev mouse event | touch event\n */\n @HostListener('document:touchend', ['$event'])\n onTouchEnd(ev: MouseEvent | TouchEvent) {\n this.dragging = false;\n }\n /**\n * Start dragging\n * on mouse or touch down\n * @param ev mouse event | touch event\n */\n onMouseDown(ev: MouseEvent | TouchEvent) {\n ev.preventDefault();\n ev.stopPropagation();\n this.position = this._selectAngleService.getOffsetPosition(\n ev,\n this.selectAngle.nativeElement\n );\n this.dragging = true;\n this.updateAngle();\n }\n\n /**\n * Move\n * on mouse or touch move\n * @param ev mouse event | touch event\n */\n onMouseMove(ev: MouseEvent | TouchEvent) {\n if (!this.dragging) {\n return;\n }\n\n ev.preventDefault();\n ev.stopPropagation();\n this.position = this._selectAngleService.getOffsetPosition(\n ev,\n this.selectAngle.nativeElement\n );\n this.updateAngle();\n }\n\n /**\n * get angle and update view\n */\n updateAngle() {\n let x2 = this.position.x;\n let y2 = this.position.y;\n let radians = Math.atan2(y2 - this._size / 2, x2 - this._size / 2);\n let e = radians * (180 / Math.PI);\n e = 90 + e;\n e < 0 && (e = 360 + e);\n e = Math.round(e);\n let transform = 'translateZ(0px) rotate(' + e + 'deg)';\n let deg = Math.round(e);\n this.tooltip = deg + '\\xb0';\n\n this.myControl.setValue(deg);\n // this.pointer.nativeElement.style.transform = transform;\n this._renderer.setStyle(this.pointer.nativeElement, 'transform', transform);\n this._onChange(deg);\n }\n}\n","<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","import { NgModule } from '@angular/core';\nimport { NgxSelectAngleComponent } from './ngx-select-angle.component';\nimport { NgxSelectAngleService } from './ngx-select-angle.service';\n\n\n\n@NgModule({\n declarations: [\n NgxSelectAngleComponent\n ],\n imports: [\n ],\n exports: [\n NgxSelectAngleComponent\n ],\n providers:[\n NgxSelectAngleService\n ]\n})\nexport class NgxSelectAngleModule { }\n","/*\n * Public API Surface of ngx-select-angle\n */\n\nexport * from './lib/ngx-select-angle.service';\nexport * from './lib/ngx-select-angle.component';\nexport * from './lib/ngx-select-angle.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}