mxgraph源碼中的toolbar.js中實作圖示按鈕功能的分析

添加新的功能(比如下面的全選和取消全選)，預設會有一個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);      

列印的結果會讓你大吃一驚：

可以很清晰的發現example中toolbar的完整功能有哪些，如果你需要啥功能你可以自己接着添加到toolbar.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();
      }
    }
  });      

總之，沒有你全局搜尋解決不了的，反正多看文檔就對了，我也隻是在一直學習中，一起加油！

歡迎留言評論！哪裡有問題我們一起解決，謝謝