From 2abbb1dce51b241fbb5abec49307749c91f685df Mon Sep 17 00:00:00 2001 From: Stephen Kasica Date: Thu, 18 Jan 2018 10:02:12 -0700 Subject: [PATCH] Define bar corner radius on initialization (#43) * Merge defaults and config deeply in set_defaults The Object.assign method performs a shallow merge, thus it can lose properties in nested objects. For example, if config.bar = { foo: bar } then it would entirely replace defaults.bar and self.config.bar.height would be undefined. The deepmerge library is a lightweight module that merges enumerable attributes deeply. In the above example, self.config.bar would then be {foo: bar, height: 20}. I think this commit also retroactively applies some previous changes to dist/frappe-gantt.js and dist/frappe-gantt.js.map from commits: 241c65db697475a3a17324f4c613d28353f89a8c, 1926ddbd48f1ff0bd7a0d49cadf14fcd415c3bfd, and be45a9656ffd482e1611198158b6032c965e1309. * Define bar corner radius on initialization Allows this property to be set without changing source code. Requires deep merge of default and config objects added in commit f32e76af7733515f10a9adc004100e57f794f804 * Fix bug causing TypeError when config parameter is undefined Fixes issue when optional config parameter is unspecified since Deepmerge throws error "Cannot convert undefined or null to object" in such cases. --- dist/frappe-gantt.js | 736 ++++++++++++++++++++--------------- dist/frappe-gantt.js.map | 2 +- dist/frappe-gantt.min.js | 6 +- dist/frappe-gantt.min.js.map | 6 +- package.json | 1 + src/Bar.js | 2 +- src/Gantt.js | 9 +- 7 files changed, 448 insertions(+), 314 deletions(-) diff --git a/dist/frappe-gantt.js b/dist/frappe-gantt.js index 306acff..b50b17c 100644 --- a/dist/frappe-gantt.js +++ b/dist/frappe-gantt.js @@ -73,7 +73,9 @@ return /******/ (function(modules) { // webpackBootstrap function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - function Gantt(element, tasks, config) { + function Gantt(element, tasks) { + var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + var self = {}; @@ -94,13 +96,16 @@ return /******/ (function(modules) { // webpackBootstrap function set_defaults() { + var merge = __webpack_require__(7); + var defaults = { header_height: 50, column_width: 30, step: 24, view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'], bar: { - height: 20 + height: 20, + corner_radius: 3 }, arrow: { curve: 5 @@ -110,14 +115,22 @@ return /******/ (function(modules) { // webpackBootstrap date_format: 'YYYY-MM-DD', custom_popup_html: null }; - self.config = Object.assign({}, defaults, config); + self.config = merge(defaults, config); reset_variables(tasks); } function reset_variables(tasks) { + if (typeof element === 'string') { + self.element = document.querySelector(element); + } else if (element instanceof SVGElement) { + self.element = element; + } else if (element instanceof HTMLElement) { + self.element = element.querySelector('svg'); + } else { + throw new TypeError('Frappé Gantt only supports usage of a string CSS selector,' + ' HTML DOM element or SVG DOM element for the \'element\' parameter'); + } - self.element = element; self._tasks = tasks; self._bars = []; @@ -154,6 +167,11 @@ return /******/ (function(modules) { // webpackBootstrap task._start = moment(task.start, self.config.date_format); task._end = moment(task.end, self.config.date_format); + // make task invalid if duration too large + if (task._end.diff(task._start, 'years') > 10) { + task.end = null; + } + // cache index task._index = i; @@ -399,7 +417,8 @@ return /******/ (function(modules) { // webpackBootstrap } function set_scroll_position() { - var parent_element = document.querySelector(self.element).parentElement; + var parent_element = self.element.parentElement; + if (!parent_element) return; var scroll_pos = get_min_date().diff(self.gantt_start, 'hours') / self.config.step * self.config.column_width - self.config.column_width; @@ -429,7 +448,7 @@ return /******/ (function(modules) { // webpackBootstrap self.canvas.rect(0, 0, grid_width, grid_height).addClass('grid-background').appendTo(self.element_groups.grid); self.canvas.attr({ - height: grid_height + self.config.padding, + height: grid_height + self.config.padding + 100, width: '100%' }); } @@ -804,7 +823,7 @@ return /******/ (function(modules) { // webpackBootstrap } /* global moment, Snap */ /** * Gantt: - * element: querySelector string, required + * element: querySelector string, HTML DOM or SVG DOM element, required * tasks: array of tasks, required * task: { id, name, start, end, progress, dependencies, custom_class } * config: configuration options, optional @@ -827,8 +846,8 @@ return /******/ (function(modules) { // webpackBootstrap if(false) { // When the styles change, update the