HT 刻度尺手册

索引


概述

ht.widget.RulerFrame用于为HT组件(拓扑和树、表格等通用组件)及HTML元素(如div)提供刻度尺, RulerFrame可以在组件的上、右、下、左四条边上绘制刻度,刻度可根据用户的操作(缩放、滚动)自动调节。 在正式使用API之前,您的页面里应该引入相关js

<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-rulerframe.js"></script>

RulerFrame提供的API如下:

setDefaultRulerConfig的参数为一个js对象,此对象提供所有刻度尺的默认配置,支持的属性如下:

每个刻度尺可配置的属性同defaultRulerConfig一致,但优先级高于默认配置。另外,单个刻度尺可配置visible属性,用于控制当前刻度尺是否可见, 默认只显示左、上两个刻度尺。

如果只要修改某个属性,可通过下面代码实现:

rulerFrame.getLeftRulerConfig().size = 30;
rulerFrame.iv();

示例一:为拓扑增加刻度尺

var dataModel = new ht.DataModel(),
    graphView = new ht.graph.GraphView(dataModel),
    rulerFrame = new ht.widget.RulerFrame(graphView),
    view = rulerFrame.getView();
rulerFrame.getDefaultRulerConfig().guideVisible = true;
rulerFrame.getDefaultRulerConfig().guideTipVisible = true;
rulerFrame.getDefaultRulerConfig().guideTipBackground = "rgb(0, 173, 239)";
rulerFrame.getDefaultRulerConfig().guideTipTextColor = "white";

rulerFrame.getLeftRulerConfig().background = "yellow";
rulerFrame.getLeftRulerConfig().tickSpacingAdaptable = false;
rulerFrame.getLeftRulerConfig().defaultMajorTickSpacing = 100;
rulerFrame.getLeftRulerConfig().guideTipVisible = false;

rulerFrame.getTopRulerConfig().guideTipVisible = false;

rulerFrame.getRightRulerConfig().visible = true;

rulerFrame.getBottomRulerConfig().visible = true;

rulerFrame.iv();
//...
document.body.appendChild(view);

缩小拓扑可以发现左刻度尺的刻度挤在一起,因为我们将其tickSpacingAdaptable设为了false,主刻度之间的间距不会自动调整。

示例二:为通用组件增加刻度尺

rightRulerFrame.getLeftRulerConfig().visible = false;
rightRulerFrame.getRightRulerConfig().visible = true;
centerRulerFrame.getRightRulerConfig().visible = true;

leftRulerFrame.getView().style.position = "absolute";
rightRulerFrame.getView().style.position = "absolute";
centerRulerFrame.getView().style.position = "absolute";

/* TablePane的滚动由内部的TableView实现,所以需要重写此方法增加Listener*/
leftRulerFrame.addComponentPropertyChangeListener = function(component, handler){
    component.getTableView().mp(handler);
};
leftRulerFrame.removeComponentPropertyChangeListener = function(component, handler){
    component.getTableView().ump(handler);
};
/* 返回内部TableView的ViewRect*/
leftRulerFrame.getComponentViewRect = function(component) {
    return component.getTableView().getViewRect();
};
/* 使TablePane和内部的TableView无效*/
leftRulerFrame.invalidateComponent = function(component) {
    component.iv();
    component.getTableView().iv();
};
/* 使TablePane和内部的TableView生效*/
leftRulerFrame.validateComponent =  function(component) {
    component.validate();
    component.getTableView().validate();
};

/* HTML元素没有mp方法,为其scroll事件增加Listener*/
centerRulerFrame.addComponentPropertyChangeListener = function(component, handler){
    component.addEventListener("scroll", handler);
};
centerRulerFrame.removeComponentPropertyChangeListener = function(component, handler){
    component.removeEventListener("scroll", handler);
};
/* 返回HTML元素的可视区域*/
centerRulerFrame.getComponentViewRect = function(component) {
    return {x: component.scrollLeft, y: component.scrollTop, width: component.offsetWidth, height: component.offsetHeight};
};
//设置component
leftRulerFrame.setComponent(tablePane); 
centerRulerFrame.setComponent(scrollableDiv);

欢迎交流 service@hightopo.com