OpenProject is the leading open source project management software.
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.
 
 
 
 
 
 
openproject/frontend/app/timelines/models/planning-element.js

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;
};