From: Evert Timberg Date: Thu, 5 May 2016 02:08:55 +0000 (-0400) Subject: Size reduction for elements X-Git-Tag: v2.1.1~4^2~1 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=425813717175dceec06c1cfdc8d08716e61f60e1;p=thirdparty%2FChart.js.git Size reduction for elements --- diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js index 34ff8111f..7b6d96a81 100644 --- a/src/elements/element.arc.js +++ b/src/elements/element.arc.js @@ -2,10 +2,11 @@ module.exports = function(Chart, moment) { - var helpers = Chart.helpers; + var helpers = Chart.helpers, + globalOpts = Chart.defaults.global; - Chart.defaults.global.elements.arc = { - backgroundColor: Chart.defaults.global.defaultColor, + globalOpts.elements.arc = { + backgroundColor: globalOpts.defaultColor, borderColor: "#fff", borderWidth: 2 }; @@ -21,14 +22,15 @@ module.exports = function(Chart, moment) { } }, inRange: function(chartX, chartY) { - var vm = this._view; if (vm) { var pointRelativePosition = helpers.getAngleFromPoint(vm, { - x: chartX, - y: chartY - }); + x: chartX, + y: chartY + }), + angle = pointRelativePosition.angle, + distance = pointRelativePosition.distance; //Sanitise angle range var startAngle = vm.startAngle; @@ -36,16 +38,16 @@ module.exports = function(Chart, moment) { while (endAngle < startAngle) { endAngle += 2.0 * Math.PI; } - while (pointRelativePosition.angle > endAngle) { - pointRelativePosition.angle -= 2.0 * Math.PI; + while (angle > endAngle) { + angle -= 2.0 * Math.PI; } - while (pointRelativePosition.angle < startAngle) { - pointRelativePosition.angle += 2.0 * Math.PI; + while (angle < startAngle) { + angle += 2.0 * Math.PI; } //Check if within the range of the open/close angle - var betweenAngles = (pointRelativePosition.angle >= startAngle && pointRelativePosition.angle <= endAngle), - withinRadius = (pointRelativePosition.distance >= vm.innerRadius && pointRelativePosition.distance <= vm.outerRadius); + var betweenAngles = (angle >= startAngle && angle <= endAngle), + withinRadius = (distance >= vm.innerRadius && distance <= vm.outerRadius); return (betweenAngles && withinRadius); } else { @@ -64,14 +66,15 @@ module.exports = function(Chart, moment) { }, draw: function() { - var ctx = this._chart.ctx; - var vm = this._view; + var ctx = this._chart.ctx, + vm = this._view, + sA = vm.startAngle, + eA = vm.endAngle; ctx.beginPath(); - ctx.arc(vm.x, vm.y, vm.outerRadius, vm.startAngle, vm.endAngle); - - ctx.arc(vm.x, vm.y, vm.innerRadius, vm.endAngle, vm.startAngle, true); + ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA); + ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true); ctx.closePath(); ctx.strokeStyle = vm.borderColor; diff --git a/src/elements/element.point.js b/src/elements/element.point.js index 90a97ca7b..e7dac76b4 100644 --- a/src/elements/element.point.js +++ b/src/elements/element.point.js @@ -2,14 +2,15 @@ module.exports = function(Chart) { - var helpers = Chart.helpers; + var helpers = Chart.helpers, + globalOpts = Chart.defaults.global; - Chart.defaults.global.elements.point = { + globalOpts.elements.point = { radius: 3, pointStyle: 'circle', - backgroundColor: Chart.defaults.global.defaultColor, + backgroundColor: globalOpts.defaultColor, borderWidth: 1, - borderColor: Chart.defaults.global.defaultColor, + borderColor: globalOpts.defaultColor, // Hover hitRadius: 1, hoverRadius: 4, @@ -20,22 +21,11 @@ module.exports = function(Chart) { Chart.elements.Point = Chart.Element.extend({ inRange: function(mouseX, mouseY) { var vm = this._view; - - if (vm) { - var hoverRange = vm.hitRadius + vm.radius; - return ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(hoverRange, 2)); - } else { - return false; - } + return vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(vm.hitRadius + vm.radius, 2)) : false }, inLabelRange: function(mouseX) { var vm = this._view; - - if (vm) { - return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hitRadius, 2)); - } else { - return false; - } + return vm ? (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hitRadius, 2)) : false; }, tooltipPosition: function() { var vm = this._view; @@ -46,17 +36,18 @@ module.exports = function(Chart) { }; }, draw: function() { - - var vm = this._view; + var vm = this._view, + x = vm.x, + y = vm.y; var ctx = this._chart.ctx; - if (vm.skip) { return; } - if (typeof vm.pointStyle === 'object' && ((vm.pointStyle.toString() === '[object HTMLImageElement]') || (vm.pointStyle.toString() === '[object HTMLCanvasElement]'))) { - ctx.drawImage(vm.pointStyle, vm.x - vm.pointStyle.width / 2, vm.y - vm.pointStyle.height / 2); + var pointStyle = vm.pointStyle; + if (typeof pointStyle === 'object' && ((pointStyle.toString() === '[object HTMLImageElement]') || (pointStyle.toString() === '[object HTMLCanvasElement]'))) { + ctx.drawImage(pointStyle, x - pointStyle.width / 2, y - pointStyle.height / 2); return; } @@ -69,79 +60,80 @@ module.exports = function(Chart) { var radius = vm.radius; - var xOffset; - var yOffset; + var xOffset, + yOffset; - switch (vm.pointStyle) { + switch (pointStyle) { // Default includes circle - default: ctx.beginPath(); - ctx.arc(vm.x, vm.y, radius, 0, Math.PI * 2); - ctx.closePath(); - ctx.fill(); - break; + default: + ctx.beginPath(); + ctx.arc(x, y, radius, 0, Math.PI * 2); + ctx.closePath(); + ctx.fill(); + break; case 'triangle': - ctx.beginPath(); + ctx.beginPath(); var edgeLength = 3 * radius / Math.sqrt(3); var height = edgeLength * Math.sqrt(3) / 2; - ctx.moveTo(vm.x - edgeLength / 2, vm.y + height / 3); - ctx.lineTo(vm.x + edgeLength / 2, vm.y + height / 3); - ctx.lineTo(vm.x, vm.y - 2 * height / 3); + ctx.moveTo(x - edgeLength / 2, y + height / 3); + ctx.lineTo(x + edgeLength / 2, y + height / 3); + ctx.lineTo(x, y - 2 * height / 3); ctx.closePath(); ctx.fill(); break; case 'rect': - ctx.fillRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius); - ctx.strokeRect(vm.x - 1 / Math.SQRT2 * radius, vm.y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius); + ctx.fillRect(x - 1 / Math.SQRT2 * radius, y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius); + ctx.strokeRect(x - 1 / Math.SQRT2 * radius, y - 1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius); break; case 'rectRot': - ctx.translate(vm.x, vm.y); + ctx.translate(x, y); ctx.rotate(Math.PI / 4); ctx.fillRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius); ctx.strokeRect(-1 / Math.SQRT2 * radius, -1 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius, 2 / Math.SQRT2 * radius); ctx.setTransform(1, 0, 0, 1, 0, 0); break; case 'cross': - ctx.beginPath(); - ctx.moveTo(vm.x, vm.y + radius); - ctx.lineTo(vm.x, vm.y - radius); - ctx.moveTo(vm.x - radius, vm.y); - ctx.lineTo(vm.x + radius, vm.y); + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y - radius); + ctx.moveTo(x - radius, y); + ctx.lineTo(x + radius, y); ctx.closePath(); break; case 'crossRot': - ctx.beginPath(); + ctx.beginPath(); xOffset = Math.cos(Math.PI / 4) * radius; yOffset = Math.sin(Math.PI / 4) * radius; - ctx.moveTo(vm.x - xOffset, vm.y - yOffset); - ctx.lineTo(vm.x + xOffset, vm.y + yOffset); - ctx.moveTo(vm.x - xOffset, vm.y + yOffset); - ctx.lineTo(vm.x + xOffset, vm.y - yOffset); + ctx.moveTo(x - xOffset, y - yOffset); + ctx.lineTo(x + xOffset, y + yOffset); + ctx.moveTo(x - xOffset, y + yOffset); + ctx.lineTo(x + xOffset, y - yOffset); ctx.closePath(); break; case 'star': - ctx.beginPath(); - ctx.moveTo(vm.x, vm.y + radius); - ctx.lineTo(vm.x, vm.y - radius); - ctx.moveTo(vm.x - radius, vm.y); - ctx.lineTo(vm.x + radius, vm.y); + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y - radius); + ctx.moveTo(x - radius, y); + ctx.lineTo(x + radius, y); xOffset = Math.cos(Math.PI / 4) * radius; yOffset = Math.sin(Math.PI / 4) * radius; - ctx.moveTo(vm.x - xOffset, vm.y - yOffset); - ctx.lineTo(vm.x + xOffset, vm.y + yOffset); - ctx.moveTo(vm.x - xOffset, vm.y + yOffset); - ctx.lineTo(vm.x + xOffset, vm.y - yOffset); + ctx.moveTo(x - xOffset, y - yOffset); + ctx.lineTo(x + xOffset, y + yOffset); + ctx.moveTo(x - xOffset, y + yOffset); + ctx.lineTo(x + xOffset, y - yOffset); ctx.closePath(); break; case 'line': - ctx.beginPath(); - ctx.moveTo(vm.x - radius, vm.y); - ctx.lineTo(vm.x + radius, vm.y); + ctx.beginPath(); + ctx.moveTo(x - radius, y); + ctx.lineTo(x + radius, y); ctx.closePath(); break; case 'dash': - ctx.beginPath(); - ctx.moveTo(vm.x, vm.y); - ctx.lineTo(vm.x + radius, vm.y); + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x + radius, y); ctx.closePath(); break; } diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js index 63f426688..944d5e38a 100644 --- a/src/elements/element.rectangle.js +++ b/src/elements/element.rectangle.js @@ -2,18 +2,18 @@ module.exports = function(Chart) { - var helpers = Chart.helpers; + var helpers = Chart.helpers, + globalOpts = Chart.defaults.global; - Chart.defaults.global.elements.rectangle = { - backgroundColor: Chart.defaults.global.defaultColor, + globalOpts.elements.rectangle = { + backgroundColor: globalOpts.defaultColor, borderWidth: 0, - borderColor: Chart.defaults.global.defaultColor, + borderColor: globalOpts.defaultColor, borderSkipped: 'bottom' }; Chart.elements.Rectangle = Chart.Element.extend({ draw: function() { - var ctx = this._chart.ctx; var vm = this._view; @@ -32,7 +32,6 @@ module.exports = function(Chart) { } ctx.beginPath(); - ctx.fillStyle = vm.backgroundColor; ctx.strokeStyle = vm.borderColor; ctx.lineWidth = vm.borderWidth; @@ -73,26 +72,15 @@ module.exports = function(Chart) { }, inRange: function(mouseX, mouseY) { var vm = this._view; - var inRange = false; - - if (vm) { - if (vm.y < vm.base) { - inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.y && mouseY <= vm.base); - } else { - inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y); - } - } - - return inRange; + return vm ? + (vm.y < vm.base ? + (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.y && mouseY <= vm.base) : + (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y)) : + false; }, inLabelRange: function(mouseX) { var vm = this._view; - - if (vm) { - return (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2); - } else { - return false; - } + return vm ? (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) : false; }, tooltipPosition: function() { var vm = this._view;