/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* @class Ext.draw.Draw
* Base Drawing class. Provides base drawing functions.
* @private
*/
Ext.define('Ext.draw.Draw', {
/* Begin Definitions */
singleton: true,
requires: ['Ext.draw.Color'],
/* End Definitions */
pathToStringRE: /,?([achlmqrstvxz]),?/gi,
pathCommandRE: /([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig,
pathValuesRE: /(-?\d*\.?\d*(?:e[-+]?\d+)?)\s*,?\s*/ig,
stopsRE: /^(\d+%?)$/,
radian: Math.PI / 180,
availableAnimAttrs: {
along: "along",
blur: null,
"clip-rect": "csv",
cx: null,
cy: null,
fill: "color",
"fill-opacity": null,
"font-size": null,
height: null,
opacity: null,
path: "path",
r: null,
rotation: "csv",
rx: null,
ry: null,
scale: "csv",
stroke: "color",
"stroke-opacity": null,
"stroke-width": null,
translation: "csv",
width: null,
x: null,
y: null
},
is: function(o, type) {
type = String(type).toLowerCase();
return (type == "object" && o === Object(o)) ||
(type == "undefined" && typeof o == type) ||
(type == "null" && o === null) ||
(type == "array" && Array.isArray && Array.isArray(o)) ||
(Object.prototype.toString.call(o).toLowerCase().slice(8, -1)) == type;
},
ellipsePath: function(sprite) {
var attr = sprite.attr;
return Ext.String.format("M{0},{1}A{2},{3},0,1,1,{0},{4}A{2},{3},0,1,1,{0},{1}z", attr.x, attr.y - attr.ry, attr.rx, attr.ry, attr.y + attr.ry);
},
rectPath: function(sprite) {
var attr = sprite.attr;
if (attr.radius) {
return Ext.String.format("M{0},{1}l{2},0a{3},{3},0,0,1,{3},{3}l0,{5}a{3},{3},0,0,1,{4},{3}l{6},0a{3},{3},0,0,1,{4},{4}l0,{7}a{3},{3},0,0,1,{3},{4}z", attr.x + attr.radius, attr.y, attr.width - attr.radius * 2, attr.radius, -attr.radius, attr.height - attr.radius * 2, attr.radius * 2 - attr.width, attr.radius * 2 - attr.height);
}
else {
return Ext.String.format("M{0},{1}L{2},{1},{2},{3},{0},{3}z", attr.x, attr.y, attr.width + attr.x, attr.height + attr.y);
}
},
// To be deprecated, converts itself (an arrayPath) to a proper SVG path string
path2string: function () {
return this.join(",").replace(Ext.draw.Draw.pathToStringRE, "$1");
},
// Convert the passed arrayPath to a proper SVG path string (d attribute)
pathToString: function(arrayPath) {
return arrayPath.join(",").replace(Ext.draw.Draw.pathToStringRE, "$1");
},
parsePathString: function (pathString) {
if (!pathString) {
return null;
}
var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0},
data = [],
me = this;
if (me.is(pathString, "array") && me.is(pathString[0], "array")) { // rough assumption
data = me.pathClone(pathString);
}
if (!data.length) {
String(pathString).replace(me.pathCommandRE, function (a, b, c) {
var params = [],
name = b.toLowerCase();
c.replace(me.pathValuesRE, function (a, b) {
b && params.push(+b);
});
if (name == "m" && params.length > 2) {
data.push([b].concat(Ext.Array.splice(params, 0, 2)));
name = "l";
b = (b == "m") ? "l" : "L";
}
while (params.length >= paramCounts[name]) {
data.push([b].concat(Ext.Array.splice(params, 0, paramCounts[name])));
if (!paramCounts[name]) {
break;
}
}
});
}
data.toString = me.path2string;
return data;
},
mapPath: function (path, matrix) {
if (!matrix) {
return path;
}
var x, y, i, ii, j, jj, pathi;
path = this.path2curve(path);
for (i = 0, ii = path.length; i < ii; i++) {
pathi = path[i];
for (j = 1, jj = pathi.length; j < jj-1; j += 2) {
x = matrix.x(pathi[j], pathi[j + 1]);
y = matrix.y(pathi[j], pathi[j + 1]);
pathi[j] = x;
pathi[j + 1] = y;
}
}
return path;
},
pathClone: function(pathArray) {
var res = [],
j, jj, i, ii;
if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) { // rough assumption
pathArray = this.parsePathString(pathArray);
}
for (i = 0, ii = pathArray.length; i < ii; i++) {
res[i] = [];
for (j = 0, jj = pathArray[i].length; j < jj; j++) {
res[i][j] = pathArray[i][j];
}
}
res.toString = this.path2string;
return res;
},
pathToAbsolute: function (pathArray) {
if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) { // rough assumption
pathArray = this.parsePathString(pathArray);
}
var res = [],
x = 0,
y = 0,
mx = 0,
my = 0,
i = 0,
ln = pathArray.length,
r, pathSegment, j, ln2;
// MoveTo initial x/y position
if (ln && pathArray[0][0] == "M") {
x = +pathArray[0][1];
y = +pathArray[0][2];
mx = x;
my = y;
i++;
res[0] = ["M", x, y];
}
for (; i < ln; i++) {
r = res[i] = [];
pathSegment = pathArray[i];
if (pathSegment[0] != pathSegment[0].toUpperCase()) {
r[0] = pathSegment[0].toUpperCase();
switch (r[0]) {
// Elliptical Arc
case "A":
r[1] = pathSegment[1];
r[2] = pathSegment[2];
r[3] = pathSegment[3];
r[4] = pathSegment[4];
r[5] = pathSegment[5];
r[6] = +(pathSegment[6] + x);
r[7] = +(pathSegment[7] + y);
break;
// Vertical LineTo
case "V":
r[1] = +pathSegment[1] + y;
break;
// Horizontal LineTo
case "H":
r[1] = +pathSegment[1] + x;
break;
case "M":
// MoveTo
mx = +pathSegment[1] + x;
my = +pathSegment[2] + y;
default:
j = 1;
ln2 = pathSegment.length;
for (; j < ln2; j++) {
r[j] = +pathSegment[j] + ((j % 2) ? x : y);
}
}
}
else {
j = 0;
ln2 = pathSegment.length;
for (; j < ln2; j++) {
res[i][j] = pathSegment[j];
}
}
switch (r[0]) {
// ClosePath
case "Z":
x = mx;
y = my;
break;
// Horizontal LineTo
case "H":
x = r[1];
break;
// Vertical LineTo
case "V":
y = r[1];
break;
// MoveTo
case "M":
pathSegment = res[i];
ln2 = pathSegment.length;
mx = pathSegment[ln2 - 2];
my = pathSegment[ln2 - 1];
default:
pathSegment = res[i];
ln2 = pathSegment.length;
x = pathSegment[ln2 - 2];
y = pathSegment[ln2 - 1];
}
}
res.toString = this.path2string;
return res;
},
// TO BE DEPRECATED
pathToRelative: function (pathArray) {
if (!this.is(pathArray, "array") || !this.is(pathArray && pathArray[0], "array")) {
pathArray = this.parsePathString(pathArray);
}
var res = [],
x = 0,
y = 0,
mx = 0,
my = 0,
start = 0,
r,
pa,
i,
j,
k,
len,
ii,
jj,
kk;
if (pathArray[0][0] == "M") {
x = pathArray[0][1];
y = pathArray[0][2];
mx = x;
my = y;
start++;
res.push(["M", x, y]);
}
for (i = start, ii = pathArray.length; i < ii; i++) {
r = res[i] = [];
pa = pathArray[i];
if (pa[0] != pa[0].toLowerCase()) {
r[0] = pa[0].toLowerCase();
switch (r[0]) {
case "a":
r[1] = pa[1];
r[2] = pa[2];
r[3] = pa[3];
r[4] = pa[4];
r[5] = pa[5];
r[6] = +(pa[6] - x).toFixed(3);
r[7] = +(pa[7] - y).toFixed(3);
break;
case "v":
r[1] = +(pa[1] - y).toFixed(3);
break;
case "m":
mx = pa[1];
my = pa[2];
default:
for (j = 1, jj = pa.length; j < jj; j++) {
r[j] = +(pa[j] - ((j % 2) ? x : y)).toFixed(3);
}
}
} else {
r = res[i] = [];
if (pa[0] == "m") {
mx = pa[1] + x;
my = pa[2] + y;
}
for (k = 0, kk = pa.length; k < kk; k++) {
res[i][k] = pa[k];
}
}
len = res[i].length;
switch (res[i][0]) {
case "z":
x = mx;
y = my;
break;
case "h":
x += +res[i][len - 1];
break;
case "v":
y += +res[i][len - 1];
break;
default:
x += +res[i][len - 2];
y += +res[i][len - 1];
}
}
res.toString = this.path2string;
return res;
},
// Returns a path converted to a set of curveto commands
path2curve: function (path) {
var me = this,
points = me.pathToAbsolute(path),
ln = points.length,
attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
i, seg, segLn, point;
for (i = 0; i < ln; i++) {
points[i] = me.command2curve(points[i], attrs);
if (points[i].length > 7) {
points[i].shift();
point = points[i];
while (point.length) {
Ext.Array.splice(points, i++, 0, ["C"].concat(Ext.Array.splice(point, 0, 6)));
}
Ext.Array.erase(points, i, 1);
ln = points.length;
i--;
}
seg = points[i];
segLn = seg.length;
attrs.x = seg[segLn - 2];
attrs.y = seg[segLn - 1];
attrs.bx = parseFloat(seg[segLn - 4]) || attrs.x;
attrs.by = parseFloat(seg[segLn - 3]) || attrs.y;
}
return points;
},
interpolatePaths: function (path, path2) {
var me = this,
p = me.pathToAbsolute(path),
p2 = me.pathToAbsolute(path2),
attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
fixArc = function (pp, i) {
if (pp[i].length > 7) {
pp[i].shift();
var pi = pp[i];
while (pi.length) {
Ext.Array.splice(pp, i++, 0, ["C"].concat(Ext.Array.splice(pi, 0, 6)));
}
Ext.Array.erase(pp, i, 1);
ii = Math.max(p.length, p2.length || 0);
}
},
fixM = function (path1, path2, a1, a2, i) {
if (path1 && path2 && path1[i][0] == "M" && path2[i][0] != "M") {
Ext.Array.splice(path2, i, 0, ["M", a2.x, a2.y]);
a1.bx = 0;
a1.by = 0;
a1.x = path1[i][1];
a1.y = path1[i][2];
ii = Math.max(p.length, p2.length || 0);
}
},
i, ii,
seg, seg2, seglen, seg2len;
for (i = 0, ii = Math.max(p.length, p2.length || 0); i < ii; i++) {
p[i] = me.command2curve(p[i], attrs);
fixArc(p, i);
(p2[i] = me.command2curve(p2[i], attrs2));
fixArc(p2, i);
fixM(p, p2, attrs, attrs2, i);
fixM(p2, p, attrs2, attrs, i);
seg = p[i];
seg2 = p2[i];
seglen = seg.length;
seg2len = seg2.length;
attrs.x = seg[seglen - 2];
attrs.y = seg[seglen - 1];
attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
attrs2.bx = (parseFloat(seg2[seg2len - 4]) || attrs2.x);
attrs2.by = (parseFloat(seg2[seg2len - 3]) || attrs2.y);
attrs2.x = seg2[seg2len - 2];
attrs2.y = seg2[seg2len - 1];
}
return [p, p2];
},
//Returns any path command as a curveto command based on the attrs passed
command2curve: function (pathCommand, d) {
var me = this;
if (!pathCommand) {
return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
}
if (pathCommand[0] != "T" && pathCommand[0] != "Q") {
d.qx = d.qy = null;
}
switch (pathCommand[0]) {
case "M":
d.X = pathCommand[1];
d.Y = pathCommand[2];
break;
case "A":
pathCommand = ["C"].concat(me.arc2curve.apply(me, [d.x, d.y].concat(pathCommand.slice(1))));
break;
case "S":
pathCommand = ["C", d.x + (d.x - (d.bx || d.x)), d.y + (d.y - (d.by || d.y))].concat(pathCommand.slice(1));
break;
case "T":
d.qx = d.x + (d.x - (d.qx || d.x));
d.qy = d.y + (d.y - (d.qy || d.y));
pathCommand = ["C"].concat(me.quadratic2curve(d.x, d.y, d.qx, d.qy, pathCommand[1], pathCommand[2]));
break;
case "Q":
d.qx = pathCommand[1];
d.qy = pathCommand[2];
pathCommand = ["C"].concat(me.quadratic2curve(d.x, d.y, pathCommand[1], pathCommand[2], pathCommand[3], pathCommand[4]));
break;
case "L":
pathCommand = ["C"].concat(d.x, d.y, pathCommand[1], pathCommand[2], pathCommand[1], pathCommand[2]);
break;
case "H":
pathCommand = ["C"].concat(d.x, d.y, pathCommand[1], d.y, pathCommand[1], d.y);
break;
case "V":
pathCommand = ["C"].concat(d.x, d.y, d.x, pathCommand[1], d.x, pathCommand[1]);
break;
case "Z":
pathCommand = ["C"].concat(d.x, d.y, d.X, d.Y, d.X, d.Y);
break;
}
return pathCommand;
},
quadratic2curve: function (x1, y1, ax, ay, x2, y2) {
var _13 = 1 / 3,
_23 = 2 / 3;
return [
_13 * x1 + _23 * ax,
_13 * y1 + _23 * ay,
_13 * x2 + _23 * ax,
_13 * y2 + _23 * ay,
x2,
y2
];
},
rotate: function (x, y, rad) {
var cos = Math.cos(rad),
sin = Math.sin(rad),
X = x * cos - y * sin,
Y = x * sin + y * cos;
return {x: X, y: Y};
},
arc2curve: function (x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
// for more information of where this Math came from visit:
// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
var me = this,
PI = Math.PI,
radian = me.radian,
_120 = PI * 120 / 180,
rad = radian * (+angle || 0),
res = [],
math = Math,
mcos = math.cos,
msin = math.sin,
msqrt = math.sqrt,
mabs = math.abs,
masin = math.asin,
xy, x, y, h, rx2, ry2, k, cx, cy, f1, f2, df, c1, s1, c2, s2,
t, hx, hy, m1, m2, m3, m4, newres, i, ln, f2old, x2old, y2old;
if (!recursive) {
xy = me.rotate(x1, y1, -rad);
x1 = xy.x;
y1 = xy.y;
xy = me.rotate(x2, y2, -rad);
x2 = xy.x;
y2 = xy.y;
x = (x1 - x2) / 2;
y = (y1 - y2) / 2;
h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
if (h > 1) {
h = msqrt(h);
rx = h * rx;
ry = h * ry;
}
rx2 = rx * rx;
ry2 = ry * ry;
k = (large_arc_flag == sweep_flag ? -1 : 1) *
msqrt(mabs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)));
cx = k * rx * y / ry + (x1 + x2) / 2;
cy = k * -ry * x / rx + (y1 + y2) / 2;
f1 = masin(((y1 - cy) / ry).toFixed(7));
f2 = masin(((y2 - cy) / ry).toFixed(7));
f1 = x1 < cx ? PI - f1 : f1;
f2 = x2 < cx ? PI - f2 : f2;
if (f1 < 0) {
f1 = PI * 2 + f1;
}
if (f2 < 0) {
f2 = PI * 2 + f2;
}
if (sweep_flag && f1 > f2) {
f1 = f1 - PI * 2;
}
if (!sweep_flag && f2 > f1) {
f2 = f2 - PI * 2;
}
}
else {
f1 = recursive[0];
f2 = recursive[1];
cx = recursive[2];
cy = recursive[3];
}
df = f2 - f1;
if (mabs(df) > _120) {
f2old = f2;
x2old = x2;
y2old = y2;
f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
x2 = cx + rx * mcos(f2);
y2 = cy + ry * msin(f2);
res = me.arc2curve(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
}
df = f2 - f1;
c1 = mcos(f1);
s1 = msin(f1);
c2 = mcos(f2);
s2 = msin(f2);
t = math.tan(df / 4);
hx = 4 / 3 * rx * t;
hy = 4 / 3 * ry * t;
m1 = [x1, y1];
m2 = [x1 + hx * s1, y1 - hy * c1];
m3 = [x2 + hx * s2, y2 - hy * c2];
m4 = [x2, y2];
m2[0] = 2 * m1[0] - m2[0];
m2[1] = 2 * m1[1] - m2[1];
if (recursive) {
return [m2, m3, m4].concat(res);
}
else {
res = [m2, m3, m4].concat(res).join().split(",");
newres = [];
ln = res.length;
for (i = 0; i < ln; i++) {
newres[i] = i % 2 ? me.rotate(res[i - 1], res[i], rad).y : me.rotate(res[i], res[i + 1], rad).x;
}
return newres;
}
},
// TO BE DEPRECATED
rotateAndTranslatePath: function (sprite) {
var alpha = sprite.rotation.degrees,
cx = sprite.rotation.x,
cy = sprite.rotation.y,
dx = sprite.translation.x,
dy = sprite.translation.y,
path,
i,
p,
xy,
j,
res = [];
if (!alpha && !dx && !dy) {
return this.pathToAbsolute(sprite.attr.path);
}
dx = dx || 0;
dy = dy || 0;
path = this.pathToAbsolute(sprite.attr.path);
for (i = path.length; i--;) {
p = res[i] = path[i].slice();
if (p[0] == "A") {
xy = this.rotatePoint(p[6], p[7], alpha, cx, cy);
p[6] = xy.x + dx;
p[7] = xy.y + dy;
} else {
j = 1;
while (p[j + 1] != null) {
xy = this.rotatePoint(p[j], p[j + 1], alpha, cx, cy);
p[j] = xy.x + dx;
p[j + 1] = xy.y + dy;
j += 2;
}
}
}
return res;
},
// TO BE DEPRECATED
rotatePoint: function (x, y, alpha, cx, cy) {
if (!alpha) {
return {
x: x,
y: y
};
}
cx = cx || 0;
cy = cy || 0;
x = x - cx;
y = y - cy;
alpha = alpha * this.radian;
var cos = Math.cos(alpha),
sin = Math.sin(alpha);
return {
x: x * cos - y * sin + cx,
y: x * sin + y * cos + cy
};
},
pathDimensions: function (path) {
if (!path || !(path + "")) {
return {x: 0, y: 0, width: 0, height: 0};
}
path = this.path2curve(path);
var x = 0,
y = 0,
X = [],
Y = [],
i = 0,
ln = path.length,
p, xmin, ymin, xmax, ymax, dim;
for (; i < ln; i++) {
p = path[i];
if (p[0] == "M") {
x = p[1];
y = p[2];
X.push(x);
Y.push(y);
}
else {
dim = this.curveDim(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
X = X.concat(dim.min.x, dim.max.x);
Y = Y.concat(dim.min.y, dim.max.y);
x = p[5];
y = p[6];
}
}
xmin = Math.min.apply(0, X);
ymin = Math.min.apply(0, Y);
xmax = Math.max.apply(0, X);
ymax = Math.max.apply(0, Y);
return {
x: Math.round(xmin),
y: Math.round(ymin),
path: path,
width: Math.round(xmax - xmin),
height: Math.round(ymax - ymin)
};
},
intersectInside: function(path, cp1, cp2) {
return (cp2[0] - cp1[0]) * (path[1] - cp1[1]) > (cp2[1] - cp1[1]) * (path[0] - cp1[0]);
},
intersectIntersection: function(s, e, cp1, cp2) {
var p = [],
dcx = cp1[0] - cp2[0],
dcy = cp1[1] - cp2[1],
dpx = s[0] - e[0],
dpy = s[1] - e[1],
n1 = cp1[0] * cp2[1] - cp1[1] * cp2[0],
n2 = s[0] * e[1] - s[1] * e[0],
n3 = 1 / (dcx * dpy - dcy * dpx);
p[0] = (n1 * dpx - n2 * dcx) * n3;
p[1] = (n1 * dpy - n2 * dcy) * n3;
return p;
},
intersect: function(subjectPolygon, clipPolygon) {
var me = this,
i = 0,
ln = clipPolygon.length,
cp1 = clipPolygon[ln - 1],
outputList = subjectPolygon,
cp2, s, e, ln2, inputList, j;
for (; i < ln; ++i) {
cp2 = clipPolygon[i];
inputList = outputList;
outputList = [];
s = inputList[inputList.length - 1];
j = 0;
ln2 = inputList.length;
for (; j < ln2; j++) {
e = inputList[j];
if (me.intersectInside(e, cp1, cp2)) {
if (!me.intersectInside(s, cp1, cp2)) {
outputList.push(me.intersectIntersection(s, e, cp1, cp2));
}
outputList.push(e);
}
else if (me.intersectInside(s, cp1, cp2)) {
outputList.push(me.intersectIntersection(s, e, cp1, cp2));
}
s = e;
}
cp1 = cp2;
}
return outputList;
},
bezier : function (a, b, c, d, x) {
if (x === 0) {
return a;
}
else if (x === 1) {
return d;
}
var du = 1 - x,
d3 = du * du * du,
r = x / du;
return d3 * (a + r * (3 * b + r * (3 * c + d * r)));
},
bezierDim : function (a, b, c, d) {
var points = [], r,
A, top, C, delta, bottom, s,
min, max, i;
// The min and max happens on boundary or b' == 0
if (a + 3 * c == d + 3 * b) {
r = a - b;
r /= 2 * (a - b - b + c);
if ( r < 1 && r > 0) {
points.push(r);
}
} else {
// b'(x) / -3 = (a-3b+3c-d)x^2+ (-2a+4b-2c)x + (a-b)
// delta = -4 (-b^2+a c+b c-c^2-a d+b d)
A = a - 3 * b + 3 * c - d;
top = 2 * (a - b - b + c);
C = a - b;
delta = top * top - 4 * A * C;
bottom = A + A;
if (delta === 0) {
r = top / bottom;
if (r < 1 && r > 0) {
points.push(r);
}
} else if (delta > 0) {
s = Math.sqrt(delta);
r = (s + top) / bottom;
if (r < 1 && r > 0) {
points.push(r);
}
r = (top - s) / bottom;
if (r < 1 && r > 0) {
points.push(r);
}
}
}
min = Math.min(a, d);
max = Math.max(a, d);
for (i = 0; i < points.length; i++) {
min = Math.min(min, this.bezier(a, b, c, d, points[i]));
max = Math.max(max, this.bezier(a, b, c, d, points[i]));
}
return [min, max];
},
curveDim: function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
var x = this.bezierDim(p1x, c1x, c2x, p2x),
y = this.bezierDim(p1y, c1y, c2y, p2y);
return {
min: {
x: x[0],
y: y[0]
},
max: {
x: x[1],
y: y[1]
}
};
},
/**
* @private
*
* Calculates bezier curve control anchor points for a particular point in a path, with a
* smoothing curve applied. The smoothness of the curve is controlled by the 'value' parameter.
* Note that this algorithm assumes that the line being smoothed is normalized going from left
* to right; it makes special adjustments assuming this orientation.
*
* @param {Number} prevX X coordinate of the previous point in the path
* @param {Number} prevY Y coordinate of the previous point in the path
* @param {Number} curX X coordinate of the current point in the path
* @param {Number} curY Y coordinate of the current point in the path
* @param {Number} nextX X coordinate of the next point in the path
* @param {Number} nextY Y coordinate of the next point in the path
* @param {Number} value A value to control the smoothness of the curve; this is used to
* divide the distance between points, so a value of 2 corresponds to
* half the distance between points (a very smooth line) while higher values
* result in less smooth curves. Defaults to 4.
* @return {Object} Object containing x1, y1, x2, y2 bezier control anchor points; x1 and y1
* are the control point for the curve toward the previous path point, and
* x2 and y2 are the control point for the curve toward the next path point.
*/
getAnchors: function (prevX, prevY, curX, curY, nextX, nextY, value) {
value = value || 4;
var M = Math,
PI = M.PI,
halfPI = PI / 2,
abs = M.abs,
sin = M.sin,
cos = M.cos,
atan = M.atan,
control1Length, control2Length, control1Angle, control2Angle,
control1X, control1Y, control2X, control2Y, alpha;
// Find the length of each control anchor line, by dividing the horizontal distance
// between points by the value parameter.
control1Length = (curX - prevX) / value;
control2Length = (nextX - curX) / value;
// Determine the angle of each control anchor line. If the middle point is a vertical
// turnaround then we force it to a flat horizontal angle to prevent the curve from
// dipping above or below the middle point. Otherwise we use an angle that points
// toward the previous/next target point.
if ((curY >= prevY && curY >= nextY) || (curY <= prevY && curY <= nextY)) {
control1Angle = control2Angle = halfPI;
} else {
control1Angle = atan((curX - prevX) / abs(curY - prevY));
if (prevY < curY) {
control1Angle = PI - control1Angle;
}
control2Angle = atan((nextX - curX) / abs(curY - nextY));
if (nextY < curY) {
control2Angle = PI - control2Angle;
}
}
// Adjust the calculated angles so they point away from each other on the same line
alpha = halfPI - ((control1Angle + control2Angle) % (PI * 2)) / 2;
if (alpha > halfPI) {
alpha -= PI;
}
control1Angle += alpha;
control2Angle += alpha;
// Find the control anchor points from the angles and length
control1X = curX - control1Length * sin(control1Angle);
control1Y = curY + control1Length * cos(control1Angle);
control2X = curX + control2Length * sin(control2Angle);
control2Y = curY + control2Length * cos(control2Angle);
// One last adjustment, make sure that no control anchor point extends vertically past
// its target prev/next point, as that results in curves dipping above or below and
// bending back strangely. If we find this happening we keep the control angle but
// reduce the length of the control line so it stays within bounds.
if ((curY > prevY && control1Y < prevY) || (curY < prevY && control1Y > prevY)) {
control1X += abs(prevY - control1Y) * (control1X - curX) / (control1Y - curY);
control1Y = prevY;
}
if ((curY > nextY && control2Y < nextY) || (curY < nextY && control2Y > nextY)) {
control2X -= abs(nextY - control2Y) * (control2X - curX) / (control2Y - curY);
control2Y = nextY;
}
return {
x1: control1X,
y1: control1Y,
x2: control2X,
y2: control2Y
};
},
/* Smoothing function for a path. Converts a path into cubic beziers. Value defines the divider of the distance between points.
* Defaults to a value of 4.
*/
smooth: function (originalPath, value) {
var path = this.path2curve(originalPath),
newp = [path[0]],
x = path[0][1],
y = path[0][2],
j,
points,
i = 1,
ii = path.length,
beg = 1,
mx = x,
my = y,
pathi,
pathil,
pathim,
pathiml,
pathip,
pathipl,
begl;
for (; i < ii; i++) {
pathi = path[i];
pathil = pathi.length;
pathim = path[i - 1];
pathiml = pathim.length;
pathip = path[i + 1];
pathipl = pathip && pathip.length;
if (pathi[0] == "M") {
mx = pathi[1];
my = pathi[2];
j = i + 1;
while (path[j][0] != "C") {
j++;
}
newp.push(["M", mx, my]);
beg = newp.length;
x = mx;
y = my;
continue;
}
if (pathi[pathil - 2] == mx && pathi[pathil - 1] == my && (!pathip || pathip[0] == "M")) {
begl = newp[beg].length;
points = this.getAnchors(pathim[pathiml - 2], pathim[pathiml - 1], mx, my, newp[beg][begl - 2], newp[beg][begl - 1], value);
newp[beg][1] = points.x2;
newp[beg][2] = points.y2;
}
else if (!pathip || pathip[0] == "M") {
points = {
x1: pathi[pathil - 2],
y1: pathi[pathil - 1]
};
} else {
points = this.getAnchors(pathim[pathiml - 2], pathim[pathiml - 1], pathi[pathil - 2], pathi[pathil - 1], pathip[pathipl - 2], pathip[pathipl - 1], value);
}
newp.push(["C", x, y, points.x1, points.y1, pathi[pathil - 2], pathi[pathil - 1]]);
x = points.x2;
y = points.y2;
}
return newp;
},
findDotAtSegment: function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
var t1 = 1 - t;
return {
x: Math.pow(t1, 3) * p1x + Math.pow(t1, 2) * 3 * t * c1x + t1 * 3 * t * t * c2x + Math.pow(t, 3) * p2x,
y: Math.pow(t1, 3) * p1y + Math.pow(t1, 2) * 3 * t * c1y + t1 * 3 * t * t * c2y + Math.pow(t, 3) * p2y
};
},
/**
* @private
*/
snapEnds: function (from, to, stepsMax, prettyNumbers) {
if (Ext.isDate(from)) {
return this.snapEndsByDate(from, to, stepsMax);
}
var step = (to - from) / stepsMax,
level = Math.floor(Math.log(step) / Math.LN10) + 1,
m = Math.pow(10, level),
cur,
floor,
modulo = Math.round((step % m) * Math.pow(10, 2 - level)),
interval = [[0, 15], [10, 1], [20, 4], [25, 2], [50, 9], [100, 15]],
stepCount = 0,
value,
weight,
i,
topValue,
topWeight = 1e9,
ln = interval.length;
floor = Math.floor(from / m) * m;
if (from == floor && floor > 0) {
floor = Math.floor((from - (m/10)) / m) * m;
}
if (prettyNumbers) {
for (i = 0; i < ln; i++) {
value = interval[i][0];
weight = (value - modulo) < 0 ? 1e6 : (value - modulo) / interval[i][1];
if (weight < topWeight) {
topValue = value;
topWeight = weight;
}
}
step = Math.floor(step * Math.pow(10, -level)) * Math.pow(10, level) + topValue * Math.pow(10, level - 2);
if (from < 0 && to >= 0) {
cur = 0;
while (cur > from) {
cur -= step;
stepCount++;
}
from = +cur.toFixed(10);
cur = 0;
while (cur < to) {
cur += step;
stepCount++;
}
to = +cur.toFixed(10);
} else {
cur = from = floor;
while (cur < to) {
cur += step;
stepCount++;
}
}
to = +cur.toFixed(10);
} else {
from = floor;
stepCount = stepsMax;
}
return {
from: from,
to: to,
power: level,
step: step,
steps: stepCount
};
},
/**
* snapEndsByDate is a utility method to deduce an appropriate tick configuration for the data set of given
* feature. Refer to {@link #snapEnds}.
*
* @param {Date} from The minimum value in the data
* @param {Date} to The maximum value in the data
* @param {Number} stepsMax The maximum number of ticks
* @param {Boolean} lockEnds If true, the 'from' and 'to' parameters will be used as fixed end values and will not be adjusted
*
* @return {Object} The calculated step and ends info; properties are:
* - from: The result start value, which may be lower than the original start value
* - to: The result end value, which may be higher than the original end value
* - step: The fixed value size of each step, or undefined if the steps are not fixed.
* - steps: The number of steps if the steps are fixed, or an array of step values.
* NOTE: Even when the steps have a fixed value, they may not divide the from/to range perfectly evenly;
* there may be a smaller distance between the last step and the end value than between prior
* steps, particularly when the `endsLocked` param is true. Therefore it is best to not use
* the `steps` result when finding the axis tick points, instead use the `step`, `to`, and
* `from` to find the correct point for each tick.
*/
snapEndsByDate: function (from, to, stepsMax, lockEnds) {
var selectedStep = false,
scales = [
[Ext.Date.MILLI, [1, 2, 5, 10, 20, 50, 100, 200, 250, 500]],
[Ext.Date.SECOND, [1, 2, 5, 10, 15, 30]],
[Ext.Date.MINUTE, [1, 2, 5, 10, 15, 30]],
[Ext.Date.HOUR, [1, 2, 3, 4, 6, 12]],
[Ext.Date.DAY, [1, 2, 7, 14]],
[Ext.Date.MONTH, [1, 2, 3, 6]]
],
sLen = scales.length,
stop = false,
scale, j, yearDiff, s;
// Find the most desirable scale
for (s = 0; s < sLen; s++) {
scale = scales[s];
if (!stop) {
for (j = 0; j < scale[1].length; j++) {
if (to < Ext.Date.add(from, scale[0], scale[1][j] * stepsMax)) {
selectedStep = [scale[0], scale[1][j]];
stop = true;
break;
}
}
}
}
if (!selectedStep) {
yearDiff = this.snapEnds(from.getFullYear(), to.getFullYear() + 1, stepsMax, lockEnds);
selectedStep = [Date.YEAR, Math.round(yearDiff.step)];
}
return this.snapEndsByDateAndStep(from, to, selectedStep, lockEnds);
},
/**
* snapEndsByDateAndStep is a utility method to deduce an appropriate tick configuration for the data set of given
* feature and specific step size.
*
* @param {Date} from The minimum value in the data
* @param {Date} to The maximum value in the data
* @param {Array} step An array with two components: The first is the unit of the step (day, month, year, etc).
* The second is the number of units for the step (1, 2, etc.).
* If the number is an integer, it represents the number of units for the step ([Ext.Date.DAY, 2] means "Every other day").
* If the number is a fraction, it represents the number of steps per unit ([Ext.Date.DAY, 1/2] means "Twice a day").
* If the unit is the month, the steps may be adjusted depending on the month. For instance [Ext.Date.MONTH, 1/3], which means "Three times a month",
* generates steps on the 1st, the 10th and the 20th of every month regardless of whether a month has 28 days or 31 days. The steps are generated
* as follows:
* - [Ext.Date.MONTH, n]: on the current date every 'n' months, maxed to the number of days in the month.
* - [Ext.Date.MONTH, 1/2]: on the 1st and 15th of every month.
* - [Ext.Date.MONTH, 1/3]: on the 1st, 10th and 20th of every month.
* - [Ext.Date.MONTH, 1/4]: on the 1st, 8th, 15th and 22nd of every month.
* @param {Boolean} lockEnds If true, the 'from' and 'to' parameters will be used as fixed end values
* and will not be adjusted
*
* @return {Object} The calculated step and ends info; properties are:
* - from: The result start value, which may be lower than the original start value
* - to: The result end value, which may be higher than the original end value
* - step: The fixed value size of each step, or undefined if the steps are not fixed.
* - steps: The number of steps if the steps are fixed, or an array of step values.
* NOTE: Even when the steps have a fixed value, they may not divide the from/to range perfectly evenly;
* there may be a smaller distance between the last step and the end value than between prior
* steps, particularly when the `endsLocked` param is true. Therefore it is best to not use
* the `steps` result when finding the axis tick points, instead use the `step`, `to`, and
* `from` to find the correct point for each tick.
*/
snapEndsByDateAndStep: function(from, to, step, lockEnds) {
var fromStat = [from.getFullYear(), from.getMonth(), from.getDate(),
from.getHours(), from.getMinutes(), from.getSeconds(), from.getMilliseconds()],
steps, testFrom, testTo, date, year, month, day, fractionalMonth,
stepUnit = step[0], stepValue = step[1];
if (lockEnds) {
testFrom = from;
} else {
switch (stepUnit) {
case Ext.Date.MILLI:
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
fromStat[4], fromStat[5], Math.floor(fromStat[6] / stepValue) * stepValue);
break;
case Ext.Date.SECOND:
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
fromStat[4], Math.floor(fromStat[5] / stepValue) * stepValue, 0);
break;
case Ext.Date.MINUTE:
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2], fromStat[3],
Math.floor(fromStat[4] / stepValue) * stepValue, 0, 0);
break;
case Ext.Date.HOUR:
testFrom = new Date(fromStat[0], fromStat[1], fromStat[2],
Math.floor(fromStat[3] / stepValue) * stepValue, 0, 0, 0);
break;
case Ext.Date.DAY:
testFrom = new Date(fromStat[0], fromStat[1],
Math.floor((fromStat[2] - 1) / stepValue) * stepValue + 1, 0, 0, 0, 0);
break;
case Ext.Date.MONTH:
testFrom = new Date(fromStat[0], Math.floor(fromStat[1] / stepValue) * stepValue, 1, 0, 0, 0, 0);
break;
default: // Ext.Date.YEAR
testFrom = new Date(Math.floor(fromStat[0] / stepValue) * stepValue, 0, 1, 0, 0, 0, 0);
break;
}
}
fractionalMonth = ((stepUnit === Ext.Date.MONTH) && (stepValue == 1/2 || stepValue == 1/3 || stepValue == 1/4));
steps = (fractionalMonth ? [] : 0);
// TODO(zhangbei) : We can do it better somehow...
testTo = new Date(testFrom);
while (testTo < to) {
if (fractionalMonth) {
date = new Date(testTo);
year = date.getFullYear();
month = date.getMonth();
day = date.getDate();
switch(stepValue) {
case 1/2: // the 1st and 15th of every month
if (day >= 15) {
day = 1;
if (++month > 11) {
year++;
}
}
else {
day = 15;
}
break;
case 1/3: // the 1st, 10th and 20th of every month
if (day >= 20) {
day = 1;
if (++month > 11) {
year++;
}
}
else {
if (day >= 10) {
day = 20
}
else {
day = 10;
}
}
break;
case 1/4: // the 1st, 8th, 15th and 22nd of every month
if (day >= 22) {
day = 1;
if (++month > 11) {
year++;
}
}
else {
if (day >= 15) {
day = 22
}
else {
if (day >= 8) {
day = 15
}
else {
day = 8;
}
}
}
break;
}
testTo.setYear(year);
testTo.setMonth(month);
testTo.setDate(day);
steps.push(new Date(testTo));
}
else {
testTo = Ext.Date.add(testTo, stepUnit, stepValue);
steps++;
}
}
if (lockEnds) {
testTo = to;
}
if (fractionalMonth) {
return {
from : +testFrom,
to : +testTo,
steps : steps // array of steps
};
}
else {
return {
from : +testFrom,
to : +testTo,
step : (testTo - testFrom) / steps,
steps : steps // number of steps
};
}
},
sorter: function (a, b) {
return a.offset - b.offset;
},
rad: function(degrees) {
return degrees % 360 * Math.PI / 180;
},
degrees: function(radian) {
return radian * 180 / Math.PI % 360;
},
withinBox: function(x, y, bbox) {
bbox = bbox || {};
return (x >= bbox.x && x <= (bbox.x + bbox.width) && y >= bbox.y && y <= (bbox.y + bbox.height));
},
parseGradient: function(gradient) {
var me = this,
type = gradient.type || 'linear',
angle = gradient.angle || 0,
radian = me.radian,
stops = gradient.stops,
stopsArr = [],
stop,
vector,
max,
stopObj;
if (type == 'linear') {
vector = [0, 0, Math.cos(angle * radian), Math.sin(angle * radian)];
max = 1 / (Math.max(Math.abs(vector[2]), Math.abs(vector[3])) || 1);
vector[2] *= max;
vector[3] *= max;
if (vector[2] < 0) {
vector[0] = -vector[2];
vector[2] = 0;
}
if (vector[3] < 0) {
vector[1] = -vector[3];
vector[3] = 0;
}
}
for (stop in stops) {
if (stops.hasOwnProperty(stop) && me.stopsRE.test(stop)) {
stopObj = {
offset: parseInt(stop, 10),
color: Ext.draw.Color.toHex(stops[stop].color) || '#ffffff',
opacity: stops[stop].opacity || 1
};
stopsArr.push(stopObj);
}
}
// Sort by pct property
Ext.Array.sort(stopsArr, me.sorter);
if (type == 'linear') {
return {
id: gradient.id,
type: type,
vector: vector,
stops: stopsArr
};
}
else {
return {
id: gradient.id,
type: type,
centerX: gradient.centerX,
centerY: gradient.centerY,
focalX: gradient.focalX,
focalY: gradient.focalY,
radius: gradient.radius,
vector: vector,
stops: stopsArr
};
}
}
});
|
Download
