Make row.model.expaded control the expanded state

#194

README.md

@@ -165,7 +165,7 @@ Rows are defined as a list of objects. Rows can be rendered as a collapsible tre
 - `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` {`Array`} List of children row objects, these can have their own children.
-- `expanded` {`Boolean`} {`optional`} Property of the row, if false, row will be closed on first load
+- `expanded` {`Boolean`} {`optional`} Used when tree view is enabled, controls the expanded state.
 
 ## Task
 

src/column/ColumnHeaderRow.svelte

@@ -22,7 +22,7 @@
  label: dateAdapter.format(column.from, header.format)
  }));
  } else {
- const periods = getAllPeriods($from.valueOf(), $to.valueOf(), header.unit);
+ const periods = getAllPeriods($from.valueOf(), $to.valueOf(), header.unit, header.offset);
  let distance_point = 0;
  let left = 0;
 

src/column/canvas.ts

@@ -4,23 +4,27 @@ export function createBackground(
  columns: Column[],
  opts: { columnStrokeWidth; columnStrokeColor }
 ) {
- const canvas = document.createElement('canvas');
- canvas.width = (columns.length - 1) * columns[0].width;
- canvas.height = 20;
- const ctx = canvas.getContext('2d');
- ctx.shadowColor = 'rgba(128,128,128,0.5)';
- ctx.shadowOffsetX = 0;
- ctx.shadowOffsetY = 0;
- ctx.shadowBlur = 0.5;
- ctx.lineWidth = opts.columnStrokeWidth;
- ctx.lineCap = 'square';
- ctx.strokeStyle = opts.columnStrokeColor;
- ctx.translate(0.5, 0.5);
- columns.forEach(column => {
- lineAt(ctx, column.left);
- });
- const dataURL = canvas.toDataURL();
- return `url("${dataURL}")`;
+ try {
+ const canvas = document.createElement('canvas');
+ canvas.width = (columns.length - 1) * columns[0].width;
+ canvas.height = 20;
+ const ctx = canvas.getContext('2d');
+ ctx.shadowColor = 'rgba(128,128,128,0.5)';
+ ctx.shadowOffsetX = 0;
+ ctx.shadowOffsetY = 0;
+ ctx.shadowBlur = 0.5;
+ ctx.lineWidth = opts.columnStrokeWidth;
+ ctx.lineCap = 'square';
+ ctx.strokeStyle = opts.columnStrokeColor;
+ ctx.translate(0.5, 0.5);
+ columns.forEach(column => {
+ lineAt(ctx, column.left);
+ });
+ const dataURL = canvas.toDataURL();
+ return `url("${dataURL}")`;
+ } catch (e) {
+ console.error('[canvas] Render error', e);
+ }
 }
 
 function lineAt(ctx, x) {

src/core/row.ts

@@ -26,7 +26,6 @@ export interface SvelteRow {
  allChildren?: SvelteRow[];
  parent?: SvelteRow;
  allParents?: SvelteRow[];
- expanded?: boolean;
  childLevel?: number;
  entities?: any;
 }
@@ -53,7 +52,6 @@ export class RowFactory {
  model: row,
  y,
  height,
- expanded: true
  };
  }
 
@@ -86,6 +84,9 @@ export class RowFactory {
  row.childLevel = level;
  row.parent = parent;
  row.allParents = parents;
+ if (parent) {
+ row.hidden = !(parent.model.expanded || parent.model.expanded == null);
+ }
 
  ctx.y += row.height;
 
@@ -95,7 +96,7 @@ export class RowFactory {
  ctx,
  row,
  level + 1,
- parents
+ parents,
  );
  row.children = nextLevel.rows;
  row.allChildren = nextLevel.allRows;

src/modules/table/Table.svelte

@@ -60,14 +60,14 @@
 
  function onRowExpanded(event) {
  const row = event.detail.row;
- row.expanded = true;
+ row.model.expanded = true;
  if (row.children) show(row.children);
  updateYPositions();
  }
 
  function onRowCollapsed(event) {
  const row = event.detail.row;
- row.expanded = false;
+ row.model.expanded = false;
  if (row.children) hide(row.children);
  updateYPositions();
  }
@@ -98,7 +98,7 @@
 
  function show(children, hidden = false) {
  children.forEach(row => {
- if (row.children) show(row.children, !row.expanded);
+ if (row.children) show(row.children, !row.model.expanded);
  row.hidden = hidden;
  });
  }

src/modules/table/TableRow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
- import { createEventDispatcher, getContext, onMount } from 'svelte';
+ import { createEventDispatcher, getContext } from 'svelte';
 
  import TableTreeCell from './TableTreeCell.svelte';
  import type { TableHeader } from './tableHeader';
@@ -17,17 +17,13 @@
  $: {
  treeIndentationStyle = row.parent ? `padding-left: ${row.childLevel * 3}em;` : '';
  }
-
- onMount(() => {
- if (row.model.expanded == false) dispatch('rowCollapsed', { row });
- });
 </script>
 
 <div
  data-row-id={row.model.id}
  style="height:{$rowHeight}px"
  class="sg-table-row {row.model.classes || ''}"
- class:sg-row-expanded={row.expanded}
+ class:sg-row-expanded={row.model.expanded}
  class:sg-hover={$hoveredRow == row.model.id}
  class:sg-selected={$selectedRow == row.model.id}
 >

src/modules/table/TableTreeCell.svelte

@@ -8,7 +8,7 @@
  const dispatch = createEventDispatcher();
 
  function onExpandToggle() {
- if (row.expanded) {
+ if (row.model.expanded || row.model.expanded == null) {
  dispatch('rowCollapsed', { row });
  } else {
  dispatch('rowExpanded', { row });
@@ -19,7 +19,7 @@
 <div class="sg-cell-inner" style="padding-left: {row.childLevel * 3}em">
  {#if row.children}
  <div class="sg-tree-expander" on:click={onExpandToggle}>
- {#if row.expanded}
+ {#if row.model.expanded}
  <i class="fas fa-angle-down"></i>
  {:else}
  <i class="fas fa-angle-right"></i>