slightlyoff / cassowary.js Goto Github PK

Is there documentation or a list of API methods somewhere? I'm not sure how to get started. The Getting started under Node section of the README hints at how to use this library, but it does not give a full example or list the available methods.

The current demo is incredibly slow due to the number of solves that are triggered by the addition of each individual constraint. Disabling autoSolve, however, causes our constraints to generate incorrect results today. Investigate why, add stays where necessary, and turn off autoSolve to improve demo performance.

The deficit below remains at 0 after the balance constraint is applied. I must be doing something incorrectly. Is there something I am missing here?

var spending = new c.Variable({value: 3598});
var revenue = new c.Variable({value: 2328});
var deficit = new c.Variable({value: 0});

var balance = new c.Equation(
    c.minus(spending, revenue),
    deficit,
    c.Strength.required, 0);

console.log('Spending', spending);
console.log('Revenue', revenue);

console.log('Deficit Before', deficit);
solver.addConstraint(balance);
console.log('Deficit After', deficit);

Even copying this test:
https://github.com/slightlyoff/cassowary.js/blob/master/tests/End-To-End-test.js#L20-L31

Will fail, running the unit tests do not fail, but using c.js from bin is where this is happening

I should clarify, from the unit test above:

var solver = new c.SimplexSolver();

var x = new c.Variable({ value: 167 });
var y = new c.Variable({ value: 2 });
var eq = new c.Equation(x, new c.Expression(y));

solver.addConstraint(eq);
console.log(x.value, y.value)

x.value will be 0
y.value will be 0

Maybe that is indeed the correct value and I just understand it wrong?

It looks like I need to: solver.addStay(x); and I will get x and y to be 167. I guess that makes sense in an equal situation. One of the 2 sides of the equality needs to take precedence, I suppose the addStay() does that?

If no stay is added why are the variables zero'd?

I was trying to figure out how to update the value of a stay so I thought I'd require the ../cassowary/src/c.js or ../cassowary/index.js. I added cassowary.js as a submodule and the paths are working fine. The only problem is that webpack doesn't understand the module pattern that's being used. I was thinking of refactoring the modules and using browserify or webpack as the build system. Thoughts?

Also, how does one update the value of a stay?

Table elements create several exclusive layout modes, some of which are based on replaced content resolution. Implement support for these modes in Block::generate() or some subclass implementation.

Currently, when you try to add a required constraints that conflicts with a required constraint already in the solver, the solver just throws a c.RequiredFailure with the message "A required constraint cannot be satisfied".

It would be useful to have additional information. Something like "Unable to satisfy simultaneously the following constraints : [constraintYouTryToAdd, constraintInTheSolver]"

Since Cassowary only supports linear equality/inequality relationships, having to type "Linear" in front of everything is entirely redundant.

Rename all classes (and uses) like:

• c.LinearExpression -> c.Expression
• c.LinearEquation -> c.Equation
• c.LinearInequality -> c.Inequality
• c.LinaerConstraint -> c.Constraint

it seems that the c.LinearInequality doesn't accept a c.LinearExpression as first parameter in constructor if the third parameter is a number

so given the following coffeescript abbreviated setup:

required = c.Strength.required

x = new c.Variable(10)      
w = new c.Variable(10) # width         
r = new c.LinearExpression(x).plus(w) # right

the following x >= 20 test works as expected:

test1.solver.addConstraint new c.LinearInequality(x, c.GEQ, 20) 
alert x.value() # expects and gets 20

the following r == 100 test also works as expected:

test2.solver.addStay w
test2.solver.addConstraint new c.LinearEquation(r, 100, required) 
alert x.value() # expects and gets 90

but the following r >= 100 test throws an error:

test3.solver.addStay w
test3.solver.addConstraint new c.LinearInequality(r, c.GEQ, 100, required) 
alert x.value() # expects 90... 
# throws error: "Constraint.js:43Uncaught TypeError: Object 1 has no method 'isRequired"

i'm assuming, just as we can use c.expressions, numbers or c.variables on either side of an c.equation, we should be able to do the same with c.inequalities...

it appears to be the way the arguments are handled in the C.LinearInequality.initialize function...

Lines 758-768 of SimplexSolver.js read like this:

      // Find the most negative coefficient in the objective function (ignoring
      // the non-pivotable dummy variables). If all coefficients are positive
      // we're done
      terms.escapingEach(function(v, c) {
        if (v.isPivotable && c < objectiveCoeff) {
          objectiveCoeff = c;
          entryVar = v;
          // Break on success
          return { brk: 1 };
        }
      }, this);

Unless I'm misreading the code, this find the first negative coefficient and then breaks, not the most negative coefficient.

When including in a project that also has amd components, exports is getting added to window which prevents modules that check for both commonJS and AMD fail if they look for the existence of exports as does PIXI.js (see gss/engine#47).

Also causing problems when loading GSS with Require.js

Source of problem:

// For Node...not that I'm bitter. No no, not at all. Not me. Never...
if (typeof require == "function" &&
    typeof module != "undefined" &&
    typeof load == "undefined") {
  scope.exports = c;
}
// ...well, hardly ever.

http://asmjs.org/spec/latest/

Now that Map is optimized in Chrome (for string and integer keys), we should investigate using it for c.HashTable

Once we have a general direction for the new API, build a shim layer to use while we transition off the old one. Once the shim is in place, the API is agreed, and all of our demo/test code uses it, remove the old API.

Z-index and other forms of paint-order control are currently unimplemented. Add a processing pass to the block/box lists to correctly order boxes for painting both globally and locally

When trying to run the demos/css/canvas-renderer.html example, the JS crashes.

Uncaught TypeError: undefined is not a function in layout.js:868

Currently, restricted variables (non negative) are only allowed internally but not when using the api.
In a UI environment, elements are generally defined by 4 variables and half of them are expected to be non negative (width and height).
It would be easier for developers to just declare these variables as restricted rather than adding v>=0 constraints for all the variables.

The core of the solver (SimplexSolver.js and Tableau.js) are the crux of finally eliminating the last traces of the custom hash table implementation. Re-writing the solver core to be idiomatic, modern JS that's fully documented is something we should do sooner-rather-than later. It'll also give us the chance to implement Marriot, Moulder, Stukckey, and Borning's disjunctive constraint additions.

Like it says on the tin.

If and attempt is made to add edit vars with the "required" strength an Error: (c.InternalError) Constraint not found in removeEditVarsTo exception occurs.

See test case in pull request #59

I don't understand enough about cassowary internals to fix this. Any help appreciated.

Hello,

I found 2 methods to change a variable coefficient but both of them are problematic:

1- Using Expression.setVariable. The problem: the coefficient of the variable within the expression seems to be correctly updated but not within the tableau. Is it normal?

A simple example to illustrate the problem:

var solver = new SimplexSolver();
solver.autoSolve = false;

var x = new Variable({ name: 'x', value: 5 });

var myExpression = new Expression(x, 2);
var myConstraint1 = new Inequality(myExpression, GEQ, 5);
var myConstraint2 = new Inequality(myExpression, LEQ, 5);

solver.addConstraint(myConstraint1);
solver.addConstraint(myConstraint2);

console.log(myExpression.toString()); // 2*5
myExpression.setVariable(x, 1);
console.log(myExpression.toString()); // 1*5

solver.resolve();

// At this point x should be equal to 5 if the expression was correctly updated
console.log(x); // x = 2.5

2 - By removing and re-adding constraints. The problem: it gives really poor performance. e.g 2ms to remove and add back a single constraint on a 15 row by 10 columns tableau although it takes 0.05ms to solve it!.

Is there a more friendly and reliable way to cheaply do that coefficient change operation? (I tried to dive in the code but could not figure out what to do!)

Note: I am using cassowary to implement a complex responsive UI and I plan on implementing a branch and cut algorithm based on cassowary in order to solve problems that include integer variables. Therefore I am searching for an efficient way to dynamically change cut constraints.

As per the mailing list discussion, change Stay and Edits to be strong by default.

Line box heights are currently not correctly setting the total height of generated AnonymousBlock items.

Currently, the only way to change the strength or constant in a Constraint is to replace a constraint with a new one with new values.

In a constraint-based UI, the only way to change the size or position of an element is to change the constant of the constraint managing the layout. This is why changing a constant should be simple and efficient.

FYI, set_constant is implemented in a branch of rhea : https://github.com/Nocte-/rhea/blob/0.3/rhea/simplex_solver.cpp#L188

we should always be getting a value. Demos break if we don't null check. Need to determine why and make arguments always explicit to avoid polymorphicness.

Go JS all the way, so cut out python for minifying, maybe use Grunt? Any objections?

Hi guys, I notice there's been a small bit of activity lately so I wanted to check back in.

I have a couple of open PRs that haven't seen any activity so I've been stuck working off of my own local branch with a bunch of fixes. I know maintaining open source projects is hard, I appreciate all the work in here so far, and I am definitely not complaining for having access to such an awesome code base: thanks for everything!

But I now have a project that could use disjunction support and some of the refactoring mentioned in previous issues. I would like to follow normal etiquette and propose things here, get feedback, have someone code review, etc., but not if no one else is going to have time to give feedback and merge back into this master. So let me know if someone with write access here is interested in taking on those kinds of code reviews and I'll let you know when I have something to share.

Thanks again!

As inherited fromt the Greg's original code, the quaddemo has a little bug with the mouse event handlers. if u start dragging one of the db's, but mouseup outside of the canvas and then continue to click the same db, it throws an error and the constraints no longer work.

here's a quick fix of QuadDemo.initEvents that just adds the mouseup to the document (not the canvas) only after a mousedown:

initEvents: function() {
    var that = this;

    mouseupHandler = function(ev) { that.mouseup(ev);
      document.removeEventListener('mouseup', mouseupHandler); }

    this.canvas.addEventListener('mousedown', 
                                 function(ev) { that.mousedown(ev);                                   
                                   document.addEventListener('mouseup', mouseupHandler, false);                                   
                                   },
                                 false);

    this.canvas.addEventListener('mousemove', 
                                 function(ev) { that.mousemove(ev) },
                                 false);
    this.canvas.addEventListener('touchstart', 
                                 function(ev) { that.touchstart(ev) },
                                 false);
    this.canvas.addEventListener('touchend', 
                                 function(ev) { that.touchend(ev) },
                                 false);
    this.canvas.addEventListener('touchmove', 
                                 function(ev) { that.touchmove(ev) },
                                 false);
  },

I was discussing the awesomeness of constraint based layouts to some colleagues, and they were tweaking with the demo and naturally dragging and pulling wildly... the layout kept locking up, not yet familiar with constraints, they thought it was expected behavior...

Hello,

consider the following problem: maximise P = 3x + 4y subject to:

x + y ≤ 4
2x + y ≤ 5
x ≥ 0, y ≥ 0

the maximum P=16 can be obtained with: x = 0, y = 4

The same linear optimisation in cassowary:

var c = require('cassowary');
var solver = new c.SimplexSolver();

var p = new c.Variable({name: 'p'})
  , x = new c.Variable({name: 'x'})
  , y = new c.Variable({name: 'y'});

solver.addConstraint(new c.Equation(p, c.plus(c.times(x, 3), c.times(y, 4))));
solver.addConstraint(new c.Inequality(c.plus(x, y), c.LEQ, 4));
solver.addConstraint(new c.Inequality(c.plus(c.times(x, 2), y), c.LEQ, 5));

solver.addConstraint(new c.Inequality(x, c.GEQ, 0));
solver.addConstraint(new c.Inequality(y, c.GEQ, 0));

solver.optimize(p);

console.log('p: ', p) //15
console.log('x: ', x) //1
console.log('y: ', y) //3

results in P=15, x=1, y=3, which is not the optimum solution. Any idea on what I'm doing wrong?

Thanks
Daniele

Now that we've adopted Map for c.HashTable, perhaps c.HashSet can go faster using the same tricks.

I would use it :)

We currently rely on some proto magic with regards to existing DOM elements to provide the illusion of subclassing HTML elements. Combined with Mutation Observers, this allows us to fake HTML subclassing in the panels demo. We need a way to do the imperative part of this in Gecko (perhaps by routing through the parser first?)

I would like to test whether an equivalent or possibly conflicting constraint exist in the system when I add an user-inserted constraint.

I have some idea myself how to do it, but do I need to? Would you already happen to have a function like this somewhere in the solver?

The build script (such as it is) needs to generate a package.json for use with NPM. See: http://package.json.nodejitsu.com/

http://ci.testling.com/

I noticed your comment on Greg Badro's blog stating you saw a 2x speed boost from the original js port. Awesome! Do you have any tests that demonstrate this, jsperf or whatever? Did you see a general speed boost or for particular cases? Is the performance boost to just from removing external libraries?

I think dual-licensing the project as LGPL / MIT or BSD would allow more developers to use it.
I just spoke with Greg Badros and he's open to using another license.

In the bin directory there are two files c.js and c.min.js. Both files seem to be minified and the c.min.js is actually slightly larger. What is the difference between the two files?

Add edit vars with required strength, like so:

solver.addEditVar(x, c.Strength.required)

always throws Uncaught TypeError: Cannot read property 'hashCode' of undefined: HashTable.js:38

In modelling software, there exist this kind of thing in their constraint solvers. Unconstrained objects are shown blue.

Can this constraint solver do the same?

It should be possible to dump and re-create the solver's state and owned variables from a JSON-style format. Implement such a feature.

Why can't cassowary solve equations with squares? I'm guessing it has something to do with it being a nonlinear function...? I am a beginner to constraint solvers.

var c = require('cassowary');

var solver = new c.SimplexSolver();
var x = new c.Variable();
var squared = c.times(x, x);
var constraint = new c.Equation(squared, 25);
solver.add(constraint);
console.log(x.value);

Results in:

(c.NonExpression) The resulting expression would be non

Move HashTable.js to use Map when possible. We'll need a wrapper for Map at first since the current Straw Man implemented by FF and V8 don't support any sort of iteration.

I'm working on getting forEach(), et al added to the draft in addition to generator-based iteration. Once that's in V8, also remove the wrapper class.

In 72aaec5, a fix for FF support, we introduce an isNaN() check that slows the main perf demo by nearly 100%. Need to understand why NaN was being passed from the CSS demo in the first place and either remove the check or figure out how to optimize away its impact.

The Variable and Expression constructors are infected with some pretty horrible polymorphic detection code. These might have been good choices for C++ and Java, but this style of use plays badly in JS and should be removed.

Now that V8 has optimized getter/setter pairs, rework the API to remove get/set*() methods and move to using properties and getters/setters where it's meaningful.

Today's TextBox class inherits from Inline, meaning it generates far too many constraints and c.Variable instances. Create a simplified constraint and variable set instead.

I think some modifications/bug fixes made to cassowary were not published to npm.
Therefore the build on the github repo (version 0.0.2) does not correspond to the build that gets downloaded through npm (also version 0.0.2). The npm version does not benefit from the latest bug fixes.

Re-build the solver core and associated classes for better readability, performance, and hackability,

The common use-case for Cassowary-based systems is for the solver to run in an incremental mode, moving to a new solution from an existing good solution. In interactive apps, the initial new values may be provided, but it's up to the solver to efficiently find new values for other affected variables. The updated values often need to be fed back into a UI framework to perform on-screen updates.

Cassowary should provide an (optional) facility for notifying observers of variables who values have changed, perhaps as a Map()/HashMap().

It should be possible at every point to determine what constraints determined the value for a particular Variable once a solution is found. The API for this might be something like:

c.extend(c.Variable.prototype, {
   get constraininedBy() {
       return [ /*c.LinearExpression*/ ... ];
   },
   get unconstrainedBy() {
       return [ /*c.LinearExpression*/ ... ];
   },
});