vislite
Version:
灵活、快速、简单的数据可视化交互式跨端前端库
1,265 lines (1,221 loc) • 108 kB
JavaScript
/*!
* VISLite JavaScript Library v1.3.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函数堆栈
var $timers = [];
//唯一定时器的定时间隔
var $interval = 13;
//定时器ID
var $timerId;
/**
* 动画轮播
* @param {function} doback 轮询函数，有一个形参deep，0-1，表示执行进度
* @param {number} duration 动画时长，可选
* @param {function} callback 动画结束回调，可选，有一个形参deep，0-1，表示执行进度
*
* @returns {function} 返回一个函数，调用该函数，可以提前结束动画
*/
function animation(doback, duration, callback) {
if (arguments.length < 2) duration = 400;
if (arguments.length < 3) callback = function () { };
var clock = {
//把tick函数推入堆栈
"timer": function (tick, duration, callback) {
if (!tick) {
throw new Error('Tick is required!');
}
var id = new Date().valueOf() + "_" + (Math.random() * 1000).toFixed(0);
$timers.push({
"id": id,
"createTime": new Date(),
"tick": tick,
"duration": duration,
"callback": callback
});
clock.start();
return id;
},
//开启唯一的定时器timerId
"start": function () {
if (!$timerId) {
$timerId = setInterval(clock.tick, $interval);
}
},
//被定时器调用，遍历timers堆栈
"tick": function () {
var 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()) / duration;
passTime = passTime > 1 ? 1 : passTime;
tick(passTime);
if (passTime < 1 && timer.id) {
//动画没有结束再添加
$timers.push(timer);
} else {
callback(passTime);
}
}
if ($timers.length <= 0) {
clock.stop();
}
},
//停止定时器，重置timerId=null
"stop": function () {
if ($timerId) {
clearInterval($timerId);
$timerId = null;
}
}
};
var id = clock.timer(function (deep) {
//其中deep为0-1，表示改变的程度
doback(deep);
}, duration, callback);
// 返回一个函数
// 用于在动画结束前结束动画
return function () {
var i;
for (i in $timers) {
if ($timers[i].id == id) {
$timers[i].id = void 0;
return;
}
}
};
}
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 = "vislite-lg-" + new Date().valueOf() + "-" + Math.random();
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 = "vislite-rg-" + new Date().valueOf() + "-" + Math.random();
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: "#000",
strokeStyle: "#000",
textAlign: "left",
textBaseline: "middle",
"fontSize": 16,
"fontFamily": "sans-serif",
"arcStartCap": "butt",
"arcEndCap": "butt",
lineDash: [],
lineWidth: 1,
lineCap: "butt",
lineJoin: "miter",
"rectRadius": []
};
}
var SVG$1 = (function () {
function SVG(svg) {
this.name = "SVG";
this.__config = defaultFactory$1();
this.__path = "";
this.__currentPosition = [];
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 () {
this.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: "rect",
}[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.__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.__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.__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);
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);
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);
full(this.__useEl, this.__config);
return this;
};
SVG.prototype.fillCircle = function (cx, cy, r) {
initCircle$1(this.__useEl, cx, cy, r);
fill(this.__useEl, this.__config);
return this;
};
SVG.prototype.strokeCircle = function (cx, cy, r) {
initCircle$1(this.__useEl, cx, cy, r);
stroke(this.__useEl, this.__config);
return this;
};
SVG.prototype.fullCircle = function (cx, cy, r) {
initCircle$1(this.__useEl, cx, cy, r);
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);
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);
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);
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);
fill(this.__useEl, this.__config);
return this;
};
SVG.prototype.stroke = function () {
initPath(this.__useEl, this.__path);
stroke(this.__useEl, this.__config);
return this;
};
SVG.prototype.full = function () {
initPath(this.__useEl, this.__path);
full(this.__useEl, this.__config);
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);
};
return SVG;
}());
var SVG = (function (_super) {
__extends(SVG, _super);
function SVG(el) {
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 = 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);
return _super.call(this, ViewSVG) || this;
}
return SVG;
}(SVG$1));
var initText = function (painter, config, x, y, deg) {
painter.beginPath();
painter.translate(x, y);
painter.rotate(deg);
painter.font =
config.fontStyle +
" " +
config.fontWeight +
" " +
config.fontSize +
"px " +
config.fontFamily;
return painter;
};
var initArc = function (painter, config, cx, cy, r1, r2, beginDeg, deg) {
if (r1 > r2) {
var temp = r1;
r1 = r2;
r2 = temp;
}
beginDeg = beginDeg % (Math.PI * 2);
if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
deg = Math.PI * 2;
}
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) {
if (r < 0)
r = -r;
painter.beginPath();
painter.moveTo(begInnerX, begInnerY);
painter.arc(cx, cy, r1, beginA, endA, false);
if (config.arcEndCap == "round")
painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, true);
else if (config.arcEndCap == "-round")
painter.arc((endInnerX + endOuterX) * 0.5, (endInnerY + endOuterY) * 0.5, r, endA - Math.PI, endA, false);
else
painter.lineTo(endOuterX, endOuterY);
painter.arc(cx, cy, r2, endA, beginA, true);
if (config.arcStartCap == "round")
painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, true);
else if (config.arcStartCap == "-round")
painter.arc((begInnerX + begOuterX) * 0.5, (begInnerY + begOuterY) * 0.5, r, beginA, beginA - Math.PI, false);
else
painter.lineTo(begInnerX, begInnerY);
});
if (config.arcStartCap == "butt")
painter.closePath();
return painter;
};
var initCircle = function (painter, cx, cy, r) {
painter.beginPath();
painter.moveTo(cx + r, cy);
painter.arc(cx, cy, r, 0, Math.PI * 2);
return painter;
};
var initRect = function (painter, config, x, y, width, height) {
painter.beginPath();
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 (rectRadius.length >= 4) {
painter.arc(x + rectRadius[0], y + rectRadius[0], rectRadius[0], Math.PI, Math.PI * 1.5);
painter.arc(x + width - rectRadius[1], y + rectRadius[1], rectRadius[1], 1.5 * Math.PI, 0);
painter.arc(x + width - rectRadius[2], y + height - rectRadius[2], rectRadius[2], 0, Math.PI * 0.5);
painter.arc(x + rectRadius[3], y + height - rectRadius[3], rectRadius[3], 0.5 * Math.PI, Math.PI);
painter.closePath();
}
else {
painter.rect(x, y, width, height);
}
return painter;
};
function texts (painter, contents, width, height, doback) {
var lineNumber = 0, content = "";
for (var i = 0; i < contents.length; i++) {
if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
lineNumber += 1;
doback(content, (lineNumber - 0.5) * height);
content = contents[i];
}
else if (i == contents.length - 1) {
lineNumber += 1;
doback(content + contents[i], (lineNumber - 0.5) * height);
}
else {
content += contents[i];
}
}
return lineNumber * height;
}
function defaultFactory (type) {
var special = {
"fontSize": 16,
"fontFamily": "sans-serif",
"fontWeight": 400,
"fontStyle": "normal",
"arcStartCap": 'butt',
"arcEndCap": 'butt',
"rectRadius": []
};
var init = {
"fillStyle": 'black',
"strokeStyle": 'black',
"lineWidth": 1,
"lineCap": "butt",
"lineJoin": "miter",
"lineDash": [],
"textAlign": 'left',
"textBaseline": 'middle',
"shadowBlur": 0,
"shadowColor": "black"
};
if (type == 'special')
return special;
else if (type == 'init')
return init;
else
return __assign(__assign({}, special), init);
}
var Painter = (function () {
function Painter(canvas, opts, region, isPainter, scaleSize) {
if (opts === void 0) { opts = {}; }
if (isPainter === void 0) { isPainter = false; }
this.__region = null;
this.__onlyRegion = false;
this.__onlyView = false;
this.__specialConfig = defaultFactory("special");
this.__initConfig = defaultFactory("init");
this.painter = canvas.getContext("2d", opts);
this.__region = region;
this.__isPainter = isPainter;
this.painter.textBaseline = 'middle';
this.painter.textAlign = 'left';
}
Painter.prototype.useConfig = function (key, value) {
if (this.__region && !this.__onlyView) {
if (['fillStyle', 'strokeStyle', 'shadowBlur', 'shadowColor'].indexOf(key) < 0) {
this.__region.useConfig(key, value);
}
}
if (this.__isPainter && this.__onlyRegion)
return this;
if (key == 'lineDash') {
if (this.painter.setLineDash)
this.painter.setLineDash(value);
}
else if (key in this.__specialConfig) {
if (key == 'fontSize') {
value = Math.round(value);
}
this.__specialConfig[key] = value;
}
else if (key in this.__initConfig) {
this.painter[key] = value;
}
else {
throw new Error('Illegal configuration item of painter : ' + key + " !");
}
return this;
};
Painter.prototype.fillText = function (text, x, y, deg) {
if (deg === void 0) { deg = 0; }
if (this.__region && !this.__onlyView)
this.__region.fillText(text, x, y, deg);
if (this.__isPainter && this.__onlyRegion)
return this;
this.painter.save();
initText(this.painter, this.__specialConfig, x, y, deg).fillText(text, 0, 0);
this.painter.restore();
return this;
};
Painter.prototype.strokeText = function (text, x,