index.esm.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831
  1. function ensureImported(element, target) {
  2. if (element.ownerDocument !== target.ownerDocument) {
  3. try {
  4. // may fail on webkit
  5. return target.ownerDocument.importNode(element, true);
  6. } catch (e) {
  7. // ignore
  8. }
  9. }
  10. return element;
  11. }
  12. /**
  13. * appendTo utility
  14. */
  15. /**
  16. * Append a node to a target element and return the appended node.
  17. *
  18. * @param {SVGElement} element
  19. * @param {SVGElement} target
  20. *
  21. * @return {SVGElement} the appended node
  22. */
  23. function appendTo(element, target) {
  24. return target.appendChild(ensureImported(element, target));
  25. }
  26. /**
  27. * append utility
  28. */
  29. /**
  30. * Append a node to an element
  31. *
  32. * @param {SVGElement} element
  33. * @param {SVGElement} node
  34. *
  35. * @return {SVGElement} the element
  36. */
  37. function append(target, node) {
  38. appendTo(node, target);
  39. return target;
  40. }
  41. /**
  42. * attribute accessor utility
  43. */
  44. var LENGTH_ATTR = 2;
  45. var CSS_PROPERTIES = {
  46. 'alignment-baseline': 1,
  47. 'baseline-shift': 1,
  48. 'clip': 1,
  49. 'clip-path': 1,
  50. 'clip-rule': 1,
  51. 'color': 1,
  52. 'color-interpolation': 1,
  53. 'color-interpolation-filters': 1,
  54. 'color-profile': 1,
  55. 'color-rendering': 1,
  56. 'cursor': 1,
  57. 'direction': 1,
  58. 'display': 1,
  59. 'dominant-baseline': 1,
  60. 'enable-background': 1,
  61. 'fill': 1,
  62. 'fill-opacity': 1,
  63. 'fill-rule': 1,
  64. 'filter': 1,
  65. 'flood-color': 1,
  66. 'flood-opacity': 1,
  67. 'font': 1,
  68. 'font-family': 1,
  69. 'font-size': LENGTH_ATTR,
  70. 'font-size-adjust': 1,
  71. 'font-stretch': 1,
  72. 'font-style': 1,
  73. 'font-variant': 1,
  74. 'font-weight': 1,
  75. 'glyph-orientation-horizontal': 1,
  76. 'glyph-orientation-vertical': 1,
  77. 'image-rendering': 1,
  78. 'kerning': 1,
  79. 'letter-spacing': 1,
  80. 'lighting-color': 1,
  81. 'marker': 1,
  82. 'marker-end': 1,
  83. 'marker-mid': 1,
  84. 'marker-start': 1,
  85. 'mask': 1,
  86. 'opacity': 1,
  87. 'overflow': 1,
  88. 'pointer-events': 1,
  89. 'shape-rendering': 1,
  90. 'stop-color': 1,
  91. 'stop-opacity': 1,
  92. 'stroke': 1,
  93. 'stroke-dasharray': 1,
  94. 'stroke-dashoffset': 1,
  95. 'stroke-linecap': 1,
  96. 'stroke-linejoin': 1,
  97. 'stroke-miterlimit': 1,
  98. 'stroke-opacity': 1,
  99. 'stroke-width': LENGTH_ATTR,
  100. 'text-anchor': 1,
  101. 'text-decoration': 1,
  102. 'text-rendering': 1,
  103. 'unicode-bidi': 1,
  104. 'visibility': 1,
  105. 'word-spacing': 1,
  106. 'writing-mode': 1
  107. };
  108. function getAttribute(node, name) {
  109. if (CSS_PROPERTIES[name]) {
  110. return node.style[name];
  111. } else {
  112. return node.getAttributeNS(null, name);
  113. }
  114. }
  115. function setAttribute(node, name, value) {
  116. var hyphenated = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
  117. var type = CSS_PROPERTIES[hyphenated];
  118. if (type) {
  119. // append pixel unit, unless present
  120. if (type === LENGTH_ATTR && typeof value === 'number') {
  121. value = String(value) + 'px';
  122. }
  123. node.style[hyphenated] = value;
  124. } else {
  125. node.setAttributeNS(null, name, value);
  126. }
  127. }
  128. function setAttributes(node, attrs) {
  129. var names = Object.keys(attrs), i, name;
  130. for (i = 0, name; (name = names[i]); i++) {
  131. setAttribute(node, name, attrs[name]);
  132. }
  133. }
  134. /**
  135. * Gets or sets raw attributes on a node.
  136. *
  137. * @param {SVGElement} node
  138. * @param {Object} [attrs]
  139. * @param {String} [name]
  140. * @param {String} [value]
  141. *
  142. * @return {String}
  143. */
  144. function attr(node, name, value) {
  145. if (typeof name === 'string') {
  146. if (value !== undefined) {
  147. setAttribute(node, name, value);
  148. } else {
  149. return getAttribute(node, name);
  150. }
  151. } else {
  152. setAttributes(node, name);
  153. }
  154. return node;
  155. }
  156. /**
  157. * Clear utility
  158. */
  159. function index(arr, obj) {
  160. if (arr.indexOf) {
  161. return arr.indexOf(obj);
  162. }
  163. for (var i = 0; i < arr.length; ++i) {
  164. if (arr[i] === obj) {
  165. return i;
  166. }
  167. }
  168. return -1;
  169. }
  170. var re = /\s+/;
  171. var toString = Object.prototype.toString;
  172. function defined(o) {
  173. return typeof o !== 'undefined';
  174. }
  175. /**
  176. * Wrap `el` in a `ClassList`.
  177. *
  178. * @param {Element} el
  179. * @return {ClassList}
  180. * @api public
  181. */
  182. function classes(el) {
  183. return new ClassList(el);
  184. }
  185. function ClassList(el) {
  186. if (!el || !el.nodeType) {
  187. throw new Error('A DOM element reference is required');
  188. }
  189. this.el = el;
  190. this.list = el.classList;
  191. }
  192. /**
  193. * Add class `name` if not already present.
  194. *
  195. * @param {String} name
  196. * @return {ClassList}
  197. * @api public
  198. */
  199. ClassList.prototype.add = function(name) {
  200. // classList
  201. if (this.list) {
  202. this.list.add(name);
  203. return this;
  204. }
  205. // fallback
  206. var arr = this.array();
  207. var i = index(arr, name);
  208. if (!~i) {
  209. arr.push(name);
  210. }
  211. if (defined(this.el.className.baseVal)) {
  212. this.el.className.baseVal = arr.join(' ');
  213. } else {
  214. this.el.className = arr.join(' ');
  215. }
  216. return this;
  217. };
  218. /**
  219. * Remove class `name` when present, or
  220. * pass a regular expression to remove
  221. * any which match.
  222. *
  223. * @param {String|RegExp} name
  224. * @return {ClassList}
  225. * @api public
  226. */
  227. ClassList.prototype.remove = function(name) {
  228. if ('[object RegExp]' === toString.call(name)) {
  229. return this.removeMatching(name);
  230. }
  231. // classList
  232. if (this.list) {
  233. this.list.remove(name);
  234. return this;
  235. }
  236. // fallback
  237. var arr = this.array();
  238. var i = index(arr, name);
  239. if (~i) {
  240. arr.splice(i, 1);
  241. }
  242. this.el.className.baseVal = arr.join(' ');
  243. return this;
  244. };
  245. /**
  246. * Remove all classes matching `re`.
  247. *
  248. * @param {RegExp} re
  249. * @return {ClassList}
  250. * @api private
  251. */
  252. ClassList.prototype.removeMatching = function(re) {
  253. var arr = this.array();
  254. for (var i = 0; i < arr.length; i++) {
  255. if (re.test(arr[i])) {
  256. this.remove(arr[i]);
  257. }
  258. }
  259. return this;
  260. };
  261. /**
  262. * Toggle class `name`, can force state via `force`.
  263. *
  264. * For browsers that support classList, but do not support `force` yet,
  265. * the mistake will be detected and corrected.
  266. *
  267. * @param {String} name
  268. * @param {Boolean} force
  269. * @return {ClassList}
  270. * @api public
  271. */
  272. ClassList.prototype.toggle = function(name, force) {
  273. // classList
  274. if (this.list) {
  275. if (defined(force)) {
  276. if (force !== this.list.toggle(name, force)) {
  277. this.list.toggle(name); // toggle again to correct
  278. }
  279. } else {
  280. this.list.toggle(name);
  281. }
  282. return this;
  283. }
  284. // fallback
  285. if (defined(force)) {
  286. if (!force) {
  287. this.remove(name);
  288. } else {
  289. this.add(name);
  290. }
  291. } else {
  292. if (this.has(name)) {
  293. this.remove(name);
  294. } else {
  295. this.add(name);
  296. }
  297. }
  298. return this;
  299. };
  300. /**
  301. * Return an array of classes.
  302. *
  303. * @return {Array}
  304. * @api public
  305. */
  306. ClassList.prototype.array = function() {
  307. var className = this.el.getAttribute('class') || '';
  308. var str = className.replace(/^\s+|\s+$/g, '');
  309. var arr = str.split(re);
  310. if ('' === arr[0]) {
  311. arr.shift();
  312. }
  313. return arr;
  314. };
  315. /**
  316. * Check if class `name` is present.
  317. *
  318. * @param {String} name
  319. * @return {ClassList}
  320. * @api public
  321. */
  322. ClassList.prototype.has =
  323. ClassList.prototype.contains = function(name) {
  324. return (
  325. this.list ?
  326. this.list.contains(name) :
  327. !! ~index(this.array(), name)
  328. );
  329. };
  330. function remove(element) {
  331. var parent = element.parentNode;
  332. if (parent) {
  333. parent.removeChild(element);
  334. }
  335. return element;
  336. }
  337. /**
  338. * Clear utility
  339. */
  340. /**
  341. * Removes all children from the given element
  342. *
  343. * @param {DOMElement} element
  344. * @return {DOMElement} the element (for chaining)
  345. */
  346. function clear(element) {
  347. var child;
  348. while ((child = element.firstChild)) {
  349. remove(child);
  350. }
  351. return element;
  352. }
  353. function clone(element) {
  354. return element.cloneNode(true);
  355. }
  356. var ns = {
  357. svg: 'http://www.w3.org/2000/svg'
  358. };
  359. /**
  360. * DOM parsing utility
  361. */
  362. var SVG_START = '<svg xmlns="' + ns.svg + '"';
  363. function parse(svg) {
  364. var unwrap = false;
  365. // ensure we import a valid svg document
  366. if (svg.substring(0, 4) === '<svg') {
  367. if (svg.indexOf(ns.svg) === -1) {
  368. svg = SVG_START + svg.substring(4);
  369. }
  370. } else {
  371. // namespace svg
  372. svg = SVG_START + '>' + svg + '</svg>';
  373. unwrap = true;
  374. }
  375. var parsed = parseDocument(svg);
  376. if (!unwrap) {
  377. return parsed;
  378. }
  379. var fragment = document.createDocumentFragment();
  380. var parent = parsed.firstChild;
  381. while (parent.firstChild) {
  382. fragment.appendChild(parent.firstChild);
  383. }
  384. return fragment;
  385. }
  386. function parseDocument(svg) {
  387. var parser;
  388. // parse
  389. parser = new DOMParser();
  390. parser.async = false;
  391. return parser.parseFromString(svg, 'text/xml');
  392. }
  393. /**
  394. * Create utility for SVG elements
  395. */
  396. /**
  397. * Create a specific type from name or SVG markup.
  398. *
  399. * @param {String} name the name or markup of the element
  400. * @param {Object} [attrs] attributes to set on the element
  401. *
  402. * @returns {SVGElement}
  403. */
  404. function create(name, attrs) {
  405. var element;
  406. if (name.charAt(0) === '<') {
  407. element = parse(name).firstChild;
  408. element = document.importNode(element, true);
  409. } else {
  410. element = document.createElementNS(ns.svg, name);
  411. }
  412. if (attrs) {
  413. attr(element, attrs);
  414. }
  415. return element;
  416. }
  417. /**
  418. * Events handling utility
  419. */
  420. function on(node, event, listener, useCapture) {
  421. node.addEventListener(event, listener, useCapture);
  422. }
  423. function off(node, event, listener, useCapture) {
  424. node.removeEventListener(event, listener, useCapture);
  425. }
  426. /**
  427. * Geometry helpers
  428. */
  429. // fake node used to instantiate svg geometry elements
  430. var node = create('svg');
  431. function extend(object, props) {
  432. var i, k, keys = Object.keys(props);
  433. for (i = 0; (k = keys[i]); i++) {
  434. object[k] = props[k];
  435. }
  436. return object;
  437. }
  438. function createPoint(x, y) {
  439. var point = node.createSVGPoint();
  440. switch (arguments.length) {
  441. case 0:
  442. return point;
  443. case 2:
  444. x = {
  445. x: x,
  446. y: y
  447. };
  448. break;
  449. }
  450. return extend(point, x);
  451. }
  452. /**
  453. * Create matrix via args.
  454. *
  455. * @example
  456. *
  457. * createMatrix({ a: 1, b: 1 });
  458. * createMatrix();
  459. * createMatrix(1, 2, 0, 0, 30, 20);
  460. *
  461. * @return {SVGMatrix}
  462. */
  463. function createMatrix(a, b, c, d, e, f) {
  464. var matrix = node.createSVGMatrix();
  465. switch (arguments.length) {
  466. case 0:
  467. return matrix;
  468. case 1:
  469. return extend(matrix, a);
  470. case 6:
  471. return extend(matrix, {
  472. a: a,
  473. b: b,
  474. c: c,
  475. d: d,
  476. e: e,
  477. f: f
  478. });
  479. }
  480. }
  481. function createTransform(matrix) {
  482. if (matrix) {
  483. return node.createSVGTransformFromMatrix(matrix);
  484. } else {
  485. return node.createSVGTransform();
  486. }
  487. }
  488. /**
  489. * Serialization util
  490. */
  491. var TEXT_ENTITIES = /([&<>]{1})/g;
  492. var ATTR_ENTITIES = /([\n\r"]{1})/g;
  493. var ENTITY_REPLACEMENT = {
  494. '&': '&amp;',
  495. '<': '&lt;',
  496. '>': '&gt;',
  497. '"': '\''
  498. };
  499. function escape(str, pattern) {
  500. function replaceFn(match, entity) {
  501. return ENTITY_REPLACEMENT[entity] || entity;
  502. }
  503. return str.replace(pattern, replaceFn);
  504. }
  505. function serialize(node, output) {
  506. var i, len, attrMap, attrNode, childNodes;
  507. switch (node.nodeType) {
  508. // TEXT
  509. case 3:
  510. // replace special XML characters
  511. output.push(escape(node.textContent, TEXT_ENTITIES));
  512. break;
  513. // ELEMENT
  514. case 1:
  515. output.push('<', node.tagName);
  516. if (node.hasAttributes()) {
  517. attrMap = node.attributes;
  518. for (i = 0, len = attrMap.length; i < len; ++i) {
  519. attrNode = attrMap.item(i);
  520. output.push(' ', attrNode.name, '="', escape(attrNode.value, ATTR_ENTITIES), '"');
  521. }
  522. }
  523. if (node.hasChildNodes()) {
  524. output.push('>');
  525. childNodes = node.childNodes;
  526. for (i = 0, len = childNodes.length; i < len; ++i) {
  527. serialize(childNodes.item(i), output);
  528. }
  529. output.push('</', node.tagName, '>');
  530. } else {
  531. output.push('/>');
  532. }
  533. break;
  534. // COMMENT
  535. case 8:
  536. output.push('<!--', escape(node.nodeValue, TEXT_ENTITIES), '-->');
  537. break;
  538. // CDATA
  539. case 4:
  540. output.push('<![CDATA[', node.nodeValue, ']]>');
  541. break;
  542. default:
  543. throw new Error('unable to handle node ' + node.nodeType);
  544. }
  545. return output;
  546. }
  547. /**
  548. * innerHTML like functionality for SVG elements.
  549. * based on innerSVG (https://code.google.com/p/innersvg)
  550. */
  551. function set(element, svg) {
  552. var parsed = parse(svg);
  553. // clear element contents
  554. clear(element);
  555. if (!svg) {
  556. return;
  557. }
  558. if (!isFragment(parsed)) {
  559. // extract <svg> from parsed document
  560. parsed = parsed.documentElement;
  561. }
  562. var nodes = slice(parsed.childNodes);
  563. // import + append each node
  564. for (var i = 0; i < nodes.length; i++) {
  565. appendTo(nodes[i], element);
  566. }
  567. }
  568. function get(element) {
  569. var child = element.firstChild,
  570. output = [];
  571. while (child) {
  572. serialize(child, output);
  573. child = child.nextSibling;
  574. }
  575. return output.join('');
  576. }
  577. function isFragment(node) {
  578. return node.nodeName === '#document-fragment';
  579. }
  580. function innerSVG(element, svg) {
  581. if (svg !== undefined) {
  582. try {
  583. set(element, svg);
  584. } catch (e) {
  585. throw new Error('error parsing SVG: ' + e.message);
  586. }
  587. return element;
  588. } else {
  589. return get(element);
  590. }
  591. }
  592. function slice(arr) {
  593. return Array.prototype.slice.call(arr);
  594. }
  595. /**
  596. * Selection utilities
  597. */
  598. function select(node, selector) {
  599. return node.querySelector(selector);
  600. }
  601. function selectAll(node, selector) {
  602. var nodes = node.querySelectorAll(selector);
  603. return [].map.call(nodes, function(element) {
  604. return element;
  605. });
  606. }
  607. /**
  608. * prependTo utility
  609. */
  610. /**
  611. * Prepend a node to a target element and return the prepended node.
  612. *
  613. * @param {SVGElement} node
  614. * @param {SVGElement} target
  615. *
  616. * @return {SVGElement} the prepended node
  617. */
  618. function prependTo(node, target) {
  619. return target.insertBefore(ensureImported(node, target), target.firstChild || null);
  620. }
  621. /**
  622. * prepend utility
  623. */
  624. /**
  625. * Prepend a node to a target element
  626. *
  627. * @param {SVGElement} target
  628. * @param {SVGElement} node
  629. *
  630. * @return {SVGElement} the target element
  631. */
  632. function prepend(target, node) {
  633. prependTo(node, target);
  634. return target;
  635. }
  636. /**
  637. * Replace utility
  638. */
  639. function replace(element, replacement) {
  640. element.parentNode.replaceChild(ensureImported(replacement, element), element);
  641. return replacement;
  642. }
  643. /**
  644. * transform accessor utility
  645. */
  646. function wrapMatrix(transformList, transform) {
  647. if (transform instanceof SVGMatrix) {
  648. return transformList.createSVGTransformFromMatrix(transform);
  649. }
  650. return transform;
  651. }
  652. function setTransforms(transformList, transforms) {
  653. var i, t;
  654. transformList.clear();
  655. for (i = 0; (t = transforms[i]); i++) {
  656. transformList.appendItem(wrapMatrix(transformList, t));
  657. }
  658. }
  659. /**
  660. * Get or set the transforms on the given node.
  661. *
  662. * @param {SVGElement} node
  663. * @param {SVGTransform|SVGMatrix|Array<SVGTransform|SVGMatrix>} [transforms]
  664. *
  665. * @return {SVGTransform} the consolidated transform
  666. */
  667. function transform(node, transforms) {
  668. var transformList = node.transform.baseVal;
  669. if (transforms) {
  670. if (!Array.isArray(transforms)) {
  671. transforms = [ transforms ];
  672. }
  673. setTransforms(transformList, transforms);
  674. }
  675. return transformList.consolidate();
  676. }
  677. export { append, appendTo, attr, classes, clear, clone, create, innerSVG, prepend, prependTo, remove, replace, transform, on, off, createPoint, createMatrix, createTransform, select, selectAll };