projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.58k stars 1.17k forks source link

conditional rendering crash with link labels on switch tabs canvas = null #811

Open maxtsh opened 3 years ago

maxtsh commented 3 years ago

Hello.

I am having an issue with link labels when I try to switch between two tabs, actually conditional rendering the canvas and other page data.

when I open canvas it's fine but after I put a node with labeled links then switch between canvas and the other page, suddenly canvas goes null and the diagram crashes to a white screen.

this is my Application which creates engine and model:

`function Application(serialJson) { // engine setup const engine = createEngine({ registerDefaultZoomCanvasAction: false }); engine.maxNumberPointsPerLink = 0; // setup diagram model const model = new DiagramModel(); // Dis-Allowing loose links const state = engine.getStateMachine().getCurrentState(); if (state instanceof DefaultDiagramState) { state.dragNewLink.config.allowLooseLinks = false; } engine .getPortFactories() .registerFactory( new BaseNodePortFactory( 'Port', config => new BaseNodePortModel(PortModelAlignment.RIGHT), ), ); engine.getNodeFactories().registerFactory(new BaseNodeFactory()); engine.getLinkFactories().registerFactory(new AdvancedLinkFactory()); model.addAll(); model.options.zoom = 85; // set default zoom level engine.setModel(model); if (serialJson) { engine.getModel().deserializeModel(serialJson, engine); }

function getActiveDiagram() { return model; } function getDiagramEngine() { return engine; } return { model, getActiveDiagram, getDiagramEngine }; }`

and inside createLinkModel in PortModel I generate labels.

sarastef commented 3 years ago

I had the same issue but instead to creates engines and rerender for each tab, you could save your model in you tab and set your engine. I hope it can help you.