tg-ganttchart 0.0.13 → 0.0.14

package/dist/tgganttchart.common.js

@@ -3427,8 +3427,8 @@ var render = function render() {
 };
 var staticRenderFns = [];
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.vue?vue&type=template&id=0a0b0d9f
-var GanttElasticvue_type_template_id_0a0b0d9f_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.vue?vue&type=template&id=95091692
+var GanttElasticvue_type_template_id_95091692_render = function render() {
   var _vm = this,
     _c = _vm._self._c,
     _setup = _vm._self._setupProxy;
@@ -3457,7 +3457,7 @@ var GanttElasticvue_type_template_id_0a0b0d9f_render = function render() {
     }
   }), _vm._t("footer")], 2);
 };
-var GanttElasticvue_type_template_id_0a0b0d9f_staticRenderFns = [];
+var GanttElasticvue_type_template_id_95091692_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
@@ -3812,8 +3812,8 @@ var MainViewvue_type_template_id_79e1eba9_render = function render() {
 };
 var MainViewvue_type_template_id_79e1eba9_staticRenderFns = [];
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/TaskList.vue?vue&type=template&id=74ce1216
-var TaskListvue_type_template_id_74ce1216_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/TaskList.vue?vue&type=template&id=b705a4ea
+var TaskListvue_type_template_id_b705a4ea_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3842,17 +3842,36 @@ var TaskListvue_type_template_id_74ce1216_render = function render() {
     style: {
       ..._vm.root.style['task-list-items'],
       height: _vm.root.state.options.rowsHeight + 'px'
+    },
+    on: {
+      "scroll": _vm.onScroll
     }
-  }, _vm._l(_vm.root.visibleTasks, function (task) {
+  }, [_c('div', {
+    style: {
+      height: _vm.totalHeight + 'px',
+      position: 'relative'
+    }
+  }, [_c('div', {
+    style: {
+      transform: `translateY(${_vm.offsetY}px)`,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0
+    }
+  }, _vm._l(_vm.visibleTasks, function (task) {
     return _c('task-list-item', {
       key: task.id,
+      style: {
+        height: _vm.taskHeight + 'px'
+      },
       attrs: {
         "task": task
       }
     });
-  }), 1)], 1)]);
+  }), 1)])])], 1)]);
 };
-var TaskListvue_type_template_id_74ce1216_staticRenderFns = [];
+var TaskListvue_type_template_id_b705a4ea_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/TaskListHeader.vue?vue&type=template&id=2ecc0032
 var TaskListHeadervue_type_template_id_2ecc0032_render = function render() {
@@ -3905,8 +3924,8 @@ var TaskListHeadervue_type_template_id_2ecc0032_render = function render() {
 };
 var TaskListHeadervue_type_template_id_2ecc0032_staticRenderFns = [];
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Expander.vue?vue&type=template&id=ac398cf4
-var Expandervue_type_template_id_ac398cf4_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Expander.vue?vue&type=template&id=4831d194
+var Expandervue_type_template_id_4831d194_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3943,7 +3962,7 @@ var Expandervue_type_template_id_ac398cf4_render = function render() {
     }
   })]) : _vm._e()]);
 };
-var Expandervue_type_template_id_ac398cf4_staticRenderFns = [];
+var Expandervue_type_template_id_4831d194_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Expander.vue?vue&type=script&lang=js
 
@@ -4000,7 +4019,9 @@ var Expandervue_type_template_id_ac398cf4_staticRenderFns = [];
       }
       let collapsed = 0;
       for (let i = 0, len = this.tasks.length; i < len; i++) {
-        if (this.tasks[i].collapsed) {
+        // Use original task if available (for virtual scrolling), otherwise use the task itself
+        const originalTask = this.tasks[i]._originalTask || this.tasks[i];
+        if (originalTask.collapsed) {
           collapsed++;
         }
       }
@@ -4025,7 +4046,9 @@ var Expandervue_type_template_id_ac398cf4_staticRenderFns = [];
       }
       const collapsed = !this.collapsed;
       this.tasks.forEach(task => {
-        task.collapsed = collapsed;
+        // Use original task if available (for virtual scrolling), otherwise use the task itself
+        const originalTask = task._originalTask || task;
+        originalTask.collapsed = collapsed;
       });
 
       // Force reactivity update
@@ -4046,8 +4069,8 @@ var Expandervue_type_template_id_ac398cf4_staticRenderFns = [];
 ;
 var Expander_component = normalizeComponent(
   components_Expandervue_type_script_lang_js,
-  Expandervue_type_template_id_ac398cf4_render,
-  Expandervue_type_template_id_ac398cf4_staticRenderFns,
+  Expandervue_type_template_id_4831d194_render,
+  Expandervue_type_template_id_4831d194_staticRenderFns,
   false,
   null,
   null,
@@ -4576,6 +4599,7 @@ var TaskListItem_component = normalizeComponent(
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/TaskList/TaskList.vue?vue&type=script&lang=js
 
 
+
 /* harmony default export */ var TaskListvue_type_script_lang_js = ({
   name: 'TaskList',
   components: {
@@ -4584,7 +4608,104 @@ var TaskListItem_component = normalizeComponent(
   },
   inject: ['root'],
   data() {
-    return {};
+    return {
+      scrollTop: 0,
+      containerHeight: 0,
+      bufferSize: 5,
+      // Number of extra items to render above and below viewport
+      lastScrollTime: 0,
+      scrollThrottleDelay: 16 // ~60fps
+    };
+  },
+  computed: {
+    /**
+     * Get all tasks that should be visible
+     */
+    allVisibleTasks() {
+      return this.root.visibleTasks || [];
+    },
+    /**
+     * Get task height
+     */
+    taskHeight() {
+      return this.root.state.options.row.height + this.root.state.options.chart.grid.horizontal.gap * 2;
+    },
+    /**
+     * Get total height of all tasks
+     */
+    totalHeight() {
+      return this.allVisibleTasks.length * this.taskHeight;
+    },
+    /**
+     * Get visible range for virtual scrolling
+     */
+    visibleRange() {
+      const start = Math.max(0, Math.floor(this.scrollTop / this.taskHeight) - this.bufferSize);
+      const end = Math.min(this.allVisibleTasks.length, Math.ceil((this.scrollTop + this.containerHeight) / this.taskHeight) + this.bufferSize);
+      return {
+        start,
+        end
+      };
+    },
+    /**
+     * Get visible tasks for virtual scrolling
+     * This respects the expand/collapse state from the root component
+     */
+    visibleTasks() {
+      // First get all tasks that should be visible based on expand/collapse state
+      const allVisibleTasks = this.root.visibleTasks || [];
+
+      // If we have virtual scrolling enabled and enough tasks, apply viewport culling
+      if (allVisibleTasks.length > 100 && this.containerHeight > 0) {
+        const {
+          start,
+          end
+        } = this.visibleRange;
+        return allVisibleTasks.slice(start, end).map((task, index) => {
+          // Create a wrapper object that preserves the original task reference
+          return {
+            ...task,
+            virtualIndex: start + index,
+            _originalTask: task // Keep reference to original task for expander
+          };
+        });
+      }
+
+      // For smaller datasets or when virtual scrolling is not needed, return all visible tasks
+      return allVisibleTasks.map((task, index) => ({
+        ...task,
+        virtualIndex: index,
+        _originalTask: task // Keep reference to original task for expander
+      }));
+    },
+    /**
+     * Get offset for virtual scrolling
+     */
+    offsetY() {
+      return this.visibleRange.start * this.taskHeight;
+    }
+  },
+  methods: {
+    /**
+     * Handle scroll event with throttling
+     */
+    onScroll(event) {
+      const now = Date.now();
+      if (now - this.lastScrollTime < this.scrollThrottleDelay) {
+        return;
+      }
+      this.lastScrollTime = now;
+      this.scrollTop = event.target.scrollTop;
+      this.containerHeight = event.target.clientHeight;
+    },
+    /**
+     * Update container height when component updates
+     */
+    updateContainerHeight() {
+      if (this.$refs.taskListItems) {
+        this.containerHeight = this.$refs.taskListItems.clientHeight;
+      }
+    }
   },
   /**
    * Mounted
@@ -4593,6 +4714,30 @@ var TaskListItem_component = normalizeComponent(
     this.root.state.refs.taskListWrapper = this.$refs.taskListWrapper;
     this.root.state.refs.taskList = this.$refs.taskList;
     this.root.state.refs.taskListItems = this.$refs.taskListItems;
+
+    // Initialize container height
+    this.$nextTick(() => {
+      this.updateContainerHeight();
+    });
+  },
+  /**
+   * Watch for changes in visible tasks to update virtual scrolling
+   */
+  watch: {
+    'root.visibleTasks': {
+      handler() {
+        this.$nextTick(() => {
+          this.updateContainerHeight();
+        });
+      },
+      deep: true
+    }
+  },
+  /**
+   * Updated lifecycle hook
+   */
+  updated() {
+    this.updateContainerHeight();
   }
 });
 ;// ./src/components/TaskList/TaskList.vue?vue&type=script&lang=js
@@ -4607,8 +4752,8 @@ var TaskListItem_component = normalizeComponent(
 ;
 var TaskList_component = normalizeComponent(
   TaskList_TaskListvue_type_script_lang_js,
-  TaskListvue_type_template_id_74ce1216_render,
-  TaskListvue_type_template_id_74ce1216_staticRenderFns,
+  TaskListvue_type_template_id_b705a4ea_render,
+  TaskListvue_type_template_id_b705a4ea_staticRenderFns,
   false,
   null,
   null,
@@ -11381,12 +11526,99 @@ const GanttElastic = {
         unwatchOutputTasks: null,
         unwatchOutputOptions: null,
         unwatchOutputStyle: null
-      }
+      },
+      // Performance optimization properties
+      updateQueue: [],
+      updateTimeout: null,
+      lastUpdateTime: 0,
+      updateThrottleDelay: 16,
+      // ~60fps
+      isUpdating: false
     };
   },
   methods: {
     mergeDeep,
     mergeDeepReactive,
+    /**
+     * Debounced update method to prevent excessive re-renders
+     */
+    debouncedUpdate(updateFn, context = 'general') {
+      const now = Date.now();
+
+      // Add to update queue
+      this.updateQueue.push({
+        fn: updateFn,
+        context,
+        timestamp: now
+      });
+
+      // Clear existing timeout
+      if (this.updateTimeout) {
+        clearTimeout(this.updateTimeout);
+      }
+
+      // Set new timeout
+      this.updateTimeout = setTimeout(() => {
+        this.processUpdateQueue();
+      }, this.updateThrottleDelay);
+    },
+    /**
+     * Process the update queue
+     */
+    processUpdateQueue() {
+      if (this.isUpdating || this.updateQueue.length === 0) {
+        return;
+      }
+      this.isUpdating = true;
+      const startTime = performance.now();
+      try {
+        // Group updates by context
+        const groupedUpdates = {};
+        this.updateQueue.forEach(update => {
+          if (!groupedUpdates[update.context]) {
+            groupedUpdates[update.context] = [];
+          }
+          groupedUpdates[update.context].push(update);
+        });
+
+        // Process each group
+        Object.keys(groupedUpdates).forEach(context => {
+          const updates = groupedUpdates[context];
+          const latestUpdate = updates[updates.length - 1]; // Use the latest update
+          latestUpdate.fn();
+        });
+
+        // Clear the queue
+        this.updateQueue = [];
+
+        // Performance monitoring
+        const endTime = performance.now();
+        const duration = endTime - startTime;
+        if (duration > 16) {
+          // Log if update takes longer than one frame
+          console.warn(`Gantt update took ${duration.toFixed(2)}ms for ${Object.keys(groupedUpdates).length} contexts`);
+        }
+      } finally {
+        this.isUpdating = false;
+      }
+    },
+    /**
+     * Performance monitoring method
+     */
+    logPerformanceMetrics() {
+      const metrics = {
+        totalTasks: this.state.tasks.length,
+        visibleTasks: this.visibleTasks.length,
+        updateQueueLength: this.updateQueue.length,
+        isUpdating: this.isUpdating,
+        memoryUsage: performance.memory ? {
+          used: Math.round(performance.memory.usedJSHeapSize / 1024 / 1024) + 'MB',
+          total: Math.round(performance.memory.totalJSHeapSize / 1024 / 1024) + 'MB'
+        } : 'Not available'
+      };
+      console.log('Gantt Performance Metrics:', metrics);
+      return metrics;
+    },
     onViewModeChanged(mode) {
       // Update the calendar view mode
       this.options.calendar.viewMode = mode;
@@ -12673,7 +12905,9 @@ const GanttElastic = {
       this.state.options.height = this.getHeight(visibleTasks) - heightCompensation;
       this.state.options.allVisibleTasksHeight = this.getTasksHeight(visibleTasks);
       this.state.options.outerHeight = this.getHeight(visibleTasks, true) - heightCompensation;
-      let len = visibleTasks.length;
+
+      // Calculate task positions only for visible tasks
+      const len = visibleTasks.length;
       for (let index = 0; index < len; index++) {
         let task = visibleTasks[index];
         task.width = task.duration / this.state.options.times.timePerPixel - this.style['grid-line-vertical']['stroke-width'];
@@ -12721,19 +12955,22 @@ const GanttElastic = {
     this.state.unwatchTasks = this.$watch('tasks', tasks => {
       const notEqual = notEqualDeep(tasks, this.outputTasks);
       if (notEqual) {
-        this.setup('tasks');
+        this.debouncedUpdate(() => {
+          this.setup('tasks');
+          this.$nextTick(() => {
+            this.recalculateHeight();
+          });
+        }, 'tasks');
       }
-      // Recalculate height when tasks change
-      this.$nextTick(() => {
-        this.recalculateHeight();
-      });
     }, {
       deep: true
     });
     this.state.unwatchOptions = this.$watch('options', opts => {
       const notEqual = notEqualDeep(opts, this.outputOptions);
       if (notEqual) {
-        this.setup('options');
+        this.debouncedUpdate(() => {
+          this.setup('options');
+        }, 'options');
       }
     }, {
       deep: true
@@ -12868,10 +13105,10 @@ const GanttElastic = {
 /* harmony default export */ var GanttElasticvue_type_script_lang_js = (GanttElastic);
 ;// ./src/GanttElastic.vue?vue&type=script&lang=js
  /* harmony default export */ var src_GanttElasticvue_type_script_lang_js = (GanttElasticvue_type_script_lang_js); 
-;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.vue?vue&type=style&index=0&id=0a0b0d9f&prod&lang=css
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.vue?vue&type=style&index=0&id=95091692&prod&lang=css
 // extracted by mini-css-extract-plugin
 
-;// ./src/GanttElastic.vue?vue&type=style&index=0&id=0a0b0d9f&prod&lang=css
+;// ./src/GanttElastic.vue?vue&type=style&index=0&id=95091692&prod&lang=css
 
 ;// ./src/GanttElastic.vue
 
@@ -12884,8 +13121,8 @@ const GanttElastic = {
 
 var GanttElastic_component = normalizeComponent(
   src_GanttElasticvue_type_script_lang_js,
-  GanttElasticvue_type_template_id_0a0b0d9f_render,
-  GanttElasticvue_type_template_id_0a0b0d9f_staticRenderFns,
+  GanttElasticvue_type_template_id_95091692_render,
+  GanttElasticvue_type_template_id_95091692_staticRenderFns,
   false,
   null,
   null,