Merge remote-tracking branch 'origin/master'

Author: mige

src/Globe/Globe.stories.tsx

@@ -5,6 +5,36 @@ import { Globe } from './Globe';
 const meta = {
   component: Globe,
   title: 'Components/Scenes/Globe',
+  argTypes: {
+    atmosphereEnabled: {
+      description: 'Enable or disable atmosphere rendering',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        defaultValue: { summary: 'true' }
+      }
+    },
+    sunActive: {
+      description: 'Enable or disable sun lighting',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        defaultValue: { summary: 'true' }
+      }
+    },
+    viewExtent: {
+      description: 'Set initial view extent as [west, south, east, north] in degrees',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: { summary: 'NumberArray4 | Extent' },
+        defaultValue: { summary: 'undefined' }
+      }
+    }
+  }
 } satisfies Meta<typeof Globe>;
 
 export default meta;
@@ -16,8 +46,16 @@ export const Default: Story = {
     atmosphereEnabled: false
   }
 };
+
 export const AtmosphereEnabled: Story = {
   args: {
     atmosphereEnabled: true
   }
+};
+
+export const ViewExtentEurope: Story = {
+  args: {
+    atmosphereEnabled: true,
+    viewExtent: [-10, 35, 40, 70] // Europe
+  }
 };

src/Globe/Globe.tsx

@@ -7,6 +7,8 @@ import {Globe as GlobusGlobe, GlobusRgbTerrain, OpenStreetMap, Bing} from "@open
 import {EventCallback} from "@openglobus/og/lib/Events";
 import {IGlobeParams} from "@openglobus/og/lib/Globe";
 import {Layer, Vector} from "@/layer";
+import {Extent, LonLat} from "@openglobus/og";
+import type {NumberArray4} from "@openglobus/og/lib/math/Vec4";
 
 type LayerChildren = React.ReactElement<{ type: typeof Layer | typeof Vector }>;
 
@@ -15,16 +17,33 @@ export interface GlobusProps extends IGlobeParams {
     atmosphereEnabled?: boolean,
     sunActive?: boolean,
     onDraw?: EventCallback
+    viewExtent?: Extent | NumberArray4;
 }
 
 const Globe: React.FC<GlobusProps> = ({children, onDraw, ...rest}) => {
     const targetRef = useRef<HTMLDivElement | null>(null);
     const {setGlobe} = useGlobeContext();
     const [options, setOptions] = useState<IGlobeParams>(rest);
     const gRef = useRef<GlobusGlobe | null>(null);
+
+    useEffect(() => {
+        if (gRef && gRef.current && rest.viewExtent !== undefined) {
+            const extent = rest.viewExtent instanceof Extent
+                ? rest.viewExtent
+                : new Extent(
+                    new LonLat(rest.viewExtent[0], rest.viewExtent[1]),
+                    new LonLat(rest.viewExtent[2], rest.viewExtent[3])
+                );
+            gRef.current.planet.viewExtent(extent);
+        }
+    }, [rest.viewExtent]);
+
     useEffect(() => {
-        if (gRef && gRef.current && rest.atmosphereEnabled !== undefined) gRef.current.planet.atmosphereEnabled = rest.atmosphereEnabled;
+        if (gRef && gRef.current && rest.atmosphereEnabled !== undefined) {
+            gRef.current.planet.atmosphereEnabled = rest.atmosphereEnabled;
+        }
     }, [rest.atmosphereEnabled]);
+
     useEffect(() => {
         if (gRef && gRef.current && rest.sunActive !== undefined) {
             if (rest.sunActive) {
@@ -34,29 +53,17 @@ const Globe: React.FC<GlobusProps> = ({children, onDraw, ...rest}) => {
             }
         }
     }, [rest.sunActive]);
+
     useEffect(() => {
         if (!gRef.current) {
             const osm = new OpenStreetMap("OSM");
-
-            function toQuadKey(x: number, y: number, z: number): string {
-                var index = '';
-                for (var i = z; i > 0; i--) {
-                    var b = 0;
-                    var mask = 1 << (i - 1);
-                    if ((x & mask) !== 0) b++;
-                    if ((y & mask) !== 0) b += 2;
-                    index += b.toString();
-                }
-                return index;
-            }
-
             const sat = new Bing("Microsoft Bing");
 
             gRef.current = new GlobusGlobe({
                 target: targetRef.current!,
                 name: 'Earth',
                 terrain: new GlobusRgbTerrain(),
-                    layers: [osm, sat],
+                layers: [osm, sat],
                 autoActivate: true,
                 atmosphereEnabled: true,
                 ...options
@@ -70,10 +77,13 @@ const Globe: React.FC<GlobusProps> = ({children, onDraw, ...rest}) => {
 
         setGlobe(gRef.current);
         return () => {
-            if (onDraw)
-                gRef.current?.planet.events.off('draw', onDraw)
-            gRef.current?.destroy();
-            gRef.current = null;
+            if (gRef.current) {
+                if (onDraw) {
+                    gRef.current.planet.events.off('draw', onDraw)
+                }
+                gRef.current.destroy();
+                gRef.current = null;
+            }
         };
     }, [options]);