|
@ -4,7 +4,7 @@ |
|
|
* |
|
|
* |
|
|
* A dynamic, browser-based visualization library. |
|
|
* A dynamic, browser-based visualization library. |
|
|
* |
|
|
* |
|
|
* @version 0.0.6 |
|
|
|
|
|
|
|
|
* @version 0.0.7 |
|
|
* @date 2013-04-25 |
|
|
* @date 2013-04-25 |
|
|
* |
|
|
* |
|
|
* @license |
|
|
* @license |
|
@ -56,7 +56,7 @@ var vis = { |
|
|
|
|
|
|
|
|
module.exports = exports = vis; |
|
|
module.exports = exports = vis; |
|
|
|
|
|
|
|
|
},{"./controller":2,"./range":3,"./dataset":4,"./events":5,"./stack":6,"./util":7,"./timestep":8,"./component/component":9,"./component/panel":10,"./component/rootpanel":11,"./component/itemset":12,"./component/timeaxis":13,"./visualization/timeline":14}],5:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"./dataset":2,"./events":3,"./controller":4,"./range":5,"./stack":6,"./timestep":7,"./util":8,"./component/component":9,"./component/rootpanel":10,"./component/panel":11,"./component/itemset":12,"./component/timeaxis":13,"./visualization/timeline":14}],3:[function(require,module,exports){ |
|
|
/** |
|
|
/** |
|
|
* Event listener (singleton) |
|
|
* Event listener (singleton) |
|
|
*/ |
|
|
*/ |
|
@ -176,7 +176,7 @@ var events = { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = events; |
|
|
module.exports = exports = events; |
|
|
|
|
|
|
|
|
},{}],7:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{}],8:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
// create namespace
|
|
|
// create namespace
|
|
|
var util = {}; |
|
|
var util = {}; |
|
@ -962,7 +962,7 @@ if(!Array.isArray) { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = util; |
|
|
module.exports = exports = util; |
|
|
|
|
|
|
|
|
},{}],2:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{}],4:[function(require,module,exports){ |
|
|
var util = require('./util'), |
|
|
var util = require('./util'), |
|
|
Component = require('./component/component'); |
|
|
Component = require('./component/component'); |
|
|
|
|
|
|
|
@ -1110,7 +1110,7 @@ Controller.prototype.reflow = function () { |
|
|
module.exports = exports = Controller; |
|
|
module.exports = exports = Controller; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},{"./util":7,"./component/component":9}],4:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"./util":8,"./component/component":9}],2:[function(require,module,exports){ |
|
|
var util = require('./util'); |
|
|
var util = require('./util'); |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
@ -1664,7 +1664,7 @@ DataSet.prototype._appendRow = function (dataTable, columns, item) { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = DataSet; |
|
|
module.exports = exports = DataSet; |
|
|
|
|
|
|
|
|
},{"./util":7}],3:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"./util":8}],5:[function(require,module,exports){ |
|
|
var util = require('./util'), |
|
|
var util = require('./util'), |
|
|
events = require('./events'); |
|
|
events = require('./events'); |
|
|
|
|
|
|
|
@ -2196,7 +2196,7 @@ Range.prototype.move = function(moveFactor) { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = Range; |
|
|
module.exports = exports = Range; |
|
|
|
|
|
|
|
|
},{"./util":7,"./events":5}],6:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"./util":8,"./events":3}],6:[function(require,module,exports){ |
|
|
var util = require('./util'); |
|
|
var util = require('./util'); |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
@ -2360,7 +2360,7 @@ Stack.prototype.collision = function(a, b, margin) { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = Stack; |
|
|
module.exports = exports = Stack; |
|
|
|
|
|
|
|
|
},{"./util":7}],9:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"./util":8}],9:[function(require,module,exports){ |
|
|
var util = require('./../util'); |
|
|
var util = require('./../util'); |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
@ -2483,7 +2483,7 @@ Component.prototype.on = function (event, callback) { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = Component; |
|
|
module.exports = exports = Component; |
|
|
|
|
|
|
|
|
},{"./../util":7}],10:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"./../util":8}],11:[function(require,module,exports){ |
|
|
var util = require('../util'), |
|
|
var util = require('../util'), |
|
|
Component = require('./component'); |
|
|
Component = require('./component'); |
|
|
|
|
|
|
|
@ -2592,7 +2592,7 @@ Panel.prototype.reflow = function () { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = Panel; |
|
|
module.exports = exports = Panel; |
|
|
|
|
|
|
|
|
},{"../util":7,"./component":9}],11:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"../util":8,"./component":9}],10:[function(require,module,exports){ |
|
|
var util = require('../util'), |
|
|
var util = require('../util'), |
|
|
Panel = require('./panel'); |
|
|
Panel = require('./panel'); |
|
|
|
|
|
|
|
@ -2800,7 +2800,7 @@ RootPanel.prototype._updateEventEmitters = function () { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = RootPanel; |
|
|
module.exports = exports = RootPanel; |
|
|
|
|
|
|
|
|
},{"../util":7,"./panel":10}],12:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"../util":8,"./panel":11}],12:[function(require,module,exports){ |
|
|
var util = require('../util'), |
|
|
var util = require('../util'), |
|
|
DataSet = require('../dataset'), |
|
|
DataSet = require('../dataset'), |
|
|
Panel = require('./panel'), |
|
|
Panel = require('./panel'), |
|
@ -3319,7 +3319,7 @@ ItemSet.prototype.toScreen = function(time) { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = ItemSet; |
|
|
module.exports = exports = ItemSet; |
|
|
|
|
|
|
|
|
},{"../dataset":4,"../util":7,"./panel":10,"../stack":6,"./item/itembox":15,"./item/itemrange":16,"./item/itempoint":17}],13:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"../util":8,"../dataset":2,"./panel":11,"../stack":6,"./item/itembox":15,"./item/itemrange":16,"./item/itempoint":17}],13:[function(require,module,exports){ |
|
|
var util = require('../util'), |
|
|
var util = require('../util'), |
|
|
TimeStep = require('../timestep'), |
|
|
TimeStep = require('../timestep'), |
|
|
Component = require('./component'); |
|
|
Component = require('./component'); |
|
@ -3852,7 +3852,7 @@ TimeAxis.prototype._updateConversion = function() { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = TimeAxis; |
|
|
module.exports = exports = TimeAxis; |
|
|
|
|
|
|
|
|
},{"../util":7,"../timestep":8,"./component":9}],8:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"../util":8,"../timestep":7,"./component":9}],7:[function(require,module,exports){ |
|
|
var util = require('./util'), |
|
|
var util = require('./util'), |
|
|
moment = require('moment'); |
|
|
moment = require('moment'); |
|
|
|
|
|
|
|
@ -4310,37 +4310,45 @@ TimeStep.prototype.getLabelMajor = function(date) { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = TimeStep; |
|
|
module.exports = exports = TimeStep; |
|
|
|
|
|
|
|
|
},{"./util":7,"moment":18}],16:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"./util":8,"moment":18}],15:[function(require,module,exports){ |
|
|
var util = require('../../util'), |
|
|
var util = require('../../util'), |
|
|
Item = require('./item'); |
|
|
Item = require('./item'); |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* @constructor ItemRange |
|
|
|
|
|
|
|
|
* @constructor ItemBox |
|
|
* @extends Item |
|
|
* @extends Item |
|
|
* @param {ItemSet} parent |
|
|
* @param {ItemSet} parent |
|
|
* @param {Object} data Object containing parameters start, end |
|
|
|
|
|
|
|
|
* @param {Object} data Object containing parameters start |
|
|
* content, className. |
|
|
* content, className. |
|
|
* @param {Object} [options] Options to set initial property values |
|
|
* @param {Object} [options] Options to set initial property values |
|
|
* // TODO: describe available options
|
|
|
* // TODO: describe available options
|
|
|
*/ |
|
|
*/ |
|
|
function ItemRange (parent, data, options) { |
|
|
|
|
|
|
|
|
function ItemBox (parent, data, options) { |
|
|
this.props = { |
|
|
this.props = { |
|
|
content: { |
|
|
|
|
|
|
|
|
dot: { |
|
|
left: 0, |
|
|
left: 0, |
|
|
width: 0 |
|
|
|
|
|
|
|
|
top: 0, |
|
|
|
|
|
width: 0, |
|
|
|
|
|
height: 0 |
|
|
|
|
|
}, |
|
|
|
|
|
line: { |
|
|
|
|
|
top: 0, |
|
|
|
|
|
left: 0, |
|
|
|
|
|
width: 0, |
|
|
|
|
|
height: 0 |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
Item.call(this, parent, data, options); |
|
|
Item.call(this, parent, data, options); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
ItemRange.prototype = new Item (null, null); |
|
|
|
|
|
|
|
|
ItemBox.prototype = new Item (null, null); |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Select the item |
|
|
* Select the item |
|
|
* @override |
|
|
* @override |
|
|
*/ |
|
|
*/ |
|
|
ItemRange.prototype.select = function () { |
|
|
|
|
|
|
|
|
ItemBox.prototype.select = function () { |
|
|
this.selected = true; |
|
|
this.selected = true; |
|
|
// TODO: select and unselect
|
|
|
// TODO: select and unselect
|
|
|
}; |
|
|
}; |
|
@ -4349,7 +4357,7 @@ ItemRange.prototype.select = function () { |
|
|
* Unselect the item |
|
|
* Unselect the item |
|
|
* @override |
|
|
* @override |
|
|
*/ |
|
|
*/ |
|
|
ItemRange.prototype.unselect = function () { |
|
|
|
|
|
|
|
|
ItemBox.prototype.unselect = function () { |
|
|
this.selected = false; |
|
|
this.selected = false; |
|
|
// TODO: select and unselect
|
|
|
// TODO: select and unselect
|
|
|
}; |
|
|
}; |
|
@ -4358,7 +4366,7 @@ ItemRange.prototype.unselect = function () { |
|
|
* Repaint the item |
|
|
* Repaint the item |
|
|
* @return {Boolean} changed |
|
|
* @return {Boolean} changed |
|
|
*/ |
|
|
*/ |
|
|
ItemRange.prototype.repaint = function () { |
|
|
|
|
|
|
|
|
ItemBox.prototype.repaint = function () { |
|
|
// TODO: make an efficient repaint
|
|
|
// TODO: make an efficient repaint
|
|
|
var changed = false; |
|
|
var changed = false; |
|
|
var dom = this.dom; |
|
|
var dom = this.dom; |
|
@ -4371,7 +4379,7 @@ ItemRange.prototype.repaint = function () { |
|
|
dom = this.dom; |
|
|
dom = this.dom; |
|
|
|
|
|
|
|
|
if (dom) { |
|
|
if (dom) { |
|
|
if (!this.options && !this.options.parent) { |
|
|
|
|
|
|
|
|
if (!this.options && !this.parent) { |
|
|
throw new Error('Cannot repaint item: no parent attached'); |
|
|
throw new Error('Cannot repaint item: no parent attached'); |
|
|
} |
|
|
} |
|
|
var foreground = this.parent.getForeground(); |
|
|
var foreground = this.parent.getForeground(); |
|
@ -4379,13 +4387,26 @@ ItemRange.prototype.repaint = function () { |
|
|
throw new Error('Cannot repaint time axis: ' + |
|
|
throw new Error('Cannot repaint time axis: ' + |
|
|
'parent has no foreground container element'); |
|
|
'parent has no foreground container element'); |
|
|
} |
|
|
} |
|
|
|
|
|
var background = this.parent.getBackground(); |
|
|
|
|
|
if (!background) { |
|
|
|
|
|
throw new Error('Cannot repaint time axis: ' + |
|
|
|
|
|
'parent has no background container element'); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (!dom.box.parentNode) { |
|
|
if (!dom.box.parentNode) { |
|
|
foreground.appendChild(dom.box); |
|
|
foreground.appendChild(dom.box); |
|
|
changed = true; |
|
|
changed = true; |
|
|
} |
|
|
} |
|
|
|
|
|
if (!dom.line.parentNode) { |
|
|
|
|
|
background.appendChild(dom.line); |
|
|
|
|
|
changed = true; |
|
|
|
|
|
} |
|
|
|
|
|
if (!dom.dot.parentNode) { |
|
|
|
|
|
this.parent.dom.axis.appendChild(dom.dot); |
|
|
|
|
|
changed = true; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// update content
|
|
|
|
|
|
|
|
|
// update contents
|
|
|
if (this.data.content != this.content) { |
|
|
if (this.data.content != this.content) { |
|
|
this.content = this.data.content; |
|
|
this.content = this.data.content; |
|
|
if (this.content instanceof Element) { |
|
|
if (this.content instanceof Element) { |
|
@ -4402,10 +4423,13 @@ ItemRange.prototype.repaint = function () { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// update class
|
|
|
// update class
|
|
|
var className = this.data.className ? ('' + this.data.className) : ''; |
|
|
|
|
|
|
|
|
var className = (this.data.className? ' ' + this.data.className : '') + |
|
|
|
|
|
(this.selected ? ' selected' : ''); |
|
|
if (this.className != className) { |
|
|
if (this.className != className) { |
|
|
this.className = className; |
|
|
this.className = className; |
|
|
dom.box.className = 'item range' + className; |
|
|
|
|
|
|
|
|
dom.box.className = 'item box' + className; |
|
|
|
|
|
dom.line.className = 'item line' + className; |
|
|
|
|
|
dom.dot.className = 'item dot' + className; |
|
|
changed = true; |
|
|
changed = true; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@ -4417,6 +4441,14 @@ ItemRange.prototype.repaint = function () { |
|
|
dom.box.parentNode.removeChild(dom.box); |
|
|
dom.box.parentNode.removeChild(dom.box); |
|
|
changed = true; |
|
|
changed = true; |
|
|
} |
|
|
} |
|
|
|
|
|
if (dom.line.parentNode) { |
|
|
|
|
|
dom.line.parentNode.removeChild(dom.line); |
|
|
|
|
|
changed = true; |
|
|
|
|
|
} |
|
|
|
|
|
if (dom.dot.parentNode) { |
|
|
|
|
|
dom.dot.parentNode.removeChild(dom.dot); |
|
|
|
|
|
changed = true; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -4424,69 +4456,65 @@ ItemRange.prototype.repaint = function () { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Reflow the item: calculate its actual size from the DOM |
|
|
|
|
|
|
|
|
* Reflow the item: calculate its actual size and position from the DOM |
|
|
* @return {boolean} resized returns true if the axis is resized |
|
|
* @return {boolean} resized returns true if the axis is resized |
|
|
* @override |
|
|
* @override |
|
|
*/ |
|
|
*/ |
|
|
ItemRange.prototype.reflow = function () { |
|
|
|
|
|
|
|
|
ItemBox.prototype.reflow = function () { |
|
|
if (this.data.start == undefined) { |
|
|
if (this.data.start == undefined) { |
|
|
throw new Error('Property "start" missing in item ' + this.data.id); |
|
|
throw new Error('Property "start" missing in item ' + this.data.id); |
|
|
} |
|
|
} |
|
|
if (this.data.end == undefined) { |
|
|
|
|
|
throw new Error('Property "end" missing in item ' + this.data.id); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var dom = this.dom, |
|
|
|
|
|
|
|
|
var update = util.updateProperty, |
|
|
|
|
|
dom = this.dom, |
|
|
props = this.props, |
|
|
props = this.props, |
|
|
options = this.options, |
|
|
options = this.options, |
|
|
parent = this.parent, |
|
|
|
|
|
start = parent.toScreen(this.data.start), |
|
|
|
|
|
end = parent.toScreen(this.data.end), |
|
|
|
|
|
changed = 0; |
|
|
|
|
|
|
|
|
start = this.parent.toScreen(this.data.start), |
|
|
|
|
|
align = options && options.align, |
|
|
|
|
|
orientation = options.orientation, |
|
|
|
|
|
changed = 0, |
|
|
|
|
|
top, |
|
|
|
|
|
left; |
|
|
|
|
|
|
|
|
if (dom) { |
|
|
if (dom) { |
|
|
var update = util.updateProperty, |
|
|
|
|
|
box = dom.box, |
|
|
|
|
|
parentWidth = parent.width, |
|
|
|
|
|
orientation = options.orientation, |
|
|
|
|
|
contentLeft, |
|
|
|
|
|
top; |
|
|
|
|
|
|
|
|
|
|
|
changed += update(props.content, 'width', dom.content.offsetWidth); |
|
|
|
|
|
|
|
|
|
|
|
changed += update(this, 'height', box.offsetHeight); |
|
|
|
|
|
|
|
|
|
|
|
// limit the width of the this, as browsers cannot draw very wide divs
|
|
|
|
|
|
if (start < -parentWidth) { |
|
|
|
|
|
start = -parentWidth; |
|
|
|
|
|
} |
|
|
|
|
|
if (end > 2 * parentWidth) { |
|
|
|
|
|
end = 2 * parentWidth; |
|
|
|
|
|
|
|
|
changed += update(props.dot, 'height', dom.dot.offsetHeight); |
|
|
|
|
|
changed += update(props.dot, 'width', dom.dot.offsetWidth); |
|
|
|
|
|
changed += update(props.line, 'width', dom.line.offsetWidth); |
|
|
|
|
|
changed += update(props.line, 'width', dom.line.offsetWidth); |
|
|
|
|
|
changed += update(this, 'width', dom.box.offsetWidth); |
|
|
|
|
|
changed += update(this, 'height', dom.box.offsetHeight); |
|
|
|
|
|
if (align == 'right') { |
|
|
|
|
|
left = start - this.width; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// when range exceeds left of the window, position the contents at the left of the visible area
|
|
|
|
|
|
if (start < 0) { |
|
|
|
|
|
contentLeft = Math.min(-start, |
|
|
|
|
|
(end - start - props.content.width - 2 * options.padding)); |
|
|
|
|
|
// TODO: remove the need for options.padding. it's terrible.
|
|
|
|
|
|
|
|
|
else if (align == 'left') { |
|
|
|
|
|
left = start; |
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
contentLeft = 0; |
|
|
|
|
|
|
|
|
// default or 'center'
|
|
|
|
|
|
left = start - this.width / 2; |
|
|
} |
|
|
} |
|
|
changed += update(props.content, 'left', contentLeft); |
|
|
|
|
|
|
|
|
changed += update(this, 'left', left); |
|
|
|
|
|
|
|
|
|
|
|
changed += update(props.line, 'left', start - props.line.width / 2); |
|
|
|
|
|
changed += update(props.dot, 'left', start - props.dot.width / 2); |
|
|
if (orientation == 'top') { |
|
|
if (orientation == 'top') { |
|
|
top = options.margin.axis; |
|
|
top = options.margin.axis; |
|
|
|
|
|
|
|
|
changed += update(this, 'top', top); |
|
|
changed += update(this, 'top', top); |
|
|
|
|
|
changed += update(props.line, 'top', 0); |
|
|
|
|
|
changed += update(props.line, 'height', top); |
|
|
|
|
|
changed += update(props.dot, 'top', -props.dot.height / 2); |
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
// default or 'bottom'
|
|
|
// default or 'bottom'
|
|
|
top = parent.height - this.height - options.margin.axis; |
|
|
|
|
|
|
|
|
var parentHeight = this.parent.height; |
|
|
|
|
|
top = parentHeight - this.height - options.margin.axis; |
|
|
|
|
|
|
|
|
changed += update(this, 'top', top); |
|
|
changed += update(this, 'top', top); |
|
|
|
|
|
changed += update(props.line, 'top', top + this.height); |
|
|
|
|
|
changed += update(props.line, 'height', Math.max(options.margin.axis, 0)); |
|
|
|
|
|
changed += update(props.dot, 'top', parentHeight - props.dot.height / 2); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
changed += update(this, 'left', start); |
|
|
|
|
|
changed += update(this, 'width', Math.max(end - start, 1)); // TODO: reckon with border width;
|
|
|
|
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
changed += 1; |
|
|
changed += 1; |
|
@ -4499,18 +4527,27 @@ ItemRange.prototype.reflow = function () { |
|
|
* Create an items DOM |
|
|
* Create an items DOM |
|
|
* @private |
|
|
* @private |
|
|
*/ |
|
|
*/ |
|
|
ItemRange.prototype._create = function () { |
|
|
|
|
|
|
|
|
ItemBox.prototype._create = function () { |
|
|
var dom = this.dom; |
|
|
var dom = this.dom; |
|
|
if (!dom) { |
|
|
if (!dom) { |
|
|
this.dom = dom = {}; |
|
|
this.dom = dom = {}; |
|
|
// background box
|
|
|
|
|
|
dom.box = document.createElement('div'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// create the box
|
|
|
|
|
|
dom.box = document.createElement('DIV'); |
|
|
// className is updated in repaint()
|
|
|
// className is updated in repaint()
|
|
|
|
|
|
|
|
|
// contents box
|
|
|
|
|
|
dom.content = document.createElement('div'); |
|
|
|
|
|
|
|
|
// contents box (inside the background box). used for making margins
|
|
|
|
|
|
dom.content = document.createElement('DIV'); |
|
|
dom.content.className = 'content'; |
|
|
dom.content.className = 'content'; |
|
|
dom.box.appendChild(dom.content); |
|
|
dom.box.appendChild(dom.content); |
|
|
|
|
|
|
|
|
|
|
|
// line to axis
|
|
|
|
|
|
dom.line = document.createElement('DIV'); |
|
|
|
|
|
dom.line.className = 'line'; |
|
|
|
|
|
|
|
|
|
|
|
// dot on axis
|
|
|
|
|
|
dom.dot = document.createElement('DIV'); |
|
|
|
|
|
dom.dot.className = 'dot'; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
@ -4519,61 +4556,71 @@ ItemRange.prototype._create = function () { |
|
|
* range and size of the items itemset |
|
|
* range and size of the items itemset |
|
|
* @override |
|
|
* @override |
|
|
*/ |
|
|
*/ |
|
|
ItemRange.prototype.reposition = function () { |
|
|
|
|
|
|
|
|
ItemBox.prototype.reposition = function () { |
|
|
var dom = this.dom, |
|
|
var dom = this.dom, |
|
|
props = this.props; |
|
|
|
|
|
|
|
|
props = this.props, |
|
|
|
|
|
orientation = this.options.orientation; |
|
|
|
|
|
|
|
|
if (dom) { |
|
|
if (dom) { |
|
|
dom.box.style.top = this.top + 'px'; |
|
|
|
|
|
dom.box.style.left = this.left + 'px'; |
|
|
|
|
|
dom.box.style.width = this.width + 'px'; |
|
|
|
|
|
|
|
|
var box = dom.box, |
|
|
|
|
|
line = dom.line, |
|
|
|
|
|
dot = dom.dot; |
|
|
|
|
|
|
|
|
dom.content.style.left = props.content.left + 'px'; |
|
|
|
|
|
|
|
|
box.style.left = this.left + 'px'; |
|
|
|
|
|
box.style.top = this.top + 'px'; |
|
|
|
|
|
|
|
|
|
|
|
line.style.left = props.line.left + 'px'; |
|
|
|
|
|
if (orientation == 'top') { |
|
|
|
|
|
line.style.top = 0 + 'px'; |
|
|
|
|
|
line.style.height = this.top + 'px'; |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
// orientation 'bottom'
|
|
|
|
|
|
line.style.top = props.line.top + 'px'; |
|
|
|
|
|
line.style.top = (this.top + this.height) + 'px'; |
|
|
|
|
|
line.style.height = Math.max(props.dot.top - this.top - this.height, 0) + 'px'; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
dot.style.left = props.dot.left + 'px'; |
|
|
|
|
|
dot.style.top = props.dot.top + 'px'; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = ItemRange; |
|
|
|
|
|
|
|
|
module.exports = exports = ItemBox; |
|
|
|
|
|
|
|
|
},{"../../util":7,"./item":19}],15:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"./item":19,"../../util":8}],16:[function(require,module,exports){ |
|
|
var util = require('../../util'), |
|
|
var util = require('../../util'), |
|
|
Item = require('./item'); |
|
|
Item = require('./item'); |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* @constructor ItemBox |
|
|
|
|
|
|
|
|
* @constructor ItemRange |
|
|
* @extends Item |
|
|
* @extends Item |
|
|
* @param {ItemSet} parent |
|
|
* @param {ItemSet} parent |
|
|
* @param {Object} data Object containing parameters start |
|
|
|
|
|
|
|
|
* @param {Object} data Object containing parameters start, end |
|
|
* content, className. |
|
|
* content, className. |
|
|
* @param {Object} [options] Options to set initial property values |
|
|
* @param {Object} [options] Options to set initial property values |
|
|
* // TODO: describe available options
|
|
|
* // TODO: describe available options
|
|
|
*/ |
|
|
*/ |
|
|
function ItemBox (parent, data, options) { |
|
|
|
|
|
|
|
|
function ItemRange (parent, data, options) { |
|
|
this.props = { |
|
|
this.props = { |
|
|
dot: { |
|
|
|
|
|
left: 0, |
|
|
|
|
|
top: 0, |
|
|
|
|
|
width: 0, |
|
|
|
|
|
height: 0 |
|
|
|
|
|
}, |
|
|
|
|
|
line: { |
|
|
|
|
|
top: 0, |
|
|
|
|
|
|
|
|
content: { |
|
|
left: 0, |
|
|
left: 0, |
|
|
width: 0, |
|
|
|
|
|
height: 0 |
|
|
|
|
|
|
|
|
width: 0 |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
Item.call(this, parent, data, options); |
|
|
Item.call(this, parent, data, options); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
ItemBox.prototype = new Item (null, null); |
|
|
|
|
|
|
|
|
ItemRange.prototype = new Item (null, null); |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Select the item |
|
|
* Select the item |
|
|
* @override |
|
|
* @override |
|
|
*/ |
|
|
*/ |
|
|
ItemBox.prototype.select = function () { |
|
|
|
|
|
|
|
|
ItemRange.prototype.select = function () { |
|
|
this.selected = true; |
|
|
this.selected = true; |
|
|
// TODO: select and unselect
|
|
|
// TODO: select and unselect
|
|
|
}; |
|
|
}; |
|
@ -4582,7 +4629,7 @@ ItemBox.prototype.select = function () { |
|
|
* Unselect the item |
|
|
* Unselect the item |
|
|
* @override |
|
|
* @override |
|
|
*/ |
|
|
*/ |
|
|
ItemBox.prototype.unselect = function () { |
|
|
|
|
|
|
|
|
ItemRange.prototype.unselect = function () { |
|
|
this.selected = false; |
|
|
this.selected = false; |
|
|
// TODO: select and unselect
|
|
|
// TODO: select and unselect
|
|
|
}; |
|
|
}; |
|
@ -4591,7 +4638,7 @@ ItemBox.prototype.unselect = function () { |
|
|
* Repaint the item |
|
|
* Repaint the item |
|
|
* @return {Boolean} changed |
|
|
* @return {Boolean} changed |
|
|
*/ |
|
|
*/ |
|
|
ItemBox.prototype.repaint = function () { |
|
|
|
|
|
|
|
|
ItemRange.prototype.repaint = function () { |
|
|
// TODO: make an efficient repaint
|
|
|
// TODO: make an efficient repaint
|
|
|
var changed = false; |
|
|
var changed = false; |
|
|
var dom = this.dom; |
|
|
var dom = this.dom; |
|
@ -4604,7 +4651,7 @@ ItemBox.prototype.repaint = function () { |
|
|
dom = this.dom; |
|
|
dom = this.dom; |
|
|
|
|
|
|
|
|
if (dom) { |
|
|
if (dom) { |
|
|
if (!this.options && !this.parent) { |
|
|
|
|
|
|
|
|
if (!this.options && !this.options.parent) { |
|
|
throw new Error('Cannot repaint item: no parent attached'); |
|
|
throw new Error('Cannot repaint item: no parent attached'); |
|
|
} |
|
|
} |
|
|
var foreground = this.parent.getForeground(); |
|
|
var foreground = this.parent.getForeground(); |
|
@ -4612,26 +4659,13 @@ ItemBox.prototype.repaint = function () { |
|
|
throw new Error('Cannot repaint time axis: ' + |
|
|
throw new Error('Cannot repaint time axis: ' + |
|
|
'parent has no foreground container element'); |
|
|
'parent has no foreground container element'); |
|
|
} |
|
|
} |
|
|
var background = this.parent.getBackground(); |
|
|
|
|
|
if (!background) { |
|
|
|
|
|
throw new Error('Cannot repaint time axis: ' + |
|
|
|
|
|
'parent has no background container element'); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (!dom.box.parentNode) { |
|
|
if (!dom.box.parentNode) { |
|
|
foreground.appendChild(dom.box); |
|
|
foreground.appendChild(dom.box); |
|
|
changed = true; |
|
|
changed = true; |
|
|
} |
|
|
} |
|
|
if (!dom.line.parentNode) { |
|
|
|
|
|
background.appendChild(dom.line); |
|
|
|
|
|
changed = true; |
|
|
|
|
|
} |
|
|
|
|
|
if (!dom.dot.parentNode) { |
|
|
|
|
|
this.parent.dom.axis.appendChild(dom.dot); |
|
|
|
|
|
changed = true; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// update contents
|
|
|
|
|
|
|
|
|
// update content
|
|
|
if (this.data.content != this.content) { |
|
|
if (this.data.content != this.content) { |
|
|
this.content = this.data.content; |
|
|
this.content = this.data.content; |
|
|
if (this.content instanceof Element) { |
|
|
if (this.content instanceof Element) { |
|
@ -4648,13 +4682,10 @@ ItemBox.prototype.repaint = function () { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// update class
|
|
|
// update class
|
|
|
var className = (this.data.className? ' ' + this.data.className : '') + |
|
|
|
|
|
(this.selected ? ' selected' : ''); |
|
|
|
|
|
|
|
|
var className = this.data.className ? ('' + this.data.className) : ''; |
|
|
if (this.className != className) { |
|
|
if (this.className != className) { |
|
|
this.className = className; |
|
|
this.className = className; |
|
|
dom.box.className = 'item box' + className; |
|
|
|
|
|
dom.line.className = 'item line' + className; |
|
|
|
|
|
dom.dot.className = 'item dot' + className; |
|
|
|
|
|
|
|
|
dom.box.className = 'item range' + className; |
|
|
changed = true; |
|
|
changed = true; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@ -4666,14 +4697,6 @@ ItemBox.prototype.repaint = function () { |
|
|
dom.box.parentNode.removeChild(dom.box); |
|
|
dom.box.parentNode.removeChild(dom.box); |
|
|
changed = true; |
|
|
changed = true; |
|
|
} |
|
|
} |
|
|
if (dom.line.parentNode) { |
|
|
|
|
|
dom.line.parentNode.removeChild(dom.line); |
|
|
|
|
|
changed = true; |
|
|
|
|
|
} |
|
|
|
|
|
if (dom.dot.parentNode) { |
|
|
|
|
|
dom.dot.parentNode.removeChild(dom.dot); |
|
|
|
|
|
changed = true; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -4681,65 +4704,69 @@ ItemBox.prototype.repaint = function () { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Reflow the item: calculate its actual size and position from the DOM |
|
|
|
|
|
|
|
|
* Reflow the item: calculate its actual size from the DOM |
|
|
* @return {boolean} resized returns true if the axis is resized |
|
|
* @return {boolean} resized returns true if the axis is resized |
|
|
* @override |
|
|
* @override |
|
|
*/ |
|
|
*/ |
|
|
ItemBox.prototype.reflow = function () { |
|
|
|
|
|
|
|
|
ItemRange.prototype.reflow = function () { |
|
|
if (this.data.start == undefined) { |
|
|
if (this.data.start == undefined) { |
|
|
throw new Error('Property "start" missing in item ' + this.data.id); |
|
|
throw new Error('Property "start" missing in item ' + this.data.id); |
|
|
} |
|
|
} |
|
|
|
|
|
if (this.data.end == undefined) { |
|
|
|
|
|
throw new Error('Property "end" missing in item ' + this.data.id); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
var update = util.updateProperty, |
|
|
|
|
|
dom = this.dom, |
|
|
|
|
|
|
|
|
var dom = this.dom, |
|
|
props = this.props, |
|
|
props = this.props, |
|
|
options = this.options, |
|
|
options = this.options, |
|
|
start = this.parent.toScreen(this.data.start), |
|
|
|
|
|
align = options && options.align, |
|
|
|
|
|
orientation = options.orientation, |
|
|
|
|
|
changed = 0, |
|
|
|
|
|
top, |
|
|
|
|
|
left; |
|
|
|
|
|
|
|
|
parent = this.parent, |
|
|
|
|
|
start = parent.toScreen(this.data.start), |
|
|
|
|
|
end = parent.toScreen(this.data.end), |
|
|
|
|
|
changed = 0; |
|
|
|
|
|
|
|
|
if (dom) { |
|
|
if (dom) { |
|
|
changed += update(props.dot, 'height', dom.dot.offsetHeight); |
|
|
|
|
|
changed += update(props.dot, 'width', dom.dot.offsetWidth); |
|
|
|
|
|
changed += update(props.line, 'width', dom.line.offsetWidth); |
|
|
|
|
|
changed += update(props.line, 'width', dom.line.offsetWidth); |
|
|
|
|
|
changed += update(this, 'width', dom.box.offsetWidth); |
|
|
|
|
|
changed += update(this, 'height', dom.box.offsetHeight); |
|
|
|
|
|
if (align == 'right') { |
|
|
|
|
|
left = start - this.width; |
|
|
|
|
|
|
|
|
var update = util.updateProperty, |
|
|
|
|
|
box = dom.box, |
|
|
|
|
|
parentWidth = parent.width, |
|
|
|
|
|
orientation = options.orientation, |
|
|
|
|
|
contentLeft, |
|
|
|
|
|
top; |
|
|
|
|
|
|
|
|
|
|
|
changed += update(props.content, 'width', dom.content.offsetWidth); |
|
|
|
|
|
|
|
|
|
|
|
changed += update(this, 'height', box.offsetHeight); |
|
|
|
|
|
|
|
|
|
|
|
// limit the width of the this, as browsers cannot draw very wide divs
|
|
|
|
|
|
if (start < -parentWidth) { |
|
|
|
|
|
start = -parentWidth; |
|
|
} |
|
|
} |
|
|
else if (align == 'left') { |
|
|
|
|
|
left = start; |
|
|
|
|
|
|
|
|
if (end > 2 * parentWidth) { |
|
|
|
|
|
end = 2 * parentWidth; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// when range exceeds left of the window, position the contents at the left of the visible area
|
|
|
|
|
|
if (start < 0) { |
|
|
|
|
|
contentLeft = Math.min(-start, |
|
|
|
|
|
(end - start - props.content.width - 2 * options.padding)); |
|
|
|
|
|
// TODO: remove the need for options.padding. it's terrible.
|
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
// default or 'center'
|
|
|
|
|
|
left = start - this.width / 2; |
|
|
|
|
|
|
|
|
contentLeft = 0; |
|
|
} |
|
|
} |
|
|
changed += update(this, 'left', left); |
|
|
|
|
|
|
|
|
changed += update(props.content, 'left', contentLeft); |
|
|
|
|
|
|
|
|
changed += update(props.line, 'left', start - props.line.width / 2); |
|
|
|
|
|
changed += update(props.dot, 'left', start - props.dot.width / 2); |
|
|
|
|
|
if (orientation == 'top') { |
|
|
if (orientation == 'top') { |
|
|
top = options.margin.axis; |
|
|
top = options.margin.axis; |
|
|
|
|
|
|
|
|
changed += update(this, 'top', top); |
|
|
changed += update(this, 'top', top); |
|
|
changed += update(props.line, 'top', 0); |
|
|
|
|
|
changed += update(props.line, 'height', top); |
|
|
|
|
|
changed += update(props.dot, 'top', -props.dot.height / 2); |
|
|
|
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
// default or 'bottom'
|
|
|
// default or 'bottom'
|
|
|
var parentHeight = this.parent.height; |
|
|
|
|
|
top = parentHeight - this.height - options.margin.axis; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
top = parent.height - this.height - options.margin.axis; |
|
|
changed += update(this, 'top', top); |
|
|
changed += update(this, 'top', top); |
|
|
changed += update(props.line, 'top', top + this.height); |
|
|
|
|
|
changed += update(props.line, 'height', Math.max(options.margin.axis, 0)); |
|
|
|
|
|
changed += update(props.dot, 'top', parentHeight - props.dot.height / 2); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
changed += update(this, 'left', start); |
|
|
|
|
|
changed += update(this, 'width', Math.max(end - start, 1)); // TODO: reckon with border width;
|
|
|
} |
|
|
} |
|
|
else { |
|
|
else { |
|
|
changed += 1; |
|
|
changed += 1; |
|
@ -4752,27 +4779,18 @@ ItemBox.prototype.reflow = function () { |
|
|
* Create an items DOM |
|
|
* Create an items DOM |
|
|
* @private |
|
|
* @private |
|
|
*/ |
|
|
*/ |
|
|
ItemBox.prototype._create = function () { |
|
|
|
|
|
|
|
|
ItemRange.prototype._create = function () { |
|
|
var dom = this.dom; |
|
|
var dom = this.dom; |
|
|
if (!dom) { |
|
|
if (!dom) { |
|
|
this.dom = dom = {}; |
|
|
this.dom = dom = {}; |
|
|
|
|
|
|
|
|
// create the box
|
|
|
|
|
|
dom.box = document.createElement('DIV'); |
|
|
|
|
|
|
|
|
// background box
|
|
|
|
|
|
dom.box = document.createElement('div'); |
|
|
// className is updated in repaint()
|
|
|
// className is updated in repaint()
|
|
|
|
|
|
|
|
|
// contents box (inside the background box). used for making margins
|
|
|
|
|
|
dom.content = document.createElement('DIV'); |
|
|
|
|
|
|
|
|
// contents box
|
|
|
|
|
|
dom.content = document.createElement('div'); |
|
|
dom.content.className = 'content'; |
|
|
dom.content.className = 'content'; |
|
|
dom.box.appendChild(dom.content); |
|
|
dom.box.appendChild(dom.content); |
|
|
|
|
|
|
|
|
// line to axis
|
|
|
|
|
|
dom.line = document.createElement('DIV'); |
|
|
|
|
|
dom.line.className = 'line'; |
|
|
|
|
|
|
|
|
|
|
|
// dot on axis
|
|
|
|
|
|
dom.dot = document.createElement('DIV'); |
|
|
|
|
|
dom.dot.className = 'dot'; |
|
|
|
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
@ -4781,41 +4799,23 @@ ItemBox.prototype._create = function () { |
|
|
* range and size of the items itemset |
|
|
* range and size of the items itemset |
|
|
* @override |
|
|
* @override |
|
|
*/ |
|
|
*/ |
|
|
ItemBox.prototype.reposition = function () { |
|
|
|
|
|
|
|
|
ItemRange.prototype.reposition = function () { |
|
|
var dom = this.dom, |
|
|
var dom = this.dom, |
|
|
props = this.props, |
|
|
|
|
|
orientation = this.options.orientation; |
|
|
|
|
|
|
|
|
props = this.props; |
|
|
|
|
|
|
|
|
if (dom) { |
|
|
if (dom) { |
|
|
var box = dom.box, |
|
|
|
|
|
line = dom.line, |
|
|
|
|
|
dot = dom.dot; |
|
|
|
|
|
|
|
|
|
|
|
box.style.left = this.left + 'px'; |
|
|
|
|
|
box.style.top = this.top + 'px'; |
|
|
|
|
|
|
|
|
|
|
|
line.style.left = props.line.left + 'px'; |
|
|
|
|
|
if (orientation == 'top') { |
|
|
|
|
|
line.style.top = 0 + 'px'; |
|
|
|
|
|
line.style.height = this.top + 'px'; |
|
|
|
|
|
} |
|
|
|
|
|
else { |
|
|
|
|
|
// orientation 'bottom'
|
|
|
|
|
|
line.style.top = props.line.top + 'px'; |
|
|
|
|
|
line.style.top = (this.top + this.height) + 'px'; |
|
|
|
|
|
line.style.height = Math.max(props.dot.top - this.top - this.height, 0) + 'px'; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
dom.box.style.top = this.top + 'px'; |
|
|
|
|
|
dom.box.style.left = this.left + 'px'; |
|
|
|
|
|
dom.box.style.width = this.width + 'px'; |
|
|
|
|
|
|
|
|
dot.style.left = props.dot.left + 'px'; |
|
|
|
|
|
dot.style.top = props.dot.top + 'px'; |
|
|
|
|
|
|
|
|
dom.content.style.left = props.content.left + 'px'; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = ItemBox; |
|
|
|
|
|
|
|
|
module.exports = exports = ItemRange; |
|
|
|
|
|
|
|
|
},{"../../util":7,"./item":19}],17:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"../../util":8,"./item":19}],17:[function(require,module,exports){ |
|
|
var util = require('../../util'), |
|
|
var util = require('../../util'), |
|
|
Item = require('./item'); |
|
|
Item = require('./item'); |
|
|
|
|
|
|
|
@ -5031,7 +5031,7 @@ ItemPoint.prototype.reposition = function () { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = ItemPoint; |
|
|
module.exports = exports = ItemPoint; |
|
|
|
|
|
|
|
|
},{"../../util":7,"./item":19}],18:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"../../util":8,"./item":19}],18:[function(require,module,exports){ |
|
|
(function(){// moment.js
|
|
|
(function(){// moment.js
|
|
|
// version : 2.0.0
|
|
|
// version : 2.0.0
|
|
|
// author : Tim Wood
|
|
|
// author : Tim Wood
|
|
@ -6588,7 +6588,7 @@ Timeline.prototype.setData = function(data) { |
|
|
// exports
|
|
|
// exports
|
|
|
module.exports = exports = Timeline; |
|
|
module.exports = exports = Timeline; |
|
|
|
|
|
|
|
|
},{"./../util":7,"../range":3,"../controller":2,"../component/component":9,"../component/rootpanel":11,"../component/timeaxis":13,"../component/itemset":12,"moment":18}],19:[function(require,module,exports){ |
|
|
|
|
|
|
|
|
},{"./../util":8,"../range":5,"../controller":4,"../component/component":9,"../component/rootpanel":10,"../component/timeaxis":13,"../component/itemset":12,"moment":18}],19:[function(require,module,exports){ |
|
|
var Component = require('../component'); |
|
|
var Component = require('../component'); |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|