From e3415e915c083360d1ae915f09a5948b40e3c4e2 Mon Sep 17 00:00:00 2001
From: adventuresEnglish <149850689+adventuresEnglish@users.noreply.github.com>
Date: Sun, 11 Feb 2024 20:32:40 -0500
Subject: [PATCH 1/2] Refactored selection-box.tsx

Created an object of arrays to map over to reduce repetition.
---
 .../[boardId]/_components/selection-box.tsx   | 272 ++++++------------
 1 file changed, 84 insertions(+), 188 deletions(-)

diff --git a/app/board/[boardId]/_components/selection-box.tsx b/app/board/[boardId]/_components/selection-box.tsx
index 7e62326..ea57bbc 100644
--- a/app/board/[boardId]/_components/selection-box.tsx
+++ b/app/board/[boardId]/_components/selection-box.tsx
@@ -8,199 +8,95 @@ import { useSelectionBounds } from "@/hooks/use-selection-bounds";
 
 interface SelectionBoxProps {
   onResizeHandlePointerDown: (corner: Side, initialBounds: XYWH) => void;
-};
+}
 
 const HANDLE_WIDTH = 8;
 
-export const SelectionBox = memo(({
-  onResizeHandlePointerDown,
-}: SelectionBoxProps) => {
-  const soleLayerId = useSelf((me) =>
-    me.presence.selection.length === 1 ? me.presence.selection[0] : null
-  );
+export const SelectionBox = memo(
+  ({ onResizeHandlePointerDown }: SelectionBoxProps) => {
+    const soleLayerId = useSelf((me) =>
+      me.presence.selection.length === 1 ? me.presence.selection[0] : null
+    );
 
-  const isShowingHandles = useStorage((root) => 
-    soleLayerId && root.layers.get(soleLayerId)?.type !== LayerType.Path
-  );
+    const isShowingHandles = useStorage(
+      (root) =>
+        soleLayerId && root.layers.get(soleLayerId)?.type !== LayerType.Path
+    );
 
-  const bounds = useSelectionBounds();
+    const bounds = useSelectionBounds();
 
-  if (!bounds) {
-    return null;
-  }
+    if (!bounds) {
+      return null;
+    }
+
+    const rect = {
+      cardinal: ["nwse", "ns", "nesw", "ew", "nwse", "ns", "nesw", "ew"],
+      boundsX: [
+        bounds.x - HANDLE_WIDTH / 2,
+        bounds.x + bounds.width / 2 - HANDLE_WIDTH / 2,
+        bounds.x + bounds.width - HANDLE_WIDTH / 2,
+        bounds.x + bounds.width - HANDLE_WIDTH / 2,
+        bounds.x + bounds.width - HANDLE_WIDTH / 2,
+        bounds.x + bounds.width / 2 - HANDLE_WIDTH / 2,
+        bounds.x - HANDLE_WIDTH / 2,
+        bounds.x - HANDLE_WIDTH / 2,
+      ],
+      boundsY: [
+        bounds.y - HANDLE_WIDTH / 2,
+        bounds.y - HANDLE_WIDTH / 2,
+        bounds.y - HANDLE_WIDTH / 2,
+        bounds.y + bounds.height / 2 - HANDLE_WIDTH / 2,
+        bounds.y + bounds.height - HANDLE_WIDTH / 2,
+        bounds.y + bounds.height - HANDLE_WIDTH / 2,
+        bounds.y + bounds.height - HANDLE_WIDTH / 2,
+        bounds.y + bounds.height / 2 - HANDLE_WIDTH / 2,
+      ],
+      resize: [
+        Side.Top + Side.Left,
+        Side.Top,
+        Side.Top + Side.Right,
+        Side.Right,
+        Side.Bottom + Side.Right,
+        Side.Bottom,
+        Side.Bottom + Side.Left,
+        Side.Left,
+      ],
+    };
 
-  return (
-    <>
-      <rect
-        className="fill-transparent stroke-blue-500 stroke-1 pointer-events-none"
-        style={{
-          transform: `translate(${bounds.x}px, ${bounds.y}px)`,
-        }}
-        x={0}
-        y={0}
-        width={bounds.width}
-        height={bounds.height}
-      />
-      {isShowingHandles && (
-        <>
-          <rect
-            className="fill-white stroke-1 stroke-blue-500"
-            x={0}
-            y={0}
-            style={{
-              cursor: "nwse-resize",
-              width: `${HANDLE_WIDTH}px`,
-              height: `${HANDLE_WIDTH}px`,
-              transform: `
-                translate(
-                  ${bounds.x - HANDLE_WIDTH / 2}px,
-                  ${bounds.y - HANDLE_WIDTH / 2}px
-                )
-              `
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation();
-              onResizeHandlePointerDown(Side.Top + Side.Left, bounds);
-            }}
-          />
-          <rect
-            className="fill-white stroke-1 stroke-blue-500"
-            x={0}
-            y={0}
-            style={{
-              cursor: "ns-resize",
-              width: `${HANDLE_WIDTH}px`,
-              height: `${HANDLE_WIDTH}px`,
-              transform: `
-                translate(
-                  ${bounds.x + bounds.width / 2 - HANDLE_WIDTH / 2}px, 
-                  ${bounds.y - HANDLE_WIDTH / 2}px
-                )
-              `
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation();
-              onResizeHandlePointerDown(Side.Top, bounds);
-            }}
-          />
-          <rect
-            className="fill-white stroke-1 stroke-blue-500"
-            x={0}
-            y={0}
-            style={{
-              cursor: "nesw-resize",
-              width: `${HANDLE_WIDTH}px`,
-              height: `${HANDLE_WIDTH}px`,
-              transform: `
-                translate(
-                  ${bounds.x - HANDLE_WIDTH / 2 + bounds.width}px,
-                  ${bounds.y - HANDLE_WIDTH / 2}px
-                )`
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation();
-              onResizeHandlePointerDown(Side.Top + Side.Right, bounds);
-            }}
-          />
-          <rect
-            className="fill-white stroke-1 stroke-blue-500"
-            x={0}
-            y={0}
-            style={{
-              cursor: "ew-resize",
-              width: `${HANDLE_WIDTH}px`,
-              height: `${HANDLE_WIDTH}px`,
-              transform: `
-                translate(
-                  ${bounds.x - HANDLE_WIDTH / 2 + bounds.width}px, 
-                  ${bounds.y + bounds.height / 2 - HANDLE_WIDTH / 2}px
-                )`
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation();
-              onResizeHandlePointerDown(Side.Right, bounds);
-            }}
-          />
-          <rect
-            className="fill-white stroke-1 stroke-blue-500"
-            x={0}
-            y={0}
-            style={{
-              cursor: "nwse-resize",
-              width: `${HANDLE_WIDTH}px`,
-              height: `${HANDLE_WIDTH}px`,
-              transform: `
-                translate(
-                  ${bounds.x - HANDLE_WIDTH / 2 + bounds.width}px, 
-                  ${bounds.y - HANDLE_WIDTH / 2 + bounds.height}px
-                )`
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation();
-              onResizeHandlePointerDown(Side.Bottom + Side.Right, bounds);
-            }}
-          />
-          <rect
-            className="fill-white stroke-1 stroke-blue-500"
-            x={0}
-            y={0}
-            style={{
-              cursor: "ns-resize",
-              width: `${HANDLE_WIDTH}px`,
-              height: `${HANDLE_WIDTH}px`,
-              transform: `
-                translate(
-                  ${bounds.x + bounds.width / 2 - HANDLE_WIDTH / 2}px,
-                  ${bounds.y - HANDLE_WIDTH / 2 + bounds.height}px
-                )`
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation();
-              onResizeHandlePointerDown(Side.Bottom, bounds);
-            }}
-          />
-          <rect
-            className="fill-white stroke-1 stroke-blue-500"
-            x={0}
-            y={0}
-            style={{
-              cursor: "nesw-resize",
-              width: `${HANDLE_WIDTH}px`,
-              height: `${HANDLE_WIDTH}px`,
-              transform: `
-                translate(
-                  ${bounds.x - HANDLE_WIDTH / 2}px,
-                  ${bounds.y - HANDLE_WIDTH / 2 + bounds.height}px
-                )`
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation();
-              onResizeHandlePointerDown(Side.Bottom + Side.Left, bounds);
-            }}
-          />
-          <rect
-            className="fill-white stroke-1 stroke-blue-500"
-            x={0}
-            y={0}
-            style={{
-              cursor: "ew-resize",
-              width: `${HANDLE_WIDTH}px`,
-              height: `${HANDLE_WIDTH}px`,
-              transform: `
-                translate(
-                  ${bounds.x - HANDLE_WIDTH / 2}px,
-                  ${bounds.y - HANDLE_WIDTH / 2 + bounds.height / 2}px
-                )`
-            }}
-            onPointerDown={(e) => {
-              e.stopPropagation();
-              onResizeHandlePointerDown(Side.Left, bounds);
-            }}
-          />
-        </>
-      )}
-    </>
-  );
-});
+    return (
+      <>
+        <rect
+          className="fill-transparent stroke-blue-500 stroke-1 pointer-events-none"
+          style={{
+            transform: `translate(${bounds.x}px, ${bounds.y}px)`,
+          }}
+          x={0}
+          y={0}
+          width={bounds.width}
+          height={bounds.height}
+        />
+        {isShowingHandles &&
+          rect.cardinal.map((direction, i) => (
+            <rect
+              key={i}
+              className="fill-white stroke-1 stroke-blue-500"
+              x={0}
+              y={0}
+              style={{
+                cursor: `${direction[i]}-resize`,
+                width: `${HANDLE_WIDTH}px`,
+                height: `${HANDLE_WIDTH}px`,
+                transform: `translate(${rect.boundsX[i]}px, ${rect.boundsY[i]}px)`,
+              }}
+              onPointerDown={(e) => {
+                e.stopPropagation();
+                onResizeHandlePointerDown(rect.resize[i], bounds);
+              }}
+            />
+          ))}
+      </>
+    );
+  }
+);
 
-SelectionBox.displayName = "SelectionBox";
\ No newline at end of file
+SelectionBox.displayName = "SelectionBox";

From a7810525b22551edb925c725b4c2f81373d92fff Mon Sep 17 00:00:00 2001
From: adventuresEnglish <149850689+adventuresEnglish@users.noreply.github.com>
Date: Mon, 12 Feb 2024 08:57:17 -0500
Subject: [PATCH 2/2] fixed bug and renamed variable

---
 app/board/[boardId]/_components/selection-box.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/board/[boardId]/_components/selection-box.tsx b/app/board/[boardId]/_components/selection-box.tsx
index ea57bbc..9c667ef 100644
--- a/app/board/[boardId]/_components/selection-box.tsx
+++ b/app/board/[boardId]/_components/selection-box.tsx
@@ -51,7 +51,7 @@ export const SelectionBox = memo(
         bounds.y + bounds.height - HANDLE_WIDTH / 2,
         bounds.y + bounds.height / 2 - HANDLE_WIDTH / 2,
       ],
-      resize: [
+      resizeSide: [
         Side.Top + Side.Left,
         Side.Top,
         Side.Top + Side.Right,
@@ -83,14 +83,14 @@ export const SelectionBox = memo(
               x={0}
               y={0}
               style={{
-                cursor: `${direction[i]}-resize`,
+                cursor: `${direction}-resize`,
                 width: `${HANDLE_WIDTH}px`,
                 height: `${HANDLE_WIDTH}px`,
                 transform: `translate(${rect.boundsX[i]}px, ${rect.boundsY[i]}px)`,
               }}
               onPointerDown={(e) => {
                 e.stopPropagation();
-                onResizeHandlePointerDown(rect.resize[i], bounds);
+                onResizeHandlePointerDown(rect.resizeSide[i], bounds);
               }}
             />
           ))}