@opengeoweb/shared 9.9.0 → 9.10.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useRef } from 'react';
+import React__default, { useRef, Component } from 'react';
 import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, Switch, TextField, InputAdornment } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import { throttle, escapeRegExp, debounce } from 'lodash';
@@ -259,6 +259,57 @@ function _nonIterableSpread() {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      var F = function () {};
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var normalCompletion = true,
+    didErr = false,
+    err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
 
 var defaultDelay = 1000;
 var useControlledTooltip = function useControlledTooltip() {
@@ -2886,7 +2937,9 @@ var TooltipSelect = function TooltipSelect(_a) {
     isEnabled = _a.isEnabled,
     noStyling = _a.noStyling,
     hasBackgroundColor = _a.hasBackgroundColor,
-    props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor"]);
+    _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? 'standard' : _a$variant,
+    props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor", "variant"]);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     selectOpen = _React$useState2[0],
@@ -2936,7 +2989,7 @@ var TooltipSelect = function TooltipSelect(_a) {
     placement: "top",
     open: tooltipOpen
   }, /*#__PURE__*/React.createElement(Select, Object.assign({
-    variant: "standard",
+    variant: variant,
     disableUnderline: true,
     onOpen: onOpen,
     onClose: onClose,
@@ -3323,6 +3376,366 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
   }, /*#__PURE__*/React__default.createElement(Cached, null)));
 };
 
+var CanvasComponent = /*#__PURE__*/function (_Component) {
+  _inherits(CanvasComponent, _Component);
+  function CanvasComponent(props) {
+    var _this;
+    _classCallCheck(this, CanvasComponent);
+    _this = _callSuper(this, CanvasComponent, [props]);
+    _this.canvas = null;
+    _this.ctx = null;
+    _this.currentWidth = 1;
+    _this.currentHeight = 1;
+    _this.canvascontaineroutside = null;
+    _this.canvascontainer = null;
+    _this.timer = null;
+    _this.redrawTimer = null;
+    _this.loopHasStarted = false;
+    _this.mounted = false;
+    _this.updateCanvas = _this.updateCanvas.bind(_assertThisInitialized(_this));
+    _this.handleMouseMoveEvent = _this.handleMouseMoveEvent.bind(_assertThisInitialized(_this));
+    _this.handleMouseUpEvent = _this.handleMouseUpEvent.bind(_assertThisInitialized(_this));
+    _this.handleMouseDownEvent = _this.handleMouseDownEvent.bind(_assertThisInitialized(_this));
+    _this.resize = _this.resize.bind(_assertThisInitialized(_this));
+    _this._handleWindowResize = _this._handleWindowResize.bind(_assertThisInitialized(_this));
+    _this.handleClickEvent = _this.handleClickEvent.bind(_assertThisInitialized(_this));
+    _this.handleWheelEvent = _this.handleWheelEvent.bind(_assertThisInitialized(_this));
+    _this.handleTouchStartEvent = _this.handleTouchStartEvent.bind(_assertThisInitialized(_this));
+    _this.handleTouchEndEvent = _this.handleTouchEndEvent.bind(_assertThisInitialized(_this));
+    _this.handleTouchMoveEvent = _this.handleTouchMoveEvent.bind(_assertThisInitialized(_this));
+    _this.onKeyUp = _this.onKeyUp.bind(_assertThisInitialized(_this));
+    _this.onBlur = _this.onBlur.bind(_assertThisInitialized(_this));
+    _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
+    _this.startLoop = _this.startLoop.bind(_assertThisInitialized(_this));
+    _this._documentKeyDown = _this._documentKeyDown.bind(_assertThisInitialized(_this));
+    _this._isFocussed = false;
+    _this.canvas = null;
+    _this.canvascontaineroutside = /*#__PURE__*/React__default.createRef();
+    _this.canvascontainer = /*#__PURE__*/React__default.createRef();
+    return _this;
+  }
+  _createClass(CanvasComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      this.mounted = true;
+      if (this.canvas) {
+        this.canvas.addEventListener('mousemove', this.handleMouseMoveEvent);
+        this.canvas.addEventListener('mouseup', this.handleMouseUpEvent);
+        this.canvas.addEventListener('mousedown', this.handleMouseDownEvent);
+        this.canvas.addEventListener('touchstart', this.handleTouchStartEvent);
+        this.canvas.addEventListener('touchend', this.handleTouchEndEvent);
+        this.canvas.addEventListener('touchmove', this.handleTouchMoveEvent);
+        this.canvas.addEventListener('wheel', this.handleWheelEvent);
+        this.canvas.addEventListener('click', this.handleClickEvent);
+        document.addEventListener('keydown', this._documentKeyDown, false);
+        this.resize();
+        this.updateCanvas();
+      }
+      var _this$props = this.props,
+        onKeyUp = _this$props.onKeyUp,
+        loopInterval = _this$props.redrawInterval;
+      if (onKeyUp) {
+        window.addEventListener('keyup', this.onKeyUp);
+      }
+      window.addEventListener('resize', this._handleWindowResize);
+      if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
+        this.canvascontaineroutside.current.focus();
+      }
+      this.timer = setInterval(function () {
+        _this2.resize();
+      }, 1000);
+      if (loopInterval) {
+        this.redrawTimer = setInterval(function () {
+          _this2.updateCanvas();
+        }, loopInterval);
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      var _this3 = this;
+      window.requestAnimationFrame(function () {
+        _this3.updateCanvas();
+      });
+      return false;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mounted = false;
+      window.removeEventListener('resize', this._handleWindowResize);
+      var onKeyUp = this.props.onKeyUp;
+      if (onKeyUp) {
+        window.removeEventListener('keyup', this.onKeyUp);
+      }
+      if (this.canvas) {
+        this.canvas.removeEventListener('mousedown', this.handleMouseDownEvent);
+        this.canvas.removeEventListener('mouseup', this.handleMouseUpEvent);
+        this.canvas.removeEventListener('mousemove', this.handleMouseMoveEvent);
+        this.canvas.removeEventListener('touchstart', this.handleTouchStartEvent);
+        this.canvas.removeEventListener('touchend', this.handleTouchEndEvent);
+        this.canvas.removeEventListener('touchmove', this.handleTouchMoveEvent);
+        this.canvas.removeEventListener('wheel', this.handleWheelEvent);
+        this.canvas.removeEventListener('click', this.handleClickEvent);
+        document.removeEventListener('keydown', this._documentKeyDown);
+      }
+      clearInterval(this.timer);
+      clearInterval(this.redrawTimer);
+    }
+  }, {
+    key: "handleMouseMoveEvent",
+    value: function handleMouseMoveEvent(event) {
+      var _this$props2 = this.props,
+        onMouseMove = _this$props2.onMouseMove,
+        onCanvasClick = _this$props2.onCanvasClick;
+      var x = event.offsetX;
+      var y = event.offsetY;
+      if (event.buttons === 1) {
+        onCanvasClick(x, y, this.currentWidth, this.currentHeight);
+      }
+      onMouseMove(x, y, event, this.currentWidth);
+    }
+  }, {
+    key: "handleMouseUpEvent",
+    value: function handleMouseUpEvent(event) {
+      var onMouseUp = this.props.onMouseUp;
+      var x = event.offsetX;
+      onMouseUp(x);
+    }
+  }, {
+    key: "handleMouseDownEvent",
+    value: function handleMouseDownEvent(event) {
+      var onMouseDown = this.props.onMouseDown;
+      var x = event.offsetX;
+      var y = event.offsetY;
+      onMouseDown(x, y, this.currentWidth);
+    }
+  }, {
+    key: "handleTouchStartEvent",
+    value: function handleTouchStartEvent(event) {
+      var onTouchStart = this.props.onTouchStart;
+      onTouchStart(event, this.currentWidth);
+    }
+  }, {
+    key: "handleTouchEndEvent",
+    value: function handleTouchEndEvent() {
+      var onTouchEnd = this.props.onTouchEnd;
+      onTouchEnd();
+    }
+  }, {
+    key: "handleTouchMoveEvent",
+    value: function handleTouchMoveEvent(event) {
+      var _this$props3 = this.props,
+        onTouchMove = _this$props3.onTouchMove,
+        onCanvasClick = _this$props3.onCanvasClick;
+      var touches = event && event.touches && event.touches[0];
+      if (touches && touches.clientX && touches.clientY) {
+        var x2 = event.touches[0].clientX - event.touches[0].target.offsetLeft;
+        var y2 = event.touches[0].clientY;
+        onCanvasClick(x2, y2, this.currentWidth, this.currentHeight);
+      }
+      onTouchMove(event, this.currentWidth);
+    }
+  }, {
+    key: "handleClickEvent",
+    value: function handleClickEvent(event) {
+      var onCanvasClick = this.props.onCanvasClick;
+      var x = event.offsetX;
+      var y = event.offsetY;
+      onCanvasClick(x, y, this.currentWidth, this.currentHeight);
+    }
+  }, {
+    key: "handleWheelEvent",
+    value: function handleWheelEvent(event) {
+      var onWheel = this.props.onWheel;
+      onWheel({
+        event: event,
+        deltaY: event.deltaY,
+        deltaX: event.deltaX,
+        canvasWidth: event.srcElement.width,
+        mouseX: event.offsetX
+      });
+    }
+  }, {
+    key: "onFocus",
+    value: function onFocus() {
+      var isFocussed = this.props.isFocussed;
+      this._isFocussed = true;
+      if (isFocussed) {
+        isFocussed(true);
+      }
+    }
+  }, {
+    key: "onBlur",
+    value: function onBlur() {
+      var isFocussed = this.props.isFocussed;
+      this._isFocussed = false;
+      if (isFocussed) {
+        isFocussed(false);
+      }
+    }
+  }, {
+    key: "onKeyUp",
+    value: function onKeyUp(event) {
+      var onKeyUp = this.props.onKeyUp;
+      if (onKeyUp) {
+        onKeyUp(event);
+      }
+      if (this.canvascontaineroutside && this.canvascontaineroutside.current && onKeyUp) {
+        if (event.code === 'Escape') {
+          this.canvascontaineroutside.current.focus();
+        }
+      }
+    }
+  }, {
+    key: "_documentKeyDown",
+    value: function _documentKeyDown(event) {
+      if (this._isFocussed) {
+        var onKeyDown = this.props.onKeyDown;
+        if (onKeyDown) {
+          onKeyDown(event);
+        }
+      }
+    }
+  }, {
+    key: "_handleWindowResize",
+    value: function _handleWindowResize() {
+      this.resize();
+    }
+  }, {
+    key: "startLoop",
+    value: function startLoop() {
+      var onRenderCanvas = this.props.onRenderCanvas;
+      if (this.mounted === false || this.loopHasStarted === false) {
+        return;
+      }
+      if (this.canvas) {
+        onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
+      }
+      requestAnimationFrame(this.startLoop);
+    }
+  }, {
+    key: "updateCanvas",
+    value: function updateCanvas() {
+      if (!this.canvas) {
+        return;
+      }
+      var _this$props4 = this.props,
+        onRenderCanvas = _this$props4.onRenderCanvas,
+        loop = _this$props4.loop;
+      this.ctx = this.canvas.getContext('2d');
+      if (!this.ctx) {
+        return;
+      }
+      if (this.ctx.canvas.height !== this.currentHeight) {
+        this.ctx.canvas.height = this.currentHeight;
+      }
+      if (this.ctx.canvas.width !== this.currentWidth) {
+        this.ctx.canvas.width = this.currentWidth;
+      }
+      if (loop !== true) {
+        this.loopHasStarted = false;
+        onRenderCanvas(this.ctx, this.currentWidth, this.currentHeight, this.canvas);
+      } else if (this.loopHasStarted === false) {
+        this.loopHasStarted = true;
+        this.startLoop();
+      }
+    }
+  }, {
+    key: "resize",
+    value: function resize() {
+      var canvascontainer = this.canvascontainer,
+        resizeCallback = this.props.resizeCallback;
+      if (canvascontainer && canvascontainer.current) {
+        var newWidth = canvascontainer.current.clientWidth;
+        var newHeight = canvascontainer.current.clientHeight;
+        if (newWidth !== undefined && newHeight !== undefined && (this.currentWidth !== newWidth || this.currentHeight !== newHeight)) {
+          this.currentWidth = newWidth;
+          this.currentHeight = newHeight;
+          this.updateCanvas();
+          resizeCallback && resizeCallback(newWidth);
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      this.updateCanvas();
+      this._handleWindowResize();
+      return /*#__PURE__*/React__default.createElement("div", {
+        role: "button",
+        ref: this.canvascontaineroutside,
+        tabIndex: 0,
+        onFocus: this.onFocus,
+        onBlur: this.onBlur,
+        style: {
+          height: '100%',
+          width: '100%',
+          border: 'none',
+          display: 'block',
+          overflow: 'hidden'
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        ref: this.canvascontainer,
+        style: {
+          minWidth: 'inherit',
+          minHeight: 'inherit',
+          width: 'inherit',
+          height: 'inherit',
+          overflow: 'hidden',
+          display: 'block',
+          border: 'none'
+        },
+        "data-testid": "canvas-container"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          overflow: 'visible',
+          width: 0,
+          height: 0
+        },
+        role: "presentation",
+        "aria-label": "canvas"
+      }, /*#__PURE__*/React__default.createElement("canvas", {
+        ref: function ref(canvas) {
+          _this4.canvas = canvas;
+        }
+      }))));
+    }
+  }]);
+  return CanvasComponent;
+}(Component);
+CanvasComponent.defaultProps = {
+  onRenderCanvas: function onRenderCanvas() {
+    /* intentionally left blank */
+  },
+  onCanvasClick: function onCanvasClick() {
+    /* intentionally left blank */
+  },
+  onMouseMove: function onMouseMove() {
+    /* intentionally left blank */
+  },
+  onMouseUp: function onMouseUp() {
+    /* intentionally left blank */
+  },
+  onMouseDown: function onMouseDown() {
+    /* intentionally left blank */
+  },
+  onTouchStart: function onTouchStart() {
+    /* intentionally left blank */
+  },
+  onTouchEnd: function onTouchEnd() {
+    /* intentionally left blank */
+  },
+  onTouchMove: function onTouchMove() {
+    /* intentionally left blank */
+  },
+  onWheel: function onWheel() {
+    /* intentionally left blank */
+  }
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3927,33 +4340,6 @@ var createToolkitMockStoreWithEggs = function createToolkitMockStoreWithEggs(sto
   return store;
 };
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * */
-// TODO: Move to related component when doing this user story: https://gitlab.com/opengeoweb/geoweb-assets/-/issues/2955
-var getHeight = function getHeight(element) {
-  if (!element) {
-    return null;
-  }
-  var style = getComputedStyle(element);
-  var marginTop = style.marginTop ? parseInt(style.marginTop, 10) : 0;
-  var marginBottom = style.marginTop ? parseInt(style.marginBottom, 10) : 0;
-  return element.offsetHeight + marginTop + marginBottom;
-};
-
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -4012,4 +4398,253 @@ var RenderCounter = /*#__PURE__*/function () {
 }();
 var renderCounter = new RenderCounter();
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, BUTTON_TITLE, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, LastUpdateTime, ResizeComponent as Resizable, SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getHeight, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosError, pollingIntervalTimeout, renderCounter, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
+/**
+ * This class should NEVER be initialized with new Metronome(). Use the
+ * exported variable. To reset the metronome use unregisterAllTimers()
+ * to remove all existing timers followed by init() to initialize the
+ * ticks.
+ */
+var Metronome = /*#__PURE__*/function () {
+  function Metronome() {
+    _classCallCheck(this, Metronome);
+    this.tickId = 0;
+    this.step = this.step.bind(this);
+    this.isPaused = this.isPaused.bind(this);
+    this.continueTimer = this.continueTimer.bind(this);
+    this.pauseTimer = this.pauseTimer.bind(this);
+    this.toggleTimer = this.toggleTimer.bind(this);
+    this.init = this.init.bind(this);
+    this.unregisterAllTimers = this.unregisterAllTimers.bind(this);
+    this.setSpeed = this.setSpeed.bind(this);
+    this.interval = null;
+    this.init();
+    this.handleTimerTicks = null;
+    this.timers = [];
+  }
+  _createClass(Metronome, [{
+    key: "init",
+    value: function init() {
+      if (this.interval != null) {
+        clearInterval(this.interval);
+      }
+      this.interval = setInterval(this.step, 10);
+    }
+  }, {
+    key: "unregisterAllTimers",
+    value: function unregisterAllTimers() {
+      this.timers.length = 0;
+    }
+  }, {
+    key: "step",
+    value: function step() {
+      var _this = this;
+      this.tickId += 1;
+      var triggeredTimerIds = [];
+      this.timers.forEach(function (timer) {
+        // Delay in x10 ms
+        var delay = 100 / timer.hertz;
+        // Get nearest multiple of delay
+        var nearestDelay = delay * Math.floor((_this.tickId + delay / 2) / delay);
+        var distanceToDelay = _this.tickId - nearestDelay;
+        if (Math.abs(distanceToDelay) < 0.5 || distanceToDelay === -0.5) {
+          if (!timer.isPaused) {
+            timer.timerFunc && timer.timerFunc(timer.timerId, _this.tickId);
+            triggeredTimerIds.push(timer.timerId);
+          }
+        }
+      });
+      // Trigger the handleTimerTicks function with all collected timerIds
+      if (triggeredTimerIds.length > 0) {
+        this.handleTimerTicks && this.handleTimerTicks(triggeredTimerIds);
+      }
+    }
+    /**
+     * Multiple timers with varying frequencies can be made at the same
+     * time however each timerId must be unique. If you attempt to create
+     * two timers with the same timerId, the second will silently be ignored.
+     *
+     * @param timerFunc The function to be executed at the given hertz frequency
+     * @param hertz Frequency of the timer given in hertz
+     * @param timerId Id of the timer
+     * @returns Timer or nothing if no timer was created
+     */
+  }, {
+    key: "register",
+    value: function register(timerFunc, hertz, timerId) {
+      var existingTimer = this.timers.find(function (timer) {
+        return timer.timerId === timerId;
+      });
+      if (existingTimer) {
+        existingTimer.hertz = hertz;
+        existingTimer.timerFunc = timerFunc;
+        return existingTimer;
+      }
+      this.timers.push({
+        timerFunc: timerFunc,
+        hertz: hertz,
+        timerId: timerId,
+        isPaused: false
+      });
+      return this.timers.at(-1);
+    }
+    /**
+     * Unregistering a timer completely removes it, if you want to pause a
+     * timer, then use pauseTimer()
+     *
+     * @param timerId Id of the timer
+     */
+  }, {
+    key: "unregister",
+    value: function unregister(timerId) {
+      var indexToRemove = this.timers.findIndex(function (timer) {
+        return timer.timerId === timerId;
+      });
+      if (indexToRemove > -1) {
+        this.timers.splice(indexToRemove, 1);
+      }
+    }
+    /**
+     * Checks if a timer is paused
+     *
+     * @param timerId Id of the timer
+     * @returns true if the timer is paused, false if it is running
+     */
+  }, {
+    key: "isPaused",
+    value: function isPaused(timerId) {
+      var _iterator = _createForOfIteratorHelper(this.timers),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var timer = _step.value;
+          if (timer.timerId === timerId && timer.isPaused) {
+            return true;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return false;
+    }
+    /**
+     * Continues running a timer
+     *
+     * @param timerId Id of the timer
+     */
+  }, {
+    key: "continueTimer",
+    value: function continueTimer(timerId) {
+      var _iterator2 = _createForOfIteratorHelper(this.timers),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var timer = _step2.value;
+          if (timer.timerId === timerId) {
+            timer.isPaused = false;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+    /**
+     * Pauses a timer
+     *
+     * @param timerId Id of the timer
+     */
+  }, {
+    key: "pauseTimer",
+    value: function pauseTimer(timerId) {
+      var _iterator3 = _createForOfIteratorHelper(this.timers),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var timer = _step3.value;
+          if (timer.timerId === timerId) {
+            timer.isPaused = true;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
+    /**
+     * Toggles a timer to be paused or running. Be careful when asking redux
+     * to toggle a timer, it might toggle twice and therefore do nothing
+     *
+     * @param timerId Id of the timer
+     */
+  }, {
+    key: "toggleTimer",
+    value: function toggleTimer(timerId) {
+      var _iterator4 = _createForOfIteratorHelper(this.timers),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var timer = _step4.value;
+          if (timer.timerId === timerId) {
+            timer.isPaused = !timer.isPaused;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    }
+    /**
+     * Sets the speed of a timer to a new frequency given in hertz
+     *
+     * @param timerId Id of the timer
+     * @param hertz Frequency of the timer given in hertz
+     */
+  }, {
+    key: "setSpeed",
+    value: function setSpeed(timerId, hertz) {
+      var _iterator5 = _createForOfIteratorHelper(this.timers),
+        _step5;
+      try {
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var timer = _step5.value;
+          if (timer.timerId === timerId) {
+            timer.hertz = hertz;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator5.e(err);
+      } finally {
+        _iterator5.f();
+      }
+    }
+  }]);
+  return Metronome;
+}();
+var metronome = new Metronome();
+
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, BUTTON_TITLE, CanvasComponent, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, LastUpdateTime, ResizeComponent as Resizable, SearchField, SearchFieldButton, SearchHighlight, StatusTag, SwitchButton, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createMockStoreWithEggs, createMockStoreWithEggsAndMiddleware, createToolkitMockStoreWithEggs, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosError, metronome, pollingIntervalTimeout, renderCounter, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@mui/material": "5.12.0",
+    "@mui/material": "~5.15.11",
     "@opengeoweb/theme": "*",
     "react-draggable": "^4.4.6",
     "re-resizable": "^6.9.11",

package/src/lib/components/CanvasComponent/CanvasComponent.d.ts

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+interface CanvasComponentProps {
+    onRenderCanvas: (ctx: CanvasRenderingContext2D, width: number, height: number, canvas: HTMLCanvasElement) => void;
+    onCanvasClick?: (x: number, y: number, width: number, height: number) => void;
+    onMouseMove?: (x: number, y: number, event: MouseEvent, width: number) => void;
+    onMouseUp?: (x: number) => void;
+    onMouseDown?: (x: number, y: number, width: number) => void;
+    onTouchStart?: (event: TouchEvent, width: number) => void;
+    onTouchEnd?: () => void;
+    onTouchMove?: (event: TouchEvent, width: number) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    isFocussed?: (isFocussed: boolean) => void;
+    onWheel?: ({ event, deltaY, deltaX, canvasWidth, mouseX, }: {
+        event: WheelEvent;
+        deltaY: number;
+        deltaX: number;
+        canvasWidth: number;
+        mouseX: number;
+    }) => void;
+    loop?: boolean;
+    redrawInterval?: number;
+    resizeCallback?: (newWidth: number) => void;
+    children?: React.ReactNode;
+}
+export declare class CanvasComponent extends Component<CanvasComponentProps> {
+    canvas: HTMLCanvasElement | null;
+    ctx: CanvasRenderingContext2D | null;
+    currentWidth: number;
+    currentHeight: number;
+    canvascontaineroutside: React.RefObject<HTMLDivElement> | null;
+    canvascontainer: React.RefObject<HTMLDivElement> | null;
+    timer: ReturnType<typeof setTimeout> | null;
+    redrawTimer: ReturnType<typeof setTimeout> | null;
+    loopHasStarted: boolean;
+    mounted: boolean;
+    static defaultProps: {
+        onRenderCanvas: () => void;
+        onCanvasClick: () => void;
+        onMouseMove: () => void;
+        onMouseUp: () => void;
+        onMouseDown: () => void;
+        onTouchStart: () => void;
+        onTouchEnd: () => void;
+        onTouchMove: () => void;
+        onWheel: () => void;
+    };
+    private _isFocussed;
+    constructor(props: CanvasComponentProps);
+    componentDidMount(): void;
+    shouldComponentUpdate(): boolean;
+    componentWillUnmount(): void;
+    handleMouseMoveEvent(event: MouseEvent): void;
+    handleMouseUpEvent(event: MouseEvent): void;
+    handleMouseDownEvent(event: MouseEvent): void;
+    handleTouchStartEvent(event: TouchEvent): void;
+    handleTouchEndEvent(): void;
+    handleTouchMoveEvent(event: TouchEvent): void;
+    handleClickEvent(event: MouseEvent): void;
+    handleWheelEvent(event: WheelEvent): void;
+    onFocus(): void;
+    onBlur(): void;
+    onKeyUp(event: KeyboardEvent): void;
+    _documentKeyDown(event: KeyboardEvent): void;
+    _handleWindowResize(): void;
+    startLoop(): void;
+    updateCanvas(): void;
+    resize(): void;
+    render(): React.ReactElement;
+}
+export {};

package/src/lib/components/CanvasComponent/CanvasComponent.stories.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const DynamicCanvas: React.FC;
+export declare const StaticCanvas: React.FC;

package/src/lib/components/CanvasComponent/index.d.ts

@@ -0,0 +1 @@
+export * from './CanvasComponent';

package/src/lib/components/TooltipSelect/TooltipSelect.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { SelectProps } from '@mui/material';
+import { BaseSelectProps, SelectVariants } from '@mui/material';
 interface ListELement {
     value: string;
 }
-interface TooltipSelectProps extends SelectProps {
+type TooltipSelectProps = BaseSelectProps & {
     tooltip: string;
     list?: ListELement[];
     currentIndex?: number;
@@ -12,6 +12,7 @@ interface TooltipSelectProps extends SelectProps {
     isEnabled?: boolean;
     noStyling?: boolean;
     hasBackgroundColor?: boolean;
-}
+    variant?: SelectVariants;
+};
 export declare const TooltipSelect: React.FC<TooltipSelectProps>;
 export {};

package/src/lib/components/index.d.ts

@@ -22,3 +22,4 @@ export * from './SearchHighlight';
 export * from './SwitchButton';
 export * from './SearchField';
 export * from './LastUpdateTime';
+export * from './CanvasComponent';

package/src/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 export * from './axiosErrorUtils';
 export * as dateUtils from './dateUtils';
 export * from './reduxTestUtils';
-export * from './layoutUtils';
 export { renderCounter } from './renderCounter';
+export { metronome } from './metronome';

package/src/lib/utils/metronome.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="node" />
+type TimerFunction = (timerId: string, tickId: number) => void;
+interface Timer {
+    timerFunc: TimerFunction | null;
+    hertz: number;
+    timerId: string;
+    isPaused: boolean;
+}
+/**
+ * This class should NEVER be initialized with new Metronome(). Use the
+ * exported variable. To reset the metronome use unregisterAllTimers()
+ * to remove all existing timers followed by init() to initialize the
+ * ticks.
+ */
+declare class Metronome {
+    tickId: number;
+    timers: Timer[];
+    interval: NodeJS.Timeout | null;
+    handleTimerTicks: ((timerIds: string[]) => void) | null;
+    constructor();
+    init(): void;
+    unregisterAllTimers(): void;
+    step(): void;
+    /**
+     * Multiple timers with varying frequencies can be made at the same
+     * time however each timerId must be unique. If you attempt to create
+     * two timers with the same timerId, the second will silently be ignored.
+     *
+     * @param timerFunc The function to be executed at the given hertz frequency
+     * @param hertz Frequency of the timer given in hertz
+     * @param timerId Id of the timer
+     * @returns Timer or nothing if no timer was created
+     */
+    register(timerFunc: TimerFunction | null, hertz: number, timerId: string): Timer | undefined;
+    /**
+     * Unregistering a timer completely removes it, if you want to pause a
+     * timer, then use pauseTimer()
+     *
+     * @param timerId Id of the timer
+     */
+    unregister(timerId: string): void;
+    /**
+     * Checks if a timer is paused
+     *
+     * @param timerId Id of the timer
+     * @returns true if the timer is paused, false if it is running
+     */
+    isPaused(timerId: string): boolean;
+    /**
+     * Continues running a timer
+     *
+     * @param timerId Id of the timer
+     */
+    continueTimer(timerId: string): void;
+    /**
+     * Pauses a timer
+     *
+     * @param timerId Id of the timer
+     */
+    pauseTimer(timerId: string): void;
+    /**
+     * Toggles a timer to be paused or running. Be careful when asking redux
+     * to toggle a timer, it might toggle twice and therefore do nothing
+     *
+     * @param timerId Id of the timer
+     */
+    toggleTimer(timerId: string): void;
+    /**
+     * Sets the speed of a timer to a new frequency given in hertz
+     *
+     * @param timerId Id of the timer
+     * @param hertz Frequency of the timer given in hertz
+     */
+    setSpeed(timerId: string, hertz: number): void;
+}
+declare const metronome: Metronome;
+export { metronome };

package/src/lib/utils/metronome.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/utils/metronome.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const MetronomeCanvasPlaygroundDemo: React.FC;
+export declare const MetronomeCanvasDemo: React.FC;

package/src/lib/utils/layoutUtils.d.ts

@@ -1 +0,0 @@
-export declare const getHeight: (element: HTMLDivElement) => number | null;