index.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. var __read = (this && this.__read) || function (o, n) {
  2. var m = typeof Symbol === "function" && o[Symbol.iterator];
  3. if (!m) return o;
  4. var i = m.call(o), r, ar = [], e;
  5. try {
  6. while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  7. }
  8. catch (error) { e = { error: error }; }
  9. finally {
  10. try {
  11. if (r && !r.done && (m = i["return"])) m.call(i);
  12. }
  13. finally { if (e) throw e.error; }
  14. }
  15. return ar;
  16. };
  17. var __spread = (this && this.__spread) || function () {
  18. for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
  19. return ar;
  20. };
  21. var Control = /** @class */ (function () {
  22. function Control(_a) {
  23. var _this = this;
  24. var lf = _a.lf;
  25. this.controlItems = [
  26. {
  27. key: 'zoom-out',
  28. iconClass: 'lf-control-zoomOut',
  29. title: '缩小流程图',
  30. text: '缩小',
  31. onClick: function () {
  32. _this.lf.zoom(false);
  33. },
  34. },
  35. {
  36. key: 'zoom-in',
  37. iconClass: 'lf-control-zoomIn',
  38. title: '放大流程图',
  39. text: '放大',
  40. onClick: function () {
  41. _this.lf.zoom(true);
  42. },
  43. },
  44. {
  45. key: 'reset',
  46. iconClass: 'lf-control-fit',
  47. title: '恢复流程原有尺寸',
  48. text: '适应',
  49. onClick: function () {
  50. _this.lf.resetZoom();
  51. },
  52. },
  53. {
  54. key: 'undo',
  55. iconClass: 'lf-control-undo',
  56. title: '回到上一步',
  57. text: '上一步',
  58. onClick: function () {
  59. _this.lf.undo();
  60. },
  61. },
  62. {
  63. key: 'redo',
  64. iconClass: 'lf-control-redo',
  65. title: '移到下一步',
  66. text: '下一步',
  67. onClick: function () {
  68. _this.lf.redo();
  69. },
  70. },
  71. ];
  72. this.lf = lf;
  73. }
  74. Control.prototype.render = function (lf, domContainer) {
  75. this.destroy();
  76. var toolEl = this.getControlTool();
  77. this.toolEl = toolEl;
  78. domContainer.appendChild(toolEl);
  79. this.domContainer = domContainer;
  80. };
  81. Control.prototype.destroy = function () {
  82. if (this.domContainer && this.toolEl && this.domContainer.contains(this.toolEl)) {
  83. this.domContainer.removeChild(this.toolEl);
  84. }
  85. };
  86. Control.prototype.addItem = function (item) {
  87. this.controlItems.push(item);
  88. };
  89. Control.prototype.removeItem = function (key) {
  90. var index = this.controlItems.findIndex(function (item) { return item.key === key; });
  91. return this.controlItems.splice(index, 1)[0];
  92. };
  93. Control.prototype.getControlTool = function () {
  94. var _this = this;
  95. var NORMAL = 'lf-control-item';
  96. var DISABLED = 'lf-control-item disabled';
  97. var controlTool = document.createElement('div');
  98. var controlElements = [];
  99. controlTool.className = 'lf-control';
  100. this.controlItems.forEach(function (item) {
  101. var itemContainer = document.createElement('div');
  102. var icon = document.createElement('i');
  103. var text = document.createElement('span');
  104. itemContainer.className = DISABLED;
  105. item.onClick && (itemContainer.onclick = item.onClick.bind(null, _this.lf));
  106. item.onMouseEnter && (itemContainer.onmouseenter = item.onMouseEnter.bind(null, _this.lf));
  107. item.onMouseLeave && (itemContainer.onmouseleave = item.onMouseLeave.bind(null, _this.lf));
  108. icon.className = item.iconClass;
  109. text.className = 'lf-control-text';
  110. text.title = item.title;
  111. text.innerText = item.text;
  112. itemContainer.append(icon, text);
  113. switch (item.text) {
  114. case '上一步':
  115. _this.lf.on('history:change', function (_a) {
  116. var undoAble = _a.data.undoAble;
  117. itemContainer.className = undoAble ? NORMAL : DISABLED;
  118. });
  119. break;
  120. case '下一步':
  121. _this.lf.on('history:change', function (_a) {
  122. var redoAble = _a.data.redoAble;
  123. itemContainer.className = redoAble ? NORMAL : DISABLED;
  124. });
  125. break;
  126. default:
  127. itemContainer.className = NORMAL;
  128. break;
  129. }
  130. controlElements.push(itemContainer);
  131. });
  132. controlTool.append.apply(controlTool, __spread(controlElements));
  133. return controlTool;
  134. };
  135. Control.pluginName = 'control';
  136. return Control;
  137. }());
  138. export default Control;
  139. export { Control };