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

components/Line: pull out all variables

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

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

@ -34,9 +34,6 @@ export default function Line(props: ILineProps): JSX.Element {
const pad3 = (v: number) => mid(v) + padding + v * padding; const pad3 = (v: number) => mid(v) + padding + v * padding;
const pad4 = (v: number) => mid(v - 1) + margin; 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;
@ -46,6 +43,8 @@ export default function Line(props: ILineProps): JSX.Element {
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);
let [x, y, w, h, tx, ty, r, rx, ry] = [0, 0, 0, 0, 0, 0, 0, 0, 0];
switch (d) { switch (d) {
case Direction.None: case Direction.None:
break; break;
@ -54,56 +53,88 @@ export default function Line(props: ILineProps): JSX.Element {
y = pad1(startY); y = pad1(startY);
w = 55; w = 55;
h = pad2(absY); h = pad2(absY);
t = ''; tx = 0;
ty = 0;
r = 0;
rx = 0;
ry = 0;
break; break;
case Direction.Down: case Direction.Down:
x = pad1(startX); x = pad1(startX);
y = pad1(startY); y = pad1(startY);
w = 55; w = 55;
h = pad2(absY); h = pad2(absY);
t = ''; tx = 0;
ty = 0;
r = 0;
rx = 0;
ry = 0;
break; break;
case Direction.Left: case Direction.Left:
x = pad1(startX); x = pad1(startX);
y = pad1(startY); y = pad1(startY);
w = pad2(absX); w = pad2(absX);
h = 55; h = 55;
t = ''; tx = 0;
ty = 0;
r = 0;
rx = 0;
ry = 0;
break; break;
case Direction.LeftUp: case Direction.LeftUp:
x = pad1(startX); x = pad1(startX);
y = pad1(startY); y = pad1(startY);
w = pad3(absX); w = pad3(absX);
h = 55; h = 55;
t = `translate(26,-14),rotate(45, ${x-offset}, ${y+offset})` tx = 26;
ty = -14;
r = 45;
rx = x-offset;
ry = y+offset;
break; break;
case Direction.LeftDown: case Direction.LeftDown:
x = pad4(props.endPos.x); x = pad4(props.endPos.x);
y = pad1(props.endPos.y); y = pad1(props.endPos.y);
w = pad3(absX); w = pad3(absX);
h = 55; h = 55;
t = `translate(-12,27),rotate(-45, ${x+offset}, ${y-offset})` tx = -12;
ty = 27;
r = -45;
rx = x+offset;
ry = y-offset;
break; break;
case Direction.Right: case Direction.Right:
x = pad1(startX); x = pad1(startX);
y = pad1(startY); y = pad1(startY);
w = pad2(absX); w = pad2(absX);
h = 55; h = 55;
t = ''; tx = 0;
ty = 0;
r = 0;
rx = 0;
ry = 0;
break; break;
case Direction.RightUp: case Direction.RightUp:
x = pad1(props.startPos.x); x = pad1(props.startPos.x);
y = pad1(props.startPos.y); y = pad1(props.startPos.y);
w = pad3(absX); w = pad3(absX);
h = 55; h = 55;
t = `translate(-9, 29),rotate(-45, ${x-offset}, ${y+offset})` tx = -9;
ty = 28;
r = -45;
rx = x-offset;
ry = y+offset;
break; break;
case Direction.RightDown: case Direction.RightDown:
x = pad1(startX); x = pad1(startX);
y = pad1(startY); y = pad1(startY);
w = pad3(absX); w = pad3(absX);
h = 55; h = 55;
t = `translate(27, -14),rotate(45, ${x-offset}, ${y+offset})` tx = 27;
ty = -14;
r = 45;
rx = x-offset;
ry = y+offset;
break; break;
} }
@ -122,7 +153,7 @@ export default function Line(props: ILineProps): JSX.Element {
y={y} y={y}
width={w} width={w}
height={h} height={h}
transform={t} transform={`translate(${tx}, ${ty}), rotate(${r}, ${rx}, ${ry})`}
rx={margin - offset} rx={margin - offset}
ry={margin - offset} ry={margin - offset}
/> />