RaphaelJS 2.1 vs. 1.5.2 getBBox Error

Question

I'm trying to create a draggable graph similar to http://raphaeljs.com/graffle.html (works in both 1.5.2 and 2.1), but I want to include text in the boxes.

I added the text using the suggestion in another question: How can I combine objects in the Raphael javascript library?

This solution works great with RaphaelJS 1.5.2, but it breaks in RaphaelJS 2.1.

jsFiddle Example: http://jsfiddle.net/ScBtZ/

The only difference I have found is that Element.getBBox() returns a very different result.

Sample:

In 1.5.2:

SVGRect
  height: 40
  width: 100
  x: 526.5
  y: 25

In 2.1:

Object
  height: 500780.9482062537
  width: 1009980
  x: 526.51
  x2: 1010506.51
  y: -399735.94795512746
  y2: 101045.00025112627

Am I missing something about the change from v1.5 to v2, or is this odd BBox a bug? Any ideas how I can fix this issue?

Thanks!

Answer 1

Raphael 2 getBBox might be a little buggy but in your case your data is wrong. Try removing the " around the numbers:

http://jsfiddle.net/nhatcher/ScBtZ/9/

Good example!

(note that the other solution is broken in VML)

Answer 2

I got here way after the answer was accepted, but I was still having some issues. If you're like me, you may want to grab the latest dev version off of the Raphael.js GitHub: https://github.com/DmitryBaranovskiy/raphael/

Raphael seems to have incorporated Andreas' answer (on line 1972, not 1300 as was the case when the answer was written). The latest dev release of Raphael worked for me.

Answer 3

Well, it looks like there was an attempt to replace the native method getBBox with a custom implementation, in Raphael. The reasons behind this might be that the native getBBox method has some bugs, and it returns improper results for some shapes. Another reason might be browser portability, I'm not sure if there is a getBBox method in VML.

However, from the values you pointed out is seems like this custom implementation has its flaws. You can use the native getBBox in Raphael 2.x with this code:

var bb1 = obj1.node.getBBox(),
    bb2 = obj2.node.getBBox(),

I tested it and looks good: http://jsfiddle.net/ScBtZ/2/

Answer 4

Raphael did have bug if you are using BBox in combination with transformation . I found a fix which works for me.

Line 1300 in raphael.js

var pathDimensions = R.pathBBox = function (path) {
    var pth = paths(path);
    if (pth.bbox) {
        return clone(pth.bbox) ; // FREEGROUP FIX!!!!!!
    }
    if (!path) {
        return {x: 0, y: 0, width: 0, height: 0, x2: 0, y2: 0};
    }

Answer 5

Andreas' answer is right...

also reffered at https://github.com/DmitryBaranovskiy/raphael/issues/543

clone is the right fix if u need to reuse the getBBox() function more than a couple of times as it internally gets changed....

BTW: Thanks to Dimitry for Raphael.js, its really a remarkable piece of work !!