gantt-task-react-v 1.7.0 → 1.7.2

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

@@ -2,6 +2,7 @@ import React from "react";
 import { TaskLabelProps } from "./types";
 interface Props extends TaskLabelProps {
     alwaysOutline?: boolean;
+    forceOutside?: boolean;
 }
 export declare const TaskResponsiveLabel: React.NamedExoticComponent<Props>;
 export {};

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

@@ -13197,9 +13197,9 @@ const Milestone = ({
     relationHandles
   ] });
 };
-const barLabel = "_barLabel_81831_1";
-const barLabelHidden = "_barLabelHidden_81831_27";
-const barLabelOutside = "_barLabelOutside_81831_37";
+const barLabel = "_barLabel_5nsbb_1";
+const barLabelHidden = "_barLabelHidden_5nsbb_27";
+const barLabelOutside = "_barLabelOutside_5nsbb_37";
 const style = {
   barLabel,
   barLabelHidden,
@@ -13209,6 +13209,7 @@ const TaskResponsiveLabelInner = (props) => {
   const {
     alwaysOutline,
     arrowIndent,
+    forceOutside,
     rtl,
     label: label2,
     taskHeight,
@@ -13224,21 +13225,22 @@ const TaskResponsiveLabelInner = (props) => {
       setIsTextInside(textRef.current.getBBox().width < width);
     }
   }, [textRef, width, viewMode]);
+  const shouldBeOutside = alwaysOutline || forceOutside;
   const calculatedX = useMemo(() => {
-    if (isTextInside && !alwaysOutline) {
+    if (isTextInside && !shouldBeOutside) {
       return x1 + width * 0.5;
     }
     if (rtl && textRef.current) {
       return x1 - textRef.current.getBBox().width - arrowIndent * 0.8;
     }
     return x1 + width + arrowIndent * 1.2;
-  }, [alwaysOutline, x1, width, isTextInside, rtl, arrowIndent]);
+  }, [shouldBeOutside, x1, width, isTextInside, rtl, arrowIndent]);
   return /* @__PURE__ */ jsx(
     "text",
     {
       x: calculatedX,
       y: taskYOffset + taskHeight * 0.5,
-      className: isTextInside && !alwaysOutline ? style.barLabel : style.barLabelOutside,
+      className: isTextInside && !shouldBeOutside ? style.barLabel : style.barLabelOutside,
       ref: textRef,
       children: label2
     }
@@ -13502,7 +13504,8 @@ const TaskItemInner = (props) => {
             label: task.name,
             taskYOffset,
             viewMode,
-            alwaysOutline: task.type === "project"
+            alwaysOutline: task.type === "project",
+            forceOutside: props.showProgress && width > 40
           }
         )
       ]
@@ -13827,6 +13830,10 @@ const TaskGanttContentInner = (props) => {
         const safeComparisonY = isNaN(comparisonDates.y) || !isFinite(comparisonDates.y) ? safeLevelY : comparisonDates.y;
         const safeComparisonWidth = isNaN(comparisonDates.width) || !isFinite(comparisonDates.width) ? 0 : Math.max(comparisonDates.width, 0);
         const safeComparisonHeight = isNaN(comparisonDates.height) || !isFinite(comparisonDates.height) ? 0 : Math.max(comparisonDates.height, 0);
+        const maxComparisonSvgHeight = Math.max(
+          distances.rowHeight - taskYOffset - taskHeight,
+          safeComparisonHeight
+        );
         tasksRes.push(
           /* @__PURE__ */ jsx(
             "svg",
@@ -13836,7 +13843,7 @@ const TaskGanttContentInner = (props) => {
               x: Math.max(safeComparisonX + (additionalLeftSpace || 0), 0),
               y: safeComparisonY,
               width: safeComparisonWidth,
-              height: safeComparisonHeight * 2,
+              height: Math.min(safeComparisonHeight * 2, maxComparisonSvgHeight),
               children: /* @__PURE__ */ jsx(
                 BarComparison,
                 {
@@ -14642,11 +14649,16 @@ const countTaskCoordinates = (task, taskToRowIndexMap, startDate, viewMode, rtl,
     );
     cx1 = isNaN(cx1) || !isFinite(cx1) ? x1 : cx1;
     cx2 = isNaN(cx2) || !isFinite(cx2) ? x2 : cx2;
+    const remainingRowSpace = distances.rowHeight - taskYOffset - taskHeight;
+    const clampedHeight = Math.min(
+      barComparisonTaskHeight,
+      Math.max(remainingRowSpace - 2, 2)
+    );
     comparisonDates = {
       x: cx1,
       y: y + taskHeight,
       width: Math.max(cx2 - cx1, 0),
-      height: barComparisonTaskHeight
+      height: clampedHeight
     };
   }
   return {

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

@@ -13214,9 +13214,9 @@
       relationHandles
     ] });
   };
-  const barLabel = "_barLabel_81831_1";
-  const barLabelHidden = "_barLabelHidden_81831_27";
-  const barLabelOutside = "_barLabelOutside_81831_37";
+  const barLabel = "_barLabel_5nsbb_1";
+  const barLabelHidden = "_barLabelHidden_5nsbb_27";
+  const barLabelOutside = "_barLabelOutside_5nsbb_37";
   const style = {
     barLabel,
     barLabelHidden,
@@ -13226,6 +13226,7 @@
     const {
       alwaysOutline,
       arrowIndent,
+      forceOutside,
       rtl,
       label: label2,
       taskHeight,
@@ -13241,21 +13242,22 @@
         setIsTextInside(textRef.current.getBBox().width < width);
       }
     }, [textRef, width, viewMode]);
+    const shouldBeOutside = alwaysOutline || forceOutside;
     const calculatedX = React.useMemo(() => {
-      if (isTextInside && !alwaysOutline) {
+      if (isTextInside && !shouldBeOutside) {
         return x1 + width * 0.5;
       }
       if (rtl && textRef.current) {
         return x1 - textRef.current.getBBox().width - arrowIndent * 0.8;
       }
       return x1 + width + arrowIndent * 1.2;
-    }, [alwaysOutline, x1, width, isTextInside, rtl, arrowIndent]);
+    }, [shouldBeOutside, x1, width, isTextInside, rtl, arrowIndent]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
         x: calculatedX,
         y: taskYOffset + taskHeight * 0.5,
-        className: isTextInside && !alwaysOutline ? style.barLabel : style.barLabelOutside,
+        className: isTextInside && !shouldBeOutside ? style.barLabel : style.barLabelOutside,
         ref: textRef,
         children: label2
       }
@@ -13519,7 +13521,8 @@
               label: task.name,
               taskYOffset,
               viewMode,
-              alwaysOutline: task.type === "project"
+              alwaysOutline: task.type === "project",
+              forceOutside: props.showProgress && width > 40
             }
           )
         ]
@@ -13844,6 +13847,10 @@
           const safeComparisonY = isNaN(comparisonDates.y) || !isFinite(comparisonDates.y) ? safeLevelY : comparisonDates.y;
           const safeComparisonWidth = isNaN(comparisonDates.width) || !isFinite(comparisonDates.width) ? 0 : Math.max(comparisonDates.width, 0);
           const safeComparisonHeight = isNaN(comparisonDates.height) || !isFinite(comparisonDates.height) ? 0 : Math.max(comparisonDates.height, 0);
+          const maxComparisonSvgHeight = Math.max(
+            distances.rowHeight - taskYOffset - taskHeight,
+            safeComparisonHeight
+          );
           tasksRes.push(
             /* @__PURE__ */ jsxRuntime.jsx(
               "svg",
@@ -13853,7 +13860,7 @@
                 x: Math.max(safeComparisonX + (additionalLeftSpace || 0), 0),
                 y: safeComparisonY,
                 width: safeComparisonWidth,
-                height: safeComparisonHeight * 2,
+                height: Math.min(safeComparisonHeight * 2, maxComparisonSvgHeight),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   BarComparison,
                   {
@@ -14659,11 +14666,16 @@
       );
       cx1 = isNaN(cx1) || !isFinite(cx1) ? x1 : cx1;
       cx2 = isNaN(cx2) || !isFinite(cx2) ? x2 : cx2;
+      const remainingRowSpace = distances.rowHeight - taskYOffset - taskHeight;
+      const clampedHeight = Math.min(
+        barComparisonTaskHeight,
+        Math.max(remainingRowSpace - 2, 2)
+      );
       comparisonDates = {
         x: cx1,
         y: y + taskHeight,
         width: Math.max(cx2 - cx1, 0),
-        height: barComparisonTaskHeight
+        height: clampedHeight
       };
     }
     return {

package/dist/style.css

@@ -700,7 +700,7 @@
 ._milestoneBackground_vcirf_11 {
   user-select: none;
 }
-._barLabel_81831_1 {
+._barLabel_5nsbb_1 {
   fill: #fff;
   text-anchor: middle;
   font-weight: lighter;
@@ -713,14 +713,15 @@
   pointer-events: none;
 }
 
-._barLabelHidden_81831_27 {
+._barLabelHidden_5nsbb_27 {
   display: none;
 }
 
 /*noinspection CssUnresolvedCustomProperty*/
-._barLabelOutside_81831_37 {
+._barLabelOutside_5nsbb_37 {
   fill: var(--gantt-secondary-text-color);
   text-anchor: start;
+  dominant-baseline: central;
   stroke: white;
   stroke-width: 4px;
   stroke-linejoin: round;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",