cx 26.4.0 → 26.4.2

package/src/widgets/form/ColorPicker.tsx

@@ -1,606 +1,606 @@
-/** @jsxImportSource react */
-import { Widget, VDOM } from "../../ui/Widget";
-import { Field, FieldConfig, FieldInstance } from "./Field";
-import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
-import { hslToRgb } from "../../util/color/hslToRgb";
-import { rgbToHsl } from "../../util/color/rgbToHsl";
-import { rgbToHex } from "../../util/color/rgbToHex";
-import { parseColor } from "../../util/color/parseColor";
-import { getVendorPrefix } from "../../util/getVendorPrefix";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { isString } from "../../util/isString";
-import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
-import PixelPickerIcon from "../icons/pixel-picker";
-import type { RenderingContext } from "../../ui/RenderingContext";
-import type { Instance } from "../../ui/Instance";
-import { StringProp } from "../../ui/Prop";
-
-// Type declaration for EyeDropper API
-declare global {
-  class EyeDropper {
-    open(): Promise<{ sRGBHex: string }>;
-  }
-  interface Window {
-    EyeDropper: typeof EyeDropper;
-  }
-}
-
-//TODO: Increase HSL precision in calculations, round only RGB values
-//TODO: Resolve alpha input problems
-
-interface ColorState {
-  r: number;
-  g: number;
-  b: number;
-  h: number;
-  s: number;
-  l: number;
-  a: number;
-}
-
-export interface ColorPickerConfig extends FieldConfig {
-  /** Either `rgba`, `hsla` or `hex` value of the selected color. */
-  value?: StringProp;
-
-  /** Format of the color representation. Either `rgba`, `hsla` or `hex`. */
-  format?: "rgba" | "hsla" | "hex";
-
-  /**
-   * A string containing the list of all events that cause that selected value is written to the store.
-   * Default value is `blur change` which means that changes are propagated immediately.
-   */
-  reportOn?: string;
-
-  /** Callback function invoked when the color preview is clicked. */
-  onColorClick?: (e: React.MouseEvent, instance: Instance) => void;
-}
-
-export class ColorPicker extends Field<
-  ColorPickerConfig,
-  FieldInstance<ColorPicker>
-> {
-  declare format: string;
-  declare reportOn: string;
-  declare onColorClick?: (
-    e: React.MouseEvent,
-    instance: FieldInstance<ColorPicker>
-  ) => void;
-
-  constructor(config?: ColorPickerConfig) {
-    super(config);
-  }
-
-  declareData(...args: Record<string, unknown>[]): void {
-    super.declareData(
-      {
-        value: this.emptyValue,
-        format: undefined,
-      },
-      ...args
-    );
-  }
-
-  renderInput(
-    context: RenderingContext,
-    instance: FieldInstance<ColorPicker>,
-    key: string
-  ): React.ReactNode {
-    return <ColorPickerComponent key={key} instance={instance} />;
-  }
-
-  handleEvent(
-    eventType: string,
-    instance: FieldInstance<ColorPicker>,
-    color: ColorState
-  ): void {
-    let { data } = instance;
-    if (this.reportOn.indexOf(eventType) != -1) {
-      let value;
-      switch (data.format) {
-        default:
-        case "rgba":
-          value = `rgba(${color.r.toFixed(0)},${color.g.toFixed(0)},${color.b.toFixed(0)},${
-            Math.round(color.a * 100) / 100
-          })`;
-          break;
-
-        case "hsla":
-          value = `hsla(${color.h.toFixed(0)},${color.s.toFixed(0)}%,${color.l.toFixed(0)}%,${
-            Math.round(color.a * 100) / 100
-          })`;
-          break;
-
-        case "hex":
-          value = rgbToHex(color.r, color.g, color.b);
-          break;
-      }
-      instance.set("value", value);
-    }
-  }
-}
-
-ColorPicker.prototype.baseClass = "colorpicker";
-ColorPicker.prototype.reportOn = "blur change";
-ColorPicker.prototype.format = "rgba";
-
-Widget.alias("color-picker", ColorPicker);
-
-interface ColorPickerComponentProps {
-  instance: FieldInstance<ColorPicker>;
-}
-
-class ColorPickerComponent extends VDOM.Component<
-  ColorPickerComponentProps,
-  ColorState
-> {
-  data: Record<string, unknown>;
-
-  constructor(props: ColorPickerComponentProps) {
-    super(props);
-    this.data = props.instance.data;
-    try {
-      this.state = this.parse(props.instance.data.value);
-    } catch (e) {
-      //if web colors are used (e.g. red), fallback to the default color
-      this.state = this.parse(null);
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(props: ColorPickerComponentProps): void {
-    let { data } = props.instance;
-    let color;
-    try {
-      color = this.parse(data.value);
-    } catch {
-      color = this.parse(null);
-    }
-    if (
-      color.r != this.state.r ||
-      color.g != this.state.g ||
-      color.b != this.state.b ||
-      color.a != this.state.a
-    )
-      this.setState(color);
-  }
-
-  parse(color: string | null): ColorState {
-    let c = parseColor(color);
-    if (c == null) {
-      c = {
-        type: "rgba",
-        r: 128,
-        g: 128,
-        b: 128,
-        a: 0,
-      };
-    }
-
-    c.a = Math.round(c.a * 100) / 100;
-
-    if (c.type == "rgba") {
-      let [h, s, l] = rgbToHsl(c.r, c.g, c.b);
-      return { r: c.r, g: c.g, b: c.b, h, s, l, a: c.a };
-    }
-
-    if (c.type == "hsla") {
-      let [r, g, b] = hslToRgb(c.h, c.s, c.l);
-      r = this.fix255(r);
-      g = this.fix255(g);
-      b = this.fix255(b);
-      return { r: r, g, b, h: c.h, s: c.s, l: c.l, a: c.a };
-    }
-
-    throw new Error(`Color ${color} parsing failed.`);
-  }
-
-  render(): React.ReactNode {
-    let { h, s, l, a, r, g, b } = this.state;
-    let { instance } = this.props;
-    let { widget, data } = instance;
-    let { CSS, baseClass } = widget;
-    let hcolor = `hsl(${h},100%,50%)`;
-    let hsla = `hsla(${h.toFixed(0)},${s.toFixed(0)}%,${l.toFixed(0)}%,${a})`;
-    let rgba = `rgba(${r.toFixed(0)},${g.toFixed(0)},${b.toFixed(0)},${a})`;
-    let hex = rgbToHex(r, g, b);
-    let pixelPicker;
-
-    let alphaGradient = `${getVendorPrefix(
-      "css"
-    )}linear-gradient(left, hsla(${h},${s}%,${l}%,0) 0%, hsla(${h},${s}%,${l}%,1) 100%)`;
-
-    if (
-      typeof window !== "undefined" &&
-      "EyeDropper" in window &&
-      window.EyeDropper
-    ) {
-      pixelPicker = (
-        <div
-          className={CSS.element(baseClass, "pixel-picker")}
-          onClick={(e) => {
-            const eyeDropper = new EyeDropper();
-            eyeDropper
-              .open()
-              .then((result: { sRGBHex: string }) => {
-                instance.set("value", result.sRGBHex);
-              })
-              .catch((e: any) => {});
-          }}
-        >
-          <PixelPickerIcon />
-        </div>
-      );
-    }
-
-    return (
-      <div
-        className={data.classNames}
-        style={data.style}
-        onBlur={this.onBlur.bind(this)}
-        onMouseDown={stopPropagation}
-        onTouchStart={stopPropagation}
-      >
-        <div
-          className={CSS.element(baseClass, "picker")}
-          style={{ backgroundColor: hcolor }}
-          onMouseDown={this.onSLSelect.bind(this)}
-          onTouchStart={this.onSLSelect.bind(this)}
-        >
-          <div
-            className={CSS.element(baseClass, "indicator")}
-            style={{
-              left: `calc(${s}% - 4px)`,
-              top: `calc(${100 - l}% - 4px)`,
-              borderColor: `rgba(${r < 128 ? 255 : 0}, ${g < 128 ? 255 : 0}, ${b < 128 ? 255 : 0}, 0.5)`,
-            }}
-          />
-        </div>
-        <div className={CSS.element(baseClass, "details")}>
-          <div
-            className={CSS.element(baseClass, "hue")}
-            onMouseDown={this.onHueSelect.bind(this)}
-            onTouchStart={this.onHueSelect.bind(this)}
-            onWheel={(e) => {
-              this.onWheel(e, "h", 10);
-            }}
-          >
-            <div
-              className={CSS.element(baseClass, "indicator")}
-              style={{
-                left: `calc(${h / 3.6}% - 2px)`,
-              }}
-            />
-          </div>
-          <div className={CSS.element(baseClass, "inputs")}>
-            <label>
-              {"H "}
-              <input
-                value={h.toFixed(0)}
-                onChange={(e) => {
-                  this.onNumberChange(e, "h");
-                }}
-                onWheel={(e) => {
-                  this.onWheel(e, "h", 10);
-                }}
-              />
-            </label>
-            <label>
-              {"S "}
-              <input
-                value={s.toFixed(0)}
-                onChange={(e) => {
-                  this.onNumberChange(e, "s");
-                }}
-                onWheel={(e) => {
-                  this.onWheel(e, "s", 5);
-                }}
-              />
-            </label>
-            <label>
-              {"L "}
-              <input
-                value={l.toFixed(0)}
-                onChange={(e) => {
-                  this.onNumberChange(e, "l");
-                }}
-                onWheel={(e) => {
-                  this.onWheel(e, "l", 5);
-                }}
-              />
-            </label>
-            <label>
-              {"A "}
-              <input
-                value={a}
-                onChange={(e) => {
-                  this.onNumberChange(e, "a");
-                }}
-                onWheel={(e) => {
-                  this.onWheel(e, "a", 0.1);
-                }}
-              />
-            </label>
-          </div>
-          <div
-            className={CSS.element(baseClass, "alpha")}
-            onMouseDown={this.onAlphaSelect.bind(this)}
-            onTouchStart={this.onAlphaSelect.bind(this)}
-            onWheel={(e) => {
-              this.onWheel(e, "a", 0.1);
-            }}
-          >
-            <div style={{ background: alphaGradient }} />
-            <div
-              className={CSS.element(baseClass, "indicator")}
-              style={{
-                left: `calc(${a * 100}% - 2px)`,
-              }}
-            />
-          </div>
-          <div className={CSS.element(baseClass, "inputs")}>
-            <label>
-              {"R "}
-              <input
-                value={r.toFixed(0)}
-                onChange={(e) => {
-                  this.onNumberChange(e, "r");
-                }}
-                onWheel={(e) => {
-                  this.onWheel(e, "r", 5);
-                }}
-              />
-            </label>
-            <label>
-              {"G "}
-              <input
-                value={g.toFixed(0)}
-                onChange={(e) => {
-                  this.onNumberChange(e, "g");
-                }}
-                onWheel={(e) => {
-                  this.onWheel(e, "g", 5);
-                }}
-              />
-            </label>
-            <label>
-              {"B "}
-              <input
-                value={b.toFixed(0)}
-                onChange={(e) => {
-                  this.onNumberChange(e, "b");
-                }}
-                onWheel={(e) => {
-                  this.onWheel(e, "b", 5);
-                }}
-              />
-            </label>
-            <label>
-              {"A "}
-              <input
-                value={a}
-                onChange={(e) => {
-                  this.onNumberChange(e, "a");
-                }}
-                onWheel={(e) => {
-                  this.onWheel(e, "a", 0.1);
-                }}
-              />
-            </label>
-          </div>
-          <div className={CSS.element(baseClass, "preview")}>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              <div
-                className={CSS.element(baseClass, "color")}
-                onClick={(e) => {
-                  this.onColorClick(e);
-                }}
-              >
-                <div style={{ backgroundColor: hsla }}></div>
-              </div>
-            </div>
-            <div className={CSS.element(baseClass, "values")}>
-              <input value={hsla} readOnly />
-              <input value={rgba} readOnly />
-              <input value={hex} readOnly />
-            </div>
-            {pixelPicker}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  onColorClick(e: React.MouseEvent): void {
-    let { instance } = this.props;
-    let { widget } = instance;
-
-    if ((widget as ColorPicker).onColorClick)
-      (widget as ColorPicker).onColorClick!(e, instance);
-  }
-
-  onHueSelect(e: React.MouseEvent | React.TouchEvent): void {
-    e.preventDefault();
-    e.stopPropagation();
-
-    let el = e.currentTarget;
-    let bounds = el.getBoundingClientRect();
-
-    let move = (e: MouseEvent) => {
-      let pos = getCursorPos(e);
-      let x = Math.max(
-        0,
-        Math.min(
-          1,
-          (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth
-        )
-      );
-      this.setColorProp({
-        h: x * 360,
-      });
-    };
-
-    captureMouseOrTouch(e, move);
-    move(e as any);
-  }
-
-  onAlphaSelect(e: React.MouseEvent | React.TouchEvent): void {
-    e.preventDefault();
-    e.stopPropagation();
-
-    let el = e.currentTarget;
-    let bounds = getTopLevelBoundingClientRect(el);
-
-    let move = (e: MouseEvent | React.MouseEvent) => {
-      let pos = getCursorPos(e);
-      let x = Math.max(
-        0,
-        Math.min(
-          1,
-          (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth
-        )
-      );
-      this.setColorProp({
-        a: x,
-      });
-    };
-
-    captureMouseOrTouch(e, move);
-    move(e as any);
-  }
-
-  onSLSelect(e: React.MouseEvent | React.TouchEvent): void {
-    e.preventDefault();
-    e.stopPropagation();
-
-    let el = e.currentTarget;
-    let bounds = getTopLevelBoundingClientRect(el);
-
-    let move = (e: MouseEvent) => {
-      let pos = getCursorPos(e);
-      let x = Math.max(
-        0,
-        Math.min(
-          1,
-          (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth
-        )
-      );
-      let y = Math.max(
-        0,
-        Math.min(
-          1,
-          (pos.clientY + 1 - bounds.top) / (el as HTMLElement).offsetWidth
-        )
-      );
-      let s = x;
-      let l = 1 - y;
-      this.setColorProp({
-        s: s * 100,
-        l: l * 100,
-      });
-    };
-
-    captureMouseOrTouch(e, move);
-    move(e as any);
-  }
-
-  fix255(v: number): number {
-    return Math.max(0, Math.min(255, Math.round(v)));
-  }
-
-  setColorProp(props: string | Partial<ColorState>, value?: number): void {
-    let propsObj: Partial<ColorState>;
-    if (isString(props)) {
-      propsObj = {
-        [props]: value,
-      };
-    } else {
-      propsObj = props;
-    }
-
-    let state = { ...this.state };
-    let fixAlpha = false;
-
-    for (let prop in propsObj) {
-      let propValue = propsObj[prop as keyof ColorState];
-      if (propValue === undefined) continue;
-
-      switch (prop) {
-        case "h":
-          state.h = Math.min(360, Math.max(0, propValue));
-          [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
-          fixAlpha = true;
-          break;
-
-        case "s":
-          state.s = Math.min(100, Math.max(0, propValue));
-          [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
-          fixAlpha = true;
-          break;
-
-        case "l":
-          state.l = Math.min(100, Math.max(0, propValue));
-          [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
-          fixAlpha = true;
-          break;
-
-        case "r":
-        case "g":
-        case "b":
-          state[prop] = Math.round(Math.min(255, Math.max(0, propValue)));
-          let [h, s, l] = rgbToHsl(state.r, state.g, state.b);
-          state.h = h;
-          state.s = s;
-          state.l = l;
-          fixAlpha = true;
-          break;
-
-        case "a":
-          state.a = Math.round(100 * Math.min(1, Math.max(0, propValue))) / 100;
-          break;
-      }
-    }
-
-    state.r = this.fix255(state.r);
-    state.g = this.fix255(state.g);
-    state.b = this.fix255(state.b);
-
-    if (fixAlpha && state.a === 0) state.a = 1;
-
-    this.setState(state, () => {
-      (this.props.instance.widget as ColorPicker).handleEvent(
-        "change",
-        this.props.instance,
-        this.state
-      );
-    });
-  }
-
-  onNumberChange(
-    e: React.ChangeEvent<HTMLInputElement>,
-    prop: keyof ColorState
-  ): void {
-    e.preventDefault();
-    e.stopPropagation();
-    let number = parseFloat(e.target.value || "0");
-    this.setColorProp(prop, number);
-  }
-
-  onWheel(e: React.WheelEvent, prop: keyof ColorState, delta: number): void {
-    e.preventDefault();
-    e.stopPropagation();
-    let factor = e.deltaY < 0 ? 1 : -1;
-    this.setColorProp(prop, this.state[prop] + delta * factor);
-  }
-
-  onBlur(): void {
-    (this.props.instance.widget as ColorPicker).handleEvent(
-      "blur",
-      this.props.instance,
-      this.state
-    );
-  }
-}
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Field, FieldConfig, FieldInstance } from "./Field";
+import { captureMouseOrTouch, getCursorPos } from "../overlay/captureMouse";
+import { hslToRgb } from "../../util/color/hslToRgb";
+import { rgbToHsl } from "../../util/color/rgbToHsl";
+import { rgbToHex } from "../../util/color/rgbToHex";
+import { parseColor } from "../../util/color/parseColor";
+import { getVendorPrefix } from "../../util/getVendorPrefix";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { isString } from "../../util/isString";
+import { getTopLevelBoundingClientRect } from "../../util/getTopLevelBoundingClientRect";
+import PixelPickerIcon from "../icons/pixel-picker";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import type { Instance } from "../../ui/Instance";
+import { StringProp } from "../../ui/Prop";
+
+// Type declaration for EyeDropper API
+declare global {
+  class EyeDropper {
+    open(): Promise<{ sRGBHex: string }>;
+  }
+  interface Window {
+    EyeDropper: typeof EyeDropper;
+  }
+}
+
+//TODO: Increase HSL precision in calculations, round only RGB values
+//TODO: Resolve alpha input problems
+
+interface ColorState {
+  r: number;
+  g: number;
+  b: number;
+  h: number;
+  s: number;
+  l: number;
+  a: number;
+}
+
+export interface ColorPickerConfig extends FieldConfig {
+  /** Either `rgba`, `hsla` or `hex` value of the selected color. */
+  value?: StringProp;
+
+  /** Format of the color representation. Either `rgba`, `hsla` or `hex`. */
+  format?: "rgba" | "hsla" | "hex";
+
+  /**
+   * A string containing the list of all events that cause that selected value is written to the store.
+   * Default value is `blur change` which means that changes are propagated immediately.
+   */
+  reportOn?: string;
+
+  /** Callback function invoked when the color preview is clicked. */
+  onColorClick?: (e: React.MouseEvent, instance: Instance) => void;
+}
+
+export class ColorPicker extends Field<
+  ColorPickerConfig,
+  FieldInstance<ColorPicker>
+> {
+  declare format: string;
+  declare reportOn: string;
+  declare onColorClick?: (
+    e: React.MouseEvent,
+    instance: FieldInstance<ColorPicker>
+  ) => void;
+
+  constructor(config?: ColorPickerConfig) {
+    super(config);
+  }
+
+  declareData(...args: Record<string, unknown>[]): void {
+    super.declareData(
+      {
+        value: this.emptyValue,
+        format: undefined,
+      },
+      ...args
+    );
+  }
+
+  renderInput(
+    context: RenderingContext,
+    instance: FieldInstance<ColorPicker>,
+    key: string
+  ): React.ReactNode {
+    return <ColorPickerComponent key={key} instance={instance} />;
+  }
+
+  handleEvent(
+    eventType: string,
+    instance: FieldInstance<ColorPicker>,
+    color: ColorState
+  ): void {
+    let { data } = instance;
+    if (this.reportOn.indexOf(eventType) != -1) {
+      let value;
+      switch (data.format) {
+        default:
+        case "rgba":
+          value = `rgba(${color.r.toFixed(0)},${color.g.toFixed(0)},${color.b.toFixed(0)},${
+            Math.round(color.a * 100) / 100
+          })`;
+          break;
+
+        case "hsla":
+          value = `hsla(${color.h.toFixed(0)},${color.s.toFixed(0)}%,${color.l.toFixed(0)}%,${
+            Math.round(color.a * 100) / 100
+          })`;
+          break;
+
+        case "hex":
+          value = rgbToHex(color.r, color.g, color.b);
+          break;
+      }
+      instance.set("value", value);
+    }
+  }
+}
+
+ColorPicker.prototype.baseClass = "colorpicker";
+ColorPicker.prototype.reportOn = "blur change";
+ColorPicker.prototype.format = "rgba";
+
+Widget.alias("color-picker", ColorPicker);
+
+interface ColorPickerComponentProps {
+  instance: FieldInstance<ColorPicker>;
+}
+
+class ColorPickerComponent extends VDOM.Component<
+  ColorPickerComponentProps,
+  ColorState
+> {
+  data: Record<string, unknown>;
+
+  constructor(props: ColorPickerComponentProps) {
+    super(props);
+    this.data = props.instance.data;
+    try {
+      this.state = this.parse(props.instance.data.value);
+    } catch (e) {
+      //if web colors are used (e.g. red), fallback to the default color
+      this.state = this.parse(null);
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(props: ColorPickerComponentProps): void {
+    let { data } = props.instance;
+    let color;
+    try {
+      color = this.parse(data.value);
+    } catch {
+      color = this.parse(null);
+    }
+    if (
+      color.r != this.state.r ||
+      color.g != this.state.g ||
+      color.b != this.state.b ||
+      color.a != this.state.a
+    )
+      this.setState(color);
+  }
+
+  parse(color: string | null): ColorState {
+    let c = parseColor(color);
+    if (c == null) {
+      c = {
+        type: "rgba",
+        r: 128,
+        g: 128,
+        b: 128,
+        a: 0,
+      };
+    }
+
+    c.a = Math.round(c.a * 100) / 100;
+
+    if (c.type == "rgba") {
+      let [h, s, l] = rgbToHsl(c.r, c.g, c.b);
+      return { r: c.r, g: c.g, b: c.b, h, s, l, a: c.a };
+    }
+
+    if (c.type == "hsla") {
+      let [r, g, b] = hslToRgb(c.h, c.s, c.l);
+      r = this.fix255(r);
+      g = this.fix255(g);
+      b = this.fix255(b);
+      return { r: r, g, b, h: c.h, s: c.s, l: c.l, a: c.a };
+    }
+
+    throw new Error(`Color ${color} parsing failed.`);
+  }
+
+  render(): React.ReactNode {
+    let { h, s, l, a, r, g, b } = this.state;
+    let { instance } = this.props;
+    let { widget, data } = instance;
+    let { CSS, baseClass } = widget;
+    let hcolor = `hsl(${h},100%,50%)`;
+    let hsla = `hsla(${h.toFixed(0)},${s.toFixed(0)}%,${l.toFixed(0)}%,${a})`;
+    let rgba = `rgba(${r.toFixed(0)},${g.toFixed(0)},${b.toFixed(0)},${a})`;
+    let hex = rgbToHex(r, g, b);
+    let pixelPicker;
+
+    let alphaGradient = `${getVendorPrefix(
+      "css"
+    )}linear-gradient(left, hsla(${h},${s}%,${l}%,0) 0%, hsla(${h},${s}%,${l}%,1) 100%)`;
+
+    if (
+      typeof window !== "undefined" &&
+      "EyeDropper" in window &&
+      window.EyeDropper
+    ) {
+      pixelPicker = (
+        <div
+          className={CSS.element(baseClass, "pixel-picker")}
+          onClick={(e) => {
+            const eyeDropper = new EyeDropper();
+            eyeDropper
+              .open()
+              .then((result: { sRGBHex: string }) => {
+                instance.set("value", result.sRGBHex);
+              })
+              .catch((e: any) => {});
+          }}
+        >
+          <PixelPickerIcon />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={data.classNames}
+        style={data.style}
+        onBlur={this.onBlur.bind(this)}
+        onMouseDown={stopPropagation}
+        onTouchStart={stopPropagation}
+      >
+        <div
+          className={CSS.element(baseClass, "picker")}
+          style={{ backgroundColor: hcolor }}
+          onMouseDown={this.onSLSelect.bind(this)}
+          onTouchStart={this.onSLSelect.bind(this)}
+        >
+          <div
+            className={CSS.element(baseClass, "indicator")}
+            style={{
+              left: `calc(${s}% - 4px)`,
+              top: `calc(${100 - l}% - 4px)`,
+              borderColor: `rgba(${r < 128 ? 255 : 0}, ${g < 128 ? 255 : 0}, ${b < 128 ? 255 : 0}, 0.5)`,
+            }}
+          />
+        </div>
+        <div className={CSS.element(baseClass, "details")}>
+          <div
+            className={CSS.element(baseClass, "hue")}
+            onMouseDown={this.onHueSelect.bind(this)}
+            onTouchStart={this.onHueSelect.bind(this)}
+            onWheel={(e) => {
+              this.onWheel(e, "h", 10);
+            }}
+          >
+            <div
+              className={CSS.element(baseClass, "indicator")}
+              style={{
+                left: `calc(${h / 3.6}% - 2px)`,
+              }}
+            />
+          </div>
+          <div className={CSS.element(baseClass, "inputs")}>
+            <label>
+              {"H "}
+              <input
+                value={h.toFixed(0)}
+                onChange={(e) => {
+                  this.onNumberChange(e, "h");
+                }}
+                onWheel={(e) => {
+                  this.onWheel(e, "h", 10);
+                }}
+              />
+            </label>
+            <label>
+              {"S "}
+              <input
+                value={s.toFixed(0)}
+                onChange={(e) => {
+                  this.onNumberChange(e, "s");
+                }}
+                onWheel={(e) => {
+                  this.onWheel(e, "s", 5);
+                }}
+              />
+            </label>
+            <label>
+              {"L "}
+              <input
+                value={l.toFixed(0)}
+                onChange={(e) => {
+                  this.onNumberChange(e, "l");
+                }}
+                onWheel={(e) => {
+                  this.onWheel(e, "l", 5);
+                }}
+              />
+            </label>
+            <label>
+              {"A "}
+              <input
+                value={a}
+                onChange={(e) => {
+                  this.onNumberChange(e, "a");
+                }}
+                onWheel={(e) => {
+                  this.onWheel(e, "a", 0.1);
+                }}
+              />
+            </label>
+          </div>
+          <div
+            className={CSS.element(baseClass, "alpha")}
+            onMouseDown={this.onAlphaSelect.bind(this)}
+            onTouchStart={this.onAlphaSelect.bind(this)}
+            onWheel={(e) => {
+              this.onWheel(e, "a", 0.1);
+            }}
+          >
+            <div style={{ background: alphaGradient }} />
+            <div
+              className={CSS.element(baseClass, "indicator")}
+              style={{
+                left: `calc(${a * 100}% - 2px)`,
+              }}
+            />
+          </div>
+          <div className={CSS.element(baseClass, "inputs")}>
+            <label>
+              {"R "}
+              <input
+                value={r.toFixed(0)}
+                onChange={(e) => {
+                  this.onNumberChange(e, "r");
+                }}
+                onWheel={(e) => {
+                  this.onWheel(e, "r", 5);
+                }}
+              />
+            </label>
+            <label>
+              {"G "}
+              <input
+                value={g.toFixed(0)}
+                onChange={(e) => {
+                  this.onNumberChange(e, "g");
+                }}
+                onWheel={(e) => {
+                  this.onWheel(e, "g", 5);
+                }}
+              />
+            </label>
+            <label>
+              {"B "}
+              <input
+                value={b.toFixed(0)}
+                onChange={(e) => {
+                  this.onNumberChange(e, "b");
+                }}
+                onWheel={(e) => {
+                  this.onWheel(e, "b", 5);
+                }}
+              />
+            </label>
+            <label>
+              {"A "}
+              <input
+                value={a}
+                onChange={(e) => {
+                  this.onNumberChange(e, "a");
+                }}
+                onWheel={(e) => {
+                  this.onWheel(e, "a", 0.1);
+                }}
+              />
+            </label>
+          </div>
+          <div className={CSS.element(baseClass, "preview")}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <div
+                className={CSS.element(baseClass, "color")}
+                onClick={(e) => {
+                  this.onColorClick(e);
+                }}
+              >
+                <div style={{ backgroundColor: hsla }}></div>
+              </div>
+            </div>
+            <div className={CSS.element(baseClass, "values")}>
+              <input value={hsla} readOnly />
+              <input value={rgba} readOnly />
+              <input value={hex} readOnly />
+            </div>
+            {pixelPicker}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  onColorClick(e: React.MouseEvent): void {
+    let { instance } = this.props;
+    let { widget } = instance;
+
+    if ((widget as ColorPicker).onColorClick)
+      (widget as ColorPicker).onColorClick!(e, instance);
+  }
+
+  onHueSelect(e: React.MouseEvent | React.TouchEvent): void {
+    e.preventDefault();
+    e.stopPropagation();
+
+    let el = e.currentTarget;
+    let bounds = el.getBoundingClientRect();
+
+    let move = (e: MouseEvent) => {
+      let pos = getCursorPos(e);
+      let x = Math.max(
+        0,
+        Math.min(
+          1,
+          (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth
+        )
+      );
+      this.setColorProp({
+        h: x * 360,
+      });
+    };
+
+    captureMouseOrTouch(e, move);
+    move(e as any);
+  }
+
+  onAlphaSelect(e: React.MouseEvent | React.TouchEvent): void {
+    e.preventDefault();
+    e.stopPropagation();
+
+    let el = e.currentTarget;
+    let bounds = getTopLevelBoundingClientRect(el);
+
+    let move = (e: MouseEvent | React.MouseEvent) => {
+      let pos = getCursorPos(e);
+      let x = Math.max(
+        0,
+        Math.min(
+          1,
+          (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth
+        )
+      );
+      this.setColorProp({
+        a: x,
+      });
+    };
+
+    captureMouseOrTouch(e, move);
+    move(e as any);
+  }
+
+  onSLSelect(e: React.MouseEvent | React.TouchEvent): void {
+    e.preventDefault();
+    e.stopPropagation();
+
+    let el = e.currentTarget;
+    let bounds = getTopLevelBoundingClientRect(el);
+
+    let move = (e: MouseEvent) => {
+      let pos = getCursorPos(e);
+      let x = Math.max(
+        0,
+        Math.min(
+          1,
+          (pos.clientX + 1 - bounds.left) / (el as HTMLElement).offsetWidth
+        )
+      );
+      let y = Math.max(
+        0,
+        Math.min(
+          1,
+          (pos.clientY + 1 - bounds.top) / (el as HTMLElement).offsetWidth
+        )
+      );
+      let s = x;
+      let l = 1 - y;
+      this.setColorProp({
+        s: s * 100,
+        l: l * 100,
+      });
+    };
+
+    captureMouseOrTouch(e, move);
+    move(e as any);
+  }
+
+  fix255(v: number): number {
+    return Math.max(0, Math.min(255, Math.round(v)));
+  }
+
+  setColorProp(props: string | Partial<ColorState>, value?: number): void {
+    let propsObj: Partial<ColorState>;
+    if (isString(props)) {
+      propsObj = {
+        [props]: value,
+      };
+    } else {
+      propsObj = props;
+    }
+
+    let state = { ...this.state };
+    let fixAlpha = false;
+
+    for (let prop in propsObj) {
+      let propValue = propsObj[prop as keyof ColorState];
+      if (propValue === undefined) continue;
+
+      switch (prop) {
+        case "h":
+          state.h = Math.min(360, Math.max(0, propValue));
+          [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+          fixAlpha = true;
+          break;
+
+        case "s":
+          state.s = Math.min(100, Math.max(0, propValue));
+          [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+          fixAlpha = true;
+          break;
+
+        case "l":
+          state.l = Math.min(100, Math.max(0, propValue));
+          [state.r, state.g, state.b] = hslToRgb(state.h, state.s, state.l);
+          fixAlpha = true;
+          break;
+
+        case "r":
+        case "g":
+        case "b":
+          state[prop] = Math.round(Math.min(255, Math.max(0, propValue)));
+          let [h, s, l] = rgbToHsl(state.r, state.g, state.b);
+          state.h = h;
+          state.s = s;
+          state.l = l;
+          fixAlpha = true;
+          break;
+
+        case "a":
+          state.a = Math.round(100 * Math.min(1, Math.max(0, propValue))) / 100;
+          break;
+      }
+    }
+
+    state.r = this.fix255(state.r);
+    state.g = this.fix255(state.g);
+    state.b = this.fix255(state.b);
+
+    if (fixAlpha && state.a === 0) state.a = 1;
+
+    this.setState(state, () => {
+      (this.props.instance.widget as ColorPicker).handleEvent(
+        "change",
+        this.props.instance,
+        this.state
+      );
+    });
+  }
+
+  onNumberChange(
+    e: React.ChangeEvent<HTMLInputElement>,
+    prop: keyof ColorState
+  ): void {
+    e.preventDefault();
+    e.stopPropagation();
+    let number = parseFloat(e.target.value || "0");
+    this.setColorProp(prop, number);
+  }
+
+  onWheel(e: React.WheelEvent, prop: keyof ColorState, delta: number): void {
+    e.preventDefault();
+    e.stopPropagation();
+    let factor = e.deltaY < 0 ? 1 : -1;
+    this.setColorProp(prop, this.state[prop] + delta * factor);
+  }
+
+  onBlur(): void {
+    (this.props.instance.widget as ColorPicker).handleEvent(
+      "blur",
+      this.props.instance,
+      this.state
+    );
+  }
+}