|
|
@ -139,7 +139,7 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
// Network
|
|
|
|
exports.Network = __webpack_require__(53); |
|
|
|
exports.network = { |
|
|
|
Images: __webpack_require__(57), |
|
|
|
Images: __webpack_require__(54), |
|
|
|
dotparser: __webpack_require__(55), |
|
|
|
gephiParser: __webpack_require__(56) |
|
|
|
}; |
|
|
@ -23293,7 +23293,7 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; }; |
|
|
|
|
|
|
|
// Load custom shapes into CanvasRenderingContext2D
|
|
|
|
__webpack_require__(54); |
|
|
|
__webpack_require__(57); |
|
|
|
|
|
|
|
var Emitter = __webpack_require__(11); |
|
|
|
var Hammer = __webpack_require__(19); |
|
|
@ -23302,7 +23302,7 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
var DataView = __webpack_require__(9); |
|
|
|
var dotparser = __webpack_require__(55); |
|
|
|
var gephiParser = __webpack_require__(56); |
|
|
|
var Images = __webpack_require__(57); |
|
|
|
var Images = __webpack_require__(54); |
|
|
|
var Activator = __webpack_require__(38); |
|
|
|
var locales = __webpack_require__(58); |
|
|
|
|
|
|
@ -23547,8 +23547,6 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
*/ |
|
|
|
Network.prototype.setOptions = function (options) { |
|
|
|
if (options !== undefined) { |
|
|
|
//this.groups.useDefaultGroups = this.constants.useDefaultGroups;
|
|
|
|
|
|
|
|
// the hierarchical system can adapt the edges and the physics to it's own options because not all combinations work with the hierarichical system.
|
|
|
|
options = this.layoutEngine.setOptions(options.layout, options); |
|
|
|
|
|
|
@ -23563,20 +23561,8 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
this.selectionHandler.setOptions(options.selection); |
|
|
|
this.clustering.setOptions(options.clustering); |
|
|
|
|
|
|
|
//
|
|
|
|
//
|
|
|
|
//if (options.tooltip) {
|
|
|
|
// for (prop in options.tooltip) {
|
|
|
|
// if (options.tooltip.hasOwnProperty(prop)) {
|
|
|
|
// this.constants.tooltip[prop] = options.tooltip[prop];
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// if (options.tooltip.color) {
|
|
|
|
// this.constants.tooltip.color = util.parseColor(options.tooltip.color);
|
|
|
|
// }
|
|
|
|
//}
|
|
|
|
|
|
|
|
if ("clickToUse" in options) { |
|
|
|
if (options.clickToUse !== undefined) { |
|
|
|
if (options.clickToUse === true) { |
|
|
|
if (this.activator === undefined) { |
|
|
|
this.activator = new Activator(this.frame); |
|
|
@ -23826,276 +23812,71 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
"use strict"; |
|
|
|
|
|
|
|
/** |
|
|
|
* Canvas shapes used by Network |
|
|
|
* @class Images |
|
|
|
* This class loads images and keeps them stored. |
|
|
|
*/ |
|
|
|
if (typeof CanvasRenderingContext2D !== "undefined") { |
|
|
|
/** |
|
|
|
* Draw a circle shape |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.circle = function (x, y, r) { |
|
|
|
this.beginPath(); |
|
|
|
this.arc(x, y, r, 0, 2 * Math.PI, false); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Draw a square shape |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r size, width and height of the square |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.square = function (x, y, r) { |
|
|
|
this.beginPath(); |
|
|
|
this.rect(x - r, y - r, r * 2, r * 2); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Draw a triangle shape |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r radius, half the length of the sides of the triangle |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.triangle = function (x, y, r) { |
|
|
|
// http://en.wikipedia.org/wiki/Equilateral_triangle
|
|
|
|
this.beginPath(); |
|
|
|
|
|
|
|
// the change in radius and the offset is here to center the shape
|
|
|
|
r *= 1.15; |
|
|
|
y += 0.275 * r; |
|
|
|
|
|
|
|
var s = r * 2; |
|
|
|
var s2 = s / 2; |
|
|
|
var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
|
|
|
|
var h = Math.sqrt(s * s - s2 * s2); // height
|
|
|
|
|
|
|
|
|
|
|
|
this.moveTo(x, y - (h - ir)); |
|
|
|
this.lineTo(x + s2, y + ir); |
|
|
|
this.lineTo(x - s2, y + ir); |
|
|
|
this.lineTo(x, y - (h - ir)); |
|
|
|
this.closePath(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Draw a triangle shape in downward orientation |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r radius |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.triangleDown = function (x, y, r) { |
|
|
|
// http://en.wikipedia.org/wiki/Equilateral_triangle
|
|
|
|
this.beginPath(); |
|
|
|
|
|
|
|
// the change in radius and the offset is here to center the shape
|
|
|
|
r *= 1.15; |
|
|
|
y -= 0.275 * r; |
|
|
|
|
|
|
|
var s = r * 2; |
|
|
|
var s2 = s / 2; |
|
|
|
var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
|
|
|
|
var h = Math.sqrt(s * s - s2 * s2); // height
|
|
|
|
|
|
|
|
this.moveTo(x, y + (h - ir)); |
|
|
|
this.lineTo(x + s2, y - ir); |
|
|
|
this.lineTo(x - s2, y - ir); |
|
|
|
this.lineTo(x, y + (h - ir)); |
|
|
|
this.closePath(); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Draw a star shape, a star with 5 points |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r radius, half the length of the sides of the triangle |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.star = function (x, y, r) { |
|
|
|
// http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
|
|
|
|
this.beginPath(); |
|
|
|
|
|
|
|
// the change in radius and the offset is here to center the shape
|
|
|
|
r *= 0.82; |
|
|
|
y += 0.1 * r; |
|
|
|
|
|
|
|
for (var n = 0; n < 10; n++) { |
|
|
|
var radius = n % 2 === 0 ? r * 1.3 : r * 0.5; |
|
|
|
this.lineTo(x + radius * Math.sin(n * 2 * Math.PI / 10), y - radius * Math.cos(n * 2 * Math.PI / 10)); |
|
|
|
} |
|
|
|
|
|
|
|
this.closePath(); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Draw a Diamond shape |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r radius, half the length of the sides of the triangle |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.diamond = function (x, y, r) { |
|
|
|
// http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
|
|
|
|
this.beginPath(); |
|
|
|
|
|
|
|
this.lineTo(x, y + r); |
|
|
|
this.lineTo(x + r, y); |
|
|
|
this.lineTo(x, y - r); |
|
|
|
this.lineTo(x - r, y); |
|
|
|
|
|
|
|
|
|
|
|
this.closePath(); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
|
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) { |
|
|
|
var r2d = Math.PI / 180; |
|
|
|
if (w - 2 * r < 0) { |
|
|
|
r = w / 2; |
|
|
|
} //ensure that the radius isn't too large for x
|
|
|
|
if (h - 2 * r < 0) { |
|
|
|
r = h / 2; |
|
|
|
} //ensure that the radius isn't too large for y
|
|
|
|
this.beginPath(); |
|
|
|
this.moveTo(x + r, y); |
|
|
|
this.lineTo(x + w - r, y); |
|
|
|
this.arc(x + w - r, y + r, r, r2d * 270, r2d * 360, false); |
|
|
|
this.lineTo(x + w, y + h - r); |
|
|
|
this.arc(x + w - r, y + h - r, r, 0, r2d * 90, false); |
|
|
|
this.lineTo(x + r, y + h); |
|
|
|
this.arc(x + r, y + h - r, r, r2d * 90, r2d * 180, false); |
|
|
|
this.lineTo(x, y + r); |
|
|
|
this.arc(x + r, y + r, r, r2d * 180, r2d * 270, false); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.ellipse = function (x, y, w, h) { |
|
|
|
var kappa = 0.5522848, |
|
|
|
ox = w / 2 * kappa, |
|
|
|
// control point offset horizontal
|
|
|
|
oy = h / 2 * kappa, |
|
|
|
// control point offset vertical
|
|
|
|
xe = x + w, |
|
|
|
// x-end
|
|
|
|
ye = y + h, |
|
|
|
// y-end
|
|
|
|
xm = x + w / 2, |
|
|
|
// x-middle
|
|
|
|
ym = y + h / 2; // y-middle
|
|
|
|
|
|
|
|
this.beginPath(); |
|
|
|
this.moveTo(x, ym); |
|
|
|
this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); |
|
|
|
this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); |
|
|
|
this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); |
|
|
|
this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.database = function (x, y, w, h) { |
|
|
|
var f = 1 / 3; |
|
|
|
var wEllipse = w; |
|
|
|
var hEllipse = h * f; |
|
|
|
|
|
|
|
var kappa = 0.5522848, |
|
|
|
ox = wEllipse / 2 * kappa, |
|
|
|
// control point offset horizontal
|
|
|
|
oy = hEllipse / 2 * kappa, |
|
|
|
// control point offset vertical
|
|
|
|
xe = x + wEllipse, |
|
|
|
// x-end
|
|
|
|
ye = y + hEllipse, |
|
|
|
// y-end
|
|
|
|
xm = x + wEllipse / 2, |
|
|
|
// x-middle
|
|
|
|
ym = y + hEllipse / 2, |
|
|
|
// y-middle
|
|
|
|
ymb = y + (h - hEllipse / 2), |
|
|
|
// y-midlle, bottom ellipse
|
|
|
|
yeb = y + h; // y-end, bottom ellipse
|
|
|
|
|
|
|
|
this.beginPath(); |
|
|
|
this.moveTo(xe, ym); |
|
|
|
|
|
|
|
this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); |
|
|
|
this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); |
|
|
|
|
|
|
|
this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); |
|
|
|
this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); |
|
|
|
|
|
|
|
this.lineTo(xe, ymb); |
|
|
|
|
|
|
|
this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb); |
|
|
|
this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb); |
|
|
|
|
|
|
|
this.lineTo(x, ym); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* Draw an arrow point (no line) |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.arrow = function (x, y, angle, length) { |
|
|
|
// tail
|
|
|
|
var xt = x - length * Math.cos(angle); |
|
|
|
var yt = y - length * Math.sin(angle); |
|
|
|
function Images(callback) { |
|
|
|
this.images = {}; |
|
|
|
this.imageBroken = {}; |
|
|
|
this.callback = callback; |
|
|
|
} |
|
|
|
|
|
|
|
// inner tail
|
|
|
|
// TODO: allow to customize different shapes
|
|
|
|
var xi = x - length * 0.9 * Math.cos(angle); |
|
|
|
var yi = y - length * 0.9 * Math.sin(angle); |
|
|
|
/** |
|
|
|
* |
|
|
|
* @param {string} url Url of the image |
|
|
|
* @param {string} url Url of an image to use if the url image is not found |
|
|
|
* @return {Image} img The image object |
|
|
|
*/ |
|
|
|
Images.prototype.load = function (url, brokenUrl) { |
|
|
|
var img = this.images[url]; // make a pointer
|
|
|
|
if (img === undefined) { |
|
|
|
// create the image
|
|
|
|
var me = this; |
|
|
|
img = new Image(); |
|
|
|
img.onload = function () { |
|
|
|
// IE11 fix -- thanks dponch!
|
|
|
|
if (this.width == 0) { |
|
|
|
document.body.appendChild(this); |
|
|
|
this.width = this.offsetWidth; |
|
|
|
this.height = this.offsetHeight; |
|
|
|
document.body.removeChild(this); |
|
|
|
} |
|
|
|
|
|
|
|
// left
|
|
|
|
var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI); |
|
|
|
var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI); |
|
|
|
if (me.callback) { |
|
|
|
me.images[url] = img; |
|
|
|
me.callback(this); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// right
|
|
|
|
var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI); |
|
|
|
var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI); |
|
|
|
img.onerror = function () { |
|
|
|
if (brokenUrl === undefined) { |
|
|
|
console.error("Could not load image:", url); |
|
|
|
delete this.src; |
|
|
|
if (me.callback) { |
|
|
|
me.callback(this); |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (me.imageBroken[url] === true) { |
|
|
|
console.error("Could not load brokenImage:", brokenUrl); |
|
|
|
delete this.src; |
|
|
|
if (me.callback) { |
|
|
|
me.callback(this); |
|
|
|
} |
|
|
|
} else { |
|
|
|
console.error("Could not load image:", url); |
|
|
|
this.src = brokenUrl; |
|
|
|
me.imageBroken[url] = true; |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
this.beginPath(); |
|
|
|
this.moveTo(x, y); |
|
|
|
this.lineTo(xl, yl); |
|
|
|
this.lineTo(xi, yi); |
|
|
|
this.lineTo(xr, yr); |
|
|
|
this.closePath(); |
|
|
|
}; |
|
|
|
img.src = url; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* Sets up the dashedLine functionality for drawing |
|
|
|
* Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
|
|
|
|
* @author David Jordan |
|
|
|
* @date 2012-08-08 |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, dashArray) { |
|
|
|
if (!dashArray) dashArray = [10, 5]; |
|
|
|
if (dashLength == 0) dashLength = 0.001; // Hack for Safari
|
|
|
|
var dashCount = dashArray.length; |
|
|
|
this.moveTo(x, y); |
|
|
|
var dx = x2 - x, |
|
|
|
dy = y2 - y; |
|
|
|
var slope = dy / dx; |
|
|
|
var distRemaining = Math.sqrt(dx * dx + dy * dy); |
|
|
|
var dashIndex = 0, |
|
|
|
draw = true; |
|
|
|
while (distRemaining >= 0.1) { |
|
|
|
var dashLength = dashArray[dashIndex++ % dashCount]; |
|
|
|
if (dashLength > distRemaining) dashLength = distRemaining; |
|
|
|
var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope)); |
|
|
|
if (dx < 0) xStep = -xStep; |
|
|
|
x += xStep; |
|
|
|
y += slope * xStep; |
|
|
|
this[draw ? "lineTo" : "moveTo"](x, y); |
|
|
|
distRemaining -= dashLength; |
|
|
|
draw = !draw; |
|
|
|
} |
|
|
|
}; |
|
|
|
return img; |
|
|
|
}; |
|
|
|
|
|
|
|
// TODO: add diamond shape
|
|
|
|
} |
|
|
|
module.exports = Images; |
|
|
|
|
|
|
|
/***/ }, |
|
|
|
/* 55 */ |
|
|
@ -24991,71 +24772,276 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
"use strict"; |
|
|
|
|
|
|
|
/** |
|
|
|
* @class Images |
|
|
|
* This class loads images and keeps them stored. |
|
|
|
* Canvas shapes used by Network |
|
|
|
*/ |
|
|
|
function Images(callback) { |
|
|
|
this.images = {}; |
|
|
|
this.imageBroken = {}; |
|
|
|
this.callback = callback; |
|
|
|
} |
|
|
|
if (typeof CanvasRenderingContext2D !== "undefined") { |
|
|
|
/** |
|
|
|
* Draw a circle shape |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.circle = function (x, y, r) { |
|
|
|
this.beginPath(); |
|
|
|
this.arc(x, y, r, 0, 2 * Math.PI, false); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* |
|
|
|
* @param {string} url Url of the image |
|
|
|
* @param {string} url Url of an image to use if the url image is not found |
|
|
|
* @return {Image} img The image object |
|
|
|
*/ |
|
|
|
Images.prototype.load = function (url, brokenUrl) { |
|
|
|
var img = this.images[url]; // make a pointer
|
|
|
|
if (img === undefined) { |
|
|
|
// create the image
|
|
|
|
var me = this; |
|
|
|
img = new Image(); |
|
|
|
img.onload = function () { |
|
|
|
// IE11 fix -- thanks dponch!
|
|
|
|
if (this.width == 0) { |
|
|
|
document.body.appendChild(this); |
|
|
|
this.width = this.offsetWidth; |
|
|
|
this.height = this.offsetHeight; |
|
|
|
document.body.removeChild(this); |
|
|
|
} |
|
|
|
/** |
|
|
|
* Draw a square shape |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r size, width and height of the square |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.square = function (x, y, r) { |
|
|
|
this.beginPath(); |
|
|
|
this.rect(x - r, y - r, r * 2, r * 2); |
|
|
|
}; |
|
|
|
|
|
|
|
if (me.callback) { |
|
|
|
me.images[url] = img; |
|
|
|
me.callback(this); |
|
|
|
} |
|
|
|
}; |
|
|
|
/** |
|
|
|
* Draw a triangle shape |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r radius, half the length of the sides of the triangle |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.triangle = function (x, y, r) { |
|
|
|
// http://en.wikipedia.org/wiki/Equilateral_triangle
|
|
|
|
this.beginPath(); |
|
|
|
|
|
|
|
img.onerror = function () { |
|
|
|
if (brokenUrl === undefined) { |
|
|
|
console.error("Could not load image:", url); |
|
|
|
delete this.src; |
|
|
|
if (me.callback) { |
|
|
|
me.callback(this); |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (me.imageBroken[url] === true) { |
|
|
|
console.error("Could not load brokenImage:", brokenUrl); |
|
|
|
delete this.src; |
|
|
|
if (me.callback) { |
|
|
|
me.callback(this); |
|
|
|
} |
|
|
|
} else { |
|
|
|
console.error("Could not load image:", url); |
|
|
|
this.src = brokenUrl; |
|
|
|
me.imageBroken[url] = true; |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
// the change in radius and the offset is here to center the shape
|
|
|
|
r *= 1.15; |
|
|
|
y += 0.275 * r; |
|
|
|
|
|
|
|
img.src = url; |
|
|
|
} |
|
|
|
var s = r * 2; |
|
|
|
var s2 = s / 2; |
|
|
|
var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
|
|
|
|
var h = Math.sqrt(s * s - s2 * s2); // height
|
|
|
|
|
|
|
|
return img; |
|
|
|
}; |
|
|
|
|
|
|
|
module.exports = Images; |
|
|
|
this.moveTo(x, y - (h - ir)); |
|
|
|
this.lineTo(x + s2, y + ir); |
|
|
|
this.lineTo(x - s2, y + ir); |
|
|
|
this.lineTo(x, y - (h - ir)); |
|
|
|
this.closePath(); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Draw a triangle shape in downward orientation |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r radius |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.triangleDown = function (x, y, r) { |
|
|
|
// http://en.wikipedia.org/wiki/Equilateral_triangle
|
|
|
|
this.beginPath(); |
|
|
|
|
|
|
|
// the change in radius and the offset is here to center the shape
|
|
|
|
r *= 1.15; |
|
|
|
y -= 0.275 * r; |
|
|
|
|
|
|
|
var s = r * 2; |
|
|
|
var s2 = s / 2; |
|
|
|
var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
|
|
|
|
var h = Math.sqrt(s * s - s2 * s2); // height
|
|
|
|
|
|
|
|
this.moveTo(x, y + (h - ir)); |
|
|
|
this.lineTo(x + s2, y - ir); |
|
|
|
this.lineTo(x - s2, y - ir); |
|
|
|
this.lineTo(x, y + (h - ir)); |
|
|
|
this.closePath(); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Draw a star shape, a star with 5 points |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r radius, half the length of the sides of the triangle |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.star = function (x, y, r) { |
|
|
|
// http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
|
|
|
|
this.beginPath(); |
|
|
|
|
|
|
|
// the change in radius and the offset is here to center the shape
|
|
|
|
r *= 0.82; |
|
|
|
y += 0.1 * r; |
|
|
|
|
|
|
|
for (var n = 0; n < 10; n++) { |
|
|
|
var radius = n % 2 === 0 ? r * 1.3 : r * 0.5; |
|
|
|
this.lineTo(x + radius * Math.sin(n * 2 * Math.PI / 10), y - radius * Math.cos(n * 2 * Math.PI / 10)); |
|
|
|
} |
|
|
|
|
|
|
|
this.closePath(); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Draw a Diamond shape |
|
|
|
* @param {Number} x horizontal center |
|
|
|
* @param {Number} y vertical center |
|
|
|
* @param {Number} r radius, half the length of the sides of the triangle |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.diamond = function (x, y, r) { |
|
|
|
// http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
|
|
|
|
this.beginPath(); |
|
|
|
|
|
|
|
this.lineTo(x, y + r); |
|
|
|
this.lineTo(x + r, y); |
|
|
|
this.lineTo(x, y - r); |
|
|
|
this.lineTo(x - r, y); |
|
|
|
|
|
|
|
|
|
|
|
this.closePath(); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
|
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) { |
|
|
|
var r2d = Math.PI / 180; |
|
|
|
if (w - 2 * r < 0) { |
|
|
|
r = w / 2; |
|
|
|
} //ensure that the radius isn't too large for x
|
|
|
|
if (h - 2 * r < 0) { |
|
|
|
r = h / 2; |
|
|
|
} //ensure that the radius isn't too large for y
|
|
|
|
this.beginPath(); |
|
|
|
this.moveTo(x + r, y); |
|
|
|
this.lineTo(x + w - r, y); |
|
|
|
this.arc(x + w - r, y + r, r, r2d * 270, r2d * 360, false); |
|
|
|
this.lineTo(x + w, y + h - r); |
|
|
|
this.arc(x + w - r, y + h - r, r, 0, r2d * 90, false); |
|
|
|
this.lineTo(x + r, y + h); |
|
|
|
this.arc(x + r, y + h - r, r, r2d * 90, r2d * 180, false); |
|
|
|
this.lineTo(x, y + r); |
|
|
|
this.arc(x + r, y + r, r, r2d * 180, r2d * 270, false); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.ellipse = function (x, y, w, h) { |
|
|
|
var kappa = 0.5522848, |
|
|
|
ox = w / 2 * kappa, |
|
|
|
// control point offset horizontal
|
|
|
|
oy = h / 2 * kappa, |
|
|
|
// control point offset vertical
|
|
|
|
xe = x + w, |
|
|
|
// x-end
|
|
|
|
ye = y + h, |
|
|
|
// y-end
|
|
|
|
xm = x + w / 2, |
|
|
|
// x-middle
|
|
|
|
ym = y + h / 2; // y-middle
|
|
|
|
|
|
|
|
this.beginPath(); |
|
|
|
this.moveTo(x, ym); |
|
|
|
this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); |
|
|
|
this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); |
|
|
|
this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); |
|
|
|
this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.database = function (x, y, w, h) { |
|
|
|
var f = 1 / 3; |
|
|
|
var wEllipse = w; |
|
|
|
var hEllipse = h * f; |
|
|
|
|
|
|
|
var kappa = 0.5522848, |
|
|
|
ox = wEllipse / 2 * kappa, |
|
|
|
// control point offset horizontal
|
|
|
|
oy = hEllipse / 2 * kappa, |
|
|
|
// control point offset vertical
|
|
|
|
xe = x + wEllipse, |
|
|
|
// x-end
|
|
|
|
ye = y + hEllipse, |
|
|
|
// y-end
|
|
|
|
xm = x + wEllipse / 2, |
|
|
|
// x-middle
|
|
|
|
ym = y + hEllipse / 2, |
|
|
|
// y-middle
|
|
|
|
ymb = y + (h - hEllipse / 2), |
|
|
|
// y-midlle, bottom ellipse
|
|
|
|
yeb = y + h; // y-end, bottom ellipse
|
|
|
|
|
|
|
|
this.beginPath(); |
|
|
|
this.moveTo(xe, ym); |
|
|
|
|
|
|
|
this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); |
|
|
|
this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); |
|
|
|
|
|
|
|
this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); |
|
|
|
this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); |
|
|
|
|
|
|
|
this.lineTo(xe, ymb); |
|
|
|
|
|
|
|
this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb); |
|
|
|
this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb); |
|
|
|
|
|
|
|
this.lineTo(x, ym); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* Draw an arrow point (no line) |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.arrow = function (x, y, angle, length) { |
|
|
|
// tail
|
|
|
|
var xt = x - length * Math.cos(angle); |
|
|
|
var yt = y - length * Math.sin(angle); |
|
|
|
|
|
|
|
// inner tail
|
|
|
|
// TODO: allow to customize different shapes
|
|
|
|
var xi = x - length * 0.9 * Math.cos(angle); |
|
|
|
var yi = y - length * 0.9 * Math.sin(angle); |
|
|
|
|
|
|
|
// left
|
|
|
|
var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI); |
|
|
|
var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI); |
|
|
|
|
|
|
|
// right
|
|
|
|
var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI); |
|
|
|
var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI); |
|
|
|
|
|
|
|
this.beginPath(); |
|
|
|
this.moveTo(x, y); |
|
|
|
this.lineTo(xl, yl); |
|
|
|
this.lineTo(xi, yi); |
|
|
|
this.lineTo(xr, yr); |
|
|
|
this.closePath(); |
|
|
|
}; |
|
|
|
|
|
|
|
/** |
|
|
|
* Sets up the dashedLine functionality for drawing |
|
|
|
* Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
|
|
|
|
* @author David Jordan |
|
|
|
* @date 2012-08-08 |
|
|
|
*/ |
|
|
|
CanvasRenderingContext2D.prototype.dashedLine = function (x, y, x2, y2, dashArray) { |
|
|
|
if (!dashArray) dashArray = [10, 5]; |
|
|
|
if (dashLength == 0) dashLength = 0.001; // Hack for Safari
|
|
|
|
var dashCount = dashArray.length; |
|
|
|
this.moveTo(x, y); |
|
|
|
var dx = x2 - x, |
|
|
|
dy = y2 - y; |
|
|
|
var slope = dy / dx; |
|
|
|
var distRemaining = Math.sqrt(dx * dx + dy * dy); |
|
|
|
var dashIndex = 0, |
|
|
|
draw = true; |
|
|
|
while (distRemaining >= 0.1) { |
|
|
|
var dashLength = dashArray[dashIndex++ % dashCount]; |
|
|
|
if (dashLength > distRemaining) dashLength = distRemaining; |
|
|
|
var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope)); |
|
|
|
if (dx < 0) xStep = -xStep; |
|
|
|
x += xStep; |
|
|
|
y += slope * xStep; |
|
|
|
this[draw ? "lineTo" : "moveTo"](x, y); |
|
|
|
distRemaining -= dashLength; |
|
|
|
draw = !draw; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// TODO: add diamond shape
|
|
|
|
} |
|
|
|
|
|
|
|
/***/ }, |
|
|
|
/* 58 */ |
|
|
@ -25368,7 +25354,6 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
value: function setOptions(options) { |
|
|
|
if (options) { |
|
|
|
util.selectiveNotDeepExtend(["color"], this.options, options); |
|
|
|
|
|
|
|
if (options.color) { |
|
|
|
this.options.color = util.parseColor(options.color); |
|
|
|
} |
|
|
@ -33316,11 +33301,18 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
value: function setOptions(options) { |
|
|
|
if (options !== undefined) { |
|
|
|
// extend all but the values in fields
|
|
|
|
var fields = ["keyboard"]; |
|
|
|
var fields = ["keyboard", "tooltip"]; |
|
|
|
util.selectiveNotDeepExtend(fields, this.options, options); |
|
|
|
|
|
|
|
// merge the keyboard options in.
|
|
|
|
util.mergeOptions(this.options, options, "keyboard"); |
|
|
|
|
|
|
|
if (options.tooltip) { |
|
|
|
util.extend(this.options.tooltip, options.tooltip); |
|
|
|
if (options.tooltip.color) { |
|
|
|
this.options.tooltip.color = util.parseColor(options.tooltip.color); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.navigationHandler.setOptions(this.options); |
|
|
@ -33690,7 +33682,7 @@ return /******/ (function(modules) { // webpackBootstrap |
|
|
|
// If delta is nonzero, handle it.
|
|
|
|
// Basically, delta is now positive if wheel was scrolled up,
|
|
|
|
// and negative, if wheel was scrolled down.
|
|
|
|
if (delta) { |
|
|
|
if (delta !== 0) { |
|
|
|
// calculate the new scale
|
|
|
|
var scale = this.body.view.scale; |
|
|
|
var zoom = delta / 10; |
|
|
|