@logicflow/core 2.0.0-beta.2 → 2.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build$colon$dev.log +2 -2
- package/.turbo/turbo-build.log +7 -7
- package/dist/index.min.js +9 -3
- package/es/LogicFlow.d.ts +8 -3
- package/es/LogicFlow.js +5 -4
- package/es/LogicFlow.js.map +1 -1
- package/es/common/drag.d.ts +51 -0
- package/es/common/drag.js +145 -0
- package/es/common/drag.js.map +1 -0
- package/es/common/history.d.ts +28 -0
- package/es/common/history.js +92 -0
- package/es/common/history.js.map +1 -0
- package/es/common/index.d.ts +5 -0
- package/es/common/index.js +6 -0
- package/es/common/index.js.map +1 -0
- package/es/common/keyboard.d.ts +34 -0
- package/es/common/keyboard.js +80 -0
- package/es/common/keyboard.js.map +1 -0
- package/es/common/matrix.d.ts +30 -0
- package/es/common/matrix.js +155 -0
- package/es/common/matrix.js.map +1 -0
- package/es/common/vector.d.ts +23 -0
- package/es/common/vector.js +97 -0
- package/es/common/vector.js.map +1 -0
- package/es/event/eventEmitter.js +1 -1
- package/es/event/eventEmitter.js.map +1 -1
- package/es/index.d.ts +1 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/es/model/SnaplineModel.d.ts +2 -0
- package/es/model/edge/BaseEdgeModel.d.ts +5 -9
- package/es/model/edge/BaseEdgeModel.js +26 -23
- package/es/model/edge/BaseEdgeModel.js.map +1 -1
- package/es/model/edge/BezierEdgeModel.d.ts +2 -0
- package/es/model/edge/LineEdgeModel.d.ts +2 -0
- package/es/model/edge/PolylineEdgeModel.d.ts +2 -0
- package/es/model/node/BaseNodeModel.js +22 -21
- package/es/model/node/BaseNodeModel.js.map +1 -1
- package/es/model/node/CircleNodeModel.d.ts +2 -0
- package/es/model/node/CircleNodeModel.js +2 -2
- package/es/model/node/CircleNodeModel.js.map +1 -1
- package/es/model/node/DiamondNodeModel.d.ts +2 -0
- package/es/model/node/DiamondNodeModel.js +2 -1
- package/es/model/node/DiamondNodeModel.js.map +1 -1
- package/es/model/node/EllipseNodeModel.d.ts +2 -0
- package/es/model/node/EllipseNodeModel.js +2 -1
- package/es/model/node/EllipseNodeModel.js.map +1 -1
- package/es/model/node/HtmlNodeModel.d.ts +2 -2
- package/es/model/node/HtmlNodeModel.js.map +1 -1
- package/es/model/node/PolygonNodeModel.d.ts +2 -0
- package/es/model/node/PolygonNodeModel.js +2 -2
- package/es/model/node/PolygonNodeModel.js.map +1 -1
- package/es/model/node/RectNodeModel.d.ts +3 -0
- package/es/model/node/RectNodeModel.js +8 -2
- package/es/model/node/RectNodeModel.js.map +1 -1
- package/es/model/node/TextNodeModel.d.ts +4 -2
- package/es/options.js +2 -11
- package/es/options.js.map +1 -1
- package/es/tool/tool.js.map +1 -1
- package/es/util/edge.d.ts +6 -0
- package/es/util/edge.js +15 -1
- package/es/util/edge.js.map +1 -1
- package/es/util/node.d.ts +6 -2
- package/es/util/node.js +22 -7
- package/es/util/node.js.map +1 -1
- package/es/view/Anchor.d.ts +1 -1
- package/es/view/Anchor.js +3 -3
- package/es/view/Anchor.js.map +1 -1
- package/es/view/Control.js +14 -2
- package/es/view/Control.js.map +1 -1
- package/es/view/Graph.d.ts +3 -0
- package/es/view/Graph.js +38 -3
- package/es/view/Graph.js.map +1 -1
- package/es/view/edge/AdjustPoint.js +3 -3
- package/es/view/edge/AdjustPoint.js.map +1 -1
- package/es/view/edge/BaseEdge.d.ts +2 -2
- package/es/view/edge/BaseEdge.js +5 -5
- package/es/view/node/BaseNode.d.ts +2 -2
- package/es/view/node/BaseNode.js +5 -5
- package/es/view/node/TextNode.js +1 -1
- package/es/view/node/TextNode.js.map +1 -1
- package/es/view/shape/Circle.d.ts +9 -1
- package/es/view/shape/Circle.js +5 -5
- package/es/view/shape/Circle.js.map +1 -1
- package/es/view/shape/Ellipse.d.ts +10 -1
- package/es/view/shape/Ellipse.js +5 -5
- package/es/view/shape/Ellipse.js.map +1 -1
- package/es/view/shape/Line.d.ts +14 -1
- package/es/view/shape/Line.js +5 -7
- package/es/view/shape/Line.js.map +1 -1
- package/es/view/shape/Path.d.ts +3 -2
- package/es/view/shape/Path.js +3 -3
- package/es/view/shape/Path.js.map +1 -1
- package/es/view/shape/Polygon.d.ts +5 -3
- package/es/view/shape/Polygon.js +6 -6
- package/es/view/shape/Polygon.js.map +1 -1
- package/es/view/shape/Polyline.d.ts +7 -1
- package/es/view/shape/Polyline.js +8 -6
- package/es/view/shape/Polyline.js.map +1 -1
- package/es/view/shape/Rect.d.ts +11 -13
- package/es/view/shape/Rect.js +6 -9
- package/es/view/shape/Rect.js.map +1 -1
- package/es/view/shape/Text.d.ts +19 -1
- package/es/view/shape/Text.js +28 -21
- package/es/view/shape/Text.js.map +1 -1
- package/es/view/text/BaseText.d.ts +12 -15
- package/es/view/text/BaseText.js +37 -27
- package/es/view/text/BaseText.js.map +1 -1
- package/es/view/text/LineText.d.ts +19 -7
- package/es/view/text/LineText.js +62 -54
- package/es/view/text/LineText.js.map +1 -1
- package/lib/LogicFlow.d.ts +8 -3
- package/lib/LogicFlow.js +5 -4
- package/lib/LogicFlow.js.map +1 -1
- package/lib/common/drag.d.ts +51 -0
- package/lib/common/drag.js +148 -0
- package/lib/common/drag.js.map +1 -0
- package/lib/common/history.d.ts +28 -0
- package/lib/common/history.js +95 -0
- package/lib/common/history.js.map +1 -0
- package/lib/common/index.d.ts +5 -0
- package/lib/common/index.js +22 -0
- package/lib/common/index.js.map +1 -0
- package/lib/common/keyboard.d.ts +34 -0
- package/lib/common/keyboard.js +86 -0
- package/lib/common/keyboard.js.map +1 -0
- package/lib/common/matrix.d.ts +30 -0
- package/lib/common/matrix.js +158 -0
- package/lib/common/matrix.js.map +1 -0
- package/lib/common/vector.d.ts +23 -0
- package/lib/common/vector.js +101 -0
- package/lib/common/vector.js.map +1 -0
- package/lib/event/eventEmitter.js +1 -1
- package/lib/event/eventEmitter.js.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib/model/SnaplineModel.d.ts +2 -0
- package/lib/model/edge/BaseEdgeModel.d.ts +5 -9
- package/lib/model/edge/BaseEdgeModel.js +25 -22
- package/lib/model/edge/BaseEdgeModel.js.map +1 -1
- package/lib/model/edge/BezierEdgeModel.d.ts +2 -0
- package/lib/model/edge/LineEdgeModel.d.ts +2 -0
- package/lib/model/edge/PolylineEdgeModel.d.ts +2 -0
- package/lib/model/node/BaseNodeModel.js +21 -20
- package/lib/model/node/BaseNodeModel.js.map +1 -1
- package/lib/model/node/CircleNodeModel.d.ts +2 -0
- package/lib/model/node/CircleNodeModel.js +2 -2
- package/lib/model/node/CircleNodeModel.js.map +1 -1
- package/lib/model/node/DiamondNodeModel.d.ts +2 -0
- package/lib/model/node/DiamondNodeModel.js +2 -1
- package/lib/model/node/DiamondNodeModel.js.map +1 -1
- package/lib/model/node/EllipseNodeModel.d.ts +2 -0
- package/lib/model/node/EllipseNodeModel.js +2 -1
- package/lib/model/node/EllipseNodeModel.js.map +1 -1
- package/lib/model/node/HtmlNodeModel.d.ts +2 -2
- package/lib/model/node/HtmlNodeModel.js.map +1 -1
- package/lib/model/node/PolygonNodeModel.d.ts +2 -0
- package/lib/model/node/PolygonNodeModel.js +2 -2
- package/lib/model/node/PolygonNodeModel.js.map +1 -1
- package/lib/model/node/RectNodeModel.d.ts +3 -0
- package/lib/model/node/RectNodeModel.js +8 -2
- package/lib/model/node/RectNodeModel.js.map +1 -1
- package/lib/model/node/TextNodeModel.d.ts +4 -2
- package/lib/options.js +2 -11
- package/lib/options.js.map +1 -1
- package/lib/tool/tool.js.map +1 -1
- package/lib/util/edge.d.ts +6 -0
- package/lib/util/edge.js +16 -1
- package/lib/util/edge.js.map +1 -1
- package/lib/util/node.d.ts +6 -2
- package/lib/util/node.js +24 -9
- package/lib/util/node.js.map +1 -1
- package/lib/view/Anchor.d.ts +1 -1
- package/lib/view/Anchor.js +2 -2
- package/lib/view/Anchor.js.map +1 -1
- package/lib/view/Control.js +14 -2
- package/lib/view/Control.js.map +1 -1
- package/lib/view/Graph.d.ts +3 -0
- package/lib/view/Graph.js +37 -2
- package/lib/view/Graph.js.map +1 -1
- package/lib/view/edge/AdjustPoint.js +2 -2
- package/lib/view/edge/AdjustPoint.js.map +1 -1
- package/lib/view/edge/BaseEdge.d.ts +2 -2
- package/lib/view/edge/BaseEdge.js +5 -5
- package/lib/view/node/BaseNode.d.ts +2 -2
- package/lib/view/node/BaseNode.js +5 -5
- package/lib/view/node/TextNode.js +1 -1
- package/lib/view/node/TextNode.js.map +1 -1
- package/lib/view/shape/Circle.d.ts +9 -1
- package/lib/view/shape/Circle.js +5 -5
- package/lib/view/shape/Circle.js.map +1 -1
- package/lib/view/shape/Ellipse.d.ts +10 -1
- package/lib/view/shape/Ellipse.js +5 -5
- package/lib/view/shape/Ellipse.js.map +1 -1
- package/lib/view/shape/Line.d.ts +14 -1
- package/lib/view/shape/Line.js +5 -7
- package/lib/view/shape/Line.js.map +1 -1
- package/lib/view/shape/Path.d.ts +3 -2
- package/lib/view/shape/Path.js +3 -3
- package/lib/view/shape/Path.js.map +1 -1
- package/lib/view/shape/Polygon.d.ts +5 -3
- package/lib/view/shape/Polygon.js +6 -6
- package/lib/view/shape/Polygon.js.map +1 -1
- package/lib/view/shape/Polyline.d.ts +7 -1
- package/lib/view/shape/Polyline.js +8 -6
- package/lib/view/shape/Polyline.js.map +1 -1
- package/lib/view/shape/Rect.d.ts +11 -13
- package/lib/view/shape/Rect.js +6 -9
- package/lib/view/shape/Rect.js.map +1 -1
- package/lib/view/shape/Text.d.ts +19 -1
- package/lib/view/shape/Text.js +29 -21
- package/lib/view/shape/Text.js.map +1 -1
- package/lib/view/text/BaseText.d.ts +12 -15
- package/lib/view/text/BaseText.js +40 -27
- package/lib/view/text/BaseText.js.map +1 -1
- package/lib/view/text/LineText.d.ts +19 -7
- package/lib/view/text/LineText.js +62 -57
- package/lib/view/text/LineText.js.map +1 -1
- package/package.json +2 -1
- package/src/LogicFlow.tsx +19 -7
- package/src/common/drag.ts +205 -0
- package/src/common/history.ts +108 -0
- package/src/common/index.ts +6 -0
- package/src/common/keyboard.ts +108 -0
- package/src/common/matrix.ts +122 -0
- package/src/common/vector.ts +93 -0
- package/src/event/eventEmitter.ts +1 -1
- package/src/index.ts +1 -1
- package/src/model/edge/BaseEdgeModel.ts +31 -21
- package/src/model/node/BaseNodeModel.ts +27 -19
- package/src/model/node/CircleNodeModel.ts +2 -2
- package/src/model/node/DiamondNodeModel.ts +2 -0
- package/src/model/node/EllipseNodeModel.ts +2 -0
- package/src/model/node/HtmlNodeModel.ts +2 -2
- package/src/model/node/PolygonNodeModel.ts +2 -2
- package/src/model/node/RectNodeModel.ts +9 -2
- package/src/options.ts +2 -11
- package/src/tool/tool.ts +1 -1
- package/src/util/edge.ts +26 -1
- package/src/util/node.ts +29 -8
- package/src/view/Anchor.tsx +4 -4
- package/src/view/Control.tsx +5 -2
- package/src/view/Graph.tsx +14 -2
- package/src/view/edge/AdjustPoint.tsx +3 -3
- package/src/view/edge/BaseEdge.tsx +7 -7
- package/src/view/node/BaseNode.tsx +7 -7
- package/src/view/node/TextNode.tsx +1 -1
- package/src/view/shape/Circle.tsx +21 -7
- package/src/view/shape/Ellipse.tsx +20 -6
- package/src/view/shape/Line.tsx +24 -9
- package/src/view/shape/Path.tsx +9 -6
- package/src/view/shape/Polygon.tsx +13 -10
- package/src/view/shape/Polyline.tsx +20 -8
- package/src/view/shape/Rect.tsx +19 -19
- package/src/view/shape/Text.tsx +64 -33
- package/src/view/text/BaseText.tsx +67 -41
- package/src/view/text/LineText.tsx +94 -80
package/es/view/shape/Text.js
CHANGED
|
@@ -26,31 +26,37 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
26
26
|
return ar;
|
|
27
27
|
};
|
|
28
28
|
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
29
|
-
import { getHtmlTextHeight } from '../../util';
|
|
30
29
|
import { ElementType, ModelType } from '../../constant';
|
|
30
|
+
import { getHtmlTextHeight } from '../../util';
|
|
31
|
+
import { forEach, toPairs } from 'lodash-es';
|
|
31
32
|
export function Text(props) {
|
|
32
|
-
var _a = props.x, x = _a === void 0 ? 0 : _a, _b = props.y, y = _b === void 0 ? 0 : _b, value = props.value,
|
|
33
|
+
var _a = props.x, x = _a === void 0 ? 0 : _a, _b = props.y, y = _b === void 0 ? 0 : _b, value = props.value, _c = props.fontSize, fontSize = _c === void 0 ? 12 : _c, _d = props.fill, fill = _d === void 0 ? 'currentColor' : _d, _e = props.overflowMode, overflowMode = _e === void 0 ? 'default' : _e,
|
|
34
|
+
// TODO: 确认该 textWidth 为 '' 时跟设置什么值一致
|
|
35
|
+
_f = props.textWidth,
|
|
36
|
+
// TODO: 确认该 textWidth 为 '' 时跟设置什么值一致
|
|
37
|
+
textWidth = _f === void 0 ? undefined : _f, model = props.model;
|
|
33
38
|
var attrs = {
|
|
34
|
-
textAnchor: 'middle',
|
|
35
|
-
'dominant-baseline': 'middle',
|
|
36
39
|
x: x,
|
|
37
40
|
y: y,
|
|
38
41
|
fill: fill,
|
|
42
|
+
fontSize: fontSize,
|
|
43
|
+
textAnchor: 'middle',
|
|
44
|
+
dominantBaseline: 'central',
|
|
39
45
|
// ...props,
|
|
40
46
|
};
|
|
41
|
-
|
|
47
|
+
forEach(toPairs(props), function (_a) {
|
|
42
48
|
var _b = __read(_a, 2), k = _b[0], v = _b[1];
|
|
43
|
-
|
|
44
|
-
if (valueType !== 'object') {
|
|
49
|
+
if (typeof v !== 'object') {
|
|
45
50
|
attrs[k] = v;
|
|
46
51
|
}
|
|
47
52
|
});
|
|
48
53
|
if (value) {
|
|
49
|
-
// String(value)
|
|
54
|
+
// String(value),兼容纯数字的文案
|
|
55
|
+
// TODO: 将 value 转为纯文本,移除其中 \n \r 等特殊字符,看是否应该丰富该功能
|
|
50
56
|
var rows = String(value).split(/[\r\n]/g);
|
|
51
57
|
var rowsLength_1 = rows.length;
|
|
52
58
|
if (overflowMode !== 'default') {
|
|
53
|
-
//
|
|
59
|
+
// 非文本节点设置了自动换行,或者边设置了自动换行并且设置了 textWidth
|
|
54
60
|
var BaseType = model.BaseType, modelType = model.modelType;
|
|
55
61
|
if ((BaseType === ElementType.NODE && modelType !== ModelType.TEXT_NODE) ||
|
|
56
62
|
(BaseType === ElementType.EDGE && textWidth)) {
|
|
@@ -58,10 +64,10 @@ export function Text(props) {
|
|
|
58
64
|
}
|
|
59
65
|
}
|
|
60
66
|
if (rowsLength_1 > 1) {
|
|
61
|
-
var tSpans = rows.map(function (row,
|
|
62
|
-
// 保证文字居中,文字Y轴偏移为当前行数对应中心行数的偏移行 * 行高
|
|
63
|
-
var
|
|
64
|
-
var offsetY = (
|
|
67
|
+
var tSpans = rows.map(function (row, idx) {
|
|
68
|
+
// 保证文字居中,文字 Y 轴偏移为当前行数对应中心行数的偏移行 * 行高
|
|
69
|
+
var tSpanLineHeight = fontSize + 2;
|
|
70
|
+
var offsetY = (idx - (rowsLength_1 - 1) / 2) * tSpanLineHeight;
|
|
65
71
|
return (_jsx("tspan", { className: "lf-text-tspan", x: x, y: y + offsetY, children: row }));
|
|
66
72
|
});
|
|
67
73
|
return _jsx("text", __assign({}, attrs, { children: tSpans }));
|
|
@@ -70,10 +76,11 @@ export function Text(props) {
|
|
|
70
76
|
}
|
|
71
77
|
return null;
|
|
72
78
|
}
|
|
73
|
-
function renderHtmlText(props) {
|
|
74
|
-
var
|
|
75
|
-
var width = model.width, textHeight = model.textHeight;
|
|
76
|
-
|
|
79
|
+
export function renderHtmlText(props) {
|
|
80
|
+
var x = props.x, y = props.y, value = props.value, model = props.model, textWidth = props.textWidth, _a = props.fontSize, fontSize = _a === void 0 ? 12 : _a, lineHeight = props.lineHeight, _b = props.fontFamily, fontFamily = _b === void 0 ? '' : _b, _c = props.wrapPadding, wrapPadding = _c === void 0 ? '0, 0' : _c, overflowMode = props.overflowMode;
|
|
81
|
+
var width = model.width, height = model.height, textHeight = model.textHeight;
|
|
82
|
+
// TODO: 设置文本宽度为 textWidth 或 节点的宽度
|
|
83
|
+
var textRealWidth = textWidth || width;
|
|
77
84
|
var rows = String(value).split(/[\r\n]/g);
|
|
78
85
|
var rowsLength = rows.length;
|
|
79
86
|
var textRealHeight = getHtmlTextHeight({
|
|
@@ -89,8 +96,8 @@ function renderHtmlText(props) {
|
|
|
89
96
|
className: 'lf-get-text-height',
|
|
90
97
|
});
|
|
91
98
|
// 当文字超过边框时,取文字高度的实际值,也就是文字可以超过边框
|
|
92
|
-
var foreignObjectHeight =
|
|
93
|
-
//
|
|
99
|
+
var foreignObjectHeight = height > textRealHeight ? height : textRealHeight;
|
|
100
|
+
// 如果设置了文本高度,取设置的高度
|
|
94
101
|
if (textHeight) {
|
|
95
102
|
foreignObjectHeight = textHeight;
|
|
96
103
|
}
|
|
@@ -98,13 +105,13 @@ function renderHtmlText(props) {
|
|
|
98
105
|
if (isEllipsis) {
|
|
99
106
|
foreignObjectHeight = fontSize + 2;
|
|
100
107
|
}
|
|
101
|
-
return (_jsx("g", { children: _jsx("foreignObject", { width: textRealWidth, height: foreignObjectHeight, x: x - textRealWidth / 2, y: y - foreignObjectHeight / 2, children: _jsx("div", { className: "lf-node-text-auto-wrap", style: {
|
|
108
|
+
return (_jsx("g", { children: _jsx("foreignObject", { width: textRealWidth, height: foreignObjectHeight, x: x - textRealWidth / 2, y: y - foreignObjectHeight / 2, style: { overflow: 'visible', textAlign: 'left' }, children: _jsx("div", { className: "lf-node-text-auto-wrap", style: {
|
|
102
109
|
minHeight: foreignObjectHeight,
|
|
103
110
|
width: textRealWidth,
|
|
104
111
|
padding: wrapPadding,
|
|
105
112
|
}, children: _jsx("div", { className: isEllipsis
|
|
106
113
|
? 'lf-node-text-ellipsis-content'
|
|
107
|
-
: 'lf-node-text-auto-wrap-content', title: isEllipsis ? rows.join('') : '', style: __assign({}, props), children: rows.map(function (
|
|
114
|
+
: 'lf-node-text-auto-wrap-content', title: isEllipsis ? rows.join('') : '', style: __assign({}, props), children: rows.map(function (row) { return (_jsx("div", { className: "lf-node-text--auto-wrap-inner", children: row })); }) }) }) }) }));
|
|
108
115
|
}
|
|
109
116
|
export default Text;
|
|
110
117
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/view/shape/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/view/shape/Text.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,25 +1,22 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
type
|
|
5
|
-
model:
|
|
1
|
+
import { createElement as h, Component } from 'preact/compat';
|
|
2
|
+
import { GraphModel, BaseNodeModel, BaseEdgeModel } from '../../model';
|
|
3
|
+
import { IDragParams, StepDrag } from '../../util';
|
|
4
|
+
export type IBaseTextProps = {
|
|
5
|
+
model: BaseNodeModel | BaseEdgeModel;
|
|
6
6
|
graphModel: GraphModel;
|
|
7
7
|
draggable: boolean;
|
|
8
8
|
editable: boolean;
|
|
9
9
|
};
|
|
10
|
-
type
|
|
10
|
+
export type IBaseTextState = {
|
|
11
11
|
isHovered: boolean;
|
|
12
12
|
};
|
|
13
|
-
export declare class BaseText extends Component<
|
|
14
|
-
|
|
15
|
-
constructor(
|
|
13
|
+
export declare class BaseText<P extends IBaseTextProps, S extends IBaseTextState> extends Component<P, S> {
|
|
14
|
+
stepperDrag: StepDrag;
|
|
15
|
+
constructor(props: P);
|
|
16
16
|
getShape(): h.JSX.Element | null;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}) => void;
|
|
21
|
-
dblClickHandler: () => void;
|
|
22
|
-
mouseDownHandle: (ev: MouseEvent) => void;
|
|
17
|
+
mouseDownHandler: (e: MouseEvent) => void;
|
|
18
|
+
onDragging: ({ deltaX, deltaY }: IDragParams) => void;
|
|
19
|
+
dbClickHandler: () => void;
|
|
23
20
|
render(): h.JSX.Element | undefined;
|
|
24
21
|
}
|
|
25
22
|
export default BaseText;
|
package/es/view/text/BaseText.js
CHANGED
|
@@ -41,21 +41,32 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
41
41
|
return ar;
|
|
42
42
|
};
|
|
43
43
|
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
44
|
+
import classNames from 'classnames';
|
|
44
45
|
import { Component } from 'preact/compat';
|
|
46
|
+
import { ElementState } from '../../constant';
|
|
45
47
|
import { Text } from '../shape';
|
|
46
48
|
import { StepDrag } from '../../util';
|
|
47
|
-
import { ElementState } from '../../constant';
|
|
48
49
|
var BaseText = /** @class */ (function (_super) {
|
|
49
50
|
__extends(BaseText, _super);
|
|
50
|
-
function BaseText(
|
|
51
|
+
function BaseText(props) {
|
|
51
52
|
var _this = _super.call(this) || this;
|
|
53
|
+
_this.mouseDownHandler = function (e) {
|
|
54
|
+
var _a = _this.props, draggable = _a.draggable, model = _a.model, graphModel = _a.graphModel;
|
|
55
|
+
var nodeTextDraggable = graphModel.editConfigModel.nodeTextDraggable;
|
|
56
|
+
if (draggable || nodeTextDraggable) {
|
|
57
|
+
_this.stepperDrag.model = model;
|
|
58
|
+
_this.stepperDrag.handleMouseDown(e);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
52
61
|
_this.onDragging = function (_a) {
|
|
53
62
|
var deltaX = _a.deltaX, deltaY = _a.deltaY;
|
|
54
63
|
var _b = _this.props, model = _b.model, transformModel = _b.graphModel.transformModel;
|
|
55
|
-
|
|
56
|
-
|
|
64
|
+
if (deltaX && deltaY) {
|
|
65
|
+
var _c = __read(transformModel.fixDeltaXY(deltaX, deltaY), 2), curDeltaX = _c[0], curDeltaY = _c[1];
|
|
66
|
+
model.moveText(curDeltaX, curDeltaY);
|
|
67
|
+
}
|
|
57
68
|
};
|
|
58
|
-
_this.
|
|
69
|
+
_this.dbClickHandler = function () {
|
|
59
70
|
// 静默模式下,双击不更改状态,不可编辑
|
|
60
71
|
var editable = _this.props.editable;
|
|
61
72
|
if (editable) {
|
|
@@ -63,48 +74,47 @@ var BaseText = /** @class */ (function (_super) {
|
|
|
63
74
|
model.setElementState(ElementState.TEXT_EDIT);
|
|
64
75
|
}
|
|
65
76
|
};
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
_this.stepDrag.model = model;
|
|
70
|
-
_this.stepDrag.handleMouseDown(ev);
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
var draggable = config.draggable;
|
|
74
|
-
_this.stepDrag = new StepDrag({
|
|
77
|
+
var draggable = props.draggable;
|
|
78
|
+
// TODO: 确认为什么不在 new 的时候传入 model,而在下面使用的时候赋值
|
|
79
|
+
_this.stepperDrag = new StepDrag({
|
|
75
80
|
onDragging: _this.onDragging,
|
|
76
81
|
step: 1,
|
|
82
|
+
// model,
|
|
77
83
|
isStopPropagation: draggable,
|
|
78
84
|
});
|
|
79
85
|
return _this;
|
|
80
86
|
}
|
|
81
87
|
BaseText.prototype.getShape = function () {
|
|
82
88
|
var _a = this.props, model = _a.model, graphModel = _a.graphModel;
|
|
83
|
-
var text = model.text;
|
|
84
89
|
var editConfigModel = graphModel.editConfigModel;
|
|
85
|
-
var value =
|
|
90
|
+
var _b = model.text, value = _b.value, x = _b.x, y = _b.y, editable = _b.editable, draggable = _b.draggable;
|
|
86
91
|
var attr = {
|
|
87
92
|
x: x,
|
|
88
93
|
y: y,
|
|
89
94
|
className: '',
|
|
90
95
|
value: value,
|
|
91
96
|
};
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
else {
|
|
99
|
-
|
|
100
|
-
}
|
|
97
|
+
// DONE: 代码优化,看是否可以引入 classnames
|
|
98
|
+
// TODO: 确认下面逻辑是否正确,确认正确后删除下面注释
|
|
99
|
+
// if (editable) {
|
|
100
|
+
// attr.className = 'lf-element-text';
|
|
101
|
+
// } else if (draggable || editConfigModel.nodeTextDraggable) {
|
|
102
|
+
// attr.className = 'lf-text-draggable';
|
|
103
|
+
// } else {
|
|
104
|
+
// attr.className = 'lf-text-disabled';
|
|
105
|
+
// }
|
|
101
106
|
var style = model.getTextStyle();
|
|
102
|
-
|
|
107
|
+
var isDraggable = editConfigModel.nodeTextDraggable || draggable;
|
|
108
|
+
return (_jsx(Text, __assign({}, attr, style, { className: classNames({
|
|
109
|
+
'lf-element-text': editable,
|
|
110
|
+
'lf-text-draggable': !editable && isDraggable,
|
|
111
|
+
'lf-text-disabled': !editable && !isDraggable,
|
|
112
|
+
}), model: model })));
|
|
103
113
|
};
|
|
104
114
|
BaseText.prototype.render = function () {
|
|
105
115
|
var text = this.props.model.text;
|
|
106
116
|
if (text) {
|
|
107
|
-
return (_jsx("g", { onMouseDown: this.
|
|
117
|
+
return (_jsx("g", { onMouseDown: this.mouseDownHandler, onDblClick: this.dbClickHandler, children: this.getShape() }));
|
|
108
118
|
}
|
|
109
119
|
};
|
|
110
120
|
return BaseText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseText.js","sourceRoot":"","sources":["../../../src/view/text/BaseText.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"BaseText.js","sourceRoot":"","sources":["../../../src/view/text/BaseText.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { createElement as h } from 'preact/compat';
|
|
2
|
+
import { BaseText } from '.';
|
|
3
|
+
import { BaseEdgeModel, GraphModel } from '../../model';
|
|
4
|
+
export type ILineTextProps = {
|
|
5
|
+
model: BaseEdgeModel;
|
|
6
|
+
graphModel: GraphModel;
|
|
7
|
+
draggable: boolean;
|
|
8
|
+
editable: boolean;
|
|
9
|
+
[key: string]: unknown;
|
|
10
|
+
};
|
|
11
|
+
export type ILineTextState = {
|
|
12
|
+
isHovered: boolean;
|
|
13
|
+
};
|
|
14
|
+
export declare class LineText extends BaseText<ILineTextProps, ILineTextState> {
|
|
15
|
+
constructor(props: ILineTextProps);
|
|
16
|
+
setHoverOn: () => void;
|
|
17
|
+
setHoverOff: () => void;
|
|
18
|
+
getBackground(): h.JSX.Element | null;
|
|
19
|
+
getShape(): h.JSX.Element | null;
|
|
8
20
|
}
|
|
9
21
|
export default LineText;
|
package/es/view/text/LineText.js
CHANGED
|
@@ -24,21 +24,37 @@ var __assign = (this && this.__assign) || function () {
|
|
|
24
24
|
};
|
|
25
25
|
return __assign.apply(this, arguments);
|
|
26
26
|
};
|
|
27
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
28
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
29
|
+
if (!m) return o;
|
|
30
|
+
var i = m.call(o), r, ar = [], e;
|
|
31
|
+
try {
|
|
32
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
33
|
+
}
|
|
34
|
+
catch (error) { e = { error: error }; }
|
|
35
|
+
finally {
|
|
36
|
+
try {
|
|
37
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
38
|
+
}
|
|
39
|
+
finally { if (e) throw e.error; }
|
|
40
|
+
}
|
|
41
|
+
return ar;
|
|
42
|
+
};
|
|
27
43
|
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
|
|
28
|
-
import Text from '
|
|
29
|
-
import
|
|
30
|
-
import
|
|
31
|
-
import { getBytesLength, getHtmlTextHeight, getSvgTextWidthHeight, } from '../../util';
|
|
44
|
+
import { Text, Rect } from '..';
|
|
45
|
+
import { BaseText } from '.';
|
|
46
|
+
import { getHtmlTextHeight, getSvgTextSize } from '../../util';
|
|
32
47
|
var LineText = /** @class */ (function (_super) {
|
|
33
48
|
__extends(LineText, _super);
|
|
34
|
-
function LineText(
|
|
35
|
-
var _this = _super.call(this,
|
|
36
|
-
|
|
49
|
+
function LineText(props) {
|
|
50
|
+
var _this = _super.call(this, props) || this;
|
|
51
|
+
// Hover 状态相关
|
|
52
|
+
_this.setHoverOn = function () {
|
|
37
53
|
_this.setState({
|
|
38
54
|
isHovered: true,
|
|
39
55
|
});
|
|
40
56
|
};
|
|
41
|
-
_this.
|
|
57
|
+
_this.setHoverOff = function () {
|
|
42
58
|
_this.setState({
|
|
43
59
|
isHovered: false,
|
|
44
60
|
});
|
|
@@ -49,23 +65,22 @@ var LineText = /** @class */ (function (_super) {
|
|
|
49
65
|
return _this;
|
|
50
66
|
}
|
|
51
67
|
LineText.prototype.getBackground = function () {
|
|
68
|
+
var isHovered = this.state.isHovered;
|
|
52
69
|
var model = this.props.model;
|
|
70
|
+
var text = model.text;
|
|
53
71
|
var style = model.getTextStyle();
|
|
54
|
-
var text = model.text, modelWidth = model.width;
|
|
55
72
|
var backgroundStyle = style.background || {};
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
backgroundStyle = __assign(__assign({}, backgroundStyle), style === null || style === void 0 ? void 0 : style.hover.background);
|
|
73
|
+
if (isHovered && style.hover && style.hover.background) {
|
|
74
|
+
backgroundStyle = __assign(__assign({}, backgroundStyle), style.hover.background);
|
|
59
75
|
}
|
|
60
|
-
//
|
|
61
|
-
if (text
|
|
62
|
-
var
|
|
63
|
-
var
|
|
64
|
-
var
|
|
65
|
-
var rows = String(value).split(/[\r\n]/g);
|
|
66
|
-
// 计算行数
|
|
76
|
+
// 当存在文本并且文本背景不为透明时,计算背景框
|
|
77
|
+
if ((text === null || text === void 0 ? void 0 : text.value) && (backgroundStyle === null || backgroundStyle === void 0 ? void 0 : backgroundStyle.fill) !== 'transparent') {
|
|
78
|
+
var fontSize = style.fontSize, textWidth = style.textWidth, lineHeight = style.lineHeight, overflowMode = style.overflowMode;
|
|
79
|
+
var wrapPadding = backgroundStyle.wrapPadding;
|
|
80
|
+
var rows = text === null || text === void 0 ? void 0 : text.value.split(/[\r\n]/g);
|
|
67
81
|
var rowsLength = rows.length;
|
|
68
|
-
var
|
|
82
|
+
var x = text.x, y = text.y;
|
|
83
|
+
var rectAttr = {};
|
|
69
84
|
if (overflowMode === 'autoWrap' && textWidth) {
|
|
70
85
|
var textHeight = getHtmlTextHeight({
|
|
71
86
|
rows: rows,
|
|
@@ -78,69 +93,62 @@ var LineText = /** @class */ (function (_super) {
|
|
|
78
93
|
rowsLength: rowsLength,
|
|
79
94
|
className: 'lf-get-text-height',
|
|
80
95
|
});
|
|
81
|
-
rectAttr = __assign(__assign({}, backgroundStyle), { x: x
|
|
96
|
+
rectAttr = __assign(__assign({}, backgroundStyle), { x: x, y: y, width: textWidth, height: textHeight });
|
|
82
97
|
}
|
|
83
98
|
else {
|
|
84
|
-
//
|
|
85
|
-
|
|
86
|
-
rows
|
|
87
|
-
rows.forEach(function (item) {
|
|
88
|
-
var rowByteLength = getBytesLength(item);
|
|
89
|
-
longestBytes_1 =
|
|
90
|
-
rowByteLength > longestBytes_1 ? rowByteLength : longestBytes_1;
|
|
91
|
-
});
|
|
92
|
-
// 背景框宽度,最长一行字节数/2 * fontsize + 2
|
|
93
|
-
// 背景框宽度, 行数 * fontsize + 2
|
|
94
|
-
var _b = getSvgTextWidthHeight({
|
|
95
|
-
rows: rows,
|
|
96
|
-
fontSize: fontSize,
|
|
97
|
-
rowsLength: rowsLength,
|
|
98
|
-
}), width = _b.width, height = _b.height;
|
|
99
|
+
// 背景框宽度,最长一行字节数 / 2 * fontSize + 2
|
|
100
|
+
// 背景框宽度,行数 * fontSize + 2
|
|
101
|
+
var _a = getSvgTextSize({ rows: rows, rowsLength: rowsLength, fontSize: fontSize }), width = _a.width, height = _a.height;
|
|
99
102
|
if (overflowMode === 'ellipsis') {
|
|
100
103
|
// https://github.com/didi/LogicFlow/issues/1151
|
|
101
104
|
// 边上的文字过长(使用"ellipsis"模式)出现省略号,背景也需要进行宽度的重新计算
|
|
102
105
|
// 跟Text.tsx保持同样的计算逻辑(overflowMode === 'ellipsis')
|
|
103
106
|
// Text.tsx使用textRealWidth=textWidth || width
|
|
104
107
|
// Text.tsx使用foreignObjectHeight = fontSize + 2;
|
|
105
|
-
width = textWidth
|
|
108
|
+
width = textWidth;
|
|
106
109
|
height = fontSize + 2;
|
|
107
110
|
}
|
|
108
|
-
// 根据设置的padding调整width, height, x, y的值
|
|
111
|
+
// 根据设置的 padding 调整 width, height, x, y 的值
|
|
112
|
+
// TODO: 下面方法感觉可以提取成工具方法
|
|
109
113
|
if (typeof backgroundStyle.wrapPadding === 'string') {
|
|
110
|
-
var
|
|
114
|
+
var padding = backgroundStyle.wrapPadding
|
|
111
115
|
.split(',')
|
|
112
116
|
.filter(function (padding) { return padding.trim(); })
|
|
113
117
|
.map(function (padding) { return parseFloat(padding.trim()); });
|
|
114
|
-
if (
|
|
115
|
-
if (
|
|
116
|
-
|
|
118
|
+
if (padding.length > 0 && padding.length <= 4) {
|
|
119
|
+
if (padding.length === 1) {
|
|
120
|
+
var _b = __read(padding, 1), allSides = _b[0];
|
|
121
|
+
padding = [allSides, allSides, allSides, allSides];
|
|
117
122
|
}
|
|
118
|
-
else if (
|
|
119
|
-
|
|
123
|
+
else if (padding.length === 2) {
|
|
124
|
+
var _c = __read(padding, 2), vertical = _c[0], horizontal = _c[1];
|
|
125
|
+
padding = [vertical, horizontal, vertical, horizontal];
|
|
120
126
|
}
|
|
121
|
-
else if (
|
|
122
|
-
|
|
127
|
+
else if (padding.length === 3) {
|
|
128
|
+
var _d = __read(padding, 3), top_1 = _d[0], horizontal = _d[1], bottom_1 = _d[2];
|
|
129
|
+
padding = [top_1, horizontal, bottom_1, horizontal];
|
|
123
130
|
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
131
|
+
var _e = __read(padding, 4), top_2 = _e[0], right = _e[1], bottom = _e[2], left = _e[3];
|
|
132
|
+
width += right + left;
|
|
133
|
+
height += top_2 + bottom;
|
|
134
|
+
x = x + (right - left) / 2;
|
|
135
|
+
y = y + (bottom - top_2) / 2;
|
|
128
136
|
}
|
|
129
137
|
}
|
|
130
138
|
rectAttr = __assign(__assign({}, backgroundStyle), { x: x - 1, y: y - 1, width: width, height: height });
|
|
131
139
|
}
|
|
132
140
|
return _jsx(Rect, __assign({}, rectAttr));
|
|
133
141
|
}
|
|
142
|
+
return null;
|
|
134
143
|
};
|
|
135
144
|
LineText.prototype.getShape = function () {
|
|
136
145
|
var model = this.props.model;
|
|
137
|
-
var
|
|
138
|
-
var value = text.value, x = text.x, y = text.y;
|
|
146
|
+
var _a = model.text, x = _a.x, y = _a.y, value = _a.value;
|
|
139
147
|
if (!value)
|
|
140
148
|
return null;
|
|
141
149
|
var style = model.getTextStyle();
|
|
142
|
-
var
|
|
143
|
-
return (_jsxs("g", { className: "lf-line-text", onMouseEnter: this.
|
|
150
|
+
var attrs = __assign({ x: x, y: y, value: value, model: model, className: 'lf-element-text' }, style);
|
|
151
|
+
return (_jsxs("g", { className: "lf-line-text", onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, children: [this.getBackground(), _jsx(Text, __assign({}, attrs))] }));
|
|
144
152
|
};
|
|
145
153
|
return LineText;
|
|
146
154
|
}(BaseText));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineText.js","sourceRoot":"","sources":["../../../src/view/text/LineText.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LineText.js","sourceRoot":"","sources":["../../../src/view/text/LineText.tsx"],"names":[],"mappings":"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"}
|
package/lib/LogicFlow.d.ts
CHANGED
|
@@ -50,8 +50,8 @@ export declare class LogicFlow {
|
|
|
50
50
|
* 详情请参考 adapter docs
|
|
51
51
|
* 包括 adapterIn 和 adapterOut 两个方法
|
|
52
52
|
*/
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
adapterIn?: (data: unknown) => GraphData;
|
|
54
|
+
adapterOut?: (data: GraphData, ...rest: any) => unknown;
|
|
55
55
|
[propName: string]: any;
|
|
56
56
|
private initContainer;
|
|
57
57
|
protected get [Symbol.toStringTag](): string;
|
|
@@ -628,9 +628,11 @@ export declare namespace LogicFlow {
|
|
|
628
628
|
};
|
|
629
629
|
type TextConfig = {
|
|
630
630
|
value: string;
|
|
631
|
+
x: number;
|
|
632
|
+
y: number;
|
|
631
633
|
editable?: boolean;
|
|
632
634
|
draggable?: boolean;
|
|
633
|
-
}
|
|
635
|
+
};
|
|
634
636
|
type AppendConfig = {
|
|
635
637
|
startIndex: number;
|
|
636
638
|
endIndex: number;
|
|
@@ -740,6 +742,8 @@ export declare namespace LogicFlow {
|
|
|
740
742
|
radius?: number;
|
|
741
743
|
rx?: number;
|
|
742
744
|
ry?: number;
|
|
745
|
+
width?: number;
|
|
746
|
+
height?: number;
|
|
743
747
|
path?: string;
|
|
744
748
|
[key: string]: unknown;
|
|
745
749
|
};
|
|
@@ -804,6 +808,7 @@ export declare namespace LogicFlow {
|
|
|
804
808
|
* ellipsis: 超出省略
|
|
805
809
|
*/
|
|
806
810
|
overflowMode?: 'default' | 'autoWrap' | 'ellipsis';
|
|
811
|
+
textWidth?: number;
|
|
807
812
|
background?: RectTheme;
|
|
808
813
|
/**
|
|
809
814
|
* 背景区域 padding
|
package/lib/LogicFlow.js
CHANGED
|
@@ -100,8 +100,9 @@ var LogicFlow = /** @class */ (function () {
|
|
|
100
100
|
return _this.viewMap.get(type);
|
|
101
101
|
};
|
|
102
102
|
var initOptions = options_1.Options.get(options);
|
|
103
|
+
var container = initOptions.container, width = initOptions.width, height = initOptions.height;
|
|
103
104
|
this.options = initOptions;
|
|
104
|
-
this.container = this.initContainer(
|
|
105
|
+
this.container = this.initContainer(container, width, height);
|
|
105
106
|
this.graphModel = new model_1.GraphModel(__assign(__assign({}, initOptions), { container: this.container }));
|
|
106
107
|
this.plugins = (_a = initOptions.plugins) !== null && _a !== void 0 ? _a : [];
|
|
107
108
|
var eventCenter = this.graphModel.eventCenter;
|
|
@@ -126,13 +127,13 @@ var LogicFlow = /** @class */ (function () {
|
|
|
126
127
|
this.defaultRegister();
|
|
127
128
|
this.installPlugins(initOptions.disabledPlugins);
|
|
128
129
|
}
|
|
129
|
-
LogicFlow.prototype.initContainer = function (container) {
|
|
130
|
+
LogicFlow.prototype.initContainer = function (container, width, height) {
|
|
130
131
|
// TODO: 确认是否需要,后续是否只要返回 container 即可(下面方法是为了解决事件绑定问题的)
|
|
131
132
|
// fix: destroy keyboard events while destroy LogicFlow.(#1110)
|
|
132
133
|
var lfContainer = document.createElement('div');
|
|
133
134
|
lfContainer.style.position = 'relative';
|
|
134
|
-
lfContainer.style.width = '100%';
|
|
135
|
-
lfContainer.style.height = '100%';
|
|
135
|
+
lfContainer.style.width = width ? "".concat(width, "px") : '100%';
|
|
136
|
+
lfContainer.style.height = height ? "".concat(height, "px") : '100%';
|
|
136
137
|
container.innerHTML = '';
|
|
137
138
|
container.appendChild(lfContainer);
|
|
138
139
|
return lfContainer;
|