{"version":3,"sources":["../../src/app/components/knob/knob.ts"],"names":["KNOB_VALUE_ACCESSOR","provide","NG_VALUE_ACCESSOR","useExisting","forwardRef","Knob","multi","cd","el","this","valueColor","rangeColor","textColor","valueTemplate","size","step","min","max","strokeWidth","showValue","readonly","onChange","EventEmitter","radius","midX","midY","minRadians","Math","PI","maxRadians","value","onModelChange","onModelTouched","prototype","mapRange","x","inMin","inMax","outMin","outMax","onClick","event","disabled","updateValue","offsetX","offsetY","dx","dy","angle","atan2","start","updateModel","mappedValue","newValue","round","emit","onMouseDown","windowMouseMoveListener","onMouseMove","bind","windowMouseUpListener","onMouseUp","window","addEventListener","preventDefault","removeEventListener","onTouchStart","windowTouchMoveListener","onTouchMove","windowTouchEndListener","onTouchEnd","touches","length","rect","nativeElement","children","getBoundingClientRect","touch","targetTouches","item","clientX","left","clientY","top","writeValue","markForCheck","registerOnChange","fn","registerOnTouched","setDisabledState","val","containerClass","p-knob p-component","p-disabled","rangePath","minX","minY","maxX","maxY","valuePath","zeroX","zeroY","largeArc","sweep","valueX","valueY","zeroRadians","valueRadians","_value","cos","sin","abs","valueToDisplay","replace","toString","Object","defineProperty","Component","args","selector","template","providers","changeDetection","ChangeDetectionStrategy","OnPush","encapsulation","ViewEncapsulation","None","ChangeDetectorRef","ElementRef","Input","Output","NgModule","imports","CommonModule","exports","declarations"],"mappings":"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","sourcesContent":["import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, forwardRef, ChangeDetectorRef, ElementRef, Output, EventEmitter} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport const KNOB_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => Knob),\n    multi: true\n};\n\n@Component({\n    selector: 'p-knob',\n    template: `\n        <div [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\">\n        <svg viewBox=\"0 0 100 100\" [style.width]=\"size + 'px'\" [style.height]=\"size + 'px'\" (click)=\"onClick($event)\" (mousedown)=\"onMouseDown($event)\" (mouseup)=\"onMouseUp($event)\"\n            (touchstart)=\"onTouchStart($event)\" (touchend)=\"onTouchEnd($event)\">\n            <path [attr.d]=\"rangePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"rangeColor\" class=\"p-knob-range\"></path>\n            <path [attr.d]=\"valuePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"valueColor\" class=\"p-knob-value\"></path>\n            <text *ngIf=\"showValue\" [attr.x]=\"50\" [attr.y]=\"57\" text-anchor=\"middle\" [attr.fill]=\"textColor\" class=\"p-knob-text\" [attr.name]=\"name\">{{valueToDisplay()}}</text>\n        </svg>\n        </div>\n    `,\n    providers: [KNOB_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./knob.css']\n})\nexport class Knob {\n\n    @Input() styleClass: string;\n\n    @Input() style: any;\n\n    @Input() severity: string;\n\n    @Input() valueColor: string = \"var(--primary-color, Black)\";\n\n    @Input() rangeColor: string = \"var(--surface-d, LightGray)\";\n\n    @Input() textColor: string = \"var(--text-color-secondary, Black)\";\n\n    @Input() valueTemplate: string = \"{value}\";\n\n    @Input() name: string;\n\n    @Input() size: number = 100;\n\n    @Input() step: number = 1;\n\n    @Input() min: number = 0;\n\n    @Input() max: number = 100;\n\n    @Input() strokeWidth: number = 14;\n\n    @Input() disabled: boolean;\n\n    @Input() showValue: boolean = true;\n\n    @Input() readonly: boolean = false;\n\n    @Output() onChange: EventEmitter<any> = new EventEmitter();\n\n    radius: number = 40;\n\n    midX: number = 50;\n\n    midY: number = 50;\n\n    minRadians: number = 4 * Math.PI / 3;\n\n    maxRadians: number = -Math.PI / 3;\n    \n    value: number = null;\n\n    windowMouseMoveListener: any;\n\n    windowMouseUpListener: any;\n\n    windowTouchMoveListener: any;\n\n    windowTouchEndListener: any;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    constructor(private cd: ChangeDetectorRef, private el: ElementRef) { }\n\n    mapRange(x, inMin, inMax, outMin, outMax) {\n        return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;\n    }\n\n    onClick(event) {\n        if (!this.disabled && !this.readonly) {\n            this.updateValue(event.offsetX, event.offsetY);\n        }\n    }\n\n    updateValue(offsetX, offsetY) {\n        let dx = offsetX - this.size / 2;\n        let dy =  this.size / 2 - offsetY;\n        let angle = Math.atan2(dy, dx);\n        let start = -Math.PI / 2 - Math.PI / 6;\n        this.updateModel(angle, start);\n    }\n\n    updateModel(angle, start) {\n        let mappedValue;\n        if (angle > this.maxRadians)\n            mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);\n        else if (angle < start)\n            mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);\n        else\n            return;\n\n        let newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;\n        this.value = newValue;\n        this.onModelChange(this.value);\n        this.onChange.emit(this.value);\n    }\n\n    onMouseDown(event) {\n        if (!this.disabled && !this.readonly) {\n            this.windowMouseMoveListener = this.onMouseMove.bind(this)\n            this.windowMouseUpListener = this.onMouseUp.bind(this)\n            window.addEventListener('mousemove', this.windowMouseMoveListener);\n            window.addEventListener('mouseup', this.windowMouseUpListener);\n            event.preventDefault();\n        }\n    }\n\n    onMouseUp(event) {\n        if (!this.disabled && !this.readonly) {\n            window.removeEventListener('mousemove', this.windowMouseMoveListener);\n            window.removeEventListener('mouseup', this.windowMouseUpListener);\n            this.windowMouseUpListener = null;\n            this.windowMouseMoveListener = null;\n            event.preventDefault();\n        }\n    }\n\n    onTouchStart(event) {\n        if (!this.disabled && !this.readonly) {\n            this.windowTouchMoveListener = this.onTouchMove.bind(this);\n            this.windowTouchEndListener = this.onTouchEnd.bind(this);\n            window.addEventListener('touchmove', this.windowTouchMoveListener);\n            window.addEventListener('touchend', this.windowTouchEndListener);\n            event.preventDefault();\n        }\n    }\n\n    onTouchEnd(event) {\n        if (!this.disabled && !this.readonly) {\n            window.removeEventListener('touchmove', this.windowTouchMoveListener);\n            window.removeEventListener('touchend', this.windowTouchEndListener);\n            this.windowTouchMoveListener = null;\n            this.windowTouchEndListener = null;\n            event.preventDefault();\n        }\n    }\n\n    onMouseMove(event) {\n        if (!this.disabled && !this.readonly) {\n            this.updateValue(event.offsetX, event.offsetY);\n            event.preventDefault();\n        }\n    }\n\n    onTouchMove(event) {\n        if (!this.disabled && !this.readonly && event.touches.length == 1) {\n            const rect = this.el.nativeElement.children[0].getBoundingClientRect();\n            const touch = event.targetTouches.item(0);\n            const offsetX = touch.clientX - rect.left;\n            const offsetY = touch.clientY - rect.top;\n            this.updateValue(offsetX, offsetY);\n        }\n    }\n\n    writeValue(value: any) : void {\n        this.value = value;\n        this.cd.markForCheck();\n    }\n\n    registerOnChange(fn: Function): void {\n        this.onModelChange = fn;\n    }\n\n    registerOnTouched(fn: Function): void {\n        this.onModelTouched = fn;\n    }\n\n    setDisabledState(val: boolean): void {\n        this.disabled = val;\n        this.cd.markForCheck();\n    }\n\n    containerClass() {\n        return {\n            'p-knob p-component': true,\n            'p-disabled': this.disabled\n        };\n    }\n\n    rangePath() {\n        return `M ${this.minX()} ${this.minY()} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX()} ${this.maxY()}`;\n    }\n\n    valuePath() {\n        return `M ${this.zeroX()} ${this.zeroY()} A ${this.radius} ${this.radius} 0 ${this.largeArc()} ${this.sweep()} ${this.valueX()} ${this.valueY()}`;\n    }\n\n    zeroRadians() {\n        if (this.min > 0 && this.max > 0)\n            return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);\n        else\n            return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);\n    }\n\n    valueRadians() {\n        return this.mapRange(this._value, this.min, this.max, this.minRadians, this.maxRadians);\n    }\n\n    minX() {\n        return this.midX + Math.cos(this.minRadians) * this.radius;\n    }\n\n    minY() {\n        return this.midY - Math.sin(this.minRadians) * this.radius;\n    }\n\n    maxX() {\n        return this.midX + Math.cos(this.maxRadians) * this.radius;\n    }\n\n    maxY() {\n        return this.midY - Math.sin(this.maxRadians) * this.radius;\n    }\n\n    zeroX() {\n        return this.midX + Math.cos(this.zeroRadians()) * this.radius;\n    }\n\n    zeroY() {\n        return this.midY - Math.sin(this.zeroRadians()) * this.radius;\n    }\n\n    valueX() {\n        return this.midX + Math.cos(this.valueRadians()) * this.radius;\n    }\n\n    valueY() {\n        return this.midY - Math.sin(this.valueRadians()) * this.radius;\n    }\n\n    largeArc() {\n        return Math.abs(this.zeroRadians() - this.valueRadians()) < Math.PI ? 0 : 1;\n    }\n\n    sweep() {\n        return this.valueRadians() > this.zeroRadians() ? 0 : 1;\n    }\n\n    valueToDisplay() {\n        return this.valueTemplate.replace(\"{value}\", this._value.toString());\n    }\n\n    get _value(): number {\n        return this.value != null ? this.value : this.min;\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [Knob],\n    declarations: [Knob]\n})\nexport class KnobModule { }\n"]}