Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions src/color/p5.Color.js
Original file line number Diff line number Diff line change
Expand Up @@ -364,26 +364,45 @@ class Color {
* </code>
* </div>
*/
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)
}
serializationMap.set(key, colorString);
}
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
Expand Down
59 changes: 51 additions & 8 deletions test/unit/color/p5.Color.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
});
});
Loading