tg-ganttchart 0.0.12 → 0.0.14

package/dist/tgganttchart.common.js

@@ -3375,7 +3375,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./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.standalone.vue?vue&type=template&id=c24bafbc
+;// ./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.standalone.vue?vue&type=template&id=ba4781dc
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -3384,6 +3384,32 @@ var render = function render() {
       "tasks": _vm.tasks,
       "options": _vm.options,
       "dynamicStyle": _vm.dynamicStyle
+    },
+    on: {
+      "task-updated": function ($event) {
+        return _vm.$emit('task-updated', $event);
+      },
+      "gantt-task-updated": function ($event) {
+        return _vm.$emit('gantt-task-updated', $event);
+      },
+      "view-mode-changed": function ($event) {
+        return _vm.$emit('view-mode-changed', $event);
+      },
+      "gantt-view-mode-changed": function ($event) {
+        return _vm.$emit('gantt-view-mode-changed', $event);
+      },
+      "tasks-changed": function ($event) {
+        return _vm.$emit('tasks-changed', $event);
+      },
+      "options-changed": function ($event) {
+        return _vm.$emit('options-changed', $event);
+      },
+      "dynamic-style-changed": function ($event) {
+        return _vm.$emit('dynamic-style-changed', $event);
+      },
+      "mounted": function ($event) {
+        return _vm.$emit('mounted', $event);
+      }
     }
   }, [_vm.components.header ? _c(_vm.components.header, {
     tag: "component",
@@ -3401,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=100984c8
-var GanttElasticvue_type_template_id_100984c8_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;
@@ -3431,7 +3457,7 @@ var GanttElasticvue_type_template_id_100984c8_render = function render() {
     }
   }), _vm._t("footer")], 2);
 };
-var GanttElasticvue_type_template_id_100984c8_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);
@@ -3674,8 +3700,8 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var GanttViewFilter = (component.exports);
-;// ./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/MainView.vue?vue&type=template&id=33392d22
-var MainViewvue_type_template_id_33392d22_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/MainView.vue?vue&type=template&id=79e1eba9
+var MainViewvue_type_template_id_79e1eba9_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -3784,10 +3810,10 @@ var MainViewvue_type_template_id_33392d22_render = function render() {
     }
   })])]);
 };
-var MainViewvue_type_template_id_33392d22_staticRenderFns = [];
+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', {
@@ -3816,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() {
@@ -3879,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', {
@@ -3917,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
 
@@ -3974,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++;
         }
       }
@@ -3999,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
@@ -4020,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,
@@ -4550,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: {
@@ -4558,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
@@ -4567,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
@@ -4581,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,
@@ -4591,8 +4762,8 @@ var TaskList_component = normalizeComponent(
 )
 
 /* harmony default export */ var TaskList = (TaskList_component.exports);
-;// ./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/Chart/Chart.vue?vue&type=template&id=2bc7fe5e
-var Chartvue_type_template_id_2bc7fe5e_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/Chart/Chart.vue?vue&type=template&id=0856b85c
+var Chartvue_type_template_id_0856b85c_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -4667,7 +4838,7 @@ var Chartvue_type_template_id_2bc7fe5e_render = function render() {
     })], 1);
   })], 2)])])])]);
 };
-var Chartvue_type_template_id_2bc7fe5e_staticRenderFns = [];
+var Chartvue_type_template_id_0856b85c_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/Chart/Grid.vue?vue&type=template&id=244ea0ee
 var Gridvue_type_template_id_244ea0ee_render = function render() {
@@ -5876,8 +6047,8 @@ var DependencyLines_component = normalizeComponent(
 )
 
 /* harmony default export */ var DependencyLines = (DependencyLines_component.exports);
-;// ./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/Chart/Row/Task.vue?vue&type=template&id=2c01a3c8
-var Taskvue_type_template_id_2c01a3c8_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/Chart/Row/Task.vue?vue&type=template&id=23849415
+var Taskvue_type_template_id_23849415_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
@@ -5989,16 +6160,17 @@ var Taskvue_type_template_id_2c01a3c8_render = function render() {
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": "8",
+      "x": "0",
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -6012,16 +6184,17 @@ var Taskvue_type_template_id_2c01a3c8_render = function render() {
       }
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": _vm.task.width - 8,
+      "x": _vm.task.width - 12,
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -6040,7 +6213,7 @@ var Taskvue_type_template_id_2c01a3c8_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var Taskvue_type_template_id_2c01a3c8_staticRenderFns = [];
+var Taskvue_type_template_id_23849415_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/Chart/Text.vue?vue&type=template&id=634f40aa
 var Textvue_type_template_id_634f40aa_render = function render() {
@@ -6391,13 +6564,13 @@ var ProgressBar_component = normalizeComponent(
       event.stopPropagation();
 
       // Debug logging
-      console.log('Starting drag:', {
-        type: type,
-        taskId: this.task.id,
-        taskType: this.task.type,
-        originalStart: this.task.startTime,
-        originalEnd: this.task.endTime
-      });
+      // console.log('Starting drag:', {
+      //   type: type,
+      //   taskId: this.task.id,
+      //   taskType: this.task.type,
+      //   originalStart: this.task.startTime,
+      //   originalEnd: this.task.endTime
+      // });
 
       // Safety checks
       if (!this.root || !this.root.state || !this.root.state.options || !this.root.state.options.times) {
@@ -6521,15 +6694,15 @@ var ProgressBar_component = normalizeComponent(
 
       // Debug logging for epic tasks
       if (this.task.type === 'epic') {
-        console.log('Epic task drag:', {
-          dragType: this.dragType,
-          originalStart: this.originalStartTime,
-          originalEnd: this.originalEndTime,
-          newStart: newStartTime,
-          newEnd: newEndTime,
-          startChanged: newStartTime !== this.originalStartTime,
-          endChanged: newEndTime !== this.originalEndTime
-        });
+        // console.log('Epic task drag:', {
+        //   dragType: this.dragType,
+        //   originalStart: this.originalStartTime,
+        //   originalEnd: this.originalEndTime,
+        //   newStart: newStartTime,
+        //   newEnd: newEndTime,
+        //   startChanged: newStartTime !== this.originalStartTime,
+        //   endChanged: newEndTime !== this.originalEndTime
+        // });
       }
 
       // Update task data
@@ -6538,15 +6711,15 @@ var ProgressBar_component = normalizeComponent(
       this.task.duration = newEndTime - newStartTime;
 
       // Debug logging
-      console.log('Updating task time:', {
-        taskId: this.task.id,
-        newStartTime,
-        newEndTime,
-        duration: this.task.duration,
-        root: !!this.root,
-        timeToPixelOffsetX: !!(this.root && this.root.timeToPixelOffsetX),
-        timePerPixel: this.root && this.root.state && this.root.state.options && this.root.state.options.times && this.root.state.options.times.timePerPixel
-      });
+      // console.log('Updating task time:', {
+      //   taskId: this.task.id,
+      //   newStartTime,
+      //   newEndTime,
+      //   duration: this.task.duration,
+      //   root: !!this.root,
+      //   timeToPixelOffsetX: !!(this.root && this.root.timeToPixelOffsetX),
+      //   timePerPixel: this.root && this.root.state && this.root.state.options && this.root.state.options.times && this.root.state.options.times.timePerPixel
+      // });
 
       // Update task position and width using the correct method
       if (this.root && this.root.timeToPixelOffsetX) {
@@ -6590,15 +6763,15 @@ var ProgressBar_component = normalizeComponent(
       });
 
       // Log the update for debugging
-      console.log('Task drag completed:', {
-        id: this.task.id,
-        dragType: this.dragType,
-        startDate: startDate.toLocaleDateString(),
-        endDate: endDate.toLocaleDateString(),
-        duration: `${durationDays} days`,
-        startTime: this.task.startTime,
-        endTime: this.task.endTime
-      });
+      // console.log('Task drag completed:', {
+      //   id: this.task.id,
+      //   dragType: this.dragType,
+      //   startDate: startDate.toLocaleDateString(),
+      //   endDate: endDate.toLocaleDateString(),
+      //   duration: `${durationDays} days`,
+      //   startTime: this.task.startTime,
+      //   endTime: this.task.endTime
+      // });
     },
     /**
      * Show context menu for task actions
@@ -7048,8 +7221,8 @@ var ProgressBar_component = normalizeComponent(
 ;
 var Task_component = normalizeComponent(
   Row_Taskvue_type_script_lang_js,
-  Taskvue_type_template_id_2c01a3c8_render,
-  Taskvue_type_template_id_2c01a3c8_staticRenderFns,
+  Taskvue_type_template_id_23849415_render,
+  Taskvue_type_template_id_23849415_staticRenderFns,
   false,
   null,
   null,
@@ -7058,8 +7231,8 @@ var Task_component = normalizeComponent(
 )
 
 /* harmony default export */ var Task = (Task_component.exports);
-;// ./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/Chart/Row/Milestone.vue?vue&type=template&id=4cea99c4
-var Milestonevue_type_template_id_4cea99c4_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/Chart/Row/Milestone.vue?vue&type=template&id=c9bfeb4a
+var Milestonevue_type_template_id_c9bfeb4a_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
@@ -7171,16 +7344,17 @@ var Milestonevue_type_template_id_4cea99c4_render = function render() {
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": "8",
+      "x": "0",
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -7194,16 +7368,17 @@ var Milestonevue_type_template_id_4cea99c4_render = function render() {
       }
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": _vm.task.width - 8,
+      "x": _vm.task.width - 12,
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -7222,7 +7397,7 @@ var Milestonevue_type_template_id_4cea99c4_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var Milestonevue_type_template_id_4cea99c4_staticRenderFns = [];
+var Milestonevue_type_template_id_c9bfeb4a_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/Chart/Row/Milestone.vue?vue&type=script&lang=js
 
@@ -7304,8 +7479,8 @@ var Milestonevue_type_template_id_4cea99c4_staticRenderFns = [];
 ;
 var Milestone_component = normalizeComponent(
   Row_Milestonevue_type_script_lang_js,
-  Milestonevue_type_template_id_4cea99c4_render,
-  Milestonevue_type_template_id_4cea99c4_staticRenderFns,
+  Milestonevue_type_template_id_c9bfeb4a_render,
+  Milestonevue_type_template_id_c9bfeb4a_staticRenderFns,
   false,
   null,
   null,
@@ -7314,8 +7489,8 @@ var Milestone_component = normalizeComponent(
 )
 
 /* harmony default export */ var Milestone = (Milestone_component.exports);
-;// ./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/Chart/Row/Project.vue?vue&type=template&id=5dcaf9ef
-var Projectvue_type_template_id_5dcaf9ef_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/Chart/Row/Project.vue?vue&type=template&id=72239142
+var Projectvue_type_template_id_72239142_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
@@ -7427,16 +7602,17 @@ var Projectvue_type_template_id_5dcaf9ef_render = function render() {
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": "8",
+      "x": "0",
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -7450,16 +7626,17 @@ var Projectvue_type_template_id_5dcaf9ef_render = function render() {
       }
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": _vm.task.width - 8,
+      "x": _vm.task.width - 12,
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -7478,7 +7655,7 @@ var Projectvue_type_template_id_5dcaf9ef_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var Projectvue_type_template_id_5dcaf9ef_staticRenderFns = [];
+var Projectvue_type_template_id_72239142_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/Chart/Row/Project.vue?vue&type=script&lang=js
 
@@ -7578,8 +7755,8 @@ var Projectvue_type_template_id_5dcaf9ef_staticRenderFns = [];
 ;
 var Project_component = normalizeComponent(
   Row_Projectvue_type_script_lang_js,
-  Projectvue_type_template_id_5dcaf9ef_render,
-  Projectvue_type_template_id_5dcaf9ef_staticRenderFns,
+  Projectvue_type_template_id_72239142_render,
+  Projectvue_type_template_id_72239142_staticRenderFns,
   false,
   null,
   null,
@@ -7588,8 +7765,8 @@ var Project_component = normalizeComponent(
 )
 
 /* harmony default export */ var Project = (Project_component.exports);
-;// ./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/Chart/Row/Epic.vue?vue&type=template&id=6e337196
-var Epicvue_type_template_id_6e337196_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/Chart/Row/Epic.vue?vue&type=template&id=80ad2e9c
+var Epicvue_type_template_id_80ad2e9c_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
@@ -7703,16 +7880,17 @@ var Epicvue_type_template_id_6e337196_render = function render() {
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
   }) : _vm._e(), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "30"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": "8",
+      "x": "0",
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -7726,16 +7904,17 @@ var Epicvue_type_template_id_6e337196_render = function render() {
       }
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "30"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": _vm.task.width - 8,
+      "x": _vm.task.width - 12,
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -7754,7 +7933,7 @@ var Epicvue_type_template_id_6e337196_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var Epicvue_type_template_id_6e337196_staticRenderFns = [];
+var Epicvue_type_template_id_80ad2e9c_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/Chart/Row/Epic.vue?vue&type=script&lang=js
 
@@ -7854,8 +8033,8 @@ var Epicvue_type_template_id_6e337196_staticRenderFns = [];
 ;
 var Epic_component = normalizeComponent(
   Row_Epicvue_type_script_lang_js,
-  Epicvue_type_template_id_6e337196_render,
-  Epicvue_type_template_id_6e337196_staticRenderFns,
+  Epicvue_type_template_id_80ad2e9c_render,
+  Epicvue_type_template_id_80ad2e9c_staticRenderFns,
   false,
   null,
   null,
@@ -7864,8 +8043,8 @@ var Epic_component = normalizeComponent(
 )
 
 /* harmony default export */ var Epic = (Epic_component.exports);
-;// ./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/Chart/Row/Subtask.vue?vue&type=template&id=339b7174
-var Subtaskvue_type_template_id_339b7174_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/Chart/Row/Subtask.vue?vue&type=template&id=52219a35
+var Subtaskvue_type_template_id_52219a35_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
@@ -7977,16 +8156,17 @@ var Subtaskvue_type_template_id_339b7174_render = function render() {
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": "8",
+      "x": "0",
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -8000,16 +8180,17 @@ var Subtaskvue_type_template_id_339b7174_render = function render() {
       }
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": _vm.task.width - 8,
+      "x": _vm.task.width - 12,
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -8028,7 +8209,7 @@ var Subtaskvue_type_template_id_339b7174_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var Subtaskvue_type_template_id_339b7174_staticRenderFns = [];
+var Subtaskvue_type_template_id_52219a35_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/Chart/Row/Subtask.vue?vue&type=script&lang=js
 
@@ -8100,8 +8281,8 @@ var Subtaskvue_type_template_id_339b7174_staticRenderFns = [];
 ;
 var Subtask_component = normalizeComponent(
   Row_Subtaskvue_type_script_lang_js,
-  Subtaskvue_type_template_id_339b7174_render,
-  Subtaskvue_type_template_id_339b7174_staticRenderFns,
+  Subtaskvue_type_template_id_52219a35_render,
+  Subtaskvue_type_template_id_52219a35_staticRenderFns,
   false,
   null,
   null,
@@ -8110,8 +8291,8 @@ var Subtask_component = normalizeComponent(
 )
 
 /* harmony default export */ var Subtask = (Subtask_component.exports);
-;// ./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/Chart/Row/Story.vue?vue&type=template&id=3d0395f2
-var Storyvue_type_template_id_3d0395f2_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/Chart/Row/Story.vue?vue&type=template&id=5d688d0c
+var Storyvue_type_template_id_5d688d0c_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
@@ -8223,16 +8404,17 @@ var Storyvue_type_template_id_3d0395f2_render = function render() {
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": "8",
+      "x": "0",
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -8246,16 +8428,17 @@ var Storyvue_type_template_id_3d0395f2_render = function render() {
       }
     }
   }), _c('rect', {
-    staticClass: "gantt-elastic__chart-row-extend-handle",
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
     staticStyle: {
       "pointer-events": "all",
-      "z-index": "20"
+      "z-index": "50",
+      "cursor": "ew-resize !important"
     },
     style: _vm.root.style['chart-row-extend-handle'],
     attrs: {
-      "x": _vm.task.width - 8,
+      "x": _vm.task.width - 12,
       "y": "0",
-      "width": 8,
+      "width": 12,
       "height": _vm.task.height
     },
     on: {
@@ -8274,7 +8457,7 @@ var Storyvue_type_template_id_3d0395f2_render = function render() {
     }
   }) : _vm._e()], 1);
 };
-var Storyvue_type_template_id_3d0395f2_staticRenderFns = [];
+var Storyvue_type_template_id_5d688d0c_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/Chart/Row/Story.vue?vue&type=script&lang=js
 
@@ -8366,8 +8549,8 @@ var Storyvue_type_template_id_3d0395f2_staticRenderFns = [];
 ;
 var Story_component = normalizeComponent(
   Row_Storyvue_type_script_lang_js,
-  Storyvue_type_template_id_3d0395f2_render,
-  Storyvue_type_template_id_3d0395f2_staticRenderFns,
+  Storyvue_type_template_id_5d688d0c_render,
+  Storyvue_type_template_id_5d688d0c_staticRenderFns,
   false,
   null,
   null,
@@ -8425,6 +8608,7 @@ var Story_component = normalizeComponent(
      */
     handleTaskUpdated(updatedTask) {
       // Emit event to parent component
+      console.log("task-updated --Chart");
       this.$emit('task-updated', updatedTask);
 
       // Update the task in the root state
@@ -8476,8 +8660,8 @@ var Story_component = normalizeComponent(
 ;
 var Chart_component = normalizeComponent(
   Chart_Chartvue_type_script_lang_js,
-  Chartvue_type_template_id_2bc7fe5e_render,
-  Chartvue_type_template_id_2bc7fe5e_staticRenderFns,
+  Chartvue_type_template_id_0856b85c_render,
+  Chartvue_type_template_id_0856b85c_staticRenderFns,
   false,
   null,
   null,
@@ -8573,6 +8757,7 @@ let ignoreScrollEvents = false;
      */
     handleTaskUpdated(updatedTask) {
       // Emit event to parent component
+      console.log("task-updated --MainView");
       this.$emit('task-updated', updatedTask);
     },
     /**
@@ -8691,8 +8876,8 @@ let ignoreScrollEvents = false;
 ;
 var MainView_component = normalizeComponent(
   components_MainViewvue_type_script_lang_js,
-  MainViewvue_type_template_id_33392d22_render,
-  MainViewvue_type_template_id_33392d22_staticRenderFns,
+  MainViewvue_type_template_id_79e1eba9_render,
+  MainViewvue_type_template_id_79e1eba9_staticRenderFns,
   false,
   null,
   null,
@@ -11341,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;
@@ -11374,6 +11646,15 @@ const GanttElastic = {
         }
       }
 
+      // Emit event to parent component
+      this.$emit('view-mode-changed', mode);
+
+      // Also emit to root for plugin usage
+      this.$root.$emit('gantt-view-mode-changed', mode);
+
+      // Log the view mode change for debugging
+      console.log('View mode changed - from GanttElastic:', mode);
+
       // Force recalculation by triggering a reactive update
       this.$nextTick(() => {
         this.$forceUpdate();
@@ -11399,15 +11680,12 @@ const GanttElastic = {
      */
     handleTaskUpdated(updatedTask) {
       // Emit event to parent component
+      console.log('Task updated -- GanttElastic:');
       this.$emit('task-updated', updatedTask);
+      this.$emit('gantt-task-updated', updatedTask);
 
-      // Log the update for debugging
-      console.log('Task updated:', updatedTask);
-
-      // You can add additional logic here like:
-      // - Save to backend
-      // - Update local storage
-      // - Trigger other updates
+      // Also emit to root for plugin usage
+      this.$root.$emit('gantt-task-updated', updatedTask);
     },
     /**
      * Calculate height of scrollbar in current browser
@@ -12627,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'];
@@ -12675,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
@@ -12751,6 +13034,38 @@ const GanttElastic = {
     this.$root.$emit('gantt-elastic-mounted', this);
     this.$emit('mounted', this);
     this.$root.$emit('gantt-elastic-ready', this);
+
+    // Expose methods for plugin usage
+    this.$gantt = {
+      onTaskUpdated: this.handleTaskUpdated,
+      onViewModeChanged: this.onViewModeChanged,
+      getTasks: () => this.state.tasks,
+      updateTask: (taskId, updates) => {
+        const taskIndex = this.state.tasks.findIndex(task => task.id === taskId);
+        if (taskIndex !== -1) {
+          Object.assign(this.state.tasks[taskIndex], updates);
+          this.$forceUpdate();
+        }
+      }
+    };
+
+    /*
+     * PLUGIN USAGE EXAMPLE:
+     * 
+     * // Listen to events when using as plugin:
+     * this.$root.$on('gantt-task-updated', (updatedTask) => {
+     *   console.log('Task updated:', updatedTask);
+     * });
+     * 
+     * this.$root.$on('gantt-view-mode-changed', (mode) => {
+     *   console.log('View mode changed:', mode);
+     * });
+     * 
+     * // Access gantt methods:
+     * const ganttInstance = this.$refs.ganttChart.$gantt;
+     * ganttInstance.updateTask(1, { label: 'New Task Name' });
+     * const tasks = ganttInstance.getTasks();
+     */
   },
   /**
    * Emit event when data was changed and before update (you can cleanup dom events here for example)
@@ -12790,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=100984c8&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=100984c8&prod&lang=css
+;// ./src/GanttElastic.vue?vue&type=style&index=0&id=95091692&prod&lang=css
 
 ;// ./src/GanttElastic.vue
 
@@ -12806,8 +13121,8 @@ const GanttElastic = {
 
 var GanttElastic_component = normalizeComponent(
   src_GanttElasticvue_type_script_lang_js,
-  GanttElasticvue_type_template_id_100984c8_render,
-  GanttElasticvue_type_template_id_100984c8_staticRenderFns,
+  GanttElasticvue_type_template_id_95091692_render,
+  GanttElasticvue_type_template_id_95091692_staticRenderFns,
   false,
   null,
   null,