From d548ca875b8fc2298229324ea131bca21711385f Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Thu, 14 May 2020 19:22:36 +0200
Subject: [PATCH] WIP: shapes and colours

---
 .../presentational/Timeline/DatetimeSquare.js | 29 +++++++-------
 .../presentational/Timeline/DatetimeStar.js   | 24 ++++++++++++
 .../presentational/Timeline/Events.js         | 39 +++++++++++++++++++
 .../presentational/Timeline/Markers.js        |  4 ++
 4 files changed, 82 insertions(+), 14 deletions(-)
 create mode 100644 src/components/presentational/Timeline/DatetimeStar.js

diff --git a/src/components/presentational/Timeline/DatetimeSquare.js b/src/components/presentational/Timeline/DatetimeSquare.js
index d62afd9..b232cd8 100644
--- a/src/components/presentational/Timeline/DatetimeSquare.js
+++ b/src/components/presentational/Timeline/DatetimeSquare.js
@@ -1,23 +1,24 @@
 import React from 'react'
 
 export default ({
-  category,
-  events,
   x,
   y,
   r,
+  transform,
   onSelect,
   styleProps,
   extraRender
-}) => (
-
-  <rect
-    onClick={onSelect}
-    className='event'
-    x={x}
-    y={y - 0.5 * r}
-    style={styleProps}
-    width={r}
-    height={r}
-  />
-)
+}) => {
+  return (
+    <rect
+      onClick={onSelect}
+      className='event'
+      x={x}
+      y={y - r}
+      style={styleProps}
+      width={r}
+      height={r}
+      transform={`rotate(45, ${x}, ${y})`}
+    />
+  )
+}
diff --git a/src/components/presentational/Timeline/DatetimeStar.js b/src/components/presentational/Timeline/DatetimeStar.js
new file mode 100644
index 0000000..ead0931
--- /dev/null
+++ b/src/components/presentational/Timeline/DatetimeStar.js
@@ -0,0 +1,24 @@
+import React from 'react'
+
+export default ({
+  x,
+  y,
+  r,
+  transform,
+  onSelect,
+  styleProps,
+  extraRender
+}) => {
+  const s = r * 2 / 3
+  const s2 = r * 4 / 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} ${x - s},${y} ${x + s},${y - s}`}
+    />
+  )
+}
diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js
index 9cf8e19..90e5644 100644
--- a/src/components/presentational/Timeline/Events.js
+++ b/src/components/presentational/Timeline/Events.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import DatetimeDot from './DatetimeDot'
 import DatetimeBar from './DatetimeBar'
+import DatetimeSquare from './DatetimeSquare'
+import DatetimeStar from './DatetimeStar'
 import Project from './Project'
 import { calcOpacity } from '../../../common/utilities'
 import { sizes } from '../../../common/global'
@@ -76,6 +78,39 @@ const TimelineEvents = ({
     />
   }
 
+  function renderDiamond (event, colour) {
+    const props = ({
+      fill: colour,
+      fillOpacity: calcOpacity(1),
+      transition: `transform ${transitionDuration / 1000}s ease`
+    })
+    return <DatetimeSquare
+      onSelect={() => onSelect([event])}
+      x={getDatetimeX(event.timestamp)}
+      y={getCategoryY(event.category)}
+      r={1.8 * sizes.eventDotR}
+      styleProps={props}
+    />
+  }
+
+  function renderStar (event, colour) {
+    const props = ({
+      fill: colour,
+      fillOpacity: calcOpacity(1),
+      transition: `transform ${transitionDuration / 1000}s ease`,
+      fillRule: 'nonzero'
+
+    })
+    return <DatetimeStar
+      onSelect={() => onSelect([event])}
+      x={getDatetimeX(event.timestamp)}
+      y={getCategoryY(event.category)}
+      r={1.8 * sizes.eventDotR}
+      styleProps={props}
+      transform='rotate(90)'
+    />
+  }
+
   function renderDatetime (datetime) {
     // narrative checking for non-rendering still uses datetimes as legacy TODO(lachlan)
     if (narrative) {
@@ -157,6 +192,10 @@ const TimelineEvents = ({
     if (event.shape) {
       if (event.shape === 'bar') {
         renderShape = renderBar
+      } else if (event.shape === 'diamond') {
+        renderShape = renderDiamond
+      } else if (event.shape === 'star') {
+        renderShape = renderStar
       }
     }
 
diff --git a/src/components/presentational/Timeline/Markers.js b/src/components/presentational/Timeline/Markers.js
index db87e66..7bb9524 100644
--- a/src/components/presentational/Timeline/Markers.js
+++ b/src/components/presentational/Timeline/Markers.js
@@ -53,6 +53,10 @@ const TimelineMarkers = ({
         return renderCircle()
       case 'bar':
         return renderBar()
+      case 'diamond':
+        return renderCircle()
+      case 'star':
+        return renderCircle()
       default:
         return isLocated ? renderBar() : renderCircle()
     }