Resizable Blockly not working when maximize button clicked

[Keke Zhou]

I followed the instruction of injecting resizable blockly(https://developers.google.com/blockly/installation/injecting-resizable), however, it doesn't resize when I click the maximize button of the browser. looks like the onresize function is not triggered when max button of browser is clicked.

[Avi]

The resize is triggered when you hit the maximize button or hit it again to restore the window size. The flaw is that, you have to click on the workspace to have it redraw itself. Not sure why this happens.

Now this happens with, injecting resizeable blockly , but does not happen with the following demo apps. They resize perfectly when you hit the maximise button.
Code Editor
https://blockly-demo.appspot.com/static/demos/code/index.html
Blockly Factory
https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

Also some more investigation by running these in Chrome Debugger reveals that this does not happen while the code is run through breakpoints in the onresize() function. All of them resize perfectly.

So the question is what is different about "Code Editor" and "Blockly Factory" that they resize correctly when maximised (without the user having to click on the workspace) while the resizeable blockly does not. Has anyone experience this and found a solution ?

Regards
Avi

[André Roberge]

On Saturday, 16 January 2016 05:02:47 UTC-4, Avi wrote:

The resize is triggered when you hit the maximize button or hit it again to restore the window size. The flaw is that, you have to click on the workspace to have it redraw itself. Not sure why this happens.

Now this happens with, injecting resizeable blockly , but does not happen with the following demo apps. They resize perfectly when you hit the maximise button.
Code Editor
https://blockly-demo.appspot.com/static/demos/code/index.html
Blockly Factory
https://blockly-demo.appspot.com/static/demos/blockfactory/index.html

Also some more investigation by running these in Chrome Debugger reveals that this does not happen while the code is run through breakpoints in the onresize() function. All of them resize perfectly.

So the question is what is different about "Code Editor" and "Blockly Factory" that they resize correctly when maximised (without the user having to click on the workspace) while the resizeable blockly does not. Has anyone experience this and found a solution ?

I encountered a similar problem and solved it by triggering a window resize event.   Here's a simply copy of the code I used with JQuery to create a working environment that could be resized and dragged:

$("#blocklyDiv").resizable({

    resize: function() {

        $("#blocklyDiv:first-child").height($(this).height()-1).width($(this).width()-1);

        window.dispatchEvent(new Event('resize'));

    }

});

$("#blockly-wrapper").draggable({

    cursor: "move",

    handle: "p",

    drag: function( event, ui ) {

        window.dispatchEvent(new Event('resize'));

    },

    stop: function( event, ui ) {

        window.dispatchEvent(new Event('resize'));

    }

});

André

[Patrick Naish]

Hopefully you've solved this by now, but if not - I found that to get the editor to automatically redraw, you have to call Blockly.svgResize(workspace);

So my onresize function looks like this:

function onresize() {

    var element = blocklyArea;

    var x = 0;

    var y = 0;

    do {

        x += element.offsetLeft;

        y += element.offsetTop;

        element = element.offsetParent;

    } while (element);

    // Position blocklyDiv over blocklyArea.

    blocklyDiv.style.left = x + 'px';

    blocklyDiv.style.top = y + 'px';

    blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';

    blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';

    // Must call this so that the workspace bounds actually get redrawn before next click event

    Blockly.svgResize(workspace);

}

Thanks,

Patrick