refactor: draggable, resizable, marked some fields as deprecated

packages/docs-mdsvex/src/routes/docs/data/rows/+page.svx

@@ -19,7 +19,9 @@ Rows are defined as a list of objects. Rows can be rendered as a collapsible tre
 `classes` | `string | string[]` | Custom CSS classes to apply to row.
 `contentHtml` | `string` | Html content of row, renders as background to a row.
 `enableDragging` | `boolean` | enable dragging of tasks to and from this row. | `true`
+`draggable` | `boolean` | enable dragging of tasks to and from this row. *(deprecated)* | `true`
 `enableResize` | `boolean` | enable resize of tasks on this row. | `true`
+`resizable` | `boolean` | enable resize of tasks on this row. *(deprecated)* | `true`
 `label` | `string` | Label of row, could be any other property, can be displayed with SvelteGanttTable.
 `headerHtml` | `string` | Html content of table row header, displayed in SvelteGanttTable.
 `children` | `object[]` | List of children row objects, these can have their own children.

packages/docs-mdsvex/src/routes/docs/data/tasks/+page.svx

@@ -19,8 +19,10 @@ Tasks are intervals of time that are assigned to a resource. They are defined as
 `showButton` | `boolean` | Show button bar. | undefined |
 `buttonClasses` | `string`\|`Array` | Button classes, useful for fontawesome icons. | undefined |
 `buttonHtml` | `string` | Html content of button. | undefined |
-`enableDragging` | `boolean` | enable dragging of task. | true |
-`enableResize` | `boolean` | enable resize of task. | true |
+`draggable` | `boolean` | enable dragging of task. | true |
+`enableDragging` | `boolean` | enable dragging of task. *(deprecated)* | true |
+`resizable` | `boolean` | enable resize of task. | true |
+`resizeEnabled` | `boolean` | enable resize of task. *(deprecated)* | true |
 
 
 

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

@@ -8,6 +8,7 @@
     import type { SvelteTask } from '../task';
     import type { SvelteRow } from '../row';
     import { scrollIfOutOfBounds, setCursor } from '../../utils/dom';
+    import { isDraggable, isResizable } from '../../utils/utils';
 
     type RootState = Partial<{
         xDelta: number;
@@ -41,17 +42,12 @@
     const context: DragContext = {
         rootState: root,
         dragAllowed({ model }: SvelteTask) {
-            return (
-                $rowStore.entities[model.resourceId].model.enableDragging &&
-                model.enableDragging
-            );
+            const rowModel = $rowStore.entities[model.resourceId].model;
+            return isDraggable(rowModel) && isDraggable(model);
         },
         resizeAllowed({ model }: SvelteTask) {
-            return (
-                model.type !== 'milestone' &&
-                $rowStore.entities[model.resourceId].model.enableResize &&
-                model.enableResize
-            );
+            const rowModel = $rowStore.entities[model.resourceId].model;
+            return model.type !== 'milestone' && isResizable(rowModel) && isResizable(model);
         },
         off(taskId) {
             delete $root[taskId];

packages/svelte-gantt/src/core/row.ts

@@ -1,20 +1,47 @@
 export interface RowModel {
+    /**
+     * Id of row, every resource needs to have a unique one
+     */
     id: PropertyKey;
     label: string;
     classes?: string | 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;
 }
 
 export interface SvelteRow {
@@ -96,13 +123,6 @@ function createChildRows(
 
 function createRow(model: RowModel, y: number, params: CreateRowParams): SvelteRow {
     // defaults
-    // id of task, every task needs to have a unique one
-    //row.id = row.id || undefined;
-    // css classes
-    model.classes = model.classes ?? '';
-    // enable dragging of tasks to and from this row
-    model.enableDragging = model.enableDragging ?? true;
-    model.enableResize = model.enableResize ?? true;
     // height of row element
     const height = model.height ?? params.rowHeight;
 

packages/svelte-gantt/src/core/task.ts

@@ -41,9 +41,24 @@ export interface TaskModel {
      */
     buttonHtml?: string;
 
-    /** enable dragging of task */
+    /** 
+     * 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
@@ -85,12 +100,9 @@ export function createTaskFactory(params: CreateTaskParams) {
 
 export function createTask(model: TaskModel, params: CreateTaskParams): SvelteTask {
     model.amountDone = model.amountDone ?? 0;
-    model.classes = model.classes ?? '';
     model.showButton = model.showButton ?? false;
     model.buttonClasses = model.buttonClasses ?? '';
     model.buttonHtml = model.buttonHtml ?? '';
-    model.enableDragging = model.enableDragging ?? true;
-    model.enableResize = model.enableResize ?? true;
 
     const left = params.getPositionByDate(model.from) | 0;
     const right = params.getPositionByDate(model.to) | 0;

packages/svelte-gantt/src/entities/Row.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+    import { normalizeClassAttr } from '../utils/dom';
     import type { SvelteRow } from '../core/row';
     import { getContext } from 'svelte';
     export let row: SvelteRow;
     const { hoveredRow, selectedRow } = getContext('gantt');
+
+    $: classes = normalizeClassAttr(row.model.classes);
 </script>
 
 <div
-    class="sg-row {row.model.classes}"
+    class="sg-row {classes}"
     data-row-id={row.model.id}
     class:sg-hover={$hoveredRow == row.model.id}
     class:sg-selected={$selectedRow == row.model.id}

packages/svelte-gantt/src/entities/Task.svelte

@@ -2,6 +2,7 @@
     import { getContext } from 'svelte';
     import type { TaskModel, SvelteTask } from '../core/task';
     import { normalizeClassAttr } from '../utils/dom';
+    import { isResizable } from '../utils/utils';
 
     export let model: TaskModel;
     export let height: number;
@@ -34,17 +35,12 @@
         }
     }
 
-    let classes;
-    $: {
-        classes = model.classes ? normalizeClassAttr(model.classes) : 'sg-task-default';
-    }
+    $: classes = model.classes ? normalizeClassAttr(model.classes) : 'sg-task-default';
 
     let resizeEnabled: boolean;
     $: {
-        resizeEnabled =
-            model.type !== 'milestone' &&
-            $rowStore.entities[model.resourceId].model.enableResize &&
-            model.enableResize;
+        const rowModel = $rowStore.entities[model.resourceId].model;
+        resizeEnabled = model.type !== 'milestone' && isResizable(rowModel) && isResizable(model);
     }
 
     let _moving: boolean;

packages/svelte-gantt/src/entities/TimeRange.svelte

@@ -6,25 +6,13 @@
     export let width;
     export let resizing = false;
 
-    const _position = {
-        width,
-        x: left
-    };
-    $: {
-        _position.x = left;
-        _position.width = width;
-    }
-
-    let classes;
-    $: {
-        classes = normalizeClassAttr(model.classes);
-    }
+    $: classes = normalizeClassAttr(model.classes);
 </script>
 
 <div
     class="sg-time-range {classes}"
     class:moving={resizing}
-    style="width:{_position.width}px;left:{_position.x}px"
+    style="width:{width}px;left:{left}px"
 >
     {#if model.label}
         <div class="sg-time-range-label">{model.label}</div>

packages/svelte-gantt/src/entities/TimeRangeHeader.svelte

@@ -2,6 +2,7 @@
     import { getContext } from 'svelte';
     import { useDraggable } from '../core/drag';
     import { normalizeClassAttr } from '../utils/dom';
+    import { isResizable } from '../utils/utils';
 
     const { rowContainer } = getContext('gantt');
     const { api, utils, columnService } = getContext('services');
@@ -69,7 +70,7 @@
                 });
             },
             dragAllowed: false,
-            resizeAllowed: () => isResizable(),
+            resizeAllowed: () => isResizable(model),
             onDrop: ondrop,
             container: rowContainer,
             resizeHandleWidth,
@@ -81,10 +82,6 @@
         return { destroy: () => draggable.destroy() };
     }
 
-    function isResizable() {
-        return model.resizable !== undefined ? model.resizable : true;
-    }
-
     let classes;
     $: {
         classes = normalizeClassAttr(model.classes);
@@ -94,7 +91,7 @@
 <div
     class="sg-time-range-control {classes}"
     style="width:{_position.width}px;left:{_position.x}px"
-    class:sg-time-range-disabled={!isResizable()}
+    class:sg-time-range-disabled={!isResizable(model)}
 >
     <div class="sg-time-range-handle-left" use:drag></div>
     <div class="sg-time-range-handle-right" use:drag></div>

packages/svelte-gantt/src/modules/table/TableRow.svelte

@@ -1,27 +1,28 @@
 <script lang="ts">
-    import { createEventDispatcher, getContext } from 'svelte';
+    import { getContext } from 'svelte';
 
     import TableTreeCell from './TableTreeCell.svelte';
     import type { TableHeader } from './tableHeader';
     import type { SvelteRow } from '../../core/row';
+    import { normalizeClassAttr } from '../../utils/dom';
 
     export let headers: TableHeader[] = null;
     export let row: SvelteRow = null;
 
     const { hoveredRow, selectedRow } = getContext('gantt');
 
-    const dispatch = createEventDispatcher();
-
     let treeIndentationStyle = '';
     $: {
         treeIndentationStyle = row.parent ? `padding-left: ${row.childLevel * 3}em;` : '';
     }
+
+    $: classes = normalizeClassAttr(row.model.classes)
 </script>
 
 <div
     data-row-id={row.model.id}
     style="height:{row.height}px"
-    class="sg-table-row {row.model.classes || ''} sg-table-row-level-{row.childLevel}"
+    class="sg-table-row {classes} sg-table-row-level-{row.childLevel}"
     class:sg-row-expanded={row.model.expanded}
     class:sg-hover={$hoveredRow == row.model.id}
     class:sg-selected={$selectedRow == row.model.id}

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

@@ -93,3 +93,11 @@ export function get<T, C = number | Date>(
     const res = getIndicesOnly(input, value, comparer, strict);
     return [input[res[0]], input[res[1]]];
 }
+
+export function isDraggable(item: { draggable?: boolean; enableDragging?: boolean; }) {
+    return item.draggable ?? item.enableDragging ?? true;
+}
+
+export function isResizable(item: { resizable?: boolean; enableResize?: boolean; }) {
+    return item.resizable ?? item.enableResize ?? true;
+}