HT for Web Class: GraphView

new GraphView(dataModel)

拓扑图形组件ht.graph.GraphView是HT框架中2D功能最丰富的组件，其相关类库都在ht.graph包下。
GraphView具有基本图形的呈现和编辑、拓扑节点连线及自动布局功能；封装了电力和电信等行业预定义对象，具有动画渲染等特效，因此其应用面很广泛，可作为监控领域的绘图工具和人机界面，或作为一般性的图形化编辑工具，或扩展成工作流和组织图等企业应用。

Parameters:

Name	Type	Description
`dataModel`	ht.DataModel	绑定的数据模型

Methods

addBottomPainter(painter)

增加底层Painter
拓扑组件上提供Painter接口，开发者可以使用Canvas的画笔对象自由绘制任意形状，底层Painter绘制在拓扑最下面

Parameters:

Name	Type	Description
`painter`	function	Painter类

Example

 //Painter示例：
function MyBottomPainter() {
}
ht.Default.def(MyBottomPainter, Object, {
	draw: function(g) {
		g.save();
		//draw...
		g.restore();
	}
});
graphView.addBottomPainter(MyBottomPainter);

addInteractorListener(listener, scope, ahead)

增加交互事件监听器

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域
`ahead`	Boolean	<optional>	是否将当前监听器插入到监听器列表开头

See:

Example

 //示例：
graphView.addInteractorListener(function(event) {
		//event格式：
		{
			//clickData, doubleClickData, clickBackground, doubleClickBackground, 
			//beginRectSelect, betweenRectSelect, endRectSelect, beginMove, betweenMove, endMove,
			//beginPan, betweenPan, endPan, beginEditRect, betweenEditRect, endEditRect, beginEditPoint, betweenEditPoint, endEditPoint
			//beginEditRotation, betweenEditRotation, endEditRotation, moveLeft, moveRight, moveUp, moveDown, toggleNote, toggleNote2
			kind: 'clickData',//事件类型
			data: data,//事件相关的数据元素
			part: "part",//事件的区域,icon、label等
			event: e//html原生事件
		}
});

addPropertyChangeListener(listener, scope, ahead)

增加自身属性变化事件监听器

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域
`ahead`	Boolean	<optional>	是否将当前监听器插入到监听器列表开头

See:

addTopPainter(painter)

增加顶层Painter
拓扑组件上提供Painter接口，开发者可以使用Canvas的画笔对象自由绘制任意形状，顶层Painter绘制在拓扑最上面

Parameters:

Name	Type	Description
`painter`	function	Painter类

Example

 //Painter示例：
function MyTopPainter() {
}
ht.Default.def(MyTopPainter, Object, {
	draw: function(g) {
		g.save();
		//draw...
		g.restore();
	}
});
graphView.addTopPainter(MyTopPainter);

addViewListener(listener, scope, ahead)

监听视图事件，如布局、刷新等

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域
`ahead`	Boolean	<optional>	是否将当前监听器插入到监听器列表开头

adjustTranslateX(value) → {Number}

传入即将设置的水平平移值，返回最终设置值，可重载限制水平平移范围

Parameters:

Name	Type	Description
`value`	Number	原始水平平移值

Returns:

新的水平平移值

Type: Number

adjustTranslateY(value) → {Number}

传入即将设置的垂直平移值，返回最终设置值，可重载限制垂直平移范围

Parameters:

Name	Type	Description
`value`	Number	原始垂直平移值

Returns:

新的垂直平移值

Type: Number

adjustZoom(value) → {Number}

传入即将修改的缩放值，返回最终运行设置的缩放值，可重载进行自定义

Parameters:

Name	Type	Description
`value`	Number	原始缩放值

Returns:

最终缩放值

Type: Number

disableToolTip()

关闭ToolTip功能

dm(dataModel) → {ht.DataModel}

获取或设置数据模型，没有参数时相当于getDataModel，有参数时相当于setDataModel

Parameters:

Name	Type	Argument	Description
`dataModel`	ht.DataModel	<optional>	数据模型

Returns:

dataModel

Type: ht.DataModel

each(func, scope)

提供一个回调函数遍历此拓扑中的图元，与DataModel上的each方法不同，此方法还考虑了拓扑中的Layer，从低Layer向高Layer遍历

Parameters:

Name	Type	Argument	Description
`func`	function		遍历函数
`scope`	Object	<optional>	函数域

Example

 graphView.each(function(data) {
  console.log(data);
});

enableToolTip()

启用ToolTip

fitContent(anim, padding, notZoomIn)

缩放平移整个拓扑以展示所有的图元

Parameters:

Name	Type	Argument	Description
`anim`	Boolean	<optional>	是否使用动画
`padding`	Number	<optional>	缩放后图元区域与拓扑边缘的距离，默认为20
`notZoomIn`	Boolean	<optional>	是否将最小缩放值限定为1

fitData(data, anim, padding, notZoomIn, retry)

缩放平移整个拓扑以展示参数Data

Parameters:

Name	Type	Argument	Description
`data`	ht.Data		要显示的data
`anim`	Boolean	<optional>	是否使用动画
`padding`	Number	<optional>	缩放后图元区域与拓扑边缘的距离，默认为20
`notZoomIn`	Boolean	<optional>	是否将最小缩放值限定为1
`retry`	Boolean	<optional>	当拓扑状态异常时，是否延时重试fitData，默认为true

fitRect(rect, anim, notZoomIn)

缩放平移整个拓扑以展示矩形范围内的图元

Parameters:

Name	Type	Argument	Description
`rect`	Object		矩形范围
`anim`	Boolean	<optional>	是否使用动画
`notZoomIn`	Boolean	<optional>	是否将最小缩放值限定为1

getAutoScrollZone() → {Number}

获取自动滚动区域，当鼠标距离拓扑边缘小于这个值时，拓扑自动滚动(调整translateX或translateY)

Returns:

自动滚动区域

Type: Number

getBodyColor(data) → {color}

获取图元body的染色，可重载此方法返回自定义的颜色

Parameters:

Name	Type	Description
`data`	ht.Data	要染色的图元

Returns:

最终颜色，默认为data.s('body.color')

Type: color

getBorderColor(data) → {color}

获取图元边框颜色，可重载此方法返回自定义的颜色

Parameters:

Name	Type	Description
`data`	ht.Data	要染色的图元

Returns:

最终颜色，默认为data.s('border.color')

Type: color

getBoundsForGroup(child) → {Object}

获取Group内child的尺寸范围，这个尺寸参与计算Group的大小

Parameters:

Name	Type	Description
`child`	ht.Data	子节点

Returns:

子节点的尺寸范围

Type: Object

getCanvas() → {HTMLCanvasElement}

获取拓扑的画布

Returns:

画布

Type: HTMLCanvasElement

getContentRect() → {Object}

获取拓扑中所有图元占用的矩形区域

Returns:

内容区域

Type: Object

getCurrentSubGraph() → {ht.SubGraph}

获取当前子网

Returns:

子网对象

Type: ht.SubGraph

getDataAt(pointOrEvent, filter, range) → {ht.Data}

传入逻辑坐标点或者交互event事件参数，返回当前点下的图元，filter可进行过滤

Parameters:

Name	Type	Argument	Description
`pointOrEvent`	Object \| Event		逻辑坐标点或交互事件对象(如鼠标事件对象)
`filter`	Functoin	<optional>	过滤器函数，传入data,自定义逻辑返回true或false判断此data是否可被getDataAt返回
`range`	Number	<optional>	扩大点范围

Returns:

点下的图元

Type: ht.Data

getDataModel() → {ht.DataModel}

获取绑定的数据模型

Returns:

数据模型

Type: ht.DataModel

getDatasInRect(rect, intersects, selectable) → {ht.List}

获取逻辑坐标区域内的图元

Parameters:

Name	Type	Argument	Description
`rect`	rect		逻辑坐标区域
`intersects`	Boolean	<optional>	指定相交选中还是包含选中，true表示相交，false表示包含。
`selectable`	Boolean	<optional>	是否只返回可被选中的图元，可否被选中通过isSelectable判断

Returns:

Type: ht.List

getDataUI(data) → {Object}

获取图元的UI类

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Object

getDataUIBounds(data) → {Object}

获取图元UI的绘制范围

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Object

getEditableFunc() → {function}

获取编辑过滤器函数

Returns:

Type: function

getEditInteractor() → {ht.graph.EditInteractor|ht.graph.XEditInteractor}

获取编辑交互器

Returns:

Type: ht.graph.EditInteractor | ht.graph.XEditInteractor

getEditPointBackground() → {color}

获取编辑交互器中编辑点的背景色

Returns:

Type: color

getEditPointBorderColor() → {color}

获取编辑交互器中编辑点的边框颜色

Returns:

Type: color

getEditPointSize() → {Object}

获取编辑交互器中编辑点的尺寸

Returns:

Type: Object

getHeight() → {Number}

获取拓扑组件的布局高度

Returns:

Type: Number

getIconInfoAt(pointOrEvent) → {Object}

传入逻辑坐标点或者交互event事件参数、图元对象，判断当前点下的icon信息

Parameters:

Name	Type	Description
`pointOrEvent`	Object \| Event	逻辑坐标点或交互事件对象(如鼠标事件对象)

Returns:

Type: Object

Example

 //返回值示例：
{
	data: data,//相关数据元素 
	key: 'key',//styleIcon名
	index: 0,//styleIcon中第几个icon
	name: 'name'//styleIcon中相应icon的名字
}

getInteractors() → {ht.List}

获取交互器

Returns:

Type: ht.List

getLabel(data) → {String}

获取图元的label，用于在拓扑上显示文字信息，可重载返回自定义文字

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元label文字，默认返回data.s('label')||data.getName();

Type: String

getLabel2(data) → {String}

获取图元的第二个label，用于在拓扑上显示文字，可重载返回自定义文字

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元第二个label的文字，默认返回data.s('label2')

Type: String

getLabel2Background(data) → {color}

获取图元的第二个label的背景色，可重载返回自定义颜色

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元第二个label的背景色，默认返回data.s('label2.background')

Type: color

getLabel2Color(data) → {color}

获取图元的第二个label的文字颜色，可重载返回自定义颜色

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元第二个label的文字颜色，默认返回data.s('label2.color')

Type: color

getLabelBackground(data) → {color}

获取图元label的背景色，可重载返回自定义颜色

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元label的背景色，默认返回data.s('label.background')

Type: color

getLabelColor(data) → {color}

获取图元label的文字颜色，可重载返回自定义颜色

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元label的文字颜色，默认返回data.s('label.color')

Type: color

getLayers() → {Array}

获取拓扑中已定义的层

Returns:

Type: Array

getLogicalPoint(event) → {Object}

传入HTML事件对象，将事件坐标转换为拓扑中的逻辑坐标

Parameters:

Name	Type	Description
`event`	Event	事件对象

See:

Returns:

Type: Object

getMovableFunc() → {function}

获取移动过滤器函数

Returns:

Type: function

getNote(data) → {String}

获取图元的note，用于在拓扑上显示标注信息，可重载返回自定义文字

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元note文字，默认返回data.s('note')

Type: String

getNote2(data) → {String}

获取图元的第二个note，用于在拓扑上显示标注信息，可重载返回自定义文字

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元第二个note文字，默认返回data.s('note2')

Type: String

getNote2Background(data) → {color}

获取图元的第二个note的背景色，可重载返回自定义颜色

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元第二个note的背景色，默认返回data.s('note2.background')

Type: color

getNoteBackground(data) → {color}

获取图元note的文字颜色，可重载返回自定义颜色

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元note的文字颜色，默认返回data.s('note.background')

Type: color

getOpacity(data) → {Number}

获取图元的透明度，可重载返回自定义透明度

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

图元透明度，默认返回data.s('opacity')

Type: Number

getPointEditableFunc() → {function}

获取点编辑(Shape、Edge等)过滤器函数

Returns:

Type: function

getRectEditableFunc() → {function}

获取大小编辑过滤器函数

Returns:

Type: function

getRectSelectBackground() → {color}

获取框选选择框的背景色

Returns:

Type: color

getRectSelectBorderColor() → {color}

获取框选选择框的边框颜色

Returns:

Type: color

getRotationEditableFunc() → {function}

获取旋转编辑过滤器函数

Returns:

Type: function

getRotationPoint(data) → {Object}

获取图元编辑时的旋转控制点坐标

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

旋转控制点坐标

Type: Object

getScrollBarColor() → {color}

获取滚动条颜色

Returns:

Type: color

getScrollBarSize() → {Number}

获取滚动条宽度

Returns:

Type: Number

getScrollRect() → {Object}

获取拓扑的滚动区域，即contentRect + viewRect

Returns:

矩形区域

Type: Object

getSelectableFunc() → {function}

获取选择过滤器函数

Returns:

Type: function

getSelectedDataAt(pointOrEvent) → {ht.Data}

传入逻辑坐标点或者交互event事件参数，返回当前点下已选中的图元

Parameters:

Name	Type	Description
`pointOrEvent`	Object \| Event	逻辑坐标点或交互事件对象(如鼠标事件对象)

Returns:

Type: ht.Data

getSelectionModel() → {ht.SelectionModel}

获取选中模型

See:

Returns:

Type: ht.SelectionModel

getToolTip(e) → {String}

获取ToolTip文字，可重载返回自定义的toolTip文字

Parameters:

Name	Type	Description
`e`	Event	鼠标或Touch事件对象

Returns:

toolTip文字，默认取出鼠标下的图元，然后返回其getToolTip()

Type: String

getTranslateX() → {Number}

获取水平平移值

See:

Returns:

水平平移值

Type: Number

getTranslateY() → {Number}

获取垂直平移值

See:

Returns:

垂直平移值

Type: Number

getView() → {HTMLDivElement}

获取拓扑组件的根层div

Returns:

Type: HTMLDivElement

getViewRect() → {Object}

获取拓扑组件中可见区域的逻辑尺寸

Returns:

Type: Object

getVisibleFunc() → {function}

获取可见过滤器函数

Returns:

Type: function

getWidth() → {Number}

获取拓扑组件的布局宽度

Returns:

Type: Number

getZoom() → {Number}

获取拓扑整体缩放值

Returns:

Type: Number

invalidate(delay)

无效拓扑，并调用延时刷新

Parameters:

Name	Type	Description
`delay`	Number	延迟刷新的间隔事件(单位:ms)

See:

invalidateAll()

无效拓扑中的所有图元

invalidateData(data)

无效拓扑中的图元

Parameters:

Name	Type	Description
`data`	ht.Data	要无效的图元

invalidateSelection()

无效选中模型中的图元

isAutoHideScrollBar() → {Boolean}

是否自动隐藏滚动条

Returns:

Type: Boolean

isAutoMakeVisible() → {Boolean}

选中图元时，是否自动平移拓扑以确保该图元出现在可见区域内

Returns:

Type: Boolean

isDisabled() → {Boolean}

组件是否处于不可用状态，处于此状态时不能进行任何操作并且会遮挡一层蒙板

Returns:

Type: Boolean

isEditable(data) → {Boolean}

判断图元是否可被编辑

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isEditVisible(data) → {Boolean}

图元编辑点是否可见，默认当拓扑缩放值大于0.15时可见

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isLabelVisible(data) → {Boolean}

判断图元label是否可见，默认当拓扑缩放值大于0.15时可见

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isMovable(data) → {Boolean}

判断图元是否可移动

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isNoteVisible(data) → {Boolean}

判断图元note是否可见，默认当拓扑缩放值大于0.15时可见

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isPannable() → {Boolean}

拓扑是否可以通过鼠标拖拽进行平移操作

Returns:

Type: Boolean

isPointEditable(data) → {Boolean}

判断图元(Shape、Edge等)的点是否可编辑

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isRectEditable(data) → {Boolean}

判断图元大小是否可编辑

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isRectSelectable() → {Boolean}

判断拓扑上是否允许框选操作

Returns:

Type: Boolean

isResettable() → {Boolean}

判断拓扑上是否允许通过空格将拓扑的缩放和平移值复位

Returns:

Type: Boolean

isRotationEditable(data) → {Boolean}

判断图元是否可编辑旋转

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isScrollBarVisible() → {Boolean}

判断拓扑滚动条是否可见

Returns:

Type: Boolean

isSelectable(data) → {Boolean}

判断图元是否可被选中

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isSelected(data) → {Boolean}

判断图元是否被选中

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isSelectedById(id) → {Boolean}

根据id判断图元是否被选中

Parameters:

Name	Type	Description
`id`	String \| Number	图元id

Returns:

Type: Boolean

isSelectionModelShared() → {Boolean}

当前拓扑是否共享选中模型

Returns:

Type: Boolean

isSelectVisible(data) → {Boolean}

拓扑中的图元的选中边框是否可见，默认当拓扑缩放值大于0.15时可见

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

isVisible(data) → {Boolean}

判断图元是否可见

Parameters:

Name	Type	Description
`data`	ht.Data	图元

Returns:

Type: Boolean

iv(delay)

无效拓扑，并调用延时刷新，invalidate的缩写

Parameters:

Name	Type	Description
`delay`	Number	延迟刷新的间隔事件(单位:ms)

See:

invalidate

lp(event) → {Object}

传入HTML事件对象，将事件坐标转换为拓扑中的逻辑坐标，getLogicalPoint的缩写

Parameters:

Name	Type	Description
`event`	Event	事件对象

See:

getLogicalPoint

Returns:

Type: Object

makeVisible(data)

平移拓扑以确保该图元在可见区域内

Parameters:

Name	Type	Description
`data`	ht.Data	图元

mi(listener, scope, ahead)

增加交互事件监听器，addInteractorListener的缩写

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域
`ahead`	Boolean	<optional>	是否将当前监听器插入到监听器列表开头

See:

addInteractorListener

Example

 //示例：
graphView.mi(function(event) {
		//event格式：
		{
			//clickData, doubleClickData, clickBackground, doubleClickBackground, 
			//beginRectSelect, betweenRectSelect, endRectSelect, beginMove, betweenMove, endMove,
			//beginPan, betweenPan, endPan, beginEditRect, betweenEditRect, endEditRect, beginEditPoint, betweenEditPoint, endEditPoint
			//beginEditRotation, betweenEditRotation, endEditRotation, moveLeft, moveRight, moveUp, moveDown, toggleNote, toggleNote2
			kind: 'clickData',//事件类型
			data: data,//事件相关的数据元素
			part: "part",//事件的区域,icon、label等
			event: e//html原生事件
		}
});

moveSelection(offsetX, offsetY)

移动选中模型中图元的位置

Parameters:

Name	Type	Description
`offsetX`	Number	水平移动值
`offsetY`	Number	垂直移动值

mp(listener, scope, ahead)

增加自身属性变化事件监听器，addPropertyChangeListener的缩写

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域
`ahead`	Boolean	<optional>	是否将当前监听器插入到监听器列表开头

See:

addPropertyChangeListener

onAutoLayoutEnded()

自动布局动画结束后时回调，可重载做后续处理

onBackgroundClicked(event)

单击拓扑背景时回调，可重载做后续处理

Parameters:

Name	Type	Description
`event`	Event	事件对象

onBackgroundDoubleClicked(event)

双击拓扑背景时回调，默认调用upSubGraph()进入上一层子网，可重载改变默认逻辑或做后续处理

Parameters:

Name	Type	Description
`event`	Event	事件对象

onCurrentSubGraphChanged(event)

当前子网变化时回调，默认实现调用reset()恢复默认缩放和平移值，可重载改变默认逻辑或做后续处理

Parameters:

Name	Type	Description
`event`	Event	事件对象

onDataClicked(data, e)

图元被点击时回调，可重载做后续处理

Parameters:

Name	Type	Description
`data`	ht.Data	被点击的图元
`e`	Event	事件对象

onDataDoubleClicked(data, e)

图元被双击时回调，可重载做后续处理

Parameters:

Name	Type	Description
`data`	ht.Data	双击的图元
`e`	Event	事件对象

onEdgeDoubleClicked(edge, e)

连线图元被双击时回调，默认调用edge.toggle()，可重载改变默认逻辑或做后续处理

Parameters:

Name	Type	Description
`edge`	ht.Edge	连线
`e`	Event	事件对象

onGroupDoubleClicked(group, e)

组类型图元被双击时回调，默认实现调用group.toggle()，可重载改变默认逻辑或做后续处理

Parameters:

Name	Type	Description
`group`	ht.Group	Group对象
`e`	Event	事件对象

onMoveEnded()

移动图元位置结束时回调，可重载做后续处理

onPanEnded()

手抓图平移拓扑图结束时回调，可重载做后续处理

onPinchEnded()

触屏进行双指缩放结束时回调，可重载做后续处理

onRectSelectEnded()

框选结束时回调，可重载做后续处理

onSelectionChanged(event)

选中变化时回调，默认实现会使得该选中图元出现在拓扑图上的可见范围

Parameters:

Name	Type	Description
`event`	Event	选中变化事件对象

onSubGraphDoubleClicked(subGraph, event)

子网图元被双击时回调，默认实现进入子网

Parameters:

Name	Type	Description
`subGraph`	ht.SubGraph	子网对象
`event`	Event	事件对象

onTranslateEnded()

平移动画结束时回调，可重载做后续处理

onVisibleChanged(data, newVisible)

图元可见状态发生变化时回调，可重载做后续处理

Parameters:

Name	Type	Description
`data`	ht.Data	图元
`newVisible`	Boolean	新的可见状态

onZoomEnded()

缩放动画结束时回调

rectContains(data, rect) → {Boolean}

判断图元是否在矩形范围内

Parameters:

Name	Type	Description
`data`	ht.Data	图元
`rect`	Object	矩形

Returns:

Type: Boolean

rectIntersects(data, rect) → {Boolean}

判断图元与矩形范围是否相交

Parameters:

Name	Type	Description
`data`	ht.Data	图元
`rect`	Object	矩形

Returns:

Type: Boolean

redraw(rect)

重绘拓扑，rect参数为空时重绘拓扑中的所有图元，否则重绘矩形范围内的图元

Parameters:

Name	Type	Argument	Description
`rect`	Object	<optional>	矩形范围

removeBottomPainter(painter)

删除底层Painter

Parameters:

Name	Type	Description
`painter`	Object	Painter类

removeInteractorListener(listener, scope)

删除交互事件监听器

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域

See:

removePropertyChangeListener(listener, scope)

删除自身属性变化事件监听器

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域

removeSelection()

删除所有选中的图元

removeTopPainter(painter)

删除顶层Painter

Parameters:

Name	Type	Description
`painter`	Object	Painter类

removeViewListener(listener, scope)

删除视图事件监听器

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域

reset()

重置拓扑状态，将zoom设为1，translate设为0

reverseEach(func, scope)

提供一个回调函数倒序遍历此拓扑中的图元，与DataModel上的each方法不同，此方法还考虑了拓扑中的Layer，从高Layer向低Layer遍历

Parameters:

Name	Type	Argument	Description
`func`	function		遍历函数
`scope`	Object	<optional>	函数域

Example

 graphView.reverseEach(function(data) {
  console.log(data);
});

selectAll()

选中拓扑中所有图元

setAutoHideScrollBar(v)

设置是否自动隐藏滚动条

Parameters:

Name	Type	Description
`v`	Boolean

setAutoMakeVisible(v)

设置当选中图元时，是否自动平移拓扑以确保该图元出现在可见区域内

Parameters:

Name	Type	Description
`v`	Boolean

setAutoScrollZone(v)

设置自动滚动区域大小，当鼠标距离拓扑边缘小于这个值时，拓扑自动滚动(调整translateX或translateY)

Parameters:

Name	Type	Description
`v`	Boolean

setCurrentSubGraph(subGraph)

设置当前子网

Parameters:

Name	Type	Description
`subGraph`	ht.SubGraph	子网对象

setDataModel() → {ht.DataModel}

设置绑定的数据模型

Returns:

数据模型

Type: ht.DataModel

setDisabled(value, iconUrl)

设置组件是否处于不可用状态，处于不可用状态时不能进行任何操作并且会遮挡一层蒙板

Parameters:

Name	Type	Argument	Description
`value`	Boolean		是否禁用组件
`iconUrl`	String	<optional>	蒙板上显示的icon的路径

setEditable(editable)

设置拓扑中的图元是否可编辑

Parameters:

Name	Type	Description
`editable`	Boolean

setEditableFunc(func)

设置编辑过滤器函数

Parameters:

Name	Type	Description
`func`	function	过滤器函数

setEditPointBackground(color)

设置编辑交互器中编辑点的背景色

Parameters:

Name	Type	Description
`color`	color	颜色值

setEditPointBorderColor(color)

设置编辑交互器中编辑点的边框颜色

Parameters:

Name	Type	Description
`color`	color	颜色值

setEditPointSize(size)

设置编辑交互器中编辑点的尺寸

Parameters:

Name	Type	Description
`size`	Number	编辑点尺寸

setHeight(height)

设置布局高度

Parameters:

Name	Type	Description
`height`	Number	高度值

setInteractors(interactors)

设置交互器

Parameters:

Name	Type	Description
`interactors`	ht.List	交互器对象集合

setLayers(layers)

定义拓扑中的层，参数为数组，数组中每个元素代表一个层，层在数组中的索引越大，在拓扑中就越靠上显示
注意，图元的默认layer是0，因此如果定义的层中不包含0，所有的图元默认将不可见

Parameters:

Name	Type	Description
`layers`	Array	层数组

Example

graphView.setLayers([0, 1, 'Layer2']);
node.setLayer(1);
node2.setLayer('Layer2');

setMovableFunc(func)

设置移动过滤器函数

Parameters:

Name	Type	Description
`func`	function	过滤器函数

setPannable(v)

设置是否可以通过鼠标拖拽进行平移操作

Parameters:

Name	Type	Description
`v`	Boolean	是否可平移

setPointEditableFunc(func)

设置点编辑(Shape、Edge等)过滤器函数

Parameters:

Name	Type	Description
`func`	function	过滤器函数

setRectEditableFunc(func)

设置大小编辑过滤器函数

Parameters:

Name	Type	Description
`func`	function	过滤器函数

setRectSelectable(v)

设置拓扑上是否允许框选操作

Parameters:

Name	Type	Description
`v`	Boolean

setRectSelectBackground(color)

设置框选选择框的背景色

Parameters:

Name	Type	Description
`color`	color	颜色值

setRectSelectBorder(color)

设置框选选择框的边框颜色

Parameters:

Name	Type	Description
`color`	color	颜色值

setResettable(v)

设置拓扑上是否允许通过空格将拓扑的缩放和平移值复位

Parameters:

Name	Type	Description
`v`	Boolean

setRotationEditableFunc(func)

设置旋转编辑过滤器函数

Parameters:

Name	Type	Description
`func`	function	过滤器函数

setScrollBarColor(color)

设置滚动条颜色

Parameters:

Name	Type	Description
`color`	color	颜色值

setScrollBarSize(size)

设置滚动条宽度

Parameters:

Name	Type	Description
`size`	Number	宽度值

setScrollBarVisible(visible)

设置滚动条是否可见

Parameters:

Name	Type	Description
`visible`	Boolean

setSelectableFunc(func)

设置选择过滤器函数

Parameters:

Name	Type	Description
`func`	function	过滤器函数

setSelectionModelShared(v)

设置拓扑是否共享选中模型

Parameters:

Name	Type	Description
`v`	Boolean

setTranslate(x, y, anim)

设置拓扑水平和垂直平移值

Parameters:

Name	Type	Argument	Description
`x`	Number		水平平移值
`y`	Number		垂直平移值
`anim`	Boolean	<optional>	是否使用动画

setTranslateX(x)

设置拓扑水平平移值

Parameters:

Name	Type	Description
`x`	Number	水平平移值

setTranslateY(y)

设置拓扑垂直平移值

Parameters:

Name	Type	Description
`y`	Number	垂直平移值

setVisibleFunc(func)

设置可见过滤器

Parameters:

Name	Type	Description
`func`	function	过滤器函数

setWidth(width)

设置布局宽度

Parameters:

Name	Type	Description
`width`	Number	宽度值

setZoom(value, anim, point)

设置拓扑缩放值

Parameters:

Name	Type	Argument	Description
`value`	Number		缩放值
`anim`	Boolean	<optional>	是否使用动画
`point`	Object	<optional>	缩放中心点的坐标

showScrollBar()

显示滚动条

sm() → {ht.SelectionModel}

获取选中模型，getSelectionModel的缩写

See:

getSelectionModel

Returns:

Type: ht.SelectionModel

toCanvas(background) → {HTMLCanvasElement}

将拓扑导出为canvas

Parameters:

Name	Type	Description
`background`	color	背景色

Returns:

Type: HTMLCanvasElement

toDataURL(background) → {String}

将拓扑导出为base64格式字符串

Parameters:

Name	Type	Description
`background`	color	背景色

Returns:

Type: String

translate(x, y, anim)

在当前值基础上增加水平和垂直平移值

Parameters:

Name	Type	Argument	Description
`x`	Number		新增的水平平移值
`y`	Number		新增的垂直平移值
`anim`	Boolean	<optional>	是否使用动画

tx(value)

获取或设置水平平移值，没有参数时相当于getTranslateX，有参数时相当于setTranslateX

Parameters:

Name	Type	Description
`value`	Number	平移值

ty(value)

获取或设置垂直平移值，没有参数时相当于getTranslateY，有参数时相当于setTranslateY

Parameters:

Name	Type	Description
`value`	Number	平移值

umi(listener, scope)

删除交互事件监听器，removeInteractorListener的缩写

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域

See:

removeInteractorListener

ump(listener, scope)

删除自身属性变化事件监听器，removePropertyChangeListener的缩写

Parameters:

Name	Type	Argument	Description
`listener`	function		监听器函数
`scope`	Object	<optional>	监听器函数域

See:

removePropertyChangeListener

validate()

立刻刷新拓扑

zoomIn(anim, point)

放大拓扑

Parameters:

Name	Type	Argument	Description
`anim`	Boolean	<optional>	是否使用动画
`point`	Object	<optional>	缩放中心点的坐标

zoomOut(anim, point)

缩小拓扑

Parameters:

Name	Type	Argument	Description
`anim`	Boolean	<optional>	是否使用动画
`point`	Object	<optional>	缩放中心点的坐标

zoomReset(anim, point)

将拓扑缩放值改为1

Parameters:

Name	Type	Argument	Description
`anim`	Boolean	<optional>	是否使用动画
`point`	Object	<optional>	缩放中心点的坐标