diff options
Diffstat (limited to 'src/elements')
-rw-r--r-- | src/elements/A.js | 20 | ||||
-rw-r--r-- | src/elements/Circle.js | 14 | ||||
-rw-r--r-- | src/elements/ClipPath.js | 19 | ||||
-rw-r--r-- | src/elements/Container.js | 4 | ||||
-rw-r--r-- | src/elements/Defs.js | 6 | ||||
-rw-r--r-- | src/elements/Dom.js | 101 | ||||
-rw-r--r-- | src/elements/Element.js | 61 | ||||
-rw-r--r-- | src/elements/Ellipse.js | 10 | ||||
-rw-r--r-- | src/elements/ForeignObject.js | 2 | ||||
-rw-r--r-- | src/elements/Fragment.js | 5 | ||||
-rw-r--r-- | src/elements/G.js | 9 | ||||
-rw-r--r-- | src/elements/Gradient.js | 16 | ||||
-rw-r--r-- | src/elements/Image.js | 48 | ||||
-rw-r--r-- | src/elements/Line.js | 18 | ||||
-rw-r--r-- | src/elements/Marker.js | 28 | ||||
-rw-r--r-- | src/elements/Mask.js | 17 | ||||
-rw-r--r-- | src/elements/Path.js | 36 | ||||
-rw-r--r-- | src/elements/Pattern.js | 17 | ||||
-rw-r--r-- | src/elements/Polygon.js | 2 | ||||
-rw-r--r-- | src/elements/Polyline.js | 2 | ||||
-rw-r--r-- | src/elements/Rect.js | 2 | ||||
-rw-r--r-- | src/elements/Stop.js | 4 | ||||
-rw-r--r-- | src/elements/Style.js | 14 | ||||
-rw-r--r-- | src/elements/Svg.js | 26 | ||||
-rw-r--r-- | src/elements/Symbol.js | 2 | ||||
-rw-r--r-- | src/elements/Text.js | 20 | ||||
-rw-r--r-- | src/elements/TextPath.js | 14 | ||||
-rw-r--r-- | src/elements/Tspan.js | 17 | ||||
-rw-r--r-- | src/elements/Use.js | 4 |
29 files changed, 288 insertions, 250 deletions
diff --git a/src/elements/A.js b/src/elements/A.js index 173fc92..231954f 100644 --- a/src/elements/A.js +++ b/src/elements/A.js @@ -1,24 +1,28 @@ -import { nodeOrNew, register, wrapWithAttrCheck, extend } from '../utils/adopter.js' +import { + nodeOrNew, + register, + wrapWithAttrCheck, + extend +} from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import { xlink } from '../modules/core/namespaces.js' import Container from './Container.js' import * as containerGeometry from '../modules/core/containerGeometry.js' export default class A extends Container { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('a', node), attrs) } // Link target attribute - target (target) { + target(target) { return this.attr('target', target) } // Link url - to (url) { + to(url) { return this.attr('href', url, xlink) } - } extend(A, containerGeometry) @@ -31,7 +35,7 @@ registerMethods({ }) }, Element: { - unlink () { + unlink() { const link = this.linker() if (!link) return this @@ -48,7 +52,7 @@ registerMethods({ link.remove() return this }, - linkTo (url) { + linkTo(url) { // reuse old link if possible let link = this.linker() @@ -65,7 +69,7 @@ registerMethods({ return this }, - linker () { + linker() { const link = this.parent() if (link && link.node.nodeName.toLowerCase() === 'a') { return link diff --git a/src/elements/Circle.js b/src/elements/Circle.js index 6981b05..5dae51e 100644 --- a/src/elements/Circle.js +++ b/src/elements/Circle.js @@ -10,25 +10,25 @@ import SVGNumber from '../types/SVGNumber.js' import Shape from './Shape.js' export default class Circle extends Shape { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('circle', node), attrs) } - radius (r) { + radius(r) { return this.attr('r', r) } // Radius x value - rx (rx) { + rx(rx) { return this.attr('r', rx) } // Alias radius x value - ry (ry) { + ry(ry) { return this.rx(ry) } - size (size) { + size(size) { return this.radius(new SVGNumber(size).divide(2)) } } @@ -39,9 +39,7 @@ registerMethods({ Container: { // Create circle element circle: wrapWithAttrCheck(function (size = 0) { - return this.put(new Circle()) - .size(size) - .move(0, 0) + return this.put(new Circle()).size(size).move(0, 0) }) } }) diff --git a/src/elements/ClipPath.js b/src/elements/ClipPath.js index f17428f..747059d 100644 --- a/src/elements/ClipPath.js +++ b/src/elements/ClipPath.js @@ -4,12 +4,12 @@ import Container from './Container.js' import baseFind from '../modules/core/selector.js' export default class ClipPath extends Container { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('clipPath', node), attrs) } // Unclip all clipped elements and remove itself - remove () { + remove() { // unclip all targets this.targets().forEach(function (el) { el.unclip() @@ -19,7 +19,7 @@ export default class ClipPath extends Container { return super.remove() } - targets () { + targets() { return baseFind('svg [clip-path*=' + this.id() + ']') } } @@ -33,22 +33,23 @@ registerMethods({ }, Element: { // Distribute clipPath to svg element - clipper () { + clipper() { return this.reference('clip-path') }, - clipWith (element) { + clipWith(element) { // use given clip or create a new one - const clipper = element instanceof ClipPath - ? element - : this.parent().clip().add(element) + const clipper = + element instanceof ClipPath + ? element + : this.parent().clip().add(element) // apply mask return this.attr('clip-path', 'url(#' + clipper.id() + ')') }, // Unclip element - unclip () { + unclip() { return this.attr('clip-path', null) } } diff --git a/src/elements/Container.js b/src/elements/Container.js index 9278435..0f45b6d 100644 --- a/src/elements/Container.js +++ b/src/elements/Container.js @@ -2,7 +2,7 @@ import { register } from '../utils/adopter.js' import Element from './Element.js' export default class Container extends Element { - flatten (parent = this, index) { + flatten() { this.each(function () { if (this instanceof Container) { return this.flatten().ungroup() @@ -12,7 +12,7 @@ export default class Container extends Element { return this } - ungroup (parent = this.parent(), index = parent.index(this)) { + ungroup(parent = this.parent(), index = parent.index(this)) { // when parent != this, we want append all elements to the end index = index === -1 ? parent.children().length : index diff --git a/src/elements/Defs.js b/src/elements/Defs.js index 7491ba0..6d9f725 100644 --- a/src/elements/Defs.js +++ b/src/elements/Defs.js @@ -2,15 +2,15 @@ import { nodeOrNew, register } from '../utils/adopter.js' import Container from './Container.js' export default class Defs extends Container { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('defs', node), attrs) } - flatten () { + flatten() { return this } - ungroup () { + ungroup() { return this } } diff --git a/src/elements/Dom.js b/src/elements/Dom.js index 2584a43..604a1ee 100644 --- a/src/elements/Dom.js +++ b/src/elements/Dom.js @@ -16,7 +16,7 @@ import List from '../types/List.js' import attr from '../modules/core/attr.js' export default class Dom extends EventTarget { - constructor (node, attrs) { + constructor(node, attrs) { super() this.node = node this.type = node.nodeName @@ -27,11 +27,14 @@ export default class Dom extends EventTarget { } // Add given element at a position - add (element, i) { + add(element, i) { element = makeInstance(element) // If non-root svg nodes are added we have to remove their namespaces - if (element.removeNamespace && this.node instanceof globals.window.SVGElement) { + if ( + element.removeNamespace && + this.node instanceof globals.window.SVGElement + ) { element.removeNamespace() } @@ -45,19 +48,21 @@ export default class Dom extends EventTarget { } // Add element to given container and return self - addTo (parent, i) { + addTo(parent, i) { return makeInstance(parent).put(this, i) } // Returns all child elements - children () { - return new List(map(this.node.children, function (node) { - return adopt(node) - })) + children() { + return new List( + map(this.node.children, function (node) { + return adopt(node) + }) + ) } // Remove all elements in this container - clear () { + clear() { // remove children while (this.node.hasChildNodes()) { this.node.removeChild(this.node.lastChild) @@ -67,7 +72,7 @@ export default class Dom extends EventTarget { } // Clone element - clone (deep = true, assignNewIds = true) { + clone(deep = true, assignNewIds = true) { // write dom data to the dom so the clone can pickup the data this.writeDataToDom() @@ -81,12 +86,12 @@ export default class Dom extends EventTarget { } // Iterates over all children and invokes a given block - each (block, deep) { + each(block, deep) { const children = this.children() let i, il for (i = 0, il = children.length; i < il; i++) { - block.apply(children[i], [ i, children ]) + block.apply(children[i], [i, children]) if (deep) { children[i].each(block, deep) @@ -96,39 +101,39 @@ export default class Dom extends EventTarget { return this } - element (nodeName, attrs) { + element(nodeName, attrs) { return this.put(new Dom(create(nodeName), attrs)) } // Get first child - first () { + first() { return adopt(this.node.firstChild) } // Get a element at the given index - get (i) { + get(i) { return adopt(this.node.childNodes[i]) } - getEventHolder () { + getEventHolder() { return this.node } - getEventTarget () { + getEventTarget() { return this.node } // Checks if the given element is a child - has (element) { + has(element) { return this.index(element) >= 0 } - html (htmlOrFn, outerHTML) { + html(htmlOrFn, outerHTML) { return this.xml(htmlOrFn, outerHTML, html) } // Get / set id - id (id) { + id(id) { // generate new id if no id set if (typeof id === 'undefined' && !this.node.id) { this.node.id = eid(this.type) @@ -139,24 +144,31 @@ export default class Dom extends EventTarget { } // Gets index of given element - index (element) { + index(element) { return [].slice.call(this.node.childNodes).indexOf(element.node) } // Get the last child - last () { + last() { return adopt(this.node.lastChild) } // matches the element vs a css selector - matches (selector) { + matches(selector) { const el = this.node - const matcher = el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector || null + const matcher = + el.matches || + el.matchesSelector || + el.msMatchesSelector || + el.mozMatchesSelector || + el.webkitMatchesSelector || + el.oMatchesSelector || + null return matcher && matcher.call(el, selector) } // Returns the parent element instance - parent (type) { + parent(type) { let parent = this // check for parent @@ -169,26 +181,29 @@ export default class Dom extends EventTarget { // loop through ancestors if type is given do { - if (typeof type === 'string' ? parent.matches(type) : parent instanceof type) return parent + if ( + typeof type === 'string' ? parent.matches(type) : parent instanceof type + ) + return parent } while ((parent = adopt(parent.node.parentNode))) return parent } // Basically does the same as `add()` but returns the added element instead - put (element, i) { + put(element, i) { element = makeInstance(element) this.add(element, i) return element } // Add element to given container and return container - putIn (parent, i) { + putIn(parent, i) { return makeInstance(parent).add(this, i) } // Remove element - remove () { + remove() { if (this.parent()) { this.parent().removeElement(this) } @@ -197,14 +212,14 @@ export default class Dom extends EventTarget { } // Remove a given child - removeElement (element) { + removeElement(element) { this.node.removeChild(element.node) return this } // Replace this with element - replace (element) { + replace(element) { element = makeInstance(element) if (this.node.parentNode) { @@ -214,7 +229,7 @@ export default class Dom extends EventTarget { return element } - round (precision = 2, map = null) { + round(precision = 2, map = null) { const factor = 10 ** precision const attrs = this.attr(map) @@ -229,22 +244,22 @@ export default class Dom extends EventTarget { } // Import / Export raw svg - svg (svgOrFn, outerSVG) { + svg(svgOrFn, outerSVG) { return this.xml(svgOrFn, outerSVG, svg) } // Return id on string conversion - toString () { + toString() { return this.id() } - words (text) { + words(text) { // This is faster than removing all children and adding a new one this.node.textContent = text return this } - wrap (node) { + wrap(node) { const parent = this.parent() if (!parent) { @@ -256,7 +271,7 @@ export default class Dom extends EventTarget { } // write svgjs data to the dom - writeDataToDom () { + writeDataToDom() { // dump variables recursively this.each(function () { this.writeDataToDom() @@ -266,7 +281,7 @@ export default class Dom extends EventTarget { } // Import / Export raw svg - xml (xmlOrFn, outerXML, ns) { + xml(xmlOrFn, outerXML, ns) { if (typeof xmlOrFn === 'boolean') { ns = outerXML outerXML = xmlOrFn @@ -312,9 +327,7 @@ export default class Dom extends EventTarget { } // Return outer or inner content - return outerXML - ? current.node.outerHTML - : current.node.innerHTML + return outerXML ? current.node.outerHTML : current.node.innerHTML } // Act as setter if we got a string @@ -330,16 +343,14 @@ export default class Dom extends EventTarget { well.innerHTML = xmlOrFn // Transplant nodes into the fragment - for (let len = well.children.length; len--;) { + for (let len = well.children.length; len--; ) { fragment.appendChild(well.firstElementChild) } const parent = this.parent() // Add the whole fragment at once - return outerXML - ? this.replace(fragment) && parent - : this.add(fragment) + return outerXML ? this.replace(fragment) && parent : this.add(fragment) } } diff --git a/src/elements/Element.js b/src/elements/Element.js index 2aaeab5..61db7b7 100644 --- a/src/elements/Element.js +++ b/src/elements/Element.js @@ -16,7 +16,7 @@ import List from '../types/List.js' import SVGNumber from '../types/SVGNumber.js' export default class Element extends Dom { - constructor (node, attrs) { + constructor(node, attrs) { super(node, attrs) // initialize data object @@ -32,61 +32,61 @@ export default class Element extends Dom { } // Move element by its center - center (x, y) { + center(x, y) { return this.cx(x).cy(y) } // Move by center over x-axis - cx (x) { + cx(x) { return x == null ? this.x() + this.width() / 2 : this.x(x - this.width() / 2) } // Move by center over y-axis - cy (y) { + cy(y) { return y == null ? this.y() + this.height() / 2 : this.y(y - this.height() / 2) } // Get defs - defs () { + defs() { const root = this.root() return root && root.defs() } // Relative move over x and y axes - dmove (x, y) { + dmove(x, y) { return this.dx(x).dy(y) } // Relative move over x axis - dx (x = 0) { + dx(x = 0) { return this.x(new SVGNumber(x).plus(this.x())) } // Relative move over y axis - dy (y = 0) { + dy(y = 0) { return this.y(new SVGNumber(y).plus(this.y())) } - getEventHolder () { + getEventHolder() { return this } // Set height of element - height (height) { + height(height) { return this.attr('height', height) } // Move element to given x and y values - move (x, y) { + move(x, y) { return this.x(x).y(y) } // return array of all ancestors of given type up to the root svg - parents (until = this.root()) { + parents(until = this.root()) { const isSelector = typeof until === 'string' if (!isSelector) { until = makeInstance(until) @@ -95,13 +95,13 @@ export default class Element extends Dom { let parent = this while ( - (parent = parent.parent()) - && parent.node !== globals.document - && parent.nodeName !== '#document-fragment') { - + (parent = parent.parent()) && + parent.node !== globals.document && + parent.nodeName !== '#document-fragment' + ) { parents.push(parent) - if (!isSelector && (parent.node === until.node)) { + if (!isSelector && parent.node === until.node) { break } if (isSelector && parent.matches(until)) { @@ -117,7 +117,7 @@ export default class Element extends Dom { } // Get referenced element form attribute value - reference (attr) { + reference(attr) { attr = this.attr(attr) if (!attr) return null @@ -126,33 +126,31 @@ export default class Element extends Dom { } // Get parent document - root () { + root() { const p = this.parent(getClass(root)) return p && p.root() } // set given data to the elements data property - setData (o) { + setData(o) { this.dom = o return this } // Set element size to given width and height - size (width, height) { + size(width, height) { const p = proportionalSize(this, width, height) - return this - .width(new SVGNumber(p.width)) - .height(new SVGNumber(p.height)) + return this.width(new SVGNumber(p.width)).height(new SVGNumber(p.height)) } // Set width of element - width (width) { + width(width) { return this.attr('width', width) } // write svgjs data to the dom - writeDataToDom () { + writeDataToDom() { // remove previously set data this.node.removeAttribute('svgjs:data') @@ -164,18 +162,23 @@ export default class Element extends Dom { } // Move over x-axis - x (x) { + x(x) { return this.attr('x', x) } // Move over y-axis - y (y) { + y(y) { return this.attr('y', y) } } extend(Element, { - bbox, rbox, inside, point, ctm, screenCTM + bbox, + rbox, + inside, + point, + ctm, + screenCTM }) register(Element, 'Element') diff --git a/src/elements/Ellipse.js b/src/elements/Ellipse.js index 7f4e853..3f8b04b 100644 --- a/src/elements/Ellipse.js +++ b/src/elements/Ellipse.js @@ -11,16 +11,16 @@ import Shape from './Shape.js' import * as circled from '../modules/core/circled.js' export default class Ellipse extends Shape { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('ellipse', node), attrs) } - size (width, height) { + size(width, height) { const p = proportionalSize(this, width, height) - return this - .rx(new SVGNumber(p.width).divide(2)) - .ry(new SVGNumber(p.height).divide(2)) + return this.rx(new SVGNumber(p.width).divide(2)).ry( + new SVGNumber(p.height).divide(2) + ) } } diff --git a/src/elements/ForeignObject.js b/src/elements/ForeignObject.js index 0a417b0..a4148d5 100644 --- a/src/elements/ForeignObject.js +++ b/src/elements/ForeignObject.js @@ -3,7 +3,7 @@ import { registerMethods } from '../utils/methods.js' import Element from './Element.js' export default class ForeignObject extends Element { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('foreignObject', node), attrs) } } diff --git a/src/elements/Fragment.js b/src/elements/Fragment.js index d2c4764..ece3046 100644 --- a/src/elements/Fragment.js +++ b/src/elements/Fragment.js @@ -3,12 +3,12 @@ import { globals } from '../utils/window.js' import { register, create } from '../utils/adopter.js' class Fragment extends Dom { - constructor (node = globals.document.createDocumentFragment()) { + constructor(node = globals.document.createDocumentFragment()) { super(node) } // Import / Export raw xml - xml (xmlOrFn, outerXML, ns) { + xml(xmlOrFn, outerXML, ns) { if (typeof xmlOrFn === 'boolean') { ns = outerXML outerXML = xmlOrFn @@ -27,7 +27,6 @@ class Fragment extends Dom { // Act as setter if we got a string return super.xml(xmlOrFn, false, ns) } - } register(Fragment, 'Fragment') diff --git a/src/elements/G.js b/src/elements/G.js index b3a999e..4d3b03c 100644 --- a/src/elements/G.js +++ b/src/elements/G.js @@ -1,10 +1,15 @@ -import { nodeOrNew, register, wrapWithAttrCheck, extend } from '../utils/adopter.js' +import { + nodeOrNew, + register, + wrapWithAttrCheck, + extend +} from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Container from './Container.js' import * as containerGeometry from '../modules/core/containerGeometry.js' export default class G extends Container { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('g', node), attrs) } } diff --git a/src/elements/Gradient.js b/src/elements/Gradient.js index d3fa15b..1631c14 100644 --- a/src/elements/Gradient.js +++ b/src/elements/Gradient.js @@ -11,7 +11,7 @@ import baseFind from '../modules/core/selector.js' import * as gradiented from '../modules/core/gradiented.js' export default class Gradient extends Container { - constructor (type, attrs) { + constructor(type, attrs) { super( nodeOrNew(type + 'Gradient', typeof type === 'string' ? null : type), attrs @@ -19,26 +19,26 @@ export default class Gradient extends Container { } // custom attr to handle transform - attr (a, b, c) { + attr(a, b, c) { if (a === 'transform') a = 'gradientTransform' return super.attr(a, b, c) } - bbox () { + bbox() { return new Box() } - targets () { + targets() { return baseFind('svg [fill*=' + this.id() + ']') } // Alias string conversion to fill - toString () { + toString() { return this.url() } // Update gradient - update (block) { + update(block) { // remove all stops this.clear() @@ -51,7 +51,7 @@ export default class Gradient extends Container { } // Return the fill id - url () { + url() { return 'url(#' + this.id() + ')' } } @@ -61,7 +61,7 @@ extend(Gradient, gradiented) registerMethods({ Container: { // Create gradient element in defs - gradient (...args) { + gradient(...args) { return this.defs().gradient(...args) } }, diff --git a/src/elements/Image.js b/src/elements/Image.js index c51bc9a..080da16 100644 --- a/src/elements/Image.js +++ b/src/elements/Image.js @@ -9,35 +9,40 @@ import Shape from './Shape.js' import { globals } from '../utils/window.js' export default class Image extends Shape { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('image', node), attrs) } // (re)load image - load (url, callback) { + load(url, callback) { if (!url) return this const img = new globals.window.Image() - on(img, 'load', function (e) { - const p = this.parent(Pattern) + on( + img, + 'load', + function (e) { + const p = this.parent(Pattern) - // ensure image size - if (this.width() === 0 && this.height() === 0) { - this.size(img.width, img.height) - } + // ensure image size + if (this.width() === 0 && this.height() === 0) { + this.size(img.width, img.height) + } - if (p instanceof Pattern) { - // ensure pattern size if not set - if (p.width() === 0 && p.height() === 0) { - p.size(this.width(), this.height()) + if (p instanceof Pattern) { + // ensure pattern size if not set + if (p.width() === 0 && p.height() === 0) { + p.size(this.width(), this.height()) + } } - } - if (typeof callback === 'function') { - callback.call(this, e) - } - }, this) + if (typeof callback === 'function') { + callback.call(this, e) + } + }, + this + ) on(img, 'load error', function () { // dont forget to unbind memory leaking events @@ -57,9 +62,12 @@ registerAttrHook(function (attr, val, _this) { } if (val instanceof Image) { - val = _this.root().defs().pattern(0, 0, (pattern) => { - pattern.add(val) - }) + val = _this + .root() + .defs() + .pattern(0, 0, (pattern) => { + pattern.add(val) + }) } return val diff --git a/src/elements/Line.js b/src/elements/Line.js index 9350a23..0dab35d 100644 --- a/src/elements/Line.js +++ b/src/elements/Line.js @@ -12,25 +12,25 @@ import * as pointed from '../modules/core/pointed.js' export default class Line extends Shape { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('line', node), attrs) } // Get array - array () { + array() { return new PointArray([ - [ this.attr('x1'), this.attr('y1') ], - [ this.attr('x2'), this.attr('y2') ] + [this.attr('x1'), this.attr('y1')], + [this.attr('x2'), this.attr('y2')] ]) } // Move by left top corner - move (x, y) { + move(x, y) { return this.attr(this.array().move(x, y).toLine()) } // Overwrite native plot() method - plot (x1, y1, x2, y2) { + plot(x1, y1, x2, y2) { if (x1 == null) { return this.array() } else if (typeof y1 !== 'undefined') { @@ -43,7 +43,7 @@ export default class Line extends Shape { } // Set element size to given width and height - size (width, height) { + size(width, height) { const p = proportionalSize(this, width, height) return this.attr(this.array().size(p.width, p.height).toLine()) } @@ -58,8 +58,8 @@ registerMethods({ // make sure plot is called as a setter // x1 is not necessarily a number, it can also be an array, a string and a PointArray return Line.prototype.plot.apply( - this.put(new Line()) - , args[0] != null ? args : [ 0, 0, 0, 0 ] + this.put(new Line()), + args[0] != null ? args : [0, 0, 0, 0] ) }) } diff --git a/src/elements/Marker.js b/src/elements/Marker.js index d6f98c8..5ddf802 100644 --- a/src/elements/Marker.js +++ b/src/elements/Marker.js @@ -4,31 +4,31 @@ import Container from './Container.js' export default class Marker extends Container { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('marker', node), attrs) } // Set height of element - height (height) { + height(height) { return this.attr('markerHeight', height) } - orient (orient) { + orient(orient) { return this.attr('orient', orient) } // Set marker refX and refY - ref (x, y) { + ref(x, y) { return this.attr('refX', x).attr('refY', y) } // Return the fill id - toString () { + toString() { return 'url(#' + this.id() + ')' } // Update marker - update (block) { + update(block) { // remove all content this.clear() @@ -41,15 +41,14 @@ export default class Marker extends Container { } // Set width of element - width (width) { + width(width) { return this.attr('markerWidth', width) } - } registerMethods({ Container: { - marker (...args) { + marker(...args) { // Create marker element in defs return this.defs().marker(...args) } @@ -68,17 +67,18 @@ registerMethods({ }, marker: { // Create and attach markers - marker (marker, width, height, block) { - let attr = [ 'marker' ] + marker(marker, width, height, block) { + let attr = ['marker'] // Build attribute name if (marker !== 'all') attr.push(marker) attr = attr.join('-') // Set marker attribute - marker = arguments[1] instanceof Marker - ? arguments[1] - : this.defs().marker(width, height, block) + marker = + arguments[1] instanceof Marker + ? arguments[1] + : this.defs().marker(width, height, block) return this.attr(attr, marker) } diff --git a/src/elements/Mask.js b/src/elements/Mask.js index 5b462f7..b8a2c99 100644 --- a/src/elements/Mask.js +++ b/src/elements/Mask.js @@ -5,12 +5,12 @@ import baseFind from '../modules/core/selector.js' export default class Mask extends Container { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('mask', node), attrs) } // Unmask all masked elements and remove itself - remove () { + remove() { // unmask all targets this.targets().forEach(function (el) { el.unmask() @@ -20,7 +20,7 @@ export default class Mask extends Container { return super.remove() } - targets () { + targets() { return baseFind('svg [mask*=' + this.id() + ']') } } @@ -33,22 +33,21 @@ registerMethods({ }, Element: { // Distribute mask to svg element - masker () { + masker() { return this.reference('mask') }, - maskWith (element) { + maskWith(element) { // use given mask or create a new one - const masker = element instanceof Mask - ? element - : this.parent().mask().add(element) + const masker = + element instanceof Mask ? element : this.parent().mask().add(element) // apply mask return this.attr('mask', 'url(#' + masker.id() + ')') }, // Unmask element - unmask () { + unmask() { return this.attr('mask', null) } } diff --git a/src/elements/Path.js b/src/elements/Path.js index 2aa0a51..ec9a19f 100644 --- a/src/elements/Path.js +++ b/src/elements/Path.js @@ -6,59 +6,65 @@ import Shape from './Shape.js' export default class Path extends Shape { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('path', node), attrs) } // Get array - array () { + array() { return this._array || (this._array = new PathArray(this.attr('d'))) } // Clear array cache - clear () { + clear() { delete this._array return this } // Set height of element - height (height) { - return height == null ? this.bbox().height : this.size(this.bbox().width, height) + height(height) { + return height == null + ? this.bbox().height + : this.size(this.bbox().width, height) } // Move by left top corner - move (x, y) { + move(x, y) { return this.attr('d', this.array().move(x, y)) } // Plot new path - plot (d) { - return (d == null) + plot(d) { + return d == null ? this.array() - : this.clear().attr('d', typeof d === 'string' ? d : (this._array = new PathArray(d))) + : this.clear().attr( + 'd', + typeof d === 'string' ? d : (this._array = new PathArray(d)) + ) } // Set element size to given width and height - size (width, height) { + size(width, height) { const p = proportionalSize(this, width, height) return this.attr('d', this.array().size(p.width, p.height)) } // Set width of element - width (width) { - return width == null ? this.bbox().width : this.size(width, this.bbox().height) + width(width) { + return width == null + ? this.bbox().width + : this.size(width, this.bbox().height) } // Move by left top corner over x-axis - x (x) { + x(x) { return x == null ? this.bbox().x : this.move(x, this.bbox().y) } // Move by left top corner over y-axis - y (y) { + y(y) { return y == null ? this.bbox().y : this.move(this.bbox().x, y) } - } // Define morphable array diff --git a/src/elements/Pattern.js b/src/elements/Pattern.js index 18a75e8..b42a83a 100644 --- a/src/elements/Pattern.js +++ b/src/elements/Pattern.js @@ -6,31 +6,31 @@ import baseFind from '../modules/core/selector.js' export default class Pattern extends Container { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('pattern', node), attrs) } // custom attr to handle transform - attr (a, b, c) { + attr(a, b, c) { if (a === 'transform') a = 'patternTransform' return super.attr(a, b, c) } - bbox () { + bbox() { return new Box() } - targets () { + targets() { return baseFind('svg [fill*=' + this.id() + ']') } // Alias string conversion to fill - toString () { + toString() { return this.url() } // Update pattern by rebuilding - update (block) { + update(block) { // remove content this.clear() @@ -43,16 +43,15 @@ export default class Pattern extends Container { } // Return the fill id - url () { + url() { return 'url(#' + this.id() + ')' } - } registerMethods({ Container: { // Create pattern element in defs - pattern (...args) { + pattern(...args) { return this.defs().pattern(...args) } }, diff --git a/src/elements/Polygon.js b/src/elements/Polygon.js index 0c99aa7..d64dcb3 100644 --- a/src/elements/Polygon.js +++ b/src/elements/Polygon.js @@ -12,7 +12,7 @@ import * as poly from '../modules/core/poly.js' export default class Polygon extends Shape { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('polygon', node), attrs) } } diff --git a/src/elements/Polyline.js b/src/elements/Polyline.js index e390da3..2f063f2 100644 --- a/src/elements/Polyline.js +++ b/src/elements/Polyline.js @@ -12,7 +12,7 @@ import * as poly from '../modules/core/poly.js' export default class Polyline extends Shape { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('polyline', node), attrs) } } diff --git a/src/elements/Rect.js b/src/elements/Rect.js index 0ed85fc..749cf6d 100644 --- a/src/elements/Rect.js +++ b/src/elements/Rect.js @@ -10,7 +10,7 @@ import Shape from './Shape.js' export default class Rect extends Shape { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('rect', node), attrs) } } diff --git a/src/elements/Stop.js b/src/elements/Stop.js index d29090c..193256e 100644 --- a/src/elements/Stop.js +++ b/src/elements/Stop.js @@ -4,12 +4,12 @@ import SVGNumber from '../types/SVGNumber.js' import { registerMethods } from '../utils/methods.js' export default class Stop extends Element { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('stop', node), attrs) } // add color stops - update (o) { + update(o) { if (typeof o === 'number' || o instanceof SVGNumber) { o = { offset: arguments[0], diff --git a/src/elements/Style.js b/src/elements/Style.js index f7c3c57..fc1a27e 100644 --- a/src/elements/Style.js +++ b/src/elements/Style.js @@ -3,7 +3,7 @@ import { registerMethods } from '../utils/methods.js' import { unCamelCase } from '../utils/utils.js' import Element from './Element.js' -function cssRule (selector, rule) { +function cssRule(selector, rule) { if (!selector) return '' if (!rule) return selector @@ -19,16 +19,16 @@ function cssRule (selector, rule) { } export default class Style extends Element { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('style', node), attrs) } - addText (w = '') { + addText(w = '') { this.node.textContent += w return this } - font (name, src, params = {}) { + font(name, src, params = {}) { return this.rule('@font-face', { fontFamily: name, src: src, @@ -36,16 +36,16 @@ export default class Style extends Element { }) } - rule (selector, obj) { + rule(selector, obj) { return this.addText(cssRule(selector, obj)) } } registerMethods('Dom', { - style (selector, obj) { + style(selector, obj) { return this.put(new Style()).rule(selector, obj) }, - fontface (name, src, params) { + fontface(name, src, params) { return this.put(new Style()).font(name, src, params) } }) diff --git a/src/elements/Svg.js b/src/elements/Svg.js index acddf34..7b36daa 100644 --- a/src/elements/Svg.js +++ b/src/elements/Svg.js @@ -11,34 +11,35 @@ import Defs from './Defs.js' import { globals } from '../utils/window.js' export default class Svg extends Container { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('svg', node), attrs) this.namespace() } // Creates and returns defs element - defs () { + defs() { if (!this.isRoot()) return this.root().defs() - return adopt(this.node.querySelector('defs')) - || this.put(new Defs()) + return adopt(this.node.querySelector('defs')) || this.put(new Defs()) } - isRoot () { - return !this.node.parentNode - || (!(this.node.parentNode instanceof globals.window.SVGElement) && this.node.parentNode.nodeName !== '#document-fragment') + isRoot() { + return ( + !this.node.parentNode || + (!(this.node.parentNode instanceof globals.window.SVGElement) && + this.node.parentNode.nodeName !== '#document-fragment') + ) } // Add namespaces - namespace () { + namespace() { if (!this.isRoot()) return this.root().namespace() - return this - .attr({ xmlns: svg, version: '1.1' }) + return this.attr({ xmlns: svg, version: '1.1' }) .attr('xmlns:xlink', xlink, xmlns) .attr('xmlns:svgjs', svgjs, xmlns) } - removeNamespace () { + removeNamespace() { return this.attr({ xmlns: null, version: null }) .attr('xmlns:xlink', null, xmlns) .attr('xmlns:svgjs', null, xmlns) @@ -46,11 +47,10 @@ export default class Svg extends Container { // Check if this is a root svg // If not, call root() from this element - root () { + root() { if (this.isRoot()) return this return super.root() } - } registerMethods({ diff --git a/src/elements/Symbol.js b/src/elements/Symbol.js index d2a98ac..28ad206 100644 --- a/src/elements/Symbol.js +++ b/src/elements/Symbol.js @@ -4,7 +4,7 @@ import Container from './Container.js' export default class Symbol extends Container { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('symbol', node), attrs) } } diff --git a/src/elements/Text.js b/src/elements/Text.js index f716f83..39371f6 100644 --- a/src/elements/Text.js +++ b/src/elements/Text.js @@ -13,7 +13,7 @@ import * as textable from '../modules/core/textable.js' export default class Text extends Shape { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('text', node), attrs) this.dom.leading = new SVGNumber(1.3) // store leading value for rebuilding @@ -22,7 +22,7 @@ export default class Text extends Shape { } // Set / get leading - leading (value) { + leading(value) { // act as getter if (value == null) { return this.dom.leading @@ -35,7 +35,7 @@ export default class Text extends Shape { } // Rebuild appearance type - rebuild (rebuild) { + rebuild(rebuild) { // store new rebuild flag if given if (typeof rebuild === 'boolean') { this._rebuild = rebuild @@ -48,7 +48,8 @@ export default class Text extends Shape { const leading = this.dom.leading this.each(function (i) { - const fontSize = globals.window.getComputedStyle(this.node) + const fontSize = globals.window + .getComputedStyle(this.node) .getPropertyValue('font-size') const dy = leading * new SVGNumber(fontSize) @@ -72,14 +73,14 @@ export default class Text extends Shape { } // overwrite method from parent to set data properly - setData (o) { + setData(o) { this.dom = o this.dom.leading = new SVGNumber(o.leading || 1.3) return this } // Set the text content - text (text) { + text(text) { // act as getter if (text === undefined) { const children = this.node.childNodes @@ -94,7 +95,11 @@ export default class Text extends Shape { } // add newline if its not the first child and newLined is set to true - if (i !== firstLine && children[i].nodeType !== 3 && adopt(children[i]).dom.newLined === true) { + if ( + i !== firstLine && + children[i].nodeType !== 3 && + adopt(children[i]).dom.newLined === true + ) { text += '\n' } @@ -124,7 +129,6 @@ export default class Text extends Shape { // disable build mode and rebuild lines return this.build(false).rebuild() } - } extend(Text, textable) diff --git a/src/elements/TextPath.js b/src/elements/TextPath.js index 2af73e7..89c6c42 100644 --- a/src/elements/TextPath.js +++ b/src/elements/TextPath.js @@ -8,19 +8,19 @@ import baseFind from '../modules/core/selector.js' export default class TextPath extends Text { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('textPath', node), attrs) } // return the array of the path track element - array () { + array() { const track = this.track() return track ? track.array() : null } // Plot path if any - plot (d) { + plot(d) { const track = this.track() let pathArray = null @@ -28,11 +28,11 @@ export default class TextPath extends Text { pathArray = track.plot(d) } - return (d == null) ? pathArray : this + return d == null ? pathArray : this } // Get the path element - track () { + track() { return this.reference('href') } } @@ -75,7 +75,7 @@ registerMethods({ }), // Get the textPath children - textPath () { + textPath() { return this.findOne('textPath') } }, @@ -91,7 +91,7 @@ registerMethods({ return text.path(this) }), - targets () { + targets() { return baseFind('svg textPath').filter((node) => { return (node.attr('href') || '').includes(this.id()) }) diff --git a/src/elements/Tspan.js b/src/elements/Tspan.js index 73cd52d..12b49f8 100644 --- a/src/elements/Tspan.js +++ b/src/elements/Tspan.js @@ -13,23 +13,23 @@ import * as textable from '../modules/core/textable.js' export default class Tspan extends Shape { // Initialize node - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('tspan', node), attrs) this._build = false // disable build mode for adding multiple lines } // Shortcut dx - dx (dx) { + dx(dx) { return this.attr('dx', dx) } // Shortcut dy - dy (dy) { + dy(dy) { return this.attr('dy', dy) } // Create new line - newLine () { + newLine() { // mark new line this.dom.newLined = true @@ -43,7 +43,8 @@ export default class Tspan extends Shape { const i = text.index(this) - const fontSize = globals.window.getComputedStyle(this.node) + const fontSize = globals.window + .getComputedStyle(this.node) .getPropertyValue('font-size') const dy = text.dom.leading * new SVGNumber(fontSize) @@ -52,8 +53,9 @@ export default class Tspan extends Shape { } // Set text content - text (text) { - if (text == null) return this.node.textContent + (this.dom.newLined ? '\n' : '') + text(text) { + if (text == null) + return this.node.textContent + (this.dom.newLined ? '\n' : '') if (typeof text === 'function') { this.clear().build(true) @@ -65,7 +67,6 @@ export default class Tspan extends Shape { return this } - } extend(Tspan, textable) diff --git a/src/elements/Use.js b/src/elements/Use.js index 30d9436..e92dd48 100644 --- a/src/elements/Use.js +++ b/src/elements/Use.js @@ -4,12 +4,12 @@ import { xlink } from '../modules/core/namespaces.js' import Shape from './Shape.js' export default class Use extends Shape { - constructor (node, attrs = node) { + constructor(node, attrs = node) { super(nodeOrNew('use', node), attrs) } // Use element as a reference - use (element, file) { + use(element, file) { // Set lined element return this.attr('href', (file || '') + '#' + element, xlink) } |