start block in rtl start in most left not right

[islam kaloop]

Hi Group

I am new in using Blockly API, I am trying to make blockly platform for Arabic users and I use rtl but when I start loading the website start block does not appear in right I want to make it appear in right, and I want the toolbox to not overlap with workspace to prevent any block from overlap with it.

just as in this picture

Thanks,

Islam

[Beka Westberg]

Hello Islam,

I start loading the website start block does not appear in right

Could you provide the code you are using to create/load the blocks? If you are using the XML loading functions  it may simply be that the coordinates are incorrect. If you're creating the blocks in a different way it may get more complicated.

I want the toolbox to not overlap with workspace to prevent any block from overlap with it.

You /can/ achieve this, but to do so you need to remove scrollbars. For example:

var myWorkspace = Blockly.inject('myBlocklyDiv', {scrollbars: false});

But be warned, this means your users now have a limited amount of space to work with.

I hope that helps! Once we have the code for your block loading, I'm sure someone can help you out :D

--Beka

[islam kaloop]

Hello Beka

Thank you for your reply

this is my code to initial the work space and toolbox

<script>

var blocklyArea = document.getElementById('blocklyArea');

var blocklyDiv = document.getElementById('blocklyDiv');

var blockName="start";

var demoWorkspace = Blockly.inject(blocklyDiv,

{

media: './blockly/media/',

rtl: true,

grid:

{

spacing: 30,

length: 4,

colour: '#ccc',

snap: true

},

zoom:

{

controls: true,

wheel: true,

startScale: 1.0,

maxScale: 3,

minScale: 0.3,

scaleSpeed: 1.2

},

trashcan: true,

toolbox: document.getElementById('toolbox'),

});

themeSettings();

var newBlock = demoWorkspace.newBlock(blockName);

newBlock.initSvg();

newBlock.render();

var onresize = function (e) {

// Compute the absolute coordinates and dimensions of blocklyArea.

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';

Blockly.svgResize(demoWorkspace);

};

window.addEventListener('resize', onresize, false);

onresize();

Blockly.svgResize(demoWorkspace);

</script>

and I want to change the coordinate of hole workspace not just the block so that any new block come do not go away from the start block

for the second issue make scrollbars false does not solve the problem.

Thanks

Islam

[Beka Westberg]

Hello again Islam,

When you are creating blocks programmatically I would recommend using the XML hooks, rather than creating the blocks directly. This makes sure that the blocks are initialized correctly, and positioned correctly.

So instead of this:

var newBlock = demoWorkspace.newBlock(blockName);
newBlock.initSvg();
newBlock.render();

I would do this:

var newBlock = Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(
  '<xml>' +
  '  <block type="start" x="10" y="10"></block>' +
  '</xml>'
), demoWorkspace);

Which works correctly in LTR and RTL.

I want to change the coordinate of whole workspace not just the block so that any new block come do not go away from the start block

 

I think the above suggestion fixes this as well, but I could be wrong. If it doesn't work please provide more details about what you're trying to do and I (or someone else) will do my best to help :D

for the second issue make scrollbars false does not solve the problem.

It seems to work for me. See this gif.  Could you provide more details about how it isn't working?

I hope that helps! And thanks for working with me :D

--Beka

[islam kaloop]

Hello Beka again

I am sorry

but It does not work for my now I can change the block position in start not BlocklyDiv position new block I choose from toolbox go left as in this picture

and block still could be behind the toolbox after change the code to

<script>

var blocklyArea = document.getElementById('blocklyArea');

var blocklyDiv = document.getElementById('blocklyDiv');

var blockName="start";

var demoWorkspace = Blockly.inject(blocklyDiv,

{

scrollbars: false,

media: './blockly/media/',

rtl: true,

grid:

{

spacing: 30,

length: 4,

colour: '#ccc',

snap: true

},

zoom:

{

controls: true,

wheel: true,

startScale: 1.0,

maxScale: 3,

minScale: 0.3,

scaleSpeed: 1.2

},

trashcan: true,

toolbox: document.getElementById('toolbox'),

});

themeSettings();

var newBlock = Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(

'<xml>' +

' <block type="start" x="-1110" y="10"></block>' +

'</xml>'

), demoWorkspace);

var onresize = function (e) {

// Compute the absolute coordinates and dimensions of blocklyArea.

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';

Blockly.svgResize(demoWorkspace);

};

window.addEventListener('resize', onresize, false);

onresize();

Blockly.svgResize(demoWorkspace);

</script>

Thank you for your time

Islam

[Beka Westberg]

Hiya Islam,

new block I choose from toolbox go left as in this picture

Generally Blockly allows blocks dragged from the toolbox to be placed anywhere on the workspace. Do you have a different intended behavior?

For example: do you expect the block to be deleted if it is not connected to the 'start' block? Or do you want the block to be automatically connected? or something else?

Once I have a clearer idea of what you're going for, I'm sure we can figure something out :D

and block still could be behind the toolbox

Could you send steps to reproduce the issue? Or a video of the issue occuring? Otherwise it's tricky to know where to look :/

Thank you for your time,

Beka