Molstar 设置原子只能单选

最新推荐文章于 2025-11-27 12:29:19 发布

原创最新推荐文章于 2025-11-27 12:29:19 发布 · 411 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #molstar #js

查看更多详情

设置场景中用户使用鼠标左键只能选中一个原子，不允许用户多选！

效果如下：

Atoms Single-choice

1：场景只支持单选原子的情况

const SPEC = {
    behaviors: [
        PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci, { preferAtoms: true }), // 原子优先，即不选中键连
        PluginSpec.Behavior(PluginBehaviors.Representation.SelectLoci, {
            preferAtoms: true, // 原子优先，即不选中键连
            bindings: {
                clickSelect: Binding.Empty,
                clickToggleExtend: Binding.Empty,
                clickSelectOnly: Binding([Trigger(B.Flag.Primary, M.create())], 'SelectOnly', 'SelectOnly element using ${triggers}'), // 配置仅支持单选
                clickToggle: Binding.Empty,
                clickDeselect: Binding.Empty,
                clickDeselectAllOnEmpty: Binding.Empty,
            }
        }),
    ]
};

// 场景初始化
const spec: PluginSpec = Object.assign({ behaviors: [] }, SPEC, props.spec);
this.plugin = new PluginContext(spec);

2. 在官方默认的案例中设置单选

首先设置为选中模式

this.plugin.selectionMode = true;

更新 PluginBehaviors 参数

const state = this.plugin.state.behaviors;
const update = state.build();
const highlightLoci = state.select(StateSelection.Generators.ofTransformer(PluginBehaviors.Representation.HighlightLoci));
const selectLoci = state.select(StateSelection.Generators.ofTransformer(PluginBehaviors.Representation.SelectLoci));
const selections = [...highlightLoci, ...selectLoci];
for (const selection of selections) {
    update.to(selection).update({ ...selection.params?.values, preferAtoms: true });
}
PluginCommands.State.Update(this.plugin, { state, tree: update, options: { doNotLogTiming: true } });

更新 interactivity 层级为 element

this.plugin.managers.interactivity.setProps({ granularity: "element" });