@hsu-react/ui 0.0.1

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChainGraphExpand = useChainGraphExpand;
+var _react = require("react");
+function useChainGraphExpand(props) {
+  const {
+    graph,
+    level,
+    rootLevel
+  } = props;
+  const [allExpand, setAllExpand] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (graph && allExpand !== null) {
+      graph.expandAll({
+        allExpand,
+        level,
+        rootLevel
+      });
+      setTimeout(() => {
+        setAllExpand(null);
+      }, 100);
+    }
+  }, [graph, level, rootLevel, allExpand]);
+  return {
+    allExpand,
+    setAllExpand
+  };
+}

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChainGraphInit = useChainGraphInit;
+var _react = require("react");
+var _ahooks = require("ahooks");
+var _ChainGraphServices = _interopRequireDefault(require("../ChainGraphServices"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function useChainGraphInit(props) {
+  const {
+    containerId,
+    miniMapContainerId,
+    octopus,
+    onClick,
+    styles,
+    showPort,
+    miniMapSize,
+    fitLeft,
+    paddingLeft,
+    rootLevel,
+    hasHover,
+    hasSelected,
+    minZoom,
+    addShape
+  } = props;
+  const [graph, setGraph] = (0, _react.useState)(null);
+  (0, _ahooks.useDebounceEffect)(() => {
+    if (!graph) {
+      new _ChainGraphServices.default({
+        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/lib/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/lib/components/ChainGraph/_hooks/useChainGraphLayout.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChainGraphLayout = useChainGraphLayout;
+var _react = require("react");
+function useChainGraphLayout(props) {
+  const {
+    graph,
+    octopus,
+    rootLevel,
+    getImage
+  } = props;
+  (0, _react.useEffect)(() => {
+    if (graph && octopus !== undefined) {
+      graph.changeLayout(octopus, rootLevel, getImage);
+    }
+  }, [graph, octopus, rootLevel, getImage]);
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChainGraphMiniMap = useChainGraphMiniMap;
+var _react = require("react");
+function useChainGraphMiniMap(props) {
+  const {
+    graph,
+    showMiniMap
+  } = props;
+  (0, _react.useEffect)(() => {
+    if (graph) {
+      graph.setMiniMap(showMiniMap ?? true);
+    }
+  }, [graph, showMiniMap]);
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChainGraphResize = useChainGraphResize;
+var _react = require("react");
+var _hsuUtils = require("hsu-utils");
+function useChainGraphResize(props) {
+  const {
+    graph,
+    containerId,
+    resize,
+    offset
+  } = props;
+  const [lastOffset, setLastOffset] = (0, _react.useState)([0, 0]);
+  (0, _react.useEffect)(() => {
+    if (resize && graph) {
+      graph?.resize(containerId);
+    }
+  }, [graph, resize, containerId]);
+  (0, _react.useEffect)(() => {
+    if (!_hsuUtils.Equal.ObjEqual(offset, lastOffset) && graph && offset) {
+      setLastOffset(offset);
+      graph.resize(containerId);
+    }
+  }, [offset, lastOffset, graph, containerId]);
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChainGraphSearch = useChainGraphSearch;
+var _react = require("react");
+function useChainGraphSearch(props) {
+  const {
+    graph,
+    searchVal
+  } = props;
+  (0, _react.useEffect)(() => {
+    if (graph && searchVal) {
+      graph.onSearch(searchVal);
+    }
+  }, [graph, searchVal]);
+}

package/lib/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/lib/components/ChainGraph/_utils/findAncestorsOfNode.js

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

package/lib/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/lib/components/ChainGraph/_utils/getTextSize.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextSize = void 0;
+var _hsuUtils = require("hsu-utils");
+/**
+ * 获取文字大小
+ * @param text 文本内容
+ * @param textStyle 文本样式
+ * @returns 文本的宽度和高度
+ */
+const getTextSize = (text, textStyle) => {
+  if (!text) return {
+    width: 0,
+    height: 0
+  };
+  const {
+    width,
+    height
+  } = (0, _hsuUtils.get_string_size)(text, {
+    size: Number(textStyle.fontSize),
+    weight: textStyle.fontWeight?.toString(),
+    family: textStyle.fontFamily
+  });
+  return {
+    width,
+    height
+  };
+};
+exports.getTextSize = getTextSize;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "edgeStyle", {
+  enumerable: true,
+  get: function () {
+    return _styles.edgeStyle;
+  }
+});
+Object.defineProperty(exports, "findAncestorsOfNode", {
+  enumerable: true,
+  get: function () {
+    return _findAncestorsOfNode.findAncestorsOfNode;
+  }
+});
+Object.defineProperty(exports, "getTextSize", {
+  enumerable: true,
+  get: function () {
+    return _getTextSize.getTextSize;
+  }
+});
+Object.defineProperty(exports, "nodeTextStyle", {
+  enumerable: true,
+  get: function () {
+    return _styles.nodeTextStyle;
+  }
+});
+Object.defineProperty(exports, "rootTextStyle", {
+  enumerable: true,
+  get: function () {
+    return _styles.rootTextStyle;
+  }
+});
+var _findAncestorsOfNode = require("./findAncestorsOfNode");
+var _getTextSize = require("./getTextSize");
+var _styles = require("./styles");

package/lib/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/lib/components/ChainGraph/_utils/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rootTextStyle = exports.nodeTextStyle = exports.edgeStyle = void 0;
+/**
+ * 根节点文字样式
+ */
+const rootTextStyle = exports.rootTextStyle = {
+  fontSize: 20,
+  fontWeight: "bold"
+};
+
+/**
+ * 节点文字样式
+ */
+const nodeTextStyle = exports.nodeTextStyle = {
+  fontSize: 16
+};
+
+/**
+ * 边样式
+ */
+const edgeStyle = exports.edgeStyle = {
+  stroke: "#4096ff"
+};

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

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _mobxReactLite = require("mobx-react-lite");
+var _hsuUtils = require("hsu-utils");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("./_hooks");
+var _ExpandButtons = require("./_components/ExpandButtons");
+var _SearchSelect = require("./_components/SearchSelect");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ChainGraph = (0, _mobxReactLite.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 = (0, _react.useMemo)(() => (0, _hsuUtils.generateRandomStr)(10), []);
+  const miniMapContainerId = (0, _react.useMemo)(() => (0, _hsuUtils.generateRandomStr)(10), []);
+  const [searchVal, setSearchVal] = (0, _react.useState)("");
+
+  // ==================== 初始化 ====================
+  const graph = (0, _hooks.useChainGraphInit)({
+    containerId,
+    miniMapContainerId,
+    octopus: octopus && !fitLeft,
+    onClick,
+    styles: ChainGraphServicesStyles,
+    showPort,
+    miniMapSize,
+    fitLeft,
+    paddingLeft,
+    rootLevel,
+    hasHover,
+    hasSelected,
+    minZoom,
+    addShape
+  });
+
+  // ==================== 设置数据 ====================
+  const {
+    isLayouting
+  } = (0, _hooks.useChainGraphData)({
+    graph,
+    data,
+    level,
+    rootLevel,
+    getImage,
+    labelRender
+  });
+
+  // ==================== 搜索 ====================
+  (0, _hooks.useChainGraphSearch)({
+    graph,
+    searchVal
+  });
+
+  // ==================== 展开所有节点 ====================
+  const {
+    setAllExpand
+  } = (0, _hooks.useChainGraphExpand)({
+    graph,
+    level,
+    rootLevel
+  });
+
+  // ==================== 修改布局 ====================
+  (0, _hooks.useChainGraphLayout)({
+    graph,
+    octopus,
+    rootLevel,
+    getImage
+  });
+
+  // ==================== 设置MiniMap ====================
+  (0, _hooks.useChainGraphMiniMap)({
+    graph,
+    showMiniMap
+  });
+
+  // ==================== 调整大小 ====================
+  (0, _hooks.useChainGraphResize)({
+    graph,
+    containerId,
+    resize,
+    offset
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {
+    spinning: loading || isLayouting && !!data?.children?.length,
+    wrapperClassName: (0, _classnames.default)(_indexModule.default.spinWrapper, wrapperClassName),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${_indexModule.default.ChainGraph} ${className}`,
+      style: {
+        opacity: !isLayouting ? 1 : 0
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _indexModule.default.container,
+        id: containerId,
+        style: {
+          width: `calc(100% - ${offset[0]}px )`,
+          height: `calc(100% - ${offset[1]}px )`
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(_indexModule.default.miniMapContainer, {
+          [_indexModule.default.showMiniMap]: showMiniMap
+        }),
+        id: miniMapContainerId
+      }), showExpandBtn && data?.children?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandButtons.ExpandButtons, {
+        onExpand: () => setAllExpand(true),
+        onCollapse: () => setAllExpand(false),
+        expandClassName: expandClassName
+      }), showSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchSelect.SearchSelect, {
+        onChange: value => setSearchVal(value)
+      })]
+    })
+  });
+});
+var _default = exports.default = ChainGraph;

package/lib/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/lib/components/Chart/Bar/Bar3DOpt.d.ts

@@ -0,0 +1,11 @@
+import * as echarts from "echarts";
+import { ChartOptionType } from "..";
+/**
+ * 3D柱状图series生成
+ * @param _colors 颜色
+ * @param barGap 柱间距，必须大于等于柱宽
+ * @param barWidth 柱宽
+ * @returns
+ */
+declare const bar3DSeries: (_colors: echarts.Color, barGap?: number, barWidth?: number) => echarts.SeriesOption & ChartOptionType;
+export default bar3DSeries;