Tooltip changes ready

src/components/gantt/gantt.tsx

@@ -9,12 +9,12 @@ import { TaskListTableDefault } from "../task-list/task-list-table";
 import { StandardTooltipContent } from "../other/tooltip";
 import { Scroll } from "../other/scroll";
 import { TaskListProps, TaskList } from "../task-list/task-list";
-import styles from "./gantt.module.css";
 import { TaskGantt } from "./task-gantt";
 import { BarTask } from "../../types/bar-task";
 import { convertToBarTasks } from "../../helpers/bar-helper";
 import { GanttEvent } from "../../types/gantt-task-actions";
 import { DateSetup } from "../../types/date-setup";
+import styles from "./gantt.module.css";
 
 export const Gantt: React.FunctionComponent<GanttProps> = ({
   tasks,
@@ -63,12 +63,13 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
 
   const [selectedTask, setSelectedTask] = useState<BarTask>();
   const [failedTask, setFailedTask] = useState<BarTask | null>(null);
+
   const [scrollY, setScrollY] = useState(0);
   const [scrollX, setScrollX] = useState(0);
   const [ignoreScrollEvent, setIgnoreScrollEvent] = useState(false);
 
   const svgHeight = rowHeight * barTasks.length;
-  const gridWidth = dateSetup.dates.length * columnWidth;
+  const svgWidth = dateSetup.dates.length * columnWidth;
   const ganttFullHeight = barTasks.length * rowHeight;
 
   // task change events
@@ -226,20 +227,18 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     }
     if (isX) {
       if (newScrollX < 0) {
-        setScrollX(0);
-      } else if (newScrollX > gridWidth) {
-        setScrollX(gridWidth);
-      } else {
-        setScrollX(newScrollX);
+        newScrollX = 0;
+      } else if (newScrollX > svgWidth) {
+        newScrollX = svgWidth;
       }
+      setScrollX(newScrollX);
     } else {
       if (newScrollY < 0) {
-        setScrollY(0);
+        newScrollY = 0;
       } else if (newScrollY > ganttFullHeight - ganttHeight) {
-        setScrollY(ganttFullHeight - ganttHeight);
-      } else {
-        setScrollY(newScrollY);
+        newScrollY = ganttFullHeight - ganttHeight;
       }
+      setScrollY(newScrollY);
     }
     setIgnoreScrollEvent(true);
   };
@@ -265,7 +264,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
 
   const gridProps: GridProps = {
     columnWidth,
-    gridWidth,
+    svgWidth,
     tasks: tasks,
     rowHeight,
     dates: dateSetup.dates,
@@ -294,6 +293,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     fontSize,
     arrowIndent,
     svgHeight,
+    svgWidth,
     setGanttEvent,
     setFailedTask,
     setSelectedTask: handleSelectedTask,
@@ -320,7 +320,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     TaskListHeader,
     TaskListTable,
   };
-  debugger;
   return (
     <div
       className={styles.wrapper}

src/components/gantt/task-gantt-content.tsx

@@ -22,6 +22,8 @@ export type TaskGanttContentProps = {
   timeStep: number;
   svg?: React.RefObject<SVGSVGElement>;
   svgHeight: number;
+  svgWidth: number;
+  displayXEndpoint?: number;
   taskHeight: number;
   arrowColor: string;
   arrowIndent: number;
@@ -47,6 +49,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   timeStep,
   svg,
   svgHeight,
+  displayXEndpoint,
   taskHeight,
   arrowColor,
   arrowIndent,
@@ -287,11 +290,12 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         })}
       </g>
       <g className="toolTip">
-        {ganttEvent.changedTask && (
+        {ganttEvent.changedTask && displayXEndpoint && (
           <Tooltip
-            x={ganttEvent.changedTask.x2 + arrowIndent + arrowIndent * 0.5}
+            arrowIndent={arrowIndent}
             rowHeight={rowHeight}
             svgHeight={svgHeight}
+            displayXEndpoint={displayXEndpoint}
             task={ganttEvent.changedTask}
             fontFamily={fontFamily}
             fontSize={fontSize}

src/components/gantt/task-gantt.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, SyntheticEvent } from "react";
+import React, { useRef, useEffect, SyntheticEvent, useState } from "react";
 import { GridProps, Grid } from "../grid/grid";
 import { CalendarProps, Calendar } from "../calendar/calendar";
 import { TaskGanttContentProps, TaskGanttContent } from "./task-gantt-content";
@@ -25,7 +25,8 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
   const ganttSVGRef = useRef<SVGSVGElement>(null);
   const horizontalContainerRef = useRef<HTMLDivElement>(null);
   const verticalContainerRef = useRef<HTMLDivElement>(null);
-  const newBarProps = { ...barProps, svg: ganttSVGRef };
+  const [displayXEndpoint, setDisplayXEndpoint] = useState(0);
+  const newBarProps = { ...barProps, svg: ganttSVGRef, displayXEndpoint };
 
   useEffect(() => {
     if (horizontalContainerRef.current) {
@@ -36,8 +37,10 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
   useEffect(() => {
     if (verticalContainerRef.current) {
       verticalContainerRef.current.scrollLeft = scrollX;
+      setDisplayXEndpoint(verticalContainerRef.current.clientWidth + scrollX);
     }
-  }, [scrollX]);
+    // verticalContainerRef.current?.clientWidth need for resize window tracking
+  }, [scrollX, verticalContainerRef.current?.clientWidth]);
 
   return (
     <div
@@ -47,7 +50,7 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={gridProps.gridWidth}
+        width={gridProps.svgWidth}
         height={calendarProps.headerHeight}
         fontFamily={barProps.fontFamily}
       >
@@ -58,13 +61,13 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
         className={styles.horizontalContainer}
         style={
           ganttHeight
-            ? { height: ganttHeight, width: gridProps.gridWidth }
-            : { width: gridProps.gridWidth }
+            ? { height: ganttHeight, width: gridProps.svgWidth }
+            : { width: gridProps.svgWidth }
         }
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width={gridProps.gridWidth}
+          width={gridProps.svgWidth}
           height={barProps.rowHeight * barProps.tasks.length}
           fontFamily={barProps.fontFamily}
           ref={ganttSVGRef}

src/components/grid/grid-body.tsx

@@ -6,7 +6,7 @@ import styles from "./grid.module.css";
 export type GridBodyProps = {
   tasks: Task[];
   dates: Date[];
-  gridWidth: number;
+  svgWidth: number;
   rowHeight: number;
   columnWidth: number;
   todayColor: string;
@@ -15,7 +15,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
   tasks,
   dates,
   rowHeight,
-  gridWidth,
+  svgWidth,
   columnWidth,
   todayColor,
 }) => {
@@ -26,7 +26,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
       key="RowLineFirst"
       x="0"
       y1={0}
-      x2={gridWidth}
+      x2={svgWidth}
       y2={0}
       className={styles.gridRowLine}
     />,
@@ -37,7 +37,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
         key={"Row" + task.id}
         x="0"
         y={y}
-        width={gridWidth}
+        width={svgWidth}
         height={rowHeight}
         className={styles.gridRow}
       />
@@ -47,7 +47,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
         key={"RowLine" + task.id}
         x="0"
         y1={y + rowHeight}
-        x2={gridWidth}
+        x2={svgWidth}
         y2={y + rowHeight}
         className={styles.gridRowLine}
       />

src/components/other/tooltip.tsx

@@ -4,10 +4,11 @@ import { BarTask } from "../../types/bar-task";
 import styles from "./tooltip.module.css";
 
 export type TooltipProps = {
-  x: number;
-  svgHeight: number;
-  rowHeight: number;
   task: BarTask;
+  arrowIndent: number;
+  svgHeight: number;
+  displayXEndpoint: number;
+  rowHeight: number;
   fontSize: string;
   fontFamily: string;
   TooltipContent: React.FC<{
@@ -17,31 +18,37 @@ export type TooltipProps = {
   }>;
 };
 export const Tooltip: React.FC<TooltipProps> = ({
-  x,
+  task,
   rowHeight,
   svgHeight,
-  task,
+  displayXEndpoint,
+  arrowIndent,
   fontSize,
   fontFamily,
   TooltipContent,
 }) => {
   const tooltipRef = useRef<HTMLDivElement | null>(null);
   const [toolWidth, setToolWidth] = useState(1000);
-  const [relatedY, setRelatedY] = useState((task.index - 1) * rowHeight);
+  const [relatedY, setRelatedY] = useState(task.index * rowHeight);
+  const [relatedX, setRelatedX] = useState(displayXEndpoint);
   useEffect(() => {
     if (tooltipRef.current) {
       const tooltipHeight = tooltipRef.current.offsetHeight;
-      const tooltipY = task.index * rowHeight + rowHeight;
-      if (tooltipHeight > tooltipY) {
-        setRelatedY(tooltipHeight * 0.5);
-      } else if (tooltipY + tooltipHeight > svgHeight) {
+      const tooltipY = task.index * rowHeight;
+      if (tooltipY + tooltipHeight > svgHeight) {
         setRelatedY(svgHeight - tooltipHeight * 1.05);
       }
-      setToolWidth(tooltipRef.current.scrollWidth * 1.1);
+      const newWidth = tooltipRef.current.scrollWidth * 1.1;
+      let newRelatedX = task.x2 + arrowIndent + arrowIndent * 0.5;
+      if (newWidth + newRelatedX > displayXEndpoint) {
+        newRelatedX = task.x1 - arrowIndent - arrowIndent * 0.5 - newWidth;
+      }
+      setToolWidth(newWidth);
+      setRelatedX(newRelatedX);
     }
-  }, [tooltipRef, task]);
+  }, [tooltipRef, task, arrowIndent, displayXEndpoint]);
   return (
-    <foreignObject x={x} y={relatedY} width={toolWidth} height={1000}>
+    <foreignObject x={relatedX} y={relatedY} width={toolWidth} height={1000}>
       <div ref={tooltipRef} className={styles.tooltipDetailsContainer}>
         <TooltipContent
           task={task}

src/components/task-item/bar/bar.module.css

@@ -13,7 +13,6 @@
   cursor: ew-resize;
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.3s ease;
 }
 
 .barBackground {