CODEWITHSUNDEEP
htmlvisualizationjointjs
Anupam Singh
Anupam Singh

Reputation: 36

Not able to run jointjs demo example of UML StateChart Diagram

I am new to jointjs. I am trying to run the demo example of UML Statechart Diagram given in the jointjs official website but when I am running it, I am getting the following errors and nothing is getting displayed.

Uncaught TypeError: this.findBySelector is not a function at joint.js:6872 at lodash.js:4944 at baseForOwn (lodash.js:3001) at lodash.js:4913 at Function.forEach (lodash.js:9359) at child.update (joint.js:6867) at child.wrapper [as update] (lodash.js:4968) at child.render (joint.js:7192) at child.protoProps.render (joint.js:4260) at child.renderView (joint.js:9888) joint.html:20

Uncaught TypeError: Cannot read property 'Plot' of undefined at joint.html:20 at joint.html:63

<!DOCTYPE html>
<html>
<head>
    <title>JOINT JS</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/1.0.3/joint.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/1.0.3/joint.js"></script>
    <script src="http://resources.jointjs.com/demos/joint/demo/umlsc/src/umlsc.js"></script>
</head>
<body>
    <div id="paper"></div>
</body>
</html>

<script>
$(function(){
    var graph = new joint.dia.Graph();

var paper = new joint.dia.Paper({
el: $('#paper'),
width: 800,
height: 600,
gridSize: 1,
model: graph
});


var uml = joint.shapes.uml;

var states = {

s0: new uml.StartState({
    position: { x:20  , y: 20 },
    size: { width: 30, height: 30 },
    attrs: {
        'circle': {
            fill: '#4b4a67',
            stroke: 'none'
        }
    }
}),

s1: new uml.State({
    position: { x:100  , y: 100 },
    size: { width: 200, height: 100 },
    name: "state 1",
    events: ["entry / init()","exit / destroy()"],
    attrs: {
        '.uml-state-body': {
            fill: 'rgba(48, 208, 198, 0.1)',
            stroke: 'rgba(48, 208, 198, 0.5)',
            'stroke-width': 1.5
        },
        '.uml-state-separator': {
            stroke: 'rgba(48, 208, 198, 0.4)'
        }
    }
}),

s2: new uml.State({
    position: { x:400  , y: 200 },
    size: { width: 300, height: 300 },
    name: "state 2",
    events: ["entry / create()","exit / kill()","A / foo()","B / bar()"],
    attrs: {
        '.uml-state-body': {
            fill: 'rgba(48, 208, 198, 0.1)',
            stroke: 'rgba(48, 208, 198, 0.5)',
            'stroke-width': 1.5
        },
        '.uml-state-separator': {
            stroke: 'rgba(48, 208, 198, 0.4)'
        }
    }
}),

s3: new uml.State({
    position: { x:130  , y: 400 },
    size: { width: 160, height: 60 },
    name: "state 3",
    events: ["entry / create()","exit / kill()"],
    attrs: {
        '.uml-state-body': {
            fill: 'rgba(48, 208, 198, 0.1)',
            stroke: 'rgba(48, 208, 198, 0.5)',
            'stroke-width': 1.5
        },
        '.uml-state-separator': {
            stroke: 'rgba(48, 208, 198, 0.4)'
        }
    }
}),

s4: new uml.State({
    position: { x:530  , y: 400 },
    size: { width: 160, height: 50 },
    name: "sub state 4",
    events: ["entry / create()"],
    attrs: {
        '.uml-state-body': {
            fill: 'rgba(48, 208, 198, 0.1)',
            stroke: 'rgba(48, 208, 198, 0.5)',
            'stroke-width': 1.5
        },
        '.uml-state-separator': {
            stroke: 'rgba(48, 208, 198, 0.4)'
        }
    }
}),

se: new uml.EndState({
    position: { x:750  , y: 550 },
    size: { width: 30, height: 30 },
    attrs: {
        '.outer': {
            stroke: "#4b4a67",
            'stroke-width': 2
        },
        '.inner': {
            fill: '#4b4a67'
        }
    }
})

};
_.each(states, function(c) { graph.addCell(c); });

states.s2.embed(states.s4);

var linkAttrs =  {
'fill': 'none',
'stroke-linejoin': 'round',
'stroke-width': '2',
'stroke': '#4b4a67'
};

var transitons = [
new uml.Transition({
    source: { id: states.s0.id },
    target: { id: states.s1.id },
    attrs: {'.connection': linkAttrs }
}),
new uml.Transition({
    source: { id: states.s1.id },
    target: { id: states.s2.id },
    attrs: {'.connection': linkAttrs }
}),
new uml.Transition({
    source: { id: states.s1.id },
    target: { id: states.s3.id },
    attrs: {'.connection': linkAttrs }
}),
new uml.Transition({
    source: { id: states.s3.id },
    target: { id: states.s4.id },
    attrs: {'.connection': linkAttrs }
}),
new uml.Transition({
    source: { id: states.s2.id },
    target: { id: states.se.id },
    attrs: {'.connection': linkAttrs }
})
];

graph.addCells(transitons);
        
    
});
        
    </script>

Upvotes: 0

Views: 276

Answers (1)

Anupam Singh
Anupam Singh

Reputation: 36

after lots of search, finally was able to fix it.

check versions of dependencies, especial Lodash. JointJS it's not compatible with version 4.x

jQuery: 2.2.4 Lodash: 3.10.1 Backbone: 1.3.3

Upvotes: 1

Related Questions