react-simple-maps - npm Package Compare versions

Comparing version 0.8.4 to 0.9.0

lib/Annotation.js

@@ -44,6 +44,8 @@ "use strict";
           strokeWidth = _props.strokeWidth,
-          children = _props.children;
+          children = _props.children,
+          curve = _props.curve,
+          markerEnd = _props.markerEnd;
 
 
-      var connectorPath = (0, _utils.createConnectorPath)(null, [-dx / zoom, -dy / zoom]);
+      var connectorPath = (0, _utils.createConnectorPath)(null, [-dx / zoom, -dy / zoom], curve);
 
@@ -59,3 +61,9 @@ return _react2.default.createElement(
         children,
-        _react2.default.createElement("path", { d: connectorPath, stroke: stroke, strokeWidth: strokeWidth })
+        _react2.default.createElement("path", {
+          d: connectorPath,
+          stroke: stroke,
+          strokeWidth: strokeWidth,
+          fill: "none",
+          markerEnd: markerEnd
+        })
       );
@@ -69,2 +77,4 @@ }
 Annotation.defaultProps = {
+  curve: 0,
+  markerEnd: "none",
   componentIdentifier: "Annotation",
@@ -71,0 +81,0 @@ stroke: "#000000",

lib/ComposableMap.js

@@ -61,3 +61,4 @@ "use strict";
           showCenter = _props2.showCenter,
-          children = _props2.children;
+          children = _props2.children,
+          aspectRatio = _props2.aspectRatio;
 
@@ -71,3 +72,4 @@
           className: "rsm-svg",
-          style: style },
+          style: style,
+          preserveAspectRatio: aspectRatio },
         _react2.default.cloneElement(this.props.children, {
@@ -95,5 +97,6 @@ projection: this.projection,
   projection: "times",
-  projectionConfig: _projectionConfig2.default
+  projectionConfig: _projectionConfig2.default,
+  aspectRatio: "xMidYMid"
 };
 
 exports.default = ComposableMap;

lib/Geography.js

@@ -214,4 +214,4 @@ "use strict";
         onMouseUp: this.handleMouseUp,
-        onFocus: tabable && this.handleFocus,
-        onBlur: tabable && this.handleBlur,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
         tabIndex: tabable ? 0 : -1
@@ -218,0 +218,0 @@ }, restProps));

lib/index.js

@@ -70,2 +70,11 @@ "use strict";
 
+var _Annotations = require("./Annotations");
+
+Object.defineProperty(exports, "Annotations", {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Annotations).default;
+  }
+});
+
 var _Graticule = require("./Graticule");
@@ -72,0 +81,0 @@

lib/utils.js

@@ -67,3 +67,3 @@ "use strict";
       projection: props.projection
-    }) : isChildOfType(children, "Markers") || isChildOfType(children, "Annotation") || isChildOfType(child, "Graticule") ? _react2.default.cloneElement(children, {
+    }) : isChildOfType(children, "Markers") || isChildOfType(children, "Annotations") || isChildOfType(children, "Annotation") || isChildOfType(child, "Graticule") ? _react2.default.cloneElement(children, {
       projection: props.projection,
@@ -78,3 +78,3 @@ zoom: props.zoom
         projection: props.projection
-      }) : isChildOfType(child, "Markers") || isChildOfType(child, "Annotation") || isChildOfType(child, "Graticule") ? _react2.default.cloneElement(child, {
+      }) : isChildOfType(child, "Markers") || isChildOfType(child, "Annotations") || isChildOfType(child, "Annotation") || isChildOfType(child, "Graticule") ? _react2.default.cloneElement(child, {
         key: "zoomable-child-" + i,
@@ -96,4 +96,6 @@ projection: props.projection,
 
-function createConnectorPath(connectorType, endPoint) {
-  return "M0,0 L" + endPoint[0] + "," + endPoint[1];
+function createConnectorPath(connectorType, endPoint, curve) {
+  var e0 = endPoint[0];
+  var e1 = endPoint[1];
+  return "M0,0 Q " + (curve + 1) / 2 * e0 + "," + (e1 - (curve + 1) / 2 * e1) + " " + e0 + "," + e1;
 }
@@ -100,0 +102,0 @@

lib/ZoomableGroup.js

@@ -57,3 +57,6 @@ "use strict";
     _this.handleMouseDown = _this.handleMouseDown.bind(_this);
+    _this.handleTouchStart = _this.handleTouchStart.bind(_this);
+    _this.handleTouchMove = _this.handleTouchMove.bind(_this);
     _this.handleResize = _this.handleResize.bind(_this);
+
     return _this;
@@ -69,9 +72,14 @@ }
       if (this.props.disablePanning) return;
+      if (!this.state.isPressed) return;
+      this.setState({
+        mouseX: pageX - this.state.mouseXStart,
+        mouseY: pageY - this.state.mouseYStart
+      });
+    }
+  }, {
+    key: "handleTouchMove",
+    value: function handleTouchMove(_ref2) {
+      var touches = _ref2.touches;
 
-      if (this.state.isPressed) {
-        this.setState({
-          mouseX: pageX - this.state.mouseXStart,
-          mouseY: pageY - this.state.mouseYStart
-        });
-      }
+      this.handleMouseMove(touches[0]);
     }
@@ -82,33 +90,78 @@ }, {
       if (this.props.disablePanning) return;
-      if (this.state.isPressed) {
-        this.setState({
-          isPressed: false
-        });
-      }
+      if (!this.state.isPressed) return;
+      this.setState({
+        isPressed: false
+      });
+      if (!this.props.onMoveEnd) return;
+      var _state = this.state,
+          mouseX = _state.mouseX,
+          mouseY = _state.mouseY,
+          resizeFactorX = _state.resizeFactorX,
+          resizeFactorY = _state.resizeFactorY;
+      var _props = this.props,
+          zoom = _props.zoom,
+          width = _props.width,
+          height = _props.height,
+          projection = _props.projection,
+          onMoveEnd = _props.onMoveEnd;
+
+      var x = width / 2 - mouseX * resizeFactorX / zoom;
+      var y = height / 2 - mouseY * resizeFactorY / zoom;
+      var newCenter = projection().invert([x, y]);
+      onMoveEnd(newCenter);
     }
   }, {
     key: "handleMouseDown",
-    value: function handleMouseDown(_ref2) {
-      var pageX = _ref2.pageX,
-          pageY = _ref2.pageY;
+    value: function handleMouseDown(_ref3) {
+      var pageX = _ref3.pageX,
+          pageY = _ref3.pageY;
 
       if (this.props.disablePanning) return;
+      var _state2 = this.state,
+          mouseX = _state2.mouseX,
+          mouseY = _state2.mouseY,
+          resizeFactorX = _state2.resizeFactorX,
+          resizeFactorY = _state2.resizeFactorY;
+      var _props2 = this.props,
+          zoom = _props2.zoom,
+          width = _props2.width,
+          height = _props2.height,
+          projection = _props2.projection,
+          onMoveStart = _props2.onMoveStart;
+
       this.setState({
         isPressed: true,
-        mouseXStart: pageX - this.state.mouseX,
-        mouseYStart: pageY - this.state.mouseY
+        mouseXStart: pageX - mouseX,
+        mouseYStart: pageY - mouseY
       });
+      if (!onMoveStart) return;
+      var x = width / 2 - mouseX * resizeFactorX / zoom;
+      var y = height / 2 - mouseY * resizeFactorY / zoom;
+      var currentCenter = projection().invert([x, y]);
+      onMoveStart(currentCenter);
     }
   }, {
+    key: "handleTouchStart",
+    value: function handleTouchStart(_ref4) {
+      var touches = _ref4.touches;
+
+      this.handleMouseDown(touches[0]);
+    }
+  }, {
+    key: "preventTouchScroll",
+    value: function preventTouchScroll(evt) {
+      evt.preventDefault();
+    }
+  }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
-      var _state = this.state,
-          mouseX = _state.mouseX,
-          mouseY = _state.mouseY,
-          resizeFactorX = _state.resizeFactorX,
-          resizeFactorY = _state.resizeFactorY;
-      var _props = this.props,
-          projection = _props.projection,
-          center = _props.center,
-          zoom = _props.zoom;
+      var _state3 = this.state,
+          mouseX = _state3.mouseX,
+          mouseY = _state3.mouseY,
+          resizeFactorX = _state3.resizeFactorX,
+          resizeFactorY = _state3.resizeFactorY;
+      var _props3 = this.props,
+          projection = _props3.projection,
+          center = _props3.center,
+          zoom = _props3.zoom;
 
@@ -128,7 +181,7 @@
     value: function handleResize() {
-      var _props2 = this.props,
-          width = _props2.width,
-          height = _props2.height,
-          projection = _props2.projection,
-          zoom = _props2.zoom;
+      var _props4 = this.props,
+          width = _props4.width,
+          height = _props4.height,
+          projection = _props4.projection,
+          zoom = _props4.zoom;
 
@@ -152,7 +205,7 @@
     value: function componentDidMount() {
-      var _props3 = this.props,
-          width = _props3.width,
-          height = _props3.height,
-          projection = _props3.projection,
-          zoom = _props3.zoom;
+      var _props5 = this.props,
+          width = _props5.width,
+          height = _props5.height,
+          projection = _props5.projection,
+          zoom = _props5.zoom;
 
@@ -172,2 +225,3 @@
       window.addEventListener('mouseup', this.handleMouseUp);
+      this.zoomableGroupNode.addEventListener("touchmove", this.preventTouchScroll);
     }
@@ -179,2 +233,3 @@ }, {
       window.removeEventListener("mouseup", this.handleMouseUp);
+      this.zoomableGroupNode.removeEventListener("touchmove", this.preventTouchScroll);
     }
@@ -186,14 +241,14 @@ }, {
 
-      var _props4 = this.props,
-          width = _props4.width,
-          height = _props4.height,
-          zoom = _props4.zoom,
-          style = _props4.style,
-          projection = _props4.projection,
-          children = _props4.children;
-      var _state2 = this.state,
-          mouseX = _state2.mouseX,
-          mouseY = _state2.mouseY,
-          resizeFactorX = _state2.resizeFactorX,
-          resizeFactorY = _state2.resizeFactorY;
+      var _props6 = this.props,
+          width = _props6.width,
+          height = _props6.height,
+          zoom = _props6.zoom,
+          style = _props6.style,
+          projection = _props6.projection,
+          children = _props6.children;
+      var _state4 = this.state,
+          mouseX = _state4.mouseX,
+          mouseY = _state4.mouseY,
+          resizeFactorX = _state4.resizeFactorX,
+          resizeFactorY = _state4.resizeFactorY;
 
@@ -211,2 +266,5 @@
           onMouseDown: this.handleMouseDown,
+          onTouchStart: this.handleTouchStart,
+          onTouchMove: this.handleTouchMove,
+          onTouchEnd: this.handleMouseUp,
           style: style
@@ -213,0 +271,0 @@ },

package.json

 {
   "name": "react-simple-maps",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "An svg map component built with and for React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -110,2 +110,3 @@ # react-simple-maps
 - [`<Marker />`](#Marker-component)
+- [`<Annotations />`](#Annotations-component)
 - [`<Annotation />`](#Annotation-component)
@@ -418,2 +419,6 @@ - [`<Graticule />`](#Graticule-component)
 
+#### <a name="Annotations-component"></a> `<Annotations />`
+
+`<Annotations />` is a simple wrapper component for the individual annotations.
+
 #### <a name="Annotation-component"></a> `<Annotation />`
@@ -434,2 +439,4 @@
 | style               | Object          | {}                             |
+| markerEnd           | String          | "none"                         |
+| curve               | Number          | 0                              |
 
@@ -450,2 +457,86 @@ ##### Example annotation
 
+You can also use the `<Annotations />` component to iterate over annotations.
+
+```js
+...
+<Annotations>
+  {
+    annotations.map((annotation, i) => (
+      <Annotation
+        key={i}
+        dx={ -30 }
+        dy={ 30 }
+        subject={ annotation.coordinates }
+        strokeWidth={ 1 }
+        >
+        <text>
+          { annotation.label }
+        </text>
+      </Annotation>
+    ))
+  }
+</Annotations>
+...
+```
+
+##### Annotations with a curved connector
+
+The following example shows how to add an annotation with a curved connector for the city of Zurich on a world map. The `curve` prop can take either a positive number (e.g. 0.5), or a negative number (e.g. -0.5) to create connectors with varying curve intensity. The default value of 0 will connect the annotation through a straight line with no curve.
+
+```js
+...
+<Annotation
+  dx={ -30 }
+  dy={ 30 }
+  subject={ [ 8.5, 47.3 ] }
+  strokeWidth={ 1 }
+  curve={0.5}
+  >
+  <text>
+    { "Zurich" }
+  </text>
+</Annotation>
+...
+```
+
+##### Annotations with an arrow connector
+
+To make the connector an arrow, you can pass a custom SVG marker id to the `markerEnd` prop of the `<Annotation />` component.
+
+```js
+...
+<Annotation
+  dx={ -30 }
+  dy={ 30 }
+  subject={ [ 8.5, 47.3 ] }
+  stroke="#000"
+  strokeWidth={ 1 }
+  curve={0.5}
+  markerEnd="url(#custom-arrow)"
+  >
+  <defs>
+   <marker
+     id="custom-arrow"
+     markerWidth={10}
+     markerHeight={10}
+     refX={7}
+     refY={5}
+     orient="auto"
+     markerUnits="userSpaceOnUse"
+     >
+     <path
+       d="M1,1 L7,5 L1,9"
+       fill="none"
+       stroke="#000"
+       strokeWidth={1}
+     />
+   </marker>
+  </defs>
+  <text>
+    { "Zurich" }
+  </text>
+</Annotation>
+...
+```
+
 #### <a name="Graticule-component"></a> `<Graticule />`
@@ -452,0 +543,0 @@

src/Annotation.js

@@ -22,5 +22,7 @@
       children,
+      curve,
+      markerEnd,
     } = this.props
 
-    const connectorPath = createConnectorPath(null, [-dx/zoom,-dy/zoom])
+    const connectorPath = createConnectorPath(null, [-dx/zoom,-dy/zoom], curve)
 
@@ -38,3 +40,9 @@ return (
         { children }
-        <path d={ connectorPath } stroke={ stroke } strokeWidth={ strokeWidth } />
+        <path
+          d={ connectorPath }
+          stroke={ stroke }
+          strokeWidth={ strokeWidth }
+          fill="none"
+          markerEnd={ markerEnd }
+        />
       </g>
@@ -46,2 +54,4 @@ )
 Annotation.defaultProps = {
+  curve: 0,
+  markerEnd: "none",
   componentIdentifier: "Annotation",
@@ -48,0 +58,0 @@ stroke: "#000000",

src/ComposableMap.js

@@ -17,3 +17,3 @@
       width,
-      height,
+      height
     } = this.props
@@ -33,2 +33,3 @@
       children,
+      aspectRatio
     } = this.props
@@ -41,3 +42,4 @@
            className="rsm-svg"
-           style={ style }>
+           style={ style }
+           preserveAspectRatio={ aspectRatio }>
         {
@@ -68,4 +70,5 @@ React.cloneElement(this.props.children, {
   projectionConfig: defaultProjectionConfig,
+  aspectRatio: "xMidYMid"
 }
 
 export default ComposableMap

src/Geography.js

@@ -160,4 +160,4 @@
         onMouseUp={ this.handleMouseUp }
-        onFocus={ tabable && this.handleFocus }
-        onBlur={ tabable && this.handleBlur }
+        onFocus={ this.handleFocus }
+        onBlur={ this.handleBlur }
         tabIndex={ tabable ? 0 : -1 }
@@ -164,0 +164,0 @@ { ...restProps }

src/index.js

@@ -9,2 +9,3 @@
 export { default as Annotation } from "./Annotation"
+export { default as Annotations } from "./Annotations"
 export { default as Graticule } from "./Graticule"

src/utils.js

@@ -46,3 +46,4 @@
       projection: props.projection,
-    }) : (isChildOfType(children, "Markers") || isChildOfType(children, "Annotation") || isChildOfType(child, "Graticule") ? React.cloneElement(children, {
+    }) : (isChildOfType(children, "Markers") || isChildOfType(children, "Annotations") || isChildOfType(children, "Annotation") || isChildOfType(child, "Graticule") ?
+    React.cloneElement(children, {
       projection: props.projection,
@@ -59,3 +60,3 @@ zoom: props.zoom,
           projection: props.projection,
-        }) : (isChildOfType(child, "Markers") || isChildOfType(child, "Annotation") || isChildOfType(child, "Graticule") ?
+        }) : (isChildOfType(child, "Markers") || isChildOfType(child, "Annotations") || isChildOfType(child, "Annotation") || isChildOfType(child, "Graticule") ?
         React.cloneElement(child, {
@@ -65,3 +66,3 @@ key: `zoomable-child-${i}`,
           zoom: props.zoom,
-        }): child)
+        }) : child)
     })
@@ -77,4 +78,6 @@ }
 
-export function createConnectorPath(connectorType, endPoint) {
-  return `M0,0 L${endPoint[0]},${endPoint[1]}`
+export function createConnectorPath(connectorType, endPoint, curve) {
+  const e0 = endPoint[0]
+  const e1 = endPoint[1]
+  return `M0,0 Q ${(curve + 1) / 2 * e0},${e1-((curve + 1) / 2 * e1)} ${e0},${e1}`
 }
@@ -81,0 +84,0 @@

src/ZoomableGroup.js

@@ -40,30 +40,53 @@
     this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.handleTouchStart = this.handleTouchStart.bind(this)
+    this.handleTouchMove = this.handleTouchMove.bind(this)
     this.handleResize = this.handleResize.bind(this)
+
   }
   handleMouseMove({ pageX, pageY }) {
     if (this.props.disablePanning) return
-
-    if(this.state.isPressed) {
-      this.setState({
-        mouseX: pageX - this.state.mouseXStart,
-        mouseY: pageY - this.state.mouseYStart,
-      })
-    }
+    if (!this.state.isPressed) return
+    this.setState({
+      mouseX: pageX - this.state.mouseXStart,
+      mouseY: pageY - this.state.mouseYStart,
+    })
   }
+  handleTouchMove({ touches }) {
+    this.handleMouseMove(touches[0])
+  }
   handleMouseUp() {
     if (this.props.disablePanning) return
-    if (this.state.isPressed) {
-      this.setState({
-        isPressed: false,
-      })
-    }
+    if (!this.state.isPressed) return
+    this.setState({
+      isPressed: false,
+    })
+    if (!this.props.onMoveEnd) return
+    const { mouseX, mouseY, resizeFactorX, resizeFactorY } = this.state
+    const { zoom, width, height, projection, onMoveEnd } = this.props
+    const x = width / 2 - (mouseX * resizeFactorX / zoom)
+    const y = height / 2 - (mouseY * resizeFactorY / zoom)
+    const newCenter = projection().invert([ x, y ])
+    onMoveEnd(newCenter)
   }
   handleMouseDown({ pageX, pageY }) {
     if (this.props.disablePanning) return
+    const { mouseX, mouseY, resizeFactorX, resizeFactorY } = this.state
+    const { zoom, width, height, projection, onMoveStart } = this.props
     this.setState({
       isPressed: true,
-      mouseXStart: pageX - this.state.mouseX,
-      mouseYStart: pageY - this.state.mouseY,
+      mouseXStart: pageX - mouseX,
+      mouseYStart: pageY - mouseY,
     })
+    if (!onMoveStart) return
+    const x = width / 2 - (mouseX * resizeFactorX / zoom)
+    const y = height / 2 - (mouseY * resizeFactorY / zoom)
+    const currentCenter = projection().invert([ x, y ])
+    onMoveStart(currentCenter)
   }
+  handleTouchStart({ touches }) {
+    this.handleMouseDown(touches[0])
+  }
+  preventTouchScroll(evt) {
+    evt.preventDefault()
+  }
   componentWillReceiveProps(nextProps) {
@@ -113,2 +136,3 @@ const { mouseX, mouseY, resizeFactorX, resizeFactorY } = this.state
     window.addEventListener('mouseup', this.handleMouseUp)
+    this.zoomableGroupNode.addEventListener("touchmove", this.preventTouchScroll)
   }
@@ -118,5 +142,5 @@ componentWillUnmount() {
     window.removeEventListener("mouseup", this.handleMouseUp)
+    this.zoomableGroupNode.removeEventListener("touchmove", this.preventTouchScroll)
   }
   render() {
-
     const {
@@ -152,2 +176,5 @@ width,
          onMouseDown={ this.handleMouseDown }
+         onTouchStart={ this.handleTouchStart }
+         onTouchMove={ this.handleTouchMove }
+         onTouchEnd={ this.handleMouseUp }
          style={ style }
@@ -154,0 +181,0 @@ >

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

964156

increased by1.09%

Number of package files

35

increased by6.06%

Lines of code

4804

increased by4.34%

Number of lines in readme file

557

increased by19.53%

No dependency changes