3

I am trying to adapt my Blockly workspace inside a div. I want that if the page makes smaller, the div and the Blockly workspace inside of it would be smaller also.

I know that there is a way that Google provides in its documentation but I think it is a bit "dirty" and you have to use a lot of code to resize it.

Looking at the debugger of Google Chrome I saw that I can set a max-height to the svg object but I do not know how to change that height when you inject the workspace:

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox')});

Anyway, it will not solve my problem at all (just avoid that the workspace would be bigger than the div before resizing the page).

I also tried changing my blocklyDiv in which I inject the Blockly workspace to display: flex; but it does not change anything.

Is there a better approach than Google's example to resize the Blockly workspace?

Thanks in advance!

Francisco Romero
  • 12,787
  • 22
  • 92
  • 167
  • Do you have a link or JSFiddle to demonstrate? – darrylyeo May 30 '16 at 19:09
  • @darrylyeo I can create one, but I do not know how to add Blockly to it. – Francisco Romero May 30 '16 at 20:58
  • I use a simple "width: 100px" in the blockly div and it resizes ok. Of course, if the blocks does not fit in the workspace, then there will be scroll bars to allow moving inside it... I understand that is not what you want? Maybe you want to change the scale of the blocks to make them fit in the provided space? – jrierab May 31 '16 at 10:38
  • @jrierab But I want that at the same time I resize the screen, the workspace will be also resized. With a fixed width I cannot do that. If the blocks could be resized at the same time it would be great! – Francisco Romero May 31 '16 at 10:41
  • Sorry, my fault. I was saying "width: 100%", that is, relative to the parent div. And it effectively resizes the workspace, but maybe it works because I have a fixed height? In any case, you could add an image showing what is wrong and what you expect to achieve. – jrierab May 31 '16 at 10:48
  • @jrierab Do you know how can I add `Blockly` to a JSFiddle? If it is possible I can do one to play with it :) – Francisco Romero May 31 '16 at 11:04

3 Answers3

5

I used CSS Only to get the same behavior...

Just create a container for the blockly editor with any size you want and position relative, then put a blockly editor inside with position absolute.

HTML Code:

<section id="blocklyContainer">
    <div id="blocklyDiv"></div>
</section>

CSS code:

#blocklyContainer {
  position: relative;
  width: 100%;
  height: 100vh;
}

#blocklyDiv {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Here you have a CodePen to see: blockly resize

Juan Ignacio Alterio
  • 51
  • 1
  • 3
  • It seems that adding categories.... it does not show side-panel anymore... – Luca Detomi Sep 11 '17 at 10:18
  • @LucaDetomi I have updated the codepen example for you with two random categories. It's working also, can you take a look? thanks! – Juan Ignacio Alterio Sep 12 '17 at 14:48
  • No Juan, I tried to programmatically change width of `blocklyContainer` (you can do it also from Inspector) and size of canvas is not changed until you force a browser window resize... So the problem remains: how to change Blockly canvas size changing ONLY size of a DIV container, not changing browser window size? – Luca Detomi Sep 13 '17 at 06:50
1

As I said in above comment, I allow width resize while fixing the height in the blockly div. 

<div id="blocklyDiv" style="height: 800px; width: 100%;"></div>

Here you have the JSFiddle to play with: blockly workspace resizing.

jrierab
  • 605
  • 5
  • 15
  • It looks good. Can you please provide a detailed answer of how do you do it? As I can see, you have used a lot of parameters when you inject the code that I had never seen before. – Francisco Romero May 31 '16 at 11:55
  • No need for any special parameters for your purposes (only the toolbox option is really needed). Zoom options are specified here: https://developers.google.com/blockly/installation/zoom#controls. They allow to use the mouse wheel (or the semi-transparent icons) for zoom in/out in the workspace. – jrierab May 31 '16 at 12:03
0

I solved this problem by using Blockly.svgResize api, note that if the size changes with transition, you have to set a timeout function and call the api in the callback in timeout, the delay is the transition time.

minilong
  • 1