react-dial-knob/dist/react-dial-knob.umd.core-only.min.js

Dial knob UI component for the web, based on pure HTML/SVG tags.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactDialKnob={},e.React)}(this,function(e,o){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(o),s=function(){return(s=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)},l=(n.prototype.updateFromProps=function(e){if(e.max<=e.min||e.max<e.min+e.step)throw Error("Max value should be bigger or equal to min+step value.");if(this.min=e.min,this.max=e.max,this.step=e.step,this.diameter=e.diameter,this.onAngleChange=e.onAngleChange||this.onAngleChange,this.onValueChange=e.onValueChange||this.onValueChange,this.onInteractionChange=e.onInteractionChange||this.onInteractionChange,this.spaceMaxFromZero=void 0===e.spaceMaxFromZero||e.spaceMaxFromZero,e.jumpLimit&&(this.jumpLimit=e.jumpLimit),e.value!==this.value&&(this.value=this.value<e.min||e.value<e.min?e.min:e.max<this.value||e.max<e.value?e.max:e.value,this.angle=this.angleFromValue(this.value)),this.value%this.step||(this.max-this.min)%this.step)throw Error("Value and (max - min) should be divisible by step.")},Object.defineProperty(n.prototype,"angle",{get:function(){return this._angle},set:function(e){this._angle!==e&&(this._angle=e,this.onAngleChange&&this.onAngleChange(this._angle))},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"value",{get:function(){return this._value},set:function(e){e=this.getValueWithinJumpLimit(e);this._value!==e&&(this._value=e,this.onValueChange&&this.onValueChange(this._value))},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"isInteracting",{get:function(){return this._isInteracting},set:function(e){this._isInteracting!==e&&(this._isInteracting=e,this.onInteractionChange&&this.onInteractionChange(this._isInteracting))},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"numSteps",{get:function(){return(this.max-this.min)/this.step},enumerable:!1,configurable:!0}),Object.defineProperty(n.prototype,"valsDistribution",{get:function(){return this.spaceMaxFromZero?360/(this.numSteps+1):360/this.numSteps},enumerable:!1,configurable:!0}),n.prototype.getValueWithinJumpLimit=function(e){return this.jumpLimit&&Math.max(this.step,Math.ceil((this.max-this.min)*this.jumpLimit))<Math.abs(e-this.value)?.9*this.max<e&&this.value<this.min+.1*this.max?this.min:e<this.min+.1*this.max&&.9*this.max<this.value?this.max:this.value:e},n.prototype.getComputedTransformXY=function(e){if(!window.getComputedStyle||!e)return{x:0,y:0,scaleX:1,scaleY:1};var t=window.getComputedStyle(e),n=t.transform||t.webkitTransform;if(!n)return{x:0,y:0,scaleX:1,scaleY:1};e=n.match(/^matrix3d\((.+)\)$/);if(e){var t=parseFloat(e[1].split(", ")[0]),i=parseFloat(e[1].split(", ")[5]);return{x:parseFloat(e[1].split(", ")[12]),y:parseFloat(e[1].split(", ")[13]),scaleX:t,scaleY:i}}i=(e=n.match(/^matrix\((.+)\)$/))?parseFloat(e[1].split(", ")[0]):1,n=e?parseFloat(e[1].split(", ")[3]):1;return{x:e?parseFloat(e[1].split(", ")[4]):0,y:e?parseFloat(e[1].split(", ")[5]):0,scaleX:i,scaleY:n}},n.prototype.updateAreaLocation=function(e){for(var t,n,i=this.diameter/2,a=0,o=0,r=this.refElement.current,s=this.getComputedTransformXY(r);r;)"BODY"==r.tagName.toUpperCase()?(t=r.scrollLeft||document.documentElement.scrollLeft,n=r.scrollTop||document.documentElement.scrollTop,a+=r.offsetLeft-t+r.clientLeft,o+=r.offsetTop-n+r.clientTop):(a+=r.offsetLeft-r.scrollLeft+r.clientLeft,o+=r.offsetTop-r.scrollTop+r.clientTop),a+=s.x,o+=s.y,s=this.getComputedTransformXY(r=r.offsetParent);this._locationX=a+i,this._locationY=o+i,this._locationX+=e.pageX-e.clientX,this._locationY+=e.pageY-e.clientY},n.prototype.calcDegreeOfRotation=function(e,t){return Math.abs(180/Math.PI*Math.atan2(e-this._locationX,t-this._locationY)-180)},n.prototype.valueFromAngle=function(e){var n=this,i=this.min+e/(this.numSteps*this.valsDistribution)*(this.numSteps*this.step);return this.max+this.step/2<i?this.min:Array.from(Array(this.numSteps+1)).map(function(e,t){return n.min+t*n.step}).reduce(function(e,t){return Math.abs(t-i)<Math.abs(e-i)?t:e})},n.prototype.angleFromValue=function(e){return Math.ceil((e-this.min)/this.step*this.valsDistribution)},n.prototype.updateAngleValue=function(t,n){var i=this;requestAnimationFrame(function(){var e=i.calcDegreeOfRotation(t,n);i.value=i.valueFromAngle(e),i.angle=i.angleFromValue(i.value)})},n.prototype.addWindowEventListeners=function(e){this.isInteracting=!0,this.windowEventListeners[e].forEach(function(e){window.addEventListener(e[0],e[1])})},n.prototype.removeWindowEventListeners=function(e){this.isInteracting=!1,this.windowEventListeners[e].forEach(function(e){window.removeEventListener(e[0],e[1])})},n);function n(e,t){var i=this;this.handleOnMouseDown=function(e){i.addWindowEventListeners("mouse");var t=e.pageX,n=e.pageY;i.updateAreaLocation({pageX:t,pageY:n,clientX:e.clientX,clientY:e.clientY}),i.updateAngleValue(t,n)},this.handleOnMouseMove=function(e){i.isInteracting&&i.updateAngleValue(e.pageX,e.pageY)},this.handleOnMouseUp=function(){i.removeWindowEventListeners("mouse")},this.handleOnTouchStart=function(e){var t,n;i.addWindowEventListeners("touch"),"changedTouches"in e&&1===e.changedTouches.length&&(i.updateAreaLocation({pageX:n=(t=e.changedTouches[0]).pageX,pageY:e=t.pageY,clientX:t.clientX,clientY:t.clientY}),i.updateAngleValue(n,e))},this.handleOnTouchMove=function(e){i.isInteracting&&"changedTouches"in e&&1===e.changedTouches.length&&i.updateAngleValue((e=e.changedTouches[0]).pageX,e.pageY)},this.handleOnTouchEnd=function(){i.removeWindowEventListeners("touch")},this.handleOnFocus=function(){i.isInteracting=!0},this.handleOnBlur=function(){i.isInteracting=!1},this.handleOnKeyDown=function(e){e=e.key||{38:"ArrowUp",40:"ArrowDown"}[e.keyCode];"ArrowUp"!==e||i.max<i.value+i.step?"ArrowDown"!==e||i.value-i.step<i.min||(i.value-=i.step,i.angle=i.angleFromValue(i.value)):(i.value+=i.step,i.angle=i.angleFromValue(i.value))},this.onAngleChange=t.onAngleChange,this.onValueChange=t.onValueChange,this.onInteractionChange=t.onInteractionChange,this._locationX=0,this._locationY=0,this.refElement=e,this._isInteracting=!1,this.windowEventListeners={mouse:[["mousemove",this.handleOnMouseMove],["mouseup",this.handleOnMouseUp]],touch:[["touchmove",this.handleOnTouchMove],["touchend",this.handleOnTouchEnd]]},this.updateFromProps(t)}function u(e){return console&&console.error(e.error),r.default.createElement("div",{style:{width:e.diameter+"px",height:e.diameter+"px",borderRadius:e.diameter/2+"px",position:"relative",outline:"none",boxSizing:"border-box",overflow:"hidden"}},r.default.createElement("div",{style:{fontSize:"22px",fontWeight:"bold",color:"red",textAlign:"center",width:"100%",height:"100%",position:"absolute",zIndex:999,paddingTop:"calc(50% - 0.5em)",background:"rgba(0, 0, 0, 0.2)",pointerEvents:"none"}},"💣"),e.children)}e.SkinWrap=function(e){var t=e.style||{},t=s(s({},{position:"relative",outline:"none",boxSizing:"border-box"}),t);return r.default.createElement("div",{style:t},e.children)},e.composeTwo=function(n,i){return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];n.apply(void 0,e),i&&i.apply(void 0,e)}},e.default=function(e){var t=(a=function(e){var t=o.useRef(null),n=o.useRef(null),i=null;try{n.current?n.current.updateFromProps(e):n.current=new l(t,e)}catch(e){i=e}return[t,n.current,i]}(e))[0],n=a[1],i=a[2],a=e.knobStyle||{},a=s(s({},{width:e.diameter+"px",height:e.diameter+"px",borderRadius:e.diameter/2+"px",position:"relative",outline:"none",boxSizing:"border-box",overflow:"hidden"}),a),a=r.default.createElement("div",{ref:t,onMouseDown:n&&n.handleOnMouseDown,onTouchStart:n&&n.handleOnTouchStart,onKeyDown:n&&n.handleOnKeyDown,onFocus:n&&n.handleOnFocus,onBlur:n&&n.handleOnBlur,style:a,tabIndex:0,"aria-valuenow":e.value,"aria-valuemin":e.min,"aria-valuemax":e.max,"aria-valuetext":e.ariaValueText,"aria-labelledby":e.ariaLabelledBy},e.children);return i?r.default.createElement(u,{error:i,diameter:e.diameter},a):a},e.useAngleUpdater=function(e){var t=o.useRef(0),n=o.useState(0),i=n[0],a=n[1];return o.useEffect(function(){a(t.current)},[t.current,e]),[i,function(e){t.current=e}]},Object.defineProperty(e,"__esModule",{value:!0})});