drawio 二次开发

目的：

使用drawIO, 进行绘图，
然后保存的时候，存到MySQL，
下次打开的时候，可以遍历MySQL的所有文件，
点击指定文件，可以在新的画布上展示已有的绘图

step1:

开发环境：

默认使用tomcat 部署：

改造成spring boot 部署…

Tomcat的包

ｊｓ　改造

获取当前文件：

访问的时候，添加？dev=1 进入开发模式
保存文件的函数 App.save

App.prototype.save = function(name, done)
{var file = this.getCurrentFile();console.log(file); // 这个file是 我们最终的file 获取对象if (file != null && this.spinner.spin(document.body, mxResources.get('saving'))){this.editor.setStatus('');if (this.editor.graph.isEditing()){this.editor.graph.stopEditing();}.......

加载已有的画布到新的画布上

App.prototype.showSplash = function(force)
{//Splash dialog shouldn't be shownn when running without a file menuif (urlParams['noFileMenu'] == '1'){return; }............................................  一些代码忽略不写});if (this.editor.isChromelessView()){this.handleError({message: mxResources.get('noFileSelected')},mxResources.get('errorLoadingFile'), mxUtils.bind(this, function(){this.showSplash();}));}/*** 如果有URL上 有 id，表示打开了一个存在的文档，进入编辑模式*/else if (urlParams['id']) {const mockFile = {title: 'luffyzh.drawio',data: '<mxfile host="localhost" modified="2021-09-02T09:50:39.574Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36" etag="PyBU88KGLdBE5FU7fpPf" version="@DRAWIO-VERSION@" type="device"><diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">7VhZc5swEP41PLbD4WDnsThx0tbNpE3aTB9lkIVqwVIhfOTXdzHCgPH4aOscnvjBo12WlbTft4dtOP1ofiVJEn6BgArDNoO54VwYtn3WNfE7VywKhduzCwWTPChUVqW4449UK/V7LOMBTRuGCkAonjSVPsQx9VVDR6SEWdNsDKK5a0IYbSnufCLa2gceqLDQ9uxupb+mnIXlzpZ7XjyJSGmsb5KGJIBZTeVcGk5fAqhiFc37VOSxK+Py8HHxIIYT9+rT1/Q3+e59vr/58a5wNjjkldUVJI3V/3WtsZwSkel46buqRRlACVkc0NyJaTheqCKBSwuXv6hSCw04yRSgCqQKgUFMxBAg0XZjiJU2s3KZxsGHHFiURwL8SaEacCH0Hihp+x5KqZIwWWGXO1gBkRsLMqLCI/6ELQ/aBwESH8UQ09xVgGTQd6kOd1lpvT1jqzFIIZM+3WLnaIoTyeg2f25hl5+vxlON3BWFiCq5QANJBVF82iQz0TnBVnYV7rjQ0B9AA6dFA5GNx4vHcAsbciRmIVf0LiHLkMywfjQZUkceL+cxQdJU47YD1sNgmVKp6HxrIMunrs5mXc56WpxVtcEqEz6s1YWOeaTQd1qh/4nl8i0J/yUJ3T2TsOxRO7NQk6Ukxt5JqT3dAsd7VSYwHqd4sHXqrDb8ezadtdh0Ay0y7cbjVdPtmcjUPYxL1ovnktvi0pBEiWG7AsPgjSSuWL5KRMYYkgXdxYYzaNeuEKJRlu5uFw2McwYNSMRFHq9rKqZUcZ9saCpEcIb7XvgIN5WbyYNb8pih5FbS/ZKsWH+P2Gy6zWazkuvdxtzQbXrH6jbdFqa3iF4BnW2KJb4n1vEdew2E8+du+b19ivSrLsFP3vHLarq75Vt7lmnNHvO9g58GgV7+FHC+10z5NgYch2H2qQ0C5QlrfPIyMWpPAqNMxstBADL1NglsmwTsTU3oSSeBshDWQP1GE8IRTHN4inPA+i//jvPcc0BZKZoQiDymtllk2IlhsD6LOdbxMECx+m+2KIXVH9zO5R8=</diagram></mxfile>'}const file = new LocalFile(this, mockFile.data, mockFile.title, this.mode);this.loadFile(`-1`, true, file);}else if (!mxClient.IS_CHROMEAPP && (this.mode == null || force)){var rowLimit = (serviceCount == 4) ? 2 : 3;var dlg = new StorageDialog(this, mxUtils.bind(this, function(){this.hideDialog();showSecondDialog();}), rowLimit);// 展示框，存储位置选择框的弹出this.showDialog(dlg.container, (rowLimit < 3) ? 200 : 300,((serviceCount > 3) ? 320 : 210), true, false);}else if (urlParams['create'] == null){// 调试，不展示存储位置...// showSecondDialog();}
};

所以，现在有什么了？

1 保存画布到MySQL

2 加载已有的图形到画布上

3 展示所有的图形（跟drawio 无关，list mysql 数据即可.通过id 加载到drawio 画布上）

还缺什么？

创建新的画布，屏蔽掉所有的弹出框

即理想流程是：

创建画布-> 编辑图形-> 保存图形

查询图形列表-> 加载图形 -> 编辑图形->保存图形

删除图形

加粗的是没有的，斜体是已经有的或可复用的

白色是简单的

TODO:

创建画布，真的是看不懂他的js了…

改造成spring boot 项目，这个简单…

END

drawio 二次开发相关推荐

基于drawio作图系统仿processOn风格的二次开发
前言平时工作中,做需求设计的时候,经常要用到画流程图,uml用例图等.百度搜索推荐最多的就是processOn和迅捷画图,这两个捞逼,一个比一个狠,迅捷基于drawio的二次开发,功能上没什么改进, ...
draw.io二次开发（1）三种运行模式的区别
想尝试在开源的drawio的基础上做一些开发,实现自己的定制化需求.可能是因为这个工具已经非常完善了吧,找到的大部分都是教你如何使用,开发相关资料太少,看来只能靠自己了. 关于开发环境搭建,请先看这一 ...
【ReactiveX】基于Golang pmlpml/RxGo程序包的二次开发
基于Golang pmlpml/RxGo程序包的二次开发[阅读时间:约20分钟] 一.ReactiveX & RxGo介绍 1.ReactiveX 2.RxGo 二.系统环境&项目介绍 ...
20150411--Dede二次开发-01
20150411--Dede二次开发-01 目录一.目前市场流行的电子商城系统 1 二.ecshop的介绍 1 三.安装 2 四.echsop 的目录结构 5 五.分析ecshop里面程序的架构 5 ...
android系统二次开发,Andorid系统二次开发界面
Andorid系统二次开发界面给大家介绍完外观,下面我们一起再来看下魅族MX的系统界面.本次魅族MX仍然采用的是Andorid操作系统,并且加入了二次开发界面.UI界面整体上保持了和M9的特色,不过 ...
wordpress php教程 pdf,wordpress二次开发全能教程.pdf
wordpress 二次开发全能教程 1. 根据分类来制定导航条 A. 修改页面 header.php! <?php wp_list_categories('title_li='); ?> ...
Saiku二次开发获取源代码在本地编译（五）
关于Saiku的二次开发,在本地编译然后启动自己编译好的Saiku服务 Saiku是开源的,从github上能下载源代码,本例中的saiku源码也是从github上找的,然后自己改了一些pom.xml ...
catia三维轴承_浅谈基于CATIA二次开发的单排四点接触球轴承三维设计论文
浅谈基于CATIA二次开发的单排四点接触球轴承三维设计论文一.概述单排四点接触球转盘轴承是一种能够同时承受较大轴向负荷.径向负荷和倾覆力矩等综合载荷,集支承.旋转.传动.固定等多种功能于一身的特殊 ...
【工业串口和网络软件通讯平台(SuperIO)教程】七.二次开发服务驱动
SuperIO相关资料下载:http://pan.baidu.com/s/1pJ7lZWf 1.1 服务接口的作用围绕着设备驱动模块采集的数据,根据需求提供多种应用服务,例如:数据上传服务.数 ...
二次开发photoshop_Photoshop 101：Web开发人员简介
二次开发photoshop 介绍 (Introduction) Often, when working as web developer, we need to integrate templates ...

drawio 二次开发

ｊｓ　改造

drawio 二次开发相关推荐

最新文章

热门文章

drawio 二次开发

ｊｓ 改造

drawio 二次开发相关推荐

最新文章

热门文章

ｊｓ　改造