From 09f04190d831a76e0515d9710885d6a4b9b807d4 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sun, 30 Jan 2022 18:00:42 -0800 Subject: [PATCH] Fix save changes before leaving the window --- docker-compose.snapshots.update.yml | 2 +- .../src/components/DesignerBuilder.ts | 2 +- .../components/widget/{IMenu.js => IMenu.ts} | 22 ++++++++++++------- .../mindplot/src/components/widget/Menu.ts | 20 ++++++++--------- 4 files changed, 25 insertions(+), 21 deletions(-) rename packages/mindplot/src/components/widget/{IMenu.js => IMenu.ts} (86%) diff --git a/docker-compose.snapshots.update.yml b/docker-compose.snapshots.update.yml index 0ebe1679..8eab2a22 100644 --- a/docker-compose.snapshots.update.yml +++ b/docker-compose.snapshots.update.yml @@ -3,7 +3,7 @@ services: e2e: image: cypress/included:8.4.1 container_name: wisemapping-integration-tests - entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"' + entrypoint: '/bin/sh -c "yarn install && yarn bootstrap && yarn build && yarn test:integration"' working_dir: /e2e environment: - CYPRESS_imageSnaphots=true diff --git a/packages/mindplot/src/components/DesignerBuilder.ts b/packages/mindplot/src/components/DesignerBuilder.ts index 794ec503..f0199551 100644 --- a/packages/mindplot/src/components/DesignerBuilder.ts +++ b/packages/mindplot/src/components/DesignerBuilder.ts @@ -53,7 +53,7 @@ export function buildDesigner(options: DesignerOptions): Designer { // Register toolbar event ... if ($('#toolbar').length) { - const menu = new Menu(designer, 'toolbar', options.mapId ? options.mapId : 'unknown'); + const menu = new Menu(designer, 'toolbar'); // If a node has focus, focus can be move to another node using the keys. designer.cleanScreen = () => { diff --git a/packages/mindplot/src/components/widget/IMenu.js b/packages/mindplot/src/components/widget/IMenu.ts similarity index 86% rename from packages/mindplot/src/components/widget/IMenu.js rename to packages/mindplot/src/components/widget/IMenu.ts index 8258e89c..1a4fbac8 100644 --- a/packages/mindplot/src/components/widget/IMenu.js +++ b/packages/mindplot/src/components/widget/IMenu.ts @@ -20,16 +20,22 @@ import { $msg } from '../Messages'; import PersistenceManager from '../PersistenceManager'; import { $notify } from './ToolbarNotifier'; import { $notifyModal } from './ModalDialogNotifier'; +import Designer from '../Designer'; +import ToolbarItem from './ToolbarItem'; class IMenu { - constructor(designer, containerId, mapId) { + private _designer: Designer; + + protected _toolbarElems: ToolbarItem[]; + + private _mindmapUpdated: boolean; + + constructor(designer: Designer, containerId: string) { $assert(designer, 'designer can not be null'); $assert(containerId, 'containerId can not be null'); this._designer = designer; this._toolbarElems = []; - this._containerId = containerId; - this._mapId = mapId; this._mindmapUpdated = false; const me = this; @@ -45,7 +51,7 @@ class IMenu { }); } - discardChanges(designer) { + discardChanges(designer: Designer) { // Avoid autosave before leaving the page .... this.setRequireChange(false); @@ -61,13 +67,13 @@ class IMenu { window.location.reload(); } - unlockMap(designer) { + unlockMap(designer: Designer) { const mindmap = designer.getMindmap(); const persistenceManager = PersistenceManager.getInstance(); persistenceManager.unlockMap(mindmap); } - save(saveElem, designer, saveHistory, sync) { + save(saveElem: JQuery, designer: Designer, saveHistory: boolean, sync?: boolean) { // Load map content ... const mindmap = designer.getMindmap(); const mindmapProp = designer.getMindmapProperties(); @@ -103,11 +109,11 @@ class IMenu { }, sync); } - isSaveRequired() { + isSaveRequired(): boolean { return this._mindmapUpdated; } - setRequireChange(value) { + setRequireChange(value: boolean) { this._mindmapUpdated = value; } } diff --git a/packages/mindplot/src/components/widget/Menu.ts b/packages/mindplot/src/components/widget/Menu.ts index bfd83810..3785a4cf 100644 --- a/packages/mindplot/src/components/widget/Menu.ts +++ b/packages/mindplot/src/components/widget/Menu.ts @@ -31,8 +31,8 @@ import AccountSettingsPanel from './AccountSettingsPanel'; import Designer from '../Designer'; class Menu extends IMenu { - constructor(designer: Designer, containerId: string, mapId: string, readOnly = false, baseUrl = '') { - super(designer, containerId, mapId); + constructor(designer: Designer, containerId: string, readOnly = false, baseUrl = '') { + super(designer, containerId); const saveElem = $('#save'); const widgetsBaseUrl = `${baseUrl}css/widget`; @@ -106,7 +106,7 @@ class Menu extends IMenu { } return result; }, - setValue(value:string) { + setValue(value: string) { designer.changeTopicShape(value); }, }; @@ -146,7 +146,7 @@ class Menu extends IMenu { } return result; }, - setValue(hex:string) { + setValue(hex: string) { designer.changeBackgroundColor(hex); }, }; @@ -171,7 +171,7 @@ class Menu extends IMenu { } return result; }, - setValue(hex) { + setValue(hex: string) { designer.changeBorderColor(hex); }, }; @@ -297,9 +297,7 @@ class Menu extends IMenu { Menu._registerTooltip('save', $msg('SAVE'), 'meta+S'); if (!readOnly) { - // To prevent the user from leaving the page with changes ... - // Element.NativeEvents.unload = 1; - $(window).bind('unload', () => { + $(window).bind('beforeunload', () => { if (this.isSaveRequired()) { this.save(saveElem, designer, false, true); } @@ -374,7 +372,7 @@ class Menu extends IMenu { this._registerEvents(designer); } - private _registerEvents(designer:Designer) { + private _registerEvents(designer: Designer) { // Register on close events ... this._toolbarElems.forEach((panel) => { panel.addEvent('show', () => { @@ -421,7 +419,7 @@ class Menu extends IMenu { }); } - private _addButton(buttonId:string, isTopic:boolean, isRelationship:boolean, fn) { + private _addButton(buttonId: string, isTopic: boolean, isRelationship: boolean, fn) { // Register Events ... let result = null; if ($(`#${buttonId}`)) { @@ -436,7 +434,7 @@ class Menu extends IMenu { return result; } - static _registerTooltip(buttonId: string, text: string, shortcut: string = null) { + private static _registerTooltip(buttonId: string, text: string, shortcut: string = null) { if ($(`#${buttonId}`)) { let tooltip = text; if (shortcut) {