HT for Web Edge Type Maunal

Index

Overview

The HT for Web provides the default line and multicast lines can fit most basic topological graphics applications, however, more types of edge are needed for applications such as drawing flowcharts, organization charts, and mind maps, for which the HT for Web provides a edge type extension library that meets more application requirements.

The edge type described in this section requires the introduction of the ht.js core library and the introduction of a ht-edgetype.js edge type plug-in library.

Customize

ht.Default.setEdgeType(type, func, mutual) function can be used to customize the new edge type:

ht.Default.setEdgeType('custom', function (edge, gap, graphView, sameSourceWithFirstEdge){
    var sourcePoint = edge.getSourceAgent().getPosition(),
        targetPoint = edge.getTargetAgent().getPosition(),
        points = new ht.List();       
        points.add(sourcePoint);
        points.add({
            x: (sourcePoint.x + targetPoint.x)/2, 
            y: (sourcePoint.y + targetPoint.y)/2 + 300
        });                  
        points.add(targetPoint);                                                       

    return {
        points: points,
        segments: new ht.List([1, 3])
    };                 
});

In the custom connection example above, a central control point is inserted between the sourcePoint and the targetPoint as the inflexion of the curve.

This example uses the graphView.setLayers(['nodeLayer', 'edgeLayer']); layered function, grouped the Node and Edge into different layers by node.setLayer('nodeLayer'); and edge.setLayer('edgeLayer');, because the default nodes will displayed on the line, and through such layering the nodes are rendered under the line.

Moving the mouse over the edge will dynamically change the edge color, which is done by the GraphView.getView() add mousemove event to the special handling, judging ht.Default.isDragging() is to avoid processing when the node is moved, gets the current mouse position under the data by graphView.getDataAt(e);.

var lastFocus = null;
graphView.getView().addEventListener('mousemove', function (e){ 
    if(!ht.Default.isDragging()){
        if(lastFocus){
            lastFocus.s('edge.color', 'lightgray');
        }                        
        var data = graphView.getDataAt(e);                        
        if(data instanceof ht.Edge){                            
            data.s('edge.color', 'red');
            lastFocus = data;                            
        }else{                            
            lastFocus = null;                            
        }                        
    }                    
});

Edge Type

Edge type expansion packs predefined the following selectable types:

Edge Arrow

The following example is consistent with the above type model, but adds the start and end arrows to all edges, the HT does not predefined the line arrows, and the user can arbitrarily extend their desired arrowhead style by customizing the vector. The following code defines the vector arrows for toArrow and then rotates fromArrow through the rotation: Math.PI, and finally through the edge.addStyleIcon function respectively set up two arrow icons in 15 and 19 left and right center position, where keepOrien: true needs to be set, because the arrow and the line are aligned in parallel and need not be adjusted dynamically as label.

ht.Default.setImage('toArrow', {
    width: 100,
    height: 50,
    comps: [
        {
            type: 'shape',
            points: [2, 25, 30, 25],
            borderWidth: 4,
            borderColor: 'rgba(255, 0, 0, 0.9)'
        },
        {
            type: 'shape',
            points: [30, 10, 30, 40, 50, 25, 30, 10],
            background: 'rgba(255, 0, 0, 0.9)',
            borderWidth: 1,
            borderColor: 'red',
            gradient: 'spread.vertical',
            gradientColor: 'rgba(255, 255, 255, 0.9)'
        }
    ]
}); 
ht.Default.setImage('fromArrow', {
    width: 100,
    height: 50,
    comps: [
        {
            type: 'image',
            name: 'toArrow',
            rect: [0, 0, 100, 50],
            rotation: Math.PI
        }
    ]
}); 

function createEdge(sourceNode, targetNode, count, typeOrStyle){
    var edge;
    for(var i=0; i<count; i++){
        edge = new ht.Edge(sourceNode, targetNode);
        if(typeof typeOrStyle === 'object'){
            edge.s(typeOrStyle);
        }else{
            edge.s('edge.type', typeOrStyle);                        
        }
        edge.addStyleIcon("fromArrow", {
            position: 15,
            keepOrien: true,
            width: 40,
            height: 20,
            names: ['fromArrow']
        }); 
        edge.addStyleIcon("toArrow", {
            position: 19,
            keepOrien: true,
            width: 40,
            height: 20,                        
            names: ['toArrow']
        }); 
        dataModel.add(edge);
    }
    return edge;
}

Complex Edge

The Edge Type described earlier enables bundling the edges between the starting and ending nodes, but the edge type layout does not take into account the existence of different edges between the starting and ending nodes, so there is a problem of overlap between the edges of the complex topology, for which HT added a corresponding suffix of 2 for the type of connection: ortho2, flex2, extend.north2, extend.south2, extend.west2, extend.east2, v.h2 and h.v2.

Welcome to contact us service@hightopo.com