@hsu-react/ui 0.0.1

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

@@ -0,0 +1,472 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "getTextSize", {
+  enumerable: true,
+  get: function () {
+    return _utils.getTextSize;
+  }
+});
+var _g = _interopRequireDefault(require("@antv/g6"));
+var _TreeNode = _interopRequireDefault(require("./TreeNode"));
+var _RootNode = _interopRequireDefault(require("./RootNode"));
+var _ArrowEdge = _interopRequireDefault(require("./Edges/ArrowEdge"));
+var _hsuUtils = require("hsu-utils");
+var _NodeEvents = _interopRequireDefault(require("./NodeEvents"));
+var _utils = require("../_utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// 重新导出 getTextSize 以保持向后兼容
+
+// ==================== 链图服务 ====================
+
+class ChainGraphServices {
+  _graph = null;
+  _container = null;
+  _miniMapContainer = null;
+  _minimap = null;
+  _data = null;
+  _searchVal = null;
+  _nodeEvents = null;
+  _octopus = false;
+  _fitLeft = false;
+  _paddingLeft = 0;
+  _layout = {};
+  constructor(options) {
+    const {
+      containerId,
+      miniMapContainerId,
+      fitLeft = false,
+      paddingLeft = 20
+    } = options;
+    const container = document.getElementById(containerId);
+    const 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);
+    }
+  }
+  initGraph({
+    styles,
+    octopus = false,
+    showPort = true,
+    rendered,
+    miniMapSize,
+    onClick,
+    rootLevel,
+    hasHover = true,
+    hasSelected = true,
+    minZoom,
+    addShape
+  }) {
+    if (!this._container || this._graph) return;
+    this._octopus = octopus;
+    const {
+      root,
+      node,
+      edge,
+      colors
+    } = styles || {};
+    const container = this._container;
+    const width = container.offsetWidth;
+    const height = container.offsetHeight;
+    const _root = {
+      ...root
+    };
+    const _node = {
+      maxWidth: 260,
+      ...node
+    };
+
+    /** 注册根节点 */
+    _g.default.registerNode("root-node", (0, _RootNode.default)({
+      styles: _root,
+      colors,
+      rootLevel,
+      hasHover,
+      hasSelected,
+      addShape
+    }), "rect");
+    /** 注册树节点 */
+    _g.default.registerNode("tree-node", (0, _TreeNode.default)({
+      styles: _node,
+      showPort,
+      colors,
+      rootLevel,
+      hasHover,
+      hasSelected,
+      addShape
+    }), "rect");
+    /** 注册箭头边 */
+    _g.default.registerEdge("arrow-edge", (0, _ArrowEdge.default)({
+      styles: edge?.style
+    }));
+    const _layout = {
+      type: "mindmap",
+      direction: this._octopus ? "H" : "LR",
+      nodeSep: 30,
+      workerEnabled: true,
+      getId: d => {
+        return d.id;
+      },
+      getHeight: d => {
+        const _textStyle = d.type === "root-node" ? {
+          ..._utils.rootTextStyle,
+          ..._root?.textStyle
+        } : {
+          ..._utils.nodeTextStyle,
+          ..._node?.textStyle
+        };
+        const {
+          width,
+          height
+        } = (0, _utils.getTextSize)(d.label, _textStyle);
+        const maxWidth = d.type === "root-node" ? _root?.maxWidth : _node?.maxWidth;
+        const fontSize = d.type === "root-node" ? _textStyle.fontSize ?? 20 : _textStyle.fontSize ?? 16;
+        const _width = maxWidth ? Math.max(maxWidth, fontSize + 40) : width + 40;
+        const lines = [];
+        let currentLine = "";
+        const _labelArr = d.label.split("");
+        _labelArr?.forEach((char, idx) => {
+          const {
+            width: charWidth
+          } = (0, _utils.getTextSize)(currentLine + char, _textStyle);
+          if (charWidth - 0.01 > _width - 40) {
+            lines.push(currentLine);
+            currentLine = char;
+          } else {
+            currentLine += char;
+          }
+          if (idx === _labelArr.length - 1) {
+            lines.push(currentLine);
+          }
+        });
+        const _line = lines.length || 1;
+        const _height = height * _line + 18 + (_line - 1) * 2;
+        return _height;
+      },
+      getWidth: d => {
+        const _textStyle = d.type === "root-node" ? {
+          ..._utils.rootTextStyle,
+          ..._root?.textStyle
+        } : {
+          ..._utils.nodeTextStyle,
+          ..._node?.textStyle
+        };
+        const {
+          width
+        } = (0, _utils.getTextSize)(d.label, _textStyle);
+        const maxWidth = d.type === "root-node" ? _root?.maxWidth : _node?.maxWidth;
+        const fontSize = d.type === "root-node" ? _textStyle.fontSize ?? 20 : _textStyle.fontSize ?? 16;
+        const calculatedWidth = maxWidth ? Math.max(maxWidth, fontSize + 40 + 100) : Math.max(260, width + 40);
+        return calculatedWidth;
+      },
+      getVGap: () => 10,
+      getHGap: d => {
+        if (d.direction === "left" && d.level === (rootLevel ?? 1) + 1) {
+          return 0;
+        }
+        return 50;
+      }
+    };
+    this._layout = _layout;
+    const graph = new _g.default.TreeGraph({
+      container,
+      width,
+      height,
+      minZoom,
+      animate: true,
+      animateCfg: {
+        duration: 200,
+        easing: "linearEasing"
+      },
+      modes: {
+        default: ["zoom-canvas", {
+          type: "drag-canvas",
+          scalableRange: -3
+        }],
+        collapseExpand: [{
+          type: "collapse-expand",
+          onChange: (item, collapsed) => {
+            graph.setItemState(item, "collapse", !collapsed);
+            if (this._fitLeft) {
+              const bbox = item.get("group").getCanvasBBox();
+              const height = graph.getContainer().offsetHeight;
+              graph.translate(0, height / 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: {
+        type: "cubic-horizontal",
+        style: {
+          ..._utils.edgeStyle
+        },
+        ...styles?.edge
+      },
+      layout: _layout
+    });
+    this._nodeEvents = new _NodeEvents.default({
+      graph,
+      onClick
+    });
+    this._minimap = new _g.default.Minimap({
+      container: this._miniMapContainer,
+      size: miniMapSize
+    });
+    this._graph = graph;
+    rendered?.(this);
+  }
+
+  // ==================== 调整大小 ====================
+  _resize = containerId => {
+    const graph = this._graph;
+    const container = document.getElementById(containerId);
+    if (typeof window !== "undefined") {
+      window.onresize = () => {
+        if (!graph || graph.get("destroyed")) return;
+        if (!container || !container.clientWidth || !container.clientHeight) return;
+        graph.changeSize(container.clientWidth, container.clientHeight);
+        if (this._fitLeft) {
+          const bbox = graph.getGroup().getCanvasBBox();
+          const height = graph.getContainer().offsetHeight;
+          graph.moveTo(this._paddingLeft, height / 2 - bbox.height / 2, true, {
+            easing: "easeCubic",
+            duration: 200
+          });
+        } else {
+          graph.fitCenter();
+        }
+      };
+    }
+  };
+  resize = containerId => {
+    const graph = this._graph;
+    const container = document.getElementById(containerId);
+    if (graph && container) {
+      graph.changeSize(container.clientWidth, container.clientHeight);
+      if (this._fitLeft) {
+        const bbox = graph.getGroup().getCanvasBBox();
+        const height = graph.getContainer().offsetHeight;
+        graph.moveTo(this._paddingLeft, height / 2 - bbox.height / 2, true, {
+          easing: "easeCubic",
+          duration: 200
+        });
+      } else {
+        graph.fitCenter();
+      }
+    }
+  };
+
+  // ==================== 设置MiniMap ====================
+  setMiniMap = showMiniMap => {
+    if (!this._minimap) return;
+    const graph = this._graph;
+    if (showMiniMap) {
+      graph?.addPlugin(this._minimap);
+    } else {
+      graph?.removePlugin(this._minimap);
+    }
+  };
+
+  // ==================== 设置数据 ====================
+  setData = ({
+    data,
+    level = 1,
+    rootLevel = 1,
+    getImage,
+    isLayouting,
+    labelRender
+  }) => {
+    if (!this._graph || this._graph.destroyed) return;
+    const _graph = this._graph;
+    if (!data) {
+      _graph.clear();
+      return;
+    }
+    isLayouting?.(true);
+    _g.default.Util.traverseTree(data, item => {
+      item.origin = item?.origin || (0, _hsuUtils.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;
+    });
+    let centerX = 0;
+    _graph.node(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(() => {
+      _graph.layout();
+      if (this._fitLeft) {
+        const bbox = _graph.getGroup().getCanvasBBox();
+        const height = _graph.getContainer().offsetHeight;
+        _graph.moveTo(this._paddingLeft, height / 2 - bbox.height / 2, true, {
+          easing: "easeCubic",
+          duration: 200
+        });
+      } else {
+        _graph.fitCenter();
+      }
+      setTimeout(() => {
+        isLayouting?.(false);
+      }, 300);
+    }, 300);
+    _graph.toFullDataURL(img => {
+      getImage?.(img);
+    }, "image/png", {
+      backgroundColor: "#fff",
+      padding: [30, 30, 30, 30]
+    });
+    this._data = data;
+  };
+
+  // ==================== 搜索 ====================
+  onSearch = searchVal => {
+    if (!this._graph || this._graph.destroyed || !this._data || searchVal === this._searchVal) {
+      return;
+    }
+    this._searchVal = searchVal;
+    const _graph = this._graph;
+    const data = this._data;
+    const parentId = (0, _utils.findAncestorsOfNode)(data, searchVal);
+    _g.default.Util.traverseTree(data, item => {
+      const itemData = item;
+      if (parentId?.includes(itemData?.id)) {
+        itemData.collapsed = false;
+      } else {
+        itemData.collapsed = true;
+      }
+    });
+    _graph.changeData(data);
+    const node = _graph.findById(searchVal);
+    if (node) {
+      this._nodeEvents?.setNodeState(node);
+    }
+  };
+
+  // ==================== 展开所有节点 ====================
+  expandAll = ({
+    allExpand,
+    level = 1,
+    rootLevel = 1
+  }) => {
+    if (!this._graph || this._graph.destroyed) return;
+    const _graph = this._graph;
+    const data = this._data;
+    _g.default.Util.traverseTree(data, 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) {
+      const bbox = _graph.getGroup().getCanvasBBox();
+      const height = _graph.getContainer().offsetHeight;
+      _graph.moveTo(this._paddingLeft, height / 2 - bbox.height / 2, true, {
+        easing: "easeCubic",
+        duration: 200
+      });
+    } else {
+      _graph.fitCenter();
+    }
+  };
+
+  // ==================== 修改布局 ====================
+  changeLayout = (octopus, rootLevel = 1, getImage) => {
+    if (!this._graph || this._graph.destroyed || octopus === this._octopus) {
+      return;
+    }
+    this._octopus = octopus && !this._fitLeft;
+    const _graph = this._graph;
+    const data = this._data;
+    _graph.changeLayout({
+      direction: this._octopus ? "H" : "LR",
+      ...this._layout
+    });
+    _g.default.Util.traverseTree(data, item => {
+      item.octopus = this._octopus;
+    });
+    _graph.changeData(data);
+    let centerX = 0;
+    _graph.node(node => {
+      if (node.level === rootLevel) {
+        centerX = node.x;
+        node.direction = "center";
+      } else {
+        node.direction = node.x > centerX ? "right" : "left";
+      }
+      return node;
+    });
+    setTimeout(() => {
+      _graph.render();
+      if (this._fitLeft) {
+        const bbox = _graph.getGroup().getCanvasBBox();
+        const height = _graph.getContainer().offsetHeight;
+        _graph.moveTo(this._paddingLeft, height / 2 - bbox.height / 2, true, {
+          easing: "easeCubic",
+          duration: 200
+        });
+      } else {
+        _graph.fitCenter();
+      }
+    }, 300);
+    _graph.toFullDataURL(img => {
+      getImage?.(img);
+    }, "image/png", {
+      backgroundColor: "#fff",
+      padding: [30, 30, 30, 30]
+    });
+  };
+}
+exports.default = ChainGraphServices;

package/lib/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/lib/components/ChainGraph/_components/ExpandButtons/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandButtons = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("../../../Button"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ExpandButtons = ({
+  onExpand,
+  onCollapse,
+  expandClassName
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_indexModule.default.expandBtn, expandClassName),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: onExpand,
+      className: _indexModule.default.expandBtnItem,
+      children: "\u4E00\u952E\u5C55\u5F00"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: onCollapse,
+      className: _indexModule.default.expandBtnItem,
+      children: "\u4E00\u952E\u6536\u8D77"
+    })]
+  });
+};
+exports.ExpandButtons = ExpandButtons;

package/lib/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/lib/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/lib/components/ChainGraph/_components/SearchSelect/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchSelect = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Select = _interopRequireDefault(require("../../../Select"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SearchSelect = ({
+  onChange
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+    className: _indexModule.default.select,
+    showSearch: true,
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD\u8FDB\u884C\u641C\u7D22",
+    optionFilterProp: "children",
+    filterOption: (input, option) => !!(option?.label && option?.label?.toString().toLowerCase().includes(input.toLowerCase())),
+    onChange: onChange
+  });
+};
+exports.SearchSelect = SearchSelect;

package/lib/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/lib/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/lib/components/ChainGraph/_hooks/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useChainGraphData", {
+  enumerable: true,
+  get: function () {
+    return _useChainGraphData.useChainGraphData;
+  }
+});
+Object.defineProperty(exports, "useChainGraphExpand", {
+  enumerable: true,
+  get: function () {
+    return _useChainGraphExpand.useChainGraphExpand;
+  }
+});
+Object.defineProperty(exports, "useChainGraphInit", {
+  enumerable: true,
+  get: function () {
+    return _useChainGraphInit.useChainGraphInit;
+  }
+});
+Object.defineProperty(exports, "useChainGraphLayout", {
+  enumerable: true,
+  get: function () {
+    return _useChainGraphLayout.useChainGraphLayout;
+  }
+});
+Object.defineProperty(exports, "useChainGraphMiniMap", {
+  enumerable: true,
+  get: function () {
+    return _useChainGraphMiniMap.useChainGraphMiniMap;
+  }
+});
+Object.defineProperty(exports, "useChainGraphResize", {
+  enumerable: true,
+  get: function () {
+    return _useChainGraphResize.useChainGraphResize;
+  }
+});
+Object.defineProperty(exports, "useChainGraphSearch", {
+  enumerable: true,
+  get: function () {
+    return _useChainGraphSearch.useChainGraphSearch;
+  }
+});
+var _useChainGraphInit = require("./useChainGraphInit");
+var _useChainGraphData = require("./useChainGraphData");
+var _useChainGraphSearch = require("./useChainGraphSearch");
+var _useChainGraphExpand = require("./useChainGraphExpand");
+var _useChainGraphLayout = require("./useChainGraphLayout");
+var _useChainGraphMiniMap = require("./useChainGraphMiniMap");
+var _useChainGraphResize = require("./useChainGraphResize");

package/lib/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 {};

package/lib/components/ChainGraph/_hooks/useChainGraphData.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChainGraphData = useChainGraphData;
+var _react = require("react");
+var _hsuUtils = require("hsu-utils");
+function useChainGraphData(props) {
+  const {
+    graph,
+    data,
+    level,
+    rootLevel,
+    getImage,
+    labelRender,
+    onLayoutingChange
+  } = props;
+  const [lastData, setLastData] = (0, _react.useState)(undefined);
+  const [isLayouting, setIsLayouting] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => {
+    if (graph && !_hsuUtils.Equal.ObjEqual(lastData, data)) {
+      setLastData(data);
+      graph.setData({
+        data,
+        level,
+        rootLevel,
+        getImage,
+        isLayouting: value => {
+          setIsLayouting(value);
+          onLayoutingChange?.(value);
+        },
+        labelRender
+      });
+    }
+  }, [graph, data, level, rootLevel, getImage, labelRender, onLayoutingChange, lastData]);
+  return {
+    isLayouting
+  };
+}