vislite
Version:
灵活、快速、简单的数据可视化交互式跨端前端库
1,275 lines (1,229 loc) • 130 kB
JavaScript
/*!
* VISLite JavaScript Library v1.11.0
* git+https://github.com/oi-contrib/VISLite.git
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VISLite = factory());
})(this, (function () { 'use strict';
var Hermite = (function () {
function Hermite(u) {
if (u === void 0) { u = 0.5; }
this.name = 'Hermite';
this.__u = u;
}
Hermite.prototype.setP = function (x1, y1, x2, y2, s1, s2) {
if (x1 < x2) {
this.__a = x1;
this.__b = x2;
var p3 = this.__u * s1, p4 = this.__u * s2;
y1 /= (x2 - x1);
y2 /= (x2 - x1);
this.__MR = [
2 * y1 - 2 * y2 + p3 + p4,
3 * y2 - 3 * y1 - 2 * p3 - p4,
p3,
y1
];
}
else
throw new Error('The point x-position should be increamented!');
return this;
};
Hermite.prototype.use = function (x) {
if (this.__MR) {
var sx = (x - this.__a) / (this.__b - this.__a), sx2 = sx * sx, sx3 = sx * sx2;
var sResult = sx3 * this.__MR[0] + sx2 * this.__MR[1] + sx * this.__MR[2] + this.__MR[3];
return sResult * (this.__b - this.__a);
}
else
throw new Error('You shoud first set the position!');
};
return Hermite;
}());
var Cardinal = (function () {
function Cardinal(t) {
if (t === void 0) { t = 0; }
this.name = 'Cardinal';
this.__t = t;
}
Cardinal.prototype.setP = function (points) {
this.__HS = {
"x": [],
"h": []
};
var flag, slope = (points[1][1] - points[0][1]) / (points[1][0] - points[0][0]), temp;
this.__HS.x[0] = points[0][0];
for (flag = 1; flag < points.length; flag++) {
if (points[flag][0] <= points[flag - 1][0])
throw new Error('The point position should be increamented!');
this.__HS.x[flag] = points[flag][0];
if (flag < points.length - 1) {
if ((points[flag + 1][1] > points[flag][1] && points[flag - 1][1] > points[flag][1]) ||
(points[flag + 1][1] < points[flag][1] && points[flag - 1][1] < points[flag][1]) ||
points[flag + 1][1] == points[flag][1] ||
points[flag - 1][1] == points[flag][1]) {
temp = 0;
}
else {
temp = (points[flag + 1][1] - points[flag - 1][1]) / (points[flag + 1][0] - points[flag - 1][0]);
}
}
else {
temp = (points[flag][1] - points[flag - 1][1]) / (points[flag][0] - points[flag - 1][0]);
}
this.__HS.h[flag - 1] = new Hermite((1 - this.__t) * 0.5).setP(points[flag - 1][0], points[flag - 1][1], points[flag][0], points[flag][1], slope, temp);
slope = temp;
}
return this;
};
Cardinal.prototype.use = function (x) {
if (this.__HS) {
this.__i = -1;
while (this.__i + 1 < this.__HS.x.length && (x > this.__HS.x[this.__i + 1] || (this.__i == -1 && x >= this.__HS.x[this.__i + 1]))) {
this.__i += 1;
}
if (this.__i < 0) {
return this.__HS.h[0].use(this.__HS.x[0]);
}
else if (this.__i >= this.__HS.h.length) {
return this.__HS.h[this.__HS.h.length - 1].use(this.__HS.x[this.__HS.x.length - 1]);
}
return this.__HS.h[this.__i].use(x);
}
else {
throw new Error('You shoud first set the position!');
}
};
return Cardinal;
}());
function _move (d, a, b, c) {
if (c === void 0) { c = 0; }
var sqrt = Math.sqrt(a * a + b * b + c * c);
return [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
];
}
function _rotate (deg) {
var sin = Math.sin(deg), cos = Math.cos(deg);
return [
cos, sin, 0, 0,
-sin, cos, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
];
}
function _scale (xTimes, yTimes, zTimes, cx, cy, cz) {
if (cx === void 0) { cx = 0; }
if (cy === void 0) { cy = 0; }
if (cz === void 0) { cz = 0; }
return [
xTimes, 0, 0, 0,
0, yTimes, 0, 0,
0, 0, zTimes, 0,
cx - cx * xTimes, cy - cy * yTimes, cz - cz * zTimes, 1
];
}
function _transform (a1, b1, c1, a2, b2, c2) {
if (typeof a1 === 'number' && typeof b1 === 'number') {
if (typeof c1 !== 'number') {
c1 = 0;
a2 = a1;
b2 = b1;
c2 = 1;
}
else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
a2 = a1;
b2 = b1;
c2 = c1;
a1 = 0;
b1 = 0;
c1 = 0;
}
if (a1 == a2 && b1 == b2 && c1 == c2)
throw new Error('It\'s not a legitimate ray!');
var sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)), cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1, sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0, b = (a2 - a1) * sin1 + (b2 - b1) * cos1, c = c2 - c1, sqrt2 = Math.sqrt(b * b + c * c), cos2 = sqrt2 != 0 ? c / sqrt2 : 1, sin2 = sqrt2 != 0 ? b / sqrt2 : 0;
return [
[
cos1, cos2 * sin1, sin1 * sin2, 0,
-sin1, cos1 * cos2, cos1 * sin2, 0,
0, -sin2, cos2, 0,
b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
],
[
cos1, -sin1, 0, 0,
cos2 * sin1, cos2 * cos1, -sin2, 0,
sin1 * sin2, cos1 * sin2, cos2, 0,
a1, b1, c1, 1
]
];
}
else {
throw new Error('a1 and b1 is required!');
}
}
var _multiply = function (matrix4, param) {
var newParam = [];
for (var i = 0; i < 4; i++)
for (var j = 0; j < param.length / 4; j++)
newParam[j * 4 + i] =
matrix4[i] * param[j * 4] +
matrix4[i + 4] * param[j * 4 + 1] +
matrix4[i + 8] * param[j * 4 + 2] +
matrix4[i + 12] * param[j * 4 + 3];
return newParam;
};
var __initMatrix4 = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
];
var Matrix4 = (function () {
function Matrix4(initMatrix4) {
if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
this.name = 'Matrix4';
this.__matrix4 = initMatrix4;
}
Matrix4.prototype.setValue = function (initMatrix4) {
if (initMatrix4 === void 0) { initMatrix4 = __initMatrix4; }
this.__matrix4 = initMatrix4;
return this;
};
Matrix4.prototype.move = function (dis, a, b, c) {
if (c === void 0) { c = 0; }
this.__matrix4 = _multiply(_move(dis, a, b, c), this.__matrix4);
return this;
};
Matrix4.prototype.rotate = function (deg, a1, b1, c1, a2, b2, c2) {
var matrix4s = _transform(a1, b1, c1, a2, b2, c2);
this.__matrix4 = _multiply(_multiply(_multiply(matrix4s[1], _rotate(deg)), matrix4s[0]), this.__matrix4);
return this;
};
Matrix4.prototype.scale = function (xTimes, yTimes, zTimes, cx, cy, cz) {
if (cx === void 0) { cx = 0; }
if (cy === void 0) { cy = 0; }
if (cz === void 0) { cz = 0; }
this.__matrix4 = _multiply(_scale(xTimes, yTimes, zTimes, cx, cy, cz), this.__matrix4);
return this;
};
Matrix4.prototype.multiply = function (newMatrix4, flag) {
if (flag === void 0) { flag = false; }
this.__matrix4 = flag ? _multiply(this.__matrix4, newMatrix4) : _multiply(newMatrix4, this.__matrix4);
return this;
};
Matrix4.prototype.use = function (x, y, z, w) {
if (z === void 0) { z = 0; }
if (w === void 0) { w = 1; }
return _multiply(this.__matrix4, [x, y, z, w]);
};
Matrix4.prototype.value = function () {
return this.__matrix4;
};
return Matrix4;
}());
function rotate$1 (cx, cy, deg, x, y) {
var cos = Math.cos(deg), sin = Math.sin(deg);
return [
(x - cx) * cos - (y - cy) * sin + cx,
(x - cx) * sin + (y - cy) * cos + cy
];
}
function move (ax, ay, d, x, y) {
var sqrt = Math.sqrt(ax * ax + ay * ay);
return [
ax * d / sqrt + x,
ay * d / sqrt + y
];
}
function scale (cx, cy, times, x, y) {
return [
times * (x - cx) + cx,
times * (y - cy) + cy
];
}
function getLoopColors (num, alpha, colorsFactory) {
if (alpha === void 0) { alpha = 1; }
var colorList = colorsFactory ? colorsFactory(alpha) : [
'rgba(84,112,198,' + alpha + ")", 'rgba(145,204,117,' + alpha + ")",
'rgba(250,200,88,' + alpha + ")", 'rgba(238,102,102,' + alpha + ")",
'rgba(115,192,222,' + alpha + ")", 'rgba(59,162,114,' + alpha + ")",
'rgba(252,132,82,' + alpha + ")", 'rgba(154,96,180,' + alpha + ")",
'rgba(234,124,204,' + alpha + ")"
];
var colors = [];
if (num <= colorList.length) {
return colorList;
}
else {
if (num % colorList.length == 0) {
for (var i = 0; i < (num / colorList.length); i++) {
colors = colors.concat(colorList);
}
}
else {
for (var j = 1; j < (num / colorList.length); j++) {
colors = colors.concat(colorList);
}
if (num % colorList.length == 1) {
colors = colors.concat(colorList[4]);
}
else {
for (var k = 0; k < num % colorList.length; k++) {
colors = colors.concat(colorList[k]);
}
}
}
}
return colors;
}
//当前正在运动的动画的tick函数堆栈
let $timers = [];
//唯一定时器的定时间隔
let $interval = 13;
//定时器ID
let $timerId;
/**
* 动画轮播
* @param {function} doback 轮询函数，有一个形参deep，0-1，表示执行进度
* @param {number} duration 动画时长，可选
* @param {function} callback 动画结束回调，可选，有一个形参deep，0-1，表示执行进度
*
* @returns {object} 返回一个对象，包含一个stop方法，用于在动画结束前结束动画
*/
function animation$1(doback, duration, callback) {
if (arguments.length < 2) duration = 400;
if (arguments.length < 3) callback = function () { };
let clock = {
//把tick函数推入堆栈
"timer": function (tick, duration, callback) {
if (!tick) {
throw new Error('Tick is required!');
}
let id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
$timers.push({
"id": id,
"createTime": new Date(), // 开始时间
"pauseTime": -1, // 暂停的时间，继续运行的时候，借助此计算暂停的时间差
"pauseKeepTime": 0, // 暂停用去的时间
"status": "running", // running(运行中), paused(暂停中)
"tick": tick,
"duration": duration,
"callback": callback
});
clock.start();
return id;
},
//开启唯一的定时器timerId
"start": function () {
if (!$timerId) {
try {
if (globalThis && globalThis.requestAnimationFrame) {
$timerId = globalThis.requestAnimationFrame(function step() {
clock.tick();
if ($timerId) $timerId = globalThis.requestAnimationFrame(step);
});
} else {
$timerId = setInterval(clock.tick, $interval);
}
} catch (e) {
$timerId = setInterval(clock.tick, $interval);
}
}
},
//被定时器调用，遍历timers堆栈
"tick": function () {
let createTime, flag, tick, callback, timer, duration, passTime, timers = $timers;
$timers = [];
$timers.length = 0;
for (flag = 0; flag < timers.length; flag++) {
//初始化数据
timer = timers[flag];
createTime = timer.createTime;
tick = timer.tick;
duration = timer.duration;
callback = timer.callback;
//执行
passTime = (+new Date().valueOf() - createTime.valueOf() - timer.pauseKeepTime) / duration;
passTime = passTime > 1 ? 1 : passTime;
if (timer.status === "running") {
tick(passTime);
}
// 只有当动画没有结束或者动画处于暂停状态时，才继续添加到timers堆栈
if ((passTime < 1 || timer.status === "paused") && timer.id) {
//动画没有结束再添加
$timers.push(timer);
} else {
callback(passTime);
}
}
if ($timers.length <= 0) {
clock.stop();
}
},
//停止定时器，重置timerId=null
"stop": function () {
if ($timerId) {
try {
if (globalThis && globalThis.requestAnimationFrame) globalThis.cancelAnimationFrame($timerId);
else clearInterval($timerId);
} catch (e) {
clearInterval($timerId);
}
$timerId = null;
}
}
};
let id = clock.timer(function (deep) {
//其中deep为0-1，表示改变的程度
doback(deep);
}, duration, callback);
return {
// 结束动画
stop: function () {
for (let i in $timers) {
if ($timers[i].id == id) {
$timers[i].id = void 0;
}
}
},
// 暂停动画
pause: function () {
for (let i in $timers) {
if ($timers[i].id == id) {
if ($timers[i].pauseTime === -1) {
$timers[i].pauseTime = new Date();
$timers[i].status = "paused";
}
}
}
},
// 继续动画
resume: function () {
for (let i in $timers) {
if ($timers[i].id == id) {
if ($timers[i].pauseTime !== -1) {
$timers[i].pauseKeepTime += (new Date().valueOf() - $timers[i].pauseTime.valueOf());
$timers[i].pauseTime = -1;
$timers[i].status = "running";
}
}
}
}
};
}
function animation (doback, duration, callback) {
return animation$1(doback, duration || 400, callback || function () { }).stop;
}
function ruler (maxValue, minValue, num, option) {
if (maxValue < minValue) {
var temp = minValue;
minValue = maxValue;
maxValue = temp;
}
else if (maxValue == minValue) {
return [maxValue];
}
var times100 = (function (_value) {
var _times100_base = (_value < 100 && _value > -100) ? 10 : 0.1;
var _times100 = -1, _tiemsValue = _value;
while (_times100_base == 10 ?
(_tiemsValue >= -100 && _tiemsValue <= 100)
:
(_tiemsValue <= -100 || _tiemsValue >= 100)) {
_times100 += 1;
_tiemsValue *= _times100_base;
}
if (_times100_base == 10) {
return Math.pow(10, _times100);
}
else {
var temp = "0.";
for (var i = 1; i < _times100; i++) {
temp += "0";
}
return +(temp + "1");
}
})(maxValue - minValue);
var distance100_oral = Math.ceil((maxValue - minValue) * times100 / num);
var getResult = function (changValue) {
var distance100 = {
3: 2,
4: 5,
6: 5,
7: 5,
8: 10,
9: 10,
11: 10,
12: 10,
13: 15,
14: 15,
16: 15,
17: 15,
18: 20,
19: 20,
21: 20,
22: 20,
23: 25,
24: 25,
26: 25,
27: 25
}[distance100_oral + changValue] || (distance100_oral + changValue);
var distance = distance100 / times100;
var begin = Math.floor(minValue / distance) * distance;
var rulerArray = [];
rulerArray.push(begin);
for (var index = 1; rulerArray[rulerArray.length - 1] < maxValue; index++) {
rulerArray.push(begin + distance * index);
}
return rulerArray;
};
var rulerArray = getResult(0);
var balanceMax = function () {
var rulerArray_temp = [];
var changeDist = rulerArray[rulerArray.length - 1] - (option === null || option === void 0 ? void 0 : option.max);
for (var index = 0; index < rulerArray.length; index++) {
if (index + 1 < rulerArray.length && rulerArray[index + 1] - changeDist < minValue) ;
else {
rulerArray_temp.push(rulerArray[index] - changeDist);
}
}
return rulerArray_temp;
};
var balanceMin = function () {
var rulerArray_temp = [];
var changeDist = rulerArray[0] - (option === null || option === void 0 ? void 0 : option.min);
for (var index = 0; index < rulerArray.length; index++) {
rulerArray_temp[index] = rulerArray[index] - changeDist;
if (maxValue <= rulerArray_temp[index])
break;
}
return rulerArray_temp;
};
if (option) {
if ('max' in option && 'min' in option && option.max >= maxValue && option.min <= minValue) {
var isAnswer = function () {
if (rulerArray[0] >= option.min && rulerArray[rulerArray.length - 1] <= option.max)
return true;
var rulerArray_max = balanceMax();
if (rulerArray_max[0] >= option.min && rulerArray_max[rulerArray_max.length - 1] <= option.max) {
rulerArray = rulerArray_max;
return true;
}
var rulerArray_min = balanceMin();
if (rulerArray_min[0] >= option.min && rulerArray_min[rulerArray_max.length - 1] <= option.max) {
rulerArray = rulerArray_min;
return true;
}
};
if (isAnswer())
return rulerArray;
for (var changValue = 1; changValue < 100; changValue++) {
rulerArray = getResult(changValue);
if (isAnswer())
return rulerArray;
rulerArray = getResult(-changValue);
if (isAnswer())
return rulerArray;
}
}
if ('max' in option && option.max >= maxValue) {
if (option.max < rulerArray[rulerArray.length - 1]) {
rulerArray = balanceMax();
}
}
else if ('min' in option && option.min <= minValue) {
if (option.min > rulerArray[0]) {
rulerArray = balanceMin();
}
}
}
for (var index = 0; index < rulerArray.length; index++) {
var valStr = rulerArray[index] + "";
if (/\./.test(valStr)) {
if (/9{7,}$/.test(valStr)) {
valStr = valStr.replace(/9{7,}$/, '');
rulerArray[index] = +(valStr.substring(0, valStr.length - 1) + ((+valStr[valStr.length - 1]) + 1));
}
else if (/0{7,}\d$/.test(valStr)) {
rulerArray[index] = +(valStr.replace(/0{7,}\d$/, ''));
}
}
}
return rulerArray;
}
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var XLINK_ATTRIBUTE = ["href", "title", "show", "type", "role", "actuate"];
var setLineAttr = function (el, config) {
setAttribute(el, "stroke-dasharray", config.lineDash.join(','));
setAttribute(el, "stroke-width", config.lineWidth + "");
setAttribute(el, "stroke-linecap", config.lineCap + "");
setAttribute(el, "stroke-linejoin", config.lineJoin + "");
};
function toNode(tagname) {
return document.createElementNS('http://www.w3.org/2000/svg', tagname);
}
var _setAttribute = function (el, key, value) {
if (XLINK_ATTRIBUTE.indexOf(key) > -1) {
el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:' + key, value + "");
}
else {
el.setAttribute(key, value + "");
}
};
var setAttribute = _setAttribute;
function getAttribute(el, key) {
if (XLINK_ATTRIBUTE.indexOf(key) > -1)
key = 'xlink:' + key;
return el.getAttribute(key);
}
function full(el, config) {
setLineAttr(el, config);
_setAttribute(el, "stroke", config.strokeStyle);
_setAttribute(el, "fill", config.fillStyle);
}
function fill(el, config) {
_setAttribute(el, "fill", config.fillStyle);
}
function stroke(el, config) {
setLineAttr(el, config);
_setAttribute(el, "stroke", config.strokeStyle);
_setAttribute(el, "fill", "none");
}
function setStyle (el, styles) {
for (var key in styles) {
el.style[key] = styles[key];
}
}
var rotate = function (cx, cy, deg, x, y) {
var cos = Math.cos(deg), sin = Math.sin(deg);
return [
+((x - cx) * cos - (y - cy) * sin + cx).toFixed(7),
+((x - cx) * sin + (y - cy) * cos + cy).toFixed(7)
];
};
function arc (beginA, rotateA, cx, cy, r1, r2, doback) {
if (rotateA < 0) {
beginA += rotateA;
rotateA *= -1;
}
var temp = [];
var p;
p = rotate(0, 0, beginA, r1, 0);
temp[0] = p[0];
temp[1] = p[1];
p = rotate(0, 0, rotateA, p[0], p[1]);
temp[2] = p[0];
temp[3] = p[1];
p = rotate(0, 0, beginA, r2, 0);
temp[4] = p[0];
temp[5] = p[1];
p = rotate(0, 0, rotateA, p[0], p[1]);
temp[6] = p[0];
temp[7] = p[1];
doback(beginA, beginA + rotateA, temp[0] + cx, temp[1] + cy, temp[4] + cx, temp[5] + cy, temp[2] + cx, temp[3] + cy, temp[6] + cx, temp[7] + cy, (r2 - r1) * 0.5);
}
var initDefs = function (el) {
var defs = el.getElementsByTagName('defs');
if (defs.length <= 0) {
var newDefs = toNode("defs");
el.appendChild(newDefs);
return newDefs;
}
else {
return defs[0];
}
};
var initText$1 = function (el, config, x, y, deg) {
if (el.nodeName.toLowerCase() !== "text")
throw new Error("Need a <text> !");
setAttribute(el, "dy", {
top: config["fontSize"] * 0.5,
middle: 0,
bottom: -config["fontSize"] * 0.5,
}[config.textBaseline]);
setStyle(el, {
"text-anchor": {
left: "start",
right: "end",
center: "middle",
}[config.textAlign],
"dominant-baseline": "central",
"font-size": config["fontSize"] + "px",
"font-family": config["fontFamily"],
});
setAttribute(el, "x", x);
setAttribute(el, "y", y);
if (typeof deg == "number") {
deg = deg % 360;
setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")");
}
};
var initCircle$1 = function (el, cx, cy, r) {
if (el.nodeName.toLowerCase() !== "circle")
throw new Error("Need a <circle> !");
setAttribute(el, "cx", cx);
setAttribute(el, "cy", cy);
setAttribute(el, "r", r);
};
var initPath = function (el, path) {
if (el.nodeName.toLowerCase() !== "path")
throw new Error("Need a <path> !");
setAttribute(el, "d", path);
};
var initRect$1 = function (el, config, x, y, width, height) {
if (el.nodeName.toLowerCase() !== "path")
throw new Error("Need a <path> !");
var rectRadius = [];
if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
for (var index = 0; index < 4; index++) {
rectRadius.push.apply(rectRadius, config.rectRadius);
}
}
if (height < 0) {
height *= -1;
y -= height;
}
if (width < 0) {
width *= -1;
x -= width;
}
var d = "";
if (rectRadius.length >= 4) {
d = "M" + (x + rectRadius[0]) + " " + y;
d += "L" + (x + width - rectRadius[1]) + " " + y;
d += "A" + rectRadius[1] + " " + rectRadius[1] + " 0 0 1 " + (x + width) + " " + (y + rectRadius[1]);
d += "L" + (x + width) + " " + (y + height - rectRadius[2]);
d += "A" + rectRadius[2] + " " + rectRadius[2] + " 0 0 1 " + (x + width - rectRadius[2]) + " " + (y + height);
d += "L" + (x + rectRadius[3]) + " " + (y + height);
d += "A" + rectRadius[3] + " " + rectRadius[3] + " 0 0 1 " + x + " " + (y + height - rectRadius[3]);
d += "L" + x + " " + (y + rectRadius[0]);
d += "A" + rectRadius[0] + " " + rectRadius[0] + " 0 0 1 " + (x + rectRadius[0]) + " " + y;
}
else {
d = "M" + x + " " + y;
d += "L" + (x + width) + " " + y;
d += "L" + (x + width) + " " + (y + height);
d += "L" + x + " " + (y + height);
d += "Z";
}
setAttribute(el, "d", d);
};
var initArc$1 = function (el, config, cx, cy, r1, r2, beginDeg, deg) {
if (el.nodeName.toLowerCase() !== "path")
throw new Error("Need a <path> !");
beginDeg = (beginDeg / 180) * Math.PI;
deg = (deg / 180) * Math.PI;
beginDeg = beginDeg % (Math.PI * 2);
if (r1 > r2) {
var temp = r1;
r1 = r2;
r2 = temp;
}
if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
deg = Math.PI * 1.999999;
}
else {
deg = deg % (Math.PI * 2);
}
arc(beginDeg, deg, cx, cy, r1, r2, function (beginA, endA, begInnerX, begInnerY, begOuterX, begOuterY, endInnerX, endInnerY, endOuterX, endOuterY, r) {
var f = endA - beginA > Math.PI ? 1 : 0;
var d = "M" + begInnerX + " " + begInnerY;
if (r < 0)
r = -r;
d +=
"A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY;
if (config.arcEndCap == "round")
d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY;
else if (config.arcEndCap == "-round")
d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY;
else
d += "L" + endOuterX + " " + endOuterY;
d +=
"A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY;
if (config.arcStartCap == "round")
d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY;
else if (config.arcStartCap == "-round")
d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY;
else
d += "L" + begInnerX + " " + begInnerY;
if (config.arcStartCap == "butt")
d += "Z";
setAttribute(el, "d", d);
});
};
var enhanceGradient$1 = function (gradient, gradientId) {
var enhanceGradient = {
"value": function () {
return "url(#" + gradientId + ")";
},
"setColor": function (stop, color) {
var stopEl = toNode("stop");
gradient.appendChild(stopEl);
setAttribute(stopEl, "offset", (stop * 100) + "%");
setAttribute(stopEl, "style", "stop-color:" + color + ";");
return enhanceGradient;
}
};
return enhanceGradient;
};
var linearGradient$1 = function (el, x0, y0, x1, y1) {
var defs = initDefs(el);
var gradientId = "visliteLg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0);
var linearGradient = toNode("linearGradient");
defs.appendChild(linearGradient);
setAttribute(linearGradient, "id", gradientId);
setAttribute(linearGradient, "x1", x0 + "%");
setAttribute(linearGradient, "y1", y0 + "%");
setAttribute(linearGradient, "x2", x1 + "%");
setAttribute(linearGradient, "y2", y1 + "%");
return enhanceGradient$1(linearGradient, gradientId);
};
var radialGradient$1 = function (el, cx, cy, r) {
var defs = initDefs(el);
var gradientId = "visliteRg" + new Date().valueOf() + "" + (Math.random() * 1000000).toFixed(0);
var radialGradient = toNode("radialGradient");
defs.appendChild(radialGradient);
setAttribute(radialGradient, "id", gradientId);
setAttribute(radialGradient, "cx", cx + "%");
setAttribute(radialGradient, "cy", cy + "%");
setAttribute(radialGradient, "r", r + "%");
return enhanceGradient$1(radialGradient, gradientId);
};
function defaultFactory$1 () {
return {
fillStyle: "rgb(0,0,0)",
strokeStyle: "rgb(0,0,0)",
textAlign: "left",
textBaseline: "middle",
"fontSize": 16,
"fontFamily": "sans-serif",
"arcStartCap": "butt",
"arcEndCap": "butt",
lineDash: [],
lineWidth: 1,
lineCap: "butt",
lineJoin: "miter",
"rectRadius": []
};
}
var toString = Object.prototype.toString;
function getType(value) {
if (value == null) {
return value === undefined ? '[object Undefined]' : '[object Null]';
}
return toString.call(value);
}
function isPlainObject(value) {
if (value === null || typeof value !== 'object' || getType(value) != '[object Object]') {
return false;
}
if (Object.getPrototypeOf(value) === null) {
return true;
}
var proto = value;
while (Object.getPrototypeOf(proto) !== null) {
proto = Object.getPrototypeOf(proto);
}
return Object.getPrototypeOf(value) === proto;
}
function initOption(setOption, defaultOption) {
for (var key in setOption) {
defaultOption[key] = setOption[key];
}
return defaultOption;
}
function mergeOption(oldOption, newOption) {
(function doit(oldOption, newOption) {
for (var key in newOption) {
var value = newOption[key];
if (isPlainObject(value)) {
if (!oldOption[key])
oldOption[key] = {};
doit(oldOption[key], newOption[key]);
}
else {
oldOption[key] = value;
}
}
})(oldOption, newOption);
}
var SVG$1 = (function () {
function SVG(svg) {
this.name = "SVG";
this.__config = defaultFactory$1();
this.__path = "";
this.__currentPosition = [];
this.__transform_history = [];
this.__transform_current = "";
this.__svg = svg;
}
SVG.prototype.config = function (params) {
if (typeof params !== "object") {
return this.__config[params];
}
else {
for (var key in params) {
this.__config[key] = params[key];
}
}
return this;
};
SVG.prototype.reset = function (config) {
if (config === void 0) { config = {}; }
this.config(initOption(config, defaultFactory$1()));
return this;
};
SVG.prototype.useEl = function (el) {
this.__useEl = el;
return this;
};
SVG.prototype.getEl = function () {
return this.__useEl;
};
SVG.prototype.appendEl = function (el, context) {
context = context || this.__svg;
if (typeof el == "string")
el = toNode(el);
context.appendChild(el);
this.__useEl = el;
return this;
};
SVG.prototype.appendBoard = function (el, context) {
var _el = el;
if (typeof el == "string")
_el =
{
text: "text",
path: "path",
arc: "path",
circle: "circle",
rect: "path",
}[el] || "";
if (_el == "")
throw new Error("Unsupported drawing method:" + el);
return this.appendEl(_el, context);
};
SVG.prototype.remove = function () {
if (!this.__useEl) {
throw new Error("Currently, no node can be deleted.");
}
else {
this.__useEl.parentNode.removeChild(this.__useEl);
}
return this;
};
SVG.prototype.attr = function (params) {
if (!this.__useEl)
throw new Error("Currently, no node can be modified or viewed.");
if (typeof params !== "object") {
return getAttribute(this.__useEl, params);
}
else {
for (var key in params) {
setAttribute(this.__useEl, key, params[key]);
}
return this;
}
};
SVG.prototype.fillText = function (text, x, y, deg) {
if (deg === void 0) { deg = 0; }
initText$1(this.__useEl, this.__config, x, y, deg);
this.attr({
transform: this.__transform_current
});
this.__useEl.textContent = text;
fill(this.__useEl, this.__config);
return this;
};
SVG.prototype.strokeText = function (text, x, y, deg) {
if (deg === void 0) { deg = 0; }
initText$1(this.__useEl, this.__config, x, y, deg);
this.attr({
transform: this.__transform_current
});
this.__useEl.textContent = text;
stroke(this.__useEl, this.__config);
return this;
};
SVG.prototype.fullText = function (text, x, y, deg) {
if (deg === void 0) { deg = 0; }
initText$1(this.__useEl, this.__config, x, y, deg);
this.attr({
transform: this.__transform_current
});
this.__useEl.textContent = text;
full(this.__useEl, this.__config);
return this;
};
SVG.prototype.fillArc = function (cx, cy, r1, r2, beginDeg, deg) {
initArc$1(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
this.attr({
transform: this.__transform_current
});
fill(this.__useEl, this.__config);
return this;
};
SVG.prototype.strokeArc = function (cx, cy, r1, r2, beginDeg, deg) {
initArc$1(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
this.attr({
transform: this.__transform_current
});
stroke(this.__useEl, this.__config);
return this;
};
SVG.prototype.fullArc = function (cx, cy, r1, r2, beginDeg, deg) {
initArc$1(this.__useEl, this.__config, cx, cy, r1, r2, beginDeg, deg);
this.attr({
transform: this.__transform_current
});
full(this.__useEl, this.__config);
return this;
};
SVG.prototype.fillCircle = function (cx, cy, r) {
initCircle$1(this.__useEl, cx, cy, r);
this.attr({
transform: this.__transform_current
});
fill(this.__useEl, this.__config);
return this;
};
SVG.prototype.strokeCircle = function (cx, cy, r) {
initCircle$1(this.__useEl, cx, cy, r);
this.attr({
transform: this.__transform_current
});
stroke(this.__useEl, this.__config);
return this;
};
SVG.prototype.fullCircle = function (cx, cy, r) {
initCircle$1(this.__useEl, cx, cy, r);
this.attr({
transform: this.__transform_current
});
full(this.__useEl, this.__config);
return this;
};
SVG.prototype.fillRect = function (x, y, width, height) {
initRect$1(this.__useEl, this.__config, x, y, width, height);
this.attr({
transform: this.__transform_current
});
fill(this.__useEl, this.__config);
return this;
};
SVG.prototype.strokeRect = function (x, y, width, height) {
initRect$1(this.__useEl, this.__config, x, y, width, height);
this.attr({
transform: this.__transform_current
});
stroke(this.__useEl, this.__config);
return this;
};
SVG.prototype.fullRect = function (x, y, width, height) {
initRect$1(this.__useEl, this.__config, x, y, width, height);
this.attr({
transform: this.__transform_current
});
full(this.__useEl, this.__config);
return this;
};
SVG.prototype.beginPath = function () {
this.__currentPosition = [];
this.__path = "";
return this;
};
SVG.prototype.closePath = function () {
this.__path += "Z";
return this;
};
SVG.prototype.moveTo = function (x, y) {
this.__currentPosition = [x, y];
this.__path += "M" + x + " " + y;
return this;
};
SVG.prototype.lineTo = function (x, y) {
this.__currentPosition = [x, y];
this.__path += (this.__path == "" ? "M" : "L") + x + " " + y;
return this;
};
SVG.prototype.fill = function () {
initPath(this.__useEl, this.__path);
this.attr({
transform: this.__transform_current
});
fill(this.__useEl, this.__config);
return this;
};
SVG.prototype.stroke = function () {
initPath(this.__useEl, this.__path);
this.attr({
transform: this.__transform_current
});
stroke(this.__useEl, this.__config);
return this;
};
SVG.prototype.full = function () {
initPath(this.__useEl, this.__path);
this.attr({
transform: this.__transform_current
});
full(this.__useEl, this.__config);
return this;
};
SVG.prototype.save = function () {
this.__transform_history.push(this.__transform_current);
return this;
};
SVG.prototype.restore = function () {
if (this.__transform_history.length > 0)
this.__transform_current = this.__transform_history.pop();
return this;
};
SVG.prototype.arc = function (x, y, r, beginDeg, deg) {
var begPosition = rotate$1(x, y, (beginDeg / 180) * Math.PI, x + r, y);
var endPosition = rotate$1(x, y, ((beginDeg + deg) / 180) * Math.PI, x + r, y);
if (this.__path == "") {
this.__path += "M" + begPosition[0] + "," + begPosition[1];
}
else if (begPosition[0] != this.__currentPosition[0] ||
begPosition[1] != this.__currentPosition[1]) {
this.__path += "L" + begPosition[0] + "," + begPosition[1];
}
this.__path +=
"A" +
r +
"," +
r +
" 0 " +
(deg > 180 || deg < -180 ? 1 : 0) +
"," +
(deg > 0 ? 1 : 0) +
" " +
endPosition[0] +
"," +
endPosition[1];
return this;
};
SVG.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
this.__path += "Q" + cpx + " " + cpy + "," + x + " " + y;
return this;
};
SVG.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
this.__path +=
"C" + cp1x + " " + cp1y + "," + cp2x + " " + cp2y + "," + x + " " + y;
return this;
};
SVG.prototype.bind = function (eventType, callback) {
this.__useEl.addEventListener(eventType, function (event) {
callback.call(this, event, this);
}, false);
return this;
};
SVG.prototype.createLinearGradient = function (x0, y0, x1, y1) {
return linearGradient$1(this.__svg, x0, y0, x1, y1);
};
SVG.prototype.createRadialGradient = function (cx, cy, r) {
return radialGradient$1(this.__svg, cx, cy, r);
};
SVG.prototype.translate = function (dx, dy) {
this.__transform_current += ' translate(' + dx + ',' + dy + ')';
return this;
};
SVG.prototype.rotate = function (deg) {
this.__transform_current += ' rotate(' + deg + ')';
return this;
};
SVG.prototype.install = function (methods) {
var _this = this;
var _loop_1 = function (key) {
if (key in this_1) {
throw new Error("VISLite SVG:Method already exists and cannot be overwritten.");
}
else {
this_1[key] = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var value = methods[key].apply(_this, args);
if (value != void 0)
return value;
return _this;
};
}
};
var this_1 = this;
for (var key in methods) {
_loop_1(key);
}
return this;
};
return SVG;
}());
var SVG = (function (_super) {
__extends(SVG, _super);
function SVG(el) {
var _this = this;
if (!el) {
throw new Error("VISLite SVG:The mount point requires an HTMLElement type but encountered null.");
}
var width = el.clientWidth, height = el.clientHeight;
var ViewSVG;
var _el = el;
if (_el._vislite_svg_) {
ViewSVG = _el._vislite_svg_[0];
}
else {
ViewSVG = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
el.appendChild(ViewSVG);
ViewSVG.setAttribute("width", width + "");
ViewSVG.setAttribute("height", height + "");
ViewSVG.setAttribute("viewBox", "0 0 " + width + " " + height);
_el._vislite_svg_ = [ViewSVG];
el.setAttribute('vislite', 'SVG');
}
_this = _s