New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@react-stately/color
Advanced tools
@react-stately/color - npm Package Compare versions
Comparing version 3.0.0-nightly.3316 to 3.0.0-nightly-016590a4a-250131
1159
dist/main.js
@@ -1,1146 +0,41 @@ | ||
| var $4tN2K$reactstatelyutils = require("@react-stately/utils"); | ||
| var $4tN2K$internationalizedmessage = require("@internationalized/message"); | ||
| var $4tN2K$internationalizednumber = require("@internationalized/number"); | ||
| var $4tN2K$react = require("react"); | ||
| var $4tN2K$reactstatelyslider = require("@react-stately/slider"); | ||
| var $83fe1a57d631223b$exports = require("./Color.main.js"); | ||
| var $af2d7ac9990cfee2$exports = require("./useColorAreaState.main.js"); | ||
| var $5386a492cfd3234c$exports = require("./useColorSliderState.main.js"); | ||
| var $9d7d8736d45f74b8$exports = require("./useColorWheelState.main.js"); | ||
| var $d59d0c2b2ce1568f$exports = require("./useColorFieldState.main.js"); | ||
| var $9f9c35e37074b99b$exports = require("./useColorChannelFieldState.main.js"); | ||
| var $f31788ea48a5c383$exports = require("./useColorPickerState.main.js"); | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| function $parcel$exportWildcard(dest, source) { | ||
| Object.keys(source).forEach(function(key) { | ||
| if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) { | ||
| return; | ||
| } | ||
| Object.defineProperty(dest, key, { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return source[key]; | ||
| } | ||
| }); | ||
| }); | ||
| $parcel$export(module.exports, "parseColor", () => $83fe1a57d631223b$exports.parseColor); | ||
| $parcel$export(module.exports, "getColorChannels", () => $83fe1a57d631223b$exports.getColorChannels); | ||
| $parcel$export(module.exports, "useColorAreaState", () => $af2d7ac9990cfee2$exports.useColorAreaState); | ||
| $parcel$export(module.exports, "useColorSliderState", () => $5386a492cfd3234c$exports.useColorSliderState); | ||
| $parcel$export(module.exports, "useColorWheelState", () => $9d7d8736d45f74b8$exports.useColorWheelState); | ||
| $parcel$export(module.exports, "useColorFieldState", () => $d59d0c2b2ce1568f$exports.useColorFieldState); | ||
| $parcel$export(module.exports, "useColorChannelFieldState", () => $9f9c35e37074b99b$exports.useColorChannelFieldState); | ||
| $parcel$export(module.exports, "useColorPickerState", () => $f31788ea48a5c383$exports.useColorPickerState); | ||
| /* | ||
| * Copyright 2020 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
| return dest; | ||
| } | ||
| function $parcel$interopDefault(a) { | ||
| return a && a.__esModule ? a.default : a; | ||
| } | ||
| $parcel$export(module.exports, "parseColor", () => $83fe1a57d631223b$export$6e865ea70d7724f); | ||
| var $c0b600cf8eafdee9$exports = {}; | ||
| var $b044e7150534af04$exports = {}; | ||
| $b044e7150534af04$exports = JSON.parse("{\"alpha\":\"ألفا\",\"blue\":\"أزرق\",\"brightness\":\"السطوع\",\"green\":\"أخضر\",\"hue\":\"درجة اللون\",\"lightness\":\"الإضاءة\",\"red\":\"أحمر\",\"saturation\":\"التشبع\"}"); | ||
| var $c8bf89547a4a9b3f$exports = {}; | ||
| $c8bf89547a4a9b3f$exports = JSON.parse("{\"alpha\":\"Алфа\",\"blue\":\"Синьо\",\"brightness\":\"Яркост\",\"green\":\"Зелено\",\"hue\":\"Оттенък\",\"lightness\":\"Лекота\",\"red\":\"Червено\",\"saturation\":\"Наситеност\"}"); | ||
| var $8365d8dfc7e4c985$exports = {}; | ||
| $8365d8dfc7e4c985$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odstín\",\"lightness\":\"Světlost\",\"red\":\"Červená\",\"saturation\":\"Sytost\"}"); | ||
| var $8d95eeaa73699e56$exports = {}; | ||
| $8d95eeaa73699e56$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grøn\",\"hue\":\"Tone\",\"lightness\":\"Lyshed\",\"red\":\"Rød\",\"saturation\":\"Farvemætning\"}"); | ||
| var $2dbbd166053d6d10$exports = {}; | ||
| $2dbbd166053d6d10$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Blau\",\"brightness\":\"Helligkeit\",\"green\":\"Grün\",\"hue\":\"Farbton\",\"lightness\":\"Leuchtkraft\",\"red\":\"Rot\",\"saturation\":\"Sättigung\"}"); | ||
| var $1fcbdf9eaf6cc074$exports = {}; | ||
| $1fcbdf9eaf6cc074$exports = JSON.parse("{\"alpha\":\"Άλφα\",\"blue\":\"Μπλε\",\"brightness\":\"Φωτεινότητα\",\"green\":\"Πράσινο\",\"hue\":\"Τόνος\",\"lightness\":\"Φωτεινότητα\",\"red\":\"Κόκκινο\",\"saturation\":\"Κορεσμός\"}"); | ||
| var $42d54be461715959$exports = {}; | ||
| $42d54be461715959$exports = JSON.parse("{\"hue\":\"Hue\",\"saturation\":\"Saturation\",\"lightness\":\"Lightness\",\"brightness\":\"Brightness\",\"red\":\"Red\",\"green\":\"Green\",\"blue\":\"Blue\",\"alpha\":\"Alpha\"}"); | ||
| var $911646bd5662c33d$exports = {}; | ||
| $911646bd5662c33d$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Azul\",\"brightness\":\"Brillo\",\"green\":\"Verde\",\"hue\":\"Tono\",\"lightness\":\"Luminosidad\",\"red\":\"Rojo\",\"saturation\":\"Saturación\"}"); | ||
| var $6e8998796901e680$exports = {}; | ||
| $6e8998796901e680$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Sinine\",\"brightness\":\"Heledus\",\"green\":\"Roheline\",\"hue\":\"Värv\",\"lightness\":\"Valgus\",\"red\":\"Punane\",\"saturation\":\"Küllastus\"}"); | ||
| var $4503b4001036be6d$exports = {}; | ||
| $4503b4001036be6d$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Sininen\",\"brightness\":\"Kirkkaus\",\"green\":\"Vihreä\",\"hue\":\"Sävy\",\"lightness\":\"Valomäärä\",\"red\":\"Punainen\",\"saturation\":\"Värikylläisyys\"}"); | ||
| var $721e7016769a7a7f$exports = {}; | ||
| $721e7016769a7a7f$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Bleu\",\"brightness\":\"Luminosité\",\"green\":\"Vert\",\"hue\":\"Teinte\",\"lightness\":\"Luminosité\",\"red\":\"Rouge\",\"saturation\":\"Saturation\"}"); | ||
| var $dcc290e5792f9bab$exports = {}; | ||
| $dcc290e5792f9bab$exports = JSON.parse("{\"alpha\":\"אלפא\",\"blue\":\"כחול\",\"brightness\":\"בהירות\",\"green\":\"ירוק\",\"hue\":\"גוון\",\"lightness\":\"כמות אור\",\"red\":\"אדום\",\"saturation\":\"רוויה\"}"); | ||
| var $d93d5aebdd12334c$exports = {}; | ||
| $d93d5aebdd12334c$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Svjetlina\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvijetljenost\",\"red\":\"Crvena\",\"saturation\":\"Zasićenost\"}"); | ||
| var $a3749e0ee87dbebc$exports = {}; | ||
| $a3749e0ee87dbebc$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Kék\",\"brightness\":\"Fényesség\",\"green\":\"Zöld\",\"hue\":\"Színárnyalat\",\"lightness\":\"Világosság\",\"red\":\"Piros\",\"saturation\":\"Telítettség\"}"); | ||
| var $2fdb931b6c9652b9$exports = {}; | ||
| $2fdb931b6c9652b9$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blu\",\"brightness\":\"Luminosità\",\"green\":\"Verde\",\"hue\":\"Tonalità\",\"lightness\":\"Luminosità\",\"red\":\"Rosso\",\"saturation\":\"Saturazione\"}"); | ||
| var $219c839b59015b4f$exports = {}; | ||
| $219c839b59015b4f$exports = JSON.parse("{\"alpha\":\"アルファ\",\"blue\":\"青\",\"brightness\":\"明るさ\",\"green\":\"緑\",\"hue\":\"色相\",\"lightness\":\"明度\",\"red\":\"赤\",\"saturation\":\"彩度\"}"); | ||
| var $b7f67f414086d976$exports = {}; | ||
| $b7f67f414086d976$exports = JSON.parse("{\"alpha\":\"알파\",\"blue\":\"파랑\",\"brightness\":\"명도\",\"green\":\"초록\",\"hue\":\"색조\",\"lightness\":\"밝기\",\"red\":\"빨강\",\"saturation\":\"채도\"}"); | ||
| var $f27b2ac7d517417c$exports = {}; | ||
| $f27b2ac7d517417c$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mėlyna\",\"brightness\":\"Ryškumas\",\"green\":\"Žalia\",\"hue\":\"Atspalvis\",\"lightness\":\"Šviesumas\",\"red\":\"Raudona\",\"saturation\":\"Įsotinimas\"}"); | ||
| var $e92168db3cbe2797$exports = {}; | ||
| $e92168db3cbe2797$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Zila\",\"brightness\":\"Spilgtums\",\"green\":\"Zaļa\",\"hue\":\"Nokrāsa\",\"lightness\":\"Gaišums\",\"red\":\"Sarkana\",\"saturation\":\"Piesātinājums\"}"); | ||
| var $44b012e02982e825$exports = {}; | ||
| $44b012e02982e825$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grønn\",\"hue\":\"Fargetone\",\"lightness\":\"Lyshet\",\"red\":\"Rød\",\"saturation\":\"Metning\"}"); | ||
| var $64fbd91459613d8b$exports = {}; | ||
| $64fbd91459613d8b$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blauw\",\"brightness\":\"Helderheid\",\"green\":\"Groen\",\"hue\":\"Kleurtoon\",\"lightness\":\"Lichtsterkte\",\"red\":\"Rood\",\"saturation\":\"Verzadiging\"}"); | ||
| var $83fabdc4e0df6af9$exports = {}; | ||
| $83fabdc4e0df6af9$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Niebieski\",\"brightness\":\"Jasność\",\"green\":\"Zielony\",\"hue\":\"Odcień\",\"lightness\":\"Jaskrawość\",\"red\":\"Czerwony\",\"saturation\":\"Nasycenie\"}"); | ||
| var $30b915257fa66ccf$exports = {}; | ||
| $30b915257fa66ccf$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Brilho\",\"green\":\"Verde\",\"hue\":\"Matiz\",\"lightness\":\"Luminosidade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}"); | ||
| var $ce75e45ccbc92491$exports = {}; | ||
| $ce75e45ccbc92491$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Luminosidade\",\"green\":\"Verde\",\"hue\":\"Tonalidade\",\"lightness\":\"Claridade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}"); | ||
| var $225440ee53a1fecd$exports = {}; | ||
| $225440ee53a1fecd$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Albastru\",\"brightness\":\"Luminozitate\",\"green\":\"Verde\",\"hue\":\"Nuanță\",\"lightness\":\"Luminozitate\",\"red\":\"Roșu\",\"saturation\":\"Saturație\"}"); | ||
| var $cbc60c1dd4e689ff$exports = {}; | ||
| $cbc60c1dd4e689ff$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синий\",\"brightness\":\"Яркость\",\"green\":\"Зеленый\",\"hue\":\"Оттенок\",\"lightness\":\"Освещенность\",\"red\":\"Красный\",\"saturation\":\"Насыщенность\"}"); | ||
| var $8612080ab5efe0cf$exports = {}; | ||
| $8612080ab5efe0cf$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odtieň\",\"lightness\":\"Svetlosť\",\"red\":\"Červená\",\"saturation\":\"Sýtosť\"}"); | ||
| var $99cc034ddd2b7d86$exports = {}; | ||
| $99cc034ddd2b7d86$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modra\",\"brightness\":\"Svetlost\",\"green\":\"Zelena\",\"hue\":\"Barva\",\"lightness\":\"Lahkost\",\"red\":\"Rdeča\",\"saturation\":\"Nasičenost\"}"); | ||
| var $dc671800d61be83e$exports = {}; | ||
| $dc671800d61be83e$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Osvetljenost\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvetljenje\",\"red\":\"Crvena\",\"saturation\":\"Zasićenje\"}"); | ||
| var $0f4790e2f696e63f$exports = {}; | ||
| $0f4790e2f696e63f$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blått\",\"brightness\":\"Ljusstyrka\",\"green\":\"Grönt\",\"hue\":\"Nyans\",\"lightness\":\"Ljushet\",\"red\":\"Rött\",\"saturation\":\"Mättnad\"}"); | ||
| var $deb5f82eb1998a3c$exports = {}; | ||
| $deb5f82eb1998a3c$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mavi\",\"brightness\":\"Parlaklık\",\"green\":\"Yeşil\",\"hue\":\"Ton\",\"lightness\":\"Canlılık\",\"red\":\"Kırmızı\",\"saturation\":\"Doygunluk\"}"); | ||
| var $99530e1782ca02cc$exports = {}; | ||
| $99530e1782ca02cc$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синій\",\"brightness\":\"Яскравість\",\"green\":\"Зелений\",\"hue\":\"Тон\",\"lightness\":\"Освітленість\",\"red\":\"Червоний\",\"saturation\":\"Насиченість\"}"); | ||
| var $a6e8f490b423d65e$exports = {}; | ||
| $a6e8f490b423d65e$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"蓝色\",\"brightness\":\"亮度\",\"green\":\"绿色\",\"hue\":\"色相\",\"lightness\":\"明亮度\",\"red\":\"红色\",\"saturation\":\"饱和度\"}"); | ||
| var $eba443dcc93cab9a$exports = {}; | ||
| $eba443dcc93cab9a$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"藍色\",\"brightness\":\"亮度\",\"green\":\"綠色\",\"hue\":\"色相\",\"lightness\":\"明亮\",\"red\":\"紅色\",\"saturation\":\"飽和度\"}"); | ||
| $c0b600cf8eafdee9$exports = { | ||
| "ar-AE": $b044e7150534af04$exports, | ||
| "bg-BG": $c8bf89547a4a9b3f$exports, | ||
| "cs-CZ": $8365d8dfc7e4c985$exports, | ||
| "da-DK": $8d95eeaa73699e56$exports, | ||
| "de-DE": $2dbbd166053d6d10$exports, | ||
| "el-GR": $1fcbdf9eaf6cc074$exports, | ||
| "en-US": $42d54be461715959$exports, | ||
| "es-ES": $911646bd5662c33d$exports, | ||
| "et-EE": $6e8998796901e680$exports, | ||
| "fi-FI": $4503b4001036be6d$exports, | ||
| "fr-FR": $721e7016769a7a7f$exports, | ||
| "he-IL": $dcc290e5792f9bab$exports, | ||
| "hr-HR": $d93d5aebdd12334c$exports, | ||
| "hu-HU": $a3749e0ee87dbebc$exports, | ||
| "it-IT": $2fdb931b6c9652b9$exports, | ||
| "ja-JP": $219c839b59015b4f$exports, | ||
| "ko-KR": $b7f67f414086d976$exports, | ||
| "lt-LT": $f27b2ac7d517417c$exports, | ||
| "lv-LV": $e92168db3cbe2797$exports, | ||
| "nb-NO": $44b012e02982e825$exports, | ||
| "nl-NL": $64fbd91459613d8b$exports, | ||
| "pl-PL": $83fabdc4e0df6af9$exports, | ||
| "pt-BR": $30b915257fa66ccf$exports, | ||
| "pt-PT": $ce75e45ccbc92491$exports, | ||
| "ro-RO": $225440ee53a1fecd$exports, | ||
| "ru-RU": $cbc60c1dd4e689ff$exports, | ||
| "sk-SK": $8612080ab5efe0cf$exports, | ||
| "sl-SI": $99cc034ddd2b7d86$exports, | ||
| "sr-SP": $dc671800d61be83e$exports, | ||
| "sv-SE": $0f4790e2f696e63f$exports, | ||
| "tr-TR": $deb5f82eb1998a3c$exports, | ||
| "uk-UA": $99530e1782ca02cc$exports, | ||
| "zh-CN": $a6e8f490b423d65e$exports, | ||
| "zh-TW": $eba443dcc93cab9a$exports | ||
| }; | ||
| const $83fe1a57d631223b$var$messages = new $4tN2K$internationalizedmessage.MessageDictionary((/*@__PURE__*/$parcel$interopDefault($c0b600cf8eafdee9$exports))); | ||
| function $83fe1a57d631223b$export$6e865ea70d7724f(value) { | ||
| let res = $83fe1a57d631223b$var$RGBColor.parse(value) || $83fe1a57d631223b$var$HSBColor.parse(value) || $83fe1a57d631223b$var$HSLColor.parse(value); | ||
| if (res) return res; | ||
| throw new Error('Invalid color value: ' + value); | ||
| } | ||
| function $83fe1a57d631223b$export$4cde5df63f53f473(v) { | ||
| if (typeof v === 'string') return $83fe1a57d631223b$export$6e865ea70d7724f(v); | ||
| else return v; | ||
| } | ||
| class $83fe1a57d631223b$var$Color { | ||
| toHexInt() { | ||
| return this.toFormat('rgb').toHexInt(); | ||
| } | ||
| getChannelValue(channel) { | ||
| if (channel in this) return this[channel]; | ||
| throw new Error('Unsupported color channel: ' + channel); | ||
| } | ||
| withChannelValue(channel, value) { | ||
| if (channel in this) { | ||
| let x = this.clone(); | ||
| x[channel] = value; | ||
| return x; | ||
| } | ||
| throw new Error('Unsupported color channel: ' + channel); | ||
| } | ||
| getChannelName(channel, locale) { | ||
| return $83fe1a57d631223b$var$messages.getStringForLocale(channel, locale); | ||
| } | ||
| getColorSpaceAxes(xyChannels) { | ||
| let { xChannel: xChannel , yChannel: yChannel } = xyChannels; | ||
| let xCh = xChannel || this.getColorChannels().find((c)=>c !== yChannel | ||
| ); | ||
| let yCh = yChannel || this.getColorChannels().find((c)=>c !== xCh | ||
| ); | ||
| let zCh = this.getColorChannels().find((c)=>c !== xCh && c !== yCh | ||
| ); | ||
| return { | ||
| xChannel: xCh, | ||
| yChannel: yCh, | ||
| zChannel: zCh | ||
| }; | ||
| } | ||
| } | ||
| const $83fe1a57d631223b$var$HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i; | ||
| // X = <negative/positive number with/without decimal places> | ||
| // before/after a comma, 0 or more whitespaces are allowed | ||
| // - rgb(X, X, X) | ||
| // - rgba(X, X, X, X) | ||
| const $83fe1a57d631223b$var$RGB_REGEX = /rgb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?)\)|rgba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d(.\d+)?)\)/; | ||
| class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color { | ||
| static parse(value) { | ||
| let m; | ||
| if (m = value.match($83fe1a57d631223b$var$HEX_REGEX)) { | ||
| if (m[1]) { | ||
| let r = parseInt(m[1][0] + m[1][0], 16); | ||
| let g = parseInt(m[1][1] + m[1][1], 16); | ||
| let b = parseInt(m[1][2] + m[1][2], 16); | ||
| return new $83fe1a57d631223b$var$RGBColor(r, g, b, 1); | ||
| } else if (m[2]) { | ||
| let r = parseInt(m[2][0] + m[2][1], 16); | ||
| let g = parseInt(m[2][2] + m[2][3], 16); | ||
| let b = parseInt(m[2][4] + m[2][5], 16); | ||
| return new $83fe1a57d631223b$var$RGBColor(r, g, b, 1); | ||
| } | ||
| } | ||
| if (m = value.match($83fe1a57d631223b$var$RGB_REGEX)) { | ||
| var ref; | ||
| const [r, g, b, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim()) | ||
| ); | ||
| return new $83fe1a57d631223b$var$RGBColor($4tN2K$reactstatelyutils.clamp(r, 0, 255), $4tN2K$reactstatelyutils.clamp(g, 0, 255), $4tN2K$reactstatelyutils.clamp(b, 0, 255), $4tN2K$reactstatelyutils.clamp(a !== null && a !== void 0 ? a : 1, 0, 1)); | ||
| } | ||
| } | ||
| toString(format) { | ||
| switch(format){ | ||
| case 'hex': | ||
| return '#' + (this.red.toString(16).padStart(2, '0') + this.green.toString(16).padStart(2, '0') + this.blue.toString(16).padStart(2, '0')).toUpperCase(); | ||
| case 'hexa': | ||
| return '#' + (this.red.toString(16).padStart(2, '0') + this.green.toString(16).padStart(2, '0') + this.blue.toString(16).padStart(2, '0') + Math.round(this.alpha * 255).toString(16).padStart(2, '0')).toUpperCase(); | ||
| case 'rgb': | ||
| return `rgb(${this.red}, ${this.green}, ${this.blue})`; | ||
| case 'css': | ||
| case 'rgba': | ||
| return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`; | ||
| default: | ||
| return this.toFormat(format).toString(format); | ||
| } | ||
| } | ||
| toFormat(format) { | ||
| switch(format){ | ||
| case 'hex': | ||
| case 'hexa': | ||
| case 'rgb': | ||
| case 'rgba': | ||
| return this; | ||
| case 'hsb': | ||
| case 'hsba': | ||
| return this.toHSB(); | ||
| case 'hsl': | ||
| case 'hsla': | ||
| return this.toHSL(); | ||
| default: | ||
| throw new Error('Unsupported color conversion: rgb -> ' + format); | ||
| } | ||
| } | ||
| toHexInt() { | ||
| return this.red << 16 | this.green << 8 | this.blue; | ||
| } | ||
| /** | ||
| * Converts an RGB color value to HSB. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB. | ||
| * @returns An HSBColor object. | ||
| */ toHSB() { | ||
| const red = this.red / 255; | ||
| const green = this.green / 255; | ||
| const blue = this.blue / 255; | ||
| const min = Math.min(red, green, blue); | ||
| const brightness = Math.max(red, green, blue); | ||
| const chroma = brightness - min; | ||
| const saturation = brightness === 0 ? 0 : chroma / brightness; | ||
| let hue = 0; // achromatic | ||
| if (chroma !== 0) { | ||
| switch(brightness){ | ||
| case red: | ||
| hue = (green - blue) / chroma + (green < blue ? 6 : 0); | ||
| break; | ||
| case green: | ||
| hue = (blue - red) / chroma + 2; | ||
| break; | ||
| case blue: | ||
| hue = (red - green) / chroma + 4; | ||
| break; | ||
| } | ||
| hue /= 6; | ||
| } | ||
| return new $83fe1a57d631223b$var$HSBColor($4tN2K$reactstatelyutils.toFixedNumber(hue * 360, 2), $4tN2K$reactstatelyutils.toFixedNumber(saturation * 100, 2), $4tN2K$reactstatelyutils.toFixedNumber(brightness * 100, 2), this.alpha); | ||
| } | ||
| /** | ||
| * Converts an RGB color value to HSL. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB. | ||
| * @returns An HSLColor object. | ||
| */ toHSL() { | ||
| const red = this.red / 255; | ||
| const green = this.green / 255; | ||
| const blue = this.blue / 255; | ||
| const min = Math.min(red, green, blue); | ||
| const max = Math.max(red, green, blue); | ||
| const lightness = (max + min) / 2; | ||
| const chroma = max - min; | ||
| let hue; | ||
| let saturation; | ||
| if (chroma === 0) hue = saturation = 0; // achromatic | ||
| else { | ||
| saturation = chroma / (lightness < 0.5 ? max + min : 2 - max - min); | ||
| switch(max){ | ||
| case red: | ||
| hue = (green - blue) / chroma + (green < blue ? 6 : 0); | ||
| break; | ||
| case green: | ||
| hue = (blue - red) / chroma + 2; | ||
| break; | ||
| case blue: | ||
| hue = (red - green) / chroma + 4; | ||
| break; | ||
| } | ||
| hue /= 6; | ||
| } | ||
| return new $83fe1a57d631223b$var$HSLColor($4tN2K$reactstatelyutils.toFixedNumber(hue * 360, 2), $4tN2K$reactstatelyutils.toFixedNumber(saturation * 100, 2), $4tN2K$reactstatelyutils.toFixedNumber(lightness * 100, 2), this.alpha); | ||
| } | ||
| clone() { | ||
| return new $83fe1a57d631223b$var$RGBColor(this.red, this.green, this.blue, this.alpha); | ||
| } | ||
| getChannelRange(channel) { | ||
| switch(channel){ | ||
| case 'red': | ||
| case 'green': | ||
| case 'blue': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 255, | ||
| step: 1, | ||
| pageSize: 17 | ||
| }; | ||
| case 'alpha': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 1, | ||
| step: 0.01, | ||
| pageSize: 0.1 | ||
| }; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| } | ||
| formatChannelValue(channel, locale) { | ||
| let options; | ||
| let value = this.getChannelValue(channel); | ||
| switch(channel){ | ||
| case 'red': | ||
| case 'green': | ||
| case 'blue': | ||
| options = { | ||
| style: 'decimal' | ||
| }; | ||
| break; | ||
| case 'alpha': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| break; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| return new $4tN2K$internationalizednumber.NumberFormatter(locale, options).format(value); | ||
| } | ||
| getColorSpace() { | ||
| return 'rgb'; | ||
| } | ||
| getColorChannels() { | ||
| return $83fe1a57d631223b$var$RGBColor.colorChannels; | ||
| } | ||
| constructor(red, green, blue, alpha){ | ||
| super(); | ||
| this.red = red; | ||
| this.green = green; | ||
| this.blue = blue; | ||
| this.alpha = alpha; | ||
| } | ||
| } | ||
| $83fe1a57d631223b$var$RGBColor.colorChannels = [ | ||
| 'red', | ||
| 'green', | ||
| 'blue' | ||
| ]; | ||
| // X = <negative/positive number with/without decimal places> | ||
| // before/after a comma, 0 or more whitespaces are allowed | ||
| // - hsb(X, X%, X%) | ||
| // - hsba(X, X%, X%, X) | ||
| const $83fe1a57d631223b$var$HSB_REGEX = /hsb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/; | ||
| class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color { | ||
| static parse(value) { | ||
| let m; | ||
| if (m = value.match($83fe1a57d631223b$var$HSB_REGEX)) { | ||
| var ref; | ||
| const [h, s, b, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim().replace('%', '')) | ||
| ); | ||
| return new $83fe1a57d631223b$var$HSBColor($83fe1a57d631223b$var$mod(h, 360), $4tN2K$reactstatelyutils.clamp(s, 0, 100), $4tN2K$reactstatelyutils.clamp(b, 0, 100), $4tN2K$reactstatelyutils.clamp(a !== null && a !== void 0 ? a : 1, 0, 1)); | ||
| } | ||
| } | ||
| toString(format) { | ||
| switch(format){ | ||
| case 'css': | ||
| return this.toHSL().toString('css'); | ||
| case 'hex': | ||
| return this.toRGB().toString('hex'); | ||
| case 'hexa': | ||
| return this.toRGB().toString('hexa'); | ||
| case 'hsb': | ||
| return `hsb(${this.hue}, ${$4tN2K$reactstatelyutils.toFixedNumber(this.saturation, 2)}%, ${$4tN2K$reactstatelyutils.toFixedNumber(this.brightness, 2)}%)`; | ||
| case 'hsba': | ||
| return `hsba(${this.hue}, ${$4tN2K$reactstatelyutils.toFixedNumber(this.saturation, 2)}%, ${$4tN2K$reactstatelyutils.toFixedNumber(this.brightness, 2)}%, ${this.alpha})`; | ||
| default: | ||
| return this.toFormat(format).toString(format); | ||
| } | ||
| } | ||
| toFormat(format) { | ||
| switch(format){ | ||
| case 'hsb': | ||
| case 'hsba': | ||
| return this; | ||
| case 'hsl': | ||
| case 'hsla': | ||
| return this.toHSL(); | ||
| case 'rgb': | ||
| case 'rgba': | ||
| return this.toRGB(); | ||
| default: | ||
| throw new Error('Unsupported color conversion: hsb -> ' + format); | ||
| } | ||
| } | ||
| /** | ||
| * Converts a HSB color to HSL. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL. | ||
| * @returns An HSLColor object. | ||
| */ toHSL() { | ||
| let saturation = this.saturation / 100; | ||
| let brightness = this.brightness / 100; | ||
| let lightness = brightness * (1 - saturation / 2); | ||
| saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness); | ||
| return new $83fe1a57d631223b$var$HSLColor($4tN2K$reactstatelyutils.toFixedNumber(this.hue, 2), $4tN2K$reactstatelyutils.toFixedNumber(saturation * 100, 2), $4tN2K$reactstatelyutils.toFixedNumber(lightness * 100, 2), this.alpha); | ||
| } | ||
| /** | ||
| * Converts a HSV color value to RGB. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative. | ||
| * @returns An RGBColor object. | ||
| */ toRGB() { | ||
| let hue = this.hue; | ||
| let saturation = this.saturation / 100; | ||
| let brightness = this.brightness / 100; | ||
| let fn = (n, k = (n + hue / 60) % 6)=>brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0) | ||
| ; | ||
| return new $83fe1a57d631223b$var$RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha); | ||
| } | ||
| clone() { | ||
| return new $83fe1a57d631223b$var$HSBColor(this.hue, this.saturation, this.brightness, this.alpha); | ||
| } | ||
| getChannelRange(channel) { | ||
| switch(channel){ | ||
| case 'hue': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 360, | ||
| step: 1, | ||
| pageSize: 15 | ||
| }; | ||
| case 'saturation': | ||
| case 'brightness': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 100, | ||
| step: 1, | ||
| pageSize: 10 | ||
| }; | ||
| case 'alpha': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 1, | ||
| step: 0.01, | ||
| pageSize: 0.1 | ||
| }; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| } | ||
| formatChannelValue(channel, locale) { | ||
| let options; | ||
| let value = this.getChannelValue(channel); | ||
| switch(channel){ | ||
| case 'hue': | ||
| options = { | ||
| style: 'unit', | ||
| unit: 'degree', | ||
| unitDisplay: 'narrow' | ||
| }; | ||
| break; | ||
| case 'saturation': | ||
| case 'brightness': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| value /= 100; | ||
| break; | ||
| case 'alpha': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| break; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| return new $4tN2K$internationalizednumber.NumberFormatter(locale, options).format(value); | ||
| } | ||
| getColorSpace() { | ||
| return 'hsb'; | ||
| } | ||
| getColorChannels() { | ||
| return $83fe1a57d631223b$var$HSBColor.colorChannels; | ||
| } | ||
| constructor(hue, saturation, brightness, alpha){ | ||
| super(); | ||
| this.hue = hue; | ||
| this.saturation = saturation; | ||
| this.brightness = brightness; | ||
| this.alpha = alpha; | ||
| } | ||
| } | ||
| $83fe1a57d631223b$var$HSBColor.colorChannels = [ | ||
| 'hue', | ||
| 'saturation', | ||
| 'brightness' | ||
| ]; | ||
| // X = <negative/positive number with/without decimal places> | ||
| // before/after a comma, 0 or more whitespaces are allowed | ||
| // - hsl(X, X%, X%) | ||
| // - hsla(X, X%, X%, X) | ||
| const $83fe1a57d631223b$var$HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsla\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/; | ||
| function $83fe1a57d631223b$var$mod(n, m) { | ||
| return (n % m + m) % m; | ||
| } | ||
| class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color { | ||
| static parse(value) { | ||
| let m; | ||
| if (m = value.match($83fe1a57d631223b$var$HSL_REGEX)) { | ||
| var ref; | ||
| const [h, s, l, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim().replace('%', '')) | ||
| ); | ||
| return new $83fe1a57d631223b$var$HSLColor($83fe1a57d631223b$var$mod(h, 360), $4tN2K$reactstatelyutils.clamp(s, 0, 100), $4tN2K$reactstatelyutils.clamp(l, 0, 100), $4tN2K$reactstatelyutils.clamp(a !== null && a !== void 0 ? a : 1, 0, 1)); | ||
| } | ||
| } | ||
| toString(format) { | ||
| switch(format){ | ||
| case 'hex': | ||
| return this.toRGB().toString('hex'); | ||
| case 'hexa': | ||
| return this.toRGB().toString('hexa'); | ||
| case 'hsl': | ||
| return `hsl(${this.hue}, ${$4tN2K$reactstatelyutils.toFixedNumber(this.saturation, 2)}%, ${$4tN2K$reactstatelyutils.toFixedNumber(this.lightness, 2)}%)`; | ||
| case 'css': | ||
| case 'hsla': | ||
| return `hsla(${this.hue}, ${$4tN2K$reactstatelyutils.toFixedNumber(this.saturation, 2)}%, ${$4tN2K$reactstatelyutils.toFixedNumber(this.lightness, 2)}%, ${this.alpha})`; | ||
| default: | ||
| return this.toFormat(format).toString(format); | ||
| } | ||
| } | ||
| toFormat(format) { | ||
| switch(format){ | ||
| case 'hsl': | ||
| case 'hsla': | ||
| return this; | ||
| case 'hsb': | ||
| case 'hsba': | ||
| return this.toHSB(); | ||
| case 'rgb': | ||
| case 'rgba': | ||
| return this.toRGB(); | ||
| default: | ||
| throw new Error('Unsupported color conversion: hsl -> ' + format); | ||
| } | ||
| } | ||
| /** | ||
| * Converts a HSL color to HSB. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV. | ||
| * @returns An HSBColor object. | ||
| */ toHSB() { | ||
| let saturation = this.saturation / 100; | ||
| let lightness = this.lightness / 100; | ||
| let brightness = lightness + saturation * Math.min(lightness, 1 - lightness); | ||
| saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness); | ||
| return new $83fe1a57d631223b$var$HSBColor($4tN2K$reactstatelyutils.toFixedNumber(this.hue, 2), $4tN2K$reactstatelyutils.toFixedNumber(saturation * 100, 2), $4tN2K$reactstatelyutils.toFixedNumber(brightness * 100, 2), this.alpha); | ||
| } | ||
| /** | ||
| * Converts a HSL color to RGB. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative. | ||
| * @returns An RGBColor object. | ||
| */ toRGB() { | ||
| let hue = this.hue; | ||
| let saturation = this.saturation / 100; | ||
| let lightness = this.lightness / 100; | ||
| let a = saturation * Math.min(lightness, 1 - lightness); | ||
| let fn = (n, k = (n + hue / 30) % 12)=>lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1) | ||
| ; | ||
| return new $83fe1a57d631223b$var$RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha); | ||
| } | ||
| clone() { | ||
| return new $83fe1a57d631223b$var$HSLColor(this.hue, this.saturation, this.lightness, this.alpha); | ||
| } | ||
| getChannelRange(channel) { | ||
| switch(channel){ | ||
| case 'hue': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 360, | ||
| step: 1, | ||
| pageSize: 15 | ||
| }; | ||
| case 'saturation': | ||
| case 'lightness': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 100, | ||
| step: 1, | ||
| pageSize: 10 | ||
| }; | ||
| case 'alpha': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 1, | ||
| step: 0.01, | ||
| pageSize: 0.1 | ||
| }; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| } | ||
| formatChannelValue(channel, locale) { | ||
| let options; | ||
| let value = this.getChannelValue(channel); | ||
| switch(channel){ | ||
| case 'hue': | ||
| options = { | ||
| style: 'unit', | ||
| unit: 'degree', | ||
| unitDisplay: 'narrow' | ||
| }; | ||
| break; | ||
| case 'saturation': | ||
| case 'lightness': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| value /= 100; | ||
| break; | ||
| case 'alpha': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| break; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| return new $4tN2K$internationalizednumber.NumberFormatter(locale, options).format(value); | ||
| } | ||
| getColorSpace() { | ||
| return 'hsl'; | ||
| } | ||
| getColorChannels() { | ||
| return $83fe1a57d631223b$var$HSLColor.colorChannels; | ||
| } | ||
| constructor(hue, saturation, lightness, alpha){ | ||
| super(); | ||
| this.hue = hue; | ||
| this.saturation = saturation; | ||
| this.lightness = lightness; | ||
| this.alpha = alpha; | ||
| } | ||
| } | ||
| $83fe1a57d631223b$var$HSLColor.colorChannels = [ | ||
| 'hue', | ||
| 'saturation', | ||
| 'lightness' | ||
| ]; | ||
| var $af2d7ac9990cfee2$exports = {}; | ||
| $parcel$export($af2d7ac9990cfee2$exports, "useColorAreaState", () => $af2d7ac9990cfee2$export$6df7f0e2cabc7eef); | ||
| const $af2d7ac9990cfee2$var$DEFAULT_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('#ffffff'); | ||
| function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) { | ||
| let { value: value1 , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd } = props; | ||
| if (!value1 && !defaultValue) defaultValue = $af2d7ac9990cfee2$var$DEFAULT_COLOR; | ||
| let [color, setColor] = $4tN2K$reactstatelyutils.useControlledState(value1 && $83fe1a57d631223b$export$4cde5df63f53f473(value1), defaultValue && $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange); | ||
| let valueRef = $4tN2K$react.useRef(color); | ||
| valueRef.current = color; | ||
| let channels = $4tN2K$react.useMemo(()=>valueRef.current.getColorSpaceAxes({ | ||
| xChannel: xChannel, | ||
| yChannel: yChannel | ||
| }) | ||
| , [ | ||
| xChannel, | ||
| yChannel | ||
| ]); | ||
| let xChannelRange = color.getChannelRange(channels.xChannel); | ||
| let yChannelRange = color.getChannelRange(channels.yChannel); | ||
| let { minValue: minValueX , maxValue: maxValueX , step: stepX , pageSize: pageSizeX } = xChannelRange; | ||
| let { minValue: minValueY , maxValue: maxValueY , step: stepY , pageSize: pageSizeY } = yChannelRange; | ||
| let [isDragging1, setDragging] = $4tN2K$react.useState(false); | ||
| let isDraggingRef = $4tN2K$react.useRef(false).current; | ||
| let xValue = color.getChannelValue(channels.xChannel); | ||
| let yValue = color.getChannelValue(channels.yChannel); | ||
| let setXValue = (v)=>{ | ||
| if (v === xValue) return; | ||
| valueRef.current = color.withChannelValue(channels.xChannel, v); | ||
| setColor(valueRef.current); | ||
| }; | ||
| let setYValue = (v)=>{ | ||
| if (v === yValue) return; | ||
| valueRef.current = color.withChannelValue(channels.yChannel, v); | ||
| setColor(valueRef.current); | ||
| }; | ||
| return { | ||
| channels: channels, | ||
| xChannelStep: stepX, | ||
| yChannelStep: stepY, | ||
| xChannelPageStep: pageSizeX, | ||
| yChannelPageStep: pageSizeY, | ||
| value: color, | ||
| setValue (value) { | ||
| let c = $83fe1a57d631223b$export$4cde5df63f53f473(value); | ||
| valueRef.current = c; | ||
| setColor(c); | ||
| }, | ||
| xValue: xValue, | ||
| setXValue: setXValue, | ||
| yValue: yValue, | ||
| setYValue: setYValue, | ||
| setColorFromPoint (x, y) { | ||
| let newXValue = minValueX + $4tN2K$reactstatelyutils.clamp(x, 0, 1) * (maxValueX - minValueX); | ||
| let newYValue = minValueY + (1 - $4tN2K$reactstatelyutils.clamp(y, 0, 1)) * (maxValueY - minValueY); | ||
| let newColor; | ||
| if (newXValue !== xValue) { | ||
| // Round new value to multiple of step, clamp value between min and max | ||
| newXValue = $4tN2K$reactstatelyutils.snapValueToStep(newXValue, minValueX, maxValueX, stepX); | ||
| newColor = color.withChannelValue(channels.xChannel, newXValue); | ||
| } | ||
| if (newYValue !== yValue) { | ||
| // Round new value to multiple of step, clamp value between min and max | ||
| newYValue = $4tN2K$reactstatelyutils.snapValueToStep(newYValue, minValueY, maxValueY, stepY); | ||
| newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue); | ||
| } | ||
| if (newColor) setColor(newColor); | ||
| }, | ||
| getThumbPosition () { | ||
| let x = (xValue - minValueX) / (maxValueX - minValueX); | ||
| let y = 1 - (yValue - minValueY) / (maxValueY - minValueY); | ||
| return { | ||
| x: x, | ||
| y: y | ||
| }; | ||
| }, | ||
| incrementX (stepSize) { | ||
| setXValue(xValue + stepSize > maxValueX ? maxValueX : $4tN2K$reactstatelyutils.snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX)); | ||
| }, | ||
| incrementY (stepSize) { | ||
| setYValue(yValue + stepSize > maxValueY ? maxValueY : $4tN2K$reactstatelyutils.snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY)); | ||
| }, | ||
| decrementX (stepSize) { | ||
| setXValue($4tN2K$reactstatelyutils.snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX)); | ||
| }, | ||
| decrementY (stepSize) { | ||
| setYValue($4tN2K$reactstatelyutils.snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY)); | ||
| }, | ||
| setDragging (isDragging) { | ||
| let wasDragging = isDraggingRef; | ||
| isDraggingRef = isDragging; | ||
| if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current); | ||
| setDragging(isDragging); | ||
| }, | ||
| isDragging: isDragging1, | ||
| getDisplayColor () { | ||
| return color.withChannelValue('alpha', 1); | ||
| } | ||
| }; | ||
| } | ||
| var $5386a492cfd3234c$exports = {}; | ||
| $parcel$export($5386a492cfd3234c$exports, "useColorSliderState", () => $5386a492cfd3234c$export$57bc203e1c9c6d44); | ||
| function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) { | ||
| let { channel: channel , value: value1 , defaultValue: defaultValue , onChange: onChange , locale: locale , ...otherProps } = props; | ||
| if (value1 == null && defaultValue == null) throw new Error('useColorSliderState requires a value or defaultValue'); | ||
| let [color, setColor] = $4tN2K$reactstatelyutils.useControlledState(value1 && $83fe1a57d631223b$export$4cde5df63f53f473(value1), defaultValue && $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange); | ||
| let sliderState = $4tN2K$reactstatelyslider.useSliderState({ | ||
| ...color.getChannelRange(channel), | ||
| ...otherProps, | ||
| // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript. | ||
| numberFormatter: null, | ||
| value: [ | ||
| color.getChannelValue(channel) | ||
| ], | ||
| onChange ([v]) { | ||
| setColor(color.withChannelValue(channel, v)); | ||
| }, | ||
| onChangeEnd ([v]) { | ||
| // onChange will have already been called with the right value, this is just to trigger onChangeEnd | ||
| if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v)); | ||
| } | ||
| }); | ||
| let { step: step , pageSize: pageSize } = color.getChannelRange(channel); | ||
| return { | ||
| ...sliderState, | ||
| value: color, | ||
| setValue (value) { | ||
| setColor($83fe1a57d631223b$export$4cde5df63f53f473(value)); | ||
| }, | ||
| getDisplayColor () { | ||
| switch(channel){ | ||
| case 'hue': | ||
| return $83fe1a57d631223b$export$6e865ea70d7724f(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`); | ||
| case 'lightness': | ||
| case 'brightness': | ||
| case 'saturation': | ||
| case 'red': | ||
| case 'green': | ||
| case 'blue': | ||
| return color.withChannelValue('alpha', 1); | ||
| case 'alpha': | ||
| return color; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| }, | ||
| getThumbValueLabel () { | ||
| return color.formatChannelValue(channel, locale); | ||
| }, | ||
| step: step, | ||
| pageSize: pageSize | ||
| }; | ||
| } | ||
| var $9d7d8736d45f74b8$exports = {}; | ||
| $parcel$export($9d7d8736d45f74b8$exports, "useColorWheelState", () => $9d7d8736d45f74b8$export$f4301076d9336137); | ||
| const $9d7d8736d45f74b8$var$DEFAULT_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('hsl(0, 100%, 50%)'); | ||
| function $9d7d8736d45f74b8$var$roundToStep(value, step) { | ||
| return Math.round(value / step) * step; | ||
| } | ||
| function $9d7d8736d45f74b8$var$mod(n, m) { | ||
| return (n % m + m) % m; | ||
| } | ||
| function $9d7d8736d45f74b8$var$roundDown(v) { | ||
| let r = Math.floor(v); | ||
| if (r === v) return v - 1; | ||
| else return r; | ||
| } | ||
| function $9d7d8736d45f74b8$var$degToRad(deg) { | ||
| return deg * Math.PI / 180; | ||
| } | ||
| function $9d7d8736d45f74b8$var$radToDeg(rad) { | ||
| return rad * 180 / Math.PI; | ||
| } | ||
| // 0deg = 3 o'clock. increases clockwise | ||
| function $9d7d8736d45f74b8$var$angleToCartesian(angle, radius) { | ||
| let rad = $9d7d8736d45f74b8$var$degToRad(360 - angle + 90); | ||
| let x = Math.sin(rad) * radius; | ||
| let y = Math.cos(rad) * radius; | ||
| return { | ||
| x: x, | ||
| y: y | ||
| }; | ||
| } | ||
| function $9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius) { | ||
| let deg = $9d7d8736d45f74b8$var$radToDeg(Math.atan2(y / radius, x / radius)); | ||
| return (deg + 360) % 360; | ||
| } | ||
| function $9d7d8736d45f74b8$export$f4301076d9336137(props) { | ||
| let { defaultValue: defaultValue , onChange: onChange , onChangeEnd: onChangeEnd } = props; | ||
| if (!props.value && !defaultValue) defaultValue = $9d7d8736d45f74b8$var$DEFAULT_COLOR; | ||
| let [value, setValue] = $4tN2K$reactstatelyutils.useControlledState($83fe1a57d631223b$export$4cde5df63f53f473(props.value), $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange); | ||
| let valueRef = $4tN2K$react.useRef(value); | ||
| valueRef.current = value; | ||
| let channelRange = value.getChannelRange('hue'); | ||
| let { minValue: minValueX , maxValue: maxValueX , step: step , pageSize: pageStep } = channelRange; | ||
| let [isDragging1, setDragging] = $4tN2K$react.useState(false); | ||
| let isDraggingRef = $4tN2K$react.useRef(false).current; | ||
| let hue = value.getChannelValue('hue'); | ||
| function setHue(v) { | ||
| if (v > 360) // Make sure you can always get back to 0. | ||
| v = 0; | ||
| v = $9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(v, 360), step); | ||
| if (hue !== v) { | ||
| let color = value.withChannelValue('hue', v); | ||
| valueRef.current = color; | ||
| setValue(color); | ||
| } | ||
| } | ||
| return { | ||
| value: value, | ||
| step: step, | ||
| pageStep: pageStep, | ||
| setValue (v) { | ||
| let color = $83fe1a57d631223b$export$4cde5df63f53f473(v); | ||
| valueRef.current = color; | ||
| setValue(color); | ||
| }, | ||
| hue: hue, | ||
| setHue: setHue, | ||
| setHueFromPoint (x, y, radius) { | ||
| setHue($9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius)); | ||
| }, | ||
| getThumbPosition (radius) { | ||
| return $9d7d8736d45f74b8$var$angleToCartesian(value.getChannelValue('hue'), radius); | ||
| }, | ||
| increment (stepSize = 1) { | ||
| let s = Math.max(stepSize, step); | ||
| let newValue = hue + s; | ||
| if (newValue >= maxValueX) // Make sure you can always get back to 0. | ||
| newValue = minValueX; | ||
| setHue($9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(newValue, 360), s)); | ||
| }, | ||
| decrement (stepSize = 1) { | ||
| let s = Math.max(stepSize, step); | ||
| if (hue === 0) // We can't just subtract step because this might be the case: | ||
| // |(previous step) - 0| < step size | ||
| setHue($9d7d8736d45f74b8$var$roundDown(360 / s) * s); | ||
| else setHue($9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(hue - s, 360), s)); | ||
| }, | ||
| setDragging (isDragging) { | ||
| let wasDragging = isDraggingRef; | ||
| isDraggingRef = isDragging; | ||
| if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current); | ||
| setDragging(isDragging); | ||
| }, | ||
| isDragging: isDragging1, | ||
| getDisplayColor () { | ||
| return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50); | ||
| } | ||
| }; | ||
| } | ||
| var $d59d0c2b2ce1568f$exports = {}; | ||
| $parcel$export($d59d0c2b2ce1568f$exports, "useColorFieldState", () => $d59d0c2b2ce1568f$export$d52a01683abdfcd6); | ||
| function $f8b3be23ba4462b1$export$5aadd9c0606af5c2(value) { | ||
| return $4tN2K$react.useMemo(()=>{ | ||
| if (typeof value === 'string') try { | ||
| return $83fe1a57d631223b$export$6e865ea70d7724f(value); | ||
| } catch (err) { | ||
| return undefined; | ||
| } | ||
| return value; | ||
| }, [ | ||
| value | ||
| ]); | ||
| } | ||
| const $d59d0c2b2ce1568f$var$MIN_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('#000000'); | ||
| const $d59d0c2b2ce1568f$var$MAX_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('#FFFFFF'); | ||
| const $d59d0c2b2ce1568f$var$MIN_COLOR_INT = $d59d0c2b2ce1568f$var$MIN_COLOR.toHexInt(); | ||
| const $d59d0c2b2ce1568f$var$MAX_COLOR_INT = $d59d0c2b2ce1568f$var$MAX_COLOR.toHexInt(); | ||
| function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) { | ||
| let { value: value1 , defaultValue: defaultValue , onChange: onChange } = props; | ||
| let { step: step } = $d59d0c2b2ce1568f$var$MIN_COLOR.getChannelRange('red'); | ||
| let initialValue = $f8b3be23ba4462b1$export$5aadd9c0606af5c2(value1); | ||
| let initialDefaultValue = $f8b3be23ba4462b1$export$5aadd9c0606af5c2(defaultValue); | ||
| let [colorValue, setColorValue] = $4tN2K$reactstatelyutils.useControlledState(initialValue, initialDefaultValue, onChange); | ||
| let [inputValue, setInputValue] = $4tN2K$react.useState(()=>(value1 || defaultValue) && colorValue ? colorValue.toString('hex') : '' | ||
| ); | ||
| let safelySetColorValue = (newColor)=>{ | ||
| if (!colorValue || !newColor) { | ||
| setColorValue(newColor); | ||
| return; | ||
| } | ||
| if (newColor.toHexInt() !== colorValue.toHexInt()) { | ||
| setColorValue(newColor); | ||
| return; | ||
| } | ||
| }; | ||
| let prevValue = $4tN2K$react.useRef(colorValue); | ||
| if (prevValue.current !== colorValue) { | ||
| setInputValue(colorValue ? colorValue.toString('hex') : ''); | ||
| prevValue.current = colorValue; | ||
| } | ||
| let parsedValue = $4tN2K$react.useMemo(()=>{ | ||
| let color; | ||
| try { | ||
| color = $83fe1a57d631223b$export$6e865ea70d7724f(inputValue.startsWith('#') ? inputValue : `#${inputValue}`); | ||
| } catch (err) { | ||
| color = null; | ||
| } | ||
| return color; | ||
| }, [ | ||
| inputValue | ||
| ]); | ||
| let parsed = $4tN2K$react.useRef(null); | ||
| parsed.current = parsedValue; | ||
| let commit = ()=>{ | ||
| // Set to empty state if input value is empty | ||
| if (!inputValue.length) { | ||
| safelySetColorValue(null); | ||
| setInputValue(value1 === undefined ? '' : colorValue.toString('hex')); | ||
| return; | ||
| } | ||
| // if it failed to parse, then reset input to formatted version of current number | ||
| if (parsed.current == null) { | ||
| setInputValue(colorValue ? colorValue.toString('hex') : ''); | ||
| return; | ||
| } | ||
| safelySetColorValue(parsed.current); | ||
| // in a controlled state, the numberValue won't change, so we won't go back to our old input without help | ||
| let newColorValue = ''; | ||
| if (colorValue) newColorValue = colorValue.toString('hex'); | ||
| setInputValue(newColorValue); | ||
| }; | ||
| let increment = ()=>{ | ||
| let newValue = $d59d0c2b2ce1568f$var$addColorValue(parsed.current, step); | ||
| // if we've arrived at the same value that was previously in the state, the | ||
| // input value should be updated to match | ||
| // ex type 4, press increment, highlight the number in the input, type 4 again, press increment | ||
| // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input | ||
| if (newValue === colorValue) setInputValue(newValue.toString('hex')); | ||
| safelySetColorValue(newValue); | ||
| }; | ||
| let decrement = ()=>{ | ||
| let newValue = $d59d0c2b2ce1568f$var$addColorValue(parsed.current, -step); | ||
| // if we've arrived at the same value that was previously in the state, the | ||
| // input value should be updated to match | ||
| // ex type 4, press increment, highlight the number in the input, type 4 again, press increment | ||
| // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input | ||
| if (newValue === colorValue) setInputValue(newValue.toString('hex')); | ||
| safelySetColorValue(newValue); | ||
| }; | ||
| let incrementToMax = ()=>safelySetColorValue($d59d0c2b2ce1568f$var$MAX_COLOR) | ||
| ; | ||
| let decrementToMin = ()=>safelySetColorValue($d59d0c2b2ce1568f$var$MIN_COLOR) | ||
| ; | ||
| let validate = (value)=>{ | ||
| var ref; | ||
| return value === '' || !!((ref = value.match(/^#?[0-9a-f]{0,6}$/i)) === null || ref === void 0 ? void 0 : ref[0]); | ||
| }; | ||
| return { | ||
| validate: validate, | ||
| colorValue: colorValue, | ||
| inputValue: inputValue, | ||
| setInputValue: setInputValue, | ||
| commit: commit, | ||
| increment: increment, | ||
| incrementToMax: incrementToMax, | ||
| decrement: decrement, | ||
| decrementToMin: decrementToMin | ||
| }; | ||
| } | ||
| function $d59d0c2b2ce1568f$var$addColorValue(color, step) { | ||
| let newColor = color ? color : $d59d0c2b2ce1568f$var$MIN_COLOR; | ||
| let colorInt = newColor.toHexInt(); | ||
| let clampInt = Math.min(Math.max(colorInt + step, $d59d0c2b2ce1568f$var$MIN_COLOR_INT), $d59d0c2b2ce1568f$var$MAX_COLOR_INT); | ||
| if (clampInt !== colorInt) { | ||
| let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`; | ||
| newColor = $83fe1a57d631223b$export$6e865ea70d7724f(newColorString); | ||
| } | ||
| return newColor; | ||
| } | ||
| $parcel$exportWildcard(module.exports, $af2d7ac9990cfee2$exports); | ||
| $parcel$exportWildcard(module.exports, $5386a492cfd3234c$exports); | ||
| $parcel$exportWildcard(module.exports, $9d7d8736d45f74b8$exports); | ||
| $parcel$exportWildcard(module.exports, $d59d0c2b2ce1568f$exports); | ||
| //# sourceMappingURL=main.js.map |
1134
dist/module.js
@@ -1,1125 +0,29 @@ | ||
| import {clamp as $cBgAy$clamp, toFixedNumber as $cBgAy$toFixedNumber, useControlledState as $cBgAy$useControlledState, snapValueToStep as $cBgAy$snapValueToStep} from "@react-stately/utils"; | ||
| import {MessageDictionary as $cBgAy$MessageDictionary} from "@internationalized/message"; | ||
| import {NumberFormatter as $cBgAy$NumberFormatter} from "@internationalized/number"; | ||
| import {useRef as $cBgAy$useRef, useMemo as $cBgAy$useMemo, useState as $cBgAy$useState} from "react"; | ||
| import {useSliderState as $cBgAy$useSliderState} from "@react-stately/slider"; | ||
| import {getColorChannels as $799cddbef784668f$export$1c0c08912582810c, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js"; | ||
| import {useColorAreaState as $6e14a98a7f67141d$export$6df7f0e2cabc7eef} from "./useColorAreaState.module.js"; | ||
| import {useColorSliderState as $25a25ac0d1624665$export$57bc203e1c9c6d44} from "./useColorSliderState.module.js"; | ||
| import {useColorWheelState as $ee4262c74a467b07$export$f4301076d9336137} from "./useColorWheelState.module.js"; | ||
| import {useColorFieldState as $b335ada08155d9c0$export$d52a01683abdfcd6} from "./useColorFieldState.module.js"; | ||
| import {useColorChannelFieldState as $31a863bb88e75dd6$export$b9fc0d69c9190c4a} from "./useColorChannelFieldState.module.js"; | ||
| import {useColorPickerState as $309d2b7669014898$export$dc6b73b623f8645f} from "./useColorPickerState.module.js"; | ||
| function $parcel$interopDefault(a) { | ||
| return a && a.__esModule ? a.default : a; | ||
| } | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| /* | ||
| * Copyright 2020 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
| var $7a451c0c6841e6b9$exports = {}; | ||
| var $2d805fd52bb48883$exports = {}; | ||
| $2d805fd52bb48883$exports = JSON.parse("{\"alpha\":\"ألفا\",\"blue\":\"أزرق\",\"brightness\":\"السطوع\",\"green\":\"أخضر\",\"hue\":\"درجة اللون\",\"lightness\":\"الإضاءة\",\"red\":\"أحمر\",\"saturation\":\"التشبع\"}"); | ||
| var $6c28468dc1df643c$exports = {}; | ||
| $6c28468dc1df643c$exports = JSON.parse("{\"alpha\":\"Алфа\",\"blue\":\"Синьо\",\"brightness\":\"Яркост\",\"green\":\"Зелено\",\"hue\":\"Оттенък\",\"lightness\":\"Лекота\",\"red\":\"Червено\",\"saturation\":\"Наситеност\"}"); | ||
| var $807554f8230db0ed$exports = {}; | ||
| $807554f8230db0ed$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odstín\",\"lightness\":\"Světlost\",\"red\":\"Červená\",\"saturation\":\"Sytost\"}"); | ||
| var $7097f64386f1761c$exports = {}; | ||
| $7097f64386f1761c$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grøn\",\"hue\":\"Tone\",\"lightness\":\"Lyshed\",\"red\":\"Rød\",\"saturation\":\"Farvemætning\"}"); | ||
| var $bdd847d8beb08799$exports = {}; | ||
| $bdd847d8beb08799$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Blau\",\"brightness\":\"Helligkeit\",\"green\":\"Grün\",\"hue\":\"Farbton\",\"lightness\":\"Leuchtkraft\",\"red\":\"Rot\",\"saturation\":\"Sättigung\"}"); | ||
| var $a53e00b683950971$exports = {}; | ||
| $a53e00b683950971$exports = JSON.parse("{\"alpha\":\"Άλφα\",\"blue\":\"Μπλε\",\"brightness\":\"Φωτεινότητα\",\"green\":\"Πράσινο\",\"hue\":\"Τόνος\",\"lightness\":\"Φωτεινότητα\",\"red\":\"Κόκκινο\",\"saturation\":\"Κορεσμός\"}"); | ||
| var $21cdd87e84f28d89$exports = {}; | ||
| $21cdd87e84f28d89$exports = JSON.parse("{\"hue\":\"Hue\",\"saturation\":\"Saturation\",\"lightness\":\"Lightness\",\"brightness\":\"Brightness\",\"red\":\"Red\",\"green\":\"Green\",\"blue\":\"Blue\",\"alpha\":\"Alpha\"}"); | ||
| var $92fee9698e4d675a$exports = {}; | ||
| $92fee9698e4d675a$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Azul\",\"brightness\":\"Brillo\",\"green\":\"Verde\",\"hue\":\"Tono\",\"lightness\":\"Luminosidad\",\"red\":\"Rojo\",\"saturation\":\"Saturación\"}"); | ||
| var $7ea012e91a5ad3ee$exports = {}; | ||
| $7ea012e91a5ad3ee$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Sinine\",\"brightness\":\"Heledus\",\"green\":\"Roheline\",\"hue\":\"Värv\",\"lightness\":\"Valgus\",\"red\":\"Punane\",\"saturation\":\"Küllastus\"}"); | ||
| var $8460c13bb2d75345$exports = {}; | ||
| $8460c13bb2d75345$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Sininen\",\"brightness\":\"Kirkkaus\",\"green\":\"Vihreä\",\"hue\":\"Sävy\",\"lightness\":\"Valomäärä\",\"red\":\"Punainen\",\"saturation\":\"Värikylläisyys\"}"); | ||
| var $2a2d5dc14e680587$exports = {}; | ||
| $2a2d5dc14e680587$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Bleu\",\"brightness\":\"Luminosité\",\"green\":\"Vert\",\"hue\":\"Teinte\",\"lightness\":\"Luminosité\",\"red\":\"Rouge\",\"saturation\":\"Saturation\"}"); | ||
| var $9a3f292371bb0589$exports = {}; | ||
| $9a3f292371bb0589$exports = JSON.parse("{\"alpha\":\"אלפא\",\"blue\":\"כחול\",\"brightness\":\"בהירות\",\"green\":\"ירוק\",\"hue\":\"גוון\",\"lightness\":\"כמות אור\",\"red\":\"אדום\",\"saturation\":\"רוויה\"}"); | ||
| var $4742231a685fa068$exports = {}; | ||
| $4742231a685fa068$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Svjetlina\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvijetljenost\",\"red\":\"Crvena\",\"saturation\":\"Zasićenost\"}"); | ||
| var $05e247fd2960981e$exports = {}; | ||
| $05e247fd2960981e$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Kék\",\"brightness\":\"Fényesség\",\"green\":\"Zöld\",\"hue\":\"Színárnyalat\",\"lightness\":\"Világosság\",\"red\":\"Piros\",\"saturation\":\"Telítettség\"}"); | ||
| var $a67524a79ccbe190$exports = {}; | ||
| $a67524a79ccbe190$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blu\",\"brightness\":\"Luminosità\",\"green\":\"Verde\",\"hue\":\"Tonalità\",\"lightness\":\"Luminosità\",\"red\":\"Rosso\",\"saturation\":\"Saturazione\"}"); | ||
| var $a9eefe9d6c8cb7d5$exports = {}; | ||
| $a9eefe9d6c8cb7d5$exports = JSON.parse("{\"alpha\":\"アルファ\",\"blue\":\"青\",\"brightness\":\"明るさ\",\"green\":\"緑\",\"hue\":\"色相\",\"lightness\":\"明度\",\"red\":\"赤\",\"saturation\":\"彩度\"}"); | ||
| var $4a6b836d4f1bfaba$exports = {}; | ||
| $4a6b836d4f1bfaba$exports = JSON.parse("{\"alpha\":\"알파\",\"blue\":\"파랑\",\"brightness\":\"명도\",\"green\":\"초록\",\"hue\":\"색조\",\"lightness\":\"밝기\",\"red\":\"빨강\",\"saturation\":\"채도\"}"); | ||
| var $c950e4b1c482abde$exports = {}; | ||
| $c950e4b1c482abde$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mėlyna\",\"brightness\":\"Ryškumas\",\"green\":\"Žalia\",\"hue\":\"Atspalvis\",\"lightness\":\"Šviesumas\",\"red\":\"Raudona\",\"saturation\":\"Įsotinimas\"}"); | ||
| var $d10d6b60dc50b438$exports = {}; | ||
| $d10d6b60dc50b438$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Zila\",\"brightness\":\"Spilgtums\",\"green\":\"Zaļa\",\"hue\":\"Nokrāsa\",\"lightness\":\"Gaišums\",\"red\":\"Sarkana\",\"saturation\":\"Piesātinājums\"}"); | ||
| var $371a732b2494f452$exports = {}; | ||
| $371a732b2494f452$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grønn\",\"hue\":\"Fargetone\",\"lightness\":\"Lyshet\",\"red\":\"Rød\",\"saturation\":\"Metning\"}"); | ||
| var $6d042cae6243464b$exports = {}; | ||
| $6d042cae6243464b$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blauw\",\"brightness\":\"Helderheid\",\"green\":\"Groen\",\"hue\":\"Kleurtoon\",\"lightness\":\"Lichtsterkte\",\"red\":\"Rood\",\"saturation\":\"Verzadiging\"}"); | ||
| var $d9ab5c2611e0bcd3$exports = {}; | ||
| $d9ab5c2611e0bcd3$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Niebieski\",\"brightness\":\"Jasność\",\"green\":\"Zielony\",\"hue\":\"Odcień\",\"lightness\":\"Jaskrawość\",\"red\":\"Czerwony\",\"saturation\":\"Nasycenie\"}"); | ||
| var $73f77c9902e29ca6$exports = {}; | ||
| $73f77c9902e29ca6$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Brilho\",\"green\":\"Verde\",\"hue\":\"Matiz\",\"lightness\":\"Luminosidade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}"); | ||
| var $4f461eb266a95c10$exports = {}; | ||
| $4f461eb266a95c10$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Luminosidade\",\"green\":\"Verde\",\"hue\":\"Tonalidade\",\"lightness\":\"Claridade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}"); | ||
| var $dc46bea2f2597899$exports = {}; | ||
| $dc46bea2f2597899$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Albastru\",\"brightness\":\"Luminozitate\",\"green\":\"Verde\",\"hue\":\"Nuanță\",\"lightness\":\"Luminozitate\",\"red\":\"Roșu\",\"saturation\":\"Saturație\"}"); | ||
| var $622bbd6719cc95af$exports = {}; | ||
| $622bbd6719cc95af$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синий\",\"brightness\":\"Яркость\",\"green\":\"Зеленый\",\"hue\":\"Оттенок\",\"lightness\":\"Освещенность\",\"red\":\"Красный\",\"saturation\":\"Насыщенность\"}"); | ||
| var $4da03c1ecd9a9c7d$exports = {}; | ||
| $4da03c1ecd9a9c7d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odtieň\",\"lightness\":\"Svetlosť\",\"red\":\"Červená\",\"saturation\":\"Sýtosť\"}"); | ||
| var $edb6b2fe456ed4e8$exports = {}; | ||
| $edb6b2fe456ed4e8$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modra\",\"brightness\":\"Svetlost\",\"green\":\"Zelena\",\"hue\":\"Barva\",\"lightness\":\"Lahkost\",\"red\":\"Rdeča\",\"saturation\":\"Nasičenost\"}"); | ||
| var $264cd81c52b30815$exports = {}; | ||
| $264cd81c52b30815$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Osvetljenost\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvetljenje\",\"red\":\"Crvena\",\"saturation\":\"Zasićenje\"}"); | ||
| var $6f80afde0270dda7$exports = {}; | ||
| $6f80afde0270dda7$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blått\",\"brightness\":\"Ljusstyrka\",\"green\":\"Grönt\",\"hue\":\"Nyans\",\"lightness\":\"Ljushet\",\"red\":\"Rött\",\"saturation\":\"Mättnad\"}"); | ||
| var $23a92651c6957668$exports = {}; | ||
| $23a92651c6957668$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mavi\",\"brightness\":\"Parlaklık\",\"green\":\"Yeşil\",\"hue\":\"Ton\",\"lightness\":\"Canlılık\",\"red\":\"Kırmızı\",\"saturation\":\"Doygunluk\"}"); | ||
| var $0f9b1074d04f4954$exports = {}; | ||
| $0f9b1074d04f4954$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синій\",\"brightness\":\"Яскравість\",\"green\":\"Зелений\",\"hue\":\"Тон\",\"lightness\":\"Освітленість\",\"red\":\"Червоний\",\"saturation\":\"Насиченість\"}"); | ||
| var $a9cedf75b94e4916$exports = {}; | ||
| $a9cedf75b94e4916$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"蓝色\",\"brightness\":\"亮度\",\"green\":\"绿色\",\"hue\":\"色相\",\"lightness\":\"明亮度\",\"red\":\"红色\",\"saturation\":\"饱和度\"}"); | ||
| var $37cff576474bc8d4$exports = {}; | ||
| $37cff576474bc8d4$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"藍色\",\"brightness\":\"亮度\",\"green\":\"綠色\",\"hue\":\"色相\",\"lightness\":\"明亮\",\"red\":\"紅色\",\"saturation\":\"飽和度\"}"); | ||
| $7a451c0c6841e6b9$exports = { | ||
| "ar-AE": $2d805fd52bb48883$exports, | ||
| "bg-BG": $6c28468dc1df643c$exports, | ||
| "cs-CZ": $807554f8230db0ed$exports, | ||
| "da-DK": $7097f64386f1761c$exports, | ||
| "de-DE": $bdd847d8beb08799$exports, | ||
| "el-GR": $a53e00b683950971$exports, | ||
| "en-US": $21cdd87e84f28d89$exports, | ||
| "es-ES": $92fee9698e4d675a$exports, | ||
| "et-EE": $7ea012e91a5ad3ee$exports, | ||
| "fi-FI": $8460c13bb2d75345$exports, | ||
| "fr-FR": $2a2d5dc14e680587$exports, | ||
| "he-IL": $9a3f292371bb0589$exports, | ||
| "hr-HR": $4742231a685fa068$exports, | ||
| "hu-HU": $05e247fd2960981e$exports, | ||
| "it-IT": $a67524a79ccbe190$exports, | ||
| "ja-JP": $a9eefe9d6c8cb7d5$exports, | ||
| "ko-KR": $4a6b836d4f1bfaba$exports, | ||
| "lt-LT": $c950e4b1c482abde$exports, | ||
| "lv-LV": $d10d6b60dc50b438$exports, | ||
| "nb-NO": $371a732b2494f452$exports, | ||
| "nl-NL": $6d042cae6243464b$exports, | ||
| "pl-PL": $d9ab5c2611e0bcd3$exports, | ||
| "pt-BR": $73f77c9902e29ca6$exports, | ||
| "pt-PT": $4f461eb266a95c10$exports, | ||
| "ro-RO": $dc46bea2f2597899$exports, | ||
| "ru-RU": $622bbd6719cc95af$exports, | ||
| "sk-SK": $4da03c1ecd9a9c7d$exports, | ||
| "sl-SI": $edb6b2fe456ed4e8$exports, | ||
| "sr-SP": $264cd81c52b30815$exports, | ||
| "sv-SE": $6f80afde0270dda7$exports, | ||
| "tr-TR": $23a92651c6957668$exports, | ||
| "uk-UA": $0f9b1074d04f4954$exports, | ||
| "zh-CN": $a9cedf75b94e4916$exports, | ||
| "zh-TW": $37cff576474bc8d4$exports | ||
| }; | ||
| const $799cddbef784668f$var$messages = new $cBgAy$MessageDictionary((/*@__PURE__*/$parcel$interopDefault($7a451c0c6841e6b9$exports))); | ||
| function $799cddbef784668f$export$6e865ea70d7724f(value) { | ||
| let res = $799cddbef784668f$var$RGBColor.parse(value) || $799cddbef784668f$var$HSBColor.parse(value) || $799cddbef784668f$var$HSLColor.parse(value); | ||
| if (res) return res; | ||
| throw new Error('Invalid color value: ' + value); | ||
| } | ||
| function $799cddbef784668f$export$4cde5df63f53f473(v) { | ||
| if (typeof v === 'string') return $799cddbef784668f$export$6e865ea70d7724f(v); | ||
| else return v; | ||
| } | ||
| class $799cddbef784668f$var$Color { | ||
| toHexInt() { | ||
| return this.toFormat('rgb').toHexInt(); | ||
| } | ||
| getChannelValue(channel) { | ||
| if (channel in this) return this[channel]; | ||
| throw new Error('Unsupported color channel: ' + channel); | ||
| } | ||
| withChannelValue(channel, value) { | ||
| if (channel in this) { | ||
| let x = this.clone(); | ||
| x[channel] = value; | ||
| return x; | ||
| } | ||
| throw new Error('Unsupported color channel: ' + channel); | ||
| } | ||
| getChannelName(channel, locale) { | ||
| return $799cddbef784668f$var$messages.getStringForLocale(channel, locale); | ||
| } | ||
| getColorSpaceAxes(xyChannels) { | ||
| let { xChannel: xChannel , yChannel: yChannel } = xyChannels; | ||
| let xCh = xChannel || this.getColorChannels().find((c)=>c !== yChannel | ||
| ); | ||
| let yCh = yChannel || this.getColorChannels().find((c)=>c !== xCh | ||
| ); | ||
| let zCh = this.getColorChannels().find((c)=>c !== xCh && c !== yCh | ||
| ); | ||
| return { | ||
| xChannel: xCh, | ||
| yChannel: yCh, | ||
| zChannel: zCh | ||
| }; | ||
| } | ||
| } | ||
| const $799cddbef784668f$var$HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i; | ||
| // X = <negative/positive number with/without decimal places> | ||
| // before/after a comma, 0 or more whitespaces are allowed | ||
| // - rgb(X, X, X) | ||
| // - rgba(X, X, X, X) | ||
| const $799cddbef784668f$var$RGB_REGEX = /rgb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?)\)|rgba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d(.\d+)?)\)/; | ||
| class $799cddbef784668f$var$RGBColor extends $799cddbef784668f$var$Color { | ||
| static parse(value) { | ||
| let m; | ||
| if (m = value.match($799cddbef784668f$var$HEX_REGEX)) { | ||
| if (m[1]) { | ||
| let r = parseInt(m[1][0] + m[1][0], 16); | ||
| let g = parseInt(m[1][1] + m[1][1], 16); | ||
| let b = parseInt(m[1][2] + m[1][2], 16); | ||
| return new $799cddbef784668f$var$RGBColor(r, g, b, 1); | ||
| } else if (m[2]) { | ||
| let r = parseInt(m[2][0] + m[2][1], 16); | ||
| let g = parseInt(m[2][2] + m[2][3], 16); | ||
| let b = parseInt(m[2][4] + m[2][5], 16); | ||
| return new $799cddbef784668f$var$RGBColor(r, g, b, 1); | ||
| } | ||
| } | ||
| if (m = value.match($799cddbef784668f$var$RGB_REGEX)) { | ||
| var ref; | ||
| const [r, g, b, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim()) | ||
| ); | ||
| return new $799cddbef784668f$var$RGBColor($cBgAy$clamp(r, 0, 255), $cBgAy$clamp(g, 0, 255), $cBgAy$clamp(b, 0, 255), $cBgAy$clamp(a !== null && a !== void 0 ? a : 1, 0, 1)); | ||
| } | ||
| } | ||
| toString(format) { | ||
| switch(format){ | ||
| case 'hex': | ||
| return '#' + (this.red.toString(16).padStart(2, '0') + this.green.toString(16).padStart(2, '0') + this.blue.toString(16).padStart(2, '0')).toUpperCase(); | ||
| case 'hexa': | ||
| return '#' + (this.red.toString(16).padStart(2, '0') + this.green.toString(16).padStart(2, '0') + this.blue.toString(16).padStart(2, '0') + Math.round(this.alpha * 255).toString(16).padStart(2, '0')).toUpperCase(); | ||
| case 'rgb': | ||
| return `rgb(${this.red}, ${this.green}, ${this.blue})`; | ||
| case 'css': | ||
| case 'rgba': | ||
| return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`; | ||
| default: | ||
| return this.toFormat(format).toString(format); | ||
| } | ||
| } | ||
| toFormat(format) { | ||
| switch(format){ | ||
| case 'hex': | ||
| case 'hexa': | ||
| case 'rgb': | ||
| case 'rgba': | ||
| return this; | ||
| case 'hsb': | ||
| case 'hsba': | ||
| return this.toHSB(); | ||
| case 'hsl': | ||
| case 'hsla': | ||
| return this.toHSL(); | ||
| default: | ||
| throw new Error('Unsupported color conversion: rgb -> ' + format); | ||
| } | ||
| } | ||
| toHexInt() { | ||
| return this.red << 16 | this.green << 8 | this.blue; | ||
| } | ||
| /** | ||
| * Converts an RGB color value to HSB. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB. | ||
| * @returns An HSBColor object. | ||
| */ toHSB() { | ||
| const red = this.red / 255; | ||
| const green = this.green / 255; | ||
| const blue = this.blue / 255; | ||
| const min = Math.min(red, green, blue); | ||
| const brightness = Math.max(red, green, blue); | ||
| const chroma = brightness - min; | ||
| const saturation = brightness === 0 ? 0 : chroma / brightness; | ||
| let hue = 0; // achromatic | ||
| if (chroma !== 0) { | ||
| switch(brightness){ | ||
| case red: | ||
| hue = (green - blue) / chroma + (green < blue ? 6 : 0); | ||
| break; | ||
| case green: | ||
| hue = (blue - red) / chroma + 2; | ||
| break; | ||
| case blue: | ||
| hue = (red - green) / chroma + 4; | ||
| break; | ||
| } | ||
| hue /= 6; | ||
| } | ||
| return new $799cddbef784668f$var$HSBColor($cBgAy$toFixedNumber(hue * 360, 2), $cBgAy$toFixedNumber(saturation * 100, 2), $cBgAy$toFixedNumber(brightness * 100, 2), this.alpha); | ||
| } | ||
| /** | ||
| * Converts an RGB color value to HSL. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB. | ||
| * @returns An HSLColor object. | ||
| */ toHSL() { | ||
| const red = this.red / 255; | ||
| const green = this.green / 255; | ||
| const blue = this.blue / 255; | ||
| const min = Math.min(red, green, blue); | ||
| const max = Math.max(red, green, blue); | ||
| const lightness = (max + min) / 2; | ||
| const chroma = max - min; | ||
| let hue; | ||
| let saturation; | ||
| if (chroma === 0) hue = saturation = 0; // achromatic | ||
| else { | ||
| saturation = chroma / (lightness < 0.5 ? max + min : 2 - max - min); | ||
| switch(max){ | ||
| case red: | ||
| hue = (green - blue) / chroma + (green < blue ? 6 : 0); | ||
| break; | ||
| case green: | ||
| hue = (blue - red) / chroma + 2; | ||
| break; | ||
| case blue: | ||
| hue = (red - green) / chroma + 4; | ||
| break; | ||
| } | ||
| hue /= 6; | ||
| } | ||
| return new $799cddbef784668f$var$HSLColor($cBgAy$toFixedNumber(hue * 360, 2), $cBgAy$toFixedNumber(saturation * 100, 2), $cBgAy$toFixedNumber(lightness * 100, 2), this.alpha); | ||
| } | ||
| clone() { | ||
| return new $799cddbef784668f$var$RGBColor(this.red, this.green, this.blue, this.alpha); | ||
| } | ||
| getChannelRange(channel) { | ||
| switch(channel){ | ||
| case 'red': | ||
| case 'green': | ||
| case 'blue': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 255, | ||
| step: 1, | ||
| pageSize: 17 | ||
| }; | ||
| case 'alpha': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 1, | ||
| step: 0.01, | ||
| pageSize: 0.1 | ||
| }; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| } | ||
| formatChannelValue(channel, locale) { | ||
| let options; | ||
| let value = this.getChannelValue(channel); | ||
| switch(channel){ | ||
| case 'red': | ||
| case 'green': | ||
| case 'blue': | ||
| options = { | ||
| style: 'decimal' | ||
| }; | ||
| break; | ||
| case 'alpha': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| break; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| return new $cBgAy$NumberFormatter(locale, options).format(value); | ||
| } | ||
| getColorSpace() { | ||
| return 'rgb'; | ||
| } | ||
| getColorChannels() { | ||
| return $799cddbef784668f$var$RGBColor.colorChannels; | ||
| } | ||
| constructor(red, green, blue, alpha){ | ||
| super(); | ||
| this.red = red; | ||
| this.green = green; | ||
| this.blue = blue; | ||
| this.alpha = alpha; | ||
| } | ||
| } | ||
| $799cddbef784668f$var$RGBColor.colorChannels = [ | ||
| 'red', | ||
| 'green', | ||
| 'blue' | ||
| ]; | ||
| // X = <negative/positive number with/without decimal places> | ||
| // before/after a comma, 0 or more whitespaces are allowed | ||
| // - hsb(X, X%, X%) | ||
| // - hsba(X, X%, X%, X) | ||
| const $799cddbef784668f$var$HSB_REGEX = /hsb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/; | ||
| class $799cddbef784668f$var$HSBColor extends $799cddbef784668f$var$Color { | ||
| static parse(value) { | ||
| let m; | ||
| if (m = value.match($799cddbef784668f$var$HSB_REGEX)) { | ||
| var ref; | ||
| const [h, s, b, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim().replace('%', '')) | ||
| ); | ||
| return new $799cddbef784668f$var$HSBColor($799cddbef784668f$var$mod(h, 360), $cBgAy$clamp(s, 0, 100), $cBgAy$clamp(b, 0, 100), $cBgAy$clamp(a !== null && a !== void 0 ? a : 1, 0, 1)); | ||
| } | ||
| } | ||
| toString(format) { | ||
| switch(format){ | ||
| case 'css': | ||
| return this.toHSL().toString('css'); | ||
| case 'hex': | ||
| return this.toRGB().toString('hex'); | ||
| case 'hexa': | ||
| return this.toRGB().toString('hexa'); | ||
| case 'hsb': | ||
| return `hsb(${this.hue}, ${$cBgAy$toFixedNumber(this.saturation, 2)}%, ${$cBgAy$toFixedNumber(this.brightness, 2)}%)`; | ||
| case 'hsba': | ||
| return `hsba(${this.hue}, ${$cBgAy$toFixedNumber(this.saturation, 2)}%, ${$cBgAy$toFixedNumber(this.brightness, 2)}%, ${this.alpha})`; | ||
| default: | ||
| return this.toFormat(format).toString(format); | ||
| } | ||
| } | ||
| toFormat(format) { | ||
| switch(format){ | ||
| case 'hsb': | ||
| case 'hsba': | ||
| return this; | ||
| case 'hsl': | ||
| case 'hsla': | ||
| return this.toHSL(); | ||
| case 'rgb': | ||
| case 'rgba': | ||
| return this.toRGB(); | ||
| default: | ||
| throw new Error('Unsupported color conversion: hsb -> ' + format); | ||
| } | ||
| } | ||
| /** | ||
| * Converts a HSB color to HSL. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL. | ||
| * @returns An HSLColor object. | ||
| */ toHSL() { | ||
| let saturation = this.saturation / 100; | ||
| let brightness = this.brightness / 100; | ||
| let lightness = brightness * (1 - saturation / 2); | ||
| saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness); | ||
| return new $799cddbef784668f$var$HSLColor($cBgAy$toFixedNumber(this.hue, 2), $cBgAy$toFixedNumber(saturation * 100, 2), $cBgAy$toFixedNumber(lightness * 100, 2), this.alpha); | ||
| } | ||
| /** | ||
| * Converts a HSV color value to RGB. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative. | ||
| * @returns An RGBColor object. | ||
| */ toRGB() { | ||
| let hue = this.hue; | ||
| let saturation = this.saturation / 100; | ||
| let brightness = this.brightness / 100; | ||
| let fn = (n, k = (n + hue / 60) % 6)=>brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0) | ||
| ; | ||
| return new $799cddbef784668f$var$RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha); | ||
| } | ||
| clone() { | ||
| return new $799cddbef784668f$var$HSBColor(this.hue, this.saturation, this.brightness, this.alpha); | ||
| } | ||
| getChannelRange(channel) { | ||
| switch(channel){ | ||
| case 'hue': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 360, | ||
| step: 1, | ||
| pageSize: 15 | ||
| }; | ||
| case 'saturation': | ||
| case 'brightness': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 100, | ||
| step: 1, | ||
| pageSize: 10 | ||
| }; | ||
| case 'alpha': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 1, | ||
| step: 0.01, | ||
| pageSize: 0.1 | ||
| }; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| } | ||
| formatChannelValue(channel, locale) { | ||
| let options; | ||
| let value = this.getChannelValue(channel); | ||
| switch(channel){ | ||
| case 'hue': | ||
| options = { | ||
| style: 'unit', | ||
| unit: 'degree', | ||
| unitDisplay: 'narrow' | ||
| }; | ||
| break; | ||
| case 'saturation': | ||
| case 'brightness': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| value /= 100; | ||
| break; | ||
| case 'alpha': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| break; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| return new $cBgAy$NumberFormatter(locale, options).format(value); | ||
| } | ||
| getColorSpace() { | ||
| return 'hsb'; | ||
| } | ||
| getColorChannels() { | ||
| return $799cddbef784668f$var$HSBColor.colorChannels; | ||
| } | ||
| constructor(hue, saturation, brightness, alpha){ | ||
| super(); | ||
| this.hue = hue; | ||
| this.saturation = saturation; | ||
| this.brightness = brightness; | ||
| this.alpha = alpha; | ||
| } | ||
| } | ||
| $799cddbef784668f$var$HSBColor.colorChannels = [ | ||
| 'hue', | ||
| 'saturation', | ||
| 'brightness' | ||
| ]; | ||
| // X = <negative/positive number with/without decimal places> | ||
| // before/after a comma, 0 or more whitespaces are allowed | ||
| // - hsl(X, X%, X%) | ||
| // - hsla(X, X%, X%, X) | ||
| const $799cddbef784668f$var$HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsla\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/; | ||
| function $799cddbef784668f$var$mod(n, m) { | ||
| return (n % m + m) % m; | ||
| } | ||
| class $799cddbef784668f$var$HSLColor extends $799cddbef784668f$var$Color { | ||
| static parse(value) { | ||
| let m; | ||
| if (m = value.match($799cddbef784668f$var$HSL_REGEX)) { | ||
| var ref; | ||
| const [h, s, l, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim().replace('%', '')) | ||
| ); | ||
| return new $799cddbef784668f$var$HSLColor($799cddbef784668f$var$mod(h, 360), $cBgAy$clamp(s, 0, 100), $cBgAy$clamp(l, 0, 100), $cBgAy$clamp(a !== null && a !== void 0 ? a : 1, 0, 1)); | ||
| } | ||
| } | ||
| toString(format) { | ||
| switch(format){ | ||
| case 'hex': | ||
| return this.toRGB().toString('hex'); | ||
| case 'hexa': | ||
| return this.toRGB().toString('hexa'); | ||
| case 'hsl': | ||
| return `hsl(${this.hue}, ${$cBgAy$toFixedNumber(this.saturation, 2)}%, ${$cBgAy$toFixedNumber(this.lightness, 2)}%)`; | ||
| case 'css': | ||
| case 'hsla': | ||
| return `hsla(${this.hue}, ${$cBgAy$toFixedNumber(this.saturation, 2)}%, ${$cBgAy$toFixedNumber(this.lightness, 2)}%, ${this.alpha})`; | ||
| default: | ||
| return this.toFormat(format).toString(format); | ||
| } | ||
| } | ||
| toFormat(format) { | ||
| switch(format){ | ||
| case 'hsl': | ||
| case 'hsla': | ||
| return this; | ||
| case 'hsb': | ||
| case 'hsba': | ||
| return this.toHSB(); | ||
| case 'rgb': | ||
| case 'rgba': | ||
| return this.toRGB(); | ||
| default: | ||
| throw new Error('Unsupported color conversion: hsl -> ' + format); | ||
| } | ||
| } | ||
| /** | ||
| * Converts a HSL color to HSB. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV. | ||
| * @returns An HSBColor object. | ||
| */ toHSB() { | ||
| let saturation = this.saturation / 100; | ||
| let lightness = this.lightness / 100; | ||
| let brightness = lightness + saturation * Math.min(lightness, 1 - lightness); | ||
| saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness); | ||
| return new $799cddbef784668f$var$HSBColor($cBgAy$toFixedNumber(this.hue, 2), $cBgAy$toFixedNumber(saturation * 100, 2), $cBgAy$toFixedNumber(brightness * 100, 2), this.alpha); | ||
| } | ||
| /** | ||
| * Converts a HSL color to RGB. | ||
| * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative. | ||
| * @returns An RGBColor object. | ||
| */ toRGB() { | ||
| let hue = this.hue; | ||
| let saturation = this.saturation / 100; | ||
| let lightness = this.lightness / 100; | ||
| let a = saturation * Math.min(lightness, 1 - lightness); | ||
| let fn = (n, k = (n + hue / 30) % 12)=>lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1) | ||
| ; | ||
| return new $799cddbef784668f$var$RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha); | ||
| } | ||
| clone() { | ||
| return new $799cddbef784668f$var$HSLColor(this.hue, this.saturation, this.lightness, this.alpha); | ||
| } | ||
| getChannelRange(channel) { | ||
| switch(channel){ | ||
| case 'hue': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 360, | ||
| step: 1, | ||
| pageSize: 15 | ||
| }; | ||
| case 'saturation': | ||
| case 'lightness': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 100, | ||
| step: 1, | ||
| pageSize: 10 | ||
| }; | ||
| case 'alpha': | ||
| return { | ||
| minValue: 0, | ||
| maxValue: 1, | ||
| step: 0.01, | ||
| pageSize: 0.1 | ||
| }; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| } | ||
| formatChannelValue(channel, locale) { | ||
| let options; | ||
| let value = this.getChannelValue(channel); | ||
| switch(channel){ | ||
| case 'hue': | ||
| options = { | ||
| style: 'unit', | ||
| unit: 'degree', | ||
| unitDisplay: 'narrow' | ||
| }; | ||
| break; | ||
| case 'saturation': | ||
| case 'lightness': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| value /= 100; | ||
| break; | ||
| case 'alpha': | ||
| options = { | ||
| style: 'percent' | ||
| }; | ||
| break; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| return new $cBgAy$NumberFormatter(locale, options).format(value); | ||
| } | ||
| getColorSpace() { | ||
| return 'hsl'; | ||
| } | ||
| getColorChannels() { | ||
| return $799cddbef784668f$var$HSLColor.colorChannels; | ||
| } | ||
| constructor(hue, saturation, lightness, alpha){ | ||
| super(); | ||
| this.hue = hue; | ||
| this.saturation = saturation; | ||
| this.lightness = lightness; | ||
| this.alpha = alpha; | ||
| } | ||
| } | ||
| $799cddbef784668f$var$HSLColor.colorChannels = [ | ||
| 'hue', | ||
| 'saturation', | ||
| 'lightness' | ||
| ]; | ||
| var $6e14a98a7f67141d$exports = {}; | ||
| $parcel$export($6e14a98a7f67141d$exports, "useColorAreaState", () => $6e14a98a7f67141d$export$6df7f0e2cabc7eef); | ||
| const $6e14a98a7f67141d$var$DEFAULT_COLOR = $799cddbef784668f$export$6e865ea70d7724f('#ffffff'); | ||
| function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) { | ||
| let { value: value1 , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd } = props; | ||
| if (!value1 && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR; | ||
| let [color, setColor] = $cBgAy$useControlledState(value1 && $799cddbef784668f$export$4cde5df63f53f473(value1), defaultValue && $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange); | ||
| let valueRef = $cBgAy$useRef(color); | ||
| valueRef.current = color; | ||
| let channels = $cBgAy$useMemo(()=>valueRef.current.getColorSpaceAxes({ | ||
| xChannel: xChannel, | ||
| yChannel: yChannel | ||
| }) | ||
| , [ | ||
| xChannel, | ||
| yChannel | ||
| ]); | ||
| let xChannelRange = color.getChannelRange(channels.xChannel); | ||
| let yChannelRange = color.getChannelRange(channels.yChannel); | ||
| let { minValue: minValueX , maxValue: maxValueX , step: stepX , pageSize: pageSizeX } = xChannelRange; | ||
| let { minValue: minValueY , maxValue: maxValueY , step: stepY , pageSize: pageSizeY } = yChannelRange; | ||
| let [isDragging1, setDragging] = $cBgAy$useState(false); | ||
| let isDraggingRef = $cBgAy$useRef(false).current; | ||
| let xValue = color.getChannelValue(channels.xChannel); | ||
| let yValue = color.getChannelValue(channels.yChannel); | ||
| let setXValue = (v)=>{ | ||
| if (v === xValue) return; | ||
| valueRef.current = color.withChannelValue(channels.xChannel, v); | ||
| setColor(valueRef.current); | ||
| }; | ||
| let setYValue = (v)=>{ | ||
| if (v === yValue) return; | ||
| valueRef.current = color.withChannelValue(channels.yChannel, v); | ||
| setColor(valueRef.current); | ||
| }; | ||
| return { | ||
| channels: channels, | ||
| xChannelStep: stepX, | ||
| yChannelStep: stepY, | ||
| xChannelPageStep: pageSizeX, | ||
| yChannelPageStep: pageSizeY, | ||
| value: color, | ||
| setValue (value) { | ||
| let c = $799cddbef784668f$export$4cde5df63f53f473(value); | ||
| valueRef.current = c; | ||
| setColor(c); | ||
| }, | ||
| xValue: xValue, | ||
| setXValue: setXValue, | ||
| yValue: yValue, | ||
| setYValue: setYValue, | ||
| setColorFromPoint (x, y) { | ||
| let newXValue = minValueX + $cBgAy$clamp(x, 0, 1) * (maxValueX - minValueX); | ||
| let newYValue = minValueY + (1 - $cBgAy$clamp(y, 0, 1)) * (maxValueY - minValueY); | ||
| let newColor; | ||
| if (newXValue !== xValue) { | ||
| // Round new value to multiple of step, clamp value between min and max | ||
| newXValue = $cBgAy$snapValueToStep(newXValue, minValueX, maxValueX, stepX); | ||
| newColor = color.withChannelValue(channels.xChannel, newXValue); | ||
| } | ||
| if (newYValue !== yValue) { | ||
| // Round new value to multiple of step, clamp value between min and max | ||
| newYValue = $cBgAy$snapValueToStep(newYValue, minValueY, maxValueY, stepY); | ||
| newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue); | ||
| } | ||
| if (newColor) setColor(newColor); | ||
| }, | ||
| getThumbPosition () { | ||
| let x = (xValue - minValueX) / (maxValueX - minValueX); | ||
| let y = 1 - (yValue - minValueY) / (maxValueY - minValueY); | ||
| return { | ||
| x: x, | ||
| y: y | ||
| }; | ||
| }, | ||
| incrementX (stepSize) { | ||
| setXValue(xValue + stepSize > maxValueX ? maxValueX : $cBgAy$snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX)); | ||
| }, | ||
| incrementY (stepSize) { | ||
| setYValue(yValue + stepSize > maxValueY ? maxValueY : $cBgAy$snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY)); | ||
| }, | ||
| decrementX (stepSize) { | ||
| setXValue($cBgAy$snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX)); | ||
| }, | ||
| decrementY (stepSize) { | ||
| setYValue($cBgAy$snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY)); | ||
| }, | ||
| setDragging (isDragging) { | ||
| let wasDragging = isDraggingRef; | ||
| isDraggingRef = isDragging; | ||
| if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current); | ||
| setDragging(isDragging); | ||
| }, | ||
| isDragging: isDragging1, | ||
| getDisplayColor () { | ||
| return color.withChannelValue('alpha', 1); | ||
| } | ||
| }; | ||
| } | ||
| var $25a25ac0d1624665$exports = {}; | ||
| $parcel$export($25a25ac0d1624665$exports, "useColorSliderState", () => $25a25ac0d1624665$export$57bc203e1c9c6d44); | ||
| function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) { | ||
| let { channel: channel , value: value1 , defaultValue: defaultValue , onChange: onChange , locale: locale , ...otherProps } = props; | ||
| if (value1 == null && defaultValue == null) throw new Error('useColorSliderState requires a value or defaultValue'); | ||
| let [color, setColor] = $cBgAy$useControlledState(value1 && $799cddbef784668f$export$4cde5df63f53f473(value1), defaultValue && $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange); | ||
| let sliderState = $cBgAy$useSliderState({ | ||
| ...color.getChannelRange(channel), | ||
| ...otherProps, | ||
| // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript. | ||
| numberFormatter: null, | ||
| value: [ | ||
| color.getChannelValue(channel) | ||
| ], | ||
| onChange ([v]) { | ||
| setColor(color.withChannelValue(channel, v)); | ||
| }, | ||
| onChangeEnd ([v]) { | ||
| // onChange will have already been called with the right value, this is just to trigger onChangeEnd | ||
| if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v)); | ||
| } | ||
| }); | ||
| let { step: step , pageSize: pageSize } = color.getChannelRange(channel); | ||
| return { | ||
| ...sliderState, | ||
| value: color, | ||
| setValue (value) { | ||
| setColor($799cddbef784668f$export$4cde5df63f53f473(value)); | ||
| }, | ||
| getDisplayColor () { | ||
| switch(channel){ | ||
| case 'hue': | ||
| return $799cddbef784668f$export$6e865ea70d7724f(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`); | ||
| case 'lightness': | ||
| case 'brightness': | ||
| case 'saturation': | ||
| case 'red': | ||
| case 'green': | ||
| case 'blue': | ||
| return color.withChannelValue('alpha', 1); | ||
| case 'alpha': | ||
| return color; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| }, | ||
| getThumbValueLabel () { | ||
| return color.formatChannelValue(channel, locale); | ||
| }, | ||
| step: step, | ||
| pageSize: pageSize | ||
| }; | ||
| } | ||
| var $ee4262c74a467b07$exports = {}; | ||
| $parcel$export($ee4262c74a467b07$exports, "useColorWheelState", () => $ee4262c74a467b07$export$f4301076d9336137); | ||
| const $ee4262c74a467b07$var$DEFAULT_COLOR = $799cddbef784668f$export$6e865ea70d7724f('hsl(0, 100%, 50%)'); | ||
| function $ee4262c74a467b07$var$roundToStep(value, step) { | ||
| return Math.round(value / step) * step; | ||
| } | ||
| function $ee4262c74a467b07$var$mod(n, m) { | ||
| return (n % m + m) % m; | ||
| } | ||
| function $ee4262c74a467b07$var$roundDown(v) { | ||
| let r = Math.floor(v); | ||
| if (r === v) return v - 1; | ||
| else return r; | ||
| } | ||
| function $ee4262c74a467b07$var$degToRad(deg) { | ||
| return deg * Math.PI / 180; | ||
| } | ||
| function $ee4262c74a467b07$var$radToDeg(rad) { | ||
| return rad * 180 / Math.PI; | ||
| } | ||
| // 0deg = 3 o'clock. increases clockwise | ||
| function $ee4262c74a467b07$var$angleToCartesian(angle, radius) { | ||
| let rad = $ee4262c74a467b07$var$degToRad(360 - angle + 90); | ||
| let x = Math.sin(rad) * radius; | ||
| let y = Math.cos(rad) * radius; | ||
| return { | ||
| x: x, | ||
| y: y | ||
| }; | ||
| } | ||
| function $ee4262c74a467b07$var$cartesianToAngle(x, y, radius) { | ||
| let deg = $ee4262c74a467b07$var$radToDeg(Math.atan2(y / radius, x / radius)); | ||
| return (deg + 360) % 360; | ||
| } | ||
| function $ee4262c74a467b07$export$f4301076d9336137(props) { | ||
| let { defaultValue: defaultValue , onChange: onChange , onChangeEnd: onChangeEnd } = props; | ||
| if (!props.value && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR; | ||
| let [value, setValue] = $cBgAy$useControlledState($799cddbef784668f$export$4cde5df63f53f473(props.value), $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange); | ||
| let valueRef = $cBgAy$useRef(value); | ||
| valueRef.current = value; | ||
| let channelRange = value.getChannelRange('hue'); | ||
| let { minValue: minValueX , maxValue: maxValueX , step: step , pageSize: pageStep } = channelRange; | ||
| let [isDragging1, setDragging] = $cBgAy$useState(false); | ||
| let isDraggingRef = $cBgAy$useRef(false).current; | ||
| let hue = value.getChannelValue('hue'); | ||
| function setHue(v) { | ||
| if (v > 360) // Make sure you can always get back to 0. | ||
| v = 0; | ||
| v = $ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(v, 360), step); | ||
| if (hue !== v) { | ||
| let color = value.withChannelValue('hue', v); | ||
| valueRef.current = color; | ||
| setValue(color); | ||
| } | ||
| } | ||
| return { | ||
| value: value, | ||
| step: step, | ||
| pageStep: pageStep, | ||
| setValue (v) { | ||
| let color = $799cddbef784668f$export$4cde5df63f53f473(v); | ||
| valueRef.current = color; | ||
| setValue(color); | ||
| }, | ||
| hue: hue, | ||
| setHue: setHue, | ||
| setHueFromPoint (x, y, radius) { | ||
| setHue($ee4262c74a467b07$var$cartesianToAngle(x, y, radius)); | ||
| }, | ||
| getThumbPosition (radius) { | ||
| return $ee4262c74a467b07$var$angleToCartesian(value.getChannelValue('hue'), radius); | ||
| }, | ||
| increment (stepSize = 1) { | ||
| let s = Math.max(stepSize, step); | ||
| let newValue = hue + s; | ||
| if (newValue >= maxValueX) // Make sure you can always get back to 0. | ||
| newValue = minValueX; | ||
| setHue($ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(newValue, 360), s)); | ||
| }, | ||
| decrement (stepSize = 1) { | ||
| let s = Math.max(stepSize, step); | ||
| if (hue === 0) // We can't just subtract step because this might be the case: | ||
| // |(previous step) - 0| < step size | ||
| setHue($ee4262c74a467b07$var$roundDown(360 / s) * s); | ||
| else setHue($ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(hue - s, 360), s)); | ||
| }, | ||
| setDragging (isDragging) { | ||
| let wasDragging = isDraggingRef; | ||
| isDraggingRef = isDragging; | ||
| if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current); | ||
| setDragging(isDragging); | ||
| }, | ||
| isDragging: isDragging1, | ||
| getDisplayColor () { | ||
| return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50); | ||
| } | ||
| }; | ||
| } | ||
| var $b335ada08155d9c0$exports = {}; | ||
| $parcel$export($b335ada08155d9c0$exports, "useColorFieldState", () => $b335ada08155d9c0$export$d52a01683abdfcd6); | ||
| function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) { | ||
| return $cBgAy$useMemo(()=>{ | ||
| if (typeof value === 'string') try { | ||
| return $799cddbef784668f$export$6e865ea70d7724f(value); | ||
| } catch (err) { | ||
| return undefined; | ||
| } | ||
| return value; | ||
| }, [ | ||
| value | ||
| ]); | ||
| } | ||
| const $b335ada08155d9c0$var$MIN_COLOR = $799cddbef784668f$export$6e865ea70d7724f('#000000'); | ||
| const $b335ada08155d9c0$var$MAX_COLOR = $799cddbef784668f$export$6e865ea70d7724f('#FFFFFF'); | ||
| const $b335ada08155d9c0$var$MIN_COLOR_INT = $b335ada08155d9c0$var$MIN_COLOR.toHexInt(); | ||
| const $b335ada08155d9c0$var$MAX_COLOR_INT = $b335ada08155d9c0$var$MAX_COLOR.toHexInt(); | ||
| function $b335ada08155d9c0$export$d52a01683abdfcd6(props) { | ||
| let { value: value1 , defaultValue: defaultValue , onChange: onChange } = props; | ||
| let { step: step } = $b335ada08155d9c0$var$MIN_COLOR.getChannelRange('red'); | ||
| let initialValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value1); | ||
| let initialDefaultValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(defaultValue); | ||
| let [colorValue, setColorValue] = $cBgAy$useControlledState(initialValue, initialDefaultValue, onChange); | ||
| let [inputValue, setInputValue] = $cBgAy$useState(()=>(value1 || defaultValue) && colorValue ? colorValue.toString('hex') : '' | ||
| ); | ||
| let safelySetColorValue = (newColor)=>{ | ||
| if (!colorValue || !newColor) { | ||
| setColorValue(newColor); | ||
| return; | ||
| } | ||
| if (newColor.toHexInt() !== colorValue.toHexInt()) { | ||
| setColorValue(newColor); | ||
| return; | ||
| } | ||
| }; | ||
| let prevValue = $cBgAy$useRef(colorValue); | ||
| if (prevValue.current !== colorValue) { | ||
| setInputValue(colorValue ? colorValue.toString('hex') : ''); | ||
| prevValue.current = colorValue; | ||
| } | ||
| let parsedValue = $cBgAy$useMemo(()=>{ | ||
| let color; | ||
| try { | ||
| color = $799cddbef784668f$export$6e865ea70d7724f(inputValue.startsWith('#') ? inputValue : `#${inputValue}`); | ||
| } catch (err) { | ||
| color = null; | ||
| } | ||
| return color; | ||
| }, [ | ||
| inputValue | ||
| ]); | ||
| let parsed = $cBgAy$useRef(null); | ||
| parsed.current = parsedValue; | ||
| let commit = ()=>{ | ||
| // Set to empty state if input value is empty | ||
| if (!inputValue.length) { | ||
| safelySetColorValue(null); | ||
| setInputValue(value1 === undefined ? '' : colorValue.toString('hex')); | ||
| return; | ||
| } | ||
| // if it failed to parse, then reset input to formatted version of current number | ||
| if (parsed.current == null) { | ||
| setInputValue(colorValue ? colorValue.toString('hex') : ''); | ||
| return; | ||
| } | ||
| safelySetColorValue(parsed.current); | ||
| // in a controlled state, the numberValue won't change, so we won't go back to our old input without help | ||
| let newColorValue = ''; | ||
| if (colorValue) newColorValue = colorValue.toString('hex'); | ||
| setInputValue(newColorValue); | ||
| }; | ||
| let increment = ()=>{ | ||
| let newValue = $b335ada08155d9c0$var$addColorValue(parsed.current, step); | ||
| // if we've arrived at the same value that was previously in the state, the | ||
| // input value should be updated to match | ||
| // ex type 4, press increment, highlight the number in the input, type 4 again, press increment | ||
| // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input | ||
| if (newValue === colorValue) setInputValue(newValue.toString('hex')); | ||
| safelySetColorValue(newValue); | ||
| }; | ||
| let decrement = ()=>{ | ||
| let newValue = $b335ada08155d9c0$var$addColorValue(parsed.current, -step); | ||
| // if we've arrived at the same value that was previously in the state, the | ||
| // input value should be updated to match | ||
| // ex type 4, press increment, highlight the number in the input, type 4 again, press increment | ||
| // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input | ||
| if (newValue === colorValue) setInputValue(newValue.toString('hex')); | ||
| safelySetColorValue(newValue); | ||
| }; | ||
| let incrementToMax = ()=>safelySetColorValue($b335ada08155d9c0$var$MAX_COLOR) | ||
| ; | ||
| let decrementToMin = ()=>safelySetColorValue($b335ada08155d9c0$var$MIN_COLOR) | ||
| ; | ||
| let validate = (value)=>{ | ||
| var ref; | ||
| return value === '' || !!((ref = value.match(/^#?[0-9a-f]{0,6}$/i)) === null || ref === void 0 ? void 0 : ref[0]); | ||
| }; | ||
| return { | ||
| validate: validate, | ||
| colorValue: colorValue, | ||
| inputValue: inputValue, | ||
| setInputValue: setInputValue, | ||
| commit: commit, | ||
| increment: increment, | ||
| incrementToMax: incrementToMax, | ||
| decrement: decrement, | ||
| decrementToMin: decrementToMin | ||
| }; | ||
| } | ||
| function $b335ada08155d9c0$var$addColorValue(color, step) { | ||
| let newColor = color ? color : $b335ada08155d9c0$var$MIN_COLOR; | ||
| let colorInt = newColor.toHexInt(); | ||
| let clampInt = Math.min(Math.max(colorInt + step, $b335ada08155d9c0$var$MIN_COLOR_INT), $b335ada08155d9c0$var$MAX_COLOR_INT); | ||
| if (clampInt !== colorInt) { | ||
| let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`; | ||
| newColor = $799cddbef784668f$export$6e865ea70d7724f(newColorString); | ||
| } | ||
| return newColor; | ||
| } | ||
| export {$799cddbef784668f$export$6e865ea70d7724f as parseColor, $6e14a98a7f67141d$export$6df7f0e2cabc7eef as useColorAreaState, $25a25ac0d1624665$export$57bc203e1c9c6d44 as useColorSliderState, $ee4262c74a467b07$export$f4301076d9336137 as useColorWheelState, $b335ada08155d9c0$export$d52a01683abdfcd6 as useColorFieldState}; | ||
| export {$799cddbef784668f$export$6e865ea70d7724f as parseColor, $799cddbef784668f$export$1c0c08912582810c as getColorChannels, $6e14a98a7f67141d$export$6df7f0e2cabc7eef as useColorAreaState, $25a25ac0d1624665$export$57bc203e1c9c6d44 as useColorSliderState, $ee4262c74a467b07$export$f4301076d9336137 as useColorWheelState, $b335ada08155d9c0$export$d52a01683abdfcd6 as useColorFieldState, $31a863bb88e75dd6$export$b9fc0d69c9190c4a as useColorChannelFieldState, $309d2b7669014898$export$dc6b73b623f8645f as useColorPickerState}; | ||
| //# sourceMappingURL=module.js.map |
@@ -1,5 +0,10 @@ | ||
| import { Color, ColorAreaProps, ColorChannel, ColorSliderProps, ColorWheelProps, ColorFieldProps } from "@react-types/color"; | ||
| import { ColorChannel, ColorSpace, Color, ColorAreaProps, ColorSliderProps, ColorWheelProps, ColorFieldProps } from "@react-types/color"; | ||
| import { SliderState } from "@react-stately/slider"; | ||
| import { FormValidationState } from "@react-stately/form"; | ||
| import { NumberFieldState } from "@react-stately/numberfield"; | ||
| import { ValueBase } from "@react-types/shared"; | ||
| /** Parses a color from a string value. Throws an error if the string could not be parsed. */ | ||
| export function parseColor(value: string): Color; | ||
| /** Returns a list of color channels for a given color space. */ | ||
| export function getColorChannels(colorSpace: ColorSpace): [ColorChannel, ColorChannel, ColorChannel]; | ||
| export interface ColorAreaState { | ||
@@ -43,5 +48,9 @@ /** The current color value displayed by the color area. */ | ||
| }; | ||
| /** The step value of the xChannel, used when incrementing and decrementing. */ | ||
| xChannelStep: number; | ||
| /** The step value of the yChannel, used when incrementing and decrementing. */ | ||
| yChannelStep: number; | ||
| /** The page step value of the xChannel, used when incrementing and decrementing. */ | ||
| xChannelPageStep: number; | ||
| /** The page step value of the yChannel, used when incrementing and decrementing. */ | ||
| yChannelPageStep: number; | ||
@@ -63,4 +72,6 @@ /** Returns the color that should be displayed in the color area thumb instead of `value`. */ | ||
| getDisplayColor(): Color; | ||
| /** Whether the color slider is currently being dragged. */ | ||
| readonly isDragging: boolean; | ||
| } | ||
| interface ColorSliderStateOptions extends ColorSliderProps { | ||
| export interface ColorSliderStateOptions extends ColorSliderProps { | ||
| /** The locale to use for formatting the color channel value. */ | ||
@@ -100,4 +111,8 @@ locale: string; | ||
| getDisplayColor(): Color; | ||
| /** The step value of the hue channel, used when incrementing and decrementing. */ | ||
| step: number; | ||
| /** The page step value of the hue channel, used when incrementing and decrementing. */ | ||
| pageStep: number; | ||
| /** Whether the color wheel is disabled. */ | ||
| readonly isDisabled: boolean; | ||
| } | ||
@@ -109,3 +124,3 @@ /** | ||
| export function useColorWheelState(props: ColorWheelProps): ColorWheelState; | ||
| export interface ColorFieldState { | ||
| export interface ColorFieldState extends FormValidationState { | ||
| /** | ||
@@ -120,3 +135,3 @@ * The current text value of the input. Updated as the user types, | ||
| */ | ||
| readonly colorValue: Color; | ||
| readonly colorValue: Color | null; | ||
| /** Sets the current text value of the input. */ | ||
@@ -149,3 +164,28 @@ setInputValue(value: string): void; | ||
| export function useColorFieldState(props: ColorFieldProps): ColorFieldState; | ||
| export interface ColorChannelFieldProps extends ColorFieldProps { | ||
| colorSpace?: ColorSpace; | ||
| channel: ColorChannel; | ||
| } | ||
| export interface ColorChannelFieldStateOptions extends ColorChannelFieldProps { | ||
| locale: string; | ||
| } | ||
| export interface ColorChannelFieldState extends NumberFieldState { | ||
| colorValue: Color; | ||
| } | ||
| /** | ||
| * Provides state management for a color channel field, allowing users to edit the | ||
| * value of an individual color channel. | ||
| */ | ||
| export function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState; | ||
| export interface ColorPickerProps extends ValueBase<string | Color, Color> { | ||
| } | ||
| export interface ColorPickerState { | ||
| /** The current color value of the color picker. */ | ||
| color: Color; | ||
| /** Sets the current color value of the color picker. */ | ||
| setColor(color: Color | null): void; | ||
| } | ||
| export function useColorPickerState(props: ColorPickerProps): ColorPickerState; | ||
| export type { Color, ColorAreaProps, ColorFieldProps, ColorWheelProps } from '@react-types/color'; | ||
| //# sourceMappingURL=types.d.ts.map |
| { | ||
| "name": "@react-stately/color", | ||
| "version": "3.0.0-nightly.3316+73ade2986", | ||
| "version": "3.0.0-nightly-016590a4a-250131", | ||
| "description": "Spectrum UI components in React", | ||
@@ -8,2 +8,7 @@ "license": "Apache-2.0", | ||
| "module": "dist/module.js", | ||
| "exports": { | ||
| "types": "./dist/types.d.ts", | ||
| "import": "./dist/import.mjs", | ||
| "require": "./dist/main.js" | ||
| }, | ||
| "types": "dist/types.d.ts", | ||
@@ -21,18 +26,18 @@ "source": "src/index.ts", | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.6.2", | ||
| "@internationalized/message": "3.0.8-nightly.3316+73ade2986", | ||
| "@internationalized/number": "3.1.2-nightly.3316+73ade2986", | ||
| "@react-stately/slider": "3.1.1-nightly.3316+73ade2986", | ||
| "@react-stately/utils": "3.0.0-nightly.1617+73ade2986", | ||
| "@react-types/color": "3.0.0-nightly.3316+73ade2986", | ||
| "@react-types/numberfield": "3.3.1-nightly.3316+73ade2986", | ||
| "@react-types/shared": "3.0.0-nightly.1617+73ade2986" | ||
| "@internationalized/number": "3.0.0-nightly-016590a4a-250131", | ||
| "@internationalized/string": "3.0.0-nightly-016590a4a-250131", | ||
| "@react-stately/form": "3.0.0-nightly-016590a4a-250131", | ||
| "@react-stately/numberfield": "3.0.0-nightly-016590a4a-250131", | ||
| "@react-stately/slider": "3.0.0-nightly-016590a4a-250131", | ||
| "@react-stately/utils": "3.0.0-nightly-016590a4a-250131", | ||
| "@react-types/color": "3.0.0-nightly-016590a4a-250131", | ||
| "@react-types/shared": "3.0.0-nightly-016590a4a-250131", | ||
| "@swc/helpers": "^0.5.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" | ||
| "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "gitHead": "73ade29862f171cd6c37337ae76a880d6f598d32" | ||
| } | ||
| } | ||
| } |
381
src/Color.ts
@@ -14,9 +14,9 @@ /* | ||
| import {clamp, toFixedNumber} from '@react-stately/utils'; | ||
| import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, Color as IColor} from '@react-types/color'; | ||
| import {ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace, Color as IColor} from '@react-types/color'; | ||
| // @ts-ignore | ||
| import intlMessages from '../intl/*.json'; | ||
| import {MessageDictionary} from '@internationalized/message'; | ||
| import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string'; | ||
| import {NumberFormatter} from '@internationalized/number'; | ||
| const messages = new MessageDictionary(intlMessages); | ||
| let dictionary = new LocalizedStringDictionary(intlMessages); | ||
@@ -41,2 +41,46 @@ /** Parses a color from a string value. Throws an error if the string could not be parsed. */ | ||
| /** Returns a list of color channels for a given color space. */ | ||
| export function getColorChannels(colorSpace: ColorSpace) { | ||
| switch (colorSpace) { | ||
| case 'rgb': | ||
| return RGBColor.colorChannels; | ||
| case 'hsl': | ||
| return HSLColor.colorChannels; | ||
| case 'hsb': | ||
| return HSBColor.colorChannels; | ||
| } | ||
| } | ||
| /** | ||
| * Returns the hue value normalized to the range of 0 to 360. | ||
| */ | ||
| export function normalizeHue(hue: number) { | ||
| if (hue === 360) { | ||
| return hue; | ||
| } | ||
| return ((hue % 360) + 360) % 360; | ||
| } | ||
| // Lightness threshold between orange and brown. | ||
| const ORANGE_LIGHTNESS_THRESHOLD = 0.68; | ||
| // Lightness threshold between pure yellow and "yellow green". | ||
| const YELLOW_GREEN_LIGHTNESS_THRESHOLD = 0.85; | ||
| // The maximum lightness considered to be "dark". | ||
| const MAX_DARK_LIGHTNESS = 0.55; | ||
| // The chroma threshold between gray and color. | ||
| const GRAY_THRESHOLD = 0.001; | ||
| const OKLCH_HUES: [number, string][] = [ | ||
| [0, 'pink'], | ||
| [15, 'red'], | ||
| [48, 'orange'], | ||
| [94, 'yellow'], | ||
| [135, 'green'], | ||
| [175, 'cyan'], | ||
| [264, 'blue'], | ||
| [284, 'purple'], | ||
| [320, 'magenta'], | ||
| [349, 'pink'] | ||
| ]; | ||
| abstract class Color implements IColor { | ||
@@ -47,2 +91,3 @@ abstract toFormat(format: ColorFormat): IColor; | ||
| abstract getChannelRange(channel: ColorChannel): ColorChannelRange; | ||
| abstract getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions; | ||
| abstract formatChannelValue(channel: ColorChannel, locale: string): string; | ||
@@ -73,25 +118,129 @@ | ||
| getChannelName(channel: ColorChannel, locale: string) { | ||
| return messages.getStringForLocale(channel, locale); | ||
| let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/color') || dictionary; | ||
| return strings.getStringForLocale(channel, locale); | ||
| } | ||
| abstract getColorSpace(): ColorFormat | ||
| abstract getColorSpace(): ColorSpace; | ||
| getColorSpaceAxes(xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel}): ColorAxes { | ||
| let {xChannel, yChannel} = xyChannels; | ||
| let xCh = xChannel || this.getColorChannels().find(c => c !== yChannel); | ||
| let yCh = yChannel || this.getColorChannels().find(c => c !== xCh); | ||
| let zCh = this.getColorChannels().find(c => c !== xCh && c !== yCh); | ||
| let xCh = xChannel || this.getColorChannels().find(c => c !== yChannel)!; | ||
| let yCh = yChannel || this.getColorChannels().find(c => c !== xCh)!; | ||
| let zCh = this.getColorChannels().find(c => c !== xCh && c !== yCh)!; | ||
| return {xChannel: xCh, yChannel: yCh, zChannel: zCh}; | ||
| } | ||
| abstract getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] | ||
| } | ||
| const HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i; | ||
| getColorName(locale: string): string { | ||
| // Convert to oklch color space, which has perceptually uniform lightness across all hues. | ||
| let [l, c, h] = toOKLCH(this); | ||
| // X = <negative/positive number with/without decimal places> | ||
| // before/after a comma, 0 or more whitespaces are allowed | ||
| // - rgb(X, X, X) | ||
| // - rgba(X, X, X, X) | ||
| const RGB_REGEX = /rgb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?)\)|rgba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d(.\d+)?)\)/; | ||
| let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/color') || dictionary; | ||
| if (l > 0.999) { | ||
| return strings.getStringForLocale('white', locale); | ||
| } | ||
| if (l < 0.001) { | ||
| return strings.getStringForLocale('black', locale); | ||
| } | ||
| let hue: string; | ||
| [hue, l] = this.getOklchHue(l, c, h, locale); | ||
| let lightness = ''; | ||
| let chroma = ''; | ||
| if (c <= 0.1 && c >= GRAY_THRESHOLD) { | ||
| if (l >= 0.7) { | ||
| chroma = 'pale'; | ||
| } else { | ||
| chroma = 'grayish'; | ||
| } | ||
| } else if (c >= 0.15) { | ||
| chroma = 'vibrant'; | ||
| } | ||
| if (l < 0.3) { | ||
| lightness = 'very dark'; | ||
| } else if (l < MAX_DARK_LIGHTNESS) { | ||
| lightness = 'dark'; | ||
| } else if (l < 0.7) { | ||
| // none | ||
| } else if (l < 0.85) { | ||
| lightness = 'light'; | ||
| } else { | ||
| lightness = 'very light'; | ||
| } | ||
| if (chroma) { | ||
| chroma = strings.getStringForLocale(chroma, locale); | ||
| } | ||
| if (lightness) { | ||
| lightness = strings.getStringForLocale(lightness, locale); | ||
| } | ||
| let alpha = this.getChannelValue('alpha'); | ||
| let formatter = new LocalizedStringFormatter(locale, strings); | ||
| if (alpha < 1) { | ||
| let percentTransparent = new NumberFormatter(locale, {style: 'percent'}).format(1 - alpha); | ||
| return formatter.format('transparentColorName', { | ||
| lightness, | ||
| chroma, | ||
| hue, | ||
| percentTransparent | ||
| }).replace(/\s+/g, ' ').trim(); | ||
| } else { | ||
| return formatter.format('colorName', { | ||
| lightness, | ||
| chroma, | ||
| hue | ||
| }).replace(/\s+/g, ' ').trim(); | ||
| } | ||
| } | ||
| private getOklchHue(l: number, c: number, h: number, locale: string): [string, number] { | ||
| let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/color') || dictionary; | ||
| if (c < GRAY_THRESHOLD) { | ||
| return [strings.getStringForLocale('gray', locale), l]; | ||
| } | ||
| for (let i = 0; i < OKLCH_HUES.length; i++) { | ||
| let [hue, hueName] = OKLCH_HUES[i]; | ||
| let [nextHue, nextHueName] = OKLCH_HUES[i + 1] || [360, 'pink']; | ||
| if (h >= hue && h < nextHue) { | ||
| // Split orange hue into brown/orange depending on lightness. | ||
| if (hueName === 'orange') { | ||
| if (l < ORANGE_LIGHTNESS_THRESHOLD) { | ||
| hueName = 'brown'; | ||
| } else { | ||
| // Adjust lightness. | ||
| l = (l - ORANGE_LIGHTNESS_THRESHOLD) + MAX_DARK_LIGHTNESS; | ||
| } | ||
| } | ||
| // If the hue is at least halfway to the next hue, add the next hue name as well. | ||
| if (h > hue + (nextHue - hue) / 2 && hueName !== nextHueName) { | ||
| hueName = `${hueName} ${nextHueName}`; | ||
| } else if (hueName === 'yellow' && l < YELLOW_GREEN_LIGHTNESS_THRESHOLD) { | ||
| // Yellow shifts toward green at lower lightnesses. | ||
| hueName = 'yellow green'; | ||
| } | ||
| let name = strings.getStringForLocale(hueName, locale).toLocaleLowerCase(locale); | ||
| return [name, l]; | ||
| } | ||
| } | ||
| throw new Error('Unexpected hue'); | ||
| } | ||
| getHueName(locale: string): string { | ||
| let [l, c, h] = toOKLCH(this); | ||
| let [name] = this.getOklchHue(l, c, h, locale); | ||
| return name; | ||
| } | ||
| } | ||
| class RGBColor extends Color { | ||
@@ -102,25 +251,29 @@ constructor(private red: number, private green: number, private blue: number, private alpha: number) { | ||
| static parse(value: string): RGBColor | void { | ||
| let m; | ||
| if ((m = value.match(HEX_REGEX))) { | ||
| if (m[1]) { | ||
| let r = parseInt(m[1][0] + m[1][0], 16); | ||
| let g = parseInt(m[1][1] + m[1][1], 16); | ||
| let b = parseInt(m[1][2] + m[1][2], 16); | ||
| return new RGBColor(r, g, b, 1); | ||
| } else if (m[2]) { | ||
| let r = parseInt(m[2][0] + m[2][1], 16); | ||
| let g = parseInt(m[2][2] + m[2][3], 16); | ||
| let b = parseInt(m[2][4] + m[2][5], 16); | ||
| return new RGBColor(r, g, b, 1); | ||
| static parse(value: string) { | ||
| let colors: Array<number | undefined> = []; | ||
| // matching #rgb, #rgba, #rrggbb, #rrggbbaa | ||
| if (/^#[\da-f]+$/i.test(value) && [4, 5, 7, 9].includes(value.length)) { | ||
| const values = (value.length < 6 ? value.replace(/[^#]/gi, '$&$&') : value).slice(1).split(''); | ||
| while (values.length > 0) { | ||
| colors.push(parseInt(values.splice(0, 2).join(''), 16)); | ||
| } | ||
| colors[3] = colors[3] !== undefined ? colors[3] / 255 : undefined; | ||
| } | ||
| if ((m = value.match(RGB_REGEX))) { | ||
| const [r, g, b, a] = (m[1] ?? m[2]).split(',').map(n => Number(n.trim())); | ||
| return new RGBColor(clamp(r, 0, 255), clamp(g, 0, 255), clamp(b, 0, 255), clamp(a ?? 1, 0, 1)); | ||
| // matching rgb(rrr, ggg, bbb), rgba(rrr, ggg, bbb, 0.a) | ||
| const match = value.match(/^rgba?\((.*)\)$/); | ||
| if (match?.[1]) { | ||
| colors = match[1].split(',').map(value => Number(value.trim())); | ||
| colors = colors.map((num, i) => { | ||
| return clamp(num ?? 0, 0, i < 3 ? 255 : 1); | ||
| }); | ||
| } | ||
| if (colors[0] === undefined || colors[1] === undefined || colors[2] === undefined) { | ||
| return undefined; | ||
| } | ||
| return colors.length < 3 ? undefined : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1); | ||
| } | ||
| toString(format: ColorFormat | 'css') { | ||
| toString(format: ColorFormat | 'css' = 'css') { | ||
| switch (format) { | ||
@@ -231,2 +384,3 @@ case 'hex': | ||
| case blue: | ||
| default: | ||
| hue = (red - green) / chroma + 4; | ||
@@ -263,5 +417,3 @@ break; | ||
| formatChannelValue(channel: ColorChannel, locale: string) { | ||
| let options: Intl.NumberFormatOptions; | ||
| let value = this.getChannelValue(channel); | ||
| getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions { | ||
| switch (channel) { | ||
@@ -271,18 +423,21 @@ case 'red': | ||
| case 'blue': | ||
| options = {style: 'decimal'}; | ||
| break; | ||
| return {style: 'decimal'}; | ||
| case 'alpha': | ||
| options = {style: 'percent'}; | ||
| break; | ||
| return {style: 'percent'}; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| } | ||
| formatChannelValue(channel: ColorChannel, locale: string) { | ||
| let options = this.getChannelFormatOptions(channel); | ||
| let value = this.getChannelValue(channel); | ||
| return new NumberFormatter(locale, options).format(value); | ||
| } | ||
| getColorSpace(): ColorFormat { | ||
| getColorSpace(): ColorSpace { | ||
| return 'rgb'; | ||
| } | ||
| private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['red', 'green', 'blue']; | ||
| static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['red', 'green', 'blue']; | ||
| getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] { | ||
@@ -305,10 +460,10 @@ return RGBColor.colorChannels; | ||
| static parse(value: string): HSBColor | void { | ||
| let m: RegExpMatchArray | void; | ||
| let m: RegExpMatchArray | null; | ||
| if ((m = value.match(HSB_REGEX))) { | ||
| const [h, s, b, a] = (m[1] ?? m[2]).split(',').map(n => Number(n.trim().replace('%', ''))); | ||
| return new HSBColor(mod(h, 360), clamp(s, 0, 100), clamp(b, 0, 100), clamp(a ?? 1, 0, 1)); | ||
| return new HSBColor(normalizeHue(h), clamp(s, 0, 100), clamp(b, 0, 100), clamp(a ?? 1, 0, 1)); | ||
| } | ||
| } | ||
| toString(format: ColorFormat | 'css') { | ||
| toString(format: ColorFormat | 'css' = 'css') { | ||
| switch (format) { | ||
@@ -401,28 +556,29 @@ case 'css': | ||
| formatChannelValue(channel: ColorChannel, locale: string) { | ||
| let options: Intl.NumberFormatOptions; | ||
| let value = this.getChannelValue(channel); | ||
| getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions { | ||
| switch (channel) { | ||
| case 'hue': | ||
| options = {style: 'unit', unit: 'degree', unitDisplay: 'narrow'}; | ||
| break; | ||
| return {style: 'unit', unit: 'degree', unitDisplay: 'narrow'}; | ||
| case 'saturation': | ||
| case 'brightness': | ||
| options = {style: 'percent'}; | ||
| value /= 100; | ||
| break; | ||
| case 'alpha': | ||
| options = {style: 'percent'}; | ||
| break; | ||
| return {style: 'percent'}; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| } | ||
| formatChannelValue(channel: ColorChannel, locale: string) { | ||
| let options = this.getChannelFormatOptions(channel); | ||
| let value = this.getChannelValue(channel); | ||
| if (channel === 'saturation' || channel === 'brightness') { | ||
| value /= 100; | ||
| } | ||
| return new NumberFormatter(locale, options).format(value); | ||
| } | ||
| getColorSpace(): ColorFormat { | ||
| getColorSpace(): ColorSpace { | ||
| return 'hsb'; | ||
| } | ||
| private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'brightness']; | ||
| static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'brightness']; | ||
| getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] { | ||
@@ -439,6 +595,2 @@ return HSBColor.colorChannels; | ||
| function mod(n, m) { | ||
| return ((n % m) + m) % m; | ||
| } | ||
| class HSLColor extends Color { | ||
@@ -450,10 +602,10 @@ constructor(private hue: number, private saturation: number, private lightness: number, private alpha: number) { | ||
| static parse(value: string): HSLColor | void { | ||
| let m: RegExpMatchArray | void; | ||
| let m: RegExpMatchArray | null; | ||
| if ((m = value.match(HSL_REGEX))) { | ||
| const [h, s, l, a] = (m[1] ?? m[2]).split(',').map(n => Number(n.trim().replace('%', ''))); | ||
| return new HSLColor(mod(h, 360), clamp(s, 0, 100), clamp(l, 0, 100), clamp(a ?? 1, 0, 1)); | ||
| return new HSLColor(normalizeHue(h), clamp(s, 0, 100), clamp(l, 0, 100), clamp(a ?? 1, 0, 1)); | ||
| } | ||
| } | ||
| toString(format: ColorFormat | 'css') { | ||
| toString(format: ColorFormat | 'css' = 'css') { | ||
| switch (format) { | ||
@@ -544,28 +696,29 @@ case 'hex': | ||
| formatChannelValue(channel: ColorChannel, locale: string) { | ||
| let options: Intl.NumberFormatOptions; | ||
| let value = this.getChannelValue(channel); | ||
| getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions { | ||
| switch (channel) { | ||
| case 'hue': | ||
| options = {style: 'unit', unit: 'degree', unitDisplay: 'narrow'}; | ||
| break; | ||
| return {style: 'unit', unit: 'degree', unitDisplay: 'narrow'}; | ||
| case 'saturation': | ||
| case 'lightness': | ||
| options = {style: 'percent'}; | ||
| value /= 100; | ||
| break; | ||
| case 'alpha': | ||
| options = {style: 'percent'}; | ||
| break; | ||
| return {style: 'percent'}; | ||
| default: | ||
| throw new Error('Unknown color channel: ' + channel); | ||
| } | ||
| } | ||
| formatChannelValue(channel: ColorChannel, locale: string) { | ||
| let options = this.getChannelFormatOptions(channel); | ||
| let value = this.getChannelValue(channel); | ||
| if (channel === 'saturation' || channel === 'lightness') { | ||
| value /= 100; | ||
| } | ||
| return new NumberFormatter(locale, options).format(value); | ||
| } | ||
| getColorSpace(): ColorFormat { | ||
| getColorSpace(): ColorSpace { | ||
| return 'hsl'; | ||
| } | ||
| private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'lightness']; | ||
| static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ['hue', 'saturation', 'lightness']; | ||
| getColorChannels(): [ColorChannel, ColorChannel, ColorChannel] { | ||
@@ -575,1 +728,79 @@ return HSLColor.colorChannels; | ||
| } | ||
| // https://www.w3.org/TR/css-color-4/#color-conversion-code | ||
| function toOKLCH(color: Color) { | ||
| let rgb = color.toFormat('rgb'); | ||
| let red = rgb.getChannelValue('red') / 255; | ||
| let green = rgb.getChannelValue('green') / 255; | ||
| let blue = rgb.getChannelValue('blue') / 255; | ||
| [red, green, blue] = lin_sRGB(red, green, blue); | ||
| let [x, y, z] = lin_sRGB_to_XYZ(red, green, blue); | ||
| let [l, a, b] = XYZ_to_OKLab(x, y, z); | ||
| return OKLab_to_OKLCH(l, a, b); | ||
| } | ||
| function OKLab_to_OKLCH(l: number, a: number, b: number): [number, number, number] { | ||
| var hue = Math.atan2(b, a) * 180 / Math.PI; | ||
| return [ | ||
| l, | ||
| Math.sqrt(a ** 2 + b ** 2), // Chroma | ||
| hue >= 0 ? hue : hue + 360 // Hue, in degrees [0 to 360) | ||
| ]; | ||
| } | ||
| function lin_sRGB(r: number, g: number, b: number): [number, number, number] { | ||
| // convert an array of sRGB values | ||
| // where in-gamut values are in the range [0 - 1] | ||
| // to linear light (un-companded) form. | ||
| // https://en.wikipedia.org/wiki/SRGB | ||
| // Extended transfer function: | ||
| // for negative values, linear portion is extended on reflection of axis, | ||
| // then reflected power function is used. | ||
| return [lin_sRGB_component(r), lin_sRGB_component(g), lin_sRGB_component(b)]; | ||
| } | ||
| function lin_sRGB_component(val: number) { | ||
| let sign = val < 0 ? -1 : 1; | ||
| let abs = Math.abs(val); | ||
| if (abs <= 0.04045) { | ||
| return val / 12.92; | ||
| } | ||
| return sign * (Math.pow((abs + 0.055) / 1.055, 2.4)); | ||
| } | ||
| function lin_sRGB_to_XYZ(r: number, g: number, b: number) { | ||
| // convert an array of linear-light sRGB values to CIE XYZ | ||
| // using sRGB's own white, D65 (no chromatic adaptation) | ||
| const M = [ | ||
| 506752 / 1228815, 87881 / 245763, 12673 / 70218, | ||
| 87098 / 409605, 175762 / 245763, 12673 / 175545, | ||
| 7918 / 409605, 87881 / 737289, 1001167 / 1053270 | ||
| ]; | ||
| return multiplyMatrix(M, r, g, b); | ||
| } | ||
| function XYZ_to_OKLab(x: number, y: number, z: number) { | ||
| // Given XYZ relative to D65, convert to OKLab | ||
| const XYZtoLMS = [ | ||
| 0.8190224379967030, 0.3619062600528904, -0.1288737815209879, | ||
| 0.0329836539323885, 0.9292868615863434, 0.0361446663506424, | ||
| 0.0481771893596242, 0.2642395317527308, 0.6335478284694309 | ||
| ]; | ||
| const LMStoOKLab = [ | ||
| 0.2104542683093140, 0.7936177747023054, -0.0040720430116193, | ||
| 1.9779985324311684, -2.4285922420485799, 0.4505937096174110, | ||
| 0.0259040424655478, 0.7827717124575296, -0.8086757549230774 | ||
| ]; | ||
| let [a, b, c] = multiplyMatrix(XYZtoLMS, x, y, z); | ||
| return multiplyMatrix(LMStoOKLab, Math.cbrt(a), Math.cbrt(b), Math.cbrt(c)); | ||
| } | ||
| function multiplyMatrix(m: number[], x: number, y: number, z: number): [number, number, number] { | ||
| let a = m[0] * x + m[1] * y + m[2] * z; | ||
| let b = m[3] * x + m[4] * y + m[5] * z; | ||
| let c = m[6] * x + m[7] * y + m[8] * z; | ||
| return [a, b, c]; | ||
| } |
@@ -13,6 +13,18 @@ /* | ||
| export {parseColor} from './Color'; | ||
| export * from './useColorAreaState'; | ||
| export * from './useColorSliderState'; | ||
| export * from './useColorWheelState'; | ||
| export * from './useColorFieldState'; | ||
| export type {ColorAreaState} from './useColorAreaState'; | ||
| export type {ColorSliderState} from './useColorSliderState'; | ||
| export type {ColorWheelState} from './useColorWheelState'; | ||
| export type {ColorFieldState} from './useColorFieldState'; | ||
| export type {ColorChannelFieldProps, ColorChannelFieldState, ColorChannelFieldStateOptions} from './useColorChannelFieldState'; | ||
| export type {ColorPickerProps, ColorPickerState} from './useColorPickerState'; | ||
| export {parseColor, getColorChannels} from './Color'; | ||
| export {useColorAreaState} from './useColorAreaState'; | ||
| export {useColorSliderState} from './useColorSliderState'; | ||
| export {useColorWheelState} from './useColorWheelState'; | ||
| export {useColorFieldState} from './useColorFieldState'; | ||
| export {useColorChannelFieldState} from './useColorChannelFieldState'; | ||
| export {useColorPickerState} from './useColorPickerState'; | ||
| export type {Color, ColorAreaProps, ColorFieldProps, ColorWheelProps} from '@react-types/color'; | ||
| export type {ColorSliderStateOptions} from './useColorSliderState'; |
@@ -17,3 +17,3 @@ /* | ||
| export function useColor(value: string | Color) { | ||
| export function useColor(value: string | Color | undefined | null) { | ||
| return useMemo(() => { | ||
@@ -23,3 +23,3 @@ if (typeof value === 'string') { | ||
| return parseColor(value); | ||
| } catch (err) { | ||
| } catch { | ||
| return undefined; | ||
@@ -26,0 +26,0 @@ } |
@@ -56,5 +56,9 @@ /* | ||
| channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel}, | ||
| /** The step value of the xChannel, used when incrementing and decrementing. */ | ||
| xChannelStep: number, | ||
| /** The step value of the yChannel, used when incrementing and decrementing. */ | ||
| yChannelStep: number, | ||
| /** The page step value of the xChannel, used when incrementing and decrementing. */ | ||
| xChannelPageStep: number, | ||
| /** The page step value of the yChannel, used when incrementing and decrementing. */ | ||
| yChannelPageStep: number, | ||
@@ -75,2 +79,3 @@ | ||
| defaultValue, | ||
| colorSpace, | ||
| xChannel, | ||
@@ -85,10 +90,21 @@ yChannel, | ||
| } | ||
| if (value) { | ||
| value = normalizeColor(value); | ||
| } | ||
| if (defaultValue) { | ||
| defaultValue = normalizeColor(defaultValue); | ||
| } | ||
| let [color, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange); | ||
| // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default | ||
| let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange); | ||
| let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]); | ||
| let valueRef = useRef(color); | ||
| valueRef.current = color; | ||
| let setColor = (color: Color) => { | ||
| valueRef.current = color; | ||
| setColorState(color); | ||
| }; | ||
| let channels = useMemo(() => | ||
| valueRef.current.getColorSpaceAxes({xChannel, yChannel}), | ||
| [xChannel, yChannel] | ||
| color.getColorSpaceAxes({xChannel, yChannel}), | ||
| [color, xChannel, yChannel] | ||
| ); | ||
@@ -102,3 +118,3 @@ | ||
| let [isDragging, setDragging] = useState(false); | ||
| let isDraggingRef = useRef(false).current; | ||
| let isDraggingRef = useRef(false); | ||
@@ -111,4 +127,4 @@ let xValue = color.getChannelValue(channels.xChannel); | ||
| } | ||
| valueRef.current = color.withChannelValue(channels.xChannel, v); | ||
| setColor(valueRef.current); | ||
| let newColor = color.withChannelValue(channels.xChannel, v); | ||
| setColor(newColor); | ||
| }; | ||
@@ -119,4 +135,4 @@ let setYValue = (v: number) => { | ||
| } | ||
| valueRef.current = color.withChannelValue(channels.yChannel, v); | ||
| setColor(valueRef.current); | ||
| let newColor = color.withChannelValue(channels.yChannel, v); | ||
| setColor(newColor); | ||
| }; | ||
@@ -132,5 +148,3 @@ | ||
| setValue(value) { | ||
| let c = normalizeColor(value); | ||
| valueRef.current = c; | ||
| setColor(c); | ||
| setColor(normalizeColor(value)); | ||
| }, | ||
@@ -144,3 +158,3 @@ xValue, | ||
| let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY); | ||
| let newColor:Color; | ||
| let newColor: Color | undefined; | ||
| if (newXValue !== xValue) { | ||
@@ -165,17 +179,17 @@ // Round new value to multiple of step, clamp value between min and max | ||
| }, | ||
| incrementX(stepSize) { | ||
| incrementX(stepSize = 1) { | ||
| setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX)); | ||
| }, | ||
| incrementY(stepSize) { | ||
| incrementY(stepSize = 1) { | ||
| setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY)); | ||
| }, | ||
| decrementX(stepSize) { | ||
| decrementX(stepSize = 1) { | ||
| setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX)); | ||
| }, | ||
| decrementY(stepSize) { | ||
| decrementY(stepSize = 1) { | ||
| setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY)); | ||
| }, | ||
| setDragging(isDragging) { | ||
| let wasDragging = isDraggingRef; | ||
| isDraggingRef = isDragging; | ||
| let wasDragging = isDraggingRef.current; | ||
| isDraggingRef.current = isDragging; | ||
@@ -182,0 +196,0 @@ if (onChangeEnd && !isDragging && wasDragging) { |
@@ -14,8 +14,9 @@ /* | ||
| import {Color, ColorFieldProps} from '@react-types/color'; | ||
| import {FormValidationState, useFormValidationState} from '@react-stately/form'; | ||
| import {parseColor} from './Color'; | ||
| import {useColor} from './useColor'; | ||
| import {useControlledState} from '@react-stately/utils'; | ||
| import {useMemo, useRef, useState} from 'react'; | ||
| import {useMemo, useState} from 'react'; | ||
| export interface ColorFieldState { | ||
| export interface ColorFieldState extends FormValidationState { | ||
| /** | ||
@@ -30,3 +31,3 @@ * The current text value of the input. Updated as the user types, | ||
| */ | ||
| readonly colorValue: Color, | ||
| readonly colorValue: Color | null, | ||
| /** Sets the current text value of the input. */ | ||
@@ -76,6 +77,11 @@ setInputValue(value: string): void, | ||
| let initialDefaultValue = useColor(defaultValue); | ||
| let [colorValue, setColorValue] = useControlledState<Color>(initialValue, initialDefaultValue, onChange); | ||
| let [colorValue, setColorValue] = useControlledState<Color | null>(initialValue!, initialDefaultValue!, onChange); | ||
| let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : ''); | ||
| let safelySetColorValue = (newColor: Color) => { | ||
| let validation = useFormValidationState({ | ||
| ...props, | ||
| value: colorValue | ||
| }); | ||
| let safelySetColorValue = (newColor: Color | null) => { | ||
| if (!colorValue || !newColor) { | ||
@@ -91,9 +97,8 @@ setColorValue(newColor); | ||
| let prevValue = useRef(colorValue); | ||
| if (prevValue.current !== colorValue) { | ||
| let [prevValue, setPrevValue] = useState(colorValue); | ||
| if (prevValue !== colorValue) { | ||
| setInputValue(colorValue ? colorValue.toString('hex') : ''); | ||
| prevValue.current = colorValue; | ||
| setPrevValue(colorValue); | ||
| } | ||
| let parsedValue = useMemo(() => { | ||
@@ -103,3 +108,3 @@ let color; | ||
| color = parseColor(inputValue.startsWith('#') ? inputValue : `#${inputValue}`); | ||
| } catch (err) { | ||
| } catch { | ||
| color = null; | ||
@@ -109,4 +114,2 @@ } | ||
| }, [inputValue]); | ||
| let parsed = useRef(null); | ||
| parsed.current = parsedValue; | ||
@@ -117,3 +120,7 @@ let commit = () => { | ||
| safelySetColorValue(null); | ||
| setInputValue(value === undefined ? '' : colorValue.toString('hex')); | ||
| if (value === undefined || colorValue === null) { | ||
| setInputValue(''); | ||
| } else { | ||
| setInputValue(colorValue.toString('hex')); | ||
| } | ||
| return; | ||
@@ -123,3 +130,3 @@ } | ||
| // if it failed to parse, then reset input to formatted version of current number | ||
| if (parsed.current == null) { | ||
| if (parsedValue == null) { | ||
| setInputValue(colorValue ? colorValue.toString('hex') : ''); | ||
@@ -129,3 +136,3 @@ return; | ||
| safelySetColorValue(parsed.current); | ||
| safelySetColorValue(parsedValue); | ||
| // in a controlled state, the numberValue won't change, so we won't go back to our old input without help | ||
@@ -140,3 +147,3 @@ let newColorValue = ''; | ||
| let increment = () => { | ||
| let newValue = addColorValue(parsed.current, step); | ||
| let newValue = addColorValue(parsedValue, step); | ||
| // if we've arrived at the same value that was previously in the state, the | ||
@@ -150,5 +157,6 @@ // input value should be updated to match | ||
| safelySetColorValue(newValue); | ||
| validation.commitValidation(); | ||
| }; | ||
| let decrement = () => { | ||
| let newValue = addColorValue(parsed.current, -step); | ||
| let newValue = addColorValue(parsedValue, -step); | ||
| // if we've arrived at the same value that was previously in the state, the | ||
@@ -162,2 +170,3 @@ // input value should be updated to match | ||
| safelySetColorValue(newValue); | ||
| validation.commitValidation(); | ||
| }; | ||
@@ -170,2 +179,3 @@ let incrementToMax = () => safelySetColorValue(MAX_COLOR); | ||
| return { | ||
| ...validation, | ||
| validate, | ||
@@ -172,0 +182,0 @@ colorValue, |
@@ -17,2 +17,3 @@ /* | ||
| import {useControlledState} from '@react-stately/utils'; | ||
| import {useMemo} from 'react'; | ||
@@ -25,7 +26,9 @@ export interface ColorSliderState extends SliderState { | ||
| /** Returns the color that should be displayed in the slider instead of `value` or the optional parameter. */ | ||
| getDisplayColor(): Color | ||
| getDisplayColor(): Color, | ||
| /** Whether the color slider is currently being dragged. */ | ||
| readonly isDragging: boolean | ||
| } | ||
| interface ColorSliderStateOptions extends ColorSliderProps { | ||
| export interface ColorSliderStateOptions extends ColorSliderProps { | ||
| /** The locale to use for formatting the color channel value. */ | ||
@@ -40,3 +43,3 @@ locale: string | ||
| export function useColorSliderState(props: ColorSliderStateOptions): ColorSliderState { | ||
| let {channel, value, defaultValue, onChange, locale, ...otherProps} = props; | ||
| let {channel, colorSpace, value, defaultValue, onChange, locale, ...otherProps} = props; | ||
| if (value == null && defaultValue == null) { | ||
@@ -46,13 +49,22 @@ throw new Error('useColorSliderState requires a value or defaultValue'); | ||
| let [color, setColor] = useControlledState(value && normalizeColor(value), defaultValue && normalizeColor(defaultValue), onChange); | ||
| if (value) { | ||
| value = normalizeColor(value); | ||
| } | ||
| if (defaultValue) { | ||
| defaultValue = normalizeColor(defaultValue); | ||
| } | ||
| // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error | ||
| let [colorValue, setColor] = useControlledState<Color>(value as Color, defaultValue as Color, onChange); | ||
| let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]); | ||
| let sliderState = useSliderState({ | ||
| ...color.getChannelRange(channel), | ||
| ...otherProps, | ||
| // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript. | ||
| // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring. | ||
| // @ts-ignore | ||
| numberFormatter: null, | ||
| value: [color.getChannelValue(channel)], | ||
| onChange([v]) { | ||
| value: color.getChannelValue(channel), | ||
| onChange(v) { | ||
| setColor(color.withChannelValue(channel, v)); | ||
| }, | ||
| onChangeEnd([v]) { | ||
| onChangeEnd(v) { | ||
| // onChange will have already been called with the right value, this is just to trigger onChangeEnd | ||
@@ -94,4 +106,5 @@ if (props.onChangeEnd) { | ||
| step, | ||
| pageSize | ||
| pageSize, | ||
| isDragging: sliderState.isThumbDragging(0) | ||
| }; | ||
| } |
@@ -16,3 +16,3 @@ /* | ||
| import {useControlledState} from '@react-stately/utils'; | ||
| import {useRef, useState} from 'react'; | ||
| import {useMemo, useRef, useState} from 'react'; | ||
@@ -46,4 +46,9 @@ export interface ColorWheelState { | ||
| getDisplayColor(): Color, | ||
| /** The step value of the hue channel, used when incrementing and decrementing. */ | ||
| step: number, | ||
| pageStep: number | ||
| /** The page step value of the hue channel, used when incrementing and decrementing. */ | ||
| pageStep: number, | ||
| /** Whether the color wheel is disabled. */ | ||
| readonly isDisabled: boolean | ||
| } | ||
@@ -96,11 +101,25 @@ | ||
| export function useColorWheelState(props: ColorWheelProps): ColorWheelState { | ||
| let {defaultValue, onChange, onChangeEnd} = props; | ||
| let {value: propsValue, defaultValue, onChange, onChangeEnd} = props; | ||
| if (!props.value && !defaultValue) { | ||
| if (!propsValue && !defaultValue) { | ||
| defaultValue = DEFAULT_COLOR; | ||
| } | ||
| if (propsValue) { | ||
| propsValue = normalizeColor(propsValue); | ||
| } | ||
| if (defaultValue) { | ||
| defaultValue = normalizeColor(defaultValue); | ||
| } | ||
| let [value, setValue] = useControlledState(normalizeColor(props.value), normalizeColor(defaultValue), onChange); | ||
| // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default | ||
| let [stateValue, setValueState] = useControlledState<Color>(propsValue as Color, defaultValue as Color, onChange); | ||
| let value = useMemo(() => { | ||
| let colorSpace = stateValue.getColorSpace(); | ||
| return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl'); | ||
| }, [stateValue]); | ||
| let valueRef = useRef(value); | ||
| valueRef.current = value; | ||
| let setValue = (value: Color) => { | ||
| valueRef.current = value; | ||
| setValueState(value); | ||
| }; | ||
@@ -110,3 +129,3 @@ let channelRange = value.getChannelRange('hue'); | ||
| let [isDragging, setDragging] = useState(false); | ||
| let isDraggingRef = useRef(false).current; | ||
| let isDraggingRef = useRef(false); | ||
@@ -122,3 +141,2 @@ let hue = value.getChannelValue('hue'); | ||
| let color = value.withChannelValue('hue', v); | ||
| valueRef.current = color; | ||
| setValue(color); | ||
@@ -134,3 +152,2 @@ } | ||
| let color = normalizeColor(v); | ||
| valueRef.current = color; | ||
| setValue(color); | ||
@@ -166,4 +183,4 @@ }, | ||
| setDragging(isDragging) { | ||
| let wasDragging = isDraggingRef; | ||
| isDraggingRef = isDragging; | ||
| let wasDragging = isDraggingRef.current; | ||
| isDraggingRef.current = isDragging; | ||
@@ -178,5 +195,6 @@ if (onChangeEnd && !isDragging && wasDragging) { | ||
| getDisplayColor() { | ||
| return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50); | ||
| } | ||
| return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1); | ||
| }, | ||
| isDisabled: props.isDisabled || false | ||
| }; | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 4 instances in 1 package
Fixed alerts
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
789274
130%- Number of package files
233
1356.25%- Lines of code
10017
201.99%Worsened metrics
- Dependency count
10
11.11%- Number of low license alerts
4
Infinity%- License quality
80
-20%Dependency changes
+ Added
@internationalized/string@3.0.0-nightly-016590a4a-250131+ Added
@react-stately/numberfield@3.0.0-nightly-016590a4a-250131+ Added
@swc/helpers@^0.5.0+ Added
@internationalized/number@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@internationalized/string@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@react-stately/form@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@react-stately/numberfield@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@react-stately/slider@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@react-stately/utils@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@react-types/color@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@react-types/numberfield@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@react-types/shared@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@react-types/slider@3.0.0-nightly-016590a4a-250131(transitive)+ Added
@swc/helpers@0.5.15(transitive)+ Added
react@19.0.0(transitive)+ Added
tslib@2.8.1(transitive)- Removed
@babel/runtime@^7.6.2- Removed
@internationalized/message@3.0.8-nightly.3316+73ade2986- Removed
@react-types/numberfield@3.3.1-nightly.3316+73ade2986- Removed
@babel/runtime@7.26.9(transitive)- Removed
js-tokens@4.0.0(transitive)- Removed
loose-envify@1.4.0(transitive)- Removed
react@18.3.1(transitive)- Removed
regenerator-runtime@0.14.1(transitive)Updated
@internationalized/number@3.0.0-nightly-016590a4a-250131