v4.0.0 ready

chrisrzhou · Oct 17, 2019 · b4861ef · b4861ef
1 parent 3f79705
commit b4861ef
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Change Log
 
-## [4.0.0](https://github.com/chrisrzhou/react-globe/compare/v3.1.1...v4.0.0) (2019-10-13)
+## [4.0.0](https://github.com/chrisrzhou/react-globe/compare/v3.1.1...v4.0.0) (2019-10-17)
 
 `v4.0.0` brings huge improvements to marker transition behaviors and other features!
 

diff --git a/docs/examples/globe-instance.mdx b/docs/examples/globe-instance.mdx
@@ -116,8 +116,9 @@ The `Globe` named export allows you to create globe visualizations with vanilla
       // create and initialize globe instance
       const globeInstance = new Globe(canvas, tooltipDiv);
       mount.appendChild(globeInstance.renderer.domElement);
-      globeInstance.updateCamera([[37.773972, -122.431297]]);
-      globeInstance.resize([800, 400]);
+      // call any update method
+      globeInstance.updateSize([800, 400]);
+      globeInstance.updateLights({ ambientLightColor: "red" });
       globeInstance.animate();
     });
     return <div id="react-globe-instance" />;

diff --git a/src/Globe.ts b/src/Globe.ts
@@ -36,6 +36,7 @@ import {
   defaultLightOptions,
   defaultMarkerOptions,
   GLOBE_SEGMENTS,
+  INITIAL_COORDINATES,
   MARKER_ACTIVE_ANIMATION_DURATION,
   MARKER_ACTIVE_ANIMATION_EASING_FUNCTION,
   MARKER_DEFAULT_COLOR,
@@ -198,7 +199,6 @@ export default class Globe {
     this.camera = camera;
     this.focus = undefined;
     this.globe = globe;
-    this.initialCoordinates = undefined;
     this.isFrozen = false;
     this.markerObjects = markerObjects;
     this.options = defaultOptions;
@@ -207,6 +207,18 @@ export default class Globe {
     this.renderer = renderer;
     this.scene = scene;
     this.tooltip = tooltip;
+
+    // update objects
+    this.updateCallbacks();
+    this.updateCamera();
+    this.updateFocus();
+    this.updateGlobe({
+      enableBackground: false,
+      enableClouds: false,
+    });
+    this.updateLights();
+    this.updateMarkers();
+    this.updateSize();
   }
 
   animate(): void {
@@ -292,21 +304,14 @@ export default class Globe {
     TWEEN.update();
   }
 
-  resize(size: Size): void {
-    const [width, height] = size;
-    this.renderer.setSize(width, height);
-    this.camera.aspect = width / height;
-    this.camera.updateProjectionMatrix();
-  }
-
   updateCallbacks(callbacks: Optional<Callbacks> = {}): void {
     Object.keys(defaultCallbacks).forEach(key => {
       this.callbacks[key] = callbacks[key] || defaultCallbacks[key];
     });
   }
 
   updateCamera(
-    initialCoordinates: Coordinates,
+    initialCoordinates: Coordinates = INITIAL_COORDINATES,
     cameraOptions: Optional<CameraOptions> = {},
   ): void {
     this.updateOptions(cameraOptions, 'camera');
@@ -351,7 +356,7 @@ export default class Globe {
   }
 
   updateFocus(
-    focus: Coordinates,
+    focus?: Coordinates,
     focusOptions: Optional<FocusOptions> = {},
     autoDefocus = false,
   ): void {
@@ -528,7 +533,7 @@ export default class Globe {
   }
 
   updateMarkers(
-    markers: Marker[],
+    markers: Marker[] = [],
     markerOptions: Optional<MarkerOptions> = {},
   ): void {
     this.updateOptions(markerOptions, 'marker');
@@ -720,6 +725,15 @@ export default class Globe {
     };
   }
 
+  updateSize(size?: Size): void {
+    if (size) {
+      const [width, height] = size;
+      this.renderer.setSize(width, height);
+      this.camera.aspect = width / height;
+    }
+    this.camera.updateProjectionMatrix();
+  }
+
   unfreeze(): void {
     if (this.isFrozen) {
       this.isFrozen = false;

diff --git a/src/ReactGlobe.tsx b/src/ReactGlobe.tsx
@@ -6,6 +6,7 @@ import {
   defaultGlobeOptions,
   defaultLightOptions,
   defaultMarkerOptions,
+  INITIAL_COORDINATES,
 } from './defaults';
 import Globe from './Globe';
 import {
@@ -147,7 +148,7 @@ export default function ReactGlobe({
 
   // resize
   useEffect(() => {
-    globeInstanceRef.current.resize(size);
+    globeInstanceRef.current.updateSize(size);
   }, [size]);
 
   return (
@@ -164,7 +165,7 @@ ReactGlobe.defaultProps = {
   focusOptions: defaultFocusOptions,
   globeOptions: defaultGlobeOptions,
   lightOptions: defaultLightOptions,
-  initialCoordinates: [37.773972, -122.431297],
+  initialCoordinates: INITIAL_COORDINATES,
   markers: [],
   markerOptions: defaultMarkerOptions,
 };
diff --git a/src/defaults.ts b/src/defaults.ts
@@ -1,5 +1,6 @@
 import {
   CameraOptions,
+  Coordinates,
   EasingFunction,
   FocusOptions,
   GlobeOptions,
@@ -20,6 +21,7 @@ export const CAMERA_MIN_POLAR_ANGLE = 0;
 export const CAMERA_MIN_DISTANCE_RADIUS_SCALE = 1.1;
 export const CLOUDS_RADIUS_OFFSET = 1;
 export const GLOBE_SEGMENTS = 50;
+export const INITIAL_COORDINATES: Coordinates = [37.773972, -122.431297];
 export const MARKER_DEFAULT_COLOR = 'gold';
 export const MARKER_SEGMENTS = 10;
 export const MARKER_UNIT_RADIUS_SCALE = 0.01;