Fix save changes before leaving the window

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

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 = () => {

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;
   }
 }

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) {