2 lines
7.7 KiB
JavaScript
2 lines
7.7 KiB
JavaScript
import e,{Component as t}from"react";import{classNames as n}from"primereact/utils";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function r(e,t){return r=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},r(e,t)}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&r(e,t)}function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function h(e,t){if(t&&("object"===u(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return s(e)}function l(e){return l=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},l(e)}function p(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var c,d,v,f=function(r){a(y,t);var u,c,d,v,f,m=(u=y,c=p(),function(){var e,t=l(u);if(c){var n=l(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return h(this,e)});function y(e){var t;return i(this,y),(t=m.call(this,e)).state={},t.radius=40,t.midX=50,t.midY=50,t.minRadians=4*Math.PI/3,t.maxRadians=-Math.PI/3,t.onClick=t.onClick.bind(s(t)),t.onMouseDown=t.onMouseDown.bind(s(t)),t.onMouseUp=t.onMouseUp.bind(s(t)),t.onTouchStart=t.onTouchStart.bind(s(t)),t.onTouchEnd=t.onTouchEnd.bind(s(t)),t.onMouseMove=t.onMouseMove.bind(s(t)),t.onTouchMove=t.onTouchMove.bind(s(t)),t}return d=y,(v=[{key:"updateValue",value:function(e,t){var n=Math.atan2(this.props.size/2-t,e-this.props.size/2),i=-Math.PI/2-Math.PI/6;this.updateModel(n,i)}},{key:"updateModel",value:function(e,t){var n;if(e>this.maxRadians)n=this.mapRange(e,this.minRadians,this.maxRadians,this.props.min,this.props.max);else{if(!(e<t))return;n=this.mapRange(e+2*Math.PI,this.minRadians,this.maxRadians,this.props.min,this.props.max)}if(this.props.onChange){var i=Math.round((n-this.props.min)/this.props.step)*this.props.step+this.props.min;this.props.onChange({value:i})}}},{key:"mapRange",value:function(e,t,n,i,o){return(e-t)*(o-i)/(n-t)+i}},{key:"onClick",value:function(e){this.props.disabled||this.props.readOnly||this.updateValue(e.nativeEvent.offsetX,e.nativeEvent.offsetY)}},{key:"onMouseDown",value:function(e){this.props.disabled||this.props.readOnly||(this.windowMouseMoveListener=this.onMouseMove,this.windowMouseUpListener=this.onMouseUp,window.addEventListener("mousemove",this.windowMouseMoveListener),window.addEventListener("mouseup",this.windowMouseUpListener),e.preventDefault())}},{key:"onMouseUp",value:function(e){this.props.disabled||this.props.readOnly||(window.removeEventListener("mousemove",this.windowMouseMoveListener),window.removeEventListener("mouseup",this.windowMouseUpListener),this.windowMouseMoveListener=null,this.windowMouseUpListener=null,e.preventDefault())}},{key:"onTouchStart",value:function(e){this.props.disabled||this.props.readOnly||(this.windowTouchMoveListener=this.onTouchMove,this.windowTouchEndListener=this.onTouchEnd,window.addEventListener("touchmove",this.windowTouchMoveListener,{passive:!1,cancelable:!1}),window.addEventListener("touchend",this.windowTouchEndListener))}},{key:"onTouchEnd",value:function(e){this.props.disabled||this.props.readOnly||(window.removeEventListener("touchmove",this.windowTouchMoveListener),window.removeEventListener("touchend",this.windowTouchEndListener),this.windowTouchMoveListener=null,this.windowTouchEndListener=null)}},{key:"onMouseMove",value:function(e){this.props.disabled||this.props.readOnly||(this.updateValue(e.offsetX,e.offsetY),e.preventDefault())}},{key:"onTouchMove",value:function(e){if(!this.props.disabled&&!this.props.readOnly&&1===e.touches.length){var t=this.element.getBoundingClientRect(),n=e.targetTouches.item(0);this.updateValue(n.clientX-t.left,n.clientY-t.top),e.preventDefault()}}},{key:"rangePath",value:function(){return"M ".concat(this.minX()," ").concat(this.minY()," A ").concat(this.radius," ").concat(this.radius," 0 1 1 ").concat(this.maxX()," ").concat(this.maxY())}},{key:"valuePath",value:function(){return"M ".concat(this.zeroX()," ").concat(this.zeroY()," A ").concat(this.radius," ").concat(this.radius," 0 ").concat(this.largeArc()," ").concat(this.sweep()," ").concat(this.valueX()," ").concat(this.valueY())}},{key:"zeroRadians",value:function(){return this.mapRange(this.props.min>0&&this.props.max>0?this.props.min:0,this.props.min,this.props.max,this.minRadians,this.maxRadians)}},{key:"valueRadians",value:function(){return this.mapRange(this.props.value,this.props.min,this.props.max,this.minRadians,this.maxRadians)}},{key:"minX",value:function(){return this.midX+Math.cos(this.minRadians)*this.radius}},{key:"minY",value:function(){return this.midY-Math.sin(this.minRadians)*this.radius}},{key:"maxX",value:function(){return this.midX+Math.cos(this.maxRadians)*this.radius}},{key:"maxY",value:function(){return this.midY-Math.sin(this.maxRadians)*this.radius}},{key:"zeroX",value:function(){return this.midX+Math.cos(this.zeroRadians())*this.radius}},{key:"zeroY",value:function(){return this.midY-Math.sin(this.zeroRadians())*this.radius}},{key:"valueX",value:function(){return this.midX+Math.cos(this.valueRadians())*this.radius}},{key:"valueY",value:function(){return this.midY-Math.sin(this.valueRadians())*this.radius}},{key:"largeArc",value:function(){return Math.abs(this.zeroRadians()-this.valueRadians())<Math.PI?0:1}},{key:"sweep",value:function(){return this.valueRadians()>this.zeroRadians()?0:1}},{key:"valueToDisplay",value:function(){return this.props.valueTemplate.replace("{value}",this.props.value.toString())}},{key:"render",value:function(){var t=this,i=n("p-knob p-component",{"p-disabled":this.props.disabled},this.props.className),o=this.props.showValue&&e.createElement("text",{x:50,y:57,textAnchor:"middle",fill:this.props.textColor,className:"p-knob-text",name:this.props.name},this.valueToDisplay());return e.createElement("div",{id:this.props.id,className:i,style:this.props.style,ref:function(e){return t.element=e}},e.createElement("svg",{viewBox:"0 0 100 100",width:this.props.size,height:this.props.size,onClick:this.onClick,onMouseDown:this.onMouseDown,onMouseUp:this.onMouseUp,onTouchStart:this.onTouchStart,onTouchEnd:this.onTouchEnd},e.createElement("path",{d:this.rangePath(),strokeWidth:this.props.strokeWidth,stroke:this.props.rangeColor,className:"p-knob-range"}),e.createElement("path",{d:this.valuePath(),strokeWidth:this.props.strokeWidth,stroke:this.props.valueColor,className:"p-knob-value"}),o))}}])&&o(d.prototype,v),f&&o(d,f),Object.defineProperty(d,"prototype",{writable:!1}),y}();v={id:null,style:null,className:null,value:null,size:100,disabled:!1,readOnly:!1,showValue:!0,step:1,min:0,max:100,strokeWidth:14,name:null,valueColor:"var(--primary-color, Black)",rangeColor:"var(--surface-d, LightGray)",textColor:"var(--text-color-secondary, Black)",valueTemplate:"{value}",onChange:null},(d="defaultProps")in(c=f)?Object.defineProperty(c,d,{value:v,enumerable:!0,configurable:!0,writable:!0}):c[d]=v;export{f as Knob};
|