refactor project

.eslintignore

@@ -0,0 +1,6 @@
+webpack.*.js
+
+#Exclude output generated files
+lib/
+lib-esm/
+_bundles/

src/index.ts → dev/index.ts

@@ -1,9 +1,10 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { formats } from 'dayjs/locale/*';
-import Ressource from './Ressource';
-import TimeLine from './Timeline'
-import './Ressource'
-import { IEvent } from './Event';
-import dayjs, { Dayjs } from 'dayjs'
+import Ressource from '../src/Ressource';
+import TimeLine from '../src/Timeline'
+import '../src/Ressource'
+import { IEvent } from '../src/Event';
+import dayjs from 'dayjs'
 
 const emptyTimeline:TimeLine = document.createElement("jc-timeline") as TimeLine;
 let title = document.createElement("h2");

package.json

@@ -9,7 +9,7 @@
     "watch": "webpack --watch",
     "prod ": "webpack --config webpack.prod.js ",
     "serve": "webpack serve --config webpack.dev.js",
-    "export": "tsc && tsc -m es6 --outDir lib-esm"
+    "export": "tsc -m commonjs --outDir lib && tsc -m es6 --outDir lib-esm"
   },
   "keywords": [
     "typescript",

src/Timeline.ts

@@ -3,6 +3,7 @@ import { Event, IEvent } from './Event'
 
 import { Ressource, IRessource } from './Ressource'
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { HorizontalResizer } from './components/horizontal-resizer'
 import { LitElement, html, customElement, property, css, TemplateResult } from 'lit-element';
 import { styleMap } from 'lit-html/directives/style-map';
@@ -34,7 +35,6 @@ interface legendItem {
 }
 // TODO define std zoom level
 // TODO add selectable Slot 
-// TODO Improve Selected Ressource style 
 // TODO enable to rearrange between different component.
 
 
@@ -360,19 +360,19 @@ class Timeline extends LitElement {
         return this.style.getPropertyValue("--default-background");
     
     }
-    setLegendUnitFormatAll(legend:Partial<UnitLegend>){
+    setLegendUnitFormatAll(legend:Partial<UnitLegend>):void{
         this.legendUnitFormat  = {...this.legendUnitFormat, ...legend}
         this.updateLegend()
     }
-    setLegendUnitFormat(unit:dayjsUnit, format:string){
+    setLegendUnitFormat(unit:dayjsUnit, format:string):void{
         this.legendUnitFormat[unit] = format;
         this.updateLegend()
     }
-    addRessources(list:Array<IRessource>){
+    addRessources(list:Array<IRessource>):Array<Ressource | undefined>{
         return list.map(r=>this.addRessource(r));
     }
     // Ressource management
-    addRessource(ressource: IRessource): IRessource | undefined {
+    addRessource(ressource: IRessource): Ressource | undefined {
         if (this.rows.filter(o => o.id == ressource.id).length > 0) {
             return
         }
@@ -395,7 +395,7 @@ class Timeline extends LitElement {
     removeRessourceById(id: string): TimelineContent {
         return this._removeRessourceById(id);
     }
-    _removeRessourceById(id: string, depth = 0){
+    _removeRessourceById(id: string, depth = 0):TimelineContent{
         const output: TimelineContent = { ressources: [], items: [] };
 
         for (let i = 0; i < this.rows.length; i) {
@@ -429,20 +429,20 @@ class Timeline extends LitElement {
         const tmp = this.rows.filter(r=>r.id===id)
         return tmp.length > 0 ? tmp[0] : null;
     }
-    setRowsTitle(title: string) {
+    setRowsTitle(title: string):void {
         this.rowsTitle = title;
     }
-    addTimeSlots(list:Array<IEvent>){
+    addTimeSlots(list:Array<IEvent>):Array<Event | undefined>{
         return list.map((e)=>this.addTimeSlot(e));
     }
     // TimeSlot management
-    addTimeSlot(slot: IEvent): Event | null {
+    addTimeSlot(slot: IEvent): Event | undefined {
         if (this.items.filter(o => o.id == slot.id).length > 0) {
-            return null
+            return undefined
         }
         const ressource = this.rows.find(r => r.id === slot.ressourceId);
         if (ressource === undefined) {
-            return null
+            return undefined
         }
         const timeslot = Event.toTimeSlot(slot);
         this.items = [...this.items, timeslot]
@@ -534,7 +534,7 @@ class Timeline extends LitElement {
         return this.items;
     }
 
-    updateLegend() {
+    updateLegend():void {
         const legend = [];
         const legendUnitList:Array<dayjsUnit> = [ "y","M","d","h","m",'s'];
         const legendMinUnitSpan = this.slotDuration * this.legendSpan;
@@ -568,14 +568,14 @@ class Timeline extends LitElement {
         this.legend = legend;
     }
 
-    _handleResizeX(e: CustomEvent<number>) {
+    _handleResizeX(e: CustomEvent<number>):void {
         e.stopPropagation();
         this.ressourceWidth += e.detail
         if (this.ressourceWidth < 0) {
             this.ressourceWidth = 0
         }
     }
-    _grabHeader(e: MouseEvent) {
+    _grabHeader(e: MouseEvent):void {
         const root = this.shadowRoot;
         if (root !== null) {
             const gridContainer = root.querySelector(".jc-timeline-grid-container") as HTMLBaseElement;
@@ -587,7 +587,7 @@ class Timeline extends LitElement {
                 gridContainer.scrollLeft += scrollLeft
                 lastPosX = e.clientX
             }
-            const mouseUpListener = function (e: MouseEvent) {
+            const mouseUpListener = function (_e: MouseEvent) {
                 window.removeEventListener("mousemove", scroll)
                 window.removeEventListener("mouseup", mouseUpListener)
             }
@@ -596,7 +596,7 @@ class Timeline extends LitElement {
         }
     }
     _getEventResizerHandler(slot: Event, direction: "end" | "start") {
-        return (evt: MouseEvent) => {
+        return (evt: MouseEvent):void => {
             evt.stopPropagation();
             evt.preventDefault()
             const startPos = evt.clientX;
@@ -612,7 +612,7 @@ class Timeline extends LitElement {
                 }
             }
 
-            const mouseUpListener = (e: MouseEvent) => {
+            const mouseUpListener = (_e: MouseEvent):void => {
                 window.removeEventListener("mousemove", resizeListener)
                 window.removeEventListener("mouseup", mouseUpListener)
                 localSlot.moving = false;
@@ -624,7 +624,7 @@ class Timeline extends LitElement {
         }
     }
     _getEventGrabHandler(slot: Event, editable: boolean, ressourceEditable: boolean, callback: (e: MouseEvent, wasModified:boolean) => void) {
-        return (evt: MouseEvent) => {
+        return (evt: MouseEvent):void => {
             evt.stopPropagation();
             evt.preventDefault();
 
@@ -647,7 +647,7 @@ class Timeline extends LitElement {
                     slot.end = dayjs(endDates[index]).add(changeTime, "m").toDate();
                     return prevStart.getTime()!==slot.start.getTime()
                 }).reduce((prev,curr)=>prev || curr)
-            } : (e: MouseEvent) => { return false };
+            } : (_e: MouseEvent) => { return false };
 
             const updateRessource = ressourceEditable ? (e: MouseEvent) => {
                 const rowId = this.shadowRoot?.elementsFromPoint(e.clientX, e.clientY)
@@ -662,7 +662,7 @@ class Timeline extends LitElement {
                     }
                 }
                 return false;
-            } : (e: MouseEvent) => { return false };
+            } : (_e: MouseEvent) => { return false };
 
             const moveListener = (e: MouseEvent) => {
                 // force the handling of potential position move 
@@ -686,13 +686,13 @@ class Timeline extends LitElement {
         }
     }
     private _clearSelectedItems(){
-        this.selectedList.map(e => {
-            e.selected = false;
-            this.updateTimeslotById(e.id)
+        this.selectedList.map(selectable => {
+            selectable.selected = false;
+            this.updateTimeslotById(selectable.id)
         });
         this.selectedList = []
     }
-    private _clearSelectionhandler = ()=>{
+    private _clearSelectionhandler = (_e: MouseEvent)=>{
         this._clearSelectedItems()
         window.removeEventListener("click",this._clearSelectionhandler);
     }
@@ -702,14 +702,14 @@ class Timeline extends LitElement {
             e.stopPropagation()
             const idx = this.selectedList.indexOf(item)
             if (idx > -1) {
-                if(wasModified){
-                    
-                }else if (e.ctrlKey) {
-                    this.selectedList.splice(idx, 1);
-                    item.selected = false;
-                    this.updateTimeslotById(item.id)
-                } else {
-                    this._clearSelectedItems()
+                if(! wasModified){
+                    if (e.ctrlKey) {
+                        this.selectedList.splice(idx, 1);
+                        item.selected = false;
+                        this.updateTimeslotById(item.id)
+                    } else {
+                        this._clearSelectedItems()
+                    }
                 }
             } else {
                 if (this.selectedList.length > 0 && ! e.ctrlKey ) {
@@ -726,10 +726,9 @@ class Timeline extends LitElement {
             });
             this.dispatchEvent(myEvent);
             
-            //window.addEventListener("click",this._clearSelectionhandler);
         };
     }
-    firstUpdated() {
+    firstUpdated():void {
         const root = this.shadowRoot;
         if (root !== null) {
             const gridContainer = root.querySelector(".jc-timeline-grid-container") as HTMLBaseElement;
@@ -797,31 +796,30 @@ class Timeline extends LitElement {
 
     }
     _getCollapseRessourceHandler(item:Ressource):(e:MouseEvent)=>void{
-        return (e:MouseEvent) => {
+        return (_e:MouseEvent) => {
             item.collapseChildren = ! item.collapseChildren;
             this.updateTimeslotPosition(item);
             // Force rows refresh TODO improve this rerendering
             this.rows = [...this.rows];
         };
     }
-    _onRessourceDragStart(item:Ressource){
-        return (event:DragEvent)=>{
+    _onRessourceDragStart(item:Ressource):(event:DragEvent)=>void{
+        return (event:DragEvent):void=>{
           event.dataTransfer?.setData("text", item.id);
         }
     }
-    _onRessourceDragEnter(event:DragEvent){
+    _onRessourceDragEnter(event:DragEvent):void{
         if (event.target instanceof HTMLElement){
             const tgt = event.target;
             tgt.classList.add("target");
-        }else if(event.target instanceof Node){
         }
     }
-    _onRessourceDragLeave(event:DragEvent){
+    _onRessourceDragLeave(event:DragEvent):void{
         if (event.target instanceof HTMLElement){
             event.target.classList.remove("target");
         }
     }
-    _onRessourceDrop(event:DragEvent){
+    _onRessourceDrop(event:DragEvent):void{
         event.preventDefault()
         if (event.target instanceof HTMLElement){
             event.target.classList.remove("target");
@@ -868,7 +866,7 @@ class Timeline extends LitElement {
                         <td class="${item.selected ? "jc-ressource-selected":""}" style="${style}" ressourceId="${item.id}" @click="${this._getEventClickHandler(item)}">
                             <div class="jc-ressource-above"></div>    
                             <div class="jc-ressource" draggable="true" @dragstart="${this._onRessourceDragStart(item)}">
-                            ${Array(depth).fill(0).map(i => html`<i class="jc-spacer"></i>`)}${hasChild ? html`<i class="jc-spacer ${item.collapseChildren ? "extend" : "collapse"}" @click="${collapseHandler}"></i>` : html`<i class="jc-spacer"></i>`}
+                            ${Array(depth).fill(0).map(_i => html`<i class="jc-spacer"></i>`)}${hasChild ? html`<i class="jc-spacer ${item.collapseChildren ? "extend" : "collapse"}" @click="${collapseHandler}"></i>` : html`<i class="jc-spacer"></i>`}
                             <span>${item.title}</span>
                             </div>
                             <div class="jc-ressource-below"></div>
@@ -892,9 +890,7 @@ class Timeline extends LitElement {
         <horizontal-resizer @resize-x="${this._handleResizeX}"></horizontal-resizer>
         <div class="jc-timeline-grid-title-container">
           <table @mousedown="${this._grabHeader}"  style="width:${nCol * this.slotWidth}px;">
-              <colgroup>
-                  ${columns.map(o=>html`<col style="min-width:${this.slotWidth}px">`)}
-              </colgroup>
+              <colgroup>${columns.map(_o=>html`<col style="min-width:${this.slotWidth}px">`)}</colgroup>
               <tbody>
                   ${this.legend.map(arr=>html`<tr class="jc-timeline-grid-title">${arr.map(o=>html`<th colspan="${o.colspan}">${o.title}</th>`)}</tr>`)}
               </tbody>
@@ -913,9 +909,8 @@ class Timeline extends LitElement {
         <horizontal-resizer @resize-x="${this._handleResizeX}"></horizontal-resizer>
         <div class="jc-timeline-grid-container">
           <table  style="width:${nCol * this.slotWidth}px;">
-              <colgroup>
-              ${columns.map(o=>html`<col style="min-width:${this.slotWidth}px">`)}
-              </colgroup>
+              <colgroup>${columns.map(_o=>html`<col style="min-width:${this.slotWidth}px">`)}</colgroup>
+              
               <tbody>
                   ${this.rows.length > 0 ? displayedRows.map(o => this.renderGridRow(columns, o.i, o.r.height)) : this.renderGridRow(columns)}
               </tbody>

tsconfig.json

@@ -4,8 +4,8 @@
 
     /* Basic Options */
     // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "target": "es2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     "lib": ["es6", "dom", "es2017"],          /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */

webpack.common.js

@@ -6,27 +6,27 @@ module.exports = {
     new CleanWebpackPlugin(),
   ],
   module: {
-    rules: [
+    rules: [      
       {
-        test: /\.js$/,
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.tsx?$/,
         loader: 'minify-template-literal-loader',
         options: {
           caseSensitive: true,
           collapseWhitespace: true
         }
       },
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
     ],
   },
   resolve: {
     extensions: [ '.tsx', '.ts', '.js' ],
   },
   output: {
-    filename: '[name].bundle.js',
+    filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
   },
 };

webpack.dev.js

@@ -6,11 +6,11 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = merge(common,{
   entry: {
+    Timeline:'./src/Timeline.ts',
     index:{
-      import:'./src/index.ts',
+      import:'./dev/index.ts',
       dependOn:"Timeline"
     },
-    Timeline:'./src/Timeline.ts',
   },
   plugins: [
     new HtmlWebpackPlugin({