@vimeo/iris/components/inputs/ColorSelect/ColorSelectSpectrum.esm.js

Vimeo Design System

import { b as __rest, c as __assign, _ as __read } from '../../../tslib.es6-7f0e734f.js';
import React__default, { useRef } from 'react';
import { hslToColorString } from 'polished';
import { SpectrumWrapper, HueSpectrum, Cursor } from './ColorSelect.style.esm.js';
import { throttle } from '../../../utils/general/throttle.esm.js';
import { HSVtoHSL, round } from '../../../color/colorUtils.esm.js';
import 'styled-components';

function ColorSelectSpectrum(_a) {
    var colorMeta = _a.colorMeta, coords = _a.coords, width = _a.width, height = _a.height, dispatch = _a.dispatch, throttleSpeed = _a.throttleSpeed, onChange = _a.onChange, dragging = _a.dragging, props = __rest(_a, ["colorMeta", "coords", "width", "height", "dispatch", "throttleSpeed", "onChange", "dragging"]);
    var clamp = useClamp(width, height);
    var hue = colorMeta.HSL.hue;
    var setCoords = useRef(throttle(function (_a, hue) {
        var _b = _a.nativeEvent, offsetX = _b.offsetX, offsetY = _b.offsetY;
        var payload = clamp([offsetX, offsetY]);
        dispatch({ type: 'SET_COORDS', payload: payload });
        setHSLfromCoords({ offsetX: offsetX, offsetY: offsetY }, hue);
    }, throttleSpeed)).current;
    function setHSLfromCoords(nativeEvent, hue) {
        var _a = coordsToSL(nativeEvent, width, height), saturation = _a.saturation, lightness = _a.lightness;
        var payload = safeHSL({ hue: hue, saturation: saturation, lightness: lightness });
        onChange && onChange(hslToColorString(payload));
        dispatch({ type: 'SET_HSL', payload: payload });
    }
    var doMouseActive = function (dragging) {
        return function (_a) {
            var _b = _a.nativeEvent, offsetX = _b.offsetX, offsetY = _b.offsetY;
            var payload = clamp([offsetX, offsetY]);
            if (dragging)
                dispatch({ type: 'DRAG_START' });
            else
                dispatch({ type: 'DRAG_END' });
            dispatch({ type: 'SET_COORDS', payload: payload });
            setHSLfromCoords({ offsetX: offsetX, offsetY: offsetY }, hue);
        };
    };
    var onMouseDown = doMouseActive(true);
    var onMouseUp = doMouseActive(false);
    var onMouseLeave = function () { return dispatch({ type: 'DRAG_END' }); };
    var onMouseMove = function (event) { return dragging && persist(event, setLoupe); };
    var setLoupe = function (event) { return setCoords(event, hue); };
    return (React__default.createElement(SpectrumWrapper, __assign({ dragging: dragging, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseLeave: onMouseLeave }, props),
        React__default.createElement(HueSpectrum, { hue: hue, onMouseMove: onMouseMove, width: width, height: height, style: {
                background: hslToColorString({
                    hue: hue,
                    saturation: 1,
                    lightness: 0.5,
                }),
            } },
            React__default.createElement(Cursor, { style: cursorPosition(coords) }))));
}
var cursorPosition = function (coords) { return ({
    transform: "translate(".concat(coords[0], "px, ").concat(coords[1], "px)"),
}); };
function coordsToSL(nativeEvent, width, height) {
    var _a = HSVtoHSL({
        hue: 360,
        saturation: round(nativeEvent.offsetX / width),
        value: round((nativeEvent.offsetY / height - 1) * -1),
    }), saturation = _a.saturation, lightness = _a.lightness;
    return { saturation: saturation, lightness: lightness };
}
function persist(e, fn) {
    e.persist();
    fn(e);
}
function useClamp(width, height) {
    return function (_a) {
        var _b = __read(_a, 2), X = _b[0], Y = _b[1];
        if (X < 0)
            X = 0;
        if (Y < 0)
            Y = 0;
        if (X > width)
            X = width;
        if (Y > height)
            Y = height;
        return [X, Y];
    };
}
function safeHSL(_a) {
    var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness;
    if (hue < 0)
        hue = 0;
    if (hue > 360)
        hue = 360;
    if (saturation < 0)
        saturation = 0;
    if (saturation > 1)
        saturation = 1;
    if (lightness < 0)
        lightness = 0;
    if (lightness > 1)
        lightness = 1;
    return { hue: hue, saturation: saturation, lightness: lightness };
}

export { ColorSelectSpectrum };