客户端drawio本地化

.gitignore

@@ -4,6 +4,7 @@
 /public/uploads/*
 /public/.well-known
 /public/.user.ini
+/resources/drawio/
 /storage/*.key
 /vendor
 /build

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "resources/drawio"]
+	path = resources/drawio
+	url = https://github.com/jgraph/drawio.git

docker-compose.yml

@@ -45,7 +45,8 @@ services:
       - php
       - office
       - fileview
-      - drawio
+      - drawio-webapp
+      - drawio-export
     restart: unless-stopped
 
   redis:
@@ -109,18 +110,18 @@ services:
         ipv4_address: "${APP_IPPR}.7"
     restart: unless-stopped
 
-  drawio:
-    container_name: "dootask-drawio-${APP_ID}"
+  drawio-webapp:
+    container_name: "dootask-drawio-webapp-${APP_ID}"
     image: "jgraph/drawio:16.6.1"
     volumes:
-      - ./docker/drawio/index.html:/usr/local/tomcat/webapps/draw/index.html
-      - ./docker/drawio/js/app.min.js:/usr/local/tomcat/webapps/draw/js/app.min.js
+      - ./docker/drawio/webapp/index.html:/usr/local/tomcat/webapps/draw/index.html
+      - ./docker/drawio/webapp/js/app.min.js:/usr/local/tomcat/webapps/draw/js/app.min.js
+      - ./docker/drawio/webapp/js/croppie/croppie.min.css:/usr/local/tomcat/webapps/draw/js/croppie/croppie.min.css
     networks:
       extnetwork:
         ipv4_address: "${APP_IPPR}.8"
     environment:
       TZ: "Asia/Shanghai"
-      EXPORT_URL: "http://drawio-export:8000/"
     depends_on:
       - drawio-export
     restart: unless-stopped
@@ -128,15 +129,13 @@ services:
   drawio-export:
     container_name: "dootask-drawio-export-${APP_ID}"
     image: "jgraph/export-server"
-    expose:
-      - "8000"
     networks:
       extnetwork:
         ipv4_address: "${APP_IPPR}.9"
     environment:
       TZ: "Asia/Shanghai"
     volumes:
-      - ./docker/drawio/fonts:/usr/share/fonts/drawio
+      - ./docker/drawio/export/fonts:/usr/share/fonts/drawio
     restart: unless-stopped
 
 networks:

docker/drawio/webapp/index.html

@@ -17,8 +17,11 @@
     <meta name="mobile-web-app-capable" content="yes">
 	<meta name="theme-color" content="#d89000">
 	<script type="text/javascript">
-        window.DRAWIO_LIGHTBOX_URL = window.location.origin + "/drawio"
-		/**
+        window.EXPORT_URL = window.location.origin + "/api/drawio/export";
+        window.PLANT_URL = window.location.origin + "/api/drawio/plant";
+        window.DRAWIO_LIGHTBOX_URL = window.location.origin + "/drawio";
+
+        /**
 		 * URL Parameters and protocol description are here:
 		 *
 		 * https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported

docker/drawio/webapp/js/croppie/croppie.min.css

@@ -0,0 +1 @@
+.croppie-container{width:100%;height:100%}.croppie-container .cr-image{z-index:-1;position:absolute;top:0;left:0;transform-origin:0 0;max-height:none;max-width:none}.croppie-container .cr-boundary{position:relative;overflow:hidden;margin:0 auto;z-index:1;width:100%;height:100%}.croppie-container .cr-resizer,.croppie-container .cr-viewport{position:absolute;border:2px solid #fff;margin:auto;top:0;bottom:0;right:0;left:0;box-shadow:0 0 2000px 2000px rgba(0,0,0,.5);z-index:0}.croppie-container .cr-resizer{z-index:2;box-shadow:none;pointer-events:none}.croppie-container .cr-resizer-horisontal,.croppie-container .cr-resizer-vertical{position:absolute;pointer-events:all}.croppie-container .cr-resizer-horisontal::after,.croppie-container .cr-resizer-vertical::after{display:block;position:absolute;box-sizing:border-box;border:1px solid #000;background:#fff;width:10px;height:10px;content:''}.croppie-container .cr-resizer-vertical{bottom:-5px;cursor:row-resize;width:100%;height:10px}.croppie-container .cr-resizer-vertical::after{left:50%;margin-left:-5px}.croppie-container .cr-resizer-horisontal{right:-5px;cursor:col-resize;width:10px;height:100%}.croppie-container .cr-resizer-horisontal::after{top:50%;margin-top:-5px}.croppie-container .cr-original-image{display:none}.croppie-container .cr-vp-circle{border-radius:50%}.croppie-container .cr-overlay{z-index:1;position:absolute;cursor:move;touch-action:none}.croppie-container .cr-slider-wrap{width:75%;margin:15px auto;text-align:center}.croppie-result{position:relative;overflow:hidden}.croppie-result img{position:absolute}.croppie-container .cr-image,.croppie-container .cr-overlay,.croppie-container .cr-viewport{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.cr-slider{-webkit-appearance:none;width:300px;max-width:100%;padding-top:8px;padding-bottom:8px;background-color:transparent}.cr-slider::-webkit-slider-runnable-track{width:100%;height:3px;background:rgba(0,0,0,.5);border:0;border-radius:3px}.cr-slider::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:-6px}.cr-slider:focus{outline:0}.cr-slider::-moz-range-track{width:100%;height:3px;background:rgba(0,0,0,.5);border:0;border-radius:3px}.cr-slider::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:-6px}.cr-slider:-moz-focusring{outline:1px solid #fff;outline-offset:-1px}.cr-slider::-ms-track{width:100%;height:5px;background:0 0;border-color:transparent;border-width:6px 0;color:transparent}.cr-slider::-ms-fill-lower{background:rgba(0,0,0,.5);border-radius:10px}.cr-slider::-ms-fill-upper{background:rgba(0,0,0,.5);border-radius:10px}.cr-slider::-ms-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#ddd;margin-top:1px}.cr-slider:focus::-ms-fill-lower{background:rgba(0,0,0,.5)}.cr-slider:focus::-ms-fill-upper{background:rgba(0,0,0,.5)}.cr-rotate-controls{position:absolute;bottom:5px;left:5px;z-index:1}.cr-rotate-controls button{border:0;background:0 0}.cr-rotate-controls i:before{display:inline-block;font-style:normal;font-weight:900;font-size:22px}.cr-rotate-l i:before{content:'↺'}.cr-rotate-r i:before{content:'↻'}

docker/nginx/default.conf

@@ -18,18 +18,6 @@ upstream service {
     server php:20000 weight=5 max_fails=3 fail_timeout=30s;
     keepalive 16;
 }
-upstream office {
-    server office weight=5 max_fails=3 fail_timeout=30s;
-    keepalive 16;
-}
-upstream fileview {
-    server fileview:8012 weight=5 max_fails=3 fail_timeout=30s;
-    keepalive 16;
-}
-upstream drawio {
-    server drawio:8080 weight=5 max_fails=3 fail_timeout=30s;
-    keepalive 16;
-}
 server {
     listen 80;
 
@@ -89,6 +77,23 @@ server {
         proxy_pass http://service;
     }
 
+    location /fileview {
+        proxy_http_version 1.1;
+        proxy_set_header Connection "";
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Real-PORT $remote_port;
+        proxy_set_header X-Forwarded-Host $the_host;
+        proxy_set_header X-Forwarded-Proto $the_scheme;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $http_host;
+        proxy_set_header Scheme $scheme;
+        proxy_set_header Server-Protocol $server_protocol;
+        proxy_set_header Server-Name $server_name;
+        proxy_set_header Server-Addr $server_addr;
+        proxy_set_header Server-Port $server_port;
+        proxy_pass http://fileview:8012;
+    }
+
     location /office/ {
         proxy_http_version 1.1;
         proxy_set_header X-Real-IP $remote_addr;
@@ -107,23 +112,6 @@ server {
         proxy_pass http://office/;
     }
 
-    location /fileview {
-        proxy_http_version 1.1;
-        proxy_set_header Connection "";
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Real-PORT $remote_port;
-        proxy_set_header X-Forwarded-Host $the_host;
-        proxy_set_header X-Forwarded-Proto $the_scheme;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header Host $http_host;
-        proxy_set_header Scheme $scheme;
-        proxy_set_header Server-Protocol $server_protocol;
-        proxy_set_header Server-Name $server_name;
-        proxy_set_header Server-Addr $server_addr;
-        proxy_set_header Server-Port $server_port;
-        proxy_pass http://fileview;
-    }
-
     location /drawio/ {
         proxy_http_version 1.1;
         proxy_set_header X-Real-IP $remote_addr;
@@ -139,7 +127,7 @@ server {
         proxy_set_header Server-Port $server_port;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection $connection_upgrade;
-        proxy_pass http://drawio/;
+        proxy_pass http://drawio-webapp:8080/;
     }
 }
 

electron/build.js

@@ -15,19 +15,42 @@ const packageFile = path.resolve(__dirname, "package.json");
 const packageBakFile = path.resolve(__dirname, "package-bak.json");
 const platform = ["build-mac", "build-mac-arm", "build-win"];
 
+// 克隆 Drawio
+function cloneDrawio(systemInfo) {
+    child_process.spawnSync("git", ["submodule", "update", "--quiet", "--init", "--depth=1"], {stdio: "inherit"});
+    const drawioSrcDir = path.resolve(__dirname, "../resources/drawio/src/main/webapp");
+    const drawioCoverDir = path.resolve(__dirname, "../docker/drawio/webapp");
+    const drawioDestDir = path.resolve(electronDir, "drawio");
+    fse.copySync(drawioSrcDir, drawioDestDir)
+    fse.copySync(drawioCoverDir, drawioDestDir)
+    //
+    const preConfigFile = path.resolve(drawioDestDir, "js/PreConfig.js");
+    if (!fse.existsSync(preConfigFile)) {
+        console.log("clone drawio error!");
+        process.exit()
+    }
+    let preConfigString = fs.readFileSync(preConfigFile, 'utf8');
+    preConfigString += "\nwindow.systemInfo = " + JSON.stringify(systemInfo) + ";\n";
+    preConfigString += fs.readFileSync(path.resolve(__dirname, "drawio.js"), 'utf8');
+    fs.writeFileSync(preConfigFile, preConfigString, 'utf8');
+}
+
 // 生成配置、编译应用
 function startBuild(data, publish) {
+    // information
     console.log("Name: " + data.name);
     console.log("AppId: " + data.id);
     console.log("Version: " + config.version);
-    // config.js
     let systemInfo = {
         title: data.name,
         version: config.version,
         origin: "./",
         apiUrl:  utils.formatUrl(data.url) + "api/",
     }
-    fs.writeFileSync(electronDir + "/config.js", "window.systemInfo = " + JSON.stringify(systemInfo, null, 2), 'utf8');
+    // drawio
+    cloneDrawio(systemInfo)
+    // config.js
+    fs.writeFileSync(electronDir + "/config.js", "window.systemInfo = " + JSON.stringify(systemInfo), 'utf8');
     fs.writeFileSync(nativeCachePath, utils.formatUrl(data.url));
     fs.writeFileSync(devloadCachePath, "", 'utf8');
     // index.html

electron/drawio.js

@@ -0,0 +1,13 @@
+window.utilsStorage={getStorageString(key,def=''){let value=this.storage(key);return typeof value==="string"||typeof value==="number"?value:def},storage(key,value){if(!key){return}let keyName='__state__';if(key.substring(0,5)==='cache'){keyName='__state:'+key+'__'}if(typeof value==='undefined'){return this.loadFromlLocal(key,'',keyName)}else{this.savaToLocal(key,value,keyName)}},savaToLocal(key,value,keyName){try{if(typeof keyName==='undefined')keyName='__seller__';let seller=window.localStorage[keyName];if(!seller){seller={}}else{seller=JSON.parse(seller)}seller[key]=value;window.localStorage[keyName]=JSON.stringify(seller)}catch(e){}},loadFromlLocal(key,def,keyName){try{if(typeof keyName==='undefined')keyName='__seller__';let seller=window.localStorage[keyName];if(!seller){return def}seller=JSON.parse(seller);if(!seller||typeof seller[key]==='undefined'){return def}return seller[key]}catch(e){return def}},}
+
+window.cacheServerUrl = window.utilsStorage.getStorageString("cacheServerUrl")
+if (window.cacheServerUrl) {
+    window.systemInfo.apiUrl = window.cacheServerUrl
+}
+
+window.EXPORT_URL = window.systemInfo.apiUrl + "drawio/export";
+window.PLANT_URL = window.systemInfo.apiUrl + "drawio/plant";
+window.DRAWIO_LIGHTBOX_URL = window.systemInfo.apiUrl + "../drawio";
+while (window.DRAWIO_LIGHTBOX_URL.indexOf("/../") !== -1) {
+    window.DRAWIO_LIGHTBOX_URL = window.DRAWIO_LIGHTBOX_URL.replace(/\/(((?!\/).)*)\/\.\.\//, "/")
+}

resources/assets/js/components/Drawio.vue

@@ -67,10 +67,15 @@ export default {
                 language = 'zh'
                 break;
         }
-        let chrome = this.readOnly ? 0 : 1;
         let lightbox = this.readOnly ? 1 : 0;
-        let theme = this.themeIsDark ? 'dark' : 'kennedy'
-        this.url = $A.apiUrl(`../drawio/?chrome=${chrome}&lightbox=${lightbox}&ui=${theme}&lang=${language}&embed=1&noLangIcon=1&noExitBtn=1&noSaveBtn=1&saveAndExit=0&spin=1&proto=json`);
+        let chrome = this.readOnly ? 0 : 1;
+        let theme = this.themeIsDark ? 'dark' : 'kennedy';
+        let query = `?chrome=${chrome}&lightbox=${lightbox}&ui=${theme}&lang=${language}&embed=1&noLangIcon=1&noExitBtn=1&noSaveBtn=1&saveAndExit=0&spin=1&proto=json`;
+        if (this.$Electron) {
+            this.url = $A.originUrl(`drawio/index.html${query}`);
+        } else {
+            this.url = $A.apiUrl(`../drawio/${query}`);
+        }
     },
     mounted() {
         window.addEventListener('message', this.handleMessage)
@@ -107,9 +112,8 @@ export default {
         },
 
         handleMessage(event) {
-            const origin = $A.originUrl(`drawio/`);
             const editWindow = this.$refs.myFlow.contentWindow;
-            if (!origin.includes(event.origin)) {
+            if (event.source !== editWindow) {
                 return;
             }
             const payload = $A.jsonParse(event.data);