gantt-canvas-chart 1.6.0 → 1.6.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.
Files changed (5) hide show
  1. package/dist/index.cjs.js +33 -19
  2. package/dist/index.css +1 -1
  3. package/dist/index.es.js +33 -19
  4. package/dist/index.umd.js +33 -19
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * gantt-canvas-chart v1.6.0
2
+ * gantt-canvas-chart v1.6.1
3
3
  * (c) 2025-present chandq
4
4
  * Released under the MIT License.
5
5
  */
@@ -9,24 +9,35 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
9
9
  class DateUtils {
10
10
  static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
11
11
  static format(date, format = "yyyy-MM-dd") {
12
- const o = {
13
- "M+": date.getMonth() + 1,
14
- "d+": date.getDate(),
15
- "h+": date.getHours(),
16
- "m+": date.getMinutes(),
17
- "s+": date.getSeconds(),
12
+ let fmt = format;
13
+ let ret;
14
+ const opt = {
15
+ "Y+": `${date.getFullYear()}`,
16
+ // 年
17
+ "y+": `${date.getFullYear()}`,
18
+ // 年
19
+ "M+": `${date.getMonth() + 1}`,
20
+ // 月
21
+ "D+": `${date.getDate()}`,
22
+ // 日
23
+ "d+": `${date.getDate()}`,
24
+ // 日
25
+ "h+": `${date.getHours()}`,
26
+ // 时
27
+ "m+": `${date.getMinutes()}`,
28
+ // 分
29
+ "s+": `${date.getSeconds()}`,
30
+ // 秒
18
31
  "q+": Math.floor((date.getMonth() + 3) / 3),
19
32
  W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
20
33
  };
21
- if (/(y+)/.test(format))
22
- format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
23
- for (let k in o)
24
- if (new RegExp("(" + k + ")").test(format))
25
- format = format.replace(
26
- RegExp.$1,
27
- RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
28
- );
29
- return format;
34
+ for (const k in opt) {
35
+ ret = new RegExp("(" + k + ")").exec(fmt);
36
+ if (ret) {
37
+ fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
38
+ }
39
+ }
40
+ return fmt;
30
41
  }
31
42
  static addDays(date, days) {
32
43
  const r = new Date(date);
@@ -331,6 +342,7 @@ class GanttChart {
331
342
  destroy() {
332
343
  if (this.resizeObserver) {
333
344
  this.resizeObserver.disconnect();
345
+ this.resizeObserver = null;
334
346
  }
335
347
  this.container.removeEventListener("scroll", this.handleScroll);
336
348
  this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
@@ -338,6 +350,8 @@ class GanttChart {
338
350
  this.data = [];
339
351
  this.taskMap.clear();
340
352
  this.taskPositions.clear();
353
+ this.holidaysMap.clear();
354
+ this.config.holidays = [];
341
355
  this.container.remove();
342
356
  }
343
357
  calculateFullTimeline() {
@@ -754,7 +768,7 @@ class GanttChart {
754
768
  }
755
769
  const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
756
770
  ctx.fillStyle = "#333";
757
- ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
771
+ ctx.font = "bold 12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
758
772
  ctx.textAlign = "left";
759
773
  groupedBlocks.forEach((group) => {
760
774
  const visibleStart = Math.max(group.startX, this.scrollLeft);
@@ -763,7 +777,7 @@ class GanttChart {
763
777
  ctx.fillStyle = this.config.headerBgColor;
764
778
  ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
765
779
  ctx.fillStyle = "#333";
766
- ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
780
+ ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos - 3));
767
781
  }
768
782
  });
769
783
  while (currentDateForLower <= this.visibleDateRange.end) {
@@ -802,7 +816,7 @@ class GanttChart {
802
816
  }
803
817
  const unitWidth = this.dateToX(nextDate) - x;
804
818
  ctx.fillStyle = "#000412";
805
- ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
819
+ ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
806
820
  ctx.textAlign = "center";
807
821
  ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
808
822
  ctx.beginPath();
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * gantt-canvas-chart v1.6.0
2
+ * gantt-canvas-chart v1.6.1
3
3
  * (c) 2025-present chandq
4
4
  * Released under the MIT License.
5
5
  */
package/dist/index.es.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * gantt-canvas-chart v1.6.0
2
+ * gantt-canvas-chart v1.6.1
3
3
  * (c) 2025-present chandq
4
4
  * Released under the MIT License.
5
5
  */
@@ -7,24 +7,35 @@
7
7
  class DateUtils {
8
8
  static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
9
9
  static format(date, format = "yyyy-MM-dd") {
10
- const o = {
11
- "M+": date.getMonth() + 1,
12
- "d+": date.getDate(),
13
- "h+": date.getHours(),
14
- "m+": date.getMinutes(),
15
- "s+": date.getSeconds(),
10
+ let fmt = format;
11
+ let ret;
12
+ const opt = {
13
+ "Y+": `${date.getFullYear()}`,
14
+ // 年
15
+ "y+": `${date.getFullYear()}`,
16
+ // 年
17
+ "M+": `${date.getMonth() + 1}`,
18
+ // 月
19
+ "D+": `${date.getDate()}`,
20
+ // 日
21
+ "d+": `${date.getDate()}`,
22
+ // 日
23
+ "h+": `${date.getHours()}`,
24
+ // 时
25
+ "m+": `${date.getMinutes()}`,
26
+ // 分
27
+ "s+": `${date.getSeconds()}`,
28
+ // 秒
16
29
  "q+": Math.floor((date.getMonth() + 3) / 3),
17
30
  W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
18
31
  };
19
- if (/(y+)/.test(format))
20
- format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
21
- for (let k in o)
22
- if (new RegExp("(" + k + ")").test(format))
23
- format = format.replace(
24
- RegExp.$1,
25
- RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
26
- );
27
- return format;
32
+ for (const k in opt) {
33
+ ret = new RegExp("(" + k + ")").exec(fmt);
34
+ if (ret) {
35
+ fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
36
+ }
37
+ }
38
+ return fmt;
28
39
  }
29
40
  static addDays(date, days) {
30
41
  const r = new Date(date);
@@ -329,6 +340,7 @@ class GanttChart {
329
340
  destroy() {
330
341
  if (this.resizeObserver) {
331
342
  this.resizeObserver.disconnect();
343
+ this.resizeObserver = null;
332
344
  }
333
345
  this.container.removeEventListener("scroll", this.handleScroll);
334
346
  this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
@@ -336,6 +348,8 @@ class GanttChart {
336
348
  this.data = [];
337
349
  this.taskMap.clear();
338
350
  this.taskPositions.clear();
351
+ this.holidaysMap.clear();
352
+ this.config.holidays = [];
339
353
  this.container.remove();
340
354
  }
341
355
  calculateFullTimeline() {
@@ -752,7 +766,7 @@ class GanttChart {
752
766
  }
753
767
  const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
754
768
  ctx.fillStyle = "#333";
755
- ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
769
+ ctx.font = "bold 12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
756
770
  ctx.textAlign = "left";
757
771
  groupedBlocks.forEach((group) => {
758
772
  const visibleStart = Math.max(group.startX, this.scrollLeft);
@@ -761,7 +775,7 @@ class GanttChart {
761
775
  ctx.fillStyle = this.config.headerBgColor;
762
776
  ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
763
777
  ctx.fillStyle = "#333";
764
- ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
778
+ ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos - 3));
765
779
  }
766
780
  });
767
781
  while (currentDateForLower <= this.visibleDateRange.end) {
@@ -800,7 +814,7 @@ class GanttChart {
800
814
  }
801
815
  const unitWidth = this.dateToX(nextDate) - x;
802
816
  ctx.fillStyle = "#000412";
803
- ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
817
+ ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
804
818
  ctx.textAlign = "center";
805
819
  ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
806
820
  ctx.beginPath();
package/dist/index.umd.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * gantt-canvas-chart v1.6.0
2
+ * gantt-canvas-chart v1.6.1
3
3
  * (c) 2025-present chandq
4
4
  * Released under the MIT License.
5
5
  */
@@ -11,24 +11,35 @@
11
11
  class DateUtils {
12
12
  static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
13
13
  static format(date, format = "yyyy-MM-dd") {
14
- const o = {
15
- "M+": date.getMonth() + 1,
16
- "d+": date.getDate(),
17
- "h+": date.getHours(),
18
- "m+": date.getMinutes(),
19
- "s+": date.getSeconds(),
14
+ let fmt = format;
15
+ let ret;
16
+ const opt = {
17
+ "Y+": `${date.getFullYear()}`,
18
+ // 年
19
+ "y+": `${date.getFullYear()}`,
20
+ // 年
21
+ "M+": `${date.getMonth() + 1}`,
22
+ // 月
23
+ "D+": `${date.getDate()}`,
24
+ // 日
25
+ "d+": `${date.getDate()}`,
26
+ // 日
27
+ "h+": `${date.getHours()}`,
28
+ // 时
29
+ "m+": `${date.getMinutes()}`,
30
+ // 分
31
+ "s+": `${date.getSeconds()}`,
32
+ // 秒
20
33
  "q+": Math.floor((date.getMonth() + 3) / 3),
21
34
  W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
22
35
  };
23
- if (/(y+)/.test(format))
24
- format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
25
- for (let k in o)
26
- if (new RegExp("(" + k + ")").test(format))
27
- format = format.replace(
28
- RegExp.$1,
29
- RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
30
- );
31
- return format;
36
+ for (const k in opt) {
37
+ ret = new RegExp("(" + k + ")").exec(fmt);
38
+ if (ret) {
39
+ fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
40
+ }
41
+ }
42
+ return fmt;
32
43
  }
33
44
  static addDays(date, days) {
34
45
  const r = new Date(date);
@@ -333,6 +344,7 @@
333
344
  destroy() {
334
345
  if (this.resizeObserver) {
335
346
  this.resizeObserver.disconnect();
347
+ this.resizeObserver = null;
336
348
  }
337
349
  this.container.removeEventListener("scroll", this.handleScroll);
338
350
  this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
@@ -340,6 +352,8 @@
340
352
  this.data = [];
341
353
  this.taskMap.clear();
342
354
  this.taskPositions.clear();
355
+ this.holidaysMap.clear();
356
+ this.config.holidays = [];
343
357
  this.container.remove();
344
358
  }
345
359
  calculateFullTimeline() {
@@ -756,7 +770,7 @@
756
770
  }
757
771
  const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
758
772
  ctx.fillStyle = "#333";
759
- ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
773
+ ctx.font = "bold 12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
760
774
  ctx.textAlign = "left";
761
775
  groupedBlocks.forEach((group) => {
762
776
  const visibleStart = Math.max(group.startX, this.scrollLeft);
@@ -765,7 +779,7 @@
765
779
  ctx.fillStyle = this.config.headerBgColor;
766
780
  ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
767
781
  ctx.fillStyle = "#333";
768
- ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
782
+ ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos - 3));
769
783
  }
770
784
  });
771
785
  while (currentDateForLower <= this.visibleDateRange.end) {
@@ -804,7 +818,7 @@
804
818
  }
805
819
  const unitWidth = this.dateToX(nextDate) - x;
806
820
  ctx.fillStyle = "#000412";
807
- ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
821
+ ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
808
822
  ctx.textAlign = "center";
809
823
  ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
810
824
  ctx.beginPath();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gantt-canvas-chart",
3
- "version": "1.6.0",
3
+ "version": "1.6.1",
4
4
  "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
5
5
  "type": "module",
6
6
  "main": "dist/index.es.js",