@eccenca/gui-elements 22.0.0-rc.7 → 22.0.1
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/CHANGELOG.md +9 -0
- package/README.md +21 -7
- package/dist/cjs/extensions/react-flow/index.js +5 -1
- package/dist/cjs/extensions/react-flow/index.js.map +1 -1
- package/dist/cjs/extensions/react-flow/minimap/utils.js +2 -2
- package/dist/cjs/extensions/react-flow/nodes/NodeContent.js +138 -0
- package/dist/cjs/extensions/react-flow/nodes/NodeContent.js.map +1 -0
- package/dist/cjs/extensions/react-flow/nodes/NodeContentExtension.js +40 -0
- package/dist/cjs/extensions/react-flow/nodes/NodeContentExtension.js.map +1 -0
- package/dist/cjs/extensions/react-flow/nodes/NodeDefault.js +3 -130
- package/dist/cjs/extensions/react-flow/nodes/NodeDefault.js.map +1 -1
- package/dist/es5/extensions/react-flow/index.js +2 -0
- package/dist/es5/extensions/react-flow/index.js.map +1 -1
- package/dist/es5/extensions/react-flow/minimap/utils.js +1 -1
- package/dist/es5/extensions/react-flow/nodes/NodeContent.js +143 -0
- package/dist/es5/extensions/react-flow/nodes/NodeContent.js.map +1 -0
- package/dist/es5/extensions/react-flow/nodes/NodeContentExtension.js +44 -0
- package/dist/es5/extensions/react-flow/nodes/NodeContentExtension.js.map +1 -0
- package/dist/es5/extensions/react-flow/nodes/NodeDefault.js +2 -129
- package/dist/es5/extensions/react-flow/nodes/NodeDefault.js.map +1 -1
- package/dist/types/extensions/react-flow/index.d.ts +4 -0
- package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts +121 -0
- package/dist/types/extensions/react-flow/nodes/NodeContentExtension.d.ts +30 -0
- package/dist/types/extensions/react-flow/nodes/NodeDefault.d.ts +2 -119
- package/package.json +14 -4
- package/src/extensions/react-flow/index.ts +4 -0
- package/src/extensions/react-flow/minimap/utils.ts +1 -1
- package/src/extensions/react-flow/nodes/NodeContent.stories.tsx +1 -1
- package/src/extensions/react-flow/nodes/NodeContent.tsx +329 -0
- package/src/extensions/react-flow/nodes/NodeDefault.stories.tsx +2 -1
- package/src/extensions/react-flow/nodes/NodeDefault.tsx +2 -324
- package/src/components/Icon/canonicalIconNames.json +0 -120
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import React from "react";
|
|
24
|
+
import { Position } from "react-flow-renderer";
|
|
25
|
+
import { Icon, Tooltip } from "../../../index";
|
|
26
|
+
import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
|
|
27
|
+
import { HandleDefault } from "./../handles/HandleDefault";
|
|
28
|
+
var defaultHandles = [
|
|
29
|
+
{ type: "target" },
|
|
30
|
+
{ type: "source" },
|
|
31
|
+
];
|
|
32
|
+
var getDefaultMinimalTooltipData = function (node) {
|
|
33
|
+
var _a, _b, _c, _d;
|
|
34
|
+
return {
|
|
35
|
+
label: (_a = node.data) === null || _a === void 0 ? void 0 : _a.label,
|
|
36
|
+
content: (_b = node.data) === null || _b === void 0 ? void 0 : _b.content,
|
|
37
|
+
iconName: (_c = node.data) === null || _c === void 0 ? void 0 : _c.iconName,
|
|
38
|
+
depiction: (_d = node.data) === null || _d === void 0 ? void 0 : _d.depiction,
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
var addHandles = function (handles, position, posDirection, isConnectable, nodeStyle) {
|
|
42
|
+
return handles[position].map(function (handle, idx) {
|
|
43
|
+
var _a, _b;
|
|
44
|
+
var className = handle.className, _c = handle.style, style = _c === void 0 ? {} : _c, category = handle.category;
|
|
45
|
+
var styleAdditions = {
|
|
46
|
+
color: (_a = nodeStyle.borderColor) !== null && _a !== void 0 ? _a : undefined
|
|
47
|
+
};
|
|
48
|
+
styleAdditions[posDirection] = (100 / (handles[position].length + 1) * (idx + 1)) + "%";
|
|
49
|
+
var handleProperties = __assign(__assign({}, handle), {
|
|
50
|
+
position: (_b = handle.position) !== null && _b !== void 0 ? _b : position,
|
|
51
|
+
style: __assign(__assign({}, style), styleAdditions),
|
|
52
|
+
posdirection: posDirection,
|
|
53
|
+
isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
|
|
54
|
+
className: !!category ? (className ? className + " " : "") + gethighlightedStateClasses(category, eccgui + "-graphviz__handle") : className,
|
|
55
|
+
});
|
|
56
|
+
return (React.createElement(MemoHandler, __assign({}, handleProperties, { key: "handle" + idx })));
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
var imgWithTooltip = function (imgEl, tooltipText) {
|
|
60
|
+
if (!!tooltipText) {
|
|
61
|
+
return React.createElement(Tooltip, { content: tooltipText },
|
|
62
|
+
React.createElement("span", null, imgEl));
|
|
63
|
+
}
|
|
64
|
+
return imgEl;
|
|
65
|
+
};
|
|
66
|
+
export var gethighlightedStateClasses = function (state, baseClassName) {
|
|
67
|
+
var hightlights = typeof state === "string" ? [state] : state;
|
|
68
|
+
//@ts-ignore
|
|
69
|
+
return hightlights.map(function (item) { return baseClassName + "--highlight-" + item; }).join(' ');
|
|
70
|
+
};
|
|
71
|
+
var MemoHandler = React.memo(function (props) { return React.createElement(HandleDefault, __assign({}, props)); }, function (prev, next) {
|
|
72
|
+
var styleHasChanged = prev.style[prev.posdirection] === next.style[next.posdirection];
|
|
73
|
+
return styleHasChanged;
|
|
74
|
+
});
|
|
75
|
+
/**
|
|
76
|
+
* The `NodeContent` element manages the main view of how a node is displaying which content.
|
|
77
|
+
* This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
|
|
78
|
+
*/
|
|
79
|
+
export var NodeContent = function (_a) {
|
|
80
|
+
var iconName = _a.iconName, depiction = _a.depiction, typeLabel = _a.typeLabel, label = _a.label, _b = _a.showExecutionButtons, showExecutionButtons = _b === void 0 ? true : _b, executionButtons = _a.executionButtons, menuButtons = _a.menuButtons, content = _a.content, contentExtension = _a.contentExtension, _c = _a.size, size = _c === void 0 ? "small" : _c, _d = _a.minimalShape, minimalShape = _d === void 0 ? "circular" : _d, highlightedState = _a.highlightedState, _e = _a.handles, handles = _e === void 0 ? defaultHandles : _e, adaptHeightForHandleMinCount = _a.adaptHeightForHandleMinCount, _f = _a.adaptSizeIncrement, adaptSizeIncrement = _f === void 0 ? 15 : _f, _g = _a.getMinimalTooltipData, getMinimalTooltipData = _g === void 0 ? getDefaultMinimalTooltipData : _g, _h = _a.style, style = _h === void 0 ? {} : _h, _j = _a.showUnconnectableHandles, showUnconnectableHandles = _j === void 0 ? false : _j, _k = _a.animated, animated = _k === void 0 ? false : _k,
|
|
81
|
+
// forwarded props
|
|
82
|
+
_l = _a.targetPosition,
|
|
83
|
+
// forwarded props
|
|
84
|
+
targetPosition = _l === void 0 ? Position.Left : _l, _m = _a.sourcePosition, sourcePosition = _m === void 0 ? Position.Right : _m, _o = _a.isConnectable, isConnectable = _o === void 0 ? true : _o, selected = _a.selected,
|
|
85
|
+
// businessData is just being ignored
|
|
86
|
+
businessData = _a.businessData,
|
|
87
|
+
// other props for DOM element
|
|
88
|
+
otherProps = __rest(_a, ["iconName", "depiction", "typeLabel", "label", "showExecutionButtons", "executionButtons", "menuButtons", "content", "contentExtension", "size", "minimalShape", "highlightedState", "handles", "adaptHeightForHandleMinCount", "adaptSizeIncrement", "getMinimalTooltipData", "style", "showUnconnectableHandles", "animated", "targetPosition", "sourcePosition", "isConnectable", "selected", "businessData"]);
|
|
89
|
+
var handleStack = {};
|
|
90
|
+
handleStack[Position.Top] = [];
|
|
91
|
+
handleStack[Position.Right] = [];
|
|
92
|
+
handleStack[Position.Bottom] = [];
|
|
93
|
+
handleStack[Position.Left] = [];
|
|
94
|
+
if (handles.length > 0) {
|
|
95
|
+
handles.forEach(function (handle) {
|
|
96
|
+
if (!!handle.position) {
|
|
97
|
+
handleStack[handle.position].push(handle);
|
|
98
|
+
}
|
|
99
|
+
else if (handle.category === "configuration") {
|
|
100
|
+
handleStack[Position.Top].push(handle);
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
if (handle.type === "target") {
|
|
104
|
+
handleStack[targetPosition].push(handle);
|
|
105
|
+
}
|
|
106
|
+
if (handle.type === "source") {
|
|
107
|
+
handleStack[sourcePosition].push(handle);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
var styleExpandDimensions = {};
|
|
113
|
+
if (typeof adaptHeightForHandleMinCount !== "undefined" &&
|
|
114
|
+
(minimalShape === "none" || !!selected) &&
|
|
115
|
+
adaptSizeIncrement && (handleStack[Position.Left].length >= adaptHeightForHandleMinCount ||
|
|
116
|
+
handleStack[Position.Right].length >= adaptHeightForHandleMinCount)) {
|
|
117
|
+
var minHeightLeft = handleStack[Position.Left].length * adaptSizeIncrement;
|
|
118
|
+
var minHeightRight = handleStack[Position.Right].length * adaptSizeIncrement;
|
|
119
|
+
styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
|
|
120
|
+
}
|
|
121
|
+
return (React.createElement(React.Fragment, null,
|
|
122
|
+
React.createElement("section", __assign({}, otherProps, { style: __assign(__assign({}, style), styleExpandDimensions), className: eccgui + "-graphviz__node" +
|
|
123
|
+
(" " + eccgui + "-graphviz__node--" + size) +
|
|
124
|
+
(" " + eccgui + "-graphviz__node--minimal-" + minimalShape) +
|
|
125
|
+
(!!highlightedState ? " " + gethighlightedStateClasses(highlightedState, eccgui + "-graphviz__node") : "") +
|
|
126
|
+
(animated ? " " + eccgui + "-graphviz__node--animated" : "") +
|
|
127
|
+
(showUnconnectableHandles === false ? " " + eccgui + "-graphviz__node--hidehandles" : "") }),
|
|
128
|
+
React.createElement("header", { className: eccgui + "-graphviz__node__header" },
|
|
129
|
+
(!!iconName || !!depiction) && (React.createElement("span", { className: eccgui + "-graphviz__node__header-depiction" },
|
|
130
|
+
!!depiction && imgWithTooltip(React.createElement("img", { src: depiction, alt: "" }), (minimalShape === "none" || selected) ? typeLabel : undefined),
|
|
131
|
+
(!!iconName && !depiction) && React.createElement(Icon, { name: iconName, tooltipText: (minimalShape === "none" || selected) ? typeLabel : undefined }))),
|
|
132
|
+
React.createElement("span", { className: eccgui + "-graphviz__node__header-label", title: label }, label),
|
|
133
|
+
(menuButtons || (showExecutionButtons && executionButtons)) && (React.createElement("span", { className: eccgui + "-graphviz__node__header-menu" },
|
|
134
|
+
(showExecutionButtons && typeof executionButtons === "function") ? executionButtons() : null, menuButtons !== null && menuButtons !== void 0 ? menuButtons : null))),
|
|
135
|
+
content && (React.createElement("div", { className: eccgui + "-graphviz__node__content" }, content)),
|
|
136
|
+
contentExtension && (React.createElement("div", { className: eccgui + "-graphviz__node__footer" }, contentExtension))),
|
|
137
|
+
!!handles && (React.createElement(React.Fragment, null,
|
|
138
|
+
addHandles(handleStack, Position.Top, "left", isConnectable, style),
|
|
139
|
+
addHandles(handleStack, Position.Right, "top", isConnectable, style),
|
|
140
|
+
addHandles(handleStack, Position.Bottom, "left", isConnectable, style),
|
|
141
|
+
addHandles(handleStack, Position.Left, "top", isConnectable, style)))));
|
|
142
|
+
};
|
|
143
|
+
//# sourceMappingURL=NodeContent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeContent.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/nodes/NodeContent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import React from "react";
|
|
24
|
+
import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
|
|
25
|
+
import IconButton from "../../../components/Icon/IconButton";
|
|
26
|
+
/**
|
|
27
|
+
* Displays an content area that can be attached to `NodeContent` elements.
|
|
28
|
+
*/
|
|
29
|
+
export var NodeContentExtension = function (_a) {
|
|
30
|
+
var children = _a.children, _b = _a.isExpanded, isExpanded = _b === void 0 ? false : _b, _c = _a.onToggle, onToggle = _c === void 0 ? undefined : _c, actionButtons = _a.actionButtons, _d = _a.tooltipExpand, tooltipExpand = _d === void 0 ? "Show more" : _d, _e = _a.tooltipReduce, tooltipReduce = _e === void 0 ? "Show less" : _e,
|
|
31
|
+
// other props for DOM element
|
|
32
|
+
otherProps = __rest(_a, ["children", "isExpanded", "onToggle", "actionButtons", "tooltipExpand", "tooltipReduce"]);
|
|
33
|
+
// always expand element if there is no handler to manage it
|
|
34
|
+
var expanded = onToggle ? isExpanded : true;
|
|
35
|
+
return (React.createElement("div", __assign({}, otherProps, { className: eccgui + "-graphviz__node__extension" +
|
|
36
|
+
(expanded ? " " + eccgui + "-graphviz__node__extension--expanded" : "") }),
|
|
37
|
+
!expanded && onToggle && (React.createElement(IconButton, { className: eccgui + "-graphviz__node__extension-expandbutton", name: "item-vertmenu", text: tooltipExpand, onClick: function (e) { onToggle(e, expanded); } })),
|
|
38
|
+
expanded && (React.createElement(React.Fragment, null,
|
|
39
|
+
React.createElement("div", { className: eccgui + "-graphviz__node__extension-body" }, children),
|
|
40
|
+
React.createElement("div", { className: eccgui + "-graphviz__node__extension-actions" },
|
|
41
|
+
React.createElement(IconButton, { className: eccgui + "-graphviz__node__extension-reducebutton", name: "toggler-showless", text: tooltipReduce, onClick: onToggle ? function (e) { onToggle(e, expanded); } : undefined }),
|
|
42
|
+
actionButtons)))));
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=NodeContentExtension.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeContentExtension.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/nodes/NodeContentExtension.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,UAAU,MAAM,qCAAqC,CAAC;AA6B7D;;GAEG;AACH,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,EAST;IARxB,IAAA,QAAQ,cAAA,EACR,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,gBAAoB,EAApB,QAAQ,mBAAG,SAAS,KAAA,EACpB,aAAa,mBAAA,EACb,qBAA2B,EAA3B,aAAa,mBAAG,WAAW,KAAA,EAC3B,qBAA2B,EAA3B,aAAa,mBAAG,WAAW,KAAA;IAC3B,8BAA8B;IAC3B,UAAU,cARoB,yFASpC,CADgB;IAGb,4DAA4D;IAC5D,IAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9C,OAAO,CACH,wCACQ,UAAU,IACd,SAAS,EACF,MAAM,+BAA4B;YACrC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAI,MAAM,yCAAsC,CAAC,CAAC,CAAC,EAAE,CAAC;QAIlE,CAAC,QAAQ,IAAI,QAAQ,IAAI,CACrB,oBAAC,UAAU,IACP,SAAS,EAAK,MAAM,4CAAyC,EAC7D,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,UAAC,CAAC,IAAO,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,GAC5C,CACL;QAGD,QAAQ,IAAI,CACR;YACI,6BAAK,SAAS,EAAK,MAAM,oCAAiC,IACrD,QAAQ,CACP;YACN,6BAAK,SAAS,EAAK,MAAM,uCAAoC;gBACzD,oBAAC,UAAU,IACP,SAAS,EAAK,MAAM,4CAAyC,EAC7D,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAC,CAAC,IAAO,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GACnE;gBACD,aAAa,CACZ,CACP,CACN,CAEH,CACT,CAAC;AACN,CAAC,CAAA"}
|
|
@@ -9,69 +9,10 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
12
|
import React, { memo } from "react";
|
|
24
13
|
import { Position } from "react-flow-renderer";
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import { HandleDefault } from "./../handles/HandleDefault";
|
|
28
|
-
var defaultHandles = [
|
|
29
|
-
{ type: "target" },
|
|
30
|
-
{ type: "source" },
|
|
31
|
-
];
|
|
32
|
-
var MemoHandler = React.memo(function (props) { return React.createElement(HandleDefault, __assign({}, props)); }, function (prev, next) {
|
|
33
|
-
var styleHasChanged = prev.style[prev.posdirection] === next.style[next.posdirection];
|
|
34
|
-
return styleHasChanged;
|
|
35
|
-
});
|
|
36
|
-
var addHandles = function (handles, position, posDirection, isConnectable, nodeStyle) {
|
|
37
|
-
return handles[position].map(function (handle, idx) {
|
|
38
|
-
var _a, _b;
|
|
39
|
-
var className = handle.className, _c = handle.style, style = _c === void 0 ? {} : _c, category = handle.category;
|
|
40
|
-
var styleAdditions = {
|
|
41
|
-
color: (_a = nodeStyle.borderColor) !== null && _a !== void 0 ? _a : undefined
|
|
42
|
-
};
|
|
43
|
-
styleAdditions[posDirection] = (100 / (handles[position].length + 1) * (idx + 1)) + "%";
|
|
44
|
-
var handleProperties = __assign(__assign({}, handle), {
|
|
45
|
-
position: (_b = handle.position) !== null && _b !== void 0 ? _b : position,
|
|
46
|
-
style: __assign(__assign({}, style), styleAdditions),
|
|
47
|
-
posdirection: posDirection,
|
|
48
|
-
isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
|
|
49
|
-
className: !!category ? (className ? className + " " : "") + gethighlightedStateClasses(category, eccgui + "-graphviz__handle") : className,
|
|
50
|
-
});
|
|
51
|
-
return (React.createElement(MemoHandler, __assign({}, handleProperties, { key: "handle" + idx })));
|
|
52
|
-
});
|
|
53
|
-
};
|
|
54
|
-
var getDefaultMinimalTooltipData = function (node) {
|
|
55
|
-
var _a, _b, _c, _d;
|
|
56
|
-
return {
|
|
57
|
-
label: (_a = node.data) === null || _a === void 0 ? void 0 : _a.label,
|
|
58
|
-
content: (_b = node.data) === null || _b === void 0 ? void 0 : _b.content,
|
|
59
|
-
iconName: (_c = node.data) === null || _c === void 0 ? void 0 : _c.iconName,
|
|
60
|
-
depiction: (_d = node.data) === null || _d === void 0 ? void 0 : _d.depiction,
|
|
61
|
-
};
|
|
62
|
-
};
|
|
63
|
-
var imgWithTooltip = function (imgEl, tooltipText) {
|
|
64
|
-
if (!!tooltipText) {
|
|
65
|
-
return React.createElement(Tooltip, { content: tooltipText },
|
|
66
|
-
React.createElement("span", null, imgEl));
|
|
67
|
-
}
|
|
68
|
-
return imgEl;
|
|
69
|
-
};
|
|
70
|
-
export var gethighlightedStateClasses = function (state, baseClassName) {
|
|
71
|
-
var hightlights = typeof state === "string" ? [state] : state;
|
|
72
|
-
//@ts-ignore
|
|
73
|
-
return hightlights.map(function (item) { return baseClassName + "--highlight-" + item; }).join(' ');
|
|
74
|
-
};
|
|
14
|
+
import { Tooltip } from "../../../index";
|
|
15
|
+
import { NodeContent } from "./NodeContent";
|
|
75
16
|
/**
|
|
76
17
|
* The `NodeDefault` element manages the display of React-Flow nodes.
|
|
77
18
|
* This element cannot be used directly, it must be connected via a `nodeTypes` definition and all properties need to be routed through the `elements` property items inside the `ReactFlow` container.
|
|
@@ -90,72 +31,4 @@ export var NodeDefault = memo(function (node) {
|
|
|
90
31
|
}
|
|
91
32
|
return nodeEl;
|
|
92
33
|
});
|
|
93
|
-
/**
|
|
94
|
-
* The `NodeContent` element manages the main view of how a node is displaying which content.
|
|
95
|
-
* This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
|
|
96
|
-
*/
|
|
97
|
-
export var NodeContent = function (_a) {
|
|
98
|
-
var iconName = _a.iconName, depiction = _a.depiction, typeLabel = _a.typeLabel, label = _a.label, _b = _a.showExecutionButtons, showExecutionButtons = _b === void 0 ? true : _b, executionButtons = _a.executionButtons, menuButtons = _a.menuButtons, content = _a.content, contentExtension = _a.contentExtension, _c = _a.size, size = _c === void 0 ? "small" : _c, _d = _a.minimalShape, minimalShape = _d === void 0 ? "circular" : _d, highlightedState = _a.highlightedState, _e = _a.handles, handles = _e === void 0 ? defaultHandles : _e, adaptHeightForHandleMinCount = _a.adaptHeightForHandleMinCount, _f = _a.adaptSizeIncrement, adaptSizeIncrement = _f === void 0 ? 15 : _f, _g = _a.getMinimalTooltipData, getMinimalTooltipData = _g === void 0 ? getDefaultMinimalTooltipData : _g, _h = _a.style, style = _h === void 0 ? {} : _h, _j = _a.showUnconnectableHandles, showUnconnectableHandles = _j === void 0 ? false : _j, _k = _a.animated, animated = _k === void 0 ? false : _k,
|
|
99
|
-
// forwarded props
|
|
100
|
-
_l = _a.targetPosition,
|
|
101
|
-
// forwarded props
|
|
102
|
-
targetPosition = _l === void 0 ? Position.Left : _l, _m = _a.sourcePosition, sourcePosition = _m === void 0 ? Position.Right : _m, _o = _a.isConnectable, isConnectable = _o === void 0 ? true : _o, selected = _a.selected,
|
|
103
|
-
// businessData is just being ignored
|
|
104
|
-
businessData = _a.businessData,
|
|
105
|
-
// other props for DOM element
|
|
106
|
-
otherProps = __rest(_a, ["iconName", "depiction", "typeLabel", "label", "showExecutionButtons", "executionButtons", "menuButtons", "content", "contentExtension", "size", "minimalShape", "highlightedState", "handles", "adaptHeightForHandleMinCount", "adaptSizeIncrement", "getMinimalTooltipData", "style", "showUnconnectableHandles", "animated", "targetPosition", "sourcePosition", "isConnectable", "selected", "businessData"]);
|
|
107
|
-
var handleStack = {};
|
|
108
|
-
handleStack[Position.Top] = [];
|
|
109
|
-
handleStack[Position.Right] = [];
|
|
110
|
-
handleStack[Position.Bottom] = [];
|
|
111
|
-
handleStack[Position.Left] = [];
|
|
112
|
-
if (handles.length > 0) {
|
|
113
|
-
handles.forEach(function (handle) {
|
|
114
|
-
if (!!handle.position) {
|
|
115
|
-
handleStack[handle.position].push(handle);
|
|
116
|
-
}
|
|
117
|
-
else if (handle.category === "configuration") {
|
|
118
|
-
handleStack[Position.Top].push(handle);
|
|
119
|
-
}
|
|
120
|
-
else {
|
|
121
|
-
if (handle.type === "target") {
|
|
122
|
-
handleStack[targetPosition].push(handle);
|
|
123
|
-
}
|
|
124
|
-
if (handle.type === "source") {
|
|
125
|
-
handleStack[sourcePosition].push(handle);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
var styleExpandDimensions = {};
|
|
131
|
-
if (typeof adaptHeightForHandleMinCount !== "undefined" &&
|
|
132
|
-
(minimalShape === "none" || !!selected) &&
|
|
133
|
-
adaptSizeIncrement && (handleStack[Position.Left].length >= adaptHeightForHandleMinCount ||
|
|
134
|
-
handleStack[Position.Right].length >= adaptHeightForHandleMinCount)) {
|
|
135
|
-
var minHeightLeft = handleStack[Position.Left].length * adaptSizeIncrement;
|
|
136
|
-
var minHeightRight = handleStack[Position.Right].length * adaptSizeIncrement;
|
|
137
|
-
styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
|
|
138
|
-
}
|
|
139
|
-
return (React.createElement(React.Fragment, null,
|
|
140
|
-
React.createElement("section", __assign({}, otherProps, { style: __assign(__assign({}, style), styleExpandDimensions), className: eccgui + "-graphviz__node" +
|
|
141
|
-
(" " + eccgui + "-graphviz__node--" + size) +
|
|
142
|
-
(" " + eccgui + "-graphviz__node--minimal-" + minimalShape) +
|
|
143
|
-
(!!highlightedState ? " " + gethighlightedStateClasses(highlightedState, eccgui + "-graphviz__node") : "") +
|
|
144
|
-
(animated ? " " + eccgui + "-graphviz__node--animated" : "") +
|
|
145
|
-
(showUnconnectableHandles === false ? " " + eccgui + "-graphviz__node--hidehandles" : "") }),
|
|
146
|
-
React.createElement("header", { className: eccgui + "-graphviz__node__header" },
|
|
147
|
-
(!!iconName || !!depiction) && (React.createElement("span", { className: eccgui + "-graphviz__node__header-depiction" },
|
|
148
|
-
!!depiction && imgWithTooltip(React.createElement("img", { src: depiction, alt: "" }), (minimalShape === "none" || selected) ? typeLabel : undefined),
|
|
149
|
-
(!!iconName && !depiction) && React.createElement(Icon, { name: iconName, tooltipText: (minimalShape === "none" || selected) ? typeLabel : undefined }))),
|
|
150
|
-
React.createElement("span", { className: eccgui + "-graphviz__node__header-label", title: label }, label),
|
|
151
|
-
(menuButtons || (showExecutionButtons && executionButtons)) && (React.createElement("span", { className: eccgui + "-graphviz__node__header-menu" },
|
|
152
|
-
(showExecutionButtons && typeof executionButtons === "function") ? executionButtons() : null, menuButtons !== null && menuButtons !== void 0 ? menuButtons : null))),
|
|
153
|
-
content && (React.createElement("div", { className: eccgui + "-graphviz__node__content" }, content)),
|
|
154
|
-
contentExtension && (React.createElement("div", { className: eccgui + "-graphviz__node__footer" }, contentExtension))),
|
|
155
|
-
!!handles && (React.createElement(React.Fragment, null,
|
|
156
|
-
addHandles(handleStack, Position.Top, "left", isConnectable, style),
|
|
157
|
-
addHandles(handleStack, Position.Right, "top", isConnectable, style),
|
|
158
|
-
addHandles(handleStack, Position.Bottom, "left", isConnectable, style),
|
|
159
|
-
addHandles(handleStack, Position.Left, "top", isConnectable, style)))));
|
|
160
|
-
};
|
|
161
34
|
//# sourceMappingURL=NodeDefault.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeDefault.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/nodes/NodeDefault.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NodeDefault.js","sourceRoot":"","sources":["../../../../../src/extensions/react-flow/nodes/NodeDefault.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAEH,QAAQ,EACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAU9D;;;;GAIG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,IAAI,CAC3B,UAAC,IAAoB;IAEb,IAAA,IAAI,GAKJ,IAAI,KALA,EACJ,KAIA,IAAI,eAJ0B,EAA9B,cAAc,mBAAG,QAAQ,CAAC,IAAI,KAAA,EAC9B,KAGA,IAAI,eAH2B,EAA/B,cAAc,mBAAG,QAAQ,CAAC,KAAK,KAAA,EAC/B,KAEA,IAAI,cAFgB,EAApB,aAAa,mBAAG,IAAI,KAAA,EACpB,QAAQ,GACR,IAAI,SADI,CACH;IAET,IAAM,MAAM,GAAG,oBAAC,WAAW,qCAAS,IAAI,KAAE,cAAc,gBAAA,EAAE,cAAc,gBAAA,EAAE,aAAa,eAAA,EAAE,QAAQ,UAAA,KAAK,CAAA;IAEtG,IAAI,CAAC,QAAQ,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,MAAK,MAAM,IAAI,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,qBAAqB,CAAA,EAAE;QAC7E,IAAM,WAAW,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,WAAW,CAAC,OAAO,EAAE;YAC9C,OAAO,CACH,oBAAC,OAAO,IACJ,OAAO,EAAE,CACL;oBACK,WAAW,CAAC,KAAK,IAAI,iCAAM,WAAW,CAAC,KAAK,CAAO;oBACnD,WAAW,CAAC,OAAO,IAAI,iCAAM,WAAW,CAAC,OAAO,CAAO,CACzD,CACN,IAEA,MAAM,CACD,CACb,CAAA;SACJ;KACJ;IAED,OAAO,MAAM,CAAC;AAClB,CAAC,CACJ,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { NodeDefault } from "./nodes/NodeDefault";
|
|
2
|
+
export { NodeContent } from "./nodes/NodeContent";
|
|
3
|
+
export { NodeContentExtension } from "./nodes/NodeContentExtension";
|
|
2
4
|
export { NodeTools } from "./nodes/NodeTools";
|
|
3
5
|
export { nodeTypes } from "./nodes/nodeTypes";
|
|
4
6
|
export { EdgeDefault } from "./edges/EdgeDefault";
|
|
@@ -8,6 +10,8 @@ export { edgeTypes } from "./edges/edgeTypes";
|
|
|
8
10
|
export { MiniMap } from "./minimap/MiniMap";
|
|
9
11
|
export { minimapNodeClassName, minimapNodeColor } from "./minimap/utils";
|
|
10
12
|
export type { NodeProps } from "./nodes/NodeDefault";
|
|
13
|
+
export type { NodeContentProps } from "./nodes/NodeContent";
|
|
14
|
+
export type { NodeContentExtensionProps } from "./nodes/NodeContentExtension";
|
|
11
15
|
export type { NodeToolsProps } from "./nodes/NodeTools";
|
|
12
16
|
export type { EdgeDefaultProps } from "./edges/EdgeDefault";
|
|
13
17
|
export type { EdgeStepProps } from "./edges/EdgeStep";
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Position } from "react-flow-renderer";
|
|
3
|
+
import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
|
|
4
|
+
import { HandleProps } from "./../handles/HandleDefault";
|
|
5
|
+
import { NodeProps } from "./NodeDefault";
|
|
6
|
+
declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
|
|
7
|
+
export interface IHandleProps extends HandleProps {
|
|
8
|
+
category?: "configuration";
|
|
9
|
+
}
|
|
10
|
+
interface NodeContentData {
|
|
11
|
+
/**
|
|
12
|
+
* Name of icon that should be displayed before the node label.
|
|
13
|
+
* Must be a name from our list of canonical icon names.
|
|
14
|
+
*/
|
|
15
|
+
iconName?: ValidIconName;
|
|
16
|
+
/**
|
|
17
|
+
* Valid and accessible URL or `data-uri` for an image that should be displayed before the node label.
|
|
18
|
+
*/
|
|
19
|
+
depiction?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Label that is displayed in the node header.
|
|
22
|
+
*/
|
|
23
|
+
label: string;
|
|
24
|
+
/**
|
|
25
|
+
* Content element, displayed in the node body.
|
|
26
|
+
*/
|
|
27
|
+
content?: React.ReactNode;
|
|
28
|
+
/**
|
|
29
|
+
* Content extension, displayed at the bottom side of a node.
|
|
30
|
+
*/
|
|
31
|
+
contentExtension?: React.ReactNode;
|
|
32
|
+
}
|
|
33
|
+
export interface NodeContentProps<T> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
|
|
34
|
+
/**
|
|
35
|
+
* Size of the node.
|
|
36
|
+
* If `minimalShape` is not set to `none`then the configured size definition is only used for the selected node state.
|
|
37
|
+
*/
|
|
38
|
+
size?: "tiny" | "small" | "medium" | "large";
|
|
39
|
+
/**
|
|
40
|
+
* Defines if the node is initially displayed within a very small shape.
|
|
41
|
+
* If not set to `none` then the node is only displayed in normal size when it is selected.
|
|
42
|
+
*/
|
|
43
|
+
minimalShape?: "none" | "circular" | "rectangular";
|
|
44
|
+
/**
|
|
45
|
+
* Set the type of used highlights to mark the node.
|
|
46
|
+
*/
|
|
47
|
+
highlightedState?: HighlightingState | HighlightingState[];
|
|
48
|
+
/**
|
|
49
|
+
* Text used for tooltip used on icon and depiction.
|
|
50
|
+
*/
|
|
51
|
+
typeLabel?: string;
|
|
52
|
+
/**
|
|
53
|
+
* If `executionButtons` content is included or not.
|
|
54
|
+
* It is displayed in the node header between label and menu.
|
|
55
|
+
*/
|
|
56
|
+
showExecutionButtons?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Set of defined buttons and icons that can be displayed.
|
|
59
|
+
*/
|
|
60
|
+
executionButtons?: () => React.ReactNode;
|
|
61
|
+
/**
|
|
62
|
+
* Can be used for permanent action button or context menu.
|
|
63
|
+
* It is displayed at the node header right to the label.
|
|
64
|
+
*/
|
|
65
|
+
menuButtons?: React.ReactNode;
|
|
66
|
+
/**
|
|
67
|
+
* Array of property definition objects for `Handle` components that need to be created for the node.
|
|
68
|
+
* @see https://reactflow.dev/docs/api/handle/
|
|
69
|
+
*/
|
|
70
|
+
handles?: IHandleProps[];
|
|
71
|
+
/**
|
|
72
|
+
* Set the minimal number of handles on left or right side of the node to activate the recalculation of the minimal height of the node.
|
|
73
|
+
*/
|
|
74
|
+
adaptHeightForHandleMinCount?: number;
|
|
75
|
+
/**
|
|
76
|
+
* Height per handle in px (without the unit) used for minimal height calculation of the node.
|
|
77
|
+
*/
|
|
78
|
+
adaptSizeIncrement?: number;
|
|
79
|
+
/**
|
|
80
|
+
* Callback function to provide content for the tooltip on a node with a defined `minimalShape`.
|
|
81
|
+
* If you do not want a tooltip in this state you need to provide a callback that returns an empty value.
|
|
82
|
+
*/
|
|
83
|
+
getMinimalTooltipData?: (node: NodeProps<T>) => NodeContentData;
|
|
84
|
+
/**
|
|
85
|
+
* Set if a handle is displayed even if it does not allow a connection to an edge.
|
|
86
|
+
*/
|
|
87
|
+
showUnconnectableHandles?: boolean;
|
|
88
|
+
/**
|
|
89
|
+
* The node is displayed with some animated shadow for highlighting purposes.
|
|
90
|
+
*/
|
|
91
|
+
animated?: boolean;
|
|
92
|
+
/** Additional data stored in the node. */
|
|
93
|
+
businessData?: T;
|
|
94
|
+
/**
|
|
95
|
+
* This property is only forwarded from the `NodeDefault` element.
|
|
96
|
+
* If set then it will be always overwritten internally.
|
|
97
|
+
*/
|
|
98
|
+
targetPosition?: typeof Position[keyof typeof Position];
|
|
99
|
+
/**
|
|
100
|
+
* This property is only forwarded from the `NodeDefault` element.
|
|
101
|
+
* If set then it will be always overwritten internally.
|
|
102
|
+
*/
|
|
103
|
+
sourcePosition?: typeof Position[keyof typeof Position];
|
|
104
|
+
/**
|
|
105
|
+
* This property is only forwarded from the `NodeDefault` element.
|
|
106
|
+
* If set then it will be always overwritten internally.
|
|
107
|
+
*/
|
|
108
|
+
isConnectable?: boolean;
|
|
109
|
+
/**
|
|
110
|
+
* This property is only forwarded from the `NodeDefault` element.
|
|
111
|
+
* If set then it will be always overwritten internally.
|
|
112
|
+
*/
|
|
113
|
+
selected?: boolean;
|
|
114
|
+
}
|
|
115
|
+
export declare const gethighlightedStateClasses: (state: any, baseClassName: any) => any;
|
|
116
|
+
/**
|
|
117
|
+
* The `NodeContent` element manages the main view of how a node is displaying which content.
|
|
118
|
+
* This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
|
|
119
|
+
*/
|
|
120
|
+
export declare const NodeContent: ({ iconName, depiction, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, targetPosition, sourcePosition, isConnectable, selected, businessData, ...otherProps }: NodeContentProps<any>) => JSX.Element;
|
|
121
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/**
|
|
4
|
+
* Element is displayed in expanded state.
|
|
5
|
+
* If it has no `onToggle` handler property set then it is always expanded.
|
|
6
|
+
*/
|
|
7
|
+
isExpanded?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Click handler to manage the expanded state from outside the the element.
|
|
10
|
+
* This state is not managed automatically by the element itself.
|
|
11
|
+
*/
|
|
12
|
+
onToggle?: (event: React.MouseEvent<HTMLElement>, isExpanded: boolean) => void;
|
|
13
|
+
/**
|
|
14
|
+
* Single element or aray of `IconButton` and `Button` elements.
|
|
15
|
+
* They will be displayed beside the closing button under the element content body.
|
|
16
|
+
*/
|
|
17
|
+
actionButtons?: React.ReactNode | React.ReactNode[];
|
|
18
|
+
/**
|
|
19
|
+
* Tooltip text for expand button.
|
|
20
|
+
*/
|
|
21
|
+
tooltipExpand?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Tooltip text for expand button.
|
|
24
|
+
*/
|
|
25
|
+
tooltipReduce?: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Displays an content area that can be attached to `NodeContent` elements.
|
|
29
|
+
*/
|
|
30
|
+
export declare const NodeContentExtension: ({ children, isExpanded, onToggle, actionButtons, tooltipExpand, tooltipReduce, ...otherProps }: NodeContentExtensionProps) => JSX.Element;
|