Porting to infamous

[trusktr]

Hello. I recently completed most of the "mixed mode" feature for infamous (there's some small things left to do).

Here's a demo of the HTML API:

https://codepen.io/trusktr/pen/rpegZR

There's also a JavaScript API (CSS3D-only example). I've got lots of ideas planned for the JS API like how to make it work in workers with SharedArrayBuffer, how to make it work without any DOM (f.e. in Node.js with OpenGL), and possibly writing the core classes in WebAssembly (or something that compiles to WASM) for performance.

Anyways, I'd like to get AutoLayout ported to Infamous! I think this would be cool!

[IjzerenHein]

Hi. That sounds awesome! I don't really work with famous anymore these days, but if I can help with something let me know. Cheers

[trusktr]

Hello Hein, I've started work on this! https://github.com/trusktr/infamous/tree/autolayout

WIP, I'll circle back to replace the Famous parts with Infamous parts.

(By the way, Infamous will be renamed and get a new website with complete docs soon!)

[trusktr]

I'm planning to see if I can extend the 2D autolayout into 3D autolayout.

[trusktr]

Do you remember on these lines,

https://github.com/IjzerenHein/famous-autolayout/blob/e4cef730240a0e02c362aff918c4c6a59e151e7e/src/AutoLayoutController.js#L136-L139

what the undefined absolute size values do?

Is it that the size will be 100% size of the parent when the size mode is proportional?

[trusktr]

Almost there. Basically I already converted to infamous API, f.e.:

https://github.com/trusktr/infamous/blob/0b953ab7e2c06bc220f27a0994793c1255dc0c86/src/autolayout/AutoLayoutNode.js#L229-L244

Then I just need to take these parts,

https://github.com/trusktr/infamous/blob/0b953ab7e2c06bc220f27a0994793c1255dc0c86/src/autolayout/AutoLayoutNode.js#L43-L47

and convert them to use the Infamous Motor.addRenderTask API. Or maybe not, as setting the size values on the previous linked lines automatically enqueues a render task.

It's late, I'll try and finish it another day soon.

[trusktr]

Alright, finished the initial version!

[Here's]() what it looks like, with the parts I changed labeled with PORTED. Here's an example.

To run it, clone and checkout the autolayout branch, npm install, the serve the root of the repo with http-server or live-server.

npm install
npm i -g live-server
live-server .

then visit

http://localhost:8080/examples/

(Note, the WebGL is in experimental mode, a bunch of it is stable, but there's also a bunch of stuff to fix/polish/change)

---

When I circle back around I'll improve it so the API is exposed through the HTML elements, so we can write stuff like:

<i-autolayout-node vfl="
  //viewport aspect-ratio:3/1 max-height:300
  H:|-[row:[red(green,blue)]-[green]-[blue]]-|
  V:|[row]|
">
  <i-box class="green" class="green"></i-box>
  <i-box class="red" color="red"></i-box>
  <i-box class="blue" color="blue"></i-box>
</i-autolayout-node>

or

<i-vfl id="rowLayout">
  //viewport aspect-ratio:3/1 max-height:300
  H:|-[row:[red(green,blue)]-[green]-[blue]]-|
  V:|[row]|
</i-vfl>

<i-autolayout-node vfl="#rowLayout">
</i-autolayout-node>

or

<i-autolayout-node vfl="/path/to/source.vfl">
</i-autolayout-node>

[trusktr]

Alright, finished the HTML API. Here's what the declarative example looks like.

Here's what the AutoLayoutNode class looks like.

In the examples, you can see that we can update the VFL just changing the content of the visualFormat prop (which is mapped to the visual-format attribute, and using el.setAttribute() would also work the same).

---

Up next I want to have 3D layout!