widget layout

[luisaph]

Hello!

I have some sketches that need more screen space, so I would like to change the widget's layout to resemble this: http://p5js.org/examples/examples/Structure_Coordinates.php

Looking into the React code I see that the relevant component is Preview, which has a width property, but doesn't seem to include positioning ones ––any pointers?

Thanks!!

[toolness]

Oh, good question--this is an excellent use case! Let's see... I haven't looked at this code in a while...

It looks like things are a bit primitive right now: as you noted, the preview frame's width can be controlled, but not much else. Right now a preview-frame.css file is loaded (via webpack/JS, which is a bit unusual) to apply a basic CSS flexbox layout that centers the sketch's canvas horizontally and vertically within the pane.

As for the positioning of the preview pane within the editor widget itself, it looks like that's done through flexbox too, in style.css.

I'm curious--if we added some kind of data-layout="vertical" option to the widget, maybe we could create a CSS class/ruleset that, when applied, changes the flex-direction of the layout so that the preview frame appears above the editor instead of to its side? (I'm just guessing this would involve changing flex-direction, but I'm not sure.)

[luisaph]

This sounds promising, thanks for all the pointers. I'll take a look when I get a chance, probably once I'm settled in Shanghai ––leaving in just a couple of days!

[toolness]

Sounds good. Let me know if you don't have time to do this or anything--it's a great feature idea and I'm happy to spend some time on it myself.

Hope Shanghai is great so far!

[luisaph]

Ah, that would be awesome Atul ––I don't think I'd be able to look into it for a while...

(Shanghai is all new and shiny with neon :)

[russellcameronthomas]

I, too, would like to see a data-layout="vertical" option, since my site is optimized for vertical scrolling.