CreateJS/EaselJS — pull request #219 by pcantrell (2012-11-29 02:40:08+00:00)
Title: Options hash for DisplayObject constructors

There's a feature I'd like, and am willing to implement. I'm wondering whether you would accept it.

Easel's API has you create a scene graph object, then set its properties:

var house = new createjs.Bitmap();
house.image = houseImage;
house.x = 800;
house.y = 768 - groundHeight - houseImage.height;
background.addChild(house);

Easel doesn't use the common Javascript idiom of accepting a params hash in the constructor. As scenes get complicated, that idiom would be really nice to have. More declarative & nestable code like this ends up being much more readable as scene size grows:

background.addChild(
new createjs.Bitmap({
image: houseImage,
x: 800,
y: 768 - groundHeight - houseImage.height
})
);

No smattering of little vars, everything concise and nested readably.

Shape poses a special problem:

var circle = new createjs.Shape();
circle.x = 50;
circle.y = 100;
circle.graphics
.setStrokeStyle(5, 'round')
.beginStroke('black')
.beginFill('red')
.drawCircle(0, 0, r);
background.addChild(circle);

Properties like stroke width and color are mixed into the graphics object, which leads to little codeballs that can be nasty to decipher (and what •was• the order of those setStroke params again?!?). I propose a few special options for common stroke & fill options, plus a callback for the graphics:

background.addChild(
new createjs.Shape({
x: 50,
y: 100,
strokeWidth: 5,
strokeCap: 'round',
strokeColor: 'black',
fillColor: 'red',
graphics: function(g) { g.drawCircle(0, 0, r); }
})
);

I've prototyped all of this in my project, and it cleans things up a lot!

Thoughts? If I can get together a tidy implementation that doesn't create a mess in all the Easel constructors, would you accept the pull request?