@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.
- package/.turbo/turbo-build$colon$dev.log +10 -10
- package/.turbo/turbo-build.log +17 -33
- package/CHANGELOG.md +12 -2
- package/__tests__/algorithm/egde.test.ts +4 -4
- package/dist/index.css +3 -0
- package/es/algorithm/edge.js +3 -5
- package/es/constant/index.d.ts +4 -0
- package/es/constant/index.js +4 -0
- package/es/event/eventArgs.d.ts +17 -1
- package/es/index.css +3 -0
- package/es/model/GraphModel.d.ts +3 -3
- package/es/model/GraphModel.js +33 -7
- package/es/model/edge/LineEdgeModel.d.ts +2 -0
- package/es/model/edge/LineEdgeModel.js +8 -0
- package/es/model/edge/PolylineEdgeModel.d.ts +1 -0
- package/es/model/edge/PolylineEdgeModel.js +4 -3
- package/es/model/node/BaseNodeModel.d.ts +2 -2
- package/es/model/node/HtmlNodeModel.d.ts +2 -2
- package/es/model/node/TextNodeModel.d.ts +2 -2
- package/es/style/index.css +3 -0
- package/es/style/index.less +5 -0
- package/es/style/raw.d.ts +1 -1
- package/es/style/raw.js +1 -1
- package/es/view/edge/BaseEdge.d.ts +2 -0
- package/es/view/edge/BaseEdge.js +13 -1
- package/es/view/node/BaseNode.d.ts +2 -0
- package/es/view/node/BaseNode.js +13 -1
- package/es/view/overlay/BackgroundOverlay.js +2 -1
- package/es/view/overlay/getTransformHoc.d.ts +1 -1
- package/lib/algorithm/edge.js +3 -5
- package/lib/constant/index.d.ts +4 -0
- package/lib/constant/index.js +4 -0
- package/lib/event/eventArgs.d.ts +17 -1
- package/lib/index.css +3 -0
- package/lib/model/GraphModel.d.ts +3 -3
- package/lib/model/GraphModel.js +32 -6
- package/lib/model/edge/LineEdgeModel.d.ts +2 -0
- package/lib/model/edge/LineEdgeModel.js +8 -0
- package/lib/model/edge/PolylineEdgeModel.d.ts +1 -0
- package/lib/model/edge/PolylineEdgeModel.js +4 -3
- package/lib/model/node/BaseNodeModel.d.ts +2 -2
- package/lib/model/node/HtmlNodeModel.d.ts +2 -2
- package/lib/model/node/TextNodeModel.d.ts +2 -2
- package/lib/style/index.css +3 -0
- package/lib/style/index.less +5 -0
- package/lib/style/raw.d.ts +1 -1
- package/lib/style/raw.js +1 -1
- package/lib/view/edge/BaseEdge.d.ts +2 -0
- package/lib/view/edge/BaseEdge.js +13 -1
- package/lib/view/node/BaseNode.d.ts +2 -0
- package/lib/view/node/BaseNode.js +13 -1
- package/lib/view/overlay/BackgroundOverlay.js +2 -1
- package/lib/view/overlay/getTransformHoc.d.ts +1 -1
- package/package.json +1 -1
- package/src/LogicFlow.tsx +6 -0
- package/src/algorithm/edge.ts +1 -1
- package/src/algorithm/outline.ts +1 -1
- package/src/constant/index.ts +4 -0
- package/src/event/eventArgs.ts +27 -1
- package/src/model/GraphModel.ts +111 -3
- package/src/model/edge/LineEdgeModel.ts +8 -0
- package/src/model/edge/PolylineEdgeModel.ts +5 -3
- package/src/style/index.less +5 -0
- package/src/style/raw.ts +3 -0
- package/src/view/Graph.tsx +3 -4
- package/src/view/edge/BaseEdge.tsx +16 -0
- package/src/view/node/BaseNode.tsx +17 -1
- package/src/view/overlay/BackgroundOverlay.tsx +11 -16
- package/src/view/overlay/OutlineOverlay.tsx +1 -1
- package/stats.html +1 -1
- package/dist/index.min.js +0 -2
- package/dist/index.min.js.map +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
> @logicflow/core@2.0.
|
|
3
|
-
> rss
|
|
4
|
-
|
|
5
|
-
>
|
|
6
|
-
|
|
7
|
-
> @logicflow/core@2.0.
|
|
8
|
-
> rss
|
|
9
|
-
|
|
10
|
-
>
|
|
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
|
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,33 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
> @logicflow/core@2.0.
|
|
3
|
-
> rss
|
|
4
|
-
|
|
5
|
-
>
|
|
6
|
-
>
|
|
7
|
-
|
|
8
|
-
> @logicflow/core@2.0.
|
|
9
|
-
> rss
|
|
10
|
-
|
|
11
|
-
>
|
|
12
|
-
>
|
|
13
|
-
>
|
|
14
|
-
>
|
|
15
|
-
>
|
|
16
|
-
[36m
|
|
17
|
-
[1m./src/index.ts[22m → [1mdist/index.min.js[22m...[39m
|
|
18
|
-
[2m+------------------------------------+[22m
|
|
19
|
-
[2m|[22m [2m|[22m
|
|
20
|
-
[2m|[22m [32m[1mBundle Format:[22m[39m [33mumd[39m [2m|[22m
|
|
21
|
-
[2m|[22m [32m[1mBundle Name:[22m[39m [33mCore[39m [2m|[22m
|
|
22
|
-
[2m|[22m [32m[1mDestination:[22m[39m [33mdist/index.min.js[39m [2m|[22m
|
|
23
|
-
[2m|[22m [32m[1mBundle Size:[22m[39m [33m378.63 KB[39m [2m|[22m
|
|
24
|
-
[2m|[22m [32m[1mMinified Size:[22m[39m [33m377.38 KB[39m [2m|[22m
|
|
25
|
-
[2m|[22m [32m[1mGZipped Size:[22m[39m [33m109.75 KB[39m [2m|[22m
|
|
26
|
-
[2m|[22m [2m|[22m
|
|
27
|
-
[2m+------------------------------------+[22m
|
|
28
|
-
[1m[33m(!) Circular dependencies[39m[22m
|
|
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
|
-
[32mcreated [1mdist/index.min.js[22m in [1m17.8s[22m[39m
|
|
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
|
+
[36m
|
|
17
|
+
[1m./src/index.ts[22m → [1mdist/index.min.js[22m...[39m
|
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
|
|
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],
|
|
109
|
-
expect(isInSegment(point, line1[1],
|
|
110
|
-
expect(isInSegment(point, line2[0],
|
|
111
|
-
expect(isInSegment(point, line2[1],
|
|
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
package/es/algorithm/edge.js
CHANGED
|
@@ -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
|
-
|
|
53
|
-
y
|
|
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
|
};
|
package/es/constant/index.d.ts
CHANGED
|
@@ -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",
|
package/es/constant/index.js
CHANGED
|
@@ -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";
|
package/es/event/eventArgs.d.ts
CHANGED
|
@@ -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
package/es/model/GraphModel.d.ts
CHANGED
|
@@ -70,15 +70,15 @@ export declare class GraphModel {
|
|
|
70
70
|
* 基于zIndex对元素进行排序。
|
|
71
71
|
* todo: 性能优化
|
|
72
72
|
*/
|
|
73
|
-
get sortElements(): (
|
|
73
|
+
get sortElements(): (BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>)[];
|
|
74
74
|
/**
|
|
75
75
|
* 当前编辑的元素,低频操作,先循环找。
|
|
76
76
|
*/
|
|
77
|
-
get textEditElement():
|
|
77
|
+
get textEditElement(): BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType> | undefined;
|
|
78
78
|
/**
|
|
79
79
|
* 当前画布所有被选中的元素
|
|
80
80
|
*/
|
|
81
|
-
get selectElements(): Map<string,
|
|
81
|
+
get selectElements(): Map<string, BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>>;
|
|
82
82
|
get selectNodes(): BaseNodeModel<LogicFlow.PropertiesType>[];
|
|
83
83
|
/**
|
|
84
84
|
* 获取指定区域内的所有元素
|
package/es/model/GraphModel.js
CHANGED
|
@@ -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
|
|
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, {
|
|
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 (
|
|
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,
|
|
@@ -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?: "
|
|
176
|
-
dominantBaseline?: "middle" | "
|
|
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
|
|
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?: "
|
|
28
|
-
dominantBaseline?: "middle" | "
|
|
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
|
};
|
package/es/style/index.css
CHANGED
package/es/style/index.less
CHANGED
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
|
package/es/view/edge/BaseEdge.js
CHANGED
|
@@ -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
|
/**
|
package/es/view/node/BaseNode.js
CHANGED
|
@@ -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:
|
|
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:
|
|
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;
|
package/lib/algorithm/edge.js
CHANGED
|
@@ -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
|
-
|
|
57
|
-
y
|
|
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;
|
package/lib/constant/index.d.ts
CHANGED
|
@@ -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",
|