AngularJS-SVG拖动旋转的元素

Question

I'm having an issue with a rotated SVG Element with an own coordinate space. The normal drag and drop doesn't work. For example: The element moves right instead of up and left instead of down. I looking for a simple solution to use a normal drag and drop for SVG Elements with different degree settings.

A demo can be seen here http://jsfiddle.net/jmdajkkb/

HTML-View:

<div ng-app>
    <div ng-controller="myController">
        <svg style="height: 612px; width: 612px;" ng-mouseup="mouseUp()" ng-mousemove="mouseMove($event)">
            <rect fill="orange" width="100" height="100" ng-mousedown="elementMouseDown($event)"  ng-attr-x="{{element.x}}" ng-attr-y="{{element.y}}" ng-attr-transform="rotate({{element.rotation.degree}}, {{element.rotation.x}}, {{element.rotation.y}})" />
        </svg>
    </div> 
</div>

JavaScript:

function myController($scope) {
    $scope.element = {
                "x": 350,
                "y": 50,
                "rotation": {
                    "degree": 60,
                    "x": 50,
                    "y": 50
                }
            };

    var isDragging = false, x, y;    

    $scope.elementMouseDown = function(eventArgs){
        isDragging = true;
        x = eventArgs.clientX;
        y = eventArgs.clientY;
    };

    $scope.mouseMove = function(eventArgs) {
        if(isDragging) {
            $scope.element.x += eventArgs.clientX - x;
            $scope.element.y += eventArgs.clientY - y;

            x = eventArgs.clientX;
            y = eventArgs.clientY;
        };
    };

    $scope.mouseUp = function() {
        isDragging = false;
    };
}

By the way, should the "Drag and Drop" logic be placed in the controller or in a directive?

UPDATE

Yes, with additional translate in transform it works. But in my project we have a little more complicated scenario.

The user can insert more elements (rectangles) at run time. He can select one element by clicking on it and use drag & drop or rotate features. The selection Elements are available in a separate group with circles.

Here`s the new code to get a better view: http://jsfiddle.net/kjaxdf8c/

Answer 1

I have found solution. Here is code, it works:

   app.directive('svgInternal', function () {
   var telo ='<g ng-mousedown="elementMouseDown($event)" ' +
   'ng-attr-transform=" translate({{element.x}},{{element.y}})'+
   'rotate({{element.rotation.degree}},'+
   '{{element.rotation.x}}, {{element.rotation.y}})">'+
   '<rect class="rect" fill="orange" width="100" height="100"'+
   ' '+
   '  />'+
   '<g class="rect" ng-show="isSelected" ng-attr-transform=" translate({{ 
   -element.x}},{{-element.y}})">'+ 

          '<circle fill="#3EA3DC" stroke-width="2" ng-attr-cx="
         {{elementSelections[0].x}}" ng-attr-cy="{{elementSelections[0].y}}" 
   r="8" />'+
            '<circle fill="#3EA3DC" stroke-width="2" ng-attr-cx="
   {{elementSelections[1].x}}" ng-attr-cy="{{elementSelections[1].y}}" r="8" 
   />'+
            '<circle fill="#3EA3DC" stroke-width="2" ng-attr-cx="
   {{elementSelections[2].x}}" ng-attr-cy="{{elementSelections[2].y}}" r="8"  
   />'+
            '<circle fill="#3EA3DC" stroke-width="2" ng-attr-cx="
   {{elementSelections[3].x}}" ng-attr-cy="{{elementSelections[3].y}}" r="8" 
  />'+

        '</g><text x="0" y="15" fill="red">{{element.x}}</text></g>';

return {
  templateNamespace: 'svg',
  template: telo,
  restrict: 'E',
  replace: true
};

});

Best regards from Goran