From fba924d1253a5833ecd53e1b801f351c24c4e3d8 Mon Sep 17 00:00:00 2001 From: Dmitriy Antipov Date: Sat, 6 May 2023 02:04:13 +0300 Subject: [PATCH] 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 --------- Co-authored-by: Joey Wunderlich --- fieldeditors/field_color.ts | 16 +++++++++++++++- libs/color-sensor/ns.ts | 6 ++---- sim/visuals/controls/colorGrid.ts | 17 ++++++++++++----- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/fieldeditors/field_color.ts b/fieldeditors/field_color.ts index 8c6a2f14..a7330a19 100644 --- a/fieldeditors/field_color.ts +++ b/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 diff --git a/libs/color-sensor/ns.ts b/libs/color-sensor/ns.ts index 9b837b75..7bf4f847 100644 --- a/libs/color-sensor/ns.ts +++ b/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; } -} \ No newline at end of file +} \ No newline at end of file diff --git a/sim/visuals/controls/colorGrid.ts b/sim/visuals/controls/colorGrid.ts index dcf8f0d7..5e98139d 100644 --- a/sim/visuals/controls/colorGrid.ts +++ b/sim/visuals/controls/colorGrid.ts @@ -5,8 +5,8 @@ namespace pxsim.visuals { export class ColorGridControl extends ControlView { private group: SVGGElement; - private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white']; - private static colorValue = [5, 4, 2, 3, 1, 7, 6]; + private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white', 'none']; + 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` }); - this.colorDivs.push(circle); - pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` }); + const noneCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'nothing-circle-wrapper' }); + 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` }); + 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; }