Browse Source

Updated Points.draw method to support onRender

+ Checking for callbacks
+ Using the newly generated 'groupTemplate' object instead of group
+ Updated calls to DOMutil.drawPoint to use the groupTemplate instead of group
flowchartTest
Manuel Schallar 9 years ago
parent
commit
f39c246e5c
3 changed files with 58 additions and 18 deletions
  1. +15
    -15
      lib/DOMutil.js
  2. +6
    -1
      lib/timeline/component/GraphGroup.js
  3. +37
    -2
      lib/timeline/component/graph2d_types/points.js

+ 15
- 15
lib/DOMutil.js View File

@ -121,43 +121,43 @@ exports.getDOMElement = function (elementType, JSONcontainer, DOMContainer, inse
/**
* draw a point object. this is a seperate function because it can also be called by the legend.
* Draw a point object. This is a separate function because it can also be called by the legend.
* The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
* as well.
*
* @param x
* @param y
* @param group
* @param groupTemplate: A template containing the necessary information to draw the datapoint e.g., {style: 'circle', size: 5, className: 'className' }
* @param JSONcontainer
* @param svgContainer
* @param labelObj
* @returns {*}
*/
exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj) {
exports.drawPoint = function(x, y, groupTemplate, JSONcontainer, svgContainer, labelObj) {
var point;
if (group.options.drawPoints.style == 'circle') {
point = exports.getSVGElement('circle',JSONcontainer,svgContainer);
if (groupTemplate.style == 'circle') {
point = exports.getSVGElement('circle', JSONcontainer, svgContainer);
point.setAttributeNS(null, "cx", x);
point.setAttributeNS(null, "cy", y);
point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
point.setAttributeNS(null, "r", 0.5 * groupTemplate.size);
}
else {
point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
point.setAttributeNS(null, "width", group.options.drawPoints.size);
point.setAttributeNS(null, "height", group.options.drawPoints.size);
point = exports.getSVGElement('rect', JSONcontainer, svgContainer);
point.setAttributeNS(null, "x", x - 0.5 * groupTemplate.size);
point.setAttributeNS(null, "y", y - 0.5 * groupTemplate.size);
point.setAttributeNS(null, "width", groupTemplate.size);
point.setAttributeNS(null, "height", groupTemplate.size);
}
if(group.options.drawPoints.styles !== undefined) {
point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
if (groupTemplate.style !== undefined) {
point.setAttributeNS(null, "style", groupTemplate.style);
}
point.setAttributeNS(null, "class", group.className + " vis-point");
point.setAttributeNS(null, "class", groupTemplate.className + " vis-point");
//handle label
if (labelObj) {
var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
var label = exports.getSVGElement('text', JSONcontainer, svgContainer);
if (labelObj.xOffset) {
x = x + labelObj.xOffset;
}

+ 6
- 1
lib/timeline/component/GraphGroup.js View File

@ -169,7 +169,12 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
}
if (this.options.drawPoints.enabled == true) {
DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
var groupTemplate = {
style: this.options.drawPoints.style,
size:this.options.drawPoints.size,
className: this.className
};
DOMutil.drawPoint(x + 0.5 * iconWidth, y, groupTemplate, JSONcontainer, SVGcontainer);
}
}
else {

+ 37
- 2
lib/timeline/component/graph2d_types/points.js View File

@ -30,10 +30,45 @@ Points.prototype.draw = function(dataset, group, framework, offset) {
* @param {Number} [offset]
*/
Points.draw = function (dataset, group, framework, offset) {
if (offset === undefined) {offset = 0;}
offset = offset || 0;
var callback = getCallback();
for (var i = 0; i < dataset.length; i++) {
DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, framework.svgElements, framework.svg, dataset[i].label);
if (!callback) {
// draw the point the simple way.
DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, getGroupTemplate(), framework.svgElements, framework.svg, dataset[i].label);
} else {
var callbackResult = callback(dataset[i], group, framework); // result might be true, false or an object
if (callbackResult === true || typeof callbackResult === 'object') {
DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, getGroupTemplate(callbackResult), framework.svgElements, framework.svg, dataset[i].label);
}
}
}
function getGroupTemplate(callbackResult) {
callbackResult = (typeof callbackResult === 'undefined') ? {} : callbackResult;
return {
style: callbackResult.style || group.options.drawPoints.style,
size: callbackResult.size || group.options.drawPoints.size,
className: callbackResult.className || group.className
};
}
function getCallback() {
var callback = undefined;
// check for the graph2d onRender
if (framework.options.drawPoints.onRender && typeof framework.options.drawPoints.onRender == 'function') {
callback = framework.options.drawPoints.onRender;
}
// override it with the group onRender if defined
if (group.group.options && group.group.options.drawPoints && group.group.options.drawPoints.onRender && typeof group.group.options.drawPoints.onRender == 'function') {
callback = group.group.options.drawPoints.onRender;
}
return callback;
}
};
};

Loading…
Cancel
Save