Blockly in Popup - Best practices

[Jay Bloodworth]

Are there any general tips for including a Blockly workspace in a popup, i.e. a div that can be shown or hidden in response to other events? The issue is that a number of the elements of the Blockly UI are added to the top level, rather than to the main workspace div. While it's not that hard to explicitly show/hide these along with the div, I was wondering if there is a more elegant way. Also, if the parent div starts in a 'display: none;' state, sometimes (but not always) the workspace doesn't display at all when the div is first made visible; I have to hide and show again to make it appear. Any suggestions for making that work more consistently?

Thanks,
Jay

[Austin Bart]

This may not be tremendously helpful, but here are the lines that let me show/hide the a Blockly canvas in favor of a CodeMirror canvas for BlockPy:

https://github.com/RealTimeWeb/blockpy/blob/master/kennel/kennel.js#L377

Something interesting that caught me recently: don't attempt to perform render operations on blocks when the canvas is not visible. You'll get some minor visual errors in Chrome and more serious errors in Firefox. It's usually not a problem unless you're using certain blocks, e.g., a custom textarea block in my case.

~Cory

[toe...@extremenetworks.com]

That warning should be in Bold type.  If you have the workspace hidden and do anything (load, etc) to the workspace, the blocks are corrupted and there really isn't much you can do to fix it.  The problem stems from calls to getComputedTextLength() and Neil attempted to do a bit of a fix to the problem in: https://code.google.com/p/blockly/issues/detail?id=248.  However, it only partially masks the problem.  What there needs to be is a mechanism to temporarily hide the workspace (i.e. treat it as headless) and then once you unhide it, have the workspace go through and forcefully re-render everything.  Setting the workspace to headless doesn't work because when you attempt to make it non-headless, the blocks are all derived from the wrong base block.