@logicflow/extension 1.1.0-alpha.5 → 1.1.0-alpha.6
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/cjs/NodeResize/Control/Control.js +9 -9
- package/cjs/NodeResize/Control/ControlGroup.js +8 -4
- package/cjs/NodeResize/Node/DiamondResize.js +21 -1
- package/cjs/NodeResize/Node/EllipseResize.js +15 -0
- package/cjs/NodeResize/Node/HtmlResize.js +15 -0
- package/cjs/NodeResize/Node/RectResize.js +19 -0
- package/cjs/NodeResize/index.js +2 -36
- package/cjs/materials/group/GroupNode.js +7 -1
- package/es/NodeResize/Control/Control.js +9 -9
- package/es/NodeResize/Control/ControlGroup.js +8 -4
- package/es/NodeResize/Node/DiamondResize.d.ts +15 -0
- package/es/NodeResize/Node/DiamondResize.js +21 -1
- package/es/NodeResize/Node/EllipseResize.d.ts +11 -0
- package/es/NodeResize/Node/EllipseResize.js +15 -0
- package/es/NodeResize/Node/HtmlResize.d.ts +11 -0
- package/es/NodeResize/Node/HtmlResize.js +15 -0
- package/es/NodeResize/Node/RectResize.d.ts +13 -0
- package/es/NodeResize/Node/RectResize.js +19 -0
- package/es/NodeResize/index.d.ts +2 -28
- package/es/NodeResize/index.js +1 -36
- package/es/materials/group/GroupNode.d.ts +6 -0
- package/es/materials/group/GroupNode.js +7 -1
- package/lib/AutoLayout.js +1 -1
- package/lib/BpmnAdapter.js +1 -1
- package/lib/BpmnElement.js +1 -1
- package/lib/ContextMenu.js +1 -1
- package/lib/CurvedEdge.js +1 -1
- package/lib/FlowPath.js +1 -1
- package/lib/Group.js +1 -1
- package/lib/InsertNodeInPolyline.js +1 -1
- package/lib/Menu.js +1 -1
- package/lib/MiniMap.js +1 -1
- package/lib/NodeResize.js +1 -1
- package/lib/RectLabelNode.js +1 -1
- package/lib/Snapshot.js +1 -1
- package/lib/TurboAdapter.js +1 -1
- package/lib/lfJson2Xml.js +1 -1
- package/lib/lfXml2Json.js +1 -1
- package/package.json +2 -2
- package/types/NodeResize/Node/DiamondResize.d.ts +15 -0
- package/types/NodeResize/Node/EllipseResize.d.ts +11 -0
- package/types/NodeResize/Node/HtmlResize.d.ts +11 -0
- package/types/NodeResize/Node/RectResize.d.ts +13 -0
- package/types/NodeResize/index.d.ts +2 -28
- package/types/materials/group/GroupNode.d.ts +6 -0
|
@@ -28,7 +28,6 @@ var preact_1 = require("preact");
|
|
|
28
28
|
var core_1 = require("@logicflow/core");
|
|
29
29
|
var Rect_1 = require("../BasicShape/Rect");
|
|
30
30
|
var Util_1 = require("./Util");
|
|
31
|
-
var index_1 = require("../index");
|
|
32
31
|
var createDrag = core_1.LogicFlowUtil.createDrag;
|
|
33
32
|
var Control = /** @class */ (function (_super) {
|
|
34
33
|
__extends(Control, _super);
|
|
@@ -213,11 +212,11 @@ var Control = /** @class */ (function (_super) {
|
|
|
213
212
|
pct: 1 / 2,
|
|
214
213
|
});
|
|
215
214
|
// 限制放大缩小的最大最小范围
|
|
216
|
-
var _c =
|
|
217
|
-
if (size.width <
|
|
218
|
-
|| size.width >
|
|
219
|
-
|| size.height <
|
|
220
|
-
|| size.height >
|
|
215
|
+
var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
|
|
216
|
+
if (size.width < (minWidth / 2)
|
|
217
|
+
|| size.width > (maxWidth / 2)
|
|
218
|
+
|| size.height < (minHeight / 2)
|
|
219
|
+
|| size.height > (maxHeight / 2)) {
|
|
221
220
|
return;
|
|
222
221
|
}
|
|
223
222
|
// 更新中心点位置,更新文案位置
|
|
@@ -273,6 +272,7 @@ var Control = /** @class */ (function (_super) {
|
|
|
273
272
|
// html和矩形的计算方式是一样的,共用一个方法
|
|
274
273
|
if (modelType === Util_1.ModelType.RECT_NODE || modelType === Util_1.ModelType.HTML_NODE) {
|
|
275
274
|
_this.updateRect({ deltaX: deltaX, deltaY: deltaY });
|
|
275
|
+
// this.nodeModel.resize(deltaX, deltaY);
|
|
276
276
|
}
|
|
277
277
|
else if (modelType === Util_1.ModelType.ELLIPSE_NODE) {
|
|
278
278
|
_this.updateEllipse({ deltaX: deltaX, deltaY: deltaY });
|
|
@@ -315,10 +315,10 @@ var Control = /** @class */ (function (_super) {
|
|
|
315
315
|
return { sourceEdges: sourceEdges, targetEdges: targetEdges };
|
|
316
316
|
};
|
|
317
317
|
Control.prototype.render = function () {
|
|
318
|
-
var _a = this.props, x = _a.x, y = _a.y,
|
|
319
|
-
var
|
|
318
|
+
var _a = this.props, x = _a.x, y = _a.y, index = _a.index, model = _a.model;
|
|
319
|
+
var style = model.getControlPointStyle();
|
|
320
320
|
return (preact_1.h("g", { className: "lf-resize-control-" + index },
|
|
321
|
-
preact_1.h(Rect_1.default, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, {
|
|
321
|
+
preact_1.h(Rect_1.default, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { onMouseDown: this.dragHandler }))));
|
|
322
322
|
};
|
|
323
323
|
return Control;
|
|
324
324
|
}(preact_1.Component));
|
|
@@ -27,7 +27,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
27
27
|
var preact_1 = require("preact");
|
|
28
28
|
var Control_1 = require("./Control");
|
|
29
29
|
var Rect_1 = require("../BasicShape/Rect");
|
|
30
|
-
var index_1 = require("../index");
|
|
31
30
|
var ControlGroup = /** @class */ (function (_super) {
|
|
32
31
|
__extends(ControlGroup, _super);
|
|
33
32
|
function ControlGroup() {
|
|
@@ -46,18 +45,22 @@ var ControlGroup = /** @class */ (function (_super) {
|
|
|
46
45
|
};
|
|
47
46
|
var minX = box.minX, minY = box.minY, maxX = box.maxX, maxY = box.maxY;
|
|
48
47
|
var controlList = [
|
|
48
|
+
// 左上角
|
|
49
49
|
{
|
|
50
50
|
x: minX,
|
|
51
51
|
y: minY,
|
|
52
52
|
},
|
|
53
|
+
// 右上角
|
|
53
54
|
{
|
|
54
55
|
x: maxX,
|
|
55
56
|
y: minY,
|
|
56
57
|
},
|
|
58
|
+
// 右下角
|
|
57
59
|
{
|
|
58
60
|
x: maxX,
|
|
59
61
|
y: maxY,
|
|
60
62
|
},
|
|
63
|
+
// 左下角
|
|
61
64
|
{
|
|
62
65
|
x: minX,
|
|
63
66
|
y: maxY,
|
|
@@ -67,9 +70,10 @@ var ControlGroup = /** @class */ (function (_super) {
|
|
|
67
70
|
};
|
|
68
71
|
// 一般节点被选中了会有outline, 先不用这个
|
|
69
72
|
ControlGroup.prototype.getGroupSolid = function () {
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
|
|
73
|
+
var model = this.props.model;
|
|
74
|
+
var x = model.x, y = model.y, width = model.width, height = model.height;
|
|
75
|
+
var style = model.getResizeOutlineStyle();
|
|
76
|
+
return (preact_1.h(Rect_1.default, __assign({ fill: "none" }, style, { x: x, y: y, width: width, height: height })));
|
|
73
77
|
};
|
|
74
78
|
ControlGroup.prototype.render = function () {
|
|
75
79
|
return (preact_1.h("g", { className: "lf-resize-control" },
|
|
@@ -30,7 +30,12 @@ var Polygon_1 = require("../BasicShape/Polygon");
|
|
|
30
30
|
var DiamondResizeModel = /** @class */ (function (_super) {
|
|
31
31
|
__extends(DiamondResizeModel, _super);
|
|
32
32
|
function DiamondResizeModel() {
|
|
33
|
-
|
|
33
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
34
|
+
_this.minWidth = 30;
|
|
35
|
+
_this.minHeight = 30;
|
|
36
|
+
_this.maxWidth = 2000;
|
|
37
|
+
_this.maxHeight = 2000;
|
|
38
|
+
return _this;
|
|
34
39
|
}
|
|
35
40
|
DiamondResizeModel.prototype.getOutlineStyle = function () {
|
|
36
41
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
@@ -40,6 +45,21 @@ var DiamondResizeModel = /** @class */ (function (_super) {
|
|
|
40
45
|
}
|
|
41
46
|
return style;
|
|
42
47
|
};
|
|
48
|
+
DiamondResizeModel.prototype.getResizeOutlineStyle = function () {
|
|
49
|
+
return {
|
|
50
|
+
stroke: '#000000',
|
|
51
|
+
strokeWidth: 1,
|
|
52
|
+
strokeDasharray: '3,3',
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
DiamondResizeModel.prototype.getControlPointStyle = function () {
|
|
56
|
+
return {
|
|
57
|
+
width: 7,
|
|
58
|
+
height: 7,
|
|
59
|
+
fill: '#FFFFFF',
|
|
60
|
+
stroke: '#000000',
|
|
61
|
+
};
|
|
62
|
+
};
|
|
43
63
|
DiamondResizeModel.prototype.setAttributes = function () {
|
|
44
64
|
// @ts-ignore
|
|
45
65
|
var nodeSize = this.properties.nodeSize;
|
|
@@ -35,6 +35,21 @@ var EllipseResizeModel = /** @class */ (function (_super) {
|
|
|
35
35
|
}
|
|
36
36
|
return style;
|
|
37
37
|
};
|
|
38
|
+
EllipseResizeModel.prototype.getResizeOutlineStyle = function () {
|
|
39
|
+
return {
|
|
40
|
+
stroke: '#000000',
|
|
41
|
+
strokeWidth: 1,
|
|
42
|
+
strokeDasharray: '3,3',
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
EllipseResizeModel.prototype.getControlPointStyle = function () {
|
|
46
|
+
return {
|
|
47
|
+
width: 7,
|
|
48
|
+
height: 7,
|
|
49
|
+
fill: '#FFFFFF',
|
|
50
|
+
stroke: '#000000',
|
|
51
|
+
};
|
|
52
|
+
};
|
|
38
53
|
EllipseResizeModel.prototype.setAttributes = function () {
|
|
39
54
|
// @ts-ignore
|
|
40
55
|
var nodeSize = this.properties.nodeSize;
|
|
@@ -33,6 +33,21 @@ var HtmlResizeModel = /** @class */ (function (_super) {
|
|
|
33
33
|
}
|
|
34
34
|
return style;
|
|
35
35
|
};
|
|
36
|
+
HtmlResizeModel.prototype.getResizeOutlineStyle = function () {
|
|
37
|
+
return {
|
|
38
|
+
stroke: '#000000',
|
|
39
|
+
strokeWidth: 1,
|
|
40
|
+
strokeDasharray: '3,3',
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
HtmlResizeModel.prototype.getControlPointStyle = function () {
|
|
44
|
+
return {
|
|
45
|
+
width: 7,
|
|
46
|
+
height: 7,
|
|
47
|
+
fill: '#FFFFFF',
|
|
48
|
+
stroke: '#000000',
|
|
49
|
+
};
|
|
50
|
+
};
|
|
36
51
|
HtmlResizeModel.prototype.setAttributes = function () {
|
|
37
52
|
// @ts-ignore
|
|
38
53
|
var nodeSize = this.properties.nodeSize;
|
|
@@ -33,6 +33,22 @@ var RectResizeModel = /** @class */ (function (_super) {
|
|
|
33
33
|
}
|
|
34
34
|
return style;
|
|
35
35
|
};
|
|
36
|
+
RectResizeModel.prototype.getResizeOutlineStyle = function () {
|
|
37
|
+
return {
|
|
38
|
+
fill: 'none',
|
|
39
|
+
stroke: '#000000',
|
|
40
|
+
strokeWidth: 1,
|
|
41
|
+
strokeDasharray: '3,3',
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
RectResizeModel.prototype.getControlPointStyle = function () {
|
|
45
|
+
return {
|
|
46
|
+
width: 7,
|
|
47
|
+
height: 7,
|
|
48
|
+
fill: '#FFFFFF',
|
|
49
|
+
stroke: '#000000',
|
|
50
|
+
};
|
|
51
|
+
};
|
|
36
52
|
RectResizeModel.prototype.setAttributes = function () {
|
|
37
53
|
// @ts-ignore
|
|
38
54
|
var nodeSize = this.properties.nodeSize;
|
|
@@ -41,6 +57,9 @@ var RectResizeModel = /** @class */ (function (_super) {
|
|
|
41
57
|
this.height = nodeSize.height;
|
|
42
58
|
}
|
|
43
59
|
};
|
|
60
|
+
RectResizeModel.prototype.resize = function (deltaX, deltaY) {
|
|
61
|
+
console.log(deltaX, deltaY);
|
|
62
|
+
};
|
|
44
63
|
return RectResizeModel;
|
|
45
64
|
}(core_1.RectNodeModel));
|
|
46
65
|
var RectResizeView = /** @class */ (function (_super) {
|
package/cjs/NodeResize/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DiamondResize = exports.EllipseResize = exports.RectResize = exports.NodeResize = void 0;
|
|
3
|
+
exports.HtmlResize = exports.DiamondResize = exports.EllipseResize = exports.RectResize = exports.NodeResize = void 0;
|
|
4
4
|
var RectResize_1 = require("./Node/RectResize");
|
|
5
5
|
exports.RectResize = RectResize_1.default;
|
|
6
6
|
var EllipseResize_1 = require("./Node/EllipseResize");
|
|
@@ -8,45 +8,11 @@ exports.EllipseResize = EllipseResize_1.default;
|
|
|
8
8
|
var DiamondResize_1 = require("./Node/DiamondResize");
|
|
9
9
|
exports.DiamondResize = DiamondResize_1.default;
|
|
10
10
|
var HtmlResize_1 = require("./Node/HtmlResize");
|
|
11
|
+
exports.HtmlResize = HtmlResize_1.default;
|
|
11
12
|
var NodeResize = {
|
|
12
13
|
pluginName: 'nodeResize',
|
|
13
14
|
// 拖动step
|
|
14
15
|
step: 0,
|
|
15
|
-
// 边框和contol拖动点样式的设置
|
|
16
|
-
style: {
|
|
17
|
-
outline: {
|
|
18
|
-
stroke: '#000000',
|
|
19
|
-
strokeWidth: 1,
|
|
20
|
-
strokeDasharray: '3,3',
|
|
21
|
-
},
|
|
22
|
-
controlPoint: {
|
|
23
|
-
width: 7,
|
|
24
|
-
height: 7,
|
|
25
|
-
fill: '#FFFFFF',
|
|
26
|
-
stroke: '#000000',
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
// 缩放范围
|
|
30
|
-
sizeRange: {
|
|
31
|
-
// rect: {
|
|
32
|
-
// minWidth: 30,
|
|
33
|
-
// minHeight: 30,
|
|
34
|
-
// maxWidth: 300,
|
|
35
|
-
// maxHeight: 300,
|
|
36
|
-
// },
|
|
37
|
-
ellipse: {
|
|
38
|
-
minRx: 15,
|
|
39
|
-
minRy: 15,
|
|
40
|
-
maxRx: 150,
|
|
41
|
-
maxRy: 150,
|
|
42
|
-
},
|
|
43
|
-
diamond: {
|
|
44
|
-
minRx: 15,
|
|
45
|
-
minRy: 15,
|
|
46
|
-
maxRx: 150,
|
|
47
|
-
maxRy: 150,
|
|
48
|
-
},
|
|
49
|
-
},
|
|
50
16
|
install: function (lf) {
|
|
51
17
|
lf.register({
|
|
52
18
|
type: RectResize_1.default.type,
|
|
@@ -80,6 +80,11 @@ var GroupNodeModel = /** @class */ (function (_super) {
|
|
|
80
80
|
this.foldable = false;
|
|
81
81
|
this.properties.isFolded = false;
|
|
82
82
|
};
|
|
83
|
+
GroupNodeModel.prototype.getResizeOutlineStyle = function () {
|
|
84
|
+
var style = _super.prototype.getResizeOutlineStyle.call(this);
|
|
85
|
+
style.stroke = 'none';
|
|
86
|
+
return style;
|
|
87
|
+
};
|
|
83
88
|
GroupNodeModel.prototype.foldGroup = function (isFolded) {
|
|
84
89
|
var _this = this;
|
|
85
90
|
this.setProperty('isFolded', isFolded);
|
|
@@ -209,7 +214,8 @@ var GroupNode = /** @class */ (function (_super) {
|
|
|
209
214
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
210
215
|
}
|
|
211
216
|
GroupNode.prototype.getControlGroup = function () {
|
|
212
|
-
|
|
217
|
+
var _a = this.props.model, resizable = _a.resizable, properties = _a.properties;
|
|
218
|
+
return resizable && !properties.isFolded ? _super.prototype.getControlGroup.call(this) : null;
|
|
213
219
|
};
|
|
214
220
|
GroupNode.prototype.getAddedableShape = function () {
|
|
215
221
|
var _a = this.props.model, width = _a.width, height = _a.height, x = _a.x, y = _a.y, radius = _a.radius, properties = _a.properties;
|
|
@@ -26,7 +26,6 @@ import { h, Component } from 'preact';
|
|
|
26
26
|
import { LogicFlowUtil } from '@logicflow/core';
|
|
27
27
|
import Rect from '../BasicShape/Rect';
|
|
28
28
|
import { getDiamondReizeEdgePoint, getEllipseReizeEdgePoint, getRectReizeEdgePoint, ModelType } from './Util';
|
|
29
|
-
import NodeResize from '../index';
|
|
30
29
|
var createDrag = LogicFlowUtil.createDrag;
|
|
31
30
|
var Control = /** @class */ (function (_super) {
|
|
32
31
|
__extends(Control, _super);
|
|
@@ -211,11 +210,11 @@ var Control = /** @class */ (function (_super) {
|
|
|
211
210
|
pct: 1 / 2,
|
|
212
211
|
});
|
|
213
212
|
// 限制放大缩小的最大最小范围
|
|
214
|
-
var _c =
|
|
215
|
-
if (size.width <
|
|
216
|
-
|| size.width >
|
|
217
|
-
|| size.height <
|
|
218
|
-
|| size.height >
|
|
213
|
+
var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
|
|
214
|
+
if (size.width < (minWidth / 2)
|
|
215
|
+
|| size.width > (maxWidth / 2)
|
|
216
|
+
|| size.height < (minHeight / 2)
|
|
217
|
+
|| size.height > (maxHeight / 2)) {
|
|
219
218
|
return;
|
|
220
219
|
}
|
|
221
220
|
// 更新中心点位置,更新文案位置
|
|
@@ -271,6 +270,7 @@ var Control = /** @class */ (function (_super) {
|
|
|
271
270
|
// html和矩形的计算方式是一样的,共用一个方法
|
|
272
271
|
if (modelType === ModelType.RECT_NODE || modelType === ModelType.HTML_NODE) {
|
|
273
272
|
_this.updateRect({ deltaX: deltaX, deltaY: deltaY });
|
|
273
|
+
// this.nodeModel.resize(deltaX, deltaY);
|
|
274
274
|
}
|
|
275
275
|
else if (modelType === ModelType.ELLIPSE_NODE) {
|
|
276
276
|
_this.updateEllipse({ deltaX: deltaX, deltaY: deltaY });
|
|
@@ -313,10 +313,10 @@ var Control = /** @class */ (function (_super) {
|
|
|
313
313
|
return { sourceEdges: sourceEdges, targetEdges: targetEdges };
|
|
314
314
|
};
|
|
315
315
|
Control.prototype.render = function () {
|
|
316
|
-
var _a = this.props, x = _a.x, y = _a.y,
|
|
317
|
-
var
|
|
316
|
+
var _a = this.props, x = _a.x, y = _a.y, index = _a.index, model = _a.model;
|
|
317
|
+
var style = model.getControlPointStyle();
|
|
318
318
|
return (h("g", { className: "lf-resize-control-" + index },
|
|
319
|
-
h(Rect, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, {
|
|
319
|
+
h(Rect, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { onMouseDown: this.dragHandler }))));
|
|
320
320
|
};
|
|
321
321
|
return Control;
|
|
322
322
|
}(Component));
|
|
@@ -25,7 +25,6 @@ var __assign = (this && this.__assign) || function () {
|
|
|
25
25
|
import { h, Component } from 'preact';
|
|
26
26
|
import Control from './Control';
|
|
27
27
|
import Rect from '../BasicShape/Rect';
|
|
28
|
-
import NodeResize from '../index';
|
|
29
28
|
var ControlGroup = /** @class */ (function (_super) {
|
|
30
29
|
__extends(ControlGroup, _super);
|
|
31
30
|
function ControlGroup() {
|
|
@@ -44,18 +43,22 @@ var ControlGroup = /** @class */ (function (_super) {
|
|
|
44
43
|
};
|
|
45
44
|
var minX = box.minX, minY = box.minY, maxX = box.maxX, maxY = box.maxY;
|
|
46
45
|
var controlList = [
|
|
46
|
+
// 左上角
|
|
47
47
|
{
|
|
48
48
|
x: minX,
|
|
49
49
|
y: minY,
|
|
50
50
|
},
|
|
51
|
+
// 右上角
|
|
51
52
|
{
|
|
52
53
|
x: maxX,
|
|
53
54
|
y: minY,
|
|
54
55
|
},
|
|
56
|
+
// 右下角
|
|
55
57
|
{
|
|
56
58
|
x: maxX,
|
|
57
59
|
y: maxY,
|
|
58
60
|
},
|
|
61
|
+
// 左下角
|
|
59
62
|
{
|
|
60
63
|
x: minX,
|
|
61
64
|
y: maxY,
|
|
@@ -65,9 +68,10 @@ var ControlGroup = /** @class */ (function (_super) {
|
|
|
65
68
|
};
|
|
66
69
|
// 一般节点被选中了会有outline, 先不用这个
|
|
67
70
|
ControlGroup.prototype.getGroupSolid = function () {
|
|
68
|
-
var
|
|
69
|
-
var
|
|
70
|
-
|
|
71
|
+
var model = this.props.model;
|
|
72
|
+
var x = model.x, y = model.y, width = model.width, height = model.height;
|
|
73
|
+
var style = model.getResizeOutlineStyle();
|
|
74
|
+
return (h(Rect, __assign({ fill: "none" }, style, { x: x, y: y, width: width, height: height })));
|
|
71
75
|
};
|
|
72
76
|
ControlGroup.prototype.render = function () {
|
|
73
77
|
return (h("g", { className: "lf-resize-control" },
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import { h, DiamondNode, DiamondNodeModel } from '@logicflow/core';
|
|
2
2
|
declare class DiamondResizeModel extends DiamondNodeModel {
|
|
3
|
+
minWidth: number;
|
|
4
|
+
minHeight: number;
|
|
5
|
+
maxWidth: number;
|
|
6
|
+
maxHeight: number;
|
|
3
7
|
getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
|
|
8
|
+
getResizeOutlineStyle(): {
|
|
9
|
+
stroke: string;
|
|
10
|
+
strokeWidth: number;
|
|
11
|
+
strokeDasharray: string;
|
|
12
|
+
};
|
|
13
|
+
getControlPointStyle(): {
|
|
14
|
+
width: number;
|
|
15
|
+
height: number;
|
|
16
|
+
fill: string;
|
|
17
|
+
stroke: string;
|
|
18
|
+
};
|
|
4
19
|
setAttributes(): void;
|
|
5
20
|
}
|
|
6
21
|
declare class DiamondResizeView extends DiamondNode {
|
|
@@ -28,7 +28,12 @@ import Polygon from '../BasicShape/Polygon';
|
|
|
28
28
|
var DiamondResizeModel = /** @class */ (function (_super) {
|
|
29
29
|
__extends(DiamondResizeModel, _super);
|
|
30
30
|
function DiamondResizeModel() {
|
|
31
|
-
|
|
31
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
32
|
+
_this.minWidth = 30;
|
|
33
|
+
_this.minHeight = 30;
|
|
34
|
+
_this.maxWidth = 2000;
|
|
35
|
+
_this.maxHeight = 2000;
|
|
36
|
+
return _this;
|
|
32
37
|
}
|
|
33
38
|
DiamondResizeModel.prototype.getOutlineStyle = function () {
|
|
34
39
|
var style = _super.prototype.getOutlineStyle.call(this);
|
|
@@ -38,6 +43,21 @@ var DiamondResizeModel = /** @class */ (function (_super) {
|
|
|
38
43
|
}
|
|
39
44
|
return style;
|
|
40
45
|
};
|
|
46
|
+
DiamondResizeModel.prototype.getResizeOutlineStyle = function () {
|
|
47
|
+
return {
|
|
48
|
+
stroke: '#000000',
|
|
49
|
+
strokeWidth: 1,
|
|
50
|
+
strokeDasharray: '3,3',
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
DiamondResizeModel.prototype.getControlPointStyle = function () {
|
|
54
|
+
return {
|
|
55
|
+
width: 7,
|
|
56
|
+
height: 7,
|
|
57
|
+
fill: '#FFFFFF',
|
|
58
|
+
stroke: '#000000',
|
|
59
|
+
};
|
|
60
|
+
};
|
|
41
61
|
DiamondResizeModel.prototype.setAttributes = function () {
|
|
42
62
|
// @ts-ignore
|
|
43
63
|
var nodeSize = this.properties.nodeSize;
|
|
@@ -6,6 +6,17 @@ declare class EllipseResizeModel extends EllipseNodeModel {
|
|
|
6
6
|
maxHeight: number;
|
|
7
7
|
constructor(data: any, graphModel: any);
|
|
8
8
|
getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
|
|
9
|
+
getResizeOutlineStyle(): {
|
|
10
|
+
stroke: string;
|
|
11
|
+
strokeWidth: number;
|
|
12
|
+
strokeDasharray: string;
|
|
13
|
+
};
|
|
14
|
+
getControlPointStyle(): {
|
|
15
|
+
width: number;
|
|
16
|
+
height: number;
|
|
17
|
+
fill: string;
|
|
18
|
+
stroke: string;
|
|
19
|
+
};
|
|
9
20
|
setAttributes(): void;
|
|
10
21
|
}
|
|
11
22
|
declare class EllipseResizeView extends EllipseNode {
|
|
@@ -33,6 +33,21 @@ var EllipseResizeModel = /** @class */ (function (_super) {
|
|
|
33
33
|
}
|
|
34
34
|
return style;
|
|
35
35
|
};
|
|
36
|
+
EllipseResizeModel.prototype.getResizeOutlineStyle = function () {
|
|
37
|
+
return {
|
|
38
|
+
stroke: '#000000',
|
|
39
|
+
strokeWidth: 1,
|
|
40
|
+
strokeDasharray: '3,3',
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
EllipseResizeModel.prototype.getControlPointStyle = function () {
|
|
44
|
+
return {
|
|
45
|
+
width: 7,
|
|
46
|
+
height: 7,
|
|
47
|
+
fill: '#FFFFFF',
|
|
48
|
+
stroke: '#000000',
|
|
49
|
+
};
|
|
50
|
+
};
|
|
36
51
|
EllipseResizeModel.prototype.setAttributes = function () {
|
|
37
52
|
// @ts-ignore
|
|
38
53
|
var nodeSize = this.properties.nodeSize;
|
|
@@ -5,6 +5,17 @@ declare class HtmlResizeModel extends HtmlNodeModel {
|
|
|
5
5
|
maxWidth: number;
|
|
6
6
|
maxHeight: number;
|
|
7
7
|
getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
|
|
8
|
+
getResizeOutlineStyle(): {
|
|
9
|
+
stroke: string;
|
|
10
|
+
strokeWidth: number;
|
|
11
|
+
strokeDasharray: string;
|
|
12
|
+
};
|
|
13
|
+
getControlPointStyle(): {
|
|
14
|
+
width: number;
|
|
15
|
+
height: number;
|
|
16
|
+
fill: string;
|
|
17
|
+
stroke: string;
|
|
18
|
+
};
|
|
8
19
|
setAttributes(): void;
|
|
9
20
|
}
|
|
10
21
|
declare class HtmlResizeView extends HtmlNode {
|
|
@@ -31,6 +31,21 @@ var HtmlResizeModel = /** @class */ (function (_super) {
|
|
|
31
31
|
}
|
|
32
32
|
return style;
|
|
33
33
|
};
|
|
34
|
+
HtmlResizeModel.prototype.getResizeOutlineStyle = function () {
|
|
35
|
+
return {
|
|
36
|
+
stroke: '#000000',
|
|
37
|
+
strokeWidth: 1,
|
|
38
|
+
strokeDasharray: '3,3',
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
HtmlResizeModel.prototype.getControlPointStyle = function () {
|
|
42
|
+
return {
|
|
43
|
+
width: 7,
|
|
44
|
+
height: 7,
|
|
45
|
+
fill: '#FFFFFF',
|
|
46
|
+
stroke: '#000000',
|
|
47
|
+
};
|
|
48
|
+
};
|
|
34
49
|
HtmlResizeModel.prototype.setAttributes = function () {
|
|
35
50
|
// @ts-ignore
|
|
36
51
|
var nodeSize = this.properties.nodeSize;
|
|
@@ -5,7 +5,20 @@ declare class RectResizeModel extends RectNodeModel {
|
|
|
5
5
|
maxWidth: number;
|
|
6
6
|
maxHeight: number;
|
|
7
7
|
getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
|
|
8
|
+
getResizeOutlineStyle(): {
|
|
9
|
+
fill: string;
|
|
10
|
+
stroke: string;
|
|
11
|
+
strokeWidth: number;
|
|
12
|
+
strokeDasharray: string;
|
|
13
|
+
};
|
|
14
|
+
getControlPointStyle(): {
|
|
15
|
+
width: number;
|
|
16
|
+
height: number;
|
|
17
|
+
fill: string;
|
|
18
|
+
stroke: string;
|
|
19
|
+
};
|
|
8
20
|
setAttributes(): void;
|
|
21
|
+
resize(deltaX: any, deltaY: any): void;
|
|
9
22
|
}
|
|
10
23
|
declare class RectResizeView extends RectNode {
|
|
11
24
|
getControlGroup(): h.JSX.Element;
|
|
@@ -31,6 +31,22 @@ var RectResizeModel = /** @class */ (function (_super) {
|
|
|
31
31
|
}
|
|
32
32
|
return style;
|
|
33
33
|
};
|
|
34
|
+
RectResizeModel.prototype.getResizeOutlineStyle = function () {
|
|
35
|
+
return {
|
|
36
|
+
fill: 'none',
|
|
37
|
+
stroke: '#000000',
|
|
38
|
+
strokeWidth: 1,
|
|
39
|
+
strokeDasharray: '3,3',
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
RectResizeModel.prototype.getControlPointStyle = function () {
|
|
43
|
+
return {
|
|
44
|
+
width: 7,
|
|
45
|
+
height: 7,
|
|
46
|
+
fill: '#FFFFFF',
|
|
47
|
+
stroke: '#000000',
|
|
48
|
+
};
|
|
49
|
+
};
|
|
34
50
|
RectResizeModel.prototype.setAttributes = function () {
|
|
35
51
|
// @ts-ignore
|
|
36
52
|
var nodeSize = this.properties.nodeSize;
|
|
@@ -39,6 +55,9 @@ var RectResizeModel = /** @class */ (function (_super) {
|
|
|
39
55
|
this.height = nodeSize.height;
|
|
40
56
|
}
|
|
41
57
|
};
|
|
58
|
+
RectResizeModel.prototype.resize = function (deltaX, deltaY) {
|
|
59
|
+
console.log(deltaX, deltaY);
|
|
60
|
+
};
|
|
42
61
|
return RectResizeModel;
|
|
43
62
|
}(RectNodeModel));
|
|
44
63
|
var RectResizeView = /** @class */ (function (_super) {
|
package/es/NodeResize/index.d.ts
CHANGED
|
@@ -1,37 +1,11 @@
|
|
|
1
1
|
import RectResize from './Node/RectResize';
|
|
2
2
|
import EllipseResize from './Node/EllipseResize';
|
|
3
3
|
import DiamondResize from './Node/DiamondResize';
|
|
4
|
+
import HtmlResize from './Node/HtmlResize';
|
|
4
5
|
declare const NodeResize: {
|
|
5
6
|
pluginName: string;
|
|
6
7
|
step: number;
|
|
7
|
-
style: {
|
|
8
|
-
outline: {
|
|
9
|
-
stroke: string;
|
|
10
|
-
strokeWidth: number;
|
|
11
|
-
strokeDasharray: string;
|
|
12
|
-
};
|
|
13
|
-
controlPoint: {
|
|
14
|
-
width: number;
|
|
15
|
-
height: number;
|
|
16
|
-
fill: string;
|
|
17
|
-
stroke: string;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
sizeRange: {
|
|
21
|
-
ellipse: {
|
|
22
|
-
minRx: number;
|
|
23
|
-
minRy: number;
|
|
24
|
-
maxRx: number;
|
|
25
|
-
maxRy: number;
|
|
26
|
-
};
|
|
27
|
-
diamond: {
|
|
28
|
-
minRx: number;
|
|
29
|
-
minRy: number;
|
|
30
|
-
maxRx: number;
|
|
31
|
-
maxRy: number;
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
8
|
install(lf: any): void;
|
|
35
9
|
};
|
|
36
10
|
export default NodeResize;
|
|
37
|
-
export { NodeResize, RectResize, EllipseResize, DiamondResize, };
|
|
11
|
+
export { NodeResize, RectResize, EllipseResize, DiamondResize, HtmlResize, };
|
package/es/NodeResize/index.js
CHANGED
|
@@ -6,41 +6,6 @@ var NodeResize = {
|
|
|
6
6
|
pluginName: 'nodeResize',
|
|
7
7
|
// 拖动step
|
|
8
8
|
step: 0,
|
|
9
|
-
// 边框和contol拖动点样式的设置
|
|
10
|
-
style: {
|
|
11
|
-
outline: {
|
|
12
|
-
stroke: '#000000',
|
|
13
|
-
strokeWidth: 1,
|
|
14
|
-
strokeDasharray: '3,3',
|
|
15
|
-
},
|
|
16
|
-
controlPoint: {
|
|
17
|
-
width: 7,
|
|
18
|
-
height: 7,
|
|
19
|
-
fill: '#FFFFFF',
|
|
20
|
-
stroke: '#000000',
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
// 缩放范围
|
|
24
|
-
sizeRange: {
|
|
25
|
-
// rect: {
|
|
26
|
-
// minWidth: 30,
|
|
27
|
-
// minHeight: 30,
|
|
28
|
-
// maxWidth: 300,
|
|
29
|
-
// maxHeight: 300,
|
|
30
|
-
// },
|
|
31
|
-
ellipse: {
|
|
32
|
-
minRx: 15,
|
|
33
|
-
minRy: 15,
|
|
34
|
-
maxRx: 150,
|
|
35
|
-
maxRy: 150,
|
|
36
|
-
},
|
|
37
|
-
diamond: {
|
|
38
|
-
minRx: 15,
|
|
39
|
-
minRy: 15,
|
|
40
|
-
maxRx: 150,
|
|
41
|
-
maxRy: 150,
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
9
|
install: function (lf) {
|
|
45
10
|
lf.register({
|
|
46
11
|
type: RectResize.type,
|
|
@@ -65,4 +30,4 @@ var NodeResize = {
|
|
|
65
30
|
},
|
|
66
31
|
};
|
|
67
32
|
export default NodeResize;
|
|
68
|
-
export { NodeResize, RectResize, EllipseResize, DiamondResize, };
|
|
33
|
+
export { NodeResize, RectResize, EllipseResize, DiamondResize, HtmlResize, };
|