Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: add block definitions to colour field plugin #2162

Merged
merged 24 commits into from
Feb 12, 2024
Merged
Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
6a9e007
feat: export functions to register some angle, colour, and multiline …
rachel-fenichel Jan 24, 2024
a5a6b6b
feat: add block definitions to colour and multiline input fields
rachel-fenichel Jan 24, 2024
777ca2d
feat: add block generators for the colour_picker block
rachel-fenichel Jan 30, 2024
932fed7
fix: use Blockly.common.defineBlocksWithJsonArray
rachel-fenichel Jan 30, 2024
9f7f940
feat: add block generators for colour_random block
rachel-fenichel Jan 31, 2024
7dc93ef
feat: add generators type and standardize exports for block files
rachel-fenichel Jan 31, 2024
4c1df53
chore: update to blockly@beta and fix types
rachel-fenichel Jan 31, 2024
9e782d2
chore: move all colour blocks to separate files and add more generato…
rachel-fenichel Jan 31, 2024
b30ef1d
feat: finish adding block code generators for colour blocks
rachel-fenichel Jan 31, 2024
4b4e7e8
fix: PR feedback
rachel-fenichel Feb 5, 2024
218fc20
fix: remove immediate registration of blocks and fields in field_colour
rachel-fenichel Feb 6, 2024
80b0c8c
chore: use named imports and numbered TODOs
rachel-fenichel Feb 6, 2024
34db058
feat: add usage information about blocks to README
rachel-fenichel Feb 6, 2024
fec3c70
chore: revert changes outside of field_colour
rachel-fenichel Feb 6, 2024
e425bc7
chore: clean up tsdoc and exports
rachel-fenichel Feb 7, 2024
5f03921
cgire: clean up README
rachel-fenichel Feb 7, 2024
5e2b57d
chore: respond to PR feedback on names and comments
rachel-fenichel Feb 7, 2024
4f3d42c
feat(tests): add and improve tests
rachel-fenichel Feb 8, 2024
27294c1
chore(format): run formatter
rachel-fenichel Feb 8, 2024
f7c108f
fix: respond to PR feedback about names and file structure
rachel-fenichel Feb 9, 2024
f730619
fix: allow const variables to have UPPER_CASE names
rachel-fenichel Feb 9, 2024
60543e9
fix: respond to PR feedback
rachel-fenichel Feb 9, 2024
d87a677
chore: format
rachel-fenichel Feb 9, 2024
7080ac8
fix: line length
rachel-fenichel Feb 9, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,11 @@ module.exports = [
match: false,
},
},
{
selector: 'variable',
modifiers: ['const'],
format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
},
],
'@typescript-eslint/consistent-type-assertions': 'error',

Expand Down
1 change: 0 additions & 1 deletion plugins/block-dynamic-connection/src/dynamic_if.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ interface IfExtraState {
hasElse?: boolean;
}

/* eslint-disable @typescript-eslint/naming-convention */
const DYNAMIC_IF_MIXIN = {
/**
* Minimum number of inputs for this block.
Expand Down
2 changes: 0 additions & 2 deletions plugins/block-dynamic-connection/src/dynamic_list_create.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@ interface DynamicListCreateMixin extends DynamicListCreateMixinType {}
/* eslint-enable @typescript-eslint/no-empty-interface */
type DynamicListCreateMixinType = typeof DYNAMIC_LIST_CREATE_MIXIN;

/* eslint-disable @typescript-eslint/naming-convention */
const DYNAMIC_LIST_CREATE_MIXIN = {
/* eslint-enable @typescript-eslint/naming-convention */
/** Minimum number of inputs for this block. */
minInputs: 2,

Expand Down
2 changes: 0 additions & 2 deletions plugins/block-dynamic-connection/src/dynamic_text_join.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@ interface DynamicTextJoinMixin extends DynamicTextJoinMixinType {}
/* eslint-enable @typescript-eslint/no-empty-interface */
type DynamicTextJoinMixinType = typeof DYNAMIC_TEXT_JOIN_MIXIN;

/* eslint-disable @typescript-eslint/naming-convention */
const DYNAMIC_TEXT_JOIN_MIXIN = {
/* eslint-enable @typescript-eslint/naming-convention */
/** Minimum number of inputs for this block. */
minInputs: 2,

Expand Down
71 changes: 65 additions & 6 deletions plugins/field-colour/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# @blockly/field-colour [![Built on Blockly](https://tinyurl.com/built-on-blockly)](https://github.com/google/blockly)

A [Blockly](https://www.npmjs.com/package/blockly) colour field.
A [Blockly](https://www.npmjs.com/package/blockly) field and blocks for choosing and combining colours.

## Installation

Expand All @@ -18,7 +18,9 @@ npm install @blockly/field-colour --save

## Usage

This field accepts up to 4 parameters:
### Field

The colour field accepts up to 4 parameters:

- "colour" to specify the default colour. Defaults to the first value in the
"colourOptions" array. Should be a "#rrggbb" string.
Expand All @@ -30,11 +32,17 @@ This field accepts up to 4 parameters:
- "columns" to specify the number of columns the colour dropdown should have.
Defaults to 7.

### JavaScript
If you want to use only the field, you must register it with Blockly. You can
do this by calling `registerFieldColour` before instantiating your blocks. If
another field is registered under the same name, this field will overwrite it.

#### JavaScript

```js
import * as Blockly from 'blockly';
import {FieldColour} from '@blockly/field-colour';
import {registerFieldColour} from '@blockly/field-colour';

registerFieldColour();
Blockly.Blocks['test_field_colour'] = {
init: function () {
this.appendDummyInput()
Expand All @@ -44,11 +52,13 @@ Blockly.Blocks['test_field_colour'] = {
};
```

### JSON
#### JSON

```js
import * as Blockly from 'blockly';
import '@blockly/field-colour';
import {registerFieldColour} from '@blockly/field-colour';

registerFieldColour();
Blockly.defineBlocksWithJsonArray([
{
type: 'test_field_colour',
Expand All @@ -64,6 +74,55 @@ Blockly.defineBlocksWithJsonArray([
]);
```

### Blocks

This package also provides four blocks related to the colour field. Each block
has generators in JavaScript, Python, PHP, Lua, and Dart.

- "colour_blend" takes in two colours and a ratio and outputs a single colour.
- "colour_picker" is a simple block with just the colour field and an output.
- "colour_random" generates a random colour.
- "colour_rgb" generates a colour based on red, green, and blue values.

You can install all four blocks by calling `installAllBlocks`. This will
install the blocks and all of their dependencies, including the colour field.
When calling `installAllBlocks`—or any of the individual `installSomeBlock`
functions—you can supply one or more `CodeGenerator` instances (e.g.
`javascriptGenerator`), and the install function will also install the correct
generator function for each block for the corresponding language(s).

```js
import {javascriptGenerator} from 'blockly/javascript';
import {dartGenerator} from 'blockly/dart';
import {phpGenerator} from 'blockly/php';
import {pythonGenerator} from 'blockly/python';
import {luaGenerator} from 'blockly/lua';
import {installAllBlocks as installColourBlocks} from '@blockly/field-colour';

// Installs all four blocks, the colour field, and all of the language generators.
installColourBlocks({
javascript: javascriptGenerator,
dart: dartGenerator,
lua: luaGenerator,
python: pythonGenerator,
php: phpGenerator,
});
```

If you only want to install a single block, you can call that block's
`installBlock` function. The `generators` parameter is the same.

```js
import {javascriptGenerator} from 'blockly/javascript';
import {colourBlend} from '@blockly/field-colour';

// Installs the colour_blend block, the colour field,
// and the generator for colour_blend in JavaScript.
colourBlend.installBlock({
javascript: javascriptGenerator,
});
```

### API Reference

- `setColours`: Sets the colour options, and optionally the titles for the
Expand Down
Loading
Loading