@sunspirytus/xflow-extension 1.0.52

package/lib/flowchart-node-panel/nodes/terminator/index.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TerminalNode = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var utils_1 = require("../../utils");
+var constants_1 = require("../../constants");
+var TerminalNode = function (props) {
+    var _a = props.size, size = _a === void 0 ? { width: constants_1.NODE_WIDTH, height: constants_1.NODE_HEIGHT } : _a, _b = props.data, data = _b === void 0 ? {} : _b;
+    var _c = data.stroke, stroke = _c === void 0 ? constants_1.DefaultNodeConfig.stroke : _c, _d = data.label, label = _d === void 0 ? constants_1.DefaultNodeConfig.label : _d, _e = data.fill, fill = _e === void 0 ? constants_1.DefaultNodeConfig.fill : _e, _f = data.fontFill, fontFill = _f === void 0 ? constants_1.DefaultNodeConfig.fontFill : _f, _g = data.fontSize, fontSize = _g === void 0 ? constants_1.DefaultNodeConfig.fontSize : _g;
+    var width = size.width, height = size.height;
+    var rx = Math.min(height, width) / 2;
+    var path = [
+        ['M', rx, constants_1.NODE_PADDING],
+        ['L', width - rx, constants_1.NODE_PADDING],
+        ['C', width - 2 * constants_1.NODE_PADDING, constants_1.NODE_PADDING, width - 2 * constants_1.NODE_PADDING, height / 2],
+        ['', width - 2 * constants_1.NODE_PADDING, height / 2],
+        [
+            'C',
+            width - 2 * constants_1.NODE_PADDING,
+            height / 2,
+            width - 2 * constants_1.NODE_PADDING,
+            height - 2 * constants_1.NODE_PADDING,
+        ],
+        ['', width - rx, height - 2 * constants_1.NODE_PADDING],
+        ['L', rx, height - 2 * constants_1.NODE_PADDING],
+        ['C', constants_1.NODE_PADDING, height - 2 * constants_1.NODE_PADDING, constants_1.NODE_PADDING, height / 2],
+        ['', constants_1.NODE_PADDING, height / 2],
+        ['C', constants_1.NODE_PADDING, height / 2, constants_1.NODE_PADDING, constants_1.NODE_PADDING],
+        ['', rx, constants_1.NODE_PADDING],
+    ];
+    return (react_1.default.createElement("svg", { viewBox: "0 0 ".concat(width, " ").concat(height), xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%" },
+        react_1.default.createElement("path", { d: (0, utils_1.createPath)(path), fill: fill, stroke: stroke }),
+        react_1.default.createElement("text", { x: width / 2, y: height / 2, fill: fontFill, textAnchor: "middle", alignmentBaseline: "middle", fontSize: fontSize }, label),
+        "Sorry, your browser does not support inline SVG."));
+};
+exports.TerminalNode = TerminalNode;
+//# sourceMappingURL=index.js.map

package/lib/flowchart-node-panel/nodes/terminator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/flowchart-node-panel/nodes/terminator/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AAEzB,qCAAwC;AACxC,6CAA0F;AAEnF,IAAM,YAAY,GAAwB,UAAA,KAAK;IAC5C,IAAA,KAAiE,KAAK,KAArB,EAAjD,IAAI,mBAAG,EAAE,KAAK,EAAE,sBAAU,EAAE,MAAM,EAAE,uBAAW,EAAE,KAAA,EAAE,KAAc,KAAK,KAAV,EAAT,IAAI,mBAAG,EAAE,KAAA,CAAU;IAE5E,IAAA,KAKE,IAAI,OAL2B,EAAjC,MAAM,mBAAG,6BAAiB,CAAC,MAAM,KAAA,EACjC,KAIE,IAAI,MAJyB,EAA/B,KAAK,mBAAG,6BAAiB,CAAC,KAAK,KAAA,EAC/B,KAGE,IAAI,KAHuB,EAA7B,IAAI,mBAAG,6BAAiB,CAAC,IAAI,KAAA,EAC7B,KAEE,IAAI,SAF+B,EAArC,QAAQ,mBAAG,6BAAiB,CAAC,QAAQ,KAAA,EACrC,KACE,IAAI,SAD+B,EAArC,QAAQ,mBAAG,6BAAiB,CAAC,QAAQ,KAAA,CAC/B;IACA,IAAA,KAAK,GAAa,IAAI,MAAjB,EAAE,MAAM,GAAK,IAAI,OAAT,CAAS;IAC9B,IAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IACtC,IAAM,IAAI,GAAG;QACX,CAAC,GAAG,EAAE,EAAE,EAAE,wBAAY,CAAC;QACvB,CAAC,GAAG,EAAE,KAAK,GAAG,EAAE,EAAE,wBAAY,CAAC;QAC/B,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,GAAG,wBAAY,EAAE,wBAAY,EAAE,KAAK,GAAG,CAAC,GAAG,wBAAY,EAAE,MAAM,GAAG,CAAC,CAAC;QACnF,CAAC,EAAE,EAAE,KAAK,GAAG,CAAC,GAAG,wBAAY,EAAE,MAAM,GAAG,CAAC,CAAC;QAC1C;YACE,GAAG;YACH,KAAK,GAAG,CAAC,GAAG,wBAAY;YACxB,MAAM,GAAG,CAAC;YACV,KAAK,GAAG,CAAC,GAAG,wBAAY;YACxB,MAAM,GAAG,CAAC,GAAG,wBAAY;SAC1B;QACD,CAAC,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,CAAC,GAAG,wBAAY,CAAC;QAC3C,CAAC,GAAG,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,GAAG,wBAAY,CAAC;QACpC,CAAC,GAAG,EAAE,wBAAY,EAAE,MAAM,GAAG,CAAC,GAAG,wBAAY,EAAE,wBAAY,EAAE,MAAM,GAAG,CAAC,CAAC;QACxE,CAAC,EAAE,EAAE,wBAAY,EAAE,MAAM,GAAG,CAAC,CAAC;QAC9B,CAAC,GAAG,EAAE,wBAAY,EAAE,MAAM,GAAG,CAAC,EAAE,wBAAY,EAAE,wBAAY,CAAC;QAC3D,CAAC,EAAE,EAAE,EAAE,EAAE,wBAAY,CAAC;KACvB,CAAA;IAED,OAAO,CACL,uCACE,OAAO,EAAE,cAAO,KAAK,cAAI,MAAM,CAAE,EACjC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM;QAQb,wCAAM,CAAC,EAAE,IAAA,kBAAU,EAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,GAAI;QACzD,wCACE,CAAC,EAAE,KAAK,GAAG,CAAC,EACZ,CAAC,EAAE,MAAM,GAAG,CAAC,EACb,IAAI,EAAE,QAAQ,EACd,UAAU,EAAC,QAAQ,EACnB,iBAAiB,EAAC,QAAQ,EAC1B,QAAQ,EAAE,QAAQ,IAEjB,KAAK,CACD;2DAEH,CACP,CAAA;AACH,CAAC,CAAA;AA1DY,QAAA,YAAY,gBA0DxB"}

package/lib/flowchart-node-panel/nodes/text/index.d.ts

@@ -0,0 +1,2 @@
+import type { NsGraph } from '@sunspirytus/xflow-core';
+export declare const TextNode: NsGraph.INodeRender;

package/lib/flowchart-node-panel/nodes/text/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextNode = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var constants_1 = require("../../constants");
+var TextNode = function (props) {
+    var _a = props.size, size = _a === void 0 ? { width: constants_1.NODE_WIDTH, height: constants_1.NODE_HEIGHT } : _a, _b = props.data, data = _b === void 0 ? {} : _b;
+    var _c = data.label, label = _c === void 0 ? constants_1.DefaultNodeConfig.label : _c, _d = data.fontFill, fontFill = _d === void 0 ? constants_1.DefaultNodeConfig.fontFill : _d, _e = data.fontSize, fontSize = _e === void 0 ? constants_1.DefaultNodeConfig.fontSize : _e;
+    var width = size.width, height = size.height;
+    // 用于放大文本，避免看不清
+    var scale = 2;
+    return (react_1.default.createElement("svg", { viewBox: "0 0 ".concat(width / scale, " ").concat(height / scale), xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%" },
+        react_1.default.createElement("text", { x: width / (2 * scale), y: height / (2 * scale), fill: fontFill, textAnchor: "middle", alignmentBaseline: "middle", fontSize: fontSize }, label),
+        "Sorry, your browser does not support inline SVG."));
+};
+exports.TextNode = TextNode;
+//# sourceMappingURL=index.js.map

package/lib/flowchart-node-panel/nodes/text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/flowchart-node-panel/nodes/text/index.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AAEzB,6CAA4E;AAErE,IAAM,QAAQ,GAAwB,UAAA,KAAK;IACxC,IAAA,KAAiE,KAAK,KAArB,EAAjD,IAAI,mBAAG,EAAE,KAAK,EAAE,sBAAU,EAAE,MAAM,EAAE,uBAAW,EAAE,KAAA,EAAE,KAAc,KAAK,KAAV,EAAT,IAAI,mBAAG,EAAE,KAAA,CAAU;IAE5E,IAAA,KAGE,IAAI,MAHyB,EAA/B,KAAK,mBAAG,6BAAiB,CAAC,KAAK,KAAA,EAC/B,KAEE,IAAI,SAF+B,EAArC,QAAQ,mBAAG,6BAAiB,CAAC,QAAQ,KAAA,EACrC,KACE,IAAI,SAD+B,EAArC,QAAQ,mBAAG,6BAAiB,CAAC,QAAQ,KAAA,CAC/B;IACA,IAAA,KAAK,GAAa,IAAI,MAAjB,EAAE,MAAM,GAAK,IAAI,OAAT,CAAS;IAC9B,eAAe;IACf,IAAM,KAAK,GAAG,CAAC,CAAA;IAEf,OAAO,CACL,uCACE,OAAO,EAAE,cAAO,KAAK,GAAG,KAAK,cAAI,MAAM,GAAG,KAAK,CAAE,EACjD,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM;QAEb,wCACE,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,EACtB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,EACvB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAC,QAAQ,EACnB,iBAAiB,EAAC,QAAQ,EAC1B,QAAQ,EAAE,QAAQ,IAEjB,KAAK,CACD;2DAEH,CACP,CAAA;AACH,CAAC,CAAA;AA/BY,QAAA,QAAQ,YA+BpB"}

package/lib/flowchart-node-panel/panel-body.d.ts

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

package/lib/flowchart-node-panel/panel-body.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodePanelBody = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var antd_1 = require("antd");
+var x6_1 = require("@antv/x6");
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var utils_1 = require("../flowchart-canvas/utils");
+var panel_body_1 = require("../canvas-node-tree-panel/panel-body");
+var lodash_1 = require("lodash");
+var Panel = antd_1.Collapse.Panel;
+var NodePanelBody = function (props) {
+    var x6NodeFactory = props.x6NodeFactory, dndOptions = props.dndOptions, state = props.state, prefixClz = props.prefixClz, _a = props.defaultActiveKey, defaultActiveKey = _a === void 0 ? ['official'] : _a, _b = props.showOfficial, showOfficial = _b === void 0 ? true : _b;
+    var registerNode = props.registerNode
+        ? (0, lodash_1.isArray)(props.registerNode)
+            ? props.registerNode
+            : [props.registerNode]
+        : [];
+    var _c = (0, xflow_core_1.useXFlowApp)(), graphProvider = _c.graphProvider, modelService = _c.modelService, commandService = _c.commandService;
+    var _d = react_1.default.useState(), dnd = _d[0], setDnd = _d[1];
+    /** 获取graph实例 */
+    var _e = react_1.default.useState(), graph = _e[0], setGraph = _e[1];
+    react_1.default.useEffect(function () {
+        graphProvider.getGraphInstance().then(function (x6Graph) {
+            setGraph(x6Graph);
+        });
+    });
+    var graphConfig = undefined;
+    graphProvider.getGraphOptions().then(function (x6GraphConfig) {
+        graphConfig = x6GraphConfig;
+    });
+    var onNodeDrop = (0, react_1.useCallback)(function (node) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var ports, nodeConfig, args, onAddNode;
+        var _a;
+        return tslib_1.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    ports = node.ports;
+                    nodeConfig = tslib_1.__assign(tslib_1.__assign({}, node), { id: "node-".concat((0, xflow_core_1.uuidv4)()), zIndex: 10, ports: tslib_1.__assign(tslib_1.__assign({}, ports), { items: (_a = ports.items) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), { id: (0, xflow_core_1.uuidv4)() })); }) }) });
+                    args = {
+                        nodeConfig: nodeConfig,
+                    };
+                    return [4 /*yield*/, commandService.executeCommand(xflow_core_1.XFlowNodeCommands.ADD_NODE.id, args)];
+                case 1:
+                    _b.sent();
+                    onAddNode = (0, utils_1.getProps)('onAddNode');
+                    if (typeof onAddNode === 'function') {
+                        onAddNode(nodeConfig);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [commandService]);
+    react_1.default.useEffect(function () {
+        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());
+                            return [4 /*yield*/, onNodeDrop(nodeConfig)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/, false];
+                    }
+                });
+            }); } }));
+        setDnd(dndInstance);
+    }, [commandService, dndOptions, graph, modelService, onNodeDrop]);
+    var onMouseDown = react_1.default.useCallback(function (nodeConfig) { return function (e) {
+        if (!graph || !dnd || !graphConfig) {
+            return;
+        }
+        var renderKey = graphConfig.nodeTypeParser(nodeConfig);
+        var _a = nodeConfig.width, width = _a === void 0 ? 180 : _a, _b = nodeConfig.height, height = _b === void 0 ? 40 : _b;
+        var reactComponent = graphConfig.nodeRender.get(renderKey);
+        var wrappedComponent = (0, xflow_core_1.getNodeReactComponent)(reactComponent, commandService, modelService);
+        var nodeData = {
+            data: nodeConfig,
+            width: width,
+            height: height,
+            view: graphConfig.graphId,
+            component: wrappedComponent,
+        };
+        var x6Node = x6NodeFactory ? x6NodeFactory(nodeData) : (0, panel_body_1.defaultNodeFactory)(nodeData);
+        dnd.start(x6Node, e.nativeEvent);
+    }; }, [commandService, dnd, graph, graphConfig, modelService, x6NodeFactory]);
+    var renderTree = react_1.default.useCallback(function (list) {
+        if (list === void 0) { list = []; }
+        return list.map(function (item) {
+            var popoverContent = item.popoverContent;
+            return (react_1.default.createElement(panel_body_1.NodeTitle, { item: item, onMouseDown: onMouseDown(item), popoverContent: popoverContent, prefixClz: prefixClz, modelService: modelService, commandService: commandService, graphConfig: graphConfig }));
+        });
+    }, [commandService, graphConfig, modelService, onMouseDown, prefixClz]);
+    var officialNode = state.nodeList.filter(function (item) { return !item.isCustom; });
+    var searchOfficialNode = state.searchList.filter(function (item) { return !item.isCustom; });
+    var customNode = function (key) {
+        return state.nodeList.filter(function (item) { return item.isCustom && item.parentKey === key; });
+    };
+    var searchCustomNode = function (key) {
+        return state.searchList.filter(function (item) { return item.isCustom && item.parentKey === key; });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "".concat(prefixClz, "-body") },
+            react_1.default.createElement(antd_1.Collapse, { defaultActiveKey: defaultActiveKey, style: { border: 'none' } },
+                showOfficial && (react_1.default.createElement(Panel, { header: "\u901A\u7528\u8282\u70B9", key: "official", style: { border: 'none' } },
+                    !state.keyword && (react_1.default.createElement("div", { className: "".concat(prefixClz, "-official") }, renderTree(officialNode))),
+                    state.searchList.length > 0 && (react_1.default.createElement("div", { className: "".concat(prefixClz, "-official") }, renderTree(searchOfficialNode))))),
+                (registerNode === null || registerNode === void 0 ? void 0 : registerNode.length) > 0 &&
+                    registerNode.map(function (item) {
+                        return !item.hidden &&
+                            item.nodes.length > 0 && (react_1.default.createElement(Panel, { header: item.title, key: item.key, style: { border: 'none' } },
+                            !state.keyword && (react_1.default.createElement("div", { className: "".concat(prefixClz, "-custom") }, renderTree(customNode(item.key)))),
+                            state.searchList.length > 0 && (react_1.default.createElement("div", { className: "".concat(prefixClz, "-custom") }, renderTree(searchCustomNode(item.key))))));
+                    })),
+            state.keyword && state.searchList.length === 0 && react_1.default.createElement(antd_1.Empty, { style: { marginTop: '48px' } }))));
+};
+exports.NodePanelBody = NodePanelBody;
+//# sourceMappingURL=panel-body.js.map

package/lib/flowchart-node-panel/panel-body.js.map

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

package/lib/flowchart-node-panel/panel-header.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { IProps, IOnKeywordChange } from './interface';
+import type { NsPanelData } from './service';
+export interface IHeaderProps extends IProps {
+    onKeywordChange: IOnKeywordChange;
+    state: NsPanelData.IState;
+}
+export declare const NodePanelHeader: React.FC<IHeaderProps>;

package/lib/flowchart-node-panel/panel-header.js

@@ -0,0 +1,19 @@
+"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;
+    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, "-header"), style: tslib_1.__assign({ zIndex: 1 }, props.style) },
+            panelProps.header && react_1.default.isValidElement(panelProps.header) && panelProps.header,
+            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 onKeywordChange(e.target.value); }, style: { width: '100%', border: 0 } })))));
+};
+exports.NodePanelHeader = NodePanelHeader;
+//# sourceMappingURL=panel-header.js.map

package/lib/flowchart-node-panel/panel-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-header.js","sourceRoot":"","sources":["../../src/flowchart-node-panel/panel-header.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,6BAA4B;AAG5B,iDAAuD;AAOhD,IAAM,eAAe,GAA2B,UAAA,KAAK;IAClD,IAAA,SAAS,GAAsB,KAAK,UAA3B,EAAE,eAAe,GAAK,KAAK,gBAAV,CAAU;IACpC,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,uCACE,SAAS,EAAE,UAAG,SAAS,YAAS,EAChC,KAAK,qBACH,MAAM,EAAE,CAAC,IACN,KAAK,CAAC,KAAK;YAGf,UAAU,CAAC,MAAM,IAAI,eAAK,CAAC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,UAAU,CAAC,MAAM;YAClF,uCAAK,SAAS,EAAE,UAAG,SAAS,mBAAgB;gBAC1C,8BAAC,YAAK,IACJ,WAAW,EAAC,0BAAM,EAClB,UAAU,QACV,QAAQ,EAAE,UAAA,CAAC,IAAI,OAAA,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAA/B,CAA+B,EAC9C,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,GACnC,CACE,CACF,CACS,CAClB,CAAA;AACH,CAAC,CAAA;AA1BY,QAAA,eAAe,mBA0B3B"}

package/lib/flowchart-node-panel/service.d.ts

@@ -0,0 +1,15 @@
+import type { IProps, IFlowchartNode } from './interface';
+export declare namespace NsPanelData {
+    const id = "NODE_PANEL_DATA";
+    interface IState {
+        nodeList: IFlowchartNode[];
+        defaultExpandAll: boolean;
+        keyword: string;
+        searchList: IFlowchartNode[];
+    }
+}
+export declare const usePanelData: (props: IProps) => {
+    state: NsPanelData.IState;
+    setState: import("@sunspirytus/xflow-core").NsModel.ISetValue<NsPanelData.IState>;
+    onKeywordChange: any;
+};

package/lib/flowchart-node-panel/service.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePanelData = exports.NsPanelData = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var xflow_core_1 = require("@sunspirytus/xflow-core");
+var utils_1 = require("./utils");
+var lodash_1 = require("lodash");
+var NsPanelData;
+(function (NsPanelData) {
+    NsPanelData.id = 'NODE_PANEL_DATA';
+})(NsPanelData = exports.NsPanelData || (exports.NsPanelData = {}));
+/** 节点查找 */
+var DefaultsearchService = function (nodeList, keyword) {
+    if (nodeList === void 0) { nodeList = []; }
+    return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var list;
+        return tslib_1.__generator(this, function (_a) {
+            list = nodeList.filter(function (i) { var _a, _b; return i.isDirectory || ((_a = i.label) === null || _a === void 0 ? void 0 : _a.includes(keyword)) || ((_b = i.name) === null || _b === void 0 ? void 0 : _b.includes(keyword)); });
+            return [2 /*return*/, list];
+        });
+    });
+};
+var usePanelData = function (props) {
+    var _a = props.searchService, searchService = _a === void 0 ? DefaultsearchService : _a;
+    var registerNode = (props.registerNode
+        ? (0, lodash_1.isArray)(props.registerNode)
+            ? props.registerNode
+            : [props.registerNode]
+        : []);
+    var nodes = [];
+    registerNode.forEach(function (item) {
+        nodes = nodes.concat(item.nodes.map(function (node) { return (tslib_1.__assign(tslib_1.__assign({}, node), { parentKey: item.key })); }));
+    });
+    var modelService = (0, xflow_core_1.useXFlowApp)().modelService;
+    /** 使用model */
+    var _b = (0, xflow_core_1.createComponentModel)({
+        searchList: [],
+        nodeList: [],
+        defaultExpandAll: false,
+        keyword: '',
+    }), state = _b[0], setState = _b[1], panelModel = _b[2];
+    /** 注册成为全局状态，方便其他组件联动 */
+    react_1.default.useEffect(function () {
+        if (modelService.findDeferredModel(NsPanelData.id)) {
+            return;
+        }
+        modelService.registerModel({
+            id: NsPanelData.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 () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+                                var listData;
+                                return tslib_1.__generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, (0, utils_1.nodeService)(nodes)];
+                                        case 1:
+                                            listData = _a.sent();
+                                            return [2 /*return*/, { listData: listData }];
+                                    }
+                                });
+                            }); };
+                            graphMetaDisposable = graphMetaModel.watch(function () { 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*/, fetch()];
+                                        case 1:
+                                            data = _a.sent();
+                                            self.setValue({
+                                                nodeList: data.listData,
+                                                defaultExpandAll: false,
+                                                keyword: '',
+                                                searchList: [],
+                                            });
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); });
+                            return [2 /*return*/, xflow_core_1.Disposable.create(function () {
+                                    graphMetaDisposable.dispose();
+                                })];
+                    }
+                });
+            }); },
+        });
+        /* eslint-disable-next-line  */
+    }, []);
+    /** 搜索 */
+    var onKeywordChange = react_1.default.useCallback(function (keyword) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var list_1;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!searchService) {
+                        return [2 /*return*/];
+                    }
+                    if (!keyword) return [3 /*break*/, 2];
+                    return [4 /*yield*/, searchService(state.nodeList, keyword)];
+                case 1:
+                    list_1 = _a.sent();
+                    setState(function (modelState) {
+                        modelState.keyword = keyword;
+                        modelState.searchList = list_1;
+                    });
+                    return [3 /*break*/, 3];
+                case 2:
+                    setState(function (modelState) {
+                        modelState.keyword = '';
+                        modelState.searchList = [];
+                    });
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [searchService, state.nodeList, setState]);
+    return {
+        state: state,
+        setState: setState,
+        onKeywordChange: onKeywordChange,
+    };
+};
+exports.usePanelData = usePanelData;
+//# sourceMappingURL=service.js.map

package/lib/flowchart-node-panel/service.js.map

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

package/lib/flowchart-node-panel/style/index.css

@@ -0,0 +1,78 @@
+/* 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 */
+.flowchart-extension-container .xflow-node-panel {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 12px;
+}
+.flowchart-extension-container .xflow-node-panel-header {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  border-right: 1px solid #d9d9d9;
+  border-bottom: 1px solid #d9d9d9;
+}
+.flowchart-extension-container .xflow-node-panel-header-title {
+  font-size: 16px;
+}
+.flowchart-extension-container .xflow-node-panel-header-search {
+  width: 100%;
+  padding: 0 12px;
+}
+.flowchart-extension-container .xflow-node-panel-custom {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 5px;
+  background: #fff;
+  cursor: grab;
+}
+.flowchart-extension-container .xflow-node-panel-official {
+  grid-gap: 5px;
+  background: #fff;
+  cursor: grab;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
+}
+.flowchart-extension-container .xflow-node-panel-node-wrapper {
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+}
+.flowchart-extension-container .xflow-node-panel .ant-collapse-content-box {
+  padding: 12px;
+}
+.flowchart-extension-container .xflow-node-panel .ant-collapse-content {
+  border-top: none;
+}
+.flowchart-extension-container .xflow-node-panel .ant-collapse-header {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 12px;
+}
+.flowchart-extension-container .xflow-node-panel-collpase {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 12px;
+  transition: left 0.5s;
+}
+.flowchart-extension-container .xflow-node-panel-collpase-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.flowchart-extension-container .xflow-node-panel-collpase-nodes {
+  border-right: 1px solid #d9d9d9;
+}
+.flowchart-extension-container .xflow-node-panel-collpase-icon {
+  position: absolute;
+  z-index: 99;
+  width: 20px;
+  color: #aaa;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #ccc;
+  transform: translate(0, -50%);
+  cursor: pointer;
+}
+.flowchart-extension-container .xflow-node-panel-collpase-icon:hover {
+  color: #2b84c0;
+}

package/lib/flowchart-node-panel/style/index.less

@@ -0,0 +1,96 @@
+@import '~antd/es/style/themes/default.less';
+
+.node() {
+  grid-gap: 5px;
+  background: #fff;
+  cursor: grab;
+}
+
+.flowchart-extension-container {
+  @light-border: ~'1px solid #d9d9d9';
+  @header-bg: #fff;
+  @dnd-panel-prefix-cls: ~'xflow-node-panel';
+  @dnd-panel-prefix-container: ~'xflow-node-panel-collpase';
+
+  .@{dnd-panel-prefix-cls} {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 12px;
+
+    &-header {
+      display: flex;
+      justify-content: space-evenly;
+      background: @header-bg;
+      border-right: @light-border;
+      border-bottom: @light-border;
+
+      &-title {
+        font-size: 16px;
+      }
+      &-search {
+        width: 100%;
+        padding: 0 12px;
+      }
+    }
+
+    &-custom {
+      display: flex;
+      flex-wrap: wrap;
+      .node();
+    }
+
+    &-official {
+      .node();
+
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
+    }
+
+    &-node-wrapper {
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+    }
+    .ant-collapse-content-box {
+      padding: 12px;
+    }
+    .ant-collapse-content {
+      border-top: none;
+    }
+    .ant-collapse-header {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 12px;
+    }
+  }
+
+  .@{dnd-panel-prefix-container} {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 12px;
+    transition: left 0.5s;
+
+    &-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    &-nodes {
+      border-right: @light-border;
+    }
+
+    &-icon {
+      position: absolute;
+      z-index: 99;
+      width: 20px;
+      color: #aaa;
+      text-align: center;
+      background: #fff;
+      border: 1px solid #ccc;
+      transform: translate(0, -50%);
+      cursor: pointer;
+
+      &:hover {
+        color: rgb(43, 132, 192);
+      }
+    }
+  }
+}

package/lib/flowchart-node-panel/utils.d.ts

@@ -0,0 +1,6 @@
+import type { IRegisterNode } from './interface';
+export declare const getRegisterNode: (nodes: any) => any;
+export declare const nodeService: (nodes: any) => Promise<any[]>;
+export declare const registerCustomNode: (panelConfigs?: IRegisterNode | IRegisterNode[]) => void;
+export declare const setNodeRender: (graphConfig: any) => void;
+export declare const createPath: (paths: (string | number)[][], offsetX?: number, offsetY?: number) => string;