Gojs

Question

我正在将 gojs 与 react 集成，并成功集成了节点数组和链接数组，并且能够在我的页面中看到节点。

但最难的是，集成了 ReactOverview（小地图），但我只能在页面上看到没有图表的小矩形框。

将在这里分享我的代码

    import PropTypes from 'prop-types';
    import { connect } from 'react-redux';
    import { ReactDiagram, ReactOverview } from 'gojs-react';
    import * as go from 'gojs';
    class DiagramContainer extends React.Component {
      diagramRef;
      static propTypes = {
        diagramData: PropTypes.object.isRequired,
      };
      constructor(props) {
        super(props);
        this.diagramRef = React.createRef();
    
        this.state = {};
      }
      initDiagram = () => {
        const $ = go.GraphObject.make;
    
        const diagram = $(go.Diagram, {
          'undoManager.isEnabled': true, 
          'animationManager.isEnabled': false,
          // 'undoManager.maxHistoryLength': 0,  
          model: $(go.GraphLinksModel, {
            linkKeyProperty: 'key', 
            linkFromPortIdProperty: 'fromPort',
            linkToPortIdProperty: 'toPort',
          }),
        });
        const defaulttemplate = $(
          go.Node,
          'Vertical',
          $(
            go.Panel,
            'Auto',
            $(
              go.Shape,
              'hexagon',
              {
                width: 160,
                height: 160,
              },
            ),
            $(
              go.TextBlock,


            }
          )
        );
        var templateMap = new go.Map();
        templateMap.add('normal', defaulttemplate);
     
                //dummy codes
            },
          })
        );
    
        return diagram;
      };
      initDiagramOverview = () => {
        const $ = go.GraphObject.make;
        const overview = $(go.Overview, { contentAlignment: go.Spot.Center });
        return overview;
      };
      render() {
    const { diagramData } = this.props;
    return (
             <>
               <div style={{ height: '100%' }}>
                <ReactDiagram
                 ref={this.diagramRef}
                 divClassName='diagram-main'
                 id='diagram'
                 initDiagram={this.initDiagram}
                 flowDiagramData={diagramData}
                 nodeDataArray={diagramData.dataArray}
                 linkDataArray={diagramData.linksArray}
                 skipsDiagramUpdate={diagramData.skipsDiagramUpdate}
                 modelData={}
                />
              </div>
              <ReactOverview
                initOverview={this.initDiagramOverview}
                divClassName='diagram-observed'
                observedDiagram={this.diagramRef.current?.getDiagram() || null}
              />
           </>
          );
      }
    }
    export default DiagramContainer
    ```
    

But am not seeing mini map , i can just see a rectangle box instead of minimap. Still i cross checked with various things and am not sure what went wrong 

Can you guys help me to resolve this issue

Answer 1

问题是你的组件只为给定的 props 渲染一次（任何交互式图表更改都由 GoJS 在内部处理，而 React 不会注意到这一点）。当它第一次也是唯一一次呈现时，this.diagramRef.current 仍然是 null。如果你在 render 方法中登录，你可以看到这一点。

您需要使用状态来保留“观察图”以供概览。然后当概述组件初始化时，图表应该全部设置好，您可以将新状态设置为 re-render:

在概览中添加您要观察的图表的值状态：

constructor(props) {
    super(props);

    this.state = {
      observedDiagram: null
    };

    this.diagramRef = React.createRef();
}

在 ReactOverview 组件中使用此状态：

<ReactOverview
  initOverview={this.initDiagramOverview}
  divClassName="diagram-overview-component"
  observedDiagram={this.state.observedDiagram}
/>

设置概览组件初始化时的状态：

initDiagramOverview = () => {
    this.setState({
      observedDiagram: this.diagramRef.current?.getDiagram() || null
    });

    const $ = go.GraphObject.make;
    const overview = $(go.Overview, { contentAlignment: go.Spot.Center });
    return overview;
  };

你可以在这个sandbox

中看到它是如何工作的

Gojs - MiniMap（Reactoverview 未加载），但节点已加载

Gojs - MiniMap ( Reactoverview is not getting loaded) , But nodes get loaded

javascript

reactjs