Horizontal Toolbox

[Skittle Zeta]

Looking at toolbox.js in core, I would like to move the toolbox to a horizontal position at the top, instead of vertically on the left.

Am I looking in the right place?

[Neil Fraser]

toolbox.js is the text menu of categories down the side on advanced Blockly apps.  flyout.js is the graphical list of blocks down the side on simple Blockly apps, as well as the temporarily visible graphical list of blocks that appears when a category is clicked in an advanced Blockly app.

If you are looking to change the location of the menu on a simple app (such as https://blockly-demo.appspot.com/static/demos/fixed/index.html), then you can ignore toolbox.js completely (since there are no categories) and try to hack flyout.js to give you a different orientation.

If you are looking to change the location of the menu on an advanced app (such as https://blockly-demo.appspot.com/static/demos/toolbox/index.html), then you will have to modify flyout.js (as above), as well as toolbox.js.  Toolbox is a wrapper for Closure's TreeControl, which forms the display.  Attempting to reorient TreeControl could be an adventure.

On 15 January 2015 at 14:03, Skittle Zeta <sharon....@gmail.com> wrote:

Looking at toolbox.js in core, I would like to move the toolbox to a horizontal position at the top, instead of vertically on the left.

Am I looking in the right place?

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Neil Fraser
https://neil.fraser.name

[Skittle Zeta]

Nice, and thank you--I now see where the blocks are positioned vertically. However, the following I thought would make a difference doesn't seem to suffice or make any change to the toolbox's position:

    // // Original Code within function 'show' in flyout.js
    // var x = Blockly.RTL ? 0 : margin + Blockly.BlockSvg.TAB_WIDTH;
    // block.moveBy(x, cursorY);
    // cursorY += blockHW.height + gaps[i];

    // Place blocks next to each other (cursorX declared earlier, before for-loops)
    var y = margin + Blockly.BlockSvg.TAB_WIDTH;
    block.moveBy(cursorX, y);
    cursorX += blockHW.width + gaps[i];

I also changed the calculation of flyoutWidth to sum the widths of each block in 'reflow', though am not certain that was necessary, and began to wonder if 'path' in positioning the flyout at the edge of the workspace needs any alteration. 

Perhaps I'm missing something fundamental for there to be no change to the toolbox's position (cleared my browser's cache)?

Thanks so much.

[Neil Fraser]

As always when there is "no change", do something brutal enough to verify beyond any doubt that the code you are editing is the code you are running.  A big old alert("Hello") is usually satisfactory in that regard.

Make sure that your development is done in uncompressed mode:
https://developers.google.com/blockly/hacking/building

[Skittle Zeta]

Ah, feel a bit ridiculous. Was still in compressed mode. Thank you so much.