代码精简
parent
4ae1ddd373
commit
138681c92f
92
src/align.js
92
src/align.js
|
@ -1,92 +0,0 @@
|
||||||
// Copyright (c) 2014 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'
|
|
||||||
import { is } from './utils.js'
|
|
||||||
|
|
||||||
let box = Snap._.box,
|
|
||||||
firstLetter = /^[^a-z]*([tbmlrc])/i,
|
|
||||||
toString = function () {
|
|
||||||
return 'T' + this.dx + ',' + this.dy
|
|
||||||
}
|
|
||||||
/*\
|
|
||||||
* SnapElement.getAlign
|
|
||||||
[ method ]
|
|
||||||
**
|
|
||||||
* Returns shift needed to align the element relatively to given element.
|
|
||||||
* If no elements specified, parent `<svg>` container will be used.
|
|
||||||
- el (object) @optional alignment element
|
|
||||||
- way (string) one of six values: `"top"`, `"middle"`, `"bottom"`, `"left"`, `"center"`, `"right"`
|
|
||||||
= (object|string) Object in format `{dx: , dy: }` also has a string representation as a transformation string
|
|
||||||
> Usage
|
|
||||||
| el.transform(el.getAlign(el2, "top"));
|
|
||||||
* or
|
|
||||||
| let dy = el.getAlign(el2, "top").dy;
|
|
||||||
\*/
|
|
||||||
SnapElement.prototype.getAlign = function (el, way) {
|
|
||||||
if (way == null && is(el, 'string')) {
|
|
||||||
way = el
|
|
||||||
el = null
|
|
||||||
}
|
|
||||||
el = el || this.paper
|
|
||||||
let bx = el.getBBox ? el.getBBox() : box(el),
|
|
||||||
bb = this.getBBox(),
|
|
||||||
out = {}
|
|
||||||
way = way && way.match(firstLetter)
|
|
||||||
way = way ? way[1].toLowerCase() : 'c'
|
|
||||||
switch (way) {
|
|
||||||
case 't':
|
|
||||||
out.dx = 0
|
|
||||||
out.dy = bx.y - bb.y
|
|
||||||
break
|
|
||||||
case 'b':
|
|
||||||
out.dx = 0
|
|
||||||
out.dy = bx.y2 - bb.y2
|
|
||||||
break
|
|
||||||
case 'm':
|
|
||||||
out.dx = 0
|
|
||||||
out.dy = bx.cy - bb.cy
|
|
||||||
break
|
|
||||||
case 'l':
|
|
||||||
out.dx = bx.x - bb.x
|
|
||||||
out.dy = 0
|
|
||||||
break
|
|
||||||
case 'r':
|
|
||||||
out.dx = bx.x2 - bb.x2
|
|
||||||
out.dy = 0
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
out.dx = bx.cx - bb.cx
|
|
||||||
out.dy = 0
|
|
||||||
break
|
|
||||||
}
|
|
||||||
out.toString = toString
|
|
||||||
return out
|
|
||||||
}
|
|
||||||
/*\
|
|
||||||
* SnapElement.align
|
|
||||||
[ method ]
|
|
||||||
**
|
|
||||||
* Aligns the element relatively to given one via transformation.
|
|
||||||
* If no elements specified, parent `<svg>` container will be used.
|
|
||||||
- el (object) @optional alignment element
|
|
||||||
- way (string) one of six values: `"top"`, `"middle"`, `"bottom"`, `"left"`, `"center"`, `"right"`
|
|
||||||
= (object) this element
|
|
||||||
> Usage
|
|
||||||
| el.align(el2, "top");
|
|
||||||
* or
|
|
||||||
| el.align("middle");
|
|
||||||
\*/
|
|
||||||
SnapElement.prototype.align = function (el, way) {
|
|
||||||
return this.transform('...' + this.getAlign(el, way))
|
|
||||||
}
|
|
136
src/class.js
136
src/class.js
|
@ -1,136 +0,0 @@
|
||||||
/**
|
|
||||||
* {}
|
|
||||||
* @author yutent<yutent.io@gmail.com>
|
|
||||||
* @date 2024/03/06 16:34:24
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Snap, SnapElement, Paper, Fragment } from './svg.js'
|
|
||||||
|
|
||||||
let rgNotSpace = /\S+/g,
|
|
||||||
rgBadSpace = /[\t\r\n\f]/g,
|
|
||||||
rgTrim = /(^\s+|\s+$)/g,
|
|
||||||
Str = String,
|
|
||||||
elproto = SnapElement.prototype
|
|
||||||
/*\
|
|
||||||
|
|
||||||
**
|
|
||||||
* Adds given class name or list of class names to the element.
|
|
||||||
- value (string) class name or space separated list of class names
|
|
||||||
**
|
|
||||||
= (SnapElement) original element.
|
|
||||||
\*/
|
|
||||||
elproto.addClass = function (value) {
|
|
||||||
let classes = Str(value || '').match(rgNotSpace) || [],
|
|
||||||
elem = this.node,
|
|
||||||
className = elem.className.baseVal,
|
|
||||||
curClasses = className.match(rgNotSpace) || [],
|
|
||||||
j,
|
|
||||||
pos,
|
|
||||||
clazz,
|
|
||||||
finalValue
|
|
||||||
|
|
||||||
if (classes.length) {
|
|
||||||
j = 0
|
|
||||||
while ((clazz = classes[j++])) {
|
|
||||||
pos = curClasses.indexOf(clazz)
|
|
||||||
if (!~pos) {
|
|
||||||
curClasses.push(clazz)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
finalValue = curClasses.join(' ')
|
|
||||||
if (className != finalValue) {
|
|
||||||
elem.className.baseVal = finalValue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
/*\
|
|
||||||
|
|
||||||
**
|
|
||||||
* Removes given class name or list of class names from the element.
|
|
||||||
- value (string) class name or space separated list of class names
|
|
||||||
**
|
|
||||||
= (SnapElement) original element.
|
|
||||||
\*/
|
|
||||||
elproto.removeClass = function (value) {
|
|
||||||
let classes = Str(value || '').match(rgNotSpace) || [],
|
|
||||||
elem = this.node,
|
|
||||||
className = elem.className.baseVal,
|
|
||||||
curClasses = className.match(rgNotSpace) || [],
|
|
||||||
j,
|
|
||||||
pos,
|
|
||||||
clazz,
|
|
||||||
finalValue
|
|
||||||
if (curClasses.length) {
|
|
||||||
j = 0
|
|
||||||
while ((clazz = classes[j++])) {
|
|
||||||
pos = curClasses.indexOf(clazz)
|
|
||||||
if (~pos) {
|
|
||||||
curClasses.splice(pos, 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
finalValue = curClasses.join(' ')
|
|
||||||
if (className != finalValue) {
|
|
||||||
elem.className.baseVal = finalValue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
/*\
|
|
||||||
|
|
||||||
**
|
|
||||||
* Checks if the element has a given class name in the list of class names applied to it.
|
|
||||||
- value (string) class name
|
|
||||||
**
|
|
||||||
= (boolean) `true` if the element has given class
|
|
||||||
\*/
|
|
||||||
elproto.hasClass = function (value) {
|
|
||||||
let elem = this.node,
|
|
||||||
className = elem.className.baseVal,
|
|
||||||
curClasses = className.match(rgNotSpace) || []
|
|
||||||
return !!~curClasses.indexOf(value)
|
|
||||||
}
|
|
||||||
/*\
|
|
||||||
|
|
||||||
**
|
|
||||||
* Add or remove one or more classes from the element, depending on either
|
|
||||||
* the class’s presence or the value of the `flag` argument.
|
|
||||||
- value (string) class name or space separated list of class names
|
|
||||||
- flag (boolean) value to determine whether the class should be added or removed
|
|
||||||
**
|
|
||||||
= (SnapElement) original element.
|
|
||||||
\*/
|
|
||||||
elproto.toggleClass = function (value, flag) {
|
|
||||||
if (flag != null) {
|
|
||||||
if (flag) {
|
|
||||||
return this.addClass(value)
|
|
||||||
} else {
|
|
||||||
return this.removeClass(value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let classes = (value || '').match(rgNotSpace) || [],
|
|
||||||
elem = this.node,
|
|
||||||
className = elem.className.baseVal,
|
|
||||||
curClasses = className.match(rgNotSpace) || [],
|
|
||||||
j,
|
|
||||||
pos,
|
|
||||||
clazz,
|
|
||||||
finalValue
|
|
||||||
j = 0
|
|
||||||
while ((clazz = classes[j++])) {
|
|
||||||
pos = curClasses.indexOf(clazz)
|
|
||||||
if (~pos) {
|
|
||||||
curClasses.splice(pos, 1)
|
|
||||||
} else {
|
|
||||||
curClasses.push(clazz)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
finalValue = curClasses.join(' ')
|
|
||||||
if (className != finalValue) {
|
|
||||||
elem.className.baseVal = finalValue
|
|
||||||
}
|
|
||||||
return this
|
|
||||||
}
|
|
|
@ -4,14 +4,11 @@ import './element.js'
|
||||||
import './animation.js'
|
import './animation.js'
|
||||||
import './matrix.js'
|
import './matrix.js'
|
||||||
import './attr.js'
|
import './attr.js'
|
||||||
import './class.js'
|
|
||||||
import './attradd.js'
|
import './attradd.js'
|
||||||
import './path.js'
|
import './path.js'
|
||||||
import './set.js'
|
import './set.js'
|
||||||
import './equal.js'
|
import './equal.js'
|
||||||
import './mouse.js'
|
import './mouse.js'
|
||||||
import './filter.js'
|
import './filter.js'
|
||||||
import './align.js'
|
|
||||||
// import './colors.js'
|
|
||||||
|
|
||||||
export default Snap
|
export default Snap
|
||||||
|
|
61
src/svg.js
61
src/svg.js
|
@ -1343,6 +1343,67 @@ export class SnapElement {
|
||||||
jsonFiller([this], out)
|
jsonFiller([this], out)
|
||||||
return out[0]
|
return out[0]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addClass(value) {
|
||||||
|
this.node.classList.add(value)
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
removeClass(value) {
|
||||||
|
this.node.classList.remove(value)
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
hasClass(value) {
|
||||||
|
return this.node.classList.contains(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleClass(value, flag) {
|
||||||
|
this.node.classList.toggle(value, flag)
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
getAlign(way = 'center') {
|
||||||
|
let bx = this.paper.getBBox()
|
||||||
|
let bb = this.getBBox()
|
||||||
|
let out = {
|
||||||
|
toString() {
|
||||||
|
return 'T' + this.dx + ',' + this.dy
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (way.toLowerCase()) {
|
||||||
|
case 'top':
|
||||||
|
out.dx = 0
|
||||||
|
out.dy = bx.y - bb.y
|
||||||
|
break
|
||||||
|
case 'bottom':
|
||||||
|
out.dx = 0
|
||||||
|
out.dy = bx.y2 - bb.y2
|
||||||
|
break
|
||||||
|
case 'middle':
|
||||||
|
out.dx = 0
|
||||||
|
out.dy = bx.cy - bb.cy
|
||||||
|
break
|
||||||
|
case 'left':
|
||||||
|
out.dx = bx.x - bb.x
|
||||||
|
out.dy = 0
|
||||||
|
break
|
||||||
|
case 'right':
|
||||||
|
out.dx = bx.x2 - bb.x2
|
||||||
|
out.dy = 0
|
||||||
|
break
|
||||||
|
case 'center':
|
||||||
|
out.dx = bx.cx - bb.cx
|
||||||
|
out.dy = 0
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return out
|
||||||
|
}
|
||||||
|
|
||||||
|
align(way) {
|
||||||
|
return this.transform('' + this.getAlign(way))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// default
|
// default
|
||||||
|
|
Loading…
Reference in New Issue