@logicflow/core 2.1.3 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build$colon$dev.log +2 -2
- package/.turbo/turbo-build.log +6 -6
- package/CHANGELOG.md +17 -0
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/es/LogicFlow.d.ts +2 -1
- package/es/LogicFlow.js +4 -1
- package/es/constant/index.d.ts +3 -1
- package/es/constant/index.js +2 -0
- package/es/model/GraphModel.d.ts +9 -1
- package/es/model/GraphModel.js +62 -14
- package/es/model/edge/BaseEdgeModel.d.ts +2 -1
- package/es/model/edge/BaseEdgeModel.js +29 -5
- package/es/model/node/BaseNodeModel.d.ts +2 -1
- package/es/model/node/BaseNodeModel.js +29 -5
- package/es/view/node/BaseNode.d.ts +1 -0
- package/es/view/node/BaseNode.js +25 -9
- package/lib/LogicFlow.d.ts +2 -1
- package/lib/LogicFlow.js +3 -0
- package/lib/constant/index.d.ts +3 -1
- package/lib/constant/index.js +2 -0
- package/lib/model/GraphModel.d.ts +9 -1
- package/lib/model/GraphModel.js +62 -14
- package/lib/model/edge/BaseEdgeModel.d.ts +2 -1
- package/lib/model/edge/BaseEdgeModel.js +29 -5
- package/lib/model/node/BaseNodeModel.d.ts +2 -1
- package/lib/model/node/BaseNodeModel.js +29 -5
- package/lib/view/node/BaseNode.d.ts +1 -0
- package/lib/view/node/BaseNode.js +25 -9
- package/package.json +1 -1
- package/src/LogicFlow.tsx +9 -1
- package/src/constant/index.ts +2 -0
- package/src/model/GraphModel.ts +65 -20
- package/src/model/edge/BaseEdgeModel.ts +32 -5
- package/src/model/node/BaseNodeModel.ts +30 -5
- package/src/view/node/BaseNode.tsx +17 -1
- package/stats.html +1 -1
package/es/LogicFlow.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import Tool from './tool';
|
|
|
7
7
|
import History from './history';
|
|
8
8
|
import Keyboard from './keyboard';
|
|
9
9
|
import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter';
|
|
10
|
-
import { EventType, SegmentDirection } from './constant';
|
|
10
|
+
import { EventType, OverlapMode, SegmentDirection } from './constant';
|
|
11
11
|
import { Grid } from './view/overlay';
|
|
12
12
|
import Extension = LogicFlow.Extension;
|
|
13
13
|
import ExtensionConfig = LogicFlow.ExtensionConfig;
|
|
@@ -430,6 +430,7 @@ export declare class LogicFlow {
|
|
|
430
430
|
* 清空画布
|
|
431
431
|
*/
|
|
432
432
|
clearData(): void;
|
|
433
|
+
setOverlapMode(mode: OverlapMode): void;
|
|
433
434
|
/*********************************************************
|
|
434
435
|
* LogicFlow Render方法
|
|
435
436
|
********************************************************/
|
package/es/LogicFlow.js
CHANGED
|
@@ -48,7 +48,7 @@ import { Dnd, snapline } from './view/behavior';
|
|
|
48
48
|
import Tool from './tool';
|
|
49
49
|
import History from './history';
|
|
50
50
|
import Keyboard, { initDefaultShortcut } from './keyboard';
|
|
51
|
-
import { ElementType, EventType } from './constant';
|
|
51
|
+
import { ElementType, EventType, } from './constant';
|
|
52
52
|
var pluginFlag = Symbol('plugin registered by Logicflow.use');
|
|
53
53
|
var LogicFlow = /** @class */ (function () {
|
|
54
54
|
function LogicFlow(options) {
|
|
@@ -933,6 +933,9 @@ var LogicFlow = /** @class */ (function () {
|
|
|
933
933
|
// 强制刷新数据, 让 preact 清除对已删除节点的引用
|
|
934
934
|
this.render({});
|
|
935
935
|
};
|
|
936
|
+
LogicFlow.prototype.setOverlapMode = function (mode) {
|
|
937
|
+
this.graphModel.setOverlapMode(mode);
|
|
938
|
+
};
|
|
936
939
|
/*********************************************************
|
|
937
940
|
* LogicFlow Render方法
|
|
938
941
|
********************************************************/
|
package/es/constant/index.d.ts
CHANGED
|
@@ -134,8 +134,10 @@ export declare enum EventType {
|
|
|
134
134
|
EDIT_CONFIG_CHANGED = "editConfig:changed"
|
|
135
135
|
}
|
|
136
136
|
export declare enum OverlapMode {
|
|
137
|
+
STATIC = -1,// 静态(元素层级不随点击变化)
|
|
137
138
|
DEFAULT = 0,// 默认
|
|
138
|
-
INCREASE = 1
|
|
139
|
+
INCREASE = 1,// 递增
|
|
140
|
+
EDGE_TOP = 2
|
|
139
141
|
}
|
|
140
142
|
export declare enum SegmentDirection {
|
|
141
143
|
HORIZONTAL = "horizontal",
|
package/es/constant/index.js
CHANGED
|
@@ -149,8 +149,10 @@ export var EventType;
|
|
|
149
149
|
})(EventType || (EventType = {}));
|
|
150
150
|
export var OverlapMode;
|
|
151
151
|
(function (OverlapMode) {
|
|
152
|
+
OverlapMode[OverlapMode["STATIC"] = -1] = "STATIC";
|
|
152
153
|
OverlapMode[OverlapMode["DEFAULT"] = 0] = "DEFAULT";
|
|
153
154
|
OverlapMode[OverlapMode["INCREASE"] = 1] = "INCREASE";
|
|
155
|
+
OverlapMode[OverlapMode["EDGE_TOP"] = 2] = "EDGE_TOP";
|
|
154
156
|
})(OverlapMode || (OverlapMode = {}));
|
|
155
157
|
export var SegmentDirection;
|
|
156
158
|
(function (SegmentDirection) {
|
package/es/model/GraphModel.d.ts
CHANGED
|
@@ -179,6 +179,14 @@ export declare class GraphModel {
|
|
|
179
179
|
* @param model
|
|
180
180
|
*/
|
|
181
181
|
getTextModel(model: BaseNodeModel): TextMode | undefined;
|
|
182
|
+
/**
|
|
183
|
+
* 内部保留方法,请勿直接使用
|
|
184
|
+
*/
|
|
185
|
+
/**
|
|
186
|
+
* 设置重叠模式
|
|
187
|
+
* @param mode 重叠模式
|
|
188
|
+
*/
|
|
189
|
+
setOverlapMode(mode: OverlapMode): void;
|
|
182
190
|
/**
|
|
183
191
|
* 更新元素的文本模式
|
|
184
192
|
* @param mode
|
|
@@ -449,7 +457,7 @@ export declare class GraphModel {
|
|
|
449
457
|
*/
|
|
450
458
|
clearData(): void;
|
|
451
459
|
/**
|
|
452
|
-
*
|
|
460
|
+
* 获取图形区域虚拟矩形的尺寸和中心坐标
|
|
453
461
|
* @returns
|
|
454
462
|
*/
|
|
455
463
|
getVirtualRectSize(): GraphModel.VirtualRectProps;
|
package/es/model/GraphModel.js
CHANGED
|
@@ -113,6 +113,7 @@ var GraphModel = /** @class */ (function () {
|
|
|
113
113
|
this.edgeType = options.edgeType || 'polyline';
|
|
114
114
|
this.animation = setupAnimation(animation);
|
|
115
115
|
this.overlapMode = options.overlapMode || OverlapMode.DEFAULT;
|
|
116
|
+
this.isMiniMap = options.isMiniMap || false;
|
|
116
117
|
this.width = (_a = options.width) !== null && _a !== void 0 ? _a : this.rootEl.getBoundingClientRect().width;
|
|
117
118
|
this.isContainerWidth = isNil(options.width);
|
|
118
119
|
this.height = (_b = options.height) !== null && _b !== void 0 ? _b : this.rootEl.getBoundingClientRect().height;
|
|
@@ -123,6 +124,10 @@ var GraphModel = /** @class */ (function () {
|
|
|
123
124
|
for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
|
|
124
125
|
var entry = entries_1_1.value;
|
|
125
126
|
if (entry.target === _this.rootEl) {
|
|
127
|
+
// 检查元素是否仍在DOM中
|
|
128
|
+
var isElementInDOM = document.body.contains(_this.rootEl);
|
|
129
|
+
if (!isElementInDOM)
|
|
130
|
+
return;
|
|
126
131
|
_this.resize();
|
|
127
132
|
_this.eventCenter.emit('graph:resize', {
|
|
128
133
|
target: _this.rootEl,
|
|
@@ -193,7 +198,11 @@ var GraphModel = /** @class */ (function () {
|
|
|
193
198
|
* todo: 性能优化
|
|
194
199
|
*/
|
|
195
200
|
get: function () {
|
|
196
|
-
var
|
|
201
|
+
var sortElement = function (list) {
|
|
202
|
+
return __spreadArray([], __read(list), false).sort(function (a, b) { return a.zIndex - b.zIndex; });
|
|
203
|
+
};
|
|
204
|
+
// 默认情况下节点与边按照 zIndex 排序
|
|
205
|
+
var elements = sortElement(__spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false));
|
|
197
206
|
// 只显示可见区域的节点和边
|
|
198
207
|
var visibleElements = [];
|
|
199
208
|
// TODO: 缓存,优化计算效率 by xutao. So how?
|
|
@@ -637,6 +646,19 @@ var GraphModel = /** @class */ (function () {
|
|
|
637
646
|
return model.textMode || edgeTextMode || textMode || TextMode.TEXT;
|
|
638
647
|
}
|
|
639
648
|
};
|
|
649
|
+
/**
|
|
650
|
+
* 内部保留方法,请勿直接使用
|
|
651
|
+
*/
|
|
652
|
+
/**
|
|
653
|
+
* 设置重叠模式
|
|
654
|
+
* @param mode 重叠模式
|
|
655
|
+
*/
|
|
656
|
+
GraphModel.prototype.setOverlapMode = function (mode) {
|
|
657
|
+
this.overlapMode = mode;
|
|
658
|
+
this.eventCenter.emit('overlap:change', {
|
|
659
|
+
overlapMode: mode,
|
|
660
|
+
});
|
|
661
|
+
};
|
|
640
662
|
/**
|
|
641
663
|
* 更新元素的文本模式
|
|
642
664
|
* @param mode
|
|
@@ -679,14 +701,19 @@ var GraphModel = /** @class */ (function () {
|
|
|
679
701
|
var _a, _b, _c;
|
|
680
702
|
var element = ((_a = this.nodesMap[id]) === null || _a === void 0 ? void 0 : _a.model) || ((_b = this.edgesMap[id]) === null || _b === void 0 ? void 0 : _b.model);
|
|
681
703
|
if (element) {
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
this.topElement = element;
|
|
704
|
+
// 静态模式toFront不做处理
|
|
705
|
+
if (this.overlapMode === OverlapMode.STATIC) {
|
|
706
|
+
return;
|
|
686
707
|
}
|
|
708
|
+
// 递增模式下,将需指定元素zIndex设置为当前最大zIndex + 1
|
|
687
709
|
if (this.overlapMode === OverlapMode.INCREASE) {
|
|
688
710
|
this.setElementZIndex(id, 'top');
|
|
711
|
+
return;
|
|
689
712
|
}
|
|
713
|
+
// 默认模式(节点在上)和边在上模式下,将原置顶元素重新恢复原有层级,将需指定元素zIndex设置为最大zIndex
|
|
714
|
+
(_c = this.topElement) === null || _c === void 0 ? void 0 : _c.setZIndex();
|
|
715
|
+
element.setZIndex(ELEMENT_MAX_Z_INDEX);
|
|
716
|
+
this.topElement = element;
|
|
690
717
|
}
|
|
691
718
|
};
|
|
692
719
|
/**
|
|
@@ -1078,7 +1105,7 @@ var GraphModel = /** @class */ (function () {
|
|
|
1078
1105
|
/**
|
|
1079
1106
|
* 如果堆叠模式为默认模式,则将置顶元素重新恢复原有层级
|
|
1080
1107
|
*/
|
|
1081
|
-
if (
|
|
1108
|
+
if ([OverlapMode.DEFAULT, OverlapMode.EDGE_TOP].includes(this.overlapMode)) {
|
|
1082
1109
|
(_a = this.topElement) === null || _a === void 0 ? void 0 : _a.setZIndex();
|
|
1083
1110
|
}
|
|
1084
1111
|
};
|
|
@@ -1359,12 +1386,30 @@ var GraphModel = /** @class */ (function () {
|
|
|
1359
1386
|
* 重新设置画布的宽高
|
|
1360
1387
|
*/
|
|
1361
1388
|
GraphModel.prototype.resize = function (width, height) {
|
|
1362
|
-
|
|
1363
|
-
this.
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1389
|
+
// 检查当前实例是否已被销毁或rootEl不存在
|
|
1390
|
+
if (!this.rootEl)
|
|
1391
|
+
return;
|
|
1392
|
+
// 检查元素是否仍在DOM中
|
|
1393
|
+
var isElementInDOM = document.body.contains(this.rootEl);
|
|
1394
|
+
if (!isElementInDOM)
|
|
1395
|
+
return;
|
|
1396
|
+
// 检查元素是否可见
|
|
1397
|
+
var isVisible = this.rootEl.offsetParent !== null;
|
|
1398
|
+
if (!isVisible)
|
|
1399
|
+
return;
|
|
1400
|
+
try {
|
|
1401
|
+
this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
|
|
1402
|
+
this.isContainerWidth = isNil(width);
|
|
1403
|
+
this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
|
|
1404
|
+
this.isContainerHeight = isNil(height);
|
|
1405
|
+
// 只有在元素可见且应该有宽高的情况下才显示警告
|
|
1406
|
+
if (isVisible && (!this.width || !this.height)) {
|
|
1407
|
+
console.warn('渲染画布的时候无法获取画布宽高,请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
|
|
1408
|
+
}
|
|
1409
|
+
}
|
|
1410
|
+
catch (error) {
|
|
1411
|
+
// 捕获可能的DOM操作错误
|
|
1412
|
+
console.warn('获取画布宽高时发生错误:', error);
|
|
1368
1413
|
}
|
|
1369
1414
|
};
|
|
1370
1415
|
/**
|
|
@@ -1379,7 +1424,7 @@ var GraphModel = /** @class */ (function () {
|
|
|
1379
1424
|
this.elementsModelMap.clear();
|
|
1380
1425
|
};
|
|
1381
1426
|
/**
|
|
1382
|
-
*
|
|
1427
|
+
* 获取图形区域虚拟矩形的尺寸和中心坐标
|
|
1383
1428
|
* @returns
|
|
1384
1429
|
*/
|
|
1385
1430
|
GraphModel.prototype.getVirtualRectSize = function () {
|
|
@@ -1403,7 +1448,7 @@ var GraphModel = /** @class */ (function () {
|
|
|
1403
1448
|
var maxY = Math.max.apply(Math, __spreadArray([], __read(nodesY), false));
|
|
1404
1449
|
var virtualRectWidth = maxX - minX || 0;
|
|
1405
1450
|
var virtualRectHeight = maxY - minY || 0;
|
|
1406
|
-
//
|
|
1451
|
+
// 获取虚拟矩形的中心坐标
|
|
1407
1452
|
var virtualRectCenterPositionX = minX + virtualRectWidth / 2;
|
|
1408
1453
|
var virtualRectCenterPositionY = minY + virtualRectHeight / 2;
|
|
1409
1454
|
return {
|
|
@@ -1558,6 +1603,9 @@ var GraphModel = /** @class */ (function () {
|
|
|
1558
1603
|
__decorate([
|
|
1559
1604
|
computed
|
|
1560
1605
|
], GraphModel.prototype, "selectNodes", null);
|
|
1606
|
+
__decorate([
|
|
1607
|
+
action
|
|
1608
|
+
], GraphModel.prototype, "setOverlapMode", null);
|
|
1561
1609
|
__decorate([
|
|
1562
1610
|
action
|
|
1563
1611
|
], GraphModel.prototype, "setTextMode", null);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseNodeModel, GraphModel, Model } from '..';
|
|
2
2
|
import LogicFlow from '../../LogicFlow';
|
|
3
|
-
import { ElementState, ElementType, ModelType, TextMode } from '../../constant';
|
|
3
|
+
import { ElementState, ElementType, ModelType, OverlapMode, TextMode } from '../../constant';
|
|
4
4
|
import Point = LogicFlow.Point;
|
|
5
5
|
import EdgeData = LogicFlow.EdgeData;
|
|
6
6
|
import EdgeConfig = LogicFlow.EdgeConfig;
|
|
@@ -271,5 +271,6 @@ export declare class BaseEdgeModel<P extends PropertiesType = PropertiesType> im
|
|
|
271
271
|
getAdjustStart(): LogicFlow.Point;
|
|
272
272
|
getAdjustEnd(): LogicFlow.Point;
|
|
273
273
|
updateAfterAdjustStartAndEnd({ startPoint, endPoint, }: Record<'startPoint' | 'endPoint', Point>): void;
|
|
274
|
+
updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex: any): void;
|
|
274
275
|
}
|
|
275
276
|
export default BaseEdgeModel;
|
|
@@ -73,6 +73,7 @@ var BaseEdgeModel = /** @class */ (function () {
|
|
|
73
73
|
* setAttributes除了初始化调用外,还会在properties发生变化后调用。
|
|
74
74
|
*/
|
|
75
75
|
BaseEdgeModel.prototype.initEdgeData = function (data) {
|
|
76
|
+
var _this = this;
|
|
76
77
|
if (!data.properties) {
|
|
77
78
|
data.properties = {};
|
|
78
79
|
}
|
|
@@ -88,10 +89,8 @@ var BaseEdgeModel = /** @class */ (function () {
|
|
|
88
89
|
var adjustEdgeStartAndEnd = this.graphModel.editConfigModel.adjustEdgeStartAndEnd;
|
|
89
90
|
this.isShowAdjustPoint = adjustEdgeStartAndEnd;
|
|
90
91
|
assign(this, pickEdgeConfig(data));
|
|
91
|
-
var
|
|
92
|
-
|
|
93
|
-
this.zIndex = data.zIndex || getZIndex();
|
|
94
|
-
}
|
|
92
|
+
var _a = this.graphModel, overlapMode = _a.overlapMode, eventCenter = _a.eventCenter;
|
|
93
|
+
this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex());
|
|
95
94
|
// 设置边的 anchors,也就是边的两个端点
|
|
96
95
|
// 端点依赖于 edgeData 的 sourceNode 和 targetNode
|
|
97
96
|
this.setAnchors();
|
|
@@ -99,6 +98,10 @@ var BaseEdgeModel = /** @class */ (function () {
|
|
|
99
98
|
this.initPoints();
|
|
100
99
|
// 文本位置依赖于边上的所有拐点
|
|
101
100
|
this.formatText(data);
|
|
101
|
+
eventCenter.on('overlap:change', function (data) {
|
|
102
|
+
var newMode = data.overlapMode;
|
|
103
|
+
_this.updateZIndexByOverlap(newMode, _this.zIndex || getZIndex());
|
|
104
|
+
});
|
|
102
105
|
};
|
|
103
106
|
/**
|
|
104
107
|
* 设置model属性
|
|
@@ -322,7 +325,9 @@ var BaseEdgeModel = /** @class */ (function () {
|
|
|
322
325
|
startPoint: assign({}, this.startPoint),
|
|
323
326
|
endPoint: assign({}, this.endPoint),
|
|
324
327
|
};
|
|
325
|
-
|
|
328
|
+
// 因为默认模式和边在上模式下,对节点的zIndex要求不高(因为渲染的时候会按照模式对所有元素进行排序)
|
|
329
|
+
// 所以只在递增模式和静态模式下设置zIndex
|
|
330
|
+
if ([OverlapMode.INCREASE, OverlapMode.STATIC].includes(this.graphModel.overlapMode)) {
|
|
326
331
|
data.zIndex = this.zIndex;
|
|
327
332
|
}
|
|
328
333
|
var _a = this.text, x = _a.x, y = _a.y, value = _a.value;
|
|
@@ -586,6 +591,22 @@ var BaseEdgeModel = /** @class */ (function () {
|
|
|
586
591
|
this.updateStartPoint({ x: startPoint.x, y: startPoint.y });
|
|
587
592
|
this.updateEndPoint({ x: endPoint.x, y: endPoint.y });
|
|
588
593
|
};
|
|
594
|
+
// 堆叠模式变化时,更新zIndex
|
|
595
|
+
BaseEdgeModel.prototype.updateZIndexByOverlap = function (overlapMode, defaultZIndex) {
|
|
596
|
+
switch (overlapMode) {
|
|
597
|
+
case OverlapMode.DEFAULT:
|
|
598
|
+
this.zIndex = 0;
|
|
599
|
+
break;
|
|
600
|
+
case OverlapMode.EDGE_TOP:
|
|
601
|
+
this.zIndex = 1;
|
|
602
|
+
break;
|
|
603
|
+
case OverlapMode.INCREASE:
|
|
604
|
+
this.zIndex = defaultZIndex;
|
|
605
|
+
break;
|
|
606
|
+
default:
|
|
607
|
+
break;
|
|
608
|
+
}
|
|
609
|
+
};
|
|
589
610
|
BaseEdgeModel.BaseType = ElementType.EDGE;
|
|
590
611
|
__decorate([
|
|
591
612
|
observable
|
|
@@ -755,6 +776,9 @@ var BaseEdgeModel = /** @class */ (function () {
|
|
|
755
776
|
__decorate([
|
|
756
777
|
action
|
|
757
778
|
], BaseEdgeModel.prototype, "updateAfterAdjustStartAndEnd", null);
|
|
779
|
+
__decorate([
|
|
780
|
+
action
|
|
781
|
+
], BaseEdgeModel.prototype, "updateZIndexByOverlap", null);
|
|
758
782
|
return BaseEdgeModel;
|
|
759
783
|
}());
|
|
760
784
|
export { BaseEdgeModel };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { GraphModel, Model } from '..';
|
|
2
2
|
import LogicFlow from '../../LogicFlow';
|
|
3
|
-
import { ElementState, ElementType, ModelType, TextMode } from '../../constant';
|
|
3
|
+
import { ElementState, ElementType, ModelType, OverlapMode, TextMode } from '../../constant';
|
|
4
4
|
import { ResizeControl } from '../../view/Control';
|
|
5
5
|
import AnchorConfig = Model.AnchorConfig;
|
|
6
6
|
import GraphElements = LogicFlow.GraphElements;
|
|
@@ -288,6 +288,7 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
|
|
|
288
288
|
updateStyles(styles: Record<string, any>): void;
|
|
289
289
|
setZIndex(zIndex?: number): void;
|
|
290
290
|
updateAttributes(attributes: any): void;
|
|
291
|
+
updateZIndexByOverlap(overlapMode: OverlapMode, defaultZIndex: any): void;
|
|
291
292
|
}
|
|
292
293
|
export declare namespace BaseNodeModel {
|
|
293
294
|
type PointTuple = [number, number];
|
|
@@ -172,6 +172,7 @@ var BaseNodeModel = /** @class */ (function () {
|
|
|
172
172
|
* setAttributes 除了初始化调用外,还会在 properties 发生变化了调用。
|
|
173
173
|
*/
|
|
174
174
|
BaseNodeModel.prototype.initNodeData = function (data) {
|
|
175
|
+
var _this = this;
|
|
175
176
|
if (!data.properties) {
|
|
176
177
|
data.properties = {};
|
|
177
178
|
}
|
|
@@ -186,10 +187,12 @@ var BaseNodeModel = /** @class */ (function () {
|
|
|
186
187
|
// 在下面又将 NodeConfig 中的数据赋值给了 this,应该会触发 setAttributes,确认是否符合预期
|
|
187
188
|
// TODO: 确认 constructor 中赋值 properties 是否必要,此处将 NodeConfig 中所有属性赋值给 this,包括 rotate、rotatable,resizable 等
|
|
188
189
|
assign(this, pickNodeConfig(data));
|
|
189
|
-
var
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
190
|
+
var _a = this.graphModel, overlapMode = _a.overlapMode, eventCenter = _a.eventCenter;
|
|
191
|
+
this.updateZIndexByOverlap(overlapMode, data.zIndex || getZIndex());
|
|
192
|
+
eventCenter.on('overlap:change', function (data) {
|
|
193
|
+
var newMode = data.overlapMode;
|
|
194
|
+
_this.updateZIndexByOverlap(newMode, _this.zIndex || getZIndex());
|
|
195
|
+
});
|
|
193
196
|
};
|
|
194
197
|
/**
|
|
195
198
|
* 设置model属性,每次properties发生变化会触发
|
|
@@ -302,7 +305,9 @@ var BaseNodeModel = /** @class */ (function () {
|
|
|
302
305
|
if (this.rotate) {
|
|
303
306
|
data.rotate = this.rotate;
|
|
304
307
|
}
|
|
305
|
-
|
|
308
|
+
// 因为默认模式和节点在上模式下,对边的zIndex要求不高(因为渲染的时候会按照模式对所有元素进行排序)
|
|
309
|
+
// 所以只在递增模式和静态模式下设置zIndex
|
|
310
|
+
if ([OverlapMode.INCREASE, OverlapMode.STATIC].includes(this.graphModel.overlapMode)) {
|
|
306
311
|
data.zIndex = this.zIndex;
|
|
307
312
|
}
|
|
308
313
|
if (value) {
|
|
@@ -791,6 +796,22 @@ var BaseNodeModel = /** @class */ (function () {
|
|
|
791
796
|
BaseNodeModel.prototype.updateAttributes = function (attributes) {
|
|
792
797
|
assign(this, attributes);
|
|
793
798
|
};
|
|
799
|
+
// 堆叠模式变化时,更新zIndex
|
|
800
|
+
BaseNodeModel.prototype.updateZIndexByOverlap = function (overlapMode, defaultZIndex) {
|
|
801
|
+
switch (overlapMode) {
|
|
802
|
+
case OverlapMode.DEFAULT:
|
|
803
|
+
this.zIndex = 1;
|
|
804
|
+
break;
|
|
805
|
+
case OverlapMode.EDGE_TOP:
|
|
806
|
+
this.zIndex = 0;
|
|
807
|
+
break;
|
|
808
|
+
case OverlapMode.INCREASE:
|
|
809
|
+
this.zIndex = defaultZIndex;
|
|
810
|
+
break;
|
|
811
|
+
default:
|
|
812
|
+
break;
|
|
813
|
+
}
|
|
814
|
+
};
|
|
794
815
|
BaseNodeModel.BaseType = ElementType.NODE;
|
|
795
816
|
__decorate([
|
|
796
817
|
observable
|
|
@@ -945,6 +966,9 @@ var BaseNodeModel = /** @class */ (function () {
|
|
|
945
966
|
__decorate([
|
|
946
967
|
action
|
|
947
968
|
], BaseNodeModel.prototype, "updateAttributes", null);
|
|
969
|
+
__decorate([
|
|
970
|
+
action
|
|
971
|
+
], BaseNodeModel.prototype, "updateZIndexByOverlap", null);
|
|
948
972
|
return BaseNodeModel;
|
|
949
973
|
}());
|
|
950
974
|
export { BaseNodeModel };
|
|
@@ -19,6 +19,7 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
|
|
|
19
19
|
mouseUpDrag?: boolean;
|
|
20
20
|
startTime?: number;
|
|
21
21
|
modelDisposer: IReactionDisposer;
|
|
22
|
+
mouseDownPosition?: LogicFlow.Position;
|
|
22
23
|
constructor(props: IProps);
|
|
23
24
|
componentWillUnmount(): void;
|
|
24
25
|
componentDidMount(): void;
|
package/es/view/node/BaseNode.js
CHANGED
|
@@ -88,11 +88,15 @@ var BaseNode = /** @class */ (function (_super) {
|
|
|
88
88
|
var _g = graphModel.editConfigModel, stopMoveGraph = _g.stopMoveGraph, autoExpand = _g.autoExpand, snapGrid = _g.snapGrid, transformModel = graphModel.transformModel, selectNodes = graphModel.selectNodes, width = graphModel.width, height = graphModel.height, gridSize = graphModel.gridSize;
|
|
89
89
|
model.isDragging = true;
|
|
90
90
|
var _h = event, clientX = _h.clientX, clientY = _h.clientY;
|
|
91
|
-
var _j =
|
|
91
|
+
var _j = _this.mouseDownPosition, mouseDownX = _j.x, mouseDownY = _j.y;
|
|
92
|
+
if (clientX - mouseDownX > gridSize || clientY - mouseDownY > gridSize) {
|
|
93
|
+
model.isDragging = true;
|
|
94
|
+
}
|
|
95
|
+
var _k = graphModel.getPointByClient({
|
|
92
96
|
x: clientX,
|
|
93
97
|
y: clientY,
|
|
94
|
-
}).canvasOverlayPosition, x =
|
|
95
|
-
var
|
|
98
|
+
}).canvasOverlayPosition, x = _k.x, y = _k.y;
|
|
99
|
+
var _l = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x1 = _l[0], y1 = _l[1];
|
|
96
100
|
// 1. 考虑画布被缩放
|
|
97
101
|
// 2. 考虑鼠标位置不再节点中心
|
|
98
102
|
x = x + ((_c = (_b = _this.moveOffset) === null || _b === void 0 ? void 0 : _b.dx) !== null && _c !== void 0 ? _c : 0);
|
|
@@ -110,14 +114,14 @@ var BaseNode = /** @class */ (function (_super) {
|
|
|
110
114
|
return;
|
|
111
115
|
}
|
|
112
116
|
// 取节点左上角和右下角,计算节点移动是否超出范围
|
|
113
|
-
var
|
|
117
|
+
var _m = __read(transformModel.CanvasPointToHtmlPoint([
|
|
114
118
|
x - model.width / 2,
|
|
115
119
|
y - model.height / 2,
|
|
116
|
-
]), 2), leftTopX =
|
|
117
|
-
var
|
|
120
|
+
]), 2), leftTopX = _m[0], leftTopY = _m[1];
|
|
121
|
+
var _o = __read(transformModel.CanvasPointToHtmlPoint([
|
|
118
122
|
x + model.width / 2,
|
|
119
123
|
y + model.height / 2,
|
|
120
|
-
]), 2), rightBottomX =
|
|
124
|
+
]), 2), rightBottomX = _o[0], rightBottomY = _o[1];
|
|
121
125
|
var size = Math.max(gridSize, 20);
|
|
122
126
|
var nearBoundary = [];
|
|
123
127
|
if (leftTopX < 0) {
|
|
@@ -173,11 +177,19 @@ var BaseNode = /** @class */ (function (_super) {
|
|
|
173
177
|
// 节点拖拽进画布之后,不触发click事件相关emit
|
|
174
178
|
// 点拖拽进画布没有触发mousedown事件,没有startTime,用这个值做区分
|
|
175
179
|
var isDragging = _this.mouseUpDrag === false;
|
|
180
|
+
var curTime = new Date().getTime();
|
|
176
181
|
if (!_this.startTime)
|
|
177
182
|
return;
|
|
183
|
+
var timeInterval = curTime - _this.startTime;
|
|
178
184
|
var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
|
|
179
|
-
|
|
180
|
-
|
|
185
|
+
// 这里会有一种极端情况:当网格大小是1或者关闭网格吸附时,用触摸板点击节点会触发拖拽事件导致节点无法选中
|
|
186
|
+
// 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中,允许在非拖拽状态且时间间隔小于100ms时触发点击事件
|
|
187
|
+
if (!isDragging && timeInterval > 300)
|
|
188
|
+
return;
|
|
189
|
+
if (!isDragging) {
|
|
190
|
+
_this.onDragEnd();
|
|
191
|
+
_this.handleMouseUp();
|
|
192
|
+
}
|
|
181
193
|
// 节点数据,多为事件对象数据抛出
|
|
182
194
|
var nodeData = model.getData();
|
|
183
195
|
var position = graphModel.getPointByClient({
|
|
@@ -255,6 +267,7 @@ var BaseNode = /** @class */ (function (_super) {
|
|
|
255
267
|
};
|
|
256
268
|
_this.handleMouseDown = function (ev) {
|
|
257
269
|
var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
|
|
270
|
+
_this.mouseDownPosition = { x: ev.clientX, y: ev.clientY };
|
|
258
271
|
_this.startTime = new Date().getTime();
|
|
259
272
|
var editConfigModel = graphModel.editConfigModel;
|
|
260
273
|
if (editConfigModel.adjustNodePosition && model.draggable) {
|
|
@@ -268,6 +281,9 @@ var BaseNode = /** @class */ (function (_super) {
|
|
|
268
281
|
});
|
|
269
282
|
};
|
|
270
283
|
_this.handleBlur = function () {
|
|
284
|
+
// 当节点通过自定义锚点实现节点删除时,这里props会变成undefined,需兼容一下
|
|
285
|
+
if (!_this.props)
|
|
286
|
+
return;
|
|
271
287
|
var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
|
|
272
288
|
graphModel.eventCenter.emit(EventType.NODE_BLUR, {
|
|
273
289
|
data: model.getData(),
|
package/lib/LogicFlow.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import Tool from './tool';
|
|
|
7
7
|
import History from './history';
|
|
8
8
|
import Keyboard from './keyboard';
|
|
9
9
|
import { EventCallback, CallbackArgs, EventArgs } from './event/eventEmitter';
|
|
10
|
-
import { EventType, SegmentDirection } from './constant';
|
|
10
|
+
import { EventType, OverlapMode, SegmentDirection } from './constant';
|
|
11
11
|
import { Grid } from './view/overlay';
|
|
12
12
|
import Extension = LogicFlow.Extension;
|
|
13
13
|
import ExtensionConfig = LogicFlow.ExtensionConfig;
|
|
@@ -430,6 +430,7 @@ export declare class LogicFlow {
|
|
|
430
430
|
* 清空画布
|
|
431
431
|
*/
|
|
432
432
|
clearData(): void;
|
|
433
|
+
setOverlapMode(mode: OverlapMode): void;
|
|
433
434
|
/*********************************************************
|
|
434
435
|
* LogicFlow Render方法
|
|
435
436
|
********************************************************/
|
package/lib/LogicFlow.js
CHANGED
|
@@ -962,6 +962,9 @@ var LogicFlow = /** @class */ (function () {
|
|
|
962
962
|
// 强制刷新数据, 让 preact 清除对已删除节点的引用
|
|
963
963
|
this.render({});
|
|
964
964
|
};
|
|
965
|
+
LogicFlow.prototype.setOverlapMode = function (mode) {
|
|
966
|
+
this.graphModel.setOverlapMode(mode);
|
|
967
|
+
};
|
|
965
968
|
/*********************************************************
|
|
966
969
|
* LogicFlow Render方法
|
|
967
970
|
********************************************************/
|
package/lib/constant/index.d.ts
CHANGED
|
@@ -134,8 +134,10 @@ export declare enum EventType {
|
|
|
134
134
|
EDIT_CONFIG_CHANGED = "editConfig:changed"
|
|
135
135
|
}
|
|
136
136
|
export declare enum OverlapMode {
|
|
137
|
+
STATIC = -1,// 静态(元素层级不随点击变化)
|
|
137
138
|
DEFAULT = 0,// 默认
|
|
138
|
-
INCREASE = 1
|
|
139
|
+
INCREASE = 1,// 递增
|
|
140
|
+
EDGE_TOP = 2
|
|
139
141
|
}
|
|
140
142
|
export declare enum SegmentDirection {
|
|
141
143
|
HORIZONTAL = "horizontal",
|
package/lib/constant/index.js
CHANGED
|
@@ -152,8 +152,10 @@ var EventType;
|
|
|
152
152
|
})(EventType || (exports.EventType = EventType = {}));
|
|
153
153
|
var OverlapMode;
|
|
154
154
|
(function (OverlapMode) {
|
|
155
|
+
OverlapMode[OverlapMode["STATIC"] = -1] = "STATIC";
|
|
155
156
|
OverlapMode[OverlapMode["DEFAULT"] = 0] = "DEFAULT";
|
|
156
157
|
OverlapMode[OverlapMode["INCREASE"] = 1] = "INCREASE";
|
|
158
|
+
OverlapMode[OverlapMode["EDGE_TOP"] = 2] = "EDGE_TOP";
|
|
157
159
|
})(OverlapMode || (exports.OverlapMode = OverlapMode = {}));
|
|
158
160
|
var SegmentDirection;
|
|
159
161
|
(function (SegmentDirection) {
|
|
@@ -179,6 +179,14 @@ export declare class GraphModel {
|
|
|
179
179
|
* @param model
|
|
180
180
|
*/
|
|
181
181
|
getTextModel(model: BaseNodeModel): TextMode | undefined;
|
|
182
|
+
/**
|
|
183
|
+
* 内部保留方法,请勿直接使用
|
|
184
|
+
*/
|
|
185
|
+
/**
|
|
186
|
+
* 设置重叠模式
|
|
187
|
+
* @param mode 重叠模式
|
|
188
|
+
*/
|
|
189
|
+
setOverlapMode(mode: OverlapMode): void;
|
|
182
190
|
/**
|
|
183
191
|
* 更新元素的文本模式
|
|
184
192
|
* @param mode
|
|
@@ -449,7 +457,7 @@ export declare class GraphModel {
|
|
|
449
457
|
*/
|
|
450
458
|
clearData(): void;
|
|
451
459
|
/**
|
|
452
|
-
*
|
|
460
|
+
* 获取图形区域虚拟矩形的尺寸和中心坐标
|
|
453
461
|
* @returns
|
|
454
462
|
*/
|
|
455
463
|
getVirtualRectSize(): GraphModel.VirtualRectProps;
|