search

toolness / p5.js-widget

A reusable widget for embedding editable p5 sketches in web pages.
https://toolness.github.io/p5.js-widget/
GNU Lesser General Public License v2.1
162 stars 44 forks source link

widget layout #61

Open luisaph opened 8 years ago

luisaph commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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