Upgraded app to Laravel 5.7

resources/js/services/drawio.js

@@ -0,0 +1,88 @@
+
+const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
+let iFrame = null;
+
+let onInit, onSave;
+
+/**
+ * Show the draw.io editor.
+ * @param onInitCallback - Must return a promise with the xml to load for the editor.
+ * @param onSaveCallback - Is called with the drawing data on save.
+ */
+function show(onInitCallback, onSaveCallback) {
+    onInit = onInitCallback;
+    onSave = onSaveCallback;
+
+    iFrame = document.createElement('iframe');
+    iFrame.setAttribute('frameborder', '0');
+    window.addEventListener('message', drawReceive);
+    iFrame.setAttribute('src', drawIoUrl);
+    iFrame.setAttribute('class', 'fullscreen');
+    iFrame.style.backgroundColor = '#FFFFFF';
+    document.body.appendChild(iFrame);
+}
+
+function close() {
+    drawEventClose();
+}
+
+function drawReceive(event) {
+    if (!event.data || event.data.length < 1) return;
+    let message = JSON.parse(event.data);
+    if (message.event === 'init') {
+        drawEventInit();
+    } else if (message.event === 'exit') {
+        drawEventClose();
+    } else if (message.event === 'save') {
+        drawEventSave(message);
+    } else if (message.event === 'export') {
+        drawEventExport(message);
+    }
+}
+
+function drawEventExport(message) {
+    if (onSave) {
+        onSave(message.data);
+    }
+}
+
+function drawEventSave(message) {
+    drawPostMessage({action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing'});
+}
+
+function drawEventInit() {
+    if (!onInit) return;
+    onInit().then(xml => {
+        drawPostMessage({action: 'load', autosave: 1, xml: xml});
+    });
+}
+
+function drawEventClose() {
+    window.removeEventListener('message', drawReceive);
+    if (iFrame) document.body.removeChild(iFrame);
+}
+
+function drawPostMessage(data) {
+    iFrame.contentWindow.postMessage(JSON.stringify(data), '*');
+}
+
+async function upload(imageData, pageUploadedToId) {
+    let data = {
+        image: imageData,
+        uploaded_to: pageUploadedToId,
+    };
+    const resp = await window.$http.post(window.baseUrl(`/images/drawio`), data);
+    return resp.data;
+}
+
+/**
+ * Load an existing image, by fetching it as Base64 from the system.
+ * @param drawingId
+ * @returns {Promise<string>}
+ */
+async function load(drawingId) {
+    const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
+    return `data:image/png;base64,${resp.data.content}`;
+}
+
+export default {show, close, upload, load};