Advanced Javascript topics

Correctly exiting a GUI

When exiting a GUI, you might have to properly clean up what some Javascript code could have done. In the leaflet example from the previous tutorials, it is a great practice to gracefully remove the map.

To help with that, there is a Javascript event named willLeaveStep, and it is called before leaving a GUI step, allowing you to clean up things.

For example, with leaflet, we could implement this:

RPGM.on('willLeaveStep', ()=>{
    if(window.mapInstance){ // Check we have a valid pointer
        window.mapInstance.remove();
        window.mapInstance = null;
    }
});

So that the leaflet map is correctly removed from memory and gracefully removed from the interface.

Correctly cleaning your app

When exiting an app, just like when exiting a GUI step, you should correctly clean up your Javascript code. In RPGM Client 4.x, every app launched will use and reuse the same Javascript context. This means some apps might not work properly if they are executed several times in the same RPGM Client instance, if they use some JS code and don't properly clean up.

For example, when including leaflet.js as a custom JS file in an app, this will load the leaflet.js file in the memory and populate the Javascript context with a global L variable, which holds the whole leaflet module. When exiting the app, RPGM removes the leaflet.js file but does not know that Leaflet has set the L variable: you have to remove it yourself because some other apps could need to use this L variable.

For this, there is a RPGM Javascript event called willDispose that is called just before exiting an entire app.

For our leaflet example, we could do:

RPGM.on('willDispose', ()=>{
    window.L = null; // delete leaflet
});

So that Leaflet is correctly removed from the Javascript context and leaves the memory space and variable name is free for other apps.