@hsu-react/ui 0.0.1

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

@@ -0,0 +1,280 @@
+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 _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 { getTextSize } from ".";
+// ==================== 常量定义 ====================
+var DEFAULT_PADDING = 20; // 节点内边距
+var DEFAULT_LINE_HEIGHT = 18; // 行高
+var DEFAULT_LINE_GAP = 2; // 行间距
+var DEFAULT_ICON_RADIUS = 8; // 折叠图标半径
+var DEFAULT_FONT_SIZE = 20; // 根节点默认字体大小
+var DEFAULT_TEXT_COLOR = "#0c0d0e"; // 默认文本颜色
+var DEFAULT_BG_COLOR = "#fff"; // 默认背景颜色
+var DEFAULT_STROKE_COLOR = "#4096ff"; // 默认边框颜色
+var DEFAULT_HOVER_TEXT_COLOR = "#fff"; // 悬停时文本颜色
+var TEXT_WIDTH_TOLERANCE = 0.01; // 文本宽度容差
+
+export default function RootNode(rootNodeProps) {
+  var _ref = rootNodeProps || {},
+    styles = _ref.styles,
+    _ref$colors = _ref.colors,
+    colors = _ref$colors === void 0 ? [] : _ref$colors,
+    _ref$hoverColors = _ref.hoverColors,
+    hoverColors = _ref$hoverColors === void 0 ? [] : _ref$hoverColors,
+    _ref$selectedColors = _ref.selectedColors,
+    selectedColors = _ref$selectedColors === void 0 ? [] : _ref$selectedColors,
+    _ref$rootLevel = _ref.rootLevel,
+    rootLevel = _ref$rootLevel === void 0 ? 1 : _ref$rootLevel,
+    _ref$hasHover = _ref.hasHover,
+    hasHover = _ref$hasHover === void 0 ? true : _ref$hasHover,
+    _ref$hasSelected = _ref.hasSelected,
+    hasSelected = _ref$hasSelected === void 0 ? true : _ref$hasSelected,
+    addShape = _ref.addShape;
+  var _ref2 = styles || {},
+    textStyle = _ref2.textStyle,
+    textSelectedStyle = _ref2.textSelectedStyle,
+    textHoverStyle = _ref2.textHoverStyle,
+    _ref2$textAlign = _ref2.textAlign,
+    textAlign = _ref2$textAlign === void 0 ? "default" : _ref2$textAlign,
+    bgStyle = _ref2.bgStyle,
+    selectedBgStyle = _ref2.selectedBgStyle,
+    hoverBgStyle = _ref2.hoverBgStyle,
+    collapseIconStyle = _ref2.collapseIconStyle,
+    maxWidth = _ref2.maxWidth,
+    render = _ref2.render;
+
+  // ==================== 文本样式 ====================
+  var _textStyle = _objectSpread({
+    fill: DEFAULT_TEXT_COLOR,
+    fontSize: DEFAULT_FONT_SIZE,
+    fontWeight: "bold"
+  }, textStyle);
+  var _textSelectedStyle = _objectSpread({
+    fill: DEFAULT_HOVER_TEXT_COLOR
+  }, textSelectedStyle);
+  var _textHoverStyle = _objectSpread({
+    fill: DEFAULT_HOVER_TEXT_COLOR
+  }, textHoverStyle);
+
+  // ==================== 背景样式 ====================
+  var _bgStyle = _objectSpread({
+    fill: DEFAULT_BG_COLOR,
+    stroke: DEFAULT_STROKE_COLOR,
+    lineWidth: 1,
+    radius: 4
+  }, bgStyle);
+  var _selectedBgStyle = _objectSpread({
+    fill: DEFAULT_STROKE_COLOR
+  }, selectedBgStyle);
+  var _hoverBgStyle = _objectSpread({
+    fill: DEFAULT_STROKE_COLOR
+  }, hoverBgStyle);
+
+  // ==================== 展开折叠Icon样式 ====================
+  var _collapseIconStyle = _objectSpread({
+    stroke: DEFAULT_STROKE_COLOR,
+    lineWidth: 1,
+    fill: DEFAULT_BG_COLOR
+  }, collapseIconStyle);
+
+  // ==================== 配置 ====================
+  var options = {
+    styles: {}
+  };
+
+  // ==================== 获取颜色配置 ====================
+  var getColorConfig = function getColorConfig(item) {
+    var _item$_cfg;
+    var index = ((_item$_cfg = item._cfg) === null || _item$_cfg === void 0 || (_item$_cfg = _item$_cfg.model) === null || _item$_cfg === void 0 ? void 0 : _item$_cfg.level) - rootLevel;
+    return {
+      color: colors === null || colors === void 0 ? void 0 : colors[index % colors.length],
+      hoverColor: hoverColors === null || hoverColors === void 0 ? void 0 : hoverColors[index % hoverColors.length],
+      selectedColor: selectedColors === null || selectedColors === void 0 ? void 0 : selectedColors[index % selectedColors.length]
+    };
+  };
+
+  // ==================== 设置状态 ====================
+  var setState = function setState(name, value, item) {
+    if (!item) return;
+    var group = item.get("group");
+    var collapseShape = group.find(function (e) {
+      return e.get("name") === "collapse-icon";
+    });
+    var textShape = group.find(function (e) {
+      return e.get("name") === "text-shape";
+    });
+    var keyShape = item.getKeyShape();
+    var _getColorConfig = getColorConfig(item),
+      color = _getColorConfig.color,
+      hoverColor = _getColorConfig.hoverColor,
+      selectedColor = _getColorConfig.selectedColor;
+
+    // 处理折叠状态
+    if (name === "collapse") {
+      collapseShape === null || collapseShape === void 0 || collapseShape.attr({
+        symbol: value ? G6.Marker.collapse : G6.Marker.expand
+      });
+      return;
+    }
+
+    // 处理悬停状态
+    if (name === "hover" && !item.hasState("click") && hasHover) {
+      var _ref3, _currentColor$bg, _ref4, _currentColor$stroke, _ref5, _currentColor$text;
+      var isHover = Boolean(value);
+      var renderStyle = render === null || render === void 0 ? void 0 : render(item._cfg, isHover ? "hover" : "default");
+      var _bgStyle2 = isHover ? _hoverBgStyle : _bgStyle;
+      var _textStyle2 = isHover ? _textHoverStyle : _textStyle;
+      var currentColor = isHover ? hoverColor : color;
+      keyShape === null || keyShape === void 0 || keyShape.attr(_objectSpread(_objectSpread({}, _bgStyle2), {}, {
+        fill: (_ref3 = (_currentColor$bg = currentColor === null || currentColor === void 0 ? void 0 : currentColor.bg) !== null && _currentColor$bg !== void 0 ? _currentColor$bg : color === null || color === void 0 ? void 0 : color.bg) !== null && _ref3 !== void 0 ? _ref3 : _bgStyle2.fill,
+        stroke: (_ref4 = (_currentColor$stroke = currentColor === null || currentColor === void 0 ? void 0 : currentColor.stroke) !== null && _currentColor$stroke !== void 0 ? _currentColor$stroke : color === null || color === void 0 ? void 0 : color.stroke) !== null && _ref4 !== void 0 ? _ref4 : _bgStyle2.stroke
+      }, renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.bgStyle));
+      textShape === null || textShape === void 0 || textShape.attr(_objectSpread(_objectSpread({}, _textStyle2), {}, {
+        fill: (_ref5 = (_currentColor$text = currentColor === null || currentColor === void 0 ? void 0 : currentColor.text) !== null && _currentColor$text !== void 0 ? _currentColor$text : color === null || color === void 0 ? void 0 : color.text) !== null && _ref5 !== void 0 ? _ref5 : _textStyle2.fill
+      }, renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.textStyle));
+      return;
+    }
+
+    // 处理选中状态
+    if (name === "click" && hasSelected) {
+      var _ref6, _currentColor$bg2, _ref7, _currentColor$stroke2, _ref8, _currentColor$text2;
+      var isSelected = Boolean(value);
+      var _renderStyle = render === null || render === void 0 ? void 0 : render(item._cfg, isSelected ? "selected" : "default");
+      var _bgStyle3 = isSelected ? _selectedBgStyle : _bgStyle;
+      var _textStyle3 = isSelected ? _textSelectedStyle : _textStyle;
+      var _currentColor = isSelected ? selectedColor : color;
+      keyShape === null || keyShape === void 0 || keyShape.attr(_objectSpread(_objectSpread({}, _bgStyle3), {}, {
+        fill: (_ref6 = (_currentColor$bg2 = _currentColor === null || _currentColor === void 0 ? void 0 : _currentColor.bg) !== null && _currentColor$bg2 !== void 0 ? _currentColor$bg2 : color === null || color === void 0 ? void 0 : color.bg) !== null && _ref6 !== void 0 ? _ref6 : _bgStyle3.fill,
+        stroke: (_ref7 = (_currentColor$stroke2 = _currentColor === null || _currentColor === void 0 ? void 0 : _currentColor.stroke) !== null && _currentColor$stroke2 !== void 0 ? _currentColor$stroke2 : color === null || color === void 0 ? void 0 : color.stroke) !== null && _ref7 !== void 0 ? _ref7 : _bgStyle3.stroke
+      }, _renderStyle === null || _renderStyle === void 0 ? void 0 : _renderStyle.bgStyle));
+      textShape === null || textShape === void 0 || textShape.attr(_objectSpread(_objectSpread({}, _textStyle3), {}, {
+        fill: (_ref8 = (_currentColor$text2 = _currentColor === null || _currentColor === void 0 ? void 0 : _currentColor.text) !== null && _currentColor$text2 !== void 0 ? _currentColor$text2 : color === null || color === void 0 ? void 0 : color.text) !== null && _ref8 !== void 0 ? _ref8 : _textStyle3.fill
+      }, _renderStyle === null || _renderStyle === void 0 ? void 0 : _renderStyle.textStyle));
+    }
+  };
+
+  // ==================== 文本换行处理 ====================
+  var wrapText = function wrapText(label, maxWidth) {
+    var lines = [];
+    var currentLine = "";
+    var labelChars = label.split("");
+    labelChars === null || labelChars === void 0 || labelChars.forEach(function (char, idx) {
+      var _getTextSize = getTextSize(currentLine + char, _textStyle),
+        charWidth = _getTextSize.width;
+      var availableWidth = maxWidth - DEFAULT_PADDING * 2;
+      if (charWidth - TEXT_WIDTH_TOLERANCE > availableWidth) {
+        lines.push(currentLine);
+        currentLine = char;
+      } else {
+        currentLine += char;
+      }
+      if (idx === labelChars.length - 1) {
+        lines.push(currentLine);
+      }
+    });
+    return lines.length > 0 ? lines : [label];
+  };
+
+  // ==================== 计算节点尺寸 ====================
+  var calculateNodeSize = function calculateNodeSize(label, fontSize) {
+    var _getTextSize2 = getTextSize(label, _textStyle),
+      width = _getTextSize2.width,
+      height = _getTextSize2.height;
+    var minWidth = fontSize + DEFAULT_PADDING * 2;
+    var nodeWidth = maxWidth ? Math.max(maxWidth, minWidth) : width + DEFAULT_PADDING * 2;
+    var lines = wrapText(label, nodeWidth);
+    var lineCount = lines.length;
+    var nodeHeight = height * lineCount + DEFAULT_LINE_HEIGHT + (lineCount - 1) * DEFAULT_LINE_GAP;
+    return {
+      width: nodeWidth,
+      height: nodeHeight,
+      lines: lines
+    };
+  };
+
+  // ==================== 绘制 ====================
+  var draw = function draw(cfg, group) {
+    var _textStyle$fontSize, _color$bg, _color$stroke;
+    var renderStyle = render === null || render === void 0 ? void 0 : render(cfg, "default");
+    cfg.textStyle = _objectSpread(_objectSpread({}, _textStyle), renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.textStyle);
+    var index = cfg.level - rootLevel;
+    var color = colors === null || colors === void 0 ? void 0 : colors[index % colors.length];
+    var fontSize = (_textStyle$fontSize = _textStyle.fontSize) !== null && _textStyle$fontSize !== void 0 ? _textStyle$fontSize : DEFAULT_FONT_SIZE;
+    var _calculateNodeSize = calculateNodeSize(cfg.label, fontSize),
+      nodeWidth = _calculateNodeSize.width,
+      nodeHeight = _calculateNodeSize.height,
+      lines = _calculateNodeSize.lines;
+    var lineCount = lines.length;
+    var textHeight = getTextSize(cfg.label, _textStyle).height;
+    cfg.width = nodeWidth;
+    cfg.height = nodeHeight;
+    cfg.line = lineCount;
+
+    // 绘制背景
+    var node = group.addShape("rect", {
+      attrs: _objectSpread(_objectSpread(_objectSpread({}, _bgStyle), {}, {
+        fill: (_color$bg = color === null || color === void 0 ? void 0 : color.bg) !== null && _color$bg !== void 0 ? _color$bg : _bgStyle.fill,
+        stroke: (_color$stroke = color === null || color === void 0 ? void 0 : color.stroke) !== null && _color$stroke !== void 0 ? _color$stroke : _bgStyle.stroke
+      }, renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.bgStyle), {}, {
+        width: nodeWidth,
+        height: nodeHeight,
+        x: -nodeWidth / 2,
+        y: -(nodeHeight - DEFAULT_LINE_HEIGHT) / lineCount
+      }),
+      name: "rect-shape"
+    });
+
+    // 绘制文本
+    lines === null || lines === void 0 || lines.forEach(function (line, lineIndex) {
+      var _color$text;
+      var _getTextSize3 = getTextSize(line, _textStyle),
+        lineWidth = _getTextSize3.width;
+      var textX = textAlign === "center" ? -lineWidth / 2 : -nodeWidth / 2 + DEFAULT_PADDING;
+      var textY = textHeight * lineIndex + DEFAULT_LINE_HEIGHT / 2 + lineIndex * DEFAULT_LINE_GAP;
+      group.addShape("text", {
+        attrs: _objectSpread(_objectSpread(_objectSpread({}, _textStyle), {}, {
+          fill: (_color$text = color === null || color === void 0 ? void 0 : color.text) !== null && _color$text !== void 0 ? _color$text : _textStyle.fill
+        }, renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.textStyle), {}, {
+          text: line,
+          x: textX,
+          y: textY,
+          position: cfg.direction
+        }),
+        name: "text-shape"
+      });
+    });
+
+    // 绘制展开折叠图标
+    var hasChildren = cfg.children && cfg.children.length > 0;
+    if (hasChildren) {
+      var iconX = nodeWidth / 2;
+      var iconY = -(nodeHeight - DEFAULT_LINE_HEIGHT) / lineCount + nodeHeight / 2;
+      group.addShape("marker", {
+        attrs: _objectSpread(_objectSpread({
+          r: DEFAULT_ICON_RADIUS
+        }, _collapseIconStyle), {}, {
+          x: iconX,
+          y: iconY,
+          symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
+          cursor: "pointer"
+        }),
+        name: "collapse-icon"
+      });
+    }
+
+    // 自定义形状
+    if (addShape) {
+      addShape(group, cfg);
+    }
+    return node;
+  };
+  return {
+    options: options,
+    setState: setState,
+    draw: draw
+  };
+}

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

@@ -0,0 +1,17 @@
+import { IGroup, ModelConfig, ShapeOptions } from "@antv/g6";
+import { NodeColor, NodeStyle } from ".";
+interface TreeNodeProps {
+    showPort?: boolean;
+    styles?: NodeStyle;
+    colors?: NodeColor[];
+    hoverColors?: NodeColor[];
+    selectedColors?: NodeColor[];
+    rootLevel?: number;
+    hasHover?: boolean;
+    hasSelected?: boolean;
+    addShape?: (group: IGroup, cfg: ModelConfig & {
+        origin?: Record<string, unknown>;
+    }) => void;
+}
+export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions;
+export {};

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

@@ -0,0 +1,327 @@
+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 _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 { getTextSize } from ".";
+// ==================== 常量定义 ====================
+var DEFAULT_PADDING = 20; // 节点内边距
+var DEFAULT_LINE_HEIGHT = 18; // 行高
+var DEFAULT_LINE_GAP = 2; // 行间距
+var DEFAULT_ICON_RADIUS = 8; // 折叠图标半径
+var DEFAULT_PORT_WIDTH = 3; // 连接桩宽度
+var DEFAULT_PORT_HEIGHT = 18; // 连接桩高度
+var DEFAULT_FONT_SIZE = 16; // 树节点默认字体大小
+var DEFAULT_TEXT_COLOR = "#0c0d0e"; // 默认文本颜色
+var DEFAULT_BG_COLOR = "#fff"; // 默认背景颜色
+var DEFAULT_STROKE_COLOR = "#4096ff"; // 默认边框颜色
+var DEFAULT_HOVER_TEXT_COLOR = "#fff"; // 悬停时文本颜色
+var TEXT_WIDTH_TOLERANCE = 0.01; // 文本宽度容差
+
+export default function TreeNode(treeNodeProps) {
+  var _ref = treeNodeProps || {},
+    _ref$showPort = _ref.showPort,
+    showPort = _ref$showPort === void 0 ? true : _ref$showPort,
+    styles = _ref.styles,
+    _ref$colors = _ref.colors,
+    colors = _ref$colors === void 0 ? [] : _ref$colors,
+    _ref$hoverColors = _ref.hoverColors,
+    hoverColors = _ref$hoverColors === void 0 ? [] : _ref$hoverColors,
+    _ref$selectedColors = _ref.selectedColors,
+    selectedColors = _ref$selectedColors === void 0 ? [] : _ref$selectedColors,
+    _ref$rootLevel = _ref.rootLevel,
+    rootLevel = _ref$rootLevel === void 0 ? 1 : _ref$rootLevel,
+    _ref$hasHover = _ref.hasHover,
+    hasHover = _ref$hasHover === void 0 ? true : _ref$hasHover,
+    _ref$hasSelected = _ref.hasSelected,
+    hasSelected = _ref$hasSelected === void 0 ? true : _ref$hasSelected,
+    addShape = _ref.addShape;
+  var _ref2 = styles || {},
+    textStyle = _ref2.textStyle,
+    textSelectedStyle = _ref2.textSelectedStyle,
+    textHoverStyle = _ref2.textHoverStyle,
+    _ref2$textAlign = _ref2.textAlign,
+    textAlign = _ref2$textAlign === void 0 ? "default" : _ref2$textAlign,
+    bgStyle = _ref2.bgStyle,
+    selectedBgStyle = _ref2.selectedBgStyle,
+    hoverBgStyle = _ref2.hoverBgStyle,
+    collapseIconStyle = _ref2.collapseIconStyle,
+    maxWidth = _ref2.maxWidth,
+    render = _ref2.render;
+
+  // ==================== 文本样式 ====================
+  var _textStyle = _objectSpread({
+    fill: DEFAULT_TEXT_COLOR,
+    fontSize: DEFAULT_FONT_SIZE
+  }, textStyle);
+  var _textSelectedStyle = _objectSpread({
+    fill: DEFAULT_HOVER_TEXT_COLOR
+  }, textSelectedStyle);
+  var _textHoverStyle = _objectSpread({
+    fill: DEFAULT_HOVER_TEXT_COLOR
+  }, textHoverStyle);
+
+  // ==================== 背景样式 ====================
+  var _bgStyle = _objectSpread({
+    fill: DEFAULT_BG_COLOR,
+    stroke: DEFAULT_STROKE_COLOR,
+    lineWidth: 1,
+    radius: 4
+  }, bgStyle);
+  var _selectedBgStyle = _objectSpread({
+    fill: DEFAULT_STROKE_COLOR
+  }, selectedBgStyle);
+  var _hoverBgStyle = _objectSpread({
+    fill: DEFAULT_STROKE_COLOR
+  }, hoverBgStyle);
+
+  // ==================== 展开折叠Icon样式 ====================
+  var _collapseIconStyle = _objectSpread({
+    stroke: DEFAULT_STROKE_COLOR,
+    lineWidth: 1,
+    fill: DEFAULT_BG_COLOR
+  }, collapseIconStyle);
+
+  // ==================== 连接桩样式 ====================
+  var _portStyle = {
+    fill: DEFAULT_STROKE_COLOR
+  };
+
+  // ==================== 配置 ====================
+  var options = {
+    styles: {}
+  };
+
+  // ==================== 获取颜色配置 ====================
+  var getColorConfig = function getColorConfig(item) {
+    var _item$_cfg;
+    var index = ((_item$_cfg = item._cfg) === null || _item$_cfg === void 0 || (_item$_cfg = _item$_cfg.model) === null || _item$_cfg === void 0 ? void 0 : _item$_cfg.level) - rootLevel;
+    var colorArrayLength = colors.length + 1;
+    return {
+      color: colors === null || colors === void 0 ? void 0 : colors[index % colorArrayLength],
+      hoverColor: hoverColors === null || hoverColors === void 0 ? void 0 : hoverColors[index % (hoverColors.length + 1)],
+      selectedColor: selectedColors === null || selectedColors === void 0 ? void 0 : selectedColors[index % (selectedColors.length + 1)]
+    };
+  };
+
+  // ==================== 设置状态 ====================
+  var setState = function setState(name, value, item) {
+    if (!item) return;
+    var group = item.get("group");
+    var collapseShape = group.find(function (e) {
+      return e.get("name") === "collapse-icon";
+    });
+    var textShapes = group.findAll(function (e) {
+      return e.get("name") === "text-shape";
+    });
+    var keyShape = item.getKeyShape();
+    var _getColorConfig = getColorConfig(item),
+      color = _getColorConfig.color,
+      hoverColor = _getColorConfig.hoverColor,
+      selectedColor = _getColorConfig.selectedColor;
+
+    // 处理折叠状态
+    if (name === "collapse") {
+      collapseShape === null || collapseShape === void 0 || collapseShape.attr({
+        symbol: value ? G6.Marker.collapse : G6.Marker.expand
+      });
+      return;
+    }
+
+    // 处理悬停状态
+    if (name === "hover" && !item.hasState("click") && hasHover) {
+      var _ref3, _currentColor$bg, _ref4, _currentColor$stroke;
+      var isHover = Boolean(value);
+      var renderStyle = render === null || render === void 0 ? void 0 : render(item._cfg, isHover ? "hover" : "default");
+      var _bgStyle2 = isHover ? _hoverBgStyle : _bgStyle;
+      var _textStyle2 = isHover ? _textHoverStyle : _textStyle;
+      var currentColor = isHover ? hoverColor : color;
+      keyShape === null || keyShape === void 0 || keyShape.attr(_objectSpread(_objectSpread({}, _bgStyle2), {}, {
+        fill: (_ref3 = (_currentColor$bg = currentColor === null || currentColor === void 0 ? void 0 : currentColor.bg) !== null && _currentColor$bg !== void 0 ? _currentColor$bg : color === null || color === void 0 ? void 0 : color.bg) !== null && _ref3 !== void 0 ? _ref3 : _bgStyle2.fill,
+        stroke: (_ref4 = (_currentColor$stroke = currentColor === null || currentColor === void 0 ? void 0 : currentColor.stroke) !== null && _currentColor$stroke !== void 0 ? _currentColor$stroke : color === null || color === void 0 ? void 0 : color.stroke) !== null && _ref4 !== void 0 ? _ref4 : _bgStyle2.stroke
+      }, renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.bgStyle));
+      textShapes === null || textShapes === void 0 || textShapes.forEach(function (textShape) {
+        var _ref5, _currentColor$text;
+        textShape === null || textShape === void 0 || textShape.attr(_objectSpread(_objectSpread({}, _textStyle2), {}, {
+          fill: (_ref5 = (_currentColor$text = currentColor === null || currentColor === void 0 ? void 0 : currentColor.text) !== null && _currentColor$text !== void 0 ? _currentColor$text : color === null || color === void 0 ? void 0 : color.text) !== null && _ref5 !== void 0 ? _ref5 : _textStyle2.fill
+        }, renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.textStyle));
+      });
+      return;
+    }
+
+    // 处理选中状态
+    if (name === "click" && hasSelected) {
+      var _ref6, _currentColor$bg2, _ref7, _currentColor$stroke2;
+      var isSelected = Boolean(value);
+      var _renderStyle = render === null || render === void 0 ? void 0 : render(item._cfg, isSelected ? "selected" : "default");
+      var _bgStyle3 = isSelected ? _selectedBgStyle : _bgStyle;
+      var _textStyle3 = isSelected ? _textSelectedStyle : _textStyle;
+      var _currentColor = isSelected ? selectedColor : color;
+      keyShape === null || keyShape === void 0 || keyShape.attr(_objectSpread(_objectSpread({}, _bgStyle3), {}, {
+        fill: (_ref6 = (_currentColor$bg2 = _currentColor === null || _currentColor === void 0 ? void 0 : _currentColor.bg) !== null && _currentColor$bg2 !== void 0 ? _currentColor$bg2 : color === null || color === void 0 ? void 0 : color.bg) !== null && _ref6 !== void 0 ? _ref6 : _bgStyle3.fill,
+        stroke: (_ref7 = (_currentColor$stroke2 = _currentColor === null || _currentColor === void 0 ? void 0 : _currentColor.stroke) !== null && _currentColor$stroke2 !== void 0 ? _currentColor$stroke2 : color === null || color === void 0 ? void 0 : color.stroke) !== null && _ref7 !== void 0 ? _ref7 : _bgStyle3.stroke
+      }, _renderStyle === null || _renderStyle === void 0 ? void 0 : _renderStyle.bgStyle));
+      textShapes === null || textShapes === void 0 || textShapes.forEach(function (textShape) {
+        var _ref8, _currentColor$text2;
+        textShape === null || textShape === void 0 || textShape.attr(_objectSpread(_objectSpread({}, _textStyle3), {}, {
+          fill: (_ref8 = (_currentColor$text2 = _currentColor === null || _currentColor === void 0 ? void 0 : _currentColor.text) !== null && _currentColor$text2 !== void 0 ? _currentColor$text2 : color === null || color === void 0 ? void 0 : color.text) !== null && _ref8 !== void 0 ? _ref8 : _textStyle3.fill
+        }, _renderStyle === null || _renderStyle === void 0 ? void 0 : _renderStyle.textStyle));
+      });
+    }
+  };
+
+  // ==================== 文本换行处理 ====================
+  var wrapText = function wrapText(label, maxWidth) {
+    var lines = [];
+    var currentLine = "";
+    var labelChars = (label === null || label === void 0 ? void 0 : label.split("")) || [];
+    labelChars === null || labelChars === void 0 || labelChars.forEach(function (char, idx) {
+      var _getTextSize = getTextSize(currentLine + char, _textStyle),
+        charWidth = _getTextSize.width;
+      var availableWidth = maxWidth - DEFAULT_PADDING * 2;
+      if (charWidth - TEXT_WIDTH_TOLERANCE > availableWidth) {
+        lines.push(currentLine);
+        currentLine = char;
+      } else {
+        currentLine += char;
+      }
+      if (idx === labelChars.length - 1) {
+        lines.push(currentLine);
+      }
+    });
+    return lines.length > 0 ? lines : [label || ""];
+  };
+
+  // ==================== 计算节点尺寸 ====================
+  var calculateNodeSize = function calculateNodeSize(label, fontSize) {
+    var _getTextSize2 = getTextSize(label, _textStyle),
+      width = _getTextSize2.width,
+      height = _getTextSize2.height;
+    var minWidth = fontSize + DEFAULT_PADDING * 2;
+    var nodeWidth = maxWidth ? Math.max(maxWidth, minWidth) : width + DEFAULT_PADDING * 2;
+    var lines = wrapText(label, nodeWidth);
+    var lineCount = lines.length;
+    var nodeHeight = height * lineCount + DEFAULT_LINE_HEIGHT + (lineCount - 1) * DEFAULT_LINE_GAP;
+    return {
+      width: nodeWidth,
+      height: nodeHeight,
+      lines: lines
+    };
+  };
+
+  // ==================== 计算文本位置 ====================
+  var calculateTextPosition = function calculateTextPosition(lineWidth, nodeWidth, direction) {
+    if (textAlign === "center") {
+      return -lineWidth / 2;
+    }
+    if (direction === "right") {
+      return -nodeWidth / 2 + DEFAULT_PADDING;
+    }
+    return -lineWidth + nodeWidth / 2 - DEFAULT_PADDING;
+  };
+
+  // ==================== 绘制 ====================
+  var draw = function draw(cfg, group) {
+    var _textStyle$fontSize, _color$bg, _color$stroke;
+    var renderStyle = render === null || render === void 0 ? void 0 : render(cfg, "default");
+    cfg.textStyle = _objectSpread(_objectSpread({}, _textStyle), renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.textStyle);
+    var index = cfg.level - rootLevel;
+    var colorArrayLength = colors.length + 1;
+    var color = colors === null || colors === void 0 ? void 0 : colors[index % colorArrayLength];
+    var fontSize = (_textStyle$fontSize = _textStyle.fontSize) !== null && _textStyle$fontSize !== void 0 ? _textStyle$fontSize : DEFAULT_FONT_SIZE;
+    var _calculateNodeSize = calculateNodeSize(cfg.label, fontSize),
+      nodeWidth = _calculateNodeSize.width,
+      nodeHeight = _calculateNodeSize.height,
+      lines = _calculateNodeSize.lines;
+    var lineCount = lines.length;
+    var textHeight = getTextSize(cfg.label, _textStyle).height;
+    var direction = cfg.direction || "right";
+    cfg.width = nodeWidth;
+    cfg.height = nodeHeight;
+    cfg.line = lineCount;
+
+    // 绘制背景
+    var node = group.addShape("rect", {
+      attrs: _objectSpread(_objectSpread(_objectSpread({}, _bgStyle), {}, {
+        fill: (_color$bg = color === null || color === void 0 ? void 0 : color.bg) !== null && _color$bg !== void 0 ? _color$bg : _bgStyle.fill,
+        stroke: (_color$stroke = color === null || color === void 0 ? void 0 : color.stroke) !== null && _color$stroke !== void 0 ? _color$stroke : _bgStyle.stroke
+      }, renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.bgStyle), {}, {
+        width: nodeWidth,
+        height: nodeHeight,
+        x: -nodeWidth / 2,
+        y: -(nodeHeight - DEFAULT_LINE_HEIGHT) / lineCount
+      }),
+      name: "rect-shape"
+    });
+
+    // 绘制文本
+    lines === null || lines === void 0 || lines.forEach(function (line, lineIndex) {
+      var _color$text;
+      var _getTextSize3 = getTextSize(line, _textStyle),
+        lineWidth = _getTextSize3.width;
+      var textX = calculateTextPosition(lineWidth, nodeWidth, direction);
+      var textY = textHeight * lineIndex + DEFAULT_LINE_HEIGHT / 2 + lineIndex * DEFAULT_LINE_GAP;
+      group.addShape("text", {
+        attrs: _objectSpread(_objectSpread(_objectSpread({}, _textStyle), {}, {
+          fill: (_color$text = color === null || color === void 0 ? void 0 : color.text) !== null && _color$text !== void 0 ? _color$text : _textStyle.fill
+        }, renderStyle === null || renderStyle === void 0 ? void 0 : renderStyle.textStyle), {}, {
+          text: line,
+          x: textX,
+          y: textY,
+          position: direction
+        }),
+        name: "text-shape"
+      });
+    });
+
+    // 绘制展开折叠图标
+    var hasChildren = cfg.children && cfg.children.length > 0;
+    if (hasChildren) {
+      var iconX = direction === "right" ? nodeWidth / 2 : -nodeWidth / 2;
+      var iconY = -(nodeHeight - DEFAULT_LINE_HEIGHT) / lineCount + nodeHeight / 2;
+      group.addShape("marker", {
+        attrs: _objectSpread(_objectSpread({
+          r: DEFAULT_ICON_RADIUS
+        }, _collapseIconStyle), {}, {
+          x: iconX,
+          y: iconY,
+          symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
+          cursor: "pointer"
+        }),
+        name: "collapse-icon"
+      });
+    }
+
+    // 绘制连接桩
+    if (showPort) {
+      var _color$port;
+      var portX = direction === "right" ? -nodeWidth / 2 - DEFAULT_PORT_WIDTH : nodeWidth / 2;
+      var portY = -(nodeHeight - DEFAULT_LINE_HEIGHT) / lineCount + nodeHeight / 2 - DEFAULT_PORT_HEIGHT / 2;
+      group.addShape("rect", {
+        attrs: _objectSpread(_objectSpread({
+          fill: (_color$port = color === null || color === void 0 ? void 0 : color.port) !== null && _color$port !== void 0 ? _color$port : _portStyle.fill
+        }, _portStyle), {}, {
+          x: portX,
+          y: portY,
+          width: DEFAULT_PORT_WIDTH,
+          height: DEFAULT_PORT_HEIGHT,
+          radius: direction === "right" ? [DEFAULT_PORT_WIDTH, 0, 0, DEFAULT_PORT_WIDTH] : [0, DEFAULT_PORT_WIDTH, DEFAULT_PORT_WIDTH, 0]
+        }),
+        name: "port-shape"
+      });
+    }
+
+    // 自定义形状
+    if (addShape) {
+      addShape(group, cfg);
+    }
+    return node;
+  };
+  return {
+    options: options,
+    setState: setState,
+    draw: draw
+  };
+}