map-gl-offline 0.9.0 → 0.9.1

package/dist/index.umd.js

@@ -4022,7 +4022,7 @@
          */
         async downloadModels(models, styleId, options = {}) {
             const db = await this.db;
-            const { onProgress, batchSize = 4, maxRetries = 3, skipExisting = true, timeoutMs = 30000, } = options;
+            const { onProgress, batchSize = 4, maxRetries = 3, skipExisting = true, timeoutMs = 30000, signal, } = options;
             const entries = Object.entries(models);
             const progressTracker = createProgressTracker(entries.length);
             const result = {
@@ -4046,6 +4046,9 @@
                 }
             }
             await processBatch(entries, async ([modelName, url]) => {
+                // Cancelled: let the remaining models go by without fetching them.
+                if (signal?.aborted)
+                    return;
                 const key = modelKey(styleId, modelName);
                 const label = `${styleId}::${modelName}`;
                 if (skipExisting && existingKeys.has(key)) {
@@ -4878,7 +4881,7 @@
          */
         async downloadSprites(spriteUrls, styleName, options = {}) {
             const db = await this.db;
-            const { onProgress, batchSize = 10, maxRetries = 3, skipExisting = true, timeoutMs = 15000, storageQuotaCheck = true, prioritySprites = [], bandwidthLimit, enableValidation = true, namePrefix, } = options;
+            const { onProgress, batchSize = 10, maxRetries = 3, skipExisting = true, timeoutMs = 15000, storageQuotaCheck = true, prioritySprites = [], bandwidthLimit, enableValidation = true, namePrefix, signal, } = options;
             const startTime = Date.now();
             let totalSize = 0;
             let downloadedSprites = 0;
@@ -4950,6 +4953,9 @@
                 spriteLogger.debug(`  ${url} -> ${key}`);
             });
             await processBatch(urlsToDownload, async (spriteUrl) => {
+                // Cancelled: let the remaining sprites go by without fetching them.
+                if (signal?.aborted)
+                    return;
                 try {
                     const spriteName = namePrefix
                         ? this.buildSpriteName(spriteUrl, namePrefix)
@@ -6753,7 +6759,8 @@
             await (await dbPromise).put('styles', styleEntry);
             // 2. Sprites
             const spriteResults = [];
-            if (!skipSprites) {
+            // After a cancel, later phases don't start; the tile step then cleans up.
+            if (!skipSprites && !signal?.aborted) {
                 const spriteSources = normalizeSpriteProperty(originalSpriteUrl);
                 if (spriteSources.length > 0) {
                     const { downloadSprites } = await Promise.resolve().then(function () { return spriteService$1; });
@@ -6795,6 +6802,7 @@
                         });
                         try {
                             const result = await downloadSprites(spriteUrls, styleId, {
+                                signal,
                                 enableValidation: true,
                                 skipExisting: false,
                                 namePrefix: source.id !== 'sprite' ? source.id : undefined,
@@ -6814,7 +6822,10 @@
             }
             // 3. Glyphs
             let glyphResult;
-            if (!skipGlyphs && originalGlyphsUrl && !originalGlyphsUrl.startsWith('idb://')) {
+            if (!skipGlyphs &&
+                !signal?.aborted &&
+                originalGlyphsUrl &&
+                !originalGlyphsUrl.startsWith('idb://')) {
                 const fontFamilies = new Set(extractAllFontNames(storedStyle));
                 if (fontFamilies.size > 0) {
                     const { downloadGlyphs } = await Promise.resolve().then(function () { return glyphService$1; });
@@ -6828,6 +6839,7 @@
                     // jump when the real total came in).
                     try {
                         glyphResult = await downloadGlyphs(glyphsUrl, Array.from(fontFamilies), styleId, ranges, {
+                            signal,
                             onProgress: (progress) => {
                                 emit('glyphs', progress.completed, progress.total, 'Downloading glyphs');
                             },
@@ -6842,7 +6854,7 @@
             //    turbine .glb assets. Two value shapes exist in the wild
             //    (plain string or `{ uri }`) — we accept both.
             let modelResult;
-            if (!skipModels && storedStyle.models) {
+            if (!skipModels && !signal?.aborted && storedStyle.models) {
                 // Upstream URLs, from before patching, so models that failed last time are retried.
                 const rawModels = (styleEntry.originalModels ?? storedStyle.models);
                 const alreadyStored = await storedModelNames(styleId);
@@ -6865,6 +6877,7 @@
                     emit('models', 0, Object.keys(resolved).length, 'Downloading 3D models');
                     try {
                         modelResult = await downloadModels(resolved, styleId, {
+                            signal,
                             onProgress: (progress) => {
                                 emit('models', progress.completed, progress.total, 'Downloading 3D models');
                             },
@@ -6878,7 +6891,8 @@
             // Renderer code fetched from api.mapbox.com at render time (3D decoders,
             // RTL text, procedural buildings). Never throws; see cacheMapboxRuntimeAssets.
             let runtimeAssetsCached;
-            if (/mapbox:\/\/|api\.mapbox\.com/.test(`${region.styleUrl ?? ''} ${originalGlyphsUrl ?? ''}`)) {
+            if (!signal?.aborted &&
+                /mapbox:\/\/|api\.mapbox\.com/.test(`${region.styleUrl ?? ''} ${originalGlyphsUrl ?? ''}`)) {
                 const { cacheMapboxRuntimeAssets } = await Promise.resolve().then(function () { return runtimeAssetService; });
                 runtimeAssetsCached = await cacheMapboxRuntimeAssets();
             }
@@ -8514,7 +8528,7 @@
         db = dbPromise;
         async downloadGlyphs(glyphUrl, fontstacks, styleName, ranges = ['0-255'], options = {}) {
             const db = await this.db;
-            const { maxConcurrency = 5, retries = 3, timeout = 10000, onProgress, enableValidation = true, priorityFonts = [], } = options;
+            const { maxConcurrency = 5, retries = 3, timeout = 10000, onProgress, enableValidation = true, priorityFonts = [], signal, } = options;
             const startTime = Date.now();
             let totalSize = 0;
             let downloadedGlyphs = 0;
@@ -8546,7 +8560,8 @@
             // Process glyphs with concurrency control
             const semaphore = new Array(maxConcurrency).fill(0);
             const promises = semaphore.map(async () => {
-                while (glyphTasks.length > 0) {
+                // Once cancelled, workers stop taking tasks; those in flight finish.
+                while (glyphTasks.length > 0 && !signal?.aborted) {
                     const task = glyphTasks.shift();
                     if (!task)
                         break;
@@ -12799,6 +12814,7 @@
         'download.status.models': '3D models: {{completed}} of {{total}}',
         'download.status.tiles': 'Tiles: {{completed}} of {{total}}',
         'download.status.planning': 'Planning tiles',
+        'download.cancelRegion': 'Cancel downloading {{name}}',
         'download.status.saving': 'Saving region',
         // Panel Manager additional strings
         'panel.downloadedRegions': 'Downloaded Regions',
@@ -13021,6 +13037,7 @@
         'download.status.models': 'النماذج ثلاثية الأبعاد: {{completed}} من {{total}}',
         'download.status.tiles': 'البلاطات: {{completed}} من {{total}}',
         'download.status.planning': 'جارٍ تخطيط البلاطات',
+        'download.cancelRegion': 'إلغاء تحميل {{name}}',
         'download.status.saving': 'جارٍ حفظ المنطقة',
         // Panel Manager additional strings - سلاسل إضافية للوحة
         'panel.downloadedRegions': 'المناطق المحملة',
@@ -14762,6 +14779,15 @@
                 const downloads = this.downloadManager.getCurrentDownloads();
                 const progressHTML = this.createDownloadProgressHTML(downloads);
                 this.downloadProgressContainer.innerHTML = progressHTML;
+                // The rows are redrawn on every update, so listen on the container.
+                this.downloadProgressContainer.addEventListener('click', event => {
+                    const button = event.target.closest('[data-action="cancel-download"]');
+                    const regionId = button?.dataset.regionId;
+                    if (!regionId)
+                        return;
+                    this.downloadManager.cancelDownload(regionId);
+                    void this.refresh();
+                });
                 this.element.appendChild(this.downloadProgressContainer);
             }
         }
@@ -15135,6 +15161,7 @@
                   <div class="h-full bg-blue-600" style="width: ${download.percentage || 0}%"></div>
                 </div>
                 <span class="text-blue-700 dark:text-blue-300 min-w-12">${Math.round(download.percentage || 0)}%</span>
+                <button type="button" class="px-2 py-1 rounded-md text-xs font-medium cursor-pointer text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600" data-action="cancel-download" data-region-id="${escapeHtml$1(download.regionId)}" aria-label="${t('download.cancelRegion', { name: String(download.regionName || download.regionId) })}">${t('app.cancel')}</button>
               </div>
             </div>
           `)