Browse Source

use different colour conversion

master
f0x 3 months ago
parent
commit
5db2c75828
3 changed files with 17 additions and 30 deletions
  1. 2
    30
      components/input.js
  2. 1
    0
      package.json
  3. 14
    0
      shrinkwrap.yaml

+ 2
- 30
components/input.js View File

@@ -3,6 +3,7 @@ const React = require('react')
3 3
 const ReactDOM = require('react-dom')
4 4
 const create = require('create-react-class')
5 5
 const Promise = require('bluebird')
6
+const colorConvert = require('color-convert')
6 7
 
7 8
 let input = create({
8 9
   displayName: "Input",
@@ -126,39 +127,10 @@ function rainbowTransform(text) {
126 127
     if (h > 360) {
127 128
       h = 0;
128 129
     }
129
-    return `<font color="${hslToHex(h, 100, 50)}">${char}</font>`;
130
+    return `<font color="${colorConvert.hsl.hex(h, 100, 50)}">${char}</font>`;
130 131
   });
131 132
   let rainbow = rainbowArray.join("");
132 133
   return rainbow;
133 134
 }
134 135
 
135
-function hslToHex(h, s, l) {
136
-  h /= 360;
137
-  s /= 100;
138
-  l /= 100;
139
-  let r, g, b;
140
-  if (s === 0) {
141
-    r = g = b = l; // achromatic
142
-  } else {
143
-    const hue2rgb = (p, q, t) => {
144
-      if (t < 0) t += 1;
145
-      if (t > 1) t -= 1;
146
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
147
-      if (t < 1 / 2) return q;
148
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
149
-      return p;
150
-    };
151
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
152
-    const p = 2 * l - q;
153
-    r = hue2rgb(p, q, h + 1 / 3);
154
-    g = hue2rgb(p, q, h);
155
-    b = hue2rgb(p, q, h - 1 / 3);
156
-  }
157
-  const toHex = x => {
158
-    const hex = Math.round(x * 255).toString(16);
159
-    return hex.length === 1 ? '0' + hex : hex;
160
-  };
161
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
162
-}
163
-
164 136
 module.exports = input

+ 1
- 0
package.json View File

@@ -17,6 +17,7 @@
17 17
     "blueimp-canvas-to-blob": "^3.14.0",
18 18
     "browserify": "^16.2.3",
19 19
     "budo": "^11.5.0",
20
+    "color-convert": "^2.0.0",
20 21
     "create-react-class": "^15.6.3",
21 22
     "debounce": "^1.2.0",
22 23
     "default-value": "^1.0.0",

+ 14
- 0
shrinkwrap.yaml View File

@@ -7,6 +7,7 @@ dependencies:
7 7
   blueimp-canvas-to-blob: 3.14.0
8 8
   browserify: 16.2.3
9 9
   budo: 11.5.0
10
+  color-convert: 2.0.0
10 11
   create-react-class: 15.6.3
11 12
   debounce: 1.2.0
12 13
   default-value: 1.0.0
@@ -2308,10 +2309,22 @@ packages:
2308 2309
     dev: false
2309 2310
     resolution:
2310 2311
       integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
2312
+  /color-convert/2.0.0:
2313
+    dependencies:
2314
+      color-name: 1.1.4
2315
+    dev: false
2316
+    engines:
2317
+      node: '>=7.0.0'
2318
+    resolution:
2319
+      integrity: sha512-hzTicsCJIHdxih9+2aLR1tNGZX5qSJGRHDPVwSY26tVrEf55XNajLOBWz2UuWSIergszA09/bqnOiHyqx9fxQg==
2311 2320
   /color-name/1.1.3:
2312 2321
     dev: false
2313 2322
     resolution:
2314 2323
       integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
2324
+  /color-name/1.1.4:
2325
+    dev: false
2326
+    resolution:
2327
+      integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
2315 2328
   /color-support/1.1.3:
2316 2329
     hasBin: true
2317 2330
     resolution:
@@ -9633,6 +9646,7 @@ specifiers:
9633 9646
   blueimp-canvas-to-blob: ^3.14.0
9634 9647
   browserify: ^16.2.3
9635 9648
   budo: ^11.5.0
9649
+  color-convert: ^2.0.0
9636 9650
   create-react-class: ^15.6.3
9637 9651
   debounce: ^1.2.0
9638 9652
   default-value: ^1.0.0

Loading…
Cancel
Save