tg-ganttchart 0.0.11 → 0.0.13

package/dist/tgganttchart.umd.js

@@ -3385,7 +3385,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-83.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-83.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;
@@ -3394,6 +3394,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",
@@ -3411,8 +3437,8 @@ var render = function render() {
 };
 var staticRenderFns = [];
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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=2767341e
-var GanttElasticvue_type_template_id_2767341e_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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;
@@ -3435,10 +3461,13 @@ var GanttElasticvue_type_template_id_2767341e_render = function render() {
     },
     slot: "header"
   }), _vm._t("header"), _c('main-view', {
-    ref: "mainView"
+    ref: "mainView",
+    on: {
+      "task-updated": _vm.handleTaskUpdated
+    }
   }), _vm._t("footer")], 2);
 };
-var GanttElasticvue_type_template_id_2767341e_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);
@@ -3681,8 +3710,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-83.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=1a4b756c
-var MainViewvue_type_template_id_1a4b756c_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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', {
@@ -3751,7 +3780,11 @@ var MainViewvue_type_template_id_1a4b756c_render = function render() {
         return _vm.chartWheel.apply(null, arguments);
       }
     }
-  }, [_c('chart')], 1)])]), _c('div', {
+  }, [_c('chart', {
+    on: {
+      "task-updated": _vm.handleTaskUpdated
+    }
+  })], 1)])]), _c('div', {
     ref: "chartScrollContainerVertical",
     staticClass: "gantt-elastic__chart-scroll-container gantt-elastic__chart-scroll-container--vertical",
     style: {
@@ -3787,7 +3820,7 @@ var MainViewvue_type_template_id_1a4b756c_render = function render() {
     }
   })])]);
 };
-var MainViewvue_type_template_id_1a4b756c_staticRenderFns = [];
+var MainViewvue_type_template_id_79e1eba9_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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() {
@@ -4594,8 +4627,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-83.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=1d5eb6d6
-var Chartvue_type_template_id_1d5eb6d6_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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', {
@@ -4663,14 +4696,17 @@ var Chartvue_type_template_id_1d5eb6d6_render = function render() {
       tag: "component",
       attrs: {
         "task": task
+      },
+      on: {
+        "task-updated": _vm.handleTaskUpdated
       }
     })], 1);
   })], 2)])])])]);
 };
-var Chartvue_type_template_id_1d5eb6d6_staticRenderFns = [];
+var Chartvue_type_template_id_0856b85c_staticRenderFns = [];
 
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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=b2e4dec2
-var Gridvue_type_template_id_b2e4dec2_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('svg', {
@@ -4732,7 +4768,7 @@ var Gridvue_type_template_id_b2e4dec2_render = function render() {
     }
   })], 2)]);
 };
-var Gridvue_type_template_id_b2e4dec2_staticRenderFns = [];
+var Gridvue_type_template_id_244ea0ee_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Grid.vue?vue&type=script&lang=js
 
@@ -4840,15 +4876,41 @@ var Gridvue_type_template_id_b2e4dec2_staticRenderFns = [];
       let lines = [];
       const state = this.root.state.options;
       let tasks = this.root.visibleTasks;
-      for (let index = 0, len = tasks.length; index <= len; index++) {
-        const y = index * (state.row.height + state.chart.grid.horizontal.gap * 2) + this.root.style['grid-line-vertical']['stroke-width'] / 2;
-        lines.push({
-          key: 'hl' + index,
-          x1: 0,
-          y1: y,
-          x2: '100%',
-          y2: y
-        });
+
+      // If we have tasks, show full grid for all tasks
+      if (tasks.length > 0) {
+        const rowHeight = state.row.height + state.chart.grid.horizontal.gap * 2;
+        const rowCount = tasks.length; // Use actual task count
+
+        for (let index = 0; index <= rowCount; index++) {
+          const y = index * rowHeight + this.root.style['grid-line-vertical']['stroke-width'] / 2;
+          lines.push({
+            key: 'hl' + index,
+            x1: 0,
+            y1: y,
+            x2: '100%',
+            y2: y
+          });
+        }
+      } else {
+        // If no tasks, use reduced viewport height for empty state
+        const viewportHeight = window.innerHeight;
+        const headerHeight = state.calendar.height + state.calendar.gap;
+        const availableHeight = viewportHeight * 0.7 - headerHeight - 40; // 70% of viewport, 40px for padding/margins
+        const reducedHeight = Math.max(availableHeight, 300); // Minimum 300px height
+
+        const rowHeight = state.row.height + state.chart.grid.horizontal.gap * 2;
+        const maxRows = Math.floor(reducedHeight / rowHeight);
+        for (let index = 0; index <= maxRows; index++) {
+          const y = index * rowHeight + this.root.style['grid-line-vertical']['stroke-width'] / 2;
+          lines.push({
+            key: 'hl' + index,
+            x1: 0,
+            y1: y,
+            x2: '100%',
+            y2: y
+          });
+        }
       }
       return lines;
     },
@@ -4897,8 +4959,8 @@ var Gridvue_type_template_id_b2e4dec2_staticRenderFns = [];
 ;
 var Grid_component = normalizeComponent(
   Chart_Gridvue_type_script_lang_js,
-  Gridvue_type_template_id_b2e4dec2_render,
-  Gridvue_type_template_id_b2e4dec2_staticRenderFns,
+  Gridvue_type_template_id_244ea0ee_render,
+  Gridvue_type_template_id_244ea0ee_staticRenderFns,
   false,
   null,
   null,
@@ -5850,8 +5912,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-83.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=208a9baa
-var Taskvue_type_template_id_208a9baa_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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', {
@@ -5888,11 +5950,11 @@ var Taskvue_type_template_id_208a9baa_render = function render() {
       ..._vm.task.style['chart-row-bar']
     },
     attrs: {
-      "x": _vm.task.x,
+      "x": _vm.task.x - 8,
       "y": _vm.task.y,
-      "width": _vm.task.width,
+      "width": _vm.task.width + 16,
       "height": _vm.task.height,
-      "viewBox": `0 0 ${_vm.task.width} ${_vm.task.height}`,
+      "viewBox": `-8 0 ${_vm.task.width + 16} ${_vm.task.height}`,
       "xmlns": "http://www.w3.org/2000/svg"
     },
     on: {
@@ -5947,20 +6009,76 @@ var Taskvue_type_template_id_208a9baa_render = function render() {
       ..._vm.task.style['chart-row-bar-polygon']
     },
     attrs: {
-      "points": _vm.getPoints
+      "points": _vm.getPointsAdjusted
+    },
+    on: {
+      "mousedown": function ($event) {
+        return _vm.startDrag($event, 'move');
+      },
+      "touchstart": function ($event) {
+        return _vm.startDrag($event, 'move');
+      }
     }
   }), _c('progress-bar', {
     attrs: {
       "task": _vm.task,
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": "0",
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      }
+    }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": _vm.task.width - 12,
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      }
+    }
   })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
     attrs: {
       "task": _vm.task
     }
   }) : _vm._e()], 1);
 };
-var Taskvue_type_template_id_208a9baa_staticRenderFns = [];
+var Taskvue_type_template_id_23849415_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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() {
@@ -6097,15 +6215,16 @@ var Text_component = normalizeComponent(
 )
 
 /* harmony default export */ var Text = (Text_component.exports);
-;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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/ProgressBar.vue?vue&type=template&id=bc869ae8
-var ProgressBarvue_type_template_id_bc869ae8_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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/ProgressBar.vue?vue&type=template&id=2323ee21
+var ProgressBarvue_type_template_id_2323ee21_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('g', {
     staticClass: "gantt-elastic__chart-row-progress-bar-wrapper",
     style: {
       ..._vm.root.style['chart-row-progress-bar-wrapper'],
-      ..._vm.task.style['chart-row-progress-bar-wrapper']
+      ..._vm.task.style['chart-row-progress-bar-wrapper'],
+      'pointer-events': 'none'
     }
   }, [_c('defs', [_c('pattern', {
     attrs: {
@@ -6127,8 +6246,11 @@ var ProgressBarvue_type_template_id_bc869ae8_render = function render() {
       "x2": "0",
       "y2": _vm.root.state.options.chart.progress.width
     }
-  })])]), _vm.root.state.options.chart.progress.bar ? _c('rect', {
+  })])]), _vm.root.state.options.chart.progress.bar && _vm.task.progress > 0 ? _c('rect', {
     staticClass: "gantt-elastic__chart-row-progress-bar-solid",
+    staticStyle: {
+      "pointer-events": "none"
+    },
     style: {
       ..._vm.root.style['chart-row-progress-bar-solid'],
       ..._vm.task.style['chart-row-progress-bar-solid']
@@ -6138,7 +6260,11 @@ var ProgressBarvue_type_template_id_bc869ae8_render = function render() {
       "y": "0",
       "width": _vm.getProgressWidth
     }
-  }) : _vm._e(), _vm.root.state.options.chart.progress.pattern ? _c('g', [_c('rect', {
+  }) : _vm._e(), _vm.root.state.options.chart.progress.pattern && _vm.task.progress > 0 ? _c('g', {
+    staticStyle: {
+      "pointer-events": "none"
+    }
+  }, [_c('rect', {
     staticClass: "gantt-elastic__chart-row-progress-bar-pattern",
     style: {
       ..._vm.root.style['chart-row-progress-bar-pattern'],
@@ -6162,7 +6288,7 @@ var ProgressBarvue_type_template_id_bc869ae8_render = function render() {
     }
   })]) : _vm._e()]);
 };
-var ProgressBarvue_type_template_id_bc869ae8_staticRenderFns = [];
+var ProgressBarvue_type_template_id_2323ee21_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/ProgressBar.vue?vue&type=script&lang=js
 /* harmony default export */ var ProgressBarvue_type_script_lang_js = ({
@@ -6223,8 +6349,8 @@ var ProgressBarvue_type_template_id_bc869ae8_staticRenderFns = [];
 ;
 var ProgressBar_component = normalizeComponent(
   Chart_ProgressBarvue_type_script_lang_js,
-  ProgressBarvue_type_template_id_bc869ae8_render,
-  ProgressBarvue_type_template_id_bc869ae8_staticRenderFns,
+  ProgressBarvue_type_template_id_2323ee21_render,
+  ProgressBarvue_type_template_id_2323ee21_staticRenderFns,
   false,
   null,
   null,
@@ -6281,11 +6407,631 @@ var ProgressBar_component = normalizeComponent(
     }
   }
 });
+;// ./src/components/Chart/Row/Draggable.mixin.js
+
+
+/* harmony default export */ var Draggable_mixin = ({
+  data() {
+    return {
+      isDragging: false,
+      dragStartX: 0,
+      dragStartTime: 0,
+      dragType: null,
+      // 'start', 'end', or 'move'
+      originalStartTime: 0,
+      originalEndTime: 0,
+      originalDuration: 0
+    };
+  },
+  methods: {
+    startDrag(event, type) {
+      event.preventDefault();
+      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
+      // });
+
+      // Safety checks
+      if (!this.root || !this.root.state || !this.root.state.options || !this.root.state.options.times) {
+        console.error('Root or times options not available for dragging');
+        return;
+      }
+      this.isDragging = true;
+      this.dragType = type;
+      this.dragStartX = event.clientX || event.touches[0].clientX;
+      this.dragStartTime = this.task.startTime;
+      this.originalStartTime = this.task.startTime;
+      this.originalEndTime = this.task.endTime;
+      this.originalDuration = this.task.duration;
+
+      // Add event listeners
+      document.addEventListener('mousemove', this.handleDrag);
+      document.addEventListener('mouseup', this.endDrag);
+      document.addEventListener('touchmove', this.handleDrag);
+      document.addEventListener('touchend', this.endDrag);
+
+      // Hide hover tooltip when dragging starts
+      this.hideHoverTooltip();
+
+      // Add context menu for extending tasks
+      // this.$el.addEventListener('contextmenu', this.showContextMenu);
+
+      // Add keyboard shortcuts
+      this.$el.addEventListener('keydown', this.handleKeyboardShortcuts);
+
+      // Add dragging class for visual feedback
+      this.$el.classList.add('gantt-elastic__task-dragging');
+      this.$el.classList.add(`gantt-elastic__task-dragging--${type}`);
+
+      // Create date tooltip for all dragging types
+      this.createDateTooltip();
+    },
+    handleDrag(event) {
+      if (!this.isDragging) return;
+      event.preventDefault();
+      const currentX = event.clientX || event.touches[0].clientX;
+      const deltaX = currentX - this.dragStartX;
+
+      // Convert pixel delta to time delta
+      const timeDelta = deltaX * this.root.state.options.times.timePerPixel;
+      if (this.dragType === 'move') {
+        // Move entire task
+        const newStartTime = this.originalStartTime + timeDelta;
+        const newEndTime = this.originalEndTime + timeDelta;
+
+        // Ensure task doesn't go before chart start
+        const chartStartTime = this.root.state.options.times.firstTime;
+        const chartEndTime = this.root.state.options.times.lastTime;
+        if (newStartTime >= chartStartTime && newEndTime <= chartEndTime) {
+          this.updateTaskTime(newStartTime, newEndTime);
+
+          // Update date tooltip for move dragging
+          if (this.dateTooltip) {
+            this.updateDateTooltip(newStartTime);
+          }
+        }
+      } else if (this.dragType === 'start') {
+        // Resize from start - change start date
+        const newStartTime = this.originalStartTime + timeDelta;
+        const newEndTime = this.originalEndTime;
+
+        // Ensure start doesn't go after end and respects minimum duration
+        const minDuration = 24 * 60 * 60 * 1000; // 1 day minimum
+        const chartStartTime = this.root.state.options.times.firstTime;
+        if (newStartTime < newEndTime && newEndTime - newStartTime >= minDuration && newStartTime >= chartStartTime) {
+          this.updateTaskTime(newStartTime, newEndTime);
+
+          // Update date tooltip for start dragging
+          if (this.dateTooltip) {
+            this.updateDateTooltip(newStartTime);
+          }
+        }
+      } else if (this.dragType === 'end') {
+        // Resize from end - change end date while keeping start fixed
+        const newStartTime = this.originalStartTime;
+        const newEndTime = this.originalEndTime + timeDelta;
+
+        // Ensure end doesn't go before start and respects minimum duration
+        const minDuration = 24 * 60 * 60 * 1000; // 1 day minimum
+
+        if (newEndTime > newStartTime && newEndTime - newStartTime >= minDuration) {
+          // Allow extending beyond chart end time if needed
+          this.updateTaskTime(newStartTime, newEndTime);
+
+          // Update date tooltip for end dragging
+          if (this.dateTooltip) {
+            this.updateDateTooltip(newEndTime);
+          }
+        }
+      }
+    },
+    endDrag(event) {
+      if (!this.isDragging) return;
+      this.isDragging = false;
+
+      // Remove event listeners
+      document.removeEventListener('mousemove', this.handleDrag);
+      document.removeEventListener('mouseup', this.endDrag);
+      document.removeEventListener('touchmove', this.handleDrag);
+      document.removeEventListener('touchend', this.endDrag);
+
+      // Remove dragging classes
+      this.$el.classList.remove('gantt-elastic__task-dragging');
+      this.$el.classList.remove(`gantt-elastic__task-dragging--${this.dragType}`);
+
+      // Remove date tooltip
+      this.removeDateTooltip();
+
+      // Emit save event with updated data
+      this.emitSaveEvent();
+    },
+    updateTaskTime(newStartTime, newEndTime) {
+      // Ensure valid times
+      if (newStartTime >= newEndTime) {
+        return; // Don't update if invalid
+      }
+
+      // 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
+        // });
+      }
+
+      // Update task data
+      this.task.startTime = newStartTime;
+      this.task.endTime = newEndTime;
+      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
+      // });
+
+      // Update task position and width using the correct method
+      if (this.root && this.root.timeToPixelOffsetX) {
+        this.task.x = this.root.timeToPixelOffsetX(newStartTime);
+        this.task.width = this.root.timeToPixelOffsetX(newEndTime) - this.task.x;
+      } else {
+        // Fallback calculation if method is not available
+        const timePerPixel = this.root && this.root.state && this.root.state.options && this.root.state.options.times && this.root.state.options.times.timePerPixel;
+        if (timePerPixel > 0) {
+          this.task.x = (newStartTime - this.root.state.options.times.firstTime) / timePerPixel;
+          this.task.width = (newEndTime - newStartTime) / timePerPixel;
+        } else {
+          console.error('timePerPixel is not available or invalid:', timePerPixel);
+        }
+      }
+
+      // Force update
+      this.$forceUpdate();
+    },
+    emitSaveEvent() {
+      // Calculate date information
+      const startDate = new Date(this.task.startTime);
+      const endDate = new Date(this.task.endTime);
+      const durationDays = Math.ceil(this.task.duration / (24 * 60 * 60 * 1000));
+
+      // Emit event to parent component with updated task data
+      this.$emit('task-updated', {
+        id: this.task.id,
+        startTime: this.task.startTime,
+        endTime: this.task.endTime,
+        duration: this.task.duration,
+        durationDays: durationDays,
+        startDate: startDate.toISOString(),
+        endDate: endDate.toISOString(),
+        startDateFormatted: startDate.toLocaleDateString(),
+        endDateFormatted: endDate.toLocaleDateString(),
+        dragType: this.dragType,
+        originalStartTime: this.originalStartTime,
+        originalEndTime: this.originalEndTime,
+        originalDuration: this.originalDuration
+      });
+
+      // 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
+      // });
+    },
+    /**
+     * Show context menu for task actions
+     *
+     * @param {Event} event - Right-click event
+     */
+    // showContextMenu(event) {
+    //   event.preventDefault();
+    //   
+    //   // Remove existing context menu
+    //   this.hideContextMenu();
+    //   
+    //   // Create context menu
+    //   const contextMenu = document.createElement('div');
+    //   contextMenu.className = 'gantt-elastic__context-menu';
+    //   contextMenu.style.cssText = `
+    //     position: fixed;
+    //     top: ${event.clientY}px;
+    //     left: ${event.clientX}px;
+    //     background: white;
+    //     border: 1px solid #e5e7eb;
+    //     border-radius: 6px;
+    //     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    //     z-index: 1000;
+    //     min-width: 150px;
+    //     padding: 4px 0;
+    //   `;
+    //   
+    //   // Add menu items
+    //   const menuItems = [
+    //     { text: 'Extend to Next Date', action: () => this.extendTaskToNextDate() },
+    //     { text: 'Extend by 1 Day', action: () => this.extendTaskByDays(1) },
+    //     { text: 'Extend by 3 Days', action: () => this.extendTaskByDays(3) },
+    //     { text: 'Extend by 1 Week', action: () => this.extendTaskByDays(7) }
+    //   ];
+    //   
+    //   menuItems.forEach(item => {
+    //     const menuItem = document.createElement('div');
+    //     menuItem.className = 'gantt-elastic__context-menu-item';
+    //     menuItem.textContent = item.text;
+    //     menuItem.style.cssText = `
+    //       padding: 8px 16px;
+    //       cursor: pointer;
+    //       font-size: 14px;
+    //       color: #374151;
+    //       transition: background-color 0.2s;
+    //     `;
+    //     
+    //     menuItem.addEventListener('mouseenter', () => {
+    //       menuItem.style.backgroundColor = '#f3f4f6';
+    //     });
+    //     
+    //     menuItem.addEventListener('mouseleave', () => {
+    //       menuItem.style.backgroundColor = 'transparent';
+    //     });
+    //     
+    //     menuItem.addEventListener('click', () => {
+    //       item.action();
+    //       this.hideContextMenu();
+    //     });
+    //     
+    //     contextMenu.appendChild(menuItem);
+    //   });
+    //   
+    //   // Add to document
+    //   document.body.appendChild(contextMenu);
+    //   this.contextMenu = contextMenu;
+    //   
+    //   // Close menu when clicking outside
+    //   setTimeout(() => {
+    //     document.addEventListener('click', this.hideContextMenu);
+    //   }, 0);
+    // },
+
+    /**
+     * Hide context menu
+     */
+    // hideContextMenu() {
+    //   if (this.contextMenu) {
+    //     document.body.removeChild(this.contextMenu);
+    //     this.contextMenu = null;
+    //     document.removeEventListener('click', this.hideContextMenu);
+    //   }
+    // },
+
+    /**
+     * Extend task to next date (1 day)
+     */
+    // extendTaskToNextDate() {
+    //   const additionalDuration = 24 * 60 * 60 * 1000; // 1 day
+    //   this.task.duration += additionalDuration;
+    //   this.task.endTime += additionalDuration;
+    //   
+    //   // Update task position and width
+    //   if (this.root && this.root.timeToPixelOffsetX) {
+    //     this.task.width = this.root.timeToPixelOffsetX(this.task.endTime) - this.task.x;
+    //   } else {
+    //     const timePerPixel = this.root && this.root.state && this.root.state.options && this.root.state.options.times && this.root.state.options.times.timePerPixel;
+    //     if (timePerPixel > 0) {
+    //       this.task.width = (this.task.endTime - this.task.startTime) / timePerPixel;
+    //     }
+    //   }
+    //   
+    //   // Emit update event
+    //   this.emitSaveEvent();
+    //   
+    //   console.log(`✅ Task extended to next date:`, {
+    //     taskId: this.task.id,
+    //     newDuration: this.task.duration,
+    //     newEndDate: new Date(this.task.endTime).toLocaleDateString()
+    //   });
+    // },
+
+    /**
+     * Extend task by specific number of days
+     *
+     * @param {number} days - Number of days to add
+     */
+    // extendTaskByDays(days) {
+    //   const additionalDuration = days * 24 * 60 * 60 * 1000;
+    //   this.task.duration += additionalDuration;
+    //   this.task.endTime += additionalDuration;
+    //   
+    //   // Update task position and width
+    //   if (this.root && this.root.timeToPixelOffsetX) {
+    //     this.task.width = this.root.timeToPixelOffsetX(this.task.endTime) - this.task.x;
+    //   } else {
+    //     const timePerPixel = this.root && this.root.state && this.root.state.options && this.root.state.options.times && this.root.state.options.times.timePerPixel;
+    //     if (timePerPixel > 0) {
+    //       this.task.width = (this.task.endTime - this.task.startTime) / timePerPixel;
+    //     }
+    //   }
+    //   
+    //   // Emit update event
+    //   this.emitSaveEvent();
+    //   
+    //   console.log(`✅ Task extended by ${days} day(s):`, {
+    //     taskId: this.task.id,
+    //     daysAdded: days,
+    //     newDuration: this.task.duration,
+    //     newEndDate: new Date(this.task.endTime).toLocaleDateString()
+    //   });
+    // },
+
+    /**
+     * Handle keyboard shortcuts for task extension
+     *
+     * @param {KeyboardEvent} event - Keyboard event
+     */
+    handleKeyboardShortcuts(event) {
+      // Only handle if task is focused and not dragging
+      if (this.isDragging) return;
+
+      // Check for Ctrl/Cmd + E for extend to next date
+      if ((event.ctrlKey || event.metaKey) && event.key === 'e') {
+        event.preventDefault();
+        this.extendTaskToNextDate();
+      }
+      // Check for Ctrl/Cmd + Shift + E for extend by 1 day
+      else if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === 'E') {
+        event.preventDefault();
+        this.extendTaskByDays(1);
+      }
+      // Check for Ctrl/Cmd + 3 for extend by 3 days
+      else if ((event.ctrlKey || event.metaKey) && event.key === '3') {
+        event.preventDefault();
+        this.extendTaskByDays(3);
+      }
+      // Check for Ctrl/Cmd + 7 for extend by 1 week
+      else if ((event.ctrlKey || event.metaKey) && event.key === '7') {
+        event.preventDefault();
+        this.extendTaskByDays(7);
+      }
+    },
+    /**
+     * Create date tooltip for end dragging
+     */
+    createDateTooltip() {
+      this.dateTooltip = document.createElement('div');
+      this.dateTooltip.className = 'gantt-elastic__date-tooltip';
+      this.dateTooltip.style.cssText = `
+        position: fixed;
+        background: #000000;
+        color: white;
+        padding: 6px 12px;
+        border-radius: 6px;
+        font-size: 13px;
+        font-family: system-ui, -apple-system, sans-serif;
+        font-weight: 500;
+        pointer-events: none;
+        z-index: 10000;
+        white-space: nowrap;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+      `;
+      document.body.appendChild(this.dateTooltip);
+
+      // Initialize tooltip with current values
+      if (this.dragType === 'start') {
+        this.updateDateTooltip(this.originalStartTime);
+      } else if (this.dragType === 'end') {
+        this.updateDateTooltip(this.originalEndTime);
+      } else if (this.dragType === 'move') {
+        this.updateDateTooltip(this.originalStartTime);
+      }
+    },
+    /**
+     * Update date tooltip with new time and day changes
+     *
+     * @param {number} newTime - New time in milliseconds
+     */
+    updateDateTooltip(newTime) {
+      if (!this.dateTooltip) return;
+      const newDate = new Date(newTime);
+      const formattedDate = newDate.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+      });
+
+      // Calculate day changes based on drag type
+      let dayChanges = '';
+      if (this.dragType === 'start') {
+        // For start drag, show how many days we're moving the start date
+        const daysDiff = Math.round((newTime - this.originalStartTime) / (24 * 60 * 60 * 1000));
+        if (daysDiff !== 0) {
+          dayChanges = daysDiff > 0 ? ` (+${daysDiff} days)` : ` (${daysDiff} days)`;
+        }
+      } else if (this.dragType === 'end') {
+        // For end drag, show how many days we're moving the end date
+        const daysDiff = Math.round((newTime - this.originalEndTime) / (24 * 60 * 60 * 1000));
+        if (daysDiff !== 0) {
+          dayChanges = daysDiff > 0 ? ` (+${daysDiff} days)` : ` (${daysDiff} days)`;
+        }
+      } else if (this.dragType === 'move') {
+        // For move drag, show how many days we're moving the entire task
+        const daysDiff = Math.round((newTime - this.originalStartTime) / (24 * 60 * 60 * 1000));
+        if (daysDiff !== 0) {
+          dayChanges = daysDiff > 0 ? ` (+${daysDiff} days)` : ` (${daysDiff} days)`;
+        }
+      }
+      this.dateTooltip.textContent = `${formattedDate}${dayChanges}`;
+
+      // Position tooltip based on drag type
+      const rect = this.$el.getBoundingClientRect();
+      if (this.dragType === 'start') {
+        // Position tooltip on the left side for start drag
+        this.dateTooltip.style.left = `${rect.left - this.dateTooltip.offsetWidth - 10}px`;
+        this.dateTooltip.style.top = `${rect.top + rect.height / 2 - 10}px`;
+      } else if (this.dragType === 'end') {
+        // Position tooltip on the right side for end drag
+        this.dateTooltip.style.left = `${rect.right + 10}px`;
+        this.dateTooltip.style.top = `${rect.top + rect.height / 2 - 10}px`;
+      } else if (this.dragType === 'move') {
+        // Position tooltip on the right side for move drag
+        this.dateTooltip.style.left = `${rect.right + 10}px`;
+        this.dateTooltip.style.top = `${rect.top + rect.height / 2 - 10}px`;
+      }
+    },
+    /**
+     * Remove date tooltip
+     */
+    removeDateTooltip() {
+      if (this.dateTooltip) {
+        document.body.removeChild(this.dateTooltip);
+        this.dateTooltip = null;
+      }
+    },
+    /**
+     * Add hover tooltips for drag handles
+     */
+    addHoverTooltips() {
+      // Find drag handles in the current element
+      const dragHandles = this.$el.querySelectorAll('.gantt-elastic__chart-row-extend-handle');
+      dragHandles.forEach((handle, index) => {
+        const isStartHandle = index === 0; // First handle is start, second is end
+
+        // Remove existing listeners to avoid duplicates
+        handle.removeEventListener('mouseenter', this.handleMouseEnter);
+        handle.removeEventListener('mouseleave', this.handleMouseLeave);
+
+        // Add new listeners
+        handle.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+        handle.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+      });
+    },
+    /**
+     * Handle mouse enter on drag handle
+     */
+    handleMouseEnter(event) {
+      if (!this.isDragging) {
+        this.showHoverTooltip(event, false);
+      }
+    },
+    /**
+     * Handle mouse leave on drag handle
+     */
+    handleMouseLeave() {
+      if (!this.isDragging) {
+        this.hideHoverTooltip();
+      }
+    },
+    /**
+     * Show hover tooltip with date range and duration
+     */
+    showHoverTooltip(event, isStartHandle) {
+      this.hideHoverTooltip(); // Remove any existing tooltip
+
+      const startDate = new Date(this.task.startTime);
+      const endDate = new Date(this.task.endTime);
+      const startFormatted = startDate.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+      });
+      const endFormatted = endDate.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+      });
+
+      // Calculate duration in days
+      const durationMs = this.task.endTime - this.task.startTime;
+      const durationDays = Math.ceil(durationMs / (24 * 60 * 60 * 1000));
+      this.hoverTooltip = document.createElement('div');
+      this.hoverTooltip.className = 'gantt-elastic__hover-tooltip';
+      this.hoverTooltip.textContent = `${startFormatted} - ${endFormatted} (${durationDays} days)`;
+      this.hoverTooltip.style.cssText = `
+        position: fixed;
+        background: #333333;
+        color: white;
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-size: 13px;
+        font-family: system-ui, -apple-system, sans-serif;
+        font-weight: 500;
+        pointer-events: none;
+        z-index: 10001;
+        white-space: nowrap;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+      `;
+      document.body.appendChild(this.hoverTooltip);
+
+      // Position tooltip above the handle
+      const rect = event.target.getBoundingClientRect();
+      this.hoverTooltip.style.left = `${rect.left + rect.width / 2 - this.hoverTooltip.offsetWidth / 2}px`;
+      this.hoverTooltip.style.top = `${rect.top - this.hoverTooltip.offsetHeight - 8}px`;
+    },
+    /**
+     * Hide hover tooltip
+     */
+    hideHoverTooltip() {
+      if (this.hoverTooltip) {
+        document.body.removeChild(this.hoverTooltip);
+        this.hoverTooltip = null;
+      }
+    }
+  },
+  mounted() {
+    // Add hover tooltips when component is mounted
+    this.$nextTick(() => {
+      this.addHoverTooltips();
+    });
+  },
+  beforeDestroy() {
+    // Clean up event listeners
+    document.removeEventListener('mousemove', this.handleDrag);
+    document.removeEventListener('mouseup', this.endDrag);
+    document.removeEventListener('touchmove', this.handleDrag);
+    document.removeEventListener('touchend', this.endDrag);
+    document.removeEventListener('click', this.hideContextMenu);
+
+    // Clean up context menu
+    this.hideContextMenu();
+
+    // Clean up date tooltip
+    this.removeDateTooltip();
+
+    // Clean up hover tooltip
+    this.hideHoverTooltip();
+
+    // Clean up keyboard listeners
+    if (this.$el) {
+      // this.$el.removeEventListener('contextmenu', this.showContextMenu);
+      this.$el.removeEventListener('keydown', this.handleKeyboardShortcuts);
+    }
+  }
+});
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Chart/Row/Task.vue?vue&type=script&lang=js
 
 
 
 
+
 /* harmony default export */ var Taskvue_type_script_lang_js = ({
   name: 'Task',
   components: {
@@ -6295,7 +7041,7 @@ var ProgressBar_component = normalizeComponent(
   },
   inject: ['root'],
   props: ['task'],
-  mixins: [Task_mixin],
+  mixins: [Task_mixin, Draggable_mixin],
   data() {
     return {};
   },
@@ -6316,6 +7062,15 @@ var ProgressBar_component = normalizeComponent(
     getPoints() {
       const task = this.task;
       return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
+    },
+    /**
+     * Get points adjusted for viewBox
+     *
+     * @returns {string}
+     */
+    getPointsAdjusted() {
+      const task = this.task;
+      return `8,0 ${task.width + 8},0 ${task.width + 8},${task.height} 8,${task.height}`;
     }
   }
 });
@@ -6331,8 +7086,8 @@ var ProgressBar_component = normalizeComponent(
 ;
 var Task_component = normalizeComponent(
   Row_Taskvue_type_script_lang_js,
-  Taskvue_type_template_id_208a9baa_render,
-  Taskvue_type_template_id_208a9baa_staticRenderFns,
+  Taskvue_type_template_id_23849415_render,
+  Taskvue_type_template_id_23849415_staticRenderFns,
   false,
   null,
   null,
@@ -6341,8 +7096,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-83.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=edd49e02
-var Milestonevue_type_template_id_edd49e02_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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', {
@@ -6379,11 +7134,11 @@ var Milestonevue_type_template_id_edd49e02_render = function render() {
       ..._vm.task.style['chart-row-bar']
     },
     attrs: {
-      "x": _vm.task.x,
+      "x": _vm.task.x - 8,
       "y": _vm.task.y,
-      "width": _vm.task.width,
+      "width": _vm.task.width + 16,
       "height": _vm.task.height,
-      "viewBox": `0 0 ${_vm.task.width} ${_vm.task.height}`,
+      "viewBox": `-8 0 ${_vm.task.width + 16} ${_vm.task.height}`,
       "xmlns": "http://www.w3.org/2000/svg"
     },
     on: {
@@ -6438,26 +7193,83 @@ var Milestonevue_type_template_id_edd49e02_render = function render() {
       ..._vm.task.style['chart-row-bar-polygon']
     },
     attrs: {
-      "points": _vm.getPoints
+      "points": _vm.getPointsAdjusted
+    },
+    on: {
+      "mousedown": function ($event) {
+        return _vm.startDrag($event, 'move');
+      },
+      "touchstart": function ($event) {
+        return _vm.startDrag($event, 'move');
+      }
     }
   }), _c('progress-bar', {
     attrs: {
       "task": _vm.task,
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": "0",
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      }
+    }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": _vm.task.width - 12,
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      }
+    }
   })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
     attrs: {
       "task": _vm.task
     }
   }) : _vm._e()], 1);
 };
-var Milestonevue_type_template_id_edd49e02_staticRenderFns = [];
+var Milestonevue_type_template_id_c9bfeb4a_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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
 
 
 
 
+
 /* harmony default export */ var Milestonevue_type_script_lang_js = ({
   name: 'Milestone',
   components: {
@@ -6467,7 +7279,7 @@ var Milestonevue_type_template_id_edd49e02_staticRenderFns = [];
   },
   inject: ['root'],
   props: ['task'],
-  mixins: [Task_mixin],
+  mixins: [Task_mixin, Draggable_mixin],
   data() {
     return {};
   },
@@ -6498,6 +7310,25 @@ var Milestonevue_type_template_id_edd49e02_staticRenderFns = [];
         ${task.width},${fifty}
         ${task.width - offset},${task.height}
         ${offset},${task.height}`;
+    },
+    /**
+     * Get points adjusted for viewBox
+     *
+     * @returns {string}
+     */
+    getPointsAdjusted() {
+      const task = this.task;
+      const fifty = task.height / 2;
+      let offset = fifty;
+      if (task.width / 2 - offset < 0) {
+        offset = task.width / 2;
+      }
+      return `${8},${fifty}
+        ${8 + offset},0
+        ${8 + task.width - offset},0
+        ${8 + task.width},${fifty}
+        ${8 + task.width - offset},${task.height}
+        ${8 + offset},${task.height}`;
     }
   }
 });
@@ -6513,8 +7344,8 @@ var Milestonevue_type_template_id_edd49e02_staticRenderFns = [];
 ;
 var Milestone_component = normalizeComponent(
   Row_Milestonevue_type_script_lang_js,
-  Milestonevue_type_template_id_edd49e02_render,
-  Milestonevue_type_template_id_edd49e02_staticRenderFns,
+  Milestonevue_type_template_id_c9bfeb4a_render,
+  Milestonevue_type_template_id_c9bfeb4a_staticRenderFns,
   false,
   null,
   null,
@@ -6523,8 +7354,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-83.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=760bf767
-var Projectvue_type_template_id_760bf767_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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', {
@@ -6561,11 +7392,11 @@ var Projectvue_type_template_id_760bf767_render = function render() {
       ..._vm.task.style['chart-row-bar']
     },
     attrs: {
-      "x": _vm.task.x,
+      "x": _vm.task.x - 8,
       "y": _vm.task.y,
-      "width": _vm.task.width,
+      "width": _vm.task.width + 16,
       "height": _vm.task.height,
-      "viewBox": `0 0 ${_vm.task.width} ${_vm.task.height}`,
+      "viewBox": `-8 0 ${_vm.task.width + 16} ${_vm.task.height}`,
       "xmlns": "http://www.w3.org/2000/svg"
     },
     on: {
@@ -6620,26 +7451,83 @@ var Projectvue_type_template_id_760bf767_render = function render() {
       ..._vm.task.style['chart-row-bar-polygon']
     },
     attrs: {
-      "d": _vm.getPoints
+      "d": _vm.getPointsAdjusted
+    },
+    on: {
+      "mousedown": function ($event) {
+        return _vm.startDrag($event, 'move');
+      },
+      "touchstart": function ($event) {
+        return _vm.startDrag($event, 'move');
+      }
     }
   }), _c('progress-bar', {
     attrs: {
       "task": _vm.task,
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": "0",
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      }
+    }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": _vm.task.width - 12,
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      }
+    }
   })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
     attrs: {
       "task": _vm.task
     }
   }) : _vm._e()], 1);
 };
-var Projectvue_type_template_id_760bf767_staticRenderFns = [];
+var Projectvue_type_template_id_72239142_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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
 
 
 
 
+
 /* harmony default export */ var Projectvue_type_script_lang_js = ({
   name: 'Project',
   components: {
@@ -6649,7 +7537,7 @@ var Projectvue_type_template_id_760bf767_staticRenderFns = [];
   },
   inject: ['root'],
   props: ['task'],
-  mixins: [Task_mixin],
+  mixins: [Task_mixin, Draggable_mixin],
   data() {
     return {};
   },
@@ -6685,6 +7573,29 @@ var Projectvue_type_template_id_760bf767_staticRenderFns = [];
                 Z
         `;
     },
+    /**
+     * Get points adjusted for viewBox
+     *
+     * @returns {string}
+     */
+    getPointsAdjusted() {
+      const task = this.task;
+      const bottom = task.height - task.height / 4;
+      const corner = task.height / 6;
+      const smallCorner = task.height / 8;
+      return `M ${8 + smallCorner},0
+                L ${8 + task.width - smallCorner} 0
+                L ${8 + task.width} ${smallCorner}
+                L ${8 + task.width} ${bottom}
+                L ${8 + task.width - corner} ${task.height}
+                L ${8 + task.width - corner * 2} ${bottom}
+                L ${8 + corner * 2} ${bottom}
+                L ${8 + corner} ${task.height}
+                L ${8} ${bottom}
+                L ${8} ${smallCorner}
+                Z
+        `;
+    },
     /**
      * Should we display expander?
      *
@@ -6709,8 +7620,8 @@ var Projectvue_type_template_id_760bf767_staticRenderFns = [];
 ;
 var Project_component = normalizeComponent(
   Row_Projectvue_type_script_lang_js,
-  Projectvue_type_template_id_760bf767_render,
-  Projectvue_type_template_id_760bf767_staticRenderFns,
+  Projectvue_type_template_id_72239142_render,
+  Projectvue_type_template_id_72239142_staticRenderFns,
   false,
   null,
   null,
@@ -6719,8 +7630,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-83.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=a2e89cd8
-var Epicvue_type_template_id_a2e89cd8_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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', {
@@ -6757,11 +7668,11 @@ var Epicvue_type_template_id_a2e89cd8_render = function render() {
       ..._vm.task.style['chart-row-bar']
     },
     attrs: {
-      "x": _vm.task.x,
+      "x": _vm.task.x - 8,
       "y": _vm.task.y,
-      "width": _vm.task.width,
+      "width": _vm.task.width + 16,
       "height": _vm.task.height,
-      "viewBox": `0 0 ${_vm.task.width} ${_vm.task.height}`,
+      "viewBox": `-8 0 ${_vm.task.width + 16} ${_vm.task.height}`,
       "xmlns": "http://www.w3.org/2000/svg"
     },
     on: {
@@ -6813,29 +7724,88 @@ var Epicvue_type_template_id_a2e89cd8_render = function render() {
       ..._vm.root.style['chart-row-bar-polygon'],
       ..._vm.root.style['chart-row-epic-polygon'],
       ..._vm.task.style['base'],
-      ..._vm.task.style['chart-row-bar-polygon']
+      ..._vm.task.style['chart-row-bar-polygon'],
+      'pointer-events': 'all',
+      'z-index': '10'
     },
     attrs: {
-      "d": _vm.getPoints
+      "d": _vm.getPointsAdjusted
+    },
+    on: {
+      "mousedown": function ($event) {
+        return _vm.startDrag($event, 'move');
+      },
+      "touchstart": function ($event) {
+        return _vm.startDrag($event, 'move');
+      }
     }
-  }), _c('progress-bar', {
+  }), _vm.task.progress > 0 ? _c('progress-bar', {
     attrs: {
       "task": _vm.task,
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
+  }) : _vm._e(), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": "0",
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      }
+    }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": _vm.task.width - 12,
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      }
+    }
   })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
     attrs: {
       "task": _vm.task
     }
   }) : _vm._e()], 1);
 };
-var Epicvue_type_template_id_a2e89cd8_staticRenderFns = [];
+var Epicvue_type_template_id_80ad2e9c_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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
 
 
 
 
+
 /* harmony default export */ var Epicvue_type_script_lang_js = ({
   name: 'Epic',
   components: {
@@ -6845,7 +7815,7 @@ var Epicvue_type_template_id_a2e89cd8_staticRenderFns = [];
   },
   inject: ['root'],
   props: ['task'],
-  mixins: [Task_mixin],
+  mixins: [Task_mixin, Draggable_mixin],
   data() {
     return {};
   },
@@ -6881,6 +7851,29 @@ var Epicvue_type_template_id_a2e89cd8_staticRenderFns = [];
                 Z
         `;
     },
+    /**
+     * Get points adjusted for viewBox
+     *
+     * @returns {string}
+     */
+    getPointsAdjusted() {
+      const task = this.task;
+      const bottom = task.height - task.height / 4;
+      const corner = task.height / 6;
+      const smallCorner = task.height / 8;
+      return `M ${8 + smallCorner},0
+                L ${8 + task.width - smallCorner} 0
+                L ${8 + task.width} ${smallCorner}
+                L ${8 + task.width} ${bottom}
+                L ${8 + task.width - corner} ${task.height}
+                L ${8 + task.width - corner * 2} ${bottom}
+                L ${8 + corner * 2} ${bottom}
+                L ${8 + corner} ${task.height}
+                L ${8} ${bottom}
+                L ${8} ${smallCorner}
+                Z
+        `;
+    },
     /**
      * Should we display expander?
      *
@@ -6905,8 +7898,8 @@ var Epicvue_type_template_id_a2e89cd8_staticRenderFns = [];
 ;
 var Epic_component = normalizeComponent(
   Row_Epicvue_type_script_lang_js,
-  Epicvue_type_template_id_a2e89cd8_render,
-  Epicvue_type_template_id_a2e89cd8_staticRenderFns,
+  Epicvue_type_template_id_80ad2e9c_render,
+  Epicvue_type_template_id_80ad2e9c_staticRenderFns,
   false,
   null,
   null,
@@ -6915,8 +7908,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-83.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=86599310
-var Subtaskvue_type_template_id_86599310_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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', {
@@ -6953,11 +7946,11 @@ var Subtaskvue_type_template_id_86599310_render = function render() {
       ..._vm.task.style['chart-row-bar']
     },
     attrs: {
-      "x": _vm.task.x,
+      "x": _vm.task.x - 8,
       "y": _vm.task.y,
-      "width": _vm.task.width,
+      "width": _vm.task.width + 16,
       "height": _vm.task.height,
-      "viewBox": `0 0 ${_vm.task.width} ${_vm.task.height}`,
+      "viewBox": `-8 0 ${_vm.task.width + 16} ${_vm.task.height}`,
       "xmlns": "http://www.w3.org/2000/svg"
     },
     on: {
@@ -7012,26 +8005,83 @@ var Subtaskvue_type_template_id_86599310_render = function render() {
       ..._vm.task.style['chart-row-bar-polygon']
     },
     attrs: {
-      "points": _vm.getPoints
+      "points": _vm.getPointsAdjusted
+    },
+    on: {
+      "mousedown": function ($event) {
+        return _vm.startDrag($event, 'move');
+      },
+      "touchstart": function ($event) {
+        return _vm.startDrag($event, 'move');
+      }
     }
   }), _c('progress-bar', {
     attrs: {
       "task": _vm.task,
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": "0",
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      }
+    }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": _vm.task.width - 12,
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      }
+    }
   })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
     attrs: {
       "task": _vm.task
     }
   }) : _vm._e()], 1);
 };
-var Subtaskvue_type_template_id_86599310_staticRenderFns = [];
+var Subtaskvue_type_template_id_52219a35_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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
 
 
 
 
+
 /* harmony default export */ var Subtaskvue_type_script_lang_js = ({
   name: 'Subtask',
   components: {
@@ -7041,7 +8091,7 @@ var Subtaskvue_type_template_id_86599310_staticRenderFns = [];
   },
   inject: ['root'],
   props: ['task'],
-  mixins: [Task_mixin],
+  mixins: [Task_mixin, Draggable_mixin],
   data() {
     return {};
   },
@@ -7063,6 +8113,15 @@ var Subtaskvue_type_template_id_86599310_staticRenderFns = [];
       const task = this.task;
       return `0,0 ${task.width},0 ${task.width},${task.height} 0,${task.height}`;
     },
+    /**
+     * Get points adjusted for viewBox
+     *
+     * @returns {string}
+     */
+    getPointsAdjusted() {
+      const task = this.task;
+      return `8,0 ${task.width + 8},0 ${task.width + 8},${task.height} 8,${task.height}`;
+    },
     /**
      * Should we display expander?
      *
@@ -7087,8 +8146,8 @@ var Subtaskvue_type_template_id_86599310_staticRenderFns = [];
 ;
 var Subtask_component = normalizeComponent(
   Row_Subtaskvue_type_script_lang_js,
-  Subtaskvue_type_template_id_86599310_render,
-  Subtaskvue_type_template_id_86599310_staticRenderFns,
+  Subtaskvue_type_template_id_52219a35_render,
+  Subtaskvue_type_template_id_52219a35_staticRenderFns,
   false,
   null,
   null,
@@ -7097,8 +8156,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-83.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=1f59b61a
-var Storyvue_type_template_id_1f59b61a_render = function render() {
+;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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', {
@@ -7135,11 +8194,11 @@ var Storyvue_type_template_id_1f59b61a_render = function render() {
       ..._vm.task.style['chart-row-bar']
     },
     attrs: {
-      "x": _vm.task.x,
+      "x": _vm.task.x - 8,
       "y": _vm.task.y,
-      "width": _vm.task.width,
+      "width": _vm.task.width + 16,
       "height": _vm.task.height,
-      "viewBox": `0 0 ${_vm.task.width} ${_vm.task.height}`,
+      "viewBox": `-8 0 ${_vm.task.width + 16} ${_vm.task.height}`,
       "xmlns": "http://www.w3.org/2000/svg"
     },
     on: {
@@ -7194,26 +8253,83 @@ var Storyvue_type_template_id_1f59b61a_render = function render() {
       ..._vm.task.style['chart-row-bar-polygon']
     },
     attrs: {
-      "d": _vm.getPoints
+      "d": _vm.getPointsAdjusted
+    },
+    on: {
+      "mousedown": function ($event) {
+        return _vm.startDrag($event, 'move');
+      },
+      "touchstart": function ($event) {
+        return _vm.startDrag($event, 'move');
+      }
     }
   }), _c('progress-bar', {
     attrs: {
       "task": _vm.task,
       "clip-path": 'url(#' + _vm.clipPathId + ')'
     }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": "0",
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'start');
+      }
+    }
+  }), _c('rect', {
+    staticClass: "gantt-elastic__chart-row-extend-handle gantt-elastic__drag-handle",
+    staticStyle: {
+      "pointer-events": "all",
+      "z-index": "50",
+      "cursor": "ew-resize !important"
+    },
+    style: _vm.root.style['chart-row-extend-handle'],
+    attrs: {
+      "x": _vm.task.width - 12,
+      "y": "0",
+      "width": 12,
+      "height": _vm.task.height
+    },
+    on: {
+      "mousedown": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      },
+      "touchstart": function ($event) {
+        $event.stopPropagation();
+        return _vm.startDrag($event, 'end');
+      }
+    }
   })], 1), _vm.root.state.options.chart.text.display ? _c('chart-text', {
     attrs: {
       "task": _vm.task
     }
   }) : _vm._e()], 1);
 };
-var Storyvue_type_template_id_1f59b61a_staticRenderFns = [];
+var Storyvue_type_template_id_5d688d0c_staticRenderFns = [];
 
 ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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
 
 
 
 
+
 /* harmony default export */ var Storyvue_type_script_lang_js = ({
   name: 'Story',
   components: {
@@ -7223,7 +8339,7 @@ var Storyvue_type_template_id_1f59b61a_staticRenderFns = [];
   },
   inject: ['root'],
   props: ['task'],
-  mixins: [Task_mixin],
+  mixins: [Task_mixin, Draggable_mixin],
   data() {
     return {};
   },
@@ -7255,6 +8371,25 @@ var Storyvue_type_template_id_1f59b61a_staticRenderFns = [];
                 Q 0 0 ${corner} 0
                 Z`;
     },
+    /**
+     * Get points adjusted for viewBox
+     *
+     * @returns {string}
+     */
+    getPointsAdjusted() {
+      const task = this.task;
+      const corner = Math.min(task.height / 4, 8); // Rounded corners
+      return `M ${8 + corner},0
+                L ${8 + task.width - corner} 0
+                Q ${8 + task.width} 0 ${8 + task.width} ${corner}
+                L ${8 + task.width} ${task.height - corner}
+                Q ${8 + task.width} ${task.height} ${8 + task.width - corner} ${task.height}
+                L ${8 + corner} ${task.height}
+                Q ${8} ${task.height} ${8} ${task.height - corner}
+                L ${8} ${corner}
+                Q ${8} 0 ${8 + corner} 0
+                Z`;
+    },
     /**
      * Should we display expander?
      *
@@ -7279,8 +8414,8 @@ var Storyvue_type_template_id_1f59b61a_staticRenderFns = [];
 ;
 var Story_component = normalizeComponent(
   Row_Storyvue_type_script_lang_js,
-  Storyvue_type_template_id_1f59b61a_render,
-  Storyvue_type_template_id_1f59b61a_staticRenderFns,
+  Storyvue_type_template_id_5d688d0c_render,
+  Storyvue_type_template_id_5d688d0c_staticRenderFns,
   false,
   null,
   null,
@@ -7330,6 +8465,43 @@ var Story_component = normalizeComponent(
     this.root.state.refs.chartGraph = this.$refs.chartGraph;
     this.root.state.refs.chartGraphSvg = this.$refs.chartGraphSvg;
   },
+  methods: {
+    /**
+     * Handle task updated event
+     *
+     * @param {Object} updatedTask - Updated task data
+     */
+    handleTaskUpdated(updatedTask) {
+      // Emit event to parent component
+      console.log("task-updated --Chart");
+      this.$emit('task-updated', updatedTask);
+
+      // Update the task in the root state
+      const taskIndex = this.root.state.tasks.findIndex(task => task.id === updatedTask.id);
+      if (taskIndex !== -1) {
+        // Update task data
+        this.root.state.tasks[taskIndex].startTime = updatedTask.startTime;
+        this.root.state.tasks[taskIndex].endTime = updatedTask.endTime;
+        this.root.state.tasks[taskIndex].duration = updatedTask.duration;
+
+        // Update task position and width
+        if (this.root && this.root.timeToPixelOffsetX) {
+          this.root.state.tasks[taskIndex].x = this.root.timeToPixelOffsetX(updatedTask.startTime);
+          this.root.state.tasks[taskIndex].width = this.root.timeToPixelOffsetX(updatedTask.endTime) - this.root.state.tasks[taskIndex].x;
+        } else {
+          // Fallback calculation if method is not available
+          const timePerPixel = this.root.state.options.times.timePerPixel;
+          if (timePerPixel > 0) {
+            this.root.state.tasks[taskIndex].x = (updatedTask.startTime - this.root.state.options.times.firstTime) / timePerPixel;
+            this.root.state.tasks[taskIndex].width = (updatedTask.endTime - updatedTask.startTime) / timePerPixel;
+          }
+        }
+
+        // Force update
+        this.$forceUpdate();
+      }
+    }
+  },
   computed: {
     /**
      * Get view box
@@ -7353,8 +8525,8 @@ var Story_component = normalizeComponent(
 ;
 var Chart_component = normalizeComponent(
   Chart_Chartvue_type_script_lang_js,
-  Chartvue_type_template_id_1d5eb6d6_render,
-  Chartvue_type_template_id_1d5eb6d6_staticRenderFns,
+  Chartvue_type_template_id_0856b85c_render,
+  Chartvue_type_template_id_0856b85c_staticRenderFns,
   false,
   null,
   null,
@@ -7443,6 +8615,16 @@ let ignoreScrollEvents = false;
     }
   },
   methods: {
+    /**
+     * Handle task updated event from chart
+     *
+     * @param {Object} updatedTask - Updated task data
+     */
+    handleTaskUpdated(updatedTask) {
+      // Emit event to parent component
+      console.log("task-updated --MainView");
+      this.$emit('task-updated', updatedTask);
+    },
     /**
      * Emit event when mouse is moving inside main view
      */
@@ -7559,8 +8741,8 @@ let ignoreScrollEvents = false;
 ;
 var MainView_component = normalizeComponent(
   components_MainViewvue_type_script_lang_js,
-  MainViewvue_type_template_id_1a4b756c_render,
-  MainViewvue_type_template_id_1a4b756c_staticRenderFns,
+  MainViewvue_type_template_id_79e1eba9_render,
+  MainViewvue_type_template_id_79e1eba9_staticRenderFns,
   false,
   null,
   null,
@@ -7883,6 +9065,192 @@ function getStyle(fontSize = '12px', fontFamily = 'Arial, sans-serif') {
       'text-overflow': 'ellipsis',
       'max-width': '120px'
     },
+    'chart-row-resize-handle': {
+      fill: 'rgba(59, 130, 246, 0.2)',
+      stroke: 'rgba(59, 130, 246, 0.8)',
+      'stroke-width': '2',
+      cursor: 'ew-resize',
+      opacity: '0.3',
+      transition: 'opacity 0.2s ease',
+      'pointer-events': 'all'
+    },
+    'chart-row-resize-handle--start': {
+      cursor: 'w-resize',
+      fill: 'rgba(34, 197, 94, 0.3)',
+      stroke: 'rgba(34, 197, 94, 0.9)',
+      'stroke-width': '2'
+    },
+    'chart-row-resize-handle--end': {
+      cursor: 'e-resize',
+      fill: 'rgba(239, 68, 68, 0.4)',
+      stroke: 'rgba(239, 68, 68, 1)',
+      'stroke-width': '2'
+    },
+    'chart-row-bar-wrapper:hover .chart-row-resize-handle': {
+      opacity: '0.8'
+    },
+    'chart-row-resize-handle:hover': {
+      opacity: '1',
+      fill: 'rgba(59, 130, 246, 0.4)',
+      stroke: 'rgba(59, 130, 246, 1)'
+    },
+    'chart-row-resize-handle--start:hover': {
+      fill: 'rgba(34, 197, 94, 0.4)',
+      stroke: 'rgba(34, 197, 94, 1)'
+    },
+    'chart-row-resize-handle--end:hover': {
+      fill: 'rgba(239, 68, 68, 0.5)',
+      stroke: 'rgba(239, 68, 68, 1)',
+      'stroke-width': '3'
+    },
+    'chart-row-resize-handle--corner': {
+      fill: 'rgba(147, 51, 234, 0.6)',
+      stroke: 'rgba(147, 51, 234, 1)',
+      'stroke-width': '2',
+      cursor: 'nw-resize',
+      opacity: '0.9',
+      transition: 'opacity 0.2s ease',
+      'pointer-events': 'all'
+    },
+    'chart-row-resize-handle--corner:hover': {
+      fill: 'rgba(147, 51, 234, 0.8)',
+      stroke: 'rgba(147, 51, 234, 1)',
+      'stroke-width': '3',
+      opacity: '1'
+    },
+    'chart-row-resize-handle--corner--start': {
+      fill: 'rgba(34, 197, 94, 0.7)',
+      stroke: 'rgba(34, 197, 94, 1)',
+      'stroke-width': '2',
+      cursor: 'w-resize'
+    },
+    'chart-row-resize-handle--corner--end': {
+      fill: 'rgba(239, 68, 68, 0.7)',
+      stroke: 'rgba(239, 68, 68, 1)',
+      'stroke-width': '2',
+      cursor: 'e-resize'
+    },
+    'chart-row-corner-handle--start': {
+      fill: 'rgba(34, 197, 94, 0.8)',
+      stroke: 'rgba(34, 197, 94, 1)',
+      'stroke-width': '2',
+      cursor: 'w-resize',
+      opacity: '0.9',
+      transition: 'opacity 0.2s ease',
+      'pointer-events': 'all'
+    },
+    'chart-row-corner-handle--end': {
+      fill: 'rgba(239, 68, 68, 0.8)',
+      stroke: 'rgba(239, 68, 68, 1)',
+      'stroke-width': '2',
+      cursor: 'e-resize',
+      opacity: '0.9',
+      transition: 'opacity 0.2s ease',
+      'pointer-events': 'all'
+    },
+    'chart-row-corner-handle--start:hover': {
+      fill: 'rgba(34, 197, 94, 0.5)',
+      stroke: 'rgba(34, 197, 94, 1)',
+      'stroke-width': '2',
+      opacity: '0.9'
+    },
+    'chart-row-corner-handle--end:hover': {
+      fill: 'rgba(239, 68, 68, 0.5)',
+      stroke: 'rgba(239, 68, 68, 1)',
+      'stroke-width': '2',
+      opacity: '0.9'
+    },
+    'chart-row-extend-handle': {
+      fill: 'rgba(255, 255, 255, 0.1)',
+      stroke: 'rgba(255, 255, 255, 0.3)',
+      'stroke-width': '1',
+      cursor: 'ew-resize',
+      opacity: '0.3',
+      transition: 'opacity 0.2s ease',
+      'pointer-events': 'all',
+      'z-index': '10'
+    },
+    'chart-row-extend-handle:hover': {
+      fill: 'rgba(255, 255, 255, 0.2)',
+      stroke: 'rgba(255, 255, 255, 0.6)',
+      'stroke-width': '2',
+      opacity: '0.8'
+    },
+    'chart-row-expand-icon-bg': {
+      fill: 'rgba(255, 255, 255, 0.95)',
+      stroke: 'rgba(0, 0, 0, 0.5)',
+      'stroke-width': '1.5',
+      cursor: 'ew-resize',
+      opacity: '1',
+      transition: 'opacity 0.2s ease',
+      'pointer-events': 'all'
+    },
+    'chart-row-expand-icon-arrow': {
+      fill: 'rgba(0, 0, 0, 0.9)',
+      cursor: 'ew-resize',
+      'pointer-events': 'all'
+    },
+    'chart-row-expand-icon:hover .gantt-elastic__chart-row-expand-icon-bg': {
+      fill: 'rgba(255, 255, 255, 1)',
+      stroke: 'rgba(0, 0, 0, 0.5)',
+      'stroke-width': '1.5',
+      opacity: '1'
+    },
+    'chart-row-expand-icon:hover .gantt-elastic__chart-row-expand-icon-arrow': {
+      fill: 'rgba(0, 0, 0, 1)'
+    },
+    'gantt-elastic__task-dragging': {
+      opacity: '0.8',
+      'pointer-events': 'none',
+      'filter': 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2))'
+    },
+    'gantt-elastic__task-dragging--start': {
+      'border-left': '3px solid #22c55e',
+      'box-shadow': 'inset 3px 0 0 #22c55e'
+    },
+    'gantt-elastic__task-dragging--end': {
+      'border-right': '3px solid #ef4444',
+      'box-shadow': 'inset -3px 0 0 #ef4444'
+    },
+    'gantt-elastic__task-dragging--move': {
+      'border': '2px solid #3b82f6',
+      'box-shadow': '0 0 0 2px rgba(59, 130, 246, 0.3)'
+    },
+    'gantt-elastic__context-menu': {
+      'position': 'fixed',
+      'background': 'white',
+      'border': '1px solid #e5e7eb',
+      'border-radius': '6px',
+      'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+      'z-index': '1000',
+      'min-width': '150px',
+      'padding': '4px 0',
+      'font-family': 'system-ui, -apple-system, sans-serif'
+    },
+    'gantt-elastic__context-menu-item': {
+      'padding': '8px 16px',
+      'cursor': 'pointer',
+      'font-size': '14px',
+      'color': '#374151',
+      'transition': 'background-color 0.2s',
+      'user-select': 'none'
+    },
+    'gantt-elastic__context-menu-item:hover': {
+      'background-color': '#f3f4f6'
+    },
+    'gantt-elastic__date-tooltip': {
+      'position': 'fixed',
+      'background': 'rgba(0, 0, 0, 0.8)',
+      'color': 'white',
+      'padding': '4px 8px',
+      'border-radius': '4px',
+      'font-size': '12px',
+      'font-family': 'system-ui, -apple-system, sans-serif',
+      'pointer-events': 'none',
+      'z-index': '10000',
+      'white-space': 'nowrap',
+      'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.2)'
+    },
     'chart-row-text-content--text': {},
     'chart-row-text-content--html': {},
     'chart-row-wrapper': {},
@@ -10056,6 +11424,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();
@@ -10074,6 +11451,20 @@ const GanttElastic = {
         }
       });
     },
+    /**
+     * Handle task updated event from dragging
+     *
+     * @param {Object} updatedTask - Updated task data
+     */
+    handleTaskUpdated(updatedTask) {
+      // Emit event to parent component
+      console.log('Task updated -- GanttElastic:');
+      this.$emit('task-updated', updatedTask);
+      this.$emit('gantt-task-updated', updatedTask);
+
+      // Also emit to root for plugin usage
+      this.$root.$emit('gantt-task-updated', updatedTask);
+    },
     /**
      * Calculate height of scrollbar in current browser
      *
@@ -10426,7 +11817,18 @@ const GanttElastic = {
      * @returns {number}
      */
     getHeight(visibleTasks, outer = false) {
-      let height = visibleTasks.length * (this.state.options.row.height + this.state.options.chart.grid.horizontal.gap * 2) + this.state.options.calendar.height + this.state.options.calendar.strokeWidth + this.state.options.calendar.gap;
+      let height;
+
+      // If we have tasks, use their actual height for full grid
+      if (visibleTasks.length > 0) {
+        height = visibleTasks.length * (this.state.options.row.height + this.state.options.chart.grid.horizontal.gap * 2) + this.state.options.calendar.height + this.state.options.calendar.strokeWidth + this.state.options.calendar.gap;
+      } else {
+        // If no tasks, use 70% of viewport height for empty state
+        const viewportHeight = window.innerHeight;
+        const headerHeight = this.state.options.calendar.height + this.state.options.calendar.gap;
+        const availableHeight = viewportHeight * 0.7 - headerHeight - 40; // 70% of viewport, 40px for padding/margins
+        height = Math.max(availableHeight, 300); // Minimum 300px height
+      }
       if (outer) {
         height += this.state.options.scrollBarHeight;
       }
@@ -10449,7 +11851,20 @@ const GanttElastic = {
      * @returns {number}
      */
     getTasksHeight(visibleTasks) {
-      return visibleTasks.length * this.getTaskHeight();
+      const taskHeight = visibleTasks.length * this.getTaskHeight();
+
+      // If we have tasks, use their actual height for full grid
+      if (visibleTasks.length > 0) {
+        return taskHeight;
+      }
+
+      // If no tasks, use 70% of viewport height for empty state
+      const viewportHeight = window.innerHeight;
+      const headerHeight = this.state.options.calendar.height + this.state.options.calendar.gap;
+      const availableHeight = viewportHeight * 0.7 - headerHeight - 40; // 70% of viewport, 40px for padding/margins
+      const reducedHeight = Math.max(availableHeight, 300); // Minimum 300px height
+
+      return reducedHeight;
     },
     /**
      * Convert time (in milliseconds) to pixel offset inside chart
@@ -10756,15 +12171,15 @@ const GanttElastic = {
     getMaxWidthMultiplier(stepDuration, stepCount) {
       const clientWidth = this.state.options.clientWidth;
 
-      // Base multipliers for different screen sizes
+      // Base multipliers for different screen sizes (reduced for better balance)
       const baseMultipliers = {
-        mobile: 2,
-        // 2x viewport width on mobile
-        tablet: 2.5,
-        // 2.5x viewport width on tablet
-        desktopSmall: 3,
-        // 3x viewport width on small desktop
-        desktopBig: 4 // 4x viewport width on big desktop
+        mobile: 1.5,
+        // 1.5x viewport width on mobile
+        tablet: 1.8,
+        // 1.8x viewport width on tablet
+        desktopSmall: 2.2,
+        // 2.2x viewport width on small desktop
+        desktopBig: 2.5 // 2.5x viewport width on big desktop
       };
 
       // Determine screen size
@@ -10791,7 +12206,7 @@ const GanttElastic = {
       // If we have more data than minimum visibility, allow more width
       if (stepCount > minVisibilitySteps[stepDuration]) {
         const dataRatio = stepCount / minVisibilitySteps[stepDuration];
-        multiplier = Math.min(multiplier * (1 + dataRatio * 0.5), 6); // Max 6x viewport width
+        multiplier = Math.min(multiplier * (1 + dataRatio * 0.3), 3); // Max 3x viewport width
       }
       return multiplier;
     },
@@ -10892,7 +12307,7 @@ const GanttElastic = {
       const maxWidth = this.state.options.clientWidth * maxWidthMultiplier;
 
       // Ensure minimum width for scrolling when we have minimum visibility requirements
-      const minWidthForScrolling = this.state.options.clientWidth * 1.2; // 20% more than viewport
+      const minWidthForScrolling = this.state.options.clientWidth * 1.1; // 10% more than viewport
       const finalWidth = Math.max(calculatedWidth, minWidthForScrolling);
       if (finalWidth > maxWidth) {
         // Only limit width if it's truly excessive
@@ -11182,6 +12597,29 @@ const GanttElastic = {
         width: 0
       }).width;
     },
+    /**
+     * Recalculate height based on current tasks and viewport
+     */
+    recalculateHeight() {
+      const visibleTasks = this.state.tasks.filter(task => this.isTaskVisible(task));
+      if (visibleTasks.length > 0) {
+        // Use full task height for complete grid
+        this.state.options.rowsHeight = this.getTasksHeight(visibleTasks);
+        this.state.options.height = this.getHeight(visibleTasks);
+        this.state.options.allVisibleTasksHeight = this.getTasksHeight(visibleTasks);
+        this.state.options.outerHeight = this.getHeight(visibleTasks, true);
+      } else {
+        // Use reduced viewport height for empty state
+        const viewportHeight = window.innerHeight;
+        const headerHeight = this.state.options.calendar.height + this.state.options.calendar.gap;
+        const availableHeight = viewportHeight * 0.7 - headerHeight - 40;
+        const reducedHeight = Math.max(availableHeight, 300);
+        this.state.options.rowsHeight = reducedHeight;
+        this.state.options.height = reducedHeight + this.state.options.calendar.height + this.state.options.calendar.gap;
+        this.state.options.allVisibleTasksHeight = reducedHeight;
+        this.state.options.outerHeight = this.state.options.height + this.state.options.scrollBarHeight;
+      }
+    },
     /**
      * Global resize event (from window.addEventListener)
      */
@@ -11190,6 +12628,15 @@ const GanttElastic = {
         return;
       }
       this.state.options.clientWidth = this.$el.clientWidth;
+
+      // Only set height if no tasks are present (let visibleTasks computed property handle height when tasks exist)
+      if (this.state.tasks.length === 0) {
+        // Set height to 70% of viewport height for better balance when no tasks
+        const viewportHeight = window.innerHeight;
+        const headerHeight = this.state.options.calendar.height + this.state.options.calendar.gap;
+        const availableHeight = viewportHeight * 0.7 - headerHeight - 40; // 70% of viewport, 40px for padding/margins
+        this.state.options.height = Math.max(availableHeight, 300); // Minimum 300px height
+      }
       if (this.state.options.taskList.widthFromPercentage > this.state.options.clientWidth / 100 * this.state.options.taskList.widthThreshold) {
         const diff = this.state.options.taskList.widthFromPercentage - this.state.options.clientWidth / 100 * this.state.options.taskList.widthThreshold;
         let diffPercent = 100 - diff / this.state.options.taskList.widthFromPercentage * 100;
@@ -11212,6 +12659,9 @@ const GanttElastic = {
       this.computeCalendarWidths();
       this.$emit('calendar-recalculate');
       this.syncScrollTop();
+
+      // Recalculate height after resize
+      this.recalculateHeight();
     }
   },
   computed: {
@@ -11222,16 +12672,17 @@ const GanttElastic = {
      */
     visibleTasks() {
       const visibleTasks = this.state.tasks.filter(task => this.isTaskVisible(task));
-      const maxRows = visibleTasks.slice(0, this.state.options.maxRows);
-      this.state.options.rowsHeight = this.getTasksHeight(maxRows);
+
+      // Use full visible tasks for height calculations to show complete grid
+      this.state.options.rowsHeight = this.getTasksHeight(visibleTasks);
       let heightCompensation = 0;
       if (this.state.options.maxHeight && this.state.options.rowsHeight > this.state.options.maxHeight) {
         heightCompensation = this.state.options.rowsHeight - this.state.options.maxHeight;
         this.state.options.rowsHeight = this.state.options.maxHeight;
       }
-      this.state.options.height = this.getHeight(maxRows) - heightCompensation;
+      this.state.options.height = this.getHeight(visibleTasks) - heightCompensation;
       this.state.options.allVisibleTasksHeight = this.getTasksHeight(visibleTasks);
-      this.state.options.outerHeight = this.getHeight(maxRows, true) - heightCompensation;
+      this.state.options.outerHeight = this.getHeight(visibleTasks, true) - heightCompensation;
       let len = visibleTasks.length;
       for (let index = 0; index < len; index++) {
         let task = visibleTasks[index];
@@ -11282,6 +12733,10 @@ const GanttElastic = {
       if (notEqual) {
         this.setup('tasks');
       }
+      // Recalculate height when tasks change
+      this.$nextTick(() => {
+        this.recalculateHeight();
+      });
     }, {
       deep: true
     });
@@ -11331,15 +12786,59 @@ const GanttElastic = {
    */
   mounted() {
     this.state.options.clientWidth = this.$el.clientWidth;
+
+    // Set initial height based on whether tasks exist
+    if (this.state.tasks.length === 0) {
+      const viewportHeight = window.innerHeight;
+      const headerHeight = this.state.options.calendar.height + this.state.options.calendar.gap;
+      const availableHeight = viewportHeight * 0.7 - headerHeight - 40;
+      this.state.options.height = Math.max(availableHeight, 300);
+    }
     this.state.resizeObserver = new ResizeObserver_es((entries, observer) => {
       this.globalOnResize();
     });
     this.state.resizeObserver.observe(this.$el.parentNode);
+
+    // Add window resize listener for full viewport responsiveness
+    window.addEventListener('resize', this.globalOnResize);
     this.globalOnResize();
+    this.recalculateHeight();
     this.$emit('ready', this);
     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)
@@ -11360,6 +12859,7 @@ const GanttElastic = {
    */
   beforeDestroy() {
     this.state.resizeObserver.unobserve(this.$el.parentNode);
+    window.removeEventListener('resize', this.globalOnResize);
     this.state.unwatchTasks();
     this.state.unwatchOptions();
     this.state.unwatchStyle();
@@ -11378,10 +12878,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-55.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-55.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-55.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/GanttElastic.vue?vue&type=style&index=0&id=2767341e&prod&lang=css
+;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-55.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-55.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-55.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=2767341e&prod&lang=css
+;// ./src/GanttElastic.vue?vue&type=style&index=0&id=0a0b0d9f&prod&lang=css
 
 ;// ./src/GanttElastic.vue
 
@@ -11394,8 +12894,8 @@ const GanttElastic = {
 
 var GanttElastic_component = normalizeComponent(
   src_GanttElasticvue_type_script_lang_js,
-  GanttElasticvue_type_template_id_2767341e_render,
-  GanttElasticvue_type_template_id_2767341e_staticRenderFns,
+  GanttElasticvue_type_template_id_0a0b0d9f_render,
+  GanttElasticvue_type_template_id_0a0b0d9f_staticRenderFns,
   false,
   null,
   null,