@geogirafe/lib-geoportal/tools/app/geogirafe-component.js

GeoGirafe is a flexible application to build online geoportals.

// SPDX-License-Identifier: Apache-2.0
import proj4 from 'proj4';
import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
import { register } from 'ol/proj/proj4.js';
import GirafeContext from '../context/context.js';
export default class GeoGirafeAppComponent extends GirafeHTMLElement {
    templateUrl = null;
    styleUrls = null;
    ready;
    resolveReady;
    constructor() {
        super('geogirafe-main-app');
        this.shadow.innerHTML = '<slot></slot>';
        this.ready = new Promise((resolve) => {
            this.resolveReady = resolve;
        });
    }
    getContext() {
        return this.context;
    }
    /**
     * This one needs to be displayed in Fullscreen Mode. Otherwise the User will see nothing at all ;)
     */
    get isFullscreenComponent() {
        return true;
    }
    connectedCallback() {
        super.connectedCallback();
        // Reflect the fullscreen mode as a class on the app root, so that plain
        // layout elements (header, footer, button bar) can be hidden via CSS.
        this.subscribe('interface.fullscreenMode', (_oldValue, newValue) => {
            this.classList.toggle('fullscreen-mode', newValue);
        });
        this.initialize().then(() => {
            // App is ready
            this.resolveReady();
        });
    }
    getInheritedContext() {
        return new GirafeContext();
    }
    isReady() {
        return this.ready;
    }
    async initialize() {
        await this.context.initialize();
        // Default configuration for Cesium (see https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/)
        window.CESIUM_BASE_URL = 'lib/cesium/';
        // Register Coordinate Reference Systems (CRS) definitions in PROJ4
        for (const crs of this.context.configManager.Config.crs) {
            proj4.defs(crs.code, crs.definition);
        }
        register(proj4);
        document.geogirafe = {
            context: this.context,
            state: this.context.stateManager.state
        };
        // Automatically toggle dark/light mode when changed in the system
        globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            const state = this.context.stateManager.state;
            if (e.matches) {
                state.interface.darkFrontendMode = true;
            }
            else {
                state.interface.darkFrontendMode = false;
            }
        });
    }
}