index.js 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.DndPanel = void 0;
  4. var DndPanel = /** @class */ (function () {
  5. function DndPanel(_a) {
  6. var _this = this;
  7. var lf = _a.lf;
  8. this.lf = lf;
  9. this.lf.setPatternItems = function (shapeList) {
  10. _this.setPatternItems(shapeList);
  11. };
  12. }
  13. DndPanel.prototype.render = function (lf, domContainer) {
  14. var _this = this;
  15. this.destroy();
  16. if (!this.shapeList || this.shapeList.length === 0) {
  17. // 首次render后失败后,后续调用setPatternItems支持渲染
  18. this.domContainer = domContainer;
  19. return;
  20. }
  21. this.panelEl = document.createElement('div');
  22. this.panelEl.className = 'lf-dndpanel';
  23. this.shapeList.forEach(function (shapeItem) {
  24. _this.panelEl.appendChild(_this.createDndItem(shapeItem));
  25. });
  26. domContainer.appendChild(this.panelEl);
  27. this.domContainer = domContainer;
  28. };
  29. DndPanel.prototype.destroy = function () {
  30. if (this.domContainer && this.panelEl && this.domContainer.contains(this.panelEl)) {
  31. this.domContainer.removeChild(this.panelEl);
  32. }
  33. };
  34. DndPanel.prototype.setPatternItems = function (shapeList) {
  35. this.shapeList = shapeList;
  36. // 支持渲染后重新设置拖拽面板
  37. if (this.domContainer) {
  38. this.render(this.lf, this.domContainer);
  39. }
  40. };
  41. DndPanel.prototype.createDndItem = function (shapeItem) {
  42. var _this = this;
  43. var el = document.createElement('div');
  44. el.className = shapeItem.className ? "lf-dnd-item " + shapeItem.className : 'lf-dnd-item';
  45. var shape = document.createElement('div');
  46. shape.className = 'lf-dnd-shape';
  47. // if (typeof shapeItem.icon === 'string') {
  48. if (shapeItem.icon) {
  49. shape.style.backgroundImage = "url(" + shapeItem.icon + ")";
  50. // } else {
  51. // shape.appendChild(shapeItem.icon);
  52. }
  53. el.appendChild(shape);
  54. if (shapeItem.label) {
  55. var text = document.createElement('div');
  56. text.innerText = shapeItem.label;
  57. text.className = 'lf-dnd-text';
  58. el.appendChild(text);
  59. }
  60. el.onmousedown = function () {
  61. if (shapeItem.type) {
  62. _this.lf.dnd.startDrag({
  63. type: shapeItem.type,
  64. properties: shapeItem.properties,
  65. text: shapeItem.text,
  66. });
  67. }
  68. if (shapeItem.callback) {
  69. shapeItem.callback(_this.lf, _this.domContainer);
  70. }
  71. };
  72. el.ondblclick = function (e) {
  73. _this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {
  74. e: e,
  75. data: shapeItem,
  76. });
  77. };
  78. el.onclick = function (e) {
  79. _this.lf.graphModel.eventCenter.emit('dnd:panel-click', {
  80. e: e,
  81. data: shapeItem,
  82. });
  83. };
  84. el.oncontextmenu = function (e) {
  85. _this.lf.graphModel.eventCenter.emit('dnd:panel-contextmenu', {
  86. e: e,
  87. data: shapeItem,
  88. });
  89. };
  90. return el;
  91. };
  92. DndPanel.pluginName = 'dndPanel';
  93. return DndPanel;
  94. }());
  95. exports.DndPanel = DndPanel;