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.
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.
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.