@syncfusion/ej2-maps 20.1.47 → 20.1.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7173,6 +7173,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
7173
7173
  * Resize the map
7174
7174
  */
7175
7175
  _this.isResize = false;
7176
+ /**
7177
+ * @private
7178
+ */
7179
+ _this.isReset = false;
7176
7180
  /** @private */
7177
7181
  _this.baseSize = new Size(0, 0);
7178
7182
  /** @public */
@@ -8445,6 +8449,7 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
8445
8449
  _this.refreshing = true;
8446
8450
  _this.wireEVents();
8447
8451
  _this.render();
8452
+ _this.refreshing = false;
8448
8453
  }, 500);
8449
8454
  }
8450
8455
  }
@@ -8843,7 +8848,10 @@ var Maps = /** @__PURE__ @class */ (function (_super) {
8843
8848
  var collection = Object.keys(newProp.layers[x]);
8844
8849
  for (var _b = 0, collection_1 = collection; _b < collection_1.length; _b++) {
8845
8850
  var collectionProp = collection_1[_b];
8846
- if (collectionProp === 'markerSettings') {
8851
+ if (collectionProp === 'layerType' && newProp.layers[x].layerType === 'OSM') {
8852
+ this.isReset = true;
8853
+ }
8854
+ else if (collectionProp === 'markerSettings') {
8847
8855
  isMarker = true;
8848
8856
  }
8849
8857
  else if (collectionProp === 'staticMapType') {
@@ -13283,8 +13291,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
13283
13291
  translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
13284
13292
  map.translatePoint = new Point(translatePointX, translatePointY);
13285
13293
  map.scale = newZoomFactor;
13286
- this.triggerZoomEvent(prevTilePoint, prevLevel, type);
13287
- this.applyTransform();
13294
+ if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
13295
+ map.translatePoint = map.previousPoint;
13296
+ map.scale = map.previousScale;
13297
+ }
13298
+ else {
13299
+ this.applyTransform();
13300
+ }
13288
13301
  }
13289
13302
  else if ((map.isTileMap) && (newZoomFactor >= minZoom && newZoomFactor <= maxZoom)) {
13290
13303
  this.getTileTranslatePosition(prevLevel, newZoomFactor, position, type);
@@ -13301,31 +13314,38 @@ var Zoom = /** @__PURE__ @class */ (function () {
13301
13314
  }
13302
13315
  map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
13303
13316
  map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
13304
- this.triggerZoomEvent(prevTilePoint, prevLevel, type);
13305
- if (document.querySelector('.GroupElement')) {
13306
- document.querySelector('.GroupElement').style.display = 'none';
13317
+ if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
13318
+ map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
13319
+ map.scale = map.previousScale;
13320
+ map.tileZoomLevel = prevLevel;
13321
+ map.zoomSettings.zoomFactor = map.previousScale;
13307
13322
  }
13308
- if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
13309
- document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
13323
+ else {
13324
+ if (document.querySelector('.GroupElement')) {
13325
+ document.querySelector('.GroupElement').style.display = 'none';
13326
+ }
13327
+ if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
13328
+ document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
13329
+ }
13330
+ this.markerLineAnimation(map);
13331
+ map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
13332
+ var element1 = document.getElementById(this.maps.element.id + '_tiles');
13333
+ var animationDuration = this.maps.layersCollection[0].animationDuration;
13334
+ setTimeout(function () {
13335
+ // if (type === 'ZoomOut') {
13336
+ // element1.removeChild(element1.children[element1.childElementCount - 1]);
13337
+ // if (element1.childElementCount) {
13338
+ // element1.removeChild(element1.children[element1.childElementCount - 1]);
13339
+ // } else {
13340
+ // element1 = element1;
13341
+ // }
13342
+ // }
13343
+ _this.applyTransform();
13344
+ if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
13345
+ document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
13346
+ }
13347
+ }, animationDuration);
13310
13348
  }
13311
- this.markerLineAnimation(map);
13312
- map.mapLayerPanel.generateTiles(newZoomFactor, map.tileTranslatePoint, type + 'wheel', null, position);
13313
- var element1 = document.getElementById(this.maps.element.id + '_tiles');
13314
- var animationDuration = this.maps.layersCollection[0].animationDuration;
13315
- setTimeout(function () {
13316
- // if (type === 'ZoomOut') {
13317
- // element1.removeChild(element1.children[element1.childElementCount - 1]);
13318
- // if (element1.childElementCount) {
13319
- // element1.removeChild(element1.children[element1.childElementCount - 1]);
13320
- // } else {
13321
- // element1 = element1;
13322
- // }
13323
- // }
13324
- _this.applyTransform();
13325
- if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
13326
- document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
13327
- }
13328
- }, animationDuration);
13329
13349
  }
13330
13350
  this.maps.zoomNotApplied = false;
13331
13351
  };
@@ -13347,6 +13367,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
13347
13367
  };
13348
13368
  }
13349
13369
  map.trigger('zoom', zoomArgs);
13370
+ return zoomArgs.cancel;
13350
13371
  };
13351
13372
  Zoom.prototype.getTileTranslatePosition = function (prevLevel, currentLevel, position, type) {
13352
13373
  var map = this.maps;
@@ -13372,6 +13393,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
13372
13393
  var zoomRect = this.zoomingRect;
13373
13394
  var maxZoom = map.zoomSettings.maxZoom;
13374
13395
  var minZoom = map.zoomSettings.minZoom;
13396
+ var isZoomCancelled;
13375
13397
  if (zoomRect.height > 0 && zoomRect.width > 0) {
13376
13398
  var x = this.zoomingRect.x + (this.zoomingRect.width / 2);
13377
13399
  var y = this.zoomingRect.y + (this.zoomingRect.height / 2);
@@ -13384,7 +13406,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
13384
13406
  var translatePointY = translatePoint.y - (((size.height / scale) - (size.height / zoomCalculationFactor)) / (size.height / y));
13385
13407
  map.translatePoint = new Point(translatePointX, translatePointY);
13386
13408
  map.scale = zoomCalculationFactor;
13387
- this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13409
+ isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13410
+ if (isZoomCancelled) {
13411
+ map.translatePoint = map.previousPoint;
13412
+ map.scale = map.previousScale;
13413
+ }
13388
13414
  }
13389
13415
  else {
13390
13416
  zoomCalculationFactor = prevLevel + (Math.round(prevLevel + (((size.width / zoomRect.width) + (size.height / zoomRect.height)) / 2)));
@@ -13397,13 +13423,21 @@ var Zoom = /** @__PURE__ @class */ (function () {
13397
13423
  map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, zoomCalculationFactor))) /
13398
13424
  (Math.pow(2, zoomCalculationFactor));
13399
13425
  map.scale = (Math.pow(2, zoomCalculationFactor));
13400
- this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13401
- map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
13426
+ isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13427
+ if (isZoomCancelled) {
13428
+ map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
13429
+ map.scale = map.tileZoomLevel = map.zoomSettings.zoomFactor = prevLevel;
13430
+ }
13431
+ else {
13432
+ map.mapLayerPanel.generateTiles(zoomCalculationFactor, map.tileTranslatePoint);
13433
+ }
13434
+ }
13435
+ if (!isZoomCancelled) {
13436
+ map.mapScaleValue = zoomCalculationFactor;
13437
+ this.applyTransform(true);
13438
+ this.maps.zoomNotApplied = false;
13439
+ this.zoomingRect = null;
13402
13440
  }
13403
- map.mapScaleValue = zoomCalculationFactor;
13404
- this.applyTransform(true);
13405
- this.maps.zoomNotApplied = false;
13406
- this.zoomingRect = null;
13407
13441
  }
13408
13442
  };
13409
13443
  Zoom.prototype.setInteraction = function (newInteraction) {
@@ -13432,6 +13466,7 @@ var Zoom = /** @__PURE__ @class */ (function () {
13432
13466
  this.pinchFactor *= newScale;
13433
13467
  this.pinchFactor = Math.min(this.maps.zoomSettings.maxZoom, Math.max(this.pinchFactor, this.maps.zoomSettings.minZoom));
13434
13468
  var zoomCalculationFactor = this.pinchFactor;
13469
+ var isZoomCancelled;
13435
13470
  if (!map.isTileMap) {
13436
13471
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
13437
13472
  var minBounds = map.baseMapRectBounds['min'];
@@ -13447,7 +13482,11 @@ var Zoom = /** @__PURE__ @class */ (function () {
13447
13482
  translatePointY = (currentHeight < map.mapAreaRect.height) ? (availSize.y + ((-(minBounds['y'])) + ((availSize.height / 2) - (mapTotalHeight / 2)))) : translatePointY;
13448
13483
  map.translatePoint = new Point(translatePointX, translatePointY);
13449
13484
  map.scale = zoomCalculationFactor;
13450
- this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13485
+ isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13486
+ if (isZoomCancelled) {
13487
+ map.translatePoint = map.previousPoint;
13488
+ map.scale = map.previousScale;
13489
+ }
13451
13490
  }
13452
13491
  else {
13453
13492
  var newTileFactor = zoomCalculationFactor;
@@ -13458,10 +13497,20 @@ var Zoom = /** @__PURE__ @class */ (function () {
13458
13497
  map.translatePoint.y = (map.tileTranslatePoint.y - (0.5 * Math.pow(2, newTileFactor))) /
13459
13498
  (Math.pow(2, newTileFactor));
13460
13499
  map.scale = (Math.pow(2, newTileFactor));
13461
- this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13462
- map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
13500
+ isZoomCancelled = this.triggerZoomEvent(prevTilePoint, prevLevel, '');
13501
+ if (isZoomCancelled) {
13502
+ map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
13503
+ map.scale = map.previousScale;
13504
+ map.tileZoomLevel = prevLevel;
13505
+ map.zoomSettings.zoomFactor = map.previousScale;
13506
+ }
13507
+ else {
13508
+ map.mapLayerPanel.generateTiles(newTileFactor, map.tileTranslatePoint);
13509
+ }
13510
+ }
13511
+ if (!isZoomCancelled) {
13512
+ this.applyTransform();
13463
13513
  }
13464
- this.applyTransform();
13465
13514
  };
13466
13515
  Zoom.prototype.drawZoomRectangle = function () {
13467
13516
  var map = this.maps;
@@ -14172,8 +14221,13 @@ var Zoom = /** @__PURE__ @class */ (function () {
14172
14221
  map.translatePoint = new Point(translatePointX, translatePointY);
14173
14222
  map.zoomTranslatePoint = map.translatePoint;
14174
14223
  map.scale = zoomFactor;
14175
- this.triggerZoomEvent(prevTilePoint, prevLevel, type);
14176
- this.applyTransform(true);
14224
+ if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
14225
+ map.translatePoint = map.zoomTranslatePoint = map.previousPoint;
14226
+ map.scale = map.previousScale;
14227
+ }
14228
+ else {
14229
+ this.applyTransform(true);
14230
+ }
14177
14231
  }
14178
14232
  else if ((map.isTileMap) && ((zoomFactor >= minZoom && zoomFactor <= maxZoom) || map.isReset)) {
14179
14233
  var tileZoomFactor = prevLevel < minZoom && !map.isReset ? minZoom : zoomFactor;
@@ -14190,25 +14244,32 @@ var Zoom = /** @__PURE__ @class */ (function () {
14190
14244
  map.tileTranslatePoint.y = map.initialTileTranslate.y;
14191
14245
  tileZoomFactor = map.tileZoomLevel = map.mapScaleValue = map.initialZoomLevel;
14192
14246
  }
14193
- this.triggerZoomEvent(prevTilePoint, prevLevel, type);
14194
- map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
14195
- map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
14196
- if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
14197
- document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
14247
+ if (this.triggerZoomEvent(prevTilePoint, prevLevel, type)) {
14248
+ map.translatePoint = map.tileTranslatePoint = new Point(0, 0);
14249
+ map.scale = map.previousScale;
14250
+ map.tileZoomLevel = prevLevel;
14251
+ map.zoomSettings.zoomFactor = map.previousScale;
14198
14252
  }
14199
- if (document.querySelector('.GroupElement')) {
14200
- document.querySelector('.GroupElement').style.display = 'none';
14201
- }
14202
- this.markerLineAnimation(map);
14203
- map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
14204
- var element1 = document.getElementById(this.maps.element.id + '_tiles');
14205
- var animationDuration = this.maps.layersCollection[0].animationDuration;
14206
- setTimeout(function () {
14207
- _this.applyTransform(true);
14208
- if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
14209
- document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
14253
+ else {
14254
+ map.translatePoint.y = (map.tileTranslatePoint.y - (0.01 * map.mapScaleValue)) / map.scale;
14255
+ map.translatePoint.x = (map.tileTranslatePoint.x - (0.01 * map.mapScaleValue)) / map.scale;
14256
+ if (document.getElementById(this.maps.element.id + '_LayerIndex_1')) {
14257
+ document.getElementById(this.maps.element.id + '_LayerIndex_1').style.display = 'none';
14210
14258
  }
14211
- }, animationDuration);
14259
+ if (document.querySelector('.GroupElement')) {
14260
+ document.querySelector('.GroupElement').style.display = 'none';
14261
+ }
14262
+ this.markerLineAnimation(map);
14263
+ map.mapLayerPanel.generateTiles(tileZoomFactor, map.tileTranslatePoint, type);
14264
+ var element1 = document.getElementById(this.maps.element.id + '_tiles');
14265
+ var animationDuration = this.maps.layersCollection[0].animationDuration;
14266
+ setTimeout(function () {
14267
+ _this.applyTransform(true);
14268
+ if (document.getElementById(_this.maps.element.id + '_LayerIndex_1')) {
14269
+ document.getElementById(_this.maps.element.id + '_LayerIndex_1').style.display = 'block';
14270
+ }
14271
+ }, animationDuration);
14272
+ }
14212
14273
  }
14213
14274
  this.maps.zoomNotApplied = false;
14214
14275
  }
@@ -14981,6 +15042,9 @@ var ImageExport = /** @__PURE__ @class */ (function () {
14981
15042
  image_1.src = url;
14982
15043
  }
14983
15044
  else {
15045
+ var svgParentElement = document.getElementById(_this.control.element.id + '_MapAreaBorder');
15046
+ var top_1 = parseFloat(svgParentElement.getAttribute('y'));
15047
+ var left_1 = parseFloat(svgParentElement.getAttribute('x'));
14984
15048
  var imgxHttp = new XMLHttpRequest();
14985
15049
  var imgTileLength_1 = _this.control.mapLayerPanel.tiles.length;
14986
15050
  var _loop_1 = function (i) {
@@ -14999,17 +15063,17 @@ var ImageExport = /** @__PURE__ @class */ (function () {
14999
15063
  if (i === 0 || i === imgTileLength_1 + 1) {
15000
15064
  if (i === 0) {
15001
15065
  ctxt_1.setTransform(1, 0, 0, 1, 0, 0);
15002
- ctxt_1.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
15066
+ ctxt_1.rect(0, top_1, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
15003
15067
  ctxt_1.clip();
15004
15068
  }
15005
15069
  else {
15006
- ctxt_1.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
15070
+ ctxt_1.setTransform(1, 0, 0, 1, left_1, top_1);
15007
15071
  }
15008
15072
  }
15009
15073
  else {
15010
15074
  var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
15011
- ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
15012
- (parseFloat(tileParent.style.top)));
15075
+ ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) +
15076
+ top_1);
15013
15077
  }
15014
15078
  ctxt_1.drawImage(exportTileImg, 0, 0);
15015
15079
  if (i === imgTileLength_1 + 1) {
@@ -15148,6 +15212,9 @@ var PdfExport = /** @__PURE__ @class */ (function () {
15148
15212
  image.src = url;
15149
15213
  }
15150
15214
  else {
15215
+ var svgParentElement = document.getElementById(_this.control.element.id + '_MapAreaBorder');
15216
+ var top_1 = parseFloat(svgParentElement.getAttribute('y'));
15217
+ var left_1 = parseFloat(svgParentElement.getAttribute('x'));
15151
15218
  var xHttp = new XMLHttpRequest();
15152
15219
  var tileLength_1 = _this.control.mapLayerPanel.tiles.length;
15153
15220
  var _loop_1 = function (i) {
@@ -15166,17 +15233,16 @@ var PdfExport = /** @__PURE__ @class */ (function () {
15166
15233
  if (i === 0 || i === tileLength_1 + 1) {
15167
15234
  if (i === 0) {
15168
15235
  ctx.setTransform(1, 0, 0, 1, 0, 0);
15169
- ctx.rect(0, parseFloat(svgParent.style.top), parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
15236
+ ctx.rect(0, top_1, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
15170
15237
  ctx.clip();
15171
15238
  }
15172
15239
  else {
15173
- ctx.setTransform(1, 0, 0, 1, parseFloat(svgParent.style.left), parseFloat(svgParent.style.top));
15240
+ ctx.setTransform(1, 0, 0, 1, left_1, top_1);
15174
15241
  }
15175
15242
  }
15176
15243
  else {
15177
15244
  var tileParent = document.getElementById(_this.control.element.id + '_tile_parent');
15178
- ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + 10, parseFloat(tile.style.top) +
15179
- (parseFloat(tileParent.style.top)));
15245
+ ctx.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) + top_1);
15180
15246
  }
15181
15247
  ctx.drawImage(tileImg, 0, 0);
15182
15248
  if (i === tileLength_1 + 1) {