@smartnet360/svelte-components 0.0.39 → 0.0.41

package/dist/core/Map/mapSettings.js

@@ -0,0 +1,226 @@
+/**
+ * Map Settings Schema
+ *
+ * Defines the settings schema for map configuration using the Settings component.
+ * Integrates with the Settings system for reactive map configuration.
+ */
+import { MAP_STYLES } from './types';
+/**
+ * Map settings schema for use with Settings component
+ */
+export const mapSettingsSchema = {
+    segments: [
+        {
+            id: 'appearance',
+            title: 'Map Appearance',
+            icon: '🎨',
+            description: 'Visual style and theme settings',
+            fields: [
+                {
+                    id: 'style',
+                    type: 'select',
+                    label: 'Map Style',
+                    description: 'Choose the base map style',
+                    defaultValue: 'streets',
+                    options: [
+                        { value: 'streets', label: 'Streets', description: 'Default street map' },
+                        { value: 'satellite', label: 'Satellite', description: 'Satellite imagery' },
+                        {
+                            value: 'satelliteStreets',
+                            label: 'Satellite Streets',
+                            description: 'Satellite with street labels'
+                        },
+                        { value: 'light', label: 'Light', description: 'Light colored theme' },
+                        { value: 'dark', label: 'Dark', description: 'Dark colored theme' },
+                        { value: 'outdoors', label: 'Outdoors', description: 'Outdoor/terrain map' },
+                        { value: 'navigationDay', label: 'Navigation Day', description: 'Navigation optimized' },
+                        { value: 'navigationNight', label: 'Navigation Night', description: 'Night navigation' }
+                    ]
+                },
+                {
+                    id: 'show3dBuildings',
+                    type: 'boolean',
+                    label: 'Show 3D Buildings',
+                    description: 'Display buildings in 3D when zoomed in',
+                    defaultValue: true
+                },
+                {
+                    id: 'showTerrain',
+                    type: 'boolean',
+                    label: 'Show Terrain',
+                    description: 'Display 3D terrain elevation',
+                    defaultValue: false
+                }
+            ]
+        },
+        {
+            id: 'controls',
+            title: 'Map Controls',
+            icon: '🎮',
+            description: 'Control visibility and behavior',
+            fields: [
+                {
+                    id: 'showNavigationControls',
+                    type: 'boolean',
+                    label: 'Navigation Controls',
+                    description: 'Show zoom and rotation controls',
+                    defaultValue: true
+                },
+                {
+                    id: 'showScaleControl',
+                    type: 'boolean',
+                    label: 'Scale Control',
+                    description: 'Show distance scale',
+                    defaultValue: true
+                },
+                {
+                    id: 'showFullscreenControl',
+                    type: 'boolean',
+                    label: 'Fullscreen Control',
+                    description: 'Show fullscreen toggle button',
+                    defaultValue: false
+                },
+                {
+                    id: 'showGeolocateControl',
+                    type: 'boolean',
+                    label: 'Geolocation Control',
+                    description: 'Show user location button',
+                    defaultValue: false
+                }
+            ]
+        },
+        {
+            id: 'interaction',
+            title: 'Interaction',
+            icon: '👆',
+            description: 'User interaction settings',
+            fields: [
+                {
+                    id: 'dragRotate',
+                    type: 'boolean',
+                    label: 'Drag to Rotate',
+                    description: 'Enable rotation by dragging with right mouse or ctrl+drag',
+                    defaultValue: true
+                },
+                {
+                    id: 'touchZoomRotate',
+                    type: 'boolean',
+                    label: 'Touch Zoom/Rotate',
+                    description: 'Enable pinch to zoom and rotate on touch devices',
+                    defaultValue: true
+                },
+                {
+                    id: 'scrollZoom',
+                    type: 'boolean',
+                    label: 'Scroll to Zoom',
+                    description: 'Enable mouse wheel zoom',
+                    defaultValue: true
+                },
+                {
+                    id: 'doubleClickZoom',
+                    type: 'boolean',
+                    label: 'Double Click Zoom',
+                    description: 'Enable double click to zoom',
+                    defaultValue: true
+                },
+                {
+                    id: 'dragPan',
+                    type: 'boolean',
+                    label: 'Drag to Pan',
+                    description: 'Enable map panning by dragging',
+                    defaultValue: true
+                }
+            ]
+        },
+        {
+            id: 'view',
+            title: 'View Settings',
+            icon: '🌍',
+            description: 'Camera and viewport settings',
+            fields: [
+                {
+                    id: 'pitch',
+                    type: 'range',
+                    label: 'Pitch',
+                    description: 'Camera tilt angle (0-85 degrees)',
+                    defaultValue: 0,
+                    min: 0,
+                    max: 85,
+                    step: 5,
+                    showValue: true,
+                    unit: '°'
+                },
+                {
+                    id: 'bearing',
+                    type: 'range',
+                    label: 'Bearing',
+                    description: 'Map rotation angle (0-360 degrees)',
+                    defaultValue: 0,
+                    min: 0,
+                    max: 360,
+                    step: 15,
+                    showValue: true,
+                    unit: '°'
+                },
+                {
+                    id: 'minZoom',
+                    type: 'number',
+                    label: 'Min Zoom',
+                    description: 'Minimum zoom level',
+                    defaultValue: 0,
+                    min: 0,
+                    max: 22,
+                    step: 1
+                },
+                {
+                    id: 'maxZoom',
+                    type: 'number',
+                    label: 'Max Zoom',
+                    description: 'Maximum zoom level',
+                    defaultValue: 22,
+                    min: 0,
+                    max: 22,
+                    step: 1
+                }
+            ]
+        },
+        {
+            id: 'performance',
+            title: 'Performance',
+            icon: '⚡',
+            description: 'Performance and rendering settings',
+            fields: [
+                {
+                    id: 'maxTileCacheSize',
+                    type: 'select',
+                    label: 'Tile Cache Size',
+                    description: 'Maximum number of tiles to cache',
+                    defaultValue: 500,
+                    options: [
+                        { value: 100, label: 'Small (100)' },
+                        { value: 500, label: 'Medium (500)' },
+                        { value: 1000, label: 'Large (1000)' }
+                    ]
+                },
+                {
+                    id: 'antialias',
+                    type: 'boolean',
+                    label: 'Anti-aliasing',
+                    description: 'Enable anti-aliasing for smoother rendering (may impact performance)',
+                    defaultValue: true
+                },
+                {
+                    id: 'fadeDuration',
+                    type: 'number',
+                    label: 'Fade Duration',
+                    description: 'Tile fade-in duration in milliseconds',
+                    defaultValue: 300,
+                    min: 0,
+                    max: 1000,
+                    step: 100,
+                    unit: 'ms'
+                }
+            ]
+        }
+    ]
+};

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

@@ -0,0 +1,73 @@
+/**
+ * Map Store
+ *
+ * Centralized store for map instance and state management.
+ * Allows components to access map instance and react to state changes.
+ */
+import type { Readable } from 'svelte/store';
+import type { Map as MapboxMap } from 'mapbox-gl';
+import type { MapboxOverlay } from '@deck.gl/mapbox';
+import type { Layer } from '@deck.gl/core';
+import type { MapState } from './types';
+/**
+ * Create a map store instance
+ * Each map component should create its own store instance
+ */
+export declare function createMapStore(): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<MapState>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    /**
+     * Set the map instance after initialization
+     */
+    setMap(map: MapboxMap): void;
+    /**
+     * Set the Deck.GL overlay instance
+     */
+    setOverlay(overlay: MapboxOverlay): void;
+    /**
+     * Update Deck.GL layers
+     */
+    setLayers(layers: Layer[]): void;
+    /**
+     * Add a layer to the existing layers
+     */
+    addLayer(layer: Layer): void;
+    /**
+     * Remove a layer by id
+     */
+    removeLayer(layerId: string): void;
+    /**
+     * Mark map as loaded
+     */
+    setLoaded(isLoaded: boolean): void;
+    /**
+     * Update map view state
+     */
+    updateViewState(updates: Partial<Pick<MapState, "center" | "zoom" | "pitch" | "bearing">>): void;
+    /**
+     * Fly to a location
+     */
+    flyTo(center: [number, number], zoom?: number, options?: {
+        duration?: number;
+    }): void;
+    /**
+     * Fit map to bounds
+     */
+    fitBounds(bounds: [[number, number], [number, number]], padding?: number): void;
+    /**
+     * Reset to initial state
+     */
+    reset(): void;
+    /**
+     * Clean up map resources
+     */
+    destroy(): void;
+};
+export type MapStore = ReturnType<typeof createMapStore>;
+/**
+ * Derived store: Check if map is ready to use
+ */
+export declare function isMapReady(mapStore: MapStore): Readable<boolean>;
+/**
+ * Derived store: Get current map instance (null-safe)
+ */
+export declare function getMapInstance(mapStore: MapStore): Readable<MapboxMap | null>;

package/dist/core/Map/mapStore.js

@@ -0,0 +1,136 @@
+/**
+ * Map Store
+ *
+ * Centralized store for map instance and state management.
+ * Allows components to access map instance and react to state changes.
+ */
+import { writable, derived, get } from 'svelte/store';
+/**
+ * Create a map store instance
+ * Each map component should create its own store instance
+ */
+export function createMapStore() {
+    const initialState = {
+        map: null,
+        overlay: null,
+        layers: [],
+        isLoaded: false,
+        center: [-74.5, 40],
+        zoom: 9,
+        pitch: 0,
+        bearing: 0
+    };
+    const store = writable(initialState);
+    return {
+        subscribe: store.subscribe,
+        /**
+         * Set the map instance after initialization
+         */
+        setMap(map) {
+            store.update(state => ({ ...state, map }));
+        },
+        /**
+         * Set the Deck.GL overlay instance
+         */
+        setOverlay(overlay) {
+            store.update(state => ({ ...state, overlay }));
+        },
+        /**
+         * Update Deck.GL layers
+         */
+        setLayers(layers) {
+            const state = get(store);
+            if (state.overlay) {
+                state.overlay.setProps({ layers });
+            }
+            store.update(s => ({ ...s, layers }));
+        },
+        /**
+         * Add a layer to the existing layers
+         */
+        addLayer(layer) {
+            const state = get(store);
+            const newLayers = [...state.layers, layer];
+            if (state.overlay) {
+                state.overlay.setProps({ layers: newLayers });
+            }
+            store.update(s => ({ ...s, layers: newLayers }));
+        },
+        /**
+         * Remove a layer by id
+         */
+        removeLayer(layerId) {
+            const state = get(store);
+            const newLayers = state.layers.filter(l => l.id !== layerId);
+            if (state.overlay) {
+                state.overlay.setProps({ layers: newLayers });
+            }
+            store.update(s => ({ ...s, layers: newLayers }));
+        },
+        /**
+         * Mark map as loaded
+         */
+        setLoaded(isLoaded) {
+            store.update(state => ({ ...state, isLoaded }));
+        },
+        /**
+         * Update map view state
+         */
+        updateViewState(updates) {
+            store.update(state => ({ ...state, ...updates }));
+        },
+        /**
+         * Fly to a location
+         */
+        flyTo(center, zoom, options) {
+            const state = get(store);
+            if (state.map) {
+                state.map.flyTo({
+                    center,
+                    zoom: zoom ?? state.zoom,
+                    duration: options?.duration ?? 1000
+                });
+            }
+        },
+        /**
+         * Fit map to bounds
+         */
+        fitBounds(bounds, padding) {
+            const state = get(store);
+            if (state.map) {
+                state.map.fitBounds(bounds, {
+                    padding: padding ?? 50,
+                    duration: 1000
+                });
+            }
+        },
+        /**
+         * Reset to initial state
+         */
+        reset() {
+            store.set(initialState);
+        },
+        /**
+         * Clean up map resources
+         */
+        destroy() {
+            const state = get(store);
+            if (state.map) {
+                state.map.remove();
+            }
+            this.reset();
+        }
+    };
+}
+/**
+ * Derived store: Check if map is ready to use
+ */
+export function isMapReady(mapStore) {
+    return derived(mapStore, $store => $store.map !== null && $store.overlay !== null && $store.isLoaded);
+}
+/**
+ * Derived store: Get current map instance (null-safe)
+ */
+export function getMapInstance(mapStore) {
+    return derived(mapStore, $store => $store.map);
+}

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

@@ -0,0 +1,72 @@
+/**
+ * Map Component Type Definitions
+ *
+ * Defines types for Mapbox GL + Deck.GL integration
+ */
+import type { Map as MapboxMap } from 'mapbox-gl';
+import type { MapboxOverlay } from '@deck.gl/mapbox';
+import type { Layer } from '@deck.gl/core';
+/**
+ * Map initialization options
+ */
+export interface MapOptions {
+    /** Mapbox access token (required) */
+    accessToken: string;
+    /** Initial map style */
+    style?: string;
+    /** Initial center coordinates [lng, lat] */
+    center?: [number, number];
+    /** Initial zoom level */
+    zoom?: number;
+    /** Initial pitch (tilt) in degrees */
+    pitch?: number;
+    /** Initial bearing (rotation) in degrees */
+    bearing?: number;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Whether to show navigation controls */
+    showControls?: boolean;
+    /** Whether to show scale control */
+    showScale?: boolean;
+}
+/**
+ * Map state (stored in mapStore)
+ */
+export interface MapState {
+    /** The Mapbox GL instance */
+    map: MapboxMap | null;
+    /** The Deck.GL overlay instance */
+    overlay: MapboxOverlay | null;
+    /** Current Deck.GL layers */
+    layers: Layer[];
+    /** Whether the map is loaded and ready */
+    isLoaded: boolean;
+    /** Current map center */
+    center: [number, number];
+    /** Current zoom level */
+    zoom: number;
+    /** Current pitch */
+    pitch: number;
+    /** Current bearing */
+    bearing: number;
+}
+/**
+ * Map style presets
+ */
+export declare const MAP_STYLES: {
+    readonly streets: "mapbox://styles/mapbox/streets-v12";
+    readonly satellite: "mapbox://styles/mapbox/satellite-v9";
+    readonly satelliteStreets: "mapbox://styles/mapbox/satellite-streets-v12";
+    readonly light: "mapbox://styles/mapbox/light-v11";
+    readonly dark: "mapbox://styles/mapbox/dark-v11";
+    readonly outdoors: "mapbox://styles/mapbox/outdoors-v12";
+    readonly navigationDay: "mapbox://styles/mapbox/navigation-day-v1";
+    readonly navigationNight: "mapbox://styles/mapbox/navigation-night-v1";
+};
+export type MapStyleName = keyof typeof MAP_STYLES;
+/**
+ * Default map options
+ */
+export declare const DEFAULT_MAP_OPTIONS: Partial<MapOptions>;

package/dist/core/Map/types.js

@@ -0,0 +1,32 @@
+/**
+ * Map Component Type Definitions
+ *
+ * Defines types for Mapbox GL + Deck.GL integration
+ */
+/**
+ * Map style presets
+ */
+export const MAP_STYLES = {
+    streets: 'mapbox://styles/mapbox/streets-v12',
+    satellite: 'mapbox://styles/mapbox/satellite-v9',
+    satelliteStreets: 'mapbox://styles/mapbox/satellite-streets-v12',
+    light: 'mapbox://styles/mapbox/light-v11',
+    dark: 'mapbox://styles/mapbox/dark-v11',
+    outdoors: 'mapbox://styles/mapbox/outdoors-v12',
+    navigationDay: 'mapbox://styles/mapbox/navigation-day-v1',
+    navigationNight: 'mapbox://styles/mapbox/navigation-night-v1'
+};
+/**
+ * Default map options
+ */
+export const DEFAULT_MAP_OPTIONS = {
+    style: MAP_STYLES.streets,
+    center: [-74.5, 40],
+    zoom: 9,
+    pitch: 0,
+    bearing: 0,
+    minZoom: 0,
+    maxZoom: 22,
+    showControls: true,
+    showScale: true
+};

package/dist/core/Settings/FieldRenderer.svelte

@@ -9,10 +9,14 @@
 	 * Works with hierarchical store structure.
 	 */
 	
-	export let field: FieldDefinition;
-	export let segmentId: string;
-	export let store: any; // The hierarchical settings store
-	export let value: any;
+	interface Props {
+		field: FieldDefinition;
+		segmentId: string;
+		store: any; // The hierarchical settings store
+		value: any;
+	}
+	
+	let { field, segmentId, store, value }: Props = $props();
 	
 	// Generate unique ID for form elements
 	const inputId = `field-${segmentId}-${field.id}`;
@@ -32,7 +36,7 @@
 				class="form-check-input"
 				checked={value}
 				disabled={field.disabled}
-				on:change={(e) => handleChange(e.currentTarget.checked)}
+				onchange={(e) => handleChange(e.currentTarget.checked)}
 			/>
 			<label class="form-check-label" for={inputId}>
 				{field.label}
@@ -57,7 +61,7 @@
 			maxlength={field.maxLength}
 			pattern={field.pattern}
 			disabled={field.disabled}
-			on:input={(e) => handleChange(e.currentTarget.value)}
+			oninput={(e) => handleChange(e.currentTarget.value)}
 		/>
 		{#if field.description}
 			<div class="form-text">{field.description}</div>
@@ -79,7 +83,7 @@
 				max={field.max}
 				step={field.step}
 				disabled={field.disabled}
-				on:input={(e) => handleChange(parseFloat(e.currentTarget.value))}
+				oninput={(e) => handleChange(parseFloat(e.currentTarget.value))}
 			/>
 			{#if field.unit}
 				<span class="input-group-text">{field.unit}</span>
@@ -107,7 +111,7 @@
 			max={field.max}
 			step={field.step || 1}
 			disabled={field.disabled}
-			on:input={(e) => handleChange(parseFloat(e.currentTarget.value))}
+			oninput={(e) => handleChange(parseFloat(e.currentTarget.value))}
 		/>
 		{#if field.description}
 			<div class="form-text">{field.description}</div>
@@ -126,14 +130,14 @@
 				class="form-control form-control-color"
 				value={value}
 				disabled={field.disabled}
-				on:input={(e) => handleChange(e.currentTarget.value)}
+				oninput={(e) => handleChange(e.currentTarget.value)}
 			/>
 			<input
 				type="text"
 				class="form-control"
 				value={value}
 				disabled={field.disabled}
-				on:input={(e) => handleChange(e.currentTarget.value)}
+				oninput={(e) => handleChange(e.currentTarget.value)}
 			/>
 		</div>
 		{#if field.description}
@@ -151,7 +155,7 @@
 			class="form-select"
 			value={value}
 			disabled={field.disabled}
-			on:change={(e) => handleChange(e.currentTarget.value)}
+			onchange={(e) => handleChange(e.currentTarget.value)}
 		>
 			{#each field.options as option}
 				<option value={option.value}>
@@ -179,7 +183,7 @@
 					value={option.value}
 					checked={value === option.value}
 					disabled={field.disabled}
-					on:change={() => handleChange(option.value)}
+					onchange={() => handleChange(option.value)}
 				/>
 				<label class="form-check-label" for={`${inputId}-${index}`}>
 					{option.label}
@@ -199,11 +203,11 @@
 				<span class="text-muted" title={field.tooltip}>ⓘ</span>
 			{/if}
 		</label>
-		<svelte:component
-			this={field.component}
+		{@const Component = field.component}
+		<Component
 			{value}
 			disabled={field.disabled}
-			on:change={(e: CustomEvent) => handleChange(e.detail)}
+			onchange={(e: CustomEvent) => handleChange(e.detail)}
 			{...field.componentProps}
 		/>
 		{#if field.description}

package/dist/core/Settings/FieldRenderer.svelte.d.ts

@@ -1,30 +1,17 @@
 import type { FieldDefinition } from './types';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FieldRenderer: $$__sveltets_2_IsomorphicComponent<{
-    /**
-         * Generic Field Renderer
-         *
-         * Renders a form field based on its type definition.
-         * Uses Bootstrap form components for styling.
-         * Works with hierarchical store structure.
-         */ field: FieldDefinition;
+/**
+ * Generic Field Renderer
+ *
+ * Renders a form field based on its type definition.
+ * Uses Bootstrap form components for styling.
+ * Works with hierarchical store structure.
+ */
+interface Props {
+    field: FieldDefinition;
     segmentId: string;
     store: any;
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FieldRenderer = InstanceType<typeof FieldRenderer>;
+}
+declare const FieldRenderer: import("svelte").Component<Props, {}, "">;
+type FieldRenderer = ReturnType<typeof FieldRenderer>;
 export default FieldRenderer;