APIs

Show:
  1. /**
  2. * @namespace flexygo.ui.wc
  3. */
  4. var flexygo;
  5. (function (flexygo) {
  6. var ui;
  7. (function (ui) {
  8. var wc;
  9. (function (wc) {
  10. /**
  11. * Library for the FlxNavElement web component.
  12. *
  13. * @class FlxAreaElement
  14. * @constructor
  15. * @return {FlxAreaElement}
  16. */
  17. class FlxAreaElementBreadCrumbItem {
  18. }
  19. wc.FlxAreaElementBreadCrumbItem = FlxAreaElementBreadCrumbItem;
  20. class FlxAreaElement extends HTMLElement {
  21. constructor() {
  22. super();
  23. /**
  24. * Set when component is attached to DOM
  25. * @property connected {boolean}
  26. */
  27. this.connected = false;
  28. this.method = null;
  29. this.methodParams = null;
  30. this.backNode = null;
  31. this.initNode = null;
  32. this.currentNode = null;
  33. this.breadcrumArray = [];
  34. }
  35. /**
  36. * Fires when element is attached to DOM
  37. * @method connectedCallback
  38. */
  39. connectedCallback() {
  40. let navBar = $(this);
  41. if (navBar.attr('manualInit') != 'true') {
  42. this.init();
  43. }
  44. }
  45. static get observedAttributes() {
  46. return [];
  47. }
  48. /**
  49. * Fires when the attribute value of the element is changed.
  50. * @method attributeChangedCallback
  51. * @param {String} attrName. The attribute name
  52. * @param {String} oldVal. The old value
  53. * @param {String} newVal.the new value
  54. */
  55. attributeChangedCallback(attrName, oldVal, newVal) {
  56. if (!this.connected) {
  57. return;
  58. }
  59. this.init();
  60. }
  61. /**
  62. * Init the webcomponent.
  63. * @method init
  64. */
  65. init() {
  66. $(this).removeAttr('manualInit');
  67. this.uuid = flexygo.utils.uniqueUUID();
  68. let navBar = $(this);
  69. navBar.empty();
  70. this.connected = true;
  71. let initNode = navBar.attr('initNode');
  72. navBar.attr('original-mode', navBar.attr('mode'));
  73. this.method = 'GetAreaNode';
  74. this.methodParams = { ParentId: initNode };
  75. this.initNode = initNode;
  76. this.loadNodes();
  77. }
  78. /**
  79. * Refresh de webcomponent.
  80. * @method refresh
  81. */
  82. refresh() {
  83. if ($(this).attr('manualInit') != 'true') {
  84. $(this).empty();
  85. this.loadNodes();
  86. }
  87. }
  88. /**
  89. * Does post to load Areas Nodes.
  90. * @method loadNodes
  91. */
  92. loadNodes() {
  93. flexygo.ajax.post('~/api/Navigation', this.method, this.methodParams, (response) => {
  94. let arrOrdered = flexygo.utils.sortObject(response, 'Order');
  95. this.loadNodesRet(arrOrdered);
  96. });
  97. }
  98. /**
  99. * loads Nodes with post result.
  100. * @method loadNodesRet
  101. * @param {Array} ret. an array with the nodes
  102. */
  103. loadNodesRet(ret) {
  104. let me = $(this);
  105. let cnt = '';
  106. let parentNode = null;
  107. ret.forEach((n) => {
  108. if (n.NodeId.toLowerCase() !== this.initNode.toLowerCase()) {
  109. cnt +=
  110. `<li>
  111. <span class="icon-cont">
  112. <i class="${n.IconClass}"></i>
  113. </span>
  114. <h3>${n.Title}</h3>
  115. <div class="iconright" data-divein="${n.NodeId}" data-title="${n.Title}">
  116. <i class="flx-icon icon-arrow-2"></i>
  117. </div>
  118. <div class="iconback ${this.getNoShow(n, 'parent')}">
  119. <i class="flx-icon icon-arrow-2 icon-flip-horizontal"></i>
  120. </div>
  121. </li>
  122. `;
  123. }
  124. else {
  125. this.backNode = n.ParentNodeId;
  126. parentNode = n;
  127. }
  128. });
  129. let headerTemplate = `${this.getBreadcrum(parentNode)}<div class="child-nodes" style="display:none"></div>`;
  130. me.append(headerTemplate);
  131. let elem = $('<ul/>').html(cnt).first();
  132. let i = me.find('.child-nodes');
  133. i.html(elem);
  134. i.show('slide', {}, 500);
  135. me.append(`<div id="${this.uuid}" style= "min-height:600px;"></div>`);
  136. //me.append(`<div id="${this.uuid}"></div>`);
  137. me.find('div.iconright').off('click').on('click', (e) => {
  138. let nodeid = $(e.currentTarget).attr('data-divein');
  139. let title = $(e.currentTarget).attr('data-title');
  140. this.diveIn(nodeid, title);
  141. });
  142. me.find('div.iconback').off('click').on('click', (e) => {
  143. this.goBack();
  144. });
  145. me.find('nav').find('li').off('click').on('click', (e) => {
  146. let id = $(e.currentTarget).attr('data-id');
  147. this.goNode(id);
  148. });
  149. let arrNodes = [];
  150. let arrEdges = [];
  151. this.currentNode = parentNode;
  152. if (parentNode && parentNode.WebComponent && parentNode.WebComponent.length > 0) {
  153. let data = JSON.parse(parentNode.WebComponent);
  154. let datanodes = data.Nodes;
  155. datanodes.forEach((n) => {
  156. //console.log('node', n);
  157. let title = flexygo.localization.translate(n.Title);
  158. if (n.Icon && n.Icon.length > 0) {
  159. arrNodes.push({
  160. id: n.Id,
  161. label: n.Label,
  162. shape: n.Shape,
  163. title: title,
  164. hidden: false,
  165. icon: {
  166. face: n.Face,
  167. color: n.Color,
  168. code: this.toUnicode(n.Icon)
  169. },
  170. x: n.PosX,
  171. y: n.PosY,
  172. fixed: true,
  173. infoSource: n.InfoSource,
  174. infoTarget: n.InfoTarget,
  175. expandable: n.Expandable,
  176. isObject: n.IsObject,
  177. isProcess: false,
  178. isExpanded: false
  179. });
  180. }
  181. else {
  182. arrNodes.push({
  183. id: n.Id,
  184. label: n.Label,
  185. shape: n.Shape,
  186. color: n.Color,
  187. title: title,
  188. hidden: false,
  189. x: n.PosX,
  190. y: n.PosY,
  191. fixed: true,
  192. infoSource: n.InfoSource,
  193. infoTarget: n.InfoTarget,
  194. expandable: n.Expandable,
  195. isObject: n.IsObject,
  196. isProcess: false,
  197. isExpanded: false
  198. });
  199. }
  200. });
  201. let dataedges = data.Edges;
  202. dataedges.forEach((n) => {
  203. //console.log('edge', n);
  204. arrEdges.push({
  205. from: n.NodeFrom,
  206. to: n.NodeTo,
  207. color: {
  208. color: n.Color,
  209. },
  210. });
  211. });
  212. }
  213. this.nodes = new vis.DataSet(arrNodes);
  214. this.edges = new vis.DataSet(arrEdges);
  215. let data = {
  216. nodes: this.nodes,
  217. edges: this.edges
  218. };
  219. let options = {
  220. autoResize: true,
  221. height: '100%',
  222. width: '100%',
  223. nodes: {
  224. shape: 'box',
  225. borderWidth: 2,
  226. shadow: true
  227. },
  228. edges: {
  229. smooth: {
  230. enabled: true,
  231. type: "diagonalCross",
  232. forceDirection: "none",
  233. roundness: 0
  234. },
  235. width: 2,
  236. shadow: true
  237. },
  238. physics: {
  239. repulsion: {
  240. nodeDistance: 100
  241. },
  242. minVelocity: 0.75,
  243. solver: "repulsion"
  244. },
  245. interaction: {
  246. dragNodes: false // do not allow dragging nodes
  247. }
  248. };
  249. let container = document.getElementById(this.uuid);
  250. this.network = new vis.Network(container, data, options);
  251. let self = this;
  252. this.network.off('click');
  253. this.network.off('oncontext');
  254. this.network.on("click", (params) => {
  255. self.onNodeClick(params);
  256. });
  257. this.network.on("oncontext", (params) => {
  258. self.onNodeContext(params);
  259. });
  260. this.network.setSize($(container).width().toString(), $(container).height().toString());
  261. this.network.fit();
  262. }
  263. onNodeContext(params) {
  264. if (params.nodes && params.nodes.length === 1) {
  265. let node = this.nodes.get(params.nodes[0]);
  266. if (node.objectName && node.objectWhere && node.objectName.length > 0 && node.objectWhere.length > 0) {
  267. let cord = {
  268. left: params.event.clientX,
  269. top: params.event.clientY
  270. };
  271. params.event.preventDefault();
  272. flexygo.nav.getObjectMenu(node.objectName, node.objectWhere, null, $('#mainContent'), cord);
  273. }
  274. }
  275. }
  276. /**
  277. * Handles click on network graphics
  278. * @method onNodeClick
  279. * @param {any} parms. The event param
  280. */
  281. onNodeClick(params) {
  282. if (params.nodes && params.nodes.length === 1) {
  283. let node = this.nodes.get(params.nodes[0]);
  284. if (node.expandable === true && node.infoSource && node.infoSource.length > 0 && node.infoTarget && node.infoTarget.length > 0) {
  285. if (node.isExpanded === true) {
  286. node.isExpanded = false;
  287. let childs = this.network.getConnectedNodes(node.id);
  288. for (let child of childs) {
  289. let childNode = this.nodes.get(child);
  290. if (childNode.isProcess === true) {
  291. childNode.hidden = true;
  292. this.nodes.update(childNode);
  293. }
  294. }
  295. this.nodes.update(node);
  296. }
  297. else {
  298. let childs = this.network.getConnectedNodes(node.id, 'from');
  299. let childNodes = [];
  300. for (let child of childs) {
  301. let childNode = this.nodes.get(child);
  302. if (childNode.isProcess === true) {
  303. childNodes.push(childNode);
  304. }
  305. }
  306. if (childNodes.length > 0) {
  307. for (let childNode of childNodes) {
  308. childNode.hidden = false;
  309. this.nodes.update(childNode);
  310. }
  311. node.isExpanded = true;
  312. this.nodes.update(node);
  313. }
  314. else {
  315. let procparams = {
  316. areaId: this.currentNode.NodeId,
  317. source: node.infoSource,
  318. target: node.infoTarget
  319. };
  320. flexygo.ajax.post('~/api/Navigation', 'GetProcessesNodes', procparams, (response) => {
  321. //console.log(response);
  322. node.isExpanded = true;
  323. this.nodes.update(node);
  324. let maxId = 0;
  325. this.nodes.forEach((n) => {
  326. if (n.id > maxId) {
  327. maxId = parseInt(n.id);
  328. }
  329. });
  330. maxId += 1;
  331. let edgeColor = '';
  332. response.forEach((nn) => {
  333. if (edgeColor.length === 0) {
  334. edgeColor = nn.EdgeColor;
  335. }
  336. this.nodes.add([{
  337. id: maxId,
  338. label: this.setMultiline(nn.ProcessDescrip),
  339. shape: 'icon',
  340. hidden: false,
  341. isObject: false,
  342. isProcess: true,
  343. objectName: nn.ObjectName,
  344. objectWhere: nn.ObjectWhere,
  345. icon: {
  346. face: nn.IconFace,
  347. color: nn.Color,
  348. code: this.toUnicode(nn.Icon)
  349. }
  350. }]);
  351. this.edges.add([{
  352. from: node.id,
  353. to: maxId,
  354. color: {
  355. color: edgeColor,
  356. },
  357. }]);
  358. maxId += 1;
  359. });
  360. this.network.stabilize();
  361. });
  362. }
  363. }
  364. }
  365. }
  366. }
  367. setMultiline(s) {
  368. let ret = '';
  369. if (!s || s.length < 31) {
  370. return s;
  371. }
  372. let length = 25;
  373. while (s.length > 0) {
  374. ret += s.substring(0, length);
  375. s = s.substring(length);
  376. let n = 0;
  377. let end = false;
  378. while (s.charAt(n) !== ' ') {
  379. n++;
  380. if (n > s.length) {
  381. end = true;
  382. break;
  383. }
  384. }
  385. if (end === true) {
  386. ret += s;
  387. return ret;
  388. }
  389. ret += s.substring(0, n);
  390. ret += '\n';
  391. s = s.substring(n + 1);
  392. ret += s.substring(0, length);
  393. s = s.substring(length);
  394. }
  395. return ret;
  396. }
  397. /**
  398. * get Node icon
  399. * @method getIcon
  400. * @param {String} IconClass. The icon class
  401. * @param {String} IconPath. The icon path
  402. */
  403. getIcon(IconClass, IconPath) {
  404. if (IconClass && IconClass != '') {
  405. return '<i class="' + IconClass + '" flx-fw></i>';
  406. }
  407. else if (IconPath && IconPath != '') {
  408. return '<img src="' + IconPath + '" alt="" />';
  409. }
  410. else {
  411. return '';
  412. }
  413. }
  414. /**
  415. * Gets current breadcrum
  416. * @method getBreadcrum
  417. * @param json. Json elements
  418. * @return {string}
  419. */
  420. getBreadcrum(json) {
  421. let i = 0;
  422. let itemtext = '';
  423. if (this.breadcrumArray.length == 0) {
  424. if (json) {
  425. let item = {
  426. id: json.NodeId,
  427. title: json.Title
  428. };
  429. this.breadcrumArray.push(item);
  430. }
  431. else {
  432. this.breadcrumArray.push({ id: '', title: 'Areas' });
  433. }
  434. }
  435. for (i = 0; i < this.breadcrumArray.length; i++) {
  436. itemtext += `<li data-id="${this.breadcrumArray[i].id}"><a>${this.breadcrumArray[i].title}</a></li>`;
  437. }
  438. return '<nav aria-label="breadcrumb"><ol class="breadcrumb" >' + itemtext + '</ol></nav>';
  439. }
  440. /**
  441. * Replace nodes with new parent id childs. Does not work with autogenerated nodes
  442. * @method diveIn
  443. * @param {string} nodeId. The node id
  444. * @param {string} title. The node title
  445. */
  446. diveIn(nodeId, title) {
  447. let me = $(this);
  448. if (nodeId != '') {
  449. this.breadcrumArray.push({ id: nodeId, title: title });
  450. me.find('.child-nodes').hide('slide', {}, 500, () => {
  451. if ($("li:animated").length === 0) {
  452. me.attr('initNode', nodeId);
  453. this.init();
  454. }
  455. });
  456. }
  457. }
  458. /**
  459. * Goas back to original node
  460. * @method goBack
  461. * @param {String} nodeId. New parent node
  462. */
  463. goBack() {
  464. let me = $(this);
  465. if (this.backNode) {
  466. this.breadcrumArray.pop();
  467. me.find('.child-nodes').hide('slide', {}, 500, () => {
  468. me.attr('initNode', this.backNode);
  469. this.init();
  470. });
  471. }
  472. }
  473. /**
  474. * Goas back until node is reached
  475. * @method goBack
  476. * @param {String} nodeId. New parent node
  477. */
  478. goNode(nodeId) {
  479. let me = $(this);
  480. let last = this.breadcrumArray.pop();
  481. while (last.id !== nodeId) {
  482. last = this.breadcrumArray.pop();
  483. }
  484. this.breadcrumArray.push(last);
  485. me.find('.child-nodes').hide('slide', {}, 500, () => {
  486. me.attr('initNode', last.id);
  487. this.init();
  488. });
  489. }
  490. /**
  491. * Sees if node has childnodes an returns the noshow class
  492. * @method getNoShow
  493. * @param json. Json elements
  494. * @param {string} mode. check for parent ,child or process mode
  495. */
  496. getNoShow(json, mode) {
  497. if (mode == 'parent') {
  498. if (json.ParentNodeId) {
  499. return '';
  500. }
  501. }
  502. if (mode == 'process') {
  503. if (json.StrType !== 'text' && json.StrType !== 'group') {
  504. return '';
  505. }
  506. }
  507. else {
  508. if (json.ChildNodes && Object.keys(json.ChildNodes).length > 0) {
  509. return '';
  510. }
  511. // Ares do not have nodes
  512. if (json.Params && json.Params.length > 0) {
  513. return '';
  514. }
  515. }
  516. return 'noshow';
  517. }
  518. toUnicode(name) {
  519. let testI = document.createElement('i');
  520. let char;
  521. testI.className = name;
  522. document.body.appendChild(testI);
  523. char = window.getComputedStyle(testI, ':before').content.replace(/'|"/g, '');
  524. testI.remove();
  525. let code = char.charCodeAt(0);
  526. try {
  527. return JSON.parse('"\\u' + code.toString(16) + '"');
  528. }
  529. catch (e) {
  530. return '';
  531. }
  532. }
  533. }
  534. wc.FlxAreaElement = FlxAreaElement;
  535. })(wc = ui.wc || (ui.wc = {}));
  536. })(ui = flexygo.ui || (flexygo.ui = {}));
  537. })(flexygo || (flexygo = {}));
  538. window.customElements.define('flx-area', flexygo.ui.wc.FlxAreaElement);
  539. //# sourceMappingURL=flx-area.js.map