diff --git a/src/align.js b/src/align.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/animation.js b/src/animation.js index b9abcd5..7142246 100644 --- a/src/animation.js +++ b/src/animation.js @@ -13,7 +13,7 @@ // limitations under the License. import eve from './eve.js' -import { Snap, SnapElement, Paper, Fragment } from './svg.js' +import { SnapElement } from './svg.js' import mina from './mina.js' import { is } from './utils.js' @@ -39,89 +39,80 @@ let Animation = function (attr, ms, easing, callback) { easing && (this.easing = easing) callback && (this.callback = callback) } -Snap._.Animation = Animation -/*\ - * Snap.animation - [ method ] - ** - * Creates an animation object - ** - - attr (object) attributes of final destination - - duration (number) duration of the animation, in milliseconds - - easing (function) #optional one of easing functions of @mina or custom one - - callback (function) #optional callback function that fires when animation ends - = (object) animation object - \*/ -Snap.animation = function (attr, ms, easing, callback) { +export { Animation } +/** + * Creates an animation object + ** + * attr (object) attributes of final destination + * duration (number) duration of the animation, in milliseconds + * easing (function) #optional one of easing functions of @mina or custom one + * callback (function) #optional callback function that fires when animation ends + */ +export function createAnimation(attr, ms, easing, callback) { return new Animation(attr, ms, easing, callback) } -/*\ - * SnapElement.inAnim - [ method ] - ** - * Returns a set of animations that may be able to manipulate the current element - ** - = (object) in format: - o { - o anim (object) animation object, - o mina (object) @mina object, - o curStatus (number) 0..1 — status of the animation: 0 — just started, 1 — just finished, - o status (function) gets or sets the status of the animation, - o stop (function) stops the animation - o } - \*/ +/** + * Returns a set of animations that may be able to manipulate the current element + ** + = (object) in format: + { + anim (object) animation object, + mina (object) @mina object, + curStatus (number) 0..1 — status of the animation: 0 — just started, 1 — just finished, + status (function) gets or sets the status of the animation, + stop (function) stops the animation + } +*/ elproto.inAnim = function () { - let el = this, - res = [] - for (let id in el.anims) - if (el.anims[has](id)) { - ;(function (a) { - res.push({ - anim: new Animation(a._attrs, a.dur, a.easing, a._callback), - mina: a, - curStatus: a.status(), - status: function (val) { - return a.status(val) - }, - stop: function () { - a.stop() - } - }) - })(el.anims[id]) + let el = this + let res = [] + + for (let id in el.anims) { + if (el.anims.hasOwnProperty(id)) { + let a = el.anims[id] + res.push({ + anim: new Animation(a._attrs, a.dur, a.easing, a._callback), + mina: a, + curStatus: a.status(), + status(val) { + return a.status(val) + }, + stop() { + a.stop() + } + }) } + } return res } -/*\ - * Snap.animate - [ method ] - ** - * Runs generic animation of one number into another with a caring function - ** - - from (number|array) number or array of numbers - - to (number|array) number or array of numbers - - setter (function) caring function that accepts one number argument - - duration (number) duration, in milliseconds - - easing (function) #optional easing function from @mina or custom - - callback (function) #optional callback function to execute when animation ends - = (object) animation object in @mina format - o { - o id (string) animation id, consider it read-only, - o duration (function) gets or sets the duration of the animation, - o easing (function) easing, - o speed (function) gets or sets the speed of the animation, - o status (function) gets or sets the status of the animation, - o stop (function) stops the animation - o } - | let rect = new Snap().rect(0, 0, 10, 10); - | Snap.animate(0, 10, function (val) { - | rect.attr({ - | x: val - | }); - | }, 1000); - | // in given context is equivalent to - | rect.animate({x: 10}, 1000); - \*/ -Snap.animate = function (from, to, setter, ms, easing, callback) { +/** + * Runs generic animation of one number into another with a caring function + ** + - from (number|array) number or array of numbers + - to (number|array) number or array of numbers + - setter (function) caring function that accepts one number argument + - duration (number) duration, in milliseconds + - easing (function) #optional easing function from @mina or custom + - callback (function) #optional callback function to execute when animation ends + = (object) animation object in @mina format + { + id (string) animation id, consider it read-only, + duration (function) gets or sets the duration of the animation, + easing (function) easing, + speed (function) gets or sets the speed of the animation, + status (function) gets or sets the status of the animation, + stop (function) stops the animation + } + let rect = new Snap().rect(0, 0, 10, 10); + animate(0, 10, function (val) { + rect.attr({ + x: val + }); + }, 1000); + // in given context is equivalent to + rect.animate({x: 10}, 1000); +*/ +export function animate(from, to, setter, ms, easing, callback) { if (typeof easing == 'function' && !easing.length) { callback = easing easing = mina.linear diff --git a/src/attradd.js b/src/attradd.js index b45b15e..f4f589f 100644 --- a/src/attradd.js +++ b/src/attradd.js @@ -1,18 +1,10 @@ -// Copyright (c) 2013 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. +/** + * {} + * @author yutent + * @date 2024/03/07 15:17:00 + */ + import eve from './eve.js' -import { Snap, SnapElement, Paper, Fragment } from './svg.js' let operators = { '+': function (x, y) { @@ -51,7 +43,7 @@ eve.on('snap.util.attr', function (val) { aUnit = a.match(reUnit), op = operators[plus[1]] if (aUnit && aUnit == unit) { - val = op(parseFloat(a), +plus[2]) + val = op(+a, +plus[2]) } else { a = this.asPX(name) val = op(this.asPX(name), this.asPX(name, plus[2] + unit)) @@ -63,6 +55,7 @@ eve.on('snap.util.attr', function (val) { this.attr(atr) } })(-10) + eve.on('snap.util.equal', function (name, b) { let A, B, @@ -76,8 +69,8 @@ eve.on('snap.util.equal', function (name, b) { op = operators[bplus[1]] if (aUnit && aUnit == unit) { return { - from: parseFloat(a), - to: op(parseFloat(a), +bplus[2]), + from: +a, + to: op(+a, +bplus[2]), f: getUnit(aUnit) } } else { diff --git a/src/element.js b/src/element.js index 3ad7d02..e758fbb 100644 --- a/src/element.js +++ b/src/element.js @@ -23,6 +23,7 @@ import { unit2px } from './svg.js' import { $, is } from './utils.js' +import { Matrix } from './matrix.js' let elproto = SnapElement.prototype, Str = String, @@ -55,11 +56,11 @@ elproto.getBBox = function (isWithoutTransform) { if (this.type == 'tspan') { return Snap._.box(this.node.getClientRects().item(0)) } - if (!Snap.Matrix || !Snap.path) { + if (!Snap.path) { return this.node.getBBox() } let el = this, - m = new Snap.Matrix() + m = new Matrix() if (el.removed) { return Snap._.box() } @@ -114,7 +115,7 @@ function extractTransform(el, tstr) { tstr = el.node.getAttribute('transform') } if (!tstr) { - return new Snap.Matrix() + return new Matrix() } tstr = Snap._.svgTransform2string(tstr) } else { @@ -159,10 +160,10 @@ elproto.transform = function (tstr) { let _ = this._ if (tstr == null) { let papa = this, - global = new Snap.Matrix(this.node.getCTM()), + global = new Matrix(this.node.getCTM()), local = extractTransform(this), ms = [local], - m = new Snap.Matrix(), + m = new Matrix(), i, localString = local.toTransformString(), string = Str(local) == Str(this.matrix) ? Str(_.transform) : localString @@ -185,7 +186,7 @@ elproto.transform = function (tstr) { toString: propString } } - if (tstr instanceof Snap.Matrix) { + if (tstr instanceof Matrix) { this.matrix = tstr this._.transform = tstr.toTransformString() } else { @@ -433,7 +434,7 @@ elproto.select = function (query) { \*/ elproto.selectAll = function (query) { let nodelist = this.node.querySelectorAll(query), - set = (Snap.set || Array)() + set = [] for (let i = 0; i < nodelist.length; i++) { set.push(wrap(nodelist[i])) } diff --git a/src/equal.js b/src/equal.js index 0a49fd9..ce9f51f 100644 --- a/src/equal.js +++ b/src/equal.js @@ -12,10 +12,11 @@ // See the License for the specific language governing permissions and // limitations under the License. import eve from './eve.js' -import { Snap, SnapElement, Paper, Fragment } from './svg.js' +import { Snap } from './svg.js' import { is } from './utils.js' import { SEPARATOR } from './lib/constants.js' import { parseColor } from './lib/color.js' +import { Matrix } from './matrix.js' let names = {}, reUnit = /[%a-z]+$/i, @@ -45,8 +46,8 @@ function getEmpty(item) { } } function equaliseTransform(t1, t2, getBBox) { - t1 = t1 || new Snap.Matrix() - t2 = t2 || new Snap.Matrix() + t1 = t1 || new Matrix() + t2 = t2 || new Matrix() t1 = Snap.parseTransformString(t1.toTransformString()) || [] t2 = Snap.parseTransformString(t2.toTransformString()) || [] let maxlength = Math.max(t1.length, t2.length), @@ -136,9 +137,7 @@ function arrayEqual(arr1, arr2) { } return arr1.toString() == arr2.toString() } -SnapElement.prototype.equal = function (name, b) { - return eve('snap.util.equal', this, name, b).firstDefined() -} + eve.on('snap.util.equal', function (name, b) { let A, B, diff --git a/src/filter.js b/src/filter.js index 0691515..9bc866c 100644 --- a/src/filter.js +++ b/src/filter.js @@ -12,12 +12,11 @@ // See the License for the specific language governing permissions and // limitations under the License. import eve from './eve.js' -import { Snap, SnapElement, Paper, Fragment } from './svg.js' +import { Snap, SnapElement } from './svg.js' import { $ } from './utils.js' import { parseColor } from './lib/color.js' -let elproto = SnapElement.prototype, - rgurl = /^\s*url\((.+)\)/, +let rgurl = /^\s*url\((.+)\)/, Str = String Snap.filter = {} diff --git a/src/index.js b/src/index.js index a7cffb5..85186c0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ import { Snap } from './svg.js' import './paper.js' import './element.js' -import './animation.js' -import './matrix.js' +import { createAnimation, animate } from './animation.js' +import { Matrix } from './matrix.js' import './attr.js' import './attradd.js' import './path.js' @@ -12,3 +12,9 @@ import './mouse.js' import './filter.js' export default Snap + +export function createSvg(...args) { + return new Snap(...args) +} + +export { Matrix, createAnimation, animate } diff --git a/src/matrix.js b/src/matrix.js index b14b04e..d19697c 100644 --- a/src/matrix.js +++ b/src/matrix.js @@ -1,63 +1,53 @@ -// Copyright (c) 2013 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, SnapElement, Paper, Fragment } from './svg.js' -let objectToString = Object.prototype.toString, - Str = String, - math = Math, - E = '' -function Matrix(a, b, c, d, e, f) { - if (b == null && objectToString.call(a) == '[object SVGMatrix]') { - this.a = a.a - this.b = a.b - this.c = a.c - this.d = a.d - this.e = a.e - this.f = a.f - return - } - if (a != null) { - this.a = +a - this.b = +b - this.c = +c - this.d = +d - this.e = +e - this.f = +f - } else { - this.a = 1 - this.b = 0 - this.c = 0 - this.d = 1 - this.e = 0 - this.f = 0 - } +/** + * {} + * @author yutent + * @date 2024/03/07 14:41:43 + */ + +import { is } from './utils.js' +import { rad, deg } from './lib/math.js' + +function norm(a) { + return a[0] * a[0] + a[1] * a[1] } -;(function (matrixproto) { - /*\ - * Matrix.add - [ method ] - ** - * Adds the given matrix to existing one - - a (number) - - b (number) - - c (number) - - d (number) - - e (number) - - f (number) - * or - - matrix (object) @Matrix - \*/ - matrixproto.add = function (a, b, c, d, e, f) { +function normalize(a) { + let mag = Math.sqrt(norm(a)) + a[0] && (a[0] /= mag) + a[1] && (a[1] /= mag) +} + +export class Matrix { + a = 1 + b = 0 + c = 0 + d = 1 + e = 0 + f = 0 + + constructor(a, b, c, d, e, f) { + if (b === void 0 && is(a, 'SVGMatrix')) { + this.a = a.a + this.b = a.b + this.c = a.c + this.d = a.d + this.e = a.e + this.f = a.f + return + } + if (a !== void 0) { + this.a = +a + this.b = +b + this.c = +c + this.d = +d + this.e = +e + this.f = +f + } + } + + /** + * Adds the given matrix to existing one + */ + add(a, b, c, d, e, f) { if (a && a instanceof Matrix) { return this.add(a.a, a.b, a.c, a.d, a.e, a.f) } @@ -72,21 +62,11 @@ function Matrix(a, b, c, d, e, f) { this.b = bNew return this } - /*\ - * Matrix.multLeft - [ method ] - ** - * Multiplies a passed affine transform to the left: M * this. - - a (number) - - b (number) - - c (number) - - d (number) - - e (number) - - f (number) - * or - - matrix (object) @Matrix - \*/ - Matrix.prototype.multLeft = function (a, b, c, d, e, f) { + + /** + * Multiplies a passed affine transform to the left: M * this. + */ + multLeft(a, b, c, d, e, f) { if (a && a instanceof Matrix) { return this.multLeft(a.a, a.b, a.c, a.d, a.e, a.f) } @@ -102,16 +82,13 @@ function Matrix(a, b, c, d, e, f) { this.e = eNew return this } - /*\ - * Matrix.invert - [ method ] - ** - * Returns an inverted version of the matrix - = (object) @Matrix - \*/ - matrixproto.invert = function () { - let me = this, - x = me.a * me.d - me.b * me.c + + /** + * Returns an inverted version of the matrix + */ + invert() { + let me = this + let x = me.a * me.d - me.b * me.c return new Matrix( me.d / x, -me.b / x, @@ -121,41 +98,76 @@ function Matrix(a, b, c, d, e, f) { (me.b * me.e - me.a * me.f) / x ) } - /*\ - * Matrix.clone - [ method ] - ** - * Returns a copy of the matrix - = (object) @Matrix - \*/ - matrixproto.clone = function () { + /** + * Returns a copy of the matrix + */ + clone() { return new Matrix(this.a, this.b, this.c, this.d, this.e, this.f) } - /*\ - * Matrix.translate - [ method ] - ** - * Translate the matrix - - x (number) horizontal offset distance - - y (number) vertical offset distance - \*/ - matrixproto.translate = function (x, y) { + /** + * Translate the matrix + * x (number) horizontal offset distance + * y (number) vertical offset distance + */ + translate(x, y) { this.e += x * this.a + y * this.c this.f += x * this.b + y * this.d return this } - /*\ - * Matrix.scale - [ method ] - ** - * Scales the matrix - - x (number) amount to be scaled, with `1` resulting in no change - - y (number) #optional amount to scale along the vertical axis. (Otherwise `x` applies to both axes.) - - cx (number) #optional horizontal origin point from which to scale - - cy (number) #optional vertical origin point from which to scale - * Default cx, cy is the middle point of the element. - \*/ - matrixproto.scale = function (x, y, cx, cy) { + + /** + * Rotates the matrix + * a (number) angle of rotation, in degrees + * x (number) horizontal origin point from which to rotate + * y (number) vertical origin point from which to rotate + */ + rotate(a, x, y) { + a = rad(a) + x = x || 0 + y = y || 0 + let cos = +Math.cos(a).toFixed(9), + sin = +Math.sin(a).toFixed(9) + this.add(cos, sin, -sin, cos, x, y) + return this.add(1, 0, 0, 1, -x, -y) + } + /** + * Skews the matrix along the x-axis + * x (number) Angle to skew along the x-axis (in degrees). + */ + skewX(x) { + return this.skew(x, 0) + } + /** + * Skews the matrix along the y-axis + * y (number) Angle to skew along the y-axis (in degrees). + */ + skewY(y) { + return this.skew(0, y) + } + /** + * Skews the matrix + * y (number) Angle to skew along the y-axis (in degrees). + * x (number) Angle to skew along the x-axis (in degrees). + */ + skew(x, y) { + x = x || 0 + y = y || 0 + x = rad(x) + y = rad(y) + let c = Math.tan(x).toFixed(9) + let b = Math.tan(y).toFixed(9) + return this.add(1, b, c, 1, 0, 0) + } + + /** + * Scales the matrix + * x (number) amount to be scaled, with `1` resulting in no change + * y (number) #optional amount to scale along the vertical axis. (Otherwise `x` applies to both axes.) + * cx (number) #optional horizontal origin point from which to scale + * cy (number) #optional vertical origin point from which to scale + * Default cx, cy is the middle point of the element. + */ + scale(x, y, cx, cy) { y == null && (y = x) ;(cx || cy) && this.translate(cx, cy) this.a *= x @@ -165,89 +177,27 @@ function Matrix(a, b, c, d, e, f) { ;(cx || cy) && this.translate(-cx, -cy) return this } - /*\ - * Matrix.rotate - [ method ] - ** - * Rotates the matrix - - a (number) angle of rotation, in degrees - - x (number) horizontal origin point from which to rotate - - y (number) vertical origin point from which to rotate - \*/ - matrixproto.rotate = function (a, x, y) { - a = Snap.rad(a) - x = x || 0 - y = y || 0 - let cos = +math.cos(a).toFixed(9), - sin = +math.sin(a).toFixed(9) - this.add(cos, sin, -sin, cos, x, y) - return this.add(1, 0, 0, 1, -x, -y) - } - /*\ - * Matrix.skewX - [ method ] - ** - * Skews the matrix along the x-axis - - x (number) Angle to skew along the x-axis (in degrees). - \*/ - matrixproto.skewX = function (x) { - return this.skew(x, 0) - } - /*\ - * Matrix.skewY - [ method ] - ** - * Skews the matrix along the y-axis - - y (number) Angle to skew along the y-axis (in degrees). - \*/ - matrixproto.skewY = function (y) { - return this.skew(0, y) - } - /*\ - * Matrix.skew - [ method ] - ** - * Skews the matrix - - y (number) Angle to skew along the y-axis (in degrees). - - x (number) Angle to skew along the x-axis (in degrees). - \*/ - matrixproto.skew = function (x, y) { - x = x || 0 - y = y || 0 - x = Snap.rad(x) - y = Snap.rad(y) - let c = math.tan(x).toFixed(9) - let b = math.tan(y).toFixed(9) - return this.add(1, b, c, 1, 0, 0) - } - /*\ - * Matrix.x - [ method ] - ** - * Returns x coordinate for given point after transformation described by the matrix. See also @Matrix.y - - x (number) - - y (number) - = (number) x - \*/ - matrixproto.x = function (x, y) { + + /** + * Returns x coordinate for given point after transformation described by the matrix. See also @Matrix.y + * x (number) + * y (number) + */ + x(x, y) { return x * this.a + y * this.c + this.e } - /*\ - * Matrix.y - [ method ] - ** - * Returns y coordinate for given point after transformation described by the matrix. See also @Matrix.x - - x (number) - - y (number) - = (number) y - \*/ - matrixproto.y = function (x, y) { + /* + * Returns y coordinate for given point after transformation described by the matrix. See also @Matrix.x + * x (number) + * y (number) + */ + y(x, y) { return x * this.b + y * this.d + this.f } - matrixproto.get = function (i) { - return +this[Str.fromCharCode(97 + i)].toFixed(4) + get(i) { + return +this[String.fromCharCode(97 + i)].toFixed(4) } - matrixproto.toString = function () { + toString() { return ( 'matrix(' + [ @@ -261,42 +211,29 @@ function Matrix(a, b, c, d, e, f) { ')' ) } - matrixproto.offset = function () { + + offset() { return [this.e.toFixed(4), this.f.toFixed(4)] } - function norm(a) { - return a[0] * a[0] + a[1] * a[1] - } - function normalize(a) { - let mag = math.sqrt(norm(a)) - a[0] && (a[0] /= mag) - a[1] && (a[1] /= mag) - } - /*\ - * Matrix.determinant - [ method ] - ** - * Finds determinant of the given matrix. - = (number) determinant - \*/ - matrixproto.determinant = function () { + + /** + * Finds determinant of the given matrix. + */ + determinant() { return this.a * this.d - this.b * this.c } - /*\ - * Matrix.split - [ method ] - ** - * Splits matrix into primitive transformations - = (object) in format: - o dx (number) translation by x - o dy (number) translation by y - o scalex (number) scale by x - o scaley (number) scale by y - o shear (number) shear - o rotate (number) rotation in deg - o isSimple (boolean) could it be represented via simple transformations - \*/ - matrixproto.split = function () { + /** + * Splits matrix into primitive transformations + = (object) in format: + o dx (number) translation by x + o dy (number) translation by y + o scalex (number) scale by x + o scaley (number) scale by y + o shear (number) shear + o rotate (number) rotation in deg + o isSimple (boolean) could it be represented via simple transformations + */ + split() { let out = {} // translation out.dx = this.e @@ -307,7 +244,7 @@ function Matrix(a, b, c, d, e, f) { [this.a, this.b], [this.c, this.d] ] - out.scalex = math.sqrt(norm(row[0])) + out.scalex = Math.sqrt(norm(row[0])) normalize(row[0]) out.shear = row[0][0] * row[1][0] + row[0][1] * row[1][1] @@ -316,7 +253,7 @@ function Matrix(a, b, c, d, e, f) { row[1][1] - row[0][1] * out.shear ] - out.scaley = math.sqrt(norm(row[1])) + out.scaley = Math.sqrt(norm(row[1])) normalize(row[1]) out.shear /= out.scaley @@ -328,12 +265,12 @@ function Matrix(a, b, c, d, e, f) { let sin = row[0][1], cos = row[1][1] if (cos < 0) { - out.rotate = Snap.deg(math.acos(cos)) + out.rotate = deg(Math.acos(cos)) if (sin < 0) { out.rotate = 360 - out.rotate } } else { - out.rotate = Snap.deg(math.asin(sin)) + out.rotate = deg(Math.asin(sin)) } out.isSimple = @@ -346,23 +283,19 @@ function Matrix(a, b, c, d, e, f) { out.noRotation = !+out.shear.toFixed(9) && !out.rotate return out } - /*\ - * Matrix.toTransformString - [ method ] - ** - * Returns transform string that represents given matrix - = (string) transform string - \*/ - matrixproto.toTransformString = function (shorter) { + /** + * Returns transform string that represents given matrix + */ + toTransformString(shorter) { let s = shorter || this.split() if (!+s.shear.toFixed(9)) { s.scalex = +s.scalex.toFixed(4) s.scaley = +s.scaley.toFixed(4) s.rotate = +s.rotate.toFixed(4) return ( - (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.scalex != 1 || s.scaley != 1 ? 's' + [s.scalex, s.scaley, 0, 0] : E) + (s.dx || s.dy ? 't' + [+s.dx.toFixed(4), +s.dy.toFixed(4)] : '') + + (s.rotate ? 'r' + [+s.rotate.toFixed(4), 0, 0] : '') + + (s.scalex != 1 || s.scaley != 1 ? 's' + [s.scalex, s.scaley, 0, 0] : '') ) } else { return ( @@ -378,32 +311,4 @@ function Matrix(a, b, c, d, e, f) { ) } } -})(Matrix.prototype) -/*\ - * Snap.Matrix - [ method ] - ** - * Matrix constructor, extend on your own risk. - * To create matrices use @Snap.matrix. - \*/ -Snap.Matrix = Matrix -/*\ - * Snap.matrix - [ method ] - ** - * Utility method - ** - * Returns a matrix based on the given parameters - - a (number) - - b (number) - - c (number) - - d (number) - - e (number) - - f (number) - * or - - svgMatrix (SVGMatrix) - = (object) @Matrix - \*/ -Snap.matrix = function (a, b, c, d, e, f) { - return new Matrix(a, b, c, d, e, f) } diff --git a/src/paper.js b/src/paper.js index e1131a7..ee958d6 100644 --- a/src/paper.js +++ b/src/paper.js @@ -1,18 +1,11 @@ -// Copyright (c) 2013 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. +/** + * {} + * @author yutent + * @date 2024/03/07 15:22:51 + */ + import eve from './eve.js' -import { Snap, SnapElement, Paper, Fragment, make, wrap } from './svg.js' +import { Snap, SnapElement, Paper, make } from './svg.js' import { $, is, uuid, preload } from './utils.js' import { doc, win } from './lib/constants.js' diff --git a/src/set.js b/src/set.js index 530e078..8b6131e 100644 --- a/src/set.js +++ b/src/set.js @@ -1,18 +1,11 @@ -// Copyright (c) 2013 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. +/** + * {} + * @author yutent + * @date 2024/03/07 15:33:05 + */ + import eve from './eve.js' -import { Snap, SnapElement, Paper, Fragment } from './svg.js' +import { Animation } from './animation.js' import mina from './mina.js' import { is } from './utils.js' @@ -85,33 +78,30 @@ setproto.forEach = function (callback, thisArg) { } return this } -/*\ - * Set.animate - [ method ] - ** - * Animates each element in set in sync. - * - ** - - attrs (object) key-value pairs of destination attributes - - duration (number) duration of the animation in milliseconds - - easing (function) #optional easing function from @mina or custom - - callback (function) #optional callback function that executes when the animation ends - * or - - animation (array) array of animation parameter for each element in set in format `[attrs, duration, easing, callback]` - > Usage - | // animate all elements in set to radius 10 - | set.animate({r: 10}, 500, mina.easein); - | // or - | // 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]); - = (SnapElement) the current element - \*/ +/** + * Animates each element in set in sync. + * + ** + - attrs (object) key-value pairs of destination attributes + - duration (number) duration of the animation in milliseconds + - easing (function) #optional easing function from @mina or custom + - callback (function) #optional callback function that executes when the animation ends + * or + - animation (array) array of animation parameter for each element in set in format `[attrs, duration, easing, callback]` + > Usage + | // animate all elements in set to radius 10 + | set.animate({r: 10}, 500, mina.easein); + | // or + | // 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]); + = (SnapElement) the current element +*/ setproto.animate = function (attrs, ms, easing, callback) { if (typeof easing == 'function' && !easing.length) { callback = easing easing = mina.linear } - if (attrs instanceof Snap._.Animation) { + if (attrs instanceof Animation) { callback = attrs.callback easing = attrs.easing ms = easing.dur @@ -147,24 +137,17 @@ setproto.animate = function (attrs, ms, easing, callback) { } }) } -/*\ - * Set.remove - [ method ] - ** - * Removes all children of the set. - * - = (object) Set object - \*/ +/** + * Removes all children of the set. + * + */ setproto.remove = function () { while (this.length) { this.pop().remove() } return this } -/*\ - * Set.bind - [ method ] - ** +/** * Specifies how to handle a specific attribute when applied * to a set. * @@ -179,7 +162,7 @@ setproto.remove = function () { - element (SnapElement) specific element in the set to apply the attribute to - eattr (string) attribute on the element to bind the attribute to = (object) Set object - \*/ + */ setproto.bind = function (attr, a, b) { let data = {} if (typeof a == 'function') { @@ -193,13 +176,9 @@ setproto.bind = function (attr, a, b) { } return this } -/*\ - * Set.attr - [ method ] - ** - * Equivalent of @SnapElement.attr. - = (object) Set object - \*/ +/** + * Equivalent of @SnapElement.attr. + */ setproto.attr = function (value) { let unbound = {} for (let k in value) { @@ -214,28 +193,21 @@ setproto.attr = function (value) { } return this } -/*\ - * Set.clear - [ method ] - ** - * Removes all elements from the set - \*/ +/** + * Removes all elements from the set + */ setproto.clear = function () { while (this.length) { this.pop() } } -/*\ - * Set.splice - [ method ] - ** - * Removes range of elements from the set - ** - - index (number) position of the deletion - - count (number) number of element to remove - - insertion… (object) #optional elements to insert - = (object) set elements that were deleted - \*/ +/** + * Removes range of elements from the set + ** + * index (number) position of the deletion + * count (number) number of element to remove + * insertion… (object) #optional elements to insert + */ setproto.splice = function (index, count, insertion) { index = index < 0 ? mmax(this.length + index, 0) : index count = mmax(0, mmin(this.length - index, count)) @@ -263,15 +235,11 @@ setproto.splice = function (index, count, insertion) { } return new Set(todel) } -/*\ - * Set.exclude - [ method ] - ** - * Removes given element from the set - ** - - element (object) element to remove - = (boolean) `true` if object was found and removed from the set - \*/ +/** + * Removes given element from the set + ** + * element (object) element to remove + */ setproto.exclude = function (el) { for (let i = 0, ii = this.length; i < ii; i++) if (this[i] == el) { @@ -280,15 +248,11 @@ setproto.exclude = function (el) { } return false } -/*\ - * Set.insertAfter - [ method ] - ** - * Inserts set elements after given element. - ** - - element (object) set will be inserted after this element - = (object) Set object - \*/ +/** + * Inserts set elements after given element. + ** + * element (object) set will be inserted after this element + */ setproto.insertAfter = function (el) { let i = this.items.length while (i--) { @@ -296,13 +260,9 @@ setproto.insertAfter = function (el) { } return this } -/*\ - * Set.getBBox - [ method ] - ** - * Union of all bboxes of the set. See @SnapElement.getBBox. - = (object) bounding box descriptor. See @SnapElement.getBBox. - \*/ +/** + * Union of all bboxes of the set. See @SnapElement.getBBox. + */ setproto.getBBox = function () { let x = [], y = [], @@ -331,14 +291,9 @@ setproto.getBBox = function () { cy: y + (y2 - y) / 2 } } -/*\ - * Set.insertAfter - [ method ] - ** - * Creates a clone of the set. - ** - = (object) New Set object - \*/ +/** + * Creates a clone of the set. + */ setproto.clone = function (s) { s = new Set() for (let i = 0, ii = this.items.length; i < ii; i++) { @@ -346,33 +301,21 @@ setproto.clone = function (s) { } return s } -setproto.toString = function () { - return 'Snap\u2018s set' -} + setproto.type = 'set' -// export -/*\ - * Snap.Set - [ property ] - ** - * Set constructor. - \*/ -Snap.Set = Set -/*\ - * Snap.set - [ method ] - ** - * Creates a set and fills it with list of arguments. - ** - = (object) New Set object - | let r = paper.rect(0, 0, 10, 10), - | s1 = Snap.set(), // empty set - | s2 = Snap.set(r, paper.circle(100, 100, 20)); // prefilled set - \*/ -Snap.set = function () { + +/** + * Creates a set and fills it with list of arguments. + ** + = (object) New Set object + | let r = paper.rect(0, 0, 10, 10), + | s1 = createSet(), // empty set + | s2 = createSet(r, paper.circle(100, 100, 20)); // prefilled set +*/ +export function createSet(...args) { let set = new Set() - if (arguments.length) { - set.push.apply(set, Array.prototype.slice.call(arguments, 0)) + if (args.length) { + set.push.apply(set, args) } return set } diff --git a/src/svg.js b/src/svg.js index 851e64c..67488f0 100644 --- a/src/svg.js +++ b/src/svg.js @@ -22,6 +22,8 @@ import { PATH_VALUES } from './lib/constants.js' +import { Matrix } from './matrix.js' + import { $, is, @@ -276,7 +278,7 @@ export class Snap { \*/ static selectAll(query = '') { let nodelist = doc.querySelectorAll(query), - set = (Snap.set || Array)() + set = [] for (let i = 0; i < nodelist.length; i++) { set.push(wrap(nodelist[i])) } @@ -309,9 +311,7 @@ export class Snap { if (w.nodeType) { return wrap(w) } - if (is(w, 'array') && Snap.set) { - return Snap.set.apply(Snap, w) - } + if (w instanceof SnapElement) { return w } @@ -465,7 +465,7 @@ Snap._.rgTransform = /^[a-z][\s]*-?\.?\d/i function transform2matrix(tstr, bbox) { let tdata = parseTransformString(tstr), - m = new Snap.Matrix() + m = new Matrix() if (tdata) { for (let i = 0, ii = tdata.length; i < ii; i++) { let t = tdata[i], @@ -1344,6 +1344,10 @@ export class SnapElement { return out[0] } + equal(name, b) { + return eve('snap.util.equal', this, name, b).firstDefined() + } + addClass(value) { this.node.classList.add(value) return this