fix some issues with updateRow methods #231

packages/docs-mdsvex/src/lib/components/NavBar.svelte

@@ -10,6 +10,7 @@
  import ArrowRightIcon from '$lib/icons/ArrowRightIcon.svelte';
  import { meta } from '$lib/store';
  import SvelteGanttLogo from '$lib/icons/SvelteGanttLogo.svelte';
+ import { base } from '$app/paths';
 
  const dispatch = createEventDispatcher();
  let theme = 'light';
@@ -26,7 +27,7 @@
  <!-- width 8xl when docs, h-18/h-32 -->
  <div class="flex items-center py-4 mx-4 border-b lg:border-0 border-slate-900/10 h-20">
  <div class="logo">
- <Button href="/" class="block">
+ <Button href="{base}/" class="block">
  <span class="flex items-center">
  <SvelteGanttLogo class="inline-block size-12 mr-2" /> svelte-gantt
  </span>

packages/svelte-gantt/src/Gantt.svelte

@@ -20,7 +20,7 @@
  import { TaskFactory, reflectTask } 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';
  import { DragDropManager, DragContextProvider } from './core/drag';
  import type { DragContext } from './core/drag';
@@ -43,7 +43,7 @@
  }
  }
 
- export let rows;
+ export let rows: RowModel[];
  export let tasks: TaskModel[] = [];
  export let timeRanges = [];
 
@@ -301,7 +301,8 @@
  const ganttContext = {
  scrollables,
  hoveredRow,
- selectedRow
+ selectedRow,
+ updateYPositions,
  };
  setContext('gantt', ganttContext);
 
@@ -674,8 +675,8 @@
  }
 
  export function updateRow(model) {
- const row = rowFactory.createRow(model, null);
- rowStore.upsert(row);
+ const results = rowFactory.createRows([...rows, model]);
+ rowStore.upsertAll(results);
  }
 
  export function updateRows(rowModels) {
@@ -813,7 +814,10 @@
  row.y = top;
  const heightBefore = row.height;
  row.height = row.model.height || rowHeight;
- top += row.height;
+ if (!row.hidden) {
+ top += row.height;
+ }
+
  if (heightBefore != row.height) {
  changed = true;
  }
@@ -842,7 +846,10 @@
  expandRow: layout === 'expand'
  });
  }
- top += row.height;
+
+ if (!row.hidden) {
+ top += row.height;
+ }
  if (heightBefore != row.height) {
  changed = true;
  }
@@ -852,6 +859,23 @@
  layoutChanged = {};
  }
 
+ function updateYPositions() {
+ let y = 0;
+ $rowStore.ids.forEach(id => {
+ const row = $rowStore.entities[id];
+ if (!row.hidden) {
+ $rowStore.entities[id].y = y;
+ y += row.height;
+ }
+ });
+
+ $taskStore.ids.forEach(id => {
+ const task = $taskStore.entities[id];
+ const row = $rowStore.entities[task.model.resourceId];
+ $taskStore.entities[id].top = row.y + rowPadding;
+ });
+ }
+
  /** enable create task by dragging */
  export let enableCreateTask = false;
  export let onCreateTask = (e: { from: number; to: number; resourceId: PropertyKey; }) => {

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

@@ -40,14 +40,12 @@ export class RowFactory {
  // 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;
+ row.classes = row.classes ?? '';
  // 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;
+ row.enableDragging = row.enableDragging ?? true;
+ row.enableResize = row.enableResize ?? true;
  // height of row element
- const height = row.height || this.rowHeight;
+ const height = row.height ?? this.rowHeight;
 
  return {
  model: row,
@@ -76,7 +74,7 @@ export class RowFactory {
  parents = [...parents, parent];
  }
 
- rowModels.forEach(rowModel => {
+ for (const rowModel of rowModels) {
  const row = this.createRow(rowModel, ctx.y);
  ctx.result.push(row);
  rowsAtLevel.push(row);
@@ -87,7 +85,7 @@ export class RowFactory {
  row.allParents = parents;
  if (parent) {
  // when row is hidden, other rows (y-pos) move upward
- row.hidden = !(parent.model.expanded || parent.model.expanded == null);
+ row.hidden = !(parent.model.expanded || parent.model.expanded == null) || parent.hidden != null && parent.hidden;
  }
 
  if (!row.hidden) {
@@ -106,7 +104,8 @@ export class RowFactory {
  row.allChildren = nextLevel.allRows;
  allRows.push(...nextLevel.allRows);
  }
- });
+ }
+
  return {
  rows: rowsAtLevel,
  allRows

packages/svelte-gantt/src/gantt.ts

@@ -38,6 +38,7 @@ export interface GanttContext {
  rowContainer: HTMLElement;
  mainContainer: HTMLElement;
  mainHeaderContainer: HTMLElement;
+ updateYPositions();
 }
 
 export interface GanttContextServices {
@@ -181,7 +182,7 @@ export interface SvelteGanttComponent extends Component<SvelteGanttOptions> {
  updateTask(model: TaskModel);
  updateTasks(models: TaskModel[]);
  updateRow(model: RowModel);
- updateRowss(models: RowModel[]);
+ updateRows(models: RowModel[]);
  getTask(id): SvelteTask;
  getTasks(resourceId): SvelteTask[];
  getRow(id): SvelteRow;

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

@@ -25,7 +25,7 @@
  const { headerHeight, bottomScrollbarVisible } = getContext('dimensions');
  const { rowPadding, rowHeight } = getContext('options');
  const { rowStore, taskStore } = getContext('dataStore');
- const { scrollables } = getContext('gantt');
+ const { scrollables, updateYPositions } = getContext('gantt');
 
  onMount(() => {
  dispatch('init', { module: this });
@@ -71,23 +71,6 @@
  updateYPositions();
  }
 
- function updateYPositions() {
- let y = 0;
- $rowStore.ids.forEach(id => {
- const row = $rowStore.entities[id];
- if (!row.hidden) {
- $rowStore.entities[id].y = y;
- y += $rowHeight;
- }
- });
-
- $taskStore.ids.forEach(id => {
- const task = $taskStore.entities[id];
- const row = $rowStore.entities[task.model.resourceId];
- $taskStore.entities[id].top = row.y + $rowPadding;
- });
- }
-
  function hide(children) {
  children.forEach(row => {
  if (row.children) hide(row.children);

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

@@ -21,7 +21,7 @@
 <div
  data-row-id={row.model.id}
  style="height:{row.height}px"
- class="sg-table-row {row.model.classes || ''}"
+ class="sg-table-row {row.model.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}