Merge pull request #195 from melfore/189-selectarea-allow-negative-se…

…lection

[TimeLine] AreaSelect allowed negative selection

CHANGELOG.md

@@ -1,9 +1,8 @@
 # [1.31.0](https://github.com/melfore/konva-timeline/compare/v1.30.2...v1.31.0) (2024-02-13)
 
-
 ### Features
 
-* 🎸 [Task] new incopmlete color display, add pattern prop ([a1bdcf3](https://github.com/melfore/konva-timeline/commit/a1bdcf39fe0ed83a1ef28cab2ef7034dfe0bba99)), closes [#190](https://github.com/melfore/konva-timeline/issues/190)
+- 🎸 [Task] new incopmlete color display, add pattern prop ([a1bdcf3](https://github.com/melfore/konva-timeline/commit/a1bdcf39fe0ed83a1ef28cab2ef7034dfe0bba99)), closes [#190](https://github.com/melfore/konva-timeline/issues/190)
 
 ## [1.30.2](https://github.com/melfore/konva-timeline/compare/v1.30.1...v1.30.2) (2024-02-13)
 

src/tasks/components/Task/index.tsx

@@ -258,20 +258,20 @@ const Task = ({
       const minY = rowHeight + rowHeight * TASK_OFFSET_Y;
       const maxY = rowHeight * (resources.length - 1) + rowHeight * TASK_OFFSET_Y;
       const taskFinalPoint = finalPoint - taskDimensions.width;
-      let controledY = y;
-      let controledX = xCoordinate;
-      if (controledY < minY) {
-        controledY = minY;
+      let controlledY = y;
+      let controlledX = xCoordinate;
+      if (controlledY < minY) {
+        controlledY = minY;
       }
-      if (controledY > maxY) {
-        controledY = maxY;
+      if (controlledY > maxY) {
+        controlledY = maxY;
       }
 
       if (dragFinalX >= taskFinalPoint) {
-        controledX = taskFinalPoint;
+        controlledX = taskFinalPoint;
       }
 
-      const point = { x: controledX, y: controledY };
+      const point = { x: controlledX, y: controlledY };
 
       setTaskDimensions((dimensions) => ({ ...dimensions, ...point }));
     },

src/timeline/index.tsx

@@ -51,6 +51,7 @@ const Timeline: FC<TimelineProps> = () => {
   const [newTask, setNewTask] = useState(false);
   const [isMove, setIsMove] = useState(false);
   const [newTaskDimension, setNewTaskDimension] = useState<TaskDimensions>({ row: 0, width: 0, x: 0, y: 0 });
+  const [startXClick, setStartXClick] = useState(0);
   const [existTask, setExistTask] = useState<boolean>(false);
   const stageRef = useRef<Konva.Stage>(null);
   const wrapper = useRef<HTMLDivElement>(null);
@@ -202,6 +203,7 @@ const Timeline: FC<TimelineProps> = () => {
         const pointerPosition = stage!.getPointerPosition();
         const resourceIndex = findResourceIndexByCoordinate(pointerPosition!.y, rowHeight, resources);
         const y = getTaskYCoordinate(resourceIndex, rowHeight);
+        setStartXClick(drawRange.start + pointerPosition!.x);
         setNewTaskDimension({ row: resourceIndex, width: 1, x: drawRange.start + pointerPosition!.x, y: y });
         setNewTask(true);
         setIsMove(true);
@@ -231,12 +233,16 @@ const Timeline: FC<TimelineProps> = () => {
         const stage = e.target.getStage();
         stage!.container().style.cursor = "crosshair";
         const xpos = stage!.getPointerPosition()!.x + drawRange.start;
-        const width = xpos - newTaskDimension.x;
-        const controledWidth = width < 0 ? 1 : width;
-        setNewTaskDimension({ ...newTaskDimension, width: controledWidth });
+        const width = xpos - startXClick;
+        let controlledX = startXClick;
+        const controlledWidth = width < 0 ? -1 * width : width;
+        if (width < 0) {
+          controlledX = xpos;
+        }
+        setNewTaskDimension({ ...newTaskDimension, x: controlledX, width: controlledWidth });
       }
     },
-    [newTaskDimension, isMove, drawRange]
+    [newTaskDimension, isMove, drawRange, startXClick]
   );
 
   const taskHeight = useMemo(() => {