@hsu-react/ui 0.0.1

package/src/components/ChainGraph/_components/SearchSelect/index.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Select from "../../../Select";
+import styles from "./index.module.less";
+
+interface SearchSelectProps {
+  onChange: (value: string) => void;
+}
+
+export const SearchSelect: React.FC<SearchSelectProps> = ({ onChange }) => {
+  return (
+    <Select
+      className={styles.select}
+      showSearch
+      placeholder="请输入关键词进行搜索"
+      optionFilterProp="children"
+      filterOption={(input, option) =>
+        !!(
+          option?.label &&
+          option?.label
+            ?.toString()
+            .toLowerCase()
+            .includes(input.toLowerCase())
+        )
+      }
+      onChange={onChange}
+    />
+  );
+};
+

package/src/components/ChainGraph/_hooks/index.ts

@@ -0,0 +1,8 @@
+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/src/components/ChainGraph/_hooks/useChainGraphData.ts

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { Equal } from "hsu-utils";
+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 function useChainGraphData(props: UseChainGraphDataProps) {
+  const {
+    graph,
+    data,
+    level,
+    rootLevel,
+    getImage,
+    labelRender,
+    onLayoutingChange,
+  } = props;
+  const [lastData, setLastData] = useState<TreeGraphData | undefined>(
+    undefined
+  );
+  const [isLayouting, setIsLayouting] = useState(true);
+
+  useEffect(() => {
+    if (graph && !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 };
+}

package/src/components/ChainGraph/_hooks/useChainGraphExpand.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import ChainGraphServices from "../ChainGraphServices";
+
+interface UseChainGraphExpandProps {
+  graph: ChainGraphServices | null;
+  level?: number;
+  rootLevel?: number;
+}
+
+export function useChainGraphExpand(props: UseChainGraphExpandProps) {
+  const { graph, level, rootLevel } = props;
+  const [allExpand, setAllExpand] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    if (graph && allExpand !== null) {
+      graph.expandAll({
+        allExpand,
+        level,
+        rootLevel,
+      });
+
+      setTimeout(() => {
+        setAllExpand(null);
+      }, 100);
+    }
+  }, [graph, level, rootLevel, allExpand]);
+
+  return { allExpand, setAllExpand };
+}

package/src/components/ChainGraph/_hooks/useChainGraphInit.ts

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { useDebounceEffect } from "ahooks";
+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 function useChainGraphInit(props: UseChainGraphInitProps) {
+  const {
+    containerId,
+    miniMapContainerId,
+    octopus,
+    onClick,
+    styles,
+    showPort,
+    miniMapSize,
+    fitLeft,
+    paddingLeft,
+    rootLevel,
+    hasHover,
+    hasSelected,
+    minZoom,
+    addShape,
+  } = props;
+  const [graph, setGraph] = useState<ChainGraphServices | null>(null);
+
+  useDebounceEffect(() => {
+    if (!graph) {
+      new ChainGraphServices({
+        containerId,
+        miniMapContainerId,
+        octopus,
+        onClick,
+        styles,
+        showPort,
+        miniMapSize,
+        fitLeft,
+        paddingLeft,
+        rendered: (graph) => {
+          setGraph(graph);
+        },
+        rootLevel,
+        hasHover,
+        hasSelected,
+        minZoom,
+        addShape,
+      });
+    }
+  }, [
+    containerId,
+    miniMapContainerId,
+    octopus,
+    onClick,
+    styles,
+    showPort,
+    miniMapSize,
+    fitLeft,
+    paddingLeft,
+    rootLevel,
+    hasHover,
+    hasSelected,
+    minZoom,
+    addShape,
+    graph,
+  ]);
+
+  return graph;
+}

package/src/components/ChainGraph/_hooks/useChainGraphLayout.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import ChainGraphServices from "../ChainGraphServices";
+
+interface UseChainGraphLayoutProps {
+  graph: ChainGraphServices | null;
+  octopus?: boolean;
+  rootLevel?: number;
+  getImage?: (img: string) => void;
+}
+
+export function useChainGraphLayout(props: UseChainGraphLayoutProps) {
+  const { graph, octopus, rootLevel, getImage } = props;
+
+  useEffect(() => {
+    if (graph && octopus !== undefined) {
+      graph.changeLayout(octopus, rootLevel, getImage);
+    }
+  }, [graph, octopus, rootLevel, getImage]);
+}

package/src/components/ChainGraph/_hooks/useChainGraphMiniMap.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+import ChainGraphServices from "../ChainGraphServices";
+
+interface UseChainGraphMiniMapProps {
+  graph: ChainGraphServices | null;
+  showMiniMap?: boolean;
+}
+
+export function useChainGraphMiniMap(props: UseChainGraphMiniMapProps) {
+  const { graph, showMiniMap } = props;
+
+  useEffect(() => {
+    if (graph) {
+      graph.setMiniMap(showMiniMap ?? true);
+    }
+  }, [graph, showMiniMap]);
+}
+

package/src/components/ChainGraph/_hooks/useChainGraphResize.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { Equal } from "hsu-utils";
+import ChainGraphServices from "../ChainGraphServices";
+
+interface UseChainGraphResizeProps {
+  graph: ChainGraphServices | null;
+  containerId: string;
+  resize?: boolean;
+  offset?: [number, number];
+}
+
+export function useChainGraphResize(props: UseChainGraphResizeProps) {
+  const { graph, containerId, resize, offset } = props;
+  const [lastOffset, setLastOffset] = useState<[number, number]>([0, 0]);
+
+  useEffect(() => {
+    if (resize && graph) {
+      graph?.resize(containerId);
+    }
+  }, [graph, resize, containerId]);
+
+  useEffect(() => {
+    if (!Equal.ObjEqual(offset, lastOffset) && graph && offset) {
+      setLastOffset(offset);
+      graph.resize(containerId);
+    }
+  }, [offset, lastOffset, graph, containerId]);
+}
+

package/src/components/ChainGraph/_hooks/useChainGraphSearch.ts

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import ChainGraphServices from "../ChainGraphServices";
+
+interface UseChainGraphSearchProps {
+  graph: ChainGraphServices | null;
+  searchVal: string;
+}
+
+export function useChainGraphSearch(props: UseChainGraphSearchProps) {
+  const { graph, searchVal } = props;
+
+  useEffect(() => {
+    if (graph && searchVal) {
+      graph.onSearch(searchVal);
+    }
+  }, [graph, searchVal]);
+}

package/src/components/ChainGraph/_utils/findAncestorsOfNode.ts

@@ -0,0 +1,42 @@
+import { TreeGraphData } from "..";
+
+/**
+ * 树结构找节点所有父节点
+ * @param tree 树数据
+ * @param targetNodeId 目标节点ID
+ * @param childrenKey 子节点键名，默认为 "children"
+ * @returns 祖先节点ID数组
+ */
+export function findAncestorsOfNode(
+  tree: TreeGraphData,
+  targetNodeId: string,
+  childrenKey: string = "children"
+): string[] {
+  let ancestors: string[] = [];
+
+  function traverse(node: TreeGraphData) {
+    if (node.id === targetNodeId) {
+      // 找到目标节点
+      ancestors = [...ancestors, node.id]; // 将目标节点添加到祖先列表中（可选，取决于是否需要包含目标节点自身）
+      return true; // 停止遍历
+    }
+
+    // 递归遍历子节点
+    if (node[childrenKey] && (node[childrenKey] as TreeGraphData[]).length) {
+      (node[childrenKey] as TreeGraphData[])?.forEach(
+        (child: TreeGraphData) => {
+          if (traverse(child)) {
+            ancestors.push(node.id); // 如果子节点中找到了目标节点，将当前节点添加到祖先列表
+            return true; // 停止遍历
+          }
+        }
+      );
+    }
+
+    return false; // 未找到目标节点
+  }
+
+  traverse(tree);
+
+  return ancestors;
+}

package/src/components/ChainGraph/_utils/getTextSize.ts

@@ -0,0 +1,21 @@
+import { ShapeStyle } from "@antv/g6";
+import { get_string_size } from "hsu-utils";
+
+/**
+ * 获取文字大小
+ * @param text 文本内容
+ * @param textStyle 文本样式
+ * @returns 文本的宽度和高度
+ */
+export const getTextSize = (text: string, textStyle: ShapeStyle) => {
+  if (!text) return { width: 0, height: 0 };
+
+  const { width, height } = get_string_size(text, {
+    size: Number(textStyle.fontSize),
+    weight: textStyle.fontWeight?.toString(),
+    family: textStyle.fontFamily,
+  });
+
+  return { width, height };
+};
+

package/src/components/ChainGraph/_utils/index.ts

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

package/src/components/ChainGraph/_utils/styles.ts

@@ -0,0 +1,24 @@
+import { ShapeStyle } from "@antv/g6";
+
+/**
+ * 根节点文字样式
+ */
+export const rootTextStyle: ShapeStyle = {
+  fontSize: 20,
+  fontWeight: "bold",
+};
+
+/**
+ * 节点文字样式
+ */
+export const nodeTextStyle: ShapeStyle = {
+  fontSize: 16,
+};
+
+/**
+ * 边样式
+ */
+export const edgeStyle: ShapeStyle = {
+  stroke: "#4096ff",
+};
+

package/src/components/ChainGraph/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: 数据展示
+  order: 4
+title: ChainGraph 关系图
+---
+
+# ChainGraph 关系图
+
+> `ChainGraph` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { ChainGraph } from "@hsu-react/ui";
+```

package/src/components/ChainGraph/index.module.less

@@ -0,0 +1,39 @@
+.spinWrapper {
+  width: 100%;
+  height: 100%;
+
+  .ant-spin-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ChainGraph {
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+
+  .container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .miniMapContainer {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+
+    background-color: rgba(253, 253, 255, 1);
+
+    border: 1px solid #2977e7;
+
+    transition: all 0.5s ease;
+
+    opacity: 0;
+
+    &.showMiniMap {
+      opacity: 1;
+    }
+  }
+}

package/src/components/ChainGraph/index.tsx

@@ -0,0 +1,195 @@
+import React, { useMemo, useState } from "react";
+import styles from "./index.module.less";
+import {
+  TreeGraphData as G6TreeGraphData,
+  IGroup,
+  ModelConfig,
+} from "@antv/g6";
+import { ChainGraphServicesStyles } from "./ChainGraphServices";
+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";
+
+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;
+}
+
+const ChainGraph: React.FC<ChainGraphProps> = observer((props) => {
+  const {
+    data,
+    octopus,
+    level = 1,
+    rootLevel = 1,
+    onClick,
+    styles: ChainGraphServicesStyles,
+    showPort = true,
+    showMiniMap = true,
+    miniMapSize = [200, 150],
+    getImage,
+    className,
+    showSearch = true,
+    showExpandBtn = true,
+    expandClassName,
+    resize = true,
+    offset = [0, 0],
+    fitLeft = false,
+    paddingLeft = 20,
+    loading = false,
+    hasHover = true,
+    hasSelected = true,
+    minZoom,
+    wrapperClassName,
+    labelRender,
+    addShape,
+  } = props;
+  const containerId = useMemo(() => generateRandomStr(10), []);
+  const miniMapContainerId = useMemo(() => generateRandomStr(10), []);
+  const [searchVal, setSearchVal] = useState("");
+
+  // ==================== 初始化 ====================
+  const graph = useChainGraphInit({
+    containerId,
+    miniMapContainerId,
+    octopus: octopus && !fitLeft,
+    onClick,
+    styles: ChainGraphServicesStyles,
+    showPort,
+    miniMapSize,
+    fitLeft,
+    paddingLeft,
+    rootLevel,
+    hasHover,
+    hasSelected,
+    minZoom,
+    addShape,
+  });
+
+  // ==================== 设置数据 ====================
+  const { isLayouting } = useChainGraphData({
+    graph,
+    data,
+    level,
+    rootLevel,
+    getImage,
+    labelRender,
+  });
+
+  // ==================== 搜索 ====================
+  useChainGraphSearch({
+    graph,
+    searchVal,
+  });
+
+  // ==================== 展开所有节点 ====================
+  const { setAllExpand } = useChainGraphExpand({
+    graph,
+    level,
+    rootLevel,
+  });
+
+  // ==================== 修改布局 ====================
+  useChainGraphLayout({
+    graph,
+    octopus,
+    rootLevel,
+    getImage,
+  });
+
+  // ==================== 设置MiniMap ====================
+  useChainGraphMiniMap({
+    graph,
+    showMiniMap,
+  });
+
+  // ==================== 调整大小 ====================
+  useChainGraphResize({
+    graph,
+    containerId,
+    resize,
+    offset,
+  });
+
+  return (
+    <Spin
+      spinning={loading || (isLayouting && !!data?.children?.length)}
+      wrapperClassName={classNames(styles.spinWrapper, wrapperClassName)}
+    >
+      <div
+        className={`${styles.ChainGraph} ${className}`}
+        style={{
+          opacity: !isLayouting ? 1 : 0,
+        }}
+      >
+        <div
+          className={styles.container}
+          id={containerId}
+          style={{
+            width: `calc(100% - ${offset[0]}px )`,
+            height: `calc(100% - ${offset[1]}px )`,
+          }}
+        />
+        <div
+          className={classNames(styles.miniMapContainer, {
+            [styles.showMiniMap]: showMiniMap,
+          })}
+          id={miniMapContainerId}
+        />
+        {showExpandBtn && data?.children?.length && (
+          <ExpandButtons
+            onExpand={() => setAllExpand(true)}
+            onCollapse={() => setAllExpand(false)}
+            expandClassName={expandClassName}
+          />
+        )}
+        {showSearch && (
+          <SearchSelect onChange={(value) => setSearchVal(value)} />
+        )}
+      </div>
+    </Spin>
+  );
+});
+
+export default ChainGraph;