一大波精简

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");
+ * @author yutent<yutent.io@gmail.com>
-// you may not use this file except in compliance with the License.
+ * @date 2024/03/07 15:46:18
-// 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 { 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) {
+export class Animation {
-  if (typeof easing == 'function' && !easing.length) {
+  constructor(attr, ms, easing, callback) {
-    callback = easing
+    if (typeof easing === 'function' && !easing.length) {
-    easing = mina.linear
+      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:
+= (object) in format:
-   {
+  {
-       anim (object) animation object,
+    anim (object) animation object,
-       mina (object) @mina object,
+    mina (object) @mina object,
-       curStatus (number) 0..1 — status of the animation: 0 — just started, 1 — just finished,
+    curStatus (number) 0..1 — status of the animation: 0 — just started, 1 — just finished,
-       status (function) gets or sets the status of the animation,
+    status (function) gets or sets the status of the animation,
-       stop (function) stops the animation
+    stop (function) stops the animation
-   }
+  }
 */
 elproto.inAnim = function () {
   let el = this

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: _ => _
       }
     }
   }

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");
+ * @author yutent<yutent.io@gmail.com>
-// you may not use this file except in compliance with the License.
+ * @date 2024/03/07 16:04:23
-// 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 { Snap, SnapElement } from './svg.js'
+import { select, SnapElement } from './svg.js'
-import { $ } from './utils.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
+export const filter = {
-     [ method ]
+  /**
-     **
+   * Returns an SVG markup string for the blur filter
-     * Returns an SVG markup string for the blur filter
+   **
-     **
+    - x (number) amount of horizontal blur, in pixels
-     - x (number) amount of horizontal blur, in pixels
+    - y (number) #optional amount of vertical blur, in pixels
-     - y (number) #optional amount of vertical blur, in pixels
+    = (string) filter representation
-     = (string) filter representation
+    > Usage
-     > Usage
+    | let f = paper.filter(filter.blur(5, 10)),
-     | let f = paper.filter(Snap.filter.blur(5, 10)),
+    |     c = paper.circle(10, 10, 10).attr({
-     |     c = paper.circle(10, 10, 10).attr({
+    |         filter: f
-     |         filter: f
+    |     });
-     |     });
+  */
-    \*/
+  blur(x, y) {
-Snap.filter.blur = function (x, y) {
+    if (x == null) {
-  if (x == null) {
+      x = 2
-    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
-     - 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
     }
-  }
+    let def = y == null ? x : [x, y]
-  if (blur == null) {
+    return `<feGaussianBlur stdDeviation="${def}"/>`
-    blur = 4
+  },
-  }
+
-  if (opacity == null) {
+  /**
-    opacity = 1
+   * Returns an SVG markup string for the shadow filter
-  }
+   **
-  if (dx == null) {
+    - dx (number) #optional horizontal shift of the shadow, in pixels
-    dx = 0
+    - dy (number) #optional vertical shift of the shadow, in pixels
-    dy = 2
+    - blur (number) #optional amount of blur
-  }
+    - color (string) #optional color of the shadow
-  if (dy == null) {
+    - opacity (number) #optional `0..1` opacity of the shadow
-    dy = dx
+    * or
-  }
+    - dx (number) #optional horizontal shift of the shadow, in pixels
-  color = parseColor(color)
+    - dy (number) #optional vertical shift of the shadow, in pixels
-  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>`
+    - color (string) #optional color of the shadow
-}
+    - opacity (number) #optional `0..1` opacity of the shadow
-Snap.filter.shadow.toString = function () {
+    * which makes blur default to `4`. Or
-  return this()
+    - 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
-     * Snap.filter.grayscale
+    = (string) filter representation
-     [ method ]
+    > 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 `<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>`
+  },
+
+  /**
      * Returns an SVG markup string for the grayscale filter
      **
-     - amount (number) amount of filter (`0..1`)
+      - amount (number) amount of filter (`0..1`)
-     = (string) filter representation
+      = (string) filter representation
-    \*/
+    */
-Snap.filter.grayscale = function (amount) {
+  grayscale(amount = 1) {
-  if (amount == null) {
+    let a = 0.2126 + 0.7874 * (1 - amount)
-    amount = 1
+    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)
+    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"/>`
-  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 `<feColorMatrix type="matrix" values="${a} ${b} ${c} 0 0 ${d} ${e} ${f} 0 0 ${g} ${b} ${h} 0 0 0 0 0 1 0"/>`
+  /**
-}
+       * Returns an SVG markup string for the sepia filter
-Snap.filter.grayscale.toString = function () {
+       **
-  return this()
+       - amount (number) amount of filter (`0..1`)
-}
+       = (string) filter representation
-/*\
+      */
-     * Snap.filter.sepia
+  sepia(amount = 1) {
-     [ method ]
+    let a = 0.393 + 0.607 * (1 - amount)
-     **
+    let b = 0.769 - 0.769 * (1 - amount)
-     * Returns an SVG markup string for the sepia filter
+    let c = 0.189 - 0.189 * (1 - amount)
-     **
+    let d = 0.349 - 0.349 * (1 - amount)
-     - amount (number) amount of filter (`0..1`)
+    let e = 0.686 + 0.314 * (1 - amount)
-     = (string) filter representation
+    let f = 0.168 - 0.168 * (1 - amount)
-    \*/
+    let g = 0.272 - 0.272 * (1 - amount)
-Snap.filter.sepia = function (amount) {
+    let h = 0.534 - 0.534 * (1 - amount)
-  if (amount == null) {
+    let i = 0.131 + 0.869 * (1 - amount)
-    amount = 1
-  }
 
-  let a = 0.393 + 0.607 * (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"/>`
-  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 `<feColorMatrix type="matrix" values="${a} ${b} ${c} 0 0 ${d} ${e} ${f} 0 0 ${g} ${h} ${i} 0 0 0 0 0 1 0"/>`
+  /**
-}
+       * Returns an SVG markup string for the saturate filter
-Snap.filter.sepia.toString = function () {
+       **
-  return this()
+       - amount (number) amount of filter (`0..1`)
-}
+       = (string) filter representation
-/*\
+      */
-     * Snap.filter.saturate
+  saturate(amount = 1) {
-     [ method ]
+    return `<feColorMatrix type="saturate" values="${1 - amount}"/>`
-     **
+  },
-     * 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 `<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) {
-  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
-  }
-  //        <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
-  }"/><feFuncG type="table" tableValues="${amount} ${
-    1 - 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
-  }
-  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
-  }
-  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()
+       * Returns an SVG markup string for the hue-rotate filter
+       **
+       - angle (number) angle of rotation
+       = (string) filter representation
+      */
+  hueRotate(angle) {
+    angle = angle || 0
+    return `<feColorMatrix type="hueRotate" values="${angle}"/>`
+  },
+
+  /**
+   * Returns an SVG markup string for the invert filter
+   **
+    - amount (number) amount of filter (`0..1`)
+    = (string) filter representation
+  */
+  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
+    }"/><feFuncG type="table" tableValues="${amount} ${
+      1 - amount
+    }"/><feFuncB type="table" tableValues="${amount} ${
+      1 - amount
+    }"/></feComponentTransfer>`
+  },
+
+  /**
+   * Returns an SVG markup string for the brightness filter
+   **
+    - amount (number) amount of filter (`0..1`)
+    = (string) filter representation
+  */
+  brightness(amount = 1) {
+    return `<feComponentTransfer><feFuncR type="linear" slope="${amount}"/><feFuncG type="linear" slope="${amount}"/><feFuncB type="linear" slope="${amount}"/></feComponentTransfer>`
+  },
+
+  /**
+   * 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 `<feComponentTransfer><feFuncR type="linear" slope="${amount}" intercept="${amount2}"/><feFuncG type="linear" slope="${amount}" intercept="${amount2}"/><feFuncB type="linear" slope="${amount}" intercept="${amount2}"/></feComponentTransfer>`
+  }
 }

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)) ||
+    (el.node.ownerSVGElement && wrap(el.node.ownerSVGElement)) || select('svg')
-    Snap.select('svg')
   )
 }