add boxHeight option (#142), pass origin to input events (#140), miti…

…gate kelvin issue (#138)
jaames · Nov 24, 2020 · b149342 · b149342
1 parent 9b69398
commit b149342
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ### Changelog
 
+#### 5.3.0
+
+Added optional `boxHeight` option for setting the height of the box component. Added `id` option for all components, which will get passed to the `input:start`, `input:move` and `input:end` event callbacks as a second param (see https://github.com/jaames/iro.js/issues/140). Also mitigated an issue related to kelvin temperatures under 2000 (see https://github.com/jaames/iro.js/issues/138).
+
 #### 5.2.3
 
 Bumps iro-core version to fix server-side environment issues noted in https://github.com/jaames/iro.js/issues/131

diff --git a/demo/demo.js b/demo/demo.js
@@ -24,6 +24,12 @@ var colorPicker = new iro.ColorPicker("#demoWheel", {
       options: {
       }
     },
+    {
+      component: iro.ui.Box,
+      options: {
+        boxHeight: 60
+      }
+    },
     {
       component: iro.ui.Slider,
       options: {

diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -7,7 +7,7 @@ import { IroBox } from './Box';
 import { IroWheel } from './Wheel';
 import { IroColorPicker } from './ColorPicker';
 declare namespace iro {
-    const version = "5.2.3";
+    const version = "5.3.0";
     type Color = IroColor;
     const Color: typeof IroColor;
     type ColorPicker = IroColorPicker;

diff --git a/dist/iro.es.js b/dist/iro.es.js
@@ -1,5 +1,5 @@
 /*!
- * iro.js v5.2.3
+ * iro.js v5.3.0
  * 2016-2020 James Daniel
  * Licensed under MPL 2.0
  * github.com/jaames/iro.js
@@ -1293,7 +1293,7 @@ function IroBox(props) {
             h("pattern", { id: 'f' + uid, width: "100%", height: "100%" },
                 h("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: ("url(" + (resolveSvgUrl('#s' + uid)) + ")") }),
                 h("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: ("url(" + (resolveSvgUrl('#l' + uid)) + ")") }))),
-        h("rect", { rx: radius, ry: radius, x: props.borderWidth / 2, y: props.borderWidth / 2, width: width - props.borderWidth, height: height - props.borderWidth, "stroke-width": props.borderWidth, stroke: props.borderColor, fill: ("url(" + (resolveSvgUrl('#f' + uid)) + ")") }),
+        h("rect", { className: "IroBoxBg", rx: radius, ry: radius, x: props.borderWidth / 2, y: props.borderWidth / 2, width: width - props.borderWidth, height: height - props.borderWidth, "stroke-width": props.borderWidth, stroke: props.borderColor, fill: ("url(" + (resolveSvgUrl('#f' + uid)) + ")") }),
         colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }),
         h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); }));
 }
@@ -1650,7 +1650,7 @@ var IroColorPickerWidget = createWidget(IroColorPicker);
 
 var iro;
 (function (iro) {
-    iro.version = "5.2.3"; // replaced by @rollup/plugin-replace; see rollup.config.js
+    iro.version = "5.3.0"; // replaced by @rollup/plugin-replace; see rollup.config.js
     iro.Color = IroColor;
     iro.ColorPicker = IroColorPickerWidget;
     var ui;

diff --git a/dist/iro.js b/dist/iro.js
@@ -1,5 +1,5 @@
 /*!
- * iro.js v5.2.3
+ * iro.js v5.3.0
  * 2016-2020 James Daniel
  * Licensed under MPL 2.0
  * github.com/jaames/iro.js
@@ -1299,7 +1299,7 @@
               h("pattern", { id: 'f' + uid, width: "100%", height: "100%" },
                   h("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: ("url(" + (resolveSvgUrl('#s' + uid)) + ")") }),
                   h("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: ("url(" + (resolveSvgUrl('#l' + uid)) + ")") }))),
-          h("rect", { rx: radius, ry: radius, x: props.borderWidth / 2, y: props.borderWidth / 2, width: width - props.borderWidth, height: height - props.borderWidth, "stroke-width": props.borderWidth, stroke: props.borderColor, fill: ("url(" + (resolveSvgUrl('#f' + uid)) + ")") }),
+          h("rect", { className: "IroBoxBg", rx: radius, ry: radius, x: props.borderWidth / 2, y: props.borderWidth / 2, width: width - props.borderWidth, height: height - props.borderWidth, "stroke-width": props.borderWidth, stroke: props.borderColor, fill: ("url(" + (resolveSvgUrl('#f' + uid)) + ")") }),
           colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }),
           h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); }));
   }
@@ -1656,7 +1656,7 @@
 
   var iro;
   (function (iro) {
-      iro.version = "5.2.3"; // replaced by @rollup/plugin-replace; see rollup.config.js
+      iro.version = "5.3.0"; // replaced by @rollup/plugin-replace; see rollup.config.js
       iro.Color = IroColor;
       iro.ColorPicker = IroColorPickerWidget;
       var ui;

diff --git a/dist/iro.js.map b/dist/iro.js.map
diff --git a/dist/iro.min.js b/dist/iro.min.js
diff --git a/docs/.vuepress/theme/js/iro.es.js b/docs/.vuepress/theme/js/iro.es.js
@@ -1,5 +1,5 @@
 /*!
- * iro.js v5.2.3
+ * iro.js v5.3.0
  * 2016-2020 James Daniel
  * Licensed under MPL 2.0
  * github.com/jaames/iro.js
@@ -1293,7 +1293,7 @@ function IroBox(props) {
             h("pattern", { id: 'f' + uid, width: "100%", height: "100%" },
                 h("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: ("url(" + (resolveSvgUrl('#s' + uid)) + ")") }),
                 h("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: ("url(" + (resolveSvgUrl('#l' + uid)) + ")") }))),
-        h("rect", { rx: radius, ry: radius, x: props.borderWidth / 2, y: props.borderWidth / 2, width: width - props.borderWidth, height: height - props.borderWidth, "stroke-width": props.borderWidth, stroke: props.borderColor, fill: ("url(" + (resolveSvgUrl('#f' + uid)) + ")") }),
+        h("rect", { className: "IroBoxBg", rx: radius, ry: radius, x: props.borderWidth / 2, y: props.borderWidth / 2, width: width - props.borderWidth, height: height - props.borderWidth, "stroke-width": props.borderWidth, stroke: props.borderColor, fill: ("url(" + (resolveSvgUrl('#f' + uid)) + ")") }),
         colors.filter(function (color) { return color !== activeColor; }).map(function (color) { return (h(IroHandle, { isActive: false, index: color.index, fill: color.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[color.index].x, y: handlePositions[color.index].y })); }),
         h(IroHandle, { isActive: true, index: activeColor.index, fill: activeColor.hslString, r: props.handleRadius, url: props.handleSvg, props: props.handleProps, x: handlePositions[activeColor.index].x, y: handlePositions[activeColor.index].y }))); }));
 }
@@ -1650,7 +1650,7 @@ var IroColorPickerWidget = createWidget(IroColorPicker);
 
 var iro;
 (function (iro) {
-    iro.version = "5.2.3"; // replaced by @rollup/plugin-replace; see rollup.config.js
+    iro.version = "5.3.0"; // replaced by @rollup/plugin-replace; see rollup.config.js
     iro.Color = IroColor;
     iro.ColorPicker = IroColorPickerWidget;
     var ui;

diff --git a/docs/advanced.md b/docs/advanced.md
@@ -98,6 +98,12 @@ var colorPicker = new iro.ColorPicker('#picker', {
 });
 ```
 
+There's a few optional box-specific config options that can be used:
+
+| Option           | Purpose | Default Value |
+|:-----------------|:--------|:--------|
+| `boxHeight`      | Height of the box, measured in pixels. If this isn't set, it will use the box's width as its height | `null` |
+
 #### Sliders
 
 <ColorPicker :width="240" :handleRadius="8" :sliderMargin="12" layoutDirection="horizontal" :layout="[

diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@jaames/iro",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "description": "A moden, SVG-based color picker widget for JavaScript",
   "module": "dist/iro.es.js",
   "main": "dist/iro.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@irojs/iro-core": "^1.0.3",
+    "@irojs/iro-core": "^1.0.4",
     "preact": "^10.0.0"
   },
   "devDependencies": {

diff --git a/src/Box.tsx b/src/Box.tsx
@@ -77,7 +77,8 @@ export function IroBox(props: IroBoxProps) {
               <rect x="0" y="0" width="100%" height="100%" fill={`url(${resolveSvgUrl( '#l' + uid )})`}></rect>
             </pattern>
           </defs>
-          <rect 
+          <rect
+            className="IroBoxBg"
             rx={ radius } 
             ry={ radius } 
             x={ props.borderWidth / 2 }