Why is "Blockly.svgResize(workspace)" required in "Resizable Blockly" demo?

[Jody Florian]

I am trying to understand why code from the demo examples are the way they are.

In the "Resizable Blockly" demo, the following line is only called on page load:

Blockly.svgResize(workspace);

Why is it required there, but not in the resize() handler, nor in the "Fixed Blockly" demo?

I have looked at the reference docs (Blockly -> svgResize) and it seems to imply it should be called in the resize() handler. (It says "Call this when the view actually changes size") - And while the demo calls it on page load, it excludes it in that handler and yet works fine without it. What am I missing?

Sorry for the annoying question - it's just really bugging me. I would like to get this clear to prevent possible bugs.

Thanks - Jody


[picklesrus]

Definitely not an annoying question!

In the resizeable demo, Blockly's container (the div with id 'blocklyDiv')  changes size after Blockly.inject is called.  The call to the onresize() function changes the 'blocklyDiv''s offsetHeight and offsetWidth and Blockly has no way to know that unless we tell it.  The call to Blockly.svgResize(workspace) is what does that.

For the fixed demo, the size of the 'blocklyDiv' is set on the element directly so Blockly knows the size when inject is called (which is when we internally call Blockly.svgResize)  and it doesn't change after.

Feel free to ask followups - the resize stuff is a bit subtle at times.  We used to be very aggressive about resizing, but it was expensive to ask the browser to recalculate sizes all the time. We've cut down on many of the unnecessary ones, but sometimes, as you've found here, not in the most intuitive ways.

[Jody Florian]

Ah brilliant thanks - that totally clears it up! I had a feeling it might be something like that; it's funny how these corner cases crop up when programming.

[Jody Florian]

Pickles, I've had another look and still have a question -

In the resize demo, why isn't svgResize() called in the resize() callback? You say that it is called to notify Blockly that the div has changed size yet it is only called once, when the page is loaded, not in resize()?

I've discovered a problem with calling svgResize() more than once; the bin seems to stop working! It doesn't animate open, and it doesn't delete any blocks.

It's forcing me to confront my sloppy code :-/ how rude lol

On Tuesday, 20 December 2016 17:51:41 UTC, picklesrus wrote:

[picklesrus]

Blockly registers a window resize listener that calls svgResize so you don't need to add it to resize(). https://github.com/google/blockly/blob/c9ef71ecf3469c009a6e991942482219e8a92e02/core/inject.js#L270

For deletion problem, if you figure out what's wrong and you think it is a Blockly problem, please do let us know! I just opened the console and ran svgResize from there a few times and it seems to work okay. Here's a little more info about how the trash in case it helps:

recordDeleteAreas in workspace_svg is what eventually gets called by svgResize to calculate the position of the trash.  Then isDeleteArea should get called while you're dragging blocks around to check if it is over the trash can.