flow-lib-creomnia 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -12
- package/lib/assets/icons/ChoiceNodeIcon.svg +16 -16
- package/lib/assets/icons/LeftArrowIcon.svg +3 -3
- package/lib/assets/icons/ParallelIcon.svg +5 -5
- package/lib/assets/icons/RightArrowIcon.svg +3 -3
- package/lib/assets/icons/flowIcon.svg +7 -7
- package/lib/modules/common/components/ZoomToolbar/styled.js +7 -7
- package/lib/modules/connection/components/AddButton/styled.js +26 -26
- package/lib/modules/connection/components/BaseConnection/styled.js +16 -16
- package/lib/modules/connection/components/ConnectionWithButton/index.js +4 -3
- package/lib/modules/connection/components/ConnectionWithButton/styled.js +37 -37
- package/lib/modules/connection/types/index.d.ts +3 -0
- package/lib/modules/flow/components/FlowSandbox/index.d.ts +2 -0
- package/lib/modules/flow/components/FlowSandbox/index.js +2 -2
- package/lib/modules/flow/components/FlowSandbox/styled.js +22 -22
- package/lib/modules/flow/components/NodesFlow/index.js +2 -2
- package/lib/modules/flow/components/Space/styled.js +8 -8
- package/lib/modules/flow/types/index.d.ts +3 -0
- package/lib/modules/node/components/BaseNode/styled.js +83 -83
- package/lib/modules/node/components/ChoiseNode/styled.js +27 -27
- package/lib/modules/node/components/EndNode/styled.js +10 -10
- package/lib/modules/node/components/HubNode/styled.js +5 -5
- package/lib/modules/node/components/NodesMenu/index.d.ts +2 -0
- package/lib/modules/node/components/NodesMenu/index.js +10 -2
- package/lib/modules/node/components/NodesMenu/styled.d.ts +3 -0
- package/lib/modules/node/components/NodesMenu/styled.js +57 -46
- package/lib/modules/node/components/ParallelNode/styled.js +9 -9
- package/lib/modules/node/components/StartNode/styled.js +10 -10
- package/lib/modules/node/contexts/SettingsContext/styled.js +30 -30
- package/package.json +65 -65
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
# Nodes flow
|
|
2
|
-
|
|
3
|
-
## Components
|
|
4
|
-
|
|
5
|
-
`<NodesFlow />`
|
|
6
|
-
|
|
7
|
-
Props:
|
|
8
|
-
|
|
9
|
-
- `nodes` - `NodeType[]`
|
|
10
|
-
- `menuTabs` - `MenuTabType[]`
|
|
11
|
-
- `addNewNodeCallback` - `AddNewNodeCallbackType`
|
|
12
|
-
- `addButtonColor`(optional) - `string`
|
|
1
|
+
# Nodes flow
|
|
2
|
+
|
|
3
|
+
## Components
|
|
4
|
+
|
|
5
|
+
`<NodesFlow />`
|
|
6
|
+
|
|
7
|
+
Props:
|
|
8
|
+
|
|
9
|
+
- `nodes` - `NodeType[]`
|
|
10
|
+
- `menuTabs` - `MenuTabType[]`
|
|
11
|
+
- `addNewNodeCallback` - `AddNewNodeCallbackType`
|
|
12
|
+
- `addButtonColor`(optional) - `string`
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
<svg width="376" height="132" viewBox="0 0 376 132" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g filter="url(#filter0_d_4646_869)">
|
|
3
|
-
<path d="M63.5925 96C61.3074 96 59.1314 95.0228 57.6133 93.3149L32.7244 65.3149C30.0301 62.2838 30.0301 57.7162 32.7244 54.6851L57.6133 26.6851C59.1314 24.9772 61.3074 24 63.5925 24H312.407C314.693 24 316.869 24.9772 318.387 26.6851L343.276 54.6851C345.97 57.7162 345.97 62.2838 343.276 65.3149L318.387 93.3149C316.869 95.0228 314.693 96 312.407 96H63.5925Z"/>
|
|
4
|
-
</g>
|
|
5
|
-
<defs>
|
|
6
|
-
<filter id="filter0_d_4646_869" x="0.703125" y="0" width="374.594" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
7
|
-
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
8
|
-
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
9
|
-
<feOffset dy="6"/>
|
|
10
|
-
<feGaussianBlur stdDeviation="15"/>
|
|
11
|
-
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
|
|
12
|
-
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4646_869"/>
|
|
13
|
-
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4646_869" result="shape"/>
|
|
14
|
-
</filter>
|
|
15
|
-
</defs>
|
|
16
|
-
</svg>
|
|
1
|
+
<svg width="376" height="132" viewBox="0 0 376 132" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g filter="url(#filter0_d_4646_869)">
|
|
3
|
+
<path d="M63.5925 96C61.3074 96 59.1314 95.0228 57.6133 93.3149L32.7244 65.3149C30.0301 62.2838 30.0301 57.7162 32.7244 54.6851L57.6133 26.6851C59.1314 24.9772 61.3074 24 63.5925 24H312.407C314.693 24 316.869 24.9772 318.387 26.6851L343.276 54.6851C345.97 57.7162 345.97 62.2838 343.276 65.3149L318.387 93.3149C316.869 95.0228 314.693 96 312.407 96H63.5925Z"/>
|
|
4
|
+
</g>
|
|
5
|
+
<defs>
|
|
6
|
+
<filter id="filter0_d_4646_869" x="0.703125" y="0" width="374.594" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
7
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
8
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
9
|
+
<feOffset dy="6"/>
|
|
10
|
+
<feGaussianBlur stdDeviation="15"/>
|
|
11
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
|
|
12
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4646_869"/>
|
|
13
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4646_869" result="shape"/>
|
|
14
|
+
</filter>
|
|
15
|
+
</defs>
|
|
16
|
+
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path id="triangle 40x80" d="M1.82843 13.8284L8.17157 20.1716C10.6914 22.6914 15 20.9068 15 17.3431L15 4.65686C15 1.09324 10.6914 -0.691433 8.17158 1.82843L1.82843 8.17157C0.266331 9.73367 0.266329 12.2663 1.82843 13.8284Z" fill="#16B364"/>
|
|
3
|
-
</svg>
|
|
1
|
+
<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path id="triangle 40x80" d="M1.82843 13.8284L8.17157 20.1716C10.6914 22.6914 15 20.9068 15 17.3431L15 4.65686C15 1.09324 10.6914 -0.691433 8.17158 1.82843L1.82843 8.17157C0.266331 9.73367 0.266329 12.2663 1.82843 13.8284Z" fill="#16B364"/>
|
|
3
|
+
</svg>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g id="addons/parallel">
|
|
3
|
-
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.0007 2.66683C12.3688 2.66683 12.6673 2.36835 12.6673 2.00016C12.6673 1.63197 12.3688 1.3335 12.0007 1.3335C11.6325 1.3335 11.334 1.63197 11.334 2.00016C11.334 2.36835 11.6325 2.66683 12.0007 2.66683ZM12.6673 4.00016C12.6673 4.36835 12.3688 4.66683 12.0007 4.66683C11.6325 4.66683 11.334 4.36835 11.334 4.00016C11.334 3.63197 11.6325 3.3335 12.0007 3.3335C12.3688 3.3335 12.6673 3.63197 12.6673 4.00016ZM5.33398 6.00016C5.33398 5.63197 5.03551 5.3335 4.66732 5.3335C4.29913 5.3335 4.00065 5.63197 4.00065 6.00016V12.3907L2.47211 10.8621L1.5293 11.805L4.66737 14.943L7.80544 11.805L6.86263 10.8621L5.33398 12.3908V6.00016ZM12.6673 6.00016C12.6673 5.63197 12.3688 5.3335 12.0007 5.3335C11.6325 5.3335 11.334 5.63197 11.334 6.00016V12.3907L9.80544 10.8621L8.86263 11.805L12.0007 14.943L15.1388 11.805L14.196 10.8621L12.6673 12.3908V6.00016ZM5.33398 2.00016C5.33398 2.36835 5.03551 2.66683 4.66732 2.66683C4.29913 2.66683 4.00065 2.36835 4.00065 2.00016C4.00065 1.63197 4.29913 1.3335 4.66732 1.3335C5.03551 1.3335 5.33398 1.63197 5.33398 2.00016ZM4.66732 4.66683C5.03551 4.66683 5.33398 4.36835 5.33398 4.00016C5.33398 3.63197 5.03551 3.3335 4.66732 3.3335C4.29913 3.3335 4.00065 3.63197 4.00065 4.00016C4.00065 4.36835 4.29913 4.66683 4.66732 4.66683Z" fill="white"/>
|
|
4
|
-
</g>
|
|
5
|
-
</svg>
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="addons/parallel">
|
|
3
|
+
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.0007 2.66683C12.3688 2.66683 12.6673 2.36835 12.6673 2.00016C12.6673 1.63197 12.3688 1.3335 12.0007 1.3335C11.6325 1.3335 11.334 1.63197 11.334 2.00016C11.334 2.36835 11.6325 2.66683 12.0007 2.66683ZM12.6673 4.00016C12.6673 4.36835 12.3688 4.66683 12.0007 4.66683C11.6325 4.66683 11.334 4.36835 11.334 4.00016C11.334 3.63197 11.6325 3.3335 12.0007 3.3335C12.3688 3.3335 12.6673 3.63197 12.6673 4.00016ZM5.33398 6.00016C5.33398 5.63197 5.03551 5.3335 4.66732 5.3335C4.29913 5.3335 4.00065 5.63197 4.00065 6.00016V12.3907L2.47211 10.8621L1.5293 11.805L4.66737 14.943L7.80544 11.805L6.86263 10.8621L5.33398 12.3908V6.00016ZM12.6673 6.00016C12.6673 5.63197 12.3688 5.3335 12.0007 5.3335C11.6325 5.3335 11.334 5.63197 11.334 6.00016V12.3907L9.80544 10.8621L8.86263 11.805L12.0007 14.943L15.1388 11.805L14.196 10.8621L12.6673 12.3908V6.00016ZM5.33398 2.00016C5.33398 2.36835 5.03551 2.66683 4.66732 2.66683C4.29913 2.66683 4.00065 2.36835 4.00065 2.00016C4.00065 1.63197 4.29913 1.3335 4.66732 1.3335C5.03551 1.3335 5.33398 1.63197 5.33398 2.00016ZM4.66732 4.66683C5.03551 4.66683 5.33398 4.36835 5.33398 4.00016C5.33398 3.63197 5.03551 3.3335 4.66732 3.3335C4.29913 3.3335 4.00065 3.63197 4.00065 4.00016C4.00065 4.36835 4.29913 4.66683 4.66732 4.66683Z" fill="white"/>
|
|
4
|
+
</g>
|
|
5
|
+
</svg>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path id="triangle 16x32" d="M13.1716 13.8284L6.82843 20.1716C4.30857 22.6914 -5.32687e-07 20.9068 -8.44229e-07 17.3431L-1.9533e-06 4.65686C-2.26484e-06 1.09324 4.30856 -0.691433 6.82842 1.82843L13.1716 8.17157C14.7337 9.73367 14.7337 12.2663 13.1716 13.8284Z" fill="#F04438"/>
|
|
3
|
-
</svg>
|
|
1
|
+
<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path id="triangle 16x32" d="M13.1716 13.8284L6.82843 20.1716C4.30857 22.6914 -5.32687e-07 20.9068 -8.44229e-07 17.3431L-1.9533e-06 4.65686C-2.26484e-06 1.09324 4.30856 -0.691433 6.82842 1.82843L13.1716 8.17157C14.7337 9.73367 14.7337 12.2663 13.1716 13.8284Z" fill="#F04438"/>
|
|
3
|
+
</svg>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M5 2C5 0.895431 5.89543 0 7 0C8.10457 0 9 0.895431 9 2C9 3.10457 8.10457 4 7 4C5.89543 4 5 3.10457 5 2Z" fill="#6C737F"/>
|
|
3
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9C0 7.34315 1.34315 6 3 6H11C12.6569 6 14 7.34315 14 9V11C14 12.6569 12.6569 14 11 14H3C1.34315 14 0 12.6569 0 11V9ZM3 8C2.44772 8 2 8.44772 2 9V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V9C12 8.44772 11.5523 8 11 8H3Z" fill="#6C737F"/>
|
|
4
|
-
<path d="M5 18C5 16.8954 5.89543 16 7 16C8.10457 16 9 16.8954 9 18C9 19.1046 8.10457 20 7 20C5.89543 20 5 19.1046 5 18Z" fill="#6C737F"/>
|
|
5
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7V3H8V7H6Z" fill="#6C737F"/>
|
|
6
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 18V13H8V18H6Z" fill="#6C737F"/>
|
|
7
|
-
</svg>
|
|
1
|
+
<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M5 2C5 0.895431 5.89543 0 7 0C8.10457 0 9 0.895431 9 2C9 3.10457 8.10457 4 7 4C5.89543 4 5 3.10457 5 2Z" fill="#6C737F"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9C0 7.34315 1.34315 6 3 6H11C12.6569 6 14 7.34315 14 9V11C14 12.6569 12.6569 14 11 14H3C1.34315 14 0 12.6569 0 11V9ZM3 8C2.44772 8 2 8.44772 2 9V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V9C12 8.44772 11.5523 8 11 8H3Z" fill="#6C737F"/>
|
|
4
|
+
<path d="M5 18C5 16.8954 5.89543 16 7 16C8.10457 16 9 16.8954 9 18C9 19.1046 8.10457 20 7 20C5.89543 20 5 19.1046 5 18Z" fill="#6C737F"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7V3H8V7H6Z" fill="#6C737F"/>
|
|
6
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 18V13H8V18H6Z" fill="#6C737F"/>
|
|
7
|
+
</svg>
|
|
@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Container = void 0;
|
|
4
4
|
const system_1 = require("@mui/system");
|
|
5
5
|
const material_1 = require("@mui/material");
|
|
6
|
-
exports.Container = (0, system_1.styled)(material_1.Box) `
|
|
7
|
-
width: 100%;
|
|
8
|
-
border-radius: 8px;
|
|
9
|
-
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
|
10
|
-
border: 2px solid;
|
|
11
|
-
border-color: ${props => `${props.theme.palette?.background?.paper}`};
|
|
12
|
-
background: ${props => `${props.theme.palette?.background?.paper}`};
|
|
6
|
+
exports.Container = (0, system_1.styled)(material_1.Box) `
|
|
7
|
+
width: 100%;
|
|
8
|
+
border-radius: 8px;
|
|
9
|
+
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
|
10
|
+
border: 2px solid;
|
|
11
|
+
border-color: ${props => `${props.theme.palette?.background?.paper}`};
|
|
12
|
+
background: ${props => `${props.theme.palette?.background?.paper}`};
|
|
13
13
|
`;
|
|
@@ -9,33 +9,33 @@ const Add_1 = __importDefault(require("@mui/icons-material/Add"));
|
|
|
9
9
|
const config_1 = require("../../../../config");
|
|
10
10
|
const colors_1 = require("../../../../config/colors");
|
|
11
11
|
const material_1 = require("@mui/material");
|
|
12
|
-
const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
|
|
13
|
-
height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
14
|
-
width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
15
|
-
position: absolute;
|
|
16
|
-
top: ${y}px;
|
|
17
|
-
left: ${x}px;
|
|
18
|
-
font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
19
|
-
background: ${background};
|
|
20
|
-
color: ${colors_1.Colors.NAVY_BLUE};
|
|
21
|
-
border-radius: 50%;
|
|
22
|
-
cursor: pointer;
|
|
23
|
-
z-index: 1000;
|
|
24
|
-
:hover {
|
|
25
|
-
background: ${colors_1.Colors.BLUE};
|
|
26
|
-
color: ${colors_1.Colors.WHITE};
|
|
27
|
-
box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
|
|
28
|
-
}
|
|
12
|
+
const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
|
|
13
|
+
height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
14
|
+
width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
15
|
+
position: absolute;
|
|
16
|
+
top: ${y}px;
|
|
17
|
+
left: ${x}px;
|
|
18
|
+
font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
19
|
+
background: ${background};
|
|
20
|
+
color: ${colors_1.Colors.NAVY_BLUE};
|
|
21
|
+
border-radius: 50%;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
z-index: 1000;
|
|
24
|
+
:hover {
|
|
25
|
+
background: ${colors_1.Colors.BLUE};
|
|
26
|
+
color: ${colors_1.Colors.WHITE};
|
|
27
|
+
box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
|
|
28
|
+
}
|
|
29
29
|
`;
|
|
30
30
|
exports.createAddButton = createAddButton;
|
|
31
|
-
const createPlaceholder = (isOver, canDrop) => (0, system_1.styled)(material_1.Box)(() => `
|
|
32
|
-
width: ${config_1.Config.NODE_WIDTH}px;
|
|
33
|
-
height: ${config_1.Config.NODE_HEIGHT}px;
|
|
34
|
-
position: absolute;
|
|
35
|
-
border-radius: 8px;
|
|
36
|
-
background-color: rgba(99, 102, 241, 0.12);
|
|
37
|
-
border: dashed #2970FF 2px;
|
|
38
|
-
opacity: ${isOver ? 1 : 0};
|
|
39
|
-
z-index: ${canDrop ? 1000 : 0};
|
|
31
|
+
const createPlaceholder = (isOver, canDrop) => (0, system_1.styled)(material_1.Box)(() => `
|
|
32
|
+
width: ${config_1.Config.NODE_WIDTH}px;
|
|
33
|
+
height: ${config_1.Config.NODE_HEIGHT}px;
|
|
34
|
+
position: absolute;
|
|
35
|
+
border-radius: 8px;
|
|
36
|
+
background-color: rgba(99, 102, 241, 0.12);
|
|
37
|
+
border: dashed #2970FF 2px;
|
|
38
|
+
opacity: ${isOver ? 1 : 0};
|
|
39
|
+
z-index: ${canDrop ? 1000 : 0};
|
|
40
40
|
`);
|
|
41
41
|
exports.createPlaceholder = createPlaceholder;
|
|
@@ -7,22 +7,22 @@ exports.createConnectionLine = void 0;
|
|
|
7
7
|
const styled_1 = __importDefault(require("@emotion/styled"));
|
|
8
8
|
const config_1 = require("../../../../config");
|
|
9
9
|
const createConnectionLine = ({ width, height, x, y, border }) => {
|
|
10
|
-
return (0, styled_1.default)("div") `
|
|
11
|
-
width: ${width}px;
|
|
12
|
-
height: ${height}px;
|
|
13
|
-
border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
14
|
-
border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
15
|
-
border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
16
|
-
border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
17
|
-
border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
|
|
18
|
-
border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
|
|
19
|
-
border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
|
|
20
|
-
border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: ${y}px;
|
|
23
|
-
left: ${x}px;
|
|
24
|
-
display: flex;
|
|
25
|
-
align-items: center;
|
|
10
|
+
return (0, styled_1.default)("div") `
|
|
11
|
+
width: ${width}px;
|
|
12
|
+
height: ${height}px;
|
|
13
|
+
border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
14
|
+
border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
15
|
+
border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
16
|
+
border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
17
|
+
border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
|
|
18
|
+
border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
|
|
19
|
+
border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
|
|
20
|
+
border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: ${y}px;
|
|
23
|
+
left: ${x}px;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
26
|
`;
|
|
27
27
|
};
|
|
28
28
|
exports.createConnectionLine = createConnectionLine;
|
|
@@ -23,7 +23,7 @@ exports.nodeHeightByType = {
|
|
|
23
23
|
[enums_1.NodeTypeEnum.HubNode]: config_1.Config.HUB_NODE_HEIGHT,
|
|
24
24
|
[enums_1.NodeTypeEnum.ParallelNode]: 0,
|
|
25
25
|
};
|
|
26
|
-
const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNewNodeCallback, node, connectionIndex, curveType, isProcessed, childNodeId }) => {
|
|
26
|
+
const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNewNodeCallback, node, connectionIndex, curveType, isProcessed, childNodeId, emptyMenuItemsComponent, searchPlaceholder }) => {
|
|
27
27
|
const popperRef = (0, react_1.useRef)();
|
|
28
28
|
const [anchorEl, setAnchorEl] = (0, react_1.useState)(false);
|
|
29
29
|
const [styles, setStyles] = (0, react_1.useState)({});
|
|
@@ -55,7 +55,8 @@ const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNew
|
|
|
55
55
|
const left = rect?.left || 0;
|
|
56
56
|
const top = rect?.top || 0;
|
|
57
57
|
const style = {
|
|
58
|
-
transform: `translate(${left -
|
|
58
|
+
transform: `translate(${left - 400}px, ${top - 228}px)`,
|
|
59
|
+
overflow: 'visible',
|
|
59
60
|
};
|
|
60
61
|
setStyles(style);
|
|
61
62
|
setAnchorEl(true);
|
|
@@ -78,6 +79,6 @@ const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNew
|
|
|
78
79
|
onClick: handleClick,
|
|
79
80
|
innerRef: popperRef
|
|
80
81
|
};
|
|
81
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.AddButton, { ...buttonProps }), (0, jsx_runtime_1.jsx)(AnimatedConnectionLine, { style: props }), (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: () => isOpen && handleClose(), mouseEvent: "onMouseDown", touchEvent: "onTouchStart", children: (0, jsx_runtime_1.jsx)(styled_1.StyledPopper, { placement: 'left', open: isOpen, sx: styles, modifiers: [{ name: 'arrow', enabled: true }], children: (0, jsx_runtime_1.jsx)(NodesMenu_1.default, { addNewNodeCallback: addNewNodeCallback, data: { parentId, connectionIndex }, menuTabs: menuTabs, onCloseMenu: handleClose }) }) })] }));
|
|
82
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.AddButton, { ...buttonProps }), (0, jsx_runtime_1.jsx)(AnimatedConnectionLine, { style: props }), (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: () => isOpen && handleClose(), mouseEvent: "onMouseDown", touchEvent: "onTouchStart", children: (0, jsx_runtime_1.jsx)(styled_1.StyledPopper, { placement: 'left', open: isOpen, sx: styles, modifiers: [{ name: 'arrow', enabled: true }], children: (0, jsx_runtime_1.jsx)(NodesMenu_1.default, { addNewNodeCallback: addNewNodeCallback, data: { parentId, connectionIndex }, menuTabs: menuTabs, onCloseMenu: handleClose, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder }) }) })] }));
|
|
82
83
|
};
|
|
83
84
|
exports.default = (0, react_1.memo)(ConnectionWithButton);
|
|
@@ -10,46 +10,46 @@ const config_1 = require("../../../../config");
|
|
|
10
10
|
const colors_1 = require("../../../../config/colors");
|
|
11
11
|
const material_1 = require("@mui/material");
|
|
12
12
|
const createConnectionLine = ({ width, height, x, y, border, }) => {
|
|
13
|
-
return (0, system_1.styled)("div") `
|
|
14
|
-
width: ${width}px;
|
|
15
|
-
height: ${height}px;
|
|
16
|
-
border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
17
|
-
border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
18
|
-
border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
19
|
-
border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
20
|
-
border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
|
|
21
|
-
border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
|
|
22
|
-
border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
|
|
23
|
-
border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
|
|
24
|
-
position: absolute;
|
|
25
|
-
top: ${y}px;
|
|
26
|
-
left: ${x}px;
|
|
27
|
-
display: flex;
|
|
28
|
-
align-items: center;
|
|
13
|
+
return (0, system_1.styled)("div") `
|
|
14
|
+
width: ${width}px;
|
|
15
|
+
height: ${height}px;
|
|
16
|
+
border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
17
|
+
border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
18
|
+
border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
19
|
+
border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
|
|
20
|
+
border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
|
|
21
|
+
border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
|
|
22
|
+
border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
|
|
23
|
+
border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
|
|
24
|
+
position: absolute;
|
|
25
|
+
top: ${y}px;
|
|
26
|
+
left: ${x}px;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
29
|
`;
|
|
30
30
|
};
|
|
31
31
|
exports.createConnectionLine = createConnectionLine;
|
|
32
|
-
const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
|
|
33
|
-
height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
34
|
-
width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
35
|
-
position: absolute;
|
|
36
|
-
top: ${y}px;
|
|
37
|
-
left: ${x}px;
|
|
38
|
-
font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
39
|
-
background: ${background};
|
|
40
|
-
color: ${colors_1.Colors.NAVY_BLUE};
|
|
41
|
-
border-radius: 50%;
|
|
42
|
-
cursor: pointer;
|
|
43
|
-
z-index: 1000;
|
|
44
|
-
:hover {
|
|
45
|
-
background: ${colors_1.Colors.BLUE};
|
|
46
|
-
color: ${colors_1.Colors.WHITE};
|
|
47
|
-
box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
|
|
48
|
-
}
|
|
32
|
+
const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
|
|
33
|
+
height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
34
|
+
width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: ${y}px;
|
|
37
|
+
left: ${x}px;
|
|
38
|
+
font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
|
|
39
|
+
background: ${background};
|
|
40
|
+
color: ${colors_1.Colors.NAVY_BLUE};
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
z-index: 1000;
|
|
44
|
+
:hover {
|
|
45
|
+
background: ${colors_1.Colors.BLUE};
|
|
46
|
+
color: ${colors_1.Colors.WHITE};
|
|
47
|
+
box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
|
|
48
|
+
}
|
|
49
49
|
`;
|
|
50
50
|
exports.createAddButton = createAddButton;
|
|
51
|
-
exports.StyledPopper = (0, system_1.styled)(material_1.Popper) `
|
|
52
|
-
z-index: 1000;
|
|
53
|
-
overflow: hidden;
|
|
54
|
-
border-radius: 16px;
|
|
51
|
+
exports.StyledPopper = (0, system_1.styled)(material_1.Popper) `
|
|
52
|
+
z-index: 1000;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
border-radius: 16px;
|
|
55
55
|
`;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { MenuTabType, PointType } from '../../common/types';
|
|
2
3
|
import { AddNewNodeCallbackType } from '../../flow/types';
|
|
3
4
|
import { BaseDrawableNodeType, NodeType } from '../../node/types';
|
|
@@ -17,6 +18,8 @@ export type ConnectionPropsType = {
|
|
|
17
18
|
node: NodeType;
|
|
18
19
|
curveType?: ConnectionCurveEnum;
|
|
19
20
|
isProcessed: boolean;
|
|
21
|
+
emptyMenuItemsComponent?: JSX.Element;
|
|
22
|
+
searchPlaceholder?: string;
|
|
20
23
|
};
|
|
21
24
|
export type ConnectionDrawerType = {
|
|
22
25
|
type: string;
|
|
@@ -13,6 +13,8 @@ type PropsType = {
|
|
|
13
13
|
failedNodeId?: string;
|
|
14
14
|
failedNodeColor?: string;
|
|
15
15
|
onRedirect?: (flowId: string) => void;
|
|
16
|
+
emptyMenuItemsComponent?: JSX.Element;
|
|
17
|
+
searchPlaceholder?: string;
|
|
16
18
|
};
|
|
17
19
|
declare const FlowSandbox: FC<PropsType>;
|
|
18
20
|
export default FlowSandbox;
|
|
@@ -13,7 +13,7 @@ const Space_1 = __importDefault(require("../Space"));
|
|
|
13
13
|
const react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
|
|
14
14
|
const components_1 = require("../../../common/components");
|
|
15
15
|
const FlowPosition_1 = require("../../context/FlowPosition");
|
|
16
|
-
const FlowSandbox = ({ nodeDrawers, connectionDrawers, containerRef, permissions, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition }) => {
|
|
16
|
+
const FlowSandbox = ({ nodeDrawers, connectionDrawers, containerRef, permissions, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition, emptyMenuItemsComponent, searchPlaceholder }) => {
|
|
17
17
|
const sandboxWidth = containerRef?.current?.offsetWidth || 0;
|
|
18
18
|
const [maxWidth, setMaxWidth] = (0, react_1.useState)(sandboxWidth);
|
|
19
19
|
const [minWidth, setMinWidth] = (0, react_1.useState)(0);
|
|
@@ -29,7 +29,7 @@ const FlowSandbox = ({ nodeDrawers, connectionDrawers, containerRef, permissions
|
|
|
29
29
|
const Connection = permissions.canCreate
|
|
30
30
|
? connection_1.moduleConnection.connections.connectionWithButton
|
|
31
31
|
: connection_1.moduleConnection.connections.baseConnection;
|
|
32
|
-
return ((0, jsx_runtime_1.jsx)(Connection, { ...connectionDrawer.connectionData, startPoint: {
|
|
32
|
+
return ((0, jsx_runtime_1.jsx)(Connection, { ...connectionDrawer.connectionData, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder, startPoint: {
|
|
33
33
|
x: connectionDrawer.connectionData.startPoint.x - minWidth,
|
|
34
34
|
y: connectionDrawer.connectionData.startPoint.y,
|
|
35
35
|
}, endPoint: {
|
|
@@ -3,30 +3,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.ZoomToolbarContainer = exports.ConnectionWrapper = exports.NodeWrapper = exports.createFlowContainer = void 0;
|
|
4
4
|
const system_1 = require("@mui/system");
|
|
5
5
|
const config_1 = require("../../../../config");
|
|
6
|
-
const createFlowContainer = ({ scaleValue, width, }) => (0, system_1.styled)('div') `
|
|
7
|
-
transform: scale(${scaleValue});
|
|
8
|
-
min-width: ${width}px;
|
|
9
|
-
min-height: fit-content;
|
|
10
|
-
background-color: blue;
|
|
6
|
+
const createFlowContainer = ({ scaleValue, width, }) => (0, system_1.styled)('div') `
|
|
7
|
+
transform: scale(${scaleValue});
|
|
8
|
+
min-width: ${width}px;
|
|
9
|
+
min-height: fit-content;
|
|
10
|
+
background-color: blue;
|
|
11
11
|
`;
|
|
12
12
|
exports.createFlowContainer = createFlowContainer;
|
|
13
|
-
exports.NodeWrapper = (0, system_1.styled)('div') `
|
|
14
|
-
width: 0;
|
|
15
|
-
height: ${config_1.Config.NODE_HEIGHT}px;
|
|
16
|
-
position: absolute;
|
|
17
|
-
display: flex;
|
|
18
|
-
justify-content: center;
|
|
19
|
-
align-items: center;
|
|
20
|
-
z-index: 2;
|
|
13
|
+
exports.NodeWrapper = (0, system_1.styled)('div') `
|
|
14
|
+
width: 0;
|
|
15
|
+
height: ${config_1.Config.NODE_HEIGHT}px;
|
|
16
|
+
position: absolute;
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
align-items: center;
|
|
20
|
+
z-index: 2;
|
|
21
21
|
`;
|
|
22
|
-
exports.ConnectionWrapper = (0, system_1.styled)('div') `
|
|
23
|
-
z-index: 1;
|
|
22
|
+
exports.ConnectionWrapper = (0, system_1.styled)('div') `
|
|
23
|
+
z-index: 1;
|
|
24
24
|
`;
|
|
25
|
-
exports.ZoomToolbarContainer = (0, system_1.styled)('div') `
|
|
26
|
-
cursor: default;
|
|
27
|
-
position: fixed;
|
|
28
|
-
z-index: 1000;
|
|
29
|
-
padding: 24px;
|
|
30
|
-
bottom: 0;
|
|
31
|
-
left: 0;
|
|
25
|
+
exports.ZoomToolbarContainer = (0, system_1.styled)('div') `
|
|
26
|
+
cursor: default;
|
|
27
|
+
position: fixed;
|
|
28
|
+
z-index: 1000;
|
|
29
|
+
padding: 24px;
|
|
30
|
+
bottom: 0;
|
|
31
|
+
left: 0;
|
|
32
32
|
`;
|
|
@@ -16,7 +16,7 @@ const FlowPosition_1 = require("../../context/FlowPosition");
|
|
|
16
16
|
const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
|
|
17
17
|
const react_dnd_1 = require("react-dnd");
|
|
18
18
|
const colors_1 = require("../../../../config/colors");
|
|
19
|
-
const NodesFlow = ({ theme, nodes, menuTabs, addNewNodeCallback, permissions, drawerProps, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition }) => {
|
|
19
|
+
const NodesFlow = ({ theme, nodes, menuTabs, addNewNodeCallback, permissions, drawerProps, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition, emptyMenuItemsComponent, searchPlaceholder, }) => {
|
|
20
20
|
const nodeDrawers = (0, react_1.useMemo)(() => {
|
|
21
21
|
const { startNodeList, nodeListWithEndNode } = nodeServices_1.nodeServices.createListOfStartNodesAndEndNodes(nodes);
|
|
22
22
|
const nodeListWithExpandCoefficients = expandCoefficientServices_1.expandCoefficientServices.calculateNodeExpandCoefficient(nodeListWithEndNode);
|
|
@@ -31,6 +31,6 @@ const NodesFlow = ({ theme, nodes, menuTabs, addNewNodeCallback, permissions, dr
|
|
|
31
31
|
addNewNodeCallback,
|
|
32
32
|
}), [nodeDrawers, menuTabs, addNewNodeCallback, processedNodeIds]);
|
|
33
33
|
const containerRef = (0, react_1.useRef)(null);
|
|
34
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: permissions.canRead && ((0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeContextProvider, { themContextValue: theme, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, style: { height: "100%", width: "100%", background: theme?.palette.background.default || colors_1.Colors.DIRTY_WHITE }, children: (0, jsx_runtime_1.jsx)(SettingsContext_1.NodeSettingsProvider, { permissions: permissions, drawerProps: drawerProps, children: (0, jsx_runtime_1.jsx)(FlowPosition_1.FlowPositionProvider, { children: (0, jsx_runtime_1.jsx)(FlowSandbox_1.default, { permissions: permissions, connectionDrawers: connectionDrawers, nodeDrawers: nodeDrawers, containerRef: containerRef, processedNodeIds: processedNodeIds, failedNodeId: failedNodeId, failedNodeColor: failedNodeColor, onRedirect: onRedirect, onUpdateNodePosition: onUpdateNodePosition }) }) }) }) }) })) }));
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: permissions.canRead && ((0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeContextProvider, { themContextValue: theme, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, style: { height: "100%", width: "100%", background: theme?.palette.background.default || colors_1.Colors.DIRTY_WHITE }, children: (0, jsx_runtime_1.jsx)(SettingsContext_1.NodeSettingsProvider, { permissions: permissions, drawerProps: drawerProps, children: (0, jsx_runtime_1.jsx)(FlowPosition_1.FlowPositionProvider, { children: (0, jsx_runtime_1.jsx)(FlowSandbox_1.default, { permissions: permissions, connectionDrawers: connectionDrawers, nodeDrawers: nodeDrawers, containerRef: containerRef, processedNodeIds: processedNodeIds, failedNodeId: failedNodeId, failedNodeColor: failedNodeColor, onRedirect: onRedirect, onUpdateNodePosition: onUpdateNodePosition, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder }) }) }) }) }) })) }));
|
|
35
35
|
};
|
|
36
36
|
exports.default = NodesFlow;
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.SpaceContainer = void 0;
|
|
4
4
|
const system_1 = require("@mui/system");
|
|
5
|
-
exports.SpaceContainer = (0, system_1.styled)('div') `
|
|
6
|
-
width: 100%;
|
|
7
|
-
height: 100%;
|
|
8
|
-
cursor: grab;
|
|
9
|
-
-webkit-user-select: none;
|
|
10
|
-
-moz-user-select: none;
|
|
11
|
-
-ms-user-select: none;
|
|
12
|
-
user-select: none;
|
|
5
|
+
exports.SpaceContainer = (0, system_1.styled)('div') `
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
cursor: grab;
|
|
9
|
+
-webkit-user-select: none;
|
|
10
|
+
-moz-user-select: none;
|
|
11
|
+
-ms-user-select: none;
|
|
12
|
+
user-select: none;
|
|
13
13
|
`;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { MenuTabType, Theme, UpdateNodePosition } from "../../common/types";
|
|
2
3
|
import { NodeType } from "../../node/types";
|
|
3
4
|
export type AddNewNodeCallbackType = (params: {
|
|
@@ -17,6 +18,8 @@ export type NodeFlowPropsType = {
|
|
|
17
18
|
onRedirect?: (flowId: string) => void;
|
|
18
19
|
onUpdateNodePosition: UpdateNodePosition;
|
|
19
20
|
theme: Theme;
|
|
21
|
+
emptyMenuItemsComponent?: JSX.Element;
|
|
22
|
+
searchPlaceholder?: string;
|
|
20
23
|
};
|
|
21
24
|
export type IDrawerProps = {
|
|
22
25
|
isOpen: boolean;
|
|
@@ -5,94 +5,94 @@ const system_1 = require("@mui/system");
|
|
|
5
5
|
const material_1 = require("@mui/material");
|
|
6
6
|
const config_1 = require("../../../../config");
|
|
7
7
|
const colors_1 = require("../../../../config/colors");
|
|
8
|
-
exports.Container = (0, system_1.styled)(material_1.Paper)(() => `
|
|
9
|
-
width: ${config_1.Config.NODE_WIDTH}px;
|
|
10
|
-
height: ${config_1.Config.NODE_HEIGHT}px;
|
|
11
|
-
border-radius: 8px;
|
|
12
|
-
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.08);
|
|
13
|
-
border: 2px solid ${colors_1.Colors.WHITE};
|
|
14
|
-
cursor: pointer;
|
|
15
|
-
display: flex;
|
|
16
|
-
flex-direction: row;
|
|
17
|
-
align-items: center;
|
|
18
|
-
position: relative;
|
|
19
|
-
z-index: 0;
|
|
8
|
+
exports.Container = (0, system_1.styled)(material_1.Paper)(() => `
|
|
9
|
+
width: ${config_1.Config.NODE_WIDTH}px;
|
|
10
|
+
height: ${config_1.Config.NODE_HEIGHT}px;
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.08);
|
|
13
|
+
border: 2px solid ${colors_1.Colors.WHITE};
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: row;
|
|
17
|
+
align-items: center;
|
|
18
|
+
position: relative;
|
|
19
|
+
z-index: 0;
|
|
20
20
|
`);
|
|
21
|
-
exports.IconBorder = (0, system_1.styled)('div') `
|
|
22
|
-
position: absolute;
|
|
23
|
-
width: 100%;
|
|
24
|
-
height: 100%;
|
|
25
|
-
border-radius: 6px;
|
|
26
|
-
border: 1px solid rgba(17, 25, 39, 0.12);
|
|
21
|
+
exports.IconBorder = (0, system_1.styled)('div') `
|
|
22
|
+
position: absolute;
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: 100%;
|
|
25
|
+
border-radius: 6px;
|
|
26
|
+
border: 1px solid rgba(17, 25, 39, 0.12);
|
|
27
27
|
`;
|
|
28
|
-
exports.IconWrapper = (0, system_1.styled)('div') `
|
|
29
|
-
width: 56px;
|
|
30
|
-
min-width: 56px;
|
|
31
|
-
max-width: 56px;
|
|
32
|
-
height: 56px;
|
|
33
|
-
background: ${props => `${props.theme.palette?.background?.default}`};
|
|
34
|
-
display: flex;
|
|
35
|
-
justify-content: center;
|
|
36
|
-
align-items: center;
|
|
37
|
-
border-radius: 6px;
|
|
38
|
-
object-fit: contain;
|
|
39
|
-
margin-left: 8px;
|
|
40
|
-
overflow: hidden;
|
|
41
|
-
position: relative;
|
|
28
|
+
exports.IconWrapper = (0, system_1.styled)('div') `
|
|
29
|
+
width: 56px;
|
|
30
|
+
min-width: 56px;
|
|
31
|
+
max-width: 56px;
|
|
32
|
+
height: 56px;
|
|
33
|
+
background: ${props => `${props.theme.palette?.background?.default}`};
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
align-items: center;
|
|
37
|
+
border-radius: 6px;
|
|
38
|
+
object-fit: contain;
|
|
39
|
+
margin-left: 8px;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
position: relative;
|
|
42
42
|
`;
|
|
43
|
-
exports.Name = (0, system_1.styled)('div') `
|
|
44
|
-
//font-size: 16px;
|
|
45
|
-
display: -webkit-box;
|
|
46
|
-
-webkit-line-clamp: 2;
|
|
47
|
-
-webkit-box-orient: vertical;
|
|
48
|
-
overflow: hidden;
|
|
49
|
-
width: 240px;
|
|
50
|
-
text-align: left;
|
|
51
|
-
font-family: Inter, 'circular', serif;
|
|
52
|
-
font-size: 16px;
|
|
53
|
-
font-style: normal;
|
|
54
|
-
font-weight: 700;
|
|
55
|
-
line-height: 150%;
|
|
43
|
+
exports.Name = (0, system_1.styled)('div') `
|
|
44
|
+
//font-size: 16px;
|
|
45
|
+
display: -webkit-box;
|
|
46
|
+
-webkit-line-clamp: 2;
|
|
47
|
+
-webkit-box-orient: vertical;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
width: 240px;
|
|
50
|
+
text-align: left;
|
|
51
|
+
font-family: Inter, 'circular', serif;
|
|
52
|
+
font-size: 16px;
|
|
53
|
+
font-style: normal;
|
|
54
|
+
font-weight: 700;
|
|
55
|
+
line-height: 150%;
|
|
56
56
|
`;
|
|
57
|
-
exports.NameOfExtension = (0, system_1.styled)('div') `
|
|
58
|
-
text-align: left;
|
|
59
|
-
font-size: 12px;
|
|
60
|
-
color: ${colors_1.Colors.GRAY};
|
|
61
|
-
width: 240px;
|
|
62
|
-
white-space: nowrap;
|
|
63
|
-
overflow: hidden;
|
|
64
|
-
text-overflow: ellipsis;
|
|
65
|
-
font-family: Inter, 'circular', serif;
|
|
66
|
-
font-style: normal;
|
|
67
|
-
font-weight: 500;
|
|
68
|
-
line-height: 14px; /* 116.667% */
|
|
69
|
-
letter-spacing: 0.15px;
|
|
57
|
+
exports.NameOfExtension = (0, system_1.styled)('div') `
|
|
58
|
+
text-align: left;
|
|
59
|
+
font-size: 12px;
|
|
60
|
+
color: ${colors_1.Colors.GRAY};
|
|
61
|
+
width: 240px;
|
|
62
|
+
white-space: nowrap;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
text-overflow: ellipsis;
|
|
65
|
+
font-family: Inter, 'circular', serif;
|
|
66
|
+
font-style: normal;
|
|
67
|
+
font-weight: 500;
|
|
68
|
+
line-height: 14px; /* 116.667% */
|
|
69
|
+
letter-spacing: 0.15px;
|
|
70
70
|
`;
|
|
71
|
-
exports.ContentContainer = (0, system_1.styled)('div') `
|
|
72
|
-
margin-left: 16px;
|
|
73
|
-
height: 62px;
|
|
74
|
-
align-items: center;
|
|
75
|
-
justify-content: center;
|
|
76
|
-
display: flex;
|
|
77
|
-
width: min-content;
|
|
78
|
-
flex-direction: column;
|
|
79
|
-
gap: 5px
|
|
71
|
+
exports.ContentContainer = (0, system_1.styled)('div') `
|
|
72
|
+
margin-left: 16px;
|
|
73
|
+
height: 62px;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
display: flex;
|
|
77
|
+
width: min-content;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
gap: 5px
|
|
80
80
|
`;
|
|
81
|
-
exports.ChildFlowWrapper = (0, system_1.styled)('div') `
|
|
82
|
-
width: min-content;
|
|
83
|
-
height: min-content;
|
|
84
|
-
position: absolute;
|
|
85
|
-
z-index: 10;
|
|
86
|
-
top: 10px;
|
|
87
|
-
right: 10px;
|
|
81
|
+
exports.ChildFlowWrapper = (0, system_1.styled)('div') `
|
|
82
|
+
width: min-content;
|
|
83
|
+
height: min-content;
|
|
84
|
+
position: absolute;
|
|
85
|
+
z-index: 10;
|
|
86
|
+
top: 10px;
|
|
87
|
+
right: 10px;
|
|
88
88
|
`;
|
|
89
|
-
exports.NodeMenu = (0, system_1.styled)('div') `
|
|
90
|
-
position: absolute;
|
|
91
|
-
top: -2px;
|
|
92
|
-
right: 0;
|
|
93
|
-
width: 40px;
|
|
94
|
-
height: calc(100% + 4px);
|
|
95
|
-
background-color: #D8DBDC;
|
|
96
|
-
margin-right: -2px;
|
|
97
|
-
border-radius: 0 8px 8px 0;
|
|
89
|
+
exports.NodeMenu = (0, system_1.styled)('div') `
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: -2px;
|
|
92
|
+
right: 0;
|
|
93
|
+
width: 40px;
|
|
94
|
+
height: calc(100% + 4px);
|
|
95
|
+
background-color: #D8DBDC;
|
|
96
|
+
margin-right: -2px;
|
|
97
|
+
border-radius: 0 8px 8px 0;
|
|
98
98
|
`;
|
|
@@ -5,35 +5,35 @@ const config_1 = require("../../../../config");
|
|
|
5
5
|
const material_1 = require("@mui/material");
|
|
6
6
|
const system_1 = require("@mui/system");
|
|
7
7
|
const react_svg_1 = require("react-svg");
|
|
8
|
-
exports.Container = (0, system_1.styled)('div') `
|
|
9
|
-
min-width: 300px;
|
|
10
|
-
height: ${config_1.Config.NODE_HEIGHT}px;
|
|
11
|
-
cursor: pointer;
|
|
12
|
-
display: flex;
|
|
13
|
-
flex-direction: row;
|
|
14
|
-
align-items: center;
|
|
15
|
-
z-index: 1000;
|
|
8
|
+
exports.Container = (0, system_1.styled)('div') `
|
|
9
|
+
min-width: 300px;
|
|
10
|
+
height: ${config_1.Config.NODE_HEIGHT}px;
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: row;
|
|
14
|
+
align-items: center;
|
|
15
|
+
z-index: 1000;
|
|
16
16
|
`;
|
|
17
|
-
const createChoiceNodeImg = () => (0, system_1.styled)(react_svg_1.ReactSVG) `
|
|
18
|
-
top: -23px;
|
|
19
|
-
position: absolute;
|
|
20
|
-
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
|
|
21
|
-
svg {
|
|
22
|
-
fill: ${props => `${props.theme.palette?.background?.paper}`};
|
|
23
|
-
stroke-width: 2;
|
|
24
|
-
stroke-linecap: round;
|
|
25
|
-
}
|
|
17
|
+
const createChoiceNodeImg = () => (0, system_1.styled)(react_svg_1.ReactSVG) `
|
|
18
|
+
top: -23px;
|
|
19
|
+
position: absolute;
|
|
20
|
+
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
|
|
21
|
+
svg {
|
|
22
|
+
fill: ${props => `${props.theme.palette?.background?.paper}`};
|
|
23
|
+
stroke-width: 2;
|
|
24
|
+
stroke-linecap: round;
|
|
25
|
+
}
|
|
26
26
|
`;
|
|
27
27
|
exports.createChoiceNodeImg = createChoiceNodeImg;
|
|
28
|
-
exports.NameGreed = (0, system_1.styled)(material_1.Grid) `
|
|
29
|
-
display: flex;
|
|
30
|
-
justify-content: center;
|
|
31
|
-
align-items: center;
|
|
32
|
-
font-size: 16px;
|
|
33
|
-
font-weight: 700;
|
|
34
|
-
color: ${props => `${props.theme.palette.text.primary}`};
|
|
35
|
-
font-family: Inter, 'circular', serif;;
|
|
28
|
+
exports.NameGreed = (0, system_1.styled)(material_1.Grid) `
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
align-items: center;
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
color: ${props => `${props.theme.palette.text.primary}`};
|
|
35
|
+
font-family: Inter, 'circular', serif;;
|
|
36
36
|
`;
|
|
37
|
-
exports.ArrowImg = (0, system_1.styled)('img') `
|
|
38
|
-
margin-top: 5px;
|
|
37
|
+
exports.ArrowImg = (0, system_1.styled)('img') `
|
|
38
|
+
margin-top: 5px;
|
|
39
39
|
`;
|
|
@@ -8,15 +8,15 @@ const system_1 = require("@mui/system");
|
|
|
8
8
|
const Stop_1 = __importDefault(require("@mui/icons-material/Stop"));
|
|
9
9
|
const config_1 = require("../../../../config");
|
|
10
10
|
const colors_1 = require("../../../../config/colors");
|
|
11
|
-
exports.IconContainer = (0, system_1.styled)('div') `
|
|
12
|
-
display: flex;
|
|
13
|
-
justify-content: center;
|
|
14
|
-
align-items: center;
|
|
15
|
-
background: ${colors_1.Colors.NAVY_BLUE};
|
|
16
|
-
height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
|
|
17
|
-
min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
|
|
18
|
-
border-radius: 100%;
|
|
11
|
+
exports.IconContainer = (0, system_1.styled)('div') `
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
align-items: center;
|
|
15
|
+
background: ${colors_1.Colors.NAVY_BLUE};
|
|
16
|
+
height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
|
|
17
|
+
min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
|
|
18
|
+
border-radius: 100%;
|
|
19
19
|
`;
|
|
20
|
-
exports.Icon = (0, system_1.styled)(Stop_1.default) `
|
|
21
|
-
color: ${colors_1.Colors.WHITE};
|
|
20
|
+
exports.Icon = (0, system_1.styled)(Stop_1.default) `
|
|
21
|
+
color: ${colors_1.Colors.WHITE};
|
|
22
22
|
`;
|
|
@@ -4,9 +4,9 @@ exports.NodeHubStyledComponent = void 0;
|
|
|
4
4
|
const system_1 = require("@mui/system");
|
|
5
5
|
const config_1 = require("../../../../config");
|
|
6
6
|
const colors_1 = require("../../../../config/colors");
|
|
7
|
-
exports.NodeHubStyledComponent = (0, system_1.styled)('div') `
|
|
8
|
-
min-width: 50px;
|
|
9
|
-
min-height: ${config_1.Config.HUB_NODE_HEIGHT}px;
|
|
10
|
-
background: ${colors_1.Colors.NAVY_BLUE};
|
|
11
|
-
border-radius: 5px;
|
|
7
|
+
exports.NodeHubStyledComponent = (0, system_1.styled)('div') `
|
|
8
|
+
min-width: 50px;
|
|
9
|
+
min-height: ${config_1.Config.HUB_NODE_HEIGHT}px;
|
|
10
|
+
background: ${colors_1.Colors.NAVY_BLUE};
|
|
11
|
+
border-radius: 5px;
|
|
12
12
|
`;
|
|
@@ -7,10 +7,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const styled_1 = require("./styled");
|
|
9
9
|
const Grid_1 = __importDefault(require("@mui/material/Grid"));
|
|
10
|
-
const NodesMenu = ({ addNewNodeCallback, menuTabs, data, onCloseMenu, }) => {
|
|
10
|
+
const NodesMenu = ({ addNewNodeCallback, menuTabs, data, onCloseMenu, emptyMenuItemsComponent, searchPlaceholder }) => {
|
|
11
11
|
const [value, setValue] = (0, react_1.useState)(menuTabs?.[0].name);
|
|
12
|
+
const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
|
|
12
13
|
const handleChange = (_, newValue) => {
|
|
13
14
|
setValue(newValue);
|
|
15
|
+
setSearchQuery('');
|
|
16
|
+
};
|
|
17
|
+
const handleSearchChange = (event) => {
|
|
18
|
+
setSearchQuery(event.target.value);
|
|
14
19
|
};
|
|
15
20
|
const tab = (0, react_1.useMemo)(() => menuTabs.reduce((tabContentByTabName, tab) => ({
|
|
16
21
|
...tabContentByTabName,
|
|
@@ -23,6 +28,9 @@ const NodesMenu = ({ addNewNodeCallback, menuTabs, data, onCloseMenu, }) => {
|
|
|
23
28
|
});
|
|
24
29
|
onCloseMenu();
|
|
25
30
|
};
|
|
26
|
-
|
|
31
|
+
const filteredItems = (0, react_1.useMemo)(() => {
|
|
32
|
+
return tab[value].filter((menuItem) => menuItem.name.toLowerCase().includes(searchQuery.toLowerCase()));
|
|
33
|
+
}, [searchQuery, value]);
|
|
34
|
+
return ((0, jsx_runtime_1.jsxs)(styled_1.MenuContainer, { children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, { direction: 'column', p: '0 0 10px 0', children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, { alignItems: 'center', container: true, p: '8px 8px 0 0', children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { flexGrow: 1, item: true, children: (0, jsx_runtime_1.jsx)(styled_1.StyledTabs, { value: value, onChange: handleChange, textColor: 'primary', indicatorColor: 'primary', children: menuTabs.map((tab) => ((0, jsx_runtime_1.jsx)(styled_1.StyledTab, { value: tab.name, label: tab.name }, tab.name))) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.Close, { onClick: onCloseMenu }) })] }), (0, jsx_runtime_1.jsx)(styled_1.StyledTextField, { fullWidth: true, variant: "outlined", size: "small", placeholder: searchPlaceholder ? searchPlaceholder : "", value: searchQuery, onChange: handleSearchChange })] }), (0, jsx_runtime_1.jsx)(styled_1.ContentContainer, { children: filteredItems?.length > 0 ? (filteredItems.map((menuItem) => ((0, jsx_runtime_1.jsxs)(styled_1.MenuItem, { onClick: () => onMenuItemClick(menuItem.value), children: [(0, jsx_runtime_1.jsx)(styled_1.IconWrapper, { children: menuItem.icon }), menuItem.name] }, menuItem.value)))) : (emptyMenuItemsComponent && emptyMenuItemsComponent) })] }));
|
|
27
35
|
};
|
|
28
36
|
exports.default = NodesMenu;
|
|
@@ -125,3 +125,6 @@ export declare const Close: import("@emotion/styled").StyledComponent<{
|
|
|
125
125
|
}, "color" | "fontSize" | "shapeRendering" | "children" | "viewBox" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
|
|
126
126
|
export declare const MenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
127
127
|
export declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
128
|
+
export declare const StyledTextField: import("@emotion/styled").StyledComponent<{
|
|
129
|
+
variant?: import("@mui/material").TextFieldVariants | undefined;
|
|
130
|
+
} & Omit<import("@mui/material").StandardTextFieldProps | import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
|
|
@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.IconWrapper = exports.MenuItem = exports.Close = exports.ContentContainer = exports.StyledTab = exports.StyledTabs = exports.TabContainer = exports.MenuContainer = void 0;
|
|
6
|
+
exports.StyledTextField = exports.IconWrapper = exports.MenuItem = exports.Close = exports.ContentContainer = exports.StyledTab = exports.StyledTabs = exports.TabContainer = exports.MenuContainer = void 0;
|
|
7
7
|
const system_1 = require("@mui/system");
|
|
8
8
|
const material_1 = require("@mui/material");
|
|
9
9
|
const Close_1 = __importDefault(require("@mui/icons-material/Close"));
|
|
10
10
|
exports.MenuContainer = (0, system_1.styled)(material_1.Box)(({ theme }) => ({
|
|
11
|
-
width: "
|
|
12
|
-
height: "
|
|
13
|
-
borderRadius: "
|
|
11
|
+
width: "400px",
|
|
12
|
+
height: "515px",
|
|
13
|
+
borderRadius: "4px",
|
|
14
14
|
background: theme.palette.background.paper,
|
|
15
15
|
color: theme.palette.text.primary,
|
|
16
16
|
paddingBottom: "6px",
|
|
@@ -18,52 +18,63 @@ exports.MenuContainer = (0, system_1.styled)(material_1.Box)(({ theme }) => ({
|
|
|
18
18
|
overflow: "hidden",
|
|
19
19
|
colorScheme: theme.palette.mode,
|
|
20
20
|
}));
|
|
21
|
-
exports.TabContainer = (0, system_1.styled)("div") `
|
|
22
|
-
margin-top: 4px;
|
|
23
|
-
overflow-x: scroll;
|
|
21
|
+
exports.TabContainer = (0, system_1.styled)("div") `
|
|
22
|
+
margin-top: 4px;
|
|
23
|
+
overflow-x: scroll;
|
|
24
24
|
`;
|
|
25
|
-
exports.StyledTabs = (0, system_1.styled)(material_1.Tabs) `
|
|
26
|
-
display: flex;
|
|
27
|
-
align-items: flex-start;
|
|
28
|
-
width: max-content;
|
|
29
|
-
min-height: 40px;
|
|
25
|
+
exports.StyledTabs = (0, system_1.styled)(material_1.Tabs) `
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: flex-start;
|
|
28
|
+
width: max-content;
|
|
29
|
+
min-height: 40px;
|
|
30
30
|
`;
|
|
31
|
-
exports.StyledTab = (0, system_1.styled)(material_1.Tab) `
|
|
32
|
-
min-height: 40px;
|
|
31
|
+
exports.StyledTab = (0, system_1.styled)(material_1.Tab) `
|
|
32
|
+
min-height: 40px;
|
|
33
33
|
`;
|
|
34
|
-
exports.ContentContainer = (0, system_1.styled)("div") `
|
|
35
|
-
height: 100
|
|
36
|
-
overflow-y: scroll;
|
|
34
|
+
exports.ContentContainer = (0, system_1.styled)("div") `
|
|
35
|
+
height: calc(100% - 120px);
|
|
36
|
+
overflow-y: scroll;
|
|
37
37
|
`;
|
|
38
|
-
exports.Close = (0, system_1.styled)(Close_1.default) `
|
|
39
|
-
cursor: pointer;
|
|
40
|
-
font-size: 24px;
|
|
41
|
-
display: flex;
|
|
42
|
-
margin: 8px;
|
|
38
|
+
exports.Close = (0, system_1.styled)(Close_1.default) `
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
font-size: 24px;
|
|
41
|
+
display: flex;
|
|
42
|
+
margin: 8px;
|
|
43
43
|
`;
|
|
44
|
-
exports.MenuItem = (0, system_1.styled)("div") `
|
|
45
|
-
display: flex;
|
|
46
|
-
align-items: center;
|
|
47
|
-
gap: 8px;
|
|
48
|
-
padding: 8px 12px;
|
|
49
|
-
margin: 4px;
|
|
50
|
-
border-radius: 12px;
|
|
51
|
-
cursor: pointer;
|
|
52
|
-
font-family: Inter;
|
|
53
|
-
font-size: 0.875rem;
|
|
54
|
-
font-weight: 600;
|
|
55
|
-
line-height: 24px;
|
|
56
|
-
:hover {
|
|
57
|
-
background: ${props => `${props.theme.palette?.background?.default}`};;
|
|
58
|
-
}
|
|
44
|
+
exports.MenuItem = (0, system_1.styled)("div") `
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
gap: 8px;
|
|
48
|
+
padding: 8px 12px;
|
|
49
|
+
margin: 4px;
|
|
50
|
+
border-radius: 12px;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
font-family: Inter;
|
|
53
|
+
font-size: 0.875rem;
|
|
54
|
+
font-weight: 600;
|
|
55
|
+
line-height: 24px;
|
|
56
|
+
:hover {
|
|
57
|
+
background: ${props => `${props.theme.palette?.background?.default}`};;
|
|
58
|
+
}
|
|
59
59
|
`;
|
|
60
|
-
exports.IconWrapper = (0, system_1.styled)("div") `
|
|
61
|
-
width: 24px;
|
|
62
|
-
height: 24px;
|
|
63
|
-
display: flex;
|
|
64
|
-
justify-content: center;
|
|
65
|
-
align-items: center;
|
|
66
|
-
border-radius: 6px;
|
|
67
|
-
object-fit: contain;
|
|
68
|
-
overflow: hidden;
|
|
60
|
+
exports.IconWrapper = (0, system_1.styled)("div") `
|
|
61
|
+
width: 24px;
|
|
62
|
+
height: 24px;
|
|
63
|
+
display: flex;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
align-items: center;
|
|
66
|
+
border-radius: 6px;
|
|
67
|
+
object-fit: contain;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
`;
|
|
70
|
+
exports.StyledTextField = (0, system_1.styled)(material_1.TextField) `
|
|
71
|
+
width: calc(100% - 32px);
|
|
72
|
+
margin: 10px 16px 0;
|
|
73
|
+
.MuiOutlinedInput-notchedOutline {
|
|
74
|
+
border-color: rgb(216, 219, 220)!important;
|
|
75
|
+
}
|
|
76
|
+
.MuiInputBase-input {
|
|
77
|
+
padding-top: 5px;
|
|
78
|
+
padding-bottom: 5px;
|
|
79
|
+
}
|
|
69
80
|
`;
|
|
@@ -4,13 +4,13 @@ exports.Container = void 0;
|
|
|
4
4
|
const system_1 = require("@mui/system");
|
|
5
5
|
const config_1 = require("../../../../config");
|
|
6
6
|
const colors_1 = require("../../../../config/colors");
|
|
7
|
-
exports.Container = (0, system_1.styled)('div') `
|
|
8
|
-
height: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
|
|
9
|
-
min-width: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
|
|
10
|
-
border-radius: 32px;
|
|
11
|
-
background-color: ${colors_1.Colors.NAVY_BLUE};
|
|
12
|
-
display: flex;
|
|
13
|
-
justify-content: center;
|
|
14
|
-
align-items: center;
|
|
15
|
-
cursor: pointer;
|
|
7
|
+
exports.Container = (0, system_1.styled)('div') `
|
|
8
|
+
height: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
|
|
9
|
+
min-width: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
|
|
10
|
+
border-radius: 32px;
|
|
11
|
+
background-color: ${colors_1.Colors.NAVY_BLUE};
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
align-items: center;
|
|
15
|
+
cursor: pointer;
|
|
16
16
|
`;
|
|
@@ -8,15 +8,15 @@ const system_1 = require("@mui/system");
|
|
|
8
8
|
const PlayArrow_1 = __importDefault(require("@mui/icons-material/PlayArrow"));
|
|
9
9
|
const config_1 = require("../../../../config");
|
|
10
10
|
const colors_1 = require("../../../../config/colors");
|
|
11
|
-
exports.IconContainer = (0, system_1.styled)('div') `
|
|
12
|
-
display: flex;
|
|
13
|
-
justify-content: center;
|
|
14
|
-
align-items: center;
|
|
15
|
-
background: ${colors_1.Colors.GREEN};
|
|
16
|
-
height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
|
|
17
|
-
min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
|
|
18
|
-
border-radius: 100%;
|
|
11
|
+
exports.IconContainer = (0, system_1.styled)('div') `
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
align-items: center;
|
|
15
|
+
background: ${colors_1.Colors.GREEN};
|
|
16
|
+
height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
|
|
17
|
+
min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
|
|
18
|
+
border-radius: 100%;
|
|
19
19
|
`;
|
|
20
|
-
exports.Icon = (0, system_1.styled)(PlayArrow_1.default) `
|
|
21
|
-
color: ${colors_1.Colors.WHITE};
|
|
20
|
+
exports.Icon = (0, system_1.styled)(PlayArrow_1.default) `
|
|
21
|
+
color: ${colors_1.Colors.WHITE};
|
|
22
22
|
`;
|
|
@@ -3,38 +3,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.NameContainer = exports.IconWrapper = exports.IconBorder = exports.DefaultFooterContainer = exports.SettingsContent = void 0;
|
|
4
4
|
const material_1 = require("@mui/material");
|
|
5
5
|
const system_1 = require("@mui/system");
|
|
6
|
-
exports.SettingsContent = (0, system_1.styled)(material_1.Box) `
|
|
7
|
-
display: flex;
|
|
8
|
-
flex-direction: column;
|
|
9
|
-
height: 100%;
|
|
6
|
+
exports.SettingsContent = (0, system_1.styled)(material_1.Box) `
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
height: 100%;
|
|
10
10
|
`;
|
|
11
|
-
exports.DefaultFooterContainer = (0, system_1.styled)(material_1.Box) `
|
|
12
|
-
display: flex;
|
|
13
|
-
align-items: center;
|
|
14
|
-
gap: 24px;
|
|
15
|
-
margin-top: 20px;
|
|
11
|
+
exports.DefaultFooterContainer = (0, system_1.styled)(material_1.Box) `
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
gap: 24px;
|
|
15
|
+
margin-top: 20px;
|
|
16
16
|
`;
|
|
17
|
-
exports.IconBorder = (0, system_1.styled)('div') `
|
|
18
|
-
position: absolute;
|
|
19
|
-
width: 100%;
|
|
20
|
-
height: 100%;
|
|
21
|
-
border-radius: 6px;
|
|
22
|
-
border: 1px solid rgba(17, 25, 39, 0.12);
|
|
17
|
+
exports.IconBorder = (0, system_1.styled)('div') `
|
|
18
|
+
position: absolute;
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 100%;
|
|
21
|
+
border-radius: 6px;
|
|
22
|
+
border: 1px solid rgba(17, 25, 39, 0.12);
|
|
23
23
|
`;
|
|
24
|
-
exports.IconWrapper = (0, system_1.styled)("div") `
|
|
25
|
-
width: 56px;
|
|
26
|
-
height: 56px;
|
|
27
|
-
background: #f3f3f3;
|
|
28
|
-
display: flex;
|
|
29
|
-
justify-content: center;
|
|
30
|
-
align-items: center;
|
|
31
|
-
border-radius: 6px;
|
|
32
|
-
object-fit: contain;
|
|
33
|
-
position: relative;
|
|
34
|
-
overflow: hidden;
|
|
24
|
+
exports.IconWrapper = (0, system_1.styled)("div") `
|
|
25
|
+
width: 56px;
|
|
26
|
+
height: 56px;
|
|
27
|
+
background: #f3f3f3;
|
|
28
|
+
display: flex;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
align-items: center;
|
|
31
|
+
border-radius: 6px;
|
|
32
|
+
object-fit: contain;
|
|
33
|
+
position: relative;
|
|
34
|
+
overflow: hidden;
|
|
35
35
|
`;
|
|
36
|
-
exports.NameContainer = (0, system_1.styled)("div") `
|
|
37
|
-
font-size: 18px;
|
|
38
|
-
font-weight: 700;
|
|
39
|
-
text-align: left;
|
|
36
|
+
exports.NameContainer = (0, system_1.styled)("div") `
|
|
37
|
+
font-size: 18px;
|
|
38
|
+
font-weight: 700;
|
|
39
|
+
text-align: left;
|
|
40
40
|
`;
|
package/package.json
CHANGED
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "flow-lib-creomnia",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "lib/index.js",
|
|
6
|
-
"types": "lib/index.d.ts",
|
|
7
|
-
"private": false,
|
|
8
|
-
"scripts": {
|
|
9
|
-
"test": "jest --config jestconfig.json",
|
|
10
|
-
"clean": "rm -rf ./lib",
|
|
11
|
-
"copy-files": "cp -R src/assets lib/assets",
|
|
12
|
-
"build": "npm run clean && tsc && npm run copy-files",
|
|
13
|
-
"publish-package": "npm run build && npm publish"
|
|
14
|
-
},
|
|
15
|
-
"keywords": [],
|
|
16
|
-
"author": "",
|
|
17
|
-
"license": "ISC",
|
|
18
|
-
"devDependencies": {
|
|
19
|
-
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
20
|
-
"@types/jest": "^29.5.2",
|
|
21
|
-
"@types/react": "^18.2.12",
|
|
22
|
-
"@types/react-dom": "^18.2.5",
|
|
23
|
-
"@types/react-svg": "^5.0.0",
|
|
24
|
-
"jest": "^29.5.0",
|
|
25
|
-
"prettier": "^2.8.8",
|
|
26
|
-
"prop-types": "^15.8.1",
|
|
27
|
-
"react": "^18.2.0",
|
|
28
|
-
"react-dom": "^18.2.0",
|
|
29
|
-
"ts-jest": "^29.1.0",
|
|
30
|
-
"tslint": "^6.1.3",
|
|
31
|
-
"tslint-config-prettier": "^1.18.0",
|
|
32
|
-
"typescript": "^5.1.3"
|
|
33
|
-
},
|
|
34
|
-
"files": [
|
|
35
|
-
"lib/**/*"
|
|
36
|
-
],
|
|
37
|
-
"peerDependencies": {
|
|
38
|
-
"@emotion/react": "^11.11.1",
|
|
39
|
-
"@emotion/styled": "^11.11.0",
|
|
40
|
-
"@mui/icons-material": "^5.11.16",
|
|
41
|
-
"@mui/material": "^5.13.5",
|
|
42
|
-
"@mui/styled-engine-sc": "^5.12.0",
|
|
43
|
-
"react": "^18.2.0",
|
|
44
|
-
"react-dom": "^18.2.0",
|
|
45
|
-
"react-svg": "^16.1.17",
|
|
46
|
-
"styled-components": "^5.3.11"
|
|
47
|
-
},
|
|
48
|
-
"dependencies": {
|
|
49
|
-
"@emotion/react": "^11.11.1",
|
|
50
|
-
"@emotion/styled": "^11.11.0",
|
|
51
|
-
"@mui/icons-material": "^5.11.16",
|
|
52
|
-
"@mui/material": "^5.13.5",
|
|
53
|
-
"@mui/styled-engine-sc": "^5.12.0",
|
|
54
|
-
"@react-spring/rafz": "^9.7.3",
|
|
55
|
-
"@react-spring/web": "^9.7.3",
|
|
56
|
-
"react": "^18.2.0",
|
|
57
|
-
"react-dnd": "^16.0.1",
|
|
58
|
-
"react-dnd-html5-backend": "^16.0.1",
|
|
59
|
-
"react-dom": "^18.2.0",
|
|
60
|
-
"react-svg": "^16.1.17",
|
|
61
|
-
"react-zoom-pan-pinch": "^3.3.0",
|
|
62
|
-
"styled-components": "^5.3.11"
|
|
63
|
-
},
|
|
64
|
-
"readme": "ERROR: No README data found!"
|
|
65
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "flow-lib-creomnia",
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "lib/index.js",
|
|
6
|
+
"types": "lib/index.d.ts",
|
|
7
|
+
"private": false,
|
|
8
|
+
"scripts": {
|
|
9
|
+
"test": "jest --config jestconfig.json",
|
|
10
|
+
"clean": "rm -rf ./lib",
|
|
11
|
+
"copy-files": "cp -R src/assets lib/assets",
|
|
12
|
+
"build": "npm run clean && tsc && npm run copy-files",
|
|
13
|
+
"publish-package": "npm run build && npm publish"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [],
|
|
16
|
+
"author": "",
|
|
17
|
+
"license": "ISC",
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
20
|
+
"@types/jest": "^29.5.2",
|
|
21
|
+
"@types/react": "^18.2.12",
|
|
22
|
+
"@types/react-dom": "^18.2.5",
|
|
23
|
+
"@types/react-svg": "^5.0.0",
|
|
24
|
+
"jest": "^29.5.0",
|
|
25
|
+
"prettier": "^2.8.8",
|
|
26
|
+
"prop-types": "^15.8.1",
|
|
27
|
+
"react": "^18.2.0",
|
|
28
|
+
"react-dom": "^18.2.0",
|
|
29
|
+
"ts-jest": "^29.1.0",
|
|
30
|
+
"tslint": "^6.1.3",
|
|
31
|
+
"tslint-config-prettier": "^1.18.0",
|
|
32
|
+
"typescript": "^5.1.3"
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"lib/**/*"
|
|
36
|
+
],
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"@emotion/react": "^11.11.1",
|
|
39
|
+
"@emotion/styled": "^11.11.0",
|
|
40
|
+
"@mui/icons-material": "^5.11.16",
|
|
41
|
+
"@mui/material": "^5.13.5",
|
|
42
|
+
"@mui/styled-engine-sc": "^5.12.0",
|
|
43
|
+
"react": "^18.2.0",
|
|
44
|
+
"react-dom": "^18.2.0",
|
|
45
|
+
"react-svg": "^16.1.17",
|
|
46
|
+
"styled-components": "^5.3.11"
|
|
47
|
+
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@emotion/react": "^11.11.1",
|
|
50
|
+
"@emotion/styled": "^11.11.0",
|
|
51
|
+
"@mui/icons-material": "^5.11.16",
|
|
52
|
+
"@mui/material": "^5.13.5",
|
|
53
|
+
"@mui/styled-engine-sc": "^5.12.0",
|
|
54
|
+
"@react-spring/rafz": "^9.7.3",
|
|
55
|
+
"@react-spring/web": "^9.7.3",
|
|
56
|
+
"react": "^18.2.0",
|
|
57
|
+
"react-dnd": "^16.0.1",
|
|
58
|
+
"react-dnd-html5-backend": "^16.0.1",
|
|
59
|
+
"react-dom": "^18.2.0",
|
|
60
|
+
"react-svg": "^16.1.17",
|
|
61
|
+
"react-zoom-pan-pinch": "^3.3.0",
|
|
62
|
+
"styled-components": "^5.3.11"
|
|
63
|
+
},
|
|
64
|
+
"readme": "ERROR: No README data found!"
|
|
65
|
+
}
|