From fa5fd80769044f633609ff843ebe8ccfeca92bf9 Mon Sep 17 00:00:00 2001
From: Minh Duong <minhd2@illinois.edu>
Date: Thu, 30 Nov 2023 18:05:14 -0600
Subject: [PATCH] Finish tool handling (#20)

---
 client/src/components/Board/index.tsx | 108 ++++++++++++++++----------
 client/src/components/Task/index.tsx  |  53 +++++++------
 2 files changed, 95 insertions(+), 66 deletions(-)

diff --git a/client/src/components/Board/index.tsx b/client/src/components/Board/index.tsx
index 1dca116..d38cced 100644
--- a/client/src/components/Board/index.tsx
+++ b/client/src/components/Board/index.tsx
@@ -114,28 +114,25 @@ export default function Board() {
     switch (t) {
       case Tool.Pointer:
         console.log('Selected pointer tool');
-        handleSetPointerTool();
         break;
       case Tool.Move:
         console.log('Selected move tool');
-        handleSetMoveTool();
+        resetPointerToolState();
         break;
       case Tool.Task:
         console.log('Selected task tool');
-        handleAddTask();
+        resetPointerToolState();
+        // handleAddTask();
         break;
       case Tool.Arrow:
         console.log('Selected arrow tool');
-        setArrowToolState({
-          ...arrowToolState,
-          _firstId: -1
-        });
+        resetPointerToolState();
+        resetArrowToolState();
         break;
     };
   };
 
   const handleTaskClick = (id: number) => {
-    console.log(`Clicked task ${id}`);
     switch (selectedTool) {
       case Tool.Pointer:
         const selected_task = tasks.find((t) => t.id == id);
@@ -152,7 +149,7 @@ export default function Board() {
         break;
       case Tool.Arrow:
         if (id == arrowToolState._firstId) {
-          break;
+          resetArrowToolState();
         } else if (arrowToolState._firstId == -1) {
           setArrowToolState({
             ...arrowToolState,
@@ -160,37 +157,45 @@ export default function Board() {
           });
         } else {
           addArrow(arrowToolState._firstId, id);
-          setArrowToolState({
-            ...arrowToolState,
-            _firstId: -1
-          });
-          // TODO: Support switching back to previous tool
-          // setSelectedTool(Tool.Pointer);
+          resetArrowToolState();
         }
         break;
     };
   };
 
-  const handleSetPointerTool = () => {
-    // TODO: Set CSS cursor to 'default'
-  };
-
-  const handleSetMoveTool = () => {
-    // TODO: Set CSS cursor to 'move'
-  };
-
-  const handleAddTask = () => {
-    var newTasks = tasks.slice();
-    newTasks.push({
-      id: tasks.length + 1,
-      title: 'Untitled',
+  const handleAddNewTask = (e: React.MouseEvent<HTMLDivElement>) => {
+    // TODO: Technically, we should do more calculations to account for a panned canvas
+    const { clientX, clientY } = e.nativeEvent;
+    const newTask: Task = {
+      id: tasks.length + 1, // TODO: Better way of assigning task IDs
+      title: "Untitled task",
+      description: "",
       width: 200,
       height: 100,
-      posX: 50,
-      posY: 150,
+      posX: clientX,
+      posY: clientY,
       color: "#faedcb"
+    };
+    setTaskList([...tasks, newTask]);
+    setSelectedTool(Tool.Pointer);
+    setPointerToolState({
+      ...pointerToolState,
+      _selected_task: newTask
+    });
+  }
+
+  const resetPointerToolState = () => {
+    setPointerToolState({
+      ...pointerToolState,
+      _selected_task: null
+    });
+  };
+
+  const resetArrowToolState = () => {
+    setArrowToolState({
+      ...arrowToolState,
+      _firstId: -1
     });
-    setTaskList(newTasks);
   };
 
   const updateTask = (task: Task) => {
@@ -225,18 +230,39 @@ export default function Board() {
       <div
         style={{ zoom: board_view_state.zoom }}
         // className="z-0 board-bg-grid bg-white absolute left-1/2 top-1/2"
-        className="z-0 board-bg-grid bg-white absolute h-full w-full"
+        className={`z-0 board-bg-grid bg-white absolute h-full w-full ${selectedTool == Tool.Task ? 'cursor-crosshair' : ''}`}
+        onClick={selectedTool == Tool.Task ? handleAddNewTask : undefined}
       >
         <Xwrapper>
-          {tasks.map((task, idx) => (
-            // TODO: Conditional styles based on selected tool
-            <Task
-              key={idx}
-              task={task}
-              handleTaskClick={handleTaskClick}
-              handleTaskUpdate={updateTask}
-            />
-          ))}
+          {tasks.map((task, idx) => {
+            let className = '';
+            if (pointerToolState._selected_task?.id == task.id) {
+              className += 'ring ring-offset-2 ring-primary ';
+            } else if (selectedTool == Tool.Pointer) {
+              className += 'hover:cursor-pointer hover:ring hover:ring-secondary ';
+            }
+            if (arrowToolState._firstId == task.id) {
+              className += 'ring ring-offset-2 ring-secondary ';
+            }
+            switch (selectedTool) {
+              case Tool.Move:
+                className += 'hover:cursor-move ';
+                break;
+              case Tool.Arrow:
+                className += 'hover:cursor-alias ';
+                break;
+            };
+            return (
+              <Task
+                key={idx}
+                task={task}
+                className={className}
+                isMoveable={selectedTool == Tool.Move}
+                handleTaskClick={handleTaskClick}
+                handleTaskUpdate={updateTask}
+              />
+            );
+          })}
           {arrows.map((arrow, idx) => (
             <Xarrow
               key={idx}
diff --git a/client/src/components/Task/index.tsx b/client/src/components/Task/index.tsx
index 540302e..cff24fe 100644
--- a/client/src/components/Task/index.tsx
+++ b/client/src/components/Task/index.tsx
@@ -6,12 +6,14 @@ import './styles.css';
 
 interface Props {
   task: Task;
+  className?: string;
+  isMoveable?: boolean;
   handleTaskClick: (id: number) => void;
   handleTaskUpdate: (task: Task) => void;
 };
 
 export default function Task(props: Props) {
-  const { task, handleTaskClick, handleTaskUpdate } = props;
+  const { task, className, isMoveable, handleTaskClick, handleTaskUpdate } = props;
   const target_ref = useRef(null);
   const updateXarrow = useXarrow();
   // Event handlers
@@ -55,10 +57,10 @@ export default function Task(props: Props) {
   };
 
   return (
-    <span className="absolute left-0 top-0 task-container pointer-events-none">
+    <span className={`absolute left-0 top-0 task-container pointer-events-none ${isMoveable ? "active" : ""}`}>
       <div
         id={task.id.toString()} // TODO: Add prefix
-        className="pointer-events-auto hover:cursor-pointer select-none rounded-xl p-2 text-lg overflow-hidden"
+        className={`pointer-events-auto select-none rounded-xl p-2 text-lg overflow-hidden ${className}`}
         style={{
           position: 'relative',
           left: `${task.posX}px`,
@@ -66,34 +68,35 @@ export default function Task(props: Props) {
           width: `${task.width}px`,
           height: `${task.height}px`,
           background: task.color,
-          // cursor: isAddArrowMode ? 'grab' : 'default' // TODO
         }}
         ref={target_ref}
         onClick={() => handleTaskClick(task.id)}
       >
         <p>{useDeferredValue(task.title)}</p>
       </div>
-      <Moveable
-        className="pointer-events-auto"
-        target={target_ref}
-        draggable={true}
-        resizable={true}
-        snappable={true}
-        snapThreshold={5}
-        snapDirections={['top', 'left', 'bottom', 'right']}
-        snapGridWidth={50}
-        snapGridHeight={50}
-        // isDisplayGridGuidelines={true} // TODO: Reenable!!
-        // verticalGuidelines={[-50,0,50,100,150,200,250,300,350,400,450,500,550]}
-        // horizontalGuidelines={[-50,0,50,100,150,200,250,300,350,400,450,500,550]}
-        throttleDrag={1}
-        throttleResize={1}
-        onDrag={handleDrag}
-        onDragEnd={handleDragEnd}
-        onResizeStart={handleResizeStart}
-        onResize={handleResize}
-        onResizeEnd={handleResizeEnd}
-      />
+      {isMoveable ? (
+        <Moveable
+          className="pointer-events-auto"
+          target={target_ref}
+          draggable={true}
+          resizable={true}
+          snappable={true}
+          snapThreshold={5}
+          snapDirections={['top', 'left', 'bottom', 'right']}
+          snapGridWidth={50}
+          snapGridHeight={50}
+          // isDisplayGridGuidelines={true} // TODO: Reenable!!
+          // verticalGuidelines={[-50,0,50,100,150,200,250,300,350,400,450,500,550]}
+          // horizontalGuidelines={[-50,0,50,100,150,200,250,300,350,400,450,500,550]}
+          throttleDrag={1}
+          throttleResize={1}
+          onDrag={handleDrag}
+          onDragEnd={handleDragEnd}
+          onResizeStart={handleResizeStart}
+          onResize={handleResize}
+          onResizeEnd={handleResizeEnd}
+        />
+      ) : null}
     </span>
   );
 }