add custom event emitters

dev/index.ts

@@ -49,6 +49,8 @@ timeline.addRessource(rows[3]);
 
 timeline.addEvents(timeslots)
 timeline.addEventListener("item-selected",(e)=>{console.log((e as CustomEvent).detail)})
+timeline.addEventListener("change-event",(e)=>{console.log((e as CustomEvent).detail)})
+timeline.addEventListener("reorder-ressource",(e)=>{console.log((e as CustomEvent).detail)})
 
 title = document.createElement("h2");
 title.innerText = "Generic Timeline"

src/Ressource.ts

@@ -51,8 +51,8 @@ export class Ressource implements IRessource,Selectable{
     get show():boolean{
         return this.parent === undefined ? true : (this.parent.show && ! this.parent.collapseChildren);
     }
-    childOf(potentialParent:IRessource):boolean{
-        return this.parent === undefined ? false : (this.parent.id === potentialParent.id || this.parent.childOf(potentialParent)); 
+    descendantOf(potentialParent:IRessource):boolean{
+        return this.parent === undefined ? false : (this.parent.id === potentialParent.id || this.parent.descendantOf(potentialParent)); 
     }
     toPlainObject(parent:IRessource | undefined):IRessource{
         return {

src/Timeline.ts

@@ -372,7 +372,6 @@ class Timeline extends LitElement {
         }
         this.legend = legend;
     }
-
     _handleResizeX(e: CustomEvent<number>):void {
         e.stopPropagation();
         this.ressourceWidth += e.detail
@@ -407,13 +406,14 @@ class Timeline extends LitElement {
             const startPos = evt.clientX;
             const localSlot = slot
             const localDir = direction;
-            const startDate = slot[direction];
-
+            const initialDate = slot[direction];
             const resizeListener = (e: MouseEvent) => {
-                const newDate = dayjs(startDate).add(Math.round((e.clientX - startPos) / this.slotWidth) * this.slotDuration, "m").toDate();
+                const newDate = dayjs(initialDate).add(Math.round((e.clientX - startPos) / this.slotWidth) * this.slotDuration, "m").toDate();
                 if (direction === "start" ? (newDate < localSlot.end) : (localSlot.start < newDate)) {
-                    localSlot[localDir] = newDate;
-                    this.updateEventById(slot.id);
+                    if(localSlot[localDir] !== newDate){
+                        localSlot[localDir] = newDate
+                        this.updateEventById(slot.id);
+                    }
                 }
             }
 
@@ -421,7 +421,14 @@ class Timeline extends LitElement {
                 window.removeEventListener("mousemove", resizeListener)
                 window.removeEventListener("mouseup", mouseUpListener)
                 localSlot.moving = false;
-                this.updateEventById(slot.id);
+                this.updateEventById(localSlot.id);
+
+                if(initialDate!==localSlot[localDir]){
+                    const cEvt =  new CustomEvent("event-change",{
+                        detail: { items:[localSlot] }
+                    })
+                    this.dispatchEvent(cEvt);
+                }
             }
             localSlot.moving = true
             window.addEventListener("mousemove", resizeListener)
@@ -433,13 +440,13 @@ class Timeline extends LitElement {
             evt.stopPropagation();
             evt.preventDefault();
 
-            const startPos = evt.clientX;
+            const startPos:number = evt.clientX;
             let hasChanged = false;
-            const localSlot = slot;
+            const localSlot:Event = slot;
             // Register all current selected timeslot     
             let localSlots: Array<Event> = this.selectedList.filter(s => s instanceof Event).map(s => s as Event);
             if (! localSlots.includes(localSlot)){
-                localSlots=[localSlot]
+                localSlots = [localSlot]
             }
             const startDates = localSlots.map(slot => slot.start);
             const endDates = localSlots.map(slot => slot.end);
@@ -470,7 +477,7 @@ class Timeline extends LitElement {
             } : (_e: MouseEvent) => { return false };
 
             const moveListener = (e: MouseEvent) => {
-                // force the handling of potential position move 
+                // Evaluate the updatePosition to avoid || collapse
                 const a = updatePosition(e);
                 if (updateRessource(e) || a) {
                     hasChanged = true;
@@ -483,6 +490,12 @@ class Timeline extends LitElement {
                 window.removeEventListener("mouseup", mouseUpListener);
                 localSlot.moving = false;
                 this.updateEventById(slot.id);
+                if(hasChanged){
+                    const cEvt =  new CustomEvent("event-change",{
+                        detail: { items:localSlots }
+                    })
+                    this.dispatchEvent(cEvt);
+                }
                 callback(e,hasChanged);
             }
             localSlot.moving = true;
@@ -497,14 +510,14 @@ class Timeline extends LitElement {
         });
         this.selectedList = []
     }
-    private _clearSelectionhandler = (_e: MouseEvent)=>{
+    private _clearSelectionHandler = (_e: MouseEvent)=>{
         this._clearSelectedItems()
-        window.removeEventListener("click",this._clearSelectionhandler);
+        window.removeEventListener("click",this._clearSelectionHandler);
     }
     private _getEventClickHandler(clickedItem: Selectable) {
         const item = clickedItem;
         return (e: MouseEvent, wasModified = false) => {
-            e.stopPropagation()
+            e.stopPropagation();
             const idx = this.selectedList.indexOf(item)
             if (idx > -1) {
                 if(! wasModified){
@@ -530,7 +543,6 @@ class Timeline extends LitElement {
                 composed: true
             });
             this.dispatchEvent(myEvent);
-            
         };
     }
     firstUpdated():void {
@@ -636,7 +648,7 @@ class Timeline extends LitElement {
                 // Check if destination is not child of parent
                 const src = this.getRessourceFromId(srcId) as Ressource;
                 const destination = this.getRessourceFromId(destinationId) as Ressource;
-                if(destination.childOf(src)){
+                if(destination.descendantOf(src)){
                     return
                 }      
                 // Remove src item from the current Ressource
@@ -651,7 +663,7 @@ class Timeline extends LitElement {
                     if (event.target.classList.contains("jc-ressource-below")){
                         idx += 1;
                         while((idx < this.rows.length) 
-                            && this.rows[idx].childOf(destination)){
+                            && this.rows[idx].descendantOf(destination)){
                             idx += 1;
                         } 
                     }
@@ -661,6 +673,9 @@ class Timeline extends LitElement {
                 // Add moved children and associated slots
                 this.addRessources(movedContent.ressources);
                 this.addEvents(movedContent.items);
+                this.dispatchEvent(new CustomEvent("reorder-ressource",{
+                    detail:{ressources:this.rows}
+                }))
             }
         }
     }
@@ -715,7 +730,7 @@ class Timeline extends LitElement {
         </table>
         <horizontal-resizer @resize-x="${this._handleResizeX}"></horizontal-resizer>
         <div class="jc-timeline-grid-container">
-          <table  style="width:${nCol * this.slotWidth}px;">
+          <table style="width:${nCol * this.slotWidth}px;">
               <colgroup>${columns.map(_o=>html`<col style="min-width:${this.slotWidth}px">`)}</colgroup>
               
               <tbody>