Index

• Overview
• OverView Component

Overview

The HT for Web OverView component provides a global aerial view of the capabilities of the ht.graph.GraphView component and supports navigation features such as direct positioning and scaling on the OverView component.

The use of OverView components requires the introduction of the ht.js core library, and the introduction of a ht-overview.js OverView plug-in library.

OverView Component

ht.graph.Overview is the OverView component class, its main configurable properties and functions are as follows:

• The ht.graph.Overview constructor inputs the ht.graph.GraphView component object to which it is bound
• Get and set the visible area mask background color through getMaskBackground and setMaskBackground
• Get and set content border color through getContentBorderColor and setContentBorderColor
• Get and set content background colors through getContentBackground and setContentBackground
• Get and set the GraphView component changes automatically by isAutoUpdate and setAutoUpdate

var ToggleOverview = function (graphView) {
    var self = this;
    ToggleOverview.superClass.constructor.apply(self, [graphView]);                
    self._expand = true;

    var div = document.createElement("div");
    div.style.setProperty("width", "24px", null);
    div.style.setProperty("height", "24px", null);
    div.style.setProperty("position", "absolute", null);
    div.style.setProperty("right", "0", null);
    div.style.setProperty("top", "0", null);
    div.style.setProperty("background", " url(shrink.png) no-repeat", null);
    div.style.setProperty("background-position", "center center", null);                
    self._view.appendChild(div);

    function handleTransitionEnd(e) {
        if (e.propertyName === "width"){
            self.invalidate();
        }                    
    }
    self._view.addEventListener("webkitTransitionEnd", handleTransitionEnd, false);
    self._view.addEventListener("transitionend", handleTransitionEnd, false);
    var eventName = ht.Default.isTouchable ? "touchstart" : "mousedown";
    div.addEventListener(eventName, function (e) {
        if (self._expand) {
            self._view.style.setProperty("width", "24px", null);
            self._view.style.setProperty("height", "24px", null);
            self._canvas.style.setProperty("opacity", "0", null);
            self._mask.style.setProperty("opacity", "0", null);
            div.style.setProperty("background-image", "url(expand.png)", null);
            div.style.setProperty("width", "24px", null);
            div.style.setProperty("height", "24px", null);
            self._expand = false;
        } else {
            self._view.style.setProperty("width", "", null);
            self._view.style.setProperty("height", "", null);
            self._canvas.style.setProperty("opacity", "1", null);
            self._mask.style.setProperty("opacity", "1", null);
            div.style.setProperty("background-image", "url(shrink.png)", null);
            div.style.setProperty("width", "24px", null);
            div.style.setProperty("height", "24px", null);
            self._expand = true;
        }                    
        self.invalidate();                     
        e.stopPropagation();
    });
    self.setContentBackground("white");
};
ht.Default.def(ToggleOverview, ht.graph.Overview, {                
});

function init() {                
    var dataModel = new ht.DataModel(),
        graphView = new ht.graph.GraphView(dataModel),
        overview = new ToggleOverview(graphView);

    dataModel.deserialize(topology);    
    graphView.getView().className = 'main';
    overview.getView().className = "overview animation";
    document.body.appendChild(graphView.getView());
    document.body.appendChild(overview.getView());

    window.addEventListener('resize', function (e) {
        graphView.invalidate();
    }, false);

}