drawio 二次开发
生活随笔
收集整理的這篇文章主要介紹了
drawio 二次开发
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
目的:
使用drawIO, 進(jìn)行繪圖,
然后保存的時(shí)候,存到MySQL,
下次打開的時(shí)候,可以遍歷MySQL的所有文件,
點(diǎn)擊指定文件,可以在新的畫布上展示已有的繪圖
step1:
開發(fā)環(huán)境:
默認(rèn)使用tomcat 部署:
改造成spring boot 部署…
Tomcat的包
js 改造
獲取當(dāng)前文件:
訪問的時(shí)候,添加?dev=1 進(jìn)入開發(fā)模式
保存文件的函數(shù) App.save
加載已有的畫布到新的畫布上
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,表示打開了一個(gè)存在的文檔,進(jìn)入編輯模式*/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){// 調(diào)試,不展示存儲位置...// showSecondDialog();} };所以,現(xiàn)在有什么了?
1 保存畫布到MySQL
2 加載已有的圖形到畫布上
3 展示所有的圖形(跟drawio 無關(guān),list mysql 數(shù)據(jù)即可.通過id 加載到drawio 畫布上)
還缺什么?
創(chuàng)建新的畫布,屏蔽掉所有的彈出框
即理想流程是:
創(chuàng)建畫布-> 編輯圖形-> 保存圖形
查詢圖形列表-> 加載圖形 -> 編輯圖形->保存圖形
刪除圖形
加粗的是沒有的,斜體是已經(jīng)有的或可復(fù)用的
白色是簡單的
TODO:
END
總結(jié)
以上是生活随笔為你收集整理的drawio 二次开发的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 父子进程共享文件
- 下一篇: Python学习之路-爬虫(四大名著)