CODEWITHSUNDEEP
jsonjointjs
Sumit Patel
Sumit Patel

Reputation: 2587

Getting error dia.ElementView: markup required from graph.fromJSON(json)

While doing one of my assignment where I want to draw diagram form json with help of rappidJS/JointJS. I was referring to below link https://resources.jointjs.com/tutorial/serialization I am getting below error

dia.ElementView: markup required

The json I am using to populate is 

{
"cells": [{
    "type": "standard.Rectangle",
    "position": {
        "x": 70,
        "y": 70
    },
    "size": {
        "width": 70,
        "height": 70
    },
    "angle": 0,
    "id": "79e30352-ad4f-417a-807a-0427d605a9f4",
    "z": 1

}]

}

and the graph and paper code are as follow 

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
                width: $('.paper-container').width(),
                height: $('.paper-container').height(),
                gridSize: 10,
                drawGrid: true,
                model: graph,
                interactive: {linkMove: false},
                defaultLink: new joint.dia.Link({
                      attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }}
                }),
                async: true
            });

and the error I am getting is 

Uncaught Error: dia.ElementView: markup required
at child.renderMarkup (rappid.min.js:14)
at child.render (rappid.min.js:14)
at child.e.render (rappid.min.js:14)
at child.confirmUpdate (rappid.min.js:14)
at child.updateView (rappid.min.js:14)
at child.updateViewsBatch (rappid.min.js:14)
at child.updateViewsAsync (rappid.min.js:14)

I am using Rappid 3.0 version here.

Upvotes: 0

Views: 2194

Answers (1)

Mike Grant
Mike Grant

Reputation: 209

Make sure you have the cellNamespace of the graph set on creation and also have the cellViewNamespace of the paper set.

const graph = new joint.dia.Graph({}, {cellNamespace: joint.shape});
const paper = new joint.dia.Paper({model: graph, cellViewNamespace: joint.shapes});

After that, make sure that all custom element extends are on the joint.shape object. So if you have a custom element defined like so:

const NewElement = joint.dia.Element.define("node.NewElement", {size: {width:70,height: 70},... });

Then ensure that the node.NewElement element is on the joint.shapes object like this. joint.shapes.node = {}; joint.shapes.node.NewElement = NewElement;

Upvotes: 2

Related Questions