diff --git a/simple-mind-map/src/core/render/node/nodeCooperate.js b/simple-mind-map/src/core/render/node/nodeCooperate.js index 433c1be3..3fb89f6f 100644 --- a/simple-mind-map/src/core/render/node/nodeCooperate.js +++ b/simple-mind-map/src/core/render/node/nodeCooperate.js @@ -1,4 +1,4 @@ -import { Circle, G, Text, Image } from '@svgdotjs/svg.js' +import { Circle, G, Text, Image, Rect } from '@svgdotjs/svg.js' import { generateColorByContent } from '../../../utils/index' // 协同相关功能 @@ -15,24 +15,59 @@ function createUserListNode() { function createTextAvatar(item) { const { avatarSize, fontSize } = this.mindMap.opt.cooperateStyle const g = new G() - const str = item.isMore ? item.name : String(item.name)[0] - // 圆 - const circle = new Circle().size(avatarSize, avatarSize) - circle.fill({ - color: item.color || generateColorByContent(str) - }) - // 文本 - const text = new Text() - .text(str) - .fill({ - color: '#fff' + let str = item.isMore ? item.name : String(item.name)[0] + + if (item.useRect) { + str = String(item.name) + // 计算文本宽度 + const textWidth = str.length * fontSize * 0.6 // 估算文本宽度 + const padding = fontSize // 左右边距 + const rectWidth = Math.max(avatarSize, textWidth + padding * 2) // 确保最小宽度为avatarSize,并添加左右边距 + const rectHeight = avatarSize + + // 创建矩形 + const rect = new Rect() + .size(rectWidth, rectHeight) + .radius(rectHeight / 2) // 圆角矩形 + .fill({ + color: item.color || generateColorByContent(str) + }) + + // 文本 + const text = new Text() + .text(str) + .fill({ + color: '#fff' + }) + .css({ + 'font-size': fontSize + 'px', + 'text-anchor': 'middle', + 'dominant-baseline': 'central' + }) + .attr('x', rectWidth / 2) + .attr('y', rectHeight / 2) + + g.add(rect).add(text) + } else { + // 原有的圆形显示逻辑 + const circle = new Circle().size(avatarSize, avatarSize) + circle.fill({ + color: item.color || generateColorByContent(str) }) - .css({ - 'font-size': fontSize + 'px' - }) - .dx(-fontSize / 2) - .dy((avatarSize - fontSize) / 2) - g.add(circle).add(text) + // 文本 + const text = new Text() + .text(str) + .fill({ + color: '#fff' + }) + .css({ + 'font-size': fontSize + 'px' + }) + .dx(-fontSize / 2) + .dy((avatarSize - fontSize) / 2) + g.add(circle).add(text) + } + return g }