v0.2.0

Author: IcculusC

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-hex-engine",
   "description": "Hexagon Map Editor and Game Engine",
-  "version": "0.1.0",
+  "version": "0.2.0-rc.10",
   "main": "lib/index.js",
   "author": "IcculusC",
   "repository": "IcculusC/react-hex-engine",
@@ -46,7 +46,8 @@
     "react-test-renderer": "^16.5.2"
   },
   "dependencies": {
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "memoize-one": "^4.0.2"
   },
   "files": [
     "lib/**/*"

src/Hexagon/Hexagon.js

@@ -3,12 +3,13 @@ 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";
 
 class Hexagon extends Component {
   static propTypes = {
     children: PropTypes.node,
-    className: PropTypes.string,
+    classes: PropTypes.objectOf(PropTypes.any),
     data: PropTypes.object,
     highlighted: PropTypes.bool,
     layout: PropTypes.objectOf(PropTypes.any).isRequired,
@@ -24,7 +25,8 @@ class Hexagon extends Component {
     q: PropTypes.number.isRequired,
     r: PropTypes.number.isRequired,
     s: PropTypes.number.isRequired,
-    selected: PropTypes.bool
+    selected: PropTypes.bool,
+    showCoordinates: PropTypes.bool
   };
 
   static defaultProps = {
@@ -35,50 +37,60 @@ class Hexagon extends Component {
       highlighted: "",
       hovered: "",
       polygon: "",
+      q: "",
+      r: "",
+      s: "",
       selected: ""
-    }
+    },
+    showCoordinates: false
   };
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const { layout, q, r, s } = nextProps;
-    const hex = new Hex(q, r, s);
-    const pixel = HexUtils.hexToPixel(hex, layout);
-
-    if (
-      (!prevState.hex && !prevState.pixel) ||
-      !(
-        HexUtils.equals(prevState.hex, hex) ||
-        (prevState.pixel.x === pixel.x && prevState.pixel.y === pixel.y)
-      )
-    ) {
-      return { hex, pixel };
-    }
-    return null;
+  static getCoordinateTextOffset(
+    corner,
+    { orientation, size },
+    offset = new Point(0, 0),
+    scale = new Point(0.75, 0.75)
+  ) {
+    const angle = (2.0 * Math.PI * (corner + 0.5)) / 6;
+    return new Point(
+      size.x * scale.x * Math.cos(angle),
+      size.y * scale.y * Math.sin(angle)
+    );
   }
 
   state = {
     hex: {},
-    hovered: false,
-    pixel: {}
+    hovered: false
   };
 
+  constructor(props) {
+    super(props);
+    const hex = new Hex(props.q, props.r, props.s);
+    const pixel = HexUtils.hexToPixel(hex, props.layout);
+    this.state = {
+      ...this.state,
+      hex,
+      pixel
+    };
+  }
+
   onClick(e) {
     if (this.props.onClick) {
-      this.props.onClick(e, this);
+      this.props.onClick(e, this.state.hex);
     }
   }
 
   onDragEnd(e) {
     if (this.props.onDragEnd) {
       e.preventDefault();
       const success = e.dataTransfer.dropEffect !== "none";
-      this.props.onDragEnd(e, this, success);
+      this.props.onDragEnd(e, this.state.hex, success);
     }
   }
 
   onDragOver(e) {
     if (this.props.onDragOver) {
-      this.props.onDragOver(e, this);
+      this.props.onDragOver(e, this.state.hex);
     }
   }
 
@@ -87,45 +99,69 @@ class Hexagon extends Component {
       const targetProps = {
         ...this.state,
         data: this.props.data,
-        fill: this.props.fill,
-        className: this.props.className
+        classes: this.props.classes
       };
       e.dataTransfer.setData("hexagon", JSON.stringify(targetProps));
-      this.props.onDragStart(e, this);
+      this.props.onDragStart(e, this.state.hex);
     }
   }
 
   onDrop(e) {
     if (this.props.onDrop) {
       e.preventDefault();
       const target = JSON.parse(e.dataTransfer.getData("hexagon"));
-      this.props.onDrop(e, this, target);
+      this.props.onDrop(e, this.state.hex, target);
     }
   }
 
   onMouseEnter(e) {
     this.setState({ hovered: true });
     if (this.props.onMouseEnter) {
-      this.props.onMouseEnter(e, this);
+      this.props.onMouseEnter(e, this.state.hex);
     }
   }
 
   onMouseLeave(e) {
     this.setState({ hovered: false });
     if (this.props.onMouseLeave) {
-      this.props.onMouseLeave(e, this);
+      this.props.onMouseLeave(e, this.state.hex);
     }
   }
 
   onMouseOver(e) {
     if (this.props.onMouseOver) {
-      this.props.onMouseOver(e, this);
+      this.props.onMouseOver(e, this.state.hex);
     }
   }
 
   render() {
-    const { classes, highlighted, points, selected } = this.props;
-    const { hovered, pixel } = this.state;
+    const {
+      classes,
+      highlighted,
+      layout,
+      points,
+      q,
+      r,
+      s,
+      selected,
+      showCoordinates
+    } = this.props;
+    const { hex, hovered, pixel } = this.state;
+    let qPixel, rPixel, sPixel;
+    if (showCoordinates) {
+      qPixel = Hexagon.getCoordinateTextOffset(3, layout, {
+        x: 0,
+        y: 1
+      });
+      rPixel = Hexagon.getCoordinateTextOffset(1, layout, {
+        x: -1,
+        y: -1
+      });
+      sPixel = Hexagon.getCoordinateTextOffset(5, layout, {
+        x: -2,
+        y: 1
+      });
+    }
     return (
       <g
         className={classNames("hexagon-group", classes.group)}
@@ -149,6 +185,34 @@ class Hexagon extends Component {
         >
           <polygon className={classes.polygon} points={points} />
           {this.props.children}
+          {showCoordinates && (
+            <React.Fragment>
+              <text
+                {...qPixel}
+                className={classes.q}
+                fontSize={2}
+                textAnchor="middle"
+              >
+                {q}
+              </text>
+              <text
+                {...rPixel}
+                className={classes.r}
+                fontSize={2}
+                textAnchor="middle"
+              >
+                {r}
+              </text>
+              <text
+                {...sPixel}
+                className={classes.s}
+                fontSize={2}
+                textAnchor="middle"
+              >
+                {s}
+              </text>
+            </React.Fragment>
+          )}
         </g>
       </g>
     );

src/Layout.js

@@ -1,6 +1,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 HexUtils from "./HexUtils";
 import Orientation from "./models/Orientation";
@@ -46,21 +47,22 @@ export class Layout extends Component {
     return corners;
   }
 
-  static filterChildren(children, layout, viewBox) {
+  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
     );
-    return children.filter(child => {
+    return childrenArray.filter(child => {
       if (!child.props) {
         return true;
       }
       if (
         child.type === Hexagon ||
-        (typeof child.props.q !== "number" &&
-          typeof child.props.r !== "number" &&
-          typeof child.props.s !== "number")
+        (child.props.q !== undefined &&
+          child.props.r !== undefined &&
+          child.props.s !== undefined)
       ) {
         const point = HexUtils.hexToPixel(child.props, layout);
         const corners = cornerCoords.map(
@@ -76,37 +78,24 @@ export class Layout extends Component {
       }
       return true;
     });
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const children = React.Children.toArray(nextProps.children);
-    if (
-      prevState.viewBox !== nextProps.viewBox ||
-      prevState.childCount !== children.length
-    ) {
-      const { flat, viewBox, ...rest } = nextProps;
-      const orientation = flat ? Orientation.Flat : Orientation.Pointy;
-      const layout = { orientation, ...rest };
-
-      return {
-        childCount: children.length,
-        inBounds: Layout.filterChildren(children, layout, viewBox),
-        viewBox
-      };
-    }
-    return null;
-  }
-
-  state = { childCount: 0, inBounds: [], viewBox: {} };
+  });
 
   render() {
-    const { flat, classes, className, size, viewBox, ...rest } = this.props;
-    const { inBounds } = this.state;
+    const {
+      flat,
+      children,
+      classes,
+      className,
+      size,
+      viewBox,
+      ...rest
+    } = this.props;
     const orientation = flat ? Orientation.Flat : Orientation.Pointy;
     const points = Layout.calculateCoordinates(orientation, size)
       .map(point => point.toString())
       .join(" ");
     const layout = { orientation, size, ...rest };
+    const inBounds = this.filterChildren(children, layout, viewBox);
     return (
       <LayoutProvider value={{ layout, points }}>
         <g className={classNames(className, classes.layout)}>{inBounds}</g>

test/src/__snapshots__/Layout.test.js.snap

@@ -194,11 +194,19 @@ exports[`Layout should only render hexagons in bounds again 1`] = `
 exports[`Layout should render correctly with custom props 1`] = `
 <g
   className="test2"
-/>
+>
+  <div>
+    child
+  </div>
+</g>
 `;
 
 exports[`Layout should render correctly with default props 1`] = `
 <g
   className="test1"
-/>
+>
+  <div>
+    child
+  </div>
+</g>
 `;

test/src/__snapshots__/Path.test.js.snap

@@ -3,11 +3,19 @@
 exports[`Path should render correctly 1`] = `
 <g
   className="test1"
-/>
+>
+  <path
+    d="M 17.147302994931888,9.9 L 0,0 "
+  />
+</g>
 `;
 
 exports[`Path should render correctly without an end hex 1`] = `
 <g
   className="test2"
-/>
+>
+  <path
+    d=""
+  />
+</g>
 `;

yarn.lock

@@ -3269,6 +3269,10 @@ mem@^1.1.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+memoize-one@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.0.2.tgz#3fb8db695aa14ab9c0f1644e1585a8806adc1aee"
+
 merge-stream@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"