Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@maslick/react-radiaslider
Advanced tools
@maslick/react-radiaslider - npm Package Compare versions
Comparing version 1.2.2 to 1.3.0
@@ -1,4 +0,837 @@ | ||
| parcelRequire=function(e,r,n,t){var i="function"==typeof parcelRequire&&parcelRequire,o="function"==typeof require&&require;function u(n,t){if(!r[n]){if(!e[n]){var f="function"==typeof parcelRequire&&parcelRequire;if(!t&&f)return f(n,!0);if(i)return i(n,!0);if(o&&"string"==typeof n)return o(n);var c=new Error("Cannot find module '"+n+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[n][1][r]||r},p.cache={};var l=r[n]=new u.Module(n);e[n][0].call(l.exports,p,l,l.exports,this)}return r[n].exports;function p(e){return u(p.resolve(e))}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.exports={}},u.modules=e,u.cache=r,u.parent=i,u.register=function(r,n){e[r]=[function(e,r){r.exports=n},{}]};for(var f=0;f<n.length;f++)u(n[f]);if(n.length){var c=u(n[n.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=c:"function"==typeof define&&define.amd?define(function(){return c}):t&&(this[t]=c)}return u}({"Focm":[function(require,module,exports) { | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=r(require("react")),d=r(require("prop-types")),t=require("@maslick/radiaslider");function r(e){return e&&e.__esModule?e:{default:e}}class i extends e.default.Component{renderBand(e,d,t,r,i,s,a){this.slider.addSlider({id:e,radius:d,min:t,max:r,color:s,changed:a})}render(){return e.default.createElement("div",{className:"slider"},e.default.createElement("canvas",{id:this.props.id,className:"graph",width:"400",height:"400"}),e.default.createElement("div",{id:this.props.id+"_value1",className:"dashboard",style:{background:"#104b63",color:"white"}}),e.default.createElement("div",{id:this.props.id+"_value2",className:"dashboard",style:{background:"#76c7e9",color:"white"}}),e.default.createElement("div",{id:this.props.id+"_value3",className:"dashboard",style:{background:"#ff9a9a",color:"white"}}),e.default.createElement("div",{id:this.props.id+"_value4",className:"dashboard",style:{background:"#fff69f",color:"black"}}))}componentDidMount(){this.slider=new t.circular({canvasId:this.props.id,continuousMode:"true"===this.props.continuousMode});const e=e=>"Angle: "+e.deg.toFixed(2)+" deg, value: "+e.value.toFixed(2);this.renderBand(1,50,-50,50,1,"#104b63",d=>{document.getElementById(`${this.props.id}_value1`).innerHTML=e(d)}),this.renderBand(2,90,-100,100,5,"#76c7e9",d=>{document.getElementById(`${this.props.id}_value2`).innerHTML=e(d)}),this.renderBand(3,130,0,360,.1,"#ff9a9a",d=>{document.getElementById(`${this.props.id}_value3`).innerHTML=e(d)}),this.renderBand(4,170,0,360,1,"#fff69f",d=>{document.getElementById(`${this.props.id}_value4`).innerHTML=e(d)}),this.slider.setSliderValue(1,34),this.slider.setSliderValue(2,70),this.slider.setSliderValue(3,307),this.slider.setSliderValue(4,307)}}i.propTypes={id:d.default.string.isRequired};var s=i;exports.default=s; | ||
| },{}]},{},["Focm"], null) | ||
| //# sourceMappingURL=/index.map | ||
| 'use strict'; | ||
| function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
| var React = _interopDefault(require('react')); | ||
| function _classCallCheck(instance, Constructor) { | ||
| if (!(instance instanceof Constructor)) { | ||
| throw new TypeError("Cannot call a class as a function"); | ||
| } | ||
| } | ||
| function _defineProperties(target, props) { | ||
| for (var i = 0; i < props.length; i++) { | ||
| var descriptor = props[i]; | ||
| descriptor.enumerable = descriptor.enumerable || false; | ||
| descriptor.configurable = true; | ||
| if ("value" in descriptor) descriptor.writable = true; | ||
| Object.defineProperty(target, descriptor.key, descriptor); | ||
| } | ||
| } | ||
| function _createClass(Constructor, protoProps, staticProps) { | ||
| if (protoProps) _defineProperties(Constructor.prototype, protoProps); | ||
| if (staticProps) _defineProperties(Constructor, staticProps); | ||
| return Constructor; | ||
| } | ||
| function _inherits(subClass, superClass) { | ||
| if (typeof superClass !== "function" && superClass !== null) { | ||
| throw new TypeError("Super expression must either be null or a function"); | ||
| } | ||
| subClass.prototype = Object.create(superClass && superClass.prototype, { | ||
| constructor: { | ||
| value: subClass, | ||
| writable: true, | ||
| configurable: true | ||
| } | ||
| }); | ||
| if (superClass) _setPrototypeOf(subClass, superClass); | ||
| } | ||
| function _getPrototypeOf(o) { | ||
| _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { | ||
| return o.__proto__ || Object.getPrototypeOf(o); | ||
| }; | ||
| return _getPrototypeOf(o); | ||
| } | ||
| function _setPrototypeOf(o, p) { | ||
| _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { | ||
| o.__proto__ = p; | ||
| return o; | ||
| }; | ||
| return _setPrototypeOf(o, p); | ||
| } | ||
| function _assertThisInitialized(self) { | ||
| if (self === void 0) { | ||
| throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); | ||
| } | ||
| return self; | ||
| } | ||
| function _possibleConstructorReturn(self, call) { | ||
| if (call && (typeof call === "object" || typeof call === "function")) { | ||
| return call; | ||
| } | ||
| return _assertThisInitialized(self); | ||
| } | ||
| function createCommonjsModule(fn, module) { | ||
| return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
| } | ||
| /** | ||
| * Copyright (c) 2013-present, Facebook, Inc. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
| var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; | ||
| var ReactPropTypesSecret_1 = ReactPropTypesSecret; | ||
| function emptyFunction() {} | ||
| var factoryWithThrowingShims = function() { | ||
| function shim(props, propName, componentName, location, propFullName, secret) { | ||
| if (secret === ReactPropTypesSecret_1) { | ||
| // It is still safe when called from React. | ||
| return; | ||
| } | ||
| var err = new Error( | ||
| 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + | ||
| 'Use PropTypes.checkPropTypes() to call them. ' + | ||
| 'Read more at http://fb.me/use-check-prop-types' | ||
| ); | ||
| err.name = 'Invariant Violation'; | ||
| throw err; | ||
| } shim.isRequired = shim; | ||
| function getShim() { | ||
| return shim; | ||
| } // Important! | ||
| // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. | ||
| var ReactPropTypes = { | ||
| array: shim, | ||
| bool: shim, | ||
| func: shim, | ||
| number: shim, | ||
| object: shim, | ||
| string: shim, | ||
| symbol: shim, | ||
| any: shim, | ||
| arrayOf: getShim, | ||
| element: shim, | ||
| instanceOf: getShim, | ||
| node: shim, | ||
| objectOf: getShim, | ||
| oneOf: getShim, | ||
| oneOfType: getShim, | ||
| shape: getShim, | ||
| exact: getShim | ||
| }; | ||
| ReactPropTypes.checkPropTypes = emptyFunction; | ||
| ReactPropTypes.PropTypes = ReactPropTypes; | ||
| return ReactPropTypes; | ||
| }; | ||
| var propTypes = createCommonjsModule(function (module) { | ||
| /** | ||
| * Copyright (c) 2013-present, Facebook, Inc. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
| { | ||
| // By explicitly using `prop-types` you are opting into new production behavior. | ||
| // http://fb.me/prop-types-in-prod | ||
| module.exports = factoryWithThrowingShims(); | ||
| } | ||
| }); | ||
| var sliderCircular = createCommonjsModule(function (module) { | ||
| (function () { | ||
| class Slider { | ||
| constructor(options) { | ||
| this.sliders = {}; | ||
| this.scaleWidth = 35; | ||
| this.fillWidth = 35; | ||
| this.knobWidth = 35; | ||
| this.startAngle = 1.5 * Math.PI + 0.000001; | ||
| this.endAngle = 1.5 * Math.PI - 0.000001; | ||
| this.continuousMode = options.continuousMode || false; | ||
| this.container = document.getElementById(options.canvasId); | ||
| this.the_body = document.body; | ||
| this.context = this.container.getContext('2d'); | ||
| this.x0 = options.x0 === undefined ? this.container.width / 2 : options.x0; | ||
| this.y0 = options.y0 === undefined ? this.container.height / 2 : options.y0; | ||
| this.MouseX = 0; | ||
| this.MouseY = 0; | ||
| this.selectedSlider = null; | ||
| this.currentSlider = null; | ||
| this.rotationEventListener = this._rotation.bind(this); | ||
| this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false); | ||
| this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false); | ||
| this.container.addEventListener('click', this._handleClick.bind(this), false); | ||
| this.container.addEventListener('touchstart', this._handleTouch.bind(this), false); | ||
| this.container.addEventListener('touchmove', this._handleMove.bind(this), false); | ||
| this.container.addEventListener('touchend', this._handleEnd.bind(this), false); | ||
| } | ||
| // Adds a slider band to the slider | ||
| addSlider(options) { | ||
| this.sliders[options.id] = { | ||
| id: options.id, | ||
| container: document.getElementById(options.container), | ||
| color: options.color || '#104b63', | ||
| min: options.min || 0, | ||
| max: options.max || 100, | ||
| radius: options.radius || 100, | ||
| startAngle: this.startAngle, | ||
| endAngle: this.endAngle, | ||
| onValueChangeCallback: options.changed || function (v) {}, | ||
| ang_degrees: 0, | ||
| normalizedValue: options.min || 0, | ||
| step: options.step || 1 | ||
| }; | ||
| const obj = this.sliders[options.id]; | ||
| this.setSliderValue(obj.id, options.min); | ||
| } | ||
| // Sets (draws) slider band value given the band id and value | ||
| setSliderValue(id, value) { | ||
| const slider = this.sliders[id]; | ||
| if (value <= slider.min) { | ||
| slider.endAngle = this.startAngle; | ||
| slider.ang_degrees = 0; | ||
| slider.normalizedValue = 0; | ||
| } else if (value >= slider.max) { | ||
| slider.endAngle = this.endAngle; | ||
| slider.ang_degrees = 360; | ||
| slider.normalizedValue = slider.max; | ||
| } else { | ||
| //value = (value / slider.step >> 0) * slider.step; | ||
| slider.endAngle = 2 * Math.PI * (value - slider.min) / (slider.max - slider.min) - Math.PI / 2; | ||
| slider.ang_degrees = Slider.radToDeg(Slider.normalizeTan(slider.endAngle)); | ||
| slider.normalizedValue = value; | ||
| } | ||
| this.drawAll(); | ||
| } | ||
| // Redraws everything | ||
| drawAll() { | ||
| this.context.clearRect(0, 0, this.container.width, this.container.height); | ||
| for (let key in this.sliders) { | ||
| if (!this.sliders.hasOwnProperty(key)) continue; | ||
| const obj = this.sliders[key]; | ||
| this.drawScale(obj); | ||
| this.drawData(obj); | ||
| this.drawArrow(obj); | ||
| this.drawKnob(obj); | ||
| obj.onValueChangeCallback({'rad': obj.endAngle, 'deg': obj.ang_degrees, 'value': obj.normalizedValue}); | ||
| } | ||
| this.drawCenterDot(); | ||
| } | ||
| // Draw the scale for a selected slider band | ||
| drawScale(slider) { | ||
| // Scale | ||
| for (let i = 0; i <= 2 * Math.PI; i += Math.PI / 6) { | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = '#eeeeee'; | ||
| this.context.arc(this.x0, this.y0, slider.radius, i, i + Math.PI / 4, false); | ||
| this.context.lineWidth = this.scaleWidth; | ||
| this.context.stroke(); | ||
| } | ||
| } | ||
| // Draw dot in the center | ||
| drawCenterDot () { | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = '#eeeeee'; | ||
| this.context.arc(this.x0, this.y0, this.scaleWidth/2, 0, Math.PI*2, false); | ||
| this.context.lineWidth = 1; | ||
| this.context.fillStyle = '#eeeeee'; | ||
| this.context.fill(); | ||
| } | ||
| // Draw the data on the selected slider band | ||
| drawData(slider) { | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = slider.color; | ||
| this.context.arc(this.x0, this.y0, slider.radius, slider.startAngle, slider.endAngle, false); | ||
| this.context.lineWidth = this.fillWidth; | ||
| this.context.stroke(); | ||
| } | ||
| // Draw tail arrow | ||
| drawArrow(slider) { | ||
| this.context.beginPath(); | ||
| this.context.moveTo(this.x0, this.y0 - slider.radius + this.scaleWidth / 2); | ||
| this.context.lineTo(this.x0, this.y0 - this.scaleWidth - slider.radius + this.scaleWidth / 2); | ||
| this.context.lineTo(this.x0 + this.scaleWidth / 4, this.y0 - this.scaleWidth / 2 - slider.radius + this.scaleWidth / 2); | ||
| this.context.fillStyle = "#eeeeee"; | ||
| this.context.fill(); | ||
| } | ||
| // Draw the knob (control element) | ||
| drawKnob(slider) { | ||
| // Knob | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = '#eb879c'; | ||
| this.context.arc( | ||
| Math.cos(slider.endAngle) * slider.radius + this.x0, | ||
| Math.sin(slider.endAngle) * slider.radius + this.y0, | ||
| this.knobWidth / 2, | ||
| 0, Math.PI * 2, false | ||
| ); | ||
| this.context.lineWidth = 1; | ||
| this.context.fillStyle = '#eb879c'; | ||
| this.context.fill(); | ||
| // Dot on the knob | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = 'yellow'; | ||
| this.context.arc( | ||
| Math.cos(slider.endAngle) * slider.radius + this.x0, | ||
| Math.sin(slider.endAngle) * slider.radius + this.y0, | ||
| this.scaleWidth / 10, | ||
| 0, Math.PI * 2, false | ||
| ); | ||
| this.context.lineWidth = 1; | ||
| this.context.fillStyle = 'yellow'; | ||
| this.context.fill(); | ||
| } | ||
| // Calculate angles given the cursor position | ||
| calculateAngles(x, y) { | ||
| if (!this.selectedSlider) return; | ||
| let max = this.selectedSlider.max, | ||
| min = this.selectedSlider.min, | ||
| step = this.selectedSlider.step, | ||
| endAngle = Math.atan2(y - this.y0, x - this.x0), | ||
| ang_degrees = Slider.radToDeg(Slider.normalizeTan(endAngle)), | ||
| normalizedValue = Slider.normalizeTan(endAngle) * (max - min) / (2 * Math.PI) + min; | ||
| normalizedValue = (normalizedValue / step >> 0) * step; | ||
| this.selectedSlider.endAngle = endAngle; | ||
| this.selectedSlider.ang_degrees = ang_degrees; | ||
| this.selectedSlider.normalizedValue = normalizedValue; | ||
| } | ||
| // Helper method | ||
| static radToDeg(ang) { | ||
| return ang * 180 / Math.PI; | ||
| } | ||
| // Normalizes tangent | ||
| static normalizeTan(ang) { | ||
| return ang + Math.PI / 2 > 0 ? ang + Math.PI / 2 : (2 * Math.PI + ang + Math.PI / 2); | ||
| } | ||
| // Calculates cursor coordinates | ||
| calculateUserCursor() { | ||
| const rect = this.container.getBoundingClientRect(); | ||
| if (event.touches) { | ||
| this.MouseX = event.touches[0].clientX - rect.left; | ||
| this.MouseY = event.touches[0].clientY - rect.top; | ||
| } else { | ||
| this.MouseX = event.clientX - rect.left; | ||
| this.MouseY = event.clientY - rect.top; | ||
| } | ||
| } | ||
| // Returns a slider band based on the cursor position | ||
| getSelectedSlider() { | ||
| this.calculateUserCursor(); | ||
| const hip = Math.sqrt(Math.pow(this.MouseX - this.x0, 2) + Math.pow(this.MouseY - this.y0, 2)); | ||
| let selectedSlider; | ||
| for (let key in this.sliders) { | ||
| if (!this.sliders.hasOwnProperty(key)) continue; | ||
| const obj = this.sliders[key]; | ||
| if (Math.abs(hip - obj.radius) <= this.scaleWidth / 2) { | ||
| selectedSlider = obj; | ||
| break; | ||
| } | ||
| } | ||
| return selectedSlider ? selectedSlider : null; | ||
| } | ||
| // Event handlers (mousedown, mouseup, mousemove, mouseclick, touches) | ||
| _handleMouseDown(event) { | ||
| event.preventDefault(); | ||
| this.selectedSlider = this.getSelectedSlider(); | ||
| if (!this.selectedSlider) return; | ||
| this.the_body.addEventListener('mousemove', this.rotationEventListener, false); | ||
| } | ||
| _handleMouseUp(event) { | ||
| event.preventDefault(); | ||
| this.the_body.removeEventListener('mousemove', this.rotationEventListener, false); | ||
| this.currentSlider = this.selectedSlider; | ||
| } | ||
| _handleClick(event) { | ||
| this.selectedSlider = this.getSelectedSlider(); | ||
| if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) return; | ||
| if (this.selectedSlider) this._rotation(); | ||
| } | ||
| _handleTouch(event) { | ||
| event.preventDefault(); | ||
| this.selectedSlider = this.getSelectedSlider(); | ||
| if (this.selectedSlider) this._rotation(); | ||
| } | ||
| _handleMove(event) { | ||
| event.preventDefault(); | ||
| if (this.continuousMode) this._rotation(); | ||
| else if (this.selectedSlider) this._rotation(); | ||
| } | ||
| _handleEnd(event) { | ||
| event.preventDefault(); | ||
| this.the_body.removeEventListener('mousemove', this.rotationEventListener, false); | ||
| } | ||
| // Rotation wrapper | ||
| _rotation() { | ||
| this.calculateUserCursor(); | ||
| if (this.continuousMode) this.selectedSlider = this.getSelectedSlider(); | ||
| this.calculateAngles(this.MouseX, this.MouseY); | ||
| this.drawAll(); | ||
| } | ||
| } | ||
| module.exports = Slider; | ||
| })(); | ||
| }); | ||
| var sliderLinear = createCommonjsModule(function (module) { | ||
| (function () { | ||
| class Slider { | ||
| constructor(options) { | ||
| this.sliders = {}; | ||
| this.scaleWidth = 35; | ||
| this.fillWidth = 35; | ||
| this.knobWidth = 35; | ||
| this.continuousMode = options.continuousMode || false; | ||
| this.vertical = options.vertical || false; | ||
| this.container = document.getElementById(options.canvasId); | ||
| this.the_body = document.body; | ||
| this.context = this.container.getContext('2d'); | ||
| this.MouseX = 0; | ||
| this.MouseY = 0; | ||
| this.selectedSlider = null; | ||
| this.currentSlider = null; | ||
| this.rotationEventListener = this._rotation.bind(this); | ||
| this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false); | ||
| this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false); | ||
| this.container.addEventListener('click', this._handleClick.bind(this), false); | ||
| this.container.addEventListener('touchstart', this._handleTouch.bind(this), false); | ||
| this.container.addEventListener('touchmove', this._handleMove.bind(this), false); | ||
| this.container.addEventListener('touchend', this._handleEnd.bind(this), false); | ||
| } | ||
| // Adds a slider band to the slider | ||
| addSlider(options) { | ||
| this.sliders[options.id] = { | ||
| id: options.id, | ||
| container: document.getElementById(options.container), | ||
| color: options.color || '#104b63', | ||
| width: options.width || 100, | ||
| min: options.min || 0, | ||
| max: options.max || 100, | ||
| step: options.step || 1, | ||
| x0: options.x0 || 0, | ||
| y0: options.y0 || 0, | ||
| onValueChangeCallback: options.changed || function (v) {}, | ||
| value: 0, | ||
| normalizedValue: options.min || 0 | ||
| }; | ||
| const obj = this.sliders[options.id]; | ||
| this.setSliderValue(obj.id, options.min); | ||
| } | ||
| // Sets (draws) slider band value given the band id and value | ||
| setSliderValue(id, value) { | ||
| const slider = this.sliders[id]; | ||
| if (value <= slider.min) { | ||
| slider.value = 0; | ||
| slider.normalizedValue = slider.min; | ||
| } else if (value >= slider.max) { | ||
| slider.value = slider.width; | ||
| slider.normalizedValue = slider.max; | ||
| } else { | ||
| slider.value = slider.width * (value - slider.min) / (slider.max - slider.min); | ||
| slider.normalizedValue = value; | ||
| } | ||
| this.drawAll(); | ||
| } | ||
| // Redraws everything | ||
| drawAll() { | ||
| this.context.clearRect(0, 0, this.container.width, this.container.height); | ||
| for (let key in this.sliders) { | ||
| if (!this.sliders.hasOwnProperty(key)) continue; | ||
| const obj = this.sliders[key]; | ||
| this.drawScale(obj); | ||
| this.drawData(obj); | ||
| this.drawKnob(obj); | ||
| obj.onValueChangeCallback({'width': obj.value, 'value': obj.normalizedValue}); | ||
| } | ||
| } | ||
| // Draw the scale for a selected slider band | ||
| drawScale(slider) { | ||
| let fix_x = this.vertical ? 0 : 1; | ||
| let fix_y = this.vertical ? 1 : 0; | ||
| // first rounded edge | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = slider.color; | ||
| this.context.arc(slider.x0 + fix_x, slider.y0 - fix_y, this.scaleWidth/2, 0, Math.PI*2, false); | ||
| this.context.lineWidth = 1; | ||
| this.context.fillStyle = slider.color; | ||
| this.context.fill(); | ||
| let x1, y1; | ||
| if (this.vertical) { | ||
| x1 = slider.x0; | ||
| y1 = slider.y0 - slider.width; | ||
| } | ||
| else { | ||
| x1 = slider.x0 + slider.width; | ||
| y1 = slider.y0; | ||
| } | ||
| // Scale | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = '#eeeeee'; | ||
| this.context.moveTo(slider.x0, slider.y0); | ||
| this.context.lineTo(x1, y1); | ||
| this.context.lineWidth = this.scaleWidth; | ||
| this.context.stroke(); | ||
| // second rounded edge | ||
| this.context.strokeStyle = '#eeeeee'; | ||
| this.context.arc(x1, y1, this.scaleWidth/2, 0, Math.PI*2, false); | ||
| this.context.lineWidth = 1; | ||
| this.context.fillStyle = '#eeeeee'; | ||
| this.context.fill(); | ||
| } | ||
| // Draw the data on the selected slider band | ||
| drawData(slider) { | ||
| let x1, y1; | ||
| if (this.vertical) { | ||
| x1 = slider.x0; | ||
| y1 = slider.y0 - slider.value; | ||
| } | ||
| else { | ||
| x1 = slider.x0 + slider.value; | ||
| y1 = slider.y0; | ||
| } | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = slider.color; | ||
| this.context.moveTo(slider.x0, slider.y0); | ||
| this.context.lineTo(x1, y1); | ||
| this.context.lineWidth = this.fillWidth; | ||
| this.context.stroke(); | ||
| } | ||
| // Draw the knob (control element) | ||
| drawKnob(slider) { | ||
| // Knob | ||
| let x1, y1; | ||
| if (this.vertical) { | ||
| x1 = slider.x0; | ||
| y1 = slider.y0 - slider.value; | ||
| } | ||
| else { | ||
| x1 = slider.x0 + slider.value; | ||
| y1 = slider.y0; | ||
| } | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = '#eb879c'; | ||
| this.context.arc( | ||
| x1, | ||
| y1, | ||
| this.knobWidth / 2, | ||
| 0, Math.PI * 2, false | ||
| ); | ||
| this.context.lineWidth = 1; | ||
| this.context.fillStyle = '#eb879c'; | ||
| this.context.fill(); | ||
| // Dot on the knob | ||
| this.context.beginPath(); | ||
| this.context.strokeStyle = 'yellow'; | ||
| this.context.arc( | ||
| x1, | ||
| y1, | ||
| this.scaleWidth / 10, | ||
| 0, Math.PI * 2, false | ||
| ); | ||
| this.context.lineWidth = 1; | ||
| this.context.fillStyle = 'yellow'; | ||
| this.context.fill(); | ||
| } | ||
| // Calculate angles given the cursor position | ||
| calculateValues(x, y) { | ||
| if (!this.selectedSlider) return; | ||
| let max = this.selectedSlider.max, | ||
| min = this.selectedSlider.min, | ||
| step = this.selectedSlider.step, | ||
| w = this.selectedSlider.width; | ||
| let x1; | ||
| x1 = this.vertical ? this.selectedSlider.y0 - y : x - this.selectedSlider.x0; | ||
| let val = x1; | ||
| if (val > this.selectedSlider.width - this.selectedSlider.step) val = this.selectedSlider.width; | ||
| if (val < 0 + this.selectedSlider.step) val = 0; | ||
| let nomval = (val * (max - min)) / (w) + min; | ||
| nomval = (nomval / step >> 0) * step; | ||
| this.selectedSlider.value = val; | ||
| this.selectedSlider.normalizedValue = nomval; | ||
| } | ||
| // Calculates cursor coordinates | ||
| calculateUserCursor() { | ||
| let rect = this.container.getBoundingClientRect(); | ||
| if (event.touches) { | ||
| this.MouseX = event.touches[0].clientX - rect.left; | ||
| this.MouseY = event.touches[0].clientY - rect.top; | ||
| } else { | ||
| this.MouseX = event.clientX - rect.left; | ||
| this.MouseY = event.clientY - rect.top; | ||
| } | ||
| } | ||
| // Returns a slider band based on the cursor position | ||
| getSelectedSlider() { | ||
| this.calculateUserCursor(); | ||
| let selectedSlider; | ||
| for (let key in this.sliders) { | ||
| if (!this.sliders.hasOwnProperty(key)) continue; | ||
| let obj = this.sliders[key]; | ||
| let xx; | ||
| let yy; | ||
| if (this.vertical) { | ||
| xx = this.MouseX >= obj.x0 - this.scaleWidth / 2 && this.MouseX <= obj.x0 + this.scaleWidth / 2; | ||
| yy = this.MouseY >= obj.y0 - obj.width - this.scaleWidth / 2 && this.MouseY <= obj.y0 + this.scaleWidth / 2; | ||
| } else { | ||
| xx = this.MouseX >= obj.x0 - this.scaleWidth / 2 && this.MouseX <= obj.x0 + obj.width + this.scaleWidth / 2; | ||
| yy = this.MouseY >= obj.y0 - this.scaleWidth / 2 && this.MouseY <= obj.y0 + this.scaleWidth / 2; | ||
| } | ||
| if (xx && yy) { | ||
| selectedSlider = obj; | ||
| break; | ||
| } | ||
| } | ||
| return selectedSlider ? selectedSlider : null; | ||
| } | ||
| // Event handlers (mousedown, mouseup, mousemove, mouseclick, touches) | ||
| _handleMouseDown(event) { | ||
| event.preventDefault(); | ||
| this.selectedSlider = this.getSelectedSlider(); | ||
| if (!this.selectedSlider) return; | ||
| this.the_body.addEventListener('mousemove', this.rotationEventListener, false); | ||
| } | ||
| _handleMouseUp(event) { | ||
| event.preventDefault(); | ||
| this.the_body.removeEventListener('mousemove', this.rotationEventListener, false); | ||
| this.currentSlider = this.selectedSlider; | ||
| } | ||
| _handleClick(event) { | ||
| this.selectedSlider = this.getSelectedSlider(); | ||
| if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) return; | ||
| if (this.selectedSlider) this._rotation(); | ||
| } | ||
| _handleTouch(event) { | ||
| event.preventDefault(); | ||
| this.selectedSlider = this.getSelectedSlider(); | ||
| if (this.selectedSlider) this._rotation(); | ||
| } | ||
| _handleMove(event) { | ||
| event.preventDefault(); | ||
| if (this.continuousMode) this._rotation(); | ||
| else if (this.selectedSlider) this._rotation(); | ||
| } | ||
| _handleEnd(event) { | ||
| event.preventDefault(); | ||
| this.the_body.removeEventListener('mousemove', this.rotationEventListener, false); | ||
| } | ||
| // Rotation wrapper | ||
| _rotation() { | ||
| this.calculateUserCursor(); | ||
| if (this.continuousMode) this.selectedSlider = this.getSelectedSlider(); | ||
| this.calculateValues(this.MouseX, this.MouseY); | ||
| this.drawAll(); | ||
| } | ||
| } | ||
| module.exports = Slider; | ||
| })(); | ||
| }); | ||
| var radiaslider = { | ||
| circular: sliderCircular, | ||
| linear: sliderLinear | ||
| }; | ||
| var radiaslider_1 = radiaslider.circular; | ||
| var RadiaSlider = | ||
| /*#__PURE__*/ | ||
| function (_React$Component) { | ||
| _inherits(RadiaSlider, _React$Component); | ||
| function RadiaSlider() { | ||
| _classCallCheck(this, RadiaSlider); | ||
| return _possibleConstructorReturn(this, _getPrototypeOf(RadiaSlider).apply(this, arguments)); | ||
| } | ||
| _createClass(RadiaSlider, [{ | ||
| key: "renderBand", | ||
| value: function renderBand(i, radius, min, max, step, color, changed) { | ||
| this.slider.addSlider({ | ||
| id: i, | ||
| radius: radius, | ||
| min: min, | ||
| max: max, | ||
| color: color, | ||
| changed: changed | ||
| }); | ||
| } | ||
| }, { | ||
| key: "render", | ||
| value: function render() { | ||
| return React.createElement("div", { | ||
| className: "slider" | ||
| }, React.createElement("canvas", { | ||
| id: this.props.id, | ||
| className: "graph", | ||
| width: "400", | ||
| height: "400" | ||
| }), React.createElement("div", { | ||
| id: this.props.id + "_value1", | ||
| className: "dashboard", | ||
| style: { | ||
| background: "#104b63", | ||
| color: "white" | ||
| } | ||
| }), React.createElement("div", { | ||
| id: this.props.id + "_value2", | ||
| className: "dashboard", | ||
| style: { | ||
| background: "#76c7e9", | ||
| color: "white" | ||
| } | ||
| }), React.createElement("div", { | ||
| id: this.props.id + "_value3", | ||
| className: "dashboard", | ||
| style: { | ||
| background: "#ff9a9a", | ||
| color: "white" | ||
| } | ||
| }), React.createElement("div", { | ||
| id: this.props.id + "_value4", | ||
| className: "dashboard", | ||
| style: { | ||
| background: "#fff69f", | ||
| color: "black" | ||
| } | ||
| })); | ||
| } | ||
| }, { | ||
| key: "componentDidMount", | ||
| value: function componentDidMount() { | ||
| var _this = this; | ||
| this.slider = new radiaslider_1({ | ||
| canvasId: this.props.id, | ||
| continuousMode: this.props.continuousMode === 'true' | ||
| }); | ||
| var callback = function callback(v) { | ||
| return "Angle: " + v.deg.toFixed(2) + " deg, value: " + v.value.toFixed(2); | ||
| }; | ||
| this.renderBand(1, 50, -50, 50, 1, "#104b63", function (v) { | ||
| document.getElementById("".concat(_this.props.id, "_value1")).innerHTML = callback(v); | ||
| }); | ||
| this.renderBand(2, 90, -100, 100, 5, "#76c7e9", function (v) { | ||
| document.getElementById("".concat(_this.props.id, "_value2")).innerHTML = callback(v); | ||
| }); | ||
| this.renderBand(3, 130, 0, 360, 0.1, "#ff9a9a", function (v) { | ||
| document.getElementById("".concat(_this.props.id, "_value3")).innerHTML = callback(v); | ||
| }); | ||
| this.renderBand(4, 170, 0, 360, 1, "#fff69f", function (v) { | ||
| document.getElementById("".concat(_this.props.id, "_value4")).innerHTML = callback(v); | ||
| }); | ||
| this.slider.setSliderValue(1, 34); | ||
| this.slider.setSliderValue(2, 70); | ||
| this.slider.setSliderValue(3, 307); | ||
| this.slider.setSliderValue(4, 307); | ||
| } | ||
| }]); | ||
| return RadiaSlider; | ||
| }(React.Component); | ||
| RadiaSlider.propTypes = { | ||
| id: propTypes.string.isRequired | ||
| }; | ||
| module.exports = RadiaSlider; |
| { | ||
| "name": "@maslick/react-radiaslider", | ||
| "version": "1.2.2", | ||
| "version": "1.3.0", | ||
| "description": "React component for radiaslider", | ||
@@ -27,22 +27,30 @@ "repository": { | ||
| "peerDependencies": { | ||
| "react": "^16.7.0" | ||
| "react": ">= 16.3.x", | ||
| "styled-jsx": ">= 2.x.x" | ||
| }, | ||
| "dependencies": { | ||
| "@maslick/radiaslider": "^1.5.0", | ||
| "dist": "^0.1.2", | ||
| "prop-types": "^15.6.2" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.0.1", | ||
| "@babel/preset-env": "^7.2.3", | ||
| "@babel/preset-react": "^7.0.0", | ||
| "cssnano": "^4.1.8", | ||
| "react": "^16.7.0", | ||
| "react-dom": "^16.7.0", | ||
| "parcel": "^1.11.0", | ||
| "babel-core": "^6.26.3", | ||
| "babel-preset-env": "^1.7.0", | ||
| "babel-preset-react": "^6.24.1", | ||
| "cssnano": "^4.1.8" | ||
| "rollup": "^1.1.0", | ||
| "rollup-plugin-babel": "^4.3.0", | ||
| "rollup-plugin-commonjs": "^9.2.0", | ||
| "rollup-plugin-node-resolve": "^4.0.0", | ||
| "rollup-plugin-replace": "^2.1.0", | ||
| "styled-jsx": "^3.1.3" | ||
| }, | ||
| "scripts": { | ||
| "start": "parcel index.html -d test", | ||
| "build": "rm -fr demo/ && parcel build index.html --public-url ./ --out-dir demo/", | ||
| "dist": "parcel build index.js --target node -d dist/" | ||
| "test": "parcel index.html --public-url ./ -d test/", | ||
| "demo": "rm -fr demo/ && parcel build index.html --public-url ./ --out-dir demo/", | ||
| "build:dev": "NODE_ENV=development rollup -c", | ||
| "build:prod": "NODE_ENV=production rollup -c" | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by184.85%
33011
- Lines of code
- increased by1075.38%
764
- Number of low quality alerts
- decreased by-100%
0
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dependency count
- increased by66.67%
5
- Dev dependency count
- increased by71.43%
12
- Number of package files
- decreased by-20%
4
Dependency changes
+ Addeddist@^0.1.2
+ Addedclient-only@0.0.1(transitive)
+ Addeddist@0.1.2(transitive)
+ Addedfilesize@1.6.7(transitive)
+ Addedoptimist@0.3.7(transitive)
+ Addedreact@18.3.1(transitive)
+ Addedstyled-jsx@5.1.6(transitive)
+ Addeduglify-js@1.3.5(transitive)
+ Addedwordwrap@0.0.3(transitive)
- Removedreact@16.14.0(transitive)