HT 组件面板手册

索引

概述

ht.widget.Palette又叫组件面板或调色板，类似于Toolbar，允许用户快速访问按钮或命令。ht.widget.Palette支持自定义样式 及单选、拖拽操作。 在正式使用API之前，您的页面里应该引入相关的js文件：

<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-cssanimation.js"></script> <!--依赖cssanimation插件-->
<script src="ht-palette.js"></script>

Palette和GraphView类似，由ht.DataModel驱动，用ht.Group展示分组，ht.Node展示按钮元素。

DataModel是整个HT框架唯一的数据模型，SelectionModel是HT框架唯一的选择模型,关于它们的用法可以参考HT入门手册， 这里不再赘述。我们看下Palette支持的ht.Group和ht.Node的API：

支持的ht.Group的API：

支持的ht.Node的API：

ht.widget.Palette本身提供一些API控制外观，列举如下：

简单示例

接下来看一个简单的例子：

mapGroup.setName("Map");
for (var i = 1; i < 3; i++) {
    var node = new ht.Node();
    node.setImage("res/map" + i + ".png");
    node.setName("map" + i);
    dataModel.add(node);
    node.setParent(mapGroup);
}
dataModel.add(mapGroup);

自定义组件样式

除了概述章节里提到配置参数，面板还支持使用全局的htconfig对象配置整体风格，可配置的参数如下：

   <script>
        htconfig = {
            Default: {
                paletteTitleLabelColor: 'black',
                paletteContentBackground: 'rgb(240, 239, 238)',
                paletteTitleBackground: 'rgb(240, 239, 238)',
                paletteItemHoverBorderColor: 'rgb(199,199,199)',
                paletteItemSelectBackground: 'rgb(221, 221, 221)',
                paletteSeparatorColor: 'rgb(197, 193, 189)',
                paletteTitleHoverBackground: 'rgb(215, 214, 213)'
            }
        }
    </script>

配合GraphView做一个简单的编辑器

选中Palette上第一个Node，然后在右侧拓扑上单击可以创建与其image相同的Node; Palette上第二个Node支持拖拽创建，我们可以将它拖拽到拓扑上，然后生成相同image的Node。

/* 监听palette选择改变事件，将新选中的Node的image存入createNodeInteractor中，用于创建Node */
palette.sm().ms(function(e) {
    var selectedNode = palette.sm().ld();
    if (selectedNode) {
        createNodeInteractor._image = selectedNode.getImage();
    }
});

/* 如果Node的draggable设为true，Palette可以自动处理dragstart，但是dragover和drop事件需要我们处理 */
graphView.getView().addEventListener("dragover", function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = "copy";
});
graphView.getView().addEventListener("drop", function(e) {
    e.preventDefault();
    e.stopPropagation();
    /* Palette在dragstart中将事件对象的Text属性赋值为nodeid:id，其中id指拖拽的Node的id，这里需要取出来再做处理 */
    var id = e.dataTransfer.getData("Text").replace(/nodeid:/g, "");
    if (id) {
        var paletteNode = palette.dm().getDataById(id),
            node = new ht.Node(),
            lp = graphView.lp(e);

        graphView.dm().add(node);
        node.setPosition(lp.x, lp.y);
        node.setImage(paletteNode.getImage());
    }
});

上面的例子中使用了HTML5原生的Drag和Drop事件，很遗憾，iOS和Android设备上并不支持此类事件，所以Palette插件还提供了模拟的拖拽事件，可以完美兼容PC和手持终端，参考下面的例子：

/*
* 重写handleDragAndDrop方法，当state为end时，判断e是否在graphView的范围内，如果是，则创建Node
 */
palette.handleDragAndDrop = function(e, state) {
    if (state === 'end') {
        var bound = graphView.getView().getBoundingClientRect(),
            point = ht.Default.getClientPoint(e);

        if (ht.Default.containsPoint({
            x: bound.left,
            y: bound.top,
            width: bound.width,
            height: bound.height
        }, point)) {
            var paletteNode = this.sm().ld(),
                node = new ht.Node(),
                lp = graphView.lp(e);
            graphView.dm().add(node);
            node.setPosition(lp.x, lp.y);
            node.setImage(paletteNode.getImage());
        }
    }
};
欢迎交流 service@hightopo.com