index.js 5.1 KB

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