gantt-task-react-v 1.0.58 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,6 +8,7 @@ export type GanttTodayProps = {
8
8
  startDate: Date;
9
9
  rtl: boolean;
10
10
  viewMode: ViewMode;
11
+ taskHeight: number;
11
12
  showTodayLine?: boolean;
12
13
  showDataDateLine?: boolean;
13
14
  dataDate?: Date | null;
@@ -10907,6 +10907,204 @@ const styles$c = {
10907
10907
  ganttToday,
10908
10908
  ganttTodayCircle
10909
10909
  };
10910
+ const getDateByOffset = (startDate, offset2, viewMode) => {
10911
+ switch (viewMode) {
10912
+ case ViewMode.Day:
10913
+ return addDays(startDate, offset2);
10914
+ case ViewMode.HalfDay:
10915
+ return addHours(startDate, offset2 * 12);
10916
+ case ViewMode.QuarterDay:
10917
+ return addHours(startDate, offset2 * 6);
10918
+ case ViewMode.Hour:
10919
+ return addHours(startDate, offset2);
10920
+ case ViewMode.Month:
10921
+ return addMonths(startDate, offset2);
10922
+ case ViewMode.Week:
10923
+ return addWeeks(startDate, offset2);
10924
+ case ViewMode.Year:
10925
+ return addYears(startDate, offset2);
10926
+ default:
10927
+ throw new Error("Unknown view mode");
10928
+ }
10929
+ };
10930
+ const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
10931
+ const index2 = getDatesDiff(xDate, startDate, viewMode);
10932
+ const currentDate = getDateByOffset(startDate, index2, viewMode);
10933
+ const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
10934
+ const remainderMillis = xDate.getTime() - currentDate.getTime();
10935
+ const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
10936
+ return index2 * columnWidth + percentOfInterval * columnWidth;
10937
+ };
10938
+ const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
10939
+ const index2 = getDatesDiff(xDate, startDate, viewMode);
10940
+ const currentDate = getDateByOffset(startDate, index2, viewMode);
10941
+ const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
10942
+ const remainderMillis = xDate.getTime() - currentDate.getTime();
10943
+ const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
10944
+ return index2 * columnWidth + percentOfInterval * columnWidth;
10945
+ };
10946
+ const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
10947
+ const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
10948
+ let progressX;
10949
+ if (rtl) {
10950
+ progressX = taskX2 - progressWidth;
10951
+ } else {
10952
+ progressX = taskX1;
10953
+ }
10954
+ return [progressWidth, progressX];
10955
+ };
10956
+ const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
10957
+ let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
10958
+ newDate = new Date(
10959
+ newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
10960
+ );
10961
+ return newDate;
10962
+ };
10963
+ const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
10964
+ let result;
10965
+ switch (selectedTask.type) {
10966
+ case "milestone":
10967
+ result = handleTaskBySVGMouseEventForMilestone(
10968
+ action,
10969
+ selectedTask,
10970
+ initialCoordinates,
10971
+ coordinates,
10972
+ xStep,
10973
+ timeStep
10974
+ );
10975
+ break;
10976
+ default:
10977
+ result = handleTaskBySVGMouseEventForBar(
10978
+ action,
10979
+ selectedTask,
10980
+ initialCoordinates,
10981
+ coordinates,
10982
+ xStep,
10983
+ timeStep,
10984
+ rtl
10985
+ );
10986
+ break;
10987
+ }
10988
+ return result;
10989
+ };
10990
+ const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
10991
+ const changedTask = { ...selectedTask };
10992
+ let isChanged = false;
10993
+ switch (action) {
10994
+ case "progress":
10995
+ isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
10996
+ if (isChanged) {
10997
+ changedTask.progress = Math.round(
10998
+ coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
10999
+ );
11000
+ }
11001
+ break;
11002
+ case "start": {
11003
+ isChanged = initialCoordinates.x1 !== coordinates.x1;
11004
+ if (isChanged) {
11005
+ if (rtl) {
11006
+ changedTask.end = dateByX(
11007
+ coordinates.x1,
11008
+ initialCoordinates.x1,
11009
+ selectedTask.end,
11010
+ xStep,
11011
+ timeStep
11012
+ );
11013
+ } else {
11014
+ changedTask.start = dateByX(
11015
+ coordinates.x1,
11016
+ initialCoordinates.x1,
11017
+ selectedTask.start,
11018
+ xStep,
11019
+ timeStep
11020
+ );
11021
+ }
11022
+ }
11023
+ break;
11024
+ }
11025
+ case "end": {
11026
+ isChanged = initialCoordinates.x2 !== coordinates.x2;
11027
+ if (isChanged) {
11028
+ if (rtl) {
11029
+ changedTask.start = dateByX(
11030
+ coordinates.x2,
11031
+ initialCoordinates.x2,
11032
+ selectedTask.start,
11033
+ xStep,
11034
+ timeStep
11035
+ );
11036
+ } else {
11037
+ changedTask.end = dateByX(
11038
+ coordinates.x2,
11039
+ initialCoordinates.x2,
11040
+ selectedTask.end,
11041
+ xStep,
11042
+ timeStep
11043
+ );
11044
+ }
11045
+ }
11046
+ break;
11047
+ }
11048
+ case "move": {
11049
+ isChanged = initialCoordinates.x1 !== coordinates.x1;
11050
+ if (isChanged) {
11051
+ if (rtl) {
11052
+ changedTask.end = dateByX(
11053
+ coordinates.x1,
11054
+ initialCoordinates.x1,
11055
+ selectedTask.end,
11056
+ xStep,
11057
+ timeStep
11058
+ );
11059
+ changedTask.start = dateByX(
11060
+ coordinates.x2,
11061
+ initialCoordinates.x2,
11062
+ selectedTask.start,
11063
+ xStep,
11064
+ timeStep
11065
+ );
11066
+ } else {
11067
+ changedTask.start = dateByX(
11068
+ coordinates.x1,
11069
+ initialCoordinates.x1,
11070
+ selectedTask.start,
11071
+ xStep,
11072
+ timeStep
11073
+ );
11074
+ changedTask.end = dateByX(
11075
+ coordinates.x2,
11076
+ initialCoordinates.x2,
11077
+ selectedTask.end,
11078
+ xStep,
11079
+ timeStep
11080
+ );
11081
+ }
11082
+ }
11083
+ break;
11084
+ }
11085
+ }
11086
+ return { isChanged, changedTask };
11087
+ };
11088
+ const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
11089
+ const changedTask = { ...selectedTask };
11090
+ const isChanged = coordinates.x1 !== initialCoordinates.x1;
11091
+ if (isChanged) {
11092
+ switch (action) {
11093
+ case "move": {
11094
+ changedTask.start = dateByX(
11095
+ coordinates.x1,
11096
+ initialCoordinates.x1,
11097
+ selectedTask.start,
11098
+ xStep,
11099
+ timeStep
11100
+ );
11101
+ changedTask.end = changedTask.start;
11102
+ break;
11103
+ }
11104
+ }
11105
+ }
11106
+ return { isChanged, changedTask };
11107
+ };
10910
11108
  const GanttTodayInner = ({
10911
11109
  additionalLeftSpace,
10912
11110
  distances: { columnWidth },
@@ -10915,6 +11113,8 @@ const GanttTodayInner = ({
10915
11113
  rtl,
10916
11114
  startDate,
10917
11115
  viewMode,
11116
+ taskHeight,
11117
+ // Add taskHeight parameter
10918
11118
  showTodayLine = true,
10919
11119
  showDataDateLine = false,
10920
11120
  dataDate = null,
@@ -10928,38 +11128,14 @@ const GanttTodayInner = ({
10928
11128
  return null;
10929
11129
  }
10930
11130
  const today = /* @__PURE__ */ new Date();
10931
- const todayIndex = getDatesDiff(today, startDate, viewMode);
10932
- const extraMultiplier = () => {
10933
- switch (viewMode) {
10934
- case ViewMode.Week: {
10935
- const percent = today.getDay() / 7;
10936
- return 1 + percent * 0.2;
10937
- }
10938
- case ViewMode.Month: {
10939
- const dayInMonth = today.getDate();
10940
- const maxDaysInMonth = getDaysInMonth(
10941
- today.getMonth(),
10942
- today.getFullYear()
10943
- );
10944
- const percent = dayInMonth / maxDaysInMonth;
10945
- return 1 + percent * 0.5;
10946
- }
10947
- case ViewMode.Year: {
10948
- const percent = today.getMonth() / 12;
10949
- return 1 + percent * 0.5;
10950
- }
10951
- default:
10952
- return 1;
10953
- }
10954
- };
10955
- const tickX = todayIndex * columnWidth * extraMultiplier();
10956
- const x = rtl ? tickX + columnWidth : tickX;
11131
+ const x = taskXCoordinate(today, startDate, viewMode, columnWidth);
11132
+ const adjustedX = rtl ? x + columnWidth : x;
10957
11133
  const color = todayColor || "var(--gantt-calendar-today-color)";
10958
11134
  return /* @__PURE__ */ jsxs(Fragment, { children: [
10959
11135
  /* @__PURE__ */ jsx(
10960
11136
  "rect",
10961
11137
  {
10962
- x: additionalLeftSpace + x,
11138
+ x: additionalLeftSpace + adjustedX,
10963
11139
  y: 0,
10964
11140
  width: 2,
10965
11141
  height: ganttFullHeight,
@@ -10970,7 +11146,7 @@ const GanttTodayInner = ({
10970
11146
  "circle",
10971
11147
  {
10972
11148
  className: styles$c.ganttTodayCircle,
10973
- cx: x + 1,
11149
+ cx: adjustedX + 1,
10974
11150
  cy: 6,
10975
11151
  r: 6,
10976
11152
  fill: color
@@ -10979,7 +11155,7 @@ const GanttTodayInner = ({
10979
11155
  /* @__PURE__ */ jsx(
10980
11156
  "text",
10981
11157
  {
10982
- x: additionalLeftSpace + x + 8,
11158
+ x: additionalLeftSpace + adjustedX + 8,
10983
11159
  y: 10,
10984
11160
  fill: color,
10985
11161
  fontSize: 12,
@@ -11004,38 +11180,15 @@ const GanttTodayInner = ({
11004
11180
  if (!showDataDateLine || !dataDate) {
11005
11181
  return null;
11006
11182
  }
11007
- const dataIndex = getDatesDiff(dataDate, startDate, viewMode);
11008
- const extraMultiplier = () => {
11009
- switch (viewMode) {
11010
- case ViewMode.Week: {
11011
- const percent = dataDate.getDay() / 7;
11012
- return 1 + percent * 0.2;
11013
- }
11014
- case ViewMode.Month: {
11015
- const dayInMonth = dataDate.getDate();
11016
- const maxDaysInMonth = getDaysInMonth(
11017
- dataDate.getMonth(),
11018
- dataDate.getFullYear()
11019
- );
11020
- const percent = dayInMonth / maxDaysInMonth;
11021
- return 1 + percent * 0.5;
11022
- }
11023
- case ViewMode.Year: {
11024
- const percent = dataDate.getMonth() / 12;
11025
- return 1 + percent * 0.5;
11026
- }
11027
- default:
11028
- return 1;
11029
- }
11030
- };
11031
- const tickX = dataIndex * columnWidth * extraMultiplier();
11032
- const x = rtl ? tickX + columnWidth : tickX;
11183
+ const dateX = taskXCoordinate(dataDate, startDate, viewMode, columnWidth);
11184
+ const milestoneEndX = dateX + taskHeight * 0.5;
11185
+ const adjustedX = rtl ? milestoneEndX + columnWidth : milestoneEndX;
11033
11186
  const color = dataDateColor || "var(--gantt-calendar-today-color)";
11034
11187
  return /* @__PURE__ */ jsxs(Fragment, { children: [
11035
11188
  /* @__PURE__ */ jsx(
11036
11189
  "rect",
11037
11190
  {
11038
- x: additionalLeftSpace + x,
11191
+ x: additionalLeftSpace + adjustedX,
11039
11192
  y: 0,
11040
11193
  width: 2,
11041
11194
  height: ganttFullHeight,
@@ -11047,7 +11200,7 @@ const GanttTodayInner = ({
11047
11200
  "circle",
11048
11201
  {
11049
11202
  className: styles$c.ganttTodayCircle,
11050
- cx: x + 1,
11203
+ cx: adjustedX + 1,
11051
11204
  cy: 6,
11052
11205
  r: 6,
11053
11206
  fill: color
@@ -11056,7 +11209,7 @@ const GanttTodayInner = ({
11056
11209
  /* @__PURE__ */ jsx(
11057
11210
  "text",
11058
11211
  {
11059
- x: additionalLeftSpace + x + 8,
11212
+ x: additionalLeftSpace + adjustedX + 8,
11060
11213
  y: 10,
11061
11214
  fill: color,
11062
11215
  fontSize: 12,
@@ -11072,6 +11225,7 @@ const GanttTodayInner = ({
11072
11225
  rtl,
11073
11226
  startDate,
11074
11227
  viewMode,
11228
+ taskHeight,
11075
11229
  showDataDateLine,
11076
11230
  dataDate,
11077
11231
  dataDateColor,
@@ -11770,204 +11924,6 @@ const RelationLine = ({
11770
11924
  }
11771
11925
  );
11772
11926
  };
11773
- const getDateByOffset = (startDate, offset2, viewMode) => {
11774
- switch (viewMode) {
11775
- case ViewMode.Day:
11776
- return addDays(startDate, offset2);
11777
- case ViewMode.HalfDay:
11778
- return addHours(startDate, offset2 * 12);
11779
- case ViewMode.QuarterDay:
11780
- return addHours(startDate, offset2 * 6);
11781
- case ViewMode.Hour:
11782
- return addHours(startDate, offset2);
11783
- case ViewMode.Month:
11784
- return addMonths(startDate, offset2);
11785
- case ViewMode.Week:
11786
- return addWeeks(startDate, offset2);
11787
- case ViewMode.Year:
11788
- return addYears(startDate, offset2);
11789
- default:
11790
- throw new Error("Unknown view mode");
11791
- }
11792
- };
11793
- const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
11794
- const index2 = getDatesDiff(xDate, startDate, viewMode);
11795
- const currentDate = getDateByOffset(startDate, index2, viewMode);
11796
- const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
11797
- const remainderMillis = xDate.getTime() - currentDate.getTime();
11798
- const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
11799
- return index2 * columnWidth + percentOfInterval * columnWidth;
11800
- };
11801
- const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
11802
- const index2 = getDatesDiff(xDate, startDate, viewMode);
11803
- const currentDate = getDateByOffset(startDate, index2, viewMode);
11804
- const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
11805
- const remainderMillis = xDate.getTime() - currentDate.getTime();
11806
- const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
11807
- return index2 * columnWidth + percentOfInterval * columnWidth;
11808
- };
11809
- const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
11810
- const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
11811
- let progressX;
11812
- if (rtl) {
11813
- progressX = taskX2 - progressWidth;
11814
- } else {
11815
- progressX = taskX1;
11816
- }
11817
- return [progressWidth, progressX];
11818
- };
11819
- const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
11820
- let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
11821
- newDate = new Date(
11822
- newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
11823
- );
11824
- return newDate;
11825
- };
11826
- const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
11827
- let result;
11828
- switch (selectedTask.type) {
11829
- case "milestone":
11830
- result = handleTaskBySVGMouseEventForMilestone(
11831
- action,
11832
- selectedTask,
11833
- initialCoordinates,
11834
- coordinates,
11835
- xStep,
11836
- timeStep
11837
- );
11838
- break;
11839
- default:
11840
- result = handleTaskBySVGMouseEventForBar(
11841
- action,
11842
- selectedTask,
11843
- initialCoordinates,
11844
- coordinates,
11845
- xStep,
11846
- timeStep,
11847
- rtl
11848
- );
11849
- break;
11850
- }
11851
- return result;
11852
- };
11853
- const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
11854
- const changedTask = { ...selectedTask };
11855
- let isChanged = false;
11856
- switch (action) {
11857
- case "progress":
11858
- isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
11859
- if (isChanged) {
11860
- changedTask.progress = Math.round(
11861
- coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
11862
- );
11863
- }
11864
- break;
11865
- case "start": {
11866
- isChanged = initialCoordinates.x1 !== coordinates.x1;
11867
- if (isChanged) {
11868
- if (rtl) {
11869
- changedTask.end = dateByX(
11870
- coordinates.x1,
11871
- initialCoordinates.x1,
11872
- selectedTask.end,
11873
- xStep,
11874
- timeStep
11875
- );
11876
- } else {
11877
- changedTask.start = dateByX(
11878
- coordinates.x1,
11879
- initialCoordinates.x1,
11880
- selectedTask.start,
11881
- xStep,
11882
- timeStep
11883
- );
11884
- }
11885
- }
11886
- break;
11887
- }
11888
- case "end": {
11889
- isChanged = initialCoordinates.x2 !== coordinates.x2;
11890
- if (isChanged) {
11891
- if (rtl) {
11892
- changedTask.start = dateByX(
11893
- coordinates.x2,
11894
- initialCoordinates.x2,
11895
- selectedTask.start,
11896
- xStep,
11897
- timeStep
11898
- );
11899
- } else {
11900
- changedTask.end = dateByX(
11901
- coordinates.x2,
11902
- initialCoordinates.x2,
11903
- selectedTask.end,
11904
- xStep,
11905
- timeStep
11906
- );
11907
- }
11908
- }
11909
- break;
11910
- }
11911
- case "move": {
11912
- isChanged = initialCoordinates.x1 !== coordinates.x1;
11913
- if (isChanged) {
11914
- if (rtl) {
11915
- changedTask.end = dateByX(
11916
- coordinates.x1,
11917
- initialCoordinates.x1,
11918
- selectedTask.end,
11919
- xStep,
11920
- timeStep
11921
- );
11922
- changedTask.start = dateByX(
11923
- coordinates.x2,
11924
- initialCoordinates.x2,
11925
- selectedTask.start,
11926
- xStep,
11927
- timeStep
11928
- );
11929
- } else {
11930
- changedTask.start = dateByX(
11931
- coordinates.x1,
11932
- initialCoordinates.x1,
11933
- selectedTask.start,
11934
- xStep,
11935
- timeStep
11936
- );
11937
- changedTask.end = dateByX(
11938
- coordinates.x2,
11939
- initialCoordinates.x2,
11940
- selectedTask.end,
11941
- xStep,
11942
- timeStep
11943
- );
11944
- }
11945
- }
11946
- break;
11947
- }
11948
- }
11949
- return { isChanged, changedTask };
11950
- };
11951
- const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
11952
- const changedTask = { ...selectedTask };
11953
- const isChanged = coordinates.x1 !== initialCoordinates.x1;
11954
- if (isChanged) {
11955
- switch (action) {
11956
- case "move": {
11957
- changedTask.start = dateByX(
11958
- coordinates.x1,
11959
- initialCoordinates.x1,
11960
- selectedTask.start,
11961
- xStep,
11962
- timeStep
11963
- );
11964
- changedTask.end = changedTask.start;
11965
- break;
11966
- }
11967
- }
11968
- }
11969
- return { isChanged, changedTask };
11970
- };
11971
11927
  const barWrapper = "_barWrapper_5jhkr_1";
11972
11928
  const barHandle = "_barHandle_5jhkr_11";
11973
11929
  const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
@@ -19908,6 +19864,7 @@ const Gantt = (props) => {
19908
19864
  rtl,
19909
19865
  startDate,
19910
19866
  viewMode,
19867
+ taskHeight,
19911
19868
  showTodayLine,
19912
19869
  showDataDateLine,
19913
19870
  dataDate,
@@ -19924,6 +19881,7 @@ const Gantt = (props) => {
19924
19881
  rtl,
19925
19882
  startDate,
19926
19883
  viewMode,
19884
+ taskHeight,
19927
19885
  showTodayLine,
19928
19886
  showDataDateLine,
19929
19887
  dataDate,
@@ -10924,6 +10924,204 @@
10924
10924
  ganttToday,
10925
10925
  ganttTodayCircle
10926
10926
  };
10927
+ const getDateByOffset = (startDate, offset2, viewMode) => {
10928
+ switch (viewMode) {
10929
+ case ViewMode.Day:
10930
+ return addDays(startDate, offset2);
10931
+ case ViewMode.HalfDay:
10932
+ return addHours(startDate, offset2 * 12);
10933
+ case ViewMode.QuarterDay:
10934
+ return addHours(startDate, offset2 * 6);
10935
+ case ViewMode.Hour:
10936
+ return addHours(startDate, offset2);
10937
+ case ViewMode.Month:
10938
+ return addMonths(startDate, offset2);
10939
+ case ViewMode.Week:
10940
+ return addWeeks(startDate, offset2);
10941
+ case ViewMode.Year:
10942
+ return addYears(startDate, offset2);
10943
+ default:
10944
+ throw new Error("Unknown view mode");
10945
+ }
10946
+ };
10947
+ const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
10948
+ const index2 = getDatesDiff(xDate, startDate, viewMode);
10949
+ const currentDate = getDateByOffset(startDate, index2, viewMode);
10950
+ const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
10951
+ const remainderMillis = xDate.getTime() - currentDate.getTime();
10952
+ const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
10953
+ return index2 * columnWidth + percentOfInterval * columnWidth;
10954
+ };
10955
+ const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
10956
+ const index2 = getDatesDiff(xDate, startDate, viewMode);
10957
+ const currentDate = getDateByOffset(startDate, index2, viewMode);
10958
+ const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
10959
+ const remainderMillis = xDate.getTime() - currentDate.getTime();
10960
+ const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
10961
+ return index2 * columnWidth + percentOfInterval * columnWidth;
10962
+ };
10963
+ const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
10964
+ const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
10965
+ let progressX;
10966
+ if (rtl) {
10967
+ progressX = taskX2 - progressWidth;
10968
+ } else {
10969
+ progressX = taskX1;
10970
+ }
10971
+ return [progressWidth, progressX];
10972
+ };
10973
+ const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
10974
+ let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
10975
+ newDate = new Date(
10976
+ newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
10977
+ );
10978
+ return newDate;
10979
+ };
10980
+ const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
10981
+ let result;
10982
+ switch (selectedTask.type) {
10983
+ case "milestone":
10984
+ result = handleTaskBySVGMouseEventForMilestone(
10985
+ action,
10986
+ selectedTask,
10987
+ initialCoordinates,
10988
+ coordinates,
10989
+ xStep,
10990
+ timeStep
10991
+ );
10992
+ break;
10993
+ default:
10994
+ result = handleTaskBySVGMouseEventForBar(
10995
+ action,
10996
+ selectedTask,
10997
+ initialCoordinates,
10998
+ coordinates,
10999
+ xStep,
11000
+ timeStep,
11001
+ rtl
11002
+ );
11003
+ break;
11004
+ }
11005
+ return result;
11006
+ };
11007
+ const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
11008
+ const changedTask = { ...selectedTask };
11009
+ let isChanged = false;
11010
+ switch (action) {
11011
+ case "progress":
11012
+ isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
11013
+ if (isChanged) {
11014
+ changedTask.progress = Math.round(
11015
+ coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
11016
+ );
11017
+ }
11018
+ break;
11019
+ case "start": {
11020
+ isChanged = initialCoordinates.x1 !== coordinates.x1;
11021
+ if (isChanged) {
11022
+ if (rtl) {
11023
+ changedTask.end = dateByX(
11024
+ coordinates.x1,
11025
+ initialCoordinates.x1,
11026
+ selectedTask.end,
11027
+ xStep,
11028
+ timeStep
11029
+ );
11030
+ } else {
11031
+ changedTask.start = dateByX(
11032
+ coordinates.x1,
11033
+ initialCoordinates.x1,
11034
+ selectedTask.start,
11035
+ xStep,
11036
+ timeStep
11037
+ );
11038
+ }
11039
+ }
11040
+ break;
11041
+ }
11042
+ case "end": {
11043
+ isChanged = initialCoordinates.x2 !== coordinates.x2;
11044
+ if (isChanged) {
11045
+ if (rtl) {
11046
+ changedTask.start = dateByX(
11047
+ coordinates.x2,
11048
+ initialCoordinates.x2,
11049
+ selectedTask.start,
11050
+ xStep,
11051
+ timeStep
11052
+ );
11053
+ } else {
11054
+ changedTask.end = dateByX(
11055
+ coordinates.x2,
11056
+ initialCoordinates.x2,
11057
+ selectedTask.end,
11058
+ xStep,
11059
+ timeStep
11060
+ );
11061
+ }
11062
+ }
11063
+ break;
11064
+ }
11065
+ case "move": {
11066
+ isChanged = initialCoordinates.x1 !== coordinates.x1;
11067
+ if (isChanged) {
11068
+ if (rtl) {
11069
+ changedTask.end = dateByX(
11070
+ coordinates.x1,
11071
+ initialCoordinates.x1,
11072
+ selectedTask.end,
11073
+ xStep,
11074
+ timeStep
11075
+ );
11076
+ changedTask.start = dateByX(
11077
+ coordinates.x2,
11078
+ initialCoordinates.x2,
11079
+ selectedTask.start,
11080
+ xStep,
11081
+ timeStep
11082
+ );
11083
+ } else {
11084
+ changedTask.start = dateByX(
11085
+ coordinates.x1,
11086
+ initialCoordinates.x1,
11087
+ selectedTask.start,
11088
+ xStep,
11089
+ timeStep
11090
+ );
11091
+ changedTask.end = dateByX(
11092
+ coordinates.x2,
11093
+ initialCoordinates.x2,
11094
+ selectedTask.end,
11095
+ xStep,
11096
+ timeStep
11097
+ );
11098
+ }
11099
+ }
11100
+ break;
11101
+ }
11102
+ }
11103
+ return { isChanged, changedTask };
11104
+ };
11105
+ const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
11106
+ const changedTask = { ...selectedTask };
11107
+ const isChanged = coordinates.x1 !== initialCoordinates.x1;
11108
+ if (isChanged) {
11109
+ switch (action) {
11110
+ case "move": {
11111
+ changedTask.start = dateByX(
11112
+ coordinates.x1,
11113
+ initialCoordinates.x1,
11114
+ selectedTask.start,
11115
+ xStep,
11116
+ timeStep
11117
+ );
11118
+ changedTask.end = changedTask.start;
11119
+ break;
11120
+ }
11121
+ }
11122
+ }
11123
+ return { isChanged, changedTask };
11124
+ };
10927
11125
  const GanttTodayInner = ({
10928
11126
  additionalLeftSpace,
10929
11127
  distances: { columnWidth },
@@ -10932,6 +11130,8 @@
10932
11130
  rtl,
10933
11131
  startDate,
10934
11132
  viewMode,
11133
+ taskHeight,
11134
+ // Add taskHeight parameter
10935
11135
  showTodayLine = true,
10936
11136
  showDataDateLine = false,
10937
11137
  dataDate = null,
@@ -10945,38 +11145,14 @@
10945
11145
  return null;
10946
11146
  }
10947
11147
  const today = /* @__PURE__ */ new Date();
10948
- const todayIndex = getDatesDiff(today, startDate, viewMode);
10949
- const extraMultiplier = () => {
10950
- switch (viewMode) {
10951
- case ViewMode.Week: {
10952
- const percent = today.getDay() / 7;
10953
- return 1 + percent * 0.2;
10954
- }
10955
- case ViewMode.Month: {
10956
- const dayInMonth = today.getDate();
10957
- const maxDaysInMonth = getDaysInMonth(
10958
- today.getMonth(),
10959
- today.getFullYear()
10960
- );
10961
- const percent = dayInMonth / maxDaysInMonth;
10962
- return 1 + percent * 0.5;
10963
- }
10964
- case ViewMode.Year: {
10965
- const percent = today.getMonth() / 12;
10966
- return 1 + percent * 0.5;
10967
- }
10968
- default:
10969
- return 1;
10970
- }
10971
- };
10972
- const tickX = todayIndex * columnWidth * extraMultiplier();
10973
- const x = rtl ? tickX + columnWidth : tickX;
11148
+ const x = taskXCoordinate(today, startDate, viewMode, columnWidth);
11149
+ const adjustedX = rtl ? x + columnWidth : x;
10974
11150
  const color = todayColor || "var(--gantt-calendar-today-color)";
10975
11151
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
10976
11152
  /* @__PURE__ */ jsxRuntime.jsx(
10977
11153
  "rect",
10978
11154
  {
10979
- x: additionalLeftSpace + x,
11155
+ x: additionalLeftSpace + adjustedX,
10980
11156
  y: 0,
10981
11157
  width: 2,
10982
11158
  height: ganttFullHeight,
@@ -10987,7 +11163,7 @@
10987
11163
  "circle",
10988
11164
  {
10989
11165
  className: styles$c.ganttTodayCircle,
10990
- cx: x + 1,
11166
+ cx: adjustedX + 1,
10991
11167
  cy: 6,
10992
11168
  r: 6,
10993
11169
  fill: color
@@ -10996,7 +11172,7 @@
10996
11172
  /* @__PURE__ */ jsxRuntime.jsx(
10997
11173
  "text",
10998
11174
  {
10999
- x: additionalLeftSpace + x + 8,
11175
+ x: additionalLeftSpace + adjustedX + 8,
11000
11176
  y: 10,
11001
11177
  fill: color,
11002
11178
  fontSize: 12,
@@ -11021,38 +11197,15 @@
11021
11197
  if (!showDataDateLine || !dataDate) {
11022
11198
  return null;
11023
11199
  }
11024
- const dataIndex = getDatesDiff(dataDate, startDate, viewMode);
11025
- const extraMultiplier = () => {
11026
- switch (viewMode) {
11027
- case ViewMode.Week: {
11028
- const percent = dataDate.getDay() / 7;
11029
- return 1 + percent * 0.2;
11030
- }
11031
- case ViewMode.Month: {
11032
- const dayInMonth = dataDate.getDate();
11033
- const maxDaysInMonth = getDaysInMonth(
11034
- dataDate.getMonth(),
11035
- dataDate.getFullYear()
11036
- );
11037
- const percent = dayInMonth / maxDaysInMonth;
11038
- return 1 + percent * 0.5;
11039
- }
11040
- case ViewMode.Year: {
11041
- const percent = dataDate.getMonth() / 12;
11042
- return 1 + percent * 0.5;
11043
- }
11044
- default:
11045
- return 1;
11046
- }
11047
- };
11048
- const tickX = dataIndex * columnWidth * extraMultiplier();
11049
- const x = rtl ? tickX + columnWidth : tickX;
11200
+ const dateX = taskXCoordinate(dataDate, startDate, viewMode, columnWidth);
11201
+ const milestoneEndX = dateX + taskHeight * 0.5;
11202
+ const adjustedX = rtl ? milestoneEndX + columnWidth : milestoneEndX;
11050
11203
  const color = dataDateColor || "var(--gantt-calendar-today-color)";
11051
11204
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
11052
11205
  /* @__PURE__ */ jsxRuntime.jsx(
11053
11206
  "rect",
11054
11207
  {
11055
- x: additionalLeftSpace + x,
11208
+ x: additionalLeftSpace + adjustedX,
11056
11209
  y: 0,
11057
11210
  width: 2,
11058
11211
  height: ganttFullHeight,
@@ -11064,7 +11217,7 @@
11064
11217
  "circle",
11065
11218
  {
11066
11219
  className: styles$c.ganttTodayCircle,
11067
- cx: x + 1,
11220
+ cx: adjustedX + 1,
11068
11221
  cy: 6,
11069
11222
  r: 6,
11070
11223
  fill: color
@@ -11073,7 +11226,7 @@
11073
11226
  /* @__PURE__ */ jsxRuntime.jsx(
11074
11227
  "text",
11075
11228
  {
11076
- x: additionalLeftSpace + x + 8,
11229
+ x: additionalLeftSpace + adjustedX + 8,
11077
11230
  y: 10,
11078
11231
  fill: color,
11079
11232
  fontSize: 12,
@@ -11089,6 +11242,7 @@
11089
11242
  rtl,
11090
11243
  startDate,
11091
11244
  viewMode,
11245
+ taskHeight,
11092
11246
  showDataDateLine,
11093
11247
  dataDate,
11094
11248
  dataDateColor,
@@ -11787,204 +11941,6 @@
11787
11941
  }
11788
11942
  );
11789
11943
  };
11790
- const getDateByOffset = (startDate, offset2, viewMode) => {
11791
- switch (viewMode) {
11792
- case ViewMode.Day:
11793
- return addDays(startDate, offset2);
11794
- case ViewMode.HalfDay:
11795
- return addHours(startDate, offset2 * 12);
11796
- case ViewMode.QuarterDay:
11797
- return addHours(startDate, offset2 * 6);
11798
- case ViewMode.Hour:
11799
- return addHours(startDate, offset2);
11800
- case ViewMode.Month:
11801
- return addMonths(startDate, offset2);
11802
- case ViewMode.Week:
11803
- return addWeeks(startDate, offset2);
11804
- case ViewMode.Year:
11805
- return addYears(startDate, offset2);
11806
- default:
11807
- throw new Error("Unknown view mode");
11808
- }
11809
- };
11810
- const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
11811
- const index2 = getDatesDiff(xDate, startDate, viewMode);
11812
- const currentDate = getDateByOffset(startDate, index2, viewMode);
11813
- const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
11814
- const remainderMillis = xDate.getTime() - currentDate.getTime();
11815
- const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
11816
- return index2 * columnWidth + percentOfInterval * columnWidth;
11817
- };
11818
- const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
11819
- const index2 = getDatesDiff(xDate, startDate, viewMode);
11820
- const currentDate = getDateByOffset(startDate, index2, viewMode);
11821
- const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
11822
- const remainderMillis = xDate.getTime() - currentDate.getTime();
11823
- const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
11824
- return index2 * columnWidth + percentOfInterval * columnWidth;
11825
- };
11826
- const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
11827
- const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
11828
- let progressX;
11829
- if (rtl) {
11830
- progressX = taskX2 - progressWidth;
11831
- } else {
11832
- progressX = taskX1;
11833
- }
11834
- return [progressWidth, progressX];
11835
- };
11836
- const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
11837
- let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
11838
- newDate = new Date(
11839
- newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
11840
- );
11841
- return newDate;
11842
- };
11843
- const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
11844
- let result;
11845
- switch (selectedTask.type) {
11846
- case "milestone":
11847
- result = handleTaskBySVGMouseEventForMilestone(
11848
- action,
11849
- selectedTask,
11850
- initialCoordinates,
11851
- coordinates,
11852
- xStep,
11853
- timeStep
11854
- );
11855
- break;
11856
- default:
11857
- result = handleTaskBySVGMouseEventForBar(
11858
- action,
11859
- selectedTask,
11860
- initialCoordinates,
11861
- coordinates,
11862
- xStep,
11863
- timeStep,
11864
- rtl
11865
- );
11866
- break;
11867
- }
11868
- return result;
11869
- };
11870
- const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
11871
- const changedTask = { ...selectedTask };
11872
- let isChanged = false;
11873
- switch (action) {
11874
- case "progress":
11875
- isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
11876
- if (isChanged) {
11877
- changedTask.progress = Math.round(
11878
- coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
11879
- );
11880
- }
11881
- break;
11882
- case "start": {
11883
- isChanged = initialCoordinates.x1 !== coordinates.x1;
11884
- if (isChanged) {
11885
- if (rtl) {
11886
- changedTask.end = dateByX(
11887
- coordinates.x1,
11888
- initialCoordinates.x1,
11889
- selectedTask.end,
11890
- xStep,
11891
- timeStep
11892
- );
11893
- } else {
11894
- changedTask.start = dateByX(
11895
- coordinates.x1,
11896
- initialCoordinates.x1,
11897
- selectedTask.start,
11898
- xStep,
11899
- timeStep
11900
- );
11901
- }
11902
- }
11903
- break;
11904
- }
11905
- case "end": {
11906
- isChanged = initialCoordinates.x2 !== coordinates.x2;
11907
- if (isChanged) {
11908
- if (rtl) {
11909
- changedTask.start = dateByX(
11910
- coordinates.x2,
11911
- initialCoordinates.x2,
11912
- selectedTask.start,
11913
- xStep,
11914
- timeStep
11915
- );
11916
- } else {
11917
- changedTask.end = dateByX(
11918
- coordinates.x2,
11919
- initialCoordinates.x2,
11920
- selectedTask.end,
11921
- xStep,
11922
- timeStep
11923
- );
11924
- }
11925
- }
11926
- break;
11927
- }
11928
- case "move": {
11929
- isChanged = initialCoordinates.x1 !== coordinates.x1;
11930
- if (isChanged) {
11931
- if (rtl) {
11932
- changedTask.end = dateByX(
11933
- coordinates.x1,
11934
- initialCoordinates.x1,
11935
- selectedTask.end,
11936
- xStep,
11937
- timeStep
11938
- );
11939
- changedTask.start = dateByX(
11940
- coordinates.x2,
11941
- initialCoordinates.x2,
11942
- selectedTask.start,
11943
- xStep,
11944
- timeStep
11945
- );
11946
- } else {
11947
- changedTask.start = dateByX(
11948
- coordinates.x1,
11949
- initialCoordinates.x1,
11950
- selectedTask.start,
11951
- xStep,
11952
- timeStep
11953
- );
11954
- changedTask.end = dateByX(
11955
- coordinates.x2,
11956
- initialCoordinates.x2,
11957
- selectedTask.end,
11958
- xStep,
11959
- timeStep
11960
- );
11961
- }
11962
- }
11963
- break;
11964
- }
11965
- }
11966
- return { isChanged, changedTask };
11967
- };
11968
- const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
11969
- const changedTask = { ...selectedTask };
11970
- const isChanged = coordinates.x1 !== initialCoordinates.x1;
11971
- if (isChanged) {
11972
- switch (action) {
11973
- case "move": {
11974
- changedTask.start = dateByX(
11975
- coordinates.x1,
11976
- initialCoordinates.x1,
11977
- selectedTask.start,
11978
- xStep,
11979
- timeStep
11980
- );
11981
- changedTask.end = changedTask.start;
11982
- break;
11983
- }
11984
- }
11985
- }
11986
- return { isChanged, changedTask };
11987
- };
11988
11944
  const barWrapper = "_barWrapper_5jhkr_1";
11989
11945
  const barHandle = "_barHandle_5jhkr_11";
11990
11946
  const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
@@ -19925,6 +19881,7 @@
19925
19881
  rtl,
19926
19882
  startDate,
19927
19883
  viewMode,
19884
+ taskHeight,
19928
19885
  showTodayLine,
19929
19886
  showDataDateLine,
19930
19887
  dataDate,
@@ -19941,6 +19898,7 @@
19941
19898
  rtl,
19942
19899
  startDate,
19943
19900
  viewMode,
19901
+ taskHeight,
19944
19902
  showTodayLine,
19945
19903
  showDataDateLine,
19946
19904
  dataDate,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gantt-task-react-v",
3
- "version": "1.0.58",
3
+ "version": "1.1.1",
4
4
  "description": "Interactive Gantt Chart for React with TypeScript.",
5
5
  "author": "aguilanbon",
6
6
  "homepage": "https://github.com/aguilanbon/gantt-task-react-v",
@@ -55,15 +55,19 @@
55
55
  "@babel/types": "^7.20.7",
56
56
  "@chromatic-com/storybook": "^1.3.1",
57
57
  "@rollup/plugin-image": "3.0.3",
58
- "@storybook/addon-essentials": "^8.0.6",
59
- "@storybook/addon-interactions": "^8.0.6",
60
- "@storybook/addon-links": "^8.0.6",
61
- "@storybook/addon-onboarding": "^8.0.6",
62
- "@storybook/blocks": "^8.0.6",
63
- "@storybook/cli": "^8.4.4",
64
- "@storybook/react": "^8.4.4",
65
- "@storybook/react-vite": "^8.0.6",
66
- "@storybook/test": "^8.0.6",
58
+ "@storybook/addon-essentials": "8.2.10",
59
+ "@storybook/addon-interactions": "8.2.10",
60
+ "@storybook/addon-links": "8.2.10",
61
+ "@storybook/addon-onboarding": "8.2.10",
62
+ "@storybook/blocks": "8.2.10",
63
+ "@storybook/cli": "8.2.10",
64
+ "@storybook/react": "8.2.10",
65
+ "@storybook/react-vite": "8.2.10",
66
+ "@storybook/test": "8.2.10",
67
+ "@storybook/core-server": "8.2.10",
68
+ "@storybook/jest": "0.2.3",
69
+ "@storybook/test-runner": "0.23.0",
70
+ "@storybook/testing-library": "^0.2.2",
67
71
  "@testing-library/jest-dom": "^6.4.2",
68
72
  "@testing-library/react": "^14.2.2",
69
73
  "@testing-library/user-event": "^14.2.1",
@@ -93,7 +97,7 @@
93
97
  "react": "^18.2.0",
94
98
  "react-dom": "^18.2.0",
95
99
  "rollup-plugin-peer-deps-external": "2.2.4",
96
- "storybook": "^8.0.6",
100
+ "storybook": "8.2.10",
97
101
  "typescript": "^5.1.6",
98
102
  "vite": "5.2.8",
99
103
  "vite-plugin-turbosnap": "^1.0.3",