Merge pull request #8363 from Piyushrathoree/fix-createColorPicker-ignore-initial-color

fix  createColorPicker ignores initial colour arg on chrome

Author: davepagurek

src/color/p5.Color.js

@@ -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

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');
+      });
+    });
   });
 });