@hsu-react/ui 0.0.1

package/es/components/ChainGraph/ChainGraphServices/index.d.ts

@@ -0,0 +1,88 @@
+import { ShapeStyle, ModelConfig, IGroup } from "@antv/g6";
+import { TreeGraphData } from "..";
+import { getTextSize } from "../_utils";
+export { getTextSize };
+export interface NodeStyle {
+    textStyle?: ShapeStyle;
+    textSelectedStyle?: ShapeStyle;
+    textAlign?: "default" | "center";
+    textHoverStyle?: ShapeStyle;
+    bgStyle?: ShapeStyle;
+    selectedBgStyle?: ShapeStyle;
+    hoverBgStyle?: ShapeStyle;
+    collapseIconStyle?: ShapeStyle;
+    maxWidth?: number;
+    render?: (cfg: ModelConfig & {
+        origin?: Record<string, unknown>;
+    }, target: "default" | "selected" | "hover") => {
+        textStyle?: ShapeStyle;
+        bgStyle?: ShapeStyle;
+    } | void;
+}
+export interface NodeColor {
+    text?: string;
+    bg?: string;
+    stroke?: string;
+    port?: string;
+}
+export interface ChainGraphServicesStyles {
+    root?: NodeStyle;
+    node?: NodeStyle;
+    edge?: ShapeStyle;
+    portStyle?: ShapeStyle;
+    colors?: NodeColor[];
+    hoverColors?: NodeColor[];
+    selectedColors?: NodeColor[];
+}
+interface ChainGraphServicesProps {
+    containerId: string;
+    miniMapContainerId: string;
+    octopus?: boolean;
+    onClick?: (node?: TreeGraphData) => void;
+    styles?: ChainGraphServicesStyles;
+    showPort?: boolean;
+    miniMapSize?: [number, number];
+    rendered?: (graph: ChainGraphServices) => void;
+    fitLeft?: boolean;
+    paddingLeft?: number;
+    rootLevel?: number;
+    hasHover?: boolean;
+    hasSelected?: boolean;
+    minZoom?: number;
+    addShape?: (group: IGroup, cfg: ModelConfig & {
+        origin?: Record<string, unknown>;
+    }) => void;
+}
+export default class ChainGraphServices {
+    private _graph;
+    private _container;
+    private _miniMapContainer;
+    private _minimap;
+    private _data;
+    private _searchVal;
+    private _nodeEvents;
+    private _octopus;
+    private _fitLeft;
+    private _paddingLeft;
+    private _layout;
+    constructor(options: ChainGraphServicesProps);
+    private initGraph;
+    private _resize;
+    resize: (containerId: string) => void;
+    setMiniMap: (showMiniMap: boolean) => void;
+    setData: ({ data, level, rootLevel, getImage, isLayouting, labelRender, }: {
+        data?: TreeGraphData | undefined;
+        level?: number | undefined;
+        rootLevel?: number | undefined;
+        getImage?: ((img: string) => void) | undefined;
+        isLayouting?: ((isLayouting: boolean) => void) | undefined;
+        labelRender?: ((label: TreeGraphData) => string) | undefined;
+    }) => void;
+    onSearch: (searchVal: string) => void;
+    expandAll: ({ allExpand, level, rootLevel, }: {
+        allExpand: boolean;
+        level?: number | undefined;
+        rootLevel?: number | undefined;
+    }) => void;
+    changeLayout: (octopus: boolean, rootLevel?: number, getImage?: ((img: string) => void) | undefined) => void;
+}

package/es/components/ChainGraph/ChainGraphServices/index.js

@@ -0,0 +1,459 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import G6 from "@antv/g6";
+import TreeNode from "./TreeNode";
+import RootNode from "./RootNode";
+import ArrowEdge from "./Edges/ArrowEdge";
+import { deepCopy } from "hsu-utils";
+import NodeEvents from "./NodeEvents";
+import { findAncestorsOfNode, getTextSize, rootTextStyle, nodeTextStyle, edgeStyle } from "../_utils";
+
+// 重新导出 getTextSize 以保持向后兼容
+export { getTextSize };
+
+// ==================== 链图服务 ====================
+var ChainGraphServices = /*#__PURE__*/function () {
+  function ChainGraphServices(options) {
+    var _this = this;
+    _classCallCheck(this, ChainGraphServices);
+    _defineProperty(this, "_graph", null);
+    _defineProperty(this, "_container", null);
+    _defineProperty(this, "_miniMapContainer", null);
+    _defineProperty(this, "_minimap", null);
+    _defineProperty(this, "_data", null);
+    _defineProperty(this, "_searchVal", null);
+    _defineProperty(this, "_nodeEvents", null);
+    _defineProperty(this, "_octopus", false);
+    _defineProperty(this, "_fitLeft", false);
+    _defineProperty(this, "_paddingLeft", 0);
+    _defineProperty(this, "_layout", {});
+    // ==================== 调整大小 ====================
+    _defineProperty(this, "_resize", function (containerId) {
+      var graph = _this._graph;
+      var container = document.getElementById(containerId);
+      if (typeof window !== "undefined") {
+        window.onresize = function () {
+          if (!graph || graph.get("destroyed")) return;
+          if (!container || !container.clientWidth || !container.clientHeight) return;
+          graph.changeSize(container.clientWidth, container.clientHeight);
+          if (_this._fitLeft) {
+            var bbox = graph.getGroup().getCanvasBBox();
+            var height = graph.getContainer().offsetHeight;
+            graph.moveTo(_this._paddingLeft, height / 2 - bbox.height / 2, true, {
+              easing: "easeCubic",
+              duration: 200
+            });
+          } else {
+            graph.fitCenter();
+          }
+        };
+      }
+    });
+    _defineProperty(this, "resize", function (containerId) {
+      var graph = _this._graph;
+      var container = document.getElementById(containerId);
+      if (graph && container) {
+        graph.changeSize(container.clientWidth, container.clientHeight);
+        if (_this._fitLeft) {
+          var bbox = graph.getGroup().getCanvasBBox();
+          var height = graph.getContainer().offsetHeight;
+          graph.moveTo(_this._paddingLeft, height / 2 - bbox.height / 2, true, {
+            easing: "easeCubic",
+            duration: 200
+          });
+        } else {
+          graph.fitCenter();
+        }
+      }
+    });
+    // ==================== 设置MiniMap ====================
+    _defineProperty(this, "setMiniMap", function (showMiniMap) {
+      if (!_this._minimap) return;
+      var graph = _this._graph;
+      if (showMiniMap) {
+        graph === null || graph === void 0 || graph.addPlugin(_this._minimap);
+      } else {
+        graph === null || graph === void 0 || graph.removePlugin(_this._minimap);
+      }
+    });
+    // ==================== 设置数据 ====================
+    _defineProperty(this, "setData", function (_ref) {
+      var data = _ref.data,
+        _ref$level = _ref.level,
+        level = _ref$level === void 0 ? 1 : _ref$level,
+        _ref$rootLevel = _ref.rootLevel,
+        rootLevel = _ref$rootLevel === void 0 ? 1 : _ref$rootLevel,
+        getImage = _ref.getImage,
+        isLayouting = _ref.isLayouting,
+        labelRender = _ref.labelRender;
+      if (!_this._graph || _this._graph.destroyed) return;
+      var _graph = _this._graph;
+      if (!data) {
+        _graph.clear();
+        return;
+      }
+      isLayouting === null || isLayouting === void 0 || isLayouting(true);
+      G6.Util.traverseTree(data, function (item) {
+        item.origin = (item === null || item === void 0 ? void 0 : item.origin) || deepCopy(item);
+        item.label = item.label || item.name || "";
+        if (labelRender) {
+          item.label = labelRender(item);
+        }
+        if (item.level === rootLevel) {
+          item.type = "root-node";
+        } else {
+          item.type = "tree-node";
+        }
+        if (item.level > level) {
+          item.collapsed = true;
+        } else {
+          item.collapsed = false;
+        }
+        item.octopus = _this._octopus;
+      });
+      var centerX = 0;
+      _graph.node(function (node) {
+        if (node.level === rootLevel) {
+          centerX = node.x;
+          node.direction = "center";
+        } else {
+          node.direction = node.x > centerX ? "right" : "left";
+        }
+        return node;
+      });
+      _graph.changeData(data);
+      setTimeout(function () {
+        _graph.layout();
+        if (_this._fitLeft) {
+          var bbox = _graph.getGroup().getCanvasBBox();
+          var height = _graph.getContainer().offsetHeight;
+          _graph.moveTo(_this._paddingLeft, height / 2 - bbox.height / 2, true, {
+            easing: "easeCubic",
+            duration: 200
+          });
+        } else {
+          _graph.fitCenter();
+        }
+        setTimeout(function () {
+          isLayouting === null || isLayouting === void 0 || isLayouting(false);
+        }, 300);
+      }, 300);
+      _graph.toFullDataURL(function (img) {
+        getImage === null || getImage === void 0 || getImage(img);
+      }, "image/png", {
+        backgroundColor: "#fff",
+        padding: [30, 30, 30, 30]
+      });
+      _this._data = data;
+    });
+    // ==================== 搜索 ====================
+    _defineProperty(this, "onSearch", function (searchVal) {
+      if (!_this._graph || _this._graph.destroyed || !_this._data || searchVal === _this._searchVal) {
+        return;
+      }
+      _this._searchVal = searchVal;
+      var _graph = _this._graph;
+      var data = _this._data;
+      var parentId = findAncestorsOfNode(data, searchVal);
+      G6.Util.traverseTree(data, function (item) {
+        var itemData = item;
+        if (parentId !== null && parentId !== void 0 && parentId.includes(itemData === null || itemData === void 0 ? void 0 : itemData.id)) {
+          itemData.collapsed = false;
+        } else {
+          itemData.collapsed = true;
+        }
+      });
+      _graph.changeData(data);
+      var node = _graph.findById(searchVal);
+      if (node) {
+        var _this$_nodeEvents;
+        (_this$_nodeEvents = _this._nodeEvents) === null || _this$_nodeEvents === void 0 || _this$_nodeEvents.setNodeState(node);
+      }
+    });
+    // ==================== 展开所有节点 ====================
+    _defineProperty(this, "expandAll", function (_ref2) {
+      var allExpand = _ref2.allExpand,
+        _ref2$level = _ref2.level,
+        level = _ref2$level === void 0 ? 1 : _ref2$level,
+        _ref2$rootLevel = _ref2.rootLevel,
+        rootLevel = _ref2$rootLevel === void 0 ? 1 : _ref2$rootLevel;
+      if (!_this._graph || _this._graph.destroyed) return;
+      var _graph = _this._graph;
+      var data = _this._data;
+      G6.Util.traverseTree(data, function (item) {
+        if (allExpand) {
+          item.collapsed = false;
+        } else {
+          if (item.level === rootLevel) {
+            item.collapsed = false;
+          }
+          if (item.level > level) {
+            item.collapsed = true;
+          }
+        }
+      });
+      _graph.changeData(data);
+      if (_this._fitLeft) {
+        var bbox = _graph.getGroup().getCanvasBBox();
+        var height = _graph.getContainer().offsetHeight;
+        _graph.moveTo(_this._paddingLeft, height / 2 - bbox.height / 2, true, {
+          easing: "easeCubic",
+          duration: 200
+        });
+      } else {
+        _graph.fitCenter();
+      }
+    });
+    // ==================== 修改布局 ====================
+    _defineProperty(this, "changeLayout", function (octopus) {
+      var rootLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+      var getImage = arguments.length > 2 ? arguments[2] : undefined;
+      if (!_this._graph || _this._graph.destroyed || octopus === _this._octopus) {
+        return;
+      }
+      _this._octopus = octopus && !_this._fitLeft;
+      var _graph = _this._graph;
+      var data = _this._data;
+      _graph.changeLayout(_objectSpread({
+        direction: _this._octopus ? "H" : "LR"
+      }, _this._layout));
+      G6.Util.traverseTree(data, function (item) {
+        item.octopus = _this._octopus;
+      });
+      _graph.changeData(data);
+      var centerX = 0;
+      _graph.node(function (node) {
+        if (node.level === rootLevel) {
+          centerX = node.x;
+          node.direction = "center";
+        } else {
+          node.direction = node.x > centerX ? "right" : "left";
+        }
+        return node;
+      });
+      setTimeout(function () {
+        _graph.render();
+        if (_this._fitLeft) {
+          var bbox = _graph.getGroup().getCanvasBBox();
+          var height = _graph.getContainer().offsetHeight;
+          _graph.moveTo(_this._paddingLeft, height / 2 - bbox.height / 2, true, {
+            easing: "easeCubic",
+            duration: 200
+          });
+        } else {
+          _graph.fitCenter();
+        }
+      }, 300);
+      _graph.toFullDataURL(function (img) {
+        getImage === null || getImage === void 0 || getImage(img);
+      }, "image/png", {
+        backgroundColor: "#fff",
+        padding: [30, 30, 30, 30]
+      });
+    });
+    var _containerId = options.containerId,
+      miniMapContainerId = options.miniMapContainerId,
+      _options$fitLeft = options.fitLeft,
+      fitLeft = _options$fitLeft === void 0 ? false : _options$fitLeft,
+      _options$paddingLeft = options.paddingLeft,
+      paddingLeft = _options$paddingLeft === void 0 ? 20 : _options$paddingLeft;
+    var _container = document.getElementById(_containerId);
+    var miniMapContainer = document.getElementById(miniMapContainerId);
+    this._fitLeft = fitLeft;
+    this._paddingLeft = paddingLeft;
+    if (_container && miniMapContainer && !this._graph) {
+      if (_container.innerHTML) {
+        _container.innerHTML = "";
+      }
+      if (miniMapContainer.innerHTML) {
+        miniMapContainer.innerHTML = "";
+      }
+      this._container = _container;
+      this._miniMapContainer = miniMapContainer;
+      this.initGraph(options);
+      this._resize(_containerId);
+    }
+  }
+  _createClass(ChainGraphServices, [{
+    key: "initGraph",
+    value: function initGraph(_ref3) {
+      var _this2 = this;
+      var styles = _ref3.styles,
+        _ref3$octopus = _ref3.octopus,
+        octopus = _ref3$octopus === void 0 ? false : _ref3$octopus,
+        _ref3$showPort = _ref3.showPort,
+        showPort = _ref3$showPort === void 0 ? true : _ref3$showPort,
+        rendered = _ref3.rendered,
+        miniMapSize = _ref3.miniMapSize,
+        onClick = _ref3.onClick,
+        rootLevel = _ref3.rootLevel,
+        _ref3$hasHover = _ref3.hasHover,
+        hasHover = _ref3$hasHover === void 0 ? true : _ref3$hasHover,
+        _ref3$hasSelected = _ref3.hasSelected,
+        hasSelected = _ref3$hasSelected === void 0 ? true : _ref3$hasSelected,
+        minZoom = _ref3.minZoom,
+        addShape = _ref3.addShape;
+      if (!this._container || this._graph) return;
+      this._octopus = octopus;
+      var _ref4 = styles || {},
+        root = _ref4.root,
+        node = _ref4.node,
+        edge = _ref4.edge,
+        colors = _ref4.colors;
+      var container = this._container;
+      var width = container.offsetWidth;
+      var height = container.offsetHeight;
+      var _root = _objectSpread({}, root);
+      var _node = _objectSpread({
+        maxWidth: 260
+      }, node);
+
+      /** 注册根节点 */
+      G6.registerNode("root-node", RootNode({
+        styles: _root,
+        colors: colors,
+        rootLevel: rootLevel,
+        hasHover: hasHover,
+        hasSelected: hasSelected,
+        addShape: addShape
+      }), "rect");
+      /** 注册树节点 */
+      G6.registerNode("tree-node", TreeNode({
+        styles: _node,
+        showPort: showPort,
+        colors: colors,
+        rootLevel: rootLevel,
+        hasHover: hasHover,
+        hasSelected: hasSelected,
+        addShape: addShape
+      }), "rect");
+      /** 注册箭头边 */
+      G6.registerEdge("arrow-edge", ArrowEdge({
+        styles: edge === null || edge === void 0 ? void 0 : edge.style
+      }));
+      var _layout = {
+        type: "mindmap",
+        direction: this._octopus ? "H" : "LR",
+        nodeSep: 30,
+        workerEnabled: true,
+        getId: function getId(d) {
+          return d.id;
+        },
+        getHeight: function getHeight(d) {
+          var _textStyle$fontSize, _textStyle$fontSize2;
+          var _textStyle = d.type === "root-node" ? _objectSpread(_objectSpread({}, rootTextStyle), _root === null || _root === void 0 ? void 0 : _root.textStyle) : _objectSpread(_objectSpread({}, nodeTextStyle), _node === null || _node === void 0 ? void 0 : _node.textStyle);
+          var _getTextSize = getTextSize(d.label, _textStyle),
+            width = _getTextSize.width,
+            height = _getTextSize.height;
+          var maxWidth = d.type === "root-node" ? _root === null || _root === void 0 ? void 0 : _root.maxWidth : _node === null || _node === void 0 ? void 0 : _node.maxWidth;
+          var fontSize = d.type === "root-node" ? (_textStyle$fontSize = _textStyle.fontSize) !== null && _textStyle$fontSize !== void 0 ? _textStyle$fontSize : 20 : (_textStyle$fontSize2 = _textStyle.fontSize) !== null && _textStyle$fontSize2 !== void 0 ? _textStyle$fontSize2 : 16;
+          var _width = maxWidth ? Math.max(maxWidth, fontSize + 40) : width + 40;
+          var lines = [];
+          var currentLine = "";
+          var _labelArr = d.label.split("");
+          _labelArr === null || _labelArr === void 0 || _labelArr.forEach(function (char, idx) {
+            var _getTextSize2 = getTextSize(currentLine + char, _textStyle),
+              charWidth = _getTextSize2.width;
+            if (charWidth - 0.01 > _width - 40) {
+              lines.push(currentLine);
+              currentLine = char;
+            } else {
+              currentLine += char;
+            }
+            if (idx === _labelArr.length - 1) {
+              lines.push(currentLine);
+            }
+          });
+          var _line = lines.length || 1;
+          var _height = height * _line + 18 + (_line - 1) * 2;
+          return _height;
+        },
+        getWidth: function getWidth(d) {
+          var _textStyle$fontSize3, _textStyle$fontSize4;
+          var _textStyle = d.type === "root-node" ? _objectSpread(_objectSpread({}, rootTextStyle), _root === null || _root === void 0 ? void 0 : _root.textStyle) : _objectSpread(_objectSpread({}, nodeTextStyle), _node === null || _node === void 0 ? void 0 : _node.textStyle);
+          var _getTextSize3 = getTextSize(d.label, _textStyle),
+            width = _getTextSize3.width;
+          var maxWidth = d.type === "root-node" ? _root === null || _root === void 0 ? void 0 : _root.maxWidth : _node === null || _node === void 0 ? void 0 : _node.maxWidth;
+          var fontSize = d.type === "root-node" ? (_textStyle$fontSize3 = _textStyle.fontSize) !== null && _textStyle$fontSize3 !== void 0 ? _textStyle$fontSize3 : 20 : (_textStyle$fontSize4 = _textStyle.fontSize) !== null && _textStyle$fontSize4 !== void 0 ? _textStyle$fontSize4 : 16;
+          var calculatedWidth = maxWidth ? Math.max(maxWidth, fontSize + 40 + 100) : Math.max(260, width + 40);
+          return calculatedWidth;
+        },
+        getVGap: function getVGap() {
+          return 10;
+        },
+        getHGap: function getHGap(d) {
+          if (d.direction === "left" && d.level === (rootLevel !== null && rootLevel !== void 0 ? rootLevel : 1) + 1) {
+            return 0;
+          }
+          return 50;
+        }
+      };
+      this._layout = _layout;
+      var graph = new G6.TreeGraph({
+        container: container,
+        width: width,
+        height: height,
+        minZoom: minZoom,
+        animate: true,
+        animateCfg: {
+          duration: 200,
+          easing: "linearEasing"
+        },
+        modes: {
+          default: ["zoom-canvas", {
+            type: "drag-canvas",
+            scalableRange: -3
+          }],
+          collapseExpand: [{
+            type: "collapse-expand",
+            onChange: function onChange(item, collapsed) {
+              graph.setItemState(item, "collapse", !collapsed);
+              if (_this2._fitLeft) {
+                var bbox = item.get("group").getCanvasBBox();
+                var _height2 = graph.getContainer().offsetHeight;
+                graph.translate(0, _height2 / 2 - (bbox.minY + bbox.height / 2), true, {
+                  easing: "easeCubic",
+                  duration: 200
+                });
+              } else {
+                graph.focusItem(item, true, {
+                  easing: "easeCubic",
+                  duration: 200
+                });
+              }
+              return true;
+            }
+          }]
+        },
+        defaultNode: {
+          type: "tree-node",
+          anchorPoints: [[0, 0.5], [1, 0.5]]
+        },
+        defaultEdge: _objectSpread({
+          type: "cubic-horizontal",
+          style: _objectSpread({}, edgeStyle)
+        }, styles === null || styles === void 0 ? void 0 : styles.edge),
+        layout: _layout
+      });
+      this._nodeEvents = new NodeEvents({
+        graph: graph,
+        onClick: onClick
+      });
+      this._minimap = new G6.Minimap({
+        container: this._miniMapContainer,
+        size: miniMapSize
+      });
+      this._graph = graph;
+      rendered === null || rendered === void 0 || rendered(this);
+    }
+  }]);
+  return ChainGraphServices;
+}();
+export { ChainGraphServices as default };

package/es/components/ChainGraph/_components/ExpandButtons/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ExpandButtonsProps {
+    onExpand: () => void;
+    onCollapse: () => void;
+    expandClassName?: string;
+}
+export declare const ExpandButtons: React.FC<ExpandButtonsProps>;
+export {};

package/es/components/ChainGraph/_components/ExpandButtons/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Button from "../../../Button";
+import classNames from "classnames";
+import styles from "./index.module.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var ExpandButtons = function ExpandButtons(_ref) {
+  var onExpand = _ref.onExpand,
+    onCollapse = _ref.onCollapse,
+    expandClassName = _ref.expandClassName;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(styles.expandBtn, expandClassName),
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: onExpand,
+      className: styles.expandBtnItem,
+      children: "\u4E00\u952E\u5C55\u5F00"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: onCollapse,
+      className: styles.expandBtnItem,
+      children: "\u4E00\u952E\u6536\u8D77"
+    })]
+  });
+};

package/es/components/ChainGraph/_components/ExpandButtons/index.module.less

@@ -0,0 +1,18 @@
+.expandBtn {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+
+  .expandBtnItem {
+    width: 100px;
+    height: 32px;
+
+    border-radius: 2px;
+  }
+}
+

package/es/components/ChainGraph/_components/SearchSelect/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface SearchSelectProps {
+    onChange: (value: string) => void;
+}
+export declare const SearchSelect: React.FC<SearchSelectProps>;
+export {};

package/es/components/ChainGraph/_components/SearchSelect/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Select from "../../../Select";
+import styles from "./index.module.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var SearchSelect = function SearchSelect(_ref) {
+  var onChange = _ref.onChange;
+  return /*#__PURE__*/_jsx(Select, {
+    className: styles.select,
+    showSearch: true,
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u8FDB\u884C\u641C\u7D22",
+    optionFilterProp: "children",
+    filterOption: function filterOption(input, option) {
+      var _option$label;
+      return !!(option !== null && option !== void 0 && option.label && option !== null && option !== void 0 && (_option$label = option.label) !== null && _option$label !== void 0 && _option$label.toString().toLowerCase().includes(input.toLowerCase()));
+    },
+    onChange: onChange
+  });
+};

package/es/components/ChainGraph/_components/SearchSelect/index.module.less

@@ -0,0 +1,11 @@
+.select {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+
+  width: 240px;
+  height: 32px;
+
+  border-radius: 2px;
+}
+

package/es/components/ChainGraph/_hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { useChainGraphInit } from "./useChainGraphInit";
+export { useChainGraphData } from "./useChainGraphData";
+export { useChainGraphSearch } from "./useChainGraphSearch";
+export { useChainGraphExpand } from "./useChainGraphExpand";
+export { useChainGraphLayout } from "./useChainGraphLayout";
+export { useChainGraphMiniMap } from "./useChainGraphMiniMap";
+export { useChainGraphResize } from "./useChainGraphResize";

package/es/components/ChainGraph/_hooks/index.js

@@ -0,0 +1,7 @@
+export { useChainGraphInit } from "./useChainGraphInit";
+export { useChainGraphData } from "./useChainGraphData";
+export { useChainGraphSearch } from "./useChainGraphSearch";
+export { useChainGraphExpand } from "./useChainGraphExpand";
+export { useChainGraphLayout } from "./useChainGraphLayout";
+export { useChainGraphMiniMap } from "./useChainGraphMiniMap";
+export { useChainGraphResize } from "./useChainGraphResize";

package/es/components/ChainGraph/_hooks/useChainGraphData.d.ts

@@ -0,0 +1,15 @@
+import ChainGraphServices from "../ChainGraphServices";
+import { TreeGraphData } from "..";
+interface UseChainGraphDataProps {
+    graph: ChainGraphServices | null;
+    data?: TreeGraphData;
+    level?: number;
+    rootLevel?: number;
+    getImage?: (img: string) => void;
+    labelRender?: (label: TreeGraphData) => string;
+    onLayoutingChange?: (isLayouting: boolean) => void;
+}
+export declare function useChainGraphData(props: UseChainGraphDataProps): {
+    isLayouting: boolean;
+};
+export {};