v0.2.1

Author: IcculusC

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-hex-engine",
   "description": "Hexagon Map Editor and Game Engine",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "lib/index.js",
   "author": "IcculusC",
   "repository": "IcculusC/react-hex-engine",
@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
+    "flatbush": "^3.1.0",
     "memoize-one": "^4.0.2"
   },
   "files": [

src/HexGrid.js

@@ -31,7 +31,7 @@ class HexGrid extends Component {
   };
 
   render() {
-    const { classes, height, viewBox, width } = this.props;
+    const { children, classes, height, viewBox, width } = this.props;
     return (
       <svg
         className={classNames("grid", classes.grid)}
@@ -41,7 +41,7 @@ class HexGrid extends Component {
         width={width}
         xmlns="http://www.w3.org/2000/svg"
       >
-        <ViewBoxProvider value={viewBox}>{this.props.children}</ViewBoxProvider>
+        <ViewBoxProvider value={viewBox}>{children}</ViewBoxProvider>
       </svg>
     );
   }

src/Hexagon/Hexagon.js src/Hexagon.jssrc/Hexagon/Hexagon.js renamed to src/Hexagon.js

@@ -1,10 +1,11 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import Hex from "../models/Hex";
-import HexUtils from "../HexUtils";
-import Point from "../models/Point";
-import { withExpandedLayout } from "../Context";
+import Hex from "./models/Hex";
+import HexUtils from "./HexUtils";
+import Point from "./models/Point";
+import Text from "./Text";
+import { withExpandedLayout } from "./Context";
 
 class Hexagon extends Component {
   static propTypes = {
@@ -26,7 +27,9 @@ class Hexagon extends Component {
     r: PropTypes.number.isRequired,
     s: PropTypes.number.isRequired,
     selected: PropTypes.bool,
-    showCoordinates: PropTypes.bool
+    showCoordinates: PropTypes.bool,
+    text: PropTypes.string,
+    TextProps: PropTypes.objectOf(PropTypes.any)
   };
 
   static defaultProps = {
@@ -40,9 +43,12 @@ class Hexagon extends Component {
       q: "",
       r: "",
       s: "",
-      selected: ""
+      selected: "",
+      text: ""
     },
-    showCoordinates: false
+    showCoordinates: false,
+    text: "",
+    TextProps: {}
   };
 
   static getCoordinateTextOffset(
@@ -58,10 +64,22 @@ class Hexagon extends Component {
     );
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (prevState.points !== nextProps.points) {
+      const { layout, points, q, r, s } = nextProps;
+      const hex = new Hex(q, r, s);
+      const pixel = HexUtils.hexToPixel(hex, nextProps.layout);
+      return { hex, pixel, layout, points };
+    }
+    return null;
+  }
+
   state = {
     hex: {},
     hovered: false,
-    pixel: {}
+    layout: {},
+    pixel: {},
+    points: ""
   };
 
   constructor(props) {
@@ -145,9 +163,11 @@ class Hexagon extends Component {
       r,
       s,
       selected,
-      showCoordinates
+      showCoordinates,
+      text,
+      TextProps
     } = this.props;
-    const { hex, hovered, pixel } = this.state;
+    const { hovered, pixel } = this.state;
     let qPixel, rPixel, sPixel;
     if (showCoordinates) {
       qPixel = Hexagon.getCoordinateTextOffset(3, layout, {
@@ -186,7 +206,12 @@ class Hexagon extends Component {
         >
           <polygon className={classes.polygon} points={points} />
           {this.props.children}
-          {showCoordinates && (
+          {text ? (
+            <Text className={classes.text} {...TextProps}>
+              {text}
+            </Text>
+          ) : null}
+          {showCoordinates ? (
             <React.Fragment>
               <text
                 {...qPixel}
@@ -213,7 +238,7 @@ class Hexagon extends Component {
                 {s}
               </text>
             </React.Fragment>
-          )}
+          ) : null}
         </g>
       </g>
     );

src/Layout.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import memoize from "memoize-one";
-import Hexagon from "./Hexagon/Hexagon";
+import Hex from "./models/Hex";
 import HexUtils from "./HexUtils";
 import Orientation from "./models/Orientation";
 import Point from "./models/Point";
@@ -33,48 +33,51 @@ export class Layout extends Component {
     return new Point(size.x * Math.cos(angle), size.y * Math.sin(angle));
   }
 
-  // TODO Refactor
   static calculateCoordinates(orientation, size) {
-    const corners = [];
     const center = new Point(0, 0);
-
-    Array.from(new Array(6), (x, i) => {
+    return [...Array(6).keys()].map((_, i) => {
       const offset = Layout.getPointOffset(i, orientation, size);
-      const point = new Point(center.x + offset.x, center.y + offset.y);
-      return corners.push(point);
+      return new Point(center.x + offset.x, center.y + offset.y);
     });
+  }
+
+  static filterViewBox(layout, viewBox) {
+    const { height, width, x, y } = viewBox;
+    const x_ = x - layout.size.x + layout.spacing + 1;
+    const y_ = y - layout.size.y + layout.spacing + 1;
+    const width_ = width + layout.size.x + layout.spacing + 1;
+    const height_ = height + layout.size.y + layout.spacing + 1;
 
-    return corners;
+    return {
+      x: x_,
+      y: y_,
+      width: width_,
+      height: height_
+    };
   }
 
   filterChildren = memoize((children, layout, viewBox) => {
     const childrenArray = React.Children.toArray(children);
-    const { height, width, x, y } = viewBox;
-    const cornerCoords = Layout.calculateCoordinates(
-      layout.orientation,
-      layout.size
-    );
+    const { x, y, width, height } = Layout.filterViewBox(layout, viewBox);
+
     return childrenArray.filter(child => {
       if (!child.props) {
         return true;
       }
       if (
-        child.type === Hexagon ||
-        (child.props.q !== undefined &&
-          child.props.r !== undefined &&
-          child.props.s !== undefined)
+        child.props !== undefined &&
+        child.props.q !== undefined &&
+        child.props.r !== undefined &&
+        child.props.s !== undefined
       ) {
-        const point = HexUtils.hexToPixel(child.props, layout);
-        const corners = cornerCoords.map(
-          coord => new Point(coord.x + point.x, coord.y + point.y)
+        const { q, r, s } = child.props;
+        const point = HexUtils.hexToPixel(new Hex(q, r, s), layout);
+        return (
+          point.x > x &&
+          point.x < width + x &&
+          point.y > y &&
+          point.y < height + y
         );
-        return corners.filter(
-          corner =>
-            corner.x > x &&
-            corner.x < width + x &&
-            corner.y > y &&
-            corner.y < +height + y
-        ).length;
       }
       return true;
     });

src/Hexagon/Text.js src/Text.jssrc/Hexagon/Text.js renamed to src/Text.js

@@ -1,23 +1,22 @@
-import GridGenerator from "./GridGenerator";
-import HexGrid from "./HexGrid";
-import HexUtils from "./HexUtils";
-import Layout from "./Layout";
-import Path from "./Path";
-import Pattern from "./Pattern";
-
-import Hexagon from "./Hexagon/Hexagon";
-import Text from "./Hexagon/Text";
-
-import Hex from "./models/Hex";
-
 export {
-  GridGenerator,
-  HexGrid,
-  HexUtils,
-  Layout,
-  Path,
-  Pattern,
-  Hexagon,
-  Text,
-  Hex
-};
+  LayoutConsumer,
+  LayoutContext,
+  LayoutProvider,
+  ViewBoxConsumer,
+  ViewBoxContext,
+  ViewBoxProvider,
+  withExpandedLayout,
+  withLayout,
+  withViewBox
+} from "./Context";
+export { default as GridGenerator } from "./GridGenerator";
+export { default as Hex } from "./models/Hex";
+export { default as Hexagon } from "./Hexagon";
+export { default as HexGrid } from "./HexGrid";
+export { default as HexUtils } from "./HexUtils";
+export { default as Layout } from "./Layout";
+export { default as Orientation } from "./models/Orientation";
+export { default as Path } from "./Path";
+export { default as Pattern } from "./Pattern";
+export { default as Point } from "./models/Point";
+export { default as Text } from "./Text";

src/index.js

@@ -9,6 +9,16 @@ class Hex {
     const { q, r, s } = this;
     return `${q},${r},${s}`;
   }
+
+  toJSON() {
+    const { q, r, s } = this;
+    return { q, r, s };
+  }
+
+  static fromJSON(obj) {
+    const { q, r, s } = obj;
+    return new Hex(q, r, s);
+  }
 }
 
 export default Hex;

src/models/Hex.js

@@ -8,6 +8,16 @@ class Point {
     const { x, y } = this;
     return `${x},${y}`;
   }
+
+  toJSON() {
+    const { x, y } = this;
+    return { x, y };
+  }
+
+  static fromJSON(obj) {
+    const { x, y } = obj;
+    return new Point(x, y);
+  }
 }
 
 export default Point;

src/models/Point.js

@@ -2,8 +2,8 @@ import React from "react";
 import renderer from "react-test-renderer";
 import { mount } from "enzyme";
 
-import Layout from "../../../src/Layout";
-import Hexagon from "../../../src/Hexagon/Hexagon";
+import Layout from "../../src/Layout";
+import Hexagon from "../../src/Hexagon";
 
 test("Hexagon should render correctly with default props", () => {
   const tree = renderer
@@ -24,6 +24,23 @@ test("Hexagon should render correctly with default props", () => {
   expect(tree).toMatchSnapshot();
 });
 
+test("Hexagon should render correctly with text", () => {
+  const tree = renderer
+    .create(
+      <Layout
+        className={"test1"}
+        size={{ x: 6, y: 6 }}
+        flat={false}
+        spacing={1.1}
+        origin={{ x: 0, y: 0 }}
+      >
+        <Hexagon q={0} r={0} s={0} text="test" />
+      </Layout>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
 test("Hexagon should work", () => {
   let playDoh;
   const wrapper = mount(