Menu
I'm trying to include a JointJS diagram in my React+Flux project. I started from an existing demo available there.
My idea is to embed the diagram in an higher level component that will be reused inside my project.
The structure that I came up with is the following:
index.html
...
<body>
<section id="mySec"></section>
...
app.js
...
ReactDOM.render(
<JointJSDiagram id="1"/>,
document.getElementById('mySec')
);
JointJSDiagram.react.js
...
var JointJSDiagramStore = require('../stores/JointJSDiagramStore');
class JointJSDiagram extends React.Component {
...
componentDidMount() {
var el = this.refs[this.props.placeHolder];
document.addEventListener("DOMContentLoaded", function(elt){
return function(){JointJSDiagramStore.buildDiagram(elt)};
}(el), false);
}
...
render() {
return (<div ref={this.props.placeHolder}/>);
}
...
}
module.exports = JointJSDiagram;
JointJSDiagramStore.js
...
var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');
var _graph = new joint.dia.Graph();
var _paper = new joint.dia.Paper({
width: 600,
height: 200,
model: _graph,
gridSize: 1
});
var JointJSDiagramStore = assign({}, EventEmitter.prototype, {
...
buildDiagram: function(el) {
_paper.el = el;
// In here I used the code from: http://www.jointjs.com/demos/fsa
function state(x, y, label) {
var cell = new joint.shapes.fsa.State({
position: { x: x, y: y },
size: { width: 60, height: 60 },
attrs: {
...
...
...
link(star, block, 'other', [{x: 650, y: 290}]);
link(star, code, '/', [{x: 490, y: 310}]);
link(line, line, 'other', [{x: 115,y: 100}, {x: 250, y: 50}]);
link(block, block, 'other', [{x: 485,y: 140}, {x: 620, y: 90}]);
link(code, code, 'other', [{x: 180,y: 500}, {x: 305, y: 450}]);
},
...
});
...
module.exports = JointJSDiagramStore;
The problem is that nothing is visualized except for some (7) warnings stating:
Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by
JointJSDiagram.
UPDATE
If I explicitly use the id instead of refs like this:
JointJSDiagramStore.js
...
componentDidMount() {
var el = document.getElementById(this.props.placeHolder);
document.addEventListener("DOMContentLoaded", function(elt){
return function(){JointJSDiagramStore.buildDiagram(elt)};
}(el), false);
JointJSDiagramStore.addChangeListener(this._onChange);
}
...
render() {
return (<div id={this.props.placeHolder}/>);
}
...
I don't receive Warnings anymore, but nothing is still displayed on the placeholder div.
512
This quick test worked for me. I'm using react 0.14.3
class Graph extends React.Component {
constructor(props) {
super(props);
this.graph = new joint.dia.Graph();
}
componentDidMount() {
this.paper = new joint.dia.Paper({
el: ReactDOM.findDOMNode(this.refs.placeholder),
width: 600,
height: 200,
model: this.graph,
gridSize: 1
});
const rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: {
rect: { fill: 'blue' },
text: { text: 'my box', fill: 'white' }
}
});
const rect2 = rect.clone();
rect2.translate(300);
const link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
this.graph.addCells([rect, rect2, link]);
}
render() {
return <div ref="placeholder" ></div>;
}
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
