@hsu-react/ui 0.0.1

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

@@ -0,0 +1,44 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState } from "react";
+import { Equal } from "hsu-utils";
+export function useChainGraphData(props) {
+  var graph = props.graph,
+    data = props.data,
+    level = props.level,
+    rootLevel = props.rootLevel,
+    getImage = props.getImage,
+    labelRender = props.labelRender,
+    onLayoutingChange = props.onLayoutingChange;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    lastData = _useState2[0],
+    setLastData = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLayouting = _useState4[0],
+    setIsLayouting = _useState4[1];
+  useEffect(function () {
+    if (graph && !Equal.ObjEqual(lastData, data)) {
+      setLastData(data);
+      graph.setData({
+        data: data,
+        level: level,
+        rootLevel: rootLevel,
+        getImage: getImage,
+        isLayouting: function isLayouting(value) {
+          setIsLayouting(value);
+          onLayoutingChange === null || onLayoutingChange === void 0 || onLayoutingChange(value);
+        },
+        labelRender: labelRender
+      });
+    }
+  }, [graph, data, level, rootLevel, getImage, labelRender, onLayoutingChange, lastData]);
+  return {
+    isLayouting: isLayouting
+  };
+}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import ChainGraphServices from "../ChainGraphServices";
+interface UseChainGraphExpandProps {
+    graph: ChainGraphServices | null;
+    level?: number;
+    rootLevel?: number;
+}
+export declare function useChainGraphExpand(props: UseChainGraphExpandProps): {
+    allExpand: boolean | null;
+    setAllExpand: import("react").Dispatch<import("react").SetStateAction<boolean | null>>;
+};
+export {};

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

@@ -0,0 +1,32 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState } from "react";
+export function useChainGraphExpand(props) {
+  var graph = props.graph,
+    level = props.level,
+    rootLevel = props.rootLevel;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    allExpand = _useState2[0],
+    setAllExpand = _useState2[1];
+  useEffect(function () {
+    if (graph && allExpand !== null) {
+      graph.expandAll({
+        allExpand: allExpand,
+        level: level,
+        rootLevel: rootLevel
+      });
+      setTimeout(function () {
+        setAllExpand(null);
+      }, 100);
+    }
+  }, [graph, level, rootLevel, allExpand]);
+  return {
+    allExpand: allExpand,
+    setAllExpand: setAllExpand
+  };
+}

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

@@ -0,0 +1,23 @@
+import ChainGraphServices, { ChainGraphServicesStyles } from "../ChainGraphServices";
+import { TreeGraphData } from "..";
+import { IGroup, ModelConfig } from "@antv/g6";
+interface UseChainGraphInitProps {
+    containerId: string;
+    miniMapContainerId: string;
+    octopus?: boolean;
+    onClick?: (node?: TreeGraphData) => void;
+    styles?: ChainGraphServicesStyles;
+    showPort?: boolean;
+    miniMapSize?: [number, number];
+    fitLeft?: boolean;
+    paddingLeft?: number;
+    rootLevel?: number;
+    hasHover?: boolean;
+    hasSelected?: boolean;
+    minZoom?: number;
+    addShape?: (group: IGroup, cfg: ModelConfig & {
+        origin?: Record<string, unknown>;
+    }) => void;
+}
+export declare function useChainGraphInit(props: UseChainGraphInitProps): ChainGraphServices | null;
+export {};

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

@@ -0,0 +1,53 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from "react";
+import { useDebounceEffect } from "ahooks";
+import ChainGraphServices from "../ChainGraphServices";
+export function useChainGraphInit(props) {
+  var containerId = props.containerId,
+    miniMapContainerId = props.miniMapContainerId,
+    octopus = props.octopus,
+    onClick = props.onClick,
+    styles = props.styles,
+    showPort = props.showPort,
+    miniMapSize = props.miniMapSize,
+    fitLeft = props.fitLeft,
+    paddingLeft = props.paddingLeft,
+    rootLevel = props.rootLevel,
+    hasHover = props.hasHover,
+    hasSelected = props.hasSelected,
+    minZoom = props.minZoom,
+    addShape = props.addShape;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    graph = _useState2[0],
+    setGraph = _useState2[1];
+  useDebounceEffect(function () {
+    if (!graph) {
+      new ChainGraphServices({
+        containerId: containerId,
+        miniMapContainerId: miniMapContainerId,
+        octopus: octopus,
+        onClick: onClick,
+        styles: styles,
+        showPort: showPort,
+        miniMapSize: miniMapSize,
+        fitLeft: fitLeft,
+        paddingLeft: paddingLeft,
+        rendered: function rendered(graph) {
+          setGraph(graph);
+        },
+        rootLevel: rootLevel,
+        hasHover: hasHover,
+        hasSelected: hasSelected,
+        minZoom: minZoom,
+        addShape: addShape
+      });
+    }
+  }, [containerId, miniMapContainerId, octopus, onClick, styles, showPort, miniMapSize, fitLeft, paddingLeft, rootLevel, hasHover, hasSelected, minZoom, addShape, graph]);
+  return graph;
+}

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

@@ -0,0 +1,9 @@
+import ChainGraphServices from "../ChainGraphServices";
+interface UseChainGraphLayoutProps {
+    graph: ChainGraphServices | null;
+    octopus?: boolean;
+    rootLevel?: number;
+    getImage?: (img: string) => void;
+}
+export declare function useChainGraphLayout(props: UseChainGraphLayoutProps): void;
+export {};

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

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+export function useChainGraphLayout(props) {
+  var graph = props.graph,
+    octopus = props.octopus,
+    rootLevel = props.rootLevel,
+    getImage = props.getImage;
+  useEffect(function () {
+    if (graph && octopus !== undefined) {
+      graph.changeLayout(octopus, rootLevel, getImage);
+    }
+  }, [graph, octopus, rootLevel, getImage]);
+}

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

@@ -0,0 +1,7 @@
+import ChainGraphServices from "../ChainGraphServices";
+interface UseChainGraphMiniMapProps {
+    graph: ChainGraphServices | null;
+    showMiniMap?: boolean;
+}
+export declare function useChainGraphMiniMap(props: UseChainGraphMiniMapProps): void;
+export {};

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

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+export function useChainGraphMiniMap(props) {
+  var graph = props.graph,
+    showMiniMap = props.showMiniMap;
+  useEffect(function () {
+    if (graph) {
+      graph.setMiniMap(showMiniMap !== null && showMiniMap !== void 0 ? showMiniMap : true);
+    }
+  }, [graph, showMiniMap]);
+}

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

@@ -0,0 +1,9 @@
+import ChainGraphServices from "../ChainGraphServices";
+interface UseChainGraphResizeProps {
+    graph: ChainGraphServices | null;
+    containerId: string;
+    resize?: boolean;
+    offset?: [number, number];
+}
+export declare function useChainGraphResize(props: UseChainGraphResizeProps): void;
+export {};

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

@@ -0,0 +1,29 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect, useState } from "react";
+import { Equal } from "hsu-utils";
+export function useChainGraphResize(props) {
+  var graph = props.graph,
+    containerId = props.containerId,
+    resize = props.resize,
+    offset = props.offset;
+  var _useState = useState([0, 0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    lastOffset = _useState2[0],
+    setLastOffset = _useState2[1];
+  useEffect(function () {
+    if (resize && graph) {
+      graph === null || graph === void 0 || graph.resize(containerId);
+    }
+  }, [graph, resize, containerId]);
+  useEffect(function () {
+    if (!Equal.ObjEqual(offset, lastOffset) && graph && offset) {
+      setLastOffset(offset);
+      graph.resize(containerId);
+    }
+  }, [offset, lastOffset, graph, containerId]);
+}

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

@@ -0,0 +1,7 @@
+import ChainGraphServices from "../ChainGraphServices";
+interface UseChainGraphSearchProps {
+    graph: ChainGraphServices | null;
+    searchVal: string;
+}
+export declare function useChainGraphSearch(props: UseChainGraphSearchProps): void;
+export {};

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

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+export function useChainGraphSearch(props) {
+  var graph = props.graph,
+    searchVal = props.searchVal;
+  useEffect(function () {
+    if (graph && searchVal) {
+      graph.onSearch(searchVal);
+    }
+  }, [graph, searchVal]);
+}

package/es/components/ChainGraph/_utils/findAncestorsOfNode.d.ts

@@ -0,0 +1,9 @@
+import { TreeGraphData } from "..";
+/**
+ * 树结构找节点所有父节点
+ * @param tree 树数据
+ * @param targetNodeId 目标节点ID
+ * @param childrenKey 子节点键名，默认为 "children"
+ * @returns 祖先节点ID数组
+ */
+export declare function findAncestorsOfNode(tree: TreeGraphData, targetNodeId: string, childrenKey?: string): string[];

package/es/components/ChainGraph/_utils/findAncestorsOfNode.js

@@ -0,0 +1,38 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * 树结构找节点所有父节点
+ * @param tree 树数据
+ * @param targetNodeId 目标节点ID
+ * @param childrenKey 子节点键名，默认为 "children"
+ * @returns 祖先节点ID数组
+ */
+export function findAncestorsOfNode(tree, targetNodeId) {
+  var childrenKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "children";
+  var ancestors = [];
+  function traverse(node) {
+    if (node.id === targetNodeId) {
+      // 找到目标节点
+      ancestors = [].concat(_toConsumableArray(ancestors), [node.id]); // 将目标节点添加到祖先列表中（可选，取决于是否需要包含目标节点自身）
+      return true; // 停止遍历
+    }
+
+    // 递归遍历子节点
+    if (node[childrenKey] && node[childrenKey].length) {
+      var _node$childrenKey;
+      (_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 || _node$childrenKey.forEach(function (child) {
+        if (traverse(child)) {
+          ancestors.push(node.id); // 如果子节点中找到了目标节点，将当前节点添加到祖先列表
+          return true; // 停止遍历
+        }
+      });
+    }
+    return false; // 未找到目标节点
+  }
+  traverse(tree);
+  return ancestors;
+}

package/es/components/ChainGraph/_utils/getTextSize.d.ts

@@ -0,0 +1,11 @@
+import { ShapeStyle } from "@antv/g6";
+/**
+ * 获取文字大小
+ * @param text 文本内容
+ * @param textStyle 文本样式
+ * @returns 文本的宽度和高度
+ */
+export declare const getTextSize: (text: string, textStyle: ShapeStyle) => {
+    width: number;
+    height: number;
+};

package/es/components/ChainGraph/_utils/getTextSize.js

@@ -0,0 +1,26 @@
+import { get_string_size } from "hsu-utils";
+
+/**
+ * 获取文字大小
+ * @param text 文本内容
+ * @param textStyle 文本样式
+ * @returns 文本的宽度和高度
+ */
+export var getTextSize = function getTextSize(text, textStyle) {
+  var _textStyle$fontWeight;
+  if (!text) return {
+    width: 0,
+    height: 0
+  };
+  var _get_string_size = get_string_size(text, {
+      size: Number(textStyle.fontSize),
+      weight: (_textStyle$fontWeight = textStyle.fontWeight) === null || _textStyle$fontWeight === void 0 ? void 0 : _textStyle$fontWeight.toString(),
+      family: textStyle.fontFamily
+    }),
+    width = _get_string_size.width,
+    height = _get_string_size.height;
+  return {
+    width: width,
+    height: height
+  };
+};

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

@@ -0,0 +1,3 @@
+export { findAncestorsOfNode } from "./findAncestorsOfNode";
+export { getTextSize } from "./getTextSize";
+export { rootTextStyle, nodeTextStyle, edgeStyle } from "./styles";

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

@@ -0,0 +1,3 @@
+export { findAncestorsOfNode } from "./findAncestorsOfNode";
+export { getTextSize } from "./getTextSize";
+export { rootTextStyle, nodeTextStyle, edgeStyle } from "./styles";

package/es/components/ChainGraph/_utils/styles.d.ts

@@ -0,0 +1,13 @@
+import { ShapeStyle } from "@antv/g6";
+/**
+ * 根节点文字样式
+ */
+export declare const rootTextStyle: ShapeStyle;
+/**
+ * 节点文字样式
+ */
+export declare const nodeTextStyle: ShapeStyle;
+/**
+ * 边样式
+ */
+export declare const edgeStyle: ShapeStyle;

package/es/components/ChainGraph/_utils/styles.js

@@ -0,0 +1,21 @@
+/**
+ * 根节点文字样式
+ */
+export var rootTextStyle = {
+  fontSize: 20,
+  fontWeight: "bold"
+};
+
+/**
+ * 节点文字样式
+ */
+export var nodeTextStyle = {
+  fontSize: 16
+};
+
+/**
+ * 边样式
+ */
+export var edgeStyle = {
+  stroke: "#4096ff"
+};

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { TreeGraphData as G6TreeGraphData, IGroup, ModelConfig } from "@antv/g6";
+import { ChainGraphServicesStyles } from "./ChainGraphServices";
+export interface TreeGraphData extends G6TreeGraphData {
+    origin?: Record<string, unknown>;
+}
+export interface ChainGraphProps {
+    data?: TreeGraphData;
+    octopus?: boolean;
+    level?: number;
+    rootLevel?: number;
+    onClick?: (node?: TreeGraphData) => void;
+    styles?: ChainGraphServicesStyles;
+    showPort?: boolean;
+    showMiniMap?: boolean;
+    miniMapSize?: [number, number];
+    getImage?: (img: string) => void;
+    className?: string;
+    showSearch?: boolean;
+    showExpandBtn?: boolean;
+    expandClassName?: string;
+    resize?: boolean;
+    offset?: [number, number];
+    fitLeft?: boolean;
+    paddingLeft?: number;
+    loading?: boolean;
+    hasHover?: boolean;
+    hasSelected?: boolean;
+    minZoom?: number;
+    wrapperClassName?: string;
+    labelRender?: (label: TreeGraphData) => string;
+    addShape?: (group: IGroup, cfg: ModelConfig & {
+        origin?: Record<string, unknown>;
+    }) => void;
+}
+declare const ChainGraph: React.FC<ChainGraphProps>;
+export default ChainGraph;

package/es/components/ChainGraph/index.js

@@ -0,0 +1,172 @@
+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 _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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useMemo, useState } from "react";
+import styles from "./index.module.less";
+import { observer } from "mobx-react-lite";
+import { generateRandomStr } from "hsu-utils";
+import { Spin } from "antd";
+import classNames from "classnames";
+import { useChainGraphInit, useChainGraphData, useChainGraphSearch, useChainGraphExpand, useChainGraphLayout, useChainGraphMiniMap, useChainGraphResize } from "./_hooks";
+import { ExpandButtons } from "./_components/ExpandButtons";
+import { SearchSelect } from "./_components/SearchSelect";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ChainGraph = observer(function (props) {
+  var _data$children, _data$children2;
+  var data = props.data,
+    octopus = props.octopus,
+    _props$level = props.level,
+    level = _props$level === void 0 ? 1 : _props$level,
+    _props$rootLevel = props.rootLevel,
+    rootLevel = _props$rootLevel === void 0 ? 1 : _props$rootLevel,
+    onClick = props.onClick,
+    ChainGraphServicesStyles = props.styles,
+    _props$showPort = props.showPort,
+    showPort = _props$showPort === void 0 ? true : _props$showPort,
+    _props$showMiniMap = props.showMiniMap,
+    showMiniMap = _props$showMiniMap === void 0 ? true : _props$showMiniMap,
+    _props$miniMapSize = props.miniMapSize,
+    miniMapSize = _props$miniMapSize === void 0 ? [200, 150] : _props$miniMapSize,
+    getImage = props.getImage,
+    className = props.className,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? true : _props$showSearch,
+    _props$showExpandBtn = props.showExpandBtn,
+    showExpandBtn = _props$showExpandBtn === void 0 ? true : _props$showExpandBtn,
+    expandClassName = props.expandClassName,
+    _props$resize = props.resize,
+    resize = _props$resize === void 0 ? true : _props$resize,
+    _props$offset = props.offset,
+    offset = _props$offset === void 0 ? [0, 0] : _props$offset,
+    _props$fitLeft = props.fitLeft,
+    fitLeft = _props$fitLeft === void 0 ? false : _props$fitLeft,
+    _props$paddingLeft = props.paddingLeft,
+    paddingLeft = _props$paddingLeft === void 0 ? 20 : _props$paddingLeft,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    _props$hasHover = props.hasHover,
+    hasHover = _props$hasHover === void 0 ? true : _props$hasHover,
+    _props$hasSelected = props.hasSelected,
+    hasSelected = _props$hasSelected === void 0 ? true : _props$hasSelected,
+    minZoom = props.minZoom,
+    wrapperClassName = props.wrapperClassName,
+    labelRender = props.labelRender,
+    addShape = props.addShape;
+  var containerId = useMemo(function () {
+    return generateRandomStr(10);
+  }, []);
+  var miniMapContainerId = useMemo(function () {
+    return generateRandomStr(10);
+  }, []);
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchVal = _useState2[0],
+    setSearchVal = _useState2[1];
+
+  // ==================== 初始化 ====================
+  var graph = useChainGraphInit({
+    containerId: containerId,
+    miniMapContainerId: miniMapContainerId,
+    octopus: octopus && !fitLeft,
+    onClick: onClick,
+    styles: ChainGraphServicesStyles,
+    showPort: showPort,
+    miniMapSize: miniMapSize,
+    fitLeft: fitLeft,
+    paddingLeft: paddingLeft,
+    rootLevel: rootLevel,
+    hasHover: hasHover,
+    hasSelected: hasSelected,
+    minZoom: minZoom,
+    addShape: addShape
+  });
+
+  // ==================== 设置数据 ====================
+  var _useChainGraphData = useChainGraphData({
+      graph: graph,
+      data: data,
+      level: level,
+      rootLevel: rootLevel,
+      getImage: getImage,
+      labelRender: labelRender
+    }),
+    isLayouting = _useChainGraphData.isLayouting;
+
+  // ==================== 搜索 ====================
+  useChainGraphSearch({
+    graph: graph,
+    searchVal: searchVal
+  });
+
+  // ==================== 展开所有节点 ====================
+  var _useChainGraphExpand = useChainGraphExpand({
+      graph: graph,
+      level: level,
+      rootLevel: rootLevel
+    }),
+    setAllExpand = _useChainGraphExpand.setAllExpand;
+
+  // ==================== 修改布局 ====================
+  useChainGraphLayout({
+    graph: graph,
+    octopus: octopus,
+    rootLevel: rootLevel,
+    getImage: getImage
+  });
+
+  // ==================== 设置MiniMap ====================
+  useChainGraphMiniMap({
+    graph: graph,
+    showMiniMap: showMiniMap
+  });
+
+  // ==================== 调整大小 ====================
+  useChainGraphResize({
+    graph: graph,
+    containerId: containerId,
+    resize: resize,
+    offset: offset
+  });
+  return /*#__PURE__*/_jsx(Spin, {
+    spinning: loading || isLayouting && !!(data !== null && data !== void 0 && (_data$children = data.children) !== null && _data$children !== void 0 && _data$children.length),
+    wrapperClassName: classNames(styles.spinWrapper, wrapperClassName),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "".concat(styles.ChainGraph, " ").concat(className),
+      style: {
+        opacity: !isLayouting ? 1 : 0
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.container,
+        id: containerId,
+        style: {
+          width: "calc(100% - ".concat(offset[0], "px )"),
+          height: "calc(100% - ".concat(offset[1], "px )")
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        className: classNames(styles.miniMapContainer, _defineProperty({}, styles.showMiniMap, showMiniMap)),
+        id: miniMapContainerId
+      }), showExpandBtn && (data === null || data === void 0 || (_data$children2 = data.children) === null || _data$children2 === void 0 ? void 0 : _data$children2.length) && /*#__PURE__*/_jsx(ExpandButtons, {
+        onExpand: function onExpand() {
+          return setAllExpand(true);
+        },
+        onCollapse: function onCollapse() {
+          return setAllExpand(false);
+        },
+        expandClassName: expandClassName
+      }), showSearch && /*#__PURE__*/_jsx(SearchSelect, {
+        onChange: function onChange(value) {
+          return setSearchVal(value);
+        }
+      })]
+    })
+  });
+});
+export default ChainGraph;