Skip to content

S
sencha-core
Commit 9c175a00 authored by Frank Bergmann's avatar Frank Bergmann
Browse files
Options

- GanttEditor: 

  - Timeline is there and integrates with main panel
  - Fixed zoom-in/zoom-out
parent 38087271
Show whitespace changes
Inline Side-by-side
Showing with 194 additions and 95 deletions
www/controller/gantt/GanttButtonController.js
View file @ 9c175a00
......@@ -37,11 +37,10 @@ Ext.define('PO.controller.gantt.GanttButtonController', {
'#buttonDelete': { click: { fn: me.ganttTreePanel.onButtonDelete, scope: me.ganttTreePanel }},
'#buttonReduceIndent': { click: { fn: me.ganttTreePanel.onButtonReduceIndent, scope: me.ganttTreePanel }},
'#buttonIncreaseIndent': { click: { fn: me.ganttTreePanel.onButtonIncreaseIndent, scope: me.ganttTreePanel }},
'#buttonDependencies': { click: this.onButton },
'#buttonAddDependency': { click: this.onButton },
'#buttonBreakDependency': { click: this.onButton },
'#buttonZoomIn': { click: { fn: me.ganttDrawComponent.onZoomIn, scope: me.ganttDrawComponent }},
'#buttonZoomOut': { click: { fn: me.ganttDrawComponent.onZoomOut, scope: me.ganttDrawComponent }},
'#buttonZoomIn': { click: this.onZoomIn },
'#buttonZoomOut': { click: this.onZoomOut },
'#buttonSettings': { click: this.onButton },
scope: me.ganttTreePanel
});
......@@ -64,11 +63,23 @@ Ext.define('PO.controller.gantt.GanttButtonController', {
},
onButtonLoad: function() {
console.log('ButtonLoad');
console.log('GanttButtonController.ButtonLoad');
},
onButtonSave: function() {
console.log('ButtonSave');
console.log('GanttButtonController.ButtonSave');
},
onZoomIn: function() {
console.log('GanttButtonController.onZoomIn');
this.ganttDrawComponent.onZoomIn();
this.ganttTimeline.onZoomIn();
},
onZoomOut: function() {
console.log('GanttButtonController.onZoomOut');
this.ganttDrawComponent.onZoomOut();
this.ganttTimeline.onZoomOut();
},
/**
......@@ -77,7 +88,8 @@ Ext.define('PO.controller.gantt.GanttButtonController', {
*/
onTimelineMove: function(dist) {
// console.log('GanttButtonController.onTimelineMove: dist='+dist);
this.ganttDrawComponent.translate(dist * 3); // Move the DrawComponent multiplied
var axisFactor = this.ganttTimeline.axisFactor;
this.ganttDrawComponent.translate(dist * axisFactor); // Move the DrawComponent multiplied
// ToDo: There are still some break when switching between the surfaces
// this.ganttDrawComponent.dndBase[0] = -dist;
......@@ -89,7 +101,8 @@ Ext.define('PO.controller.gantt.GanttButtonController', {
*/
onDrawComponentMove: function(dist) {
console.log('GanttButtonController.onDrawComponentMove: dist='+dist);
this.ganttTimeline.translate(dist / 3.0); // Move the Timeline by a fraction
var axisFactor = this.ganttTimeline.axisFactor;
this.ganttTimeline.translate(dist / axisFactor); // Move the Timeline by a fraction
// ToDo: There are still some break when switching between the surfaces
// this.ganttTimeline.dndBase[0] = -dist;
......
www/view/gantt/GanttButtonPanel.js
View file @ 9c175a00
......@@ -53,10 +53,6 @@ Ext.define('PO.view.gantt.GanttButtonPanel', {
id: 'buttonIncreaseIndent'
}, {
xtype: 'tbseparator'
}, {
icon: '/intranet/images/navbar_default/link.png',
tooltip: 'Dependencies',
id: 'buttonDependencies'
}, {
icon: '/intranet/images/navbar_default/link_add.png',
tooltip: 'Add dependency',
......
www/view/gantt/GanttDrawComponent.js
View file @ 9c175a00
......@@ -37,11 +37,15 @@ Ext.define('PO.view.gantt.GanttDrawComponent', {
axisEndTime: 0,
axisEndX: 290, // End of the date axis
axisHeight: 20, // Height of each of the two axis levels
axisScale: 'month', // Default scale for the time axis
arrowheadSize: 4, // head size for dependency arrows
monthNames: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
// different scales for the time axis
axisScales: ["year", "quarter", "month", "week"],
dndBase: null,
dndBaseObject: null,
dndStartRawCoordinates: null, // Raw mouse coordinates when starting to drag
......@@ -330,6 +334,16 @@ Ext.define('PO.view.gantt.GanttDrawComponent', {
*/
onZoomIn: function() {
console.log('GanttDrawComponent.onZoomIn');
var index = this.axisScales.indexOf(this.axisScale);
var newScale;
if (index < (this.axisScales.length - 1)) {
newScale = this.axisScales[index+1];
} else {
newScale = this.axisScales[index];
}
this.axisScale = newScale;
this.redraw();
},
......@@ -338,6 +352,17 @@ Ext.define('PO.view.gantt.GanttDrawComponent', {
*/
onZoomOut: function() {
console.log('GanttDrawComponent.onZoomOut');
var index = this.axisScales.indexOf(this.axisScale);
var newScale;
if (index > 0) {
newScale = this.axisScales[index-1];
} else {
newScale = this.axisScales[index];
}
this.axisScale = newScale;
this.redraw();
},
......@@ -523,38 +548,19 @@ Ext.define('PO.view.gantt.GanttDrawComponent', {
var count = 0;
var y = 0;
// Yearly Axis
var yearTime = 365.0 * 24 * 3600 * 1000;
var axisUnits = (me.axisEndTime - me.axisStartTime) / yearTime;
if (axisUnits > 3 && axisUnits < 50) {
me.drawAxisYear(y);
y = y + me.axisHeight;
switch (me.axisScale) {
case 'year': me.drawAxisYear(y);
break;
case 'quarter': me.drawAxisQuarter(y);
break;
case 'month': me.drawAxisMonth(y);
break;
case 'week': me.drawAxisWeek(y);
break;
case 'day': me.drawAxisDay(y);
break;
default: console.log('GanttDrawComponent.drawAxis: unknown axisScale="'+axisScale+'"');
}
// Quarterly Axis
var quarterTime = 90.0 * 24 * 3600 * 1000;
var axisUnits = (me.axisEndTime - me.axisStartTime) / quarterTime;
if (axisUnits > 3 && axisUnits < 50) {
me.drawAxisQuarter(y);
y = y + me.axisHeight;
}
// Monthly Axis
var monthTime = 30.0 * 24 * 3600 * 1000;
var axisUnits = (me.axisEndTime - me.axisStartTime) / monthTime;
if (axisUnits > 3 && axisUnits < 50) {
me.drawAxisMonth(y);
y = y + me.axisHeight;
}
// Weekly Axis
var weekTime = 7.0 * 24 * 3600 * 1000;
var axisUnits = (me.axisEndTime - me.axisStartTime) / weekTime;
if (axisUnits > 3 && axisUnits < 50) {
me.drawAxisWeek(y);
y = y + me.axisHeight;
}
},
/**
......@@ -674,22 +680,29 @@ Ext.define('PO.view.gantt.GanttDrawComponent', {
var me = this;
var count = 0;
// Advance to first day of the next month
var axisStartMonth = me.nextMonth(new Date(me.axisStartTime));
var x = me.date2x(axisStartMonth);
// Advance to first day of the next week
var axisStartWeek = me.nextWeek(new Date(me.axisStartTime));
var x = me.date2x(axisStartWeek);
while (x < me.axisEndX && count < 200) {
var line = me.surface.add({
type: 'path',
stroke: '#444',
'shape-rendering': 'crispy-edges',
'stroke-width': 0.5,
path: 'M '+x+' '+y+' v '+ me.axisHeight,
}).show(true);
axisStartMonth = me.nextMonth(axisStartMonth);
x = me.date2x(axisStartMonth);
var week = Ext.Date.getWeekOfYear(axisStartWeek);
var textSprite = me.surface.add({
type: 'text',
text: ''+week,
x: x+2,
y: y + 6,
font: '12px tahoma'
}).show(true);
axisStartWeek = me.nextWeek(axisStartWeek);
x = me.date2x(axisStartWeek);
count++;
}
},
......@@ -698,7 +711,7 @@ Ext.define('PO.view.gantt.GanttDrawComponent', {
/**
* Draw a single bar for a project or task
*/
drawBar: function(project, viewNode) {
drawBar: function(project, viewNode, overrideParams) {
var me = this;
if (me.debug) { console.log('PO.class.GanttDrawComponent.drawBar: Starting'); }
var ganttTreeStore = me.ganttTreePanel.store;
......@@ -827,6 +840,78 @@ Ext.define('PO.view.gantt.GanttDrawComponent', {
return result;
},
/**
* Advance a date to the 1st of the next week
*/
nextWeek: function(date) {
var result;
var oneDayTime = 24.0 * 3600 * 1000; // milliseconds in one day
var today = date;
var week = Ext.Date.getWeekOfYear(date);
// Check if this is the first day of the week
var tomorrow = new Date(today.getTime() + oneDayTime);
var weekTomorrow = Ext.Date.getWeekOfYear(tomorrow);
if (week == weekTomorrow) {
// Same week. So we are not on the last day of the week
// Determine the last day of the week.
// This is the day who's tomorrow is in a different week.
while (week == weekTomorrow) {
today = tomorrow;
tomorrow = new Date(today.getTime() + oneDayTime);
result = tomorrow;
weekTomorrow = Ext.Date.getWeekOfYear(tomorrow);
}
} else {
// We are already on the last day of the week.
// So we need to go forward an entire week
result = new Date(date.getTime() + 7.0 * oneDayTime);
}
return result;
},
/**
* Advance a date to the 1st of the prev week
*/
prevWeek: function(date) {
var result;
var oneDayTime = 24.0 * 3600 * 1000; // milliseconds in one day
var today = date;
var week = Ext.Date.getWeekOfYear(date);
// Check if this is the first day of the week
var yesterday = new Date(today.getTime() - oneDayTime);
var weekYesterday = Ext.Date.getWeekOfYear(yesterday);
if (week == weekYesterday) {
// Same week. So we are not on the first day of the week
// Determine the first day of the week.
// This is the day who's yesterday is in a different week.
while (week == weekYesterday) {
today = yesterday;
yesterday = new Date(today.getTime() - oneDayTime);
result = today;
weekYesterday = Ext.Date.getWeekOfYear(yesterday);
}
} else {
// We are already on the first day of the week.
// So we need to go back an entire week
result = new Date(date.getTime() - 7.0 * oneDayTime);
}
return result;
},
/**
* Advance a date to the 1st of the next quarter
*/
......@@ -848,9 +933,5 @@ Ext.define('PO.view.gantt.GanttDrawComponent', {
result = new Date(date.getFullYear() + 1, 0, 1);
return result;
}
});
www/view/gantt/GanttTimeline.js
View file @ 9c175a00
......@@ -70,14 +70,21 @@ Ext.define('PO.view.gantt.GanttTimeline', {
// Draw the top axis
me.drawAxis();
var panelY = me.ganttTreePanel.getY();
// Iterate through all children of the root node and check if they are visible
var maxDepth = 2;
var y = 0;
rootNode.cascadeBy(function(model) {
if (model.getDepth() > maxDepth) { return; }
if (!model.isVisible()) { return; }
var viewNode = ganttTreeView.getNode(model);
if (viewNode == null) { return; } // hidden nodes/models don't have a viewNode, so we don't need to draw a bar.
// hidden nodes/models don't have a viewNode, so we don't need to draw a bar.
if (viewNode == null) { return; }
if (!model.isVisible()) { return; }
me.drawBar(model, viewNode);
me.drawBar(model, viewNode, {'y': y});
y = y + me.barHeight + 2;
});
console.log('PO.class.GanttTimeline.redraw: Finished');
......@@ -101,8 +108,9 @@ Ext.define('PO.view.gantt.GanttTimeline', {
/**
* Draw a single bar for a project or task
*/
drawBar: function(project, viewNode) {
drawBar: function(project, viewNode, overrideParams) {
var me = this;
var params = overrideParams || {};
if (me.debug) { console.log('PO.class.GanttTimeline.drawBar: Starting'); }
var ganttTreeStore = me.ganttTreePanel.store;
var ganttTreeView = me.ganttTreePanel.getView();
......@@ -124,12 +132,13 @@ Ext.define('PO.view.gantt.GanttTimeline', {
var projectY = ganttTreeView.getNode(project).getBoundingClientRect().top;
var x = me.date2x(startTime);
var y = projectY - panelY;
var y = (projectY - panelY) / 6.0; // smaller bars in preview
var w = Math.floor( me.ganttWidth * (endTime - startTime) / (me.axisEndTime - me.axisStartTime));
var h = me.barHeight; // Height of the bars
var d = Math.floor(h / 2.0) + 1; // Size of the indent of the super-project bar
y = y / 6.0; // smaller bars in preview
var overrideY = params.y;
if (overrideY != undefined) { y = params.y; }
var spriteBar = surface.add({
type: 'rect',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment