网页内docker版drawio内嵌和xml生成

app/static/index.html

@@ -107,10 +107,19 @@
       const exportButton = document.getElementById("export-button");
       const statusNode = document.getElementById("status");
       const drawioUrl = new URL(DRAWIO_BASE_URL, window.location.href);
+      const componentLibraryUrl = new URL(
+        "/api/component-library.drawiolib",
+        window.location.href,
+      );
+      const componentLibraryKey = `U${componentLibraryUrl.href}`;
       drawioUrl.searchParams.set("embed", "1");
       drawioUrl.searchParams.set("proto", "json");
-      drawioUrl.searchParams.set("configure", "1");
       drawioUrl.searchParams.set("libraries", "1");
+      drawioUrl.searchParams.set("clibs", componentLibraryKey);
+      drawioUrl.searchParams.set(
+        "cors",
+        `^${escapeRegExp(window.location.origin)}/`,
+      );
       drawioUrl.searchParams.set("spin", "1");
       drawioUrl.searchParams.set("noSaveBtn", "1");
       drawioUrl.searchParams.set("noExitBtn", "1");
@@ -118,38 +127,19 @@
       frame.src = drawioUrl.toString();
 
       let pendingExport = false;
+      let exportTimeoutId = null;
 
       const initialXml =
         '<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0"><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel>';
 
-      const componentLibrary = [
-        {
-          title: "贮箱",
-          w: 80,
-          h: 80,
-          xml:
-            '<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><object id="tank" label="贮箱" componentType="tank" medium="N2" volume="1.0"><mxCell style="shape=cylinder;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1"><mxGeometry width="80" height="80" as="geometry"/></mxCell></object></root></mxGraphModel>',
-        },
-        {
-          title: "阀门",
-          w: 72,
-          h: 56,
-          xml:
-            '<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><object id="valve" label="阀门" componentType="valve" valveType="manual" nominalDiameter="10"><mxCell style="rhombus;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1"><mxGeometry width="72" height="56" as="geometry"/></mxCell></object></root></mxGraphModel>',
-        },
-        {
-          title: "管段",
-          w: 96,
-          h: 36,
-          xml:
-            '<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><object id="pipe" label="管段" componentType="pipe" length="1.0" diameter="0.01"><mxCell style="rounded=1;whiteSpace=wrap;html=1;arcSize=12;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1"><mxGeometry width="96" height="36" as="geometry"/></mxCell></object></root></mxGraphModel>',
-        },
-      ];
-
       function setStatus(text) {
         statusNode.textContent = text;
       }
 
+      function escapeRegExp(value) {
+        return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      }
+
       function sendToDrawio(message) {
         frame.contentWindow.postMessage(JSON.stringify(message), drawioUrl.origin);
       }
@@ -166,6 +156,32 @@
         }
       }
 
+      function clearExportTimeout() {
+        if (exportTimeoutId !== null) {
+          window.clearTimeout(exportTimeoutId);
+          exportTimeoutId = null;
+        }
+      }
+
+      async function finishExport(diagramXml) {
+        clearExportTimeout();
+        pendingExport = false;
+        await exportSystemXml(diagramXml || initialXml);
+      }
+
+      function scheduleExportTimeout() {
+        clearExportTimeout();
+        exportTimeoutId = window.setTimeout(() => {
+          if (!pendingExport) {
+            return;
+          }
+
+          pendingExport = false;
+          exportButton.disabled = false;
+          setStatus("生成超时");
+        }, 5000);
+      }
+
       window.addEventListener("message", async (event) => {
         if (event.origin !== drawioUrl.origin) {
           return;
@@ -176,35 +192,6 @@
           return;
         }
 
-        if (message.event === "configure") {
-          sendToDrawio({
-            action: "configure",
-            config: {
-              defaultLibraries: "system-components",
-              enabledLibraries: [],
-              enableCustomLibraries: false,
-              libraries: [
-                {
-                  title: { main: "System" },
-                  entries: [
-                    {
-                      id: "system-components",
-                      title: { main: "Components" },
-                      libs: [
-                        {
-                          title: { main: "Components" },
-                          data: componentLibrary,
-                        },
-                      ],
-                    },
-                  ],
-                },
-              ],
-            },
-          });
-          return;
-        }
-
         if (message.event === "init") {
           sendToDrawio({
             action: "load",
@@ -218,21 +205,27 @@
         }
 
         if (message.event === "autosave") {
-          setStatus("已更新");
+          if (!pendingExport) {
+            setStatus("已更新");
+          }
           return;
         }
 
-        if (message.event === "save" && pendingExport) {
-          pendingExport = false;
-          await exportSystemXml(message.xml);
+        if (message.event === "export" && pendingExport) {
+          await finishExport(message.xml);
         }
       });
 
       exportButton.addEventListener("click", () => {
+        if (pendingExport) {
+          return;
+        }
+
         pendingExport = true;
         exportButton.disabled = true;
         setStatus("生成中");
-        sendToDrawio({ action: "save" });
+        sendToDrawio({ action: "export", format: "xml" });
+        scheduleExportTimeout();
       });
 
       async function exportSystemXml(diagramXml) {