@map-colonies/react-components 3.12.2 → 3.13.0

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

@@ -1,146 +1,146 @@
-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>
-);
+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 +1,10 @@
-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} />;
-};
+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 +1,12 @@
-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} />;
-};
+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 +1,12 @@
-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} />;
-};
+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 +1,12 @@
-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} />;
-};
+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 +1,4 @@
-export * from './entity';
-export * from './entity.description';
-export * from './graphics/polygon.graphics';
-export * from './graphics/rectangle.graphics';
+export * from './entity';
+export * from './entity.description';
+export * from './graphics/polygon.graphics';
+export * from './graphics/rectangle.graphics';

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

@@ -1,8 +1,8 @@
-export * from './map';
-export * from './map.types';
-export * from './layers';
-export * from '../utils/projections';
-export * from './entities';
-export * from './data-sources';
-export * from './proxied.types';
-export * from './layers-manager';
+export * from './map';
+export * from './map.types';
+export * from './layers';
+export * from '../utils/projections';
+export * from './entities';
+export * from './data-sources';
+export * from './proxied.types';
+export * from './layers-manager';