- Breaking change: Remove storagePromptClosed state boolean in favor of

`storagePromptState`; used by `ext-storage.js`
- Fix (regression): Ensure storage dialog will not be blocked because of
    canvas updating done for sake of centering background
- Fix (extensions): Ensure `langReady` changes are available by time prefs
  dialog is closed and that its changes have occurred by time extensions
  have first loaded (`setLang` now returns a Promise rather than `undefined`
  as it waits for extension's `langReady` to resolve); this is also useful
  with `ext-storage.js` so we know that `extensions_loaded` (which
  conditionally updates the canvas based on `storagePromptState`) has seen
  `langReady` and the storage extension hasn't set a `storagePromptState`
  of "waiting"

CHANGES.md

@@ -4,6 +4,8 @@
 - Breaking change: For checkbox for persisting choice of initial use storage
   approval in storage extension dialog, turn on by default for convenience of
   most users (must still hit "ok" and users can still turn off the checkbox)
+- Breaking change: Remove `storagePromptClosed` state boolean in favor of
+    `storagePromptState`; used by `ext-storage.js`
 - Fix: Map extension click events to "mousedown" so they can be received
     on touch devices (since `touch.js` changes `touchstart` to
     `mousedown`) (@ClemArt); closes #168
@@ -13,6 +15,14 @@
   retaining preference (and ensure language changes are available before
   dialog closed)
 - Fix: Centering of canvas wasn't being set at proper time; fixes #272
+- Fix (extensions): Ensure `langReady` changes are available by time prefs
+  dialog is closed and that its changes have occurred by time extensions
+  have first loaded (`setLang` now returns a Promise rather than `undefined`
+  as it waits for extension's `langReady` to resolve); this is also useful
+  with `ext-storage.js` so we know that `extensions_loaded` (which
+  conditionally updates the canvas based on `storagePromptState`) has seen
+  `langReady` and the storage extension hasn't set a `storagePromptState`
+  of "waiting"
 - Fix (regression): Extension locale loading for non-English locales
 - Enhancement: Allow "Escape" to work with hotkeys within text boxes;
   allows escaping out of source textarea (part of #291)

dist/extensions/ext-storage.js

@@ -76,7 +76,8 @@ var svgEditorExtension_storage = (function () {
           emptyStorageOnDecline = _svgEditor$curConfig.emptyStorageOnDecline,
           noStorageOnLoad = _svgEditor$curConfig.noStorageOnLoad,
           forceStorage = _svgEditor$curConfig.forceStorage;
-      var storage = svgEditor.storage;
+      var storage = svgEditor.storage,
+          updateCanvas = svgEditor.updateCanvas;
 
       function replaceStoragePrompt(val) {
         val = val ? 'storagePrompt=' + val : '';
@@ -304,12 +305,14 @@ var svgEditorExtension_storage = (function () {
                         //   the prompt gives the user the option to store data
 
                         setupBeforeUnloadListener();
-                        svgEditor.storagePromptClosed = true;
+                        svgEditor.storagePromptState = 'closed';
+                        updateCanvas(true);
                       }, null, null, {
                         label: rememberLabel,
                         checked: true,
                         tooltip: rememberTooltip
                       });
+                      svgEditor.storagePromptState = 'waiting';
                     } else if (!noStorageOnLoad || forceStorage) {
                       setupBeforeUnloadListener();
                     }

editor/extensions/ext-storage.js

@@ -47,7 +47,7 @@ export default {
       noStorageOnLoad,
       forceStorage
     } = svgEditor.curConfig;
-    const {storage} = svgEditor;
+    const {storage, updateCanvas} = svgEditor;
 
     function replaceStoragePrompt (val) {
       val = val ? 'storagePrompt=' + val : '';
@@ -255,7 +255,8 @@ export default {
               //   the prompt gives the user the option to store data
               setupBeforeUnloadListener();
 
-              svgEditor.storagePromptClosed = true;
+              svgEditor.storagePromptState = 'closed';
+              updateCanvas(true);
             },
             null,
             null,
@@ -265,6 +266,7 @@ export default {
               tooltip: rememberTooltip
             }
           );
+          svgEditor.storagePromptState = 'waiting';
         } else if (!noStorageOnLoad || forceStorage) {
           setupBeforeUnloadListener();
         }

editor/svg-editor.js

@@ -87,9 +87,10 @@ editor.langChanged = false;
 */
 editor.showSaveWarning = false;
 /**
-* @type {boolean}
+ * Will be set to a boolean by `ext-storage.js`
+ * @type {"ignore"|"waiting"|"closed"}
 */
-editor.storagePromptClosed = false; // For use with ext-storage.js
+editor.storagePromptState = 'ignore';
 
 const callbacks = [],
   /**
@@ -771,7 +772,7 @@ editor.init = function () {
   const extAndLocaleFunc = async function () {
     // const lang = ('lang' in curPrefs) ? curPrefs.lang : null;
     const {langParam, langData} = await editor.putLocale(null, goodLangs, curConfig);
-    setLang(langParam, langData);
+    await setLang(langParam, langData);
 
     try {
       await Promise.all(
@@ -819,7 +820,11 @@ editor.init = function () {
           $('.flyout_arrow_horiz:empty').each(function () {
             $(this).append($.getSvgIcon('arrow_right', true).width(5).height(5));
           });
-          updateCanvas(true);
+
+          if (editor.storagePromptState === 'ignore') {
+            updateCanvas(true);
+          }
+
           messageQueue.forEach(
             /**
              * @param {module:svgcanvas.SvgCanvas#event:message} messageObj
@@ -2091,7 +2096,7 @@ editor.init = function () {
       workarea.scroll();
     }
 
-    if (urldata.storagePrompt !== true && !editor.storagePromptClosed) {
+    if (urldata.storagePrompt !== true && editor.storagePromptState === 'ignore') {
       $('#dialog_box').hide();
     }
   };
@@ -2944,7 +2949,7 @@ editor.init = function () {
    * @listens module:svgcanvas.SvgCanvas#event:extension_added
    * @returns {Promise} Resolves to `undefined`
    */
-  const extAdded = function (win, ext) {
+  const extAdded = async function (win, ext) {
     if (!ext) {
       return;
     }
@@ -2954,7 +2959,7 @@ editor.init = function () {
     if (ext.langReady) {
       if (editor.langChanged) { // We check for this since the "lang" pref could have been set by storage
         const lang = $.pref('lang');
-        ext.langReady({
+        await ext.langReady({
           lang,
           uiStrings,
           importLocale: getImportLocale({defaultLang: lang, defaultName: ext.name})
@@ -4453,7 +4458,7 @@ editor.init = function () {
     const lang = $('#lang_select').val();
     if (lang !== $.pref('lang')) {
       const {langParam, langData} = await editor.putLocale(lang, goodLangs, curConfig);
-      setLang(langParam, langData);
+      await setLang(langParam, langData);
     }
 
     // set icon size
@@ -5721,6 +5726,7 @@ editor.init = function () {
     $('#tool_import').show().prepend(imgImport);
   }
 
+  updateCanvas(true);
   //  const revnums = 'svg-editor.js ($Rev$) ';
   //  revnums += svgCanvas.getVersion();
   //  $('#copyright')[0].setAttribute('title', revnums);
@@ -5732,9 +5738,9 @@ editor.init = function () {
   * @param {module:locale.LocaleStrings} allStrings See {@tutorial LocaleDocs}
   * @fires module:svgcanvas.SvgCanvas#event:ext-langReady
   * @fires module:svgcanvas.SvgCanvas#event:ext-langChanged
-  * @returns {undefined}
+  * @returns {Promise} A Promise which resolves to `undefined`
   */
-  const setLang = editor.setLang = function (lang, allStrings) {
+  const setLang = editor.setLang = async function (lang, allStrings) {
     editor.langChanged = true;
     $.pref('lang', lang);
     $('#lang_select').val(lang);
@@ -5761,7 +5767,7 @@ editor.init = function () {
       while (extsPreLang.length) {
         const ext = extsPreLang.shift();
         loadedExtensionNames.push(ext.name);
-        ext.langReady({
+        await ext.langReady({
           lang,
           uiStrings,
           importLocale: getImportLocale({defaultLang: lang, defaultName: ext.name})