索引
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
:
name
通过setName(newName)
和getName()
操作,设置或获取分组名称,支持html
标签expanded
通过setExpanded(newExpanded)
和isExpanded()
操作,设置或获取此组的合并展开状态promptText
样式,表示当分组中没有按钮时要显示的提示文字,支持html
标签,通过setStyle("promptText", value)
和getStyle("promptText")
操作支持的ht.Node
的API
:
name
通过setName(newName)
和getName()
操作,设置或获取按钮名称,支持html
标签image
通过setImage(newImage)
和getImage()
操作,设置或获取按钮图片,支持url
或base64
或通过ht.Default.setImage
注册的图片名toolTip
表示按钮的工具提示内容,通过setToolTip('toolTip')
和getToolTip()
操作parent
通过setParent(newGroup)
和getParent()
操作,设置当前节点所属的组image.stretch
通过setStyle('image.stretch', value)
和getStyle('image.stretch')
操作,此样式支持的枚举如下:fill
图片填充满整个按钮区域,如果图片宽高比例和矩形不一致会导致图片拉伸失真uniform
图片始终保持原始宽高比例不变化,并尽量填充满按钮区域centerUniform
当按钮区域大于图片尺寸时图片以原始大小绘制在中心位置,空间不够时采用uniform
的绘制方式ht.widget.Palette
本身提供一些API
控制外观,列举如下:
itemImageWidth
通过setItemImageWidth(newWidth)
和getItemImageWidth()
操作,控制所有按钮元素的宽度,默认为70
itemImageHeight
通过setItemImageHeight(newHeight)
和getItemImageHeight()
操作,控制所有按钮元素的高度,默认为50
itemImagePadding
通过setItemImagePadding(newHeight)
和getItemImageHeight()
操作,控制所有按钮元素图片与边框的距离,默认为4
itemMargin
通过setItemMargin(newMargin)
和getItemMargin()
操作,控制按钮元素之间的间隔,默认为10
layout
通过setLayout(newLayout)
和getLayout()
操作,控制按钮元素的布局方式,默认为largeicons
,支持的枚举列表如下:largeicons
大图标模式,这是默认值smallicons
小图标模式iconsonly
仅图标模式getDataModel()
返回数据模型getView()
返回视图div
redraw()
强制刷新视图handleDragAndDrop(e, state)
重写此方法可以禁用HTML5
原生的Drag
和Drop
事件并启用模拟的拖拽事件接下来看一个简单的例子:
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
对象配置整体风格,可配置的参数如下:
Color.titleIconBackground
指定HT
所有组件的标题ICON
的颜色,如面板,对话框,AccordionView
等Color.titleBackground
指定HT
所有组件的标题栏的背景色,如面板,对话框,AccordionView
等Default.paletteTitleLabelColor
指定调色板标题栏的文字颜色,默认为Default.labelSelectColor
Default.paletteTitleLabelFont
指定调色板标题栏的文字字体,默认为Default.labelFont
Default.paletteTitleHeight
指定调色板标题栏的高度,默认为Default.widgetTitleHeight
Default.paletteTitleBackground
指定调色板标题栏的背景色,默认为Color.titleBackground
Default.paletteTitleHoverBackground
指定鼠标划过调色板标题栏时的背景色,默认为Color.titleBackground
Default.paletteContentLabelFont
指定调色板内容区域的文字字体Default.paletteContentLabelColor
指定调色板内容区域的文字颜色Default.paletteContentBackground
指定调色板内容区域的背景色Default.paletteSeparatorWidth
指定标题栏分割线的宽度,默认为1
Default.paletteSeparatorColor
指定标题栏分割线的颜色,默认为undefined
Default.paletteItemHoverBorderColor
指定鼠标划过按钮元素时的边框颜色,默认为Color.highlight
Default.paletteItemSelectBackground
指定被选中的按钮元素的背景色,默认为Color.highlight
<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>
选中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());
}
}
};