@sunspirytus/xflow-extension 1.0.52

package/lib/canvas-node-port-tooltip/contributions/node-port.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodePortTooltipContribution = void 0;
+var tslib_1 = require("tslib");
+var classnames_1 = tslib_1.__importDefault(require("classnames"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var xflow_core_2 = require("@sunspirytus/xflow-core");
+var interface_1 = require("../interface");
+var xflow_core_3 = require("@sunspirytus/xflow-core");
+/**
+ * 内置的hook contribution
+ * 处理 config上的runtime的注册项
+ */
+var NodePortTooltipContribution = /** @class */ (function () {
+    function NodePortTooltipContribution() {
+        var _this = this;
+        this.toDispose = new xflow_core_3.DisposableCollection();
+        /** 获取画布实例 */
+        this.getGraphInstance = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var graphInstance, graphConfig;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.graphProvider.getGraphInstance()];
+                    case 1:
+                        graphInstance = _a.sent();
+                        return [4 /*yield*/, this.graphProvider.getGraphOptions()];
+                    case 2:
+                        graphConfig = _a.sent();
+                        return [2 /*return*/, { graph: graphInstance, config: graphConfig }];
+                }
+            });
+        }); };
+        /** 获取GraphOptions */
+        this.getPortRenderConfig = function () {
+            var dagOptions = {
+                onPortRendered: function (portRenderedArgs) {
+                    /* eslint-disable-next-line @typescript-eslint/no-this-alias */
+                    var graph = this;
+                    var port = portRenderedArgs.port, node = portRenderedArgs.node;
+                    var contentSelectors = portRenderedArgs.contentSelectors;
+                    var portContainer = contentSelectors && contentSelectors['xflow-port-group'];
+                    if (portContainer instanceof Element) {
+                        portContainer.setAttribute('class', (0, classnames_1.default)('xflow-port-group', {
+                            connected: port.connected && port.group !== 'out',
+                            groupPort: (node === null || node === void 0 ? void 0 : node.isGroup) && (node === null || node === void 0 ? void 0 : node.isGroup()),
+                        }));
+                        portContainer.addEventListener('mouseenter', function (e) {
+                            var eventArgs = {
+                                e: e,
+                                portId: port.id,
+                                nodeId: node.id,
+                                portData: port,
+                                nodeData: node.getData(),
+                                tooltip: port.tooltip,
+                                placement: port.group,
+                            };
+                            graph.trigger(interface_1.NsPortEvent.MOUSE_ENTER, eventArgs);
+                        });
+                        portContainer.addEventListener('mouseleave', function (e) {
+                            var eventArgs = {
+                                e: e,
+                                portId: port.id,
+                                nodeId: node.id,
+                                portData: port,
+                                nodeData: node.getData(),
+                                tooltip: port.tooltip,
+                                placement: port.group,
+                            };
+                            graph.trigger(interface_1.NsPortEvent.MOUSE_LEAVE, eventArgs);
+                        });
+                    }
+                },
+            };
+            return dagOptions;
+        };
+        this.registerHookHub = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                return [2 /*return*/, xflow_core_3.Disposable.create(function () { })];
+            });
+        }); };
+        this.registerHook = function (hooks) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var toDispose, disposables;
+            var _this = this;
+            return tslib_1.__generator(this, function (_a) {
+                toDispose = new xflow_core_3.DisposableCollection();
+                disposables = [
+                    hooks.graphOptions.registerHook({
+                        name: 'add onPortRendered options ',
+                        handler: function (args) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                            return tslib_1.__generator(this, function (_a) {
+                                Object.assign(args, this.getPortRenderConfig());
+                                return [2 /*return*/];
+                            });
+                        }); },
+                    }),
+                ];
+                toDispose.pushAll(disposables);
+                return [2 /*return*/, xflow_core_3.Disposable.create(function () { })];
+            });
+        }); };
+    }
+    NodePortTooltipContribution.prototype.registerModel = function (registry) {
+        var _this = this;
+        registry.registerModel({
+            id: interface_1.ACTIVE_NODE_PORT.id,
+            watchChange: function (self) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+                var _a, graph, config, calcPosition, onMouseEnter, onMouseLeave;
+                return tslib_1.__generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.getGraphInstance()];
+                        case 1:
+                            _a = _b.sent(), graph = _a.graph, config = _a.config;
+                            calcPosition = function (e) {
+                                var _a = e.target.getBoundingClientRect(), x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+                                var clientRect = config.rootContainer.getBoundingClientRect();
+                                var position = {
+                                    x: x - ((clientRect === null || clientRect === void 0 ? void 0 : clientRect.x) || 0) + width / 2,
+                                    y: y - ((clientRect === null || clientRect === void 0 ? void 0 : clientRect.y) || 0) + height / 2,
+                                };
+                                return position;
+                            };
+                            onMouseEnter = function (args) {
+                                self.setValue(tslib_1.__assign(tslib_1.__assign({}, args), { position: calcPosition(args.e) }));
+                            };
+                            onMouseLeave = function () {
+                                self.setValue(null);
+                            };
+                            /** 绑定事件 */
+                            graph.on(interface_1.NsPortEvent.MOUSE_ENTER, onMouseEnter);
+                            graph.on(interface_1.NsPortEvent.MOUSE_LEAVE, onMouseLeave);
+                            graph.on('cell:mouseleave', onMouseLeave);
+                            return [2 /*return*/, xflow_core_3.Disposable.create(function () {
+                                    /** 解除绑定 */
+                                    graph.off(interface_1.NsPortEvent.MOUSE_ENTER, onMouseEnter);
+                                    graph.off(interface_1.NsPortEvent.MOUSE_LEAVE, onMouseLeave);
+                                })];
+                    }
+                });
+            }); },
+        });
+    };
+    tslib_1.__decorate([
+        xflow_core_1.ManaSyringe.inject(xflow_core_2.IGraphProvider),
+        tslib_1.__metadata("design:type", Object)
+    ], NodePortTooltipContribution.prototype, "graphProvider", void 0);
+    NodePortTooltipContribution = tslib_1.__decorate([
+        xflow_core_1.ManaSyringe.singleton({ contrib: [xflow_core_1.IHookContribution, xflow_core_3.IModelContribution] })
+    ], NodePortTooltipContribution);
+    return NodePortTooltipContribution;
+}());
+exports.NodePortTooltipContribution = NodePortTooltipContribution;
+//# sourceMappingURL=node-port.js.map

package/lib/canvas-node-port-tooltip/contributions/node-port.js.map

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

package/lib/canvas-node-port-tooltip/index.d.ts

@@ -0,0 +1 @@
+export { CanvasNodePortTooltip } from './components';

package/lib/canvas-node-port-tooltip/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasNodePortTooltip = void 0;
+var components_1 = require("./components");
+Object.defineProperty(exports, "CanvasNodePortTooltip", { enumerable: true, get: function () { return components_1.CanvasNodePortTooltip; } });
+//# sourceMappingURL=index.js.map

package/lib/canvas-node-port-tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/canvas-node-port-tooltip/index.ts"],"names":[],"mappings":";;;AAAA,2CAAoD;AAA3C,mHAAA,qBAAqB,OAAA"}

package/lib/canvas-node-port-tooltip/interface.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { NsGraph, IModelService } from '@sunspirytus/xflow-core';
+export declare namespace NsPortEvent {
+    const MOUSE_ENTER = "node-port:mouseenter";
+    interface IPortEvent {
+        e: MouseEvent;
+        portId: string;
+        nodeId: string;
+        portData: NsGraph.INodeAnchor;
+        nodeData: NsGraph.INodeConfig;
+        tooltip: string;
+        placement: 'top' | 'bottom';
+    }
+    const MOUSE_LEAVE = "node-port:mouseleave";
+}
+export declare namespace ACTIVE_NODE_PORT {
+    const id = "ACTIVE_NODE_PORT";
+    interface IState {
+        e: MouseEvent;
+        position: {
+            x: number;
+            y: number;
+        };
+        portId: string;
+        nodeId: string;
+        portData: NsGraph.INodeAnchor;
+        nodeData: NsGraph.INodeConfig;
+        tooltip: string;
+        placement: 'top' | 'bottom';
+    }
+    const useModel: (modelService: IModelService) => Promise<{
+        data: IState;
+        model: import("@sunspirytus/xflow-core").NsModel.IModel<IState>;
+    }>;
+}
+export interface IConfigProps {
+    getTooltip?: (args: ACTIVE_NODE_PORT.IState) => React.ReactNode;
+}

package/lib/canvas-node-port-tooltip/interface.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACTIVE_NODE_PORT = exports.NsPortEvent = void 0;
+var tslib_1 = require("tslib");
+require("react");
+var NsPortEvent;
+(function (NsPortEvent) {
+    NsPortEvent.MOUSE_ENTER = 'node-port:mouseenter';
+    NsPortEvent.MOUSE_LEAVE = 'node-port:mouseleave';
+})(NsPortEvent = exports.NsPortEvent || (exports.NsPortEvent = {}));
+var ACTIVE_NODE_PORT;
+(function (ACTIVE_NODE_PORT) {
+    var _this = this;
+    ACTIVE_NODE_PORT.id = 'ACTIVE_NODE_PORT';
+    ACTIVE_NODE_PORT.useModel = function (modelService) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        var model, data;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, modelService.awaitModel(ACTIVE_NODE_PORT.id)];
+                case 1:
+                    model = _a.sent();
+                    return [4 /*yield*/, model.getValidValue()];
+                case 2:
+                    data = _a.sent();
+                    return [2 /*return*/, { data: data, model: model }];
+            }
+        });
+    }); };
+})(ACTIVE_NODE_PORT = exports.ACTIVE_NODE_PORT || (exports.ACTIVE_NODE_PORT = {}));
+//# sourceMappingURL=interface.js.map

package/lib/canvas-node-port-tooltip/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/canvas-node-port-tooltip/interface.ts"],"names":[],"mappings":";;;;AAAA,iBAAyB;AAGzB,IAAiB,WAAW,CAY3B;AAZD,WAAiB,WAAW;IACb,uBAAW,GAAG,sBAAsB,CAAA;IAUpC,uBAAW,GAAG,sBAAsB,CAAA;AACnD,CAAC,EAZgB,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAY3B;AAED,IAAiB,gBAAgB,CAiBhC;AAjBD,WAAiB,gBAAgB;;IAClB,mBAAE,GAAG,kBAAkB,CAAA;IAWvB,yBAAQ,GAAG,UAAO,YAA2B;;;;wBAC1C,qBAAM,YAAY,CAAC,UAAU,CAAS,iBAAA,EAAE,CAAC,EAAA;;oBAAjD,KAAK,GAAG,SAAyC;oBAC1C,qBAAM,KAAK,CAAC,aAAa,EAAE,EAAA;;oBAAlC,IAAI,GAAG,SAA2B;oBACxC,sBAAO,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,EAAA;;;SACvB,CAAA;AACH,CAAC,EAjBgB,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAiBhC"}

package/lib/canvas-node-port-tooltip/module.d.ts

@@ -0,0 +1,5 @@
+import { ManaSyringe } from '@sunspirytus/xflow-core';
+import 'reflect-metadata';
+/** 依赖扩展模块，必须要加载 */
+declare const createModule: () => ManaSyringe.SyringeModule;
+export { createModule };

package/lib/canvas-node-port-tooltip/module.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createModule = void 0;
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+require("reflect-metadata");
+/** Application 扩展依赖 */
+var node_port_1 = require("./contributions/node-port");
+/** 依赖扩展模块，必须要加载 */
+var createModule = function () {
+    return xflow_core_1.ManaSyringe.Module(function (register) {
+        /** 扩展 runtime hook */
+        register(node_port_1.NodePortTooltipContribution);
+    });
+};
+exports.createModule = createModule;
+//# sourceMappingURL=module.js.map

package/lib/canvas-node-port-tooltip/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../../src/canvas-node-port-tooltip/module.ts"],"names":[],"mappings":";;;AAAA,sDAAqD;AACrD,4BAAyB;AACzB,uBAAuB;AAEvB,uDAAuE;AAEvE,mBAAmB;AACnB,IAAM,YAAY,GAAG;IACnB,OAAO,wBAAW,CAAC,MAAM,CAAC,UAAA,QAAQ;QAChC,sBAAsB;QACtB,QAAQ,CAAC,uCAA2B,CAAC,CAAA;IACvC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAEQ,oCAAY"}

package/lib/canvas-node-tree-panel/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const PANEL_HEADER_HEIGHT = 40;
+export declare const PANEL_FOOTER_HEIGHT = 40;
+export declare const TREE_ROOT_ID = "XFLOW_TREE_PANEL_ROOT_ID";

package/lib/canvas-node-tree-panel/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TREE_ROOT_ID = exports.PANEL_FOOTER_HEIGHT = exports.PANEL_HEADER_HEIGHT = void 0;
+exports.PANEL_HEADER_HEIGHT = 40;
+exports.PANEL_FOOTER_HEIGHT = 40;
+exports.TREE_ROOT_ID = 'XFLOW_TREE_PANEL_ROOT_ID';
+//# sourceMappingURL=constants.js.map

package/lib/canvas-node-tree-panel/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/canvas-node-tree-panel/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,mBAAmB,GAAG,EAAE,CAAA;AACxB,QAAA,mBAAmB,GAAG,EAAE,CAAA;AAExB,QAAA,YAAY,GAAG,0BAA0B,CAAA"}

package/lib/canvas-node-tree-panel/index.d.ts

@@ -0,0 +1,6 @@
+import type { IProps } from './interface';
+import React from 'react';
+import { NsNodeTreePanelModel } from './service';
+import * as NsNodeTreePanel from './interface';
+declare const NodeTreePanel: React.FC<IProps>;
+export { NodeTreePanel, NsNodeTreePanelModel, NsNodeTreePanel, IProps as INodeTreePanelProps };

package/lib/canvas-node-tree-panel/index.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NsNodeTreePanel = exports.NsNodeTreePanelModel = exports.NodeTreePanel = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var base_panel_1 = require("../base-panel");
+var panel_body_1 = require("./panel-body");
+var panel_header_1 = require("./panel-header");
+var panel_footer_1 = require("./panel-footer");
+var utils_1 = require("./utils");
+var service_1 = require("./service");
+Object.defineProperty(exports, "NsNodeTreePanelModel", { enumerable: true, get: function () { return service_1.NsNodeTreePanelModel; } });
+var NsNodeTreePanel = tslib_1.__importStar(require("./interface"));
+exports.NsNodeTreePanel = NsNodeTreePanel;
+var NodeTreePanelMain = function (props) {
+    var _a = (0, utils_1.usePanelLyaoutStyle)(props), headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle;
+    var _b = (0, service_1.useTreePanelData)(props), state = _b.state, onFolderExpand = _b.onFolderExpand, onKeywordChange = _b.onKeywordChange;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(panel_header_1.NodePanelHeader, tslib_1.__assign({}, props, { state: state, style: headerStyle, onKeywordChange: onKeywordChange })),
+        react_1.default.createElement(panel_body_1.NodePanelBody, tslib_1.__assign({}, props, { state: state, style: bodyStyle, onFolderExpand: onFolderExpand })),
+        react_1.default.createElement(panel_footer_1.NodePanelFooter, tslib_1.__assign({}, props, { state: state, style: footerStyle }))));
+};
+var NodeTreePanel = function (props) {
+    var prefixClz = (0, xflow_core_1.useXflowPrefixCls)('node-dnd-panel');
+    return (react_1.default.createElement(base_panel_1.WorkspacePanel, tslib_1.__assign({}, props, { className: prefixClz }),
+        react_1.default.createElement(NodeTreePanelMain, tslib_1.__assign({}, props, { prefixClz: prefixClz }))));
+};
+exports.NodeTreePanel = NodeTreePanel;
+//# sourceMappingURL=index.js.map

package/lib/canvas-node-tree-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/canvas-node-tree-panel/index.tsx"],"names":[],"mappings":";;;;AACA,wDAAyB;AACzB,sDAA2D;AAC3D,4CAA8C;AAC9C,2CAA4C;AAC5C,+CAAgD;AAChD,+CAAgD;AAChD,iCAA6C;AAC7C,qCAAkE;AA8B1C,qGA9BG,8BAAoB,OA8BH;AA7B5C,mEAA8C;AA6BA,0CAAe;AA3B7D,IAAM,iBAAiB,GAAqB,UAAA,KAAK;IACzC,IAAA,KAA0C,IAAA,2BAAmB,EAAC,KAAoB,CAAC,EAAjF,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,WAAW,iBAA8C,CAAA;IACnF,IAAA,KAA6C,IAAA,0BAAgB,EAAC,KAAK,CAAC,EAAlE,KAAK,WAAA,EAAE,cAAc,oBAAA,EAAE,eAAe,qBAA4B,CAAA;IAE1E,OAAO,CACL;QACE,8BAAC,8BAAe,uBACV,KAAK,IACT,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,WAAW,EAClB,eAAe,EAAE,eAAe,IAChC;QACF,8BAAC,0BAAa,uBAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,IAAI;QAC5F,8BAAC,8BAAe,uBAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,IAAI,CAC/D,CACJ,CAAA;AACH,CAAC,CAAA;AAED,IAAM,aAAa,GAAqB,UAAA,KAAK;IAC3C,IAAM,SAAS,GAAG,IAAA,8BAAiB,EAAC,gBAAgB,CAAC,CAAA;IACrD,OAAO,CACL,8BAAC,2BAAc,uBAAK,KAAK,IAAE,SAAS,EAAE,SAAS;QAC7C,8BAAC,iBAAiB,uBAAK,KAAK,IAAE,SAAS,EAAE,SAAS,IAAI,CACvC,CAClB,CAAA;AACH,CAAC,CAAA;AAEQ,sCAAa"}

package/lib/canvas-node-tree-panel/interface.d.ts

@@ -0,0 +1,111 @@
+import type { Addon } from '@antv/x6';
+import type { IPosition, NsGraph, IModelService, MODELS, IGraphCommandService } from '@sunspirytus/xflow-core';
+import type React from 'react';
+import type { Node as X6Node } from '@antv/x6';
+export interface IPanelProps {
+    headerPosition: IPosition;
+    bodyPosition: IPosition;
+    footerPosition: IPosition;
+}
+export interface INodeFactoryArgs {
+    data: NsGraph.INodeConfig;
+    width: number;
+    height: number;
+    view: string;
+    component: React.ReactNode;
+}
+export interface IProps extends Partial<IPanelProps> {
+    position: IPosition;
+    style?: React.CSSProperties;
+    prefixClz?: string;
+    className?: string;
+    onNodeDrop: IOnNodeDrop;
+    dndOptions?: Partial<Addon.Dnd.Options>;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    x6NodeFactory?: (args: INodeFactoryArgs) => X6Node;
+    searchService?: ISearchService;
+    treeDataService: ITreeDataService;
+}
+export interface IOnNodeDrop {
+    (nodeMeta: NsGraph.INodeConfig, commandService: IGraphCommandService, modelService: IModelService): Promise<void>;
+}
+/** tree node model */
+export interface ITreeNode {
+    /**
+     * 树节点的ID，'root' 是根节点的id
+     */
+    readonly id: string | 'root';
+    /**
+     * 节点的文件夹id
+     */
+    readonly parentId: string;
+    /**
+     * 节点名
+     */
+    readonly label: string;
+    /**
+     * 画布节点宽度
+     */
+    readonly width?: number;
+    /**
+     * 画布节点高度
+     */
+    readonly height?: number;
+    /**
+     * 画布节点的renderKey，可选
+     */
+    readonly renderKey?: string;
+    /**
+     * Dnd节点的popover的提示内容，可选
+     */
+    readonly popoverContent?: React.ReactNode;
+    /**
+     * 自定义节点
+     */
+    renderComponent?: React.ComponentType<{
+        data: ITreeNode;
+        isNodeTreePanel: boolean;
+    }>;
+    /**
+     * 【内部渲染用】文件夹的标识.
+     */
+    isDirectory?: boolean;
+    /**
+     * 【内部渲染用】节点的标识.
+     */
+    isLeaf?: boolean;
+    /**
+     * 【内部渲染用】子节点
+     */
+    children?: ITreeNode[];
+    /**
+     * fieldName，支持NsGraph.INodeConfig
+     */
+    [fieldName: string]: any;
+}
+/** service: 获取tree数据 */
+export interface ITreeDataService {
+    (graphMeta: MODELS.GRAPH_META.IState, modelService: IModelService): Promise<ITreeNode[]>;
+}
+/** service: 返回过滤后的数据 */
+export interface ISearchService {
+    (treeNodeList: ITreeNode[], keyword: string): Promise<ITreeNode[]>;
+}
+export interface IOnFolderExpand {
+    (keys: string[]): void;
+}
+export interface IOnKeywordChange {
+    (kwyword: string): void;
+}
+export declare namespace NsTreePanelData {
+    const id = "TREE_PANEL_DATA";
+    interface IState {
+        treeNodeList: ITreeNode[];
+        treeData: ITreeNode[];
+        expandedKeys: string[];
+        defaultExpandAll: boolean;
+        keyword: string;
+        searchList: ITreeNode[];
+    }
+}

package/lib/canvas-node-tree-panel/interface.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NsTreePanelData = void 0;
+var NsTreePanelData;
+(function (NsTreePanelData) {
+    NsTreePanelData.id = 'TREE_PANEL_DATA';
+})(NsTreePanelData = exports.NsTreePanelData || (exports.NsTreePanelData = {}));
+//# sourceMappingURL=interface.js.map

package/lib/canvas-node-tree-panel/interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/canvas-node-tree-panel/interface.tsx"],"names":[],"mappings":";;;AAoHA,IAAiB,eAAe,CAU/B;AAVD,WAAiB,eAAe;IACjB,kBAAE,GAAG,iBAAiB,CAAA;AASrC,CAAC,EAVgB,eAAe,GAAf,uBAAe,KAAf,uBAAe,QAU/B"}

package/lib/canvas-node-tree-panel/panel-body.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { NsTreePanelData, IProps, ITreeNode, IOnFolderExpand, INodeFactoryArgs } from './interface';
+import type { IModelService, IGraphCommandService, IGraphConfig } from '@sunspirytus/xflow-core';
+export declare const defaultNodeFactory: (args: INodeFactoryArgs) => import("@antv/x6").Node<import("@antv/x6").Node.Properties>;
+interface IConfigRenderOptions {
+    graphConfig: IGraphConfig;
+    nodeConfig: ITreeNode;
+    modelService: IModelService;
+    commandService: IGraphCommandService;
+    onMouseDown: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export declare const renderNode: (props: IConfigRenderOptions) => any;
+interface ITitleProps {
+    prefixClz: string;
+    item: ITreeNode;
+    graphConfig: any;
+    modelService: IModelService;
+    commandService: IGraphCommandService;
+    popoverContent: React.ReactNode;
+    onMouseDown: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export declare const NodeTitle: (props: ITitleProps) => any;
+export interface IBodyProps extends IProps {
+    state: NsTreePanelData.IState;
+    onFolderExpand: IOnFolderExpand;
+}
+export declare const NodePanelBody: React.FC<IBodyProps>;
+export {};

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

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodePanelBody = exports.NodeTitle = exports.renderNode = exports.defaultNodeFactory = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var antd_1 = require("antd");
+var icons_1 = require("@ant-design/icons");
+var x6_1 = require("@antv/x6");
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var node_1 = require("../canvas-dag-extension/x6-extension/node");
+var DirectoryTree = antd_1.Tree.DirectoryTree, TreeNode = antd_1.Tree.TreeNode;
+var FolderIcon = function (_a) {
+    var expanded = _a.expanded;
+    return expanded ? react_1.default.createElement(icons_1.FolderOpenFilled, null) : react_1.default.createElement(icons_1.FolderFilled, null);
+};
+var defaultNodeFactory = function (args) {
+    return new node_1.XFlowNode(args);
+};
+exports.defaultNodeFactory = defaultNodeFactory;
+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,
+            isNodeTreePanel: 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 NodeTitle = function (props) {
+    var _a = (0, react_1.useState)(false), isVisible = _a[0], setVisible = _a[1];
+    var _b = (0, react_1.useState)(), appContainer = _b[0], setAppContainer = _b[1];
+    var getGraphConfig = (0, xflow_core_1.useXFlowApp)().getGraphConfig;
+    react_1.default.useEffect(function () {
+        getGraphConfig().then(function (graphConfig) {
+            setAppContainer(graphConfig.appContainer);
+        });
+    });
+    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);
+            }, getPopupContainer: function () { return appContainer || document.body; } },
+            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,
+            })))),
+        !popoverContent && (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,
+        })))));
+};
+exports.NodeTitle = NodeTitle;
+var NodePanelBody = function (props) {
+    var x6NodeFactory = props.x6NodeFactory, dndOptions = props.dndOptions, onNodeDrop = props.onNodeDrop, state = props.state, onFolderExpand = props.onFolderExpand, prefixClz = props.prefixClz;
+    var _a = (0, xflow_core_1.useXFlowApp)(), graphProvider = _a.graphProvider, modelService = _a.modelService, commandService = _a.commandService;
+    var _b = react_1.default.useState(), graphConfig = _b[0], setConfig = _b[1];
+    var _c = react_1.default.useState(), dnd = _c[0], setDnd = _c[1];
+    var _d = react_1.default.useState(), graph = _d[0], setGraph = _d[1];
+    react_1.default.useEffect(function () {
+        graphProvider.getGraphInstance().then(function (x6Graph) {
+            setGraph(x6Graph);
+        });
+    });
+    react_1.default.useEffect(function () {
+        graphProvider.getGraphOptions().then(function (x6GraphConfig) {
+            setConfig(x6GraphConfig);
+        });
+        if (!graph) {
+            return;
+        }
+        var dndInstance = new x6_1.Addon.Dnd(tslib_1.__assign(tslib_1.__assign({ scaled: false, animation: false }, dndOptions), { target: graph, 
+            /** 这里考虑到需要新增群组的需求，不使用x6的getDropNod方法
+             * 在validateNode时调用command添加
+             */
+            validateNode: function (droppingNode) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                var nodeConfig;
+                return tslib_1.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            nodeConfig = tslib_1.__assign(tslib_1.__assign({}, droppingNode.getData()), droppingNode.getPosition());
+                            if (!onNodeDrop) return [3 /*break*/, 2];
+                            return [4 /*yield*/, onNodeDrop(nodeConfig, commandService, modelService)];
+                        case 1:
+                            _a.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            console.error('onNodeDrop method is required in NodeTree Panel');
+                            _a.label = 3;
+                        case 3: return [2 /*return*/, false];
+                    }
+                });
+            }); } }));
+        setDnd(dndInstance);
+    }, [commandService, dndOptions, graph, graphProvider, modelService, onNodeDrop]);
+    var onMouseDown = react_1.default.useCallback(function (nodeConfig) { return function (e) {
+        if (!graph || !dnd || !graphConfig) {
+            return;
+        }
+        var renderKey = graphConfig.nodeTypeParser(nodeConfig);
+        var reactComponent = nodeConfig.renderComponent
+            ? nodeConfig.renderComponent
+            : graphConfig.nodeRender.get(renderKey);
+        var wrappedComponent = (0, xflow_core_1.getNodeReactComponent)(reactComponent, commandService, modelService);
+        var nodeData = {
+            data: nodeConfig,
+            width: nodeConfig.width || 180,
+            height: nodeConfig.height || 40,
+            view: graphConfig.graphId,
+            component: wrappedComponent,
+        };
+        var x6Node = x6NodeFactory ? x6NodeFactory(nodeData) : (0, exports.defaultNodeFactory)(nodeData);
+        dnd.start(x6Node, e.nativeEvent);
+    }; }, [commandService, dnd, graph, graphConfig, modelService, x6NodeFactory]);
+    var renderTree = react_1.default.useCallback(function (treeList) {
+        if (treeList === void 0) { treeList = []; }
+        return treeList.map(function (item) {
+            var isDirectory = item.isDirectory, children = item.children, popoverContent = item.popoverContent;
+            if (isDirectory) {
+                return (react_1.default.createElement(TreeNode, { icon: FolderIcon, key: item.id, title: item.label, className: "".concat(prefixClz, "-tree-folder") }, renderTree(children)));
+            }
+            return (react_1.default.createElement(TreeNode, { isLeaf: true, key: item.id, className: "".concat(prefixClz, "-tree-leaf"), icon: react_1.default.createElement("span", null), title: react_1.default.createElement(exports.NodeTitle, { item: item, onMouseDown: onMouseDown(item), popoverContent: popoverContent, prefixClz: prefixClz, modelService: modelService, commandService: commandService, graphConfig: graphConfig }) }));
+        });
+    }, [commandService, graphConfig, modelService, onMouseDown, prefixClz]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "".concat(prefixClz, "-body"), style: props.style },
+            !state.keyword && (react_1.default.createElement(DirectoryTree, { showIcon: true, selectable: false, autoExpandParent: false, onExpand: onFolderExpand, expandedKeys: state.expandedKeys, className: "".concat(prefixClz, "-tree") }, renderTree(state.treeData))),
+            state.searchList.length > 0 && (react_1.default.createElement("ul", { className: "".concat(prefixClz, "-body-list") }, state.searchList.map(function (treeNode) { return (react_1.default.createElement("li", { key: treeNode.id, className: "".concat(prefixClz, "-body-list-item") },
+                react_1.default.createElement(exports.NodeTitle, { item: treeNode, onMouseDown: onMouseDown(treeNode), popoverContent: treeNode.popoverContent, prefixClz: prefixClz, modelService: modelService, commandService: commandService, graphConfig: graphConfig }))); }))),
+            state.keyword && state.searchList.length === 0 && react_1.default.createElement(antd_1.Empty, { style: { marginTop: '48px' } }))));
+};
+exports.NodePanelBody = NodePanelBody;
+//# sourceMappingURL=panel-body.js.map