gantt-task-react-v 1.2.11 → 1.2.13
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Distances, ViewMode
|
|
2
|
+
import { Distances, ViewMode } from "../../types";
|
|
3
3
|
export type GanttTodayProps = {
|
|
4
4
|
additionalLeftSpace: number;
|
|
5
5
|
distances: Distances;
|
|
@@ -15,6 +15,5 @@ export type GanttTodayProps = {
|
|
|
15
15
|
dataDateColor?: string | null;
|
|
16
16
|
todayLabel?: string;
|
|
17
17
|
dataDateLabel?: string;
|
|
18
|
-
tasks?: readonly Task[];
|
|
19
18
|
};
|
|
20
19
|
export declare const GanttToday: React.NamedExoticComponent<GanttTodayProps>;
|
|
@@ -10909,220 +10909,6 @@ const styles$c = {
|
|
|
10909
10909
|
ganttToday,
|
|
10910
10910
|
ganttTodayCircle
|
|
10911
10911
|
};
|
|
10912
|
-
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
10913
|
-
switch (viewMode) {
|
|
10914
|
-
case ViewMode.Day:
|
|
10915
|
-
return addDays(startDate, offset2);
|
|
10916
|
-
case ViewMode.HalfDay:
|
|
10917
|
-
return addHours(startDate, offset2 * 12);
|
|
10918
|
-
case ViewMode.QuarterDay:
|
|
10919
|
-
return addHours(startDate, offset2 * 6);
|
|
10920
|
-
case ViewMode.Hour:
|
|
10921
|
-
return addHours(startDate, offset2);
|
|
10922
|
-
case ViewMode.Month:
|
|
10923
|
-
return addMonths(startDate, offset2);
|
|
10924
|
-
case ViewMode.Week:
|
|
10925
|
-
return addWeeks(startDate, offset2);
|
|
10926
|
-
case ViewMode.Year:
|
|
10927
|
-
return addYears(startDate, offset2);
|
|
10928
|
-
default:
|
|
10929
|
-
throw new Error("Unknown view mode");
|
|
10930
|
-
}
|
|
10931
|
-
};
|
|
10932
|
-
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
10933
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
10934
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
10935
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
10936
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
10937
|
-
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
10938
|
-
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
10939
|
-
};
|
|
10940
|
-
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
10941
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
10942
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
10943
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
10944
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
10945
|
-
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
10946
|
-
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
10947
|
-
};
|
|
10948
|
-
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
10949
|
-
const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
|
|
10950
|
-
let progressX;
|
|
10951
|
-
if (rtl) {
|
|
10952
|
-
progressX = taskX2 - progressWidth;
|
|
10953
|
-
} else {
|
|
10954
|
-
progressX = taskX1;
|
|
10955
|
-
}
|
|
10956
|
-
return [progressWidth, progressX];
|
|
10957
|
-
};
|
|
10958
|
-
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
10959
|
-
let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
|
|
10960
|
-
newDate = new Date(
|
|
10961
|
-
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
10962
|
-
);
|
|
10963
|
-
return newDate;
|
|
10964
|
-
};
|
|
10965
|
-
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
10966
|
-
let result;
|
|
10967
|
-
switch (selectedTask.type) {
|
|
10968
|
-
case "milestone":
|
|
10969
|
-
result = handleTaskBySVGMouseEventForMilestone(
|
|
10970
|
-
action,
|
|
10971
|
-
selectedTask,
|
|
10972
|
-
initialCoordinates,
|
|
10973
|
-
coordinates,
|
|
10974
|
-
xStep,
|
|
10975
|
-
timeStep
|
|
10976
|
-
);
|
|
10977
|
-
break;
|
|
10978
|
-
default:
|
|
10979
|
-
result = handleTaskBySVGMouseEventForBar(
|
|
10980
|
-
action,
|
|
10981
|
-
selectedTask,
|
|
10982
|
-
initialCoordinates,
|
|
10983
|
-
coordinates,
|
|
10984
|
-
xStep,
|
|
10985
|
-
timeStep,
|
|
10986
|
-
rtl
|
|
10987
|
-
);
|
|
10988
|
-
break;
|
|
10989
|
-
}
|
|
10990
|
-
return result;
|
|
10991
|
-
};
|
|
10992
|
-
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
10993
|
-
const changedTask = { ...selectedTask };
|
|
10994
|
-
let isChanged = false;
|
|
10995
|
-
switch (action) {
|
|
10996
|
-
case "progress":
|
|
10997
|
-
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
10998
|
-
if (isChanged) {
|
|
10999
|
-
changedTask.progress = Math.round(
|
|
11000
|
-
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
11001
|
-
);
|
|
11002
|
-
}
|
|
11003
|
-
break;
|
|
11004
|
-
case "start": {
|
|
11005
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11006
|
-
if (isChanged) {
|
|
11007
|
-
if (rtl) {
|
|
11008
|
-
changedTask.end = dateByX(
|
|
11009
|
-
coordinates.x1,
|
|
11010
|
-
initialCoordinates.x1,
|
|
11011
|
-
selectedTask.end,
|
|
11012
|
-
xStep,
|
|
11013
|
-
timeStep
|
|
11014
|
-
);
|
|
11015
|
-
} else {
|
|
11016
|
-
changedTask.start = dateByX(
|
|
11017
|
-
coordinates.x1,
|
|
11018
|
-
initialCoordinates.x1,
|
|
11019
|
-
selectedTask.start,
|
|
11020
|
-
xStep,
|
|
11021
|
-
timeStep
|
|
11022
|
-
);
|
|
11023
|
-
}
|
|
11024
|
-
}
|
|
11025
|
-
break;
|
|
11026
|
-
}
|
|
11027
|
-
case "end": {
|
|
11028
|
-
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
11029
|
-
if (isChanged) {
|
|
11030
|
-
if (rtl) {
|
|
11031
|
-
changedTask.start = dateByX(
|
|
11032
|
-
coordinates.x2,
|
|
11033
|
-
initialCoordinates.x2,
|
|
11034
|
-
selectedTask.start,
|
|
11035
|
-
xStep,
|
|
11036
|
-
timeStep
|
|
11037
|
-
);
|
|
11038
|
-
} else {
|
|
11039
|
-
changedTask.end = dateByX(
|
|
11040
|
-
coordinates.x2,
|
|
11041
|
-
initialCoordinates.x2,
|
|
11042
|
-
selectedTask.end,
|
|
11043
|
-
xStep,
|
|
11044
|
-
timeStep
|
|
11045
|
-
);
|
|
11046
|
-
}
|
|
11047
|
-
}
|
|
11048
|
-
break;
|
|
11049
|
-
}
|
|
11050
|
-
case "move": {
|
|
11051
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11052
|
-
if (isChanged) {
|
|
11053
|
-
if (rtl) {
|
|
11054
|
-
changedTask.end = dateByX(
|
|
11055
|
-
coordinates.x1,
|
|
11056
|
-
initialCoordinates.x1,
|
|
11057
|
-
selectedTask.end,
|
|
11058
|
-
xStep,
|
|
11059
|
-
timeStep
|
|
11060
|
-
);
|
|
11061
|
-
changedTask.start = dateByX(
|
|
11062
|
-
coordinates.x2,
|
|
11063
|
-
initialCoordinates.x2,
|
|
11064
|
-
selectedTask.start,
|
|
11065
|
-
xStep,
|
|
11066
|
-
timeStep
|
|
11067
|
-
);
|
|
11068
|
-
} else {
|
|
11069
|
-
changedTask.start = dateByX(
|
|
11070
|
-
coordinates.x1,
|
|
11071
|
-
initialCoordinates.x1,
|
|
11072
|
-
selectedTask.start,
|
|
11073
|
-
xStep,
|
|
11074
|
-
timeStep
|
|
11075
|
-
);
|
|
11076
|
-
changedTask.end = dateByX(
|
|
11077
|
-
coordinates.x2,
|
|
11078
|
-
initialCoordinates.x2,
|
|
11079
|
-
selectedTask.end,
|
|
11080
|
-
xStep,
|
|
11081
|
-
timeStep
|
|
11082
|
-
);
|
|
11083
|
-
}
|
|
11084
|
-
}
|
|
11085
|
-
break;
|
|
11086
|
-
}
|
|
11087
|
-
}
|
|
11088
|
-
return { isChanged, changedTask };
|
|
11089
|
-
};
|
|
11090
|
-
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
11091
|
-
const changedTask = { ...selectedTask };
|
|
11092
|
-
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
11093
|
-
if (isChanged) {
|
|
11094
|
-
switch (action) {
|
|
11095
|
-
case "move": {
|
|
11096
|
-
changedTask.start = dateByX(
|
|
11097
|
-
coordinates.x1,
|
|
11098
|
-
initialCoordinates.x1,
|
|
11099
|
-
selectedTask.start,
|
|
11100
|
-
xStep,
|
|
11101
|
-
timeStep
|
|
11102
|
-
);
|
|
11103
|
-
changedTask.end = changedTask.start;
|
|
11104
|
-
break;
|
|
11105
|
-
}
|
|
11106
|
-
}
|
|
11107
|
-
}
|
|
11108
|
-
return { isChanged, changedTask };
|
|
11109
|
-
};
|
|
11110
|
-
const calculateDataDatePosition = ({
|
|
11111
|
-
dataDate,
|
|
11112
|
-
startDate,
|
|
11113
|
-
viewMode,
|
|
11114
|
-
columnWidth
|
|
11115
|
-
}) => {
|
|
11116
|
-
const milestoneCenter = taskXCoordinate(
|
|
11117
|
-
dataDate,
|
|
11118
|
-
startDate,
|
|
11119
|
-
viewMode,
|
|
11120
|
-
columnWidth
|
|
11121
|
-
);
|
|
11122
|
-
const taskHeight = 32;
|
|
11123
|
-
const milestoneRightEdge = milestoneCenter + taskHeight * 0.5;
|
|
11124
|
-
return milestoneRightEdge;
|
|
11125
|
-
};
|
|
11126
10912
|
const GanttTodayInner = ({
|
|
11127
10913
|
additionalLeftSpace,
|
|
11128
10914
|
distances: { columnWidth },
|
|
@@ -11137,8 +10923,7 @@ const GanttTodayInner = ({
|
|
|
11137
10923
|
todayColor = null,
|
|
11138
10924
|
dataDateColor = null,
|
|
11139
10925
|
todayLabel = "Today",
|
|
11140
|
-
dataDateLabel = "Data Date"
|
|
11141
|
-
tasks = []
|
|
10926
|
+
dataDateLabel = "Data Date"
|
|
11142
10927
|
}) => {
|
|
11143
10928
|
const todayElement = useMemo(() => {
|
|
11144
10929
|
if (isUnknownDates || !showTodayLine) {
|
|
@@ -11221,21 +11006,45 @@ const GanttTodayInner = ({
|
|
|
11221
11006
|
if (!showDataDateLine || !dataDate) {
|
|
11222
11007
|
return null;
|
|
11223
11008
|
}
|
|
11224
|
-
const
|
|
11225
|
-
|
|
11226
|
-
|
|
11227
|
-
|
|
11228
|
-
|
|
11229
|
-
|
|
11230
|
-
|
|
11231
|
-
|
|
11232
|
-
|
|
11009
|
+
const dataIndex = getDatesDiff(dataDate, startDate, viewMode);
|
|
11010
|
+
const extraMultiplier = () => {
|
|
11011
|
+
switch (viewMode) {
|
|
11012
|
+
case ViewMode.Week: {
|
|
11013
|
+
const percent = dataDate.getDay() / 7;
|
|
11014
|
+
return 1 + percent * 0.2;
|
|
11015
|
+
}
|
|
11016
|
+
case ViewMode.Month: {
|
|
11017
|
+
const dayInMonth = dataDate.getDate();
|
|
11018
|
+
const maxDaysInMonth = getDaysInMonth(
|
|
11019
|
+
dataDate.getMonth(),
|
|
11020
|
+
dataDate.getFullYear()
|
|
11021
|
+
);
|
|
11022
|
+
const percent = dayInMonth / maxDaysInMonth;
|
|
11023
|
+
return 1 + percent * 0.5;
|
|
11024
|
+
}
|
|
11025
|
+
case ViewMode.Year: {
|
|
11026
|
+
const percent = dataDate.getMonth() / 12;
|
|
11027
|
+
return 1 + percent * 0.5;
|
|
11028
|
+
}
|
|
11029
|
+
default:
|
|
11030
|
+
return 1;
|
|
11031
|
+
}
|
|
11032
|
+
};
|
|
11033
|
+
const tickX = dataIndex * columnWidth * extraMultiplier();
|
|
11034
|
+
const baseX = rtl ? tickX + columnWidth : tickX;
|
|
11233
11035
|
const color = dataDateColor || "var(--gantt-calendar-today-color)";
|
|
11036
|
+
const size = 12;
|
|
11037
|
+
const half = size / 2;
|
|
11038
|
+
const centerX = baseX + 1;
|
|
11039
|
+
const centerY = 6;
|
|
11040
|
+
const rectX = centerX - half;
|
|
11041
|
+
const rectY = centerY - half;
|
|
11042
|
+
const rightEdgeX = centerX + half * Math.SQRT2;
|
|
11234
11043
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11235
11044
|
/* @__PURE__ */ jsx(
|
|
11236
11045
|
"rect",
|
|
11237
11046
|
{
|
|
11238
|
-
x: additionalLeftSpace +
|
|
11047
|
+
x: additionalLeftSpace + rightEdgeX,
|
|
11239
11048
|
y: 0,
|
|
11240
11049
|
width: 2,
|
|
11241
11050
|
height: ganttFullHeight,
|
|
@@ -11244,19 +11053,22 @@ const GanttTodayInner = ({
|
|
|
11244
11053
|
}
|
|
11245
11054
|
),
|
|
11246
11055
|
/* @__PURE__ */ jsx(
|
|
11247
|
-
"
|
|
11056
|
+
"rect",
|
|
11248
11057
|
{
|
|
11249
|
-
|
|
11250
|
-
|
|
11251
|
-
|
|
11252
|
-
|
|
11253
|
-
fill: color
|
|
11058
|
+
x: additionalLeftSpace + rectX,
|
|
11059
|
+
y: rectY,
|
|
11060
|
+
width: size,
|
|
11061
|
+
height: size,
|
|
11062
|
+
fill: color,
|
|
11063
|
+
transform: `rotate(45 ${additionalLeftSpace + centerX} ${centerY})`,
|
|
11064
|
+
rx: 2,
|
|
11065
|
+
ry: 2
|
|
11254
11066
|
}
|
|
11255
11067
|
),
|
|
11256
11068
|
/* @__PURE__ */ jsx(
|
|
11257
11069
|
"text",
|
|
11258
11070
|
{
|
|
11259
|
-
x: additionalLeftSpace +
|
|
11071
|
+
x: additionalLeftSpace + rightEdgeX + 8,
|
|
11260
11072
|
y: 10,
|
|
11261
11073
|
fill: color,
|
|
11262
11074
|
fontSize: 12,
|
|
@@ -11275,8 +11087,7 @@ const GanttTodayInner = ({
|
|
|
11275
11087
|
showDataDateLine,
|
|
11276
11088
|
dataDate,
|
|
11277
11089
|
dataDateColor,
|
|
11278
|
-
dataDateLabel
|
|
11279
|
-
tasks
|
|
11090
|
+
dataDateLabel
|
|
11280
11091
|
]);
|
|
11281
11092
|
return /* @__PURE__ */ jsxs("g", { className: "today", children: [
|
|
11282
11093
|
dataDateElement,
|
|
@@ -11971,6 +11782,204 @@ const RelationLine = ({
|
|
|
11971
11782
|
}
|
|
11972
11783
|
);
|
|
11973
11784
|
};
|
|
11785
|
+
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
11786
|
+
switch (viewMode) {
|
|
11787
|
+
case ViewMode.Day:
|
|
11788
|
+
return addDays(startDate, offset2);
|
|
11789
|
+
case ViewMode.HalfDay:
|
|
11790
|
+
return addHours(startDate, offset2 * 12);
|
|
11791
|
+
case ViewMode.QuarterDay:
|
|
11792
|
+
return addHours(startDate, offset2 * 6);
|
|
11793
|
+
case ViewMode.Hour:
|
|
11794
|
+
return addHours(startDate, offset2);
|
|
11795
|
+
case ViewMode.Month:
|
|
11796
|
+
return addMonths(startDate, offset2);
|
|
11797
|
+
case ViewMode.Week:
|
|
11798
|
+
return addWeeks(startDate, offset2);
|
|
11799
|
+
case ViewMode.Year:
|
|
11800
|
+
return addYears(startDate, offset2);
|
|
11801
|
+
default:
|
|
11802
|
+
throw new Error("Unknown view mode");
|
|
11803
|
+
}
|
|
11804
|
+
};
|
|
11805
|
+
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11806
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11807
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11808
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11809
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11810
|
+
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
11811
|
+
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11812
|
+
};
|
|
11813
|
+
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11814
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11815
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11816
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11817
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11818
|
+
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
11819
|
+
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11820
|
+
};
|
|
11821
|
+
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
11822
|
+
const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
|
|
11823
|
+
let progressX;
|
|
11824
|
+
if (rtl) {
|
|
11825
|
+
progressX = taskX2 - progressWidth;
|
|
11826
|
+
} else {
|
|
11827
|
+
progressX = taskX1;
|
|
11828
|
+
}
|
|
11829
|
+
return [progressWidth, progressX];
|
|
11830
|
+
};
|
|
11831
|
+
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
11832
|
+
let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
|
|
11833
|
+
newDate = new Date(
|
|
11834
|
+
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
11835
|
+
);
|
|
11836
|
+
return newDate;
|
|
11837
|
+
};
|
|
11838
|
+
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11839
|
+
let result;
|
|
11840
|
+
switch (selectedTask.type) {
|
|
11841
|
+
case "milestone":
|
|
11842
|
+
result = handleTaskBySVGMouseEventForMilestone(
|
|
11843
|
+
action,
|
|
11844
|
+
selectedTask,
|
|
11845
|
+
initialCoordinates,
|
|
11846
|
+
coordinates,
|
|
11847
|
+
xStep,
|
|
11848
|
+
timeStep
|
|
11849
|
+
);
|
|
11850
|
+
break;
|
|
11851
|
+
default:
|
|
11852
|
+
result = handleTaskBySVGMouseEventForBar(
|
|
11853
|
+
action,
|
|
11854
|
+
selectedTask,
|
|
11855
|
+
initialCoordinates,
|
|
11856
|
+
coordinates,
|
|
11857
|
+
xStep,
|
|
11858
|
+
timeStep,
|
|
11859
|
+
rtl
|
|
11860
|
+
);
|
|
11861
|
+
break;
|
|
11862
|
+
}
|
|
11863
|
+
return result;
|
|
11864
|
+
};
|
|
11865
|
+
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11866
|
+
const changedTask = { ...selectedTask };
|
|
11867
|
+
let isChanged = false;
|
|
11868
|
+
switch (action) {
|
|
11869
|
+
case "progress":
|
|
11870
|
+
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
11871
|
+
if (isChanged) {
|
|
11872
|
+
changedTask.progress = Math.round(
|
|
11873
|
+
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
11874
|
+
);
|
|
11875
|
+
}
|
|
11876
|
+
break;
|
|
11877
|
+
case "start": {
|
|
11878
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11879
|
+
if (isChanged) {
|
|
11880
|
+
if (rtl) {
|
|
11881
|
+
changedTask.end = dateByX(
|
|
11882
|
+
coordinates.x1,
|
|
11883
|
+
initialCoordinates.x1,
|
|
11884
|
+
selectedTask.end,
|
|
11885
|
+
xStep,
|
|
11886
|
+
timeStep
|
|
11887
|
+
);
|
|
11888
|
+
} else {
|
|
11889
|
+
changedTask.start = dateByX(
|
|
11890
|
+
coordinates.x1,
|
|
11891
|
+
initialCoordinates.x1,
|
|
11892
|
+
selectedTask.start,
|
|
11893
|
+
xStep,
|
|
11894
|
+
timeStep
|
|
11895
|
+
);
|
|
11896
|
+
}
|
|
11897
|
+
}
|
|
11898
|
+
break;
|
|
11899
|
+
}
|
|
11900
|
+
case "end": {
|
|
11901
|
+
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
11902
|
+
if (isChanged) {
|
|
11903
|
+
if (rtl) {
|
|
11904
|
+
changedTask.start = dateByX(
|
|
11905
|
+
coordinates.x2,
|
|
11906
|
+
initialCoordinates.x2,
|
|
11907
|
+
selectedTask.start,
|
|
11908
|
+
xStep,
|
|
11909
|
+
timeStep
|
|
11910
|
+
);
|
|
11911
|
+
} else {
|
|
11912
|
+
changedTask.end = dateByX(
|
|
11913
|
+
coordinates.x2,
|
|
11914
|
+
initialCoordinates.x2,
|
|
11915
|
+
selectedTask.end,
|
|
11916
|
+
xStep,
|
|
11917
|
+
timeStep
|
|
11918
|
+
);
|
|
11919
|
+
}
|
|
11920
|
+
}
|
|
11921
|
+
break;
|
|
11922
|
+
}
|
|
11923
|
+
case "move": {
|
|
11924
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11925
|
+
if (isChanged) {
|
|
11926
|
+
if (rtl) {
|
|
11927
|
+
changedTask.end = dateByX(
|
|
11928
|
+
coordinates.x1,
|
|
11929
|
+
initialCoordinates.x1,
|
|
11930
|
+
selectedTask.end,
|
|
11931
|
+
xStep,
|
|
11932
|
+
timeStep
|
|
11933
|
+
);
|
|
11934
|
+
changedTask.start = dateByX(
|
|
11935
|
+
coordinates.x2,
|
|
11936
|
+
initialCoordinates.x2,
|
|
11937
|
+
selectedTask.start,
|
|
11938
|
+
xStep,
|
|
11939
|
+
timeStep
|
|
11940
|
+
);
|
|
11941
|
+
} else {
|
|
11942
|
+
changedTask.start = dateByX(
|
|
11943
|
+
coordinates.x1,
|
|
11944
|
+
initialCoordinates.x1,
|
|
11945
|
+
selectedTask.start,
|
|
11946
|
+
xStep,
|
|
11947
|
+
timeStep
|
|
11948
|
+
);
|
|
11949
|
+
changedTask.end = dateByX(
|
|
11950
|
+
coordinates.x2,
|
|
11951
|
+
initialCoordinates.x2,
|
|
11952
|
+
selectedTask.end,
|
|
11953
|
+
xStep,
|
|
11954
|
+
timeStep
|
|
11955
|
+
);
|
|
11956
|
+
}
|
|
11957
|
+
}
|
|
11958
|
+
break;
|
|
11959
|
+
}
|
|
11960
|
+
}
|
|
11961
|
+
return { isChanged, changedTask };
|
|
11962
|
+
};
|
|
11963
|
+
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
11964
|
+
const changedTask = { ...selectedTask };
|
|
11965
|
+
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
11966
|
+
if (isChanged) {
|
|
11967
|
+
switch (action) {
|
|
11968
|
+
case "move": {
|
|
11969
|
+
changedTask.start = dateByX(
|
|
11970
|
+
coordinates.x1,
|
|
11971
|
+
initialCoordinates.x1,
|
|
11972
|
+
selectedTask.start,
|
|
11973
|
+
xStep,
|
|
11974
|
+
timeStep
|
|
11975
|
+
);
|
|
11976
|
+
changedTask.end = changedTask.start;
|
|
11977
|
+
break;
|
|
11978
|
+
}
|
|
11979
|
+
}
|
|
11980
|
+
}
|
|
11981
|
+
return { isChanged, changedTask };
|
|
11982
|
+
};
|
|
11974
11983
|
const barWrapper = "_barWrapper_5jhkr_1";
|
|
11975
11984
|
const barHandle = "_barHandle_5jhkr_11";
|
|
11976
11985
|
const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
|
|
@@ -20187,8 +20196,7 @@ const Gantt = (props) => {
|
|
|
20187
20196
|
todayColor,
|
|
20188
20197
|
dataDateColor,
|
|
20189
20198
|
todayLabel,
|
|
20190
|
-
dataDateLabel
|
|
20191
|
-
tasks: sortedTasks.filter((task) => task.type !== "empty")
|
|
20199
|
+
dataDateLabel
|
|
20192
20200
|
}),
|
|
20193
20201
|
[
|
|
20194
20202
|
additionalLeftSpace,
|
|
@@ -20204,8 +20212,7 @@ const Gantt = (props) => {
|
|
|
20204
20212
|
todayColor,
|
|
20205
20213
|
dataDateColor,
|
|
20206
20214
|
todayLabel,
|
|
20207
|
-
dataDateLabel
|
|
20208
|
-
sortedTasks
|
|
20215
|
+
dataDateLabel
|
|
20209
20216
|
]
|
|
20210
20217
|
);
|
|
20211
20218
|
const calendarProps = useMemo(
|
|
@@ -10926,220 +10926,6 @@
|
|
|
10926
10926
|
ganttToday,
|
|
10927
10927
|
ganttTodayCircle
|
|
10928
10928
|
};
|
|
10929
|
-
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
10930
|
-
switch (viewMode) {
|
|
10931
|
-
case ViewMode.Day:
|
|
10932
|
-
return addDays(startDate, offset2);
|
|
10933
|
-
case ViewMode.HalfDay:
|
|
10934
|
-
return addHours(startDate, offset2 * 12);
|
|
10935
|
-
case ViewMode.QuarterDay:
|
|
10936
|
-
return addHours(startDate, offset2 * 6);
|
|
10937
|
-
case ViewMode.Hour:
|
|
10938
|
-
return addHours(startDate, offset2);
|
|
10939
|
-
case ViewMode.Month:
|
|
10940
|
-
return addMonths(startDate, offset2);
|
|
10941
|
-
case ViewMode.Week:
|
|
10942
|
-
return addWeeks(startDate, offset2);
|
|
10943
|
-
case ViewMode.Year:
|
|
10944
|
-
return addYears(startDate, offset2);
|
|
10945
|
-
default:
|
|
10946
|
-
throw new Error("Unknown view mode");
|
|
10947
|
-
}
|
|
10948
|
-
};
|
|
10949
|
-
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
10950
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
10951
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
10952
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
10953
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
10954
|
-
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
10955
|
-
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
10956
|
-
};
|
|
10957
|
-
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
10958
|
-
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
10959
|
-
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
10960
|
-
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
10961
|
-
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
10962
|
-
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
10963
|
-
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
10964
|
-
};
|
|
10965
|
-
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
10966
|
-
const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
|
|
10967
|
-
let progressX;
|
|
10968
|
-
if (rtl) {
|
|
10969
|
-
progressX = taskX2 - progressWidth;
|
|
10970
|
-
} else {
|
|
10971
|
-
progressX = taskX1;
|
|
10972
|
-
}
|
|
10973
|
-
return [progressWidth, progressX];
|
|
10974
|
-
};
|
|
10975
|
-
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
10976
|
-
let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
|
|
10977
|
-
newDate = new Date(
|
|
10978
|
-
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
10979
|
-
);
|
|
10980
|
-
return newDate;
|
|
10981
|
-
};
|
|
10982
|
-
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
10983
|
-
let result;
|
|
10984
|
-
switch (selectedTask.type) {
|
|
10985
|
-
case "milestone":
|
|
10986
|
-
result = handleTaskBySVGMouseEventForMilestone(
|
|
10987
|
-
action,
|
|
10988
|
-
selectedTask,
|
|
10989
|
-
initialCoordinates,
|
|
10990
|
-
coordinates,
|
|
10991
|
-
xStep,
|
|
10992
|
-
timeStep
|
|
10993
|
-
);
|
|
10994
|
-
break;
|
|
10995
|
-
default:
|
|
10996
|
-
result = handleTaskBySVGMouseEventForBar(
|
|
10997
|
-
action,
|
|
10998
|
-
selectedTask,
|
|
10999
|
-
initialCoordinates,
|
|
11000
|
-
coordinates,
|
|
11001
|
-
xStep,
|
|
11002
|
-
timeStep,
|
|
11003
|
-
rtl
|
|
11004
|
-
);
|
|
11005
|
-
break;
|
|
11006
|
-
}
|
|
11007
|
-
return result;
|
|
11008
|
-
};
|
|
11009
|
-
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11010
|
-
const changedTask = { ...selectedTask };
|
|
11011
|
-
let isChanged = false;
|
|
11012
|
-
switch (action) {
|
|
11013
|
-
case "progress":
|
|
11014
|
-
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
11015
|
-
if (isChanged) {
|
|
11016
|
-
changedTask.progress = Math.round(
|
|
11017
|
-
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
11018
|
-
);
|
|
11019
|
-
}
|
|
11020
|
-
break;
|
|
11021
|
-
case "start": {
|
|
11022
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11023
|
-
if (isChanged) {
|
|
11024
|
-
if (rtl) {
|
|
11025
|
-
changedTask.end = dateByX(
|
|
11026
|
-
coordinates.x1,
|
|
11027
|
-
initialCoordinates.x1,
|
|
11028
|
-
selectedTask.end,
|
|
11029
|
-
xStep,
|
|
11030
|
-
timeStep
|
|
11031
|
-
);
|
|
11032
|
-
} else {
|
|
11033
|
-
changedTask.start = dateByX(
|
|
11034
|
-
coordinates.x1,
|
|
11035
|
-
initialCoordinates.x1,
|
|
11036
|
-
selectedTask.start,
|
|
11037
|
-
xStep,
|
|
11038
|
-
timeStep
|
|
11039
|
-
);
|
|
11040
|
-
}
|
|
11041
|
-
}
|
|
11042
|
-
break;
|
|
11043
|
-
}
|
|
11044
|
-
case "end": {
|
|
11045
|
-
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
11046
|
-
if (isChanged) {
|
|
11047
|
-
if (rtl) {
|
|
11048
|
-
changedTask.start = dateByX(
|
|
11049
|
-
coordinates.x2,
|
|
11050
|
-
initialCoordinates.x2,
|
|
11051
|
-
selectedTask.start,
|
|
11052
|
-
xStep,
|
|
11053
|
-
timeStep
|
|
11054
|
-
);
|
|
11055
|
-
} else {
|
|
11056
|
-
changedTask.end = dateByX(
|
|
11057
|
-
coordinates.x2,
|
|
11058
|
-
initialCoordinates.x2,
|
|
11059
|
-
selectedTask.end,
|
|
11060
|
-
xStep,
|
|
11061
|
-
timeStep
|
|
11062
|
-
);
|
|
11063
|
-
}
|
|
11064
|
-
}
|
|
11065
|
-
break;
|
|
11066
|
-
}
|
|
11067
|
-
case "move": {
|
|
11068
|
-
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11069
|
-
if (isChanged) {
|
|
11070
|
-
if (rtl) {
|
|
11071
|
-
changedTask.end = dateByX(
|
|
11072
|
-
coordinates.x1,
|
|
11073
|
-
initialCoordinates.x1,
|
|
11074
|
-
selectedTask.end,
|
|
11075
|
-
xStep,
|
|
11076
|
-
timeStep
|
|
11077
|
-
);
|
|
11078
|
-
changedTask.start = dateByX(
|
|
11079
|
-
coordinates.x2,
|
|
11080
|
-
initialCoordinates.x2,
|
|
11081
|
-
selectedTask.start,
|
|
11082
|
-
xStep,
|
|
11083
|
-
timeStep
|
|
11084
|
-
);
|
|
11085
|
-
} else {
|
|
11086
|
-
changedTask.start = dateByX(
|
|
11087
|
-
coordinates.x1,
|
|
11088
|
-
initialCoordinates.x1,
|
|
11089
|
-
selectedTask.start,
|
|
11090
|
-
xStep,
|
|
11091
|
-
timeStep
|
|
11092
|
-
);
|
|
11093
|
-
changedTask.end = dateByX(
|
|
11094
|
-
coordinates.x2,
|
|
11095
|
-
initialCoordinates.x2,
|
|
11096
|
-
selectedTask.end,
|
|
11097
|
-
xStep,
|
|
11098
|
-
timeStep
|
|
11099
|
-
);
|
|
11100
|
-
}
|
|
11101
|
-
}
|
|
11102
|
-
break;
|
|
11103
|
-
}
|
|
11104
|
-
}
|
|
11105
|
-
return { isChanged, changedTask };
|
|
11106
|
-
};
|
|
11107
|
-
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
11108
|
-
const changedTask = { ...selectedTask };
|
|
11109
|
-
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
11110
|
-
if (isChanged) {
|
|
11111
|
-
switch (action) {
|
|
11112
|
-
case "move": {
|
|
11113
|
-
changedTask.start = dateByX(
|
|
11114
|
-
coordinates.x1,
|
|
11115
|
-
initialCoordinates.x1,
|
|
11116
|
-
selectedTask.start,
|
|
11117
|
-
xStep,
|
|
11118
|
-
timeStep
|
|
11119
|
-
);
|
|
11120
|
-
changedTask.end = changedTask.start;
|
|
11121
|
-
break;
|
|
11122
|
-
}
|
|
11123
|
-
}
|
|
11124
|
-
}
|
|
11125
|
-
return { isChanged, changedTask };
|
|
11126
|
-
};
|
|
11127
|
-
const calculateDataDatePosition = ({
|
|
11128
|
-
dataDate,
|
|
11129
|
-
startDate,
|
|
11130
|
-
viewMode,
|
|
11131
|
-
columnWidth
|
|
11132
|
-
}) => {
|
|
11133
|
-
const milestoneCenter = taskXCoordinate(
|
|
11134
|
-
dataDate,
|
|
11135
|
-
startDate,
|
|
11136
|
-
viewMode,
|
|
11137
|
-
columnWidth
|
|
11138
|
-
);
|
|
11139
|
-
const taskHeight = 32;
|
|
11140
|
-
const milestoneRightEdge = milestoneCenter + taskHeight * 0.5;
|
|
11141
|
-
return milestoneRightEdge;
|
|
11142
|
-
};
|
|
11143
10929
|
const GanttTodayInner = ({
|
|
11144
10930
|
additionalLeftSpace,
|
|
11145
10931
|
distances: { columnWidth },
|
|
@@ -11154,8 +10940,7 @@
|
|
|
11154
10940
|
todayColor = null,
|
|
11155
10941
|
dataDateColor = null,
|
|
11156
10942
|
todayLabel = "Today",
|
|
11157
|
-
dataDateLabel = "Data Date"
|
|
11158
|
-
tasks = []
|
|
10943
|
+
dataDateLabel = "Data Date"
|
|
11159
10944
|
}) => {
|
|
11160
10945
|
const todayElement = React.useMemo(() => {
|
|
11161
10946
|
if (isUnknownDates || !showTodayLine) {
|
|
@@ -11238,21 +11023,45 @@
|
|
|
11238
11023
|
if (!showDataDateLine || !dataDate) {
|
|
11239
11024
|
return null;
|
|
11240
11025
|
}
|
|
11241
|
-
const
|
|
11242
|
-
|
|
11243
|
-
|
|
11244
|
-
|
|
11245
|
-
|
|
11246
|
-
|
|
11247
|
-
|
|
11248
|
-
|
|
11249
|
-
|
|
11026
|
+
const dataIndex = getDatesDiff(dataDate, startDate, viewMode);
|
|
11027
|
+
const extraMultiplier = () => {
|
|
11028
|
+
switch (viewMode) {
|
|
11029
|
+
case ViewMode.Week: {
|
|
11030
|
+
const percent = dataDate.getDay() / 7;
|
|
11031
|
+
return 1 + percent * 0.2;
|
|
11032
|
+
}
|
|
11033
|
+
case ViewMode.Month: {
|
|
11034
|
+
const dayInMonth = dataDate.getDate();
|
|
11035
|
+
const maxDaysInMonth = getDaysInMonth(
|
|
11036
|
+
dataDate.getMonth(),
|
|
11037
|
+
dataDate.getFullYear()
|
|
11038
|
+
);
|
|
11039
|
+
const percent = dayInMonth / maxDaysInMonth;
|
|
11040
|
+
return 1 + percent * 0.5;
|
|
11041
|
+
}
|
|
11042
|
+
case ViewMode.Year: {
|
|
11043
|
+
const percent = dataDate.getMonth() / 12;
|
|
11044
|
+
return 1 + percent * 0.5;
|
|
11045
|
+
}
|
|
11046
|
+
default:
|
|
11047
|
+
return 1;
|
|
11048
|
+
}
|
|
11049
|
+
};
|
|
11050
|
+
const tickX = dataIndex * columnWidth * extraMultiplier();
|
|
11051
|
+
const baseX = rtl ? tickX + columnWidth : tickX;
|
|
11250
11052
|
const color = dataDateColor || "var(--gantt-calendar-today-color)";
|
|
11053
|
+
const size = 12;
|
|
11054
|
+
const half = size / 2;
|
|
11055
|
+
const centerX = baseX + 1;
|
|
11056
|
+
const centerY = 6;
|
|
11057
|
+
const rectX = centerX - half;
|
|
11058
|
+
const rectY = centerY - half;
|
|
11059
|
+
const rightEdgeX = centerX + half * Math.SQRT2;
|
|
11251
11060
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
11252
11061
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11253
11062
|
"rect",
|
|
11254
11063
|
{
|
|
11255
|
-
x: additionalLeftSpace +
|
|
11064
|
+
x: additionalLeftSpace + rightEdgeX,
|
|
11256
11065
|
y: 0,
|
|
11257
11066
|
width: 2,
|
|
11258
11067
|
height: ganttFullHeight,
|
|
@@ -11261,19 +11070,22 @@
|
|
|
11261
11070
|
}
|
|
11262
11071
|
),
|
|
11263
11072
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11264
|
-
"
|
|
11073
|
+
"rect",
|
|
11265
11074
|
{
|
|
11266
|
-
|
|
11267
|
-
|
|
11268
|
-
|
|
11269
|
-
|
|
11270
|
-
fill: color
|
|
11075
|
+
x: additionalLeftSpace + rectX,
|
|
11076
|
+
y: rectY,
|
|
11077
|
+
width: size,
|
|
11078
|
+
height: size,
|
|
11079
|
+
fill: color,
|
|
11080
|
+
transform: `rotate(45 ${additionalLeftSpace + centerX} ${centerY})`,
|
|
11081
|
+
rx: 2,
|
|
11082
|
+
ry: 2
|
|
11271
11083
|
}
|
|
11272
11084
|
),
|
|
11273
11085
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
11274
11086
|
"text",
|
|
11275
11087
|
{
|
|
11276
|
-
x: additionalLeftSpace +
|
|
11088
|
+
x: additionalLeftSpace + rightEdgeX + 8,
|
|
11277
11089
|
y: 10,
|
|
11278
11090
|
fill: color,
|
|
11279
11091
|
fontSize: 12,
|
|
@@ -11292,8 +11104,7 @@
|
|
|
11292
11104
|
showDataDateLine,
|
|
11293
11105
|
dataDate,
|
|
11294
11106
|
dataDateColor,
|
|
11295
|
-
dataDateLabel
|
|
11296
|
-
tasks
|
|
11107
|
+
dataDateLabel
|
|
11297
11108
|
]);
|
|
11298
11109
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
|
|
11299
11110
|
dataDateElement,
|
|
@@ -11988,6 +11799,204 @@
|
|
|
11988
11799
|
}
|
|
11989
11800
|
);
|
|
11990
11801
|
};
|
|
11802
|
+
const getDateByOffset = (startDate, offset2, viewMode) => {
|
|
11803
|
+
switch (viewMode) {
|
|
11804
|
+
case ViewMode.Day:
|
|
11805
|
+
return addDays(startDate, offset2);
|
|
11806
|
+
case ViewMode.HalfDay:
|
|
11807
|
+
return addHours(startDate, offset2 * 12);
|
|
11808
|
+
case ViewMode.QuarterDay:
|
|
11809
|
+
return addHours(startDate, offset2 * 6);
|
|
11810
|
+
case ViewMode.Hour:
|
|
11811
|
+
return addHours(startDate, offset2);
|
|
11812
|
+
case ViewMode.Month:
|
|
11813
|
+
return addMonths(startDate, offset2);
|
|
11814
|
+
case ViewMode.Week:
|
|
11815
|
+
return addWeeks(startDate, offset2);
|
|
11816
|
+
case ViewMode.Year:
|
|
11817
|
+
return addYears(startDate, offset2);
|
|
11818
|
+
default:
|
|
11819
|
+
throw new Error("Unknown view mode");
|
|
11820
|
+
}
|
|
11821
|
+
};
|
|
11822
|
+
const taskXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11823
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11824
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11825
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11826
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11827
|
+
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
11828
|
+
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11829
|
+
};
|
|
11830
|
+
const taskComparisonXCoordinate = (xDate, startDate, viewMode, columnWidth) => {
|
|
11831
|
+
const index2 = getDatesDiff(xDate, startDate, viewMode);
|
|
11832
|
+
const currentDate = getDateByOffset(startDate, index2, viewMode);
|
|
11833
|
+
const nextDate = getDateByOffset(startDate, index2 + 1, viewMode);
|
|
11834
|
+
const remainderMillis = xDate.getTime() - currentDate.getTime();
|
|
11835
|
+
const percentOfInterval = remainderMillis / (nextDate.getTime() - currentDate.getTime());
|
|
11836
|
+
return index2 * columnWidth + percentOfInterval * columnWidth;
|
|
11837
|
+
};
|
|
11838
|
+
const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
|
|
11839
|
+
const progressWidth = Math.max((taskX2 - taskX1) * progress * 0.01, 0);
|
|
11840
|
+
let progressX;
|
|
11841
|
+
if (rtl) {
|
|
11842
|
+
progressX = taskX2 - progressWidth;
|
|
11843
|
+
} else {
|
|
11844
|
+
progressX = taskX1;
|
|
11845
|
+
}
|
|
11846
|
+
return [progressWidth, progressX];
|
|
11847
|
+
};
|
|
11848
|
+
const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
|
|
11849
|
+
let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
|
|
11850
|
+
newDate = new Date(
|
|
11851
|
+
newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 6e4
|
|
11852
|
+
);
|
|
11853
|
+
return newDate;
|
|
11854
|
+
};
|
|
11855
|
+
const handleTaskBySVGMouseEvent = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11856
|
+
let result;
|
|
11857
|
+
switch (selectedTask.type) {
|
|
11858
|
+
case "milestone":
|
|
11859
|
+
result = handleTaskBySVGMouseEventForMilestone(
|
|
11860
|
+
action,
|
|
11861
|
+
selectedTask,
|
|
11862
|
+
initialCoordinates,
|
|
11863
|
+
coordinates,
|
|
11864
|
+
xStep,
|
|
11865
|
+
timeStep
|
|
11866
|
+
);
|
|
11867
|
+
break;
|
|
11868
|
+
default:
|
|
11869
|
+
result = handleTaskBySVGMouseEventForBar(
|
|
11870
|
+
action,
|
|
11871
|
+
selectedTask,
|
|
11872
|
+
initialCoordinates,
|
|
11873
|
+
coordinates,
|
|
11874
|
+
xStep,
|
|
11875
|
+
timeStep,
|
|
11876
|
+
rtl
|
|
11877
|
+
);
|
|
11878
|
+
break;
|
|
11879
|
+
}
|
|
11880
|
+
return result;
|
|
11881
|
+
};
|
|
11882
|
+
const handleTaskBySVGMouseEventForBar = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep, rtl) => {
|
|
11883
|
+
const changedTask = { ...selectedTask };
|
|
11884
|
+
let isChanged = false;
|
|
11885
|
+
switch (action) {
|
|
11886
|
+
case "progress":
|
|
11887
|
+
isChanged = initialCoordinates.progressWidth !== coordinates.progressWidth;
|
|
11888
|
+
if (isChanged) {
|
|
11889
|
+
changedTask.progress = Math.round(
|
|
11890
|
+
coordinates.progressWidth * 100 / (coordinates.x2 - coordinates.x1)
|
|
11891
|
+
);
|
|
11892
|
+
}
|
|
11893
|
+
break;
|
|
11894
|
+
case "start": {
|
|
11895
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11896
|
+
if (isChanged) {
|
|
11897
|
+
if (rtl) {
|
|
11898
|
+
changedTask.end = dateByX(
|
|
11899
|
+
coordinates.x1,
|
|
11900
|
+
initialCoordinates.x1,
|
|
11901
|
+
selectedTask.end,
|
|
11902
|
+
xStep,
|
|
11903
|
+
timeStep
|
|
11904
|
+
);
|
|
11905
|
+
} else {
|
|
11906
|
+
changedTask.start = dateByX(
|
|
11907
|
+
coordinates.x1,
|
|
11908
|
+
initialCoordinates.x1,
|
|
11909
|
+
selectedTask.start,
|
|
11910
|
+
xStep,
|
|
11911
|
+
timeStep
|
|
11912
|
+
);
|
|
11913
|
+
}
|
|
11914
|
+
}
|
|
11915
|
+
break;
|
|
11916
|
+
}
|
|
11917
|
+
case "end": {
|
|
11918
|
+
isChanged = initialCoordinates.x2 !== coordinates.x2;
|
|
11919
|
+
if (isChanged) {
|
|
11920
|
+
if (rtl) {
|
|
11921
|
+
changedTask.start = dateByX(
|
|
11922
|
+
coordinates.x2,
|
|
11923
|
+
initialCoordinates.x2,
|
|
11924
|
+
selectedTask.start,
|
|
11925
|
+
xStep,
|
|
11926
|
+
timeStep
|
|
11927
|
+
);
|
|
11928
|
+
} else {
|
|
11929
|
+
changedTask.end = dateByX(
|
|
11930
|
+
coordinates.x2,
|
|
11931
|
+
initialCoordinates.x2,
|
|
11932
|
+
selectedTask.end,
|
|
11933
|
+
xStep,
|
|
11934
|
+
timeStep
|
|
11935
|
+
);
|
|
11936
|
+
}
|
|
11937
|
+
}
|
|
11938
|
+
break;
|
|
11939
|
+
}
|
|
11940
|
+
case "move": {
|
|
11941
|
+
isChanged = initialCoordinates.x1 !== coordinates.x1;
|
|
11942
|
+
if (isChanged) {
|
|
11943
|
+
if (rtl) {
|
|
11944
|
+
changedTask.end = dateByX(
|
|
11945
|
+
coordinates.x1,
|
|
11946
|
+
initialCoordinates.x1,
|
|
11947
|
+
selectedTask.end,
|
|
11948
|
+
xStep,
|
|
11949
|
+
timeStep
|
|
11950
|
+
);
|
|
11951
|
+
changedTask.start = dateByX(
|
|
11952
|
+
coordinates.x2,
|
|
11953
|
+
initialCoordinates.x2,
|
|
11954
|
+
selectedTask.start,
|
|
11955
|
+
xStep,
|
|
11956
|
+
timeStep
|
|
11957
|
+
);
|
|
11958
|
+
} else {
|
|
11959
|
+
changedTask.start = dateByX(
|
|
11960
|
+
coordinates.x1,
|
|
11961
|
+
initialCoordinates.x1,
|
|
11962
|
+
selectedTask.start,
|
|
11963
|
+
xStep,
|
|
11964
|
+
timeStep
|
|
11965
|
+
);
|
|
11966
|
+
changedTask.end = dateByX(
|
|
11967
|
+
coordinates.x2,
|
|
11968
|
+
initialCoordinates.x2,
|
|
11969
|
+
selectedTask.end,
|
|
11970
|
+
xStep,
|
|
11971
|
+
timeStep
|
|
11972
|
+
);
|
|
11973
|
+
}
|
|
11974
|
+
}
|
|
11975
|
+
break;
|
|
11976
|
+
}
|
|
11977
|
+
}
|
|
11978
|
+
return { isChanged, changedTask };
|
|
11979
|
+
};
|
|
11980
|
+
const handleTaskBySVGMouseEventForMilestone = (action, selectedTask, initialCoordinates, coordinates, xStep, timeStep) => {
|
|
11981
|
+
const changedTask = { ...selectedTask };
|
|
11982
|
+
const isChanged = coordinates.x1 !== initialCoordinates.x1;
|
|
11983
|
+
if (isChanged) {
|
|
11984
|
+
switch (action) {
|
|
11985
|
+
case "move": {
|
|
11986
|
+
changedTask.start = dateByX(
|
|
11987
|
+
coordinates.x1,
|
|
11988
|
+
initialCoordinates.x1,
|
|
11989
|
+
selectedTask.start,
|
|
11990
|
+
xStep,
|
|
11991
|
+
timeStep
|
|
11992
|
+
);
|
|
11993
|
+
changedTask.end = changedTask.start;
|
|
11994
|
+
break;
|
|
11995
|
+
}
|
|
11996
|
+
}
|
|
11997
|
+
}
|
|
11998
|
+
return { isChanged, changedTask };
|
|
11999
|
+
};
|
|
11991
12000
|
const barWrapper = "_barWrapper_5jhkr_1";
|
|
11992
12001
|
const barHandle = "_barHandle_5jhkr_11";
|
|
11993
12002
|
const barHandleImportantVisible = "_barHandleImportantVisible_5jhkr_37";
|
|
@@ -20204,8 +20213,7 @@
|
|
|
20204
20213
|
todayColor,
|
|
20205
20214
|
dataDateColor,
|
|
20206
20215
|
todayLabel,
|
|
20207
|
-
dataDateLabel
|
|
20208
|
-
tasks: sortedTasks.filter((task) => task.type !== "empty")
|
|
20216
|
+
dataDateLabel
|
|
20209
20217
|
}),
|
|
20210
20218
|
[
|
|
20211
20219
|
additionalLeftSpace,
|
|
@@ -20221,8 +20229,7 @@
|
|
|
20221
20229
|
todayColor,
|
|
20222
20230
|
dataDateColor,
|
|
20223
20231
|
todayLabel,
|
|
20224
|
-
dataDateLabel
|
|
20225
|
-
sortedTasks
|
|
20232
|
+
dataDateLabel
|
|
20226
20233
|
]
|
|
20227
20234
|
);
|
|
20228
20235
|
const calendarProps = React.useMemo(
|
package/package.json
CHANGED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Task, ViewMode } from "../types";
|
|
2
|
-
export interface DataDatePositionOptions {
|
|
3
|
-
dataDate: Date;
|
|
4
|
-
startDate: Date;
|
|
5
|
-
viewMode: ViewMode;
|
|
6
|
-
columnWidth: number;
|
|
7
|
-
tasks?: readonly Task[];
|
|
8
|
-
rtl?: boolean;
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* Calculate data date line position by creating a virtual milestone bar for the data date
|
|
12
|
-
* and positioning the line at the end of that milestone bar (just like the custom frontend fix)
|
|
13
|
-
*/
|
|
14
|
-
/**
|
|
15
|
-
* Calculate data date line position by positioning it at the right edge of where a milestone
|
|
16
|
-
* would be positioned (exactly matching the actual milestone positioning logic)
|
|
17
|
-
*/
|
|
18
|
-
export declare const calculateDataDatePosition: ({ dataDate, startDate, viewMode, columnWidth, }: DataDatePositionOptions) => number;
|