fix: stop task create if drag near edge, hotfix tasks not draggable #233

packages/svelte-gantt/src/Gantt.svelte

@@ -22,7 +22,7 @@
     import { collapseRow, expandRow, createRows } from './core/row';
     import type { RowModel, SvelteRow } from './core/row';
     import { TimeRangeFactory } from './core/timeRange';
-    import { DragDropManager, DraggableGroup } from './core/drag';
+    import { DraggableGroup } from './core/drag';
     import { SelectionManager } from './core/selectionManager';
     import { createColumnService } from './core/column';
     import type { HighlightedDurations, Column as IColumn } from './core/column';
@@ -506,7 +506,6 @@
     export const api = provideGanttApi();
     const selectionManager = new SelectionManager(taskStore);
 
-    export const dndManager = new DragDropManager(rowStore);
     export const timeRangeFactory = new TimeRangeFactory(columnService);
 
     export const utils = createUtils({
@@ -522,7 +521,6 @@
     setContext('services', {
         utils,
         api,
-        dndManager,
         selectionManager,
         columnService,
     });
@@ -1028,7 +1026,7 @@
             bind:offsetHeight={offsetHeight}
             bind:clientWidth={$visibleWidth}
             bind:offsetWidth={offsetWidth}
-            use:dragCreateTasks={{ container: rowContainer, enabled: enableCreateTask, onMove: onCreateTaskMove, onEnd: onCreateTaskEnd }}
+            use:dragCreateTasks={{ container: rowContainer, enabled: enableCreateTask, onMove: onCreateTaskMove, onEnd: onCreateTaskEnd, boundsContainer: mainContainer }}
         >
             <div class="content" style="width:{$_width}px">
                 <Columns {columns} {columnStrokeColor} {columnStrokeWidth} {useCanvasColumns} />

packages/svelte-gantt/src/core/drag/DraggableGroup.svelte

@@ -7,7 +7,7 @@
     import { getContext } from 'svelte';
     import type { SvelteTask } from '../task';
     import type { SvelteRow } from '../row';
-    import { scrollIfOutOfBounds, setCursor } from '../../utils/dom';
+    import { scrollIfOutOfBounds, setCursor, getRowAtPoint } from '../../utils/dom';
     import { isDraggable, isResizable } from '../../utils/utils';
 
     type RootState = Partial<{
@@ -30,7 +30,7 @@
     const { taskStore, rowStore } = getContext('dataStore');
     const gantt = getContext('gantt');
     const { rowPadding } = getContext('options');
-    const { dndManager, api, utils, columnService, selectionManager } = getContext('services');
+    const { api, utils, columnService, selectionManager } = getContext('services');
 
     const dispatcher = createEventDispatcher<{ 
         change: {  changes: DragChange[]; }; 
@@ -168,7 +168,11 @@
         const sourceRow = $rowStore.entities[model.resourceId];
         let targetRow: SvelteRow;
         if (event.dragging) {
-            targetRow = dndManager.getTarget('row', event.mouseEvent);
+            const rowId = getRowAtPoint(event.mouseEvent);
+            const row = $rowStore.entities[rowId];
+            if (isDraggable(row.model)) {
+                targetRow = row;
+            }
             // target row can be null
         } else {
             // dont know about this
@@ -197,6 +201,7 @@
         const top = $rowPadding + (targetRow?.y ?? 0);
         // get value of top from the layout
 
+
         const current: Position = {
             left,
             top,
@@ -211,6 +216,7 @@
             from: model.from,
             to: model.to,
         }
+
         return {
             valid: true,
             task,

packages/svelte-gantt/src/core/drag/index.ts

@@ -1,5 +1,4 @@
 export * from './draggable';
-export * from './dragDropManager';
 export { default as DraggableGroup } from './DraggableGroup.svelte';
 export { default as Draggable } from './Draggable.svelte';
 export type { DragContext } from './DragContext';

packages/svelte-gantt/src/gantt.ts

@@ -1,7 +1,6 @@
 import type { ColumnService } from './core/column';
 import type { GanttApi } from './core/api';
 import type { Component } from './core/svelte';
-import type { DragDropManager } from './core/drag';
 import type { RowModel, SvelteRow } from './core/row';
 import type { TaskModel, SvelteTask } from './core/task';
 import type { TimeRangeModel, TimeRangeFactory } from './core/timeRange';
@@ -52,7 +51,6 @@ export type InvalidatePositionOptions = {
 export interface GanttContextServices {
     utils: GanttUtils;
     api: GanttApi;
-    dndManager: DragDropManager;
     selectionManager: SelectionManager;
     columnService: ColumnService;
 }
@@ -174,7 +172,6 @@ export interface SvelteGanttComponent extends Component<SvelteGanttOptions> {
     api: GanttApi;
     utils: GanttUtils;
     columnService: ColumnService;
-    dndManager: DragDropManager;
     timeRangeFactory: TimeRangeFactory;
 
     refreshTasks();

packages/svelte-gantt/src/modules/create-tasks.ts

@@ -6,6 +6,7 @@ import { getContext } from 'svelte';
 type Options = {
     enabled?: boolean;
     container: HTMLElement;
+    boundsContainer?: HTMLElement;
     onMove(e: MoveEvent): void;
     onEnd(e: MoveEvent): void;
 }
@@ -49,8 +50,18 @@ function createTaskAction(node: HTMLElement, options: InnerOptions) {
     let initialY: number;
     let triggered = false;
 
+    /** dragging will not activate around the edges */
+    let deadZone = 10;
+
     const container = () => options.container;
 
+    function isNearEdge(x: number, y: number) {
+        const rect = options.boundsContainer.getBoundingClientRect();
+        const nearBottomEdge = y - rect.top >= rect.height - deadZone;
+        const nearRightEdge = x - rect.left >= rect.width - deadZone;
+        return nearBottomEdge || nearRightEdge;
+    }
+
     function onMousedown(event: MouseEvent) {
         if (!options.enabled) {
             return;
@@ -59,6 +70,10 @@ function createTaskAction(node: HTMLElement, options: InnerOptions) {
         event.stopPropagation();
         event.preventDefault();
 
+        if (isNearEdge(event.clientX, event.clientY)) {
+            return;
+        }
+
         const [mousePosX, _] = getRelativePosition(container(), event);
 
         const from = startFrom = options.utils.roundTo(options.columnService.getDateByPosition(mousePosX));

packages/svelte-gantt/src/modules/external/external.ts

@@ -1,7 +1,8 @@
+import { isDraggable } from '../../utils/utils';
 import { useDraggable } from '../../core/drag';
 import type { SvelteRow } from '../../core/row';
 import type { SvelteGanttComponent } from '../../gantt';
-import { getRelativePos } from '../../utils/dom';
+import { getRelativePos, getRowAtPoint } from '../../utils/dom';
 
 interface DragOptions {
     /** SvelteGantt this is binded to */
@@ -64,10 +65,11 @@ export class SvelteGanttExternal {
         this.element.style.left = x + 'px';
     }
 
-    onDrop(event) {
+    onDrop(event: { mouseEvent: MouseEvent }) {
         const gantt = this.options.gantt;
-        const targetRow = gantt.dndManager.getTarget('row', event.mouseEvent);
-        if (targetRow) {
+        const rowId = getRowAtPoint(event.mouseEvent);
+        const targetRow = gantt.getRow(rowId);
+        if (targetRow && isDraggable(targetRow.model)) {
             const mousePos = getRelativePos(gantt.getRowContainer(), event.mouseEvent);
             const date = gantt.utils.getDateByPosition(mousePos.x);
 

packages/svelte-gantt/src/utils/dom.ts

@@ -141,3 +141,13 @@ export const scrollIfOutOfBounds = throttle((event: MouseEvent, scrollable: HTML
         });
     }
 }, 250);
+
+export function getRowAtPoint(event: MouseEvent) {
+    const elements = document.elementsFromPoint(event.clientX, event.clientY);
+    const rowElement = elements.find(element => !!element.getAttribute('data-row-id'));
+    if (rowElement !== undefined) {
+        const rowId = rowElement.getAttribute('data-row-id');
+        return rowId;
+    }
+    return null;
+}