@irojs/iro-core - npm Package Compare versions

Comparing version 1.0.5 to 1.1.0

dist/box.d.ts

 import { IroColor } from './color';
+import { CssGradientStops } from './css';
 import { IroColorPickerOptions } from './colorPickerOptions';
@@ -46,2 +47,2 @@ export interface BoxOptions extends IroColorPickerOptions {
  */
-export declare function getBoxGradients(props: Partial<BoxOptions>, color: IroColor): (string | number)[][][];
+export declare function getBoxGradients(props: Partial<BoxOptions>, color: IroColor): CssGradientStops[];

dist/index.d.ts

@@ -6,2 +6,3 @@ export * from './color';
 export * from './util';
+export * from './css';
 export * from './colorPickerOptions';

dist/iro-core.es.js

@@ -717,3 +717,3 @@ function _defineProperties(target, props) {
 
-  sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2 + borderWidth * 2;
+  sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2;
 
@@ -723,3 +723,3 @@ if (sliderShape === 'circle') {
       handleStart: props.padding + props.handleRadius,
-      handleRange: width - padding * 2 - handleRadius * 2 - borderWidth * 2,
+      handleRange: width - padding * 2 - handleRadius * 2,
       width: width,
@@ -961,12 +961,10 @@ height: width,
   var wheelAngle = props.wheelAngle;
-  var wheelDirection = props.wheelDirection;
+  var wheelDirection = props.wheelDirection; // inverted and clockwisee
 
-  if (!invert && wheelDirection === 'clockwise' || invert && wheelDirection === 'anticlockwise') {
-    angle = (invert ? 180 : 360) - (wheelAngle - angle);
-  } else {
-    angle = wheelAngle + angle;
-  } // javascript's modulo operator doesn't produce positive numbers with negative input
+  if (invert && wheelDirection === 'clockwise') angle = wheelAngle + angle; // clockwise (input handling)
+  else if (wheelDirection === 'clockwise') angle = 360 - wheelAngle + angle; // inverted and anticlockwise
+    else if (invert && wheelDirection === 'anticlockwise') angle = wheelAngle + 180 - angle; // anticlockwise (input handling)
+      else if (wheelDirection === 'anticlockwise') angle = wheelAngle - angle; // javascript's modulo operator doesn't produce positive numbers with negative input
   // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e
 
-
   return (angle % 360 + 360) % 360;
@@ -1171,2 +1169,20 @@ }
 
+function cssBorderStyles(props) {
+  return {
+    boxSizing: 'border-box',
+    border: props.borderWidth + "px solid " + props.borderColor
+  };
+}
+function cssGradient(type, direction, stops) {
+  return type + "-gradient(" + direction + ", " + stops.map(function (_ref) {
+    var o = _ref[0],
+        col = _ref[1];
+    return col + " " + o + "%";
+  }).join(',') + ")";
+}
+function cssValue(value) {
+  if (typeof value === 'string') return value;
+  return value + "px";
+}
+
 var iroColorPickerOptionDefaults = {
@@ -1195,3 +1211,3 @@ width: 300,
 
-export { IroColor, getBoxDimensions, getBoxGradients, getBoxHandlePosition, getBoxStyles, getBoxValueFromInput, getCurrentSliderValue, getHandleAtPoint, getSliderDimensions, getSliderGradient, getSliderGradientCoords, getSliderHandlePosition, getSliderStyles, getSliderValueFromInput, getSvgArcPath, getWheelDimensions, getWheelHandlePosition, getWheelValueFromInput, iroColorPickerOptionDefaults, resolveSvgUrl, sliderDefaultOptions, translateWheelAngle };
+export { IroColor, cssBorderStyles, cssGradient, cssValue, getBoxDimensions, getBoxGradients, getBoxHandlePosition, getBoxStyles, getBoxValueFromInput, getCurrentSliderValue, getHandleAtPoint, getSliderDimensions, getSliderGradient, getSliderGradientCoords, getSliderHandlePosition, getSliderStyles, getSliderValueFromInput, getSvgArcPath, getWheelDimensions, getWheelHandlePosition, getWheelValueFromInput, iroColorPickerOptionDefaults, resolveSvgUrl, sliderDefaultOptions, translateWheelAngle };
 //# sourceMappingURL=iro-core.es.js.map

dist/iro-core.js

@@ -717,3 +717,3 @@ function _defineProperties(target, props) {
 
-  sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2 + borderWidth * 2;
+  sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2;
 
@@ -723,3 +723,3 @@ if (sliderShape === 'circle') {
       handleStart: props.padding + props.handleRadius,
-      handleRange: width - padding * 2 - handleRadius * 2 - borderWidth * 2,
+      handleRange: width - padding * 2 - handleRadius * 2,
       width: width,
@@ -961,12 +961,10 @@ height: width,
   var wheelAngle = props.wheelAngle;
-  var wheelDirection = props.wheelDirection;
+  var wheelDirection = props.wheelDirection; // inverted and clockwisee
 
-  if (!invert && wheelDirection === 'clockwise' || invert && wheelDirection === 'anticlockwise') {
-    angle = (invert ? 180 : 360) - (wheelAngle - angle);
-  } else {
-    angle = wheelAngle + angle;
-  } // javascript's modulo operator doesn't produce positive numbers with negative input
+  if (invert && wheelDirection === 'clockwise') angle = wheelAngle + angle; // clockwise (input handling)
+  else if (wheelDirection === 'clockwise') angle = 360 - wheelAngle + angle; // inverted and anticlockwise
+    else if (invert && wheelDirection === 'anticlockwise') angle = wheelAngle + 180 - angle; // anticlockwise (input handling)
+      else if (wheelDirection === 'anticlockwise') angle = wheelAngle - angle; // javascript's modulo operator doesn't produce positive numbers with negative input
   // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e
 
-
   return (angle % 360 + 360) % 360;
@@ -1171,2 +1169,20 @@ }
 
+function cssBorderStyles(props) {
+  return {
+    boxSizing: 'border-box',
+    border: props.borderWidth + "px solid " + props.borderColor
+  };
+}
+function cssGradient(type, direction, stops) {
+  return type + "-gradient(" + direction + ", " + stops.map(function (_ref) {
+    var o = _ref[0],
+        col = _ref[1];
+    return col + " " + o + "%";
+  }).join(',') + ")";
+}
+function cssValue(value) {
+  if (typeof value === 'string') return value;
+  return value + "px";
+}
+
 var iroColorPickerOptionDefaults = {
@@ -1196,2 +1212,5 @@ width: 300,
 exports.IroColor = IroColor;
+exports.cssBorderStyles = cssBorderStyles;
+exports.cssGradient = cssGradient;
+exports.cssValue = cssValue;
 exports.getBoxDimensions = getBoxDimensions;
@@ -1198,0 +1217,0 @@ exports.getBoxGradients = getBoxGradients;

dist/iro-core.modern.js

@@ -701,3 +701,3 @@ function _extends() {
 
-  sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2 + borderWidth * 2;
+  sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2;
 
@@ -707,3 +707,3 @@ if (sliderShape === 'circle') {
       handleStart: props.padding + props.handleRadius,
-      handleRange: width - padding * 2 - handleRadius * 2 - borderWidth * 2,
+      handleRange: width - padding * 2 - handleRadius * 2,
       width: width,
@@ -949,12 +949,10 @@ height: width,
   const wheelAngle = props.wheelAngle;
-  const wheelDirection = props.wheelDirection;
+  const wheelDirection = props.wheelDirection; // inverted and clockwisee
 
-  if (!invert && wheelDirection === 'clockwise' || invert && wheelDirection === 'anticlockwise') {
-    angle = (invert ? 180 : 360) - (wheelAngle - angle);
-  } else {
-    angle = wheelAngle + angle;
-  } // javascript's modulo operator doesn't produce positive numbers with negative input
+  if (invert && wheelDirection === 'clockwise') angle = wheelAngle + angle; // clockwise (input handling)
+  else if (wheelDirection === 'clockwise') angle = 360 - wheelAngle + angle; // inverted and anticlockwise
+    else if (invert && wheelDirection === 'anticlockwise') angle = wheelAngle + 180 - angle; // anticlockwise (input handling)
+      else if (wheelDirection === 'anticlockwise') angle = wheelAngle - angle; // javascript's modulo operator doesn't produce positive numbers with negative input
   // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e
 
-
   return (angle % 360 + 360) % 360;
@@ -1160,2 +1158,16 @@ }
 
+function cssBorderStyles(props) {
+  return {
+    boxSizing: 'border-box',
+    border: `${props.borderWidth}px solid ${props.borderColor}`
+  };
+}
+function cssGradient(type, direction, stops) {
+  return `${type}-gradient(${direction}, ${stops.map(([o, col]) => `${col} ${o}%`).join(',')})`;
+}
+function cssValue(value) {
+  if (typeof value === 'string') return value;
+  return `${value}px`;
+}
+
 const iroColorPickerOptionDefaults = {
@@ -1184,3 +1196,3 @@ width: 300,
 
-export { IroColor, getBoxDimensions, getBoxGradients, getBoxHandlePosition, getBoxStyles, getBoxValueFromInput, getCurrentSliderValue, getHandleAtPoint, getSliderDimensions, getSliderGradient, getSliderGradientCoords, getSliderHandlePosition, getSliderStyles, getSliderValueFromInput, getSvgArcPath, getWheelDimensions, getWheelHandlePosition, getWheelValueFromInput, iroColorPickerOptionDefaults, resolveSvgUrl, sliderDefaultOptions, translateWheelAngle };
+export { IroColor, cssBorderStyles, cssGradient, cssValue, getBoxDimensions, getBoxGradients, getBoxHandlePosition, getBoxStyles, getBoxValueFromInput, getCurrentSliderValue, getHandleAtPoint, getSliderDimensions, getSliderGradient, getSliderGradientCoords, getSliderHandlePosition, getSliderStyles, getSliderValueFromInput, getSvgArcPath, getWheelDimensions, getWheelHandlePosition, getWheelValueFromInput, iroColorPickerOptionDefaults, resolveSvgUrl, sliderDefaultOptions, translateWheelAngle };
 //# sourceMappingURL=iro-core.modern.js.map

dist/iro-core.umd.js

@@ -722,3 +722,3 @@ (function (global, factory) {
 
-    sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2 + borderWidth * 2;
+    sliderSize = (_sliderSize = sliderSize) != null ? _sliderSize : padding * 2 + handleRadius * 2;
 
@@ -728,3 +728,3 @@ if (sliderShape === 'circle') {
         handleStart: props.padding + props.handleRadius,
-        handleRange: width - padding * 2 - handleRadius * 2 - borderWidth * 2,
+        handleRange: width - padding * 2 - handleRadius * 2,
         width: width,
@@ -966,12 +966,10 @@ height: width,
     var wheelAngle = props.wheelAngle;
-    var wheelDirection = props.wheelDirection;
+    var wheelDirection = props.wheelDirection; // inverted and clockwisee
 
-    if (!invert && wheelDirection === 'clockwise' || invert && wheelDirection === 'anticlockwise') {
-      angle = (invert ? 180 : 360) - (wheelAngle - angle);
-    } else {
-      angle = wheelAngle + angle;
-    } // javascript's modulo operator doesn't produce positive numbers with negative input
+    if (invert && wheelDirection === 'clockwise') angle = wheelAngle + angle; // clockwise (input handling)
+    else if (wheelDirection === 'clockwise') angle = 360 - wheelAngle + angle; // inverted and anticlockwise
+      else if (invert && wheelDirection === 'anticlockwise') angle = wheelAngle + 180 - angle; // anticlockwise (input handling)
+        else if (wheelDirection === 'anticlockwise') angle = wheelAngle - angle; // javascript's modulo operator doesn't produce positive numbers with negative input
     // https://dev.to/maurobringolf/a-neat-trick-to-compute-modulo-of-negative-numbers-111e
 
-
     return (angle % 360 + 360) % 360;
@@ -1176,2 +1174,20 @@ }
 
+  function cssBorderStyles(props) {
+    return {
+      boxSizing: 'border-box',
+      border: props.borderWidth + "px solid " + props.borderColor
+    };
+  }
+  function cssGradient(type, direction, stops) {
+    return type + "-gradient(" + direction + ", " + stops.map(function (_ref) {
+      var o = _ref[0],
+          col = _ref[1];
+      return col + " " + o + "%";
+    }).join(',') + ")";
+  }
+  function cssValue(value) {
+    if (typeof value === 'string') return value;
+    return value + "px";
+  }
+
   var iroColorPickerOptionDefaults = {
@@ -1201,2 +1217,5 @@ width: 300,
   exports.IroColor = IroColor;
+  exports.cssBorderStyles = cssBorderStyles;
+  exports.cssGradient = cssGradient;
+  exports.cssValue = cssValue;
   exports.getBoxDimensions = getBoxDimensions;
@@ -1203,0 +1222,0 @@ exports.getBoxGradients = getBoxGradients;

dist/slider.d.ts

 import { IroColor } from './color';
+import { CssGradientStops } from './css';
 import { IroColorPickerOptions } from './colorPickerOptions';
@@ -77,3 +78,3 @@ export declare type SliderShape = 'bar' | 'circle' | '';
  */
-export declare function getSliderGradient(props: Partial<SliderOptions>, color: IroColor): any[];
+export declare function getSliderGradient(props: Partial<SliderOptions>, color: IroColor): CssGradientStops;
 /**
@@ -80,0 +81,0 @@ * @desc Get the gradient coords for a slider

package.json

 {
   "name": "@irojs/iro-core",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Core functionality for iro.js",
@@ -5,0 +5,0 @@ "source": "src/index.ts",

No alert changes

Improved metrics

Total package byte prevSize

432846

increased by2.42%

Number of package files

24

increased by4.35%

Lines of code

4675

increased by1.7%

No dependency changes