HT for Web 编辑交互手册

索引

插件已不再维护，使用graphView.setEditable(true)开启默认编辑功能

概述

HT产品包自带ht.graph.EditInterctor，可以完成简单的编辑功能，但是也有一些限制，比如无法完成旋转后再编辑等功能。 此插件是对ht.graph.EditInterctor的补充，适用于复杂编辑的场景，主要优点如下：

要使用此插件，您的页面里需要引入相关的js文件：

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

然后创建此交互的实例，并设置到拓扑组件上：

var editInteractor = new ht.graph.XEditInteractor(graph);
graph.setInteractors(new ht.List([
    new ht.graph.ScrollBarInteractor(graph),
    new ht.graph.SelectInteractor(graph),
    editInteractor,
    new ht.graph.MoveInteractor(graph),
    new ht.graph.DefaultInteractor(graph),
    new ht.graph.TouchInteractor(graph , {editable: false})//禁用Touch上默认的编辑功能
]));

也可以使用下面简单的方式：

graph.setEditable(true);

HT内部自动判断，如果引入了此插件，使用此插件作为编辑交互器，否则使用自带的编辑交互

此交互提供了六种辅助编辑按钮，在辅助编辑按钮上按下鼠标并拖拽到另一个图元上(除删除之外)，即可改变host、parent关系或创建连线或改变连线端点；拖拽到空白区域可以打断关系

可以重载 getHelperCursor(helper) 方法，自定义按钮的鼠标手势，helper 参数对应的是前面提到的按钮名称

关于交互的详细信息可参考beginners guide文档中的交互章节

实例

您可以操作下面的实例验证此插件：

此插件提供了一些API操作Shape，列举如下：

自定义外观样式

此插件在拓扑组件(ht.graph.GraphView)上注入了一些API用于控制编辑外观，列举如下：

上面一些概念的图示如下：

概念图示

自定义行为

此插件在拓扑组件(ht.graph.GraphView)上注入了一些API用于控制编辑行为，列举如下：

除了上面三个属性，此插件也支持HT内部的编辑、旋转过滤器，可以精细控制节点是否可编辑旋转等，过滤器的内容可参考beginners guide文档中的过滤章节

网格吸附

下面的例子展示如何使用此插件实现网格吸附功能：

此插件可以实现编辑时的吸附功能，绘制网格背景和移动吸附需要额外编码实现。 在这个例子中，网格背景采用painter机制实现，移动吸附通过自定义的SnapMoveInteractor实现。

辅助3D编辑

3D编辑是一个非常复杂的命题，除了Graph3dView提供的九段式编辑，此插件也提供了elevation、pointElevatoin、tall三个辅助按钮编辑3D模型的海拔(Y轴坐标)、点海拔(Shape或Edge点的Y轴坐标)和模型高度(Y轴尺寸)，请参考下面的例子：

欢迎交流 service@hightopo.com