view.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. "use strict";
  2. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  3. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  4. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  5. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  6. return c > 3 && r && Object.defineProperty(target, key, r), r;
  7. };
  8. Object.defineProperty(exports, "__esModule", { value: true });
  9. exports.View = void 0;
  10. const x6_common_1 = require("@antv/x6-common");
  11. const config_1 = require("../config");
  12. class View extends x6_common_1.Basecoat {
  13. get priority() {
  14. return 2;
  15. }
  16. /** If need remove `this.container` DOM */
  17. get disposeContainer() {
  18. return true;
  19. }
  20. constructor() {
  21. super();
  22. this.cid = Private.uniqueId();
  23. View.views[this.cid] = this;
  24. }
  25. // eslint-disable-next-line @typescript-eslint/no-unused-vars
  26. confirmUpdate(flag, options) {
  27. return 0;
  28. }
  29. empty(elem = this.container) {
  30. x6_common_1.Dom.empty(elem);
  31. return this;
  32. }
  33. unmount(elem = this.container) {
  34. x6_common_1.Dom.remove(elem);
  35. return this;
  36. }
  37. remove(elem = this.container) {
  38. if (elem === this.container) {
  39. this.removeEventListeners(document);
  40. this.onRemove();
  41. delete View.views[this.cid];
  42. if (this.disposeContainer) {
  43. this.unmount(elem);
  44. }
  45. }
  46. else {
  47. this.unmount(elem);
  48. }
  49. return this;
  50. }
  51. onRemove() { }
  52. setClass(className, elem = this.container) {
  53. elem.classList.value = Array.isArray(className)
  54. ? className.join(' ')
  55. : className;
  56. }
  57. addClass(className, elem = this.container) {
  58. x6_common_1.Dom.addClass(elem, Array.isArray(className) ? className.join(' ') : className);
  59. return this;
  60. }
  61. removeClass(className, elem = this.container) {
  62. x6_common_1.Dom.removeClass(elem, Array.isArray(className) ? className.join(' ') : className);
  63. return this;
  64. }
  65. setStyle(style, elem = this.container) {
  66. x6_common_1.Dom.css(elem, style);
  67. return this;
  68. }
  69. setAttrs(attrs, elem = this.container) {
  70. if (attrs != null && elem != null) {
  71. x6_common_1.Dom.attr(elem, attrs);
  72. }
  73. return this;
  74. }
  75. /**
  76. * Returns the value of the specified attribute of `node`.
  77. *
  78. * If the node does not set a value for attribute, start recursing up
  79. * the DOM tree from node to lookup for attribute at the ancestors of
  80. * node. If the recursion reaches CellView's root node and attribute
  81. * is not found even there, return `null`.
  82. */
  83. findAttr(attrName, elem = this.container) {
  84. let current = elem;
  85. while (current && current.nodeType === 1) {
  86. const value = current.getAttribute(attrName);
  87. if (value != null) {
  88. return value;
  89. }
  90. if (current === this.container) {
  91. return null;
  92. }
  93. current = current.parentNode;
  94. }
  95. return null;
  96. }
  97. find(selector, rootElem = this.container, selectors = this.selectors) {
  98. return View.find(selector, rootElem, selectors).elems;
  99. }
  100. findOne(selector, rootElem = this.container, selectors = this.selectors) {
  101. const nodes = this.find(selector, rootElem, selectors);
  102. return nodes.length > 0 ? nodes[0] : null;
  103. }
  104. findByAttr(attrName, elem = this.container) {
  105. let node = elem;
  106. while (node && node.getAttribute) {
  107. const val = node.getAttribute(attrName);
  108. if ((val != null || node === this.container) && val !== 'false') {
  109. return node;
  110. }
  111. node = node.parentNode;
  112. }
  113. // If the overall cell has set `magnet === false`, then returns
  114. // `null` to announce there is no magnet found for this cell.
  115. // This is especially useful to set on cells that have 'ports'.
  116. // In this case, only the ports have set `magnet === true` and the
  117. // overall element has `magnet === false`.
  118. return null;
  119. }
  120. getSelector(elem, prevSelector) {
  121. let selector;
  122. if (elem === this.container) {
  123. if (typeof prevSelector === 'string') {
  124. selector = `> ${prevSelector}`;
  125. }
  126. return selector;
  127. }
  128. if (elem) {
  129. const nth = x6_common_1.Dom.index(elem) + 1;
  130. selector = `${elem.tagName.toLowerCase()}:nth-child(${nth})`;
  131. if (prevSelector) {
  132. selector += ` > ${prevSelector}`;
  133. }
  134. selector = this.getSelector(elem.parentNode, selector);
  135. }
  136. return selector;
  137. }
  138. prefixClassName(className) {
  139. return config_1.Config.prefix(className);
  140. }
  141. delegateEvents(events, append) {
  142. if (events == null) {
  143. return this;
  144. }
  145. if (!append) {
  146. this.undelegateEvents();
  147. }
  148. const splitter = /^(\S+)\s*(.*)$/;
  149. Object.keys(events).forEach((key) => {
  150. const match = key.match(splitter);
  151. if (match == null) {
  152. return;
  153. }
  154. const method = this.getEventHandler(events[key]);
  155. if (typeof method === 'function') {
  156. this.delegateEvent(match[1], match[2], method);
  157. }
  158. });
  159. return this;
  160. }
  161. undelegateEvents() {
  162. x6_common_1.Dom.Event.off(this.container, this.getEventNamespace());
  163. return this;
  164. }
  165. delegateDocumentEvents(events, data) {
  166. this.addEventListeners(document, events, data);
  167. return this;
  168. }
  169. undelegateDocumentEvents() {
  170. this.removeEventListeners(document);
  171. return this;
  172. }
  173. delegateEvent(eventName, selector, listener) {
  174. x6_common_1.Dom.Event.on(this.container, eventName + this.getEventNamespace(), selector, listener);
  175. return this;
  176. }
  177. undelegateEvent(eventName, selector, listener) {
  178. const name = eventName + this.getEventNamespace();
  179. if (selector == null) {
  180. x6_common_1.Dom.Event.off(this.container, name);
  181. }
  182. else if (typeof selector === 'string') {
  183. x6_common_1.Dom.Event.off(this.container, name, selector, listener);
  184. }
  185. else {
  186. x6_common_1.Dom.Event.off(this.container, name, selector);
  187. }
  188. return this;
  189. }
  190. addEventListeners(elem, events, data) {
  191. if (events == null) {
  192. return this;
  193. }
  194. const ns = this.getEventNamespace();
  195. Object.keys(events).forEach((eventName) => {
  196. const method = this.getEventHandler(events[eventName]);
  197. if (typeof method === 'function') {
  198. x6_common_1.Dom.Event.on(elem, eventName + ns, data, method);
  199. }
  200. });
  201. return this;
  202. }
  203. removeEventListeners(elem) {
  204. if (elem != null) {
  205. x6_common_1.Dom.Event.off(elem, this.getEventNamespace());
  206. }
  207. return this;
  208. }
  209. getEventNamespace() {
  210. return `.${config_1.Config.prefixCls}-event-${this.cid}`;
  211. }
  212. // eslint-disable-next-line
  213. getEventHandler(handler) {
  214. // eslint-disable-next-line
  215. let method;
  216. if (typeof handler === 'string') {
  217. const fn = this[handler];
  218. if (typeof fn === 'function') {
  219. method = (...args) => fn.call(this, ...args);
  220. }
  221. }
  222. else {
  223. method = (...args) => handler.call(this, ...args);
  224. }
  225. return method;
  226. }
  227. getEventTarget(e, options = {}) {
  228. // Touchmove/Touchend event's target is not reflecting the element
  229. // under the coordinates as mousemove does.
  230. // It holds the element when a touchstart triggered.
  231. const { target, type, clientX = 0, clientY = 0 } = e;
  232. if (options.fromPoint || type === 'touchmove' || type === 'touchend') {
  233. return document.elementFromPoint(clientX, clientY);
  234. }
  235. return target;
  236. }
  237. stopPropagation(e) {
  238. this.setEventData(e, { propagationStopped: true });
  239. return this;
  240. }
  241. isPropagationStopped(e) {
  242. return this.getEventData(e).propagationStopped === true;
  243. }
  244. getEventData(e) {
  245. return this.eventData(e);
  246. }
  247. setEventData(e, data) {
  248. return this.eventData(e, data);
  249. }
  250. eventData(e, data) {
  251. if (e == null) {
  252. throw new TypeError('Event object required');
  253. }
  254. let currentData = e.data;
  255. const key = `__${this.cid}__`;
  256. // get
  257. if (data == null) {
  258. if (currentData == null) {
  259. return {};
  260. }
  261. return currentData[key] || {};
  262. }
  263. // set
  264. if (currentData == null) {
  265. currentData = e.data = {};
  266. }
  267. if (currentData[key] == null) {
  268. currentData[key] = Object.assign({}, data);
  269. }
  270. else {
  271. currentData[key] = Object.assign(Object.assign({}, currentData[key]), data);
  272. }
  273. return currentData[key];
  274. }
  275. normalizeEvent(evt) {
  276. return View.normalizeEvent(evt);
  277. }
  278. dispose() {
  279. this.remove();
  280. }
  281. }
  282. __decorate([
  283. View.dispose()
  284. ], View.prototype, "dispose", null);
  285. exports.View = View;
  286. (function (View) {
  287. function createElement(tagName, isSvgElement) {
  288. return isSvgElement
  289. ? x6_common_1.Dom.createSvgElement(tagName || 'g')
  290. : x6_common_1.Dom.createElementNS(tagName || 'div');
  291. }
  292. View.createElement = createElement;
  293. function find(selector, rootElem, selectors) {
  294. if (!selector || selector === '.') {
  295. return { elems: [rootElem] };
  296. }
  297. if (selectors) {
  298. const nodes = selectors[selector];
  299. if (nodes) {
  300. return { elems: Array.isArray(nodes) ? nodes : [nodes] };
  301. }
  302. }
  303. if (config_1.Config.useCSSSelector) {
  304. const validSelector = selector.includes('>')
  305. ? `:scope ${selector}`
  306. : selector;
  307. return {
  308. isCSSSelector: true,
  309. // $(rootElem).find(selector).toArray() as Element[]
  310. elems: Array.prototype.slice.call(rootElem.querySelectorAll(validSelector)),
  311. };
  312. }
  313. return { elems: [] };
  314. }
  315. View.find = find;
  316. function normalizeEvent(evt) {
  317. let normalizedEvent = evt;
  318. const originalEvent = evt.originalEvent;
  319. const touchEvt = originalEvent &&
  320. originalEvent.changedTouches &&
  321. originalEvent.changedTouches[0];
  322. if (touchEvt) {
  323. // eslint-disable-next-line no-restricted-syntax
  324. for (const key in evt) {
  325. if (touchEvt[key] === undefined) {
  326. touchEvt[key] = evt[key];
  327. }
  328. }
  329. normalizedEvent = touchEvt;
  330. }
  331. return normalizedEvent;
  332. }
  333. View.normalizeEvent = normalizeEvent;
  334. })(View = exports.View || (exports.View = {}));
  335. (function (View) {
  336. View.views = {};
  337. function getView(cid) {
  338. return View.views[cid] || null;
  339. }
  340. View.getView = getView;
  341. })(View = exports.View || (exports.View = {}));
  342. var Private;
  343. (function (Private) {
  344. let counter = 0;
  345. function uniqueId() {
  346. const id = `v${counter}`;
  347. counter += 1;
  348. return id;
  349. }
  350. Private.uniqueId = uniqueId;
  351. })(Private || (Private = {}));
  352. //# sourceMappingURL=view.js.map