一大波精简
parent
15de4b4cdd
commit
c714af4a11
|
|
@ -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<yutent.io@gmail.com>
|
||||
* @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,8 +22,9 @@ function slice(from, to, f) {
|
|||
return f ? f(res) : res
|
||||
}
|
||||
}
|
||||
let Animation = function (attr, ms, easing, callback) {
|
||||
if (typeof easing == 'function' && !easing.length) {
|
||||
export class Animation {
|
||||
constructor(attr, ms, easing, callback) {
|
||||
if (typeof easing === 'function' && !easing.length) {
|
||||
callback = easing
|
||||
easing = mina.linear
|
||||
}
|
||||
|
|
@ -38,8 +32,8 @@ let Animation = function (attr, ms, easing, callback) {
|
|||
this.dur = ms
|
||||
easing && (this.easing = easing)
|
||||
callback && (this.callback = callback)
|
||||
}
|
||||
}
|
||||
export { Animation }
|
||||
/**
|
||||
* Creates an animation object
|
||||
**
|
||||
|
|
@ -54,7 +48,7 @@ export function createAnimation(attr, ms, easing, callback) {
|
|||
/**
|
||||
* Returns a set of animations that may be able to manipulate the current element
|
||||
**
|
||||
= (object) in format:
|
||||
= (object) in format:
|
||||
{
|
||||
anim (object) animation object,
|
||||
mina (object) @mina object,
|
||||
|
|
|
|||
|
|
@ -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: _ => _
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
219
src/filter.js
219
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<yutent.io@gmail.com>
|
||||
* @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,35 +37,29 @@ eve.on('snap.util.attr.filter', function (value) {
|
|||
this.node.removeAttribute('filter')
|
||||
}
|
||||
})
|
||||
/*\
|
||||
* Snap.filter.blur
|
||||
[ method ]
|
||||
**
|
||||
|
||||
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(Snap.filter.blur(5, 10)),
|
||||
| let f = paper.filter(filter.blur(5, 10)),
|
||||
| c = paper.circle(10, 10, 10).attr({
|
||||
| filter: f
|
||||
| });
|
||||
\*/
|
||||
Snap.filter.blur = function (x, y) {
|
||||
*/
|
||||
blur(x, y) {
|
||||
if (x == null) {
|
||||
x = 2
|
||||
}
|
||||
let def = y == null ? x : [x, y]
|
||||
return `<feGaussianBlur stdDeviation="${def}"/>`
|
||||
}
|
||||
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
|
||||
|
|
@ -93,56 +78,23 @@ Snap.filter.blur.toString = function () {
|
|||
- 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
|
||||
}
|
||||
}
|
||||
if (blur == null) {
|
||||
blur = 4
|
||||
}
|
||||
if (opacity == null) {
|
||||
opacity = 1
|
||||
}
|
||||
if (dx == null) {
|
||||
dx = 0
|
||||
dy = 2
|
||||
}
|
||||
if (dy == null) {
|
||||
dy = dx
|
||||
}
|
||||
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 `<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 () {
|
||||
return this()
|
||||
}
|
||||
/*\
|
||||
* Snap.filter.grayscale
|
||||
[ method ]
|
||||
**
|
||||
},
|
||||
|
||||
/**
|
||||
* 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
|
||||
}
|
||||
|
||||
*/
|
||||
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)
|
||||
|
|
@ -153,24 +105,15 @@ Snap.filter.grayscale = function (amount) {
|
|||
let 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 () {
|
||||
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
|
||||
}
|
||||
|
||||
*/
|
||||
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)
|
||||
|
|
@ -182,57 +125,36 @@ Snap.filter.sepia = function (amount) {
|
|||
let 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 () {
|
||||
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
|
||||
}
|
||||
*/
|
||||
saturate(amount = 1) {
|
||||
return `<feColorMatrix type="saturate" values="${1 - amount}"/>`
|
||||
}
|
||||
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) {
|
||||
*/
|
||||
hueRotate(angle) {
|
||||
angle = angle || 0
|
||||
return `<feColorMatrix type="hueRotate" values="${angle}"/>`
|
||||
}
|
||||
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
|
||||
}
|
||||
*/
|
||||
invert(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"/>
|
||||
return `<feComponentTransfer><feFuncR type="table" tableValues="${amount} ${
|
||||
1 - amount
|
||||
|
|
@ -241,45 +163,26 @@ Snap.filter.invert = function (amount) {
|
|||
}"/><feFuncB type="table" tableValues="${amount} ${
|
||||
1 - amount
|
||||
}"/></feComponentTransfer>`
|
||||
}
|
||||
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
|
||||
}
|
||||
*/
|
||||
brightness(amount = 1) {
|
||||
return `<feComponentTransfer><feFuncR type="linear" slope="${amount}"/><feFuncG type="linear" slope="${amount}"/><feFuncB type="linear" slope="${amount}"/></feComponentTransfer>`
|
||||
}
|
||||
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
|
||||
}
|
||||
*/
|
||||
contrast(amount = 1) {
|
||||
let amount2 = 0.5 - amount / 2
|
||||
return `<feComponentTransfer><feFuncR type="linear" slope="${amount}" intercept="${amount2}"/><feFuncG type="linear" slope="${amount}" intercept="${amount2}"/><feFuncB type="linear" slope="${amount}" intercept="${amount2}"/></feComponentTransfer>`
|
||||
}
|
||||
|
||||
Snap.filter.contrast.toString = function () {
|
||||
return this()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
57
src/svg.js
57
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')
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue