s449376/crosski
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

components/Line: more refactoring of line drawing algo

Browse Source
This commit is contained in:
Artur Tamborski 2020-11-29 11:12:03 +01:00
parent 0b65918240
commit 46fef938d9
1 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Line/Line.tsx
View File

@ -23,18 +23,26 @@ interface ILineProps {
} }
export default function Line(props: ILineProps): JSX.Element { export default function Line(props: ILineProps): JSX.Element {
const pos = (v: number) => v * props.cellSize + props.cellSize / 2;
const dir = (v: number) => v < 0 ? 2 : v > 0 ? 1 : 0;
const offset = 2.5; const offset = 2.5;
const margin = 30; const margin = 30;
const padding = margin - offset * 2;
let [x, y, w, h, t] = [0, 0, 0, 0, '']; const dir = (v: number) => v < 0 ? 2 : v > 0 ? 1 : 0;
const mid = (v: number) => v * props.cellSize + props.cellSize / 2;
const pad1 = (v: number) => mid(v) - margin + offset;
const pad2 = (v: number) => mid(v + 1) - margin - offset * 2;
const pad3 = (v: number) => mid(v) + padding + v * padding;
const pad4 = (v: number) => mid(v - 1) + margin;
let [x, y, w, h, tx, ty, r, rx, ry, t] = [0, 0, 0, 0, 0, 0, 0, 0, 0, ''];
console.log(x, y, w, h, tx, ty, r, rx, ry);
const ox = dir(props.startPos.x - props.endPos.x); const ox = dir(props.startPos.x - props.endPos.x);
const oy = dir(props.startPos.y - props.endPos.y); const oy = dir(props.startPos.y - props.endPos.y);
const d = Number(`${ox}${oy}`) as Direction; const d = Number(`${ox}${oy}`) as Direction;
const startX = Math.min(props.startPos.x, props.endPos.x);
const startY = Math.min(props.startPos.y, props.endPos.y);
const absX = Math.abs(props.startPos.x - props.endPos.x); const absX = Math.abs(props.startPos.x - props.endPos.x);
const absY = Math.abs(props.startPos.y - props.endPos.y); const absY = Math.abs(props.startPos.y - props.endPos.y);
@ -42,58 +50,58 @@ export default function Line(props: ILineProps): JSX.Element {
case Direction.None: case Direction.None:
break; break;
case Direction.Up: case Direction.Up:
x = pos(props.endPos.x) - margin + offset; x = pad1(startX);
y = pos(props.endPos.y) - margin + offset; y = pad1(startY);
w = 55; w = 55;
h = pos(absY + 1) - margin - offset * 2; h = pad2(absY);
t = ''; t = '';
break; break;
case Direction.Down: case Direction.Down:
x = pos(props.startPos.x) - margin + offset; x = pad1(startX);
y = pos(props.startPos.y) - margin + offset; y = pad1(startY);
w = 55; w = 55;
h = pos(absY + 1) - margin - offset * 2; h = pad2(absY);
t = ''; t = '';
break; break;
case Direction.Left: case Direction.Left:
x = pos(props.endPos.x) - margin + offset; x = pad1(startX);
y = pos(props.endPos.y) - margin + offset; y = pad1(startY);
w = pos(absX + 1) - margin - offset * 2; w = pad2(absX);
h = 55; h = 55;
t = ''; t = '';
break; break;
case Direction.LeftUp: case Direction.LeftUp:
x = pos(props.endPos.x-1) + margin; x = pad1(startX);
y = pos(props.endPos.y) - margin + offset; y = pad1(startY);
w = pos(absX) + (margin - offset * 2) + absX * (margin - offset * 2); w = pad3(absX);
h = 55; h = 55;
t = `translate(29,-14),rotate(45, ${x-offset}, ${y+offset})` t = `translate(26,-14),rotate(45, ${x-offset}, ${y+offset})`
break; break;
case Direction.LeftDown: case Direction.LeftDown:
x = pos(props.endPos.x-1) + margin; x = pad4(props.endPos.x);
y = pos(props.endPos.y) - margin + offset; y = pad1(props.endPos.y);
w = pos(absX) + (margin - offset * 2) + absX * (margin - offset * 2); w = pad3(absX);
h = 55; h = 55;
t = `translate(-12,27),rotate(-45, ${x+offset}, ${y-offset})` t = `translate(-12,27),rotate(-45, ${x+offset}, ${y-offset})`
break; break;
case Direction.Right: case Direction.Right:
x = pos(props.startPos.x) - margin + offset; x = pad1(startX);
y = pos(props.startPos.y) - margin + offset; y = pad1(startY);
w = pos(absX + 1) - margin - offset * 2; w = pad2(absX);
h = 55; h = 55;
t = ''; t = '';
break; break;
case Direction.RightUp: case Direction.RightUp:
x = pos(props.startPos.x) - margin + offset; x = pad1(props.startPos.x);
y = pos(props.startPos.y) - margin + offset; y = pad1(props.startPos.y);
w = pos(absX) + (margin - offset * 2) + absX * (margin - offset * 2); w = pad3(absX);
h = 55; h = 55;
t = `translate(-9, 29),rotate(-45, ${x-offset}, ${y+offset})` t = `translate(-9, 29),rotate(-45, ${x-offset}, ${y+offset})`
break; break;
case Direction.RightDown: case Direction.RightDown:
x = pos(props.startPos.x) - margin + offset; x = pad1(startX);
y = pos(props.startPos.y) - margin + offset; y = pad1(startY);
w = pos(absX) + (margin - offset * 2) + absX * (margin - offset * 2); w = pad3(absX);
h = 55; h = 55;
t = `translate(27, -14),rotate(45, ${x-offset}, ${y+offset})` t = `translate(27, -14),rotate(45, ${x-offset}, ${y+offset})`
break; break;