react-design-editor 0.0.50 → 0.0.51
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/dist/react-design-editor.js +7739 -7114
- package/dist/react-design-editor.min.js +1 -1
- package/dist/react-design-editor.min.js.LICENSE.txt +2 -0
- package/lib/Canvas.d.ts +18 -18
- package/lib/Canvas.js +172 -172
- package/lib/CanvasObject.d.ts +10 -10
- package/lib/CanvasObject.js +96 -96
- package/lib/constants/code.d.ts +19 -19
- package/lib/constants/code.js +22 -22
- package/lib/constants/defaults.d.ts +38 -38
- package/lib/constants/defaults.js +69 -69
- package/lib/constants/index.d.ts +3 -3
- package/lib/constants/index.js +26 -26
- package/lib/handlers/AlignmentHandler.d.ts +18 -18
- package/lib/handlers/AlignmentHandler.js +58 -58
- package/lib/handlers/AnimationHandler.d.ts +50 -50
- package/lib/handlers/AnimationHandler.js +346 -346
- package/lib/handlers/ChartHandler.d.ts +8 -8
- package/lib/handlers/ChartHandler.js +8 -8
- package/lib/handlers/ContextmenuHandler.d.ts +28 -28
- package/lib/handlers/ContextmenuHandler.js +65 -65
- package/lib/handlers/CropHandler.d.ts +43 -43
- package/lib/handlers/CropHandler.js +261 -261
- package/lib/handlers/CustomHandler.d.ts +7 -7
- package/lib/handlers/CustomHandler.js +10 -10
- package/lib/handlers/DrawingHandler.d.ts +28 -28
- package/lib/handlers/DrawingHandler.js +318 -318
- package/lib/handlers/ElementHandler.d.ts +80 -80
- package/lib/handlers/ElementHandler.js +154 -154
- package/lib/handlers/EventHandler.d.ts +170 -170
- package/lib/handlers/EventHandler.js +880 -880
- package/lib/handlers/FiberHandler.d.ts +6 -6
- package/lib/handlers/FiberHandler.js +23 -23
- package/lib/handlers/GridHandler.d.ts +19 -19
- package/lib/handlers/GridHandler.js +77 -77
- package/lib/handlers/GuidelineHandler.d.ts +61 -61
- package/lib/handlers/GuidelineHandler.js +315 -315
- package/lib/handlers/Handler.d.ts +618 -618
- package/lib/handlers/Handler.js +1645 -1645
- package/lib/handlers/ImageHandler.d.ts +307 -307
- package/lib/handlers/ImageHandler.js +528 -528
- package/lib/handlers/InteractionHandler.d.ts +45 -45
- package/lib/handlers/InteractionHandler.js +168 -164
- package/lib/handlers/LinkHandler.d.ts +115 -115
- package/lib/handlers/LinkHandler.js +247 -247
- package/lib/handlers/NodeHandler.d.ts +50 -50
- package/lib/handlers/NodeHandler.js +274 -274
- package/lib/handlers/PortHandler.d.ts +22 -22
- package/lib/handlers/PortHandler.js +179 -179
- package/lib/handlers/ShortcutHandler.d.ts +119 -119
- package/lib/handlers/ShortcutHandler.js +151 -151
- package/lib/handlers/TooltipHandler.d.ts +33 -33
- package/lib/handlers/TooltipHandler.js +91 -91
- package/lib/handlers/TransactionHandler.d.ts +59 -59
- package/lib/handlers/TransactionHandler.js +137 -137
- package/lib/handlers/WorkareaHandler.d.ts +43 -43
- package/lib/handlers/WorkareaHandler.js +354 -354
- package/lib/handlers/ZoomHandler.d.ts +48 -48
- package/lib/handlers/ZoomHandler.js +143 -143
- package/lib/handlers/index.d.ts +23 -23
- package/lib/handlers/index.js +48 -48
- package/lib/index.d.ts +6 -6
- package/lib/index.js +20 -20
- package/lib/objects/Arrow.d.ts +2 -2
- package/lib/objects/Arrow.js +40 -40
- package/lib/objects/Chart.d.ts +10 -10
- package/lib/objects/Chart.js +117 -117
- package/lib/objects/CirclePort.d.ts +2 -2
- package/lib/objects/CirclePort.js +28 -28
- package/lib/objects/Cube.d.ts +5 -5
- package/lib/objects/Cube.js +71 -71
- package/lib/objects/CurvedLink.d.ts +2 -2
- package/lib/objects/CurvedLink.js +51 -51
- package/lib/objects/Element.d.ts +13 -13
- package/lib/objects/Element.js +77 -77
- package/lib/objects/Gif.d.ts +3 -3
- package/lib/objects/Gif.js +41 -41
- package/lib/objects/Iframe.d.ts +9 -9
- package/lib/objects/Iframe.js +63 -63
- package/lib/objects/Line.d.ts +2 -2
- package/lib/objects/Line.js +24 -24
- package/lib/objects/Link.d.ts +15 -15
- package/lib/objects/Link.js +107 -107
- package/lib/objects/Node.d.ts +59 -59
- package/lib/objects/Node.js +271 -271
- package/lib/objects/OrthogonalLink.d.ts +2 -2
- package/lib/objects/OrthogonalLink.js +54 -54
- package/lib/objects/Port.d.ts +12 -12
- package/lib/objects/Port.js +28 -28
- package/lib/objects/Svg.d.ts +12 -12
- package/lib/objects/Svg.js +93 -93
- package/lib/objects/Video.d.ts +14 -14
- package/lib/objects/Video.js +113 -113
- package/lib/objects/index.d.ts +15 -15
- package/lib/objects/index.js +32 -32
- package/lib/utils/ObjectUtil.d.ts +408 -408
- package/lib/utils/ObjectUtil.js +13 -13
- package/lib/utils/index.d.ts +1 -1
- package/lib/utils/index.js +13 -13
- package/package.json +1 -1
package/lib/objects/Link.js
CHANGED
|
@@ -1,107 +1,107 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const fabric_1 = require("fabric");
|
|
4
|
-
const uuidv4_1 = require("uuidv4");
|
|
5
|
-
const Node_1 = require("./Node");
|
|
6
|
-
const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
|
|
7
|
-
type: 'link',
|
|
8
|
-
superType: 'link',
|
|
9
|
-
initialize(fromNode, fromPort, toNode, toPort, options) {
|
|
10
|
-
options = options || {};
|
|
11
|
-
const coords = [fromPort.left, fromPort.top, toPort.left, toPort.top];
|
|
12
|
-
Object.assign(options, {
|
|
13
|
-
strokeWidth: 4,
|
|
14
|
-
id: options.id || uuidv4_1.uuid(),
|
|
15
|
-
originX: 'center',
|
|
16
|
-
originY: 'center',
|
|
17
|
-
lockScalingX: true,
|
|
18
|
-
lockScalingY: true,
|
|
19
|
-
lockRotation: true,
|
|
20
|
-
hasRotatingPoint: false,
|
|
21
|
-
hasControls: false,
|
|
22
|
-
hasBorders: false,
|
|
23
|
-
perPixelTargetFind: true,
|
|
24
|
-
lockMovementX: true,
|
|
25
|
-
lockMovementY: true,
|
|
26
|
-
selectable: false,
|
|
27
|
-
fromNode,
|
|
28
|
-
fromPort,
|
|
29
|
-
toNode,
|
|
30
|
-
toPort,
|
|
31
|
-
hoverCursor: 'pointer',
|
|
32
|
-
});
|
|
33
|
-
this.callSuper('initialize', coords, options);
|
|
34
|
-
},
|
|
35
|
-
setPort(fromNode, fromPort, _toNode, toPort) {
|
|
36
|
-
if (fromNode.type === 'BroadcastNode') {
|
|
37
|
-
fromPort = fromNode.fromPort[0];
|
|
38
|
-
}
|
|
39
|
-
fromPort.links.push(this);
|
|
40
|
-
toPort.links.push(this);
|
|
41
|
-
this.setPortEnabled(fromNode, fromPort, false);
|
|
42
|
-
},
|
|
43
|
-
setPortEnabled(node, port, enabled) {
|
|
44
|
-
if (node.descriptor.outPortType !== Node_1.OUT_PORT_TYPE.BROADCAST) {
|
|
45
|
-
port.set({
|
|
46
|
-
enabled,
|
|
47
|
-
fill: enabled ? port.originFill : port.selectFill,
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
if (node.toPort.id === port.id) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
port.links.forEach((link, index) => {
|
|
55
|
-
link.set({
|
|
56
|
-
fromPort: port,
|
|
57
|
-
fromPortIndex: index,
|
|
58
|
-
});
|
|
59
|
-
});
|
|
60
|
-
node.set({
|
|
61
|
-
configuration: {
|
|
62
|
-
outputCount: port.links.length,
|
|
63
|
-
},
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
|
-
toObject() {
|
|
68
|
-
return fabric_1.fabric.util.object.extend(this.callSuper('toObject'), {
|
|
69
|
-
id: this.get('id'),
|
|
70
|
-
name: this.get('name'),
|
|
71
|
-
superType: this.get('superType'),
|
|
72
|
-
configuration: this.get('configuration'),
|
|
73
|
-
fromNode: this.get('fromNode'),
|
|
74
|
-
fromPort: this.get('fromPort'),
|
|
75
|
-
toNode: this.get('toNode'),
|
|
76
|
-
toPort: this.get('toPort'),
|
|
77
|
-
});
|
|
78
|
-
},
|
|
79
|
-
_render(ctx) {
|
|
80
|
-
this.callSuper('_render', ctx);
|
|
81
|
-
ctx.save();
|
|
82
|
-
const xDiff = this.x2 - this.x1;
|
|
83
|
-
const yDiff = this.y2 - this.y1;
|
|
84
|
-
const angle = Math.atan2(yDiff, xDiff);
|
|
85
|
-
ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
|
|
86
|
-
ctx.rotate(angle);
|
|
87
|
-
ctx.beginPath();
|
|
88
|
-
if (this.arrow) {
|
|
89
|
-
// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
|
|
90
|
-
ctx.moveTo(5, 0);
|
|
91
|
-
ctx.lineTo(-5, 5);
|
|
92
|
-
ctx.lineTo(-5, -5);
|
|
93
|
-
}
|
|
94
|
-
ctx.closePath();
|
|
95
|
-
ctx.lineWidth = this.strokeWidth;
|
|
96
|
-
ctx.fillStyle = this.stroke;
|
|
97
|
-
ctx.fill();
|
|
98
|
-
ctx.restore();
|
|
99
|
-
},
|
|
100
|
-
});
|
|
101
|
-
Link.fromObject = (options, callback) => {
|
|
102
|
-
const { fromNode, fromPort, toNode, toPort } = options;
|
|
103
|
-
return callback(new Link(fromNode, fromPort, toNode, toPort, options));
|
|
104
|
-
};
|
|
105
|
-
// @ts-ignore
|
|
106
|
-
window.fabric.Link = Link;
|
|
107
|
-
exports.default = Link;
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const fabric_1 = require("fabric");
|
|
4
|
+
const uuidv4_1 = require("uuidv4");
|
|
5
|
+
const Node_1 = require("./Node");
|
|
6
|
+
const Link = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
|
|
7
|
+
type: 'link',
|
|
8
|
+
superType: 'link',
|
|
9
|
+
initialize(fromNode, fromPort, toNode, toPort, options) {
|
|
10
|
+
options = options || {};
|
|
11
|
+
const coords = [fromPort.left, fromPort.top, toPort.left, toPort.top];
|
|
12
|
+
Object.assign(options, {
|
|
13
|
+
strokeWidth: 4,
|
|
14
|
+
id: options.id || uuidv4_1.uuid(),
|
|
15
|
+
originX: 'center',
|
|
16
|
+
originY: 'center',
|
|
17
|
+
lockScalingX: true,
|
|
18
|
+
lockScalingY: true,
|
|
19
|
+
lockRotation: true,
|
|
20
|
+
hasRotatingPoint: false,
|
|
21
|
+
hasControls: false,
|
|
22
|
+
hasBorders: false,
|
|
23
|
+
perPixelTargetFind: true,
|
|
24
|
+
lockMovementX: true,
|
|
25
|
+
lockMovementY: true,
|
|
26
|
+
selectable: false,
|
|
27
|
+
fromNode,
|
|
28
|
+
fromPort,
|
|
29
|
+
toNode,
|
|
30
|
+
toPort,
|
|
31
|
+
hoverCursor: 'pointer',
|
|
32
|
+
});
|
|
33
|
+
this.callSuper('initialize', coords, options);
|
|
34
|
+
},
|
|
35
|
+
setPort(fromNode, fromPort, _toNode, toPort) {
|
|
36
|
+
if (fromNode.type === 'BroadcastNode') {
|
|
37
|
+
fromPort = fromNode.fromPort[0];
|
|
38
|
+
}
|
|
39
|
+
fromPort.links.push(this);
|
|
40
|
+
toPort.links.push(this);
|
|
41
|
+
this.setPortEnabled(fromNode, fromPort, false);
|
|
42
|
+
},
|
|
43
|
+
setPortEnabled(node, port, enabled) {
|
|
44
|
+
if (node.descriptor.outPortType !== Node_1.OUT_PORT_TYPE.BROADCAST) {
|
|
45
|
+
port.set({
|
|
46
|
+
enabled,
|
|
47
|
+
fill: enabled ? port.originFill : port.selectFill,
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
if (node.toPort.id === port.id) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
port.links.forEach((link, index) => {
|
|
55
|
+
link.set({
|
|
56
|
+
fromPort: port,
|
|
57
|
+
fromPortIndex: index,
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
node.set({
|
|
61
|
+
configuration: {
|
|
62
|
+
outputCount: port.links.length,
|
|
63
|
+
},
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
toObject() {
|
|
68
|
+
return fabric_1.fabric.util.object.extend(this.callSuper('toObject'), {
|
|
69
|
+
id: this.get('id'),
|
|
70
|
+
name: this.get('name'),
|
|
71
|
+
superType: this.get('superType'),
|
|
72
|
+
configuration: this.get('configuration'),
|
|
73
|
+
fromNode: this.get('fromNode'),
|
|
74
|
+
fromPort: this.get('fromPort'),
|
|
75
|
+
toNode: this.get('toNode'),
|
|
76
|
+
toPort: this.get('toPort'),
|
|
77
|
+
});
|
|
78
|
+
},
|
|
79
|
+
_render(ctx) {
|
|
80
|
+
this.callSuper('_render', ctx);
|
|
81
|
+
ctx.save();
|
|
82
|
+
const xDiff = this.x2 - this.x1;
|
|
83
|
+
const yDiff = this.y2 - this.y1;
|
|
84
|
+
const angle = Math.atan2(yDiff, xDiff);
|
|
85
|
+
ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
|
|
86
|
+
ctx.rotate(angle);
|
|
87
|
+
ctx.beginPath();
|
|
88
|
+
if (this.arrow) {
|
|
89
|
+
// Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
|
|
90
|
+
ctx.moveTo(5, 0);
|
|
91
|
+
ctx.lineTo(-5, 5);
|
|
92
|
+
ctx.lineTo(-5, -5);
|
|
93
|
+
}
|
|
94
|
+
ctx.closePath();
|
|
95
|
+
ctx.lineWidth = this.strokeWidth;
|
|
96
|
+
ctx.fillStyle = this.stroke;
|
|
97
|
+
ctx.fill();
|
|
98
|
+
ctx.restore();
|
|
99
|
+
},
|
|
100
|
+
});
|
|
101
|
+
Link.fromObject = (options, callback) => {
|
|
102
|
+
const { fromNode, fromPort, toNode, toPort } = options;
|
|
103
|
+
return callback(new Link(fromNode, fromPort, toNode, toPort, options));
|
|
104
|
+
};
|
|
105
|
+
// @ts-ignore
|
|
106
|
+
window.fabric.Link = Link;
|
|
107
|
+
exports.default = Link;
|
package/lib/objects/Node.d.ts
CHANGED
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
import { fabric } from 'fabric';
|
|
2
|
-
import { FabricObject } from '../utils';
|
|
3
|
-
import { PortObject } from './Port';
|
|
4
|
-
export declare const NODE_COLORS: {
|
|
5
|
-
TRIGGER: {
|
|
6
|
-
fill: string;
|
|
7
|
-
border: string;
|
|
8
|
-
};
|
|
9
|
-
LOGIC: {
|
|
10
|
-
fill: string;
|
|
11
|
-
border: string;
|
|
12
|
-
};
|
|
13
|
-
DATA: {
|
|
14
|
-
fill: string;
|
|
15
|
-
border: string;
|
|
16
|
-
};
|
|
17
|
-
ACTION: {
|
|
18
|
-
fill: string;
|
|
19
|
-
border: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
export declare const OUT_PORT_TYPE: {
|
|
23
|
-
SINGLE: string;
|
|
24
|
-
STATIC: string;
|
|
25
|
-
DYNAMIC: string;
|
|
26
|
-
BROADCAST: string;
|
|
27
|
-
NONE: string;
|
|
28
|
-
};
|
|
29
|
-
export declare const DESCRIPTIONS: {
|
|
30
|
-
script: string;
|
|
31
|
-
template: string;
|
|
32
|
-
json: string;
|
|
33
|
-
cron: string;
|
|
34
|
-
};
|
|
35
|
-
export declare const getEllipsis: (text: string, length: number) => string;
|
|
36
|
-
export declare type NodeType = 'TRIGGER' | 'LOGIC' | 'DATA' | 'ACTION';
|
|
37
|
-
export interface NodeObject extends FabricObject<fabric.Group> {
|
|
38
|
-
errorFlag?: fabric.IText;
|
|
39
|
-
label?: fabric.Text;
|
|
40
|
-
toPort?: PortObject;
|
|
41
|
-
errors?: any;
|
|
42
|
-
fromPort?: PortObject[];
|
|
43
|
-
descriptor?: Record<string, any>;
|
|
44
|
-
nodeClazz?: string;
|
|
45
|
-
configuration?: Record<string, any>;
|
|
46
|
-
defaultPortOption?: () => Partial<PortObject>;
|
|
47
|
-
toPortOption?: () => Partial<PortObject>;
|
|
48
|
-
fromPortOption?: () => Partial<PortObject>;
|
|
49
|
-
createToPort?: (left: number, top: number) => PortObject;
|
|
50
|
-
createFromPort?: (left: number, top: number) => PortObject[];
|
|
51
|
-
singlePort?: (portOption: Partial<PortObject>) => PortObject[];
|
|
52
|
-
staticPort?: (portOption: Partial<PortObject>) => PortObject[];
|
|
53
|
-
dynamicPort?: (portOption: Partial<PortObject>) => PortObject[];
|
|
54
|
-
broadcastPort?: (portOption: Partial<PortObject>) => PortObject[];
|
|
55
|
-
setErrors?: (errors: any) => void;
|
|
56
|
-
duplicate?: () => NodeObject;
|
|
57
|
-
}
|
|
58
|
-
declare const Node: any;
|
|
59
|
-
export default Node;
|
|
1
|
+
import { fabric } from 'fabric';
|
|
2
|
+
import { FabricObject } from '../utils';
|
|
3
|
+
import { PortObject } from './Port';
|
|
4
|
+
export declare const NODE_COLORS: {
|
|
5
|
+
TRIGGER: {
|
|
6
|
+
fill: string;
|
|
7
|
+
border: string;
|
|
8
|
+
};
|
|
9
|
+
LOGIC: {
|
|
10
|
+
fill: string;
|
|
11
|
+
border: string;
|
|
12
|
+
};
|
|
13
|
+
DATA: {
|
|
14
|
+
fill: string;
|
|
15
|
+
border: string;
|
|
16
|
+
};
|
|
17
|
+
ACTION: {
|
|
18
|
+
fill: string;
|
|
19
|
+
border: string;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
export declare const OUT_PORT_TYPE: {
|
|
23
|
+
SINGLE: string;
|
|
24
|
+
STATIC: string;
|
|
25
|
+
DYNAMIC: string;
|
|
26
|
+
BROADCAST: string;
|
|
27
|
+
NONE: string;
|
|
28
|
+
};
|
|
29
|
+
export declare const DESCRIPTIONS: {
|
|
30
|
+
script: string;
|
|
31
|
+
template: string;
|
|
32
|
+
json: string;
|
|
33
|
+
cron: string;
|
|
34
|
+
};
|
|
35
|
+
export declare const getEllipsis: (text: string, length: number) => string;
|
|
36
|
+
export declare type NodeType = 'TRIGGER' | 'LOGIC' | 'DATA' | 'ACTION';
|
|
37
|
+
export interface NodeObject extends FabricObject<fabric.Group> {
|
|
38
|
+
errorFlag?: fabric.IText;
|
|
39
|
+
label?: fabric.Text;
|
|
40
|
+
toPort?: PortObject;
|
|
41
|
+
errors?: any;
|
|
42
|
+
fromPort?: PortObject[];
|
|
43
|
+
descriptor?: Record<string, any>;
|
|
44
|
+
nodeClazz?: string;
|
|
45
|
+
configuration?: Record<string, any>;
|
|
46
|
+
defaultPortOption?: () => Partial<PortObject>;
|
|
47
|
+
toPortOption?: () => Partial<PortObject>;
|
|
48
|
+
fromPortOption?: () => Partial<PortObject>;
|
|
49
|
+
createToPort?: (left: number, top: number) => PortObject;
|
|
50
|
+
createFromPort?: (left: number, top: number) => PortObject[];
|
|
51
|
+
singlePort?: (portOption: Partial<PortObject>) => PortObject[];
|
|
52
|
+
staticPort?: (portOption: Partial<PortObject>) => PortObject[];
|
|
53
|
+
dynamicPort?: (portOption: Partial<PortObject>) => PortObject[];
|
|
54
|
+
broadcastPort?: (portOption: Partial<PortObject>) => PortObject[];
|
|
55
|
+
setErrors?: (errors: any) => void;
|
|
56
|
+
duplicate?: () => NodeObject;
|
|
57
|
+
}
|
|
58
|
+
declare const Node: any;
|
|
59
|
+
export default Node;
|