Skip to content

Commit

Permalink
feat: upgrade fields to use new JSO hooks (google#5077)
Browse files Browse the repository at this point in the history
* Upgrade field angle to use new serialization

* Upgrade field checkbox to use new serialization

* Upgrade field colour to use new serialization

* Upgrade field dropdown to use new serialization

* Upgrade serializable label field to use new serialization

* Upgrade field multiline input to use new serialization

* Upgrade field number to use new serialization

* Upgrade field text input to use new serialization

* Upgrade variable field to use new serialization

* Fix type casts

* Feedback from PR

* Switch to use getValue()
  • Loading branch information
BeksOmega committed Sep 13, 2021
1 parent da97619 commit e057da1
Show file tree
Hide file tree
Showing 19 changed files with 451 additions and 2 deletions.
22 changes: 20 additions & 2 deletions core/field_angle.js
Original file line number Diff line number Diff line change
Expand Up @@ -241,8 +241,6 @@ Blockly.FieldAngle.prototype.configure_ = function(config) {
}
};



/**
* Create the block UI for this field.
* @package
Expand All @@ -256,6 +254,26 @@ Blockly.FieldAngle.prototype.initView = function() {
this.textElement_.appendChild(this.symbol_);
};

/**
* Saves this field's value.
* @return {number} The angle value held by this field.
* @override
* @package
*/
Blockly.FieldAngle.prototype.saveState = function() {
return /** @type {number} */ (this.getValue());
};

/**
* Sets the field's value based on the given state.
* @param {*} state The state to apply to the angle field.
* @override
* @package
*/
Blockly.FieldAngle.prototype.loadState = function(state) {
this.setValue(state);
};

/**
* Updates the graph when the field rerenders.
* @protected
Expand Down
20 changes: 20 additions & 0 deletions core/field_checkbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,26 @@ FieldCheckbox.prototype.configure_ = function(config) {
}
};

/**
* Saves this field's value.
* @return {boolean} The boolean value held by this field.
* @override
* @package
*/
FieldCheckbox.prototype.saveState = function() {
return /** @type {boolean} */ (this.getValueBoolean());
};

/**
* Sets the field's value based on the given state.
* @param {*} state The state to apply to the checkbox field.
* @override
* @package
*/
FieldCheckbox.prototype.loadState = function(state) {
this.setValue(state);
};

/**
* Create the block UI for this checkbox.
* @package
Expand Down
20 changes: 20 additions & 0 deletions core/field_colour.js
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,26 @@ FieldColour.prototype.initView = function() {
}
};

/**
* Saves this field's value.
* @return {string} The colour value held by this field.
* @override
* @package
*/
FieldColour.prototype.saveState = function() {
return /** @type {string} */ (this.getValue());
};

/**
* Sets the field's value based on the given state.
* @param {*} state The state to apply to the colour field.
* @override
* @package
*/
FieldColour.prototype.loadState = function(state) {
this.setValue(state);
};

/**
* @override
*/
Expand Down
23 changes: 23 additions & 0 deletions core/field_dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,29 @@ FieldDropdown.prototype.fromXml = function(fieldElement) {
this.setValue(fieldElement.textContent);
};

/**
* Saves this field's value.
* @return {string} The dropdown value held by this field.
* @override
* @package
*/
FieldDropdown.prototype.saveState = function() {
return /** @type {string} */ (this.getValue());
};

/**
* Sets the field's value based on the given state.
* @param {*} state The state to apply to the dropdown field.
* @override
* @package
*/
FieldDropdown.prototype.loadState = function(state) {
if (this.isOptionListDynamic()) {
this.getOptions(false);
}
this.setValue(state);
};

/**
* Serializable fields are saved by the XML renderer, non-serializable fields
* are not. Editable fields should also be serializable.
Expand Down
20 changes: 20 additions & 0 deletions core/field_label_serializable.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,26 @@ FieldLabelSerializable.prototype.EDITABLE = false;
*/
FieldLabelSerializable.prototype.SERIALIZABLE = true;

/**
* Saves this field's value.
* @return {string} The text value held by this field.
* @override
* @package
*/
FieldLabelSerializable.prototype.saveState = function() {
return /** @type {string} */ (this.getValue());
};

/**
* Sets the field's value based on the given state.
* @param {*} state The state to apply to the label field.
* @override
* @package
*/
FieldLabelSerializable.prototype.loadState = function(state) {
this.setValue(state);
};

fieldRegistry.register('field_label_serializable', FieldLabelSerializable);

exports = FieldLabelSerializable;
20 changes: 20 additions & 0 deletions core/field_multilineinput.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,26 @@ FieldMultilineInput.prototype.fromXml = function(fieldElement) {
this.setValue(fieldElement.textContent.replace(/
/g, '\n'));
};

/**
* Saves this field's value.
* @return {string} The text value held by this field.
* @override
* @package
*/
FieldMultilineInput.prototype.saveState = function() {
return /** @type {string} */ (this.getValue());
};

/**
* Sets the field's value based on the given state.
* @param {*} state The state to apply to the multiline input field.
* @override
* @package
*/
FieldMultilineInput.prototype.loadState = function(state) {
this.setValue(state);
};

/**
* Create the block UI for this field.
* @package
Expand Down
20 changes: 20 additions & 0 deletions core/field_number.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,26 @@ FieldNumber.prototype.configure_ = function(config) {
this.setPrecisionInternal_(config['precision']);
};

/**
* Saves this field's value.
* @return {number} The number value held by this field.
* @override
* @package
*/
FieldNumber.prototype.saveState = function() {
return /** @type {number} */ (this.getValue());
};

/**
* Sets the field's value based on the given state.
* @param {*} state The state to apply to the nuber field.
* @override
* @package
*/
FieldNumber.prototype.loadState = function(state) {
this.setValue(state);
};

/**
* Set the maximum, minimum and precision constraints on this field.
* Any of these properties may be undefined or NaN to be disabled.
Expand Down
20 changes: 20 additions & 0 deletions core/field_textinput.js
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,26 @@ FieldTextInput.prototype.initView = function() {
this.createTextElement_();
};

/**
* Saves this field's value.
* @return {*} The text value held by this field.
* @override
* @package
*/
FieldTextInput.prototype.saveState = function() {
return this.getValue();
};

/**
* Sets the field's value based on the given state.
* @param {*} state The state to apply to the text input field.
* @override
* @package
*/
FieldTextInput.prototype.loadState = function(state) {
this.setValue(state);
};

/**
* Ensure that the input value casts to a valid string.
* @param {*=} opt_newValue The input value.
Expand Down
22 changes: 22 additions & 0 deletions core/field_variable.js
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,28 @@ FieldVariable.prototype.toXml = function(fieldElement) {
return fieldElement;
};

/**
* Saves this field's value.
* @return {string} The id of the variable referenced by this field.
* @override
* @package
*/
FieldVariable.prototype.saveState = function() {
// Make sure the variable is initialized.
this.initModel();
return this.variable_.getId();
};

/**
* Sets the field's value based on the given state.
* @param {*} id The id of the variable to assign to this variable field.
* @override
* @package
*/
FieldVariable.prototype.loadState = function(id) {
this.setValue(id);
};

/**
* Attach this field to a block.
* @param {!Block} block The block containing this field.
Expand Down
31 changes: 31 additions & 0 deletions tests/mocha/field_angle_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -310,4 +310,35 @@ suite('Angle Fields', function() {
});
});
});

suite('Serialization', function() {
setup(function() {
this.workspace = new Blockly.Workspace();
defineRowBlock();

this.assertValue = (value) => {
const block = this.workspace.newBlock('row_block');
const field = new Blockly.FieldAngle(value);
block.getInput('INPUT').appendField(field, 'ANGLE');
const jso = Blockly.serialization.blocks.save(block);
chai.assert.deepEqual(jso['fields'], {'ANGLE': value});
};
});

teardown(function() {
workspaceTeardown.call(this, this.workspace);
});

test('Simple', function() {
this.assertValue(90);
});

test('Max precision', function() {
this.assertValue(1.000000000000001);
});

test('Smallest number', function() {
this.assertValue(5e-324);
});
});
});
27 changes: 27 additions & 0 deletions tests/mocha/field_checkbox_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -204,4 +204,31 @@ suite('Checkbox Fields', function() {
});
});
});

suite('Serialization', function() {
setup(function() {
this.workspace = new Blockly.Workspace();
defineRowBlock();

this.assertValue = (value) => {
const block = this.workspace.newBlock('row_block');
const field = new Blockly.FieldCheckbox(value);
block.getInput('INPUT').appendField(field, 'CHECK');
const jso = Blockly.serialization.blocks.save(block);
chai.assert.deepEqual(jso['fields'], {'CHECK': value});
};
});

teardown(function() {
workspaceTeardown.call(this, this.workspace);
});

test('True', function() {
this.assertValue(true);
});

test('False', function() {
this.assertValue(false);
});
});
});
27 changes: 27 additions & 0 deletions tests/mocha/field_colour_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -277,4 +277,31 @@ suite('Colour Fields', function() {
});
});
});

suite('Serialization', function() {
setup(function() {
this.workspace = new Blockly.Workspace();
defineRowBlock();

this.assertValue = (value) => {
const block = this.workspace.newBlock('row_block');
const field = new Blockly.FieldColour(value);
block.getInput('INPUT').appendField(field, 'COLOUR');
const jso = Blockly.serialization.blocks.save(block);
chai.assert.deepEqual(jso['fields'], {'COLOUR': value});
};
});

teardown(function() {
workspaceTeardown.call(this, this.workspace);
});

test('Three char', function() {
this.assertValue('#001122');
});

test('Six char', function() {
this.assertValue('#012345');
});
});
});
32 changes: 32 additions & 0 deletions tests/mocha/field_dropdown_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,4 +152,36 @@ suite('Dropdown Fields', function() {
});
});
});

suite('Serialization', function() {
setup(function() {
this.workspace = new Blockly.Workspace();
defineRowBlock();


this.assertValue = (value, field) => {
const block = this.workspace.newBlock('row_block');
field.setValue(value);
block.getInput('INPUT').appendField(field, 'DROPDOWN');
const jso = Blockly.serialization.blocks.save(block);
chai.assert.deepEqual(jso['fields'], {'DROPDOWN': value});
};
});

teardown(function() {
workspaceTeardown.call(this, this.workspace);
});

test('Simple', function() {
const field = new Blockly.FieldDropdown(
[['apple', 'A'], ['ball', 'B'], ['carrot', 'C']]);
this.assertValue('C', field);
});

test('Dynamic', function() {
const field = new Blockly.FieldDropdown(
() => [['apple', 'A'], ['ball', 'B'], ['carrot', 'C']]);
this.assertValue('C', field);
});
});
});
Loading

0 comments on commit e057da1

Please sign in to comment.