@chayns-components/color-picker 5.0.0-beta.384 → 5.0.0-beta.387
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/utils/color.js +0 -2
- package/lib/utils/color.js.map +1 -1
- package/package.json +3 -3
package/lib/utils/color.js
CHANGED
package/lib/utils/color.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color.js","names":["_colors","require","getColorFromCoordinates","_ref","coordinates","canvas","opacity","scale","current","undefined","top","left","getBoundingClientRect","x","scaleX","y","scaleY","ctx","getContext","pixels","getImageData","data","exports","getCoordinatesFromColor","_ref2","color","rgb","splitRgb","
|
|
1
|
+
{"version":3,"file":"color.js","names":["_colors","require","getColorFromCoordinates","_ref","coordinates","canvas","opacity","scale","current","undefined","top","left","getBoundingClientRect","x","scaleX","y","scaleY","ctx","getContext","pixels","getImageData","data","exports","getCoordinatesFromColor","_ref2","color","rgb","splitRgb","p","px","r","g","b","convertColorToHsl","hexRegex","rgbRegex","hslRegex","rgba","hsl","newColor","replaceAll","test","hexToHsl","Math","floor","h","match","rgb255ToHsl","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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/color-picker",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.387",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"typescript": "^5.3.3"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
53
|
+
"@chayns-components/core": "^5.0.0-beta.387",
|
|
54
54
|
"@chayns/colors": "^2.0.0",
|
|
55
55
|
"clsx": "^2.1.0",
|
|
56
56
|
"framer-motion": "^10.17.8",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "acc3ca2a2de68bbaa56f8d4b8a2732d9ed2c3736"
|
|
68
68
|
}
|