flow-lib-creomnia 1.0.3 → 1.0.5-dev.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.
Files changed (35) hide show
  1. package/README.md +117 -12
  2. package/lib/assets/icons/ChoiceNodeIcon.svg +16 -16
  3. package/lib/assets/icons/LeftArrowIcon.svg +3 -3
  4. package/lib/assets/icons/ParallelIcon.svg +5 -5
  5. package/lib/assets/icons/RightArrowIcon.svg +3 -3
  6. package/lib/assets/icons/flowIcon.svg +7 -7
  7. package/lib/modules/common/components/ZoomToolbar/styled.js +7 -7
  8. package/lib/modules/common/types/index.d.ts +3 -0
  9. package/lib/modules/connection/components/AddButton/styled.js +26 -26
  10. package/lib/modules/connection/components/BaseConnection/styled.js +16 -16
  11. package/lib/modules/connection/components/ConnectionWithButton/styled.js +37 -37
  12. package/lib/modules/connection/services/connectionServices.js +53 -47
  13. package/lib/modules/flow/components/FlowSandbox/styled.js +22 -22
  14. package/lib/modules/flow/components/Space/styled.js +8 -8
  15. package/lib/modules/flow/types/index.d.ts +2 -0
  16. package/lib/modules/node/components/BaseNode/index.js +1 -1
  17. package/lib/modules/node/components/BaseNode/styled.js +83 -83
  18. package/lib/modules/node/components/ChoiseNode/index.js +1 -1
  19. package/lib/modules/node/components/ChoiseNode/styled.js +27 -27
  20. package/lib/modules/node/components/EndNode/styled.js +10 -10
  21. package/lib/modules/node/components/HubNode/styled.js +5 -5
  22. package/lib/modules/node/components/NodesMenu/index.js +10 -5
  23. package/lib/modules/node/components/NodesMenu/styled.js +52 -52
  24. package/lib/modules/node/components/ParallelNode/styled.js +9 -9
  25. package/lib/modules/node/components/StartNode/styled.js +10 -10
  26. package/lib/modules/node/contexts/SettingsContext/index.js +1 -1
  27. package/lib/modules/node/contexts/SettingsContext/styled.js +30 -30
  28. package/lib/modules/node/enums/index.d.ts +4 -0
  29. package/lib/modules/node/enums/index.js +6 -1
  30. package/lib/modules/node/index.js +1 -1
  31. package/lib/modules/node/services/expandCoefficientServices.d.ts +1 -1
  32. package/lib/modules/node/services/expandCoefficientServices.js +7 -2
  33. package/lib/modules/node/services/nodeServices.js +4 -2
  34. package/lib/modules/node/types/index.d.ts +1 -1
  35. package/package.json +68 -65
package/README.md CHANGED
@@ -1,12 +1,117 @@
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
+ # creo-flow
2
+
3
+ [![CI](https://github.com/creomnia/creo-flow/workflows/CI/badge.svg)](https://github.com/creomnia/creo-flow/actions/workflows/ci.yml)
4
+
5
+ ## Development Workflow
6
+
7
+ ### Branch Strategy
8
+
9
+ This repository uses a three-tier branch strategy with branch protection:
10
+
11
+ ```
12
+ feature branches → dev → qa → main
13
+ ```
14
+
15
+ **All protected branches (dev, qa, main) require Pull Requests.**
16
+
17
+ ### Step-by-Step Process
18
+
19
+ #### 1. Create Feature Branch
20
+
21
+ ```bash
22
+ git checkout dev
23
+ git pull origin dev
24
+ git checkout -b feature/your-feature-name
25
+ ```
26
+
27
+ #### 2. Develop and Push
28
+
29
+ ```bash
30
+ # Make your changes
31
+ git add <files>
32
+ git commit -m "feat: your feature description"
33
+ git push origin feature/your-feature-name
34
+ ```
35
+
36
+ #### 3. Create PR to `dev`
37
+
38
+ - Open PR on GitHub: `feature/your-feature-name` → `dev`
39
+ - Title: Use conventional commits (`feat:`, `fix:`, `chore:`, etc.)
40
+ - Get code review and merge
41
+ - Result: Publishes to NPM with `dev` tag
42
+
43
+ #### 4. Promote to `qa`
44
+
45
+ - Open PR on GitHub: `dev` → `qa`
46
+ - Title: `chore: promote dev to qa`
47
+ - Merge PR
48
+ - Result: Publishes to NPM with `qa` tag
49
+
50
+ #### 5. Promote to `main`
51
+
52
+ - Open PR on GitHub: `qa` → `main`
53
+ - Title: **`Release: X.Y.Z`** (e.g., "Release: 1.0.6")
54
+ - Merge PR
55
+ - Result: Publishes production version X.Y.Z to NPM
56
+
57
+ ### Important Rules
58
+
59
+ ❌ **NEVER** create PRs directly to `main` from feature branches
60
+
61
+ ❌ **NEVER** skip the `qa` branch when promoting to `main`
62
+
63
+ ❌ **NEVER** try to push directly to `dev`, `qa`, or `main`
64
+
65
+ ✅ **ALWAYS** follow the PR flow: feature → `dev` → `qa` → `main`
66
+
67
+ ✅ **ALWAYS** use PR title `Release: X.Y.Z` when merging to `main`
68
+
69
+ ### NPM Publishing
70
+
71
+ | From Branch | To Branch | PR Title Format | NPM Result |
72
+ |-------------|-----------|-----------------|------------|
73
+ | `feature/*` | `dev` | `feat:` / `fix:` / `chore:` | Publishes with `dev` tag (e.g., `1.0.5-dev.1`) |
74
+ | `dev` | `qa` | `chore: promote dev to qa` | Publishes with `qa` tag (e.g., `1.0.5-qa.1`) |
75
+ | `qa` | `main` | `Release: X.Y.Z` | Publishes production version `X.Y.Z` |
76
+
77
+ ### Commit Message Convention
78
+
79
+ Use conventional commit style:
80
+ - `feat:` - New feature
81
+ - `fix:` - Bug fix
82
+ - `chore:` - Maintenance tasks
83
+ - `docs:` - Documentation changes
84
+ - `refactor:` - Code refactoring
85
+ - `test:` - Adding tests
86
+
87
+ ### Example Workflow
88
+
89
+ ```bash
90
+ # 1. Create feature branch
91
+ git checkout dev
92
+ git pull origin dev
93
+ git checkout -b feature/add-new-node-type
94
+
95
+ # 2. Develop
96
+ git add src/modules/node/components/NewNode.tsx
97
+ git commit -m "feat: add new node type component"
98
+ git push origin feature/add-new-node-type
99
+
100
+ # 3. Open PR: feature/add-new-node-type → dev
101
+ # Title: "feat: add new node type component"
102
+ # Merge after review
103
+
104
+ # 4. Open PR: dev → qa
105
+ # Title: "chore: promote dev to qa"
106
+ # Merge
107
+
108
+ # 5. Open PR: qa → main
109
+ # Title: "Release: 1.0.6"
110
+ # Merge
111
+ ```
112
+
113
+ ### What to Do If PR is Accidentally Opened to Main
114
+
115
+ 1. **Close the PR** (don't merge it)
116
+ 2. **Change the base branch** to `dev` on GitHub (use "Edit" button)
117
+ 3. Or create a new PR: feature branch → `dev`
package/lib/assets/icons/ChoiceNodeIcon.svg CHANGED
@@ -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>
package/lib/assets/icons/LeftArrowIcon.svg CHANGED
@@ -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>
package/lib/assets/icons/ParallelIcon.svg CHANGED
@@ -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>
package/lib/assets/icons/RightArrowIcon.svg CHANGED
@@ -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>
package/lib/assets/icons/flowIcon.svg CHANGED
@@ -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>
package/lib/modules/common/components/ZoomToolbar/styled.js CHANGED
@@ -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
  `;
package/lib/modules/common/types/index.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  /// <reference types="react" />
2
+ import { NodeMenuItemType } from "../../node/enums";
2
3
  export type MenuItemType = {
3
4
  name: string;
4
5
  value: string;
5
6
  icon: JSX.Element;
7
+ type: NodeMenuItemType;
8
+ disabled?: boolean;
6
9
  };
7
10
  export type MenuTabType = {
8
11
  name: string;
package/lib/modules/connection/components/AddButton/styled.js CHANGED
@@ -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;
package/lib/modules/connection/components/BaseConnection/styled.js CHANGED
@@ -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;
package/lib/modules/connection/components/ConnectionWithButton/styled.js CHANGED
@@ -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
  `;
package/lib/modules/connection/services/connectionServices.js CHANGED
@@ -30,53 +30,59 @@ class ConnectionServices {
30
30
  },
31
31
  };
32
32
  };
33
- buildConnections = ({ nodeDrawers, menuTabs, addNewNodeCallback, processedNodeIds, failedNodeId }) => nodeDrawers.reduce((connectionDrawers, nodeDrawer) => {
34
- const childrenIds = nodeDrawer.nodeData?.childrenIds || [];
35
- const children = nodeDrawers.filter((nodeDrawer) => childrenIds?.includes(nodeDrawer.id));
36
- if (!children.length)
37
- return connectionDrawers;
38
- const isNodeWithDoubleConnections = config_1.Config.NODES_WITH_DOUBLE_CONNECTION.includes(nodeDrawer.type);
39
- if (isNodeWithDoubleConnections) {
40
- const leftChild = nodeDrawers.find((node) => node.nodeData?.id === nodeDrawer.nodeData?.leftChildrenId);
41
- const rightChild = nodeDrawers.find((node) => node.nodeData?.id === nodeDrawer.nodeData?.rightChildrenId);
42
- const newConnectionDrawers = [
43
- this.createDrawerConnection({
44
- failedNodeId,
45
- processedNodeIds,
46
- nodeDrawer,
47
- index: 1,
48
- menuTabs,
49
- child: leftChild,
50
- addNewNodeCallback,
51
- curveType: leftChild?.nodeData?.startSectionNodeId
52
- ? enums_2.ConnectionCurveEnum.LEFT
53
- : undefined,
54
- }),
55
- this.createDrawerConnection({
56
- failedNodeId,
57
- processedNodeIds,
58
- nodeDrawer,
59
- index: 2,
60
- menuTabs,
61
- child: rightChild,
62
- addNewNodeCallback,
63
- curveType: rightChild?.nodeData?.startSectionNodeId
64
- ? enums_2.ConnectionCurveEnum.RIGHT
65
- : undefined,
66
- }),
67
- ];
33
+ buildConnections = ({ nodeDrawers, menuTabs, addNewNodeCallback, processedNodeIds, failedNodeId }) => {
34
+ const drawerById = new Map(nodeDrawers.map((d) => [d.id, d]));
35
+ const drawerByNodeDataId = new Map(nodeDrawers.map((d) => [d.nodeData?.id, d]));
36
+ return nodeDrawers.reduce((connectionDrawers, nodeDrawer) => {
37
+ const childrenIds = nodeDrawer.nodeData?.childrenIds || [];
38
+ const children = childrenIds
39
+ .map((id) => drawerById.get(id))
40
+ .filter((d) => !!d);
41
+ if (!children.length)
42
+ return connectionDrawers;
43
+ const isNodeWithDoubleConnections = config_1.Config.NODES_WITH_DOUBLE_CONNECTION.includes(nodeDrawer.type);
44
+ if (isNodeWithDoubleConnections) {
45
+ const leftChild = drawerByNodeDataId.get(nodeDrawer.nodeData?.leftChildrenId);
46
+ const rightChild = drawerByNodeDataId.get(nodeDrawer.nodeData?.rightChildrenId);
47
+ const newConnectionDrawers = [
48
+ this.createDrawerConnection({
49
+ failedNodeId,
50
+ processedNodeIds,
51
+ nodeDrawer,
52
+ index: 1,
53
+ menuTabs,
54
+ child: leftChild,
55
+ addNewNodeCallback,
56
+ curveType: leftChild?.nodeData?.startSectionNodeId
57
+ ? enums_2.ConnectionCurveEnum.LEFT
58
+ : undefined,
59
+ }),
60
+ this.createDrawerConnection({
61
+ failedNodeId,
62
+ processedNodeIds,
63
+ nodeDrawer,
64
+ index: 2,
65
+ menuTabs,
66
+ child: rightChild,
67
+ addNewNodeCallback,
68
+ curveType: rightChild?.nodeData?.startSectionNodeId
69
+ ? enums_2.ConnectionCurveEnum.RIGHT
70
+ : undefined,
71
+ }),
72
+ ];
73
+ return [...connectionDrawers, ...newConnectionDrawers];
74
+ }
75
+ const newConnectionDrawers = children.map((child, index) => this.createDrawerConnection({
76
+ failedNodeId,
77
+ processedNodeIds,
78
+ nodeDrawer,
79
+ index: index + 1,
80
+ menuTabs,
81
+ child: child,
82
+ addNewNodeCallback,
83
+ }));
68
84
  return [...connectionDrawers, ...newConnectionDrawers];
69
- }
70
- const newConnectionDrawers = children.map((child, index) => this.createDrawerConnection({
71
- failedNodeId,
72
- processedNodeIds,
73
- nodeDrawer,
74
- index: index + 1,
75
- menuTabs,
76
- child: child,
77
- addNewNodeCallback,
78
- }));
79
- return [...connectionDrawers, ...newConnectionDrawers];
80
- }, []);
85
+ }, []);
86
+ };
81
87
  }
82
88
  exports.connectionServices = new ConnectionServices();
package/lib/modules/flow/components/FlowSandbox/styled.js CHANGED
@@ -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
  `;
package/lib/modules/flow/components/Space/styled.js CHANGED
@@ -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
  `;
package/lib/modules/flow/types/index.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  /// <reference types="react" />
2
2
  import { MenuTabType, Theme, UpdateNodePosition } from "../../common/types";
3
+ import { NodeMenuItemType } from "../../node/enums";
3
4
  import { NodeType } from "../../node/types";
4
5
  export type AddNewNodeCallbackType = (params: {
5
6
  menuItemId: string;
6
7
  parentId: string | undefined;
7
8
  connectionIndex: number;
9
+ nodeType: NodeMenuItemType;
8
10
  }) => void;
9
11
  export type NodeFlowPropsType = {
10
12
  nodes: NodeType[];
package/lib/modules/node/components/BaseNode/index.js CHANGED
@@ -45,7 +45,7 @@ const BaseNode = ({ nodeData, isProcessed, isFailed, failedNodeColor, onRedirect
45
45
  }
46
46
  };
47
47
  const component = (0, react_1.useRef)();
48
- return ((0, jsx_runtime_1.jsx)(DragWrapper_1.DragWrapper, { onUpdatePosition: onUpdatePosition, nodeId: nodeData?.id || '', children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: component, children: (0, jsx_runtime_1.jsxs)(AnimatedContainer, { onClick: onNodeClick, style: props, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(styled_1.IconWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.IconBorder, {}), nodeData?.icon] }), (0, jsx_runtime_1.jsxs)(styled_1.ContentContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.NameOfExtension, { children: ["Type: ", nodeData?.extensionName || 'unknown'] }), (0, jsx_runtime_1.jsx)(styled_1.Name, { children: nodeData?.name })] }), nodeData?.childFlowId &&
48
+ return ((0, jsx_runtime_1.jsx)(DragWrapper_1.DragWrapper, { onUpdatePosition: onUpdatePosition, nodeId: nodeData?.id || '', children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: component, children: (0, jsx_runtime_1.jsxs)(AnimatedContainer, { onClick: onNodeClick, style: props, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(styled_1.IconWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.IconBorder, {}), nodeData?.icon] }), (0, jsx_runtime_1.jsxs)(styled_1.ContentContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.NameOfExtension, { children: ["Type: ", nodeData?.nodeType || 'unknown'] }), (0, jsx_runtime_1.jsx)(styled_1.Name, { children: nodeData?.name })] }), nodeData?.childFlowId &&
49
49
  (0, jsx_runtime_1.jsx)(styled_1.ChildFlowWrapper, { onClick: redirectToParentFlow, children: (0, jsx_runtime_1.jsx)("img", { src: flowIcon_svg_1.default }) })] }) }) }));
50
50
  };
51
51
  exports.default = BaseNode;