Common Properties and Methods

Late call - callLater(call, scope, delay)

After the graph component is created, it will not enter into effect and draw immediately, which will be handled in the next drawing thread. It means the display size of element, canvas range and size can be acquired late only

For example, the canvas range and node size can be acquired via callLater()

var graph = new Q.Graph(canvas);
var hello = graph.createNode("Hello", -100, -50);
hello.image = Q.Graphs.server;
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello\nQunee", hello, qunee);
 
graph.callLater(function(){
    Q.log('graph bounds: ' + graph.bounds);
    Q.log('hello node bounds: ' + graph.getUIBounds(hello));
});

Print results:

graph bounds: -125.5 , -75 , 256 , 167.4 

hello node bounds: -125.5 , -75 , 51 , 68.4 

For example, delay to call automatic layout, to ensure before layout the component size has been well calculated

var layouter = new Q.TreeLayouter(graph);
graph.callLater(function(){
    layouter.doLayout();
    graph.zoomToOverview();
}) 

Acquire the component of mouse point position - #hitTest(evt) → {BaseUI}

For example, the method of hitTest is used to judge if the mouse clicks on the text label

graph.onclick = function(evt) {
    var target = graph.hitTest(evt);
    if(target instanceof Q.LabelUI){
        Q.log(target.data);
    }
}

Operation results. Clicks the element name by mouse. The text information will be printed via control platform

Update component viewport and redraw the canvas - updateViewport()

Generally the graph component is places at one DIV element. This DIV is so called canvas model. Graph components will be filled fully into this model. By setting CSS and HTML properties, the DIV size may change. Now the size of graph component has to be resized and redrawn

Example

Presses Letter F on the keyboard. Sets CSS style of graph component, to make it fully filled at the browser window

var html = graph.html;
graph.html.style.backgroundColor = '#EEE';
 
graph.onkeydown = function(evt) {
    if(evt.keyCode != 70){
        return;
    }
    if(!graph.oldCSS || html.style.position != 'fixed'){
        graph.oldCSS = {
            position: html.style.position,
            width: html.style.width,
            height: html.style.height,
            left: html.style.left,
            top: html.style.top
        };
        html.style.position = 'fixed';
        html.style.width = window.innerWidth + 'px';
        html.style.height = window.innerHeight + 'px';
        html.style.left = '0px';
        html.style.top = '0px';
        html.style.zIndex = 1000;
    }else{
        html.style.position = graph.oldCSS.position;
        html.style.width = graph.oldCSS.width;
        html.style.height = graph.oldCSS.height;
        html.style.left = graph.oldCSS.left;
        html.style.top = graph.oldCSS.top;
    }
    graph.updateViewport();
}