@uipath/apollo-react 4.12.0 → 4.12.1-pr556.9394355
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/AddNodePanel/AddNodeManager.cjs +26 -7
- package/dist/canvas/components/AddNodePanel/AddNodeManager.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/AddNodeManager.js +26 -7
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.cjs +2 -2
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts +8 -1
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.js +2 -2
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts +1 -0
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.cjs +8 -3
- package/dist/canvas/components/BaseNode/BaseNode.d.ts +2 -1
- package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.js +5 -3
- package/dist/canvas/components/ButtonHandle/ButtonHandle.cjs +115 -34
- package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts +4 -2
- package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandle.js +117 -36
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.cjs +48 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts +4 -0
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.js +36 -1
- package/dist/canvas/components/ButtonHandle/SmartHandle.cjs +1 -1
- package/dist/canvas/components/ButtonHandle/SmartHandle.js +1 -1
- package/dist/canvas/components/Edges/SequenceEdge.cjs +3 -2
- package/dist/canvas/components/Edges/SequenceEdge.d.ts +11 -2
- package/dist/canvas/components/Edges/SequenceEdge.d.ts.map +1 -1
- package/dist/canvas/components/Edges/SequenceEdge.js +4 -3
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs +20 -10
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts +2 -0
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts.map +1 -1
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js +21 -11
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.cjs +5 -8
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.d.ts.map +1 -1
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.js +5 -8
- package/dist/canvas/components/LoopNode/LoopCanvasNode.cjs +80 -0
- package/dist/canvas/components/LoopNode/LoopCanvasNode.d.ts +6 -0
- package/dist/canvas/components/LoopNode/LoopCanvasNode.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopCanvasNode.js +46 -0
- package/dist/canvas/components/LoopNode/LoopNode.cjs +440 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.cjs +77 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts +12 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.js +13 -0
- package/dist/canvas/components/LoopNode/LoopNode.d.ts +5 -0
- package/dist/canvas/components/LoopNode/LoopNode.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.cjs +110 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts +19 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.js +70 -0
- package/dist/canvas/components/LoopNode/LoopNode.js +406 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.cjs +18 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.d.ts +16 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.js +0 -0
- package/dist/canvas/components/LoopNode/LoopNodePreview.cjs +81 -0
- package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts +8 -0
- package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNodePreview.js +44 -0
- package/dist/canvas/components/LoopNode/index.cjs +72 -0
- package/dist/canvas/components/LoopNode/index.d.ts +4 -0
- package/dist/canvas/components/LoopNode/index.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/index.js +3 -0
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs +20 -18
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts +2 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map +1 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js +21 -19
- package/dist/canvas/components/Toolbox/ListView.cjs +3 -2
- package/dist/canvas/components/Toolbox/ListView.d.ts +1 -0
- package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/ListView.js +3 -2
- package/dist/canvas/components/Toolbox/Toolbox.cjs +38 -9
- package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/Toolbox.js +38 -9
- package/dist/canvas/components/index.cjs +27 -20
- package/dist/canvas/components/index.d.ts +1 -0
- package/dist/canvas/components/index.d.ts.map +1 -1
- package/dist/canvas/components/index.js +1 -0
- package/dist/canvas/core/NodeTypeRegistry.cjs +41 -23
- package/dist/canvas/core/NodeTypeRegistry.d.ts +8 -4
- package/dist/canvas/core/NodeTypeRegistry.d.ts.map +1 -1
- package/dist/canvas/core/NodeTypeRegistry.js +41 -23
- package/dist/canvas/core/useNodeTypeRegistry.cjs +4 -3
- package/dist/canvas/core/useNodeTypeRegistry.d.ts +1 -1
- package/dist/canvas/core/useNodeTypeRegistry.d.ts.map +1 -1
- package/dist/canvas/core/useNodeTypeRegistry.js +4 -3
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.cjs +4 -3
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.d.ts.map +1 -1
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.js +4 -3
- package/dist/canvas/hooks/usePreviewNode.cjs +4 -2
- package/dist/canvas/hooks/usePreviewNode.d.ts.map +1 -1
- package/dist/canvas/hooks/usePreviewNode.js +4 -2
- package/dist/canvas/schema/node-definition/handle.cjs +10 -2
- package/dist/canvas/schema/node-definition/handle.d.ts +9 -0
- package/dist/canvas/schema/node-definition/handle.d.ts.map +1 -1
- package/dist/canvas/schema/node-definition/handle.js +6 -1
- package/dist/canvas/schema/node-definition/index.cjs +4 -1
- package/dist/canvas/schema/node-definition/index.d.ts +3 -3
- package/dist/canvas/schema/node-definition/index.d.ts.map +1 -1
- package/dist/canvas/schema/node-definition/index.js +2 -2
- package/dist/canvas/schema/node-definition/node-manifest.d.ts +4 -0
- package/dist/canvas/schema/node-definition/node-manifest.d.ts.map +1 -1
- package/dist/canvas/storybook-utils/manifests/index.d.ts +1 -0
- package/dist/canvas/storybook-utils/manifests/index.d.ts.map +1 -1
- package/dist/canvas/storybook-utils/manifests/node-definitions.d.ts.map +1 -1
- package/dist/canvas/styles/tailwind.canvas.css +1 -1
- package/dist/canvas/utils/createPreviewGraph.cjs +94 -0
- package/dist/canvas/utils/createPreviewGraph.d.ts +24 -0
- package/dist/canvas/utils/createPreviewGraph.d.ts.map +1 -0
- package/dist/canvas/utils/createPreviewGraph.js +51 -0
- package/dist/canvas/utils/createPreviewNode.cjs +29 -13
- package/dist/canvas/utils/createPreviewNode.d.ts +5 -1
- package/dist/canvas/utils/createPreviewNode.d.ts.map +1 -1
- package/dist/canvas/utils/createPreviewNode.js +23 -13
- package/dist/canvas/utils/index.cjs +33 -26
- package/dist/canvas/utils/index.d.ts +2 -1
- package/dist/canvas/utils/index.d.ts.map +1 -1
- package/dist/canvas/utils/index.js +2 -1
- package/package.json +1 -1
|
@@ -29,10 +29,11 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
29
29
|
const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
|
|
30
30
|
const external_react_namespaceObject = require("react");
|
|
31
31
|
const external_constants_cjs_namespaceObject = require("../../../constants.cjs");
|
|
32
|
+
const createPreviewGraph_cjs_namespaceObject = require("../../../utils/createPreviewGraph.cjs");
|
|
32
33
|
const createPreviewNode_cjs_namespaceObject = require("../../../utils/createPreviewNode.cjs");
|
|
33
34
|
const BaseCanvasModeProvider_cjs_namespaceObject = require("../../BaseCanvas/BaseCanvasModeProvider.cjs");
|
|
34
35
|
const external_useEdgeToolbarPositioning_cjs_namespaceObject = require("./useEdgeToolbarPositioning.cjs");
|
|
35
|
-
function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
|
|
36
|
+
function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, parentId }) {
|
|
36
37
|
const reactFlow = (0, react_cjs_namespaceObject.useReactFlow)();
|
|
37
38
|
const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
|
|
38
39
|
const isDesignMode = 'design' === mode;
|
|
@@ -43,34 +44,34 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
|
|
|
43
44
|
targetPosition
|
|
44
45
|
});
|
|
45
46
|
const handleAddNodeOnEdge = (0, external_react_namespaceObject.useCallback)((position)=>{
|
|
47
|
+
const previewEdgeData = parentId ? {
|
|
48
|
+
parentId
|
|
49
|
+
} : void 0;
|
|
46
50
|
const originalEdge = {
|
|
47
51
|
id: edgeId,
|
|
48
52
|
source,
|
|
49
53
|
sourceHandle: sourceHandleId,
|
|
50
54
|
target,
|
|
51
55
|
targetHandle: targetHandleId,
|
|
52
|
-
type: 'default'
|
|
56
|
+
type: 'default',
|
|
57
|
+
data: previewEdgeData
|
|
53
58
|
};
|
|
54
59
|
const preview = (0, createPreviewNode_cjs_namespaceObject.createPreviewNode)(source, sourceHandleId || 'output', reactFlow, position, {
|
|
55
60
|
originalEdge
|
|
56
61
|
}, 'source', void 0, sourcePosition, ignoredNodeTypes);
|
|
57
62
|
if (!preview) return;
|
|
58
|
-
const
|
|
59
|
-
|
|
60
|
-
source: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
|
|
61
|
-
sourceHandle: 'output',
|
|
63
|
+
const previewGraph = (0, createPreviewGraph_cjs_namespaceObject.createPreviewGraph)({
|
|
64
|
+
preview,
|
|
62
65
|
target,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
secondEdge
|
|
73
|
-
]);
|
|
66
|
+
targetHandleId,
|
|
67
|
+
reactFlowInstance: reactFlow,
|
|
68
|
+
containerId: parentId,
|
|
69
|
+
removedEdgeIds: [
|
|
70
|
+
edgeId
|
|
71
|
+
]
|
|
72
|
+
});
|
|
73
|
+
if (!previewGraph) return;
|
|
74
|
+
(0, createPreviewNode_cjs_namespaceObject.applyPreviewGraphToReactFlow)(previewGraph, reactFlow);
|
|
74
75
|
}, [
|
|
75
76
|
sourcePosition,
|
|
76
77
|
source,
|
|
@@ -79,7 +80,8 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
|
|
|
79
80
|
target,
|
|
80
81
|
targetHandleId,
|
|
81
82
|
edgeId,
|
|
82
|
-
ignoredNodeTypes
|
|
83
|
+
ignoredNodeTypes,
|
|
84
|
+
parentId
|
|
83
85
|
]);
|
|
84
86
|
const config = (0, external_react_namespaceObject.useMemo)(()=>({
|
|
85
87
|
actions: [
|
|
@@ -11,6 +11,7 @@ export interface UseEdgeToolbarStateProps {
|
|
|
11
11
|
sourcePosition: Position;
|
|
12
12
|
targetPosition: Position;
|
|
13
13
|
ignoredNodeTypes?: string[];
|
|
14
|
+
parentId?: string;
|
|
14
15
|
}
|
|
15
16
|
export interface EdgeToolbarState {
|
|
16
17
|
showToolbar: boolean;
|
|
@@ -18,5 +19,5 @@ export interface EdgeToolbarState {
|
|
|
18
19
|
config: EdgeToolbarConfig;
|
|
19
20
|
handleMouseMoveOnPath?: (event: React.MouseEvent) => void;
|
|
20
21
|
}
|
|
21
|
-
export declare function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, }: UseEdgeToolbarStateProps): EdgeToolbarState;
|
|
22
|
+
export declare function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, parentId, }: UseEdgeToolbarStateProps): EdgeToolbarState;
|
|
22
23
|
//# sourceMappingURL=useEdgeToolbarState.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"useEdgeToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAgB,MAAM,0CAA0C,CAAC;AAMlG,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAGtF,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9D,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACnD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3D;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,cAAc,EACd,SAAS,EACT,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,QAAQ,GACT,EAAE,wBAAwB,GAAG,gBAAgB,CAiG7C"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { useReactFlow } from "../../../xyflow/react.js";
|
|
2
2
|
import { useCallback, useMemo } from "react";
|
|
3
3
|
import { PREVIEW_NODE_ID } from "../../../constants.js";
|
|
4
|
-
import {
|
|
4
|
+
import { createPreviewGraph } from "../../../utils/createPreviewGraph.js";
|
|
5
|
+
import { applyPreviewGraphToReactFlow, createPreviewNode } from "../../../utils/createPreviewNode.js";
|
|
5
6
|
import { useBaseCanvasMode } from "../../BaseCanvas/BaseCanvasModeProvider.js";
|
|
6
7
|
import { useEdgeToolbarPositioning } from "./useEdgeToolbarPositioning.js";
|
|
7
|
-
function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes }) {
|
|
8
|
+
function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target, sourceHandleId, targetHandleId, sourcePosition, targetPosition, ignoredNodeTypes, parentId }) {
|
|
8
9
|
const reactFlow = useReactFlow();
|
|
9
10
|
const { mode } = useBaseCanvasMode();
|
|
10
11
|
const isDesignMode = 'design' === mode;
|
|
@@ -15,34 +16,34 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
|
|
|
15
16
|
targetPosition
|
|
16
17
|
});
|
|
17
18
|
const handleAddNodeOnEdge = useCallback((position)=>{
|
|
19
|
+
const previewEdgeData = parentId ? {
|
|
20
|
+
parentId
|
|
21
|
+
} : void 0;
|
|
18
22
|
const originalEdge = {
|
|
19
23
|
id: edgeId,
|
|
20
24
|
source,
|
|
21
25
|
sourceHandle: sourceHandleId,
|
|
22
26
|
target,
|
|
23
27
|
targetHandle: targetHandleId,
|
|
24
|
-
type: 'default'
|
|
28
|
+
type: 'default',
|
|
29
|
+
data: previewEdgeData
|
|
25
30
|
};
|
|
26
31
|
const preview = createPreviewNode(source, sourceHandleId || 'output', reactFlow, position, {
|
|
27
32
|
originalEdge
|
|
28
33
|
}, 'source', void 0, sourcePosition, ignoredNodeTypes);
|
|
29
34
|
if (!preview) return;
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
source: PREVIEW_NODE_ID,
|
|
33
|
-
sourceHandle: 'output',
|
|
35
|
+
const previewGraph = createPreviewGraph({
|
|
36
|
+
preview,
|
|
34
37
|
target,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
secondEdge
|
|
45
|
-
]);
|
|
38
|
+
targetHandleId,
|
|
39
|
+
reactFlowInstance: reactFlow,
|
|
40
|
+
containerId: parentId,
|
|
41
|
+
removedEdgeIds: [
|
|
42
|
+
edgeId
|
|
43
|
+
]
|
|
44
|
+
});
|
|
45
|
+
if (!previewGraph) return;
|
|
46
|
+
applyPreviewGraphToReactFlow(previewGraph, reactFlow);
|
|
46
47
|
}, [
|
|
47
48
|
sourcePosition,
|
|
48
49
|
source,
|
|
@@ -51,7 +52,8 @@ function useEdgeToolbarState({ edgeId, pathElementRef, isHovered, source, target
|
|
|
51
52
|
target,
|
|
52
53
|
targetHandleId,
|
|
53
54
|
edgeId,
|
|
54
|
-
ignoredNodeTypes
|
|
55
|
+
ignoredNodeTypes,
|
|
56
|
+
parentId
|
|
55
57
|
]);
|
|
56
58
|
const config = useMemo(()=>({
|
|
57
59
|
actions: [
|
|
@@ -167,7 +167,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
|
|
|
167
167
|
]
|
|
168
168
|
});
|
|
169
169
|
});
|
|
170
|
-
const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
|
|
170
|
+
const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
|
|
171
171
|
const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
|
|
172
172
|
const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections), [
|
|
173
173
|
items,
|
|
@@ -229,7 +229,8 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
|
|
|
229
229
|
rowComponent: ListViewRow,
|
|
230
230
|
rowCount: renderedItems.length,
|
|
231
231
|
rowHeight: 40,
|
|
232
|
-
overscanCount: 20
|
|
232
|
+
overscanCount: 20,
|
|
233
|
+
onScroll: onScroll
|
|
233
234
|
});
|
|
234
235
|
});
|
|
235
236
|
const ListView_ListView = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ListViewInner);
|
|
@@ -40,6 +40,7 @@ interface ListViewProps<T extends ListItem> {
|
|
|
40
40
|
listRef?: React.RefObject<ListImperativeAPI | null>;
|
|
41
41
|
onItemClick: (item: T, index: number) => void;
|
|
42
42
|
onItemHover?: (item: T) => void;
|
|
43
|
+
onScroll?: React.UIEventHandler<HTMLDivElement>;
|
|
43
44
|
emptyStateMessage?: string;
|
|
44
45
|
emptyStateIcon?: string;
|
|
45
46
|
isLoading?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAKzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AA8FD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;
|
|
1
|
+
{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAKzE,MAAM,WAAW,YAAY;IAI3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,GAAG,CAAC,EAAE,MAAM,CAAC;IAIb,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,GAAG,IAAI;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,QAAQ,IACrC;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAE9B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,QAAQ,EACnD,KAAK,EAAE,CAAC,EAAE,EACV,cAAc,EAAE,OAAO,GACtB,UAAU,CAAC,CAAC,CAAC,EAAE,CAqCjB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,QAAQ;IAClD,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACjC;AA8FD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ;IAC3D,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;CAChC;AAED,UAAU,aAAa,CAAC,CAAC,SAAS,QAAQ;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAmED,eAAO,MAAM,QAAQ,EAA0B,CAAC,CAAC,SAAS,QAAQ,EAChE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}
|
|
@@ -138,7 +138,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
|
|
|
138
138
|
]
|
|
139
139
|
});
|
|
140
140
|
});
|
|
141
|
-
const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
|
|
141
|
+
const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true }, ref) {
|
|
142
142
|
const { isDarkMode } = useCanvasTheme();
|
|
143
143
|
const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections), [
|
|
144
144
|
items,
|
|
@@ -200,7 +200,8 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
|
|
|
200
200
|
rowComponent: ListViewRow,
|
|
201
201
|
rowCount: renderedItems.length,
|
|
202
202
|
rowHeight: 40,
|
|
203
|
-
overscanCount: 20
|
|
203
|
+
overscanCount: 20,
|
|
204
|
+
onScroll: onScroll
|
|
204
205
|
});
|
|
205
206
|
});
|
|
206
207
|
const ListView_ListView = /*#__PURE__*/ memo(ListViewInner);
|
|
@@ -100,6 +100,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
100
100
|
const listViewRef = (0, external_react_namespaceObject.useRef)(null);
|
|
101
101
|
const searchInputRef = (0, external_react_namespaceObject.useRef)(null);
|
|
102
102
|
const clearButtonRef = (0, external_react_namespaceObject.useRef)(null);
|
|
103
|
+
const lastScrollTopRef = (0, external_react_namespaceObject.useRef)(0);
|
|
104
|
+
const handleListScroll = (0, external_react_namespaceObject.useCallback)((e)=>{
|
|
105
|
+
lastScrollTopRef.current = e.currentTarget.scrollTop;
|
|
106
|
+
}, []);
|
|
103
107
|
const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
|
|
104
108
|
search
|
|
105
109
|
]);
|
|
@@ -185,31 +189,45 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
185
189
|
setSearchLoading(false);
|
|
186
190
|
setIsSearchingInitialItems(true);
|
|
187
191
|
const restoredIndex = previousState?.data.activeIndex ?? SEARCH_BAR_INDEX;
|
|
188
|
-
|
|
192
|
+
const restoredScrollTop = previousState?.data.scrollTop ?? 0;
|
|
193
|
+
setActiveIndex(restoredIndex);
|
|
194
|
+
searchInputRef.current?.focus();
|
|
195
|
+
requestAnimationFrame(()=>{
|
|
196
|
+
const element = listRef.current?.element;
|
|
197
|
+
if (element) element.scrollTop = restoredScrollTop;
|
|
198
|
+
lastScrollTopRef.current = restoredScrollTop;
|
|
199
|
+
});
|
|
189
200
|
onBack?.();
|
|
190
201
|
}, [
|
|
191
202
|
navigationStack,
|
|
192
203
|
onBack,
|
|
193
204
|
startTransition,
|
|
194
|
-
|
|
205
|
+
listRef
|
|
195
206
|
]);
|
|
196
207
|
const handleItemSelect = (0, external_react_namespaceObject.useCallback)(async (item, index)=>{
|
|
197
208
|
if (!item.children) return void onItemSelect(item);
|
|
198
209
|
setChildrenLoading(true);
|
|
199
210
|
const nestedItems = 'function' == typeof item.children ? await item.children(item.id, item.name) : item.children;
|
|
200
211
|
const savedIndex = isSearching ? SEARCH_BAR_INDEX : index ?? activeIndex;
|
|
212
|
+
const savedScrollTop = isSearching ? 0 : lastScrollTopRef.current;
|
|
201
213
|
navigationStack.push({
|
|
202
214
|
title: currentParentItem?.name || title,
|
|
203
215
|
data: {
|
|
204
216
|
items,
|
|
205
217
|
parentItem: currentParentItem,
|
|
206
|
-
activeIndex: savedIndex
|
|
218
|
+
activeIndex: savedIndex,
|
|
219
|
+
scrollTop: savedScrollTop
|
|
207
220
|
}
|
|
208
221
|
});
|
|
209
222
|
setItems(nestedItems);
|
|
210
223
|
setCurrentParentItem(item);
|
|
211
224
|
clearSearch();
|
|
212
225
|
setActiveIndex(SEARCH_BAR_INDEX);
|
|
226
|
+
requestAnimationFrame(()=>{
|
|
227
|
+
const element = listRef.current?.element;
|
|
228
|
+
if (element) element.scrollTop = 0;
|
|
229
|
+
lastScrollTopRef.current = 0;
|
|
230
|
+
});
|
|
213
231
|
startTransition('forward');
|
|
214
232
|
setChildrenLoading(false);
|
|
215
233
|
}, [
|
|
@@ -221,7 +239,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
221
239
|
isSearching,
|
|
222
240
|
clearSearch,
|
|
223
241
|
startTransition,
|
|
224
|
-
onItemSelect
|
|
242
|
+
onItemSelect,
|
|
243
|
+
listRef
|
|
225
244
|
]);
|
|
226
245
|
(0, external_react_namespaceObject.useEffect)(()=>()=>{
|
|
227
246
|
if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
|
|
@@ -242,7 +261,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
242
261
|
data: {
|
|
243
262
|
items: newInitialItems,
|
|
244
263
|
parentItem: null,
|
|
245
|
-
activeIndex: stackItem.data.activeIndex
|
|
264
|
+
activeIndex: stackItem.data.activeIndex,
|
|
265
|
+
scrollTop: stackItem.data.scrollTop
|
|
246
266
|
}
|
|
247
267
|
};
|
|
248
268
|
const updatedParentItem = findItemById(newInitialItems, stackItem.data.parentItem.id);
|
|
@@ -253,7 +273,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
253
273
|
data: {
|
|
254
274
|
items: updatedItems,
|
|
255
275
|
parentItem: updatedParentItem,
|
|
256
|
-
activeIndex: stackItem.data.activeIndex
|
|
276
|
+
activeIndex: stackItem.data.activeIndex,
|
|
277
|
+
scrollTop: stackItem.data.scrollTop
|
|
257
278
|
}
|
|
258
279
|
};
|
|
259
280
|
});
|
|
@@ -360,6 +381,13 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
360
381
|
handleItemSelect,
|
|
361
382
|
handleBackTransition
|
|
362
383
|
]);
|
|
384
|
+
const handleClose = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
385
|
+
navigationStack.clear();
|
|
386
|
+
onClose();
|
|
387
|
+
}, [
|
|
388
|
+
navigationStack,
|
|
389
|
+
onClose
|
|
390
|
+
]);
|
|
363
391
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
364
392
|
const handleKeyDown = (e)=>{
|
|
365
393
|
if ('Escape' === e.key) if (isSearching) {
|
|
@@ -367,10 +395,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
367
395
|
startTransition('back');
|
|
368
396
|
clearSearch();
|
|
369
397
|
} else if (navigationStack.canGoBack) handleBackTransition();
|
|
370
|
-
else
|
|
398
|
+
else handleClose();
|
|
371
399
|
};
|
|
372
400
|
const handleClickOutside = (e)=>{
|
|
373
|
-
if (containerRef.current && !containerRef.current.contains(e.target))
|
|
401
|
+
if (containerRef.current && !containerRef.current.contains(e.target)) handleClose();
|
|
374
402
|
};
|
|
375
403
|
document.addEventListener('keydown', handleKeyDown);
|
|
376
404
|
document.addEventListener('mousedown', handleClickOutside);
|
|
@@ -381,7 +409,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
381
409
|
}, [
|
|
382
410
|
isSearching,
|
|
383
411
|
navigationStack.canGoBack,
|
|
384
|
-
|
|
412
|
+
handleClose,
|
|
385
413
|
clearSearch,
|
|
386
414
|
startTransition,
|
|
387
415
|
handleBackTransition
|
|
@@ -425,6 +453,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
425
453
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
426
454
|
onItemClick: handleItemSelect,
|
|
427
455
|
onItemHover: onItemHover,
|
|
456
|
+
onScroll: handleListScroll,
|
|
428
457
|
enableSections: !isSearching
|
|
429
458
|
})
|
|
430
459
|
})
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,2CAwfjB"}
|
|
@@ -72,6 +72,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
72
72
|
const listViewRef = useRef(null);
|
|
73
73
|
const searchInputRef = useRef(null);
|
|
74
74
|
const clearButtonRef = useRef(null);
|
|
75
|
+
const lastScrollTopRef = useRef(0);
|
|
76
|
+
const handleListScroll = useCallback((e)=>{
|
|
77
|
+
lastScrollTopRef.current = e.currentTarget.scrollTop;
|
|
78
|
+
}, []);
|
|
75
79
|
const isSearching = useMemo(()=>search.length > 0, [
|
|
76
80
|
search
|
|
77
81
|
]);
|
|
@@ -157,31 +161,45 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
157
161
|
setSearchLoading(false);
|
|
158
162
|
setIsSearchingInitialItems(true);
|
|
159
163
|
const restoredIndex = previousState?.data.activeIndex ?? SEARCH_BAR_INDEX;
|
|
160
|
-
|
|
164
|
+
const restoredScrollTop = previousState?.data.scrollTop ?? 0;
|
|
165
|
+
setActiveIndex(restoredIndex);
|
|
166
|
+
searchInputRef.current?.focus();
|
|
167
|
+
requestAnimationFrame(()=>{
|
|
168
|
+
const element = listRef.current?.element;
|
|
169
|
+
if (element) element.scrollTop = restoredScrollTop;
|
|
170
|
+
lastScrollTopRef.current = restoredScrollTop;
|
|
171
|
+
});
|
|
161
172
|
onBack?.();
|
|
162
173
|
}, [
|
|
163
174
|
navigationStack,
|
|
164
175
|
onBack,
|
|
165
176
|
startTransition,
|
|
166
|
-
|
|
177
|
+
listRef
|
|
167
178
|
]);
|
|
168
179
|
const handleItemSelect = useCallback(async (item, index)=>{
|
|
169
180
|
if (!item.children) return void onItemSelect(item);
|
|
170
181
|
setChildrenLoading(true);
|
|
171
182
|
const nestedItems = 'function' == typeof item.children ? await item.children(item.id, item.name) : item.children;
|
|
172
183
|
const savedIndex = isSearching ? SEARCH_BAR_INDEX : index ?? activeIndex;
|
|
184
|
+
const savedScrollTop = isSearching ? 0 : lastScrollTopRef.current;
|
|
173
185
|
navigationStack.push({
|
|
174
186
|
title: currentParentItem?.name || title,
|
|
175
187
|
data: {
|
|
176
188
|
items,
|
|
177
189
|
parentItem: currentParentItem,
|
|
178
|
-
activeIndex: savedIndex
|
|
190
|
+
activeIndex: savedIndex,
|
|
191
|
+
scrollTop: savedScrollTop
|
|
179
192
|
}
|
|
180
193
|
});
|
|
181
194
|
setItems(nestedItems);
|
|
182
195
|
setCurrentParentItem(item);
|
|
183
196
|
clearSearch();
|
|
184
197
|
setActiveIndex(SEARCH_BAR_INDEX);
|
|
198
|
+
requestAnimationFrame(()=>{
|
|
199
|
+
const element = listRef.current?.element;
|
|
200
|
+
if (element) element.scrollTop = 0;
|
|
201
|
+
lastScrollTopRef.current = 0;
|
|
202
|
+
});
|
|
185
203
|
startTransition('forward');
|
|
186
204
|
setChildrenLoading(false);
|
|
187
205
|
}, [
|
|
@@ -193,7 +211,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
193
211
|
isSearching,
|
|
194
212
|
clearSearch,
|
|
195
213
|
startTransition,
|
|
196
|
-
onItemSelect
|
|
214
|
+
onItemSelect,
|
|
215
|
+
listRef
|
|
197
216
|
]);
|
|
198
217
|
useEffect(()=>()=>{
|
|
199
218
|
if (transitionTimeoutRef.current) clearTimeout(transitionTimeoutRef.current);
|
|
@@ -214,7 +233,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
214
233
|
data: {
|
|
215
234
|
items: newInitialItems,
|
|
216
235
|
parentItem: null,
|
|
217
|
-
activeIndex: stackItem.data.activeIndex
|
|
236
|
+
activeIndex: stackItem.data.activeIndex,
|
|
237
|
+
scrollTop: stackItem.data.scrollTop
|
|
218
238
|
}
|
|
219
239
|
};
|
|
220
240
|
const updatedParentItem = findItemById(newInitialItems, stackItem.data.parentItem.id);
|
|
@@ -225,7 +245,8 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
225
245
|
data: {
|
|
226
246
|
items: updatedItems,
|
|
227
247
|
parentItem: updatedParentItem,
|
|
228
|
-
activeIndex: stackItem.data.activeIndex
|
|
248
|
+
activeIndex: stackItem.data.activeIndex,
|
|
249
|
+
scrollTop: stackItem.data.scrollTop
|
|
229
250
|
}
|
|
230
251
|
};
|
|
231
252
|
});
|
|
@@ -332,6 +353,13 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
332
353
|
handleItemSelect,
|
|
333
354
|
handleBackTransition
|
|
334
355
|
]);
|
|
356
|
+
const handleClose = useCallback(()=>{
|
|
357
|
+
navigationStack.clear();
|
|
358
|
+
onClose();
|
|
359
|
+
}, [
|
|
360
|
+
navigationStack,
|
|
361
|
+
onClose
|
|
362
|
+
]);
|
|
335
363
|
useEffect(()=>{
|
|
336
364
|
const handleKeyDown = (e)=>{
|
|
337
365
|
if ('Escape' === e.key) if (isSearching) {
|
|
@@ -339,10 +367,10 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
339
367
|
startTransition('back');
|
|
340
368
|
clearSearch();
|
|
341
369
|
} else if (navigationStack.canGoBack) handleBackTransition();
|
|
342
|
-
else
|
|
370
|
+
else handleClose();
|
|
343
371
|
};
|
|
344
372
|
const handleClickOutside = (e)=>{
|
|
345
|
-
if (containerRef.current && !containerRef.current.contains(e.target))
|
|
373
|
+
if (containerRef.current && !containerRef.current.contains(e.target)) handleClose();
|
|
346
374
|
};
|
|
347
375
|
document.addEventListener('keydown', handleKeyDown);
|
|
348
376
|
document.addEventListener('mousedown', handleClickOutside);
|
|
@@ -353,7 +381,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
353
381
|
}, [
|
|
354
382
|
isSearching,
|
|
355
383
|
navigationStack.canGoBack,
|
|
356
|
-
|
|
384
|
+
handleClose,
|
|
357
385
|
clearSearch,
|
|
358
386
|
startTransition,
|
|
359
387
|
handleBackTransition
|
|
@@ -397,6 +425,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
397
425
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
398
426
|
onItemClick: handleItemSelect,
|
|
399
427
|
onItemHover: onItemHover,
|
|
428
|
+
onScroll: handleListScroll,
|
|
400
429
|
enableSections: !isSearching
|
|
401
430
|
})
|
|
402
431
|
})
|
|
@@ -36,6 +36,9 @@ var __webpack_modules__ = {
|
|
|
36
36
|
"./HierarchicalCanvas" (module) {
|
|
37
37
|
module.exports = require("./HierarchicalCanvas/index.cjs");
|
|
38
38
|
},
|
|
39
|
+
"./LoopNode?4ffc" (module) {
|
|
40
|
+
module.exports = require("./LoopNode/index.cjs");
|
|
41
|
+
},
|
|
39
42
|
"./MiniCanvasNavigator?564d" (module) {
|
|
40
43
|
module.exports = require("./MiniCanvasNavigator/index.cjs");
|
|
41
44
|
},
|
|
@@ -158,45 +161,49 @@ var __webpack_exports__ = {};
|
|
|
158
161
|
var __rspack_reexport = {};
|
|
159
162
|
for(const __rspack_import_key in _HierarchicalCanvas__rspack_import_11)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_HierarchicalCanvas__rspack_import_11[__rspack_import_key];
|
|
160
163
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
161
|
-
var
|
|
164
|
+
var _LoopNode__rspack_import_12 = __webpack_require__("./LoopNode?4ffc");
|
|
165
|
+
var __rspack_reexport = {};
|
|
166
|
+
for(const __rspack_import_key in _LoopNode__rspack_import_12)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_LoopNode__rspack_import_12[__rspack_import_key];
|
|
167
|
+
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
168
|
+
var _MiniCanvasNavigator__rspack_import_13 = __webpack_require__("./MiniCanvasNavigator?564d");
|
|
162
169
|
var __rspack_reexport = {};
|
|
163
|
-
for(const __rspack_import_key in
|
|
170
|
+
for(const __rspack_import_key in _MiniCanvasNavigator__rspack_import_13)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_MiniCanvasNavigator__rspack_import_13[__rspack_import_key];
|
|
164
171
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
165
|
-
var
|
|
172
|
+
var _NodeContextMenu__rspack_import_14 = __webpack_require__("./NodeContextMenu");
|
|
166
173
|
var __rspack_reexport = {};
|
|
167
|
-
for(const __rspack_import_key in
|
|
174
|
+
for(const __rspack_import_key in _NodeContextMenu__rspack_import_14)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_NodeContextMenu__rspack_import_14[__rspack_import_key];
|
|
168
175
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
169
|
-
var
|
|
176
|
+
var _NodeInspector__rspack_import_15 = __webpack_require__("./NodeInspector");
|
|
170
177
|
var __rspack_reexport = {};
|
|
171
|
-
for(const __rspack_import_key in
|
|
178
|
+
for(const __rspack_import_key in _NodeInspector__rspack_import_15)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_NodeInspector__rspack_import_15[__rspack_import_key];
|
|
172
179
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
173
|
-
var
|
|
180
|
+
var _NodePropertiesPanel__rspack_import_16 = __webpack_require__("./NodePropertiesPanel?a3e8");
|
|
174
181
|
var __rspack_reexport = {};
|
|
175
|
-
for(const __rspack_import_key in
|
|
182
|
+
for(const __rspack_import_key in _NodePropertiesPanel__rspack_import_16)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_NodePropertiesPanel__rspack_import_16[__rspack_import_key];
|
|
176
183
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
177
|
-
var
|
|
184
|
+
var _StageNode__rspack_import_17 = __webpack_require__("./StageNode");
|
|
178
185
|
var __rspack_reexport = {};
|
|
179
|
-
for(const __rspack_import_key in
|
|
186
|
+
for(const __rspack_import_key in _StageNode__rspack_import_17)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_StageNode__rspack_import_17[__rspack_import_key];
|
|
180
187
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
181
|
-
var
|
|
188
|
+
var _StickyNoteNode__rspack_import_18 = __webpack_require__("./StickyNoteNode?d2a3");
|
|
182
189
|
var __rspack_reexport = {};
|
|
183
|
-
for(const __rspack_import_key in
|
|
190
|
+
for(const __rspack_import_key in _StickyNoteNode__rspack_import_18)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_StickyNoteNode__rspack_import_18[__rspack_import_key];
|
|
184
191
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
185
|
-
var
|
|
192
|
+
var _TaskIcon__rspack_import_19 = __webpack_require__("./TaskIcon");
|
|
186
193
|
var __rspack_reexport = {};
|
|
187
|
-
for(const __rspack_import_key in
|
|
194
|
+
for(const __rspack_import_key in _TaskIcon__rspack_import_19)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_TaskIcon__rspack_import_19[__rspack_import_key];
|
|
188
195
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
189
|
-
var
|
|
196
|
+
var _Toolbar__rspack_import_20 = __webpack_require__("./Toolbar");
|
|
190
197
|
var __rspack_reexport = {};
|
|
191
|
-
for(const __rspack_import_key in
|
|
198
|
+
for(const __rspack_import_key in _Toolbar__rspack_import_20)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_Toolbar__rspack_import_20[__rspack_import_key];
|
|
192
199
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
193
|
-
var
|
|
200
|
+
var _Toolbox__rspack_import_21 = __webpack_require__("./Toolbox?2740");
|
|
194
201
|
var __rspack_reexport = {};
|
|
195
|
-
for(const __rspack_import_key in
|
|
202
|
+
for(const __rspack_import_key in _Toolbox__rspack_import_21)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_Toolbox__rspack_import_21[__rspack_import_key];
|
|
196
203
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
197
|
-
var
|
|
204
|
+
var _TriggerNode__rspack_import_22 = __webpack_require__("./TriggerNode");
|
|
198
205
|
var __rspack_reexport = {};
|
|
199
|
-
for(const __rspack_import_key in
|
|
206
|
+
for(const __rspack_import_key in _TriggerNode__rspack_import_22)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_TriggerNode__rspack_import_22[__rspack_import_key];
|
|
200
207
|
__webpack_require__.d(__webpack_exports__, __rspack_reexport);
|
|
201
208
|
})();
|
|
202
209
|
for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
@@ -10,6 +10,7 @@ export * from './ExecutionStatusIcon';
|
|
|
10
10
|
export * from './FloatingCanvasPanel';
|
|
11
11
|
export * from './GroupNode';
|
|
12
12
|
export * from './HierarchicalCanvas';
|
|
13
|
+
export * from './LoopNode';
|
|
13
14
|
export * from './MiniCanvasNavigator';
|
|
14
15
|
export * from './NodeContextMenu';
|
|
15
16
|
export * from './NodeInspector';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC"}
|
|
@@ -10,6 +10,7 @@ export * from "./ExecutionStatusIcon/index.js";
|
|
|
10
10
|
export * from "./FloatingCanvasPanel/index.js";
|
|
11
11
|
export * from "./GroupNode/index.js";
|
|
12
12
|
export * from "./HierarchicalCanvas/index.js";
|
|
13
|
+
export * from "./LoopNode/index.js";
|
|
13
14
|
export * from "./MiniCanvasNavigator/index.js";
|
|
14
15
|
export * from "./NodeContextMenu/index.js";
|
|
15
16
|
export * from "./NodeInspector.js";
|