Qooxdoo : SVG 및 요소 작업 질문

Question

Wwwsqldesigner과 같이 일부 테이블간에 관계를 그릴 필요가 있습니다.

하지만 이전에 Qooxdoo의 일부 기능을 알고 싶습니다.

SVG에 모든 구조체를 넣고 내부 텍스트가있는 드래그 가능한 사각형을 사용하여 테이블 관계를 표시하는 경우 "onDrag"함수를 정의하여 SVG와 같은 부분을 다시 그릴 수 있습니까?

또는 부모 요소 (예 : freedraw에서 실현 됨)의 마우스를 사용하여 svg 요소를 다시 그려야합니까? 그렇다면 커서 아래에있는 요소를 어떻게 찾을 수 있습니까?

Answer 1

SVG에있는 contrib은 당신이 그것을 할도 수 "를 qooxdoo 방법, qooxdoo 이벤트와 네이티브 (DOM) 이벤트 사이의 구별을 담당

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

이벤트 객체는 당신에게 DOM 요소를 제공하지만,하지 qooxdoo 개체 : "똑바로 SVG 요소를 클릭 처리기를 등록합니다. 하지만 사용자가이 같은 qooxdoo의 내부의 일부를 사용하여,에서 클릭 개체를하는 qooxdoo 찾을 수 있습니다 :

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

SVG 요소 클래스는 드래그 이벤트를 지원하지 않습니다. 그러나 mousedown 및 mouseup 이벤트를 사용하여 직접 드래그를 구현할 수 있습니다. SVG에있는 contrib에서이 같이 사용 svg.behavior.Draggable에서 그 기본 구현이 :

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

가 현재 드래그 가능한 클래스는 아직 모두 유용하지 않습니다 많은 기능을 가지고 있지 않습니다가, 그러나 당신은 당신 자신의 구현을 만드는 방법의 예로서 그것을 사용할 수있다.

그런데 Draggable 클래스는 mousedown 수신기를 SVG 요소에 연결하고 mousemove 및 mouseup 수신기를 freedraw 데모와 같이 요소의 부모를 연결합니다. 마우스를 빠르게 움직이면 드래그하는 동안 마우스를 사각형 밖으로 움직일 수 있기 때문입니다. 사용자가 마우스 버튼을 놓지 않은 경우에도 드래그가 중지됩니다.

Answer 2

당신은 DOM 요소에 클릭 이벤트를 등록 할 수 있습니다

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