@smartnet360/svelte-components 0.0.51 → 0.0.53

package/dist/core/Map/Map.svelte

@@ -1,312 +0,0 @@
-<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

@@ -1,230 +0,0 @@
-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

@@ -1,9 +0,0 @@
-/**
- * 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

@@ -1,9 +0,0 @@
-/**
- * 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

@@ -1,147 +0,0 @@
-/**
- * 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;
-    };
-};