@map-colonies/react-components 4.8.1 → 4.9.1

package/dist/cesium-map/debug/debug-panel.css

@@ -0,0 +1,30 @@
+.debugPanel {
+  transform: translateZ(0);
+  height: calc(100vh - 220px);
+  max-height: 460px;
+  width: 280px;
+  position: absolute;
+  top: 44px;
+  right: 12px;
+  /* color: #AFBFDA;
+  background: #2D3748;
+  padding: 20px 24px; */
+}
+
+.debugPanel .mdc-dialog__container {
+  align-items: unset;
+}
+
+.debugPanel .mdc-dialog .mdc-dialog__surface {
+  max-height: unset;
+}
+
+body[dir='rtl'] .debugPanel {
+  left: 12px;
+  right: unset;
+}
+
+.debugPanel .title {
+  text-align: center;
+  font-size: 16px;
+}

package/dist/cesium-map/debug/debug-panel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface IDebugPanelProps {
+    children: React.ReactNode;
+    locale?: {
+        [key: string]: string;
+    };
+}
+export declare const DebugPanel: React.FC<IDebugPanelProps>;

package/dist/cesium-map/debug/wfs.css

@@ -0,0 +1,46 @@
+.wfsContainer .title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 12px;
+  width: 260px;
+}
+
+.wfsContainer .featureType {
+  font-size: 12px;
+  margin-bottom: 12px;
+  direction: ltr;
+}
+
+body[dir='rtl'] .wfsContainer .featureType {
+  direction: rtl;
+}
+
+.wfsContainer .name {
+  color: #AEF;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 260px;
+}
+
+.wfsContainer .info {
+  display: flex;
+}
+
+.wfsContainer .spacer {
+  margin: 0 20px;
+}
+
+.wfsContainer .blinking {
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

package/dist/cesium-map/debug/wfs.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IWFSProps {
+    locale?: {
+        [key: string]: string;
+    };
+}
+export declare const WFS: React.FC<IWFSProps>;
+export {};

package/dist/cesium-map/helpers/utils.d.ts

@@ -1,4 +1,6 @@
 import { Rectangle } from 'cesium';
+import { BBox, Feature, Point } from 'geojson';
+import { CesiumViewer } from '../map';
 import { CustomImageryProvider } from './customImageryProviders';
 /**
  * An async function to detect images with transparency.
@@ -15,3 +17,29 @@ export declare const imageHasTransparency: (image: string | HTMLImageElement | I
  * @param anotherRect
  */
 export declare const cesiumRectangleContained: (rect: Rectangle, anotherRect: Rectangle) => boolean;
+/**
+ * Calculates distance from a point to the edges of a given bbox.
+ * @param position Point to calculate distance from
+ * @param bbox Bounding box to calculate distance to
+ * @returns Distance in km
+ */
+export declare const distance: (position: Feature<Point>, bbox: BBox) => number;
+/**
+ * Calculates the center of a given bbox.
+ * @param bbox Cesium Rectangle
+ * @returns Center point of the bbox
+ */
+export declare const center: (bbox: Rectangle) => Feature<Point>;
+/**
+ * Converts a Cesium Rectangle to a GeoJSON bbox array.
+ * @param bbox Cesium Rectangle
+ * @returns BBox array
+ */
+export declare const rectangle2bbox: (bbox: Rectangle) => BBox;
+/**
+ * Computes a limited view rectangle in case of 3D mode based on the camera position and max distance.
+ * @param mapViewer Cesium Viewer instance
+ * @param maxDistanceMeters Max distance in meters to limit the view rectangle
+ * @returns View rectangle
+ */
+export declare const computeLimitedViewRectangle: (mapViewer: CesiumViewer, maxDistanceMeters?: number) => Rectangle | undefined;

package/dist/cesium-map/layers/index.d.ts

@@ -5,3 +5,4 @@ export * from './wms.layer';
 export * from './wmts.layer';
 export * from './xyz.layer';
 export * from './osm.layer';
+export * from './wfs.layer';

package/dist/cesium-map/layers/wfs.layer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { GeoJsonDataSource } from 'cesium';
+import { CesiumViewer } from '../map';
+export interface ICesiumWFSLayerOptions {
+    url: string;
+    featureType: string;
+    style: Record<string, unknown>;
+    pageSize: number;
+    zoomLevel: number;
+    maxCacheSize: number;
+    keyField?: string;
+}
+export interface ICesiumWFSLayer extends React.Attributes {
+    options: ICesiumWFSLayerOptions;
+    meta: Record<string, unknown>;
+    visualizationHandler: (mapViewer: CesiumViewer, wfsDataSource: GeoJsonDataSource, processEntityIds: string[]) => void;
+}
+export declare const CesiumWFSLayer: React.FC<ICesiumWFSLayer>;

package/dist/cesium-map/layers-manager.d.ts

@@ -3,6 +3,7 @@ import { RCesiumOSMLayerOptions, RCesiumWMSLayerOptions, RCesiumWMTSLayerOptions
 import { CesiumViewer } from './map';
 import { IBaseMap } from './settings/settings';
 import { IMapLegend } from './map-legend';
+import { ICesiumWFSLayer } from './layers/wfs.layer';
 import { CesiumCartesian2 } from './proxied.types';
 export interface ICesiumImageryLayer extends InstanceType<typeof ImageryLayer> {
     meta?: Record<string, unknown>;
@@ -30,15 +31,21 @@ declare class LayerManager {
     mapViewer: CesiumViewer;
     legendsList: IMapLegend[];
     layerUpdated: Event;
+    dataLayerUpdated: Event;
     private readonly layers;
+    private readonly dataLayers;
     private readonly legendsExtractor?;
     private readonly layerManagerFootprintMetaFieldPath;
     constructor(mapViewer: CesiumViewer, legendsExtractor?: LegendExtractor, onLayersUpdate?: () => void, layerManagerFootprintMetaFieldPath?: string);
     get layerList(): ICesiumImageryLayer[];
+    get dataLayerList(): ICesiumWFSLayer[];
+    addDataLayer(dataLayer: ICesiumWFSLayer): void;
     addMetaToLayer(meta: any, layerPredicate: (layer: ImageryLayer, idx: number) => boolean): void;
+    addMetaToDataLayer(meta: any): void;
     setBaseMapLayers(baseMap: IBaseMap): void;
     addRasterLayer(layer: IRasterLayer, index: number, parentId: string): void;
     removeLayer(layerId: string): void;
+    removeDataLayer(dataLayerId: string): void;
     removeBaseMapLayers(): void;
     removeNotBaseMapLayers(): void;
     raise(layerId: string, positions?: number): void;
@@ -52,6 +59,9 @@ declare class LayerManager {
     pickImageryLayers(position: CesiumCartesian2): ICesiumImageryLayer[] | undefined;
     findLayerByPOI(x: number, y: number, onlyShown?: boolean): ICesiumImageryLayer[] | undefined;
     addTransparentImageryProvider(): void;
+    addDataLayerUpdatedListener(callback: (meta: any) => void): void;
+    removeDataLayerUpdatedListener(callback: (meta: any) => void): void;
+    findDataLayerById(dataLayerId: string): ICesiumWFSLayer | undefined;
     private setLegends;
     private getBaseLayersCount;
     private findLayerById;

package/dist/cesium-map/map.d.ts

@@ -44,6 +44,9 @@ interface ILegends {
     };
     mapLegendsExtractor?: LegendExtractor;
 }
+export interface IDebugPanel {
+    wfs?: Record<string, unknown>;
+}
 export interface CesiumMapProps extends ViewerProps {
     showMousePosition?: boolean;
     showZoomLevel?: boolean;
@@ -69,6 +72,7 @@ export interface CesiumMapProps extends ViewerProps {
     legends?: ILegends;
     layerManagerFootprintMetaFieldPath?: string;
     displayZoomButtons?: boolean;
+    debugPanel?: IDebugPanel;
 }
 export declare const useCesiumMap: () => CesiumViewer;
 export declare const CesiumMap: React.FC<CesiumMapProps>;

package/dist/cesium-map/proxied.types.d.ts

@@ -1,4 +1,4 @@
-import { BoundingSphere, Cartesian2, Cartesian3, Cartographic, CesiumTerrainProvider, ConstantPositionProperty, ConstantProperty, Ellipsoid, EllipsoidTerrainProvider, GeographicTilingScheme, HorizontalOrigin, LabelStyle, PolylineDashMaterialProperty, Rectangle, Resource, VerticalOrigin } from 'cesium';
+import { BillboardGraphics, BoundingSphere, Cartesian2, Cartesian3, Cartographic, CesiumTerrainProvider, ConstantPositionProperty, ConstantProperty, Ellipsoid, EllipsoidTerrainProvider, GeographicTilingScheme, HeightReference, HorizontalOrigin, JulianDate, LabelStyle, PolylineDashMaterialProperty, PolylineGraphics, PositionProperty, Rectangle, Resource, VerticalOrigin } from 'cesium';
 export declare class CesiumPolylineDashMaterialProperty extends PolylineDashMaterialProperty {
 }
 export declare class CesiumConstantProperty extends ConstantProperty {
@@ -25,7 +25,16 @@ export declare class CesiumEllipsoidTerrainProvider extends EllipsoidTerrainProv
 }
 export declare class CesiumCesiumTerrainProvider extends CesiumTerrainProvider {
 }
+export declare class CesiumCesiumPolylineGraphics extends PolylineGraphics {
+}
+export declare class CesiumJulianDate extends JulianDate {
+}
+export declare class CesiumPositionProperty extends PositionProperty {
+}
+export declare class CesiumCesiumBillboardGraphics extends BillboardGraphics {
+}
 export declare const CesiumVerticalOrigin: typeof VerticalOrigin;
 export declare const CesiumHorizontalOrigin: typeof HorizontalOrigin;
 export declare const CesiumLabelStyle: typeof LabelStyle;
-export { sampleTerrainMostDetailed as cesiumSampleTerrainMostDetailed, Math as CesiumMath } from 'cesium';
+export declare const CesiumHeightReference: typeof HeightReference;
+export { Entity as CesiumCesiumEntity, GeoJsonDataSource as CesiumGeoJsonDataSource, Math as CesiumMath, PolygonGraphics as CesiumCesiumPolygonGraphics, sampleTerrainMostDetailed as cesiumSampleTerrainMostDetailed, } from 'cesium';

package/dist/cesium-map/settings/settings.css

@@ -4,7 +4,8 @@
 }
 
 .settingsIconContainer,
-.mapLegendToggleContainer {
+.mapLegendToggleContainer,
+.debugPanelIconContainer {
   fill: #fff;
   width: 40px;
   height: 40px;
@@ -14,7 +15,8 @@
 }
 
 .settingsIconContainer:hover,
-.mapLegendToggleContainer:hover {
+.mapLegendToggleContainer:hover,
+.debugPanelIconContainer:hover {
   background: #48b;
   border-color: #aef;
 }
@@ -30,8 +32,11 @@
   max-height: 460px;
   width: 280px;
   position: absolute;
-  top: 40px;
-  right: 80px;
+  top: 44px;
+  right: 12px;
+  /* color: #AFBFDA;
+  background: #2D3748;
+  padding: 20px 24px; */
 }
 
 .settingsDialogPortal .mdc-dialog__container {
@@ -43,7 +48,7 @@
 }
 
 body[dir='rtl'] .settingsDialogPortal {
-  left: 80px;
+  left: 12px;
   right: unset;
 }
 

package/dist/cesium-map/tools/cesium-compass.tool.css

@@ -1,9 +1,9 @@
 .compass.rtl {
   right: unset;
-  left: 20px;
+  left: 24px;
 }
 
 .compass.ltr {
   left: unset;
-  right: 20px;
+  right: 24px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "4.8.1",
+  "version": "4.9.1",
   "main": "./dist/@map-colonies/react-components.umd.js",
   "module": "./dist/@map-colonies/react-components.es.js",
   "types": "./dist/index.d.ts",
@@ -32,6 +32,7 @@
     "@turf/bbox-polygon": "^6.0.1",
     "@turf/boolean-point-in-polygon": "^6.5.0",
     "@turf/helpers": "^6.1.4",
+    "@turf/point-to-polygon-distance": "^7.2.0",
     "@turf/rewind": "^5.1.5",
     "cesium": "1.103.0",
     "chonky": "^2.3.2",
@@ -45,11 +46,13 @@
     "lodash": "^4.17.20",
     "ol": "^6.4.3",
     "ol-ext": "^4.0.18",
+    "p-map": "6.0.0",
     "react-datepicker": "^4.16.0",
     "react-select": "5.7.3",
     "resium": "1.16.1",
     "rimraf": "3.0.2",
-    "textarea-caret": "^3.1.0"
+    "textarea-caret": "^3.1.0",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "6.5.16",
@@ -73,5 +76,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "a7c6229ccc82f0d6744f9653d5a31792c56d667a"
+  "gitHead": "2ae5b6ed367f680b7392b5f9825d425d6cfdc03e"
 }