如何实现1.x 工具栏里的全屏

[scarletfrank]

import { Toolbar } from '@antv/graphin-components';

目前了解的情报

• 我已经拿G6写了一个自定义组件，写了一个一键拓展的操作，我想再写一个让画布全屏/取消全屏的操作
• 1.x的工具栏组件里有个全屏的按钮，我添加到代码里，但没有生效。我看了下1.x ToolBar组件实现的代码，但没找到具体的实现，感觉都是些接口
• 我看了语雀里的文档，似乎是说2.6.0开始重新设计了组件。

P.S. 今天刚看到GraphInsight可以用了，看到有个Neo4j开箱即用的案例，下周体验下。也许下个项目我可以试着用GraphInsight

[scarletfrank]

大概写了一个实现，目前发现这种实现的问题在于全屏之后，加入的_MiniMap_组件消失了，以及目前我工具栏的写法不知道怎么实现点了按钮之后图标的SVG修改（即放大的图标和缩小的图标）

// App组件里定义
const graphRef = useRef(null);
// return() 里
<Graphin
  ref={graphRef}
>
   <Toolbar gRef={graphRef} />
/Graphin>

// 砍了很多代码，我这个Toolbar写法我记得也是issue里翻出来的，因为我是要在Graphin中使用G6
const Toolbar = (props) => {
  const { graph } = React.useContext(GraphinContext);
  const { updateState, state, gRef } = props;
  useEffect(() => {
    const toolbar = new G6.ToolBar({
      getContent: () => `
            <ul class='g6-component-toolbar'>
              <li code="fullscreen" title="全屏">
                <svg >
                </svg>
              </li>
            </ul>`,
      handleClick: (code, graph) => {
        switch (code) {
          case 'fullscreen':
            if (document.fullscreenElement) {
              document.exitFullscreen();
              message.info('退出全屏模式');
            } else {
              gRef.current.graphDOM.requestFullscreen();
              message.info('进入全屏模式');
            }
            // console.log(gRef.current.graphDOM);
            break;
        }
      },
    });
    graph.addPlugin(toolbar);
    return () => {
      if (toolbar && !toolbar.destroy) {
        graph.destroy();
        graph.removePlugin(toolbar);
      }
    };
  });
  return null;
};
export default Toolbar;

[pomelo-nwu]

@scarletfrank GraphInsight 体验的如何啦