vislite
Version:
灵活、快速、简单的数据可视化交互式跨端前端库
552 lines (535 loc) • 20 kB
JavaScript
/*!
* SVG of VISLite JavaScript Library v1.3.0
* git+https://github.com/oi-contrib/VISLite.git
*/
/******************************************************************************
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 __());
}
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$1 = 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$1(0, 0, beginA, r1, 0);
temp[0] = p[0];
temp[1] = p[1];
p = rotate$1(0, 0, rotateA, p[0], p[1]);
temp[2] = p[0];
temp[3] = p[1];
p = rotate$1(0, 0, beginA, r2, 0);
temp[4] = p[0];
temp[5] = p[1];
p = rotate$1(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 = 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 = 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 = 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 = 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);
});
};
function rotate (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
];
}
var enhanceGradient = 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 = 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(linearGradient, gradientId);
};
var radialGradient = 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(radialGradient, gradientId);
};
function defaultFactory () {
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();
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());
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(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(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(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(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(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(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(this.__useEl, cx, cy, r);
fill(this.__useEl, this.__config);
return this;
};
SVG.prototype.strokeCircle = function (cx, cy, r) {
initCircle(this.__useEl, cx, cy, r);
stroke(this.__useEl, this.__config);
return this;
};
SVG.prototype.fullCircle = function (cx, cy, r) {
initCircle(this.__useEl, cx, cy, r);
full(this.__useEl, this.__config);
return this;
};
SVG.prototype.fillRect = function (x, y, width, height) {
initRect(this.__useEl, this.__config, x, y, width, height);
fill(this.__useEl, this.__config);
return this;
};
SVG.prototype.strokeRect = function (x, y, width, height) {
initRect(this.__useEl, this.__config, x, y, width, height);
stroke(this.__useEl, this.__config);
return this;
};
SVG.prototype.fullRect = function (x, y, width, height) {
initRect(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(x, y, (beginDeg / 180) * Math.PI, x + r, y);
var endPosition = rotate(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(this.__svg, x0, y0, x1, y1);
};
SVG.prototype.createRadialGradient = function (cx, cy, r) {
return radialGradient(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));
export { SVG as default };