添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
好帅的红茶  ·  使用json-path解析json - ...·  3 周前    · 
沉着的太阳  ·  word,ppt,excel转pdf,pdf ...·  5 月前    · 
近视的熊猫  ·  MQTT与EMQ X - 知乎·  10 月前    · 


添加新的功能(比如下面的全选和取消全选),默认会有一个icon,我们可以通过设置背景图片的样式来定义自己的icon:

if(sw > 480){
this.addSeparator();//添加竖杠分割符号
var elts = this.addItems(['selectAll','selectNone']);
elts[0].setAttribute('title', mxResources.get('selectAll') + ' (' + this.editorUi.actions.get('selectAll').shortcut + ')');
elts[1].setAttribute('title', mxResources.get('selectNone') + ' (' + this.editorUi.actions.get('selectNone').shortcut + ')');
console.log(elts);
console.log(this.editorUi.actions);
}

那么为什么我添加了这行代码你就可以实现全选和取消全选功能呢?那我们不妨可以在任意功能里面打印一下这个值:

console.log(this.editorUi.actions);

打印的结果会让你大吃一惊:

mxgraph源码中的toolbar.js中实现图标按钮功能的分析_toolbar

mxgraph源码中的toolbar.js中实现图标按钮功能的分析_官网文档_02

可以很清晰的发现example中toolbar的完整功能有哪些,如果你需要啥功能你可以自己接着添加到toolbar.js。

其实主要作用还是人家写好的graph框架以及action.js,我们只不过搬过来用罢了。

仔细点你还会发现,当我鼠标移入按钮的时候会有提示,比如像下面这样,因为不好截图,你们去官网文档自己看,其实是因为action.js里面影响的:

this.addAction('save', function() { ui.saveFile(false); }, null, null, Editor.ctrlKey + '+S').isEnabled = isGraphEnabled;
this.addAction('saveAs...', function() { ui.saveFile(true); }, null, null, Editor.ctrlKey + '+Shift+S').isEnabled = isGraphEnabled;
this.addAction('export...', function() { ui.showDialog(new ExportDialog(ui).container, 300, 296, true, true); });
this.addAction('editDiagram...', function()
{
var dlg = new EditDiagramDialog(ui);
ui.showDialog(dlg.container, 620, 420, true, false);
dlg.init();
});
this.addAction('pageSetup...', function() { ui.showDialog(new PageSetupDialog(ui).container, 320, 220, true, true); }).isEnabled = isGraphEnabled;
this.addAction('print...', function() { ui.showDialog(new PrintDialog(ui).container, 300, 180, true, true); }, null, 'sprite-print', Editor.ctrlKey + '+P');
this.addAction('preview', function() { mxUtils.show(graph, null, 10, 10); });

// Edit actions
this.addAction('undo', function() { ui.undo(); }, null, 'sprite-undo', Editor.ctrlKey + '+Z');
this.addAction('redo', function() { ui.redo(); }, null, 'sprite-redo', (!mxClient.IS_WIN) ? Editor.ctrlKey + '+Shift+Z' : Editor.ctrlKey + '+Y');
this.addAction('cut', function() { mxClipboard.cut(graph); }, null, 'sprite-cut', Editor.ctrlKey + '+X');
this.addAction('copy', function() { mxClipboard.copy(graph); }, null, 'sprite-copy', Editor.ctrlKey + '+C');
this.addAction('paste', function()
{
if (graph.isEnabled() && !graph.isCellLocked(graph.getDefaultParent()))
{
mxClipboard.paste(graph);
}
}, false, 'sprite-paste', Editor.ctrlKey + '+V');
this.addAction('pasteHere', function(evt)
{
if (graph.isEnabled() && !graph.isCellLocked(graph.getDefaultParent()))
{
graph.getModel().beginUpdate();
try
{
var cells = mxClipboard.paste(graph);

if (cells != null)
{
var includeEdges = true;

for (var i = 0; i < cells.length && includeEdges; i++)
{
includeEdges = includeEdges && graph.model.isEdge(cells[i]);
}

var t = graph.view.translate;
var s = graph.view.scale;
var dx = t.x;
var dy = t.y;
var bb = null;

if (cells.length == 1 && includeEdges)
{
var geo = graph.getCellGeometry(cells[0]);

if (geo != null)
{
bb = geo.getTerminalPoint(true);
}
}

bb = (bb != null) ? bb : graph.getBoundingBoxFromGeometry(cells, includeEdges);

if (bb != null)
{
var x = Math.round(graph.snap(graph.popupMenuHandler.triggerX / s - dx));
var y = Math.round(graph.snap(graph.popupMenuHandler.triggerY / s - dy));

graph.cellsMoved(cells, x - bb.x, y - bb.y);
}
}
}
finally
{
graph.getModel().endUpdate();
}
}
});

总之,没有你全局搜索解决不了的,反正多看文档就对了,我也只是在一直学习中,一起加油!

欢迎留言评论!哪里有问题我们一起解决,谢谢