I am reading attributes from an SVG string and passing it to the Bonsai runner.

With the relevant attribute for a Matrix from an svg node being transform='matrix(0,1,0,0,1,1)' I thought it may be useful to others to have this alternative method signature.

var matrix = new Matrix('matrix(0,1,0,0,1,1)'

Thoughts?

These commits fix the callback ambiguity we had across the project. All callbacks are now using the single-callback pattern used in node.js:

foo(function(err, data) {
  if (err) // error
  else // success
});

In addition the argument patterns used in Movie, Video, Bitmap and FontFamily have now been aligned. A convenience callback argument can be used (with the above pattern) or you can simply bind to the load and success events:

new Bitmap(url).on('load', function(){ ... });

Before, this might not have worked if the bitmap loaded immediately from cache. The load event would be fired before instantiation completed, meaning that listening for it after that would be pointless.

But now, using a new asyncEmit method on the EventEmitter, we now trigger these events asynchronously. I'm not sure if we want there to be a method especially for this or if we should inline the setTimeout in relevant places. Up for discussion on that.

Add phantomjs+jasmine console test runner with a new make command make test-local to run tests quickly in the browser without the need for uxebu's CI integration.

This would solve the issue of #77 with allowing any commiter to run tests locally.

I’ve started work on #134 to implement the stroke-dasharray attribute. (docs: https://developer.mozilla.org/en-US/docs/SVG/Attribute/stroke-dasharray)

I believe everything should be set on the runner side of things, but I’m looking for some pointers on where to go in the renderer/svg/ files to implement the receiving side of things and what the easiest way to visually and jasmine-y test it.

The following

var rect = new Rect(100, 100, -100, -100)
  .attr({fillColor: 'red'})
  .addTo(stage);

console.log(rect.attr('x'));
console.log(rect.attr('y'));
console.log(rect.getComputed('width'));
console.log(rect.getComputed('height'));

prints four times, 100, though x+y should be 0

I was missing a method to get the bounding box of a DisplayObject. I saw that we're supporting getComputed instead, which has a even richer API and can return e.g. the "right" or "bottom" offset. But it still doesn't return the bounding box, which is supposed to return an object like {x, y, width, height}. @davidaurelio proposed a new paramater box that can be passed to getComputed. I would love to field 2 other parameter names. See the list. Would do you like best?

• getComputed('box')
• getComputed('bbox')
• getComputed('boundingbox')

Building upon these previous conversations, here are some converting methods to start accepting angles in any format throughout the project.

https://github.com/uxebu/bonsai/pull/142#issuecomment-9942288 https://github.com/uxebu/bonsai/pull/165#issuecomment-10999392

+@basecode

Thought this would be an easy one to tackle and start looking into some more of the code.

The tests with funcSetup are definitely a lot harder to follow. I had to change the check to a string from an !(node instanceof Node) since the tests createMockNode function returns a simple object.

First issue, assigning a scale via the matrix attribute, then getting the scale doesn’t return the applied scale.

myDisplayObject.attr('matrix', new Matrix(0.5, 0, 0, 0.5, 0 0));
`myDisplayObject.attr('scaleX')` // returns 1. Expects 0.5

Additionally

myDisplayObject.attr('scaleX', 0.5); // if applying a scale without using the matrix setters causes all future calls to setMatrix do nothing
myDisplayObject.attr('matrix', new Matrix(1, 0, 0, 1, 0, 0));

Is this expected?

What was previously the getComputed method is now getBoundingBox.

It takes on optional argument, a Matrix instance which will be used to apply transforms to the calculated bounding-box.

var shape = new Rect(50, 50, 100, 100);

// No transform applied, -- it'll return the bounding-box
// within shape's own coordinate system:
shape.getBoundingBox(); // ~ 0,0,100,100

// Apply shape's own matrix to the calculation
// (gives position in outer coordinate system):
shape.getBoundingBox( shape.attr('matrix') ); // ~ 50,50,100,100

getBoundingBox always returns an object in the form:

{
  top: n,
  left: n,
  width: n,
  height: n,
  bottom: n,
  right: n
}

Included in this pull request is also an algorithm to determine the correct extrema of cubic bezier curves. Checkout the branch and open the bounding-box.js example to see a demonstration of the new getBoundingBox calculation.

• options.delay is not supported
• setSubjects/setSubject could be removed
• keyframes in seconds seems a little bit confusing

var rect = new Rect(0, 0, 200, 200).fill('green').addTo(stage);
var anim = new KeyframeAnimation('1s', {
  '5s': { x: 500 }
});
rect.animate(anim);

I went to your demo page: https://demos.bonsaijs.org/demos/rainbow/index.html and none of those demos would be loading.

I found out that you're loading from the wrong URL: https://cloud.github.com/downloads/uxebu/bonsai/bonsai-0.4.0.min.js

Cheers, Janos

The following example should render the same shape in both pieces of code. Unfortunately the second one screws up the matrix.

var rect = new Rect(100, 100, 100, 100).attr({fillColor: 'red', rotation: 0.78, scaleY: 2});
rect
  .addTo(stage);

// renders different to

var rect = new Rect(100, 100, 100, 100).attr({fillColor: 'red', rotation: 0.78, scaleY: 2});
rect
  .clone({attributes: true})
  .addTo(stage);

A workaround (as long as there is no fix) is to duplicate the matrix too. Like so:

var rect = new Rect(100, 100, 100, 100).attr({fillColor: 'red', rotation: 0.78, scaleY: 2});
rect
  .clone({attributes: true})
  .attr({matrix: rect.attr().matrix}) // this is the workaround, remove it and it renders wrong
  .addTo(stage);

The layering test on orbit.bonsaijs.org contains three tests, of which the last two fail:

Test no. 2 expects that the orange box should appear below the red and blue box but the orange box appears on top of the blue and the red box.

Test no. 3 expects that the blue square appears below the red one after one second but the blue square appears immediately on top of the red square.

Tested in Chrome (48.0) and Firefox (44.0).