@logicflow/core 2.0.7 → 2.0.8

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.
Files changed (72) hide show
  1. package/.turbo/turbo-build$colon$dev.log +10 -10
  2. package/.turbo/turbo-build.log +17 -33
  3. package/CHANGELOG.md +12 -2
  4. package/__tests__/algorithm/egde.test.ts +4 -4
  5. package/dist/index.css +3 -0
  6. package/es/algorithm/edge.js +3 -5
  7. package/es/constant/index.d.ts +4 -0
  8. package/es/constant/index.js +4 -0
  9. package/es/event/eventArgs.d.ts +17 -1
  10. package/es/index.css +3 -0
  11. package/es/model/GraphModel.d.ts +3 -3
  12. package/es/model/GraphModel.js +33 -7
  13. package/es/model/edge/LineEdgeModel.d.ts +2 -0
  14. package/es/model/edge/LineEdgeModel.js +8 -0
  15. package/es/model/edge/PolylineEdgeModel.d.ts +1 -0
  16. package/es/model/edge/PolylineEdgeModel.js +4 -3
  17. package/es/model/node/BaseNodeModel.d.ts +2 -2
  18. package/es/model/node/HtmlNodeModel.d.ts +2 -2
  19. package/es/model/node/TextNodeModel.d.ts +2 -2
  20. package/es/style/index.css +3 -0
  21. package/es/style/index.less +5 -0
  22. package/es/style/raw.d.ts +1 -1
  23. package/es/style/raw.js +1 -1
  24. package/es/view/edge/BaseEdge.d.ts +2 -0
  25. package/es/view/edge/BaseEdge.js +13 -1
  26. package/es/view/node/BaseNode.d.ts +2 -0
  27. package/es/view/node/BaseNode.js +13 -1
  28. package/es/view/overlay/BackgroundOverlay.js +2 -1
  29. package/es/view/overlay/getTransformHoc.d.ts +1 -1
  30. package/lib/algorithm/edge.js +3 -5
  31. package/lib/constant/index.d.ts +4 -0
  32. package/lib/constant/index.js +4 -0
  33. package/lib/event/eventArgs.d.ts +17 -1
  34. package/lib/index.css +3 -0
  35. package/lib/model/GraphModel.d.ts +3 -3
  36. package/lib/model/GraphModel.js +32 -6
  37. package/lib/model/edge/LineEdgeModel.d.ts +2 -0
  38. package/lib/model/edge/LineEdgeModel.js +8 -0
  39. package/lib/model/edge/PolylineEdgeModel.d.ts +1 -0
  40. package/lib/model/edge/PolylineEdgeModel.js +4 -3
  41. package/lib/model/node/BaseNodeModel.d.ts +2 -2
  42. package/lib/model/node/HtmlNodeModel.d.ts +2 -2
  43. package/lib/model/node/TextNodeModel.d.ts +2 -2
  44. package/lib/style/index.css +3 -0
  45. package/lib/style/index.less +5 -0
  46. package/lib/style/raw.d.ts +1 -1
  47. package/lib/style/raw.js +1 -1
  48. package/lib/view/edge/BaseEdge.d.ts +2 -0
  49. package/lib/view/edge/BaseEdge.js +13 -1
  50. package/lib/view/node/BaseNode.d.ts +2 -0
  51. package/lib/view/node/BaseNode.js +13 -1
  52. package/lib/view/overlay/BackgroundOverlay.js +2 -1
  53. package/lib/view/overlay/getTransformHoc.d.ts +1 -1
  54. package/package.json +1 -1
  55. package/src/LogicFlow.tsx +6 -0
  56. package/src/algorithm/edge.ts +1 -1
  57. package/src/algorithm/outline.ts +1 -1
  58. package/src/constant/index.ts +4 -0
  59. package/src/event/eventArgs.ts +27 -1
  60. package/src/model/GraphModel.ts +111 -3
  61. package/src/model/edge/LineEdgeModel.ts +8 -0
  62. package/src/model/edge/PolylineEdgeModel.ts +5 -3
  63. package/src/style/index.less +5 -0
  64. package/src/style/raw.ts +3 -0
  65. package/src/view/Graph.tsx +3 -4
  66. package/src/view/edge/BaseEdge.tsx +16 -0
  67. package/src/view/node/BaseNode.tsx +17 -1
  68. package/src/view/overlay/BackgroundOverlay.tsx +11 -16
  69. package/src/view/overlay/OutlineOverlay.tsx +1 -1
  70. package/stats.html +1 -1
  71. package/dist/index.min.js +0 -2
  72. package/dist/index.min.js.map +0 -1
@@ -1,10 +1,10 @@
1
-
2
- > @logicflow/core@2.0.6 build:dev /Users/didi/Desktop/github/LogicFlow/packages/core
3
- > rss
4
-
5
- > [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm
6
-
7
- > @logicflow/core@2.0.6 build:less /Users/didi/Desktop/github/LogicFlow/packages/core
8
- > rss
9
-
10
- > [build:less] ./scripts/build-less
1
+
2
+ > @logicflow/core@2.0.7 build:dev /Users/didi/Desktop/github/LogicFlow/packages/core
3
+ > rss
4
+
5
+ > [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm
6
+
7
+ > @logicflow/core@2.0.7 build:less /Users/didi/Desktop/github/LogicFlow/packages/core
8
+ > rss
9
+
10
+ > [build:less] ./scripts/build-less
@@ -1,33 +1,17 @@
1
-
2
- > @logicflow/core@2.0.6 prebuild /Users/didi/Desktop/github/LogicFlow/packages/core
3
- > rss
4
-
5
- > [prebuild] run-s -s clean:build
6
- > [clean:build] rimraf dist es lib
7
-
8
- > @logicflow/core@2.0.6 build /Users/didi/Desktop/github/LogicFlow/packages/core
9
- > rss
10
-
11
- > [build] run-p -s build:dev build:umd
12
- > [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs
13
- > [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm
14
- > [build:less] ./scripts/build-less
15
- > [build:less] ./scripts/build-less
16
- 
17
- ./src/index.ts → dist/index.min.js...
18
- +------------------------------------+
19
- | |
20
- | Bundle Format: umd |
21
- | Bundle Name: Core |
22
- | Destination: dist/index.min.js |
23
- | Bundle Size: 378.63 KB |
24
- | Minified Size: 377.38 KB |
25
- | GZipped Size: 109.75 KB |
26
- | |
27
- +------------------------------------+
28
- (!) Circular dependencies
29
- src/index.ts -> src/LogicFlow.tsx -> src/index.ts
30
- src/util/index.ts -> src/util/edge.ts -> src/util/index.ts
31
- src/util/index.ts -> src/util/edge.ts -> src/algorithm/index.ts -> src/algorithm/outline.ts -> src/util/index.ts
32
- ...and 19 more
33
- created dist/index.min.js in 17.8s
1
+
2
+ > @logicflow/core@2.0.7 prebuild /Users/didi/Desktop/github/LogicFlow/packages/core
3
+ > rss
4
+
5
+ > [prebuild] run-s -s clean:build
6
+ > [clean:build] rimraf dist es lib
7
+
8
+ > @logicflow/core@2.0.7 build /Users/didi/Desktop/github/LogicFlow/packages/core
9
+ > rss
10
+
11
+ > [build] run-p -s build:dev build:umd
12
+ > [build:umd] pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs
13
+ > [build:dev] pnpm run --if-present build:less && run-p -s build:cjs build:esm
14
+ > [build:less] ./scripts/build-less
15
+ > [build:less] ./scripts/build-less
16
+ 
17
+ ./src/index.ts → dist/index.min.js...
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # Change Log
2
2
 
3
+ ## 2.0.8
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(core): 修复已知问题,新增渐进连线能力
8
+ - feat: 支持动态修改画布背景配置
9
+ - fix(core): 修复使用label情况下双击节点会让节点进入文本编辑态问题
10
+ - fix(core): 修复初始化画布时因为节点吸附网格导致的节点与边错位问题 #1954
11
+ - feat(core): 增加节点和边的focus和blur事件上报 #1917
12
+ - feat(core): line 和 polyline 增加getPath方法 #1929
13
+
3
14
  ## 2.0.7
4
15
 
5
16
  ### Patch Changes
@@ -16,11 +27,10 @@
16
27
  - fix(core): 在没有拖拽的情况下,Control组件突然销毁,不触发cancelDrag(#1926) by wbccb
17
28
  - fix(core): 修复笔记本触摸板点击边事件失效 by wuchenguang1998
18
29
  - feat(examples): 添加动画边demo by DymoneLewis
19
- - fix(core): 类型定义 properties:change 改为 node:properties-change by HeatonZ
30
+ - fix(core): 类型定义 properties:change 改为 node:properties-change by HeatonZ
20
31
  - feat: node-registry 自定义properties类型 by HeatonZ
21
32
  - fix(core): 修复 polyline 与多边形节点的交点不正确的问题 by Yuan-ZW
22
33
 
23
-
24
34
  ## 2.0.6
25
35
 
26
36
  ### Patch Changes
@@ -105,10 +105,10 @@ describe('algorithm/edge', () => {
105
105
  y: -10,
106
106
  },
107
107
  ]
108
- expect(isInSegment(point, line1[0], line2[1])).toBeTruthy()
109
- expect(isInSegment(point, line1[1], line2[0])).toBeTruthy()
110
- expect(isInSegment(point, line2[0], line1[1])).toBeTruthy()
111
- expect(isInSegment(point, line2[1], line1[0])).toBeTruthy()
108
+ expect(isInSegment(point, line1[0], line1[1])).toBeTruthy()
109
+ expect(isInSegment(point, line1[1], line1[0])).toBeTruthy()
110
+ expect(isInSegment(point, line2[0], line2[1])).toBeTruthy()
111
+ expect(isInSegment(point, line2[1], line2[0])).toBeTruthy()
112
112
  })
113
113
  // not in segment
114
114
  test('not in segment', () => {
package/dist/index.css CHANGED
@@ -15,6 +15,9 @@
15
15
  .lf-text-draggable {
16
16
  cursor: move;
17
17
  }
18
+ *:focus {
19
+ outline: none;
20
+ }
18
21
  .lf-node-anchor {
19
22
  cursor: crosshair;
20
23
  }
@@ -48,9 +48,7 @@ export var isInSegment = function (point, start, end) {
48
48
  var endX = end.x, endY = end.y;
49
49
  var k = (endY - startY) / (endX - startX);
50
50
  var b = startY - k * startX;
51
- return (x >= startX &&
52
- x <= endX &&
53
- y >= startY &&
54
- y <= endY &&
55
- Math.abs(y - k * x + b) < Number.EPSILON);
51
+ return (((x >= startX && x <= endX) || (x <= startX && x >= endX)) &&
52
+ ((y >= startY && y <= endY) || (y <= startY && y >= endY)) &&
53
+ Math.abs(y - k * x - b) < Number.EPSILON);
56
54
  };
@@ -49,12 +49,16 @@ export declare enum EventType {
49
49
  NODE_CONTEXTMENU = "node:contextmenu",
50
50
  NODE_ROTATE = "node:rotate",
51
51
  NODE_RESIZE = "node:resize",
52
+ NODE_FOCUS = "node:focus",
53
+ NODE_BLUR = "node:blur",
52
54
  NODE_PROPERTIES_CHANGE = "node:properties-change",
53
55
  NODE_PROPERTIES_DELETE = "node:properties-delete",
54
56
  EDGE_ADD = "edge:add",
55
57
  EDGE_DELETE = "edge:delete",
56
58
  EDGE_CLICK = "edge:click",
57
59
  EDGE_DBCLICK = "edge:dbclick",
60
+ EDGE_FOCUS = "edge:focus",
61
+ EDGE_BLUR = "edge:blur",
58
62
  EDGE_MOUSEENTER = "edge:mouseenter",
59
63
  EDGE_MOUSELEAVE = "edge:mouseleave",
60
64
  EDGE_CONTEXTMENU = "edge:contextmenu",
@@ -54,6 +54,8 @@ export var EventType;
54
54
  EventType["NODE_CONTEXTMENU"] = "node:contextmenu";
55
55
  EventType["NODE_ROTATE"] = "node:rotate";
56
56
  EventType["NODE_RESIZE"] = "node:resize";
57
+ EventType["NODE_FOCUS"] = "node:focus";
58
+ EventType["NODE_BLUR"] = "node:blur";
57
59
  // 节点 properties 变化事件
58
60
  EventType["NODE_PROPERTIES_CHANGE"] = "node:properties-change";
59
61
  EventType["NODE_PROPERTIES_DELETE"] = "node:properties-delete";
@@ -62,6 +64,8 @@ export var EventType;
62
64
  EventType["EDGE_DELETE"] = "edge:delete";
63
65
  EventType["EDGE_CLICK"] = "edge:click";
64
66
  EventType["EDGE_DBCLICK"] = "edge:dbclick";
67
+ EventType["EDGE_FOCUS"] = "edge:focus";
68
+ EventType["EDGE_BLUR"] = "edge:blur";
65
69
  EventType["EDGE_MOUSEENTER"] = "edge:mouseenter";
66
70
  EventType["EDGE_MOUSELEAVE"] = "edge:mouseleave";
67
71
  EventType["EDGE_CONTEXTMENU"] = "edge:contextmenu";
@@ -97,7 +97,7 @@ interface NodeEventArgs {
97
97
  /**
98
98
  * 删除节点
99
99
  */
100
- 'node:delete': NodeEventArgsPick<'data'>;
100
+ 'node:delete': NodeEventArgsPick<'data' | 'model'>;
101
101
  /**
102
102
  * 添加外部拖入节点
103
103
  */
@@ -151,6 +151,14 @@ interface NodeEventArgs {
151
151
  */
152
152
  properties: Record<string, any>;
153
153
  };
154
+ /**
155
+ * 节点获焦
156
+ */
157
+ 'node:focus': NodeEventArgsPick<'data'>;
158
+ /**
159
+ * 节点失焦
160
+ */
161
+ 'node:blur': NodeEventArgsPick<'data'>;
154
162
  }
155
163
  type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<{
156
164
  /**
@@ -217,6 +225,14 @@ interface EdgeEventArgs {
217
225
  oldEdge: EdgeData;
218
226
  };
219
227
  };
228
+ /**
229
+ * 边获焦
230
+ */
231
+ 'edge:focus': EdgeEventArgsPick<'data'>;
232
+ /**
233
+ * 边失焦
234
+ */
235
+ 'edge:blur': EdgeEventArgsPick<'data'>;
220
236
  }
221
237
  /**
222
238
  * 文本事件
package/es/index.css CHANGED
@@ -15,6 +15,9 @@
15
15
  .lf-text-draggable {
16
16
  cursor: move;
17
17
  }
18
+ *:focus {
19
+ outline: none;
20
+ }
18
21
  .lf-node-anchor {
19
22
  cursor: crosshair;
20
23
  }
@@ -70,15 +70,15 @@ export declare class GraphModel {
70
70
  * 基于zIndex对元素进行排序。
71
71
  * todo: 性能优化
72
72
  */
73
- get sortElements(): (BaseNodeModel<LogicFlow.PropertiesType> | BaseEdgeModel<LogicFlow.PropertiesType>)[];
73
+ get sortElements(): (BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>)[];
74
74
  /**
75
75
  * 当前编辑的元素,低频操作,先循环找。
76
76
  */
77
- get textEditElement(): BaseNodeModel<LogicFlow.PropertiesType> | BaseEdgeModel<LogicFlow.PropertiesType> | undefined;
77
+ get textEditElement(): BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType> | undefined;
78
78
  /**
79
79
  * 当前画布所有被选中的元素
80
80
  */
81
- get selectElements(): Map<string, BaseNodeModel<LogicFlow.PropertiesType> | BaseEdgeModel<LogicFlow.PropertiesType>>;
81
+ get selectElements(): Map<string, BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>>;
82
82
  get selectNodes(): BaseNodeModel<LogicFlow.PropertiesType>[];
83
83
  /**
84
84
  * 获取指定区域内的所有元素
@@ -40,7 +40,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
40
40
  }
41
41
  return to.concat(ar || Array.prototype.slice.call(from));
42
42
  };
43
- import { find, forEach, map, merge } from 'lodash-es';
43
+ import { find, forEach, map, merge, isBoolean, isEqual } from 'lodash-es';
44
44
  import { action, computed, observable } from 'mobx';
45
45
  import { EditConfigModel, TransformModel, } from '.';
46
46
  import { DEFAULT_VISIBLE_SPACE, ELEMENT_MAX_Z_INDEX, ElementState, ElementType, EventType, ModelType, OverlapMode, TextMode, } from '../constant';
@@ -375,6 +375,31 @@ var GraphModel = /** @class */ (function () {
375
375
  throw new Error("\u627E\u4E0D\u5230".concat(edge.type, "\u5BF9\u5E94\u7684\u8FB9\u3002"));
376
376
  }
377
377
  var edgeModel = new Model(edge, _this);
378
+ // 根据edgeModel中存储的数据找到当前画布上的起终锚点坐标
379
+ // 判断当前起终锚点数据和Model中存储的起终点数据是否一致,不一致更新起终点信息
380
+ var sourceNodeId = edgeModel.sourceNodeId, targetNodeId = edgeModel.targetNodeId, _b = edgeModel.sourceAnchorId, sourceAnchorId = _b === void 0 ? '' : _b, _c = edgeModel.targetAnchorId, targetAnchorId = _c === void 0 ? '' : _c, startPoint = edgeModel.startPoint, endPoint = edgeModel.endPoint, text = edgeModel.text, textPosition = edgeModel.textPosition;
381
+ var updateAnchorPoint = function (node, anchorId, point, updatePoint) {
382
+ var anchor = node === null || node === void 0 ? void 0 : node.anchors.find(function (anchor) { return anchor.id === anchorId; });
383
+ if (anchor && !isEqual(anchor, point)) {
384
+ updatePoint(anchor);
385
+ }
386
+ };
387
+ var sourceNode = _this.getNodeModelById(sourceNodeId);
388
+ var targetNode = _this.getNodeModelById(targetNodeId);
389
+ updateAnchorPoint(sourceNode, sourceAnchorId, startPoint, edgeModel.updateStartPoint.bind(edgeModel));
390
+ updateAnchorPoint(targetNode, targetAnchorId, endPoint, edgeModel.updateEndPoint.bind(edgeModel));
391
+ // 而文本需要先算一下文本与默认文本位置之间的相对位置差
392
+ // 再计算新路径的文本默认位置,加上相对位置差,得到调整后边的文本的位置
393
+ if (text) {
394
+ var x = text.x, y = text.y;
395
+ var defaultX = textPosition.x, defaultY = textPosition.y;
396
+ if (x && y && defaultX && defaultY) {
397
+ var deltaX = x - defaultX;
398
+ var deltaY = y - defaultY;
399
+ edgeModel.resetTextPosition();
400
+ edgeModel.moveText(deltaX, deltaY);
401
+ }
402
+ }
378
403
  _this.edgeModelMap.set(edgeModel.id, edgeModel);
379
404
  _this.elementsModelMap.set(edgeModel.id, edgeModel);
380
405
  return edgeModel;
@@ -666,11 +691,15 @@ var GraphModel = /** @class */ (function () {
666
691
  * @param {string} nodeId 节点Id
667
692
  */
668
693
  GraphModel.prototype.deleteNode = function (nodeId) {
669
- var nodeData = this.nodesMap[nodeId].model.getData();
694
+ var nodeModel = this.nodesMap[nodeId].model;
695
+ var nodeData = nodeModel.getData();
670
696
  this.deleteEdgeBySource(nodeId);
671
697
  this.deleteEdgeByTarget(nodeId);
672
698
  this.nodes.splice(this.nodesMap[nodeId].index, 1);
673
- this.eventCenter.emit(EventType.NODE_DELETE, { data: nodeData });
699
+ this.eventCenter.emit(EventType.NODE_DELETE, {
700
+ data: nodeData,
701
+ model: nodeModel,
702
+ });
674
703
  };
675
704
  /**
676
705
  * 添加节点
@@ -1250,10 +1279,7 @@ var GraphModel = /** @class */ (function () {
1250
1279
  * 更新网格配置
1251
1280
  */
1252
1281
  GraphModel.prototype.updateBackgroundOptions = function (options) {
1253
- if (typeof options === 'boolean') {
1254
- this.background = options;
1255
- }
1256
- else if (typeof this.background === 'boolean') {
1282
+ if (isBoolean(options) || isBoolean(this.background)) {
1257
1283
  this.background = options;
1258
1284
  }
1259
1285
  else {
@@ -16,6 +16,8 @@ export declare class LineEdgeModel extends BaseEdgeModel {
16
16
  height?: number | undefined;
17
17
  path?: string | undefined;
18
18
  };
19
+ initEdgeData(data: LogicFlow.EdgeConfig): void;
20
+ getPath(points: Point[]): string;
19
21
  getTextPosition(): Point;
20
22
  }
21
23
  export default LineEdgeModel;
@@ -65,6 +65,14 @@ var LineEdgeModel = /** @class */ (function (_super) {
65
65
  var _a = this.properties.style, customStyle = _a === void 0 ? {} : _a;
66
66
  return __assign(__assign(__assign({}, style), cloneDeep(line)), cloneDeep(customStyle));
67
67
  };
68
+ LineEdgeModel.prototype.initEdgeData = function (data) {
69
+ _super.prototype.initEdgeData.call(this, data);
70
+ this.points = this.getPath([this.startPoint, this.endPoint]);
71
+ };
72
+ LineEdgeModel.prototype.getPath = function (points) {
73
+ var _a = __read(points, 2), start = _a[0], end = _a[1];
74
+ return "".concat(start.x, ",").concat(start.y, " ").concat(end.x, ",").concat(end.y);
75
+ };
68
76
  LineEdgeModel.prototype.getTextPosition = function () {
69
77
  return {
70
78
  x: (this.startPoint.x + this.endPoint.x) / 2,
@@ -39,6 +39,7 @@ export declare class PolylineEdgeModel extends BaseEdgeModel {
39
39
  y: number;
40
40
  }[];
41
41
  };
42
+ getPath(points: Point[]): string;
42
43
  initPoints(): void;
43
44
  updatePoints(): void;
44
45
  updateStartPoint(anchor: Point): void;
@@ -295,11 +295,12 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
295
295
  pointsList: pointsList,
296
296
  });
297
297
  };
298
+ PolylineEdgeModel.prototype.getPath = function (points) {
299
+ return points.map(function (point) { return "".concat(point.x, ",").concat(point.y); }).join(' ');
300
+ };
298
301
  PolylineEdgeModel.prototype.initPoints = function () {
299
302
  if (this.pointsList.length > 0) {
300
- this.points = this.pointsList
301
- .map(function (point) { return "".concat(point.x, ",").concat(point.y); })
302
- .join(' ');
303
+ this.points = this.getPath(this.pointsList);
303
304
  }
304
305
  else {
305
306
  this.updatePoints();
@@ -172,8 +172,8 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
172
172
  color?: string | undefined;
173
173
  fontSize: number;
174
174
  lineHeight?: number | undefined;
175
- textAnchor?: "middle" | "start" | "end" | undefined;
176
- dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
175
+ textAnchor?: "start" | "end" | "middle" | undefined;
176
+ dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
177
177
  };
178
178
  /**
179
179
  * @overridable 支持重写
@@ -4,13 +4,13 @@ import { ModelType } from '../../constant';
4
4
  import AnchorConfig = Model.AnchorConfig;
5
5
  import LogicFlow from '../../LogicFlow';
6
6
  import GraphModel from '../GraphModel';
7
- export type IHtmlNodeProperties = {
7
+ export interface IHtmlNodeProperties {
8
8
  width?: number;
9
9
  height?: number;
10
10
  style?: LogicFlow.CommonTheme;
11
11
  textStyle?: LogicFlow.CommonTheme;
12
12
  [key: string]: unknown;
13
- };
13
+ }
14
14
  export declare class HtmlNodeModel<P extends IHtmlNodeProperties = IHtmlNodeProperties> extends BaseNodeModel<P> {
15
15
  modelType: ModelType;
16
16
  constructor(data: LogicFlow.NodeConfig<P>, graphModel: GraphModel);
@@ -24,8 +24,8 @@ export declare class TextNodeModel<P extends ITextNodeProperties = ITextNodeProp
24
24
  fontSize: number;
25
25
  textWidth?: number | undefined;
26
26
  lineHeight?: number | undefined;
27
- textAnchor?: "middle" | "start" | "end" | undefined;
28
- dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
27
+ textAnchor?: "start" | "end" | "middle" | undefined;
28
+ dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
29
29
  overflowMode?: "default" | "autoWrap" | "ellipsis" | undefined;
30
30
  wrapPadding?: string | undefined;
31
31
  };
@@ -15,6 +15,9 @@
15
15
  .lf-text-draggable {
16
16
  cursor: move;
17
17
  }
18
+ *:focus {
19
+ outline: none;
20
+ }
18
21
  .lf-node-anchor {
19
22
  cursor: crosshair;
20
23
  }
@@ -19,6 +19,11 @@
19
19
  cursor: move;
20
20
  }
21
21
 
22
+ // 在元素focus时浏览器会给元素outline设置一个5像素宽的默认样式,这里先全局禁用一下,后续再根据需要再做调整
23
+ *:focus {
24
+ outline: none;
25
+ }
26
+
22
27
  .lf-node-anchor {
23
28
  cursor: crosshair;
24
29
  }
package/es/style/raw.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /**
2
2
  * Auto generated file, do not modify it!
3
3
  */
4
- export declare const content = ".lf-graph {\n position: relative;\n z-index: 0;\n width: 100%;\n height: 100%;\n background: #fff;\n user-select: none;\n}\n.lf-element-text {\n cursor: text;\n}\n.lf-text-disabled {\n pointer-events: none;\n}\n.lf-text-draggable {\n cursor: move;\n}\n.lf-node-anchor {\n cursor: crosshair;\n}\n.lf-node-anchor-hover {\n visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n visibility: visible;\n}\n.lf-edge.pointer-none {\n pointer-events: none;\n}\n.lf-edge-append {\n cursor: pointer;\n}\n.lf-edge-animation {\n stroke-dashoffset: 100%;\n animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n to {\n stroke-dashoffset: 0;\n }\n}\n/* node */\n.lf-node-not-allow {\n cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n cursor: ew-resize;\n}\n.lf-dragging {\n cursor: move;\n}\n.lf-dragging .lf-element-text {\n cursor: move;\n}\n.lf-draggable {\n cursor: default;\n}\n.lf-bezier-adjust-anchor {\n cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n position: absolute;\n inset: 0;\n z-index: -1;\n}\n.lf-background-area {\n width: 100%;\n height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n pointer-events: all;\n}\n.lf-text-editable {\n pointer-events: all;\n}\n.lf-text-input {\n position: absolute;\n box-sizing: border-box;\n min-width: 100px;\n min-height: 20px;\n padding: 5px;\n line-height: 1.2;\n white-space: pre;\n text-align: center;\n background: #fff;\n border: 1px solid #edefed;\n border-radius: 3px;\n outline: none;\n transform: translate(-50%, -50%);\n resize: none;\n}\n.lf-get-text-height {\n display: inline-block;\n box-sizing: border-box;\n word-break: break-all;\n /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n width: 100%;\n line-height: 1.2;\n text-align: center;\n word-break: break-all;\n background: transparent;\n}\n.lf-node-text-ellipsis-content {\n width: 100%;\n line-height: 1.2;\n white-space: nowrap;\n text-align: center;\n background: transparent;\n /* overflow: hidden;\n text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n overflow: hidden;\n pointer-events: none;\n}\n.lf-tool-overlay > * {\n pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n overflow: hidden;\n pointer-events: none;\n}\n.modification-overlay > * {\n pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n pointer-events: none;\n}\n.lf-keyboard-tips {\n float: right;\n}\n.lf-node-select-decorate {\n position: absolute;\n border: 1px dashed #343435;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.lf-multiple-select {\n position: absolute;\n border: 2px dashed #187dffcc;\n box-shadow: 0 0 3px 0 #187dff80;\n cursor: move;\n}\n.lf-edge-adjust-point {\n cursor: move;\n}\n.lf-rotate-control {\n cursor: grabbing;\n}\n.lf-resize-control-nw {\n cursor: nw-resize;\n}\n.lf-resize-control-n {\n cursor: n-resize;\n}\n.lf-resize-control-ne {\n cursor: ne-resize;\n}\n.lf-resize-control-e {\n cursor: e-resize;\n}\n.lf-resize-control-se {\n cursor: se-resize;\n}\n.lf-resize-control-s {\n cursor: s-resize;\n}\n.lf-resize-control-sw {\n cursor: sw-resize;\n}\n.lf-resize-control-w {\n cursor: w-resize;\n}\n";
4
+ export declare const content = ".lf-graph {\n position: relative;\n z-index: 0;\n width: 100%;\n height: 100%;\n background: #fff;\n user-select: none;\n}\n.lf-element-text {\n cursor: text;\n}\n.lf-text-disabled {\n pointer-events: none;\n}\n.lf-text-draggable {\n cursor: move;\n}\n*:focus {\n outline: none;\n}\n.lf-node-anchor {\n cursor: crosshair;\n}\n.lf-node-anchor-hover {\n visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n visibility: visible;\n}\n.lf-edge.pointer-none {\n pointer-events: none;\n}\n.lf-edge-append {\n cursor: pointer;\n}\n.lf-edge-animation {\n stroke-dashoffset: 100%;\n animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n to {\n stroke-dashoffset: 0;\n }\n}\n/* node */\n.lf-node-not-allow {\n cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n cursor: ew-resize;\n}\n.lf-dragging {\n cursor: move;\n}\n.lf-dragging .lf-element-text {\n cursor: move;\n}\n.lf-draggable {\n cursor: default;\n}\n.lf-bezier-adjust-anchor {\n cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n position: absolute;\n inset: 0;\n z-index: -1;\n}\n.lf-background-area {\n width: 100%;\n height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n pointer-events: all;\n}\n.lf-text-editable {\n pointer-events: all;\n}\n.lf-text-input {\n position: absolute;\n box-sizing: border-box;\n min-width: 100px;\n min-height: 20px;\n padding: 5px;\n line-height: 1.2;\n white-space: pre;\n text-align: center;\n background: #fff;\n border: 1px solid #edefed;\n border-radius: 3px;\n outline: none;\n transform: translate(-50%, -50%);\n resize: none;\n}\n.lf-get-text-height {\n display: inline-block;\n box-sizing: border-box;\n word-break: break-all;\n /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n width: 100%;\n line-height: 1.2;\n text-align: center;\n word-break: break-all;\n background: transparent;\n}\n.lf-node-text-ellipsis-content {\n width: 100%;\n line-height: 1.2;\n white-space: nowrap;\n text-align: center;\n background: transparent;\n /* overflow: hidden;\n text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n overflow: hidden;\n pointer-events: none;\n}\n.lf-tool-overlay > * {\n pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n overflow: hidden;\n pointer-events: none;\n}\n.modification-overlay > * {\n pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n pointer-events: none;\n}\n.lf-keyboard-tips {\n float: right;\n}\n.lf-node-select-decorate {\n position: absolute;\n border: 1px dashed #343435;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.lf-multiple-select {\n position: absolute;\n border: 2px dashed #187dffcc;\n box-shadow: 0 0 3px 0 #187dff80;\n cursor: move;\n}\n.lf-edge-adjust-point {\n cursor: move;\n}\n.lf-rotate-control {\n cursor: grabbing;\n}\n.lf-resize-control-nw {\n cursor: nw-resize;\n}\n.lf-resize-control-n {\n cursor: n-resize;\n}\n.lf-resize-control-ne {\n cursor: ne-resize;\n}\n.lf-resize-control-e {\n cursor: e-resize;\n}\n.lf-resize-control-se {\n cursor: se-resize;\n}\n.lf-resize-control-s {\n cursor: s-resize;\n}\n.lf-resize-control-sw {\n cursor: sw-resize;\n}\n.lf-resize-control-w {\n cursor: w-resize;\n}\n";
package/es/style/raw.js CHANGED
@@ -2,4 +2,4 @@
2
2
  /**
3
3
  * Auto generated file, do not modify it!
4
4
  */
5
- export var content = ".lf-graph {\n position: relative;\n z-index: 0;\n width: 100%;\n height: 100%;\n background: #fff;\n user-select: none;\n}\n.lf-element-text {\n cursor: text;\n}\n.lf-text-disabled {\n pointer-events: none;\n}\n.lf-text-draggable {\n cursor: move;\n}\n.lf-node-anchor {\n cursor: crosshair;\n}\n.lf-node-anchor-hover {\n visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n visibility: visible;\n}\n.lf-edge.pointer-none {\n pointer-events: none;\n}\n.lf-edge-append {\n cursor: pointer;\n}\n.lf-edge-animation {\n stroke-dashoffset: 100%;\n animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n to {\n stroke-dashoffset: 0;\n }\n}\n/* node */\n.lf-node-not-allow {\n cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n cursor: ew-resize;\n}\n.lf-dragging {\n cursor: move;\n}\n.lf-dragging .lf-element-text {\n cursor: move;\n}\n.lf-draggable {\n cursor: default;\n}\n.lf-bezier-adjust-anchor {\n cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n position: absolute;\n inset: 0;\n z-index: -1;\n}\n.lf-background-area {\n width: 100%;\n height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n pointer-events: all;\n}\n.lf-text-editable {\n pointer-events: all;\n}\n.lf-text-input {\n position: absolute;\n box-sizing: border-box;\n min-width: 100px;\n min-height: 20px;\n padding: 5px;\n line-height: 1.2;\n white-space: pre;\n text-align: center;\n background: #fff;\n border: 1px solid #edefed;\n border-radius: 3px;\n outline: none;\n transform: translate(-50%, -50%);\n resize: none;\n}\n.lf-get-text-height {\n display: inline-block;\n box-sizing: border-box;\n word-break: break-all;\n /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n width: 100%;\n line-height: 1.2;\n text-align: center;\n word-break: break-all;\n background: transparent;\n}\n.lf-node-text-ellipsis-content {\n width: 100%;\n line-height: 1.2;\n white-space: nowrap;\n text-align: center;\n background: transparent;\n /* overflow: hidden;\n text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n overflow: hidden;\n pointer-events: none;\n}\n.lf-tool-overlay > * {\n pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n overflow: hidden;\n pointer-events: none;\n}\n.modification-overlay > * {\n pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n pointer-events: none;\n}\n.lf-keyboard-tips {\n float: right;\n}\n.lf-node-select-decorate {\n position: absolute;\n border: 1px dashed #343435;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.lf-multiple-select {\n position: absolute;\n border: 2px dashed #187dffcc;\n box-shadow: 0 0 3px 0 #187dff80;\n cursor: move;\n}\n.lf-edge-adjust-point {\n cursor: move;\n}\n.lf-rotate-control {\n cursor: grabbing;\n}\n.lf-resize-control-nw {\n cursor: nw-resize;\n}\n.lf-resize-control-n {\n cursor: n-resize;\n}\n.lf-resize-control-ne {\n cursor: ne-resize;\n}\n.lf-resize-control-e {\n cursor: e-resize;\n}\n.lf-resize-control-se {\n cursor: se-resize;\n}\n.lf-resize-control-s {\n cursor: s-resize;\n}\n.lf-resize-control-sw {\n cursor: sw-resize;\n}\n.lf-resize-control-w {\n cursor: w-resize;\n}\n";
5
+ export var content = ".lf-graph {\n position: relative;\n z-index: 0;\n width: 100%;\n height: 100%;\n background: #fff;\n user-select: none;\n}\n.lf-element-text {\n cursor: text;\n}\n.lf-text-disabled {\n pointer-events: none;\n}\n.lf-text-draggable {\n cursor: move;\n}\n*:focus {\n outline: none;\n}\n.lf-node-anchor {\n cursor: crosshair;\n}\n.lf-node-anchor-hover {\n visibility: hidden;\n}\n.lf-anchor:hover .lf-node-anchor-hover {\n visibility: visible;\n}\n.lf-edge.pointer-none {\n pointer-events: none;\n}\n.lf-edge-append {\n cursor: pointer;\n}\n.lf-edge-animation {\n stroke-dashoffset: 100%;\n animation: lf_animate_dash 5s linear infinite;\n}\n@keyframes lf_animate_dash {\n to {\n stroke-dashoffset: 0;\n }\n}\n/* node */\n.lf-node-not-allow {\n cursor: not-allowed;\n}\n.lf-polyline-append-ns-resize {\n cursor: ns-resize;\n}\n.lf-polyline-append-ew-resize {\n cursor: ew-resize;\n}\n.lf-dragging {\n cursor: move;\n}\n.lf-dragging .lf-element-text {\n cursor: move;\n}\n.lf-draggable {\n cursor: default;\n}\n.lf-bezier-adjust-anchor {\n cursor: pointer;\n}\n/* background */\n.lf-background,\n.lf-grid {\n position: absolute;\n inset: 0;\n z-index: -1;\n}\n.lf-background-area {\n width: 100%;\n height: 100%;\n}\n/* html-overlay */\n.lf-html-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n}\n.lf-html-overlay__transform > * {\n pointer-events: all;\n}\n.lf-text-editable {\n pointer-events: all;\n}\n.lf-text-input {\n position: absolute;\n box-sizing: border-box;\n min-width: 100px;\n min-height: 20px;\n padding: 5px;\n line-height: 1.2;\n white-space: pre;\n text-align: center;\n background: #fff;\n border: 1px solid #edefed;\n border-radius: 3px;\n outline: none;\n transform: translate(-50%, -50%);\n resize: none;\n}\n.lf-get-text-height {\n display: inline-block;\n box-sizing: border-box;\n word-break: break-all;\n /* \u4E3A\u4E86\u8DDF\u8F93\u5165\u6548\u679C\u4FDD\u6301\u4E00\u81F4\uFF0C\u8BBE\u7F6E\u900F\u660E\u8FB9\u6846\u5360\u4F4D */\n border: 1px solid transparent;\n}\n.lf-node-text-auto-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n /* border: 1px solid transparent; */\n}\n.lf-node-text-auto-wrap-content {\n width: 100%;\n line-height: 1.2;\n text-align: center;\n word-break: break-all;\n background: transparent;\n}\n.lf-node-text-ellipsis-content {\n width: 100%;\n line-height: 1.2;\n white-space: nowrap;\n text-align: center;\n background: transparent;\n /* overflow: hidden;\n text-overflow: ellipsis; */\n}\n.lf-node-text-ellipsis-content > div {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n/* tool-overlay */\n.lf-tool-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n overflow: hidden;\n pointer-events: none;\n}\n.lf-tool-overlay > * {\n pointer-events: all;\n}\n/* modification-overlay */\n.modification-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n overflow: hidden;\n pointer-events: none;\n}\n.modification-overlay > * {\n pointer-events: all;\n}\n.lf-outline,\n.lf-snapline {\n pointer-events: none;\n}\n.lf-keyboard-tips {\n float: right;\n}\n.lf-node-select-decorate {\n position: absolute;\n border: 1px dashed #343435;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n.lf-multiple-select {\n position: absolute;\n border: 2px dashed #187dffcc;\n box-shadow: 0 0 3px 0 #187dff80;\n cursor: move;\n}\n.lf-edge-adjust-point {\n cursor: move;\n}\n.lf-rotate-control {\n cursor: grabbing;\n}\n.lf-resize-control-nw {\n cursor: nw-resize;\n}\n.lf-resize-control-n {\n cursor: n-resize;\n}\n.lf-resize-control-ne {\n cursor: ne-resize;\n}\n.lf-resize-control-e {\n cursor: e-resize;\n}\n.lf-resize-control-se {\n cursor: se-resize;\n}\n.lf-resize-control-s {\n cursor: s-resize;\n}\n.lf-resize-control-sw {\n cursor: sw-resize;\n}\n.lf-resize-control-w {\n cursor: w-resize;\n}\n";
@@ -133,6 +133,8 @@ export declare abstract class BaseEdge<P extends IProps> extends Component<P, IE
133
133
  * 不支持重写
134
134
  */
135
135
  handleClick: (e: MouseEvent) => void;
136
+ handleFocus: () => void;
137
+ handleBlur: () => void;
136
138
  /**
137
139
  * @overridable 支持重写, 此方法为获取边的形状,如果需要自定义边的形状,请重写此方法。
138
140
  * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
@@ -194,6 +194,18 @@ var BaseEdge = /** @class */ (function (_super) {
194
194
  graphModel.selectEdgeById(model.id, isMultipleSelect(e, editConfigModel));
195
195
  _this.toFront();
196
196
  };
197
+ _this.handleFocus = function () {
198
+ var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
199
+ graphModel.eventCenter.emit(EventType.EDGE_FOCUS, {
200
+ data: model.getData(),
201
+ });
202
+ };
203
+ _this.handleBlur = function () {
204
+ var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
205
+ graphModel.eventCenter.emit(EventType.EDGE_BLUR, {
206
+ data: model.getData(),
207
+ });
208
+ };
197
209
  return _this;
198
210
  }
199
211
  /**
@@ -382,7 +394,7 @@ var BaseEdge = /** @class */ (function (_super) {
382
394
  isSelected && 'lf-edge-selected',
383
395
  ]
384
396
  .filter(Boolean)
385
- .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
397
+ .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, onFocus: this.handleFocus, onBlur: this.handleBlur, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
386
398
  };
387
399
  BaseEdge.isObserved = false;
388
400
  return BaseEdge;
@@ -38,6 +38,8 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
38
38
  handleClick: (e: MouseEvent) => void;
39
39
  handleContextMenu: (ev: MouseEvent) => void;
40
40
  handleMouseDown: (ev: MouseEvent) => void;
41
+ handleFocus: () => void;
42
+ handleBlur: () => void;
41
43
  setHoverOn: (ev: MouseEvent) => void;
42
44
  setHoverOff: (ev: MouseEvent) => void;
43
45
  /**
@@ -258,6 +258,18 @@ var BaseNode = /** @class */ (function (_super) {
258
258
  _this.stepDrag && _this.stepDrag.handleMouseDown(ev);
259
259
  }
260
260
  };
261
+ _this.handleFocus = function () {
262
+ var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
263
+ graphModel.eventCenter.emit(EventType.NODE_FOCUS, {
264
+ data: model.getData(),
265
+ });
266
+ };
267
+ _this.handleBlur = function () {
268
+ var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
269
+ graphModel.eventCenter.emit(EventType.NODE_BLUR, {
270
+ data: model.getData(),
271
+ });
272
+ };
261
273
  // 因为自定义节点的时候,可能会基于hover状态自定义不同的样式。
262
274
  _this.setHoverOn = function (ev) {
263
275
  var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
@@ -417,7 +429,7 @@ var BaseNode = /** @class */ (function (_super) {
417
429
  if (adjustNodePosition && draggable) {
418
430
  this.stepDrag.setStep(gridSize * SCALE_X);
419
431
  }
420
- nodeShape = (_jsx("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu }, restAttributes, { children: nodeShapeInner })));
432
+ nodeShape = (_jsx("g", __assign({ className: "".concat(this.getStateClassName(), " ").concat(className), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, onMouseOut: this.onMouseOut, onContextMenu: this.handleContextMenu, onFocus: this.handleFocus, onBlur: this.handleBlur }, restAttributes, { children: nodeShapeInner })));
421
433
  }
422
434
  return nodeShape;
423
435
  };
@@ -21,6 +21,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
21
21
  };
22
22
  import { jsx as _jsx } from "preact/jsx-runtime";
23
23
  import { Component } from 'preact/compat';
24
+ import { isObject } from 'lodash-es';
24
25
  import { observer } from '../..';
25
26
  var BackgroundOverlay = /** @class */ (function (_super) {
26
27
  __extends(BackgroundOverlay, _super);
@@ -29,7 +30,7 @@ var BackgroundOverlay = /** @class */ (function (_super) {
29
30
  }
30
31
  BackgroundOverlay.prototype.render = function () {
31
32
  var background = this.props.background;
32
- return (_jsx("div", { className: "lf-background", children: _jsx("div", { style: typeof background === 'object' ? background : {}, className: "lf-background-area" }) }));
33
+ return (_jsx("div", { className: "lf-background", children: _jsx("div", { style: isObject(background) ? background : {}, className: "lf-background-area" }) }));
33
34
  };
34
35
  BackgroundOverlay = __decorate([
35
36
  observer
@@ -25,7 +25,7 @@ export declare function getTransform<P>(WrappedComponent: ComponentType<P>): {
25
25
  props: import("preact").RenderableProps<IProps & P, any>;
26
26
  context: any;
27
27
  base?: Element | Text | undefined;
28
- setState<K extends never>(state: Partial<{}> | ((prevState: Readonly<{}>, props: Readonly<IProps & P>) => Partial<{}> | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
28
+ setState<K extends never>(state: ((prevState: Readonly<{}>, props: Readonly<IProps & P>) => Pick<{}, K> | Partial<{}> | null) | Pick<{}, K> | Partial<{}> | null, callback?: (() => void) | undefined): void;
29
29
  forceUpdate(callback?: (() => void) | undefined): void;
30
30
  };
31
31
  displayName?: string | undefined;
@@ -52,10 +52,8 @@ var isInSegment = function (point, start, end) {
52
52
  var endX = end.x, endY = end.y;
53
53
  var k = (endY - startY) / (endX - startX);
54
54
  var b = startY - k * startX;
55
- return (x >= startX &&
56
- x <= endX &&
57
- y >= startY &&
58
- y <= endY &&
59
- Math.abs(y - k * x + b) < Number.EPSILON);
55
+ return (((x >= startX && x <= endX) || (x <= startX && x >= endX)) &&
56
+ ((y >= startY && y <= endY) || (y <= startY && y >= endY)) &&
57
+ Math.abs(y - k * x - b) < Number.EPSILON);
60
58
  };
61
59
  exports.isInSegment = isInSegment;
@@ -49,12 +49,16 @@ export declare enum EventType {
49
49
  NODE_CONTEXTMENU = "node:contextmenu",
50
50
  NODE_ROTATE = "node:rotate",
51
51
  NODE_RESIZE = "node:resize",
52
+ NODE_FOCUS = "node:focus",
53
+ NODE_BLUR = "node:blur",
52
54
  NODE_PROPERTIES_CHANGE = "node:properties-change",
53
55
  NODE_PROPERTIES_DELETE = "node:properties-delete",
54
56
  EDGE_ADD = "edge:add",
55
57
  EDGE_DELETE = "edge:delete",
56
58
  EDGE_CLICK = "edge:click",
57
59
  EDGE_DBCLICK = "edge:dbclick",
60
+ EDGE_FOCUS = "edge:focus",
61
+ EDGE_BLUR = "edge:blur",
58
62
  EDGE_MOUSEENTER = "edge:mouseenter",
59
63
  EDGE_MOUSELEAVE = "edge:mouseleave",
60
64
  EDGE_CONTEXTMENU = "edge:contextmenu",