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

components/Line: finish refactoring, clean up

Browse Source
This commit is contained in:
Artur Tamborski 2020-11-29 16:43:41 +01:00
parent e182358eaf
commit 5063668f66
2 changed files with 40 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Line/Line.scss
View File

@ -3,9 +3,3 @@
stroke-width: 5px;
fill: none;
}
.Line2 {
stroke: #d6a54d;
stroke-width: 5px;
fill: none;
}

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

@ -24,7 +24,7 @@ interface ILineProps {
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;
@ -38,127 +38,50 @@ export default function Line(props: ILineProps): JSX.Element {
const oy = dir(props.startPos.y - props.endPos.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 minX = Math.min(props.startPos.x, props.endPos.x);
const minY = Math.min(props.startPos.y, props.endPos.y);
const maxY = Math.max(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 signX = Math.sign(props.startPos.x - props.endPos.x);
const signY = Math.sign(props.startPos.y - props.endPos.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})`}
/>
);
}