kanbanworkflowstimelinescrumrubyroadmapproject-planningproject-managementopenprojectangularissue-trackerifcgantt-chartganttbug-trackerboardsbcf
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
809 lines
28 KiB
809 lines
28 KiB
//-- copyright
|
|
// OpenProject is a project management system.
|
|
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
|
|
//
|
|
// This program is free software; you can redistribute it and/or
|
|
// modify it under the terms of the GNU General Public License version 3.
|
|
//
|
|
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
|
// Copyright (C) 2006-2013 Jean-Philippe Lang
|
|
// Copyright (C) 2010-2013 the ChiliProject Team
|
|
//
|
|
// This program is free software; you can redistribute it and/or
|
|
// modify it under the terms of the GNU General Public License
|
|
// as published by the Free Software Foundation; either version 2
|
|
// of the License, or (at your option) any later version.
|
|
//
|
|
// This program is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU General Public License for more details.
|
|
//
|
|
// You should have received a copy of the GNU General Public License
|
|
// along with this program; if not, write to the Free Software
|
|
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
|
//
|
|
// See doc/COPYRIGHT.rdoc for more details.
|
|
//++
|
|
|
|
// ╭───────────────────────────────────────────────────────────────╮
|
|
// │ _____ _ _ _ │
|
|
// │ |_ _(_)_ __ ___ ___| (_)_ __ ___ ___ │
|
|
// │ | | | | '_ ` _ \ / _ \ | | '_ \ / _ \/ __| │
|
|
// │ | | | | | | | | | __/ | | | | | __/\__ \ │
|
|
// │ |_| |_|_| |_| |_|\___|_|_|_| |_|\___||___/ │
|
|
// ├───────────────────────────────────────────────────────────────┤
|
|
// │ Javascript library that fetches and plots timelines for the │
|
|
// │ OpenProject timelines module. │
|
|
// ╰───────────────────────────────────────────────────────────────╯
|
|
|
|
module.exports = function(PathHelper) {
|
|
|
|
PlanningElement = {
|
|
objectType: 'PlanningElement',
|
|
identifier: 'planning_elements',
|
|
|
|
is: function(t) {
|
|
if (t === undefined) return false;
|
|
return PlanningElement.identifier === t.identifier;
|
|
},
|
|
hide: function () {
|
|
return false;
|
|
},
|
|
filteredOut: function() {
|
|
var filtered = this.filteredOutForProjectFilter();
|
|
this.filteredOut = function() { return filtered; };
|
|
return filtered;
|
|
},
|
|
inTimeFrame: function () {
|
|
return this.timeline.inTimeFilter(this.start(), this.end());
|
|
},
|
|
filteredOutForProjectFilter: function() {
|
|
return this.project.filteredOut();
|
|
},
|
|
all: function(timeline) {
|
|
// collect all planning elements
|
|
var r = timeline.planning_elements;
|
|
var result = [];
|
|
for (var key in r) {
|
|
if (r.hasOwnProperty(key)) {
|
|
result.push(r[key]);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
getProject: function() {
|
|
return (this.project !== undefined) ? this.project : null;
|
|
},
|
|
getPlanningElementType: function() {
|
|
return (this.planning_element_type !== undefined) ?
|
|
this.planning_element_type : null;
|
|
},
|
|
getResponsible: function() {
|
|
return (this.responsible !== undefined) ? this.responsible : null;
|
|
},
|
|
getResponsibleName: function() {
|
|
if (this.responsible && this.responsible.name) {
|
|
return this.responsible.name;
|
|
}
|
|
},
|
|
getAssignedName: function () {
|
|
if (this.assigned_to && this.assigned_to.name) {
|
|
return this.assigned_to.name;
|
|
}
|
|
},
|
|
getParent: function() {
|
|
return (this.parent !== undefined) ? this.parent : null;
|
|
},
|
|
getChildren: function() {
|
|
if (!this.planning_elements) {
|
|
return [];
|
|
}
|
|
if (!this.sorted) {
|
|
this.sort('planning_elements');
|
|
this.sorted = true;
|
|
}
|
|
return this.planning_elements;
|
|
},
|
|
hasChildren: function() {
|
|
return this.getChildren().length > 0;
|
|
},
|
|
getTypeName: function () {
|
|
var pet = this.getPlanningElementType();
|
|
if (pet) {
|
|
return pet.name;
|
|
}
|
|
},
|
|
getStatusName: function () {
|
|
if (this.status) {
|
|
return this.status.name;
|
|
}
|
|
},
|
|
getProjectName: function () {
|
|
if (this.project) {
|
|
return this.project.name;
|
|
}
|
|
},
|
|
sort: function(field) {
|
|
this[field] = this[field].sort(function(a, b) {
|
|
// order by date, name
|
|
var dc = 0;
|
|
var as = a.start(), bs = b.start();
|
|
if (as) {
|
|
if (bs) {
|
|
dc = as.compareTo(bs);
|
|
} else {
|
|
dc = 1;
|
|
}
|
|
} else if (bs) {
|
|
dc = -1;
|
|
}
|
|
if (dc !== 0) {
|
|
return dc;
|
|
}
|
|
if (a.name < b.name) {
|
|
return -1;
|
|
}
|
|
if (a.name > b.name) {
|
|
return +1;
|
|
}
|
|
return 0;
|
|
});
|
|
return this;
|
|
},
|
|
start: function() {
|
|
var pet = this.getPlanningElementType();
|
|
//if we have got a milestone w/o a start date but with an end date, just set them the same.
|
|
if (this.start_date === undefined && this.due_date !== undefined && pet && pet.is_milestone) {
|
|
this.start_date = this.due_date;
|
|
}
|
|
if (this.start_date_object === undefined && this.start_date !== undefined) {
|
|
this.start_date_object = moment(this.start_date).toDate();
|
|
}
|
|
return this.start_date_object;
|
|
},
|
|
end: function() {
|
|
var pet = this.getPlanningElementType();
|
|
//if we have got a milestone w/o a start date but with an end date, just set them the same.
|
|
if (this.due_date === undefined && this.start_date !== undefined && pet && pet.is_milestone) {
|
|
this.due_date = this.start_date;
|
|
}
|
|
if (this.due_date_object=== undefined && this.due_date !== undefined) {
|
|
this.due_date_object = moment(this.due_date).toDate();
|
|
}
|
|
return this.due_date_object;
|
|
},
|
|
getAttribute: function (val) {
|
|
if (typeof this[val] === "function") {
|
|
return this[val]();
|
|
}
|
|
|
|
return this[val];
|
|
},
|
|
does_historical_differ: function (val) {
|
|
if (!this.has_historical()) {
|
|
return false;
|
|
}
|
|
|
|
return this.historical().getAttribute(val) !== this.getAttribute(val);
|
|
},
|
|
has_historical: function () {
|
|
return this.historical_element !== undefined;
|
|
},
|
|
historical: function () {
|
|
return this.historical_element || Object.create(PlanningElement);
|
|
},
|
|
alternate_start: function() {
|
|
return this.historical().start();
|
|
},
|
|
alternate_end: function() {
|
|
return this.historical().end();
|
|
},
|
|
getSubElements: function() {
|
|
return this.getChildren();
|
|
},
|
|
hasAlternateDates: function() {
|
|
return (this.does_historical_differ("start_date") ||
|
|
this.does_historical_differ("due_date") ||
|
|
this.is_deleted);
|
|
},
|
|
isDeleted: function() {
|
|
return true && this.is_deleted;
|
|
},
|
|
isNewlyAdded: function() {
|
|
return (this.timeline.isComparing() &&
|
|
!this.has_historical());
|
|
},
|
|
getAlternateHorizontalBounds: function(scale, absolute_beginning, milestone) {
|
|
return this.getHorizontalBoundsForDates(
|
|
scale,
|
|
absolute_beginning,
|
|
this.alternate_start(),
|
|
this.alternate_end(),
|
|
milestone
|
|
);
|
|
},
|
|
getHorizontalBounds: function(scale, absolute_beginning, milestone) {
|
|
return this.getHorizontalBoundsForDates(
|
|
scale,
|
|
absolute_beginning,
|
|
this.start(),
|
|
this.end(),
|
|
milestone
|
|
);
|
|
},
|
|
hasStartDate: function () {
|
|
if (this.start()) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
hasEndDate: function () {
|
|
if (this.end()) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
hasBothDates: function () {
|
|
if (this.start() && this.end()) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
hasOneDate: function () {
|
|
if (this.start() || this.end()) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
getHorizontalBoundsForDates: function(scale, absolute_beginning, start, end, milestone) {
|
|
var timeline = this.timeline;
|
|
|
|
if (!start && !end) {
|
|
return {
|
|
'x': 0,
|
|
'w': 0,
|
|
'end': function () {
|
|
return this.x + this.w;
|
|
}
|
|
};
|
|
} else if (!end) {
|
|
end = start.clone().addDays(2);
|
|
} else if (!start) {
|
|
start = end.clone().addDays(-2);
|
|
}
|
|
|
|
// calculate graphical representation. the +1 makes sense when
|
|
// considering equal start and end date.
|
|
var x = timeline.getDaysBetween(absolute_beginning, start) * scale.day;
|
|
var w = (timeline.getDaysBetween(start, end) + 1) * scale.day;
|
|
|
|
if (milestone === true) {
|
|
//we are in the middle of the diamond so we have to move half the size to the left
|
|
x -= ((scale.height - 1) / 2);
|
|
//and add the diamonds corners to the width.
|
|
w += scale.height - 1;
|
|
}
|
|
|
|
return {
|
|
'x': x,
|
|
'w': w,
|
|
'end': function () {
|
|
return this.x + this.w;
|
|
}
|
|
};
|
|
},
|
|
getUrl: function() {
|
|
return PathHelper.staticBase + "/work_packages/" + this.id;
|
|
},
|
|
getColor: function () {
|
|
// if there is a color for this planning element type, use it.
|
|
// use it also for planning elements w/ children. if there are
|
|
// children but no planning element type, use the default color
|
|
// for planning element parents. if there is no planning element
|
|
// type and there are no children, use a default color.
|
|
var pet = this.getPlanningElementType();
|
|
var paper = this.timeline.getPaper();
|
|
var color;
|
|
|
|
if (pet && pet.color) {
|
|
color = pet.color.hexcode;
|
|
} else if (this.hasChildren()) {
|
|
color = Timeline.DEFAULT_PARENT_COLOR;
|
|
} else {
|
|
color = Timeline.DEFAULT_COLOR;
|
|
}
|
|
|
|
if (!this.hasBothDates()) {
|
|
if (this.hasStartDate()) {
|
|
var noEndDateGradient = jQuery('#noEndDateGradient_' + pet.id);
|
|
if (noEndDateGradient.length == 0) {
|
|
noEndDateGradient = paper.gradient(
|
|
'noEndDateGradient_' + pet.id,
|
|
[
|
|
{offset: '5%', 'stop-color': color, 'stop-opacity': '1'},
|
|
{offset: '95%', 'stop-color': '#ffffff', 'stop-opacity': '0'}
|
|
]
|
|
);
|
|
}
|
|
|
|
color = 'url(#noEndDateGradient_' + pet.id + ')';
|
|
} else {
|
|
var noStartDateGradient = jQuery('#noStartDateGradient_' + pet.id);
|
|
if (noStartDateGradient.length == 0) {
|
|
noStartDateGradient = paper.gradient(
|
|
'noStartDateGradient_' + pet.id,
|
|
[
|
|
{offset: '5%', 'stop-color': '#ffffff', 'stop-opacity': '0'},
|
|
{offset:'95%', 'stop-color': color, 'stop-opacity': '1'}
|
|
]
|
|
);
|
|
}
|
|
|
|
color = 'url(#noStartDateGradient_' + pet.id + ')';
|
|
}
|
|
}
|
|
|
|
return color;
|
|
},
|
|
render: function(node, in_aggregation, label_space) {
|
|
var timeline = this.timeline;
|
|
var paper = timeline.getPaper();
|
|
var scale = timeline.getScale();
|
|
var beginning = timeline.getBeginning();
|
|
var elements = [];
|
|
var pet = this.getPlanningElementType();
|
|
var self = this;
|
|
var color, text, x, y, textColor;
|
|
var bounds = this.getHorizontalBounds(scale, beginning);
|
|
var left = bounds.x;
|
|
var width = bounds.w;
|
|
var alternate_bounds = this.getAlternateHorizontalBounds(scale, beginning);
|
|
var alternate_left = alternate_bounds.x;
|
|
var alternate_width = alternate_bounds.w;
|
|
var hover_left = left;
|
|
var hover_width = width;
|
|
var element = node.getDOMElement();
|
|
var captionElement;
|
|
var label;
|
|
var deleted = true && this.is_deleted;
|
|
var comparison_offset = deleted ? 0 : Timeline.DEFAULT_COMPARISON_OFFSET;
|
|
var strokeColor = Timeline.DEFAULT_STROKE_COLOR;
|
|
var historical = this.historical();
|
|
|
|
var has_both_dates = this.hasBothDates();
|
|
var has_one_date = this.hasOneDate();
|
|
var has_start_date = this.hasStartDate();
|
|
|
|
if (in_aggregation && label_space !== undefined) {
|
|
hover_left = label_space.x + Timeline.HOVER_THRESHOLD;
|
|
hover_width = label_space.w - 2 * Timeline.HOVER_THRESHOLD;
|
|
}
|
|
|
|
if (in_aggregation && !has_both_dates) {
|
|
return;
|
|
}
|
|
|
|
var has_alternative = this.hasAlternateDates();
|
|
var could_have_been_milestone = (this.alternate_start === this.alternate_end);
|
|
|
|
var height, top;
|
|
|
|
if (historical.hasOneDate()) {
|
|
// ╭─────────────────────────────────────────────────────────╮
|
|
// │ Rendering of historical data. Use default planning │
|
|
// │ element appearance, only use milestones when the │
|
|
// │ element is currently a milestone and the historical │
|
|
// │ data has equal start and end dates. │
|
|
// ╰─────────────────────────────────────────────────────────╯
|
|
color = this.historical().getColor();
|
|
|
|
if (!historical.hasBothDates()) {
|
|
strokeColor = 'none';
|
|
}
|
|
|
|
//TODO: fix for work units w/o start/end date
|
|
if (!in_aggregation && has_alternative) {
|
|
if (pet && pet.is_milestone && could_have_been_milestone) {
|
|
|
|
height = scale.height - 1; //6px makes the element a little smaller.
|
|
top = (timeline.getRelativeVerticalOffset(element) + timeline.getRelativeVerticalBottomOffset(element)) / 2 - height / 2;
|
|
|
|
paper.path(
|
|
timeline.psub('M#{x} #{y}h#{w}l#{d} #{d}l-#{d} #{d}H#{x}l-#{d} -#{d}l#{d} -#{d}Z', {
|
|
x: alternate_left + scale.day / 2,
|
|
y: top - comparison_offset,
|
|
w: alternate_width - scale.day,
|
|
d: height / 2 // diamond corner width.
|
|
})
|
|
).attr({
|
|
'fill': color, // Timeline.DEFAULT_FILL_COLOR_IN_COMPARISONS,
|
|
'opacity': 0.33,
|
|
'stroke': Timeline.DEFAULT_STROKE_COLOR_IN_COMPARISONS,
|
|
'stroke-dasharray': Timeline.DEFAULT_STROKE_DASHARRAY_IN_COMPARISONS
|
|
});
|
|
|
|
} else {
|
|
|
|
height = scale.height - 6; //6px makes the element a little smaller.
|
|
top = (timeline.getRelativeVerticalOffset(element) + timeline.getRelativeVerticalBottomOffset(element)) / 2 - height / 2;
|
|
|
|
paper.rect(
|
|
alternate_left,
|
|
top - comparison_offset, // 8px margin-top
|
|
alternate_width,
|
|
height, // 8px margin-bottom
|
|
4 // round corners
|
|
).attr({
|
|
'fill': color, // Timeline.DEFAULT_FILL_COLOR_IN_COMPARISONS,
|
|
'opacity': 0.33,
|
|
'stroke': Timeline.DEFAULT_STROKE_COLOR_IN_COMPARISONS,
|
|
'stroke-dasharray': Timeline.DEFAULT_STROKE_DASHARRAY_IN_COMPARISONS
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// only render planning elements that have
|
|
// either a start or an end date.
|
|
if (has_one_date) {
|
|
color = this.getColor();
|
|
|
|
if (!has_both_dates) {
|
|
strokeColor = 'none';
|
|
}
|
|
|
|
// ╭─────────────────────────────────────────────────────────╮
|
|
// │ Rendering of actual elements, as milestones, with teeth │
|
|
// │ and the generic, dafault planning element w/ round │
|
|
// │ edges. │
|
|
// ╰─────────────────────────────────────────────────────────╯
|
|
|
|
// in_aggregation defines whether the planning element should be
|
|
// renderd as a generic planning element regardless of children.
|
|
|
|
if (!deleted && pet && pet.is_milestone) {
|
|
|
|
} else if (!deleted && !in_aggregation && this.hasChildren() && node.isExpanded()) {
|
|
|
|
// with teeth (has children).
|
|
|
|
paper.path(
|
|
timeline.psub('M#{x} #{y}m#{d} #{d}l-#{d} #{d}l-#{d} -#{d}V#{y}H#{x}h#{w}h#{d}v#{d}l-#{d} #{d}l-#{d} -#{d}z' + /* outer path */
|
|
'm0 0v-#{d}m#{w} 0m-#{d} 0m-#{d} 0v#{d}' /* inner vertical lines */, {
|
|
x: left,
|
|
y: timeline.getRelativeVerticalOffset(element) + 8,
|
|
d: scale.height + 2 - 16,
|
|
w: width
|
|
})
|
|
).attr({
|
|
'fill': color,
|
|
'stroke': strokeColor
|
|
});
|
|
} else if (!deleted) {
|
|
|
|
// generic.
|
|
|
|
height = scale.height - 6; //6px makes the element a little smaller.
|
|
top = (timeline.getRelativeVerticalOffset(element) + timeline.getRelativeVerticalBottomOffset(element)) / 2 - height / 2;
|
|
|
|
paper.rect(
|
|
left,
|
|
top,
|
|
width,
|
|
height,
|
|
4 // round corners
|
|
).attr({
|
|
'fill': color,
|
|
'stroke': strokeColor
|
|
});
|
|
}
|
|
}
|
|
},
|
|
renderForeground: function (node, in_aggregation, label_space) {
|
|
var timeline = this.timeline;
|
|
var paper = timeline.getPaper();
|
|
var scale = timeline.getScale();
|
|
var beginning = timeline.getBeginning();
|
|
var elements = [];
|
|
var pet = this.getPlanningElementType();
|
|
var self = this;
|
|
var color, text, x, y, textColor;
|
|
var bounds = this.getHorizontalBounds(scale, beginning);
|
|
var left = bounds.x;
|
|
var width = bounds.w;
|
|
var alternate_bounds = this.getAlternateHorizontalBounds(scale, beginning);
|
|
var alternate_left = alternate_bounds.x;
|
|
var alternate_width = alternate_bounds.w;
|
|
var hover_left = left;
|
|
var hover_width = width;
|
|
var element = node.getDOMElement();
|
|
var captionElement;
|
|
var label, textWidth;
|
|
var deleted = true && this.is_deleted;
|
|
var comparison_offset = deleted ? 0 : Timeline.DEFAULT_COMPARISON_OFFSET;
|
|
|
|
var has_both_dates = this.hasBothDates();
|
|
var has_one_date = this.hasOneDate();
|
|
var has_start_date = this.hasStartDate();
|
|
|
|
if (in_aggregation && label_space !== undefined) {
|
|
hover_left = label_space.x + Timeline.HOVER_THRESHOLD;
|
|
hover_width = label_space.w - 2 * Timeline.HOVER_THRESHOLD;
|
|
}
|
|
|
|
var has_alternative = this.hasAlternateDates();
|
|
var could_have_been_milestone = (this.alternate_start === this.alternate_end);
|
|
|
|
var height, top;
|
|
|
|
// if there is a color for this planning element type, use it.
|
|
// use it also for planning elements w/ children. if there are
|
|
// children but no planning element type, use the default color
|
|
// for planning element parents. if there is no planning element
|
|
// type and there are no children, use a default color.
|
|
|
|
if (pet && pet.color) {
|
|
color = pet.color.hexcode;
|
|
} else if (this.hasChildren()) {
|
|
color = Timeline.DEFAULT_PARENT_COLOR;
|
|
} else {
|
|
color = Timeline.DEFAULT_COLOR;
|
|
}
|
|
|
|
if (!deleted && pet && pet.is_milestone) {
|
|
|
|
// milestones.
|
|
height = scale.height - 1; //6px makes the element a little smaller.
|
|
top = (timeline.getRelativeVerticalOffset(element) + timeline.getRelativeVerticalBottomOffset(element)) / 2 - height / 2;
|
|
|
|
paper.path(
|
|
timeline.psub('M#{x} #{y}h#{w}l#{d} #{d}l-#{d} #{d}H#{x}l-#{d} -#{d}l#{d} -#{d}Z', {
|
|
x: left + scale.day / 2,
|
|
y: top,
|
|
w: width - scale.day,
|
|
d: height / 2 // diamond corner width.
|
|
})
|
|
).attr({
|
|
'fill': color,
|
|
'stroke': Timeline.DEFAULT_STROKE_COLOR
|
|
});
|
|
|
|
}
|
|
|
|
// ╭─────────────────────────────────────────────────────────╮
|
|
// │ Labels for rendered elements, either in aggregation │
|
|
// │ or out of aggregation, inside of elements or outside. │
|
|
// ╰─────────────────────────────────────────────────────────╯
|
|
|
|
height = scale.height - 6; //6px makes the element a little smaller.
|
|
top = (timeline.getRelativeVerticalOffset(element) + timeline.getRelativeVerticalBottomOffset(element)) / 2 - height / 2;
|
|
|
|
y = top + 11;
|
|
|
|
if (has_one_date) {
|
|
if (!in_aggregation) {
|
|
|
|
// text rendering in planning elements outside of aggregations
|
|
label = timeline.paper.text(0, -5, this.subject);
|
|
label.attr({
|
|
'font-size': 12
|
|
});
|
|
|
|
textWidth = label.getBBox().width;
|
|
|
|
// if this is an expanded planning element w/ children, or if
|
|
// the text would not fit:
|
|
if (this.hasChildren() && node.isExpanded() ||
|
|
textWidth > width - Timeline.PE_TEXT_INSIDE_PADDING) {
|
|
|
|
// text outside planning element
|
|
x = left + width + Timeline.PE_TEXT_OUTSIDE_PADDING;
|
|
|
|
if (this.hasChildren()) {
|
|
x += Timeline.PE_TEXT_ADDITIONAL_OUTSIDE_PADDING_WHEN_EXPANDED_WITH_CHILDREN;
|
|
}
|
|
|
|
if (pet && pet.is_milestone) {
|
|
x += Timeline.PE_TEXT_ADDITIONAL_OUTSIDE_PADDING_WHEN_MILESTONE;
|
|
}
|
|
|
|
textColor = Timeline.PE_DEFAULT_TEXT_COLOR;
|
|
|
|
// place a white rect below the label.
|
|
captionElement = timeline.paper.rect(
|
|
x-3,
|
|
y-12,
|
|
textWidth + 6,
|
|
15,
|
|
4.5
|
|
).attr({
|
|
'fill': '#ffffff',
|
|
'opacity': 0.5,
|
|
'stroke': 'none'
|
|
});
|
|
|
|
captionElement.insertAfter(label);
|
|
|
|
} else if (!has_both_dates) {
|
|
// text inside planning element
|
|
if (has_start_date) {
|
|
x = left + 4; // left of the WU
|
|
} else {
|
|
x = left + width - // right of the WU
|
|
textWidth - // text width
|
|
4; // small border from the right
|
|
}
|
|
|
|
textColor = timeline.getLuminanceFor(color) > Timeline.PE_LUMINANCE_THRESHOLD ?
|
|
Timeline.PE_DARK_TEXT_COLOR : Timeline.PE_LIGHT_TEXT_COLOR;
|
|
} else {
|
|
|
|
// text inside planning element
|
|
x = left + width * 0.5 + // center of the planning element
|
|
textWidth * (-0.5); // half of text width
|
|
|
|
textColor = timeline.getLuminanceFor(color) > Timeline.PE_LUMINANCE_THRESHOLD ?
|
|
Timeline.PE_DARK_TEXT_COLOR : Timeline.PE_LIGHT_TEXT_COLOR;
|
|
}
|
|
|
|
label.attr({
|
|
'fill': textColor,
|
|
'text-anchor': "start",
|
|
'stroke': 'none'
|
|
});
|
|
|
|
// position label
|
|
label.translate(x,y);
|
|
|
|
} else if (label_space.w > Timeline.PE_TEXT_AGGREGATED_LABEL_WIDTH_THRESHOLD) {
|
|
// Elements in aggregation
|
|
textColor = timeline.getLuminanceFor(color) > Timeline.PE_LUMINANCE_THRESHOLD ?
|
|
Timeline.PE_DARK_TEXT_COLOR : Timeline.PE_LIGHT_TEXT_COLOR;
|
|
|
|
text = this.subject;
|
|
label = timeline.paper.text(0, 0, text);
|
|
label.attr({
|
|
'font-size': 12,
|
|
'text-anchor': 'middle',
|
|
'fill': textColor,
|
|
'stroke': 'none'
|
|
});
|
|
|
|
x = label_space.x + label_space.w/2;
|
|
|
|
// fit text to label space
|
|
while (text.length > 0 && label.getBBox().width + Timeline.PE_TEXT_INSIDE_PADDING / 2 > label_space.w) {
|
|
text = text.slice(0, -1);
|
|
label.textContent = text;
|
|
}
|
|
|
|
label.translate(x, y);
|
|
}
|
|
}
|
|
|
|
// ╭─────────────────────────────────────────────────────────╮
|
|
// │ Defining hover areas that will produce tooltips when │
|
|
// │ mouse is over them. This is last to include text drawn │
|
|
// │ over planning elements. │
|
|
// ╰─────────────────────────────────────────────────────────╯
|
|
|
|
height = scale.height - 6; //6px makes the element a little smaller.
|
|
top = (timeline.getRelativeVerticalOffset(element) + timeline.getRelativeVerticalBottomOffset(element)) / 2 - height / 2;
|
|
|
|
elements.push(paper.rect(
|
|
hover_left - Timeline.HOVER_THRESHOLD,
|
|
top - Timeline.HOVER_THRESHOLD, // 8px margin-top
|
|
hover_width + 2 * Timeline.HOVER_THRESHOLD,
|
|
height + 2 * Timeline.HOVER_THRESHOLD, // 8px margin-bottom
|
|
4 // round corners
|
|
).attr({
|
|
'fill': '#ffffff',
|
|
'opacity': 0
|
|
}));
|
|
|
|
jQuery.each(elements, function(i, e) {
|
|
timeline.addHoverHandler(node, e);
|
|
//self.addElement(e);
|
|
});
|
|
},
|
|
|
|
renderVertical: function(node) {
|
|
var timeline = this.timeline;
|
|
var paper = timeline.getPaper();
|
|
var scale = timeline.getScale();
|
|
var beginning = timeline.getBeginning();
|
|
|
|
var pet = this.getPlanningElementType();
|
|
var self = this;
|
|
var color;
|
|
var bounds = this.getHorizontalBounds(scale, beginning);
|
|
|
|
var deleted = true && this.is_deleted;
|
|
|
|
var left = bounds.x;
|
|
var width = bounds.w;
|
|
|
|
var element = node.getDOMElement();
|
|
|
|
var has_both_dates = this.hasBothDates();
|
|
var has_one_date = this.hasOneDate();
|
|
var has_start_date = this.hasStartDate();
|
|
|
|
var hoverElement;
|
|
|
|
color = this.getColor();
|
|
|
|
if (has_one_date) {
|
|
if (!deleted && pet && pet.is_milestone) {
|
|
timeline.paper.path(
|
|
timeline.psub("M#{left} #{top}L#{left} #{height}", {
|
|
'left': left + scale.day / 2,
|
|
'top': timeline.decoHeight(),
|
|
'height': timeline.getMeasuredHeight()
|
|
})
|
|
).attr({
|
|
'stroke': color,
|
|
'stroke-width': 2,
|
|
'stroke-dasharray': '- '
|
|
});
|
|
|
|
hoverElement = paper.rect(
|
|
left + scale.day / 2 - 2 * Timeline.HOVER_THRESHOLD,
|
|
timeline.decoHeight(), // 8px margin-top
|
|
4 * Timeline.HOVER_THRESHOLD,
|
|
timeline.getMeasuredHeight() // 8px margin-bottom
|
|
).attr({
|
|
'fill': '#ffffff',
|
|
'opacity': 0
|
|
});
|
|
|
|
timeline.addHoverHandler(node, hoverElement);
|
|
} else if (!deleted) {
|
|
paper.rect(
|
|
left,
|
|
timeline.decoHeight(),
|
|
width,
|
|
timeline.getMeasuredHeight()
|
|
).attr({
|
|
'fill': color,
|
|
'stroke': Timeline.DEFAULT_STROKE_COLOR,
|
|
'opacity': 0.2
|
|
});
|
|
|
|
hoverElement = paper.rect(
|
|
left - Timeline.HOVER_THRESHOLD,
|
|
timeline.decoHeight(), // 8px margin-top
|
|
width + 2 * Timeline.HOVER_THRESHOLD,
|
|
timeline.getMeasuredHeight() // 8px margin-bottom
|
|
).attr({
|
|
'fill': '#ffffff',
|
|
'opacity': 0
|
|
});
|
|
|
|
timeline.addHoverHandler(node, hoverElement);
|
|
//self.addElement(hoverElement);
|
|
}
|
|
}
|
|
},
|
|
addElement: function(e) {
|
|
if (!this.elements) {
|
|
this.elements = [];
|
|
}
|
|
this.elements.push(e);
|
|
return this;
|
|
},
|
|
getElements: function() {
|
|
if (!this.elements) {
|
|
this.elements = [];
|
|
}
|
|
return this.elements;
|
|
}
|
|
};
|
|
|
|
return PlanningElement;
|
|
};
|
|
|