From 5063668f66106cb502501f32ac10f02d1342dc05 Mon Sep 17 00:00:00 2001
From: Artur Tamborski <tamborskiartur@gmail.com>
Date: Sun, 29 Nov 2020 16:43:41 +0100
Subject: [PATCH] components/Line: finish refactoring, clean up

---
 src/components/Line/Line.scss |   6 --
 src/components/Line/Line.tsx  | 157 +++++++++-------------------------
 2 files changed, 40 insertions(+), 123 deletions(-)

diff --git a/src/components/Line/Line.scss b/src/components/Line/Line.scss
index 3f8f13f..2d5e4fb 100644
--- a/src/components/Line/Line.scss
+++ b/src/components/Line/Line.scss
@@ -3,9 +3,3 @@
   stroke-width: 5px;
   fill: none;
 }
-
-.Line2 {
-  stroke: #d6a54d;
-  stroke-width: 5px;
-  fill: none;
-}
diff --git a/src/components/Line/Line.tsx b/src/components/Line/Line.tsx
index 1e8edcd..680a80d 100644
--- a/src/components/Line/Line.tsx
+++ b/src/components/Line/Line.tsx
@@ -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})`}
+    />
   );
 }