Workspace doesn't load properly

[Samuel Alvarez]

Hello, I have a game that uses Blockly and everything goes perfect unless the loading of the workspace when the players enter to the page. It's imposible to see the workspace when the page is initialized. The only way to load it is to click on the "lugares" categories (not the rest) because it has another two and it loads the workspace, also if you resized the page it loads. 

Anyone knows why this is happening? It's a little bit annoying and confussing  for the players to click on that category at first for the workspace to be shown.

Thank you very much.

[feni...@google.com]

Thanks for your question. Do you have a link to code that I can take a look at?

It certainly looks like an issue with initialization order. The strangest thing is that the toolbox is there without the rest of the workspace, since the workspace creates the toolbox.

Rachel

[Samuel Alvarez]

Hello, I am using the angular framework and the ts code is the following:

import * as Blockly from 'blockly/core';

import 'src/app/blockeado.js';

export class BlocklyComponent implements OnInit {

primaryWorkspace: Blockly.WorkspaceSvg;

ngOnInit() {

this.primaryWorkspace = Blockly.inject('primaryDiv',{

scrollbars: false,

readOnly: false,

collapse : true,

renderer: 'thrasos',

comments : true,

disable : true,

maxBlocks : 10,

trashcan : true,

horizontalLayout : false,

toolboxPosition : 'start',

scss : true,

media : 'https://unpkg.com/blockly/media/',

rtl : false,

sounds : true,

oneBasedIndex : true,

toolbox: `

<xml id="toolbox" >

<category name="Lugares" colour="#5ba58c" >

<category name="Territorios" colour="#5ba58c" >

<block type="buscar_pais" >

<field name="input1">Escribe el país</field>

<field name="INPUT">paises</field>

</block>

<block type="buscar_regiones">

<field name="input1">Escribe la región</field>

<field name="INPUT">regiones</field>

</block>

<block type="buscar_provincia">

<field name="input1">Escribe la provincia</field>

<field name="INPUT">provincias</field>

</block>

</category>

<category name="Mares y océanos " colour="#F6EFA6">

<block type="buscar_oceano">

<field name="input1">Regiones grandes</field>

<field name="INPUT">agua</field>

</block>

<block type="buscar_seas">

<field name="input1">Regiones pequeñas</field>

<field name="INPUT">agua</field>

</block>

</category>

</category>

<category name="Vegetación" colour="#0DF013">

<block type="layer_tree">

<field name="TREE">Árboles</field>

</block>

<block type="layer_ndvi">

<field name="NDVI">Cantidad de vegetación</field>

</block>

<block type="layer_fires">

<field name="FIRES">incendios</field>

</block>

<block type="layer_tree_loss">

<field name="TREE_LOSS">Pérdida de árboles</field>

</block>

<block type="layer_gcvi">

<field name="GCVI">Salud de Vegetación</field>

</block>

</category>

</xml>

`

} as Blockly.BlocklyOptions);

}

I cut most of the toolbox because I think all the categories are not important.

The HTML fil is:

<table width="100%">

<tr>

<td>

<div id="primaryDiv" ></div>

</td>

Thank you 

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/p7YIL5fh59Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/d2f34822-b1c1-4ad7-9def-bd81564d326bn%40googlegroups.com.

--

Samuel Álvarez Pérez CPO & Co-founder, Ynsat 685 583 129 | in...@mapiblocks.com ww.ynsat.com | samalva...@gmail.com IMPORTANT: The contents of this email and any attachments are confidential. They are intended for the named recipient(s) only. If you have received this email by mistake, please notify the sender immediately and do not disclose the contents to anyone or make copies thereof.

Create your own email signature

‌

[Abby Schmiedt]

Hello!

I have a feeling this has to do with how angular is adding the workspace and unfortunately I am not familiar enough with angular to be able to help out with that part. However, I think I might know why clicking on the category toolbox is fixing it. Expanding the category calls Blockly.svgResize, which might be causing the workspace to show up. It is a bit of a hack, but you might be able to call this instead of having your users click on the category. 

Hope this helps!

Abby

[Samuel Alvarez]

Hello, thanks for the reply, however although I did a performance test I am still not able to fake the actions without clicking in the category.  This is all I get when I click the first time to the category and the Workspace showsup.

‌

[co...@cortscorner.net]

I encountered a similar problem recently on my project and it may be related, although in my case, the toolbox was also hidden.

If the element containing the blockly workspace is set to "display: none;" and a window.resize is triggered, the height and width of the workspace will be set to zero. This persists even if the "display: none;" is subsequently removed, but resizing the page fixes it. Adding a "window.dispatchEvent(new Event('resize'));" at the appropriate place solved it for me.