@thepocman/gantt-task-react 1.0.25 → 1.0.27

package/dist/components/grid/grid-body.d.ts

@@ -15,5 +15,6 @@ export type GridBodyProps = {
     checkIsHoliday: (date: Date, dateExtremity: DateExtremity) => boolean;
     getDate: (index: number) => Date;
     minTaskDate: Date;
+    dividerColor: string;
 };
 export declare const GridBody: React.NamedExoticComponent<GridBodyProps>;

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

@@ -4923,6 +4923,34 @@ const Calendar = ({
     }
   ) });
 };
+const shouldDrawVerticalDivider = (currentDate, previousDate, viewMode, isUnknownDates, columnIndex, startColumnIndex) => {
+  if (isUnknownDates)
+    return false;
+  if (columnIndex === startColumnIndex)
+    return true;
+  if (!previousDate)
+    return false;
+  switch (viewMode) {
+    case ViewMode.Year:
+      return currentDate.getFullYear() !== previousDate.getFullYear();
+    case ViewMode.HalfYear:
+      return currentDate.getFullYear() !== previousDate.getFullYear();
+    case ViewMode.QuarterYear:
+      return Math.ceil((currentDate.getMonth() + 1) / 3) !== Math.ceil((previousDate.getMonth() + 1) / 3) || currentDate.getFullYear() !== previousDate.getFullYear();
+    case ViewMode.Month:
+      return currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+    case ViewMode.Week:
+      return currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+    case ViewMode.Day:
+      return currentDate.getDate() !== previousDate.getDate() || currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+    case ViewMode.HalfDay:
+    case ViewMode.QuarterDay:
+    case ViewMode.Hour:
+      return currentDate.getDate() !== previousDate.getDate() || currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+    default:
+      return false;
+  }
+};
 const GridBodyInner = ({
   additionalLeftSpace,
   columnWidth,
@@ -4931,7 +4959,11 @@ const GridBodyInner = ({
   todayColor,
   rtl,
   startDate,
-  viewMode
+  viewMode,
+  dividerColor,
+  startColumnIndex,
+  endColumnIndex,
+  getDate
 }) => {
   const today = useMemo(() => {
     if (isUnknownDates) {
@@ -4960,7 +4992,57 @@ const GridBodyInner = ({
     todayColor,
     viewMode
   ]);
-  return /* @__PURE__ */ jsx("g", { className: "gridBody", children: /* @__PURE__ */ jsx("g", { className: "today", children: today }) });
+  const verticalDividers = useMemo(() => {
+    const dividers = [];
+    for (let i2 = startColumnIndex; i2 <= endColumnIndex; i2++) {
+      const currentDate = getDate(i2);
+      const previousDate = i2 > startColumnIndex ? getDate(i2 - 1) : null;
+      if (shouldDrawVerticalDivider(
+        currentDate,
+        previousDate,
+        viewMode,
+        isUnknownDates,
+        i2,
+        startColumnIndex
+      )) {
+        console.log("Drawing divider at column", i2, "date", currentDate);
+        const x3 = additionalLeftSpace + columnWidth * i2;
+        console.log("debugging x:", x3);
+        console.log("divider color", dividerColor);
+        dividers.push(
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: x3,
+              x2: x3,
+              y1: 0,
+              y2: ganttFullHeight,
+              stroke: dividerColor,
+              opacity: 0.15,
+              strokeWidth: 5
+            },
+            `divider-${i2}`
+          )
+        );
+      }
+    }
+    return dividers;
+  }, [
+    additionalLeftSpace,
+    columnWidth,
+    ganttFullHeight,
+    viewMode,
+    isUnknownDates,
+    startColumnIndex,
+    endColumnIndex,
+    getDate,
+    dividerColor
+  ]);
+  console.log("verticalDividers :>> ", verticalDividers);
+  return /* @__PURE__ */ jsxs("g", { className: "gridBody", children: [
+    /* @__PURE__ */ jsx("g", { className: "today", children: today }),
+    /* @__PURE__ */ jsx("g", { className: "verticalDividers", children: verticalDividers })
+  ] });
 };
 const GridBody = memo(GridBodyInner);
 function isWeekend(dirtyDate) {
@@ -6905,7 +6987,6 @@ const TaskGanttInner = (props) => {
     height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
     width: (ganttTaskRootRef == null ? void 0 : ganttTaskRootRef.current) ? ganttTaskRootRef.current.clientWidth + ganttTaskRootRef.current.scrollLeft : fullSvgWidth
   };
-  console.log("containerStyle:>> ", containerStyle);
   const gridStyle = useMemo(
     () => ({
       height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
@@ -11624,6 +11705,8 @@ const defaultColors = {
   selectedTaskBackgroundColor: "rgba(252, 248, 227, 0.5)",
   taskDragColor: "#7474ff",
   todayColor: "rgba(252, 248, 227, 0.5)",
+  dividerColor: "rgba(22, 16, 14, 0.27)",
+  //new color
   contextMenuBoxShadow: "rgb(0 0 0 / 25%) 1px 1px 5px 1px",
   contextMenuBgColor: "#fff",
   contextMenuTextColor: "inherit"
@@ -12984,6 +13067,7 @@ const Gantt = ({
     rtl,
     startDate,
     todayColor: colorStyles.todayColor,
+    dividerColor: colorStyles.dividerColor,
     holidayBackgroundColor: colorStyles.holidayBackgroundColor,
     viewMode,
     startColumnIndex,

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

@@ -4936,6 +4936,34 @@
       }
     ) });
   };
+  const shouldDrawVerticalDivider = (currentDate, previousDate, viewMode, isUnknownDates, columnIndex, startColumnIndex) => {
+    if (isUnknownDates)
+      return false;
+    if (columnIndex === startColumnIndex)
+      return true;
+    if (!previousDate)
+      return false;
+    switch (viewMode) {
+      case ViewMode.Year:
+        return currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.HalfYear:
+        return currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.QuarterYear:
+        return Math.ceil((currentDate.getMonth() + 1) / 3) !== Math.ceil((previousDate.getMonth() + 1) / 3) || currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.Month:
+        return currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.Week:
+        return currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.Day:
+        return currentDate.getDate() !== previousDate.getDate() || currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.HalfDay:
+      case ViewMode.QuarterDay:
+      case ViewMode.Hour:
+        return currentDate.getDate() !== previousDate.getDate() || currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+      default:
+        return false;
+    }
+  };
   const GridBodyInner = ({
     additionalLeftSpace,
     columnWidth,
@@ -4944,7 +4972,11 @@
     todayColor,
     rtl,
     startDate,
-    viewMode
+    viewMode,
+    dividerColor,
+    startColumnIndex,
+    endColumnIndex,
+    getDate
   }) => {
     const today = React.useMemo(() => {
       if (isUnknownDates) {
@@ -4973,7 +5005,57 @@
       todayColor,
       viewMode
     ]);
-    return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "gridBody", children: /* @__PURE__ */ jsxRuntime.jsx("g", { className: "today", children: today }) });
+    const verticalDividers = React.useMemo(() => {
+      const dividers = [];
+      for (let i = startColumnIndex; i <= endColumnIndex; i++) {
+        const currentDate = getDate(i);
+        const previousDate = i > startColumnIndex ? getDate(i - 1) : null;
+        if (shouldDrawVerticalDivider(
+          currentDate,
+          previousDate,
+          viewMode,
+          isUnknownDates,
+          i,
+          startColumnIndex
+        )) {
+          console.log("Drawing divider at column", i, "date", currentDate);
+          const x2 = additionalLeftSpace + columnWidth * i;
+          console.log("debugging x:", x2);
+          console.log("divider color", dividerColor);
+          dividers.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: x2,
+                x2,
+                y1: 0,
+                y2: ganttFullHeight,
+                stroke: dividerColor,
+                opacity: 0.15,
+                strokeWidth: 5
+              },
+              `divider-${i}`
+            )
+          );
+        }
+      }
+      return dividers;
+    }, [
+      additionalLeftSpace,
+      columnWidth,
+      ganttFullHeight,
+      viewMode,
+      isUnknownDates,
+      startColumnIndex,
+      endColumnIndex,
+      getDate,
+      dividerColor
+    ]);
+    console.log("verticalDividers :>> ", verticalDividers);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "gridBody", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("g", { className: "today", children: today }),
+      /* @__PURE__ */ jsxRuntime.jsx("g", { className: "verticalDividers", children: verticalDividers })
+    ] });
   };
   const GridBody = React.memo(GridBodyInner);
   function isWeekend(dirtyDate) {
@@ -6918,7 +7000,6 @@
       height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
       width: (ganttTaskRootRef == null ? void 0 : ganttTaskRootRef.current) ? ganttTaskRootRef.current.clientWidth + ganttTaskRootRef.current.scrollLeft : fullSvgWidth
     };
-    console.log("containerStyle:>> ", containerStyle);
     const gridStyle = React.useMemo(
       () => ({
         height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
@@ -11637,6 +11718,8 @@
     selectedTaskBackgroundColor: "rgba(252, 248, 227, 0.5)",
     taskDragColor: "#7474ff",
     todayColor: "rgba(252, 248, 227, 0.5)",
+    dividerColor: "rgba(22, 16, 14, 0.27)",
+    //new color
     contextMenuBoxShadow: "rgb(0 0 0 / 25%) 1px 1px 5px 1px",
     contextMenuBgColor: "#fff",
     contextMenuTextColor: "inherit"
@@ -12997,6 +13080,7 @@
       rtl,
       startDate,
       todayColor: colorStyles.todayColor,
+      dividerColor: colorStyles.dividerColor,
       holidayBackgroundColor: colorStyles.holidayBackgroundColor,
       viewMode,
       startColumnIndex,

package/dist/helpers/time-unit-boundaries.d.ts

@@ -0,0 +1,2 @@
+import { ViewMode } from "..";
+export declare const shouldDrawVerticalDivider: (currentDate: Date, previousDate: Date | null, viewMode: ViewMode, isUnknownDates: boolean, columnIndex: number, startColumnIndex: number) => boolean;

package/dist/types/public-types.d.ts

@@ -89,6 +89,7 @@ export interface ColorStyles {
     taskDragColor: string;
     selectedTaskBackgroundColor: string;
     todayColor: string;
+    dividerColor: string;
     contextMenuBoxShadow: string;
     contextMenuBgColor: string;
     contextMenuTextColor: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thepocman/gantt-task-react",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "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",