itowns 2.44.3-next.9 → 2.45.0

package/lib/Utils/gui/C3DTilesStyle.js

@@ -1,215 +0,0 @@
-import { C3DTILES_LAYER_EVENTS } from "../../Layer/C3DTilesLayer.js";
-import Widget from "./Widget.js";
-const DEFAULT_OPTIONS = {
-  width: 200,
-  position: 'top-right'
-};
-
-/**
- * A widget for dynamic 3DTiles styling
- *
- * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
- * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
- * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
- * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
- * [this example](http://www.itowns-project.org/itowns/examples/#widgets_3dtiles_style) for more details.
- *
- * @extends Widget
- *
- * @property    {HTMLElement}   domElement      An html div containing the minimap.
- * @property    {HTMLElement}   parentElement   The parent HTML container of `this.domElement`.
- */
-class C3DTilesStyle extends Widget {
-  /**
-     *
-     * @param {View} view view
-     * @param {*} options options
-     */
-  constructor(view, options) {
-    super(view, options, DEFAULT_OPTIONS);
-    this.domElement.onclick = event => event.stopImmediatePropagation();
-
-    // create select of the C3DTilesLayers
-    const selectC3DTilesLayer = document.createElement('select');
-    this.domElement.appendChild(selectC3DTilesLayer);
-
-    /** @type {Map<HTMLElement, HTMLElement>} */
-    const selectOptionLayerContent = new Map();
-    const updateSelectedLayer = () => {
-      for (const [sO, lC] of selectOptionLayerContent) {
-        lC.hidden = sO !== selectC3DTilesLayer.selectedOptions[0];
-      }
-    };
-    selectC3DTilesLayer.onchange = updateSelectedLayer;
-    view.getLayers().filter(el => el.isC3DTilesLayer === true).forEach(c3DTilesLayer => {
-      const selectC3DTilesLayerOption = document.createElement('option');
-      selectC3DTilesLayerOption.innerText = c3DTilesLayer.name;
-      selectC3DTilesLayer.add(selectC3DTilesLayerOption);
-      const layerContent = document.createElement('div');
-      this.domElement.appendChild(layerContent);
-
-      // link select option to layer content
-      selectOptionLayerContent.set(selectC3DTilesLayerOption, layerContent);
-
-      // wait for C3DTileFeatures to load
-      c3DTilesLayer.addEventListener(C3DTILES_LAYER_EVENTS.ON_TILE_CONTENT_LOADED, () => {
-        // reset
-        while (layerContent.firstChild) {
-          layerContent.firstChild.remove();
-        }
-
-        /** @type {Map<string,Array>} */
-        const buffer = new Map(); // record what are the possible values for a key in batchTable
-        for (const [, tileC3DTileFeatures] of c3DTilesLayer.tilesC3DTileFeatures) {
-          for (const [, c3DTileFeature] of tileC3DTileFeatures) {
-            // eslint-disable-next-line guard-for-in
-            for (const key in c3DTileFeature.getInfo().batchTable) {
-              if (!buffer.has(key)) {
-                buffer.set(key, []);
-              }
-
-              // check possible value for this key
-              const value = c3DTileFeature.getInfo().batchTable[key];
-              if (!buffer.get(key).includes(value)) {
-                buffer.get(key).push(value);
-              }
-            }
-          }
-        }
-
-        /** @type {Map<HTMLElement, Function>} */
-        const colorFunctions = new Map();
-        /** @type {Map<HTMLElement, Function>} */
-        const opacityFunctions = new Map();
-        const appendInputColorAndOpacity = (getKeyValue, key, possibleValues) => {
-          const inputColor = document.createElement('input');
-          inputColor.setAttribute('type', 'color');
-          layerContent.appendChild(inputColor);
-          inputColor.onchange = () => {
-            const keyValue = getKeyValue();
-            if (!possibleValues.includes(keyValue)) {
-              return;
-            }
-            const colorSelected = inputColor.value; // copy
-            colorFunctions.set(keyValue, c3DTileFeature => {
-              if (c3DTileFeature.getInfo().batchTable[key] == keyValue) {
-                return colorSelected;
-              }
-              return null;
-            });
-            c3DTilesLayer.updateStyle();
-            view.notifyChange();
-          };
-          const opacityElement = document.createElement('input');
-          opacityElement.setAttribute('type', 'range');
-          opacityElement.min = 0;
-          opacityElement.max = 1;
-          opacityElement.step = 0.1;
-          opacityElement.value = 1;
-          layerContent.appendChild(opacityElement);
-          opacityElement.onchange = () => {
-            const keyValue = getKeyValue();
-            if (!possibleValues.includes(keyValue)) {
-              return;
-            }
-            const opacitySelected = opacityElement.value; // copy
-            opacityFunctions.set(keyValue, c3DTileFeature => {
-              if (c3DTileFeature.getInfo().batchTable[key] == keyValue) {
-                return opacitySelected;
-              }
-              return null;
-            });
-            c3DTilesLayer.updateStyle();
-            view.notifyChange();
-          };
-          return {
-            inputColor,
-            opacityElement
-          };
-        };
-        const appendFilterSelect = (key, values) => {
-          const label = document.createElement('label');
-          label.innerText = key;
-          layerContent.appendChild(label);
-          const selectKey = document.createElement('select');
-          layerContent.appendChild(selectKey);
-          values.forEach(value => {
-            const selectKeyOption = document.createElement('option');
-            selectKeyOption.value = value;
-            selectKeyOption.text = value;
-            selectKey.add(selectKeyOption);
-          });
-          appendInputColorAndOpacity(() => selectKey.selectedOptions[0].value, key, values);
-        };
-        const appendFilterInputText = (key, values) => {
-          const label = document.createElement('label');
-          label.innerText = key;
-          layerContent.appendChild(label);
-          const inputText = document.createElement('input');
-          inputText.setAttribute('type', 'text');
-          layerContent.appendChild(inputText);
-          const {
-            inputColor,
-            opacityElement
-          } = appendInputColorAndOpacity(() => inputText.value, key, values);
-          inputText.onchange = () => {
-            if (!values.includes(inputText.value)) {
-              return;
-            }
-            const colorSelected = inputColor.value; // copy
-            const textSelected = inputText.value; // copy
-            colorFunctions.set(textSelected, c3DTileFeature => {
-              if (c3DTileFeature.getInfo().batchTable[key] == textSelected) {
-                return colorSelected;
-              }
-              return null;
-            });
-            const opacitySelected = opacityElement.value; // copy
-            opacityFunctions.set(textSelected, c3DTileFeature => {
-              if (c3DTileFeature.getInfo().batchTable[key] == textSelected) {
-                return opacitySelected;
-              }
-              return null;
-            });
-            c3DTilesLayer.updateStyle();
-            view.notifyChange();
-          };
-        };
-
-        // create ui from buffer
-        for (const [key, values] of buffer) {
-          if (values.length < C3DTilesStyle.MAX_SELECT_VALUE) {
-            appendFilterSelect(key, values);
-          } else {
-            appendFilterInputText(key, values);
-          }
-        }
-
-        // set style
-        c3DTilesLayer.style = {
-          fill: {
-            color: c3DTileFeature => {
-              let result = null;
-              for (const [, colorFunction] of colorFunctions) {
-                result = colorFunction(c3DTileFeature) || result;
-              }
-              return result;
-            },
-            opacity: c3DTileFeature => {
-              let result = 1;
-              for (const [, opacityFunction] of opacityFunctions) {
-                result = opacityFunction(c3DTileFeature) || result;
-              }
-              return result;
-            }
-          }
-        };
-      });
-    });
-    updateSelectedLayer();
-  }
-  static get MAX_SELECT_VALUE() {
-    return 10;
-  }
-}
-export default C3DTilesStyle;

package/lib/Utils/gui/Main.js

@@ -1,7 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as Navigation } from "./Navigation.js";
-export { default as Minimap } from "./Minimap.js";
-export { default as Scale } from "./Scale.js";
-export { default as Searchbar } from "./Searchbar.js";
-export { default as Widget } from "./Widget.js";
-export { default as C3DTilesStyle } from "./C3DTilesStyle.js";

package/lib/Utils/gui/Minimap.js

@@ -1,154 +0,0 @@
-import Coordinates from "../../Core/Geographic/Coordinates.js";
-import { MAIN_LOOP_EVENTS } from "../../Core/MainLoop.js";
-import PlanarView from "../../Core/Prefab/PlanarView.js";
-import { CAMERA_TYPE } from "../../Renderer/Camera.js";
-import Widget from "./Widget.js";
-const DEFAULT_OPTIONS = {
-  minScale: 1 / 500000,
-  maxScale: 1 / 5E8,
-  zoomRatio: 1 / 30,
-  width: 150,
-  height: 150,
-  position: 'bottom-left'
-};
-
-/**
- * A widget for minimap
- *
- * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
- * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
- * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
- * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
- * [this example](http://www.itowns-project.org/itowns/examples/#widgets_minimap) for more details.
- *
- * @extends Widget
- *
- * @property    {HTMLElement}   domElement      An html div containing the minimap.
- * @property    {HTMLElement}   parentElement   The parent HTML container of `this.domElement`.
- */
-class Minimap extends Widget {
-  /**
-   * @param   {GlobeView}             view                                    The iTowns view the minimap should be
-                                                                              * linked to. Only {@link GlobeView} is
-                                                                              * supported at the moment.
-   * @param   {ColorLayer}            layer                                   The {@link ColorLayer} that should be
-                                                                              * displayed on the minimap.
-   * @param   {Object}                [options]                               The minimap optional configuration.
-   * @param   {HTMLElement}           [options.parentElement=view.domElement] The parent HTML container of the div
-                                                                              * which contains minimap widgets.
-   * @param   {number}                [options.size]                          The size of the minimap. It is a number
-                                                                              * that describes both width and height
-                                                                              * in pixels of the minimap.
-   * @param   {number}                [options.width=150]                     The width in pixels of the minimap.
-   * @param   {number}                [options.height=150]                    The height in pixels of the minimap.
-   * @param   {string}                [options.position='bottom-left']        Defines which position within the
-                                                                              * `parentElement` the minimap should be
-                                                                              * displayed to. Possible values are
-                                                                              * `top`, `bottom`, `left`, `right`,
-                                                                              * `top-left`, `top-right`, `bottom-left`
-                                                                              * and `bottom-right`. If the input value
-                                                                              * does not match one of these, it will
-                                                                              * be defaulted to `bottom-left`.
-   * @param   {Object}                [options.translate]                     An optional translation of the minimap.
-   * @param   {number}                [options.translate.x=0]                 The minimap translation along the page
-                                                                              * x-axis.
-   * @param   {number}                [options.translate.y=0]                 The minimap translation along the page
-                                                                              * y-axis.
-   * @param   {HTMLElement|string}    [options.cursor]                        An html element or an HTML string
-                                                                              * describing a cursor showing minimap
-                                                                              * view camera target position at the
-                                                                              * center of the minimap.
-   * @param   {number}                [options.minScale=1/2000]               The minimal scale the minimap can reach.
-   * @param   {number}                [options.maxScale=1/1_250_000]          The maximal scale the minimap can reach.
-   * @param   {number}                [options.zoomRatio=1/30]                The ratio between minimap camera zoom
-                                                                              * and view camera zoom.
-   * @param   {number}                [options.pitch=0.28]                    The screen pixel pitch, used to compute
-                                                                              * view and minimap scale.
-   */
-  constructor(view, layer) {
-    let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    // ---------- BUILD PROPERTIES ACCORDING TO DEFAULT OPTIONS AND OPTIONS PASSED IN PARAMETERS : ----------
-
-    if (!view.isGlobeView) {
-      throw new Error('\'Minimap\' plugin only supports \'GlobeView\'. Therefore, the \'view\' parameter must be a ' + '\'GlobeView\'.');
-    }
-    if (!layer.isColorLayer) {
-      throw new Error('\'layer\' parameter form \'Minimap\' constructor should be a \'ColorLayer\'.');
-    }
-    super(view, options, DEFAULT_OPTIONS);
-    this.minScale = options.minScale || DEFAULT_OPTIONS.minScale;
-    this.maxScale = options.maxScale || DEFAULT_OPTIONS.maxScale;
-
-    // TODO : it could be interesting to be able to specify a method as zoomRatio parameter. This method could
-    //  return a zoom ratio from the scale of the minimap.
-    this.zoomRatio = options.zoomRatio || DEFAULT_OPTIONS.zoomRatio;
-
-    // ---------- this.domElement SETTINGS SPECIFIC TO MINIMAP : ----------
-
-    this.domElement.id = 'widgets-minimap';
-
-    // Display a cursor at the center of the minimap, if requested.
-    if (options.cursor) {
-      // Wrap cursor domElement inside a div to center it in minimap.
-      const cursorWrapper = document.createElement('div');
-      cursorWrapper.id = 'cursor-wrapper';
-      this.domElement.appendChild(cursorWrapper);
-
-      // Add specified cursor to its wrapper.
-      if (typeof options.cursor === 'string') {
-        cursorWrapper.innerHTML = options.cursor;
-      } else if (options.cursor instanceof HTMLElement) {
-        cursorWrapper.appendChild(options.cursor);
-      }
-    }
-
-    // ---------- CREATE A MINIMAP View AND DISPLAY DATA PASSED IN Layer PARAMETER : ----------
-
-    this.view = new PlanarView(this.domElement, layer.source.extent, {
-      camera: {
-        type: CAMERA_TYPE.ORTHOGRAPHIC
-      },
-      placement: layer.source.extent,
-      // TODO : the default placement should be the view extent for ortho camera
-      noControls: true,
-      maxSubdivisionLevel: view.tileLayer.maxSubdivisionLevel,
-      disableFocusOnStart: true
-    });
-    this.view.addLayer(layer); // TODO : should this promise be returned by constructor so that user can use it ?
-
-    // Prevent the minimap domElement to get focus when clicked, and prevent click event to be propagated to the
-    // main view controls.
-    this.domElement.addEventListener('pointerdown', event => {
-      event.preventDefault();
-    });
-
-    // ---------- UPDATE MINIMAP VIEW WHEN UPDATING THE MAIN VIEW : ----------
-
-    // The minimal and maximal value the minimap camera3D zoom can reach in order to stay in the scale limits.
-    const initialScale = this.view.getScale(options.pitch);
-    const minZoom = this.view.camera3D.zoom * this.maxScale / initialScale;
-    const maxZoom = this.view.camera3D.zoom * this.minScale / initialScale;
-
-    // Coordinates used to transform position vectors from the main view CRS to the minimap view CRS.
-    const mainViewCoordinates = new Coordinates(view.referenceCrs);
-    const viewCoordinates = new Coordinates(this.view.referenceCrs);
-    const targetPosition = view.controls.getCameraTargetPosition();
-    view.addFrameRequester(MAIN_LOOP_EVENTS.AFTER_RENDER, () => {
-      // Update minimap camera zoom
-      const distance = view.camera3D.position.distanceTo(targetPosition);
-      const scale = view.getScaleFromDistance(options.pitch, distance);
-      this.view.camera3D.zoom = this.zoomRatio * maxZoom * scale / this.minScale;
-      this.view.camera3D.zoom = Math.min(Math.max(this.view.camera3D.zoom, minZoom), maxZoom);
-      this.view.camera3D.updateProjectionMatrix();
-
-      // Update minimap camera position.
-      mainViewCoordinates.setFromVector3(view.controls.getCameraTargetPosition());
-      mainViewCoordinates.as(this.view.referenceCrs, viewCoordinates);
-      this.view.camera3D.position.x = viewCoordinates.x;
-      this.view.camera3D.position.y = viewCoordinates.y;
-      this.view.camera3D.updateMatrixWorld(true);
-      this.view.notifyChange(this.view.camera3D);
-    });
-  }
-}
-export default Minimap;

package/lib/Utils/gui/Navigation.js

@@ -1,245 +0,0 @@
-import { VIEW_EVENTS } from "../../Core/View.js";
-import Widget from "./Widget.js";
-const DEFAULT_OPTIONS = {
-  displayCompass: true,
-  display3DToggle: true,
-  displayZoomIn: true,
-  displayZoomOut: true,
-  animationDuration: 500,
-  position: 'bottom-left',
-  direction: 'column'
-};
-const DEFAULT_BUTTONS = {
-  compass: {
-    id: 'compass',
-    content: '',
-    info: 'Rotate the camera to face North',
-    parentId: 'widgets'
-  },
-  toggle3D: {
-    id: '3d-button',
-    content: '3D',
-    info: 'Tilt the camera'
-  },
-  zoomIn: {
-    id: 'zoom-in-button',
-    content: '<span class="widget-zoom-button-logo"></span>',
-    info: 'Zoom in',
-    parentId: 'zoom-button-bar'
-  },
-  zoomOut: {
-    id: 'zoom-out-button',
-    content: '<span id="zoom-out-logo" class="widget-zoom-button-logo"></span>',
-    info: 'Zoom out',
-    parentId: 'zoom-button-bar'
-  }
-};
-
-/**
- * A widget menu manager for navigation.
- *
- * To use it, you need to link the widgets' stylesheet to your html webpage. This stylesheet is included in
- * [itowns bundles](https://github.com/iTowns/itowns/releases) if you downloaded them, or it can be found in
- * `node_modules/itowns/examples/css` if you installed iTowns with npm. Otherwise, it can be found at
- * [this link](https://raw.githubusercontent.com/iTowns/itowns/master/examples/css/widgets.css). See
- * [this example](http://www.itowns-project.org/itowns/examples/#widgets_navigation) for more details.
- *
- * @extends Widget
- *
- * @property {HTMLElement}          domElement      An html div containing all navigation widgets.
- * @property {HTMLElement}          parentElement   The parent HTML container of `this.domElement`.
- * @property {HTMLButtonElement}    compass         The HTML button for the compass.
- * @property {HTMLButtonElement}    toggle3D        The HTML button for the 3D/2D toggle button.
- * @property {HTMLButtonElement}    zoomIn          The HTML button for the zoom-in button.
- * @property {HTMLButtonElement}    zoomOut         The HTML button for the zoom-out button.
- *
- * @example
- * // Create a Navigation widget in the bottom-right corner of an iTowns view domElement
- * const navigation = new Navigation(view, { position: 'bottom-right' };
- *
- * // Change the tooltip for the compass :
- * navigation.compass.title = 'new tooltip';
- *
- * // Change the method ran when clicking zoom-in button :
- * function newMethod() {
- *     // do something
- * }
- * navigation.zoomIn.onclick = newMethod;
- */
-class Navigation extends Widget {
-  #_view;
-  #_action(params) {
-    params.time = this.animationDuration;
-    return this.#_view.controls.lookAtCoordinate(params);
-  }
-  #_addDefaultButton(settings, onclick) {
-    return this.addButton(settings.id, settings.content, settings.info, onclick, settings.parentId);
-  }
-
-  /**
-   * @param   {GlobeView}     view                                    The iTowns view the navigation should be linked
-                                                                      * to. For the moment, only `{@link GlobeView}`
-                                                                      * is supported.
-   * @param   {Object}        options                                 The navigation menu optional configuration.
-   * @param   {HTMLElement}   [options.parentElement=view.domElement] The parent HTML container of the div which
-                                                                      * contains navigation widgets.
-   * @param   {boolean}       [options.displayCompass=true]           Whether the compass widget should be displayed.
-   * @param   {boolean}       [options.display3DToggle=true]          Whether the navigation should include a widget
-                                                                      * to toggle between top and oblique view.
-   * @param   {boolean}       [options.displayZoomIn=true]            Whether the zoom-in widget should be displayed.
-   * @param   {boolean}       [options.displayZoomOut=true]           Whether the zoom-out widget should be displayed.
-   * @param   {number}        [options.animationDuration=500]         The duration of travel animations, when clicking
-                                                                      * navigation widgets.
-   * @param   {string}        [options.position='bottom-left']        Defines which corner of the `parentElement` the
-                                                                      * navigation menu should be displayed to.
-                                                                      * Possible values are `top-left`, `top-right`,
-                                                                      * `bottom-left` and `bottom-right`. If the input
-                                                                      * value does not match one of these, it will be
-                                                                      * defaulted to `bottom-left`.
-   * @param   {string}        [options.direction='column']            Whether the navigation menu should expand
-                                                                      * horizontally or vertically. Possible values
-                                                                      * are `column` and `row`. If the input value
-                                                                      * does not match one of these, it will be
-                                                                      * defaulted to `column`.
-   * @param   {Object}        [options.translate]                     An optional translation of the navigation menu.
-   * @param   {number}        [options.translate.x=0]                 The navigation menu translation along the page
-                                                                      * x-axis.
-   * @param   {number}        [options.translate.y=0]                 The navigation menu translation along the page
-                                                                      * y-axis.
-   */
-  constructor(view) {
-    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    // ---------- BUILD PROPERTIES ACCORDING TO DEFAULT OPTIONS AND OPTIONS PASSED IN PARAMETERS : ----------
-
-    // Check if the view is supported.
-    if (!view.isGlobeView) {
-      throw new Error('\'Navigation\' plugin only supports \'GlobeView\'. Therefore, the \'view\' parameter must be a ' + '\'GlobeView\'.');
-    }
-
-    // `top`, `bottom`, `left` and `right` values for `position` option are not relevant for navigation widget.
-    if (['top', 'bottom', 'left', 'right'].includes(options.position)) {
-      console.warn('\'position\' optional parameter for \'Navigation\' is not a valid option. ' + `It will be set to '${DEFAULT_OPTIONS.position}'.`);
-      options.position = DEFAULT_OPTIONS.position;
-    }
-    super(view, options, DEFAULT_OPTIONS);
-    this.#_view = view;
-    this.direction = options.direction || DEFAULT_OPTIONS.direction;
-    if (!['column', 'row'].includes(this.direction)) {
-      console.warn('\'direction\' optional parameter for \'Navigation\' constructor is not a valid option. ' + `It will be set to '${DEFAULT_OPTIONS.direction}'.`);
-      this.direction = DEFAULT_OPTIONS.direction;
-    }
-    this.animationDuration = options.animationDuration === undefined ? DEFAULT_OPTIONS.animationDuration : options.animationDuration;
-
-    // ---------- CREATE A DomElement WITH id AND classes RELEVANT TO THE WIDGET PROPERTIES : ----------
-
-    // Create a div containing all widgets and add it to its specified parent.
-    this.domElement.id = 'widgets-navigation';
-
-    // Position widget div according to options.
-    this.domElement.classList.add(`${this.direction}-widget`);
-
-    // ---------- CREATE THE DEFAULT WIDGETS IF NOT HIDDEN (COMPASS, 3D AND ZOOM BUTTONS) : ----------
-
-    // Add a compass widget if requested.
-    if (options.displayCompass ?? DEFAULT_OPTIONS.displayCompass) {
-      this.compass = this.#_addDefaultButton(DEFAULT_BUTTONS.compass, () => {
-        this.#_action({
-          heading: 0,
-          tilt: 89.5
-        });
-      });
-
-      // Manage compass rotation when the view's camera is moved.
-      view.addEventListener(VIEW_EVENTS.CAMERA_MOVED, event => {
-        this.compass.style.transform = `rotate(${-event.heading}deg)`;
-      });
-    }
-
-    // Add a 3D toggle button if requested.
-    if (options.display3DToggle ?? DEFAULT_OPTIONS.display3DToggle) {
-      this.toggle3D = this.#_addDefaultButton(DEFAULT_BUTTONS.toggle3D, () => {
-        this.#_action({
-          tilt: this.#_view.controls.getTilt() < 89 ? 89.5 : 40
-        });
-      });
-
-      // Manage button content toggle when the view's camera is moved.
-      view.addEventListener(VIEW_EVENTS.CAMERA_MOVED, event => {
-        this.toggle3D.innerHTML = event.tilt < 89 ? '2D' : '3D';
-      });
-    }
-
-    // Add a zoom-in button if requested.
-    if (options.displayZoomIn ?? DEFAULT_OPTIONS.displayZoomIn) {
-      this.zoomIn = this.#_addDefaultButton(DEFAULT_BUTTONS.zoomIn, () => {
-        this.#_action({
-          zoom: Math.min(20, this.#_view.controls.getZoom() + 1)
-        });
-      });
-    }
-
-    // Add a zoom-out button if requested.
-    if (options.displayZoomOut ?? DEFAULT_OPTIONS.displayZoomOut) {
-      this.zoomOut = this.#_addDefaultButton(DEFAULT_BUTTONS.zoomOut, () => {
-        this.#_action({
-          zoom: Math.max(3, this.#_view.controls.getZoom() - 1)
-        });
-      });
-    }
-  }
-
-  /**
-   *
-   * @param   {string}    id              The unique id the created button should be given.
-   * @param   {string}    [content='']    An HTML string defining the content of the button.
-   * @param   {string}    [title='']      An HTML string defining information on the button. This string will be
-                                          * displayed in a tooltip when hovering the button.
-   * @param   {function}  [onclick] The method that should be executed when the button is clicked on.
-   * @param   {string}    [parentId]      The unique id of a button bar in which the created button should be added.
-                                          * A button bar is a group which contains one or several buttons. All
-                                          * buttons created with Navigation are in a button bar. If the given id does
-                                          * not match an already existing button bar, a new button bar will be created
-                                          * with this id. If no id is given, a button bar will be created with no id.
-                                          * The later case can be useful for creating isolated buttons.
-   *
-   * @returns {HTMLButtonElement}     The created button.
-   */
-  addButton(id) {
-    let content = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    let title = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-    let onclick = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
-    let parentId = arguments.length > 4 ? arguments[4] : undefined;
-    let buttonBar = document.getElementById(parentId);
-    if (!buttonBar) {
-      buttonBar = this.addButtonBar(parentId);
-    }
-    const button = document.createElement('button');
-    button.className = 'widget-button';
-    button.id = id;
-    button.innerHTML = content;
-    button.title = title;
-    button.onclick = onclick;
-    buttonBar.appendChild(button);
-
-    // The buttons must not be focused using tab key.
-    button.tabIndex = -1;
-    // When releasing the mouse after clicking the button, we give the focus back to the view. Therefore, we can use
-    // key events on the view without having to click the view to grant it focus.
-    window.addEventListener('pointerup', () => {
-      if (document.activeElement === button) {
-        this.#_view.domElement.focus();
-      }
-    });
-    return button;
-  }
-  addButtonBar(id) {
-    const buttonBar = document.createElement('div');
-    buttonBar.className = 'widget-button-bar';
-    if (id) {
-      buttonBar.id = id;
-    }
-    this.domElement.appendChild(buttonBar);
-    return buttonBar;
-  }
-}
-export default Navigation;