如何在Rappid Halo事件处理器及工具手柄事件中获取元素实例？

1. 如何在Halo事件处理器中访问元素对象？ #

在Rappid的Halo组件里，事件回调的上下文（this）默认指向Halo实例本身，而Halo从一开始就和对应的cellView绑定在一起——你只需要通过this.get('cellView')拿到绑定的cellView，再通过cellView.model就能获取到目标元素对象（也就是JointJS里的cell，可以是Element或Link）。

举个监听默认删除按钮的例子：

const halo = new joint.ui.Halo({
    cellView: myCellView
});

// 监听删除动作
halo.on('action:remove', function(evt) {
    // 获取绑定的cellView
    const cellView = this.get('cellView');
    // 获取对应的元素对象
    const element = cellView.model;
    // 执行后续操作，比如删除元素
    element.remove();
});

要是你是直接给Halo的DOM元素绑定jQuery事件，也可以通过DOM元素反向找到Halo实例：

$('.halo-handle').on('click', function(evt) {
    const haloContainer = $(evt.target).closest('.joint-halo');
    const halo = joint.ui.Halo.findByElement(haloContainer[0]);
    const element = halo.get('cellView').model;
    // 这里就可以操作元素了
});

2. 自定义Halo工具手柄事件时，如何获取cell/element或cellView？ #

你说的情况很常见——自定义手柄的事件回调里确实只会拿到jQuery.Event、x和y坐标，但别忘了回调的this还是指向Halo实例的！所以用同样的方法就能拿到cellView和元素对象。

看这个自定义手柄的完整示例：

const halo = new joint.ui.Halo({
    cellView: myCellView,
    handles: [
        {
            name: 'custom-adjust',
            position: 'e', // 右侧手柄
            icon: 'path/to/your-icon.svg',
            events: {
                mousedown: function(evt, x, y) {
                    // 核心：通过this获取Halo实例
                    const cellView = this.get('cellView');
                    const targetElement = cellView.model;
                    
                    // 现在就能基于元素做操作了
                    console.log('当前操作的元素ID:', targetElement.id);
                    // 比如调整元素宽度
                    targetElement.resize(targetElement.get('size').width + 20, targetElement.get('size').height);
                }
            }
        }
    ]
});

要是你用了箭头函数导致this上下文改变，那可以在初始化Halo时把cellView存到外部变量里，或者在定义手柄时额外传递参数——不过一般来说，保持回调为普通函数，直接用this访问Halo实例是最简洁的方案。

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