@chayns-components/color-picker 5.0.0-beta.441 → 5.0.0-beta.444
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/components/hue-slider/HueSlider.js +13 -21
- package/lib/components/hue-slider/HueSlider.js.map +1 -1
- package/lib/components/hue-slider/HueSlider.styles.js +3 -10
- package/lib/components/hue-slider/HueSlider.styles.js.map +1 -1
- package/lib/components/index.js +1 -13
- package/lib/components/index.js.map +1 -1
- package/lib/constants/color.js +1 -7
- package/lib/constants/color.js.map +1 -1
- package/lib/utils/color.js +7 -17
- package/lib/utils/color.js.map +1 -1
- package/package.json +17 -10
|
@@ -1,29 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _colors = require("@chayns/colors");
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _color = require("../../utils/color");
|
|
10
|
-
var _HueSlider = require("./HueSlider.styles");
|
|
11
|
-
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); }
|
|
12
|
-
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 && Object.prototype.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; }
|
|
1
|
+
import { hslToRgb255 } from '@chayns/colors';
|
|
2
|
+
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
3
|
+
import { convertColorToHsl, splitRgb } from '../../utils/color';
|
|
4
|
+
import { StyledHueSlider, StyledHueSliderInput } from './HueSlider.styles';
|
|
13
5
|
const HueSlider = _ref => {
|
|
14
6
|
let {
|
|
15
7
|
onChange,
|
|
16
8
|
color = 'rgba(255, 0, 0, 1)'
|
|
17
9
|
} = _ref;
|
|
18
|
-
const [editedValue, setEditedValue] =
|
|
19
|
-
const [hslColor, setHslColor] =
|
|
20
|
-
|
|
10
|
+
const [editedValue, setEditedValue] = useState(0);
|
|
11
|
+
const [hslColor, setHslColor] = useState('hsl(0, 0, 100)');
|
|
12
|
+
useEffect(() => {
|
|
21
13
|
if (color) {
|
|
22
|
-
const rgb =
|
|
14
|
+
const rgb = splitRgb(color);
|
|
23
15
|
if (!rgb) {
|
|
24
16
|
return;
|
|
25
17
|
}
|
|
26
|
-
const hsl =
|
|
18
|
+
const hsl = convertColorToHsl(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);
|
|
27
19
|
const match = hsl?.toString().match(/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/);
|
|
28
20
|
if (!match || !match[1]) {
|
|
29
21
|
return;
|
|
@@ -35,7 +27,7 @@ const HueSlider = _ref => {
|
|
|
35
27
|
}
|
|
36
28
|
}
|
|
37
29
|
}, [color, onChange]);
|
|
38
|
-
const handleInputChange =
|
|
30
|
+
const handleInputChange = useCallback(event => {
|
|
39
31
|
setEditedValue(Number(event.target.value));
|
|
40
32
|
const percentage = Number(event.target.value) / 360 * 100;
|
|
41
33
|
const hue = percentage / 100 * 360;
|
|
@@ -44,7 +36,7 @@ const HueSlider = _ref => {
|
|
|
44
36
|
const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
|
45
37
|
setHslColor(hsl);
|
|
46
38
|
if (typeof onChange === 'function') {
|
|
47
|
-
const rgb =
|
|
39
|
+
const rgb = hslToRgb255({
|
|
48
40
|
h: hue,
|
|
49
41
|
s: 1,
|
|
50
42
|
l: 0.5
|
|
@@ -55,7 +47,7 @@ const HueSlider = _ref => {
|
|
|
55
47
|
onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${1})`);
|
|
56
48
|
}
|
|
57
49
|
}, [onChange]);
|
|
58
|
-
return
|
|
50
|
+
return useMemo(() => /*#__PURE__*/React.createElement(StyledHueSlider, null, /*#__PURE__*/React.createElement(StyledHueSliderInput, {
|
|
59
51
|
color: hslColor,
|
|
60
52
|
type: "range",
|
|
61
53
|
min: 0,
|
|
@@ -65,5 +57,5 @@ const HueSlider = _ref => {
|
|
|
65
57
|
})), [editedValue, handleInputChange, hslColor]);
|
|
66
58
|
};
|
|
67
59
|
HueSlider.displayName = 'HueSlider';
|
|
68
|
-
|
|
60
|
+
export default HueSlider;
|
|
69
61
|
//# sourceMappingURL=HueSlider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HueSlider.js","names":["
|
|
1
|
+
{"version":3,"file":"HueSlider.js","names":["hslToRgb255","React","useCallback","useEffect","useMemo","useState","convertColorToHsl","splitRgb","StyledHueSlider","StyledHueSliderInput","HueSlider","_ref","onChange","color","editedValue","setEditedValue","hslColor","setHslColor","rgb","hsl","r","g","b","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","createElement","type","min","max","displayName"],"sources":["../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport React, {\n ChangeEvent,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { convertColorToHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput } 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?: (color: CSSProperties['color']) => void;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({ onChange, color = 'rgba(255, 0, 0, 1)' }) => {\n const [editedValue, setEditedValue] = useState(0);\n const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n\n useEffect(() => {\n if (color) {\n const rgb = splitRgb(color);\n\n if (!rgb) {\n return;\n }\n\n const hsl = convertColorToHsl(`rgba(${rgb.r}, ${rgb.g}, ${rgb.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 if (typeof onChange === 'function') {\n onChange(hsl);\n }\n }\n }, [color, onChange]);\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}, ${1})`);\n }\n },\n [onChange]\n );\n\n return useMemo(\n () => (\n <StyledHueSlider>\n <StyledHueSliderInput\n color={hslColor}\n type=\"range\"\n min={0}\n max={360}\n value={editedValue}\n onChange={handleInputChange}\n />\n </StyledHueSlider>\n ),\n [editedValue, handleInputChange, hslColor]\n );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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"}
|
|
@@ -1,16 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.StyledHueSliderInput = exports.StyledHueSlider = void 0;
|
|
7
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
-
const StyledHueSlider = exports.StyledHueSlider = _styledComponents.default.div`
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
export const StyledHueSlider = styled.div`
|
|
10
3
|
width: 100%;
|
|
11
4
|
cursor: pointer;
|
|
12
5
|
`;
|
|
13
|
-
const StyledHueSliderInput =
|
|
6
|
+
export const StyledHueSliderInput = styled.input`
|
|
14
7
|
width: 100%;
|
|
15
8
|
border-radius: 100px;
|
|
16
9
|
-webkit-appearance: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HueSlider.styles.js","names":["
|
|
1
|
+
{"version":3,"file":"HueSlider.styles.js","names":["styled","StyledHueSlider","div","StyledHueSliderInput","input","_ref","color","_ref2"],"sources":["../../../src/components/hue-slider/HueSlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledHueSlider = styled.div`\n width: 100%;\n cursor: pointer;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n width: 100%;\n border-radius: 100px;\n -webkit-appearance: none;\n height: 10px;\n background: linear-gradient(\n to right,\n hsl(0, 100%, 50%),\n hsl(30, 100%, 50%),\n hsl(60, 100%, 50%),\n hsl(90, 100%, 50%),\n hsl(120, 100%, 50%),\n hsl(150, 100%, 50%),\n hsl(180, 100%, 50%),\n hsl(210, 100%, 50%),\n hsl(240, 100%, 50%),\n hsl(270, 100%, 50%),\n hsl(300, 100%, 50%),\n hsl(330, 100%, 50%),\n hsl(360, 100%, 50%)\n );\n outline: none;\n opacity: 0.7;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background-color: ${({ color }) => color};\n cursor: pointer;\n border-radius: 50%;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n }\n\n // slider thumb for firefox\n &::-moz-range-thumb {\n width: 20px;\n height: 20px;\n background-color: ${({ color }) => color};\n cursor: pointer;\n border-radius: 50%;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n }\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAI;AAC1C;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,oBAAoB,GAAGH,MAAM,CAACI,KAAiC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA,CAAC;AACjD;AACA;AACA;AACA;AACA,CAAC"}
|
package/lib/components/index.js
CHANGED
|
@@ -1,14 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "HueSlider", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _HueSlider.default;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
var _HueSlider = _interopRequireDefault(require("./hue-slider/HueSlider"));
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
1
|
+
export { default as HueSlider } from './hue-slider/HueSlider';
|
|
14
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","HueSlider"],"sources":["../../src/components/index.ts"],"sourcesContent":["export { default as HueSlider } from './hue-slider/HueSlider';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAAS,QAAQ,wBAAwB"}
|
package/lib/constants/color.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.js","names":["colorPresents","
|
|
1
|
+
{"version":3,"file":"color.js","names":["colorPresents","id","color"],"sources":["../../src/constants/color.ts"],"sourcesContent":["export const colorPresents = [\n { id: 0, color: 'rgb(0, 0, 0)' },\n { id: 1, color: 'rgb(67, 67, 67)' },\n { id: 2, color: 'rgb(102, 102, 102)' },\n { id: 3, color: 'rgb(153, 153, 153)' },\n { id: 4, color: 'rgb(183, 183, 183)' },\n { id: 5, color: 'rgb(204, 204, 204)' },\n { id: 6, color: 'rgb(217, 217, 217)' },\n { id: 7, color: 'rgb(239, 239, 239)' },\n { id: 8, color: 'rgb(243, 243, 243)' },\n { id: 9, color: 'rgb(255, 255, 255)' },\n { id: 10, color: 'rgb(244, 67, 54)' },\n { id: 11, color: 'rgb(255, 152, 0)' },\n { id: 12, color: 'rgb(255, 235, 59)' },\n { id: 13, color: 'rgb(0, 150, 136)' },\n { id: 14, color: 'rgb(121, 85, 72)' },\n { id: 15, color: 'rgb(139, 195, 74)' },\n { id: 16, color: 'rgb(76, 175, 80)' },\n { id: 17, color: 'rgb(156, 39, 176)' },\n { id: 18, color: 'rgb(63, 81, 181)' },\n { id: 19, color: 'rgb(3, 169, 244)' },\n];\n"],"mappings":"AAAA,OAAO,MAAMA,aAAa,GAAG,CACzB;EAAEC,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAe,CAAC,EAChC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAkB,CAAC,EACnC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,CACxC"}
|
package/lib/utils/color.js
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.splitRgb = exports.getCoordinatesFromColor = exports.getColorFromCoordinates = exports.convertColorToHsl = void 0;
|
|
7
|
-
var _colors = require("@chayns/colors");
|
|
8
|
-
const getColorFromCoordinates = _ref => {
|
|
1
|
+
import { hexToHsl, rgb255ToHsl } from '@chayns/colors';
|
|
2
|
+
export const getColorFromCoordinates = _ref => {
|
|
9
3
|
let {
|
|
10
4
|
coordinates,
|
|
11
5
|
canvas,
|
|
@@ -33,8 +27,7 @@ const getColorFromCoordinates = _ref => {
|
|
|
33
27
|
}
|
|
34
28
|
return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;
|
|
35
29
|
};
|
|
36
|
-
|
|
37
|
-
const getCoordinatesFromColor = _ref2 => {
|
|
30
|
+
export const getCoordinatesFromColor = _ref2 => {
|
|
38
31
|
let {
|
|
39
32
|
canvas,
|
|
40
33
|
color
|
|
@@ -74,8 +67,7 @@ const getCoordinatesFromColor = _ref2 => {
|
|
|
74
67
|
}
|
|
75
68
|
return null;
|
|
76
69
|
};
|
|
77
|
-
|
|
78
|
-
const convertColorToHsl = color => {
|
|
70
|
+
export const convertColorToHsl = color => {
|
|
79
71
|
const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
|
|
80
72
|
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;
|
|
81
73
|
const hslRegex = /^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;
|
|
@@ -84,7 +76,7 @@ const convertColorToHsl = color => {
|
|
|
84
76
|
const newColor = color.replaceAll('%', '');
|
|
85
77
|
switch (true) {
|
|
86
78
|
case hexRegex.test(newColor):
|
|
87
|
-
hsl =
|
|
79
|
+
hsl = hexToHsl(color);
|
|
88
80
|
if (!hsl) {
|
|
89
81
|
return undefined;
|
|
90
82
|
}
|
|
@@ -94,7 +86,7 @@ const convertColorToHsl = color => {
|
|
|
94
86
|
if (!rgba) {
|
|
95
87
|
return undefined;
|
|
96
88
|
}
|
|
97
|
-
hsl =
|
|
89
|
+
hsl = rgb255ToHsl({
|
|
98
90
|
r: Number(rgba[0]),
|
|
99
91
|
g: Number(rgba[1]),
|
|
100
92
|
b: Number(rgba[2])
|
|
@@ -109,8 +101,7 @@ const convertColorToHsl = color => {
|
|
|
109
101
|
return undefined;
|
|
110
102
|
}
|
|
111
103
|
};
|
|
112
|
-
|
|
113
|
-
const splitRgb = color => {
|
|
104
|
+
export const splitRgb = color => {
|
|
114
105
|
const rgba = color?.match(/[\d.]+/g);
|
|
115
106
|
if (!rgba) {
|
|
116
107
|
return null;
|
|
@@ -122,5 +113,4 @@ const splitRgb = color => {
|
|
|
122
113
|
a: Number(rgba[3])
|
|
123
114
|
};
|
|
124
115
|
};
|
|
125
|
-
exports.splitRgb = splitRgb;
|
|
126
116
|
//# sourceMappingURL=color.js.map
|
package/lib/utils/color.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.js","names":["
|
|
1
|
+
{"version":3,"file":"color.js","names":["hexToHsl","rgb255ToHsl","getColorFromCoordinates","_ref","coordinates","canvas","opacity","scale","current","undefined","top","left","getBoundingClientRect","x","scaleX","y","scaleY","ctx","getContext","pixels","getImageData","data","getCoordinatesFromColor","_ref2","color","rgb","splitRgb","p","px","r","g","b","convertColorToHsl","hexRegex","rgbRegex","hslRegex","rgba","hsl","newColor","replaceAll","test","Math","floor","h","match","Number","a"],"sources":["../../src/utils/color.ts"],"sourcesContent":["import { hexToHsl, rgb255ToHsl } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { CSSProperties, RefObject } from 'react';\nimport type { Coordinates, RGB, Scale } from '../types';\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 { top, left } = canvas.current.getBoundingClientRect();\n\n const x = (coordinates.x - left) * scale.scaleX;\n const y = (coordinates.y - top) * scale.scaleY;\n\n const ctx = canvas.current?.getContext('2d');\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}\n\nexport const getCoordinatesFromColor = ({ canvas, color }: GetCoordinatesFromColorOptions) => {\n const ctx = canvas.current?.getContext('2d');\n\n if (!ctx || !color) {\n return undefined;\n }\n\n const { data } = ctx.getImageData(0, 0, 300, 150); /// get image data\n let x = 0;\n let y = 0;\n\n const rgb = splitRgb(color);\n\n if (!rgb) {\n return undefined;\n }\n\n // iterating x/y instead of forward to get position the easy way\n for (; y < 150; y++) {\n // common value for all x\n const p = y * 4 * 300;\n\n for (x = 0; x < 300; x++) {\n // next pixel (skipping 4 bytes as each pixel is RGBA bytes)\n const px = p + x * 4;\n\n // if red component match check the others\n if (data[px] === rgb.r) {\n if (data[px + 1] === rgb.g && data[px + 2] === rgb.b) {\n return { x, y };\n }\n }\n }\n }\n return null;\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%,50%)`;\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%,50%)`;\n case hslRegex.test(newColor):\n return color;\n default:\n return undefined;\n }\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGB => {\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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/color-picker",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.444",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
|
+
"sideEffects": false,
|
|
6
|
+
"browserslist": [
|
|
7
|
+
">0.5%",
|
|
8
|
+
"not dead",
|
|
9
|
+
"not op_mini all",
|
|
10
|
+
"not IE 11"
|
|
11
|
+
],
|
|
5
12
|
"keywords": [
|
|
6
13
|
"chayns",
|
|
7
14
|
"react",
|
|
@@ -33,24 +40,24 @@
|
|
|
33
40
|
"url": "https://github.com/TobitSoftware/chayns-components/issues"
|
|
34
41
|
},
|
|
35
42
|
"devDependencies": {
|
|
36
|
-
"@babel/cli": "^7.23.
|
|
37
|
-
"@babel/core": "^7.23.
|
|
38
|
-
"@babel/preset-env": "^7.23.
|
|
43
|
+
"@babel/cli": "^7.23.9",
|
|
44
|
+
"@babel/core": "^7.23.9",
|
|
45
|
+
"@babel/preset-env": "^7.23.9",
|
|
39
46
|
"@babel/preset-react": "^7.23.3",
|
|
40
47
|
"@babel/preset-typescript": "^7.23.3",
|
|
41
|
-
"@types/react": "^18.2.
|
|
42
|
-
"@types/react-dom": "^18.2.
|
|
48
|
+
"@types/react": "^18.2.55",
|
|
49
|
+
"@types/react-dom": "^18.2.19",
|
|
43
50
|
"@types/styled-components": "^5.1.34",
|
|
44
|
-
"@types/uuid": "^9.0.
|
|
51
|
+
"@types/uuid": "^9.0.8",
|
|
45
52
|
"babel-loader": "^9.1.3",
|
|
46
|
-
"lerna": "^8.
|
|
53
|
+
"lerna": "^8.1.2",
|
|
47
54
|
"react": "^18.2.0",
|
|
48
55
|
"react-dom": "^18.2.0",
|
|
49
56
|
"styled-components": "^6.1.8",
|
|
50
57
|
"typescript": "^5.3.3"
|
|
51
58
|
},
|
|
52
59
|
"dependencies": {
|
|
53
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
60
|
+
"@chayns-components/core": "^5.0.0-beta.444",
|
|
54
61
|
"@chayns/colors": "^2.0.0"
|
|
55
62
|
},
|
|
56
63
|
"peerDependencies": {
|
|
@@ -63,5 +70,5 @@
|
|
|
63
70
|
"publishConfig": {
|
|
64
71
|
"access": "public"
|
|
65
72
|
},
|
|
66
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "7f05f8a55eebf93c43b1ece35fff0d5a7c3dfa73"
|
|
67
74
|
}
|