add update ressource interface

lib/Timeline.d.ts

@@ -1,4 +1,3 @@
-import { Dayjs } from 'dayjs';
 import { LitElement, TemplateResult } from 'lit-element';
 import { Event, IEvent } from './Event';
 import { Ressource, IRessource } from './Ressource';
@@ -10,6 +9,7 @@ export interface TimelineOptions {
 interface TimelineContent {
     ressources: Array<Ressource>;
     items: Array<Event>;
+    index: number;
 }
 declare type dayjsUnit = "y" | "M" | "d" | "h" | "m" | 's';
 export declare type UnitLegend = {
@@ -49,6 +49,7 @@ declare class Timeline extends LitElement {
     _removeRessourceById(id: string, depth?: number): TimelineContent;
     getRessources(): Array<Ressource>;
     getRessourceFromId(id: string): Ressource | null;
+    updateRessource<K extends keyof Ressource>(id: string, key: K, value: Ressource[K]): void;
     setRowsTitle(title: string): void;
     getEventById(id: string): Event | undefined;
     addEvents(list: Array<IEvent>): Array<Event | undefined>;
@@ -58,22 +59,22 @@ declare class Timeline extends LitElement {
     private _updateEventPosition;
     getEvents(): Array<Event>;
     updateLegend(): void;
-    _handleResizeX(e: CustomEvent<number>): void;
-    _grabHeader(e: MouseEvent): void;
-    _getEventResizerHandler(slot: Event, direction: "end" | "start"): (evt: MouseEvent) => void;
-    _getEventGrabHandler(slot: Event, editable: boolean, ressourceEditable: boolean, callback: (e: MouseEvent, wasModified: boolean) => void): (evt: MouseEvent) => void;
+    private _handleResizeX;
+    private _grabHeader;
+    private _getEventResizerHandler;
+    private _getEventGrabHandler;
     private _clearSelectedItems;
     private _clearSelectionHandler;
     private _getEventClickHandler;
     firstUpdated(): void;
     renderTimeslot(evt: Event): TemplateResult;
-    _getCollapseRessourceHandler(item: Ressource): (e: MouseEvent) => void;
-    _onRessourceDragStart(item: Ressource): (event: DragEvent) => void;
-    _onRessourceDragEnter(event: DragEvent): void;
-    _onRessourceDragLeave(event: DragEvent): void;
-    _onRessourceDrop(event: DragEvent): void;
+    private _getCollapseRessourceHandler;
+    private _onRessourceDragStart;
+    private _onRessourceDragEnter;
+    private _onRessourceDragLeave;
+    private _onRessourceDrop;
     renderRessource(item: Ressource): TemplateResult;
-    renderGridRow(columns: Array<Dayjs>, rowId?: number, height?: number): TemplateResult;
+    private renderGridRow;
     render(): TemplateResult;
 }
 export default Timeline;

lib/Timeline.js

@@ -134,13 +134,14 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         return this._removeRessourceById(id);
     }
     _removeRessourceById(id, depth = 0) {
-        const output = { ressources: [], items: [] };
+        const output = { ressources: [], items: [], index: 0 };
         for (let i = 0; i < this.rows.length; i) {
             const ressource = this.rows[i];
             if (ressource.id === id) {
+                output.index = i;
                 output.ressources.push(ressource);
                 if (ressource.parent && depth === 0) {
-                    ressource.parent.children = ressource.parent.children.filter(o => o.id !== ressource.id);
+                    ressource.parent.children = ressource.parent.children.filter(o => o.id !== id);
                 }
                 this.rows.splice(i, 1);
             }
@@ -164,6 +165,22 @@ let Timeline = class Timeline extends lit_element_1.LitElement {
         const tmp = this.rows.filter(r => r.id === id);
         return tmp.length > 0 ? tmp[0] : null;
     }
+    updateRessource(id, key, value) {
+        const ressource = this.getRessourceFromId(id);
+        if (ressource) {
+            if (key == "parent") {
+                const content = this.removeRessourceById(id);
+                ressource[key] = value;
+                this.addRessource(ressource);
+                this.addRessources(content.ressources);
+                this.addEvents(content.items);
+            }
+            else {
+                ressource[key] = value;
+                this.rows.splice(this.rows.findIndex(r => r.id == ressource.id), 1, ressource);
+            }
+        }
+    }
     setRowsTitle(title) {
         this.rowsTitle = title;
     }

src/Timeline.ts

@@ -21,6 +21,7 @@ export interface TimelineOptions {
 interface TimelineContent {
     ressources: Array<Ressource>
     items: Array<Event>
+    index:number
 }
 interface TimeInterval {
     start: number,
@@ -191,15 +192,16 @@ class Timeline extends LitElement {
         return this._removeRessourceById(id);
     }
     _removeRessourceById(id: string, depth = 0):TimelineContent{
-        const output: TimelineContent = { ressources: [], items: [] };
+        const output: TimelineContent = { ressources: [], items: [], index:0 };
 
         for (let i = 0; i < this.rows.length; i) {
             const ressource = this.rows[i];
             if (ressource.id === id) {
+                output.index = i;
                 output.ressources.push(ressource);
                 // remove the top level children from it's parent.
                 if (ressource.parent && depth === 0 ){
-                    ressource.parent.children = ressource.parent.children.filter(o=> o.id !== ressource.id)
+                    ressource.parent.children = ressource.parent.children.filter(o=> o.id !== id)
                 }
                 this.rows.splice(i, 1);
             } else if (ressource.parentId === id) {
@@ -224,6 +226,22 @@ class Timeline extends LitElement {
         const tmp = this.rows.filter(r=>r.id===id)
         return tmp.length > 0 ? tmp[0] : null;
     }
+    updateRessource<K extends keyof Ressource>(id:string,key:K,value:Ressource[K]):void{
+        const ressource = this.getRessourceFromId(id);
+        if(ressource){
+        
+        if (key == "parent") {
+            const content = this.removeRessourceById(id);
+            ressource[key] = value;
+            this.addRessource(ressource)
+            this.addRessources(content.ressources);
+            this.addEvents(content.items);
+          } else {
+            ressource[key] = value;
+            this.rows.splice(this.rows.findIndex(r=>r.id==ressource.id), 1, ressource);
+          }
+        }
+    }
     setRowsTitle(title: string):void {
         this.rowsTitle = title;
     }
@@ -372,14 +390,14 @@ class Timeline extends LitElement {
         }
         this.legend = legend;
     }
-    _handleResizeX(e: CustomEvent<number>):void {
+    private _handleResizeX(e: CustomEvent<number>):void {
         e.stopPropagation();
         this.ressourceWidth += e.detail
         if (this.ressourceWidth < 0) {
             this.ressourceWidth = 0
         }
     }
-    _grabHeader(e: MouseEvent):void {
+    private _grabHeader(e: MouseEvent):void {
         const root = this.shadowRoot;
         if (root !== null) {
             const gridContainer = root.querySelector(".jc-timeline-grid-container") as HTMLBaseElement;
@@ -399,7 +417,7 @@ class Timeline extends LitElement {
             window.addEventListener("mouseup", mouseUpListener)
         }
     }
-    _getEventResizerHandler(slot: Event, direction: "end" | "start") {
+    private _getEventResizerHandler(slot: Event, direction: "end" | "start") {
         return (evt: MouseEvent):void => {
             evt.stopPropagation();
             evt.preventDefault()
@@ -435,7 +453,7 @@ class Timeline extends LitElement {
             window.addEventListener("mouseup", mouseUpListener)
         }
     }
-    _getEventGrabHandler(slot: Event, editable: boolean, ressourceEditable: boolean, callback: (e: MouseEvent, wasModified:boolean) => void) {
+    private _getEventGrabHandler(slot: Event, editable: boolean, ressourceEditable: boolean, callback: (e: MouseEvent, wasModified:boolean) => void) {
         return (evt: MouseEvent):void => {
             evt.stopPropagation();
             evt.preventDefault();
@@ -614,7 +632,7 @@ class Timeline extends LitElement {
 
 
     }
-    _getCollapseRessourceHandler(item:Ressource):(e:MouseEvent)=>void{
+    private _getCollapseRessourceHandler(item:Ressource):(e:MouseEvent)=>void{
         return (_e:MouseEvent) => {
             item.collapseChildren = ! item.collapseChildren;
             this._updateEventPosition(item);
@@ -622,23 +640,23 @@ class Timeline extends LitElement {
             this.rows = [...this.rows];
         };
     }
-    _onRessourceDragStart(item:Ressource):(event:DragEvent)=>void{
+    private _onRessourceDragStart(item:Ressource):(event:DragEvent)=>void{
         return (event:DragEvent):void=>{
           event.dataTransfer?.setData("text", item.id);
         }
     }
-    _onRessourceDragEnter(event:DragEvent):void{
+    private _onRessourceDragEnter(event:DragEvent):void{
         if (event.target instanceof HTMLElement){
             const tgt = event.target;
             tgt.classList.add("target");
         }
     }
-    _onRessourceDragLeave(event:DragEvent):void{
+    private _onRessourceDragLeave(event:DragEvent):void{
         if (event.target instanceof HTMLElement){
             event.target.classList.remove("target");
         }
     }
-    _onRessourceDrop(event:DragEvent):void{
+    private _onRessourceDrop(event:DragEvent):void{
         event.preventDefault()
         if (event.target instanceof HTMLElement){
             event.target.classList.remove("target");
@@ -696,7 +714,7 @@ class Timeline extends LitElement {
                     </tr>`;
 
     }
-    renderGridRow(columns: Array<Dayjs>, rowId = -1, height = 30): TemplateResult {
+    private renderGridRow(columns: Array<Dayjs>, rowId = -1, height = 30): TemplateResult {
         return html`<tr row-id="${rowId}">${columns.map((d,i) => html`<td style="height:${height}px;" class="jc-slot ${(i % this.legendSpan) === 0 ? "jc-major-slot" :""}" start="${d.toISOString()}">&nbsp;</td>`)}</tr>`
     }
     render():TemplateResult {