Rotation around custom center

[GoogleCodeExporter]

Hello,

I think it would be nice, if user can rotate some element around arbitrary
point.

Original issue reported on code.google.com by savi...@gmail.com on 30 Jan 2010 at 8:45

[GoogleCodeExporter]

Hello savinko,

I agree this would be a good idea, but I haven't thought up a good UI for it 
yet.  We
need something that's unobtrusive for the normal user, but can be easily 
discovered
for the advanced user.

Original comment by codedr...@gmail.com on 31 Jan 2010 at 7:57

• Changed state: Accepted
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Couldn't we just draw a "+" or a "x" representing the rotation center of the 
object?
Moving this x somewhere else would determine the new rotation center?

Original comment by worms_...@yahoo.com on 3 Feb 2010 at 8:42

[GoogleCodeExporter]

wormsxulla - I like this idea.  I think a node similar (but with some visual
difference) to the rotate handle could be shown in the current rotational 
center of
that element with a line that connects the center to the rotational handle.

By default this would be in the center (obviously).

If the user moved it around, then we would store the rotational center as se:
prefixed attributes and then do use that center point value for all rotation.

If we want to get tricky, maybe we could hide the rotational center unless the 
user
is hovering the mouse with the selected item's bounding box and has the 
mouseup.  In
this way the rotational center handle would not obscure shapes that you just 
want to
move or resize.

Original comment by codedr...@gmail.com on 17 Feb 2010 at 10:25

[GoogleCodeExporter]

I'm working on this feature and as a very start point, I added some lines of 
code in the select.js file (trunk).

Function svgedit.select.Selector.prototype.resize, just before 
'svgFactory_.svgRoot().unsuspendRedraw(sr_handle);' at the end :

// START CODE
cr = cr ? cr : 'cm';
switch ( cr[0] ) {
 case 'l': cx = nbax; break;
 case 'r': cx = nbax+nbaw; break;
}
switch ( cr[1] ) {
 case 't': cy = nbay; break;
 case 'b': cy = nbay+nbah; break;
}
mgr.rotateGripCenter.setAttribute('cx', cx);
mgr.rotateGripCenter.setAttribute('cy', cy);
// END CODE

while 'cr' is defined on top of the function by :
// START CODE
var cr = selected.getAttribute('center');
// END CODE

And where 'rotateGripCenter' is a reference to the SVG object created in the 
function svgedit.select.SelectorManager.prototype.initGroup :
// START CODE
this.rotateGripCenter = this.selectorGripsGroup.appendChild(
 svgFactory_.createSVGElement({
  'element': 'circle',
  'attr': {
   'id': 'selectorGrip_rotatecenter',
   'fill': 'lime',
   'r': 3,
   'stroke': '#22C',
   'stroke-width': 2
  }
 })
);
// END CODE

This only draw a circle at the center of the region and is only a beginning. 
I'm trying right know to add the possibility to the user to change the place of 
this center with the mouse or preselected position : left, center, right, top, 
middle, bottom.

Actually, I would like to be a contributor to this 'so great' project but I 
don't know at all how to proceed. Could you guide be ?

Thanks.

Original comment by gilles.rasigade on 28 Jan 2011 at 4:20

[GoogleCodeExporter]

Hi Gilles - I have sent you a couple emails to what I hope is your Gmail 
address (your googlecode username plus gmail.com).  Let me know if you didn't 
get them.

Original comment by codedr...@gmail.com on 28 Jan 2011 at 4:43