Dear SVG WG,
While developing Raphaël I came across different issues with SVG API as a developer and in this letter I am going to share my experience of these issues and, more importantly, my approach to solve them with Raphaël API.
Start with easy one.
getBBox() — doesn’t take transformations into account. I guess there are cases when this is useful, but it would be nice to have ability to get bounding box of the object after transformation as well. Also I added x2 & y2 as a returning values. This made developer life a bit easier.
The API for transformations are way to verbose, from coding point of view it should be relatively easy to set and get(!) transformation of an element. Getting is an issue. I decided for Raphaël to copy path string approach where you have set of command with parameters. So, I made commands for transformations: “t”, “r”, “s” & “m”, which are translate, rotate, scale and matrix.
transform=”translate(100, 100) rotate(45deg, 100, 100)”
is equal to this transform string:
t100,100r45,100,100
I also noticed that all transformations are relative, i.e. depend on a previous one. I added commands for absolute transformations: “T”, “R” & “S”. For rotation it’s origin of rotation that remains absolute. For scale I added origin of scale; it’s really not fair that rotation has origin, but scale always scale around 0,0. When origin is not specified I use center of bounding box as an origin. I am not going deep into syntax it basically the same as path string, just different commands. It’s implemented in Raphaël since 2.0.0 and I received some positive feedback on it.
There are some methods I implemented in Raphaël that I (and pretty much any developer) would be keen to see in DOM API:
isPointInside(x, y), returns boolean value depends on if given point inside or outside of the shape.
getElementsByPoint(x, y), returns array of elements that shapes contain given point.
isPointInsideBBox()
isPointInsidePath(), these two are self explanatory, but notice that they don’t use DOM.
pathBBox(), same no DOM harmed
pathIntersection(), give array of points for intersection of the two paths.
transformPath(pathstring, transformstring), return path string after transform string was applied to it.
getPointAtLength() , which will in addition to x, y give alpha as angle of derivative at the point.
And here some methods that I didn’t implement yet, but would be awesome to have:
Logical operators on path line add, subtract, intersect, etc.
Finding the offset of the path.
In general would be awesome to do some work on the paths without creating a DOM element.
In addition to standard animation API:
el.animate(to, ms, callback);
I added ability to create an animation object:
var a = Raphael.animation(to, ms, callback);
el.animate(a);
Now, you can ask element for it’s status:
var s = el.status();
this will return array of animations and their current status in form of 0..1. Alternatively you can write:
var s = el.status(a);
this will simply return your number 0..1 as a status of given animation. You can also pass a value into status, like this:
el.status(a, 0.5);
this will set animation to the middle stage, like if it jump back (or forward) to the middle. This simple addition to API makes it very flexible especially with custom attributes.
You can watch this video here: https://vimeo.com/37155152 In short, you can create a function that returns set of attributes and assign it as a attribute with a custom name.