bytedo
/
snapsvg
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

一大波更新

master
yutent 2024-03-06 18:36:03 +08:00
parent 6dc877e229
commit 4ae1ddd373
23 changed files with 5723 additions and 6520 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
history.md
View File

@ -1,66 +0,0 @@
#0.5.2
* pack fix
* transform into esm
#0.5.1
* Bug fix
#0.5.0
* Added color palettes for Material and FlatUI
* Added methods for gradients: `Element.stops()`, `Element.addStop()`, `Element.setStops()`
* Fixed matrix splitting for better animation of matrices`
* Various bug fixes
* Better integration of tests and ESlint
#0.4.1
* Bug fixes.
#0.4.0
* Moved class and element related code into separate plugins
* Added `Element.align()` and `Element.getAlign()` methods
* Added animation support for `viewBox`
* Added support for `<symbol>`
* Added method `Paper.toDataURL()`
* Added method `Snap.closest()`
* Added methods to work with degrees instead of radians: `Snap.sin()`, `Snap.cos()`, `Snap.tan()`, `Snap.asin()`, `Snap.acos()`, `Snap.atan()` and `Snap.atan2()`
* Added methods `Snap.len()`, `Snap.len2()` and `Snap.closestPoint()`
* Added methods `Element.children()` and `Element.toJSON()`
* Various bug fixes
#0.3.0
* Added `.addClass()`, `.removeClass()`, `.toggleClass()` and `.hasClass()` APIs
* Added `Paper.mask()`, `Paper.ptrn()`, `Paper.use()`, `Paper.svg()`
* Mask & pattern elements are sharing paper methods (just like group)
* Added `Set.bind()` method
* Added syncronisation for `Set.animate()`
* Added opacity to the shadow filter
* Added ability to specify attributes as `"+=10"` or `"-=1em"` or `"*=2"`
* Fix negative scale
* Fix for `path2curve`
* Fixed shared `<defs>` issue
* Various bug fixes
#0.2.0
* Added support for text path
* Added `getBBox` method to the paper object
* Added `Element.appendTo()` and `Element.prependTo()`
* Added `getElementByPoint()`
* Added `Set.remove()` method
* Get rid of internal SVG parser in favor of the browser
* Fix for `xlink:href` setting for images
* Fix `Element.animate()`
* Fix for animate and stroke-dashoffset
* Absolute transforms fix
* Fix for animation of SVG transformations, matrices and polygon points
* Various bug fixes
#0.1.0
* Initial release

28
src/align.js
View File

@ -11,17 +11,16 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Snap } from './svg.js' import { Snap, SnapElement, Paper, Fragment } from './svg.js'
import { is } from './utils.js'
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) { let box = Snap._.box,
var box = Snap._.box,
is = Snap.is,
firstLetter = /^[^a-z]*([tbmlrc])/i, firstLetter = /^[^a-z]*([tbmlrc])/i,
toString = function () { toString = function () {
return 'T' + this.dx + ',' + this.dy return 'T' + this.dx + ',' + this.dy
} }
/*\ /*\
* Element.getAlign * SnapElement.getAlign
[ method ] [ method ]
** **
* Returns shift needed to align the element relatively to given element. * Returns shift needed to align the element relatively to given element.
@ -32,15 +31,15 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
> Usage > Usage
| el.transform(el.getAlign(el2, "top")); | el.transform(el.getAlign(el2, "top"));
* or * or
| var dy = el.getAlign(el2, "top").dy; | let dy = el.getAlign(el2, "top").dy;
\*/ \*/
Element.prototype.getAlign = function (el, way) { SnapElement.prototype.getAlign = function (el, way) {
if (way == null && is(el, 'string')) { if (way == null && is(el, 'string')) {
way = el way = el
el = null el = null
} }
el = el || this.paper el = el || this.paper
var bx = el.getBBox ? el.getBBox() : box(el), let bx = el.getBBox ? el.getBBox() : box(el),
bb = this.getBBox(), bb = this.getBBox(),
out = {} out = {}
way = way && way.match(firstLetter) way = way && way.match(firstLetter)
@ -73,9 +72,9 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
out.toString = toString out.toString = toString
return out return out
} }
/*\ /*\
* Element.align * SnapElement.align
[ method ] [ method ]
** **
* Aligns the element relatively to given one via transformation. * Aligns the element relatively to given one via transformation.
@ -88,7 +87,6 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
* or * or
| el.align("middle"); | el.align("middle");
\*/ \*/
Element.prototype.align = function (el, way) { SnapElement.prototype.align = function (el, way) {
return this.transform('...' + this.getAlign(el, way)) return this.transform('...' + this.getAlign(el, way))
} }
})

84
src/animation.js
View File

@ -13,24 +13,23 @@
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import { Snap, SnapElement, Paper, Fragment } from './svg.js'
import mina from './mina.js' import mina from './mina.js'
import { is } from './utils.js'
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) { let elproto = SnapElement.prototype,
var elproto = Element.prototype,
is = Snap.is,
Str = String, Str = String,
has = 'hasOwnProperty' has = 'hasOwnProperty'
function slice(from, to, f) { function slice(from, to, f) {
return function (arr) { return function (arr) {
var res = arr.slice(from, to) let res = arr.slice(from, to)
if (res.length == 1) { if (res.length == 1) {
res = res[0] res = res[0]
} }
return f ? f(res) : res return f ? f(res) : res
} }
} }
var Animation = function (attr, ms, easing, callback) { let Animation = function (attr, ms, easing, callback) {
if (typeof easing == 'function' && !easing.length) { if (typeof easing == 'function' && !easing.length) {
callback = easing callback = easing
easing = mina.linear easing = mina.linear
@ -39,9 +38,9 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
this.dur = ms this.dur = ms
easing && (this.easing = easing) easing && (this.easing = easing)
callback && (this.callback = callback) callback && (this.callback = callback)
} }
Snap._.Animation = Animation Snap._.Animation = Animation
/*\ /*\
* Snap.animation * Snap.animation
[ method ] [ method ]
** **
@ -53,11 +52,11 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
- callback (function) #optional callback function that fires when animation ends - callback (function) #optional callback function that fires when animation ends
= (object) animation object = (object) animation object
\*/ \*/
Snap.animation = function (attr, ms, easing, callback) { Snap.animation = function (attr, ms, easing, callback) {
return new Animation(attr, ms, easing, callback) return new Animation(attr, ms, easing, callback)
} }
/*\ /*\
* Element.inAnim * SnapElement.inAnim
[ method ] [ method ]
** **
* Returns a set of animations that may be able to manipulate the current element * Returns a set of animations that may be able to manipulate the current element
@ -71,10 +70,10 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
o stop (function) stops the animation o stop (function) stops the animation
o } o }
\*/ \*/
elproto.inAnim = function () { elproto.inAnim = function () {
var el = this, let el = this,
res = [] res = []
for (var id in el.anims) for (let id in el.anims)
if (el.anims[has](id)) { if (el.anims[has](id)) {
;(function (a) { ;(function (a) {
res.push({ res.push({
@ -91,8 +90,8 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
})(el.anims[id]) })(el.anims[id])
} }
return res return res
} }
/*\ /*\
* Snap.animate * Snap.animate
[ method ] [ method ]
** **
@ -113,7 +112,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
o status (function) gets or sets the status of the animation, o status (function) gets or sets the status of the animation,
o stop (function) stops the animation o stop (function) stops the animation
o } o }
| var rect = Snap().rect(0, 0, 10, 10); | let rect = new Snap().rect(0, 0, 10, 10);
| Snap.animate(0, 10, function (val) { | Snap.animate(0, 10, function (val) {
| rect.attr({ | rect.attr({
| x: val | x: val
@ -122,33 +121,33 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
| // in given context is equivalent to | // in given context is equivalent to
| rect.animate({x: 10}, 1000); | rect.animate({x: 10}, 1000);
\*/ \*/
Snap.animate = function (from, to, setter, ms, easing, callback) { Snap.animate = function (from, to, setter, ms, easing, callback) {
if (typeof easing == 'function' && !easing.length) { if (typeof easing == 'function' && !easing.length) {
callback = easing callback = easing
easing = mina.linear easing = mina.linear
} }
var now = mina.time(), let now = mina.time(),
anim = mina(from, to, now, now + ms, mina.time, setter, easing) anim = mina(from, to, now, now + ms, mina.time, setter, easing)
callback && eve.once('mina.finish.' + anim.id, callback) callback && eve.once('mina.finish.' + anim.id, callback)
return anim return anim
} }
/*\ /*\
* Element.stop * SnapElement.stop
[ method ] [ method ]
** **
* Stops all the animations for the current element * Stops all the animations for the current element
** **
= (Element) the current element = (SnapElement) the current element
\*/ \*/
elproto.stop = function () { elproto.stop = function () {
var anims = this.inAnim() let anims = this.inAnim()
for (var i = 0, ii = anims.length; i < ii; i++) { for (let i = 0, ii = anims.length; i < ii; i++) {
anims[i].stop() anims[i].stop()
} }
return this return this
} }
/*\ /*\
* Element.animate * SnapElement.animate
[ method ] [ method ]
** **
* Animates the given attributes of the element * Animates the given attributes of the element
@ -157,9 +156,9 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
- duration (number) duration of the animation in milliseconds - duration (number) duration of the animation in milliseconds
- easing (function) #optional easing function from @mina or custom - easing (function) #optional easing function from @mina or custom
- callback (function) #optional callback function that executes when the animation ends - callback (function) #optional callback function that executes when the animation ends
= (Element) the current element = (SnapElement) the current element
\*/ \*/
elproto.animate = function (attrs, ms, easing, callback) { elproto.animate = function (attrs, ms, easing, callback) {
if (typeof easing == 'function' && !easing.length) { if (typeof easing == 'function' && !easing.length) {
callback = easing callback = easing
easing = mina.linear easing = mina.linear
@ -170,7 +169,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
ms = attrs.dur ms = attrs.dur
attrs = attrs.attr attrs = attrs.attr
} }
var fkeys = [], let fkeys = [],
tkeys = [], tkeys = [],
keys = {}, keys = {},
from, from,
@ -178,7 +177,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
f, f,
eq, eq,
el = this el = this
for (var key in attrs) for (let key in attrs)
if (attrs[has](key)) { if (attrs[has](key)) {
if (el.equal) { if (el.equal) {
eq = el.equal(key, Str(attrs[key])) eq = el.equal(key, Str(attrs[key]))
@ -189,12 +188,12 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
from = +el.attr(key) from = +el.attr(key)
to = +attrs[key] to = +attrs[key]
} }
var len = is(from, 'array') ? from.length : 1 let len = is(from, 'array') ? from.length : 1
keys[key] = slice(fkeys.length, fkeys.length + len, f) keys[key] = slice(fkeys.length, fkeys.length + len, f)
fkeys = fkeys.concat(from) fkeys = fkeys.concat(from)
tkeys = tkeys.concat(to) tkeys = tkeys.concat(to)
} }
var now = mina.time(), let now = mina.time(),
anim = mina( anim = mina(
fkeys, fkeys,
tkeys, tkeys,
@ -202,8 +201,8 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
now + ms, now + ms,
mina.time, mina.time,
function (val) { function (val) {
var attr = {} let attr = {}
for (var key in keys) for (let key in keys)
if (keys[has](key)) { if (keys[has](key)) {
attr[key] = keys[key](val) attr[key] = keys[key](val)
} }
@ -225,5 +224,4 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
delete el.anims[anim.id] delete el.anims[anim.id]
}) })
return el return el
} }
})

255
src/attr.js
View File

@ -12,21 +12,16 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import { Snap, SnapElement, Paper, Fragment, getSomeDefs } from './svg.js'
import { $, is, url } from './utils.js'
import { doc, win, SEPARATOR } from './lib/constants.js'
import { parseColor } from './lib/color.js'
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) { let has = 'hasOwnProperty',
var has = 'hasOwnProperty',
make = Snap._.make,
wrap = Snap._.wrap,
is = Snap.is,
getSomeDefs = Snap._.getSomeDefs,
reURLValue = /^url\((['"]?)([^)]+)\1\)$/, reURLValue = /^url\((['"]?)([^)]+)\1\)$/,
$ = Snap._.$,
URL = Snap.url,
Str = String, Str = String,
separator = Snap._.separator,
E = '' E = ''
/*\ /*\
* Snap.deurl * Snap.deurl
[ method ] [ method ]
** **
@ -34,13 +29,13 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
- value (string) url path - value (string) url path
= (string) unwrapped path = (string) unwrapped path
\*/ \*/
Snap.deurl = function (value) { Snap.deurl = function (value) {
var res = String(value).match(reURLValue) let res = String(value).match(reURLValue)
return res ? res[2] : value return res ? res[2] : value
} }
// Attributes event handlers // Attributes event handlers
eve.on('snap.util.attr.mask', function (value) { eve.on('snap.util.attr.mask', function (value) {
if (value instanceof Element || value instanceof Fragment) { if (value instanceof SnapElement || value instanceof Fragment) {
eve.stop() eve.stop()
if (value instanceof Fragment && value.node.childNodes.length == 1) { if (value instanceof Fragment && value.node.childNodes.length == 1) {
value = value.node.firstChild value = value.node.firstChild
@ -48,7 +43,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
value = wrap(value) value = wrap(value)
} }
if (value.type == 'mask') { if (value.type == 'mask') {
var mask = value let mask = value
} else { } else {
mask = make('mask', getSomeDefs(this)) mask = make('mask', getSomeDefs(this))
mask.node.appendChild(value.node) mask.node.appendChild(value.node)
@ -58,22 +53,22 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
id: mask.id id: mask.id
}) })
$(this.node, { $(this.node, {
mask: URL(mask.id) mask: url(mask.id)
}) })
} }
}) })
;(function (clipIt) { ;(function (clipIt) {
eve.on('snap.util.attr.clip', clipIt) eve.on('snap.util.attr.clip', clipIt)
eve.on('snap.util.attr.clip-path', clipIt) eve.on('snap.util.attr.clip-path', clipIt)
eve.on('snap.util.attr.clipPath', clipIt) eve.on('snap.util.attr.clipPath', clipIt)
})(function (value) { })(function (value) {
if (value instanceof Element || value instanceof Fragment) { if (value instanceof SnapElement || value instanceof Fragment) {
eve.stop() eve.stop()
var clip, let clip,
node = value.node node = value.node
while (node) { while (node) {
if (node.nodeName === 'clipPath') { if (node.nodeName === 'clipPath') {
clip = new Element(node) clip = new SnapElement(node)
break break
} }
if (node.nodeName === 'svg') { if (node.nodeName === 'svg') {
@ -91,13 +86,14 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
}) })
} }
$(this.node, { $(this.node, {
'clip-path': URL(clip.node.id || clip.id) 'clip-path': url(clip.node.id || clip.id)
}) })
} }
}) })
function fillStroke(name) { function fillStroke(name) {
return function (value) { return function (value) {
eve.stop() eve.stop()
let fill
if ( if (
value instanceof Fragment && value instanceof Fragment &&
value.node.childNodes.length == 1 && value.node.childNodes.length == 1 &&
@ -109,7 +105,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
getSomeDefs(this).appendChild(value) getSomeDefs(this).appendChild(value)
value = wrap(value) value = wrap(value)
} }
if (value instanceof Element) { if (value instanceof SnapElement) {
if ( if (
value.type == 'radialGradient' || value.type == 'radialGradient' ||
value.type == 'linearGradient' || value.type == 'linearGradient' ||
@ -120,21 +116,21 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
id: value.id id: value.id
}) })
} }
var fill = URL(value.node.id) fill = url(value.node.id)
} else { } else {
fill = value.attr(name) fill = value.attr(name)
} }
} else { } else {
fill = Snap.color(value) fill = parseColor(value)
if (fill.error) { if (fill.error) {
var grad = Snap(getSomeDefs(this).ownerSVGElement).gradient(value) let grad = new Snap(getSomeDefs(this).ownerSVGElement).gradient(value)
if (grad) { if (grad) {
if (!grad.node.id) { if (!grad.node.id) {
$(grad.node, { $(grad.node, {
id: grad.id id: grad.id
}) })
} }
fill = URL(grad.node.id) fill = url(grad.node.id)
} else { } else {
fill = value fill = value
} }
@ -142,22 +138,22 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
fill = Str(fill) fill = Str(fill)
} }
} }
var attrs = {} let attrs = {}
attrs[name] = fill attrs[name] = fill
$(this.node, attrs) $(this.node, attrs)
this.node.style[name] = E this.node.style[name] = E
} }
} }
eve.on('snap.util.attr.fill', fillStroke('fill')) eve.on('snap.util.attr.fill', fillStroke('fill'))
eve.on('snap.util.attr.stroke', fillStroke('stroke')) eve.on('snap.util.attr.stroke', fillStroke('stroke'))
var gradrg = /^([lr])(?:\(([^)]*)\))?(.*)$/i let gradrg = /^([lr])(?:\(([^)]*)\))?(.*)$/i
eve.on('snap.util.grad.parse', function parseGrad(string) { eve.on('snap.util.grad.parse', function parseGrad(string) {
string = Str(string) string = Str(string)
var tokens = string.match(gradrg) let tokens = string.match(gradrg)
if (!tokens) { if (!tokens) {
return null return null
} }
var type = tokens[1], let type = tokens[1],
params = tokens[2], params = tokens[2],
stops = tokens[3] stops = tokens[3]
params = params.split(/\s*,\s*/).map(function (el) { params = params.split(/\s*,\s*/).map(function (el) {
@ -169,7 +165,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
stops = stops.split('-') stops = stops.split('-')
stops = stops.map(function (el) { stops = stops.map(function (el) {
el = el.split(':') el = el.split(':')
var out = { let out = {
color: el[0] color: el[0]
} }
if (el[1]) { if (el[1]) {
@ -177,19 +173,19 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
return out return out
}) })
var len = stops.length, let len = stops.length,
start = 0, start = 0,
j = 0 j = 0
function seed(i, end) { function seed(i, end) {
var step = (end - start) / (i - j) let step = (end - start) / (i - j)
for (var k = j; k < i; k++) { for (let k = j; k < i; k++) {
stops[k].offset = +(+start + step * (k - j)).toFixed(2) stops[k].offset = +(+start + step * (k - j)).toFixed(2)
} }
j = i j = i
start = end start = end
} }
len-- len--
for (var i = 0; i < len; i++) for (let i = 0; i < len; i++)
if ('offset' in stops[i]) { if ('offset' in stops[i]) {
seed(i, stops[i].offset) seed(i, stops[i].offset)
} }
@ -200,9 +196,9 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
params: params, params: params,
stops: stops stops: stops
} }
}) })
eve.on('snap.util.attr.d', function (value) { eve.on('snap.util.attr.d', function (value) {
eve.stop() eve.stop()
if (is(value, 'array') && is(value[0], 'array')) { if (is(value, 'array') && is(value[0], 'array')) {
value = Snap.path.toString.call(value) value = Snap.path.toString.call(value)
@ -212,26 +208,26 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
value = Snap.path.toAbsolute(value) value = Snap.path.toAbsolute(value)
} }
$(this.node, { d: value }) $(this.node, { d: value })
})(-1) })(-1)
eve.on('snap.util.attr.#text', function (value) { eve.on('snap.util.attr.#text', function (value) {
eve.stop() eve.stop()
value = Str(value) value = Str(value)
var txt = glob.doc.createTextNode(value) let txt = doc.createTextNode(value)
while (this.node.firstChild) { while (this.node.firstChild) {
this.node.removeChild(this.node.firstChild) this.node.removeChild(this.node.firstChild)
} }
this.node.appendChild(txt) this.node.appendChild(txt)
})(-1) })(-1)
eve.on('snap.util.attr.path', function (value) { eve.on('snap.util.attr.path', function (value) {
eve.stop() eve.stop()
this.attr({ d: value }) this.attr({ d: value })
})(-1) })(-1)
eve.on('snap.util.attr.class', function (value) { eve.on('snap.util.attr.class', function (value) {
eve.stop() eve.stop()
this.node.className.baseVal = value this.node.className.baseVal = value
})(-1) })(-1)
eve.on('snap.util.attr.viewBox', function (value) { eve.on('snap.util.attr.viewBox', function (value) {
var vb let vb
if (is(value, 'object') && 'x' in value) { if (is(value, 'object') && 'x' in value) {
vb = [value.x, value.y, value.width, value.height].join(' ') vb = [value.x, value.y, value.width, value.height].join(' ')
} else if (is(value, 'array')) { } else if (is(value, 'array')) {
@ -243,12 +239,12 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
viewBox: vb viewBox: vb
}) })
eve.stop() eve.stop()
})(-1) })(-1)
eve.on('snap.util.attr.transform', function (value) { eve.on('snap.util.attr.transform', function (value) {
this.transform(value) this.transform(value)
eve.stop() eve.stop()
})(-1) })(-1)
eve.on('snap.util.attr.r', function (value) { eve.on('snap.util.attr.r', function (value) {
if (this.type == 'rect') { if (this.type == 'rect') {
eve.stop() eve.stop()
$(this.node, { $(this.node, {
@ -256,11 +252,11 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
ry: value ry: value
}) })
} }
})(-1) })(-1)
eve.on('snap.util.attr.textpath', function (value) { eve.on('snap.util.attr.textpath', function (value) {
eve.stop() eve.stop()
if (this.type == 'text') { if (this.type == 'text') {
var id, tp, node let id, tp, node
if (!value && this.textPath) { if (!value && this.textPath) {
tp = this.textPath tp = this.textPath
while (tp.node.firstChild) { while (tp.node.firstChild) {
@ -271,14 +267,14 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
return return
} }
if (is(value, 'string')) { if (is(value, 'string')) {
var defs = getSomeDefs(this), let defs = getSomeDefs(this),
path = wrap(defs.parentNode).path(value) path = wrap(defs.parentNode).path(value)
defs.appendChild(path.node) defs.appendChild(path.node)
id = path.id id = path.id
path.attr({ id: id }) path.attr({ id: id })
} else { } else {
value = wrap(value) value = wrap(value)
if (value instanceof Element) { if (value instanceof SnapElement) {
id = value.attr('id') id = value.attr('id')
if (!id) { if (!id) {
id = value.id id = value.id
@ -303,19 +299,19 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
} }
} }
})(-1) })(-1)
eve.on('snap.util.attr.text', function (value) { eve.on('snap.util.attr.text', function (value) {
if (this.type == 'text') { if (this.type == 'text') {
var i = 0, let i = 0,
node = this.node, node = this.node,
tuner = function (chunk) { tuner = function (chunk) {
var out = $('tspan') let out = $('tspan')
if (is(chunk, 'array')) { if (is(chunk, 'array')) {
for (var i = 0; i < chunk.length; i++) { for (let i = 0; i < chunk.length; i++) {
out.appendChild(tuner(chunk[i])) out.appendChild(tuner(chunk[i]))
} }
} else { } else {
out.appendChild(glob.doc.createTextNode(chunk)) out.appendChild(doc.createTextNode(chunk))
} }
out.normalize && out.normalize() out.normalize && out.normalize()
return out return out
@ -323,60 +319,60 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
while (node.firstChild) { while (node.firstChild) {
node.removeChild(node.firstChild) node.removeChild(node.firstChild)
} }
var tuned = tuner(value) let tuned = tuner(value)
while (tuned.firstChild) { while (tuned.firstChild) {
node.appendChild(tuned.firstChild) node.appendChild(tuned.firstChild)
} }
} }
eve.stop() eve.stop()
})(-1) })(-1)
function setFontSize(value) { function setFontSize(value) {
eve.stop() eve.stop()
if (value == +value) { if (value == +value) {
value += 'px' value += 'px'
} }
this.node.style.fontSize = value this.node.style.fontSize = value
} }
eve.on('snap.util.attr.fontSize', setFontSize)(-1) eve.on('snap.util.attr.fontSize', setFontSize)(-1)
eve.on('snap.util.attr.font-size', setFontSize)(-1) eve.on('snap.util.attr.font-size', setFontSize)(-1)
eve.on('snap.util.getattr.transform', function () { eve.on('snap.util.getattr.transform', function () {
eve.stop() eve.stop()
return this.transform() return this.transform()
})(-1) })(-1)
eve.on('snap.util.getattr.textpath', function () { eve.on('snap.util.getattr.textpath', function () {
eve.stop() eve.stop()
return this.textPath return this.textPath
})(-1) })(-1)
// Markers // Markers
;(function () { ;(function () {
function getter(end) { function getter(end) {
return function () { return function () {
eve.stop() eve.stop()
var style = glob.doc.defaultView let style = doc.defaultView
.getComputedStyle(this.node, null) .getComputedStyle(this.node, null)
.getPropertyValue('marker-' + end) .getPropertyValue('marker-' + end)
if (style == 'none') { if (style == 'none') {
return style return style
} else { } else {
return Snap(glob.doc.getElementById(style.match(reURLValue)[1])) return new Snap(doc.getElementById(style.match(reURLValue)[1]))
} }
} }
} }
function setter(end) { function setter(end) {
return function (value) { return function (value) {
eve.stop() eve.stop()
var name = 'marker' + end.charAt(0).toUpperCase() + end.substring(1) let name = 'marker' + end.charAt(0).toUpperCase() + end.substring(1)
if (value == '' || !value) { if (value == '' || !value) {
this.node.style[name] = 'none' this.node.style[name] = 'none'
return return
} }
if (value.type == 'marker') { if (value.type == 'marker') {
var id = value.node.id let id = value.node.id
if (!id) { if (!id) {
$(value.node, { id: value.id }) $(value.node, { id: value.id })
} }
this.node.style[name] = URL(id) this.node.style[name] = url(id)
return return
} }
} }
@ -393,18 +389,18 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
eve.on('snap.util.attr.markerStart', setter('start'))(-1) eve.on('snap.util.attr.markerStart', setter('start'))(-1)
eve.on('snap.util.attr.marker-mid', setter('mid'))(-1) eve.on('snap.util.attr.marker-mid', setter('mid'))(-1)
eve.on('snap.util.attr.markerMid', setter('mid'))(-1) eve.on('snap.util.attr.markerMid', setter('mid'))(-1)
})() })()
eve.on('snap.util.getattr.r', function () { eve.on('snap.util.getattr.r', function () {
if (this.type == 'rect' && $(this.node, 'rx') == $(this.node, 'ry')) { if (this.type == 'rect' && $(this.node, 'rx') == $(this.node, 'ry')) {
eve.stop() eve.stop()
return $(this.node, 'rx') return $(this.node, 'rx')
} }
})(-1) })(-1)
function textExtract(node) { function textExtract(node) {
var out = [] let out = []
var children = node.childNodes let children = node.childNodes
for (var i = 0, ii = children.length; i < ii; i++) { for (let i = 0, ii = children.length; i < ii; i++) {
var chi = children[i] let chi = children[i]
if (chi.nodeType == 3) { if (chi.nodeType == 3) {
out.push(chi.nodeValue) out.push(chi.nodeValue)
} }
@ -417,64 +413,63 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
} }
return out return out
} }
eve.on('snap.util.getattr.text', function () { eve.on('snap.util.getattr.text', function () {
if (this.type == 'text' || this.type == 'tspan') { if (this.type == 'text' || this.type == 'tspan') {
eve.stop() eve.stop()
var out = textExtract(this.node) let out = textExtract(this.node)
return out.length == 1 ? out[0] : out return out.length == 1 ? out[0] : out
} }
})(-1) })(-1)
eve.on('snap.util.getattr.#text', function () { eve.on('snap.util.getattr.#text', function () {
return this.node.textContent return this.node.textContent
})(-1) })(-1)
eve.on('snap.util.getattr.fill', function (internal) { eve.on('snap.util.getattr.fill', function (internal) {
if (internal) { if (internal) {
return return
} }
eve.stop() eve.stop()
var value = eve('snap.util.getattr.fill', this, true).firstDefined() let value = eve('snap.util.getattr.fill', this, true).firstDefined()
return Snap(Snap.deurl(value)) || value return new Snap(Snap.deurl(value)) || value
})(-1) })(-1)
eve.on('snap.util.getattr.stroke', function (internal) { eve.on('snap.util.getattr.stroke', function (internal) {
if (internal) { if (internal) {
return return
} }
eve.stop() eve.stop()
var value = eve('snap.util.getattr.stroke', this, true).firstDefined() let value = eve('snap.util.getattr.stroke', this, true).firstDefined()
return Snap(Snap.deurl(value)) || value return new Snap(Snap.deurl(value)) || value
})(-1) })(-1)
eve.on('snap.util.getattr.viewBox', function () { eve.on('snap.util.getattr.viewBox', function () {
eve.stop() eve.stop()
var vb = $(this.node, 'viewBox') let vb = $(this.node, 'viewBox')
if (vb) { if (vb) {
vb = vb.split(separator) vb = vb.split(SEPARATOR)
return Snap._.box(+vb[0], +vb[1], +vb[2], +vb[3]) return Snap._.box(+vb[0], +vb[1], +vb[2], +vb[3])
} else { } else {
return return
} }
})(-1) })(-1)
eve.on('snap.util.getattr.points', function () { eve.on('snap.util.getattr.points', function () {
var p = $(this.node, 'points') let p = $(this.node, 'points')
eve.stop() eve.stop()
if (p) { if (p) {
return p.split(separator) return p.split(SEPARATOR)
} else { } else {
return return
} }
})(-1) })(-1)
eve.on('snap.util.getattr.path', function () { eve.on('snap.util.getattr.path', function () {
var p = $(this.node, 'd') let p = $(this.node, 'd')
eve.stop() eve.stop()
return p return p
})(-1) })(-1)
eve.on('snap.util.getattr.class', function () { eve.on('snap.util.getattr.class', function () {
return this.node.className.baseVal return this.node.className.baseVal
})(-1) })(-1)
function getFontSize() { function getFontSize() {
eve.stop() eve.stop()
return this.node.style.fontSize return this.node.style.fontSize
} }
eve.on('snap.util.getattr.fontSize', getFontSize)(-1) eve.on('snap.util.getattr.fontSize', getFontSize)(-1)
eve.on('snap.util.getattr.font-size', getFontSize)(-1) eve.on('snap.util.getattr.font-size', getFontSize)(-1)
})

32
src/attradd.js
View File

@ -12,10 +12,9 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import { Snap, SnapElement, Paper, Fragment } from './svg.js'
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) { let operators = {
var operators = {
'+': function (x, y) { '+': function (x, y) {
return x + y return x + y
}, },
@ -32,23 +31,23 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
Str = String, Str = String,
reUnit = /[a-z]+$/i, reUnit = /[a-z]+$/i,
reAddon = /^\s*([+\-\/*])\s*=\s*([\d.eE+\-]+)\s*([^\d\s]+)?\s*$/ reAddon = /^\s*([+\-\/*])\s*=\s*([\d.eE+\-]+)\s*([^\d\s]+)?\s*$/
function getNumber(val) { function getNumber(val) {
return val return val
} }
function getUnit(unit) { function getUnit(unit) {
return function (val) { return function (val) {
return +val.toFixed(3) + unit return +val.toFixed(3) + unit
} }
} }
eve.on('snap.util.attr', function (val) { eve.on('snap.util.attr', function (val) {
var plus = Str(val).match(reAddon) let plus = Str(val).match(reAddon)
if (plus) { if (plus) {
var evnt = eve.nt(), let evnt = eve.nt(),
name = evnt.substring(evnt.lastIndexOf('.') + 1), name = evnt.substring(evnt.lastIndexOf('.') + 1),
a = this.attr(name), a = this.attr(name),
atr = {} atr = {}
eve.stop() eve.stop()
var unit = plus[3] || '', let unit = plus[3] || '',
aUnit = a.match(reUnit), aUnit = a.match(reUnit),
op = operators[plus[1]] op = operators[plus[1]]
if (aUnit && aUnit == unit) { if (aUnit && aUnit == unit) {
@ -63,16 +62,16 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
atr[name] = val atr[name] = val
this.attr(atr) this.attr(atr)
} }
})(-10) })(-10)
eve.on('snap.util.equal', function (name, b) { eve.on('snap.util.equal', function (name, b) {
var A, let A,
B, B,
a = Str(this.attr(name) || ''), a = Str(this.attr(name) || ''),
el = this, el = this,
bplus = Str(b).match(reAddon) bplus = Str(b).match(reAddon)
if (bplus) { if (bplus) {
eve.stop() eve.stop()
var unit = bplus[3] || '', let unit = bplus[3] || '',
aUnit = a.match(reUnit), aUnit = a.match(reUnit),
op = operators[bplus[1]] op = operators[bplus[1]]
if (aUnit && aUnit == unit) { if (aUnit && aUnit == unit) {
@ -90,5 +89,4 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
} }
} }
})(-10) })(-10)
})

78
src/class.js
View File

@ -1,34 +1,26 @@
// Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved. /**
// * {}
// Licensed under the Apache License, Version 2.0 (the "License"); * @author yutent<yutent.io@gmail.com>
// you may not use this file except in compliance with the License. * @date 2024/03/06 16:34:24
// You may obtain a copy of the License at */
//
// http://www.apache.org/licenses/LICENSE-2.0 import { Snap, SnapElement, Paper, Fragment } from './svg.js'
//
// Unless required by applicable law or agreed to in writing, software let rgNotSpace = /\S+/g,
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Snap } from './svg.js'
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
var rgNotSpace = /\S+/g,
rgBadSpace = /[\t\r\n\f]/g, rgBadSpace = /[\t\r\n\f]/g,
rgTrim = /(^\s+|\s+$)/g, rgTrim = /(^\s+|\s+$)/g,
Str = String, Str = String,
elproto = Element.prototype elproto = SnapElement.prototype
/*\ /*\
* Element.addClass
[ method ]
** **
* Adds given class name or list of class names to the element. * Adds given class name or list of class names to the element.
- value (string) class name or space separated list of class names - value (string) class name or space separated list of class names
** **
= (Element) original element. = (SnapElement) original element.
\*/ \*/
elproto.addClass = function (value) { elproto.addClass = function (value) {
var classes = Str(value || '').match(rgNotSpace) || [], let classes = Str(value || '').match(rgNotSpace) || [],
elem = this.node, elem = this.node,
className = elem.className.baseVal, className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [], curClasses = className.match(rgNotSpace) || [],
@ -52,18 +44,17 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
} }
return this return this
} }
/*\ /*\
* Element.removeClass
[ method ]
** **
* Removes given class name or list of class names from the element. * Removes given class name or list of class names from the element.
- value (string) class name or space separated list of class names - value (string) class name or space separated list of class names
** **
= (Element) original element. = (SnapElement) original element.
\*/ \*/
elproto.removeClass = function (value) { elproto.removeClass = function (value) {
var classes = Str(value || '').match(rgNotSpace) || [], let classes = Str(value || '').match(rgNotSpace) || [],
elem = this.node, elem = this.node,
className = elem.className.baseVal, className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [], curClasses = className.match(rgNotSpace) || [],
@ -86,34 +77,32 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
} }
return this return this
} }
/*\ /*\
* Element.hasClass
[ method ]
** **
* Checks if the element has a given class name in the list of class names applied to it. * Checks if the element has a given class name in the list of class names applied to it.
- value (string) class name - value (string) class name
** **
= (boolean) `true` if the element has given class = (boolean) `true` if the element has given class
\*/ \*/
elproto.hasClass = function (value) { elproto.hasClass = function (value) {
var elem = this.node, let elem = this.node,
className = elem.className.baseVal, className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [] curClasses = className.match(rgNotSpace) || []
return !!~curClasses.indexOf(value) return !!~curClasses.indexOf(value)
} }
/*\ /*\
* Element.toggleClass
[ method ]
** **
* Add or remove one or more classes from the element, depending on either * Add or remove one or more classes from the element, depending on either
* the class’s presence or the value of the `flag` argument. * the class’s presence or the value of the `flag` argument.
- value (string) class name or space separated list of class names - value (string) class name or space separated list of class names
- flag (boolean) value to determine whether the class should be added or removed - flag (boolean) value to determine whether the class should be added or removed
** **
= (Element) original element. = (SnapElement) original element.
\*/ \*/
elproto.toggleClass = function (value, flag) { elproto.toggleClass = function (value, flag) {
if (flag != null) { if (flag != null) {
if (flag) { if (flag) {
return this.addClass(value) return this.addClass(value)
@ -121,7 +110,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
return this.removeClass(value) return this.removeClass(value)
} }
} }
var classes = (value || '').match(rgNotSpace) || [], let classes = (value || '').match(rgNotSpace) || [],
elem = this.node, elem = this.node,
className = elem.className.baseVal, className = elem.className.baseVal,
curClasses = className.match(rgNotSpace) || [], curClasses = className.match(rgNotSpace) || [],
@ -144,5 +133,4 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
elem.className.baseVal = finalValue elem.className.baseVal = finalValue
} }
return this return this
} }
})

149
src/colors.js
View File

@ -1,149 +0,0 @@
// Copyright (c) 2017 Adobe Systems Incorporated. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Snap } from './svg.js'
Snap.plugin(function (Snap, Element, Paper, glob) {
// Colours are from https://www.materialui.co
var red =
'#ffebee#ffcdd2#ef9a9a#e57373#ef5350#f44336#e53935#d32f2f#c62828#b71c1c#ff8a80#ff5252#ff1744#d50000',
pink =
'#FCE4EC#F8BBD0#F48FB1#F06292#EC407A#E91E63#D81B60#C2185B#AD1457#880E4F#FF80AB#FF4081#F50057#C51162',
purple =
'#F3E5F5#E1BEE7#CE93D8#BA68C8#AB47BC#9C27B0#8E24AA#7B1FA2#6A1B9A#4A148C#EA80FC#E040FB#D500F9#AA00FF',
deeppurple =
'#EDE7F6#D1C4E9#B39DDB#9575CD#7E57C2#673AB7#5E35B1#512DA8#4527A0#311B92#B388FF#7C4DFF#651FFF#6200EA',
indigo =
'#E8EAF6#C5CAE9#9FA8DA#7986CB#5C6BC0#3F51B5#3949AB#303F9F#283593#1A237E#8C9EFF#536DFE#3D5AFE#304FFE',
blue =
'#E3F2FD#BBDEFB#90CAF9#64B5F6#64B5F6#2196F3#1E88E5#1976D2#1565C0#0D47A1#82B1FF#448AFF#2979FF#2962FF',
lightblue =
'#E1F5FE#B3E5FC#81D4FA#4FC3F7#29B6F6#03A9F4#039BE5#0288D1#0277BD#01579B#80D8FF#40C4FF#00B0FF#0091EA',
cyan =
'#E0F7FA#B2EBF2#80DEEA#4DD0E1#26C6DA#00BCD4#00ACC1#0097A7#00838F#006064#84FFFF#18FFFF#00E5FF#00B8D4',
teal =
'#E0F2F1#B2DFDB#80CBC4#4DB6AC#26A69A#009688#00897B#00796B#00695C#004D40#A7FFEB#64FFDA#1DE9B6#00BFA5',
green =
'#E8F5E9#C8E6C9#A5D6A7#81C784#66BB6A#4CAF50#43A047#388E3C#2E7D32#1B5E20#B9F6CA#69F0AE#00E676#00C853',
lightgreen =
'#F1F8E9#DCEDC8#C5E1A5#AED581#9CCC65#8BC34A#7CB342#689F38#558B2F#33691E#CCFF90#B2FF59#76FF03#64DD17',
lime =
'#F9FBE7#F0F4C3#E6EE9C#DCE775#D4E157#CDDC39#C0CA33#AFB42B#9E9D24#827717#F4FF81#EEFF41#C6FF00#AEEA00',
yellow =
'#FFFDE7#FFF9C4#FFF59D#FFF176#FFEE58#FFEB3B#FDD835#FBC02D#F9A825#F57F17#FFFF8D#FFFF00#FFEA00#FFD600',
amber =
'#FFF8E1#FFECB3#FFE082#FFD54F#FFCA28#FFC107#FFB300#FFA000#FF8F00#FF6F00#FFE57F#FFD740#FFC400#FFAB00',
orange =
'#FFF3E0#FFE0B2#FFCC80#FFB74D#FFA726#FF9800#FB8C00#F57C00#EF6C00#E65100#FFD180#FFAB40#FF9100#FF6D00',
deeporange =
'#FBE9E7#FFCCBC#FFAB91#FF8A65#FF7043#FF5722#F4511E#E64A19#D84315#BF360C#FF9E80#FF6E40#FF3D00#DD2C00',
brown =
'#EFEBE9#D7CCC8#BCAAA4#A1887F#8D6E63#795548#6D4C41#5D4037#4E342E#3E2723',
grey =
'#FAFAFA#F5F5F5#EEEEEE#E0E0E0#BDBDBD#9E9E9E#757575#616161#424242#212121',
bluegrey =
'#ECEFF1#CFD8DC#B0BEC5#90A4AE#78909C#607D8B#546E7A#455A64#37474F#263238'
/*\
* Snap.mui
[ property ]
**
* Contain Material UI colours.
| Snap().rect(0, 0, 10, 10).attr({fill: Snap.mui.deeppurple, stroke: Snap.mui.amber[600]});
# For colour reference: <a href="https://www.materialui.co">https://www.materialui.co</a>.
\*/
Snap.mui = {}
/*\
* Snap.flat
[ property ]
**
* Contain Flat UI colours.
| Snap().rect(0, 0, 10, 10).attr({fill: Snap.flat.carrot, stroke: Snap.flat.wetasphalt});
# For colour reference: <a href="https://www.materialui.co">https://www.materialui.co</a>.
\*/
Snap.flat = {}
function saveColor(colors) {
colors = colors.split(/(?=#)/)
var color = new String(colors[5])
color[50] = colors[0]
color[100] = colors[1]
color[200] = colors[2]
color[300] = colors[3]
color[400] = colors[4]
color[500] = colors[5]
color[600] = colors[6]
color[700] = colors[7]
color[800] = colors[8]
color[900] = colors[9]
if (colors[10]) {
color.A100 = colors[10]
color.A200 = colors[11]
color.A400 = colors[12]
color.A700 = colors[13]
}
return color
}
Snap.mui.red = saveColor(red)
Snap.mui.pink = saveColor(pink)
Snap.mui.purple = saveColor(purple)
Snap.mui.deeppurple = saveColor(deeppurple)
Snap.mui.indigo = saveColor(indigo)
Snap.mui.blue = saveColor(blue)
Snap.mui.lightblue = saveColor(lightblue)
Snap.mui.cyan = saveColor(cyan)
Snap.mui.teal = saveColor(teal)
Snap.mui.green = saveColor(green)
Snap.mui.lightgreen = saveColor(lightgreen)
Snap.mui.lime = saveColor(lime)
Snap.mui.yellow = saveColor(yellow)
Snap.mui.amber = saveColor(amber)
Snap.mui.orange = saveColor(orange)
Snap.mui.deeporange = saveColor(deeporange)
Snap.mui.brown = saveColor(brown)
Snap.mui.grey = saveColor(grey)
Snap.mui.bluegrey = saveColor(bluegrey)
Snap.flat.turquoise = '#1abc9c'
Snap.flat.greensea = '#16a085'
Snap.flat.sunflower = '#f1c40f'
Snap.flat.orange = '#f39c12'
Snap.flat.emerland = '#2ecc71'
Snap.flat.nephritis = '#27ae60'
Snap.flat.carrot = '#e67e22'
Snap.flat.pumpkin = '#d35400'
Snap.flat.peterriver = '#3498db'
Snap.flat.belizehole = '#2980b9'
Snap.flat.alizarin = '#e74c3c'
Snap.flat.pomegranate = '#c0392b'
Snap.flat.amethyst = '#9b59b6'
Snap.flat.wisteria = '#8e44ad'
Snap.flat.clouds = '#ecf0f1'
Snap.flat.silver = '#bdc3c7'
Snap.flat.wetasphalt = '#34495e'
Snap.flat.midnightblue = '#2c3e50'
Snap.flat.concrete = '#95a5a6'
Snap.flat.asbestos = '#7f8c8d'
/*\
* Snap.importMUIColors
[ method ]
**
* Imports Material UI colours into global object.
| Snap.importMUIColors();
| Snap().rect(0, 0, 10, 10).attr({fill: deeppurple, stroke: amber[600]});
# For colour reference: <a href="https://www.materialui.co">https://www.materialui.co</a>.
\*/
Snap.importMUIColors = function () {
for (var color in Snap.mui) {
if (Snap.mui.hasOwnProperty(color)) {
window[color] = Snap.mui[color]
}
}
}
})

429
src/element.js
View File

@ -12,21 +12,23 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import {
Snap,
SnapElement,
Paper,
Fragment,
getSomeDefs,
make,
wrap,
unit2px
} from './svg.js'
import { $, is } from './utils.js'
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) { let elproto = SnapElement.prototype,
var elproto = Element.prototype,
is = Snap.is,
Str = String, Str = String,
unit2px = Snap._unit2px, has = 'hasOwnProperty'
$ = Snap._.$, /*\
make = Snap._.make,
getSomeDefs = Snap._.getSomeDefs,
has = 'hasOwnProperty',
wrap = Snap._.wrap
/*\
* Element.getBBox
[ method ]
** **
* Returns the bounding box descriptor for the given element * Returns the bounding box descriptor for the given element
** **
@ -49,14 +51,14 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
o y: (number) y of the top edge o y: (number) y of the top edge
o } o }
\*/ \*/
elproto.getBBox = function (isWithoutTransform) { elproto.getBBox = function (isWithoutTransform) {
if (this.type == 'tspan') { if (this.type == 'tspan') {
return Snap._.box(this.node.getClientRects().item(0)) return Snap._.box(this.node.getClientRects().item(0))
} }
if (!Snap.Matrix || !Snap.path) { if (!Snap.Matrix || !Snap.path) {
return this.node.getBBox() return this.node.getBBox()
} }
var el = this, let el = this,
m = new Snap.Matrix() m = new Snap.Matrix()
if (el.removed) { if (el.removed) {
return Snap._.box() return Snap._.box()
@ -72,13 +74,13 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
if (el.original) { if (el.original) {
el = el.original el = el.original
} else { } else {
var href = el.attr('xlink:href') let href = el.attr('xlink:href')
el = el.original = el.node.ownerDocument.getElementById( el = el.original = el.node.ownerDocument.getElementById(
href.substring(href.indexOf('#') + 1) href.substring(href.indexOf('#') + 1)
) )
} }
} }
var _ = el._, let _ = el._,
pathfinder = Snap.path.get[el.type] || Snap.path.get.deflt pathfinder = Snap.path.get[el.type] || Snap.path.get.deflt
try { try {
if (isWithoutTransform) { if (isWithoutTransform) {
@ -96,13 +98,14 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
// Firefox doesn’t give you bbox of hidden element // Firefox doesn’t give you bbox of hidden element
return Snap._.box() return Snap._.box()
} }
} }
var propString = function () { let propString = function () {
return this.string return this.string
} }
function extractTransform(el, tstr) { function extractTransform(el, tstr) {
let doReturn
if (tstr == null) { if (tstr == null) {
var doReturn = true doReturn = true
if (el.type == 'linearGradient' || el.type == 'radialGradient') { if (el.type == 'linearGradient' || el.type == 'radialGradient') {
tstr = el.node.getAttribute('gradientTransform') tstr = el.node.getAttribute('gradientTransform')
} else if (el.type == 'pattern') { } else if (el.type == 'pattern') {
@ -125,21 +128,21 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
el._.transform = tstr el._.transform = tstr
} }
var m = Snap._.transform2matrix(tstr, el.getBBox(1)) let m = Snap._.transform2matrix(tstr, el.getBBox(1))
if (doReturn) { if (doReturn) {
return m return m
} else { } else {
el.matrix = m el.matrix = m
} }
} }
/*\ /*\
* Element.transform * SnapElement.transform
[ method ] [ method ]
** **
* Gets or sets transformation of the element * Gets or sets transformation of the element
** **
- tstr (string) transform string in Snap or SVG format - tstr (string) transform string in Snap or SVG format
= (Element) the current element = (SnapElement) the current element
* or * or
= (object) transformation descriptor: = (object) transformation descriptor:
o { o {
@ -152,10 +155,10 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
o toString (function) returns `string` property o toString (function) returns `string` property
o } o }
\*/ \*/
elproto.transform = function (tstr) { elproto.transform = function (tstr) {
var _ = this._ let _ = this._
if (tstr == null) { if (tstr == null) {
var papa = this, let papa = this,
global = new Snap.Matrix(this.node.getCTM()), global = new Snap.Matrix(this.node.getCTM()),
local = extractTransform(this), local = extractTransform(this),
ms = [local], ms = [local],
@ -200,37 +203,37 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
return this return this
} }
/*\ /*\
* Element.parent * SnapElement.parent
[ method ] [ method ]
** **
* Returns the element's parent * Returns the element's parent
** **
= (Element) the parent element = (SnapElement) the parent element
\*/ \*/
elproto.parent = function () { elproto.parent = function () {
return wrap(this.node.parentNode) return wrap(this.node.parentNode)
} }
/*\ /*\
* Element.append * SnapElement.append
[ method ] [ method ]
** **
* Appends the given element to current one * Appends the given element to current one
** **
- el (Element|Set) element to append - el (SnapElement|Set) element to append
= (Element) the parent element = (SnapElement) the parent element
\*/ \*/
/*\ /*\
* Element.add * SnapElement.add
[ method ] [ method ]
** **
* See @Element.append * See @SnapElement.append
\*/ \*/
elproto.append = elproto.add = function (el) { elproto.append = elproto.add = function (el) {
if (el) { if (el) {
if (el.type == 'set') { if (el.type == 'set') {
var it = this let it = this
el.forEach(function (el) { el.forEach(function (el) {
it.add(el) it.add(el)
}) })
@ -241,36 +244,36 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
el.paper = this.paper el.paper = this.paper
} }
return this return this
} }
/*\ /*\
* Element.appendTo * SnapElement.appendTo
[ method ] [ method ]
** **
* Appends the current element to the given one * Appends the current element to the given one
** **
- el (Element) parent element to append to - el (SnapElement) parent element to append to
= (Element) the child element = (SnapElement) the child element
\*/ \*/
elproto.appendTo = function (el) { elproto.appendTo = function (el) {
if (el) { if (el) {
el = wrap(el) el = wrap(el)
el.append(this) el.append(this)
} }
return this return this
} }
/*\ /*\
* Element.prepend * SnapElement.prepend
[ method ] [ method ]
** **
* Prepends the given element to the current one * Prepends the given element to the current one
** **
- el (Element) element to prepend - el (SnapElement) element to prepend
= (Element) the parent element = (SnapElement) the parent element
\*/ \*/
elproto.prepend = function (el) { elproto.prepend = function (el) {
if (el) { if (el) {
if (el.type == 'set') { if (el.type == 'set') {
var it = this, let it = this,
first first
el.forEach(function (el) { el.forEach(function (el) {
if (first) { if (first) {
@ -283,7 +286,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
return this return this
} }
el = wrap(el) el = wrap(el)
var parent = el.parent() let parent = el.parent()
this.node.insertBefore(el.node, this.node.firstChild) this.node.insertBefore(el.node, this.node.firstChild)
this.add && this.add() this.add && this.add()
el.paper = this.paper el.paper = this.paper
@ -291,35 +294,35 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
parent && parent.add() parent && parent.add()
} }
return this return this
} }
/*\ /*\
* Element.prependTo * SnapElement.prependTo
[ method ] [ method ]
** **
* Prepends the current element to the given one * Prepends the current element to the given one
** **
- el (Element) parent element to prepend to - el (SnapElement) parent element to prepend to
= (Element) the child element = (SnapElement) the child element
\*/ \*/
elproto.prependTo = function (el) { elproto.prependTo = function (el) {
el = wrap(el) el = wrap(el)
el.prepend(this) el.prepend(this)
return this return this
} }
/*\ /*\
* Element.before * SnapElement.before
[ method ] [ method ]
** **
* Inserts given element before the current one * Inserts given element before the current one
** **
- el (Element) element to insert - el (SnapElement) element to insert
= (Element) the parent element = (SnapElement) the parent element
\*/ \*/
elproto.before = function (el) { elproto.before = function (el) {
if (el.type == 'set') { if (el.type == 'set') {
var it = this let it = this
el.forEach(function (el) { el.forEach(function (el) {
var parent = el.parent() let parent = el.parent()
it.node.parentNode.insertBefore(el.node, it.node) it.node.parentNode.insertBefore(el.node, it.node)
parent && parent.add() parent && parent.add()
}) })
@ -327,25 +330,25 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
return this return this
} }
el = wrap(el) el = wrap(el)
var parent = el.parent() let parent = el.parent()
this.node.parentNode.insertBefore(el.node, this.node) this.node.parentNode.insertBefore(el.node, this.node)
this.parent() && this.parent().add() this.parent() && this.parent().add()
parent && parent.add() parent && parent.add()
el.paper = this.paper el.paper = this.paper
return this return this
} }
/*\ /*\
* Element.after * SnapElement.after
[ method ] [ method ]
** **
* Inserts given element after the current one * Inserts given element after the current one
** **
- el (Element) element to insert - el (SnapElement) element to insert
= (Element) the parent element = (SnapElement) the parent element
\*/ \*/
elproto.after = function (el) { elproto.after = function (el) {
el = wrap(el) el = wrap(el)
var parent = el.parent() let parent = el.parent()
if (this.node.nextSibling) { if (this.node.nextSibling) {
this.node.parentNode.insertBefore(el.node, this.node.nextSibling) this.node.parentNode.insertBefore(el.node, this.node.nextSibling)
} else { } else {
@ -355,114 +358,114 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
parent && parent.add() parent && parent.add()
el.paper = this.paper el.paper = this.paper
return this return this
} }
/*\ /*\
* Element.insertBefore * SnapElement.insertBefore
[ method ] [ method ]
** **
* Inserts the element after the given one * Inserts the element after the given one
** **
- el (Element) element next to whom insert to - el (SnapElement) element next to whom insert to
= (Element) the parent element = (SnapElement) the parent element
\*/ \*/
elproto.insertBefore = function (el) { elproto.insertBefore = function (el) {
el = wrap(el) el = wrap(el)
var parent = this.parent() let parent = this.parent()
el.node.parentNode.insertBefore(this.node, el.node) el.node.parentNode.insertBefore(this.node, el.node)
this.paper = el.paper this.paper = el.paper
parent && parent.add() parent && parent.add()
el.parent() && el.parent().add() el.parent() && el.parent().add()
return this return this
} }
/*\ /*\
* Element.insertAfter * SnapElement.insertAfter
[ method ] [ method ]
** **
* Inserts the element after the given one * Inserts the element after the given one
** **
- el (Element) element next to whom insert to - el (SnapElement) element next to whom insert to
= (Element) the parent element = (SnapElement) the parent element
\*/ \*/
elproto.insertAfter = function (el) { elproto.insertAfter = function (el) {
el = wrap(el) el = wrap(el)
var parent = this.parent() let parent = this.parent()
el.node.parentNode.insertBefore(this.node, el.node.nextSibling) el.node.parentNode.insertBefore(this.node, el.node.nextSibling)
this.paper = el.paper this.paper = el.paper
parent && parent.add() parent && parent.add()
el.parent() && el.parent().add() el.parent() && el.parent().add()
return this return this
} }
/*\ /*\
* Element.remove * SnapElement.remove
[ method ] [ method ]
** **
* Removes element from the DOM * Removes element from the DOM
= (Element) the detached element = (SnapElement) the detached element
\*/ \*/
elproto.remove = function () { elproto.remove = function () {
var parent = this.parent() let parent = this.parent()
this.node.parentNode && this.node.parentNode.removeChild(this.node) this.node.parentNode && this.node.parentNode.removeChild(this.node)
delete this.paper delete this.paper
this.removed = true this.removed = true
parent && parent.add() parent && parent.add()
return this return this
} }
/*\ /*\
* Element.select * SnapElement.select
[ method ] [ method ]
** **
* Gathers the nested @Element matching the given set of CSS selectors * Gathers the nested @SnapElement matching the given set of CSS selectors
** **
- query (string) CSS selector - query (string) CSS selector
= (Element) result of query selection = (SnapElement) result of query selection
\*/ \*/
elproto.select = function (query) { elproto.select = function (query) {
return wrap(this.node.querySelector(query)) return wrap(this.node.querySelector(query))
} }
/*\ /*\
* Element.selectAll * SnapElement.selectAll
[ method ] [ method ]
** **
* Gathers nested @Element objects matching the given set of CSS selectors * Gathers nested @SnapElement objects matching the given set of CSS selectors
** **
- query (string) CSS selector - query (string) CSS selector
= (Set|array) result of query selection = (Set|array) result of query selection
\*/ \*/
elproto.selectAll = function (query) { elproto.selectAll = function (query) {
var nodelist = this.node.querySelectorAll(query), let nodelist = this.node.querySelectorAll(query),
set = (Snap.set || Array)() set = (Snap.set || Array)()
for (var i = 0; i < nodelist.length; i++) { for (let i = 0; i < nodelist.length; i++) {
set.push(wrap(nodelist[i])) set.push(wrap(nodelist[i]))
} }
return set return set
} }
/*\ /*\
* Element.asPX * SnapElement.asPX
[ method ] [ method ]
** **
* Returns given attribute of the element as a `px` value (not %, em, etc.) * Returns given attribute of the element as a `px` value (not %, em, etc.)
** **
- attr (string) attribute name - attr (string) attribute name
- value (string) #optional attribute value - value (string) #optional attribute value
= (Element) result of query selection = (SnapElement) result of query selection
\*/ \*/
elproto.asPX = function (attr, value) { elproto.asPX = function (attr, value) {
if (value == null) { if (value == null) {
value = this.attr(attr) value = this.attr(attr)
} }
return +unit2px(this, attr, value) return +unit2px(this, attr, value)
} }
// SIERRA Element.use(): I suggest adding a note about how to access the original element the returned <use> instantiates. It's a part of SVG with which ordinary web developers may be least familiar. // SIERRA SnapElement.use(): I suggest adding a note about how to access the original element the returned <use> instantiates. It's a part of SVG with which ordinary web developers may be least familiar.
/*\ /*\
* Element.use * SnapElement.use
[ method ] [ method ]
** **
* Creates a `<use>` element linked to the current element * Creates a `<use>` element linked to the current element
** **
= (Element) the `<use>` element = (SnapElement) the `<use>` element
\*/ \*/
elproto.use = function () { elproto.use = function () {
var use, let use,
id = this.node.id id = this.node.id
if (!id) { if (!id) {
id = this.id id = this.id
@ -484,15 +487,15 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
}) })
use.original = this use.original = this
return use return use
} }
function fixids(el) { function fixids(el) {
var els = el.selectAll('*'), let els = el.selectAll('*'),
it, it,
url = /^\s*url\(("|'|)(.*)\1\)\s*$/, url = /^\s*url\(("|'|)(.*)\1\)\s*$/,
ids = [], ids = [],
uses = {} uses = {}
function urltest(it, name) { function urltest(it, name) {
var val = $(it.node, name) let val = $(it.node, name)
val = val && val.match(url) val = val && val.match(url)
val = val && val[2] val = val && val[2]
if (val && val.charAt() == '#') { if (val && val.charAt() == '#') {
@ -502,14 +505,14 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
if (val) { if (val) {
uses[val] = (uses[val] || []).concat(function (id) { uses[val] = (uses[val] || []).concat(function (id) {
var attr = {} let attr = {}
attr[name] = Snap.url(id) attr[name] = Snap.url(id)
$(it.node, attr) $(it.node, attr)
}) })
} }
} }
function linktest(it) { function linktest(it) {
var val = $(it.node, 'xlink:href') let val = $(it.node, 'xlink:href')
if (val && val.charAt() == '#') { if (val && val.charAt() == '#') {
val = val.substring(1) val = val.substring(1)
} else { } else {
@ -521,7 +524,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
}) })
} }
} }
for (var i = 0, ii = els.length; i < ii; i++) { for (let i = 0, ii = els.length; i < ii; i++) {
it = els[i] it = els[i]
urltest(it, 'fill') urltest(it, 'fill')
urltest(it, 'stroke') urltest(it, 'stroke')
@ -529,7 +532,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
urltest(it, 'mask') urltest(it, 'mask')
urltest(it, 'clip-path') urltest(it, 'clip-path')
linktest(it) linktest(it)
var oldid = $(it.node, 'id') let oldid = $(it.node, 'id')
if (oldid) { if (oldid) {
$(it.node, { id: it.id }) $(it.node, { id: it.id })
ids.push({ ids.push({
@ -539,46 +542,46 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
} }
for (i = 0, ii = ids.length; i < ii; i++) { for (i = 0, ii = ids.length; i < ii; i++) {
var fs = uses[ids[i].old] let fs = uses[ids[i].old]
if (fs) { if (fs) {
for (var j = 0, jj = fs.length; j < jj; j++) { for (let j = 0, jj = fs.length; j < jj; j++) {
fs[j](ids[i].id) fs[j](ids[i].id)
} }
} }
} }
} }
/*\ /*\
* Element.clone * SnapElement.clone
[ method ] [ method ]
** **
* Creates a clone of the element and inserts it after the element * Creates a clone of the element and inserts it after the element
** **
= (Element) the clone = (SnapElement) the clone
\*/ \*/
elproto.clone = function () { elproto.clone = function () {
var clone = wrap(this.node.cloneNode(true)) let clone = wrap(this.node.cloneNode(true))
if ($(clone.node, 'id')) { if ($(clone.node, 'id')) {
$(clone.node, { id: clone.id }) $(clone.node, { id: clone.id })
} }
fixids(clone) fixids(clone)
clone.insertAfter(this) clone.insertAfter(this)
return clone return clone
} }
/*\ /*\
* Element.toDefs * SnapElement.toDefs
[ method ] [ method ]
** **
* Moves element to the shared `<defs>` area * Moves element to the shared `<defs>` area
** **
= (Element) the element = (SnapElement) the element
\*/ \*/
elproto.toDefs = function () { elproto.toDefs = function () {
var defs = getSomeDefs(this) let defs = getSomeDefs(this)
defs.appendChild(this.node) defs.appendChild(this.node)
return this return this
} }
/*\ /*\
* Element.toPattern * SnapElement.toPattern
[ method ] [ method ]
** **
* Creates a `<pattern>` element from the current element * Creates a `<pattern>` element from the current element
@ -588,9 +591,9 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
- y (string|number) - y (string|number)
- width (string|number) - width (string|number)
- height (string|number) - height (string|number)
= (Element) the `<pattern>` element = (SnapElement) the `<pattern>` element
* You can use pattern later on as an argument for `fill` attribute: * You can use pattern later on as an argument for `fill` attribute:
| var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({ | let p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
| fill: "none", | fill: "none",
| stroke: "#bada55", | stroke: "#bada55",
| strokeWidth: 5 | strokeWidth: 5
@ -600,8 +603,8 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
| fill: p | fill: p
| }); | });
\*/ \*/
elproto.pattern = elproto.toPattern = function (x, y, width, height) { elproto.pattern = elproto.toPattern = function (x, y, width, height) {
var p = make('pattern', getSomeDefs(this)) let p = make('pattern', getSomeDefs(this))
if (x == null) { if (x == null) {
x = this.getBBox() x = this.getBBox()
} }
@ -622,11 +625,11 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
}) })
p.node.appendChild(this.node) p.node.appendChild(this.node)
return p return p
} }
// SIERRA Element.marker(): clarify what a reference point is. E.g., helps you offset the object from its edge such as when centering it over a path. // SIERRA SnapElement.marker(): clarify what a reference point is. E.g., helps you offset the object from its edge such as when centering it over a path.
// SIERRA Element.marker(): I suggest the method should accept default reference point values. Perhaps centered with (refX = width/2) and (refY = height/2)? Also, couldn't it assume the element's current _width_ and _height_? And please specify what _x_ and _y_ mean: offsets? If so, from where? Couldn't they also be assigned default values? // SIERRA SnapElement.marker(): I suggest the method should accept default reference point values. Perhaps centered with (refX = width/2) and (refY = height/2)? Also, couldn't it assume the element's current _width_ and _height_? And please specify what _x_ and _y_ mean: offsets? If so, from where? Couldn't they also be assigned default values?
/*\ /*\
* Element.marker * SnapElement.marker
[ method ] [ method ]
** **
* Creates a `<marker>` element from the current element * Creates a `<marker>` element from the current element
@ -638,12 +641,12 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
- height (number) - height (number)
- refX (number) - refX (number)
- refY (number) - refY (number)
= (Element) the `<marker>` element = (SnapElement) the `<marker>` element
* You can specify the marker later as an argument for `marker-start`, `marker-end`, `marker-mid`, and `marker` attributes. The `marker` attribute places the marker at every point along the path, and `marker-mid` places them at every point except the start and end. * You can specify the marker later as an argument for `marker-start`, `marker-end`, `marker-mid`, and `marker` attributes. The `marker` attribute places the marker at every point along the path, and `marker-mid` places them at every point except the start and end.
\*/ \*/
// TODO add usage for markers // TODO add usage for markers
elproto.marker = function (x, y, width, height, refX, refY) { elproto.marker = function (x, y, width, height, refX, refY) {
var p = make('marker', getSomeDefs(this)) let p = make('marker', getSomeDefs(this))
if (x == null) { if (x == null) {
x = this.getBBox() x = this.getBBox()
} }
@ -666,23 +669,23 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
}) })
p.node.appendChild(this.node) p.node.appendChild(this.node)
return p return p
} }
var eldata = {} let eldata = {}
/*\ /*\
* Element.data * SnapElement.data
[ method ] [ method ]
** **
* Adds or retrieves given value associated with given key. (Don’t confuse * Adds or retrieves given value associated with given key. (Don’t confuse
* with `data-` attributes) * with `data-` attributes)
* *
* See also @Element.removeData * See also @SnapElement.removeData
- key (string) key to store data - key (string) key to store data
- value (any) #optional value to store - value (any) #optional value to store
= (object) @Element = (object) @SnapElement
* or, if value is not specified: * or, if value is not specified:
= (any) value = (any) value
> Usage > Usage
| for (var i = 0, i < 5, i++) { | for (let i = 0, i < 5, i++) {
| paper.circle(10 + 15 * i, 10, 10) | paper.circle(10 + 15 * i, 10, 10)
| .attr({fill: "#000"}) | .attr({fill: "#000"})
| .data("i", i) | .data("i", i)
@ -691,15 +694,15 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
| }); | });
| } | }
\*/ \*/
elproto.data = function (key, value) { elproto.data = function (key, value) {
var data = (eldata[this.id] = eldata[this.id] || {}) let data = (eldata[this.id] = eldata[this.id] || {})
if (arguments.length == 0) { if (arguments.length == 0) {
eve('snap.data.get.' + this.id, this, data, null) eve('snap.data.get.' + this.id, this, data, null)
return data return data
} }
if (arguments.length == 1) { if (arguments.length == 1) {
if (Snap.is(key, 'object')) { if (is(key, 'object')) {
for (var i in key) for (let i in key)
if (key[has](i)) { if (key[has](i)) {
this.data(i, key[i]) this.data(i, key[i])
} }
@ -711,55 +714,55 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
data[key] = value data[key] = value
eve('snap.data.set.' + this.id, this, value, key) eve('snap.data.set.' + this.id, this, value, key)
return this return this
} }
/*\ /*\
* Element.removeData * SnapElement.removeData
[ method ] [ method ]
** **
* Removes value associated with an element by given key. * Removes value associated with an element by given key.
* If key is not provided, removes all the data of the element. * If key is not provided, removes all the data of the element.
- key (string) #optional key - key (string) #optional key
= (object) @Element = (object) @SnapElement
\*/ \*/
elproto.removeData = function (key) { elproto.removeData = function (key) {
if (key == null) { if (key == null) {
eldata[this.id] = {} eldata[this.id] = {}
} else { } else {
eldata[this.id] && delete eldata[this.id][key] eldata[this.id] && delete eldata[this.id][key]
} }
return this return this
} }
/*\ /*\
* Element.outerSVG * SnapElement.outerSVG
[ method ] [ method ]
** **
* Returns SVG code for the element, equivalent to HTML's `outerHTML`. * Returns SVG code for the element, equivalent to HTML's `outerHTML`.
* *
* See also @Element.innerSVG * See also @SnapElement.innerSVG
= (string) SVG code for the element = (string) SVG code for the element
\*/ \*/
/*\ /*\
* Element.toString * SnapElement.toString
[ method ] [ method ]
** **
* See @Element.outerSVG * See @SnapElement.outerSVG
\*/ \*/
elproto.outerSVG = elproto.toString = toString(1) elproto.outerSVG = elproto.toString = toString(1)
/*\ /*\
* Element.innerSVG * SnapElement.innerSVG
[ method ] [ method ]
** **
* Returns SVG code for the element's contents, equivalent to HTML's `innerHTML` * Returns SVG code for the element's contents, equivalent to HTML's `innerHTML`
= (string) SVG code for the element = (string) SVG code for the element
\*/ \*/
elproto.innerSVG = toString() elproto.innerSVG = toString()
function toString(type) { function toString(type) {
return function () { return function () {
var res = type ? '<' + this.type : '', let res = type ? '<' + this.type : '',
attr = this.node.attributes, attr = this.node.attributes,
chld = this.node.childNodes chld = this.node.childNodes
if (type) { if (type) {
for (var i = 0, ii = attr.length; i < ii; i++) { for (let i = 0, ii = attr.length; i < ii; i++) {
res += res +=
' ' + attr[i].name + '="' + attr[i].value.replace(/"/g, '\\"') + '"' ' ' + attr[i].name + '="' + attr[i].value.replace(/"/g, '\\"') + '"'
} }
@ -779,37 +782,31 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
return res return res
} }
} }
elproto.toDataURL = function () { elproto.toDataURL = function () {
if (window && window.btoa) { let bb = this.getBBox()
var bb = this.getBBox(), let { x, y, width, height } = {
svg = Snap.format(
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{width}" height="{height}" viewBox="{x} {y} {width} {height}">{contents}</svg>',
{
x: +bb.x.toFixed(3), x: +bb.x.toFixed(3),
y: +bb.y.toFixed(3), y: +bb.y.toFixed(3),
width: +bb.width.toFixed(3), width: +bb.width.toFixed(3),
height: +bb.height.toFixed(3), height: +bb.height.toFixed(3)
contents: this.outerSVG()
} }
) let contents = this.outerSVG()
return ( let svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="${x} ${y} ${width} ${height}">${contents}</svg>`
'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)))
) return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg)))
} }
} /*\
/*\
* Fragment.select * Fragment.select
[ method ] [ method ]
** **
* See @Element.select * See @SnapElement.select
\*/ \*/
Fragment.prototype.select = elproto.select Fragment.prototype.select = elproto.select
/*\ /*\
* Fragment.selectAll * Fragment.selectAll
[ method ] [ method ]
** **
* See @Element.selectAll * See @SnapElement.selectAll
\*/ \*/
Fragment.prototype.selectAll = elproto.selectAll Fragment.prototype.selectAll = elproto.selectAll
})

91
src/equal.js
View File

@ -12,15 +12,17 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import { Snap, SnapElement, Paper, Fragment } from './svg.js'
import { is } from './utils.js'
import { SEPARATOR } from './lib/constants.js'
import { parseColor } from './lib/color.js'
Snap.plugin(function (Snap, Element, Paper, glob) { let names = {},
var names = {},
reUnit = /[%a-z]+$/i, reUnit = /[%a-z]+$/i,
Str = String Str = String
names.stroke = names.fill = 'colour' names.stroke = names.fill = 'colour'
function getEmpty(item) { function getEmpty(item) {
var l = item[0] let l = item[0]
switch (l.toLowerCase()) { switch (l.toLowerCase()) {
case 't': case 't':
return [l, 0, 0] return [l, 0, 0]
@ -41,13 +43,13 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
return [l, 1] return [l, 1]
} }
} }
} }
function equaliseTransform(t1, t2, getBBox) { function equaliseTransform(t1, t2, getBBox) {
t1 = t1 || new Snap.Matrix() t1 = t1 || new Snap.Matrix()
t2 = t2 || new Snap.Matrix() t2 = t2 || new Snap.Matrix()
t1 = Snap.parseTransformString(t1.toTransformString()) || [] t1 = Snap.parseTransformString(t1.toTransformString()) || []
t2 = Snap.parseTransformString(t2.toTransformString()) || [] t2 = Snap.parseTransformString(t2.toTransformString()) || []
var maxlength = Math.max(t1.length, t2.length), let maxlength = Math.max(t1.length, t2.length),
from = [], from = [],
to = [], to = [],
i = 0, i = 0,
@ -60,8 +62,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
tt2 = t2[i] || getEmpty(tt1) tt2 = t2[i] || getEmpty(tt1)
if ( if (
tt1[0] != tt2[0] || tt1[0] != tt2[0] ||
(tt1[0].toLowerCase() == 'r' && (tt1[0].toLowerCase() == 'r' && (tt1[2] != tt2[2] || tt1[3] != tt2[3])) ||
(tt1[2] != tt2[2] || tt1[3] != tt2[3])) ||
(tt1[0].toLowerCase() == 's' && (tt1[3] != tt2[3] || tt1[4] != tt2[4])) (tt1[0].toLowerCase() == 's' && (tt1[3] != tt2[3] || tt1[4] != tt2[4]))
) { ) {
t1 = Snap._.transform2matrix(t1, getBBox()) t1 = Snap._.transform2matrix(t1, getBBox())
@ -82,23 +83,23 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
to: path2array(to), to: path2array(to),
f: getPath(from) f: getPath(from)
} }
} }
function getNumber(val) { function getNumber(val) {
return val return val
} }
function getUnit(unit) { function getUnit(unit) {
return function (val) { return function (val) {
return +val.toFixed(3) + unit return +val.toFixed(3) + unit
} }
} }
function getViewBox(val) { function getViewBox(val) {
return val.join(' ') return val.join(' ')
} }
function getColour(clr) { function getColour(clr) {
return Snap.rgb(clr[0], clr[1], clr[2], clr[3]) return Snap.rgb(clr[0], clr[1], clr[2], clr[3])
} }
function getPath(path) { function getPath(path) {
var k = 0, let k = 0,
i, i,
ii, ii,
j, j,
@ -116,36 +117,36 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
b[i] = out b[i] = out
} }
return Function('val', 'return Snap.path.toString.call([' + b + '])') return Function('val', 'return Snap.path.toString.call([' + b + '])')
} }
function path2array(path) { function path2array(path) {
var out = [] let out = []
for (var i = 0, ii = path.length; i < ii; i++) { for (let i = 0, ii = path.length; i < ii; i++) {
for (var j = 1, jj = path[i].length; j < jj; j++) { for (let j = 1, jj = path[i].length; j < jj; j++) {
out.push(path[i][j]) out.push(path[i][j])
} }
} }
return out return out
} }
function isNumeric(obj) { function isNumeric(obj) {
return isFinite(obj) return isFinite(obj)
} }
function arrayEqual(arr1, arr2) { function arrayEqual(arr1, arr2) {
if (!Snap.is(arr1, 'array') || !Snap.is(arr2, 'array')) { if (!is(arr1, 'array') || !is(arr2, 'array')) {
return false return false
} }
return arr1.toString() == arr2.toString() return arr1.toString() == arr2.toString()
} }
Element.prototype.equal = function (name, b) { SnapElement.prototype.equal = function (name, b) {
return eve('snap.util.equal', this, name, b).firstDefined() return eve('snap.util.equal', this, name, b).firstDefined()
} }
eve.on('snap.util.equal', function (name, b) { eve.on('snap.util.equal', function (name, b) {
var A, let A,
B, B,
a = Str(this.attr(name) || ''), a = Str(this.attr(name) || ''),
el = this el = this
if (names[name] == 'colour') { if (names[name] == 'colour') {
A = Snap.color(a) A = parseColor(a)
B = Snap.color(b) B = parseColor(b)
return { return {
from: [A.r, A.g, A.b, A.opacity], from: [A.r, A.g, A.b, A.opacity],
to: [B.r, B.g, B.b, B.opacity], to: [B.r, B.g, B.b, B.opacity],
@ -171,10 +172,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
} }
a = this.matrix a = this.matrix
if (!Snap._.rgTransform.test(b)) { if (!Snap._.rgTransform.test(b)) {
b = Snap._.transform2matrix( b = Snap._.transform2matrix(Snap._.svgTransform2string(b), this.getBBox())
Snap._.svgTransform2string(b),
this.getBBox()
)
} else { } else {
b = Snap._.transform2matrix(b, this.getBBox()) b = Snap._.transform2matrix(b, this.getBBox())
} }
@ -191,8 +189,8 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
} }
} }
if (name == 'points') { if (name == 'points') {
A = Str(a).split(Snap._.separator) A = Str(a).split(SEPARATOR)
B = Str(b).split(Snap._.separator) B = Str(b).split(SEPARATOR)
return { return {
from: A, from: A,
to: B, to: B,
@ -208,7 +206,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
f: getNumber f: getNumber
} }
} }
var aUnit = a.match(reUnit), let aUnit = a.match(reUnit),
bUnit = Str(b).match(reUnit) bUnit = Str(b).match(reUnit)
if (aUnit && arrayEqual(aUnit, bUnit)) { if (aUnit && arrayEqual(aUnit, bUnit)) {
return { return {
@ -223,5 +221,4 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
f: getNumber f: getNumber
} }
} }
})
}) })

62
src/eve.js
View File

@ -17,7 +17,7 @@
// │ Author Dmitry Baranovskiy (http://dmitry.baranovskiy.com/) │ \\ // │ Author Dmitry Baranovskiy (http://dmitry.baranovskiy.com/) │ \\
// └────────────────────────────────────────────────────────────┘ \\ // └────────────────────────────────────────────────────────────┘ \\
var version = '0.5.4', let version = '0.5.4',
has = 'hasOwnProperty', has = 'hasOwnProperty',
separator = /[\.\/]/, separator = /[\.\/]/,
comaseparator = /\s*,\s*/, comaseparator = /\s*,\s*/,
@ -29,16 +29,16 @@ var version = '0.5.4',
stop, stop,
events = { n: {} }, events = { n: {} },
firstDefined = function () { firstDefined = function () {
for (var i = 0, ii = this.length; i < ii; i++) { for (let i = 0, ii = this.length; i < ii; i++) {
if (typeof this[i] != 'undefined') { if (this[i] !== void 0) {
return this[i] return this[i]
} }
} }
}, },
lastDefined = function () { lastDefined = function () {
var i = this.length let i = this.length
while (--i) { while (--i) {
if (typeof this[i] != 'undefined') { if (this[i] !== void 0) {
return this[i] return this[i]
} }
} }
@ -63,7 +63,7 @@ var version = '0.5.4',
= (object) array of returned values from the listeners. Array has two methods `.firstDefined()` and `.lastDefined()` to get first or last not `undefined` value. = (object) array of returned values from the listeners. Array has two methods `.firstDefined()` and `.lastDefined()` to get first or last not `undefined` value.
\*/ \*/
eve = function (name, scope) { eve = function (name, scope) {
var oldstop = stop, let oldstop = stop,
args = Array.prototype.slice.call(arguments, 2), args = Array.prototype.slice.call(arguments, 2),
listeners = eve.listeners(name), listeners = eve.listeners(name),
z = 0, z = 0,
@ -76,7 +76,7 @@ var version = '0.5.4',
out.lastDefined = lastDefined out.lastDefined = lastDefined
current_event = name current_event = name
stop = 0 stop = 0
for (var i = 0, ii = listeners.length; i < ii; i++) for (let i = 0; i < listeners.length; i++)
if ('zIndex' in listeners[i]) { if ('zIndex' in listeners[i]) {
indexed.push(listeners[i].zIndex) indexed.push(listeners[i].zIndex)
if (listeners[i].zIndex < 0) { if (listeners[i].zIndex < 0) {
@ -92,7 +92,7 @@ var version = '0.5.4',
return out return out
} }
} }
for (i = 0; i < ii; i++) { for (let i = 0; i < listeners.length; i++) {
l = listeners[i] l = listeners[i]
if ('zIndex' in l) { if ('zIndex' in l) {
if (l.zIndex == indexed[z]) { if (l.zIndex == indexed[z]) {
@ -135,7 +135,7 @@ eve._events = events
= (array) array of event handlers = (array) array of event handlers
\*/ \*/
eve.listeners = function (name) { eve.listeners = function (name) {
var names = isArray(name) ? name : name.split(separator), let names = isArray(name) ? name : name.split(separator),
e = events, e = events,
item, item,
items, items,
@ -213,17 +213,17 @@ eve.on = function (name, f) {
if (typeof f != 'function') { if (typeof f != 'function') {
return function () {} return function () {}
} }
var names = isArray(name) let names = isArray(name)
? isArray(name[0]) ? isArray(name[0])
? name ? name
: [name] : [name]
: Str(name).split(comaseparator) : Str(name).split(comaseparator)
for (var i = 0, ii = names.length; i < ii; i++) { for (let i = 0, ii = names.length; i < ii; i++) {
;(function (name) { ;(function (name) {
var names = isArray(name) ? name : Str(name).split(separator), let names = isArray(name) ? name : Str(name).split(separator),
e = events, e = events,
exist exist
for (var i = 0, ii = names.length; i < ii; i++) { for (let i = 0, ii = names.length; i < ii; i++) {
e = e.n e = e.n
e = e =
(e.hasOwnProperty(names[i]) && e[names[i]]) || (e.hasOwnProperty(names[i]) && e[names[i]]) ||
@ -245,8 +245,6 @@ eve.on = function (name, f) {
} }
} }
/*\ /*\
* eve.f
[ method ]
** **
* Returns function that will fire given event with optional arguments. * Returns function that will fire given event with optional arguments.
* Arguments that will be passed to the result function will be also * Arguments that will be passed to the result function will be also
@ -259,18 +257,12 @@ eve.on = function (name, f) {
- varargs (…) and any other arguments - varargs (…) and any other arguments
= (function) possible event handler function = (function) possible event handler function
\*/ \*/
eve.f = function (event) { eve.f = function (event, ...attrs) {
var attrs = [].slice.call(arguments, 1) return function (...args) {
return function () { eve.apply(null, [event, null].concat(attrs).concat(args))
eve.apply(
null,
[event, null].concat(attrs).concat([].slice.call(arguments, 0))
)
} }
} }
/*\ /*\
* eve.stop
[ method ]
** **
* Is used inside an event handler to stop the event, preventing any subsequent listeners from firing. * Is used inside an event handler to stop the event, preventing any subsequent listeners from firing.
\*/ \*/
@ -290,7 +282,7 @@ eve.stop = function () {
= (boolean) `true`, if current event’s name contains `subname` = (boolean) `true`, if current event’s name contains `subname`
\*/ \*/
eve.nt = function (subname) { eve.nt = function (subname) {
var cur = isArray(current_event) ? current_event.join('.') : current_event let cur = isArray(current_event) ? current_event.join('.') : current_event
if (subname) { if (subname) {
return new RegExp('(?:\\.|\\/|^)' + subname + '(?:\\.|\\/|$)').test(cur) return new RegExp('(?:\\.|\\/|^)' + subname + '(?:\\.|\\/|$)').test(cur)
} }
@ -329,19 +321,19 @@ eve.off = eve.unbind = function (name, f) {
eve._events = events = { n: {} } eve._events = events = { n: {} }
return return
} }
var names = isArray(name) let names = isArray(name)
? isArray(name[0]) ? isArray(name[0])
? name ? name
: [name] : [name]
: Str(name).split(comaseparator) : Str(name).split(comaseparator)
if (names.length > 1) { if (names.length > 1) {
for (var i = 0, ii = names.length; i < ii; i++) { for (let i = 0, ii = names.length; i < ii; i++) {
eve.off(names[i], f) eve.off(names[i], f)
} }
return return
} }
names = isArray(name) ? name : Str(name).split(separator) names = isArray(name) ? name : Str(name).split(separator)
var e, let e,
key, key,
splice, splice,
i, i,
@ -389,7 +381,7 @@ eve.off = eve.unbind = function (name, f) {
} }
for (key in e.n) for (key in e.n)
if (e.n[has](key) && e.n[key].f) { if (e.n[has](key) && e.n[key].f) {
var funcs = e.n[key].f let funcs = e.n[key].f
for (j = 0, jj = funcs.length; j < jj; j++) for (j = 0, jj = funcs.length; j < jj; j++)
if (funcs[j] == f) { if (funcs[j] == f) {
funcs.splice(j, 1) funcs.splice(j, 1)
@ -438,21 +430,11 @@ eve.off = eve.unbind = function (name, f) {
= (function) same return function as @eve.on = (function) same return function as @eve.on
\*/ \*/
eve.once = function (name, f) { eve.once = function (name, f) {
var f2 = function () { let f2 = function () {
eve.off(name, f2) eve.off(name, f2)
return f.apply(this, arguments) return f.apply(this, arguments)
} }
return eve.on(name, f2) return eve.on(name, f2)
} }
/*\
* eve.version
[ property (string) ]
**
* Current version of the library.
\*/
eve.version = version
eve.toString = function () {
return 'You are running Eve ' + version
}
export default eve export default eve

266
src/filter.js
View File

@ -12,61 +12,28 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import { Snap, SnapElement, Paper, Fragment } from './svg.js'
import { $ } from './utils.js'
import { parseColor } from './lib/color.js'
Snap.plugin(function (Snap, Element, Paper, glob) { let elproto = SnapElement.prototype,
var elproto = Element.prototype,
pproto = Paper.prototype,
rgurl = /^\s*url\((.+)\)/, rgurl = /^\s*url\((.+)\)/,
Str = String, Str = String
$ = Snap._.$
Snap.filter = {}
/*\
* Paper.filter
[ method ]
**
* Creates a `<filter>` element
**
- filstr (string) SVG fragment of filter provided as a string
= (object) @Element
* Note: It is recommended to use filters embedded into the page inside an empty SVG element.
> Usage
| var f = paper.filter('<feGaussianBlur stdDeviation="2"/>'),
| c = paper.circle(10, 10, 10).attr({
| filter: f
| });
\*/
pproto.filter = function (filstr) {
var paper = this
if (paper.type != 'svg') {
paper = paper.paper
}
var f = Snap.parse(Str(filstr)),
id = Snap._.id(),
width = paper.node.offsetWidth,
height = paper.node.offsetHeight,
filter = $('filter')
$(filter, {
id: id,
filterUnits: 'userSpaceOnUse'
})
filter.appendChild(f.node)
paper.defs.appendChild(filter)
return new Element(filter)
}
eve.on('snap.util.getattr.filter', function () { Snap.filter = {}
eve.on('snap.util.getattr.filter', function () {
eve.stop() eve.stop()
var p = $(this.node, 'filter') let p = $(this.node, 'filter')
if (p) { if (p) {
var match = Str(p).match(rgurl) let match = Str(p).match(rgurl)
return match && Snap.select(match[1]) return match && Snap.select(match[1])
} }
}) })
eve.on('snap.util.attr.filter', function (value) { eve.on('snap.util.attr.filter', function (value) {
if (value instanceof Element && value.type == 'filter') { if (value instanceof SnapElement && value.type == 'filter') {
eve.stop() eve.stop()
var id = value.node.id let id = value.node.id
if (!id) { if (!id) {
$(value.node, { id: value.id }) $(value.node, { id: value.id })
id = value.id id = value.id
@ -79,8 +46,8 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
eve.stop() eve.stop()
this.node.removeAttribute('filter') this.node.removeAttribute('filter')
} }
}) })
/*\ /*\
* Snap.filter.blur * Snap.filter.blur
[ method ] [ method ]
** **
@ -90,24 +57,22 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- y (number) #optional amount of vertical blur, in pixels - y (number) #optional amount of vertical blur, in pixels
= (string) filter representation = (string) filter representation
> Usage > Usage
| var f = paper.filter(Snap.filter.blur(5, 10)), | let f = paper.filter(Snap.filter.blur(5, 10)),
| c = paper.circle(10, 10, 10).attr({ | c = paper.circle(10, 10, 10).attr({
| filter: f | filter: f
| }); | });
\*/ \*/
Snap.filter.blur = function (x, y) { Snap.filter.blur = function (x, y) {
if (x == null) { if (x == null) {
x = 2 x = 2
} }
var def = y == null ? x : [x, y] let def = y == null ? x : [x, y]
return Snap.format('<feGaussianBlur stdDeviation="{def}"/>', { return `<feGaussianBlur stdDeviation="${def}"/>`
def: def }
}) Snap.filter.blur.toString = function () {
}
Snap.filter.blur.toString = function () {
return this() return this()
} }
/*\ /*\
* Snap.filter.shadow * Snap.filter.shadow
[ method ] [ method ]
** **
@ -129,12 +94,12 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- opacity (number) #optional `0..1` opacity of the shadow - opacity (number) #optional `0..1` opacity of the shadow
= (string) filter representation = (string) filter representation
> Usage > Usage
| var f = paper.filter(Snap.filter.shadow(0, 2, .3)), | let f = paper.filter(Snap.filter.shadow(0, 2, .3)),
| c = paper.circle(10, 10, 10).attr({ | c = paper.circle(10, 10, 10).attr({
| filter: f | filter: f
| }); | });
\*/ \*/
Snap.filter.shadow = function (dx, dy, blur, color, opacity) { Snap.filter.shadow = function (dx, dy, blur, color, opacity) {
if (opacity == null) { if (opacity == null) {
if (color == null) { if (color == null) {
opacity = blur opacity = blur
@ -159,22 +124,13 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
if (dy == null) { if (dy == null) {
dy = dx dy = dx
} }
color = Snap.color(color) color = parseColor(color)
return Snap.format( return `<feGaussianBlur in="SourceAlpha" stdDeviation="${blur}"/><feOffset dx="${dx}" dy="${dy}" result="offsetblur"/><feFlood flood-color="${color}"/><feComposite in2="offsetblur" operator="in"/><feComponentTransfer><feFuncA type="linear" slope="${opacity}"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>`
'<feGaussianBlur in="SourceAlpha" stdDeviation="{blur}"/><feOffset dx="{dx}" dy="{dy}" result="offsetblur"/><feFlood flood-color="{color}"/><feComposite in2="offsetblur" operator="in"/><feComponentTransfer><feFuncA type="linear" slope="{opacity}"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>', }
{ Snap.filter.shadow.toString = function () {
color: color,
dx: dx,
dy: dy,
blur: blur,
opacity: opacity
}
)
}
Snap.filter.shadow.toString = function () {
return this() return this()
} }
/*\ /*\
* Snap.filter.grayscale * Snap.filter.grayscale
[ method ] [ method ]
** **
@ -183,28 +139,26 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- amount (number) amount of filter (`0..1`) - amount (number) amount of filter (`0..1`)
= (string) filter representation = (string) filter representation
\*/ \*/
Snap.filter.grayscale = function (amount) { Snap.filter.grayscale = function (amount) {
if (amount == null) { if (amount == null) {
amount = 1 amount = 1
} }
return Snap.format(
'<feColorMatrix type="matrix" values="{a} {b} {c} 0 0 {d} {e} {f} 0 0 {g} {b} {h} 0 0 0 0 0 1 0"/>', let a = 0.2126 + 0.7874 * (1 - amount)
{ let b = 0.7152 - 0.7152 * (1 - amount)
a: 0.2126 + 0.7874 * (1 - amount), let c = 0.0722 - 0.0722 * (1 - amount)
b: 0.7152 - 0.7152 * (1 - amount), let d = 0.2126 - 0.2126 * (1 - amount)
c: 0.0722 - 0.0722 * (1 - amount), let e = 0.7152 + 0.2848 * (1 - amount)
d: 0.2126 - 0.2126 * (1 - amount), let f = 0.0722 - 0.0722 * (1 - amount)
e: 0.7152 + 0.2848 * (1 - amount), let g = 0.2126 - 0.2126 * (1 - amount)
f: 0.0722 - 0.0722 * (1 - amount), let h = 0.0722 + 0.9278 * (1 - amount)
g: 0.2126 - 0.2126 * (1 - amount),
h: 0.0722 + 0.9278 * (1 - amount) return `<feColorMatrix type="matrix" values="${a} ${b} ${c} 0 0 ${d} ${e} ${f} 0 0 ${g} ${b} ${h} 0 0 0 0 0 1 0"/>`
} }
) Snap.filter.grayscale.toString = function () {
}
Snap.filter.grayscale.toString = function () {
return this() return this()
} }
/*\ /*\
* Snap.filter.sepia * Snap.filter.sepia
[ method ] [ method ]
** **
@ -213,29 +167,27 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- amount (number) amount of filter (`0..1`) - amount (number) amount of filter (`0..1`)
= (string) filter representation = (string) filter representation
\*/ \*/
Snap.filter.sepia = function (amount) { Snap.filter.sepia = function (amount) {
if (amount == null) { if (amount == null) {
amount = 1 amount = 1
} }
return Snap.format(
'<feColorMatrix type="matrix" values="{a} {b} {c} 0 0 {d} {e} {f} 0 0 {g} {h} {i} 0 0 0 0 0 1 0"/>', let a = 0.393 + 0.607 * (1 - amount)
{ let b = 0.769 - 0.769 * (1 - amount)
a: 0.393 + 0.607 * (1 - amount), let c = 0.189 - 0.189 * (1 - amount)
b: 0.769 - 0.769 * (1 - amount), let d = 0.349 - 0.349 * (1 - amount)
c: 0.189 - 0.189 * (1 - amount), let e = 0.686 + 0.314 * (1 - amount)
d: 0.349 - 0.349 * (1 - amount), let f = 0.168 - 0.168 * (1 - amount)
e: 0.686 + 0.314 * (1 - amount), let g = 0.272 - 0.272 * (1 - amount)
f: 0.168 - 0.168 * (1 - amount), let h = 0.534 - 0.534 * (1 - amount)
g: 0.272 - 0.272 * (1 - amount), let i = 0.131 + 0.869 * (1 - amount)
h: 0.534 - 0.534 * (1 - amount),
i: 0.131 + 0.869 * (1 - amount) return `<feColorMatrix type="matrix" values="${a} ${b} ${c} 0 0 ${d} ${e} ${f} 0 0 ${g} ${h} ${i} 0 0 0 0 0 1 0"/>`
} }
) Snap.filter.sepia.toString = function () {
}
Snap.filter.sepia.toString = function () {
return this() return this()
} }
/*\ /*\
* Snap.filter.saturate * Snap.filter.saturate
[ method ] [ method ]
** **
@ -244,18 +196,16 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- amount (number) amount of filter (`0..1`) - amount (number) amount of filter (`0..1`)
= (string) filter representation = (string) filter representation
\*/ \*/
Snap.filter.saturate = function (amount) { Snap.filter.saturate = function (amount) {
if (amount == null) { if (amount == null) {
amount = 1 amount = 1
} }
return Snap.format('<feColorMatrix type="saturate" values="{amount}"/>', { return `<feColorMatrix type="saturate" values="${1 - amount}"/>`
amount: 1 - amount }
}) Snap.filter.saturate.toString = function () {
}
Snap.filter.saturate.toString = function () {
return this() return this()
} }
/*\ /*\
* Snap.filter.hueRotate * Snap.filter.hueRotate
[ method ] [ method ]
** **
@ -264,16 +214,14 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- angle (number) angle of rotation - angle (number) angle of rotation
= (string) filter representation = (string) filter representation
\*/ \*/
Snap.filter.hueRotate = function (angle) { Snap.filter.hueRotate = function (angle) {
angle = angle || 0 angle = angle || 0
return Snap.format('<feColorMatrix type="hueRotate" values="{angle}"/>', { return `<feColorMatrix type="hueRotate" values="${angle}"/>`
angle: angle }
}) Snap.filter.hueRotate.toString = function () {
}
Snap.filter.hueRotate.toString = function () {
return this() return this()
} }
/*\ /*\
* Snap.filter.invert * Snap.filter.invert
[ method ] [ method ]
** **
@ -282,23 +230,23 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- amount (number) amount of filter (`0..1`) - amount (number) amount of filter (`0..1`)
= (string) filter representation = (string) filter representation
\*/ \*/
Snap.filter.invert = function (amount) { Snap.filter.invert = function (amount) {
if (amount == null) { if (amount == null) {
amount = 1 amount = 1
} }
// <feColorMatrix type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" color-interpolation-filters="sRGB"/> // <feColorMatrix type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" color-interpolation-filters="sRGB"/>
return Snap.format( return `<feComponentTransfer><feFuncR type="table" tableValues="${amount} ${
'<feComponentTransfer><feFuncR type="table" tableValues="{amount} {amount2}"/><feFuncG type="table" tableValues="{amount} {amount2}"/><feFuncB type="table" tableValues="{amount} {amount2}"/></feComponentTransfer>', 1 - amount
{ }"/><feFuncG type="table" tableValues="${amount} ${
amount: amount, 1 - amount
amount2: 1 - amount }"/><feFuncB type="table" tableValues="${amount} ${
} 1 - amount
) }"/></feComponentTransfer>`
} }
Snap.filter.invert.toString = function () { Snap.filter.invert.toString = function () {
return this() return this()
} }
/*\ /*\
* Snap.filter.brightness * Snap.filter.brightness
[ method ] [ method ]
** **
@ -307,21 +255,16 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- amount (number) amount of filter (`0..1`) - amount (number) amount of filter (`0..1`)
= (string) filter representation = (string) filter representation
\*/ \*/
Snap.filter.brightness = function (amount) { Snap.filter.brightness = function (amount) {
if (amount == null) { if (amount == null) {
amount = 1 amount = 1
} }
return Snap.format( return `<feComponentTransfer><feFuncR type="linear" slope="${amount}"/><feFuncG type="linear" slope="${amount}"/><feFuncB type="linear" slope="${amount}"/></feComponentTransfer>`
'<feComponentTransfer><feFuncR type="linear" slope="{amount}"/><feFuncG type="linear" slope="{amount}"/><feFuncB type="linear" slope="{amount}"/></feComponentTransfer>', }
{ Snap.filter.brightness.toString = function () {
amount: amount
}
)
}
Snap.filter.brightness.toString = function () {
return this() return this()
} }
/*\ /*\
* Snap.filter.contrast * Snap.filter.contrast
[ method ] [ method ]
** **
@ -330,19 +273,14 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- amount (number) amount of filter (`0..1`) - amount (number) amount of filter (`0..1`)
= (string) filter representation = (string) filter representation
\*/ \*/
Snap.filter.contrast = function (amount) { Snap.filter.contrast = function (amount) {
if (amount == null) { if (amount == null) {
amount = 1 amount = 1
} }
return Snap.format( let amount2 = 0.5 - amount / 2
'<feComponentTransfer><feFuncR type="linear" slope="{amount}" intercept="{amount2}"/><feFuncG type="linear" slope="{amount}" intercept="{amount2}"/><feFuncB type="linear" slope="{amount}" intercept="{amount2}"/></feComponentTransfer>', return `<feComponentTransfer><feFuncR type="linear" slope="${amount}" intercept="${amount2}"/><feFuncG type="linear" slope="${amount}" intercept="${amount2}"/><feFuncB type="linear" slope="${amount}" intercept="${amount2}"/></feComponentTransfer>`
{ }
amount: amount,
amount2: 0.5 - amount / 2 Snap.filter.contrast.toString = function () {
}
)
}
Snap.filter.contrast.toString = function () {
return this() return this()
} }
})

4
src/index.js
View File

@ -1,17 +1,17 @@
import { Snap } from './svg.js' import { Snap } from './svg.js'
import './paper.js'
import './element.js' import './element.js'
import './animation.js' import './animation.js'
import './matrix.js' import './matrix.js'
import './attr.js' import './attr.js'
import './class.js' import './class.js'
import './attradd.js' import './attradd.js'
import './paper.js'
import './path.js' import './path.js'
import './set.js' import './set.js'
import './equal.js' import './equal.js'
import './mouse.js' import './mouse.js'
import './filter.js' import './filter.js'
import './align.js' import './align.js'
import './colors.js' // import './colors.js'
export default Snap export default Snap

444
src/lib/color.js Normal file
View File

@ -0,0 +1,444 @@
/**
* {颜色处理}
* @author yutent<yutent.io@gmail.com>
* @date 2024/03/06 13:05:09
*/
import { cacher, is } from '../utils.js'
const hsrg = { hs: 1, rg: 1 }
const colourRegExp =
/^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgba?\(\s*([\d\.]+%?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+%?)?)\s*\)|hsba?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?%?)\s*\)|hsla?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?%?)\s*\))\s*$/i
function toHex(color) {
let i =
doc.getElementsByTagName('head')[0] || doc.getElementsByTagName('svg')[0],
red = 'rgb(255, 0, 0)'
toHex = cacher(function (color) {
if (color.toLowerCase() == 'red') {
return red
}
i.style.color = red
i.style.color = color
let out = doc.defaultView.getComputedStyle(i, E).getPropertyValue('color')
return out == red ? null : out
})
return toHex(color)
}
function hsbtoString() {
return 'hsb(' + [this.h, this.s, this.b] + ')'
}
function hsltoString() {
return 'hsl(' + [this.h, this.s, this.l] + ')'
}
function rgbtoString() {
return this.opacity == 1 || this.opacity == null
? this.hex
: 'rgba(' + [this.r, this.g, this.b, this.opacity] + ')'
}
function prepareRGB(r, g, b) {
if (g == null && is(r, 'object') && 'r' in r && 'g' in r && 'b' in r) {
b = r.b
g = r.g
r = r.r
}
if (g == null && is(r, string)) {
let clr = getRGB(r)
r = clr.r
g = clr.g
b = clr.b
}
if (r > 1 || g > 1 || b > 1) {
r /= 255
g /= 255
b /= 255
}
return [r, g, b]
}
function packageRGB(r, g, b, o) {
r = Math.round(r * 255)
g = Math.round(g * 255)
b = Math.round(b * 255)
let rgb = {
r: r,
g: g,
b: b,
opacity: is(o, 'finite') ? o : 1,
hex: rgb(r, g, b),
toString: rgbtoString
}
is(o, 'finite') && (rgb.opacity = o)
return rgb
}
// Colour
/*\
**
* Parses color string as RGB object
- color (string) color string in one of the following formats:
# <ul>
# <li>Color name (<code>red</code>, <code>green</code>, <code>cornflowerblue</code>, etc)</li>
# <li>#••• — shortened HTML color: (<code>#000</code>, <code>#fc0</code>, etc.)</li>
# <li>#•••••• — full length HTML color: (<code>#000000</code>, <code>#bd2300</code>)</li>
# <li>rgb(•••, •••, •••) — red, green and blue channels values: (<code>rgb(200,&nbsp;100,&nbsp;0)</code>)</li>
# <li>rgba(•••, •••, •••, •••) — also with opacity</li>
# <li>rgb(•••%, •••%, •••%) — same as above, but in %: (<code>rgb(100%,&nbsp;175%,&nbsp;0%)</code>)</li>
# <li>rgba(•••%, •••%, •••%, •••%) — also with opacity</li>
# <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (<code>hsb(0.5,&nbsp;0.25,&nbsp;1)</code>)</li>
# <li>hsba(•••, •••, •••, •••) — also with opacity</li>
# <li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
# <li>hsba(•••%, •••%, •••%, •••%) — also with opacity</li>
# <li>hsl(•••, •••, •••) — hue, saturation and luminosity values: (<code>hsb(0.5,&nbsp;0.25,&nbsp;0.5)</code>)</li>
# <li>hsla(•••, •••, •••, •••) — also with opacity</li>
# <li>hsl(•••%, •••%, •••%) — same as above, but in %</li>
# <li>hsla(•••%, •••%, •••%, •••%) — also with opacity</li>
# </ul>
* Note that `%` can be used any time: `rgb(20%, 255, 50%)`.
= (object) RGB object in the following format:
o {
o r (number) red,
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 }
\*/
export const getRGB = cacher(function (colour) {
if (!colour || !!((colour = String(colour)).indexOf('-') + 1)) {
return {
r: -1,
g: -1,
b: -1,
hex: 'none',
error: 1,
toString: rgbtoString
}
}
if (colour == 'none') {
return { r: -1, g: -1, b: -1, hex: 'none', toString: rgbtoString }
}
!(
hsrg.hasOwnProperty(colour.toLowerCase().slice(0, 2)) ||
colour.charAt() == '#'
) && (colour = toHex(colour))
if (!colour) {
return {
r: -1,
g: -1,
b: -1,
hex: 'none',
error: 1,
toString: rgbtoString
}
}
let res,
red,
green,
blue,
opacity,
t,
values,
rgb = colour.match(colourRegExp)
if (rgb) {
if (rgb[2]) {
blue = parseInt(rgb[2].substring(5), 16)
green = parseInt(rgb[2].substring(3, 5), 16)
red = parseInt(rgb[2].substring(1, 3), 16)
}
if (rgb[3]) {
blue = parseInt((t = rgb[3].charAt(3)) + t, 16)
green = parseInt((t = rgb[3].charAt(2)) + t, 16)
red = parseInt((t = rgb[3].charAt(1)) + t, 16)
}
if (rgb[4]) {
values = rgb[4].split(commaSpaces)
red = +values[0]
values[0].slice(-1) == '%' && (red *= 2.55)
green = +values[1]
values[1].slice(-1) == '%' && (green *= 2.55)
blue = +values[2]
values[2].slice(-1) == '%' && (blue *= 2.55)
rgb[1].toLowerCase().slice(0, 4) == 'rgba' && (opacity = +values[3])
values[3] && values[3].slice(-1) == '%' && (opacity /= 100)
}
if (rgb[5]) {
values = rgb[5].split(commaSpaces)
red = +values[0]
values[0].slice(-1) == '%' && (red /= 100)
green = +values[1]
values[1].slice(-1) == '%' && (green /= 100)
blue = +values[2]
values[2].slice(-1) == '%' && (blue /= 100)
;(values[0].slice(-3) == 'deg' || values[0].slice(-1) == '\xb0') &&
(red /= 360)
rgb[1].toLowerCase().slice(0, 4) == 'hsba' && (opacity = +values[3])
values[3] && values[3].slice(-1) == '%' && (opacity /= 100)
return hsb2rgb(red, green, blue, opacity)
}
if (rgb[6]) {
values = rgb[6].split(commaSpaces)
red = +values[0]
values[0].slice(-1) == '%' && (red /= 100)
green = +values[1]
values[1].slice(-1) == '%' && (green /= 100)
blue = +values[2]
values[2].slice(-1) == '%' && (blue /= 100)
;(values[0].slice(-3) == 'deg' || values[0].slice(-1) == '\xb0') &&
(red /= 360)
rgb[1].toLowerCase().slice(0, 4) == 'hsla' && (opacity = +values[3])
values[3] && values[3].slice(-1) == '%' && (opacity /= 100)
return hsl2rgb(red, green, blue, opacity)
}
red = Math.min(Math.round(red), 255)
green = Math.min(Math.round(green), 255)
blue = Math.min(Math.round(blue), 255)
opacity = Math.min(Math.max(opacity, 0), 1)
rgb = { r: red, g: green, b: blue, toString: rgbtoString }
rgb.hex =
'#' + (16777216 | blue | (green << 8) | (red << 16)).toString(16).slice(1)
rgb.opacity = is(opacity, 'finite') ? opacity : 1
return rgb
}
return { r: -1, g: -1, b: -1, hex: 'none', error: 1, toString: rgbtoString }
})
/*\
**
* Converts HSB values to a hex representation of the color
- h (number) hue
- s (number) saturation
- b (number) value or brightness
= (string) hex representation of the color
\*/
export const hsb = cacher(function (h, s, b) {
return hsb2rgb(h, s, b).hex
})
/*\
**
* Converts HSL values to a hex representation of the color
- h (number) hue
- s (number) saturation
- l (number) luminosity
= (string) hex representation of the color
\*/
export const hsl = cacher(function (h, s, l) {
return hsl2rgb(h, s, l).hex
})
/*\
**
* Converts RGB values to a hex representation of the color
- r (number) red
- g (number) green
- b (number) blue
= (string) hex representation of the color
\*/
export const rgb = cacher(function (r, g, b, o) {
if (is(o, 'finite')) {
let round = Math.round
return 'rgba(' + [round(r), round(g), round(b), +o.toFixed(2)] + ')'
}
return '#' + (16777216 | b | (g << 8) | (r << 16)).toString(16).slice(1)
})
/*\
**
* Parses the color string and returns an object featuring the color's component values
- clr (string) color string in one of the supported formats (see getRGB)
= (object) Combined RGB/HSB object in the following format:
o {
o r (number) red,
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 h (number) hue,
o s (number) saturation,
o v (number) value (brightness),
o l (number) lightness
o }
\*/
export const parseColor = function (clr) {
let rgb
if (is(clr, 'object') && 'h' in clr && 's' in clr && 'b' in clr) {
rgb = hsb2rgb(clr)
clr.r = rgb.r
clr.g = rgb.g
clr.b = rgb.b
clr.opacity = 1
clr.hex = rgb.hex
} else if (is(clr, 'object') && 'h' in clr && 's' in clr && 'l' in clr) {
rgb = hsl2rgb(clr)
clr.r = rgb.r
clr.g = rgb.g
clr.b = rgb.b
clr.opacity = 1
clr.hex = rgb.hex
} else {
if (is(clr, 'string')) {
clr = getRGB(clr)
}
if (
is(clr, 'object') &&
'r' in clr &&
'g' in clr &&
'b' in clr &&
!('error' in clr)
) {
rgb = rgb2hsl(clr)
clr.h = rgb.h
clr.s = rgb.s
clr.l = rgb.l
rgb = rgb2hsb(clr)
clr.v = rgb.b
} else {
clr = { hex: 'none' }
clr.r = clr.g = clr.b = clr.h = clr.s = clr.v = clr.l = -1
clr.error = 1
}
}
clr.toString = rgbtoString
return clr
}
/*\
**
* Converts HSB values to an RGB object
- h (number) hue
- s (number) saturation
- v (number) value or brightness
= (object) RGB object in the following format:
o {
o r (number) red,
o g (number) green,
o b (number) blue,
o hex (string) color in HTML/CSS format: #••••••
o }
\*/
export const hsb2rgb = function (h, s, v, o) {
if (is(h, 'object') && 'h' in h && 's' in h && 'b' in h) {
v = h.b
s = h.s
o = h.o
h = h.h
}
h *= 360
let R, G, B, X, C
h = (h % 360) / 60
C = v * s
X = C * (1 - abs((h % 2) - 1))
R = G = B = v - C
h = ~~h
R += [C, X, 0, 0, X, C][h]
G += [X, C, C, X, 0, 0][h]
B += [0, 0, X, C, C, X][h]
return packageRGB(R, G, B, o)
}
/*\
**
* Converts HSL values to an RGB object
- h (number) hue
- s (number) saturation
- l (number) luminosity
= (object) RGB object in the following format:
o {
o r (number) red,
o g (number) green,
o b (number) blue,
o hex (string) color in HTML/CSS format: #••••••
o }
\*/
export const hsl2rgb = function (h, s, l, o) {
if (is(h, 'object') && 'h' in h && 's' in h && 'l' in h) {
l = h.l
s = h.s
h = h.h
}
if (h > 1 || s > 1 || l > 1) {
h /= 360
s /= 100
l /= 100
}
h *= 360
let R, G, B, X, C
h = (h % 360) / 60
C = 2 * s * (l < 0.5 ? l : 1 - l)
X = C * (1 - abs((h % 2) - 1))
R = G = B = l - C / 2
h = ~~h
R += [C, X, 0, 0, X, C][h]
G += [X, C, C, X, 0, 0][h]
B += [0, 0, X, C, C, X][h]
return packageRGB(R, G, B, o)
}
/*\
**
* Converts RGB values to an HSB object
- r (number) red
- g (number) green
- b (number) blue
= (object) HSB object in the following format:
o {
o h (number) hue,
o s (number) saturation,
o b (number) brightness
o }
\*/
export const rgb2hsb = function (r, g, b) {
b = prepareRGB(r, g, b)
r = b[0]
g = b[1]
b = b[2]
let H, S, V, C
V = Math.max(r, g, b)
C = V - Math.min(r, g, b)
H =
C == 0
? null
: V == r
? (g - b) / C
: V == g
? (b - r) / C + 2
: (r - g) / C + 4
H = (((H + 360) % 6) * 60) / 360
S = C == 0 ? 0 : C / V
return { h: H, s: S, b: V, toString: hsbtoString }
}
/*\
**
* Converts RGB values to an HSL object
- r (number) red
- g (number) green
- b (number) blue
= (object) HSL object in the following format:
o {
o h (number) hue,
o s (number) saturation,
o l (number) luminosity
o }
\*/
export const rgb2hsl = function (r, g, b) {
b = prepareRGB(r, g, b)
r = b[0]
g = b[1]
b = b[2]
let H, S, L, M, m, C
M = Math.max(r, g, b)
m = Math.min(r, g, b)
C = M - m
H =
C == 0
? null
: M == r
? (g - b) / C
: M == g
? (b - r) / C + 2
: (r - g) / C + 4
H = (((H + 360) % 6) * 60) / 360
L = (M + m) / 2
S = C == 0 ? 0 : L < 0.5 ? C / (2 * L) : C / (2 - 2 * L)
return { h: H, s: S, l: L, toString: hsltoString }
}

86
src/lib/constants.js Normal file
View File

@ -0,0 +1,86 @@
/**
* {一些常量}
* @author yutent<yutent.io@gmail.com>
* @date 2024/03/06 16:25:01
*/
export const doc = document
export const win = window
export const xlink = 'http://www.w3.org/1999/xlink'
export const xmlns = 'http://www.w3.org/2000/svg'
export const CSS_ATTR = {
'alignment-baseline': 1,
'baseline-shift': 1,
clip: 1,
'clip-path': 1,
'clip-rule': 1,
color: 1,
'color-interpolation': 1,
'color-interpolation-filters': 1,
'color-profile': 1,
'color-rendering': 1,
cursor: 1,
direction: 1,
display: 1,
'dominant-baseline': 1,
'enable-background': 1,
fill: 1,
'fill-opacity': 1,
'fill-rule': 1,
filter: 1,
'flood-color': 1,
'flood-opacity': 1,
font: 1,
'font-family': 1,
'font-size': 1,
'font-size-adjust': 1,
'font-stretch': 1,
'font-style': 1,
'font-variant': 1,
'font-weight': 1,
'glyph-orientation-horizontal': 1,
'glyph-orientation-vertical': 1,
'image-rendering': 1,
kerning: 1,
'letter-spacing': 1,
'lighting-color': 1,
marker: 1,
'marker-end': 1,
'marker-mid': 1,
'marker-start': 1,
mask: 1,
opacity: 1,
overflow: 1,
'pointer-events': 1,
'shape-rendering': 1,
'stop-color': 1,
'stop-opacity': 1,
stroke: 1,
'stroke-dasharray': 1,
'stroke-dashoffset': 1,
'stroke-linecap': 1,
'stroke-linejoin': 1,
'stroke-miterlimit': 1,
'stroke-opacity': 1,
'stroke-width': 1,
'text-anchor': 1,
'text-decoration': 1,
'text-rendering': 1,
'unicode-bidi': 1,
visibility: 1,
'word-spacing': 1,
'writing-mode': 1
}
export const ISURL = /^url\(['"]?([^\)]+?)['"]?\)$/i
export const SEPARATOR = /[,\s]+/
export const whitespace = /[\s]/g
export const commaSpaces = /[\s]*,[\s]*/
export const bezierrg = /^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/
export const pathCommand =
/([a-z])[\s,]*((-?\d*\.?\d*(?:e[\-+]?\d+)?[\s]*,?[\s]*)+)/gi
export const T_COMMAND =
/([rstm])[\s,]*((-?\d*\.?\d*(?:e[\-+]?\d+)?[\s]*,?[\s]*)+)/gi
export const PATH_VALUES = /(-?\d*\.?\d*(?:e[\-+]?\d+)?)[\s]*,?[\s]*/gi

91
src/lib/math.js Normal file
View File

@ -0,0 +1,91 @@
/**
* {数学相关}
* @author yutent<yutent.io@gmail.com>
* @date 2024/03/06 13:05:25
*/
/* -------------------------------------------------------- */
/* --------------------- 数学方法 ---------------------- */
/* -------------------------------------------------------- */
/**
* Returns an angle between two or three points
- x1 (number) x coord of first point
- y1 (number) y coord of first point
- x2 (number) x coord of second point
- y2 (number) y coord of second point
- x3 (number) #optional x coord of third point
- y3 (number) #optional y coord of third point
= (number) angle in degrees
*/
export function angle(x1, y1, x2, y2, x3, y3) {
if (x3 == null) {
let x = x1 - x2,
y = y1 - y2
if (!x && !y) {
return 0
}
return (180 + (Math.atan2(-y, -x) * 180) / Math.PI + 360) % 360
} else {
return angle(x1, y1, x3, y3) - angle(x2, y2, x3, y3)
}
}
export function rad(deg) {
return ((deg % 360) * Math.PI) / 180
}
export function deg(radius) {
return ((radius * 180) / Math.PI) % 360
}
export function sin(angle) {
return Math.sin(rad(angle))
}
export function tan(angle) {
return Math.tan(rad(angle))
}
export function cos(angle) {
return Math.cos(rad(angle))
}
export function asin(num) {
return deg(Math.asin(num))
}
export function acos(num) {
return deg(Math.acos(num))
}
export function atan(num) {
return deg(Math.atan(num))
}
export function atan2(x, y) {
return deg(Math.atan2(x, y))
}
/*\
**
* Returns distance between two points
- x1 (number) x coord of first point
- y1 (number) y coord of first point
- x2 (number) x coord of second point
- y2 (number) y coord of second point
\*/
export function len(x1, y1, x2, y2) {
return Math.sqrt(len2(x1, y1, x2, y2))
}
/*\
**
* Returns squared distance between two points
- x1 (number) x coord of first point
- y1 (number) y coord of first point
- x2 (number) x coord of second point
- y2 (number) y coord of second point
\*/
export function len2(x1, y1, x2, y2) {
return (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)
}

50
src/matrix.js
View File

@ -11,13 +11,12 @@
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Snap } from './svg.js' import { Snap, SnapElement, Paper, Fragment } from './svg.js'
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) { let objectToString = Object.prototype.toString,
var objectToString = Object.prototype.toString,
Str = String, Str = String,
math = Math, math = Math,
E = '' E = ''
function Matrix(a, b, c, d, e, f) { function Matrix(a, b, c, d, e, f) {
if (b == null && objectToString.call(a) == '[object SVGMatrix]') { if (b == null && objectToString.call(a) == '[object SVGMatrix]') {
this.a = a.a this.a = a.a
this.b = a.b this.b = a.b
@ -42,8 +41,8 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
this.e = 0 this.e = 0
this.f = 0 this.f = 0
} }
} }
;(function (matrixproto) { ;(function (matrixproto) {
/*\ /*\
* Matrix.add * Matrix.add
[ method ] [ method ]
@ -62,7 +61,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
if (a && a instanceof Matrix) { if (a && a instanceof Matrix) {
return this.add(a.a, a.b, a.c, a.d, a.e, a.f) return this.add(a.a, a.b, a.c, a.d, a.e, a.f)
} }
var aNew = a * this.a + b * this.c, let aNew = a * this.a + b * this.c,
bNew = a * this.b + b * this.d bNew = a * this.b + b * this.d
this.e += e * this.a + f * this.c this.e += e * this.a + f * this.c
this.f += e * this.b + f * this.d this.f += e * this.b + f * this.d
@ -91,7 +90,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
if (a && a instanceof Matrix) { if (a && a instanceof Matrix) {
return this.multLeft(a.a, a.b, a.c, a.d, a.e, a.f) return this.multLeft(a.a, a.b, a.c, a.d, a.e, a.f)
} }
var aNew = a * this.a + c * this.b, let aNew = a * this.a + c * this.b,
cNew = a * this.c + c * this.d, cNew = a * this.c + c * this.d,
eNew = a * this.e + c * this.f + e eNew = a * this.e + c * this.f + e
this.b = b * this.a + d * this.b this.b = b * this.a + d * this.b
@ -111,7 +110,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
= (object) @Matrix = (object) @Matrix
\*/ \*/
matrixproto.invert = function () { matrixproto.invert = function () {
var me = this, let me = this,
x = me.a * me.d - me.b * me.c x = me.a * me.d - me.b * me.c
return new Matrix( return new Matrix(
me.d / x, me.d / x,
@ -179,7 +178,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
a = Snap.rad(a) a = Snap.rad(a)
x = x || 0 x = x || 0
y = y || 0 y = y || 0
var cos = +math.cos(a).toFixed(9), let cos = +math.cos(a).toFixed(9),
sin = +math.sin(a).toFixed(9) sin = +math.sin(a).toFixed(9)
this.add(cos, sin, -sin, cos, x, y) this.add(cos, sin, -sin, cos, x, y)
return this.add(1, 0, 0, 1, -x, -y) return this.add(1, 0, 0, 1, -x, -y)
@ -217,8 +216,8 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
y = y || 0 y = y || 0
x = Snap.rad(x) x = Snap.rad(x)
y = Snap.rad(y) y = Snap.rad(y)
var c = math.tan(x).toFixed(9) let c = math.tan(x).toFixed(9)
var b = math.tan(y).toFixed(9) let b = math.tan(y).toFixed(9)
return this.add(1, b, c, 1, 0, 0) return this.add(1, b, c, 1, 0, 0)
} }
/*\ /*\
@ -269,7 +268,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
return a[0] * a[0] + a[1] * a[1] return a[0] * a[0] + a[1] * a[1]
} }
function normalize(a) { function normalize(a) {
var mag = math.sqrt(norm(a)) let mag = math.sqrt(norm(a))
a[0] && (a[0] /= mag) a[0] && (a[0] /= mag)
a[1] && (a[1] /= mag) a[1] && (a[1] /= mag)
} }
@ -298,13 +297,13 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
o isSimple (boolean) could it be represented via simple transformations o isSimple (boolean) could it be represented via simple transformations
\*/ \*/
matrixproto.split = function () { matrixproto.split = function () {
var out = {} let out = {}
// translation // translation
out.dx = this.e out.dx = this.e
out.dy = this.f out.dy = this.f
// scale and shear // scale and shear
var row = [ let row = [
[this.a, this.b], [this.a, this.b],
[this.c, this.d] [this.c, this.d]
] ]
@ -326,7 +325,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
// rotation // rotation
var sin = row[0][1], let sin = row[0][1],
cos = row[1][1] cos = row[1][1]
if (cos < 0) { if (cos < 0) {
out.rotate = Snap.deg(math.acos(cos)) out.rotate = Snap.deg(math.acos(cos))
@ -355,7 +354,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
= (string) transform string = (string) transform string
\*/ \*/
matrixproto.toTransformString = function (shorter) { matrixproto.toTransformString = function (shorter) {
var s = shorter || this.split() let s = shorter || this.split()
if (!+s.shear.toFixed(9)) { if (!+s.shear.toFixed(9)) {
s.scalex = +s.scalex.toFixed(4) s.scalex = +s.scalex.toFixed(4)
s.scaley = +s.scaley.toFixed(4) s.scaley = +s.scaley.toFixed(4)
@ -363,9 +362,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
return ( return (
(s.dx || s.dy ? 't' + [+s.dx.toFixed(4), +s.dy.toFixed(4)] : E) + (s.dx || s.dy ? 't' + [+s.dx.toFixed(4), +s.dy.toFixed(4)] : E) +
(s.rotate ? 'r' + [+s.rotate.toFixed(4), 0, 0] : E) + (s.rotate ? 'r' + [+s.rotate.toFixed(4), 0, 0] : E) +
(s.scalex != 1 || s.scaley != 1 (s.scalex != 1 || s.scaley != 1 ? 's' + [s.scalex, s.scaley, 0, 0] : E)
? 's' + [s.scalex, s.scaley, 0, 0]
: E)
) )
} else { } else {
return ( return (
@ -381,16 +378,16 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
) )
} }
} }
})(Matrix.prototype) })(Matrix.prototype)
/*\ /*\
* Snap.Matrix * Snap.Matrix
[ method ] [ method ]
** **
* Matrix constructor, extend on your own risk. * Matrix constructor, extend on your own risk.
* To create matrices use @Snap.matrix. * To create matrices use @Snap.matrix.
\*/ \*/
Snap.Matrix = Matrix Snap.Matrix = Matrix
/*\ /*\
* Snap.matrix * Snap.matrix
[ method ] [ method ]
** **
@ -407,7 +404,6 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
- svgMatrix (SVGMatrix) - svgMatrix (SVGMatrix)
= (object) @Matrix = (object) @Matrix
\*/ \*/
Snap.matrix = function (a, b, c, d, e, f) { Snap.matrix = function (a, b, c, d, e, f) {
return new Matrix(a, b, c, d, e, f) return new Matrix(a, b, c, d, e, f)
} }
})

86
src/mina.js
View File

@ -13,83 +13,59 @@
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import { Snap } from './svg.js'
import { uuid } from './utils.js'
var animations = {}, let animations = {},
requestAnimFrame = requestAnimFrame =
window.requestAnimationFrame || window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.mozRequestAnimationFrame,
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 16, new Date().getTime())
return true
},
requestID, requestID,
isArray = isArray = Array.isArray,
Array.isArray ||
function (a) {
return (
a instanceof Array ||
Object.prototype.toString.call(a) == '[object Array]'
)
},
idgen = 0,
idprefix = 'M' + (+new Date()).toString(36),
ID = function () {
return idprefix + (idgen++).toString(36)
},
diff = function (a, b, A, B) { diff = function (a, b, A, B) {
if (isArray(a)) { if (isArray(a)) {
res = [] res = []
for (var i = 0, ii = a.length; i < ii; i++) { for (let i = 0, ii = a.length; i < ii; i++) {
res[i] = diff(a[i], b, A[i], B) res[i] = diff(a[i], b, A[i], B)
} }
return res return res
} }
var dif = (A - a) / (B - b) let dif = (A - a) / (B - b)
return function (bb) { return function (bb) {
return a + dif * (bb - b) return a + dif * (bb - b)
} }
}, },
timer = timer = Date.now,
Date.now ||
function () {
return +new Date()
},
sta = function (val) { sta = function (val) {
var a = this let a = this
if (val == null) { if (val == null) {
return a.s return a.s
} }
var ds = a.s - val let ds = a.s - val
a.b += a.dur * ds a.b += a.dur * ds
a.B += a.dur * ds a.B += a.dur * ds
a.s = val a.s = val
}, },
speed = function (val) { speed = function (val) {
var a = this
if (val == null) { if (val == null) {
return a.spd return this.spd
} }
a.spd = val this.spd = val
}, },
duration = function (val) { duration = function (val) {
var a = this
if (val == null) { if (val == null) {
return a.dur return this.dur
} }
a.s = (a.s * val) / a.dur this.s = (this.s * val) / this.dur
a.dur = val this.dur = val
}, },
stopit = function () { stopit = function () {
var a = this delete animations[this.id]
delete animations[a.id] this.update()
a.update() eve('mina.stop.' + this.id, a)
eve('mina.stop.' + a.id, a)
}, },
pause = function () { pause = function () {
var a = this let a = this
if (a.pdif) { if (a.pdif) {
return return
} }
@ -98,7 +74,7 @@ var animations = {},
a.pdif = a.get() - a.b a.pdif = a.get() - a.b
}, },
resume = function () { resume = function () {
var a = this let a = this
if (!a.pdif) { if (!a.pdif) {
return return
} }
@ -108,11 +84,11 @@ var animations = {},
frame() frame()
}, },
update = function () { update = function () {
var a = this, let a = this,
res res
if (isArray(a.start)) { if (isArray(a.start)) {
res = [] res = []
for (var j = 0, jj = a.start.length; j < jj; j++) { for (let j = 0, jj = a.start.length; j < jj; j++) {
res[j] = +a.start[j] + (a.end[j] - a.start[j]) * a.easing(a.s) res[j] = +a.start[j] + (a.end[j] - a.start[j]) * a.easing(a.s)
} }
} else { } else {
@ -130,10 +106,10 @@ var animations = {},
} }
return return
} }
var len = 0 let len = 0
for (var i in animations) for (let i in animations)
if (animations.hasOwnProperty(i)) { if (animations.hasOwnProperty(i)) {
var a = animations[i], let a = animations[i],
b = a.get(), b = a.get(),
res res
len++ len++
@ -187,8 +163,8 @@ var animations = {},
o } o }
\*/ \*/
mina = function (a, A, b, B, get, set, easing) { mina = function (a, A, b, B, get, set, easing) {
var anim = { let anim = {
id: ID(), id: uuid('M'),
start: a, start: a,
end: A, end: A,
b: b, b: b,
@ -207,7 +183,7 @@ var animations = {},
update: update update: update
} }
animations[anim.id] = anim animations[anim.id] = anim
var len = 0, let len = 0,
i i
for (i in animations) for (i in animations)
if (animations.hasOwnProperty(i)) { if (animations.hasOwnProperty(i)) {
@ -289,7 +265,7 @@ mina.easeinout = function (n) {
if (n == 0) { if (n == 0) {
return 0 return 0
} }
var q = 0.48 - n / 1.04, let q = 0.48 - n / 1.04,
Q = Math.sqrt(0.1734 + q * q), Q = Math.sqrt(0.1734 + q * q),
x = Q - q, x = Q - q,
X = Math.pow(Math.abs(x), 1 / 3) * (x < 0 ? -1 : 1), X = Math.pow(Math.abs(x), 1 / 3) * (x < 0 ? -1 : 1),
@ -310,7 +286,7 @@ mina.backin = function (n) {
if (n == 1) { if (n == 1) {
return 1 return 1
} }
var s = 1.70158 let s = 1.70158
return n * n * ((s + 1) * n - s) return n * n * ((s + 1) * n - s)
} }
/*\ /*\
@ -326,7 +302,7 @@ mina.backout = function (n) {
return 0 return 0
} }
n = n - 1 n = n - 1
var s = 1.70158 let s = 1.70158
return n * n * ((s + 1) * n + s) + 1 return n * n * ((s + 1) * n + s) + 1
} }
/*\ /*\
@ -354,7 +330,7 @@ mina.elastic = function (n) {
= (number) output 0..1 = (number) output 0..1
\*/ \*/
mina.bounce = function (n) { mina.bounce = function (n) {
var s = 7.5625, let s = 7.5625,
p = 2.75, p = 2.75,
l l
if (n < 1 / p) { if (n < 1 / p) {

251
src/mouse.js
View File

@ -12,10 +12,11 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import { Snap, SnapElement, Paper } from './svg.js'
import { is } from './utils.js'
import { doc, win } from './lib/constants.js'
Snap.plugin(function (Snap, Element, Paper, glob) { let elproto = SnapElement.prototype,
var elproto = Element.prototype,
has = 'hasOwnProperty', has = 'hasOwnProperty',
supportsTouch = supportsTouch =
'ontouchstart' in window || 'ontouchstart' in window ||
@ -40,8 +41,8 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
mouseup: 'touchend' mouseup: 'touchend'
}, },
getScroll = function (xy, el) { getScroll = function (xy, el) {
var name = xy == 'y' ? 'scrollTop' : 'scrollLeft', let name = xy == 'y' ? 'scrollTop' : 'scrollLeft',
doc = el && el.node ? el.node.ownerDocument : glob.doc doc = el && el.node ? el.node.ownerDocument : doc
return doc[name in doc.documentElement ? 'documentElement' : 'body'][name] return doc[name in doc.documentElement ? 'documentElement' : 'body'][name]
}, },
preventDefault = function () { preventDefault = function () {
@ -57,13 +58,13 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
return this.originalEvent.stopPropagation() return this.originalEvent.stopPropagation()
}, },
addEvent = function (obj, type, fn, element) { addEvent = function (obj, type, fn, element) {
var realName = supportsTouch && touchMap[type] ? touchMap[type] : type, let realName = supportsTouch && touchMap[type] ? touchMap[type] : type,
f = function (e) { f = function (e) {
var scrollY = getScroll('y', element), let scrollY = getScroll('y', element),
scrollX = getScroll('x', element) scrollX = getScroll('x', element)
if (supportsTouch && touchMap[has](type)) { if (supportsTouch && touchMap[has](type)) {
for ( for (
var i = 0, ii = e.targetTouches && e.targetTouches.length; let i = 0, ii = e.targetTouches && e.targetTouches.length;
i < ii; i < ii;
i++ i++
) { ) {
@ -71,7 +72,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
e.targetTouches[i].target == obj || e.targetTouches[i].target == obj ||
obj.contains(e.targetTouches[i].target) obj.contains(e.targetTouches[i].target)
) { ) {
var olde = e let olde = e
e = e.targetTouches[i] e = e.targetTouches[i]
e.originalEvent = olde e.originalEvent = olde
e.preventDefault = preventTouch e.preventDefault = preventTouch
@ -80,7 +81,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
} }
} }
} }
var x = e.clientX + scrollX, let x = e.clientX + scrollX,
y = e.clientY + scrollY y = e.clientY + scrollY
return fn.call(element, e, x, y) return fn.call(element, e, x, y)
} }
@ -102,7 +103,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
}, },
drag = [], drag = [],
dragMove = function (e) { dragMove = function (e) {
var x = e.clientX, let x = e.clientX,
y = e.clientY, y = e.clientY,
scrollY = getScroll('y'), scrollY = getScroll('y'),
scrollX = getScroll('x'), scrollX = getScroll('x'),
@ -111,7 +112,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
while (j--) { while (j--) {
dragi = drag[j] dragi = drag[j]
if (supportsTouch) { if (supportsTouch) {
var i = e.touches && e.touches.length, let i = e.touches && e.touches.length,
touch touch
while (i--) { while (i--) {
touch = e.touches[i] touch = e.touches[i]
@ -128,16 +129,16 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
} else { } else {
e.preventDefault() e.preventDefault()
} }
var node = dragi.el.node, let node = dragi.el.node,
o, o,
next = node.nextSibling, next = node.nextSibling,
parent = node.parentNode, parent = node.parentNode,
display = node.style.display display = node.style.display
// glob.win.opera && parent.removeChild(node); // win.opera && parent.removeChild(node);
// node.style.display = "none"; // node.style.display = "none";
// o = dragi.el.paper.getElementByPoint(x, y); // o = dragi.el.paper.getElementByPoint(x, y);
// node.style.display = display; // node.style.display = display;
// glob.win.opera && (next ? parent.insertBefore(node, next) : parent.appendChild(node)); // win.opera && (next ? parent.insertBefore(node, next) : parent.appendChild(node));
// o && eve("snap.drag.over." + dragi.el.id, dragi.el, o); // o && eve("snap.drag.over." + dragi.el.id, dragi.el, o);
x += scrollX x += scrollX
y += scrollY y += scrollY
@ -154,7 +155,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
}, },
dragUp = function (e) { dragUp = function (e) {
Snap.unmousemove(dragMove).unmouseup(dragUp) Snap.unmousemove(dragMove).unmouseup(dragUp)
var i = drag.length, let i = drag.length,
dragi dragi
while (i--) { while (i--) {
dragi = drag[i] dragi = drag[i]
@ -168,209 +169,204 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
} }
drag = [] drag = []
} }
/*\ /*\
* Element.click * SnapElement.click
[ method ] [ method ]
** **
* Adds a click event handler to the element * Adds a click event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.unclick * SnapElement.unclick
[ method ] [ method ]
** **
* Removes a click event handler from the element * Removes a click event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.dblclick * SnapElement.dblclick
[ method ] [ method ]
** **
* Adds a double click event handler to the element * Adds a double click event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.undblclick * SnapElement.undblclick
[ method ] [ method ]
** **
* Removes a double click event handler from the element * Removes a double click event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.mousedown * SnapElement.mousedown
[ method ] [ method ]
** **
* Adds a mousedown event handler to the element * Adds a mousedown event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.unmousedown * SnapElement.unmousedown
[ method ] [ method ]
** **
* Removes a mousedown event handler from the element * Removes a mousedown event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.mousemove * SnapElement.mousemove
[ method ] [ method ]
** **
* Adds a mousemove event handler to the element * Adds a mousemove event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.unmousemove * SnapElement.unmousemove
[ method ] [ method ]
** **
* Removes a mousemove event handler from the element * Removes a mousemove event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.mouseout * SnapElement.mouseout
[ method ] [ method ]
** **
* Adds a mouseout event handler to the element * Adds a mouseout event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.unmouseout * SnapElement.unmouseout
[ method ] [ method ]
** **
* Removes a mouseout event handler from the element * Removes a mouseout event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.mouseover * SnapElement.mouseover
[ method ] [ method ]
** **
* Adds a mouseover event handler to the element * Adds a mouseover event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.unmouseover * SnapElement.unmouseover
[ method ] [ method ]
** **
* Removes a mouseover event handler from the element * Removes a mouseover event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.mouseup * SnapElement.mouseup
[ method ] [ method ]
** **
* Adds a mouseup event handler to the element * Adds a mouseup event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.unmouseup * SnapElement.unmouseup
[ method ] [ method ]
** **
* Removes a mouseup event handler from the element * Removes a mouseup event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.touchstart * SnapElement.touchstart
[ method ] [ method ]
** **
* Adds a touchstart event handler to the element * Adds a touchstart event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.untouchstart * SnapElement.untouchstart
[ method ] [ method ]
** **
* Removes a touchstart event handler from the element * Removes a touchstart event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.touchmove * SnapElement.touchmove
[ method ] [ method ]
** **
* Adds a touchmove event handler to the element * Adds a touchmove event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.untouchmove * SnapElement.untouchmove
[ method ] [ method ]
** **
* Removes a touchmove event handler from the element * Removes a touchmove event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.touchend * SnapElement.touchend
[ method ] [ method ]
** **
* Adds a touchend event handler to the element * Adds a touchend event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.untouchend * SnapElement.untouchend
[ method ] [ method ]
** **
* Removes a touchend event handler from the element * Removes a touchend event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.touchcancel * SnapElement.touchcancel
[ method ] [ method ]
** **
* Adds a touchcancel event handler to the element * Adds a touchcancel event handler to the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
/*\ /*\
* Element.untouchcancel * SnapElement.untouchcancel
[ method ] [ method ]
** **
* Removes a touchcancel event handler from the element * Removes a touchcancel event handler from the element
- handler (function) handler for the event - handler (function) handler for the event
= (object) @Element = (object) @SnapElement
\*/ \*/
for (var i = events.length; i--; ) { for (let i = events.length; i--; ) {
;(function (eventName) { ;(function (eventName) {
Snap[eventName] = elproto[eventName] = function (fn, scope) { Snap[eventName] = elproto[eventName] = function (fn, scope) {
if (Snap.is(fn, 'function')) { if (is(fn, 'function')) {
this.events = this.events || [] this.events = this.events || []
this.events.push({ this.events.push({
name: eventName, name: eventName,
f: fn, f: fn,
unbind: addEvent( unbind: addEvent(this.node || document, eventName, fn, scope || this)
this.node || document,
eventName,
fn,
scope || this
)
}) })
} else { } else {
for (var i = 0, ii = this.events.length; i < ii; i++) for (let i = 0, ii = this.events.length; i < ii; i++)
if (this.events[i].name == eventName) { if (this.events[i].name == eventName) {
try { try {
this.events[i].f.call(this) this.events[i].f.call(this)
@ -380,7 +376,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
return this return this
} }
Snap['un' + eventName] = elproto['un' + eventName] = function (fn) { Snap['un' + eventName] = elproto['un' + eventName] = function (fn) {
var events = this.events || [], let events = this.events || [],
l = events.length l = events.length
while (l--) while (l--)
if (events[l].name == eventName && (events[l].f == fn || !fn)) { if (events[l].name == eventName && (events[l].f == fn || !fn)) {
@ -392,9 +388,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
return this return this
} }
})(events[i]) })(events[i])
} }
/*\ /*\
* Element.hover * SnapElement.hover
[ method ] [ method ]
** **
* Adds hover event handlers to the element * Adds hover event handlers to the element
@ -402,30 +398,30 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- f_out (function) handler for hover out - f_out (function) handler for hover out
- icontext (object) #optional context for hover in handler - icontext (object) #optional context for hover in handler
- ocontext (object) #optional context for hover out handler - ocontext (object) #optional context for hover out handler
= (object) @Element = (object) @SnapElement
\*/ \*/
elproto.hover = function (f_in, f_out, scope_in, scope_out) { elproto.hover = function (f_in, f_out, scope_in, scope_out) {
return this.mouseover(f_in, scope_in).mouseout(f_out, scope_out || scope_in) return this.mouseover(f_in, scope_in).mouseout(f_out, scope_out || scope_in)
} }
/*\ /*\
* Element.unhover * SnapElement.unhover
[ method ] [ method ]
** **
* Removes hover event handlers from the element * Removes hover event handlers from the element
- f_in (function) handler for hover in - f_in (function) handler for hover in
- f_out (function) handler for hover out - f_out (function) handler for hover out
= (object) @Element = (object) @SnapElement
\*/ \*/
elproto.unhover = function (f_in, f_out) { elproto.unhover = function (f_in, f_out) {
return this.unmouseover(f_in).unmouseout(f_out) return this.unmouseover(f_in).unmouseout(f_out)
} }
var draggable = [] let draggable = []
// SIERRA unclear what _context_ refers to for starting, ending, moving the drag gesture. // SIERRA unclear what _context_ refers to for starting, ending, moving the drag gesture.
// SIERRA Element.drag(): _x position of the mouse_: Where are the x/y values offset from? // SIERRA SnapElement.drag(): _x position of the mouse_: Where are the x/y values offset from?
// SIERRA Element.drag(): much of this member's doc appears to be duplicated for some reason. // SIERRA SnapElement.drag(): much of this member's doc appears to be duplicated for some reason.
// SIERRA Unclear about this sentence: _Additionally following drag events will be triggered: drag.start.<id> on start, drag.end.<id> on end and drag.move.<id> on every move._ Is there a global _drag_ object to which you can assign handlers keyed by an element's ID? // SIERRA Unclear about this sentence: _Additionally following drag events will be triggered: drag.start.<id> on start, drag.end.<id> on end and drag.move.<id> on every move._ Is there a global _drag_ object to which you can assign handlers keyed by an element's id?
/*\ /*\
* Element.drag * SnapElement.drag
[ method ] [ method ]
** **
* Adds event handlers for an element's drag gesture * Adds event handlers for an element's drag gesture
@ -452,19 +448,19 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
o event (object) DOM event object o event (object) DOM event object
* End event and end handler are called in specified context or in context of the element with following parameters: * End event and end handler are called in specified context or in context of the element with following parameters:
o event (object) DOM event object o event (object) DOM event object
= (object) @Element = (object) @SnapElement
\*/ \*/
elproto.drag = function ( elproto.drag = function (
onmove, onmove,
onstart, onstart,
onend, onend,
move_scope, move_scope,
start_scope, start_scope,
end_scope end_scope
) { ) {
var el = this let el = this
if (!arguments.length) { if (!arguments.length) {
var origTransform let origTransform
return el.drag( return el.drag(
function (dx, dy) { function (dx, dy) {
this.attr({ this.attr({
@ -501,25 +497,25 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
draggable.push({ el: el, start: start, init: init }) draggable.push({ el: el, start: start, init: init })
el.mousedown(init) el.mousedown(init)
return el return el
} }
/* /*
* Element.onDragOver * SnapElement.onDragOver
[ method ] [ method ]
** **
* Shortcut to assign event handler for `drag.over.<id>` event, where `id` is the element's `id` (see @Element.id) * Shortcut to assign event handler for `drag.over.<id>` event, where `id` is the element's `id` (see @SnapElement.id)
- f (function) handler for event, first argument would be the element you are dragging over - f (function) handler for event, first argument would be the element you are dragging over
\*/ \*/
// elproto.onDragOver = function (f) { // elproto.onDragOver = function (f) {
// f ? eve.on("snap.drag.over." + this.id, f) : eve.unbind("snap.drag.over." + this.id); // f ? eve.on("snap.drag.over." + this.id, f) : eve.unbind("snap.drag.over." + this.id);
// }; // };
/*\ /*\
* Element.undrag * SnapElement.undrag
[ method ] [ method ]
** **
* Removes all drag event handlers from the given element * Removes all drag event handlers from the given element
\*/ \*/
elproto.undrag = function () { elproto.undrag = function () {
var i = draggable.length let i = draggable.length
while (i--) while (i--)
if (draggable[i].el == this) { if (draggable[i].el == this) {
this.unmousedown(draggable[i].init) this.unmousedown(draggable[i].init)
@ -529,5 +525,4 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
} }
!draggable.length && Snap.unmousemove(dragMove).unmouseup(dragUp) !draggable.length && Snap.unmousemove(dragMove).unmouseup(dragUp)
return this return this
} }
})

643
src/paper.js
View File

@ -12,511 +12,17 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import { Snap, SnapElement, Paper, Fragment, make, wrap } from './svg.js'
import { $, is, uuid, preload } from './utils.js'
import { doc, win } from './lib/constants.js'
Snap.plugin(function (Snap, Element, Paper, glob, Fragment) { let proto = Paper.prototype
var proto = Paper.prototype,
is = Snap.is
/*\
* Paper.rect
[ method ]
*
* Draws a rectangle
**
- x (number) x coordinate of the top left corner
- y (number) y coordinate of the top left corner
- width (number) width
- height (number) height
- rx (number) #optional horizontal radius for rounded corners, default is 0
- ry (number) #optional vertical radius for rounded corners, default is rx or 0
= (object) the `rect` element
**
> Usage
| // regular rectangle
| var c = paper.rect(10, 10, 50, 50);
| // rectangle with rounded corners
| var c = paper.rect(40, 40, 50, 50, 10);
\*/
proto.rect = function (x, y, w, h, rx, ry) {
var attr
if (ry == null) {
ry = rx
}
if (is(x, 'object') && x == '[object Object]') {
attr = x
} else if (x != null) {
attr = {
x: x,
y: y,
width: w,
height: h
}
if (rx != null) {
attr.rx = rx
attr.ry = ry
}
}
return this.el('rect', attr)
}
/*\
* Paper.circle
[ method ]
**
* Draws a circle
**
- x (number) x coordinate of the centre
- y (number) y coordinate of the centre
- r (number) radius
= (object) the `circle` element
**
> Usage
| var c = paper.circle(50, 50, 40);
\*/
proto.circle = function (cx, cy, r) {
var attr
if (is(cx, 'object') && cx == '[object Object]') {
attr = cx
} else if (cx != null) {
attr = {
cx: cx,
cy: cy,
r: r
}
}
return this.el('circle', attr)
}
var preload = (function () { // gradients
function onerror() { ;(function () {
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
}
})()
/*\
* Paper.image
[ method ]
**
* Places an image on the surface
**
- src (string) URI of the source image
- x (number) x offset position
- y (number) y offset position
- width (number) width of the image
- height (number) height of the image
= (object) the `image` element
* or
= (object) Snap element object with type `image`
**
> Usage
| var c = paper.image("apple.png", 10, 10, 80, 80);
\*/
proto.image = function (src, x, y, width, height) {
var el = this.el('image')
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 () {
Snap._.$(el.node, {
width: this.offsetWidth,
height: this.offsetHeight
})
})
}
Snap._.$(el.node, set)
}
return el
}
/*\
* Paper.ellipse
[ method ]
**
* Draws an ellipse
**
- x (number) x coordinate of the centre
- y (number) y coordinate of the centre
- rx (number) horizontal radius
- ry (number) vertical radius
= (object) the `ellipse` element
**
> Usage
| var c = paper.ellipse(50, 50, 40, 20);
\*/
proto.ellipse = function (cx, cy, rx, ry) {
var attr
if (is(cx, 'object') && cx == '[object Object]') {
attr = cx
} else if (cx != null) {
attr = {
cx: cx,
cy: cy,
rx: rx,
ry: ry
}
}
return this.el('ellipse', attr)
}
// SIERRA Paper.path(): Unclear from the link what a Catmull-Rom curveto is, and why it would make life any easier.
/*\
* Paper.path
[ method ]
**
* Creates a `<path>` element using the given string as the path's definition
- pathString (string) #optional path string in SVG format
* Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example:
| "M10,20L30,40"
* This example features two commands: `M`, with arguments `(10, 20)` and `L` with arguments `(30, 40)`. Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates.
*
# <p>Here is short list of commands available, for more details see <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a> or <a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths">article about path strings at MDN</a>.</p>
# <table><thead><tr><th>Command</th><th>Name</th><th>Parameters</th></tr></thead><tbody>
# <tr><td>M</td><td>moveto</td><td>(x y)+</td></tr>
# <tr><td>Z</td><td>closepath</td><td>(none)</td></tr>
# <tr><td>L</td><td>lineto</td><td>(x y)+</td></tr>
# <tr><td>H</td><td>horizontal lineto</td><td>x+</td></tr>
# <tr><td>V</td><td>vertical lineto</td><td>y+</td></tr>
# <tr><td>C</td><td>curveto</td><td>(x1 y1 x2 y2 x y)+</td></tr>
# <tr><td>S</td><td>smooth curveto</td><td>(x2 y2 x y)+</td></tr>
# <tr><td>Q</td><td>quadratic Bézier curveto</td><td>(x1 y1 x y)+</td></tr>
# <tr><td>T</td><td>smooth quadratic Bézier curveto</td><td>(x y)+</td></tr>
# <tr><td>A</td><td>elliptical arc</td><td>(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+</td></tr>
# <tr><td>R</td><td><a href="http://en.wikipedia.org/wiki/Catmull–Rom_spline#Catmull.E2.80.93Rom_spline">Catmull-Rom curveto</a>*</td><td>x1 y1 (x y)+</td></tr></tbody></table>
* * _Catmull-Rom curveto_ is a not standard SVG command and added to make life easier.
* Note: there is a special case when a path consists of only three commands: `M10,10R…z`. In this case the path connects back to its starting point.
> Usage
| var c = paper.path("M10 10L90 90");
| // draw a diagonal line:
| // move to 10,10, line to 90,90
\*/
proto.path = function (d) {
var attr
if (is(d, 'object') && !is(d, 'array')) {
attr = d
} else if (d) {
attr = { d: d }
}
return this.el('path', attr)
}
/*\
* Paper.g
[ method ]
**
* Creates a group element
**
- varargs (…) #optional elements to nest within the group
= (object) the `g` element
**
> Usage
| var c1 = paper.circle(),
| c2 = paper.rect(),
| g = paper.g(c2, c1); // note that the order of elements is different
* or
| var c1 = paper.circle(),
| c2 = paper.rect(),
| g = paper.g();
| g.add(c2, c1);
\*/
/*\
* Paper.group
[ method ]
**
* See @Paper.g
\*/
proto.group = proto.g = function (first) {
var attr,
el = this.el('g')
if (arguments.length == 1 && first && !first.type) {
el.attr(first)
} else if (arguments.length) {
el.add(Array.prototype.slice.call(arguments, 0))
}
return el
}
/*\
* Paper.svg
[ method ]
**
* Creates a nested SVG element.
- x (number) @optional X of the element
- y (number) @optional Y of the element
- width (number) @optional width of the element
- height (number) @optional height of the element
- vbx (number) @optional viewbox X
- vby (number) @optional viewbox Y
- vbw (number) @optional viewbox width
- vbh (number) @optional viewbox height
**
= (object) the `svg` element
**
\*/
proto.svg = function (x, y, width, height, vbx, vby, vbw, vbh) {
var attrs = {}
if (is(x, 'object') && y == null) {
attrs = x
} else {
if (x != null) {
attrs.x = x
}
if (y != null) {
attrs.y = y
}
if (width != null) {
attrs.width = width
}
if (height != null) {
attrs.height = height
}
if (vbx != null && vby != null && vbw != null && vbh != null) {
attrs.viewBox = [vbx, vby, vbw, vbh]
}
}
return this.el('svg', attrs)
}
/*\
* Paper.mask
[ method ]
**
* Equivalent in behaviour to @Paper.g, except it’s a mask.
**
= (object) the `mask` element
**
\*/
proto.mask = function (first) {
var attr,
el = this.el('mask')
if (arguments.length == 1 && first && !first.type) {
el.attr(first)
} else if (arguments.length) {
el.add(Array.prototype.slice.call(arguments, 0))
}
return el
}
/*\
* Paper.ptrn
[ method ]
**
* Equivalent in behaviour to @Paper.g, except it’s a pattern.
- x (number) @optional X of the element
- y (number) @optional Y of the element
- width (number) @optional width of the element
- height (number) @optional height of the element
- vbx (number) @optional viewbox X
- vby (number) @optional viewbox Y
- vbw (number) @optional viewbox width
- vbh (number) @optional viewbox height
**
= (object) the `pattern` element
**
\*/
proto.ptrn = function (x, y, width, height, vx, vy, vw, vh) {
if (is(x, 'object')) {
var attr = x
} else {
attr = { patternUnits: 'userSpaceOnUse' }
if (x) {
attr.x = x
}
if (y) {
attr.y = y
}
if (width != null) {
attr.width = width
}
if (height != null) {
attr.height = height
}
if (vx != null && vy != null && vw != null && vh != null) {
attr.viewBox = [vx, vy, vw, vh]
} else {
attr.viewBox = [x || 0, y || 0, width || 0, height || 0]
}
}
return this.el('pattern', attr)
}
/*\
* Paper.use
[ method ]
**
* Creates a <use> element.
- id (string) @optional id of element to link
* or
- id (Element) @optional element to link
**
= (object) the `use` element
**
\*/
proto.use = function (id) {
if (id != null) {
if (id instanceof Element) {
if (!id.attr('id')) {
id.attr({ id: Snap._.id(id) })
}
id = id.attr('id')
}
if (String(id).charAt() == '#') {
id = id.substring(1)
}
return this.el('use', { 'xlink:href': '#' + id })
} else {
return Element.prototype.use.call(this)
}
}
/*\
* Paper.symbol
[ method ]
**
* Creates a <symbol> element.
- vbx (number) @optional viewbox X
- vby (number) @optional viewbox Y
- vbw (number) @optional viewbox width
- vbh (number) @optional viewbox height
= (object) the `symbol` element
**
\*/
proto.symbol = function (vx, vy, vw, vh) {
var attr = {}
if (vx != null && vy != null && vw != null && vh != null) {
attr.viewBox = [vx, vy, vw, vh]
}
return this.el('symbol', attr)
}
/*\
* Paper.text
[ method ]
**
* Draws a text string
**
- x (number) x coordinate position
- y (number) y coordinate position
- text (string|array) The text string to draw or array of strings to nest within separate `<tspan>` elements
= (object) the `text` element
**
> Usage
| var t1 = paper.text(50, 50, "Snap");
| var t2 = paper.text(50, 50, ["S","n","a","p"]);
| // Text path usage
| t1.attr({textpath: "M10,10L100,100"});
| // or
| var pth = paper.path("M10,10L100,100");
| t1.attr({textpath: pth});
\*/
proto.text = function (x, y, text) {
var attr = {}
if (is(x, 'object')) {
attr = x
} else if (x != null) {
attr = {
x: x,
y: y,
text: text || ''
}
}
return this.el('text', attr)
}
/*\
* Paper.line
[ method ]
**
* Draws a line
**
- x1 (number) x coordinate position of the start
- y1 (number) y coordinate position of the start
- x2 (number) x coordinate position of the end
- y2 (number) y coordinate position of the end
= (object) the `line` element
**
> Usage
| var t1 = paper.line(50, 50, 100, 100);
\*/
proto.line = function (x1, y1, x2, y2) {
var attr = {}
if (is(x1, 'object')) {
attr = x1
} else if (x1 != null) {
attr = {
x1: x1,
x2: x2,
y1: y1,
y2: y2
}
}
return this.el('line', attr)
}
/*\
* Paper.polyline
[ method ]
**
* Draws a polyline
**
- points (array) array of points
* or
- varargs (…) points
= (object) the `polyline` element
**
> Usage
| var p1 = paper.polyline([10, 10, 100, 100]);
| var p2 = paper.polyline(10, 10, 100, 100);
\*/
proto.polyline = function (points) {
if (arguments.length > 1) {
points = Array.prototype.slice.call(arguments, 0)
}
var attr = {}
if (is(points, 'object') && !is(points, 'array')) {
attr = points
} else if (points != null) {
attr = { points: points }
}
return this.el('polyline', attr)
}
/*\
* Paper.polygon
[ method ]
**
* Draws a polygon. See @Paper.polyline
\*/
proto.polygon = function (points) {
if (arguments.length > 1) {
points = Array.prototype.slice.call(arguments, 0)
}
var attr = {}
if (is(points, 'object') && !is(points, 'array')) {
attr = points
} else if (points != null) {
attr = { points: points }
}
return this.el('polygon', attr)
}
// gradients
;(function () {
var $ = Snap._.$
// gradients' helpers // gradients' helpers
/*\ /*\
* Element.stops * SnapElement.stops
[ method ] [ method ]
** **
* Only for gradients! * Only for gradients!
@ -527,7 +33,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
return this.selectAll('stop') return this.selectAll('stop')
} }
/*\ /*\
* Element.addStop * SnapElement.addStop
[ method ] [ method ]
** **
* Only for gradients! * Only for gradients!
@ -537,20 +43,20 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
= (object) gradient element = (object) gradient element
\*/ \*/
function GaddStop(color, offset) { function GaddStop(color, offset) {
var stop = $('stop'), let stop = $('stop'),
attr = { attr = {
offset: +offset + '%' offset: +offset + '%'
} }
color = Snap.color(color) color = parseColor(color)
attr['stop-color'] = color.hex attr['stop-color'] = color.hex
if (color.opacity < 1) { if (color.opacity < 1) {
attr['stop-opacity'] = color.opacity attr['stop-opacity'] = color.opacity
} }
$(stop, attr) $(stop, attr)
var stops = this.stops(), let stops = this.stops(),
inserted inserted
for (var i = 0; i < stops.length; i++) { for (let i = 0; i < stops.length; i++) {
var stopOffset = parseFloat(stops[i].attr('offset')) let stopOffset = parseFloat(stops[i].attr('offset'))
if (stopOffset > offset) { if (stopOffset > offset) {
this.node.insertBefore(stop, stops[i].node) this.node.insertBefore(stop, stops[i].node)
inserted = true inserted = true
@ -564,31 +70,31 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
function GgetBBox() { function GgetBBox() {
if (this.type == 'linearGradient') { if (this.type == 'linearGradient') {
var x1 = $(this.node, 'x1') || 0, let x1 = $(this.node, 'x1') || 0,
x2 = $(this.node, 'x2') || 1, x2 = $(this.node, 'x2') || 1,
y1 = $(this.node, 'y1') || 0, y1 = $(this.node, 'y1') || 0,
y2 = $(this.node, 'y2') || 0 y2 = $(this.node, 'y2') || 0
return Snap._.box(x1, y1, math.abs(x2 - x1), math.abs(y2 - y1)) return Snap._.box(x1, y1, math.abs(x2 - x1), math.abs(y2 - y1))
} else { } else {
var cx = this.node.cx || 0.5, let cx = this.node.cx || 0.5,
cy = this.node.cy || 0.5, cy = this.node.cy || 0.5,
r = this.node.r || 0 r = this.node.r || 0
return Snap._.box(cx - r, cy - r, r * 2, r * 2) return Snap._.box(cx - r, cy - r, r * 2, r * 2)
} }
} }
/*\ /*\
* Element.setStops * SnapElement.setStops
[ method ] [ method ]
** **
* Only for gradients! * Only for gradients!
* Updates stops of the gradient based on passed gradient descriptor. See @Ppaer.gradient * Updates stops of the gradient based on passed gradient descriptor. See @Ppaer.gradient
- str (string) gradient descriptor part after `()`. - str (string) gradient descriptor part after `()`.
= (object) gradient element = (object) gradient element
| var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff"); | let g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
| g.setStops("#fff-#000-#f00-#fc0"); | g.setStops("#fff-#000-#f00-#fc0");
\*/ \*/
function GsetStops(str) { function GsetStops(str) {
var grad = str, let grad = str,
stops = this.stops() stops = this.stops()
if (typeof str == 'string') { if (typeof str == 'string') {
grad = eve( grad = eve(
@ -597,12 +103,12 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
'l(0,0,0,1)' + str 'l(0,0,0,1)' + str
).firstDefined().stops ).firstDefined().stops
} }
if (!Snap.is(grad, 'array')) { if (!is(grad, 'array')) {
return return
} }
for (var i = 0; i < stops.length; i++) { for (let i = 0; i < stops.length; i++) {
if (grad[i]) { if (grad[i]) {
var color = Snap.color(grad[i].color), let color = parseColor(grad[i].color),
attr = { offset: grad[i].offset + '%' } attr = { offset: grad[i].offset + '%' }
attr['stop-color'] = color.hex attr['stop-color'] = color.hex
if (color.opacity < 1) { if (color.opacity < 1) {
@ -619,7 +125,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
return this return this
} }
function gradient(defs, str) { function gradient(defs, str) {
var grad = eve('snap.util.grad.parse', null, str).firstDefined(), let grad = eve('snap.util.grad.parse', null, str).firstDefined(),
el el
if (!grad) { if (!grad) {
return null return null
@ -635,16 +141,16 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
gradientUnits: 'userSpaceOnUse' gradientUnits: 'userSpaceOnUse'
}) })
} }
var stops = grad.stops, let stops = grad.stops,
len = stops.length len = stops.length
for (var i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
var stop = stops[i] let stop = stops[i]
el.addStop(stop.color, stop.offset) el.addStop(stop.color, stop.offset)
} }
return el return el
} }
function gradientLinear(defs, x1, y1, x2, y2) { function gradientLinear(defs, x1, y1, x2, y2) {
var el = Snap._.make('linearGradient', defs) let el = make('linearGradient', defs)
el.stops = Gstops el.stops = Gstops
el.addStop = GaddStop el.addStop = GaddStop
el.getBBox = GgetBBox el.getBBox = GgetBBox
@ -660,7 +166,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
return el return el
} }
function gradientRadial(defs, cx, cy, r, fx, fy) { function gradientRadial(defs, cx, cy, r, fx, fy) {
var el = Snap._.make('radialGradient', defs) let el = make('radialGradient', defs)
el.stops = Gstops el.stops = Gstops
el.addStop = GaddStop el.addStop = GaddStop
el.getBBox = GgetBBox el.getBBox = GgetBBox
@ -679,43 +185,7 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
} }
return el return el
} }
/*\
* Paper.gradient
[ method ]
**
* Creates a gradient element
**
- gradient (string) gradient descriptor
> Gradient Descriptor
* The gradient descriptor is an expression formatted as
* follows: `<type>(<coords>)<colors>`. The `<type>` can be
* either linear or radial. The uppercase `L` or `R` letters
* indicate absolute coordinates offset from the SVG surface.
* Lowercase `l` or `r` letters indicate coordinates
* calculated relative to the element to which the gradient is
* applied. Coordinates specify a linear gradient vector as
* `x1`, `y1`, `x2`, `y2`, or a radial gradient as `cx`, `cy`,
* `r` and optional `fx`, `fy` specifying a focal point away
* from the center of the circle. Specify `<colors>` as a list
* of dash-separated CSS color values. Each color may be
* followed by a custom offset value, separated with a colon
* character.
> Examples
* Linear gradient, relative from top-left corner to bottom-right
* corner, from black through red to white:
| var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
* Linear gradient, absolute from (0, 0) to (100, 100), from black
* through red at 25% to white:
| var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25-#fff");
* Radial gradient, relative from the center of the element with radius
* half the width, from black to white:
| var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
* To apply the gradient:
| paper.circle(50, 50, 40).attr({
| fill: g
| });
= (object) the `gradient` element
\*/
proto.gradient = function (str) { proto.gradient = function (str) {
return gradient(this.defs, str) return gradient(this.defs, str)
} }
@ -725,59 +195,4 @@ Snap.plugin(function (Snap, Element, Paper, glob, Fragment) {
proto.gradientRadial = function (cx, cy, r, fx, fy) { proto.gradientRadial = function (cx, cy, r, fx, fy) {
return gradientRadial(this.defs, cx, cy, r, fx, fy) return gradientRadial(this.defs, cx, cy, r, fx, fy)
} }
/*\ })()
* Paper.toString
[ method ]
**
* Returns SVG code for the @Paper
= (string) SVG code for the @Paper
\*/
proto.toString = function () {
var doc = this.node.ownerDocument,
f = doc.createDocumentFragment(),
d = doc.createElement('div'),
svg = this.node.cloneNode(true),
res
f.appendChild(d)
d.appendChild(svg)
Snap._.$(svg, { xmlns: 'http://www.w3.org/2000/svg' })
res = d.innerHTML
f.removeChild(f.firstChild)
return res
}
/*\
* Paper.toDataURL
[ method ]
**
* Returns SVG code for the @Paper as Data URI string.
= (string) Data URI string
\*/
proto.toDataURL = function () {
if (window && window.btoa) {
return (
'data:image/svg+xml;base64,' +
btoa(unescape(encodeURIComponent(this)))
)
}
}
/*\
* Paper.clear
[ method ]
**
* Removes all child nodes of the paper, except <defs>.
\*/
proto.clear = function () {
var node = this.node.firstChild,
next
while (node) {
next = node.nextSibling
if (node.tagName != 'defs') {
node.parentNode.removeChild(node)
} else {
proto.clear.call({ node: node })
}
node = next
}
}
})()
})

478
src/path.js
View File

File diff suppressed because it is too large Load Diff

165
src/set.js
View File

@ -12,21 +12,21 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js' import { Snap, SnapElement, Paper, Fragment } from './svg.js'
import mina from './mina.js' import mina from './mina.js'
import { is } from './utils.js'
Snap.plugin(function (Snap, Element, Paper, glob) { let mmax = Math.max,
var mmax = Math.max,
mmin = Math.min mmin = Math.min
// Set // Set
var Set = function (items) { let Set = function (items) {
this.items = [] this.items = []
this.bindings = {} this.bindings = {}
this.length = 0 this.length = 0
this.type = 'set' this.type = 'set'
if (items) { if (items) {
for (var i = 0, ii = items.length; i < ii; i++) { for (let i = 0, ii = items.length; i < ii; i++) {
if (items[i]) { if (items[i]) {
this[this.items.length] = this.items[this.items.length] = items[i] this[this.items.length] = this.items[this.items.length] = items[i]
this.length++ this.length++
@ -35,16 +35,16 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
} }
}, },
setproto = Set.prototype setproto = Set.prototype
/*\ /*\
* Set.push * Set.push
[ method ] [ method ]
** **
* Adds each argument to the current set * Adds each argument to the current set
= (object) original element = (object) original element
\*/ \*/
setproto.push = function () { setproto.push = function () {
var item, len let item, len
for (var i = 0, ii = arguments.length; i < ii; i++) { for (let i = 0, ii = arguments.length; i < ii; i++) {
item = arguments[i] item = arguments[i]
if (item) { if (item) {
len = this.items.length len = this.items.length
@ -53,19 +53,19 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
} }
} }
return this return this
} }
/*\ /*\
* Set.pop * Set.pop
[ method ] [ method ]
** **
* Removes last element and returns it * Removes last element and returns it
= (object) element = (object) element
\*/ \*/
setproto.pop = function () { setproto.pop = function () {
this.length && delete this[this.length--] this.length && delete this[this.length--]
return this.items.pop() return this.items.pop()
} }
/*\ /*\
* Set.forEach * Set.forEach
[ method ] [ method ]
** **
@ -77,15 +77,15 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- thisArg (object) context object for the callback - thisArg (object) context object for the callback
= (object) Set object = (object) Set object
\*/ \*/
setproto.forEach = function (callback, thisArg) { setproto.forEach = function (callback, thisArg) {
for (var i = 0, ii = this.items.length; i < ii; i++) { for (let i = 0, ii = this.items.length; i < ii; i++) {
if (callback.call(thisArg, this.items[i], i) === false) { if (callback.call(thisArg, this.items[i], i) === false) {
return this return this
} }
} }
return this return this
} }
/*\ /*\
* Set.animate * Set.animate
[ method ] [ method ]
** **
@ -104,9 +104,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
| // or | // or
| // animate first element to radius 10, but second to radius 20 and in different time | // animate first element to radius 10, but second to radius 20 and in different time
| set.animate([{r: 10}, 500, mina.easein], [{r: 20}, 1500, mina.easein]); | set.animate([{r: 10}, 500, mina.easein], [{r: 20}, 1500, mina.easein]);
= (Element) the current element = (SnapElement) the current element
\*/ \*/
setproto.animate = function (attrs, ms, easing, callback) { setproto.animate = function (attrs, ms, easing, callback) {
if (typeof easing == 'function' && !easing.length) { if (typeof easing == 'function' && !easing.length) {
callback = easing callback = easing
easing = mina.linear easing = mina.linear
@ -117,11 +117,11 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
ms = easing.dur ms = easing.dur
attrs = attrs.attr attrs = attrs.attr
} }
var args = arguments let args = arguments
if (Snap.is(attrs, 'array') && Snap.is(args[args.length - 1], 'array')) { if (is(attrs, 'array') && is(args[args.length - 1], 'array')) {
var each = true let each = true
} }
var begin, let begin,
handler = function () { handler = function () {
if (begin) { if (begin) {
this.b = begin this.b = begin
@ -146,8 +146,8 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
el.animate(attrs, ms, easing, callbacker) el.animate(attrs, ms, easing, callbacker)
} }
}) })
} }
/*\ /*\
* Set.remove * Set.remove
[ method ] [ method ]
** **
@ -155,13 +155,13 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
* *
= (object) Set object = (object) Set object
\*/ \*/
setproto.remove = function () { setproto.remove = function () {
while (this.length) { while (this.length) {
this.pop().remove() this.pop().remove()
} }
return this return this
} }
/*\ /*\
* Set.bind * Set.bind
[ method ] [ method ]
** **
@ -173,59 +173,59 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- callback (function) function to run - callback (function) function to run
* or * or
- attr (string) attribute name - attr (string) attribute name
- element (Element) specific element in the set to apply the attribute to - element (SnapElement) specific element in the set to apply the attribute to
* or * or
- attr (string) attribute name - attr (string) attribute name
- element (Element) specific element in the set to apply the attribute to - element (SnapElement) specific element in the set to apply the attribute to
- eattr (string) attribute on the element to bind the attribute to - eattr (string) attribute on the element to bind the attribute to
= (object) Set object = (object) Set object
\*/ \*/
setproto.bind = function (attr, a, b) { setproto.bind = function (attr, a, b) {
var data = {} let data = {}
if (typeof a == 'function') { if (typeof a == 'function') {
this.bindings[attr] = a this.bindings[attr] = a
} else { } else {
var aname = b || attr let aname = b || attr
this.bindings[attr] = function (v) { this.bindings[attr] = function (v) {
data[aname] = v data[aname] = v
a.attr(data) a.attr(data)
} }
} }
return this return this
} }
/*\ /*\
* Set.attr * Set.attr
[ method ] [ method ]
** **
* Equivalent of @Element.attr. * Equivalent of @SnapElement.attr.
= (object) Set object = (object) Set object
\*/ \*/
setproto.attr = function (value) { setproto.attr = function (value) {
var unbound = {} let unbound = {}
for (var k in value) { for (let k in value) {
if (this.bindings[k]) { if (this.bindings[k]) {
this.bindings[k](value[k]) this.bindings[k](value[k])
} else { } else {
unbound[k] = value[k] unbound[k] = value[k]
} }
} }
for (var i = 0, ii = this.items.length; i < ii; i++) { for (let i = 0, ii = this.items.length; i < ii; i++) {
this.items[i].attr(unbound) this.items[i].attr(unbound)
} }
return this return this
} }
/*\ /*\
* Set.clear * Set.clear
[ method ] [ method ]
** **
* Removes all elements from the set * Removes all elements from the set
\*/ \*/
setproto.clear = function () { setproto.clear = function () {
while (this.length) { while (this.length) {
this.pop() this.pop()
} }
} }
/*\ /*\
* Set.splice * Set.splice
[ method ] [ method ]
** **
@ -236,10 +236,10 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- insertion… (object) #optional elements to insert - insertion… (object) #optional elements to insert
= (object) set elements that were deleted = (object) set elements that were deleted
\*/ \*/
setproto.splice = function (index, count, insertion) { setproto.splice = function (index, count, insertion) {
index = index < 0 ? mmax(this.length + index, 0) : index index = index < 0 ? mmax(this.length + index, 0) : index
count = mmax(0, mmin(this.length - index, count)) count = mmax(0, mmin(this.length - index, count))
var tail = [], let tail = [],
todel = [], todel = [],
args = [], args = [],
i i
@ -252,7 +252,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
for (; i < this.length - index; i++) { for (; i < this.length - index; i++) {
tail.push(this[index + i]) tail.push(this[index + i])
} }
var arglen = args.length let arglen = args.length
for (i = 0; i < arglen + tail.length; i++) { for (i = 0; i < arglen + tail.length; i++) {
this.items[index + i] = this[index + i] = this.items[index + i] = this[index + i] =
i < arglen ? args[i] : tail[i - arglen] i < arglen ? args[i] : tail[i - arglen]
@ -262,8 +262,8 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
delete this[i++] delete this[i++]
} }
return new Set(todel) return new Set(todel)
} }
/*\ /*\
* Set.exclude * Set.exclude
[ method ] [ method ]
** **
@ -272,15 +272,15 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- element (object) element to remove - element (object) element to remove
= (boolean) `true` if object was found and removed from the set = (boolean) `true` if object was found and removed from the set
\*/ \*/
setproto.exclude = function (el) { setproto.exclude = function (el) {
for (var i = 0, ii = this.length; i < ii; i++) for (let i = 0, ii = this.length; i < ii; i++)
if (this[i] == el) { if (this[i] == el) {
this.splice(i, 1) this.splice(i, 1)
return true return true
} }
return false return false
} }
/*\ /*\
* Set.insertAfter * Set.insertAfter
[ method ] [ method ]
** **
@ -289,28 +289,28 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
- element (object) set will be inserted after this element - element (object) set will be inserted after this element
= (object) Set object = (object) Set object
\*/ \*/
setproto.insertAfter = function (el) { setproto.insertAfter = function (el) {
var i = this.items.length let i = this.items.length
while (i--) { while (i--) {
this.items[i].insertAfter(el) this.items[i].insertAfter(el)
} }
return this return this
} }
/*\ /*\
* Set.getBBox * Set.getBBox
[ method ] [ method ]
** **
* Union of all bboxes of the set. See @Element.getBBox. * Union of all bboxes of the set. See @SnapElement.getBBox.
= (object) bounding box descriptor. See @Element.getBBox. = (object) bounding box descriptor. See @SnapElement.getBBox.
\*/ \*/
setproto.getBBox = function () { setproto.getBBox = function () {
var x = [], let x = [],
y = [], y = [],
x2 = [], x2 = [],
y2 = [] y2 = []
for (var i = this.items.length; i--; ) for (let i = this.items.length; i--; )
if (!this.items[i].removed) { if (!this.items[i].removed) {
var box = this.items[i].getBBox() let box = this.items[i].getBBox()
x.push(box.x) x.push(box.x)
y.push(box.y) y.push(box.y)
x2.push(box.x + box.width) x2.push(box.x + box.width)
@ -330,8 +330,8 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
cx: x + (x2 - x) / 2, cx: x + (x2 - x) / 2,
cy: y + (y2 - y) / 2 cy: y + (y2 - y) / 2
} }
} }
/*\ /*\
* Set.insertAfter * Set.insertAfter
[ method ] [ method ]
** **
@ -339,41 +339,40 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
** **
= (object) New Set object = (object) New Set object
\*/ \*/
setproto.clone = function (s) { setproto.clone = function (s) {
s = new Set() s = new Set()
for (var i = 0, ii = this.items.length; i < ii; i++) { for (let i = 0, ii = this.items.length; i < ii; i++) {
s.push(this.items[i].clone()) s.push(this.items[i].clone())
} }
return s return s
} }
setproto.toString = function () { setproto.toString = function () {
return 'Snap\u2018s set' return 'Snap\u2018s set'
} }
setproto.type = 'set' setproto.type = 'set'
// export // export
/*\ /*\
* Snap.Set * Snap.Set
[ property ] [ property ]
** **
* Set constructor. * Set constructor.
\*/ \*/
Snap.Set = Set Snap.Set = Set
/*\ /*\
* Snap.set * Snap.set
[ method ] [ method ]
** **
* Creates a set and fills it with list of arguments. * Creates a set and fills it with list of arguments.
** **
= (object) New Set object = (object) New Set object
| var r = paper.rect(0, 0, 10, 10), | let r = paper.rect(0, 0, 10, 10),
| s1 = Snap.set(), // empty set | s1 = Snap.set(), // empty set
| s2 = Snap.set(r, paper.circle(100, 100, 20)); // prefilled set | s2 = Snap.set(r, paper.circle(100, 100, 20)); // prefilled set
\*/ \*/
Snap.set = function () { Snap.set = function () {
var set = new Set() let set = new Set()
if (arguments.length) { if (arguments.length) {
set.push.apply(set, Array.prototype.slice.call(arguments, 0)) set.push.apply(set, Array.prototype.slice.call(arguments, 0))
} }
return set return set
} }
})

2165
src/svg.js
View File

File diff suppressed because it is too large Load Diff

154
src/utils.js Normal file
View File

@ -0,0 +1,154 @@
/**
* {}
* @author yutent<yutent.io@gmail.com>
* @date 2024/03/06 09:55:31
*/
import { xlink, xmlns, doc, win } from './lib/constants.js'
export function uuid(prefix = '') {
return prefix + Math.random().toString(16).slice(-8)
}
export function is(o, type) {
type = String(type).toLowerCase()
let _type = Object.prototype.toString.call(o).slice(8, -1).toLowerCase()
if (type === 'finite') {
return isFinite(o)
}
if (type === 'array' && Array.isArray(o)) {
return true
}
return (
(type === 'null' && o === null) ||
(type === typeof o && o !== null) ||
(type === 'object' && o === Object(o)) ||
_type === type
)
}
export function $(el, attr) {
if (attr) {
if (el == '#text') {
el = doc.createTextNode(attr.text || attr['#text'] || '')
}
if (el == '#comment') {
el = doc.createComment(attr.text || attr['#text'] || '')
}
if (typeof el == 'string') {
el = $(el)
}
if (typeof attr == 'string') {
if (el.nodeType == 1) {
if (attr.slice(0, 6) == 'xlink:') {
return el.getAttributeNS(xlink, attr.slice(6))
}
if (attr.slice(0, 4) == 'xml:') {
return el.getAttributeNS(xmlns, attr.slice(4))
}
return el.getAttribute(attr)
} else if (attr == 'text') {
return el.nodeValue
} else {
return null
}
}
if (el.nodeType == 1) {
for (let key in attr)
if (attr.hasOwnProperty(key)) {
let val = String(attr[key])
if (val) {
if (key.slice(0, 6) == 'xlink:') {
el.setAttributeNS(xlink, key.slice(6), val)
} else if (key.slice(0, 4) == 'xml:') {
el.setAttributeNS(xmlns, key.slice(4), val)
} else {
el.setAttribute(key, val)
}
} else {
el.removeAttribute(key)
}
}
} else if ('text' in attr) {
el.nodeValue = attr.text
}
} else {
el = doc.createElementNS(xmlns, el)
}
return el
}
export function clone(obj) {
if (typeof obj == 'function' || Object(obj) !== obj) {
return obj
}
let res = new obj.constructor()
for (let key in obj)
if (obj.hasOwnProperty(key)) {
res[key] = clone(obj[key])
}
return res
}
export function preload(src, f) {
let img = new Image()
img.onload = function () {
f.call(img)
}
img.src = src
}
function repush(arr, item) {
let l = arr.length - 1 // 要减1, 最后如果本身在最后, 不用变
for (let i = 0; i < l; i++) {
if (arr[i] === item) {
;[a[i], a[l]] = [a[l], a[i]]
break
}
}
}
export function cacher(fn, scope, postprocessor) {
function newf(...args) {
let key = args.join('\u2400'),
cache = (newf.cache = newf.cache || {}),
count = (newf.count = newf.count || [])
if (cache.hasOwnProperty(key)) {
repush(count, key)
return postprocessor ? postprocessor(cache[key]) : cache[key]
}
count.length >= 1e3 && delete cache[count.shift()]
count.push(key)
cache[key] = fn.apply(scope, args)
return postprocessor ? postprocessor(cache[key]) : cache[key]
}
return newf
}
export function jsonFiller(root, o) {
for (let i = 0, ii = root.length; i < ii; i++) {
let item = {
type: root[i].type,
attr: root[i].attr()
},
children = root[i].children()
o.push(item)
if (children.length) {
jsonFiller(children, (item.childNodes = []))
}
}
}
export function extend(origin, target) {
let methods = Object.getOwnPropertyNames(target).filter(
n => n !== 'constructor'
)
for (let k of methods) {
Object.defineProperty(origin, k, { value: target[k] })
}
}
export function url(id) {
return "url('#" + id + "')"
}