@kispace-io/gs-lib 1.1.8 → 1.2.0

package/src/ol/openlayers-map-renderer.ts

@@ -0,0 +1,719 @@
+import { MapOperations, MapRenderer, MapSyncEvent, ScreenshotResult } from "../map-renderer";
+import {
+    GsMap,
+    GsSourceType,
+    KEY_NAME,
+    KEY_STATE,
+    KEY_UUID,
+    GsFeature,
+    GsGeometry,
+    ensureUuid,
+    getStyleForFeature
+} from "../gs-model";
+import { toOlLayer, cleanupEventSubscriptions, toOlStyle } from "./gs-gs2ol";
+import { toGsFeature } from "./gs-ol2gs";
+import { olLib } from "./gs-ol-lib";
+import { v4 as uuidv4 } from 'uuid';
+import {
+    Map as OlMap,
+    Feature,
+    style,
+    sphere,
+    geom,
+    layer as layerNS,
+    source as sourceNS,
+    interaction as interactionNS,
+    FeatureLike,
+    eventsCondition,
+    BaseLayer
+} from "./gs-olns";
+
+/**
+ * Lightweight helper to extract minimal GsFeature data for style evaluation
+ * Avoids the overhead of full toGsFeature() conversion
+ */
+function getFeatureStyleData(feature: Feature): GsFeature {
+    const geometry = feature.getGeometry() as geom.Geometry;
+    return ensureUuid({
+        geometry: ensureUuid({
+            type: geometry.getType(),
+            coordinates: []  // Not needed for style rules
+        } as GsGeometry),
+        state: feature.get(KEY_STATE)
+    } as GsFeature);
+}
+
+/**
+ * OpenLayers map renderer that manages OpenLayers maps
+ * Provides complete isolation between the host app and the rendering engine
+ * User modules are handled by the toOlMap() function
+ */
+export class OpenLayersMapRenderer implements MapRenderer {
+    public olMap?: OlMap; // Made public for backward compatibility
+    gsMap: GsMap;
+    private env?: any;
+    private onDirtyCallback?: () => void;
+    private onSyncCallback?: (event: MapSyncEvent) => void;
+    private isDestroyed: boolean = false;
+    private operations?: OpenLayersMapOperations;
+    private styleCache: Map<string, style.Style> = new Map();
+
+    constructor(gsMap: GsMap, env?: any) {
+        this.gsMap = gsMap;
+        this.env = env;
+    }
+
+    async reattached(): Promise<void> {
+        // OpenLayers doesn't need special handling for reattachment
+        // The map stays attached to its container element
+    }
+
+    async render(container: string | HTMLElement): Promise<void> {
+        try {
+            // Use the runtime library to render the map
+            this.olMap = await olLib({
+                containerSelector: container,
+                gsMap: this.gsMap,
+                env: this.env,
+                mapOptions: {
+                    controls: { zoom: false, attribution: false }
+                }
+            });
+            
+            // Create operations after map is available
+            this.operations = new OpenLayersMapOperations(this.olMap, this);
+            
+            // Apply styling to all vector layers
+            this.applyStylesToLayers();
+            
+            // Set up event listeners after the map is rendered
+            this.olMap.once('rendercomplete', () => {
+                this.setupEventListeners();
+            });
+            
+        } catch (error) {
+            console.error('Failed to render map:', error);
+            throw error;
+        }
+    }
+    
+    private applyStylesToLayers(): void {
+        if (!this.olMap) return;
+        
+        const layers = this.olMap.getLayers().getArray();
+        layers.forEach(layer => {
+            if (layer instanceof layerNS.Vector) {
+                this.applyStyleToVectorLayer(layer);
+            }
+        });
+    }
+    
+    private applyStyleToVectorLayer(layer: layerNS.Vector): void {
+        const layerName = layer.get(KEY_NAME);
+        
+        // Create a style function that applies rules to each feature
+        const styleFunction = (feature: FeatureLike) => {
+            // Only process actual Feature objects (not RenderFeature)
+            if (!(feature instanceof Feature)) {
+                return undefined;
+            }
+            
+            // Extract minimal data needed for style evaluation (lightweight, no coordinate conversion)
+            const featureStyleData = getFeatureStyleData(feature);
+            const styleRules = this.gsMap.styleRules;
+            const stylesMap = this.gsMap.styles;
+            
+            if (styleRules && stylesMap) {
+                const gsStyle = getStyleForFeature(featureStyleData, styleRules, stylesMap, layerName);
+                if (gsStyle && gsStyle.id) {
+                    // Check cache first
+                    let olStyle = this.styleCache.get(gsStyle.id);
+                    if (!olStyle) {
+                        // Convert and cache
+                        olStyle = toOlStyle(gsStyle);
+                        this.styleCache.set(gsStyle.id, olStyle);
+                    }
+                    return olStyle;
+                } else if (gsStyle) {
+                    // Style without ID - can't cache, convert directly
+                    return toOlStyle(gsStyle);
+                }
+            }
+            
+            // Return undefined to use default OpenLayers styling
+            return undefined;
+        };
+        
+        layer.setStyle(styleFunction);
+    }
+    
+    private clearStyleCache(): void {
+        this.styleCache.clear();
+    }
+    
+    async modelToUI(updatedGsMap?: GsMap): Promise<void> {
+        if (!this.olMap) {
+            throw new Error('Map not initialized');
+        }
+        
+        // Update the gsMap if provided
+        if (updatedGsMap) {
+            this.gsMap = updatedGsMap;
+        }
+        
+        // Clear style cache when model changes (styles/rules may have changed)
+        this.clearStyleCache();
+        
+        // Get the container before destroying the map
+        const target = this.olMap.getTarget();
+        if (!target || typeof target === 'string') {
+            throw new Error('Map container not found or invalid');
+        }
+
+        this.destroy();
+
+        // Clear the DOM container
+        target.innerHTML = '';
+
+        this.isDestroyed = false;
+        await this.render(target);
+    }
+    
+
+    getOperations(): MapOperations {
+        if (!this.operations) {
+            throw new Error("Operations not available - map not rendered yet");
+        }
+        return this.operations;
+    }
+
+    async getViewExtent(): Promise<number[]> {
+        console.debug("Getting view extent");
+        if (!this.olMap) {
+            throw new Error("Map not available for extent calculation");
+        }
+
+        const view = this.olMap.getView();
+        const extent = view.calculateExtent();
+        console.debug(`View extent: ${extent}`);
+        return extent;
+    }
+
+    async captureScreenshot(): Promise<ScreenshotResult> {
+        if (!this.olMap) {
+            return { success: false, error: 'Map not available' };
+        }
+
+        const olMap = this.olMap;
+
+        // Wait for the map to finish rendering
+        await new Promise<void>((resolve) => {
+            olMap.renderSync();
+            olMap.once('rendercomplete', () => resolve());
+            // Fallback timeout in case rendercomplete doesn't fire
+            setTimeout(() => resolve(), 2000);
+        });
+
+        const size = olMap.getSize();
+        const width = size ? size[0] : olMap.getViewport().clientWidth;
+        const height = size ? size[1] : olMap.getViewport().clientHeight;
+
+        try {
+            const canvas = olMap.getViewport().querySelector('canvas');
+            if (!canvas) {
+                return { success: false, error: 'Map canvas not found' };
+            }
+
+            const dataUrl = canvas.toDataURL('image/png');
+            return { success: true, dataUrl, width, height };
+        } catch (error: any) {
+            return { success: false, error: `Failed to capture canvas: ${error.message}` };
+        }
+    }
+
+    setOnDirty(callback: () => void): void {
+        this.onDirtyCallback = callback;
+    }
+
+    setOnSync(callback: (event: MapSyncEvent) => void): void {
+        this.onSyncCallback = callback;
+    }
+
+    triggerDirty(): void {
+        if (this.isDestroyed || !this.onDirtyCallback) return;
+        this.onDirtyCallback();
+    }
+
+    triggerSync(event: MapSyncEvent): void {
+        if (this.isDestroyed || !this.onSyncCallback) return;
+        this.onSyncCallback(event);
+    }
+
+    private syncViewToModel(): void {
+        if (!this.olMap) return;
+
+        const view = this.olMap.getView();
+        const center = view.getCenter();
+        const zoom = view.getZoom();
+        const rotation = view.getRotation();
+
+        // Notify host with specific view change event
+        if (center && zoom !== undefined) {
+            this.triggerSync({
+                type: 'viewChanged',
+                view: { center: center as [number, number], zoom, rotation }
+            });
+        }
+    }
+
+    public syncLayerFeaturesToModel(layerUuid: string): void {
+        if (!this.olMap) return;
+
+        const layers = this.olMap.getLayers();
+        let olLayer: BaseLayer | undefined;
+        for (let i = 0; i < layers.getLength(); i++) {
+            const layer = layers.item(i);
+            if (layer.get(KEY_UUID) === layerUuid) {
+                olLayer = layer;
+                break;
+            }
+        }
+        
+        if (!olLayer || !(olLayer instanceof layerNS.Vector)) return;
+
+        const source = olLayer.getSource();
+        if (!source) return;
+
+        // Convert OpenLayers features back to GsFeatures
+        const olFeatures = source.getFeatures();
+        const gsFeatures = olFeatures.map((olFeature: Feature) => toGsFeature(olFeature));
+
+        // Notify host with features change event
+        this.triggerSync({
+            type: 'featuresChanged',
+            layerUuid,
+            features: gsFeatures
+        });
+    }
+
+    private setupEventListeners(): void {
+        if (!this.olMap) return;
+
+        // Sync view changes back to domain model before triggering dirty
+        this.olMap.getView().on('change:center', () => {
+            this.syncViewToModel();
+            this.triggerDirty();
+        });
+        this.olMap.getView().on('change:resolution', () => {
+            this.syncViewToModel();
+            this.triggerDirty();
+        });
+        this.olMap.getView().on('change:rotation', () => {
+            this.syncViewToModel();
+            this.triggerDirty();
+        });
+
+        this.olMap.getLayers().on('add', () => this.triggerDirty());
+        this.olMap.getLayers().on('remove', () => this.triggerDirty());
+
+        this.olMap.getControls().on('add', () => this.triggerDirty());
+        this.olMap.getControls().on('remove', () => this.triggerDirty());
+
+        this.olMap.getOverlays().on('add', () => this.triggerDirty());
+        this.olMap.getOverlays().on('remove', () => this.triggerDirty());
+    }
+
+    
+    destroy(): void {
+        this.isDestroyed = true;
+        this.clearStyleCache();
+        // Cleanup operations (removes keyboard listeners) before destroying map
+        if (this.operations) {
+            const ops = this.operations as any;
+            if (ops.cleanup) {
+                ops.cleanup();
+            }
+        }
+        // Cleanup event subscriptions before disposing map
+        if (this.olMap) {
+            cleanupEventSubscriptions(this.olMap);
+        }
+        this.olMap?.dispose();
+        this.olMap = undefined;
+    }
+
+}
+
+/**
+ * OpenLayers-specific map operations implementation
+ */
+export class OpenLayersMapOperations implements MapOperations {
+    private drawInteraction?: interactionNS.Draw;
+    private selectInteraction?: interactionNS.Select;
+    private activeDrawingLayerUuid?: string;
+    private keyDownListener?: (event: KeyboardEvent) => void;
+
+    constructor(
+        private olMap: OlMap,
+        private renderer?: OpenLayersMapRenderer
+    ) {
+        if (!olMap) {
+            throw new Error("OpenLayers map is required for operations");
+        }
+        
+        // Setup ESC key handler
+        this.keyDownListener = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                if (this.drawInteraction) {
+                    this.disableDrawing();
+                    this.renderer?.triggerSync({ type: 'drawingDisabled' } as any);
+                }
+                if (this.selectInteraction) {
+                    this.disableSelection();
+                }
+            }
+        };
+        
+        const target = this.olMap.getTargetElement();
+        if (target && target instanceof HTMLElement) {
+            target.setAttribute('tabindex', '-1');
+            target.addEventListener('keydown', this.keyDownListener);
+        }
+    }
+
+    async setZoom(zoom: number): Promise<void> {
+        this.olMap.getView().setZoom(zoom);
+    }
+
+    async setCenter(center: [number, number]): Promise<void> {
+        this.olMap.getView().setCenter(center);
+    }
+
+    async switchColorMode(mode?: 'dark' | 'light'): Promise<void> {
+        const olMap = this.olMap;
+        let darkMode: boolean = olMap.get("darkmode") ?? false;
+
+        if (mode === 'dark') {
+            darkMode = true;
+        } else if (mode === 'light') {
+            darkMode = false;
+        } else {
+            darkMode = !darkMode;
+        }
+
+        olMap.set("darkmode", darkMode);
+
+        const canvasElements = document.querySelectorAll('canvas');
+        canvasElements.forEach(canvas => {
+            canvas.style.filter = darkMode ? "invert(100%)" : "";
+        });
+
+        olMap.render();
+    }
+
+    async addLayer(layer: any, isBasemap?: boolean): Promise<void> {
+        const olLayer = toOlLayer(layer);
+        if (isBasemap) {
+            this.olMap.getLayers().insertAt(0, olLayer);
+        } else {
+            this.olMap.getLayers().push(olLayer);
+        }
+    }
+
+    async deleteLayer(uuid: string): Promise<void> {
+        const layers = this.olMap.getLayers();
+        for (let i = 0; i < layers.getLength(); i++) {
+            const layer = layers.item(i);
+            if (layer.get(KEY_UUID) === uuid) {
+                layers.removeAt(i);
+                return;
+            }
+        }
+    }
+
+    async renameLayer(uuid: string, newName: string): Promise<void> {
+        const layers = this.olMap.getLayers();
+        for (let i = 0; i < layers.getLength(); i++) {
+            const layer = layers.item(i);
+            if (layer.get(KEY_UUID) === uuid) {
+                layer.set(KEY_NAME, newName);
+                return;
+            }
+        }
+    }
+
+    async moveLayer(uuid: string, targetUuid?: string): Promise<void> {
+        const layers = this.olMap.getLayers();
+        let fromIndex = -1;
+        let toIndex = -1;
+        
+        for (let i = 0; i < layers.getLength(); i++) {
+            const layer = layers.item(i);
+            if (layer.get(KEY_UUID) === uuid) {
+                fromIndex = i;
+            }
+            if (targetUuid && layer.get(KEY_UUID) === targetUuid) {
+                toIndex = i;
+            }
+        }
+        
+        if (fromIndex < 0) return;
+        
+        if (targetUuid) {
+            if (toIndex < 0 || fromIndex === toIndex) return;
+        } else {
+            toIndex = fromIndex > 0 ? fromIndex - 1 : fromIndex + 1;
+        }
+
+        if (toIndex >= 0 && toIndex < layers.getLength() && fromIndex !== toIndex) {
+            const layer = layers.item(fromIndex);
+            layers.removeAt(fromIndex);
+            layers.insertAt(toIndex, layer);
+        }
+    }
+
+    async setLayerVisible(uuid: string, visible: boolean): Promise<void> {
+        const layers = this.olMap.getLayers();
+        for (let i = 0; i < layers.getLength(); i++) {
+            const layer = layers.item(i);
+            if (layer.get(KEY_UUID) === uuid) {
+                layer.setVisible(visible);
+                return;
+            }
+        }
+    }
+
+    async addControlFromModule(_src: string): Promise<void> {}
+    async removeControl(_uuid: string): Promise<void> {}
+    async addOverlayFromModule(_src: string, _position?: string): Promise<void> {}
+    async removeOverlay(_uuid: string): Promise<void> {}
+
+    private setCursor(cursor: string): void {
+        const viewport = this.olMap.getViewport();
+        if (viewport) {
+            (viewport as HTMLElement).style.cursor = cursor;
+        }
+    }
+
+    async enableDrawing(geometryType: 'Point' | 'LineString' | 'Polygon', layerUuid: string): Promise<void> {
+        this.disableSelection();
+        
+        if (this.drawInteraction) {
+            this.olMap.removeInteraction(this.drawInteraction);
+        }
+        
+        this.activeDrawingLayerUuid = layerUuid;
+        this.setCursor('crosshair');
+        
+        const layers = this.olMap.getLayers();
+        let layer: BaseLayer | undefined;
+        for (let i = 0; i < layers.getLength(); i++) {
+            const l = layers.item(i);
+            if (l.get(KEY_UUID) === layerUuid) {
+                layer = l;
+                break;
+            }
+        }
+        
+        if (!layer || !(layer instanceof layerNS.Vector)) {
+            throw new Error('Drawing only supported on vector layers');
+        }
+        
+        const source = layer.getSource();
+        if (!source) {
+            throw new Error('Layer has no source');
+        }
+        
+        const layerSourceType = layer.get('sourceType');
+        if (layerSourceType && layerSourceType !== GsSourceType.Features) {
+            throw new Error('Drawing only supported on layers with in-memory features');
+        }
+        
+        this.drawInteraction = new interactionNS.Draw({
+            source: source,
+            type: geometryType
+        });
+        
+        const onFeatureAdded = (event: any) => {
+            const feature = event.feature;
+            if (feature && !feature.get(KEY_UUID)) {
+                const uuid = uuidv4();
+                feature.set(KEY_UUID, uuid);
+                const state = feature.get(KEY_STATE) || {};
+                state.uuid = uuid;
+                feature.set(KEY_STATE, state);
+            }
+            
+            if (this.renderer && this.activeDrawingLayerUuid) {
+                this.renderer.syncLayerFeaturesToModel(this.activeDrawingLayerUuid);
+            }
+            this.renderer?.triggerDirty();
+        };
+        
+        source.on('addfeature', onFeatureAdded);
+        
+        (this.drawInteraction as any)._featureAddedListener = onFeatureAdded;
+        (this.drawInteraction as any)._sourceRef = source;
+        
+        this.olMap.addInteraction(this.drawInteraction);
+    }
+
+    async disableDrawing(): Promise<void> {
+        if (this.drawInteraction) {
+            const listener = (this.drawInteraction as any)._featureAddedListener;
+            const source = (this.drawInteraction as any)._sourceRef;
+            if (listener && source) {
+                source.un('addfeature', listener);
+            }
+            
+            this.olMap.removeInteraction(this.drawInteraction);
+            this.drawInteraction = undefined;
+            this.setCursor('');
+        }
+    }
+    
+    cleanup(): void {
+        if (this.keyDownListener) {
+            const target = this.olMap.getTargetElement();
+            if (target && target instanceof HTMLElement) {
+                target.removeEventListener('keydown', this.keyDownListener);
+            }
+            this.keyDownListener = undefined;
+        }
+    }
+
+    async enableFeatureSelection(): Promise<void> {
+        this.disableDrawing();
+        this.disableSelection();
+        
+        const olLayers = this.olMap.getLayers();
+        const vectorLayers = olLayers.getArray().filter(layer => layer instanceof layerNS.Vector) as layerNS.Vector<sourceNS.Vector>[];
+        
+        if (vectorLayers.length === 0) {
+            throw new Error('No vector layers available for selection');
+        }
+        
+        const gsMap = this.renderer?.gsMap;
+        const selectionStyle = gsMap?.styles?.['selection'];
+        
+        const selectOptions: any = {
+            condition: eventsCondition.click,
+            layers: vectorLayers,
+            hitTolerance: 5,
+            style: selectionStyle ? toOlStyle(selectionStyle) : (_feature: any) => {
+                const stroke = new style.Stroke({ color: 'rgba(255, 255, 0, 1)', width: 3 });
+                const fill = new style.Fill({ color: 'rgba(255, 255, 0, 0.3)' });
+                return new style.Style({
+                    image: new style.Circle({ radius: 7, fill: fill, stroke: stroke }),
+                    stroke: stroke,
+                    fill: fill
+                });
+            }
+        };
+        
+        this.selectInteraction = new interactionNS.Select(selectOptions);
+        
+        this.selectInteraction.on('select', (event: any) => {
+            if (event.selected.length > 0) {
+                const selectedFeature = event.selected[0];
+                let featureLayerUuid: string | undefined;
+                olLayers.getArray().forEach((layer) => {
+                    if (layer instanceof layerNS.Vector) {
+                        const source = layer.getSource();
+                        if (source && source.hasFeature(selectedFeature)) {
+                            const uuid = layer.get(KEY_UUID);
+                            if (uuid) featureLayerUuid = uuid;
+                        }
+                    }
+                });
+                
+                if (featureLayerUuid && this.renderer) {
+                    const gsFeature = toGsFeature(selectedFeature);
+                    const geometry = selectedFeature.getGeometry();
+                    const metrics: { length?: number, area?: number } = {};
+                    
+                    if (geometry) {
+                        const geometryType = geometry.getType();
+                        try {
+                            if (geometryType === 'LineString' || geometryType === 'MultiLineString') {
+                                metrics.length = sphere.getLength(geometry, { projection: this.olMap.getView().getProjection() });
+                            } else if (geometryType === 'Polygon' || geometryType === 'MultiPolygon') {
+                                metrics.area = sphere.getArea(geometry, { projection: this.olMap.getView().getProjection() });
+                                const coordinates = geometryType === 'Polygon' 
+                                    ? (geometry as any).getCoordinates()[0]
+                                    : (geometry as any).getCoordinates()[0][0];
+                                if (coordinates?.length > 0) {
+                                    const perimeterLine = new geom.LineString(coordinates);
+                                    metrics.length = sphere.getLength(perimeterLine, { projection: this.olMap.getView().getProjection() });
+                                }
+                            }
+                        } catch (error) {
+                            console.warn('Error calculating feature metrics:', error);
+                        }
+                    }
+                    
+                    this.renderer.triggerSync({
+                        type: 'featureSelected',
+                        layerUuid: featureLayerUuid,
+                        feature: gsFeature,
+                        metrics
+                    });
+                }
+            } else if (event.deselected.length > 0) {
+                this.renderer?.triggerSync({ type: 'featureDeselected' });
+            }
+        });
+        
+        this.olMap.addInteraction(this.selectInteraction);
+        this.setCursor('pointer');
+    }
+
+    async deleteSelectedFeatures(): Promise<void> {
+        if (!this.selectInteraction) {
+            throw new Error('No selection interaction active');
+        }
+        
+        const selectedFeatures = this.selectInteraction.getFeatures();
+        
+        if (selectedFeatures.getLength() === 0) {
+            throw new Error('No features selected');
+        }
+        
+        const layersToSync = new Set<string>();
+        const olLayers = this.olMap.getLayers();
+        
+        selectedFeatures.forEach((feature: any) => {
+            for (let i = 0; i < olLayers.getLength(); i++) {
+                const layer = olLayers.item(i);
+                if (layer instanceof layerNS.Vector) {
+                    const source = layer.getSource();
+                    if (source && source.hasFeature(feature)) {
+                        source.removeFeature(feature);
+                        const layerUuid = layer.get(KEY_UUID);
+                        if (layerUuid) layersToSync.add(layerUuid);
+                        break;
+                    }
+                }
+            }
+        });
+        
+        selectedFeatures.clear();
+        
+        if (this.renderer && layersToSync.size > 0) {
+            layersToSync.forEach(layerUuid => {
+                this.renderer!.syncLayerFeaturesToModel(layerUuid);
+            });
+        }
+        this.renderer?.triggerDirty();
+    }
+
+    async disableSelection(): Promise<void> {
+        if (this.selectInteraction) {
+            this.olMap.removeInteraction(this.selectInteraction);
+            this.selectInteraction = undefined;
+            this.setCursor('');
+            this.renderer?.triggerSync({ type: 'featureDeselected' });
+        }
+    }
+}
+