Skip to content

Commit

Permalink
add colour field plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@riknoll
riknoll committed Apr 30, 2024
1 parent c4f9482 commit 79786ab
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 109 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
"npm": ">=8.0.0"
},
"dependencies": {
"@blockly/field-colour": "^4.0.2",
"@blockly/keyboard-navigation": "0.5.4",
"@blockly/plugin-workspace-search": "8.0.9",
"@crowdin/crowdin-api-client": "^1.33.0",
Expand Down
4 changes: 2 additions & 2 deletions pxtblocks/fields/fieldEditorRegistry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { FieldTextInput } from "./field_textinput";
import { FieldCustom, FieldCustomConstructor } from "./field_utils";
import { FieldSpriteEditor } from "./field_sprite";
import { FieldGridPicker } from "./field_gridpicker";
// import { FieldColorNumber } from "./field_colour";
import { FieldColorNumber } from "./field_colour";
import { FieldImages } from "./field_images";
import { FieldTextDropdown } from "./field_textdropdown";
import { FieldNumberDropdown } from "./field_numberdropdown";
Expand Down Expand Up @@ -53,7 +53,7 @@ export function initFieldEditors() {
registerFieldEditor('toggledownup', FieldToggleDownUp);
registerFieldEditor('togglehighlow', FieldToggleHighLow);
registerFieldEditor('togglewinlose', FieldToggleWinLose);
// registerFieldEditor('colornumber', FieldColorNumber);
registerFieldEditor('colornumber', FieldColorNumber);
registerFieldEditor('images', FieldImages);
registerFieldEditor('sprite', FieldSpriteEditor);
registerFieldEditor('animation', FieldAnimationEditor);
Expand Down
216 changes: 109 additions & 107 deletions pxtblocks/fields/field_colour.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import * as Blockly from "blockly";
import { FieldCustom, FieldCustomOptions } from "./field_utils";

import { FieldColour } from "@blockly/field-colour";

/**
* The value modes:
* hex - Outputs an HTML color string: "#ffffff" (with quotes)
Expand All @@ -18,113 +20,113 @@ export interface FieldColourNumberOptions extends FieldCustomOptions {
valueMode?: FieldColourValueMode;
}

// export class FieldColorNumber extends Blockly.FieldColour implements FieldCustom {
// public isFieldCustom_ = true;

// protected colour_: string;
// private valueMode_: FieldColourValueMode = "rgb";
// protected colours_: string[];

// constructor(text: string, params: FieldColourNumberOptions, opt_validator?: Blockly.FieldValidator) {
// super(text, opt_validator);

// if (params.colours)
// this.setColours(JSON.parse(params.colours));
// else if (pxt.appTarget.runtime && pxt.appTarget.runtime.palette) {
// let p = pxt.Util.clone(pxt.appTarget.runtime.palette);
// p[0] = "#dedede";
// let t;
// if (pxt.appTarget.runtime.paletteNames) {
// t = pxt.Util.clone(pxt.appTarget.runtime.paletteNames);
// t[0] = lf("transparent");
// }
// this.setColours(p, t);
// }

// // Set to first color in palette (for toolbox)
// this.setValue(this.getColours_()[0]);

// if (params.columns) this.setColumns(parseInt(params.columns));
// if (params.valueMode) this.valueMode_ = params.valueMode;
// }

// setColours(colours: string[], titles?: string[]): Blockly.FieldColour {
// const s = super.setColours(colours, titles);
// this.colours_ = colours;
// return s;
// }


// doClassValidation_(colour: string) {
// return "string" != typeof colour ? null : parseColour(colour, this.getColours_());
// }

// /**
// * 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) {
// if (opt_asHex) return this.value_;
// switch (this.valueMode_) {
// case "hex":
// return `"${this.value_}"`;
// case "rgb":
// if (this.value_.indexOf('#') > -1) {
// return `0x${this.value_.replace(/^#/, '')}`;
// }
// else {
// return this.value_;
// }
// case "index":
// if (!this.value_) return "-1";
// const allColours = this.getColours_();
// for (let i = 0; i < allColours.length; i++) {
// if (this.value_.toUpperCase() === allColours[i].toUpperCase()) {
// return i + "";
// }
// }
// }
// return this.value_;
// }

// /**
// * Set the colour.
// * @param {string} colour The new colour in '#rrggbb' format.
// */
// doValueUpdate_(colour: string) {
// super.doValueUpdate_(parseColour(colour, this.getColours_()))
// // this.applyColour();
// }

// getColours_(): string[] {
// return this.colours_;
// }

// override applyColour() {
// const block = this.getSourceBlock() as Blockly.BlockSvg | null;
// if (!block) throw new Blockly.UnattachedFieldError();

// if (!this.fieldGroup_) return;

// const borderRect = this.borderRect_;
// if (!borderRect) {
// throw new Error('The border rect has not been initialized');
// }

// if (!this.isFullBlockField()) {
// borderRect.style.display = 'block';
// borderRect.style.fill = this.getValue() as string;
// } else {
// borderRect.style.display = 'none';
// // In general, do *not* let fields control the color of blocks. Having the
// // field control the color is unexpected, and could have performance
// // impacts.
// block.pathObject.svgPath.setAttribute('fill', parseColour(this.getValue(), this.getColours_()));
// block.pathObject.svgPath.setAttribute('stroke', '#fff');
// }
// }
// }
export class FieldColorNumber extends FieldColour implements FieldCustom {
public isFieldCustom_ = true;

protected colour_: string;
private valueMode_: FieldColourValueMode = "rgb";
protected colours_: string[];

constructor(text: string, params: FieldColourNumberOptions, opt_validator?: Blockly.FieldValidator) {
super(text, opt_validator);

if (params.colours)
this.setColours(JSON.parse(params.colours));
else if (pxt.appTarget.runtime && pxt.appTarget.runtime.palette) {
let p = pxt.Util.clone(pxt.appTarget.runtime.palette);
p[0] = "#dedede";
let t;
if (pxt.appTarget.runtime.paletteNames) {
t = pxt.Util.clone(pxt.appTarget.runtime.paletteNames);
t[0] = lf("transparent");
}
this.setColours(p, t);
}

// Set to first color in palette (for toolbox)
this.setValue(this.getColours_()[0]);

if (params.columns) this.setColumns(parseInt(params.columns));
if (params.valueMode) this.valueMode_ = params.valueMode;
}

setColours(colours: string[], titles?: string[]): FieldColour {
const s = super.setColours(colours, titles);
this.colours_ = colours;
return s;
}


doClassValidation_(colour: string) {
return "string" != typeof colour ? null : parseColour(colour, this.getColours_());
}

/**
* 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) {
if (opt_asHex) return this.value_;
switch (this.valueMode_) {
case "hex":
return `"${this.value_}"`;
case "rgb":
if (this.value_.indexOf('#') > -1) {
return `0x${this.value_.replace(/^#/, '')}`;
}
else {
return this.value_;
}
case "index":
if (!this.value_) return "-1";
const allColours = this.getColours_();
for (let i = 0; i < allColours.length; i++) {
if (this.value_.toUpperCase() === allColours[i].toUpperCase()) {
return i + "";
}
}
}
return this.value_;
}

/**
* Set the colour.
* @param {string} colour The new colour in '#rrggbb' format.
*/
doValueUpdate_(colour: string) {
super.doValueUpdate_(parseColour(colour, this.getColours_()))
// this.applyColour();
}

getColours_(): string[] {
return this.colours_;
}

override applyColour() {
const block = this.getSourceBlock() as Blockly.BlockSvg | null;
if (!block) throw new Blockly.UnattachedFieldError();

if (!this.fieldGroup_) return;

const borderRect = this.borderRect_;
if (!borderRect) {
throw new Error('The border rect has not been initialized');
}

if (!this.isFullBlockField()) {
borderRect.style.display = 'block';
borderRect.style.fill = this.getValue() as string;
} else {
borderRect.style.display = 'none';
// In general, do *not* let fields control the color of blocks. Having the
// field control the color is unexpected, and could have performance
// impacts.
block.pathObject.svgPath.setAttribute('fill', parseColour(this.getValue(), this.getColours_()));
block.pathObject.svgPath.setAttribute('stroke', '#fff');
}
}
}

function parseColour(colour: string, allColours: string[]) {
if (colour) {
Expand Down

0 comments on commit 79786ab

Please sign in to comment.