1 files changed, 69 insertions, 0 deletions
diff --git a/src/Matrix.tsx b/src/Matrix.tsx
new file mode 100644
index 0000000..53faf51
--- /dev/null
+++ b/src/Matrix.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import 'typeface-roboto';
+import orange from '@material-ui/core/colors/orange';
+import blue from '@material-ui/core/colors/blue';
+import Color from 'color';
+import './Matrix.css';
+
+interface MatrixProps {
+    onClickNode: (i: number, j: number) => void
+    onHoverNode: (i: number, j: number) => void
+    data: { d: number[], col: number }[][]
+}
+
+export function getNodeColor(d: number, col: number) {
+    const color = [orange[300], blue[300]];
+    let base = Color(color[col]).hsl().array();
+    base[2] = 80;
+    return Color.hsl(base).darken(Math.min(d / 15, 0.5)).hex();
+}
+
+class Matrix extends React.Component<MatrixProps> {
+    static getColor(s: { d: number[], col: number }) {
+        return getNodeColor(s.d[s.col], s.col);
+    }
+    mouseDown = false;
+    mousePos = { x: -1, y: -1 };
+    render() {
+        const { data, onClickNode, onHoverNode } = this.props;
+        const { mr, mc, l } = data.length <= 20 ?
+            { mr: 'matrixRow', mc: 'matrixCell', l: 24 } :
+            { mr: 'smallMatrixRow', mc: 'smallMatrixCell', l: 15 };
+        return (
+            <div className={`matrix ${mr} ${mc}`}
+                onMouseDown={event => {
+                    event.preventDefault();
+                    this.mouseDown = true;
+                    onClickNode(this.mousePos.y, this.mousePos.x);
+                }}
+                onMouseUp={event => {
+                    event.preventDefault();
+                    this.mouseDown = false;
+                }}
+                onMouseOver={event => {
+                    const bounds = (event.currentTarget as Element).getBoundingClientRect();
+                    const x = Math.floor((event.clientX - bounds.left) / l);
+                    const y = Math.floor((event.clientY - bounds.top) / l);
+                    console.log(y, x, this.mouseDown);
+                    const t = this.mousePos;
+                    this.mousePos = {x, y};
+                    if (!this.mouseDown) return;
+                    if (t.x !== x || t.y !== y)
+                    {
+                        onHoverNode(y, x);
+                    }
+                }}>
+                {data.map((row, i) => (
+                    <div key={i}>
+                    {row.map((cell, j) => (
+                            <div key={j}
+                                style={{backgroundColor: Matrix.getColor(cell)}}>
+                            </div>
+                        ))}
+                    </div>
+                ))}
+            </div>);
+    }
+}
+
+export default Matrix;