今天为组件添加了Halo类型操作菜单,取代了原来的Tool修饰方式。
鼠标点击组件,生成一个菜单和关于组件的摘要信息
菜单收缩形式
点击➕号,展开菜单
菜单展开形式
此时可以选择菜单项进行操作,缺省的有七个操作,未来将根据业务需求对这些操作进行修改。
点击屏幕其它区域,菜单自动隐藏。
相关代码
'cell:pointerclick': function(cellView) {
var isElement = cellView.model.isElement();
var message = (isElement ? 'Element' : 'Link') + ' clicked';
console.log(message);
if (isElement){
var halo = new joint.ui.Halo({ cellView: cellView, type: 'pie' });
halo.render();
}
},
网友评论