携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

上一章讲解完 Drawio 前端分离且可以独立运行，接下来讲解在开发模式下自定义修改相关配置

优化首屏加载

注释首屏加载提示

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5" /><![endif]-->
<!DOCTYPE html>
<html>
  <body class="geEditor">
    <div id="geInfo">
      <!-- 删除初始化跳转页 -->
      <!-- <div class="geBlock">
      <h1>Flowchart Maker and Online Diagram Software</h1>
      <p>
        diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool,
        to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy&trade; and Lucidchart&trade; files .
      </p>
      <h2 id="geStatus">Loading...</h2>
      <p>
        Please ensure JavaScript is enabled.
      </p>
    </div> -->
    </div>
  </body>
</html>

国际化

设置默认语言
PreConfig.js

/**
 * Copyright (c) 2006-2020, JGraph Ltd
 * Copyright (c) 2006-2020, draw.io AG
 */
// Overrides of global vars need to be pre-loaded
window.EXPORT_URL = 'REPLACE_WITH_YOUR_IMAGE_SERVER';
window.PLANT_URL = 'REPLACE_WITH_YOUR_PLANTUML_SERVER';
window.DRAWIO_BASE_URL = null; // Replace with path to base of deployment, e.g. https://www.example.com/folder
window.DRAWIO_VIEWER_URL = null; // Replace your path to the viewer js, e.g. https://www.example.com/js/viewer.min.js
window.DRAWIO_LIGHTBOX_URL = null; // Replace with your lightbox URL, eg. https://www.example.com
window.DRAW_MATH_URL = 'math/es5';
window.DRAWIO_CONFIG = null; // Replace with your custom draw.io configurations. For more details, https://www.diagrams.net/doc/faq/configure-diagram-editor
urlParams['sync'] = 'manual';
urlParams['lang'] = 'zh'; // 国际化默认中文

减少国际化选项

Init.js

./src>main>webapp/diagramly/init.js

// 修改该项可以调整右上角的语言选项
window.mxLanguageMap = window.mxLanguageMap || {
  i18n: '',
  en: 'English',
  zh: '简体中文',
}

./src>main>webapp/resources 国际化配置文件中文 zh(dia_zh.txt)、英文 en(dia.txt)

创建自定义图形元素

Sidebar.js

./src>main>webapp/js/grapheditor/Sidebar.js

/**
 * Adds the general palette to the sidebar.
 */
 Sidebar.prototype.addGeneralPalette = function(expand)
 {
   var lineTags = 'line lines connector connectors connection connections arrow arrows ';
   this.setCurrentSearchEntryLibrary('general', 'general');
   var sb = this;
 
   var temp = parseInt(this.editorUi.editor.graph.defaultVertexStyle['fontSize']);
   var fontSize = !isNaN(temp) ? 'fontSize=' + Math.min(16, temp) + ';' : '';
 
   // Reusable cells
   var field = new mxCell('List Item', new mxGeometry(0, 0, 80, 30),
     'text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;' +
     'spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];' +
     'portConstraint=eastwest;rotatable=0;' + fontSize);
   field.vertex = true;
   var fns = [
    this.createVertexTemplateEntry('rounded=0;whiteSpace=wrap;html=1;fillColor=#01ff00;align=center;verticalAlign=middle;',
    120, 40, '元素', '自定义元素', null, null, 'element'),
    this.createVertexTemplateEntry('rounded=0;whiteSpace=wrap;html=1;', 120, 60, '', 'Rectangle', null, null, 'rect rectangle box'),
    ...
   ]   
   this.addPaletteFunctions('general', mxResources.get('general'), (expand != null) ? expand : true, fns);
   this.setCurrentSearchEntryLibrary();
 };

隐藏分页样式

EditorUi.js

./src>main>webapp/js/grapheditor/EditorUi.js

EditorUi.prototype.createUi = function () {
  if (this.container != null && this.tabContainer != null) {
    // 隐藏分页
    // this.container.appendChild(this.tabContainer);
  }
}

Drawio 二次开发手册（二）

前言

推荐阅读

优化首屏加载

国际化

创建自定义图形元素