kjk / flex

Go implementation of CSS flexbox layout algorithm, port of Facebook's Yoga

flex - CSS flexbox layout implementation in Go

Go implementation of flexbox CSS layout algorithm.

A pure Go port of Facebook's Yoga.

How to use

Read tutorial or look at _test.go files.

Status

The port is finished. The code works and passess all Yoga tests.

The API is awkward by Go standards but it's the best I could do given that I want to stay close to C version.

Logic is currently synced up to https://github.com/facebook/yoga/commit/f45059e1e696727c1282742b89d2c8bf06345254

How the port was made

You can read a detailed story.

In short:

• manually ported C code to Go, line-by-line
• manually ported tests to Go
• tweak the API from C style to be more Go like. The structure and logic still is very close to C code (this makes porting future C changes easy)

flex's Issues

integration with lxn/walk

Does the layout algorithm can be used in combination with walk?
Is this your intention?

It could be either integrated or used as an external package, where walk would have to call into for every layout call.

Find and replace in comments

... changed constraint to raint and constraints to raints.

Just FYI.

Cssgrid

I am really interested in using this for golang apps with OpenGL Like Shiny and glfw.

Do you happen to know if Facebook or other have an implementation of the newer cssgrid ?
I find it more powerful than CSS flexbox for many reasons.

Padding style

Hey @kjk please let me know if I understand it correctly:

Is padding a CSS padding attribute? When I use:

navigation := flex.NewNodeWithConfig(config)
navigation.StyleSetHeight(60)
navigation.StyleSetPadding(flex.EdgeAll, 20)
navigation.StyleSetFlexDirection(flex.FlexDirectionRow)

for index := 0; index < 5; index++ {
    child := flex.NewNodeWithConfig(config)
    child.StyleSetPadding(flex.EdgeAll, 20)
    navigation.InsertChild(child, index)
}

I thought I'd receive padding: 20px, here is the output:

<div layout="width: 240; height: 60; top: 0; left: 0;" style="flex-direction: row; height: 60px; ">
    <div layout="width: 40; height: 40; top: 20; left: 20;" style=""></div>
    <div layout="width: 40; height: 40; top: 20; left: 60;" style=""></div>
    <div layout="width: 40; height: 40; top: 20; left: 100;" style=""></div>
    <div layout="width: 40; height: 40; top: 20; left: 140;" style=""></div>
    <div layout="width: 40; height: 40; top: 20; left: 180;" style=""></div>  
  </div>

Let me know if I understand it correctly or I misused it, thanks.

complete source

License? (Facebook moved to MIT from BSD)

Facebook have moved to a MIT license for Yoga, from the BSD license that was in place back when this port was made.

Are you happy for us to use this port under the MIT license?

Thanks also for your hard work on this port! (I can appreciate how much effort went into this after looking at the code and tests.) Are you planning any further updates, to track the various upstream changes?

Layout params are set to NaN

package main

import (
	"github.com/kjk/flex"
)

func main() {
	root := flex.NewNode()
	root.StyleSetWidth(500)
	root.StyleSetHeight(120)
	root.StyleSetFlexDirection(flex.FlexDirectionRow)
	root.StyleSetPadding(flex.EdgeAll, 20)

	image := flex.NewNode()
	image.StyleSetWidth(80)
	image.StyleSetMargin(flex.EdgeEnd, 20)

	text := flex.NewNode()
	text.StyleSetHeight(25)
	text.StyleSetAlignSelf(flex.AlignCenter)
	text.StyleSetFlexGrow(1)

	root.InsertChild(image, 0)
	root.InsertChild(text, 1)

	flex.NodePrint(root, flex.PrintOptionsLayout|flex.PrintOptionsChildren|flex.PrintOptionsStyle)
}

>> go run main.go
<div layout="width: NaN; height: NaN; top: 0; left: 0;" style="flex-direction: ; width: 500px; height: 120px; " >
  <div layout="width: NaN; height: NaN; top: 0; left: 0;" style="width: 80px; " ></div>
  <div layout="width: NaN; height: NaN; top: 0; left: 0;" style="align-self: ; flex-grow: 1; height: 25px; " ></div>
</div>

Any plans to catch up with Yoga?

I'm currently using some C bindings which I assembled and enhanced from different sources. However, it's working but the pure go version is of course much nicer.

Any plans to catch up with the Yoga development? I didn't diff yet to see if Yoga moved forward in the CSS algorithm area at all.