d3.js - Rotate a resized rectangle with SVG and Javascript -

i'm using d3js , svg resize , rotate rectangles, capture mouse events on handles positioned in each corner of rectangle, there 2 handles in each corner, 1 resizing (square) , other rotate (circle).

when following process, rectangle "jumps" location one:

• rotate (it means it's not more in 0 degrees)
• resize (any direction)
• rotate again (here when shape "jumps")

the jump occurs when center of rectangle updated, using transform rotate svg.

one thing gave me lead updating rotation center while shape being resized, when shape starts move final position "jump" have placed it.

i can post code examples, take time do, if helps see problem, no problems.

all need direction had problem.

edit:

i've made plunker current structure i'm using in project. events controls concentrated in svgapp.directive.js. things i've noticed while developing example:

• the center of element not correctly calculated after angle not zero, this main issue;
• if apply {{vm.model.image.transform.rotate}} ng-attr-transform attribute in center <circle> element, going notice how in correct center (the right circle - blue - commented @ bottom of main svg);

i know not perfect version of tool, still has bugs, inversion of mouse direction (resize/rotate handles) while rotated, it's documented , structured close how i'm working on project.

the plnkr: http://plnkr.co/edit/fxt0kzcrwjtpb7wqvhpg?p=preview

any problem appreciated.