kaplay-layout

implements flexboxs (and possibly grids?) in kaplay using the Yoga layout engine.

installation

install the NPM library.

npm install kaplay-layout
Copy

and then initialize the plugin.

import kaplay from "kaplay"
import kaplayLayout from "kaplay-layout"

export const k = kaplay({
  global: false,
  plugins: [await kaplayLayout()],
})
Copy

usage

kaplay-layout is designed to be as intuitive as possible.

// add a flexbox to the scene
const parent = k.add([
  k.pos(),
  // use rect as a background.
  // you may omit this.
  k.rect(0, 0),
  k.flex(),
])

// add a static child to the parent
// static means its size is not controlled by the plugin.
// it won't grow or shrink.
parent.add([k.pos(), k.rect(20, 20), k.static()])

// add another child to the parent
// it will be placed next to the previous child
const box = parent.add([k.pos(), k.rect(20, 20), k.static()])

// then you can just change the static object sizes!
// and the flexbox will grow accordingly.
k.onClick(() => {
  box.width += 4
  box.width += 4
})
Copy

do note that layout calculations happens during updates. that means you can't read object sizes instantly after they are added to the scene. this is to prevent unnecessary calculations. though you can force a calculation imediately using calculateLayout.

since kaplay-layout only uses position under the hood. scale, rotation, shaders, anchors etc. should just works.

const parent = k.add([k.pos(), k.flexbox(), k.scale(1.1)])
const nested = parent.add([
  k.flexbox(),
  k.pos(),
  k.rotate(45),
  k.anchor("center"),
])
nested.add([k.pos(), k.static(), k.text("it just works!")])
Copy

(hint: you should always use pos to avoid edge cases even if flexbox works without them)

percent lentghs and every flexbox properties also works.

const parent = k.add([
  k.pos(),
  k.rect(0, 0),
  k.outline(1),
  k.flexbox({
    minWidth: 100,
    padding: 10,
    minHeight: 100,
    flexDirection: "row",
    justifyContent: "start",
    alignItem: "strech",
  }),
])
parent.add([
  k.pos(),
  k.rect(0, 0),
  k.outline(1),
  k.flexbox({
    maxHeight: "20%",
    flex: 1,
  }),
])
Copy

documentation

check out the documentation.

textbox?

I planned to add align baseline and proper text support... soon. bear with me a little.

grids?

taffy is a layout engine that supports both grids and flexboxes. but it doesn't have an offical WASM bindings right now.

I'm definitely not learning rust just to port it over to JS. but when it finally does, I'll migrate over to it. I promise that the API won't change too much.

contribute

feel free to submit things (do try to format them proper though).

clone the repo and then install the dependencies,

git clone https://github.com/hinum/kaplay-layout.git
cd ./kaplay-layout
npm install
Copy

to build the repo run,

npm run build
Copy

to run the tests run, (you need to have a browser installed ofc)

npm run test
Copy

to build and optionally preview the documentation run,

npm run docs
npm run docs:preview
Copy