@thepocman/gantt-task-react 1.0.31 → 1.0.34

package/dist/components/task-item/task-item.d.ts

@@ -1,11 +1,13 @@
 import type { MouseEvent } from "react";
 import React from "react";
 import { GanttRelationEvent } from "../../types/gantt-task-actions";
-import { BarMoveAction, ChildOutOfParentWarnings, ColorStyles, DateExtremity, Distances, FixPosition, RelationKind, Task, TaskOrEmpty } from "../../types/public-types";
+import { BarMoveAction, ChildOutOfParentWarnings, ColorStyles, DateExtremity, Distances, FixPosition, RelationKind, RowIndexToTasksMap, Task, TaskOrEmpty, TaskToRowIndexMap } from "../../types/public-types";
 export type TaskItemProps = {
     children?: React.ReactNode;
     getTaskGlobalIndexByRef: (task: Task) => number;
     hasChildren: boolean;
+    rowIndexToTasksMap: RowIndexToTasksMap;
+    taskToRowIndexMap: TaskToRowIndexMap;
     hasDependencyWarning: boolean;
     progressWidth: number;
     progressX: number;

package/dist/gantt-task-react.es.js

@@ -4228,6 +4228,7 @@ const TaskListTableDefaultInner = ({
           if (taskIndex) {
             [depth, indexStr] = taskIndex;
           }
+          console.log("colors :>> ", colors);
           renderList.push(
             /* @__PURE__ */ jsx(
               TaskListTableRow,
@@ -4814,7 +4815,6 @@ const Calendar = ({
       );
       const dayOfMonth = date.getDate();
       const prevDate = getDate(i2 - 1);
-      console.log("testing center :>> ", additionalLeftSpace + columnWidth * i2 + ticks * columnWidth * 0.5);
       if (!isUnknownDates && dayOfMonth !== prevDate.getDate()) {
         const topValue = renderTopHeaderByDate(date);
         topValues2.push(
@@ -5013,7 +5013,6 @@ const GridBodyInner = ({
         startColumnIndex
       )) {
         const x3 = additionalLeftSpace + columnWidth * i2;
-        console.log("drawing divider at x:", x3, "for index:", i2, "date:", currentDate);
         dividers.push(
           /* @__PURE__ */ jsx(
             "line",
@@ -5578,10 +5577,35 @@ const RelationLine = ({
     }
   );
 };
-const hoverVisibleWrapper = "_hoverVisibleWrapper_11ld1_1";
-const wrapper = "_wrapper_11ld1_1";
-const mainPath = "_mainPath_11ld1_17";
-const clickZone = "_clickZone_11ld1_35";
+const truncateText = (text, maxWidth, textElement) => {
+  if (!textElement)
+    return text;
+  textElement.textContent = text;
+  const fullWidth = textElement.getBBox().width;
+  if (fullWidth <= maxWidth) {
+    return text;
+  }
+  let start = 0;
+  let end = text.length;
+  let result = text;
+  while (start <= end) {
+    const mid = Math.floor((start + end) / 2);
+    const truncated = text.substring(0, mid);
+    textElement.textContent = truncated;
+    const truncatedWidth = textElement.getBBox().width;
+    if (truncatedWidth <= maxWidth) {
+      result = truncated;
+      start = mid + 1;
+    } else {
+      end = mid - 1;
+    }
+  }
+  return result;
+};
+const hoverVisibleWrapper = "_hoverVisibleWrapper_8hbnp_1";
+const wrapper = "_wrapper_8hbnp_1";
+const mainPath = "_mainPath_8hbnp_17";
+const clickZone = "_clickZone_8hbnp_35";
 const styles$4 = {
   hoverVisibleWrapper,
   wrapper,
@@ -6273,8 +6297,8 @@ const Milestone = ({
     }
   );
 };
-const barLabel = "_barLabel_y0tyg_1";
-const barLabelOutside = "_barLabelOutside_y0tyg_25";
+const barLabel = "_barLabel_7emdt_1";
+const barLabelOutside = "_barLabelOutside_7emdt_25";
 const style = {
   barLabel,
   barLabelOutside
@@ -6351,6 +6375,7 @@ const TaskWarningInner = ({
 };
 const TaskWarning = memo(TaskWarningInner);
 const TaskItemInner = (props) => {
+  var _a, _b, _c;
   const {
     childOutOfParentWarnings,
     colorStyles: stylesProp,
@@ -6380,6 +6405,8 @@ const TaskItemInner = (props) => {
     selectTaskOnMouseDown,
     setTooltipTask,
     enableTaskGrouping,
+    taskToRowIndexMap,
+    rowIndexToTasksMap,
     task,
     task: { styles: taskStyles },
     taskHalfHeight,
@@ -6432,6 +6459,11 @@ const TaskItemInner = (props) => {
     const globalIndex = getTaskGlobalIndexByRef(task);
     fixEndPosition(task, end.date, globalIndex);
   }, [task, fixEndPosition, outOfParentWarnings, getTaskGlobalIndexByRef]);
+  const taskRowIndex = (_a = taskToRowIndexMap == null ? void 0 : taskToRowIndexMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _a.get(task.id);
+  if (taskRowIndex === void 0)
+    return null;
+  const isSharedRow = (((_c = (_b = rowIndexToTasksMap == null ? void 0 : rowIndexToTasksMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _b.get(taskRowIndex)) == null ? void 0 : _c.length) ?? 0) > 1;
+  const isInCollapsedGroup = !!enableTaskGrouping && isSharedRow;
   const handleClick = useCallback(
     (event) => {
       if (onClick) {
@@ -6465,6 +6497,8 @@ const TaskItemInner = (props) => {
   }, [onRelationStart, rtl, task]);
   const textRef = useRef(null);
   const [isTextInside, setIsTextInside] = useState(true);
+  const [truncatedText, setTruncatedText] = useState(task.name);
+  console.log("truncatedText", truncatedText);
   const taskItem = useMemo(() => {
     const isFromStartRelationAuthorized = authorizedRelations.includes("startToStart") || authorizedRelations.includes("startToEnd");
     const isFromEndRelationAuthorized = authorizedRelations.includes("endToEnd") || authorizedRelations.includes("endToStart");
@@ -6547,10 +6581,15 @@ const TaskItemInner = (props) => {
     width
   ]);
   useEffect(() => {
-    if (textRef.current) {
+    if (!textRef.current)
+      return;
+    if (isInCollapsedGroup) {
+      const truncated = truncateText(task.name, width - 10, textRef.current);
+      setTruncatedText(truncated);
+    } else {
       setIsTextInside(textRef.current.getBBox().width < width);
     }
-  }, [textRef, width]);
+  }, [isInCollapsedGroup, task.name, width]);
   const x3 = useMemo(() => {
     if (isTextInside) {
       return x1 + width * 0.5;
@@ -6560,6 +6599,9 @@ const TaskItemInner = (props) => {
     }
     return x1 + width + arrowIndent * 1.2;
   }, [x1, width, isTextInside, rtl, arrowIndent]);
+  const textForRender = isInCollapsedGroup ? "" : task.name;
+  console.log("testForRender", textForRender);
+  const xForRender = isInCollapsedGroup ? x1 + width * 0.5 : x3;
   const onMouseDown = useCallback(
     (event) => {
       selectTaskOnMouseDown(task.id, event);
@@ -6603,11 +6645,11 @@ const TaskItemInner = (props) => {
           "text",
           {
             fill: barLabelFill,
-            x: x3,
+            x: xForRender,
             y: taskYOffset + taskHeight * 0.5,
             className: isTextInside ? style.barLabel : style.barLabel && style.barLabelOutside,
             ref: textRef,
-            children: enableTaskGrouping ? isTextInside ? task.name : "" : task.name
+            children: textForRender
           }
         ),
         (outOfParentWarnings || hasDependencyWarning) && /* @__PURE__ */ jsx(
@@ -6776,6 +6818,9 @@ const TaskGanttContent = ({
               children: /* @__PURE__ */ jsx(
                 TaskItem,
                 {
+                  enableTaskGrouping,
+                  taskToRowIndexMap,
+                  rowIndexToTasksMap,
                   getTaskGlobalIndexByRef,
                   hasChildren: checkHasChildren(task, childTasksMap),
                   hasDependencyWarning: taskToHasDependencyWarningMap ? checkTaskHasDependencyWarning(task, taskToHasDependencyWarningMap) : false,
@@ -6808,8 +6853,7 @@ const TaskGanttContent = ({
                   fixStartPosition,
                   fixEndPosition,
                   handleDeleteTasks,
-                  colorStyles,
-                  enableTaskGrouping
+                  colorStyles
                 }
               )
             },

package/dist/gantt-task-react.umd.js

@@ -4241,6 +4241,7 @@
             if (taskIndex) {
               [depth, indexStr] = taskIndex;
             }
+            console.log("colors :>> ", colors);
             renderList.push(
               /* @__PURE__ */ jsxRuntime.jsx(
                 TaskListTableRow,
@@ -4827,7 +4828,6 @@
         );
         const dayOfMonth = date.getDate();
         const prevDate = getDate(i - 1);
-        console.log("testing center :>> ", additionalLeftSpace + columnWidth * i + ticks * columnWidth * 0.5);
         if (!isUnknownDates && dayOfMonth !== prevDate.getDate()) {
           const topValue = renderTopHeaderByDate(date);
           topValues2.push(
@@ -5026,7 +5026,6 @@
           startColumnIndex
         )) {
           const x2 = additionalLeftSpace + columnWidth * i;
-          console.log("drawing divider at x:", x2, "for index:", i, "date:", currentDate);
           dividers.push(
             /* @__PURE__ */ jsxRuntime.jsx(
               "line",
@@ -5591,10 +5590,35 @@
       }
     );
   };
-  const hoverVisibleWrapper = "_hoverVisibleWrapper_11ld1_1";
-  const wrapper = "_wrapper_11ld1_1";
-  const mainPath = "_mainPath_11ld1_17";
-  const clickZone = "_clickZone_11ld1_35";
+  const truncateText = (text, maxWidth, textElement) => {
+    if (!textElement)
+      return text;
+    textElement.textContent = text;
+    const fullWidth = textElement.getBBox().width;
+    if (fullWidth <= maxWidth) {
+      return text;
+    }
+    let start = 0;
+    let end = text.length;
+    let result = text;
+    while (start <= end) {
+      const mid = Math.floor((start + end) / 2);
+      const truncated = text.substring(0, mid);
+      textElement.textContent = truncated;
+      const truncatedWidth = textElement.getBBox().width;
+      if (truncatedWidth <= maxWidth) {
+        result = truncated;
+        start = mid + 1;
+      } else {
+        end = mid - 1;
+      }
+    }
+    return result;
+  };
+  const hoverVisibleWrapper = "_hoverVisibleWrapper_8hbnp_1";
+  const wrapper = "_wrapper_8hbnp_1";
+  const mainPath = "_mainPath_8hbnp_17";
+  const clickZone = "_clickZone_8hbnp_35";
   const styles$4 = {
     hoverVisibleWrapper,
     wrapper,
@@ -6286,8 +6310,8 @@
       }
     );
   };
-  const barLabel = "_barLabel_y0tyg_1";
-  const barLabelOutside = "_barLabelOutside_y0tyg_25";
+  const barLabel = "_barLabel_7emdt_1";
+  const barLabelOutside = "_barLabelOutside_7emdt_25";
   const style = {
     barLabel,
     barLabelOutside
@@ -6364,6 +6388,7 @@
   };
   const TaskWarning = React.memo(TaskWarningInner);
   const TaskItemInner = (props) => {
+    var _a, _b, _c;
     const {
       childOutOfParentWarnings,
       colorStyles: stylesProp,
@@ -6393,6 +6418,8 @@
       selectTaskOnMouseDown,
       setTooltipTask,
       enableTaskGrouping,
+      taskToRowIndexMap,
+      rowIndexToTasksMap,
       task,
       task: { styles: taskStyles },
       taskHalfHeight,
@@ -6445,6 +6472,11 @@
       const globalIndex = getTaskGlobalIndexByRef(task);
       fixEndPosition(task, end.date, globalIndex);
     }, [task, fixEndPosition, outOfParentWarnings, getTaskGlobalIndexByRef]);
+    const taskRowIndex = (_a = taskToRowIndexMap == null ? void 0 : taskToRowIndexMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _a.get(task.id);
+    if (taskRowIndex === void 0)
+      return null;
+    const isSharedRow = (((_c = (_b = rowIndexToTasksMap == null ? void 0 : rowIndexToTasksMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _b.get(taskRowIndex)) == null ? void 0 : _c.length) ?? 0) > 1;
+    const isInCollapsedGroup = !!enableTaskGrouping && isSharedRow;
     const handleClick = React.useCallback(
       (event) => {
         if (onClick) {
@@ -6478,6 +6510,8 @@
     }, [onRelationStart, rtl, task]);
     const textRef = React.useRef(null);
     const [isTextInside, setIsTextInside] = React.useState(true);
+    const [truncatedText, setTruncatedText] = React.useState(task.name);
+    console.log("truncatedText", truncatedText);
     const taskItem = React.useMemo(() => {
       const isFromStartRelationAuthorized = authorizedRelations.includes("startToStart") || authorizedRelations.includes("startToEnd");
       const isFromEndRelationAuthorized = authorizedRelations.includes("endToEnd") || authorizedRelations.includes("endToStart");
@@ -6560,10 +6594,15 @@
       width
     ]);
     React.useEffect(() => {
-      if (textRef.current) {
+      if (!textRef.current)
+        return;
+      if (isInCollapsedGroup) {
+        const truncated = truncateText(task.name, width - 10, textRef.current);
+        setTruncatedText(truncated);
+      } else {
         setIsTextInside(textRef.current.getBBox().width < width);
       }
-    }, [textRef, width]);
+    }, [isInCollapsedGroup, task.name, width]);
     const x3 = React.useMemo(() => {
       if (isTextInside) {
         return x1 + width * 0.5;
@@ -6573,6 +6612,9 @@
       }
       return x1 + width + arrowIndent * 1.2;
     }, [x1, width, isTextInside, rtl, arrowIndent]);
+    const textForRender = isInCollapsedGroup ? "" : task.name;
+    console.log("testForRender", textForRender);
+    const xForRender = isInCollapsedGroup ? x1 + width * 0.5 : x3;
     const onMouseDown = React.useCallback(
       (event) => {
         selectTaskOnMouseDown(task.id, event);
@@ -6616,11 +6658,11 @@
             "text",
             {
               fill: barLabelFill,
-              x: x3,
+              x: xForRender,
               y: taskYOffset + taskHeight * 0.5,
               className: isTextInside ? style.barLabel : style.barLabel && style.barLabelOutside,
               ref: textRef,
-              children: enableTaskGrouping ? isTextInside ? task.name : "" : task.name
+              children: textForRender
             }
           ),
           (outOfParentWarnings || hasDependencyWarning) && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6789,6 +6831,9 @@
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   TaskItem,
                   {
+                    enableTaskGrouping,
+                    taskToRowIndexMap,
+                    rowIndexToTasksMap,
                     getTaskGlobalIndexByRef,
                     hasChildren: checkHasChildren(task, childTasksMap),
                     hasDependencyWarning: taskToHasDependencyWarningMap ? checkTaskHasDependencyWarning(task, taskToHasDependencyWarningMap) : false,
@@ -6821,8 +6866,7 @@
                     fixStartPosition,
                     fixEndPosition,
                     handleDeleteTasks,
-                    colorStyles,
-                    enableTaskGrouping
+                    colorStyles
                   }
                 )
               },

package/dist/helpers/truncate-task-label.d.ts

@@ -0,0 +1 @@
+export declare const truncateText: (text: string, maxWidth: number, textElement: SVGTextElement | null) => string;

package/dist/style.css

@@ -440,28 +440,27 @@
   stroke-width: 2;
   stroke-dasharray: 4;
 }
-._hoverVisibleWrapper_11ld1_1:hover ._wrapper_11ld1_1 {
+._hoverVisibleWrapper_8hbnp_1:hover ._wrapper_8hbnp_1 {
   display: initial;
 }
 
-._wrapper_11ld1_1 {
+._wrapper_8hbnp_1 {
   cursor: pointer;
 }
 
-._wrapper_11ld1_1:hover ._mainPath_11ld1_17 {
+._wrapper_8hbnp_1:hover ._mainPath_8hbnp_17 {
   filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .7));
 }
 
-._mainPath_11ld1_17 {
+._mainPath_8hbnp_17 {
   fill: none;
   stroke-width: 1.5px;
 }
 
-._clickZone_11ld1_35 {
+._clickZone_8hbnp_35 {
   fill: transparent;
   stroke: transparent;
-}
-._barWrapper_1kg71_1 {
+}._barWrapper_1kg71_1 {
   cursor: pointer;
   outline: none;
 }
@@ -521,7 +520,7 @@
 ._milestoneBackground_vcirf_11 {
   user-select: none;
 }
-._barLabel_y0tyg_1 {
+._barLabel_7emdt_1 {
   text-anchor: middle;
   font-weight: lighter;
   dominant-baseline: central;
@@ -533,7 +532,7 @@
   pointer-events: none;
 }
 
-._barLabelOutside_y0tyg_25 {
+._barLabelOutside_7emdt_25 {
   text-anchor: start;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -541,8 +540,7 @@
   -ms-user-select: none;
   user-select: none;
   pointer-events: none;
-}
-._menuOption_z7pb4_1 {
+}._menuOption_z7pb4_1 {
   display: flex;
   align-items: center;
   gap: 5px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thepocman/gantt-task-react",
-  "version": "1.0.31",
+  "version": "1.0.34",
   "description": "Fork of gantt-task-react with support for grouped tasks on a single row when collapsed",
   "author": "Adrian Bueno <adrianlbueno@users.noreply.github.com>",
   "homepage": "https://github.com/adrianlbueno/gantt-task-react#readme",