@geogirafe/lib-geoportal 1.2.0-dev.2843240863 → 1.2.0-dev.2845014898

package/api/apigeogirafeapp.js

@@ -4,6 +4,7 @@ import proj4 from 'proj4';
 import GirafeHTMLElement from '../base/GirafeHTMLElement.js';
 import Map2dComponent from '../components/map-2d/component.js';
 import Map3dComponent from '../components/map-3d/component.js';
+import MapGridComponent from '../components/map-grid/component.js';
 import { register } from 'ol/proj/proj4.js';
 import GirafeApiContext from './apicontext.js';
 import BasemapComponent from '../components/basemap/component.js';
@@ -35,10 +36,10 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
         return uHtml `<style>
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);cursor:pointer;width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style><style>
-:host{position:relative}#maps{width:100%;height:100%;position:relative;overflow:hidden}girafe-map-2d{width:100%;height:100%;display:block;position:relative}girafe-map-3d{border-left:3px solid #444;height:100%;display:none;position:absolute;top:0;overflow:hidden}girafe-basemap{display:block;position:absolute;bottom:.5rem;left:.5rem}girafe-search{width:50%;height:2.25rem;display:block;position:absolute;top:.5rem;left:.5rem;box-shadow:0 1px 4px #0000004d}girafe-selection-window{z-index:100;width:400px;height:240px;position:absolute;bottom:1rem;right:1rem}
+:host{position:relative}girafe-map-grid,girafe-map-2d,girafe-map-3d{width:100%;height:100%;display:block;position:relative;overflow:hidden}girafe-basemap{display:block;position:absolute;bottom:.5rem;left:.5rem}girafe-search{width:50%;height:2.25rem;display:block;position:absolute;top:.5rem;left:.5rem;box-shadow:0 1px 4px #0000004d}girafe-selection-window{z-index:100;width:400px;height:240px;position:absolute;bottom:1rem;right:1rem}
 </style>
 <style>${this.customStyle}</style>
-<div id="maps"><girafe-map-2d></girafe-map-2d><girafe-map-3d></girafe-map-3d></div>
+<girafe-map-grid><girafe-map-2d></girafe-map-2d><girafe-map-3d></girafe-map-3d></girafe-map-grid>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isInitialized = false;
@@ -107,6 +108,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         if (!customElements.get('girafe-map-2d')) {
             customElements.define('girafe-map-2d', Map2dComponent);
             customElements.define('girafe-map-3d', Map3dComponent);
+            customElements.define('girafe-map-grid', MapGridComponent);
         }
     }
     manageAttributes() {

package/api/style.css

@@ -2,27 +2,21 @@
   position: relative;
 }
 
-#maps {
+girafe-map-grid {
+  display: block;
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
 
-girafe-map-2d {
+girafe-map-2d,
+girafe-map-3d {
   display: block;
   position: relative;
   width: 100%;
   height: 100%;
-}
-
-girafe-map-3d {
-  display: none;
-  position: absolute;
-  top: 0;
-  height: 100%;
   overflow: hidden;
-  border-left: solid 3px #444;
 }
 
 girafe-basemap {

package/assets/i18n/de.json

@@ -1,9 +1,12 @@
 {
   "de": {
+    "(empty)": "(leer)",
     "+{number} more": "+{number} mehr",
     "2D": "2D",
     "2D / 3D": "2D / 3D",
+    "2D Map": "2D-Karte",
     "3D": "3D",
+    "3D Map": "3D-Karte",
     "About": "About",
     "about-panel": "About",
     "Activate / Deactivate": "Aktivieren / Deaktivieren",
@@ -126,6 +129,7 @@
     "Discard": "Verwerfen",
     "Disk": "Kreis",
     "Display menu": "Menü anzeigen",
+    "Displayed components": "Angezeigte Komponenten",
     "Distance": "Entfernung",
     "Do you want to delete this bookmark?": "Möchten Sie dieses Lesezeichen löschen?",
     "Do you want to delete this feature?": "Möchten Sie dieses Objekt löschen?",

package/assets/i18n/en.json

@@ -1,9 +1,12 @@
 {
   "en": {
+    "(empty)": "(empty)",
     "+{number} more": "+{number} more",
     "2D": "2D",
     "2D / 3D": "2D / 3D",
+    "2D Map": "2D Map",
     "3D": "3D",
+    "3D Map": "3D Map",
     "About": "About",
     "about-panel": "About",
     "Activate / Deactivate": "Activate / Deactivate",
@@ -127,6 +130,7 @@
     "Discard": "Discard",
     "Disk": "Circle",
     "Display menu": "Display menu",
+    "Displayed components": "Displayed components",
     "Distance": "Distance",
     "Do you want to delete this bookmark?": "Do you want to delete this bookmark?",
     "Do you want to delete this feature?": "Do you want to delete this feature?",

package/assets/i18n/fr.json

@@ -1,9 +1,12 @@
 {
   "fr": {
+    "(empty)": "(vide)",
     "+{number} more": "+{number} de plus",
     "2D": "2D",
     "2D / 3D": "2D / 3D",
+    "2D Map": "Carte 2D",
     "3D": "3D",
+    "3D Map": "Carte 3D",
     "About": "À propos",
     "about-panel": "À propos",
     "Activate / Deactivate": "Activer / Désactiver",
@@ -126,6 +129,7 @@
     "Discard": "Annuler cette entité",
     "Disk": "Cercle",
     "Display menu": "Afficher le menu",
+    "Displayed components": "Composants affichés",
     "Distance": "Distance",
     "Do you want to delete this bookmark?": "Voulez-vous supprimer ce favori ?",
     "Do you want to delete this feature?": "Souhaitez-vous supprimer cette entité?",

package/assets/i18n/it.json

@@ -1,9 +1,12 @@
 {
   "it": {
+    "(empty)": "(vuoto)",
     "+{number} more": "+{number} in più",
     "2D": "2D",
     "2D / 3D": "2D / 3D",
+    "2D Map": "Mappa 2D",
     "3D": "3D",
+    "3D Map": "Mappa 3D",
     "About": "Informazioni",
     "about-panel": "Informazioni",
     "Activate / Deactivate": "Attiva / Disattiva",
@@ -126,6 +129,7 @@
     "Discard": "Scartare",
     "Disk": "Cerchio",
     "Display menu": "Mostra menu",
+    "Displayed components": "Componenti visualizzati",
     "Distance": "Distanza",
     "Do you want to delete this bookmark?": "Vuoi eliminare questo segnalibro?",
     "Do you want to delete this feature?": "Si desidera eliminare questo elemento?",

package/components/basemap/component.js

@@ -13,7 +13,7 @@ class BasemapComponent extends GirafeHTMLElement {
 .basemap-button{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;box-shadow:var(--bx-shdw);border-width:2px;border-radius:4px;outline:0;margin:0;padding:5px;display:inline-flex}#container{flex-direction:column;width:max-content;display:inline-flex}.basemap-icon{background:var(--svg-legend-bkg);filter:var(--svg-map-filter)}.active-basemap{background-color:var(--bkg-color-grad2)!important}.opacity-slider{flex-direction:row;height:20px;padding:0 5px;display:flex}.opacity-slider img{height:16px;position:relative;top:2px}.opacity-slider input[type=range]{flex-grow:1}.basemap-container{flex-direction:column;display:flex}.basemap-container button{color:var(--text-color);background-color:#0000;border:none;flex-direction:row;flex-grow:1;display:flex}.basemap-container button img{height:2rem;margin:.3rem}.basemap-container button span{height:2rem;margin:.3rem;line-height:2rem}.basemap-container:hover{background-color:var(--bkg-color-grad1)}.basemaps-with-opacity-separator{border-top:1px solid var(--bkg-color-grad2);height:1px;margin:6px 8px}
 </style>
 <style>${this.customStyle}</style>
-<girafe-menu-button direction="up-right" id="basemap-menu-button"><button slot="menu-button" class="basemap-button" tip="Select basemap"><img class="basemap-icon" alt="menu-icon" src="images/button_basemaps.webp"></button><div slot="menu-content" id="container">${Object.values(this.state.basemaps).filter(basemap => basemap.opacity == -1).map(basemap => uHtmlFor(basemap, basemap.id) `<div class="${this.determineClassnames(basemap)}"><button onclick="${() => this.changeBasemap(basemap)}"><img class="basemap-icon" alt="basemap-icon" src="${basemap.thumbnail}"> <span i18n="${basemap.name}">${basemap.name}</span></button></div>`)}<div class="basemaps-with-opacity-separator"></div>${Object.values(this.state.basemaps).filter(basemap => basemap.opacity != -1).map(basemap => uHtmlFor(basemap, basemap.id) `<div class="${this.determineClassnames(basemap)}"><button onclick="${() => this.changeBasemap(basemap)}"><img class="basemap-icon" alt="basemap-icon" src="${basemap.thumbnail}"> <span i18n="${basemap.name}">${basemap.name}</span></button><div class="opacity-slider"><img alt="Control opacity" src="icons/opacity.svg"> <input type="range" min="0" max="1" step="0.01" class="slider" value="${basemap.opacity}" onkeydown="${(e) => { e.preventDefault(); e.stopPropagation(); }}" onclick="${(e) => { e.preventDefault(); e.stopPropagation(); }}" onchange="${(e) => this.changeBasemapOpacity(basemap, e)}"></div></div>`)}</div></girafe-menu-button>
+<girafe-menu-button direction="up-right" id="basemap-menu-button"><button slot="menu-button" class="basemap-button" tip="Select basemap"><img class="basemap-icon" alt="menu-icon" src="images/button_basemaps.webp"></button><div slot="menu-content" id="container">${Object.values(this.state.basemaps).filter(basemap => basemap.opacity == -1).map(basemap => uHtmlFor(basemap, basemap.id) `<div class="${this.determineClassnames(basemap)}"><button onclick="${() => this.changeBasemap(basemap)}"><img class="basemap-icon" alt="basemap-icon" src="${basemap.thumbnail}"> <span i18n="${basemap.name}">${basemap.name}</span></button></div>`)}<div class="basemaps-with-opacity-separator"></div>${Object.values(this.state.basemaps).filter(basemap => basemap.opacity != -1).map(basemap => uHtmlFor(basemap, basemap.id) `<div class="${this.determineClassnames(basemap)}"><button onclick="${() => this.changeBasemap(basemap)}"><img class="basemap-icon" alt="basemap-icon" src="${basemap.thumbnail}"> <span i18n="${basemap.name}">${basemap.name}</span></button><div class="opacity-slider"><img alt="Control opacity" src="icons/opacity.svg"> <input type="range" min="0" max="1" step="0.01" class="gg-range" value="${basemap.opacity}" onkeydown="${(e) => { e.preventDefault(); e.stopPropagation(); }}" onclick="${(e) => { e.preventDefault(); e.stopPropagation(); }}" onchange="${(e) => this.changeBasemapOpacity(basemap, e)}"></div></div>`)}</div></girafe-menu-button>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     constructor() {

package/components/layout/component.d.ts

@@ -1,5 +1,6 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
+import { CellContent, LayoutType } from '../../tools/state/layout.js';
 declare class LayoutComponent extends GirafeHTMLElement implements IGirafePanel {
     protected templateUrl: string | null;
     protected styleUrls: string[] | null;
@@ -7,13 +8,43 @@ declare class LayoutComponent extends GirafeHTMLElement implements IGirafePanel
     isPanelVisible: boolean;
     panelTitle: string;
     panelTogglePath: string;
+    /** The Components the user can choose between for each Cell of the Grid. */
+    availableComponents: 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";
+    }];
     constructor();
+    private get layout();
+    /** The Layouts the user can choose between, as configured in the application. */
+    get allowedLayouts(): LayoutType[];
+    /** The Cells of the current Layout, one line of the schema per row of the Grid. */
+    get cellRows(): {
+        index: number;
+        content: CellContent;
+    }[][];
     private registerEvents;
     togglePanel(visible: boolean): void;
-    private onLayoutSelect;
     private onLayoutChanged;
-    private syncLayoutSelect;
-    private updateShadowsVisibility;
+    /**
+     * uHtml only updates the <selected> attribute of the options, which the browser ignores
+     * as soon as the user has interacted with a select. The values are therefore applied explicitly,
+     * so that the panel also follows the changes made outside of it (shared state, other components).
+     */
+    private syncSelects;
+    private onLayoutSelect;
+    /**
+     * Places a Component in a Cell of the Grid.
+     * A Component can only be displayed once: if it is already displayed in another Cell,
+     * both Cells are swapped, so that the Component that was in the target Cell is not lost.
+     */
+    onCellSelect(event: Event, cellIndex: number): void;
+    /** Whether one of the Cells displays a 3D Map, which the shadows options depend on. */
+    get is3dDisplayed(): boolean;
     private onShadowsToggle;
     private setDateTimePicker;
     private update3dMapTimestamp;

package/components/layout/component.js

@@ -1,7 +1,7 @@
 import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
-const ALLOWED_LAYOUTS = ['2D', '3D', '2D/3D'];
+import { AVAILABLE_CELL_COMPONENTS, distributeCells, getDefaultSizes, getGridSize, isCellComponent, isLayoutType } from '../../tools/state/layout.js';
 class LayoutComponent extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -9,59 +9,96 @@ class LayoutComponent extends GirafeHTMLElement {
         return uHtml `<style>
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);cursor:pointer;width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style><style>
-#panel{color:var(--text-color)}#panel>div{padding:1rem}.hidden{display:none}fieldset{margin-top:1rem}.option{margin-top:.5rem;display:flex}.option select,.option input{flex-grow:1}.option input.gg-checkbox{flex-grow:0}.option label{margin-right:.5rem}.option label:after{content:" :"}
+#panel{color:var(--text-color)}#panel>div{padding:1rem}.hidden{display:none}fieldset{margin-top:1rem}.cells-row{gap:.25rem;margin-top:.5rem;display:flex}.cell-select{flex:1 1 0;min-width:0}.option{margin-top:.5rem;display:flex}.option select,.option input{flex-grow:1}.option input.gg-checkbox{flex-grow:0}.option label{margin-right:.5rem}.option label:after{content:" :"}
 </style>
 <style>${this.customStyle}</style>
-<div id="panel"><div><div class="option"><label for="layout" i18n="View" class="gg-label">View</label> <select id="layout" class="gg-select" onchange="${this.onLayoutSelect}"><option i18n="2D" value="2D">2D<option i18n="2D / 3D" value="2D/3D">2D / 3D<option i18n="3D" value="3D">3D</select></div><fieldset class="shadows-group hidden"><legend i18n="Shadows">Shadows</legend><div class="option shadows-option"><label for="shadowsCheckbox" i18n="Enable shadows" class="gg-label">Enable shadows</label> <input id="shadowsCheckbox" type="checkbox" class="gg-checkbox" onchange="${this.onShadowsToggle}"></div><div class="option shadows-date hidden"><label for="shadowsDate" i18n="Date" class="gg-label">Date</label> <input id="shadowsDate" type="datetime-local" class="gg-input"></div></fieldset></div></div>
+<div id="panel"><div><div class="option"><label for="layout" i18n="View" class="gg-label">View</label> <select id="layout" class="gg-select" onchange="${this.onLayoutSelect}">${this.allowedLayouts.map((layout) => uHtml `<option value="${layout}" ?selected="${layout === this.state.layout.type}">${layout}</option>`)}</select></div><fieldset class="cells-group"><legend i18n="Displayed components">Displayed components</legend>${this.cellRows.map((cellRow) => uHtml `<div class="cells-row">${cellRow.map((cell) => uHtml ` <select class="gg-select cell-select" onchange="${(e) => this.onCellSelect(e, cell.index)}"><option i18n="(empty)" value="" ?selected="${cell.content === null}">(empty)</option>${this.availableComponents.map((component) => uHtml `<option i18n="${component.label}" value="${component.id}" ?selected="${cell.content === component.id}">${component.label}</option>`)}</select> `)}</div>`)}</fieldset><fieldset class="${this.is3dDisplayed ? 'shadows-group' : 'shadows-group hidden'}"><legend i18n="Shadows">Shadows</legend><div class="option shadows-option"><label for="shadowsCheckbox" i18n="Enable shadows" class="gg-label">Enable shadows</label> <input id="shadowsCheckbox" type="checkbox" class="gg-checkbox" ?checked="${this.state.globe.shadows}" onchange="${this.onShadowsToggle}"></div><div class="${this.state.globe.shadows ? 'option shadows-date' : 'option shadows-date hidden'}"><label for="shadowsDate" i18n="Date" class="gg-label">Date</label> <input id="shadowsDate" type="datetime-local" class="gg-input"></div></fieldset></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isPanelVisible = false;
     panelTitle = 'layout-panel';
     panelTogglePath = 'interface.layoutPanelVisible';
+    /** The Components the user can choose between for each Cell of the Grid. */
+    availableComponents = AVAILABLE_CELL_COMPONENTS;
     constructor() {
         super('layout');
         this.onLayoutSelect = this.onLayoutSelect.bind(this);
         this.onShadowsToggle = this.onShadowsToggle.bind(this);
     }
+    get layout() {
+        return this.state.layout;
+    }
+    /** The Layouts the user can choose between, as configured in the application. */
+    get allowedLayouts() {
+        return this.context.configManager.Config.interface.layouts;
+    }
+    /** The Cells of the current Layout, one line of the schema per row of the Grid. */
+    get cellRows() {
+        const { columns, rows } = getGridSize(this.layout.type);
+        const cells = this.layout.cells;
+        return Array.from({ length: rows }, (_, row) => Array.from({ length: columns }, (_, column) => {
+            const index = row * columns + column;
+            return { index: index, content: cells[index] ?? null };
+        }));
+    }
     registerEvents() {
-        this.subscribe('globe.display', (_oldValue, newValue) => this.onLayoutChanged(newValue));
+        this.subscribe('layout.type', () => this.onLayoutChanged());
+        this.subscribe('layout.cells', () => this.onLayoutChanged());
     }
     togglePanel(visible) {
         this.isPanelVisible = visible;
         this.render();
-        if (visible) {
-            const currentLayout = this.state.globe.display;
-            this.syncLayoutSelect(currentLayout);
-            this.updateShadowsVisibility(currentLayout);
+    }
+    onLayoutChanged() {
+        if (this.isPanelVisible) {
+            this.refreshRender();
+            this.syncSelects();
         }
     }
+    /**
+     * uHtml only updates the <selected> attribute of the options, which the browser ignores
+     * as soon as the user has interacted with a select. The values are therefore applied explicitly,
+     * so that the panel also follows the changes made outside of it (shared state, other components).
+     */
+    syncSelects() {
+        const layoutSelect = this.getById('layout');
+        if (layoutSelect) {
+            layoutSelect.value = this.layout.type;
+        }
+        const cells = this.layout.cells;
+        this.shadow.querySelectorAll('.cell-select').forEach((select, index) => {
+            select.value = cells[index] ?? '';
+        });
+    }
     onLayoutSelect(event) {
         const selectedLayout = event.target?.value;
-        if (ALLOWED_LAYOUTS.includes(selectedLayout)) {
-            this.state.globe.display = selectedLayout;
+        if (!isLayoutType(selectedLayout) || !this.allowedLayouts.includes(selectedLayout)) {
+            console.error(`${selectedLayout} is not a valid layout!`);
             return;
         }
-        console.error(`${selectedLayout} is not a valid layout!`);
-    }
-    onLayoutChanged(globe) {
-        this.syncLayoutSelect(globe);
-        if (this.isPanelVisible) {
-            this.updateShadowsVisibility(globe);
-        }
+        this.layout.cells = distributeCells(selectedLayout, this.layout.cells);
+        this.layout.sizes = getDefaultSizes(selectedLayout);
+        this.layout.type = selectedLayout;
     }
-    syncLayoutSelect(layout) {
-        const layoutSelect = this.shadowRoot?.querySelector('#layout');
-        if (layoutSelect) {
-            layoutSelect.value = layout;
+    /**
+     * Places a Component in a Cell of the Grid.
+     * A Component can only be displayed once: if it is already displayed in another Cell,
+     * both Cells are swapped, so that the Component that was in the target Cell is not lost.
+     */
+    onCellSelect(event, cellIndex) {
+        const value = event.target?.value;
+        const component = isCellComponent(value) ? value : null;
+        const cells = [...this.layout.cells];
+        const previousIndex = component === null ? -1 : cells.indexOf(component);
+        if (previousIndex >= 0) {
+            cells[previousIndex] = cells[cellIndex];
         }
+        cells[cellIndex] = component;
+        this.layout.cells = cells;
     }
-    updateShadowsVisibility(globe) {
-        const shadowsGroup = this.shadowRoot?.querySelector('.shadows-group');
-        const shadowsDate = this.shadowRoot?.querySelector('.shadows-date');
-        const shadowsCheckbox = this.shadowRoot?.querySelector('#shadowsCheckbox');
-        const has3Dlayout = globe === '2D/3D' || globe === '3D';
-        shadowsGroup?.classList.toggle('hidden', !has3Dlayout);
-        shadowsDate?.classList.toggle('hidden', !has3Dlayout || !shadowsCheckbox?.checked);
+    /** Whether one of the Cells displays a 3D Map, which the shadows options depend on. */
+    get is3dDisplayed() {
+        return this.layout.cells.includes('map-3d');
     }
     onShadowsToggle(event) {
         const shadowsDate = this.shadowRoot?.querySelector('.shadows-date');
@@ -93,6 +130,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     render() {
         if (this.isPanelVisible) {
             super.render();
+            this.syncSelects();
         }
         else {
             this.hide();

package/components/layout/style.css

@@ -15,6 +15,19 @@ fieldset {
   margin-top: 1rem;
 }
 
+/* Schema of the Grid: one row per row of the Grid, one select per Cell. */
+.cells-row {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+.cell-select {
+  flex: 1 1 0;
+  /* Prevents the selects from growing over the width of the panel. */
+  min-width: 0;
+}
+
 .option {
   margin-top: 0.5rem;
   display: flex;

package/components/main.d.ts

@@ -32,6 +32,7 @@ export { default as LRPanelComponent } from './lr-panel/component.js';
 export { default as Map2dComponent } from './map-2d/component.js';
 export { default as DeprecatedMapComponent } from './map-2d/deprecatedmapcomponent.js';
 export { default as Map3dComponent } from './map-3d/component.js';
+export { default as MapGridComponent } from './map-grid/component.js';
 export { default as MenuMobile } from './menu-mobile/component.js';
 export { default as MenuButtonComponent } from './menubutton/component.js';
 export { default as ModalsComponent } from './modals/component.js';

package/components/main.js

@@ -31,6 +31,7 @@ export { default as LRPanelComponent } from './lr-panel/component.js';
 export { default as Map2dComponent } from './map-2d/component.js';
 export { default as DeprecatedMapComponent } from './map-2d/deprecatedmapcomponent.js';
 export { default as Map3dComponent } from './map-3d/component.js';
+export { default as MapGridComponent } from './map-grid/component.js';
 export { default as MenuMobile } from './menu-mobile/component.js';
 export { default as MenuButtonComponent } from './menubutton/component.js';
 export { default as ModalsComponent } from './modals/component.js';

package/components/map-2d/component.d.ts

@@ -109,12 +109,6 @@ export default class Map2dComponent extends GirafeHTMLElement {
     private setSelectLayerStyle;
     private setHighlightLayerStyle;
     private setCrosshairStyle;
-    /**
-     * Resizes the 2D Map depending on the current globe display mode.
-     * In side-by-side mode the 2D Map only takes the left part of the available space,
-     * in full 3D mode it is hidden. The 3D Map takes care of its own sizing.
-     */
-    onGlobeDisplayChanged(display: string): void;
     onFeaturesSelected(features: Feature[]): void;
     onFeatureHighlighted(features: Feature[]): void;
     zoomToExtent(extent: Extent): void;

package/components/map-2d/component.js

@@ -158,7 +158,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
                 this.addMarker(marker);
             }
         });
-        this.subscribe('globe.display', (_oldDisplay, newDisplay) => this.onGlobeDisplayChanged(newDisplay));
         this.subscribe(/layers\.layersList\..*\.activeState/, async (_oldActive, _newActive, layer) => {
             await this.onLayerToggled(layer);
             if (layer.active) {
@@ -352,6 +351,9 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             this.olMap.updateSize();
         }, 1000);
         this.mapTargetResizeObserver = new ResizeObserver(() => {
+            // The size of the Map is defined by the Cell of the Grid it is displayed in,
+            // and the user can change it at any time by dragging a splitter.
+            this.olMap.updateSize();
             this.updateCloseSwiperPosition();
         });
         this.mapTargetResizeObserver.observe(this.mapTarget);
@@ -481,7 +483,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.render();
         this.listenOpenLayersEvents();
         this.registerEvents();
-        this.onGlobeDisplayChanged(this.state.globe.display);
     }
     onCustomGirafeEvent(details) {
         if (details.action === GeoEvents.zoomToExtent) {
@@ -549,26 +550,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             })
         }));
     }
-    /**
-     * Resizes the 2D Map depending on the current globe display mode.
-     * In side-by-side mode the 2D Map only takes the left part of the available space,
-     * in full 3D mode it is hidden. The 3D Map takes care of its own sizing.
-     */
-    onGlobeDisplayChanged(display) {
-        if (display === '3D') {
-            this.style.display = 'none';
-        }
-        else if (display === '2D/3D') {
-            this.style.display = 'block';
-            this.style.width = '45%';
-            this.olMap.updateSize();
-        }
-        else {
-            this.style.display = 'block';
-            this.style.width = '100%';
-            this.olMap.updateSize();
-        }
-    }
     onFeaturesSelected(features) {
         this.selectedFeaturesCollection.clear();
         if (features) {

package/components/map-3d/component.d.ts

@@ -43,8 +43,10 @@ export default class Map3dComponent extends GirafeHTMLElement {
      */
     private createGlobe;
     /**
-     * Shows or hides the 3D Map and sizes it depending on the current display mode.
-     * The 2D Map takes care of its own sizing.
+     * Creates and enables the globe when the 3D Map is displayed in a Cell of the Grid,
+     * and disables it when it is not displayed anymore.
+     * The size and the position of the Map are managed by the Grid, OLCesium takes care
+     * of following the size of its container.
      */
     onGlobeToggled(): Promise<void>;
 }

package/components/map-3d/component.js

@@ -61,7 +61,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.map3dTarget = this.shadow.getElementById('cs-map');
     }
     registerEvents() {
-        this.subscribe('globe.display', async () => {
+        this.subscribe('layout.cells', async () => {
             await this.onGlobeToggled();
             this.globe?.setCamera(this.state.globe.camera);
         });
@@ -109,30 +109,19 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         return this.globeCreation;
     }
     /**
-     * Shows or hides the 3D Map and sizes it depending on the current display mode.
-     * The 2D Map takes care of its own sizing.
+     * Creates and enables the globe when the 3D Map is displayed in a Cell of the Grid,
+     * and disables it when it is not displayed anymore.
+     * The size and the position of the Map are managed by the Grid, OLCesium takes care
+     * of following the size of its container.
      */
     async onGlobeToggled() {
-        if (this.state.globe.display === '3D') {
-            // Full screen globe has been enabled
-            this.style.display = 'block';
-            this.style.left = '0';
-            this.style.width = '100%';
-            await this.createGlobe();
-            this.globe?.setEnabled(true);
-        }
-        else if (this.state.globe.display === '2D/3D') {
-            // Side by side has been enabled
-            this.style.display = 'block';
-            this.style.left = '45%';
-            this.style.width = '55%';
+        const isDisplayed = this.state.layout.cells.includes('map-3d');
+        if (isDisplayed) {
             await this.createGlobe();
             this.globe?.setEnabled(true);
         }
         else {
-            // 3d map is not visible
             this.globe?.setEnabled(false);
-            this.style.display = 'none';
             this.unregisterInteractionListeners('globe.select');
         }
     }

package/components/map-grid/component.d.ts

@@ -0,0 +1,70 @@
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+/** A splitter, placed on the boundary between two columns or two rows of the Grid. */
+type Splitter = {
+    /** Whether the splitter is dragged left/right (vertical) or up/down (horizontal). */
+    orientation: 'vertical' | 'horizontal';
+    /** Index of the column (vertical) or of the row (horizontal) placed before the splitter. */
+    index: number;
+    /** Position of the splitter, in percent of the Grid. */
+    position: number;
+};
+/**
+ * The Grid in which the Map Components are displayed.
+ *
+ * The Components are written as children of this Element in the HTML of the application
+ * and are moved into the Cells of the Grid, depending on <code>state.layout</code>.
+ * A Component that is not placed in any Cell is not slotted, and therefore not displayed.
+ */
+declare class MapGridComponent extends GirafeHTMLElement {
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
+    /** Index of each Cell of the current Layout, used to render the Cells and their slots. */
+    cellIndexes: number[];
+    /** The splitters between the Cells of the current Layout. */
+    splitters: Splitter[];
+    /** The splitter that is currently dragged, if any. */
+    private draggedSplitter;
+    constructor();
+    private get layout();
+    private get grid();
+    protected connectedCallback(): void;
+    private registerEvents;
+    /**
+     * Rebuilds the Cells and the splitters of the Grid for the current Layout,
+     * then places the Components and applies the sizes.
+     */
+    private applyLayout;
+    /**
+     * Creates one splitter for each boundary between two columns and between two rows.
+     * The splitters go through the whole Grid, so that the columns and the rows keep
+     * the same sizes in every Cell of the Grid.
+     */
+    private createSplitters;
+    /**
+     * Moves each Component into the Cell it is configured for, by setting the name of the slot
+     * it must be displayed in. Components that are not placed in any Cell get no slot,
+     * which means that they are not displayed at all.
+     */
+    private applyCells;
+    /** Applies the sizes of the columns and of the rows to the Grid and to the splitters. */
+    private applySizes;
+    private applySplitterPosition;
+    getSplitterId(splitter: Splitter): string;
+    onSplitterPointerDown(event: PointerEvent, splitter: Splitter): void;
+    /**
+     * Resizes the two columns (or the two rows) around the dragged splitter.
+     * While dragging, the new sizes are only applied to the DOM: the state is updated
+     * at the end of the drag, to prevent flooding it with intermediate values.
+     */
+    onSplitterPointerMove(event: PointerEvent, splitter: Splitter): void;
+    onSplitterPointerUp(event: PointerEvent, splitter: Splitter): void;
+    /**
+     * Computes the new sizes of the columns (or of the rows) when the splitter is moved
+     * to the given position, in percent of the Grid. The two resized columns (or rows) are
+     * kept between MIN_CELL_SIZE and MAX_CELL_SIZE, the other ones keep their size.
+     */
+    private getResizedSizes;
+    render(): void;
+}
+export default MapGridComponent;