@geogirafe/lib-geoportal 1.2.0-dev.2836809138 → 1.2.0-dev.2844989778

package/tools/share/serializers/globeserializer.js

@@ -1,3 +1,16 @@
+import LayoutSerializer from './layoutserializer.js';
+/**
+ * The layouts the display modes of the previous versions correspond to.
+ *
+ * <code>globe.display</code> was replaced by <code>state.layout</code>, but the states that were
+ * shared before that change still contain it and have to keep working. Such a state never contains
+ * a layout, so there is no risk of overwriting a layout that was deserialized before.
+ */
+const LEGACY_DISPLAYS = {
+    '2D': { type: '1x1', cells: ['map-2d'], sizes: { columns: [100], rows: [100] } },
+    '3D': { type: '1x1', cells: ['map-3d'], sizes: { columns: [100], rows: [100] } },
+    '2D/3D': { type: '2x1', cells: ['map-2d', 'map-3d'], sizes: { columns: [45, 55], rows: [100] } }
+};
 export default class GlobeSerializer {
     context;
     constructor(context) {
@@ -8,7 +21,6 @@ export default class GlobeSerializer {
     }
     brainSerialize(globe) {
         return JSON.stringify({
-            display: globe.display,
             shadows: globe.shadows,
             shadowsTimestamp: globe.shadowsTimestamp,
             camera: globe.camera
@@ -17,9 +29,6 @@ export default class GlobeSerializer {
     brainDeserialize(str) {
         const parsedGlobe = JSON.parse(str);
         const globe = this.globe;
-        if (parsedGlobe.display) {
-            globe.display = parsedGlobe.display;
-        }
         if (parsedGlobe.shadows !== undefined) {
             globe.shadows = parsedGlobe.shadows;
         }
@@ -28,5 +37,18 @@ export default class GlobeSerializer {
         }
         globe.camera = parsedGlobe.camera ?? null;
         globe.loaded = false;
+        this.deserializeLegacyDisplay(parsedGlobe.display);
+    }
+    /** Applies the layout a display mode of the previous versions corresponds to. */
+    deserializeLegacyDisplay(display) {
+        if (display === undefined) {
+            return;
+        }
+        const legacyLayout = LEGACY_DISPLAYS[display];
+        if (!legacyLayout) {
+            console.warn(`${display} is not a known display mode. The shared display mode will be ignored.`);
+            return;
+        }
+        new LayoutSerializer(this.context).applyLayout(legacyLayout.type, legacyLayout.cells, legacyLayout.sizes);
     }
 }

package/tools/share/serializers/layoutserializer.d.ts

@@ -0,0 +1,17 @@
+import IGirafeContext from '../../context/icontext.js';
+import { IBrainSerializer } from '../../state/brain/serialize.js';
+import LayoutState, { CellContent, LayoutType } from '../../state/layout.js';
+export default class LayoutSerializer implements IBrainSerializer<LayoutState> {
+    private readonly context;
+    constructor(context: IGirafeContext);
+    private get layout();
+    brainSerialize(layout: LayoutState): string;
+    brainDeserialize(str: string): void;
+    /**
+     * Applies a layout to the state, ignoring the values that are not valid anymore.
+     * A shared state can have been created by another version of the application,
+     * in which other components or other layouts were available.
+     */
+    applyLayout(type: LayoutType, cells?: CellContent[], sizes?: LayoutState['sizes']): void;
+    private getValidSizes;
+}

package/tools/share/serializers/layoutserializer.js

@@ -0,0 +1,44 @@
+import { distributeCells, getDefaultSizes, getGridSize, isCellComponent, isLayoutType } from '../../state/layout.js';
+export default class LayoutSerializer {
+    context;
+    constructor(context) {
+        this.context = context;
+    }
+    get layout() {
+        return this.context.stateManager.state.layout;
+    }
+    brainSerialize(layout) {
+        return JSON.stringify({
+            type: layout.type,
+            cells: layout.cells,
+            sizes: layout.sizes
+        });
+    }
+    brainDeserialize(str) {
+        const parsedLayout = JSON.parse(str);
+        if (!isLayoutType(parsedLayout.type)) {
+            console.warn(`${parsedLayout.type} is not a valid layout. The shared layout will be ignored.`);
+            return;
+        }
+        this.applyLayout(parsedLayout.type, parsedLayout.cells, parsedLayout.sizes);
+    }
+    /**
+     * Applies a layout to the state, ignoring the values that are not valid anymore.
+     * A shared state can have been created by another version of the application,
+     * in which other components or other layouts were available.
+     */
+    applyLayout(type, cells, sizes) {
+        const layout = this.layout;
+        layout.type = type;
+        layout.cells = distributeCells(type, (cells ?? []).map((cell) => (isCellComponent(cell) ? cell : null)));
+        layout.sizes = this.getValidSizes(type, sizes);
+    }
+    getValidSizes(type, sizes) {
+        const defaultSizes = getDefaultSizes(type);
+        const { columns, rows } = getGridSize(type);
+        if (sizes?.columns?.length !== columns || sizes?.rows?.length !== rows) {
+            return defaultSizes;
+        }
+        return { columns: sizes.columns, rows: sizes.rows };
+    }
+}

package/tools/share/stateserializer.js

@@ -13,6 +13,8 @@ import ObjectSelection from '../state/objectselection.js';
 import GraphicalInterface from '../state/graphicalInterface.js';
 import InterfaceSerializer from './serializers/interfaceserializer.js';
 import GlobeSerializer from './serializers/globeserializer.js';
+import LayoutState from '../state/layout.js';
+import LayoutSerializer from './serializers/layoutserializer.js';
 class StateSerializer extends GirafeSingleton {
     brainSerializer = new BrainSerializer();
     initializeSingleton() {
@@ -22,6 +24,7 @@ class StateSerializer extends GirafeSingleton {
         this.addSerializer(ObjectSelection, new SelectionSerializer(this.context));
         this.addSerializer(GraphicalInterface, new InterfaceSerializer(this.context));
         this.addSerializer(GlobeState, new GlobeSerializer(this.context));
+        this.addSerializer(LayoutState, new LayoutSerializer(this.context));
     }
     addSerializer(type, serializerData) {
         this.brainSerializer.addSerializer(type, serializerData);

package/tools/state/globe.d.ts

@@ -4,7 +4,6 @@ export type CameraConfig = {
     roll: number;
 };
 export default class GlobeState {
-    display: '2D' | '3D' | '2D/3D';
     loaded: boolean;
     shadows: boolean;
     shadowsTimestamp: number;

package/tools/state/globe.js

@@ -1,5 +1,4 @@
 export default class GlobeState {
-    display = '2D';
     loaded = false;
     shadows = false;
     shadowsTimestamp = Date.now();

package/tools/state/layout.d.ts

@@ -0,0 +1,62 @@
+/**
+ * The available Layouts of the Map Grid.
+ * The name of a Layout is <number of columns>x<number of rows>.
+ */
+export declare const LAYOUT_TYPES: readonly ["1x1", "2x1", "1x2", "2x2"];
+export type LayoutType = (typeof LAYOUT_TYPES)[number];
+/** Minimal size of a Column or of a Row of the Grid, in percent of the Grid. */
+export declare const MIN_CELL_SIZE = 15;
+/** Maximal size of a Column or of a Row of the Grid, in percent of the Grid. */
+export declare const MAX_CELL_SIZE = 85;
+/**
+ * The Components that can be displayed in a Cell of the Grid.
+ * To make a new Component available to the user, it is enough to add it to this list
+ * (and to add its Element to the Grid in the HTML of the application).
+ */
+export declare const AVAILABLE_CELL_COMPONENTS: readonly [{
+    readonly id: "map-2d";
+    readonly tagName: "girafe-map-2d";
+    readonly label: "2D Map";
+}, {
+    readonly id: "map-3d";
+    readonly tagName: "girafe-map-3d";
+    readonly label: "3D Map";
+}];
+export type CellComponent = (typeof AVAILABLE_CELL_COMPONENTS)[number]['id'];
+/** The content of a Cell of the Grid: a Component, or null when the Cell is empty. */
+export type CellContent = CellComponent | null;
+export declare function isLayoutType(value: unknown): value is LayoutType;
+export declare function isCellComponent(value: unknown): value is CellComponent;
+/** The number of columns and of rows of a Layout. */
+export declare function getGridSize(type: LayoutType): {
+    columns: number;
+    rows: number;
+};
+/** The sizes, in percent, of the equally distributed columns and rows of a Layout. */
+export declare function getDefaultSizes(type: LayoutType): {
+    columns: number[];
+    rows: number[];
+};
+/**
+ * Distributes the Components on the Cells of a Layout.
+ * The Components that are already placed keep their Cell as long as it still exists,
+ * and the Cells that are added by the new Layout are filled with the Components
+ * that are not placed anywhere yet.
+ */
+export declare function distributeCells(type: LayoutType, currentCells: CellContent[]): CellContent[];
+/**
+ * The Layout of the Map Grid: which Layout is displayed, which Component is displayed
+ * in each of its Cells, and the sizes of its columns and rows (in percent),
+ * which the user can change by dragging the splitters.
+ *
+ * The Cells are indexed row by row: in a 2x2 Layout, the Cell 0 is the top-left one,
+ * the Cell 1 the top-right one, the Cell 2 the bottom-left one and the Cell 3 the bottom-right one.
+ */
+export default class LayoutState {
+    type: LayoutType;
+    cells: CellContent[];
+    sizes: {
+        columns: number[];
+        rows: number[];
+    };
+}

package/tools/state/layout.js

@@ -0,0 +1,67 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * The available Layouts of the Map Grid.
+ * The name of a Layout is <number of columns>x<number of rows>.
+ */
+export const LAYOUT_TYPES = ['1x1', '2x1', '1x2', '2x2'];
+/** Minimal size of a Column or of a Row of the Grid, in percent of the Grid. */
+export const MIN_CELL_SIZE = 15;
+/** Maximal size of a Column or of a Row of the Grid, in percent of the Grid. */
+export const MAX_CELL_SIZE = 85;
+/**
+ * The Components that can be displayed in a Cell of the Grid.
+ * To make a new Component available to the user, it is enough to add it to this list
+ * (and to add its Element to the Grid in the HTML of the application).
+ */
+export const AVAILABLE_CELL_COMPONENTS = [
+    { id: 'map-2d', tagName: 'girafe-map-2d', label: '2D Map' },
+    { id: 'map-3d', tagName: 'girafe-map-3d', label: '3D Map' }
+];
+export function isLayoutType(value) {
+    return LAYOUT_TYPES.includes(value);
+}
+export function isCellComponent(value) {
+    return AVAILABLE_CELL_COMPONENTS.some((component) => component.id === value);
+}
+/** The number of columns and of rows of a Layout. */
+export function getGridSize(type) {
+    const [columns, rows] = type.split('x').map(Number);
+    return { columns, rows };
+}
+/** The sizes, in percent, of the equally distributed columns and rows of a Layout. */
+export function getDefaultSizes(type) {
+    const { columns, rows } = getGridSize(type);
+    return {
+        columns: new Array(columns).fill(100 / columns),
+        rows: new Array(rows).fill(100 / rows)
+    };
+}
+/**
+ * Distributes the Components on the Cells of a Layout.
+ * The Components that are already placed keep their Cell as long as it still exists,
+ * and the Cells that are added by the new Layout are filled with the Components
+ * that are not placed anywhere yet.
+ */
+export function distributeCells(type, currentCells) {
+    const { columns, rows } = getGridSize(type);
+    const cellCount = columns * rows;
+    const cells = currentCells.slice(0, cellCount);
+    const unplacedComponents = AVAILABLE_CELL_COMPONENTS.map((component) => component.id).filter((id) => !cells.includes(id));
+    while (cells.length < cellCount) {
+        cells.push(unplacedComponents.shift() ?? null);
+    }
+    return cells;
+}
+/**
+ * The Layout of the Map Grid: which Layout is displayed, which Component is displayed
+ * in each of its Cells, and the sizes of its columns and rows (in percent),
+ * which the user can change by dragging the splitters.
+ *
+ * The Cells are indexed row by row: in a 2x2 Layout, the Cell 0 is the top-left one,
+ * the Cell 1 the top-right one, the Cell 2 the bottom-left one and the Cell 3 the bottom-right one.
+ */
+export default class LayoutState {
+    type = '1x1';
+    cells = ['map-2d'];
+    sizes = { columns: [100], rows: [100] };
+}

package/tools/state/state.d.ts

@@ -1,5 +1,6 @@
 import MapPosition from './mapposition.js';
 import GlobeState from './globe.js';
+import LayoutState from './layout.js';
 import type Basemap from '../../models/basemaps/basemap.js';
 import type ThemeLayer from '../../models/layers/themelayer.js';
 import type OlGeomLineString from 'ol/geom/LineString.js';
@@ -124,6 +125,7 @@ export default class State {
     treeview: TreeviewConfig;
     print: PrintConfig;
     globe: GlobeState;
+    layout: LayoutState;
     theme: Theme | null;
     selection: ObjectSelection;
     infobox: {

package/tools/state/state.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 // SPDX-License-Identifier: Apache-2.0
 import MapPosition from './mapposition.js';
 import GlobeState from './globe.js';
+import LayoutState from './layout.js';
 import { BrainSerialize } from './brain/decorators.js';
 import LayersConfig from './layersConfig.js';
 import ObjectSelection from './objectselection.js';
@@ -90,6 +91,10 @@ export default class State {
     };
     // Current 3D-Globe state
     globe = new GlobeState();
+    // Current Layout of the Map Grid
+    // Note: it must stay declared after <globe>, so that a legacy globe.display coming from
+    // an old shared state is translated into a layout before this one is deserialized.
+    layout = new LayoutState();
     // TODO REG : What is this used for?
     // Is it the default theme configured in the user preferences?
     // Do we really need this?
@@ -142,6 +147,9 @@ __decorate([
 __decorate([
     BrainSerialize
 ], State.prototype, "globe", void 0);
+__decorate([
+    BrainSerialize
+], State.prototype, "layout", void 0);
 __decorate([
     BrainSerialize
 ], State.prototype, "selection", void 0);

package/tools/state/statemanager.d.ts

@@ -10,6 +10,7 @@ declare class StateManager extends GirafeSingleton {
     constructor(context: IGirafeContext);
     initializeSingleton(): void;
     private setDefaultValues;
+    private setDefaultLayout;
     /**
      * Get the language based on the following priority:
      * 1. user preferences, 2. browser language, 3. app default language

package/tools/state/statemanager.js

@@ -4,6 +4,7 @@ import GirafeSingleton from '../../base/GirafeSingleton.js';
 import State from './state.js';
 import { getPropertyByPath } from '../utils/pathUtils.js';
 import Brain from './brain/brain.js';
+import { distributeCells, getDefaultSizes } from './layout.js';
 class StateManager extends GirafeSingleton {
     girafeState = new State();
     stateProxy;
@@ -28,8 +29,15 @@ class StateManager extends GirafeSingleton {
             this.state.projection = config.map.srid;
             this.state.language = this.decideLanguage();
             this.state.interface.selectionComponent = config.interface.defaultSelectionComponent;
+            this.setDefaultLayout();
         }
     }
+    setDefaultLayout() {
+        const defaultLayout = this.context.configManager.Config.interface.defaultLayout;
+        this.state.layout.type = defaultLayout;
+        this.state.layout.cells = distributeCells(defaultLayout, this.state.layout.cells);
+        this.state.layout.sizes = getDefaultSizes(defaultLayout);
+    }
     /**
      * Get the language based on the following priority:
      * 1. user preferences, 2. browser language, 3. app default language