@visactor/vtable-gantt 1.14.0 → 1.14.1

package/dist/vtable-gantt.js

@@ -25702,8 +25702,6 @@
     }
 
     class Grid {
-        vertical;
-        horizontal;
         gridStyle;
         scrollLeft;
         scrollTop;
@@ -25716,13 +25714,13 @@
         group;
         verticalLineGroup;
         horizontalLineGroup;
+        verticalBackgroundRectsGroup;
+        horizontalBackgroundRectsGroup;
         allGridHeight;
         allGridWidth;
         _scene;
         constructor(scene) {
             this._scene = scene;
-            this.vertical = !!scene._gantt.parsedOptions.grid.verticalLine;
-            this.horizontal = !!scene._gantt.parsedOptions.grid.horizontalLine;
             this.scrollLeft = 0;
             this.scrollTop = 0;
             this.x = 0;
@@ -25743,6 +25741,8 @@
             });
             this.group.name = 'grid-container';
             scene.tableGroup.addChild(this.group);
+            this.createVerticalBackgroundRects();
+            this.createHorizontalBackgroundRects();
             this.createVerticalLines();
             this.createHorizontalLines();
             this.createTimeLineHeaderBottomLine();
@@ -25768,7 +25768,7 @@
         }
         createVerticalLines() {
             const gridStyle = this._scene._gantt.parsedOptions.grid;
-            if (this.vertical) {
+            if (gridStyle.verticalLine) {
                 this.verticalLineGroup = new Group$2({
                     x: 0,
                     y: 0,
@@ -25820,7 +25820,7 @@
         }
         createHorizontalLines() {
             const gridStyle = this._scene._gantt.parsedOptions.grid;
-            if (this.horizontal) {
+            if (gridStyle.horizontalLine) {
                 this.horizontalLineGroup = new Group$2({
                     x: 0,
                     y: 0,
@@ -25871,6 +25871,92 @@
                 }
             }
         }
+        createVerticalBackgroundRects() {
+            const verticalBackgroundColor = this._scene._gantt.parsedOptions.grid.verticalBackgroundColor;
+            const weekendBackgroundColor = this._scene._gantt.parsedOptions.grid.weekendBackgroundColor;
+            if (verticalBackgroundColor || weekendBackgroundColor) {
+                this.verticalBackgroundRectsGroup = new Group$2({
+                    x: 0,
+                    y: 0,
+                    width: this.allGridWidth,
+                    height: this.allGridHeight
+                });
+                this.verticalBackgroundRectsGroup.name = 'grid-vertical-background';
+                this.group.appendChild(this.verticalBackgroundRectsGroup);
+                const { timelineDates, unit, step } = this._scene._gantt.parsedOptions.reverseSortedTimelineScales[0];
+                const timelineColWidth = this._scene._gantt.parsedOptions.timelineColWidth;
+                if (verticalBackgroundColor || weekendBackgroundColor) {
+                    for (let i = 0; i <= timelineDates?.length - 1; i++) {
+                        let backgroundColor;
+                        if (weekendBackgroundColor &&
+                            unit === 'day' &&
+                            step === 1 &&
+                            (timelineDates[i].startDate.getDay() === 0 || timelineDates[i].startDate.getDay() === 6)) {
+                            backgroundColor = weekendBackgroundColor;
+                        }
+                        else if (typeof verticalBackgroundColor === 'function') {
+                            backgroundColor = verticalBackgroundColor({
+                                index: i,
+                                dateIndex: timelineDates[i].dateIndex,
+                                date: timelineDates[i].endDate,
+                                ganttInstance: this._scene._gantt
+                            });
+                        }
+                        else if (verticalBackgroundColor) {
+                            backgroundColor = verticalBackgroundColor[i % verticalBackgroundColor.length];
+                        }
+                        if (backgroundColor) {
+                            const x = Math.ceil(timelineColWidth * i);
+                            const rect = createRect({
+                                pickable: false,
+                                fill: backgroundColor,
+                                x,
+                                y: 0,
+                                width: timelineColWidth,
+                                height: this.allGridHeight
+                            });
+                            this.verticalBackgroundRectsGroup.appendChild(rect);
+                        }
+                    }
+                }
+            }
+        }
+        createHorizontalBackgroundRects() {
+            const horizontalBackgroundColor = this._scene._gantt.parsedOptions.grid.horizontalBackgroundColor;
+            if (horizontalBackgroundColor) {
+                this.horizontalBackgroundRectsGroup = new Group$2({
+                    x: 0,
+                    y: 0,
+                    width: this.allGridWidth,
+                    height: this.allGridHeight
+                });
+                this.horizontalBackgroundRectsGroup.name = 'grid-horizontal-background';
+                this.group.appendChild(this.horizontalBackgroundRectsGroup);
+                let y = 0;
+                for (let i = 0; i <= this.rowCount - 1; i++) {
+                    let backgroundColor;
+                    if (typeof horizontalBackgroundColor === 'function') {
+                        backgroundColor = horizontalBackgroundColor({
+                            index: i,
+                            ganttInstance: this._scene._gantt
+                        });
+                    }
+                    else {
+                        backgroundColor = horizontalBackgroundColor[i % horizontalBackgroundColor.length];
+                    }
+                    const rect = createRect({
+                        pickable: false,
+                        fill: backgroundColor,
+                        x: 0,
+                        y,
+                        width: this.allGridWidth,
+                        height: this._scene._gantt.getRowHeightByIndex(i)
+                    });
+                    this.horizontalBackgroundRectsGroup.appendChild(rect);
+                    y += this._scene._gantt.getRowHeightByIndex(i);
+                }
+            }
+        }
         refresh() {
             this.width = this._scene.tableGroup.attribute.width;
             this.height = this._scene.tableGroup.attribute.height - this._scene.timelineHeader.group.attribute.height;
@@ -25882,8 +25968,9 @@
             this.rowCount = this._scene._gantt.itemCount;
             this.allGridWidth = this._scene._gantt.getAllDateColsWidth();
             this.allGridHeight = this._scene._gantt.getAllTaskBarsHeight();
-            this.verticalLineGroup?.parent.removeChild(this.verticalLineGroup);
-            this.horizontalLineGroup?.parent.removeChild(this.horizontalLineGroup);
+            this.group.removeAllChild();
+            this.createVerticalBackgroundRects();
+            this.createHorizontalBackgroundRects();
             this.createVerticalLines();
             this.createHorizontalLines();
             this.createTimeLineHeaderBottomLine();
@@ -25891,10 +25978,14 @@
         setX(x) {
             this.verticalLineGroup?.setAttribute('x', x);
             this.horizontalLineGroup?.setAttribute('x', x);
+            this.verticalBackgroundRectsGroup?.setAttribute('x', x);
+            this.horizontalBackgroundRectsGroup?.setAttribute('x', x);
         }
         setY(y) {
             this.verticalLineGroup?.setAttribute('y', y);
             this.horizontalLineGroup?.setAttribute('y', y);
+            this.verticalBackgroundRectsGroup?.setAttribute('y', y);
+            this.horizontalBackgroundRectsGroup?.setAttribute('y', y);
         }
         resize() {
             this.width = this._scene.tableGroup.attribute.width;
@@ -30927,6 +31018,14 @@
                         taskDays: linkedFromTaskTaskDays
                     } = gantt.getTaskInfoByTaskListIndex(linkedFromTaskShowIndex));
                 }
+                if (!linkedFromTaskStartDate ||
+                    !linkedFromTaskEndDate ||
+                    !linkedToTaskStartDate ||
+                    !linkedToTaskEndDate ||
+                    !linkLineNode ||
+                    !lineArrowNode) {
+                    return;
+                }
                 const { linePoints, arrowPoints } = updateLinkLinePoints(type, linkedFromTaskStartDate, linkedFromTaskEndDate, linkedFromTaskShowIndex, linkedFromTaskTaskDays, linkedFromTaskRecord.record.type === 'milestone', null, 0, linkedToTaskStartDate, linkedToTaskEndDate, linkedToTaskShowIndex, linkedToTaskTaskDays, linkedToTaskRecord.record.type === 'milestone', target, diffY ?? 0, this._gantt);
                 linkLineNode.setAttribute('points', linePoints);
                 lineArrowNode.setAttribute('points', arrowPoints);
@@ -31017,6 +31116,14 @@
                     } = gantt.getTaskInfoByTaskListIndex(linkedFromTaskShowIndex));
                 }
                 const { linePoints, arrowPoints } = updateLinkLinePoints(type, linkedFromTaskStartDate, linkedFromTaskEndDate, linkedFromTaskShowIndex, linkedFromTaskTaskDays, linkedFromTaskRecord.record.type === 'milestone', target, diffY ?? 0, linkedToTaskStartDate, linkedToTaskEndDate, linkedToTaskShowIndex, linkedToTaskTaskDays, linkedToTaskRecord.record.type === 'milestone', null, 0, this._gantt);
+                if (!linkedFromTaskStartDate ||
+                    !linkedFromTaskEndDate ||
+                    !linkedToTaskStartDate ||
+                    !linkedToTaskEndDate ||
+                    !linkLineNode ||
+                    !lineArrowNode) {
+                    return;
+                }
                 linkLineNode.setAttribute('points', linePoints);
                 lineArrowNode.setAttribute('points', arrowPoints);
             }
@@ -45905,7 +46012,7 @@
         table: table
       } = state;
       let source, target;
-      if (table.internalProps.transpose ? (sourceIndex = table.getRecordShowIndexByCell(sourceIndex, 0), targetIndex = table.getRecordShowIndexByCell(targetIndex, 0)) : (source = table.getRecordIndexByCell(0, sourceIndex), target = table.getRecordIndexByCell(0, targetIndex)), isNumber$2(source) && isNumber$2(target)) {
+      if (table.internalProps.transpose ? (sourceIndex = table.getRecordShowIndexByCell(sourceIndex, 0), targetIndex = table.getRecordShowIndexByCell(targetIndex, 0)) : (source = table.isPivotTable() ? void 0 : table.getRecordIndexByCell(0, sourceIndex), target = table.isPivotTable() ? void 0 : table.getRecordIndexByCell(0, targetIndex)), isNumber$2(source) && isNumber$2(target)) {
         if (sourceIndex > targetIndex) {
           const sourceRecord = checkedState.get(sourceIndex.toString());
           for (let i = sourceIndex; i > targetIndex; i--) checkedState.set(i.toString(), checkedState.get((i - 1).toString()));
@@ -50735,7 +50842,7 @@
       constructor(container) {
         let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.14.0", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.14.1", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         const {
           frozenColCount = 0,
           frozenRowCount: frozenRowCount,
@@ -51040,15 +51147,13 @@
             heightWithoutPadding = 0;
           if (this.canvasSizeSeted) widthWithoutPadding = this.canvasWidth, heightWithoutPadding = this.canvasHeight;else if (element.parentElement) {
             const computedStyle = element.parentElement.style || window.getComputedStyle(element.parentElement);
-            widthWithoutPadding = element.parentElement.offsetWidth - parseInt(computedStyle.paddingLeft || "0px", 10) - parseInt(computedStyle.paddingRight || "0px", 10), heightWithoutPadding = element.parentElement.offsetHeight - parseInt(computedStyle.paddingTop || "0px", 10) - parseInt(computedStyle.paddingBottom || "0px", 20);
+            widthWithoutPadding = element.parentElement.offsetWidth - parseInt(computedStyle.paddingLeft || "0px", 10) - parseInt(computedStyle.paddingRight || "0px", 10), heightWithoutPadding = element.parentElement.offsetHeight - parseInt(computedStyle.paddingTop || "0px", 10) - parseInt(computedStyle.paddingBottom || "0px", 20), widthWithoutPadding = (null != widthWithoutPadding ? widthWithoutPadding : 1) - (this.options.tableSizeAntiJitter ? 1 : 0), heightWithoutPadding = (null != heightWithoutPadding ? heightWithoutPadding : 1) - (this.options.tableSizeAntiJitter ? 1 : 0);
           }
-          const width1 = null != widthWithoutPadding ? widthWithoutPadding : 0,
-            height1 = null != heightWithoutPadding ? heightWithoutPadding : 0;
-          element.style.width = width1 && width1 - padding.left - padding.right + "px" || "0px", element.style.height = height1 && height1 - padding.top - padding.bottom + "px" || "0px";
+          element.style.width = widthWithoutPadding && widthWithoutPadding - padding.left - padding.right + "px" || "0px", element.style.height = heightWithoutPadding && heightWithoutPadding - padding.top - padding.bottom + "px" || "0px";
           const {
             canvas: canvas
           } = this.internalProps;
-          widthP = null !== (_c = null === (_b = canvas.parentElement) || void 0 === _b ? void 0 : _b.offsetWidth) && void 0 !== _c ? _c : 0, heightP = null !== (_e = null === (_d = canvas.parentElement) || void 0 === _d ? void 0 : _d.offsetHeight) && void 0 !== _e ? _e : 0, (null === (_f = null == this ? void 0 : this.scenegraph) || void 0 === _f ? void 0 : _f.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", canvas.style.height = "", canvas.width = widthP, canvas.height = heightP, canvas.style.width = `${widthP}px`, canvas.style.height = `${heightP}px`);
+          widthP = (null !== (_c = null === (_b = canvas.parentElement) || void 0 === _b ? void 0 : _b.offsetWidth) && void 0 !== _c ? _c : 1) - (this.options.tableSizeAntiJitter ? 1 : 0), heightP = (null !== (_e = null === (_d = canvas.parentElement) || void 0 === _d ? void 0 : _d.offsetHeight) && void 0 !== _e ? _e : 1) - (this.options.tableSizeAntiJitter ? 1 : 0), (null === (_f = null == this ? void 0 : this.scenegraph) || void 0 === _f ? void 0 : _f.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", canvas.style.height = "", canvas.width = widthP, canvas.height = heightP, canvas.style.width = `${widthP}px`, canvas.style.height = `${heightP}px`);
         } else "node" === Env.mode && (widthP = this.canvasWidth - 1, heightP = this.canvasHeight - 1);
         const width = Math.floor(widthP - getVerticalScrollBarSize(this.getTheme().scrollStyle)),
           height = Math.floor(heightP - getHorizontalScrollBarSize(this.getTheme().scrollStyle));
@@ -54143,12 +54248,13 @@
             newHeight = computeRowHeight(row, 0, table.colCount - 1, table);
           table.scenegraph.updateRowHeight(row, newHeight - oldHeight);
         }
-        table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
+        const changedValue = table.getCellOriginValue(col, row);
+        oldValue !== changedValue && table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
           col: col,
           row: row,
           rawValue: beforeChangeValue,
           currentValue: oldValue,
-          changedValue: table.getCellOriginValue(col, row)
+          changedValue: changedValue
         }), table.scenegraph.updateNextFrame();
       }
     }
@@ -54194,12 +54300,14 @@
               } = table.internalProps.layoutMap.getBody(startCol + j, startRow + i),
               beforeChangeValue = beforeChangeValues[i][j],
               oldValue = oldValues[i][j];
-            table.isHeader(startCol + j, startRow + i) ? table.internalProps.layoutMap.updateColumnTitle(startCol + j, startRow + i, value) : table.dataSource.changeFieldValue(value, recordIndex, field, startCol + j, startRow + i, table), table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
+            table.isHeader(startCol + j, startRow + i) ? table.internalProps.layoutMap.updateColumnTitle(startCol + j, startRow + i, value) : table.dataSource.changeFieldValue(value, recordIndex, field, startCol + j, startRow + i, table);
+            const changedValue = table.getCellOriginValue(startCol + j, startRow + i);
+            oldValue !== changedValue && table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
               col: startCol + j,
               row: startRow + i,
               rawValue: beforeChangeValue,
               currentValue: oldValue,
-              changedValue: table.getCellOriginValue(startCol + j, startRow + i)
+              changedValue: changedValue
             });
           }
         }
@@ -60941,11 +61049,8 @@
             const taskRecord = this._gantt.getRecordByIndex(taskIndex, sub_task_index);
             const progress = taskRecord[progressField];
             let diffWidth = this._gantt.stateManager.resizeTaskBar.onIconName === 'left' ? -dx : dx;
-            let taskBarSize = taskBarGroup.attribute.width + diffWidth;
-            if (diffWidth < 0 && taskBarSize <= this._gantt.parsedOptions.timelineColWidth) {
-                diffWidth = this._gantt.parsedOptions.timelineColWidth - taskBarGroup.attribute.width;
-                taskBarSize += diffWidth;
-            }
+            const taskBarSize = Math.max(1, taskBarGroup.attribute.width + diffWidth);
+            diffWidth = taskBarSize - taskBarGroup.attribute.width;
             resizeOrMoveTaskBar(taskBarGroup, this._gantt.stateManager.resizeTaskBar.onIconName === 'left' ? -diffWidth : 0, 0, taskBarSize, this);
             clipGroupBox.setAttribute('width', taskBarGroup.attribute.width);
             rect?.setAttribute('width', taskBarGroup.attribute.width);
@@ -62186,7 +62291,7 @@
         themes: themes$1
     });
 
-    const version = "1.14.0";
+    const version = "1.14.1";
 
     exports.Gantt = Gantt;
     exports.TYPES = index$3;