From 02638ebe5068e05d1c00ad68eb66fddb51a7c8d3 Mon Sep 17 00:00:00 2001
From: Aquiles Oliveira de Souza
 <aquilesoliveira@MacBook-Air-de-Aquiles-2.local>
Date: Fri, 21 Oct 2022 14:25:54 -0300
Subject: [PATCH] Added click arrow event

---
 src/components/gantt/gantt.tsx              |  2 ++
 src/components/gantt/task-gantt-content.tsx |  4 +++-
 src/components/other/arrow.tsx              | 21 ++++++++++++++++++---
 src/types/public-types.ts                   |  4 ++++
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
index b90483f3d..e415cc602 100644
--- a/src/components/gantt/gantt.tsx
+++ b/src/components/gantt/gantt.tsx
@@ -62,6 +62,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   onProgressChange,
   onDoubleClick,
   onClick,
+  onClickLine,
   onDelete,
   onSelect,
   onExpanderClick,
@@ -428,6 +429,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onProgressChange,
     onDoubleClick,
     onClick,
+    onClickLine,
     onDelete,
   };
 
diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx
index 33326df92..a59354fb7 100644
--- a/src/components/gantt/task-gantt-content.tsx
+++ b/src/components/gantt/task-gantt-content.tsx
@@ -54,6 +54,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   onProgressChange,
   onDoubleClick,
   onClick,
+  onClickLine,
   onDelete,
 }) => {
   const point = svg?.current?.createSVGPoint();
@@ -266,7 +267,8 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         {tasks.map(task => {
           return task.barChildren.map(child => {
             return (
-              <Arrow
+              <Arrow 
+                onClickLine={(tasks: BarTask[]) => onClickLine ? onClickLine(tasks) : null}
                 key={`Arrow from ${task.id} to ${tasks[child.index].id}`}
                 taskFrom={task}
                 taskTo={tasks[child.index]}
diff --git a/src/components/other/arrow.tsx b/src/components/other/arrow.tsx
index 52e8f28b4..bbbce0095 100644
--- a/src/components/other/arrow.tsx
+++ b/src/components/other/arrow.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { BarTask } from "../../types/bar-task";
 
 type ArrowProps = {
@@ -8,6 +8,7 @@ type ArrowProps = {
   taskHeight: number;
   arrowIndent: number;
   rtl: boolean;
+  onClickLine?: (tasks: BarTask[]) => void;
 };
 export const Arrow: React.FC<ArrowProps> = ({
   taskFrom,
@@ -16,9 +17,13 @@ export const Arrow: React.FC<ArrowProps> = ({
   taskHeight,
   arrowIndent,
   rtl,
+  onClickLine,
 }) => {
   let path: string;
   let trianglePoints: string;
+  const strokeWidthDefault = "1.5";
+  const [strokeWidth, setStrokeWidth] = useState<string>(strokeWidthDefault);
+  
   if (rtl) {
     [path, trianglePoints] = drownPathAndTriangleRTL(
       taskFrom,
@@ -37,9 +42,19 @@ export const Arrow: React.FC<ArrowProps> = ({
     );
   }
 
+  const clickLine = () => {
+    if (onClickLine) {
+      onClickLine([taskFrom, taskTo]);
+    }
+  }
+
   return (
-    <g className="arrow">
-      <path strokeWidth="1.5" d={path} fill="none" />
+    <g className="arrow" 
+      stroke={strokeWidth}
+      onMouseEnter={() => setStrokeWidth("2")} 
+      onMouseLeave={() => setStrokeWidth(strokeWidthDefault)} 
+      onClick={clickLine}>
+      <path strokeWidth={strokeWidth} d={path} fill="none" />
       <polygon points={trianglePoints} />
     </g>
   );
diff --git a/src/types/public-types.ts b/src/types/public-types.ts
index f4c641a6b..ff01860f4 100644
--- a/src/types/public-types.ts
+++ b/src/types/public-types.ts
@@ -49,6 +49,10 @@ export interface EventOption {
    * Invokes on bar click.
    */
   onClick?: (task: Task) => void;
+  /**
+   * Invokes on bar click.
+   */
+  onClickLine?: (tasks: Task[]) => void;
   /**
    * Invokes on end and start time change. Chart undoes operation if method return false or error.
    */