@rxflow/terminal-bloodline 0.0.1-alpha.9 → 0.0.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/cjs/components/Expand.d.ts.map +1 -1
- package/cjs/components/Expand.js +6 -6
- package/cjs/hooks/expandState/useCleanExpandState.d.ts +2 -0
- package/cjs/hooks/expandState/useCleanExpandState.d.ts.map +1 -0
- package/cjs/hooks/expandState/{useSetExpand.js → useCleanExpandState.js} +5 -11
- package/cjs/hooks/expandState/useIsExpand.d.ts +2 -0
- package/cjs/hooks/expandState/useIsExpand.d.ts.map +1 -0
- package/cjs/hooks/expandState/useIsExpand.js +22 -0
- package/cjs/hooks/expandState/useToggleExpandState.d.ts +2 -0
- package/cjs/hooks/expandState/useToggleExpandState.d.ts.map +1 -0
- package/cjs/hooks/expandState/useToggleExpandState.js +39 -0
- package/cjs/index.d.ts.map +1 -1
- package/cjs/index.js +10 -3
- package/cjs/nodes/Search/index.d.ts.map +1 -1
- package/cjs/nodes/Search/index.js +6 -1
- package/cjs/types.d.ts +6 -0
- package/cjs/types.d.ts.map +1 -1
- package/cjs/utils/layoutCells.d.ts +2 -1
- package/cjs/utils/layoutCells.d.ts.map +1 -1
- package/cjs/utils/layoutCells.js +20 -13
- package/esm/components/Expand.d.ts.map +1 -1
- package/esm/components/Expand.js +7 -8
- package/esm/hooks/expandState/useCleanExpandState.d.ts +2 -0
- package/esm/hooks/expandState/useCleanExpandState.d.ts.map +1 -0
- package/esm/hooks/expandState/{useSetExpand.js → useCleanExpandState.js} +4 -9
- package/esm/hooks/expandState/useIsExpand.d.ts +2 -0
- package/esm/hooks/expandState/useIsExpand.d.ts.map +1 -0
- package/esm/hooks/expandState/useIsExpand.js +15 -0
- package/esm/hooks/expandState/useToggleExpandState.d.ts +2 -0
- package/esm/hooks/expandState/useToggleExpandState.d.ts.map +1 -0
- package/esm/hooks/expandState/useToggleExpandState.js +32 -0
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +10 -3
- package/esm/nodes/Search/index.d.ts.map +1 -1
- package/esm/nodes/Search/index.js +6 -1
- package/esm/types.d.ts +6 -0
- package/esm/types.d.ts.map +1 -1
- package/esm/utils/layoutCells.d.ts +2 -1
- package/esm/utils/layoutCells.d.ts.map +1 -1
- package/esm/utils/layoutCells.js +18 -13
- package/package.json +2 -2
- package/cjs/hooks/expandState/useSetExpand.d.ts +0 -2
- package/cjs/hooks/expandState/useSetExpand.d.ts.map +0 -1
- package/esm/hooks/expandState/useSetExpand.d.ts +0 -2
- package/esm/hooks/expandState/useSetExpand.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Expand.d.ts","sourceRoot":"","sources":["Expand.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Expand.d.ts","sourceRoot":"","sources":["Expand.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,aAAa,EAAiB,MAAM,UAAU,CAAC;AAwCvD,eAAO,MAAM,MAAM;cAKL,aAAa;YACf,aAAa;6CAsCxB,CAAA"}
|
package/cjs/components/Expand.js
CHANGED
|
@@ -9,6 +9,8 @@ var _react = require("@xyflow/react");
|
|
|
9
9
|
var _ahooks = require("ahooks");
|
|
10
10
|
var _react2 = _interopRequireDefault(require("react"));
|
|
11
11
|
var _constants = require("../constants");
|
|
12
|
+
var _useIsExpand = require("../hooks/expandState/useIsExpand");
|
|
13
|
+
var _useToggleExpandState = require("../hooks/expandState/useToggleExpandState");
|
|
12
14
|
var _keys = require("../utils/keys");
|
|
13
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -62,17 +64,15 @@ const Expand = ({
|
|
|
62
64
|
terminal,
|
|
63
65
|
source
|
|
64
66
|
}) => {
|
|
65
|
-
const update = (0, _ahooks.useUpdate)();
|
|
66
67
|
const forceRefreshFlow = (0, _base.useForceUpdate)();
|
|
68
|
+
const toggleExpandState = (0, _useToggleExpandState.useToggleExpandState)();
|
|
67
69
|
const direction = _constants.BloodlineDirection.upstream;
|
|
68
70
|
const middleNodes = terminal.nodeList || [];
|
|
69
|
-
const
|
|
71
|
+
const isExpanded = (0, _useIsExpand.useIsExpand)(terminal.id);
|
|
70
72
|
const count = middleNodes.length - 1; // 肯定会有自己
|
|
71
73
|
|
|
72
74
|
const onClick = (0, _ahooks.useMemoizedFn)(() => {
|
|
73
|
-
|
|
74
|
-
terminal.collapsed = !collapsed;
|
|
75
|
-
update();
|
|
75
|
+
toggleExpandState(terminal.id);
|
|
76
76
|
forceRefreshFlow();
|
|
77
77
|
});
|
|
78
78
|
const handle = /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.HiddenHandle, {
|
|
@@ -83,7 +83,7 @@ const Expand = ({
|
|
|
83
83
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
84
84
|
children: [handle, /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.CollapseButton, {
|
|
85
85
|
direction: 'vertical',
|
|
86
|
-
collapsed:
|
|
86
|
+
collapsed: !isExpanded,
|
|
87
87
|
position: _react.Position.Left,
|
|
88
88
|
loading: false,
|
|
89
89
|
onCollapse: onClick,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCleanExpandState.d.ts","sourceRoot":"","sources":["useCleanExpandState.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,mBAAmB,cAEL,MAAM,WAAU,OAAO,SAOjD,CAAA"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useCleanExpandState = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _state = require("../state");
|
|
9
9
|
/**
|
|
@@ -15,20 +15,14 @@ var _state = require("../state");
|
|
|
15
15
|
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
const
|
|
18
|
+
const useCleanExpandState = () => {
|
|
19
19
|
const setState = (0, _state.useSetState)();
|
|
20
|
-
return (0, _react.useCallback)((id, expand) => {
|
|
20
|
+
return (0, _react.useCallback)((id, expand = true) => {
|
|
21
21
|
setState(state => {
|
|
22
|
-
const expandSet = state.expandSet || new Set();
|
|
23
|
-
if (expand) {
|
|
24
|
-
expandSet.add(id);
|
|
25
|
-
} else {
|
|
26
|
-
expandSet.delete(id);
|
|
27
|
-
}
|
|
28
22
|
return {
|
|
29
|
-
expandSet: new Set(
|
|
23
|
+
expandSet: new Set()
|
|
30
24
|
};
|
|
31
25
|
});
|
|
32
26
|
}, []);
|
|
33
27
|
};
|
|
34
|
-
exports.
|
|
28
|
+
exports.useCleanExpandState = useCleanExpandState;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsExpand.d.ts","sourceRoot":"","sources":["useIsExpand.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,WAAW,OAAQ,MAAM,wBAKrC,CAAA"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useIsExpand = void 0;
|
|
7
|
+
var _state = require("../state");
|
|
8
|
+
/**
|
|
9
|
+
* @author: yanxianliang
|
|
10
|
+
* @date: 2025-10-19 18:48
|
|
11
|
+
* @modified:2025/10/19 18:48 by yanxianliang
|
|
12
|
+
* @desc: 设置展开状态
|
|
13
|
+
*
|
|
14
|
+
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
const useIsExpand = id => {
|
|
18
|
+
return (0, _state.useSelector)(state => {
|
|
19
|
+
return state.expandSet?.has(id);
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
exports.useIsExpand = useIsExpand;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToggleExpandState.d.ts","sourceRoot":"","sources":["useToggleExpandState.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,oBAAoB,aAKP,MAAM,SAgB/B,CAAA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useToggleExpandState = void 0;
|
|
7
|
+
var _base = require("@rxflow/base");
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
var _state = require("../state");
|
|
10
|
+
/**
|
|
11
|
+
* @author: yanxianliang
|
|
12
|
+
* @date: 2025-10-19 18:48
|
|
13
|
+
* @modified:2025/10/19 18:48 by yanxianliang
|
|
14
|
+
* @desc: 设置展开状态
|
|
15
|
+
*
|
|
16
|
+
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
const useToggleExpandState = () => {
|
|
20
|
+
const setState = (0, _state.useSetState)();
|
|
21
|
+
const getProps = (0, _base.useGetProps)();
|
|
22
|
+
return (0, _react.useCallback)(id => {
|
|
23
|
+
// 如果仅支持单个呢,直接清空Set
|
|
24
|
+
const allowExpandMultiples = getProps().allowExpandMultiples;
|
|
25
|
+
setState(state => {
|
|
26
|
+
const expandSet = allowExpandMultiples ? state.expandSet || new Set() : new Set();
|
|
27
|
+
const expand = !state.expandSet?.has(id);
|
|
28
|
+
if (expand) {
|
|
29
|
+
expandSet.add(id);
|
|
30
|
+
} else {
|
|
31
|
+
expandSet.delete(id);
|
|
32
|
+
}
|
|
33
|
+
return {
|
|
34
|
+
expandSet: new Set(expandSet)
|
|
35
|
+
};
|
|
36
|
+
});
|
|
37
|
+
}, []);
|
|
38
|
+
};
|
|
39
|
+
exports.useToggleExpandState = useToggleExpandState;
|
package/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAA+B,0BAA0B,EAAC,MAAM,SAAS,CAAC;AA0BjF,QAAA,MAAM,qBAAqB,mHA8CzB,CAAA;AAGF,eAAe,qBAAqB,CAAC;AAErC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}
|
package/cjs/index.js
CHANGED
|
@@ -9,6 +9,7 @@ var _base = require("@rxflow/base");
|
|
|
9
9
|
var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
|
|
10
10
|
var _react = require("react");
|
|
11
11
|
var _BaseNodeWrapper = require("./BaseNodeWrapper");
|
|
12
|
+
var _useCleanExpandState = require("./hooks/expandState/useCleanExpandState");
|
|
12
13
|
var _useSetFilter = require("./hooks/filter/useSetFilter");
|
|
13
14
|
var _useSetPageIndex = require("./hooks/pageIndex/useSetPageIndex");
|
|
14
15
|
var _Pagination = require("./nodes/Pagination");
|
|
@@ -52,7 +53,7 @@ const fitViewOptions = {
|
|
|
52
53
|
minZoom: 1,
|
|
53
54
|
maxZoom: 1
|
|
54
55
|
};
|
|
55
|
-
const omitProps = ['root', 'getRelation', 'mode'];
|
|
56
|
+
const omitProps = ['root', 'getRelation', 'mode', "allowExpandMultiples", 'onFilter'];
|
|
56
57
|
const innerNodeTypes = [{
|
|
57
58
|
type: 'search',
|
|
58
59
|
hideInLegend: true,
|
|
@@ -65,13 +66,16 @@ const innerNodeTypes = [{
|
|
|
65
66
|
const TerminalBloodlineFlow = (0, _base.createFlow)(_base.Flow, props => {
|
|
66
67
|
const {
|
|
67
68
|
root,
|
|
68
|
-
nodeTypes
|
|
69
|
+
nodeTypes,
|
|
70
|
+
onFilter
|
|
69
71
|
} = props;
|
|
70
72
|
const setPageIndex = (0, _useSetPageIndex.useSetPageIndex)();
|
|
71
73
|
const setFilter = (0, _useSetFilter.useSetFilter)();
|
|
74
|
+
const cleanExpandState = (0, _useCleanExpandState.useCleanExpandState)();
|
|
72
75
|
const nodes = (0, _react.useMemo)(() => {
|
|
73
76
|
setPageIndex(1);
|
|
74
77
|
setFilter('');
|
|
78
|
+
cleanExpandState(); // root 变化,清除所有展开配置
|
|
75
79
|
return root ? [(0, _cloneDeep.default)(root)] : [];
|
|
76
80
|
}, [root]);
|
|
77
81
|
const _nodeTypes = (0, _react.useMemo)(() => {
|
|
@@ -84,13 +88,16 @@ const TerminalBloodlineFlow = (0, _base.createFlow)(_base.Flow, props => {
|
|
|
84
88
|
};
|
|
85
89
|
})];
|
|
86
90
|
}, [nodeTypes]);
|
|
91
|
+
const layout = (0, _react.useMemo)(() => {
|
|
92
|
+
return _layoutCells.layoutCells.bind(undefined, onFilter);
|
|
93
|
+
}, []);
|
|
87
94
|
return {
|
|
88
95
|
...props,
|
|
89
96
|
edgesFocusable: false,
|
|
90
97
|
fitViewOptions,
|
|
91
98
|
autoCenter: true,
|
|
92
99
|
nodes,
|
|
93
|
-
layout:
|
|
100
|
+
layout: layout,
|
|
94
101
|
nodeTypes: _nodeTypes,
|
|
95
102
|
omitProps,
|
|
96
103
|
selectionOnDrag: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,OAAO,cAAc,CAAC;AAStB,eAAO,MAAM,MAAM,+CAqDlB,CAAA"}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.Search = void 0;
|
|
7
7
|
var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/lib/icons/SearchOutlined"));
|
|
8
|
+
var _base = require("@rxflow/base");
|
|
8
9
|
var _antd = require("antd");
|
|
9
10
|
require("./index.less");
|
|
10
11
|
var _react = require("react");
|
|
@@ -13,6 +14,7 @@ var _useSetFilter = require("../../hooks/filter/useSetFilter");
|
|
|
13
14
|
var _useSetPageIndex = require("../../hooks/pageIndex/useSetPageIndex");
|
|
14
15
|
var _useGetTerminalList = require("../../hooks/useGetTerminalList");
|
|
15
16
|
var _useTerminalCount = require("../../hooks/useTerminalCount");
|
|
17
|
+
var _layoutCells = require("../../utils/layoutCells");
|
|
16
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
20
|
/**
|
|
@@ -33,6 +35,7 @@ const Search = () => {
|
|
|
33
35
|
const setPageIndex = (0, _useSetPageIndex.useSetPageIndex)();
|
|
34
36
|
const [open, setOpen] = (0, _react.useState)(false);
|
|
35
37
|
const getTerminalList = (0, _useGetTerminalList.useGetTerminalList)();
|
|
38
|
+
const getProps = (0, _base.useGetProps)();
|
|
36
39
|
const [messageApi, contextHolder] = _antd.message.useMessage();
|
|
37
40
|
const count = (0, _useTerminalCount.useTerminalCount)();
|
|
38
41
|
const showInput = (0, _react.useCallback)(() => {
|
|
@@ -40,8 +43,10 @@ const Search = () => {
|
|
|
40
43
|
}, []);
|
|
41
44
|
const onSearch = (0, _react.useCallback)(value => {
|
|
42
45
|
const list = getTerminalList();
|
|
46
|
+
const onFilter = getProps().onFilter || _layoutCells.defaultFilter;
|
|
43
47
|
const hasItem = list.find(item => {
|
|
44
|
-
|
|
48
|
+
const data = item.data;
|
|
49
|
+
return onFilter(data, value);
|
|
45
50
|
});
|
|
46
51
|
if (hasItem) {
|
|
47
52
|
setPageIndex(1);
|
package/cjs/types.d.ts
CHANGED
|
@@ -15,6 +15,12 @@ export interface IBloodlineTheme extends BaseThemeConfig {
|
|
|
15
15
|
export type TerminalBloodlineExtendProps = {
|
|
16
16
|
root?: BaseBloodNode;
|
|
17
17
|
theme?: IBloodlineTheme;
|
|
18
|
+
/**
|
|
19
|
+
* @description 是否允许展开多个,在部分场景下多个会存在节点冲突问题,需要业务线自己判断是否需要
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
allowExpandMultiples?: boolean;
|
|
23
|
+
onFilter?: (data: Record<string, any>, value: string) => boolean;
|
|
18
24
|
};
|
|
19
25
|
export type TerminalBloodlineFlowProps = Omit<IBaseFlowProps, 'nodes' | 'edges' | 'theme' | 'defaultNodes' | 'defaultEdges'> & TerminalBloodlineExtendProps;
|
|
20
26
|
export type BaseBloodNode = {
|
package/cjs/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AASA,OAAO,EAAC,aAAa,EAAE,eAAe,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAC;AAGlC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC;AAGD,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AASA,OAAO,EAAC,aAAa,EAAE,eAAe,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAC;AAGlC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC;AAGD,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CAClE,CAAA;AAGD,MAAM,MAAM,0BAA0B,GACpC,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,cAAc,CAAC,GACjF,4BAA4B,CAAC;AAQjC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAEb,QAAQ,EAAE,KAAK,CAAC,aAAa,GAAG;QAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,UAAU,CAAC,GAAG;YAChE,YAAY,EAAE,MAAM,EAAE,CAAC;SACxB,CAAC,CAAC;QACH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC,CAAC;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CAC7B,CAAA;AAGD,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAA"}
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import { LayoutConfig } from "@rxflow/base";
|
|
9
9
|
import { Edge, Node } from "@xyflow/react";
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const defaultFilter: (child: any, value: string) => boolean;
|
|
11
|
+
export declare const layoutCells: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(onFilter: ((data: any, value: string) => boolean) | undefined, config: LayoutConfig<NodeType, EdgeType>) => {
|
|
11
12
|
nodes: NodeType[];
|
|
12
13
|
edges: EdgeType[];
|
|
13
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layoutCells.d.ts","sourceRoot":"","sources":["layoutCells.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAA8B,YAAY,EAAgB,MAAM,cAAc,CAAC;AAEtF,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"layoutCells.d.ts","sourceRoot":"","sources":["layoutCells.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAA8B,YAAY,EAAgB,MAAM,cAAc,CAAC;AAEtF,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AA4DzC,eAAO,MAAM,aAAa,UAAW,GAAG,SAAS,MAAM,YAGtD,CAAA;AAGD,eAAO,MAAM,WAAW,iFACJ,GAAG,SAAS,MAAM,KAAI,OAAO,uBACvC,aAAa,QAAQ,EAAE,QAAQ,CAAC;;;CAyOzC,CAAA"}
|
package/cjs/utils/layoutCells.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.layoutCells = void 0;
|
|
6
|
+
exports.layoutCells = exports.defaultFilter = void 0;
|
|
7
7
|
var _hierarchy = _interopRequireDefault(require("@antv/hierarchy"));
|
|
8
8
|
var _base = require("@rxflow/base");
|
|
9
9
|
var _constants = require("../constants");
|
|
@@ -41,13 +41,12 @@ function getSiblings(node) {
|
|
|
41
41
|
firstNode
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
|
-
function getChildrenNodes(node, cycleCheckNodeSet) {
|
|
44
|
+
function getChildrenNodes(node, cycleCheckNodeSet, expandSet) {
|
|
45
45
|
let children = [];
|
|
46
46
|
if (node.children) {
|
|
47
47
|
// 根节点会有 children,
|
|
48
48
|
node.children.forEach(child => {
|
|
49
|
-
|
|
50
|
-
if (!collapsed) {
|
|
49
|
+
if (expandSet?.has(child.id)) {
|
|
51
50
|
const parentLookup = child.parentLookup;
|
|
52
51
|
children.push(...(parentLookup.get(node.id) || []));
|
|
53
52
|
} else {
|
|
@@ -71,7 +70,14 @@ function getChildrenNodes(node, cycleCheckNodeSet) {
|
|
|
71
70
|
return children;
|
|
72
71
|
}
|
|
73
72
|
}
|
|
74
|
-
const
|
|
73
|
+
const defaultFilter = (child, value) => {
|
|
74
|
+
const {
|
|
75
|
+
name = ''
|
|
76
|
+
} = child;
|
|
77
|
+
return name.indexOf(value) > -1;
|
|
78
|
+
};
|
|
79
|
+
exports.defaultFilter = defaultFilter;
|
|
80
|
+
const layoutCells = (onFilter, config) => {
|
|
75
81
|
const {
|
|
76
82
|
nodeTypes,
|
|
77
83
|
originNodes,
|
|
@@ -81,7 +87,8 @@ const layoutCells = config => {
|
|
|
81
87
|
} = config;
|
|
82
88
|
const {
|
|
83
89
|
filter,
|
|
84
|
-
pageIndex = 1
|
|
90
|
+
pageIndex = 1,
|
|
91
|
+
expandSet = new Set()
|
|
85
92
|
} = state; // 筛选
|
|
86
93
|
|
|
87
94
|
const {
|
|
@@ -106,18 +113,17 @@ const layoutCells = config => {
|
|
|
106
113
|
const totalLength = children.length;
|
|
107
114
|
if (filter) {
|
|
108
115
|
// 过滤
|
|
116
|
+
const filterCallback = onFilter || defaultFilter;
|
|
109
117
|
children = children.filter(child => {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
} = child;
|
|
113
|
-
return name.indexOf(filter) > -1;
|
|
118
|
+
// filter 的逻辑
|
|
119
|
+
return filterCallback(child.data, filter);
|
|
114
120
|
});
|
|
115
121
|
}
|
|
116
122
|
children = children.slice((pageIndex - 1) * _constants.pageSize, pageIndex * _constants.pageSize); // 分页
|
|
117
123
|
|
|
118
124
|
let hasExpand = false;
|
|
119
125
|
children.forEach(child => {
|
|
120
|
-
if (
|
|
126
|
+
if (expandSet.has(child.id)) {
|
|
121
127
|
hasExpand = true;
|
|
122
128
|
}
|
|
123
129
|
// 构建 parentLookup
|
|
@@ -145,6 +151,7 @@ const layoutCells = config => {
|
|
|
145
151
|
});
|
|
146
152
|
const cycleCheckNodeSet = new Set([root.id]); // 循环依赖节点检测
|
|
147
153
|
|
|
154
|
+
console.log(children);
|
|
148
155
|
const layoutResult = layoutUtil({
|
|
149
156
|
...root,
|
|
150
157
|
children
|
|
@@ -169,7 +176,7 @@ const layoutCells = config => {
|
|
|
169
176
|
return height;
|
|
170
177
|
},
|
|
171
178
|
getChildren: node => {
|
|
172
|
-
return getChildrenNodes(node, cycleCheckNodeSet);
|
|
179
|
+
return getChildrenNodes(node, cycleCheckNodeSet, expandSet);
|
|
173
180
|
}
|
|
174
181
|
});
|
|
175
182
|
let layoutNodes = [];
|
|
@@ -242,7 +249,7 @@ const layoutCells = config => {
|
|
|
242
249
|
layoutNodes.push(instance);
|
|
243
250
|
innerNodeLookup.set(id, instance);
|
|
244
251
|
}
|
|
245
|
-
const childrenNodes = getChildrenNodes(data);
|
|
252
|
+
const childrenNodes = getChildrenNodes(data, undefined, expandSet);
|
|
246
253
|
childrenNodes.forEach(child => {
|
|
247
254
|
const childId = child.id;
|
|
248
255
|
const sourceNode = id; // 上游节点
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Expand.d.ts","sourceRoot":"","sources":["Expand.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Expand.d.ts","sourceRoot":"","sources":["Expand.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,aAAa,EAAiB,MAAM,UAAU,CAAC;AAwCvD,eAAO,MAAM,MAAM;cAKL,aAAa;YACf,aAAa;6CAsCxB,CAAA"}
|
package/esm/components/Expand.js
CHANGED
|
@@ -19,9 +19,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
19
19
|
*/
|
|
20
20
|
import { CollapseButton, HiddenHandle, useForceUpdate } from "@rxflow/base";
|
|
21
21
|
import { Position } from "@xyflow/react";
|
|
22
|
-
import { useMemoizedFn
|
|
22
|
+
import { useMemoizedFn } from "ahooks";
|
|
23
23
|
import React from "react";
|
|
24
24
|
import { BloodlineDirection, BloodlineNodeType } from "../constants";
|
|
25
|
+
import { useIsExpand } from "../hooks/expandState/useIsExpand";
|
|
26
|
+
import { useToggleExpandState } from "../hooks/expandState/useToggleExpandState";
|
|
25
27
|
import { getConnectorId } from "../utils/keys";
|
|
26
28
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
29
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
@@ -81,20 +83,17 @@ function getStateWithDefault(config) {
|
|
|
81
83
|
});
|
|
82
84
|
}
|
|
83
85
|
export var Expand = function Expand(_ref2) {
|
|
84
|
-
var _terminal$collapsed;
|
|
85
86
|
var terminal = _ref2.terminal,
|
|
86
87
|
source = _ref2.source;
|
|
87
|
-
var update = useUpdate();
|
|
88
88
|
var forceRefreshFlow = useForceUpdate();
|
|
89
|
+
var toggleExpandState = useToggleExpandState();
|
|
89
90
|
var direction = BloodlineDirection.upstream;
|
|
90
91
|
var middleNodes = terminal.nodeList || [];
|
|
91
|
-
var
|
|
92
|
+
var isExpanded = useIsExpand(terminal.id);
|
|
92
93
|
var count = middleNodes.length - 1; // 肯定会有自己
|
|
93
94
|
|
|
94
95
|
var onClick = useMemoizedFn(function () {
|
|
95
|
-
|
|
96
|
-
terminal.collapsed = !collapsed;
|
|
97
|
-
update();
|
|
96
|
+
toggleExpandState(terminal.id);
|
|
98
97
|
forceRefreshFlow();
|
|
99
98
|
});
|
|
100
99
|
var handle = /*#__PURE__*/_jsx(HiddenHandle, {
|
|
@@ -105,7 +104,7 @@ export var Expand = function Expand(_ref2) {
|
|
|
105
104
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
106
105
|
children: [handle, /*#__PURE__*/_jsx(CollapseButton, {
|
|
107
106
|
direction: 'vertical',
|
|
108
|
-
collapsed:
|
|
107
|
+
collapsed: !isExpanded,
|
|
109
108
|
position: Position.Left,
|
|
110
109
|
loading: false,
|
|
111
110
|
onCollapse: onClick,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCleanExpandState.d.ts","sourceRoot":"","sources":["useCleanExpandState.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,mBAAmB,cAEL,MAAM,WAAU,OAAO,SAOjD,CAAA"}
|
|
@@ -8,18 +8,13 @@
|
|
|
8
8
|
*/
|
|
9
9
|
import { useCallback } from "react";
|
|
10
10
|
import { useSetState } from "../state";
|
|
11
|
-
export var
|
|
11
|
+
export var useCleanExpandState = function useCleanExpandState() {
|
|
12
12
|
var setState = useSetState();
|
|
13
|
-
return useCallback(function (id
|
|
13
|
+
return useCallback(function (id) {
|
|
14
|
+
var expand = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
14
15
|
setState(function (state) {
|
|
15
|
-
var expandSet = state.expandSet || new Set();
|
|
16
|
-
if (expand) {
|
|
17
|
-
expandSet.add(id);
|
|
18
|
-
} else {
|
|
19
|
-
expandSet.delete(id);
|
|
20
|
-
}
|
|
21
16
|
return {
|
|
22
|
-
expandSet: new Set(
|
|
17
|
+
expandSet: new Set()
|
|
23
18
|
};
|
|
24
19
|
});
|
|
25
20
|
}, []);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsExpand.d.ts","sourceRoot":"","sources":["useIsExpand.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,WAAW,OAAQ,MAAM,wBAKrC,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author: yanxianliang
|
|
3
|
+
* @date: 2025-10-19 18:48
|
|
4
|
+
* @modified:2025/10/19 18:48 by yanxianliang
|
|
5
|
+
* @desc: 设置展开状态
|
|
6
|
+
*
|
|
7
|
+
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
8
|
+
*/
|
|
9
|
+
import { useSelector } from "../state";
|
|
10
|
+
export var useIsExpand = function useIsExpand(id) {
|
|
11
|
+
return useSelector(function (state) {
|
|
12
|
+
var _state$expandSet;
|
|
13
|
+
return (_state$expandSet = state.expandSet) === null || _state$expandSet === void 0 ? void 0 : _state$expandSet.has(id);
|
|
14
|
+
});
|
|
15
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useToggleExpandState.d.ts","sourceRoot":"","sources":["useToggleExpandState.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,oBAAoB,aAKP,MAAM,SAgB/B,CAAA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author: yanxianliang
|
|
3
|
+
* @date: 2025-10-19 18:48
|
|
4
|
+
* @modified:2025/10/19 18:48 by yanxianliang
|
|
5
|
+
* @desc: 设置展开状态
|
|
6
|
+
*
|
|
7
|
+
* Copyright (c) 2025 by yanxianliang, All Rights Reserved.
|
|
8
|
+
*/
|
|
9
|
+
import { useGetProps } from "@rxflow/base";
|
|
10
|
+
import { useCallback } from "react";
|
|
11
|
+
import { useSetState } from "../state";
|
|
12
|
+
export var useToggleExpandState = function useToggleExpandState() {
|
|
13
|
+
var setState = useSetState();
|
|
14
|
+
var getProps = useGetProps();
|
|
15
|
+
return useCallback(function (id) {
|
|
16
|
+
// 如果仅支持单个呢,直接清空Set
|
|
17
|
+
var allowExpandMultiples = getProps().allowExpandMultiples;
|
|
18
|
+
setState(function (state) {
|
|
19
|
+
var _state$expandSet;
|
|
20
|
+
var expandSet = allowExpandMultiples ? state.expandSet || new Set() : new Set();
|
|
21
|
+
var expand = !((_state$expandSet = state.expandSet) !== null && _state$expandSet !== void 0 && _state$expandSet.has(id));
|
|
22
|
+
if (expand) {
|
|
23
|
+
expandSet.add(id);
|
|
24
|
+
} else {
|
|
25
|
+
expandSet.delete(id);
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
expandSet: new Set(expandSet)
|
|
29
|
+
};
|
|
30
|
+
});
|
|
31
|
+
}, []);
|
|
32
|
+
};
|
package/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAA+B,0BAA0B,EAAC,MAAM,SAAS,CAAC;AA0BjF,QAAA,MAAM,qBAAqB,mHA8CzB,CAAA;AAGF,eAAe,qBAAqB,CAAC;AAErC,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}
|
package/esm/index.js
CHANGED
|
@@ -22,6 +22,7 @@ import { createFlow, Flow } from '@rxflow/base';
|
|
|
22
22
|
import cloneDeep from 'lodash/cloneDeep';
|
|
23
23
|
import { useMemo } from "react";
|
|
24
24
|
import { BaseNodeWrapper } from "./BaseNodeWrapper";
|
|
25
|
+
import { useCleanExpandState } from "./hooks/expandState/useCleanExpandState";
|
|
25
26
|
import { useSetFilter } from "./hooks/filter/useSetFilter";
|
|
26
27
|
import { useSetPageIndex } from "./hooks/pageIndex/useSetPageIndex";
|
|
27
28
|
import { Pagination } from "./nodes/Pagination";
|
|
@@ -32,7 +33,7 @@ var fitViewOptions = {
|
|
|
32
33
|
minZoom: 1,
|
|
33
34
|
maxZoom: 1
|
|
34
35
|
};
|
|
35
|
-
var omitProps = ['root', 'getRelation', 'mode'];
|
|
36
|
+
var omitProps = ['root', 'getRelation', 'mode', "allowExpandMultiples", 'onFilter'];
|
|
36
37
|
var innerNodeTypes = [{
|
|
37
38
|
type: 'search',
|
|
38
39
|
hideInLegend: true,
|
|
@@ -44,12 +45,15 @@ var innerNodeTypes = [{
|
|
|
44
45
|
}];
|
|
45
46
|
var TerminalBloodlineFlow = createFlow(Flow, function (props) {
|
|
46
47
|
var root = props.root,
|
|
47
|
-
nodeTypes = props.nodeTypes
|
|
48
|
+
nodeTypes = props.nodeTypes,
|
|
49
|
+
onFilter = props.onFilter;
|
|
48
50
|
var setPageIndex = useSetPageIndex();
|
|
49
51
|
var setFilter = useSetFilter();
|
|
52
|
+
var cleanExpandState = useCleanExpandState();
|
|
50
53
|
var nodes = useMemo(function () {
|
|
51
54
|
setPageIndex(1);
|
|
52
55
|
setFilter('');
|
|
56
|
+
cleanExpandState(); // root 变化,清除所有展开配置
|
|
53
57
|
return root ? [cloneDeep(root)] : [];
|
|
54
58
|
}, [root]);
|
|
55
59
|
var _nodeTypes = useMemo(function () {
|
|
@@ -61,12 +65,15 @@ var TerminalBloodlineFlow = createFlow(Flow, function (props) {
|
|
|
61
65
|
});
|
|
62
66
|
})));
|
|
63
67
|
}, [nodeTypes]);
|
|
68
|
+
var layout = useMemo(function () {
|
|
69
|
+
return layoutCells.bind(undefined, onFilter);
|
|
70
|
+
}, []);
|
|
64
71
|
return _objectSpread(_objectSpread({}, props), {}, {
|
|
65
72
|
edgesFocusable: false,
|
|
66
73
|
fitViewOptions: fitViewOptions,
|
|
67
74
|
autoCenter: true,
|
|
68
75
|
nodes: nodes,
|
|
69
|
-
layout:
|
|
76
|
+
layout: layout,
|
|
70
77
|
nodeTypes: _nodeTypes,
|
|
71
78
|
omitProps: omitProps,
|
|
72
79
|
selectionOnDrag: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,OAAO,cAAc,CAAC;AAStB,eAAO,MAAM,MAAM,+CAqDlB,CAAA"}
|
|
@@ -16,6 +16,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
import SearchOutlined from "@ant-design/icons/lib/icons/SearchOutlined";
|
|
19
|
+
import { useGetProps } from "@rxflow/base";
|
|
19
20
|
import { Button, Input, message } from 'antd';
|
|
20
21
|
import "./index.less";
|
|
21
22
|
import { useCallback, useState } from "react";
|
|
@@ -24,6 +25,7 @@ import { useSetFilter } from "../../hooks/filter/useSetFilter";
|
|
|
24
25
|
import { useSetPageIndex } from "../../hooks/pageIndex/useSetPageIndex";
|
|
25
26
|
import { useGetTerminalList } from "../../hooks/useGetTerminalList";
|
|
26
27
|
import { useTerminalCount } from "../../hooks/useTerminalCount";
|
|
28
|
+
import { defaultFilter } from "../../utils/layoutCells";
|
|
27
29
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
28
30
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
29
31
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
@@ -37,6 +39,7 @@ export var Search = function Search() {
|
|
|
37
39
|
open = _useState2[0],
|
|
38
40
|
setOpen = _useState2[1];
|
|
39
41
|
var getTerminalList = useGetTerminalList();
|
|
42
|
+
var getProps = useGetProps();
|
|
40
43
|
var _message$useMessage = message.useMessage(),
|
|
41
44
|
_message$useMessage2 = _slicedToArray(_message$useMessage, 2),
|
|
42
45
|
messageApi = _message$useMessage2[0],
|
|
@@ -47,8 +50,10 @@ export var Search = function Search() {
|
|
|
47
50
|
}, []);
|
|
48
51
|
var onSearch = useCallback(function (value) {
|
|
49
52
|
var list = getTerminalList();
|
|
53
|
+
var onFilter = getProps().onFilter || defaultFilter;
|
|
50
54
|
var hasItem = list.find(function (item) {
|
|
51
|
-
|
|
55
|
+
var data = item.data;
|
|
56
|
+
return onFilter(data, value);
|
|
52
57
|
});
|
|
53
58
|
if (hasItem) {
|
|
54
59
|
setPageIndex(1);
|
package/esm/types.d.ts
CHANGED
|
@@ -15,6 +15,12 @@ export interface IBloodlineTheme extends BaseThemeConfig {
|
|
|
15
15
|
export type TerminalBloodlineExtendProps = {
|
|
16
16
|
root?: BaseBloodNode;
|
|
17
17
|
theme?: IBloodlineTheme;
|
|
18
|
+
/**
|
|
19
|
+
* @description 是否允许展开多个,在部分场景下多个会存在节点冲突问题,需要业务线自己判断是否需要
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
allowExpandMultiples?: boolean;
|
|
23
|
+
onFilter?: (data: Record<string, any>, value: string) => boolean;
|
|
18
24
|
};
|
|
19
25
|
export type TerminalBloodlineFlowProps = Omit<IBaseFlowProps, 'nodes' | 'edges' | 'theme' | 'defaultNodes' | 'defaultEdges'> & TerminalBloodlineExtendProps;
|
|
20
26
|
export type BaseBloodNode = {
|
package/esm/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AASA,OAAO,EAAC,aAAa,EAAE,eAAe,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAC;AAGlC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC;AAGD,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AASA,OAAO,EAAC,aAAa,EAAE,eAAe,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAC;AAGlC,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;CACnC;AAGD,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CAClE,CAAA;AAGD,MAAM,MAAM,0BAA0B,GACpC,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,cAAc,CAAC,GACjF,4BAA4B,CAAC;AAQjC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IAEb,QAAQ,EAAE,KAAK,CAAC,aAAa,GAAG;QAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,UAAU,CAAC,GAAG;YAChE,YAAY,EAAE,MAAM,EAAE,CAAC;SACxB,CAAC,CAAC;QACH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC,CAAC;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;CAC7B,CAAA;AAGD,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAA"}
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import { LayoutConfig } from "@rxflow/base";
|
|
9
9
|
import { Edge, Node } from "@xyflow/react";
|
|
10
|
-
export declare const
|
|
10
|
+
export declare const defaultFilter: (child: any, value: string) => boolean;
|
|
11
|
+
export declare const layoutCells: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(onFilter: ((data: any, value: string) => boolean) | undefined, config: LayoutConfig<NodeType, EdgeType>) => {
|
|
11
12
|
nodes: NodeType[];
|
|
12
13
|
edges: EdgeType[];
|
|
13
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layoutCells.d.ts","sourceRoot":"","sources":["layoutCells.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAA8B,YAAY,EAAgB,MAAM,cAAc,CAAC;AAEtF,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"layoutCells.d.ts","sourceRoot":"","sources":["layoutCells.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAA8B,YAAY,EAAgB,MAAM,cAAc,CAAC;AAEtF,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AA4DzC,eAAO,MAAM,aAAa,UAAW,GAAG,SAAS,MAAM,YAGtD,CAAA;AAGD,eAAO,MAAM,WAAW,iFACJ,GAAG,SAAS,MAAM,KAAI,OAAO,uBACvC,aAAa,QAAQ,EAAE,QAAQ,CAAC;;;CAyOzC,CAAA"}
|
package/esm/utils/layoutCells.js
CHANGED
|
@@ -54,14 +54,12 @@ function getSiblings(node) {
|
|
|
54
54
|
firstNode: firstNode
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
|
-
function getChildrenNodes(node, cycleCheckNodeSet) {
|
|
57
|
+
function getChildrenNodes(node, cycleCheckNodeSet, expandSet) {
|
|
58
58
|
var children = [];
|
|
59
59
|
if (node.children) {
|
|
60
60
|
// 根节点会有 children,
|
|
61
61
|
node.children.forEach(function (child) {
|
|
62
|
-
|
|
63
|
-
var collapsed = (_child$collapsed = child.collapsed) !== null && _child$collapsed !== void 0 ? _child$collapsed : true; // 是否展开
|
|
64
|
-
if (!collapsed) {
|
|
62
|
+
if (expandSet !== null && expandSet !== void 0 && expandSet.has(child.id)) {
|
|
65
63
|
var parentLookup = child.parentLookup;
|
|
66
64
|
children.push.apply(children, _toConsumableArray(parentLookup.get(node.id) || []));
|
|
67
65
|
} else {
|
|
@@ -85,7 +83,12 @@ function getChildrenNodes(node, cycleCheckNodeSet) {
|
|
|
85
83
|
return children;
|
|
86
84
|
}
|
|
87
85
|
}
|
|
88
|
-
export var
|
|
86
|
+
export var defaultFilter = function defaultFilter(child, value) {
|
|
87
|
+
var _child$name = child.name,
|
|
88
|
+
name = _child$name === void 0 ? '' : _child$name;
|
|
89
|
+
return name.indexOf(value) > -1;
|
|
90
|
+
};
|
|
91
|
+
export var layoutCells = function layoutCells(onFilter, config) {
|
|
89
92
|
var nodeTypes = config.nodeTypes,
|
|
90
93
|
originNodes = config.originNodes,
|
|
91
94
|
theme = config.theme,
|
|
@@ -94,7 +97,9 @@ export var layoutCells = function layoutCells(config) {
|
|
|
94
97
|
var _ref = state,
|
|
95
98
|
filter = _ref.filter,
|
|
96
99
|
_ref$pageIndex = _ref.pageIndex,
|
|
97
|
-
pageIndex = _ref$pageIndex === void 0 ? 1 : _ref$pageIndex
|
|
100
|
+
pageIndex = _ref$pageIndex === void 0 ? 1 : _ref$pageIndex,
|
|
101
|
+
_ref$expandSet = _ref.expandSet,
|
|
102
|
+
expandSet = _ref$expandSet === void 0 ? new Set() : _ref$expandSet; // 筛选
|
|
98
103
|
|
|
99
104
|
var nodeLookup = store.nodeLookup;
|
|
100
105
|
var innerNodeLookup = new Map();
|
|
@@ -116,18 +121,17 @@ export var layoutCells = function layoutCells(config) {
|
|
|
116
121
|
var totalLength = children.length;
|
|
117
122
|
if (filter) {
|
|
118
123
|
// 过滤
|
|
124
|
+
var filterCallback = onFilter || defaultFilter;
|
|
119
125
|
children = children.filter(function (child) {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
return name.indexOf(filter) > -1;
|
|
126
|
+
// filter 的逻辑
|
|
127
|
+
return filterCallback(child.data, filter);
|
|
123
128
|
});
|
|
124
129
|
}
|
|
125
130
|
children = children.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); // 分页
|
|
126
131
|
|
|
127
132
|
var hasExpand = false;
|
|
128
133
|
children.forEach(function (child) {
|
|
129
|
-
|
|
130
|
-
if (!((_child$collapsed2 = child.collapsed) !== null && _child$collapsed2 !== void 0 ? _child$collapsed2 : true)) {
|
|
134
|
+
if (expandSet.has(child.id)) {
|
|
131
135
|
hasExpand = true;
|
|
132
136
|
}
|
|
133
137
|
// 构建 parentLookup
|
|
@@ -155,6 +159,7 @@ export var layoutCells = function layoutCells(config) {
|
|
|
155
159
|
});
|
|
156
160
|
var cycleCheckNodeSet = new Set([root.id]); // 循环依赖节点检测
|
|
157
161
|
|
|
162
|
+
console.log(children);
|
|
158
163
|
var layoutResult = layoutUtil(_objectSpread(_objectSpread({}, root), {}, {
|
|
159
164
|
children: children
|
|
160
165
|
}), {
|
|
@@ -180,7 +185,7 @@ export var layoutCells = function layoutCells(config) {
|
|
|
180
185
|
return height;
|
|
181
186
|
},
|
|
182
187
|
getChildren: function getChildren(node) {
|
|
183
|
-
return getChildrenNodes(node, cycleCheckNodeSet);
|
|
188
|
+
return getChildrenNodes(node, cycleCheckNodeSet, expandSet);
|
|
184
189
|
}
|
|
185
190
|
});
|
|
186
191
|
var layoutNodes = [];
|
|
@@ -247,7 +252,7 @@ export var layoutCells = function layoutCells(config) {
|
|
|
247
252
|
layoutNodes.push(instance);
|
|
248
253
|
innerNodeLookup.set(id, instance);
|
|
249
254
|
}
|
|
250
|
-
var childrenNodes = getChildrenNodes(data);
|
|
255
|
+
var childrenNodes = getChildrenNodes(data, undefined, expandSet);
|
|
251
256
|
childrenNodes.forEach(function (child) {
|
|
252
257
|
var childId = child.id;
|
|
253
258
|
var sourceNode = id; // 上游节点
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rxflow/terminal-bloodline",
|
|
3
|
-
"version": "0.0.1
|
|
3
|
+
"version": "0.0.1",
|
|
4
4
|
"description": "末级血缘关系图",
|
|
5
5
|
"homepage": "https://tree-graph.publib.cn/packages/terminal-bloodline",
|
|
6
6
|
"repository": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"build": "father build"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@rxflow/base": "^0.0.1
|
|
34
|
+
"@rxflow/base": "^0.0.1",
|
|
35
35
|
"antd": ">=5.0.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSetExpand.d.ts","sourceRoot":"","sources":["useSetExpand.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,YAAY,aAGC,MAAM,UAAU,OAAO,SAahD,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useSetExpand.d.ts","sourceRoot":"","sources":["useSetExpand.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,YAAY,aAGC,MAAM,UAAU,OAAO,SAahD,CAAA"}
|