rotation drag

Drag to move. Shift click and drag left/right to rotate.

Using multiple translates in the transform property didn’t work:

transform(d){
  return [
    '  translate(', center,
    ') scale(', d.scale,
    ') rotate(', d.rotate,
    ') translate(', negPos(center), ')'
  ].join('')
}

So I multiplied several affine transformation matrices together to compose the transforms. Math in JS isn’t super pretty:

var m = [
  a[0]*b[0] + a[2]*b[1], a[0]*b[2] + a[2]*b[3], a[0]*b[4] + a[2]*b[5] + a[4], 
  a[1]*b[0] + a[3]*b[1], a[1]*b[2] + a[3]*b[3], a[1]*b[4] + a[3]*b[5] + a[5], 
]

return [m[0], m[3], m[1], m[4], m[2], m[5]]

But things could always be worse.

Update: Robert Monfera pointed out that the above transform string was using the wrong variable to translate, the following does work:

transform(d){
  return [
    '  translate(', d.offset,
    ') translate(', d.centroid, ')',
    ') scale(', d.scale,
    ') rotate(', d.rotate*180,
    ') translate(', negPos(d.centroid), ')'
  ].join('')
}