带有 collapseAll 的 Cytoscape 布局预设和在扩展节点组上更改布局

Question

我正在使用 cytoscape js 与 react cytoscape 和 cytoscape undoRedo 以及 cytoscape expand collapse。在第一次渲染时，我想按预设进行布局（我有所有节点的位置）。它运行良好，但是当我执行 api.collapseAll() 时，节点似乎没有这些位置。即使分组节点与父节点具有相同的位置。展开时我想使用 cose bilkent 布局。有办法吗？

import React, { useRef, useEffect, useState } from 'react';
import Cytoscape from 'cytoscape';
import CytoscapeComponent from 'react-cytoscapejs';
import COSEBilkent from 'cytoscape-cose-bilkent';
import undoRedo from 'cytoscape-undo-redo';
import expandCollapse from 'cytoscape-expand-collapse';

const Test = ({}) => {
  const [cy, setCy] = useState(null);

  useEffect(() => {
    if (cy) {

      const api = cy.expandCollapse({
        layoutBy: {
          name: 'cose-bilkent',
          // name: 'preset', I want to have this layout on first render
          animate: 'end',
          randomize: false,
          fit: false
        },
        fisheye: true
      });
      cy.undoRedo();
      api.collapseAll();
    }
  }, [cy]);
return (
    <CytoscapeComponent
      stylesheet={styles}
      cy={cy => {
        setCy(cy);
      }}
      elements={elements}
      style={{ width: '1200px', height: '1200px'}}
    />
  );
}

Answer 1

是的，这是可能的。我是通过在 collapseAll 方法中设置 layoutBy 实现的；)

带有 collapseAll 的 Cytoscape 布局预设和在扩展节点组上更改布局

Cytoscape layout preset with collapseAll and changing layout on expand nodes group

cytoscape.js

reactjs