| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- "use strict";
- Object.defineProperty(exports, "__esModule", { value: true });
- exports.SelectionSelect = void 0;
- var SelectionSelect = /** @class */ (function () {
- function SelectionSelect(_a) {
- var _this = this;
- var lf = _a.lf;
- this.__disabled = false;
- this.isDefaultStopMoveGraph = false;
- this.isWholeNode = true;
- this.isWholeEdge = true;
- this.__draw = function (ev) {
- var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
- _this.endPoint = { x: x1, y: y1 };
- var _b = _this.startPoint, x = _b.x, y = _b.y;
- var style = _this.wrapper.style;
- var left = x;
- var top = y;
- var width = x1 - x;
- var height = y1 - y;
- if (x1 < x) {
- left = x1;
- width = x - x1;
- }
- if (y1 < y) {
- top = y1;
- height = y - y1;
- }
- style.left = left + "px";
- style.top = top + "px";
- style.width = width + "px";
- style.height = height + "px";
- };
- this.__drawOff = function () {
- document.removeEventListener('mousemove', _this.__draw);
- document.removeEventListener('mouseup', _this.__drawOff);
- _this.wrapper.oncontextmenu = null;
- _this.__domContainer.removeChild(_this.wrapper);
- var _a = _this.startPoint, x = _a.x, y = _a.y;
- var _b = _this.endPoint, x1 = _b.x, y1 = _b.y;
- // 选区太小的情况就忽略
- if (Math.abs(x1 - x) < 10 && Math.abs(y1 - y) < 10) {
- return;
- }
- var lt = [Math.min(x, x1), Math.min(y, y1)];
- var rt = [Math.max(x, x1), Math.max(y, y1)];
- var elements = _this.lf.graphModel.getAreaElement(lt, rt, _this.isWholeEdge, _this.isWholeNode, true);
- var group = _this.lf.graphModel.group;
- elements.forEach(function (element) {
- // 如果节点属于分组,则不不选中节点
- if (!group || !group.getNodeGroup(element.id)) {
- _this.lf.selectElementById(element.id, true);
- }
- });
- _this.lf.emit('selection:selected', elements);
- };
- this.lf = lf;
- // 初始化isDefaultStopMoveGraph取值
- var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
- this.isDefaultStopMoveGraph = stopMoveGraph;
- lf.openSelectionSelect = function () {
- _this.openSelectionSelect();
- };
- lf.closeSelectionSelect = function () {
- _this.closeSelectionSelect();
- };
- }
- SelectionSelect.prototype.render = function (lf, domContainer) {
- var _this = this;
- this.__domContainer = domContainer;
- lf.on('blank:mousedown', function (_a) {
- var e = _a.e;
- var config = lf.getEditConfig();
- // 鼠标控制滚动移动画布的时候,不能选区。
- if (!config.stopMoveGraph || _this.__disabled) {
- return;
- }
- // 禁用右键框选,修复可能导致画布出现多个框选框不消失的问题,见https://github.com/didi/LogicFlow/issues/985
- var isRightClick = e.button === 2;
- if (isRightClick) {
- return;
- }
- var _b = lf.getPointByClient(e.clientX, e.clientY).domOverlayPosition, x = _b.x, y = _b.y;
- _this.startPoint = { x: x, y: y };
- _this.endPoint = { x: x, y: y };
- var wrapper = document.createElement('div');
- wrapper.className = 'lf-selection-select';
- wrapper.oncontextmenu = function prevent(ev) {
- ev.preventDefault();
- };
- wrapper.style.top = _this.startPoint.y + "px";
- wrapper.style.left = _this.startPoint.x + "px";
- domContainer.appendChild(wrapper);
- _this.wrapper = wrapper;
- document.addEventListener('mousemove', _this.__draw);
- document.addEventListener('mouseup', _this.__drawOff);
- });
- };
- /**
- * 设置选中的灵敏度
- * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true
- * @param isWholeNode 是否要节点的全部点都在选区范围才算选中。默认true
- */
- SelectionSelect.prototype.setSelectionSense = function (isWholeEdge, isWholeNode) {
- if (isWholeEdge === void 0) { isWholeEdge = true; }
- if (isWholeNode === void 0) { isWholeNode = true; }
- this.isWholeEdge = isWholeEdge;
- this.isWholeNode = isWholeNode;
- };
- /**
- * 开启选区
- */
- SelectionSelect.prototype.openSelectionSelect = function () {
- var stopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
- if (!stopMoveGraph) {
- this.isDefaultStopMoveGraph = false;
- this.lf.updateEditConfig({
- stopMoveGraph: true,
- });
- }
- this.open();
- };
- /**
- * 关闭选区
- */
- SelectionSelect.prototype.closeSelectionSelect = function () {
- if (!this.isDefaultStopMoveGraph) {
- this.lf.updateEditConfig({
- stopMoveGraph: false,
- });
- }
- this.close();
- };
- SelectionSelect.prototype.open = function () {
- this.__disabled = false;
- };
- SelectionSelect.prototype.close = function () {
- this.__disabled = true;
- };
- SelectionSelect.pluginName = 'selectionSelect';
- return SelectionSelect;
- }());
- exports.SelectionSelect = SelectionSelect;
|