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>

PaletteGraphView类似,由ht.DataModel驱动,用ht.Group展示分组,ht.Node展示按钮元素。

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

支持的ht.GroupAPI

支持的ht.NodeAPI

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支持拖拽创建,我们可以将它拖拽到拓扑上,然后生成相同imageNode

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

/* 如果Node的draggble设为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原生的DragDrop事件,很遗憾,iOSAndroid设备上并不支持此类事件,所以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