Added paper.svg() method
Dmitry Baranovskiy
parent
2b8bcc1be7
commit
3469abf423
File diff suppressed because one or more lines are too long
|
|
@ -3698,7 +3698,6 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
|
|||
}
|
||||
return el;
|
||||
};
|
||||
// SIERRA Paper.g(): Don't understand the code comment about the order being _different._ Wouldn't it be a rect followed by a circle?
|
||||
/*\
|
||||
* Paper.g
|
||||
[ method ]
|
||||
|
|
@ -3733,6 +3732,36 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
|
|||
}
|
||||
return el;
|
||||
};
|
||||
/*\
|
||||
* Paper.svg
|
||||
[ method ]
|
||||
**
|
||||
* Creates a nested SVG element.
|
||||
- width (number) @optional width of the element
|
||||
- height (number) @optional height of the element
|
||||
- x (number) @optional viewbox X
|
||||
- y (number) @optional viewbox Y
|
||||
- w (number) @optional viewbox width
|
||||
- h (number) @optional viewbox height
|
||||
**
|
||||
= (object) the `svg` element
|
||||
**
|
||||
\*/
|
||||
proto.svg = function (width, height, x, y, w, h) {
|
||||
var el = make("svg", this.node),
|
||||
attrs = {};
|
||||
if (width != null) {
|
||||
attrs.width = width;
|
||||
}
|
||||
if (height != null) {
|
||||
attrs.height = height;
|
||||
}
|
||||
if (x != null && y != null && w != null && h != null) {
|
||||
attrs.viewBox = [x, y, w, h];
|
||||
}
|
||||
el.attr(attrs);
|
||||
return el;
|
||||
};
|
||||
/*\
|
||||
* Paper.text
|
||||
[ method ]
|
||||
|
|
|
|||
|
|
@ -435,6 +435,10 @@
|
|||
<a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a>
|
||||
</li>
|
||||
|
||||
<li class="dr-lvl1">
|
||||
<a href="#Paper.svg" class="dr-method"><span>Paper.svg()</span></a>
|
||||
</li>
|
||||
|
||||
<li class="dr-lvl1">
|
||||
<a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a>
|
||||
</li>
|
||||
|
|
@ -6744,7 +6748,7 @@ Note: there is a special case when a path consists of only three commands: <code
|
|||
|
||||
<article id="Paper.g">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.g([varargs])<a href="#Paper.g" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2963 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2963">➭</a></h3>
|
||||
<h3 class="dr-method">Paper.g([varargs])<a href="#Paper.g" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2962 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2962">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.g-extra"></div>
|
||||
|
|
@ -6853,7 +6857,7 @@ g.add(c2, c1);</code></pre></section>
|
|||
|
||||
<article id="Paper.group">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.group()<a href="#Paper.group" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2969 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2969">➭</a></h3>
|
||||
<h3 class="dr-method">Paper.group()<a href="#Paper.group" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2968 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2968">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.group-extra"></div>
|
||||
|
|
@ -6872,13 +6876,88 @@ g.add(c2, c1);</code></pre></section>
|
|||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="Paper.svg">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.svg(width, height, x, y, w, h)<a href="#Paper.svg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2992 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2992">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.svg-extra"></div>
|
||||
<div class="dr-method">
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Creates a nested SVG element.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="topcoat-list__container">
|
||||
<h3 class="topcoat-list__header">Parameters</h3>
|
||||
<ol class="topcoat-list">
|
||||
<li class="topcoat-list__item"><span class="dr-param">width</span>
|
||||
<span class="dr-type"><em class="dr-type-number">number</em> </span>
|
||||
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> width of the element</span></li>
|
||||
<li class="topcoat-list__item"><span class="dr-param">height</span>
|
||||
<span class="dr-type"><em class="dr-type-number">number</em> </span>
|
||||
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> height of the element</span></li>
|
||||
<li class="topcoat-list__item"><span class="dr-param">x</span>
|
||||
<span class="dr-type"><em class="dr-type-number">number</em> </span>
|
||||
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox X</span></li>
|
||||
<li class="topcoat-list__item"><span class="dr-param">y</span>
|
||||
<span class="dr-type"><em class="dr-type-number">number</em> </span>
|
||||
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox Y</span></li>
|
||||
<li class="topcoat-list__item"><span class="dr-param">w</span>
|
||||
<span class="dr-type"><em class="dr-type-number">number</em> </span>
|
||||
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox width</span></li>
|
||||
<li class="topcoat-list__item"><span class="dr-param">h</span>
|
||||
<span class="dr-type"><em class="dr-type-number">number</em> </span>
|
||||
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox height</span></li>
|
||||
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<p class="dr-returns">
|
||||
<strong class="dr-title">Returns:</strong>
|
||||
|
||||
<em class="dr-type-object">object</em>
|
||||
|
||||
<span class="dr-description">the <code>svg</code> element</span>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article id="Paper.text">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2998 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2998">➭</a></h3>
|
||||
<h3 class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3027 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3027">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.text-extra"></div>
|
||||
|
|
@ -6972,7 +7051,7 @@ t1.attr({textpath: pth});</code></pre></section>
|
|||
|
||||
<article id="Paper.line">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.line(x1, y1, x2, y2)<a href="#Paper.line" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3026 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3026">➭</a></h3>
|
||||
<h3 class="dr-method">Paper.line(x1, y1, x2, y2)<a href="#Paper.line" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3055 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3055">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.line-extra"></div>
|
||||
|
|
@ -7063,7 +7142,7 @@ t1.attr({textpath: pth});</code></pre></section>
|
|||
|
||||
<article id="Paper.polyline">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.polyline(…)<a href="#Paper.polyline" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3055 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3055">➭</a></h3>
|
||||
<h3 class="dr-method">Paper.polyline(…)<a href="#Paper.polyline" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3084 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3084">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.polyline-extra"></div>
|
||||
|
|
@ -7175,7 +7254,7 @@ var p2 = paper.polyline(10, 10, 100, 100);</code></pre></section>
|
|||
|
||||
<article id="Paper.polygon">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.polygon()<a href="#Paper.polygon" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3075 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3075">➭</a></h3>
|
||||
<h3 class="dr-method">Paper.polygon()<a href="#Paper.polygon" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3104 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3104">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.polygon-extra"></div>
|
||||
|
|
@ -7200,7 +7279,7 @@ var p2 = paper.polyline(10, 10, 100, 100);</code></pre></section>
|
|||
|
||||
<article id="Paper.gradient">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.gradient(gradient)<a href="#Paper.gradient" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3128 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3128">➭</a></h3>
|
||||
<h3 class="dr-method">Paper.gradient(gradient)<a href="#Paper.gradient" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3157 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3157">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.gradient-extra"></div>
|
||||
|
|
@ -7398,7 +7477,7 @@ half the width, from black to white:
|
|||
|
||||
<article id="Paper.toString">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.toString()<a href="#Paper.toString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3144 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3144">➭</a></h3>
|
||||
<h3 class="dr-method">Paper.toString()<a href="#Paper.toString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3173 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3173">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.toString-extra"></div>
|
||||
|
|
@ -7440,7 +7519,7 @@ half the width, from black to white:
|
|||
|
||||
<article id="Paper.clear">
|
||||
<header>
|
||||
<h3 class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3162 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3162">➭</a></h3>
|
||||
<h3 class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3191 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3191">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Paper.clear-extra"></div>
|
||||
|
|
@ -7465,7 +7544,7 @@ half the width, from black to white:
|
|||
|
||||
<article id="Snap.ajax">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3193 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3193">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3222 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3222">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Snap.ajax-extra"></div>
|
||||
|
|
@ -7569,7 +7648,7 @@ half the width, from black to white:
|
|||
|
||||
<article id="Snap.load">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3239 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3239">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3268 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3268">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Snap.load-extra"></div>
|
||||
|
|
@ -7618,7 +7697,7 @@ half the width, from black to white:
|
|||
|
||||
<article id="Snap.getElementByPoint">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.getElementByPoint(x, y)<a href="#Snap.getElementByPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3736 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3736">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.getElementByPoint(x, y)<a href="#Snap.getElementByPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3765 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3765">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Snap.getElementByPoint-extra"></div>
|
||||
|
|
@ -7703,7 +7782,7 @@ half the width, from black to white:
|
|||
|
||||
<article id="Snap.plugin">
|
||||
<header>
|
||||
<h3 class="dr-method">Snap.plugin(f)<a href="#Snap.plugin" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3771 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3771">➭</a></h3>
|
||||
<h3 class="dr-method">Snap.plugin(f)<a href="#Snap.plugin" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 3800 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3800">➭</a></h3>
|
||||
</header>
|
||||
<section>
|
||||
<div class="extra" id="Snap.plugin-extra"></div>
|
||||
|
|
|
|||
31
src/svg.js
31
src/svg.js
|
|
@ -2940,7 +2940,6 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
|
|||
}
|
||||
return el;
|
||||
};
|
||||
// SIERRA Paper.g(): Don't understand the code comment about the order being _different._ Wouldn't it be a rect followed by a circle?
|
||||
/*\
|
||||
* Paper.g
|
||||
[ method ]
|
||||
|
|
@ -2975,6 +2974,36 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
|
|||
}
|
||||
return el;
|
||||
};
|
||||
/*\
|
||||
* Paper.svg
|
||||
[ method ]
|
||||
**
|
||||
* Creates a nested SVG element.
|
||||
- width (number) @optional width of the element
|
||||
- height (number) @optional height of the element
|
||||
- x (number) @optional viewbox X
|
||||
- y (number) @optional viewbox Y
|
||||
- w (number) @optional viewbox width
|
||||
- h (number) @optional viewbox height
|
||||
**
|
||||
= (object) the `svg` element
|
||||
**
|
||||
\*/
|
||||
proto.svg = function (width, height, x, y, w, h) {
|
||||
var el = make("svg", this.node),
|
||||
attrs = {};
|
||||
if (width != null) {
|
||||
attrs.width = width;
|
||||
}
|
||||
if (height != null) {
|
||||
attrs.height = height;
|
||||
}
|
||||
if (x != null && y != null && w != null && h != null) {
|
||||
attrs.viewBox = [x, y, w, h];
|
||||
}
|
||||
el.attr(attrs);
|
||||
return el;
|
||||
};
|
||||
/*\
|
||||
* Paper.text
|
||||
[ method ]
|
||||
|
|
|
|||
|
|
@ -57,6 +57,26 @@ describe("Paper methods", function () {
|
|||
paper.remove();
|
||||
});
|
||||
|
||||
it("Paper.svg", function() {
|
||||
var c = paper.svg();
|
||||
expect(c.node.nodeName).to.be("svg");
|
||||
expect(c.node.parentNode).to.be(paper.node);
|
||||
});
|
||||
it("Paper.svg(x, y)", function() {
|
||||
var c = paper.svg(100, 200);
|
||||
expect(c.node.nodeName).to.be("svg");
|
||||
expect(c.node.width.baseVal.value).to.be(100);
|
||||
expect(c.node.height.baseVal.value).to.be(200);
|
||||
expect(c.node.parentNode).to.be(paper.node);
|
||||
});
|
||||
it("Paper.svg(x, y, viewbox)", function() {
|
||||
var c = paper.svg(100, 200, 10, 20, 30, 40);
|
||||
expect(c.node.nodeName).to.be("svg");
|
||||
expect(c.node.width.baseVal.value).to.be(100);
|
||||
expect(c.node.height.baseVal.value).to.be(200);
|
||||
expect(c.node.getAttribute("viewBox")).to.be("10 20 30 40");
|
||||
expect(c.node.parentNode).to.be(paper.node);
|
||||
});
|
||||
it("Paper.el", function() {
|
||||
var c = paper.el("circle");
|
||||
expect(c.node.nodeName).to.be("circle");
|
||||
|
|
|
|||
Loading…
Reference in New Issue