Add support for right-down arrows

src/components/Arrow.tsx

@@ -8,23 +8,40 @@ interface Props {
   active?: boolean
 }
 
-export const Arrow: FC<Props> = ({ from, to, active = false }) => {
-  const length = to.row === from.row 
-    ? Math.abs(to.col - from.col)
-    : to.row - from.row
+const getDirection = (from: TalentData, to: TalentData): string => {
+  if (to.row > from.row && to.col === from.col) {
+    return 'down'
+  } else if (to.row === from.row && to.col > from.col) {
+    return 'right'
+  } else if (to.row === from.row && to.col < from.col) {
+    return 'left'
+  } else if (to.row > from.row && to.col === from.col + 1) {
+    return 'right-down'
+  } else if (to.row > from.row && to.col === from.col - 1) {
+    return 'left-down'
+  }
+  throw new Error(`Could not determine direction from (row ${from.row}, col ${from.col}) to (row ${to.row}, col ${to.col})`)
+}
 
+export const Arrow: FC<Props> = ({ from, to, active = false }) => {
   const props = {
     'data-col': from.col,
     'data-row': from.row,
-    'data-length': length,
   }
 
-  const className = classNames('arrow', {
+  const height = to.row - from.row
+  const width = Math.abs(to.col - from.col)
+  
+  const dir = getDirection(from, to)
+  if (dir === 'right-down' || dir === 'left-down') {
+    props['data-height'] = height
+    props['data-width'] = width
+  } else {
+    props['data-length'] = to.row === from.row ? width : height
+  }
+
+  const className = classNames('arrow', `arrow--${dir}`, {
     'arrow--active': active,
-    'arrow--down': to.row > from.row,
-    'arrow--right': to.row === from.row && to.col > from.col,
-    'arrow--left': to.row === from.row && to.col < from.col,
-    'arrow--right-down': to.row === from.row + 1 && to.col === from.col + 1
   })
 
   return <div className={className} {...props} />