|
@ -226,6 +226,37 @@ Graph3d.prototype._convertTranslationToScreen = function(translation) { |
|
|
this.ycenter - by * this.frame.canvas.clientWidth); |
|
|
this.ycenter - by * this.frame.canvas.clientWidth); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
* Calculate the translations and screen positions of all points |
|
|
|
|
|
*/ |
|
|
|
|
|
Graph3d.prototype._calcTranslations = function(points, sort) { |
|
|
|
|
|
if (sort === undefined) { |
|
|
|
|
|
sort = true; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < points.length; i++) { |
|
|
|
|
|
var point = points[i]; |
|
|
|
|
|
point.trans = this._convertPointToTranslation(point.point); |
|
|
|
|
|
point.screen = this._convertTranslationToScreen(point.trans); |
|
|
|
|
|
|
|
|
|
|
|
// calculate the translation of the point at the bottom (needed for sorting)
|
|
|
|
|
|
var transBottom = this._convertPointToTranslation(point.bottom); |
|
|
|
|
|
point.dist = this.showPerspective ? transBottom.length() : -transBottom.z; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (!sort) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// sort the points on depth of their (x,y) position (not on z)
|
|
|
|
|
|
var sortDepth = function (a, b) { |
|
|
|
|
|
return b.dist - a.dist; |
|
|
|
|
|
}; |
|
|
|
|
|
points.sort(sortDepth); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Set the background styling for the graph |
|
|
* Set the background styling for the graph |
|
|
* @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor |
|
|
* @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor |
|
@ -1467,24 +1498,7 @@ Graph3d.prototype._redrawDataGrid = function() { |
|
|
if (this.dataPoints === undefined || this.dataPoints.length <= 0) |
|
|
if (this.dataPoints === undefined || this.dataPoints.length <= 0) |
|
|
return; // TODO: throw exception?
|
|
|
return; // TODO: throw exception?
|
|
|
|
|
|
|
|
|
// calculate the translations and screen position of all points
|
|
|
|
|
|
for (i = 0; i < this.dataPoints.length; i++) { |
|
|
|
|
|
var trans = this._convertPointToTranslation(this.dataPoints[i].point); |
|
|
|
|
|
var screen = this._convertTranslationToScreen(trans); |
|
|
|
|
|
|
|
|
|
|
|
this.dataPoints[i].trans = trans; |
|
|
|
|
|
this.dataPoints[i].screen = screen; |
|
|
|
|
|
|
|
|
|
|
|
// calculate the translation of the point at the bottom (needed for sorting)
|
|
|
|
|
|
var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom); |
|
|
|
|
|
this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// sort the points on depth of their (x,y) position (not on z)
|
|
|
|
|
|
var sortDepth = function (a, b) { |
|
|
|
|
|
return b.dist - a.dist; |
|
|
|
|
|
}; |
|
|
|
|
|
this.dataPoints.sort(sortDepth); |
|
|
|
|
|
|
|
|
this._calcTranslations(this.dataPoints); |
|
|
|
|
|
|
|
|
if (this.style === Graph3d.STYLE.SURFACE) { |
|
|
if (this.style === Graph3d.STYLE.SURFACE) { |
|
|
for (i = 0; i < this.dataPoints.length; i++) { |
|
|
for (i = 0; i < this.dataPoints.length; i++) { |
|
@ -1601,23 +1615,7 @@ Graph3d.prototype._redrawDataDot = function() { |
|
|
if (this.dataPoints === undefined || this.dataPoints.length <= 0) |
|
|
if (this.dataPoints === undefined || this.dataPoints.length <= 0) |
|
|
return; // TODO: throw exception?
|
|
|
return; // TODO: throw exception?
|
|
|
|
|
|
|
|
|
// calculate the translations of all points
|
|
|
|
|
|
for (i = 0; i < this.dataPoints.length; i++) { |
|
|
|
|
|
var trans = this._convertPointToTranslation(this.dataPoints[i].point); |
|
|
|
|
|
var screen = this._convertTranslationToScreen(trans); |
|
|
|
|
|
this.dataPoints[i].trans = trans; |
|
|
|
|
|
this.dataPoints[i].screen = screen; |
|
|
|
|
|
|
|
|
|
|
|
// calculate the distance from the point at the bottom to the camera
|
|
|
|
|
|
var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom); |
|
|
|
|
|
this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// order the translated points by depth
|
|
|
|
|
|
var sortDepth = function (a, b) { |
|
|
|
|
|
return b.dist - a.dist; |
|
|
|
|
|
}; |
|
|
|
|
|
this.dataPoints.sort(sortDepth); |
|
|
|
|
|
|
|
|
this._calcTranslations(this.dataPoints); |
|
|
|
|
|
|
|
|
// draw the datapoints as colored circles
|
|
|
// draw the datapoints as colored circles
|
|
|
var dotSize = this.frame.clientWidth * this.dotSizeRatio; // px
|
|
|
var dotSize = this.frame.clientWidth * this.dotSizeRatio; // px
|
|
@ -1692,23 +1690,7 @@ Graph3d.prototype._redrawDataBar = function() { |
|
|
if (this.dataPoints === undefined || this.dataPoints.length <= 0) |
|
|
if (this.dataPoints === undefined || this.dataPoints.length <= 0) |
|
|
return; // TODO: throw exception?
|
|
|
return; // TODO: throw exception?
|
|
|
|
|
|
|
|
|
// calculate the translations of all points
|
|
|
|
|
|
for (i = 0; i < this.dataPoints.length; i++) { |
|
|
|
|
|
var trans = this._convertPointToTranslation(this.dataPoints[i].point); |
|
|
|
|
|
var screen = this._convertTranslationToScreen(trans); |
|
|
|
|
|
this.dataPoints[i].trans = trans; |
|
|
|
|
|
this.dataPoints[i].screen = screen; |
|
|
|
|
|
|
|
|
|
|
|
// calculate the distance from the point at the bottom to the camera
|
|
|
|
|
|
var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom); |
|
|
|
|
|
this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// order the translated points by depth
|
|
|
|
|
|
var sortDepth = function (a, b) { |
|
|
|
|
|
return b.dist - a.dist; |
|
|
|
|
|
}; |
|
|
|
|
|
this.dataPoints.sort(sortDepth); |
|
|
|
|
|
|
|
|
this._calcTranslations(this.dataPoints); |
|
|
|
|
|
|
|
|
ctx.lineJoin = 'round'; |
|
|
ctx.lineJoin = 'round'; |
|
|
ctx.lineCap = 'round'; |
|
|
ctx.lineCap = 'round'; |
|
@ -1833,14 +1815,7 @@ Graph3d.prototype._redrawDataLine = function() { |
|
|
if (this.dataPoints === undefined || this.dataPoints.length <= 0) |
|
|
if (this.dataPoints === undefined || this.dataPoints.length <= 0) |
|
|
return; // TODO: throw exception?
|
|
|
return; // TODO: throw exception?
|
|
|
|
|
|
|
|
|
// calculate the translations of all points
|
|
|
|
|
|
for (i = 0; i < this.dataPoints.length; i++) { |
|
|
|
|
|
var trans = this._convertPointToTranslation(this.dataPoints[i].point); |
|
|
|
|
|
var screen = this._convertTranslationToScreen(trans); |
|
|
|
|
|
|
|
|
|
|
|
this.dataPoints[i].trans = trans; |
|
|
|
|
|
this.dataPoints[i].screen = screen; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
this._calcTranslations(this.dataPoints, false); |
|
|
|
|
|
|
|
|
// start the line
|
|
|
// start the line
|
|
|
if (this.dataPoints.length > 0) { |
|
|
if (this.dataPoints.length > 0) { |
|
|