azure-maps-control 2.2.5 → 2.2.7

package/dist/atlas-core-bare-snr.js

@@ -265,7 +265,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         return Url;
     }());
 
-    var version = "2.2.5";
+    var version = "2.2.7";
 
     /**
      * A helper class that provides methods for getting various forms of the map controls current version.
@@ -645,7 +645,6 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
          * Build the outermost container for the control, applies styling including any listeners for auto styling.
          */
         ControlBase.prototype.buildContainer = function (map, style, ariaLabel, tagName) {
-            var _this = this;
             this._map = map;
             this._container = document.createElement(tagName || "div");
             this._container.classList.add("azure-maps-control-container");
@@ -654,11 +653,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             }
             // Set the style or add the auto listener.
             if (style.toLowerCase() === exports.ControlStyle.auto) {
-                this._map.styles.definitions().then(function (definitions) {
-                    if (_this._map) {
-                        _this._map.events.add("stylechanged", _this._onStyleChange);
-                    }
-                });
+                if (this._map) {
+                    this._map.events.add("stylechanged", this._onStyleChange);
+                }
             }
             else {
                 this._container.classList.add(style);
@@ -4436,6 +4433,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             _this.hasFocus = false;
             _this.styleButtons = new Dictionary();
             _this.styleIcons = new Dictionary();
+            // we need to rely on this to avoid potentially redundant thumbnail requests and .blob calls
+            _this.thumbnailCache = {
+                assumedConfiguration: undefined,
+                response: new Dictionary(),
+                blob: new Dictionary()
+            };
             /**
              * Callback handler for the style changing.
              */
@@ -4449,6 +4452,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 if (!_this.styleOpsGrid) {
                     return;
                 }
+                // do not recreate the styleOpsGrid if it is initialized and configuration object reference has not changed
+                if (_this.styleOpsGrid.children.length > 0 && _this.thumbnailCache.assumedConfiguration === definitions) {
+                    return;
+                }
+                _this.thumbnailCache.assumedConfiguration = definitions;
                 Array.from(_this.styleOpsGrid.children).forEach(function (element) { return element.remove(); });
                 _this.styleButtons.clear();
                 _this.populateOpsGridFromDefinitions(definitions);
@@ -4554,6 +4562,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             _super.prototype.onRemove.call(this);
             this.styleOpsGrid = null;
             this.styleButtons.clear();
+            this.thumbnailCache.response.clear();
+            this.thumbnailCache.blob.clear();
+            this.thumbnailCache.assumedConfiguration = undefined;
             this.map.events.remove("stylechanged", this.onStyleChange);
             this.map.events.remove("mapconfigurationchanged", this.onMapConfigurationChange);
         };
@@ -4613,7 +4624,18 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             styleOptionButton.setAttribute("type", "button");
             var styleIconImage = new Image();
             fetchIconPromise
-                .then(function (response) { return response.blob(); })
+                .then(function (response) {
+                if (_this.thumbnailCache.blob.has(response.url)) {
+                    return _this.thumbnailCache.blob.get(response.url);
+                }
+                else {
+                    // we need the response.clone() to allow reading over body multiple times since response objects are cached 
+                    // and can be reused across multiple invocations
+                    var blobPromise = response.clone().blob();
+                    _this.thumbnailCache.blob.set(response.url, blobPromise);
+                    return blobPromise;
+                }
+            })
                 .then(function (blob) {
                 var iconUrl = URL.createObjectURL(blob);
                 styleIconImage.src = iconUrl;
@@ -4721,7 +4743,14 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 if (mapServiceOptions.transformRequest) {
                     merge_1(requestParams, mapServiceOptions.transformRequest(requestParams.url, "Thumbnail"));
                 }
-                var fetchThumbnailPromise = fetch(requestParams.url, { headers: requestParams.headers });
+                var fetchThumbnailPromise;
+                if (_this.thumbnailCache.response.has(requestParams.url)) {
+                    fetchThumbnailPromise = Promise.resolve(_this.thumbnailCache.response.get(requestParams.url));
+                }
+                else {
+                    fetchThumbnailPromise = fetch(requestParams.url, { headers: requestParams.headers });
+                    _this.thumbnailCache.response.set(requestParams.url, fetchThumbnailPromise);
+                }
                 // Add button for each style
                 var styleOptionButton = _this.buildSelectStyleBtn(style.name, definitions, fetchThumbnailPromise);
                 _this.styleOpsGrid.appendChild(styleOptionButton);
@@ -9999,7 +10028,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         };
         ZoomControl.prototype.updateZoomButtonsState = function () {
             var zoomInDisabled = this.map.getCamera().zoom >= this.map._getMap().getMaxZoom();
-            // small values need special handling, since depending on the height of the map view 
+            // small values need special handling, since depending on the height of the map view
             // the actual zoom we can zoom out to can be above or below 0 when the entire map fits the height into the view
             // use web mercator bounds to check if entire latitude range is visible
             var reachedLatitudeBoundaries = BoundingBox.getSouth(this.map.getCamera().bounds) <= -WEBMERCATOR_MAXLAT
@@ -10011,7 +10040,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             }
             if (this.zoomOutButton && this.zoomOutButton.disabled != zoomOutDisabled) {
                 this.zoomOutButton.disabled = zoomOutDisabled;
-                this.zoomInButton.setAttribute("aria-label", zoomInDisabled ? "Zoom Out disabled" : "Zoom Out");
+                this.zoomOutButton.setAttribute("aria-label", zoomInDisabled ? "Zoom Out disabled" : "Zoom Out");
             }
         };
         ZoomControl.prototype.constructZoomInButton = function (map) {
@@ -11280,44 +11309,58 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             var _this = _super.call(this, id) || this;
             _this.accessibleIndicator = [];
             _this.setAccessibleIndicator = function () { return __awaiter$1(_this, void 0, void 0, function () {
-                var features, createIndicator, insertHiddenBefore, attach;
+                var renderedShapes, createIndicator, insertHiddenBefore, insertHiddenInFront, attach;
                 var _this = this;
                 return __generator$1(this, function (_a) {
                     this.accessibleIndicator.forEach(function (indicator) { return indicator.remove(); });
                     this.accessibleIndicator = [];
-                    features = this.map.layers.getRenderedShapes(this.map.getCamera().bounds, this);
-                    createIndicator = function (features, idx) {
-                        var bubbleFeature = features[idx];
-                        var indicator = new AccessibleIndicator({ positionInSet: idx + 1, setSize: features.length });
+                    renderedShapes = this.map.layers.getRenderedShapes(this.map.getCamera().bounds, this);
+                    createIndicator = function (renderedShapes, idx) {
+                        var curRenderedShape = renderedShapes[idx];
+                        var bubbleFeature = curRenderedShape instanceof Shape ? curRenderedShape.toJson() : curRenderedShape;
+                        var indicator = new AccessibleIndicator({ positionInSet: idx + 1, setSize: renderedShapes.length });
                         var element = indicator.getElement();
-                        var _a = __read$3(_this.map.positionsToPixels([bubbleFeature.data.geometry.coordinates]), 1), pixel = _a[0];
+                        var _a = __read$3(_this.map.positionsToPixels([_this.getFirstCoordinate(bubbleFeature.geometry.coordinates)]), 1), pixel = _a[0];
                         element.addEventListener('focusin', function (event) {
-                            _this.accessibleIndicator.filter(function (p) { return p !== indicator; }).forEach(function (popup) { return popup.remove(); });
+                            _this.accessibleIndicator.filter(function (i) { return i !== indicator; }).forEach(function (indicator) { return indicator.remove(); });
                             // insert previous and next popups
                             if (idx - 1 >= 0) {
-                                insertHiddenBefore(indicator, createIndicator(features, idx - 1));
+                                insertHiddenBefore(indicator, createIndicator(renderedShapes, idx - 1));
+                            }
+                            if (idx + 1 < renderedShapes.length) {
+                                attach(createIndicator(renderedShapes, idx + 1));
                             }
-                            if (idx + 1 < features.length) {
-                                attach(createIndicator(features, idx + 1));
+                            // if we are on boundaries: add the first / last indicator 
+                            // to maintain indicators on full page navigation cycle
+                            if (idx >= 2 && idx == renderedShapes.length - 1) {
+                                insertHiddenInFront(createIndicator(renderedShapes, 0));
+                            }
+                            if (idx == 0 && renderedShapes.length >= 2) {
+                                attach(createIndicator(renderedShapes, renderedShapes.length - 1));
+                            }
+                            // NOTE: a11y only works for AZM shapes for now. (.id and _azureMapsShapeId required)
+                            if (bubbleFeature.id !== undefined) {
+                                _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', '_azureMapsShapeId'], bubbleFeature.id], '#000000', _this.options.strokeColor]);
                             }
-                            _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', '_azureMapsShapeId'], bubbleFeature.data.id], '#000000', _this.options.strokeColor]);
                             var focusEvent = {
                                 target: element,
                                 type: 'focusin',
                                 map: _this.map,
-                                shape: bubbleFeature,
+                                shape: curRenderedShape,
                                 originalEvent: event,
                                 pixel: pixel
                             };
                             _this._invokeEvent('focusin', focusEvent);
                         });
                         element.addEventListener('focusout', function (event) {
-                            _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', '_azureMapsShapeId'], bubbleFeature.data.id], _this.options.strokeColor, _this.options.strokeColor]);
+                            if (bubbleFeature.id !== undefined) {
+                                _this.map._getMap().setPaintProperty(_this.id, 'circle-stroke-color', ['case', ['==', ['get', '_azureMapsShapeId'], bubbleFeature.id], _this.options.strokeColor, _this.options.strokeColor]);
+                            }
                             var focusEvent = {
                                 target: element,
                                 type: 'focusout',
                                 map: _this.map,
-                                shape: bubbleFeature,
+                                shape: curRenderedShape,
                                 originalEvent: event,
                                 pixel: pixel
                             };
@@ -11332,14 +11375,20 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                         var baseElement = base.getElement();
                         baseElement.parentElement.insertBefore(elementToSwapIn, baseElement);
                     };
+                    insertHiddenInFront = function (toInsert) {
+                        toInsert.attach(_this.map);
+                        var elementToSwapIn = toInsert.getElement();
+                        var parent = elementToSwapIn.parentElement;
+                        parent.insertBefore(elementToSwapIn, parent.firstElementChild);
+                    };
                     attach = function (popup) {
                         popup.attach(_this.map);
                     };
-                    if (features.length > 0) {
-                        attach(createIndicator(features, 0));
+                    if (renderedShapes.length > 0) {
+                        attach(createIndicator(renderedShapes, 0));
                     }
-                    if (features.length > 1) {
-                        attach(createIndicator(features, features.length - 1));
+                    if (renderedShapes.length > 1) {
+                        attach(createIndicator(renderedShapes, renderedShapes.length - 1));
                     }
                     return [2 /*return*/];
                 });
@@ -11399,11 +11448,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             }
         };
         BubbleLayer.prototype.onRemove = function () {
-            _super.prototype.onRemove.call(this);
             if (this.options.createIndicators) {
                 this.map.events.remove('idle', this.setAccessibleIndicator);
                 this.map.events.remove('moveend', this.setAccessibleIndicator);
             }
+            _super.prototype.onRemove.call(this);
         };
         /**
          * @internal
@@ -11456,6 +11505,17 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 ids.add(this.options.source);
             return ids;
         };
+        /**
+         * The coordinates can be nested, so we need to get the first coordinate.
+         * @param coordinates The property from the Geometry. Can be Position, Position[], Position[][], etc.
+         * @returns
+         */
+        BubbleLayer.prototype.getFirstCoordinate = function (coordinates) {
+            if (!Array.isArray(coordinates[0])) {
+                return coordinates;
+            }
+            return this.getFirstCoordinate(coordinates[0]);
+        };
         return BubbleLayer;
     }(Layer));
 
@@ -17308,7 +17368,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                             this._removeListener(eventType, target, callback);
                         }
                         else {
-                            target._removeEventListener(eventType, callback);
+                            target === null || target === void 0 ? void 0 : target._removeEventListener(eventType, callback);
                         }
                     }
                 }
@@ -18118,9 +18178,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
         LayerManager.prototype.clear = function () {
             for (var layerIndexIndex = this.layerIndex.length - 1; layerIndexIndex >= 0; layerIndexIndex--) {
                 var tempLayer = this.layerIndex[layerIndexIndex];
-                this._removeMapboxLayers(tempLayer, true);
-                this.layerIndex.splice(layerIndexIndex, 1);
-                tempLayer.onRemove();
+                if (tempLayer) {
+                    this._removeMapboxLayers(tempLayer, true);
+                    this.layerIndex.splice(layerIndexIndex, 1);
+                    tempLayer.onRemove();
+                }
             }
             this.userLayers = [];
         };
@@ -20527,7 +20589,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 return baseName in styleNamesMap ? styleNamesMap[baseName] : baseName;
             };
             if (!this.serviceOptions.mapConfiguration) {
-                newPromise = new HijackablePromise(this._request(this.serviceOptions.staticAssetsDomain, constants.stylePath + "/" + constants.styleResourcePath, "StyleDefinitions", { version: this.serviceOptions.styleDefinitionsVersion }).then(function (definitions) { return ({
+                var ensureAuthentication = this.map.authentication ? this.map.authentication.initialize() : Promise.resolve();
+                newPromise = new HijackablePromise(ensureAuthentication.then(function () { return _this._request(_this.serviceOptions.staticAssetsDomain, constants.stylePath + "/" + constants.styleResourcePath, "StyleDefinitions", { version: _this.serviceOptions.styleDefinitionsVersion }).then(function (definitions) { return ({
                     version: isNaN(definitions.version) ? 0 : parseFloat(definitions.version),
                     defaultConfiguration: definitions.defaultStyle,
                     configurations: definitions.styles
@@ -20566,12 +20629,13 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                             protocol: "https"
                         }).toString(),
                     }); })
-                }); }));
+                }); }); }));
             }
             else if (typeof this.serviceOptions.mapConfiguration === 'string') {
-                newPromise = new HijackablePromise(this._request(this.serviceOptions.domain, constants.styleResourcePath + "/mapconfigurations/metadata/" + this.serviceOptions.mapConfiguration, "StyleDefinitions"
+                var ensureAuthentication = this.map.authentication ? this.map.authentication.initialize() : Promise.resolve();
+                newPromise = new HijackablePromise(ensureAuthentication.then(function () { return _this._request(_this.serviceOptions.domain, constants.styleResourcePath + "/mapconfigurations/metadata/" + _this.serviceOptions.mapConfiguration, "StyleDefinitions"
                 // reassign properties from legacy mapConfiguration to new structure if needed
-                ).then(function (definitions) { return (__assign$8(__assign$8({}, definitions), { defaultConfiguration: definitions.defaultConfiguration || definitions['defaultStyle'], configurations: definitions.configurations || definitions['styles'] })); }));
+                ).then(function (definitions) { return (__assign$8(__assign$8({}, definitions), { defaultConfiguration: definitions.defaultConfiguration || definitions['defaultStyle'], configurations: definitions.configurations || definitions['styles'] })); }); }));
             }
             else {
                 newPromise = HijackablePromise.resolve(this.serviceOptions.mapConfiguration);
@@ -20695,6 +20759,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
          */
         StyleManager.prototype._stylePatch = function (previousStyle, nextStyle, preserveLayer, updatePaintProperty, updateLayoutProperty, updateFilter) {
             var _this = this;
+            // Skip the style patch if the map has been disposed.
+            if (this.map.isDisposed)
+                return;
             // Layers in the next style with default properties that do not align with current StyleOptions
             // should be modified before they are applied to the map.
             var styleOptions = this.map.getStyle();
@@ -20802,7 +20869,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                     before = (beforeCandidates.length > 0) ? beforeCandidates[0] : undefined;
                 }
                 preserveLayer(userLayer.layer.getId(), before === null || before === void 0 ? void 0 : before.id);
-                _this.map.layers.move(userLayer.layer, userLayer.before);
+                _this.map.layers.move(userLayer.layer.getId(), userLayer.before);
             });
             this.map.sources._syncSources(nextStyle.sources);
             // If there was a previous styledata change event attached, remove it.
@@ -21267,9 +21334,10 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
                 _this._setAutoResize(_this.styleOptions.autoResize);
                 _this.map.showTileBoundaries = _this.styleOptions.showTileBoundaries;
                 _this.localizedStringsPromise = Localizer.getStrings(_this.styleOptions.language);
-                var stylesInit = _this.styles.initStyleset();
-                Promise.all([authManInit, stylesInit]).then(function (_a) {
-                    var _b = __read$e(_a, 2), _ = _b[0], definitions = _b[1];
+                authManInit
+                    // reuses this.styles.initPromise if initStyleset is already called
+                    .then(function () { return _this.styles.definitions(); })
+                    .then(function (definitions) {
                     // Check that the map hasn't been removed for any reason.
                     // If so no need to finish styling the map.
                     if (_this.removed) {
@@ -21332,6 +21400,16 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             }
             return _this;
         }
+        Object.defineProperty(Map.prototype, "isDisposed", {
+            /**
+             * Returns true if the map has been disposed.
+             */
+            get: function () {
+                return this.removed;
+            },
+            enumerable: false,
+            configurable: true
+        });
         /**
          * Returns the HTMLCanvasElement that the map is drawn to.
          */
@@ -21368,9 +21446,17 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
             else {
                 this.accessibleMapDelegate.removeFromMap();
             }
-            if (this.styles.serviceOptions.mapConfiguration !== this.serviceOptions.mapConfiguration) {
+            var shouldReloadStyle = this.styles.serviceOptions.mapConfiguration !== this.serviceOptions.mapConfiguration
+                || this.styles.serviceOptions.staticAssetsDomain !== this.serviceOptions.staticAssetsDomain
+                || this.styles.serviceOptions.styleDefinitionsVersion !== this.serviceOptions.styleDefinitionsVersion
+                || this.styles.serviceOptions.domain !== this.serviceOptions.domain
+                || this.styles.serviceOptions.styleAPIVersion !== this.serviceOptions.styleAPIVersion;
+            // NOTE: only perform a reload when the style dependent properties are changed
+            //|| this.styles.serviceOptions.validateStyle !== this.serviceOptions.validateStyle
+            //|| this.styles.serviceOptions.transformRequest !== this.serviceOptions.transformRequest
+            this.styles.serviceOptions = this.serviceOptions;
+            if (shouldReloadStyle) {
                 this.styles.initPromise = null;
-                this.styles.serviceOptions.mapConfiguration = this.serviceOptions.mapConfiguration;
                 this.setStyle({});
             }
         };