- Fix: Centering of canvas wasn't being set at proper time; fixes #272

- Refactoring: Avoid unneeded internal IIFEs; simplify w/h formula

CHANGES.md

@@ -12,6 +12,7 @@
 - Fix: Allow language to be properly set back to a different locale and
   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 (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)
@@ -20,6 +21,7 @@
 - Enhancement: Add a global escape key listener to clear the selection
 - Refactoring: Change 'a' to lower case in key command to avoid impression
   that shift is needed
+- Refactoring: Avoid unneeded internal IIFEs; simplify w/h formula
 - Refactoring: array extra/spread operator
 - npm: Update devDeps
 

dist/extensions/ext-storage.js

@@ -307,7 +307,7 @@ var svgEditorExtension_storage = (function () {
                         svgEditor.storagePromptClosed = true;
                       }, null, null, {
                         label: rememberLabel,
-                        checked: false,
+                        checked: true,
                         tooltip: rememberTooltip
                       });
                     } else if (!noStorageOnLoad || forceStorage) {

dist/index-es.js

@@ -20962,8 +20962,8 @@ function SvgCanvas(container, config) {
     var bg = $$9('#canvasBackground')[0];
     var oldX = svgcontent.getAttribute('x');
     var oldY = svgcontent.getAttribute('y');
-    var x = w / 2 - this.contentW * currentZoom / 2;
+    var x = (w - this.contentW * currentZoom) / 2;
-    var y = h / 2 - this.contentH * currentZoom / 2;
+    var y = (h - this.contentH * currentZoom) / 2;
     assignAttributes(svgcontent, {
       width: this.contentW * currentZoom,
       height: this.contentH * currentZoom,
@@ -28450,6 +28450,7 @@ editor.init = function () {
                 $$b('.flyout_arrow_horiz:empty').each(function () {
                   $$b(this).append($$b.getSvgIcon('arrow_right', true).width(5).height(5));
                 });
+                updateCanvas(true);
                 messageQueue.forEach(
                 /**
                  * @param {module:svgcanvas.SvgCanvas#event:message} messageObj
@@ -32441,33 +32442,31 @@ editor.init = function () {
   }; // Fix for Issue 781: Drawing area jumps to top-left corner on window resize (IE9)
 
   if (isIE()) {
-    (function () {
+    resetScrollPos = function resetScrollPos() {
-      resetScrollPos = function resetScrollPos() {
+      if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
-        if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
+        workarea[0].scrollLeft = curScrollPos.left;
-          workarea[0].scrollLeft = curScrollPos.left;
+        workarea[0].scrollTop = curScrollPos.top;
-          workarea[0].scrollTop = curScrollPos.top;
+      }
-        }
+    };
-      };
 
+    curScrollPos = {
+      left: workarea[0].scrollLeft,
+      top: workarea[0].scrollTop
+    };
+    $$b(window).resize(resetScrollPos);
+    editor.ready(function () {
+      // TODO: Find better way to detect when to do this to minimize
+      // flickering effect
+      setTimeout(function () {
+        resetScrollPos();
+      }, 500);
+    });
+    workarea.scroll(function () {
       curScrollPos = {
         left: workarea[0].scrollLeft,
         top: workarea[0].scrollTop
       };
-      $$b(window).resize(resetScrollPos);
+    });
-      editor.ready(function () {
-        // TODO: Find better way to detect when to do this to minimize
-        // flickering effect
-        setTimeout(function () {
-          resetScrollPos();
-        }, 500);
-      });
-      workarea.scroll(function () {
-        curScrollPos = {
-          left: workarea[0].scrollLeft,
-          top: workarea[0].scrollTop
-        };
-      });
-    })();
   }
 
   $$b(window).resize(function (evt) {
@@ -32478,20 +32477,16 @@ editor.init = function () {
     });
     setFlyoutPositions();
   });
+  workarea.scroll(function () {
+    // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
+    if ($$b('#ruler_x').length) {
+      $$b('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
+    }
 
-  (function () {
+    if ($$b('#ruler_y').length) {
-    workarea.scroll(function () {
+      $$b('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
-      // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
+    }
-      if ($$b('#ruler_x').length) {
+  });
-        $$b('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
-      }
-
-      if ($$b('#ruler_y').length) {
-        $$b('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
-      }
-    });
-  })();
-
   $$b('#url_notice').click(function () {
     $$b.alert(this.title);
   });
@@ -34047,14 +34042,11 @@ editor.init = function () {
     $$b('#tool_open').show().prepend(open);
     var imgImport = $$b('<input type="file">').change(importImage);
     $$b('#tool_import').show().prepend(imgImport);
-  } // $(function () {
+  } //  const revnums = 'svg-editor.js ($Rev$) ';
-
-
-  updateCanvas(true); // });
-  //  const revnums = 'svg-editor.js ($Rev$) ';
   //  revnums += svgCanvas.getVersion();
   //  $('#copyright')[0].setAttribute('title', revnums);
 
+
   var loadedExtensionNames = [];
   /**
   * @function module:SVGEditor.setLang

dist/index-umd.js

@@ -20968,8 +20968,8 @@
       var bg = $$9('#canvasBackground')[0];
       var oldX = svgcontent.getAttribute('x');
       var oldY = svgcontent.getAttribute('y');
-      var x = w / 2 - this.contentW * currentZoom / 2;
+      var x = (w - this.contentW * currentZoom) / 2;
-      var y = h / 2 - this.contentH * currentZoom / 2;
+      var y = (h - this.contentH * currentZoom) / 2;
       assignAttributes(svgcontent, {
         width: this.contentW * currentZoom,
         height: this.contentH * currentZoom,
@@ -28456,6 +28456,7 @@
                   $$b('.flyout_arrow_horiz:empty').each(function () {
                     $$b(this).append($$b.getSvgIcon('arrow_right', true).width(5).height(5));
                   });
+                  updateCanvas(true);
                   messageQueue.forEach(
                   /**
                    * @param {module:svgcanvas.SvgCanvas#event:message} messageObj
@@ -32447,33 +32448,31 @@
     }; // Fix for Issue 781: Drawing area jumps to top-left corner on window resize (IE9)
 
     if (isIE()) {
-      (function () {
+      resetScrollPos = function resetScrollPos() {
-        resetScrollPos = function resetScrollPos() {
+        if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
-          if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
+          workarea[0].scrollLeft = curScrollPos.left;
-            workarea[0].scrollLeft = curScrollPos.left;
+          workarea[0].scrollTop = curScrollPos.top;
-            workarea[0].scrollTop = curScrollPos.top;
+        }
-          }
+      };
-        };
 
+      curScrollPos = {
+        left: workarea[0].scrollLeft,
+        top: workarea[0].scrollTop
+      };
+      $$b(window).resize(resetScrollPos);
+      editor.ready(function () {
+        // TODO: Find better way to detect when to do this to minimize
+        // flickering effect
+        setTimeout(function () {
+          resetScrollPos();
+        }, 500);
+      });
+      workarea.scroll(function () {
         curScrollPos = {
           left: workarea[0].scrollLeft,
           top: workarea[0].scrollTop
         };
-        $$b(window).resize(resetScrollPos);
+      });
-        editor.ready(function () {
-          // TODO: Find better way to detect when to do this to minimize
-          // flickering effect
-          setTimeout(function () {
-            resetScrollPos();
-          }, 500);
-        });
-        workarea.scroll(function () {
-          curScrollPos = {
-            left: workarea[0].scrollLeft,
-            top: workarea[0].scrollTop
-          };
-        });
-      })();
     }
 
     $$b(window).resize(function (evt) {
@@ -32484,20 +32483,16 @@
       });
       setFlyoutPositions();
     });
+    workarea.scroll(function () {
+      // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
+      if ($$b('#ruler_x').length) {
+        $$b('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
+      }
 
-    (function () {
+      if ($$b('#ruler_y').length) {
-      workarea.scroll(function () {
+        $$b('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
-        // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
+      }
-        if ($$b('#ruler_x').length) {
+    });
-          $$b('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
-        }
-
-        if ($$b('#ruler_y').length) {
-          $$b('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
-        }
-      });
-    })();
-
     $$b('#url_notice').click(function () {
       $$b.alert(this.title);
     });
@@ -34053,14 +34048,11 @@
       $$b('#tool_open').show().prepend(open);
       var imgImport = $$b('<input type="file">').change(importImage);
       $$b('#tool_import').show().prepend(imgImport);
-    } // $(function () {
+    } //  const revnums = 'svg-editor.js ($Rev$) ';
-
-
-    updateCanvas(true); // });
-    //  const revnums = 'svg-editor.js ($Rev$) ';
     //  revnums += svgCanvas.getVersion();
     //  $('#copyright')[0].setAttribute('title', revnums);
 
+
     var loadedExtensionNames = [];
     /**
     * @function module:SVGEditor.setLang

editor/svg-editor.js

@@ -819,6 +819,7 @@ editor.init = function () {
           $('.flyout_arrow_horiz:empty').each(function () {
             $(this).append($.getSvgIcon('arrow_right', true).width(5).height(5));
           });
+          updateCanvas(true);
           messageQueue.forEach(
             /**
              * @param {module:svgcanvas.SvgCanvas#event:message} messageObj
@@ -2089,6 +2090,7 @@ editor.init = function () {
       updateRulers(cnvs, zoom);
       workarea.scroll();
     }
+
     if (urldata.storagePrompt !== true && !editor.storagePromptClosed) {
       $('#dialog_box').hide();
     }
@@ -4504,35 +4506,33 @@ editor.init = function () {
 
   // Fix for Issue 781: Drawing area jumps to top-left corner on window resize (IE9)
   if (isIE()) {
-    (() => {
+    resetScrollPos = function () {
-      resetScrollPos = function () {
+      if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
-        if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
+        workarea[0].scrollLeft = curScrollPos.left;
-          workarea[0].scrollLeft = curScrollPos.left;
+        workarea[0].scrollTop = curScrollPos.top;
-          workarea[0].scrollTop = curScrollPos.top;
+      }
-        }
+    };
-      };
 
+    curScrollPos = {
+      left: workarea[0].scrollLeft,
+      top: workarea[0].scrollTop
+    };
+
+    $(window).resize(resetScrollPos);
+    editor.ready(function () {
+      // TODO: Find better way to detect when to do this to minimize
+      // flickering effect
+      setTimeout(function () {
+        resetScrollPos();
+      }, 500);
+    });
+
+    workarea.scroll(function () {
       curScrollPos = {
         left: workarea[0].scrollLeft,
         top: workarea[0].scrollTop
       };
-
+    });
-      $(window).resize(resetScrollPos);
-      editor.ready(function () {
-        // TODO: Find better way to detect when to do this to minimize
-        // flickering effect
-        setTimeout(function () {
-          resetScrollPos();
-        }, 500);
-      });
-
-      workarea.scroll(function () {
-        curScrollPos = {
-          left: workarea[0].scrollLeft,
-          top: workarea[0].scrollTop
-        };
-      });
-    })();
   }
 
   $(window).resize(function (evt) {
@@ -4544,17 +4544,15 @@ editor.init = function () {
     setFlyoutPositions();
   });
 
-  (() => {
+  workarea.scroll(function () {
-    workarea.scroll(function () {
+    // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
-      // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
+    if ($('#ruler_x').length) {
-      if ($('#ruler_x').length) {
+      $('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
-        $('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
+    }
-      }
+    if ($('#ruler_y').length) {
-      if ($('#ruler_y').length) {
+      $('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
-        $('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
+    }
-      }
+  });
-    });
-  })();
 
   $('#url_notice').click(function () {
     $.alert(this.title);
@@ -5723,10 +5721,6 @@ editor.init = function () {
     $('#tool_import').show().prepend(imgImport);
   }
 
-  // $(function () {
-  updateCanvas(true);
-  // });
-
   //  const revnums = 'svg-editor.js ($Rev$) ';
   //  revnums += svgCanvas.getVersion();
   //  $('#copyright')[0].setAttribute('title', revnums);

editor/svgcanvas.js

@@ -7005,8 +7005,8 @@ this.updateCanvas = function (w, h) {
   const bg = $('#canvasBackground')[0];
   const oldX = svgcontent.getAttribute('x');
   const oldY = svgcontent.getAttribute('y');
-  const x = (w / 2 - this.contentW * currentZoom / 2);
+  const x = ((w - this.contentW * currentZoom) / 2);
-  const y = (h / 2 - this.contentH * currentZoom / 2);
+  const y = ((h - this.contentH * currentZoom) / 2);
 
   assignAttributes(svgcontent, {
     width: this.contentW * currentZoom,
@@ -7032,6 +7032,7 @@ this.updateCanvas = function (w, h) {
   }
 
   selectorManager.selectorParentGroup.setAttribute('transform', 'translate(' + x + ',' + y + ')');
+
   /**
   * Invoked upon updates to the canvas.
   * @event module:svgcanvas.SvgCanvas#event:ext-canvasUpdated

editor/xdomain-svgedit-config-iife.js

@@ -20965,8 +20965,8 @@
       var bg = $$9('#canvasBackground')[0];
       var oldX = svgcontent.getAttribute('x');
       var oldY = svgcontent.getAttribute('y');
-      var x = w / 2 - this.contentW * currentZoom / 2;
+      var x = (w - this.contentW * currentZoom) / 2;
-      var y = h / 2 - this.contentH * currentZoom / 2;
+      var y = (h - this.contentH * currentZoom) / 2;
       assignAttributes(svgcontent, {
         width: this.contentW * currentZoom,
         height: this.contentH * currentZoom,
@@ -28453,6 +28453,7 @@
                   $$b('.flyout_arrow_horiz:empty').each(function () {
                     $$b(this).append($$b.getSvgIcon('arrow_right', true).width(5).height(5));
                   });
+                  updateCanvas(true);
                   messageQueue.forEach(
                   /**
                    * @param {module:svgcanvas.SvgCanvas#event:message} messageObj
@@ -32444,33 +32445,31 @@
     }; // Fix for Issue 781: Drawing area jumps to top-left corner on window resize (IE9)
 
     if (isIE()) {
-      (function () {
+      resetScrollPos = function resetScrollPos() {
-        resetScrollPos = function resetScrollPos() {
+        if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
-          if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
+          workarea[0].scrollLeft = curScrollPos.left;
-            workarea[0].scrollLeft = curScrollPos.left;
+          workarea[0].scrollTop = curScrollPos.top;
-            workarea[0].scrollTop = curScrollPos.top;
+        }
-          }
+      };
-        };
 
+      curScrollPos = {
+        left: workarea[0].scrollLeft,
+        top: workarea[0].scrollTop
+      };
+      $$b(window).resize(resetScrollPos);
+      editor.ready(function () {
+        // TODO: Find better way to detect when to do this to minimize
+        // flickering effect
+        setTimeout(function () {
+          resetScrollPos();
+        }, 500);
+      });
+      workarea.scroll(function () {
         curScrollPos = {
           left: workarea[0].scrollLeft,
           top: workarea[0].scrollTop
         };
-        $$b(window).resize(resetScrollPos);
+      });
-        editor.ready(function () {
-          // TODO: Find better way to detect when to do this to minimize
-          // flickering effect
-          setTimeout(function () {
-            resetScrollPos();
-          }, 500);
-        });
-        workarea.scroll(function () {
-          curScrollPos = {
-            left: workarea[0].scrollLeft,
-            top: workarea[0].scrollTop
-          };
-        });
-      })();
     }
 
     $$b(window).resize(function (evt) {
@@ -32481,20 +32480,16 @@
       });
       setFlyoutPositions();
     });
+    workarea.scroll(function () {
+      // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
+      if ($$b('#ruler_x').length) {
+        $$b('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
+      }
 
-    (function () {
+      if ($$b('#ruler_y').length) {
-      workarea.scroll(function () {
+        $$b('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
-        // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
+      }
-        if ($$b('#ruler_x').length) {
+    });
-          $$b('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
-        }
-
-        if ($$b('#ruler_y').length) {
-          $$b('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
-        }
-      });
-    })();
-
     $$b('#url_notice').click(function () {
       $$b.alert(this.title);
     });
@@ -34050,14 +34045,11 @@
       $$b('#tool_open').show().prepend(open);
       var imgImport = $$b('<input type="file">').change(importImage);
       $$b('#tool_import').show().prepend(imgImport);
-    } // $(function () {
+    } //  const revnums = 'svg-editor.js ($Rev$) ';
-
-
-    updateCanvas(true); // });
-    //  const revnums = 'svg-editor.js ($Rev$) ';
     //  revnums += svgCanvas.getVersion();
     //  $('#copyright')[0].setAttribute('title', revnums);
 
+
     var loadedExtensionNames = [];
     /**
     * @function module:SVGEditor.setLang

svgedit-config-iife.js

@@ -20965,8 +20965,8 @@
       var bg = $$9('#canvasBackground')[0];
       var oldX = svgcontent.getAttribute('x');
       var oldY = svgcontent.getAttribute('y');
-      var x = w / 2 - this.contentW * currentZoom / 2;
+      var x = (w - this.contentW * currentZoom) / 2;
-      var y = h / 2 - this.contentH * currentZoom / 2;
+      var y = (h - this.contentH * currentZoom) / 2;
       assignAttributes(svgcontent, {
         width: this.contentW * currentZoom,
         height: this.contentH * currentZoom,
@@ -28453,6 +28453,7 @@
                   $$b('.flyout_arrow_horiz:empty').each(function () {
                     $$b(this).append($$b.getSvgIcon('arrow_right', true).width(5).height(5));
                   });
+                  updateCanvas(true);
                   messageQueue.forEach(
                   /**
                    * @param {module:svgcanvas.SvgCanvas#event:message} messageObj
@@ -32444,33 +32445,31 @@
     }; // Fix for Issue 781: Drawing area jumps to top-left corner on window resize (IE9)
 
     if (isIE()) {
-      (function () {
+      resetScrollPos = function resetScrollPos() {
-        resetScrollPos = function resetScrollPos() {
+        if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
-          if (workarea[0].scrollLeft === 0 && workarea[0].scrollTop === 0) {
+          workarea[0].scrollLeft = curScrollPos.left;
-            workarea[0].scrollLeft = curScrollPos.left;
+          workarea[0].scrollTop = curScrollPos.top;
-            workarea[0].scrollTop = curScrollPos.top;
+        }
-          }
+      };
-        };
 
+      curScrollPos = {
+        left: workarea[0].scrollLeft,
+        top: workarea[0].scrollTop
+      };
+      $$b(window).resize(resetScrollPos);
+      editor.ready(function () {
+        // TODO: Find better way to detect when to do this to minimize
+        // flickering effect
+        setTimeout(function () {
+          resetScrollPos();
+        }, 500);
+      });
+      workarea.scroll(function () {
         curScrollPos = {
           left: workarea[0].scrollLeft,
           top: workarea[0].scrollTop
         };
-        $$b(window).resize(resetScrollPos);
+      });
-        editor.ready(function () {
-          // TODO: Find better way to detect when to do this to minimize
-          // flickering effect
-          setTimeout(function () {
-            resetScrollPos();
-          }, 500);
-        });
-        workarea.scroll(function () {
-          curScrollPos = {
-            left: workarea[0].scrollLeft,
-            top: workarea[0].scrollTop
-          };
-        });
-      })();
     }
 
     $$b(window).resize(function (evt) {
@@ -32481,20 +32480,16 @@
       });
       setFlyoutPositions();
     });
+    workarea.scroll(function () {
+      // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
+      if ($$b('#ruler_x').length) {
+        $$b('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
+      }
 
-    (function () {
+      if ($$b('#ruler_y').length) {
-      workarea.scroll(function () {
+        $$b('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
-        // TODO: jQuery's scrollLeft/Top() wouldn't require a null check
+      }
-        if ($$b('#ruler_x').length) {
+    });
-          $$b('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
-        }
-
-        if ($$b('#ruler_y').length) {
-          $$b('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
-        }
-      });
-    })();
-
     $$b('#url_notice').click(function () {
       $$b.alert(this.title);
     });
@@ -34050,14 +34045,11 @@
       $$b('#tool_open').show().prepend(open);
       var imgImport = $$b('<input type="file">').change(importImage);
       $$b('#tool_import').show().prepend(imgImport);
-    } // $(function () {
+    } //  const revnums = 'svg-editor.js ($Rev$) ';
-
-
-    updateCanvas(true); // });
-    //  const revnums = 'svg-editor.js ($Rev$) ';
     //  revnums += svgCanvas.getVersion();
     //  $('#copyright')[0].setAttribute('title', revnums);
 
+
     var loadedExtensionNames = [];
     /**
     * @function module:SVGEditor.setLang