-options = {
- width: "100%",
- height: "400px",
- style: "surface"
+var options = {
+ width: '100%',
+ height: '400px',
+ style: 'surface'
};
@@ -234,7 +234,7 @@ options = {
cameraPosition contains three parameters:
horizontal, vertical, and distance.
@@ -277,7 +277,7 @@ options = {
bar,
bar-color,
@@ -378,7 +378,7 @@ options = {
"bar" and "bar-color".'bar' and 'bar-color'.
"bar" and "bar-color".'bar' and 'bar-color'.
pos
is an object which contains three parameters: horizontal,
vertical, and distance.
@@ -595,13 +595,13 @@ options = {
function onCameraPositionChange(event) {
- alert("The camera position changed to:\n" +
- "Horizontal: " + event.horizontal + "\n" +
- "Vertical: " + event.vertical + "\n" +
- "Distance: " + event.distance);
+ alert('The camera position changed to:\n' +
+ 'Horizontal: ' + event.horizontal + '\n' +
+ 'Vertical: ' + event.vertical + '\n' +
+ 'Distance: ' + event.distance);
}
// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
-graph3d.on("cameraPositionChange", onCameraPositionChange);
+graph3d.on('cameraPositionChange', onCameraPositionChange);
diff --git a/examples/graph3d/example01_basis.html b/examples/graph3d/example01_basis.html index e70eee07..b088aa0c 100644 --- a/examples/graph3d/example01_basis.html +++ b/examples/graph3d/example01_basis.html @@ -35,9 +35,9 @@ // specify options var options = { - width: "600px", - height: "600px", - style: "surface", + width: '600px', + height: '600px', + style: 'surface', showPerspective: true, showGrid: true, showShadow: false, diff --git a/examples/graph3d/example02_camera.html b/examples/graph3d/example02_camera.html index 07847c81..3c14adfe 100644 --- a/examples/graph3d/example02_camera.html +++ b/examples/graph3d/example02_camera.html @@ -33,9 +33,10 @@ var vertical = parseFloat(document.getElementById('vertical').value); var distance = parseFloat(document.getElementById('distance').value); var pos = { - "horizontal": horizontal, - "vertical":vertical, - "distance":distance}; + horizontal: horizontal, + vertical: vertical, + distance: distance + }; graph.setCameraPosition(pos); // retrieve the camera position again, to get the applied values @@ -61,9 +62,9 @@ // specify options var options = { - width: "600px", - height: "600px", - style: "surface", + width: '600px', + height: '600px', + style: 'surface', showPerspective: true, showGrid: true, showShadow: false, @@ -75,7 +76,7 @@ var container = document.getElementById('mygraph'); graph = new vis.Graph3d(container, data, options); - graph.on("cameraPositionChange", onCameraPositionChange); + graph.on('cameraPositionChange', onCameraPositionChange); } diff --git a/examples/graph3d/example03_filter.html b/examples/graph3d/example03_filter.html index 03259761..58a0bc3e 100644 --- a/examples/graph3d/example03_filter.html +++ b/examples/graph3d/example03_filter.html @@ -28,24 +28,24 @@ for (var x = 0; x < axisMax; x+=axisStep) { for (var y = 0; y < axisMax; y+=axisStep) { var value = custom(x,y); - var valueRange = (value > 67) ? "67-100" : - (value < 33) ? "0-33" : - "33-67"; + var valueRange = (value > 67) ? '67-100' : + (value < 33) ? '0-33' : + '33-67'; data.push({x:x,y:y,z:value,filter:valueRange,style:value}); } } // specify options var options = { - width: "600px", - height: "600px", - style: "surface", + width: '600px', + height: '600px', + style: 'surface', showPerspective: false, showGrid: true, showShadow: false, keepAspectRatio: true, verticalRatio: 0.5, - filterLabel: "values" + filterLabel: 'values' }; // Create our graph diff --git a/examples/graph3d/example04_animate.html b/examples/graph3d/example04_animate.html index b53db768..779e6a28 100644 --- a/examples/graph3d/example04_animate.html +++ b/examples/graph3d/example04_animate.html @@ -41,9 +41,9 @@ // specify options var options = { - width: "600px", - height: "600px", - style: "surface", + width: '600px', + height: '600px', + style: 'surface', showPerspective: true, showGrid: true, showShadow: false, @@ -52,7 +52,7 @@ verticalRatio: 0.5, animationInterval: 100, // milliseconds animationPreload: true, - filterValue: "time" + filterValue: 'time' }; // create our graph diff --git a/examples/graph3d/example05_line.html b/examples/graph3d/example05_line.html index a5243907..7a7e9601 100644 --- a/examples/graph3d/example05_line.html +++ b/examples/graph3d/example05_line.html @@ -33,9 +33,9 @@ // specify options var options = { - width: "600px", - height: "600px", - style: "line", + width: '600px', + height: '600px', + style: 'line', showPerspective: false, showGrid: true, keepAspectRatio: true, diff --git a/examples/graph3d/example06_moving_dots.html b/examples/graph3d/example06_moving_dots.html index c0f6b475..f5664bb5 100644 --- a/examples/graph3d/example06_moving_dots.html +++ b/examples/graph3d/example06_moving_dots.html @@ -44,9 +44,9 @@ // specify options var options = { - width: "600px", - height: "600px", - style: "dot-color", + width: '600px', + height: '600px', + style: 'dot-color', showPerspective: true, showGrid: true, keepAspectRatio: true, @@ -54,7 +54,7 @@ animationInterval: 35, // milliseconds animationPreload: false, animationAutoStart: true, - legendLabel: "color value", + legendLabel: 'color value', cameraPosition: { horizontal: 2.7, vertical: 0.0, diff --git a/examples/graph3d/example07_dot_cloud_colors.html b/examples/graph3d/example07_dot_cloud_colors.html index c74fc5c1..eab36f26 100644 --- a/examples/graph3d/example07_dot_cloud_colors.html +++ b/examples/graph3d/example07_dot_cloud_colors.html @@ -37,14 +37,14 @@ // specify options var options = { - width: "600px", - height: "600px", - style: "dot-color", + width: '600px', + height: '600px', + style: 'dot-color', showPerspective: true, showGrid: true, keepAspectRatio: true, verticalRatio: 1.0, - legendLabel: "distance", + legendLabel: 'distance', cameraPosition: { horizontal: -0.35, vertical: 0.22, diff --git a/examples/graph3d/example08_dot_cloud_size.html b/examples/graph3d/example08_dot_cloud_size.html index 219cb33a..edff678c 100644 --- a/examples/graph3d/example08_dot_cloud_size.html +++ b/examples/graph3d/example08_dot_cloud_size.html @@ -37,13 +37,13 @@ // specify options var options = { - width: "600px", - height: "600px", - style: "dot-size", + width: '600px', + height: '600px', + style: 'dot-size', showPerspective: false, showGrid: true, keepAspectRatio: true, - legendLabel:"value", + legendLabel:'value', verticalRatio: 1.0, cameraPosition: { horizontal: -0.54, diff --git a/examples/graph3d/example09_mobile.html b/examples/graph3d/example09_mobile.html index a74e81ec..7d0b0c35 100644 --- a/examples/graph3d/example09_mobile.html +++ b/examples/graph3d/example09_mobile.html @@ -52,9 +52,9 @@ // specify options var options = { - width: "100%", - height: "100%", - style: "surface", + width: '100%', + height: '100%', + style: 'surface', showPerspective: true, showGrid: true, showShadow: false, diff --git a/examples/graph3d/example10_styles.html b/examples/graph3d/example10_styles.html index 37178077..7791d985 100644 --- a/examples/graph3d/example10_styles.html +++ b/examples/graph3d/example10_styles.html @@ -19,10 +19,10 @@ // Called when the Visualization API is loaded. function drawVisualization() { - var style = document.getElementById("style").value; - var showPerspective = document.getElementById("perspective").checked; - var xBarWidth = parseFloat(document.getElementById("xBarWidth").value) || undefined; - var yBarWidth = parseFloat(document.getElementById("yBarWidth").value) || undefined; + var style = document.getElementById('style').value; + var showPerspective = document.getElementById('perspective').checked; + var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined; + var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined; var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1; // Create and populate a data table. @@ -47,8 +47,8 @@ // specify options var options = { - width: "600px", - height: "600px", + width: '600px', + height: '600px', style: style, xBarWidth: xBarWidth, yBarWidth: yBarWidth, @@ -67,10 +67,10 @@ if (camera) graph.setCameraPosition(camera); // restore camera position - document.getElementById("style").onchange = drawVisualization; - document.getElementById("perspective").onchange = drawVisualization; - document.getElementById("xBarWidth").onchange = drawVisualization; - document.getElementById("yBarWidth").onchange = drawVisualization; + document.getElementById('style').onchange = drawVisualization; + document.getElementById('perspective').onchange = drawVisualization; + document.getElementById('xBarWidth').onchange = drawVisualization; + document.getElementById('yBarWidth').onchange = drawVisualization; } diff --git a/examples/graph3d/example11_tooltips.html b/examples/graph3d/example11_tooltips.html index 9cd07766..e4244387 100644 --- a/examples/graph3d/example11_tooltips.html +++ b/examples/graph3d/example11_tooltips.html @@ -19,7 +19,7 @@ // Called when the Visualization API is loaded. function drawVisualization() { - var style = document.getElementById("style").value; + var style = document.getElementById('style').value; var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1; // Create and populate a data table. @@ -44,8 +44,8 @@ // specify options var options = { - width: "600px", - height: "600px", + width: '600px', + height: '600px', style: style, showPerspective: true, showGrid: true, @@ -70,7 +70,7 @@ if (camera) graph.setCameraPosition(camera); // restore camera position - document.getElementById("style").onchange = drawVisualization; + document.getElementById('style').onchange = drawVisualization; } diff --git a/src/graph3d/Graph3d.js b/src/graph3d/Graph3d.js index 897039bb..21e3f5d1 100644 --- a/src/graph3d/Graph3d.js +++ b/src/graph3d/Graph3d.js @@ -12,17 +12,17 @@ function Graph3d(container, data, options) { // create variables and set default values this.containerElement = container; - this.width = "400px"; - this.height = "400px"; + this.width = '400px'; + this.height = '400px'; this.margin = 10; // px - this.defaultXCenter = "55%"; - this.defaultYCenter = "50%"; + this.defaultXCenter = '55%'; + this.defaultYCenter = '50%'; - this.xLabel = "x"; - this.yLabel = "y"; - this.zLabel = "z"; - this.filterLabel = "time"; - this.legendLabel = "value"; + this.xLabel = 'x'; + this.yLabel = 'y'; + this.zLabel = 'z'; + this.filterLabel = 'time'; + this.legendLabel = 'value'; this.style = Graph3d.STYLE.DOT; this.showPerspective = true; @@ -31,7 +31,7 @@ function Graph3d(container, data, options) { this.showShadow = false; this.showGrayBottom = false; // TODO: this does not work correctly this.showTooltip = false; - this.verticalRatio = 0.5; // 0.1 to 1.0, where 1.0 results in a "cube" + this.verticalRatio = 0.5; // 0.1 to 1.0, where 1.0 results in a 'cube' this.animationInterval = 1000; // milliseconds this.animationPreload = false; @@ -65,10 +65,10 @@ function Graph3d(container, data, options) { // TODO: customize axis range // constants - this.colorAxis = "#4D4D4D"; - this.colorGrid = "#D3D3D3"; - this.colorDot = "#7DC1FF"; - this.colorDotBorder = "#3267D2"; + this.colorAxis = '#4D4D4D'; + this.colorGrid = '#D3D3D3'; + this.colorDot = '#7DC1FF'; + this.colorDotBorder = '#3267D2'; // create a frame and canvas this.create(); @@ -335,16 +335,16 @@ Graph3d.prototype._convertTranslationToScreen = function(translation) { * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor */ Graph3d.prototype._setBackgroundColor = function(backgroundColor) { - var fill = "white"; - var stroke = "gray"; + var fill = 'white'; + var stroke = 'gray'; var strokeWidth = 1; - if (typeof(backgroundColor) === "string") { + if (typeof(backgroundColor) === 'string') { fill = backgroundColor; - stroke = "none"; + stroke = 'none'; strokeWidth = 0; } - else if (typeof(backgroundColor) === "object") { + else if (typeof(backgroundColor) === 'object') { if (backgroundColor.fill !== undefined) fill = backgroundColor.fill; if (backgroundColor.stroke !== undefined) stroke = backgroundColor.stroke; if (backgroundColor.strokeWidth !== undefined) strokeWidth = backgroundColor.strokeWidth; @@ -353,13 +353,13 @@ Graph3d.prototype._setBackgroundColor = function(backgroundColor) { // use use defaults } else { - throw "Unsupported type of backgroundColor"; + throw 'Unsupported type of backgroundColor'; } this.frame.style.backgroundColor = fill; this.frame.style.borderColor = stroke; - this.frame.style.borderWidth = strokeWidth + "px"; - this.frame.style.borderStyle = "solid"; + this.frame.style.borderWidth = strokeWidth + 'px'; + this.frame.style.borderStyle = 'solid'; }; @@ -379,22 +379,22 @@ Graph3d.STYLE = { /** * Retrieve the style index from given styleName - * @param {string} styleName Style name such as "dot", "grid", "dot-line" + * @param {string} styleName Style name such as 'dot', 'grid', 'dot-line' * @return {Number} styleNumber Enumeration value representing the style, or -1 * when not found */ Graph3d.prototype._getStyleNumber = function(styleName) { switch (styleName) { - case "dot": return Graph3d.STYLE.DOT; - case "dot-line": return Graph3d.STYLE.DOTLINE; - case "dot-color": return Graph3d.STYLE.DOTCOLOR; - case "dot-size": return Graph3d.STYLE.DOTSIZE; - case "line": return Graph3d.STYLE.LINE; - case "grid": return Graph3d.STYLE.GRID; - case "surface": return Graph3d.STYLE.SURFACE; - case "bar": return Graph3d.STYLE.BAR; - case "bar-color": return Graph3d.STYLE.BARCOLOR; - case "bar-size": return Graph3d.STYLE.BARSIZE; + case 'dot': return Graph3d.STYLE.DOT; + case 'dot-line': return Graph3d.STYLE.DOTLINE; + case 'dot-color': return Graph3d.STYLE.DOTCOLOR; + case 'dot-size': return Graph3d.STYLE.DOTSIZE; + case 'line': return Graph3d.STYLE.LINE; + case 'grid': return Graph3d.STYLE.GRID; + case 'surface': return Graph3d.STYLE.SURFACE; + case 'bar': return Graph3d.STYLE.BAR; + case 'bar-color': return Graph3d.STYLE.BARCOLOR; + case 'bar-size': return Graph3d.STYLE.BARSIZE; } return -1; @@ -437,7 +437,7 @@ Graph3d.prototype._determineColumnIndexes = function(data, style) { } } else { - throw "Unknown style '" + this.style + "'"; + throw 'Unknown style "' + this.style + '"'; } }; @@ -534,7 +534,7 @@ Graph3d.prototype._dataInitialize = function (rawData, style) { // check if a filter column is provided - if (data[0].hasOwnProperty("filter")) { + if (data[0].hasOwnProperty('filter')) { if (this.dataFilter === undefined) { this.dataFilter = new Filter(rawData, this.colFilter, this); this.dataFilter.setOnLoadCallback(function() {me.redraw();}); @@ -686,7 +686,7 @@ Graph3d.prototype._getDataPoints = function (data) { } } } - else { // "dot", "dot-line", etc. + else { // 'dot', 'dot-line', etc. // copy all values from the google data table to a list with Point3d objects for (i = 0; i < data.length; i++) { point = new Point3d(); @@ -715,12 +715,12 @@ Graph3d.prototype._getDataPoints = function (data) { /** - * Append suffix "px" to provided value x + * Append suffix 'px' to provided value x * @param {int} x An integer value - * @return {string} the string value of x, followed by the suffix "px" + * @return {string} the string value of x, followed by the suffix 'px' */ Graph3d.px = function(x) { - return x + "px"; + return x + 'px'; }; @@ -736,29 +736,29 @@ Graph3d.prototype.create = function () { this.containerElement.removeChild(this.containerElement.firstChild); } - this.frame = document.createElement("div"); - this.frame.style.position = "relative"; - this.frame.style.overflow = "hidden"; + this.frame = document.createElement('div'); + this.frame.style.position = 'relative'; + this.frame.style.overflow = 'hidden'; // create the graph canvas (HTML canvas element) - this.frame.canvas = document.createElement( "canvas" ); - this.frame.canvas.style.position = "relative"; + this.frame.canvas = document.createElement( 'canvas' ); + this.frame.canvas.style.position = 'relative'; this.frame.appendChild(this.frame.canvas); //if (!this.frame.canvas.getContext) { { - var noCanvas = document.createElement( "DIV" ); - noCanvas.style.color = "red"; - noCanvas.style.fontWeight = "bold" ; - noCanvas.style.padding = "10px"; - noCanvas.innerHTML = "Error: your browser does not support HTML canvas"; + var noCanvas = document.createElement( 'DIV' ); + noCanvas.style.color = 'red'; + noCanvas.style.fontWeight = 'bold' ; + noCanvas.style.padding = '10px'; + noCanvas.innerHTML = 'Error: your browser does not support HTML canvas'; this.frame.canvas.appendChild(noCanvas); } - this.frame.filter = document.createElement( "div" ); - this.frame.filter.style.position = "absolute"; - this.frame.filter.style.bottom = "0px"; - this.frame.filter.style.left = "0px"; - this.frame.filter.style.width = "100%"; + this.frame.filter = document.createElement( 'div' ); + this.frame.filter.style.position = 'absolute'; + this.frame.filter.style.bottom = '0px'; + this.frame.filter.style.left = '0px'; + this.frame.filter.style.width = '100%'; this.frame.appendChild(this.frame.filter); // add event listeners to handle moving and zooming the contents @@ -767,13 +767,13 @@ Graph3d.prototype.create = function () { var ontouchstart = function (event) {me._onTouchStart(event);}; var onmousewheel = function (event) {me._onWheel(event);}; var ontooltip = function (event) {me._onTooltip(event);}; - // TODO: these events are never cleaned up... can give a "memory leakage" + // TODO: these events are never cleaned up... can give a 'memory leakage' - G3DaddEventListener(this.frame.canvas, "keydown", onkeydown); - G3DaddEventListener(this.frame.canvas, "mousedown", onmousedown); - G3DaddEventListener(this.frame.canvas, "touchstart", ontouchstart); - G3DaddEventListener(this.frame.canvas, "mousewheel", onmousewheel); - G3DaddEventListener(this.frame.canvas, "mousemove", ontooltip); + G3DaddEventListener(this.frame.canvas, 'keydown', onkeydown); + G3DaddEventListener(this.frame.canvas, 'mousedown', onmousedown); + G3DaddEventListener(this.frame.canvas, 'touchstart', ontouchstart); + G3DaddEventListener(this.frame.canvas, 'mousewheel', onmousewheel); + G3DaddEventListener(this.frame.canvas, 'mousemove', ontooltip); // add the new graph to the container element this.containerElement.appendChild(this.frame); @@ -782,10 +782,10 @@ Graph3d.prototype.create = function () { /** * Set a new size for the graph - * @param {string} width Width in pixels or percentage (for example "800px" - * or "50%") - * @param {string} height Height in pixels or percentage (for example "400px" - * or "30%") + * @param {string} width Width in pixels or percentage (for example '800px' + * or '50%') + * @param {string} height Height in pixels or percentage (for example '400px' + * or '30%') */ Graph3d.prototype.setSize = function(width, height) { this.frame.style.width = width; @@ -798,14 +798,14 @@ Graph3d.prototype.setSize = function(width, height) { * Resize the canvas to the current size of the frame */ Graph3d.prototype._resizeCanvas = function() { - this.frame.canvas.style.width = "100%"; - this.frame.canvas.style.height = "100%"; + this.frame.canvas.style.width = '100%'; + this.frame.canvas.style.height = '100%'; this.frame.canvas.width = this.frame.canvas.clientWidth; this.frame.canvas.height = this.frame.canvas.clientHeight; // adjust with for margin - this.frame.filter.style.width = (this.frame.canvas.clientWidth - 2 * 10) + "px"; + this.frame.filter.style.width = (this.frame.canvas.clientWidth - 2 * 10) + 'px'; }; /** @@ -813,7 +813,7 @@ Graph3d.prototype._resizeCanvas = function() { */ Graph3d.prototype.animationStart = function() { if (!this.frame.filter || !this.frame.filter.slider) - throw "No animation available"; + throw 'No animation available'; this.frame.filter.slider.play(); }; @@ -837,7 +837,7 @@ Graph3d.prototype.animationStop = function() { */ Graph3d.prototype._resizeCenter = function() { // calculate the horizontal center position - if (this.defaultXCenter.charAt(this.defaultXCenter.length-1) === "%") { + if (this.defaultXCenter.charAt(this.defaultXCenter.length-1) === '%') { this.xcenter = parseFloat(this.defaultXCenter) / 100 * this.frame.canvas.clientWidth; @@ -847,7 +847,7 @@ Graph3d.prototype._resizeCenter = function() { } // calculate the vertical center position - if (this.defaultYCenter.charAt(this.defaultYCenter.length-1) === "%") { + if (this.defaultYCenter.charAt(this.defaultYCenter.length-1) === '%') { this.ycenter = parseFloat(this.defaultYCenter) / 100 * (this.frame.canvas.clientHeight - this.frame.filter.clientHeight); @@ -1024,7 +1024,7 @@ Graph3d.prototype.setOptions = function (options) { */ Graph3d.prototype.redraw = function() { if (this.dataPoints === undefined) { - throw "Error: graph data not initialized"; + throw 'Error: graph data not initialized'; } this._resizeCanvas(); @@ -1059,7 +1059,7 @@ Graph3d.prototype.redraw = function() { */ Graph3d.prototype._redrawClear = function() { var canvas = this.frame.canvas; - var ctx = canvas.getContext("2d"); + var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); }; @@ -1094,9 +1094,9 @@ Graph3d.prototype._redrawLegend = function() { } var canvas = this.frame.canvas; - var ctx = canvas.getContext("2d"); + var ctx = canvas.getContext('2d'); ctx.lineWidth = 1; - ctx.font = "14px arial"; // TODO: put in options + ctx.font = '14px arial'; // TODO: put in options if (this.style === Graph3d.STYLE.DOTCOLOR) { // draw the color bar @@ -1151,16 +1151,16 @@ Graph3d.prototype._redrawLegend = function() { ctx.lineTo(left, y); ctx.stroke(); - ctx.textAlign = "right"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; ctx.fillStyle = this.colorAxis; ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y); step.next(); } - ctx.textAlign = "right"; - ctx.textBaseline = "top"; + ctx.textAlign = 'right'; + ctx.textBaseline = 'top'; var label = this.legendLabel; ctx.fillText(label, right, bottom + this.margin); } @@ -1170,7 +1170,7 @@ Graph3d.prototype._redrawLegend = function() { * Redraw the filter */ Graph3d.prototype._redrawFilter = function() { - this.frame.filter.innerHTML = ""; + this.frame.filter.innerHTML = ''; if (this.dataFilter) { var options = { @@ -1180,8 +1180,8 @@ Graph3d.prototype._redrawFilter = function() { this.frame.filter.slider = slider; // TODO: css here is not nice here... - this.frame.filter.style.padding = "10px"; - //this.frame.filter.style.backgroundColor = "#EFEFEF"; + this.frame.filter.style.padding = '10px'; + //this.frame.filter.style.backgroundColor = '#EFEFEF'; slider.setValues(this.dataFilter.values); slider.setPlayInterval(this.animationInterval); @@ -1219,17 +1219,17 @@ Graph3d.prototype._redrawSlider = function() { Graph3d.prototype._redrawInfo = function() { if (this.dataFilter) { var canvas = this.frame.canvas; - var ctx = canvas.getContext("2d"); + var ctx = canvas.getContext('2d'); - ctx.font = "14px arial"; // TODO: put in options - ctx.lineStyle = "gray"; - ctx.fillStyle = "gray"; - ctx.textAlign = "left"; - ctx.textBaseline = "top"; + ctx.font = '14px arial'; // TODO: put in options + ctx.lineStyle = 'gray'; + ctx.fillStyle = 'gray'; + ctx.textAlign = 'left'; + ctx.textBaseline = 'top'; var x = this.margin; var y = this.margin; - ctx.fillText(this.dataFilter.getLabel() + ": " + this.dataFilter.getSelectedValue(), x, y); + ctx.fillText(this.dataFilter.getLabel() + ': ' + this.dataFilter.getSelectedValue(), x, y); } }; @@ -1239,7 +1239,7 @@ Graph3d.prototype._redrawInfo = function() { */ Graph3d.prototype._redrawAxis = function() { var canvas = this.frame.canvas, - ctx = canvas.getContext("2d"), + ctx = canvas.getContext('2d'), from, to, step, prettyStep, text, xText, yText, zText, offset, xOffset, yOffset, @@ -1247,7 +1247,7 @@ Graph3d.prototype._redrawAxis = function() { // TODO: get the actual rendered style of the containerElement //ctx.font = this.containerElement.style.font; - ctx.font = 24 / this.camera.getArmLength() + "px arial"; + ctx.font = 24 / this.camera.getArmLength() + 'px arial'; // calculate the length for the short grid lines var gridLenX = 0.025 / this.scale.x; @@ -1296,20 +1296,20 @@ Graph3d.prototype._redrawAxis = function() { yText = (Math.cos(armAngle) > 0) ? this.yMin : this.yMax; text = this._convert3Dto2D(new Point3d(x, yText, this.zMin)); if (Math.cos(armAngle * 2) > 0) { - ctx.textAlign = "center"; - ctx.textBaseline = "top"; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; text.y += textMargin; } else if (Math.sin(armAngle * 2) < 0){ - ctx.textAlign = "right"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; } else { - ctx.textAlign = "left"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; } ctx.fillStyle = this.colorAxis; - ctx.fillText(" " + step.getCurrent() + " ", text.x, text.y); + ctx.fillText(' ' + step.getCurrent() + ' ', text.x, text.y); step.next(); } @@ -1353,20 +1353,20 @@ Graph3d.prototype._redrawAxis = function() { xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax; text = this._convert3Dto2D(new Point3d(xText, step.getCurrent(), this.zMin)); if (Math.cos(armAngle * 2) < 0) { - ctx.textAlign = "center"; - ctx.textBaseline = "top"; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; text.y += textMargin; } else if (Math.sin(armAngle * 2) > 0){ - ctx.textAlign = "right"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; } else { - ctx.textAlign = "left"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; } ctx.fillStyle = this.colorAxis; - ctx.fillText(" " + step.getCurrent() + " ", text.x, text.y); + ctx.fillText(' ' + step.getCurrent() + ' ', text.x, text.y); step.next(); } @@ -1390,10 +1390,10 @@ Graph3d.prototype._redrawAxis = function() { ctx.lineTo(from.x - textMargin, from.y); ctx.stroke(); - ctx.textAlign = "right"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; ctx.fillStyle = this.colorAxis; - ctx.fillText(step.getCurrent() + " ", from.x - 5, from.y); + ctx.fillText(step.getCurrent() + ' ', from.x - 5, from.y); step.next(); } @@ -1452,16 +1452,16 @@ Graph3d.prototype._redrawAxis = function() { yText = (Math.cos(armAngle) > 0) ? this.yMin - yOffset: this.yMax + yOffset; text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin)); if (Math.cos(armAngle * 2) > 0) { - ctx.textAlign = "center"; - ctx.textBaseline = "top"; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; } else if (Math.sin(armAngle * 2) < 0){ - ctx.textAlign = "right"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; } else { - ctx.textAlign = "left"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; } ctx.fillStyle = this.colorAxis; ctx.fillText(xLabel, text.x, text.y); @@ -1475,16 +1475,16 @@ Graph3d.prototype._redrawAxis = function() { yText = (this.yMin + this.yMax) / 2; text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin)); if (Math.cos(armAngle * 2) < 0) { - ctx.textAlign = "center"; - ctx.textBaseline = "top"; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; } else if (Math.sin(armAngle * 2) > 0){ - ctx.textAlign = "right"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; } else { - ctx.textAlign = "left"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'left'; + ctx.textBaseline = 'middle'; } ctx.fillStyle = this.colorAxis; ctx.fillText(yLabel, text.x, text.y); @@ -1498,8 +1498,8 @@ Graph3d.prototype._redrawAxis = function() { yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax; zText = (this.zMin + this.zMax) / 2; text = this._convert3Dto2D(new Point3d(xText, yText, zText)); - ctx.textAlign = "right"; - ctx.textBaseline = "middle"; + ctx.textAlign = 'right'; + ctx.textBaseline = 'middle'; ctx.fillStyle = this.colorAxis; ctx.fillText(zLabel, text.x - offset, text.y); } @@ -1529,17 +1529,17 @@ Graph3d.prototype._hsv2rgb = function(H, S, V) { default: R = 0; G = 0; B = 0; break; } - return "RGB(" + parseInt(R*255) + "," + parseInt(G*255) + "," + parseInt(B*255) + ")"; + return 'RGB(' + parseInt(R*255) + ',' + parseInt(G*255) + ',' + parseInt(B*255) + ')'; }; /** * Draw all datapoints as a grid - * This function can be used when the style is "grid" + * This function can be used when the style is 'grid' */ Graph3d.prototype._redrawDataGrid = function() { var canvas = this.frame.canvas, - ctx = canvas.getContext("2d"), + ctx = canvas.getContext('2d'), point, right, top, cross, i, topSideVisible, fillStyle, strokeStyle, lineWidth, @@ -1612,7 +1612,7 @@ Graph3d.prototype._redrawDataGrid = function() { } } else { - fillStyle = "gray"; + fillStyle = 'gray'; strokeStyle = this.colorAxis; } lineWidth = 0.5; @@ -1678,11 +1678,11 @@ Graph3d.prototype._redrawDataGrid = function() { /** * Draw all datapoints as dots. - * This function can be used when the style is "dot" or "dot-line" + * This function can be used when the style is 'dot' or 'dot-line' */ Graph3d.prototype._redrawDataDot = function() { var canvas = this.frame.canvas; - var ctx = canvas.getContext("2d"); + var ctx = canvas.getContext('2d'); var i; if (this.dataPoints === undefined || this.dataPoints.length <= 0) @@ -1774,11 +1774,11 @@ Graph3d.prototype._redrawDataDot = function() { /** * Draw all datapoints as bars. - * This function can be used when the style is "bar", "bar-color", or "bar-size" + * This function can be used when the style is 'bar', 'bar-color', or 'bar-size' */ Graph3d.prototype._redrawDataBar = function() { var canvas = this.frame.canvas; - var ctx = canvas.getContext("2d"); + var ctx = canvas.getContext('2d'); var i, j, surface, corners; if (this.dataPoints === undefined || this.dataPoints.length <= 0) @@ -1913,11 +1913,11 @@ Graph3d.prototype._redrawDataBar = function() { /** * Draw a line through all datapoints. - * This function can be used when the style is "line" + * This function can be used when the style is 'line' */ Graph3d.prototype._redrawDataLine = function() { var canvas = this.frame.canvas, - ctx = canvas.getContext("2d"), + ctx = canvas.getContext('2d'), point, i; if (this.dataPoints === undefined || this.dataPoints.length <= 0) @@ -1937,7 +1937,7 @@ Graph3d.prototype._redrawDataLine = function() { point = this.dataPoints[0]; ctx.lineWidth = 1; // TODO: make customizable - ctx.strokeStyle = "blue"; // TODO: make customizable + ctx.strokeStyle = 'blue'; // TODO: make customizable ctx.beginPath(); ctx.moveTo(point.screen.x, point.screen.y); } @@ -1988,8 +1988,8 @@ Graph3d.prototype._onMouseDown = function(event) { var me = this; this.onmousemove = function (event) {me._onMouseMove(event);}; this.onmouseup = function (event) {me._onMouseUp(event);}; - G3DaddEventListener(document, "mousemove", me.onmousemove); - G3DaddEventListener(document, "mouseup", me.onmouseup); + G3DaddEventListener(document, 'mousemove', me.onmousemove); + G3DaddEventListener(document, 'mouseup', me.onmouseup); G3DpreventDefault(event); }; @@ -2050,8 +2050,8 @@ Graph3d.prototype._onMouseUp = function (event) { this.leftButtonDown = false; // remove event listeners here - G3DremoveEventListener(document, "mousemove", this.onmousemove); - G3DremoveEventListener(document, "mouseup", this.onmouseup); + G3DremoveEventListener(document, 'mousemove', this.onmousemove); + G3DremoveEventListener(document, 'mouseup', this.onmouseup); G3DpreventDefault(event); }; @@ -2115,8 +2115,8 @@ Graph3d.prototype._onTouchStart = function(event) { var me = this; this.ontouchmove = function (event) {me._onTouchMove(event);}; this.ontouchend = function (event) {me._onTouchEnd(event);}; - G3DaddEventListener(document, "touchmove", me.ontouchmove); - G3DaddEventListener(document, "touchend", me.ontouchend); + G3DaddEventListener(document, 'touchmove', me.ontouchmove); + G3DaddEventListener(document, 'touchend', me.ontouchend); this._onMouseDown(event); }; @@ -2134,8 +2134,8 @@ Graph3d.prototype._onTouchMove = function(event) { Graph3d.prototype._onTouchEnd = function(event) { this.touchDown = false; - G3DremoveEventListener(document, "touchmove", this.ontouchmove); - G3DremoveEventListener(document, "touchend", this.ontouchend); + G3DremoveEventListener(document, 'touchmove', this.ontouchmove); + G3DremoveEventListener(document, 'touchend', this.ontouchend); this._onMouseUp(event); }; @@ -2376,8 +2376,8 @@ Graph3d.prototype._hideTooltip = function () { /** * Add and event listener. Works for all browsers * @param {Element} element An html element - * @param {string} action The action, for example "click", - * without the prefix "on" + * @param {string} action The action, for example 'click', + * without the prefix 'on' * @param {function} listener The callback function to be executed * @param {boolean} useCapture */ @@ -2386,20 +2386,20 @@ G3DaddEventListener = function(element, action, listener, useCapture) { if (useCapture === undefined) useCapture = false; - if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) { - action = "DOMMouseScroll"; // For Firefox + if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) { + action = 'DOMMouseScroll'; // For Firefox } element.addEventListener(action, listener, useCapture); } else { - element.attachEvent("on" + action, listener); // IE browsers + element.attachEvent('on' + action, listener); // IE browsers } }; /** * Remove an event listener from an element * @param {Element} element An html dom element - * @param {string} action The name of the event, for example "mousedown" + * @param {string} action The name of the event, for example 'mousedown' * @param {function} listener The listener function * @param {boolean} useCapture */ @@ -2409,14 +2409,14 @@ G3DremoveEventListener = function(element, action, listener, useCapture) { if (useCapture === undefined) useCapture = false; - if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) { - action = "DOMMouseScroll"; // For Firefox + if (action === 'mousewheel' && navigator.userAgent.indexOf('Firefox') >= 0) { + action = 'DOMMouseScroll'; // For Firefox } element.removeEventListener(action, listener, useCapture); } else { // IE browsers - element.detachEvent("on" + action, listener); + element.detachEvent('on' + action, listener); } }; @@ -2657,7 +2657,7 @@ Filter.prototype.getValues = function() { */ Filter.prototype.getValue = function(index) { if (index >= this.values.length) - throw "Error: index out of range"; + throw 'Error: index out of range'; return this.values[index]; }; @@ -2710,7 +2710,7 @@ Filter.prototype.setOnLoadCallback = function(callback) { */ Filter.prototype.selectValue = function(index) { if (index >= this.values.length) - throw "Error: index out of range"; + throw 'Error: index out of range'; this.index = index; this.value = this.values[index]; @@ -2732,13 +2732,13 @@ Filter.prototype.loadInBackground = function(index) { // create a progress box if (frame.progress === undefined) { - frame.progress = document.createElement("DIV"); - frame.progress.style.position = "absolute"; - frame.progress.style.color = "gray"; + frame.progress = document.createElement('DIV'); + frame.progress.style.position = 'absolute'; + frame.progress.style.color = 'gray'; frame.appendChild(frame.progress); } var progress = this.getLoadedProgress(); - frame.progress.innerHTML = "Loading animation... " + progress + "%"; + frame.progress.innerHTML = 'Loading animation... ' + progress + '%'; // TODO: this is no nice solution... frame.progress.style.bottom = Graph3d.px(60); // TODO: use height of slider frame.progress.style.left = Graph3d.px(10); @@ -2914,51 +2914,51 @@ StepNumber.prototype.end = function () { */ function Slider(container, options) { if (container === undefined) { - throw "Error: No container element defined"; + throw 'Error: No container element defined'; } this.container = container; this.visible = (options && options.visible != undefined) ? options.visible : true; if (this.visible) { - this.frame = document.createElement("DIV"); - //this.frame.style.backgroundColor = "#E5E5E5"; - this.frame.style.width = "100%"; - this.frame.style.position = "relative"; + this.frame = document.createElement('DIV'); + //this.frame.style.backgroundColor = '#E5E5E5'; + this.frame.style.width = '100%'; + this.frame.style.position = 'relative'; this.container.appendChild(this.frame); - this.frame.prev = document.createElement("INPUT"); - this.frame.prev.type = "BUTTON"; - this.frame.prev.value = "Prev"; + this.frame.prev = document.createElement('INPUT'); + this.frame.prev.type = 'BUTTON'; + this.frame.prev.value = 'Prev'; this.frame.appendChild(this.frame.prev); - this.frame.play = document.createElement("INPUT"); - this.frame.play.type = "BUTTON"; - this.frame.play.value = "Play"; + this.frame.play = document.createElement('INPUT'); + this.frame.play.type = 'BUTTON'; + this.frame.play.value = 'Play'; this.frame.appendChild(this.frame.play); - this.frame.next = document.createElement("INPUT"); - this.frame.next.type = "BUTTON"; - this.frame.next.value = "Next"; + this.frame.next = document.createElement('INPUT'); + this.frame.next.type = 'BUTTON'; + this.frame.next.value = 'Next'; this.frame.appendChild(this.frame.next); - this.frame.bar = document.createElement("INPUT"); - this.frame.bar.type = "BUTTON"; - this.frame.bar.style.position = "absolute"; - this.frame.bar.style.border = "1px solid red"; - this.frame.bar.style.width = "100px"; - this.frame.bar.style.height = "6px"; - this.frame.bar.style.borderRadius = "2px"; - this.frame.bar.style.MozBorderRadius = "2px"; - this.frame.bar.style.border = "1px solid #7F7F7F"; - this.frame.bar.style.backgroundColor = "#E5E5E5"; + this.frame.bar = document.createElement('INPUT'); + this.frame.bar.type = 'BUTTON'; + this.frame.bar.style.position = 'absolute'; + this.frame.bar.style.border = '1px solid red'; + this.frame.bar.style.width = '100px'; + this.frame.bar.style.height = '6px'; + this.frame.bar.style.borderRadius = '2px'; + this.frame.bar.style.MozBorderRadius = '2px'; + this.frame.bar.style.border = '1px solid #7F7F7F'; + this.frame.bar.style.backgroundColor = '#E5E5E5'; this.frame.appendChild(this.frame.bar); - this.frame.slide = document.createElement("INPUT"); - this.frame.slide.type = "BUTTON"; - this.frame.slide.style.margin = "0px"; - this.frame.slide.value = " "; - this.frame.slide.style.position = "relative"; - this.frame.slide.style.left = "-100px"; + this.frame.slide = document.createElement('INPUT'); + this.frame.slide.type = 'BUTTON'; + this.frame.slide.style.margin = '0px'; + this.frame.slide.value = ' '; + this.frame.slide.style.position = 'relative'; + this.frame.slide.style.left = '-100px'; this.frame.appendChild(this.frame.slide); // create events @@ -3051,7 +3051,7 @@ Slider.prototype.play = function() { this.playNext(); if (this.frame) { - this.frame.play.value = "Stop"; + this.frame.play.value = 'Stop'; } }; @@ -3063,7 +3063,7 @@ Slider.prototype.stop = function() { this.playTimeout = undefined; if (this.frame) { - this.frame.play.value = "Play"; + this.frame.play.value = 'Play'; } }; @@ -3118,15 +3118,15 @@ Slider.prototype.redraw = function() { if (this.frame) { // resize the bar this.frame.bar.style.top = (this.frame.clientHeight/2 - - this.frame.bar.offsetHeight/2) + "px"; + this.frame.bar.offsetHeight/2) + 'px'; this.frame.bar.style.width = (this.frame.clientWidth - this.frame.prev.clientWidth - this.frame.play.clientWidth - - this.frame.next.clientWidth - 30) + "px"; + this.frame.next.clientWidth - 30) + 'px'; // position the slider button var left = this.indexToLeft(this.index); - this.frame.slide.style.left = (left) + "px"; + this.frame.slide.style.left = (left) + 'px'; } }; @@ -3156,7 +3156,7 @@ Slider.prototype.setIndex = function(index) { this.onChange(); } else { - throw "Error: index out of range"; + throw 'Error: index out of range'; } }; @@ -3194,8 +3194,8 @@ Slider.prototype._onMouseDown = function(event) { var me = this; this.onmousemove = function (event) {me._onMouseMove(event);}; this.onmouseup = function (event) {me._onMouseUp(event);}; - G3DaddEventListener(document, "mousemove", this.onmousemove); - G3DaddEventListener(document, "mouseup", this.onmouseup); + G3DaddEventListener(document, 'mousemove', this.onmousemove); + G3DaddEventListener(document, 'mouseup', this.onmouseup); G3DpreventDefault(event); }; @@ -3240,8 +3240,8 @@ Slider.prototype._onMouseUp = function (event) { this.frame.style.cursor = 'auto'; // remove event listeners - G3DremoveEventListener(document, "mousemove", this.onmousemove); - G3DremoveEventListener(document, "mouseup", this.onmouseup); + G3DremoveEventListener(document, 'mousemove', this.onmousemove); + G3DremoveEventListener(document, 'mouseup', this.onmouseup); G3DpreventDefault(); };