@uipath/apollo-react 4.6.1 → 4.6.2-pr525.4d8c21b

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 (57) hide show
  1. package/dist/canvas/components/AddNodePanel/AddNodeManager.cjs +1 -1
  2. package/dist/canvas/components/AddNodePanel/AddNodeManager.js +2 -2
  3. package/dist/canvas/components/BaseNode/BaseNode.cjs +74 -75
  4. package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
  5. package/dist/canvas/components/BaseNode/BaseNode.js +69 -70
  6. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.cjs +68 -0
  7. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.d.ts +9 -0
  8. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.d.ts.map +1 -0
  9. package/dist/canvas/components/BaseNode/BaseNodeBadgeSlot.js +34 -0
  10. package/dist/canvas/components/BaseNode/BaseNodeConfigContext.d.ts +2 -1
  11. package/dist/canvas/components/BaseNode/BaseNodeConfigContext.d.ts.map +1 -1
  12. package/dist/canvas/components/BaseNode/BaseNodeContainer.cjs +88 -0
  13. package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts +21 -0
  14. package/dist/canvas/components/BaseNode/BaseNodeContainer.d.ts.map +1 -0
  15. package/dist/canvas/components/BaseNode/BaseNodeContainer.js +51 -0
  16. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.cjs +49 -0
  17. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts +9 -0
  18. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.d.ts.map +1 -0
  19. package/dist/canvas/components/BaseNode/BaseNodeInnerShape.js +15 -0
  20. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.cjs +62 -0
  21. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.d.ts +9 -0
  22. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.d.ts.map +1 -0
  23. package/dist/canvas/components/BaseNode/BaseNodeMissingManifest.js +28 -0
  24. package/dist/canvas/components/BaseNode/NodeLabel.cjs +64 -18
  25. package/dist/canvas/components/BaseNode/NodeLabel.d.ts +8 -1
  26. package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map +1 -1
  27. package/dist/canvas/components/BaseNode/NodeLabel.js +58 -15
  28. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.cjs +4 -7
  29. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts.map +1 -1
  30. package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.js +4 -7
  31. package/dist/canvas/components/CodedAgent/CodedAgentFlow.cjs +4 -4
  32. package/dist/canvas/components/CodedAgent/CodedAgentFlow.js +4 -4
  33. package/dist/canvas/components/NodeInspector.cjs +3 -2
  34. package/dist/canvas/components/NodeInspector.d.ts.map +1 -1
  35. package/dist/canvas/components/NodeInspector.js +3 -2
  36. package/dist/canvas/components/StageNode/StageNode.cjs +3 -8
  37. package/dist/canvas/components/StageNode/StageNode.d.ts.map +1 -1
  38. package/dist/canvas/components/StageNode/StageNode.js +3 -8
  39. package/dist/canvas/components/Toolbox/Toolbox.cjs +6 -5
  40. package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
  41. package/dist/canvas/components/Toolbox/Toolbox.js +6 -5
  42. package/dist/canvas/constants.cjs +86 -2
  43. package/dist/canvas/constants.d.ts +21 -0
  44. package/dist/canvas/constants.d.ts.map +1 -1
  45. package/dist/canvas/constants.js +22 -1
  46. package/dist/canvas/index.cjs +39 -35
  47. package/dist/canvas/index.d.ts +1 -0
  48. package/dist/canvas/index.d.ts.map +1 -1
  49. package/dist/canvas/index.js +1 -0
  50. package/dist/canvas/storybook-utils/manifests/node-definitions.d.ts.map +1 -1
  51. package/dist/canvas/styles/reactflow-reset.css +12 -0
  52. package/dist/canvas/styles/tailwind.canvas.css +1 -1
  53. package/package.json +5 -5
  54. package/dist/canvas/components/BaseNode/BaseNode.styles.cjs +0 -410
  55. package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts +0 -75
  56. package/dist/canvas/components/BaseNode/BaseNode.styles.d.ts.map +0 -1
  57. package/dist/canvas/components/BaseNode/BaseNode.styles.js +0 -342
@@ -1,7 +1,21 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import { memo, useCallback, useEffect, useRef, useState } from "react";
2
+ import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
3
+ import { NODE_TEXT_BOTTOM_OFFSET, NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES } from "../../constants.js";
4
+ import { cx } from "../../utils/CssUtil.js";
3
5
  import { CanvasTooltip } from "../CanvasTooltip.js";
4
- import { BaseHeader, BaseSubHeader, BaseTextContainer, EditableLabel, EmptyLabelPlaceholder } from "./BaseNode.styles.js";
6
+ const BaseTextContainer = ({ hasBottomHandles, shape, children })=>{
7
+ if ('rectangle' === shape) return /*#__PURE__*/ jsx("div", {
8
+ className: "flex flex-1 min-w-0 flex-col items-start text-left",
9
+ children: children
10
+ });
11
+ return /*#__PURE__*/ jsx("div", {
12
+ className: cx('absolute left-1/2 w-[150%] flex flex-col z-10 transition-transform duration-200', hasBottomHandles ? 'items-start text-left translate-x-[20%] translate-y-1/2' : 'items-center text-center -translate-x-1/2 translate-y-full'),
13
+ style: {
14
+ bottom: hasBottomHandles ? NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES : NODE_TEXT_BOTTOM_OFFSET
15
+ },
16
+ children: children
17
+ });
18
+ };
5
19
  const ConditionalTooltip = ({ content, children })=>{
6
20
  if (!content) return children;
7
21
  return /*#__PURE__*/ jsx(CanvasTooltip, {
@@ -12,6 +26,43 @@ const ConditionalTooltip = ({ content, children })=>{
12
26
  children: children
13
27
  });
14
28
  };
29
+ const Header = ({ shape, backgroundColor, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
30
+ "data-testid": dataTestId,
31
+ onDoubleClick: onDoubleClick,
32
+ className: cx('text-center text-sm leading-[18px] font-semibold text-foreground overflow-hidden', backgroundColor && 'px-1.5 py-0.5 rounded-sm', 'rectangle' === shape ? 'w-full text-left whitespace-nowrap text-ellipsis' : 'wrap-break-word line-clamp-3'),
33
+ style: backgroundColor ? {
34
+ backgroundColor
35
+ } : void 0,
36
+ children: children
37
+ });
38
+ const SubHeader = ({ shape, onDoubleClick, children, 'data-testid': dataTestId })=>/*#__PURE__*/ jsx("div", {
39
+ "data-testid": dataTestId,
40
+ onDoubleClick: onDoubleClick,
41
+ className: cx('text-center text-xs leading-[18px] text-foreground-muted wrap-break-word overflow-hidden', 'rectangle' === shape ? 'w-full text-left line-clamp-2' : 'line-clamp-5'),
42
+ children: children
43
+ });
44
+ const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, variant, value, placeholder, rows, onChange, onKeyDown, onBlur, 'aria-label': ariaLabel }, ref)=>/*#__PURE__*/ jsx("textarea", {
45
+ ref: ref,
46
+ value: value,
47
+ placeholder: placeholder,
48
+ rows: rows,
49
+ "aria-label": ariaLabel,
50
+ onChange: onChange,
51
+ onKeyDown: onKeyDown,
52
+ onBlur: onBlur,
53
+ className: cx('nodrag nowheel resize-none font-[inherit] text-foreground border-none rounded-sm outline-1 outline-dashed outline-border-de-emp max-w-full', 'subtext' === variant ? 'text-xs leading-[18px] font-normal mb-0' : 'text-sm leading-[18px] font-semibold mb-0.5', 'rectangle' === shape ? 'field-sizing-fixed w-full' : 'field-sizing-content text-center', backgroundColor && 'px-1.5 py-0.5'),
54
+ style: backgroundColor ? {
55
+ backgroundColor
56
+ } : void 0
57
+ }));
58
+ EditableLabel.displayName = 'EditableLabel';
59
+ const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ jsx("button", {
60
+ type: "button",
61
+ onDoubleClick: onDoubleClick,
62
+ className: "nodrag nowheel text-sm leading-[18px] font-semibold text-foreground-muted bg-transparent border border-dashed border-border-de-emp rounded-sm cursor-pointer opacity-0 transition-opacity duration-200 min-w-5 min-h-5 hover:opacity-100",
63
+ "aria-label": "Add node label",
64
+ "data-testid": "empty-label-placeholder"
65
+ });
15
66
  const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
16
67
  const [isEditing, setIsEditing] = useState(false);
17
68
  const [localLabel, setLocalLabel] = useState('');
@@ -22,7 +73,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
22
73
  const handleSave = useCallback(()=>{
23
74
  setIsEditing(false);
24
75
  setFocusTarget(null);
25
- if (localLabel !== label || localSubLabel !== subLabel) onChange({
76
+ if (localLabel !== label || localSubLabel !== subLabel) onChange?.({
26
77
  label: localLabel,
27
78
  subLabel: localSubLabel
28
79
  });
@@ -101,11 +152,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
101
152
  shape: shape,
102
153
  children: [
103
154
  /*#__PURE__*/ jsx(EmptyLabelPlaceholder, {
104
- onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
105
- className: "nodrag nowheel",
106
- role: "button",
107
- "aria-label": "Add node label",
108
- "data-testid": "empty-label-placeholder"
155
+ onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
109
156
  }),
110
157
  centerAdornment
111
158
  ]
@@ -125,10 +172,8 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
125
172
  shape: shape,
126
173
  variant: "normal",
127
174
  backgroundColor: labelBackgroundColor,
128
- className: "nodrag nowheel",
129
175
  placeholder: "Name",
130
176
  rows: 'rectangle' === shape ? 1 : void 0,
131
- role: "textbox",
132
177
  "aria-label": "Edit node name"
133
178
  }),
134
179
  /*#__PURE__*/ jsx(EditableLabel, {
@@ -139,24 +184,22 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
139
184
  onBlur: handleBlur,
140
185
  shape: shape,
141
186
  variant: "subtext",
142
- className: "nodrag nowheel",
143
187
  placeholder: "Description",
144
188
  rows: 'rectangle' === shape ? 2 : void 0,
145
- role: "textbox",
146
189
  "aria-label": "Edit node description"
147
190
  })
148
191
  ]
149
192
  }) : /*#__PURE__*/ jsxs(ConditionalTooltip, {
150
193
  content: labelTooltip,
151
194
  children: [
152
- /*#__PURE__*/ jsx(BaseHeader, {
195
+ /*#__PURE__*/ jsx(Header, {
153
196
  shape: shape,
154
197
  backgroundColor: labelBackgroundColor,
155
198
  onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef),
156
199
  "data-testid": "node-label",
157
200
  children: label
158
201
  }),
159
- subLabel && /*#__PURE__*/ jsx(BaseSubHeader, {
202
+ subLabel && /*#__PURE__*/ jsx(SubHeader, {
160
203
  shape: shape,
161
204
  onDoubleClick: readonly ? void 0 : handleDoubleClick(subLabelInputRef),
162
205
  "data-testid": "node-sublabel",
@@ -169,4 +212,4 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
169
212
  });
170
213
  };
171
214
  const NodeLabel = /*#__PURE__*/ memo(NodeLabelInternal);
172
- export { NodeLabel };
215
+ export { BaseTextContainer, NodeLabel };
@@ -40,19 +40,16 @@ const external_constants_cjs_namespaceObject = require("../../constants.cjs");
40
40
  const isHorizontalEdge = (position)=>position === react_cjs_namespaceObject.Position.Top || position === react_cjs_namespaceObject.Position.Bottom;
41
41
  const isVerticalEdge = (position)=>position === react_cjs_namespaceObject.Position.Left || position === react_cjs_namespaceObject.Position.Right;
42
42
  const snapToGrid = (value, gridSize = external_constants_cjs_namespaceObject.GRID_SPACING)=>Math.round(value / gridSize) * gridSize;
43
- const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = external_constants_cjs_namespaceObject.GRID_SPACING)=>{
43
+ const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = external_constants_cjs_namespaceObject.GRID_SPACING / 2)=>{
44
44
  if (0 === numHandles) return [];
45
45
  if (nodeSize <= 0) return [];
46
46
  const idealSpacing = nodeSize / (numHandles + 1);
47
- const gridAlignedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
47
+ const roundedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
48
+ const gridAlignedSpacing = Math.max(gridSize, roundedSpacing);
48
49
  const totalSpan = (numHandles - 1) * gridAlignedSpacing;
49
50
  const startPosition = (nodeSize - totalSpan) / 2;
50
51
  const positions = [];
51
- for(let i = 0; i < numHandles; i++){
52
- const position = startPosition + i * gridAlignedSpacing;
53
- const snappedPosition = snapToGrid(position, gridSize);
54
- positions.push(snappedPosition);
55
- }
52
+ for(let i = 0; i < numHandles; i++)positions.push(startPosition + i * gridAlignedSpacing);
56
53
  return positions;
57
54
  };
58
55
  const pixelToPercent = (pixelPosition, nodeSize)=>{
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonHandleStyleUtils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/ButtonHandleStyleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAEpE,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAoB/F,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,WAAU,MAAqB,KAAG,MAE3E,CAAC;AASF,eAAO,MAAM,mCAAmC,GAC9C,UAAU,MAAM,EAChB,YAAY,MAAM,EAClB,WAAU,MAAqB,KAC9B,MAAM,EAuBR,CAAC;AAQF,eAAO,MAAM,cAAc,GAAI,eAAe,MAAM,EAAE,UAAU,MAAM,KAAG,MAGxE,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,wCAIxC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,KAAG,MAMH,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,yCAIzC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAMH,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,uEAMlC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAyBH,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,uEAMrC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAsBH,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,sEAMnC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG,MAyBH,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,sEAMpC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG,MAsBH,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,yCAGhC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;CAChE,KAAG,MAgBH,CAAC"}
1
+ {"version":3,"file":"ButtonHandleStyleUtils.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/ButtonHandleStyleUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAEpE,OAAO,KAAK,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAoB/F,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,WAAU,MAAqB,KAAG,MAE3E,CAAC;AAmBF,eAAO,MAAM,mCAAmC,GAC9C,UAAU,MAAM,EAChB,YAAY,MAAM,EAClB,WAAU,MAAyB,KAClC,MAAM,EA4BR,CAAC;AAQF,eAAO,MAAM,cAAc,GAAI,eAAe,MAAM,EAAE,UAAU,MAAM,KAAG,MAGxE,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,wCAIxC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,KAAG,MAMH,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,yCAIzC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAMH,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,uEAMlC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAyBH,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,uEAMrC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,KAAG,MAsBH,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,sEAMnC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG,MAyBH,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,sEAMpC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG,MAsBH,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,yCAGhC;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;CAChE,KAAG,MAgBH,CAAC"}
@@ -3,19 +3,16 @@ import { GRID_SPACING } from "../../constants.js";
3
3
  const isHorizontalEdge = (position)=>position === Position.Top || position === Position.Bottom;
4
4
  const isVerticalEdge = (position)=>position === Position.Left || position === Position.Right;
5
5
  const snapToGrid = (value, gridSize = GRID_SPACING)=>Math.round(value / gridSize) * gridSize;
6
- const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = GRID_SPACING)=>{
6
+ const calculateGridAlignedHandlePositions = (nodeSize, numHandles, gridSize = GRID_SPACING / 2)=>{
7
7
  if (0 === numHandles) return [];
8
8
  if (nodeSize <= 0) return [];
9
9
  const idealSpacing = nodeSize / (numHandles + 1);
10
- const gridAlignedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
10
+ const roundedSpacing = Math.round(idealSpacing / gridSize) * gridSize;
11
+ const gridAlignedSpacing = Math.max(gridSize, roundedSpacing);
11
12
  const totalSpan = (numHandles - 1) * gridAlignedSpacing;
12
13
  const startPosition = (nodeSize - totalSpan) / 2;
13
14
  const positions = [];
14
- for(let i = 0; i < numHandles; i++){
15
- const position = startPosition + i * gridAlignedSpacing;
16
- const snappedPosition = snapToGrid(position, gridSize);
17
- positions.push(snappedPosition);
18
- }
15
+ for(let i = 0; i < numHandles; i++)positions.push(startPosition + i * gridAlignedSpacing);
19
16
  return positions;
20
17
  };
21
18
  const pixelToPercent = (pixelPosition, nodeSize)=>{
@@ -131,8 +131,8 @@ const createCodedAgentNodeWrapper = (translations = external_types_cjs_namespace
131
131
  const nodeData = data;
132
132
  const executionStatus = (0, external_react_namespaceObject.useMemo)(()=>{
133
133
  if (nodeData.hasError) return 'Failed';
134
- if (nodeData.hasSuccess) return 'Success';
135
- if (nodeData.hasRunning) return 'Running';
134
+ if (nodeData.hasSuccess) return 'Completed';
135
+ if (nodeData.hasRunning) return 'InProgress';
136
136
  }, [
137
137
  nodeData.hasError,
138
138
  nodeData.hasSuccess,
@@ -207,8 +207,8 @@ const CodedResourceNodeElement = /*#__PURE__*/ (0, external_react_namespaceObjec
207
207
  const label = nodeData.label.toLowerCase();
208
208
  const executionStatus = (0, external_react_namespaceObject.useMemo)(()=>{
209
209
  if (nodeData.hasError) return 'Failed';
210
- if (nodeData.hasSuccess) return 'Success';
211
- if (nodeData.hasRunning) return 'Running';
210
+ if (nodeData.hasSuccess) return 'Completed';
211
+ if (nodeData.hasRunning) return 'InProgress';
212
212
  }, [
213
213
  nodeData.hasError,
214
214
  nodeData.hasSuccess,
@@ -93,8 +93,8 @@ const createCodedAgentNodeWrapper = (translations = DefaultCodedAgentNodeTransla
93
93
  const nodeData = data;
94
94
  const executionStatus = useMemo(()=>{
95
95
  if (nodeData.hasError) return 'Failed';
96
- if (nodeData.hasSuccess) return 'Success';
97
- if (nodeData.hasRunning) return 'Running';
96
+ if (nodeData.hasSuccess) return 'Completed';
97
+ if (nodeData.hasRunning) return 'InProgress';
98
98
  }, [
99
99
  nodeData.hasError,
100
100
  nodeData.hasSuccess,
@@ -169,8 +169,8 @@ const CodedResourceNodeElement = /*#__PURE__*/ memo(({ data, selected, id, ...no
169
169
  const label = nodeData.label.toLowerCase();
170
170
  const executionStatus = useMemo(()=>{
171
171
  if (nodeData.hasError) return 'Failed';
172
- if (nodeData.hasSuccess) return 'Success';
173
- if (nodeData.hasRunning) return 'Running';
172
+ if (nodeData.hasSuccess) return 'Completed';
173
+ if (nodeData.hasRunning) return 'InProgress';
174
174
  }, [
175
175
  nodeData.hasError,
176
176
  nodeData.hasSuccess,
@@ -29,6 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
29
29
  const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
30
  const index_cjs_namespaceObject = require("../layouts/index.cjs");
31
31
  const react_cjs_namespaceObject = require("../xyflow/react.cjs");
32
+ const external_constants_cjs_namespaceObject = require("../constants.cjs");
32
33
  const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("./FloatingCanvasPanel/index.cjs");
33
34
  function safeStringify(obj, indent = 2) {
34
35
  const seen = new WeakSet();
@@ -345,7 +346,7 @@ function NodeInspector({ nodeFilter, edgeFilter, showCloseButton = false, onClos
345
346
  nodeId: node.id,
346
347
  title: "Node Inspector",
347
348
  placement: "right-start",
348
- offset: 10,
349
+ offset: external_constants_cjs_namespaceObject.FLOATING_CANVAS_PANEL_OFFSET,
349
350
  onClose: showCloseButton ? onClose : void 0,
350
351
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NodeInfoContent, {
351
352
  node: node,
@@ -363,7 +364,7 @@ function NodeInspector({ nodeFilter, edgeFilter, showCloseButton = false, onClos
363
364
  nodeId: nodeId,
364
365
  title: "Edge Inspector",
365
366
  placement: "right-start",
366
- offset: 10 + (nodesToShow.length > 0 ? 420 : 0) + 420 * index,
367
+ offset: external_constants_cjs_namespaceObject.FLOATING_CANVAS_PANEL_OFFSET + (nodesToShow.length > 0 ? 420 : 0) + 420 * index,
367
368
  onClose: showCloseButton ? onClose : void 0,
368
369
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EdgeInfoContent, {
369
370
  edge: edge
@@ -1 +1 @@
1
- {"version":3,"file":"NodeInspector.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/NodeInspector.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EAKV,MAAM,0CAA0C,CAAC;AAqOlD,MAAM,MAAM,kBAAkB,GAAG;IAI/B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IAIrC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IAIrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAI1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAIrB,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,eAAuB,EACvB,OAAO,EACP,YAAmB,EACnB,YAAmB,GACpB,GAAE,kBAAuB,kDAwFzB"}
1
+ {"version":3,"file":"NodeInspector.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/NodeInspector.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EAKV,MAAM,0CAA0C,CAAC;AAsOlD,MAAM,MAAM,kBAAkB,GAAG;IAI/B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IAIrC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IAIrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAI1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAIrB,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,eAAuB,EACvB,OAAO,EACP,YAAmB,EACnB,YAAmB,GACpB,GAAE,kBAAuB,kDAwFzB"}
@@ -1,6 +1,7 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Column, Row } from "../layouts/index.js";
3
3
  import { useEdges, useNodes, useReactFlow } from "../xyflow/react.js";
4
+ import { FLOATING_CANVAS_PANEL_OFFSET } from "../constants.js";
4
5
  import { FloatingCanvasPanel } from "./FloatingCanvasPanel/index.js";
5
6
  function safeStringify(obj, indent = 2) {
6
7
  const seen = new WeakSet();
@@ -317,7 +318,7 @@ function NodeInspector({ nodeFilter, edgeFilter, showCloseButton = false, onClos
317
318
  nodeId: node.id,
318
319
  title: "Node Inspector",
319
320
  placement: "right-start",
320
- offset: 10,
321
+ offset: FLOATING_CANVAS_PANEL_OFFSET,
321
322
  onClose: showCloseButton ? onClose : void 0,
322
323
  children: /*#__PURE__*/ jsx(NodeInfoContent, {
323
324
  node: node,
@@ -335,7 +336,7 @@ function NodeInspector({ nodeFilter, edgeFilter, showCloseButton = false, onClos
335
336
  nodeId: nodeId,
336
337
  title: "Edge Inspector",
337
338
  placement: "right-start",
338
- offset: 10 + (nodesToShow.length > 0 ? 420 : 0) + 420 * index,
339
+ offset: FLOATING_CANVAS_PANEL_OFFSET + (nodesToShow.length > 0 ? 420 : 0) + 420 * index,
339
340
  onClose: showCloseButton ? onClose : void 0,
340
341
  children: /*#__PURE__*/ jsx(EdgeInfoContent, {
341
342
  edge: edge
@@ -76,7 +76,6 @@ const CHIP_ICONS = {
76
76
  };
77
77
  const StageNodeInner = (props)=>{
78
78
  const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay, hideParallelOptions, loadingTaskIds } = props;
79
- const isAnyTaskLoading = null != loadingTaskIds && loadingTaskIds.size > 0;
80
79
  const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
81
80
  const allTasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
82
81
  stageDetails?.tasks
@@ -594,14 +593,12 @@ const StageNodeInner = (props)=>{
594
593
  (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
595
594
  content: addTaskLabel,
596
595
  placement: "top",
597
- hide: isAnyTaskLoading,
598
596
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
599
597
  variant: "ghost",
600
598
  size: "icon",
601
599
  className: "h-6 w-6",
602
600
  onClick: handleTaskAddClick,
603
601
  "aria-label": addTaskLabel,
604
- disabled: isAnyTaskLoading,
605
602
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
606
603
  icon: "plus",
607
604
  size: 20
@@ -617,10 +614,9 @@ const StageNodeInner = (props)=>{
617
614
  py: 2,
618
615
  children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
619
616
  variant: "link",
620
- onClick: isAnyTaskLoading ? void 0 : handleTaskAddClick,
617
+ onClick: handleTaskAddClick,
621
618
  style: {
622
- maxWidth: 'fit-content',
623
- pointerEvents: isAnyTaskLoading ? 'none' : void 0
619
+ maxWidth: 'fit-content'
624
620
  },
625
621
  children: defaultContent
626
622
  }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -669,7 +665,7 @@ const StageNodeInner = (props)=>{
669
665
  taskIndex: taskIndex,
670
666
  onTaskClick: handleTaskClick,
671
667
  projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
672
- isDragDisabled: !onTaskReorder,
668
+ isDragDisabled: !onTaskReorder || isReadOnly,
673
669
  isTaskLoading: loadingTaskIds?.has(task.id),
674
670
  ...hasContextMenu && !isReadOnly && {
675
671
  getContextMenuItems: buildContextMenuItems
@@ -731,7 +727,6 @@ const StageNodeInner = (props)=>{
731
727
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
732
728
  title: addTaskLabel,
733
729
  initialItems: taskOptions,
734
- loading: isAnyTaskLoading,
735
730
  onClose: ()=>setIsAddingTask(false),
736
731
  onItemSelect: handleAddTaskToolboxItemSelected,
737
732
  onSearch: onTaskToolboxSearch
@@ -1 +1 @@
1
- {"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkwBxD,eAAO,MAAM,SAAS,8CA9uBS,cAAc,6CA8uBA,CAAC"}
1
+ {"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA2vBxD,eAAO,MAAM,SAAS,8CAvuBS,cAAc,6CAuuBA,CAAC"}
@@ -48,7 +48,6 @@ const CHIP_ICONS = {
48
48
  };
49
49
  const StageNodeInner = (props)=>{
50
50
  const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay, hideParallelOptions, loadingTaskIds } = props;
51
- const isAnyTaskLoading = null != loadingTaskIds && loadingTaskIds.size > 0;
52
51
  const taskWidth = width ? width - STAGE_CONTENT_INSET : void 0;
53
52
  const allTasks = useMemo(()=>stageDetails?.tasks || [], [
54
53
  stageDetails?.tasks
@@ -566,14 +565,12 @@ const StageNodeInner = (props)=>{
566
565
  (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(CanvasTooltip, {
567
566
  content: addTaskLabel,
568
567
  placement: "top",
569
- hide: isAnyTaskLoading,
570
568
  children: /*#__PURE__*/ jsx(Button, {
571
569
  variant: "ghost",
572
570
  size: "icon",
573
571
  className: "h-6 w-6",
574
572
  onClick: handleTaskAddClick,
575
573
  "aria-label": addTaskLabel,
576
- disabled: isAnyTaskLoading,
577
574
  children: /*#__PURE__*/ jsx(CanvasIcon, {
578
575
  icon: "plus",
579
576
  size: 20
@@ -589,10 +586,9 @@ const StageNodeInner = (props)=>{
589
586
  py: 2,
590
587
  children: (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly ? /*#__PURE__*/ jsx(Button, {
591
588
  variant: "link",
592
- onClick: isAnyTaskLoading ? void 0 : handleTaskAddClick,
589
+ onClick: handleTaskAddClick,
593
590
  style: {
594
- maxWidth: 'fit-content',
595
- pointerEvents: isAnyTaskLoading ? 'none' : void 0
591
+ maxWidth: 'fit-content'
596
592
  },
597
593
  children: defaultContent
598
594
  }) : /*#__PURE__*/ jsx("span", {
@@ -641,7 +637,7 @@ const StageNodeInner = (props)=>{
641
637
  taskIndex: taskIndex,
642
638
  onTaskClick: handleTaskClick,
643
639
  projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
644
- isDragDisabled: !onTaskReorder,
640
+ isDragDisabled: !onTaskReorder || isReadOnly,
645
641
  isTaskLoading: loadingTaskIds?.has(task.id),
646
642
  ...hasContextMenu && !isReadOnly && {
647
643
  getContextMenuItems: buildContextMenuItems
@@ -703,7 +699,6 @@ const StageNodeInner = (props)=>{
703
699
  children: /*#__PURE__*/ jsx(Toolbox, {
704
700
  title: addTaskLabel,
705
701
  initialItems: taskOptions,
706
- loading: isAnyTaskLoading,
707
702
  onClose: ()=>setIsAddingTask(false),
708
703
  onItemSelect: handleAddTaskToolboxItemSelected,
709
704
  onSearch: onTaskToolboxSearch
@@ -31,6 +31,7 @@ const index_cjs_namespaceObject = require("../../hooks/index.cjs");
31
31
  const external_layouts_index_cjs_namespaceObject = require("../../layouts/index.cjs");
32
32
  const external_react_namespaceObject = require("react");
33
33
  const external_react_window_namespaceObject = require("react-window");
34
+ const external_constants_cjs_namespaceObject = require("../../constants.cjs");
34
35
  const external_Header_cjs_namespaceObject = require("./Header.cjs");
35
36
  const external_ListView_cjs_namespaceObject = require("./ListView.cjs");
36
37
  const external_SearchBox_cjs_namespaceObject = require("./SearchBox.cjs");
@@ -389,11 +390,11 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
389
390
  ref: containerRef,
390
391
  "data-testid": "toolbox-container",
391
392
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
392
- px: 20,
393
- py: 12,
394
- gap: 12,
395
- w: fullWidth ? '100%' : 320,
396
- h: fullHeight ? '100%' : 440,
393
+ px: external_constants_cjs_namespaceObject.TOOLBOX_PADDING_X,
394
+ py: external_constants_cjs_namespaceObject.TOOLBOX_PADDING_Y,
395
+ gap: external_constants_cjs_namespaceObject.TOOLBOX_GAP,
396
+ w: fullWidth ? '100%' : external_constants_cjs_namespaceObject.TOOLBOX_WIDTH,
397
+ h: fullHeight ? '100%' : external_constants_cjs_namespaceObject.TOOLBOX_HEIGHT,
397
398
  children: [
398
399
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Header_cjs_namespaceObject.Header, {
399
400
  title: currentParentItem?.name || title,
@@ -1 +1 @@
1
- {"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAwC3F,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAgDD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,SAAiB,EACjB,UAAkB,GACnB,EAAE,YAAY,CAAC,CAAC,CAAC,2CAocjB"}
1
+ {"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAwC3F,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;CACpC;AAgDD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,SAAiB,EACjB,UAAkB,GACnB,EAAE,YAAY,CAAC,CAAC,CAAC,2CA0cjB"}
@@ -3,6 +3,7 @@ import { useNavigationStack } from "../../hooks/index.js";
3
3
  import { Column } from "../../layouts/index.js";
4
4
  import { useCallback, useEffect, useMemo, useRef, useState } from "react";
5
5
  import { useListRef } from "react-window";
6
+ import { TOOLBOX_GAP, TOOLBOX_HEIGHT, TOOLBOX_PADDING_X, TOOLBOX_PADDING_Y, TOOLBOX_WIDTH } from "../../constants.js";
6
7
  import { Header } from "./Header.js";
7
8
  import { ListView } from "./ListView.js";
8
9
  import { SearchBox } from "./SearchBox.js";
@@ -361,11 +362,11 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
361
362
  ref: containerRef,
362
363
  "data-testid": "toolbox-container",
363
364
  children: /*#__PURE__*/ jsxs(Column, {
364
- px: 20,
365
- py: 12,
366
- gap: 12,
367
- w: fullWidth ? '100%' : 320,
368
- h: fullHeight ? '100%' : 440,
365
+ px: TOOLBOX_PADDING_X,
366
+ py: TOOLBOX_PADDING_Y,
367
+ gap: TOOLBOX_GAP,
368
+ w: fullWidth ? '100%' : TOOLBOX_WIDTH,
369
+ h: fullHeight ? '100%' : TOOLBOX_HEIGHT,
369
370
  children: [
370
371
  /*#__PURE__*/ jsx(Header, {
371
372
  title: currentParentItem?.name || title,
@@ -26,26 +26,110 @@ __webpack_require__.r(__webpack_exports__);
26
26
  __webpack_require__.d(__webpack_exports__, {
27
27
  CANVAS_COMPACT_BREAKPOINT: ()=>CANVAS_COMPACT_BREAKPOINT,
28
28
  DEFAULT_NODE_SIZE: ()=>DEFAULT_NODE_SIZE,
29
+ DEFAULT_RECTANGLE_NODE_WIDTH: ()=>DEFAULT_RECTANGLE_NODE_WIDTH,
30
+ FLOATING_CANVAS_PANEL_OFFSET: ()=>FLOATING_CANVAS_PANEL_OFFSET,
29
31
  GRID_SPACING: ()=>GRID_SPACING,
32
+ NODE_BADGE_INSET_CIRCLE: ()=>NODE_BADGE_INSET_CIRCLE,
33
+ NODE_BADGE_INSET_SQUARE: ()=>NODE_BADGE_INSET_SQUARE,
34
+ NODE_BADGE_SIZE: ()=>NODE_BADGE_SIZE,
35
+ NODE_CONTAINER_RADIUS_RATIO: ()=>NODE_CONTAINER_RADIUS_RATIO,
36
+ NODE_ERROR_ICON_SIZE: ()=>NODE_ERROR_ICON_SIZE,
37
+ NODE_HEIGHT_DEFAULT: ()=>NODE_HEIGHT_DEFAULT,
38
+ NODE_HEIGHT_FOOTER_BUTTON: ()=>NODE_HEIGHT_FOOTER_BUTTON,
39
+ NODE_HEIGHT_FOOTER_DOUBLE: ()=>NODE_HEIGHT_FOOTER_DOUBLE,
40
+ NODE_HEIGHT_FOOTER_SINGLE: ()=>NODE_HEIGHT_FOOTER_SINGLE,
41
+ NODE_INNER_ICON_RATIO: ()=>NODE_INNER_ICON_RATIO,
42
+ NODE_INNER_RADIUS_RATIO: ()=>NODE_INNER_RADIUS_RATIO,
43
+ NODE_INNER_SHAPE_RATIO: ()=>NODE_INNER_SHAPE_RATIO,
44
+ NODE_TEXT_BOTTOM_OFFSET: ()=>NODE_TEXT_BOTTOM_OFFSET,
45
+ NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES: ()=>NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES,
30
46
  PREVIEW_EDGE_ID: ()=>PREVIEW_EDGE_ID,
31
- PREVIEW_NODE_ID: ()=>PREVIEW_NODE_ID
47
+ PREVIEW_NODE_ID: ()=>PREVIEW_NODE_ID,
48
+ TOOLBOX_GAP: ()=>TOOLBOX_GAP,
49
+ TOOLBOX_HEIGHT: ()=>TOOLBOX_HEIGHT,
50
+ TOOLBOX_PADDING_X: ()=>TOOLBOX_PADDING_X,
51
+ TOOLBOX_PADDING_Y: ()=>TOOLBOX_PADDING_Y,
52
+ TOOLBOX_WIDTH: ()=>TOOLBOX_WIDTH
32
53
  });
33
54
  const PREVIEW_NODE_ID = 'preview-node-id';
34
55
  const PREVIEW_EDGE_ID = 'preview-edge-id';
35
56
  const DEFAULT_NODE_SIZE = 96;
36
57
  const GRID_SPACING = 16;
37
58
  const CANVAS_COMPACT_BREAKPOINT = 600;
59
+ const TOOLBOX_WIDTH = 320;
60
+ const TOOLBOX_HEIGHT = 440;
61
+ const TOOLBOX_PADDING_X = 20;
62
+ const TOOLBOX_PADDING_Y = 12;
63
+ const TOOLBOX_GAP = 12;
64
+ const FLOATING_CANVAS_PANEL_OFFSET = 10;
65
+ const DEFAULT_RECTANGLE_NODE_WIDTH = 288;
66
+ const NODE_HEIGHT_DEFAULT = 6 * GRID_SPACING;
67
+ const NODE_HEIGHT_FOOTER_BUTTON = 9 * GRID_SPACING;
68
+ const NODE_HEIGHT_FOOTER_SINGLE = 10 * GRID_SPACING;
69
+ const NODE_HEIGHT_FOOTER_DOUBLE = 11 * GRID_SPACING;
70
+ const NODE_CONTAINER_RADIUS_RATIO = 32 / DEFAULT_NODE_SIZE;
71
+ const NODE_INNER_SHAPE_RATIO = 80 / DEFAULT_NODE_SIZE;
72
+ const NODE_INNER_ICON_RATIO = 40 / DEFAULT_NODE_SIZE;
73
+ const NODE_INNER_RADIUS_RATIO = 24 / DEFAULT_NODE_SIZE;
74
+ const NODE_ERROR_ICON_SIZE = 40;
75
+ const NODE_TEXT_BOTTOM_OFFSET = -8;
76
+ const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;
77
+ const NODE_BADGE_SIZE = 20;
78
+ const NODE_BADGE_INSET_SQUARE = 6;
79
+ const NODE_BADGE_INSET_CIRCLE = 12;
38
80
  exports.CANVAS_COMPACT_BREAKPOINT = __webpack_exports__.CANVAS_COMPACT_BREAKPOINT;
39
81
  exports.DEFAULT_NODE_SIZE = __webpack_exports__.DEFAULT_NODE_SIZE;
82
+ exports.DEFAULT_RECTANGLE_NODE_WIDTH = __webpack_exports__.DEFAULT_RECTANGLE_NODE_WIDTH;
83
+ exports.FLOATING_CANVAS_PANEL_OFFSET = __webpack_exports__.FLOATING_CANVAS_PANEL_OFFSET;
40
84
  exports.GRID_SPACING = __webpack_exports__.GRID_SPACING;
85
+ exports.NODE_BADGE_INSET_CIRCLE = __webpack_exports__.NODE_BADGE_INSET_CIRCLE;
86
+ exports.NODE_BADGE_INSET_SQUARE = __webpack_exports__.NODE_BADGE_INSET_SQUARE;
87
+ exports.NODE_BADGE_SIZE = __webpack_exports__.NODE_BADGE_SIZE;
88
+ exports.NODE_CONTAINER_RADIUS_RATIO = __webpack_exports__.NODE_CONTAINER_RADIUS_RATIO;
89
+ exports.NODE_ERROR_ICON_SIZE = __webpack_exports__.NODE_ERROR_ICON_SIZE;
90
+ exports.NODE_HEIGHT_DEFAULT = __webpack_exports__.NODE_HEIGHT_DEFAULT;
91
+ exports.NODE_HEIGHT_FOOTER_BUTTON = __webpack_exports__.NODE_HEIGHT_FOOTER_BUTTON;
92
+ exports.NODE_HEIGHT_FOOTER_DOUBLE = __webpack_exports__.NODE_HEIGHT_FOOTER_DOUBLE;
93
+ exports.NODE_HEIGHT_FOOTER_SINGLE = __webpack_exports__.NODE_HEIGHT_FOOTER_SINGLE;
94
+ exports.NODE_INNER_ICON_RATIO = __webpack_exports__.NODE_INNER_ICON_RATIO;
95
+ exports.NODE_INNER_RADIUS_RATIO = __webpack_exports__.NODE_INNER_RADIUS_RATIO;
96
+ exports.NODE_INNER_SHAPE_RATIO = __webpack_exports__.NODE_INNER_SHAPE_RATIO;
97
+ exports.NODE_TEXT_BOTTOM_OFFSET = __webpack_exports__.NODE_TEXT_BOTTOM_OFFSET;
98
+ exports.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = __webpack_exports__.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES;
41
99
  exports.PREVIEW_EDGE_ID = __webpack_exports__.PREVIEW_EDGE_ID;
42
100
  exports.PREVIEW_NODE_ID = __webpack_exports__.PREVIEW_NODE_ID;
101
+ exports.TOOLBOX_GAP = __webpack_exports__.TOOLBOX_GAP;
102
+ exports.TOOLBOX_HEIGHT = __webpack_exports__.TOOLBOX_HEIGHT;
103
+ exports.TOOLBOX_PADDING_X = __webpack_exports__.TOOLBOX_PADDING_X;
104
+ exports.TOOLBOX_PADDING_Y = __webpack_exports__.TOOLBOX_PADDING_Y;
105
+ exports.TOOLBOX_WIDTH = __webpack_exports__.TOOLBOX_WIDTH;
43
106
  for(var __rspack_i in __webpack_exports__)if (-1 === [
44
107
  "CANVAS_COMPACT_BREAKPOINT",
45
108
  "DEFAULT_NODE_SIZE",
109
+ "DEFAULT_RECTANGLE_NODE_WIDTH",
110
+ "FLOATING_CANVAS_PANEL_OFFSET",
46
111
  "GRID_SPACING",
112
+ "NODE_BADGE_INSET_CIRCLE",
113
+ "NODE_BADGE_INSET_SQUARE",
114
+ "NODE_BADGE_SIZE",
115
+ "NODE_CONTAINER_RADIUS_RATIO",
116
+ "NODE_ERROR_ICON_SIZE",
117
+ "NODE_HEIGHT_DEFAULT",
118
+ "NODE_HEIGHT_FOOTER_BUTTON",
119
+ "NODE_HEIGHT_FOOTER_DOUBLE",
120
+ "NODE_HEIGHT_FOOTER_SINGLE",
121
+ "NODE_INNER_ICON_RATIO",
122
+ "NODE_INNER_RADIUS_RATIO",
123
+ "NODE_INNER_SHAPE_RATIO",
124
+ "NODE_TEXT_BOTTOM_OFFSET",
125
+ "NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES",
47
126
  "PREVIEW_EDGE_ID",
48
- "PREVIEW_NODE_ID"
127
+ "PREVIEW_NODE_ID",
128
+ "TOOLBOX_GAP",
129
+ "TOOLBOX_HEIGHT",
130
+ "TOOLBOX_PADDING_X",
131
+ "TOOLBOX_PADDING_Y",
132
+ "TOOLBOX_WIDTH"
49
133
  ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
50
134
  Object.defineProperty(exports, '__esModule', {
51
135
  value: true
@@ -3,4 +3,25 @@ export declare const PREVIEW_EDGE_ID = "preview-edge-id";
3
3
  export declare const DEFAULT_NODE_SIZE = 96;
4
4
  export declare const GRID_SPACING = 16;
5
5
  export declare const CANVAS_COMPACT_BREAKPOINT = 600;
6
+ export declare const TOOLBOX_WIDTH = 320;
7
+ export declare const TOOLBOX_HEIGHT = 440;
8
+ export declare const TOOLBOX_PADDING_X = 20;
9
+ export declare const TOOLBOX_PADDING_Y = 12;
10
+ export declare const TOOLBOX_GAP = 12;
11
+ export declare const FLOATING_CANVAS_PANEL_OFFSET = 10;
12
+ export declare const DEFAULT_RECTANGLE_NODE_WIDTH = 288;
13
+ export declare const NODE_HEIGHT_DEFAULT: number;
14
+ export declare const NODE_HEIGHT_FOOTER_BUTTON: number;
15
+ export declare const NODE_HEIGHT_FOOTER_SINGLE: number;
16
+ export declare const NODE_HEIGHT_FOOTER_DOUBLE: number;
17
+ export declare const NODE_CONTAINER_RADIUS_RATIO: number;
18
+ export declare const NODE_INNER_SHAPE_RATIO: number;
19
+ export declare const NODE_INNER_ICON_RATIO: number;
20
+ export declare const NODE_INNER_RADIUS_RATIO: number;
21
+ export declare const NODE_ERROR_ICON_SIZE = 40;
22
+ export declare const NODE_TEXT_BOTTOM_OFFSET = -8;
23
+ export declare const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;
24
+ export declare const NODE_BADGE_SIZE = 20;
25
+ export declare const NODE_BADGE_INSET_SQUARE = 6;
26
+ export declare const NODE_BADGE_INSET_CIRCLE = 12;
6
27
  //# sourceMappingURL=constants.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAU9B,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAG/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAG9D,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}