如何获取Cytoscape.js当前布局对象并在搜索过滤时复用

嘿，这个需求我之前做类似图谱应用时刚好碰到过，其实核心就是要把当前使用的布局实例存起来，而不是每次都重新创建，咱们一步步来解决：

第一步：提前创建并保存所有布局实例 #

不要每次切换布局都临时调用cy.layout({...})，而是在初始化的时候就把circle和cola的布局实例创建好并存在一个对象里，同时用变量跟踪当前活跃的布局：

// 初始化Cytoscape实例后，创建布局实例
let currentLayout;
const layoutInstances = {
  circle: cy.layout({
    name: 'circle',
    // 这里放你的circle布局配置，比如radius、spacing等
  }),
  cola: cy.layout({
    name: 'cola',
    // cola的配置，比如convergence、nodeSpacing等
    animate: true
  })
};

// 写个切换布局的函数
function switchToLayout(layoutName) {
  // 先停止当前正在运行的布局（防止多个布局同时跑）
  if (currentLayout) {
    currentLayout.stop();
  }
  // 更新当前布局实例
  currentLayout = layoutInstances[layoutName];
  // 启动新布局
  currentLayout.run();
}

第二步：搜索过滤后复用当前布局 #

当你完成搜索过滤（隐藏不匹配的节点/边）后，不需要重新指定布局名称，直接调用已保存的currentLayout实例的run()方法就行——它会自动用当前布局的配置，基于可见的元素重新计算布局：

// 假设你的搜索过滤函数是这样的
function filterByQuery(query) {
  // 隐藏不匹配的元素
  cy.elements().not(`[id *= "${query}"]`).hide();
  // 显示匹配的元素
  cy.elements(`[id *= "${query}"]`).show();
  
  // 用当前布局重新布局可见元素
  if (currentLayout) {
    // 对于cola这种持续运行的布局，先停止再重启更稳妥
    currentLayout.stop();
    currentLayout.run();
  }
}

额外技巧：如果没提前保存实例，怎么获取当前布局？ #

如果之前没做实例存储，也可以通过cy.layouts()方法获取所有已创建的布局实例数组，然后根据布局名称或者活跃状态找到当前的：

function getActiveLayout() {
  // 假设你用变量track了当前布局名称，比如currentLayoutName
  return cy.layouts().find(layout => layout.options.name === currentLayoutName);
}

不过这种方式不如提前存储实例可靠，毕竟布局实例的name可能和你配置的一致，但还是推荐第一种提前保存的方式。

这样调整后，不管用户当前用的是circle还是cola布局，搜索过滤后都会沿用当前布局重新排列可见元素，完美解决你的问题～

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