@map-colonies/react-components 3.12.2 → 3.13.0

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

@@ -1,204 +1,213 @@
-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:
-            // 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:
-            // 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();
-      }
-    }
-  }, [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>
-  );
-};
+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 +1,2 @@
-export * from './custom.data-source';
-export * from './drawings.data-source';
+export * from './custom.data-source';
+export * from './drawings.data-source';

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

@@ -1,19 +1,19 @@
-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} />;
-};
+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 +1,48 @@
-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>
-);
+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>
+);