@longline/aqua-ui 1.0.159 → 1.0.161

package/containers/Dock/Dockable.js

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import styled, { css } from 'styled-components';
 import { useViewState } from '../../map/Map';
 var DockableBase = function (props) {

package/map/Map/Map.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { MapMouseEvent, Map as OriginalMap } from 'mapbox-gl';
-import { ViewState } from 'react-map-gl';
-import { PaddingOptions } from 'react-map-gl/dist/esm/types';
+import { ViewState } from 'react-map-gl/mapbox';
 interface IProps {
     /** @ignore */
     children?: React.ReactNode;
@@ -42,7 +41,12 @@ interface IProps {
      * Initial padding.
      * @default 0,0,0,0
      */
-    padding?: PaddingOptions;
+    padding?: {
+        readonly top?: number;
+        readonly bottom?: number;
+        readonly right?: number;
+        readonly left?: number;
+    };
     /**
      * If set, water is clipped at given elevation.
      * A value of `1` generally works.

package/map/Map/Map.js

@@ -62,7 +62,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled, { useTheme } from "styled-components";
-import { Map as GLMap, Layer, Source } from 'react-map-gl';
+import { Map as GLMap, Layer, Source } from 'react-map-gl/mapbox';
 var ViewStateContext = React.createContext(null);
 var useViewState = function () {
     return React.useContext(ViewStateContext);

package/map/PositionsManager/PositionsManager.js

@@ -19,7 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { PositionBox } from './PositionBox';
 // Storage key for saving and restoring positions.
 var STORAGE_KEY = 'positions';
@@ -52,6 +52,9 @@ var PositionsManager = function (_a) {
     // Positions are restored from storage, if any were saved.
     var _d = React.useState(loadPositionsFromStorage()), positions = _d[0], setPositions = _d[1];
     var handleRegisterCoordinate = function (ev) {
+        // Ctrl key must be held down.
+        if (!ev.originalEvent.ctrlKey)
+            return;
         // Add click coordinates to positions list.
         setPositions(function (positions) {
             // Allow no more than 3 saved positions.
@@ -65,10 +68,10 @@ var PositionsManager = function (_a) {
             return newPositions;
         });
     };
-    // Add a context menu (right-click) handler to the map, and removes
+    // Add a CTRL+click handler to the map, and removes
     // it on unmount. 
     React.useEffect(function () {
-        map.current.on('contextmenu', handleRegisterCoordinate);
+        map.current.on('click', handleRegisterCoordinate);
         return function () { map.current.off('contextmenu', handleRegisterCoordinate); };
     }, []);
     var handleMovePosition = function (idx, x, y) {

package/map/controls/CompassButton/CompassButton.js

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import styled, { css } from 'styled-components';
 import { MapButton } from '../base/MapButton';
 import { useViewState } from '../../Map';

package/map/controls/FullscreenButton/FullscreenButton.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { MapButton } from '../base/MapButton';
 /**
  * The `FullscreenButton` toggles the map full-screen when clicked.

package/map/controls/Geocoder/Geocoder.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled from 'styled-components';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { GeocoderApi } from './GeocoderApi';
 import { GeocoderEntry } from './GeocoderEntry';
 import { GeocoderList } from './GeocoderList';

package/map/controls/Graticule/Graticule.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Layer, Source, useMap } from 'react-map-gl';
+import { Layer, Source, useMap } from 'react-map-gl/mapbox';
 import { useViewState } from '../../Map';
 /**
  * The `Graticule` component draws a graticule over the map. The caller

package/map/controls/ZoomInButton/ZoomInButton.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { MapButton } from '../base/MapButton';
 import { useViewState } from '../../Map';
 import { Mouse } from '../../../controls/Mouse';

package/map/controls/ZoomOutButton/ZoomOutButton.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { useMap } from 'react-map-gl';
+import { useMap } from 'react-map-gl/mapbox';
 import { MapButton } from '../base/MapButton';
 import { useViewState } from '../../Map';
 import { Mouse } from '../../../controls/Mouse';

package/map/layers/ClusterLayer/ClusterLayer.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { Source, useMap } from 'react-map-gl';
+import { Source, useMap } from 'react-map-gl/mapbox';
 import { HtmlMarkerLayer } from '../HtmlMarkerLayer/HtmlMarkerLayer';
 import { ClusterMarker } from '../../markers/ClusterMarker';
 function uuidv4() {

package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { Layer, useMap } from 'react-map-gl';
+import { Layer, useMap } from 'react-map-gl/mapbox';
 import { Marker } from 'mapbox-gl';
 /**
  * The `HtmlMarkerLayer` manages HTML markers on a map. HTML markers are far slower

package/map/layers/InterpolationLayer/InterpolationLayer.js

@@ -32,7 +32,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import * as React from 'react';
 import { featureCollection, point } from '@turf/helpers';
 import { MercatorCoordinate } from 'mapbox-gl';
-import { Layer, useMap } from 'react-map-gl';
+import { Layer, useMap } from 'react-map-gl/mapbox';
 import tin from '@turf/tin';
 import { RgbColor } from '../../../helper/RgbColor';
 import { LevelsVertexShader } from './LevelsVertexShader';
@@ -239,11 +239,7 @@ var InterpolationLayerBase = function (props) {
         gl.viewport(0, 0, width * window.devicePixelRatio, height * window.devicePixelRatio);
         renderContours(gl, matrix, width, height);
     };
-    return (React.createElement(Layer
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+    return (React.createElement(Layer, { id: null, type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
 };
 /**
  * An `InterpolationLayer` takes a data array of the form `{ latitude, longitude, value }`. It performs triangulation

package/map/layers/ParticlesLayer/ParticlesLayer.js

@@ -33,7 +33,7 @@ import * as React from 'react';
 import { featureCollection, point } from '@turf/helpers';
 import tin from '@turf/tin';
 import { MercatorCoordinate } from 'mapbox-gl';
-import { Layer, useMap } from 'react-map-gl';
+import { Layer, useMap } from 'react-map-gl/mapbox';
 import { UVVertexShader } from './UVVertexShader';
 import { UVFragmentShader } from './UVFragmentShader';
 import { ParticlesFragmentShader } from './ParticlesFragmentShader';
@@ -328,11 +328,7 @@ var ParticlesLayerBase = function (props) {
         // Render particles:
         renderParticles(gl, matrix);
     };
-    return (React.createElement(Layer
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
+    return (React.createElement(Layer, { id: null, type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
 };
 var ParticlesLayer = function (_a) {
     var _b = _a.particles, particles = _b === void 0 ? 80 : _b, _c = _a.density, density = _c === void 0 ? 40 : _c, _d = _a.delay, delay = _d === void 0 ? 0 : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.159",
+  "version": "1.0.161",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",
@@ -51,17 +51,17 @@
     "@turf/helpers": "^7.1.0",
     "@turf/tin": "^7.1.0",
     "@types/geojson": "^7946.0.14",
-    "@types/mapbox-gl": "^3.4.0",
+    "@types/mapbox-gl": "^3.4.1",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "awesome-debounce-promise": "^2.1.0",
     "date-fns": "^4.1.0",
     "gl-matrix": "^3.4.3",
-    "mapbox-gl": "^3.7.0",
+    "mapbox-gl": "^3.9.4",
     "overlayscrollbars-react": "^0.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-map-gl": "^7.1.7",
+    "react-map-gl": "^8.0.1",
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.26.2",
     "react-transition-state": "^2.2.0",