fix: repalced js-loading-overlay to pure css to show loader. (#301)

* fix: repalced js-loading-overlay to pure css to show loader. * updated dependencies
watergis · Nov 13, 2024 · c3c5f8c · c3c5f8c
1 parent 7da9d4d
commit c3c5f8c
Show file tree

Hide file tree

Showing 15 changed files with 475 additions and 379 deletions.
diff --git a/.changeset/selfish-clocks-speak.md b/.changeset/selfish-clocks-speak.md
@@ -0,0 +1,6 @@
+---
+"@watergis/maplibre-gl-export": patch
+"@watergis/mapbox-gl-export": patch
+---
+
+fix: repalced js-loading-overlay to pure css to show loader.
diff --git a/package.json b/package.json
@@ -20,8 +20,8 @@
   },
   "homepage": "https://github.com/watergis/maplibre-gl-export#readme",
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
-    "lefthook": "^1.7.14"
+    "@changesets/cli": "^2.27.9",
+    "lefthook": "^1.8.2"
   },
   "packageManager": "[email protected]",
   "engines": {

diff --git a/packages/mapbox-gl-export/package.json b/packages/mapbox-gl-export/package.json
@@ -51,27 +51,26 @@
 	"homepage": "https://github.com/watergis/maplibre-gl-export#readme",
 	"devDependencies": {
 		"@types/geojson": "^7946.0.14",
-		"@types/mapbox-gl": "^3.4.0",
-		"@types/node": "^22.5.0",
-		"@typescript-eslint/eslint-plugin": "^8.2.0",
-		"@typescript-eslint/parser": "^8.2.0",
+		"@types/mapbox-gl": "^3.4.1",
+		"@types/node": "^22.9.0",
+		"@typescript-eslint/eslint-plugin": "^8.14.0",
+		"@typescript-eslint/parser": "^8.14.0",
 		"@watergis/maplibre-gl-export": "workspace:^",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.9.1",
+		"eslint": "^9.14.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-import": "^2.29.1",
-		"globals": "^15.9.0",
+		"eslint-plugin-import": "^2.31.0",
+		"globals": "^15.12.0",
 		"path": "^0.12.7",
-		"postcss": "^8.4.41",
+		"postcss": "^8.4.49",
 		"postcss-cli": "^11.0.0",
 		"prettier": "^3.3.3",
-		"sass": "^1.77.8",
-		"sass-loader": "^16.0.1",
-		"typescript": "^5.5.4",
-		"vite": "^5.4.2"
+		"sass": "^1.80.7",
+		"sass-loader": "^16.0.3",
+		"typescript": "^5.6.3",
+		"vite": "^5.4.11"
 	},
 	"dependencies": {
-		"js-loading-overlay": "^1.2.0",
-		"mapbox-gl": "^3.6.0"
+		"mapbox-gl": "^3.8.0"
 	}
 }
diff --git a/packages/mapbox-gl-export/src/lib/map-generator.ts b/packages/mapbox-gl-export/src/lib/map-generator.ts
@@ -1,5 +1,4 @@
 import mapboxgl, { Map as MapboxMap } from 'mapbox-gl';
-import 'js-loading-overlay';
 import {
 	defaultAttributionOptions,
 	defaultMarkerCirclePaint,

diff --git a/packages/mapbox-gl-export/src/scss/mapbox-gl-export.scss b/packages/mapbox-gl-export/src/scss/mapbox-gl-export.scss
@@ -43,3 +43,31 @@
 	width: 0;
 	position: fixed;
 }
+
+.map-export-loader {
+	&.is-active {
+		position: absolute;
+		z-index: 100;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		width: 48px;
+		height: 48px;
+		border: 5px solid #ffffff;
+		border-bottom-color: transparent;
+		border-radius: 50%;
+		display: inline-block;
+		box-sizing: border-box;
+		animation: rotation 1s linear infinite;
+	}
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+}
diff --git a/packages/mapbox-gl-export/vite.config.ts b/packages/mapbox-gl-export/vite.config.ts
@@ -23,5 +23,12 @@ export default defineConfig({
 			}
 		}
 	},
-	plugins: []
+	plugins: [],
+	css: {
+		preprocessorOptions: {
+			scss: {
+				api: 'modern-compiler'
+			}
+		}
+	}
 });
diff --git a/packages/maplibre-gl-export/index.ts b/packages/maplibre-gl-export/index.ts
@@ -1,11 +1,18 @@
-import maplibregl, { Map, NavigationControl, TerrainControl } from 'maplibre-gl';
+import {
+	addProtocol,
+	AttributionControl,
+	Map,
+	Marker,
+	NavigationControl,
+	TerrainControl
+} from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { MaplibreExportControl, Size, PageOrientation, Format, DPI } from './src/lib/index';
 import './src/scss/maplibre-gl-export.scss';
 import { Protocol } from 'pmtiles';
 
 const protocol = new Protocol();
-maplibregl.addProtocol('pmtiles', protocol.tile);
+addProtocol('pmtiles', protocol.tile);
 
 const map = new Map({
 	container: 'map',
@@ -22,7 +29,7 @@ const map = new Map({
 });
 
 map.addControl(new NavigationControl({ visualizePitch: true }), 'top-right');
-map.addControl(new maplibregl.AttributionControl({ compact: false }), 'bottom-right');
+map.addControl(new AttributionControl({ compact: false }), 'bottom-right');
 map.addControl(
 	new MaplibreExportControl({
 		PageSize: Size.A3,
@@ -45,7 +52,7 @@ map.addControl(
 );
 
 map.once('load', () => {
-	new maplibregl.Marker().setLngLat([37.30467, -0.15943]).addTo(map);
+	new Marker().setLngLat([37.30467, -0.15943]).addTo(map);
 
 	if (map.getSource('terrarium')) {
 		map.addControl(

diff --git a/packages/maplibre-gl-export/package.json b/packages/maplibre-gl-export/package.json
@@ -52,29 +52,28 @@
 	"homepage": "https://github.com/watergis/maplibre-gl-export/tree/main/packages/maplibre-gl-export#readme",
 	"devDependencies": {
 		"@types/geojson": "^7946.0.14",
-		"@types/mapbox-gl": "^3.4.0",
-		"@types/node": "^22.5.0",
-		"@typescript-eslint/eslint-plugin": "^8.2.0",
-		"@typescript-eslint/parser": "^8.2.0",
+		"@types/mapbox-gl": "^3.4.1",
+		"@types/node": "^22.9.0",
+		"@typescript-eslint/eslint-plugin": "^8.14.0",
+		"@typescript-eslint/parser": "^8.14.0",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.9.1",
+		"eslint": "^9.14.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-import": "^2.29.1",
-		"globals": "^15.9.0",
+		"eslint-plugin-import": "^2.31.0",
+		"globals": "^15.12.0",
 		"path": "^0.12.7",
-		"pmtiles": "^3.0.7",
-		"postcss": "^8.4.41",
+		"pmtiles": "^3.2.1",
+		"postcss": "^8.4.49",
 		"postcss-cli": "^11.0.0",
 		"prettier": "^3.3.3",
-		"sass": "^1.77.8",
-		"sass-loader": "^16.0.1",
-		"typescript": "^5.5.4",
-		"typescript-eslint": "^8.2.0",
-		"vite": "^5.4.2"
+		"sass": "^1.80.7",
+		"sass-loader": "^16.0.3",
+		"typescript": "^5.6.3",
+		"typescript-eslint": "^8.14.0",
+		"vite": "^5.4.11"
 	},
 	"dependencies": {
-		"js-loading-overlay": "^1.2.0",
-		"jspdf": "^2.5.1",
-		"maplibre-gl": "^4.6.0"
+		"jspdf": "^2.5.2",
+		"maplibre-gl": "^4.7.1"
 	}
 }
diff --git a/packages/maplibre-gl-export/src/lib/map-generator-base.ts b/packages/maplibre-gl-export/src/lib/map-generator-base.ts
@@ -36,7 +36,6 @@ import {
 	SymbolLayerSpecification
 } from 'maplibre-gl';
 import { CirclePaint, Map as MapboxMap } from 'mapbox-gl';
-import 'js-loading-overlay';
 import {
 	AttributionOptions,
 	AttributionStyle,
@@ -192,25 +191,8 @@ export abstract class MapGeneratorBase {
 		// eslint-disable-next-line
 		const this_ = this;
 
-		// see documentation for JS Loading Overray library
-		// https://js-loading-overlay.muhdfaiz.com
-		// eslint-disable-next-line
-		// @ts-ignore
-		JsLoadingOverlay.show({
-			overlayBackgroundColor: '#5D5959',
-			overlayOpacity: '0.6',
-			spinnerIcon: 'ball-spin',
-			spinnerColor: '#2400FD',
-			spinnerSize: '2x',
-			overlayIDName: 'overlay',
-			spinnerIDName: 'spinner',
-			offsetX: 0,
-			offsetY: 0,
-			containerID: null,
-			lockScroll: false,
-			overlayZIndex: 9998,
-			spinnerZIndex: 9999
-		});
+		this.addLoader();
+		this.showLoader();
 
 		// Calculate pixel ratio
 		const actualPixelRatio: number = window.devicePixelRatio;
@@ -549,9 +531,7 @@ export abstract class MapGeneratorBase {
 		});
 		hiddenDiv.remove();
 
-		// eslint-disable-next-line
-		// @ts-ignore
-		JsLoadingOverlay.hide();
+		this.hideLoader();
 	}
 
 	/**
@@ -658,4 +638,45 @@ export abstract class MapGeneratorBase {
 		}
 		return `${conversionFactor * length}px`;
 	}
+
+	/**
+	 * Add loader in the parent element of maplibre map.
+	 */
+	private addLoader() {
+		const canvas = this.map.getCanvas();
+		const grandParent = canvas.parentElement?.parentElement;
+		if (!grandParent) return;
+		const loaderElements = grandParent.getElementsByClassName('map-export-loader');
+		if (loaderElements.length > 0) return;
+		const loader = document.createElement('span');
+		loader.classList.add('map-export-loader');
+		loader.classList.add('loader-default');
+		grandParent.appendChild(loader);
+	}
+
+	/**
+	 * Show loader
+	 */
+	private showLoader() {
+		const canvas = this.map.getCanvas();
+		const grandParent = canvas.parentElement?.parentElement;
+		if (!grandParent) return;
+		const loaderElements = grandParent.getElementsByClassName('map-export-loader');
+		if (loaderElements && loaderElements.length > 0) {
+			loaderElements.item(0)?.classList.add('is-active');
+		}
+	}
+
+	/**
+	 * Hide loader
+	 */
+	private hideLoader() {
+		const canvas = this.map.getCanvas();
+		const grandParent = canvas.parentElement?.parentElement;
+		if (!grandParent) return;
+		const loaderElements = grandParent.getElementsByClassName('map-export-loader');
+		if (loaderElements && loaderElements.length > 0) {
+			loaderElements.item(0)?.classList.remove('is-active');
+		}
+	}
 }
diff --git a/packages/maplibre-gl-export/src/lib/map-generator.ts b/packages/maplibre-gl-export/src/lib/map-generator.ts
@@ -1,5 +1,4 @@
 import { Map as MaplibreMap, StyleSpecification } from 'maplibre-gl';
-import 'js-loading-overlay';
 import { DPIType, Format, FormatType, Size, SizeType, Unit, UnitType } from './interfaces';
 import {
 	MapGeneratorBase,

diff --git a/packages/maplibre-gl-export/src/scss/maplibre-gl-export.scss b/packages/maplibre-gl-export/src/scss/maplibre-gl-export.scss
@@ -43,3 +43,31 @@
 	width: 0;
 	position: fixed;
 }
+
+.map-export-loader {
+	&.is-active {
+		position: absolute;
+		z-index: 100;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		width: 48px;
+		height: 48px;
+		border: 5px solid #ffffff;
+		border-bottom-color: transparent;
+		border-radius: 50%;
+		display: inline-block;
+		box-sizing: border-box;
+		animation: rotation 1s linear infinite;
+	}
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+}
diff --git a/packages/maplibre-gl-export/vite.config.ts b/packages/maplibre-gl-export/vite.config.ts
@@ -23,5 +23,12 @@ export default defineConfig({
 			}
 		}
 	},
-	plugins: []
+	plugins: [],
+	css: {
+		preprocessorOptions: {
+			scss: {
+				api: 'modern-compiler'
+			}
+		}
+	}
 });