Alternative code-based syntax

[amannn]

Slalom is definitely an incredible approach to make physics-based UIs quicker to develop and way more approachable. I really hope this turns out into a mature library.

Since there is no discussion page on Github, I'll write this as an issue. But please feel free to close this anytime you like to.

I like the idea of the JSON-based syntax, but the String-based syntax feels a little bit weird to write to me. I thought maybe there could actually be a nice way to have it in a more code-based way, so I gave it a shot. I wanted to have it work in a way that integrates nicely with ES6 and code completion features of text editors.

The sample is based on your Pager.js file.

import { Box, Constraint, MotionConstraint, System, Manipulator } from 'Slalom';

var clipDomEl = document.getElementById('clip');
var clip = new Box(clipDomEl);
var contentDomEl = document.getElementById('content');
var content = new Box(contentDomEl);

// Set up physics system with parent box
var system = new System(clip);

system.addConstraints([
    new Constraint(() => clip.left === 0),
    new Constraint(() => clip.top === 0),
    new Constraint(() => clip.right === 750),
    new Constraint(() => clip.top === 750),
    new Constraint(() => content.right === content.left + 3000, {
        strength: Constraint.STRONG }),
    new Constraint(() => content.left === 0, {
        strength: Constraint.WEAK }),
    new Constraint(() => content.top === 0)
    new Constraint(() => content.bottom === 150)
]);

system.addMotionConstraints([
    new MotionConstraint(() => content.left <= 0, {
        physicsModel: MotionConstraint.CRITICALLY_DAMPED })
    new MotionConstraint(() => content.left >= 750, {
        physicsModel: MotionConstraint.CRITICALLY_DAMPED })
    new MotionConstraint(() => content.left % 150, {
        overdragCoefficient: 0,
        physicsModel: MotionConstraint.CRITICALLY_DAMPED })
]);

content.addManipulator(new Manipulator({ x: 'left' }));

Sadly, for now I don't have a deep understanding for the underlying functionality, therefore I don't know if this syntax could work. Especially since the equations can't be parsed out, but are there as regular JavaScript equations. Anyhow, this is a way I'd really enjoy to use it. Maybe it can serve for some inspiration.

If that syntax doesn't work, maybe this could be a variation to increase semantics:

clip.left.addConstraint(Constraint.EQUALS, 0);
content.left.addConstraint(Constraint.LOWER_THAN_OR_EQUALS, 0);

[iamralpht]

I like the syntax! The current solver (cassowary) puts the constraints in a simplex matrix, so this syntax wouldn't work for that, but it would work on a different kind of solver. I have been looking at the HotDrink solver which creates a DAG from the constraints (so recursively dependent constraints would no longer be allowed, but I don't think I've needed them in Slalom).

I think I need to keep the constraints with either a parsed form, or constructed from functions so that I can define custom operators (like moduloAdjacent...).

[mcbain]

https://github.com/IjzerenHein/autolayout.js#extended-visual-format-language-evfl

This is an extension of apples vfl. Also contains a pegjs parser. Can easily combined with conditional and motion constraints and parsed at build time