@chayns-components/color-picker 5.0.0-beta.883 → 5.0.0-beta.885
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/ColorPickerProvider.js +13 -2
- package/lib/cjs/components/ColorPickerProvider.js.map +1 -1
- package/lib/cjs/components/color-picker-popup/more-options/MoreOptions.js +13 -2
- package/lib/cjs/components/color-picker-popup/more-options/MoreOptions.js.map +1 -1
- package/lib/cjs/components/hue-slider/HueSlider.js +6 -1
- package/lib/cjs/components/hue-slider/HueSlider.js.map +1 -1
- package/lib/cjs/components/transparency-slider/TransparencySlider.js +6 -1
- package/lib/cjs/components/transparency-slider/TransparencySlider.js.map +1 -1
- package/lib/cjs/utils/color.js +19 -1
- package/lib/cjs/utils/color.js.map +1 -1
- package/lib/esm/components/ColorPickerProvider.js +13 -2
- package/lib/esm/components/ColorPickerProvider.js.map +1 -1
- package/lib/esm/components/color-picker-popup/more-options/MoreOptions.js +13 -2
- package/lib/esm/components/color-picker-popup/more-options/MoreOptions.js.map +1 -1
- package/lib/esm/components/hue-slider/HueSlider.js +7 -2
- package/lib/esm/components/hue-slider/HueSlider.js.map +1 -1
- package/lib/esm/components/transparency-slider/TransparencySlider.js +7 -2
- package/lib/esm/components/transparency-slider/TransparencySlider.js.map +1 -1
- package/lib/esm/utils/color.js +17 -0
- package/lib/esm/utils/color.js.map +1 -1
- package/lib/types/components/color-picker-popup/color-area/ColorArea.styles.d.ts +2 -2
- package/lib/types/utils/color.d.ts +1 -0
- package/package.json +3 -3
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.ColorPickerContext = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _color = require("../utils/color");
|
|
8
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
9
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
10
11
|
const ColorPickerContext = exports.ColorPickerContext = /*#__PURE__*/_react.default.createContext({
|
|
@@ -46,8 +47,18 @@ const ColorPickerProvider = ({
|
|
|
46
47
|
setInternalShouldCallOnSelect(shouldCallOnSelect);
|
|
47
48
|
}, []);
|
|
48
49
|
(0, _react.useEffect)(() => {
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
let newColor = selectedColor;
|
|
51
|
+
if (newColor && !(0, _color.isValidRGBA)(newColor)) {
|
|
52
|
+
const {
|
|
53
|
+
r,
|
|
54
|
+
g,
|
|
55
|
+
b,
|
|
56
|
+
a
|
|
57
|
+
} = (0, _color.hexToRgb)(newColor);
|
|
58
|
+
newColor = `rgba(${r},${g},${b},${a})`;
|
|
59
|
+
}
|
|
60
|
+
setInternalSelectedColor(newColor);
|
|
61
|
+
setInternalHueColor(newColor);
|
|
51
62
|
setInternalIsPresetColor(true);
|
|
52
63
|
}, [selectedColor]);
|
|
53
64
|
(0, _react.useEffect)(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerProvider.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerContext","exports","React","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","displayName","ColorPickerProvider","children","onSelect","internalSelectedColor","setInternalSelectedColor","useState","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","useCallback","color","useEffect","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\n\ninterface IColorPickerContext {\n selectedColor?: string;\n updateSelectedColor?: (color: string | undefined) => void;\n hueColor?: string;\n updateHueColor?: (color: string | undefined) => void;\n isPresetColor?: boolean;\n updateIsPresetColor?: (isPresetColor: boolean) => void;\n shouldGetCoordinates?: boolean;\n updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n shouldCallOnSelect?: boolean;\n updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n selectedColor: undefined,\n updateSelectedColor: undefined,\n hueColor: undefined,\n updateHueColor: undefined,\n isPresetColor: undefined,\n updateIsPresetColor: undefined,\n shouldGetCoordinates: undefined,\n updateShouldGetCoordinates: undefined,\n shouldCallOnSelect: undefined,\n updateShouldCallOnSelect: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n /**\n * The children of the provider.\n */\n children: ReactNode;\n /**\n * Function to be executed when a color is selected.\n */\n onSelect?: (color: string) => void;\n /**\n * The color that should be preselected.\n */\n selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n const [internalHueColor, setInternalHueColor] = useState<string>();\n const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n\n const updateSelectedColor = useCallback((color: string | undefined) => {\n setInternalSelectedColor(color);\n }, []);\n\n const updateHueColor = useCallback((color: string | undefined) => {\n setInternalHueColor(color);\n }, []);\n\n const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n setInternalIsPresetColor(isPresetColor);\n }, []);\n\n const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n setInternalShouldGetCoordinates(shouldGetCoordinates);\n }, []);\n\n const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n setInternalShouldCallOnSelect(shouldCallOnSelect);\n }, []);\n\n useEffect(() => {\n setInternalSelectedColor(
|
|
1
|
+
{"version":3,"file":"ColorPickerProvider.js","names":["_react","_interopRequireWildcard","require","_color","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerContext","exports","React","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","displayName","ColorPickerProvider","children","onSelect","internalSelectedColor","setInternalSelectedColor","useState","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","useCallback","color","useEffect","newColor","isValidRGBA","g","b","hexToRgb","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { hexToRgb, isValidRGBA } from '../utils/color';\n\ninterface IColorPickerContext {\n selectedColor?: string;\n updateSelectedColor?: (color: string | undefined) => void;\n hueColor?: string;\n updateHueColor?: (color: string | undefined) => void;\n isPresetColor?: boolean;\n updateIsPresetColor?: (isPresetColor: boolean) => void;\n shouldGetCoordinates?: boolean;\n updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n shouldCallOnSelect?: boolean;\n updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n selectedColor: undefined,\n updateSelectedColor: undefined,\n hueColor: undefined,\n updateHueColor: undefined,\n isPresetColor: undefined,\n updateIsPresetColor: undefined,\n shouldGetCoordinates: undefined,\n updateShouldGetCoordinates: undefined,\n shouldCallOnSelect: undefined,\n updateShouldCallOnSelect: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n /**\n * The children of the provider.\n */\n children: ReactNode;\n /**\n * Function to be executed when a color is selected.\n */\n onSelect?: (color: string) => void;\n /**\n * The color that should be preselected.\n */\n selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n const [internalHueColor, setInternalHueColor] = useState<string>();\n const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n\n const updateSelectedColor = useCallback((color: string | undefined) => {\n setInternalSelectedColor(color);\n }, []);\n\n const updateHueColor = useCallback((color: string | undefined) => {\n setInternalHueColor(color);\n }, []);\n\n const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n setInternalIsPresetColor(isPresetColor);\n }, []);\n\n const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n setInternalShouldGetCoordinates(shouldGetCoordinates);\n }, []);\n\n const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n setInternalShouldCallOnSelect(shouldCallOnSelect);\n }, []);\n\n useEffect(() => {\n let newColor = selectedColor;\n\n if (newColor && !isValidRGBA(newColor)) {\n const { r, g, b, a } = hexToRgb(newColor);\n\n newColor = `rgba(${r},${g},${b},${a})`;\n }\n\n setInternalSelectedColor(newColor);\n setInternalHueColor(newColor);\n setInternalIsPresetColor(true);\n }, [selectedColor]);\n\n useEffect(() => {\n if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {\n onSelect(internalSelectedColor);\n\n setInternalShouldCallOnSelect(false);\n }\n }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);\n\n const providerValue = useMemo<IColorPickerContext>(\n () => ({\n selectedColor: internalSelectedColor,\n updateSelectedColor,\n hueColor: internalHueColor,\n updateHueColor,\n isPresetColor: internalIsPresetColor,\n updateIsPresetColor,\n shouldGetCoordinates: internalShouldGetCoordinates,\n updateShouldGetCoordinates,\n shouldCallOnSelect: internalShouldCallOnSelect,\n updateShouldCallOnSelect,\n }),\n [\n internalHueColor,\n internalIsPresetColor,\n internalSelectedColor,\n internalShouldCallOnSelect,\n internalShouldGetCoordinates,\n updateHueColor,\n updateIsPresetColor,\n updateSelectedColor,\n updateShouldCallOnSelect,\n updateShouldGetCoordinates,\n ],\n );\n\n return (\n <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>\n );\n};\n\nColorPickerProvider.displayName = 'ColorPickerProvider';\n\nexport default ColorPickerProvider;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -54,8 +54,19 @@ const MoreOptions = () => {
|
|
|
54
54
|
};
|
|
55
55
|
(0, _react.useEffect)(() => {
|
|
56
56
|
if (selectedColor) {
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
if ((0, _color.isValidRGBA)(selectedColor)) {
|
|
58
|
+
setTmpRgbValue(selectedColor);
|
|
59
|
+
setTmpHexValue((0, _color.rgbToHex)((0, _color.extractRgbValues)(selectedColor ?? '')));
|
|
60
|
+
} else {
|
|
61
|
+
const {
|
|
62
|
+
r,
|
|
63
|
+
g,
|
|
64
|
+
b,
|
|
65
|
+
a
|
|
66
|
+
} = (0, _color.hexToRgb)(selectedColor);
|
|
67
|
+
setTmpRgbValue(`rgba(${r},${g},${b},${a})`);
|
|
68
|
+
setTmpHexValue(selectedColor);
|
|
69
|
+
}
|
|
59
70
|
}
|
|
60
71
|
}, [selectedColor]);
|
|
61
72
|
return /*#__PURE__*/_react.default.createElement(_MoreOptions.StyledMoreOptions, null, /*#__PURE__*/_react.default.createElement(_core.AccordionGroup, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MoreOptions.js","names":["_core","require","_colors","_react","_interopRequireWildcard","_color","_ColorPickerProvider","_MoreOptions","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MoreOptions","selectedColor","updateSelectedColor","updateShouldCallOnSelect","useContext","ColorPickerContext","areaProvider","AreaContext","tmpHexValue","setTmpHexValue","useState","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","shouldChangeColor","useMemo","handleHexChange","event","target","value","isValid","isHex","g","b","hexToRgb","handleRgbChange","isValidRGBA","useEffect","rgbToHex","extractRgbValues","createElement","StyledMoreOptions","AccordionGroup","isWrapped","Accordion","title","StyledMoreOptionsInputWrapper","StyledMoreOptionsInput","$shouldChangeColor","onChange","$isInvalid","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import { Accordion, AccordionGroup, AreaContext } from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useMemo, useState, type ChangeEvent } from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n StyledMoreOptions,\n StyledMoreOptionsInput,\n StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\n\nconst MoreOptions = () => {\n const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n useContext(ColorPickerContext);\n const areaProvider = useContext(AreaContext);\n\n const [tmpHexValue, setTmpHexValue] = useState('');\n const [tmpRgbValue, setTmpRgbValue] = useState('');\n const [isHexInvalid, setIsHexInvalid] = useState(false);\n const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpHexValue(event.target.value);\n\n const isValid = isHex(event.target.value);\n\n setIsHexInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n const { r, g, b, a } = hexToRgb(event.target.value);\n\n updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpRgbValue(event.target.value);\n\n const isValid = isValidRGBA(event.target.value);\n\n setIsRgbInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n updateSelectedColor(event.target.value);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n useEffect(() => {\n if (selectedColor) {\n setTmpRgbValue(selectedColor);\n
|
|
1
|
+
{"version":3,"file":"MoreOptions.js","names":["_core","require","_colors","_react","_interopRequireWildcard","_color","_ColorPickerProvider","_MoreOptions","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MoreOptions","selectedColor","updateSelectedColor","updateShouldCallOnSelect","useContext","ColorPickerContext","areaProvider","AreaContext","tmpHexValue","setTmpHexValue","useState","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","shouldChangeColor","useMemo","handleHexChange","event","target","value","isValid","isHex","g","b","hexToRgb","handleRgbChange","isValidRGBA","useEffect","rgbToHex","extractRgbValues","createElement","StyledMoreOptions","AccordionGroup","isWrapped","Accordion","title","StyledMoreOptionsInputWrapper","StyledMoreOptionsInput","$shouldChangeColor","onChange","$isInvalid","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import { Accordion, AccordionGroup, AreaContext } from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useMemo, useState, type ChangeEvent } from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n StyledMoreOptions,\n StyledMoreOptionsInput,\n StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\n\nconst MoreOptions = () => {\n const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n useContext(ColorPickerContext);\n const areaProvider = useContext(AreaContext);\n\n const [tmpHexValue, setTmpHexValue] = useState('');\n const [tmpRgbValue, setTmpRgbValue] = useState('');\n const [isHexInvalid, setIsHexInvalid] = useState(false);\n const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpHexValue(event.target.value);\n\n const isValid = isHex(event.target.value);\n\n setIsHexInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n const { r, g, b, a } = hexToRgb(event.target.value);\n\n updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpRgbValue(event.target.value);\n\n const isValid = isValidRGBA(event.target.value);\n\n setIsRgbInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n updateSelectedColor(event.target.value);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n useEffect(() => {\n if (selectedColor) {\n if (isValidRGBA(selectedColor)) {\n setTmpRgbValue(selectedColor);\n setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n } else {\n const { r, g, b, a } = hexToRgb(selectedColor);\n\n setTmpRgbValue(`rgba(${r},${g},${b},${a})`);\n setTmpHexValue(selectedColor);\n }\n }\n }, [selectedColor]);\n\n return (\n <StyledMoreOptions>\n <AccordionGroup isWrapped>\n <Accordion title=\"Erweitert\">\n <StyledMoreOptionsInputWrapper>\n <StyledMoreOptionsInput\n $shouldChangeColor={shouldChangeColor}\n value={tmpHexValue}\n onChange={handleHexChange}\n $isInvalid={isHexInvalid}\n />\n <StyledMoreOptionsInput\n $shouldChangeColor={shouldChangeColor}\n value={tmpRgbValue}\n onChange={handleRgbChange}\n $isInvalid={isRgbInvalid}\n />\n </StyledMoreOptionsInputWrapper>\n </Accordion>\n </AccordionGroup>\n </StyledMoreOptions>\n );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -25,7 +25,12 @@ const HueSlider = ({
|
|
|
25
25
|
const sliderRef = (0, _react.useRef)(null);
|
|
26
26
|
(0, _react.useEffect)(() => {
|
|
27
27
|
if (color) {
|
|
28
|
-
|
|
28
|
+
let rgb;
|
|
29
|
+
if ((0, _color.isValidRGBA)(color)) {
|
|
30
|
+
rgb = (0, _color.splitRgb)(color);
|
|
31
|
+
} else {
|
|
32
|
+
rgb = (0, _color.hexToRgb)(color);
|
|
33
|
+
}
|
|
29
34
|
if (!rgb) {
|
|
30
35
|
return;
|
|
31
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HueSlider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_color","_HueSlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HueSlider","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","useState","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","useRef","sliderRef","useEffect","rgb","splitRgb","g","b","hsl","convertColorToHsl","match","toString","parseInt","handleInputChange","useCallback","event","Number","target","value","percentage","hue","saturation","lightness","hslToRgb255","h","s","l","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","extractHsl","handleEnd","createElement","StyledHueSlider","StyledHueSliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledHueSliderThumb","$position","displayName","_default","exports"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n ChangeEvent,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n /**\n * The color that should be selected.\n */\n color?: CSSProperties['color'];\n /**\n * Function that will be executed when the color is changed.\n */\n onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * Function that will be executed when the color is ending to change.\n */\n onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * Function that will be executed when the color is starting to change.\n */\n onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * The opacity of the Color. Is used if the color has no opacity value.\n */\n opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n onChange,\n onStart,\n onEnd,\n opacity,\n color = 'rgba(255, 0, 0, 1)',\n}) => {\n const [editedValue, setEditedValue] = useState(0);\n const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n const [internalOpacity, setInternalOpacity] = useState(1);\n\n const sliderThumbRef = useRef<HTMLDivElement>(null);\n const sliderRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (color) {\n const rgb = splitRgb(color);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b, a } = rgb;\n\n setInternalOpacity(a);\n\n const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n if (!match || !match[1]) {\n return;\n }\n\n setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n setEditedValue(parseInt(match[1], 10));\n }\n }, [color]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setEditedValue(Number(event.target.value));\n\n const percentage = (Number(event.target.value) / 360) * 100;\n const hue = (percentage / 100) * 360;\n const saturation = 100;\n const lightness = 50;\n\n const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n setHslColor(hsl);\n\n if (typeof onChange === 'function') {\n const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n if (!rgb) {\n return;\n }\n\n onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n }\n },\n [internalOpacity, onChange, opacity],\n );\n\n const sliderThumbPosition = useMemo(() => {\n if (sliderRef.current && sliderThumbRef.current) {\n return (\n (editedValue / 360) *\n (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [editedValue]);\n\n const handleStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n\n if (typeof onStart === 'function' && hslColor) {\n const hsl = extractHsl(hslColor);\n\n if (!hsl) {\n return;\n }\n\n const rgb = hslToRgb255(hsl);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n }\n }, [hslColor, internalOpacity, onStart, opacity]);\n\n const handleEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n if (typeof onEnd === 'function' && hslColor) {\n const hsl = extractHsl(hslColor);\n\n if (!hsl) {\n return;\n }\n\n const rgb = hslToRgb255(hsl);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n }\n }, [hslColor, internalOpacity, onEnd, opacity]);\n\n return useMemo(\n () => (\n <StyledHueSlider>\n <StyledHueSliderInput\n ref={sliderRef}\n $color={hslColor}\n type=\"range\"\n min={0}\n max={360}\n value={editedValue}\n onChange={handleInputChange}\n onPointerDown={handleStart}\n onPointerUp={handleEnd}\n />\n <StyledHueSliderThumb\n ref={sliderThumbRef}\n $position={sliderThumbPosition}\n $color={hslColor}\n />\n </StyledHueSlider>\n ),\n [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"HueSlider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_color","_HueSlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HueSlider","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","useState","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","useRef","sliderRef","useEffect","rgb","isValidRGBA","splitRgb","hexToRgb","g","b","hsl","convertColorToHsl","match","toString","parseInt","handleInputChange","useCallback","event","Number","target","value","percentage","hue","saturation","lightness","hslToRgb255","h","s","l","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","extractHsl","handleEnd","createElement","StyledHueSlider","StyledHueSliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledHueSliderThumb","$position","displayName","_default","exports"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n ChangeEvent,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n /**\n * The color that should be selected.\n */\n color?: CSSProperties['color'];\n /**\n * Function that will be executed when the color is changed.\n */\n onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * Function that will be executed when the color is ending to change.\n */\n onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * Function that will be executed when the color is starting to change.\n */\n onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * The opacity of the Color. Is used if the color has no opacity value.\n */\n opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n onChange,\n onStart,\n onEnd,\n opacity,\n color = 'rgba(255, 0, 0, 1)',\n}) => {\n const [editedValue, setEditedValue] = useState(0);\n const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n const [internalOpacity, setInternalOpacity] = useState(1);\n\n const sliderThumbRef = useRef<HTMLDivElement>(null);\n const sliderRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (color) {\n let rgb;\n\n if (isValidRGBA(color)) {\n rgb = splitRgb(color);\n } else {\n rgb = hexToRgb(color);\n }\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b, a } = rgb;\n\n setInternalOpacity(a);\n\n const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n if (!match || !match[1]) {\n return;\n }\n\n setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n setEditedValue(parseInt(match[1], 10));\n }\n }, [color]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setEditedValue(Number(event.target.value));\n\n const percentage = (Number(event.target.value) / 360) * 100;\n const hue = (percentage / 100) * 360;\n const saturation = 100;\n const lightness = 50;\n\n const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n setHslColor(hsl);\n\n if (typeof onChange === 'function') {\n const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n if (!rgb) {\n return;\n }\n\n onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n }\n },\n [internalOpacity, onChange, opacity],\n );\n\n const sliderThumbPosition = useMemo(() => {\n if (sliderRef.current && sliderThumbRef.current) {\n return (\n (editedValue / 360) *\n (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [editedValue]);\n\n const handleStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n\n if (typeof onStart === 'function' && hslColor) {\n const hsl = extractHsl(hslColor);\n\n if (!hsl) {\n return;\n }\n\n const rgb = hslToRgb255(hsl);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n }\n }, [hslColor, internalOpacity, onStart, opacity]);\n\n const handleEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n if (typeof onEnd === 'function' && hslColor) {\n const hsl = extractHsl(hslColor);\n\n if (!hsl) {\n return;\n }\n\n const rgb = hslToRgb255(hsl);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n }\n }, [hslColor, internalOpacity, onEnd, opacity]);\n\n return useMemo(\n () => (\n <StyledHueSlider>\n <StyledHueSliderInput\n ref={sliderRef}\n $color={hslColor}\n type=\"range\"\n min={0}\n max={360}\n value={editedValue}\n onChange={handleInputChange}\n onPointerDown={handleStart}\n onPointerUp={handleEnd}\n />\n <StyledHueSliderThumb\n ref={sliderThumbRef}\n $position={sliderThumbPosition}\n $color={hslColor}\n />\n </StyledHueSlider>\n ),\n [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -23,7 +23,12 @@ const TransparencySlider = ({
|
|
|
23
23
|
const sliderRef = (0, _react.useRef)(null);
|
|
24
24
|
(0, _react.useEffect)(() => {
|
|
25
25
|
if (color) {
|
|
26
|
-
|
|
26
|
+
let rgb;
|
|
27
|
+
if ((0, _color.isValidRGBA)(color)) {
|
|
28
|
+
rgb = (0, _color.splitRgb)(color);
|
|
29
|
+
} else {
|
|
30
|
+
rgb = (0, _color.hexToRgb)(color);
|
|
31
|
+
}
|
|
27
32
|
if (!rgb) {
|
|
28
33
|
return;
|
|
29
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TransparencySlider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_color","_TransparencySlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TransparencySlider","onChange","onStart","onEnd","color","editedValue","setEditedValue","useState","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","useRef","sliderRef","useEffect","rgb","splitRgb","g","b","newColor","handleInputChange","useCallback","event","Number","target","value","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","handleEnd","createElement","StyledTransparencySlider","StyledTransparencySliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledTransparencySliderBackground","StyledTransparencySliderThumbWrapper","$position","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","displayName","_default","exports"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { splitRgb } from '../../utils/color';\nimport {\n StyledTransparencySlider,\n StyledTransparencySliderBackground,\n StyledTransparencySliderInput,\n StyledTransparencySliderThumb,\n StyledTransparencySliderThumbBackground,\n StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n /**\n * The color that should be selected.\n */\n color?: string;\n /**\n * Function that will be executed when the opacity is changed.\n */\n onChange?: (color: string) => void;\n /**\n * Function that will be executed when the opacity is ending to change.\n */\n onEnd?: (color: string) => void;\n /**\n * Function that will be executed when the opacity is starting to change.\n */\n onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n onChange,\n onStart,\n onEnd,\n color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n const [editedValue, setEditedValue] = useState(0);\n const [pureColor, setPureColor] = useState<string>();\n const [previewColor, setPreviewColor] = useState<string>();\n\n const sliderThumbRef = useRef<HTMLDivElement>(null);\n const sliderRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (color) {\n const rgb = splitRgb(color);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b, a } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n setPreviewColor(newColor);\n setPureColor(`rgb(${r},${g},${b},1)`);\n setEditedValue(100 - a * 100);\n }\n }, [color]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const a = Number(event.target.value);\n\n setEditedValue(a);\n\n const rgb = splitRgb(pureColor);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n setPreviewColor(newColor);\n\n if (typeof onChange === 'function') {\n onChange(newColor);\n }\n },\n [onChange, pureColor],\n );\n\n const sliderThumbPosition = useMemo(() => {\n if (sliderRef.current && sliderThumbRef.current) {\n return (\n (editedValue / 100) *\n (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [editedValue]);\n\n const handleStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n\n if (typeof onStart === 'function') {\n const rgb = splitRgb(pureColor);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n onStart(newColor);\n }\n }, [editedValue, onStart, pureColor]);\n\n const handleEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n if (typeof onEnd === 'function') {\n const rgb = splitRgb(pureColor);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n onEnd(newColor);\n }\n }, [editedValue, onEnd, pureColor]);\n\n return (\n <StyledTransparencySlider>\n <StyledTransparencySliderInput\n ref={sliderRef}\n $color={pureColor}\n type=\"range\"\n min={0}\n max={100}\n value={editedValue}\n onPointerDown={handleStart}\n onPointerUp={handleEnd}\n onChange={handleInputChange}\n />\n <StyledTransparencySliderBackground />\n <StyledTransparencySliderThumbWrapper\n ref={sliderThumbRef}\n $position={sliderThumbPosition}\n >\n <StyledTransparencySliderThumbBackground />\n <StyledTransparencySliderThumb $color={previewColor} />\n </StyledTransparencySliderThumbWrapper>\n </StyledTransparencySlider>\n );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"TransparencySlider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_color","_TransparencySlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TransparencySlider","onChange","onStart","onEnd","color","editedValue","setEditedValue","useState","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","useRef","sliderRef","useEffect","rgb","isValidRGBA","splitRgb","hexToRgb","g","b","newColor","handleInputChange","useCallback","event","Number","target","value","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","handleEnd","createElement","StyledTransparencySlider","StyledTransparencySliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledTransparencySliderBackground","StyledTransparencySliderThumbWrapper","$position","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","displayName","_default","exports"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport {\n StyledTransparencySlider,\n StyledTransparencySliderBackground,\n StyledTransparencySliderInput,\n StyledTransparencySliderThumb,\n StyledTransparencySliderThumbBackground,\n StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n /**\n * The color that should be selected.\n */\n color?: string;\n /**\n * Function that will be executed when the opacity is changed.\n */\n onChange?: (color: string) => void;\n /**\n * Function that will be executed when the opacity is ending to change.\n */\n onEnd?: (color: string) => void;\n /**\n * Function that will be executed when the opacity is starting to change.\n */\n onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n onChange,\n onStart,\n onEnd,\n color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n const [editedValue, setEditedValue] = useState(0);\n const [pureColor, setPureColor] = useState<string>();\n const [previewColor, setPreviewColor] = useState<string>();\n\n const sliderThumbRef = useRef<HTMLDivElement>(null);\n const sliderRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (color) {\n let rgb;\n\n if (isValidRGBA(color)) {\n rgb = splitRgb(color);\n } else {\n rgb = hexToRgb(color);\n }\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b, a } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n setPreviewColor(newColor);\n setPureColor(`rgb(${r},${g},${b},1)`);\n setEditedValue(100 - a * 100);\n }\n }, [color]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const a = Number(event.target.value);\n\n setEditedValue(a);\n\n const rgb = splitRgb(pureColor);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n setPreviewColor(newColor);\n\n if (typeof onChange === 'function') {\n onChange(newColor);\n }\n },\n [onChange, pureColor],\n );\n\n const sliderThumbPosition = useMemo(() => {\n if (sliderRef.current && sliderThumbRef.current) {\n return (\n (editedValue / 100) *\n (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [editedValue]);\n\n const handleStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n\n if (typeof onStart === 'function') {\n const rgb = splitRgb(pureColor);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n onStart(newColor);\n }\n }, [editedValue, onStart, pureColor]);\n\n const handleEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n if (typeof onEnd === 'function') {\n const rgb = splitRgb(pureColor);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n onEnd(newColor);\n }\n }, [editedValue, onEnd, pureColor]);\n\n return (\n <StyledTransparencySlider>\n <StyledTransparencySliderInput\n ref={sliderRef}\n $color={pureColor}\n type=\"range\"\n min={0}\n max={100}\n value={editedValue}\n onPointerDown={handleStart}\n onPointerUp={handleEnd}\n onChange={handleInputChange}\n />\n <StyledTransparencySliderBackground />\n <StyledTransparencySliderThumbWrapper\n ref={sliderThumbRef}\n $position={sliderThumbPosition}\n >\n <StyledTransparencySliderThumbBackground />\n <StyledTransparencySliderThumb $color={previewColor} />\n </StyledTransparencySliderThumbWrapper>\n </StyledTransparencySlider>\n );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/cjs/utils/color.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.splitRgb = exports.rgbToHsv = exports.rgbToHex = exports.isValidRGBA = exports.hexToRgb = exports.getCoordinatesFromColor = exports.getColorFromCoordinates = exports.extractRgbValues = exports.extractHsl = exports.convertColorToHsl = void 0;
|
|
6
|
+
exports.splitRgb = exports.rgbToHsv = exports.rgbToHex = exports.isValidRGBA = exports.isValidRGB = exports.hexToRgb = exports.getCoordinatesFromColor = exports.getColorFromCoordinates = exports.extractRgbValues = exports.extractHsl = exports.convertColorToHsl = void 0;
|
|
7
7
|
var _colors = require("@chayns/colors");
|
|
8
8
|
const getColorFromCoordinates = ({
|
|
9
9
|
coordinates,
|
|
@@ -95,6 +95,24 @@ const isValidRGBA = rgbaString => {
|
|
|
95
95
|
return !(red < 0 || red > 255 || green < 0 || green > 255 || blue < 0 || blue > 255 || alpha < 0 || alpha > 1);
|
|
96
96
|
};
|
|
97
97
|
exports.isValidRGBA = isValidRGBA;
|
|
98
|
+
const isValidRGB = rgbString => {
|
|
99
|
+
if (rgbString === '') {
|
|
100
|
+
return false;
|
|
101
|
+
}
|
|
102
|
+
const rgbRegex = /^rgb\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\s*\)$/;
|
|
103
|
+
if (!rgbRegex.test(rgbString)) {
|
|
104
|
+
return false;
|
|
105
|
+
}
|
|
106
|
+
const matches = rgbString.match(rgbRegex);
|
|
107
|
+
if (!matches) {
|
|
108
|
+
return false;
|
|
109
|
+
}
|
|
110
|
+
const red = parseInt(matches[1] ?? '', 10);
|
|
111
|
+
const green = parseInt(matches[2] ?? '', 10);
|
|
112
|
+
const blue = parseInt(matches[3] ?? '', 10);
|
|
113
|
+
return red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255;
|
|
114
|
+
};
|
|
115
|
+
exports.isValidRGB = isValidRGB;
|
|
98
116
|
const convertColorToHsl = color => {
|
|
99
117
|
const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
|
|
100
118
|
const rgbRegex = /^rgb(a)?\(\s*((25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*,\s*){2}(25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*(,\s*\d+(\.\d+)?)?\)$/i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.js","names":["_colors","require","getColorFromCoordinates","coordinates","canvas","opacity","scale","_canvas$current","current","undefined","xCords","x","yCords","y","scaleX","scaleY","ctx","getContext","willReadFrequently","pixels","getImageData","data","exports","getCoordinatesFromColor","color","tolerance","_canvas$current2","_canvas$current3","_canvas$current4","height","width","imageData","rgb","splitRgb","r","targetR","g","targetG","b","targetB","index","Math","abs","isValidRGBA","rgbaString","rgbaRegex","test","matches","match","red","parseInt","green","blue","alpha","parseFloat","convertColorToHsl","hexRegex","rgbRegex","hslRegex","rgba","hsl","newColor","replaceAll","hexToHsl","floor","h","rgb255ToHsl","Number","rgbToHsv","rgb255ToHsv","extractRgbValues","extractHsl","s","l","a","rgbString","hexToRgb","hex","result","exec","rgbToHex","clamp","value","max","min","round","hexValue","toString","length"],"sources":["../../../src/utils/color.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from 'react';\n\nimport { hexToHsl, rgb255ToHsl, rgb255ToHsv } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { Coordinates, RGBA, Scale } from '../types/colorPicker';\n\ninterface GetColorFromCoordinatesOptions {\n coordinates: Coordinates;\n canvas: RefObject<HTMLCanvasElement>;\n opacity: number;\n scale: Scale;\n}\n\nexport const getColorFromCoordinates = ({\n coordinates,\n canvas,\n opacity,\n scale,\n}: GetColorFromCoordinatesOptions) => {\n if (!canvas.current) {\n return undefined;\n }\n\n const xCords = coordinates.x;\n const yCords = coordinates.y;\n\n const x = (xCords - 0.5) * scale.scaleX;\n const y = (yCords - 0.5) * scale.scaleY;\n\n const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n const pixels = ctx?.getImageData(x, y, 1, 1).data;\n\n if (!pixels) {\n return undefined;\n }\n\n // If transparency\n if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {\n return 'transparent';\n }\n\n return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;\n};\n\ninterface GetCoordinatesFromColorOptions {\n color: CSSProperties['color'];\n canvas: RefObject<HTMLCanvasElement>;\n tolerance?: number;\n}\n\nexport const getCoordinatesFromColor = ({\n canvas,\n color,\n tolerance = 0,\n}: GetCoordinatesFromColorOptions) => {\n const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n\n if (!ctx) {\n return null;\n }\n\n const height = canvas.current?.height ?? 150;\n const width = canvas.current?.width ?? 300;\n\n const imageData = ctx.getImageData(0, 0, width, height);\n const pixels = imageData.data;\n\n const rgb = splitRgb(color);\n\n if (!rgb) {\n return null;\n }\n\n const { r: targetR, g: targetG, b: targetB } = rgb;\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const index = (y * width + x) * 4;\n const r = pixels[index] ?? 0;\n const g = pixels[index + 1] ?? 0;\n const b = pixels[index + 2] ?? 0;\n\n if (\n Math.abs(targetR - r) <= tolerance &&\n Math.abs(targetG - g) <= tolerance &&\n Math.abs(targetB - b) <= tolerance\n ) {\n return { x, y };\n }\n }\n }\n\n return null;\n};\n\nexport const isValidRGBA = (rgbaString: string): boolean => {\n if (rgbaString === '') {\n return false;\n }\n\n const rgbaRegex = /^rgba\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*((0?\\.\\d+)|(1|0))\\s*\\)$/;\n if (!rgbaRegex.test(rgbaString)) {\n return false;\n }\n\n const matches = rgbaString.match(rgbaRegex);\n if (!matches) {\n return false;\n }\n\n const red = parseInt(matches[1] ?? '', 10);\n const green = parseInt(matches[2] ?? '', 10);\n const blue = parseInt(matches[3] ?? '', 10);\n const alpha = parseFloat(matches[4] ?? '');\n\n return !(\n red < 0 ||\n red > 255 ||\n green < 0 ||\n green > 255 ||\n blue < 0 ||\n blue > 255 ||\n alpha < 0 ||\n alpha > 1\n );\n};\n\nexport const convertColorToHsl = (color: string) => {\n const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n const rgbRegex =\n /^rgb(a)?\\(\\s*((25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*,\\s*){2}(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n const hslRegex =\n /^hsla?\\(\\s*((360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*,\\s*){2}(360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n\n let rgba: string[] | null;\n let hsl: HSL | HSLA | null;\n\n const newColor = color.replaceAll('%', '');\n\n switch (true) {\n case hexRegex.test(newColor):\n hsl = hexToHsl(color);\n\n if (!hsl) {\n return undefined;\n }\n\n return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n case rgbRegex.test(newColor):\n rgba = color.match(/[\\d.]+/g);\n\n if (!rgba) {\n return undefined;\n }\n\n hsl = rgb255ToHsl({\n r: Number(rgba[0]),\n g: Number(rgba[1]),\n b: Number(rgba[2]),\n });\n\n if (!hsl) {\n return undefined;\n }\n\n return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n case hslRegex.test(newColor):\n return color;\n default:\n return undefined;\n }\n};\n\nexport const rgbToHsv = (color: CSSProperties['color']) =>\n rgb255ToHsv(extractRgbValues(color ?? ''));\n\nexport const extractHsl = (hsl: string) => {\n const match = hsl.match(\n /hsl\\(\\s*(\\d+(?:\\.\\d+)?)\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*\\)/i,\n );\n\n if (!match) {\n return null;\n }\n\n const h = parseFloat(match[1] ?? '');\n const s = parseFloat(match[2] ?? '') / 100;\n const l = parseFloat(match[3] ?? '') / 100;\n\n return { h, s, l };\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGBA => {\n const rgba = color?.match(/[\\d.]+/g);\n\n if (!rgba) {\n return null;\n }\n\n return { r: Number(rgba[0]), g: Number(rgba[1]), b: Number(rgba[2]), a: Number(rgba[3]) };\n};\n\nexport const extractRgbValues = (rgbString: string): RGBA => {\n const rgbaRegex = /rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)/;\n const match = rgbString.match(rgbaRegex);\n\n if (match) {\n const r = parseInt(match[1] ?? '', 10);\n const g = parseInt(match[2] ?? '', 10);\n const b = parseInt(match[3] ?? '', 10);\n const a = parseFloat(match[4] ?? '');\n\n return { r, g, b, a };\n }\n\n return {\n r: 255,\n g: 255,\n b: 255,\n a: 1,\n };\n};\n\nexport const hexToRgb = (hex: string): RGBA => {\n let r: number;\n let g: number;\n let b: number;\n let a: number;\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i.exec(hex);\n\n if (result) {\n r = parseInt(result[1] ?? '0', 16);\n g = parseInt(result[2] ?? '0', 16);\n b = parseInt(result[3] ?? '0', 16);\n a = result[4] ? parseInt(result[4], 16) / 100 : 1;\n\n return { r, g, b, a };\n }\n\n return {\n r: 255,\n g: 255,\n b: 255,\n a: 1,\n };\n};\n\nexport const rgbToHex = ({ r, g, b, a = 1 }: RGBA): string => {\n const clamp = (value: number) => Math.max(0, Math.min(255, Math.round(value)));\n const alpha = Math.max(0, Math.min(1, a));\n const hex = (x: number) => {\n const hexValue = clamp(x).toString(16);\n return hexValue.length === 1 ? `0${hexValue}` : hexValue;\n };\n return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 100) : ''}`;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"color.js","names":["_colors","require","getColorFromCoordinates","coordinates","canvas","opacity","scale","_canvas$current","current","undefined","xCords","x","yCords","y","scaleX","scaleY","ctx","getContext","willReadFrequently","pixels","getImageData","data","exports","getCoordinatesFromColor","color","tolerance","_canvas$current2","_canvas$current3","_canvas$current4","height","width","imageData","rgb","splitRgb","r","targetR","g","targetG","b","targetB","index","Math","abs","isValidRGBA","rgbaString","rgbaRegex","test","matches","match","red","parseInt","green","blue","alpha","parseFloat","isValidRGB","rgbString","rgbRegex","convertColorToHsl","hexRegex","hslRegex","rgba","hsl","newColor","replaceAll","hexToHsl","floor","h","rgb255ToHsl","Number","rgbToHsv","rgb255ToHsv","extractRgbValues","extractHsl","s","l","a","hexToRgb","hex","result","exec","rgbToHex","clamp","value","max","min","round","hexValue","toString","length"],"sources":["../../../src/utils/color.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from 'react';\n\nimport { hexToHsl, rgb255ToHsl, rgb255ToHsv } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { Coordinates, RGBA, Scale } from '../types/colorPicker';\n\ninterface GetColorFromCoordinatesOptions {\n coordinates: Coordinates;\n canvas: RefObject<HTMLCanvasElement>;\n opacity: number;\n scale: Scale;\n}\n\nexport const getColorFromCoordinates = ({\n coordinates,\n canvas,\n opacity,\n scale,\n}: GetColorFromCoordinatesOptions) => {\n if (!canvas.current) {\n return undefined;\n }\n\n const xCords = coordinates.x;\n const yCords = coordinates.y;\n\n const x = (xCords - 0.5) * scale.scaleX;\n const y = (yCords - 0.5) * scale.scaleY;\n\n const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n const pixels = ctx?.getImageData(x, y, 1, 1).data;\n\n if (!pixels) {\n return undefined;\n }\n\n // If transparency\n if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {\n return 'transparent';\n }\n\n return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;\n};\n\ninterface GetCoordinatesFromColorOptions {\n color: CSSProperties['color'];\n canvas: RefObject<HTMLCanvasElement>;\n tolerance?: number;\n}\n\nexport const getCoordinatesFromColor = ({\n canvas,\n color,\n tolerance = 0,\n}: GetCoordinatesFromColorOptions) => {\n const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n\n if (!ctx) {\n return null;\n }\n\n const height = canvas.current?.height ?? 150;\n const width = canvas.current?.width ?? 300;\n\n const imageData = ctx.getImageData(0, 0, width, height);\n const pixels = imageData.data;\n\n const rgb = splitRgb(color);\n\n if (!rgb) {\n return null;\n }\n\n const { r: targetR, g: targetG, b: targetB } = rgb;\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const index = (y * width + x) * 4;\n const r = pixels[index] ?? 0;\n const g = pixels[index + 1] ?? 0;\n const b = pixels[index + 2] ?? 0;\n\n if (\n Math.abs(targetR - r) <= tolerance &&\n Math.abs(targetG - g) <= tolerance &&\n Math.abs(targetB - b) <= tolerance\n ) {\n return { x, y };\n }\n }\n }\n\n return null;\n};\n\nexport const isValidRGBA = (rgbaString: string): boolean => {\n if (rgbaString === '') {\n return false;\n }\n\n const rgbaRegex = /^rgba\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*((0?\\.\\d+)|(1|0))\\s*\\)$/;\n if (!rgbaRegex.test(rgbaString)) {\n return false;\n }\n\n const matches = rgbaString.match(rgbaRegex);\n if (!matches) {\n return false;\n }\n\n const red = parseInt(matches[1] ?? '', 10);\n const green = parseInt(matches[2] ?? '', 10);\n const blue = parseInt(matches[3] ?? '', 10);\n const alpha = parseFloat(matches[4] ?? '');\n\n return !(\n red < 0 ||\n red > 255 ||\n green < 0 ||\n green > 255 ||\n blue < 0 ||\n blue > 255 ||\n alpha < 0 ||\n alpha > 1\n );\n};\n\nexport const isValidRGB = (rgbString: string): boolean => {\n if (rgbString === '') {\n return false;\n }\n\n const rgbRegex = /^rgb\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3})\\s*\\)$/;\n if (!rgbRegex.test(rgbString)) {\n return false;\n }\n\n const matches = rgbString.match(rgbRegex);\n if (!matches) {\n return false;\n }\n\n const red = parseInt(matches[1] ?? '', 10);\n const green = parseInt(matches[2] ?? '', 10);\n const blue = parseInt(matches[3] ?? '', 10);\n\n return red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255;\n};\n\nexport const convertColorToHsl = (color: string) => {\n const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n const rgbRegex =\n /^rgb(a)?\\(\\s*((25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*,\\s*){2}(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n const hslRegex =\n /^hsla?\\(\\s*((360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*,\\s*){2}(360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n\n let rgba: string[] | null;\n let hsl: HSL | HSLA | null;\n\n const newColor = color.replaceAll('%', '');\n\n switch (true) {\n case hexRegex.test(newColor):\n hsl = hexToHsl(color);\n\n if (!hsl) {\n return undefined;\n }\n\n return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n case rgbRegex.test(newColor):\n rgba = color.match(/[\\d.]+/g);\n\n if (!rgba) {\n return undefined;\n }\n\n hsl = rgb255ToHsl({\n r: Number(rgba[0]),\n g: Number(rgba[1]),\n b: Number(rgba[2]),\n });\n\n if (!hsl) {\n return undefined;\n }\n\n return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n case hslRegex.test(newColor):\n return color;\n default:\n return undefined;\n }\n};\n\nexport const rgbToHsv = (color: CSSProperties['color']) =>\n rgb255ToHsv(extractRgbValues(color ?? ''));\n\nexport const extractHsl = (hsl: string) => {\n const match = hsl.match(\n /hsl\\(\\s*(\\d+(?:\\.\\d+)?)\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*\\)/i,\n );\n\n if (!match) {\n return null;\n }\n\n const h = parseFloat(match[1] ?? '');\n const s = parseFloat(match[2] ?? '') / 100;\n const l = parseFloat(match[3] ?? '') / 100;\n\n return { h, s, l };\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGBA => {\n const rgba = color?.match(/[\\d.]+/g);\n\n if (!rgba) {\n return null;\n }\n\n return { r: Number(rgba[0]), g: Number(rgba[1]), b: Number(rgba[2]), a: Number(rgba[3]) };\n};\n\nexport const extractRgbValues = (rgbString: string): RGBA => {\n const rgbaRegex = /rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)/;\n const match = rgbString.match(rgbaRegex);\n\n if (match) {\n const r = parseInt(match[1] ?? '', 10);\n const g = parseInt(match[2] ?? '', 10);\n const b = parseInt(match[3] ?? '', 10);\n const a = parseFloat(match[4] ?? '');\n\n return { r, g, b, a };\n }\n\n return {\n r: 255,\n g: 255,\n b: 255,\n a: 1,\n };\n};\n\nexport const hexToRgb = (hex: string): RGBA => {\n let r: number;\n let g: number;\n let b: number;\n let a: number;\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i.exec(hex);\n\n if (result) {\n r = parseInt(result[1] ?? '0', 16);\n g = parseInt(result[2] ?? '0', 16);\n b = parseInt(result[3] ?? '0', 16);\n a = result[4] ? parseInt(result[4], 16) / 100 : 1;\n\n return { r, g, b, a };\n }\n\n return {\n r: 255,\n g: 255,\n b: 255,\n a: 1,\n };\n};\n\nexport const rgbToHex = ({ r, g, b, a = 1 }: RGBA): string => {\n const clamp = (value: number) => Math.max(0, Math.min(255, Math.round(value)));\n const alpha = Math.max(0, Math.min(1, a));\n const hex = (x: number) => {\n const hexValue = clamp(x).toString(16);\n return hexValue.length === 1 ? `0${hexValue}` : hexValue;\n };\n return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 100) : ''}`;\n};\n"],"mappings":";;;;;;AAEA,IAAAA,OAAA,GAAAC,OAAA;AAWO,MAAMC,uBAAuB,GAAGA,CAAC;EACpCC,WAAW;EACXC,MAAM;EACNC,OAAO;EACPC;AAC4B,CAAC,KAAK;EAAA,IAAAC,eAAA;EAClC,IAAI,CAACH,MAAM,CAACI,OAAO,EAAE;IACjB,OAAOC,SAAS;EACpB;EAEA,MAAMC,MAAM,GAAGP,WAAW,CAACQ,CAAC;EAC5B,MAAMC,MAAM,GAAGT,WAAW,CAACU,CAAC;EAE5B,MAAMF,CAAC,GAAG,CAACD,MAAM,GAAG,GAAG,IAAIJ,KAAK,CAACQ,MAAM;EACvC,MAAMD,CAAC,GAAG,CAACD,MAAM,GAAG,GAAG,IAAIN,KAAK,CAACS,MAAM;EAEvC,MAAMC,GAAG,IAAAT,eAAA,GAAGH,MAAM,CAACI,OAAO,cAAAD,eAAA,uBAAdA,eAAA,CAAgBU,UAAU,CAAC,IAAI,EAAE;IAAEC,kBAAkB,EAAE;EAAK,CAAC,CAAC;EAC1E,MAAMC,MAAM,GAAGH,GAAG,aAAHA,GAAG,uBAAHA,GAAG,CAAEI,YAAY,CAACT,CAAC,EAAEE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAACQ,IAAI;EAEjD,IAAI,CAACF,MAAM,EAAE;IACT,OAAOV,SAAS;EACpB;;EAEA;EACA,IAAIU,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAIA,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1E,OAAO,aAAa;EACxB;EAEA,OAAO,QAAQA,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAKA,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAKA,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAKd,OAAO,GAAG;AACtF,CAAC;AAACiB,OAAA,CAAApB,uBAAA,GAAAA,uBAAA;AAQK,MAAMqB,uBAAuB,GAAGA,CAAC;EACpCnB,MAAM;EACNoB,KAAK;EACLC,SAAS,GAAG;AACgB,CAAC,KAAK;EAAA,IAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;EAClC,MAAMZ,GAAG,IAAAU,gBAAA,GAAGtB,MAAM,CAACI,OAAO,cAAAkB,gBAAA,uBAAdA,gBAAA,CAAgBT,UAAU,CAAC,IAAI,EAAE;IAAEC,kBAAkB,EAAE;EAAK,CAAC,CAAC;EAE1E,IAAI,CAACF,GAAG,EAAE;IACN,OAAO,IAAI;EACf;EAEA,MAAMa,MAAM,GAAG,EAAAF,gBAAA,GAAAvB,MAAM,CAACI,OAAO,cAAAmB,gBAAA,uBAAdA,gBAAA,CAAgBE,MAAM,KAAI,GAAG;EAC5C,MAAMC,KAAK,GAAG,EAAAF,gBAAA,GAAAxB,MAAM,CAACI,OAAO,cAAAoB,gBAAA,uBAAdA,gBAAA,CAAgBE,KAAK,KAAI,GAAG;EAE1C,MAAMC,SAAS,GAAGf,GAAG,CAACI,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEU,KAAK,EAAED,MAAM,CAAC;EACvD,MAAMV,MAAM,GAAGY,SAAS,CAACV,IAAI;EAE7B,MAAMW,GAAG,GAAGC,QAAQ,CAACT,KAAK,CAAC;EAE3B,IAAI,CAACQ,GAAG,EAAE;IACN,OAAO,IAAI;EACf;EAEA,MAAM;IAAEE,CAAC,EAAEC,OAAO;IAAEC,CAAC,EAAEC,OAAO;IAAEC,CAAC,EAAEC;EAAQ,CAAC,GAAGP,GAAG;EAElD,KAAK,IAAInB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGgB,MAAM,EAAEhB,CAAC,EAAE,EAAE;IAC7B,KAAK,IAAIF,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGmB,KAAK,EAAEnB,CAAC,EAAE,EAAE;MAC5B,MAAM6B,KAAK,GAAG,CAAC3B,CAAC,GAAGiB,KAAK,GAAGnB,CAAC,IAAI,CAAC;MACjC,MAAMuB,CAAC,GAAGf,MAAM,CAACqB,KAAK,CAAC,IAAI,CAAC;MAC5B,MAAMJ,CAAC,GAAGjB,MAAM,CAACqB,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC;MAChC,MAAMF,CAAC,GAAGnB,MAAM,CAACqB,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC;MAEhC,IACIC,IAAI,CAACC,GAAG,CAACP,OAAO,GAAGD,CAAC,CAAC,IAAIT,SAAS,IAClCgB,IAAI,CAACC,GAAG,CAACL,OAAO,GAAGD,CAAC,CAAC,IAAIX,SAAS,IAClCgB,IAAI,CAACC,GAAG,CAACH,OAAO,GAAGD,CAAC,CAAC,IAAIb,SAAS,EACpC;QACE,OAAO;UAAEd,CAAC;UAAEE;QAAE,CAAC;MACnB;IACJ;EACJ;EAEA,OAAO,IAAI;AACf,CAAC;AAACS,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAEK,MAAMoB,WAAW,GAAIC,UAAkB,IAAc;EACxD,IAAIA,UAAU,KAAK,EAAE,EAAE;IACnB,OAAO,KAAK;EAChB;EAEA,MAAMC,SAAS,GAAG,0EAA0E;EAC5F,IAAI,CAACA,SAAS,CAACC,IAAI,CAACF,UAAU,CAAC,EAAE;IAC7B,OAAO,KAAK;EAChB;EAEA,MAAMG,OAAO,GAAGH,UAAU,CAACI,KAAK,CAACH,SAAS,CAAC;EAC3C,IAAI,CAACE,OAAO,EAAE;IACV,OAAO,KAAK;EAChB;EAEA,MAAME,GAAG,GAAGC,QAAQ,CAACH,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;EAC1C,MAAMI,KAAK,GAAGD,QAAQ,CAACH,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;EAC5C,MAAMK,IAAI,GAAGF,QAAQ,CAACH,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;EAC3C,MAAMM,KAAK,GAAGC,UAAU,CAACP,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;EAE1C,OAAO,EACHE,GAAG,GAAG,CAAC,IACPA,GAAG,GAAG,GAAG,IACTE,KAAK,GAAG,CAAC,IACTA,KAAK,GAAG,GAAG,IACXC,IAAI,GAAG,CAAC,IACRA,IAAI,GAAG,GAAG,IACVC,KAAK,GAAG,CAAC,IACTA,KAAK,GAAG,CAAC,CACZ;AACL,CAAC;AAAC/B,OAAA,CAAAqB,WAAA,GAAAA,WAAA;AAEK,MAAMY,UAAU,GAAIC,SAAiB,IAAc;EACtD,IAAIA,SAAS,KAAK,EAAE,EAAE;IAClB,OAAO,KAAK;EAChB;EAEA,MAAMC,QAAQ,GAAG,oDAAoD;EACrE,IAAI,CAACA,QAAQ,CAACX,IAAI,CAACU,SAAS,CAAC,EAAE;IAC3B,OAAO,KAAK;EAChB;EAEA,MAAMT,OAAO,GAAGS,SAAS,CAACR,KAAK,CAACS,QAAQ,CAAC;EACzC,IAAI,CAACV,OAAO,EAAE;IACV,OAAO,KAAK;EAChB;EAEA,MAAME,GAAG,GAAGC,QAAQ,CAACH,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;EAC1C,MAAMI,KAAK,GAAGD,QAAQ,CAACH,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;EAC5C,MAAMK,IAAI,GAAGF,QAAQ,CAACH,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;EAE3C,OAAOE,GAAG,IAAI,CAAC,IAAIA,GAAG,IAAI,GAAG,IAAIE,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,GAAG,IAAIC,IAAI,IAAI,CAAC,IAAIA,IAAI,IAAI,GAAG;AAC3F,CAAC;AAAC9B,OAAA,CAAAiC,UAAA,GAAAA,UAAA;AAEK,MAAMG,iBAAiB,GAAIlC,KAAa,IAAK;EAChD,MAAMmC,QAAQ,GAAG,oCAAoC;EACrD,MAAMF,QAAQ,GACV,sHAAsH;EAC1H,MAAMG,QAAQ,GACV,wHAAwH;EAE5H,IAAIC,IAAqB;EACzB,IAAIC,GAAsB;EAE1B,MAAMC,QAAQ,GAAGvC,KAAK,CAACwC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC;EAE1C,QAAQ,IAAI;IACR,KAAKL,QAAQ,CAACb,IAAI,CAACiB,QAAQ,CAAC;MACxBD,GAAG,GAAG,IAAAG,gBAAQ,EAACzC,KAAK,CAAC;MAErB,IAAI,CAACsC,GAAG,EAAE;QACN,OAAOrD,SAAS;MACpB;MAEA,OAAO,OAAOgC,IAAI,CAACyB,KAAK,CAACJ,GAAG,CAACK,CAAC,CAAC,aAAa;IAChD,KAAKV,QAAQ,CAACX,IAAI,CAACiB,QAAQ,CAAC;MACxBF,IAAI,GAAGrC,KAAK,CAACwB,KAAK,CAAC,SAAS,CAAC;MAE7B,IAAI,CAACa,IAAI,EAAE;QACP,OAAOpD,SAAS;MACpB;MAEAqD,GAAG,GAAG,IAAAM,mBAAW,EAAC;QACdlC,CAAC,EAAEmC,MAAM,CAACR,IAAI,CAAC,CAAC,CAAC,CAAC;QAClBzB,CAAC,EAAEiC,MAAM,CAACR,IAAI,CAAC,CAAC,CAAC,CAAC;QAClBvB,CAAC,EAAE+B,MAAM,CAACR,IAAI,CAAC,CAAC,CAAC;MACrB,CAAC,CAAC;MAEF,IAAI,CAACC,GAAG,EAAE;QACN,OAAOrD,SAAS;MACpB;MAEA,OAAO,OAAOgC,IAAI,CAACyB,KAAK,CAACJ,GAAG,CAACK,CAAC,CAAC,aAAa;IAChD,KAAKP,QAAQ,CAACd,IAAI,CAACiB,QAAQ,CAAC;MACxB,OAAOvC,KAAK;IAChB;MACI,OAAOf,SAAS;EACxB;AACJ,CAAC;AAACa,OAAA,CAAAoC,iBAAA,GAAAA,iBAAA;AAEK,MAAMY,QAAQ,GAAI9C,KAA6B,IAClD,IAAA+C,mBAAW,EAACC,gBAAgB,CAAChD,KAAK,IAAI,EAAE,CAAC,CAAC;AAACF,OAAA,CAAAgD,QAAA,GAAAA,QAAA;AAExC,MAAMG,UAAU,GAAIX,GAAW,IAAK;EACvC,MAAMd,KAAK,GAAGc,GAAG,CAACd,KAAK,CACnB,6EACJ,CAAC;EAED,IAAI,CAACA,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EAEA,MAAMmB,CAAC,GAAGb,UAAU,CAACN,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;EACpC,MAAM0B,CAAC,GAAGpB,UAAU,CAACN,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,GAAG;EAC1C,MAAM2B,CAAC,GAAGrB,UAAU,CAACN,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,GAAG;EAE1C,OAAO;IAAEmB,CAAC;IAAEO,CAAC;IAAEC;EAAE,CAAC;AACtB,CAAC;AAACrD,OAAA,CAAAmD,UAAA,GAAAA,UAAA;AAEK,MAAMxC,QAAQ,GAAIT,KAA6B,IAAkB;EACpE,MAAMqC,IAAI,GAAGrC,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEwB,KAAK,CAAC,SAAS,CAAC;EAEpC,IAAI,CAACa,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,OAAO;IAAE3B,CAAC,EAAEmC,MAAM,CAACR,IAAI,CAAC,CAAC,CAAC,CAAC;IAAEzB,CAAC,EAAEiC,MAAM,CAACR,IAAI,CAAC,CAAC,CAAC,CAAC;IAAEvB,CAAC,EAAE+B,MAAM,CAACR,IAAI,CAAC,CAAC,CAAC,CAAC;IAAEe,CAAC,EAAEP,MAAM,CAACR,IAAI,CAAC,CAAC,CAAC;EAAE,CAAC;AAC7F,CAAC;AAACvC,OAAA,CAAAW,QAAA,GAAAA,QAAA;AAEK,MAAMuC,gBAAgB,GAAIhB,SAAiB,IAAW;EACzD,MAAMX,SAAS,GAAG,4DAA4D;EAC9E,MAAMG,KAAK,GAAGQ,SAAS,CAACR,KAAK,CAACH,SAAS,CAAC;EAExC,IAAIG,KAAK,EAAE;IACP,MAAMd,CAAC,GAAGgB,QAAQ,CAACF,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;IACtC,MAAMZ,CAAC,GAAGc,QAAQ,CAACF,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;IACtC,MAAMV,CAAC,GAAGY,QAAQ,CAACF,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC;IACtC,MAAM4B,CAAC,GAAGtB,UAAU,CAACN,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAEpC,OAAO;MAAEd,CAAC;MAAEE,CAAC;MAAEE,CAAC;MAAEsC;IAAE,CAAC;EACzB;EAEA,OAAO;IACH1C,CAAC,EAAE,GAAG;IACNE,CAAC,EAAE,GAAG;IACNE,CAAC,EAAE,GAAG;IACNsC,CAAC,EAAE;EACP,CAAC;AACL,CAAC;AAACtD,OAAA,CAAAkD,gBAAA,GAAAA,gBAAA;AAEK,MAAMK,QAAQ,GAAIC,GAAW,IAAW;EAC3C,IAAI5C,CAAS;EACb,IAAIE,CAAS;EACb,IAAIE,CAAS;EACb,IAAIsC,CAAS;EAEb,MAAMG,MAAM,GAAG,wDAAwD,CAACC,IAAI,CAACF,GAAG,CAAC;EAEjF,IAAIC,MAAM,EAAE;IACR7C,CAAC,GAAGgB,QAAQ,CAAC6B,MAAM,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,EAAE,CAAC;IAClC3C,CAAC,GAAGc,QAAQ,CAAC6B,MAAM,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,EAAE,CAAC;IAClCzC,CAAC,GAAGY,QAAQ,CAAC6B,MAAM,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,EAAE,CAAC;IAClCH,CAAC,GAAGG,MAAM,CAAC,CAAC,CAAC,GAAG7B,QAAQ,CAAC6B,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC;IAEjD,OAAO;MAAE7C,CAAC;MAAEE,CAAC;MAAEE,CAAC;MAAEsC;IAAE,CAAC;EACzB;EAEA,OAAO;IACH1C,CAAC,EAAE,GAAG;IACNE,CAAC,EAAE,GAAG;IACNE,CAAC,EAAE,GAAG;IACNsC,CAAC,EAAE;EACP,CAAC;AACL,CAAC;AAACtD,OAAA,CAAAuD,QAAA,GAAAA,QAAA;AAEK,MAAMI,QAAQ,GAAGA,CAAC;EAAE/C,CAAC;EAAEE,CAAC;EAAEE,CAAC;EAAEsC,CAAC,GAAG;AAAQ,CAAC,KAAa;EAC1D,MAAMM,KAAK,GAAIC,KAAa,IAAK1C,IAAI,CAAC2C,GAAG,CAAC,CAAC,EAAE3C,IAAI,CAAC4C,GAAG,CAAC,GAAG,EAAE5C,IAAI,CAAC6C,KAAK,CAACH,KAAK,CAAC,CAAC,CAAC;EAC9E,MAAM9B,KAAK,GAAGZ,IAAI,CAAC2C,GAAG,CAAC,CAAC,EAAE3C,IAAI,CAAC4C,GAAG,CAAC,CAAC,EAAET,CAAC,CAAC,CAAC;EACzC,MAAME,GAAG,GAAInE,CAAS,IAAK;IACvB,MAAM4E,QAAQ,GAAGL,KAAK,CAACvE,CAAC,CAAC,CAAC6E,QAAQ,CAAC,EAAE,CAAC;IACtC,OAAOD,QAAQ,CAACE,MAAM,KAAK,CAAC,GAAG,IAAIF,QAAQ,EAAE,GAAGA,QAAQ;EAC5D,CAAC;EACD,OAAO,IAAIT,GAAG,CAAC5C,CAAC,CAAC,GAAG4C,GAAG,CAAC1C,CAAC,CAAC,GAAG0C,GAAG,CAACxC,CAAC,CAAC,GAAGe,KAAK,IAAI,CAAC,GAAGyB,GAAG,CAACzB,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,EAAE;AAC9E,CAAC;AAAC/B,OAAA,CAAA2D,QAAA,GAAAA,QAAA","ignoreList":[]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
2
|
+
import { hexToRgb, isValidRGBA } from '../utils/color';
|
|
2
3
|
export const ColorPickerContext = /*#__PURE__*/React.createContext({
|
|
3
4
|
selectedColor: undefined,
|
|
4
5
|
updateSelectedColor: undefined,
|
|
@@ -39,8 +40,18 @@ const ColorPickerProvider = _ref => {
|
|
|
39
40
|
setInternalShouldCallOnSelect(shouldCallOnSelect);
|
|
40
41
|
}, []);
|
|
41
42
|
useEffect(() => {
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
let newColor = selectedColor;
|
|
44
|
+
if (newColor && !isValidRGBA(newColor)) {
|
|
45
|
+
const {
|
|
46
|
+
r,
|
|
47
|
+
g,
|
|
48
|
+
b,
|
|
49
|
+
a
|
|
50
|
+
} = hexToRgb(newColor);
|
|
51
|
+
newColor = `rgba(${r},${g},${b},${a})`;
|
|
52
|
+
}
|
|
53
|
+
setInternalSelectedColor(newColor);
|
|
54
|
+
setInternalHueColor(newColor);
|
|
44
55
|
setInternalIsPresetColor(true);
|
|
45
56
|
}, [selectedColor]);
|
|
46
57
|
useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerProvider.js","names":["React","useCallback","useEffect","useMemo","useState","ColorPickerContext","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","displayName","ColorPickerProvider","_ref","children","onSelect","internalSelectedColor","setInternalSelectedColor","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","color","providerValue","createElement","Provider","value"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\n\ninterface IColorPickerContext {\n selectedColor?: string;\n updateSelectedColor?: (color: string | undefined) => void;\n hueColor?: string;\n updateHueColor?: (color: string | undefined) => void;\n isPresetColor?: boolean;\n updateIsPresetColor?: (isPresetColor: boolean) => void;\n shouldGetCoordinates?: boolean;\n updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n shouldCallOnSelect?: boolean;\n updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n selectedColor: undefined,\n updateSelectedColor: undefined,\n hueColor: undefined,\n updateHueColor: undefined,\n isPresetColor: undefined,\n updateIsPresetColor: undefined,\n shouldGetCoordinates: undefined,\n updateShouldGetCoordinates: undefined,\n shouldCallOnSelect: undefined,\n updateShouldCallOnSelect: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n /**\n * The children of the provider.\n */\n children: ReactNode;\n /**\n * Function to be executed when a color is selected.\n */\n onSelect?: (color: string) => void;\n /**\n * The color that should be preselected.\n */\n selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n const [internalHueColor, setInternalHueColor] = useState<string>();\n const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n\n const updateSelectedColor = useCallback((color: string | undefined) => {\n setInternalSelectedColor(color);\n }, []);\n\n const updateHueColor = useCallback((color: string | undefined) => {\n setInternalHueColor(color);\n }, []);\n\n const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n setInternalIsPresetColor(isPresetColor);\n }, []);\n\n const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n setInternalShouldGetCoordinates(shouldGetCoordinates);\n }, []);\n\n const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n setInternalShouldCallOnSelect(shouldCallOnSelect);\n }, []);\n\n useEffect(() => {\n setInternalSelectedColor(
|
|
1
|
+
{"version":3,"file":"ColorPickerProvider.js","names":["React","useCallback","useEffect","useMemo","useState","hexToRgb","isValidRGBA","ColorPickerContext","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","displayName","ColorPickerProvider","_ref","children","onSelect","internalSelectedColor","setInternalSelectedColor","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","color","newColor","r","g","b","a","providerValue","createElement","Provider","value"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { hexToRgb, isValidRGBA } from '../utils/color';\n\ninterface IColorPickerContext {\n selectedColor?: string;\n updateSelectedColor?: (color: string | undefined) => void;\n hueColor?: string;\n updateHueColor?: (color: string | undefined) => void;\n isPresetColor?: boolean;\n updateIsPresetColor?: (isPresetColor: boolean) => void;\n shouldGetCoordinates?: boolean;\n updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n shouldCallOnSelect?: boolean;\n updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n selectedColor: undefined,\n updateSelectedColor: undefined,\n hueColor: undefined,\n updateHueColor: undefined,\n isPresetColor: undefined,\n updateIsPresetColor: undefined,\n shouldGetCoordinates: undefined,\n updateShouldGetCoordinates: undefined,\n shouldCallOnSelect: undefined,\n updateShouldCallOnSelect: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n /**\n * The children of the provider.\n */\n children: ReactNode;\n /**\n * Function to be executed when a color is selected.\n */\n onSelect?: (color: string) => void;\n /**\n * The color that should be preselected.\n */\n selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n const [internalHueColor, setInternalHueColor] = useState<string>();\n const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n\n const updateSelectedColor = useCallback((color: string | undefined) => {\n setInternalSelectedColor(color);\n }, []);\n\n const updateHueColor = useCallback((color: string | undefined) => {\n setInternalHueColor(color);\n }, []);\n\n const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n setInternalIsPresetColor(isPresetColor);\n }, []);\n\n const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n setInternalShouldGetCoordinates(shouldGetCoordinates);\n }, []);\n\n const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n setInternalShouldCallOnSelect(shouldCallOnSelect);\n }, []);\n\n useEffect(() => {\n let newColor = selectedColor;\n\n if (newColor && !isValidRGBA(newColor)) {\n const { r, g, b, a } = hexToRgb(newColor);\n\n newColor = `rgba(${r},${g},${b},${a})`;\n }\n\n setInternalSelectedColor(newColor);\n setInternalHueColor(newColor);\n setInternalIsPresetColor(true);\n }, [selectedColor]);\n\n useEffect(() => {\n if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {\n onSelect(internalSelectedColor);\n\n setInternalShouldCallOnSelect(false);\n }\n }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);\n\n const providerValue = useMemo<IColorPickerContext>(\n () => ({\n selectedColor: internalSelectedColor,\n updateSelectedColor,\n hueColor: internalHueColor,\n updateHueColor,\n isPresetColor: internalIsPresetColor,\n updateIsPresetColor,\n shouldGetCoordinates: internalShouldGetCoordinates,\n updateShouldGetCoordinates,\n shouldCallOnSelect: internalShouldCallOnSelect,\n updateShouldCallOnSelect,\n }),\n [\n internalHueColor,\n internalIsPresetColor,\n internalSelectedColor,\n internalShouldCallOnSelect,\n internalShouldGetCoordinates,\n updateHueColor,\n updateIsPresetColor,\n updateSelectedColor,\n updateShouldCallOnSelect,\n updateShouldGetCoordinates,\n ],\n );\n\n return (\n <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>\n );\n};\n\nColorPickerProvider.displayName = 'ColorPickerProvider';\n\nexport default ColorPickerProvider;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -46,8 +46,19 @@ const MoreOptions = () => {
|
|
|
46
46
|
};
|
|
47
47
|
useEffect(() => {
|
|
48
48
|
if (selectedColor) {
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
if (isValidRGBA(selectedColor)) {
|
|
50
|
+
setTmpRgbValue(selectedColor);
|
|
51
|
+
setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));
|
|
52
|
+
} else {
|
|
53
|
+
const {
|
|
54
|
+
r,
|
|
55
|
+
g,
|
|
56
|
+
b,
|
|
57
|
+
a
|
|
58
|
+
} = hexToRgb(selectedColor);
|
|
59
|
+
setTmpRgbValue(`rgba(${r},${g},${b},${a})`);
|
|
60
|
+
setTmpHexValue(selectedColor);
|
|
61
|
+
}
|
|
51
62
|
}
|
|
52
63
|
}, [selectedColor]);
|
|
53
64
|
return /*#__PURE__*/React.createElement(StyledMoreOptions, null, /*#__PURE__*/React.createElement(AccordionGroup, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MoreOptions.js","names":["Accordion","AccordionGroup","AreaContext","isHex","React","useContext","useEffect","useMemo","useState","extractRgbValues","hexToRgb","isValidRGBA","rgbToHex","ColorPickerContext","StyledMoreOptions","StyledMoreOptionsInput","StyledMoreOptionsInputWrapper","MoreOptions","selectedColor","updateSelectedColor","updateShouldCallOnSelect","areaProvider","tmpHexValue","setTmpHexValue","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","shouldChangeColor","handleHexChange","event","target","value","isValid","r","g","b","a","handleRgbChange","createElement","isWrapped","title","$shouldChangeColor","onChange","$isInvalid","displayName"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import { Accordion, AccordionGroup, AreaContext } from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useMemo, useState, type ChangeEvent } from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n StyledMoreOptions,\n StyledMoreOptionsInput,\n StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\n\nconst MoreOptions = () => {\n const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n useContext(ColorPickerContext);\n const areaProvider = useContext(AreaContext);\n\n const [tmpHexValue, setTmpHexValue] = useState('');\n const [tmpRgbValue, setTmpRgbValue] = useState('');\n const [isHexInvalid, setIsHexInvalid] = useState(false);\n const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpHexValue(event.target.value);\n\n const isValid = isHex(event.target.value);\n\n setIsHexInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n const { r, g, b, a } = hexToRgb(event.target.value);\n\n updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpRgbValue(event.target.value);\n\n const isValid = isValidRGBA(event.target.value);\n\n setIsRgbInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n updateSelectedColor(event.target.value);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n useEffect(() => {\n if (selectedColor) {\n setTmpRgbValue(selectedColor);\n
|
|
1
|
+
{"version":3,"file":"MoreOptions.js","names":["Accordion","AccordionGroup","AreaContext","isHex","React","useContext","useEffect","useMemo","useState","extractRgbValues","hexToRgb","isValidRGBA","rgbToHex","ColorPickerContext","StyledMoreOptions","StyledMoreOptionsInput","StyledMoreOptionsInputWrapper","MoreOptions","selectedColor","updateSelectedColor","updateShouldCallOnSelect","areaProvider","tmpHexValue","setTmpHexValue","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","shouldChangeColor","handleHexChange","event","target","value","isValid","r","g","b","a","handleRgbChange","createElement","isWrapped","title","$shouldChangeColor","onChange","$isInvalid","displayName"],"sources":["../../../../../src/components/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import { Accordion, AccordionGroup, AreaContext } from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useMemo, useState, type ChangeEvent } from 'react';\n\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../utils/color';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport {\n StyledMoreOptions,\n StyledMoreOptionsInput,\n StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\n\nconst MoreOptions = () => {\n const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n useContext(ColorPickerContext);\n const areaProvider = useContext(AreaContext);\n\n const [tmpHexValue, setTmpHexValue] = useState('');\n const [tmpRgbValue, setTmpRgbValue] = useState('');\n const [isHexInvalid, setIsHexInvalid] = useState(false);\n const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpHexValue(event.target.value);\n\n const isValid = isHex(event.target.value);\n\n setIsHexInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n const { r, g, b, a } = hexToRgb(event.target.value);\n\n updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpRgbValue(event.target.value);\n\n const isValid = isValidRGBA(event.target.value);\n\n setIsRgbInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n updateSelectedColor(event.target.value);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n useEffect(() => {\n if (selectedColor) {\n if (isValidRGBA(selectedColor)) {\n setTmpRgbValue(selectedColor);\n setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n } else {\n const { r, g, b, a } = hexToRgb(selectedColor);\n\n setTmpRgbValue(`rgba(${r},${g},${b},${a})`);\n setTmpHexValue(selectedColor);\n }\n }\n }, [selectedColor]);\n\n return (\n <StyledMoreOptions>\n <AccordionGroup isWrapped>\n <Accordion title=\"Erweitert\">\n <StyledMoreOptionsInputWrapper>\n <StyledMoreOptionsInput\n $shouldChangeColor={shouldChangeColor}\n value={tmpHexValue}\n onChange={handleHexChange}\n $isInvalid={isHexInvalid}\n />\n <StyledMoreOptionsInput\n $shouldChangeColor={shouldChangeColor}\n value={tmpRgbValue}\n onChange={handleRgbChange}\n $isInvalid={isRgbInvalid}\n />\n </StyledMoreOptionsInputWrapper>\n </Accordion>\n </AccordionGroup>\n </StyledMoreOptions>\n );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { hslToRgb255 } from '@chayns/colors';
|
|
2
2
|
import { setRefreshScrollEnabled } from 'chayns-api';
|
|
3
3
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
-
import { convertColorToHsl, extractHsl, splitRgb } from '../../utils/color';
|
|
4
|
+
import { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';
|
|
5
5
|
import { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';
|
|
6
6
|
const HueSlider = _ref => {
|
|
7
7
|
let {
|
|
@@ -18,7 +18,12 @@ const HueSlider = _ref => {
|
|
|
18
18
|
const sliderRef = useRef(null);
|
|
19
19
|
useEffect(() => {
|
|
20
20
|
if (color) {
|
|
21
|
-
|
|
21
|
+
let rgb;
|
|
22
|
+
if (isValidRGBA(color)) {
|
|
23
|
+
rgb = splitRgb(color);
|
|
24
|
+
} else {
|
|
25
|
+
rgb = hexToRgb(color);
|
|
26
|
+
}
|
|
22
27
|
if (!rgb) {
|
|
23
28
|
return;
|
|
24
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HueSlider.js","names":["hslToRgb255","setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","extractHsl","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","_ref","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","sliderRef","rgb","r","g","b","a","hsl","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n ChangeEvent,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n /**\n * The color that should be selected.\n */\n color?: CSSProperties['color'];\n /**\n * Function that will be executed when the color is changed.\n */\n onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * Function that will be executed when the color is ending to change.\n */\n onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * Function that will be executed when the color is starting to change.\n */\n onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * The opacity of the Color. Is used if the color has no opacity value.\n */\n opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n onChange,\n onStart,\n onEnd,\n opacity,\n color = 'rgba(255, 0, 0, 1)',\n}) => {\n const [editedValue, setEditedValue] = useState(0);\n const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n const [internalOpacity, setInternalOpacity] = useState(1);\n\n const sliderThumbRef = useRef<HTMLDivElement>(null);\n const sliderRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (color) {\n const rgb = splitRgb(color);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b, a } = rgb;\n\n setInternalOpacity(a);\n\n const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n if (!match || !match[1]) {\n return;\n }\n\n setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n setEditedValue(parseInt(match[1], 10));\n }\n }, [color]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setEditedValue(Number(event.target.value));\n\n const percentage = (Number(event.target.value) / 360) * 100;\n const hue = (percentage / 100) * 360;\n const saturation = 100;\n const lightness = 50;\n\n const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n setHslColor(hsl);\n\n if (typeof onChange === 'function') {\n const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n if (!rgb) {\n return;\n }\n\n onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n }\n },\n [internalOpacity, onChange, opacity],\n );\n\n const sliderThumbPosition = useMemo(() => {\n if (sliderRef.current && sliderThumbRef.current) {\n return (\n (editedValue / 360) *\n (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [editedValue]);\n\n const handleStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n\n if (typeof onStart === 'function' && hslColor) {\n const hsl = extractHsl(hslColor);\n\n if (!hsl) {\n return;\n }\n\n const rgb = hslToRgb255(hsl);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n }\n }, [hslColor, internalOpacity, onStart, opacity]);\n\n const handleEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n if (typeof onEnd === 'function' && hslColor) {\n const hsl = extractHsl(hslColor);\n\n if (!hsl) {\n return;\n }\n\n const rgb = hslToRgb255(hsl);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n }\n }, [hslColor, internalOpacity, onEnd, opacity]);\n\n return useMemo(\n () => (\n <StyledHueSlider>\n <StyledHueSliderInput\n ref={sliderRef}\n $color={hslColor}\n type=\"range\"\n min={0}\n max={360}\n value={editedValue}\n onChange={handleInputChange}\n onPointerDown={handleStart}\n onPointerUp={handleEnd}\n />\n <StyledHueSliderThumb\n ref={sliderThumbRef}\n $position={sliderThumbPosition}\n $color={hslColor}\n />\n </StyledHueSlider>\n ),\n [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"HueSlider.js","names":["hslToRgb255","setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","extractHsl","hexToRgb","isValidRGBA","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","_ref","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","sliderRef","rgb","r","g","b","a","hsl","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n ChangeEvent,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n /**\n * The color that should be selected.\n */\n color?: CSSProperties['color'];\n /**\n * Function that will be executed when the color is changed.\n */\n onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * Function that will be executed when the color is ending to change.\n */\n onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * Function that will be executed when the color is starting to change.\n */\n onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n /**\n * The opacity of the Color. Is used if the color has no opacity value.\n */\n opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n onChange,\n onStart,\n onEnd,\n opacity,\n color = 'rgba(255, 0, 0, 1)',\n}) => {\n const [editedValue, setEditedValue] = useState(0);\n const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n const [internalOpacity, setInternalOpacity] = useState(1);\n\n const sliderThumbRef = useRef<HTMLDivElement>(null);\n const sliderRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (color) {\n let rgb;\n\n if (isValidRGBA(color)) {\n rgb = splitRgb(color);\n } else {\n rgb = hexToRgb(color);\n }\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b, a } = rgb;\n\n setInternalOpacity(a);\n\n const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n if (!match || !match[1]) {\n return;\n }\n\n setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n setEditedValue(parseInt(match[1], 10));\n }\n }, [color]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setEditedValue(Number(event.target.value));\n\n const percentage = (Number(event.target.value) / 360) * 100;\n const hue = (percentage / 100) * 360;\n const saturation = 100;\n const lightness = 50;\n\n const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n setHslColor(hsl);\n\n if (typeof onChange === 'function') {\n const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n if (!rgb) {\n return;\n }\n\n onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n }\n },\n [internalOpacity, onChange, opacity],\n );\n\n const sliderThumbPosition = useMemo(() => {\n if (sliderRef.current && sliderThumbRef.current) {\n return (\n (editedValue / 360) *\n (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [editedValue]);\n\n const handleStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n\n if (typeof onStart === 'function' && hslColor) {\n const hsl = extractHsl(hslColor);\n\n if (!hsl) {\n return;\n }\n\n const rgb = hslToRgb255(hsl);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n }\n }, [hslColor, internalOpacity, onStart, opacity]);\n\n const handleEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n if (typeof onEnd === 'function' && hslColor) {\n const hsl = extractHsl(hslColor);\n\n if (!hsl) {\n return;\n }\n\n const rgb = hslToRgb255(hsl);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n }\n }, [hslColor, internalOpacity, onEnd, opacity]);\n\n return useMemo(\n () => (\n <StyledHueSlider>\n <StyledHueSliderInput\n ref={sliderRef}\n $color={hslColor}\n type=\"range\"\n min={0}\n max={360}\n value={editedValue}\n onChange={handleInputChange}\n onPointerDown={handleStart}\n onPointerUp={handleEnd}\n />\n <StyledHueSliderThumb\n ref={sliderThumbRef}\n $position={sliderThumbPosition}\n $color={hslColor}\n />\n </StyledHueSlider>\n ),\n [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { setRefreshScrollEnabled } from 'chayns-api';
|
|
2
2
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { splitRgb } from '../../utils/color';
|
|
3
|
+
import { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';
|
|
4
4
|
import { StyledTransparencySlider, StyledTransparencySliderBackground, StyledTransparencySliderInput, StyledTransparencySliderThumb, StyledTransparencySliderThumbBackground, StyledTransparencySliderThumbWrapper } from './TransparencySlider.styles';
|
|
5
5
|
const TransparencySlider = _ref => {
|
|
6
6
|
let {
|
|
@@ -16,7 +16,12 @@ const TransparencySlider = _ref => {
|
|
|
16
16
|
const sliderRef = useRef(null);
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
if (color) {
|
|
19
|
-
|
|
19
|
+
let rgb;
|
|
20
|
+
if (isValidRGBA(color)) {
|
|
21
|
+
rgb = splitRgb(color);
|
|
22
|
+
} else {
|
|
23
|
+
rgb = hexToRgb(color);
|
|
24
|
+
}
|
|
20
25
|
if (!rgb) {
|
|
21
26
|
return;
|
|
22
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TransparencySlider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","splitRgb","StyledTransparencySlider","StyledTransparencySliderBackground","StyledTransparencySliderInput","StyledTransparencySliderThumb","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumbWrapper","TransparencySlider","_ref","onChange","onStart","onEnd","color","editedValue","setEditedValue","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","sliderRef","rgb","r","g","b","a","newColor","handleInputChange","event","Number","target","value","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { splitRgb } from '../../utils/color';\nimport {\n StyledTransparencySlider,\n StyledTransparencySliderBackground,\n StyledTransparencySliderInput,\n StyledTransparencySliderThumb,\n StyledTransparencySliderThumbBackground,\n StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n /**\n * The color that should be selected.\n */\n color?: string;\n /**\n * Function that will be executed when the opacity is changed.\n */\n onChange?: (color: string) => void;\n /**\n * Function that will be executed when the opacity is ending to change.\n */\n onEnd?: (color: string) => void;\n /**\n * Function that will be executed when the opacity is starting to change.\n */\n onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n onChange,\n onStart,\n onEnd,\n color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n const [editedValue, setEditedValue] = useState(0);\n const [pureColor, setPureColor] = useState<string>();\n const [previewColor, setPreviewColor] = useState<string>();\n\n const sliderThumbRef = useRef<HTMLDivElement>(null);\n const sliderRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (color) {\n
|
|
1
|
+
{"version":3,"file":"TransparencySlider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","hexToRgb","isValidRGBA","splitRgb","StyledTransparencySlider","StyledTransparencySliderBackground","StyledTransparencySliderInput","StyledTransparencySliderThumb","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumbWrapper","TransparencySlider","_ref","onChange","onStart","onEnd","color","editedValue","setEditedValue","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","sliderRef","rgb","r","g","b","a","newColor","handleInputChange","event","Number","target","value","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport {\n StyledTransparencySlider,\n StyledTransparencySliderBackground,\n StyledTransparencySliderInput,\n StyledTransparencySliderThumb,\n StyledTransparencySliderThumbBackground,\n StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n /**\n * The color that should be selected.\n */\n color?: string;\n /**\n * Function that will be executed when the opacity is changed.\n */\n onChange?: (color: string) => void;\n /**\n * Function that will be executed when the opacity is ending to change.\n */\n onEnd?: (color: string) => void;\n /**\n * Function that will be executed when the opacity is starting to change.\n */\n onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n onChange,\n onStart,\n onEnd,\n color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n const [editedValue, setEditedValue] = useState(0);\n const [pureColor, setPureColor] = useState<string>();\n const [previewColor, setPreviewColor] = useState<string>();\n\n const sliderThumbRef = useRef<HTMLDivElement>(null);\n const sliderRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (color) {\n let rgb;\n\n if (isValidRGBA(color)) {\n rgb = splitRgb(color);\n } else {\n rgb = hexToRgb(color);\n }\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b, a } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n setPreviewColor(newColor);\n setPureColor(`rgb(${r},${g},${b},1)`);\n setEditedValue(100 - a * 100);\n }\n }, [color]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const a = Number(event.target.value);\n\n setEditedValue(a);\n\n const rgb = splitRgb(pureColor);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n setPreviewColor(newColor);\n\n if (typeof onChange === 'function') {\n onChange(newColor);\n }\n },\n [onChange, pureColor],\n );\n\n const sliderThumbPosition = useMemo(() => {\n if (sliderRef.current && sliderThumbRef.current) {\n return (\n (editedValue / 100) *\n (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [editedValue]);\n\n const handleStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n\n if (typeof onStart === 'function') {\n const rgb = splitRgb(pureColor);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n onStart(newColor);\n }\n }, [editedValue, onStart, pureColor]);\n\n const handleEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n if (typeof onEnd === 'function') {\n const rgb = splitRgb(pureColor);\n\n if (!rgb) {\n return;\n }\n\n const { r, g, b } = rgb;\n\n const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n onEnd(newColor);\n }\n }, [editedValue, onEnd, pureColor]);\n\n return (\n <StyledTransparencySlider>\n <StyledTransparencySliderInput\n ref={sliderRef}\n $color={pureColor}\n type=\"range\"\n min={0}\n max={100}\n value={editedValue}\n onPointerDown={handleStart}\n onPointerUp={handleEnd}\n onChange={handleInputChange}\n />\n <StyledTransparencySliderBackground />\n <StyledTransparencySliderThumbWrapper\n ref={sliderThumbRef}\n $position={sliderThumbPosition}\n >\n <StyledTransparencySliderThumbBackground />\n <StyledTransparencySliderThumb $color={previewColor} />\n </StyledTransparencySliderThumbWrapper>\n </StyledTransparencySlider>\n );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/esm/utils/color.js
CHANGED
|
@@ -86,6 +86,23 @@ export const isValidRGBA = rgbaString => {
|
|
|
86
86
|
const alpha = parseFloat(matches[4] ?? '');
|
|
87
87
|
return !(red < 0 || red > 255 || green < 0 || green > 255 || blue < 0 || blue > 255 || alpha < 0 || alpha > 1);
|
|
88
88
|
};
|
|
89
|
+
export const isValidRGB = rgbString => {
|
|
90
|
+
if (rgbString === '') {
|
|
91
|
+
return false;
|
|
92
|
+
}
|
|
93
|
+
const rgbRegex = /^rgb\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\s*\)$/;
|
|
94
|
+
if (!rgbRegex.test(rgbString)) {
|
|
95
|
+
return false;
|
|
96
|
+
}
|
|
97
|
+
const matches = rgbString.match(rgbRegex);
|
|
98
|
+
if (!matches) {
|
|
99
|
+
return false;
|
|
100
|
+
}
|
|
101
|
+
const red = parseInt(matches[1] ?? '', 10);
|
|
102
|
+
const green = parseInt(matches[2] ?? '', 10);
|
|
103
|
+
const blue = parseInt(matches[3] ?? '', 10);
|
|
104
|
+
return red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255;
|
|
105
|
+
};
|
|
89
106
|
export const convertColorToHsl = color => {
|
|
90
107
|
const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
|
|
91
108
|
const rgbRegex = /^rgb(a)?\(\s*((25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*,\s*){2}(25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*(,\s*\d+(\.\d+)?)?\)$/i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.js","names":["hexToHsl","rgb255ToHsl","rgb255ToHsv","getColorFromCoordinates","_ref","coordinates","canvas","opacity","scale","current","undefined","xCords","x","yCords","y","scaleX","scaleY","ctx","getContext","willReadFrequently","pixels","getImageData","data","getCoordinatesFromColor","_ref2","color","tolerance","height","width","imageData","rgb","splitRgb","r","targetR","g","targetG","b","targetB","index","Math","abs","isValidRGBA","rgbaString","rgbaRegex","test","matches","match","red","parseInt","green","blue","alpha","parseFloat","convertColorToHsl","hexRegex","rgbRegex","hslRegex","rgba","hsl","newColor","replaceAll","floor","h","Number","rgbToHsv","extractRgbValues","extractHsl","s","l","a","rgbString","hexToRgb","hex","result","exec","rgbToHex","_ref3","clamp","value","max","min","round","hexValue","toString","length"],"sources":["../../../src/utils/color.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from 'react';\n\nimport { hexToHsl, rgb255ToHsl, rgb255ToHsv } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { Coordinates, RGBA, Scale } from '../types/colorPicker';\n\ninterface GetColorFromCoordinatesOptions {\n coordinates: Coordinates;\n canvas: RefObject<HTMLCanvasElement>;\n opacity: number;\n scale: Scale;\n}\n\nexport const getColorFromCoordinates = ({\n coordinates,\n canvas,\n opacity,\n scale,\n}: GetColorFromCoordinatesOptions) => {\n if (!canvas.current) {\n return undefined;\n }\n\n const xCords = coordinates.x;\n const yCords = coordinates.y;\n\n const x = (xCords - 0.5) * scale.scaleX;\n const y = (yCords - 0.5) * scale.scaleY;\n\n const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n const pixels = ctx?.getImageData(x, y, 1, 1).data;\n\n if (!pixels) {\n return undefined;\n }\n\n // If transparency\n if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {\n return 'transparent';\n }\n\n return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;\n};\n\ninterface GetCoordinatesFromColorOptions {\n color: CSSProperties['color'];\n canvas: RefObject<HTMLCanvasElement>;\n tolerance?: number;\n}\n\nexport const getCoordinatesFromColor = ({\n canvas,\n color,\n tolerance = 0,\n}: GetCoordinatesFromColorOptions) => {\n const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n\n if (!ctx) {\n return null;\n }\n\n const height = canvas.current?.height ?? 150;\n const width = canvas.current?.width ?? 300;\n\n const imageData = ctx.getImageData(0, 0, width, height);\n const pixels = imageData.data;\n\n const rgb = splitRgb(color);\n\n if (!rgb) {\n return null;\n }\n\n const { r: targetR, g: targetG, b: targetB } = rgb;\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const index = (y * width + x) * 4;\n const r = pixels[index] ?? 0;\n const g = pixels[index + 1] ?? 0;\n const b = pixels[index + 2] ?? 0;\n\n if (\n Math.abs(targetR - r) <= tolerance &&\n Math.abs(targetG - g) <= tolerance &&\n Math.abs(targetB - b) <= tolerance\n ) {\n return { x, y };\n }\n }\n }\n\n return null;\n};\n\nexport const isValidRGBA = (rgbaString: string): boolean => {\n if (rgbaString === '') {\n return false;\n }\n\n const rgbaRegex = /^rgba\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*((0?\\.\\d+)|(1|0))\\s*\\)$/;\n if (!rgbaRegex.test(rgbaString)) {\n return false;\n }\n\n const matches = rgbaString.match(rgbaRegex);\n if (!matches) {\n return false;\n }\n\n const red = parseInt(matches[1] ?? '', 10);\n const green = parseInt(matches[2] ?? '', 10);\n const blue = parseInt(matches[3] ?? '', 10);\n const alpha = parseFloat(matches[4] ?? '');\n\n return !(\n red < 0 ||\n red > 255 ||\n green < 0 ||\n green > 255 ||\n blue < 0 ||\n blue > 255 ||\n alpha < 0 ||\n alpha > 1\n );\n};\n\nexport const convertColorToHsl = (color: string) => {\n const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n const rgbRegex =\n /^rgb(a)?\\(\\s*((25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*,\\s*){2}(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n const hslRegex =\n /^hsla?\\(\\s*((360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*,\\s*){2}(360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n\n let rgba: string[] | null;\n let hsl: HSL | HSLA | null;\n\n const newColor = color.replaceAll('%', '');\n\n switch (true) {\n case hexRegex.test(newColor):\n hsl = hexToHsl(color);\n\n if (!hsl) {\n return undefined;\n }\n\n return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n case rgbRegex.test(newColor):\n rgba = color.match(/[\\d.]+/g);\n\n if (!rgba) {\n return undefined;\n }\n\n hsl = rgb255ToHsl({\n r: Number(rgba[0]),\n g: Number(rgba[1]),\n b: Number(rgba[2]),\n });\n\n if (!hsl) {\n return undefined;\n }\n\n return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n case hslRegex.test(newColor):\n return color;\n default:\n return undefined;\n }\n};\n\nexport const rgbToHsv = (color: CSSProperties['color']) =>\n rgb255ToHsv(extractRgbValues(color ?? ''));\n\nexport const extractHsl = (hsl: string) => {\n const match = hsl.match(\n /hsl\\(\\s*(\\d+(?:\\.\\d+)?)\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*\\)/i,\n );\n\n if (!match) {\n return null;\n }\n\n const h = parseFloat(match[1] ?? '');\n const s = parseFloat(match[2] ?? '') / 100;\n const l = parseFloat(match[3] ?? '') / 100;\n\n return { h, s, l };\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGBA => {\n const rgba = color?.match(/[\\d.]+/g);\n\n if (!rgba) {\n return null;\n }\n\n return { r: Number(rgba[0]), g: Number(rgba[1]), b: Number(rgba[2]), a: Number(rgba[3]) };\n};\n\nexport const extractRgbValues = (rgbString: string): RGBA => {\n const rgbaRegex = /rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)/;\n const match = rgbString.match(rgbaRegex);\n\n if (match) {\n const r = parseInt(match[1] ?? '', 10);\n const g = parseInt(match[2] ?? '', 10);\n const b = parseInt(match[3] ?? '', 10);\n const a = parseFloat(match[4] ?? '');\n\n return { r, g, b, a };\n }\n\n return {\n r: 255,\n g: 255,\n b: 255,\n a: 1,\n };\n};\n\nexport const hexToRgb = (hex: string): RGBA => {\n let r: number;\n let g: number;\n let b: number;\n let a: number;\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i.exec(hex);\n\n if (result) {\n r = parseInt(result[1] ?? '0', 16);\n g = parseInt(result[2] ?? '0', 16);\n b = parseInt(result[3] ?? '0', 16);\n a = result[4] ? parseInt(result[4], 16) / 100 : 1;\n\n return { r, g, b, a };\n }\n\n return {\n r: 255,\n g: 255,\n b: 255,\n a: 1,\n };\n};\n\nexport const rgbToHex = ({ r, g, b, a = 1 }: RGBA): string => {\n const clamp = (value: number) => Math.max(0, Math.min(255, Math.round(value)));\n const alpha = Math.max(0, Math.min(1, a));\n const hex = (x: number) => {\n const hexValue = clamp(x).toString(16);\n return hexValue.length === 1 ? `0${hexValue}` : hexValue;\n };\n return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 100) : ''}`;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"color.js","names":["hexToHsl","rgb255ToHsl","rgb255ToHsv","getColorFromCoordinates","_ref","coordinates","canvas","opacity","scale","current","undefined","xCords","x","yCords","y","scaleX","scaleY","ctx","getContext","willReadFrequently","pixels","getImageData","data","getCoordinatesFromColor","_ref2","color","tolerance","height","width","imageData","rgb","splitRgb","r","targetR","g","targetG","b","targetB","index","Math","abs","isValidRGBA","rgbaString","rgbaRegex","test","matches","match","red","parseInt","green","blue","alpha","parseFloat","isValidRGB","rgbString","rgbRegex","convertColorToHsl","hexRegex","hslRegex","rgba","hsl","newColor","replaceAll","floor","h","Number","rgbToHsv","extractRgbValues","extractHsl","s","l","a","hexToRgb","hex","result","exec","rgbToHex","_ref3","clamp","value","max","min","round","hexValue","toString","length"],"sources":["../../../src/utils/color.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from 'react';\n\nimport { hexToHsl, rgb255ToHsl, rgb255ToHsv } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { Coordinates, RGBA, Scale } from '../types/colorPicker';\n\ninterface GetColorFromCoordinatesOptions {\n coordinates: Coordinates;\n canvas: RefObject<HTMLCanvasElement>;\n opacity: number;\n scale: Scale;\n}\n\nexport const getColorFromCoordinates = ({\n coordinates,\n canvas,\n opacity,\n scale,\n}: GetColorFromCoordinatesOptions) => {\n if (!canvas.current) {\n return undefined;\n }\n\n const xCords = coordinates.x;\n const yCords = coordinates.y;\n\n const x = (xCords - 0.5) * scale.scaleX;\n const y = (yCords - 0.5) * scale.scaleY;\n\n const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n const pixels = ctx?.getImageData(x, y, 1, 1).data;\n\n if (!pixels) {\n return undefined;\n }\n\n // If transparency\n if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {\n return 'transparent';\n }\n\n return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;\n};\n\ninterface GetCoordinatesFromColorOptions {\n color: CSSProperties['color'];\n canvas: RefObject<HTMLCanvasElement>;\n tolerance?: number;\n}\n\nexport const getCoordinatesFromColor = ({\n canvas,\n color,\n tolerance = 0,\n}: GetCoordinatesFromColorOptions) => {\n const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n\n if (!ctx) {\n return null;\n }\n\n const height = canvas.current?.height ?? 150;\n const width = canvas.current?.width ?? 300;\n\n const imageData = ctx.getImageData(0, 0, width, height);\n const pixels = imageData.data;\n\n const rgb = splitRgb(color);\n\n if (!rgb) {\n return null;\n }\n\n const { r: targetR, g: targetG, b: targetB } = rgb;\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const index = (y * width + x) * 4;\n const r = pixels[index] ?? 0;\n const g = pixels[index + 1] ?? 0;\n const b = pixels[index + 2] ?? 0;\n\n if (\n Math.abs(targetR - r) <= tolerance &&\n Math.abs(targetG - g) <= tolerance &&\n Math.abs(targetB - b) <= tolerance\n ) {\n return { x, y };\n }\n }\n }\n\n return null;\n};\n\nexport const isValidRGBA = (rgbaString: string): boolean => {\n if (rgbaString === '') {\n return false;\n }\n\n const rgbaRegex = /^rgba\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*((0?\\.\\d+)|(1|0))\\s*\\)$/;\n if (!rgbaRegex.test(rgbaString)) {\n return false;\n }\n\n const matches = rgbaString.match(rgbaRegex);\n if (!matches) {\n return false;\n }\n\n const red = parseInt(matches[1] ?? '', 10);\n const green = parseInt(matches[2] ?? '', 10);\n const blue = parseInt(matches[3] ?? '', 10);\n const alpha = parseFloat(matches[4] ?? '');\n\n return !(\n red < 0 ||\n red > 255 ||\n green < 0 ||\n green > 255 ||\n blue < 0 ||\n blue > 255 ||\n alpha < 0 ||\n alpha > 1\n );\n};\n\nexport const isValidRGB = (rgbString: string): boolean => {\n if (rgbString === '') {\n return false;\n }\n\n const rgbRegex = /^rgb\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3})\\s*\\)$/;\n if (!rgbRegex.test(rgbString)) {\n return false;\n }\n\n const matches = rgbString.match(rgbRegex);\n if (!matches) {\n return false;\n }\n\n const red = parseInt(matches[1] ?? '', 10);\n const green = parseInt(matches[2] ?? '', 10);\n const blue = parseInt(matches[3] ?? '', 10);\n\n return red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255;\n};\n\nexport const convertColorToHsl = (color: string) => {\n const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n const rgbRegex =\n /^rgb(a)?\\(\\s*((25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*,\\s*){2}(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n const hslRegex =\n /^hsla?\\(\\s*((360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*,\\s*){2}(360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n\n let rgba: string[] | null;\n let hsl: HSL | HSLA | null;\n\n const newColor = color.replaceAll('%', '');\n\n switch (true) {\n case hexRegex.test(newColor):\n hsl = hexToHsl(color);\n\n if (!hsl) {\n return undefined;\n }\n\n return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n case rgbRegex.test(newColor):\n rgba = color.match(/[\\d.]+/g);\n\n if (!rgba) {\n return undefined;\n }\n\n hsl = rgb255ToHsl({\n r: Number(rgba[0]),\n g: Number(rgba[1]),\n b: Number(rgba[2]),\n });\n\n if (!hsl) {\n return undefined;\n }\n\n return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n case hslRegex.test(newColor):\n return color;\n default:\n return undefined;\n }\n};\n\nexport const rgbToHsv = (color: CSSProperties['color']) =>\n rgb255ToHsv(extractRgbValues(color ?? ''));\n\nexport const extractHsl = (hsl: string) => {\n const match = hsl.match(\n /hsl\\(\\s*(\\d+(?:\\.\\d+)?)\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*\\)/i,\n );\n\n if (!match) {\n return null;\n }\n\n const h = parseFloat(match[1] ?? '');\n const s = parseFloat(match[2] ?? '') / 100;\n const l = parseFloat(match[3] ?? '') / 100;\n\n return { h, s, l };\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGBA => {\n const rgba = color?.match(/[\\d.]+/g);\n\n if (!rgba) {\n return null;\n }\n\n return { r: Number(rgba[0]), g: Number(rgba[1]), b: Number(rgba[2]), a: Number(rgba[3]) };\n};\n\nexport const extractRgbValues = (rgbString: string): RGBA => {\n const rgbaRegex = /rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)/;\n const match = rgbString.match(rgbaRegex);\n\n if (match) {\n const r = parseInt(match[1] ?? '', 10);\n const g = parseInt(match[2] ?? '', 10);\n const b = parseInt(match[3] ?? '', 10);\n const a = parseFloat(match[4] ?? '');\n\n return { r, g, b, a };\n }\n\n return {\n r: 255,\n g: 255,\n b: 255,\n a: 1,\n };\n};\n\nexport const hexToRgb = (hex: string): RGBA => {\n let r: number;\n let g: number;\n let b: number;\n let a: number;\n\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i.exec(hex);\n\n if (result) {\n r = parseInt(result[1] ?? '0', 16);\n g = parseInt(result[2] ?? '0', 16);\n b = parseInt(result[3] ?? '0', 16);\n a = result[4] ? parseInt(result[4], 16) / 100 : 1;\n\n return { r, g, b, a };\n }\n\n return {\n r: 255,\n g: 255,\n b: 255,\n a: 1,\n };\n};\n\nexport const rgbToHex = ({ r, g, b, a = 1 }: RGBA): string => {\n const clamp = (value: number) => Math.max(0, Math.min(255, Math.round(value)));\n const alpha = Math.max(0, Math.min(1, a));\n const hex = (x: number) => {\n const hexValue = clamp(x).toString(16);\n return hexValue.length === 1 ? `0${hexValue}` : hexValue;\n };\n return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 100) : ''}`;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,6 +2,7 @@ export declare const StyledColorArea: import("styled-components/dist/types").ISt
|
|
|
2
2
|
export declare const StyledColorAreaCanvas: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, never>> & string;
|
|
3
3
|
export declare const StyledColorAreaPseudo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
4
4
|
export declare const StyledMotionColorAreaPointer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<{
|
|
5
|
+
color?: string | undefined;
|
|
5
6
|
onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
6
7
|
slot?: string | undefined;
|
|
7
8
|
title?: string | undefined;
|
|
@@ -17,7 +18,7 @@ export declare const StyledMotionColorAreaPointer: import("styled-components/dis
|
|
|
17
18
|
contextMenu?: string | undefined;
|
|
18
19
|
dir?: string | undefined;
|
|
19
20
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
20
|
-
enterKeyHint?: "
|
|
21
|
+
enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
|
|
21
22
|
hidden?: boolean | undefined;
|
|
22
23
|
id?: string | undefined;
|
|
23
24
|
lang?: string | undefined;
|
|
@@ -40,7 +41,6 @@ export declare const StyledMotionColorAreaPointer: import("styled-components/dis
|
|
|
40
41
|
vocab?: string | undefined;
|
|
41
42
|
autoCorrect?: string | undefined;
|
|
42
43
|
autoSave?: string | undefined;
|
|
43
|
-
color?: string | undefined;
|
|
44
44
|
itemProp?: string | undefined;
|
|
45
45
|
itemScope?: boolean | undefined;
|
|
46
46
|
itemType?: string | undefined;
|
|
@@ -17,6 +17,7 @@ export declare const getCoordinatesFromColor: ({ canvas, color, tolerance, }: Ge
|
|
|
17
17
|
y: number;
|
|
18
18
|
} | null;
|
|
19
19
|
export declare const isValidRGBA: (rgbaString: string) => boolean;
|
|
20
|
+
export declare const isValidRGB: (rgbString: string) => boolean;
|
|
20
21
|
export declare const convertColorToHsl: (color: string) => string | undefined;
|
|
21
22
|
export declare const rgbToHsv: (color: CSSProperties["color"]) => import("@chayns/colors/lib/types/hsv").HSV | import("@chayns/colors/lib/types/hsv").HSVA | null;
|
|
22
23
|
export declare const extractHsl: (hsl: string) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/color-picker",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.885",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"typescript": "^5.6.3"
|
|
70
70
|
},
|
|
71
71
|
"dependencies": {
|
|
72
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
72
|
+
"@chayns-components/core": "^5.0.0-beta.885",
|
|
73
73
|
"@chayns/colors": "^2.0.0"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"publishConfig": {
|
|
83
83
|
"access": "public"
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "77da4abecd17e83781b1c029cdeb1694d0d33244"
|
|
86
86
|
}
|