How to make the svgs in correct size

[William xu]

Hi,

Before asking about the above question, I noticed something different from the document.

I  created a "fixed size" workspace. But surprisingly, it can resize when I resize the browser. Not sure how it works but it's not something bad except one thing.

When the workspace is injected for the first time, the SVGs inside the div seems not correct.

You can see they are smaller than the workspace. I need to resize the window once, then all good afterwards.

May I know the reason and how to fix the issue?

Thanks,

William

[Maribeth Bottorff]

Hi,

Can you please provide a minimum reproduction case? By that, I mean some sample code that demonstrates the problem, hopefully stripped out of extraneous things that aren't relevant to the problem. It's hard for us to debug your application without seeing any of the code.

As an aside, Blockly is set up to resize the svg canvas automatically when the browser resizes, as you've seen. So if you inject Blockly into a container that also resizes automatically when the browser resizes (e.g. a flex div, or any non-absolutely positioned div) you shouldn't need to do additional shenanigans to get Blockly to resize. 

Maribeth

[William xu]

Hi Maribeth,

Yes, when I resize the window, the Blockly resize well with it. But the problem is at the initialisation. It seems "blocklySvg" is not resized to fill the container but some default value. So everything is messed up. You have to resize the window to make it normal. It's very annoying. People would think the app is broken at the first glance. 

<div id="blocklyDiv" class="panel--bordered" style="width: 100%; height: 100%"></div>

Thanks,

William 

[Maribeth Bottorff]

Hi William,

This is not a known bug to us, and I don't see it when using Blockly in test applications (example). Without seeing your code, there is not a lot of advice I can offer, because your custom CSS is likely involved here. If you post a reproduction case, or at the very least more details about your code/styles, we may be able to help you figure out a solution.

Otherwise, you can try calling `Blockly.svgResize()` when the page is finished loading, which will resize the svg to fill its container. But I suspect this would be a bandaid on top of a CSS issue.

Best,

Maribeth

[William xu]

Hi Maribeth,

I tried Blockly.svgResize() in the code but it did not work. I call it everytime when I load the workspace from database.

function postLoadModule(data){

Blockly.svgResize(workspace); <<<<<<

if( data.result=="OK"){

document.getElementById("ListPanel").style.display = "none";

document.getElementById("blocklyPanel").style.display = "";;

createWorkspacePanel(data.data);

}else{

}

}

I traced into the code to see what's the difference between my call and a real window resize. I found that d.offsetHeight and d.offsetWidth is zero when I triggered the resize from JS. But in a real window resize event, the values are correct. I also tried window.resizeTo but it did not help. But after a "physical" window resize, everything works fine. I feel that it requires a physical resize to initialise something...

Following is some of my code, hope it can help.

<div class="panel" id="blocklyPanel" style="height: 100%; display: none;">

<div class="panel panel--loose panel--bordered">

<label>Module Name:</label><input type="text" id="moduleName" >

<label>ID:</label><input type="text" id="moduleId" readonly>

<label>Owner:</label><input type="text" id="moduleOwner" readonly>

<label>Target:</label><input type="text" id="moduleTarget" readonly>

<label>Type:</label><input type="text" id="moduleType" readonly>

<button class="btn--primary btn--small" style="float: right;" onclick='toModuleList()'>Module List</button>

</div>

<div class="panel panel--loose panel--bordered">

<label>Description:</label><textarea id="moduleDescription" style="width:100%"></textarea>

</div>

<div class="panel panel--loose panel--bordered" style="height: 100%;">

<table style="width: 100%; height: 100%">

<tr id="blockWorkspace" style="display: none">

<td style="width: 50%" id="blocklyArea"><div id="blocklyDiv" class="panel--bordered" style="width: 100%; height: 100%"></div></td>

<td style="width: 1%; vertical-align: middle; align-items:center;"><button class="btn--primary btn--small" style="vertical-align: middle; text-align: center" onclick='generateRadkitScript()'>Generate</button></td>

<td style="width: 49%"><textarea id="codeArea" readonly style="height: 100%; width: 100%;"></textarea></td>

</tr>

<tr id="textWorkspace" style="display: none">

<td><textarea id="scriptEditor" style="height: 100%; width: 100%;"></textarea></td>

</tr>

<tr style="height: 30px">

<td colspan="3"><button id="btnSaveModule" class="btn--primary btn--small" onclick='saveModule()' style="display: none">Save</button><button id="btnCloneModule" class="btn--primary btn--small" onclick='cloneModule()' style="display: none">Clone</button></td>

</tr>

</table>

</div>

</div>

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

Thanks,

William

[Clément Contet]

Hi,

I encountered the same bug (https://groups.google.com/g/blockly/c/EMu8DKmiWQc/m/ua7c8SGxBQAJ) and I had to set a workaround to fix it: https://github.com/Orange-OpenSource/super-coding-ball/blob/main/src/app/components/blockly/blockly.component.ts#L112-L117

Regards,

Clément

[William xu]

Hi Clement,

Thank you for the suggestion. But it does not work in my case. Instead, the effect is like following. When it zoomToFit, it fit the small size. The key issue is that the resize event never results in same effect as actual resize.

Thanks,

William

[Beka Westberg]

Hello!

When our you triggering your `Blockly.inject` call? Usually we trigger it based on the `onload` callback. I'm wondering if it might just be getting injected a little bit early, before all of the metrics we need for correct sizing have been calculated.

I hope that helps! Best wishes,

--Beka

[William xu]

Hi Beka,

Thank you for the suggestion. I tried delaying the inject to window.onload. Same result. :-(

Regards,

William

[William xu]

Hi all,

I found a temporary workaround. First of all, I must make the parent div of blocklydiv visible(display). Second, I schedule a window.resize event every time I load the workspace. The first inject still looks weird. But at the second time I load the workspace from an object, whether {} or not, it will resize correctly.

Just for your reference. If you are an JS expert, maybe you know what happened.

Regards,

William