resize SVG Element: best practice with multiple items - svg

Question

What is the best practice for resizing say an Ellipse or Rectangle on another SVG element?
If I check for the onMouseMove event on the ellipse when I am out of it, the resizing stops. I was thinking to implement the listener on the svg element as well and pass the information to the ellipse I started the resizing on. This means having a generic Resize() method on the svg element that passes to the Resize() of the selected ellipse.
Isn't there an easier way?
I'm currently doing it with Dart, but it should be the same with javascript.
An example is an <svg> element with a <g> containing <rect> and an <ellipse>. If I start to resize the rectangle on a rectangle.onMouseMove, the moment I'm outside it, it stops resizing. To avoid this, I have to use the svg.onMouseMove, and use a resize method that resizes the rectangle. To know that it's the rectangle to be resized, I check for onMouseDown and again check the target (MouseEvent.target on Dart. Not sure how to detect what I'm touching without doing a cumbersome check on id maybe). Note that what I am trying to accomplish is to use the rectangle to resize the ellipse. I'm showing the rectangle only when resizing.

Answer 1

The following code will create a circle and resize when you start dragging.
It also works when the mouse gets outside the circle.
Maybe you can modify this to your liking.
Oh, and my Dart-code might not be the best, as I just recently started learning Dart.
Any improvements are welcome.
import 'dart:html';
import 'dart:svg';
import 'dart:math' as math;
void main() {
// add new svg
var svg = new SvgSvgElement();
svg.style.width = '400px';
svg.style.height = '400px';
svg.style.border = '1px solid black';
var body = document.querySelector('body');
body.append(svg);
// add group
var g = new SvgElement.tag('g');
svg.append(g);
// center of circle
var center = new math.Point(200, 200);
var startR = 70;
var newR = 70;
// add circle
var circle = new CircleElement();
circle.setAttribute('cx', center.x.toString());
circle.setAttribute('cy', center.y.toString());
circle.setAttribute('r', startR.toString());
circle.setAttribute('fill', 'green');
g.append(circle);
circle.onMouseDown.listen((MouseEvent E) {
var startOffset = E.offset;
var startDistance = startOffset.distanceTo(center);
math.Point offset = E.offset;
// now start listening for document movements so we don't need to stay on the circle
var move = document.onMouseMove.listen((MouseEvent E) {
// calculate new position
var movement = E.movement;
offset = new math.Point(
// multiply with 0.5 to make the mouse move faster than the circle grows
// that way we show that the mouse movement also works outside the circle element
offset.x + movement.x * 0.5,
offset.y + movement.y * 0.5
);
// calculate new distance from center
var distance = offset.distanceTo(center);
// calculate new radius for circle
newR = distance / startDistance * startR;
// resize circle
circle.setAttribute('r', newR.toString());
});
// and stop all listening on mouseup
var up = document.onMouseUp.listen(null);
up.onData((MouseEvent E) {
move.cancel();
up.cancel();
startR = newR;
});
});
}
Hope this helps,
Kind regards,
Hendrik Jan