@timelinekit/core 1.0.8 → 1.0.10

package/README.md

@@ -64,18 +64,24 @@ npm install @timelinekit/react @timelinekit/core
 ```tsx
 import { useRef, useEffect } from 'react';
 import { GanttChart, GanttChartRef } from '@timelinekit/react';
-import { Task, TaskLink } from '@timelinekit/core';
 import '@timelinekit/core/styles';
 
+const data = {
+  tasks: [
+    { id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09', type: 'task', progress: 100 },
+    { id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23', type: 'task' },
+  ],
+  links: [
+    { id: 'l1', from: '1', to: '2', type: 'finishToStart' },
+  ],
+};
+
 function App() {
   const ref = useRef<GanttChartRef>(null);
 
   useEffect(() => {
-    const gantt = ref.current!;
-    const taskA = gantt.list.addTask(new Task({ id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09' }));
-    const taskB = gantt.list.addTask(new Task({ id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23' }));
-    gantt.list.addLink(new TaskLink({ id: 'l1', from: taskA, to: taskB, type: 'finishToStart' }));
-    gantt.zoomToFit();
+    ref.current!.load(JSON.stringify(data));
+    ref.current!.zoomToFit();
   }, []);
 
   return <GanttChart ref={ref} style={{ height: '600px' }} />;
@@ -89,20 +95,28 @@ npm install @timelinekit/angular @timelinekit/core
 ```
 
 ```typescript
-import { GanttChartComponent } from '@timelinekit/angular';
-import { Task, TaskLink } from '@timelinekit/core';
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import { GanttChart } from '@timelinekit/angular';
+
+const data = {
+  tasks: [
+    { id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09', type: 'task', progress: 100 },
+    { id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23', type: 'task' },
+  ],
+  links: [
+    { id: 'l1', from: '1', to: '2', type: 'finishToStart' },
+  ],
+};
 
 @Component({
-  imports: [GanttChartComponent],
-  template: `<tk-gantt-chart #gantt style="height: 600px" />`,
+  imports: [GanttChart],
+  template: `<gk-gantt-chart #gantt style="height: 600px" />`,
 })
 export class AppComponent implements AfterViewInit {
-  @ViewChild('gantt') gantt!: GanttChartComponent;
+  @ViewChild('gantt') gantt!: GanttChart;
 
   ngAfterViewInit() {
-    const taskA = this.gantt.list.addTask(new Task({ id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09' }));
-    const taskB = this.gantt.list.addTask(new Task({ id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23' }));
-    this.gantt.list.addLink(new TaskLink({ id: 'l1', from: taskA, to: taskB, type: 'finishToStart' }));
+    this.gantt.load(JSON.stringify(data));
     this.gantt.zoomToFit();
   }
 }

package/dist/ganttchart/model/task-list-adapter.d.ts

@@ -5,6 +5,8 @@ import { TaskList } from "./task-list";
 /** Adapts a TaskList to the TreeTableDataSource interface used by the sheet component. */
 export declare class TaskListAdapter implements TreeTableDataSource<Task> {
     #private;
+    /** Emits when a task is added to the list. */
+    itemAdded$: Subject<TableItemEventArgs<Task>>;
     /** Emits when a task property changes. */
     itemChanged$: Subject<TableItemEventArgs<Task>>;
     /** Emits when a task is removed from the list. */

package/dist/ganttchart/model/task-list.d.ts

@@ -49,6 +49,8 @@ export declare class TaskList {
     getLink(index: number): TaskLink;
     /** Get the index of a task in the list. */
     indexOf(task: Task): number;
+    /** Create a new Task instance wired to this list's calendar and project timeline, without adding it to the list. */
+    createTask(id?: string): Task;
     /** Append an empty placeholder row at the end of the list. */
     addEmptyTask(): Task;
     /** Insert an empty placeholder row at the given index. */