From fe2d27f40ce94fa771e76a1d868cc9f4bab2f628 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Thu, 29 Dec 2016 10:53:07 +0530 Subject: [PATCH] included frappe-gantt as external library (#2527) --- frappe/public/build.json | 3 +- frappe/public/css/gantt.css | 112 -- frappe/public/js/frappe/list/doclistview.js | 35 +- frappe/public/js/frappe/views/gantt.js | 1075 ----------------- .../js/lib/frappe-gantt/frappe-gantt.min.js | 2 + frappe/public/less/gantt.less | 137 --- 6 files changed, 18 insertions(+), 1346 deletions(-) delete mode 100644 frappe/public/css/gantt.css delete mode 100755 frappe/public/js/frappe/views/gantt.js create mode 100755 frappe/public/js/lib/frappe-gantt/frappe-gantt.min.js delete mode 100644 frappe/public/less/gantt.less diff --git a/frappe/public/build.json b/frappe/public/build.json index fb9f6b1d7c..9f40bf2d1a 100755 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -230,8 +230,7 @@ "public/js/frappe/list/image_view_item_main_head.html", "public/js/frappe/list/header_select_all_like_filter.html", "public/js/frappe/list/item_assigned_to_comment_count.html", - "public/js/frappe/views/treeview.js", - "public/js/frappe/views/gantt.js" + "public/js/frappe/views/treeview.js" ], "css/report.min.css": [ "public/css/report.css", diff --git a/frappe/public/css/gantt.css b/frappe/public/css/gantt.css deleted file mode 100644 index bb4394bbaf..0000000000 --- a/frappe/public/css/gantt.css +++ /dev/null @@ -1,112 +0,0 @@ -.gantt #grid .grid-background { - fill: none; -} -.gantt #grid .grid-header { - fill: #ffffff; - stroke: #d1d8dd; - stroke-width: 1.4; -} -.gantt #grid .grid-row { - fill: #ffffff; -} -.gantt #grid .grid-row:nth-child(even) { - fill: #fafbfc; -} -.gantt #grid .row-line { - stroke: #EBEFF2; -} -.gantt #grid .tick { - stroke: #d1d8dd; - stroke-width: 0.2; -} -.gantt #grid .tick.thick { - stroke-width: 0.4; -} -.gantt #grid .today-highlight { - fill: #fffce7; - opacity: 0.5; -} -.gantt #arrow { - fill: none; - stroke: #8D99A6; - stroke-width: 1.4; -} -.gantt .bar { - fill: #cbd1d8; - stroke: #aeb0b1; - stroke-width: 0; - transition: stroke-width 0.3s ease; -} -.gantt .bar-progress { - fill: #a8a8ff; -} -.gantt .bar-invalid { - fill: transparent; - stroke: #aeb0b1; - stroke-width: 1; - stroke-dasharray: 5; -} -.gantt .bar-invalid ~ .bar-label { - fill: #6c7680; -} -.gantt .bar-label { - fill: #fff; - dominant-baseline: central; - text-anchor: middle; - font-size: 12px; - font-weight: lighter; - letter-spacing: 0.8px; -} -.gantt .bar-label.big { - fill: #6c7680; - text-anchor: start; -} -.gantt .handle { - fill: #F0F4F7; - cursor: ew-resize; - opacity: 0; - visibility: hidden; - transition: opacity .3s ease; -} -.gantt .bar-wrapper { - cursor: pointer; -} -.gantt .bar-wrapper:hover .bar { - stroke-width: 2; -} -.gantt .bar-wrapper:hover .handle { - visibility: visible; - opacity: 1; -} -.gantt .bar-wrapper.active .bar { - stroke-width: 2; -} -.gantt .primary-text, -.gantt .secondary-text { - font-size: 12px; - text-anchor: middle; -} -.gantt .primary-text { - fill: #6c7680; -} -.gantt .secondary-text { - fill: #36414C; -} -.gantt #details { - font-size: 14; -} -.gantt #details .details-container { - stroke: #d1d8dd; - stroke-width: 1.1; - fill: #fff; -} -.gantt #details .details-heading { - fill: #36414C; - font-weight: 500; -} -.gantt #details .details-body { - fill: #6c7680; -} -.gantt .hide { - display: none; -} diff --git a/frappe/public/js/frappe/list/doclistview.js b/frappe/public/js/frappe/list/doclistview.js index dc33612e00..10bc219813 100644 --- a/frappe/public/js/frappe/list/doclistview.js +++ b/frappe/public/js/frappe/list/doclistview.js @@ -446,7 +446,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({ }, render_rows_Gantt: function(values) { - var gantt_area = $('') + var gantt_area = $('') .appendTo(this.wrapper.find('.result-list').css("overflow", "scroll")); var id = frappe.dom.set_unique_id(gantt_area); @@ -460,41 +460,36 @@ frappe.views.DocListView = frappe.ui.Listing.extend({ id: item[field_map.id], doctype: me.doctype, progress: item.progress, - dependent: item.depends_on_tasks || "" + dependencies: item.depends_on_tasks || "" }; }); - frappe.require(["assets/frappe/js/lib/snap.svg-min.js", "assets/frappe/css/gantt.css"], function() { - me.gantt = new Gantt({ - parent_selector: '#' + id, - tasks: tasks, - date_format: "YYYY-MM-DD", - bar: { - height: 20 - }, - events: { - bar_on_click: function (task) { + frappe.require([ + "assets/frappe/js/lib/snap.svg-min.js", + "assets/frappe/js/lib/frappe-gantt/frappe-gantt.min.js" + ], function() { + me.gantt = new Gantt("#"+id, tasks, { + date_format: "YYYY-MM-DD", + on_click: function (task) { frappe.set_route('Form', task.doctype, task.id); }, - bar_on_date_change: function(task, start, end) { + on_date_change: function(task, start, end) { update_field(task.id, field_map.start, start.format("YYYY-MM-DD"), function() { update_field(task.id, field_map.end, end.format("YYYY-MM-DD"), function() { show_alert({message:__("Saved"), indicator:'green'}, 1); }); }); }, - bar_on_progress_change: function(task, progress) { + on_progress_change: function(task, progress) { update_field(task.id, 'progress', progress, function() { show_alert({message:__("Saved"), indicator:'green'}, 1); }); }, - on_viewmode_change: function(mode) { + on_view_change: function(mode) { me.list_settings.view_mode = mode; } - } - }); - me.gantt.render(); + }); - var view_modes = me.gantt.get_view_modes() || []; + var view_modes = me.gantt.config.view_modes || []; var dropdown = "
" + "" + ""+__('Day')+"" + @@ -518,7 +513,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({ $dropdown.on("click", ".option", function() { var mode = $(this).data('value'); - me.gantt.set_view_mode(mode) + me.gantt.change_view_mode(mode) $dropdown.find(".dropdown-text").text(mode); }) }); diff --git a/frappe/public/js/frappe/views/gantt.js b/frappe/public/js/frappe/views/gantt.js deleted file mode 100755 index b35809b51a..0000000000 --- a/frappe/public/js/frappe/views/gantt.js +++ /dev/null @@ -1,1075 +0,0 @@ -/* - -Opts: - parent_selector: [reqd] - label_width: default 200 - step: 24 // no of hours - column_width: 15 // pixels - date_format: 'YYYY-MM-DD' - bar.height: 26 - arrow.curve: 15 - -*/ - -var Gantt = Class.extend({ - init: function(opts) { - this.opts = opts; - this.events = this.opts.events; - this.set_defaults(); - this.prepare(); - this.render(); - }, - set_defaults: function() { - var defaults = { - label_width: 38, - header_height: 50, - column_width: 30, - step: 24, - valid_view_modes: [ - "Quarter Day", - "Half Day", - "Day", - "Week", - "Month" - ], - bar: { - height: 20 - }, - arrow: { - curve: 5 - }, - view_mode: 'Day', - padding: 18, - date_format: 'DD-MM-YYYY' - }; - for(var key in defaults) { - if(defaults.hasOwnProperty(key)) { - if(!this.opts[key]) this.opts[key] = defaults[key]; - } - } - - this._bars = []; - this._arrows = []; - this.groups = {}; - - //prepare tasks - var me = this; - this.tasks = this.opts.tasks.map(function(task, i) { - // momentify - task._start = moment(task.start, me.opts.date_format); - task._end = moment(task.end, me.opts.date_format); - //index - task._index = i; - //invalid dates - if(!task.start || !task.end) { - task._start = moment().startOf('day'); - task._end = moment().startOf('day').add(2, 'days'); - task.invalid = true; - } - return task; - }); - //default view mode - this.set_scale(this.opts.view_mode); - }, - prepare: function() { - //TODO: check for valid dates - this.start = this.end = undefined; - this.prepare_dates(); - this.render_canvas(); - }, - render: function() { - this.clear(); - this.setup_groups(); - this.make_grid(); - this.make_dates(); - this.make_bars(); - this.make_arrows(); - this.set_arrows_on_bars(); - this.setup_events(); - this.set_width(); - this.set_scroll_position(); - this.bind(); - }, - bind: function() { - this.bind_grid_click(); - }, - render_canvas: function() { - this.canvas = Snap(this.opts.parent_selector); - this.canvas.addClass("gantt"); - }, - clear: function () { - this.canvas.clear(); - this._bars = []; - this._arrows = []; - }, - prepare_dates: function() { - var me = this; - this.tasks.forEach(function(task) { - // set global start and end date - if(!me.start || task._start < me.start) { - me.start = task._start; - } - if(!me.end || task._end > me.end) { - me.end = task._end; - } - }); - this.set_gantt_dates(); - this.setup_dates(); - }, - set_gantt_dates: function() { - var me = this; - if(me.view_is(['Quarter Day','Half Day'])) { - me.start = me.start.clone().subtract(7, 'day'); - me.end = me.end.clone().add(7, 'day'); - } else if(me.view_is('Month')) { - me.start = me.start.clone().startOf('year'); - me.end = me.end.clone().endOf('month').add(1, 'year'); - } else { - me.start = me.start.clone().startOf('month').subtract(1, 'month'); - me.end = me.end.clone().endOf('month').add(1, 'month'); - } - }, - setup_dates: function() { - this.dates = []; - var cur_date = null; - while(cur_date === null || cur_date < this.end) { - if(!cur_date) { - cur_date = this.start.clone(); - } else { - cur_date = this.view_is('Month') ? - cur_date = cur_date.clone().add(1, 'month'): - cur_date.clone().add(this.opts.step, 'hours'); - } - this.dates.push(cur_date); - } - }, - setup_groups: function() { - var me = this; - // make group layers - ["grid", "date", "arrow", - "progress", "bar", "details"].forEach(function(name) { - me.groups[name] = me.canvas.group().attr({'id': name}); - }); - }, - get_view_modes: function() { - return this.opts.valid_view_modes || []; - }, - set_view_mode: function(mode) { - this.set_scale(mode); - this.prepare(); - this.render(); - }, - set_scale: function (scale) { - this.view_mode = scale; - - //fire viewmode_change event - this.events.on_viewmode_change(scale); - if(scale === 'Day') { - this.opts.step = 24; - this.opts.column_width = 38; - } - else if(scale === 'Half Day') { - this.opts.step = 24 / 2; - this.opts.column_width = 38; - } - else if(scale === 'Quarter Day') { - this.opts.step = 24 / 4; - this.opts.column_width = 38; - } - else if(scale === 'Week') { - this.opts.step = 24 * 7; - this.opts.column_width = 140; - } - else if(scale === 'Month') { - this.opts.step = 24 * 30; - this.opts.column_width = 120; - } - }, - add_task: function(task) { - task._index = this.tasks.length; - this.tasks.push(task); - this.prepare_dates(); - }, - set_width: function () { - var cur_width = this.canvas.node.getBoundingClientRect().width; - var actual_width = this.canvas.getBBox().width; - if(cur_width < actual_width) - this.canvas.attr("width", actual_width); - }, - set_scroll_position: function() { - var parent_element = document.querySelector(this.opts.parent_selector).parentElement; - if(!parent_element) return; - var scroll_pos = this.get_min_date().diff(this.start, 'hours') / - this.opts.step * this.opts.column_width; - parent_element.scrollLeft = scroll_pos; - }, - get_min_date: function() { - return this.tasks.reduce(function(acc, curr) { - return curr._start.isSameOrBefore(acc._start) ? curr : acc; - })._start; - }, - make_grid: function () { - this.make_grid_background(); - this.make_grid_rows(); - this.make_grid_header(); - this.make_grid_ticks(); - this.make_grid_highlights(); - }, - make_grid_background: function () { - var me = this; - var grid_width = this.opts.label_width + this.dates.length * this.opts.column_width, - grid_height = this.opts.header_height + this.opts.padding + - (this.opts.bar.height + this.opts.padding) * this.tasks.length; - - this.canvas.rect(0,0, grid_width, grid_height) - .addClass('grid-background') - .appendTo(this.groups.grid); - - this.canvas.attr({ - // viewBox: "0 0 " + (x+10) + " " + (y+10), - height: grid_height + me.opts.padding, - width: "100%" - }); - }, - make_grid_header: function () { - var me = this; - var header_width = this.opts.label_width + this.dates.length * this.opts.column_width, - header_height = this.opts.header_height + 10; - me.canvas.rect(0,0, header_width, header_height) - .addClass('grid-header') - .appendTo(me.groups.grid); - }, - make_grid_rows: function () { - var - me = this, - rows = me.canvas.group() - .appendTo(me.groups.grid), - lines = me.canvas.group() - .appendTo(me.groups.grid), - - row_width = me.opts.label_width + me.dates.length * me.opts.column_width, - row_height = me.opts.bar.height + me.opts.padding, - row_y = me.opts.header_height + me.opts.padding/2; - - this.tasks.forEach(function (task, i) { - me.canvas.rect(0, row_y, row_width, row_height) - .addClass("grid-row") - .appendTo(rows); - - me.canvas.line(0, row_y + row_height, row_width, row_y + row_height) - .addClass('row-line') - .appendTo(lines); - row_y += me.opts.bar.height + me.opts.padding; - }); - }, - make_grid_ticks: function () { - var me = this; - var tick_x = me.opts.label_width; - var tick_y = me.opts.header_height + me.opts.padding/2; - var tick_height = (me.opts.bar.height + me.opts.padding) * me.tasks.length; - - this.dates.forEach(function(date) { - var tick_class = 'tick'; - //thick tick for monday - if(me.view_mode === 'Day' && date.day() === 1) { - tick_class += ' thick'; - } - //thick tick for first week - if(me.view_mode === 'Week' && date.date() >= 1 && date.date() < 8) { - tick_class += ' thick'; - } - //thick ticks for quarters - if(me.view_mode === 'Month' && date.month() % 3 === 0) { - tick_class += ' thick'; - } - - me.canvas.path(Snap.format("M {x} {y} v {height}", { - x: tick_x, - y: tick_y, - height: tick_height - })) - .addClass(tick_class) - .appendTo(me.groups.grid); - - if(me.view_mode === 'Month') { - tick_x += date.daysInMonth() * me.opts.column_width/30; - } else { - tick_x += me.opts.column_width; - } - }); - }, - make_grid_highlights: function() { - var me = this; - //highlight today's date - if(me.view_mode === 'Day') { - var x = me.opts.label_width + - moment().startOf('day').diff(me.start, 'hours') / me.opts.step * - me.opts.column_width, - y = 0, - width = me.opts.column_width, - height = (me.opts.bar.height + me.opts.padding) * me.tasks.length + - me.opts.header_height + me.opts.padding/2; - me.canvas.rect(x, y, width, height) - .addClass('today-highlight') - .appendTo(me.groups.grid); - } - }, - make_dates: function() { - var me = this; - - this.dates.forEach(function(date, i) { - var primary_text = ''; - var secondary_text = ''; - if(i===0) { - primary_text = me.get_date_text(date, "primary"); - secondary_text = me.get_date_text(date); - } else { - if(me.view_mode === 'Day') { - primary_text = date.date() !== me.dates[i-1].date() ? - me.get_date_text(date, "primary") : ""; - secondary_text = date.month() !== me.dates[i-1].month() ? - me.get_date_text(date) : ""; - } - else if(me.view_mode === 'Quarter Day') { - primary_text = me.get_date_text(date, "primary"); - secondary_text = date.date() !== me.dates[i-1].date() ? - me.get_date_text(date) : ""; - } - else if(me.view_mode === 'Half Day') { - primary_text = me.get_date_text(date, "primary"); - secondary_text = date.date() !== me.dates[i-1].date() ? - me.get_date_text(date) : ""; - } - else if(me.view_mode === 'Week') { - primary_text = me.get_date_text(date, "primary"); - secondary_text = date.month() !== me.dates[i-1].month() ? - me.get_date_text(date) : ""; - } - else if(me.view_mode === 'Month') { - primary_text = me.get_date_text(date, "primary"); - secondary_text = date.year() !== me.dates[i-1].year() ? - me.get_date_text(date) : ""; - } - } - var primary_text_x = me.opts.label_width + (i * me.opts.column_width), - primary_text_y = me.opts.header_height, - secondary_text_x = me.opts.label_width + (i * me.opts.column_width), - secondary_text_y = me.opts.header_height - 25; - - if(me.view_mode === 'Month') { - primary_text_x += (date.daysInMonth() * me.opts.column_width/30)/2; - secondary_text_x += (me.opts.column_width * 12)/2; - } - if(me.view_mode === 'Week') { - primary_text_x += me.opts.column_width/2; - secondary_text_x += (me.opts.column_width * 4)/2; - } - if(me.view_mode === 'Day') { - primary_text_x += me.opts.column_width/2; - secondary_text_x += (me.opts.column_width * 30)/2; - } - if(me.view_mode === 'Quarter Day') { - secondary_text_x += (me.opts.column_width * 4)/2; - } - if(me.view_mode === 'Half Day') { - secondary_text_x += (me.opts.column_width * 2)/2; - } - - me.canvas.text(primary_text_x, primary_text_y, primary_text) - .addClass('primary-text') - .appendTo(me.groups.date); - if(secondary_text) { - var $secondary_text = me.canvas.text(secondary_text_x, secondary_text_y, secondary_text) - .addClass('secondary-text') - .appendTo(me.groups.date); - - if($secondary_text.getBBox().x2 > me.groups.grid.getBBox().width) { - $secondary_text.remove(); - } - } - }); - }, - get_date_text: function(date, primary) { - var scale = this.view_mode; - var text = ""; - if(scale === 'Day') { - text = (primary) ? date.format('D') : date.format('MMMM'); - } - else if(scale === 'Quarter Day' || scale === 'Half Day') { - text = (primary) ? date.format('HH') : date.format('D MMM'); - } - else if(scale === 'Week') { - text = (primary) ? "Week " + date.format('W') : date.format('MMMM'); - } - else if(scale === 'Month') { - text = (primary) ? date.format('MMMM') : date.format('YYYY'); - } - return text; - }, - make_arrows: function () { - var me = this; - this.tasks.forEach(function (task) { - if(task.dependent) { - var dependents = task.dependent.split(','); - dependents.forEach(function (task_dependent) { - var dependent = me.get_task(task_dependent.trim()); - if(!dependent) return; - var arrow = new Arrow({ - gantt: me, - from_task: me._bars[dependent._index], - to_task: me._bars[task._index] - }); - me.groups.arrow.add(arrow.element); - me._arrows.push(arrow); - }); - } - }); - }, - - make_label: function () { - var me = this; - var label_x = me.opts.label_width - me.opts.padding, - label_y = me.opts.header_height + me.opts.bar.height/2 + me.opts.padding; - - this.tasks.forEach(function (task) { - me.canvas.text(label_x, label_y, task.name).appendTo(me.groups.label); - label_y += me.opts.bar.height + me.opts.padding; - }); - - me.groups.label.attr({ - "text-anchor": "end", - "dominant-baseline": "central" - }); - }, - make_bars: function () { - var me = this; - - this.tasks.forEach(function (task, i) { - var bar = new Bar({ - canvas: me.canvas, - task: task, - gantt: { - offset: me.opts.label_width, - unit_width: me.opts.column_width, - step: me.opts.step, - start: me.start, - header_height: me.opts.header_height, - padding: me.opts.padding, - view_mode: me.view_mode - }, - popover_group: me.groups.details - }); - me._bars.push(bar); - me.groups.bar.add(bar.group); - }); - }, - set_arrows_on_bars: function() { - var me = this; - this._bars.forEach(function(bar) { - bar.arrows = me._arrows.filter(function(arrow) { - if(arrow.from_task.task.id === bar.task.id || arrow.to_task.task.id === bar.task.id) - return arrow; - }); - }); - }, - setup_events: function() { - var me = this; - this._bars.forEach(function(bar) { - bar.events.on_date_change = me.events.bar_on_date_change; - bar.events.on_progress_change = me.events.bar_on_progress_change; - bar.click(me.events.bar_on_click); - }); - }, - bind_grid_click: function() { - var me = this; - this.groups.grid.click(function() { - me.canvas.selectAll('.bar-wrapper').forEach(function(el) { - el.removeClass('active'); - }); - }); - }, - view_is: function(modes) { - var me = this; - if (typeof modes === 'string') { - return me.view_mode === modes; - } else { - modes.reduce(function(acc, curr) { - return (me.view_mode === curr) || acc - }, false); - // for (var i = 0; i < modes.length; i++) { - // if(me.gantt.view_mode === modes[i]) return true; - // } - // return false; - } - }, - get_task: function (id) { - var result = null; - this.tasks.forEach(function (task) { - if (task.id === id){ - result = task; - } - }); - return result; - } -}); - -/* - Class: Bar - - Opts: - canvas [reqd] - task [reqd] - unit_width [reqd] - x - y -*/ - -var Bar = Class.extend({ - init: function (opts) { - for(var key in opts) { - if(opts.hasOwnProperty(key)) - this[key] = opts[key]; - } - this.set_defaults(); - this.prepare(); - this.draw(); - this.bind(); - this.action_completed = false; - }, - set_defaults: function () { - var defaults = { - height: 20, - corner_radius: 3, - events: {} - }; - for(var key in defaults) { - if(defaults.hasOwnProperty(key)) - if(!this[key]) this[key] = defaults[key]; - } - }, - prepare: function () { - this.prepare_values(); - this.prepare_plugins(); - }, - prepare_values: function() { - if(!this.task.start || !this.task.end){ - this.invalid = true; - } - this.x = this.compute_x(); - this.y = this.compute_y(); - this.duration = (this.task._end.diff(this.task._start, 'hours') + 24)/this.gantt.step; - this.width = this.gantt.unit_width * this.duration; - this.progress_width = this.gantt.unit_width * this.duration * (this.task.progress/100) || 0; - this.group = this.canvas.group().addClass('bar-wrapper'); - this.bar_group = this.canvas.group().addClass('bar-group').appendTo(this.group); - this.handle_group = this.canvas.group().addClass('handle-group').appendTo(this.group); - }, - prepare_plugins: function() { - this.filters = {}; - Snap.plugin(function (Snap, Element, Paper, global, Fragment) { - Element.prototype.get = function (attr) { - return +this.attr(attr); - }; - Element.prototype.getX = function () { - return this.get("x"); - }; - Element.prototype.getEndX = function () { - return this.getX() + this.getWidth(); - }; - Element.prototype.getY = function () { - return this.get("y"); - }; - Element.prototype.getWidth = function () { - return this.get("width"); - }; - }); - }, - draw: function () { - this.draw_bar(); - this.draw_progress_bar(); - this.draw_label(); - this.draw_resize_handles(); - }, - draw_bar: function() { - this.$bar = this.canvas.rect(this.x, this.y, - this.width, this.height, - this.corner_radius, this.corner_radius) - .addClass("bar") - .appendTo(this.bar_group); - if(this.invalid) { - this.$bar.addClass('bar-invalid'); - } - }, - draw_progress_bar: function() { - if(this.invalid) return; - this.$bar_progress = this.canvas.rect(this.x, this.y, - this.progress_width, this.height, - this.corner_radius, this.corner_radius) - .addClass("bar-progress") - .appendTo(this.bar_group); - }, - draw_label: function() { - this.canvas.text(this.x + this.width/2, - this.y + this.height/2, - this.task.name) - .addClass("bar-label") - .appendTo(this.bar_group); - this.update_label_position(); - }, - draw_resize_handles: function() { - if(this.invalid) return; - var bar = this.$bar, - bar_progress = this.$bar_progress; - - this.canvas.rect(bar.getX() + bar.getWidth() - 9, bar.getY() + 1, - 8, this.height - 2, this.corner_radius, this.corner_radius) - .addClass('handle right') - .appendTo(this.handle_group); - this.canvas.rect(bar.getX() + 1, bar.getY() + 1, - 8, this.height - 2, this.corner_radius, this.corner_radius) - .addClass('handle left') - .appendTo(this.handle_group); - - if(this.task.progress && this.task.progress < 100) { - this.canvas.polygon( - bar_progress.getEndX() - 5, bar_progress.getY() + bar_progress.get("height"), - bar_progress.getEndX() + 5, bar_progress.getY() + bar_progress.get("height"), - bar_progress.getEndX(), bar_progress.getY() + bar_progress.get("height") - 8.66 - ) - .addClass('handle progress') - .appendTo(this.handle_group) - } - }, - draw_invalid_bar: function() { - var x = this.gantt.offset + - (moment().startOf('day').diff(this.gantt.start, 'hours') / - this.gantt.step * - this.gantt.unit_width); - - this.canvas.rect(x, this.y, - this.gantt.unit_width*2, this.height, - this.corner_radius, this.corner_radius) - .addClass("bar-invalid") - .appendTo(this.bar_group); - //continue here - this.canvas.text(x + this.gantt.unit_width, - this.y + this.height/2, - 'Dates not set') - .addClass("bar-label big") - .appendTo(this.bar_group); - }, - bind: function () { - if(this.invalid) return; - this.show_details(); - this.bind_resize(); - this.bind_drag(); - this.bind_resize_progress(); - }, - show_details: function () { - var me = this; - - var details_box = me.popover_group.select('.details-wrapper'); - if(!details_box) { - details_box = me.canvas.group().addClass('details-wrapper'); - details_box.appendTo(me.popover_group); - me.canvas.rect(0, 0, 0, 110, 2, 2) - .addClass('details-container') - .appendTo(details_box); - me.canvas.text(0, 0, "") - .attr({ dx: 10, dy: 30 }) - .addClass('details-heading') - .appendTo(details_box); - me.canvas.text(0, 0, "") - .attr({ dx: 10, dy: 65 }) - .addClass('details-body') - .appendTo(details_box); - me.canvas.text(0, 0, "") - .attr({ dx: 10, dy: 90 }) - .addClass('details-body') - .appendTo(details_box); - } - - - this.group.mouseover(function (e, x, y) { - me.popover_group.removeClass('hide'); - - var pos = me.get_details_position(); - details_box.transform("t" + pos.x + "," + pos.y); - - var heading = me.task.name + ": " + - me.task._start.format("MMM D") + " - " + - me.task._end.format("MMM D"); - - var $heading = me.popover_group.select('.details-heading'); - $heading.attr('text', heading); - - var bbox = $heading.getBBox(); - details_box.select('.details-container').attr({ - width: bbox.width + 20 - }); - - var body1 = "Duration: " + - me.task._end.diff(me.task._start, 'days') + " days"; - var body2 = me.task.progress ? - "Progress: " + me.task.progress + "%" : ""; - - var $body = me.popover_group.selectAll('.details-body'); - $body[0].attr('text', body1); - $body[1].attr('text', body2); - }); - this.group.mouseout(function () { - setTimeout(function () { - me.popover_group.addClass('hide'); - }, 500); - }); - }, - get_details_position: function () { - return { - x: this.$bar.getEndX() + 2, - y: this.$bar.getY() - 10 - }; - }, - bind_resize: function() { - var me = this; - var bar = this.$bar; - var handle = me.get_handles(); - handle.right.drag(onmove_right, onstart, onstop_right); - handle.left.drag(onmove_left, onstart, onstop_left); - - function onstart() { - bar.ox = bar.getX(); - bar.oy = bar.getY(); - bar.owidth = bar.getWidth(); - this.ox = this.getX(); - this.oy = this.getY(); - bar.finaldx = 0; - } - - function onmove_right(dx, dy) { - bar.finaldx = me.get_snap_position(dx); - me.update_bar_position(null, bar.owidth + bar.finaldx); - } - function onstop_right() { - if(bar.finaldx) me.date_changed(); - me.set_action_completed(); - } - - function onmove_left(dx, dy) { - bar.finaldx = me.get_snap_position(dx); - me.update_bar_position(bar.ox + bar.finaldx, bar.owidth - bar.finaldx); - } - function onstop_left() { - if(bar.finaldx) me.date_changed(); - me.set_action_completed(); - } - }, - get_handles: function() { - var me = this; - return { - left: me.handle_group.select('.handle.left'), - right: me.handle_group.select('.handle.right') - }; - }, - bind_drag: function() { - var me = this; - var bar = this.$bar; - this.bar_group.drag(onmove, onstart, onstop); - - function onmove(dx, dy) { - bar.finaldx = me.get_snap_position(dx); - me.update_bar_position(bar.ox + bar.finaldx); - } - function onstop() { - if(!bar.finaldx) return; - me.date_changed(); - me.set_action_completed(); - } - function onstart() { - bar.ox = bar.getX(); - bar.finaldx = 0; - } - }, - bind_resize_progress: function() { - var me = this; - var bar = this.$bar; - var bar_progress = this.$bar_progress; - var handle = me.group.select('.handle.progress'); - handle && handle.drag(onmove, onstart, onstop); - - function onmove(dx, dy) { - if(dx > bar_progress.max_dx) { - dx = bar_progress.max_dx; - } - if(dx < bar_progress.min_dx) { - dx = bar_progress.min_dx; - } - - bar_progress.attr("width", bar_progress.owidth + dx); - handle.transform("t"+dx+",0"); - bar_progress.finaldx = dx; - } - function onstop() { - if(!bar_progress.finaldx) return; - me.progress_changed(); - me.set_action_completed(); - } - function onstart() { - bar_progress.finaldx = 0; - bar_progress.owidth = bar_progress.getWidth(); - bar_progress.min_dx = -bar_progress.getWidth(); - bar_progress.max_dx = bar.getWidth() - bar_progress.getWidth(); - } - }, - view_is: function(modes) { - var me = this; - if (typeof modes === 'string') { - return me.gantt.view_mode === modes; - } else { - for (var i = 0; i < modes.length; i++) { - if(me.gantt.view_mode === modes[i]) return true; - } - return false; - } - }, - update_bar_position: function(x, width) { - var bar = this.$bar; - if(x) this.update_attr(bar, "x", x); - if(width) this.update_attr(bar, "width", width); - this.update_label_position(); - this.update_handle_position(); - this.update_progressbar_position(); - this.update_arrow_position(); - this.update_details_position(); - }, - click: function(callback) { - var me = this; - this.group.click(function() { - if(me.action_completed) { - // just finished a move action, wait for a few seconds - return; - } - if(me.group.hasClass('active')) { - callback(me.task); - } - me.unselect_all(); - me.group.toggleClass('active'); - }); - }, - date_changed: function() { - this.events.on_date_change && - this.events.on_date_change( - this.task, - this.compute_start_date(), - this.compute_end_date() - ); - }, - progress_changed: function() { - this.events.on_progress_change && - this.events.on_progress_change( - this.task, - this.compute_progress() - ); - }, - set_action_completed: function() { - var me = this; - this.action_completed = true; - setTimeout(function() { me.action_completed = false; }, 2000); - }, - compute_date: function(x) { - var shift = (x - this.compute_x())/this.gantt.unit_width; - var date = this.task._start.clone().add(this.gantt.step*shift, 'hours'); - return date; - }, - compute_start_date: function() { - var bar = this.$bar, - shift = (bar.getX() - this.compute_x()) / this.gantt.unit_width, - new_start_date = this.task._start.clone().add(this.gantt.step*shift, 'hours'); - return new_start_date; - }, - compute_end_date: function() { - var bar = this.$bar, - og_x = this.compute_x() + this.duration * this.gantt.unit_width, - final_x = bar.getEndX(), - shift = (final_x - og_x) / this.gantt.unit_width, - new_end_date = this.task._end.clone().add(this.gantt.step*shift, 'hours'); - return new_end_date; - }, - compute_progress: function() { - return this.$bar_progress.getWidth() / this.$bar.getWidth() * 100; - }, - compute_x: function() { - var x = this.gantt.offset + - (this.task._start.diff(this.gantt.start, 'hours')/this.gantt.step * - this.gantt.unit_width); - if(this.view_is('Month')) { - x = this.gantt.offset + - this.task._start.diff(this.gantt.start, 'days') * - this.gantt.unit_width/30; - } - return x; - }, - compute_y: function() { - return this.gantt.header_height + this.gantt.padding + - this.task._index * (this.height + this.gantt.padding); - }, - get_snap_position: function(dx) { - var me = this; - var odx = dx, rem, position; - - if (me.view_is('Week')) { - rem = dx % (me.gantt.unit_width/7); - position = odx - rem + - ((rem < me.gantt.unit_width/14) ? 0 : me.gantt.unit_width/7); - } else if (me.view_is('Month')) { - rem = dx % (me.gantt.unit_width/30); - position = odx - rem + - ((rem < me.gantt.unit_width/60) ? 0 : me.gantt.unit_width/30); - } else { - rem = dx % me.gantt.unit_width; - position = odx - rem + - ((rem < me.gantt.unit_width/2) ? 0 : me.gantt.unit_width); - } - return position; - }, - update_attr: function(element, attr, value) { - value = +value; - if(!isNaN(value)) { - element.attr(attr, value); - } - return element; - }, - update_progressbar_position: function() { - this.$bar_progress.attr('x', this.$bar.getX()); - this.$bar_progress.attr('width', this.$bar.getWidth() * (this.task.progress/100)); - }, - update_label_position: function() { - var bar = this.$bar, - label = this.group.select('.bar-label'); - if(label.getBBox().width > bar.getWidth()){ - label.addClass('big').attr('x', bar.getX() + bar.getWidth() + 5); - } else { - label.removeClass('big').attr('x', bar.getX() + bar.getWidth()/2); - } - }, - update_handle_position: function() { - var bar = this.$bar; - this.handle_group.select(".handle.left").attr({ - "x": bar.getX() + 1, - }); - this.handle_group.select(".handle.right").attr({ - "x": bar.getX() + bar.getWidth() - 9, - }); - }, - update_arrow_position: function() { - this.arrows.forEach(function(arrow) { - arrow.update(); - }); - }, - update_details_position: function() { - var details_box = this.popover_group.select('.details-wrapper'); - var pos = this.get_details_position(); - details_box && details_box.transform("t" + pos.x + "," + pos.y); - }, - unselect_all: function() { - this.canvas.selectAll('.bar-wrapper').forEach(function(el) { - el.removeClass('active'); - }); - } -}); - -/* - Class: Arrow - from_task ---> to_task - - Opts: - gantt (Gantt object) - from_task (Bar object) - to_task (Bar object) -*/ - -var Arrow = Class.extend({ - init: function (opts) { - for(var key in opts) { - if(opts.hasOwnProperty(key)) - this[key] = opts[key]; - } - this.prepare(); - this.draw(); - }, - prepare: function() { - var gantt = this.gantt, - from_task = this.from_task, - to_task = this.to_task; - - this.start_x =from_task.$bar.getX() + from_task.$bar.getWidth()/2; - - while(to_task.$bar.getX() < this.start_x + gantt.opts.padding && - this.start_x > from_task.$bar.getX() + gantt.opts.padding) - { - this.start_x -= 10; - } - - this.start_y = gantt.opts.header_height + gantt.opts.bar.height + - (gantt.opts.padding + gantt.opts.bar.height) * from_task.task._index + - gantt.opts.padding; - - this.end_x = to_task.$bar.getX() - gantt.opts.padding/2; - this.end_y = gantt.opts.header_height + gantt.opts.bar.height/2 + - (gantt.opts.padding + gantt.opts.bar.height) * to_task.task._index + - gantt.opts.padding; - - var from_is_below_to = (from_task.task._index > to_task.task._index); - this.curve = gantt.opts.arrow.curve; - this.clockwise = from_is_below_to ? 1 : 0; - this.curve_y = from_is_below_to ? -this.curve : this.curve; - this.offset = from_is_below_to ? - this.end_y + gantt.opts.arrow.curve: - this.end_y - gantt.opts.arrow.curve; - - this.path = - Snap.format("M {start_x} {start_y} V {offset} " + - "a {curve} {curve} 0 0 {clockwise} {curve} {curve_y} " + - "L {end_x} {end_y} m -5 -5 l 5 5 l -5 5", - { - start_x: this.start_x, - start_y: this.start_y, - end_x: this.end_x, - end_y: this.end_y, - offset: this.offset, - curve: this.curve, - clockwise: this.clockwise, - curve_y: this.curve_y - }); - - if(to_task.$bar.getX() < from_task.$bar.getX() + gantt.opts.padding) { - this.path = - Snap.format("M {start_x} {start_y} v {down_1} " + - "a {curve} {curve} 0 0 1 -{curve} {curve} H {left} " + - "a {curve} {curve} 0 0 {clockwise} -{curve} {curve_y} V {down_2} " + - "a {curve} {curve} 0 0 {clockwise} {curve} {curve_y} " + - "L {end_x} {end_y} m -5 -5 l 5 5 l -5 5", - { - start_x: this.start_x, - start_y: this.start_y, - end_x: this.end_x, - end_y: this.end_y, - down_1: this.gantt.opts.padding/2 - this.curve, - down_2: to_task.$bar.getY() + to_task.$bar.get('height')/2 - this.curve_y, - left: to_task.$bar.getX() - gantt.opts.padding, - offset: this.offset, - curve: this.curve, - clockwise: this.clockwise, - curve_y: this.curve_y - }); - } - }, - draw: function() { - this.element = this.gantt.canvas.path(this.path) - .attr("data-from", this.from_task.task.id) - .attr("data-to", this.to_task.task.id); - }, - update: function() { - this.prepare(); - this.element.attr('d', this.path); - } -}); \ No newline at end of file diff --git a/frappe/public/js/lib/frappe-gantt/frappe-gantt.min.js b/frappe/public/js/lib/frappe-gantt/frappe-gantt.min.js new file mode 100755 index 0000000000..83515ba5c8 --- /dev/null +++ b/frappe/public/js/lib/frappe-gantt/frappe-gantt.min.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Gantt",[],e):"object"==typeof exports?exports.Gantt=e():t.Gantt=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return t[r].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function a(t,e,n){function r(){a(),O.change_view_mode=o,O.unselect_all=X,O.view_is=U,O.get_bar=j,O.trigger_event=G,o(O.config.view_mode)}function a(){var r={header_height:50,column_width:30,step:24,view_modes:["Quarter Day","Half Day","Day","Week","Month"],bar:{height:20},arrow:{curve:5},padding:18,view_mode:"Day",date_format:"YYYY-MM-DD"};O.element=t,O._tasks=e,O.config=Object.assign({},r,n),O._bars=[],O._arrows=[],O.element_groups={}}function o(t){y(t),d(),g(),G("view_change",[t])}function d(){c(),l(),f(),u()}function c(){O.tasks=O._tasks.map(function(t,e){if(t._start=moment(t.start,O.config.date_format),t._end=moment(t.end,O.config.date_format),t._index=e,t.start||t.end||(t._start=moment().startOf("day"),t._end=moment().startOf("day").add(2,"days")),!t.start&&t.end&&(t._start=t._end.clone().add(-2,"days")),t.start&&!t.end&&(t._end=t._start.clone().add(2,"days")),t.start&&t.end||(t.invalid=!0),"string"==typeof t.dependencies||!t.dependencies){var n=[];t.dependencies&&(n=t.dependencies.split(",").map(function(t){return t.trim()}).filter(function(t){return t})),t.dependencies=n}return t})}function l(){O.dependency_map={};var t=!0,e=!1,n=void 0;try{for(var r,a=O.tasks[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){var o=r.value,i=!0,d=!1,s=void 0;try{for(var c,l=o.dependencies[Symbol.iterator]();!(i=(c=l.next()).done);i=!0){var f=c.value;O.dependency_map[f]=O.dependency_map[f]||[],O.dependency_map[f].push(o.id)}}catch(u){d=!0,s=u}finally{try{!i&&l["return"]&&l["return"]()}finally{if(d)throw s}}}}catch(u){e=!0,n=u}finally{try{!t&&a["return"]&&a["return"]()}finally{if(e)throw n}}}function f(){var t=!0,e=!1,n=void 0;try{for(var r,a=O.tasks[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){var o=r.value;(!O.gantt_start||o._startO.gantt_end)&&(O.gantt_end=o._end)}}catch(i){e=!0,n=i}finally{try{!t&&a["return"]&&a["return"]()}finally{if(e)throw n}}p(),_()}function u(){O.canvas=Snap(O.element).addClass("gantt")}function g(){h(),v(),A(),M(),T(),S(),W(),m(),w(),Y()}function h(){O.canvas.clear(),O._bars=[],O._arrows=[]}function p(){U(["Quarter Day","Half Day"])?(O.gantt_start=O.gantt_start.clone().subtract(7,"day"),O.gantt_end=O.gantt_end.clone().add(7,"day")):U("Month")?(O.gantt_start=O.gantt_start.clone().startOf("year"),O.gantt_end=O.gantt_end.clone().endOf("month").add(1,"year")):(O.gantt_start=O.gantt_start.clone().startOf("month").subtract(1,"month"),O.gantt_end=O.gantt_end.clone().endOf("month").add(1,"month"))}function _(){O.dates=[];for(var t=null;null===t||t=1&&s.date()<8&&(c+=" thick"),U("Month")&&s.month()%3===0&&(c+=" thick"),O.canvas.path(Snap.format("M {x} {y} v {height}",{x:t,y:e,height:n})).addClass(c).appendTo(O.element_groups.grid),t+=U("Month")?s.daysInMonth()*O.config.column_width/30:O.config.column_width}}catch(l){a=!0,o=l}finally{try{!r&&d["return"]&&d["return"]()}finally{if(a)throw o}}}function $(){if(U("Day")){var t=moment().startOf("day").diff(O.gantt_start,"hours")/O.config.step*O.config.column_width,e=0,n=O.config.column_width,r=(O.config.bar.height+O.config.padding)*O.tasks.length+O.config.header_height+O.config.padding/2;O.canvas.rect(t,e,n,r).addClass("today-highlight").appendTo(O.element_groups.grid)}}function M(){var t=!0,e=!1,n=void 0;try{for(var r,a=E()[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){var o=r.value;if(O.canvas.text(o.lower_x,o.lower_y,o.lower_text).addClass("lower-text").appendTo(O.element_groups.date),o.upper_text){var i=O.canvas.text(o.upper_x,o.upper_y,o.upper_text).addClass("upper-text").appendTo(O.element_groups.date);i.getBBox().x2>O.element_groups.grid.getBBox().width&&i.remove()}}}catch(d){e=!0,n=d}finally{try{!t&&a["return"]&&a["return"]()}finally{if(e)throw n}}}function E(){var t=null,e=O.dates.map(function(e,n){var r=D(e,t,n);return t=e,r});return e}function D(t,e,n){e||(e=t.clone().add(1,"year"));var r={"Quarter Day_lower":t.format("HH"),"Half Day_lower":t.format("HH"),Day_lower:t.date()!==e.date()?t.format("D"):"",Week_lower:"Week "+t.format("W"),Month_lower:t.format("MMMM"),"Quarter Day_upper":t.date()!==e.date()?t.format("D MMM"):"","Half Day_upper":t.date()!==e.date()?t.format("D MMM"):"",Day_upper:t.month()!==e.month()?t.format("MMMM"):"",Week_upper:t.month()!==e.month()?t.format("MMMM"):"",Month_upper:t.year()!==e.year()?t.format("YYYY"):""},a={x:n*O.config.column_width,lower_y:O.config.header_height,upper_y:O.config.header_height-25},o={"Quarter Day_lower":4*O.config.column_width/2,"Quarter Day_upper":0,"Half Day_lower":2*O.config.column_width/2,"Half Day_upper":0,Day_lower:O.config.column_width/2,Day_upper:30*O.config.column_width/2,Week_lower:O.config.column_width/2,Week_upper:4*O.config.column_width/2,Month_lower:t.daysInMonth()*O.config.column_width/30/2,Month_upper:12*O.config.column_width/2};return{upper_text:r[O.config.view_mode+"_upper"],lower_text:r[O.config.view_mode+"_lower"],upper_x:a.x+o[O.config.view_mode+"_upper"],upper_y:a.upper_y,lower_x:a.x+o[O.config.view_mode+"_lower"],lower_y:a.lower_y}}function S(){O._arrows=[];var t=!0,e=!1,n=void 0;try{for(var r,a=function(){var t=r.value,e=[];e=t.dependencies.map(function(e){var n=H(e);if(n){var r=(0,s["default"])(O,O._bars[n._index],O._bars[t._index]);return O.element_groups.arrow.add(r.element),r}}),O._arrows=O._arrows.concat(e)},o=O.tasks[Symbol.iterator]();!(t=(r=o.next()).done);t=!0)a()}catch(i){e=!0,n=i}finally{try{!t&&o["return"]&&o["return"]()}finally{if(e)throw n}}}function T(){O._bars=O.tasks.map(function(t){var e=(0,i["default"])(O,t);return O.element_groups.bar.add(e.group),e})}function W(){var t=!0,e=!1,n=void 0;try{for(var r,a=function(){var t=r.value;t.arrows=O._arrows.filter(function(e){return e.from_task.task.id===t.task.id||e.to_task.task.id===t.task.id})},o=O._bars[Symbol.iterator]();!(t=(r=o.next()).done);t=!0)a()}catch(i){e=!0,n=i}finally{try{!t&&o["return"]&&o["return"]()}finally{if(e)throw n}}}function Y(){O.element_groups.grid.click(function(){X(),O.element_groups.details.addClass("hide")})}function X(){O.canvas.selectAll(".bar-wrapper").forEach(function(t){t.removeClass("active")})}function U(t){if("string"==typeof t)return O.config.view_mode===t;if(Array.isArray(t)){var e=!0,n=!1,r=void 0;try{for(var a,o=t[Symbol.iterator]();!(e=(a=o.next()).done);e=!0){var i=a.value;if(O.config.view_mode===i)return!0}}catch(d){n=!0,r=d}finally{try{!e&&o["return"]&&o["return"]()}finally{if(n)throw r}}return!1}}function H(t){return O.tasks.find(function(e){return e.id===t})}function j(t){return O._bars.find(function(e){return e.task.id===t})}function G(t,e){O.config["on_"+t]&&O.config["on_"+t].apply(null,e)}var O={};return r(),O}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=a,n(1);var o=n(5),i=r(o),d=n(6),s=r(d);t.exports=e["default"]},function(t,e,n){var r=n(2);"string"==typeof r&&(r=[[t.id,r,""]]);n(4)(r,{});r.locals&&(t.exports=r.locals)},function(t,e,n){e=t.exports=n(3)(),e.push([t.id,".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}.gantt .bar-progress{fill:#a3a3ff}.gantt .bar-invalid{fill:transparent;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;letter-spacing:.8px}.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}.gantt .bar-wrapper:hover .bar{stroke-width:2}.gantt .bar-wrapper:hover .handle{visibility:visible;opacity:1}.gantt .bar-wrapper.active .bar{stroke-width:2}.gantt .primary-text,.gantt .secondary-text{font-size:12px;text-anchor:middle}.gantt .primary-text{fill:#555}.gantt .secondary-text{fill:#333}.gantt #details{font-size:14}.gantt #details .details-container{stroke:#e0e0e0;stroke-width:1.1;fill:#fff}.gantt #details .details-heading{fill:#333;font-weight:500}.gantt #details .details-body{fill:#555}.gantt .hide{display:none}","",{version:3,sources:["/./src/src/gantt.scss"],names:[],mappings:"AAYA,wBAGE,SAAU,CAHZ,oBAME,UACA,eACA,gBAAiB,CARnB,iBAWE,SAAa,CAXf,iCAcE,YAvBgB,CASlB,iBAiBE,cAzB0B,CAQ5B,aAoBE,eACA,eAAiB,CArBnB,mBAuBG,eAAiB,CAvBpB,wBA2BE,aACA,UAAY,CA5Bd,cAgCE,UACA,YACA,gBAAiB,CAlCnB,YAsCE,aACA,eACA,eACA,gCAAiC,CAzCnC,qBA4CE,YA/CY,CAGd,oBA+CE,iBACA,eACA,eACA,kBAAmB,CAlDrB,+BAqDG,SA1Dc,CAKjB,kBAyDE,UACA,0BACA,mBACA,eACA,oBACA,mBAAqB,CA9DvB,sBAiEG,UACA,iBAAkB,CAlErB,eAuEE,UACA,iBACA,UACA,kBACA,2BAA4B,CA3E9B,oBA+EE,cAAe,CA/EjB,+BAmFI,cAAe,CAnFnB,kCAuFI,mBACA,SAAU,CAxFd,gCA8FI,cAAe,CA9FnB,4CAoGE,eACA,kBAAmB,CArGrB,qBAwGE,SA7Ge,CAKjB,uBA2GE,SA/Ge,CAIjB,gBA+GE,YAAa,CA/Gf,mCAkHG,eACA,iBACA,SAAU,CApHb,iCAuHG,UACA,eAAgB,CAxHnB,8BA2HG,SAhIc,CAKjB,aAgIE,YAAa,CACb",file:"gantt.scss",sourcesContent:["$bar-color: #b8c2cc;\n$bar-stroke: #8D99A6;\n$border-color: #e0e0e0;\n$light-bg: #f5f5f5;\n$light-border-color: #ebeff2;\n$light-yellow: #fcf8e3;\n$text-muted: #666;\n$text-light: #555;\n$text-color: #333;\n$blue: #a3a3ff;\n$handle-color: #ddd;\n\n.gantt {\n\n\t.grid-background {\n\t\tfill: none;\n\t}\n\t.grid-header {\n\t\tfill: #ffffff;\n\t\tstroke: $border-color;\n\t\tstroke-width: 1.4;\n\t}\n\t.grid-row {\n\t\tfill: #ffffff;\n\t}\n\t.grid-row:nth-child(even) {\n\t\tfill: $light-bg;\n\t}\n\t.row-line {\n\t\tstroke: $light-border-color;\n\t}\n\t.tick {\n\t\tstroke: $border-color;\n\t\tstroke-width: 0.2;\n\t\t&.thick {\n\t\t\tstroke-width: 0.4;\n\t\t}\n\t}\n\t.today-highlight {\n\t\tfill: $light-yellow;\n\t\topacity: 0.5;\n\t}\n\n\t#arrow {\n\t\tfill: none;\n\t\tstroke: $text-muted;\n\t\tstroke-width: 1.4;\n\t}\n\n\t.bar {\n\t\tfill: $bar-color;\n\t\tstroke: $bar-stroke;\n\t\tstroke-width: 0;\n\t\ttransition: stroke-width .3s ease;\n\t}\n\t.bar-progress {\n\t\tfill: $blue;\n\t}\n\t.bar-invalid {\n\t\tfill: transparent;\n\t\tstroke: $bar-stroke;\n\t\tstroke-width: 1;\n\t\tstroke-dasharray: 5;\n\n\t\t&~.bar-label {\n\t\t\tfill: $text-light;\n\t\t}\n\t}\n\t.bar-label {\n\t\tfill: #fff;\n\t\tdominant-baseline: central;\n\t\ttext-anchor: middle;\n\t\tfont-size: 12px;\n\t\tfont-weight: lighter;\n\t\tletter-spacing: 0.8px;\n\n\t\t&.big {\n\t\t\tfill: $text-light;\n\t\t\ttext-anchor: start;\n\t\t}\n\t}\n\n\t.handle {\n\t\tfill: $handle-color;\n\t\tcursor: ew-resize;\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\ttransition: opacity .3s ease;\n\t}\n\n\t.bar-wrapper {\n\t\tcursor: pointer;\n\n\t\t&:hover {\n\t\t\t.bar {\n\t\t\t\tstroke-width: 2;\n\t\t\t}\n\n\t\t\t.handle {\n\t\t\t\tvisibility: visible;\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\n\t\t&.active {\n\t\t\t.bar {\n\t\t\t\tstroke-width: 2;\n\t\t\t}\n\t\t}\n\t}\n\n\t.primary-text, .secondary-text {\n\t\tfont-size: 12px;\n\t\ttext-anchor: middle;\n\t}\n\t.primary-text {\n\t\tfill: $text-light;\n\t}\n\t.secondary-text {\n\t\tfill: $text-color;\n\t}\n\n\t#details {\n\t\tfont-size: 14;\n\n\t\t.details-container {\n\t\t\tstroke: $border-color;\n\t\t\tstroke-width: 1.1;\n\t\t\tfill: #fff;\n\t\t}\n\t\t.details-heading {\n\t\t\tfill: $text-color;\n\t\t\tfont-weight: 500;\n\t\t}\n\t\t.details-body {\n\t\t\tfill: $text-light;\n\t\t}\n\t}\n\n\t.hide {\n\t\tdisplay: none;\n\t}\n}"],sourceRoot:"webpack://"}])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e=0&&m.splice(e,1)}function d(t){var e=document.createElement("style");return e.type="text/css",o(t,e),e}function s(t){var e=document.createElement("link");return e.rel="stylesheet",o(t,e),e}function c(t,e){var n,r,a;if(e.singleton){var o=y++;n=v||(v=d(e)),r=l.bind(null,n,o,!1),a=l.bind(null,n,o,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=s(e),r=u.bind(null,n),a=function(){i(n),n.href&&URL.revokeObjectURL(n.href)}):(n=d(e),r=f.bind(null,n),a=function(){i(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else a()}}function l(t,e,n,r){var a=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=w(e,a);else{var o=document.createTextNode(a),i=t.childNodes;i[e]&&t.removeChild(i[e]),i.length?t.insertBefore(o,i[e]):t.appendChild(o)}}function f(t,e){var n=e.css,r=e.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function u(t,e){var n=e.css,r=e.sourceMap;r&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var a=new Blob([n],{type:"text/css"}),o=t.href;t.href=URL.createObjectURL(a),o&&URL.revokeObjectURL(o)}var g={},h=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},p=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),_=h(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,y=0,m=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=p()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var n=a(t);return r(n,e),function(t){for(var o=[],i=0;ia.max_dx&&(t=a.max_dx),tt.getWidth()?e.addClass("big").attr("x",t.getX()+t.getWidth()+5):e.removeClass("big").attr("x",t.getX()+t.getWidth()/2)}function L(){var t=I.$bar;I.handle_group.select(".handle.left").attr({x:t.getX()+1}),I.handle_group.select(".handle.right").attr({x:t.getEndX()-9})}function R(){var t=!0,e=!1,n=void 0;try{for(var r,a=I.arrows[Symbol.iterator]();!(t=(r=a.next()).done);t=!0){var o=r.value;o.update()}}catch(i){e=!0,n=i}finally{try{!t&&a["return"]&&a["return"]()}finally{if(e)throw n}}}function z(){var e=t.element_groups.details.select(".details-wrapper"),n=h();e&&e.transform("t"+n.x+","+n.y)}var I={};return I.onstart=m,I.onmove=w,I.onstop=b,I.onmove_handle_left=A,I.onstop_handle_left=x,n(),I}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=n,t.exports=e["default"]},function(t,e){"use strict";function n(t,e,n){function r(){d.from_task=e,d.to_task=n,a(),o()}function a(){d.start_x=e.$bar.getX()+e.$bar.getWidth()/2;for(var r=function(){return n.$bar.getX()e.$bar.getX()+t.config.padding};r();)d.start_x-=10;d.start_y=t.config.header_height+t.config.bar.height+(t.config.padding+t.config.bar.height)*e.task._index+t.config.padding,d.end_x=n.$bar.getX()-t.config.padding/2,d.end_y=t.config.header_height+t.config.bar.height/2+(t.config.padding+t.config.bar.height)*n.task._index+t.config.padding;var a=e.task._index>n.task._index;d.curve=t.config.arrow.curve,d.clockwise=a?1:0,d.curve_y=a?-d.curve:d.curve,d.offset=a?d.end_y+t.config.arrow.curve:d.end_y-t.config.arrow.curve,d.path=Snap.format("M {start_x} {start_y} V {offset} a {curve} {curve} 0 0 {clockwise} {curve} {curve_y} L {end_x} {end_y} m -5 -5 l 5 5 l -5 5",{start_x:d.start_x,start_y:d.start_y,end_x:d.end_x,end_y:d.end_y,offset:d.offset,curve:d.curve,clockwise:d.clockwise,curve_y:d.curve_y}),n.$bar.getX()