Get coordinate relative to other elements whith css transform involved

Get coordinate relative to other elements whith css transform involved

I'm thinking about a way to get coordinate of an element relative to another element when there is transform applied in between (either directly on those elements or somewhere on the dom tree).

We can easily convert coordinate with the used of getComputedStyle().transform which return the matrix to apply. I have a running code doing it.

We could do this way :
All function would take the first element.

 - jQuery.toPageCoordinate() would return a function(x,y) to convert coordinate relative to element into document's coordinate. Depending on which use case we want to handle, this may be useless since UIEvents already returns pageX and pageY.

 - jQuery.fromPageCoordinate() would return a function(x,y) to convert document's coordinate into coordinate relative to the element.

 - jQuery.positionRelativeTo( element2 ) an utility function using the 2 previous one.

Here is the pseudo code for the 2 first : 
  1. toPageCoordinate(){
  2.       var matrix = new Matrix(); //identity matrix
  3.       var el = this[0];
  4.       
  5.       do{
  6.             matrix.translate( el.offsetLeft, el.offsetTop );

  8.             var transform = window.getComputedStyle(el).transform;
  9.              if(transform)
  10.                  matrix.multiply( parseTransform( transform) );
  11.              
  12.             el = el.offsetParent;
  13.       } while( el );

  15.       matrix.inv();

  17.       return function(x,y){
  18.              return matrix.applyVect(x, y);
  19.       }; 
  20. }

  22. fromPageCoordinate(){
  23.        var matrix = new Matrix(); //identity matrix
  24.        var el = this[0]; 
  25.        var els = [];
  26.        
  27.        do{
  28.             els.push(el);
  29.            el = el.offsetParent; 
  30.       }while( el );   

  32.       for(var i = els.length-1; i >= 0; i--) {
  33.             el = els[i];            
  34.  
  35.             matrix.translate( -el.offsetLeft, -el.offsetTop );                                       

  37.              var transform = window.getComputedStyle(el).transform;
  38.              if(transform)
  39.                  matrix.multiply( parseTransform( transform) );
  40.          }

  42.          return function(x,y){
  43.             return matrix.applyVect(x, y);
  44.       }; 
  45. }

The Matrix object is common stuff and parseTransform() shouldn't be difficult :
  1. parseTransform( transformStr ){
  2.        var floatArr = transformStr.split(/\(|,|\)/).slice(1,-1).map( function(v){
  3.        return parseFloat(v);
  4. });
  5.             
  6.       if( floatArr.length == 6 )
  7.             build a 3x3 matrix from the 6 values
  8.       else
  9.             build the 4x4 matrix directly from the 16 values
  10. }

So is this a good idea or does jQuery shouldn't introduce Matrix computation ?

cheers.