various fixes

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

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: {

dist/Box.d.ts

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { IroColor } from '@irojs/iro-core';
-import { IroComponentProps } from './ComponentBase';
+import { IroComponentProps } from './ComponentTypes';
 interface IroBoxProps extends IroComponentProps {
     colors: IroColor[];
 }

dist/ColorPicker.d.ts

@@ -101,7 +101,7 @@ export declare class IroColorPicker extends Component<ColorPickerProps, ColorPic
     render(props: any, state: any): h.JSX.Element;
 }
 export declare const IroColorPickerWidget: {
-    (parent: string | HTMLElement, props: any): any;
+    (parent: string | HTMLElement, props: Partial<ColorPickerProps>): IroColorPicker;
     prototype: any;
     __component: import("preact").ComponentType<{}>;
 };

dist/ComponentTypes.d.ts

@@ -0,0 +1,16 @@
+import { IroColor, IroColorPickerOptions } from '@irojs/iro-core';
+import { IroColorPicker } from './ColorPicker';
+export declare const enum IroInputType {
+    Start = 0,
+    Move = 1,
+    End = 2
+}
+export interface IroComponentProps extends IroColorPickerOptions {
+    parent: IroColorPicker;
+    index: number;
+    id?: string;
+    color: IroColor;
+    colors: IroColor[];
+    activeIndex?: number;
+    onInput: (type: IroInputType, id: string) => void;
+}

dist/ComponentWrapper.d.ts

@@ -0,0 +1,15 @@
+import { Component, h } from 'preact';
+import { IroInputType } from './ComponentTypes';
+interface Props {
+    onInput: (x: number, y: number, type: IroInputType) => void;
+}
+interface State {
+}
+export declare class IroComponentWrapper extends Component<Props, State> {
+    uid: string;
+    base: HTMLElement;
+    constructor(props: any);
+    render(props: any): h.JSX.Element;
+    handleEvent(e: MouseEvent & TouchEvent): void;
+}
+export {};

dist/Slider.d.ts

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { SliderShape, SliderType } from '@irojs/iro-core';
-import { IroComponentProps } from './ComponentBase';
+import { IroComponentProps } from './ComponentTypes';
 interface IroSliderProps extends IroComponentProps {
     sliderType: SliderType;
     sliderShape: SliderShape;

dist/Wheel.d.ts

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import { IroColor } from '@irojs/iro-core';
-import { IroComponentProps } from './ComponentBase';
+import { IroComponentProps } from './ComponentTypes';
 interface IroWheelProps extends IroComponentProps {
     colors: IroColor[];
 }

dist/createWidget.d.ts

@@ -1,6 +1,10 @@
 import { ComponentType } from 'preact';
-export declare function createWidget(WidgetComponent: ComponentType): {
-    (parent: string | HTMLElement, props: any): any;
+export interface Widget {
+    base?: Element | Text;
+    onMount: (root: Element) => void;
+}
+export declare function createWidget<C extends Widget, P>(WidgetComponent: ComponentType): {
+    (parent: string | HTMLElement, props: Partial<P>): C;
     prototype: any;
     __component: ComponentType<{}>;
 };

dist/index.d.ts

@@ -1,24 +1,24 @@
 import { h as _h } from 'preact';
 import { IroColor } from '@irojs/iro-core';
-import { IroComponentBase } from './ComponentBase';
+import { IroComponentWrapper } from './ComponentWrapper';
 import { IroHandle } from './Handle';
 import { IroSlider } from './Slider';
 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;
     const ColorPicker: {
-        (parent: string | HTMLElement, props: any): any;
+        (parent: string | HTMLElement, props: Partial<import("./ColorPicker").ColorPickerProps>): IroColorPicker;
         prototype: any;
         __component: import("preact").ComponentType<{}>;
     };
     namespace ui {
         const h: typeof _h;
-        const ComponentBase: typeof IroComponentBase;
+        const ComponentBase: typeof IroComponentWrapper;
         const Handle: typeof IroHandle;
         const Slider: typeof IroSlider;
         const Wheel: typeof IroWheel;

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
@@ -35,7 +35,7 @@ var REGEX_HEX_4 = new RegExp(HEX_START + HEX_INT_SINGLE + HEX_INT_SINGLE + HEX_I
 var REGEX_HEX_6 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$');
 var REGEX_HEX_8 = new RegExp(HEX_START + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + HEX_INT_DOUBLE + '$'); // Kelvin temperature bounds
 
-var KELVIN_MIN = 1000;
+var KELVIN_MIN = 2000;
 var KELVIN_MAX = 40000; // Math shorthands
 
 var log = Math.log;
@@ -1115,18 +1115,18 @@ var iroColorPickerOptionDefaults = {
 var SECONDARY_EVENTS = ["mousemove" /* MouseMove */, "touchmove" /* TouchMove */, "mouseup" /* MouseUp */, "touchend" /* TouchEnd */];
 // Base component class for iro UI components
 // This extends the Preact component class to allow them to react to mouse/touch input events by themselves
-var IroComponentBase = /*@__PURE__*/(function (Component) {
-    function IroComponentBase(props) {
+var IroComponentWrapper = /*@__PURE__*/(function (Component) {
+    function IroComponentWrapper(props) {
         Component.call(this, props);
         // Generate unique ID for the component
         // This can be used to generate unique IDs for gradients, etc
         this.uid = (Math.random() + 1).toString(36).substring(5);
     }
 
-    if ( Component ) IroComponentBase.__proto__ = Component;
-    IroComponentBase.prototype = Object.create( Component && Component.prototype );
-    IroComponentBase.prototype.constructor = IroComponentBase;
-    IroComponentBase.prototype.render = function render (props) {
+    if ( Component ) IroComponentWrapper.__proto__ = Component;
+    IroComponentWrapper.prototype = Object.create( Component && Component.prototype );
+    IroComponentWrapper.prototype.constructor = IroComponentWrapper;
+    IroComponentWrapper.prototype.render = function render (props) {
         var eventHandler = this.handleEvent.bind(this);
         var rootProps = {
             onMouseDown: eventHandler,
@@ -1149,7 +1149,7 @@ var IroComponentBase = /*@__PURE__*/(function (Component) {
     // More info on handleEvent:
     // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
     // TL;DR this lets us have a single point of entry for multiple events, and we can avoid callback/binding hell
-    IroComponentBase.prototype.handleEvent = function handleEvent (e) {
+    IroComponentWrapper.prototype.handleEvent = function handleEvent (e) {
         var this$1 = this;
 
         var inputHandler = this.props.onInput;
@@ -1184,7 +1184,7 @@ var IroComponentBase = /*@__PURE__*/(function (Component) {
         }
     };
 
-    return IroComponentBase;
+    return IroComponentWrapper;
 }(m));
 
 function IroHandle(props) {
@@ -1220,9 +1220,9 @@ function IroSlider(props) {
         var value = getSliderValueFromInput(props, x, y);
         props.parent.inputActive = true;
         activeColor[props.sliderType] = value;
-        props.onInput(type);
+        props.onInput(type, props.id);
     }
-    return (h(IroComponentBase, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("svg", Object.assign({}, rootProps, { className: "IroSlider", width: width, height: height, style: rootStyles }),
+    return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("svg", Object.assign({}, rootProps, { className: "IroSlider", width: width, height: height, style: rootStyles }),
         h("defs", null,
             h("linearGradient", Object.assign({ id: 'g' + uid }, getSliderGradientCoords(props)), gradient.map(function (ref) {
                 var offset = ref[0];
@@ -1265,7 +1265,7 @@ function IroBox(props) {
             else {
                 colorPicker.inputActive = true;
                 activeColor.hsv = getBoxValueFromInput(props, x, y);
-                props.onInput(inputType);
+                props.onInput(inputType, props.id);
             }
         }
         // move is fired when the user has started dragging
@@ -1274,9 +1274,9 @@ function IroBox(props) {
             activeColor.hsv = getBoxValueFromInput(props, x, y);
         }
         // let the color picker fire input:start, input:move or input:end events
-        props.onInput(inputType);
+        props.onInput(inputType, props.id);
     }
-    return (h(IroComponentBase, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("svg", Object.assign({}, rootProps, { className: "IroBox", width: width, height: height, style: rootStyles }),
+    return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("svg", Object.assign({}, rootProps, { className: "IroBox", width: width, height: height, style: rootStyles }),
         h("defs", null,
             h("linearGradient", { id: 's' + uid, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, gradients[0].map(function (ref) {
                 var offset = ref[0];
@@ -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 }))); }));
 }
@@ -1323,7 +1323,7 @@ function IroWheel(props) {
             else {
                 colorPicker.inputActive = true;
                 activeColor.hsv = getWheelValueFromInput(props, x, y);
-                props.onInput(inputType);
+                props.onInput(inputType, props.id);
             }
         }
         // move is fired when the user has started dragging
@@ -1332,9 +1332,9 @@ function IroWheel(props) {
             activeColor.hsv = getWheelValueFromInput(props, x, y);
         }
         // let the color picker fire input:start, input:move or input:end events
-        props.onInput(inputType);
+        props.onInput(inputType, props.id);
     }
-    return (h(IroComponentBase, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("svg", Object.assign({}, rootProps, { className: "IroWheel", width: width, height: width, style: rootStyles }),
+    return (h(IroComponentWrapper, Object.assign({}, props, { onInput: handleInput }), function (uid, rootProps, rootStyles) { return (h("svg", Object.assign({}, rootProps, { className: "IroWheel", width: width, height: width, style: rootStyles }),
         h("defs", null,
             h("radialGradient", { id: uid },
                 h("stop", { offset: "0%", "stop-color": "#fff" }),
@@ -1347,11 +1347,6 @@ function IroWheel(props) {
         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 }))); }));
 }
 
-// Turn a component into a widget
-// This returns a factory function that can be used to create an instance of the widget component
-// The first function param is a DOM element or CSS selector for the element to mount to,
-// The second param is for config options which are passed to the component as props
-// This factory function can also delay mounting the element into the DOM until the page is ready
 function createWidget(WidgetComponent) {
     var widgetFactory = function (parent, props) {
         var widget; // will become an instance of the widget component class
@@ -1599,15 +1594,15 @@ var IroColorPicker = /*@__PURE__*/(function (Component) {
      * @desc Handle input from a UI control element
      * @param type - event type
      */
-    IroColorPicker.prototype.emitInputEvent = function emitInputEvent (type) {
+    IroColorPicker.prototype.emitInputEvent = function emitInputEvent (type, originId) {
         if (type === 0 /* Start */) {
-            this.emit('input:start', this.color);
+            this.emit('input:start', this.color, originId);
         }
         else if (type === 1 /* Move */) {
-            this.emit('input:move', this.color);
+            this.emit('input:move', this.color, originId);
         }
         else if (type === 2 /* End */) {
-            this.emit('input:end', this.color);
+            this.emit('input:end', this.color, originId);
         }
     };
     IroColorPicker.prototype.render = function render (props, state) {
@@ -1655,13 +1650,13 @@ 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;
     (function (ui) {
         ui.h = h;
-        ui.ComponentBase = IroComponentBase;
+        ui.ComponentBase = IroComponentWrapper;
         ui.Handle = IroHandle;
         ui.Slider = IroSlider;
         ui.Wheel = IroWheel;