根据选中不同的图元来显示不同的属性面板changePropertyPane.html

在现实生活中，我们有很多时候需要根据选中不同的东西来获取不同的属性，并且就算是同类型的东西我们有时也希望显示不同的属性，就像每个人都有不同的个性，可能会有相同点，但是不可能完全相同。

根据这个思想，我写了一个小例子一共还不到一百行，用的是HT For Web，通过选中不同的图元来展现不同的属性。

先来看看效果图：

ht的包里面封装了很多很有用的函数和组件以及对象，非常方便，如：创建一个节点，只需要new ht.Node()，再将这个节点添加到数据容器中去即可。在这边我自定义了一个属性“serveType”，用来判断是哪一个节点。中间的连线也是ht自带的，只需要new ht.Edge(source, target)，再将这个连线添加到数据容器中。你们会注意到我一直有提到数据容器，数据容器在ht中是最基础也是最重要的一个知识点，这里我不多说，大家可以参考HT for Web 数据模型手册。

在这个例子中我将左右两边分开来，用的是ht.widget.SplitView()组件来分开的，具体可参考HT for Web 分割组件手册，一般也是声明一下，再添加到底层div中去。ht所有的操作都是基于d底层div的，然后在底层div上的canvas上绘图。

要说属性面板，ht中的property（HT for Web 属性组件手册）是真的很方便，声明之后直接调用封装好的方法即可获得我们默认的样式和位置， 上图中右边部分即属性面板。

属性面板中有一个方法setProperties，当设置这个函数的参数为空时，当前属性就会被全部清空，这样在我切换不同的图元时，属性列表不会把不属于这个图元的属性也添加上去。我是如何将同一类型的图元分到一起的呢？通过判断当前选中的图元是ht.Node还是ht.Edge类型，我用了instanceof来判断。

if(data instanceof ht.Node){
  //...
}
else if(data instanceof ht.Edge){
  //...
}

因为各个图元的属性在这个例子中是没有共同性的，所以必须自己一个一个写，属性的添加方式如下：

property = new ht.Property();
property.setName('name');
property.setDisplayName('Name');
propertyModel.add(property);//属性模型，属性是添加到属性模型上再添加到属性面板上的