React-diagrams: links deSerialize problem

Created on 11 Apr 2017 · 13Comments · Source: projectstorm/react-diagrams

I've faced a problem. While deserializing simple diagram with custom nodes and ports this line returns null. But if I call it in a few msec - it returns correct value.
It seems the canvas doesn't rendered yet when this code is run.

Where could be a problem?

diagramEngine.js - getNodePortElement()

var selector = this.canvas.querySelector('.port[data-name="' + port.getName() + '"][data-nodeid="' + port.getParent().getID()+'"]');

bug

Source

gen4sp

👍3

Most helpful comment

Thanks for taking the time to do this, Ill jump onto this shortly and see what I can do.

dylanvorster on 6 Aug 2017

👍2

All 13 comments

does this still happen in the 2.4.8?

dylanvorster on 20 Apr 2017

Yes, it throws an error now "Cannot find Node Port element with nodeID:..."
It looks like just fired before the model was serialized.
I am making a request to a server and trying to serialize the model.

how code looks like

componentDidMount() {

    API.httpGet('/stage')
      .then((stageJson) => {
        let model2 = new SRD.DiagramModel();
        this.state.engine.setDiagramModel(model2);
        model2.deSerializeDiagram(stageJson, this.state.engine);
        subscribeModel(model2); //subscribe to model events
        this.setState({model:model2});
        _.each(model2.getNodes(),subscribeNode.bind(this)); //subscribe to node events
        this.forceUpdate()
      });
  }

gen4sp on 25 Apr 2017

I had the same error. I created a new LinkWidget and LinkFactory. I'm searching where can be the problem.

brunoalano on 21 Jun 2017

I a workaround that I made is reimporting 2 times, with a timeout of 100 milliseconds.

  serializationImport() {
    try {
      // Parse the JSON
      let object = JSON.parse(this.state.serializationInput);

      // Create a new Model
      let newModel = new SRD.DiagramModel();
      newModel.deSerializeDiagram(object, this.engine);

      // Render the `newModel`
      this.model = newModel;
      this.engine.setDiagramModel(newModel);
      this.forceUpdate();

      this._tempTimeout = setTimeout(() => {
        this.serializationImport();
        clearTimeout(this._tempTimeout);
      }, 100);

    } finally {
      this.toggleSerializationModal();
    }
  }

brunoalano on 21 Jun 2017

I have a similar issue. I am using default factories. When I deserialize the diagram with a new engine and empty model links don't get created with an error like

Cannot find Node Port element with nodeID: [1e0a6c3f-592b-49ab-a953-0b8eb67e1a55] and name: [sensorValue]

If I deserialize the model twice links appear. Probably something to do with deserialization order. Nodes need to be created before the links are created. I can see this in the logs as well, first links are added and then removed due to the node not found error message.