I was integrating gojs with react and was successfully able to integrated the nodes array and links array and was able to see the nodes in my page.
But the toughest thing , integrated ReactOverview (minimap) but i can see only small rectangle box on the page with no diagram in it.
Will share my code here
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
The problem is that your component only renders once for the given props (any interactive diagram changes are handled internally by GoJS and React is oblivious to that). When it renders the first and only time, this.diagramRef.current
is still null
. You can see this if you log it in the render
method.
You need to use state to keep the "observed diagram" for the overview. Then when the overview component initializes, the diagram should be all set up and you can set the new state to cause re-render:
constructor(props) {
super(props);
this.state = {
observedDiagram: null
};
this.diagramRef = React.createRef();
}
ReactOverview
component:<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;
};
You can see how it works in this sandbox