1 files changed, 35 insertions, 30 deletions

diff --git a/src/Grid.tsx b/src/Grid.tsx
index 1bfcaee..d1fc973 100644
--- a/src/Grid.tsx
+++ b/src/Grid.tsx
@@ -3,17 +3,10 @@ import 'typeface-roboto';
 import MGrid from '@material-ui/core/Grid';
 import orange from '@material-ui/core/colors/orange';
 import blue from '@material-ui/core/colors/blue';
-import { Theme, withStyles, StyleRules } from '@material-ui/core/styles';
 import Color from 'color';
-import { TransitionGroup, CSSTransition } from "react-transition-group";
 import './Grid.css';
 
-const styles = (theme: Theme): StyleRules => ({
-});
-
 interface GridProps {
-    classes: {
-    },
     onClickNode: (i: number, j: number) => void
     onHoverNode: (i: number, j: number) => void
     data: {d: number[], col: number}[][]
@@ -30,36 +23,48 @@ class Grid extends React.Component<GridProps> {
     static getColor(s: {d: number[], col: number}) {
         return getNodeColor(s.d[s.col], s.col);
     }
+    mouseDown = false;
+    mousePos = {x: -1, y: -1};
     render() {
-        const { classes, data, onClickNode, onHoverNode } = this.props;
-        const { gr, gc } = data.length <= 20 ?
-            { gr: 'gridRow', gc: 'gridCell' } :
-            { gr: 'smallGridRow', gc: 'smallGridCell' };
+        const { data, onClickNode, onHoverNode } = this.props;
+        const { gr, gc, l } = data.length <= 20 ?
+            { gr: 'gridRow', gc: 'gridCell', l: 24 } :
+            { gr: 'smallGridRow', gc: 'smallGridCell', l: 15 };
         return (
-            <div className={`grid ${gr} ${gc}`}>
-            {
-                data.map((row, i) => (
-                    <div key={i}>
+            <div className={`grid ${gr} ${gc}`}
+                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)
                     {
-                        row.map((cell, j) => (
-                            <div
-                                onClick={event => onClickNode(i, j)}
-                                onMouseOver={event => {
-                                    if (event.buttons === 1 || event.buttons === 3)
-                                        onHoverNode(i, j);
-                                }}>
+                        onHoverNode(y, x);
+                    }
+                }}>
+                {data.map((row, i) => (
+                    <div key={i}>
+                    {row.map((cell, j) => (
                             <div key={j}
                                 style={{backgroundColor: Grid.getColor(cell)}}>
                             </div>
-                            </div>
-                        ))
-                    }
+                        ))}
                     </div>
-                ))
-            }
-            </div>
-        );
+                ))}
+            </div>);
     }
 }
 
-export default withStyles(styles)(Grid);
+export default Grid;