index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. import * as Dom from '../dom/main';
  2. export class Vector {
  3. get [Symbol.toStringTag]() {
  4. return Vector.toStringTag;
  5. }
  6. get type() {
  7. return this.node.nodeName;
  8. }
  9. get id() {
  10. return this.node.id;
  11. }
  12. set id(id) {
  13. this.node.id = id;
  14. }
  15. constructor(elem, attrs, children) {
  16. if (!elem) {
  17. throw new TypeError('Invalid element to create vector');
  18. }
  19. let node;
  20. if (Vector.isVector(elem)) {
  21. node = elem.node;
  22. }
  23. else if (typeof elem === 'string') {
  24. if (elem.toLowerCase() === 'svg') {
  25. node = Dom.createSvgDocument();
  26. }
  27. else if (elem[0] === '<') {
  28. const doc = Dom.createSvgDocument(elem);
  29. // only import the first child
  30. node = document.importNode(doc.firstChild, true);
  31. }
  32. else {
  33. node = document.createElementNS(Dom.ns.svg, elem);
  34. }
  35. }
  36. else {
  37. node = elem;
  38. }
  39. this.node = node;
  40. if (attrs) {
  41. this.setAttributes(attrs);
  42. }
  43. if (children) {
  44. this.append(children);
  45. }
  46. }
  47. transform(matrix, options) {
  48. if (matrix == null) {
  49. return Dom.transform(this.node);
  50. }
  51. Dom.transform(this.node, matrix, options);
  52. return this;
  53. }
  54. translate(tx, ty = 0, options = {}) {
  55. if (tx == null) {
  56. return Dom.translate(this.node);
  57. }
  58. Dom.translate(this.node, tx, ty, options);
  59. return this;
  60. }
  61. rotate(angle, cx, cy, options = {}) {
  62. if (angle == null) {
  63. return Dom.rotate(this.node);
  64. }
  65. Dom.rotate(this.node, angle, cx, cy, options);
  66. return this;
  67. }
  68. scale(sx, sy) {
  69. if (sx == null) {
  70. return Dom.scale(this.node);
  71. }
  72. Dom.scale(this.node, sx, sy);
  73. return this;
  74. }
  75. /**
  76. * Returns an SVGMatrix that specifies the transformation necessary
  77. * to convert this coordinate system into `target` coordinate system.
  78. */
  79. getTransformToElement(target) {
  80. const ref = Vector.toNode(target);
  81. return Dom.getTransformToElement(this.node, ref);
  82. }
  83. removeAttribute(name) {
  84. Dom.removeAttribute(this.node, name);
  85. return this;
  86. }
  87. getAttribute(name) {
  88. return Dom.getAttribute(this.node, name);
  89. }
  90. setAttribute(name, value) {
  91. Dom.setAttribute(this.node, name, value);
  92. return this;
  93. }
  94. setAttributes(attrs) {
  95. Dom.setAttributes(this.node, attrs);
  96. return this;
  97. }
  98. attr(name, value) {
  99. if (name == null) {
  100. return Dom.attr(this.node);
  101. }
  102. if (typeof name === 'string' && value === undefined) {
  103. return Dom.attr(this.node, name);
  104. }
  105. if (typeof name === 'object') {
  106. Dom.attr(this.node, name);
  107. }
  108. else {
  109. Dom.attr(this.node, name, value);
  110. }
  111. return this;
  112. }
  113. svg() {
  114. return this.node instanceof SVGSVGElement
  115. ? this
  116. : Vector.create(this.node.ownerSVGElement);
  117. }
  118. defs() {
  119. const context = this.svg() || this;
  120. const defsNode = context.node.getElementsByTagName('defs')[0];
  121. if (defsNode) {
  122. return Vector.create(defsNode);
  123. }
  124. return Vector.create('defs').appendTo(context);
  125. }
  126. text(content, options = {}) {
  127. Dom.text(this.node, content, options);
  128. return this;
  129. }
  130. tagName() {
  131. return Dom.tagName(this.node);
  132. }
  133. clone() {
  134. return Vector.create(this.node.cloneNode(true));
  135. }
  136. remove() {
  137. Dom.remove(this.node);
  138. return this;
  139. }
  140. empty() {
  141. Dom.empty(this.node);
  142. return this;
  143. }
  144. append(elems) {
  145. Dom.append(this.node, Vector.toNodes(elems));
  146. return this;
  147. }
  148. appendTo(target) {
  149. Dom.appendTo(this.node, Vector.isVector(target) ? target.node : target);
  150. return this;
  151. }
  152. prepend(elems) {
  153. Dom.prepend(this.node, Vector.toNodes(elems));
  154. return this;
  155. }
  156. before(elems) {
  157. Dom.before(this.node, Vector.toNodes(elems));
  158. return this;
  159. }
  160. replace(elem) {
  161. if (this.node.parentNode) {
  162. this.node.parentNode.replaceChild(Vector.toNode(elem), this.node);
  163. }
  164. return Vector.create(elem);
  165. }
  166. first() {
  167. return this.node.firstChild
  168. ? Vector.create(this.node.firstChild)
  169. : null;
  170. }
  171. last() {
  172. return this.node.lastChild
  173. ? Vector.create(this.node.lastChild)
  174. : null;
  175. }
  176. get(index) {
  177. const child = this.node.childNodes[index];
  178. return child ? Vector.create(child) : null;
  179. }
  180. indexOf(elem) {
  181. const children = Array.prototype.slice.call(this.node.childNodes);
  182. return children.indexOf(Vector.toNode(elem));
  183. }
  184. find(selector) {
  185. const vels = [];
  186. const nodes = Dom.find(this.node, selector);
  187. if (nodes) {
  188. for (let i = 0, ii = nodes.length; i < ii; i += 1) {
  189. vels.push(Vector.create(nodes[i]));
  190. }
  191. }
  192. return vels;
  193. }
  194. findOne(selector) {
  195. const found = Dom.findOne(this.node, selector);
  196. return found ? Vector.create(found) : null;
  197. }
  198. findParentByClass(className, terminator) {
  199. const node = Dom.findParentByClass(this.node, className, terminator);
  200. return node ? Vector.create(node) : null;
  201. }
  202. matches(selector) {
  203. const node = this.node;
  204. const matches = this.node.matches;
  205. const matcher = node.matches ||
  206. node.matchesSelector ||
  207. node.msMatchesSelector ||
  208. node.mozMatchesSelector ||
  209. node.webkitMatchesSelector ||
  210. node.oMatchesSelector ||
  211. null;
  212. return matcher && matcher.call(node, selector);
  213. }
  214. contains(child) {
  215. return Dom.contains(this.node, Vector.isVector(child) ? child.node : child);
  216. }
  217. wrap(node) {
  218. const vel = Vector.create(node);
  219. const parentNode = this.node.parentNode;
  220. if (parentNode != null) {
  221. parentNode.insertBefore(vel.node, this.node);
  222. }
  223. return vel.append(this);
  224. }
  225. parent(type) {
  226. let parent = this; // eslint-disable-line @typescript-eslint/no-this-alias
  227. // check for parent
  228. if (parent.node.parentNode == null) {
  229. return null;
  230. }
  231. // get parent element
  232. parent = Vector.create(parent.node.parentNode);
  233. if (type == null) {
  234. return parent;
  235. }
  236. // loop trough ancestors if type is given
  237. do {
  238. if (typeof type === 'string' ? parent.matches(type) : parent instanceof type) {
  239. return parent;
  240. }
  241. } while ((parent = Vector.create(parent.node.parentNode)));
  242. return parent;
  243. }
  244. children() {
  245. const children = this.node.childNodes;
  246. const vels = [];
  247. for (let i = 0; i < children.length; i += 1) {
  248. const currentChild = children[i];
  249. if (currentChild.nodeType === 1) {
  250. vels.push(Vector.create(children[i]));
  251. }
  252. }
  253. return vels;
  254. }
  255. eachChild(fn, deep) {
  256. const children = this.children();
  257. for (let i = 0, l = children.length; i < l; i += 1) {
  258. fn.call(children[i], children[i], i, children);
  259. if (deep) {
  260. children[i].eachChild(fn, deep);
  261. }
  262. }
  263. return this;
  264. }
  265. index() {
  266. return Dom.index(this.node);
  267. }
  268. hasClass(className) {
  269. return Dom.hasClass(this.node, className);
  270. }
  271. addClass(className) {
  272. Dom.addClass(this.node, className);
  273. return this;
  274. }
  275. removeClass(className) {
  276. Dom.removeClass(this.node, className);
  277. return this;
  278. }
  279. toggleClass(className, stateVal) {
  280. Dom.toggleClass(this.node, className, stateVal);
  281. return this;
  282. }
  283. toLocalPoint(x, y) {
  284. return Dom.toLocalPoint(this.node, x, y);
  285. }
  286. /**
  287. * Samples the underlying SVG element (it currently works only on
  288. * paths - where it is most useful anyway). Returns an array of objects
  289. * of the form `{ x: Number, y: Number, distance: Number }`. Each of these
  290. * objects represent a point on the path. This basically creates a discrete
  291. * representation of the path (which is possible a curve). The sampling
  292. * interval defines the accuracy of the sampling. In other words, we travel
  293. * from the beginning of the path to the end by interval distance (on the
  294. * path, not between the resulting points) and collect the discrete points
  295. * on the path. This is very useful in many situations. For example, SVG
  296. * does not provide a built-in mechanism to find intersections between two
  297. * paths. Using sampling, we can just generate bunch of points for each of
  298. * the path and find the closest ones from each set.
  299. */
  300. sample(interval = 1) {
  301. if (this.node instanceof SVGPathElement) {
  302. return Dom.sample(this.node, interval);
  303. }
  304. return [];
  305. }
  306. toPath() {
  307. return Vector.create(Dom.toPath(this.node));
  308. }
  309. toPathData() {
  310. return Dom.toPathData(this.node);
  311. }
  312. }
  313. (function (Vector) {
  314. Vector.toStringTag = `X6.${Vector.name}`;
  315. function isVector(instance) {
  316. if (instance == null) {
  317. return false;
  318. }
  319. if (instance instanceof Vector) {
  320. return true;
  321. }
  322. const tag = instance[Symbol.toStringTag];
  323. const vector = instance;
  324. if ((tag == null || tag === Vector.toStringTag) &&
  325. vector.node instanceof SVGElement &&
  326. typeof vector.sample === 'function' &&
  327. typeof vector.toPath === 'function') {
  328. return true;
  329. }
  330. return false;
  331. }
  332. Vector.isVector = isVector;
  333. function create(elem, attrs, children) {
  334. return new Vector(elem, attrs, children);
  335. }
  336. Vector.create = create;
  337. function createVectors(markup) {
  338. if (markup[0] === '<') {
  339. const svgDoc = Dom.createSvgDocument(markup);
  340. const vels = [];
  341. for (let i = 0, ii = svgDoc.childNodes.length; i < ii; i += 1) {
  342. const childNode = svgDoc.childNodes[i];
  343. vels.push(create(document.importNode(childNode, true)));
  344. }
  345. return vels;
  346. }
  347. return [create(markup)];
  348. }
  349. Vector.createVectors = createVectors;
  350. function toNode(elem) {
  351. if (isVector(elem)) {
  352. return elem.node;
  353. }
  354. return elem;
  355. }
  356. Vector.toNode = toNode;
  357. function toNodes(elems) {
  358. if (Array.isArray(elems)) {
  359. return elems.map((elem) => toNode(elem));
  360. }
  361. return [toNode(elems)];
  362. }
  363. Vector.toNodes = toNodes;
  364. })(Vector || (Vector = {}));
  365. //# sourceMappingURL=index.js.map