Scale(-1 1) transforms interfere with drag/rotate

[Mike Cassells]

I use Snap to drag and rotate SVG shapes.  The shapes are SVG groups of paths, the groups having some initial "transform" attribute values.  Holding the shift key allows rotation of a group.

It generally works well, but if a group has an initial transform that includes a scale(-1 1), then things break.

In my fiddle, the blue box has the scale(-1 1) transform.  It can be dragged anywhere.  But after any rotation operation, subsequent drags have the box no longer following the cursor.

The red box does not exhibit this problem.  It has simple "translate" initial transforms.

I've tried with a "scale(2 2)" initial transform without any problems.

Fiddle here https://jsfiddle.net/spamhole/dp6kvzxm/

[Ian]

You probably need to add some extra code to allow for the dragging etc...

It's a while since I've take a look at it, but maybe look at 

http://svg.dabbles.info/snaptut-dragplugin  &

http://svg.dabbles.info/snaptut-altdragnew

Ian

[Mike Cassells]

Thanks for hints, Ian.

I solved the problem by not using Element.transform().local when storing the original transform, just Element.transform()

function snapDragStart(x, y, event) {

   .

   .

  this.data('origTransform', this.transform());

  .

  .

}

My linear algebra has been 30 years in storage, so I don't understand the distinction myself.  Fiddle updated.

Thanks, Mike.