Capture map calls before map has been rendered (#771)

NEWS

@@ -7,7 +7,9 @@ FEATURES
 BUG FIXES and IMPROVEMENTS
 * Enable JS function literals (wrapped in `htmlwidgets::JS()`) to be included in arguments to methods invoked on `leafletProxy` objects. (JS function literals could already be included with methods invoked on `leaflet` objects, so this change just brings `leafletProxy` to parity.) (#420)
 
-* Add missing CSS rule to show `<img>` in right-pane and left-pane (rstudio/rmarkdown/issues#1949).
+* Add missing CSS rule to show `<img>` in right-pane and left-pane (rstudio/rmarkdown/issues#1949, #770)
+
+* Allow for _hidden_ but not suspended leaflet maps to queue calls (such as add raster images) until they are rendered. If a new leaflet map is created, all pending calls are removed. (#771)
 
 leaflet 2.0.4.1
 --------------------------------------------------------------------------------

inst/htmlwidgets/leaflet.js

@@ -454,7 +454,7 @@ _leaflet2["default"].TileLayer.WMS.prototype.initialize = function (urlTemplate,
 
 
 },{"./global/leaflet":10}],8:[function(require,module,exports){
-(function (global){(function (){
+(function (global){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -463,9 +463,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = global.HTMLWidgets;
 
 
-}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{}],9:[function(require,module,exports){
-(function (global){(function (){
+(function (global){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -474,9 +474,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = global.jQuery;
 
 
-}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{}],10:[function(require,module,exports){
-(function (global){(function (){
+(function (global){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -485,9 +485,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = global.L;
 
 
-}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{}],11:[function(require,module,exports){
-(function (global){(function (){
+(function (global){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -496,9 +496,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = global.L.Proj;
 
 
-}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{}],12:[function(require,module,exports){
-(function (global){(function (){
+(function (global){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -507,7 +507,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = global.Shiny;
 
 
-}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{}],13:[function(require,module,exports){
 "use strict";
 
@@ -720,10 +720,6 @@ _htmlwidgets2["default"].widget({
         // are off. Therefore we wait until the map is actually showing to
         // render the value (we rely on the resize() callback being invoked
         // at the appropriate time).
-        //
-        // There may be an issue with leafletProxy() calls being made while
-        // the map is not being viewed--not sure what the right solution is
-        // there.
         if (el.offsetWidth === 0 || el.offsetHeight === 0) {
           map.leafletr.pendingRenderData = data;
           return;
@@ -842,6 +838,15 @@ if (_htmlwidgets2["default"].shinyMode) {
     if (!map) {
       (0, _util.log)("Couldn't find map with id " + id);
       return;
+    } // If the map has not rendered, stash the proposed `leafletProxy()` calls
+    // in `pendingRenderData.calls` to be run on display via `doRenderValue()`.
+    // This is necessary if the map has not been rendered.
+    // If new pendingRenderData is set via a new `leaflet()`, the previous calls will be discarded.
+
+
+    if (!map.leafletr.hasRendered) {
+      map.leafletr.pendingRenderData.calls = map.leafletr.pendingRenderData.calls.concat(data.calls);
+      return;
     }
 
     for (var i = 0; i < data.calls.length; i++) {
@@ -863,7 +868,7 @@ if (_htmlwidgets2["default"].shinyMode) {
 
 
 },{"./cluster-layer-store":1,"./control-store":2,"./crs_utils":3,"./dataframe":4,"./fixup-default-icon":5,"./fixup-default-tooltip":6,"./fixup-url-protocol":7,"./global/htmlwidgets":8,"./global/jquery":9,"./global/leaflet":10,"./global/shiny":12,"./layer-manager":14,"./methods":15,"./util":17}],14:[function(require,module,exports){
-(function (global){(function (){
+(function (global){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -1320,9 +1325,9 @@ var LayerManager = /*#__PURE__*/function () {
 exports["default"] = LayerManager;
 
 
-}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{"./global/jquery":9,"./global/leaflet":10,"./util":17}],15:[function(require,module,exports){
-(function (global){(function (){
+(function (global){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -2641,7 +2646,7 @@ methods.createMapPane = function (name, zIndex) {
 };
 
 
-}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{"./cluster-layer-store":1,"./crs_utils":3,"./dataframe":4,"./global/htmlwidgets":8,"./global/jquery":9,"./global/leaflet":10,"./global/shiny":12,"./mipmapper":16,"./util":17}],16:[function(require,module,exports){
 "use strict";
 

javascript/src/index.js

@@ -174,10 +174,6 @@ HTMLWidgets.widget({
         // are off. Therefore we wait until the map is actually showing to
         // render the value (we rely on the resize() callback being invoked
         // at the appropriate time).
-        //
-        // There may be an issue with leafletProxy() calls being made while
-        // the map is not being viewed--not sure what the right solution is
-        // there.
         if (el.offsetWidth === 0 || el.offsetHeight === 0) {
           map.leafletr.pendingRenderData = data;
           return;
@@ -290,6 +286,14 @@ if (HTMLWidgets.shinyMode) {
       return;
     }
 
+    // If the map has not rendered, stash the proposed `leafletProxy()` calls
+    // in `pendingRenderData.calls` to be run on display via `doRenderValue()`.
+    // This is necessary if the map has not been rendered.
+    // If new pendingRenderData is set via a new `leaflet()`, the previous calls will be discarded.
+    if (!map.leafletr.hasRendered) {
+      map.leafletr.pendingRenderData.calls = map.leafletr.pendingRenderData.calls.concat(data.calls);
+      return;
+    }
     for (let i = 0; i < data.calls.length; i++) {
       let call = data.calls[i];
       let args = call.args;