Upgrading from version 8 to 10

[Laxmikant Sharma]

Hi Blockly team,

I need some help while upgrading from Blockly 8 to 10. I currently have npm based integration with version 8 and upgrading to 10. For simplicity, I have created simpler blocks to demonstrate the issue.

Issue looks to be specific to shadow blocks though from my testing.

Below are the image and definitions of the blocks. When I load it on workspace on version 8, it works fine, but on version 10, it throws exception:

//Loading the blockly xml file to workspace, this.blockly_data is the actual xml file

Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(this.blockly_data), this.workspace)

Exception (comes at line "subjectShadow.render();" in SendElementTest block:   

=========err TypeError: Cannot read properties of null (reading 'setAttribute')
    at Drawer$$module$build$src$core$renderers$geras$drawer.layoutField_ (blockly_compressed.js:892:55)
    at Drawer$$module$build$src$core$renderers$geras$drawer.drawInternals_ (blockly_compressed.js:891:170)
    at Drawer$$module$build$src$core$renderers$geras$drawer.draw (blockly_compressed.js:1548:754)
    at Renderer$$module$build$src$core$renderers$geras$renderer.render (blockly_compressed.js:1011:279)
    at BlockSvg$$module$build$src$core$block_svg.renderEfficiently (blockly_compressed.js:1206:70)
    at renderBlock$$module$build$src$core$render_management (blockly_compressed.js:163:335)
    at doRenders$$module$build$src$core$render_management (blockly_compressed.js:161:348)
    at triggerQueuedRenders$$module$build$src$core$render_management (blockly_compressed.js:159:167)
    at $.domToWorkspace$$module$build$src$core$xml [as domToWorkspace] (blockly_compressed.js:180:276)
    at BlocklyComponent.getBlocklyWorkspace (blockly.component.ts:2049:13)

Blocks:

Definitions:

Blockly.Blocks['ShowContentWithFileBlock'] = {

init: function () {

this.appendValueInput('FileContent').appendField('Show');

this.appendValueInput('FileName').appendField('with file name');

this.setColour('#006064');

this.setInputsInline(true);

this.setNextStatement(true);

this.setPreviousStatement(true);

},

};

Blockly.Blocks['SendElementTest'] = {

init: function () {

var subjectShadow = this.workspace.newBlock('text');

subjectShadow.setShadow(true);

subjectShadow.initSvg();

subjectShadow.render();

subjectShadow.setFieldValue('Subject', 'TEXT');

var subject = subjectShadow.outputConnection;

this.appendValueInput('SendElementTest')

.appendField('Send', 'SendField')

.appendField('Recipient', 'Recipient');

this.appendValueInput('Subject')

.setCheck('String')

.appendField(' ')

.appendField('Subject');

var cc = this.getInput('Subject').connection;

cc.connect(subject);

this.setColour('#006064');

this.setInputsInline(false);

this.setNextStatement(true);

this.setPreviousStatement(true);

}

};

Also, at certain other places, I get other type of exception:

=========err Error: The text content is null.
    at t.getTextContent (blockly_compressed.js:715:191)
    at t.render_ (blockly_compressed.js:746:33)
    at t.getSize (blockly_compressed.js:718:197)
    at new Field$$module$build$src$core$renderers$measurables$field (blockly_compressed.js:843:715)
    at RenderInfo$$module$build$src$core$renderers$geras$info.createRows_ (blockly_compressed.js:910:75)
    at RenderInfo$$module$build$src$core$renderers$geras$info.measure (blockly_compressed.js:908:340)
    at Renderer$$module$build$src$core$renderers$geras$renderer.render (blockly_compressed.js:1011:247)
    at BlockSvg$$module$build$src$core$block_svg.renderEfficiently (blockly_compressed.js:1206:70)
    at renderBlock$$module$build$src$core$render_management (blockly_compressed.js:163:335)
    at doRenders$$module$build$src$core$render_management (blockly_compressed.js:161:348)

Please let me know if you could help me guide in the right direction.

Appreciate your help!

Thanks,

Lax

[Beka Westberg]

Hello Lax,

I think there are a few things that could help with this error.

Firstly instead of calling `setShadow(true)` you can call `connection.setShadowState`. `setShadow` is internal and may not work how you intend it to.

Secondly, you should remove the calls  to `initSvg` or `render` from within your `init` method. We've added render batching to achieve some significant performance improvements, and calling these methods from there will break those :/ The only place you should need to call `initSvg` or `render` is after calling `workspace.newBlock`. And if you're doing that, I recommend using deserialization instead since it handles initailization and rendering for you.

I hope that helps! If you run into any further troubles please reply!

--Beka

[Laxmikant Sharma]

Thanks Beka for your response! setShadowState solved the problem! 

Thanks,

Lax