primereact/knob/knob.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

this.primereact=this.primereact||{},this.primereact.knob=function(e,t,n,a,r,o){"use strict";function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=l(t);function s(e){if(Array.isArray(e))return e}function c(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,r,o,l,i=[],s=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(a=o.call(n)).done)&&(i.push(a.value),i.length!==t);s=!0);}catch(e){c=!0,r=e}finally{try{if(!s&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw r}}return i}}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=new Array(t);n<t;n++)a[n]=e[n];return a}function f(e,t){if(e){if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(e,t):void 0}}function m(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function d(e,t){return s(e)||c(e,t)||f(e,t)||m()}var v=a.ComponentBase.extend({defaultProps:{__TYPE:"Knob",id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,tabIndex:0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-border, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null,children:void 0},css:{classes:{range:"p-knob-range",value:"p-knob-value",label:"p-knob-text",root:function(e){return o.classNames("p-knob p-component",{"p-disabled":e.props.disabled})}},styles:"\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "}}),p=40,h=4*Math.PI/3,b=-Math.PI/3,y=i.memo(i.forwardRef((function(e,t){var l=r.useMergeProps(),s=i.useContext(n.PrimeReactContext),c=v.getProps(e,s),u=v.setMetaData({props:c}),f=u.ptm,m=u.cx;a.useHandleStyle(v.css.styles,u.isUnstyled,{name:"knob"});var y=i.useRef(null),g=!c.disabled&&!c.readOnly,w=d(r.useEventListener({target:"window",type:"mousemove",listener:function(e){R(e.offsetX,e.offsetY),e.preventDefault()},when:g}),2),k=w[0],x=w[1],M=d(r.useEventListener({target:"window",type:"mouseup",listener:function(e){x(),E(),e.preventDefault()},when:g}),2),C=M[0],E=M[1],D=d(r.useEventListener({target:"window",type:"touchmove",listener:function(e){if(1===e.touches.length){var t=y.current.getBoundingClientRect(),n=e.targetTouches.item(0);R(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}},when:g}),2),P=D[0],O=D[1],A=d(r.useEventListener({target:"window",type:"touchend",listener:function(){O(),j()},when:g}),2),I=A[0],j=A[1],N=function(e,t,n,a,r){return(e-t)*(r-a)/(n-t)+a},L=function(){return N(c.min>0&&c.max>0?c.min:0,c.min,c.max,h,b)},S=function(){return N(c.value,c.min,c.max,h,b)},z="M ".concat(50+Math.cos(h)*p," ").concat(50-Math.sin(h)*p," A ").concat(p," ").concat(p," 0 1 1 ").concat(50+Math.cos(b)*p," ").concat(50-Math.sin(b)*p),T="M ".concat(50+Math.cos(L())*p," ").concat(50-Math.sin(L())*p," A ").concat(p," ").concat(p," 0 ").concat(Math.abs(L()-S())<Math.PI?0:1," ").concat(S()>L()?0:1," ").concat(50+Math.cos(S())*p," ").concat(50-Math.sin(S())*p),R=function(e,t){var n=Math.atan2(c.size/2-t,e-c.size/2),a=-Math.PI/2-Math.PI/6;_(n,a)},_=function(e,t){var n;if(e>b)n=N(e,h,b,c.min,c.max);else{if(!(e<t))return;n=N(e+2*Math.PI,h,b,c.min,c.max)}c.onChange&&c.onChange({value:Math.round((n-c.min)/c.step)*c.step+c.min})},B=function(e){var t;t=e>c.max?c.max:e<c.min?c.min:e,c.onChange&&c.onChange({value:t})},U=function(e){if(!c.disabled&&!c.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),B(c.value+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),B(c.value-1);break;case"Home":e.preventDefault(),B(c.min);break;case"End":e.preventDefault(),B(c.max);break;case"PageUp":e.preventDefault(),B(c.value+10);break;case"PageDown":e.preventDefault(),B(c.value-10)}};i.useImperativeHandle(t,(function(){return{props:c,getElement:function(){return y.current}}}));var W=l({x:50,y:57,textAnchor:"middle",fill:c.textColor,className:m("label"),name:c.name},f("label")),K=c.showValue&&i.createElement("text",W,c.valueTemplate.replace("{value}",c.value.toString())),Y=l({ref:y,id:c.id,className:o.classNames(c.className,m("root")),style:c.style},f("root")),H=l({viewBox:"0 0 100 100",width:c.size,height:c.size,"aria-valuemin":c.min,"aria-valuemax":c.max,"aria-valuenow":c.value,"aria-labelledby":c.ariaLabelledby,"aria-label":c.ariaLabel,role:"slider",tabIndex:c.readonly||c.disabled?-1:c.tabIndex,onClick:function(e){return t=e,void(c.disabled||c.readOnly||R(t.nativeEvent.offsetX,t.nativeEvent.offsetY));var t},onMouseDown:function(e){return t=e,k(),C(),void t.preventDefault();var t},onMouseUp:function(e){return x(),void E()},onTouchStart:function(e){return P(),void I()},onTouchEnd:function(e){return O(),void j()},onKeyDown:function(e){return U(e)}},f("svg")),X=l({d:z,strokeWidth:c.strokeWidth,stroke:c.rangeColor,className:m("range")},f("range")),V=l({d:T,strokeWidth:c.strokeWidth,stroke:c.valueColor,className:m("value")},f("value"));return i.createElement("div",Y,i.createElement("svg",H,i.createElement("path",X),i.createElement("path",V),K))})));return y.displayName="Knob",e.Knob=y,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.utils);