@sunspirytus/xflow-extension 1.0.52

package/lib/canvas-collapse-panel/panel-body/panel-node.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelNode = exports.renderNode = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var antd_1 = require("antd");
+var renderNode = function (props) {
+    var nodeConfig = props.nodeConfig, onMouseDown = props.onMouseDown, graphConfig = props.graphConfig, modelService = props.modelService, commandService = props.commandService;
+    if (!graphConfig) {
+        return react_1.default.createElement("div", null);
+    }
+    if (nodeConfig.renderComponent) {
+        return (react_1.default.createElement("div", { onMouseDown: onMouseDown }, react_1.default.createElement(nodeConfig.renderComponent, {
+            data: nodeConfig,
+            isNodePanel: true,
+        })));
+    }
+    var renderKey = graphConfig.nodeTypeParser(nodeConfig) || xflow_core_1.XFlowConstants.XFLOW_DEFAULT_NODE;
+    var reactComponent = graphConfig.nodeRender.get(renderKey);
+    return (react_1.default.createElement("div", { onMouseDown: onMouseDown }, react_1.default.createElement(reactComponent, {
+        commandService: commandService,
+        modelService: modelService,
+        data: nodeConfig,
+        isNodeTreePanel: true,
+    })));
+};
+exports.renderNode = renderNode;
+var PanelNode = function (props) {
+    var _a = react_1.default.useState(false), isVisible = _a[0], setVisible = _a[1];
+    var prefixClz = props.prefixClz, graphConfig = props.graphConfig, commandService = props.commandService, modelService = props.modelService, popoverContent = props.popoverContent, onMouseDown = props.onMouseDown, item = props.item;
+    return (react_1.default.createElement(react_1.default.Fragment, null, popoverContent ? (react_1.default.createElement(antd_1.Popover, { placement: "right", destroyTooltipOnHide: true, content: popoverContent, visible: isVisible, onVisibleChange: function (val) {
+            setVisible(val);
+        } },
+        react_1.default.createElement("div", { className: "".concat(prefixClz, "-node-wrapper"), onMouseEnter: function () {
+                setVisible(true);
+            } }, (0, exports.renderNode)({
+            graphConfig: graphConfig,
+            commandService: commandService,
+            onMouseDown: onMouseDown,
+            modelService: modelService,
+            nodeConfig: item,
+        })))) : (react_1.default.createElement("div", { className: "".concat(prefixClz, "-node-wrapper") }, (0, exports.renderNode)({
+        graphConfig: graphConfig,
+        commandService: commandService,
+        onMouseDown: onMouseDown,
+        modelService: modelService,
+        nodeConfig: item,
+    })))));
+};
+exports.PanelNode = PanelNode;
+//# sourceMappingURL=panel-node.js.map

package/lib/canvas-collapse-panel/panel-body/panel-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-node.js","sourceRoot":"","sources":["../../../src/canvas-collapse-panel/panel-body/panel-node.tsx"],"names":[],"mappings":";;;;AAEA,wDAAyB;AACzB,sDAAwD;AACxD,6BAA8B;AAUvB,IAAM,UAAU,GAAG,UAAC,KAAyB;IAC1C,IAAA,UAAU,GAA6D,KAAK,WAAlE,EAAE,WAAW,GAAgD,KAAK,YAArD,EAAE,WAAW,GAAmC,KAAK,YAAxC,EAAE,YAAY,GAAqB,KAAK,aAA1B,EAAE,cAAc,GAAK,KAAK,eAAV,CAAU;IAEpF,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,0CAAO,CAAA;KACf;IAED,IAAI,UAAU,CAAC,eAAe,EAAE;QAC9B,OAAO,CACL,uCAAK,WAAW,EAAE,WAAW,IAC1B,eAAK,CAAC,aAAa,CAAC,UAAU,CAAC,eAAe,EAAE;YAC/C,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,IAAI;SAClB,CAAC,CACE,CACP,CAAA;KACF;IACD,IAAM,SAAS,GAAG,WAAW,CAAC,cAAc,CAAC,UAAU,CAAC,IAAI,2BAAc,CAAC,kBAAkB,CAAA;IAC7F,IAAM,cAAc,GAAG,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IAC5D,OAAO,CACL,uCAAK,WAAW,EAAE,WAAW,IAC1B,eAAK,CAAC,aAAa,CAAC,cAAc,EAAE;QACnC,cAAc,gBAAA;QACd,YAAY,cAAA;QACZ,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,IAAI;KACtB,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AA7BY,QAAA,UAAU,cA6BtB;AAYM,IAAM,SAAS,GAAyB,UAAA,KAAK;IAC5C,IAAA,KAA0B,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA9C,SAAS,QAAA,EAAE,UAAU,QAAyB,CAAA;IAEnD,IAAA,SAAS,GAOP,KAAK,UAPE,EACT,WAAW,GAMT,KAAK,YANI,EACX,cAAc,GAKZ,KAAK,eALO,EACd,YAAY,GAIV,KAAK,aAJK,EACZ,cAAc,GAGZ,KAAK,eAHO,EACd,WAAW,GAET,KAAK,YAFI,EACX,IAAI,GACF,KAAK,KADH,CACG;IACT,OAAO,CACL,8DACG,cAAc,CAAC,CAAC,CAAC,CAChB,8BAAC,cAAO,IACN,SAAS,EAAC,OAAO,EACjB,oBAAoB,QACpB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,SAAS,EAClB,eAAe,EAAE,UAAA,GAAG;YAClB,UAAU,CAAC,GAAG,CAAC,CAAA;QACjB,CAAC;QAED,uCACE,SAAS,EAAE,UAAG,SAAS,kBAAe,EACtC,YAAY,EAAE;gBACZ,UAAU,CAAC,IAAI,CAAC,CAAA;YAClB,CAAC,IAEA,IAAA,kBAAU,EAAC;YACV,WAAW,aAAA;YACX,cAAc,EAAE,cAAc;YAC9B,WAAW,aAAA;YACX,YAAY,cAAA;YACZ,UAAU,EAAE,IAAI;SACjB,CAAC,CACE,CACE,CACX,CAAC,CAAC,CAAC,CACF,uCAAK,SAAS,EAAE,UAAG,SAAS,kBAAe,IACxC,IAAA,kBAAU,EAAC;QACV,WAAW,aAAA;QACX,cAAc,EAAE,cAAc;QAC9B,WAAW,aAAA;QACX,YAAY,cAAA;QACZ,UAAU,EAAE,IAAI;KACjB,CAAC,CACE,CACP,CACA,CACJ,CAAA;AACH,CAAC,CAAA;AAnDY,QAAA,SAAS,aAmDrB"}

package/lib/canvas-collapse-panel/panel-body/panel-search-list.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { NsGraph, IGraphConfig, IModelService, IGraphCommandService } from '@sunspirytus/xflow-core';
+import type { IPanelNode } from '../interface';
+interface ISearchList {
+    prefixClz: string;
+    modelService: IModelService;
+    commandService: IGraphCommandService;
+    graphConfig: IGraphConfig;
+    onMouseDown: (nodeConfig: NsGraph.INodeConfig) => (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    searchResult: IPanelNode[];
+}
+export declare const SearchResult: React.FC<ISearchList>;
+export {};

package/lib/canvas-collapse-panel/panel-body/panel-search-list.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchResult = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var antd_1 = require("antd");
+var panel_node_1 = require("./panel-node");
+var SearchResult = function (props) {
+    var searchResult = props.searchResult, prefixClz = props.prefixClz, onMouseDown = props.onMouseDown, modelService = props.modelService, commandService = props.commandService, graphConfig = props.graphConfig;
+    if (searchResult.length === 0) {
+        return react_1.default.createElement(antd_1.Empty, { style: { marginTop: '24px' } });
+    }
+    return (react_1.default.createElement("ul", { className: "xflow-collapse-search-list" }, searchResult.map(function (item) { return (react_1.default.createElement("li", { className: "xflow-collapse-search-list-item ".concat(item.isDisabled ? 'disabled' : ''), key: item.id },
+        react_1.default.createElement(panel_node_1.PanelNode, { item: item, onMouseDown: onMouseDown(item), popoverContent: item.popoverContent, prefixClz: prefixClz, modelService: modelService, commandService: commandService, graphConfig: graphConfig }))); })));
+};
+exports.SearchResult = SearchResult;
+//# sourceMappingURL=panel-search-list.js.map

package/lib/canvas-collapse-panel/panel-body/panel-search-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-search-list.js","sourceRoot":"","sources":["../../../src/canvas-collapse-panel/panel-body/panel-search-list.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,6BAA4B;AAG5B,2CAAwC;AAajC,IAAM,YAAY,GAA0B,UAAA,KAAK;IAC9C,IAAA,YAAY,GAAwE,KAAK,aAA7E,EAAE,SAAS,GAA6D,KAAK,UAAlE,EAAE,WAAW,GAAgD,KAAK,YAArD,EAAE,YAAY,GAAkC,KAAK,aAAvC,EAAE,cAAc,GAAkB,KAAK,eAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAU;IAEjG,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,8BAAC,YAAK,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAI,CAAA;KAC/C;IAED,OAAO,CACL,sCAAI,SAAS,EAAE,4BAA4B,IACxC,YAAY,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,CACxB,sCACE,SAAS,EAAE,0CAAmC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAE,EACjF,GAAG,EAAE,IAAI,CAAC,EAAE;QAEZ,8BAAC,sBAAS,IACR,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC,EAC9B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,GACxB,CACC,CACN,EAfyB,CAezB,CAAC,CACC,CACN,CAAA;AACH,CAAC,CAAA;AA3BY,QAAA,YAAY,gBA2BxB"}

package/lib/canvas-collapse-panel/panel-collapse-btn.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { IProps } from './interface';
+export interface ICollapseBtnProps extends IProps {
+    isCollapsed: boolean;
+    onCollapseBtnClick: () => void;
+}
+/** collapseBtn */
+export declare const NodePanelCollapseBtn: React.FC<ICollapseBtnProps>;

package/lib/canvas-collapse-panel/panel-collapse-btn.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodePanelCollapseBtn = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ant-design/icons");
+/** collapseBtn */
+var NodePanelCollapseBtn = function (props) {
+    var prefixClz = props.prefixClz, onCollapseBtnClick = props.onCollapseBtnClick, isCollapsed = props.isCollapsed, collapseButtonStyle = props.collapseButtonStyle, style = props.style;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "".concat(prefixClz, "-header"), style: tslib_1.__assign(tslib_1.__assign({}, style), collapseButtonStyle), onClick: onCollapseBtnClick },
+            react_1.default.createElement(icons_1.CaretLeftOutlined, { rotate: isCollapsed ? 180 : 0 }))));
+};
+exports.NodePanelCollapseBtn = NodePanelCollapseBtn;
+//# sourceMappingURL=panel-collapse-btn.js.map

package/lib/canvas-collapse-panel/panel-collapse-btn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-collapse-btn.js","sourceRoot":"","sources":["../../src/canvas-collapse-panel/panel-collapse-btn.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AAEzB,2CAAqD;AAOrD,kBAAkB;AACX,IAAM,oBAAoB,GAAgC,UAAA,KAAK;IAC5D,IAAA,SAAS,GAAkE,KAAK,UAAvE,EAAE,kBAAkB,GAA8C,KAAK,mBAAnD,EAAE,WAAW,GAAiC,KAAK,YAAtC,EAAE,mBAAmB,GAAY,KAAK,oBAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAU;IAExF,OAAO,CACL,8BAAC,eAAK,CAAC,QAAQ;QACb,uCACE,SAAS,EAAE,UAAG,SAAS,YAAS,EAChC,KAAK,wCAAO,KAAK,GAAK,mBAAmB,GACzC,OAAO,EAAE,kBAAkB;YAE3B,8BAAC,yBAAiB,IAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAC/C,CACS,CAClB,CAAA;AACH,CAAC,CAAA;AAdY,QAAA,oBAAoB,wBAchC"}

package/lib/canvas-collapse-panel/panel-footer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IProps } from './interface';
+import type { NsCollapsePanelModel } from './interface';
+export interface IFooterProps extends IProps {
+    state: NsCollapsePanelModel.IState;
+}
+export declare const NodePanelFooter: React.FC<IFooterProps>;

package/lib/canvas-collapse-panel/panel-footer.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodePanelFooter = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var context_1 = require("../base-panel/context");
+var NodePanelFooter = function (props) {
+    var prefixClz = props.prefixClz;
+    var propsProxy = (0, context_1.usePanelContext)().propsProxy;
+    var panelProps = propsProxy.getValue();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "".concat(prefixClz, "-footer"), style: props.style }, panelProps.footer && react_1.default.isValidElement(panelProps.footer) && panelProps.footer)));
+};
+exports.NodePanelFooter = NodePanelFooter;
+//# sourceMappingURL=panel-footer.js.map

package/lib/canvas-collapse-panel/panel-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-footer.js","sourceRoot":"","sources":["../../src/canvas-collapse-panel/panel-footer.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,iDAAuD;AAQhD,IAAM,eAAe,GAA2B,UAAA,KAAK;IAClD,IAAA,SAAS,GAAK,KAAK,UAAV,CAAU;IACnB,IAAA,UAAU,GAAK,IAAA,yBAAe,GAAU,WAA9B,CAA8B;IAChD,IAAM,UAAU,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;IAExC,OAAO,CACL,8BAAC,eAAK,CAAC,QAAQ;QACb,uCAAK,SAAS,EAAE,UAAG,SAAS,YAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACtD,UAAU,CAAC,MAAM,IAAI,eAAK,CAAC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,MAAM,CAC9E,CACS,CAClB,CAAA;AACH,CAAC,CAAA;AAZY,QAAA,eAAe,mBAY3B"}

package/lib/canvas-collapse-panel/panel-header.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IProps, IOnKeywordChange, NsCollapsePanelModel } from './interface';
+export interface IHeaderProps extends IProps {
+    /** 关键字变化 */
+    onKeywordChange: IOnKeywordChange;
+    /** panel state */
+    state: NsCollapsePanelModel.IState;
+}
+export declare const NodePanelHeader: React.FC<IHeaderProps>;

package/lib/canvas-collapse-panel/panel-header.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodePanelHeader = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var antd_1 = require("antd");
+var context_1 = require("../base-panel/context");
+var NodePanelHeader = function (props) {
+    var prefixClz = props.prefixClz, onKeywordChange = props.onKeywordChange, state = props.state;
+    var propsProxy = (0, context_1.usePanelContext)().propsProxy;
+    var panelProps = propsProxy.getValue();
+    var onChange = function (e) {
+        var panelNodes = state.collapseData.reduce(function (acc, item) {
+            if (item.children) {
+                acc.push.apply(acc, item.children);
+            }
+            return acc;
+        }, []);
+        onKeywordChange(e.target.value, panelNodes);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "".concat(prefixClz, "-header"), style: props.style },
+            panelProps.header && react_1.default.isValidElement(panelProps.header) && panelProps.header,
+            panelProps.searchService && (react_1.default.createElement("div", { className: "".concat(prefixClz, "-header-search") },
+                react_1.default.createElement(antd_1.Input, { placeholder: "\u641C\u7D22\u7EC4\u4EF6", allowClear: true, onChange: function (e) { return onChange(e); }, style: { width: '100%', border: 0 } }))))));
+};
+exports.NodePanelHeader = NodePanelHeader;
+//# sourceMappingURL=panel-header.js.map

package/lib/canvas-collapse-panel/panel-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-header.js","sourceRoot":"","sources":["../../src/canvas-collapse-panel/panel-header.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,6BAA4B;AAC5B,iDAAuD;AAUhD,IAAM,eAAe,GAA2B,UAAA,KAAK;IAClD,IAAA,SAAS,GAA6B,KAAK,UAAlC,EAAE,eAAe,GAAY,KAAK,gBAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAU;IAC3C,IAAA,UAAU,GAAK,IAAA,yBAAe,GAAU,WAA9B,CAA8B;IAChD,IAAM,UAAU,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;IAExC,IAAM,QAAQ,GAAG,UAAC,CAAsC;QACtD,IAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,IAAI;YACrD,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,GAAG,CAAC,IAAI,OAAR,GAAG,EAAS,IAAI,CAAC,QAAQ,EAAC;aAC3B;YACD,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,EAAE,CAAC,CAAA;QACN,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;IAC7C,CAAC,CAAA;IACD,OAAO,CACL,8BAAC,eAAK,CAAC,QAAQ;QACb,uCAAK,SAAS,EAAE,UAAG,SAAS,YAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;YACtD,UAAU,CAAC,MAAM,IAAI,eAAK,CAAC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,MAAM;YACjF,UAAU,CAAC,aAAa,IAAI,CAC3B,uCAAK,SAAS,EAAE,UAAG,SAAS,mBAAgB;gBAC1C,8BAAC,YAAK,IACJ,WAAW,EAAC,0BAAM,EAClB,UAAU,QACV,QAAQ,EAAE,UAAA,CAAC,IAAI,OAAA,QAAQ,CAAC,CAAC,CAAC,EAAX,CAAW,EAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,GACnC,CACE,CACP,CACG,CACS,CAClB,CAAA;AACH,CAAC,CAAA;AA/BY,QAAA,eAAe,mBA+B3B"}

package/lib/canvas-collapse-panel/service.d.ts

@@ -0,0 +1,14 @@
+import type { IGraphCommandService } from '@sunspirytus/xflow-core';
+import type { IProps } from './interface';
+import { NsCollapsePanelModel } from './interface';
+/** 方便其他组件执行Command改变Panel内部状态 */
+export declare const executeCollapsePanelCommand: (cmds: IGraphCommandService, updateModel: (state: NsCollapsePanelModel.IState) => Promise<void>) => void;
+/** 方便其他组件执行Command改变Panel内部状态 */
+export declare const useCollapsePanelData: (props: IProps) => {
+    state: NsCollapsePanelModel.IState;
+    collapsible: boolean;
+    setState: import("@sunspirytus/xflow-core").NsModel.ISetValue<NsCollapsePanelModel.IState>;
+    onKeywordChange: any;
+    onActiveKeyChange: any;
+    onCollapseChange: (isCollapsed: boolean) => void;
+};

package/lib/canvas-collapse-panel/service.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCollapsePanelData = exports.executeCollapsePanelCommand = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var interface_1 = require("./interface");
+/** 方便其他组件执行Command改变Panel内部状态 */
+var executeCollapsePanelCommand = function (cmds, updateModel) {
+    cmds.executeCommand(xflow_core_1.XFlowModelCommands.UPDATE_MODEL.id, {
+        getModel: function (modelService) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                return [2 /*return*/, interface_1.NsCollapsePanelModel.useModel(modelService)];
+            });
+        }); },
+        updateModel: updateModel,
+    });
+};
+exports.executeCollapsePanelCommand = executeCollapsePanelCommand;
+/** 方便其他组件执行Command改变Panel内部状态 */
+var useCollapsePanelData = function (props) {
+    var collapsible = props.collapsible, nodeDataService = props.nodeDataService, searchService = props.searchService, onCollapseChange = props.onCollapseChange;
+    var modelService = (0, xflow_core_1.useXFlowApp)().modelService;
+    /** 创建model */
+    var _a = (0, xflow_core_1.createComponentModel)({
+        /** service: onKeywordChange */
+        keyword: '',
+        /** 展开的key id */
+        collapseData: [],
+        /** 搜索结果 */
+        searchResult: [],
+    }), state = _a[0], setState = _a[1], panelModel = _a[2];
+    /** 注册model成为全局状态，方便其他组件联动 */
+    react_1.default.useEffect(function () {
+        if (modelService.findDeferredModel(interface_1.NsCollapsePanelModel.id)) {
+            return;
+        }
+        modelService.registerModel({
+            id: interface_1.NsCollapsePanelModel.id,
+            modelFactory: function () { return panelModel; },
+            watchChange: function (self) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                var graphMetaModel, fetch, graphMetaDisposable;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, xflow_core_1.MODELS.GRAPH_META.getModel(modelService)]; //useContext(MODELS.GRAPH_META.id)
+                        case 1:
+                            graphMetaModel = _a.sent() //useContext(MODELS.GRAPH_META.id)
+                            ;
+                            fetch = function (meta) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                                var data;
+                                return tslib_1.__generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, nodeDataService(meta, modelService)];
+                                        case 1:
+                                            data = _a.sent();
+                                            return [2 /*return*/, { collapseData: data }];
+                                    }
+                                });
+                            }); };
+                            graphMetaDisposable = graphMetaModel.watch(function (meta) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                                var collapseData;
+                                return tslib_1.__generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, fetch(meta)];
+                                        case 1:
+                                            collapseData = (_a.sent()).collapseData;
+                                            self.setValue(function (m) {
+                                                m.keyword = '';
+                                                m.collapseData = collapseData;
+                                                m.searchResult = [];
+                                            });
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); });
+                            return [2 /*return*/, xflow_core_1.Disposable.create(function () {
+                                    graphMetaDisposable.dispose();
+                                })];
+                    }
+                });
+            }); },
+        });
+        /* eslint-disable-next-line  */
+    }, []);
+    /** 折叠文件夹 */
+    var onActiveKeyChange = react_1.default.useCallback(function (activeKey) {
+        setState(function (modelState) {
+            modelState.collapseData.forEach(function (item) {
+                if (item.id === activeKey && item.collapsible !== false) {
+                    item.isCollapsed = !item.isCollapsed;
+                }
+            });
+        });
+    }, [setState]);
+    /** 搜索 */
+    var onKeywordChange = react_1.default.useCallback(function (keyword, panelNodes) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var searchResult_1;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!searchService) {
+                        return [2 /*return*/, console.warn('searchService is not defined')];
+                    }
+                    if (!keyword) return [3 /*break*/, 2];
+                    return [4 /*yield*/, searchService(panelNodes, keyword)];
+                case 1:
+                    searchResult_1 = _a.sent();
+                    setState(function (modelState) {
+                        modelState.keyword = keyword;
+                        modelState.searchResult = searchResult_1;
+                    });
+                    return [3 /*break*/, 3];
+                case 2:
+                    setState(function (modelState) {
+                        modelState.keyword = '';
+                        modelState.searchResult = [];
+                    });
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, 
+    // eslint-disable-next-line
+    [searchService]);
+    return {
+        state: state,
+        collapsible: collapsible,
+        setState: setState,
+        onKeywordChange: onKeywordChange,
+        onActiveKeyChange: onActiveKeyChange,
+        onCollapseChange: onCollapseChange,
+    };
+};
+exports.useCollapsePanelData = useCollapsePanelData;
+//# sourceMappingURL=service.js.map

package/lib/canvas-collapse-panel/service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.js","sourceRoot":"","sources":["../../src/canvas-collapse-panel/service.tsx"],"names":[],"mappings":"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"}

package/lib/canvas-collapse-panel/style/index.css

@@ -0,0 +1,124 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.xflow-collapse-panel {
+  border-right: 1px solid #d9d9d9;
+}
+.xflow-collapse-panel .disabled {
+  position: relative;
+  opacity: 0.45;
+}
+.xflow-collapse-panel .disabled::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  cursor: not-allowed;
+  content: '';
+}
+.xflow-collapse-panel-node-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  cursor: grab;
+}
+.xflow-collapse-panel-header {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  border-bottom: 1px solid #d9d9d9;
+}
+.xflow-collapse-panel-header-title {
+  font-size: 16px;
+}
+.xflow-collapse-panel-header-search {
+  width: 100%;
+  padding: 0 12px;
+}
+.xflow-collapse-panel-body {
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fff;
+}
+.xflow-collapse-panel-footer {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  border-top: 1px solid #d9d9d9;
+}
+.xflow-collapse-panel-footer-title {
+  font-size: 16px;
+}
+.xflow-collapse-panel .xflow-collapse-search-list {
+  height: 100%;
+  margin: 0;
+  padding: 8px 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.xflow-collapse-panel .xflow-collapse-search-list-item {
+  margin: 0;
+  padding: 4px 0;
+}
+.xflow-collapse-panel .xflow-collapse-list {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.xflow-collapse-panel .xflow-collapse-list-item {
+  margin: 0;
+  padding: 0;
+}
+.xflow-collapse-panel .xflow-collapse-list-item.close .xflow-collapse-content {
+  height: 0;
+  transform: scaleY(0);
+}
+.xflow-collapse-panel .xflow-collapse-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+  color: rgba(0, 0, 0, 0.65);
+  line-height: 1.5;
+  cursor: pointer;
+  transition: all 0.3s;
+  user-select: none;
+}
+.xflow-collapse-panel .xflow-collapse-header:hover {
+  background: #f5f5f5;
+}
+.xflow-collapse-panel .xflow-collapse-header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+}
+.xflow-collapse-panel .xflow-collapse-header-icon svg {
+  transition: all 0.5s;
+}
+.xflow-collapse-panel .xflow-collapse-header-label {
+  flex: 1;
+}
+.xflow-collapse-panel .xflow-collapse-header-extra {
+  width: auto;
+}
+.xflow-collapse-panel .xflow-collapse-content {
+  height: 100%;
+  height: auto;
+  overflow: hidden;
+  transform: scaleY(1);
+  transition: scale 0.15s ease-in-out;
+}
+.xflow-collapse-panel .xflow-collapse-content-item {
+  padding: 4px 0;
+  transition: all 0.5s;
+}
+.xflow-collapse-panel .xflow-collapse-content-item:hover {
+  background: #f5f5f5;
+}

package/lib/canvas-collapse-panel/style/index.less

@@ -0,0 +1,143 @@
+@import '~antd/es/style/themes/default.less';
+@import (reference) '~@sunspirytus/xflow-core/es/style/themes/index.less';
+
+@light-border: ~'1px solid #d9d9d9';
+@header-bg: #fff;
+@body-bg: #fff;
+@list-item-hover: #f5f5f5;
+
+@panel-prefix-cls: ~'@{xflow-prefix}-collapse-panel';
+
+.@{panel-prefix-cls} {
+  border-right: @light-border;
+
+  .disabled {
+    position: relative;
+    opacity: 0.45;
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 999;
+      cursor: not-allowed;
+      content: '';
+    }
+  }
+
+  &-node-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    cursor: grab;
+  }
+
+  &-header {
+    display: flex;
+    justify-content: space-evenly;
+    background: @header-bg;
+    border-bottom: @light-border;
+    &-title {
+      font-size: 16px;
+    }
+    &-search {
+      width: 100%;
+      padding: 0 12px;
+    }
+  }
+
+  &-body {
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: @body-bg;
+  }
+
+  &-footer {
+    display: flex;
+    justify-content: space-evenly;
+    background: @header-bg;
+    border-top: @light-border;
+    &-title {
+      font-size: 16px;
+    }
+  }
+  .xflow-collapse {
+    // 搜索
+    &-search-list {
+      height: 100%;
+      margin: 0;
+      padding: 8px 0;
+      overflow-y: auto;
+      list-style: none;
+    }
+    &-search-list-item {
+      margin: 0;
+      padding: 4px 0;
+    }
+
+    &-list {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow-y: auto;
+      list-style: none;
+      &-item {
+        margin: 0;
+        padding: 0;
+        &.close {
+          .xflow-collapse-content {
+            height: 0;
+            transform: scaleY(0);
+          }
+        }
+      }
+    }
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 16px;
+      color: rgba(0, 0, 0, 0.65);
+      line-height: 1.5;
+      cursor: pointer;
+      transition: all 0.3s;
+      user-select: none;
+      &:hover {
+        background: @list-item-hover;
+      }
+      &-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        svg {
+          transition: all 0.5s;
+        }
+      }
+      &-label {
+        flex: 1;
+      }
+      &-extra {
+        width: auto;
+      }
+    }
+
+    &-content {
+      height: 100%;
+      height: auto;
+      overflow: hidden;
+      transform: scaleY(1);
+      transition: scale 0.15s ease-in-out;
+      &-item {
+        padding: 4px 0;
+        transition: all 0.5s;
+        &:hover {
+          background: @list-item-hover;
+        }
+      }
+    }
+  }
+}

package/lib/canvas-collapse-panel/utils.d.ts

@@ -0,0 +1,6 @@
+import type { ILayoutProps } from './interface';
+export declare const usePanelLyaoutStyle: (config: ILayoutProps) => {
+    headerStyle: any;
+    bodyStyle: any;
+    footerStyle: any;
+};

package/lib/canvas-collapse-panel/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePanelLyaoutStyle = void 0;
+var tslib_1 = require("tslib");
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var constants_1 = require("./constants");
+var usePanelLyaoutStyle = function (config) {
+    var headerHeight = (config && config.headerPosition && config.headerPosition.height) || constants_1.PANEL_HEADER_HEIGHT;
+    var footerHeight = (config.footerPosition && config.footerPosition.height) || constants_1.PANEL_FOOTER_HEIGHT;
+    return {
+        headerStyle: (0, xflow_core_1.usePositionStyle)(tslib_1.__assign({ height: headerHeight, lineHeight: headerHeight, top: 0, left: 0, right: 0 }, config.headerPosition)),
+        bodyStyle: (0, xflow_core_1.usePositionStyle)(tslib_1.__assign({ left: 0, right: 0, top: headerHeight, bottom: footerHeight }, config.bodyPosition)),
+        footerStyle: (0, xflow_core_1.usePositionStyle)(tslib_1.__assign({ left: 0, right: 0, lineHeight: footerHeight, height: footerHeight, bottom: 0 }, config.footerPosition)),
+    };
+};
+exports.usePanelLyaoutStyle = usePanelLyaoutStyle;
+//# sourceMappingURL=utils.js.map

package/lib/canvas-collapse-panel/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/canvas-collapse-panel/utils.tsx"],"names":[],"mappings":";;;;AAAA,sDAA0D;AAE1D,yCAAsE;AAE/D,IAAM,mBAAmB,GAAG,UAAC,MAAoB;IACtD,IAAM,YAAY,GAChB,CAAC,MAAM,IAAI,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,+BAAmB,CAAA;IAC1F,IAAM,YAAY,GAChB,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,+BAAmB,CAAA;IAEhF,OAAO;QACL,WAAW,EAAE,IAAA,6BAAgB,qBAC3B,MAAM,EAAE,YAAY,EACpB,UAAU,EAAE,YAAY,EACxB,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,IACL,MAAM,CAAC,cAAc,EACxB;QACF,SAAS,EAAE,IAAA,6BAAgB,qBACzB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,YAAY,IACjB,MAAM,CAAC,YAAY,EACtB;QACF,WAAW,EAAE,IAAA,6BAAgB,qBAC3B,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,EACR,UAAU,EAAE,YAAY,EACxB,MAAM,EAAE,YAAY,EACpB,MAAM,EAAE,CAAC,IACN,MAAM,CAAC,cAAc,EACxB;KACH,CAAA;AACH,CAAC,CAAA;AA/BY,QAAA,mBAAmB,uBA+B/B"}