map-gl-offline 0.9.0 → 0.9.1

package/dist/index.esm.js

@@ -3739,7 +3739,7 @@ class ModelService {
      */
     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 = {
@@ -3763,6 +3763,9 @@ class ModelService {
             }
         }
         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)) {
@@ -4564,7 +4567,7 @@ class SpriteService {
      */
     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;
@@ -4636,6 +4639,9 @@ class SpriteService {
             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)
@@ -6439,7 +6445,8 @@ class RegionService {
         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; });
@@ -6481,6 +6488,7 @@ class RegionService {
                     });
                     try {
                         const result = await downloadSprites(spriteUrls, styleId, {
+                            signal,
                             enableValidation: true,
                             skipExisting: false,
                             namePrefix: source.id !== 'sprite' ? source.id : undefined,
@@ -6500,7 +6508,10 @@ class RegionService {
         }
         // 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; });
@@ -6514,6 +6525,7 @@ class RegionService {
                 // 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');
                         },
@@ -6528,7 +6540,7 @@ class RegionService {
         //    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);
@@ -6551,6 +6563,7 @@ class RegionService {
                 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');
                         },
@@ -6564,7 +6577,8 @@ class RegionService {
         // 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();
         }
@@ -8200,7 +8214,7 @@ class GlyphService {
     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;
@@ -8232,7 +8246,8 @@ class GlyphService {
         // 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;
@@ -10039,6 +10054,7 @@ const en = {
     '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',
@@ -10261,6 +10277,7 @@ const ar = {
     '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': 'المناطق المحملة',
@@ -12002,6 +12019,15 @@ class PanelRenderer extends BaseComponent {
             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);
         }
     }
@@ -12375,6 +12401,7 @@ class PanelRenderer extends BaseComponent {
                   <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>
           `)