jointjs

Dynamically setting the model of a paper

Is there a way I can dynamically set the model of a paper (and maybe, later, change it to another layer)?

Or are JointJS / Rappid limited to (1 model:1 paper)?

Basically, I'd like to be able to dynamically switch between several models and have a single paper draw all those switches.

Solution

  • Just change the model and rerender your paper

    const graph1 = new joint.dia.Graph();
const graph2 = new joint.dia.Graph();
const paper = new joint.dia.Paper({
            el: document.getElementById('paper'),
            height: '100%',
            width: '100%'
            });
            
function setPapaerModel(paper, model) {
  paper.model = model; //set model
  paper.render();
}

//Then you can change as you wish
setPaperModel(paper, graph2);