Added gradients. Changed plugin architecture.
Dmitry Baranovskiy
parent
c22245fc56
commit
2270a96f12
48
demojs.html
48
demojs.html
|
|
@ -3,6 +3,11 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Savage</title>
|
||||
<style media="screen">
|
||||
body {
|
||||
background: #030 url("bg.png");
|
||||
}
|
||||
</style>
|
||||
<script src="eve/eve.js"></script>
|
||||
<script src="mina.js"></script>
|
||||
<script src="elemental.js"></script>
|
||||
|
|
@ -25,31 +30,31 @@
|
|||
</script>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
// // 1
|
||||
// 1
|
||||
var s = Savage("100%", 600);
|
||||
// // 2
|
||||
// 2
|
||||
var c = s.circle(100, 100, 50);
|
||||
// // 3
|
||||
// 3
|
||||
c.attr({
|
||||
fill: "#bada55",
|
||||
stroke: "#000",
|
||||
"stroke-width": 5
|
||||
});
|
||||
// // 4
|
||||
// 4
|
||||
var c2 = s.circle(70, 100, 40);
|
||||
var g = s.g(c2, s.circle(130, 100, 40));
|
||||
var g = s.group(c2, s.circle(130, 100, 40));
|
||||
g.attr({
|
||||
fill: "#fff"
|
||||
});
|
||||
// // 5
|
||||
// 5
|
||||
c.attr({
|
||||
mask: g
|
||||
});
|
||||
// // 6
|
||||
// 6
|
||||
c2.animate({r: 25}, 1000);
|
||||
// // 7
|
||||
// 7
|
||||
g.select("circle:nth-child(2)").animate({r: 25}, 1000);
|
||||
// // 8
|
||||
// 8
|
||||
var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
|
||||
fill: "none",
|
||||
stroke: "#bada55",
|
||||
|
|
@ -58,26 +63,33 @@
|
|||
c.attr({
|
||||
fill: p
|
||||
});
|
||||
// // 9
|
||||
// 9
|
||||
g.attr({
|
||||
fill: Savage(document.getElementById("pattern"))
|
||||
});
|
||||
// // 10
|
||||
// 10
|
||||
g.attr({fill: "r()#fff-#000"});
|
||||
// 11
|
||||
g.attr({fill: "R(100, 100, 50)#fff-#000"});
|
||||
// 12
|
||||
var svg = document.getElementById("svg").text;
|
||||
var f = Savage.fragment(svg);
|
||||
f.select("path[fill='#D40000']").attr({fill: "#bada55"});
|
||||
g = s.g(f.selectAll("path"));
|
||||
g = s.group(f.selectAll("path"));
|
||||
s.append(g);
|
||||
// // 11
|
||||
// 13
|
||||
g.attr({
|
||||
transform: "r45t100,0s.5"
|
||||
});
|
||||
console.log(g.attr("transform"));
|
||||
// // 12
|
||||
// console.log(g.attr("transform"));
|
||||
// 14
|
||||
s.text(200, 100, "SAVAGE");
|
||||
// // 13
|
||||
var t = s.text(200, 120, ["S","A","V","A","G","E"]);
|
||||
t.selectAll("tspan tspan:nth-child(odd)").attr({fill: "red"});
|
||||
// 15
|
||||
var t = s.text(200, 120, "SAVAGE".split(""));
|
||||
t.selectAll("tspan tspan:nth-child(odd)").attr({
|
||||
fill: "#900",
|
||||
"font-size": "20px"
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
(function () {
|
||||
Savage.plugin(function (Savage, Element, Paper, glob) {
|
||||
var mmax = Math.max,
|
||||
mmin = Math.min,
|
||||
g = eve("savage.globals")[0];
|
||||
mmin = Math.min;
|
||||
|
||||
// Set
|
||||
var Set = function (items) {
|
||||
|
|
@ -71,9 +70,9 @@
|
|||
}
|
||||
return this;
|
||||
};
|
||||
setproto.attr = function (name, value) {
|
||||
setproto.attr = function (value) {
|
||||
for (var i = 0, ii = this.items.length; i < ii; i++) {
|
||||
this.items[i].attr(name, value);
|
||||
this.items[i].attr(value);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
|
@ -190,11 +189,11 @@
|
|||
};
|
||||
setproto.type = "set";
|
||||
// export
|
||||
g.savage.set = function () {
|
||||
Savage.set = function () {
|
||||
var set = new Set;
|
||||
if (arguments.length) {
|
||||
set.push.apply(set, Array.prototype.slice.call(arguments, 0));
|
||||
}
|
||||
return set;
|
||||
};
|
||||
})();
|
||||
});
|
||||
190
svg.js
190
svg.js
|
|
@ -11,6 +11,8 @@ var Savage = function (w, h) {
|
|||
return new Element(glob.doc.querySelector(w));
|
||||
}
|
||||
}
|
||||
w = w == null ? "100%" : w;
|
||||
h = h == null ? "100%" : h;
|
||||
return new Paper(w, h);
|
||||
};
|
||||
var glob = {
|
||||
|
|
@ -38,13 +40,12 @@ var has = "hasOwnProperty",
|
|||
spaces = "\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029",
|
||||
separator = new RegExp("[," + spaces + "]+"),
|
||||
whitespace = new RegExp("[" + spaces + "]", "g"),
|
||||
commaSpaces = new RegExp("[" + spaces + "]*,[" + spaces + "*]"),
|
||||
commaSpaces = new RegExp("[" + spaces + "]*,[" + spaces + "]*"),
|
||||
hsrg = {hs: 1, rg: 1},
|
||||
p2s = /,?([a-z]),?/gi,
|
||||
pathCommand = new RegExp("([a-z])[" + spaces + ",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?[" + spaces + "]*,?[" + spaces + "]*)+)", "ig"),
|
||||
tCommand = new RegExp("([rstm])[" + spaces + ",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?[" + spaces + "]*,?[" + spaces + "]*)+)", "ig"),
|
||||
pathValues = new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)[" + spaces + "]*,?[" + spaces + "]*", "ig"),
|
||||
radial_gradient = new RegExp("^r(?:\\(([^,]+?)[" + spaces + "]*,[" + spaces + "]*([^\\)]+?)\\))?"),
|
||||
idgen = 0,
|
||||
idprefix = "S" + (+new Date).toString(36),
|
||||
ID = function () {
|
||||
|
|
@ -109,6 +110,24 @@ function is(o, type) {
|
|||
(type == "array" && Array.isArray && Array.isArray(o)) ||
|
||||
objectToString.call(o).slice(8, -1).toLowerCase() == type;
|
||||
}
|
||||
var preload = (function () {
|
||||
function onerror() {
|
||||
this.parentNode.removeChild(this);
|
||||
}
|
||||
return function (src, f) {
|
||||
var img = glob.doc.createElement("img"),
|
||||
body = glob.doc.body;
|
||||
img.style.cssText = "position:absolute;left:-9999em;top:-9999em";
|
||||
img.onload = function () {
|
||||
f.call(img);
|
||||
img.onload = img.onerror = null;
|
||||
body.removeChild(img);
|
||||
};
|
||||
img.onerror = onerror;
|
||||
body.appendChild(img);
|
||||
img.src = src;
|
||||
};
|
||||
}());
|
||||
function clone(obj) {
|
||||
if (typeof obj == "function" || Object(obj) !== obj) {
|
||||
return obj;
|
||||
|
|
@ -425,7 +444,7 @@ Savage.Matrix = Matrix;
|
|||
# <li>Colour name (“<code>red</code>”, “<code>green</code>”, “<code>cornflowerblue</code>”, etc)</li>
|
||||
# <li>#••• — shortened HTML colour: (“<code>#000</code>”, “<code>#fc0</code>”, etc)</li>
|
||||
# <li>#•••••• — full length HTML colour: (“<code>#000000</code>”, “<code>#bd2300</code>”)</li>
|
||||
# <li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<code>rgb(200, 100, 0)</code>”)</li>
|
||||
# <li>rgb(•••, •••, •••) — red, green and blue channels values: (“<code>rgb(200, 100, 0)</code>”)</li>
|
||||
# <li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<code>rgb(100%, 175%, 0%)</code>”)</li>
|
||||
# <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<code>hsb(0.5, 0.25, 1)</code>”)</li>
|
||||
# <li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
|
||||
|
|
@ -438,7 +457,7 @@ Savage.Matrix = Matrix;
|
|||
o g (number) green,
|
||||
o b (number) blue
|
||||
o hex (string) color in HTML/CSS format: #••••••,
|
||||
o error (boolean) true if string can’t be parsed
|
||||
o error (boolean) true if string cant be parsed
|
||||
o }
|
||||
\*/
|
||||
Savage.getRGB = cacher(function (colour) {
|
||||
|
|
@ -571,7 +590,9 @@ hsltoString = function () {
|
|||
return "hsl(" + [this.h, this.s, this.l] + ")";
|
||||
},
|
||||
rgbtoString = function () {
|
||||
return this.hex;
|
||||
return this.opacity == 1 || this.opacity == null ?
|
||||
this.hex :
|
||||
"rgba(" + [this.r, this.g, this.b, this.opacity] + ")";
|
||||
},
|
||||
prepareRGB = function (r, g, b) {
|
||||
if (g == null && is(r, "object") && "r" in r && "g" in r && "b" in r) {
|
||||
|
|
@ -594,9 +615,9 @@ prepareRGB = function (r, g, b) {
|
|||
return [r, g, b];
|
||||
},
|
||||
packageRGB = function (r, g, b, o) {
|
||||
r *= 255;
|
||||
g *= 255;
|
||||
b *= 255;
|
||||
r = math.round(r * 255);
|
||||
g = math.round(g * 255);
|
||||
b = math.round(b * 255);
|
||||
var rgb = {
|
||||
r: r,
|
||||
g: g,
|
||||
|
|
@ -621,7 +642,7 @@ packageRGB = function (r, g, b, o) {
|
|||
o g (number) green,
|
||||
o b (number) blue,
|
||||
o hex (string) color in HTML/CSS format: #••••••,
|
||||
o error (boolean) `true` if string can’t be parsed,
|
||||
o error (boolean) `true` if string cant be parsed,
|
||||
o h (number) hue,
|
||||
o s (number) saturation,
|
||||
o v (number) value (brightness),
|
||||
|
|
@ -1696,11 +1717,20 @@ function Element(el) {
|
|||
el.savage = id;
|
||||
hub[id] = this;
|
||||
}
|
||||
function arrayFirstValue(arr) {
|
||||
var res;
|
||||
for (var i = 0, ii = arr.length; i < ii; i++) {
|
||||
res = res || arr[i];
|
||||
if (res) {
|
||||
return res;
|
||||
}
|
||||
}
|
||||
}
|
||||
(function (elproto) {
|
||||
elproto.attr = function (params) {
|
||||
var node = this.node;
|
||||
if (is(params, "string")) {
|
||||
return eve("savage.util.getattr." + params, this)[0];
|
||||
return arrayFirstValue(eve("savage.util.getattr." + params, this));
|
||||
}
|
||||
for (var att in params) {
|
||||
if (params[has](att)) {
|
||||
|
|
@ -1883,6 +1913,31 @@ function Element(el) {
|
|||
p.node.appendChild(this.node);
|
||||
return p;
|
||||
};
|
||||
elproto.marker = function (x, y, width, height, refX, refY) {
|
||||
var p = make("marker", this.paper.defs);
|
||||
if (x == null) {
|
||||
x = this.getBBox();
|
||||
}
|
||||
if (x && "x" in x) {
|
||||
y = x.y;
|
||||
width = x.width;
|
||||
height = x.height;
|
||||
refX = x.refX;
|
||||
refY = x.refY;
|
||||
x = x.x;
|
||||
}
|
||||
$(p.node, {
|
||||
viewBox: [x, y, width, height].join(S),
|
||||
markerWidth: width,
|
||||
markerHeight: height,
|
||||
orient: "auto",
|
||||
refX: refX || 0,
|
||||
refY: refY || 0,
|
||||
id: p.id
|
||||
});
|
||||
p.node.appendChild(this.node);
|
||||
return p;
|
||||
};
|
||||
// animation
|
||||
function applyAttr(el, key) {
|
||||
var at = {};
|
||||
|
|
@ -2026,6 +2081,38 @@ function wrap(dom) {
|
|||
}
|
||||
return el;
|
||||
};
|
||||
proto.image = function (src, x, y, width, height) {
|
||||
var el = make("image", this.node);
|
||||
if (is(src, "object") && "src" in src) {
|
||||
el.attr(src);
|
||||
} else if (src != null) {
|
||||
var set = {
|
||||
"xlink:href": src,
|
||||
preserveAspectRatio: "none"
|
||||
};
|
||||
if (x != null && y != null) {
|
||||
set.x = x;
|
||||
set.y = y;
|
||||
}
|
||||
if (width != null && height != null) {
|
||||
set.width = width;
|
||||
set.height = height;
|
||||
} else {
|
||||
preload(src, function () {
|
||||
$(el.node, {
|
||||
width: this.offsetWidth,
|
||||
height: this.offsetHeight
|
||||
});
|
||||
});
|
||||
}
|
||||
$(el.node, set);
|
||||
}
|
||||
return el;
|
||||
};
|
||||
proto.custom = function (name) {
|
||||
var el = make(name, this.node);
|
||||
return el;
|
||||
};
|
||||
proto.ellipse = function (cx, cy, rx, ry) {
|
||||
var el = make("ellipse", this.node);
|
||||
if (is(cx, "object") && "cx" in cx) {
|
||||
|
|
@ -2139,7 +2226,7 @@ function wrap(dom) {
|
|||
// gradients
|
||||
(function () {
|
||||
proto.gradient = function (str) {
|
||||
var grad = eve("savage.util.grad.parse", null, str)[0],
|
||||
var grad = arrayFirstValue(eve("savage.util.grad.parse", null, str)),
|
||||
el;
|
||||
if (grad.type.toLowerCase() == "l") {
|
||||
el = this.gradientLinear.apply(this, grad.params);
|
||||
|
|
@ -2147,7 +2234,7 @@ function wrap(dom) {
|
|||
el = this.gradientRadial.apply(this, grad.params);
|
||||
}
|
||||
if (grad.type != grad.type.toLowerCase()) {
|
||||
el.attr({
|
||||
$(el.node, {
|
||||
gradientUnits: "userSpaceOnUse"
|
||||
});
|
||||
}
|
||||
|
|
@ -2195,9 +2282,9 @@ function wrap(dom) {
|
|||
y2 = $(this.node, "y2") || 0;
|
||||
return box(x1, y1, math.abs(x2 - x1), math.abs(y2 - y1));
|
||||
} else {
|
||||
var cx = this.node.cx,
|
||||
cy = this.node.cy,
|
||||
r = this.node.r;
|
||||
var cx = this.node.cx || .5,
|
||||
cy = this.node.cy || .5,
|
||||
r = this.node.r || 0;
|
||||
return box(cx - r, cy - r, r * 2, r * 2);
|
||||
}
|
||||
}
|
||||
|
|
@ -2216,6 +2303,26 @@ function wrap(dom) {
|
|||
}
|
||||
return el;
|
||||
};
|
||||
proto.gradientRadial = function (cx, cy, r, fx, fy) {
|
||||
var el = make("radialGradient", this.node);
|
||||
el.stops = stops;
|
||||
el.addStop = addStop;
|
||||
el.getBBox = getBBox;
|
||||
if (cx != null) {
|
||||
$(el.node, {
|
||||
cx: cx,
|
||||
cy: cy,
|
||||
r: r
|
||||
});
|
||||
}
|
||||
if (fx != null && fy != null) {
|
||||
$(el.node, {
|
||||
fx: fx,
|
||||
fy: fy
|
||||
});
|
||||
}
|
||||
return el;
|
||||
};
|
||||
}());
|
||||
}(Paper.prototype));
|
||||
// Attributes event handlers
|
||||
|
|
@ -2351,6 +2458,15 @@ eve.on("savage.util.attr.transform", function (value) {
|
|||
this.transform(value);
|
||||
eve.stop();
|
||||
});
|
||||
eve.on("savage.util.attr.r", function (value) {
|
||||
if (this.type == "rect") {
|
||||
eve.stop();
|
||||
$(this.node, {
|
||||
rx: value,
|
||||
ry: value
|
||||
});
|
||||
}
|
||||
});
|
||||
eve.on("savage.util.attr.text", function (value) {
|
||||
if (this.type == "text") {
|
||||
var i = 0,
|
||||
|
|
@ -2376,15 +2492,24 @@ eve.on("savage.util.attr.text", function (value) {
|
|||
});
|
||||
// default
|
||||
var availableAttributes = {
|
||||
rect: {x: 0, y: 0, width: 0, height: 0, rx: 0, ry: 0},
|
||||
circle: {cx: 0, cy: 0, r: 0},
|
||||
ellipse: {cx: 0, cy: 0, rx: 0, ry: 0},
|
||||
line: {x1: 0, y1: 0, x2: 0, y2: 0},
|
||||
polyline: {points: ""},
|
||||
polygon: {points: ""},
|
||||
text: {x: 0, y: 0, dx: 0, dy: 0, rotate: 0, textLength: 0},
|
||||
tspan: {x: 0, y: 0, dx: 0, dy: 0, rotate: 0, textLength: 0},
|
||||
path: {d: ""}
|
||||
rect: {x: 0, y: 0, width: 0, height: 0, rx: 0, ry: 0, "class": 0},
|
||||
circle: {cx: 0, cy: 0, r: 0, "class": 0},
|
||||
ellipse: {cx: 0, cy: 0, rx: 0, ry: 0, "class": 0},
|
||||
line: {x1: 0, y1: 0, x2: 0, y2: 0, "class": 0},
|
||||
polyline: {points: "", "class": 0},
|
||||
polygon: {points: "", "class": 0},
|
||||
text: {x: 0, y: 0, dx: 0, dy: 0, rotate: 0, textLength: 0, lengthAdjust: 0, "class": 0},
|
||||
tspan: {x: 0, y: 0, dx: 0, dy: 0, rotate: 0, textLength: 0, lengthAdjust: 0, "class": 0},
|
||||
textPath: {"xlink:href": 0, startOffset: 0, method: 0, spacing: 0, "class": 0},
|
||||
marker: {viewBox: 0, preserveAspectRatio: 0, refX: 0, refY: 0, markerUnits: 0, markerWidth: 0, markerHeight: 0, orient: 0, "class": 0},
|
||||
linearGradient: {x1: 0, y1: 0, x2: 0, y2: 0, gradientUnits: 0, gradientTransform: 0, spreadMethod: 0, "xlink:href": 0, "class": 0},
|
||||
radialGradient: {cx: 0, cy: 0, r: 0, fx: 0, fy: 0, gradientUnits: 0, gradientTransform: 0, spreadMethod: 0, "xlink:href": 0, "class": 0},
|
||||
stop: {offset: 0, "class": 0},
|
||||
pattern: {viewBox: 0, preserveAspectRatio: 0, x: 0, y: 0, width: 0, height: 0, patternUnits: 0, patternContentUnits: 0, patternTransform: 0, "xlink:href": 0, "class": 0},
|
||||
clipPath: {transform: 0, clipPathUnits: 0, "class": 0},
|
||||
mask: {x: 0, y: 0, width: 0, height: 0, maskUnits: 0, maskContentUnits: 0, "class": 0},
|
||||
image: {preserveAspectRatio: 0, transform: 0, x: 0, y: 0, width: 0, height: 0, "xlink:href": 0, "class": 0},
|
||||
path: {d: "", "class": 0}
|
||||
};
|
||||
eve.on("savage.util.attr", function (value) {
|
||||
var att = eve.nt();
|
||||
|
|
@ -2403,6 +2528,12 @@ eve.on("savage.util.getattr.transform", function () {
|
|||
eve.stop();
|
||||
return this.transform();
|
||||
})(-1);
|
||||
eve.on("savage.util.getattr.r", function () {
|
||||
if (this.type == "rect" && $(this.node, "rx") == $(this.node, "ry")) {
|
||||
eve.stop();
|
||||
return $(this.node, "rx");
|
||||
}
|
||||
})(-1);
|
||||
eve.on("savage.util.getattr.viewBox", function () {
|
||||
eve.stop();
|
||||
var vb = $(this.node, "viewBox").split(separator);
|
||||
|
|
@ -2424,16 +2555,11 @@ eve.on("savage.util.getattr", function () {
|
|||
if (availableAttributes[has](this.type) && availableAttributes[this.type][has](att)) {
|
||||
return this.node.getAttribute(att);
|
||||
} else {
|
||||
return document.defaultView.getComputedStyle(this.node, null).getPropertyValue(style);
|
||||
return glob.doc.defaultView.getComputedStyle(this.node, null).getPropertyValue(style);
|
||||
}
|
||||
});
|
||||
eve.on("savage.globals", function () {
|
||||
return {
|
||||
savage: Savage,
|
||||
element: Element,
|
||||
paper: Paper,
|
||||
glob: glob
|
||||
Savage.plugin = function (f) {
|
||||
f(Savage, Element, Paper, glob);
|
||||
};
|
||||
});
|
||||
return Savage;
|
||||
}());
|
||||
202
test/test.html
202
test/test.html
|
|
@ -3,19 +3,25 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Savage Tests</title>
|
||||
<link rel="stylesheet" href="mocha.css" />
|
||||
<script src="../mywork/eve/eve.js"></script>
|
||||
<script src="mina.js"></script>
|
||||
<script src="elemental.js"></script>
|
||||
<script src="svg.js"></script>
|
||||
<script src="savage.set.js"></script>
|
||||
<style media="screen">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: -999em;
|
||||
left: -999em;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="mocha/mocha.css">
|
||||
<script src="../eve/eve.js"></script>
|
||||
<script src="../mina.js"></script>
|
||||
<script src="../elemental.js"></script>
|
||||
<script src="../svg.js"></script>
|
||||
<script src="../savage.set.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mocha"></div>
|
||||
|
||||
<script src="expect.js"></script>
|
||||
<script src="mocha.js"></script>
|
||||
<script>mocha.setup('bdd');</script>
|
||||
<script src="expect/expect.js"></script>
|
||||
<script src="mocha/mocha.js"></script>
|
||||
<script>mocha.setup("bdd");</script>
|
||||
<script>
|
||||
describe("System check", function () {
|
||||
it("Savage exists", function () {
|
||||
|
|
@ -161,6 +167,182 @@
|
|||
expect(C.textContent).to.be("test");
|
||||
});
|
||||
});
|
||||
describe("Colours", function () {
|
||||
it("parses hex colour", function () {
|
||||
expect(Savage.color("#fC0").hex).to.be("#ffcc00");
|
||||
});
|
||||
it("parses RGB", function () {
|
||||
var c = Savage.color("rgb(255, 204, 0)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
});
|
||||
it("parses HSL", function () {
|
||||
var c = Savage.color("hsl(0.1333, 1, .5)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.h.toFixed(3)).to.be("0.133");
|
||||
expect(c.s).to.be(1);
|
||||
expect(c.l).to.be(.5);
|
||||
});
|
||||
it("parses HSB", function () {
|
||||
var c = Savage.color("hsb(0.1333, 1, 1)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.h.toFixed(3)).to.be("0.133");
|
||||
expect(c.s).to.be(1);
|
||||
expect(c.v).to.be(1);
|
||||
});
|
||||
it("parses RGBA", function () {
|
||||
var c = Savage.color("rgba(255, 204, 0, .75)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
expect(c.opacity).to.be(.75);
|
||||
});
|
||||
it("parses HSLA", function () {
|
||||
var c = Savage.color("hsla(0.1333, 1, .5, .5)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
expect(c.opacity).to.be(.5);
|
||||
});
|
||||
it("parses HSBA", function () {
|
||||
var c = Savage.color("hsba(0.1333, 1, 1, .5)");
|
||||
expect(c.hex).to.be("#ffcc00");
|
||||
expect(c.r).to.be(255);
|
||||
expect(c.g).to.be(204);
|
||||
expect(c.b).to.be(0);
|
||||
expect(c.opacity).to.be(.5);
|
||||
});
|
||||
it("parses names", function () {
|
||||
var c = Savage.color("DodgerBlue");
|
||||
expect(c.hex).to.be("#1e90ff");
|
||||
c = Savage.color("FireBrick");
|
||||
expect(c.hex).to.be("#b22222");
|
||||
c = Savage.color("MintCream");
|
||||
expect(c.hex).to.be("#f5fffa");
|
||||
});
|
||||
});
|
||||
describe("Attributes", function () {
|
||||
var s, r;
|
||||
beforeEach(function () {
|
||||
s = Savage(100, 100);
|
||||
r = s.rect(10, 10, 50, 50);
|
||||
});
|
||||
afterEach(function () {
|
||||
s.remove();
|
||||
});
|
||||
function colorTestProp(key) {
|
||||
var o = {};
|
||||
return function () {
|
||||
o[key] = "#fc0";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "rgb(255, 204, 0)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "hsl(0.1333, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "hsb(0.1333, 1, 1)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("#ffcc00");
|
||||
o[key] = "rgba(255, 204, 0, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
|
||||
o[key] = "hsla(0.1333, 1, .5, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
|
||||
o[key] = "hsba(0.1333, 1, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
|
||||
};
|
||||
}
|
||||
function colorTestStyle(key) {
|
||||
var o = {};
|
||||
return function () {
|
||||
function val() {
|
||||
return Savage.color(r.node.style[key]).hex;
|
||||
}
|
||||
o[key] = "#fc0";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "rgb(255, 204, 0)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsl(0.1333, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsb(0.1333, 1, 1)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "rgba(255, 204, 0, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsla(0.1333, 1, .5, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
o[key] = "hsba(0.1333, 1, 1, .5)";
|
||||
r.attr(o);
|
||||
expect(val()).to.be("#ffcc00");
|
||||
};
|
||||
}
|
||||
it("sets fill", colorTestProp("fill"));
|
||||
it("sets stroke", colorTestStyle("stroke"));
|
||||
it("circle core attributes", function () {
|
||||
var c = s.circle(10, 20, 30);
|
||||
expect(c.node.getAttribute("cx")).to.be("10");
|
||||
expect(c.node.getAttribute("cy")).to.be("20");
|
||||
expect(c.node.getAttribute("r")).to.be("30");
|
||||
c.attr({
|
||||
cx: 40,
|
||||
cy: 50,
|
||||
r: "5%"
|
||||
});
|
||||
expect(c.node.getAttribute("cx")).to.be("40");
|
||||
expect(c.node.getAttribute("cy")).to.be("50");
|
||||
expect(c.node.getAttribute("r")).to.be("5%");
|
||||
});
|
||||
it("rect core attributes", function () {
|
||||
var c = s.rect(10, 20, 30, 40);
|
||||
expect(c.node.getAttribute("x")).to.be("10");
|
||||
expect(c.node.getAttribute("y")).to.be("20");
|
||||
expect(c.node.getAttribute("width")).to.be("30");
|
||||
expect(c.node.getAttribute("height")).to.be("40");
|
||||
c.attr({
|
||||
x: 40,
|
||||
y: 50,
|
||||
width: "5%",
|
||||
height: "6%",
|
||||
r: 10
|
||||
});
|
||||
expect(c.node.getAttribute("x")).to.be("40");
|
||||
expect(c.node.getAttribute("y")).to.be("50");
|
||||
expect(c.node.getAttribute("width")).to.be("5%");
|
||||
expect(c.node.getAttribute("height")).to.be("6%");
|
||||
expect(c.node.getAttribute("rx")).to.be("10");
|
||||
expect(c.node.getAttribute("ry")).to.be("10");
|
||||
});
|
||||
it("ellipse core attributes", function () {
|
||||
var c = s.ellipse(10, 20, 30, 40);
|
||||
expect(c.node.getAttribute("cx")).to.be("10");
|
||||
expect(c.node.getAttribute("cy")).to.be("20");
|
||||
expect(c.node.getAttribute("rx")).to.be("30");
|
||||
expect(c.node.getAttribute("ry")).to.be("40");
|
||||
c.attr({
|
||||
cx: 40,
|
||||
cy: 50,
|
||||
rx: "5%",
|
||||
ry: "6%"
|
||||
});
|
||||
expect(c.node.getAttribute("cx")).to.be("40");
|
||||
expect(c.node.getAttribute("cy")).to.be("50");
|
||||
expect(c.node.getAttribute("rx")).to.be("5%");
|
||||
expect(c.node.getAttribute("ry")).to.be("6%");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
mocha.checkLeaks();
|
||||
|
|
|
|||
Loading…
Reference in New Issue