From c714af4a11def50a9bdc51ad1ef0fba499779000 Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 7 Mar 2024 16:04:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E5=A4=A7=E6=B3=A2=E7=B2=BE=E7=AE=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/animation.js | 54 +++---- src/attradd.js | 15 +- src/filter.js | 397 ++++++++++++++++++----------------------------- src/svg.js | 57 ++++--- 4 files changed, 208 insertions(+), 315 deletions(-) diff --git a/src/animation.js b/src/animation.js index 7142246..7eedfd7 100644 --- a/src/animation.js +++ b/src/animation.js @@ -1,16 +1,8 @@ -// Copyright (c) 2016 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:46:18 + */ import eve from './eve.js' import { SnapElement } from './svg.js' @@ -20,6 +12,7 @@ import { is } from './utils.js' let elproto = SnapElement.prototype, Str = String, has = 'hasOwnProperty' + function slice(from, to, f) { return function (arr) { let res = arr.slice(from, to) @@ -29,17 +22,18 @@ function slice(from, to, f) { return f ? f(res) : res } } -let Animation = function (attr, ms, easing, callback) { - if (typeof easing == 'function' && !easing.length) { - callback = easing - easing = mina.linear +export class Animation { + constructor(attr, ms, easing, callback) { + if (typeof easing === 'function' && !easing.length) { + callback = easing + easing = mina.linear + } + this.attr = attr + this.dur = ms + easing && (this.easing = easing) + callback && (this.callback = callback) } - this.attr = attr - this.dur = ms - easing && (this.easing = easing) - callback && (this.callback = callback) } -export { Animation } /** * Creates an animation object ** @@ -54,14 +48,14 @@ export function createAnimation(attr, ms, easing, callback) { /** * 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 - } += (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 diff --git a/src/attradd.js b/src/attradd.js index f4f589f..f28fc50 100644 --- a/src/attradd.js +++ b/src/attradd.js @@ -20,19 +20,16 @@ let operators = { return x * y } }, - Str = String, reUnit = /[a-z]+$/i, reAddon = /^\s*([+\-\/*])\s*=\s*([\d.eE+\-]+)\s*([^\d\s]+)?\s*$/ -function getNumber(val) { - return val -} + function getUnit(unit) { return function (val) { return +val.toFixed(3) + unit } } eve.on('snap.util.attr', function (val) { - let plus = Str(val).match(reAddon) + let plus = String(val).match(reAddon) if (plus) { let evnt = eve.nt(), name = evnt.substring(evnt.lastIndexOf('.') + 1), @@ -59,15 +56,15 @@ eve.on('snap.util.attr', function (val) { eve.on('snap.util.equal', function (name, b) { let A, B, - a = Str(this.attr(name) || ''), + a = String(this.attr(name) || ''), el = this, - bplus = Str(b).match(reAddon) + bplus = String(b).match(reAddon) if (bplus) { eve.stop() let unit = bplus[3] || '', aUnit = a.match(reUnit), op = operators[bplus[1]] - if (aUnit && aUnit == unit) { + if (aUnit && aUnit === unit) { return { from: +a, to: op(+a, +bplus[2]), @@ -78,7 +75,7 @@ eve.on('snap.util.equal', function (name, b) { return { from: a, to: op(a, this.asPX(name, bplus[2] + unit)), - f: getNumber + f: _ => _ } } } diff --git a/src/filter.js b/src/filter.js index 9bc866c..4c66b97 100644 --- a/src/filter.js +++ b/src/filter.js @@ -1,32 +1,23 @@ -// 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 16:04:23 + */ + import eve from './eve.js' -import { Snap, SnapElement } from './svg.js' -import { $ } from './utils.js' +import { select, SnapElement } from './svg.js' +import { $, url } from './utils.js' import { parseColor } from './lib/color.js' let rgurl = /^\s*url\((.+)\)/, Str = String -Snap.filter = {} - eve.on('snap.util.getattr.filter', function () { eve.stop() let p = $(this.node, 'filter') if (p) { let match = Str(p).match(rgurl) - return match && Snap.select(match[1]) + return match && select(match[1]) } }) eve.on('snap.util.attr.filter', function (value) { @@ -38,7 +29,7 @@ eve.on('snap.util.attr.filter', function (value) { id = value.id } $(this.node, { - filter: Snap.url(id) + filter: url(id) }) } if (!value || value == 'none') { @@ -46,240 +37,152 @@ eve.on('snap.util.attr.filter', function (value) { this.node.removeAttribute('filter') } }) -/*\ - * Snap.filter.blur - [ method ] - ** - * Returns an SVG markup string for the blur filter - ** - - x (number) amount of horizontal blur, in pixels - - y (number) #optional amount of vertical blur, in pixels - = (string) filter representation - > Usage - | let f = paper.filter(Snap.filter.blur(5, 10)), - | c = paper.circle(10, 10, 10).attr({ - | filter: f - | }); - \*/ -Snap.filter.blur = function (x, y) { - if (x == null) { - x = 2 - } - let def = y == null ? x : [x, y] - return `` -} -Snap.filter.blur.toString = function () { - return this() -} -/*\ - * Snap.filter.shadow - [ method ] - ** - * Returns an SVG markup string for the shadow filter - ** - - dx (number) #optional horizontal shift of the shadow, in pixels - - dy (number) #optional vertical shift of the shadow, in pixels - - blur (number) #optional amount of blur - - color (string) #optional color of the shadow - - opacity (number) #optional `0..1` opacity of the shadow - * or - - dx (number) #optional horizontal shift of the shadow, in pixels - - dy (number) #optional vertical shift of the shadow, in pixels - - color (string) #optional color of the shadow - - opacity (number) #optional `0..1` opacity of the shadow - * which makes blur default to `4`. Or - - dx (number) #optional horizontal shift of the shadow, in pixels - - dy (number) #optional vertical shift of the shadow, in pixels - - opacity (number) #optional `0..1` opacity of the shadow - = (string) filter representation - > Usage - | let f = paper.filter(Snap.filter.shadow(0, 2, .3)), - | c = paper.circle(10, 10, 10).attr({ - | filter: f - | }); - \*/ -Snap.filter.shadow = function (dx, dy, blur, color, opacity) { - if (opacity == null) { - if (color == null) { - opacity = blur - blur = 4 - color = '#000' - } else { - opacity = color - color = blur - blur = 4 + +export const filter = { + /** + * Returns an SVG markup string for the blur filter + ** + - x (number) amount of horizontal blur, in pixels + - y (number) #optional amount of vertical blur, in pixels + = (string) filter representation + > Usage + | let f = paper.filter(filter.blur(5, 10)), + | c = paper.circle(10, 10, 10).attr({ + | filter: f + | }); + */ + blur(x, y) { + if (x == null) { + x = 2 } - } - if (blur == null) { - blur = 4 - } - if (opacity == null) { - opacity = 1 - } - if (dx == null) { - dx = 0 - dy = 2 - } - if (dy == null) { - dy = dx - } - color = parseColor(color) - return `` -} -Snap.filter.shadow.toString = function () { - return this() -} -/*\ - * Snap.filter.grayscale - [ method ] - ** + let def = y == null ? x : [x, y] + return `` + }, + + /** + * Returns an SVG markup string for the shadow filter + ** + - dx (number) #optional horizontal shift of the shadow, in pixels + - dy (number) #optional vertical shift of the shadow, in pixels + - blur (number) #optional amount of blur + - color (string) #optional color of the shadow + - opacity (number) #optional `0..1` opacity of the shadow + * or + - dx (number) #optional horizontal shift of the shadow, in pixels + - dy (number) #optional vertical shift of the shadow, in pixels + - color (string) #optional color of the shadow + - opacity (number) #optional `0..1` opacity of the shadow + * which makes blur default to `4`. Or + - dx (number) #optional horizontal shift of the shadow, in pixels + - dy (number) #optional vertical shift of the shadow, in pixels + - opacity (number) #optional `0..1` opacity of the shadow + = (string) filter representation + > Usage + let f = paper.filter(filter.shadow(0, 2, .3)), + c = paper.circle(10, 10, 10).attr({ + filter: f + }); + */ + shadow(dx = 0, dy = 2, blur = 4, color = '#000', opacity = 1) { + color = parseColor(color) + return `` + }, + + /** * Returns an SVG markup string for the grayscale filter ** - - amount (number) amount of filter (`0..1`) - = (string) filter representation - \*/ -Snap.filter.grayscale = function (amount) { - if (amount == null) { - amount = 1 - } + - amount (number) amount of filter (`0..1`) + = (string) filter representation + */ + grayscale(amount = 1) { + let a = 0.2126 + 0.7874 * (1 - amount) + let b = 0.7152 - 0.7152 * (1 - amount) + let c = 0.0722 - 0.0722 * (1 - amount) + let d = 0.2126 - 0.2126 * (1 - amount) + let e = 0.7152 + 0.2848 * (1 - amount) + let f = 0.0722 - 0.0722 * (1 - amount) + let g = 0.2126 - 0.2126 * (1 - amount) + let h = 0.0722 + 0.9278 * (1 - amount) - let a = 0.2126 + 0.7874 * (1 - amount) - let b = 0.7152 - 0.7152 * (1 - amount) - let c = 0.0722 - 0.0722 * (1 - amount) - let d = 0.2126 - 0.2126 * (1 - amount) - let e = 0.7152 + 0.2848 * (1 - amount) - let f = 0.0722 - 0.0722 * (1 - amount) - let g = 0.2126 - 0.2126 * (1 - amount) - let h = 0.0722 + 0.9278 * (1 - amount) + return `` + }, - return `` -} -Snap.filter.grayscale.toString = function () { - return this() -} -/*\ - * Snap.filter.sepia - [ method ] - ** - * Returns an SVG markup string for the sepia filter - ** - - amount (number) amount of filter (`0..1`) - = (string) filter representation - \*/ -Snap.filter.sepia = function (amount) { - if (amount == null) { - amount = 1 - } + /** + * Returns an SVG markup string for the sepia filter + ** + - amount (number) amount of filter (`0..1`) + = (string) filter representation + */ + sepia(amount = 1) { + let a = 0.393 + 0.607 * (1 - amount) + let b = 0.769 - 0.769 * (1 - amount) + let c = 0.189 - 0.189 * (1 - amount) + let d = 0.349 - 0.349 * (1 - amount) + let e = 0.686 + 0.314 * (1 - amount) + let f = 0.168 - 0.168 * (1 - amount) + let g = 0.272 - 0.272 * (1 - amount) + let h = 0.534 - 0.534 * (1 - amount) + let i = 0.131 + 0.869 * (1 - amount) - let a = 0.393 + 0.607 * (1 - amount) - let b = 0.769 - 0.769 * (1 - amount) - let c = 0.189 - 0.189 * (1 - amount) - let d = 0.349 - 0.349 * (1 - amount) - let e = 0.686 + 0.314 * (1 - amount) - let f = 0.168 - 0.168 * (1 - amount) - let g = 0.272 - 0.272 * (1 - amount) - let h = 0.534 - 0.534 * (1 - amount) - let i = 0.131 + 0.869 * (1 - amount) + return `` + }, - return `` -} -Snap.filter.sepia.toString = function () { - return this() -} -/*\ - * Snap.filter.saturate - [ method ] - ** - * Returns an SVG markup string for the saturate filter - ** - - amount (number) amount of filter (`0..1`) - = (string) filter representation - \*/ -Snap.filter.saturate = function (amount) { - if (amount == null) { - amount = 1 - } - return `` -} -Snap.filter.saturate.toString = function () { - return this() -} -/*\ - * Snap.filter.hueRotate - [ method ] - ** - * Returns an SVG markup string for the hue-rotate filter - ** - - angle (number) angle of rotation - = (string) filter representation - \*/ -Snap.filter.hueRotate = function (angle) { - angle = angle || 0 - return `` -} -Snap.filter.hueRotate.toString = function () { - return this() -} -/*\ - * Snap.filter.invert - [ method ] - ** - * Returns an SVG markup string for the invert filter - ** - - amount (number) amount of filter (`0..1`) - = (string) filter representation - \*/ -Snap.filter.invert = function (amount) { - if (amount == null) { - amount = 1 - } - // - return `` -} -Snap.filter.invert.toString = function () { - return this() -} -/*\ - * Snap.filter.brightness - [ method ] - ** - * Returns an SVG markup string for the brightness filter - ** - - amount (number) amount of filter (`0..1`) - = (string) filter representation - \*/ -Snap.filter.brightness = function (amount) { - if (amount == null) { - amount = 1 - } - return `` -} -Snap.filter.brightness.toString = function () { - return this() -} -/*\ - * Snap.filter.contrast - [ method ] - ** - * Returns an SVG markup string for the contrast filter - ** - - amount (number) amount of filter (`0..1`) - = (string) filter representation - \*/ -Snap.filter.contrast = function (amount) { - if (amount == null) { - amount = 1 - } - let amount2 = 0.5 - amount / 2 - return `` -} + /** + * Returns an SVG markup string for the saturate filter + ** + - amount (number) amount of filter (`0..1`) + = (string) filter representation + */ + saturate(amount = 1) { + return `` + }, -Snap.filter.contrast.toString = function () { - return this() + /** + * Returns an SVG markup string for the hue-rotate filter + ** + - angle (number) angle of rotation + = (string) filter representation + */ + hueRotate(angle) { + angle = angle || 0 + return `` + }, + + /** + * Returns an SVG markup string for the invert filter + ** + - amount (number) amount of filter (`0..1`) + = (string) filter representation + */ + invert(amount = 1) { + // + return `` + }, + + /** + * Returns an SVG markup string for the brightness filter + ** + - amount (number) amount of filter (`0..1`) + = (string) filter representation + */ + brightness(amount = 1) { + return `` + }, + + /** + * Returns an SVG markup string for the contrast filter + ** + - amount (number) amount of filter (`0..1`) + = (string) filter representation + */ + contrast(amount = 1) { + let amount2 = 0.5 - amount / 2 + return `` + } } diff --git a/src/svg.js b/src/svg.js index 67488f0..a36ba8d 100644 --- a/src/svg.js +++ b/src/svg.js @@ -70,6 +70,32 @@ export function wrap(dom) { return new SnapElement(dom) } +/*\ + ** + * Wraps a DOM element specified by CSS selector as @SnapElement + - query (string) CSS selector of the element + = (SnapElement) the current element +\*/ +export function select(query = '') { + query = query.replace(/([^\\]):/g, '$1\\:') + return wrap(doc.querySelector(query)) +} +/*\ + +** +* Wraps DOM elements specified by CSS selector as set or array of @SnapElement +- query (string) CSS selector of the element += (SnapElement) the current element +\*/ +export function selectAll(query = '') { + let nodelist = doc.querySelectorAll(query), + set = [] + for (let i = 0; i < nodelist.length; i++) { + set.push(wrap(nodelist[i])) + } + return set +} + export class Fragment { constructor(frag) { this.node = frag @@ -261,32 +287,6 @@ export class Snap { /*\ ** - * Wraps a DOM element specified by CSS selector as @SnapElement - - query (string) CSS selector of the element - = (SnapElement) the current element -\*/ - static select(query = '') { - query = query.replace(/([^\\]):/g, '$1\\:') - return wrap(doc.querySelector(query)) - } - /*\ - - ** - * Wraps DOM elements specified by CSS selector as set or array of @SnapElement - - query (string) CSS selector of the element - = (SnapElement) the current element -\*/ - static selectAll(query = '') { - let nodelist = doc.querySelectorAll(query), - set = [] - for (let i = 0; i < nodelist.length; i++) { - set.push(wrap(nodelist[i])) - } - return set - } - - /*\ - ** * Returns you topmost element under given point. ** = (object) Snap element object @@ -538,7 +538,7 @@ export function getSomeDefs(el) { let p = (el.node.ownerSVGElement && wrap(el.node.ownerSVGElement)) || (el.node.parentNode && wrap(el.node.parentNode)) || - Snap.select('svg') || + select('svg') || new Snap(0, 0), pdefs = p.select('defs'), defs = pdefs == null ? false : pdefs.node @@ -550,8 +550,7 @@ export function getSomeDefs(el) { function getSomeSVG(el) { return ( - (el.node.ownerSVGElement && wrap(el.node.ownerSVGElement)) || - Snap.select('svg') + (el.node.ownerSVGElement && wrap(el.node.ownerSVGElement)) || select('svg') ) }