@smartnet360/svelte-components 0.0.39 → 0.0.41

package/dist/core/Map/Map.svelte

@@ -0,0 +1,312 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import mapboxgl from 'mapbox-gl';
+	import { MapboxOverlay } from '@deck.gl/mapbox';
+	import type { Layer } from '@deck.gl/core';
+	import { createMapStore, type MapStore } from './mapStore';
+	import { createSettingsStore } from '../Settings/store';
+	import { mapSettingsSchema } from './mapSettings';
+	import { MAP_STYLES, DEFAULT_MAP_OPTIONS, type MapOptions } from './types';
+	
+	interface Props {
+		accessToken: string;
+		initialOptions?: Partial<MapOptions>;
+		namespace?: string;
+		layers?: Layer[];
+		mapStore?: MapStore;
+		onMapLoaded?: (map: mapboxgl.Map) => void;
+	}
+	
+	let {
+		accessToken,
+		initialOptions = {},
+		namespace = 'map',
+		layers = [],
+		mapStore = $bindable(),
+		onMapLoaded
+	}: Props = $props();
+	
+	// Container element
+	let container = $state<HTMLDivElement>();
+	let map = $state<mapboxgl.Map>();
+	let overlay = $state<MapboxOverlay>();
+	let styleLoaded = $state(false);
+	
+	// Create stores if not provided
+	if (!mapStore) {
+		mapStore = createMapStore();
+	}
+	
+	// Create settings store
+	const settings = createSettingsStore(mapSettingsSchema, namespace);
+	
+	// Reactive: Update layers when prop changes
+	$effect(() => {
+		if (mapStore && layers.length > 0) {
+			mapStore.setLayers(layers);
+		}
+	});
+	
+	// Reactive: Update map style when settings change
+	$effect(() => {
+		if (!map || !styleLoaded || !$settings.appearance.style) return;
+		
+		const styleUrl = MAP_STYLES[$settings.appearance.style as keyof typeof MAP_STYLES];
+		if (styleUrl && map.getStyle()?.name !== styleUrl) {
+			styleLoaded = false; // Mark as not loaded during transition
+			map.setStyle(styleUrl);
+		}
+	});
+	
+	// Reactive: Update interaction handlers
+	$effect(() => {
+		const currentMap = map;
+		if (!currentMap) return;
+		
+		const handlers = [
+			{ name: 'dragRotate', value: $settings.interaction.dragRotate },
+			{ name: 'touchZoomRotate', value: $settings.interaction.touchZoomRotate },
+			{ name: 'scrollZoom', value: $settings.interaction.scrollZoom },
+			{ name: 'doubleClickZoom', value: $settings.interaction.doubleClickZoom },
+			{ name: 'dragPan', value: $settings.interaction.dragPan }
+		];
+		
+		handlers.forEach(({ name, value }) => {
+			const handler = currentMap[name as keyof mapboxgl.Map] as any;
+			if (handler) {
+				value ? handler.enable() : handler.disable();
+			}
+		});
+	});
+	
+	// Reactive: Update pitch and bearing
+	$effect(() => {
+		if (!map || !styleLoaded) return;
+		
+		map.setPitch($settings.view.pitch as number);
+		map.setBearing($settings.view.bearing as number);
+	});
+	
+	// Reactive: Toggle 3D buildings
+	$effect(() => {
+		if (!map || !styleLoaded) return;
+		
+		if ($settings.appearance.show3dBuildings) {
+			add3dBuildings();
+		} else if (map.getLayer('3d-buildings')) {
+			map.removeLayer('3d-buildings');
+		}
+	});
+	
+	// Reactive: Toggle terrain
+	$effect(() => {
+		if (!map || !styleLoaded) return;
+		
+		if ($settings.appearance.showTerrain) {
+			addTerrain();
+		} else if (map.getTerrain()) {
+			map.setTerrain(null);
+		}
+	});
+	
+	// One-time initialization using onMount (recommended for async/DOM-dependent setup)
+	onMount(() => {
+		if (!container) return;
+		
+		// Set Mapbox access token
+		mapboxgl.accessToken = accessToken;
+		
+		// Merge default options with initial options and settings
+		const options: MapOptions = {
+			...DEFAULT_MAP_OPTIONS,
+			...initialOptions,
+			accessToken
+		};
+		
+		// Initialize Mapbox map
+		map = new mapboxgl.Map({
+			container,
+			style: MAP_STYLES[$settings.appearance.style as keyof typeof MAP_STYLES] || options.style,
+			center: options.center,
+			zoom: options.zoom,
+			pitch: $settings.view.pitch as number,
+			bearing: $settings.view.bearing as number,
+			minZoom: $settings.view.minZoom as number,
+			maxZoom: $settings.view.maxZoom as number,
+			antialias: $settings.performance.antialias as boolean,
+			maxTileCacheSize: $settings.performance.maxTileCacheSize as number,
+			fadeDuration: $settings.performance.fadeDuration as number
+		});
+		
+		// Add controls based on settings
+		if ($settings.controls.showNavigationControls) {
+			map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+		}
+		
+		if ($settings.controls.showScaleControl) {
+			map.addControl(new mapboxgl.ScaleControl(), 'bottom-left');
+		}
+		
+		if ($settings.controls.showFullscreenControl) {
+			map.addControl(new mapboxgl.FullscreenControl(), 'top-right');
+		}
+		
+		if ($settings.controls.showGeolocateControl) {
+			map.addControl(
+				new mapboxgl.GeolocateControl({
+					positionOptions: { enableHighAccuracy: true },
+					trackUserLocation: true,
+					showUserHeading: true
+				}),
+				'top-right'
+			);
+		}
+		
+		// Initialize Deck.GL overlay
+		overlay = new MapboxOverlay({
+			interleaved: true,
+			layers: layers
+		});
+		
+		map.addControl(overlay as any);
+		
+		// Store map and overlay instances
+		if (mapStore) {
+			mapStore.setMap(map);
+			mapStore.setOverlay(overlay);
+			mapStore.setLayers(layers);
+		}
+		
+		// Map load event
+		map.on('load', () => {
+			if (!map) return;
+			
+			styleLoaded = true;
+			
+			if (mapStore) {
+				mapStore.setLoaded(true);
+			}
+			
+			// Add 3D buildings if enabled
+			if ($settings.appearance.show3dBuildings) {
+				add3dBuildings();
+			}
+			
+			// Add terrain if enabled
+			if ($settings.appearance.showTerrain) {
+				addTerrain();
+			}
+			
+			// Call user callback
+			if (onMapLoaded) {
+				onMapLoaded(map);
+			}
+		});
+		
+		// Track style loading for dynamic style changes
+		map.on('style.load', () => {
+			styleLoaded = true;
+		});
+		
+		// Track view state changes
+		map.on('move', () => {
+			if (!map || !mapStore) return;
+			
+			mapStore.updateViewState({
+				center: map.getCenter().toArray() as [number, number],
+				zoom: map.getZoom(),
+				pitch: map.getPitch(),
+				bearing: map.getBearing()
+			});
+		});
+		
+		// Cleanup on destroy
+		return () => {
+			if (map) {
+				map.remove();
+			}
+		};
+	});
+	
+	function add3dBuildings() {
+		if (!map) return;
+		if (!map.getLayer('3d-buildings')) {
+			const mapLayers = map.getStyle().layers;
+			const labelLayerId = mapLayers?.find(
+				(layer) => layer.type === 'symbol' && layer.layout?.['text-field']
+			)?.id;
+			
+			map.addLayer(
+				{
+					id: '3d-buildings',
+					source: 'composite',
+					'source-layer': 'building',
+					filter: ['==', 'extrude', 'true'],
+					type: 'fill-extrusion',
+					minzoom: 15,
+					paint: {
+						'fill-extrusion-color': '#aaa',
+						'fill-extrusion-height': [
+							'interpolate',
+							['linear'],
+							['zoom'],
+							15,
+							0,
+							15.05,
+							['get', 'height']
+						],
+						'fill-extrusion-base': [
+							'interpolate',
+							['linear'],
+							['zoom'],
+							15,
+							0,
+							15.05,
+							['get', 'min_height']
+						],
+						'fill-extrusion-opacity': 0.6
+					}
+				},
+				labelLayerId
+			);
+		}
+	}
+	
+	function addTerrain() {
+		if (!map) return;
+		if (!map.getSource('mapbox-dem')) {
+			map.addSource('mapbox-dem', {
+				type: 'raster-dem',
+				url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+				tileSize: 512,
+				maxzoom: 14
+			});
+			
+			map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.5 });
+		}
+	}
+	
+	// Export settings store for external access
+	export { settings };
+</script>
+
+
+
+<div class="map-container">
+	<div bind:this={container} class="map"></div>
+</div>
+
+<style>
+	.map-container {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	
+	.map {
+		width: 100%;
+		height: 100%;
+	}
+	
+	/* Import Mapbox CSS - This should be in your app's global CSS */
+</style>

package/dist/core/Map/Map.svelte.d.ts

@@ -0,0 +1,230 @@
+import type { Layer } from '@deck.gl/core';
+import { type MapStore } from './mapStore';
+import { type MapOptions } from './types';
+interface Props {
+    accessToken: string;
+    initialOptions?: Partial<MapOptions>;
+    namespace?: string;
+    layers?: Layer[];
+    mapStore?: MapStore;
+    onMapLoaded?: (map: mapboxgl.Map) => void;
+}
+declare const Map: import("svelte").Component<Props, {
+    settings: {
+        subscribe: (this: void, run: import("svelte/store").Subscriber<import("..").InferSettingsType<{
+            segments: ({
+                id: string;
+                title: string;
+                icon: string;
+                description: string;
+                fields: ({
+                    id: string;
+                    type: "select";
+                    label: string;
+                    description: string;
+                    defaultValue: string;
+                    options: {
+                        value: string;
+                        label: string;
+                        description: string;
+                    }[];
+                } | {
+                    id: string;
+                    type: "boolean";
+                    label: string;
+                    description: string;
+                    defaultValue: true;
+                    options?: undefined;
+                } | {
+                    id: string;
+                    type: "boolean";
+                    label: string;
+                    description: string;
+                    defaultValue: false;
+                    options?: undefined;
+                })[];
+            } | {
+                id: string;
+                title: string;
+                icon: string;
+                description: string;
+                fields: ({
+                    id: string;
+                    type: "range";
+                    label: string;
+                    description: string;
+                    defaultValue: number;
+                    min: number;
+                    max: number;
+                    step: number;
+                    showValue: true;
+                    unit: string;
+                } | {
+                    id: string;
+                    type: "number";
+                    label: string;
+                    description: string;
+                    defaultValue: number;
+                    min: number;
+                    max: number;
+                    step: number;
+                    showValue?: undefined;
+                    unit?: undefined;
+                })[];
+            } | {
+                id: string;
+                title: string;
+                icon: string;
+                description: string;
+                fields: ({
+                    id: string;
+                    type: "select";
+                    label: string;
+                    description: string;
+                    defaultValue: number;
+                    options: {
+                        value: number;
+                        label: string;
+                    }[];
+                    min?: undefined;
+                    max?: undefined;
+                    step?: undefined;
+                    unit?: undefined;
+                } | {
+                    id: string;
+                    type: "boolean";
+                    label: string;
+                    description: string;
+                    defaultValue: true;
+                    options?: undefined;
+                    min?: undefined;
+                    max?: undefined;
+                    step?: undefined;
+                    unit?: undefined;
+                } | {
+                    id: string;
+                    type: "number";
+                    label: string;
+                    description: string;
+                    defaultValue: number;
+                    min: number;
+                    max: number;
+                    step: number;
+                    unit: string;
+                    options?: undefined;
+                })[];
+            })[];
+        }>>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+        update: (segmentId: string, fieldId: string, value: any) => void;
+        updateSegment: (segmentId: string, values: Record<string, any>) => void;
+        reset: (segmentId: string, fieldId: string) => void;
+        resetSegment: (segmentId: string) => void;
+        resetAll: () => void;
+        getValues: () => import("..").InferSettingsType<{
+            segments: ({
+                id: string;
+                title: string;
+                icon: string;
+                description: string;
+                fields: ({
+                    id: string;
+                    type: "select";
+                    label: string;
+                    description: string;
+                    defaultValue: string;
+                    options: {
+                        value: string;
+                        label: string;
+                        description: string;
+                    }[];
+                } | {
+                    id: string;
+                    type: "boolean";
+                    label: string;
+                    description: string;
+                    defaultValue: true;
+                    options?: undefined;
+                } | {
+                    id: string;
+                    type: "boolean";
+                    label: string;
+                    description: string;
+                    defaultValue: false;
+                    options?: undefined;
+                })[];
+            } | {
+                id: string;
+                title: string;
+                icon: string;
+                description: string;
+                fields: ({
+                    id: string;
+                    type: "range";
+                    label: string;
+                    description: string;
+                    defaultValue: number;
+                    min: number;
+                    max: number;
+                    step: number;
+                    showValue: true;
+                    unit: string;
+                } | {
+                    id: string;
+                    type: "number";
+                    label: string;
+                    description: string;
+                    defaultValue: number;
+                    min: number;
+                    max: number;
+                    step: number;
+                    showValue?: undefined;
+                    unit?: undefined;
+                })[];
+            } | {
+                id: string;
+                title: string;
+                icon: string;
+                description: string;
+                fields: ({
+                    id: string;
+                    type: "select";
+                    label: string;
+                    description: string;
+                    defaultValue: number;
+                    options: {
+                        value: number;
+                        label: string;
+                    }[];
+                    min?: undefined;
+                    max?: undefined;
+                    step?: undefined;
+                    unit?: undefined;
+                } | {
+                    id: string;
+                    type: "boolean";
+                    label: string;
+                    description: string;
+                    defaultValue: true;
+                    options?: undefined;
+                    min?: undefined;
+                    max?: undefined;
+                    step?: undefined;
+                    unit?: undefined;
+                } | {
+                    id: string;
+                    type: "number";
+                    label: string;
+                    description: string;
+                    defaultValue: number;
+                    min: number;
+                    max: number;
+                    step: number;
+                    unit: string;
+                    options?: undefined;
+                })[];
+            })[];
+        }>;
+    };
+}, "mapStore">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/core/Map/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Map Component Exports
+ *
+ * Barrel export for clean imports
+ */
+export { default as Map } from './Map.svelte';
+export { createMapStore, isMapReady, getMapInstance, type MapStore } from './mapStore';
+export { mapSettingsSchema, type MapSettings } from './mapSettings';
+export { MAP_STYLES, DEFAULT_MAP_OPTIONS, type MapOptions, type MapState, type MapStyleName } from './types';

package/dist/core/Map/index.js

@@ -0,0 +1,9 @@
+/**
+ * Map Component Exports
+ *
+ * Barrel export for clean imports
+ */
+export { default as Map } from './Map.svelte';
+export { createMapStore, isMapReady, getMapInstance } from './mapStore';
+export { mapSettingsSchema } from './mapSettings';
+export { MAP_STYLES, DEFAULT_MAP_OPTIONS } from './types';

package/dist/core/Map/mapSettings.d.ts

@@ -0,0 +1,147 @@
+/**
+ * Map Settings Schema
+ *
+ * Defines the settings schema for map configuration using the Settings component.
+ * Integrates with the Settings system for reactive map configuration.
+ */
+/**
+ * Map settings schema for use with Settings component
+ */
+export declare const mapSettingsSchema: {
+    segments: ({
+        id: string;
+        title: string;
+        icon: string;
+        description: string;
+        fields: ({
+            id: string;
+            type: "select";
+            label: string;
+            description: string;
+            defaultValue: string;
+            options: {
+                value: string;
+                label: string;
+                description: string;
+            }[];
+        } | {
+            id: string;
+            type: "boolean";
+            label: string;
+            description: string;
+            defaultValue: true;
+            options?: undefined;
+        } | {
+            id: string;
+            type: "boolean";
+            label: string;
+            description: string;
+            defaultValue: false;
+            options?: undefined;
+        })[];
+    } | {
+        id: string;
+        title: string;
+        icon: string;
+        description: string;
+        fields: ({
+            id: string;
+            type: "range";
+            label: string;
+            description: string;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            showValue: true;
+            unit: string;
+        } | {
+            id: string;
+            type: "number";
+            label: string;
+            description: string;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            showValue?: undefined;
+            unit?: undefined;
+        })[];
+    } | {
+        id: string;
+        title: string;
+        icon: string;
+        description: string;
+        fields: ({
+            id: string;
+            type: "select";
+            label: string;
+            description: string;
+            defaultValue: number;
+            options: {
+                value: number;
+                label: string;
+            }[];
+            min?: undefined;
+            max?: undefined;
+            step?: undefined;
+            unit?: undefined;
+        } | {
+            id: string;
+            type: "boolean";
+            label: string;
+            description: string;
+            defaultValue: true;
+            options?: undefined;
+            min?: undefined;
+            max?: undefined;
+            step?: undefined;
+            unit?: undefined;
+        } | {
+            id: string;
+            type: "number";
+            label: string;
+            description: string;
+            defaultValue: number;
+            min: number;
+            max: number;
+            step: number;
+            unit: string;
+            options?: undefined;
+        })[];
+    })[];
+};
+/**
+ * Type inference for map settings
+ */
+export type MapSettings = {
+    appearance: {
+        style: string;
+        show3dBuildings: boolean;
+        showTerrain: boolean;
+    };
+    controls: {
+        showNavigationControls: boolean;
+        showScaleControl: boolean;
+        showFullscreenControl: boolean;
+        showGeolocateControl: boolean;
+    };
+    interaction: {
+        dragRotate: boolean;
+        touchZoomRotate: boolean;
+        scrollZoom: boolean;
+        doubleClickZoom: boolean;
+        dragPan: boolean;
+    };
+    view: {
+        pitch: number;
+        bearing: number;
+        minZoom: number;
+        maxZoom: number;
+    };
+    performance: {
+        maxTileCacheSize: number;
+        antialias: boolean;
+        fadeDuration: number;
+    };
+};