Merge pull request #207 from forensic-architecture/feature/add-additional-shape-types

Feature/add additional shape types

src/components/time/atoms/DatetimePentagon.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const DatetimePentagon = ({ x, y, r, transform, onSelect, styleProps }) => {
+  const s = (r * 2) / 3;
+  return (
+    <polygon
+      onClick={onSelect}
+      className="event"
+      x={x}
+      y={y - r}
+      style={styleProps}
+      points={`${x},${y + s} ${x + s},${y} ${x + s},${y - s} ${x - s},${
+        y - s
+      } ${x - s},${y}`}
+      transform={`rotate(180, ${x}, ${y})`}
+    />
+  );
+};
+
+export default DatetimePentagon;

src/components/time/atoms/DatetimeSquare.js

@@ -14,11 +14,11 @@ const DatetimeSquare = ({
       onClick={onSelect}
       className="event"
       x={x}
-      y={y - r}
+      y={y}
       style={styleProps}
       width={r}
       height={r}
-      transform={`rotate(45, ${x}, ${y})`}
+      transform={transform}
     />
   );
 };

src/components/time/atoms/DatetimeStar.js

@@ -17,9 +17,10 @@ const DatetimeStar = ({
       x={x}
       y={y - r}
       style={styleProps}
-      points={`${x},${y + s} ${x - s},${y - s} ${x + s},${y} ${x - s},${y} ${
-        x + s
-      },${y - s}`}
+      points={`${x + s},${y - s} ${x - r},${y} ${x + r},${y} ${x - s},${
+        y - s
+      } ${x},${y + s}`}
+      transform={transform}
     />
   );
 };

src/components/time/atoms/DatetimeTriangle.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const DatetimeTriangle = ({ x, y, r, transform, onSelect, styleProps }) => {
+  const s = (r * 2) / 3;
+  return (
+    <polygon
+      onClick={onSelect}
+      className="event"
+      x={x}
+      y={y - r}
+      style={styleProps}
+      points={`${x},${y + s} ${x + s},${y - s} ${x - s},${y - s}`}
+      transform={`rotate(180, ${x}, ${y})`}
+    />
+  );
+};
+
+export default DatetimeTriangle;

src/components/time/atoms/Events.js

@@ -2,6 +2,8 @@ import React from "react";
 import DatetimeBar from "./DatetimeBar";
 import DatetimeSquare from "./DatetimeSquare";
 import DatetimeStar from "./DatetimeStar";
+import DatetimeTriangle from "./DatetimeTriangle";
+import DatetimePentagon from "./DatetimePentagon";
 import Project from "./Project";
 import ColoredMarkers from "../../atoms/ColoredMarkers";
 import {
@@ -66,9 +68,46 @@ function renderDiamond(event, styles, props) {
     <DatetimeSquare
       onSelect={props.onSelect}
       x={props.x}
-      y={props.y}
+      y={props.y - 1.8 * props.eventRadius}
       r={1.8 * props.eventRadius}
       styleProps={styles}
+      transform={`rotate(45, ${props.x}, ${props.y})`}
+    />
+  );
+}
+
+function renderSquare(event, styles, props) {
+  return (
+    <DatetimeSquare
+      onSelect={props.onSelect}
+      x={props.x}
+      y={props.y - (1.8 * props.eventRadius) / 2}
+      r={1.8 * props.eventRadius}
+      styleProps={styles}
+    />
+  );
+}
+
+function renderTriangle(event, styles, props) {
+  return (
+    <DatetimeTriangle
+      onSelect={props.onSelect}
+      x={props.x}
+      y={props.y}
+      r={1.5 * props.eventRadius}
+      styleProps={styles}
+    />
+  );
+}
+
+function renderPentagon(event, styles, props) {
+  return (
+    <DatetimePentagon
+      onSelect={props.onSelect}
+      x={props.x}
+      y={props.y}
+      r={1.5 * props.eventRadius}
+      styleProps={styles}
     />
   );
 }
@@ -81,7 +120,7 @@ function renderStar(event, styles, props) {
       y={props.y}
       r={1.8 * props.eventRadius}
       styleProps={{ ...styles, fillRule: "nonzero" }}
-      transform="rotate(90)"
+      transform={`rotate(180, ${props.x}, ${props.y})`}
     />
   );
 }
@@ -125,6 +164,12 @@ const TimelineEvents = ({
         renderShape = renderDiamond;
       } else if (event.shape === "star") {
         renderShape = renderStar;
+      } else if (event.shape === "triangle") {
+        renderShape = renderTriangle;
+      } else if (event.shape === "pentagon") {
+        renderShape = renderPentagon;
+      } else if (event.shape === "square") {
+        renderShape = renderSquare;
       } else {
         renderShape = renderDot;
       }
@@ -137,6 +182,7 @@ const TimelineEvents = ({
       const y = getY({ ...event, category: cat });
 
       const colour = event.colour ? event.colour : getCategoryColor(cat.title);
+
       const styles = {
         fill: colour,
         fillOpacity: y > 0 ? calcOpacity(1) : 0,