Use a color picker for the color field (color enum picker) (#346)

This commit is contained in:
Sam El-Husseini
2018-02-26 13:37:58 -08:00
committed by GitHub
parent cda7013e96
commit a021c0b292
6 changed files with 129 additions and 30 deletions

View File

@ -7,6 +7,7 @@ import { FieldImages } from "./field_images";
import { FieldSpeed } from "./field_speed";
import { FieldBrickButtons } from "./field_brickbuttons";
import { FieldTurnRatio } from "./field_turnratio";
import { FieldColorEnum } from "./field_color";
pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): Promise<pxt.editor.ExtensionResult> {
pxt.debug('loading pxt-ev3 target extensions...')
@ -27,6 +28,9 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
}, {
selector: "turnratio",
editor: FieldTurnRatio
}, {
selector: "colorenum",
editor: FieldColorEnum
}],
deployCoreAsync,
showUploadInstructionsAsync: (fn: string, url: string, confirmAsync: (options: any) => Promise<number>) => {

71
editor/field_color.ts Normal file
View File

@ -0,0 +1,71 @@
/// <reference path="../node_modules/pxt-core/localtypings/blockly.d.ts"/>
/// <reference path="../node_modules/pxt-core/built/pxtsim.d.ts"/>
export interface FieldColorEnumOptions extends pxtblockly.FieldColourNumberOptions {
}
export class FieldColorEnum extends pxtblockly.FieldColorNumber implements Blockly.FieldCustom {
public isFieldCustom_ = true;
constructor(text: string, params: FieldColorEnumOptions, opt_validator?: Function) {
super(text, params, opt_validator);
}
mapColour(enumString: string) {
switch(enumString) {
case '#000000': return 'ColorSensorColor.Black';
case '#006db3': return 'ColorSensorColor.Blue';
case '#00934b': return 'ColorSensorColor.Green';
case '#ffd01b': return 'ColorSensorColor.Yellow';
case '#f12a21': return 'ColorSensorColor.Red';
case '#ffffff': return 'ColorSensorColor.White';
case '#6c2d00': return 'ColorSensorColor.Brown';
default: return 'ColorSensorColor.None';
}
}
mapEnum(colorString: string) {
console.log(colorString);
switch(colorString) {
case 'ColorSensorColor.Black': return '#000000';
case 'ColorSensorColor.Blue': return '#006db3';
case 'ColorSensorColor.Green': return '#00934b';
case 'ColorSensorColor.Yellow': return '#ffd01b';
case 'ColorSensorColor.Red': return '#f12a21';
case 'ColorSensorColor.White': return '#ffffff';
case 'ColorSensorColor.Brown': return '#6c2d00';
case 'ColorSensorColor.None': return '#dfe6e9'; // Grey
default: return colorString;
}
}
/**
* Return the current colour.
* @param {boolean} opt_asHex optional field if the returned value should be a hex
* @return {string} Current colour in '#rrggbb' format.
*/
getValue(opt_asHex?: boolean) {
var colour = this.mapColour(this.colour_);
if (!opt_asHex && colour.indexOf('#') > -1) {
return `0x${colour.replace(/^#/, '')}`;
}
return colour;
}
/**
* Set the colour.
* @param {string} colour The new colour in '#rrggbb' format.
*/
setValue(colorStr: string) {
var colour = this.mapEnum(colorStr);
if (this.sourceBlock_ && Blockly.Events.isEnabled() &&
this.colour_ != colour) {
Blockly.Events.fire(new (Blockly as any).Events.BlockChange(
this.sourceBlock_, 'field', this.name, this.colour_, colour));
}
this.colour_ = colour;
if (this.sourceBlock_) {
this.sourceBlock_.setColour(colour, colour, colour);
}
}
}