library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

diplay string of color to matches input, fix #117

Browse Source
This commit is contained in:
Jeff Nusz 2016-11-14 10:53:50 -08:00
parent 1d17cb0497
commit a88a2461d8
3 changed files with 43 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/dat/color/Color.js
View File

@ -31,6 +31,10 @@ class Color {
return colorToString(this); return colorToString(this);
} }
toHexString() {
return colorToString(this, true);
}
toOriginal() { toOriginal() {
return this.__state.conversion.write(this); return this.__state.conversion.write(this);
} }

42
src/dat/color/toString.js
View File

@ -11,16 +11,42 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
*/ */
import common from '../utils/common'; export default function(color, forceCSSHex) {
const colorFormat = color.__state.conversionName.toString();
export default function(color) { const r = Math.round(color.r);
if (color.a === 1 || common.isUndefined(color.a)) { const g = Math.round(color.g);
let s = color.hex.toString(16); const b = Math.round(color.b);
while (s.length < 6) { const a = color.a;
s = '0' + s; const h = Math.round(color.h);
const s = color.s.toFixed(1);
const v = color.v.toFixed(1);
if (forceCSSHex || (colorFormat === 'THREE_CHAR_HEX') || (colorFormat === 'SIX_CHAR_HEX')) {
let str = color.hex.toString(16);
while (str.length < 6) {
str = '0' + str;
} }
return '#' + s; return '#' + str;
} else if (colorFormat === 'CSS_RGB') {
return 'rgb(' + r + ',' + g + ',' + b + ')';
} else if (colorFormat === 'CSS_RGBA') {
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
} else if (colorFormat === 'HEX') {
return '0x' + color.hex.toString(16);
} else if (colorFormat === 'RGB_ARRAY') {
return '[' + r + ',' + g + ',' + b + ']';
} else if (colorFormat === 'RGBA_ARRAY') {
return '[' + r + ',' + g + ',' + b + ',' + a + ']';
} else if (colorFormat === 'RGB_OBJ') {
return '{r:' + r + ',g:' + g + ',b:' + b + '}';
} else if (colorFormat === 'RGBA_OBJ') {
return '{r:' + r + ',g:' + g + ',b:' + b + ',a:' + a + '}';
} else if (colorFormat === 'HSV_OBJ') {
return '{h:' + h + ',s:' + s + ',v:' + v + '}';
} else if (colorFormat === 'HSVA_OBJ') {
return '{h:' + h + ',s:' + s + ',v:' + v + ',a:' + a + '}';
} }
return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')'; return 'unknown format';
} }

8
src/dat/controllers/ColorController.js
View File

@ -272,7 +272,7 @@ class ColorController extends Controller {
common.extend(this.__field_knob.style, { common.extend(this.__field_knob.style, {
marginLeft: 100 * this.__color.s - 7 + 'px', marginLeft: 100 * this.__color.s - 7 + 'px',
marginTop: 100 * (1 - this.__color.v) - 7 + 'px', marginTop: 100 * (1 - this.__color.v) - 7 + 'px',
backgroundColor: this.__temp.toString(), backgroundColor: this.__temp.toHexString(),
border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')' border: this.__field_knob_border + 'rgb(' + flip + ',' + flip + ',' + flip + ')'
}); });
@ -281,10 +281,12 @@ class ColorController extends Controller {
this.__temp.s = 1; this.__temp.s = 1;
this.__temp.v = 1; this.__temp.v = 1;
linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toString()); linearGradient(this.__saturation_field, 'left', '#fff', this.__temp.toHexString());
this.__input.value = this.__color.toString();
common.extend(this.__input.style, { common.extend(this.__input.style, {
backgroundColor: this.__input.value = this.__color.toString(), backgroundColor: this.__color.toHexString(),
color: 'rgb(' + flip + ',' + flip + ',' + flip + ')', color: 'rgb(' + flip + ',' + flip + ',' + flip + ')',
textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)' textShadow: this.__input_textShadow + 'rgba(' + _flip + ',' + _flip + ',' + _flip + ',.7)'
}); });