@uipath/apollo-react 3.58.2 → 3.59.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas/components/BaseNode/BaseNode.stories.cjs +166 -66
- package/dist/canvas/components/BaseNode/BaseNode.stories.d.ts +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.stories.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.stories.js +164 -64
- package/dist/canvas/utils/GroupModificationUtils.cjs +2 -2
- package/dist/canvas/utils/GroupModificationUtils.js +2 -2
- package/dist/canvas/utils/adornment-resolver.cjs +3 -3
- package/dist/canvas/utils/adornment-resolver.js +3 -3
- package/dist/canvas/utils/icon-registry.cjs +0 -5
- package/dist/canvas/utils/icon-registry.d.ts.map +1 -1
- package/dist/canvas/utils/icon-registry.js +1 -6
- package/package.json +1 -1
|
@@ -25,9 +25,9 @@ var __webpack_exports__ = {};
|
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
27
|
CustomizedSizes: ()=>CustomizedSizes,
|
|
28
|
-
Loading: ()=>Loading,
|
|
29
28
|
ValidationStates: ()=>ValidationStates,
|
|
30
29
|
Default: ()=>Default,
|
|
30
|
+
Adornments: ()=>Adornments,
|
|
31
31
|
default: ()=>BaseNode_stories,
|
|
32
32
|
DynamicHandles: ()=>DynamicHandles
|
|
33
33
|
});
|
|
@@ -850,65 +850,6 @@ function DynamicHandlesStory() {
|
|
|
850
850
|
]
|
|
851
851
|
});
|
|
852
852
|
}
|
|
853
|
-
function createLoadingGrid() {
|
|
854
|
-
const shapes = [
|
|
855
|
-
{
|
|
856
|
-
type: 'uipath.blank-node',
|
|
857
|
-
shape: 'square',
|
|
858
|
-
label: 'Square'
|
|
859
|
-
},
|
|
860
|
-
{
|
|
861
|
-
type: 'uipath.control-flow.terminate',
|
|
862
|
-
shape: 'circle',
|
|
863
|
-
label: 'Circle'
|
|
864
|
-
},
|
|
865
|
-
{
|
|
866
|
-
type: 'uipath.agent',
|
|
867
|
-
shape: 'rectangle',
|
|
868
|
-
label: 'Rectangle'
|
|
869
|
-
}
|
|
870
|
-
];
|
|
871
|
-
return shapes.map((config, index)=>(0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
|
|
872
|
-
id: `loading-${config.shape}`,
|
|
873
|
-
type: config.type,
|
|
874
|
-
position: {
|
|
875
|
-
x: 96 + 192 * index,
|
|
876
|
-
y: 96
|
|
877
|
-
},
|
|
878
|
-
data: {
|
|
879
|
-
nodeType: config.type,
|
|
880
|
-
version: '1.0.0',
|
|
881
|
-
loading: true,
|
|
882
|
-
display: {
|
|
883
|
-
label: config.label,
|
|
884
|
-
subLabel: 'Loading...',
|
|
885
|
-
shape: config.shape
|
|
886
|
-
}
|
|
887
|
-
}
|
|
888
|
-
}));
|
|
889
|
-
}
|
|
890
|
-
function LoadingStory() {
|
|
891
|
-
const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>createLoadingGrid(), []);
|
|
892
|
-
const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
|
|
893
|
-
initialNodes
|
|
894
|
-
});
|
|
895
|
-
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
|
|
896
|
-
...canvasProps,
|
|
897
|
-
mode: "design",
|
|
898
|
-
children: [
|
|
899
|
-
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
|
|
900
|
-
position: "bottom-right",
|
|
901
|
-
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
|
|
902
|
-
translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
|
|
903
|
-
})
|
|
904
|
-
}),
|
|
905
|
-
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
|
|
906
|
-
title: "Loading State",
|
|
907
|
-
description: "Nodes in skeleton loading state for circle, square, and rectangle shapes."
|
|
908
|
-
})
|
|
909
|
-
]
|
|
910
|
-
});
|
|
911
|
-
}
|
|
912
853
|
const Default = {
|
|
913
854
|
name: 'Default',
|
|
914
855
|
render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DefaultStory, {})
|
|
@@ -980,6 +921,169 @@ function ValidationStatesStory() {
|
|
|
980
921
|
]
|
|
981
922
|
});
|
|
982
923
|
}
|
|
924
|
+
const ADORNMENT_ROWS = [
|
|
925
|
+
{
|
|
926
|
+
key: 'breakpoint',
|
|
927
|
+
label: 'Breakpoint (top-left)'
|
|
928
|
+
},
|
|
929
|
+
{
|
|
930
|
+
key: 'status-completed',
|
|
931
|
+
label: 'Status: Completed (top-right)'
|
|
932
|
+
},
|
|
933
|
+
{
|
|
934
|
+
key: 'status-inprogress',
|
|
935
|
+
label: 'Status: InProgress (top-right)'
|
|
936
|
+
},
|
|
937
|
+
{
|
|
938
|
+
key: 'status-failed',
|
|
939
|
+
label: 'Status: Failed (top-right)'
|
|
940
|
+
},
|
|
941
|
+
{
|
|
942
|
+
key: 'start-point',
|
|
943
|
+
label: 'Start Point (bottom-left)'
|
|
944
|
+
},
|
|
945
|
+
{
|
|
946
|
+
key: 'square-dashed',
|
|
947
|
+
label: 'Square Dashed (bottom-right)'
|
|
948
|
+
},
|
|
949
|
+
{
|
|
950
|
+
key: 'all',
|
|
951
|
+
label: 'All Adornments'
|
|
952
|
+
},
|
|
953
|
+
{
|
|
954
|
+
key: 'multi-exec',
|
|
955
|
+
label: 'Multi-execution (count: 5)'
|
|
956
|
+
}
|
|
957
|
+
];
|
|
958
|
+
function createAdornmentGrid() {
|
|
959
|
+
const nodes = [];
|
|
960
|
+
ADORNMENT_ROWS.forEach((row, rowIndex)=>{
|
|
961
|
+
SHAPES.forEach((shape, colIndex)=>{
|
|
962
|
+
const label = 'rectangle' === shape ? 'Invoice approval agent' : 'Header';
|
|
963
|
+
const nodeType = 'rectangle' === shape ? 'uipath.agent' : 'uipath.blank-node';
|
|
964
|
+
nodes.push((0, external_storybook_utils_index_cjs_namespaceObject.createNode)({
|
|
965
|
+
id: `adorn-${row.key}-${shape}`,
|
|
966
|
+
type: nodeType,
|
|
967
|
+
position: {
|
|
968
|
+
x: GRID_CONFIG.startX + colIndex * GRID_CONFIG.gapX,
|
|
969
|
+
y: GRID_CONFIG.startY + rowIndex * GRID_CONFIG.gapY
|
|
970
|
+
},
|
|
971
|
+
data: {
|
|
972
|
+
nodeType,
|
|
973
|
+
version: '1.0.0',
|
|
974
|
+
display: {
|
|
975
|
+
label,
|
|
976
|
+
subLabel: row.label,
|
|
977
|
+
shape
|
|
978
|
+
}
|
|
979
|
+
}
|
|
980
|
+
}));
|
|
981
|
+
});
|
|
982
|
+
});
|
|
983
|
+
return nodes;
|
|
984
|
+
}
|
|
985
|
+
function getAdornmentExecutionState(key) {
|
|
986
|
+
switch(key){
|
|
987
|
+
case 'breakpoint':
|
|
988
|
+
return {
|
|
989
|
+
status: 'None',
|
|
990
|
+
debug: true
|
|
991
|
+
};
|
|
992
|
+
case 'status-completed':
|
|
993
|
+
return {
|
|
994
|
+
status: 'Completed'
|
|
995
|
+
};
|
|
996
|
+
case 'status-inprogress':
|
|
997
|
+
return {
|
|
998
|
+
status: 'InProgress'
|
|
999
|
+
};
|
|
1000
|
+
case 'status-failed':
|
|
1001
|
+
return {
|
|
1002
|
+
status: 'Failed'
|
|
1003
|
+
};
|
|
1004
|
+
case 'start-point':
|
|
1005
|
+
return {
|
|
1006
|
+
status: 'None',
|
|
1007
|
+
isExecutionStartPoint: true
|
|
1008
|
+
};
|
|
1009
|
+
case 'square-dashed':
|
|
1010
|
+
return {
|
|
1011
|
+
status: 'None',
|
|
1012
|
+
isOutputPinned: true
|
|
1013
|
+
};
|
|
1014
|
+
case 'all':
|
|
1015
|
+
return {
|
|
1016
|
+
status: 'Completed',
|
|
1017
|
+
debug: true,
|
|
1018
|
+
isExecutionStartPoint: true,
|
|
1019
|
+
isOutputPinned: true
|
|
1020
|
+
};
|
|
1021
|
+
case 'multi-exec':
|
|
1022
|
+
return {
|
|
1023
|
+
status: 'Completed',
|
|
1024
|
+
count: 5
|
|
1025
|
+
};
|
|
1026
|
+
default:
|
|
1027
|
+
return;
|
|
1028
|
+
}
|
|
1029
|
+
}
|
|
1030
|
+
function AdornmentsStory() {
|
|
1031
|
+
const initialNodes = (0, external_react_namespaceObject.useMemo)(()=>createAdornmentGrid(), []);
|
|
1032
|
+
const { canvasProps } = (0, external_storybook_utils_index_cjs_namespaceObject.useCanvasStory)({
|
|
1033
|
+
initialNodes
|
|
1034
|
+
});
|
|
1035
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_BaseCanvas_index_cjs_namespaceObject.BaseCanvas, {
|
|
1036
|
+
...canvasProps,
|
|
1037
|
+
mode: "design",
|
|
1038
|
+
children: [
|
|
1039
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Panel, {
|
|
1040
|
+
position: "bottom-right",
|
|
1041
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPositionControls_cjs_namespaceObject.CanvasPositionControls, {
|
|
1042
|
+
translations: external_types_cjs_namespaceObject.DefaultCanvasTranslations
|
|
1043
|
+
})
|
|
1044
|
+
}),
|
|
1045
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_storybook_utils_index_cjs_namespaceObject.StoryInfoPanel, {
|
|
1046
|
+
title: "Adornments",
|
|
1047
|
+
description: "Grid showing all adornment types across shapes. Each row demonstrates a different adornment: breakpoint (top-left), execution status (top-right), execution start point (bottom-left), square dashed (bottom-right), and all combined."
|
|
1048
|
+
})
|
|
1049
|
+
]
|
|
1050
|
+
});
|
|
1051
|
+
}
|
|
1052
|
+
const Adornments = {
|
|
1053
|
+
name: 'Adornments',
|
|
1054
|
+
decorators: [
|
|
1055
|
+
(Story)=>{
|
|
1056
|
+
const registry = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
1057
|
+
const reg = new external_core_index_cjs_namespaceObject.NodeTypeRegistry();
|
|
1058
|
+
reg.registerManifest(sampleManifest.nodes, sampleManifest.categories);
|
|
1059
|
+
return reg;
|
|
1060
|
+
}, []);
|
|
1061
|
+
const contextValue = (0, external_react_namespaceObject.useMemo)(()=>({
|
|
1062
|
+
registry
|
|
1063
|
+
}), [
|
|
1064
|
+
registry
|
|
1065
|
+
]);
|
|
1066
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_core_index_cjs_namespaceObject.NodeRegistryContext.Provider, {
|
|
1067
|
+
value: contextValue,
|
|
1068
|
+
children: Story()
|
|
1069
|
+
});
|
|
1070
|
+
},
|
|
1071
|
+
(0, external_storybook_utils_index_cjs_namespaceObject.withCanvasProviders)({
|
|
1072
|
+
executionState: {
|
|
1073
|
+
getNodeExecutionState: (nodeId)=>{
|
|
1074
|
+
const parts = nodeId.split('-');
|
|
1075
|
+
const key = parts.slice(1, -1).join('-');
|
|
1076
|
+
return getAdornmentExecutionState(key);
|
|
1077
|
+
},
|
|
1078
|
+
getEdgeExecutionState: ()=>void 0
|
|
1079
|
+
},
|
|
1080
|
+
validationState: {
|
|
1081
|
+
getElementValidationState: ()=>void 0
|
|
1082
|
+
}
|
|
1083
|
+
})
|
|
1084
|
+
],
|
|
1085
|
+
render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AdornmentsStory, {})
|
|
1086
|
+
};
|
|
983
1087
|
const ValidationStates = {
|
|
984
1088
|
name: 'Validation States',
|
|
985
1089
|
decorators: [
|
|
@@ -1027,21 +1131,17 @@ const ValidationStates = {
|
|
|
1027
1131
|
],
|
|
1028
1132
|
render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ValidationStatesStory, {})
|
|
1029
1133
|
};
|
|
1030
|
-
|
|
1031
|
-
name: 'Loading',
|
|
1032
|
-
render: ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(LoadingStory, {})
|
|
1033
|
-
};
|
|
1134
|
+
exports.Adornments = __webpack_exports__.Adornments;
|
|
1034
1135
|
exports.CustomizedSizes = __webpack_exports__.CustomizedSizes;
|
|
1035
1136
|
exports.Default = __webpack_exports__.Default;
|
|
1036
1137
|
exports.DynamicHandles = __webpack_exports__.DynamicHandles;
|
|
1037
|
-
exports.Loading = __webpack_exports__.Loading;
|
|
1038
1138
|
exports.ValidationStates = __webpack_exports__.ValidationStates;
|
|
1039
1139
|
exports["default"] = __webpack_exports__["default"];
|
|
1040
1140
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
1141
|
+
"Adornments",
|
|
1041
1142
|
"CustomizedSizes",
|
|
1042
1143
|
"Default",
|
|
1043
1144
|
"DynamicHandles",
|
|
1044
|
-
"Loading",
|
|
1045
1145
|
"ValidationStates",
|
|
1046
1146
|
"default"
|
|
1047
1147
|
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
@@ -6,6 +6,6 @@ type Story = StoryObj<typeof meta>;
|
|
|
6
6
|
export declare const Default: Story;
|
|
7
7
|
export declare const CustomizedSizes: Story;
|
|
8
8
|
export declare const DynamicHandles: Story;
|
|
9
|
+
export declare const Adornments: Story;
|
|
9
10
|
export declare const ValidationStates: Story;
|
|
10
|
-
export declare const Loading: Story;
|
|
11
11
|
//# sourceMappingURL=BaseNode.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAmBvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAyMrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAqB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseNode.stories.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAmBvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAyMrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAqB5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAmZnC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAG7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAG5B,CAAC;AA0KF,eAAO,MAAM,UAAU,EAAE,KAiCxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAuC9B,CAAC"}
|
|
@@ -817,65 +817,6 @@ function DynamicHandlesStory() {
|
|
|
817
817
|
]
|
|
818
818
|
});
|
|
819
819
|
}
|
|
820
|
-
function createLoadingGrid() {
|
|
821
|
-
const shapes = [
|
|
822
|
-
{
|
|
823
|
-
type: 'uipath.blank-node',
|
|
824
|
-
shape: 'square',
|
|
825
|
-
label: 'Square'
|
|
826
|
-
},
|
|
827
|
-
{
|
|
828
|
-
type: 'uipath.control-flow.terminate',
|
|
829
|
-
shape: 'circle',
|
|
830
|
-
label: 'Circle'
|
|
831
|
-
},
|
|
832
|
-
{
|
|
833
|
-
type: 'uipath.agent',
|
|
834
|
-
shape: 'rectangle',
|
|
835
|
-
label: 'Rectangle'
|
|
836
|
-
}
|
|
837
|
-
];
|
|
838
|
-
return shapes.map((config, index)=>createNode({
|
|
839
|
-
id: `loading-${config.shape}`,
|
|
840
|
-
type: config.type,
|
|
841
|
-
position: {
|
|
842
|
-
x: 96 + 192 * index,
|
|
843
|
-
y: 96
|
|
844
|
-
},
|
|
845
|
-
data: {
|
|
846
|
-
nodeType: config.type,
|
|
847
|
-
version: '1.0.0',
|
|
848
|
-
loading: true,
|
|
849
|
-
display: {
|
|
850
|
-
label: config.label,
|
|
851
|
-
subLabel: 'Loading...',
|
|
852
|
-
shape: config.shape
|
|
853
|
-
}
|
|
854
|
-
}
|
|
855
|
-
}));
|
|
856
|
-
}
|
|
857
|
-
function LoadingStory() {
|
|
858
|
-
const initialNodes = useMemo(()=>createLoadingGrid(), []);
|
|
859
|
-
const { canvasProps } = useCanvasStory({
|
|
860
|
-
initialNodes
|
|
861
|
-
});
|
|
862
|
-
return /*#__PURE__*/ jsxs(BaseCanvas, {
|
|
863
|
-
...canvasProps,
|
|
864
|
-
mode: "design",
|
|
865
|
-
children: [
|
|
866
|
-
/*#__PURE__*/ jsx(Panel, {
|
|
867
|
-
position: "bottom-right",
|
|
868
|
-
children: /*#__PURE__*/ jsx(CanvasPositionControls, {
|
|
869
|
-
translations: DefaultCanvasTranslations
|
|
870
|
-
})
|
|
871
|
-
}),
|
|
872
|
-
/*#__PURE__*/ jsx(StoryInfoPanel, {
|
|
873
|
-
title: "Loading State",
|
|
874
|
-
description: "Nodes in skeleton loading state for circle, square, and rectangle shapes."
|
|
875
|
-
})
|
|
876
|
-
]
|
|
877
|
-
});
|
|
878
|
-
}
|
|
879
820
|
const Default = {
|
|
880
821
|
name: 'Default',
|
|
881
822
|
render: ()=>/*#__PURE__*/ jsx(DefaultStory, {})
|
|
@@ -947,6 +888,169 @@ function ValidationStatesStory() {
|
|
|
947
888
|
]
|
|
948
889
|
});
|
|
949
890
|
}
|
|
891
|
+
const ADORNMENT_ROWS = [
|
|
892
|
+
{
|
|
893
|
+
key: 'breakpoint',
|
|
894
|
+
label: 'Breakpoint (top-left)'
|
|
895
|
+
},
|
|
896
|
+
{
|
|
897
|
+
key: 'status-completed',
|
|
898
|
+
label: 'Status: Completed (top-right)'
|
|
899
|
+
},
|
|
900
|
+
{
|
|
901
|
+
key: 'status-inprogress',
|
|
902
|
+
label: 'Status: InProgress (top-right)'
|
|
903
|
+
},
|
|
904
|
+
{
|
|
905
|
+
key: 'status-failed',
|
|
906
|
+
label: 'Status: Failed (top-right)'
|
|
907
|
+
},
|
|
908
|
+
{
|
|
909
|
+
key: 'start-point',
|
|
910
|
+
label: 'Start Point (bottom-left)'
|
|
911
|
+
},
|
|
912
|
+
{
|
|
913
|
+
key: 'square-dashed',
|
|
914
|
+
label: 'Square Dashed (bottom-right)'
|
|
915
|
+
},
|
|
916
|
+
{
|
|
917
|
+
key: 'all',
|
|
918
|
+
label: 'All Adornments'
|
|
919
|
+
},
|
|
920
|
+
{
|
|
921
|
+
key: 'multi-exec',
|
|
922
|
+
label: 'Multi-execution (count: 5)'
|
|
923
|
+
}
|
|
924
|
+
];
|
|
925
|
+
function createAdornmentGrid() {
|
|
926
|
+
const nodes = [];
|
|
927
|
+
ADORNMENT_ROWS.forEach((row, rowIndex)=>{
|
|
928
|
+
SHAPES.forEach((shape, colIndex)=>{
|
|
929
|
+
const label = 'rectangle' === shape ? 'Invoice approval agent' : 'Header';
|
|
930
|
+
const nodeType = 'rectangle' === shape ? 'uipath.agent' : 'uipath.blank-node';
|
|
931
|
+
nodes.push(createNode({
|
|
932
|
+
id: `adorn-${row.key}-${shape}`,
|
|
933
|
+
type: nodeType,
|
|
934
|
+
position: {
|
|
935
|
+
x: GRID_CONFIG.startX + colIndex * GRID_CONFIG.gapX,
|
|
936
|
+
y: GRID_CONFIG.startY + rowIndex * GRID_CONFIG.gapY
|
|
937
|
+
},
|
|
938
|
+
data: {
|
|
939
|
+
nodeType,
|
|
940
|
+
version: '1.0.0',
|
|
941
|
+
display: {
|
|
942
|
+
label,
|
|
943
|
+
subLabel: row.label,
|
|
944
|
+
shape
|
|
945
|
+
}
|
|
946
|
+
}
|
|
947
|
+
}));
|
|
948
|
+
});
|
|
949
|
+
});
|
|
950
|
+
return nodes;
|
|
951
|
+
}
|
|
952
|
+
function getAdornmentExecutionState(key) {
|
|
953
|
+
switch(key){
|
|
954
|
+
case 'breakpoint':
|
|
955
|
+
return {
|
|
956
|
+
status: 'None',
|
|
957
|
+
debug: true
|
|
958
|
+
};
|
|
959
|
+
case 'status-completed':
|
|
960
|
+
return {
|
|
961
|
+
status: 'Completed'
|
|
962
|
+
};
|
|
963
|
+
case 'status-inprogress':
|
|
964
|
+
return {
|
|
965
|
+
status: 'InProgress'
|
|
966
|
+
};
|
|
967
|
+
case 'status-failed':
|
|
968
|
+
return {
|
|
969
|
+
status: 'Failed'
|
|
970
|
+
};
|
|
971
|
+
case 'start-point':
|
|
972
|
+
return {
|
|
973
|
+
status: 'None',
|
|
974
|
+
isExecutionStartPoint: true
|
|
975
|
+
};
|
|
976
|
+
case 'square-dashed':
|
|
977
|
+
return {
|
|
978
|
+
status: 'None',
|
|
979
|
+
isOutputPinned: true
|
|
980
|
+
};
|
|
981
|
+
case 'all':
|
|
982
|
+
return {
|
|
983
|
+
status: 'Completed',
|
|
984
|
+
debug: true,
|
|
985
|
+
isExecutionStartPoint: true,
|
|
986
|
+
isOutputPinned: true
|
|
987
|
+
};
|
|
988
|
+
case 'multi-exec':
|
|
989
|
+
return {
|
|
990
|
+
status: 'Completed',
|
|
991
|
+
count: 5
|
|
992
|
+
};
|
|
993
|
+
default:
|
|
994
|
+
return;
|
|
995
|
+
}
|
|
996
|
+
}
|
|
997
|
+
function AdornmentsStory() {
|
|
998
|
+
const initialNodes = useMemo(()=>createAdornmentGrid(), []);
|
|
999
|
+
const { canvasProps } = useCanvasStory({
|
|
1000
|
+
initialNodes
|
|
1001
|
+
});
|
|
1002
|
+
return /*#__PURE__*/ jsxs(BaseCanvas, {
|
|
1003
|
+
...canvasProps,
|
|
1004
|
+
mode: "design",
|
|
1005
|
+
children: [
|
|
1006
|
+
/*#__PURE__*/ jsx(Panel, {
|
|
1007
|
+
position: "bottom-right",
|
|
1008
|
+
children: /*#__PURE__*/ jsx(CanvasPositionControls, {
|
|
1009
|
+
translations: DefaultCanvasTranslations
|
|
1010
|
+
})
|
|
1011
|
+
}),
|
|
1012
|
+
/*#__PURE__*/ jsx(StoryInfoPanel, {
|
|
1013
|
+
title: "Adornments",
|
|
1014
|
+
description: "Grid showing all adornment types across shapes. Each row demonstrates a different adornment: breakpoint (top-left), execution status (top-right), execution start point (bottom-left), square dashed (bottom-right), and all combined."
|
|
1015
|
+
})
|
|
1016
|
+
]
|
|
1017
|
+
});
|
|
1018
|
+
}
|
|
1019
|
+
const Adornments = {
|
|
1020
|
+
name: 'Adornments',
|
|
1021
|
+
decorators: [
|
|
1022
|
+
(Story)=>{
|
|
1023
|
+
const registry = useMemo(()=>{
|
|
1024
|
+
const reg = new NodeTypeRegistry();
|
|
1025
|
+
reg.registerManifest(sampleManifest.nodes, sampleManifest.categories);
|
|
1026
|
+
return reg;
|
|
1027
|
+
}, []);
|
|
1028
|
+
const contextValue = useMemo(()=>({
|
|
1029
|
+
registry
|
|
1030
|
+
}), [
|
|
1031
|
+
registry
|
|
1032
|
+
]);
|
|
1033
|
+
return /*#__PURE__*/ jsx(NodeRegistryContext.Provider, {
|
|
1034
|
+
value: contextValue,
|
|
1035
|
+
children: Story()
|
|
1036
|
+
});
|
|
1037
|
+
},
|
|
1038
|
+
withCanvasProviders({
|
|
1039
|
+
executionState: {
|
|
1040
|
+
getNodeExecutionState: (nodeId)=>{
|
|
1041
|
+
const parts = nodeId.split('-');
|
|
1042
|
+
const key = parts.slice(1, -1).join('-');
|
|
1043
|
+
return getAdornmentExecutionState(key);
|
|
1044
|
+
},
|
|
1045
|
+
getEdgeExecutionState: ()=>void 0
|
|
1046
|
+
},
|
|
1047
|
+
validationState: {
|
|
1048
|
+
getElementValidationState: ()=>void 0
|
|
1049
|
+
}
|
|
1050
|
+
})
|
|
1051
|
+
],
|
|
1052
|
+
render: ()=>/*#__PURE__*/ jsx(AdornmentsStory, {})
|
|
1053
|
+
};
|
|
950
1054
|
const ValidationStates = {
|
|
951
1055
|
name: 'Validation States',
|
|
952
1056
|
decorators: [
|
|
@@ -994,8 +1098,4 @@ const ValidationStates = {
|
|
|
994
1098
|
],
|
|
995
1099
|
render: ()=>/*#__PURE__*/ jsx(ValidationStatesStory, {})
|
|
996
1100
|
};
|
|
997
|
-
|
|
998
|
-
name: 'Loading',
|
|
999
|
-
render: ()=>/*#__PURE__*/ jsx(LoadingStory, {})
|
|
1000
|
-
};
|
|
1001
|
-
export { CustomizedSizes, Default, DynamicHandles, Loading, ValidationStates, BaseNode_stories as default };
|
|
1101
|
+
export { Adornments, CustomizedSizes, Default, DynamicHandles, ValidationStates, BaseNode_stories as default };
|
|
@@ -149,8 +149,8 @@ function mergeGroupDown(tasks, groupIndex, taskIndex) {
|
|
|
149
149
|
const currentGroupWithoutTask = currentGroup.filter((_, idx)=>idx !== taskIndex);
|
|
150
150
|
if (belowGroup) {
|
|
151
151
|
updatedTasks[groupIndex + 1] = [
|
|
152
|
-
|
|
153
|
-
|
|
152
|
+
task,
|
|
153
|
+
...belowGroup
|
|
154
154
|
];
|
|
155
155
|
if (currentGroupWithoutTask.length > 0) updatedTasks[groupIndex] = currentGroupWithoutTask;
|
|
156
156
|
else updatedTasks.splice(groupIndex, 1);
|
|
@@ -111,8 +111,8 @@ function mergeGroupDown(tasks, groupIndex, taskIndex) {
|
|
|
111
111
|
const currentGroupWithoutTask = currentGroup.filter((_, idx)=>idx !== taskIndex);
|
|
112
112
|
if (belowGroup) {
|
|
113
113
|
updatedTasks[groupIndex + 1] = [
|
|
114
|
-
|
|
115
|
-
|
|
114
|
+
task,
|
|
115
|
+
...belowGroup
|
|
116
116
|
];
|
|
117
117
|
if (currentGroupWithoutTask.length > 0) updatedTasks[groupIndex] = currentGroupWithoutTask;
|
|
118
118
|
else updatedTasks.splice(groupIndex, 1);
|
|
@@ -70,7 +70,7 @@ function ExecutionStatusIndicatorInternal({ status, count }) {
|
|
|
70
70
|
]
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
|
-
function
|
|
73
|
+
function SquareDashedIndicator() {
|
|
74
74
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApTooltip, {
|
|
75
75
|
content: "Node output is mocked",
|
|
76
76
|
placement: "bottom",
|
|
@@ -79,7 +79,7 @@ function PinnedOutputIndicator() {
|
|
|
79
79
|
display: 'inline-flex'
|
|
80
80
|
},
|
|
81
81
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.NodeIcon, {
|
|
82
|
-
icon: "
|
|
82
|
+
icon: "square-dashed",
|
|
83
83
|
size: 16,
|
|
84
84
|
color: "var(--color-foreground-emp)"
|
|
85
85
|
})
|
|
@@ -148,7 +148,7 @@ const getDefaultAdornments = (context)=>{
|
|
|
148
148
|
topLeft: hasBreakpoint ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BreakpointIndicator, {}) : void 0,
|
|
149
149
|
topRight: getTopRight(),
|
|
150
150
|
bottomLeft: isExecutionStartPoint ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExecutionStartPointIndicator, {}) : void 0,
|
|
151
|
-
bottomRight: isOutputPinned ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
|
|
151
|
+
bottomRight: isOutputPinned ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SquareDashedIndicator, {}) : void 0
|
|
152
152
|
};
|
|
153
153
|
};
|
|
154
154
|
function resolveAdornments(context) {
|
|
@@ -37,7 +37,7 @@ function ExecutionStatusIndicatorInternal({ status, count }) {
|
|
|
37
37
|
]
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
|
-
function
|
|
40
|
+
function SquareDashedIndicator() {
|
|
41
41
|
return /*#__PURE__*/ jsx(ApTooltip, {
|
|
42
42
|
content: "Node output is mocked",
|
|
43
43
|
placement: "bottom",
|
|
@@ -46,7 +46,7 @@ function PinnedOutputIndicator() {
|
|
|
46
46
|
display: 'inline-flex'
|
|
47
47
|
},
|
|
48
48
|
children: /*#__PURE__*/ jsx(NodeIcon, {
|
|
49
|
-
icon: "
|
|
49
|
+
icon: "square-dashed",
|
|
50
50
|
size: 16,
|
|
51
51
|
color: "var(--color-foreground-emp)"
|
|
52
52
|
})
|
|
@@ -115,7 +115,7 @@ const getDefaultAdornments = (context)=>{
|
|
|
115
115
|
topLeft: hasBreakpoint ? /*#__PURE__*/ jsx(BreakpointIndicator, {}) : void 0,
|
|
116
116
|
topRight: getTopRight(),
|
|
117
117
|
bottomLeft: isExecutionStartPoint ? /*#__PURE__*/ jsx(ExecutionStartPointIndicator, {}) : void 0,
|
|
118
|
-
bottomRight: isOutputPinned ? /*#__PURE__*/ jsx(
|
|
118
|
+
bottomRight: isOutputPinned ? /*#__PURE__*/ jsx(SquareDashedIndicator, {}) : void 0
|
|
119
119
|
};
|
|
120
120
|
};
|
|
121
121
|
function resolveAdornments(context) {
|
|
@@ -80,11 +80,6 @@ const iconRegistry = {
|
|
|
80
80
|
w: w ?? 24,
|
|
81
81
|
h: h ?? 24
|
|
82
82
|
}),
|
|
83
|
-
'pinned-output': ({ w, h, color })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.FlaskRunIcon, {
|
|
84
|
-
w: w ?? 24,
|
|
85
|
-
h: h ?? 24,
|
|
86
|
-
color: color
|
|
87
|
-
}),
|
|
88
83
|
uipath: ({ w, h })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.UiPathIcon, {
|
|
89
84
|
w: w ?? 24,
|
|
90
85
|
h: h ?? 24
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/icon-registry.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,GAAG,EAAiB,MAAM,OAAO,CAAC;AAGhD,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE;IAAE,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,GAAG,CAAC,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/icon-registry.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,GAAG,EAAiB,MAAM,OAAO,CAAC;AAGhD,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE;IAAE,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,GAAG,CAAC,OAAO,CAAC;AAqD/F,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAkCrD;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,eAAO,MAAM,QAAQ,qDAInB,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { icons } from "lucide-react";
|
|
3
3
|
import { memo, useMemo } from "react";
|
|
4
|
-
import { AgentDiagramIcon, AgentProject, ApiProject, AutonomousAgentIcon, CodedAgentIcon, ConnectorBuilderProject, ControlFlowIcon, ConversationalAgentIcon, DataAndTools, DecisionIcon,
|
|
4
|
+
import { AgentDiagramIcon, AgentProject, ApiProject, AutonomousAgentIcon, CodedAgentIcon, ConnectorBuilderProject, ControlFlowIcon, ConversationalAgentIcon, DataAndTools, DecisionIcon, RpaProject, SwitchIcon, UiPathIcon, WebAppProject } from "../icons/index.js";
|
|
5
5
|
const iconRegistry = {
|
|
6
6
|
agent: ({ w, h })=>/*#__PURE__*/ jsx(AgentProject, {
|
|
7
7
|
w: w ?? 29,
|
|
@@ -51,11 +51,6 @@ const iconRegistry = {
|
|
|
51
51
|
w: w ?? 24,
|
|
52
52
|
h: h ?? 24
|
|
53
53
|
}),
|
|
54
|
-
'pinned-output': ({ w, h, color })=>/*#__PURE__*/ jsx(FlaskRunIcon, {
|
|
55
|
-
w: w ?? 24,
|
|
56
|
-
h: h ?? 24,
|
|
57
|
-
color: color
|
|
58
|
-
}),
|
|
59
54
|
uipath: ({ w, h })=>/*#__PURE__*/ jsx(UiPathIcon, {
|
|
60
55
|
w: w ?? 24,
|
|
61
56
|
h: h ?? 24
|