@foodmarketmaker/mapag 0.0.9 → 0.0.10

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, effect, input, Input, Component, inject, NgZone, Injectable, output, viewChild, ChangeDetectionStrategy } from '@angular/core';
+import { signal, effect, input, Input, Component, ChangeDetectionStrategy, inject, NgZone, Injectable, output, viewChild } from '@angular/core';
 import { PMTiles, Protocol } from 'pmtiles';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -229,14 +229,12 @@ class Styles {
         this.saveCustomSourcesAndLayers();
         this.map.once("styledata", () => {
             setTimeout(() => {
-                console.log('=== MAP ONCE ===');
                 // Update current basemap tracking from cached style
                 this.updateBasemapTracking(styleData);
                 // Then restore the custom sources/layers
                 this.restoreCustomSourcesAndLayers();
             }, 100);
         });
-        console.log('=== MAP SETTING STYLE ===');
         this.map.setStyle(styleData.url);
         this.style.set(styleData);
         this.currentStyleCode = styleData.code;
@@ -295,9 +293,6 @@ class Styles {
     saveCustomSourcesAndLayers() {
         if (!this.map)
             return;
-        console.log('=== SAVING CUSTOM SOURCES AND LAYERS ===');
-        console.log('Current basemap sources:', Array.from(this.currentBasemapSources));
-        console.log('Current basemap layers:', Array.from(this.currentBasemapLayers));
         // Reset custom sources and layers
         this.customSourcesAndLayers = {
             sources: {},
@@ -305,31 +300,20 @@ class Styles {
             image: {},
         };
         const sources = this.map.getStyle().sources;
-        console.log('All current sources:', Object.keys(sources));
         for (const [sourceId, source] of Object.entries(sources)) {
             // Only save sources that are NOT part of the basemap
             if (!this.currentBasemapSources.has(sourceId)) {
-                console.log('Saving custom source:', sourceId);
                 this.customSourcesAndLayers.sources[sourceId] = source;
             }
             else {
-                console.log('Skipping basemap source:', sourceId);
             }
         }
         const layers = this.map.getStyle().layers;
-        console.log('All current layers:', layers.map(l => l.id));
         for (const layer of layers) {
-            if (layer.id === 'area-fill') {
-                console.log('TRACKING: AREA FILL');
-            }
             // Only save layers that are NOT part of the basemap
             if (!this.currentBasemapLayers.has(layer.id)) {
-                console.log('Saving custom layer:', layer.id);
                 this.customSourcesAndLayers.layers.push(layer);
             }
-            else {
-                console.log('Skipping basemap layer:', layer.id);
-            }
         }
         const allImageIDs = this.map.listImages();
         const customIDs = allImageIDs.filter((id) => id.startsWith("customImg-"));
@@ -343,50 +327,30 @@ class Styles {
                 }
             });
         }
-        console.log('=== SAVE COMPLETE ===');
-        console.log('Saved sources:', Object.keys(this.customSourcesAndLayers.sources));
-        console.log('Saved layers:', this.customSourcesAndLayers.layers.map(l => l.id));
-        console.log('Saved images:', Object.keys(this.customSourcesAndLayers.image));
     }
     restoreCustomSourcesAndLayers() {
         if (!this.map)
             return;
-        console.log('=== RESTORING CUSTOM SOURCES AND LAYERS ===');
-        console.log('Sources to restore:', Object.keys(this.customSourcesAndLayers.sources));
-        console.log('Layers to restore:', this.customSourcesAndLayers.layers.map(l => l.id));
         // Check what's actually on the map RIGHT NOW
         const currentSources = Object.keys(this.map.getStyle().sources || {});
         const currentLayers = (this.map.getStyle().layers || []).map(l => l.id);
-        console.log('ACTUAL current sources on map:', currentSources);
-        console.log('ACTUAL current layers on map:', currentLayers);
         // Add custom sources first
         for (const [sourceId, source] of Object.entries(this.customSourcesAndLayers.sources)) {
             AddSource(this.map, sourceId, source);
-            // try {
-            //   console.log('Adding custom source:', sourceId);
-            //   this.map.addSource(sourceId, source);
-            // } catch (error) {
-            //   console.error('Error adding source', sourceId, ':', error);
-            // }
         }
         // Add custom layers second
         for (const layer of this.customSourcesAndLayers.layers) {
             AddLayer(this.map, layer);
-            if (layer.id === 'area-fill') {
-                console.log('FOLUND: AREA FILL');
-            }
         }
         // Add all custom images
         for (const [imageId, image] of Object.entries(this.customSourcesAndLayers.image)) {
             try {
-                console.log('Adding custom image:', imageId);
                 this.map.addImage(imageId, image.data);
             }
             catch (error) {
                 console.error('Error adding image', imageId, ':', error);
             }
         }
-        console.log('=== RESTORE COMPLETE ===');
     }
 }
 const MapStyles = {
@@ -481,8 +445,6 @@ class BasemapSelect {
         }
         // Try different path approaches for debugging
         const originalPath = this.styleData.image;
-        console.log('Original image path:', originalPath);
-        console.log('StyleData:', this.styleData);
         // Return the original path first to test
         return `url(${originalPath})`;
     }
@@ -577,7 +539,6 @@ class BasemapSelectMenu {
         }
     }
     selectStyle(style) {
-        console.log('Style selected from popover:', style.name);
         const s = this.map().styles;
         if (s) {
             s.style.set(style);
@@ -636,11 +597,11 @@ class BasemapSelectMenu {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;width:200px;height:80px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-container:hover{box-shadow:0 4px 16px #0003}.basemap-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#0000001a,#0000004d);border-radius:12px;pointer-events:none}.basemap-title{position:relative;z-index:2;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.basemap-container:not([style*=\"background-image: url\"]) .basemap-overlay{background:#0000001a}.style-popover{padding:16px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;border:1px solid rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;position:absolute;top:calc(100% + 8px);left:0;z-index:1000;max-width:90vw;max-height:80vh;overflow-y:auto;min-width:100%}.style-popover.show{opacity:1;visibility:visible;transform:translateY(0)}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;min-width:380px;max-width:600px}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasemapSelect, selector: "mapag-basemap-select", inputs: ["styleData", "styles"] }] });
+  `, isInline: true, styles: [":host{display:block;width:200px;height:80px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-container:hover{box-shadow:0 4px 16px #0003}.basemap-overlay{position:absolute;inset:0;background:linear-gradient(135deg,#0000001a,#0000004d);border-radius:12px;pointer-events:none}.basemap-title{position:relative;z-index:2;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.basemap-container:not([style*=\"background-image: url\"]) .basemap-overlay{background:#0000001a}.style-popover{padding:16px;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;border:1px solid rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;position:absolute;top:calc(100% + 8px);left:0;z-index:1000;max-width:90vw;max-height:80vh;overflow-y:auto;min-width:100%}.style-popover.show{opacity:1;visibility:visible;transform:translateY(0)}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;min-width:380px;max-width:600px}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasemapSelect, selector: "mapag-basemap-select", inputs: ["styleData", "styles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasemapSelectMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-basemap-select-menu', imports: [CommonModule, BasemapSelect], template: `
+            args: [{ selector: 'mapag-basemap-select-menu', imports: [CommonModule, BasemapSelect], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="basemap-container" 
          (mouseenter)="showPopover()" 
          (mouseleave)="hidePopover()"
@@ -12838,7 +12799,6 @@ class MapboxMapperGroup {
     svc;
     mappers = new Map();
     onStyleChange(map, svc) {
-        console.log('=== MAP ON STYLE CHANGE - MapboxMapperGroup ===');
         this.mappers.forEach((mapper) => {
             if (mapper.onStyleChange) {
                 mapper.onStyleChange(map, svc);
@@ -12847,7 +12807,7 @@ class MapboxMapperGroup {
     }
     set(name, mapper) {
         if (mapper == undefined) {
-            console.error('NO GOOD CAN COME FROM THIS');
+            return;
         }
         this.mappers.set(name, mapper);
         if (this.map && this.svc) {
@@ -12910,7 +12870,6 @@ class StandardLayersMapper {
     static POINTS = 'points';
     map;
     onStyleChange(map, svc) {
-        console.log('=== MAP ON STYLE CHANGE - StandardLayersMapper ===');
         this.onReady(map, svc);
     }
     onReady(map, svc) {
@@ -13003,7 +12962,6 @@ class AreaMapperMapper {
     }
     onStyleChange(map, svc) {
         // this.onReady(map, svc);
-        console.log('=== MAP ON STYLE CHANGE - AreaMapperMapper ===');
     }
     onReady(map, svc) {
         this.map = map;
@@ -14027,7 +13985,6 @@ class MapAreaSelectComponent {
         // this.m.areaType = this.areaType
         this.areaTypeSrc = Layers.FindVector(this.areaType);
         if (!this.areaTypeSrc) {
-            console.warn('MapAreaSelectComponent: No source found for area type ', this.areaType);
             return;
         }
         // Initialize the mapper
@@ -14125,11 +14082,6 @@ class MapComponent {
     ngOnDestroy() {
         this.styles.destroy();
     }
-    layerExists(map, layerId) {
-        if (map.getLayer(layerId) !== undefined) {
-            console.log(`Layer ${layerId} already exists`);
-        }
-    }
     initializeMap() {
         this.zone.runOutsideAngular(() => {
             const container = this.mapContainer();
@@ -14637,10 +14589,15 @@ class HardinessMapper {
     over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
     settings = signal(new HardinessSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
     async onStyleChange(map, svc) {
-        console.log('=== MAP ON STYLE CHANGE - MapboxMapperGroup ===');
         // await this.onReady(map, svc);
     }
-    constructor() {
+    constructor(settings) {
+        if (settings) {
+            this.settings.set({
+                ...this.settings(),
+                ...settings
+            });
+        }
         const _ = effect(() => {
             const settings = this.settings();
             // this._update(settings);
@@ -14699,7 +14656,7 @@ class HardinessMapper {
         }
     }
     update(newSettings) {
-        this.settings.set({ ...newSettings });
+        this.settings.set({ ...this.settings(), ...newSettings });
     }
     _update(settings) {
         if (!this.map) {
@@ -14949,14 +14906,20 @@ class WatershedMapper {
     current = null;
     currentFeatureID = undefined;
     over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
-    constructor() {
+    constructor(settings) {
+        if (settings) {
+            this.settings.set({
+                ...this.settings(),
+                ...settings
+            });
+        }
         const _ = effect(() => {
             const settings = this.settings();
             this._update(settings);
         }, ...(ngDevMode ? [{ debugName: "_" }] : []));
     }
     update(settings) {
-        this.settings.set({ ...settings });
+        this.settings.set({ ...this.settings(), ...settings });
     }
     _update(settings) {
         if (!this.map) {