BookStack Code Mirror - bookstack/blob - resources/js/services/drawio.js

   1 // Docs: https://www.diagrams.net/doc/faq/embed-mode
   2 import * as store from './store';
   3
   4 let iFrame = null;
   5 let lastApprovedOrigin;
   6 let onInit;
   7 let onSave;
   8 const saveBackupKey = 'last-drawing-save';
   9
  10 function drawPostMessage(data) {
  11     iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
  12 }
  13
  14 function drawEventExport(message) {
  15     store.set(saveBackupKey, message.data);
  16     if (onSave) {
  17         onSave(message.data).then(() => {
  18             store.del(saveBackupKey);
  19         });
  20     }
  21 }
  22
  23 function drawEventSave(message) {
  24     drawPostMessage({
  25         action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing',
  26     });
  27 }
  28
  29 function drawEventInit() {
  30     if (!onInit) return;
  31     onInit().then(xml => {
  32         drawPostMessage({action: 'load', autosave: 1, xml});
  33     });
  34 }
  35
  36 function drawEventConfigure() {
  37     const config = {};
  38     window.$events.emitPublic(iFrame, 'editor-drawio::configure', {config});
  39     drawPostMessage({action: 'configure', config});
  40 }
  41
  42 function drawEventClose() {
  43     // eslint-disable-next-line no-use-before-define
  44     window.removeEventListener('message', drawReceive);
  45     if (iFrame) document.body.removeChild(iFrame);
  46 }
  47
  48 /**
  49  * Receive and handle a message event from the draw.io window.
  50  * @param {MessageEvent} event
  51  */
  52 function drawReceive(event) {
  53     if (!event.data || event.data.length < 1) return;
  54     if (event.origin !== lastApprovedOrigin) return;
  55
  56     const message = JSON.parse(event.data);
  57     if (message.event === 'init') {
  58         drawEventInit();
  59     } else if (message.event === 'exit') {
  60         drawEventClose();
  61     } else if (message.event === 'save') {
  62         drawEventSave(message);
  63     } else if (message.event === 'export') {
  64         drawEventExport(message);
  65     } else if (message.event === 'configure') {
  66         drawEventConfigure();
  67     }
  68 }
  69
  70 /**
  71  * Attempt to prompt and restore unsaved drawing content if existing.
  72  * @returns {Promise<void>}
  73  */
  74 async function attemptRestoreIfExists() {
  75     const backupVal = await store.get(saveBackupKey);
  76     const dialogEl = document.getElementById('unsaved-drawing-dialog');
  77
  78     if (!dialogEl) {
  79         console.error('Missing expected unsaved-drawing dialog');
  80     }
  81
  82     if (backupVal) {
  83         /** @var {ConfirmDialog} */
  84         const dialog = window.$components.firstOnElement(dialogEl, 'confirm-dialog');
  85         const restore = await dialog.show();
  86         if (restore) {
  87             onInit = async () => backupVal;
  88         }
  89     }
  90 }
  91
  92 /**
  93  * Show the draw.io editor.
  94  * onSaveCallback must return a promise that resolves on successful save and errors on failure.
  95  * onInitCallback must return a promise with the xml to load for the editor.
  96  * Will attempt to provide an option to restore unsaved changes if found to exist.
  97  * @param {String} drawioUrl
  98  * @param {Function<Promise<String>>} onInitCallback
  99  * @param {Function<Promise>} onSaveCallback - Is called with the drawing data on save.
 100  */
 101 export async function show(drawioUrl, onInitCallback, onSaveCallback) {
 102     onInit = onInitCallback;
 103     onSave = onSaveCallback;
 104
 105     await attemptRestoreIfExists();
 106
 107     iFrame = document.createElement('iframe');
 108     iFrame.setAttribute('frameborder', '0');
 109     window.addEventListener('message', drawReceive);
 110     iFrame.setAttribute('src', drawioUrl);
 111     iFrame.setAttribute('class', 'fullscreen');
 112     iFrame.style.backgroundColor = '#FFFFFF';
 113     document.body.appendChild(iFrame);
 114     lastApprovedOrigin = (new URL(drawioUrl)).origin;
 115 }
 116
 117 export async function upload(imageData, pageUploadedToId) {
 118     const data = {
 119         image: imageData,
 120         uploaded_to: pageUploadedToId,
 121     };
 122     const resp = await window.$http.post(window.baseUrl('/images/drawio'), data);
 123     return resp.data;
 124 }
 125
 126 export function close() {
 127     drawEventClose();
 128 }
 129
 130 /**
 131  * Load an existing image, by fetching it as Base64 from the system.
 132  * @param drawingId
 133  * @returns {Promise<string>}
 134  */
 135 export async function load(drawingId) {
 136     try {
 137         const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
 138         return `data:image/png;base64,${resp.data.content}`;
 139     } catch (error) {
 140         if (error instanceof window.$http.HttpError) {
 141             window.$events.showResponseError(error);
 142         }
 143         close();
 144         throw error;
 145     }
 146 }