1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | import chroma from "chroma-js";
|
14 | import { colorSpaces, createScale } from "./utils";
|
15 |
|
16 | class Color {
|
17 | constructor({ name, colorKeys, colorspace = 'RGB', ratios, smooth = false, output = 'HEX', saturation = 100 }) {
|
18 | this._name = name;
|
19 | this._colorKeys = colorKeys;
|
20 | this._modifiedKeys = colorKeys;
|
21 | this._colorspace = colorspace;
|
22 | this._ratios = ratios;
|
23 | this._smooth = smooth;
|
24 | this._output = output;
|
25 | this._saturation = saturation;
|
26 |
|
27 | if (!this._name) {
|
28 | throw new Error('Color missing name');
|
29 | }
|
30 | if (!this._colorKeys) {
|
31 | throw new Error('Color Keys are undefined');
|
32 | }
|
33 | if (!colorSpaces[this._colorspace]) {
|
34 | throw new Error(`Colorspace “${colorspace}” not supported`);
|
35 | }
|
36 | if (!colorSpaces[this._output]) {
|
37 | throw new Error(`Output “${colorspace}” not supported`);
|
38 | }
|
39 |
|
40 | for (let i = 0; i < this._colorKeys.length; i++) {
|
41 | if (!chroma.valid(this._colorKeys[i])) {
|
42 | throw new Error(`Invalid Color Key “${this._colorKeys[i]}”`);
|
43 | }
|
44 | }
|
45 |
|
46 |
|
47 | this._colorScale = null;
|
48 | }
|
49 |
|
50 |
|
51 | set colorKeys(colorKeys) {
|
52 | this._colorKeys = colorKeys;
|
53 | this._updateColorSaturation();
|
54 | }
|
55 |
|
56 | get colorKeys() {
|
57 | return this._colorKeys;
|
58 | }
|
59 |
|
60 | set saturation(saturation) {
|
61 | this._saturation = saturation;
|
62 | this._updateColorSaturation();
|
63 | }
|
64 |
|
65 | get saturation() {
|
66 | return this._saturation;
|
67 | }
|
68 |
|
69 | set colorspace(colorspace) {
|
70 | this._colorspace = colorspace;
|
71 | this._generateColorScale();
|
72 | }
|
73 |
|
74 | get colorspace() {
|
75 | return this._colorspace;
|
76 | }
|
77 |
|
78 | set ratios(ratios) {
|
79 | this._ratios = ratios;
|
80 | }
|
81 |
|
82 | get ratios() {
|
83 | return this._ratios;
|
84 | }
|
85 |
|
86 | set name(name) {
|
87 | this._name = name;
|
88 | }
|
89 |
|
90 | get name() {
|
91 | return this._name;
|
92 | }
|
93 |
|
94 | set smooth(smooth) {
|
95 | if(smooth === true || smooth === 'true') this._smooth = smooth;
|
96 | else this._smooth = false;
|
97 |
|
98 | this._generateColorScale();
|
99 | }
|
100 |
|
101 | get smooth() {
|
102 | return this._smooth;
|
103 | }
|
104 |
|
105 | set output(output) {
|
106 | this._output = output;
|
107 | this._colorScale = null;
|
108 | }
|
109 |
|
110 | get output() {
|
111 | return this._output;
|
112 | }
|
113 |
|
114 | get colorScale() {
|
115 | if (!this._colorScale) {
|
116 | this._generateColorScale();
|
117 | }
|
118 | return this._colorScale;
|
119 | }
|
120 |
|
121 | _updateColorSaturation() {
|
122 | let newColorKeys = [];
|
123 | this._colorKeys.forEach(key => {
|
124 | let currentHsluv = chroma(`${key}`).hsluv();
|
125 | let currentSaturation = currentHsluv[1];
|
126 | let newSaturation = currentSaturation * (this._saturation / 100);
|
127 | let newHsluv = chroma.hsluv(currentHsluv[0], newSaturation, currentHsluv[2]);
|
128 | let newColor = chroma.rgb(newHsluv).hex();
|
129 | newColorKeys.push(newColor);
|
130 | });
|
131 |
|
132 | this._modifiedKeys = newColorKeys;
|
133 |
|
134 | this._generateColorScale();
|
135 | }
|
136 |
|
137 | _generateColorScale() {
|
138 |
|
139 |
|
140 | this._colorScale = createScale({
|
141 | swatches: 3000,
|
142 | colorKeys: this._modifiedKeys,
|
143 | colorspace: this._colorspace,
|
144 | shift: 1,
|
145 | smooth: this._smooth,
|
146 | asFun: true,
|
147 | });
|
148 | }
|
149 | }
|
150 | export { Color };
|