Search code examples
loadshapesjointjsrappidstencils

I cannot load a custom shape in Rappid/jointJS using function fromJSON

In my Stencil I have many shapes of type basic.Circle which work great so far with codes similar to the following one:

new joint.shapes.basic.Circle({
    size: { width: 5, height: 3 },
    attrs: {
        circle: { width: 50, height: 30, fill: '#602320' },
        text: { text: 'START', fill: '#ffffff', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 }
    }
})

For example this code creates this shape:

enter image description here

Now I want to create a shape with exactly the same attributes but with setting a specific type inside the definiition of this shape (type: "basic.Jump")

As a result the new code will be the following:

new joint.shapes.basic.Circle({
    type: 'basic.Jump',
    size: { width: 5, height: 5 },
    attrs: {
        circle: { width: 50, height: 30, fill: '#1E90FF' },
        text: { text: 'Jump', fill: '#ffffff', 'font-size': 10, stroke: '#000000', 'stroke-width': 0 }
    }
})

When I add this shape to paper it renders great and looks like this:

enter image description here

This shape can be successfully saved as JSON but it cannot be loaded using function fromJSON and the Console error is the following:

enter image description here

How should I overcome this problem?

Solution

  • I solved my problem via a very clever way:

    Since my problem was that I couldn't load my graph which consisted of shapes basic.Jump , now before loading my graph via function fromjson I turn the type of these shapes to basic.Circle so as to be able to render the graph and after successfully rendering the graph I set them again to basic.Jump

    And now I can Save/Load graphs without this error.