webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Lexical: Started converting drawio to TS

Browse Source 
Converted events service to TS as part of this.
This commit is contained in:
Dan Brown
2024-07-18 11:19:11 +01:00
parent 5002a89754
commit 634b0aaa07
9 changed files with 142 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
resources/js/services/drawio.js → resources/js/services/drawio.ts
View File

@ -1,17 +1,31 @@
// Docs: https://www.diagrams.net/doc/faq/embed-mode
import * as store from './store';
import {ConfirmDialog} from "../components";
let iFrame = null;
let lastApprovedOrigin;
let onInit;
let onSave;
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>;
const saveBackupKey = 'last-drawing-save';
function drawPostMessage(data) {
iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
function drawPostMessage(data: Record<any, any>): void {
iFrame?.contentWindow?.postMessage(JSON.stringify(data), lastApprovedOrigin);
}
function drawEventExport(message) {
function drawEventExport(message: DrawioExportEventResponse) {
store.set(saveBackupKey, message.data);
if (onSave) {
onSave(message.data).then(() => {
@ -20,7 +34,7 @@ function drawEventExport(message) {
}
}
function drawEventSave(message) {
function drawEventSave(message: DrawioSaveEventResponse) {
drawPostMessage({
action: 'export', format: 'xmlpng', xml: message.xml, spin: 'Updating drawing',
});
@ -35,8 +49,10 @@ function drawEventInit() {
function drawEventConfigure() {
const config = {};
window.$events.emitPublic(iFrame, 'editor-drawio::configure', {config});
drawPostMessage({action: 'configure', config});
if (iFrame) {
window.$events.emitPublic(iFrame, 'editor-drawio::configure', {config});
drawPostMessage({action: 'configure', config});
}
}
function drawEventClose() {
@ -47,9 +63,8 @@ function drawEventClose() {
/**
* Receive and handle a message event from the draw.io window.
* @param {MessageEvent} event
*/
function drawReceive(event) {
function drawReceive(event: MessageEvent) {
if (!event.data || event.data.length < 1) return;
if (event.origin !== lastApprovedOrigin) return;
@ -59,9 +74,9 @@ function drawReceive(event) {
} else if (message.event === 'exit') {
drawEventClose();
} else if (message.event === 'save') {
drawEventSave(message);
drawEventSave(message as DrawioSaveEventResponse);
} else if (message.event === 'export') {
drawEventExport(message);
drawEventExport(message as DrawioExportEventResponse);
} else if (message.event === 'configure') {
drawEventConfigure();
}
@ -79,9 +94,8 @@ async function attemptRestoreIfExists() {
console.error('Missing expected unsaved-drawing dialog');
}
if (backupVal) {
/** @var {ConfirmDialog} */
const dialog = window.$components.firstOnElement(dialogEl, 'confirm-dialog');
if (backupVal && dialogEl) {
const dialog = window.$components.firstOnElement(dialogEl, 'confirm-dialog') as ConfirmDialog;
const restore = await dialog.show();
if (restore) {
onInit = async () => backupVal;
@ -94,11 +108,9 @@ async function attemptRestoreIfExists() {
* 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.
* Will attempt to provide an option to restore unsaved changes if found to exist.
* @param {String} drawioUrl
* @param {Function<Promise<String>>} onInitCallback
* @param {Function<Promise>} onSaveCallback - Is called with the drawing data on save.
* onSaveCallback Is called with the drawing data on save.
*/
export async function show(drawioUrl, onInitCallback, onSaveCallback) {
export async function show(drawioUrl: string, onInitCallback: () => Promise<string>, onSaveCallback: (data: string) => Promise<void>): Promise<void> {
onInit = onInitCallback;
onSave = onSaveCallback;
@ -114,7 +126,7 @@ export async function show(drawioUrl, onInitCallback, onSaveCallback) {
lastApprovedOrigin = (new URL(drawioUrl)).origin;
}
export async function upload(imageData, pageUploadedToId) {
export async function upload(imageData: string, pageUploadedToId: string): Promise<{}|string> {
const data = {
image: imageData,
uploaded_to: pageUploadedToId,
@ -129,10 +141,8 @@ export function close() {
/**
* Load an existing image, by fetching it as Base64 from the system.
* @param drawingId
* @returns {Promise<string>}
*/
export async function load(drawingId) {
export async function load(drawingId: string): Promise<string> {
try {
const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
return `data:image/png;base64,${resp.data.content}`;

81
resources/js/services/events.js
View File

@ -1,81 +0,0 @@
const listeners = {};
const stack = [];
/**
* Emit a custom event for any handlers to pick-up.
* @param {String} eventName
* @param {*} eventData
*/
export function emit(eventName, eventData) {
stack.push({name: eventName, data: eventData});
const listenersToRun = listeners[eventName] || [];
for (const listener of listenersToRun) {
listener(eventData);
}
}
/**
* Listen to a custom event and run the given callback when that event occurs.
* @param {String} eventName
* @param {Function} callback
* @returns {Events}
*/
export function listen(eventName, callback) {
if (typeof listeners[eventName] === 'undefined') listeners[eventName] = [];
listeners[eventName].push(callback);
}
/**
* Emit an event for public use.
* Sends the event via the native DOM event handling system.
* @param {Element} targetElement
* @param {String} eventName
* @param {Object} eventData
*/
export function emitPublic(targetElement, eventName, eventData) {
const event = new CustomEvent(eventName, {
detail: eventData,
bubbles: true,
});
targetElement.dispatchEvent(event);
}
/**
* Emit a success event with the provided message.
* @param {String} message
*/
export function success(message) {
emit('success', message);
}
/**
* Emit an error event with the provided message.
* @param {String} message
*/
export function error(message) {
emit('error', message);
}
/**
* Notify of standard server-provided validation errors.
* @param {Object} responseErr
*/
export function showValidationErrors(responseErr) {
if (!responseErr.status) return;
if (responseErr.status === 422 && responseErr.data) {
const message = Object.values(responseErr.data).flat().join('\n');
error(message);
}
}
/**
* Notify standard server-provided error messages.
* @param {Object} responseErr
*/
export function showResponseError(responseErr) {
if (!responseErr.status) return;
if (responseErr.status >= 400 && responseErr.data && responseErr.data.message) {
error(responseErr.data.message);
}
}

71
resources/js/services/events.ts Normal file
View File

@ -0,0 +1,71 @@
export class EventManager {
protected listeners: Record<string, ((data: {}) => void)[]> = {};
protected stack: {name: string, data: {}}[] = [];
/**
* Emit a custom event for any handlers to pick-up.
*/
emit(eventName: string, eventData: {}): void {
this.stack.push({name: eventName, data: eventData});
const listenersToRun = this.listeners[eventName] || [];
for (const listener of listenersToRun) {
listener(eventData);
}
}
/**
* Listen to a custom event and run the given callback when that event occurs.
*/
listen(eventName: string, callback: (data: {}) => void): void {
if (typeof this.listeners[eventName] === 'undefined') this.listeners[eventName] = [];
this.listeners[eventName].push(callback);
}
/**
* Emit an event for public use.
* Sends the event via the native DOM event handling system.
*/
emitPublic(targetElement: Element, eventName: string, eventData: {}): void {
const event = new CustomEvent(eventName, {
detail: eventData,
bubbles: true,
});
targetElement.dispatchEvent(event);
}
/**
* Emit a success event with the provided message.
*/
success(message: string): void {
this.emit('success', message);
}
/**
* Emit an error event with the provided message.
*/
error(message: string): void {
this.emit('error', message);
}
/**
* Notify of standard server-provided validation errors.
*/
showValidationErrors(responseErr: {status?: number, data?: object}): void {
if (!responseErr.status) return;
if (responseErr.status === 422 && responseErr.data) {
const message = Object.values(responseErr.data).flat().join('\n');
this.error(message);
}
}
/**
* Notify standard server-provided error messages.
*/
showResponseError(responseErr: {status?: number, data?: {message?: string}}): void {
if (!responseErr.status) return;
if (responseErr.status >= 400 && responseErr.data && responseErr.data.message) {
this.error(responseErr.data.message);
}
}
}