@visactor/vtable-gantt 1.20.3 → 1.21.1-alpha.0

package/cjs/Gantt.d.ts

@@ -8,6 +8,7 @@ import { StateManager } from './state/state-manager';
 import { EventTarget } from './event/EventTarget';
 import { DataSource } from './data/DataSource';
 import { PluginManager } from './plugins/plugin-manager';
+import { ZoomScaleManager } from './zoom-scale';
 export declare function createRootElement(padding: any, className?: string): HTMLElement;
 export declare class Gantt extends EventTarget {
     options: GanttConstructorOptions;
@@ -104,7 +105,16 @@ export declare class Gantt extends EventTarget {
         eventOptions: IEventOptions;
         keyboardOptions: IKeyboardOptions;
         markLineCreateOptions: IMarkLineCreateOptions;
+        zoom?: {
+            minMillisecondsPerPixel?: number;
+            maxMillisecondsPerPixel?: number;
+            step?: number;
+        };
     };
+    private millisecondsPerPixel;
+    zoomScaleManager?: ZoomScaleManager;
+    recalculateTimeScale(): void;
+    zoomByFactor(factor: number, keepCenter?: boolean, centerX?: number): void;
     taskTableWidth: number;
     taskTableColumns: ITableColumnsDefine;
     records: any[];
@@ -148,6 +158,8 @@ export declare class Gantt extends EventTarget {
     updateTasksShowMode(tasksShowMode: TasksShowMode): void;
     _resize(): void;
     _syncPropsFromTable(): void;
+    private hasDataZoom;
+    private getDataZoomHeight;
     getContext(): CanvasRenderingContext2D;
     release(): void;
     updateOption(options: GanttConstructorOptions): void;
@@ -180,4 +192,7 @@ export declare class Gantt extends EventTarget {
     parseTimeFormat(date: string): string;
     getTaskBarStyle(task_index: number, sub_task_index?: number | number[]): ITaskBarStyle;
     formatDate(date: Date | string, format: string): string;
+    getCurrentMillisecondsPerPixel(): number;
+    setMillisecondsPerPixel(millisecondsPerPixel: number): void;
+    getCurrentZoomScaleLevel(): number;
 }

package/cjs/Gantt.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Gantt = exports.createRootElement = void 0;
 
-const scenegraph_1 = require("./scenegraph/scenegraph"), env_1 = require("./env"), ts_types_1 = require("./ts-types"), vtable_1 = require("@visactor/vtable"), event_manager_1 = require("./event/event-manager"), state_manager_1 = require("./state/state-manager"), gantt_helper_1 = require("./gantt-helper"), EventTarget_1 = require("./event/EventTarget"), util_1 = require("./tools/util"), DataSource_1 = require("./data/DataSource"), vutils_1 = require("@visactor/vutils"), plugin_manager_1 = require("./plugins/plugin-manager"), vtable_2 = require("@visactor/vtable");
+const scenegraph_1 = require("./scenegraph/scenegraph"), env_1 = require("./env"), ts_types_1 = require("./ts-types"), vtable_1 = require("@visactor/vtable"), event_manager_1 = require("./event/event-manager"), state_manager_1 = require("./state/state-manager"), gantt_helper_1 = require("./gantt-helper"), EventTarget_1 = require("./event/EventTarget"), util_1 = require("./tools/util"), DataSource_1 = require("./data/DataSource"), vutils_1 = require("@visactor/vutils"), plugin_manager_1 = require("./plugins/plugin-manager"), vtable_2 = require("@visactor/vtable"), zoom_scale_1 = require("./zoom-scale");
 
 function createRootElement(padding, className = "vtable-gantt") {
     var _a, _b;
@@ -20,15 +20,23 @@ function createRootElement(padding, className = "vtable-gantt") {
 exports.createRootElement = createRootElement;
 
 class Gantt extends EventTarget_1.EventTarget {
+    recalculateTimeScale() {
+        this.zoomScaleManager && this.zoomScaleManager.recalculateTimeScale();
+    }
+    zoomByFactor(factor, keepCenter = !0, centerX) {
+        this.zoomScaleManager && this.zoomScaleManager.zoomByFactor(factor, keepCenter, centerX);
+    }
     constructor(container, options) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         super(), this.parsedOptions = {}, this.container = container, this.options = options, 
         this.taskTableWidth = "number" == typeof (null === (_a = null == options ? void 0 : options.taskListTable) || void 0 === _a ? void 0 : _a.tableWidth) ? null === (_b = null == options ? void 0 : options.taskListTable) || void 0 === _b ? void 0 : _b.tableWidth : -1, 
         this.taskTableColumns = null !== (_d = null === (_c = null == options ? void 0 : options.taskListTable) || void 0 === _c ? void 0 : _c.columns) && void 0 !== _d ? _d : [], 
         this.records = null !== (_e = null == options ? void 0 : options.records) && void 0 !== _e ? _e : [], 
-        this._sortScales(), (0, gantt_helper_1.initOptions)(this), (0, gantt_helper_1.initProjectTaskTimes)(this), 
-        this.data = new DataSource_1.DataSource(this), this._generateTimeLineDateMap(), 
-        this.timeLineHeaderLevel = this.parsedOptions.sortedTimelineScales.length, this.element = createRootElement({
+        (null === (_f = options.timelineHeader) || void 0 === _f ? void 0 : _f.zoomScale) && !1 !== options.timelineHeader.zoomScale.enabled && (this.zoomScaleManager = new zoom_scale_1.ZoomScaleManager(this, options.timelineHeader.zoomScale)), 
+        this._sortScales(), (0, gantt_helper_1.initOptions)(this), this.zoomScaleManager ? this.millisecondsPerPixel = this.zoomScaleManager.getInitialMillisecondsPerPixel() : this.millisecondsPerPixel = 144e4, 
+        (0, gantt_helper_1.initProjectTaskTimes)(this), this.data = new DataSource_1.DataSource(this), 
+        this._generateTimeLineDateMap(), this.timeLineHeaderLevel = this.parsedOptions.sortedTimelineScales.length, 
+        this.element = createRootElement({
             top: 0,
             right: 0,
             left: 0,
@@ -39,7 +47,8 @@ class Gantt extends EventTarget_1.EventTarget {
         this._updateSize()) : this._updateSize(), this._generateListTable(), this._syncPropsFromTable(), 
         (0, gantt_helper_1.createSplitLineAndResizeLine)(this), this.scenegraph = new scenegraph_1.Scenegraph(this), 
         this.stateManager = new state_manager_1.StateManager(this), this.eventManager = new event_manager_1.EventManager(this), 
-        this.scenegraph.afterCreateSceneGraph(), this._scrollToMarkLine(), this.pluginManager = new plugin_manager_1.PluginManager(this, options);
+        this.scenegraph.afterCreateSceneGraph(), this._scrollToMarkLine(), this.pluginManager = new plugin_manager_1.PluginManager(this, options), 
+        this.recalculateTimeScale();
     }
     renderTaskBarsTable() {
         this.scenegraph.updateNextFrame();
@@ -55,7 +64,7 @@ class Gantt extends EventTarget_1.EventTarget {
                 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);
             }
-            const width1 = (null != widthWithoutPadding ? widthWithoutPadding : 1) - 1 - this.taskTableWidth, height1 = (null != heightWithoutPadding ? heightWithoutPadding : 1) - 1;
+            const width1 = (null != widthWithoutPadding ? widthWithoutPadding : 1) - 1 - this.taskTableWidth, height1 = (null != heightWithoutPadding ? heightWithoutPadding : 1) - 1 - this.getDataZoomHeight();
             element.style.width = width1 && `${width1}px` || "0px", element.style.height = height1 && `${height1}px` || "0px";
             const {canvas: canvas} = this;
             widthP = null !== (_b = null === (_a = canvas.parentElement) || void 0 === _a ? void 0 : _a.offsetWidth) && void 0 !== _b ? _b : 1, 
@@ -381,13 +390,24 @@ class Gantt extends EventTarget_1.EventTarget {
         this.headerHeight = this.getAllHeaderRowsHeight(), this.drawHeight = Math.min(this.getAllRowsHeight(), this.tableNoFrameHeight), 
         this.gridHeight = this.drawHeight - this.headerHeight;
     }
+    hasDataZoom() {
+        var _a;
+        if (!this.zoomScaleManager) return !1;
+        const dataZoomConfig = null === (_a = this.zoomScaleManager.config) || void 0 === _a ? void 0 : _a.dataZoomAxis;
+        return !(!dataZoomConfig || !1 === dataZoomConfig.enabled) && null !== this.zoomScaleManager.getDataZoomIntegration();
+    }
+    getDataZoomHeight() {
+        var _a, _b, _c;
+        return this.hasDataZoom() ? (null === (_c = null === (_b = null === (_a = this.zoomScaleManager) || void 0 === _a ? void 0 : _a.config) || void 0 === _b ? void 0 : _b.dataZoomAxis) || void 0 === _c ? void 0 : _c.height) || 30 : 0;
+    }
     getContext() {
         return this.context;
     }
     release() {
         var _a, _b, _c;
         null === (_a = super.release) || void 0 === _a || _a.call(this), this.eventManager.release(), 
-        null === (_b = this.taskListTableInstance) || void 0 === _b || _b.release();
+        null === (_b = this.taskListTableInstance) || void 0 === _b || _b.release(), this.zoomScaleManager && (this.zoomScaleManager.destroyDataZoomIntegration(), 
+        this.zoomScaleManager = null);
         const parentElement = null === (_c = this.element) || void 0 === _c ? void 0 : _c.parentElement;
         parentElement && (parentElement.removeChild(this.element), this.verticalSplitResizeLine && parentElement.removeChild(this.verticalSplitResizeLine), 
         this.horizontalSplitLine && parentElement.removeChild(this.horizontalSplitLine)), 
@@ -531,6 +551,27 @@ class Gantt extends EventTarget_1.EventTarget {
     formatDate(date, format) {
         return (0, util_1.formatDate)(date, format);
     }
+    getCurrentMillisecondsPerPixel() {
+        return this.millisecondsPerPixel;
+    }
+    setMillisecondsPerPixel(millisecondsPerPixel) {
+        var _a, _b, _c, _d;
+        const minMillisecondsPerPixel = null !== (_b = null === (_a = this.parsedOptions.zoom) || void 0 === _a ? void 0 : _a.minMillisecondsPerPixel) && void 0 !== _b ? _b : 2e5, maxMillisecondsPerPixel = null !== (_d = null === (_c = this.parsedOptions.zoom) || void 0 === _c ? void 0 : _c.maxMillisecondsPerPixel) && void 0 !== _d ? _d : 3e6, oldMillisecondsPerPixel = this.millisecondsPerPixel, oldWidth = this.parsedOptions.timelineColWidth;
+        this.millisecondsPerPixel = Math.max(minMillisecondsPerPixel, Math.min(maxMillisecondsPerPixel, millisecondsPerPixel)), 
+        this.recalculateTimeScale(), this._updateSize(), this.scenegraph.refreshAll();
+        const newWidth = this.parsedOptions.timelineColWidth, scale = newWidth / oldWidth;
+        this.hasListeners(ts_types_1.GANTT_EVENT_TYPE.ZOOM) && this.fireListeners(ts_types_1.GANTT_EVENT_TYPE.ZOOM, {
+            oldWidth: oldWidth,
+            newWidth: newWidth,
+            scale: scale,
+            oldMillisecondsPerPixel: oldMillisecondsPerPixel,
+            newMillisecondsPerPixel: this.millisecondsPerPixel
+        });
+    }
+    getCurrentZoomScaleLevel() {
+        var _a, _b;
+        return null !== (_b = null === (_a = this.zoomScaleManager) || void 0 === _a ? void 0 : _a.getCurrentLevel()) && void 0 !== _b ? _b : -1;
+    }
 }
 
 exports.Gantt = Gantt;