@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/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
  ********************************************************/
@@ -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",
@@ -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) {
@@ -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;
@@ -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 elements = __spreadArray(__spreadArray([], __read(this.nodes), false), __read(this.edges), false).sort(function (a, b) { return a.zIndex - b.zIndex; });
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
- if (this.overlapMode === OverlapMode.DEFAULT) {
683
- (_c = this.topElement) === null || _c === void 0 ? void 0 : _c.setZIndex();
684
- element.setZIndex(ELEMENT_MAX_Z_INDEX);
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 (this.overlapMode === OverlapMode.DEFAULT) {
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
- this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
1363
- this.isContainerWidth = isNil(width);
1364
- this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
1365
- this.isContainerHeight = isNil(height);
1366
- if (!this.width || !this.height) {
1367
- console.warn('渲染画布的时候无法获取画布宽高,请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
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 overlapMode = this.graphModel.overlapMode;
92
- if (overlapMode === OverlapMode.INCREASE) {
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
- if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
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 overlapMode = this.graphModel.overlapMode;
190
- if (overlapMode === OverlapMode.INCREASE) {
191
- this.zIndex = data.zIndex || getZIndex();
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
- if (this.graphModel.overlapMode === OverlapMode.INCREASE) {
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;
@@ -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 = graphModel.getPointByClient({
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 = _j.x, y = _j.y;
95
- var _k = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x1 = _k[0], y1 = _k[1];
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 _l = __read(transformModel.CanvasPointToHtmlPoint([
117
+ var _m = __read(transformModel.CanvasPointToHtmlPoint([
114
118
  x - model.width / 2,
115
119
  y - model.height / 2,
116
- ]), 2), leftTopX = _l[0], leftTopY = _l[1];
117
- var _m = __read(transformModel.CanvasPointToHtmlPoint([
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 = _m[0], rightBottomY = _m[1];
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
- if (!isDragging)
180
- return; // 如果是拖拽, 不触发click事件。
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(),
@@ -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
  ********************************************************/
@@ -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",
@@ -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;