svelte-gantt - npm Package Compare versions

Comparing version 4.4.0 to 4.4.1

package.json

 {
   "name": "svelte-gantt",
   "description": "Interactive JavaScript Gantt chart/resource booking component",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "author": "Ante Novokmet <[e-mail]>",
@@ -6,0 +6,0 @@ "type": "module",

svelte/core/api.d.ts

@@ -1,10 +0,149 @@
-export declare class GanttApi {
-    listeners: any[];
-    listenersMap: {
-        [key: string]: any;
+import type { SvelteTask, TaskModel } from "./task";
+import type { SvelteRow } from "./row";
+import type { TimeRangeModel } from "./timeRange";
+type EventController<T extends any[]> = [(handler: (arg: T) => void) => () => void, (...params: T) => void];
+type EventsAndArgs<T = any> = {
+    [Event in keyof T]: T[Event] extends any[] ? T[Event] : never;
+};
+type EventFeature<T extends EventsAndArgs> = {
+    on: {
+        [Event in keyof T]: EventController<T[Event]>[0];
     };
-    tasks?: any;
-    timeranges?: any;
-    constructor();
-    registerEvent(featureName: any, eventName: any): void;
-}
+    raise: {
+        [Event in keyof T]: EventController<T[Event]>[1];
+    };
+};
+export declare function provideGanttApi(): {
+    tasks: EventFeature<{
+        move: [TaskModel];
+        resize: [TaskModel];
+        select: [SvelteTask];
+        switchRow: [SvelteTask, SvelteRow, SvelteRow];
+        moveEnd: [TaskModel];
+        change: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        changed: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        dblclicked: [SvelteTask, MouseEvent];
+    }>;
+    gantt: EventFeature<{
+        viewChanged: [];
+        dateSelected: [{
+            from: number;
+            to: number;
+        }];
+    }>;
+    timeranges: EventFeature<{
+        clicked: [{
+            model: TimeRangeModel;
+        }];
+        resized: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+        changed: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+    }>;
+};
+declare function createGanttApi(): {
+    tasks: EventFeature<{
+        move: [TaskModel];
+        resize: [TaskModel];
+        select: [SvelteTask];
+        switchRow: [SvelteTask, SvelteRow, SvelteRow];
+        moveEnd: [TaskModel];
+        change: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        changed: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        dblclicked: [SvelteTask, MouseEvent];
+    }>;
+    gantt: EventFeature<{
+        viewChanged: [];
+        dateSelected: [{
+            from: number;
+            to: number;
+        }];
+    }>;
+    timeranges: EventFeature<{
+        clicked: [{
+            model: TimeRangeModel;
+        }];
+        resized: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+        changed: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+    }>;
+};
+export type GanttApi = ReturnType<typeof createGanttApi>;
+export declare function useGanttApi(): {
+    tasks: EventFeature<{
+        move: [TaskModel];
+        resize: [TaskModel];
+        select: [SvelteTask];
+        switchRow: [SvelteTask, SvelteRow, SvelteRow];
+        moveEnd: [TaskModel];
+        change: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        changed: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        dblclicked: [SvelteTask, MouseEvent];
+    }>;
+    gantt: EventFeature<{
+        viewChanged: [];
+        dateSelected: [{
+            from: number;
+            to: number;
+        }];
+    }>;
+    timeranges: EventFeature<{
+        clicked: [{
+            model: TimeRangeModel;
+        }];
+        resized: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+        changed: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+    }>;
+};
+export {};

svelte/core/api.js

@@ -1,44 +0,59 @@
-export class GanttApi {
-    listeners;
-    listenersMap;
-    tasks;
-    timeranges;
-    constructor() {
-        this.listeners = [];
-        this.listenersMap = {};
+import { setContext, getContext } from "svelte";
+function controller() {
+    const listeners = [];
+    function raise(...params) {
+        for (const listener of listeners) {
+            listener(params);
+        }
     }
-    registerEvent(featureName, eventName) {
-        if (!this[featureName]) {
-            this[featureName] = {};
-        }
-        const feature = this[featureName];
-        if (!feature.on) {
-            feature.on = {};
-            feature.raise = {};
-        }
-        let eventId = 'on:' + featureName + ':' + eventName;
-        feature.raise[eventName] = (...params) => {
-            //todo add svelte? event listeners, looping isnt effective unless rarely used
-            this.listeners.forEach(listener => {
-                if (listener.eventId === eventId) {
-                    listener.handler(params);
-                }
-            });
+    ;
+    function on(handler) {
+        listeners.push(handler);
+        const removeListener = () => {
+            const index = listeners.indexOf(handler);
+            listeners.splice(index, 1);
         };
-        // Creating on event method featureName.oneventName
-        feature.on[eventName] = handler => {
-            // track our listener so we can turn off and on
-            let listener = {
-                handler: handler,
-                eventId: eventId
-            };
-            this.listenersMap[eventId] = listener;
-            this.listeners.push(listener);
-            const removeListener = () => {
-                const index = this.listeners.indexOf(listener);
-                this.listeners.splice(index, 1);
-            };
-            return removeListener;
-        };
+        return removeListener;
     }
+    ;
+    return [on, raise];
 }
+function feature(events) {
+    const result = { on: {}, raise: {} };
+    for (const event in events) {
+        const [on, raise] = events[event];
+        result.on[event] = on;
+        result.raise[event] = raise;
+    }
+    return result;
+}
+const contextKey = {};
+export function provideGanttApi() {
+    return setContext(contextKey, createGanttApi());
+}
+function createGanttApi() {
+    return {
+        tasks: feature({
+            move: controller(),
+            resize: controller(),
+            select: controller(),
+            switchRow: controller(),
+            moveEnd: controller(),
+            change: controller(),
+            changed: controller(),
+            dblclicked: controller(),
+        }),
+        gantt: feature({
+            viewChanged: controller(),
+            dateSelected: controller(),
+        }),
+        timeranges: feature({
+            clicked: controller(),
+            resized: controller(),
+            changed: controller(),
+        }),
+    };
+}
+export function useGanttApi() {
+    return getContext(contextKey);
+}

svelte/core/column.d.ts

@@ -16,10 +16,21 @@ export interface HighlightedDurations {
 }
+type ColumnServiceParams = {
+    readonly columns: Column[];
+    readonly magnetDuration: number;
+};
+export declare function createColumnService(params: ColumnServiceParams): {
+    getColumnByDate: (date: number) => Column;
+    getColumnByPosition: (x: number) => Column;
+    getPositionByDate(date: number): number;
+    getDateByPosition(x: number): number;
+    /**
+     * TODO: remove, currently unused
+     * @param {number} date - Date
+     * @returns {number} rounded date passed as parameter
+     */
+    roundTo(date: number): number;
+};
 export declare function findByPosition(columns: Column[], x: number): Column[];
 export declare function findByDate(columns: Column[], x: number): Column[];
-export interface ColumnService {
-    getColumnByDate(date: any): Column;
-    getColumnByPosition(x: any): Column;
-    getPositionByDate(date: any): number;
-    getDateByPosition(x: any): number;
-    roundTo(date: any): number;
-}
+export type ColumnService = ReturnType<typeof createColumnService>;
+export {};

svelte/core/column.js

 import { get } from '../utils/utils';
+export function createColumnService(params) {
+    function getColumnByDate(date) {
+        const pair = findByDate(params.columns, date);
+        return !pair[0] ? pair[1] : pair[0];
+    }
+    function getColumnByPosition(x) {
+        const pair = findByPosition(params.columns, x);
+        return !pair[0] ? pair[1] : pair[0];
+    }
+    return {
+        getColumnByDate,
+        getColumnByPosition,
+        getPositionByDate(date) {
+            if (!date)
+                return null;
+            const column = getColumnByDate(date);
+            let durationTo = date - column.from;
+            const position = (durationTo / column.duration) * column.width;
+            //multiples - skip every nth col, use other duration
+            return column.left + position;
+        },
+        getDateByPosition(x) {
+            const column = getColumnByPosition(x);
+            x = x - column.left;
+            let positionDuration = (column.duration / column.width) * x;
+            const date = column.from + positionDuration;
+            return date;
+        },
+        /**
+         * TODO: remove, currently unused
+         * @param {number} date - Date
+         * @returns {number} rounded date passed as parameter
+         */
+        roundTo(date) {
+            let value = Math.round(date / params.magnetDuration) * params.magnetDuration;
+            return value;
+        }
+    };
+}
 export function findByPosition(columns, x) {
@@ -3,0 +42,0 @@ const result = get(columns, x, c => c.left);

svelte/core/drag/draggable.d.ts

@@ -41,2 +41,6 @@ export interface DraggableOptions {
 };
+/**
+ * Applies dragging interaction to gantt elements
+ */
+export declare function createDraggable(options: DraggableOptions): (event: PointerEvent) => void;
 export {};

svelte/core/drag/draggable.js

@@ -15,2 +15,14 @@ import { isLeftClick, addEventListenerOnce, getRelativePos } from '../../utils/dom';
 export function useDraggable(node, options) {
+    const onMousedown = createDraggable(options);
+    node.addEventListener('pointerdown', onMousedown);
+    return {
+        destroy() {
+            node.removeEventListener('pointerdown', onMousedown, false);
+        }
+    };
+}
+/**
+ * Applies dragging interaction to gantt elements
+ */
+export function createDraggable(options) {
     let mouseStartPosX;
@@ -27,3 +39,2 @@ let mouseStartPosY;
     const resizeAllowed = getAccessor(options.resizeAllowed);
-    node.addEventListener('pointerdown', onMousedown, { passive: true });
     function onMousedown(event) {
@@ -163,9 +174,3 @@ if (!isLeftClick(event)) {
     ;
-    return {
-        destroy() {
-            node.removeEventListener('pointerdown', onMousedown, false);
-            node.removeEventListener('pointermove', onMousemove, false);
-            node.removeEventListener('pointerup', onMouseup, false);
-        }
-    };
+    return onMousedown;
 }

svelte/core/drag/index.d.ts

 export * from './draggable';
 export * from './dragDropManager';
-export { default as DragContextProvider } from './DragContextProvider.svelte';
-export type { DragContext } from './DragContextProvider';
+export { default as DraggableGroup } from './DraggableGroup.svelte';
+export { default as Draggable } from './Draggable.svelte';
+export type { DragContext } from './DragContext';

svelte/core/drag/index.js

 export * from './draggable';
 export * from './dragDropManager';
-export { default as DragContextProvider } from './DragContextProvider.svelte';
+export { default as DraggableGroup } from './DraggableGroup.svelte';
+export { default as Draggable } from './Draggable.svelte';

svelte/core/row.d.ts

 export interface RowModel {
+    /**
+     * Id of row, every resource needs to have a unique one
+     */
     id: PropertyKey;
@@ -6,14 +9,36 @@ label: string;
     contentHtml?: string;
+    height: number;
+    /**
+     * enable dragging to row
+     * @deprecated use draggable
+     **/
     enableDragging?: boolean;
+    /**
+     * enable dragging to row
+     **/
+    draggable?: boolean;
+    /**
+     * enable resizing on row
+     * @deprecated use resizable
+     */
     enableResize?: boolean;
-    height: number;
+    /**
+     * enable resizing on row
+     */
+    resizable?: boolean;
     /** Child rows in expandable tree */
     children?: RowModel[];
+    expanded?: boolean;
     /** Content of row header, html string */
     headerHtml?: string;
-    /** Class of icon in row header */
+    /**
+     * Class of icon in row header
+     * @deprecated
+     **/
     iconClass?: string;
-    /** Url of image in row header */
+    /**
+     * Url of image in row header
+     * @deprecated
+     **/
     imageSrc?: string;
-    expanded?: boolean;
 }
@@ -31,14 +56,7 @@ export interface SvelteRow {
 }
-export declare class RowFactory {
+export type CreateRowParams = {
     rowHeight: number;
-    constructor();
-    createRow(row: RowModel, y: number): SvelteRow;
-    createRows(rows: RowModel[]): any[];
-    createChildRows(rowModels: RowModel[], ctx: {
-        y: number;
-        result: SvelteRow[];
-    }, parent?: SvelteRow, level?: number, parents?: SvelteRow[]): {
-        rows: any[];
-        allRows: any[];
-    };
-}
+};
+export declare function createRows(rows: RowModel[], params: CreateRowParams): any[];
+export declare function expandRow(row: SvelteRow): void;
+export declare function collapseRow(row: SvelteRow): void;

svelte/core/row.js

@@ -1,61 +0,72 @@
-export class RowFactory {
-    rowHeight;
-    constructor() { }
-    createRow(row, y) {
-        // defaults
-        // id of task, every task needs to have a unique one
-        //row.id = row.id || undefined;
-        // css classes
-        row.classes = row.classes || '';
-        // html content of row
-        row.contentHtml = row.contentHtml || undefined;
-        // enable dragging of tasks to and from this row
-        row.enableDragging = row.enableDragging === undefined ? true : row.enableDragging;
-        row.enableResize = row.enableResize === undefined ? true : row.enableResize;
-        // height of row element
-        const height = row.height || this.rowHeight;
-        return {
-            model: row,
-            y,
-            height,
-        };
+export function createRows(rows, params) {
+    const context = { y: 0, result: [] };
+    createChildRows(rows, context, params);
+    return context.result;
+}
+function createChildRows(rowModels, context, params, parent = null, level = 0, parents = []) {
+    const rowsAtLevel = [];
+    const allRows = [];
+    if (parent) {
+        parents = [...parents, parent];
     }
-    createRows(rows) {
-        const ctx = { y: 0, result: [] };
-        this.createChildRows(rows, ctx);
-        return ctx.result;
-    }
-    createChildRows(rowModels, ctx, parent = null, level = 0, parents = []) {
-        const rowsAtLevel = [];
-        const allRows = [];
+    for (const model of rowModels) {
+        const row = createRow(model, context.y, params);
+        context.result.push(row);
+        rowsAtLevel.push(row);
+        allRows.push(row);
+        row.childLevel = level;
+        row.parent = parent;
+        row.allParents = parents;
         if (parent) {
-            parents = [...parents, parent];
+            // when row is hidden, other rows (y-pos) move upward
+            row.hidden = !(parent.model.expanded || parent.model.expanded == null) || parent.hidden != null && parent.hidden;
         }
-        rowModels.forEach(rowModel => {
-            const row = this.createRow(rowModel, ctx.y);
-            ctx.result.push(row);
-            rowsAtLevel.push(row);
-            allRows.push(row);
-            row.childLevel = level;
-            row.parent = parent;
-            row.allParents = parents;
-            if (parent) {
-                // when row is hidden, other rows (y-pos) move upward
-                row.hidden = !(parent.model.expanded || parent.model.expanded == null);
-            }
-            if (!row.hidden) {
-                ctx.y += row.height;
-            }
-            if (rowModel.children) {
-                const nextLevel = this.createChildRows(rowModel.children, ctx, row, level + 1, parents);
-                row.children = nextLevel.rows;
-                row.allChildren = nextLevel.allRows;
-                allRows.push(...nextLevel.allRows);
-            }
-        });
-        return {
-            rows: rowsAtLevel,
-            allRows
-        };
+        if (!row.hidden) {
+            context.y += row.height;
+        }
+        if (model.children) {
+            const nextLevel = createChildRows(model.children, context, params, row, level + 1, parents);
+            row.children = nextLevel.rows;
+            row.allChildren = nextLevel.allRows;
+            allRows.push(...nextLevel.allRows);
+        }
     }
+    return {
+        rows: rowsAtLevel,
+        allRows
+    };
 }
+function createRow(model, y, params) {
+    // defaults
+    // height of row element
+    const height = model.height ?? params.rowHeight;
+    return {
+        model: model,
+        y,
+        height,
+    };
+}
+export function expandRow(row) {
+    row.model.expanded = true;
+    if (row.children)
+        show(row.children);
+}
+export function collapseRow(row) {
+    row.model.expanded = false;
+    if (row.children)
+        hide(row.children);
+}
+function hide(children) {
+    for (const row of children) {
+        if (row.children)
+            hide(row.children);
+        row.hidden = true;
+    }
+}
+function show(children, hidden = false) {
+    for (const row of children) {
+        if (row.children)
+            show(row.children, !row.model.expanded);
+        row.hidden = hidden;
+    }
+}

svelte/core/store.d.ts

@@ -7,3 +7,3 @@ /// <reference path="svelte.d.ts" />
 import type { SvelteTimeRange } from './timeRange';
-interface EntityState<T, K = PropertyKey> {
+export interface EntityState<T, K = PropertyKey> {
     ids: K[];
@@ -44,9 +44,4 @@ entities: {
     rowTaskCache: Readable<{}>;
-    draggingTaskCache: import("svelte/store").Writable<{
-        [id: string]: boolean;
-        [id: number]: boolean;
-        [id: symbol]: boolean;
-    }>;
 };
 export type GanttDataStore = ReturnType<typeof createDataStore>;
 export {};

svelte/core/store.js

@@ -116,3 +116,2 @@ import { writable, derived } from 'svelte/store';
     });
-    const draggingTaskCache = writable({});
     return {
@@ -125,5 +124,4 @@ taskStore,
         allTimeRanges,
-        rowTaskCache,
-        draggingTaskCache
+        rowTaskCache
     };
 }

svelte/core/task.d.ts

 import type { SvelteRow } from './row';
-import type { ColumnService } from './column';
 export interface TaskModel {
+    /** id of task, every task needs to have a unique one */
     id: PropertyKey;
     resourceId: PropertyKey;
+    /** date task starts on */
     from: number;
+    /** date task ends on */
     to: number;
+    /**
+     * completion %, indicated on task
+     * @deprecated
+     */
     amountDone?: number;
+    /** css classes */
     classes?: string | string[];
+    /** label of task */
     label?: string;
+    /** html content of task, will override label */
     html?: string;
+    /**
+     * show button bar
+     * @deprecated
+     **/
     showButton?: boolean;
+    /**
+     * button classes, useful for fontawesome icons
+     * @deprecated
+     **/
     buttonClasses?: string | string[];
+    /**
+     * html content of button
+     * @deprecated
+     */
     buttonHtml?: string;
+    /**
+     * enable dragging of task
+     * @deprecated use draggable
+     **/
     enableDragging?: boolean;
+    /**
+     * enable dragging of task
+     **/
+    draggable?: boolean;
+    /**
+     * enable resizing of task
+     * @deprecated use resizable
+     */
     enableResize?: boolean;
+    /**
+     * enable resizing of task
+     */
+    resizable?: boolean;
+    /**
+     * label displayed below
+     * @deprecated
+     **/
     labelBottom?: string;
@@ -31,22 +72,17 @@ type?: 'milestone' | 'task';
     originalId?: PropertyKey;
-    intersectsWith?: SvelteTask[];
-    numYSlots?: number;
-    yPos?: number;
 }
-export declare class TaskFactory {
-    columnService: ColumnService;
+type CreateTaskParams = {
     rowPadding: number;
     rowEntities: {
-        [key: number]: SvelteRow;
+        [rowId: PropertyKey]: SvelteRow;
     };
-    constructor(columnService: ColumnService);
-    createTask(model: TaskModel): SvelteTask;
-    createTasks(tasks: TaskModel[]): SvelteTask[];
-    row(resourceId: any): SvelteRow;
-    getHeight(model: any): number;
-    getPosY(model: any): number;
-}
-export declare function overlap(one: SvelteTask, other: SvelteTask): boolean;
-export declare function reflectTask(task: SvelteTask, row: SvelteRow, options: {
-    rowPadding: number;
-}): SvelteTask;
+    getPositionByDate(date: any): number;
+};
+export declare function createTaskFactory(params: CreateTaskParams): {
+    createTask: (model: TaskModel) => SvelteTask;
+    reflectTask: (task: SvelteTask, targetRow: SvelteRow) => SvelteTask;
+};
+export declare function createTask(model: TaskModel, params: CreateTaskParams): SvelteTask;
+export declare function overlap(left: SvelteTask, right: SvelteTask): boolean;
+export declare function reflectTask(task: SvelteTask, targetRow: SvelteRow, params: CreateTaskParams): SvelteTask;
+export {};

svelte/core/task.js

@@ -1,65 +0,33 @@
-export class TaskFactory {
-    columnService;
-    rowPadding;
-    rowEntities;
-    constructor(columnService) {
-        this.columnService = columnService;
-    }
-    createTask(model) {
-        // id of task, every task needs to have a unique one
-        //task.id = task.id || undefined;
-        // completion %, indicated on task
-        model.amountDone = model.amountDone || 0;
-        // css classes
-        model.classes = model.classes || '';
-        // date task starts on
-        model.from = model.from || null;
-        // date task ends on
-        model.to = model.to || null;
-        // label of task
-        model.label = model.label || undefined;
-        // html content of task, will override label
-        model.html = model.html || undefined;
-        // show button bar
-        model.showButton = model.showButton || false;
-        // button classes, useful for fontawesome icons
-        model.buttonClasses = model.buttonClasses || '';
-        // html content of button
-        model.buttonHtml = model.buttonHtml || '';
-        // enable dragging of task
-        model.enableDragging = model.enableDragging === undefined ? true : model.enableDragging;
-        model.enableResize = model.enableResize === undefined ? true : model.enableResize;
-        const left = this.columnService.getPositionByDate(model.from) | 0;
-        const right = this.columnService.getPositionByDate(model.to) | 0;
-        return {
-            model,
-            left: left,
-            width: right - left,
-            height: this.getHeight(model),
-            top: this.getPosY(model),
-        };
-    }
-    createTasks(tasks) {
-        return tasks.map(task => this.createTask(task));
-    }
-    row(resourceId) {
-        return this.rowEntities[resourceId];
-    }
-    getHeight(model) {
-        const row = this.row(model.resourceId);
-        return (row ? row.height : undefined) - 2 * this.rowPadding;
-    }
-    getPosY(model) {
-        const row = this.row(model.resourceId);
-        return (row ? row.y : -1000) + this.rowPadding;
-    }
+export function createTaskFactory(params) {
+    return {
+        createTask: (model) => createTask(model, params),
+        reflectTask: (task, targetRow) => reflectTask(task, targetRow, params),
+    };
 }
-export function overlap(one, other) {
-    return !(one.left + one.width <= other.left || one.left >= other.left + other.width);
+export function createTask(model, params) {
+    model.amountDone = model.amountDone ?? 0;
+    model.showButton = model.showButton ?? false;
+    model.buttonClasses = model.buttonClasses ?? '';
+    model.buttonHtml = model.buttonHtml ?? '';
+    const left = params.getPositionByDate(model.from) | 0;
+    const right = params.getPositionByDate(model.to) | 0;
+    const row = params.rowEntities[model.resourceId];
+    const height = (row ? row.height : undefined) - 2 * params.rowPadding;
+    const top = (row ? row.y : -1000) + params.rowPadding;
+    return {
+        model,
+        left: left,
+        width: right - left,
+        height,
+        top,
+    };
 }
-export function reflectTask(task, row, options) {
-    const reflectedId = `reflected-task-${String(task.model.id)}-${String(row.model.id)}`;
+export function overlap(left, right) {
+    return !(left.left + left.width <= right.left || left.left >= right.left + right.width);
+}
+export function reflectTask(task, targetRow, params) {
+    const reflectedId = `reflected-task-${String(task.model.id)}-${String(targetRow.model.id)}`;
     const model = {
         ...task.model,
-        resourceId: row.model.id,
+        resourceId: targetRow.model.id,
         id: reflectedId,
@@ -71,3 +39,3 @@ enableDragging: false
         model,
-        top: row.y + options.rowPadding,
+        top: targetRow.y + params.rowPadding,
         reflected: true,
@@ -74,0 +42,0 @@ reflectedOnParent: false,

svelte/entities/Task.svelte.d.ts

@@ -12,4 +12,9 @@ /// <reference types="src/context" />
         reflected?: boolean;
+        animating?: boolean;
+        dragging?: boolean;
+        resizing?: boolean;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
@@ -16,0 +21,0 @@ };

svelte/gantt.d.ts

@@ -6,4 +6,4 @@ /// <reference types="svelte" />
 import type { DragDropManager } from './core/drag';
-import type { RowModel, RowFactory, SvelteRow } from './core/row';
-import type { TaskModel, TaskFactory, SvelteTask } from './core/task';
+import type { RowModel, SvelteRow } from './core/row';
+import type { TaskModel, SvelteTask } from './core/task';
 import type { TimeRangeModel, TimeRangeFactory } from './core/timeRange';
@@ -35,8 +35,16 @@ import type { GanttUtils } from './utils/utils';
     scrollables: any[];
-    hoveredRow: Writable<number>;
-    selectedRow: Writable<number>;
+    hoveredRow: Writable<PropertyKey>;
+    selectedRow: Writable<PropertyKey>;
     rowContainer: HTMLElement;
     mainContainer: HTMLElement;
     mainHeaderContainer: HTMLElement;
+    updateLayout(): any;
+    expandRow(row: SvelteRow): any;
+    collapseRow(row: SvelteRow): any;
+    invalidatePosition(options: InvalidatePositionOptions): any;
 }
+export type InvalidatePositionOptions = {
+    task?: SvelteTask;
+    row?: SvelteRow;
+};
 export interface GanttContextServices {
@@ -165,4 +173,2 @@ utils: GanttUtils;
     dndManager: DragDropManager;
-    taskFactory: TaskFactory;
-    rowFactory: RowFactory;
     timeRangeFactory: TimeRangeFactory;
@@ -179,3 +185,3 @@ refreshTasks(): any;
     updateRow(model: RowModel): any;
-    updateRowss(models: RowModel[]): any;
+    updateRows(models: RowModel[]): any;
     getTask(id: any): SvelteTask;
@@ -182,0 +188,0 @@ getTasks(resourceId: any): SvelteTask[];

svelte/Gantt.svelte.d.ts

 /// <reference types="src/context" />
 import { SvelteComponentTyped } from "svelte";
-import { GanttUtils } from './utils/utils';
-import { GanttApi } from './core/api';
-import { TaskFactory } from './core/task';
 import type { SvelteTask, TaskModel } from './core/task';
-import { RowFactory } from './core/row';
-import type { SvelteRow } from './core/row';
+import type { RowModel, SvelteRow } from './core/row';
 import { TimeRangeFactory } from './core/timeRange';
@@ -16,3 +12,3 @@ import { DragDropManager } from './core/drag';
         [x: string]: any;
-        rows: any;
+        rows: RowModel[];
         tasks?: TaskModel[];
@@ -65,19 +61,107 @@ timeRanges?: any[];
         columnService?: {
-            getColumnByDate(date: number): IColumn;
-            getColumnByPosition(x: number): IColumn;
-            getPositionByDate(date: number): any;
-            getDateByPosition(x: number): any;
-            /**
-             * TODO: remove, currently unused
-             * @param {number} date - Date
-             * @returns {number} rounded date passed as parameter
-             */
+            getColumnByDate: (date: number) => IColumn;
+            getColumnByPosition: (x: number) => IColumn;
+            getPositionByDate(date: number): number;
+            getDateByPosition(x: number): number;
             roundTo(date: number): number;
         };
-        api?: GanttApi;
-        taskFactory?: TaskFactory;
-        rowFactory?: RowFactory;
+        api?: {
+            tasks: {
+                on: {
+                    move: (handler: (arg: [TaskModel]) => void) => () => void;
+                    resize: (handler: (arg: [TaskModel]) => void) => () => void;
+                    select: (handler: (arg: [SvelteTask]) => void) => () => void;
+                    switchRow: (handler: (arg: [SvelteTask, SvelteRow, SvelteRow]) => void) => () => void;
+                    moveEnd: (handler: (arg: [TaskModel]) => void) => () => void;
+                    change: (handler: (arg: [{
+                        task: SvelteTask;
+                        sourceRow: SvelteRow;
+                        targetRow: SvelteRow;
+                        previousState: any;
+                    }]) => void) => () => void;
+                    changed: (handler: (arg: [{
+                        task: SvelteTask;
+                        sourceRow: SvelteRow;
+                        targetRow: SvelteRow;
+                        previousState: any;
+                    }]) => void) => () => void;
+                    dblclicked: (handler: (arg: [SvelteTask, MouseEvent]) => void) => () => void;
+                };
+                raise: {
+                    move: (params_0: TaskModel) => void;
+                    resize: (params_0: TaskModel) => void;
+                    select: (params_0: SvelteTask) => void;
+                    switchRow: (params_0: SvelteTask, params_1: SvelteRow, params_2: SvelteRow) => void;
+                    moveEnd: (params_0: TaskModel) => void;
+                    change: (params_0: {
+                        task: SvelteTask;
+                        sourceRow: SvelteRow;
+                        targetRow: SvelteRow;
+                        previousState: any;
+                    }) => void;
+                    changed: (params_0: {
+                        task: SvelteTask;
+                        sourceRow: SvelteRow;
+                        targetRow: SvelteRow;
+                        previousState: any;
+                    }) => void;
+                    dblclicked: (params_0: SvelteTask, params_1: MouseEvent) => void;
+                };
+            };
+            gantt: {
+                on: {
+                    viewChanged: (handler: (arg: []) => void) => () => void;
+                    dateSelected: (handler: (arg: [{
+                        from: number;
+                        to: number;
+                    }]) => void) => () => void;
+                };
+                raise: {
+                    viewChanged: () => void;
+                    dateSelected: (params_0: {
+                        from: number;
+                        to: number;
+                    }) => void;
+                };
+            };
+            timeranges: {
+                on: {
+                    clicked: (handler: (arg: [{
+                        model: import("./core/timeRange").TimeRangeModel;
+                    }]) => void) => () => void;
+                    resized: (handler: (arg: [{
+                        model: import("./core/timeRange").TimeRangeModel;
+                        left: number;
+                        width: number;
+                    }]) => void) => () => void;
+                    changed: (handler: (arg: [{
+                        model: import("./core/timeRange").TimeRangeModel;
+                        left: number;
+                        width: number;
+                    }]) => void) => () => void;
+                };
+                raise: {
+                    clicked: (params_0: {
+                        model: import("./core/timeRange").TimeRangeModel;
+                    }) => void;
+                    resized: (params_0: {
+                        model: import("./core/timeRange").TimeRangeModel;
+                        left: number;
+                        width: number;
+                    }) => void;
+                    changed: (params_0: {
+                        model: import("./core/timeRange").TimeRangeModel;
+                        left: number;
+                        width: number;
+                    }) => void;
+                };
+            };
+        };
         dndManager?: DragDropManager;
         timeRangeFactory?: TimeRangeFactory;
-        utils?: GanttUtils;
+        utils?: {
+            getPositionByDate(date: number): number;
+            getDateByPosition(x: any): number;
+            roundTo(date: number): number;
+        };
         refreshTimeRanges?: () => void;
@@ -90,11 +174,13 @@ refreshTasks?: () => void;
         scrollToTask?: (id: any, scrollBehavior?: string) => void;
-        updateTask?: (model: any) => void;
-        updateTasks?: (taskModels: any) => void;
-        removeTask?: (taskId: any) => void;
-        removeTasks?: (taskIds: any) => void;
-        updateRow?: (model: any) => void;
-        updateRows?: (rowModels: any) => void;
+        updateTask?: (model: TaskModel) => void;
+        updateTasks?: (models: TaskModel[]) => void;
+        removeTask?: (taskId: PropertyKey) => void;
+        removeTasks?: (taskIds: PropertyKey[]) => void;
+        updateRow?: (model: RowModel) => void;
+        updateRows?: (models: RowModel[]) => void;
         getRow?: (resourceId: any) => SvelteRow;
         getTask?: (id: any) => SvelteTask;
         getTasks?: (resourceId: any) => any;
+        updateLayoutSync?: (_invalidateFull?: boolean) => void;
+        updateLayout?: () => void;
         enableCreateTask?: boolean;
@@ -118,19 +204,107 @@ onCreateTask?: (e: {
     get columnService(): {
-        getColumnByDate(date: number): IColumn;
-        getColumnByPosition(x: number): IColumn;
-        getPositionByDate(date: number): any;
-        getDateByPosition(x: number): any;
-        /**
-         * TODO: remove, currently unused
-         * @param {number} date - Date
-         * @returns {number} rounded date passed as parameter
-         */
+        getColumnByDate: (date: number) => IColumn;
+        getColumnByPosition: (x: number) => IColumn;
+        getPositionByDate(date: number): number;
+        getDateByPosition(x: number): number;
         roundTo(date: number): number;
     };
-    get api(): GanttApi;
-    get taskFactory(): TaskFactory;
-    get rowFactory(): RowFactory;
+    get api(): {
+        tasks: {
+            on: {
+                move: (handler: (arg: [TaskModel]) => void) => () => void;
+                resize: (handler: (arg: [TaskModel]) => void) => () => void;
+                select: (handler: (arg: [SvelteTask]) => void) => () => void;
+                switchRow: (handler: (arg: [SvelteTask, SvelteRow, SvelteRow]) => void) => () => void;
+                moveEnd: (handler: (arg: [TaskModel]) => void) => () => void;
+                change: (handler: (arg: [{
+                    task: SvelteTask;
+                    sourceRow: SvelteRow;
+                    targetRow: SvelteRow;
+                    previousState: any;
+                }]) => void) => () => void;
+                changed: (handler: (arg: [{
+                    task: SvelteTask;
+                    sourceRow: SvelteRow;
+                    targetRow: SvelteRow;
+                    previousState: any;
+                }]) => void) => () => void;
+                dblclicked: (handler: (arg: [SvelteTask, MouseEvent]) => void) => () => void;
+            };
+            raise: {
+                move: (params_0: TaskModel) => void;
+                resize: (params_0: TaskModel) => void;
+                select: (params_0: SvelteTask) => void;
+                switchRow: (params_0: SvelteTask, params_1: SvelteRow, params_2: SvelteRow) => void;
+                moveEnd: (params_0: TaskModel) => void;
+                change: (params_0: {
+                    task: SvelteTask;
+                    sourceRow: SvelteRow;
+                    targetRow: SvelteRow;
+                    previousState: any;
+                }) => void;
+                changed: (params_0: {
+                    task: SvelteTask;
+                    sourceRow: SvelteRow;
+                    targetRow: SvelteRow;
+                    previousState: any;
+                }) => void;
+                dblclicked: (params_0: SvelteTask, params_1: MouseEvent) => void;
+            };
+        };
+        gantt: {
+            on: {
+                viewChanged: (handler: (arg: []) => void) => () => void;
+                dateSelected: (handler: (arg: [{
+                    from: number;
+                    to: number;
+                }]) => void) => () => void;
+            };
+            raise: {
+                viewChanged: () => void;
+                dateSelected: (params_0: {
+                    from: number;
+                    to: number;
+                }) => void;
+            };
+        };
+        timeranges: {
+            on: {
+                clicked: (handler: (arg: [{
+                    model: import("./core/timeRange").TimeRangeModel;
+                }]) => void) => () => void;
+                resized: (handler: (arg: [{
+                    model: import("./core/timeRange").TimeRangeModel;
+                    left: number;
+                    width: number;
+                }]) => void) => () => void;
+                changed: (handler: (arg: [{
+                    model: import("./core/timeRange").TimeRangeModel;
+                    left: number;
+                    width: number;
+                }]) => void) => () => void;
+            };
+            raise: {
+                clicked: (params_0: {
+                    model: import("./core/timeRange").TimeRangeModel;
+                }) => void;
+                resized: (params_0: {
+                    model: import("./core/timeRange").TimeRangeModel;
+                    left: number;
+                    width: number;
+                }) => void;
+                changed: (params_0: {
+                    model: import("./core/timeRange").TimeRangeModel;
+                    left: number;
+                    width: number;
+                }) => void;
+            };
+        };
+    };
     get dndManager(): DragDropManager;
     get timeRangeFactory(): TimeRangeFactory;
-    get utils(): GanttUtils;
+    get utils(): {
+        getPositionByDate(date: number): number;
+        getDateByPosition(x: any): number;
+        roundTo(date: number): number;
+    };
     get refreshTimeRanges(): () => void;
@@ -143,12 +317,14 @@ get refreshTasks(): () => void;
     get scrollToTask(): (id: any, scrollBehavior?: string) => void;
-    get updateTask(): (model: any) => void;
-    get updateTasks(): (taskModels: any) => void;
-    get removeTask(): (taskId: any) => void;
-    get removeTasks(): (taskIds: any) => void;
-    get updateRow(): (model: any) => void;
-    get updateRows(): (rowModels: any) => void;
+    get updateTask(): (model: TaskModel) => void;
+    get updateTasks(): (models: TaskModel[]) => void;
+    get removeTask(): (taskId: PropertyKey) => void;
+    get removeTasks(): (taskIds: PropertyKey[]) => void;
+    get updateRow(): (model: RowModel) => void;
+    get updateRows(): (models: RowModel[]) => void;
     get getRow(): (resourceId: any) => SvelteRow;
     get getTask(): (id: any) => SvelteTask;
     get getTasks(): (resourceId: any) => any;
+    get updateLayoutSync(): (_invalidateFull?: boolean) => void;
+    get updateLayout(): () => void;
 }
 export {};

svelte/utils/dom.d.ts

@@ -31,1 +31,2 @@ export declare function isLeftClick(event: any): boolean;
 export declare function throttle<F extends (...args: any[]) => void>(func: F, limit: number): F;
+export declare const scrollIfOutOfBounds: (event: MouseEvent, scrollable: HTMLElement) => void;

svelte/utils/dom.js

@@ -98,1 +98,32 @@ export function isLeftClick(event) {
 }
+/** How much pixels near the bounds user has to drag to start scrolling */
+const DRAGGING_TO_SCROLL_TRESHOLD = 40;
+/** How much pixels does the view scroll when dragging */
+const DRAGGING_TO_SCROLL_DELTA = 40;
+function outOfBounds(event, rect) {
+    return {
+        left: event.clientX - rect.left < 0 + DRAGGING_TO_SCROLL_TRESHOLD,
+        top: event.clientY - rect.top < 0 + DRAGGING_TO_SCROLL_TRESHOLD,
+        right: event.clientX - rect.left > rect.width - DRAGGING_TO_SCROLL_TRESHOLD,
+        bottom: event.clientY - rect.top > rect.height - DRAGGING_TO_SCROLL_TRESHOLD
+    };
+}
+export const scrollIfOutOfBounds = throttle((event, scrollable) => {
+    // throttle the following
+    const mainContainerRect = scrollable.getBoundingClientRect();
+    const bounds = outOfBounds(event, mainContainerRect);
+    if (bounds.left || bounds.right) {
+        // scroll left
+        scrollable.scrollTo({
+            left: scrollable.scrollLeft + (bounds.left ? -DRAGGING_TO_SCROLL_DELTA : DRAGGING_TO_SCROLL_DELTA),
+            behavior: 'smooth'
+        });
+    }
+    if (bounds.top || bounds.bottom) {
+        // scroll top
+        scrollable.scrollTo({
+            top: scrollable.scrollTop + (bounds.top ? -DRAGGING_TO_SCROLL_DELTA : DRAGGING_TO_SCROLL_DELTA),
+            behavior: 'smooth'
+        });
+    }
+}, 250);

svelte/utils/utils.d.ts

 import { SvelteGanttDateAdapter } from './date';
-export declare class GanttUtils {
+type UtilsParams = Readonly<{
     from: number;
@@ -10,10 +10,4 @@ to: number;
     dateAdapter: SvelteGanttDateAdapter;
-    /** because gantt width is not always correct */
-    /**BlueFox 09.01.23: couldn't reproduce the above so I removed the code
-    //totalColumnDuration: number;
-    //totalColumnWidth: number;
-
-    constructor() {
-    }
-
+}>;
+export declare function createUtils(params: UtilsParams): {
     /**
@@ -26,3 +20,4 @@ * Returns position of date on a line if from and to represent length of width
     roundTo(date: number): number;
-}
+};
+export type GanttUtils = ReturnType<typeof createUtils>;
 export declare function getPositionByDate(date: number, from: number, to: number, width: number): number;
@@ -36,1 +31,10 @@ export declare function getDateByPosition(x: number, from: number, to: number, width: number): number;
 }, strict?: boolean): T[];
+export declare function isDraggable(item: {
+    draggable?: boolean;
+    enableDragging?: boolean;
+}): boolean;
+export declare function isResizable(item: {
+    resizable?: boolean;
+    enableResize?: boolean;
+}): boolean;
+export {};

svelte/utils/utils.js

@@ -1,36 +0,23 @@
-export class GanttUtils {
-    from;
-    to;
-    width;
-    magnetOffset;
-    magnetUnit;
-    magnetDuration;
-    dateAdapter;
-    /** because gantt width is not always correct */
-    /**BlueFox 09.01.23: couldn't reproduce the above so I removed the code
-    //totalColumnDuration: number;
-    //totalColumnWidth: number;
-
-    constructor() {
-    }
-
-    /**
-     * Returns position of date on a line if from and to represent length of width
-     * @param {*} date
-     */
-    getPositionByDate(date) {
-        return getPositionByDate(date, this.from, this.to, this.width);
-    }
-    getDateByPosition(x) {
-        return getDateByPosition(x, this.from, this.to, this.width);
-    }
-    roundTo(date) {
-        if (this.dateAdapter) {
-            return this.dateAdapter.roundTo(date, this.magnetUnit, this.magnetOffset);
+export function createUtils(params) {
+    return {
+        /**
+         * Returns position of date on a line if from and to represent length of width
+         * @param {*} date
+         */
+        getPositionByDate(date) {
+            return getPositionByDate(date, params.from, params.to, params.width);
+        },
+        getDateByPosition(x) {
+            return getDateByPosition(x, params.from, params.to, params.width);
+        },
+        roundTo(date) {
+            if (params.dateAdapter) {
+                return params.dateAdapter.roundTo(date, params.magnetUnit, params.magnetOffset);
+            }
+            // this does not consider the timezone, rounds only to the UTC time
+            // let value = Math.round((date - 7200000) / params.magnetDuration) * params.magnetDuration;
+            // cases where rounding to day or timezone offset is not rounded, this won't work
+            return null;
         }
-        // this does not consider the timezone, rounds only to the UTC time
-        // let value = Math.round((date - 7200000) / this.magnetDuration) * this.magnetDuration;
-        // cases where rounding to day or timezone offset is not rounded, this won't work
-        return null;
-    }
+    };
 }
@@ -73,1 +60,7 @@ export function getPositionByDate(date, from, to, width) {
 }
+export function isDraggable(item) {
+    return item.draggable ?? item.enableDragging ?? true;
+}
+export function isResizable(item) {
+    return item.resizable ?? item.enableResize ?? true;
+}

types/src/core/api.d.ts

@@ -1,10 +0,149 @@
-export declare class GanttApi {
-    listeners: any[];
-    listenersMap: {
-        [key: string]: any;
+import type { SvelteTask, TaskModel } from "./task";
+import type { SvelteRow } from "./row";
+import type { TimeRangeModel } from "./timeRange";
+type EventController<T extends any[]> = [(handler: (arg: T) => void) => () => void, (...params: T) => void];
+type EventsAndArgs<T = any> = {
+    [Event in keyof T]: T[Event] extends any[] ? T[Event] : never;
+};
+type EventFeature<T extends EventsAndArgs> = {
+    on: {
+        [Event in keyof T]: EventController<T[Event]>[0];
     };
-    tasks?: any;
-    timeranges?: any;
-    constructor();
-    registerEvent(featureName: any, eventName: any): void;
-}
+    raise: {
+        [Event in keyof T]: EventController<T[Event]>[1];
+    };
+};
+export declare function provideGanttApi(): {
+    tasks: EventFeature<{
+        move: [TaskModel];
+        resize: [TaskModel];
+        select: [SvelteTask];
+        switchRow: [SvelteTask, SvelteRow, SvelteRow];
+        moveEnd: [TaskModel];
+        change: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        changed: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        dblclicked: [SvelteTask, MouseEvent];
+    }>;
+    gantt: EventFeature<{
+        viewChanged: [];
+        dateSelected: [{
+            from: number;
+            to: number;
+        }];
+    }>;
+    timeranges: EventFeature<{
+        clicked: [{
+            model: TimeRangeModel;
+        }];
+        resized: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+        changed: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+    }>;
+};
+declare function createGanttApi(): {
+    tasks: EventFeature<{
+        move: [TaskModel];
+        resize: [TaskModel];
+        select: [SvelteTask];
+        switchRow: [SvelteTask, SvelteRow, SvelteRow];
+        moveEnd: [TaskModel];
+        change: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        changed: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        dblclicked: [SvelteTask, MouseEvent];
+    }>;
+    gantt: EventFeature<{
+        viewChanged: [];
+        dateSelected: [{
+            from: number;
+            to: number;
+        }];
+    }>;
+    timeranges: EventFeature<{
+        clicked: [{
+            model: TimeRangeModel;
+        }];
+        resized: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+        changed: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+    }>;
+};
+export type GanttApi = ReturnType<typeof createGanttApi>;
+export declare function useGanttApi(): {
+    tasks: EventFeature<{
+        move: [TaskModel];
+        resize: [TaskModel];
+        select: [SvelteTask];
+        switchRow: [SvelteTask, SvelteRow, SvelteRow];
+        moveEnd: [TaskModel];
+        change: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        changed: [{
+            task: SvelteTask;
+            sourceRow: SvelteRow;
+            targetRow: SvelteRow;
+            previousState: any;
+        }];
+        dblclicked: [SvelteTask, MouseEvent];
+    }>;
+    gantt: EventFeature<{
+        viewChanged: [];
+        dateSelected: [{
+            from: number;
+            to: number;
+        }];
+    }>;
+    timeranges: EventFeature<{
+        clicked: [{
+            model: TimeRangeModel;
+        }];
+        resized: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+        changed: [{
+            model: TimeRangeModel;
+            left: number;
+            width: number;
+        }];
+    }>;
+};
+export {};

types/src/core/column.d.ts

@@ -16,10 +16,21 @@ export interface HighlightedDurations {
 }
+type ColumnServiceParams = {
+    readonly columns: Column[];
+    readonly magnetDuration: number;
+};
+export declare function createColumnService(params: ColumnServiceParams): {
+    getColumnByDate: (date: number) => Column;
+    getColumnByPosition: (x: number) => Column;
+    getPositionByDate(date: number): number;
+    getDateByPosition(x: number): number;
+    /**
+     * TODO: remove, currently unused
+     * @param {number} date - Date
+     * @returns {number} rounded date passed as parameter
+     */
+    roundTo(date: number): number;
+};
 export declare function findByPosition(columns: Column[], x: number): Column[];
 export declare function findByDate(columns: Column[], x: number): Column[];
-export interface ColumnService {
-    getColumnByDate(date: any): Column;
-    getColumnByPosition(x: any): Column;
-    getPositionByDate(date: any): number;
-    getDateByPosition(x: any): number;
-    roundTo(date: any): number;
-}
+export type ColumnService = ReturnType<typeof createColumnService>;
+export {};

types/src/core/drag/draggable.d.ts

@@ -41,2 +41,6 @@ export interface DraggableOptions {
 };
+/**
+ * Applies dragging interaction to gantt elements
+ */
+export declare function createDraggable(options: DraggableOptions): (event: PointerEvent) => void;
 export {};

types/src/core/drag/index.d.ts

 export * from './draggable';
 export * from './dragDropManager';
-export { default as DragContextProvider } from './DragContextProvider.svelte';
-export type { DragContext } from './DragContextProvider';
+export { default as DraggableGroup } from './DraggableGroup.svelte';
+export { default as Draggable } from './Draggable.svelte';
+export type { DragContext } from './DragContext';

types/src/core/row.d.ts

 export interface RowModel {
+    /**
+     * Id of row, every resource needs to have a unique one
+     */
     id: PropertyKey;
@@ -6,14 +9,36 @@ label: string;
     contentHtml?: string;
+    height: number;
+    /**
+     * enable dragging to row
+     * @deprecated use draggable
+     **/
     enableDragging?: boolean;
+    /**
+     * enable dragging to row
+     **/
+    draggable?: boolean;
+    /**
+     * enable resizing on row
+     * @deprecated use resizable
+     */
     enableResize?: boolean;
-    height: number;
+    /**
+     * enable resizing on row
+     */
+    resizable?: boolean;
     /** Child rows in expandable tree */
     children?: RowModel[];
+    expanded?: boolean;
     /** Content of row header, html string */
     headerHtml?: string;
-    /** Class of icon in row header */
+    /**
+     * Class of icon in row header
+     * @deprecated
+     **/
     iconClass?: string;
-    /** Url of image in row header */
+    /**
+     * Url of image in row header
+     * @deprecated
+     **/
     imageSrc?: string;
-    expanded?: boolean;
 }
@@ -31,14 +56,7 @@ export interface SvelteRow {
 }
-export declare class RowFactory {
+export type CreateRowParams = {
     rowHeight: number;
-    constructor();
-    createRow(row: RowModel, y: number): SvelteRow;
-    createRows(rows: RowModel[]): any[];
-    createChildRows(rowModels: RowModel[], ctx: {
-        y: number;
-        result: SvelteRow[];
-    }, parent?: SvelteRow, level?: number, parents?: SvelteRow[]): {
-        rows: any[];
-        allRows: any[];
-    };
-}
+};
+export declare function createRows(rows: RowModel[], params: CreateRowParams): any[];
+export declare function expandRow(row: SvelteRow): void;
+export declare function collapseRow(row: SvelteRow): void;

types/src/core/store.d.ts

@@ -7,3 +7,3 @@ /// <reference path="svelte.d.ts" />
 import type { SvelteTimeRange } from './timeRange';
-interface EntityState<T, K = PropertyKey> {
+export interface EntityState<T, K = PropertyKey> {
     ids: K[];
@@ -44,9 +44,4 @@ entities: {
     rowTaskCache: Readable<{}>;
-    draggingTaskCache: import("svelte/store").Writable<{
-        [id: string]: boolean;
-        [id: number]: boolean;
-        [id: symbol]: boolean;
-    }>;
 };
 export type GanttDataStore = ReturnType<typeof createDataStore>;
 export {};

types/src/core/task.d.ts

 import type { SvelteRow } from './row';
-import type { ColumnService } from './column';
 export interface TaskModel {
+    /** id of task, every task needs to have a unique one */
     id: PropertyKey;
     resourceId: PropertyKey;
+    /** date task starts on */
     from: number;
+    /** date task ends on */
     to: number;
+    /**
+     * completion %, indicated on task
+     * @deprecated
+     */
     amountDone?: number;
+    /** css classes */
     classes?: string | string[];
+    /** label of task */
     label?: string;
+    /** html content of task, will override label */
     html?: string;
+    /**
+     * show button bar
+     * @deprecated
+     **/
     showButton?: boolean;
+    /**
+     * button classes, useful for fontawesome icons
+     * @deprecated
+     **/
     buttonClasses?: string | string[];
+    /**
+     * html content of button
+     * @deprecated
+     */
     buttonHtml?: string;
+    /**
+     * enable dragging of task
+     * @deprecated use draggable
+     **/
     enableDragging?: boolean;
+    /**
+     * enable dragging of task
+     **/
+    draggable?: boolean;
+    /**
+     * enable resizing of task
+     * @deprecated use resizable
+     */
     enableResize?: boolean;
+    /**
+     * enable resizing of task
+     */
+    resizable?: boolean;
+    /**
+     * label displayed below
+     * @deprecated
+     **/
     labelBottom?: string;
@@ -31,22 +72,17 @@ type?: 'milestone' | 'task';
     originalId?: PropertyKey;
-    intersectsWith?: SvelteTask[];
-    numYSlots?: number;
-    yPos?: number;
 }
-export declare class TaskFactory {
-    columnService: ColumnService;
+type CreateTaskParams = {
     rowPadding: number;
     rowEntities: {
-        [key: number]: SvelteRow;
+        [rowId: PropertyKey]: SvelteRow;
     };
-    constructor(columnService: ColumnService);
-    createTask(model: TaskModel): SvelteTask;
-    createTasks(tasks: TaskModel[]): SvelteTask[];
-    row(resourceId: any): SvelteRow;
-    getHeight(model: any): number;
-    getPosY(model: any): number;
-}
-export declare function overlap(one: SvelteTask, other: SvelteTask): boolean;
-export declare function reflectTask(task: SvelteTask, row: SvelteRow, options: {
-    rowPadding: number;
-}): SvelteTask;
+    getPositionByDate(date: any): number;
+};
+export declare function createTaskFactory(params: CreateTaskParams): {
+    createTask: (model: TaskModel) => SvelteTask;
+    reflectTask: (task: SvelteTask, targetRow: SvelteRow) => SvelteTask;
+};
+export declare function createTask(model: TaskModel, params: CreateTaskParams): SvelteTask;
+export declare function overlap(left: SvelteTask, right: SvelteTask): boolean;
+export declare function reflectTask(task: SvelteTask, targetRow: SvelteRow, params: CreateTaskParams): SvelteTask;
+export {};

types/src/gantt.d.ts

@@ -6,4 +6,4 @@ /// <reference types="svelte" />
 import type { DragDropManager } from './core/drag';
-import type { RowModel, RowFactory, SvelteRow } from './core/row';
-import type { TaskModel, TaskFactory, SvelteTask } from './core/task';
+import type { RowModel, SvelteRow } from './core/row';
+import type { TaskModel, SvelteTask } from './core/task';
 import type { TimeRangeModel, TimeRangeFactory } from './core/timeRange';
@@ -35,8 +35,16 @@ import type { GanttUtils } from './utils/utils';
     scrollables: any[];
-    hoveredRow: Writable<number>;
-    selectedRow: Writable<number>;
+    hoveredRow: Writable<PropertyKey>;
+    selectedRow: Writable<PropertyKey>;
     rowContainer: HTMLElement;
     mainContainer: HTMLElement;
     mainHeaderContainer: HTMLElement;
+    updateLayout(): any;
+    expandRow(row: SvelteRow): any;
+    collapseRow(row: SvelteRow): any;
+    invalidatePosition(options: InvalidatePositionOptions): any;
 }
+export type InvalidatePositionOptions = {
+    task?: SvelteTask;
+    row?: SvelteRow;
+};
 export interface GanttContextServices {
@@ -165,4 +173,2 @@ utils: GanttUtils;
     dndManager: DragDropManager;
-    taskFactory: TaskFactory;
-    rowFactory: RowFactory;
     timeRangeFactory: TimeRangeFactory;
@@ -179,3 +185,3 @@ refreshTasks(): any;
     updateRow(model: RowModel): any;
-    updateRowss(models: RowModel[]): any;
+    updateRows(models: RowModel[]): any;
     getTask(id: any): SvelteTask;
@@ -182,0 +188,0 @@ getTasks(resourceId: any): SvelteTask[];

types/src/utils/dom.d.ts

@@ -27,5 +27,6 @@ export declare function isLeftClick(event: any): boolean;
 export declare function setCursor(cursor: string, node?: HTMLElement): void;
-export declare function sortFn(prop: (element: any) => number | string): (a: any, b: any) => 1 | -1 | 0;
+export declare function sortFn(prop: (element: any) => number | string): (a: any, b: any) => 1 | 0 | -1;
 export declare function normalizeClassAttr(classes: Array<string> | string): string;
 export declare function debounce<F extends (...args: any[]) => void>(func: F, wait: number, immediate?: boolean): F;
 export declare function throttle<F extends (...args: any[]) => void>(func: F, limit: number): F;
+export declare const scrollIfOutOfBounds: (event: MouseEvent, scrollable: HTMLElement) => void;

types/src/utils/utils.d.ts

 import { SvelteGanttDateAdapter } from './date';
-export declare class GanttUtils {
+type UtilsParams = Readonly<{
     from: number;
@@ -10,10 +10,4 @@ to: number;
     dateAdapter: SvelteGanttDateAdapter;
-    /** because gantt width is not always correct */
-    /**BlueFox 09.01.23: couldn't reproduce the above so I removed the code
-    //totalColumnDuration: number;
-    //totalColumnWidth: number;
-
-    constructor() {
-    }
-
+}>;
+export declare function createUtils(params: UtilsParams): {
     /**
@@ -26,3 +20,4 @@ * Returns position of date on a line if from and to represent length of width
     roundTo(date: number): number;
-}
+};
+export type GanttUtils = ReturnType<typeof createUtils>;
 export declare function getPositionByDate(date: number, from: number, to: number, width: number): number;
@@ -36,1 +31,10 @@ export declare function getDateByPosition(x: number, from: number, to: number, width: number): number;
 }, strict?: boolean): T[];
+export declare function isDraggable(item: {
+    draggable?: boolean;
+    enableDragging?: boolean;
+}): boolean;
+export declare function isResizable(item: {
+    resizable?: boolean;
+    enableResize?: boolean;
+}): boolean;
+export {};

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

Total package byte prevSize

1449375

increased by3.7%

Number of package files

146

increased by0.69%

Lines of code

21713

increased by8.26%

No dependency changes