@map-colonies/react-components 3.9.0 → 3.10.3

package/src/lib/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import {
+  ArcGISTiledElevationTerrainProvider,
+  EllipsoidTerrainProvider,
+  TerrainProvider,
+  CesiumTerrainProvider,
+  Resource,
+} from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { Cesium3DTileset } from '../layers';
+import { InspectorTool } from '../tools/inspector.tool';
+import { TerrainianHeightTool } from '../tools/terranian-height.tool';
+import { LayerType } from '../layers-manager';
+
+export default {
+  title: 'Cesium Map/QuantizedMesh',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '90%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '1st',
+      title: '1st Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
+      baseRasteLayers: [
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER' as LayerType,
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const EllipsoidProvider = new EllipsoidTerrainProvider({});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const MCCesiumProviderMercator = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'http://localhost:3000/terrain_mercator_crop',
+  }),
+});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const MCCesiumProviderW84 = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'http://localhost:3000/terrain_w84_geo_crop',
+  }),
+});
+
+const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
+  url:
+    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+});
+
+const terrainProviderListQmesh = [
+  {
+    id: 'NONE',
+    value: EllipsoidProvider,
+  },
+  {
+    id: 'MC Mercator - Cesium Terrain Provider',
+    value: MCCesiumProviderMercator,
+  },
+  {
+    id: 'MC W84 - Cesium Terrain Provider',
+    value: MCCesiumProviderW84,
+  },
+  {
+    id: 'Arc Gis Terrain Provider',
+    value: ArcGisProvider,
+  },
+];
+
+interface ITerrainProviderItem {
+  id: string;
+  value: TerrainProvider | undefined;
+}
+
+interface ITerrainProviderSelectorProps {
+  terrainProviderList: ITerrainProviderItem[];
+}
+
+const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
+  terrainProviderList,
+}) => {
+  const mapViewer = useCesiumMap();
+
+  return (
+    <>
+      <select
+        defaultValue={terrainProviderList[0].id}
+        onChange={(evt): void => {
+          const selected = terrainProviderList.find(
+            (item) => item.id === evt.target.value
+          );
+          mapViewer.terrainProvider = (selected as ITerrainProviderItem)
+            .value as TerrainProvider;
+        }}
+      >
+        {terrainProviderList.map((provider) => {
+          return <option key={provider.id}>{provider.id}</option>;
+        })}
+      </select>
+    </>
+  );
+};
+
+export const QuantizedMeshHeightsTool: Story = () => {
+  const [center] = useState<[number, number]>([-122, 43]);
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap
+        center={center}
+        zoom={5}
+        imageryProvider={false}
+        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
+        baseMaps={BASE_MAPS}
+      >
+        <Cesium3DTileset
+          isZoomTo={true}
+          url="https://3d.ofek-air.com/3d/Jeru_Old_City_Cesium/ACT/Jeru_Old_City_Cesium_ACT.json"
+        />
+        <TerrainProviderSelector
+          terrainProviderList={terrainProviderListQmesh}
+        />
+        <TerrainianHeightTool />
+        <InspectorTool />
+      </CesiumMap>
+    </div>
+  );
+};
+QuantizedMeshHeightsTool.storyName = 'Heights Tool';

package/src/lib/cesium-map/terrain-providers/terrain-provider.stories.tsx

@@ -13,10 +13,11 @@ import { Story, Meta } from '@storybook/react/types-6-0';
 import { CesiumMap, useCesiumMap } from '../map';
 import { CesiumSceneMode } from '../map.types';
 import { Cesium3DTileset } from '../layers';
+import { LayerType } from '../layers-manager';
 import QuantizedMeshTerrainProvider from './custom/quantized-mesh-terrain-provider';
 
 export default {
-  title: 'Cesium Map',
+  title: 'Cesium Map/QuantizedMesh',
   component: CesiumMap,
   parameters: {
     layout: 'fullscreen',
@@ -40,7 +41,7 @@ const BASE_MAPS = {
       baseRasteLayers: [
         {
           id: 'GOOGLE_TERRAIN',
-          type: 'XYZ_LAYER',
+          type: 'XYZ_LAYER' as LayerType,
           opacity: 1,
           zIndex: 0,
           options: {
@@ -159,7 +160,7 @@ const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
   );
 };
 
-export const QuantizedMesh: Story = () => {
+export const QuantizedMeshProviders: Story = () => {
   // const [center] = useState<[number, number]>([24, -200]);
   const [center] = useState<[number, number]>([-122, 43]);
   return (
@@ -181,3 +182,4 @@ export const QuantizedMesh: Story = () => {
     </div>
   );
 };
+QuantizedMeshProviders.storyName = 'Providers';

package/src/lib/cesium-map/tools/coordinates-tracker.tool.tsx

@@ -7,7 +7,7 @@ import {
   Proj,
   COORDINATES_WGS_FRACTION_DIGITS,
   COORDINATES_MERCATOR_FRACTION_DIGITS,
-} from '..';
+} from '../../utils/projections';
 
 export interface RCoordinatesTrackerToolProps {
   projection?: Proj;

package/src/lib/cesium-map/tools/inspector.tool.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import { viewerCesiumInspectorMixin } from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+export interface InspectorProps {}
+
+export const InspectorTool: React.FC<InspectorProps> = (props) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+
+  useEffect(() => {
+    mapViewer.extend(viewerCesiumInspectorMixin);
+  }, [mapViewer]);
+
+  return <></>;
+};

package/src/lib/cesium-map/tools/terranian-height.tool.tsx

@@ -0,0 +1,167 @@
+import React, { ChangeEvent } from 'react';
+import {
+  Cartesian2,
+  Ellipsoid,
+  Color as CesiumColor,
+  LabelStyle as CesiumLabelStyle,
+  VerticalOrigin as CesiumVerticalOrigin,
+  Cartographic,
+  sampleTerrainMostDetailed,
+} from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+interface IParsedData {
+  cartographic: Cartographic;
+  cartesian: Cartesian2;
+}
+
+const LABEL_PIXEL_OFFSET = -25;
+const FIRST_DATA_ROW_IDX = 2;
+
+export interface TerrainianHeightProps {}
+
+export const TerrainianHeightTool: React.FC<TerrainianHeightProps> = (
+  props
+) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+
+  const csvToArray = (str: string, delimiter = ','): IParsedData[] => {
+    // const headers = str.slice(0, str.indexOf('\n')).split(delimiter);
+    const rows = str.slice(str.indexOf('\n') + 1).split('\n');
+
+    const arr = rows.map((row) => {
+      const values = row.split(delimiter);
+      const el = Cartographic.fromDegrees(
+        parseFloat(values[0]),
+        parseFloat(values[1])
+      );
+      // const el = headers.reduce((object: Record<string, number>, header, index) => {
+      //   const trimmedHeader = header.trim();
+      //   object[trimmedHeader] = parseFloat(values[index]);
+      //   return object;
+      // }, {});
+
+      //return el;
+      return {
+        cartographic: el,
+        cartesian: new Cartesian2(parseFloat(values[0]), parseFloat(values[1])),
+      };
+    });
+
+    return arr;
+  };
+
+  const loadCSV = (evt: ChangeEvent<HTMLInputElement>): void => {
+    evt.preventDefault();
+    evt.persist();
+    const reader = new FileReader();
+
+    reader.onload = (e: ProgressEvent<FileReader>): any => {
+      const text = e.target?.result;
+      const parsed = csvToArray(text as string);
+      const ellipsoid = Ellipsoid.WGS84;
+
+      console.log('Loaded CSV content:\n', text);
+
+      void sampleTerrainMostDetailed(
+        mapViewer.terrainProvider,
+        parsed.map((item) => item.cartographic)
+      ).then(
+        (updatedPositions) => {
+          console.log(updatedPositions);
+
+          mapViewer.scene.globe.depthTestAgainstTerrain = true;
+          mapViewer.entities.suspendEvents();
+          mapViewer.entities.removeAll();
+
+          updatedPositions.forEach((position, idx) => {
+            mapViewer.entities.add({
+              name: (idx + FIRST_DATA_ROW_IDX).toString(),
+              position: ellipsoid.cartographicToCartesian(position),
+              billboard: {
+                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
+                scale: 0.7,
+                image: 'assets/img/map-marker.gif',
+              },
+              label: {
+                text: (idx + FIRST_DATA_ROW_IDX).toString(),
+                font: '14pt monospace',
+                fillColor: CesiumColor.BLACK,
+                style: CesiumLabelStyle.FILL_AND_OUTLINE,
+                outlineWidth: 4,
+                outlineColor: CesiumColor.BLACK,
+                verticalOrigin: CesiumVerticalOrigin.BOTTOM,
+                pixelOffset: new Cartesian2(0, LABEL_PIXEL_OFFSET),
+              },
+              description: `
+                Long: ${parsed[idx].cartesian.x} </br>
+                Lat: ${parsed[idx].cartesian.y} </br>
+                Height(m): <span style="font-weight: 500">${position.height}</span>
+              `,
+            });
+          });
+
+          mapViewer.entities.resumeEvents();
+
+          if (evt.target.files !== null) {
+            exportToCsv(
+              `terranian_heights_${evt.target.files[0].name}`,
+              parsed
+            );
+            evt.target.value = '';
+          }
+
+          console.log(
+            'Pinned point count is ',
+            mapViewer.entities.values.length
+          );
+        },
+        (err) => {
+          console.error('ERROR while sampleTerrainMostDetailed:', err);
+        }
+      );
+    };
+
+    if (evt.target.files?.[0]) {
+      reader.readAsText(evt.target.files[0]);
+    }
+  };
+
+  const exportToCsv = (filename: string, rows: IParsedData[]): void => {
+    const processRow = (row: IParsedData): string => {
+      let finalVal = '';
+      finalVal += row.cartesian.x.toString() + ',';
+      finalVal += row.cartesian.y.toString() + ',';
+      finalVal += row.cartographic.height.toString();
+      return finalVal + '\n';
+    };
+
+    let csvFile = 'long,lat,height\n';
+    rows.forEach((row) => {
+      csvFile += processRow(row);
+    });
+
+    const blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', filename);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <>
+      <input
+        type="file"
+        id="csvFile"
+        accept=".csv"
+        onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+          loadCSV(e);
+        }}
+      />
+    </>
+  );
+};

package/src/lib/date-range-picker/{stories/DateRangePicker.stories.tsx → date-range-picker.stories.tsx}

@@ -1,13 +1,13 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { Story } from '@storybook/react/types-6-0';
-import { CSFStory } from '../../utils/story';
-import { SupportedLocales } from '../../models/enums';
-import { DateTimeRangePicker } from '../date-range-picker';
-import { DateTimeRangePickerFormControl } from '../date-range-picker.form-control';
+import { CSFStory } from '../utils/story';
+import { SupportedLocales } from '../models/enums';
+import { DateTimeRangePicker } from './date-range-picker';
+import { DateTimeRangePickerFormControl } from './date-range-picker.form-control';
 
 export default {
-  title: 'Picker',
+  title: 'Date Range Picker',
   component: DateTimeRangePicker,
 };
 

package/src/lib/file-picker/file-picker.css

@@ -0,0 +1,62 @@
+body[dir='rtl'] .chonky-fileListWrapper [class^='listContainer-'] {
+  direction: rtl !important;
+}
+
+body[dir='rtl']
+  .chonky-fileEntryClickableWrapper
+  [class^='listFileEntryProperty-'] {
+  direction: ltr !important;
+}
+
+body[dir='rtl'] .chonky-chonkyRoot {
+  text-align: right;
+}
+
+body[dir='rtl'] .chonky-infoText {
+  margin-left: unset;
+  margin-right: 12px;
+}
+
+body[dir='rtl'] .chonky-contextMenuList .MuiListItemText-root,
+body[dir='rtl'] .chonky-dropdownList .MuiListItemText-root {
+  text-align: right;
+}
+
+body[dir='rtl'] .chonky-icon {
+  margin-right: unset;
+  margin-left: 8px;
+}
+
+.chonky-chonkyRoot div[class^='folderBackSide'] {
+  box-shadow: unset;
+}
+
+.chonky-chonkyRoot div[class^='folderBackSide']::after {
+  border-color: var(--fp-theme-background, #fff)
+    var(--fp-theme-background, #fff) transparent transparent;
+}
+
+.chonky-chonkyRoot div[class^='listFileEntryIcon-'] {
+  color: #d5d5d5;
+}
+
+.chonky-chonkyRoot div[class*='previewFile-d'] {
+  background-color: #d5d5d5;
+}
+
+.chonky-chonkyRoot div[class^='selectionIndicator-'] {
+  background: var(--fp-theme-selection-background, #455570);
+}
+
+.chonky-chonkyRoot {
+  background-color: var(--fp-theme-background, #fff) !important;
+}
+
+.chonky-contextMenuList {
+  background-color: var(--fp-theme-surface, #fff) !important;
+}
+
+button[class*='chonky-activeButton'],
+.chonky-selectionSizeText {
+  color: var(--fp-theme-primary, #24aee9) !important;
+}