@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
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
5
5
|
|
|
6
6
|
## [Unreleased]
|
|
7
7
|
|
|
8
|
+
## [22.0.1] - 2022-04-11
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
|
|
12
|
+
* make used package version more stable, re-allowing also a yarn lock file
|
|
13
|
+
* correct documentation about package registry
|
|
14
|
+
|
|
15
|
+
## [22.0.0] - 2022-04-08
|
|
16
|
+
|
|
8
17
|
### Added
|
|
9
18
|
|
|
10
19
|
* `Tag` element got new property for `backgroundColor`
|
package/README.md
CHANGED
|
@@ -2,23 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
Collection of React elements based on [Palantir BlueprintJS](https://blueprintjs.com/) and [IBM Carbon](https://www.carbondesignsystem.com/), used for [eccenca Corporate Memory](https://eccenca.com/products/enterprise-knowledge-graph-platform-corporate-memory) applications.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Usage
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
### Installation
|
|
8
|
+
|
|
9
|
+
We provide a [package via npmjs registry](https://www.npmjs.com/package/@eccenca/gui-elements), install it by:
|
|
8
10
|
|
|
9
11
|
```
|
|
10
|
-
@eccenca
|
|
12
|
+
yarn add @eccenca/gui-elements
|
|
11
13
|
```
|
|
12
14
|
|
|
13
15
|
It could be also included as Git submodule to your projects and used via yarn link or yarn workspaces.
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
### Inclusion
|
|
16
18
|
|
|
17
19
|
* To include SCSS styles for all basic components add `@import "~@eccenca/gui-elements/index";` into your main SCSS file.
|
|
18
20
|
* To use extensions and special Corporate Memory components the include of `@eccenca/gui-elements/extensions` and `@eccenca/gui-elements/cmem` is necessary
|
|
19
21
|
* To include only the default configuration add `@import "~@eccenca/gui-elements/src/configuration/variables;` into your SCSS file.
|
|
20
22
|
|
|
21
|
-
###
|
|
23
|
+
### Configuration
|
|
22
24
|
|
|
23
25
|
All [configuration variables](https://github.com/eccenca/gui-elements/blob/develop/src/configuration/_variables.scss) can be set before importing the full library or the default configuration but for the main changes you should need to change only a few parameters:
|
|
24
26
|
|
|
@@ -37,9 +39,9 @@ All [configuration variables](https://github.com/eccenca/gui-elements/blob/devel
|
|
|
37
39
|
* `$eccgui-size-type-levelratio`: ratio without unit! used to calculate different text sizes based on `$eccgui-size-typo-base`
|
|
38
40
|
* `$eccgui-size-block-whitespace`: white space between block level elements, currently only `px` is supported
|
|
39
41
|
|
|
40
|
-
##
|
|
42
|
+
## Development
|
|
41
43
|
|
|
42
|
-
###
|
|
44
|
+
### Branch names
|
|
43
45
|
|
|
44
46
|
Aside from the `main` and `develop` branches we have some rules for branch names and they must be prefixed:
|
|
45
47
|
|
|
@@ -54,6 +56,8 @@ Aside from the `main` and `develop` branches we have some rules for branch names
|
|
|
54
56
|
Run the Jest tests with `yarn test`, for test coverage information run `yarn test:coverage`.
|
|
55
57
|
You can check easily code for code errors by `yarn compile` (JS/Typescript) and `yarn compile-scss` (SASS).
|
|
56
58
|
|
|
59
|
+
If you run Jest tests in your app using our library you need to install `@babel/plugin-transform-runtime` as development dependeny and add it to your Babel plugins configuration.
|
|
60
|
+
|
|
57
61
|
### Running Storybook
|
|
58
62
|
|
|
59
63
|
All storiy source files are kept in the respective components, extensions and cmem folders, using `*.stories.tsx` file name pattern.
|
|
@@ -74,6 +78,16 @@ Default.parameters = {
|
|
|
74
78
|
};
|
|
75
79
|
```
|
|
76
80
|
|
|
81
|
+
### Use via yalc
|
|
82
|
+
|
|
83
|
+
If necessary you can use [yalc](https://github.com/wclr/yalc) to develop gui elements and your application side by side.
|
|
84
|
+
|
|
85
|
+
1. Install yalc globally via npm or yarn
|
|
86
|
+
2. Checkout [@eccenca/gui-elements](https://github.com/eccenca/gui-elements)
|
|
87
|
+
3. Inside gui elements folder: `yalc publish --push`
|
|
88
|
+
4. Inside your applications folder: `yalc link @eccenca/gui-elements`
|
|
89
|
+
5. After updates to the gui elements: `yarn build:all && yalc push`
|
|
90
|
+
|
|
77
91
|
### Process for pull requests and publishing releases
|
|
78
92
|
|
|
79
93
|
1. `feature/*` and `bugfix/*` branches are merged into `develop` via pull request
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.minimapNodeColor = exports.minimapNodeClassName = exports.MiniMap = exports.edgeTypes = exports.EdgeTools = exports.EdgeStep = exports.EdgeDefault = exports.nodeTypes = exports.NodeTools = exports.NodeDefault = void 0;
|
|
3
|
+
exports.minimapNodeColor = exports.minimapNodeClassName = exports.MiniMap = exports.edgeTypes = exports.EdgeTools = exports.EdgeStep = exports.EdgeDefault = exports.nodeTypes = exports.NodeTools = exports.NodeContentExtension = exports.NodeContent = exports.NodeDefault = void 0;
|
|
4
4
|
var NodeDefault_1 = require("./nodes/NodeDefault");
|
|
5
5
|
Object.defineProperty(exports, "NodeDefault", { enumerable: true, get: function () { return NodeDefault_1.NodeDefault; } });
|
|
6
|
+
var NodeContent_1 = require("./nodes/NodeContent");
|
|
7
|
+
Object.defineProperty(exports, "NodeContent", { enumerable: true, get: function () { return NodeContent_1.NodeContent; } });
|
|
8
|
+
var NodeContentExtension_1 = require("./nodes/NodeContentExtension");
|
|
9
|
+
Object.defineProperty(exports, "NodeContentExtension", { enumerable: true, get: function () { return NodeContentExtension_1.NodeContentExtension; } });
|
|
6
10
|
var NodeTools_1 = require("./nodes/NodeTools");
|
|
7
11
|
Object.defineProperty(exports, "NodeTools", { enumerable: true, get: function () { return NodeTools_1.NodeTools; } });
|
|
8
12
|
var nodeTypes_1 = require("./nodes/nodeTypes");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/extensions/react-flow/index.ts"],"names":[],"mappings":";;;AAAA,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,6CAA4C;AAAnC,oGAAA,QAAQ,OAAA;AACjB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,6CAA4C;AAAnC,kGAAA,OAAO,OAAA;AAChB,yCAAyE;AAAhE,6GAAA,oBAAoB,OAAA;AAAE,yGAAA,gBAAgB,OAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/extensions/react-flow/index.ts"],"names":[],"mappings":";;;AAAA,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,qEAAoE;AAA3D,4HAAA,oBAAoB,OAAA;AAC7B,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,6CAA4C;AAAnC,oGAAA,QAAQ,OAAA;AACjB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,6CAA4C;AAAnC,kGAAA,OAAO,OAAA;AAChB,yCAAyE;AAAhE,6GAAA,oBAAoB,OAAA;AAAE,yGAAA,gBAAgB,OAAA"}
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.minimapNodeColor = exports.minimapNodeClassName = void 0;
|
|
4
4
|
const constants_1 = require("./../../../configuration/constants");
|
|
5
|
-
const
|
|
5
|
+
const NodeContent_1 = require("./../nodes/NodeContent");
|
|
6
6
|
const minimapNodeClassName = (node) => {
|
|
7
7
|
var _a, _b, _c;
|
|
8
8
|
const typeClass = `${constants_1.CLASSPREFIX}-graphviz__minimap__node--` + node.type;
|
|
9
|
-
const stateClass = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.highlightedState) ? (0,
|
|
9
|
+
const stateClass = ((_a = node.data) === null || _a === void 0 ? void 0 : _a.highlightedState) ? (0, NodeContent_1.gethighlightedStateClasses)(node.data.highlightedState, `${constants_1.CLASSPREFIX}-graphviz__minimap__node`) : "";
|
|
10
10
|
const customColor = ((_c = (_b = node.data) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.borderColor) ? `${constants_1.CLASSPREFIX}-graphviz__minimap__node--customcolor` : "";
|
|
11
11
|
return typeClass + (stateClass ? " " + stateClass : "") + (customColor ? " " + customColor : "");
|
|
12
12
|
};
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.NodeContent = exports.gethighlightedStateClasses = void 0;
|
|
18
|
+
const react_1 = __importDefault(require("react"));
|
|
19
|
+
const react_flow_renderer_1 = require("react-flow-renderer");
|
|
20
|
+
const index_1 = require("../../../index");
|
|
21
|
+
const constants_1 = require("../../../configuration/constants");
|
|
22
|
+
const HandleDefault_1 = require("./../handles/HandleDefault");
|
|
23
|
+
const defaultHandles = [
|
|
24
|
+
{ type: "target" },
|
|
25
|
+
{ type: "source" },
|
|
26
|
+
];
|
|
27
|
+
const getDefaultMinimalTooltipData = (node) => {
|
|
28
|
+
var _a, _b, _c, _d;
|
|
29
|
+
return {
|
|
30
|
+
label: (_a = node.data) === null || _a === void 0 ? void 0 : _a.label,
|
|
31
|
+
content: (_b = node.data) === null || _b === void 0 ? void 0 : _b.content,
|
|
32
|
+
iconName: (_c = node.data) === null || _c === void 0 ? void 0 : _c.iconName,
|
|
33
|
+
depiction: (_d = node.data) === null || _d === void 0 ? void 0 : _d.depiction,
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
const addHandles = (handles, position, posDirection, isConnectable, nodeStyle) => {
|
|
37
|
+
return handles[position].map((handle, idx) => {
|
|
38
|
+
var _a, _b;
|
|
39
|
+
const { className, style = {}, category, } = handle;
|
|
40
|
+
const styleAdditions = {
|
|
41
|
+
color: (_a = nodeStyle.borderColor) !== null && _a !== void 0 ? _a : undefined
|
|
42
|
+
};
|
|
43
|
+
styleAdditions[posDirection] = (100 / (handles[position].length + 1) * (idx + 1)) + "%";
|
|
44
|
+
const handleProperties = Object.assign(Object.assign({}, handle), {
|
|
45
|
+
position: (_b = handle.position) !== null && _b !== void 0 ? _b : position,
|
|
46
|
+
style: Object.assign(Object.assign({}, style), styleAdditions),
|
|
47
|
+
posdirection: posDirection,
|
|
48
|
+
isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
|
|
49
|
+
className: !!category ? (className ? className + " " : "") + (0, exports.gethighlightedStateClasses)(category, `${constants_1.CLASSPREFIX}-graphviz__handle`) : className,
|
|
50
|
+
});
|
|
51
|
+
return (react_1.default.createElement(MemoHandler, Object.assign({}, handleProperties, { key: "handle" + idx })));
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
const imgWithTooltip = (imgEl, tooltipText) => {
|
|
55
|
+
if (!!tooltipText) {
|
|
56
|
+
return react_1.default.createElement(index_1.Tooltip, { content: tooltipText },
|
|
57
|
+
react_1.default.createElement("span", null, imgEl));
|
|
58
|
+
}
|
|
59
|
+
return imgEl;
|
|
60
|
+
};
|
|
61
|
+
const gethighlightedStateClasses = (state, baseClassName) => {
|
|
62
|
+
let hightlights = typeof state === "string" ? [state] : state;
|
|
63
|
+
//@ts-ignore
|
|
64
|
+
return hightlights.map(item => `${baseClassName}--highlight-${item}`).join(' ');
|
|
65
|
+
};
|
|
66
|
+
exports.gethighlightedStateClasses = gethighlightedStateClasses;
|
|
67
|
+
const MemoHandler = react_1.default.memo((props) => react_1.default.createElement(HandleDefault_1.HandleDefault, Object.assign({}, props)), (prev, next) => {
|
|
68
|
+
const styleHasChanged = prev.style[prev.posdirection] === next.style[next.posdirection];
|
|
69
|
+
return styleHasChanged;
|
|
70
|
+
});
|
|
71
|
+
/**
|
|
72
|
+
* The `NodeContent` element manages the main view of how a node is displaying which content.
|
|
73
|
+
* This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
|
|
74
|
+
*/
|
|
75
|
+
const NodeContent = (_a) => {
|
|
76
|
+
var { iconName, depiction, typeLabel, label, showExecutionButtons = true, executionButtons, menuButtons, content, contentExtension, size = "small", minimalShape = "circular", highlightedState, handles = defaultHandles, adaptHeightForHandleMinCount, adaptSizeIncrement = 15, getMinimalTooltipData = getDefaultMinimalTooltipData, style = {}, showUnconnectableHandles = false, animated = false,
|
|
77
|
+
// forwarded props
|
|
78
|
+
targetPosition = react_flow_renderer_1.Position.Left, sourcePosition = react_flow_renderer_1.Position.Right, isConnectable = true, selected,
|
|
79
|
+
// businessData is just being ignored
|
|
80
|
+
businessData } = _a,
|
|
81
|
+
// other props for DOM element
|
|
82
|
+
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"]);
|
|
83
|
+
const handleStack = {};
|
|
84
|
+
handleStack[react_flow_renderer_1.Position.Top] = [];
|
|
85
|
+
handleStack[react_flow_renderer_1.Position.Right] = [];
|
|
86
|
+
handleStack[react_flow_renderer_1.Position.Bottom] = [];
|
|
87
|
+
handleStack[react_flow_renderer_1.Position.Left] = [];
|
|
88
|
+
if (handles.length > 0) {
|
|
89
|
+
handles.forEach(handle => {
|
|
90
|
+
if (!!handle.position) {
|
|
91
|
+
handleStack[handle.position].push(handle);
|
|
92
|
+
}
|
|
93
|
+
else if (handle.category === "configuration") {
|
|
94
|
+
handleStack[react_flow_renderer_1.Position.Top].push(handle);
|
|
95
|
+
}
|
|
96
|
+
else {
|
|
97
|
+
if (handle.type === "target") {
|
|
98
|
+
handleStack[targetPosition].push(handle);
|
|
99
|
+
}
|
|
100
|
+
if (handle.type === "source") {
|
|
101
|
+
handleStack[sourcePosition].push(handle);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
const styleExpandDimensions = {};
|
|
107
|
+
if (typeof adaptHeightForHandleMinCount !== "undefined" &&
|
|
108
|
+
(minimalShape === "none" || !!selected) &&
|
|
109
|
+
adaptSizeIncrement && (handleStack[react_flow_renderer_1.Position.Left].length >= adaptHeightForHandleMinCount ||
|
|
110
|
+
handleStack[react_flow_renderer_1.Position.Right].length >= adaptHeightForHandleMinCount)) {
|
|
111
|
+
const minHeightLeft = handleStack[react_flow_renderer_1.Position.Left].length * adaptSizeIncrement;
|
|
112
|
+
const minHeightRight = handleStack[react_flow_renderer_1.Position.Right].length * adaptSizeIncrement;
|
|
113
|
+
styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
|
|
114
|
+
}
|
|
115
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
116
|
+
react_1.default.createElement("section", Object.assign({}, otherProps, { style: Object.assign(Object.assign({}, style), styleExpandDimensions), className: `${constants_1.CLASSPREFIX}-graphviz__node` +
|
|
117
|
+
` ${constants_1.CLASSPREFIX}-graphviz__node--${size}` +
|
|
118
|
+
` ${constants_1.CLASSPREFIX}-graphviz__node--minimal-${minimalShape}` +
|
|
119
|
+
(!!highlightedState ? " " + (0, exports.gethighlightedStateClasses)(highlightedState, `${constants_1.CLASSPREFIX}-graphviz__node`) : "") +
|
|
120
|
+
(animated ? ` ${constants_1.CLASSPREFIX}-graphviz__node--animated` : "") +
|
|
121
|
+
(showUnconnectableHandles === false ? ` ${constants_1.CLASSPREFIX}-graphviz__node--hidehandles` : "") }),
|
|
122
|
+
react_1.default.createElement("header", { className: `${constants_1.CLASSPREFIX}-graphviz__node__header` },
|
|
123
|
+
(!!iconName || !!depiction) && (react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-graphviz__node__header-depiction` },
|
|
124
|
+
!!depiction && imgWithTooltip(react_1.default.createElement("img", { src: depiction, alt: "" }), (minimalShape === "none" || selected) ? typeLabel : undefined),
|
|
125
|
+
(!!iconName && !depiction) && react_1.default.createElement(index_1.Icon, { name: iconName, tooltipText: (minimalShape === "none" || selected) ? typeLabel : undefined }))),
|
|
126
|
+
react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-graphviz__node__header-label`, title: label }, label),
|
|
127
|
+
(menuButtons || (showExecutionButtons && executionButtons)) && (react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-graphviz__node__header-menu` },
|
|
128
|
+
(showExecutionButtons && typeof executionButtons === "function") ? executionButtons() : null, menuButtons !== null && menuButtons !== void 0 ? menuButtons : null))),
|
|
129
|
+
content && (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-graphviz__node__content` }, content)),
|
|
130
|
+
contentExtension && (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-graphviz__node__footer` }, contentExtension))),
|
|
131
|
+
!!handles && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
132
|
+
addHandles(handleStack, react_flow_renderer_1.Position.Top, "left", isConnectable, style),
|
|
133
|
+
addHandles(handleStack, react_flow_renderer_1.Position.Right, "top", isConnectable, style),
|
|
134
|
+
addHandles(handleStack, react_flow_renderer_1.Position.Bottom, "left", isConnectable, style),
|
|
135
|
+
addHandles(handleStack, react_flow_renderer_1.Position.Left, "top", isConnectable, style)))));
|
|
136
|
+
};
|
|
137
|
+
exports.NodeContent = NodeContent;
|
|
138
|
+
//# 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,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.NodeContentExtension = void 0;
|
|
18
|
+
const react_1 = __importDefault(require("react"));
|
|
19
|
+
const constants_1 = require("../../../configuration/constants");
|
|
20
|
+
const IconButton_1 = __importDefault(require("../../../components/Icon/IconButton"));
|
|
21
|
+
/**
|
|
22
|
+
* Displays an content area that can be attached to `NodeContent` elements.
|
|
23
|
+
*/
|
|
24
|
+
const NodeContentExtension = (_a) => {
|
|
25
|
+
var { children, isExpanded = false, onToggle = undefined, actionButtons, tooltipExpand = "Show more", tooltipReduce = "Show less" } = _a,
|
|
26
|
+
// other props for DOM element
|
|
27
|
+
otherProps = __rest(_a, ["children", "isExpanded", "onToggle", "actionButtons", "tooltipExpand", "tooltipReduce"]);
|
|
28
|
+
// always expand element if there is no handler to manage it
|
|
29
|
+
const expanded = onToggle ? isExpanded : true;
|
|
30
|
+
return (react_1.default.createElement("div", Object.assign({}, otherProps, { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension` +
|
|
31
|
+
(expanded ? ` ${constants_1.CLASSPREFIX}-graphviz__node__extension--expanded` : "") }),
|
|
32
|
+
!expanded && onToggle && (react_1.default.createElement(IconButton_1.default, { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension-expandbutton`, name: "item-vertmenu", text: tooltipExpand, onClick: (e) => { onToggle(e, expanded); } })),
|
|
33
|
+
expanded && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
34
|
+
react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension-body` }, children),
|
|
35
|
+
react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension-actions` },
|
|
36
|
+
react_1.default.createElement(IconButton_1.default, { className: `${constants_1.CLASSPREFIX}-graphviz__node__extension-reducebutton`, name: "toggler-showless", text: tooltipReduce, onClick: onToggle ? (e) => { onToggle(e, expanded); } : undefined }),
|
|
37
|
+
actionButtons)))));
|
|
38
|
+
};
|
|
39
|
+
exports.NodeContentExtension = NodeContentExtension;
|
|
40
|
+
//# 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,kDAA0B;AAC1B,gEAAyE;AACzE,qFAA6D;AA6B7D;;GAEG;AACI,MAAM,oBAAoB,GAAG,CAAC,EAST,EAAE,EAAE;QATK,EACjC,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,SAAS,EACpB,aAAa,EACb,aAAa,GAAG,WAAW,EAC3B,aAAa,GAAG,WAAW,OAGH;IAFxB,8BAA8B;IAC3B,UAAU,cARoB,yFASpC,CADgB;IAGb,4DAA4D;IAC5D,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAE9C,OAAO,CACH,uDACQ,UAAU,IACd,SAAS,EACL,GAAG,uBAAM,4BAA4B;YACrC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,uBAAM,sCAAsC,CAAC,CAAC,CAAC,EAAE,CAAC;QAIlE,CAAC,QAAQ,IAAI,QAAQ,IAAI,CACrB,8BAAC,oBAAU,IACP,SAAS,EAAE,GAAG,uBAAM,yCAAyC,EAC7D,IAAI,EAAC,eAAe,EACpB,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,GAC5C,CACL;QAGD,QAAQ,IAAI,CACR;YACI,uCAAK,SAAS,EAAE,GAAG,uBAAM,iCAAiC,IACrD,QAAQ,CACP;YACN,uCAAK,SAAS,EAAE,GAAG,uBAAM,oCAAoC;gBACzD,8BAAC,oBAAU,IACP,SAAS,EAAE,GAAG,uBAAM,yCAAyC,EAC7D,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,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;AApDY,QAAA,oBAAoB,wBAoDhC"}
|
|
@@ -18,72 +18,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
18
18
|
__setModuleDefault(result, mod);
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
22
|
-
var t = {};
|
|
23
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
24
|
-
t[p] = s[p];
|
|
25
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
26
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
27
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
28
|
-
t[p[i]] = s[p[i]];
|
|
29
|
-
}
|
|
30
|
-
return t;
|
|
31
|
-
};
|
|
32
21
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
33
|
-
exports.
|
|
22
|
+
exports.NodeDefault = void 0;
|
|
34
23
|
const react_1 = __importStar(require("react"));
|
|
35
24
|
const react_flow_renderer_1 = require("react-flow-renderer");
|
|
36
|
-
const constants_1 = require("../../../configuration/constants");
|
|
37
25
|
const index_1 = require("../../../index");
|
|
38
|
-
const
|
|
39
|
-
const defaultHandles = [
|
|
40
|
-
{ type: "target" },
|
|
41
|
-
{ type: "source" },
|
|
42
|
-
];
|
|
43
|
-
const MemoHandler = react_1.default.memo((props) => react_1.default.createElement(HandleDefault_1.HandleDefault, Object.assign({}, props)), (prev, next) => {
|
|
44
|
-
const styleHasChanged = prev.style[prev.posdirection] === next.style[next.posdirection];
|
|
45
|
-
return styleHasChanged;
|
|
46
|
-
});
|
|
47
|
-
const addHandles = (handles, position, posDirection, isConnectable, nodeStyle) => {
|
|
48
|
-
return handles[position].map((handle, idx) => {
|
|
49
|
-
var _a, _b;
|
|
50
|
-
const { className, style = {}, category, } = handle;
|
|
51
|
-
const styleAdditions = {
|
|
52
|
-
color: (_a = nodeStyle.borderColor) !== null && _a !== void 0 ? _a : undefined
|
|
53
|
-
};
|
|
54
|
-
styleAdditions[posDirection] = (100 / (handles[position].length + 1) * (idx + 1)) + "%";
|
|
55
|
-
const handleProperties = Object.assign(Object.assign({}, handle), {
|
|
56
|
-
position: (_b = handle.position) !== null && _b !== void 0 ? _b : position,
|
|
57
|
-
style: Object.assign(Object.assign({}, style), styleAdditions),
|
|
58
|
-
posdirection: posDirection,
|
|
59
|
-
isConnectable: typeof handle.isConnectable !== "undefined" ? handle.isConnectable : isConnectable,
|
|
60
|
-
className: !!category ? (className ? className + " " : "") + (0, exports.gethighlightedStateClasses)(category, `${constants_1.CLASSPREFIX}-graphviz__handle`) : className,
|
|
61
|
-
});
|
|
62
|
-
return (react_1.default.createElement(MemoHandler, Object.assign({}, handleProperties, { key: "handle" + idx })));
|
|
63
|
-
});
|
|
64
|
-
};
|
|
65
|
-
const getDefaultMinimalTooltipData = (node) => {
|
|
66
|
-
var _a, _b, _c, _d;
|
|
67
|
-
return {
|
|
68
|
-
label: (_a = node.data) === null || _a === void 0 ? void 0 : _a.label,
|
|
69
|
-
content: (_b = node.data) === null || _b === void 0 ? void 0 : _b.content,
|
|
70
|
-
iconName: (_c = node.data) === null || _c === void 0 ? void 0 : _c.iconName,
|
|
71
|
-
depiction: (_d = node.data) === null || _d === void 0 ? void 0 : _d.depiction,
|
|
72
|
-
};
|
|
73
|
-
};
|
|
74
|
-
const imgWithTooltip = (imgEl, tooltipText) => {
|
|
75
|
-
if (!!tooltipText) {
|
|
76
|
-
return react_1.default.createElement(index_1.Tooltip, { content: tooltipText },
|
|
77
|
-
react_1.default.createElement("span", null, imgEl));
|
|
78
|
-
}
|
|
79
|
-
return imgEl;
|
|
80
|
-
};
|
|
81
|
-
const gethighlightedStateClasses = (state, baseClassName) => {
|
|
82
|
-
let hightlights = typeof state === "string" ? [state] : state;
|
|
83
|
-
//@ts-ignore
|
|
84
|
-
return hightlights.map(item => `${baseClassName}--highlight-${item}`).join(' ');
|
|
85
|
-
};
|
|
86
|
-
exports.gethighlightedStateClasses = gethighlightedStateClasses;
|
|
26
|
+
const NodeContent_1 = require("./NodeContent");
|
|
87
27
|
/**
|
|
88
28
|
* The `NodeDefault` element manages the display of React-Flow nodes.
|
|
89
29
|
* 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.
|
|
@@ -91,7 +31,7 @@ exports.gethighlightedStateClasses = gethighlightedStateClasses;
|
|
|
91
31
|
*/
|
|
92
32
|
exports.NodeDefault = (0, react_1.memo)((node) => {
|
|
93
33
|
const { data, targetPosition = react_flow_renderer_1.Position.Left, sourcePosition = react_flow_renderer_1.Position.Right, isConnectable = true, selected } = node;
|
|
94
|
-
const nodeEl = react_1.default.createElement(
|
|
34
|
+
const nodeEl = react_1.default.createElement(NodeContent_1.NodeContent, Object.assign({}, Object.assign(Object.assign({}, data), { targetPosition, sourcePosition, isConnectable, selected })));
|
|
95
35
|
if (!selected && (data === null || data === void 0 ? void 0 : data.minimalShape) !== "none" && !!(data === null || data === void 0 ? void 0 : data.getMinimalTooltipData)) {
|
|
96
36
|
const tooltipData = data === null || data === void 0 ? void 0 : data.getMinimalTooltipData(node);
|
|
97
37
|
if (!!tooltipData.label || !!tooltipData.content) {
|
|
@@ -102,71 +42,4 @@ exports.NodeDefault = (0, react_1.memo)((node) => {
|
|
|
102
42
|
}
|
|
103
43
|
return nodeEl;
|
|
104
44
|
});
|
|
105
|
-
/**
|
|
106
|
-
* The `NodeContent` element manages the main view of how a node is displaying which content.
|
|
107
|
-
* This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
|
|
108
|
-
*/
|
|
109
|
-
const NodeContent = (_a) => {
|
|
110
|
-
var { iconName, depiction, typeLabel, label, showExecutionButtons = true, executionButtons, menuButtons, content, contentExtension, size = "small", minimalShape = "circular", highlightedState, handles = defaultHandles, adaptHeightForHandleMinCount, adaptSizeIncrement = 15, getMinimalTooltipData = getDefaultMinimalTooltipData, style = {}, showUnconnectableHandles = false, animated = false,
|
|
111
|
-
// forwarded props
|
|
112
|
-
targetPosition = react_flow_renderer_1.Position.Left, sourcePosition = react_flow_renderer_1.Position.Right, isConnectable = true, selected,
|
|
113
|
-
// businessData is just being ignored
|
|
114
|
-
businessData } = _a,
|
|
115
|
-
// other props for DOM element
|
|
116
|
-
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"]);
|
|
117
|
-
const handleStack = {};
|
|
118
|
-
handleStack[react_flow_renderer_1.Position.Top] = [];
|
|
119
|
-
handleStack[react_flow_renderer_1.Position.Right] = [];
|
|
120
|
-
handleStack[react_flow_renderer_1.Position.Bottom] = [];
|
|
121
|
-
handleStack[react_flow_renderer_1.Position.Left] = [];
|
|
122
|
-
if (handles.length > 0) {
|
|
123
|
-
handles.forEach(handle => {
|
|
124
|
-
if (!!handle.position) {
|
|
125
|
-
handleStack[handle.position].push(handle);
|
|
126
|
-
}
|
|
127
|
-
else if (handle.category === "configuration") {
|
|
128
|
-
handleStack[react_flow_renderer_1.Position.Top].push(handle);
|
|
129
|
-
}
|
|
130
|
-
else {
|
|
131
|
-
if (handle.type === "target") {
|
|
132
|
-
handleStack[targetPosition].push(handle);
|
|
133
|
-
}
|
|
134
|
-
if (handle.type === "source") {
|
|
135
|
-
handleStack[sourcePosition].push(handle);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
}
|
|
140
|
-
const styleExpandDimensions = {};
|
|
141
|
-
if (typeof adaptHeightForHandleMinCount !== "undefined" &&
|
|
142
|
-
(minimalShape === "none" || !!selected) &&
|
|
143
|
-
adaptSizeIncrement && (handleStack[react_flow_renderer_1.Position.Left].length >= adaptHeightForHandleMinCount ||
|
|
144
|
-
handleStack[react_flow_renderer_1.Position.Right].length >= adaptHeightForHandleMinCount)) {
|
|
145
|
-
const minHeightLeft = handleStack[react_flow_renderer_1.Position.Left].length * adaptSizeIncrement;
|
|
146
|
-
const minHeightRight = handleStack[react_flow_renderer_1.Position.Right].length * adaptSizeIncrement;
|
|
147
|
-
styleExpandDimensions["minHeight"] = Math.max(minHeightLeft, minHeightRight);
|
|
148
|
-
}
|
|
149
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
150
|
-
react_1.default.createElement("section", Object.assign({}, otherProps, { style: Object.assign(Object.assign({}, style), styleExpandDimensions), className: `${constants_1.CLASSPREFIX}-graphviz__node` +
|
|
151
|
-
` ${constants_1.CLASSPREFIX}-graphviz__node--${size}` +
|
|
152
|
-
` ${constants_1.CLASSPREFIX}-graphviz__node--minimal-${minimalShape}` +
|
|
153
|
-
(!!highlightedState ? " " + (0, exports.gethighlightedStateClasses)(highlightedState, `${constants_1.CLASSPREFIX}-graphviz__node`) : "") +
|
|
154
|
-
(animated ? ` ${constants_1.CLASSPREFIX}-graphviz__node--animated` : "") +
|
|
155
|
-
(showUnconnectableHandles === false ? ` ${constants_1.CLASSPREFIX}-graphviz__node--hidehandles` : "") }),
|
|
156
|
-
react_1.default.createElement("header", { className: `${constants_1.CLASSPREFIX}-graphviz__node__header` },
|
|
157
|
-
(!!iconName || !!depiction) && (react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-graphviz__node__header-depiction` },
|
|
158
|
-
!!depiction && imgWithTooltip(react_1.default.createElement("img", { src: depiction, alt: "" }), (minimalShape === "none" || selected) ? typeLabel : undefined),
|
|
159
|
-
(!!iconName && !depiction) && react_1.default.createElement(index_1.Icon, { name: iconName, tooltipText: (minimalShape === "none" || selected) ? typeLabel : undefined }))),
|
|
160
|
-
react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-graphviz__node__header-label`, title: label }, label),
|
|
161
|
-
(menuButtons || (showExecutionButtons && executionButtons)) && (react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-graphviz__node__header-menu` },
|
|
162
|
-
(showExecutionButtons && typeof executionButtons === "function") ? executionButtons() : null, menuButtons !== null && menuButtons !== void 0 ? menuButtons : null))),
|
|
163
|
-
content && (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-graphviz__node__content` }, content)),
|
|
164
|
-
contentExtension && (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-graphviz__node__footer` }, contentExtension))),
|
|
165
|
-
!!handles && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
166
|
-
addHandles(handleStack, react_flow_renderer_1.Position.Top, "left", isConnectable, style),
|
|
167
|
-
addHandles(handleStack, react_flow_renderer_1.Position.Right, "top", isConnectable, style),
|
|
168
|
-
addHandles(handleStack, react_flow_renderer_1.Position.Bottom, "left", isConnectable, style),
|
|
169
|
-
addHandles(handleStack, react_flow_renderer_1.Position.Left, "top", isConnectable, style)))));
|
|
170
|
-
};
|
|
171
|
-
exports.NodeContent = NodeContent;
|
|
172
45
|
//# 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,+CAAoC;AACpC,6DAG6B;AAC7B,0CAAyC;AACzC,+CAA8D;AAU9D;;;;GAIG;AACU,QAAA,WAAW,GAAG,IAAA,YAAI,EAC3B,CAAC,IAAoB,EAAE,EAAE;IACrB,MAAM,EACF,IAAI,EACJ,cAAc,GAAG,8BAAQ,CAAC,IAAI,EAC9B,cAAc,GAAG,8BAAQ,CAAC,KAAK,EAC/B,aAAa,GAAG,IAAI,EACpB,QAAQ,EACX,GAAG,IAAI,CAAC;IAET,MAAM,MAAM,GAAG,8BAAC,yBAAW,oDAAS,IAAI,KAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,QAAQ,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,MAAM,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,8BAAC,eAAO,IACJ,OAAO,EAAE,CACL;oBACK,WAAW,CAAC,KAAK,IAAI,2CAAM,WAAW,CAAC,KAAK,CAAO;oBACnD,WAAW,CAAC,OAAO,IAAI,2CAAM,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";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/extensions/react-flow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/extensions/react-flow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CLASSPREFIX as eccgui } from "./../../../configuration/constants";
|
|
2
|
-
import { gethighlightedStateClasses } from "./../nodes/
|
|
2
|
+
import { gethighlightedStateClasses } from "./../nodes/NodeContent";
|
|
3
3
|
export var minimapNodeClassName = function (node) {
|
|
4
4
|
var _a, _b, _c;
|
|
5
5
|
var typeClass = eccgui + "-graphviz__minimap__node--" + node.type;
|