JointJS - Element With Edges

by Roman Bruckner

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.3/joint.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.3/joint.min.css">
<div id="paper" />

CSS

#paper {
  border: 1px solid gray;
  float: left;
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

JavaScript

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 500,
  height: 300,
  model: graph
});

var Edges = joint.dia.Element.define('Edges', {
    size: {
        width: 100,
        height: 100
    },
    attrs: {
        left: {
            stroke: 'black',
            fill: 'red',
            d: 'M 0 0 10 0 10 100 0 100 z'
        },
        bottom: {
            stroke: 'black',
            fill: 'yellow',
            d: 'M 0 90 100 90 100 100 0 100 z'
        },
        top: {
            stroke: 'black',
            fill: 'blue',
            d: 'M 10 7 17 0 100 83 93 90 z'
        },
        right: {
            stroke: 'black',
            fill: 'red',
            display: 'none'
        },
        topLeft: {
            opacity: 0,
            width: 20,
            height: 20,
            x: 0,
            y: 0,
            cursor: 'pointer',
            event: 'element:top-left-click'
        }
    }
}, {

    markup: [{
        tagName: 'path',
        selector: 'top',
    }, {
        tagName: 'path',
        selector: 'bottom'
    }, {
        tagName: 'path',
        selector: 'left'
    }, {
        tagName: 'path',
        selector: 'right'
    }, {
        tagName: 'rect',
        selector: 'topLeft'
    }],

    setOneEdge: function() {

    },

    setTwoEdges: function() {
        // set attrs to show
    },

    setThreeEdges: function() {
        //
    },

    setFourEdges: function() {

    }
});

paper.on('element:top-left-click', function(elementView, evt) {
    alert('top left clicked');
    // some logic
    evt.stopPropagation();
		elementView.model.setTwoEdges();
});

var edges = new Edges();
edges.position(100, 100);
edges.addTo(graph);