mirror of
https://github.com/google/blockly.git
synced 2025-12-15 13:50:08 +01:00
4ab8d00099
* refactor(generators): Migrate javascript_generator.js to TypeScript * refactor(generators): Simplify getAdjusted Slightly simplify the implementation of getAdjusted, in part to make it more readable. Also improve its JSDoc comment. * refactor(generators): Migrate generators/javascript/* to TypeScript First pass doing very mechanistic migration, not attempting to fix all the resulting type errors. * fix(generators): Fix type errors in generator functions This consists almost entirely of adding casts, so the code output by tsc should be as similar as possible to the pre-migration .js source files. * refactor(generators): Migrate generators/javascript.js to TypeScript The way the generator functions are added to javascriptGenerator.forBlock has been modified so that incorrect generator function signatures will cause tsc to generate a type error. * chore(generator): Format One block protected with // prettier-ignore to preserve careful comment formatting. Where there are repeated concatenations prettier has made a pretty mess of things, but the correct fix is probably to use template literals instead (rather than just locally disabling prettier). This has been added to the to-do list in #7600. * fix(generators): Fixes for PR #7602 * fix(generators): Fix syntax error
102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2012 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* @fileoverview Generating JavaScript for colour blocks.
|
|
*/
|
|
|
|
// Former goog.module ID: Blockly.JavaScript.colour
|
|
|
|
import type {Block} from '../../core/block.js';
|
|
import type {JavascriptGenerator} from './javascript_generator.js';
|
|
import {Order} from './javascript_generator.js';
|
|
|
|
export function colour_picker(
|
|
block: Block,
|
|
generator: JavascriptGenerator,
|
|
): [string, Order] {
|
|
// Colour picker.
|
|
const code = generator.quote_(block.getFieldValue('COLOUR'));
|
|
return [code, Order.ATOMIC];
|
|
}
|
|
|
|
export function colour_random(
|
|
block: Block,
|
|
generator: JavascriptGenerator,
|
|
): [string, Order] {
|
|
// Generate a random colour.
|
|
const functionName = generator.provideFunction_(
|
|
'colourRandom',
|
|
`
|
|
function ${generator.FUNCTION_NAME_PLACEHOLDER_}() {
|
|
var num = Math.floor(Math.random() * Math.pow(2, 24));
|
|
return '#' + ('00000' + num.toString(16)).substr(-6);
|
|
}
|
|
`,
|
|
);
|
|
const code = functionName + '()';
|
|
return [code, Order.FUNCTION_CALL];
|
|
}
|
|
|
|
export function colour_rgb(
|
|
block: Block,
|
|
generator: JavascriptGenerator,
|
|
): [string, Order] {
|
|
// Compose a colour from RGB components expressed as percentages.
|
|
const red = generator.valueToCode(block, 'RED', Order.NONE) || 0;
|
|
const green = generator.valueToCode(block, 'GREEN', Order.NONE) || 0;
|
|
const blue = generator.valueToCode(block, 'BLUE', Order.NONE) || 0;
|
|
const functionName = generator.provideFunction_(
|
|
'colourRgb',
|
|
`
|
|
function ${generator.FUNCTION_NAME_PLACEHOLDER_}(r, g, b) {
|
|
r = Math.max(Math.min(Number(r), 100), 0) * 2.55;
|
|
g = Math.max(Math.min(Number(g), 100), 0) * 2.55;
|
|
b = Math.max(Math.min(Number(b), 100), 0) * 2.55;
|
|
r = ('0' + (Math.round(r) || 0).toString(16)).slice(-2);
|
|
g = ('0' + (Math.round(g) || 0).toString(16)).slice(-2);
|
|
b = ('0' + (Math.round(b) || 0).toString(16)).slice(-2);
|
|
return '#' + r + g + b;
|
|
}
|
|
`,
|
|
);
|
|
const code = functionName + '(' + red + ', ' + green + ', ' + blue + ')';
|
|
return [code, Order.FUNCTION_CALL];
|
|
}
|
|
|
|
export function colour_blend(
|
|
block: Block,
|
|
generator: JavascriptGenerator,
|
|
): [string, Order] {
|
|
// Blend two colours together.
|
|
const c1 = generator.valueToCode(block, 'COLOUR1', Order.NONE) || "'#000000'";
|
|
const c2 = generator.valueToCode(block, 'COLOUR2', Order.NONE) || "'#000000'";
|
|
const ratio = generator.valueToCode(block, 'RATIO', Order.NONE) || 0.5;
|
|
const functionName = generator.provideFunction_(
|
|
'colourBlend',
|
|
`
|
|
function ${generator.FUNCTION_NAME_PLACEHOLDER_}(c1, c2, ratio) {
|
|
ratio = Math.max(Math.min(Number(ratio), 1), 0);
|
|
var r1 = parseInt(c1.substring(1, 3), 16);
|
|
var g1 = parseInt(c1.substring(3, 5), 16);
|
|
var b1 = parseInt(c1.substring(5, 7), 16);
|
|
var r2 = parseInt(c2.substring(1, 3), 16);
|
|
var g2 = parseInt(c2.substring(3, 5), 16);
|
|
var b2 = parseInt(c2.substring(5, 7), 16);
|
|
var r = Math.round(r1 * (1 - ratio) + r2 * ratio);
|
|
var g = Math.round(g1 * (1 - ratio) + g2 * ratio);
|
|
var b = Math.round(b1 * (1 - ratio) + b2 * ratio);
|
|
r = ('0' + (r || 0).toString(16)).slice(-2);
|
|
g = ('0' + (g || 0).toString(16)).slice(-2);
|
|
b = ('0' + (b || 0).toString(16)).slice(-2);
|
|
return '#' + r + g + b;
|
|
}
|
|
`,
|
|
);
|
|
const code = functionName + '(' + c1 + ', ' + c2 + ', ' + ratio + ')';
|
|
return [code, Order.FUNCTION_CALL];
|
|
}
|