Qooxdoo: SVG and element actions question

I need to draw relations between some tables, like it is made in Wwwsqldesigner.

But I want开发者_运维知识库 to know some aspects of Qooxdoo before.

If I put all structure into SVG, and using draggable rectangles with inner text to show table relations, can I define "onDrag" function to redraw parts of SVG like paths?

Or I have to redraw svg elements with reactions on mouse of parent element (like it is realised in freedraw)? If it is so, how can I find element under cursor, that being clicked?

The SVG contrib takes care of the distinction between qooxdoo events and native (DOM) events, so you can even do it "the qooxdoo way", and register the click handler straight on the SVG element:

var rect = new svg.shape.Rect;
rect.addListener("click", function(e) {
  alert("Clicked the rect");
}, this);

The event object gives you the DOM element, but not the qooxdoo object. But you can find out which qooxdoo object the user clicked at, by using some of qooxdoo's internals like this:

rect.addListener("click", function(e) {
  var obj = qx.core.ObjectRegistry.fromHashCode(ev.getCurrentTarget().$$element);
  //obj === rect !!
}, this);

The SVG element classes do not support a drag event. But you can implement dragging yourself using mousedown and mouseup events. In the SVG contrib, there is a basic implementation of that in svg.behavior.Draggable, which you use like this:

//this is enough to make the rect draggable
var draggable = new svg.behavior.Draggable(rect); 

Currently, the Draggable class is not all that useful yet and does not have many features, but you can use it as an example of how to make your own implementation.

By the way, the Draggable class attaches the mousedown listener to the SVG element, and the mousemove and mouseup listeners to the element's parent (like the freedraw demo). This is because it's possible to move the mouse out of the rectangle while dragging, if you move the mouse quick enough. That would cause the dragging to stop even if the user didn't release the mouse button.

You can register a click event to the DOM element:

 var element = document.getElementById("table1");
 qx.event.Registration.addListener(element, "click", function(e) {
   alert("click");
 }, this);