Включить схему JointJS в проекты React/Flux

Я пытаюсь включить диаграмму JointJS в проект React + Flux. Я начал с существующей демонстрационной версии there.Включить схему JointJS в проекты React/Flux

Моя идея - вставить диаграмму в компонент более высокого уровня, который будет повторно использоваться внутри моего проекта.

Структура, которую я придумал следующий:

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;

Проблема заключается в том, что ничего не визуализируется за исключением некоторых (7) предупреждения:

Предупреждение: ReactDOMComponent: не получить доступ к узлу DOM .getDOMNode(); , используйте узел напрямую. Этот узел DOM был обработан JointJSDiagram.

UPDATE

Если я явно использовать идентификатор вместо рефов, как это:

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}/>); 
} 
...

я не получаю предупреждения больше, но ничего не отображается по-прежнему на заполнителем дел.

источник

2015-12-14 pedro.zena

Этот быстрый тест работал для меня. Я использую реагировать 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>; 
 
    } 
 
}

источник

2015-12-15 16:14:09

Включить схему JointJS в проекты React/Flux

ответ

Смежные вопросы