duoyun-ui/elements/color-panel.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _DuoyunColorPanelElement_instances, _DuoyunColorPanelElement_color_get, _DuoyunColorPanelElement_typeOptions, _DuoyunColorPanelElement_getPosition, _DuoyunColorPanelElement_onPanHue, _DuoyunColorPanelElement_onPanSV, _DuoyunColorPanelElement_onPanA, _DuoyunColorPanelElement_onPanEnd, _DuoyunColorPanelElement_onChangeType, _DuoyunColorPanelElement_onChangeValue, _DuoyunColorPanelElement_onChangeA, _DuoyunColorPanelElement_openEyeDropper;
// https://spectrum.adobe.com/page/color-area/
import { adoptedStyle, customElement, attribute, globalemitter, boolattribute, } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
import { parseHexColor, rgbToHexColor, rgbToHslColor, rgbToRgbColor, hslToRgb, rgbToHsl, hslToHsv, hsvToHsl, isValidHexColor, } from '../lib/color';
import { theme } from '../lib/theme';
import { icons } from '../lib/icons';
import { clamp, formatToPrecision } from '../lib/number';
import './gesture';
import './use';
import './input';
import './select';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 20em;
    font-size: 0.875em;
    --hsl: hsl(var(--h), var(--s), var(--l));
    --hue: hsl(var(--h), 100%, 50%);
    --alpha: linear-gradient(var(--hue), transparent),
      conic-gradient(transparent 0.25turn, #d3cfcf 0.25turn 0.5turn, transparent 0.5turn 0.75turn, #d3cfcf 0.75turn) top
        left / 1.2em 1.2em repeat;
  }
  .color {
    display: flex;
    align-items: stretch;
    gap: 1em;
  }
  .area {
    flex-grow: 1;
    aspect-ratio: 1 / 1;
    background-color: var(--hue);
    background-image: linear-gradient(transparent, #000), linear-gradient(90deg, #fff, transparent);
  }
  .hue-bar,
  .alpha-bar {
    width: 1.8em;
  }
  .hue-bar {
    background-image: linear-gradient(
      ${Array.from({ length: 15 }, (_, i) => `hsl(${360 - (360 / (15 - 1)) * i}, 100%, 50%)`).join(',')}
    );
  }
  .alpha-bar {
    background: var(--alpha);
  }
  .area,
  .hue-bar,
  .alpha-bar {
    position: relative;
    border-radius: ${theme.normalRound};
    box-shadow: inset 0 0 0 1px #0002;
  }
  .current {
    transition: transform 0.1s;
    background: radial-gradient(transparent 50%, white 50%);
  }
  .current.grabbing {
    transform: translate(-50%, -50%) scale(1.3);
  }
  .current,
  .current span {
    position: absolute;
    width: 1.2em;
    aspect-ratio: 1;
    border-radius: 10em;
    border: 1px solid #0008;
    transform: translate(-50%, -50%);
  }
  .current span {
    left: 50%;
    top: 50%;
    width: 66%;
    background-clip: content-box;
  }
  .area .current span {
    background-color: var(--hsl);
  }
  .hue-bar .current span {
    background-color: var(--hue);
  }
  .alpha-bar .current span {
    background-color: transparent;
  }
  .input {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .type {
    width: 5em;
    flex-shrink: 0;
  }
  .value,
  .alpha {
    border-radius: 0;
    border-top-color: transparent;
    border-inline: none;
  }
  :where(.value, .alpha)::part(input) {
    padding-inline: 0;
  }
  .value {
    width: auto;
    flex-shrink: 1;
  }
  .alpha {
    width: 3em;
    margin-inline-end: 2em;
  }
  .hidden {
    pointer-events: none;
    opacity: 0;
  }
  .colorize {
    padding: 0.15em;
    width: 1.5em;
    flex-shrink: 0;
    border-radius: ${theme.normalRound};
  }
  .colorize:hover {
    background: ${theme.lightBackgroundColor};
  }
`);
/**
 * @customElement dy-color-panel
 * @attr value
 * @attr alpha
 */
let DuoyunColorPanelElement = class DuoyunColorPanelElement extends GemElement {
    constructor() {
        super();
        _DuoyunColorPanelElement_instances.add(this);
        this.state = {
            mode: 'Hex',
            grabbingHue: false,
            grabbingA: false,
            grabbingSV: false,
            // stringify
            r: 0,
            g: 0,
            b: 0,
            h: 0,
            s: 0,
            l: 0,
            a: 0,
            // hsv
            sa: 0,
            v: 0,
            // without alpha
            str: '',
        };
        _DuoyunColorPanelElement_typeOptions.set(this, [
            {
                label: 'Hex',
            },
            {
                label: 'RGB',
            },
            {
                label: 'HSL',
            },
        ]);
        _DuoyunColorPanelElement_getPosition.set(this, (target, { clientX, clientY }) => {
            const { left, top, width, height } = target.getBoundingClientRect();
            return {
                left: clamp(0, clientX - left, width) / width,
                top: clamp(0, clientY - top, height) / height,
            };
        });
        _DuoyunColorPanelElement_onPanHue.set(this, ({ detail, target }) => {
            this.setState({ grabbingHue: true });
            const { a, s, l } = this.state;
            const { top } = __classPrivateFieldGet(this, _DuoyunColorPanelElement_getPosition, "f").call(this, target, detail);
            const h = 1 - top;
            const [r, g, b] = hslToRgb([h, s, l]);
            const color = rgbToHexColor([r, g, b, a]);
            this.setState({ commitValue: { h, str: color } });
            this.change(color);
            if (color === this.value) {
                this.setState({ h });
            }
        });
        _DuoyunColorPanelElement_onPanSV.set(this, ({ detail, target }) => {
            this.setState({ grabbingSV: true });
            const { h, a, str } = this.state;
            const { left, top } = __classPrivateFieldGet(this, _DuoyunColorPanelElement_getPosition, "f").call(this, target, detail);
            const v = 1 - top;
            const sa = left;
            const [_, s, l] = hsvToHsl([h, sa, v]);
            const [r, g, b] = hslToRgb([h, s, l]);
            const color = rgbToHexColor([r, g, b, a]);
            this.setState({
                sa: color === str ? sa : this.state.sa,
                commitValue: { str: color, v, sa, h },
            });
            this.change(color);
        });
        _DuoyunColorPanelElement_onPanA.set(this, ({ detail, target }) => {
            this.setState({ grabbingA: true });
            const { h, s, l, sa } = this.state;
            const [r, g, b] = hslToRgb([h, s, l]);
            const { top } = __classPrivateFieldGet(this, _DuoyunColorPanelElement_getPosition, "f").call(this, target, detail);
            const a = 1 - top;
            const color = rgbToHexColor([r, g, b, a]);
            this.setState({ commitValue: { str: color, h, a, sa } });
            this.change(color);
        });
        _DuoyunColorPanelElement_onPanEnd.set(this, () => {
            this.setState({ grabbingHue: false, grabbingSV: false, grabbingA: false });
        });
        _DuoyunColorPanelElement_onChangeType.set(this, (evt) => {
            evt.stopPropagation();
            this.setState({ mode: evt.detail });
        });
        _DuoyunColorPanelElement_onChangeValue.set(this, (evt) => {
            evt.stopPropagation();
            const { mode, a } = this.state;
            if (mode !== 'Hex') {
                this.setState({ mode: 'Hex' });
                return;
            }
            let str = '#' + evt.detail.trim().replace('#', '').replace(/[g-z]/gi, '').toLowerCase();
            // valid color emit event
            if (isValidHexColor(str)) {
                const aStr = Math.round(a * 255)
                    .toString(16)
                    .padStart(2, '0');
                const isShortHex = str.length === 4 && aStr[0] === aStr[1];
                str = str.slice(0, isShortHex ? 4 : 7);
                this.change((this.alpha && a !== 1 ? str + (isShortHex ? aStr[0] : aStr) : str));
            }
            this.setState({ str });
        });
        _DuoyunColorPanelElement_onChangeA.set(this, (evt) => {
            evt.stopPropagation();
            const { r, g, b } = this.state;
            this.change(rgbToHexColor([r, g, b, clamp(0, Number(evt.detail) || 0, 1)]));
        });
        _DuoyunColorPanelElement_openEyeDropper.set(this, async () => {
            const result = await new window.EyeDropper().open();
            this.change(result.sRGBHex);
        });
        this.willMount = () => {
            this.memo(() => {
                var _a;
                const value = this.value || '#fff';
                const [r, g, b, a] = parseHexColor(value);
                const [h, s, l] = rgbToHsl([r, g, b]);
                const [_, sa, v] = hslToHsv([h, s, l]);
                const str = value.length === 5 ? value.slice(0, 4) : value.length === 9 ? value.slice(0, 7) : value;
                const parseState = { r, g, b, a, h, s, l, sa, v, str };
                if (this.value === ((_a = this.state.commitValue) === null || _a === void 0 ? void 0 : _a.str)) {
                    this.setState({ ...parseState, ...this.state.commitValue });
                    return;
                }
                else {
                    this.setState({ ...parseState });
                }
            }, () => [this.value]);
        };
        this.render = () => {
            const { mode, grabbingHue, grabbingSV, grabbingA, h, s, l, a, sa, v, str } = this.state;
            return html `
      <style>
        :host {
          --h: ${h * 360};
          --s: ${s * 100}%;
          --l: ${l * 100}%;
          --a: ${a};
        }
      </style>
      <div class="color">
        <dy-gesture class="area" @pan=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanSV, "f")} @end=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanEnd, "f")}>
          <div
            class=${classMap({ current: true, grabbing: grabbingSV })}
            style=${styleMap({ left: `${sa * 100}%`, top: `${(1 - v) * 100}%` })}
          >
            <span></span>
          </div>
        </dy-gesture>
        <dy-gesture class="hue-bar" @pan=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanHue, "f")} @end=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanEnd, "f")}>
          <div
            class=${classMap({ current: true, grabbing: grabbingHue })}
            style=${styleMap({ top: `${(1 - h) * 100}%`, left: '50%' })}
          >
            <span></span>
          </div>
        </dy-gesture>
        ${this.alpha
                ? html `
              <dy-gesture class="alpha-bar" @pan=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanA, "f")} @end=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onPanEnd, "f")}>
                <div
                  class=${classMap({ current: true, grabbing: grabbingA })}
                  style=${styleMap({ top: `${(1 - a) * 100}%`, left: '50%' })}
                >
                  <span></span>
                </div>
              </dy-gesture>
            `
                : ''}
      </div>
      <div class="input">
        <dy-select
          class="type"
          ?borderless=${true}
          .options=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_typeOptions, "f")}
          .value=${mode}
          .dropdownStyle=${{ fontSize: '0.75em' }}
          @change=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChangeType, "f")}
        ></dy-select>
        <dy-input class="value" value=${mode === 'Hex' ? str : __classPrivateFieldGet(this, _DuoyunColorPanelElement_instances, "a", _DuoyunColorPanelElement_color_get)} @change=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChangeValue, "f")}></dy-input>
        <dy-input
          class=${classMap({ alpha: true, hidden: !this.alpha })}
          aria-hidden=${!this.alpha}
          type="number"
          value=${String(formatToPrecision(a))}
          step=${0.1}
          @change=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_onChangeA, "f")}
        ></dy-input>
        <dy-use
          role="button"
          aria-hidden=${!('EyeDropper' in window)}
          class=${classMap({ colorize: true, hidden: !('EyeDropper' in window) })}
          .element=${icons.colorize}
          @click=${__classPrivateFieldGet(this, _DuoyunColorPanelElement_openEyeDropper, "f")}
        ></dy-use>
      </div>
    `;
        };
        this.internals.role = 'widget';
    }
};
_DuoyunColorPanelElement_typeOptions = new WeakMap(), _DuoyunColorPanelElement_getPosition = new WeakMap(), _DuoyunColorPanelElement_onPanHue = new WeakMap(), _DuoyunColorPanelElement_onPanSV = new WeakMap(), _DuoyunColorPanelElement_onPanA = new WeakMap(), _DuoyunColorPanelElement_onPanEnd = new WeakMap(), _DuoyunColorPanelElement_onChangeType = new WeakMap(), _DuoyunColorPanelElement_onChangeValue = new WeakMap(), _DuoyunColorPanelElement_onChangeA = new WeakMap(), _DuoyunColorPanelElement_openEyeDropper = new WeakMap(), _DuoyunColorPanelElement_instances = new WeakSet(), _DuoyunColorPanelElement_color_get = function _DuoyunColorPanelElement_color_get() {
    const { r, g, b, mode } = this.state;
    switch (mode) {
        case 'Hex':
            return rgbToHexColor([r, g, b]);
        case 'RGB':
            return rgbToRgbColor([r, g, b]);
        case 'HSL':
            return rgbToHslColor([r, g, b]);
    }
};
__decorate([
    attribute
], DuoyunColorPanelElement.prototype, "value", void 0);
__decorate([
    boolattribute
], DuoyunColorPanelElement.prototype, "alpha", void 0);
__decorate([
    globalemitter
], DuoyunColorPanelElement.prototype, "change", void 0);
DuoyunColorPanelElement = __decorate([
    customElement('dy-color-panel'),
    adoptedStyle(style)
], DuoyunColorPanelElement);
export { DuoyunColorPanelElement };
//# sourceMappingURL=color-panel.js.map