gantt-task-react-v 1.7.0 → 1.7.1

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

@@ -11556,17 +11556,19 @@ const GanttTodayInner = ({
   ] });
 };
 const GanttToday = memo(GanttTodayInner);
-const calendarBottomText = "_calendarBottomText_15t8b_1";
-const calendarTopTick = "_calendarTopTick_15t8b_25";
-const calendarTopText = "_calendarTopText_15t8b_35";
-const calendarHeader = "_calendarHeader_15t8b_61";
-const calendar = "_calendar_15t8b_1";
-const calendarDragging$1 = "_calendarDragging_15t8b_85";
+const calendarBottomText = "_calendarBottomText_1mt8w_1";
+const calendarTopTick = "_calendarTopTick_1mt8w_31";
+const calendarTopText = "_calendarTopText_1mt8w_41";
+const calendarHeader = "_calendarHeader_1mt8w_67";
+const calendarBottomSeparator = "_calendarBottomSeparator_1mt8w_81";
+const calendar = "_calendar_1mt8w_1";
+const calendarDragging$1 = "_calendarDragging_1mt8w_103";
 const styles$c = {
   calendarBottomText,
   calendarTopTick,
   calendarTopText,
   calendarHeader,
+  calendarBottomSeparator,
   calendar,
   calendarDragging: calendarDragging$1
 };
@@ -11850,6 +11852,19 @@ const Calendar = ({
     const bottomValues2 = [];
     let weeksCount = 1;
     const topDefaultHeight = headerHeight * 0.5;
+    bottomValues2.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          y1: topDefaultHeight,
+          x2: fullSvgWidth,
+          y2: topDefaultHeight,
+          className: styles$c.calendarBottomSeparator
+        },
+        "week-top-border"
+      )
+    );
     for (let i = endColumnIndex; i >= startColumnIndex; i--) {
       const date = getDate(i);
       const month = date.getMonth();
@@ -11859,6 +11874,19 @@ const Calendar = ({
         topValue = renderTopHeaderByDate(date);
       }
       const bottomValue = renderBottomHeaderByDate(date, i);
+      bottomValues2.push(
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: additionalLeftSpace + columnWidth * i,
+            y1: topDefaultHeight,
+            x2: additionalLeftSpace + columnWidth * i,
+            y2: headerHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          `week-sep-${i}`
+        )
+      );
       bottomValues2.push(
         renderBottomText(
           additionalLeftSpace + columnWidth * (i + +rtl),
@@ -11894,11 +11922,37 @@ const Calendar = ({
     const bottomValues2 = [];
     const topDefaultHeight = headerHeight * 0.5;
     const renderedMonths = /* @__PURE__ */ new Set();
+    bottomValues2.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          y1: topDefaultHeight,
+          x2: fullSvgWidth,
+          y2: topDefaultHeight,
+          className: styles$c.calendarBottomSeparator
+        },
+        "day-top-border"
+      )
+    );
     for (let i = startColumnIndex; i <= endColumnIndex; i++) {
       const date = getDate(i);
       const bottomValue = renderBottomHeaderByDate(date, i);
       const month = date.getMonth();
       const fullYear = date.getFullYear();
+      bottomValues2.push(
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: additionalLeftSpace + columnWidth * i,
+            y1: topDefaultHeight,
+            x2: additionalLeftSpace + columnWidth * i,
+            y2: headerHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          `day-sep-${i}`
+        )
+      );
       bottomValues2.push(
         renderBottomText(
           additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
@@ -13197,9 +13251,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 +13263,7 @@ const TaskResponsiveLabelInner = (props) => {
   const {
     alwaysOutline,
     arrowIndent,
+    forceOutside,
     rtl,
     label: label2,
     taskHeight,
@@ -13224,21 +13279,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 +13558,8 @@ const TaskItemInner = (props) => {
             label: task.name,
             taskYOffset,
             viewMode,
-            alwaysOutline: task.type === "project"
+            alwaysOutline: task.type === "project",
+            forceOutside: props.showProgress && width > 40
           }
         )
       ]
@@ -13827,6 +13884,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 +13897,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 +14703,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

@@ -11573,17 +11573,19 @@
     ] });
   };
   const GanttToday = React.memo(GanttTodayInner);
-  const calendarBottomText = "_calendarBottomText_15t8b_1";
-  const calendarTopTick = "_calendarTopTick_15t8b_25";
-  const calendarTopText = "_calendarTopText_15t8b_35";
-  const calendarHeader = "_calendarHeader_15t8b_61";
-  const calendar = "_calendar_15t8b_1";
-  const calendarDragging$1 = "_calendarDragging_15t8b_85";
+  const calendarBottomText = "_calendarBottomText_1mt8w_1";
+  const calendarTopTick = "_calendarTopTick_1mt8w_31";
+  const calendarTopText = "_calendarTopText_1mt8w_41";
+  const calendarHeader = "_calendarHeader_1mt8w_67";
+  const calendarBottomSeparator = "_calendarBottomSeparator_1mt8w_81";
+  const calendar = "_calendar_1mt8w_1";
+  const calendarDragging$1 = "_calendarDragging_1mt8w_103";
   const styles$c = {
     calendarBottomText,
     calendarTopTick,
     calendarTopText,
     calendarHeader,
+    calendarBottomSeparator,
     calendar,
     calendarDragging: calendarDragging$1
   };
@@ -11867,6 +11869,19 @@
       const bottomValues2 = [];
       let weeksCount = 1;
       const topDefaultHeight = headerHeight * 0.5;
+      bottomValues2.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 0,
+            y1: topDefaultHeight,
+            x2: fullSvgWidth,
+            y2: topDefaultHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          "week-top-border"
+        )
+      );
       for (let i = endColumnIndex; i >= startColumnIndex; i--) {
         const date = getDate(i);
         const month = date.getMonth();
@@ -11876,6 +11891,19 @@
           topValue = renderTopHeaderByDate(date);
         }
         const bottomValue = renderBottomHeaderByDate(date, i);
+        bottomValues2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: additionalLeftSpace + columnWidth * i,
+              y1: topDefaultHeight,
+              x2: additionalLeftSpace + columnWidth * i,
+              y2: headerHeight,
+              className: styles$c.calendarBottomSeparator
+            },
+            `week-sep-${i}`
+          )
+        );
         bottomValues2.push(
           renderBottomText(
             additionalLeftSpace + columnWidth * (i + +rtl),
@@ -11911,11 +11939,37 @@
       const bottomValues2 = [];
       const topDefaultHeight = headerHeight * 0.5;
       const renderedMonths = /* @__PURE__ */ new Set();
+      bottomValues2.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 0,
+            y1: topDefaultHeight,
+            x2: fullSvgWidth,
+            y2: topDefaultHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          "day-top-border"
+        )
+      );
       for (let i = startColumnIndex; i <= endColumnIndex; i++) {
         const date = getDate(i);
         const bottomValue = renderBottomHeaderByDate(date, i);
         const month = date.getMonth();
         const fullYear = date.getFullYear();
+        bottomValues2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: additionalLeftSpace + columnWidth * i,
+              y1: topDefaultHeight,
+              x2: additionalLeftSpace + columnWidth * i,
+              y2: headerHeight,
+              className: styles$c.calendarBottomSeparator
+            },
+            `day-sep-${i}`
+          )
+        );
         bottomValues2.push(
           renderBottomText(
             additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
@@ -13214,9 +13268,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 +13280,7 @@
     const {
       alwaysOutline,
       arrowIndent,
+      forceOutside,
       rtl,
       label: label2,
       taskHeight,
@@ -13241,21 +13296,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 +13575,8 @@
               label: task.name,
               taskYOffset,
               viewMode,
-              alwaysOutline: task.type === "project"
+              alwaysOutline: task.type === "project",
+              forceOutside: props.showProgress && width > 40
             }
           )
         ]
@@ -13844,6 +13901,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 +13914,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 +14720,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

@@ -534,10 +534,13 @@
 ._ganttTodayCircle_1oyhk_9 {
 
 }
-._calendarBottomText_15t8b_1 {
+._calendarBottomText_1mt8w_1 {
   text-anchor: middle;
   /*noinspection CssUnresolvedCustomProperty*/
-  fill: var(--gantt-calendar-bottom-text-color, var(--gantt-secondary-text-color));
+  fill: var(
+    --gantt-calendar-bottom-text-color,
+    var(--gantt-secondary-text-color)
+  );
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -546,12 +549,12 @@
   pointer-events: none;
 }
 
-._calendarTopTick_15t8b_25 {
+._calendarTopTick_1mt8w_31 {
   /*noinspection CssUnresolvedCustomProperty*/
   stroke: var(--gantt-calendar-top-divider-color, var(--gantt-divider-color));
 }
 
-._calendarTopText_15t8b_35 {
+._calendarTopText_1mt8w_41 {
   text-anchor: middle;
   /*noinspection CssUnresolvedCustomProperty*/
   fill: var(--gantt-calendar-top-text-color, var(--gantt-primary-text-color));
@@ -564,19 +567,25 @@
   font-weight: bold;
 }
 
-._calendarHeader_15t8b_61 {
+._calendarHeader_1mt8w_67 {
   fill: transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   stroke: var(--gantt-calendar-stroke-color);
   stroke-width: 1.4;
 }
 
-._calendar_15t8b_1 {
+._calendarBottomSeparator_1mt8w_81 {
+  /*noinspection CssUnresolvedCustomProperty*/
+  stroke: var(--gantt-calendar-stroke-color, #e0e0e0);
+  stroke-width: 1;
+}
+
+._calendar_1mt8w_1 {
   cursor: auto;
   user-select: none;
 }
 
-._calendarDragging_15t8b_85 {
+._calendarDragging_1mt8w_103 {
   cursor: ew-resize;
 }
 ._arrow_clickable_3u3q2_1 {
@@ -700,7 +709,7 @@
 ._milestoneBackground_vcirf_11 {
   user-select: none;
 }
-._barLabel_81831_1 {
+._barLabel_5nsbb_1 {
   fill: #fff;
   text-anchor: middle;
   font-weight: lighter;
@@ -713,14 +722,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.1",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",