woodenconsulting / react-js-diagrams

A flow based diagramming library written in React
MIT License
220 stars 61 forks source link

Links not shown #21

Open ghost opened 6 years ago

ghost commented 6 years ago

Hi,

thanks for the library.

I have a save button which saves json from the diagram with diagamModel.serializeDiagram(). If I try to load this JSON (via a button), no links are shown at first. If I press the button twice, links are shown. I think this should work? console.log outputs both with links attribute.

Any idea?

PS: I have 2 Node Types: Start, End.

PSS: I think that this has something to do with https://github.com/woodenconsulting/react-js-diagrams/blob/master/src/widgets/LinkLayerWidget.js#L18 Links are just removed. Is there any workaround? Maybe delay link draw until all ports are present?

let demoJSON = '{"id":"da9e4b55-eca3-4e1a-94ce-480d1fc80361","offsetX":0,"offsetY":0,"zoom":100,"links":[{"id":"d470aacd-3dc8-4559-ace5-56c3142d278d","_class":"LinkModel","selected":false,"type":"default","source":"4e7c175d-ced8-4728-b66b-298c696708f4","sourcePort":"07212dce-40bf-4ac9-b91e-7bb984693243","target":"a3fec017-e926-4a9b-9dc6-ab22484364c6","targetPort":"64ffa18b-2064-415a-878b-de7dbec588aa","points":[{"id":"fa206aad-363f-4622-8291-8351b68492f5","_class":"PointModel","selected":false,"x":105.1875,"y":154.5},{"id":"e66be012-890b-4c9e-9854-6e92b71d5d91","_class":"PointModel","selected":false,"x":194.171875,"y":246.5}],"extras":{}}],"nodes":[{"id":"4e7c175d-ced8-4728-b66b-298c696708f4","_class":"StartNodeModel","selected":false,"type":"start","x":60.671875,"y":121,"extras":{},"ports":[{"id":"07212dce-40bf-4ac9-b91e-7bb984693243","_class":"DefaultPortModel","selected":false,"name":"out0","parentNode":"4e7c175d-ced8-4728-b66b-298c696708f4","links":["d470aacd-3dc8-4559-ace5-56c3142d278d"],"in":false,"label":"out0"}],"name":"Start","color":"rgb(34,139,34)"},{"id":"a3fec017-e926-4a9b-9dc6-ab22484364c6","_class":"EndNodeModel","selected":false,"type":"end","x":184.671875,"y":213,"extras":{},"ports":[{"id":"64ffa18b-2064-415a-878b-de7dbec588aa","_class":"DefaultPortModel","selected":false,"name":"in0","parentNode":"a3fec017-e926-4a9b-9dc6-ab22484364c6","links":["d470aacd-3dc8-4559-ace5-56c3142d278d"],"in":true,"label":"in0"}],"name":"End","color":"rgb(139,0,0)"}]}';
        let remoteModel = JSON.parse(demoJSON);
        console.log("Remote model", remoteModel);

        let model = new RJD.DiagramModel();
        model.deSerializeDiagram(remoteModel, diagramEngine);
        let serializedModel = model.serializeDiagram();
        console.log("New model", model);

        this.props.updateModel(serializedModel);
roele commented 6 years ago

Ran into the same issue while generating a diagram from a custom JSON model. First rendition works but after updating the diagram model the links are missing.

@varakh Did you find any workaround?

ghost commented 6 years ago

Yes. Have a look here and here. I only did comment out diagramModel.removeLink(link);. But this is a workaround. I think it should be fixed correctly (within the entire model).

roele commented 6 years ago

Thanks a lot @varakh! Works like a charm now.