Search code examples
javascriptreactjsmit-scratchblockly

How to get the code from an Scratch workspace and display with Blockly?

I'm looking for a way to get the XML (or another way/structure) from a sequence of blocks used on my workspace inside Scratch-MIT 3.0 to display this code in the Blockly Google's library.

Right now I have access to the Abstract Syntax Tree generated by the scratch-vm component (https://github.com/LLK/scratch-vm), but I don't see a way to "rebuild" the code represented on this right on my workspace.

Is Scratch rendering the code from the Abstract Syntax tree structure or what? And how?

Solution

  • I've created a new function on my "blocks.jsx" file:

    onBlockChange() {
    console.log(this.ScratchBlocks.Xml.workspaceToDom(this.workspace));
}

    And attached a new listener to the VMListener list (also in the "blocks.jsx" file):

    this.props.vm.addListener('BLOCK_DRAG_UPDATE', this.onBlockChange);

    This way, everytime that someone add's ou remove a block, I can get the XML info from the workspace.