@map-colonies/react-components 3.15.1 → 4.0.2

package/src/lib/cesium-map/data-sources/drawings.data-source.tsx

@@ -1,213 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Cartesian3, Color, Rectangle, PolygonHierarchy } from 'cesium';
-import { FeatureCollection, GeoJSON } from 'geojson';
-import { CustomDataSourceProps } from 'resium/dist/types/src/CustomDataSource/CustomDataSource';
-import { DrawType } from '../../models';
-import { CesiumEntity } from '../entities/entity';
-import { CesiumEntityStaticDescription } from '../entities/entity.description';
-import { CesiumPolygonGraphics } from '../entities/graphics/polygon.graphics';
-import { CesiumRectangleGraphics } from '../entities/graphics/rectangle.graphics';
-import { CesiumPolylineGraphics } from '../entities/graphics/polyline.graphics';
-import { CesiumViewer, useCesiumMap } from '../map';
-import { DrawHelper } from '../tools/draw/drawHelper';
-import { geoJSONToPrimitive } from '../tools/geojson/geojson-to-primitive';
-import { rectangleToGeoJSON, polygonToGeoJSON } from '../tools/geojson';
-import { rectangleToPositions } from '../tools/cesium/primitives-conversions.cesium';
-import { CesiumCustomDataSource } from './custom.data-source';
-
-export class CesiumColor extends Color {}
-
-export type PrimitiveCoordinates = Cartesian3[] | Rectangle | undefined;
-
-export interface IDrawing {
-  coordinates: PrimitiveCoordinates;
-  name: string;
-  id: string;
-  type: DrawType;
-  geojson?: GeoJSON;
-}
-
-export interface IDrawingEvent {
-  primitive: PrimitiveCoordinates;
-  type: DrawType;
-  geojson: GeoJSON;
-}
-
-export interface RCesiumDrawingDataSourceProps extends CustomDataSourceProps {
-  drawings: IDrawing[];
-  drawState: {
-    drawing: boolean;
-    type: DrawType;
-    handler: (drawing: IDrawingEvent) => void;
-  };
-  drawingMaterial: CesiumColor;
-  drawingVertexColor?: CesiumColor;
-  material?: CesiumColor;
-  hollow?: boolean;
-  outlineWidth?: number;
-}
-
-export const CesiumDrawingsDataSource: React.FC<RCesiumDrawingDataSourceProps> = (
-  props
-) => {
-  const {
-    drawState,
-    drawingMaterial,
-    drawingVertexColor,
-    material,
-    hollow,
-    outlineWidth,
-  } = props;
-  const mapViewer: CesiumViewer = useCesiumMap();
-
-  const [drawHelper, setDrawHelper] = useState<typeof DrawHelper>();
-
-  useEffect(() => {
-    setDrawHelper(
-      // eslint-disable-next-line
-      new (DrawHelper as any)(mapViewer, drawingMaterial, drawingVertexColor)
-    );
-  }, []);
-
-  useEffect(() => {
-    if (drawHelper) {
-      // eslint-disable-next-line
-      const drawHelperInstance = drawHelper as any;
-      if (drawState.drawing) {
-        switch (drawState.type) {
-          case DrawType.POLYGON:
-            // Disable terrain accounting before drawing.
-            mapViewer.scene.globe.depthTestAgainstTerrain = false;
-
-            // eslint-disable-next-line
-            drawHelperInstance.startDrawingPolygon({
-              callback: (positions: PrimitiveCoordinates) => {
-                //// MAKE polygon editable example
-                // var polygon = new DrawHelper.PolygonPrimitive({
-                //   positions: positions,
-                //   width: 5,
-                //   geodesic: true
-                // });
-                // mapViewer.scene.primitives.add(polygon);
-                // polygon.setStrokeStyle(Color.AQUA,1);
-                // polygon.setEditable();
-                // polygon.addListener('onEdited', function(event) {
-                //   console.log('Polygone edited, ' + event.positions.length + ' points');
-                // });
-                drawState.handler({
-                  primitive: positions,
-                  type: DrawType.POLYGON,
-                  geojson: polygonToGeoJSON(positions as Cartesian3[]),
-                });
-              },
-            });
-            break;
-          case DrawType.BOX:
-            // Disable terrain accounting before drawing.
-            mapViewer.scene.globe.depthTestAgainstTerrain = false;
-
-            // eslint-disable-next-line
-            drawHelperInstance.startDrawingExtent({
-              callback: (positions: PrimitiveCoordinates) => {
-                //// MAKE box editable example
-                // var extentPrimitive = new DrawHelper.ExtentPrimitive({
-                //   extent: positions,
-                //   material: Cesium.Material.fromType(Cesium.Material.StripeType)
-                // });
-                // mapViewer.scene.primitives.add(extentPrimitive);
-                // extentPrimitive.setStrokeStyle(Color.AQUA,1);
-                // extentPrimitive.setEditable();
-                // extentPrimitive.addListener('onEdited', function(event) {
-                //   console.log('Extent edited: extent is (N: ' + event.extent.north.toFixed(3) + ', E: ' + event.extent.east.toFixed(3) + ', S: ' + event.extent.south.toFixed(3) + ', W: ' + event.extent.west.toFixed(3) + ')');
-                // });
-                drawState.handler({
-                  primitive: positions,
-                  type: DrawType.BOX,
-                  geojson: rectangleToGeoJSON(positions as Rectangle),
-                });
-              },
-            });
-            break;
-          default:
-            throw new Error(
-              `[CESIUM DRAW]: ${drawState.type} unrecognized primitive to draw.`
-            );
-            break;
-        }
-      } else {
-        // eslint-disable-next-line
-        drawHelperInstance.stopDrawing();
-
-        // Enable terrain accounting after drawing.
-        mapViewer.scene.globe.depthTestAgainstTerrain = true;
-      }
-    }
-  }, [drawState, drawHelper]);
-
-  const renderGraphicsComponent = (
-    drawEntity: IDrawing
-  ): React.ReactElement => {
-    let coordinates: Rectangle | Cartesian3[] | undefined =
-      drawEntity.coordinates !== undefined
-        ? drawEntity.coordinates
-        : geoJSONToPrimitive(
-            drawEntity.type,
-            drawEntity.geojson as FeatureCollection
-          );
-    if (hollow !== true) {
-      switch (drawEntity.type) {
-        case DrawType.BOX:
-          return (
-            <CesiumRectangleGraphics
-              coordinates={coordinates as Rectangle}
-              material={material ?? drawingMaterial}
-            />
-          );
-        case DrawType.POLYGON:
-          return (
-            <CesiumPolygonGraphics
-              hierarchy={new PolygonHierarchy(coordinates as Cartesian3[])}
-              material={material ?? drawingMaterial}
-            />
-          );
-        default:
-          return <></>;
-      }
-    } else {
-      switch (drawEntity.type) {
-        case DrawType.BOX:
-          coordinates = rectangleToPositions(coordinates as Rectangle);
-          break;
-        case DrawType.POLYGON:
-          coordinates = [
-            ...(coordinates as Cartesian3[]),
-            (coordinates as Cartesian3[])[0],
-          ];
-          break;
-        default:
-          return <></>;
-      }
-      return (
-        <CesiumPolylineGraphics
-          positions={coordinates}
-          width={outlineWidth ?? 1}
-          material={material ?? drawingMaterial}
-        />
-      );
-    }
-  };
-
-  return (
-    <CesiumCustomDataSource {...props}>
-      {props.drawings.map((drawEntity, i) => (
-        <CesiumEntity key={drawEntity.id} name={drawEntity.name}>
-          <CesiumEntityStaticDescription>
-            <h1>Drawed Entity {drawEntity.name}</h1>
-            <p>This is description of drawed entity</p>
-          </CesiumEntityStaticDescription>
-          {renderGraphicsComponent(drawEntity)}
-        </CesiumEntity>
-      ))}
-    </CesiumCustomDataSource>
-  );
-};

package/src/lib/cesium-map/data-sources/index.ts

@@ -1,2 +0,0 @@
-export * from './custom.data-source';
-export * from './drawings.data-source';

package/src/lib/cesium-map/entities/entity.description.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import {
-  EntityDescription as ResiumEntityDescription,
-  EntityStaticDescription as ResiumEntityStaticDescription,
-} from 'resium';
-import { EntityDescriptionProps } from 'resium/dist/types/src/EntityDescription/EntityDescription';
-
-export interface RCesiumEntityDescriptionProps extends EntityDescriptionProps {}
-
-export const CesiumEntityDescription: React.FC<RCesiumEntityDescriptionProps> = (
-  props
-) => {
-  return <ResiumEntityDescription {...props} />;
-};
-
-export const CesiumEntityStaticDescription: React.FC = (props) => {
-  return <ResiumEntityStaticDescription {...props} />;
-};

package/src/lib/cesium-map/entities/entity.graphics.stories.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Cartesian3, Color } from 'cesium';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap } from '../map';
-import { CesiumEntity } from './entity';
-import { CesiumEntityStaticDescription } from './entity.description';
-import { CesiumPolygonGraphics } from './graphics/polygon.graphics';
-
-export default {
-  title: 'Cesium Map/Entity/Graphics',
-  component: CesiumEntity,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-export const Polygon: Story = (args) => (
-  <div style={mapDivStyle}>
-    <CesiumMap>
-      <CesiumEntity {...args} name="test">
-        <CesiumEntityStaticDescription>
-          <h1>Hello!</h1>
-          <p>This is description. It can be described with static JSX!</p>
-        </CesiumEntityStaticDescription>
-        <CesiumPolygonGraphics
-          hierarchy={
-            // eslint-disable-next-line
-            Cartesian3.fromDegreesArray([
-              -108.0,
-              42.0,
-              -100.0,
-              42.0,
-              -104.0,
-              40.0,
-            ]) as any
-          } // WORKAROUND
-          material={Color.GREEN}
-        />
-      </CesiumEntity>
-    </CesiumMap>
-  </div>
-);

package/src/lib/cesium-map/entities/entity.stories.tsx

@@ -1,146 +0,0 @@
-import React, { useState, useMemo, useEffect, useRef } from 'react';
-import { Cartesian3, Color } from 'cesium';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap } from '../map';
-import { CesiumEntity, RCesiumEntityProps } from './entity';
-import {
-  CesiumEntityDescription,
-  CesiumEntityStaticDescription,
-} from './entity.description';
-
-export default {
-  title: 'Cesium Map/Entity',
-  component: CesiumEntity,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const initCanvas = (): HTMLCanvasElement => {
-  const can = document.createElement('canvas');
-  can.width = 100;
-  can.height = 100;
-  return can;
-};
-
-const renderCanvas = (can: HTMLCanvasElement, p: number): void => {
-  const c = can.getContext('2d');
-  if (!c) return;
-  c.clearRect(0, 0, can.width, can.height);
-  c.fillStyle = 'rgba(100,0,0,0.8)';
-  c.beginPath();
-  c.arc(
-    can.width / 2,
-    can.height / 2,
-    (p * can.width) / 2,
-    0,
-    Math.PI * 2,
-    false
-  );
-  c.fill();
-};
-
-const CanvasEntity: React.FC<RCesiumEntityProps> = (props) => {
-  const c1 = useMemo<HTMLCanvasElement>(initCanvas, []);
-  const c2 = useMemo<HTMLCanvasElement>(initCanvas, []);
-  const [image, setImage] = useState<HTMLCanvasElement>();
-  const progress = useRef(0);
-
-  useEffect(() => {
-    const i = window.setInterval(() => {
-      progress.current = Math.min(progress.current + 0.01, 1);
-      setImage((image) => {
-        const canvas = image === c1 ? c2 : c1;
-        renderCanvas(canvas, progress.current);
-        return canvas;
-      });
-      if (progress.current >= 1) {
-        clearInterval(i);
-      }
-    }, 10);
-    return (): void => window.clearInterval(i);
-  }, [c1, c2]);
-
-  return <CesiumEntity {...props} billboard={{ image }} />;
-};
-
-export const Basic: Story = (args) => (
-  <div style={mapDivStyle}>
-    <CesiumMap>
-      <CesiumEntity
-        {...args}
-        name="test"
-        description="test!!"
-        position={Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100)}
-        point={{ pixelSize: 10 }}
-      />
-    </CesiumMap>
-  </div>
-);
-Basic.storyName = 'Basic Entity';
-
-export const WithDescription: Story<RCesiumEntityProps> = (args) => {
-  const [count, setCount] = useState(0);
-  return (
-    <CesiumMap>
-      <CesiumEntity
-        {...args}
-        name="test1"
-        position={Cartesian3.fromDegrees(-74, 40, 100)}
-        point={{ pixelSize: 15, color: Color.YELLOW }}
-        description="Normal Description"
-      />
-      <CesiumEntity
-        {...args}
-        name="test2"
-        position={Cartesian3.fromDegrees(-74, 30, 100)}
-        point={{ pixelSize: 15, color: Color.BLUE }}
-      >
-        <CesiumEntityStaticDescription>
-          <h1>Hello!</h1>
-          <p>This is description. It can be described with static JSX!</p>
-        </CesiumEntityStaticDescription>
-      </CesiumEntity>
-      <CesiumEntity
-        {...args}
-        name="test3"
-        position={Cartesian3.fromDegrees(-74, 20, 100)}
-        point={{ pixelSize: 15, color: Color.RED }}
-      >
-        <CesiumEntityDescription>
-          <h1>Hello!</h1>
-        </CesiumEntityDescription>
-      </CesiumEntity>
-      <CesiumEntity
-        {...args}
-        name="test4"
-        position={Cartesian3.fromDegrees(-74, 10, 100)}
-        point={{ pixelSize: 15, color: Color.ORANGE }}
-      >
-        <CesiumEntityDescription>
-          <h1>Hello!</h1>
-          <p>This is description. It can be described with React!</p>
-          <button onClick={(): void => setCount((i) => i + 1)}>
-            counter: {count}
-          </button>
-        </CesiumEntityDescription>
-      </CesiumEntity>
-    </CesiumMap>
-  );
-};
-
-export const AnimatedCanvas: Story<RCesiumEntityProps> = () => (
-  <CesiumMap>
-    <CanvasEntity
-      name="test"
-      description="test"
-      position={Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100)}
-    />
-  </CesiumMap>
-);

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

@@ -1,10 +0,0 @@
-import React from 'react';
-
-import { Entity as ResiumEntity } from 'resium';
-import { EntityProps } from 'resium/dist/types/src/Entity/Entity';
-
-export interface RCesiumEntityProps extends EntityProps {}
-
-export const CesiumEntity: React.FC<RCesiumEntityProps> = (props) => {
-  return <ResiumEntity {...props} />;
-};

package/src/lib/cesium-map/entities/graphics/polygon.graphics.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { PolygonGraphics as ResiumPolygonGraphics } from 'resium';
-import { PolygonGraphicsProps } from 'resium/dist/types/src/PolygonGraphics/PolygonGraphics';
-
-export interface RCesiumPolygonGraphicsProps extends PolygonGraphicsProps {}
-
-export const CesiumPolygonGraphics: React.FC<RCesiumPolygonGraphicsProps> = (
-  props
-) => {
-  return <ResiumPolygonGraphics {...props} />;
-};

package/src/lib/cesium-map/entities/graphics/polyline.graphics.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { PolylineGraphics as ResiumPolylineGraphics } from 'resium';
-import { PolylineGraphicsProps } from 'resium/dist/types/src/PolylineGraphics/PolylineGraphics';
-
-export interface RCesiumPolylineGraphicsProps extends PolylineGraphicsProps {}
-
-export const CesiumPolylineGraphics: React.FC<RCesiumPolylineGraphicsProps> = (
-  props
-) => {
-  return <ResiumPolylineGraphics {...props} />;
-};

package/src/lib/cesium-map/entities/graphics/rectangle.graphics.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { RectangleGraphics as ResiumRectangleGraphics } from 'resium';
-import { RectangleGraphicsProps } from 'resium/dist/types/src/RectangleGraphics/RectangleGraphics';
-
-export interface RCesiumRectangleGraphicsProps extends RectangleGraphicsProps {}
-
-export const CesiumRectangleGraphics: React.FC<RCesiumRectangleGraphicsProps> = (
-  props
-) => {
-  return <ResiumRectangleGraphics {...props} />;
-};

package/src/lib/cesium-map/entities/index.ts

@@ -1,4 +0,0 @@
-export * from './entity';
-export * from './entity.description';
-export * from './graphics/polygon.graphics';
-export * from './graphics/rectangle.graphics';

package/src/lib/cesium-map/helpers/customImageryProviders.ts

@@ -1,173 +0,0 @@
-import {
-  Request,
-  ImageryProvider,
-  UrlTemplateImageryProvider,
-  WebMapServiceImageryProvider,
-  WebMapTileServiceImageryProvider,
-  ImageryLayer,
-} from 'cesium';
-import { get, isEmpty } from 'lodash';
-import { ICesiumImageryLayer } from '../layers-manager';
-import { CesiumViewer } from '../map';
-import { imageHasTransparency } from './utils';
-
-export interface CustomImageryProvider extends ImageryProvider {
-  readonly layerListInstance: ICesiumImageryLayer[];
-  tileTransparencyCheckedCounter: number;
-  mapViewer: CesiumViewer;
-  readonly maxTilesForTransparencyCheck: number;
-}
-
-const NUMBER_OF_TILES_TO_CHECK = 3;
-export const HAS_TRANSPARENCY_META_PROP = 'hasTransparency';
-
-function customCommonRequestImage(
-  this: CustomImageryProvider,
-  requestImageFn: ImageryProvider['requestImage'],
-  x: number,
-  y: number,
-  level: number,
-  request?: Request | undefined
-): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
-  // custom Logic
-  setTimeout(() => {
-    const requestedLayerMeta = this.layerListInstance.find(
-      /* eslint-disable */
-      (layer: ImageryLayer): boolean => {
-        return (
-          (layer as any)._imageryProvider._resource._url ===
-          (this as any)._resource._url
-        );
-      }
-      /* eslint-enable */
-    )?.meta;
-
-    const layerHasTransparency =
-      get(requestedLayerMeta, HAS_TRANSPARENCY_META_PROP) === true;
-
-    if (
-      this.tileTransparencyCheckedCounter < NUMBER_OF_TILES_TO_CHECK &&
-      !layerHasTransparency
-    ) {
-      void imageHasTransparency(request?.url as string, this).then(
-        (hasTransparency) => {
-          this.mapViewer.layersManager?.addMetaToLayer(
-            { [HAS_TRANSPARENCY_META_PROP]: hasTransparency },
-            /* eslint-disable */
-            (layer: ImageryLayer): boolean => {
-              return (
-                (layer as any)._imageryProvider._resource._url ===
-                (this as any)._resource._url
-              );
-            }
-            /* eslint-enable */
-          );
-        }
-      );
-    }
-  }, 0);
-
-  return requestImageFn(x, y, level, request);
-}
-
-export class CustomUrlTemplateImageryProvider extends UrlTemplateImageryProvider {
-  public readonly layerListInstance: ICesiumImageryLayer[];
-  public readonly mapViewer: CesiumViewer;
-  public readonly maxTilesForTransparencyCheck = NUMBER_OF_TILES_TO_CHECK;
-
-  public tileTransparencyCheckedCounter = 0;
-
-  public constructor(
-    opts: UrlTemplateImageryProvider.ConstructorOptions,
-    mapViewer: CesiumViewer
-  ) {
-    super(opts);
-    this.layerListInstance = mapViewer.layersManager
-      ?.layerList as ICesiumImageryLayer[];
-    this.mapViewer = mapViewer;
-  }
-
-  public requestImage(
-    x: number,
-    y: number,
-    level: number,
-    request?: Request | undefined
-  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
-    return customCommonRequestImage.call(
-      this,
-      super.requestImage.bind(this),
-      x,
-      y,
-      level,
-      request
-    );
-  }
-}
-
-export class CustomWebMapServiceImageryProvider extends WebMapServiceImageryProvider {
-  public readonly layerListInstance: ICesiumImageryLayer[];
-  public readonly mapViewer: CesiumViewer;
-  public readonly maxTilesForTransparencyCheck = NUMBER_OF_TILES_TO_CHECK;
-
-  public tileTransparencyCheckedCounter = 0;
-
-  public constructor(
-    opts: WebMapServiceImageryProvider.ConstructorOptions,
-    mapViewer: CesiumViewer
-  ) {
-    super(opts);
-    this.layerListInstance = mapViewer.layersManager
-      ?.layerList as ICesiumImageryLayer[];
-    this.mapViewer = mapViewer;
-  }
-
-  public requestImage(
-    x: number,
-    y: number,
-    level: number,
-    request?: Request | undefined
-  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
-    return customCommonRequestImage.call(
-      this,
-      super.requestImage.bind(this),
-      x,
-      y,
-      level,
-      request
-    );
-  }
-}
-
-export class CustomWebMapTileServiceImageryProvider extends WebMapTileServiceImageryProvider {
-  public readonly layerListInstance: ICesiumImageryLayer[];
-  public readonly mapViewer: CesiumViewer;
-  public readonly maxTilesForTransparencyCheck = NUMBER_OF_TILES_TO_CHECK;
-
-  public tileTransparencyCheckedCounter = 0;
-
-  public constructor(
-    opts: WebMapTileServiceImageryProvider.ConstructorOptions,
-    mapViewer: CesiumViewer
-  ) {
-    super(opts);
-    this.layerListInstance = mapViewer.layersManager
-      ?.layerList as ICesiumImageryLayer[];
-    this.mapViewer = mapViewer;
-  }
-
-  public requestImage(
-    x: number,
-    y: number,
-    level: number,
-    request?: Request | undefined
-  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
-    return customCommonRequestImage.call(
-      this,
-      super.requestImage.bind(this),
-      x,
-      y,
-      level,
-      request
-    );
-  }
-}