chore: update rollup config

- minify css
- sourcemap
- github action to auto-publish on npm

.github/workflows/publish.yml

@@ -0,0 +1,19 @@
+name: Publish on NPM
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - run: yarn install
+      - run: yarn prettier-check
+      - run: yarn test
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}

dist/frappe-gantt.css

@@ -1,119 +1,133 @@
 .gantt .grid-background {
-  fill: none; }
+  fill: none;
-
+}
 .gantt .grid-header {
   fill: #ffffff;
   stroke: #e0e0e0;
-  stroke-width: 1.4; }
+  stroke-width: 1.4;
-
+}
 .gantt .grid-row {
-  fill: #ffffff; }
+  fill: #ffffff;
-
+}
 .gantt .grid-row:nth-child(even) {
-  fill: #f5f5f5; }
+  fill: #f5f5f5;
-
+}
 .gantt .row-line {
-  stroke: #ebeff2; }
+  stroke: #ebeff2;
-
+}
 .gantt .tick {
   stroke: #e0e0e0;
-  stroke-width: 0.2; }
+  stroke-width: 0.2;
-  .gantt .tick.thick {
+}
-    stroke-width: 0.4; }
+.gantt .tick.thick {
-
+  stroke-width: 0.4;
+}
 .gantt .today-highlight {
   fill: #fcf8e3;
-  opacity: 0.5; }
+  opacity: 0.5;
-
+}
 .gantt .arrow {
   fill: none;
   stroke: #666;
-  stroke-width: 1.4; }
+  stroke-width: 1.4;
-
+}
 .gantt .bar {
   fill: #b8c2cc;
   stroke: #8D99A6;
   stroke-width: 0;
-  transition: stroke-width .3s ease;
+  transition: stroke-width 0.3s ease;
-  user-select: none; }
+  user-select: none;
-
+}
 .gantt .bar-progress {
-  fill: #a3a3ff; }
+  fill: #a3a3ff;
-
+}
 .gantt .bar-invalid {
   fill: transparent;
   stroke: #8D99A6;
   stroke-width: 1;
-  stroke-dasharray: 5; }
+  stroke-dasharray: 5;
-  .gantt .bar-invalid ~ .bar-label {
+}
-    fill: #555; }
+.gantt .bar-invalid ~ .bar-label {
-
+  fill: #555;
+}
 .gantt .bar-label {
   fill: #fff;
   dominant-baseline: central;
   text-anchor: middle;
   font-size: 12px;
-  font-weight: lighter; }
+  font-weight: lighter;
-  .gantt .bar-label.big {
+}
+.gantt .bar-label.big {
   fill: #555;
-    text-anchor: start; }
+  text-anchor: start;
-
+}
 .gantt .handle {
   fill: #ddd;
   cursor: ew-resize;
   opacity: 0;
   visibility: hidden;
-  transition: opacity .3s ease; }
+  transition: opacity 0.3s ease;
-
+}
 .gantt .bar-wrapper {
   cursor: pointer;
-  outline: none; }
+  outline: none;
-  .gantt .bar-wrapper:hover .bar {
+}
-    fill: #a9b5c1; }
+.gantt .bar-wrapper:hover .bar {
-  .gantt .bar-wrapper:hover .bar-progress {
+  fill: #a9b5c1;
-    fill: #8a8aff; }
+}
-  .gantt .bar-wrapper:hover .handle {
+.gantt .bar-wrapper:hover .bar-progress {
+  fill: #8a8aff;
+}
+.gantt .bar-wrapper:hover .handle {
   visibility: visible;
-    opacity: 1; }
+  opacity: 1;
-  .gantt .bar-wrapper.active .bar {
+}
-    fill: #a9b5c1; }
+.gantt .bar-wrapper.active .bar {
-  .gantt .bar-wrapper.active .bar-progress {
+  fill: #a9b5c1;
-    fill: #8a8aff; }
+}
-
+.gantt .bar-wrapper.active .bar-progress {
+  fill: #8a8aff;
+}
 .gantt .lower-text, .gantt .upper-text {
   font-size: 12px;
-  text-anchor: middle; }
+  text-anchor: middle;
-
+}
 .gantt .upper-text {
-  fill: #555; }
+  fill: #555;
-
+}
 .gantt .lower-text {
-  fill: #333; }
+  fill: #333;
-
+}
 .gantt .hide {
-  display: none; }
+  display: none;
+}
 
 .gantt-container {
   position: relative;
   overflow: auto;
-  font-size: 12px; }
+  font-size: 12px;
-  .gantt-container .popup-wrapper {
+}
+.gantt-container .popup-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   padding: 0;
   color: #959da5;
-    border-radius: 3px; }
+  border-radius: 3px;
-    .gantt-container .popup-wrapper .title {
+}
+.gantt-container .popup-wrapper .title {
   border-bottom: 3px solid #a3a3ff;
-      padding: 10px; }
-    .gantt-container .popup-wrapper .subtitle {
   padding: 10px;
-      color: #dfe2e5; }
+}
-    .gantt-container .popup-wrapper .pointer {
+.gantt-container .popup-wrapper .subtitle {
+  padding: 10px;
+  color: #dfe2e5;
+}
+.gantt-container .popup-wrapper .pointer {
   position: absolute;
   height: 5px;
   margin: 0 0 0 -5px;
   border: 5px solid transparent;
-      border-top-color: rgba(0, 0, 0, 0.8); }
+  border-top-color: rgba(0, 0, 0, 0.8);
+}

dist/frappe-gantt.js

@@ -1,15 +1,15 @@
 var Gantt = (function () {
-'use strict';
+    'use strict';
 
-const YEAR = 'year';
+    const YEAR = 'year';
-const MONTH = 'month';
+    const MONTH = 'month';
-const DAY = 'day';
+    const DAY = 'day';
-const HOUR = 'hour';
+    const HOUR = 'hour';
-const MINUTE = 'minute';
+    const MINUTE = 'minute';
-const SECOND = 'second';
+    const SECOND = 'second';
-const MILLISECOND = 'millisecond';
+    const MILLISECOND = 'millisecond';
 
-const month_names = {
+    const month_names = {
         en: [
             'January',
             'February',
@@ -22,7 +22,7 @@ const month_names = {
             'September',
             'October',
             'November',
-        'December'
+            'December',
         ],
         es: [
             'Enero',
@@ -36,7 +36,7 @@ const month_names = {
             'Septiembre',
             'Octubre',
             'Noviembre',
-        'Diciembre'
+            'Diciembre',
         ],
         ru: [
             'Январь',
@@ -50,7 +50,7 @@ const month_names = {
             'Сентябрь',
             'Октябрь',
             'Ноябрь',
-        'Декабрь'
+            'Декабрь',
         ],
         ptBr: [
             'Janeiro',
@@ -64,7 +64,7 @@ const month_names = {
             'Setembro',
             'Outubro',
             'Novembro',
-        'Dezembro'
+            'Dezembro',
         ],
         fr: [
             'Janvier',
@@ -78,7 +78,7 @@ const month_names = {
             'Septembre',
             'Octobre',
             'Novembre',
-        'Décembre'
+            'Décembre',
         ],
         tr: [
             'Ocak',
@@ -92,7 +92,7 @@ const month_names = {
             'Eylül',
             'Ekim',
             'Kasım',
-        'Aralık'
+            'Aralık',
         ],
         zh: [
             '一月',
@@ -106,11 +106,11 @@ const month_names = {
             '九月',
             '十月',
             '十一月',
-        '十二月'
+            '十二月',
-    ]
+        ],
-};
+    };
 
-var date_utils = {
+    var date_utils = {
         parse(date, date_separator = '-', time_separator = /[.:]/) {
             if (date instanceof Date) {
                 return date;
@@ -121,7 +121,7 @@ var date_utils = {
 
                 date_parts = parts[0]
                     .split(date_separator)
-                .map(val => parseInt(val, 10));
+                    .map((val) => parseInt(val, 10));
                 time_parts = parts[1] && parts[1].split(time_separator);
 
                 // month is 0 indexed
@@ -164,7 +164,7 @@ var date_utils = {
         },
 
         format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') {
-        const values = this.get_date_values(date).map(d => padStart(d, 2, 0));
+            const values = this.get_date_values(date).map((d) => padStart(d, 2, 0));
             const format_map = {
                 YYYY: values[0],
                 MM: padStart(+values[1] + 1, 2, 0),
@@ -172,10 +172,10 @@ var date_utils = {
                 HH: values[3],
                 mm: values[4],
                 ss: values[5],
-            SSS:values[6],
+                SSS: values[6],
                 D: values[2],
                 MMMM: month_names[lang][+values[1]],
-            MMM: month_names[lang][+values[1]]
+                MMM: month_names[lang][+values[1]],
             };
 
             let str = format_string;
@@ -183,7 +183,7 @@ var date_utils = {
 
             Object.keys(format_map)
                 .sort((a, b) => b.length - a.length) // big string first
-            .forEach(key => {
+                .forEach((key) => {
                     if (str.includes(key)) {
                         str = str.replace(key, `$${formatted_values.length}`);
                         formatted_values.push(format_map[key]);
@@ -220,7 +220,7 @@ var date_utils = {
                     hours,
                     days,
                     months,
-                years
+                    years,
                 }[scale]
             );
         },
@@ -243,7 +243,7 @@ var date_utils = {
                 date.getHours() + (scale === HOUR ? qty : 0),
                 date.getMinutes() + (scale === MINUTE ? qty : 0),
                 date.getSeconds() + (scale === SECOND ? qty : 0),
-            date.getMilliseconds() + (scale === MILLISECOND ? qty : 0)
+                date.getMilliseconds() + (scale === MILLISECOND ? qty : 0),
             ];
             return new Date(...vals);
         },
@@ -256,7 +256,7 @@ var date_utils = {
                 [HOUR]: 3,
                 [MINUTE]: 2,
                 [SECOND]: 1,
-            [MILLISECOND]: 0
+                [MILLISECOND]: 0,
             };
 
             function should_reset(_scale) {
@@ -271,7 +271,7 @@ var date_utils = {
                 should_reset(DAY) ? 0 : date.getHours(),
                 should_reset(HOUR) ? 0 : date.getMinutes(),
                 should_reset(MINUTE) ? 0 : date.getSeconds(),
-            should_reset(SECOND) ? 0 : date.getMilliseconds()
+                should_reset(SECOND) ? 0 : date.getMilliseconds(),
             ];
 
             return new Date(...vals);
@@ -289,7 +289,7 @@ var date_utils = {
                 date.getHours(),
                 date.getMinutes(),
                 date.getSeconds(),
-            date.getMilliseconds()
+                date.getMilliseconds(),
             ];
         },
 
@@ -308,11 +308,11 @@ var date_utils = {
                 return 29;
             }
             return 28;
-    }
+        },
-};
+    };
 
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
-function padStart(str, targetLength, padString) {
+    function padStart(str, targetLength, padString) {
         str = str + '';
         targetLength = targetLength >> 0;
         padString = String(typeof padString !== 'undefined' ? padString : ' ');
@@ -325,15 +325,15 @@ function padStart(str, targetLength, padString) {
             }
             return padString.slice(0, targetLength) + String(str);
         }
-}
+    }
 
-function $(expr, con) {
+    function $(expr, con) {
         return typeof expr === 'string'
             ? (con || document).querySelector(expr)
             : expr || null;
-}
+    }
 
-function createSVG(tag, attrs) {
+    function createSVG(tag, attrs) {
         const elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
         for (let attr in attrs) {
             if (attr === 'append_to') {
@@ -346,9 +346,9 @@ function createSVG(tag, attrs) {
             }
         }
         return elem;
-}
+    }
 
-function animateSVG(svgElement, attr, from, to) {
+    function animateSVG(svgElement, attr, from, to) {
         const animatedSvgElement = getAnimationElement(svgElement, attr, from, to);
 
         if (animatedSvgElement === svgElement) {
@@ -359,16 +359,16 @@ function animateSVG(svgElement, attr, from, to) {
             event.eventName = 'click';
             animatedSvgElement.dispatchEvent(event);
         }
-}
+    }
 
-function getAnimationElement(
+    function getAnimationElement(
         svgElement,
         attr,
         from,
         to,
         dur = '0.4s',
         begin = '0.1s'
-) {
+    ) {
         const animEl = svgElement.querySelector('animate');
         if (animEl) {
             $.attr(animEl, {
@@ -376,7 +376,7 @@ function getAnimationElement(
                 from,
                 to,
                 dur,
-            begin: 'click + ' + begin // artificial click
+                begin: 'click + ' + begin, // artificial click
             });
             return svgElement;
         }
@@ -390,53 +390,53 @@ function getAnimationElement(
             calcMode: 'spline',
             values: from + ';' + to,
             keyTimes: '0; 1',
-        keySplines: cubic_bezier('ease-out')
+            keySplines: cubic_bezier('ease-out'),
         });
         svgElement.appendChild(animateElement);
 
         return svgElement;
-}
+    }
 
-function cubic_bezier(name) {
+    function cubic_bezier(name) {
         return {
             ease: '.25 .1 .25 1',
             linear: '0 0 1 1',
             'ease-in': '.42 0 1 1',
             'ease-out': '0 0 .58 1',
-        'ease-in-out': '.42 0 .58 1'
+            'ease-in-out': '.42 0 .58 1',
         }[name];
-}
+    }
 
-$.on = (element, event, selector, callback) => {
+    $.on = (element, event, selector, callback) => {
         if (!callback) {
             callback = selector;
             $.bind(element, event, callback);
         } else {
             $.delegate(element, event, selector, callback);
         }
-};
+    };
 
-$.off = (element, event, handler) => {
+    $.off = (element, event, handler) => {
         element.removeEventListener(event, handler);
-};
+    };
 
-$.bind = (element, event, callback) => {
+    $.bind = (element, event, callback) => {
-    event.split(/\s+/).forEach(function(event) {
+        event.split(/\s+/).forEach(function (event) {
             element.addEventListener(event, callback);
         });
-};
+    };
 
-$.delegate = (element, event, selector, callback) => {
+    $.delegate = (element, event, selector, callback) => {
-    element.addEventListener(event, function(e) {
+        element.addEventListener(event, function (e) {
             const delegatedTarget = e.target.closest(selector);
             if (delegatedTarget) {
                 e.delegatedTarget = delegatedTarget;
                 callback.call(this, e, delegatedTarget);
             }
         });
-};
+    };
 
-$.closest = (selector, element) => {
+    $.closest = (selector, element) => {
         if (!element) return null;
 
         if (element.matches(selector)) {
@@ -444,9 +444,9 @@ $.closest = (selector, element) => {
         }
 
         return $.closest(selector, element.parentNode);
-};
+    };
 
-$.attr = (element, attr, value) => {
+    $.attr = (element, attr, value) => {
         if (!value && typeof attr === 'string') {
             return element.getAttribute(attr);
         }
@@ -459,9 +459,9 @@ $.attr = (element, attr, value) => {
         }
 
         element.setAttribute(attr, value);
-};
+    };
 
-class Bar {
+    class Bar {
         constructor(gantt, task) {
             this.set_defaults(gantt, task);
             this.prepare();
@@ -496,32 +496,32 @@ class Bar {
                     (this.task.progress / 100) || 0;
             this.group = createSVG('g', {
                 class: 'bar-wrapper ' + (this.task.custom_class || ''),
-            'data-id': this.task.id
+                'data-id': this.task.id,
             });
             this.bar_group = createSVG('g', {
                 class: 'bar-group',
-            append_to: this.group
+                append_to: this.group,
             });
             this.handle_group = createSVG('g', {
                 class: 'handle-group',
-            append_to: this.group
+                append_to: this.group,
             });
         }
 
         prepare_helpers() {
-        SVGElement.prototype.getX = function() {
+            SVGElement.prototype.getX = function () {
                 return +this.getAttribute('x');
             };
-        SVGElement.prototype.getY = function() {
+            SVGElement.prototype.getY = function () {
                 return +this.getAttribute('y');
             };
-        SVGElement.prototype.getWidth = function() {
+            SVGElement.prototype.getWidth = function () {
                 return +this.getAttribute('width');
             };
-        SVGElement.prototype.getHeight = function() {
+            SVGElement.prototype.getHeight = function () {
                 return +this.getAttribute('height');
             };
-        SVGElement.prototype.getEndX = function() {
+            SVGElement.prototype.getEndX = function () {
                 return this.getX() + this.getWidth();
             };
         }
@@ -542,7 +542,7 @@ class Bar {
                 rx: this.corner_radius,
                 ry: this.corner_radius,
                 class: 'bar',
-            append_to: this.bar_group
+                append_to: this.bar_group,
             });
 
             animateSVG(this.$bar, 'width', 0, this.width);
@@ -562,7 +562,7 @@ class Bar {
                 rx: this.corner_radius,
                 ry: this.corner_radius,
                 class: 'bar-progress',
-            append_to: this.bar_group
+                append_to: this.bar_group,
             });
 
             animateSVG(this.$bar_progress, 'width', 0, this.progress_width);
@@ -574,7 +574,7 @@ class Bar {
                 y: this.y + this.height / 2,
                 innerHTML: this.task.name,
                 class: 'bar-label',
-            append_to: this.bar_group
+                append_to: this.bar_group,
             });
             // labels get BBox in the next tick
             requestAnimationFrame(() => this.update_label_position());
@@ -594,7 +594,7 @@ class Bar {
                 rx: this.corner_radius,
                 ry: this.corner_radius,
                 class: 'handle right',
-            append_to: this.handle_group
+                append_to: this.handle_group,
             });
 
             createSVG('rect', {
@@ -605,14 +605,14 @@ class Bar {
                 rx: this.corner_radius,
                 ry: this.corner_radius,
                 class: 'handle left',
-            append_to: this.handle_group
+                append_to: this.handle_group,
             });
 
             if (this.task.progress && this.task.progress < 100) {
                 this.$handle_progress = createSVG('polygon', {
                     points: this.get_progress_polygon_points().join(','),
                     class: 'handle progress',
-                append_to: this.handle_group
+                    append_to: this.handle_group,
                 });
             }
         }
@@ -625,7 +625,7 @@ class Bar {
                 bar_progress.getEndX() + 5,
                 bar_progress.getY() + bar_progress.getHeight(),
                 bar_progress.getEndX(),
-            bar_progress.getY() + bar_progress.getHeight() - 8.66
+                bar_progress.getY() + bar_progress.getHeight() - 8.66,
             ];
         }
 
@@ -635,7 +635,7 @@ class Bar {
         }
 
         setup_click_event() {
-        $.on(this.group, 'focus ' + this.gantt.options.popup_trigger, e => {
+            $.on(this.group, 'focus ' + this.gantt.options.popup_trigger, (e) => {
                 if (this.action_completed) {
                     // just finished a move action, wait for a few seconds
                     return;
@@ -646,7 +646,7 @@ class Bar {
                 this.group.classList.add('active');
             });
 
-        $.on(this.group, 'dblclick', e => {
+            $.on(this.group, 'dblclick', (e) => {
                 if (this.action_completed) {
                     // just finished a move action, wait for a few seconds
                     return;
@@ -659,7 +659,11 @@ class Bar {
         show_popup() {
             if (this.gantt.bar_being_dragged) return;
 
-        const start_date = date_utils.format(this.task._start, 'MMM D', this.gantt.options.language);
+            const start_date = date_utils.format(
+                this.task._start,
+                'MMM D',
+                this.gantt.options.language
+            );
             const end_date = date_utils.format(
                 date_utils.add(this.task._end, -1, 'second'),
                 'MMM D',
@@ -679,7 +683,7 @@ class Bar {
             const bar = this.$bar;
             if (x) {
                 // get all x values of parent task
-            const xs = this.task.dependencies.map(dep => {
+                const xs = this.task.dependencies.map((dep) => {
                     return this.gantt.get_bar(dep).$bar.getX();
                 });
                 // child task must not go before parent
@@ -720,7 +724,7 @@ class Bar {
             this.gantt.trigger_event('date_change', [
                 this.task,
                 new_start_date,
-            date_utils.add(new_end_date, -1, 'second')
+                date_utils.add(new_end_date, -1, 'second'),
             ]);
         }
 
@@ -755,7 +759,7 @@ class Bar {
 
         compute_progress() {
             const progress =
-            this.$bar_progress.getWidth() / this.$bar.getWidth() * 100;
+                (this.$bar_progress.getWidth() / this.$bar.getWidth()) * 100;
             return parseInt(progress, 10);
         }
 
@@ -765,11 +769,11 @@ class Bar {
             const gantt_start = this.gantt.gantt_start;
 
             const diff = date_utils.diff(task_start, gantt_start, 'hour');
-        let x = diff / step * column_width;
+            let x = (diff / step) * column_width;
 
             if (this.gantt.view_is('Month')) {
                 const diff = date_utils.diff(task_start, gantt_start, 'day');
-            x = diff * column_width / 30;
+                x = (diff * column_width) / 30;
             }
             return x;
         }
@@ -863,9 +867,9 @@ class Bar {
                 arrow.update();
             }
         }
-}
+    }
 
-class Arrow {
+    class Arrow {
         constructor(gantt, from_task, to_task) {
             this.gantt = gantt;
             this.from_task = from_task;
@@ -950,7 +954,7 @@ class Arrow {
             this.element = createSVG('path', {
                 d: this.path,
                 'data-from': this.from_task.task.id,
-            'data-to': this.to_task.task.id
+                'data-to': this.to_task.task.id,
             });
         }
 
@@ -958,9 +962,9 @@ class Arrow {
             this.calculate_path();
             this.element.setAttribute('d', this.path);
         }
-}
+    }
 
-class Popup {
+    class Popup {
         constructor(parent, custom_html) {
             this.parent = parent;
             this.custom_html = custom_html;
@@ -1028,18 +1032,18 @@ class Popup {
             this.parent.style.opacity = 0;
             this.parent.style.left = 0;
         }
-}
+    }
 
-const VIEW_MODE = {
+    const VIEW_MODE = {
         QUARTER_DAY: 'Quarter Day',
         HALF_DAY: 'Half Day',
         DAY: 'Day',
         WEEK: 'Week',
         MONTH: 'Month',
-    YEAR: 'Year'
+        YEAR: 'Year',
-};
+    };
 
-class Gantt {
+    class Gantt {
         constructor(wrapper, tasks, options) {
             this.setup_wrapper(wrapper);
             this.setup_options(options);
@@ -1075,7 +1079,7 @@ class Gantt {
                 // create it
                 this.$svg = createSVG('svg', {
                     append_to: wrapper_element,
-                class: 'gantt'
+                    class: 'gantt',
                 });
             } else {
                 this.$svg = svg_element;
@@ -1110,7 +1114,7 @@ class Gantt {
                 date_format: 'YYYY-MM-DD',
                 popup_trigger: 'click',
                 custom_popup_html: null,
-            language: 'en'
+                language: 'en',
             };
             this.options = Object.assign({}, default_options, options);
         }
@@ -1148,7 +1152,7 @@ class Gantt {
                 // if hours is not set, assume the last day is full day
                 // e.g: 2018-09-09 becomes 2018-09-09 23:59:59
                 const task_end_values = date_utils.get_date_values(task._end);
-            if (task_end_values.slice(3).every(d => d === 0)) {
+                if (task_end_values.slice(3).every((d) => d === 0)) {
                     task._end = date_utils.add(task._end, 24, 'hour');
                 }
 
@@ -1163,8 +1167,8 @@ class Gantt {
                     if (task.dependencies) {
                         deps = task.dependencies
                             .split(',')
-                        .map(d => d.trim())
+                            .map((d) => d.trim())
-                        .filter(d => d);
+                            .filter((d) => d);
                     }
                     task.dependencies = deps;
                 }
@@ -1312,7 +1316,7 @@ class Gantt {
             for (let layer of layers) {
                 this.layers[layer] = createSVG('g', {
                     class: layer,
-                append_to: this.$svg
+                    append_to: this.$svg,
                 });
             }
         }
@@ -1339,12 +1343,12 @@ class Gantt {
                 width: grid_width,
                 height: grid_height,
                 class: 'grid-background',
-            append_to: this.layers.grid
+                append_to: this.layers.grid,
             });
 
             $.attr(this.$svg, {
                 height: grid_height + this.options.padding + 100,
-            width: '100%'
+                width: '100%',
             });
         }
 
@@ -1364,7 +1368,7 @@ class Gantt {
                     width: row_width,
                     height: row_height,
                     class: 'grid-row',
-                append_to: rows_layer
+                    append_to: rows_layer,
                 });
 
                 createSVG('line', {
@@ -1373,7 +1377,7 @@ class Gantt {
                     x2: row_width,
                     y2: row_y + row_height,
                     class: 'row-line',
-                append_to: lines_layer
+                    append_to: lines_layer,
                 });
 
                 row_y += this.options.bar_height + this.options.padding;
@@ -1389,7 +1393,7 @@ class Gantt {
                 width: header_width,
                 height: header_height,
                 class: 'grid-header',
-            append_to: this.layers.grid
+                append_to: this.layers.grid,
             });
         }
 
@@ -1415,20 +1419,23 @@ class Gantt {
                     tick_class += ' thick';
                 }
                 // thick ticks for quarters
-            if (this.view_is(VIEW_MODE.MONTH) && (date.getMonth() + 1) % 3 === 0) {
+                if (
+                    this.view_is(VIEW_MODE.MONTH) &&
+                    (date.getMonth() + 1) % 3 === 0
+                ) {
                     tick_class += ' thick';
                 }
 
                 createSVG('path', {
                     d: `M ${tick_x} ${tick_y} v ${tick_height}`,
                     class: tick_class,
-                append_to: this.layers.grid
+                    append_to: this.layers.grid,
                 });
 
                 if (this.view_is(VIEW_MODE.MONTH)) {
                     tick_x +=
-                    date_utils.get_days_in_month(date) *
+                        (date_utils.get_days_in_month(date) *
-                    this.options.column_width /
+                            this.options.column_width) /
                         30;
                 } else {
                     tick_x += this.options.column_width;
@@ -1440,8 +1447,8 @@ class Gantt {
             // highlight today's date
             if (this.view_is(VIEW_MODE.DAY)) {
                 const x =
-                date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
+                    (date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
-                this.options.step *
+                        this.options.step) *
                     this.options.column_width;
                 const y = 0;
 
@@ -1458,7 +1465,7 @@ class Gantt {
                     width,
                     height,
                     class: 'today-highlight',
-                append_to: this.layers.grid
+                    append_to: this.layers.grid,
                 });
             }
         }
@@ -1470,7 +1477,7 @@ class Gantt {
                     y: date.lower_y,
                     innerHTML: date.lower_text,
                     class: 'lower-text',
-                append_to: this.layers.date
+                    append_to: this.layers.date,
                 });
 
                 if (date.upper_text) {
@@ -1479,7 +1486,7 @@ class Gantt {
                         y: date.upper_y,
                         innerHTML: date.upper_text,
                         class: 'upper-text',
-                    append_to: this.layers.date
+                        append_to: this.layers.date,
                     });
 
                     // remove out-of-bound dates
@@ -1534,7 +1541,11 @@ class Gantt {
                 'Half Day_upper':
                     date.getDate() !== last_date.getDate()
                         ? date.getMonth() !== last_date.getMonth()
-                      ? date_utils.format(date, 'D MMM', this.options.language)
+                            ? date_utils.format(
+                                  date,
+                                  'D MMM',
+                                  this.options.language
+                              )
                             : date_utils.format(date, 'D', this.options.language)
                         : '',
                 Day_upper:
@@ -1552,28 +1563,28 @@ class Gantt {
                 Year_upper:
                     date.getFullYear() !== last_date.getFullYear()
                         ? date_utils.format(date, 'YYYY', this.options.language)
-                    : ''
+                        : '',
             };
 
             const base_pos = {
                 x: i * this.options.column_width,
                 lower_y: this.options.header_height,
-            upper_y: this.options.header_height - 25
+                upper_y: this.options.header_height - 25,
             };
 
             const x_pos = {
-            'Quarter Day_lower': this.options.column_width * 4 / 2,
+                'Quarter Day_lower': (this.options.column_width * 4) / 2,
                 'Quarter Day_upper': 0,
-            'Half Day_lower': this.options.column_width * 2 / 2,
+                'Half Day_lower': (this.options.column_width * 2) / 2,
                 'Half Day_upper': 0,
                 Day_lower: this.options.column_width / 2,
-            Day_upper: this.options.column_width * 30 / 2,
+                Day_upper: (this.options.column_width * 30) / 2,
                 Week_lower: 0,
-            Week_upper: this.options.column_width * 4 / 2,
+                Week_upper: (this.options.column_width * 4) / 2,
                 Month_lower: this.options.column_width / 2,
-            Month_upper: this.options.column_width * 12 / 2,
+                Month_upper: (this.options.column_width * 12) / 2,
                 Year_lower: this.options.column_width / 2,
-            Year_upper: this.options.column_width * 30 / 2
+                Year_upper: (this.options.column_width * 30) / 2,
             };
 
             return {
@@ -1582,12 +1593,12 @@ class Gantt {
                 upper_x: base_pos.x + x_pos[`${this.options.view_mode}_upper`],
                 upper_y: base_pos.upper_y,
                 lower_x: base_pos.x + x_pos[`${this.options.view_mode}_lower`],
-            lower_y: base_pos.lower_y
+                lower_y: base_pos.lower_y,
             };
         }
 
         make_bars() {
-        this.bars = this.tasks.map(task => {
+            this.bars = this.tasks.map((task) => {
                 const bar = new Bar(this, task);
                 this.layers.bar.appendChild(bar.group);
                 return bar;
@@ -1599,7 +1610,7 @@ class Gantt {
             for (let task of this.tasks) {
                 let arrows = [];
                 arrows = task.dependencies
-                .map(task_id => {
+                    .map((task_id) => {
                         const dependency = this.get_task(task_id);
                         if (!dependency) return;
                         const arrow = new Arrow(
@@ -1617,7 +1628,7 @@ class Gantt {
 
         map_arrows_on_bars() {
             for (let bar of this.bars) {
-            bar.arrows = this.arrows.filter(arrow => {
+                bar.arrows = this.arrows.filter((arrow) => {
                     return (
                         arrow.from_task.task.id === bar.task.id ||
                         arrow.to_task.task.id === bar.task.id
@@ -1647,8 +1658,7 @@ class Gantt {
             );
 
             const scroll_pos =
-            hours_before_first_task /
+                (hours_before_first_task / this.options.step) *
-                this.options.step *
                     this.options.column_width -
                 this.options.column_width;
 
@@ -1700,13 +1710,13 @@ class Gantt {
                 parent_bar_id = bar_wrapper.getAttribute('data-id');
                 const ids = [
                     parent_bar_id,
-                ...this.get_all_dependent_tasks(parent_bar_id)
+                    ...this.get_all_dependent_tasks(parent_bar_id),
                 ];
-            bars = ids.map(id => this.get_bar(id));
+                bars = ids.map((id) => this.get_bar(id));
 
                 this.bar_being_dragged = parent_bar_id;
 
-            bars.forEach(bar => {
+                bars.forEach((bar) => {
                     const $bar = bar.$bar;
                     $bar.ox = $bar.getX();
                     $bar.oy = $bar.getY();
@@ -1715,12 +1725,12 @@ class Gantt {
                 });
             });
 
-        $.on(this.$svg, 'mousemove', e => {
+            $.on(this.$svg, 'mousemove', (e) => {
                 if (!action_in_progress()) return;
                 const dx = e.offsetX - x_on_start;
-            const dy = e.offsetY - y_on_start;
+                e.offsetY - y_on_start;
 
-            bars.forEach(bar => {
+                bars.forEach((bar) => {
                     const $bar = bar.$bar;
                     $bar.finaldx = this.get_snap_position(dx);
                     this.hide_popup();
@@ -1728,17 +1738,17 @@ class Gantt {
                         if (parent_bar_id === bar.task.id) {
                             bar.update_bar_position({
                                 x: $bar.ox + $bar.finaldx,
-                            width: $bar.owidth - $bar.finaldx
+                                width: $bar.owidth - $bar.finaldx,
                             });
                         } else {
                             bar.update_bar_position({
-                            x: $bar.ox + $bar.finaldx
+                                x: $bar.ox + $bar.finaldx,
                             });
                         }
                     } else if (is_resizing_right) {
                         if (parent_bar_id === bar.task.id) {
                             bar.update_bar_position({
-                            width: $bar.owidth + $bar.finaldx
+                                width: $bar.owidth + $bar.finaldx,
                             });
                         }
                     } else if (is_dragging) {
@@ -1747,9 +1757,9 @@ class Gantt {
                 });
             });
 
-        document.addEventListener('mouseup', e => {
+            document.addEventListener('mouseup', (e) => {
                 if (is_dragging || is_resizing_left || is_resizing_right) {
-                bars.forEach(bar => bar.group.classList.remove('active'));
+                    bars.forEach((bar) => bar.group.classList.remove('active'));
                 }
 
                 is_dragging = false;
@@ -1757,9 +1767,9 @@ class Gantt {
                 is_resizing_right = false;
             });
 
-        $.on(this.$svg, 'mouseup', e => {
+            $.on(this.$svg, 'mouseup', (e) => {
                 this.bar_being_dragged = null;
-            bars.forEach(bar => {
+                bars.forEach((bar) => {
                     const $bar = bar.$bar;
                     if (!$bar.finaldx) return;
                     bar.date_changed();
@@ -1796,10 +1806,10 @@ class Gantt {
                 $bar_progress.max_dx = $bar.getWidth() - $bar_progress.getWidth();
             });
 
-        $.on(this.$svg, 'mousemove', e => {
+            $.on(this.$svg, 'mousemove', (e) => {
                 if (!is_resizing) return;
                 let dx = e.offsetX - x_on_start;
-            let dy = e.offsetY - y_on_start;
+                e.offsetY - y_on_start;
 
                 if (dx > $bar_progress.max_dx) {
                     dx = $bar_progress.max_dx;
@@ -1832,7 +1842,7 @@ class Gantt {
                 }, []);
 
                 out = out.concat(deps);
-            to_process = deps.filter(d => !to_process.includes(d));
+                to_process = deps.filter((d) => !to_process.includes(d));
             }
 
             return out.filter(Boolean);
@@ -1872,7 +1882,7 @@ class Gantt {
         }
 
         unselect_all() {
-        [...this.$svg.querySelectorAll('.bar-wrapper')].forEach(el => {
+            [...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => {
                 el.classList.remove('active');
             });
         }
@@ -1883,20 +1893,20 @@ class Gantt {
             }
 
             if (Array.isArray(modes)) {
-            return modes.some(mode => this.options.view_mode === mode);
+                return modes.some((mode) => this.options.view_mode === mode);
             }
 
             return false;
         }
 
         get_task(id) {
-        return this.tasks.find(task => {
+            return this.tasks.find((task) => {
                 return task.id === id;
             });
         }
 
         get_bar(id) {
-        return this.bars.find(bar => {
+            return this.bars.find((bar) => {
                 return bar.task.id === id;
             });
         }
@@ -1929,9 +1939,8 @@ class Gantt {
          */
         get_oldest_starting_date() {
             return this.tasks
-            .map(task => task._start)
+                .map((task) => task._start)
-            .reduce(
+                .reduce((prev_date, cur_date) =>
-                (prev_date, cur_date) =>
                     cur_date <= prev_date ? cur_date : prev_date
                 );
         }
@@ -1944,20 +1953,15 @@ class Gantt {
         clear() {
             this.$svg.innerHTML = '';
         }
-}
+    }
 
-Gantt.VIEW_MODE = VIEW_MODE;
+    Gantt.VIEW_MODE = VIEW_MODE;
 
-function generate_id(task) {
+    function generate_id(task) {
-    return (
+        return task.name + '_' + Math.random().toString(36).slice(2, 12);
-        task.name +
+    }
-        '_' +
-        Math.random()
-            .toString(36)
-            .slice(2, 12)
-    );
-}
 
-return Gantt;
+    return Gantt;
 
-}());
+})();
+//# sourceMappingURL=frappe-gantt.js.map

dist/frappe-gantt.min.css

@@ -0,0 +1 @@
+.gantt .grid-background{fill:none}.gantt .grid-header{fill:#fff;stroke:#e0e0e0;stroke-width:1.4}.gantt .grid-row{fill:#fff}.gantt .grid-row:nth-child(even){fill:#f5f5f5}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.2}.gantt .tick.thick{stroke-width:.4}.gantt .today-highlight{fill:#fcf8e3;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar{fill:#b8c2cc;stroke:#8d99a6;stroke-width:0;transition:stroke-width .3s ease;user-select:none}.gantt .bar-progress{fill:#a3a3ff}.gantt .bar-invalid{fill:rgba(0,0,0,0);stroke:#8d99a6;stroke-width:1;stroke-dasharray:5}.gantt .bar-invalid~.bar-label{fill:#555}.gantt .bar-label{fill:#fff;dominant-baseline:central;text-anchor:middle;font-size:12px;font-weight:lighter}.gantt .bar-label.big{fill:#555;text-anchor:start}.gantt .handle{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden;transition:opacity .3s ease}.gantt .bar-wrapper{cursor:pointer;outline:none}.gantt .bar-wrapper:hover .bar{fill:#a9b5c1}.gantt .bar-wrapper:hover .bar-progress{fill:#8a8aff}.gantt .bar-wrapper:hover .handle{visibility:visible;opacity:1}.gantt .bar-wrapper.active .bar{fill:#a9b5c1}.gantt .bar-wrapper.active .bar-progress{fill:#8a8aff}.gantt .lower-text,.gantt .upper-text{font-size:12px;text-anchor:middle}.gantt .upper-text{fill:#555}.gantt .lower-text{fill:#333}.gantt .hide{display:none}.gantt-container{position:relative;overflow:auto;font-size:12px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:rgba(0,0,0,.8);padding:0;color:#959da5;border-radius:3px}.gantt-container .popup-wrapper .title{border-bottom:3px solid #a3a3ff;padding:10px}.gantt-container .popup-wrapper .subtitle{padding:10px;color:#dfe2e5}.gantt-container .popup-wrapper .pointer{position:absolute;height:5px;margin:0 0 0 -5px;border:5px solid rgba(0,0,0,0);border-top-color:rgba(0,0,0,.8)}

package.json

@@ -9,12 +9,18 @@
     "dev": "rollup -c -w",
     "test": "jest",
     "test:watch": "jest --watch",
-    "prettier": "prettier es6 --write \"{src/*,tests/*,rollup.config}.js\""
+    "prettier": "prettier --write \"{src/*,tests/*,rollup.config}.js\"",
+    "prettier-check": "prettier --check \"{src/*,tests/*,rollup.config}.js\""
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/frappe/gantt.git"
   },
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
   "keywords": [
     "gantt",
     "svg",
@@ -31,15 +37,14 @@
   "homepage": "https://github.com/frappe/gantt",
   "devDependencies": {
     "babel-preset-env": "^1.6.1",
-    "deepmerge": "^2.0.1",
     "eslint": "^4.17.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-prettier": "^2.6.0",
     "jest": "^22.2.1",
-    "prettier": "1.10.2",
+    "prettier": "^2.6.2",
-    "rollup": "^0.55.3",
+    "rollup": "^2.70.2",
-    "rollup-plugin-sass": "^1.2.2",
+    "rollup-plugin-sass": "^1.2.12",
-    "rollup-plugin-uglify": "^3.0.0"
+    "rollup-plugin-terser": "^7.0.2"
   },
   "eslintIgnore": [
     "dist"

rollup.config.js

@@ -1,25 +1,37 @@
 import sass from 'rollup-plugin-sass';
-import uglify from 'rollup-plugin-uglify';
+import { terser } from 'rollup-plugin-terser';
-import merge from 'deepmerge';
 
 const dev = {
     input: 'src/index.js',
     output: {
         name: 'Gantt',
         file: 'dist/frappe-gantt.js',
-        format: 'iife'
+        sourcemap: true,
+        format: 'iife',
     },
     plugins: [
         sass({
-            output: 'dist/frappe-gantt.css'
+            output: true,
-        })
+        }),
-    ]
+    ],
 };
-const prod = merge(dev, {
+const prod = {
+    input: 'src/index.js',
     output: {
-        file: 'dist/frappe-gantt.min.js'
+        name: 'Gantt',
+        file: 'dist/frappe-gantt.min.js',
+        sourcemap: true,
+        format: 'iife',
     },
-    plugins: [uglify()]
+    plugins: [
-});
+        sass({
+            output: true,
+            options: {
+                outputStyle: 'compressed',
+            },
+        }),
+        terser(),
+    ],
+};
 
 export default [dev, prod];