API篇

API篇

本篇主要根据策略协同中使用的拓扑组件，总结组建的相关用法

数据容器 DataModel

数据容器ht.DataModel(以下简称DataModel)作为承载Data数据的模型，管理着Data数据的增删以及变化事件派发，HT框架所有组件都是通过绑定DataModel，以不同的形式呈现到用户界面；同时组件也会监听DataModel模型的变化事件，实时同步更新界面数据信息，掌握了DataModel的操作就掌握了所有组件的模型驱动方式。

getDataByTag(tag)
返回指定tag标示的Data对象
getDatas()
返回所有添加到容器的Data数据ht.List数组
add(data, index)
添加Data对象，index一般无需指定，其只在data的parent为空时才起作用，指定插入roots数组的索引位置
remove(data)
删除Data对象，该操作有以下副作用:
- 其子孙被递归从DataModel中删除
- 被断开父子关系data.setParent(null)
- Edge类型通过edge.setSource(null)和edge.setTarget(null)断开节点关系
- Node类型会将其关联的连线从DataModel中删除
- Node类型通过data.setHost(null)断开与宿主吸附节点关系

clear()
删除容器中所有Data对象，该操作一次性清空，没有逐个remove的过程，不会影响Data父子关系
toDatas(matchFunc, scope)
以matchFunc为过滤函数，返回筛选后的新ht.List对象数组，第一参数为空相当于复制全部对象数组
toJSON()
将数据模型序列化成JSON格式对象
beginTransaction()/endTransaction()
类似数据库里开启事务，从beginInteraction()到endInteraction()之间所有的修改可被一次性撤销或重做
sm()
获取该容器的选择模型

选择模型 SelectionModel

ht.SelectionModel管理DataModel模型中Data对象的选择状态，每个DataModel对象都内置一个SelectionModel选择模型，控制这个SelectionModel即可控制所有绑定该DataModel的组件的对象选择状态，这意味着共享同一DataModel的组件默认就具有选中联动功能。

ld()
返回最后被选中的对象，如果没有选中对象则返回空
toSelection(matchFunc, scope)
返回过滤后的选中对象，matchFunc为空时代表复制全部到新数组

拓扑图形组件 GraphView

拓扑图形组件ht.graph.GraphView(以下简称GraphView)是HT框架中2D功能最丰富的组件，其相关类库都在ht.graph包下。GraphView具有基本图形的呈现和编辑功能，拓扑节点连线及自动布局功能。

拓扑图形组件

getView()
获取拓扑组件的根层div，之后通过.style可以设置组件样式
getWidth()和getHeight()
获取拓扑组件的布局宽度和高度
fitContent(anim, padding, notZoomIn)
缩放平移整个拓扑以展示所有的图元
参数： | 名称 | 类型 | 描述 | | —- | —- | —- | | anim | Boolean/Object | 默认false，是否使用动画，可以设置为true或者false或者animation动画对象 | | padding | Number | 缩放后图元区域与拓扑边缘的距离，默认为20 | | notZoomIn | Boolean | 是否将最小缩放值限定为1 |

getTranslateX(x)和setTranslateX(x)
获取和设置当前水平平移值，简写为tx()和tx(10)，Y值同理
deserialize(jsonUrl, callback)
根据 json 路径请求并反序列图纸
validateImpl()
???验证生效日期
getDataUI(node)
获取图元的UI类
getCurrentSubGraph()
获取当前子网
dm(dataModel)
获取或设置数据模型，没有参数时相当于getDataModel，有参数时相当于setDataModel
enableToolTip()/disableToolTip()
启用或禁用ToolTip
setResettable(flag)
设置拓扑上是否允许通过空格将拓扑的缩放和平移值复位
setRectSelectable(flag)
设置拓扑上是否允许框选操作
setEditable(flag)
设置拓扑中的图元是否可编辑
setMovableFunc(func)
设置移动过滤器函数
onBackgroundClicked(event)
单击拓扑背景时回调，可重载做后续处理
onDataClicked(data, e)
图元被点击时回调，可重载做后续处理
getDataAt(pointOrEvent, filter, range)
传入逻辑坐标点或者交互event事件参数，返回当前点下的图元，filter可进行过滤
参数： | 名称 | 类型 | 描述 | | :—-: | :—-: | :—- | | pointOrEvent | Object/Event | 逻辑坐标点或交互事件对象(如鼠标事件对象) | | filter | Functoin | 过滤器函数，传入data,自定义逻辑返回true或false判断此data是否可被getDataAt返回 | | range | Number | 扩大点范围 |

handleDelete()
处理删除节点，可重载为空函数，阻止按Delete删除节点
sm()
获取该容器的选择模型
setInteractors(interactors)
设置交互器,参数为交互器对象集合
lp(event)
传入HTML事件对象，将事件坐标转换为拓扑中的逻辑坐标，getLogicalPoint的缩写

缩放

getZoom()和setZoom(value, anim, point)
获取和设置缩放值、最终设置的值会调用adjustZoom进行控制，point参数代表进行缩放的中心基准，一般会传入
zoomIn(anim, point)和zoomOut(anim, point)
放大和缩小拓扑

交互

GraphView.setInteractors(list)组合这些交互器，用户也可以基于Interactor扩展自己的交互器(createEdgeInteractor)。

this.g2d.setInteractors(
    [new magic.graph.DefaultInteractor(this.g2d),
     new magic.graph.TouchInteractor(this.g2d, { selectable: false }),
    new createEdgeInteractor(this.g2d, undefined, this.globalEvent)])

交互器类型：

DefaultInteractor
实现Group、Edge和SubGraph图元的默认双击响应，手抓图平移，滚轮缩放，键盘响应等功能
TouchInteractor
实现移动设备上的Touch交互功能

自动布局 AutoLayout

HT for Web提供了自动布局的功能，即根据节点和连线关系，提供多种类型算法进行自动排布节点位置。
自动布局常用于图元较多，或连接关系教复杂时，不易于人工拖拽摆放的场景。

autoLayout = new ht.layout.AutoLayout(graphView);
autoLayout.layout('circular', function(){
    graphView.fitContent(true);
});

是否加入自动布局等详细信息请参考自动布局

边框面板 BorderPane

边框面板可在上、下、左、右、中的五个区域位置摆放子组件，子组件可为HT框架提供的组件，也可为HTML原生组件，子组件以position为absolute方式进行绝对定位。

边框面板

isDisabled()和setDisabled(true/false, iconURL)获取和设置整个组件处于不可用状态
topHeight顶部组件高度，可通过getTopHeight()/setTopHeight(topHeight)取值和设值
topView顶部组件，可通过getTopView()/setTopView(view, topHeight)取值和设值
bottomHeight底部组件高度，可通过getBottomHeight()/setBottomHeight(bottomHeight)取值和设值
bottomView底部组件，可通过getBottomView()/setBottomView(view, bottomHeight)取值和设值
leftWidth左侧组件宽度，可通过getLeftWidth()/setLeftWidth(leftWidth)取值和设值
leftView左侧组件，可通过getLeftView()/setLeftView(view, leftWidth)取值和设值
rightWidth右侧组件宽度，可通过getRightWidth()/setRightWidth(rightWidth)取值和设值
rightView右侧组件，可通过getRightView()/setRightView(view, rightWidth)取值和设值
centerView中间组件，可通过getCenterView()/setCenterView(value)取值和设值

鹰眼

鹰眼提供了全局鸟瞰图的功能，并支持在鹰眼上直接定位、缩放等导航功能。

鹰眼
主要配置属性如下：

ht.graph.Overview构造函数传入其所绑定的ht.graph.GraphView组件对象
通过getMaskBackground和setMaskBackground获取和设置可见区域遮罩背景颜色
通过getContentBorderColor和setContentBorderColor获取和设置内容边框颜色
通过getContentBackground和setContentBackground获取和设置内容背景颜色
通过isAutoUpdate和setAutoUpdate获取和设置是否自动同步绑定的GraphView组件变化
getView()
获取鹰眼组件根层DIV,之后可以通过.className和style设置组件名称和样式

右键菜单

ht.widget.ContextMenu可以使任意HTML元素响应右键菜单，支持任意层次子菜单，图片ICON，Check多选，Radio单选，禁用菜单项以及自定义菜单样式。

enableGlobalKey()
启用全局快捷键，一旦启用此选项，菜单不再使用时需要显式调用dispose()销毁菜单
addTo(dom)
参数为HTML元素，使其支持右键菜单
setItems(json)
设置菜单项，参数为JSON对象
hide()
隐藏菜单
show(x, y)
显示菜单,x,y为菜单显示页面在中的坐标

右键菜单的内容由一个固定格式的JSON对象描述，包括菜单项的文字，图片以及相应的动作
json详细配置：右键菜单

var contextmenu = new ht.widget.ContextMenu(json);
contextmenu.addTo(document.getElementById("div"));

工具条组件 Toolbar

HT for Web提供了工具条组件类ht.widget.Toolbar，工具条上的元素可为原生的html元素，也支持ht提供的如ht-form.js的表单插件中的组件，并内置提供了按钮、单选按钮、复选框等组件。

工具条组件

_itemGap属性
元素之间的间距，可以通过getItemGap和setItemGap获取和设置
_separatorColor属性
分隔条颜色，可以通过getSeparatorColor和setSeparatorColor获取和设置
getItems()和setItems(items)
获取和设置工具条元素数组

组件面板 Palette

允许用户快速访问按钮或命令。ht.widget.Palette支持自定义样式及单选、拖拽操作。

组件面板

getDataModel()
返回数据模型
itemImageHeight
通过setItemImageHeight(newHeight)和getItemImageHeight()操作，控制所有按钮元素的高度，默认为50

矩阵 Matrix

???文档中没有

前端分享

拓扑文档

API篇

数据容器 DataModel

选择模型 SelectionModel

拓扑图形组件 GraphView

缩放

交互

自动布局 AutoLayout

边框面板 BorderPane

鹰眼

右键菜单

工具条组件 Toolbar

组件面板 Palette

矩阵 Matrix