@opengeoweb/shared 9.8.0 → 9.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "9.8.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/DraggableResizable/types.d.ts

@@ -1,22 +1,22 @@
 /// <reference types="react" />
 import { ResizableProps } from 're-resizable';
-export type DraggablePosition = {
+export interface DraggablePosition {
     x: number;
     y: number;
-};
-export type Position = {
+}
+export interface Position {
     top: number;
     left?: number;
     right?: number;
-};
-export type DraggableSize = {
+}
+export interface DraggableSize {
     width: number;
     height: number;
-};
-export type Size = {
+}
+export interface Size {
     width?: number | string;
     height?: number | string;
-};
+}
 export interface ResizableComponentProps extends Omit<ResizableProps, 'size'> {
     startSize?: Size;
     setSize?: (size: Size) => void;

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

@@ -6,12 +6,12 @@ export declare const getPosition: (menuPosition: MenuPosition) => {
     anchorOrigin: PopoverOrigin;
     transformOrigin: PopoverOrigin;
 };
-type MenuItemType = {
+interface MenuItemType {
     text: string;
     action: (event: React.MouseEvent) => void;
     icon?: React.ReactNode;
     isDisabled?: boolean;
-};
+}
 interface ToggleMenuProps {
     buttonTestId?: string;
     menuPosition?: MenuPosition;

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { SelectProps } from '@mui/material';
-type ListELement = {
+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/UserMenu/CheatSheet/ShortcutList.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-type ShortCut = {
+interface ShortCut {
     title: string;
     description: React.ReactNode;
     descriptionMac?: React.ReactNode;
-};
+}
 type Platform = 'windows' | 'mac';
 export declare const shortcuts: ShortCut[];
 export declare const getShortcutList: (shortcutList: ShortCut[], platform?: Platform) => ShortCut[];

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/types/types.d.ts

@@ -4,7 +4,7 @@ export interface ConfigType {
     GW_AUTH_LOGOUT_URL?: string;
     GW_AUTH_TOKEN_URL?: string;
     GW_AUTH_CLIENT_ID?: string;
-    GW_INFRA_BASE_URL?: string;
+    GW_BE_VERSION_BASE_URL?: string;
     GW_APP_URL?: string;
     GW_INITIAL_PRESETS_FILENAME?: string;
     GW_CAP_CONFIGURATION_FILENAME?: string;

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

@@ -1,4 +1,4 @@
-import { parseISO, isEqual, Duration, startOfDay } from 'date-fns';
+import { parseISO, isEqual, Duration, startOfDay, isWithinInterval } from 'date-fns';
 export interface DateValues {
     year?: number;
     month?: number;
@@ -61,7 +61,7 @@ export interface DateValues {
  * ``` isoStringToDate("2022-5-10T20:32:00+00:00") ```
  * ``` isoStringToDate("2022-5-10T20:32:00:00Z", false) ```
  */
-export declare const isoStringToDate: (input: string, utc?: boolean) => Date;
+export declare const isoStringToDate: (input: string, utc?: boolean) => Date | undefined;
 /**
  * Parse a string to a date
  *
@@ -77,7 +77,8 @@ export declare const isoStringToDate: (input: string, utc?: boolean) => Date;
  * @example
  * ``` stringToDate("2022 5 10 20:32", 'yyyy M d HH:mm')) ```
  */
-export declare const stringToDate: (input: string, strFormat: string, utc?: boolean, referenceDate?: Date | number) => Date;
+export declare const stringToDate: (input: string | undefined, strFormat: string, utc?: boolean, referenceDate?: Date | number) => Date | undefined;
+export declare const dateToIsoString: (input: Date | undefined) => string | undefined;
 /**
  * Use this if you initialise a date without a timezone to set it to utc correctly
  * eg.
@@ -92,7 +93,7 @@ export declare const stringToDate: (input: string, strFormat: string, utc?: bool
  * @example
  * ``` setUTCDate(new Date(2022, 10, 12, 15, 30)) ```
  */
-export declare const setUTCDate: (inDate: Date) => Date;
+export declare const setUTCDate: (inDate: Date | undefined) => Date | undefined;
 /**
  * Format a date to a string
  *
@@ -105,7 +106,7 @@ export declare const setUTCDate: (inDate: Date) => Date;
  * @example
  * ``` dateToString(new Date(2022, 10, 12, 15, 30), 'dd MMM yyyy') ```
  */
-export declare const dateToString: (inDate: Date, strFormat?: string, utc?: boolean) => string;
+export declare const dateToString: (inDate: Date | undefined, strFormat?: string, utc?: boolean) => string | undefined;
 /**
  * Find out if a date is between two other dates.
  *
@@ -156,6 +157,30 @@ export declare const add: (date: Date | number, duration: Duration) => Date;
  * @returns {Date} the new Date
  */
 export declare const sub: (date: Date | number, duration: Duration) => Date;
+/**
+ * Finds the number of years between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
+ */
+export declare const differenceInYears: (dateLeft: Date | number, dateRight: Date | number) => number;
+/**
+ * Finds the number of months between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
+ */
+export declare const differenceInMonths: (dateLeft: Date | number | string, dateRight: Date | number | string) => number;
+/**
+ * Finds the number of days between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
+ */
+export declare const differenceInDays: (dateLeft: Date | number | string, dateRight: Date | number | string) => number;
 /**
  * Finds the number of minuts between to dates
  *
@@ -172,6 +197,14 @@ export declare const differenceInMinutes: (dateLeft: Date | number, dateRight: D
  * @returns {number} the number of hours
  */
 export declare const differenceInHours: (dateLeft: Date | number, dateRight: Date | number, roundingMethod?: 'ceil' | 'floor' | 'round' | 'trunc') => number;
+/**
+ * Finds the number of seconds between to dates
+ *
+ * @param dateLeft - the later date
+ * @param dateRight - the earlier date
+ * @returns {number} the number of minutes
+ */
+export declare const differenceInSeconds: (dateLeft: Date | number, dateRight: Date | number) => number;
 /**
  *
  * @param date - the date that should be before the other one to return true
@@ -189,17 +222,24 @@ export declare const isBefore: (date: Date | number, dateToCompare: Date | numbe
  */
 export declare const isAfter: (date: Date | number, dateToCompare: Date | number) => boolean;
 /**
- * Parsing string to a date, setting tz to UTC even if it's missing
+ * Gracefully parsing string to a date, setting tz to UTC even if it's missing or input is invalid
+ * Note: use getUtcFromString() to convert a string to a date with stricter returns
  * @param dateStr - string containing date
- * @returns {Date} - Date in UTC
+ * @returns {Date} - Date in UTC, or current date when something invalid is passed.
+ */
+export declare const utc: (dateStr?: string | undefined) => Date;
+/**
+ * Parsing string to a date. Stricter check, will return undefined when dateString is invalid.
+ * @param dateStr - string containing date
+ * @returns {Date} - Date in UTC, undefined when not valid
  */
-export declare const utc: (dateStr?: string) => Date;
+export declare const getUtcFromString: (dateStr: string | undefined | null) => Date | undefined;
 /**
  * Check if a date object is valid
- * @param {Date} date - date to be checked
+ * @param {Date | number} date - date to be checked
  * @returns {boolean} - True if valid
  */
-export declare const isValid: (date: Date) => boolean;
+export declare const isValid: (date: Date | number) => boolean;
 /**
  * Get the seconds timestamp of the given date
  * @param {Date} date - the given date
@@ -213,6 +253,19 @@ export declare const unix: (date: Date | number) => number;
  */
 export declare const fromUnix: (unixTime: number) => Date;
 export declare const parseCustomDateString: (dateStr: string) => Date;
+/**
+ * Returns Date in UTC
+ * @returns {Date} - Date in UTC
+ */
+export declare const getNowUtc: () => Date;
+/**
+ * Returns current time as string
+ * @param {string} strFormat - [default: "yyyy-MM-dd'T'HH:mm:ss'Z'"] format of string
+ * @param {boolean} utc - [default: true] true to return in utc otherwise return in local timezone
+ *
+ * @returns {string} - formatted date string
+ */
+export declare const getCurrentTimeAsString: (strFormat?: string, utc?: boolean) => string;
 /**
  * Set date values to a given date (by default it is assumed you are passing the new values in UTC).
  * @param date - the dater to be changed
@@ -227,4 +280,4 @@ export declare const set: (date: Date, values: DateValues, useLocalTimeZone?: bo
  * @param {Date} date - second date
  * @returns {boolean} - True if dates are equal
  */
-export { isEqual, startOfDay, parseISO };
+export { isEqual, startOfDay, parseISO, isWithinInterval };

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;