@uipath/apollo-react 4.6.3 → 4.8.0

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 (80) hide show
  1. package/dist/canvas/components/AgentCanvas/nodes/AgentNode.cjs +0 -4
  2. package/dist/canvas/components/AgentCanvas/nodes/AgentNode.d.ts.map +1 -1
  3. package/dist/canvas/components/AgentCanvas/nodes/AgentNode.js +0 -4
  4. package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.cjs +5 -10
  5. package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.d.ts.map +1 -1
  6. package/dist/canvas/components/AgentCanvas/nodes/ResourceNode.js +5 -10
  7. package/dist/canvas/components/BaseNode/BaseNode.cjs +93 -86
  8. package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
  9. package/dist/canvas/components/BaseNode/BaseNode.js +88 -81
  10. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.cjs +68 -0
  11. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.d.ts +9 -0
  12. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.d.ts.map +1 -0
  13. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.js +34 -0
  14. package/dist/canvas/components/BaseNode/BaseNodeConfigContext.d.ts +2 -1
  15. package/dist/canvas/components/BaseNode/BaseNodeConfigContext.d.ts.map +1 -1
  16. package/dist/canvas/components/BaseNode/BaseNodeContainer.cjs +88 -0
  17. package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts +21 -0
  18. package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts.map +1 -0
  19. package/dist/canvas/components/BaseNode/BaseNodeContainer.js +51 -0
  20. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.cjs +49 -0
  21. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts +9 -0
  22. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts.map +1 -0
  23. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.js +15 -0
  24. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.cjs +62 -0
  25. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.d.ts +9 -0
  26. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.d.ts.map +1 -0
  27. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.js +28 -0
  28. package/dist/canvas/components/BaseNode/NodeLabel.cjs +64 -18
  29. package/dist/canvas/components/BaseNode/NodeLabel.d.ts +8 -1
  30. package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map +1 -1
  31. package/dist/canvas/components/BaseNode/NodeLabel.js +58 -15
  32. package/dist/canvas/components/ButtonHandle/ButtonHandle.cjs +75 -128
  33. package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts +6 -5
  34. package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts.map +1 -1
  35. package/dist/canvas/components/ButtonHandle/ButtonHandle.js +77 -130
  36. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.cjs +4 -7
  37. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts.map +1 -1
  38. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.js +4 -7
  39. package/dist/canvas/components/ButtonHandle/HandleButton.cjs +152 -0
  40. package/dist/canvas/components/ButtonHandle/HandleButton.d.ts +16 -0
  41. package/dist/canvas/components/ButtonHandle/HandleButton.d.ts.map +1 -0
  42. package/dist/canvas/components/ButtonHandle/HandleButton.js +115 -0
  43. package/dist/canvas/components/ButtonHandle/HandleLabel.cjs +62 -0
  44. package/dist/canvas/components/ButtonHandle/HandleLabel.d.ts +9 -0
  45. package/dist/canvas/components/ButtonHandle/HandleLabel.d.ts.map +1 -0
  46. package/dist/canvas/components/ButtonHandle/HandleLabel.js +28 -0
  47. package/dist/canvas/components/ButtonHandle/HandleNotch.cjs +53 -0
  48. package/dist/canvas/components/ButtonHandle/HandleNotch.d.ts +9 -0
  49. package/dist/canvas/components/ButtonHandle/HandleNotch.d.ts.map +1 -0
  50. package/dist/canvas/components/ButtonHandle/HandleNotch.js +19 -0
  51. package/dist/canvas/components/ButtonHandle/SmartHandle.cjs +28 -91
  52. package/dist/canvas/components/ButtonHandle/SmartHandle.d.ts +1 -2
  53. package/dist/canvas/components/ButtonHandle/SmartHandle.d.ts.map +1 -1
  54. package/dist/canvas/components/ButtonHandle/SmartHandle.js +29 -92
  55. package/dist/canvas/components/ButtonHandle/useButtonHandles.cjs +5 -4
  56. package/dist/canvas/components/ButtonHandle/useButtonHandles.d.ts +4 -2
  57. package/dist/canvas/components/ButtonHandle/useButtonHandles.d.ts.map +1 -1
  58. package/dist/canvas/components/ButtonHandle/useButtonHandles.js +5 -4
  59. package/dist/canvas/components/CodedAgent/CodedAgentFlow.cjs +4 -4
  60. package/dist/canvas/components/CodedAgent/CodedAgentFlow.js +4 -4
  61. package/dist/canvas/constants.cjs +64 -0
  62. package/dist/canvas/constants.d.ts +16 -0
  63. package/dist/canvas/constants.d.ts.map +1 -1
  64. package/dist/canvas/constants.js +17 -1
  65. package/dist/canvas/index.cjs +39 -35
  66. package/dist/canvas/index.d.ts +1 -0
  67. package/dist/canvas/index.d.ts.map +1 -1
  68. package/dist/canvas/index.js +1 -0
  69. package/dist/canvas/storybook-utils/manifests/node-definitions.d.ts.map +1 -1
  70. package/dist/canvas/styles/reactflow-reset.css +12 -0
  71. package/dist/canvas/styles/tailwind.canvas.css +1 -1
  72. package/package.json +2 -2
  73. package/dist/canvas/components/BaseNode/BaseNode.styles.cjs +0 -410
  74. package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts +0 -75
  75. package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts.map +0 -1
  76. package/dist/canvas/components/BaseNode/BaseNode.styles.js +0 -342
  77. package/dist/canvas/components/ButtonHandle/ButtonHandle.styles.cjs +0 -220
  78. package/dist/canvas/components/ButtonHandle/ButtonHandle.styles.d.ts +0 -46
  79. package/dist/canvas/components/ButtonHandle/ButtonHandle.styles.d.ts.map +0 -1
  80. package/dist/canvas/components/ButtonHandle/ButtonHandle.styles.js +0 -161
@@ -1,342 +0,0 @@
1
- import { css } from "@emotion/react";
2
- import styled from "@emotion/styled";
3
- import { Skeleton } from "@uipath/apollo-wind";
4
- import { getExecutionStatusBorder, pulseAnimation } from "../../styles/execution-status.js";
5
- const GRID_UNIT = 16;
6
- const NODE_HEIGHT_DEFAULT = 6 * GRID_UNIT;
7
- const NODE_HEIGHT_FOOTER_BUTTON = 9 * GRID_UNIT;
8
- const NODE_HEIGHT_FOOTER_SINGLE = 10 * GRID_UNIT;
9
- const NODE_HEIGHT_FOOTER_DOUBLE = 11 * GRID_UNIT;
10
- const getIconDimensions = (shape, nodeHeight, nodeWidth)=>{
11
- const height = nodeHeight ?? 96;
12
- const width = nodeWidth ?? 96;
13
- const widthDimension = height !== width && 'rectangle' === shape ? height : width;
14
- const widthScaleFactor = widthDimension / 96;
15
- const iconWidth = 72 * widthScaleFactor;
16
- const heightScaleFactor = height / 96;
17
- const isExpandable = height !== width && 'rectangle' !== shape;
18
- const iconHeight = isExpandable ? 84 * heightScaleFactor : 72 * heightScaleFactor;
19
- return {
20
- iconWidth,
21
- iconHeight
22
- };
23
- };
24
- const getValidationStatusBorder = (validationStatus)=>{
25
- switch(validationStatus){
26
- case 'ERROR':
27
- case 'CRITICAL':
28
- return css`
29
- border-color: var(--canvas-error-icon);
30
- background: var(--canvas-error-background);
31
- animation: ${pulseAnimation('--canvas-error-icon')} 2s infinite;
32
- `;
33
- default:
34
- return null;
35
- }
36
- };
37
- const getInteractionStateBorder = (interactionState)=>{
38
- switch(interactionState){
39
- case 'hover':
40
- return css`
41
- outline: 4px solid var(--canvas-secondary-focused);
42
- `;
43
- case 'disabled':
44
- return css`
45
- opacity: 0.5;
46
- cursor: not-allowed;
47
- `;
48
- case 'drag':
49
- return css`
50
- cursor: grabbing;
51
- opacity: 0.8;
52
- `;
53
- default:
54
- return null;
55
- }
56
- };
57
- const getSuggestionTypeBorder = (suggestionType)=>{
58
- const borderColorVar = getSuggestionTypeBorderColorVar(suggestionType);
59
- const backgroundColorVar = getSuggestionTypeBackgroundColorVar(suggestionType);
60
- if (!borderColorVar || !backgroundColorVar) return null;
61
- return css`
62
- border-color: var(${borderColorVar});
63
- background: var(${backgroundColorVar});
64
- animation: ${pulseAnimation(borderColorVar)} 2s infinite;
65
- `;
66
- };
67
- const getSuggestionTypeBorderColorVar = (suggestionType)=>{
68
- switch(suggestionType){
69
- case 'add':
70
- return '--canvas-success-icon';
71
- case 'update':
72
- return '--canvas-warning-icon';
73
- case 'delete':
74
- return '--canvas-error-icon';
75
- default:
76
- return null;
77
- }
78
- };
79
- const getSuggestionTypeBackgroundColorVar = (suggestionType)=>{
80
- switch(suggestionType){
81
- case 'add':
82
- return '--canvas-success-background';
83
- case 'update':
84
- return '--canvas-warning-background';
85
- case 'delete':
86
- return '--canvas-error-background';
87
- default:
88
- return null;
89
- }
90
- };
91
- const BaseContainer = styled.div`
92
- position: relative;
93
- width: ${({ shape, width })=>{
94
- const defaultWidth = 'rectangle' === shape ? 288 : 96;
95
- if (width && 96 !== width && 288 !== width) return `${width}px`;
96
- return `${defaultWidth}px`;
97
- }};
98
- height: ${({ height, hasFooter, footerVariant })=>{
99
- if (hasFooter) switch(footerVariant){
100
- case 'button':
101
- return `${NODE_HEIGHT_FOOTER_BUTTON}px`;
102
- case 'single':
103
- return `${NODE_HEIGHT_FOOTER_SINGLE}px`;
104
- case 'double':
105
- return `${NODE_HEIGHT_FOOTER_DOUBLE}px`;
106
- default:
107
- return 'auto';
108
- }
109
- return height ? `${height}px` : `${NODE_HEIGHT_DEFAULT}px`;
110
- }};
111
- background: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background)'};
112
- border: 1.5px solid var(--canvas-border-de-emp);
113
- border-radius: ${({ shape })=>{
114
- if ('circle' === shape) return '50%';
115
- return '16px';
116
- }};
117
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
118
- display: flex;
119
- flex-direction: ${({ shape })=>'rectangle' === shape ? 'row' : 'column'};
120
- flex-wrap: ${({ hasFooter })=>hasFooter ? 'wrap' : 'nowrap'};
121
- align-items: center;
122
- justify-content: ${({ shape })=>'rectangle' === shape ? 'flex-start' : 'center'};
123
- gap: ${({ shape })=>'rectangle' === shape ? '12px' : '0'};
124
- padding: ${({ shape, height, hasFooter })=>{
125
- if ('rectangle' === shape) {
126
- if (hasFooter) return '16px';
127
- const scaleFactor = height ? height / 100 : 1;
128
- return `${14 * scaleFactor}px`;
129
- }
130
- return '0';
131
- }};
132
- cursor: pointer;
133
-
134
- ${({ executionStatus })=>getExecutionStatusBorder(executionStatus)}
135
- ${({ validationStatus })=>getValidationStatusBorder(validationStatus)}
136
- ${({ interactionState })=>getInteractionStateBorder(interactionState)}
137
- ${({ suggestionType })=>getSuggestionTypeBorder(suggestionType)}
138
-
139
- ${({ selected, suggestionType })=>{
140
- if (selected && suggestionType) {
141
- const borderColorVar = getSuggestionTypeBorderColorVar(suggestionType);
142
- return css`
143
- border-color: var(${borderColorVar});
144
- outline: 4px solid color-mix(in srgb, var(${borderColorVar}) 40%, transparent);
145
- `;
146
- }
147
- if (selected) return css`
148
- border-color: var(--canvas-primary);
149
- outline: 4px solid var(--canvas-secondary-pressed);
150
- `;
151
- return '';
152
- }}
153
- `;
154
- const BaseIconWrapper = styled.div`
155
- ${({ height, width, shape })=>{
156
- const { iconWidth, iconHeight } = getIconDimensions(shape, height, width);
157
- return css`
158
- width: ${iconWidth}px;
159
- height: ${iconHeight}px;
160
- `;
161
- }}
162
- display: flex;
163
- align-items: center;
164
- justify-content: center;
165
- color: ${({ color })=>color || 'var(--canvas-foreground)'};
166
- background: ${({ backgroundColor })=>backgroundColor || 'var(--canvas-background-secondary)'};
167
- border-radius: ${({ shape })=>{
168
- if ('circle' === shape) return '50%';
169
- return '8px';
170
- }};
171
-
172
- svg {
173
- width: ${({ width })=>{
174
- const scaleFactor = width ? width / 96 : 1;
175
- return `${40 * scaleFactor}px`;
176
- }};
177
- height: ${({ height })=>{
178
- const scaleFactor = height ? height / 96 : 1;
179
- return `${40 * scaleFactor}px`;
180
- }};
181
- }
182
-
183
- img {
184
- width: ${({ width })=>{
185
- const scaleFactor = width ? width / 96 : 1;
186
- return `${40 * scaleFactor}px`;
187
- }};
188
- height: ${({ height })=>{
189
- const scaleFactor = height ? height / 96 : 1;
190
- return `${40 * scaleFactor}px`;
191
- }};
192
- object-fit: contain;
193
- }
194
- `;
195
- const BaseTextContainer = styled.div`
196
- ${({ shape, hasBottomHandles })=>'rectangle' === shape ? css`
197
- flex: 1;
198
- min-width: 0;
199
- display: flex;
200
- flex-direction: column;
201
- align-items: flex-start;
202
- text-align: left;
203
- ` : css`
204
- position: absolute;
205
- bottom: ${hasBottomHandles ? '-40px' : '-8px'};
206
- width: 150%;
207
- left: 50%;
208
- transform: translateX(-50%) translateY(100%);
209
- display: flex;
210
- flex-direction: column;
211
- align-items: center;
212
- text-align: center;
213
- z-index: 10;
214
- transition: transform 0.2s ease-in-out;
215
-
216
- /* When there's a bottom handle, offset text to the right to avoid overlapping */
217
- ${hasBottomHandles && css`
218
- transform: translateX(20%) translateY(50%);
219
- text-align: left;
220
- `}
221
- `}
222
- `;
223
- const BaseHeader = styled.div`
224
- font-weight: 600;
225
- font-size: 13px;
226
- color: var(--canvas-foreground);
227
- ${({ backgroundColor })=>backgroundColor && css`
228
- background-color: ${backgroundColor};
229
- padding: 2px 6px;
230
- border-radius: 4px;
231
- `}
232
- line-height: 1.4;
233
- margin-bottom: 2px;
234
- overflow: hidden;
235
- ${({ shape })=>'rectangle' === shape ? css`
236
- width: 100%;
237
- white-space: nowrap;
238
- text-overflow: ellipsis;
239
- ` : css`
240
- word-break: break-word;
241
- display: -webkit-box;
242
- -webkit-box-orient: vertical;
243
- -webkit-line-clamp: 3;
244
- `}
245
- `;
246
- const BaseSubHeader = styled.div`
247
- font-size: 11px;
248
- color: var(--canvas-foreground-de-emp);
249
- line-height: 1.3;
250
- word-break: break-word;
251
- overflow: hidden;
252
- display: -webkit-box;
253
- -webkit-box-orient: vertical;
254
- ${({ shape })=>'rectangle' === shape ? css`
255
- width: 100%;
256
- -webkit-line-clamp: 2;
257
- ` : css`
258
- -webkit-line-clamp: 5;
259
- `}
260
- `;
261
- const EditableLabel = styled.textarea`
262
- resize: none;
263
- field-sizing: ${({ shape })=>'rectangle' === shape ? 'fixed' : 'content'};
264
- font-weight: ${({ variant })=>'subtext' === variant ? '400' : '600'};
265
- font-size: ${({ variant })=>'subtext' === variant ? '11px' : '13px'};
266
- line-height: ${({ variant })=>'subtext' === variant ? '1.3' : '1.4'};
267
- font-family: inherit;
268
- color: var(--canvas-foreground);
269
- border: none;
270
- border-radius: 4px;
271
- outline: 1px dashed var(--canvas-border-de-emp);
272
- margin-bottom: ${({ variant })=>'subtext' === variant ? 0 : '2px'};
273
- max-width: 100%;
274
-
275
- ${({ backgroundColor })=>backgroundColor ? css`
276
- background-color: ${backgroundColor};
277
- padding: 2px 6px;
278
- ` : 'background-color: color-mix(in srgb, var(--canvas-background) 10%, transparent);'}
279
-
280
- ${({ shape })=>'rectangle' === shape ? css`
281
- width: 100%;
282
- ` : css`
283
- text-align: center;
284
- `}
285
- `;
286
- const EmptyLabelPlaceholder = styled.div`
287
- font-weight: 600;
288
- font-size: 13px;
289
- line-height: 1.4;
290
- color: var(--canvas-foreground-de-emp);
291
- background: transparent;
292
- border: 1px dashed var(--canvas-border-de-emp);
293
- border-radius: 4px;
294
- cursor: pointer;
295
- opacity: 0;
296
- transition: opacity 0.2s ease;
297
- min-width: 20px;
298
- min-height: 20px;
299
-
300
- &:hover {
301
- opacity: 1;
302
- background-color: color-mix(in srgb, var(--canvas-background) 10%, transparent);
303
- }
304
- `;
305
- const BaseBadgeSlot = styled.div`
306
- display: flex;
307
- align-items: center;
308
- justify-content: center;
309
- width: 20px;
310
- height: 20px;
311
- background: transparent;
312
- position: absolute;
313
- ${({ position, shape })=>{
314
- const offset = 'circle' === shape ? '12px' : '6px';
315
- switch(position){
316
- case 'top-left':
317
- return `top: ${offset}; left: ${offset};`;
318
- case 'top-right':
319
- return `top: ${offset}; right: ${offset};`;
320
- case 'bottom-left':
321
- return `bottom: ${offset}; left: ${offset};`;
322
- case 'bottom-right':
323
- return `bottom: ${offset}; right: ${offset};`;
324
- }
325
- }}
326
- `;
327
- const BaseSkeletonIcon = styled(Skeleton, {
328
- shouldForwardProp: (prop)=>'shape' !== prop && 'nodeHeight' !== prop && 'nodeWidth' !== prop
329
- })`
330
- flex-grow: 0;
331
- flex-shrink: 0;
332
- ${({ shape, nodeHeight, nodeWidth })=>{
333
- const { iconWidth, iconHeight } = getIconDimensions(shape, nodeHeight, nodeWidth);
334
- const isCircle = 'circle' === shape;
335
- return css`
336
- width: ${iconWidth}px;
337
- height: ${iconHeight}px;
338
- border-radius: ${isCircle ? '50%' : '8px'};
339
- `;
340
- }}
341
- `;
342
- export { BaseBadgeSlot, BaseContainer, BaseHeader, BaseIconWrapper, BaseSkeletonIcon, BaseSubHeader, BaseTextContainer, EditableLabel, EmptyLabelPlaceholder };
@@ -1,220 +0,0 @@
1
- "use strict";
2
- var __webpack_require__ = {};
3
- (()=>{
4
- __webpack_require__.n = (module)=>{
5
- var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
6
- __webpack_require__.d(getter, {
7
- a: getter
8
- });
9
- return getter;
10
- };
11
- })();
12
- (()=>{
13
- __webpack_require__.d = (exports1, definition)=>{
14
- for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
15
- enumerable: true,
16
- get: definition[key]
17
- });
18
- };
19
- })();
20
- (()=>{
21
- __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
22
- })();
23
- (()=>{
24
- __webpack_require__.r = (exports1)=>{
25
- if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
26
- value: 'Module'
27
- });
28
- Object.defineProperty(exports1, '__esModule', {
29
- value: true
30
- });
31
- };
32
- })();
33
- var __webpack_exports__ = {};
34
- __webpack_require__.r(__webpack_exports__);
35
- __webpack_require__.d(__webpack_exports__, {
36
- StyledLine: ()=>StyledLine,
37
- StyledNotch: ()=>StyledNotch,
38
- StyledWrapper: ()=>StyledWrapper,
39
- StyledAddButton: ()=>StyledAddButton,
40
- StyledHandle: ()=>StyledHandle,
41
- StyledLabel: ()=>StyledLabel
42
- });
43
- const jsx_runtime_namespaceObject = require("react/jsx-runtime");
44
- const react_namespaceObject = require("@emotion/react");
45
- const styled_namespaceObject = require("@emotion/styled");
46
- var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
47
- const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
48
- const external_motion_react_namespaceObject = require("motion/react");
49
- const external_useButtonHandleSizeAndPosition_cjs_namespaceObject = require("./useButtonHandleSizeAndPosition.cjs");
50
- const StyledAddButton = styled_default()(external_motion_react_namespaceObject.motion.div)`
51
- display: flex;
52
- align-items: center;
53
- justify-content: center;
54
- width: 24px;
55
- height: 24px;
56
- background: var(--canvas-background);
57
- color: var(--canvas-foreground-emp);
58
- border-radius: 50%;
59
- border: 1px solid var(--canvas-border-de-emp);
60
- cursor: pointer;
61
- transition:
62
- background-color 0.2s ease,
63
- color 0.2s ease,
64
- border-color 0.2s ease;
65
-
66
- &:hover {
67
- background-color: var(--canvas-selection-indicator);
68
- color: var(--canvas-background);
69
- border-color: var(--canvas-selection-indicator);
70
- }
71
- `;
72
- const StyledWrapper = styled_default().div`
73
- position: absolute;
74
- display: flex;
75
- align-items: center;
76
- justify-content: center;
77
- pointer-events: none;
78
-
79
- ${(p)=>p.$position === react_cjs_namespaceObject.Position.Top && (0, react_namespaceObject.css)`
80
- flex-direction: column-reverse;
81
- bottom: 100%;
82
- left: 50%;
83
- transform: translateX(-50%);
84
- `}
85
- ${(p)=>p.$position === react_cjs_namespaceObject.Position.Bottom && (0, react_namespaceObject.css)`
86
- flex-direction: column;
87
- top: 100%;
88
- left: 50%;
89
- transform: translateX(-50%);
90
- `}
91
- ${(p)=>p.$position === react_cjs_namespaceObject.Position.Left && (0, react_namespaceObject.css)`
92
- flex-direction: row-reverse;
93
- right: 100%;
94
- top: 50%;
95
- transform: translateY(-50%);
96
- `}
97
- ${(p)=>p.$position === react_cjs_namespaceObject.Position.Right && (0, react_namespaceObject.css)`
98
- flex-direction: row;
99
- left: 100%;
100
- top: 50%;
101
- transform: translateY(-50%);
102
- `}
103
- `;
104
- const StyledLine = styled_default().div`
105
- background-color: transparent;
106
- border-style: solid;
107
- border-width: 1px;
108
- border-color: ${(p)=>p.$selected ? 'var(--canvas-selection-indicator)' : 'var(--canvas-border-de-emp)'};
109
- height: ${(p)=>p.$isVertical ? p.$size : '1px'};
110
- width: ${(p)=>p.$isVertical ? '1px' : p.$size};
111
- transition: border-color 0.2s ease-in-out;
112
- `;
113
- const StyledLabel = styled_default().div`
114
- position: absolute;
115
- background-color: ${(p)=>p.$backgroundColor};
116
- padding: 2px 6px;
117
- border-radius: 4px;
118
- z-index: 1;
119
- white-space: nowrap;
120
- user-select: none;
121
- ${(p)=>p.$shouldTruncate && (0, react_namespaceObject.css)`
122
- max-width: 50px;
123
- overflow: hidden;
124
- `}
125
-
126
- ${(p)=>p.$position === react_cjs_namespaceObject.Position.Top && (0, react_namespaceObject.css)`
127
- bottom: calc(100% + 4px);
128
- left: 50%;
129
- transform: translateX(-50%);
130
- `}
131
- ${(p)=>p.$position === react_cjs_namespaceObject.Position.Bottom && (0, react_namespaceObject.css)`
132
- top: calc(100% + 4px);
133
- left: 50%;
134
- transform: translateX(-50%);
135
- `}
136
- ${(p)=>p.$position === react_cjs_namespaceObject.Position.Left && (0, react_namespaceObject.css)`
137
- right: calc(100% + 4px);
138
- top: 50%;
139
- transform: translateY(-50%);
140
- `}
141
- ${(p)=>p.$position === react_cjs_namespaceObject.Position.Right && (0, react_namespaceObject.css)`
142
- left: calc(100% + 4px);
143
- top: 50%;
144
- transform: translateY(-50%);
145
- `}
146
- `;
147
- const StyledNotch = styled_default().div`
148
- width: ${(p)=>{
149
- if ('input' === p.$handleType && !p.$isVertical) return '8px';
150
- if ('artifact' === p.$handleType) return '10px';
151
- return '12px';
152
- }};
153
- height: ${(p)=>{
154
- if ('input' === p.$handleType && p.$isVertical) return '8px';
155
- if ('artifact' === p.$handleType) return '10px';
156
- return '12px';
157
- }};
158
- border-width: 2px;
159
- border-style: solid;
160
- border-color: ${(p)=>{
161
- if (p.$selected || p.$hovered) return 'var(--canvas-primary)';
162
- return 'var(--canvas-border)';
163
- }};
164
- border-radius: ${(p)=>'artifact' === p.$handleType || 'input' === p.$handleType ? 0 : '50%'};
165
- transform: ${(p)=>'artifact' === p.$handleType ? 'rotate(45deg)' : 'none'};
166
- background-color: ${(p)=>{
167
- if (p.$selected || p.$hovered) return 'var(--canvas-primary)';
168
- return 'var(--canvas-background, white)';
169
- }};
170
- opacity: ${(p)=>p.$showNotch ? 1 : 0};
171
- pointer-events: none;
172
- transition: all 0.2s ease-in-out;
173
- `;
174
- const StyledHandle = (props)=>{
175
- const { $total, $visible, $positionPercent, $customPositionAndOffsets, ...handleProps } = props;
176
- const { position } = handleProps;
177
- const { width, height, top, bottom, left, right, transform } = (0, external_useButtonHandleSizeAndPosition_cjs_namespaceObject.useButtonHandleSizeAndPosition)({
178
- position,
179
- positionPercent: $positionPercent,
180
- numHandles: $total,
181
- customPositionAndOffsets: $customPositionAndOffsets
182
- });
183
- return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Handle, {
184
- ...handleProps,
185
- style: {
186
- width,
187
- height,
188
- display: 'flex',
189
- alignItems: 'center',
190
- justifyContent: 'center',
191
- borderWidth: 0,
192
- borderRadius: 0,
193
- backgroundColor: 'transparent',
194
- opacity: $visible ? 1 : 0,
195
- cursor: 'crosshair',
196
- top,
197
- bottom,
198
- left,
199
- right,
200
- transform
201
- }
202
- });
203
- };
204
- exports.StyledAddButton = __webpack_exports__.StyledAddButton;
205
- exports.StyledHandle = __webpack_exports__.StyledHandle;
206
- exports.StyledLabel = __webpack_exports__.StyledLabel;
207
- exports.StyledLine = __webpack_exports__.StyledLine;
208
- exports.StyledNotch = __webpack_exports__.StyledNotch;
209
- exports.StyledWrapper = __webpack_exports__.StyledWrapper;
210
- for(var __rspack_i in __webpack_exports__)if (-1 === [
211
- "StyledAddButton",
212
- "StyledHandle",
213
- "StyledLabel",
214
- "StyledLine",
215
- "StyledNotch",
216
- "StyledWrapper"
217
- ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
218
- Object.defineProperty(exports, '__esModule', {
219
- value: true
220
- });
@@ -1,46 +0,0 @@
1
- import { type HandleProps, Position } from '../../xyflow/react.ts';
2
- import type { HandleConfigurationSpecificPosition } from '../../schema/node-definition/handle';
3
- export declare const StyledAddButton: import("@emotion/styled").StyledComponent<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
4
- theme?: import("@emotion/react").Theme;
5
- }, {}, {}>;
6
- export declare const StyledWrapper: import("@emotion/styled").StyledComponent<{
7
- theme?: import("@emotion/react").Theme;
8
- as?: React.ElementType;
9
- } & {
10
- $position: Position;
11
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
12
- export declare const StyledLine: import("@emotion/styled").StyledComponent<{
13
- theme?: import("@emotion/react").Theme;
14
- as?: React.ElementType;
15
- } & {
16
- $isVertical: boolean;
17
- $selected: boolean;
18
- $size: string;
19
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
20
- export declare const StyledLabel: import("@emotion/styled").StyledComponent<{
21
- theme?: import("@emotion/react").Theme;
22
- as?: React.ElementType;
23
- } & {
24
- $position: Position;
25
- $backgroundColor: string;
26
- $shouldTruncate?: boolean;
27
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
28
- export declare const StyledNotch: import("@emotion/styled").StyledComponent<{
29
- theme?: import("@emotion/react").Theme;
30
- as?: React.ElementType;
31
- } & {
32
- $notchColor: string;
33
- $handleType: "artifact" | "input" | "output";
34
- $isVertical?: boolean;
35
- $visible: boolean;
36
- $selected: boolean;
37
- $hovered?: boolean;
38
- $showNotch?: boolean;
39
- }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
40
- export declare const StyledHandle: (props: HandleProps & {
41
- $positionPercent: number;
42
- $total: number;
43
- $visible: boolean;
44
- $customPositionAndOffsets?: HandleConfigurationSpecificPosition;
45
- }) => import("react/jsx-runtime").JSX.Element;
46
- //# sourceMappingURL=ButtonHandle.styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ButtonHandle.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/ButtonHandle.styles.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,WAAW,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAE9F,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAG/F,eAAO,MAAM,eAAe;;UAqB3B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;eAA2B,QAAQ;yGAuC5D,CAAC;AAEF,eAAO,MAAM,UAAU;;;;iBAA6B,OAAO;eAAa,OAAO;WAAS,MAAM;yGAS7F,CAAC;AAEF,eAAO,MAAM,WAAW;;;;eACX,QAAQ;sBACD,MAAM;sBACN,OAAO;yGA4C1B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;iBACT,MAAM;iBACN,UAAU,GAAG,OAAO,GAAG,QAAQ;kBAC9B,OAAO;cACX,OAAO;eACN,OAAO;eACP,OAAO;iBACL,OAAO;yGA2BrB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,WAAW,GAAG;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,yBAAyB,CAAC,EAAE,mCAAmC,CAAC;CACjE,4CAkCF,CAAC"}