Add a none option to the simulator for the color sensor and colorEnumPicker extension (#1018)

* Update colorGrid.ts

* Update ns.ts

Added option to select emptiness (nothing) for the colorEnumPicker block.

* set-new-names-for-color-cells

Set new names for colored cells that pops up when hovering over an element. So the user will understand the color.

* Update sim/visuals/controls/colorGrid.ts

Co-authored-by: Joey Wunderlich <jwunderl@users.noreply.github.com>

---------

Co-authored-by: Joey Wunderlich <jwunderl@users.noreply.github.com>

fieldeditors/field_color.ts

@@ -5,10 +5,14 @@ export interface FieldColorEnumOptions extends pxtblockly.FieldColourNumberOptio
 }
 
 export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Blockly.FieldCustom {
+
     public isFieldCustom_ = true;
+    private paramsData: any[];
 
     constructor(text: string, params: FieldColorEnumOptions, opt_validator?: Function) {
         super(text, params, opt_validator);
+
+        this.paramsData = params["data"];
     }
 
     mapColour(enumString: string) {
@@ -33,11 +37,21 @@ export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Block
             case 'ColorSensorColor.Red': return '#f12a21';
             case 'ColorSensorColor.White': return '#ffffff';
             case 'ColorSensorColor.Brown': return '#6c2d00';
-            case 'ColorSensorColor.None': return '#dfe6e9'; // Grey
+            case 'ColorSensorColor.None': return '#dfe6e9';
             default: return colorString;
         }
     }
 
+    showEditor_() {
+        super.showEditor_();
+        const colorCells = document.querySelectorAll('.legoColorPicker td');
+        colorCells.forEach((cell) => {
+            const titleName = this.mapColour(cell.getAttribute("title"));
+            const index = this.paramsData.findIndex(item => item[1] === titleName);
+            cell.setAttribute("title", this.paramsData[index][0]);
+        });
+    }
+
     /**
      * Return the current colour.
      * @param {boolean} opt_asHex optional field if the returned value should be a hex

libs/color-sensor/ns.ts

@@ -1,5 +1,3 @@
-
-
 namespace sensors {
 
     /**
@@ -9,9 +7,9 @@ namespace sensors {
     //% blockId=colorEnumPicker block="%color" shim=TD_ID
     //% weight=0 blockHidden=1 turnRatio.fieldOptions.decompileLiterals=1
     //% color.fieldEditor="colorenum"
-    //% color.fieldOptions.colours='["#f12a21", "#ffd01b", "#006db3", "#00934b", "#000000", "#6c2d00", "#ffffff"]'
+    //% color.fieldOptions.colours='["#f12a21", "#ffd01b", "#006db3", "#00934b", "#000000", "#6c2d00", "#ffffff", "#dfe6e9"]'
     //% color.fieldOptions.columns=2 color.fieldOptions.className='legoColorPicker'
     export function __colorEnumPicker(color: ColorSensorColor): number {
         return color;
     }
-}
+}                       

sim/visuals/controls/colorGrid.ts

@@ -5,8 +5,8 @@ namespace pxsim.visuals {
     export class ColorGridControl extends ControlView<ColorSensorNode> {
         private group: SVGGElement;
 
-        private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white'];
+        private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white', 'none'];
-        private static colorValue = [5, 4, 2, 3, 1, 7, 6];
+        private static colorValue = [5, 4, 2, 3, 1, 7, 6, 0];
 
         private colorDivs: Element[] = [];
 
@@ -33,12 +33,19 @@ namespace pxsim.visuals {
             }
 
             const whiteCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'white-cirlce-wrapper' });
-            const circle = pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
+            const noneCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'nothing-circle-wrapper' });
-            this.colorDivs.push(circle);
+            const whiteCircle = pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
-            pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` });
+            const noneCircle = pxsim.svg.child(noneCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-none', 'cx': 7.5, 'cy': '16', 'r': '2', 'style': `fill: #fff; fill-opacity: 0%;` });
+            this.colorDivs.push(whiteCircle);
+            this.colorDivs.push(noneCircle);
+            pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none; stroke: #94989b; stroke-width: 0.1px` });
+            pxsim.svg.child(noneCircleWrapper, "circle", { 'cx': 7.5, 'cy': '16', 'r': '2', 'style': `fill: none; stroke: #94989b; stroke-width: 0.1px` });
             pointerEvents.down.forEach(evid => whiteCircleWrapper.addEventListener(evid, ev => {
                 this.setColor(6);
             }));
+            pointerEvents.down.forEach(evid => noneCircleWrapper.addEventListener(evid, ev => {
+                this.setColor(0);
+            }));
             return this.group;
         }