constraint-solver

a cassowary constraint solver. wraps kiwi.js with better ergonomics.

Declares a mini language to declare constraints in text rather than code.

Requires node >= v12.17 or a browser that supports es modules.

usage

import constraints from 'constraint-solver'


const layout = constraints(`
	editable window.width strong
	editable window.height

	modal.width  <= window.width * 0.95   required
	modal.height <= window.height * 0.95  required
	
	modal.left   == (window.width - modal.width) / 2   required
	modal.top    == (window.height - modal.height) / 2 required

	playlist.width  == modal.width / 3
	playlist.height <= videoContainer.height  required
	playlist.top    == modal.top              required
	playlist.left   == modal.left + videoContainer.width

	videoContainer.width  == modal.width * 0.66
	videoContainer.height == modal.height
	videoContainer.top    == modal.top            required
`)

layout.suggestValue('window.width', 1024)
layout.suggestValue('window.height', 768)

layout.updateVariables()

console.log(layout.getValues({ roundToInt: true }))

/*
{
  window.width: 1024,
  window.height: 768,
  modal.width: 972,
  modal.height: 729,
  modal.left: 25,
  modal.top: 19
  playlist.height: 729,
  playlist.left: 667,
  playlist.top: 19,
  playlist.width: 324
  videoContainer.height: 729,
  videoContainer.top: 19,
  videoContainer.width: 642
}
*/

how it works

The language is defined in a pegjs grammar, which generates a parser javascript module. That module is capable of taking a string of source code as input, and produces json containing all the parsed tokens. These tokens are turned into kiwi.js constraints and variables.

┌-----------------┐                       ┌----------------------------┐        ┌-----------┐
|input constraints|        ┌-----┐        |intermediate representation |        |ir to kiwi |
|(raw text)       | -----> |pegjs| -----> |    (ir, in json)           | -----> |solver     |
└-----------------┘        └-----┘        └----------------------------┘        └-----------┘
                                             (accepts tokens as input)