draw.io 网页版二次开发(2):开始修改代码

2024-05-12 18:52

本文主要是介绍draw.io 网页版二次开发(2):开始修改代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

一 说明

二 打开开发环境 

1. 代码调整

2. 修改访问链接

 3. 注意

三  部分功能的代码汇总

1.  保存功能

2. 菜单栏折叠按钮功能

3.  顶部菜单栏

4.在顶部菜单栏中的【文件】菜单中新增选项

(1) 方法一:单独增加

(2) 方法二 :使用addMenuItems增加(我这次添加了一个保存到数据库的功能)

5. 底部菜单栏

6. 隐藏底部菜单栏的按钮

7. 左侧节点栏

8. 左侧菜单栏底部的【更多图形】的点击后弹窗

9. 元素右击添加点击事件

10.  查找、替换弹窗

11.  共享按钮隐藏

(1)隐藏页面右上角的共享按钮

(2)隐藏菜单栏【文件】下拉框中的共享按钮

12. 快捷键以及其功能配置

四 最后


一 说明

        应公司项目要求,需要对draw.io进行二次开发,并将html界面通过iframe 嵌入到本公司产品中使用,但是由于功能限制,做到最后还是放弃了使用draw.io。但是之前的研究内容可不能浪费。便准备写个专栏进行记录,希望能够帮到需要将draw.io进行二次开发的朋友,其中有涉及到不正确的地方还请大家多包涵!

二 打开开发环境 

        应该有小伙伴发现,修改代码后,刷新界面,为什么界面没有任何变化。那是因为还需要对某些地方进行调整。具体调整如下:

1. 代码调整

        如下图:在webapp根目录下找到index.html 文件,将黄色方框里面的代码(原始代码)修改为绿色方框的代码(即修改后的代码),这是为了注释掉远程地址 ,否则测试环境下不会请求本地修改后的 js 代码。

2. 修改访问链接

        正常访问是直接访问 http://localhost:3000/,但是开发模式的话,需要在访问url后面加上 ?.dev=1 。即 http://localhost:3000/?dev=1 。 这样,代码中修改的部分就可以看到效果了。

 3. 注意

        文件中有很多后缀为 .min.js 的文件,这个是自动生成的,千万不能改哦。

三  部分功能的代码汇总

1.  保存功能

        代码位置:src/main/webapp/js/diagramly/Dialogs.js        

2. 菜单栏折叠按钮功能

代码位置:src/main/webapp/js/diagramly/App.js

3.  顶部菜单栏

(1) 代码位置:src/main/webapp/js/diagramly/Menus.js

4.在顶部菜单栏中的【文件】菜单中新增选项

        新增选项有两种方式,如下:

        前提,需要添加多语言文件,比如中英对照文件:src/main/webapp/resources/dia_zh.txt

(1) 方法一:单独增加

        文件地址:src/main/webapp/js/diagramly/Menus.js

        ① 添加对应的字段(自己找准添加的位置写代码即可)

        ② 添加对应的点击功能

        ③  刷新界面,运行就可见到新的功能按钮。

(2) 方法二 :使用addMenuItems增加(我这次添加了一个保存到数据库的功能)

        ① 添加菜单按钮,代码位置:src/main/webapp/js/diagramly/Menus.js

        ②  添加点击事件:src/main/webapp/js/grapheditor/Actions.js

        ③  添加快捷键:src/main/webapp/js/grapheditor/EditorUi.js

        ④  保存并刷新界面,运行效果如下:

5. 底部菜单栏

(1) 代码位置:src/main/webapp/js/diagramly/Pages.js

(2) 在菜单栏中添加功能(同样也要先添加多语言对照文件)

(3)保存代码后,刷新界面,点击菜单栏,展示如下效果: 

6. 隐藏底部菜单栏的按钮

代码位置:src/main/webapp/js/diagramly/Pages.js 

7. 左侧节点栏

        

 代码位置:src/main/webapp/js/diagramly/sidebar/Sidebar.js

8. 左侧菜单栏底部的【更多图形】的点击后弹窗

代码位置: src/main/webapp/js/diagramly/Dialogs.js

9. 元素右击添加点击事件

 (1) 添加事件的中英文对应名字:src/main/webapp/resources/dia_zh.txt

(2)  将名字添加到菜单上

        注意:代码中的  -  表示添加一行分割线。

        添加方式有两个(需要看具体放的位置在哪里,看代码具体分析。):

        ① 添加在:src/main/webapp/js/diagramly/EditorUi.js

        ② 添加在:src/main/webapp/js/grapheditor/Menus.js

 (3) 添加点击事件:src/main/webapp/js/grapheditor/Actions.js

        在函数Actions.prototype.init中添加:

(4) 保存后运行效果如下:

10.  查找、替换弹窗

        

 触发事件:src/main/webapp/js/diagramly/Menus.js 中的 init 函数中的 findreplace 事件

弹出的弹窗代码位置: src/main/webapp/js/diagramly/Dialogs.js

11.  共享按钮隐藏

(1)隐藏页面右上角的共享按钮

代码位置: src/main/webapp/js/diagramly/App.js 具体位置如下(注释掉框起来的代码即可)

(2)隐藏菜单栏【文件】下拉框中的共享按钮

代码地址:src/main/webapp/js/diagramly/Menus.js  。具体位置如下(注释掉即可):

12. 快捷键以及其功能配置

代码位置:src/main/webapp/js/grapheditor/EditorUi.js

功能配置: src\main\webapp\js\grapheditor\Actions.js

四 最后

        代码的修改就到这里了。以后要是有其他的记录,我会继续补充。下一章开始写draw.io的打包和部署。

这篇关于draw.io 网页版二次开发(2):开始修改代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/983459

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

代码随想录冲冲冲 Day39 动态规划Part7

198. 打家劫舍 dp数组的意义是在第i位的时候偷的最大钱数是多少 如果nums的size为0 总价值当然就是0 如果nums的size为1 总价值是nums[0] 遍历顺序就是从小到大遍历 之后是递推公式 对于dp[i]的最大价值来说有两种可能 1.偷第i个 那么最大价值就是dp[i-2]+nums[i] 2.不偷第i个 那么价值就是dp[i-1] 之后取这两个的最大值就是d

pip-tools:打造可重复、可控的 Python 开发环境,解决依赖关系,让代码更稳定

在 Python 开发中,管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等,都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools? pip-tools 是一组命令行工具,旨在简化 Python 依赖关系的管理,确保项目环境的稳定性和可重复性。它主要包含两个核心工具:pip-compile 和 pip

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

D4代码AC集

贪心问题解决的步骤: (局部贪心能导致全局贪心)    1.确定贪心策略    2.验证贪心策略是否正确 排队接水 #include<bits/stdc++.h>using namespace std;int main(){int w,n,a[32000];cin>>w>>n;for(int i=1;i<=n;i++){cin>>a[i];}sort(a+1,a+n+1);int i=1

两个月冲刺软考——访问位与修改位的题型(淘汰哪一页);内聚的类型;关于码制的知识点;地址映射的相关内容

1.访问位与修改位的题型(淘汰哪一页) 访问位:为1时表示在内存期间被访问过,为0时表示未被访问;修改位:为1时表示该页面自从被装入内存后被修改过,为0时表示未修改过。 置换页面时,最先置换访问位和修改位为00的,其次是01(没被访问但被修改过)的,之后是10(被访问了但没被修改过),最后是11。 2.内聚的类型 功能内聚:完成一个单一功能,各个部分协同工作,缺一不可。 顺序内聚:

如何在运行时修改serialVersionUID

优质博文:IT-BLOG-CN 问题 我正在使用第三方库连接到外部系统,一切运行正常,但突然出现序列化错误 java.io.InvalidClassException: com.essbase.api.base.EssException; local class incompatible: stream classdesc serialVersionUID = 90314637791991