@map-colonies/react-components 3.12.3 → 3.13.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.13.1](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.13.0...@map-colonies/react-components@3.13.1) (2023-01-12)
+
+
+### Bug Fixes
+
+* imports from cesium ([#136](https://github.com/MapColonies/shared-components/issues/136)) ([0b12f11](https://github.com/MapColonies/shared-components/commit/0b12f119275285682e13b2a83b75f34151b9553f))
+
+
+
+
+
+# [3.13.0](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.12.3...@map-colonies/react-components@3.13.0) (2023-01-11)
+
+
+### Features
+
+* add coords value in map context ([#135](https://github.com/MapColonies/shared-components/issues/135)) ([c056f44](https://github.com/MapColonies/shared-components/commit/c056f44ac230a0c956bd7a5d75b6dde0374b2405))
+
+
+
+
+
 ## [3.12.3](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.12.2...@map-colonies/react-components@3.12.3) (2022-08-25)
 
 **Note:** Version bump only for package @map-colonies/react-components

package/dist/cesium-map/data-sources/drawings.data-source.js

@@ -89,6 +89,8 @@ var CesiumDrawingsDataSource = function (props) {
             if (drawState.drawing) {
                 switch (drawState.type) {
                     case models_1.DrawType.POLYGON:
+                        // Disable terrain accounting before drawing.
+                        mapViewer.scene.globe.depthTestAgainstTerrain = false;
                         // eslint-disable-next-line
                         drawHelperInstance.startDrawingPolygon({
                             callback: function (positions) {
@@ -113,6 +115,8 @@ var CesiumDrawingsDataSource = function (props) {
                         });
                         break;
                     case models_1.DrawType.BOX:
+                        // Disable terrain accounting before drawing.
+                        mapViewer.scene.globe.depthTestAgainstTerrain = false;
                         // eslint-disable-next-line
                         drawHelperInstance.startDrawingExtent({
                             callback: function (positions) {
@@ -143,6 +147,8 @@ var CesiumDrawingsDataSource = function (props) {
             else {
                 // eslint-disable-next-line
                 drawHelperInstance.stopDrawing();
+                // Enable terrain accounting after drawing.
+                mapViewer.scene.globe.depthTestAgainstTerrain = true;
             }
         }
     }, [drawState, drawHelper]);

package/dist/cesium-map/map-legend/MapLegend.css

@@ -45,8 +45,9 @@ body[dir='rtl'] .mapLegendCloseBtn {
 }
 
 .mapLegendIcon {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
+  transform: translate(8%, 8%);
 }
 
 .sidebarHeaderContainer {

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

@@ -17,6 +17,10 @@ export interface IContextMenuData {
         x: number;
         y: number;
     };
+    coordinates: {
+        latitude: number;
+        longitude: number;
+    };
     style?: Record<string, string>;
     size?: {
         height: number;

package/dist/cesium-map/map.js

@@ -64,6 +64,7 @@ var map_legend_1 = require("./map-legend");
 var layers_manager_1 = __importDefault(require("./layers-manager"));
 var map_types_1 = require("./map.types");
 require("./map.css");
+var point_geojson_1 = require("./tools/geojson/point.geojson");
 var DEFAULT_HEIGHT = 212;
 var DEFAULT_WIDTH = 260;
 var DEFAULT_DYNAMIC_HEIGHT_INCREMENT = 0;
@@ -101,6 +102,7 @@ var CesiumMap = function (props) {
     var _y = react_1.useState(false), showImageryMenu = _y[0], setShowImageryMenu = _y[1];
     var _z = react_1.useState(undefined), imageryMenuPosition = _z[0], setImageryMenuPosition = _z[1];
     var _0 = react_1.useState(false), isLegendsSidebarOpen = _0[0], setIsLegendsSidebarOpen = _0[1];
+    var _1 = react_1.useState(), rightClickCoordinates = _1[0], setRightClickCoordinates = _1[1];
     var viewerProps = __assign({ fullscreenButton: true, timeline: false, animation: false, baseLayerPicker: false, geocoder: false, navigationHelpButton: false, homeButton: false, sceneModePicker: false }, props);
     var getImageryMenuStyle = function (x, y, menuWidth, menuHeight, menuDynamicHeightIncrement) {
         var container = mapViewRef.container;
@@ -117,12 +119,14 @@ var CesiumMap = function (props) {
     react_1.useEffect(function () {
         var _a;
         if (ref.current) {
-            var viewer = ref.current.cesiumElement;
+            var viewer_1 = ref.current.cesiumElement;
             if (props.imageryContextMenu) {
-                viewer.screenSpaceEventHandler.setInputAction(function (evt) {
+                viewer_1.screenSpaceEventHandler.setInputAction(function (evt) {
                     // console.log('RIGHT click', evt.position);
+                    var pos = evt.position;
                     setShowImageryMenu(false);
-                    setImageryMenuPosition(evt.position);
+                    setImageryMenuPosition(pos);
+                    setRightClickCoordinates(point_geojson_1.pointToLonLat(viewer_1, pos.x, pos.y));
                     setShowImageryMenu(true);
                 }, cesium_1.ScreenSpaceEventType.RIGHT_CLICK);
             }
@@ -286,12 +290,14 @@ var CesiumMap = function (props) {
             props.imageryContextMenu &&
                 showImageryMenu &&
                 imageryMenuPosition &&
+                rightClickCoordinates &&
                 react_1.default.cloneElement(props.imageryContextMenu, {
                     data: (_f = mapViewRef === null || mapViewRef === void 0 ? void 0 : mapViewRef.layersManager) === null || _f === void 0 ? void 0 : _f.findLayerByPOI(imageryMenuPosition.x, imageryMenuPosition.y),
                     position: {
                         x: imageryMenuPosition.x,
                         y: imageryMenuPosition.y,
                     },
+                    coordinates: rightClickCoordinates,
                     style: getImageryMenuStyle(imageryMenuPosition.x, imageryMenuPosition.y, (_h = (_g = props.imageryContextMenuSize) === null || _g === void 0 ? void 0 : _g.width) !== null && _h !== void 0 ? _h : DEFAULT_WIDTH, (_k = (_j = props.imageryContextMenuSize) === null || _j === void 0 ? void 0 : _j.height) !== null && _k !== void 0 ? _k : DEFAULT_HEIGHT, (_m = (_l = props.imageryContextMenuSize) === null || _l === void 0 ? void 0 : _l.dynamicHeightIncrement) !== null && _m !== void 0 ? _m : DEFAULT_DYNAMIC_HEIGHT_INCREMENT),
                     size: (_o = props.imageryContextMenuSize) !== null && _o !== void 0 ? _o : {
                         height: DEFAULT_HEIGHT,

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

@@ -27,4 +27,4 @@ export declare class CesiumCesiumTerrainProvider extends CesiumTerrainProvider {
 }
 export declare const CesiumVerticalOrigin: typeof VerticalOrigin;
 export declare const CesiumLabelStyle: typeof LabelStyle;
-export { sampleTerrainMostDetailed as cesiumSampleTerrainMostDetailed } from 'cesium';
+export { sampleTerrainMostDetailed as cesiumSampleTerrainMostDetailed, Math as CesiumMath, } from 'cesium';

package/dist/cesium-map/proxied.types.js

@@ -15,7 +15,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cesiumSampleTerrainMostDetailed = exports.CesiumLabelStyle = exports.CesiumVerticalOrigin = exports.CesiumCesiumTerrainProvider = exports.CesiumEllipsoidTerrainProvider = exports.CesiumResource = exports.CesiumRectangle = exports.CesiumGeographicTilingScheme = exports.CesiumEllipsoid = exports.CesiumBoundingSphere = exports.CesiumCartographic = exports.CesiumCartesian3 = exports.CesiumCartesian2 = exports.CesiumConstantPositionProperty = exports.CesiumConstantProperty = exports.CesiumPolylineDashMaterialProperty = void 0;
+exports.CesiumMath = exports.cesiumSampleTerrainMostDetailed = exports.CesiumLabelStyle = exports.CesiumVerticalOrigin = exports.CesiumCesiumTerrainProvider = exports.CesiumEllipsoidTerrainProvider = exports.CesiumResource = exports.CesiumRectangle = exports.CesiumGeographicTilingScheme = exports.CesiumEllipsoid = exports.CesiumBoundingSphere = exports.CesiumCartographic = exports.CesiumCartesian3 = exports.CesiumCartesian2 = exports.CesiumConstantPositionProperty = exports.CesiumConstantProperty = exports.CesiumPolylineDashMaterialProperty = void 0;
 var cesium_1 = require("cesium");
 // PROXIED CLASSES
 var CesiumPolylineDashMaterialProperty = /** @class */ (function (_super) {
@@ -130,3 +130,4 @@ exports.CesiumLabelStyle = cesium_1.LabelStyle;
 // PROXIED FUNCTIONS
 var cesium_2 = require("cesium");
 Object.defineProperty(exports, "cesiumSampleTerrainMostDetailed", { enumerable: true, get: function () { return cesium_2.sampleTerrainMostDetailed; } });
+Object.defineProperty(exports, "CesiumMath", { enumerable: true, get: function () { return cesium_2.Math; } });

package/dist/cesium-map/tools/coordinates-tracker.tool.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -30,18 +41,11 @@ var CoordinatesTrackerTool = function (props) {
     var ref = react_1.useRef(null);
     var _a = react_1.useState({ x: 0, y: 0 }), position = _a[0], setPosition = _a[1];
     react_1.useEffect(function () {
-        var setFromEvent = function (e) {
-            return setPosition({ x: e.clientX, y: e.clientY });
-        };
-        mapViewer.scene.canvas.addEventListener('mousemove', setFromEvent);
-        return function () {
-            try {
-                mapViewer.scene.canvas.removeEventListener('mousemove', setFromEvent);
-            }
-            catch (e) {
-                console.log('CESIUM canvas "mousemove" remove listener failed', e);
+        mapViewer.screenSpaceEventHandler.setInputAction(function (evt) {
+            if (evt === null || evt === void 0 ? void 0 : evt.endPosition) {
+                setPosition(__assign({}, evt.endPosition));
             }
-        };
+        }, cesium_1.ScreenSpaceEventType.MOUSE_MOVE);
     }, [ref, mapViewer]);
     react_1.useEffect(function () {
         var ellipsoid = mapViewer.scene.globe.ellipsoid;

package/dist/cesium-map/tools/geojson/point.geojson.d.ts

@@ -1,3 +1,7 @@
 import { GeoJSON } from 'geojson';
 import { CesiumViewer } from '../../map';
 export declare const pointToGeoJSON: (mapViewer: CesiumViewer, x: number, y: number) => GeoJSON;
+export declare const pointToLonLat: (mapViewer: CesiumViewer, x: number, y: number) => {
+    longitude: number;
+    latitude: number;
+} | undefined;

package/dist/cesium-map/tools/geojson/point.geojson.js

@@ -1,11 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pointToGeoJSON = void 0;
+exports.pointToLonLat = exports.pointToGeoJSON = void 0;
 var cesium_1 = require("cesium");
+var pointToCartographic = function (mapViewer, x, y) {
+    var cartesian;
+    if (mapViewer.scene.mode !== cesium_1.SceneMode.SCENE2D) {
+        cartesian = mapViewer.scene.pickPosition(new cesium_1.Cartesian2(x, y));
+    }
+    else {
+        var ellipsoid = mapViewer.scene.globe.ellipsoid;
+        cartesian = mapViewer.camera.pickEllipsoid(new cesium_1.Cartesian2(x, y), ellipsoid);
+    }
+    return cesium_1.Cartographic.fromCartesian(cartesian);
+};
 var pointToGeoJSON = function (mapViewer, x, y) {
-    var ellipsoid = mapViewer.scene.globe.ellipsoid;
-    var cartesian = mapViewer.camera.pickEllipsoid(new cesium_1.Cartesian3(x, y), ellipsoid);
-    var cartographic = ellipsoid.cartesianToCartographic(cartesian);
+    var cartographic = pointToCartographic(mapViewer, x, y);
     return {
         type: 'Feature',
         properties: {},
@@ -19,3 +28,16 @@ var pointToGeoJSON = function (mapViewer, x, y) {
     };
 };
 exports.pointToGeoJSON = pointToGeoJSON;
+var pointToLonLat = function (mapViewer, x, y) {
+    try {
+        var cartographic = pointToCartographic(mapViewer, x, y);
+        return {
+            longitude: cesium_1.Math.toDegrees(cartographic.longitude),
+            latitude: cesium_1.Math.toDegrees(cartographic.latitude),
+        };
+    }
+    catch (e) {
+        return undefined;
+    }
+};
+exports.pointToLonLat = pointToLonLat;