tooltip is not a part of foreignObject anymore

Author: MaTeMaTuK

example/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

package.json

@@ -17,4 +17,5 @@
   margin: 0;
   list-style: none;
   outline: none;
+  position: relative;
 }

src/components/gantt/gantt.module.css

@@ -6,7 +6,7 @@ import { CalendarProps } from "../calendar/calendar";
 import { TaskGanttContentProps } from "./task-gantt-content";
 import { TaskListHeaderDefault } from "../task-list/task-list-header";
 import { TaskListTableDefault } from "../task-list/task-list-table";
-import { StandardTooltipContent } from "../other/tooltip";
+import { StandardTooltipContent, Tooltip } from "../other/tooltip";
 import { VerticalScroll } from "../other/vertical-scroll";
 import { TaskListProps, TaskList } from "../task-list/task-list";
 import { TaskGantt } from "./task-gantt";
@@ -56,14 +56,15 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
 }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const taskListRef = useRef<HTMLDivElement>(null);
-  const verticalGanttContainerRef = useRef<HTMLDivElement>(null);
   const [dateSetup, setDateSetup] = useState<DateSetup>(() => {
     const [startDate, endDate] = ganttDateRange(tasks, viewMode);
     return { viewMode, dates: seedDates(startDate, endDate, viewMode) };
   });
 
   const [taskHeight, setTaskHeight] = useState((rowHeight * barFill) / 100);
   const [taskListWidth, setTaskListWidth] = useState(0);
+  const [svgContainerWidth, setSvgContainerWidth] = useState(0);
+  const [svgContainerHeight, setSvgContainerHeight] = useState(ganttHeight);
   const [barTasks, setBarTasks] = useState<BarTask[]>([]);
   const [ganttEvent, setGanttEvent] = useState<GanttEvent>({
     action: "",
@@ -76,7 +77,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   const [scrollX, setScrollX] = useState(0);
   const [ignoreScrollEvent, setIgnoreScrollEvent] = useState(false);
 
-  const svgHeight = rowHeight * barTasks.length;
   const svgWidth = dateSetup.dates.length * columnWidth;
   const ganttFullHeight = barTasks.length * rowHeight;
 
@@ -170,10 +170,27 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   }, [rowHeight, barFill, taskHeight]);
 
   useEffect(() => {
+    if (!listCellWidth) {
+      setTaskListWidth(0);
+    }
     if (taskListRef.current) {
       setTaskListWidth(taskListRef.current.offsetWidth);
     }
-  }, [taskListRef]);
+  }, [taskListRef, listCellWidth]);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth);
+    }
+  }, [wrapperRef, taskListWidth]);
+
+  useEffect(() => {
+    if (ganttHeight) {
+      setSvgContainerHeight(ganttHeight + headerHeight);
+    } else {
+      setSvgContainerHeight(tasks.length * rowHeight + headerHeight);
+    }
+  }, [ganttHeight, tasks]);
 
   // scroll events
   useEffect(() => {
@@ -326,7 +343,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     fontFamily,
     fontSize,
     arrowIndent,
-    svgHeight,
     svgWidth,
     setGanttEvent,
     setFailedTask,
@@ -335,7 +351,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onProgressChange,
     onDoubleClick,
     onDelete,
-    TooltipContent,
   };
 
   const tableProps: TaskListProps = {
@@ -371,8 +386,23 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
           ganttHeight={ganttHeight}
           scrollY={scrollY}
           scrollX={scrollX}
-          verticalGanttContainerRef={verticalGanttContainerRef}
         />
+        {ganttEvent.changedTask && (
+          <Tooltip
+            arrowIndent={arrowIndent}
+            rowHeight={rowHeight}
+            svgContainerHeight={svgContainerHeight}
+            svgContainerWidth={svgContainerWidth}
+            fontFamily={fontFamily}
+            fontSize={fontSize}
+            scrollX={scrollX}
+            scrollY={scrollY}
+            task={ganttEvent.changedTask}
+            headerHeight={headerHeight}
+            taskListWidth={taskListWidth}
+            TooltipContent={TooltipContent}
+          />
+        )}
         <VerticalScroll
           ganttFullHeight={ganttFullHeight}
           ganttHeight={ganttHeight}

src/components/gantt/gantt.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { Task, EventOption } from "../../types/public-types";
+import { EventOption } from "../../types/public-types";
 import { BarTask } from "../../types/bar-task";
 import { Arrow } from "../other/arrow";
 import { handleTaskBySVGMouseEvent } from "../../helpers/bar-helper";
-import { Tooltip } from "../other/tooltip";
 import { isKeyboardEvent } from "../../helpers/other-helper";
 import { TaskItem } from "../task-item/task-item";
 import {
@@ -21,12 +20,7 @@ export type TaskGanttContentProps = {
   columnWidth: number;
   timeStep: number;
   svg?: React.RefObject<SVGSVGElement>;
-  svgHeight: number;
   svgWidth: number;
-  displayXStartEndpoint?: {
-    start: number;
-    end: number;
-  };
   taskHeight: number;
   arrowColor: string;
   arrowIndent: number;
@@ -35,11 +29,6 @@ export type TaskGanttContentProps = {
   setGanttEvent: (value: GanttEvent) => void;
   setFailedTask: (value: BarTask | null) => void;
   setSelectedTask: (taskId: string) => void;
-  TooltipContent: React.FC<{
-    task: Task;
-    fontSize: string;
-    fontFamily: string;
-  }>;
 } & EventOption;
 
 export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
@@ -51,8 +40,6 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   columnWidth,
   timeStep,
   svg,
-  svgHeight,
-  displayXStartEndpoint,
   taskHeight,
   arrowColor,
   arrowIndent,
@@ -65,7 +52,6 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   onProgressChange,
   onDoubleClick,
   onDelete,
-  TooltipContent,
 }) => {
   const point = svg?.current?.createSVGPoint();
   const [xStep, setXStep] = useState(0);
@@ -292,20 +278,6 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
           );
         })}
       </g>
-      <g className="toolTip">
-        {ganttEvent.changedTask && displayXStartEndpoint && (
-          <Tooltip
-            arrowIndent={arrowIndent}
-            rowHeight={rowHeight}
-            svgHeight={svgHeight}
-            displayXStartEndpoint={displayXStartEndpoint}
-            task={ganttEvent.changedTask}
-            fontFamily={fontFamily}
-            fontSize={fontSize}
-            TooltipContent={TooltipContent}
-          />
-        )}
-      </g>
     </g>
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect } from "react";
 import { GridProps, Grid } from "../grid/grid";
 import { CalendarProps, Calendar } from "../calendar/calendar";
 import { TaskGanttContentProps, TaskGanttContent } from "./task-gantt-content";
@@ -11,7 +11,6 @@ export type TaskGanttProps = {
   ganttHeight: number;
   scrollY: number;
   scrollX: number;
-  verticalGanttContainerRef: React.RefObject<HTMLDivElement>;
 };
 export const TaskGantt: React.FC<TaskGanttProps> = ({
   gridProps,
@@ -20,15 +19,11 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
   ganttHeight,
   scrollY,
   scrollX,
-  verticalGanttContainerRef,
 }) => {
   const ganttSVGRef = useRef<SVGSVGElement>(null);
   const horizontalContainerRef = useRef<HTMLDivElement>(null);
-  const [displayXStartEndpoint, setDisplayXStartEndpoint] = useState({
-    start: 0,
-    end: 0,
-  });
-  const newBarProps = { ...barProps, svg: ganttSVGRef, displayXStartEndpoint };
+  const verticalGanttContainerRef = useRef<HTMLDivElement>(null);
+  const newBarProps = { ...barProps, svg: ganttSVGRef };
 
   useEffect(() => {
     if (horizontalContainerRef.current) {
@@ -39,13 +34,8 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
   useEffect(() => {
     if (verticalGanttContainerRef.current) {
       verticalGanttContainerRef.current.scrollLeft = scrollX;
-      setDisplayXStartEndpoint({
-        start: scrollX,
-        end: verticalGanttContainerRef.current.clientWidth + scrollX,
-      });
     }
-    // verticalContainerRef.current?.clientWidth need for resize window tracking
-  }, [scrollX, verticalGanttContainerRef.current?.clientWidth]);
+  }, [scrollX]);
 
   return (
     <div

src/components/gantt/task-gantt.tsx

@@ -11,5 +11,20 @@
 }
 
 .tooltipDetailsContainer {
-  display: table;
+  position: absolute;
+  display: flex;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.tooltipDetailsContainerHidden {
+  visibility: hidden;
+  position: absolute;
+  display: flex;
+  pointer-events: none;
 }