diff --git a/src/color/p5.Color.js b/src/color/p5.Color.js index 05e1e9141f..64051db509 100644 --- a/src/color/p5.Color.js +++ b/src/color/p5.Color.js @@ -364,18 +364,38 @@ class Color { * * */ - toString(format) { - if (format === undefined && this._defaultStringValue !== undefined) { + toString(format) { + if (format === undefined && this._defaultStringValue !== undefined) { return this._defaultStringValue; + } + + let outputFormat = format; + if (format === '#rrggbb') { + outputFormat = 'hex'; } const key = `${this._color.space.id}-${this._color.coords.join(',')}-${this._color.alpha}-${format}`; let colorString = serializationMap.get(key); - if(!colorString){ + if (!colorString) { colorString = serialize(this._color, { - format + format: outputFormat }); + + if (format === '#rrggbb') { + colorString = String(colorString); + if (colorString.length === 4) { + const r = colorString[1]; + const g = colorString[2]; + const b = colorString[3]; + colorString = `#${r}${r}${g}${g}${b}${b}`; + } + if (colorString.length > 7) { + colorString = colorString.slice(0, 7); + } + colorString = colorString.toLowerCase(); + } + if (serializationMap.size > 1000) { serializationMap.delete(serializationMap.keys().next().value) } @@ -383,7 +403,6 @@ class Color { } return colorString; } - /** * Checks the contrast between two colors. This method returns a boolean * value to indicate if the two color has enough contrast. `true` means that diff --git a/test/unit/color/p5.Color.js b/test/unit/color/p5.Color.js index d158931718..73604d595a 100644 --- a/test/unit/color/p5.Color.js +++ b/test/unit/color/p5.Color.js @@ -791,15 +791,58 @@ suite('p5.Color', function() { }); }); - suite.todo('p5.Color.prototype.toString', function() { - // var colorStr; + suite('p5.Color.prototype.toString', function() { + suite('#rrggbb format', function() { + test('should expand short hex (#rgb) to full 6-digit format', function() { + mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255); + const c = mockP5Prototype.color('#f06'); + const result = c.toString('#rrggbb'); + assert.equal(result, '#ff0066'); + }); + + test('should truncate hex with alpha (#rrggbbaa) to 6 digits', function() { + mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255); + const c = mockP5Prototype.color(255, 0, 102, 128); + const result = c.toString('#rrggbb'); + assert.equal(result.length, 7); + assert.equal(result, '#ff0066'); + }); + + test('should output lowercase hex string', function() { + mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255); + const c = mockP5Prototype.color(255, 170, 187); + const result = c.toString('#rrggbb'); + assert.equal(result, result.toLowerCase()); + assert.equal(result, '#ffaabb'); + }); + + test('should correctly format standard RGB colors', function() { + mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255); + const c = mockP5Prototype.color(255, 0, 102); + const result = c.toString('#rrggbb'); + assert.equal(result, '#ff0066'); + }); + + test('should correctly format black color', function() { + mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255); + const c = mockP5Prototype.color(0, 0, 0); + const result = c.toString('#rrggbb'); + assert.equal(result, '#000000'); + }); - // beforeEach(function() { - // mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255); - // c = mockP5Prototype.color(128, 0, 128, 128); - // colorStr = c.toString(); - // }); + test('should correctly format white color', function() { + mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255); + const c = mockP5Prototype.color(255, 255, 255); + const result = c.toString('#rrggbb'); + assert.equal(result, '#ffffff'); + }); - // NOTE: need some tests here + test('should handle colors created from 6-digit hex string', function() { + mockP5Prototype.colorMode(mockP5Prototype.RGB, 255, 255, 255, 255); + const c = mockP5Prototype.color('#9932cc'); + const result = c.toString('#rrggbb'); + assert.equal(result, '#9932cc'); + }); + }); }); });