components/Line: finish refactoring, clean up
This commit is contained in:
Artur Tamborski
parent
e182358eaf
commit
96b4a3b72d
@ -90,8 +90,8 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
|
||||
return (
|
||||
<Line
|
||||
key={`Line${x}`}
|
||||
startPos={{...this.state.start}}
|
||||
endPos={{...this.state.end}}
|
||||
start={{...this.state.start}}
|
||||
end={{...this.state.end}}
|
||||
cellSize={60}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -3,9 +3,3 @@
|
||||
stroke-width: 5px;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.Line2 {
|
||||
stroke: #d6a54d;
|
||||
stroke-width: 5px;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
@ -17,14 +17,14 @@ enum Direction {
|
||||
}
|
||||
|
||||
interface ILineProps {
|
||||
startPos: Point;
|
||||
endPos: Point;
|
||||
start: Point;
|
||||
end: Point;
|
||||
cellSize: number;
|
||||
}
|
||||
|
||||
export default function Line(props: ILineProps): JSX.Element {
|
||||
const offset = 2.5;
|
||||
const margin = 30;
|
||||
const margin = props.cellSize / 2;
|
||||
const padding = margin - offset * 2;
|
||||
|
||||
const dir = (v: number) => v < 0 ? 2 : v > 0 ? 1 : 0;
|
||||
@ -34,131 +34,54 @@ export default function Line(props: ILineProps): JSX.Element {
|
||||
const pad3 = (v: number) => mid(v) + padding + v * padding;
|
||||
const pad4 = (v: number) => mid(v - 1) + margin;
|
||||
|
||||
const ox = dir(props.startPos.x - props.endPos.x);
|
||||
const oy = dir(props.startPos.y - props.endPos.y);
|
||||
const ox = dir(props.start.x - props.end.x);
|
||||
const oy = dir(props.start.y - props.end.y);
|
||||
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 absY = Math.abs(props.startPos.y - props.endPos.y);
|
||||
const minX = Math.min(props.start.x, props.end.x);
|
||||
const minY = Math.min(props.start.y, props.end.y);
|
||||
const maxY = Math.max(props.start.y, props.end.y);
|
||||
const absX = Math.abs(props.start.x - props.end.x);
|
||||
const absY = Math.abs(props.start.y - props.end.y);
|
||||
const signX = Math.sign(props.start.x - props.end.x);
|
||||
const signY = Math.sign(props.start.y - props.end.y);
|
||||
|
||||
let [x, y, w, h, tx, ty, r, rx, ry] = [0, 0, 0, 0, 0, 0, 0, 0, 0];
|
||||
/* uhh, edge cases for two directions, idk how to fix it */
|
||||
const x = d === Direction.LeftDown ? pad4(minX) : pad1(minX);
|
||||
const y = d === Direction.LeftDown || d === Direction.RightUp
|
||||
? pad1(maxY) : pad1(minY);
|
||||
|
||||
switch (d) {
|
||||
case Direction.None:
|
||||
break;
|
||||
case Direction.Up:
|
||||
x = pad1(startX);
|
||||
y = pad1(startY);
|
||||
w = 55;
|
||||
h = pad2(absY);
|
||||
tx = 0;
|
||||
ty = 0;
|
||||
r = 0;
|
||||
rx = 0;
|
||||
ry = 0;
|
||||
break;
|
||||
case Direction.Down:
|
||||
x = pad1(startX);
|
||||
y = pad1(startY);
|
||||
w = 55;
|
||||
h = pad2(absY);
|
||||
tx = 0;
|
||||
ty = 0;
|
||||
r = 0;
|
||||
rx = 0;
|
||||
ry = 0;
|
||||
break;
|
||||
case Direction.Left:
|
||||
x = pad1(startX);
|
||||
y = pad1(startY);
|
||||
w = pad2(absX);
|
||||
h = 55;
|
||||
tx = 0;
|
||||
ty = 0;
|
||||
r = 0;
|
||||
rx = 0;
|
||||
ry = 0;
|
||||
break;
|
||||
case Direction.LeftUp:
|
||||
x = pad1(startX);
|
||||
y = pad1(startY);
|
||||
w = pad3(absX);
|
||||
h = 55;
|
||||
tx = 26;
|
||||
ty = -14;
|
||||
r = 45;
|
||||
rx = x-offset;
|
||||
ry = y+offset;
|
||||
break;
|
||||
case Direction.LeftDown:
|
||||
x = pad4(props.endPos.x);
|
||||
y = pad1(props.endPos.y);
|
||||
w = pad3(absX);
|
||||
h = 55;
|
||||
tx = -12;
|
||||
ty = 27;
|
||||
r = -45;
|
||||
rx = x+offset;
|
||||
ry = y-offset;
|
||||
break;
|
||||
case Direction.Right:
|
||||
x = pad1(startX);
|
||||
y = pad1(startY);
|
||||
w = pad2(absX);
|
||||
h = 55;
|
||||
tx = 0;
|
||||
ty = 0;
|
||||
r = 0;
|
||||
rx = 0;
|
||||
ry = 0;
|
||||
break;
|
||||
case Direction.RightUp:
|
||||
x = pad1(props.startPos.x);
|
||||
y = pad1(props.startPos.y);
|
||||
w = pad3(absX);
|
||||
h = 55;
|
||||
tx = -9;
|
||||
ty = 28;
|
||||
r = -45;
|
||||
rx = x-offset;
|
||||
ry = y+offset;
|
||||
break;
|
||||
case Direction.RightDown:
|
||||
x = pad1(startX);
|
||||
y = pad1(startY);
|
||||
w = pad3(absX);
|
||||
h = 55;
|
||||
tx = 27;
|
||||
ty = -14;
|
||||
r = 45;
|
||||
rx = x-offset;
|
||||
ry = y+offset;
|
||||
break;
|
||||
}
|
||||
/* pad3 is used only for diagonals */
|
||||
let width = d % 10 ? pad3(absX) : pad2(absX);
|
||||
let height = pad2(absY * (1 - Math.abs(signX * signY)));
|
||||
|
||||
/* hide when not moving */
|
||||
if (d === Direction.None)
|
||||
[width, height] = [0, 0];
|
||||
|
||||
const r = 45 * signX * signY;
|
||||
const rx = (x - offset) * Math.abs(signX);
|
||||
const ry = (y + offset) * Math.abs(signY);
|
||||
|
||||
let [tx, ty] = [0, 0, 0, 0];
|
||||
|
||||
/* ugly translation fixes but they work i guess */
|
||||
if (d === Direction.LeftUp || d === Direction.RightDown)
|
||||
[tx, ty] = [26, -14];
|
||||
|
||||
if (d === Direction.LeftDown)
|
||||
[tx, ty] = [-6, 29];
|
||||
|
||||
if (d === Direction.RightUp)
|
||||
[tx, ty] = [-9, 28];
|
||||
|
||||
return (
|
||||
<svg>
|
||||
<rect
|
||||
className="Line2"
|
||||
x={x}
|
||||
y={y}
|
||||
width={w}
|
||||
height={h}
|
||||
/>
|
||||
<rect
|
||||
className="Line"
|
||||
x={x}
|
||||
y={y}
|
||||
width={w}
|
||||
height={h}
|
||||
transform={`translate(${tx}, ${ty}), rotate(${r}, ${rx}, ${ry})`}
|
||||
rx={margin - offset}
|
||||
ry={margin - offset}
|
||||
/>
|
||||
<circle cx={x} cy={y} r="5" fill="orange" />
|
||||
<circle cx={x+w} cy={y+h} r="5" fill="red" />
|
||||
</svg>
|
||||
<rect
|
||||
className="Line"
|
||||
rx={margin - offset}
|
||||
ry={margin - offset}
|
||||
{...{x, y, width, height}}
|
||||
transform={`translate(${tx}, ${ty}), rotate(${r}, ${rx}, ${ry})`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user