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 u(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,u=!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){u=!0,r=e}finally{try{if(!s&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw r}}return i}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=Array(t);n<t;n++)a[n]=e[n];return a}function f(e,t){if(e){if("string"==typeof e)return c(e,t);var n={}.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)?c(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)||u(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                cursor: pointer;\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),u=v.getProps(e,s),c=v.setMetaData({props:u}),f=c.ptm,m=c.cx;a.useHandleStyle(v.css.styles,c.isUnstyled,{name:"knob"});var y=i.useRef(null),g=!u.disabled&&!u.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],A=D[1],I=d(r.useEventListener({target:"window",type:"touchend",listener:function(){A(),j()},when:g}),2),O=I[0],j=I[1],N=function(e,t,n,a,r){return(e-t)*(r-a)/(n-t)+a},L=function(){return N(u.min>0&&u.max>0?u.min:0,u.min,u.max,h,b)},S=function(){return N(u.value,u.min,u.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(u.size/2-t,e-u.size/2),a=-Math.PI/2-Math.PI/6;_(n,a)},_=function(e,t){var n;if(e>b)n=N(e,h,b,u.min,u.max);else{if(!(e<t))return;n=N(e+2*Math.PI,h,b,u.min,u.max)}u.onChange&&u.onChange({value:Math.round((n-u.min)/u.step)*u.step+u.min})},B=function(e){var t;t=e>u.max?u.max:e<u.min?u.min:e,u.onChange&&u.onChange({value:t})},U=function(e){if(!u.disabled&&!u.readonly)switch(e.code){case"ArrowRight":case"ArrowUp":e.preventDefault(),B(u.value+1);break;case"ArrowLeft":case"ArrowDown":e.preventDefault(),B(u.value-1);break;case"Home":e.preventDefault(),B(u.min);break;case"End":e.preventDefault(),B(u.max);break;case"PageUp":e.preventDefault(),B(u.value+10);break;case"PageDown":e.preventDefault(),B(u.value-10)}};i.useImperativeHandle(t,(function(){return{props:u,getElement:function(){return y.current}}}));var W=l({x:50,y:57,textAnchor:"middle",fill:u.textColor,className:m("label"),name:u.name},f("label")),K=u.showValue&&i.createElement("text",W,u.valueTemplate.replace("{value}",u.value.toString())),Y=l({ref:y,id:u.id,className:o.classNames(u.className,m("root")),style:u.style},f("root")),H=l({viewBox:"0 0 100 100",width:u.size,height:u.size,"aria-valuemin":u.min,"aria-valuemax":u.max,"aria-valuenow":u.value,"aria-labelledby":u.ariaLabelledby,"aria-label":u.ariaLabel,role:"slider",tabIndex:u.readonly||u.disabled?-1:u.tabIndex,onClick:function(e){return t=e,void(u.disabled||u.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 O()},onTouchEnd:function(e){return A(),void j()},onKeyDown:function(e){return U(e)}},f("svg")),X=l({d:z,strokeWidth:u.strokeWidth,stroke:u.rangeColor,className:m("range")},f("range")),V=l({d:T,strokeWidth:u.strokeWidth,stroke:u.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);