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

update

master
yutent 2024-03-08 10:58:59 +08:00
parent c714af4a11
commit d9eff8e338
5 changed files with 358 additions and 692 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/attradd.js
View File

@ -54,11 +54,9 @@ eve.on('snap.util.attr', function (val) {
})(-10) })(-10)
eve.on('snap.util.equal', function (name, b) { eve.on('snap.util.equal', function (name, b) {
let A, let a = String(this.attr(name) || '')
B, let bplus = String(b).match(reAddon)
a = String(this.attr(name) || ''),
el = this,
bplus = String(b).match(reAddon)
if (bplus) { if (bplus) {
eve.stop() eve.stop()
let unit = bplus[3] || '', let unit = bplus[3] || '',

83
src/mina.js
View File

@ -1,18 +1,10 @@
// Copyright (c) 2017 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/08 10:20:25
// 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 eve from './eve.js' import eve from './eve.js'
import { Snap } from './svg.js'
import { uuid } from './utils.js' import { uuid } from './utils.js'
let animations = {}, let animations = {},
@ -127,42 +119,39 @@ let animations = {},
a.update() a.update()
} }
requestID = len ? requestAnimFrame(frame) : false requestID = len ? requestAnimFrame(frame) : false
}, }
/*\ /***
* mina
[ method ]
**
* Generic animation of numbers * Generic animation of numbers
** **
- a (number) start _slave_ number * a (number) start _slave_ number
- A (number) end _slave_ number * A (number) end _slave_ number
- b (number) start _master_ number (start time in general case) * b (number) start _master_ number (start time in general case)
- B (number) end _master_ number (end time in general case) * B (number) end _master_ number (end time in general case)
- get (function) getter of _master_ number (see @mina.time) * get (function) getter of _master_ number (see @mina.time)
- set (function) setter of _slave_ number * set (function) setter of _slave_ number
- easing (function) #optional easing function, default is @mina.linear * easing (function) #optional easing function, default is @mina.linear
= (object) animation descriptor = (object) animation descriptor
o { {
o id (string) animation id, id (string) animation id,
o start (number) start _slave_ number, start (number) start _slave_ number,
o end (number) end _slave_ number, end (number) end _slave_ number,
o b (number) start _master_ number, b (number) start _master_ number,
o s (number) animation status (0..1), s (number) animation status (0..1),
o dur (number) animation duration, dur (number) animation duration,
o spd (number) animation speed, spd (number) animation speed,
o get (function) getter of _master_ number (see @mina.time), get (function) getter of _master_ number (see @mina.time),
o set (function) setter of _slave_ number, set (function) setter of _slave_ number,
o easing (function) easing function, default is @mina.linear, easing (function) easing function, default is @mina.linear,
o status (function) status getter/setter, status (function) status getter/setter,
o speed (function) speed getter/setter, speed (function) speed getter/setter,
o duration (function) duration getter/setter, duration (function) duration getter/setter,
o stop (function) animation stopper stop (function) animation stopper
o pause (function) pauses the animation pause (function) pauses the animation
o resume (function) resumes the animation resume (function) resumes the animation
o update (function) calles setter with the right value of the animation update (function) calles setter with the right value of the animation
o } }
\*/ */
mina = function (a, A, b, B, get, set, easing) { export const mina = function (a, A, b, B, get, set, easing) {
let anim = { let anim = {
id: uuid('M'), id: uuid('M'),
start: a, start: a,

272
src/mouse.js
View File

@ -12,7 +12,7 @@
// 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, SnapElement, Paper } from './svg.js' import { Snap, SnapElement } from './svg.js'
import { is } from './utils.js' import { is } from './utils.js'
import { doc, win } from './lib/constants.js' import { doc, win } from './lib/constants.js'
@ -169,194 +169,10 @@ let elproto = SnapElement.prototype,
} }
drag = [] drag = []
} }
/*\
* SnapElement.click
[ method ]
**
* Adds a click event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unclick
[ method ]
**
* Removes a click event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.dblclick
[ method ]
**
* Adds a double click event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.undblclick
[ method ]
**
* Removes a double click event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mousedown
[ method ]
**
* Adds a mousedown event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmousedown
[ method ]
**
* Removes a mousedown event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mousemove
[ method ]
**
* Adds a mousemove event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmousemove
[ method ]
**
* Removes a mousemove event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mouseout
[ method ]
**
* Adds a mouseout event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmouseout
[ method ]
**
* Removes a mouseout event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mouseover
[ method ]
**
* Adds a mouseover event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmouseover
[ method ]
**
* Removes a mouseover event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.mouseup
[ method ]
**
* Adds a mouseup event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.unmouseup
[ method ]
**
* Removes a mouseup event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.touchstart
[ method ]
**
* Adds a touchstart event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.untouchstart
[ method ]
**
* Removes a touchstart event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.touchmove
[ method ]
**
* Adds a touchmove event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.untouchmove
[ method ]
**
* Removes a touchmove event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.touchend
[ method ]
**
* Adds a touchend event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.untouchend
[ method ]
**
* Removes a touchend event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.touchcancel
[ method ]
**
* Adds a touchcancel event handler to the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
/*\
* SnapElement.untouchcancel
[ method ]
**
* Removes a touchcancel event handler from the element
- handler (function) handler for the event
= (object) @SnapElement
\*/
for (let i = events.length; i--; ) { for (let i = events.length; i--; ) {
;(function (eventName) { let eventName = events[i]
Snap[eventName] = elproto[eventName] = function (fn, scope) { Snap[eventName] = elproto[eventName] = function (fn, scope) {
if (is(fn, 'function')) { if (is(fn, 'function')) {
this.events = this.events || [] this.events = this.events || []
@ -375,6 +191,7 @@ for (let i = events.length; i--; ) {
} }
return this return this
} }
Snap['un' + eventName] = elproto['un' + eventName] = function (fn) { Snap['un' + eventName] = elproto['un' + eventName] = function (fn) {
let events = this.events || [], let events = this.events || [],
l = events.length l = events.length
@ -387,69 +204,27 @@ for (let i = events.length; i--; ) {
} }
return this return this
} }
})(events[i])
} }
/*\ /***
* SnapElement.hover
[ method ]
**
* Adds hover event handlers to the element * Adds hover event handlers to 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
- 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) @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)
} }
/*\ /**
* SnapElement.unhover
[ 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) @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)
} }
let draggable = [] let draggable = []
// SIERRA unclear what _context_ refers to for starting, ending, moving the drag gesture.
// SIERRA SnapElement.drag(): _x position of the mouse_: Where are the x/y values offset from?
// 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?
/*\
* SnapElement.drag
[ method ]
**
* Adds event handlers for an element's drag gesture
**
- onmove (function) handler for moving
- onstart (function) handler for drag start
- onend (function) handler for drag end
- mcontext (object) #optional context for moving handler
- scontext (object) #optional context for drag start handler
- econtext (object) #optional context for drag end handler
* Additionaly following `drag` events are triggered: `drag.start.<id>` on start,
* `drag.end.<id>` on end and `drag.move.<id>` on every move. When element is dragged over another element
* `drag.over.<id>` fires as well.
*
* Start event and start handler are called in specified context or in context of the element with following parameters:
o x (number) x position of the mouse
o y (number) y position of the mouse
o event (object) DOM event object
* Move event and move handler are called in specified context or in context of the element with following parameters:
o dx (number) shift by x from the start point
o dy (number) shift by y from the start point
o x (number) x position of the mouse
o y (number) y position of the mouse
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:
o event (object) DOM event object
= (object) @SnapElement
\*/
elproto.drag = function ( elproto.drag = function (
onmove, onmove,
onstart, onstart,
@ -498,22 +273,7 @@ elproto.drag = function (
el.mousedown(init) el.mousedown(init)
return el return el
} }
/*
* SnapElement.onDragOver
[ method ]
**
* 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
\*/
// elproto.onDragOver = function (f) {
// f ? eve.on("snap.drag.over." + this.id, f) : eve.unbind("snap.drag.over." + this.id);
// };
/*\
* SnapElement.undrag
[ method ]
**
* Removes all drag event handlers from the given element
\*/
elproto.undrag = function () { elproto.undrag = function () {
let i = draggable.length let i = draggable.length
while (i--) while (i--)

27
src/paper.js
View File

@ -14,27 +14,19 @@ let proto = Paper.prototype
// gradients // gradients
;(function () { ;(function () {
// gradients' helpers // gradients' helpers
/*\ /**
* SnapElement.stops
[ method ]
**
* Only for gradients! * Only for gradients!
* Returns array of gradient stops elements. * Returns array of gradient stops elements.
= (array) the stops array. */
\*/
function Gstops() { function Gstops() {
return this.selectAll('stop') return this.selectAll('stop')
} }
/*\ /**
* SnapElement.addStop
[ method ]
**
* Only for gradients! * Only for gradients!
* Adds another stop to the gradient. * Adds another stop to the gradient.
- color (string) stops color * color (string) stops color
- offset (number) stops offset 0..100 * offset (number) stops offset 0..100
= (object) gradient element */
\*/
function GaddStop(color, offset) { function GaddStop(color, offset) {
let stop = $('stop'), let stop = $('stop'),
attr = { attr = {
@ -75,17 +67,14 @@ let proto = Paper.prototype
return Snap._.box(cx - r, cy - r, r * 2, r * 2) return Snap._.box(cx - r, cy - r, r * 2, r * 2)
} }
} }
/*\ /**
* SnapElement.setStops
[ 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
| let 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) {
let grad = str, let grad = str,
stops = this.stops() stops = this.stops()

284
src/path.js
View File

@ -1,29 +1,21 @@
// Copyright (c) 2013 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/08 10:57:37
// You may obtain a copy of the License at */
//
// http://www.apache.org/licenses/LICENSE-2.0 import { Snap, SnapElement, unit2px } from './svg.js'
//
// 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, SnapElement, Paper, Fragment, unit2px } from './svg.js'
import { is, clone, cacher } from './utils.js' import { is, clone, cacher } from './utils.js'
let elproto = SnapElement.prototype, let elproto = SnapElement.prototype,
has = 'hasOwnProperty', has = 'hasOwnProperty',
p2s = /,?([a-z]),?/gi, p2s = /,?([a-z]),?/gi,
toFloat = parseFloat, PI = Math.PI,
math = Math, mmin = Math.min,
PI = math.PI, mmax = Math.max,
mmin = math.min, pow = Math.pow,
mmax = math.max, abs = Math.abs
pow = math.pow,
abs = math.abs
function paths(ps) { function paths(ps) {
let p = (paths.ps = paths.ps || {}) let p = (paths.ps = paths.ps || {})
if (p[ps]) { if (p[ps]) {
@ -34,11 +26,12 @@ function paths(ps) {
} }
} }
setTimeout(function () { setTimeout(function () {
for (let key in p) for (let key in p) {
if (p[has](key) && key != ps) { if (p[has](key) && key != ps) {
p[key].sleep-- p[key].sleep--
!p[key].sleep && delete p[key] !p[key].sleep && delete p[key]
} }
}
}) })
return p[ps] return p[ps]
} }
@ -63,9 +56,9 @@ function box(x, y, width, height) {
y2: y + height, y2: y + height,
cx: x + width / 2, cx: x + width / 2,
cy: y + height / 2, cy: y + height / 2,
r1: math.min(width, height) / 2, r1: Math.min(width, height) / 2,
r2: math.max(width, height) / 2, r2: Math.max(width, height) / 2,
r0: math.sqrt(width * width + height * height) / 2, r0: Math.sqrt(width * width + height * height) / 2,
path: rectPath(x, y, width, height), path: rectPath(x, y, width, height),
vb: [x, y, width, height].join(' ') vb: [x, y, width, height].join(' ')
} }
@ -221,7 +214,7 @@ function findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
ay = t1 * p1y + t * c1y, ay = t1 * p1y + t * c1y,
cx = t1 * c2x + t * p2x, cx = t1 * c2x + t * p2x,
cy = t1 * c2y + t * p2y, cy = t1 * c2y + t * p2y,
alpha = 90 - (math.atan2(mx - nx, my - ny) * 180) / PI alpha = 90 - (Math.atan2(mx - nx, my - ny) * 180) / PI
// (mx > nx || my < ny) && (alpha += 180); // (mx > nx || my < ny) && (alpha += 180);
return { return {
x: x, x: x,
@ -297,7 +290,7 @@ function bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) {
xbase = base3(ct, x1, x2, x3, x4), xbase = base3(ct, x1, x2, x3, x4),
ybase = base3(ct, y1, y2, y3, y4), ybase = base3(ct, y1, y2, y3, y4),
comb = xbase * xbase + ybase * ybase comb = xbase * xbase + ybase * ybase
sum += Cvalues[i] * math.sqrt(comb) sum += Cvalues[i] * Math.sqrt(comb)
} }
return z2 * sum return z2 * sum
} }
@ -863,15 +856,15 @@ function a2c(
y2, y2,
recursive recursive
) { ) {
// for more information of where this math came from visit: // for more information of where this Math came from visit:
// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
let _120 = (PI * 120) / 180, let _120 = (PI * 120) / 180,
rad = (PI / 180) * (+angle || 0), rad = (PI / 180) * (+angle || 0),
res = [], res = [],
xy, xy,
rotate = cacher(function (x, y, rad) { rotate = cacher(function (x, y, rad) {
let X = x * math.cos(rad) - y * math.sin(rad), let X = x * Math.cos(rad) - y * Math.sin(rad),
Y = x * math.sin(rad) + y * math.cos(rad) Y = x * Math.sin(rad) + y * Math.cos(rad)
return { x: X, y: Y } return { x: X, y: Y }
}) })
if (!rx || !ry) { if (!rx || !ry) {
@ -884,13 +877,13 @@ function a2c(
xy = rotate(x2, y2, -rad) xy = rotate(x2, y2, -rad)
x2 = xy.x x2 = xy.x
y2 = xy.y y2 = xy.y
let cos = math.cos((PI / 180) * angle), let cos = Math.cos((PI / 180) * angle),
sin = math.sin((PI / 180) * angle), sin = Math.sin((PI / 180) * angle),
x = (x1 - x2) / 2, x = (x1 - x2) / 2,
y = (y1 - y2) / 2 y = (y1 - y2) / 2
let h = (x * x) / (rx * rx) + (y * y) / (ry * ry) let h = (x * x) / (rx * rx) + (y * y) / (ry * ry)
if (h > 1) { if (h > 1) {
h = math.sqrt(h) h = Math.sqrt(h)
rx = h * rx rx = h * rx
ry = h * ry ry = h * ry
} }
@ -898,7 +891,7 @@ function a2c(
ry2 = ry * ry, ry2 = ry * ry,
k = k =
(large_arc_flag == sweep_flag ? -1 : 1) * (large_arc_flag == sweep_flag ? -1 : 1) *
math.sqrt( Math.sqrt(
abs( abs(
(rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * ry2 - rx2 * y * y - ry2 * x * x) /
(rx2 * y * y + ry2 * x * x) (rx2 * y * y + ry2 * x * x)
@ -906,8 +899,8 @@ function a2c(
), ),
cx = (k * rx * y) / ry + (x1 + x2) / 2, cx = (k * rx * y) / ry + (x1 + x2) / 2,
cy = (k * -ry * x) / rx + (y1 + y2) / 2, cy = (k * -ry * x) / rx + (y1 + y2) / 2,
f1 = math.asin(((y1 - cy) / ry).toFixed(9)), f1 = Math.asin(((y1 - cy) / ry).toFixed(9)),
f2 = math.asin(((y2 - cy) / ry).toFixed(9)) f2 = Math.asin(((y2 - cy) / ry).toFixed(9))
f1 = x1 < cx ? PI - f1 : f1 f1 = x1 < cx ? PI - f1 : f1
f2 = x2 < cx ? PI - f2 : f2 f2 = x2 < cx ? PI - f2 : f2
@ -931,8 +924,8 @@ function a2c(
x2old = x2, x2old = x2,
y2old = y2 y2old = y2
f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1) f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1)
x2 = cx + rx * math.cos(f2) x2 = cx + rx * Math.cos(f2)
y2 = cy + ry * math.sin(f2) y2 = cy + ry * Math.sin(f2)
res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [ res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [
f2, f2,
f2old, f2old,
@ -941,11 +934,11 @@ function a2c(
]) ])
} }
df = f2 - f1 df = f2 - f1
let c1 = math.cos(f1), let c1 = Math.cos(f1),
s1 = math.sin(f1), s1 = Math.sin(f1),
c2 = math.cos(f2), c2 = Math.cos(f2),
s2 = math.sin(f2), s2 = Math.sin(f2),
t = math.tan(df / 4), t = Math.tan(df / 4),
hx = (4 / 3) * rx * t, hx = (4 / 3) * rx * t,
hy = (4 / 3) * ry * t, hy = (4 / 3) * ry * t,
m1 = [x1, y1], m1 = [x1, y1],
@ -1020,7 +1013,7 @@ function curveDim(x0, y0, x1, y1, x2, y2, x3, y3) {
continue continue
} }
b2ac = b * b - 4 * c * a b2ac = b * b - 4 * c * a
sqrtb2ac = math.sqrt(b2ac) sqrtb2ac = Math.sqrt(b2ac)
if (b2ac < 0) { if (b2ac < 0) {
continue continue
} }
@ -1199,10 +1192,10 @@ function path2curve(path, path2) {
seg2len = p2 && seg2.length seg2len = p2 && seg2.length
attrs.x = seg[seglen - 2] attrs.x = seg[seglen - 2]
attrs.y = seg[seglen - 1] attrs.y = seg[seglen - 1]
attrs.bx = toFloat(seg[seglen - 4]) || attrs.x attrs.bx = +seg[seglen - 4] || attrs.x
attrs.by = toFloat(seg[seglen - 3]) || attrs.y attrs.by = +seg[seglen - 3] || attrs.y
attrs2.bx = p2 && (toFloat(seg2[seg2len - 4]) || attrs2.x) attrs2.bx = p2 && (+seg2[seg2len - 4] || attrs2.x)
attrs2.by = p2 && (toFloat(seg2[seg2len - 3]) || attrs2.y) attrs2.by = p2 && (+seg2[seg2len - 3] || attrs2.y)
attrs2.x = p2 && seg2[seg2len - 2] attrs2.x = p2 && seg2[seg2len - 2]
attrs2.y = p2 && seg2[seg2len - 1] attrs2.y = p2 && seg2[seg2len - 1]
} }
@ -1272,38 +1265,28 @@ function catmullRom2bezier(crp, z) {
// export // export
Snap.path = paths Snap.path = paths
/*\ /**
* Snap.path.getTotalLength
[ method ]
**
* Returns the length of the given path in pixels * Returns the length of the given path in pixels
** **
- path (string) SVG path string * path (string) SVG path string
** **
= (number) length */
\*/
Snap.path.getTotalLength = getTotalLength Snap.path.getTotalLength = getTotalLength
/*\ /**
* Snap.path.getPointAtLength
[ method ]
**
* Returns the coordinates of the point located at the given length along the given path * Returns the coordinates of the point located at the given length along the given path
** **
- path (string) SVG path string * path (string) SVG path string
- length (number) length, in pixels, from the start of the path, excluding non-rendering jumps * length (number) length, in pixels, from the start of the path, excluding non-rendering jumps
** **
= (object) representation of the point: = (object) representation of the point:
o { {
o x: (number) x coordinate, x: (number) x coordinate,
o y: (number) y coordinate, y: (number) y coordinate,
o alpha: (number) angle of derivative alpha: (number) angle of derivative
o } }
\*/ */
Snap.path.getPointAtLength = getPointAtLength Snap.path.getPointAtLength = getPointAtLength
/*\ /**
* Snap.path.getSubpath
[ method ]
**
* Returns the subpath of a given path between given start and end lengths * Returns the subpath of a given path between given start and end lengths
** **
- path (string) SVG path string - path (string) SVG path string
@ -1311,7 +1294,7 @@ Snap.path.getPointAtLength = getPointAtLength
- to (number) length, in pixels, from the start of the path to the end of the segment - to (number) length, in pixels, from the start of the path to the end of the segment
** **
= (string) path string definition for the segment = (string) path string definition for the segment
\*/ */
Snap.path.getSubpath = function (path, from, to) { Snap.path.getSubpath = function (path, from, to) {
if (this.getTotalLength(path) - to < 1e-6) { if (this.getTotalLength(path) - to < 1e-6) {
return getSubpathsAtLength(path, from).end return getSubpathsAtLength(path, from).end
@ -1319,57 +1302,45 @@ Snap.path.getSubpath = function (path, from, to) {
let a = getSubpathsAtLength(path, to, 1) let a = getSubpathsAtLength(path, to, 1)
return from ? getSubpathsAtLength(a, from).end : a return from ? getSubpathsAtLength(a, from).end : a
} }
/*\ /**
* SnapElement.getTotalLength
[ method ]
**
* Returns the length of the path in pixels (only works for `path` elements) * Returns the length of the path in pixels (only works for `path` elements)
= (number) length = (number) length
\*/ */
elproto.getTotalLength = function () { elproto.getTotalLength = function () {
if (this.node.getTotalLength) { if (this.node.getTotalLength) {
return this.node.getTotalLength() return this.node.getTotalLength()
} }
} }
// SIERRA SnapElement.getPointAtLength()/SnapElement.getTotalLength(): If a <path> is broken into different segments, is the jump distance to the new coordinates set by the _M_ or _m_ commands calculated as part of the path's total length? // SIERRA SnapElement.getPointAtLength()/SnapElement.getTotalLength(): If a <path> is broken into different segments, is the jump distance to the new coordinates set by the _M_ or _m_ commands calculated as part of the path's total length?
/*\ /**
* SnapElement.getPointAtLength
[ method ]
**
* Returns coordinates of the point located at the given length on the given path (only works for `path` elements) * Returns coordinates of the point located at the given length on the given path (only works for `path` elements)
** **
- length (number) length, in pixels, from the start of the path, excluding non-rendering jumps - length (number) length, in pixels, from the start of the path, excluding non-rendering jumps
** **
= (object) representation of the point: = (object) representation of the point:
o { {
o x: (number) x coordinate, x: (number) x coordinate,
o y: (number) y coordinate, y: (number) y coordinate,
o alpha: (number) angle of derivative alpha: (number) angle of derivative
o } }
\*/ */
elproto.getPointAtLength = function (length) { elproto.getPointAtLength = function (length) {
return getPointAtLength(this.attr('d'), length) return getPointAtLength(this.attr('d'), length)
} }
// SIERRA SnapElement.getSubpath(): Similar to the problem for SnapElement.getPointAtLength(). Unclear how this would work for a segmented path. Overall, the concept of _subpath_ and what I'm calling a _segment_ (series of non-_M_ or _Z_ commands) is unclear. // SIERRA SnapElement.getSubpath(): Similar to the problem for SnapElement.getPointAtLength(). Unclear how this would work for a segmented path. Overall, the concept of _subpath_ and what I'm calling a _segment_ (series of non-_M_ or _Z_ commands) is unclear.
/*\ /**
* SnapElement.getSubpath
[ method ]
**
* Returns subpath of a given element from given start and end lengths (only works for `path` elements) * Returns subpath of a given element from given start and end lengths (only works for `path` elements)
** **
- from (number) length, in pixels, from the start of the path to the start of the segment - from (number) length, in pixels, from the start of the path to the start of the segment
- to (number) length, in pixels, from the start of the path to the end of the segment - to (number) length, in pixels, from the start of the path to the end of the segment
** **
= (string) path string definition for the segment = (string) path string definition for the segment
\*/ */
elproto.getSubpath = function (from, to) { elproto.getSubpath = function (from, to) {
return Snap.path.getSubpath(this.attr('d'), from, to) return Snap.path.getSubpath(this.attr('d'), from, to)
} }
Snap._.box = box Snap._.box = box
/*\ /**
* Snap.path.findDotsAtSegment
[ method ]
**
* Utility method * Utility method
** **
* Finds dot coordinates on the given cubic beziér curve at the given t * Finds dot coordinates on the given cubic beziér curve at the given t
@ -1383,34 +1354,30 @@ Snap._.box = box
- p2y (number) y of the second point of the curve - p2y (number) y of the second point of the curve
- t (number) position on the curve (0..1) - t (number) position on the curve (0..1)
= (object) point information in format: = (object) point information in format:
o { {
o x: (number) x coordinate of the point, x: (number) x coordinate of the point,
o y: (number) y coordinate of the point, y: (number) y coordinate of the point,
o m: { m: {
o x: (number) x coordinate of the left anchor, x: (number) x coordinate of the left anchor,
o y: (number) y coordinate of the left anchor y: (number) y coordinate of the left anchor
o }, },
o n: { n: {
o x: (number) x coordinate of the right anchor, x: (number) x coordinate of the right anchor,
o y: (number) y coordinate of the right anchor y: (number) y coordinate of the right anchor
o }, },
o start: { start: {
o x: (number) x coordinate of the start of the curve, x: (number) x coordinate of the start of the curve,
o y: (number) y coordinate of the start of the curve y: (number) y coordinate of the start of the curve
o }, },
o end: { end: {
o x: (number) x coordinate of the end of the curve, x: (number) x coordinate of the end of the curve,
o y: (number) y coordinate of the end of the curve y: (number) y coordinate of the end of the curve
o }, },
o alpha: (number) angle of the curve derivative at the point alpha: (number) angle of the curve derivative at the point
o } }
\*/ */
Snap.path.findDotsAtSegment = findDotsAtSegment Snap.path.findDotsAtSegment = findDotsAtSegment
/*\ /**
* Snap.path.bezierBBox
[ method ]
**
* Utility method
** **
* Returns the bounding box of a given cubic beziér curve * Returns the bounding box of a given cubic beziér curve
- p1x (number) x of the first point of the curve - p1x (number) x of the first point of the curve
@ -1432,20 +1399,16 @@ Snap.path.findDotsAtSegment = findDotsAtSegment
o width: (number) width of the box, o width: (number) width of the box,
o height: (number) height of the box o height: (number) height of the box
o } o }
\*/ */
Snap.path.bezierBBox = bezierBBox Snap.path.bezierBBox = bezierBBox
/*\ /**
* Snap.path.isPointInsideBBox
[ method ]
**
* Utility method
** **
* Returns `true` if given point is inside bounding box * Returns `true` if given point is inside bounding box
- bbox (string) bounding box - bbox (string) bounding box
- x (string) x coordinate of the point - x (string) x coordinate of the point
- y (string) y coordinate of the point - y (string) y coordinate of the point
= (boolean) `true` if point is inside = (boolean) `true` if point is inside
\*/ */
Snap.path.isPointInsideBBox = isPointInsideBBox Snap.path.isPointInsideBBox = isPointInsideBBox
Snap.closest = function (x, y, X, Y) { Snap.closest = function (x, y, X, Y) {
let r = 100, let r = 100,
@ -1506,12 +1469,7 @@ Snap.closest = function (x, y, X, Y) {
= (boolean) `true` if bounding boxes intersect = (boolean) `true` if bounding boxes intersect
\*/ \*/
Snap.path.isBBoxIntersect = isBBoxIntersect Snap.path.isBBoxIntersect = isBBoxIntersect
/*\ /**
* Snap.path.intersection
[ method ]
**
* Utility method
**
* Finds intersections of two paths * Finds intersections of two paths
- path1 (string) path string - path1 (string) path string
- path2 (string) path string - path2 (string) path string
@ -1528,15 +1486,10 @@ Snap.path.isBBoxIntersect = isBBoxIntersect
o bez2: (array) eight coordinates representing beziér curve for the segment of path2 o bez2: (array) eight coordinates representing beziér curve for the segment of path2
o } o }
o ] o ]
\*/ */
Snap.path.intersection = pathIntersection Snap.path.intersection = pathIntersection
Snap.path.intersectionNumber = pathIntersectionNumber Snap.path.intersectionNumber = pathIntersectionNumber
/*\ /**
* Snap.path.isPointInside
[ method ]
**
* Utility method
**
* Returns `true` if given point is inside a given closed path. * Returns `true` if given point is inside a given closed path.
* *
* Note: fill mode doesn’t affect the result of this method. * Note: fill mode doesn’t affect the result of this method.
@ -1544,14 +1497,9 @@ Snap.path.intersectionNumber = pathIntersectionNumber
- x (number) x of the point - x (number) x of the point
- y (number) y of the point - y (number) y of the point
= (boolean) `true` if point is inside the path = (boolean) `true` if point is inside the path
\*/ */
Snap.path.isPointInside = isPointInsidePath Snap.path.isPointInside = isPointInsidePath
/*\ /**
* Snap.path.getBBox
[ method ]
**
* Utility method
**
* Returns the bounding box of a given path * Returns the bounding box of a given path
- path (string) path string - path (string) path string
= (object) bounding box = (object) bounding box
@ -1563,51 +1511,33 @@ Snap.path.isPointInside = isPointInsidePath
o width: (number) width of the box, o width: (number) width of the box,
o height: (number) height of the box o height: (number) height of the box
o } o }
\*/ */
Snap.path.getBBox = pathBBox Snap.path.getBBox = pathBBox
Snap.path.get = getPath Snap.path.get = getPath
/*\ /**
* Snap.path.toRelative
[ method ]
**
* Utility method
**
* Converts path coordinates into relative values * Converts path coordinates into relative values
- path (string) path string - path (string) path string
= (array) path string = (array) path string
\*/ */
Snap.path.toRelative = pathToRelative Snap.path.toRelative = pathToRelative
/*\ /**
* Snap.path.toAbsolute
[ method ]
**
* Utility method
**
* Converts path coordinates into absolute values * Converts path coordinates into absolute values
- path (string) path string - path (string) path string
= (array) path string = (array) path string
\*/ */
Snap.path.toAbsolute = pathToAbsolute Snap.path.toAbsolute = pathToAbsolute
/*\ /**
* Snap.path.toCubic
[ method ]
**
* Utility method
**
* Converts path to a new path where all segments are cubic beziér curves * Converts path to a new path where all segments are cubic beziér curves
- pathString (string|array) path string or array of segments - pathString (string|array) path string or array of segments
= (array) array of segments = (array) array of segments
\*/ */
Snap.path.toCubic = path2curve Snap.path.toCubic = path2curve
/*\ /**
* Snap.path.map
[ method ]
**
* Transform the path string with the given matrix * Transform the path string with the given matrix
- path (string) path string - path (string) path string
- matrix (object) see @Matrix - matrix (object) see @Matrix
= (string) transformed path string = (string) transformed path string
\*/ */
Snap.path.map = mapPath Snap.path.map = mapPath
Snap.path.toString = toString Snap.path.toString = toString
Snap.path.clone = pathClone Snap.path.clone = pathClone