@foodmarketmaker/mapag 0.0.23 → 0.0.24
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, effect, input, Input, Component, ChangeDetectionStrategy, inject, NgZone, Injectable, output
|
|
2
|
+
import { signal, effect, input, Input, Component, viewChild, ChangeDetectionStrategy, inject, NgZone, Injectable, output } from '@angular/core';
|
|
3
3
|
import { PMTiles, Protocol } from 'pmtiles';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
@@ -650,89 +650,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
650
650
|
|
|
651
651
|
class BasemapSelectMenu {
|
|
652
652
|
map = input.required(...(ngDevMode ? [{ debugName: "map" }] : []));
|
|
653
|
-
|
|
653
|
+
styleDialog = viewChild.required('styleDialog');
|
|
654
654
|
mapStylesArray = Object.values(MapStyles);
|
|
655
|
-
popoverTimeout;
|
|
656
|
-
constructor() {
|
|
657
|
-
}
|
|
658
655
|
get currentStyle() {
|
|
659
656
|
return this.map().styles.style();
|
|
660
657
|
}
|
|
661
658
|
getBackgroundImage() {
|
|
662
659
|
const currentStyle = this.map().styles.style();
|
|
663
|
-
// Try different path approaches for debugging
|
|
664
660
|
const originalPath = currentStyle.image;
|
|
665
|
-
// Return the original path first to test
|
|
666
661
|
return `url(${originalPath})`;
|
|
667
662
|
}
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
this.isPopoverVisible = true;
|
|
673
|
-
}
|
|
674
|
-
hidePopover() {
|
|
675
|
-
this.popoverTimeout = window.setTimeout(() => {
|
|
676
|
-
this.isPopoverVisible = false;
|
|
677
|
-
}, 200); // Small delay to allow moving to popover
|
|
663
|
+
openDialog(event) {
|
|
664
|
+
event.stopPropagation();
|
|
665
|
+
const dialog = this.styleDialog().nativeElement;
|
|
666
|
+
dialog.showModal();
|
|
678
667
|
}
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
this.popoverTimeout = undefined;
|
|
683
|
-
}
|
|
668
|
+
closeDialog() {
|
|
669
|
+
const dialog = this.styleDialog().nativeElement;
|
|
670
|
+
dialog.close();
|
|
684
671
|
}
|
|
685
672
|
selectStyle(style) {
|
|
686
673
|
const s = this.map().styles;
|
|
687
674
|
if (s) {
|
|
688
675
|
s.style.set(style);
|
|
689
676
|
}
|
|
690
|
-
this.
|
|
691
|
-
}
|
|
692
|
-
onClick() {
|
|
693
|
-
// Keep the original cycling behavior as fallback
|
|
694
|
-
const s = this.map().styles;
|
|
695
|
-
const current = this.map().styles.style();
|
|
696
|
-
const next = this.nextStyle(current);
|
|
697
|
-
s.style.set(next);
|
|
698
|
-
}
|
|
699
|
-
nextStyle(current) {
|
|
700
|
-
const s = this.map().styles;
|
|
701
|
-
if (!current) {
|
|
702
|
-
// If no current style, return the first one
|
|
703
|
-
const firstKey = Object.keys(MapStyles)[0];
|
|
704
|
-
return MapStyles[firstKey];
|
|
705
|
-
}
|
|
706
|
-
// Get all the keys from MapStyles
|
|
707
|
-
const styleKeys = Object.keys(MapStyles);
|
|
708
|
-
// Find the current style's index
|
|
709
|
-
const currentIndex = styleKeys.findIndex(key => MapStyles[key].code === current.code);
|
|
710
|
-
// If current style not found, return the first one
|
|
711
|
-
if (currentIndex === -1) {
|
|
712
|
-
return MapStyles[styleKeys[0]];
|
|
713
|
-
}
|
|
714
|
-
// Get the next index, wrapping around to 0 if we're at the end
|
|
715
|
-
const nextIndex = (currentIndex + 1) % styleKeys.length;
|
|
716
|
-
// Return the next style
|
|
717
|
-
return MapStyles[styleKeys[nextIndex]];
|
|
677
|
+
this.closeDialog();
|
|
718
678
|
}
|
|
719
679
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasemapSelectMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
720
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
680
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: BasemapSelectMenu, isStandalone: true, selector: "mapag-basemap-select-menu", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "styleDialog", first: true, predicate: ["styleDialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
721
681
|
<div class="basemap-container"
|
|
722
|
-
(mouseenter)="showPopover()"
|
|
723
|
-
(mouseleave)="hidePopover()"
|
|
724
|
-
(click)="onClick()"
|
|
725
682
|
[style.background-image]="getBackgroundImage()">
|
|
726
683
|
<div class="basemap-title" [style.color]="currentStyle?.nameColor || '#ffffff'">
|
|
727
684
|
{{ currentStyle?.name || 'No Style Selected' }}
|
|
728
685
|
</div>
|
|
729
|
-
|
|
686
|
+
<button class="dialog-button"
|
|
687
|
+
(click)="openDialog($event)"
|
|
688
|
+
title="Choose basemap style">
|
|
689
|
+
...
|
|
690
|
+
</button>
|
|
730
691
|
</div>
|
|
731
692
|
|
|
732
|
-
<
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
693
|
+
<dialog #styleDialog class="style-dialog">
|
|
694
|
+
<div class="dialog-header">
|
|
695
|
+
<h3>Select Basemap Style</h3>
|
|
696
|
+
<button class="close-button" (click)="closeDialog()">✕</button>
|
|
697
|
+
</div>
|
|
736
698
|
<div class="style-grid">
|
|
737
699
|
<div *ngFor="let style of mapStylesArray"
|
|
738
700
|
class="style-item"
|
|
@@ -740,27 +702,29 @@ class BasemapSelectMenu {
|
|
|
740
702
|
<mapag-basemap-select [styleData]="style" [styles]="map().styles"></mapag-basemap-select>
|
|
741
703
|
</div>
|
|
742
704
|
</div>
|
|
743
|
-
</
|
|
744
|
-
`, isInline: true, styles: [":host{display:block;width:200px;height:
|
|
705
|
+
</dialog>
|
|
706
|
+
`, isInline: true, styles: [":host{display:block;width:200px;height:60px;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;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-title{position:relative;z-index:1;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}.dialog-button{position:absolute;top:50%;transform:translateY(-50%);right:8px;background:#ffffffe6;border:none;border-radius:6px;padding:4px 10px;font-size:18px;font-weight:700;cursor:pointer;z-index:2;transition:background-color .2s ease,transform .2s ease;box-shadow:0 2px 4px #0003;letter-spacing:1px}.dialog-button:hover{background:#fff;transform:translateY(-50%) scale(1.1)}.dialog-button:active{transform:translateY(-50%) scale(.95)}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.style-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;border:none;border-radius:12px;padding:0;max-width:90vw;max-height:80vh;box-shadow:0 8px 32px #00000040;background:#fff}.style-dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.1)}.dialog-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.close-button{background:transparent;border:none;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#666;transition:background-color .2s ease,color .2s ease}.close-button:hover{background-color:#0000000d;color:#333}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:20px;min-width:380px;max-width:600px;overflow-y:auto}.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 });
|
|
745
707
|
}
|
|
746
708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BasemapSelectMenu, decorators: [{
|
|
747
709
|
type: Component,
|
|
748
710
|
args: [{ selector: 'mapag-basemap-select-menu', imports: [CommonModule, BasemapSelect], changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
749
711
|
<div class="basemap-container"
|
|
750
|
-
(mouseenter)="showPopover()"
|
|
751
|
-
(mouseleave)="hidePopover()"
|
|
752
|
-
(click)="onClick()"
|
|
753
712
|
[style.background-image]="getBackgroundImage()">
|
|
754
713
|
<div class="basemap-title" [style.color]="currentStyle?.nameColor || '#ffffff'">
|
|
755
714
|
{{ currentStyle?.name || 'No Style Selected' }}
|
|
756
715
|
</div>
|
|
757
|
-
|
|
716
|
+
<button class="dialog-button"
|
|
717
|
+
(click)="openDialog($event)"
|
|
718
|
+
title="Choose basemap style">
|
|
719
|
+
...
|
|
720
|
+
</button>
|
|
758
721
|
</div>
|
|
759
722
|
|
|
760
|
-
<
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
723
|
+
<dialog #styleDialog class="style-dialog">
|
|
724
|
+
<div class="dialog-header">
|
|
725
|
+
<h3>Select Basemap Style</h3>
|
|
726
|
+
<button class="close-button" (click)="closeDialog()">✕</button>
|
|
727
|
+
</div>
|
|
764
728
|
<div class="style-grid">
|
|
765
729
|
<div *ngFor="let style of mapStylesArray"
|
|
766
730
|
class="style-item"
|
|
@@ -768,9 +732,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
768
732
|
<mapag-basemap-select [styleData]="style" [styles]="map().styles"></mapag-basemap-select>
|
|
769
733
|
</div>
|
|
770
734
|
</div>
|
|
771
|
-
</
|
|
772
|
-
`, styles: [":host{display:block;width:200px;height:
|
|
773
|
-
}],
|
|
735
|
+
</dialog>
|
|
736
|
+
`, styles: [":host{display:block;width:200px;height:60px;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;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-title{position:relative;z-index:1;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}.dialog-button{position:absolute;top:50%;transform:translateY(-50%);right:8px;background:#ffffffe6;border:none;border-radius:6px;padding:4px 10px;font-size:18px;font-weight:700;cursor:pointer;z-index:2;transition:background-color .2s ease,transform .2s ease;box-shadow:0 2px 4px #0003;letter-spacing:1px}.dialog-button:hover{background:#fff;transform:translateY(-50%) scale(1.1)}.dialog-button:active{transform:translateY(-50%) scale(.95)}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.style-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;border:none;border-radius:12px;padding:0;max-width:90vw;max-height:80vh;box-shadow:0 8px 32px #00000040;background:#fff}.style-dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.1)}.dialog-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.close-button{background:transparent;border:none;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#666;transition:background-color .2s ease,color .2s ease}.close-button:hover{background-color:#0000000d;color:#333}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:20px;min-width:380px;max-width:600px;overflow-y:auto}.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"] }]
|
|
737
|
+
}], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], styleDialog: [{ type: i0.ViewChild, args: ['styleDialog', { isSignal: true }] }] } });
|
|
774
738
|
|
|
775
739
|
const BaseMapLight = {
|
|
776
740
|
"version": 8,
|