diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index c09e7f7..4904e7c 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -16,7 +16,7 @@ export default function App(): JSX.Element {
diff --git a/src/components/Board/Board.scss b/src/components/Board/Board.scss index 1800c17..34df999 100644 --- a/src/components/Board/Board.scss +++ b/src/components/Board/Board.scss @@ -36,8 +36,11 @@ color: brown; cursor: pointer; - &:focus, &:hover { + &:hover { border-color: #8b8be5; outline: none; } + &:not(hover) { + border-color: #e5e5ea; + } } diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx index dd1043d..c52eeba 100644 --- a/src/components/Board/Board.tsx +++ b/src/components/Board/Board.tsx @@ -12,6 +12,7 @@ export type Point = { type Selection = { start: Point; end: Point; + visible: boolean; } interface IBoardProps { @@ -29,7 +30,7 @@ interface IBoardState { } const Point0: Point = {x: 0, y: 0}; -const Selection0: Selection = {start: Point0, end: Point0}; +const Selection0: Selection = {start: Point0, end: Point0, visible: false}; export default class Board extends React.Component { constructor(props: IBoardProps) { @@ -42,6 +43,10 @@ export default class Board extends React.Component { start: Point0, end: Point0, } + + let s = this.state.selections.slice(); + s[0].visible = true; + this.setState({...this.state}) } moveIsValid(pos: Point): boolean { @@ -52,9 +57,19 @@ export default class Board extends React.Component { return this.state.isSelecting && lineIsValid; } + updateSelection(start: Point, end: Point): Array { + let selections = this.state.selections.slice(); + let s = selections.find(s => s.visible); + + if (s !== undefined) + [s.start, s.end, s.visible] = [start, end, true]; + + return selections; + } + handleMouseDown(start: Point) { const end = start; - let selections = [...this.state.selections]; + const selections = this.updateSelection(start, start); this.setState({...this.state, start, end, selections, isSelecting: true}); } @@ -62,14 +77,16 @@ export default class Board extends React.Component { if (!this.moveIsValid(end)) return; - this.setState({...this.state, end, isSelecting: false}); + const selections = this.updateSelection(this.state.start, end); + this.setState({...this.state, end, selections, isSelecting: false}); } handleMouseOver(end: Point) { if (!this.moveIsValid(end)) return; - this.setState({...this.state, end}); + const selections = this.updateSelection(this.state.start, end); + this.setState({...this.state, end, selections}); } renderCell(s: string, pos: Point): JSX.Element { @@ -86,12 +103,13 @@ export default class Board extends React.Component { ); } - renderLine(x: number): JSX.Element { + renderLine(s: Selection, n: number): JSX.Element { return ( ); @@ -103,8 +121,8 @@ export default class Board extends React.Component { oy.map((s, x) => this.renderCell(s, {x, y}))); - let lines = this.state.selections.filter(x => x).map((ox, x) => - this.renderLine(x)); + let lines = this.state.selections.map((s, n) => + this.renderLine(s, n)); return (
diff --git a/src/components/Line/Line.tsx b/src/components/Line/Line.tsx index ffa4b08..58ff5d4 100644 --- a/src/components/Line/Line.tsx +++ b/src/components/Line/Line.tsx @@ -20,6 +20,7 @@ interface ILineProps { start: Point; end: Point; cellSize: number; + visible: boolean; } export default function Line(props: ILineProps): JSX.Element { @@ -82,6 +83,7 @@ export default function Line(props: ILineProps): JSX.Element { ry={margin - offset} {...{x, y, width, height}} transform={`translate(${tx}, ${ty}), rotate(${r}, ${rx}, ${ry})`} + visibility={props.visible ? 'visible' : 'hidden'} /> ); }