@map-colonies/react-components 3.15.0 → 4.0.1

package/src/lib/cesium-map/map.tsx

@@ -1,492 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-  useRef,
-  useCallback,
-} from 'react';
-import { createPortal } from 'react-dom';
-import { Viewer, CesiumComponentRef } from 'resium';
-import { ViewerProps } from 'resium/dist/types/src/Viewer/Viewer';
-import {
-  Viewer as CesiumViewerCls,
-  Cartesian3,
-  SceneMode,
-  Cartesian2,
-  Matrix4,
-  PerspectiveFrustum,
-  PerspectiveOffCenterFrustum,
-  OrthographicFrustum,
-  ScreenSpaceEventType,
-  TerrainProvider,
-} from 'cesium';
-import { isNumber, isArray } from 'lodash';
-import { getAltitude, toDegrees } from '../utils/map';
-import { Box } from '../box';
-import { Proj } from '../utils/projections';
-import { CoordinatesTrackerTool } from './tools/coordinates-tracker.tool';
-import { ScaleTrackerTool } from './tools/scale-tracker.tool';
-import { ZoomLevelTrackerTool } from './tools/zoom_level-tracker.tool';
-import { CesiumSettings, IBaseMap, IBaseMaps } from './settings/settings';
-import { IMapLegend, MapLegendSidebar, MapLegendToggle } from './map-legend';
-import LayerManager, { LegendExtractor } from './layers-manager';
-import { CesiumSceneMode, CesiumSceneModeEnum } from './map.types';
-
-import './map.css';
-import { pointToLonLat } from './tools/geojson/point.geojson';
-
-const DEFAULT_HEIGHT = 212;
-const DEFAULT_WIDTH = 260;
-const DEFAULT_DYNAMIC_HEIGHT_INCREMENT = 0;
-
-interface ICameraPosition {
-  longitude: number;
-  latitude: number;
-  height: number | undefined;
-}
-
-interface ICameraState {
-  position: ICameraPosition;
-  direction?: Cartesian3;
-  up?: Cartesian3;
-  right?: Cartesian3;
-  transform?: Matrix4;
-  frustum?:
-    | PerspectiveFrustum
-    | PerspectiveOffCenterFrustum
-    | OrthographicFrustum;
-}
-export class CesiumViewer extends CesiumViewerCls {
-  public layersManager?: LayerManager;
-  private useOptimizedTileRequests?: boolean;
-
-  public constructor(
-    container: string | Element,
-    options?: CesiumViewerCls.ConstructorOptions
-  ) {
-    super(container, options);
-  }
-
-  public get shouldOptimizedTileRequests(): boolean {
-    return this.useOptimizedTileRequests ?? false;
-  }
-
-  public set shouldOptimizedTileRequests(useOptimizedTileRequests: boolean) {
-    this.useOptimizedTileRequests = useOptimizedTileRequests;
-  }
-}
-
-const mapContext = createContext<CesiumViewer | null>(null);
-const MapViewProvider = mapContext.Provider;
-const cameraPositionRefreshRate = 10000;
-
-export interface IContextMenuData {
-  data: Record<string, unknown>[];
-  position: {
-    x: number;
-    y: number;
-  };
-  coordinates: { latitude: number; longitude: number };
-  style?: Record<string, string>;
-  size?: {
-    height: number;
-    width: number;
-  };
-  handleClose: () => void;
-}
-
-interface ILegends {
-  legendsList?: IMapLegend[];
-  emptyText?: string;
-  title?: string;
-  actionsTexts?: { docText: string; imgText: string };
-  mapLegendsExtractor?: LegendExtractor;
-}
-
-export interface CesiumMapProps extends ViewerProps {
-  showMousePosition?: boolean;
-  showZoomLevel?: boolean;
-  showScale?: boolean;
-  projection?: Proj;
-  center?: [number, number];
-  zoom?: number;
-  locale?: { [key: string]: string };
-  sceneModes?: CesiumSceneModeEnum[];
-  baseMaps?: IBaseMaps;
-  useOptimizedTileRequests?: boolean;
-  terrainProvider?: TerrainProvider;
-  imageryContextMenu?: React.ReactElement<IContextMenuData>;
-  imageryContextMenuSize?: {
-    height: number;
-    width: number;
-    dynamicHeightIncrement?: number;
-  };
-  legends?: ILegends;
-}
-
-export const useCesiumMap = (): CesiumViewer => {
-  const mapViewer = useContext(mapContext);
-
-  if (mapViewer === null) {
-    throw new Error('map context is null, please check the provider');
-  }
-
-  return mapViewer;
-};
-
-export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
-  const ref = useRef<CesiumComponentRef<CesiumViewer>>(null);
-  const [mapViewRef, setMapViewRef] = useState<CesiumViewer>();
-  const [projection, setProjection] = useState<Proj>();
-  const [showMousePosition, setShowMousePosition] = useState<boolean>();
-  const [showZoomLevel, setShowZoomLevel] = useState<boolean>();
-  const [showScale, setShowScale] = useState<boolean>();
-  const [locale, setLocale] = useState<{ [key: string]: string }>();
-  const [cameraState, setCameraState] = useState<ICameraState | undefined>();
-  const [sceneModes, setSceneModes] = useState<
-    CesiumSceneModeEnum[] | undefined
-  >();
-  const [legendsList, setLegendsList] = useState<IMapLegend[]>([]);
-  const [baseMaps, setBaseMaps] = useState<IBaseMaps | undefined>();
-  const [showImageryMenu, setShowImageryMenu] = useState<boolean>(false);
-  const [imageryMenuPosition, setImageryMenuPosition] = useState<
-    Record<string, unknown> | undefined
-  >(undefined);
-  const [isLegendsSidebarOpen, setIsLegendsSidebarOpen] = useState<boolean>(
-    false
-  );
-  const [rightClickCoordinates, setRightClickCoordinates] = useState<{
-    longitude: number;
-    latitude: number;
-  }>();
-
-  const viewerProps = {
-    fullscreenButton: true,
-    timeline: false,
-    animation: false,
-    baseLayerPicker: false,
-    geocoder: false,
-    navigationHelpButton: false,
-    homeButton: false,
-    sceneModePicker: false,
-    ...(props as ViewerProps),
-  };
-
-  const getImageryMenuStyle = (
-    x: number,
-    y: number,
-    menuWidth: number,
-    menuHeight: number,
-    menuDynamicHeightIncrement: number
-  ): Record<string, string> => {
-    const container = (mapViewRef as CesiumViewer).container;
-    const mapWidth = container.clientWidth;
-    const mapHeight = container.clientHeight;
-    const calculatedHeight = menuHeight + menuDynamicHeightIncrement;
-    return {
-      left: `${
-        mapWidth - x < menuWidth ? x - (menuWidth - (mapWidth - x)) : x
-      }px`,
-      top: `${
-        mapHeight - y < calculatedHeight
-          ? y - (calculatedHeight - (mapHeight - y))
-          : y
-      }px`,
-    };
-  };
-
-  useEffect(() => {
-    if (ref.current) {
-      const viewer = ref.current.cesiumElement as CesiumViewer;
-
-      if (props.imageryContextMenu) {
-        viewer.screenSpaceEventHandler.setInputAction(
-          (evt: Record<string, unknown>) => {
-            // console.log('RIGHT click', evt.position);
-            const pos = evt.position as Record<string, unknown>;
-
-            setShowImageryMenu(false);
-            setImageryMenuPosition(pos);
-            setRightClickCoordinates(
-              pointToLonLat(viewer, pos.x as number, pos.y as number)
-            );
-            setShowImageryMenu(true);
-          },
-          ScreenSpaceEventType.RIGHT_CLICK
-        );
-      }
-    }
-    setMapViewRef(ref.current?.cesiumElement);
-  }, [ref, props.imageryContextMenu]);
-
-  useEffect(() => {
-    if (mapViewRef) {
-      mapViewRef.shouldOptimizedTileRequests =
-        props.useOptimizedTileRequests ?? false;
-
-      mapViewRef.layersManager = new LayerManager(
-        mapViewRef,
-        props.legends?.mapLegendsExtractor,
-        () => {
-          setLegendsList(
-            mapViewRef?.layersManager?.legendsList as IMapLegend[]
-          );
-        }
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mapViewRef]);
-
-  useEffect(() => {
-    if (mapViewRef) {
-      mapViewRef.shouldOptimizedTileRequests =
-        props.useOptimizedTileRequests ?? false;
-    }
-  }, [props.useOptimizedTileRequests, mapViewRef]);
-
-  useEffect(() => {
-    setSceneModes(
-      props.sceneModes ?? [
-        CesiumSceneMode.SCENE2D,
-        CesiumSceneMode.SCENE3D,
-        CesiumSceneMode.COLUMBUS_VIEW,
-      ]
-    );
-  }, [props.sceneModes]);
-
-  useEffect(() => {
-    setBaseMaps(props.baseMaps);
-
-    const currentMap = props.baseMaps?.maps.find(
-      (map: IBaseMap) => map.isCurrent
-    );
-    if (currentMap && mapViewRef) {
-      mapViewRef.layersManager?.setBaseMapLayers(currentMap);
-    }
-  }, [props.baseMaps, mapViewRef]);
-
-  useEffect(() => {
-    setProjection(props.projection ?? Proj.WGS84);
-  }, [props.projection]);
-
-  useEffect(() => {
-    setLocale(props.locale);
-  }, [props.locale]);
-
-  useEffect(() => {
-    setShowMousePosition(props.showMousePosition ?? true);
-  }, [props.showMousePosition]);
-
-  useEffect(() => {
-    setShowZoomLevel(props.showZoomLevel ?? true);
-  }, [props.showZoomLevel]);
-
-  useEffect(() => {
-    setShowScale(props.showScale ?? true);
-  }, [props.showScale]);
-
-  useEffect(() => {
-    const getCameraPosition = (): ICameraPosition => {
-      if (mapViewRef === undefined) {
-        return {
-          longitude: 0,
-          latitude: 0,
-          height: 0,
-        };
-      }
-
-      const getCameraPositionCartographic = (): ICameraPosition => {
-        const camPos = mapViewRef.camera.positionCartographic;
-        return {
-          longitude: toDegrees(camPos.longitude),
-          latitude: toDegrees(camPos.latitude),
-          height: camPos.height,
-        };
-      };
-
-      // https://stackoverflow.com/questions/33348761/get-center-in-cesium-map
-      if (mapViewRef.scene.mode === SceneMode.SCENE3D) {
-        const windowPosition = new Cartesian2(
-          // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-          mapViewRef.container.clientWidth / 2,
-          // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-          mapViewRef.container.clientHeight / 2
-        );
-        const pickRay = mapViewRef.scene.camera.getPickRay(windowPosition);
-        const pickPosition = mapViewRef.scene.globe.pick(
-          pickRay,
-          mapViewRef.scene
-        );
-        const pickPositionCartographic = mapViewRef.scene.globe.ellipsoid.cartesianToCartographic(
-          pickPosition as Cartesian3
-        );
-
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        return pickPositionCartographic !== undefined
-          ? {
-              longitude: toDegrees(pickPositionCartographic.longitude),
-              latitude: toDegrees(pickPositionCartographic.latitude),
-              height: mapViewRef.scene.camera.positionCartographic.height,
-            }
-          : getCameraPositionCartographic();
-      } else {
-        return getCameraPositionCartographic();
-      }
-    };
-
-    const intervalHandle = setInterval(() => {
-      if (mapViewRef && mapViewRef.scene.mode !== SceneMode.MORPHING) {
-        const camera = mapViewRef.camera;
-
-        const store: ICameraState = {
-          position: getCameraPosition(),
-          direction: camera.direction.clone(),
-          up: camera.up.clone(),
-          right: camera.right.clone(),
-          transform: camera.transform.clone(),
-          frustum: camera.frustum.clone(),
-        };
-        setCameraState(store);
-      }
-    }, cameraPositionRefreshRate);
-
-    return (): void => {
-      clearInterval(intervalHandle);
-    };
-  }, [mapViewRef]);
-
-  useEffect(() => {
-    const morphCompleteHandler = (): void => {
-      if (mapViewRef && cameraState) {
-        void mapViewRef.camera.flyTo({
-          destination: Cartesian3.fromDegrees(
-            cameraState.position.longitude,
-            cameraState.position.latitude,
-            cameraState.position.height
-          ),
-          duration: 0,
-        });
-      }
-    };
-    if (mapViewRef) {
-      mapViewRef.scene.morphComplete.addEventListener(morphCompleteHandler);
-    }
-    return (): void => {
-      if (mapViewRef) {
-        mapViewRef.scene.morphComplete.removeEventListener(
-          morphCompleteHandler
-        );
-      }
-    };
-  }, [mapViewRef, cameraState]);
-
-  useEffect(() => {
-    const zoom = props.zoom;
-    const center = props.center;
-    if (mapViewRef && isNumber(zoom) && isArray(center)) {
-      void mapViewRef.camera.flyTo({
-        destination: Cartesian3.fromDegrees(
-          center[0],
-          center[1],
-          getAltitude(zoom)
-        ),
-        duration: 0,
-      });
-    }
-  }, [props.zoom, props.center, mapViewRef]);
-
-  const bindCustomToolsToViewer = useCallback((): JSX.Element | undefined => {
-    return (
-      mapViewRef &&
-      createPortal(
-        <>
-          <Box className="sideToolsContainer">
-            <CesiumSettings
-              sceneModes={sceneModes as CesiumSceneModeEnum[]}
-              baseMaps={baseMaps}
-              locale={locale}
-            />
-            <MapLegendToggle
-              onClick={(): void =>
-                setIsLegendsSidebarOpen(!isLegendsSidebarOpen)
-              }
-            />
-          </Box>
-          <Box className="toolsContainer">
-            {showMousePosition === true ? (
-              <CoordinatesTrackerTool projection={projection} />
-            ) : (
-              <></>
-            )}
-            {showZoomLevel === true ? (
-              <ZoomLevelTrackerTool locale={locale} />
-            ) : (
-              <></>
-            )}
-            {showScale === true ? <ScaleTrackerTool locale={locale} /> : <></>}
-          </Box>
-        </>,
-        document.querySelector('.cesium-viewer') as Element
-      )
-    );
-  }, [
-    baseMaps,
-    locale,
-    mapViewRef,
-    projection,
-    sceneModes,
-    showMousePosition,
-    showScale,
-    isLegendsSidebarOpen,
-  ]);
-
-  return (
-    <Viewer className="viewer" full ref={ref} {...viewerProps}>
-      <MapViewProvider value={mapViewRef as CesiumViewer}>
-        <MapLegendSidebar
-          title={props.legends?.title}
-          isOpen={isLegendsSidebarOpen}
-          toggleSidebar={(): void =>
-            setIsLegendsSidebarOpen(!isLegendsSidebarOpen)
-          }
-          noLegendsText={props.legends?.emptyText}
-          legends={props.legends?.legendsList ?? legendsList}
-          actionsTexts={props.legends?.actionsTexts}
-        />
-        {props.children}
-        {bindCustomToolsToViewer()}
-        {props.imageryContextMenu &&
-          showImageryMenu &&
-          imageryMenuPosition &&
-          rightClickCoordinates &&
-          React.cloneElement(props.imageryContextMenu, {
-            data: (mapViewRef?.layersManager?.findLayerByPOI(
-              imageryMenuPosition.x as number,
-              imageryMenuPosition.y as number
-            ) as unknown) as Record<string, unknown>[],
-            position: {
-              x: imageryMenuPosition.x as number,
-              y: imageryMenuPosition.y as number,
-            },
-            coordinates: rightClickCoordinates,
-            style: getImageryMenuStyle(
-              imageryMenuPosition.x as number,
-              imageryMenuPosition.y as number,
-              props.imageryContextMenuSize?.width ?? DEFAULT_WIDTH,
-              props.imageryContextMenuSize?.height ?? DEFAULT_HEIGHT,
-              props.imageryContextMenuSize?.dynamicHeightIncrement ??
-                DEFAULT_DYNAMIC_HEIGHT_INCREMENT
-            ),
-            size: props.imageryContextMenuSize ?? {
-              height: DEFAULT_HEIGHT,
-              width: DEFAULT_WIDTH,
-            },
-            handleClose: () => {
-              setShowImageryMenu(!showImageryMenu);
-            },
-          })}
-      </MapViewProvider>
-    </Viewer>
-  );
-};

package/src/lib/cesium-map/map.types.ts

@@ -1,11 +0,0 @@
-import { SceneMode } from 'cesium';
-
-export type CesiumSceneModeEnum = SceneMode;
-/* eslint-disable */
-export const CesiumSceneMode = {
-  MORPHING: SceneMode.MORPHING,
-  COLUMBUS_VIEW: SceneMode.COLUMBUS_VIEW,
-  SCENE2D: SceneMode.SCENE2D,
-  SCENE3D: SceneMode.SCENE3D,
-};
-/* eslint-enable */

package/src/lib/cesium-map/proxied.types.ts

@@ -1,58 +0,0 @@
-import {
-  BoundingSphere,
-  Cartesian2,
-  Cartesian3,
-  Cartographic,
-  CesiumTerrainProvider,
-  ConstantPositionProperty,
-  ConstantProperty,
-  Ellipsoid,
-  EllipsoidTerrainProvider,
-  GeographicTilingScheme,
-  LabelStyle,
-  PolylineDashMaterialProperty,
-  Rectangle,
-  Resource,
-  VerticalOrigin,
-  Math,
-} from 'cesium';
-
-// PROXIED CLASSES
-export class CesiumPolylineDashMaterialProperty extends PolylineDashMaterialProperty {}
-
-export class CesiumConstantProperty extends ConstantProperty {}
-
-export class CesiumConstantPositionProperty extends ConstantPositionProperty {}
-
-export class CesiumCartesian2 extends Cartesian2 {}
-
-export class CesiumCartesian3 extends Cartesian3 {}
-
-export class CesiumCartographic extends Cartographic {}
-
-export class CesiumBoundingSphere extends BoundingSphere {}
-
-export class CesiumEllipsoid extends Ellipsoid {}
-
-export class CesiumGeographicTilingScheme extends GeographicTilingScheme {}
-
-export class CesiumRectangle extends Rectangle {}
-
-export class CesiumResource extends Resource {}
-
-export class CesiumEllipsoidTerrainProvider extends EllipsoidTerrainProvider {}
-
-export class CesiumCesiumTerrainProvider extends CesiumTerrainProvider {}
-
-// PROXIED ENUMS
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const CesiumVerticalOrigin = VerticalOrigin;
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const CesiumLabelStyle = LabelStyle;
-
-// PROXIED FUNCTIONS
-export {
-  sampleTerrainMostDetailed as cesiumSampleTerrainMostDetailed,
-  Math as CesiumMath,
-} from 'cesium';

package/src/lib/cesium-map/settings/base-maps.css

@@ -1,37 +0,0 @@
-.mapSelector {
-  width: 260px;
-  list-style: none;
-  padding-left: 0;
-  display: flex;
-  flex-wrap: wrap;
-  grid-gap: 4px;
-  min-height: 140px;
-  margin-block-start: 0px;
-  padding-inline-start: 0px;
-}
-
-.mapContainer {
-}
-
-.mapContainerSelected {
-  border: blueviolet 2px solid !important;
-  border-radius: 2px;
-}
-
-.mapContainer:hover {
-  border: tomato 2px solid;
-  border-radius: 2px;
-}
-
-.mapContainerImg {
-  width: 100%;
-  height: 100%;
-}
-
-.mapLabel {
-  font-size: 12px;
-}
-
-.mapLabel::before {
-  content: '\00a0';
-}

package/src/lib/cesium-map/settings/base-maps.tsx

@@ -1,94 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import { CesiumViewer, useCesiumMap } from '../map';
-import { IBaseMap, IBaseMaps } from './settings';
-
-import './base-maps.css';
-
-const useStyle = makeStyles((theme: Theme) =>
-  createStyles({
-    mapContainer: {
-      width: '60px',
-      height: '60px',
-      border: `${theme.palette.background.paper} 2px solid`,
-    },
-  })
-);
-
-export interface RCesiumBaseMapsProps {
-  baseMaps?: IBaseMaps;
-}
-
-export const CesiumBaseMaps: React.FC<RCesiumBaseMapsProps> = (props) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-  const { baseMaps } = props;
-  const [currentMap, setCurrentMap] = useState<string>(' ');
-  const [selectedBaseMap, setSelectedBaseMap] = useState<
-    IBaseMap | undefined
-  >();
-  const classes = useStyle();
-
-  useEffect(() => {
-    const defaultMap = baseMaps?.maps.find((map: IBaseMap) => map.isCurrent);
-    if (defaultMap) {
-      setSelectedBaseMap(defaultMap);
-      setCurrentMap(defaultMap.title !== undefined ? defaultMap.title : ' ');
-    }
-  }, [baseMaps]);
-
-  const handleMapSection = (id: string): void => {
-    if (baseMaps) {
-      // Remove previous base-map layers
-      mapViewer.layersManager?.removeBaseMapLayers();
-
-      // Change base-map: add base-map layers by zIndex order
-      const selectedBaseMap = baseMaps.maps.find(
-        (map: IBaseMap) => map.id === id
-      );
-      if (selectedBaseMap) {
-        mapViewer.layersManager?.setBaseMapLayers(selectedBaseMap);
-
-        setSelectedBaseMap(selectedBaseMap);
-
-        baseMaps.maps.forEach((map: IBaseMap) => {
-          map.isCurrent = selectedBaseMap === map;
-        });
-      }
-    }
-  };
-
-  return (
-    <>
-      <label className="mapLabel">{currentMap}</label>
-      <ul className="mapSelector">
-        {baseMaps?.maps.map((map: IBaseMap) => (
-          <li
-            className={`mapContainer ${classes.mapContainer} ${
-              map === selectedBaseMap ? 'mapContainerSelected' : ''
-            }`}
-            key={map.id}
-          >
-            <img
-              alt={''}
-              className="mapContainerImg"
-              src={map.thumbnail}
-              onMouseOver={(): void => {
-                setCurrentMap(map.title as string);
-              }}
-              onMouseOut={(): void => {
-                setCurrentMap(
-                  selectedBaseMap?.title !== undefined
-                    ? selectedBaseMap.title
-                    : ' '
-                );
-              }}
-              onClick={(): void => {
-                handleMapSection(map.id);
-              }}
-            />
-          </li>
-        ))}
-      </ul>
-    </>
-  );
-};

package/src/lib/cesium-map/settings/scene-modes.css

@@ -1,19 +0,0 @@
-.mapViewIcon {
-  fill: #fff;
-  width: 40px;
-  height: 40px;
-  background: #303336;
-  border: 1px solid #444;
-  border-radius: 4px;
-}
-
-.mapViewIcon:hover {
-  background: #48b;
-  border-color: #aef;
-}
-
-.mapViewCurrent {
-  fill: #aef;
-  border: 1px solid #aef;
-  border-radius: 4px;
-}