ht.graph.GraphView(dataModel)

new GraphView(dataModel)

拓扑图形组件graph.GraphView是HT框架中2D功能最丰富的组件,其相关类库都在graph包下。

GraphView具有基本图形的呈现和编辑、拓扑节点连线及自动布局功能;
封装了电力和电信等行业预定义对象,具有动画渲染等特效, 因此其应用面很广泛,可作为监控领域的绘图工具和人机界面,或作为一般性的图形化编辑工具,或扩展成工作流和组织图等企业应用。

Parameters:
Name Type Attributes Description
dataModel ht.DataModel <optional>

Members

_panning :boolean

正在平移

Methods

addBottomPainter(painter) → {void}

增加底层Painter

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

Parameters:
Name Type Description
painter painter | basePainterClass

可传递绘制函数或者对象。为对象时在 draw 属性上实现绘制函数

Returns:
void
Example
//Painter示例1:
function MyBottomPainter() {
}
ht.Default.def(MyBottomPainter, Object, {
    draw: function (g) {
        g.save();
        //draw...
        g.restore();
    }
});
graphView.addBottomPainter(new MyBottomPainter());
//Painter示例2:
var painter = function (g) {
    g.save();
    //draw...
    g.restore();
}
graphView.addBottomPainter(painter);

addInteractorListener(listener, scope, ahead) → {void}

增加交互事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope any <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void
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) → {void}

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope any <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void

addToDOM(parentNode) → {void}

将组件加入到指定的 DOM 元素底下,不指定则加入到 document.body 下

Parameters:
Name Type Attributes Description
parentNode HTMLDivElement <optional>

父 DOM,默认为 document.body

Returns:
void

addTopPainter(painter) → {void}

增加顶层Painter

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

Parameters:
Name Type Description
painter painter | basePainterClass

可传递绘制函数或者对象。为对象时在 draw 属性上实现绘制函数

Returns:
void
Example
//Painter示例1:
function MyTopPainter() {
}
ht.Default.def(MyTopPainter, Object, {
    draw: function (g) {
        g.save();
        //draw...
        g.restore();
    }
});
graphView.addTopPainter(new MyTopPainter());
//Painter示例2:
var painter = function (g) {
    g.save();
    //draw...
    g.restore();
}
graphView.addTopPainter(painter);

addViewListener(listener, scope, ahead) → {void}

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope any <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void

adjustIndex(data) → {number}

判断阶段层级,可重载自定义

Parameters:
Name Type Description
data ht.Data

节点

Returns:
number

adjustTranslateX(value) → {number}

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

Parameters:
Name Type Description
value number

原始水平平移值

Returns:
number -

新的水平平移值

adjustTranslateY(value) → {number}

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

Parameters:
Name Type Description
value number

原始垂直平移值

Returns:
number -

新的垂直平移值

adjustZoom(value) → {number}

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

Parameters:
Name Type Description
value number

原始缩放值

Returns:
number -

最终缩放值

appendHTML(html, ignoreParentExist) → {boolean}

追加 dom 元素到视图的根 dom 下,并返回是否追加成功

Parameters:
Name Type Attributes Description
html any

可以是个 dom 节点或者 ht 的视图组件

ignoreParentExist boolean <optional>

是否不忽略已存在检查,若不传或为 false 则是进行检查,为 true 忽略

Returns:
boolean

autoScroll(e, lastClientPoint) → {void}

自动根据交互事件位置滚动画布

Parameters:
Name Type Description
e MouseEvent
lastClientPoint Point
Returns:
void

calculateAttachPoint(data, point) → {any}

判断距离节点最近的吸附点信息

Parameters:
Name Type Description
data ht.Data

节点

point Point

要判断的坐标点

Returns:
any
Example
返回信息如
{
       index: 吸附点下标,
       distance: 靠近距离
       info: 定义的吸附点信息,
       point: 位置信息
   }

calculateClosestPoint(data, point) → {object}

获取节点上距离 point 最近的点

Parameters:
Name Type Description
data ht.Data

节点

point object

点,格式 {x: 72.5, y: 145}

Requires:
  • module:ht-flow.js
Returns:
object -

点信息

calculateEdgePosition(edge, point, skipIndex) → {any}

判断所在位置离连线最近的位置,可能是一个拐点,也可能是一个百分比值, 别名: getNeareastPositionOfPath

Parameters:
Name Type Attributes Description
edge ht.Edge

连线

point Point

位置点

skipIndex number <optional>

跳过的拐点

Returns:
any
Example
// 当是拐点时
{
       index: 拐点下标,
       distance: 靠近距离
       point: 位置信息
   }
// 当线段百分比位置时
{
       percent: 线段百分比位置,
       distance: 靠近距离
       point: 位置信息
   }

calculateLength(data) → {number}

计算节点长度

Parameters:
Name Type Description
data ht.Data

节点

Requires:
  • module:ht-flow.js
Returns:
number -

长度

calculatePointLength(data, point, tolerance) → {number}

获取点所在长度

Parameters:
Name Type Attributes Description
data ht.Data

节点

point object

格式 {x: 72.5, y: 145}

tolerance number <optional>
Requires:
  • module:ht-flow.js
Returns:
number

checkDoubleClickOnNote(e, data) → {boolean}

判断交互事件是否在对应节点上双击

Parameters:
Name Type Description
e MouseEvent
data ht.Data
Returns:
boolean

countFrame() → {number}

计数帧

Returns:
number

deserialize(url, params) → {void}

反序列化

Parameters:
Name Type Attributes Description
url string | Object

反序列化内容,可为 JSON 对象,JSON 格式字符串,JSON 路径

params deserializeParams | deserializeFinishFunc <optional>

params可为对象,包含如下属性,或者为回调函数;
setId: boolean, 保持 Node id 不变
finishFunc: function, 反序列化完成后的回调函数
justDatas: boolean, 只序列化节点
disableOnPreDeserialize: boolean, 取消执行 onPreDeserialize 方法
disableInit: boolean, 取消执行 init 方法
disableOnPostDeserialize: boolean, 取消执行 onPostDeserialize 方法
reset: boolean, 重置场景状态

Returns:
void
Example
view.deserialize('previews/index.json', function(json, dm, view, datas){

});

disableDashFlow() → {void}

停止虚线流动

Requires:
  • module:ht-dashflow.js
Returns:
void

disableDirtyRect() → {void}

关闭脏矩形(一旦 disable,可能会有性能问题)

Returns:
void
Default Value:
  • false

disableFlow() → {void}

停止流动

Requires:
  • module:ht-flow.js
Returns:
void

disableToolTip() → {void}

关闭ToolTip功能

Returns:
void

dispose() → {void}

销毁场景

Returns:
void
Since:
  • 7.7.1

dm() → {ht.DataModel}

获取getDataModel的缩写

Returns:
ht.DataModel

drawData(g, data, rect) → {void}

绘制数据

Parameters:
Name Type Description
g CanvasRenderingContext2D
data ht.Data
rect Rect
Returns:
void

each(func, scope) → {void}

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

Parameters:
Name Type Attributes Description
func Object

遍历函数

scope Object <optional>

函数域

Returns:
void
Example
graphView.each(function(data) {
    console.log(data: Data);
});

enableDashFlow(interval) → {void}

启动虚线流动,默认为 false,interval 表示流动的时间间隔

Parameters:
Name Type Attributes Description
interval number <optional>

时间间隔

Requires:
  • module:ht-dashflow.js
Returns:
void

enableDirtyRect() → {void}

启用脏矩形

Returns:
void

enableFlow(interval) → {void}

启动流动,默认为 false,interval 表示流动的时间间隔

Parameters:
Name Type Attributes Description
interval number <optional>

时间间隔

Requires:
  • module:ht-flow.js
Returns:
void

enableToolTip() → {void}

启用ToolTip

Returns:
void

fi(event) → {void}

Parameters:
Name Type Description
event any
Returns:
void

fireInteractorEvent(event) → {void}

Parameters:
Name Type Description
event any
Returns:
void

firePropertyChange(property, oldValue, newValue) → {void}

派发属性变化事件,可使用fp的简写方式

Parameters:
Name Type Description
property string

属性

oldValue any

旧值

newValue any

新值

Returns:
void

fireViewEvent(event) → {void}

派发 View 事件

Parameters:
Name Type Description
event any
Returns:
void

fitContent(anim, padding, notZoomIn) → {void}

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

Parameters:
Name Type Attributes Description
anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

padding number <optional>

缩放后图元区域与拓扑边缘的距离,默认为20

notZoomIn boolean <optional>

是否将最小缩放值限定为1

Returns:
void

fitData(data, anim, padding, notZoomIn, retry) → {void}

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

Parameters:
Name Type Attributes Description
data ht.Data

要显示的data

anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

padding number <optional>

缩放后图元区域与拓扑边缘的距离,默认为20

notZoomIn boolean <optional>

是否将最小缩放值限定为1

retry boolean <optional>

当拓扑状态异常时,是否延时重试fitData,默认为true

Returns:
void

fitRect(rect, anim, notZoomIn) → {void}

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

Parameters:
Name Type Attributes Description
rect Rect

矩形范围

anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

notZoomIn boolean <optional>

是否将最小缩放值限定为1

Returns:
void

fitSelection(padding, anim, notZoomIn) → {AnimInstance}

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

Parameters:
Name Type Attributes Description
padding number <optional>

缩放后图元区域与拓扑边缘的距离,默认为20

anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

notZoomIn boolean <optional>
Returns:
AnimInstance

fp(property, oldValue, newValue) → {void}

派发属性变化事件,firePropertyChange 方法的简写

Parameters:
Name Type Description
property string

属性

oldValue any

旧值

newValue any

新值

Returns:
void

getAnchorEditableFunc() → {function}

获取锚点可编辑过滤器

Returns:
function

getAttachPoints(data) → {any}

返回节点的吸附点信息,默认优先得到 style 中的 attach.points,若无则返回矢量定义上的 attachPoints 信息,可重载自定义

Parameters:
Name Type Description
data ht.Data
Returns:
any
Example
// 获取目标 data 的吸附点配置,格式形如:
   // [
   //    { x : 0, y : 1, customInfo : 'hello' },
   //    { x : 1, y : 1, offsetX : 10, offsetY : 20, customInfo : 'world' },
   // ]

getAttachStyle(data) → {string}

获取目标 data 的吸附方式,可选值:close-足够接近,默认;strict-最

Parameters:
Name Type Description
data ht.Data
Returns:
string

getAutoScrollZone() → {number}

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

Returns:
number -

自动滚动区域

getBodyColor(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

要染色的图元

Returns:
string -

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

getBorderColor(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

要染色的图元

Returns:
string -

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

getBottomPainters() → {Array.<any>}

获取所有底层绘制器

Returns:
Array.<any>

getBoundsForGroup(child) → {Object}

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

Parameters:
Name Type Description
child ht.Data

子节点

Returns:
Object -

子节点的尺寸范围

getCanvas() → {HTMLCanvasElement}

获取拓扑的画布

Returns:
HTMLCanvasElement -

画布

getClass() → {function}

获取类声明(构造函数)

Returns:
function -

类声明(构造函数)

getClassName() → {string}

获取类全名,继承Data并希望序列化时应该重写此方法返回子类的类名字符串

Returns:
string -

类全名

getClipBounds() → {any}

获取裁切界限

Returns:
any

getContentRect() → {Object}

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

Returns:
Object -

内容区域

getCoreInteractor() → {any}

获取核心交互器

Returns:
any -

交互器

getCurrentConnectActionType() → {string}

获取当前的连接动作类型,配合 Default 上的 getConnectAction 和 setConnectAction 使用

Returns:
string

getCurrentSubGraph() → {ht.SubGraph}

获取当前子网

Returns:
ht.SubGraph -

子网对象

getDashFlowInterval() → {number}

获取虚线流动时间间隔

Requires:
  • module:ht-dashflow.js
Returns:
number

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

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

Parameters:
Name Type Attributes Description
pointOrEvent Object

逻辑坐标点或交互事件对象(如鼠标事件对象)

filter function <optional>

过滤器函数,传入data,自定义逻辑返回true或false判断此data是否可被getDataAt返回

range number <optional>

扩大点范围

Returns:
ht.Data -

点下的图元

getDataInfoAt(pointOrEvent, filter, range) → {Object}

传入逻辑坐标点或者交互event事件参数,返回当前点下的图元及part信息

Parameters:
Name Type Attributes Description
pointOrEvent MouseEvent | Point

逻辑坐标点或交互事件对象(如鼠标事件对象)

filter function <optional>

过滤器,可以忽略一些不想选到的节点,data => boolean

range any <optional>
Returns:
Object -

图元和part信息

getDataModel() → {ht.DataModel}

获取绑定的数据模型

Returns:
ht.DataModel -

数据模型

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

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

Parameters:
Name Type Attributes Description
rect Rect

逻辑坐标区域

intersects boolean <optional>

指定相交选中还是包含选中,true表示相交,false表示包含。

selectable boolean <optional>

是否只返回可被选中的图元,可否被选中通过isSelectable判断

Returns:
ht.List

getDataUI(data) → {any}

返回节点绘制信息

Parameters:
Name Type Description
data ht.Data

节点

Returns:
any

getDataUIBounds(data) → {Object}

获取图元UI的绘制范围

Parameters:
Name Type Description
data ht.Data

图元

Returns:
Object

getDebugTip() → {any}

获取调试提示信息

Returns:
any -

any

getDisabledDiv() → {HTMLElement}

返回禁用遮罩层 div

Returns:
HTMLElement

getEdgeInfo(edge) → {any}

获取连线的绘制信息

Parameters:
Name Type Description
edge ht.Edge
Returns:
any

getEdgeSourcePosition() → {Point}

获取连线起始节点连接点位置

Returns:
Point -

getEdgeTargetPosition() → {Point}

获取连线结束节点连接点位置

Returns:
Point -

getEditableFunc() → {function}

获取编辑过滤器函数

Returns:
function

getEditInteractor() → {ht.graph.EditInteractor}

获取编辑交互器

getEditPointBackground() → {string}

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

Returns:
string

getEditPointBorderColor() → {string}

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

Returns:
string

getEditPointSize() → {number}

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

Returns:
number

getEditStyle(name) → {any}

获取交互样式值,必须 gv.setEditable(true) 时才有效

Parameters:
Name Type Description
name string
Returns:
any

getFlowInterval() → {number}

获取流动的时间间隔

Requires:
  • module:ht-flow.js
Returns:
number -

时间间隔

getFullscreenDatas() → {Array.<any>}

获取全屏的数据

Returns:
Array.<any>

getHeight() → {number}

获取拓扑组件的布局高度

Returns:
number

getHoverDelay() → {number}

获取悬停延迟时间,若无设置使用 ht.Default.hoverDelay

Returns:
number

getHScrollBar() → {HTMLDivElement}

获取横向滚动条的 div 对象

Returns:
HTMLDivElement

getIconInfoAt(pointOrEvent, data) → {Object}

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

Parameters:
Name Type Description
pointOrEvent Object

逻辑坐标点或交互事件对象(如鼠标事件对象)

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

getImage(data) → {any}

获取节点图片,可重载自定义

Parameters:
Name Type Description
data ht.Data
Returns:
any

getInteractors() → {ht.List}

获取交互器

Returns:
ht.List

getLabel(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getLabel2(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getLabel2Background(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getLabel2Color(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getLabelBackground(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getLabelColor(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getLayers() → {Array.<Object>}

获取拓扑中已定义的层

Returns:
Array.<Object>

getLayersInfo() → {Array.<Object>}

获得所有的层

Returns:
Array.<Object>

getLogicalPoint(event) → {Point}

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

Parameters:
Name Type Description
event MouseEvent

事件对象

Returns:
Point

getMovableFunc() → {function}

获取移动过滤器函数

Returns:
function

getMoveMode(e, moveData) → {string}

获取指定节点的移动模式,值可为:x、y、xy ,表示可横向、纵向、任意方向移动

Parameters:
Name Type Description
e any
moveData ht.Data
Returns:
string

getNeareastPositionOfPath(edge, point, skipIndex) → {any}

判断所在位置离连线最近的位置,可能是一个拐点,也可能是一个百分比值, 是 calculateEdgePosition 的别名

Parameters:
Name Type Attributes Description
edge ht.Edge

连线

point Point

位置点

skipIndex number <optional>

跳过的拐点

Returns:
any
Example
// 当是拐点时
{
       index: 拐点下标,
       distance: 靠近距离
       point: 位置信息
   }
// 当线段百分比位置时
{
       percent: 线段百分比位置,
       distance: 靠近距离
       point: 位置信息
   }

getNodeRect(node) → {Rect}

获得节点矩形区域

Parameters:
Name Type Description
node ht.Node
Returns:
Rect -

区域

getNote(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getNote2(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getNote2Background(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getNoteBackground(data) → {string}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
string -

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

getOpacity(datadata) → {number}

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

Parameters:
Name Type Description
datadata ht.Data
Returns:
number -

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

getPercentAngle(data, percent) → {number}

获取节点上百分比位置的弧度

Parameters:
Name Type Description
data ht.Data

节点

percent number

百分比,取值 0~1

Requires:
  • module:ht-flow.js
Returns:
number

getPercentPosition(data, percent) → {object}

获取节点上百分比位置的点信息

Parameters:
Name Type Description
data ht.Data

节点

percent number

百分比,取值 0~1

Requires:
  • module:ht-flow.js
Returns:
object

getPercentPositionOfPath(shape, percent) → {Point}

获取路径的百分比位置

Parameters:
Name Type Description
shape ht.Data

不规则图形节点

percent number

百分比 0-1

Returns:
Point

getPointEditableFunc() → {function}

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

Returns:
function

getPointsOfPath(shape) → {any}

获取不规则图形上的点位置的具体信息

Parameters:
Name Type Description
shape ht.Data

不规则图形

Returns:
any

getRectEditableFunc() → {function}

获取大小编辑过滤器函数

Returns:
function

getRectSelectBackground() → {string}

获取框选选择框的背景色

Returns:
string

getRectSelectBorderColor() → {string}

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

Returns:
string

getRotationEditableFunc() → {function}

获取旋转编辑过滤器函数

Returns:
function

getRotationPoint(data) → {Object}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
Object -

旋转控制点坐标

getScreenPoint(point, y) → {Point}

获取屏幕 dom 坐标

Parameters:
Name Type Attributes Description
point number | Point

可以是一个 { x, y } 对象,或者 x 坐标

y number <optional>

y 坐标

Returns:
Point -

getScrollBarColor() → {string}

获取滚动条颜色

Returns:
string

getScrollBarSize() → {number}

获取滚动条宽度

Returns:
number

getScrollRect() → {Object}

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

Returns:
Object -

矩形区域

getSelectableFunc() → {function}

获取选择过滤器函数

Returns:
function

getSelectColor(data) → {string}

获取选中颜色,默认返回 style 中的 select.color 属性,可重载自定义

Parameters:
Name Type Description
data ht.Data
Returns:
string

getSelectedDataAt(pointOrEvent) → {ht.Data}

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

Parameters:
Name Type Description
pointOrEvent Object

逻辑坐标点或交互事件对象(如鼠标事件对象)

Returns:
ht.Data

getSelectionModel() → {ht.SelectionModel}

获取选中模型

getSelectWidth(data) → {number}

返回节点选中边框宽度,可重写逻辑

Parameters:
Name Type Description
data ht.Data

节点

Returns:
number

getSerializableProperties() → {any}

获取哪些属性可以被序列化

Returns:
any

getShape(node) → {string}

获得节点绘制的多边形类型,默认返回 style 中的 shape 属性,重载自定义

Parameters:
Name Type Description
node ht.Node
Returns:
string

getState(node) → {string}

获得节点状态值,默认返回 style 中的 state 属性,若空返回矢量定义中的 state 属性,详见矢量 state 机制,可重载自定义

Parameters:
Name Type Description
node ht.Node
Returns:
string

getSuperClass() → {function}

获取父类声明(构造函数),继承类时可以用来调用父类构造或函数

Returns:
function -

父类声明(构造函数)

getTextEditInfo(data) → {Object}

获得双击文本编辑信息,可重载自定义

Parameters:
Name Type Description
data ht.Data
Returns:
Object
Example
// 默认只有文本可编辑
if (data instanceof Text) {
       returns {
           name: 'text', // 编辑的属性名字
           accessType: 's', // 编辑的属性类型,p | a | s
           isMultiline: false // 是否为多行编辑
       };
   }

getToolTip(e) → {string}

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

Parameters:
Name Type Description
e Event

鼠标或Touch事件对象

Returns:
string -

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

getTopPainters() → {Array.<any>}

获取所有顶层绘制器

Returns:
Array.<any>

getTranslateX() → {number}

获取水平平移值

Returns:
number -

水平平移值

getTranslateY() → {number}

获取垂直平移值

Returns:
number -

垂直平移值

getView() → {HTMLDivElement}

获取拓扑组件的根层div

Returns:
HTMLDivElement

getViewRect() → {Rect}

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

Returns:
Rect

getVisibleFunc() → {function}

获取可见过滤器函数

Returns:
function

getVScrollBar() → {HTMLDivElement}

获取横向滚动条的 div 对象

Returns:
HTMLDivElement

getWidth() → {number}

获取拓扑组件的布局宽度

Returns:
number

getZoom() → {number}

获取拓扑整体缩放值

Returns:
number

handleClick(e, data, part) → {void}

图元点击回调,可重载自定义

Parameters:
Name Type Description
e MouseEvent
data ht.Data
part string
Returns:
void

handleDataModelChange(event) → {void}

处理数据节点变化,可重载自定义

Parameters:
Name Type Description
event any
Returns:
void

handleDataModelPropertyChange(event) → {void}

处理数据节点属性变化,可重载自定义

Parameters:
Name Type Description
event any
Returns:
void

handleDataPropertyChange(event) → {void}

处理数据属性变化,可重载自定义

Parameters:
Name Type Description
event any
Returns:
void

handleDelete(event) → {void}

处理按下 delete 按键的动作,可重载自定义

Parameters:
Name Type Description
event any
Returns:
void

handleDoubleClick(e, data, part) → {void}

图元双击回调,可重载自定义

Parameters:
Name Type Description
e MouseEvent
data ht.Data
part string
Returns:
void

handleHierarchyChange(event) → {void}

处理层次结构更改,可重载自定义

Parameters:
Name Type Description
event any
Returns:
void

handleKeyDown(event) → {void}

案件键盘事件,可重载自定义

Parameters:
Name Type Description
event KeyboardEvent
Returns:
void

handlePinch(event) → {void}

处理 touch 设备上的双指操作交互,可重载自定义

Parameters:
Name Type Description
event TouchEvent
Returns:
void

handleScroll(event) → {void}

处理鼠标滚轮操作交互,可重载自定义

Parameters:
Name Type Description
event MouseEvent
Returns:
void

handleSelectionChange(event) → {void}

处理选中变化事件

Parameters:
Name Type Description
event any
Returns:
void

hideDebugTip() → {void}

隐藏调试面板

Returns:
void

invalidate(delay) → {void}

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

Parameters:
Name Type Attributes Description
delay number <optional>

延迟刷新的间隔事件(单位:ms)

Returns:
void

invalidateAll() → {void}

无效拓扑中的所有图元

Returns:
void

invalidateData(data) → {void}

无效拓扑中的图元

Parameters:
Name Type Description
data ht.Data

要无效的图元

Returns:
void

invalidateSelection() → {void}

无效选中模型中的图元

Returns:
void

isAnchorEditable() → {boolean}

节点锚点是否可编辑,如果要设置节点锚点都不可编辑可重写这个方法

Returns:
boolean

isAutoHideScrollBar() → {boolean}

是否自动隐藏滚动条

Returns:
boolean

isAutoMakeVisible() → {boolean}

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

Returns:
boolean

isConnectActionVisible(data) → {boolean}

连接动作按钮是否可见

Parameters:
Name Type Description
data ht.Data
Returns:
boolean

isDebugTipShowing() → {boolean}

返回调试面板是否可见

Returns:
boolean

isDisabled() → {boolean}

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

Returns:
boolean

isEditable(data) → {boolean}

判断图元是否可被编辑

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isEditVisible(data) → {boolean}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isInteractive(data) → {boolean}

判断节点是否可交互,默认由 style 中的 interactive 决定,可重载自定义,如禁用所有交互 gv.isInteractive = () => false;

Parameters:
Name Type Description
data ht.Data
Returns:
boolean

isLabelVisible(data) → {boolean}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isMovable(data) → {boolean}

判断图元是否可移动

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isNoteVisible(data) → {boolean}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isPannable() → {boolean}

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

Returns:
boolean

isPixelPerfect(data) → {boolean}

判断节点是否像素精确,默认由 style 中的 isPixelPerfect 决定,可重载自定义

Parameters:
Name Type Description
data ht.Data
Returns:
boolean

isPointEditable(data) → {boolean}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isRectEditable(data) → {boolean}

判断图元大小是否可编辑

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isRectSelectable() → {boolean}

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

Returns:
boolean

isResettable() → {boolean}

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

Returns:
boolean

isRotationEditable(data) → {boolean}

判断图元是否可编辑旋转

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isScrollBarVisible() → {boolean}

判断拓扑滚动条是否可见

Returns:
boolean

isSelectable(data) → {boolean}

判断图元是否可被选中

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isSelected(data) → {boolean}

判断图元是否被选中

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isSelectedById(id) → {boolean}

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

Parameters:
Name Type Description
id string | number

图元id

Returns:
boolean

isSelectionModelShared() → {boolean}

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

Returns:
boolean

isSelectVisible(data) → {boolean}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isSourceTargetEditable(edge, data, type) → {boolean}

判断 edge 是否可以连接到 data 上,可重载自定义

Parameters:
Name Type Attributes Description
edge ht.Edge
data ht.Edge | ht.Node
type string <optional>
Returns:
boolean

isToolTipEnabled() → {boolean}

返回提示功能是否可用

Returns:
boolean

isValidGuideLineSource(node) → {boolean}

判断一个节点是否可以成为对齐指导线的参考节点,默认都返回 true ,可重载自定义

Parameters:
Name Type Description
node ht.Node
Returns:
boolean

isVisible(data) → {boolean}

判断图元是否可见

Parameters:
Name Type Description
data ht.Data

图元

Returns:
boolean

isZoomable() → {boolean}

判断视图是否可缩放

Returns:
boolean

iv(delay) → {void}

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

Parameters:
Name Type Attributes Description
delay number <optional>

延迟刷新的间隔事件(单位:ms)

Returns:
void

layout(x, y, width, height) → {void}

执行布局

Parameters:
Name Type Description
x number

x轴坐标

y number

y轴坐标

width number

区域宽度

height number

区域高度

Returns:
void

layoutHTML(data, gv, bound) → {any}

对渲染在节点上的dom|ht.widget组件|ht.ui组件进行布局

Parameters:
Name Type Description
data ht.Node

节点

gv any

dom|ht.widget组件|ht.ui组件

bound boolean

是否不使用使用css transform进行缩放

Returns:
any

lp(event) → {Point}

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

Parameters:
Name Type Description
event Object

事件对象

Returns:
Point

makeCenter(data, anim, retry) → {AnimInstance}

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

Parameters:
Name Type Attributes Description
data ht.Data
anim boolean | AnimOption <optional>
retry boolean <optional>
Returns:
AnimInstance

makeVisible(data) → {void}

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

Parameters:
Name Type Description
data ht.Data

图元

Returns:
void

mi(listener, scope, ahead) → {void}

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void
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原生事件
		}
});

moveDatas(datas, offsetX, offsetY) → {void}

整体移动所有传入图元位置

Parameters:
Name Type Attributes Description
datas ht.List | Array.<ht.Data>
offsetX number

水平移动值

offsetY number <optional>

垂直移动值

Returns:
void

moveSelection(offsetX, offsetY) → {void}

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

Parameters:
Name Type Description
offsetX number

水平移动值

offsetY number

垂直移动值

Returns:
void

mp(listener, scope, ahead) → {void}

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

ahead boolean <optional>

是否将当前监听器插入到监听器列表开头

Returns:
void

onAutoLayoutEnded() → {void}

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

Returns:
void

onBackgroundClicked(event) → {void}

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

Parameters:
Name Type Description
event Object

事件对象

Returns:
void

onBackgroundDoubleClicked(event) → {void}

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

Parameters:
Name Type Description
event Object

事件对象

Returns:
void

onCSGBoxDoubleClicked(csgBox, event, part) → {void}

双击 CSGBox 时回调

Parameters:
Name Type Attributes Description
csgBox ht.CSGBox
event MouseEvent
part string <optional>
Returns:
void

onCurrentSubGraphChanged(event) → {void}

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

Parameters:
Name Type Description
event Object

事件对象

Returns:
void

onDataClicked(data, e) → {void}

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

Parameters:
Name Type Description
data ht.Data

被点击的图元

e Object

事件对象

Returns:
void

onDataDoubleClicked(data, e) → {void}

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

Parameters:
Name Type Description
data ht.Data

双击的图元

e Object

事件对象

Returns:
void

onDoorWindowDoubleClicked(csgBox, event, part) → {void}

双击 DoorWindow 时回调

Parameters:
Name Type Attributes Description
csgBox ht.CSGBox
event MouseEvent
part string <optional>
Returns:
void

onEdgeDoubleClicked(edge, e) → {void}

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

Parameters:
Name Type Description
edge ht.Edge

连线

e Object

事件对象

Returns:
void

onGroupDoubleClicked(group, e) → {void}

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

Parameters:
Name Type Description
group ht.Group

Group对象

e Object

事件对象

Returns:
void

onMoveEnded() → {void}

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

Returns:
void

onPanEnded() → {void}

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

Returns:
void

onPinchEnded() → {void}

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

Returns:
void

onPropertyChanged(event) → {void}

属性变化回调函数,可重载做后续处理

Parameters:
Name Type Description
event any

属性变化事件

Returns:
void
Example
//event格式:
{
	   property: 'name',//发生变化的属性
	   oldValue: 'oldValue',//旧值
	   newValue: 'newValue',''新值
	   data: data//发生变化的data
}

onRectSelectEnded() → {void}

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

Returns:
void

onSelectionChanged(event) → {void}

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

Parameters:
Name Type Description
event Object

选中变化事件对象

Returns:
void

onSelectionModelSharedChanged() → {void}

选择模型共享变化时回调

Returns:
void

onSubGraphDoubleClicked(subGraph, event) → {void}

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

Parameters:
Name Type Description
subGraph ht.SubGraph

子网对象

event Object

事件对象

Returns:
void

onTranslateEnded() → {void}

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

Returns:
void

onVisibleChanged(data, newVisible) → {void}

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

Parameters:
Name Type Description
data ht.Data

图元

newVisible boolean

新的可见状态

Returns:
void

onZoomEnded() → {void}

缩放动画结束时回调

Returns:
void

pinchZoomIn(point) → {void}

放大

Parameters:
Name Type Description
point Point
Returns:
void

pinchZoomout(point) → {void}

缩小

Parameters:
Name Type Description
point Point
Returns:
void

preventDefaultWhenInteractive(data) → {boolean}

判断节点是否可交互时是否阻止默认图纸交互行为

Parameters:
Name Type Description
data ht.Data
Returns:
boolean

rectContains(data, rect) → {boolean}

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

Parameters:
Name Type Description
data ht.Data

图元

rect Rect

矩形

Returns:
boolean

rectIntersects(data, rect) → {boolean}

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

Parameters:
Name Type Description
data ht.Data

图元

rect Rect

矩形

Returns:
boolean

redraw(rect) → {void}

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

Parameters:
Name Type Attributes Description
rect Rect <optional>

矩形范围

Returns:
void

removeBottomPainter(painter) → {void}

删除底层Painter

Parameters:
Name Type Description
painter Object | function

Painter类

Returns:
void

removeInteractorListener(listener, scope) → {void}

删除交互事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void

removePropertyChangeListener(listener, scope) → {void}

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void

removeSelection() → {void}

删除所有选中的图元

Returns:
void

removeTopPainter(painter) → {void}

删除顶层Painter

Parameters:
Name Type Description
painter Object | function

Painter类

Returns:
void

removeViewListener(listener, scope) → {void}

删除视图事件监听器

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void

reset() → {void}

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

Returns:
void

reverseEach(func, scope) → {void}

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

Parameters:
Name Type Attributes Description
func Object

遍历函数

scope Object <optional>

函数域

Returns:
void
Example
graphView.reverseEach(function(data) {
     console.log(data: Data);
});

scrollZoomIn(point) → {void}

以传入的参数作为中心点放大

Parameters:
Name Type Description
point Point

中心点

Returns:
void

scrollZoomOut(point) → {void}

以传入的参数作为中心点缩小

Parameters:
Name Type Description
point Point

中心点

Returns:
void

selectAll() → {void}

选中拓扑中所有图元

Returns:
void

serialize(space) → {string}

返回数据模型的序列化内容

Parameters:
Name Type Attributes Description
space number <optional>

缩进间隔

Returns:
string

serializeProperty(name, value, serliazer) → {any}

返回数据模型的序列化属性的内容

Parameters:
Name Type Description
name string
value any
serliazer ht.JSONSerializer
Returns:
any

setAnchorEditableFunc(func) → {void}

设置锚点可编辑过滤器,可重载自定义,如禁用所有锚点编辑 setAnchorEditableFunc(() => false);

Parameters:
Name Type Description
func function
Returns:
void

setAutoHideScrollBar(v) → {void}

设置是否自动隐藏滚动条

Parameters:
Name Type Description
v boolean
Returns:
void

setAutoMakeVisible(v) → {void}

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

Parameters:
Name Type Description
v boolean
Returns:
void

setAutoScrollZone(v) → {void}

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

Parameters:
Name Type Description
v boolean
Returns:
void

setCurrentConnectActionType(actionType) → {void}

设置当前的连接动作类型,配合 Default 上的 getConnectAction 和 setConnectAction 使用

Parameters:
Name Type Description
actionType string
Returns:
void

setCurrentSubGraph(subGraph) → {void}

设置当前子网

Parameters:
Name Type Description
subGraph ht.SubGraph

子网对象

Returns:
void

setCursor(style) → {void}

设置 css 的鼠标样式,cursor

Parameters:
Name Type Description
style string
Returns:
void

setDashFlowInterval(interval) → {void}

设置虚线流动时间间隔

Parameters:
Name Type Description
interval number

时间间隔

Requires:
  • module:ht-dashflow.js
Returns:
void

setDataModel(dataModel) → {void}

设置绑定的数据模型

Parameters:
Name Type Description
dataModel ht.DataModel
Returns:
void -

数据模型

setDefaultCursor(style) → {void}

设置 css 的默认鼠标样式,cursor

Parameters:
Name Type Description
style string
Returns:
void

setDisabled(value, iconUrl) → {void}

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

Parameters:
Name Type Attributes Description
value boolean

是否禁用组件

iconUrl string <optional>

蒙板上显示的icon的路径

Returns:
void

setEditable(editable) → {void}

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

Parameters:
Name Type Description
editable boolean
Returns:
void

setEditableFunc(func) → {void}

设置编辑过滤器函数

Parameters:
Name Type Description
func function

过滤器函数

Returns:
void

setEditInteractor(interactor) → {void}

设置编辑交互器

Parameters:
Name Type Description
interactor any

交互器

Returns:
void

setEditPointBackground(color) → {void}

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

Parameters:
Name Type Description
color string

颜色值

Returns:
void

setEditPointBorderColor(color) → {void}

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

Parameters:
Name Type Description
color string

颜色值

Returns:
void

setEditPointSize(size) → {void}

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

Parameters:
Name Type Description
size number

编辑点尺寸

Returns:
void

setEditStyle(key, value, base) → {void}

设置编辑样式

Parameters:
Name Type Attributes Description
key string
value any
base any <optional>
Returns:
void

setFlowBatch(v) → {void}

设置批量流动

Parameters:
Name Type Description
v boolean
Requires:
  • module:ht-flow.js
Returns:
void

setFlowInterval(interval) → {void}

设置流动的时间间隔

Parameters:
Name Type Description
interval number

时间间隔

Requires:
  • module:ht-flow.js
Returns:
void

setFocus() → {void}

设置视图聚焦

Returns:
void

setHeight(height) → {void}

设置布局高度

Parameters:
Name Type Description
height number

高度值

Returns:
void

setHoverDelay(hoverDelay) → {void}

设置悬停延迟时间,若无设置使用 ht.Default.hoverDelay

Parameters:
Name Type Description
hoverDelay number
Returns:
void

setInteractors(interactors) → {void}

设置交互器

Parameters:
Name Type Description
interactors ht.List | Array.<Object>

交互器对象集合

Returns:
void

setLayers(layers) → {void}

定义拓扑中的层,参数为数组,数组中每个元素代表一个层,层在数组中的索引越大,在拓扑中就越靠上显示

注意,图元的默认layer是0,因此如果定义的层中不包含0,所有的图元默认将不可见

Parameters:
Name Type Description
layers Array.<Object>

层数组

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

setMovableFunc(func) → {void}

设置移动过滤器函数

Parameters:
Name Type Description
func function

过滤器函数

Returns:
void

setPannable(v) → {void}

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

Parameters:
Name Type Description
v boolean

是否可平移

Returns:
void

setPointEditableFunc(func) → {void}

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

Parameters:
Name Type Description
func function

过滤器函数

Returns:
void

setRectEditableFunc(func) → {void}

设置大小编辑过滤器函数

Parameters:
Name Type Description
func function

过滤器函数

Returns:
void

setRectSelectable(v) → {void}

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

Parameters:
Name Type Description
v boolean
Returns:
void

setRectSelectBackground(color) → {void}

设置框选选择框的背景色

Parameters:
Name Type Description
color string

颜色值

Returns:
void

setRectSelectBorderColor(color) → {void}

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

Parameters:
Name Type Description
color string

颜色值

Returns:
void

setResettable(v) → {void}

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

Parameters:
Name Type Description
v boolean
Returns:
void

setRotationEditableFunc(func) → {void}

设置旋转编辑过滤器函数

Parameters:
Name Type Description
func function

过滤器函数

Returns:
void

setScrollBarColor(color) → {void}

设置滚动条颜色

Parameters:
Name Type Description
color string

颜色值

Returns:
void

setScrollBarSize(size) → {void}

设置滚动条宽度

Parameters:
Name Type Description
size number

宽度值

Returns:
void

setScrollBarVisible(visible) → {void}

设置滚动条是否可见

Parameters:
Name Type Description
visible boolean
Returns:
void

setSelectableFunc(func) → {void}

设置选择过滤器函数

Parameters:
Name Type Description
func function

过滤器函数

Returns:
void

setSelectionModelShared(v) → {void}

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

Parameters:
Name Type Description
v boolean
Returns:
void

setToolTipEnabled(enable) → {void}

设置提示是否可用

Parameters:
Name Type Description
enable boolean
Returns:
void

setTranslate(x, y, anim) → {void}

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

Parameters:
Name Type Attributes Description
x number

水平平移值

y number

垂直平移值

anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

Returns:
void

setTranslateX(x) → {void}

设置拓扑水平平移值

Parameters:
Name Type Description
x number

水平平移值

Returns:
void

setTranslateY(y) → {void}

设置拓扑垂直平移值

Parameters:
Name Type Description
y number

垂直平移值

Returns:
void

setVisibleFunc(func) → {void}

设置可见过滤器

Parameters:
Name Type Description
func function

过滤器函数

Returns:
void

setWidth(width) → {void}

设置布局宽度

Parameters:
Name Type Description
width number

宽度值

Returns:
void

setZoom(value, anim, point) → {void}

设置拓扑缩放值

Parameters:
Name Type Attributes Description
value number

缩放值

anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

point Point <optional>

缩放中心点的坐标

Returns:
void

setZoomable(zoomable) → {void}

设置拓扑是否可以通过鼠标滚轮或者两指缩放

Parameters:
Name Type Description
zoomable boolean

是否可缩放

Returns:
void

showDebugTip() → {void}

开启调试面板

Returns:
void

showScrollBar() → {void}

显示滚动条

Returns:
void

sm() → {ht.SelectionModel}

获取选中模型,getSelectionModel的缩写

toCanvas(background, zoom, canvas) → {HTMLCanvasElement}

将拓扑导出为canvas

Parameters:
Name Type Attributes Description
background string <optional>

背景色

zoom number <optional>

缩放值

canvas HTMLCanvasElement <optional>

指定canvas,不指定则创建新的canvas

Returns:
HTMLCanvasElement

toDataURL(background, type, zoom, canvas) → {string}

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

Parameters:
Name Type Attributes Description
background string <optional>

背景色

type string <optional>

图片格式,默认 image/png

zoom number <optional>

缩放值,默认为 gv 的缩放值

canvas HTMLCanvasElement <optional>

指定canvas,不指定则创建新的canvas

Returns:
string

toJSON() → {Object}

将序列化数据转化成JSON格式对象

Returns:
Object

translate(x, y, anim) → {void}

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

Parameters:
Name Type Attributes Description
x number

新增的水平平移值

y number

新增的垂直平移值

anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

Returns:
void

tx(value) → {number}

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

Parameters:
Name Type Attributes Description
value number <optional>

平移值

Returns:
number

ty(value) → {number}

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

Parameters:
Name Type Attributes Description
value number <optional>

平移值

Returns:
number

umi(listener, scope) → {void}

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void

ump(listener, scope) → {void}

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

Parameters:
Name Type Attributes Description
listener function

监听器函数

scope Object <optional>

监听器函数域

Returns:
void

updateBackground() → {void}

更新背景

Returns:
void

updateDOMAppendMatrix() → {void}

更新 DOM 追加矩阵,如果是对 gv 所在 div 一路上去的所有路径上的 div 设置过 css transform 需要设置

Returns:
void

updateLayers() → {void}

更新图层

Returns:
void

upSubGraph() → {void}

退出当前一级 subGraph 到上一级

Returns:
void

validate() → {void}

立刻刷新拓扑

Returns:
void

zoomIn(anim, point) → {void}

放大拓扑

Parameters:
Name Type Attributes Description
anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

point Point <optional>

缩放中心点的坐标

Returns:
void

zoomOut(anim, point) → {void}

缩小拓扑

Parameters:
Name Type Attributes Description
anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

point Point <optional>

缩放中心点的坐标

Returns:
void

zoomReset(anim, point) → {void}

将拓扑缩放值改为1

Parameters:
Name Type Attributes Description
anim boolean | AnimOption <optional>

默认false,是否使用动画,可以设置为true或者false或者animation动画对象

point Point <optional>

缩放中心点的坐标

Returns:
void