2023-04-20 23:25:48 +08:00
|
|
|
// Docs: https://www.diagrams.net/doc/faq/embed-mode
|
2023-08-23 02:30:39 +08:00
|
|
|
import * as store from './store';
|
2024-07-18 18:19:11 +08:00
|
|
|
import {ConfirmDialog} from "../components";
|
2024-07-18 22:13:14 +08:00
|
|
|
import {HttpError} from "./http";
|
2024-07-18 18:19:11 +08:00
|
|
|
|
|
|
|
type DrawioExportEventResponse = {
|
|
|
|
action: 'export',
|
|
|
|
format: string,
|
|
|
|
message: string,
|
|
|
|
data: string,
|
|
|
|
xml: string,
|
|
|
|
};
|
|
|
|
|
|
|
|
type DrawioSaveEventResponse = {
|
|
|
|
action: 'save',
|
|
|
|
xml: string,
|
|
|
|
};
|
|
|
|
|
|
|
|
let iFrame: HTMLIFrameElement|null = null;
|
|
|
|
let lastApprovedOrigin: string;
|
|
|
|
let onInit: () => Promise<string>;
|
|
|
|
let onSave: (data: string) => Promise<any>;
|
2023-08-23 02:30:39 +08:00
|
|
|
const saveBackupKey = 'last-drawing-save';
|
2018-01-21 00:32:13 +08:00
|
|
|
|
2024-07-18 18:19:11 +08:00
|
|
|
function drawPostMessage(data: Record<any, any>): void {
|
|
|
|
iFrame?.contentWindow?.postMessage(JSON.stringify(data), lastApprovedOrigin);
|
2018-01-21 00:32:13 +08:00
|
|
|
}
|
|
|
|
|
2024-07-18 18:19:11 +08:00
|
|
|
function drawEventExport(message: DrawioExportEventResponse) {
|
2023-08-23 02:30:39 +08:00
|
|
|
store.set(saveBackupKey, message.data);
|
2018-01-21 00:32:13 +08:00
|
|
|
if (onSave) {
|
2023-08-23 02:30:39 +08:00
|
|
|
onSave(message.data).then(() => {
|
|
|
|
store.del(saveBackupKey);
|
|
|
|
});
|
2018-01-21 00:32:13 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-07-18 18:19:11 +08:00
|
|
|
function drawEventSave(message: DrawioSaveEventResponse) {
|
2023-04-19 05:20:02 +08:00
|
|
|
drawPostMessage({
|
|
|
|
action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing',
|
|
|
|
});
|
2018-01-21 00:32:13 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function drawEventInit() {
|
|
|
|
if (!onInit) return;
|
|
|
|
onInit().then(xml => {
|
2023-04-19 05:20:02 +08:00
|
|
|
drawPostMessage({action: 'load', autosave: 1, xml});
|
2018-01-21 00:32:13 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-04-21 06:32:02 +08:00
|
|
|
function drawEventConfigure() {
|
|
|
|
const config = {};
|
2024-07-18 18:19:11 +08:00
|
|
|
if (iFrame) {
|
|
|
|
window.$events.emitPublic(iFrame, 'editor-drawio::configure', {config});
|
|
|
|
drawPostMessage({action: 'configure', config});
|
|
|
|
}
|
2022-04-21 06:32:02 +08:00
|
|
|
}
|
|
|
|
|
2018-01-21 00:32:13 +08:00
|
|
|
function drawEventClose() {
|
2023-04-19 22:20:04 +08:00
|
|
|
// eslint-disable-next-line no-use-before-define
|
2018-01-21 00:32:13 +08:00
|
|
|
window.removeEventListener('message', drawReceive);
|
|
|
|
if (iFrame) document.body.removeChild(iFrame);
|
|
|
|
}
|
|
|
|
|
2023-04-19 22:20:04 +08:00
|
|
|
/**
|
|
|
|
* Receive and handle a message event from the draw.io window.
|
|
|
|
*/
|
2024-07-18 18:19:11 +08:00
|
|
|
function drawReceive(event: MessageEvent) {
|
2023-04-19 22:20:04 +08:00
|
|
|
if (!event.data || event.data.length < 1) return;
|
|
|
|
if (event.origin !== lastApprovedOrigin) return;
|
|
|
|
|
|
|
|
const message = JSON.parse(event.data);
|
|
|
|
if (message.event === 'init') {
|
|
|
|
drawEventInit();
|
|
|
|
} else if (message.event === 'exit') {
|
|
|
|
drawEventClose();
|
|
|
|
} else if (message.event === 'save') {
|
2024-07-18 18:19:11 +08:00
|
|
|
drawEventSave(message as DrawioSaveEventResponse);
|
2023-04-19 22:20:04 +08:00
|
|
|
} else if (message.event === 'export') {
|
2024-07-18 18:19:11 +08:00
|
|
|
drawEventExport(message as DrawioExportEventResponse);
|
2023-04-19 22:20:04 +08:00
|
|
|
} else if (message.event === 'configure') {
|
|
|
|
drawEventConfigure();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-08-23 21:16:20 +08:00
|
|
|
/**
|
|
|
|
* Attempt to prompt and restore unsaved drawing content if existing.
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
*/
|
|
|
|
async function attemptRestoreIfExists() {
|
|
|
|
const backupVal = await store.get(saveBackupKey);
|
|
|
|
const dialogEl = document.getElementById('unsaved-drawing-dialog');
|
|
|
|
|
|
|
|
if (!dialogEl) {
|
|
|
|
console.error('Missing expected unsaved-drawing dialog');
|
|
|
|
}
|
|
|
|
|
2024-07-18 18:19:11 +08:00
|
|
|
if (backupVal && dialogEl) {
|
|
|
|
const dialog = window.$components.firstOnElement(dialogEl, 'confirm-dialog') as ConfirmDialog;
|
2023-08-23 21:16:20 +08:00
|
|
|
const restore = await dialog.show();
|
|
|
|
if (restore) {
|
|
|
|
onInit = async () => backupVal;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-04-19 22:20:04 +08:00
|
|
|
/**
|
|
|
|
* Show the draw.io editor.
|
2023-08-23 02:30:39 +08:00
|
|
|
* onSaveCallback must return a promise that resolves on successful save and errors on failure.
|
|
|
|
* onInitCallback must return a promise with the xml to load for the editor.
|
2023-08-23 21:16:20 +08:00
|
|
|
* Will attempt to provide an option to restore unsaved changes if found to exist.
|
2024-07-18 18:19:11 +08:00
|
|
|
* onSaveCallback Is called with the drawing data on save.
|
2023-04-19 22:20:04 +08:00
|
|
|
*/
|
2024-07-18 18:19:11 +08:00
|
|
|
export async function show(drawioUrl: string, onInitCallback: () => Promise<string>, onSaveCallback: (data: string) => Promise<void>): Promise<void> {
|
2023-04-19 22:20:04 +08:00
|
|
|
onInit = onInitCallback;
|
|
|
|
onSave = onSaveCallback;
|
|
|
|
|
2023-08-23 21:16:20 +08:00
|
|
|
await attemptRestoreIfExists();
|
|
|
|
|
2023-04-19 22:20:04 +08:00
|
|
|
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);
|
|
|
|
lastApprovedOrigin = (new URL(drawioUrl)).origin;
|
2018-01-21 04:40:21 +08:00
|
|
|
}
|
|
|
|
|
2024-07-19 19:09:41 +08:00
|
|
|
export async function upload(imageData: string, pageUploadedToId: string): Promise<{id: number, url: string}> {
|
2023-04-19 05:20:02 +08:00
|
|
|
const data = {
|
2019-04-27 21:18:00 +08:00
|
|
|
image: imageData,
|
|
|
|
uploaded_to: pageUploadedToId,
|
|
|
|
};
|
2023-04-19 05:20:02 +08:00
|
|
|
const resp = await window.$http.post(window.baseUrl('/images/drawio'), data);
|
2024-07-19 19:09:41 +08:00
|
|
|
return resp.data as {id: number, url: string};
|
2019-04-27 21:18:00 +08:00
|
|
|
}
|
|
|
|
|
2023-04-19 22:20:04 +08:00
|
|
|
export function close() {
|
|
|
|
drawEventClose();
|
|
|
|
}
|
|
|
|
|
2019-05-04 22:48:15 +08:00
|
|
|
/**
|
|
|
|
* Load an existing image, by fetching it as Base64 from the system.
|
|
|
|
*/
|
2024-07-18 18:19:11 +08:00
|
|
|
export async function load(drawingId: string): Promise<string> {
|
2023-01-26 20:16:23 +08:00
|
|
|
try {
|
|
|
|
const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
|
2024-07-18 22:13:14 +08:00
|
|
|
const data = resp.data as {content: string};
|
|
|
|
return `data:image/png;base64,${data.content}`;
|
2023-01-26 20:16:23 +08:00
|
|
|
} catch (error) {
|
2024-07-18 22:13:14 +08:00
|
|
|
if (error instanceof HttpError) {
|
2023-01-26 20:16:23 +08:00
|
|
|
window.$events.showResponseError(error);
|
|
|
|
}
|
|
|
|
close();
|
|
|
|
throw error;
|
|
|
|
}
|
2019-05-04 22:48:15 +08:00
|
|
|
}
|