JointJS：如何点击时修改elementTools.Button的内容

元素工具完全支持在事件中修改，不需要替换为自定义元素，以下是具体实现步骤和代码示例：

1. 定义带文本的工具按钮Markup #

在工具的markup中明确text元素的选择器，方便后续定位修改：

const toggleTool = new joint.elementTools.Button({
    markup: [
        // 按钮背景矩形
        {
            tagName: 'rect',
            selector: 'buttonBg',
            attributes: {
                width: 22,
                height: 22,
                fill: '#f0f0f0',
                stroke: '#666',
                'stroke-width': 1,
                rx: 2
            }
        },
        // 切换文本元素，指定selector便于修改
        {
            tagName: 'text',
            selector: 'toggleText',
            attributes: {
                'font-size': '16',
                'text-anchor': 'middle',
                'dominant-baseline': 'middle',
                x: 11,
                y: 11,
                fill: '#333'
            },
            textContent: '+' // 初始文本
        }
    ],
    // 点击事件处理逻辑
    onClick: function() {
        // 方式1：通过工具实例的attr方法修改文本
        const currentText = this.attr('toggleText/textContent');
        const newText = currentText === '+' ? '-' : '+';
        this.attr('toggleText/textContent', newText);

        // 方式2：直接操作SVG元素（两种方式任选其一）
        // const textEl = this.el.querySelector('[selector="toggleText"]');
        // textEl.textContent = textEl.textContent === '+' ? '-' : '+';

        // 同步处理关联元素的标签修改
        this.model.attr('label/text', newText === '-' ? '已展开详情' : '点击展开');
    }
});

2. 将工具绑定到目标元素 #

把定义好的工具添加到元素的工具视图中：

// 创建基础矩形元素
const targetRect = new joint.shapes.standard.Rectangle({
    position: { x: 120, y: 120 },
    size: { width: 180, height: 90 },
    attrs: {
        label: { text: '点击展开' }
    }
});

// 添加工具到元素
targetRect.addTools(new joint.dia.ToolsView({
    tools: [toggleTool]
}));

// 将元素添加到画布
targetRect.addTo(graph);

关键说明 #

• 工具实例的attr()方法可以通过markup中定义的selector直接修改内部元素的属性，包括textContent
• 也可以通过工具的el属性获取对应的SVG DOM元素，直接操作原生属性
• 元素工具的事件回调中，this指向工具实例，this.model关联到绑定的图形元素，方便同步修改元素属性

内容的提问来源于stack exchange，提问作者Raj