draw.io二次开发（3）从删删减减开始定制自己的drawio

news2024/11/15 8:27:46

经过克隆代码、配置IntelliJ/IDEA和Tomcat、以及本地部署（详见前几篇）之后，终于到了上手改代码的环节了。

首先需要强调的一点是：千万不要去改 *.min.js 文件中的代码，这些文件都是生成的压缩代码，我们一定要再开发模式下进行修改，而不是改 *.min.js文件中的代码。

1. 设置调用本地资源：

在index.html文件大约第252行的位置，将drawDevUrl重定向到本地地址。

// Changes paths for local development environment
...
if (urlParams['dev'] == '1')
{
	// Used to request grapheditor/mxgraph sources in dev mode
	var mxDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main';
	
	// Used to request draw.io sources in dev mode
	var drawDevUrl = document.location.protocol + '//devhost.jgraph.com/drawio/src/main/webapp/';
	var geBasePath = drawDevUrl + '/js/grapheditor';
	var mxBasePath = mxDevUrl + '/mxgraph';
	
	// 增加下面这一段
	if (location.hostname == 'localhost' || location.hostname == '127.0.0.1') {
		drawDevUrl = document.location.protocol + '//localhost:8080/drawio/';
		geBasePath = drawDevUrl + '/js/grapheditor';
		mxBasePath = drawDevUrl + '/mxgraph';
		mxForceIncludes = true;
	}
...
2. 留意MD5校验

在diagramly/App.js文件大约第713行的位置有一处以hardcode方式对代码进行的校验。

if (CryptoJS.MD5(content).toString() != '94ebd7472449efab95e00746ea00db60')

如果你修改了项目代码中的任何部分，在打开页面时就会出现“Bootstrap script change requires update of CSP”的弹窗提示。所以在你修改完所有代码后，在此处可以从console log中看一下CryptoJS.MD5(content).toString()的MD5值是什么，替换到等号右边就可以了。

3. 禁用浏览器存储

在diagramly/Dialogs.js文件大约第220行，注释掉相关部分就不会再有浏览器存储选项了。

/*
if (isLocalStorage && (urlParams['browser'] == '1' || urlParams['offline'] == '1'))
{
	addLogo(IMAGE_PATH + '/osa_database.png', mxResources.get('browser'), App.MODE_BROWSER);
}
*/
4. 修改浏览器title

浏览器title中使用的是应用名，在diagramly/Editor.js文件大约第2239行的位置。可以改成自己应用的名字。

/**
 * Specifies the app name. Default is document.title.
 */
Editor.prototype.appName = 'My App Name';

在离线模式中，title还会有 “ app”的后缀，可以在diagramly/App.js文件大约第2412行的位置注释掉相关代码。

else if (this.isOfflineApp())
{
	// title += ' app';
}
5. 修改欢迎页文字

就是页面载入过程中的文字（如图），可以在index.html文件大约第441行的位置修改成你自己想要的内容。
在这里插入图片描述

6. 精简菜单

由于不需要网络存储、导入导出这些高级功能，所以希望对菜单栏做一些简化。菜单相关的内容都在diagramly/Menus.js中，注释掉以下内容：

// 大约在第4732行
// this.addMenuItems(menu, ['upload'], parent);
// 大约在第4809行
// this.addSubmenu('openRecent', menu, parent);
// 大约在第4850行
// this.addMenuItems(menu, ['rename'], parent);
// 大约在第4857行
// this.addMenuItems(menu, ['upload'], parent);
// 大约在第4941行
// this.addSubmenu('openRecent', menu, parent);
// 大约在第4975行
// this.addMenuItems(menu, ['rename'], parent);
// 大约在第4982行
// this.addMenuItems(menu, ['upload'], parent);
// 大约在第5003-5013行
/*
menu.addSeparator(parent);
this.addSubmenu('importFrom', menu, parent);
this.addSubmenu('exportAs', menu, parent);
menu.addSeparator(parent);
this.addSubmenu('embed', menu, parent);
this.addSubmenu('publish', menu, parent);
menu.addSeparator(parent);
this.addSubmenu('newLibrary', menu, parent);
this.addSubmenu('openLibraryFrom', menu, parent);
*/

下图是精简前和精简后的File菜单对比
在这里插入图片描述
在这里插入图片描述
除此之外，还可以删除About菜单项，在大约1544行的位置。

// this.addMenuItems(menu, ['about'], parent);

其实想对About下手更干脆一点的话，直接删掉Help菜单也可以，在grapheditor/Menus.js文件的大约第33行中。

// Menus.prototype.defaultMenuItems = ['file', 'edit', 'view', 'arrange', 'extras', 'help'];
Menus.prototype.defaultMenuItems = ['file', 'edit', 'view', 'arrange', 'extras'];
7. 删除下载桌面版软件的提示

在diagramly/App.js文件大越第2053行的位置，注释掉相关函数。

/**
 * Shows a footer to download the desktop version once per session.
 */
/*
App.prototype.showDownloadDesktopBanner = function()
{
	this.showBanner('DesktopFooter', mxResources.get('downloadDesktop'), mxUtils.bind(this, function()
	{
		this.openLink('https://get.diagrams.net/');
	}));
};
*/
8. 修改左侧边栏模板

因为我的应用场景中希望对绘图过程进行一些约束，所以得对drawio“过于丰富和灵活”的左侧边栏进行一些精简。
5.1. 删除搜索栏面板
在文件diagramly/sidebar/Sidebar.js大约第922行，注释掉搜索栏的代码。

// this.addSearchPalette(true);

5.2. 删除其他面板
在文件diagramly/sidebar/Sidebar.js大约第1105-1111行。

// this.addMiscPalette(false);
// this.addAdvancedPalette(false);
// this.addBasicPalette();
// this.addStencilPalette('arrows', mxResources.get('arrows'), dir + '/arrows.xml',
// 		';html=1;' + mxConstants.STYLE_VERTICAL_LABEL_POSITION + '=bottom;' + mxConstants.STYLE_VERTICAL_ALIGN + '=top;' + mxConstants.STYLE_STROKEWIDTH + '=2;strokeColor=#000000;',
// 		null, null, null, null, null, 'arrows');
// this.addArrows2Palette();

以及大约第1214行。

// this.addFlowchartPalette();

以及大约第1227行。

// this.addUmlPalette(false);
9. 将dev模式和offline模式设置为缺省模式

这样我们就不必每次都在浏览器中指定dev=1&offline=1了。
在index.html文件大约第53行尾位置增加代码。

var urlParams = (function()
{
	var result = new Object();
	var params = window.location.search.slice(1).split('&');
	
	for (var i = 0; i < params.length; i++)
	{
		var idx = params[i].indexOf('=');
		
		if (idx > 0)
		{
			result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
		}
	}
	// 新增内容由此开始
	if (!result.hasOwnProperty('dev')) {
		result['dev'] = 1
	}
	if (!result.hasOwnProperty('offline')) {
		result['offline'] = 1
	}
	// 新增内容到此结束
	return result;
})();
小结

至此，通过对源码的删删减减，我们可以说算是踏上了drawio二开的征程。祝大家开局顺利！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/510256.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL原理(四)：事务

MySQL原理(四)：事务

前言 上一篇介绍了 MySQL 的索引&#xff0c;这一篇将介绍事务相关的内容。 在 MySQL 的使用场景中&#xff0c;经常会有一个操作包含多个 SQL 语句&#xff0c;比如转账这个操作&#xff0c;至少包含从甲的账户中扣除金额和给乙的账户中增加金额这两个更新语句。那假如 MySQ…
阅读更多...
如何优化VPS服务器性能，提升网站访问速度？

如何优化VPS服务器性能，提升网站访问速度？

随着互联网的发展&#xff0c;越来越多的企业开始使用VPS服务器来托管其网站。然而&#xff0c;一些企业经常会遇到网站速度慢、响应时间长等问题&#xff0c;这不仅会影响用户的体验&#xff0c;还会导致客户流失。因此&#xff0c;优化VPS服务器的性能&#xff0c;提升网站访…
阅读更多...
好程序员：Java培训班包就业靠谱吗?Java培训机构怎么选？

好程序员：Java培训班包就业靠谱吗?Java培训机构怎么选？

好程序员本身就是培训机构&#xff0c;现在已经10年多了。说句实在话&#xff0c;包就业的机构几乎没有&#xff0c;凡是给你说包就业的机构大多都不靠谱。你还得看机构的培训能力和就业率&#xff0c;其实能否找到工作还得看你自己在培训班学的怎么样了对吧&#xff0c;找工作…
阅读更多...
CIAA 网络安全模型 — TLS v1.3 和 HTTPS 协议

CIAA 网络安全模型 — TLS v1.3 和 HTTPS 协议

目录 文章目录 目录SSL/TLSTLS 1.21. client_hello2. server_hello server_certificate sever_hello_done3. Certificate authentication4. client_key_exchange change_cipher_spec encrypted_handshake_message5. change_cipher_spec encrypted_handshake_message TLS 1…
阅读更多...
portraiture3.5.6免费版PS图片磨皮软件

portraiture3.5.6免费版PS图片磨皮软件

Portraiture是专注于图像后期处理软件研发的 Imagenomic, LLC重头产品之一&#xff0c;在摄影爱好者中极负盛名。Portraiture 可以将繁琐复杂的人像磨皮操作极致简化&#xff0c;不论是普通爱好者或专业后期处理人员&#xff0c;均能一键完成&#xff0c;被称为人像磨皮神器。 …
阅读更多...
1. 跨域学习

1. 跨域学习

1. 跨域学习 1.1 什么是跨域 出于浏览器的同源策略限制。同源策略&#xff08;Sameoriginpolicy&#xff09;是一种约定&#xff0c;它是浏览器最核心也最基本的安全功能&#xff0c;如果缺少了同源策略&#xff0c;则浏览器的正常功能可能都会受到影响。可以说Web是构建在同…
阅读更多...
最新全网的ChatGPT让AI回答你的任何问题！国内免费用！！

最新全网的ChatGPT让AI回答你的任何问题！国内免费用！！

ChatGPT&#xff0c;最近全网最火爆的顶流话题&#xff0c;不管数码爱好者、新闻媒体&#xff0c;还是投资客&#xff0c;无一不在关注着这一牛掰的人工智能项目 它是由OpenAI实验室推出的一款AI工具&#xff0c;拥有极其智能的对话能力&#xff0c;可以回答任何你提出的问题&…
阅读更多...
Vuex-状态管理模式

Vuex-状态管理模式

Vuex Vuex 是一个专为 Vue.js 开发的状态管理模式。主要是是做数据交互&#xff0c;父子组件传值可以很容易办到&#xff0c;但是兄弟组件间传值&#xff08;兄弟组件下又有父子组件&#xff09;&#xff0c;页面多并且一层嵌套一层的传值&#xff0c;非常麻烦&#xff0c;这个…
阅读更多...
函数数组的运算

函数数组的运算

函数数组的运算 一&#xff1a;冒泡运算 类似气泡上涌的动作&#xff0c;会将数据在数组中从小到大或者从大到小不断的向前移动。 基本思想&#xff1a; 冒泡排序的基本思想是对比相邻的两个元素值&#xff0c;如果满足条件就交换元素值&#xff0c;把较小的元素移动到数组前…
阅读更多...
D31FBE01EC1NF00PARKER比例方向阀

D31FBE01EC1NF00PARKER比例方向阀

D31FBE01EC1NF00PARKER比例方向阀是宁波秉圣工业&#xff0c;美国派克比例阀主要具有方向功能&#xff0c;流量功能&#xff0c;压力功能&#xff0c;因此主要有三类&#xff1a;方向阀&#xff0c;流量阀&#xff0c;压力阀&#xff0c;其中方向阀和压力阀直接控制和操作你。被…
阅读更多...
一起来！白嫖Amazon DynamoDB！！！

一起来！白嫖Amazon DynamoDB！！！

Amazon DynamoDB简介 Amazon DynamoDB是由Amazon Web Services&#xff08;AWS&#xff09;提供的一种快速、灵活、全托管的NoSQL数据库服务&#xff0c;支持文档和键/值数据模型。它具有自动扩展、低延迟、高可靠性、高吞吐量等特点&#xff0c;能够处理从几个字节到几TB的数…
阅读更多...
tiechui_lesson08_内存的分配和链表

tiechui_lesson08_内存的分配和链表

主要是将链表结构的使用&#xff0c;在内核开发中使用起来比较方便的一种数据结构【LIST_ENTRY】。 一、内存的分配 主要是学习一些基本操作。现在推荐使用的动态分配函数【ExAllocatePoolWithTag】 PVOID tempbuffer ExAllocatePoolWithTag(NonPagedPool, 0x1000, xxaa); …
阅读更多...
DJ4-6 层次选路

DJ4-6 层次选路

目录 一、层次选路的基本概念 二、域内路由选择 1、RIP* 2、OSPF 三、域间路由选择 BGP 1、AS 互连 2、AS 域间选路任务 3、示例&#xff1a;在 1d 上设置转发表 4、示例&#xff1a;在多个 AS 中做出选择 5、BGP 会话与通告 6、传播可达信息 7、路径属性和 BGP 路…
阅读更多...
马蹄集第四期oj

马蹄集第四期oj

目录 供水管线 黑客小码哥 逆序 来给单词分类 前k小数&#xff08;进阶&#xff09; 前K小数 线段树 队列安排 一元多项式的加法 快排变形 供水管线 难度&#xff1a;钻石 0时间限制&#xff1a;1秒 巴占用内存&#xff1a;128M 在个城市之间原本要规划修建许多条下水管道…
阅读更多...
提高开发团队能力 这4点很重要

提高开发团队能力 这4点很重要

组建开发团队&#xff0c;提高开发团队能力的前提是需要选对人&#xff0c;不仅需与专业匹配&#xff0c;与公司文化相匹配&#xff0c;更与管理者相匹配。 而团队能力的提升需要重点关注&#xff1a;流程化&#xff0c;标准化、工具化和持续赋能。尤其通过流程化、标准化和工具…
阅读更多...
TIM输入捕获-STM32

TIM输入捕获-STM32

TIM输入捕获-STM32 IC(Input Capture) 输入捕获 输入捕获模式下&#xff0c;当通道输入引脚出现指定电平跳变时&#xff0c;当前CNT的值将被锁存到CCR中&#xff0c;可用于测量PWM波形的频率、占空比、脉冲间隔、电平持续时间等参数 每个高级定时器和通用定时器都拥有4个输入捕…
阅读更多...
Unity 自建package包流程

Unity 自建package包流程

目录 1.在工程Asset 同级目录下创建文件夹 名字随便起 2.在文件夹中添加package.json 文件 3.在unity中选中PackageManager 4.打开vs 新建一个项目 5.开始编写代码 6.修改dll路径 7.打个dll 1.在工程Asset 同级目录下创建文件夹 名字随便起 eg: 2.在文件夹中添加package…
阅读更多...
《MySQL 必知必会》课程笔记（三）

《MySQL 必知必会》课程笔记（三）

怎么创建和修改数据表&#xff1f; 创建和修改数据表&#xff0c;是数据存储过程中的重要⼀环。我们不仅需要把表创建出来&#xff0c;还需要正确地设置限定条件&#xff0c;这样才能确保数据的一致性和完整性。同时&#xff0c;表中的数据会随着业务需求的变化而变化&#xf…
阅读更多...
docker ngxin

docker ngxin

安装docker环境 官方安装 官方安装 Install Docker Engine on CentOS | Docker Documentation sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repoyum install docker-ce docker-ce-cli container…
阅读更多...
在滴滴和字节跳动划水4年，过于真实了...

在滴滴和字节跳动划水4年，过于真实了...

先简单交代一下吧&#xff0c;沅哥是某不知名211的本硕&#xff0c;18年毕业加入滴滴&#xff0c;之后跳槽到了头条&#xff0c;一直从事测试开发相关的工作。之前没有实习经历&#xff0c;算是四年半的工作经验吧。 这四年半之间他完成了一次晋升&#xff0c;换了一家公司&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023