[Matrix] restating the goals?

Since the discussion has exploded to the point of being difficult to follow, with a number of people expressing strong objections to the proposal, I was wondering if it was worth stopping to decide if we can at least agree on the goals at a very high level.

- Have some way to express a CSS (and SVG) transformation in JS that is better than the current solution of the CSS OM (uses long strings which need to be parsed in/out)

- Do this in a way that doesn't break existing content (i.e. we can't change SVGMatrix, as much as we'd love to). This could mean a completely new API.

- Help developers do the common things with simple, performant code. 

When I look at the above, I wonder if the problem comes from this assuming to be a Matrix API. It's really just an API for the native transformations that exist in the platform. Is it possible to think of it as a way to accomplish a transformation in JS that corresponds to what you'd typically use CSS for? e.g.

element.style.transform = "translate3d(10px, 10px, 10px) rotateY(1rad) scale(2)";

Should be able to be expressed something like this:

var t = new Transform();
t.translate3d(10, 10, 10);
t.rotateY(1);
t.scale(2);
element.transformMatrix = t;

This would mean all the inverse/decompose/etc stuff gets dropped, which is fine with me. Again, the target is our transformation implementation, not a general matrix library. If the transformMatrix property, or whatever it is called, accepted a Float32Array, then people could use whatever matrix library they want.

Or, to give an example on the goals (copied from another message):

Improve this code:

function rotateMyObject(element, delta) {
  var currentTransform = window.getComputedStyle(element).transform; 
  // ouch, that's a matrix string... i need to somehow convert it to an object i can use
  // ... time passes
  var currentTransformMatrix; // I've converted it to something useful now
  // now I need to rotate it...
  // I either use some library or do it by hand
  // ... time passes
  // ok... now to set the transform...
  element.style.transform = "matrix3d(" + currentTransformMatrix.array[0] + ", " ......
  // note the above will have to go through the CSS parser, etc
}

Into something as simple as this:

function rotateMyObject(element, delta) {
  element.style.transformMatrix = window.getComputedStyle(element).transformMatrix.rotate(delta);  // API completely invented here
}

Honestly, I don't really care what the solution is (Typed arrays, new objects, elephants...)

Dean

Received on Thursday, 21 March 2013 22:01:40 UTC