gantt-task-react - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/components/Bar/bar.d.ts

 import React from "react";
 import { Task } from "../../types/public-types";
 import { BarTask } from "../../types/bar-task";
-import { BarAction } from "../Gantt/gantt-content";
+import { GanttContentMoveAction } from "../Gantt/gantt-content";
 export declare type BarProps = {
@@ -11,5 +11,5 @@ task: BarTask;
     isDateChangeable: boolean;
-    handleMouseEvents: (event: React.MouseEvent<SVGPolygonElement, MouseEvent> | React.MouseEvent<SVGGElement, MouseEvent> | React.MouseEvent<SVGRectElement, MouseEvent>, eventType: BarAction, task: BarTask) => void;
-    handleButtonSVGEvents: (event: React.KeyboardEvent<SVGGElement>, task: BarTask) => void;
+    isDelete: boolean;
+    onEventStart: (event: React.MouseEvent | React.KeyboardEvent, action: GanttContentMoveAction, selectedTask: BarTask) => any;
 };
 export declare const Bar: React.FC<BarProps>;

dist/components/Gantt/gantt-content.d.ts

 import React from "react";
 import { Task, EventOption } from "../../types/public-types";
-export interface GanttTask extends Task {
-    x1: number;
-    x2: number;
-    y: number;
-    width: number;
-    height: number;
-}
+import { BarTask } from "../../types/bar-task";
+import { BarMoveAction } from "../../helpers/bar-helper";
+export declare type GanttContentMoveAction = "mouseenter" | "mouseleave" | "delete" | BarMoveAction;
+export declare type BarEvent = {
+    selectedTask?: BarTask;
+    action: GanttContentMoveAction;
+};
 export declare type GanttContentProps = {
@@ -23,4 +23,4 @@ tasks: Task[];
     handleWidth: number;
-    svg: React.MutableRefObject<SVGSVGElement | null>;
     timeStep: number;
+    svg: React.RefObject<SVGSVGElement>;
     arrowColor: string;
@@ -32,3 +32,2 @@ arrowIndent: number;
 } & EventOption;
-export declare type BarAction = "progress" | "end" | "start" | "move" | "mouseenter" | "mouseleave" | "";
 export declare const GanttContent: React.FC<GanttContentProps>;

dist/helpers/bar-helper.d.ts

@@ -15,1 +15,9 @@ import { Task } from "../types/public-types";
 export declare const dateByX: (x: number, taskX: number, taskDate: Date, xStep: number, timeStep: number) => Date;
+export declare type BarMoveAction = "progress" | "end" | "start" | "move" | "";
+/**
+ * Method handles event in real time(mousemove) and on finish(mouseup)
+ */
+export declare const handleTaskBySVGMouseEvent: (svgX: number, action: BarMoveAction, selectedTask: BarTask, xStep: number, timeStep: number, initEventX1Delta: number) => {
+    isChanged: boolean;
+    changedTask: BarTask;
+};

dist/index.js

@@ -510,177 +510,2 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-// A type of promise-like that resolves synchronously and supports only one observer
-const _Pact = /*#__PURE__*/(function() {
-	function _Pact() {}
-	_Pact.prototype.then = function(onFulfilled, onRejected) {
-		const result = new _Pact();
-		const state = this.s;
-		if (state) {
-			const callback = state & 1 ? onFulfilled : onRejected;
-			if (callback) {
-				try {
-					_settle(result, 1, callback(this.v));
-				} catch (e) {
-					_settle(result, 2, e);
-				}
-				return result;
-			} else {
-				return this;
-			}
-		}
-		this.o = function(_this) {
-			try {
-				const value = _this.v;
-				if (_this.s & 1) {
-					_settle(result, 1, onFulfilled ? onFulfilled(value) : value);
-				} else if (onRejected) {
-					_settle(result, 1, onRejected(value));
-				} else {
-					_settle(result, 2, value);
-				}
-			} catch (e) {
-				_settle(result, 2, e);
-			}
-		};
-		return result;
-	};
-	return _Pact;
-})();
-
-// Settles a pact synchronously
-function _settle(pact, state, value) {
-	if (!pact.s) {
-		if (value instanceof _Pact) {
-			if (value.s) {
-				if (state & 1) {
-					state = value.s;
-				}
-				value = value.v;
-			} else {
-				value.o = _settle.bind(null, pact, state);
-				return;
-			}
-		}
-		if (value && value.then) {
-			value.then(_settle.bind(null, pact, state), _settle.bind(null, pact, 2));
-			return;
-		}
-		pact.s = state;
-		pact.v = value;
-		const observer = pact.o;
-		if (observer) {
-			observer(pact);
-		}
-	}
-}
-
-const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
-
-const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
-
-// Asynchronously implement a switch statement
-function _switch(discriminant, cases) {
-	var dispatchIndex = -1;
-	var awaitBody;
-	outer: {
-		for (var i = 0; i < cases.length; i++) {
-			var test = cases[i][0];
-			if (test) {
-				var testValue = test();
-				if (testValue && testValue.then) {
-					break outer;
-				}
-				if (testValue === discriminant) {
-					dispatchIndex = i;
-					break;
-				}
-			} else {
-				// Found the default case, set it as the pending dispatch case
-				dispatchIndex = i;
-			}
-		}
-		if (dispatchIndex !== -1) {
-			do {
-				var body = cases[dispatchIndex][1];
-				while (!body) {
-					dispatchIndex++;
-					body = cases[dispatchIndex][1];
-				}
-				var result = body();
-				if (result && result.then) {
-					awaitBody = true;
-					break outer;
-				}
-				var fallthroughCheck = cases[dispatchIndex][2];
-				dispatchIndex++;
-			} while (fallthroughCheck && !fallthroughCheck());
-			return result;
-		}
-	}
-	const pact = new _Pact();
-	const reject = _settle.bind(null, pact, 2);
-	(awaitBody ? result.then(_resumeAfterBody) : testValue.then(_resumeAfterTest)).then(void 0, reject);
-	return pact;
-	function _resumeAfterTest(value) {
-		for (;;) {
-			if (value === discriminant) {
-				dispatchIndex = i;
-				break;
-			}
-			if (++i === cases.length) {
-				if (dispatchIndex !== -1) {
-					break;
-				} else {
-					_settle(pact, 1, result);
-					return;
-				}
-			}
-			test = cases[i][0];
-			if (test) {
-				value = test();
-				if (value && value.then) {
-					value.then(_resumeAfterTest).then(void 0, reject);
-					return;
-				}
-			} else {
-				dispatchIndex = i;
-			}
-		}
-		do {
-			var body = cases[dispatchIndex][1];
-			while (!body) {
-				dispatchIndex++;
-				body = cases[dispatchIndex][1];
-			}
-			var result = body();
-			if (result && result.then) {
-				result.then(_resumeAfterBody).then(void 0, reject);
-				return;
-			}
-			var fallthroughCheck = cases[dispatchIndex][2];
-			dispatchIndex++;
-		} while (fallthroughCheck && !fallthroughCheck());
-		_settle(pact, 1, result);
-	}
-	function _resumeAfterBody(result) {
-		for (;;) {
-			var fallthroughCheck = cases[dispatchIndex][2];
-			if (!fallthroughCheck || fallthroughCheck()) {
-				break;
-			}
-			dispatchIndex++;
-			var body = cases[dispatchIndex][1];
-			while (!body) {
-				dispatchIndex++;
-				body = cases[dispatchIndex][1];
-			}
-			result = body();
-			if (result && result.then) {
-				result.then(_resumeAfterBody).then(void 0, reject);
-				return;
-			}
-		}
-		_settle(pact, 1, result);
-	}
-}
-
 var styles$2 = {"barWrapper":"_nceC7","barHandle":"_1C4hH","barLabel":"_1Azmc","barLabelOutside":"_1i9jR","barBackground":"_AiPgJ"};
@@ -880,3 +705,64 @@
 };
+var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta) {
+  var changedTask = _extends({}, selectedTask);
 
+  var isChanged = false;
+
+  switch (action) {
+    case "progress":
+      changedTask.progress = progressByX(svgX, selectedTask);
+      isChanged = changedTask.progress !== selectedTask.progress;
+      break;
+
+    case "start":
+      {
+        var newX1 = startByX(svgX, xStep, selectedTask);
+        changedTask.x1 = newX1;
+        isChanged = changedTask.x1 !== selectedTask.x1;
+
+        if (isChanged) {
+          changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+        }
+
+        break;
+      }
+
+    case "end":
+      {
+        var newX2 = endByX(svgX, xStep, selectedTask);
+        changedTask.x2 = newX2;
+        isChanged = changedTask.x2 !== selectedTask.x2;
+
+        if (isChanged) {
+          changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+        }
+
+        break;
+      }
+
+    case "move":
+      {
+        var _moveByX = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
+            newMoveX1 = _moveByX[0],
+            newMoveX2 = _moveByX[1];
+
+        isChanged = newMoveX1 !== selectedTask.x1;
+
+        if (isChanged) {
+          changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+          changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+          changedTask.x1 = newMoveX1;
+          changedTask.x2 = newMoveX2;
+        }
+
+        break;
+      }
+  }
+
+  return {
+    isChanged: isChanged,
+    changedTask: changedTask
+  };
+};
+
 var Bar = function Bar(_ref) {
@@ -888,4 +774,4 @@ var task = _ref.task,
       isDateChangeable = _ref.isDateChangeable,
-      handleMouseEvents = _ref.handleMouseEvents,
-      handleButtonSVGEvents = _ref.handleButtonSVGEvents;
+      onEventStart = _ref.onEventStart,
+      isDelete = _ref.isDelete;
 
@@ -905,9 +791,15 @@ var _useState = React.useState(false),
     onKeyDown: function onKeyDown(e) {
-      handleButtonSVGEvents(e, task);
+      switch (e.key) {
+        case "Delete":
+          {
+            if (isDelete) onEventStart(e, "delete", task);
+            break;
+          }
+      }
     },
     onMouseEnter: function onMouseEnter(e) {
-      handleMouseEvents(e, "mouseenter", task);
+      onEventStart(e, "mouseenter", task);
     },
     onMouseLeave: function onMouseLeave(e) {
-      handleMouseEvents(e, "mouseleave", task);
+      onEventStart(e, "mouseleave", task);
     },
@@ -933,3 +825,3 @@ onFocus: function onFocus() {
     onMouseDown: function onMouseDown(e) {
-      isDateChangeable && handleMouseEvents(e, "move", task);
+      isDateChangeable && onEventStart(e, "move", task);
     }
@@ -945,3 +837,3 @@ }), React__default.createElement("g", {
     onMouseDown: function onMouseDown(e) {
-      handleMouseEvents(e, "start", task);
+      onEventStart(e, "start", task);
     }
@@ -955,3 +847,3 @@ }), React__default.createElement(BarDateHandle, {
     onMouseDown: function onMouseDown(e) {
-      handleMouseEvents(e, "end", task);
+      onEventStart(e, "end", task);
     }
@@ -961,3 +853,3 @@ })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
     onMouseDown: function onMouseDown(e) {
-      handleMouseEvents(e, "progress", task);
+      onEventStart(e, "progress", task);
     }
@@ -1044,3 +936,9 @@ })));
 
+function isKeyboardEvent(event) {
+  return event.key !== undefined;
+}
+
 var GanttContent = function GanttContent(_ref) {
+  var _svg$current;
+
   var tasks = _ref.tasks,
@@ -1059,3 +957,2 @@ rowHeight = _ref.rowHeight,
       arrowColor = _ref.arrowColor,
-      svg = _ref.svg,
       timeStep = _ref.timeStep,
@@ -1065,2 +962,3 @@ fontFamily = _ref.fontFamily,
       arrowIndent = _ref.arrowIndent,
+      svg = _ref.svg,
       onDateChange = _ref.onDateChange,
@@ -1071,6 +969,6 @@ onProgressChange = _ref.onProgressChange,
       getTooltipContent = _ref.getTooltipContent;
+  var point = (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
 
   var _useState = React.useState({
-    action: "",
-    selectedTask: null
+    action: ""
   }),
@@ -1080,17 +978,17 @@ barEvent = _useState[0],
 
-  var _useState2 = React.useState(false),
-      isSVGListen = _useState2[0],
-      setIsSVGListen = _useState2[1];
+  var _useState2 = React.useState([]),
+      barTasks = _useState2[0],
+      setBarTasks = _useState2[1];
 
-  var _useState3 = React.useState([]),
-      barTasks = _useState3[0],
-      setBarTasks = _useState3[1];
+  var _useState3 = React.useState(0),
+      xStep = _useState3[0],
+      setXStep = _useState3[1];
 
   var _useState4 = React.useState(0),
-      xStep = _useState4[0],
-      setXStep = _useState4[1];
+      initEventX1Delta = _useState4[0],
+      setInitEventX1Delta = _useState4[1];
 
-  var _useState5 = React.useState(0),
-      initEventX1Delta = _useState5[0],
-      setInitEventX1Delta = _useState5[1];
+  var _useState5 = React.useState(false),
+      isMoving = _useState5[0],
+      setIsMoving = _useState5[1];
 
@@ -1104,3 +1002,3 @@ React.useEffect(function () {
     }
-  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, timeStep, xStep]);
+  }, [columnWidth, dates, timeStep, xStep]);
   React.useEffect(function () {
@@ -1110,139 +1008,69 @@ var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
     setBarTasks(convertToBarTasks(tasks, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
-  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, timeStep, barFill, handleWidth, headerHeight]);
-  React.useEffect(function () {
-    var handleMouseSVGChangeEventsSubscribe = function handleMouseSVGChangeEventsSubscribe(event) {
-      try {
-        var _interrupt2 = false;
-        if (!barEvent.selectedTask || !barEvent.action || !svg || !svg.current) return Promise.resolve();
-        var selectedTask = barEvent.selectedTask;
+  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, barFill, handleWidth, headerHeight, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor]);
 
-        var changedTask = _extends({}, selectedTask);
+  var handleBarEventStart = function handleBarEventStart(event, action, selectedTask) {
+    if (isKeyboardEvent(event)) {
+      if (action === "delete") {
+        setBarTasks(barTasks.filter(function (t) {
+          var _barEvent$selectedTas;
 
-        var _temp2 = _switch(event.type, [[function () {
-          return "mousemove";
-        }, function () {
-          {
-            switch (barEvent.action) {
-              case "progress":
-                changedTask.progress = progressByX(event.offsetX, selectedTask);
-                _interrupt2 = true;
-                return;
+          return t.id !== ((_barEvent$selectedTas = barEvent.selectedTask) === null || _barEvent$selectedTas === void 0 ? void 0 : _barEvent$selectedTas.id);
+        }));
+      }
+    } else if (action === "mouseenter") {
+      if (!barEvent.action) {
+        setBarEvent({
+          action: action,
+          selectedTask: selectedTask
+        });
+      }
+    } else if (action === "mouseleave") {
+      if (barEvent.action === "mouseenter") {
+        setBarEvent({
+          action: ""
+        });
+      }
+    } else if (action === "move") {
+      var _svg$current$getScree;
 
-              case "start":
-                {
-                  var newX1 = startByX(event.offsetX, xStep, selectedTask);
-                  changedTask.x1 = newX1;
-                  changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
-                  _interrupt2 = true;
-                  return;
-                }
+      if (!svg.current || !point) return;
+      point.x = event.clientX;
+      var cursor = point.matrixTransform((_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
+      setInitEventX1Delta(cursor.x - selectedTask.x1);
+      setBarEvent({
+        action: action,
+        selectedTask: selectedTask
+      });
+    } else {
+      setBarEvent({
+        action: action,
+        selectedTask: selectedTask
+      });
+    }
+  };
 
-              case "end":
-                {
-                  var newX2 = endByX(event.offsetX, xStep, selectedTask);
-                  changedTask.x2 = newX2;
-                  changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
-                  _interrupt2 = true;
-                  return;
-                }
+  React.useEffect(function () {
+    var handleMouseMove = function handleMouseMove(event) {
+      try {
+        var _svg$current$getScree2;
 
-              case "move":
-                {
-                  var _moveByX = moveByX(event.offsetX - initEventX1Delta, xStep, selectedTask),
-                      newMoveX1 = _moveByX[0],
-                      newMoveX2 = _moveByX[1];
+        if (!barEvent.selectedTask || !point || !svg.current) return Promise.resolve();
+        event.preventDefault();
+        point.x = event.clientX;
+        var cursor = point.matrixTransform((_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
 
-                  changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
-                  changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
-                  changedTask.x1 = newMoveX1;
-                  changedTask.x2 = newMoveX2;
-                  _interrupt2 = true;
-                  return;
-                }
-            }
+        var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, barEvent.action, barEvent.selectedTask, xStep, timeStep, initEventX1Delta),
+            isChanged = _handleTaskBySVGMouse.isChanged,
+            changedTask = _handleTaskBySVGMouse.changedTask;
 
-            setBarTasks(barTasks.map(function (t) {
-              return t.id === changedTask.id ? changedTask : t;
-            }));
-            setBarEvent(_extends({}, barEvent, {
-              selectedTask: changedTask
-            }));
-            _interrupt2 = true;
-            return;
-          }
-        }], [function () {
-          return "mouseup";
-        }, function () {
-          {
-            var eventForExecution = function eventForExecution() {};
+        if (isChanged) {
+          setBarTasks(barTasks.map(function (t) {
+            return t.id === changedTask.id ? changedTask : t;
+          }));
+          setBarEvent(_extends({}, barEvent, {
+            selectedTask: changedTask
+          }));
+        }
 
-            switch (barEvent.action) {
-              case "progress":
-                changedTask.progress = progressByX(event.offsetX, selectedTask);
-
-                if (onProgressChange) {
-                  eventForExecution = onProgressChange;
-                }
-
-                _interrupt2 = true;
-                return;
-
-              case "start":
-                {
-                  var newX1 = startByX(event.offsetX, xStep, selectedTask);
-                  changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
-
-                  if (onDateChange && newX1 !== selectedTask.x1) {
-                    eventForExecution = onDateChange;
-                  }
-
-                  _interrupt2 = true;
-                  return;
-                }
-
-              case "end":
-                {
-                  var newX2 = endByX(event.offsetX, xStep, selectedTask);
-                  changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
-
-                  if (onDateChange && newX2 !== selectedTask.x2) {
-                    eventForExecution = onDateChange;
-                  }
-
-                  _interrupt2 = true;
-                  return;
-                }
-
-              case "move":
-                {
-                  var _moveByX2 = moveByX(event.offsetX - initEventX1Delta, xStep, selectedTask),
-                      newMoveX1 = _moveByX2[0],
-                      newMoveX2 = _moveByX2[1];
-
-                  changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
-                  changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
-
-                  if (onDateChange && newMoveX1 !== selectedTask.x1 && newMoveX2 !== selectedTask.x2) {
-                    eventForExecution = onDateChange;
-                  }
-
-                  _interrupt2 = true;
-                  return;
-                }
-            }
-
-            setBarEvent({
-              action: "",
-              selectedTask: null
-            });
-            setIsSVGListen(false);
-            svg.current.removeEventListener("mousemove", handleMouseSVGChangeEventsSubscribe);
-            svg.current.removeEventListener("mouseup", handleMouseSVGChangeEventsSubscribe);
-            return Promise.resolve(eventForExecution(changedTask)).then(function () {
-              _interrupt2 = true;
-            });
-          }
-        }]]);
-
-        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+        return Promise.resolve();
       } catch (e) {
@@ -1253,61 +1081,40 @@ return Promise.reject(e);
 
-    if (barEvent.selectedTask && barEvent.action && !isSVGListen && svg && svg.current) {
-      setIsSVGListen(true);
-      svg.current.addEventListener("mousemove", handleMouseSVGChangeEventsSubscribe);
-      svg.current.addEventListener("mouseup", handleMouseSVGChangeEventsSubscribe);
-    }
-  }, [barEvent, isSVGListen, xStep, svg, initEventX1Delta, barTasks, onProgressChange, timeStep, onDateChange]);
+    var handleMouseUp = function handleMouseUp(event) {
+      try {
+        var _svg$current$getScree3;
 
-  var handleMouseEvents = function handleMouseEvents(event, eventType, task) {
-    switch (event.type) {
-      case "mousedown":
-        setBarEvent(_extends({}, barEvent, {
-          selectedTask: task,
-          action: eventType
-        }));
-        setInitEventX1Delta(event.nativeEvent.offsetX - task.x1);
-        event.stopPropagation();
-        break;
+        var selectedTask = barEvent.selectedTask,
+            action = barEvent.action;
+        if (!selectedTask || !point || !svg.current) return Promise.resolve();
+        event.preventDefault();
+        point.x = event.clientX;
+        var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
 
-      case "mouseleave":
-        console.log("mouseleave");
-        if (!barEvent.action) setBarEvent(_extends({}, barEvent, {
-          selectedTask: null,
-          action: ""
-        }));
-        break;
+        var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, selectedTask, xStep, timeStep, initEventX1Delta),
+            changedTask = _handleTaskBySVGMouse2.changedTask;
 
-      case "mouseenter":
-        if (!barEvent.selectedTask) {
-          setBarEvent(_extends({}, barEvent, {
-            selectedTask: task,
-            action: ""
-          }));
+        if ((action === "move" || action === "end" || action === "start") && onDateChange) {
+          onDateChange(changedTask);
+        } else if (onProgressChange) {
+          onProgressChange(changedTask);
         }
 
-        break;
-    }
-  };
-
-  var handleButtonSVGEvents = function handleButtonSVGEvents(event, task) {
-    try {
-      if (task.isDisabled) return Promise.resolve();
-
-      switch (event.key) {
-        case "Delete":
-          {
-            if (onTaskDelete) {
-              onTaskDelete(task);
-            }
-
-            break;
-          }
+        svg.current.removeEventListener("mousemove", handleMouseMove);
+        svg.current.removeEventListener("mouseup", handleMouseUp);
+        setBarEvent({
+          action: ""
+        });
+        setIsMoving(false);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
       }
+    };
 
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
+    if (!isMoving && (barEvent.action === "move" || barEvent.action === "end" || barEvent.action === "start" || barEvent.action === "progress") && svg.current) {
+      svg.current.addEventListener("mousemove", handleMouseMove);
+      svg.current.addEventListener("mouseup", handleMouseUp);
+      setIsMoving(true);
     }
-  };
-
+  }, [barTasks, barEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving]);
   return React__default.createElement("g", {
@@ -1322,3 +1129,3 @@ className: "content"
       return React__default.createElement(Arrow, {
-        key: "Arrow from " + task.id + " to " + barTasks[child].id,
+        key: "Arrow from " + task.id + " to " + tasks[child].id,
         taskFrom: task,
@@ -1341,4 +1148,4 @@ taskTo: barTasks[child],
       isDateChangeable: !!onDateChange && !task.isDisabled,
-      handleMouseEvents: handleMouseEvents,
-      handleButtonSVGEvents: handleButtonSVGEvents,
+      isDelete: !!onTaskDelete && !task.isDisabled,
+      onEventStart: handleBarEventStart,
       key: task.id
@@ -1348,4 +1155,4 @@ });
     className: "toolTip"
-  }, barEvent.selectedTask && barEvent.action !== "end" && barEvent.action !== "start" && React__default.createElement(Tooltip, {
-    x: barEvent.selectedTask.x2 + columnWidth + arrowIndent,
+  }, barEvent.selectedTask && React__default.createElement(Tooltip, {
+    x: barEvent.selectedTask.x2 + arrowIndent + arrowIndent * 0.5,
     y: barEvent.selectedTask.y + rowHeight,
@@ -1442,6 +1249,6 @@ task: barEvent.selectedTask,
     arrowColor: arrowColor,
-    svg: svg,
     fontFamily: fontFamily,
     fontSize: fontSize,
     arrowIndent: arrowIndent,
+    svg: svg,
     onDateChange: onDateChange,
@@ -1457,4 +1264,4 @@ onProgressChange: onProgressChange,
     height: headerHeight + rowHeight * tasks.length,
-    ref: svg,
-    fontFamily: fontFamily
+    fontFamily: fontFamily,
+    ref: svg
   }, React__default.createElement(Grid, Object.assign({}, gridProps)), React__default.createElement(Calendar, Object.assign({}, calendarProps)), React__default.createElement(GanttContent, Object.assign({}, barProps)));
@@ -1461,0 +1268,0 @@ };

dist/index.modern.js

@@ -509,177 +509,2 @@ import React, { useRef, useState, useEffect } from 'react';
 
-// A type of promise-like that resolves synchronously and supports only one observer
-const _Pact = /*#__PURE__*/(function() {
-	function _Pact() {}
-	_Pact.prototype.then = function(onFulfilled, onRejected) {
-		const result = new _Pact();
-		const state = this.s;
-		if (state) {
-			const callback = state & 1 ? onFulfilled : onRejected;
-			if (callback) {
-				try {
-					_settle(result, 1, callback(this.v));
-				} catch (e) {
-					_settle(result, 2, e);
-				}
-				return result;
-			} else {
-				return this;
-			}
-		}
-		this.o = function(_this) {
-			try {
-				const value = _this.v;
-				if (_this.s & 1) {
-					_settle(result, 1, onFulfilled ? onFulfilled(value) : value);
-				} else if (onRejected) {
-					_settle(result, 1, onRejected(value));
-				} else {
-					_settle(result, 2, value);
-				}
-			} catch (e) {
-				_settle(result, 2, e);
-			}
-		};
-		return result;
-	};
-	return _Pact;
-})();
-
-// Settles a pact synchronously
-function _settle(pact, state, value) {
-	if (!pact.s) {
-		if (value instanceof _Pact) {
-			if (value.s) {
-				if (state & 1) {
-					state = value.s;
-				}
-				value = value.v;
-			} else {
-				value.o = _settle.bind(null, pact, state);
-				return;
-			}
-		}
-		if (value && value.then) {
-			value.then(_settle.bind(null, pact, state), _settle.bind(null, pact, 2));
-			return;
-		}
-		pact.s = state;
-		pact.v = value;
-		const observer = pact.o;
-		if (observer) {
-			observer(pact);
-		}
-	}
-}
-
-const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
-
-const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
-
-// Asynchronously implement a switch statement
-function _switch(discriminant, cases) {
-	var dispatchIndex = -1;
-	var awaitBody;
-	outer: {
-		for (var i = 0; i < cases.length; i++) {
-			var test = cases[i][0];
-			if (test) {
-				var testValue = test();
-				if (testValue && testValue.then) {
-					break outer;
-				}
-				if (testValue === discriminant) {
-					dispatchIndex = i;
-					break;
-				}
-			} else {
-				// Found the default case, set it as the pending dispatch case
-				dispatchIndex = i;
-			}
-		}
-		if (dispatchIndex !== -1) {
-			do {
-				var body = cases[dispatchIndex][1];
-				while (!body) {
-					dispatchIndex++;
-					body = cases[dispatchIndex][1];
-				}
-				var result = body();
-				if (result && result.then) {
-					awaitBody = true;
-					break outer;
-				}
-				var fallthroughCheck = cases[dispatchIndex][2];
-				dispatchIndex++;
-			} while (fallthroughCheck && !fallthroughCheck());
-			return result;
-		}
-	}
-	const pact = new _Pact();
-	const reject = _settle.bind(null, pact, 2);
-	(awaitBody ? result.then(_resumeAfterBody) : testValue.then(_resumeAfterTest)).then(void 0, reject);
-	return pact;
-	function _resumeAfterTest(value) {
-		for (;;) {
-			if (value === discriminant) {
-				dispatchIndex = i;
-				break;
-			}
-			if (++i === cases.length) {
-				if (dispatchIndex !== -1) {
-					break;
-				} else {
-					_settle(pact, 1, result);
-					return;
-				}
-			}
-			test = cases[i][0];
-			if (test) {
-				value = test();
-				if (value && value.then) {
-					value.then(_resumeAfterTest).then(void 0, reject);
-					return;
-				}
-			} else {
-				dispatchIndex = i;
-			}
-		}
-		do {
-			var body = cases[dispatchIndex][1];
-			while (!body) {
-				dispatchIndex++;
-				body = cases[dispatchIndex][1];
-			}
-			var result = body();
-			if (result && result.then) {
-				result.then(_resumeAfterBody).then(void 0, reject);
-				return;
-			}
-			var fallthroughCheck = cases[dispatchIndex][2];
-			dispatchIndex++;
-		} while (fallthroughCheck && !fallthroughCheck());
-		_settle(pact, 1, result);
-	}
-	function _resumeAfterBody(result) {
-		for (;;) {
-			var fallthroughCheck = cases[dispatchIndex][2];
-			if (!fallthroughCheck || fallthroughCheck()) {
-				break;
-			}
-			dispatchIndex++;
-			var body = cases[dispatchIndex][1];
-			while (!body) {
-				dispatchIndex++;
-				body = cases[dispatchIndex][1];
-			}
-			result = body();
-			if (result && result.then) {
-				result.then(_resumeAfterBody).then(void 0, reject);
-				return;
-			}
-		}
-		_settle(pact, 1, result);
-	}
-}
-
 var styles$2 = {"barWrapper":"_nceC7","barHandle":"_1C4hH","barLabel":"_1Azmc","barLabelOutside":"_1i9jR","barBackground":"_AiPgJ"};
@@ -879,3 +704,64 @@
 };
+var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta) {
+  var changedTask = _extends({}, selectedTask);
 
+  var isChanged = false;
+
+  switch (action) {
+    case "progress":
+      changedTask.progress = progressByX(svgX, selectedTask);
+      isChanged = changedTask.progress !== selectedTask.progress;
+      break;
+
+    case "start":
+      {
+        var newX1 = startByX(svgX, xStep, selectedTask);
+        changedTask.x1 = newX1;
+        isChanged = changedTask.x1 !== selectedTask.x1;
+
+        if (isChanged) {
+          changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+        }
+
+        break;
+      }
+
+    case "end":
+      {
+        var newX2 = endByX(svgX, xStep, selectedTask);
+        changedTask.x2 = newX2;
+        isChanged = changedTask.x2 !== selectedTask.x2;
+
+        if (isChanged) {
+          changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+        }
+
+        break;
+      }
+
+    case "move":
+      {
+        var _moveByX = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
+            newMoveX1 = _moveByX[0],
+            newMoveX2 = _moveByX[1];
+
+        isChanged = newMoveX1 !== selectedTask.x1;
+
+        if (isChanged) {
+          changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+          changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+          changedTask.x1 = newMoveX1;
+          changedTask.x2 = newMoveX2;
+        }
+
+        break;
+      }
+  }
+
+  return {
+    isChanged: isChanged,
+    changedTask: changedTask
+  };
+};
+
 var Bar = function Bar(_ref) {
@@ -887,4 +773,4 @@ var task = _ref.task,
       isDateChangeable = _ref.isDateChangeable,
-      handleMouseEvents = _ref.handleMouseEvents,
-      handleButtonSVGEvents = _ref.handleButtonSVGEvents;
+      onEventStart = _ref.onEventStart,
+      isDelete = _ref.isDelete;
 
@@ -904,9 +790,15 @@ var _useState = useState(false),
     onKeyDown: function onKeyDown(e) {
-      handleButtonSVGEvents(e, task);
+      switch (e.key) {
+        case "Delete":
+          {
+            if (isDelete) onEventStart(e, "delete", task);
+            break;
+          }
+      }
     },
     onMouseEnter: function onMouseEnter(e) {
-      handleMouseEvents(e, "mouseenter", task);
+      onEventStart(e, "mouseenter", task);
     },
     onMouseLeave: function onMouseLeave(e) {
-      handleMouseEvents(e, "mouseleave", task);
+      onEventStart(e, "mouseleave", task);
     },
@@ -932,3 +824,3 @@ onFocus: function onFocus() {
     onMouseDown: function onMouseDown(e) {
-      isDateChangeable && handleMouseEvents(e, "move", task);
+      isDateChangeable && onEventStart(e, "move", task);
     }
@@ -944,3 +836,3 @@ }), React.createElement("g", {
     onMouseDown: function onMouseDown(e) {
-      handleMouseEvents(e, "start", task);
+      onEventStart(e, "start", task);
     }
@@ -954,3 +846,3 @@ }), React.createElement(BarDateHandle, {
     onMouseDown: function onMouseDown(e) {
-      handleMouseEvents(e, "end", task);
+      onEventStart(e, "end", task);
     }
@@ -960,3 +852,3 @@ })), isProgressChangeable && React.createElement(BarProgressHandle, {
     onMouseDown: function onMouseDown(e) {
-      handleMouseEvents(e, "progress", task);
+      onEventStart(e, "progress", task);
     }
@@ -1043,3 +935,9 @@ })));
 
+function isKeyboardEvent(event) {
+  return event.key !== undefined;
+}
+
 var GanttContent = function GanttContent(_ref) {
+  var _svg$current;
+
   var tasks = _ref.tasks,
@@ -1058,3 +956,2 @@ rowHeight = _ref.rowHeight,
       arrowColor = _ref.arrowColor,
-      svg = _ref.svg,
       timeStep = _ref.timeStep,
@@ -1064,2 +961,3 @@ fontFamily = _ref.fontFamily,
       arrowIndent = _ref.arrowIndent,
+      svg = _ref.svg,
       onDateChange = _ref.onDateChange,
@@ -1070,6 +968,6 @@ onProgressChange = _ref.onProgressChange,
       getTooltipContent = _ref.getTooltipContent;
+  var point = (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
 
   var _useState = useState({
-    action: "",
-    selectedTask: null
+    action: ""
   }),
@@ -1079,17 +977,17 @@ barEvent = _useState[0],
 
-  var _useState2 = useState(false),
-      isSVGListen = _useState2[0],
-      setIsSVGListen = _useState2[1];
+  var _useState2 = useState([]),
+      barTasks = _useState2[0],
+      setBarTasks = _useState2[1];
 
-  var _useState3 = useState([]),
-      barTasks = _useState3[0],
-      setBarTasks = _useState3[1];
+  var _useState3 = useState(0),
+      xStep = _useState3[0],
+      setXStep = _useState3[1];
 
   var _useState4 = useState(0),
-      xStep = _useState4[0],
-      setXStep = _useState4[1];
+      initEventX1Delta = _useState4[0],
+      setInitEventX1Delta = _useState4[1];
 
-  var _useState5 = useState(0),
-      initEventX1Delta = _useState5[0],
-      setInitEventX1Delta = _useState5[1];
+  var _useState5 = useState(false),
+      isMoving = _useState5[0],
+      setIsMoving = _useState5[1];
 
@@ -1103,3 +1001,3 @@ useEffect(function () {
     }
-  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, timeStep, xStep]);
+  }, [columnWidth, dates, timeStep, xStep]);
   useEffect(function () {
@@ -1109,139 +1007,69 @@ var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
     setBarTasks(convertToBarTasks(tasks, dates, dateDelta, columnWidth, rowHeight, taskHeight, headerHeight, barCornerRadius, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor));
-  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, timeStep, barFill, handleWidth, headerHeight]);
-  useEffect(function () {
-    var handleMouseSVGChangeEventsSubscribe = function handleMouseSVGChangeEventsSubscribe(event) {
-      try {
-        var _interrupt2 = false;
-        if (!barEvent.selectedTask || !barEvent.action || !svg || !svg.current) return Promise.resolve();
-        var selectedTask = barEvent.selectedTask;
+  }, [tasks, rowHeight, barCornerRadius, columnWidth, dates, barFill, handleWidth, headerHeight, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor]);
 
-        var changedTask = _extends({}, selectedTask);
+  var handleBarEventStart = function handleBarEventStart(event, action, selectedTask) {
+    if (isKeyboardEvent(event)) {
+      if (action === "delete") {
+        setBarTasks(barTasks.filter(function (t) {
+          var _barEvent$selectedTas;
 
-        var _temp2 = _switch(event.type, [[function () {
-          return "mousemove";
-        }, function () {
-          {
-            switch (barEvent.action) {
-              case "progress":
-                changedTask.progress = progressByX(event.offsetX, selectedTask);
-                _interrupt2 = true;
-                return;
+          return t.id !== ((_barEvent$selectedTas = barEvent.selectedTask) === null || _barEvent$selectedTas === void 0 ? void 0 : _barEvent$selectedTas.id);
+        }));
+      }
+    } else if (action === "mouseenter") {
+      if (!barEvent.action) {
+        setBarEvent({
+          action: action,
+          selectedTask: selectedTask
+        });
+      }
+    } else if (action === "mouseleave") {
+      if (barEvent.action === "mouseenter") {
+        setBarEvent({
+          action: ""
+        });
+      }
+    } else if (action === "move") {
+      var _svg$current$getScree;
 
-              case "start":
-                {
-                  var newX1 = startByX(event.offsetX, xStep, selectedTask);
-                  changedTask.x1 = newX1;
-                  changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
-                  _interrupt2 = true;
-                  return;
-                }
+      if (!svg.current || !point) return;
+      point.x = event.clientX;
+      var cursor = point.matrixTransform((_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
+      setInitEventX1Delta(cursor.x - selectedTask.x1);
+      setBarEvent({
+        action: action,
+        selectedTask: selectedTask
+      });
+    } else {
+      setBarEvent({
+        action: action,
+        selectedTask: selectedTask
+      });
+    }
+  };
 
-              case "end":
-                {
-                  var newX2 = endByX(event.offsetX, xStep, selectedTask);
-                  changedTask.x2 = newX2;
-                  changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
-                  _interrupt2 = true;
-                  return;
-                }
+  useEffect(function () {
+    var handleMouseMove = function handleMouseMove(event) {
+      try {
+        var _svg$current$getScree2;
 
-              case "move":
-                {
-                  var _moveByX = moveByX(event.offsetX - initEventX1Delta, xStep, selectedTask),
-                      newMoveX1 = _moveByX[0],
-                      newMoveX2 = _moveByX[1];
+        if (!barEvent.selectedTask || !point || !svg.current) return Promise.resolve();
+        event.preventDefault();
+        point.x = event.clientX;
+        var cursor = point.matrixTransform((_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
 
-                  changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
-                  changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
-                  changedTask.x1 = newMoveX1;
-                  changedTask.x2 = newMoveX2;
-                  _interrupt2 = true;
-                  return;
-                }
-            }
+        var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, barEvent.action, barEvent.selectedTask, xStep, timeStep, initEventX1Delta),
+            isChanged = _handleTaskBySVGMouse.isChanged,
+            changedTask = _handleTaskBySVGMouse.changedTask;
 
-            setBarTasks(barTasks.map(function (t) {
-              return t.id === changedTask.id ? changedTask : t;
-            }));
-            setBarEvent(_extends({}, barEvent, {
-              selectedTask: changedTask
-            }));
-            _interrupt2 = true;
-            return;
-          }
-        }], [function () {
-          return "mouseup";
-        }, function () {
-          {
-            var eventForExecution = function eventForExecution() {};
+        if (isChanged) {
+          setBarTasks(barTasks.map(function (t) {
+            return t.id === changedTask.id ? changedTask : t;
+          }));
+          setBarEvent(_extends({}, barEvent, {
+            selectedTask: changedTask
+          }));
+        }
 
-            switch (barEvent.action) {
-              case "progress":
-                changedTask.progress = progressByX(event.offsetX, selectedTask);
-
-                if (onProgressChange) {
-                  eventForExecution = onProgressChange;
-                }
-
-                _interrupt2 = true;
-                return;
-
-              case "start":
-                {
-                  var newX1 = startByX(event.offsetX, xStep, selectedTask);
-                  changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
-
-                  if (onDateChange && newX1 !== selectedTask.x1) {
-                    eventForExecution = onDateChange;
-                  }
-
-                  _interrupt2 = true;
-                  return;
-                }
-
-              case "end":
-                {
-                  var newX2 = endByX(event.offsetX, xStep, selectedTask);
-                  changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
-
-                  if (onDateChange && newX2 !== selectedTask.x2) {
-                    eventForExecution = onDateChange;
-                  }
-
-                  _interrupt2 = true;
-                  return;
-                }
-
-              case "move":
-                {
-                  var _moveByX2 = moveByX(event.offsetX - initEventX1Delta, xStep, selectedTask),
-                      newMoveX1 = _moveByX2[0],
-                      newMoveX2 = _moveByX2[1];
-
-                  changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
-                  changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
-
-                  if (onDateChange && newMoveX1 !== selectedTask.x1 && newMoveX2 !== selectedTask.x2) {
-                    eventForExecution = onDateChange;
-                  }
-
-                  _interrupt2 = true;
-                  return;
-                }
-            }
-
-            setBarEvent({
-              action: "",
-              selectedTask: null
-            });
-            setIsSVGListen(false);
-            svg.current.removeEventListener("mousemove", handleMouseSVGChangeEventsSubscribe);
-            svg.current.removeEventListener("mouseup", handleMouseSVGChangeEventsSubscribe);
-            return Promise.resolve(eventForExecution(changedTask)).then(function () {
-              _interrupt2 = true;
-            });
-          }
-        }]]);
-
-        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+        return Promise.resolve();
       } catch (e) {
@@ -1252,61 +1080,40 @@ return Promise.reject(e);
 
-    if (barEvent.selectedTask && barEvent.action && !isSVGListen && svg && svg.current) {
-      setIsSVGListen(true);
-      svg.current.addEventListener("mousemove", handleMouseSVGChangeEventsSubscribe);
-      svg.current.addEventListener("mouseup", handleMouseSVGChangeEventsSubscribe);
-    }
-  }, [barEvent, isSVGListen, xStep, svg, initEventX1Delta, barTasks, onProgressChange, timeStep, onDateChange]);
+    var handleMouseUp = function handleMouseUp(event) {
+      try {
+        var _svg$current$getScree3;
 
-  var handleMouseEvents = function handleMouseEvents(event, eventType, task) {
-    switch (event.type) {
-      case "mousedown":
-        setBarEvent(_extends({}, barEvent, {
-          selectedTask: task,
-          action: eventType
-        }));
-        setInitEventX1Delta(event.nativeEvent.offsetX - task.x1);
-        event.stopPropagation();
-        break;
+        var selectedTask = barEvent.selectedTask,
+            action = barEvent.action;
+        if (!selectedTask || !point || !svg.current) return Promise.resolve();
+        event.preventDefault();
+        point.x = event.clientX;
+        var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
 
-      case "mouseleave":
-        console.log("mouseleave");
-        if (!barEvent.action) setBarEvent(_extends({}, barEvent, {
-          selectedTask: null,
-          action: ""
-        }));
-        break;
+        var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, selectedTask, xStep, timeStep, initEventX1Delta),
+            changedTask = _handleTaskBySVGMouse2.changedTask;
 
-      case "mouseenter":
-        if (!barEvent.selectedTask) {
-          setBarEvent(_extends({}, barEvent, {
-            selectedTask: task,
-            action: ""
-          }));
+        if ((action === "move" || action === "end" || action === "start") && onDateChange) {
+          onDateChange(changedTask);
+        } else if (onProgressChange) {
+          onProgressChange(changedTask);
         }
 
-        break;
-    }
-  };
-
-  var handleButtonSVGEvents = function handleButtonSVGEvents(event, task) {
-    try {
-      if (task.isDisabled) return Promise.resolve();
-
-      switch (event.key) {
-        case "Delete":
-          {
-            if (onTaskDelete) {
-              onTaskDelete(task);
-            }
-
-            break;
-          }
+        svg.current.removeEventListener("mousemove", handleMouseMove);
+        svg.current.removeEventListener("mouseup", handleMouseUp);
+        setBarEvent({
+          action: ""
+        });
+        setIsMoving(false);
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
       }
+    };
 
-      return Promise.resolve();
-    } catch (e) {
-      return Promise.reject(e);
+    if (!isMoving && (barEvent.action === "move" || barEvent.action === "end" || barEvent.action === "start" || barEvent.action === "progress") && svg.current) {
+      svg.current.addEventListener("mousemove", handleMouseMove);
+      svg.current.addEventListener("mouseup", handleMouseUp);
+      setIsMoving(true);
     }
-  };
-
+  }, [barTasks, barEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving]);
   return React.createElement("g", {
@@ -1321,3 +1128,3 @@ className: "content"
       return React.createElement(Arrow, {
-        key: "Arrow from " + task.id + " to " + barTasks[child].id,
+        key: "Arrow from " + task.id + " to " + tasks[child].id,
         taskFrom: task,
@@ -1340,4 +1147,4 @@ taskTo: barTasks[child],
       isDateChangeable: !!onDateChange && !task.isDisabled,
-      handleMouseEvents: handleMouseEvents,
-      handleButtonSVGEvents: handleButtonSVGEvents,
+      isDelete: !!onTaskDelete && !task.isDisabled,
+      onEventStart: handleBarEventStart,
       key: task.id
@@ -1347,4 +1154,4 @@ });
     className: "toolTip"
-  }, barEvent.selectedTask && barEvent.action !== "end" && barEvent.action !== "start" && React.createElement(Tooltip, {
-    x: barEvent.selectedTask.x2 + columnWidth + arrowIndent,
+  }, barEvent.selectedTask && React.createElement(Tooltip, {
+    x: barEvent.selectedTask.x2 + arrowIndent + arrowIndent * 0.5,
     y: barEvent.selectedTask.y + rowHeight,
@@ -1441,6 +1248,6 @@ task: barEvent.selectedTask,
     arrowColor: arrowColor,
-    svg: svg,
     fontFamily: fontFamily,
     fontSize: fontSize,
     arrowIndent: arrowIndent,
+    svg: svg,
     onDateChange: onDateChange,
@@ -1456,4 +1263,4 @@ onProgressChange: onProgressChange,
     height: headerHeight + rowHeight * tasks.length,
-    ref: svg,
-    fontFamily: fontFamily
+    fontFamily: fontFamily,
+    ref: svg
   }, React.createElement(Grid, Object.assign({}, gridProps)), React.createElement(Calendar, Object.assign({}, calendarProps)), React.createElement(GanttContent, Object.assign({}, barProps)));
@@ -1460,0 +1267,0 @@ };

package.json

 {
   "name": "gantt-task-react",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Interactive Gantt Chart for React with TypeScript.",
@@ -5,0 +5,0 @@ "author": "MaTeMaTuK <[e-mail]>",

README.md

@@ -19,2 +19,4 @@ # gantt-task-react
 import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
+import "gantt-task-react/dist/index.css";
+
 let tasks: Task[] = [
@@ -21,0 +23,0 @@ {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

26

increased by4%

Number of lines in readme file

86

increased by2.38%

Worsened metrics

Total package byte prevSize

279021

decreased by-19.86%

Lines of code

2577

decreased by-12.29%

No dependency changes