+
+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.
+ */
+export 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';
+}
+
+export 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: ''});
+ });
+}
+
+function drawEventClose() {
+ window.removeEventListener('message', drawReceive);
+ if (iFrame) document.body.removeChild(iFrame);
+}
+
+function drawPostMessage(data) {
+ iFrame.contentWindow.postMessage(JSON.stringify(data), '*');
+}
\ No newline at end of file
projects / bookstack / commitdiff