Updated draw.io code to support SVGs as primary data type

[bookstack] / resources / js / services / drawio.js

diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js
index 17e57cd6b9165d567aa09f48197ea95e8b62551f..141b61c72d4b3e50f9d38e09dc3fce355ba1716a 100644 (file)
--- a/resources/js/services/drawio.js
+++ b/resources/js/services/drawio.js
@@ -1,5 +1,5 @@
 let iFrame = null;
-
+let lastApprovedOrigin;
 let onInit, onSave;
 
 /**
@@ -19,15 +19,22 @@ function show(drawioUrl, onInitCallback, onSaveCallback) {
     iFrame.setAttribute('class', 'fullscreen');
     iFrame.style.backgroundColor = '#FFFFFF';
     document.body.appendChild(iFrame);
+    lastApprovedOrigin = (new URL(drawioUrl)).origin;
 }
 
 function close() {
     drawEventClose();
 }
 
+/**
+ * Receive and handle a message event from the draw.io window.
+ * @param {MessageEvent} event
+ */
 function drawReceive(event) {
     if (!event.data || event.data.length < 1) return;
-    let message = JSON.parse(event.data);
+    if (event.origin !== lastApprovedOrigin) return;
+
+    const message = JSON.parse(event.data);
     if (message.event === 'init') {
         drawEventInit();
     } else if (message.event === 'exit') {
@@ -36,6 +43,8 @@ function drawReceive(event) {
         drawEventSave(message);
     } else if (message.event === 'export') {
         drawEventExport(message);
+    } else if (message.event === 'configure') {
+        drawEventConfigure();
     }
 }
 
@@ -46,7 +55,7 @@ function drawEventExport(message) {
 }
 
 function drawEventSave(message) {
-    drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'});
+    drawPostMessage({action: 'export', format: 'xmlsvg', xml: message.xml, spin: 'Updating drawing'});
 }
 
 function drawEventInit() {
@@ -56,13 +65,19 @@ function drawEventInit() {
     });
 }
 
+function drawEventConfigure() {
+    const config = {};
+    window.$events.emitPublic(iFrame, 'editor-drawio::configure', {config});
+    drawPostMessage({action: 'configure', config});
+}
+
 function drawEventClose() {
     window.removeEventListener('message', drawReceive);
     if (iFrame) document.body.removeChild(iFrame);
 }
 
 function drawPostMessage(data) {
-    iFrame.contentWindow.postMessage(JSON.stringify(data), '*');
+    iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
 }
 
 async function upload(imageData, pageUploadedToId) {
@@ -81,7 +96,7 @@ async function upload(imageData, pageUploadedToId) {
  */
 async function load(drawingId) {
     const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
-    return `data:image/png;base64,${resp.data.content}`;
+    return resp.data.content;
 }
 
 export default {show, close, upload, load};
\ No newline at end of file