getting mapRect up

- more flow
- story adjustment

Author: chrisdrackett

flow-typed/mapkit.js

@@ -13,9 +13,6 @@ declare module 'mapkit' {
     minimumSpan?: CoordinateSpan,
   }
 
-  declare type MapRect = {
-    //todo
-  }
   declare type Annotation = {
     //todo
   }
@@ -77,13 +74,41 @@ declare module 'mapkit' {
     element: HTMLElement,
   }
 
-  declare type MapPoint = {
-    x: number,
-    y: number,
+  declare export class MapPoint {
+    x: number;
+    y: number;
+
+    copy: () => MapPoint;
+    equals: (MapPoint) => boolean;
+    toCoordinate: () => Coordinate;
+  }
+
+  declare export class MapSize {
+    width: number;
+    height: number;
+
+    copy: () => MapSize;
+    equals: (MapSize) => boolean;
+  }
+
+  declare export class MapRect {
+    origin: MapPoint;
+    size: MapSize;
+
+    maxX: () => number;
+    maxY: () => number;
+
+    midX: () => number;
+    midY: () => number;
+
+    minX: () => number;
+    minY: () => number;
+
+    copy: () => MapRect;
+    equals: (MapRect) => boolean;
 
-    copy: () => MapPoint,
-    equals: (MapPoint) => boolean,
-    toCoordinate: () => Coordinate,
+    scale: (scaleFactor: number, scaleCenter: MapPoint) => MapRect;
+    toCoordinateRegion: () => CoordinateRegion;
   }
 
   declare export class Coordinate {
@@ -219,5 +244,8 @@ declare module 'mapkit' {
       center: Coordinate,
       span: CoordinateSpan,
     ): CoordinateRegion;
+    MapPoint(x: number, y: number): MapPoint;
+    MapRect(x: number, y: number, width: number, height: number): MapRect;
+    MapSize(width: number, height: number): MapSize;
   }
 }

src/index.js

@@ -17,6 +17,7 @@ import invariant from 'invariant'
 import ErrorBoundry from './ErrorBoundry'
 
 type NumberTuple = [number, number]
+type Rect = [number, number, number, number]
 type PaddingType = number | PaddingOptions
 
 type Props = {
@@ -34,11 +35,11 @@ type Props = {
   // Manipulating the Visible Portion of the Map
   center?: NumberTuple,
   span?: NumberTuple,
+  mapRect?: Rect,
   animateViewChange: boolean,
   rotation?: number,
   animateRotationChange: boolean,
   // visibleMapRect
-  // animateMapRectChange
 
   // Configuring the Map's Appearance
   mapType: MapType,
@@ -84,7 +85,7 @@ class MapKit extends React.Component<Props, State> {
     showsUserLocationControl: false,
     showsPointsOfInterest: true,
     showsScale: 'hidden',
-    animateCenterChange: true,
+    animateViewChange: true,
     isRotationEnabled: true,
     isScrollEnabled: true,
     isZoomEnabled: true,
@@ -158,37 +159,55 @@ class MapKit extends React.Component<Props, State> {
     this.map.showsUserLocation = props.showsUserLocation
     this.map.tracksUserLocation = props.tracksUserLocation
 
-    // Map Center
-    let newCenter = this.createCoordinate(0, 0)
-    let newSpan
+    // Map View Area
 
-    if (props.center) {
+    if (props.mapRect) {
+      let newRect
       try {
-        newCenter = this.createCoordinate(props.center[0], props.center[1])
+        newRect = this.createMapRect(
+          props.mapRect[0],
+          props.mapRect[1],
+          props.mapRect[2],
+          props.mapRect[3],
+        )
       } catch (e) {
         console.warn(e.message)
       }
-    }
-
-    if (props.span) {
-      try {
-        newSpan = this.createCoordinateSpan(props.span[0], props.span[1])
-      } catch (e) {
-        console.warn(e.message)
+      if (newRect && !newRect.equals(this.map.visibleMapRect)) {
+        this.map.setVisibleMapRectAnimated(newRect, props.animateViewChange)
       }
-    }
+    } else {
+      let newCenter = this.createCoordinate(0, 0)
+      let newSpan
+
+      if (props.center) {
+        try {
+          newCenter = this.createCoordinate(props.center[0], props.center[1])
+        } catch (e) {
+          console.warn(e.message)
+        }
+
+        if (props.span) {
+          try {
+            newSpan = this.createCoordinateSpan(props.span[0], props.span[1])
+          } catch (e) {
+            console.warn(e.message)
+          }
+        }
 
-    if (newSpan) {
-      // if we have a span we'll set a region
-      const newRegion = this.createCoordinateRegion(newCenter, newSpan)
+        if (newSpan) {
+          // if we have a span we'll set a region
+          const newRegion = this.createCoordinateRegion(newCenter, newSpan)
 
-      if (!newRegion.equals(this.map.region)) {
-        this.map.setRegionAnimated(newRegion, props.animateViewChange)
-      }
-    } else {
-      // otherwise we just set the center
-      if (!newCenter.equals(this.map.center)) {
-        this.map.setCenterAnimated(newCenter, props.animateViewChange)
+          if (!newRegion.equals(this.map.region)) {
+            this.map.setRegionAnimated(newRegion, props.animateViewChange)
+          }
+        } else {
+          // otherwise we just set the center
+          if (!newCenter.equals(this.map.center)) {
+            this.map.setCenterAnimated(newCenter, props.animateViewChange)
+          }
+        }
       }
     }
 
@@ -227,6 +246,14 @@ class MapKit extends React.Component<Props, State> {
     return new mapkit.CoordinateRegion(center, span)
   }
 
+  createMapPoint = (x: number, y: number) => {
+    return new mapkit.MapPoint(x, y)
+  }
+
+  createMapRect = (x: number, y: number, width: number, height: number) => {
+    return new mapkit.MapRect(x, y, width, height)
+  }
+
   shouldComponentUpdate(nextProps: Props, nextState: State) {
     // make sure we have at least one init prop
     this.checkProps(nextProps)
@@ -275,6 +302,7 @@ class MapKit extends React.Component<Props, State> {
 
       center,
       span,
+      mapRect,
       animateViewChange,
 
       rotation,

stories/index.stories.js

@@ -7,16 +7,15 @@ import devToken from '../devToken'
 import MapKit from '../src'
 
 storiesOf('MapKit', module)
-  .add('all props', () => (
+  .add('Map Controls', () => (
     <MapKit
       style={{ width: '100vw', height: '100vh' }}
-      token={text('token', devToken)}
+      token={devToken}
       mapType={select(
         'mapType',
         { standard: 'standard', satellite: 'satellite', hybrid: 'hybrid' },
         'standard',
       )}
-      padding={number('padding', 0)}
       showsCompass={select(
         'showsCompass',
         { adaptive: 'adaptive', hidden: 'hidden', visible: 'visible' },
@@ -32,6 +31,44 @@ storiesOf('MapKit', module)
         'hidden',
       )}
       tintColor={text('tintColor', '')}
+      isRotationEnabled={boolean('isRotationEnabled', true)}
+      isScrollEnabled={boolean('isScrollEnabled', true)}
+      isZoomEnabled={boolean('isZoomEnabled', true)}
+      showsUserLocation={boolean('showsUserLocation', false)}
+      tracksUserLocation={boolean('tracksUserLocation', false)}
+    />
+  ))
+  .add('Map Padding (single)', () => (
+    <MapKit
+      style={{ width: '100vw', height: '100vh' }}
+      token={devToken}
+      padding={number('padding', 0)}
+    />
+  ))
+  .add('Map Padding (individual)', () => (
+    <MapKit
+      style={{ width: '100vw', height: '100vh' }}
+      token={devToken}
+      padding={{
+        top: number('padding top', 0),
+        right: number('padding right', 0),
+        bottom: number('padding bottom', 0),
+        left: number('padding left', 0),
+      }}
+    />
+  ))
+  .add('Rotation', () => (
+    <MapKit
+      style={{ width: '100vw', height: '100vh' }}
+      token={devToken}
+      rotation={number('rotation', 0)}
+      animateRotationChange={boolean('animateRotationChange', true)}
+    />
+  ))
+  .add('View (Center and Span)', () => (
+    <MapKit
+      style={{ width: '100vw', height: '100vh' }}
+      token={devToken}
       center={[
         number('center latitude', 47.6063889),
         number('center longitude', -122.3308333),
@@ -41,24 +78,18 @@ storiesOf('MapKit', module)
         number('span longitude delta', 0.016),
       ]}
       animateViewChange={boolean('animateViewChange', true)}
-      isRotationEnabled={boolean('isRotationEnabled', true)}
-      isScrollEnabled={boolean('isScrollEnabled', true)}
-      isZoomEnabled={boolean('isZoomEnabled', true)}
-      showsUserLocation={boolean('showsUserLocation', false)}
-      tracksUserLocation={boolean('tracksUserLocation', false)}
-      rotation={number('rotation', 0)}
-      animateRotationChange={boolean('animateRotationChange', true)}
     />
   ))
-  .add('individual padding values', () => (
+  .add('View (MapRect)', () => (
     <MapKit
       style={{ width: '100vw', height: '100vh' }}
       token={devToken}
-      padding={{
-        top: number('top', 0),
-        right: number('right', 0),
-        bottom: number('bottom', 0),
-        left: number('left', 0),
-      }}
+      mapRect={[
+        number('x', 0.155),
+        number('y', 0.345),
+        number('width', 0.03),
+        number('height', 0.04),
+      ]}
+      animateViewChange={boolean('animateViewChange', true)}
     />
   ))