implement wheelAngle and wheelDirection params for iro.ColorPicker

README.md

@@ -143,6 +143,8 @@ var colorPicker = new iro.ColorPicker("#color-picker-container", {
 | `handleSvg`      | Custom handle SVG, used for [Custom Handles](https://iro.js.org/guide.html#custom-handles) | `null` |
 | `handleOrigin`   | Custom handle origin point, used for [Custom Handles](https://iro.js.org/guide.html#custom-handles). | `{x:0,y:0}` |
 | `wheelLightness` | If set to `false`, the color wheel will not fade to black when the lightness decreases. | `true` |
+| `wheelAngle`     | Starting angle of the color wheel's hue gradient, measured in degrees. | `0` |
+| `wheelDirection` | Direction of the color wheel's hue gradient, either `"clockwise"` or `"anticlockwise"` | `"anticlockwise"` |
 | `sliderHeight`   | Slider control height. By default this will be calculated automatically | `undefined` |
 | `sliderMargin`   | Distance between the wheel and the slider controls. | `12` |
 | `display`        | CSS display value for the color picker root element. | `"block"` |

docs/.vuepress/theme/ColorPicker.vue

@@ -20,6 +20,8 @@ export default {
         markerRadius: 8,
         borderWidth: 2,
         borderColor: "#fff",
+        wheelAngle: 120,
+        wheelDirection: "clockwise",
         width: 260,
         color: "#906bff",
         css: {

docs/colorPicker_api.md

@@ -67,6 +67,18 @@ If set to `false`, the color wheel will not fade to black when the lightness dec
 
 **Default value**: `true`
 
+### `wheelAngle`
+
+Starting angle of the color wheel's hue gradient, measured in degrees.
+
+**Default value**: `0`
+
+### `wheelDirection`
+
+Direction of the color wheel's hue gradient, either `"clockwise"` or `"anticlockwise"`.
+
+**Default value**: `"anticlockwise"`
+
 ### `sliderHeight`
 
 Slider height, measued in pixels.

docs/guide.md

@@ -90,6 +90,8 @@ var colorPicker = new iro.ColorPicker("#color-picker-container", {
 | `handleSvg`      | Custom handle SVG, used for [Custom Handles](#custom-handles) | `null` |
 | `handleOrigin`   | Custom handle origin point, used for [Custom Handles](#custom-handles). | `{x:0,y:0}` |
 | `wheelLightness` | If set to `false`, the color wheel will not fade to black when the lightness decreases. | `true` |
+| `wheelAngle`     | Starting angle of the color wheel's hue gradient, measured in degrees. | `0` |
+| `wheelDirection` | Direction of the color wheel's hue gradient, either `"clockwise"` or `"anticlockwise"` | `"anticlockwise"` |
 | `sliderHeight`   | Slider control height. By default this will be calculated automatically | `undefined` |
 | `sliderMargin`   | Distance between the wheel and the slider controls. | `12` |
 | `display`        | CSS display value for the color picker root element. | `"block"` |

index.html

@@ -17,6 +17,8 @@
         borderWidth: 2,
         padding: 8,
         wheelLightness: true,
+        wheelAngle: 270,
+        wheelDirection: 'anticlockwise',
         layout: [
           {
             component: iro.ui.Wheel,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jaames/iro",
-  "version": "4.3.3",
+  "version": "4.4.0",
   "description": "An HSV color picker widget for JavaScript, with a modern SVG-based user interface",
   "module": "dist/iro.es.js",
   "main": "dist/iro.js",

src/colorPicker.js

@@ -234,6 +234,8 @@ ColorPicker.defaultProps = {
   borderWidth: 0,
   display: 'block',
   wheelLightness: true,
+  wheelAngle: 0,
+  wheelDirection: 'anticlockwise',
   sliderHeight: null,
   sliderMargin: 12,
   padding: 6,