tg-ganttchart 0.0.12 → 0.0.13

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=0a0b0d9f
+var GanttElasticvue_type_template_id_0a0b0d9f_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_0a0b0d9f_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,7 +3810,7 @@ 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() {
@@ -4591,8 +4617,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 +4693,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 +5902,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 +6015,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 +6039,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 +6068,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 +6419,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 +6549,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 +6566,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 +6618,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 +7076,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 +7086,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 +7199,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 +7223,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 +7252,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 +7334,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 +7344,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 +7457,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 +7481,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 +7510,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 +7610,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 +7620,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 +7735,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 +7759,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 +7788,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 +7888,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 +7898,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 +8011,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 +8035,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 +8064,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 +8136,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 +8146,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 +8259,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 +8283,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 +8312,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 +8404,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 +8463,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 +8515,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 +8612,7 @@ let ignoreScrollEvents = false;
      */
     handleTaskUpdated(updatedTask) {
       // Emit event to parent component
+      console.log("task-updated --MainView");
       this.$emit('task-updated', updatedTask);
     },
     /**
@@ -8691,8 +8731,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,
@@ -11374,6 +11414,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 +11448,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
@@ -12751,6 +12797,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 +12868,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=0a0b0d9f&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=0a0b0d9f&prod&lang=css
 
 ;// ./src/GanttElastic.vue
 
@@ -12806,8 +12884,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_0a0b0d9f_render,
+  GanttElasticvue_type_template_id_0a0b0d9f_staticRenderFns,
   false,
   null,
   null,