@logicflow/extension
Version:
LogicFlow Extensions
113 lines (112 loc) • 4.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DndPanel = void 0;
var DndPanel = /** @class */ (function () {
function DndPanel(_a) {
var lf = _a.lf;
var _this = this;
this.lf = lf;
this.lf.setPatternItems = function (shapeList) {
_this.setPatternItems(shapeList);
};
}
DndPanel.prototype.render = function (_lf, domContainer) {
var _this = this;
this.destroy();
if (!this.shapeList || this.shapeList.length === 0) {
// 首次render后失败后，后续调用setPatternItems支持渲染
this.domContainer = domContainer;
return;
}
this.panelEl = document.createElement('div');
this.panelEl.className = 'lf-dndpanel';
this.shapeList.forEach(function (shapeItem) {
var _a;
(_a = _this.panelEl) === null || _a === void 0 ? void 0 : _a.appendChild(_this.createDndItem(shapeItem));
});
domContainer.appendChild(this.panelEl);
this.domContainer = domContainer;
};
DndPanel.prototype.destroy = function () {
if (this.domContainer &&
this.panelEl &&
this.domContainer.contains(this.panelEl)) {
this.domContainer.removeChild(this.panelEl);
}
};
DndPanel.prototype.setPatternItems = function (shapeList) {
this.shapeList = shapeList;
// 支持渲染后重新设置拖拽面板
if (this.domContainer) {
this.render(this.lf, this.domContainer);
}
};
DndPanel.prototype.createDndItem = function (shapeItem) {
var _this = this;
var el = document.createElement('div');
el.className = shapeItem.className
? "lf-dnd-item ".concat(shapeItem.className)
: 'lf-dnd-item';
var shape = document.createElement('div');
shape.className = 'lf-dnd-shape';
// if (typeof shapeItem.icon === 'string') {
if (shapeItem.icon) {
shape.style.backgroundImage = "url(".concat(shapeItem.icon, ")");
// shape.style.backgroundSize = 'contain'
// } else {
// shape.appendChild(shapeItem.icon);
}
el.appendChild(shape);
if (shapeItem.label) {
var text = document.createElement('div');
text.innerText = shapeItem.label;
text.className = 'lf-dnd-text';
el.appendChild(text);
}
if (shapeItem.disabled) {
el.classList.add('disabled');
// 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
el.onmousedown = function () {
if (shapeItem.callback) {
shapeItem.callback(_this.lf, _this.domContainer);
}
};
return el;
}
el.onmousedown = function () {
if (shapeItem.type) {
_this.lf.dnd.startDrag({
type: shapeItem.type,
properties: shapeItem.properties,
text: shapeItem.text,
});
}
if (shapeItem.callback) {
shapeItem.callback(_this.lf, _this.domContainer);
}
};
el.ondblclick = function (e) {
_this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {
e: e,
data: shapeItem,
});
};
el.onclick = function (e) {
_this.lf.graphModel.eventCenter.emit('dnd:panel-click', {
e: e,
data: shapeItem,
});
};
el.oncontextmenu = function (e) {
_this.lf.graphModel.eventCenter.emit('dnd:panel-contextmenu', {
e: e,
data: shapeItem,
});
};
return el;
};
DndPanel.pluginName = 'dndPanel';
return DndPanel;
}());
exports.DndPanel = DndPanel;
exports.default = DndPanel;