索引

• 概述
• 鹰眼组件

概述

HT for Web的鹰眼组件为ht.graph.GraphView组件提供了全局鸟瞰图的功能，并支持在鹰眼上直接定位、缩放等导航功能。

使用鹰眼组件需要在引入ht.js核心库之后，再引入一个ht-overview.js的鹰眼插件库。

鹰眼组件

ht.graph.Overview为鹰眼组件类，其主要可配置属性和函数如下：

• ht.graph.Overview构造函数传入其所绑定的ht.graph.GraphView组件对象
• 通过getMaskBackground和setMaskBackground获取和设置可见区域遮罩背景颜色
• 通过getContentBorderColor和setContentBorderColor获取和设置内容边框颜色
• 通过getContentBackground和setContentBackground获取和设置内容背景颜色
• 通过isAutoUpdate和setAutoUpdate获取和设置是否自动同步绑定的GraphView组件变化

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);

}